@limetech/lime-elements
Version:
276 lines (275 loc) • 8.86 kB
JavaScript
import { MDCSwitch } from '@material/switch';
import { h, } from '@stencil/core';
import { createRandomString } from '../../util/random-string';
import { makeEnterClickable, removeEnterClickable, } from '../../util/make-enter-clickable';
/**
* The Switch component is a fundamental element in UI design that serves as a toggle switch
* to control the state of a specific setting or option in an application or website.
* The two distinct positions of the Switch are visually indicative of the two states:
* ON and OFF; making it easy for users to understand the current state of the controlled feature.
*
* The Switch component is widely used in user interfaces to enable users to
* quickly and intuitively change binary settings.
*
* :::important
* Checkboxes are sometimes used interchangeably with switches in user interfaces.
* But there is an important difference between the two! Please read our guidelines about
* [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
*
* @exampleComponent limel-example-switch
* @exampleComponent limel-example-switch-helper-text
* @exampleComponent limel-example-switch-readonly
*/
export class Switch {
constructor() {
this.helperTextId = createRandomString();
this.renderHelperLine = () => {
if (!this.hasHelperText()) {
return;
}
return (h("limel-helper-line", { helperTextId: this.helperTextId, helperText: this.helperText, invalid: this.invalid }));
};
this.hasHelperText = () => {
return this.helperText !== null && this.helperText !== undefined;
};
this.handleClick = (event) => {
event.stopPropagation();
this.change.emit(!this.value);
};
this.label = undefined;
this.disabled = false;
this.readonly = false;
this.invalid = undefined;
this.value = false;
this.helperText = undefined;
this.readonlyLabels = [];
this.fieldId = createRandomString();
}
connectedCallback() {
this.initialize();
}
componentWillLoad() {
makeEnterClickable(this.host);
}
componentDidLoad() {
this.initialize();
}
initialize() {
const element = this.host.shadowRoot.querySelector('.mdc-switch');
if (!element) {
return;
}
this.mdcSwitch = new MDCSwitch(element);
}
disconnectedCallback() {
var _a;
removeEnterClickable(this.host);
(_a = this.mdcSwitch) === null || _a === void 0 ? void 0 : _a.destroy();
}
render() {
if (this.readonly) {
let icon = 'minus';
if (this.value) {
icon = {
name: 'ok',
color: 'var(--lime-primary-color, var(--limel-theme-primary-color))',
};
}
return [
h("limel-dynamic-label", { value: this.value, "aria-controls": this.helperText ? this.helperTextId : undefined, defaultLabel: { text: this.label, icon: icon }, labels: this.readonlyLabels }),
this.renderHelperLine(),
];
}
return [
h("button", { id: this.fieldId, class: {
'mdc-switch': true,
'mdc-switch--unselected': !this.value,
'mdc-switch--selected': this.value,
}, type: "button", role: "switch", "aria-checked": this.value, disabled: this.disabled, onClick: this.handleClick, "aria-controls": this.helperText ? this.helperTextId : undefined }, h("div", { class: "mdc-switch__track" }), h("div", { class: "mdc-switch__handle-track" }, h("div", { class: "mdc-switch__handle" }, h("div", { class: "mdc-switch__shadow" }, h("div", { class: "mdc-elevation-overlay" })), h("div", { class: "mdc-switch__ripple" }), h("div", { class: "mdc-switch__icons" }, h("svg", { class: "mdc-switch__icon mdc-switch__icon--on", viewBox: "0 0 24 24" }, h("path", { d: "M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" })), h("svg", { class: "mdc-switch__icon mdc-switch__icon--off", viewBox: "0 0 24 24" }, h("path", { d: "M20 13H4v-2h16v2z" })))))),
h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.fieldId }, this.label),
this.renderHelperLine(),
];
}
valueWatcher(newValue) {
if (!this.mdcSwitch) {
return;
}
this.mdcSwitch.selected = newValue;
}
static get is() { return "limel-switch"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["switch.scss"]
};
}
static get styleUrls() {
return {
"$": ["switch.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Label to display next to the switch"
},
"attribute": "label",
"reflect": true
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Disables the switch when `true`,\nand visually shows that the switch is editable but disabled.\nThis tells the users that if certain requirements are met,\nthe switch may become interactable."
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"readonly": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Disables the switch when `true`. This visualizes the switch slightly differently.\nBut shows no visual sign indicating that the switch is disabled\nor can ever become interactable."
},
"attribute": "readonly",
"reflect": true,
"defaultValue": "false"
},
"invalid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to indicate that the current value is invalid."
},
"attribute": "invalid",
"reflect": true
},
"value": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The value of the switch"
},
"attribute": "value",
"reflect": true,
"defaultValue": "false"
},
"helperText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optional helper text to display below the switch"
},
"attribute": "helper-text",
"reflect": true
},
"readonlyLabels": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Array<Label<boolean>>",
"resolved": "Label<boolean>[]",
"references": {
"Array": {
"location": "global"
},
"Label": {
"location": "import",
"path": "../dynamic-label/label.types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The labels to use to clarify what kind of data is being visualized,\nwhen the component is `readonly`."
},
"defaultValue": "[]"
}
};
}
static get states() {
return {
"fieldId": {}
};
}
static get events() {
return [{
"method": "change",
"name": "change",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the value has changed"
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "value",
"methodName": "valueWatcher"
}];
}
}
//# sourceMappingURL=switch.js.map