package.dist.vscode-checkbox.vscode-checkbox.js Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of elements Show documentation
Show all versions of elements Show documentation
Webcomponents for creating Visual Studio Code extensions
The newest version!
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { html, LitElement, nothing } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { FormButtonWidgetBase } from '../includes/form-button-widget/FormButtonWidgetBase.js';
import { LabelledCheckboxOrRadioMixin } from '../includes/form-button-widget/LabelledCheckboxOrRadio.js';
import styles from './vscode-checkbox.styles.js';
/**
* When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles
* can be applied through the `invalid` property.
*
* @attr name - Name which is used as a variable name in the data of the form-container.
* @attr label - Attribute pair of the `label` property.
* @prop label - Label text. It is only applied if component's innerHTML doesn't contain any text.
*
* @cssprop --vscode-font-family
* @cssprop --vscode-font-size
* @cssprop --vscode-font-weight
* @cssprop --vsc-foreground-translucent - Label font color. 90% transparency version of `--vscode-foreground` by default.
* @cssprop --vscode-settings-checkboxBackground
* @cssprop --vscode-settings-checkboxBorder
* @cssprop --vscode-settings-checkboxForeground
* @cssprop --vscode-focusBorder
*/
let VscodeCheckbox = class VscodeCheckbox extends LabelledCheckboxOrRadioMixin(FormButtonWidgetBase) {
get form() {
return this._internals.form;
}
/** @internal */
get type() {
return 'checkbox';
}
get validity() {
return this._internals.validity;
}
get validationMessage() {
return this._internals.validationMessage;
}
get willValidate() {
return this._internals.willValidate;
}
checkValidity() {
return this._internals.checkValidity();
}
reportValidity() {
return this._internals.reportValidity();
}
constructor() {
super();
this.autofocus = false;
this.checked = false;
this.defaultChecked = false;
this.invalid = false;
this.name = undefined;
/** @internal */
this.role = 'checkbox';
/**
* Associate a value to the checkbox. According to the native checkbox [specification](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value_2), If the component participates in a form:
*
* - If it is unchecked, the value will not be submitted.
* - If it is checked but the value is not set, `on` will be submitted.
* - If it is checked and value is set, the value will be submitted.
*/
this.value = '';
this.disabled = false;
this.indeterminate = false;
this.required = false;
this._handleClick = () => {
if (this.disabled) {
return;
}
this._toggleState();
};
this._handleKeyDown = (ev) => {
if (!this.disabled && (ev.key === 'Enter' || ev.key === ' ')) {
ev.preventDefault();
if (ev.key === ' ') {
this._toggleState();
}
if (ev.key === 'Enter') {
this._internals.form?.requestSubmit();
}
}
};
this._internals = this.attachInternals();
}
connectedCallback() {
super.connectedCallback();
this.addEventListener('keydown', this._handleKeyDown);
this.addEventListener('click', this._handleClick);
this.updateComplete.then(() => {
this._manageRequired();
this._setActualFormValue();
});
}
disconnectedCallback() {
this.removeEventListener('keydown', this._handleKeyDown);
this.removeEventListener('click', this._handleClick);
}
update(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
changedProperties) {
super.update(changedProperties);
if (changedProperties.has('checked')) {
this.ariaChecked = this.checked ? 'true' : 'false';
}
}
/** @internal */
formResetCallback() {
this.checked = this.defaultChecked;
}
/** @internal */
formStateRestoreCallback(state, _mode) {
if (state) {
this.checked = true;
}
}
// Sets the value of the control according to the native checkbox behavior.
// - If the checkbox is unchecked, the value will be null, so the control will
// excluded from the form.
// - If the control is checked but the value is not set, the value will be "on".
// - If the control is checked and value is set, the value won't be changed.
_setActualFormValue() {
let actualValue = '';
if (this.checked) {
actualValue = !this.value ? 'on' : this.value;
}
else {
actualValue = null;
}
this._internals.setFormValue(actualValue);
}
_toggleState() {
this.checked = !this.checked;
this.indeterminate = false;
this._setActualFormValue();
this._manageRequired();
this.dispatchEvent(new Event('change'));
/** @deprecated */
this.dispatchEvent(new CustomEvent('vsc-change', {
detail: {
checked: this.checked,
label: this.label,
value: this.value,
},
bubbles: true,
composed: true,
}));
}
_manageRequired() {
if (!this.checked && this.required) {
this._internals.setValidity({
valueMissing: true,
}, 'Please check this box if you want to proceed.', this._inputEl);
}
else {
this._internals.setValidity({});
}
}
render() {
const iconClasses = classMap({
icon: true,
checked: this.checked,
indeterminate: this.indeterminate,
});
const labelInnerClasses = classMap({
'label-inner': true,
});
const icon = html ``;
const check = this.checked && !this.indeterminate ? icon : nothing;
const indeterminate = this.indeterminate
? html ``
: nothing;
return html `
${indeterminate}${check}
`;
}
};
VscodeCheckbox.styles = styles;
/** @internal */
VscodeCheckbox.formAssociated = true;
/** @internal */
VscodeCheckbox.shadowRootOptions = {
...LitElement.shadowRootOptions,
delegatesFocus: true,
};
__decorate([
property({ type: Boolean, reflect: true })
], VscodeCheckbox.prototype, "autofocus", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], VscodeCheckbox.prototype, "checked", void 0);
__decorate([
property({ type: Boolean, reflect: true, attribute: 'default-checked' })
], VscodeCheckbox.prototype, "defaultChecked", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], VscodeCheckbox.prototype, "invalid", void 0);
__decorate([
property({ reflect: true })
], VscodeCheckbox.prototype, "name", void 0);
__decorate([
property({ reflect: true })
], VscodeCheckbox.prototype, "role", void 0);
__decorate([
property()
], VscodeCheckbox.prototype, "value", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], VscodeCheckbox.prototype, "disabled", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], VscodeCheckbox.prototype, "indeterminate", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], VscodeCheckbox.prototype, "required", void 0);
__decorate([
query('#input')
], VscodeCheckbox.prototype, "_inputEl", void 0);
VscodeCheckbox = __decorate([
customElement('vscode-checkbox')
], VscodeCheckbox);
export { VscodeCheckbox };
//# sourceMappingURL=vscode-checkbox.js.map