@kelvininc/ui-components
Version:
Kelvin UI Components
135 lines (130 loc) • 11.4 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { e as EToggleState, E as EActionButtonType } from './p-DBphUUgi.js';
import './p-BRgmvbuh.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { g as getClassMap } from './p-DKOxy79t.js';
import { d as defineCustomElement$6 } from './p-CsQJZTqg.js';
import { d as defineCustomElement$5 } from './p-C7UGguL_.js';
import { d as defineCustomElement$4 } from './p-BOySlV0g.js';
import { d as defineCustomElement$3 } from './p-BAnY2f0R.js';
import { d as defineCustomElement$2 } from './p-BJSKhyhi.js';
import { d as defineCustomElement$1 } from './p-B41PGLQm.js';
const LEVEL_OFFSET_PX = 24;
const selectOptionCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--select-option-height:32px;--select-option-transition-duration:100ms;--select-option-background-color:var(--kv-neutral-7, #2a2a2a);--select-option-background-color-selected:var(--kv-neutral-6, #3f3f3f);--select-option-background-color-highlighted:var(--kv-neutral-6, #3f3f3f);--select-option-background-color-hover:var(--kv-neutral-6, #3f3f3f);--select-option-label-color:var(--kv-neutral-4, #bebebe);--select-option-label-color-selected:var(--kv-neutral-1, #f2f2f6);--select-option-label-color-highlighted:var(--kv-neutral-2, #e5e5e5);--select-option-label-color-hover:var(--kv-neutral-2, #e5e5e5);--select-option-description-color:var(--kv-neutral-4, #bebebe);--select-option-description-color-selected:var(--kv-neutral-4, #bebebe);--select-option-description-color-highlighted:var(--kv-neutral-4, #bebebe);--select-option-description-color-hover:var(--kv-neutral-4, #bebebe);--select-option-icon-size:16px;--select-option-icon-color:var(--kv-neutral-0, #fff)}.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(--kv-spacing-4x, 16px);padding-left:calc(var(--level-padding-offset) + var(--kv-spacing-4x, 16px))}.select-option .text-container{flex:1;min-width:0;display:flex;align-items:center;gap:var(--kv-spacing-2x, 8px)}.select-option .left-content{flex:1;min-width:0;display:flex;align-items:center;gap:var(--kv-spacing, 4px)}.select-option .right-content{display:flex;align-items:center;gap:var(--kv-spacing-2x, 8px)}.select-option .icon-container{margin-right:var(--kv-spacing-2x, 8px)}.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: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;transition:font-weight var(--select-option-transition-duration) linear;color:var(--select-option-label-color)}.select-option .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(--select-option-description-color)}.select-option--selected{background-color:var(--select-option-background-color-selected)}.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(--select-option-label-color-selected)}.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;color:var(--select-option-description-color-selected)}.select-option:hover{background-color:var(--select-option-background-color-hover)}.select-option:hover .item-label{color:var(--select-option-label-color-hover)}.select-option:hover .item-description{color:var(--select-option-description-color-hover)}.select-option--highlighted{background-color:var(--select-option-background-color-highlighted)}.select-option--highlighted .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(--select-option-label-color-highlighted)}.select-option--highlighted .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;color:var(--select-option-description-color-highlighted)}.select-option--disabled{opacity:0.5;pointer-events:none}.select-option:not(.select-option--selectable){pointer-events:none;user-select:none}.select-option--heading .item-label{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:10px;font-weight:600;font-stretch:normal;font-style:normal;line-height:15px;letter-spacing:1.5px;text-transform:uppercase;color:var(--kv-neutral-2, #e5e5e5)}.select-option--heading .text-container .left-content::after{content:\"\";display:flex;flex:1;height:1px;background:var(--kv-neutral-6, #3f3f3f);margin-left:var(--kv-spacing-2x, 8px)}.select-option kv-checkbox{--checkbox-icon-size:12px;margin-right:var(--kv-spacing-2x, 8px)}";
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 = '';
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: 'cba1456e44914ad80050fa09c8d09afebaf8927f', class: getClassMap(this.customClass), style: Object.assign({}, this.customStyle) }, h("div", { key: 'c68581a0470c01a78ae59d8c8700a865005e219a', part: "select-option-content" }, h("div", { key: '5fcfbc4df831b06645bf2f5922ee809976378f5e', 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
}, part: "option-container", onClick: this.onItemClick, style: { '--level-padding-offset': `${LEVEL_OFFSET_PX * this.level}px` } }, this.selectable && this.togglable && (h("kv-checkbox", { key: 'ba0e100e0866acfb1c7d2e8a49221683e6a8949b', checked: this.state === EToggleState.Selected, indeterminate: this.state === EToggleState.Indeterminate, part: "checkbox" })), this.icon && (h("div", { key: 'bbab4b96408db858f124e51fb7d455a4a3916ae7', class: "icon-container", part: "icon" }, h("kv-icon", { key: '016bf6c27df6154154303dbcf4d60888507389ac', name: this.icon }))), h("div", { key: '70248911478a2d0f40eaaae67c89038edcb3d0cc', class: "text-container" }, h("div", { key: '5fab13f6b6688c7bdb0b8b904d6f92ebd0db2608', class: "left-content" }, this.isDirty && h("kv-dirty-dot", { key: '9c34c9a424e668b9c881c6ab61cc1ea5d0d97c1f' }), h("div", { key: 'a03d011772861e44420e48627ecca15cbae8f9cd', class: "item-label", part: "label" }, this.label)), h("div", { key: '2ccb6de8db8b838fd62b5cd6ab4d172864c38438', class: "right-content" }, this.description && h("div", { key: 'dbb871815a3babc4247048fbed2e57b4ac85380a', class: "item-description" }, this.description), this.action && (h("div", { key: 'fb3e92d012ca5aed904be377160b5f9c4c2f1e6b', class: "action-container" }, h("kv-action-button-icon", { key: 'fcd7396ac108d335762251e11a95535f437fb79f', type: EActionButtonType.Ghost, icon: this.action.icon, onClickButton: this.action.onClick, active: this.action.active, onClick: event => event.stopPropagation() })))))), h("slot", { key: '7e597c43ae6a448c59c42b9f78dbdd903ed5f235' }))));
}
get el() { return this; }
static get watchers() { return {
"highlighted": ["highlightedChangeHandler"]
}; }
static get style() { return selectOptionCss; }
}, [1, "kv-select-option", {
"label": [513],
"value": [513],
"icon": [513],
"description": [513],
"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]
}, undefined, {
"highlighted": ["highlightedChangeHandler"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-select-option", "kv-action-button", "kv-action-button-icon", "kv-badge", "kv-checkbox", "kv-dirty-dot", "kv-icon"];
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$6();
}
break;
case "kv-action-button-icon":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-badge":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-dirty-dot":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvSelectOption as K, defineCustomElement as d };