@kelvininc/ui-components
Version:
Kelvin UI Components
251 lines (250 loc) • 9.5 kB
JavaScript
import { h, Host } from "@stencil/core";
import { EComponentSize } from "../../types";
/**
* @part toggle-button-container - Container of toggle button.
*/
export class KvToggleButtonGroup {
constructor() {
/** @inheritdoc */
this.buttons = [];
/** @inheritdoc */
this.withRadio = false;
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.size = EComponentSize.Small;
/** @inheritdoc */
this.selectedButtons = {};
/** @inheritdoc */
this.disabledButtons = {};
/** @inheritdoc */
this.radioButtons = {};
}
render() {
return (h(Host, { key: 'a61b9b7fe554e7337be7b82a0b315d5ef5187ea0' }, this.buttons.map(button => {
var _a;
return (h("kv-toggle-button", { part: "toggle-button-container", exportparts: "toggle-button", value: button.value, label: button.label, icon: button.icon, preventDefault: button.preventDefault, size: (_a = this.size) !== null && _a !== void 0 ? _a : button.size, disabled: this.disabled || this.disabledButtons[button.value] || button.disabled, checked: this.selectedButtons[button.value] || button.checked, withRadio: this.withRadio || this.radioButtons[button.value] || button.withRadio }));
})));
}
static get is() { return "kv-toggle-button-group"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["toggle-button-group.scss"]
};
}
static get styleUrls() {
return {
"$": ["toggle-button-group.css"]
};
}
static get properties() {
return {
"buttons": {
"type": "unknown",
"attribute": "buttons",
"mutable": false,
"complexType": {
"original": "IToggleButton[]",
"resolved": "IToggleButton<string | number>[]",
"references": {
"IToggleButton": {
"location": "import",
"path": "../toggle-button/toggle-button.types",
"id": "src/components/toggle-button/toggle-button.types.ts::IToggleButton"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) List of toggle buttons"
},
"getter": false,
"setter": false,
"defaultValue": "[]"
},
"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) If `true` all toggle buttons will have a radio button"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"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 styling to be disabled and disables click events for all buttons"
},
"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": "../../types",
"id": "src/types.ts::EComponentSize"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Sets the size for all toggle buttons"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "EComponentSize.Small"
},
"selectedButtons": {
"type": "unknown",
"attribute": "selected-buttons",
"mutable": false,
"complexType": {
"original": "Record<string, boolean>",
"resolved": "{ [x: string]: boolean; }",
"references": {
"Record": {
"location": "global",
"id": "global::Record"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) A record with the button's label/value and with if the selected value"
},
"getter": false,
"setter": false,
"defaultValue": "{}"
},
"disabledButtons": {
"type": "unknown",
"attribute": "disabled-buttons",
"mutable": false,
"complexType": {
"original": "Record<string, boolean>",
"resolved": "{ [x: string]: boolean; }",
"references": {
"Record": {
"location": "global",
"id": "global::Record"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) A record with the button's label/value and the if the respective button is disabled"
},
"getter": false,
"setter": false,
"defaultValue": "{}"
},
"radioButtons": {
"type": "unknown",
"attribute": "radio-buttons",
"mutable": false,
"complexType": {
"original": "Record<string, boolean>",
"resolved": "{ [x: string]: boolean; }",
"references": {
"Record": {
"location": "global",
"id": "global::Record"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) A record with the button's label/value and the if the respective button is a radio button"
},
"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": "When the toggle button selection changes, emit the requested tab's key"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
}