@kelvininc/ui-components
Version:
Kelvin UI Components
46 lines (42 loc) • 3.97 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
const timePickerSelectOptionCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--time-picker-select-option-padding:0 var(--kv-spacing-4x, 16px);--time-picker-select-option-background-color:transparent;--time-picker-select-option-height:32px}.select-option{height:var(--time-picker-select-option-height);padding:var(--time-picker-select-option-padding);display:flex;align-items:center;user-select:none;cursor:pointer;background-color:var(--time-picker-select-option-background-color);transition:background-color 100ms linear}.select-option .text-container{display:flex;justify-content:space-between;align-items:center;min-width:0;width:100%}.select-option .text-container .item-label{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:font-weight 100ms linear;color:var(--kv-neutral-2, #e5e5e5)}.select-option .text-container .item-description{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;color:var(--kv-neutral-4, #bebebe)}.select-option.selected{background-color:var(--kv-neutral-6, #3f3f3f)}.select-option.selected .item-label{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:14px;font-weight:600;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;color:var(--kv-neutral-2, #e5e5e5)}.select-option.selected .item-description{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:600;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;transition:font-weight 100ms linear;color:var(--kv-neutral-2, #e5e5e5)}.select-option:hover{background-color:var(--kv-neutral-6, #3f3f3f)}";
const KvTimePickerSelectOption = /*@__PURE__*/ proxyCustomElement(class KvTimePickerSelectOption extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.itemSelected = createEvent(this, "itemSelected", 7);
/** @inheritdoc */
this.selected = false;
this.onItemClick = () => {
this.itemSelected.emit(this.value);
};
}
render() {
return (h(Host, { key: '7f62a8510634b1eff4535512d3bb2b1c316a90a3' }, h("div", { key: 'd2e483e533a97fe88deadd559c91f853cdfd2074', class: {
'select-option': true,
'selected': this.selected
}, onClick: this.onItemClick }, h("div", { key: '6e16b68eb42a675684099a0fc55edf4567007074', class: "text-container" }, h("div", { key: '6cf98b835e0902838c47dc8581586d91f5757329', class: "item-label" }, this.label), h("div", { key: '949d759df54a9a539612290fafa3bb709b387ebb', class: "item-description" }, this.description)))));
}
static get style() { return timePickerSelectOptionCss; }
}, [1, "kv-time-picker-select-option", {
"label": [513],
"description": [513],
"value": [513],
"selected": [516]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-time-picker-select-option"];
components.forEach(tagName => { switch (tagName) {
case "kv-time-picker-select-option":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvTimePickerSelectOption);
}
break;
} });
}
defineCustomElement();
export { KvTimePickerSelectOption as K, defineCustomElement as d };