@wawjs/ngx-prime 22.0.0

package/fesm2022/wawjs-ngx-prime-tree.mjs

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