@kelvininc/ui-components
Version:
Kelvin UI Components
169 lines (163 loc) • 27.4 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host } from './p-D6GMjtmE.js';
import { b as EIconName, g as ETreeItemState, h as ETreeItemLabelSize } from './p-DBphUUgi.js';
import { D as DEFAULT_THROTTLE_WAIT } from './p-YDhuCIKq.js';
import { d as defineCustomElement$5 } from './p-BOySlV0g.js';
import { d as defineCustomElement$4 } from './p-B41PGLQm.js';
import { d as defineCustomElement$3 } from './p-BIWUEm1f.js';
import { d as defineCustomElement$2 } from './p-GHnCHOez.js';
import { d as defineCustomElement$1 } from './p-BuaFqlfN.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
import { t as throttle } from './p-BlTxH6qj.js';
import { i as isNumber } from './p-C9bG1i86.js';
const STATE_ICONS = {
[ETreeItemState.Success]: EIconName.Success,
[ETreeItemState.Error]: EIconName.Error,
[ETreeItemState.Warning]: EIconName.Warning,
[ETreeItemState.Info]: EIconName.Info,
[ETreeItemState.None]: null
};
const treeItemLightCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--node-width:300px;--node-height:40px;--node-gap:var(--kv-spacing-2x, 8px);--children-offset:var(--kv-spacing-3x, 12px);--vertical-lines-height:calc(var(--private-vertical-line-height) + var(--private-node-gap));--horizontal-lines-width:calc(var(--private-left-shift) - 2px);--children-margin-top:var(--node-gap);--children-padding-left:var(--kv-spacing-2x, 8px);--children-margin-left:0;--border-radius:2px;--node-icon-width:24px;--node-icon-height:24px;--private-left-shift:0px;--private-node-gap:0;--private-vertical-line-height:0;--private-padding-left:0}:host kv-icon{--icon-width:var(--node-icon-width);--icon-height:var(--node-icon-height)}:host .node-container{position:relative;user-select:none}:host .node-container::after{content:\"\";position:absolute;border-left:1px dashed var(--connector-lines-color);height:var(--vertical-lines-height);width:0;top:calc(-1 * var(--private-node-gap));margin-left:calc(var(--children-margin-left) - var(--private-left-shift))}:host .children{margin-left:var(--children-margin-left);padding-left:var(--private-padding-left)}:host .children ::slotted(kv-tree-item){--private-left-shift:var(--children-offset);--private-node-gap:var(--node-gap);--private-vertical-line-height:100%;--children-margin-left:calc(var(--kv-spacing-5x, 20px) + var(--private-left-shift));--private-padding-left:var(--children-padding-left)}:host .children ::slotted(kv-tree-item:last-child){--private-vertical-line-height:calc(var(--node-height) / 2 +4px)}:host .node-loading{display:flex;width:100%;height:100%}:host .node-wrapper{position:relative;display:flex;width:var(--node-width);height:var(--node-height);margin:var(--children-margin-top) 0 0 var(--children-margin-left);align-items:center;box-sizing:border-box;padding:var(--kv-spacing-2x, 8px) 0 var(--kv-spacing-2x, 8px) var(--children-padding-left);background-color:var(--background-color-default);border:1px solid var(--border-color-default);border-radius:var(--border-radius)}:host .node-wrapper::before{content:\"\";position:absolute;left:calc(-1 * var(--private-left-shift));width:var(--horizontal-lines-width);border-top:1px dashed var(--connector-lines-color)}:host .node-wrapper:hover,:host .node-wrapper.selected:hover,:host .node-wrapper.highlighted:hover{background-color:var(--background-color-focused)}:host .node-wrapper.highlighted{background-color:var(--background-color-highlighted);border-color:var(--border-color-highlighted)}:host .node-wrapper.spotlight .title-small{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(--title-color-selected)}:host .node-wrapper.spotlight .title-regular{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(--title-color-selected)}:host .node-wrapper.selected{background-color:var(--background-color-focused);border-color:var(--border-color-selected);}:host .node-wrapper.selected .expander-arrow kv-icon{--icon-color:var(--icon-color-selected)}:host .node-wrapper.disabled:hover,:host .node-wrapper.disabled{background-color:var(--background-color-disabled);border-color:var(--border-color-disabled)}:host .node-wrapper.loading{padding:0;background-color:unset;border:unset}:host .expander-arrow{cursor:pointer;padding-left:var(--kv-spacing-2x, 8px)}:host .expander-arrow kv-icon{--icon-color:var(--icon-color-default);align-items:center}:host .node-content-wrapper{flex:1;min-width:0;height:100%;display:flex;align-items:center;padding:0 var(--kv-spacing-2x, 8px);border-radius:0;text-decoration:none;cursor:pointer}:host .node-content-wrapper .node-icon{position:relative;width:var(--node-icon-width);height:var(--node-icon-height)}:host .node-content-wrapper .main-icon{--icon-color:var(--icon-color-default);display:inline-flex;align-items:center;justify-content:center}:host .node-content-wrapper .state-icon{--icon-color:var(--kv-neutral-1, #f2f2f6);position:absolute;right:0;bottom:0}:host .node-content-wrapper .state-icon.info{--icon-color:var(--kv-info, #276ef1);--icon-background-color:var(--kv-neutral-0, #fff)}:host .node-content-wrapper .state-icon.warning{--icon-color:var(--kv-warning, #ffc043)}:host .node-content-wrapper .state-icon.success{--icon-color:var(--kv-success, #05a357);--icon-background-color:var(--kv-neutral-0, #fff)}:host .node-content-wrapper .state-icon.error{--icon-color:var(--kv-error, #e11900);--icon-background-color:var(--kv-neutral-0, #fff)}:host .node-content-wrapper .labels{flex:1;min-width:0;margin-left:var(--kv-spacing-2x, 8px);display:inline-flex;flex-direction:column;color:var(--title-color-default)}:host .node-content-wrapper .labels-small{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}:host .node-content-wrapper .labels-regular{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}:host .node-content-wrapper .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .node-content-wrapper .sub-title{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:10px;font-weight:400;font-stretch:normal;font-style:normal;line-height:15px;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sub-title-color-default)}:host .node-content-wrapper.no-filled .main-icon{--icon-color:var(--icon-color-no-filled)}:host .node-content-wrapper.no-filled .state-icon{opacity:0.5}:host .node-content-wrapper.no-filled .title{color:var(--title-color-no-filled)}:host .node-content-wrapper.no-filled .sub-title{color:var(--sub-title-color-no-filled)}:host .node-content-wrapper.selected .main-icon{--icon-color:var(--icon-color-selected)}:host .node-content-wrapper.selected .title-small{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(--title-color-selected)}:host .node-content-wrapper.selected .title-regular{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(--title-color-selected)}:host .node-content-wrapper.disabled{cursor:not-allowed}:host .node-content-wrapper.disabled .main-icon{--icon-color:var(--icon-color-disabled)}:host .node-content-wrapper.disabled .state-icon{opacity:0.5}:host .node-content-wrapper.disabled .title{color:var(--title-color-disabled)}:host .node-content-wrapper.disabled .sub-title{color:var(--sub-title-color-disabled)}:host .node-content-wrapper.disabled .alarm-bubble{opacity:0.5}:host .alarm-bubble{width:16px;height:16px;background-color:var(--kv-neutral-5, #707070);border-radius:50%;text-align:center;line-height:15px}:host{--connector-lines-color:var(--kv-primary, #005cc7);--background-color-default:var(--kv-neutral-0, #fff);--background-color-focused:rgba(var(--kv-primary-rgb, 0, 92, 199), 0.1);--background-color-disabled:var(--kv-neutral-1, #f2f2f6);--background-color-highlighted:rgba(var(--kv-primary-rgb, 0, 92, 199), 0.1);--border-color-default:var(--kv-neutral-3, #ddd);--border-color-disabled:var(--kv-neutral-3, #ddd);--border-color-selected:var(--kv-neutral-3, #ddd);--border-color-highlighted:var(--kv-neutral-3, #ddd);--icon-color-default:var(--kv-neutral-3, #ddd);--icon-color-disabled:var(--kv-neutral-3, #ddd);--icon-color-selected:var(--kv-primary, #005cc7);--icon-color-no-filled:var(--kv-neutral-3, #ddd);--title-color-default:var(--kv-neutral-9, #121212);--title-color-disabled:var(--kv-neutral-5, #707070);--title-color-selected:var(--kv-neutral-9, #121212);--title-color-no-filled:var(--kv-neutral-5, #707070);--sub-title-color-default:var(--kv-neutral-5, #707070);--sub-title-color-disabled:var(--kv-neutral-5, #707070);--sub-title-color-no-filled:var(--kv-neutral-5, #707070)}.node-loading{background:linear-gradient(90deg, rgba(var(--kv-neutral-2-rgb, 229, 229, 229), 0.3) 0%, var(--kv-neutral-2, #e5e5e5) 50%, rgba(var(--kv-neutral-2-rgb, 229, 229, 229), 0.3) 100%);background-size:200%;animation:ghostGradientAnimation 0.8s infinite ease-out;transition:all 1s ease-in;border-radius:4px}@keyframes ghostGradientAnimation{0%{background-position:-100% 0}100%{background-position:100% 0}}";
const treeItemNightCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--node-width:300px;--node-height:40px;--node-gap:var(--kv-spacing-2x, 8px);--children-offset:var(--kv-spacing-3x, 12px);--vertical-lines-height:calc(var(--private-vertical-line-height) + var(--private-node-gap));--horizontal-lines-width:calc(var(--private-left-shift) - 2px);--children-margin-top:var(--node-gap);--children-padding-left:var(--kv-spacing-2x, 8px);--children-margin-left:0;--border-radius:2px;--node-icon-width:24px;--node-icon-height:24px;--private-left-shift:0px;--private-node-gap:0;--private-vertical-line-height:0;--private-padding-left:0}:host kv-icon{--icon-width:var(--node-icon-width);--icon-height:var(--node-icon-height)}:host .node-container{position:relative;user-select:none}:host .node-container::after{content:\"\";position:absolute;border-left:1px dashed var(--connector-lines-color);height:var(--vertical-lines-height);width:0;top:calc(-1 * var(--private-node-gap));margin-left:calc(var(--children-margin-left) - var(--private-left-shift))}:host .children{margin-left:var(--children-margin-left);padding-left:var(--private-padding-left)}:host .children ::slotted(kv-tree-item){--private-left-shift:var(--children-offset);--private-node-gap:var(--node-gap);--private-vertical-line-height:100%;--children-margin-left:calc(var(--kv-spacing-5x, 20px) + var(--private-left-shift));--private-padding-left:var(--children-padding-left)}:host .children ::slotted(kv-tree-item:last-child){--private-vertical-line-height:calc(var(--node-height) / 2 +4px)}:host .node-loading{display:flex;width:100%;height:100%}:host .node-wrapper{position:relative;display:flex;width:var(--node-width);height:var(--node-height);margin:var(--children-margin-top) 0 0 var(--children-margin-left);align-items:center;box-sizing:border-box;padding:var(--kv-spacing-2x, 8px) 0 var(--kv-spacing-2x, 8px) var(--children-padding-left);background-color:var(--background-color-default);border:1px solid var(--border-color-default);border-radius:var(--border-radius)}:host .node-wrapper::before{content:\"\";position:absolute;left:calc(-1 * var(--private-left-shift));width:var(--horizontal-lines-width);border-top:1px dashed var(--connector-lines-color)}:host .node-wrapper:hover,:host .node-wrapper.selected:hover,:host .node-wrapper.highlighted:hover{background-color:var(--background-color-focused)}:host .node-wrapper.highlighted{background-color:var(--background-color-highlighted);border-color:var(--border-color-highlighted)}:host .node-wrapper.spotlight .title-small{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(--title-color-selected)}:host .node-wrapper.spotlight .title-regular{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(--title-color-selected)}:host .node-wrapper.selected{background-color:var(--background-color-focused);border-color:var(--border-color-selected);}:host .node-wrapper.selected .expander-arrow kv-icon{--icon-color:var(--icon-color-selected)}:host .node-wrapper.disabled:hover,:host .node-wrapper.disabled{background-color:var(--background-color-disabled);border-color:var(--border-color-disabled)}:host .node-wrapper.loading{padding:0;background-color:unset;border:unset}:host .expander-arrow{cursor:pointer;padding-left:var(--kv-spacing-2x, 8px)}:host .expander-arrow kv-icon{--icon-color:var(--icon-color-default);align-items:center}:host .node-content-wrapper{flex:1;min-width:0;height:100%;display:flex;align-items:center;padding:0 var(--kv-spacing-2x, 8px);border-radius:0;text-decoration:none;cursor:pointer}:host .node-content-wrapper .node-icon{position:relative;width:var(--node-icon-width);height:var(--node-icon-height)}:host .node-content-wrapper .main-icon{--icon-color:var(--icon-color-default);display:inline-flex;align-items:center;justify-content:center}:host .node-content-wrapper .state-icon{--icon-color:var(--kv-neutral-1, #f2f2f6);position:absolute;right:0;bottom:0}:host .node-content-wrapper .state-icon.info{--icon-color:var(--kv-info, #276ef1);--icon-background-color:var(--kv-neutral-0, #fff)}:host .node-content-wrapper .state-icon.warning{--icon-color:var(--kv-warning, #ffc043)}:host .node-content-wrapper .state-icon.success{--icon-color:var(--kv-success, #05a357);--icon-background-color:var(--kv-neutral-0, #fff)}:host .node-content-wrapper .state-icon.error{--icon-color:var(--kv-error, #e11900);--icon-background-color:var(--kv-neutral-0, #fff)}:host .node-content-wrapper .labels{flex:1;min-width:0;margin-left:var(--kv-spacing-2x, 8px);display:inline-flex;flex-direction:column;color:var(--title-color-default)}:host .node-content-wrapper .labels-small{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}:host .node-content-wrapper .labels-regular{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}:host .node-content-wrapper .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .node-content-wrapper .sub-title{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:10px;font-weight:400;font-stretch:normal;font-style:normal;line-height:15px;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sub-title-color-default)}:host .node-content-wrapper.no-filled .main-icon{--icon-color:var(--icon-color-no-filled)}:host .node-content-wrapper.no-filled .state-icon{opacity:0.5}:host .node-content-wrapper.no-filled .title{color:var(--title-color-no-filled)}:host .node-content-wrapper.no-filled .sub-title{color:var(--sub-title-color-no-filled)}:host .node-content-wrapper.selected .main-icon{--icon-color:var(--icon-color-selected)}:host .node-content-wrapper.selected .title-small{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(--title-color-selected)}:host .node-content-wrapper.selected .title-regular{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(--title-color-selected)}:host .node-content-wrapper.disabled{cursor:not-allowed}:host .node-content-wrapper.disabled .main-icon{--icon-color:var(--icon-color-disabled)}:host .node-content-wrapper.disabled .state-icon{opacity:0.5}:host .node-content-wrapper.disabled .title{color:var(--title-color-disabled)}:host .node-content-wrapper.disabled .sub-title{color:var(--sub-title-color-disabled)}:host .node-content-wrapper.disabled .alarm-bubble{opacity:0.5}:host .alarm-bubble{width:16px;height:16px;background-color:var(--kv-neutral-5, #707070);border-radius:50%;text-align:center;line-height:15px}:host{--connector-lines-color:var(--kv-neutral-5, #707070);--background-color-default:var(--kv-neutral-6, #3f3f3f);--background-color-focused:var(--kv-neutral-5, #707070);--background-color-disabled:var(--kv-neutral-7, #2a2a2a);--background-color-highlighted:var(--kv-neutral-6, #3f3f3f);--border-color-default:var(--kv-neutral-5, #707070);--border-color-disabled:var(--kv-neutral-6, #3f3f3f);--border-color-selected:var(--kv-neutral-0, #fff);--border-color-highlighted:var(--kv-neutral-4, #bebebe);--icon-color-default:var(--kv-neutral-2, #e5e5e5);--icon-color-disabled:var(--kv-neutral-5, #707070);--icon-color-selected:var(--kv-neutral-0, #fff);--icon-color-no-filled:var(--kv-neutral-4, #bebebe);--title-color-default:var(--kv-neutral-2, #e5e5e5);--title-color-disabled:var(--kv-neutral-5, #707070);--title-color-selected:var(--kv-neutral-0, #fff);--title-color-no-filled:var(--kv-neutral-4, #bebebe);--sub-title-color-default:var(--kv-neutral-4, #bebebe);--sub-title-color-disabled:var(--kv-neutral-5, #707070);--sub-title-color-no-filled:var(--kv-neutral-4, #bebebe)}.node-loading{background:linear-gradient(90deg, rgba(var(--kv-neutral-7-rgb, 42, 42, 42), 0.3) 0%, var(--kv-neutral-7, #2a2a2a) 50%, rgba(var(--kv-neutral-7-rgb, 42, 42, 42), 0.3) 100%);background-size:200%;animation:ghostGradientAnimation 0.8s infinite ease-out;transition:all 1s ease-in;border-radius:4px}@keyframes ghostGradientAnimation{0%{background-position:-100% 0}100%{background-position:100% 0}}";
const KvTreeItem = /*@__PURE__*/ proxyCustomElement(class KvTreeItem extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.toggleExpand = createEvent(this, "toggleExpand", 7);
this.itemClick = createEvent(this, "itemClick", 7);
/** (optional) Defines the font size of title and subtitle labels.*/
this.labelsSize = ETreeItemLabelSize.Small;
/** (optional) Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.
* This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.
* Set this to <code>true</code> for nodes you intend to load lazily, when the user clicks the expand button.
* It is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.
*/
this.hasChildren = false;
/** (optional) Defines whether the tree node is expanded or collapsed. Only has visual effect for tree nodes with children.*/
this.expanded = false;
/** (optional) Defines whether the tree node is disabled.*/
this.disabled = false;
/** (optional) Defines whether the tree node is selected by the user.*/
this.selected = false;
/** (optional) Defines whether the tree node is highlighted.*/
this.highlighted = false;
/** (optional) Defines whether the tree node is spotlight.*/
this.spotlighted = false;
/** (optional) Defines whether the label should be displayed as tooltip.*/
this.showTooltip = false;
/** (optional) Defines whether the tree node is loading. */
this.loading = false;
/** (optional) Defines if the item click event should prevent default behaviour. */
this.preventDefault = false;
/** (optional) Defines if icon to use for expanding, should be and arrow like icon pointing up. */
this.expandIcon = EIconName.ArrowDropUp;
}
/** Don't propagate the children click event */
itemClickHandler(event) {
event.stopPropagation();
}
/** Don't propagate the children toggle event */
toggleExpandHandler(event) {
event.stopPropagation();
}
get hasChildrenSlot() {
return !isEmpty(this.el.querySelector('[slot="child-slot"]'));
}
get requiresToggleButton() {
return this.hasChildren || this.hasChildrenSlot;
}
connectedCallback() {
this.toggleClickThrottler = throttle((event) => this.toggleExpand.emit(event), DEFAULT_THROTTLE_WAIT);
this.itemClickThrottler = throttle((event) => this.itemClick.emit(event), DEFAULT_THROTTLE_WAIT);
}
onItemClick(event) {
if (this.preventDefault) {
event.preventDefault();
}
this.itemClickThrottler(event);
}
render() {
return (h(Host, { key: '759d4f137e4083ee7920b5084a771936662c7d44' }, h("div", { key: '9970ceb8229d9b066d57c1497f86c36d0659c476', class: "node-container" }, h("div", { key: '9c00f621e28de7c5650c1a213559247b88c02876', class: {
'node-wrapper': true,
'disabled': this.disabled,
'selected': this.selected,
'highlighted': this.highlighted,
'spotlight': this.spotlighted,
'loading': this.loading
} }, !this.loading && (h(Fragment, { key: 'c3c666b4c08c0aefad262c059f2579862ead0fd0' }, this.requiresToggleButton && (h("div", { key: 'd22362ed25b57444689af695ad9712ab97d7d356', class: "expander-arrow", onClick: this.toggleClickThrottler }, h("kv-icon", { key: '3c2f7c17114c6ec78a63803b63156bce8ea04c87', name: this.expandIcon, customClass: {
'pk-grey3': true,
'rotate-180': this.expanded,
'rotate-90': !this.expanded
} }))), h("div", { key: '5eb1be0add38be59ddb6cf3ed2528f91bcc1855d', class: {
'node-content-wrapper': true,
'disabled': this.disabled,
'selected': this.selected,
'no-filled': isEmpty(this.label) && !isEmpty(this.placeholder)
}, onClick: !this.disabled && this.onItemClick.bind(this) }, this.icon && (h("div", { key: '8f935b3628e9f92acfde722b1a5f1ade42a4b4aa', class: "node-icon" }, h("kv-icon", { key: '0ec19df274ebc8220a59b0f912586978b09ea1d9', name: this.icon, class: "main-icon", exportparts: "icon" }), this.iconState && (h("kv-icon", { key: '77d03607ca88187d2b571b8f5dfa7fee53c016d8', name: STATE_ICONS[this.iconState], customClass: "icon-12", class: { 'state-icon': true, [this.iconState]: true } })))), (this.label || this.placeholder) && (h("div", { key: '65c0976fe97897fde602c2119a4b8ae8c812bf7e', class: `labels labels-${this.labelsSize}` }, h("kv-tooltip", { key: 'e86087a50d51f87bd7dd86c7f8e9229a345d3854', delay: this.tooltipDelay, disabled: !this.showTooltip, text: this.label || this.placeholder, truncate: true }, h("div", { key: 'c856957529d3a1b4cbfffa576458dde4b42f6137', class: { title: true, [`title-${this.labelsSize}`]: true } }, this.label || this.placeholder)), this.additionalLabel && h("div", { key: '3073f81359a5a4b4ceda1a7e0e11e8af6590ecf7', class: "sub-title" }, this.additionalLabel))), h("div", { key: 'b30acc409616174c521c0d02100f16072ac81d78', class: "right-indicators" }, isNumber(this.counter) && this.counter >= 0 && (h("div", { key: 'd83f6af94073716ab1d8c41cd3aace6439184aa6', class: "alarm-bubble" }, h("kv-badge", { key: '06ded66755edab9c623ec026b517ec00dd785c91', state: this.counterState }, this.counter > 100 ? '+99' : this.counter))))))), this.loading && h("div", { key: 'b5ea0167b58bb744efabdbddb7829dcc788b3499', class: "node-loading" })), h("div", { key: '942d559bb1414787056cc96ba71b332d86926045', part: "children", class: "children", style: { display: this.expanded ? 'block' : 'none' } }, h("slot", { key: '040f1d4d3d7accf14f016154f1fe56128911bf0e', name: "child-slot" })))));
}
get el() { return this; }
static get style() { return {
light: treeItemLightCss,
night: treeItemNightCss
}; }
}, [33, "kv-tree-item", {
"label": [513],
"additionalLabel": [513, "additional-label"],
"placeholder": [513],
"labelsSize": [513, "labels-size"],
"icon": [513],
"iconState": [513, "icon-state"],
"counter": [514],
"counterState": [513, "counter-state"],
"hasChildren": [516, "has-children"],
"expanded": [516],
"disabled": [516],
"selected": [516],
"highlighted": [516],
"spotlighted": [516],
"showTooltip": [516, "show-tooltip"],
"tooltipDelay": [514, "tooltip-delay"],
"loading": [516],
"preventDefault": [516, "prevent-default"],
"expandIcon": [513, "expand-icon"]
}, [[0, "itemClick", "itemClickHandler"], [0, "toggleExpand", "toggleExpandHandler"]]]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-tree-item", "kv-badge", "kv-icon", "kv-portal", "kv-tooltip", "kv-tooltip-text"];
components.forEach(tagName => { switch (tagName) {
case "kv-tree-item":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvTreeItem);
}
break;
case "kv-badge":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-portal":
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 { KvTreeItem as K, defineCustomElement as d };