@kelvininc/ui-components
Version:
Kelvin UI Components
177 lines (176 loc) • 6.54 kB
JavaScript
import { Host, h } from "@stencil/core";
/**
* @part items-container - The container for the list items
*/
export class KvRadioList {
constructor() {
/** @inheritdoc */
this.required = false;
this.onOptionClick = ({ detail }) => {
this.optionSelected.emit(detail);
};
}
render() {
return (h(Host, { key: 'e79d68404d65dc53382a6ba57eec123e817fd6ed' }, this.label && h("kv-form-label", { key: '2aacc1a83fc04dfb35d14c1308eee1576aef9968', label: this.label, required: this.required }), h("div", { key: '69d019f1bd664201f5c3f58e0e58443b82cb1fb5', class: "radio-list-items", part: "items-container" }, this.options.map(item => {
var _a;
return (h("kv-radio-list-item", Object.assign({}, item, { key: item.optionId, checked: this.selectedOption === item.optionId, disabled: item.disabled || ((_a = this.disabledOptions) === null || _a === void 0 ? void 0 : _a[item.optionId]), class: "radio-list-item", onOptionClick: this.onOptionClick })));
}))));
}
static get is() { return "kv-radio-list"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["radio-list.scss"]
};
}
static get styleUrls() {
return {
"$": ["radio-list.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) Form field label"
},
"getter": false,
"setter": false,
"reflect": true
},
"options": {
"type": "unknown",
"attribute": "options",
"mutable": false,
"complexType": {
"original": "IRadioListItem[]",
"resolved": "IRadioListItem[]",
"references": {
"IRadioListItem": {
"location": "import",
"path": "../radio-list-item/radio-list-item.types",
"id": "src/components/radio-list-item/radio-list-item.types.ts::IRadioListItem"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) The configuration for the buttons to render"
},
"getter": false,
"setter": false
},
"selectedOption": {
"type": "any",
"attribute": "selected-option",
"mutable": false,
"complexType": {
"original": "string | number",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The desired selected option"
},
"getter": false,
"setter": false,
"reflect": true
},
"disabledOptions": {
"type": "unknown",
"attribute": "disabled-options",
"mutable": false,
"complexType": {
"original": "Record<string | number, boolean>",
"resolved": "{ [x: string]: boolean; [x: number]: boolean; }",
"references": {
"Record": {
"location": "global",
"id": "global::Record"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The options to show up as disabled"
},
"getter": false,
"setter": false
},
"required": {
"type": "boolean",
"attribute": "required",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Form field required"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
}
};
}
static get events() {
return [{
"method": "optionSelected",
"name": "optionSelected",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emits when an option is selected"
},
"complexType": {
"original": "string | number",
"resolved": "number | string",
"references": {}
}
}];
}
}