@kelvininc/ui-components
Version:
Kelvin UI Components
172 lines (171 loc) • 6.17 kB
JavaScript
import { Host, h } from "@stencil/core";
export class KvTimePickerSelectOption {
constructor() {
/** @inheritdoc */
this.selected = false;
/** @inheritdoc */
this.customAttributes = {};
this.onItemClick = () => {
this.itemSelected.emit(this.value);
};
}
render() {
return (h(Host, { key: '4a2b79e3adb3e6757e03dd81e4409f4a027d136a' }, h("div", Object.assign({ key: '157d96b50d7afb36a0111e15bc378ac665030a06', class: {
'select-option': true,
'selected': this.selected
}, onClick: this.onItemClick }, this.customAttributes), h("div", { key: '84efbd90d44e01b82160a083861e1e3e332c43c6', class: "text-container" }, h("div", { key: '56c57554ddb71c79048377a167ea2ae305750ca6', class: "item-label" }, this.label), h("div", { key: '8fb93bf958520780be1a51b45e41c7d0708b6ccc', class: "item-description" }, this.description)))));
}
static get is() { return "kv-time-picker-select-option"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["time-picker-select-option.scss"]
};
}
static get styleUrls() {
return {
"$": ["time-picker-select-option.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) The text to display on the item"
},
"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 of the text displayed"
},
"getter": false,
"setter": false,
"reflect": true
},
"value": {
"type": "string",
"attribute": "value",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) The item value"
},
"getter": false,
"setter": false,
"reflect": true
},
"selected": {
"type": "boolean",
"attribute": "selected",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the item is selected"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"customAttributes": {
"type": "unknown",
"attribute": "custom-attributes",
"mutable": false,
"complexType": {
"original": "Record<string, string>",
"resolved": "{ [x: string]: string; }",
"references": {
"Record": {
"location": "global",
"id": "global::Record"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Custom attributes to be applied to the option container element"
},
"getter": false,
"setter": false,
"defaultValue": "{}"
}
};
}
static get events() {
return [{
"method": "itemSelected",
"name": "itemSelected",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the user clicks on the item"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
}