@kelvininc/ui-components
Version:
Kelvin UI Components
152 lines (151 loc) • 5.65 kB
JavaScript
import { Host, h } from "@stencil/core";
import { EComponentSize } from "../../utils/types";
import { throttle } from "lodash-es";
import { EIconName } from "../icon/icon.types";
import { DEFAULT_THROTTLE_WAIT } from "../../config";
/**
* @part icon-svg - The switch icon.
* @part icon-square - The switch icon square container.
* @part button - The switch button.
*/
export class KvSwitchButton {
constructor() {
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.checked = false;
/** @inheritdoc */
this.size = EComponentSize.Large;
}
onStateChange() {
if (this.disabled) {
return;
}
this.checked = !this.checked;
this.switchChange.emit(this.checked);
}
connectedCallback() {
this.onSwitchClick = throttle(() => this.onStateChange(), DEFAULT_THROTTLE_WAIT);
}
render() {
const iconName = this.disabled ? EIconName.Lock : EIconName.DoneAll;
return (h(Host, { key: '34f0a04060c25d556253bdb0a31350180fdcb560' }, h("slot", { key: 'adfffd71bb675a3e50e6ce765308bdb4e9a716ce', name: "left-slot" }), h("div", { key: '8d4739d60a8c1157be500384cdc1cd383df46de6', class: {
'switch-button': true,
'switch-button--disabled': this.disabled,
'switch-button--on': this.checked,
[`switch-button--${this.size}`]: true
}, part: "button", onClick: this.onSwitchClick }, h("div", { key: '9d07c60351217da43c60dec6c8d6a03e3d70c419', class: "icon-square", part: "icon-square" }, h("kv-icon", { key: 'f901cb72307f1137e5dff79497ef020d7d9bb7dd', name: iconName, part: "icon-svg" }))), h("slot", { key: '1a3eddf7f7ea2cb25e13c37f07f75d4898fe3250', name: "right-slot" })));
}
static get is() { return "kv-switch-button"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["switch-button.scss"]
};
}
static get styleUrls() {
return {
"$": ["switch-button.css"]
};
}
static get properties() {
return {
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the button is disabled. Default `false`"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"checked": {
"type": "boolean",
"attribute": "checked",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the button is ON. Default `false`"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"size": {
"type": "string",
"attribute": "size",
"mutable": false,
"complexType": {
"original": "EComponentSize",
"resolved": "EComponentSize.Large | EComponentSize.Small",
"references": {
"EComponentSize": {
"location": "import",
"path": "../../utils/types",
"id": "src/utils/types/index.ts::EComponentSize"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Button's size. Default `EComponentSize.Large`"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "EComponentSize.Large"
}
};
}
static get events() {
return [{
"method": "switchChange",
"name": "switchChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when switch's state changes"
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}];
}
}