@kelvininc/ui-components
Version:
Kelvin UI Components
280 lines (279 loc) • 10.4 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;
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: 'd61477b126323cd9a78efe0989fd4be103cf03e0' }, h("div", { key: 'be95927d3fcde890f8986e852c40d370d3b32f56', class: {
'toggle-button': true,
'toggle-button--checked': this.checked,
'toggle-button--disabled': this.disabled,
'toggle-button--only-icon': hasIcon && !hasLabel,
[`toggle-button--size-${this.size}`]: true
}, part: "toggle-button", onClick: this.onClick }, this.withRadio && h("kv-radio", { key: '0b95f3dfcef736bd3fc0c712f93bc163fb6353df', checked: this.checked }), hasIcon && (h("div", { key: 'e2d34192acef997f4e5b5f022d44289474f3a8e0', class: "toggle-button-icon", part: "toggle-icon" }, h("kv-icon", { key: 'e2c1993eb9419adbffc4bf22c03f69e9ab95828f', name: this.icon }))), hasLabel && (h("div", { key: '85bc10437e873158650dded6de7abfe7d6f28360', 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"
}
};
}
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": {}
}
}];
}
}