@kelvininc/ui-components
Version:
Kelvin UI Components
332 lines (331 loc) • 12.5 kB
JavaScript
import { Host, h } from "@stencil/core";
import { isEmpty, throttle } from "lodash-es";
import { DEFAULT_THROTTLE_WAIT } from "../../config";
import { EComponentSize } from "../../types";
/**
* @part toggle-button - The toggle action.
* @part toggle-icon - The toggle button's icon container.
* @part toggle-text - The toggle button's text container.
* @part toggle-label - The toggle button's label container.
*/
export class KvToggleButton {
constructor() {
/** @inheritdoc */
this.size = EComponentSize.Small;
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.checked = false;
/** @inheritdoc */
this.preventDefault = false;
/** @inheritdoc */
this.withRadio = false;
/** @inheritdoc */
this.customAttributes = {};
this.onCheck = () => {
if (!this.disabled) {
this.checkedChange.emit(this.value);
}
};
this.onClick = (event) => {
if (this.preventDefault) {
event.preventDefault();
}
this.clickThrottler(event);
};
}
connectedCallback() {
this.clickThrottler = throttle(() => this.onCheck(), DEFAULT_THROTTLE_WAIT);
}
render() {
const hasLabel = !isEmpty(this.label);
const hasIcon = !isEmpty(this.icon);
return (h(Host, { key: '88124e20a79f65038d8538a9430536fa7ded4625' }, h("kv-tooltip", { key: '85bad479f27e72b9096c6e4bb6097ac5d209e772', text: this.tooltip }, h("div", Object.assign({ key: '3f52d7a5a93b8bbdba4f31a3ff579db1a974e4b0', class: {
'toggle-button': true,
'toggle-button--checked': !!this.checked,
'toggle-button--disabled': !!this.disabled,
'toggle-button--only-icon': hasIcon && !hasLabel,
'toggle-button--with-radio': !!this.withRadio,
[`toggle-button--size-${this.size}`]: true
}, part: "toggle-button", onClick: this.onClick }, this.customAttributes), this.withRadio && h("kv-radio", { key: 'f3e0cdc47d6f64d0bb2416feafb4746d174e0a60', size: EComponentSize.Small, checked: this.checked, disabled: this.disabled }), hasIcon && (h("div", { key: '61b70309c17d54c206034a5ea404734a37d74e61', class: "toggle-button-icon", part: "toggle-icon" }, h("kv-icon", { key: '2c4e747df55344d764c421f3adc7bc9940403943', name: this.icon }))), hasLabel && (h("div", { key: '1bd9c5d966f450e673b74632531b83cfe63916d2', class: "toggle-button-label", part: "toggle-label" }, this.label))))));
}
static get is() { return "kv-toggle-button"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["toggle-button.scss"]
};
}
static get styleUrls() {
return {
"$": ["toggle-button.css"]
};
}
static get properties() {
return {
"value": {
"type": "any",
"attribute": "value",
"mutable": false,
"complexType": {
"original": "string | number",
"resolved": "number | string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) The value to be emitted upon click events"
},
"getter": false,
"setter": false,
"reflect": true
},
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The button's label. Only valid for toggle button text"
},
"getter": false,
"setter": false,
"reflect": true
},
"icon": {
"type": "string",
"attribute": "icon",
"mutable": false,
"complexType": {
"original": "EIconName",
"resolved": "EIconName",
"references": {
"EIconName": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::EIconName"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The button's icon. Only valid for toggle button icon"
},
"getter": false,
"setter": false,
"reflect": true
},
"size": {
"type": "string",
"attribute": "size",
"mutable": false,
"complexType": {
"original": "EComponentSize",
"resolved": "EComponentSize.Large | EComponentSize.Small",
"references": {
"EComponentSize": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::EComponentSize"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Button's size"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "EComponentSize.Small"
},
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Sets the button's styling to be disabled and disables click events"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"checked": {
"type": "boolean",
"attribute": "checked",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Sets the button as checked"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"preventDefault": {
"type": "boolean",
"attribute": "prevent-default",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the item click event should prevent default behaviour."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"withRadio": {
"type": "boolean",
"attribute": "with-radio",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Sets if the button is a radio button"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"tooltip": {
"type": "string",
"attribute": "tooltip",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Tooltip text"
},
"getter": false,
"setter": false,
"reflect": true
},
"customAttributes": {
"type": "unknown",
"attribute": "custom-attributes",
"mutable": false,
"complexType": {
"original": "Record<string, string>",
"resolved": "{ [x: string]: string; }",
"references": {
"Record": {
"location": "global",
"id": "global::Record"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Custom attributes to be applied to the toggle button element"
},
"getter": false,
"setter": false,
"defaultValue": "{}"
}
};
}
static get events() {
return [{
"method": "checkedChange",
"name": "checkedChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emits when a button is clicked"
},
"complexType": {
"original": "string | number",
"resolved": "number | string",
"references": {}
}
}];
}
}