primenglab 22.0.0-beta.1

package/fesm2022/primenglab-tree.mjs

@@ -0,0 +1,2332 @@
+export * from 'primenglab/types/tree';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, inject, input, booleanAttribute, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, model, numberAttribute, output, contentChild, viewChild, DestroyRef, effect, untracked, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { getOuterWidth, getOuterHeight, find, findSingle, focus, removeAccents, resolveFieldData } from '@primeuix/utils';
+import { TreeDragDropService, TranslationKeys } from 'primenglab/api';
+import * as i2 from 'primenglab/autofocus';
+import { AutoFocusModule } from 'primenglab/autofocus';
+import { BaseComponent, PARENT_INSTANCE } from 'primenglab/basecomponent';
+import * as i1$1 from 'primenglab/bind';
+import { Bind } from 'primenglab/bind';
+import { IconField } from 'primenglab/iconfield';
+import { Search } from '@primeicons/angular/search';
+import { Spinner } from '@primeicons/angular/spinner';
+import { InputIcon } from 'primenglab/inputicon';
+import { InputText } from 'primenglab/inputtext';
+import { Scroller } from 'primenglab/scroller';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { Checkbox } from 'primenglab/checkbox';
+import { ChevronDown } from '@primeicons/angular/chevron-down';
+import { ChevronRight } from '@primeicons/angular/chevron-right';
+import { Ripple } from 'primenglab/ripple';
+import { style } from '@primeuix/styles/tree';
+import { BaseStyle } from 'primenglab/base';
+
+const TREE_INSTANCE = new InjectionToken('TREE_INSTANCE');
+const TREENODE_INSTANCE = new InjectionToken('TREENODE_INSTANCE');
+
+const classes = {
+    root: ({ instance }) => [
+        'p-tree p-component',
+        {
+            'p-tree-selectable': instance.selectionMode() != null,
+            'p-tree-loading': instance.loading(),
+            'p-tree-flex-scrollable': instance.scrollHeight() === 'flex',
+            'p-tree-node-dragover': instance.dragHover
+        }
+    ],
+    mask: 'p-tree-mask p-overlay-mask',
+    loadingIcon: 'p-tree-loading-icon',
+    pcFilterInput: 'p-tree-filter-input',
+    wrapper: 'p-tree-root',
+    rootChildren: 'p-tree-root-children',
+    node: ({ instance }) => ({ 'p-tree-node': true, 'p-tree-node-leaf': instance.isLeaf() }),
+    nodeContent: ({ instance }) => ({
+        'p-tree-node-content': true,
+        'p-tree-node-selectable': instance.selectable,
+        'p-tree-node-dragover': instance.isNodeDropActive(),
+        'p-tree-node-selected': instance.tree.selectionMode() === 'checkbox' && instance.tree.highlightOnSelect() ? instance.checked : instance.selected,
+        'p-tree-node-contextmenu-selected': instance.isContextMenuSelected()
+    }),
+    nodeToggleButton: 'p-tree-node-toggle-button',
+    nodeToggleIcon: 'p-tree-node-toggle-icon',
+    nodeCheckbox: 'p-tree-node-checkbox',
+    nodeIcon: 'p-tree-node-icon',
+    nodeLabel: 'p-tree-node-label',
+    nodeChildren: 'p-tree-node-children',
+    emptyMessage: 'p-tree-empty-message',
+    dropPoint: 'p-tree-node-drop-point'
+};
+class TreeStyle extends BaseStyle {
+    name = 'tree';
+    style = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TreeStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TreeStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", 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"] = "p-tree";
+    /**
+     * Class name of the mask element
+     */
+    TreeClasses["mask"] = "p-tree-mask";
+    /**
+     * Class name of the loading icon element
+     */
+    TreeClasses["loadingIcon"] = "p-tree-loading-icon";
+    /**
+     * Class name of the filter input element
+     */
+    TreeClasses["pcFilterInput"] = "p-tree-filter-input";
+    /**
+     * Class name of the wrapper element
+     */
+    TreeClasses["wrapper"] = "p-tree-root";
+    /**
+     * Class name of the root children element
+     */
+    TreeClasses["rootChildren"] = "p-tree-root-children";
+    /**
+     * Class name of the node element
+     */
+    TreeClasses["node"] = "p-tree-node";
+    /**
+     * Class name of the node content element
+     */
+    TreeClasses["nodeContent"] = "p-tree-node-content";
+    /**
+     * Class name of the node toggle button element
+     */
+    TreeClasses["nodeToggleButton"] = "p-tree-node-toggle-button";
+    /**
+     * Class name of the node toggle icon element
+     */
+    TreeClasses["nodeToggleIcon"] = "p-tree-node-toggle-icon";
+    /**
+     * Class name of the node checkbox element
+     */
+    TreeClasses["nodeCheckbox"] = "p-tree-node-checkbox";
+    /**
+     * Class name of the node icon element
+     */
+    TreeClasses["nodeIcon"] = "p-tree-node-icon";
+    /**
+     * Class name of the node label element
+     */
+    TreeClasses["nodeLabel"] = "p-tree-node-label";
+    /**
+     * Class name of the node children element
+     */
+    TreeClasses["nodeChildren"] = "p-tree-node-children";
+    /**
+     * Class name of the empty message element
+     */
+    TreeClasses["emptyMessage"] = "p-tree-empty-message";
+    /**
+     * Class name of the drop point element
+     */
+    TreeClasses["dropPoint"] = "p-tree-node-droppoint";
+})(TreeClasses || (TreeClasses = {}));
+
+class UITreeNode extends BaseComponent {
+    $pcTreeNode = inject(TREENODE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    static ICON_CLASS = 'p-tree-node-icon ';
+    rowNode = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rowNode" }] : /* istanbul ignore next */ []));
+    node = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "node" }] : /* istanbul ignore next */ []));
+    parentNode = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "parentNode" }] : /* istanbul ignore next */ []));
+    root = input(false, { ...(ngDevMode ? { debugName: "root" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    index = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "index" }] : /* istanbul ignore next */ []));
+    firstChild = input(false, { ...(ngDevMode ? { debugName: "firstChild" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    lastChild = input(false, { ...(ngDevMode ? { debugName: "lastChild" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    level = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "level" }] : /* istanbul ignore next */ []));
+    indentation = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "indentation" }] : /* istanbul ignore next */ []));
+    itemSize = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "itemSize" }] : /* istanbul ignore next */ []));
+    loadingMode = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "loadingMode" }] : /* istanbul ignore next */ []));
+    tree = inject(TREE_INSTANCE);
+    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 */ []));
+    get ariaSetSize() {
+        return this.node()?.children?.length ?? 0;
+    }
+    get ariaExpanded() {
+        return this.node()?.expanded;
+    }
+    ariaPosInSet = computed(() => (this.index() ?? 0) + 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaPosInSet" }] : /* istanbul ignore next */ []));
+    ariaLevel = computed(() => (this.level() ?? 0) + 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLevel" }] : /* istanbul ignore next */ []));
+    nodeTabindex = computed(() => (this.index() === 0 ? 0 : -1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodeTabindex" }] : /* istanbul ignore next */ []));
+    nodeContentPaddingLeft = computed(() => this.level() * this.indentation() + 'rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodeContentPaddingLeft" }] : /* istanbul ignore next */ []));
+    get hasNodeIcon() {
+        return !!(this.node()?.icon || this.node()?.expandedIcon || this.node()?.collapsedIcon);
+    }
+    get showChildren() {
+        return !this.tree.virtualScroll() && !!this.node()?.children && !!this.node()?.expanded;
+    }
+    get showLoadingSpinner() {
+        return this.loadingMode() === 'icon' && !!this.node()?.loading;
+    }
+    checkboxVariant = computed(() => this.tree?.config.inputVariant() || 'outlined', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkboxVariant" }] : /* istanbul ignore next */ []));
+    get togglerIconContext() {
+        return {
+            $implicit: this.node()?.expanded,
+            loading: this.node()?.loading
+        };
+    }
+    get checkboxIconContext() {
+        return {
+            $implicit: this.isSelected(),
+            partialSelected: this.node()?.partialSelected,
+            class: this.cx('nodeCheckbox')
+        };
+    }
+    _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 node = this.node();
+        if (!selection || !node) {
+            return false;
+        }
+        return selection === node || (selection.key && selection.key === node.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() {
+        return this.node()?.parent ? this.node().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('p-dialog');
+        if (this.parentNode() && !pDialogWrapper) {
+            this.setAllNodesTabIndexes();
+            this.tree.syncNodeOption(this.node(), this.tree.value(), 'parent', this.tree.getNodeWithKey(this.parentNode().key, this.tree.value()));
+        }
+    }
+    getIcon() {
+        let icon;
+        const node = this.node();
+        if (node.icon)
+            icon = node.icon;
+        else
+            icon = node.expanded && node.children && node.children?.length ? node.expandedIcon : node.collapsedIcon;
+        return UITreeNode.ICON_CLASS + ' ' + icon + ' p-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;
+        this.tree.setNodeCollapsed(this.node(), false);
+        if (this.tree.virtualScroll()) {
+            this.tree.updateSerializedValue();
+            this.focusVirtualNode();
+        }
+        this.tree.onNodeExpand.emit({ originalEvent: event, node: this.node() });
+    }
+    collapse(event) {
+        this.node().expanded = false;
+        this.tree.setNodeCollapsed(this.node(), true);
+        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;
+        if (!this.node() || 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
+            this.node().children = this.node().children || [];
+            this.node().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());
+            const dropPoint = position === 0 ? 'node' : 'between';
+            if (isValidDrop) {
+                if (this.tree.validateDrop()) {
+                    this.tree.onNodeDrop.emit({
+                        originalEvent: event,
+                        dragNode: dragNode,
+                        dropNode: this.node(),
+                        index: this.index(),
+                        dropPoint: dropPoint,
+                        accept: () => {
+                            this.insertNodeOnDrop();
+                        }
+                    });
+                }
+                else {
+                    this.insertNodeOnDrop();
+                    this.tree.onNodeDrop.emit({
+                        originalEvent: event,
+                        dragNode: dragNode,
+                        dropNode: this.node(),
+                        index: this.index(),
+                        dropPoint: dropPoint
+                    });
+                }
+            }
+        }
+        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-p-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-p-dragging');
+        this.tree.dragDropService.stopDrag({
+            node: this.node(),
+            subNodes: this.subNodes,
+            index: this.index()
+        });
+    }
+    onKeyDown(event) {
+        if (!this.isSameNode(event) || (this.tree.contextMenu() && this.tree.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.0.3", ngImport: i0, type: UITreeNode, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: UITreeNode, isStandalone: true, selector: "p-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()) {
+            <li
+                [class]="cn(cx('node'), node()!.styleClass)"
+                [style.height.px]="itemSize()"
+                [style]="node()!.style"
+                [attr.aria-label]="node()!.label"
+                [attr.aria-checked]="checked"
+                [attr.aria-setsize]="ariaSetSize"
+                [attr.aria-selected]="selected"
+                [attr.aria-expanded]="ariaExpanded"
+                [attr.aria-posinset]="ariaPosInSet()"
+                [attr.aria-level]="ariaLevel()"
+                [attr.tabindex]="nodeTabindex()"
+                [attr.data-id]="node()!.key"
+                role="treeitem"
+                (keydown)="onKeyDown($event)"
+                [pBind]="getPTOptions('node')"
+            >
+                @if (isPrevDropPointActive()) {
+                    <div [class]="cx('dropPoint')" [attr.aria-hidden]="true" [pBind]="getPTOptions('dropPoint')"></div>
+                }
+                <div
+                    [class]="cx('nodeContent')"
+                    [style.paddingLeft]="nodeContentPaddingLeft()"
+                    (click)="onNodeClick($event)"
+                    (contextmenu)="onNodeRightClick($event)"
+                    (dblclick)="onNodeDblClick($event)"
+                    (touchend)="onNodeTouchEnd()"
+                    (drop)="onNodeDrop($event)"
+                    (dragstart)="onNodeDragStart($event)"
+                    (dragover)="onNodeDragOver($event)"
+                    (dragleave)="onNodeDragLeave($event)"
+                    (dragend)="onNodeDragEnd($event)"
+                    [draggable]="tree.draggableNodes()"
+                    [pBind]="getPTOptions('nodeContent')"
+                >
+                    <button type="button" [class]="cx('nodeToggleButton')" (click)="toggle($event)" pRipple tabindex="-1" [pBind]="getPTOptions('nodeToggleButton')">
+                        @if (!tree.togglerIconTemplate()) {
+                            @if (!node()!.loading) {
+                                @if (!node()!.expanded) {
+                                    <svg data-p-icon="chevron-right" [class]="cx('nodeToggleIcon')" [pBind]="getPTOptions('nodeToggleIcon')" />
+                                }
+                                @if (node()!.expanded) {
+                                    <svg data-p-icon="chevron-down" [class]="cx('nodeToggleIcon')" [pBind]="getPTOptions('nodeToggleIcon')" />
+                                }
+                            }
+                            @if (showLoadingSpinner) {
+                                <svg data-p-icon="spinner" [class]="cn(cx('nodeToggleIcon'), 'animate-spin')" [pBind]="getPTOptions('nodeToggleIcon')" />
+                            }
+                        }
+                        @if (tree.togglerIconTemplate()) {
+                            <span [class]="cx('nodeToggleIcon')" [pBind]="getPTOptions('nodeToggleIcon')">
+                                <ng-template *ngTemplateOutlet="tree.togglerIconTemplate()!; context: togglerIconContext"></ng-template>
+                            </span>
+                        }
+                    </button>
+
+                    @if (tree.selectionMode() == 'checkbox') {
+                        <p-checkbox
+                            [ngModel]="isSelected()"
+                            [class]="cx('nodeCheckbox')"
+                            [binary]="true"
+                            [indeterminate]="node()!.partialSelected"
+                            [disabled]="node()!.selectable === false"
+                            [variant]="checkboxVariant()"
+                            [attr.data-p-partialchecked]="node()!.partialSelected"
+                            [tabindex]="-1"
+                            (click)="$event.preventDefault()"
+                            [pt]="getPTOptions('pcNodeCheckbox')"
+                            [unstyled]="unstyled()"
+                        >
+                            @if (tree.checkboxIconTemplate()) {
+                                <ng-template #icon>
+                                    <ng-template *ngTemplateOutlet="tree.checkboxIconTemplate()!; context: checkboxIconContext"></ng-template>
+                                </ng-template>
+                            }
+                        </p-checkbox>
+                    }
+
+                    @if (hasNodeIcon) {
+                        <span [class]="getIcon()" [pBind]="getPTOptions('nodeIcon')"></span>
+                    }
+                    <span [class]="cx('nodeLabel')" [pBind]="getPTOptions('nodeLabel')">
+                        @if (!tree.getTemplateForNode(node()!)) {
+                            <span>{{ node()!.label }}</span>
+                        }
+                        @if (tree.getTemplateForNode(node()!)) {
+                            <span>
+                                <ng-container *ngTemplateOutlet="tree.getTemplateForNode(node()!)!; context: { $implicit: node() }"></ng-container>
+                            </span>
+                        }
+                    </span>
+                </div>
+                @if (isNextDropPointActive()) {
+                    <div [class]="cx('dropPoint', { next: true })" [attr.aria-hidden]="true" [pBind]="getPTOptions('dropPoint')"></div>
+                }
+                @if (showChildren) {
+                    <ul [class]="cx('nodeChildren')" role="group" [pBind]="ptm('nodeChildren')">
+                        @for (childNode of node()!.children; track tree.trackBy()($index, childNode); let firstChild = $first; let lastChild = $last; let idx = $index) {
+                            <p-treenode
+                                [node]="childNode"
+                                [parentNode]="node()"
+                                [firstChild]="firstChild"
+                                [lastChild]="lastChild"
+                                [index]="idx"
+                                [itemSize]="itemSize()"
+                                [level]="level()! + 1"
+                                [loadingMode]="loadingMode()"
+                                [pt]="pt"
+                                [unstyled]="unstyled()"
+                            />
+                        }
+                    </ul>
+                }
+            </li>
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: UITreeNode, selector: "p-treenode", inputs: ["rowNode", "node", "parentNode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChevronRight, selector: "svg[data-p-icon=\"chevron-right\"]" }, { kind: "component", type: ChevronDown, selector: "svg[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: Spinner, selector: "svg[data-p-icon=\"spinner\"]" }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: UITreeNode, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-treenode',
+                    standalone: true,
+                    imports: [NgTemplateOutlet, Ripple, Checkbox, FormsModule, ChevronRight, ChevronDown, Spinner, Bind],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        @if (node()) {
+            <li
+                [class]="cn(cx('node'), node()!.styleClass)"
+                [style.height.px]="itemSize()"
+                [style]="node()!.style"
+                [attr.aria-label]="node()!.label"
+                [attr.aria-checked]="checked"
+                [attr.aria-setsize]="ariaSetSize"
+                [attr.aria-selected]="selected"
+                [attr.aria-expanded]="ariaExpanded"
+                [attr.aria-posinset]="ariaPosInSet()"
+                [attr.aria-level]="ariaLevel()"
+                [attr.tabindex]="nodeTabindex()"
+                [attr.data-id]="node()!.key"
+                role="treeitem"
+                (keydown)="onKeyDown($event)"
+                [pBind]="getPTOptions('node')"
+            >
+                @if (isPrevDropPointActive()) {
+                    <div [class]="cx('dropPoint')" [attr.aria-hidden]="true" [pBind]="getPTOptions('dropPoint')"></div>
+                }
+                <div
+                    [class]="cx('nodeContent')"
+                    [style.paddingLeft]="nodeContentPaddingLeft()"
+                    (click)="onNodeClick($event)"
+                    (contextmenu)="onNodeRightClick($event)"
+                    (dblclick)="onNodeDblClick($event)"
+                    (touchend)="onNodeTouchEnd()"
+                    (drop)="onNodeDrop($event)"
+                    (dragstart)="onNodeDragStart($event)"
+                    (dragover)="onNodeDragOver($event)"
+                    (dragleave)="onNodeDragLeave($event)"
+                    (dragend)="onNodeDragEnd($event)"
+                    [draggable]="tree.draggableNodes()"
+                    [pBind]="getPTOptions('nodeContent')"
+                >
+                    <button type="button" [class]="cx('nodeToggleButton')" (click)="toggle($event)" pRipple tabindex="-1" [pBind]="getPTOptions('nodeToggleButton')">
+                        @if (!tree.togglerIconTemplate()) {
+                            @if (!node()!.loading) {
+                                @if (!node()!.expanded) {
+                                    <svg data-p-icon="chevron-right" [class]="cx('nodeToggleIcon')" [pBind]="getPTOptions('nodeToggleIcon')" />
+                                }
+                                @if (node()!.expanded) {
+                                    <svg data-p-icon="chevron-down" [class]="cx('nodeToggleIcon')" [pBind]="getPTOptions('nodeToggleIcon')" />
+                                }
+                            }
+                            @if (showLoadingSpinner) {
+                                <svg data-p-icon="spinner" [class]="cn(cx('nodeToggleIcon'), 'animate-spin')" [pBind]="getPTOptions('nodeToggleIcon')" />
+                            }
+                        }
+                        @if (tree.togglerIconTemplate()) {
+                            <span [class]="cx('nodeToggleIcon')" [pBind]="getPTOptions('nodeToggleIcon')">
+                                <ng-template *ngTemplateOutlet="tree.togglerIconTemplate()!; context: togglerIconContext"></ng-template>
+                            </span>
+                        }
+                    </button>
+
+                    @if (tree.selectionMode() == 'checkbox') {
+                        <p-checkbox
+                            [ngModel]="isSelected()"
+                            [class]="cx('nodeCheckbox')"
+                            [binary]="true"
+                            [indeterminate]="node()!.partialSelected"
+                            [disabled]="node()!.selectable === false"
+                            [variant]="checkboxVariant()"
+                            [attr.data-p-partialchecked]="node()!.partialSelected"
+                            [tabindex]="-1"
+                            (click)="$event.preventDefault()"
+                            [pt]="getPTOptions('pcNodeCheckbox')"
+                            [unstyled]="unstyled()"
+                        >
+                            @if (tree.checkboxIconTemplate()) {
+                                <ng-template #icon>
+                                    <ng-template *ngTemplateOutlet="tree.checkboxIconTemplate()!; context: checkboxIconContext"></ng-template>
+                                </ng-template>
+                            }
+                        </p-checkbox>
+                    }
+
+                    @if (hasNodeIcon) {
+                        <span [class]="getIcon()" [pBind]="getPTOptions('nodeIcon')"></span>
+                    }
+                    <span [class]="cx('nodeLabel')" [pBind]="getPTOptions('nodeLabel')">
+                        @if (!tree.getTemplateForNode(node()!)) {
+                            <span>{{ node()!.label }}</span>
+                        }
+                        @if (tree.getTemplateForNode(node()!)) {
+                            <span>
+                                <ng-container *ngTemplateOutlet="tree.getTemplateForNode(node()!)!; context: { $implicit: node() }"></ng-container>
+                            </span>
+                        }
+                    </span>
+                </div>
+                @if (isNextDropPointActive()) {
+                    <div [class]="cx('dropPoint', { next: true })" [attr.aria-hidden]="true" [pBind]="getPTOptions('dropPoint')"></div>
+                }
+                @if (showChildren) {
+                    <ul [class]="cx('nodeChildren')" role="group" [pBind]="ptm('nodeChildren')">
+                        @for (childNode of node()!.children; track tree.trackBy()($index, childNode); let firstChild = $first; let lastChild = $last; let idx = $index) {
+                            <p-treenode
+                                [node]="childNode"
+                                [parentNode]="node()"
+                                [firstChild]="firstChild"
+                                [lastChild]="lastChild"
+                                [index]="idx"
+                                [itemSize]="itemSize()"
+                                [level]="level()! + 1"
+                                [loadingMode]="loadingMode()"
+                                [pt]="pt"
+                                [unstyled]="unstyled()"
+                            />
+                        }
+                    </ul>
+                }
+            </li>
+        }
+    `,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [TreeStyle, { provide: TREENODE_INSTANCE, useExisting: UITreeNode }, { provide: PARENT_INSTANCE, useExisting: UITreeNode }]
+                }]
+        }], 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 {
+    componentName = 'Tree';
+    _destroyed = false;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pcTree = inject(TREE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    onDestroy() {
+        this._destroyed = true;
+    }
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    /**
+     * An array of treenodes.
+     * @group Props
+     */
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines the selection mode.
+     * @group Props
+     */
+    selectionMode = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { 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.
+     * @deprecated since v22, use `selectionKeys` instead for key-based selection state.
+     * @group Props
+     */
+    selection = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    /**
+     * A map of node keys (by `TreeNode.key`) whose value is `true` for collapsed nodes. Two-way bindable.
+     * When provided it controls expansion (a node is expanded unless its key maps to `true`); leave it
+     * unset to keep driving expansion from each node's `expanded` flag (default, non-breaking).
+     * @group Props
+     */
+    collapsedKeys = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedKeys" }] : /* istanbul ignore next */ []));
+    /**
+     * A map of node keys (by `TreeNode.key`) describing the selection state. Two-way bindable.
+     * For single/multiple selection a key maps to `true`; for checkbox selection it maps to
+     * `{ checked, partialChecked }`. When provided it is kept in sync with `selection`; leave it unset
+     * to keep using the node-reference based `selection` model (default, non-breaking).
+     * @group Props
+     */
+    selectionKeys = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionKeys" }] : /* istanbul ignore next */ []));
+    /**
+     * Context menu instance.
+     * @group Props
+     */
+    contextMenu = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "contextMenu" }] : /* 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 draggableScope.
+     * @group Props
+     */
+    droppableScope = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "droppableScope" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the nodes are draggable.
+     * @group Props
+     */
+    draggableNodes = input(false, { ...(ngDevMode ? { debugName: "draggableNodes" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether the nodes are droppable.
+     * @group Props
+     */
+    droppableNodes = input(false, { ...(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(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The icon to show while indicating data load is in progress.
+     * @group Props
+     */
+    loadingIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { 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(false, { ...(ngDevMode ? { debugName: "validateDrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When specified, displays an input field to filter the items.
+     * @group Props
+     */
+    filter = input(false, { ...(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;
+    /**
+     * 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;
+    /**
+     * 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(false, { ...(ngDevMode ? { debugName: "virtualScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Height of an item in the list for VirtualScrolling.
+     * @group Props
+     */
+    virtualScrollItemSize = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "virtualScrollItemSize" }] : /* istanbul ignore next */ []));
+    /**
+     * 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 });
+    /**
+     * 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 */ []));
+    serializedValue;
+    nodeTouched;
+    dragNodeTree;
+    dragNode;
+    dragNodeSubNodes;
+    dragNodeIndex;
+    dragNodeScope;
+    dragHover;
+    _componentStyle = inject(TreeStyle);
+    dragDropService = inject(TreeDragDropService, { optional: true });
+    destroyRef = inject(DestroyRef);
+    constructor() {
+        super();
+        effect(() => {
+            this.value();
+            untracked(() => {
+                this.updateSerializedValue();
+                if (this.hasFilterActive()) {
+                    this._filter(this.filterViewChild()?.nativeElement?.value);
+                }
+            });
+        });
+        // Two-way `collapsedKeys` sync: when provided, project the map onto each node's `expanded` flag
+        // so the existing expansion engine keeps working unchanged. Untracked writes avoid feedback loops.
+        effect(() => {
+            this.collapsedKeys();
+            this.value();
+            untracked(() => {
+                if (this.collapsedKeys() == null) {
+                    return;
+                }
+                this.applyCollapsedKeys();
+                this.updateSerializedValue();
+            });
+        });
+        // Two-way `selectionKeys` <-> `selection` projection. Value-based comparison breaks the feedback
+        // loop: once the two representations agree, neither effect writes again.
+        effect(() => {
+            this.selectionKeys();
+            this.value();
+            untracked(() => {
+                if (this.selectionKeys() == null) {
+                    return;
+                }
+                if (!this.isSameSelectionKeys(this.deriveSelectionKeys(), this.selectionKeys())) {
+                    this.applySelectionKeys();
+                }
+            });
+        });
+        effect(() => {
+            this.selection();
+            untracked(() => {
+                if (this.selectionKeys() == null) {
+                    return;
+                }
+                const derived = this.deriveSelectionKeys();
+                if (!this.isSameSelectionKeys(derived, this.selectionKeys())) {
+                    this.selectionKeys.set(derived);
+                }
+            });
+        });
+    }
+    onInit() {
+        if (this.filterBy()) {
+            this.filterOptions = {
+                filter: (value) => this._filter(value),
+                reset: () => this.resetFilter()
+            };
+        }
+        if (this.droppableNodes()) {
+            this.dragDropService?.dragStart$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+                this.dragNodeTree = event.tree;
+                this.dragNode = event.node;
+                this.dragNodeSubNodes = event.subNodes;
+                this.dragNodeIndex = event.index;
+                this.dragNodeScope = event.scope;
+            });
+            this.dragDropService?.dragStop$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+                this.dragNodeTree = null;
+                this.dragNode = null;
+                this.dragNodeSubNodes = null;
+                this.dragNodeIndex = null;
+                this.dragNodeScope = null;
+                this.dragHover = false;
+            });
+        }
+    }
+    showLoadingMask = computed(() => this.loading() && this.loadingMode() === 'mask', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLoadingMask" }] : /* istanbul ignore next */ []));
+    get showEmptyMessage() {
+        return !this.loading() && (this.getRootNode() == null || this.getRootNode().length === 0);
+    }
+    scrollerStyleHeight = computed(() => (this.scrollHeight() !== 'flex' ? this.scrollHeight() : undefined), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollerStyleHeight" }] : /* istanbul ignore next */ []));
+    scrollerScrollHeight = computed(() => (this.scrollHeight() !== 'flex' ? undefined : '100%'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollerScrollHeight" }] : /* istanbul ignore next */ []));
+    get emptyMessageLabel() {
+        return this.emptyMessage() || this.translate(TranslationKeys.EMPTY_MESSAGE);
+    }
+    updateSerializedValue() {
+        this.serializedValue = [];
+        this.serializeNodes(null, this.getRootNode(), 0, true);
+    }
+    /**
+     * Projects the current `collapsedKeys` map onto each node's `expanded` flag (a node is expanded
+     * unless its key maps to `true`).
+     */
+    applyCollapsedKeys() {
+        const collapsedKeys = this.collapsedKeys();
+        if (collapsedKeys == null) {
+            return;
+        }
+        const walk = (nodes) => {
+            if (!nodes)
+                return;
+            for (const node of nodes) {
+                if (node.key != null) {
+                    node.expanded = !collapsedKeys[node.key];
+                }
+                if (node.children) {
+                    walk(node.children);
+                }
+            }
+        };
+        walk(this.getRootNode());
+    }
+    /**
+     * Reflects a node's expansion change back into the two-way `collapsedKeys` map when it is in use.
+     */
+    setNodeCollapsed(node, collapsed) {
+        const collapsedKeys = this.collapsedKeys();
+        if (collapsedKeys == null || node.key == null) {
+            return;
+        }
+        const next = { ...collapsedKeys };
+        if (collapsed) {
+            next[node.key] = true;
+        }
+        else {
+            delete next[node.key];
+        }
+        this.collapsedKeys.set(next);
+    }
+    /** Builds a `key -> node` lookup over the whole tree (for `selectionKeys` projection). */
+    collectNodesByKey() {
+        const map = new Map();
+        const walk = (nodes) => {
+            if (!nodes)
+                return;
+            for (const node of nodes) {
+                if (node.key != null) {
+                    map.set(node.key, node);
+                }
+                if (node.children) {
+                    walk(node.children);
+                }
+            }
+        };
+        walk(this.getRootNode());
+        return map;
+    }
+    /** Derives the `selectionKeys` map from the current `selection` (and `partialSelected` for checkbox). */
+    deriveSelectionKeys() {
+        const mode = this.selectionMode();
+        const map = {};
+        if (mode === 'checkbox') {
+            const selection = this.selection() || [];
+            const selectedKeys = new Set(selection.map((node) => node.key));
+            const walk = (nodes) => {
+                if (!nodes)
+                    return;
+                for (const node of nodes) {
+                    if (node.key != null) {
+                        if (selectedKeys.has(node.key)) {
+                            map[node.key] = { checked: true, partialChecked: false };
+                        }
+                        else if (node.partialSelected) {
+                            map[node.key] = { checked: false, partialChecked: true };
+                        }
+                    }
+                    if (node.children) {
+                        walk(node.children);
+                    }
+                }
+            };
+            walk(this.getRootNode());
+        }
+        else if (mode === 'single') {
+            const selected = this.selection();
+            if (selected?.key != null) {
+                map[selected.key] = true;
+            }
+        }
+        else {
+            const selection = this.selection() || [];
+            for (const node of selection) {
+                if (node.key != null) {
+                    map[node.key] = true;
+                }
+            }
+        }
+        return map;
+    }
+    /** Applies the current `selectionKeys` map onto the `selection` model (and `partialSelected` for checkbox). */
+    applySelectionKeys() {
+        const keys = this.selectionKeys();
+        if (keys == null) {
+            return;
+        }
+        const mode = this.selectionMode();
+        const nodesByKey = this.collectNodesByKey();
+        const isChecked = (value) => value === true || value?.checked === true;
+        if (mode === 'single') {
+            const key = Object.keys(keys).find((k) => isChecked(keys[k]));
+            this.selection.set(key != null ? (nodesByKey.get(key) ?? null) : null);
+            return;
+        }
+        const selected = [];
+        nodesByKey.forEach((node, key) => {
+            const value = keys[key];
+            if (mode === 'checkbox') {
+                node.partialSelected = value?.partialChecked === true;
+            }
+            if (isChecked(value)) {
+                selected.push(node);
+            }
+        });
+        this.selection.set(selected);
+    }
+    /** Value-based equality for two `selectionKeys` maps (handles both boolean and `{checked,partialChecked}` values). */
+    isSameSelectionKeys(a, b) {
+        const aKeys = Object.keys(a || {});
+        const bKeys = Object.keys(b || {});
+        if (aKeys.length !== bKeys.length) {
+            return false;
+        }
+        return aKeys.every((key) => {
+            const av = a[key];
+            const bv = b[key];
+            if (av === bv)
+                return true;
+            if (av && bv && typeof av === 'object' && typeof bv === 'object') {
+                return av.checked === bv.checked && av.partialChecked === bv.partialChecked;
+            }
+            return false;
+        });
+    }
+    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) {
+                return;
+            }
+            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(() => {
+                                if (this._destroyed)
+                                    return;
+                                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(() => {
+                                if (this._destroyed)
+                                    return;
+                                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 });
+            };
+            this.contextMenuSelection.set(node);
+            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() {
+        return this.filter() && this.filteredNodes && this.filteredNodes.length;
+    }
+    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) {
+        return this.nodeTemplate() ?? 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;
+                let currentValue = this.value() || [];
+                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 = null;
+        }
+        else {
+            this.filteredNodes = [];
+            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)))) {
+                    this.filteredNodes.push(copyNode);
+                }
+            }
+        }
+        this.updateSerializedValue();
+        this.onFilter.emit({
+            filter: filterValue,
+            filteredValue: this.filteredNodes
+        });
+    }
+    /**
+     * Resets filter.
+     * @group Method
+     */
+    resetFilter() {
+        this.filteredNodes = null;
+        const filterEl = this.filterViewChild();
+        if (filterEl && filterEl.nativeElement) {
+            filterEl.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 wrapper = this.wrapperViewChild();
+            if (wrapper && wrapper.nativeElement) {
+                if (wrapper.nativeElement.scrollTo) {
+                    wrapper.nativeElement.scrollTo(options);
+                }
+                else {
+                    wrapper.nativeElement.scrollLeft = options.left;
+                    wrapper.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];
+    }
+    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.0.3", ngImport: i0, type: Tree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: Tree, isStandalone: true, selector: "p-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 }, collapsedKeys: { classPropertyName: "collapsedKeys", publicName: "collapsedKeys", isSignal: true, isRequired: false, transformFunction: null }, selectionKeys: { classPropertyName: "selectionKeys", publicName: "selectionKeys", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", 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 }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", 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 }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, highlightOnSelect: { classPropertyName: "highlightOnSelect", publicName: "highlightOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", collapsedKeys: "collapsedKeysChange", selectionKeys: "selectionKeysChange", contextMenuSelection: "contextMenuSelectionChange", 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": "onDrop($event)", "dragover": "onDragOver($event)", "dragenter": "onDragEnter()", "dragleave": "onDragLeave($event)" }, properties: { "class": "cx('root')", "attr.data-p": "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 }], 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: i1$1.Bind }], ngImport: i0, template: `
+        @if (showLoadingMask()) {
+            <div [class]="cx('mask')" [pBind]="ptm('mask')" animate.enter="p-overlay-mask-enter-active" animate.leave="p-overlay-mask-leave-active">
+                @if (loadingIcon()) {
+                    <i [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon())" [pBind]="ptm('loadingIcon')"></i>
+                }
+                @if (!loadingIcon()) {
+                    @if (!loadingIconTemplate()) {
+                        <svg data-p-icon="spinner" [class]="cn(cx('loadingIcon'), 'animate-spin')" [pBind]="ptm('loadingIcon')" />
+                    }
+                    @if (loadingIconTemplate()) {
+                        <span [class]="cx('loadingIcon')" [pBind]="ptm('loadingIcon')">
+                            <ng-template *ngTemplateOutlet="loadingIconTemplate()!"></ng-template>
+                        </span>
+                    }
+                }
+            </div>
+        }
+        <ng-container *ngTemplateOutlet="headerTemplate()"></ng-container>
+        @if (filterTemplate()) {
+            <ng-container *ngTemplateOutlet="filterTemplate()!; context: { $implicit: filterOptions }"></ng-container>
+        } @else {
+            @if (filter()) {
+                <p-iconfield [class]="cx('pcFilterContainer')" [pt]="ptm('pcFilterContainer')" [unstyled]="unstyled()">
+                    <input
+                        #filter
+                        [pAutoFocus]="filterInputAutoFocus()"
+                        pInputText
+                        type="search"
+                        autocomplete="off"
+                        [class]="cx('pcFilterInput')"
+                        [attr.placeholder]="filterPlaceholder()"
+                        (keydown.enter)="$event.preventDefault()"
+                        (input)="_filter($event.target?.value)"
+                        [pt]="ptm('pcFilterInput')"
+                        [unstyled]="unstyled()"
+                    />
+                    <p-inputicon [pt]="ptm('pcFilterIconContainer')" [unstyled]="unstyled()">
+                        @if (!filterIconTemplate()) {
+                            <svg data-p-icon="search" [class]="cx('filterIcon')" [pBind]="ptm('filterIcon')" />
+                        }
+                        @if (filterIconTemplate()) {
+                            <span [class]="cx('filterIcon')" [pBind]="ptm('filterIcon')">
+                                <ng-template *ngTemplateOutlet="filterIconTemplate()!"></ng-template>
+                            </span>
+                        }
+                    </p-inputicon>
+                </p-iconfield>
+            }
+        }
+
+        @if (getRootNode()?.length) {
+            @if (virtualScroll()) {
+                <p-scroller
+                    #scroller
+                    [items]="serializedValue"
+                    [tabindex]="-1"
+                    [styleClass]="cx('wrapper')"
+                    [style]="{ height: scrollerStyleHeight() }"
+                    [scrollHeight]="scrollerScrollHeight()"
+                    [itemSize]="virtualScrollItemSize()"
+                    [lazy]="lazy()"
+                    (onScroll)="onScroll.emit($event)"
+                    (onScrollIndexChange)="onScrollIndexChange.emit($event)"
+                    (onLazyLoad)="onLazyLoad.emit($event)"
+                    [options]="virtualScrollOptions()"
+                    [pt]="ptm('virtualScroller')"
+                    hostName="tree"
+                    [attr.data-p]="wrapperDataP"
+                >
+                    <ng-template #content let-items let-scrollerOptions="options">
+                        @if (items) {
+                            <ul
+                                #content
+                                [class]="cn(cx('rootChildren'), scrollerOptions.contentStyleClass)"
+                                [style]="scrollerOptions.contentStyle"
+                                role="tree"
+                                [attr.aria-label]="ariaLabel()"
+                                [attr.aria-labelledby]="ariaLabelledBy()"
+                                [pBind]="ptm('rootChildren')"
+                            >
+                                @for (rowNode of items; track trackBy()($index, rowNode); let firstChild = $first; let lastChild = $last; let idx = $index) {
+                                    <p-treenode
+                                        #treeNode
+                                        [level]="rowNode.level"
+                                        [rowNode]="rowNode"
+                                        [node]="rowNode.node"
+                                        [parentNode]="rowNode.parent"
+                                        [firstChild]="firstChild"
+                                        [lastChild]="lastChild"
+                                        [index]="getIndex(scrollerOptions, idx)"
+                                        [itemSize]="scrollerOptions.itemSize"
+                                        [indentation]="indentation()"
+                                        [loadingMode]="loadingMode()"
+                                        [pt]="pt"
+                                        [unstyled]="unstyled()"
+                                    />
+                                }
+                            </ul>
+                        }
+                    </ng-template>
+                    @if (loaderTemplate()) {
+                        <ng-template #loader let-scrollerOptions="options">
+                            <ng-container *ngTemplateOutlet="loaderTemplate()!; context: { options: scrollerOptions }"></ng-container>
+                        </ng-template>
+                    }
+                </p-scroller>
+            }
+            @if (!virtualScroll()) {
+                <div #wrapper [class]="cx('wrapper')" [style.max-height]="scrollHeight()" [pBind]="ptm('wrapper')" [attr.data-p]="wrapperDataP">
+                    @if (getRootNode()) {
+                        <ul #content [class]="cx('rootChildren')" role="tree" [attr.aria-label]="ariaLabel()" [attr.aria-labelledby]="ariaLabelledBy()" [pBind]="ptm('rootChildren')">
+                            @for (node of getRootNode(); track trackBy().bind(this)($index, node); let firstChild = $first; let lastChild = $last; let idx = $index) {
+                                <p-treenode [node]="node" [firstChild]="firstChild" [lastChild]="lastChild" [index]="idx" [level]="0" [loadingMode]="loadingMode()" [pt]="pt" [unstyled]="unstyled()" />
+                            }
+                        </ul>
+                    }
+                </div>
+            }
+        }
+
+        @if (showEmptyMessage) {
+            <div [class]="cx('emptyMessage')" [pBind]="ptm('emptyMessage')">
+                @if (!emptyTemplate()) {
+                    {{ emptyMessageLabel }}
+                }
+                @if (emptyTemplate()) {
+                    <ng-template *ngTemplateOutlet="emptyTemplate()!"></ng-template>
+                }
+            </div>
+        }
+        <ng-container *ngTemplateOutlet="footerTemplate()"></ng-container>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller", 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: "component", type: Search, selector: "svg[data-p-icon=\"search\"]" }, { kind: "component", type: Spinner, selector: "svg[data-p-icon=\"spinner\"]" }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: IconField, selector: "p-iconfield, p-icon-field", inputs: ["hostName", "iconPosition"] }, { kind: "component", type: InputIcon, selector: "p-inputicon", inputs: ["hostName"] }, { kind: "component", type: UITreeNode, selector: "p-treenode", inputs: ["rowNode", "node", "parentNode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i2.AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: Tree, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-tree',
+                    standalone: true,
+                    imports: [NgTemplateOutlet, Scroller, Search, Spinner, InputText, IconField, InputIcon, UITreeNode, AutoFocusModule, Bind],
+                    template: `
+        @if (showLoadingMask()) {
+            <div [class]="cx('mask')" [pBind]="ptm('mask')" animate.enter="p-overlay-mask-enter-active" animate.leave="p-overlay-mask-leave-active">
+                @if (loadingIcon()) {
+                    <i [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon())" [pBind]="ptm('loadingIcon')"></i>
+                }
+                @if (!loadingIcon()) {
+                    @if (!loadingIconTemplate()) {
+                        <svg data-p-icon="spinner" [class]="cn(cx('loadingIcon'), 'animate-spin')" [pBind]="ptm('loadingIcon')" />
+                    }
+                    @if (loadingIconTemplate()) {
+                        <span [class]="cx('loadingIcon')" [pBind]="ptm('loadingIcon')">
+                            <ng-template *ngTemplateOutlet="loadingIconTemplate()!"></ng-template>
+                        </span>
+                    }
+                }
+            </div>
+        }
+        <ng-container *ngTemplateOutlet="headerTemplate()"></ng-container>
+        @if (filterTemplate()) {
+            <ng-container *ngTemplateOutlet="filterTemplate()!; context: { $implicit: filterOptions }"></ng-container>
+        } @else {
+            @if (filter()) {
+                <p-iconfield [class]="cx('pcFilterContainer')" [pt]="ptm('pcFilterContainer')" [unstyled]="unstyled()">
+                    <input
+                        #filter
+                        [pAutoFocus]="filterInputAutoFocus()"
+                        pInputText
+                        type="search"
+                        autocomplete="off"
+                        [class]="cx('pcFilterInput')"
+                        [attr.placeholder]="filterPlaceholder()"
+                        (keydown.enter)="$event.preventDefault()"
+                        (input)="_filter($event.target?.value)"
+                        [pt]="ptm('pcFilterInput')"
+                        [unstyled]="unstyled()"
+                    />
+                    <p-inputicon [pt]="ptm('pcFilterIconContainer')" [unstyled]="unstyled()">
+                        @if (!filterIconTemplate()) {
+                            <svg data-p-icon="search" [class]="cx('filterIcon')" [pBind]="ptm('filterIcon')" />
+                        }
+                        @if (filterIconTemplate()) {
+                            <span [class]="cx('filterIcon')" [pBind]="ptm('filterIcon')">
+                                <ng-template *ngTemplateOutlet="filterIconTemplate()!"></ng-template>
+                            </span>
+                        }
+                    </p-inputicon>
+                </p-iconfield>
+            }
+        }
+
+        @if (getRootNode()?.length) {
+            @if (virtualScroll()) {
+                <p-scroller
+                    #scroller
+                    [items]="serializedValue"
+                    [tabindex]="-1"
+                    [styleClass]="cx('wrapper')"
+                    [style]="{ height: scrollerStyleHeight() }"
+                    [scrollHeight]="scrollerScrollHeight()"
+                    [itemSize]="virtualScrollItemSize()"
+                    [lazy]="lazy()"
+                    (onScroll)="onScroll.emit($event)"
+                    (onScrollIndexChange)="onScrollIndexChange.emit($event)"
+                    (onLazyLoad)="onLazyLoad.emit($event)"
+                    [options]="virtualScrollOptions()"
+                    [pt]="ptm('virtualScroller')"
+                    hostName="tree"
+                    [attr.data-p]="wrapperDataP"
+                >
+                    <ng-template #content let-items let-scrollerOptions="options">
+                        @if (items) {
+                            <ul
+                                #content
+                                [class]="cn(cx('rootChildren'), scrollerOptions.contentStyleClass)"
+                                [style]="scrollerOptions.contentStyle"
+                                role="tree"
+                                [attr.aria-label]="ariaLabel()"
+                                [attr.aria-labelledby]="ariaLabelledBy()"
+                                [pBind]="ptm('rootChildren')"
+                            >
+                                @for (rowNode of items; track trackBy()($index, rowNode); let firstChild = $first; let lastChild = $last; let idx = $index) {
+                                    <p-treenode
+                                        #treeNode
+                                        [level]="rowNode.level"
+                                        [rowNode]="rowNode"
+                                        [node]="rowNode.node"
+                                        [parentNode]="rowNode.parent"
+                                        [firstChild]="firstChild"
+                                        [lastChild]="lastChild"
+                                        [index]="getIndex(scrollerOptions, idx)"
+                                        [itemSize]="scrollerOptions.itemSize"
+                                        [indentation]="indentation()"
+                                        [loadingMode]="loadingMode()"
+                                        [pt]="pt"
+                                        [unstyled]="unstyled()"
+                                    />
+                                }
+                            </ul>
+                        }
+                    </ng-template>
+                    @if (loaderTemplate()) {
+                        <ng-template #loader let-scrollerOptions="options">
+                            <ng-container *ngTemplateOutlet="loaderTemplate()!; context: { options: scrollerOptions }"></ng-container>
+                        </ng-template>
+                    }
+                </p-scroller>
+            }
+            @if (!virtualScroll()) {
+                <div #wrapper [class]="cx('wrapper')" [style.max-height]="scrollHeight()" [pBind]="ptm('wrapper')" [attr.data-p]="wrapperDataP">
+                    @if (getRootNode()) {
+                        <ul #content [class]="cx('rootChildren')" role="tree" [attr.aria-label]="ariaLabel()" [attr.aria-labelledby]="ariaLabelledBy()" [pBind]="ptm('rootChildren')">
+                            @for (node of getRootNode(); track trackBy().bind(this)($index, node); let firstChild = $first; let lastChild = $last; let idx = $index) {
+                                <p-treenode [node]="node" [firstChild]="firstChild" [lastChild]="lastChild" [index]="idx" [level]="0" [loadingMode]="loadingMode()" [pt]="pt" [unstyled]="unstyled()" />
+                            }
+                        </ul>
+                    }
+                </div>
+            }
+        }
+
+        @if (showEmptyMessage) {
+            <div [class]="cx('emptyMessage')" [pBind]="ptm('emptyMessage')">
+                @if (!emptyTemplate()) {
+                    {{ emptyMessageLabel }}
+                }
+                @if (emptyTemplate()) {
+                    <ng-template *ngTemplateOutlet="emptyTemplate()!"></ng-template>
+                }
+            </div>
+        }
+        <ng-container *ngTemplateOutlet="footerTemplate()"></ng-container>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [TreeStyle, { provide: TREE_INSTANCE, useExisting: Tree }, { provide: PARENT_INSTANCE, useExisting: Tree }],
+                    host: {
+                        '[class]': "cx('root')",
+                        '[attr.data-p]': 'containerDataP',
+                        '(drop)': 'onDrop($event)',
+                        '(dragover)': 'onDragOver($event)',
+                        '(dragenter)': 'onDragEnter()',
+                        '(dragleave)': 'onDragLeave($event)'
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], 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"] }], collapsedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedKeys", required: false }] }, { type: i0.Output, args: ["collapsedKeysChange"] }], selectionKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionKeys", required: false }] }, { type: i0.Output, args: ["selectionKeysChange"] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", 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 }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], 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 }] }], 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 }] }] } });
+class TreeModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.3", ngImport: i0, type: TreeModule, imports: [Tree], exports: [Tree] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TreeModule, imports: [Tree] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TreeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [Tree],
+                    exports: [Tree]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Tree, TreeClasses, TreeModule, TreeStyle };
+//# sourceMappingURL=primenglab-tree.mjs.map