@kelvininc/ui-components
Version:
Kelvin UI Components
223 lines (222 loc) • 8.49 kB
JavaScript
import { Host, h } from "@stencil/core";
import { buildDescription } from "./radio-list-item.helper";
import { EComponentSize } from "../../types";
export class KvRadioListItem {
constructor() {
/** @inheritdoc */
this.size = EComponentSize.Large;
/** @inheritdoc */
this.checked = false;
/** @inheritdoc */
this.disabled = false;
this.parsedDescription = buildDescription(this.description);
this.onOptionClick = (ev) => {
ev.stopPropagation();
if (this.disabled) {
return;
}
this.optionClick.emit(this.optionId);
};
}
descriptionWatcher(newValue, old) {
if (newValue === old)
return;
this.parsedDescription = buildDescription(newValue);
}
render() {
return (h(Host, { key: 'c43669c04e2c2fba57f6493d163a2c9b2403ad1f' }, h("div", { key: '972be142d95fae0cbb6c32e77655a3f68ec58749', class: {
'radio-list-item-container': true,
'radio-list-item-container--disabled': !!this.disabled,
'radio-list-item-container--checked': !!this.checked
}, onClick: this.onOptionClick }, h("slot", { key: '61c7663a10dadf8c2615b04a2b5d541ab485bf87', name: "header" }), h("div", { key: '717221c3e4a2cd9a396a5a57e1b98bdcdc9cc5f8', class: { content: true, [`content--size-${this.size}`]: true } }, h("kv-radio", { key: '3f8f321cd1bc58794ded45e7f53c35bfd186d04a', size: EComponentSize.Small, checked: this.checked, disabled: this.disabled, onCheckedChange: this.onOptionClick }), h("div", { key: '0dad5bc293f29e8015b13263746d488367342981', class: "info" }, h("div", { key: '9908124ea6360c8b0c00e43e81f12283bdc3c5ff', class: "label" }, h("slot", { key: 'c5e7a446d8f74ada162dbd5fb1e2ba6f80ad5079', name: "label" }, this.label)), this.description && h("div", { key: '4a82a398e032a447f3402d8b69c9c82d44444f7b', class: "description" }, this.parsedDescription), h("slot", { key: 'f42b790b4b2860c4e4104f8478d22e50a57e57a5', name: "additional-info" }))))));
}
static get is() { return "kv-radio-list-item"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["radio-list-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["radio-list-item.css"]
};
}
static get properties() {
return {
"optionId": {
"type": "any",
"attribute": "option-id",
"mutable": false,
"complexType": {
"original": "string | number",
"resolved": "number | string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) The unique id that serves as a key for this item"
},
"getter": false,
"setter": false,
"reflect": true
},
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) The label to display"
},
"getter": false,
"setter": false,
"reflect": true
},
"description": {
"type": "string",
"attribute": "description",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The description that can contain links in the [text](url) format"
},
"getter": false,
"setter": false,
"reflect": true
},
"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) Button's size"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "EComponentSize.Large"
},
"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) Defines if this option is checked"
},
"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) Defines if this option is disabled"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
}
};
}
static get states() {
return {
"parsedDescription": {}
};
}
static get events() {
return [{
"method": "optionClick",
"name": "optionClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emits when this option is clicked"
},
"complexType": {
"original": "string | number",
"resolved": "number | string",
"references": {}
}
}];
}
static get watchers() {
return [{
"propName": "description",
"methodName": "descriptionWatcher"
}];
}
}