@kelvininc/ui-components
Version:
Kelvin UI Components
191 lines (190 loc) • 7 kB
JavaScript
import { Host, h } from "@stencil/core";
import { throttle } from "lodash-es";
import { DEFAULT_THROTTLE_WAIT } from "../../config";
import { EComponentSize, EIconName } from "../../types";
/**
* @part icon - The icon element.
* @part label - The label element.
*/
export class KvRadio {
constructor() {
/** @inheritdoc */
this.label = '';
/** @inheritdoc */
this.size = EComponentSize.Small;
/** @inheritdoc */
this.checked = false;
/** @inheritdoc */
this.disabled = false;
this.onCheck = (event) => {
if (!this.disabled) {
this.checkedChange.emit(event);
}
};
}
handleKeyDown(ev) {
if (ev.code === 'Space') {
this.onCheck(ev);
}
}
connectedCallback() {
this.clickThrottler = throttle((event) => this.onCheck(event), DEFAULT_THROTTLE_WAIT);
}
render() {
return (h(Host, { key: 'c066f1e9fb31b6b32c59609fc8912cec362e5d79' }, h("div", { key: '0851054649e4553fc890bc695d444225d28271d3', class: {
'radio-container': true,
[`radio-container--size-${this.size}`]: true,
'disabled': this.disabled
}, onClick: this.clickThrottler }, h("div", { key: '132e9c8a428ced35038a48932cd3743a942068db', class: "circle", tabIndex: this.disabled ? -1 : 0 }, h("slot", { key: '8369e51ed3070e343dc9f4a44f8ba2c3f6cf24f3', name: "action-icon" }, h("kv-icon", { key: 'bc2543805261d450e93ff253393255a3d2408c26', name: this.checked ? EIconName.RadioBtnSelected : EIconName.RadioBtn, part: "icon" }))), this.label && (h("span", { key: '61b4eb00b2829ee2c67056d7397e4871a403aaae', part: "label", class: "label" }, this.label)))));
}
static get is() { return "kv-radio"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["radio.scss"]
};
}
static get styleUrls() {
return {
"$": ["radio.css"]
};
}
static get properties() {
return {
"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,
"defaultValue": "''"
},
"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"
},
"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"
}
};
}
static get events() {
return [{
"method": "checkedChange",
"name": "checkedChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the radio 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"
}
}
}
}];
}
static get listeners() {
return [{
"name": "keydown",
"method": "handleKeyDown",
"target": undefined,
"capture": false,
"passive": true
}];
}
}