@kelvininc/ui-components
Version:
Kelvin UI Components
156 lines (151 loc) • 15 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, K as h, e as EComponentSize, w as EToggleState, m as EActionButtonType, L as Host } from './p-BP5CxQcH.js';
import { a as getClassMap } from './p-DCOsOAOy.js';
import { d as defineCustomElement$9 } from './p-0XA6IHyr.js';
import { d as defineCustomElement$8 } from './p-DFvvqEwa.js';
import { d as defineCustomElement$7 } from './p-Cblno6rQ.js';
import { d as defineCustomElement$6 } from './p-CcHqOBLS.js';
import { d as defineCustomElement$5 } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$4 } from './p-CgqRIP0M.js';
import { d as defineCustomElement$3 } from './p-s9JMr6UQ.js';
import { d as defineCustomElement$2 } from './p-DdZmrasC.js';
import { d as defineCustomElement$1 } from './p-DFBbXuLI.js';
const LEVEL_OFFSET_PX = 24;
const selectOptionCss = "@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{--select-option-height:32px;--select-option-transition-duration:100ms;--select-option-background-color:var(--transparent);--select-option-background-color-selected:var(--background-interactive-slider-list-selected);--select-option-background-color-highlighted:var(--background-interactive-slider-list-hover);--select-option-background-color-hover:var(--background-interactive-slider-list-hover);--select-option-background-color-disabled:var(--transparent);--select-option-label-color:var(--text-interactive-slider-list-default);--select-option-label-color-selected:var(--text-interactive-slider-list-selected);--select-option-label-color-highlighted:var(--text-interactive-slider-list-hover);--select-option-label-color-hover:var(--text-interactive-slider-list-hover);--select-option-label-color-disabled:var(--text-interactive-slider-list-disabled);--select-option-description-color:var(--text-on-color-neutral-tertiary);--select-option-description-color-selected:var(--text-on-color-neutral-tertiary);--select-option-description-color-highlighted:var(--text-on-color-neutral-tertiary);--select-option-description-color-hover:var(--text-on-color-neutral-tertiary);--select-option-description-color-disabled:var(--text-on-color-neutral-disabled);--select-option-icon-color:var(--icon-interactive-slider-list-default);--select-option-icon-color-selected:var(--icon-interactive-slider-list-selected);--select-option-icon-color-highlighted:var(--icon-interactive-slider-list-hover);--select-option-icon-color-hover:var(--icon-interactive-slider-list-hover);--select-option-icon-color-disabled:var(--icon-interactive-slider-list-disabled);--select-option-right-icon-color:var(--icon-interactive-slider-list-default);--select-option-right-icon-color-selected:var(--icon-interactive-slider-list-selected);--select-option-right-icon-color-highlighted:var(--icon-interactive-slider-list-hover);--select-option-right-icon-color-hover:var(--icon-interactive-slider-list-hover);--select-option-right-icon-color-disabled:var(--icon-interactive-slider-list-disabled);--select-option-icon-size:var(--size-default);--select-option-right-icon-size:var(--size-default)}.select-option{height:var(--select-option-height);display:flex;flex-direction:row;align-items:center;user-select:none;cursor:pointer;background-color:var(--select-option-background-color);transition:background-color var(--select-option-transition-duration) linear;padding-right:var(--spacing-2xl);padding-left:calc(var(--level-padding-offset) + var(--spacing-2xl))}.select-option .text-container{flex:1;min-width:0;display:flex;align-items:center;gap:var(--spacing-md)}.select-option .left-content{flex:1;min-width:0;display:flex;align-items:center;gap:var(--spacing-xs)}.select-option .left-content kv-tooltip{min-width:0;max-width:100%}.select-option .right-content{display:flex;align-items:center;gap:var(--spacing-md)}.select-option .icon-container{margin-right:var(--spacing-md)}.select-option .icon-container kv-icon{--icon-width:var(--select-option-icon-size);--icon-height:var(--select-option-icon-size);--icon-color:var(--select-option-icon-color)}.select-option .item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;transition:font-weight var(--select-option-transition-duration) linear;color:var(--select-option-label-color)}.select-option .item-description{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;color:var(--select-option-description-color)}.select-option .item-right-icon kv-icon{--icon-color:var(--select-option-right-icon-color)}.select-option .group{display:flex;flex-direction:row;gap:var(--spacing-xs);align-items:center}.select-option:not(.select-option--disabled):not(.select-option--selected):hover{background-color:var(--select-option-background-color-hover)}.select-option:not(.select-option--disabled):not(.select-option--selected):hover .item-label{color:var(--select-option-label-color-hover)}.select-option:not(.select-option--disabled):not(.select-option--selected):hover .item-description{color:var(--select-option-description-color-hover)}.select-option:not(.select-option--disabled):not(.select-option--selected):hover .icon-container kv-icon{--icon-color:var(--select-option-icon-color-hover)}.select-option:not(.select-option--disabled):not(.select-option--selected):hover .item-right-icon kv-icon{--icon-color:var(--select-option-right-icon-color-hover)}.select-option--selected{background-color:var(--select-option-background-color-selected)}.select-option--selected .item-label{font-family:Proxima Nova;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0;color:var(--select-option-label-color-selected)}.select-option--selected .item-description{color:var(--select-option-description-color-selected)}.select-option--selected .icon-container kv-icon{--icon-color:var(--select-option-icon-color-selected)}.select-option--selected .item-right-icon kv-icon{--icon-color:var(--select-option-right-icon-color-selected)}.select-option--highlighted{background-color:var(--select-option-background-color-highlighted)}.select-option--highlighted .item-label{font-family:Proxima Nova;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0;color:var(--select-option-label-color-highlighted)}.select-option--highlighted .item-description{color:var(--select-option-description-color-highlighted)}.select-option--highlighted .icon-container kv-icon{--icon-color:var(--select-option-icon-color-highlighted)}.select-option--highlighted .item-right-icon kv-icon{--icon-color:var(--select-option-right-icon-color-highlighted)}.select-option--disabled{cursor:not-allowed;user-select:none;background-color:var(--select-option-background-color-disabled)}.select-option--disabled .item-label{color:var(--select-option-label-color-disabled)}.select-option--disabled .item-description{color:var(--select-option-description-color-disabled)}.select-option--disabled .icon-container kv-icon{--icon-color:var(--select-option-icon-color-disabled)}.select-option--disabled .item-right-icon kv-icon{--icon-color:var(--select-option-right-icon-color-disabled)}.select-option:not(.select-option--selectable){pointer-events:none;user-select:none}.select-option--heading .item-label{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;color:var(--text-on-color-neutral-tertiary)}.select-option--heading .text-container .left-content::after{content:\"\";display:flex;flex:1;height:1px;background:var(--border-on-color-neutral-default);margin-left:var(--spacing-md)}.select-option--with-checkbox kv-checkbox{margin-right:var(--spacing-xs)}";
const KvSelectOption = /*@__PURE__*/ proxyCustomElement(class KvSelectOption extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.itemSelected = createEvent(this, "itemSelected", 7);
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.selected = false;
/** @inheritdoc */
this.highlighted = false;
/** @inheritdoc */
this.togglable = false;
/** @inheritdoc */
this.selectable = true;
/** @inheritdoc */
this.heading = false;
/** @inheritdoc */
this.level = 0;
/** @inheritdoc */
this.isDirty = false;
/** @inheritdoc */
this.customClass = '';
/** @inheritdoc */
this.customAttributes = {};
this.onItemClick = () => {
if (this.disabled) {
return;
}
this.itemSelected.emit(this.value);
};
}
highlightedChangeHandler() {
if (this.highlighted) {
this.el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
}
render() {
return (h(Host, { key: 'f301f208c28ca684f54a468ccab064026c060056', class: getClassMap(this.customClass), style: Object.assign({}, this.customStyle) }, h("div", { key: '8a14113e32a83ea7f10fe8b7946acb3c38ce2ebd', part: "select-option-content" }, h("div", Object.assign({ key: '50b7ac8fc3cc668b86c4b9bc1e7da31b61916586', class: {
'select-option': true,
'select-option--selected': this.selected,
'select-option--highlighted': this.highlighted,
'select-option--disabled': this.disabled,
'select-option--selectable': this.selectable,
'select-option--heading': this.heading,
'select-option--with-checkbox': this.selectable && this.togglable
}, part: "option-container", onClick: this.onItemClick }, this.customAttributes, { style: { '--level-padding-offset': `${LEVEL_OFFSET_PX * this.level}px` } }), this.selectable && this.togglable && (h("kv-checkbox", { key: 'dbd7ef9c44189c8fa60845340c3bf1893facd72c', size: EComponentSize.Small, disabled: this.disabled, checked: this.state === EToggleState.Selected, indeterminate: this.state === EToggleState.Indeterminate, part: "checkbox" })), this.icon && (h("div", { key: '33d3af17c15c479d47c8e1282beab060a172bb46', class: "icon-container", part: "icon" }, h("kv-tooltip", { key: '9be930787341ee603dcebfabfa125027eb43ead6', text: this.iconTooltipText }, h("kv-icon", { key: '8e4fbe433fcf585ade4d1c1b4c1dea38fdae8771', name: this.icon })))), h("div", { key: '6f375a32450ca292e4d29afa3c5995eaedc5d4f9', class: "text-container" }, h("div", { key: '0eba6f89978925c2777d29fdcb43bca760ba6a6f', class: "left-content" }, this.isDirty && h("kv-dirty-dot", { key: 'f6120de1506fac50af6b54d661ee94bcb3a575ce' }), h("kv-tooltip", { key: '1925ad56d07372dc5c5ad28fb2ce283d0991b4a2', truncate: true, text: this.label }, h("div", { key: '5e5b6a228a632dd1c6bfd79eb0498b4b5a0f9786', class: "item-label", part: "label" }, this.label))), (this.description || this.rightIcon || this.action) && (h("div", { key: '75cd691e13673199385755fff537e4bc7fe857ce', class: "right-content" }, (this.description || this.rightIcon) && (h("div", { key: '7c33d00b80ff83d8d746e1f51ec313df73a3289e', class: "group" }, this.rightIcon && (h("kv-tooltip", { key: 'b11b7a3596016f1d84ec8786dc786a0956ebe8d4', text: this.rightIconTooltipText }, h("div", { key: '9e50c9eeaf1e0ca4ec65a41f540aec3f7e3fb67a', class: "item-right-icon", part: "right-icon" }, h("kv-icon", { key: 'd82fb9709ce67f32bc39d6255772cd932dd94db8', name: this.rightIcon })))), this.description && h("div", { key: '88f15d47b78cbb4a099b09aee001e6261d449d5e', class: "item-description" }, this.description))), this.action && (h("div", { key: 'b69edb736948b420775a3b0e9699375980682f35', class: "group" }, h("kv-action-button-icon", { key: '750284db30c7610cc4efa127dab7a0b2d929a48b', type: EActionButtonType.Tertiary, icon: this.action.icon, onClickButton: this.action.onClick, active: this.action.active, onClick: event => event.stopPropagation() }))))))), h("slot", { key: 'cc246c9d64e365e02f6b2c86e724801ba4abcadc' }))));
}
get el() { return this; }
static get watchers() { return {
"highlighted": ["highlightedChangeHandler"]
}; }
static get style() { return selectOptionCss; }
}, [257, "kv-select-option", {
"label": [513],
"value": [513],
"icon": [513],
"iconTooltipText": [513, "icon-tooltip-text"],
"rightIconTooltipText": [513, "right-icon-tooltip-text"],
"description": [513],
"rightIcon": [513, "right-icon"],
"disabled": [516],
"selected": [516],
"highlighted": [516],
"togglable": [516],
"selectable": [516],
"heading": [516],
"level": [514],
"state": [513],
"isDirty": [516, "is-dirty"],
"customClass": [513, "custom-class"],
"customStyle": [16, "custom-style"],
"action": [16],
"customAttributes": [16, "custom-attributes"]
}, undefined, {
"highlighted": ["highlightedChangeHandler"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-select-option", "kv-action-button", "kv-action-button-icon", "kv-checkbox", "kv-dirty-dot", "kv-icon", "kv-portal", "kv-radio", "kv-tooltip", "kv-tooltip-text"];
components.forEach(tagName => { switch (tagName) {
case "kv-select-option":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvSelectOption);
}
break;
case "kv-action-button":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "kv-action-button-icon":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "kv-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "kv-dirty-dot":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-radio":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvSelectOption as K, defineCustomElement as d };