@scania/tegel
Version:
Tegel Design System
375 lines (374 loc) • 13.5 kB
JavaScript
import { h, } from "@stencil/core";
import generateUniqueId from "../../utils/generateUniqueId";
/**
* @slot label - Slot for the label text.
*/
export class TdsCheckbox {
constructor() {
/** ID for the Checkbox's input element. Randomly generated if not specified. */
this.checkboxId = generateUniqueId();
/** Sets the Checkbox in a disabled state */
this.disabled = false;
/** Make the Checkbox required */
this.required = false;
/** Sets the Checkbox as checked */
this.checked = false;
/** Sets the Checkbox as indeterminate */
this.indeterminate = false;
this.handleChange = () => {
this.checked = !this.checked;
this.indeterminate = false;
this.tdsChange.emit({
checkboxId: this.checkboxId,
checked: this.checked,
indeterminate: this.indeterminate,
value: this.value,
});
};
}
/** Toggles the checked value of the component. */
async toggleCheckbox() {
this.checked = !this.checked;
this.indeterminate = false;
return {
checkboxId: this.checkboxId,
checked: this.checked,
};
}
/** Method to programmatically focus the checkbox element */
async focusElement() {
if (this.inputElement) {
this.inputElement.focus();
}
}
handleIndeterminateState() {
this.inputElement.indeterminate = this.indeterminate;
}
/** Set the input as focus when clicking the component */
handleFocus(event) {
this.tdsFocus.emit(event);
}
/** Set the input as blur when clicking outside the component */
handleBlur(event) {
this.tdsBlur.emit(event);
}
/** Listens for a reset event inside a form */
handleFormReset(event) {
if (this.host.closest('form') === event.target) {
this.checked = false;
this.indeterminate = false;
}
}
render() {
return (h("div", { key: 'dfffd2e58507c14f16d9c0979d1cf794296b83eb', class: "tds-checkbox" }, h("input", { key: '6003dd1ba8c0ffc40a7f3f692867e47801ebfb0d', ref: (inputElement) => {
if (inputElement)
this.inputElement = inputElement;
}, indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-label": this.tdsAriaLabel, "aria-describedby": this.tdsAriaDescribedby, required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
this.handleChange();
} }), h("label", { key: '0fb389206bd35497737b14a0cf12093a32de7881', htmlFor: this.checkboxId }, h("slot", { key: '7a085546f31a1aa6f4dd2ddab4f053bf86663dda', name: "label" }))));
}
static get is() { return "tds-checkbox"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() {
return {
"$": ["checkbox.scss"]
};
}
static get styleUrls() {
return {
"$": ["checkbox.css"]
};
}
static get properties() {
return {
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Name for the Checkbox's input element."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "name"
},
"checkboxId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "ID for the Checkbox's input element. Randomly generated if not specified."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "checkbox-id",
"defaultValue": "generateUniqueId()"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the Checkbox in a disabled state"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Make the Checkbox required"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "required",
"defaultValue": "false"
},
"checked": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the Checkbox as checked"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "checked",
"defaultValue": "false"
},
"indeterminate": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the Checkbox as indeterminate"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "indeterminate",
"defaultValue": "false"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Value for the Checkbox"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "value"
},
"tdsAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Value to be used for the aria-label attribute"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-aria-label"
},
"tdsAriaDescribedby": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Value to be used for the aria-describedby attribute"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-aria-describedby"
}
};
}
static get events() {
return [{
"method": "tdsChange",
"name": "tdsChange",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Sends unique Checkbox identifier and checked status when it is checked/unchecked."
},
"complexType": {
"original": "{\n checkboxId: string;\n checked: boolean;\n indeterminate: boolean;\n value?: string;\n }",
"resolved": "{ checkboxId: string; checked: boolean; indeterminate: boolean; value?: string | undefined; }",
"references": {}
}
}, {
"method": "tdsFocus",
"name": "tdsFocus",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Focus event for the Checkbox"
},
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": "global::FocusEvent"
}
}
}
}, {
"method": "tdsBlur",
"name": "tdsBlur",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Blur event for the Checkbox"
},
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": "global::FocusEvent"
}
}
}
}];
}
static get methods() {
return {
"toggleCheckbox": {
"complexType": {
"signature": "() => Promise<{ checkboxId: string; checked: boolean; }>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<{ checkboxId: string; checked: boolean; }>"
},
"docs": {
"text": "Toggles the checked value of the component.",
"tags": []
}
},
"focusElement": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Method to programmatically focus the checkbox element",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "indeterminate",
"methodName": "handleIndeterminateState"
}];
}
static get listeners() {
return [{
"name": "reset",
"method": "handleFormReset",
"target": "document",
"capture": false,
"passive": false
}];
}
}