@kelvininc/ui-components/components/kv-tree-dropdown.js

Kelvin UI Components

import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { b as EIconName, h as ETreeItemLabelSize } from './p-DBphUUgi.js';
import './p-BRgmvbuh.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { d as defineCustomElement$8 } from './p-BOySlV0g.js';
import { d as defineCustomElement$7 } from './p-B41PGLQm.js';
import { d as defineCustomElement$6 } from './p-BIWUEm1f.js';
import { d as defineCustomElement$5 } from './p-GHnCHOez.js';
import { d as defineCustomElement$4 } from './p-BuaFqlfN.js';
import { d as defineCustomElement$3 } from './p-YFMpwe0E.js';
import { d as defineCustomElement$2 } from './p-YFwtzDGM.js';

const treeDropdownCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--dropdown-node-gap:0;--dropdown-children-offset:var(--kv-spacing-3x, 12px);--dropdown-padding-left:36px;--dropdown-width:224px}:host kv-tree{--tree-node-gap:var(--dropdown-node-gap);--tree-children-offset:var(--dropdown-children-offset);--tree-node-width:var(--dropdown-width)}:host .tree::part(tree){border-radius:4px;overflow:hidden;border:1px solid transparent}:host .expanded::part(tree){margin-bottom:var(--kv-spacing-2x, 8px);border:1px solid #3f3f3f}:host .expanded::part(tree-item){--background-color-highlighted:#2a2a2a}:host .nochildren::part(tree-item){--children-padding-left:var(--dropdown-padding-left)}:host kv-tree::part(tree-item){--vertical-lines-height:0;--horizontal-lines-width:0;--background-color-default:var(--kv-background);--border-color-default:none;--background-color-focused:#3f3f3f;--background-color-highlighted:none;--border-color-highlighted:none;--children-margin-top:0;--children-margin-left:0;--border-radius:0;--node-icon-width:20px;--node-icon-height:20px}:host kv-tree::part(children){--tree-children-padding-left:var(--dropdown-padding-left)}";

const KvTreeDropdown$1 = /*@__PURE__*/ proxyCustomElement(class KvTreeDropdown 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;
    }
    getHighlightedNodes(node) {
        var _a;
        return ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) >= 0 ? { [node.id]: true } : {};
    }
    getSpotlightedNodes() {
        const node = this.nodes.find(node => { var _a; return (_a = node.children) === null || _a === void 0 ? void 0 : _a.find(child => child.id === this.selectedNode); });
        if (!node) {
            return {};
        }
        return { [node.id]: true };
    }
    render() {
        return (h(Host, { key: '9601b1526dbc08e461534b4815b944d2f664044a' }, this.nodes.map(node => (h("kv-tree", { class: { tree: true, expanded: this.expandedNodes[node.id], nochildren: !(node === null || node === void 0 ? void 0 : node.children) }, nodes: [node], loading: this.loading, selectedNode: this.selectedNode, hiddenNodes: this.hiddenNodes, expandedNodes: this.expandedNodes, spotlightedNodes: this.getSpotlightedNodes(), labelsSize: ETreeItemLabelSize.Regular, expandIcon: EIconName.Collapse, disabledNodes: this.disabledNodes, highlightedNodes: this.getHighlightedNodes(node), loadingNodes: this.loadingNodes, showTooltip: this.showTooltip, tooltipDelay: this.tooltipDelay })))));
    }
    static get style() { return treeDropdownCss; }
}, [1, "kv-tree-dropdown", {
        "nodes": [16],
        "loading": [516],
        "selectedNode": [1, "selected-node"],
        "hiddenNodes": [16, "hidden-nodes"],
        "expandedNodes": [16, "expanded-nodes"],
        "disabledNodes": [16, "disabled-nodes"],
        "loadingNodes": [16, "loading-nodes"],
        "showTooltip": [516, "show-tooltip"],
        "tooltipDelay": [514, "tooltip-delay"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["kv-tree-dropdown", "kv-badge", "kv-icon", "kv-portal", "kv-tooltip", "kv-tooltip-text", "kv-tree", "kv-tree-item"];
    components.forEach(tagName => { switch (tagName) {
        case "kv-tree-dropdown":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, KvTreeDropdown$1);
            }
            break;
        case "kv-badge":
            if (!customElements.get(tagName)) {
                defineCustomElement$8();
            }
            break;
        case "kv-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "kv-portal":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "kv-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "kv-tooltip-text":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "kv-tree":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "kv-tree-item":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}
defineCustomElement$1();

const KvTreeDropdown = KvTreeDropdown$1;
const defineCustomElement = defineCustomElement$1;

export { KvTreeDropdown, defineCustomElement };