@kelvininc/ui-components
Version:
Kelvin UI Components
101 lines (96 loc) • 6.68 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host } from './p-D6GMjtmE.js';
import { d as defineCustomElement$6 } from './p-BOySlV0g.js';
import { d as defineCustomElement$5 } from './p-B41PGLQm.js';
import { d as defineCustomElement$4 } from './p-BIWUEm1f.js';
import { d as defineCustomElement$3 } from './p-GHnCHOez.js';
import { d as defineCustomElement$2 } from './p-BuaFqlfN.js';
import { d as defineCustomElement$1 } from './p-YFwtzDGM.js';
import { g as get } from './p-CIAhob1E.js';
const treeLightCss = "@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{--tree-node-width:300px;--tree-node-height:40px;--tree-node-gap:var(--kv-spacing-2x, 8px);--tree-children-offset:var(--kv-spacing-3x, 12px);--tree-children-padding-left:var(--kv-spacing-2x, 8px)}:host .container{width:var(--tree-node-width)}:host kv-tree-item{--node-width:var(--tree-node-width);--node-height:var(--tree-node-height);--node-gap:var(--tree-node-gap);--children-offset:var(--tree-children-offset);--children-padding-left:var(--tree-children-padding-left)}:host>kv-tree-item:not(:first-child)::before{content:\"\";display:block;height:var(--tree-node-gap)}:host{--tree-connector-lines-color:var(--kv-primary, #005cc7)}:host kv-tree-item{--connector-lines-color:var(--tree-connector-lines-color)}";
const treeNightCss = "@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{--tree-node-width:300px;--tree-node-height:40px;--tree-node-gap:var(--kv-spacing-2x, 8px);--tree-children-offset:var(--kv-spacing-3x, 12px);--tree-children-padding-left:var(--kv-spacing-2x, 8px)}:host .container{width:var(--tree-node-width)}:host kv-tree-item{--node-width:var(--tree-node-width);--node-height:var(--tree-node-height);--node-gap:var(--tree-node-gap);--children-offset:var(--tree-children-offset);--children-padding-left:var(--tree-children-padding-left)}:host>kv-tree-item:not(:first-child)::before{content:\"\";display:block;height:var(--tree-node-gap)}:host{--tree-connector-lines-color:var(--kv-neutral-5, #707070)}:host kv-tree-item{--connector-lines-color:var(--tree-connector-lines-color)}";
const KvTree = /*@__PURE__*/ proxyCustomElement(class KvTree extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.nodeToggleExpand = createEvent(this, "nodeToggleExpand", 7);
this.nodeClick = createEvent(this, "nodeClick", 7);
/** (optional) Defines whether the all tree nodes is loading. */
this.loading = false;
this.onItemClick = (item) => this.nodeClick.emit(item);
this.onToggleExpand = (item) => this.nodeToggleExpand.emit(item);
}
drawNodes(nodes) {
return (h(Fragment, null, nodes.map(item => {
var _a;
return !get(this.hiddenNodes, [item.id], false) && (h("kv-tree-item", { slot: "child-slot", label: item.label, additionalLabel: item.additionalLabel, placeholder: item.placeholder, labelsSize: this.labelsSize, icon: item.icon, iconState: item.iconState, counter: item.counter, counterState: item.counterState, hasChildren: item.lazyLoadChildren, selected: this.selectedNode === item.id, expanded: get(this.expandedNodes, [item.id], false), disabled: get(this.disabledNodes, [item.id], false), preventDefault: item.preventDefault, highlighted: get(this.highlightedNodes, [item.id], false), spotlighted: get(this.spotlightedNodes, [item.id], false), expandIcon: this.expandIcon, loading: this.loading || get(this.loadingNodes, [item.id], false), onItemClick: _ => this.onItemClick(item), onToggleExpand: _ => this.onToggleExpand(item), showTooltip: this.showTooltip, tooltipDelay: this.tooltipDelay, part: "tree-item", exportparts: "icon,children" }, ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.drawNodes(item.children)));
})));
}
render() {
var _a;
return (h(Host, { key: 'bb5c31c4bc77593fc4f5ff25c539ba72cac6f66e' }, h("div", { key: '1d31d67041b8dca7905673a5521386be8e8ab780', class: "container", part: "tree" }, ((_a = this.nodes) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.drawNodes(this.nodes))));
}
static get style() { return {
light: treeLightCss,
night: treeNightCss
}; }
}, [33, "kv-tree", {
"nodes": [16],
"loading": [516],
"selectedNode": [1, "selected-node"],
"hiddenNodes": [16, "hidden-nodes"],
"expandedNodes": [16, "expanded-nodes"],
"spotlightedNodes": [16, "spotlighted-nodes"],
"disabledNodes": [16, "disabled-nodes"],
"highlightedNodes": [16, "highlighted-nodes"],
"loadingNodes": [16, "loading-nodes"],
"labelsSize": [513, "labels-size"],
"expandIcon": [513, "expand-icon"],
"showTooltip": [516, "show-tooltip"],
"tooltipDelay": [514, "tooltip-delay"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-tree", "kv-badge", "kv-icon", "kv-portal", "kv-tooltip", "kv-tooltip-text", "kv-tree-item"];
components.forEach(tagName => { switch (tagName) {
case "kv-tree":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvTree);
}
break;
case "kv-badge":
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-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "kv-tree-item":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvTree as K, defineCustomElement as d };