@kelvininc/ui-components
Version:
Kelvin UI Components
141 lines (140 loc) • 4.66 kB
JavaScript
import { h, Host } from "@stencil/core";
import { EIconName } from "../icon/icon.types";
/**
* @part icon - The icon element.
*/
export class KvCheckbox {
constructor() {
/** @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.onClick = () => {
if (!this.disabled) {
this.clickCheckbox.emit();
}
};
}
render() {
return (h(Host, { key: '2b2b58401e21f92a5512831b442141d7f441f195', onClick: this.onClick, class: {
disabled: this.disabled
} }, h("kv-icon", { key: '86c54b844519ccb8e64d0b966c2fc84f49e7ed46', name: this.getIconName(), part: "icon" })));
}
static get is() { return "kv-checkbox"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["checkbox.scss"]
};
}
static get styleUrls() {
return {
"$": ["checkbox.css"]
};
}
static get properties() {
return {
"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 checkbox is with checked state. Default: false"
},
"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) If `true` the checkbox 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": "void",
"resolved": "void",
"references": {}
}
}];
}
}