@kelvininc/ui-components
Version:
Kelvin UI Components
187 lines (186 loc) • 6.91 kB
JavaScript
import { h, Host } from "@stencil/core";
import { EComponentSize, EIconName } from "../../types";
/**
* @part icon - The icon element.
* @part label - The label element.
*/
export class KvCheckbox {
constructor() {
/** @inheritdoc */
this.size = EComponentSize.Small;
/** @inheritdoc */
this.checked = false;
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.indeterminate = false;
this.getIconName = () => {
if (this.indeterminate) {
return EIconName.IndeterminateState;
}
if (this.checked) {
return EIconName.CheckState;
}
return EIconName.UncheckState;
};
this.onCheckedChange = (ev) => {
this.clickCheckbox.emit(ev);
};
}
render() {
return (h(Host, { key: 'fb72d4933e73e276ae26411f97c754d139246dfc' }, h("kv-radio", { key: '5653adda328d5aef1bbc2ae4aff58a9a253852aa', exportparts: "label", size: this.size, checked: this.checked, label: this.label, disabled: this.disabled, onCheckedChange: this.onCheckedChange }, h("kv-icon", { key: '8eacab2a237f0f47ebb2031778177b2de684cce9', slot: "action-icon", name: this.getIconName(), part: "icon" }))));
}
static get is() { return "kv-checkbox"; }
static get encapsulation() { return "shadow"; }
static get properties() {
return {
"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 this component item to a different styling configuration"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "EComponentSize.Small"
},
"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) If `true` the radio is with checked state. Default: false"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"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 label text for the radio."
},
"getter": false,
"setter": false,
"reflect": true
},
"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) If `true` the radio is with disabled state. Default: false"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"indeterminate": {
"type": "boolean",
"attribute": "indeterminate",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the checkbox is with indeterminate state. Default: false"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
}
};
}
static get events() {
return [{
"method": "clickCheckbox",
"name": "clickCheckbox",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the checkbox checked state changes"
},
"complexType": {
"original": "Event",
"resolved": "Event",
"references": {
"Event": {
"location": "import",
"path": "@stencil/core",
"id": "../../node_modules/.pnpm/@stencil+core@4.36.3/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event"
}
}
}
}];
}
}