@gravionlabs/helix-core 22.0.0

package/fesm2022/gravionlabs-helix-core-tree.mjs

@@ -0,0 +1,1860 @@
+export * from '@gravionlabs/helix-core/types/tree';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, inject, input, booleanAttribute, numberAttribute, forwardRef, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, model, output, contentChild, viewChild, contentChildren, Optional, NgModule } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { getOuterWidth, getOuterHeight, find, findSingle, focus, removeAccents, resolveFieldData } from '@gravionlabs/helix-core/uix/utils';
+import * as i4 from '@gravionlabs/helix-core/api';
+import { SharedModule, HelixTemplate, TranslationKeys } from '@gravionlabs/helix-core/api';
+import * as i5 from '@gravionlabs/helix-core/autofocus';
+import { AutoFocusModule } from '@gravionlabs/helix-core/autofocus';
+import { BaseComponent, PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
+import * as i3 from '@gravionlabs/helix-core/bind';
+import { BindModule, Bind } from '@gravionlabs/helix-core/bind';
+import { Checkbox } from '@gravionlabs/helix-core/checkbox';
+import { IconField } from '@gravionlabs/helix-core/iconfield';
+import { ChevronRightIcon, ChevronDownIcon, SpinnerIcon, SearchIcon } from '@gravionlabs/helix-core/icons';
+import { InputIcon } from '@gravionlabs/helix-core/inputicon';
+import { InputText } from '@gravionlabs/helix-core/inputtext';
+import { Ripple } from '@gravionlabs/helix-core/ripple';
+import { Scroller } from '@gravionlabs/helix-core/scroller';
+import { BaseStyle } from '@gravionlabs/helix-core/base';
+
+const style = /*css*/ `
+    .h-tree {
+        display: block;
+        background: dt('tree.background');
+        color: dt('tree.color');
+        padding: dt('tree.padding');
+        position: relative;
+    }
+
+    .h-tree-root-children,
+    .h-tree-node-children {
+        display: flex;
+        list-style-type: none;
+        flex-direction: column;
+        margin: 0;
+        gap: dt('tree.gap');
+    }
+
+    .h-tree-root-children {
+        padding: 0;
+        padding-block-start: dt('tree.gap');
+    }
+
+    .h-tree-node-children {
+        padding: 0;
+        padding-block-start: dt('tree.gap');
+        padding-inline-start: dt('tree.indent');
+    }
+
+    .h-tree-node {
+        padding: 0;
+        outline: 0 none;
+    }
+
+    .h-tree-node-content {
+        border-radius: dt('tree.node.border.radius');
+        padding: dt('tree.node.padding');
+        display: flex;
+        align-items: center;
+        outline-color: transparent;
+        color: dt('tree.node.color');
+        gap: dt('tree.node.gap');
+        transition:
+            background dt('tree.transition.duration'),
+            color dt('tree.transition.duration'),
+            outline-color dt('tree.transition.duration'),
+            box-shadow dt('tree.transition.duration');
+    }
+
+    .h-tree-node-content[data-h-dragging] {
+        outline: 1px dashed dt('primary.color');
+        outline-offset: -1px;
+    }
+
+    .h-tree-node-content[data-pc-section="drag-image"] {
+        background: dt('tree.background');
+    }
+
+    .h-tree-node:focus-visible > .h-tree-node-content {
+        box-shadow: dt('tree.node.focus.ring.shadow');
+        outline: dt('tree.node.focus.ring.width') dt('tree.node.focus.ring.style') dt('tree.node.focus.ring.color');
+        outline-offset: dt('tree.node.focus.ring.offset');
+    }
+
+    .h-tree-node-content.h-tree-node-selectable:not(.h-tree-node-selected):hover {
+        background: dt('tree.node.hover.background');
+        color: dt('tree.node.hover.color');
+    }
+
+    .h-tree-node-content.h-tree-node-selectable:not(.h-tree-node-selected):hover .h-tree-node-icon {
+        color: dt('tree.node.icon.hover.color');
+    }
+
+    .h-tree-node-content.h-tree-node-selected {
+        background: dt('tree.node.selected.background');
+        color: dt('tree.node.selected.color');
+    }
+
+    .h-tree-node-content.h-tree-node-selected .h-tree-node-toggle-button {
+        color: inherit;
+    }
+
+    .h-tree-node-content.h-tree-node-dragover {
+        background: dt('tree.node.hover.background');
+        color: dt('tree.node.hover.color');
+    }
+
+    .h-tree-node-content:focus-visible,
+    .h-tree-node-content.h-tree-node-contextmenu-selected {
+        box-shadow: dt('tree.node.focus.ring.shadow');
+        outline: dt('tree.node.focus.ring.width') dt('tree.node.focus.ring.style') dt('tree.node.focus.ring.color');
+        outline-offset: dt('tree.node.focus.ring.offset');
+    }
+
+    .h-tree-node-drop-point {
+		outline: 1px solid dt('primary.color');
+	}
+
+    .h-tree-node-toggle-button {
+        cursor: pointer;
+        user-select: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+        flex-shrink: 0;
+        width: dt('tree.node.toggle.button.size');
+        height: dt('tree.node.toggle.button.size');
+        color: dt('tree.node.toggle.button.color');
+        border: 0 none;
+        background: transparent;
+        border-radius: dt('tree.node.toggle.button.border.radius');
+        transition:
+            background dt('tree.transition.duration'),
+            color dt('tree.transition.duration'),
+            border-color dt('tree.transition.duration'),
+            outline-color dt('tree.transition.duration'),
+            box-shadow dt('tree.transition.duration');
+        outline-color: transparent;
+        padding: 0;
+    }
+
+    .h-tree-node-toggle-button:enabled:hover {
+        background: dt('tree.node.toggle.button.hover.background');
+        color: dt('tree.node.toggle.button.hover.color');
+    }
+
+    .h-tree-node-content.h-tree-node-selected .h-tree-node-toggle-button:hover {
+        background: dt('tree.node.toggle.button.selected.hover.background');
+        color: dt('tree.node.toggle.button.selected.hover.color');
+    }
+
+    .h-tree-root {
+        overflow: auto;
+    }
+
+    .h-tree-node-selectable {
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .h-tree-node-leaf > .h-tree-node-content .h-tree-node-toggle-button {
+        visibility: hidden;
+    }
+
+    .h-tree-node-icon {
+        color: dt('tree.node.icon.color');
+        transition: color dt('tree.transition.duration');
+    }
+
+    .h-tree-node-content.h-tree-node-selected .h-tree-node-icon {
+        color: dt('tree.node.icon.selected.color');
+    }
+
+    .h-tree-filter {
+        margin: dt('tree.filter.margin');
+    }
+
+    .h-tree-filter-input {
+        width: 100%;
+    }
+
+    .h-tree-loading-icon {
+        font-size: dt('tree.loading.icon.size');
+        width: dt('tree.loading.icon.size');
+        height: dt('tree.loading.icon.size');
+    }
+
+    .h-tree .h-tree-mask {
+        position: absolute;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .h-tree-flex-scrollable {
+        display: flex;
+        flex: 1;
+        height: 100%;
+        flex-direction: column;
+    }
+
+    .h-tree-flex-scrollable .h-tree-root {
+        flex: 1;
+    }
+`;
+
+const classes = {
+    root: ({ instance }) => [
+        'h-tree h-component',
+        {
+            'h-tree-selectable': instance.selectionMode != null,
+            'h-tree-loading': instance.loading,
+            'h-tree-flex-scrollable': instance.scrollHeight === 'flex',
+            'h-tree-node-dragover': instance.dragHover
+        }
+    ],
+    mask: 'h-tree-mask h-overlay-mask',
+    loadingIcon: 'h-tree-loading-icon',
+    pcFilterInput: 'h-tree-filter-input',
+    wrapper: 'h-tree-root',
+    rootChildren: 'h-tree-root-children',
+    node: ({ instance }) => ({ 'h-tree-node': true, 'h-tree-node-leaf': instance.isLeaf() }),
+    nodeContent: ({ instance }) => ({
+        'h-tree-node-content': true,
+        'h-tree-node-selectable': instance.selectable,
+        'h-tree-node-dragover': instance.isNodeDropActive(),
+        'h-tree-node-selected': instance.selectionMode === 'checkbox' && instance.tree.highlightOnSelect ? instance.checked : instance.selected,
+        'h-tree-node-contextmenu-selected': instance.isContextMenuSelected()
+    }),
+    nodeToggleButton: 'h-tree-node-toggle-button',
+    nodeToggleIcon: 'h-tree-node-toggle-icon',
+    nodeCheckbox: 'h-tree-node-checkbox',
+    nodeIcon: 'h-tree-node-icon',
+    nodeLabel: 'h-tree-node-label',
+    nodeChildren: 'h-tree-node-children',
+    emptyMessage: 'h-tree-empty-message',
+    dropPoint: 'h-tree-node-drop-point'
+};
+class TreeStyle extends BaseStyle {
+    name = 'tree';
+    style = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TreeStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TreeStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TreeStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Tree is used to display hierarchical data.
+ *
+ * [Live Demo](https://www.primeng.org/tree/)
+ *
+ * @module treestyle
+ *
+ */
+var TreeClasses;
+(function (TreeClasses) {
+    /**
+     * Class name of the root element
+     */
+    TreeClasses["root"] = "h-tree";
+    /**
+     * Class name of the mask element
+     */
+    TreeClasses["mask"] = "h-tree-mask";
+    /**
+     * Class name of the loading icon element
+     */
+    TreeClasses["loadingIcon"] = "h-tree-loading-icon";
+    /**
+     * Class name of the filter input element
+     */
+    TreeClasses["pcFilterInput"] = "h-tree-filter-input";
+    /**
+     * Class name of the wrapper element
+     */
+    TreeClasses["wrapper"] = "h-tree-root";
+    /**
+     * Class name of the root children element
+     */
+    TreeClasses["rootChildren"] = "h-tree-root-children";
+    /**
+     * Class name of the node element
+     */
+    TreeClasses["node"] = "h-tree-node";
+    /**
+     * Class name of the node content element
+     */
+    TreeClasses["nodeContent"] = "h-tree-node-content";
+    /**
+     * Class name of the node toggle button element
+     */
+    TreeClasses["nodeToggleButton"] = "h-tree-node-toggle-button";
+    /**
+     * Class name of the node toggle icon element
+     */
+    TreeClasses["nodeToggleIcon"] = "h-tree-node-toggle-icon";
+    /**
+     * Class name of the node checkbox element
+     */
+    TreeClasses["nodeCheckbox"] = "h-tree-node-checkbox";
+    /**
+     * Class name of the node icon element
+     */
+    TreeClasses["nodeIcon"] = "h-tree-node-icon";
+    /**
+     * Class name of the node label element
+     */
+    TreeClasses["nodeLabel"] = "h-tree-node-label";
+    /**
+     * Class name of the node children element
+     */
+    TreeClasses["nodeChildren"] = "h-tree-node-children";
+    /**
+     * Class name of the empty message element
+     */
+    TreeClasses["emptyMessage"] = "h-tree-empty-message";
+    /**
+     * Class name of the drop point element
+     */
+    TreeClasses["dropPoint"] = "h-tree-node-droppoint";
+})(TreeClasses || (TreeClasses = {}));
+
+const TREE_INSTANCE = new InjectionToken('TREE_INSTANCE');
+const TREENODE_INSTANCE = new InjectionToken('TREENODE_INSTANCE');
+class UITreeNode extends BaseComponent {
+    $pcTreeNode = inject(TREENODE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    static ICON_CLASS = 'h-tree-node-icon ';
+    rowNode = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rowNode" }] : /* istanbul ignore next */ []));
+    node = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+    parentNode = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "parentNode" }] : /* istanbul ignore next */ []));
+    root = input(undefined, { ...(ngDevMode ? { debugName: "root" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    index = input(undefined, { ...(ngDevMode ? { debugName: "index" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    firstChild = input(undefined, { ...(ngDevMode ? { debugName: "firstChild" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    lastChild = input(undefined, { ...(ngDevMode ? { debugName: "lastChild" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    level = input(undefined, { ...(ngDevMode ? { debugName: "level" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    indentation = input(undefined, { ...(ngDevMode ? { debugName: "indentation" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    itemSize = input(undefined, { ...(ngDevMode ? { debugName: "itemSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    loadingMode = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingMode" }] : /* istanbul ignore next */ []));
+    tree = inject(forwardRef(() => Tree));
+    timeout;
+    isPrevDropPointHovered = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPrevDropPointHovered" }] : /* istanbul ignore next */ []));
+    isNextDropPointHovered = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNextDropPointHovered" }] : /* istanbul ignore next */ []));
+    isNodeDropHovered = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNodeDropHovered" }] : /* istanbul ignore next */ []));
+    isPrevDropPointActive = computed(() => this.isPrevDropPointHovered() && this.isDroppable(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPrevDropPointActive" }] : /* istanbul ignore next */ []));
+    isNextDropPointActive = computed(() => this.isNextDropPointHovered() && this.isDroppable(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNextDropPointActive" }] : /* istanbul ignore next */ []));
+    isNodeDropActive = computed(() => this.isNodeDropHovered() && this.isNodeDroppable(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNodeDropActive" }] : /* istanbul ignore next */ []));
+    dropPosition = computed(() => (this.isPrevDropPointActive() ? -1 : this.isNextDropPointActive() ? 1 : 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropPosition" }] : /* istanbul ignore next */ []));
+    _componentStyle = inject(TreeStyle);
+    /**
+     * Computed signal that reactively tracks selection state.
+     */
+    _selected = computed(() => {
+        // Reading selection() makes this computed reactive to selection changes
+        this.tree.selection();
+        return this.tree.isSelected(this.node());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_selected" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed signal that reactively tracks context menu selection state.
+     */
+    _contextMenuSelected = computed(() => {
+        const selection = this.tree.contextMenuSelection();
+        const n = this.node();
+        if (!selection || !n) {
+            return false;
+        }
+        return selection === n || (selection.key && selection.key === n.key);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_contextMenuSelected" }] : /* istanbul ignore next */ []));
+    get selected() {
+        return this.tree.selectionMode() === 'single' || this.tree.selectionMode() === 'multiple' ? this._selected() : undefined;
+    }
+    get checked() {
+        return this.tree.selectionMode() === 'checkbox' ? this._selected() : undefined;
+    }
+    get nodeClass() {
+        return this.tree._componentStyle.classes.node({ instance: this });
+    }
+    get selectable() {
+        return this.node()?.selectable === false ? false : this.tree?.selectionMode() != null;
+    }
+    get subNodes() {
+        const n = this.node();
+        return n?.parent ? n.parent.children : this.tree.value();
+    }
+    getPTOptions(key) {
+        return this.ptm(key, {
+            context: {
+                node: this.node(),
+                index: this.index(),
+                expanded: this.node()?.expanded,
+                selected: this.selected,
+                checked: this.checked,
+                partialChecked: this.node()?.partialSelected,
+                leaf: this.isLeaf()
+            }
+        });
+    }
+    onInit() {
+        this.node().parent = this.parentNode();
+        const nativeElement = this.tree.el.nativeElement;
+        const pDialogWrapper = nativeElement.closest('h-dialog');
+        const parentNode = this.parentNode();
+        if (parentNode && !pDialogWrapper) {
+            this.setAllNodesTabIndexes();
+            this.tree.syncNodeOption(this.node(), this.tree.value(), 'parent', this.tree.getNodeWithKey(parentNode.key, this.tree.value()));
+        }
+    }
+    getIcon() {
+        let icon;
+        if (this.node().icon)
+            icon = this.node().icon;
+        else
+            icon = this.node().expanded && this.node().children && this.node().children?.length ? this.node().expandedIcon : this.node().collapsedIcon;
+        return UITreeNode.ICON_CLASS + ' ' + icon + ' h-tree-node-icon';
+    }
+    isLeaf() {
+        return this.tree.isNodeLeaf(this.node());
+    }
+    isSelected() {
+        return this._selected();
+    }
+    isContextMenuSelected() {
+        return this._contextMenuSelected();
+    }
+    isSameNode(event) {
+        return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[role="treeitem"]')));
+    }
+    isDraggable() {
+        return this.tree.draggableNodes();
+    }
+    isDroppable() {
+        return this.tree.droppableNodes() && this.tree.allowDrop(this.tree.dragNode, this.node(), this.tree.dragNodeScope);
+    }
+    isNodeDroppable() {
+        return this.node()?.droppable !== false && this.isDroppable();
+    }
+    isNodeDraggable() {
+        return this.node()?.draggable !== false && this.isDraggable();
+    }
+    toggle(event) {
+        if (this.node().expanded)
+            this.collapse(event);
+        else
+            this.expand(event);
+        event.stopPropagation();
+    }
+    expand(event) {
+        this.node().expanded = true;
+        if (this.tree.virtualScroll()) {
+            this.tree.updateSerializedValue();
+            this.focusVirtualNode();
+        }
+        this.tree.onNodeExpand.emit({ originalEvent: event, node: this.node() });
+    }
+    collapse(event) {
+        this.node().expanded = false;
+        if (this.tree.virtualScroll()) {
+            this.tree.updateSerializedValue();
+        }
+        this.tree.onNodeCollapse.emit({ originalEvent: event, node: this.node() });
+        this.focusVirtualNode();
+    }
+    onNodeClick(event) {
+        this.tree.onNodeClick(event, this.node());
+    }
+    onNodeKeydown(event) {
+        if (event.key === 'Enter') {
+            this.tree.onNodeClick(event, this.node());
+        }
+    }
+    onNodeTouchEnd() {
+        this.tree.onNodeTouchEnd();
+    }
+    onNodeRightClick(event) {
+        this.tree.onNodeRightClick(event, this.node());
+    }
+    onNodeDblClick(event) {
+        this.tree.onNodeDblClick(event, this.node());
+    }
+    insertNodeOnDrop() {
+        const { dragNode, dragNodeIndex, dragNodeSubNodes } = this.tree;
+        const n = this.node();
+        if (!n || dragNodeIndex == null || !dragNode || !dragNodeSubNodes) {
+            return;
+        }
+        const position = this.dropPosition();
+        const subNodes = this.subNodes || [];
+        const index = this.index() || 0;
+        const dropIndex = dragNodeSubNodes === subNodes ? (dragNodeIndex > index ? index : index - 1) : index;
+        dragNodeSubNodes.splice(dragNodeIndex, 1);
+        if (position < 0) {
+            // insert before a Node
+            subNodes.splice(dropIndex, 0, dragNode);
+        }
+        else if (position > 0) {
+            // insert after a Node
+            subNodes.splice(dropIndex + 1, 0, dragNode);
+        }
+        else {
+            // insert as child of a Node
+            n.children = n.children || [];
+            n.children.push(dragNode);
+        }
+        this.tree.dragDropService.stopDrag({
+            node: dragNode,
+            subNodes,
+            index: dragNodeIndex
+        });
+    }
+    onNodeDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.isDroppable()) {
+            const { dragNode } = this.tree;
+            const position = this.dropPosition();
+            const isValidDrop = position !== 0 || (position === 0 && this.isNodeDroppable());
+            if (isValidDrop) {
+                if (this.tree.validateDrop()) {
+                    this.tree.onNodeDrop.emit({
+                        originalEvent: event,
+                        dragNode: dragNode,
+                        dropNode: this.node(),
+                        index: this.index(),
+                        accept: () => {
+                            this.insertNodeOnDrop();
+                        }
+                    });
+                }
+                else {
+                    this.insertNodeOnDrop();
+                    this.tree.onNodeDrop.emit({
+                        originalEvent: event,
+                        dragNode: dragNode,
+                        dropNode: this.node(),
+                        index: this.index()
+                    });
+                }
+            }
+        }
+        this.isPrevDropPointHovered.set(false);
+        this.isNextDropPointHovered.set(false);
+        this.isNodeDropHovered.set(false);
+    }
+    onNodeDragStart(event) {
+        if (this.isNodeDraggable()) {
+            event.dataTransfer.effectAllowed = 'all';
+            event.dataTransfer?.setData('text', 'data');
+            const target = event.currentTarget;
+            const dragEl = target.cloneNode(true);
+            const toggler = dragEl.querySelector('[data-pc-section="nodetogglebutton"]');
+            const checkbox = dragEl.querySelector('[data-pc-name="pcnodecheckbox"]');
+            target.setAttribute('data-h-dragging', 'true');
+            dragEl.style.width = getOuterWidth(target) + 'px';
+            dragEl.style.height = getOuterHeight(target) + 'px';
+            dragEl.setAttribute('data-pc-section', 'drag-image');
+            toggler.style.visibility = 'hidden';
+            checkbox?.remove();
+            document.body.appendChild(dragEl);
+            event.dataTransfer?.setDragImage(dragEl, 0, 0);
+            setTimeout(() => document.body.removeChild(dragEl), 0);
+            this.tree.dragDropService.startDrag({
+                tree: this,
+                node: this.node(),
+                subNodes: this.subNodes,
+                index: this.index(),
+                scope: this.tree.draggableScope()
+            });
+        }
+        else {
+            event.preventDefault();
+        }
+    }
+    onNodeDragOver(event) {
+        if (this.isDroppable()) {
+            event.dataTransfer.dropEffect = 'copy';
+            const nodeElement = event.currentTarget;
+            const rect = nodeElement.getBoundingClientRect();
+            const y = event.clientY - parseInt(rect.top);
+            this.isPrevDropPointHovered.set(false);
+            this.isNextDropPointHovered.set(false);
+            this.isNodeDropHovered.set(false);
+            if (y < rect.height * 0.25) {
+                this.isPrevDropPointHovered.set(true);
+            }
+            else if (y > rect.height * 0.75) {
+                this.isNextDropPointHovered.set(true);
+            }
+            else if (this.isNodeDroppable()) {
+                this.isNodeDropHovered.set(true);
+            }
+        }
+        else {
+            event.dataTransfer.dropEffect = 'none';
+        }
+        if (this.tree.droppableNodes()) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    onNodeDragLeave() {
+        this.isPrevDropPointHovered.set(false);
+        this.isNextDropPointHovered.set(false);
+        this.isNodeDropHovered.set(false);
+    }
+    onNodeDragEnd(event) {
+        event.currentTarget?.removeAttribute('data-h-dragging');
+        this.tree.dragDropService.stopDrag({
+            node: this.node(),
+            subNodes: this.subNodes,
+            index: this.index()
+        });
+    }
+    onKeyDown(event) {
+        const contextMenu = this.tree.contextMenu();
+        if (!this.isSameNode(event) || (contextMenu && contextMenu.containerViewChild?.nativeElement.style.display === 'block')) {
+            return;
+        }
+        switch (event.code) {
+            //down arrow
+            case 'ArrowDown':
+                this.onArrowDown(event);
+                break;
+            //up arrow
+            case 'ArrowUp':
+                this.onArrowUp(event);
+                break;
+            //right arrow
+            case 'ArrowRight':
+                this.onArrowRight(event);
+                break;
+            //left arrow
+            case 'ArrowLeft':
+                this.onArrowLeft(event);
+                break;
+            //enter
+            case 'Enter':
+            case 'Space':
+            case 'NumpadEnter':
+                this.onEnter(event);
+                break;
+            //tab
+            case 'Tab':
+                this.setAllNodesTabIndexes();
+                break;
+            default:
+                //no op
+                break;
+        }
+    }
+    onArrowUp(event) {
+        const nodeElement = event.target.getAttribute('data-pc-section') === 'nodetogglebutton' ? event.target.closest('[role="treeitem"]') : event.target.parentElement;
+        if (nodeElement?.previousElementSibling) {
+            this.focusRowChange(nodeElement, nodeElement.previousElementSibling, this.findLastVisibleDescendant(nodeElement.previousElementSibling));
+        }
+        else {
+            let parentNodeElement = this.getParentNodeElement(nodeElement);
+            if (parentNodeElement) {
+                this.focusRowChange(nodeElement, parentNodeElement);
+            }
+        }
+        event.preventDefault();
+    }
+    onArrowDown(event) {
+        const nodeElement = event.target.getAttribute('data-pc-section') === 'nodetogglebutton' ? event.target.closest('[role="treeitem"]') : event.target;
+        const listElement = nodeElement?.children[1];
+        if (listElement && listElement.children.length > 0) {
+            this.focusRowChange(nodeElement, listElement.children[0]);
+        }
+        else {
+            if (nodeElement?.parentElement?.nextElementSibling) {
+                this.focusRowChange(nodeElement, nodeElement.parentElement.nextElementSibling);
+            }
+            else {
+                let nextSiblingAncestor = this.findNextSiblingOfAncestor(nodeElement?.parentElement);
+                if (nextSiblingAncestor) {
+                    this.focusRowChange(nodeElement, nextSiblingAncestor);
+                }
+            }
+        }
+        event.preventDefault();
+    }
+    onArrowRight(event) {
+        if (!this.node()?.expanded && !this.tree.isNodeLeaf(this.node())) {
+            this.expand(event);
+            event.currentTarget.tabIndex = -1;
+            setTimeout(() => {
+                this.onArrowDown(event);
+            }, 1);
+        }
+        event.preventDefault();
+    }
+    onArrowLeft(event) {
+        const nodeElement = event.target.getAttribute('data-pc-section') === 'nodetogglebutton' ? event.target.closest('[role="treeitem"]') : event.target;
+        if (this.level() === 0 && !this.node()?.expanded) {
+            return false;
+        }
+        if (this.node()?.expanded) {
+            this.collapse(event);
+            return;
+        }
+        let parentNodeElement = this.getParentNodeElement(nodeElement?.parentElement);
+        if (parentNodeElement) {
+            this.focusRowChange(event.currentTarget, parentNodeElement);
+        }
+        event.preventDefault();
+    }
+    onEnter(event) {
+        this.tree.onNodeClick(event, this.node());
+        this.setTabIndexForSelectionMode(event, this.tree.nodeTouched);
+        event.preventDefault();
+    }
+    setAllNodesTabIndexes() {
+        const nodes = find(this.tree.el.nativeElement, '[data-pc-section="node"]');
+        const hasSelectedNode = [...nodes].some((node) => node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true');
+        [...nodes].forEach((node) => {
+            node.tabIndex = -1;
+        });
+        if (hasSelectedNode) {
+            const selectedNodes = [...nodes].filter((node) => node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true');
+            selectedNodes[0].tabIndex = 0;
+            return;
+        }
+        if (nodes.length) {
+            [...nodes][0].tabIndex = 0;
+        }
+    }
+    setTabIndexForSelectionMode(event, nodeTouched) {
+        if (this.tree.selectionMode() !== null) {
+            const elements = [...find(this.tree.el.nativeElement, '[role="treeitem"]')];
+            event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0;
+            if (elements.every((element) => element.tabIndex === -1)) {
+                elements[0].tabIndex = 0;
+            }
+        }
+    }
+    findNextSiblingOfAncestor(nodeElement) {
+        let parentNodeElement = this.getParentNodeElement(nodeElement);
+        if (parentNodeElement) {
+            if (parentNodeElement.nextElementSibling)
+                return parentNodeElement.nextElementSibling;
+            else
+                return this.findNextSiblingOfAncestor(parentNodeElement);
+        }
+        else {
+            return null;
+        }
+    }
+    findLastVisibleDescendant(nodeElement) {
+        const listElement = Array.from(nodeElement.children).find((el) => el.getAttribute('data-pc-section') === 'node');
+        const childrenListElement = listElement?.children[1];
+        if (childrenListElement && childrenListElement.children.length > 0) {
+            const lastChildElement = childrenListElement.children[childrenListElement.children.length - 1];
+            return this.findLastVisibleDescendant(lastChildElement);
+        }
+        else {
+            return nodeElement;
+        }
+    }
+    getParentNodeElement(nodeElement) {
+        const parentNodeElement = nodeElement.parentElement?.parentElement?.parentElement;
+        return parentNodeElement?.tagName === 'P-TREENODE' ? parentNodeElement : null;
+    }
+    focusNode(element) {
+        element.children[0].focus();
+    }
+    focusRowChange(firstFocusableRow, currentFocusedRow, lastVisibleDescendant) {
+        firstFocusableRow.tabIndex = '-1';
+        currentFocusedRow.children[0].tabIndex = '0';
+        this.focusNode(lastVisibleDescendant || currentFocusedRow);
+    }
+    focusVirtualNode() {
+        this.timeout = setTimeout(() => {
+            let node = findSingle(this.tree?.contentViewChild()?.nativeElement, `[data-id="${this.node()?.key ?? this.node()?.data}"]`);
+            focus(node);
+        }, 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: UITreeNode, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: UITreeNode, isStandalone: true, selector: "h-treeNode", inputs: { rowNode: { classPropertyName: "rowNode", publicName: "rowNode", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, parentNode: { classPropertyName: "parentNode", publicName: "parentNode", isSignal: true, isRequired: false, transformFunction: null }, root: { classPropertyName: "root", publicName: "root", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, firstChild: { classPropertyName: "firstChild", publicName: "firstChild", isSignal: true, isRequired: false, transformFunction: null }, lastChild: { classPropertyName: "lastChild", publicName: "lastChild", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, indentation: { classPropertyName: "indentation", publicName: "indentation", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, loadingMode: { classPropertyName: "loadingMode", publicName: "loadingMode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [TreeStyle, { provide: TREENODE_INSTANCE, useExisting: UITreeNode }, { provide: PARENT_INSTANCE, useExisting: UITreeNode }], usesInheritance: true, ngImport: i0, template: "@if (node()) {\n  <li\n    [class]=\"cn(cx('node'), node().styleClass)\"\n    [ngStyle]=\"{ height: itemSize() + 'px' }\"\n    [style]=\"node().style\"\n    [attr.aria-label]=\"node().label\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-setsize]=\"node().children ? node().children.length : 0\"\n    [attr.aria-selected]=\"selected\"\n    [attr.aria-expanded]=\"node().expanded\"\n    [attr.aria-posinset]=\"index() + 1\"\n    [attr.aria-level]=\"level() + 1\"\n    [attr.tabindex]=\"index() === 0 ? 0 : -1\"\n    [attr.data-id]=\"node().key\"\n    role=\"treeitem\"\n    (keydown)=\"onKeyDown($event)\"\n    [hBind]=\"getPTOptions('node')\"\n    >\n    @if (isPrevDropPointActive()) {\n      <div [class]=\"cx('dropPoint')\" [attr.aria-hidden]=\"true\" [hBind]=\"getPTOptions('dropPoint')\"></div>\n    }\n    <div\n      [class]=\"cx('nodeContent')\"\n      [style.paddingLeft]=\"level() * indentation() + 'rem'\"\n      (click)=\"onNodeClick($event)\"\n      (contextmenu)=\"onNodeRightClick($event)\"\n      (dblclick)=\"onNodeDblClick($event)\"\n      (touchend)=\"onNodeTouchEnd()\"\n      (drop)=\"onNodeDrop($event)\"\n      (dragstart)=\"onNodeDragStart($event)\"\n      (dragover)=\"onNodeDragOver($event)\"\n      (dragleave)=\"onNodeDragLeave($event)\"\n      (dragend)=\"onNodeDragEnd($event)\"\n      [draggable]=\"tree.draggableNodes()\"\n      [hBind]=\"getPTOptions('nodeContent')\"\n      >\n      <button type=\"button\" [class]=\"cx('nodeToggleButton')\" (click)=\"toggle($event)\" hRipple tabindex=\"-1\" [hBind]=\"getPTOptions('nodeToggleButton')\">\n        @if (!tree.togglerIconTemplate() && !tree._togglerIconTemplate) {\n          @if (!node().loading) {\n            @if (!node().expanded) {\n              <svg data-h-icon=\"chevron-right\" [class]=\"cx('nodeToggleIcon')\" [hBind]=\"getPTOptions('nodeToggleIcon')\" />\n            }\n            @if (node().expanded) {\n              <svg data-h-icon=\"chevron-down\" [class]=\"cx('nodeToggleIcon')\" [hBind]=\"getPTOptions('nodeToggleIcon')\" />\n            }\n          }\n          @if (loadingMode() === 'icon' && node().loading) {\n            <svg data-h-icon=\"spinner\" [class]=\"cx('nodeToggleIcon')\" spin [hBind]=\"getPTOptions('nodeToggleIcon')\" />\n          }\n        }\n        @if (tree.togglerIconTemplate() || tree._togglerIconTemplate) {\n          <span [class]=\"cx('nodeToggleIcon')\" [hBind]=\"getPTOptions('nodeToggleIcon')\">\n            <ng-template *ngTemplateOutlet=\"tree.togglerIconTemplate() || tree._togglerIconTemplate; context: { $implicit: node().expanded, loading: node().loading }\"></ng-template>\n          </span>\n        }\n      </button>\n\n      @if (tree.selectionMode() == 'checkbox') {\n        <h-checkbox\n          [ngModel]=\"isSelected()\"\n          [styleClass]=\"cx('nodeCheckbox')\"\n          [binary]=\"true\"\n          [indeterminate]=\"node().partialSelected\"\n          [disabled]=\"node().selectable === false\"\n          [variant]=\"tree?.config.inputStyle() === 'filled' || tree?.config.inputVariant() === 'filled' ? 'filled' : 'outlined'\"\n          [attr.data-h-partialchecked]=\"node().partialSelected\"\n          [tabindex]=\"-1\"\n          (click)=\"$event.preventDefault()\"\n          [pt]=\"getPTOptions('pcNodeCheckbox')\"\n          [unstyled]=\"unstyled()\"\n          >\n          @if (tree.checkboxIconTemplate() || tree._checkboxIconTemplate) {\n            <ng-template #icon>\n              <ng-template\n                            *ngTemplateOutlet=\"\n                                tree.checkboxIconTemplate() || tree._checkboxIconTemplate;\n                                context: {\n                                    $implicit: isSelected(),\n                                    partialSelected: node().partialSelected,\n                                    class: cx('nodeCheckbox')\n                                }\n                            \"\n            ></ng-template>\n          </ng-template>\n        }\n      </h-checkbox>\n    }\n\n    @if (node().icon || node().expandedIcon || node().collapsedIcon) {\n      <span [class]=\"getIcon()\" [hBind]=\"getPTOptions('nodeIcon')\"></span>\n    }\n    <span [class]=\"cx('nodeLabel')\" [hBind]=\"getPTOptions('nodeLabel')\">\n      @if (!tree.getTemplateForNode(node())) {\n        <span>{{ node().label }}</span>\n      }\n      @if (tree.getTemplateForNode(node())) {\n        <span>\n          <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node()); context: { $implicit: node() }\"></ng-container>\n        </span>\n      }\n    </span>\n  </div>\n  @if (isNextDropPointActive()) {\n    <div [class]=\"cx('dropPoint', { next: true })\" [attr.aria-hidden]=\"true\" [hBind]=\"getPTOptions('dropPoint')\"></div>\n  }\n  @if (!tree.virtualScroll() && node().children && node().expanded) {\n    <ul [class]=\"cx('nodeChildren')\" role=\"group\" [hBind]=\"ptm('nodeChildren')\">\n      @for (childNode of node().children; track tree.trackBy().bind(this)(index, childNode); let firstChild = $first; let lastChild = $last; let index = $index) {\n        <h-treeNode\n          [node]=\"childNode\"\n          [parentNode]=\"node()\"\n          [firstChild]=\"firstChild\"\n          [lastChild]=\"lastChild\"\n          [index]=\"index\"\n          [itemSize]=\"itemSize()\"\n          [level]=\"level() + 1\"\n          [loadingMode]=\"loadingMode()\"\n          [pt]=\"pt\"\n          [unstyled]=\"unstyled()\"\n        ></h-treeNode>\n      }\n    </ul>\n  }\n</li>\n}\n", dependencies: [{ kind: "component", type: UITreeNode, selector: "h-treeNode", inputs: ["rowNode", "node", "parentNode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: Ripple, selector: "[hRipple]" }, { kind: "component", type: Checkbox, selector: "h-checkbox, h-checkBox, h-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChevronRightIcon, selector: "[data-h-icon=\"chevron-right\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-h-icon=\"chevron-down\"]" }, { kind: "component", type: SpinnerIcon, selector: "[data-h-icon=\"spinner\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i3.Bind, selector: "[hBind]", inputs: ["hBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: UITreeNode, decorators: [{
+            type: Component,
+            args: [{ selector: 'h-treeNode', standalone: true, imports: [CommonModule, Ripple, Checkbox, FormsModule, ChevronRightIcon, ChevronDownIcon, SpinnerIcon, SharedModule, BindModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [TreeStyle, { provide: TREENODE_INSTANCE, useExisting: UITreeNode }, { provide: PARENT_INSTANCE, useExisting: UITreeNode }], template: "@if (node()) {\n  <li\n    [class]=\"cn(cx('node'), node().styleClass)\"\n    [ngStyle]=\"{ height: itemSize() + 'px' }\"\n    [style]=\"node().style\"\n    [attr.aria-label]=\"node().label\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-setsize]=\"node().children ? node().children.length : 0\"\n    [attr.aria-selected]=\"selected\"\n    [attr.aria-expanded]=\"node().expanded\"\n    [attr.aria-posinset]=\"index() + 1\"\n    [attr.aria-level]=\"level() + 1\"\n    [attr.tabindex]=\"index() === 0 ? 0 : -1\"\n    [attr.data-id]=\"node().key\"\n    role=\"treeitem\"\n    (keydown)=\"onKeyDown($event)\"\n    [hBind]=\"getPTOptions('node')\"\n    >\n    @if (isPrevDropPointActive()) {\n      <div [class]=\"cx('dropPoint')\" [attr.aria-hidden]=\"true\" [hBind]=\"getPTOptions('dropPoint')\"></div>\n    }\n    <div\n      [class]=\"cx('nodeContent')\"\n      [style.paddingLeft]=\"level() * indentation() + 'rem'\"\n      (click)=\"onNodeClick($event)\"\n      (contextmenu)=\"onNodeRightClick($event)\"\n      (dblclick)=\"onNodeDblClick($event)\"\n      (touchend)=\"onNodeTouchEnd()\"\n      (drop)=\"onNodeDrop($event)\"\n      (dragstart)=\"onNodeDragStart($event)\"\n      (dragover)=\"onNodeDragOver($event)\"\n      (dragleave)=\"onNodeDragLeave($event)\"\n      (dragend)=\"onNodeDragEnd($event)\"\n      [draggable]=\"tree.draggableNodes()\"\n      [hBind]=\"getPTOptions('nodeContent')\"\n      >\n      <button type=\"button\" [class]=\"cx('nodeToggleButton')\" (click)=\"toggle($event)\" hRipple tabindex=\"-1\" [hBind]=\"getPTOptions('nodeToggleButton')\">\n        @if (!tree.togglerIconTemplate() && !tree._togglerIconTemplate) {\n          @if (!node().loading) {\n            @if (!node().expanded) {\n              <svg data-h-icon=\"chevron-right\" [class]=\"cx('nodeToggleIcon')\" [hBind]=\"getPTOptions('nodeToggleIcon')\" />\n            }\n            @if (node().expanded) {\n              <svg data-h-icon=\"chevron-down\" [class]=\"cx('nodeToggleIcon')\" [hBind]=\"getPTOptions('nodeToggleIcon')\" />\n            }\n          }\n          @if (loadingMode() === 'icon' && node().loading) {\n            <svg data-h-icon=\"spinner\" [class]=\"cx('nodeToggleIcon')\" spin [hBind]=\"getPTOptions('nodeToggleIcon')\" />\n          }\n        }\n        @if (tree.togglerIconTemplate() || tree._togglerIconTemplate) {\n          <span [class]=\"cx('nodeToggleIcon')\" [hBind]=\"getPTOptions('nodeToggleIcon')\">\n            <ng-template *ngTemplateOutlet=\"tree.togglerIconTemplate() || tree._togglerIconTemplate; context: { $implicit: node().expanded, loading: node().loading }\"></ng-template>\n          </span>\n        }\n      </button>\n\n      @if (tree.selectionMode() == 'checkbox') {\n        <h-checkbox\n          [ngModel]=\"isSelected()\"\n          [styleClass]=\"cx('nodeCheckbox')\"\n          [binary]=\"true\"\n          [indeterminate]=\"node().partialSelected\"\n          [disabled]=\"node().selectable === false\"\n          [variant]=\"tree?.config.inputStyle() === 'filled' || tree?.config.inputVariant() === 'filled' ? 'filled' : 'outlined'\"\n          [attr.data-h-partialchecked]=\"node().partialSelected\"\n          [tabindex]=\"-1\"\n          (click)=\"$event.preventDefault()\"\n          [pt]=\"getPTOptions('pcNodeCheckbox')\"\n          [unstyled]=\"unstyled()\"\n          >\n          @if (tree.checkboxIconTemplate() || tree._checkboxIconTemplate) {\n            <ng-template #icon>\n              <ng-template\n                            *ngTemplateOutlet=\"\n                                tree.checkboxIconTemplate() || tree._checkboxIconTemplate;\n                                context: {\n                                    $implicit: isSelected(),\n                                    partialSelected: node().partialSelected,\n                                    class: cx('nodeCheckbox')\n                                }\n                            \"\n            ></ng-template>\n          </ng-template>\n        }\n      </h-checkbox>\n    }\n\n    @if (node().icon || node().expandedIcon || node().collapsedIcon) {\n      <span [class]=\"getIcon()\" [hBind]=\"getPTOptions('nodeIcon')\"></span>\n    }\n    <span [class]=\"cx('nodeLabel')\" [hBind]=\"getPTOptions('nodeLabel')\">\n      @if (!tree.getTemplateForNode(node())) {\n        <span>{{ node().label }}</span>\n      }\n      @if (tree.getTemplateForNode(node())) {\n        <span>\n          <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node()); context: { $implicit: node() }\"></ng-container>\n        </span>\n      }\n    </span>\n  </div>\n  @if (isNextDropPointActive()) {\n    <div [class]=\"cx('dropPoint', { next: true })\" [attr.aria-hidden]=\"true\" [hBind]=\"getPTOptions('dropPoint')\"></div>\n  }\n  @if (!tree.virtualScroll() && node().children && node().expanded) {\n    <ul [class]=\"cx('nodeChildren')\" role=\"group\" [hBind]=\"ptm('nodeChildren')\">\n      @for (childNode of node().children; track tree.trackBy().bind(this)(index, childNode); let firstChild = $first; let lastChild = $last; let index = $index) {\n        <h-treeNode\n          [node]=\"childNode\"\n          [parentNode]=\"node()\"\n          [firstChild]=\"firstChild\"\n          [lastChild]=\"lastChild\"\n          [index]=\"index\"\n          [itemSize]=\"itemSize()\"\n          [level]=\"level() + 1\"\n          [loadingMode]=\"loadingMode()\"\n          [pt]=\"pt\"\n          [unstyled]=\"unstyled()\"\n        ></h-treeNode>\n      }\n    </ul>\n  }\n</li>\n}\n" }]
+        }], propDecorators: { rowNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowNode", required: false }] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], parentNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentNode", required: false }] }], root: [{ type: i0.Input, args: [{ isSignal: true, alias: "root", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], firstChild: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstChild", required: false }] }], lastChild: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastChild", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], indentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentation", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], loadingMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMode", required: false }] }] } });
+/**
+ * Tree is used to display hierarchical data.
+ * @group Components
+ */
+class Tree extends BaseComponent {
+    dragDropService;
+    componentName = 'Tree';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pcTree = inject(TREE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    /**
+     * An array of treenodes.
+     * @group Props
+     */
+    value = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines the selection mode.
+     * @group Props
+     */
+    selectionMode = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Loading mode display.
+     * @group Props
+     */
+    loadingMode = input('mask', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingMode" }] : /* istanbul ignore next */ []));
+    /**
+     * A single treenode instance or an array to refer to the selections.
+     * @group Props
+     */
+    selection = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
+     * @group Props
+     */
+    styleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Context menu instance.
+     * @group Props
+     */
+    contextMenu = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "contextMenu" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines the behavior of context menu selection, in "separate" mode context menu updates contextMenuSelection property whereas in joint mode selection property is used instead so that when row selection is enabled, both row selection and context menu selection use the same property.
+     * @group Props
+     */
+    contextMenuSelectionMode = input('joint', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contextMenuSelectionMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Selected node with a context menu.
+     * @group Props
+     */
+    contextMenuSelection = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contextMenuSelection" }] : /* istanbul ignore next */ []));
+    /**
+     * Scope of the draggable nodes to match a droppableScope.
+     * @group Props
+     */
+    draggableScope = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "draggableScope" }] : /* istanbul ignore next */ []));
+    /**
+     * Scope of the droppable nodes to match a droppableScope.
+     * @group Props
+     */
+    droppableScope = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "droppableScope" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the nodes are draggable.
+     * @group Props
+     */
+    draggableNodes = input(undefined, { ...(ngDevMode ? { debugName: "draggableNodes" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether the nodes are droppable.
+     * @group Props
+     */
+    droppableNodes = input(undefined, { ...(ngDevMode ? { debugName: "droppableNodes" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
+     * @group Props
+     */
+    metaKeySelection = input(false, { ...(ngDevMode ? { debugName: "metaKeySelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether checkbox selections propagate to ancestor nodes.
+     * @group Props
+     */
+    propagateSelectionUp = input(true, { ...(ngDevMode ? { debugName: "propagateSelectionUp" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether checkbox selections propagate to descendant nodes.
+     * @group Props
+     */
+    propagateSelectionDown = input(true, { ...(ngDevMode ? { debugName: "propagateSelectionDown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Displays a loader to indicate data load is in progress.
+     * @group Props
+     */
+    loading = input(undefined, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The icon to show while indicating data load is in progress.
+     * @group Props
+     */
+    loadingIcon = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Text to display when there is no data.
+     * @group Props
+     */
+    emptyMessage = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * Used to define a string that labels the tree.
+     * @group Props
+     */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines a string that labels the toggler icon for accessibility.
+     * @group Props
+     */
+    togglerAriaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "togglerAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     * @group Props
+     */
+    ariaLabelledBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    /**
+     * When enabled, drop can be accepted or rejected based on condition defined at onNodeDrop.
+     * @group Props
+     */
+    validateDrop = input(undefined, { ...(ngDevMode ? { debugName: "validateDrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When specified, displays an input field to filter the items.
+     * @group Props
+     */
+    filter = input(undefined, { ...(ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Determines whether the filter input should be automatically focused when the component is rendered.
+     * @group Props
+     */
+    filterInputAutoFocus = input(false, { ...(ngDevMode ? { debugName: "filterInputAutoFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
+     * @group Props
+     */
+    filterBy = input('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Mode for filtering valid values are "lenient" and "strict". Default is lenient.
+     * @group Props
+     */
+    filterMode = input('lenient', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Mode for filtering valid values are "lenient" and "strict". Default is lenient.
+     * @group Props
+     */
+    filterOptions = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Placeholder text to show when filter input is empty.
+     * @group Props
+     */
+    filterPlaceholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Values after the tree nodes are filtered.
+     * @group Props
+     */
+    filteredNodes = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredNodes" }] : /* istanbul ignore next */ []));
+    /**
+     * Locale to use in filtering. The default locale is the host environment's current locale.
+     * @group Props
+     */
+    filterLocale = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "filterLocale" }] : /* istanbul ignore next */ []));
+    /**
+     * Height of the scrollable viewport.
+     * @group Props
+     */
+    scrollHeight = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "scrollHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines if data is loaded and interacted with in lazy manner.
+     * @group Props
+     */
+    lazy = input(false, { ...(ngDevMode ? { debugName: "lazy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether the data should be loaded on demand during scroll.
+     * @group Props
+     */
+    virtualScroll = input(undefined, { ...(ngDevMode ? { debugName: "virtualScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Height of an item in the list for VirtualScrolling.
+     * @group Props
+     */
+    virtualScrollItemSize = input(undefined, { ...(ngDevMode ? { debugName: "virtualScrollItemSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Whether to use the scroller feature. The properties of scroller component can be used like an object in it.
+     * @group Props
+     */
+    virtualScrollOptions = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "virtualScrollOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Indentation factor for spacing of the nested node when virtual scrolling is enabled.
+     * @group Props
+     */
+    indentation = input(1.5, { ...(ngDevMode ? { debugName: "indentation" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Custom templates of the component.
+     * @group Props
+     */
+    _templateMap = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_templateMap" }] : /* istanbul ignore next */ []));
+    /**
+     * Function to optimize the node list rendering, default algorithm checks for object identity.
+     * @group Props
+     */
+    trackBy = input((index, item) => item, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Highlights the node on select.
+     * @group Props
+     */
+    highlightOnSelect = input(false, { ...(ngDevMode ? { debugName: "highlightOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Callback to invoke when a node is selected.
+     * @param {TreeNodeSelectEvent} event - Node select event.
+     * @group Emits
+     */
+    onNodeSelect = output();
+    /**
+     * Callback to invoke when a node is unselected.
+     * @param {TreeNodeUnSelectEvent} event - Node unselect event.
+     * @group Emits
+     */
+    onNodeUnselect = output();
+    /**
+     * Callback to invoke when a node is expanded.
+     * @param {TreeNodeExpandEvent} event - Node expand event.
+     * @group Emits
+     */
+    onNodeExpand = output();
+    /**
+     * Callback to invoke when a node is collapsed.
+     * @param {TreeNodeCollapseEvent} event - Node collapse event.
+     * @group Emits
+     */
+    onNodeCollapse = output();
+    /**
+     * Callback to invoke when a node is selected with right click.
+     * @param {onNodeContextMenuSelect} event - Node context menu select event.
+     * @group Emits
+     */
+    onNodeContextMenuSelect = output();
+    /**
+     * Callback to invoke when a node is double clicked.
+     * @param {TreeNodeDoubleClickEvent} event - Node double click event.
+     * @group Emits
+     */
+    onNodeDoubleClick = output();
+    /**
+     * Callback to invoke when a node is dropped.
+     * @param {TreeNodeDropEvent} event - Node drop event.
+     * @group Emits
+     */
+    onNodeDrop = output();
+    /**
+     * Callback to invoke in lazy mode to load new data.
+     * @param {TreeLazyLoadEvent} event - Custom lazy load event.
+     * @group Emits
+     */
+    onLazyLoad = output();
+    /**
+     * Callback to invoke in virtual scroll mode when scroll position changes.
+     * @param {TreeScrollEvent} event - Custom scroll event.
+     * @group Emits
+     */
+    onScroll = output();
+    /**
+     * Callback to invoke in virtual scroll mode when scroll position and item's range in view changes.
+     * @param {TreeScrollIndexChangeEvent} event - Scroll index change event.
+     * @group Emits
+     */
+    onScrollIndexChange = output();
+    /**
+     * Callback to invoke when data is filtered.
+     * @param {TreeFilterEvent} event - Custom filter event.
+     * @group Emits
+     */
+    onFilter = output();
+    /**
+     * Custom filter template.
+     * @param {TreeFilterTemplateContext} context - filter context.
+     * @see {@link TreeFilterTemplateContext}
+     * @group Templates
+     */
+    filterTemplate = contentChild('filter', { ...(ngDevMode ? { debugName: "filterTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom node template.
+     * @group Templates
+     */
+    nodeTemplate = contentChild('node', { ...(ngDevMode ? { debugName: "nodeTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom header template.
+     * @group Templates
+     */
+    headerTemplate = contentChild('header', { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom footer template.
+     * @group Templates
+     */
+    footerTemplate = contentChild('footer', { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom loader template.
+     * @param {TreeLoaderTemplateContext} context - loader context.
+     * @see {@link TreeLoaderTemplateContext}
+     * @group Templates
+     */
+    loaderTemplate = contentChild('loader', { ...(ngDevMode ? { debugName: "loaderTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom empty message template.
+     * @group Templates
+     */
+    emptyTemplate = contentChild('empty', { ...(ngDevMode ? { debugName: "emptyTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom toggler icon template.
+     * @param {TreeTogglerIconTemplateContext} context - toggler icon context.
+     * @see {@link TreeTogglerIconTemplateContext}
+     * @group Templates
+     */
+    togglerIconTemplate = contentChild('togglericon', { ...(ngDevMode ? { debugName: "togglerIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom checkbox icon template.
+     * @param {TreeCheckboxIconTemplateContext} context - checkbox icon context.
+     * @see {@link TreeCheckboxIconTemplateContext}
+     * @group Templates
+     */
+    checkboxIconTemplate = contentChild('checkboxicon', { ...(ngDevMode ? { debugName: "checkboxIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom loading icon template.
+     * @group Templates
+     */
+    loadingIconTemplate = contentChild('loadingicon', { ...(ngDevMode ? { debugName: "loadingIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom filter icon template.
+     * @group Templates
+     */
+    filterIconTemplate = contentChild('filtericon', { ...(ngDevMode ? { debugName: "filterIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    filterViewChild = viewChild('filter', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterViewChild" }] : /* istanbul ignore next */ []));
+    scroller = viewChild('scroller', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scroller" }] : /* istanbul ignore next */ []));
+    wrapperViewChild = viewChild('wrapper', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wrapperViewChild" }] : /* istanbul ignore next */ []));
+    contentViewChild = viewChild('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentViewChild" }] : /* istanbul ignore next */ []));
+    templates = contentChildren(HelixTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    _headerTemplate;
+    _emptyTemplate;
+    _footerTemplate;
+    _loaderTemplate;
+    _togglerIconTemplate;
+    _checkboxIconTemplate;
+    _loadingIconTemplate;
+    _filterIconTemplate;
+    _filterTemplate;
+    onAfterContentInit() {
+        const map = {};
+        this.templates().forEach((item) => {
+            switch (item.getType()) {
+                case 'header':
+                    this._headerTemplate = item.template;
+                    break;
+                case 'empty':
+                    this._emptyTemplate = item.template;
+                    break;
+                case 'footer':
+                    this._footerTemplate = item.template;
+                    break;
+                case 'loader':
+                    this._loaderTemplate = item.template;
+                    break;
+                case 'togglericon':
+                    this._togglerIconTemplate = item.template;
+                    break;
+                case 'checkboxicon':
+                    this._checkboxIconTemplate = item.template;
+                    break;
+                case 'loadingicon':
+                    this._loadingIconTemplate = item.template;
+                    break;
+                case 'filtericon':
+                    this._filterIconTemplate = item.template;
+                    break;
+                case 'filter':
+                    this._filterTemplate = item.template;
+                    break;
+                default:
+                    map[item.name()] = item.template;
+                    break;
+            }
+        });
+        if (Object.keys(map).length) {
+            this._templateMap.set(map);
+        }
+    }
+    serializedValue;
+    nodeTouched;
+    dragNodeTree;
+    dragNode;
+    dragNodeSubNodes;
+    dragNodeIndex;
+    dragNodeScope;
+    dragHover;
+    dragStartSubscription;
+    dragStopSubscription;
+    _componentStyle = inject(TreeStyle);
+    handleDropEvent(event) {
+        this.onDrop(event);
+    }
+    handleDragOverEvent(event) {
+        this.onDragOver(event);
+    }
+    handleDragEnterEvent() {
+        this.onDragEnter();
+    }
+    handleDragLeaveEvent(event) {
+        this.onDragLeave(event);
+    }
+    constructor(dragDropService) {
+        super();
+        this.dragDropService = dragDropService;
+    }
+    onInit() {
+        if (this.filterBy()) {
+            this.filterOptions.set({
+                filter: (value) => this._filter(value),
+                reset: () => this.resetFilter()
+            });
+        }
+        if (this.droppableNodes()) {
+            this.dragStartSubscription = this.dragDropService.dragStart$.subscribe((event) => {
+                this.dragNodeTree = event.tree;
+                this.dragNode = event.node;
+                this.dragNodeSubNodes = event.subNodes;
+                this.dragNodeIndex = event.index;
+                this.dragNodeScope = event.scope;
+            });
+            this.dragStopSubscription = this.dragDropService.dragStop$.subscribe((event) => {
+                this.dragNodeTree = null;
+                this.dragNode = null;
+                this.dragNodeSubNodes = null;
+                this.dragNodeIndex = null;
+                this.dragNodeScope = null;
+                this.dragHover = false;
+            });
+        }
+    }
+    onChanges(simpleChange) {
+        if (simpleChange.value) {
+            this.updateSerializedValue();
+            if (this.hasFilterActive()) {
+                this._filter(this.filterViewChild()?.nativeElement?.value);
+            }
+        }
+    }
+    get emptyMessageLabel() {
+        return this.emptyMessage() || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
+    }
+    updateSerializedValue() {
+        this.serializedValue = [];
+        this.serializeNodes(null, this.getRootNode(), 0, true);
+    }
+    serializeNodes(parent, nodes, level, visible) {
+        if (nodes && nodes.length) {
+            for (let node of nodes) {
+                node.parent = parent;
+                const rowNode = {
+                    node: node,
+                    parent: parent,
+                    level: level,
+                    visible: visible && (parent ? parent.expanded : true)
+                };
+                this.serializedValue.push(rowNode);
+                if (rowNode.visible && node.expanded) {
+                    this.serializeNodes(node, node.children, level + 1, rowNode.visible);
+                }
+            }
+        }
+    }
+    onNodeClick(event, node) {
+        let eventTarget = event.target;
+        const section = eventTarget?.getAttribute?.('data-pc-section');
+        if (section === 'nodetogglebutton' || section === 'nodetoggleicon') {
+            return;
+        }
+        if (this.selectionMode()) {
+            if (node.selectable === false) {
+                node.style = '--h-focus-ring-color: none;';
+                return;
+            }
+            else {
+                if (!node.style?.includes('--h-focus-ring-color')) {
+                    node.style = node.style ? `${node.style}--h-focus-ring-color: var(--primary-color)` : '--h-focus-ring-color: var(--primary-color)';
+                }
+            }
+            if (this.hasFilteredNodes()) {
+                node = this.getNodeWithKey(node.key, this.filteredNodes());
+                if (!node) {
+                    return;
+                }
+            }
+            let index = this.findIndexInSelection(node);
+            let selected = index >= 0;
+            const currentSelection = this.selection();
+            if (this.isCheckboxSelectionMode()) {
+                if (selected) {
+                    if (this.propagateSelectionDown())
+                        this.propagateDown(node, false);
+                    else
+                        this.selection.set(currentSelection.filter((_val, i) => i != index));
+                    if (this.propagateSelectionUp() && node.parent) {
+                        this.propagateUp(node.parent, false);
+                    }
+                    this.onNodeUnselect.emit({ originalEvent: event, node: node });
+                }
+                else {
+                    if (this.propagateSelectionDown())
+                        this.propagateDown(node, true);
+                    else
+                        this.selection.set([...(currentSelection || []), node]);
+                    if (this.propagateSelectionUp() && node.parent) {
+                        this.propagateUp(node.parent, true);
+                    }
+                    this.onNodeSelect.emit({ originalEvent: event, node: node });
+                }
+            }
+            else {
+                let metaSelection = this.nodeTouched ? false : this.metaKeySelection();
+                if (metaSelection) {
+                    let metaKey = event.metaKey || event.ctrlKey;
+                    if (selected && metaKey) {
+                        if (this.isSingleSelectionMode()) {
+                            this.selection.set(null);
+                        }
+                        else {
+                            this.selection.set(currentSelection.filter((_val, i) => i != index));
+                        }
+                        this.onNodeUnselect.emit({ originalEvent: event, node: node });
+                    }
+                    else {
+                        if (this.isSingleSelectionMode()) {
+                            this.selection.set(node);
+                        }
+                        else if (this.isMultipleSelectionMode()) {
+                            const base = !metaKey ? [] : currentSelection || [];
+                            this.selection.set([...base, node]);
+                        }
+                        this.onNodeSelect.emit({ originalEvent: event, node: node });
+                    }
+                }
+                else {
+                    if (this.isSingleSelectionMode()) {
+                        if (selected) {
+                            this.selection.set(null);
+                            this.onNodeUnselect.emit({ originalEvent: event, node: node });
+                        }
+                        else {
+                            this.selection.set(node);
+                            setTimeout(() => {
+                                this.onNodeSelect.emit({ originalEvent: event, node: node });
+                            });
+                        }
+                    }
+                    else {
+                        if (selected) {
+                            this.selection.set(currentSelection.filter((_val, i) => i != index));
+                            this.onNodeUnselect.emit({ originalEvent: event, node: node });
+                        }
+                        else {
+                            this.selection.set([...(currentSelection || []), node]);
+                            setTimeout(() => {
+                                this.onNodeSelect.emit({ originalEvent: event, node: node });
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        this.nodeTouched = false;
+    }
+    onNodeTouchEnd() {
+        this.nodeTouched = true;
+    }
+    onNodeRightClick(event, node) {
+        if (this.contextMenu()) {
+            let eventTarget = event.target;
+            const section = eventTarget.getAttribute('data-pc-section');
+            if (section === 'nodetogglebutton' || section === 'nodetoggleicon') {
+                return;
+            }
+            let index = this.findIndexInSelection(node);
+            let isNodeSelected = index >= 0;
+            const onContextMenuCallback = () => {
+                this.contextMenu().show(event);
+                this.contextMenu().hideCallback = () => {
+                    this.contextMenuSelection.set(null);
+                };
+                this.onNodeContextMenuSelect.emit({ originalEvent: event, node: node });
+            };
+            const contextMenuSelectionMode = this.contextMenuSelectionMode();
+            if (contextMenuSelectionMode === 'separate') {
+                // In 'separate' mode: Update contextMenuSelection with clicked node, don't modify selection
+                this.contextMenuSelection.set(node);
+                onContextMenuCallback();
+            }
+            else if (contextMenuSelectionMode === 'joint') {
+                // In 'joint' mode: Update only selection, don't touch contextMenuSelection
+                if (!isNodeSelected) {
+                    if (this.isSingleSelectionMode()) {
+                        this.selection.set(node);
+                    }
+                    else {
+                        this.selection.set([node]);
+                    }
+                }
+                // If already selected, keep current selection as is
+                onContextMenuCallback();
+            }
+        }
+    }
+    onNodeDblClick(event, node) {
+        this.onNodeDoubleClick.emit({ originalEvent: event, node: node });
+    }
+    findIndexInSelection(node) {
+        let index = -1;
+        const currentSelection = this.selection();
+        if (this.selectionMode() && currentSelection) {
+            if (this.isSingleSelectionMode()) {
+                const sel = currentSelection;
+                let areNodesEqual = (sel.key && sel.key === node.key) || sel == node;
+                index = areNodesEqual ? 0 : -1;
+            }
+            else {
+                const selArray = currentSelection;
+                for (let i = 0; i < selArray.length; i++) {
+                    let selectedNode = selArray[i];
+                    let areNodesEqual = (selectedNode.key && selectedNode.key === node.key) || selectedNode == node;
+                    if (areNodesEqual) {
+                        index = i;
+                        break;
+                    }
+                }
+            }
+        }
+        return index;
+    }
+    syncNodeOption(node, parentNodes, option, value) {
+        // to synchronize the node option between the filtered nodes and the original nodes(this.value)
+        const _node = this.hasFilteredNodes() ? this.getNodeWithKey(node.key, parentNodes) : null;
+        if (_node) {
+            _node[option] = value || node[option];
+        }
+    }
+    hasFilteredNodes() {
+        const filtered = this.filteredNodes();
+        return this.filter() && filtered && filtered.length > 0;
+    }
+    hasFilterActive() {
+        return this.filter() && this.filterViewChild()?.nativeElement?.value.length > 0;
+    }
+    getNodeWithKey(key, nodes) {
+        for (let node of nodes) {
+            if (node.key === key) {
+                return node;
+            }
+            if (node.children) {
+                let matchedNode = this.getNodeWithKey(key, node.children);
+                if (matchedNode) {
+                    return matchedNode;
+                }
+            }
+        }
+    }
+    propagateUp(node, select) {
+        if (node.children && node.children.length) {
+            let selectedCount = 0;
+            let childPartialSelected = false;
+            for (let child of node.children) {
+                if (this.isSelected(child)) {
+                    selectedCount++;
+                }
+                else if (child.partialSelected) {
+                    childPartialSelected = true;
+                }
+            }
+            const currentSelection = this.selection() || [];
+            if (select && selectedCount == node.children.length) {
+                this.selection.set([...currentSelection, node]);
+                node.partialSelected = false;
+            }
+            else {
+                if (!select) {
+                    let index = this.findIndexInSelection(node);
+                    if (index >= 0) {
+                        this.selection.set(currentSelection.filter((_val, i) => i != index));
+                    }
+                }
+                if (childPartialSelected || (selectedCount > 0 && selectedCount != node.children.length))
+                    node.partialSelected = true;
+                else
+                    node.partialSelected = false;
+            }
+            this.syncNodeOption(node, this.filteredNodes(), 'partialSelected');
+        }
+        let parent = node.parent;
+        if (parent) {
+            this.propagateUp(parent, select);
+        }
+    }
+    propagateDown(node, select) {
+        let index = this.findIndexInSelection(node);
+        const currentSelection = this.selection() || [];
+        if (select && index == -1) {
+            this.selection.set([...currentSelection, node]);
+        }
+        else if (!select && index > -1) {
+            this.selection.set(currentSelection.filter((_val, i) => i != index));
+        }
+        node.partialSelected = false;
+        this.syncNodeOption(node, this.filteredNodes(), 'partialSelected');
+        if (node.children && node.children.length) {
+            for (let child of node.children) {
+                this.propagateDown(child, select);
+            }
+        }
+    }
+    isSelected(node) {
+        return this.findIndexInSelection(node) != -1;
+    }
+    isSingleSelectionMode() {
+        return this.selectionMode() && this.selectionMode() == 'single';
+    }
+    isMultipleSelectionMode() {
+        return this.selectionMode() && this.selectionMode() == 'multiple';
+    }
+    isCheckboxSelectionMode() {
+        return this.selectionMode() && this.selectionMode() == 'checkbox';
+    }
+    isNodeLeaf(node) {
+        return node.leaf == false ? false : !(node.children && node.children.length);
+    }
+    getRootNode() {
+        return this.filteredNodes() ? this.filteredNodes() : this.value();
+    }
+    getTemplateForNode(node) {
+        if (this._templateMap())
+            return node.type ? this._templateMap()[node.type] : this._templateMap()['default'];
+        else
+            return null;
+    }
+    onDragOver(event) {
+        if (this.droppableNodes() && this.allowDrop(this.dragNode, null, this.dragNodeScope)) {
+            event.dataTransfer.dropEffect = 'copy';
+            event.preventDefault();
+        }
+    }
+    onDrop(event) {
+        if (this.droppableNodes()) {
+            event.preventDefault();
+            let dragNode = this.dragNode;
+            if (this.isSameTreeScope(this.dragNodeScope)) {
+                return;
+            }
+            if (this.allowDrop(dragNode, null, this.dragNodeScope)) {
+                let dragNodeIndex = this.dragNodeIndex;
+                this.value.update(v => v || []);
+                if (this.validateDrop()) {
+                    this.onNodeDrop.emit({
+                        originalEvent: event,
+                        dragNode: dragNode,
+                        dropNode: null,
+                        index: dragNodeIndex,
+                        accept: () => {
+                            this.processTreeDrop(dragNode, dragNodeIndex);
+                        }
+                    });
+                }
+                else {
+                    this.onNodeDrop.emit({
+                        originalEvent: event,
+                        dragNode: dragNode,
+                        dropNode: null,
+                        index: dragNodeIndex
+                    });
+                    this.processTreeDrop(dragNode, dragNodeIndex);
+                }
+            }
+        }
+    }
+    processTreeDrop(dragNode, dragNodeIndex) {
+        this.dragNodeSubNodes.splice(dragNodeIndex, 1);
+        this.value().push(dragNode);
+        this.dragDropService.stopDrag({
+            node: dragNode
+        });
+    }
+    onDragEnter() {
+        if (this.droppableNodes() && this.allowDrop(this.dragNode, null, this.dragNodeScope)) {
+            this.dragHover = true;
+        }
+    }
+    onDragLeave(event) {
+        if (this.droppableNodes()) {
+            let rect = event.currentTarget.getBoundingClientRect();
+            if (event.x > parseInt(rect.left) + rect.width || event.x < parseInt(rect.left) || event.y > parseInt(rect.top) + rect.height || event.y < parseInt(rect.top)) {
+                this.dragHover = false;
+            }
+        }
+    }
+    allowDrop(dragNode, dropNode, dragNodeScope) {
+        if (!dragNode) {
+            //prevent random html elements to be dragged
+            return false;
+        }
+        else if (this.isValidDragScope(dragNodeScope)) {
+            let allow = true;
+            if (dropNode) {
+                if (dragNode === dropNode) {
+                    allow = false;
+                }
+                else {
+                    let parent = dropNode.parent;
+                    while (parent != null) {
+                        if (parent === dragNode) {
+                            allow = false;
+                            break;
+                        }
+                        parent = parent.parent;
+                    }
+                }
+            }
+            return allow;
+        }
+        else {
+            return false;
+        }
+    }
+    hasCommonScope(dragScope, dropScope) {
+        if (typeof dropScope === 'string') {
+            if (typeof dragScope === 'string')
+                return dropScope === dragScope;
+            else if (Array.isArray(dragScope))
+                return dragScope.indexOf(dropScope) != -1;
+        }
+        else if (Array.isArray(dropScope)) {
+            if (typeof dragScope === 'string') {
+                return dropScope.indexOf(dragScope) != -1;
+            }
+            else if (Array.isArray(dragScope)) {
+                for (let s of dropScope) {
+                    for (let ds of dragScope) {
+                        if (s === ds) {
+                            return true;
+                        }
+                    }
+                }
+            }
+        }
+        return false;
+    }
+    isSameTreeScope(dragScope) {
+        return this.hasCommonScope(dragScope, this.draggableScope());
+    }
+    isValidDragScope(dragScope) {
+        let dropScope = this.droppableScope();
+        if (dropScope) {
+            return this.hasCommonScope(dragScope, dropScope);
+        }
+        else {
+            return true;
+        }
+    }
+    _filter(value) {
+        let filterValue = value;
+        if (filterValue === '') {
+            this.filteredNodes.set(null);
+        }
+        else {
+            const filtered = [];
+            const searchFields = this.filterBy().split(',');
+            const filterText = removeAccents(filterValue).toLocaleLowerCase(this.filterLocale());
+            const isStrictMode = this.filterMode() === 'strict';
+            for (let node of this.value()) {
+                let copyNode = { ...node };
+                let paramsWithoutNode = { searchFields, filterText, isStrictMode };
+                if ((isStrictMode && (this.findFilteredNodes(copyNode, paramsWithoutNode) || this.isFilterMatched(copyNode, paramsWithoutNode))) ||
+                    (!isStrictMode && (this.isFilterMatched(copyNode, paramsWithoutNode) || this.findFilteredNodes(copyNode, paramsWithoutNode)))) {
+                    filtered.push(copyNode);
+                }
+            }
+            this.filteredNodes.set(filtered);
+        }
+        this.updateSerializedValue();
+        this.onFilter.emit({
+            filter: filterValue,
+            filteredValue: this.filteredNodes()
+        });
+    }
+    /**
+     * Resets filter.
+     * @group Method
+     */
+    resetFilter() {
+        this.filteredNodes.set(null);
+        const filterViewChildEl = this.filterViewChild();
+        if (filterViewChildEl?.nativeElement) {
+            filterViewChildEl.nativeElement.value = '';
+        }
+    }
+    /**
+     * Scrolls to virtual index.
+     * @param {number} number - Index to be scrolled.
+     * @group Method
+     */
+    scrollToVirtualIndex(index) {
+        this.virtualScroll() && this.scroller()?.scrollToIndex(index);
+    }
+    /**
+     * Scrolls to virtual index.
+     * @param {ScrollToOptions} options - Scroll options.
+     * @group Method
+     */
+    scrollTo(options) {
+        if (this.virtualScroll()) {
+            this.scroller()?.scrollTo(options);
+        }
+        else {
+            const wrapperEl = this.wrapperViewChild();
+            if (wrapperEl?.nativeElement) {
+                if (wrapperEl.nativeElement.scrollTo) {
+                    wrapperEl.nativeElement.scrollTo(options);
+                }
+                else {
+                    wrapperEl.nativeElement.scrollLeft = options.left;
+                    wrapperEl.nativeElement.scrollTop = options.top;
+                }
+            }
+        }
+    }
+    findFilteredNodes(node, paramsWithoutNode) {
+        if (node) {
+            let matched = false;
+            if (node.children) {
+                let childNodes = [...node.children];
+                node.children = [];
+                for (let childNode of childNodes) {
+                    let copyChildNode = { ...childNode };
+                    if (this.isFilterMatched(copyChildNode, paramsWithoutNode)) {
+                        matched = true;
+                        node.children.push(copyChildNode);
+                    }
+                }
+            }
+            if (matched) {
+                node.expanded = true;
+                return true;
+            }
+        }
+    }
+    isFilterMatched(node, params) {
+        let { searchFields, filterText, isStrictMode } = params;
+        let matched = false;
+        for (let field of searchFields) {
+            let fieldValue = removeAccents(String(resolveFieldData(node, field))).toLocaleLowerCase(this.filterLocale());
+            if (fieldValue.indexOf(filterText) > -1) {
+                matched = true;
+            }
+        }
+        if (!matched || (isStrictMode && !this.isNodeLeaf(node))) {
+            matched = this.findFilteredNodes(node, { searchFields, filterText, isStrictMode }) || matched;
+        }
+        return matched;
+    }
+    getIndex(options, index) {
+        const getItemOptions = options['getItemOptions'];
+        return getItemOptions ? getItemOptions(index).index : index;
+    }
+    getBlockableElement() {
+        return this.el.nativeElement.children[0];
+    }
+    onDestroy() {
+        if (this.dragStartSubscription) {
+            this.dragStartSubscription.unsubscribe();
+        }
+        if (this.dragStopSubscription) {
+            this.dragStopSubscription.unsubscribe();
+        }
+    }
+    get containerDataP() {
+        return this.cn({
+            loading: this.loading(),
+            scrollable: this.scrollHeight() === 'flex'
+        });
+    }
+    get wrapperDataP() {
+        return this.cn({
+            scrollable: this.scrollHeight() === 'flex'
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Tree, deps: [{ token: i4.TreeDragDropService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Tree, isStandalone: true, selector: "h-tree", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, loadingMode: { classPropertyName: "loadingMode", publicName: "loadingMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null }, contextMenuSelectionMode: { classPropertyName: "contextMenuSelectionMode", publicName: "contextMenuSelectionMode", isSignal: true, isRequired: false, transformFunction: null }, contextMenuSelection: { classPropertyName: "contextMenuSelection", publicName: "contextMenuSelection", isSignal: true, isRequired: false, transformFunction: null }, draggableScope: { classPropertyName: "draggableScope", publicName: "draggableScope", isSignal: true, isRequired: false, transformFunction: null }, droppableScope: { classPropertyName: "droppableScope", publicName: "droppableScope", isSignal: true, isRequired: false, transformFunction: null }, draggableNodes: { classPropertyName: "draggableNodes", publicName: "draggableNodes", isSignal: true, isRequired: false, transformFunction: null }, droppableNodes: { classPropertyName: "droppableNodes", publicName: "droppableNodes", isSignal: true, isRequired: false, transformFunction: null }, metaKeySelection: { classPropertyName: "metaKeySelection", publicName: "metaKeySelection", isSignal: true, isRequired: false, transformFunction: null }, propagateSelectionUp: { classPropertyName: "propagateSelectionUp", publicName: "propagateSelectionUp", isSignal: true, isRequired: false, transformFunction: null }, propagateSelectionDown: { classPropertyName: "propagateSelectionDown", publicName: "propagateSelectionDown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, togglerAriaLabel: { classPropertyName: "togglerAriaLabel", publicName: "togglerAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, validateDrop: { classPropertyName: "validateDrop", publicName: "validateDrop", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterInputAutoFocus: { classPropertyName: "filterInputAutoFocus", publicName: "filterInputAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, filteredNodes: { classPropertyName: "filteredNodes", publicName: "filteredNodes", isSignal: true, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollOptions: { classPropertyName: "virtualScrollOptions", publicName: "virtualScrollOptions", isSignal: true, isRequired: false, transformFunction: null }, indentation: { classPropertyName: "indentation", publicName: "indentation", isSignal: true, isRequired: false, transformFunction: null }, _templateMap: { classPropertyName: "_templateMap", publicName: "_templateMap", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, highlightOnSelect: { classPropertyName: "highlightOnSelect", publicName: "highlightOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectionMode: "selectionModeChange", selection: "selectionChange", contextMenuSelection: "contextMenuSelectionChange", filterOptions: "filterOptionsChange", filteredNodes: "filteredNodesChange", _templateMap: "_templateMapChange", onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", onNodeContextMenuSelect: "onNodeContextMenuSelect", onNodeDoubleClick: "onNodeDoubleClick", onNodeDrop: "onNodeDrop", onLazyLoad: "onLazyLoad", onScroll: "onScroll", onScrollIndexChange: "onScrollIndexChange", onFilter: "onFilter" }, host: { listeners: { "drop": "handleDropEvent($event)", "dragover": "handleDragOverEvent($event)", "dragenter": "handleDragEnterEvent()", "dragleave": "handleDragLeaveEvent($event)" }, properties: { "class": "cn(cx('root'), styleClass())", "attr.data-h": "containerDataP" } }, providers: [TreeStyle, { provide: TREE_INSTANCE, useExisting: Tree }, { provide: PARENT_INSTANCE, useExisting: Tree }], queries: [{ propertyName: "filterTemplate", first: true, predicate: ["filter"], isSignal: true }, { propertyName: "nodeTemplate", first: true, predicate: ["node"], isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], isSignal: true }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"], isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"], isSignal: true }, { propertyName: "togglerIconTemplate", first: true, predicate: ["togglericon"], isSignal: true }, { propertyName: "checkboxIconTemplate", first: true, predicate: ["checkboxicon"], isSignal: true }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"], isSignal: true }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"], isSignal: true }, { propertyName: "templates", predicate: HelixTemplate, isSignal: true }], viewQueries: [{ propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true, isSignal: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i3.Bind }], ngImport: i0, template: "@if (loading() && loadingMode() === 'mask') {\n  <div [class]=\"cx('mask')\" [hBind]=\"ptm('mask')\" animate.enter=\"h-overlay-mask-enter-active\" animate.leave=\"h-overlay-mask-leave-active\">\n    @if (loadingIcon()) {\n      <i [class]=\"cn(cx('loadingIcon'), 'pi-spin' + loadingIcon())\" [hBind]=\"ptm('loadingIcon')\"></i>\n    }\n    @if (!loadingIcon()) {\n      @if (!loadingIconTemplate() && !_loadingIconTemplate) {\n        <svg data-h-icon=\"spinner\" spin [class]=\"cx('loadingIcon')\" [hBind]=\"ptm('loadingIcon')\" />\n      }\n      @if (loadingIconTemplate() || _loadingIconTemplate) {\n        <span [class]=\"cx('loadingIcon')\" [hBind]=\"ptm('loadingIcon')\">\n          <ng-template *ngTemplateOutlet=\"loadingIconTemplate() || _loadingIconTemplate\"></ng-template>\n        </span>\n      }\n    }\n  </div>\n}\n<ng-container *ngTemplateOutlet=\"headerTemplate() || _headerTemplate\"></ng-container>\n@if (filterTemplate() || _filterTemplate) {\n  <ng-container *ngTemplateOutlet=\"filterTemplate() || _filterTemplate; context: { $implicit: filterOptions() }\"></ng-container>\n} @else {\n  @if (filter()) {\n    <h-iconfield [class]=\"cx('pcFilterContainer')\" [pt]=\"ptm('pcFilterContainer')\" [unstyled]=\"unstyled()\">\n      <input\n        #filter\n        [hAutoFocus]=\"filterInputAutoFocus()\"\n        hInputText\n        type=\"search\"\n        autocomplete=\"off\"\n        [class]=\"cx('pcFilterInput')\"\n        [attr.placeholder]=\"filterPlaceholder()\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (input)=\"_filter($safeNavigationMigration($event.target?.value))\"\n        [pt]=\"ptm('pcFilterInput')\"\n        [unstyled]=\"unstyled()\"\n        />\n      <h-inputicon [pt]=\"ptm('pcFilterIconContainer')\" [unstyled]=\"unstyled()\">\n        @if (!filterIconTemplate() && !_filterIconTemplate) {\n          <svg data-h-icon=\"search\" [class]=\"cx('filterIcon')\" [hBind]=\"ptm('filterIcon')\" />\n        }\n        @if (filterIconTemplate() || _filterIconTemplate) {\n          <span [class]=\"cx('filterIcon')\" [hBind]=\"ptm('filterIcon')\">\n            <ng-template *ngTemplateOutlet=\"filterIconTemplate() || _filterIconTemplate\"></ng-template>\n          </span>\n        }\n      </h-inputicon>\n    </h-iconfield>\n  }\n}\n\n@if (getRootNode()?.length) {\n  @if (virtualScroll()) {\n    <h-scroller\n      #scroller\n      [items]=\"serializedValue\"\n      [tabindex]=\"-1\"\n      [styleClass]=\"cx('wrapper')\"\n      [style]=\"{ height: scrollHeight() !== 'flex' ? scrollHeight() : undefined }\"\n      [scrollHeight]=\"scrollHeight() !== 'flex' ? undefined : '100%'\"\n      [itemSize]=\"virtualScrollItemSize()\"\n      [lazy]=\"lazy()\"\n      (onScroll)=\"onScroll.emit($event)\"\n      (onScrollIndexChange)=\"onScrollIndexChange.emit($event)\"\n      (onLazyLoad)=\"onLazyLoad.emit($event)\"\n      [options]=\"virtualScrollOptions()\"\n      [pt]=\"ptm('virtualScroller')\"\n      hostName=\"tree\"\n      [attr.data-h]=\"wrapperDataP\"\n      >\n      <ng-template #content let-items let-scrollerOptions=\"options\">\n        @if (items) {\n          <ul\n            #content\n            [class]=\"cx('rootChildren')\"\n            [ngClass]=\"scrollerOptions.contentStyleClass\"\n            [style]=\"scrollerOptions.contentStyle\"\n            role=\"tree\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-labelledby]=\"ariaLabelledBy()\"\n            [hBind]=\"ptm('rootChildren')\"\n            >\n            @for (rowNode of items; track trackBy()(index, rowNode); let firstChild = $first; let lastChild = $last; let index = $index) {\n              <h-treeNode\n                #treeNode\n                [level]=\"rowNode.level\"\n                [rowNode]=\"rowNode\"\n                [node]=\"rowNode.node\"\n                [parentNode]=\"rowNode.parent\"\n                [firstChild]=\"firstChild\"\n                [lastChild]=\"lastChild\"\n                [index]=\"getIndex(scrollerOptions, index)\"\n                [itemSize]=\"scrollerOptions.itemSize\"\n                [indentation]=\"indentation()\"\n                [loadingMode]=\"loadingMode()\"\n                [pt]=\"pt\"\n                [unstyled]=\"unstyled()\"\n              ></h-treeNode>\n            }\n          </ul>\n        }\n      </ng-template>\n      @if (loaderTemplate() || _loaderTemplate) {\n        <ng-template #loader let-scrollerOptions=\"options\">\n          <ng-container *ngTemplateOutlet=\"loaderTemplate() || _loaderTemplate; context: { options: scrollerOptions }\"></ng-container>\n        </ng-template>\n      }\n    </h-scroller>\n  }\n  @if (!virtualScroll()) {\n    <div #wrapper [class]=\"cx('wrapper')\" [style.max-height]=\"scrollHeight()\" [hBind]=\"ptm('wrapper')\" [attr.data-h]=\"wrapperDataP\">\n      @if (getRootNode()) {\n        <ul #content [class]=\"cx('rootChildren')\" role=\"tree\" [attr.aria-label]=\"ariaLabel()\" [attr.aria-labelledby]=\"ariaLabelledBy()\" [hBind]=\"ptm('rootChildren')\">\n          @for (node of getRootNode(); track trackBy().bind(this)(index, node); let firstChild = $first; let lastChild = $last; let index = $index) {\n            <h-treeNode\n              [node]=\"node\"\n              [firstChild]=\"firstChild\"\n              [lastChild]=\"lastChild\"\n              [index]=\"index\"\n              [level]=\"0\"\n              [loadingMode]=\"loadingMode()\"\n              [pt]=\"pt\"\n              [unstyled]=\"unstyled()\"\n            ></h-treeNode>\n          }\n        </ul>\n      }\n    </div>\n  }\n}\n\n@if (!loading() && (getRootNode() == null || getRootNode().length === 0)) {\n  <div [class]=\"cx('emptyMessage')\" [hBind]=\"ptm('emptyMessage')\">\n    @if (!emptyTemplate() && !_emptyTemplate) {\n      {{ emptyMessageLabel }}\n    } @else {\n      <ng-container *ngTemplateOutlet=\"emptyTemplate() || _emptyTemplate\"></ng-container>\n    }\n  </div>\n}\n<ng-container *ngTemplateOutlet=\"footerTemplate() || _footerTemplate\"></ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Scroller, selector: "h-scroller, h-virtualscroller, h-virtual-scroller, h-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: SearchIcon, selector: "[data-h-icon=\"search\"]" }, { kind: "component", type: SpinnerIcon, selector: "[data-h-icon=\"spinner\"]" }, { kind: "directive", type: InputText, selector: "[hInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconField, selector: "h-iconfield, h-iconField, h-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "h-inputicon, h-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: UITreeNode, selector: "h-treeNode", inputs: ["rowNode", "node", "parentNode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i5.AutoFocus, selector: "[hAutoFocus]", inputs: ["hAutoFocus"] }, { kind: "directive", type: Bind, selector: "[hBind]", inputs: ["hBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Tree, decorators: [{
+            type: Component,
+            args: [{ selector: 'h-tree', standalone: true, imports: [CommonModule, Scroller, SharedModule, SearchIcon, SpinnerIcon, InputText, FormsModule, IconField, InputIcon, UITreeNode, AutoFocusModule, Bind], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [TreeStyle, { provide: TREE_INSTANCE, useExisting: Tree }, { provide: PARENT_INSTANCE, useExisting: Tree }], host: {
+                        '[class]': "cn(cx('root'), styleClass())",
+                        '[attr.data-h]': 'containerDataP',
+                        '(drop)': 'handleDropEvent($event)',
+                        '(dragover)': 'handleDragOverEvent($event)',
+                        '(dragenter)': 'handleDragEnterEvent()',
+                        '(dragleave)': 'handleDragLeaveEvent($event)'
+                    }, hostDirectives: [Bind], template: "@if (loading() && loadingMode() === 'mask') {\n  <div [class]=\"cx('mask')\" [hBind]=\"ptm('mask')\" animate.enter=\"h-overlay-mask-enter-active\" animate.leave=\"h-overlay-mask-leave-active\">\n    @if (loadingIcon()) {\n      <i [class]=\"cn(cx('loadingIcon'), 'pi-spin' + loadingIcon())\" [hBind]=\"ptm('loadingIcon')\"></i>\n    }\n    @if (!loadingIcon()) {\n      @if (!loadingIconTemplate() && !_loadingIconTemplate) {\n        <svg data-h-icon=\"spinner\" spin [class]=\"cx('loadingIcon')\" [hBind]=\"ptm('loadingIcon')\" />\n      }\n      @if (loadingIconTemplate() || _loadingIconTemplate) {\n        <span [class]=\"cx('loadingIcon')\" [hBind]=\"ptm('loadingIcon')\">\n          <ng-template *ngTemplateOutlet=\"loadingIconTemplate() || _loadingIconTemplate\"></ng-template>\n        </span>\n      }\n    }\n  </div>\n}\n<ng-container *ngTemplateOutlet=\"headerTemplate() || _headerTemplate\"></ng-container>\n@if (filterTemplate() || _filterTemplate) {\n  <ng-container *ngTemplateOutlet=\"filterTemplate() || _filterTemplate; context: { $implicit: filterOptions() }\"></ng-container>\n} @else {\n  @if (filter()) {\n    <h-iconfield [class]=\"cx('pcFilterContainer')\" [pt]=\"ptm('pcFilterContainer')\" [unstyled]=\"unstyled()\">\n      <input\n        #filter\n        [hAutoFocus]=\"filterInputAutoFocus()\"\n        hInputText\n        type=\"search\"\n        autocomplete=\"off\"\n        [class]=\"cx('pcFilterInput')\"\n        [attr.placeholder]=\"filterPlaceholder()\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (input)=\"_filter($safeNavigationMigration($event.target?.value))\"\n        [pt]=\"ptm('pcFilterInput')\"\n        [unstyled]=\"unstyled()\"\n        />\n      <h-inputicon [pt]=\"ptm('pcFilterIconContainer')\" [unstyled]=\"unstyled()\">\n        @if (!filterIconTemplate() && !_filterIconTemplate) {\n          <svg data-h-icon=\"search\" [class]=\"cx('filterIcon')\" [hBind]=\"ptm('filterIcon')\" />\n        }\n        @if (filterIconTemplate() || _filterIconTemplate) {\n          <span [class]=\"cx('filterIcon')\" [hBind]=\"ptm('filterIcon')\">\n            <ng-template *ngTemplateOutlet=\"filterIconTemplate() || _filterIconTemplate\"></ng-template>\n          </span>\n        }\n      </h-inputicon>\n    </h-iconfield>\n  }\n}\n\n@if (getRootNode()?.length) {\n  @if (virtualScroll()) {\n    <h-scroller\n      #scroller\n      [items]=\"serializedValue\"\n      [tabindex]=\"-1\"\n      [styleClass]=\"cx('wrapper')\"\n      [style]=\"{ height: scrollHeight() !== 'flex' ? scrollHeight() : undefined }\"\n      [scrollHeight]=\"scrollHeight() !== 'flex' ? undefined : '100%'\"\n      [itemSize]=\"virtualScrollItemSize()\"\n      [lazy]=\"lazy()\"\n      (onScroll)=\"onScroll.emit($event)\"\n      (onScrollIndexChange)=\"onScrollIndexChange.emit($event)\"\n      (onLazyLoad)=\"onLazyLoad.emit($event)\"\n      [options]=\"virtualScrollOptions()\"\n      [pt]=\"ptm('virtualScroller')\"\n      hostName=\"tree\"\n      [attr.data-h]=\"wrapperDataP\"\n      >\n      <ng-template #content let-items let-scrollerOptions=\"options\">\n        @if (items) {\n          <ul\n            #content\n            [class]=\"cx('rootChildren')\"\n            [ngClass]=\"scrollerOptions.contentStyleClass\"\n            [style]=\"scrollerOptions.contentStyle\"\n            role=\"tree\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-labelledby]=\"ariaLabelledBy()\"\n            [hBind]=\"ptm('rootChildren')\"\n            >\n            @for (rowNode of items; track trackBy()(index, rowNode); let firstChild = $first; let lastChild = $last; let index = $index) {\n              <h-treeNode\n                #treeNode\n                [level]=\"rowNode.level\"\n                [rowNode]=\"rowNode\"\n                [node]=\"rowNode.node\"\n                [parentNode]=\"rowNode.parent\"\n                [firstChild]=\"firstChild\"\n                [lastChild]=\"lastChild\"\n                [index]=\"getIndex(scrollerOptions, index)\"\n                [itemSize]=\"scrollerOptions.itemSize\"\n                [indentation]=\"indentation()\"\n                [loadingMode]=\"loadingMode()\"\n                [pt]=\"pt\"\n                [unstyled]=\"unstyled()\"\n              ></h-treeNode>\n            }\n          </ul>\n        }\n      </ng-template>\n      @if (loaderTemplate() || _loaderTemplate) {\n        <ng-template #loader let-scrollerOptions=\"options\">\n          <ng-container *ngTemplateOutlet=\"loaderTemplate() || _loaderTemplate; context: { options: scrollerOptions }\"></ng-container>\n        </ng-template>\n      }\n    </h-scroller>\n  }\n  @if (!virtualScroll()) {\n    <div #wrapper [class]=\"cx('wrapper')\" [style.max-height]=\"scrollHeight()\" [hBind]=\"ptm('wrapper')\" [attr.data-h]=\"wrapperDataP\">\n      @if (getRootNode()) {\n        <ul #content [class]=\"cx('rootChildren')\" role=\"tree\" [attr.aria-label]=\"ariaLabel()\" [attr.aria-labelledby]=\"ariaLabelledBy()\" [hBind]=\"ptm('rootChildren')\">\n          @for (node of getRootNode(); track trackBy().bind(this)(index, node); let firstChild = $first; let lastChild = $last; let index = $index) {\n            <h-treeNode\n              [node]=\"node\"\n              [firstChild]=\"firstChild\"\n              [lastChild]=\"lastChild\"\n              [index]=\"index\"\n              [level]=\"0\"\n              [loadingMode]=\"loadingMode()\"\n              [pt]=\"pt\"\n              [unstyled]=\"unstyled()\"\n            ></h-treeNode>\n          }\n        </ul>\n      }\n    </div>\n  }\n}\n\n@if (!loading() && (getRootNode() == null || getRootNode().length === 0)) {\n  <div [class]=\"cx('emptyMessage')\" [hBind]=\"ptm('emptyMessage')\">\n    @if (!emptyTemplate() && !_emptyTemplate) {\n      {{ emptyMessageLabel }}\n    } @else {\n      <ng-container *ngTemplateOutlet=\"emptyTemplate() || _emptyTemplate\"></ng-container>\n    }\n  </div>\n}\n<ng-container *ngTemplateOutlet=\"footerTemplate() || _footerTemplate\"></ng-container>\n" }]
+        }], ctorParameters: () => [{ type: i4.TreeDragDropService, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }, { type: i0.Output, args: ["selectionModeChange"] }], loadingMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], contextMenuSelectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenuSelectionMode", required: false }] }], contextMenuSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenuSelection", required: false }] }, { type: i0.Output, args: ["contextMenuSelectionChange"] }], draggableScope: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggableScope", required: false }] }], droppableScope: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppableScope", required: false }] }], draggableNodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggableNodes", required: false }] }], droppableNodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppableNodes", required: false }] }], metaKeySelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaKeySelection", required: false }] }], propagateSelectionUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionUp", required: false }] }], propagateSelectionDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionDown", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], togglerAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "togglerAriaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], validateDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateDrop", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterInputAutoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterInputAutoFocus", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], filterOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOptions", required: false }] }, { type: i0.Output, args: ["filterOptionsChange"] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], filteredNodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "filteredNodes", required: false }] }, { type: i0.Output, args: ["filteredNodesChange"] }], filterLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocale", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], virtualScrollOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollOptions", required: false }] }], indentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentation", required: false }] }], _templateMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "_templateMap", required: false }] }, { type: i0.Output, args: ["_templateMapChange"] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], highlightOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightOnSelect", required: false }] }], onNodeSelect: [{ type: i0.Output, args: ["onNodeSelect"] }], onNodeUnselect: [{ type: i0.Output, args: ["onNodeUnselect"] }], onNodeExpand: [{ type: i0.Output, args: ["onNodeExpand"] }], onNodeCollapse: [{ type: i0.Output, args: ["onNodeCollapse"] }], onNodeContextMenuSelect: [{ type: i0.Output, args: ["onNodeContextMenuSelect"] }], onNodeDoubleClick: [{ type: i0.Output, args: ["onNodeDoubleClick"] }], onNodeDrop: [{ type: i0.Output, args: ["onNodeDrop"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], onScroll: [{ type: i0.Output, args: ["onScroll"] }], onScrollIndexChange: [{ type: i0.Output, args: ["onScrollIndexChange"] }], onFilter: [{ type: i0.Output, args: ["onFilter"] }], filterTemplate: [{ type: i0.ContentChild, args: ['filter', { ...{ descendants: false }, isSignal: true }] }], nodeTemplate: [{ type: i0.ContentChild, args: ['node', { ...{ descendants: false }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { ...{ descendants: false }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }], loaderTemplate: [{ type: i0.ContentChild, args: ['loader', { ...{ descendants: false }, isSignal: true }] }], emptyTemplate: [{ type: i0.ContentChild, args: ['empty', { ...{ descendants: false }, isSignal: true }] }], togglerIconTemplate: [{ type: i0.ContentChild, args: ['togglericon', { ...{ descendants: false }, isSignal: true }] }], checkboxIconTemplate: [{ type: i0.ContentChild, args: ['checkboxicon', { ...{ descendants: false }, isSignal: true }] }], loadingIconTemplate: [{ type: i0.ContentChild, args: ['loadingicon', { ...{ descendants: false }, isSignal: true }] }], filterIconTemplate: [{ type: i0.ContentChild, args: ['filtericon', { ...{ descendants: false }, isSignal: true }] }], filterViewChild: [{ type: i0.ViewChild, args: ['filter', { isSignal: true }] }], scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], wrapperViewChild: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }], contentViewChild: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }] }] } });
+class TreeModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule], exports: [Tree, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TreeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [Tree, SharedModule],
+                    exports: [Tree, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Tree, TreeClasses, TreeModule, TreeStyle, UITreeNode };
+//# sourceMappingURL=gravionlabs-helix-core-tree.mjs.map