@kelvininc/ui-components
Version:
Kelvin UI Components
195 lines (194 loc) • 7.02 kB
JavaScript
import { Host, h } from "@stencil/core";
import { throttle } from "lodash-es";
import { DEFAULT_THROTTLE_WAIT } from "../../config";
import { EComponentSize } from "../../types";
export class KvRadio {
constructor() {
/** (optional) Sets the button as checked when initializing */
this.checked = false;
/** (optional) Sets this button styling to be disabled and disables click events */
this.disabled = false;
/** (optional) Adds a label aside the button */
this.label = '';
/** (optional) Sets this tab item to a different styling configuration */
this.size = EComponentSize.Large;
/** Internal checked / unchecked state */
this.isChecked = this.checked;
/** Internal enabled / disabled state */
this.isDisabled = this.disabled;
this.onCheck = () => {
this.isChecked = true;
this.checkedChange.emit(this.isChecked);
};
}
/** Watch the `checked` property and update internal state accordingly */
checkedChangeHandler(newValue) {
this.isChecked = newValue;
}
/** Watch the `disabled` property and update internal state accordingly */
disabledChangeHandler(newValue) {
this.isDisabled = newValue;
}
handleKeyDown(ev) {
if (ev.code === 'Space') {
this.onCheck();
}
}
connectedCallback() {
this.clickThrottler = throttle(() => this.onCheck(), DEFAULT_THROTTLE_WAIT);
}
render() {
return (h(Host, { key: '338fa86ff83838f12bb9432d38c49a85203d6e75' }, h("div", { key: 'e0202ca8e61085b9966b4b968375fd160c76d902', class: {
'radio-container': true,
[`radio-container--size-${this.size}`]: true,
'checked': this.isChecked,
'disabled': this.isDisabled
}, onClick: this.clickThrottler }, h("div", { key: '13685d18745a5a770e2c1b8defa64fa35e4b16d0', tabIndex: this.isChecked || this.isDisabled ? -1 : 0, class: "circle" }, h("div", { key: '6873a32ff55be5c4af6813bda78c37cba892ef19', class: "checked-icon" })), this.label && h("span", { key: 'ea894a6023673e32f23d7387f628773f22b3bed3', class: "label" }, this.label))));
}
static get is() { return "kv-radio"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"night": ["radio.night.scss"],
"light": ["radio.light.scss"]
};
}
static get styleUrls() {
return {
"night": ["radio.night.css"],
"light": ["radio.light.css"]
};
}
static get properties() {
return {
"checked": {
"type": "boolean",
"attribute": "checked",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Sets the button as checked when initializing"
},
"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": [],
"text": "(optional) Sets this button styling to be disabled and disables click events"
},
"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": [],
"text": "(optional) Adds a label aside the button"
},
"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": [],
"text": "(optional) Sets this tab item to a different styling configuration"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "EComponentSize.Large"
}
};
}
static get states() {
return {
"isChecked": {},
"isDisabled": {}
};
}
static get events() {
return [{
"method": "checkedChange",
"name": "checkedChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emits when there's a change in state internally"
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}];
}
static get watchers() {
return [{
"propName": "checked",
"methodName": "checkedChangeHandler"
}, {
"propName": "disabled",
"methodName": "disabledChangeHandler"
}];
}
static get listeners() {
return [{
"name": "keydown",
"method": "handleKeyDown",
"target": undefined,
"capture": false,
"passive": true
}];
}
}