@scania/tegel
Version:
Tegel Design System
283 lines (282 loc) • 10.2 kB
JavaScript
import { h } from "@stencil/core";
import generateUniqueId from "../../utils/generateUniqueId";
/**
* @slot label - Slot for the label text.
*/
export class TdsToggle {
constructor() {
/** Sets the Toggle as checked */
this.checked = false;
/** Make the Toggle required */
this.required = false;
/** Size of the Toggle */
this.size = 'lg';
/** Sets the Toggle in a disabled state */
this.disabled = false;
/** ID of the Toggle's input element, if not specified, it's randomly generated */
this.toggleId = generateUniqueId();
this.handleToggle = () => {
this.checked = !this.checked;
this.tdsToggle.emit({
toggleId: this.toggleId,
checked: this.checked,
});
};
}
/** Toggles the Toggle. */
async toggle() {
this.checked = !this.checked;
return {
toggleId: this.toggleId,
checked: this.checked,
};
}
/** Method to programmatically focus the toggle element */
async focusElement() {
if (this.inputElement) {
this.inputElement.focus();
}
}
componentWillLoad() {
this.labelSlot = this.host.querySelector("[slot='label']");
}
render() {
return (h("div", { key: 'c1aa9475d114ceed43404e5782281f8890b98722', class: "tds-toggle" }, this.headline && (h("div", { key: '7734e6fec341d4b89857ad6d7d114c57684e7730', class: {
'toggle-headline': true,
'disabled': this.disabled,
} }, this.headline)), h("input", { key: '6a6420579c616daea95b0b07a194a0e4cc206c47', ref: (inputEl) => {
if (inputEl)
this.inputElement = inputEl;
}, "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: 'f6120cfbd981949507274eb628b6c84af4fecfd1', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '0998bb02cf4626f7589556c4bb2ce9846e4028de', name: "label" })))));
}
static get is() { return "tds-toggle"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() {
return {
"$": ["toggle.scss"]
};
}
static get styleUrls() {
return {
"$": ["toggle.css"]
};
}
static get properties() {
return {
"checked": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the Toggle as checked"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "checked",
"defaultValue": "false"
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Make the Toggle required"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "required",
"defaultValue": "false"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'sm' | 'lg'",
"resolved": "\"lg\" | \"sm\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Size of the Toggle"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "size",
"defaultValue": "'lg'"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Name of the toggle's input element"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "name"
},
"headline": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Headline for the Toggle"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "headline"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the Toggle in a disabled state"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"toggleId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "ID of the Toggle's input element, if not specified, it's randomly generated"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "toggle-id",
"defaultValue": "generateUniqueId()"
},
"tdsAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines aria-label attribute for input"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-aria-label"
}
};
}
static get events() {
return [{
"method": "tdsToggle",
"name": "tdsToggle",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Sends unique Toggle identifier and status when it is toggled."
},
"complexType": {
"original": "{\n toggleId: string;\n checked: boolean;\n }",
"resolved": "{ toggleId: string; checked: boolean; }",
"references": {}
}
}];
}
static get methods() {
return {
"toggle": {
"complexType": {
"signature": "() => Promise<{ toggleId: string; checked: boolean; }>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<{ toggleId: string; checked: boolean; }>"
},
"docs": {
"text": "Toggles the Toggle.",
"tags": []
}
},
"focusElement": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Method to programmatically focus the toggle element",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
}