@kelvininc/ui-components/dist/esm/kv-tree.entry.js

Kelvin UI Components

import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-D-JVwta2.js';
import { g as get } from './get-CQN4erwW.js';
import './_Map-B6Xd0L4K.js';
import './isObject-Dkd2PDJ-.js';
import './isSymbol-CfrylQep.js';
import './_MapCache-nTWrGhJJ.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 = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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))));
    }
};
KvTree.style = {
    light: treeLightCss,
    night: treeNightCss
};

export { KvTree as kv_tree };