@kelvininc/ui-components
Version:
Kelvin UI Components
49 lines (45 loc) • 3.83 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, K as h, L as Host } from './p-BP5CxQcH.js';
const timePickerSelectOptionCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--time-picker-select-option-padding:0 var(--spacing-2xl);--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:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:font-weight 100ms linear;color:var(--text-interactive-slider-list-default)}.select-option .text-container .item-description{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;color:var(--text-on-color-neutral-tertiary)}.select-option:hover{background-color:var(--background-interactive-slider-list-hover)}.select-option.selected{background-color:var(--background-interactive-slider-list-selected)}.select-option.selected .item-label{font-family:Proxima Nova;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0;color:var(--text-interactive-slider-list-selected)}.select-option.selected .item-description{font-family:Proxima Nova;font-weight:600;font-size:12px;line-height:16px;letter-spacing:0;transition:font-weight 100ms linear;color:var(--text-interactive-slider-list-default)}";
const KvTimePickerSelectOption = /*@__PURE__*/ proxyCustomElement(class KvTimePickerSelectOption extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.itemSelected = createEvent(this, "itemSelected", 7);
/** @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 style() { return timePickerSelectOptionCss; }
}, [257, "kv-time-picker-select-option", {
"label": [513],
"description": [513],
"value": [513],
"selected": [516],
"customAttributes": [16, "custom-attributes"]
}]);
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 };