@duetds/components
Version:
This package includes Duet Core Components and related tools.
291 lines (290 loc) • 9.6 kB
JavaScript
import { Host, h } from "@stencil/core";
import { createID } from "@duetds/js-utils";
export class DuetToggle {
constructor() {
this.toggleId = createID("DuetToggle");
/**
* Theme of the card. Can be one of: "default", "turva".
*/
this.theme = "";
/**
* Controls the margin of the component. Can be one of: "auto", "none".
*/
this.margin = "auto";
/**
* Label for the toggle.
*/
this.label = "label";
/**
* Check state of the checkbox.
*/
this.checked = false;
/**
* Component event handling.
*/
this.onClick = (ev) => {
ev.preventDefault();
this.setFocus();
this.checked = !this.checked;
};
}
checkedChanged(isChecked) {
this.duetChange.emit({
checked: isChecked,
value: this.value,
component: "duet-toggle",
});
}
/**
* Component lifecycle events.
*/
componentWillLoad() {
if (this.value === undefined) {
this.value = this.identifier;
}
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
}
setFocus() {
this.element.querySelector("input").focus();
}
/**
* render() function
* Always the last one in the class.
*/
render() {
const identifier = this.identifier || this.toggleId;
return (h(Host, { onClick: this.onClick, class: { "duet-m-0": this.margin === "none" } },
h("div", { class: {
"duet-toggle": true,
"duet-theme-turva": this.theme === "turva",
} },
h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", for: identifier }, this.label),
h("label", { class: "duet-switch", htmlFor: identifier },
h("input", { type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, id: identifier, role: this.role, name: this.name, checked: this.checked }),
h("div", { class: "duet-slider" })))));
}
static get is() { return "duet-toggle"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() { return {
"$": ["duet-toggle.scss"]
}; }
static get styleUrls() { return {
"$": ["duet-toggle.css"]
}; }
static get properties() { return {
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Theme of the card. Can be one of: \"default\", \"turva\"."
},
"attribute": "theme",
"reflect": false,
"defaultValue": "\"\""
},
"margin": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Controls the margin of the component. Can be one of: \"auto\", \"none\"."
},
"attribute": "margin",
"reflect": false,
"defaultValue": "\"auto\""
},
"accessibleActiveDescendant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Indicates the id of a related component\u2019s visually focused element."
},
"attribute": "accessible-active-descendant",
"reflect": false
},
"accessibleControls": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component."
},
"attribute": "accessible-controls",
"reflect": false
},
"accessibleOwns": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Indicates the id of a component owned by the checkbox."
},
"attribute": "accessible-owns",
"reflect": false
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Label for the toggle."
},
"attribute": "label",
"reflect": false,
"defaultValue": "\"label\""
},
"checked": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Check state of the checkbox."
},
"attribute": "checked",
"reflect": true,
"defaultValue": "false"
},
"value": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The value of the checkbox does not mean if it's checked or not, use the checked\nproperty for that."
},
"attribute": "value",
"reflect": true
},
"identifier": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Adds a unique identifier for the checkbox."
},
"attribute": "identifier",
"reflect": false
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Name of the checkbox."
},
"attribute": "name",
"reflect": false
},
"role": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines a specific role attribute for the input."
},
"attribute": "role",
"reflect": false
}
}; }
static get events() { return [{
"method": "duetChange",
"name": "duetChange",
"bubbles": false,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the checked property has changed."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}]; }
static get elementRef() { return "element"; }
static get watchers() { return [{
"propName": "checked",
"methodName": "checkedChanged"
}]; }
}