primeng 0.0.0-watch

package/fesm2022/primeng-tree.mjs

@@ -0,0 +1,2188 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, inject, forwardRef, numberAttribute, booleanAttribute, Input, ViewEncapsulation, Component, EventEmitter, HostListener, ContentChildren, ViewChild, ContentChild, Output, Optional, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { find, hasClass, findSingle, focus, removeAccents, resolveFieldData } from '@primeuix/utils';
+import * as i3 from 'primeng/api';
+import { SharedModule, TranslationKeys, PrimeTemplate } from 'primeng/api';
+import * as i4 from 'primeng/autofocus';
+import { AutoFocusModule } from 'primeng/autofocus';
+import { BaseComponent } from 'primeng/basecomponent';
+import { Checkbox } from 'primeng/checkbox';
+import { IconField } from 'primeng/iconfield';
+import { ChevronRightIcon, ChevronDownIcon, SpinnerIcon, SearchIcon } from 'primeng/icons';
+import { InputIcon } from 'primeng/inputicon';
+import { InputText } from 'primeng/inputtext';
+import { Ripple } from 'primeng/ripple';
+import { Scroller } from 'primeng/scroller';
+import { style } from '@primeuix/styles/tree';
+import { BaseStyle } from 'primeng/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.draghoverNode,
+        'p-tree-node-selected': instance.selectionMode === 'checkbox' && instance.tree.highlightOnSelect ? instance.checked : instance.selected
+    }),
+    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: ({ param }) => ['p-tree-node-droppoint', { 'p-tree-node-droppoint-active': param }]
+};
+class TreeStyle extends BaseStyle {
+    name = 'tree';
+    theme = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TreeStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TreeStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TreeStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Tree is used to display hierarchical data.
+ *
+ * [Live Demo](https://www.primeng.org/tree/)
+ *
+ * @module treestyle
+ *
+ */
+var TreeClasses;
+(function (TreeClasses) {
+    /**
+     * Class name of the root element
+     */
+    TreeClasses["root"] = "p-tree";
+    /**
+     * Class name of the mask element
+     */
+    TreeClasses["mask"] = "p-tree-mask";
+    /**
+     * Class name of the loading icon element
+     */
+    TreeClasses["loadingIcon"] = "p-tree-loading-icon";
+    /**
+     * Class name of the filter input element
+     */
+    TreeClasses["pcFilterInput"] = "p-tree-filter-input";
+    /**
+     * Class name of the wrapper element
+     */
+    TreeClasses["wrapper"] = "p-tree-root";
+    /**
+     * Class name of the root children element
+     */
+    TreeClasses["rootChildren"] = "p-tree-root-children";
+    /**
+     * Class name of the node element
+     */
+    TreeClasses["node"] = "p-tree-node";
+    /**
+     * Class name of the node content element
+     */
+    TreeClasses["nodeContent"] = "p-tree-node-content";
+    /**
+     * Class name of the node toggle button element
+     */
+    TreeClasses["nodeToggleButton"] = "p-tree-node-toggle-button";
+    /**
+     * Class name of the node toggle icon element
+     */
+    TreeClasses["nodeToggleIcon"] = "p-tree-node-toggle-icon";
+    /**
+     * Class name of the node checkbox element
+     */
+    TreeClasses["nodeCheckbox"] = "p-tree-node-checkbox";
+    /**
+     * Class name of the node icon element
+     */
+    TreeClasses["nodeIcon"] = "p-tree-node-icon";
+    /**
+     * Class name of the node label element
+     */
+    TreeClasses["nodeLabel"] = "p-tree-node-label";
+    /**
+     * Class name of the node children element
+     */
+    TreeClasses["nodeChildren"] = "p-tree-node-children";
+    /**
+     * Class name of the empty message element
+     */
+    TreeClasses["emptyMessage"] = "p-tree-empty-message";
+    /**
+     * Class name of the drop point element
+     */
+    TreeClasses["dropPoint"] = "p-tree-node-droppoint";
+})(TreeClasses || (TreeClasses = {}));
+
+class UITreeNode extends BaseComponent {
+    static ICON_CLASS = 'p-tree-node-icon ';
+    rowNode;
+    node;
+    parentNode;
+    root;
+    index;
+    firstChild;
+    lastChild;
+    level;
+    indentation;
+    itemSize;
+    loadingMode;
+    tree = inject(forwardRef(() => Tree));
+    timeout;
+    draghoverPrev;
+    draghoverNext;
+    draghoverNode;
+    _componentStyle = inject(TreeStyle);
+    get selected() {
+        return this.tree.selectionMode === 'single' || this.tree.selectionMode === 'multiple' ? this.isSelected() : undefined;
+    }
+    get checked() {
+        return this.tree.selectionMode === 'checkbox' ? this.isSelected() : undefined;
+    }
+    get nodeClass() {
+        return this.tree._componentStyle.classes.node({ instance: this });
+    }
+    get selectable() {
+        return this.node.selectable === false ? false : this.tree.selectionMode != null;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.node.parent = this.parentNode;
+        const nativeElement = this.tree.el.nativeElement;
+        const pDialogWrapper = nativeElement.closest('p-dialog');
+        if (this.parentNode && !pDialogWrapper) {
+            this.setAllNodesTabIndexes();
+            this.tree.syncNodeOption(this.node, this.tree.value, 'parent', this.tree.getNodeWithKey(this.parentNode.key, this.tree.value));
+        }
+    }
+    getIcon() {
+        let icon;
+        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);
+    }
+    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.focusVirtualNode();
+        }
+        this.tree.onNodeCollapse.emit({ originalEvent: event, node: this.node });
+    }
+    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);
+    }
+    isSelected() {
+        return this.tree.isSelected(this.node);
+    }
+    isSameNode(event) {
+        return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[role="treeitem"]')));
+    }
+    onDropPoint(event, position) {
+        event.preventDefault();
+        let dragNode = this.tree.dragNode;
+        let dragNodeIndex = this.tree.dragNodeIndex;
+        let dragNodeScope = this.tree.dragNodeScope;
+        let isValidDropPointIndex = this.tree.dragNodeTree === this.tree ? position === 1 || dragNodeIndex !== this.index - 1 : true;
+        if (this.tree.allowDrop(dragNode, this.node, dragNodeScope) && isValidDropPointIndex) {
+            let dropParams = { ...this.createDropPointEventMetadata(position) };
+            if (this.tree.validateDrop) {
+                this.tree.onNodeDrop.emit({
+                    originalEvent: event,
+                    dragNode: dragNode,
+                    dropNode: this.node,
+                    index: this.index,
+                    accept: () => {
+                        this.processPointDrop(dropParams);
+                    }
+                });
+            }
+            else {
+                this.processPointDrop(dropParams);
+                this.tree.onNodeDrop.emit({
+                    originalEvent: event,
+                    dragNode: dragNode,
+                    dropNode: this.node,
+                    index: this.index
+                });
+            }
+        }
+        this.draghoverPrev = false;
+        this.draghoverNext = false;
+    }
+    processPointDrop(event) {
+        let newNodeList = event.dropNode.parent ? event.dropNode.parent.children : this.tree.value;
+        event.dragNodeSubNodes.splice(event.dragNodeIndex, 1);
+        let dropIndex = this.index;
+        if (event.position < 0) {
+            dropIndex = event.dragNodeSubNodes === newNodeList ? (event.dragNodeIndex > event.index ? event.index : event.index - 1) : event.index;
+            newNodeList.splice(dropIndex, 0, event.dragNode);
+        }
+        else {
+            dropIndex = newNodeList.length;
+            newNodeList.push(event.dragNode);
+        }
+        this.tree.dragDropService.stopDrag({
+            node: event.dragNode,
+            subNodes: event.dropNode.parent ? event.dropNode.parent.children : this.tree.value,
+            index: event.dragNodeIndex
+        });
+    }
+    createDropPointEventMetadata(position) {
+        return {
+            dragNode: this.tree.dragNode,
+            dragNodeIndex: this.tree.dragNodeIndex,
+            dragNodeSubNodes: this.tree.dragNodeSubNodes,
+            dropNode: this.node,
+            index: this.index,
+            position: position
+        };
+    }
+    onDropPointDragOver(event) {
+        event.dataTransfer.dropEffect = 'move';
+        event.preventDefault();
+    }
+    onDropPointDragEnter(event, position) {
+        if (this.tree.allowDrop(this.tree.dragNode, this.node, this.tree.dragNodeScope)) {
+            if (position < 0)
+                this.draghoverPrev = true;
+            else
+                this.draghoverNext = true;
+        }
+    }
+    onDropPointDragLeave(event) {
+        this.draghoverPrev = false;
+        this.draghoverNext = false;
+    }
+    onDragStart(event) {
+        if (this.tree.draggableNodes && this.node.draggable !== false) {
+            event.dataTransfer.setData('text', 'data');
+            this.tree.dragDropService.startDrag({
+                tree: this,
+                node: this.node,
+                subNodes: this.node?.parent ? this.node.parent.children : this.tree.value,
+                index: this.index,
+                scope: this.tree.draggableScope
+            });
+        }
+        else {
+            event.preventDefault();
+        }
+    }
+    onDragStop(event) {
+        this.tree.dragDropService.stopDrag({
+            node: this.node,
+            subNodes: this.node?.parent ? this.node.parent.children : this.tree.value,
+            index: this.index
+        });
+    }
+    onDropNodeDragOver(event) {
+        event.dataTransfer.dropEffect = 'move';
+        if (this.tree.droppableNodes) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    onDropNode(event) {
+        if (this.tree.droppableNodes && this.node?.droppable !== false) {
+            let dragNode = this.tree.dragNode;
+            if (this.tree.allowDrop(dragNode, this.node, this.tree.dragNodeScope)) {
+                let dropParams = { ...this.createDropNodeEventMetadata() };
+                if (this.tree.validateDrop) {
+                    this.tree.onNodeDrop.emit({
+                        originalEvent: event,
+                        dragNode: dragNode,
+                        dropNode: this.node,
+                        index: this.index,
+                        accept: () => {
+                            this.processNodeDrop(dropParams);
+                        }
+                    });
+                }
+                else {
+                    this.processNodeDrop(dropParams);
+                    this.tree.onNodeDrop.emit({
+                        originalEvent: event,
+                        dragNode: dragNode,
+                        dropNode: this.node,
+                        index: this.index
+                    });
+                }
+            }
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.draghoverNode = false;
+    }
+    createDropNodeEventMetadata() {
+        return {
+            dragNode: this.tree.dragNode,
+            dragNodeIndex: this.tree.dragNodeIndex,
+            dragNodeSubNodes: this.tree.dragNodeSubNodes,
+            dropNode: this.node
+        };
+    }
+    processNodeDrop(event) {
+        let dragNodeIndex = event.dragNodeIndex;
+        event.dragNodeSubNodes.splice(dragNodeIndex, 1);
+        if (event.dropNode.children)
+            event.dropNode.children.push(event.dragNode);
+        else
+            event.dropNode.children = [event.dragNode];
+        this.tree.dragDropService.stopDrag({
+            node: event.dragNode,
+            subNodes: event.dropNode.parent ? event.dropNode.parent.children : this.tree.value,
+            index: dragNodeIndex
+        });
+    }
+    onDropNodeDragEnter(event) {
+        if (this.tree.droppableNodes && this.node?.droppable !== false && this.tree.allowDrop(this.tree.dragNode, this.node, this.tree.dragNodeScope)) {
+            this.draghoverNode = true;
+        }
+    }
+    onDropNodeDragLeave(event) {
+        if (this.tree.droppableNodes) {
+            let rect = event.currentTarget.getBoundingClientRect();
+            if (event.x > rect.left + rect.width || event.x < rect.left || event.y >= Math.floor(rect.top + rect.height) || event.y < rect.top) {
+                this.draghoverNode = false;
+            }
+        }
+    }
+    onKeyDown(event) {
+        if (!this.isSameNode(event) || (this.tree.contextMenu && this.tree.contextMenu.containerViewChild?.nativeElement.style.display === 'block')) {
+            return;
+        }
+        switch (event.code) {
+            //down arrow
+            case 'ArrowDown':
+                this.onArrowDown(event);
+                break;
+            //up arrow
+            case 'ArrowUp':
+                this.onArrowUp(event);
+                break;
+            //right arrow
+            case 'ArrowRight':
+                this.onArrowRight(event);
+                break;
+            //left arrow
+            case 'ArrowLeft':
+                this.onArrowLeft(event);
+                break;
+            //enter
+            case 'Enter':
+            case 'Space':
+            case 'NumpadEnter':
+                this.onEnter(event);
+                break;
+            //tab
+            case 'Tab':
+                this.setAllNodesTabIndexes();
+                break;
+            default:
+                //no op
+                break;
+        }
+    }
+    onArrowUp(event) {
+        const nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? 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') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target;
+        const listElement = nodeElement.children[1];
+        if (listElement && listElement.children.length > 0) {
+            this.focusRowChange(nodeElement, listElement.children[0]);
+        }
+        else {
+            if (nodeElement.parentElement.nextElementSibling) {
+                this.focusRowChange(nodeElement, nodeElement.parentElement.nextElementSibling);
+            }
+            else {
+                let nextSiblingAncestor = this.findNextSiblingOfAncestor(nodeElement.parentElement);
+                if (nextSiblingAncestor) {
+                    this.focusRowChange(nodeElement, nextSiblingAncestor);
+                }
+            }
+        }
+        event.preventDefault();
+    }
+    onArrowRight(event) {
+        if (!this.node?.expanded && !this.tree.isNodeLeaf(this.node)) {
+            this.expand(event);
+            event.currentTarget.tabIndex = -1;
+            setTimeout(() => {
+                this.onArrowDown(event);
+            }, 1);
+        }
+        event.preventDefault();
+    }
+    onArrowLeft(event) {
+        const nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target;
+        if (this.level === 0 && !this.node?.expanded) {
+            return false;
+        }
+        if (this.node?.expanded) {
+            this.collapse(event);
+            return;
+        }
+        let parentNodeElement = this.getParentNodeElement(nodeElement.parentElement);
+        if (parentNodeElement) {
+            this.focusRowChange(event.currentTarget, parentNodeElement);
+        }
+        event.preventDefault();
+    }
+    onEnter(event) {
+        this.tree.onNodeClick(event, this.node);
+        this.setTabIndexForSelectionMode(event, this.tree.nodeTouched);
+        event.preventDefault();
+    }
+    setAllNodesTabIndexes() {
+        const nodes = find(this.tree.el.nativeElement, '.p-tree-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) => hasClass(el, 'p-tree-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) {
+        if (this.tree.droppableNodes)
+            element.children[1].focus();
+        else
+            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: "20.2.4", ngImport: i0, type: UITreeNode, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: UITreeNode, isStandalone: true, selector: "p-treeNode", inputs: { rowNode: "rowNode", node: "node", parentNode: "parentNode", root: ["root", "root", booleanAttribute], index: ["index", "index", numberAttribute], firstChild: ["firstChild", "firstChild", booleanAttribute], lastChild: ["lastChild", "lastChild", booleanAttribute], level: ["level", "level", numberAttribute], indentation: ["indentation", "indentation", numberAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], loadingMode: "loadingMode" }, providers: [TreeStyle], usesInheritance: true, ngImport: i0, template: `
+        @if (node) {
+            <li
+                *ngIf="tree.droppableNodes"
+                [class]="cx('dropPoint', { param: draghoverPrev })"
+                [attr.aria-hidden]="true"
+                (drop)="onDropPoint($event, -1)"
+                (dragover)="onDropPointDragOver($event)"
+                (dragenter)="onDropPointDragEnter($event, -1)"
+                (dragleave)="onDropPointDragLeave($event)"
+            ></li>
+            <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)"
+            >
+                <div
+                    [class]="cx('nodeContent')"
+                    [style.paddingLeft]="level * indentation + 'rem'"
+                    (click)="onNodeClick($event)"
+                    (contextmenu)="onNodeRightClick($event)"
+                    (dblclick)="onNodeDblClick($event)"
+                    (touchend)="onNodeTouchEnd()"
+                    (drop)="onDropNode($event)"
+                    (dragover)="onDropNodeDragOver($event)"
+                    (dragenter)="onDropNodeDragEnter($event)"
+                    (dragleave)="onDropNodeDragLeave($event)"
+                    [draggable]="tree.draggableNodes"
+                    (dragstart)="onDragStart($event)"
+                    (dragend)="onDragStop($event)"
+                >
+                    <button type="button" [attr.data-pc-section]="'toggler'" [class]="cx('nodeToggleButton')" (click)="toggle($event)" pRipple tabindex="-1">
+                        <ng-container *ngIf="!tree.togglerIconTemplate && !tree._togglerIconTemplate">
+                            <ng-container *ngIf="!node.loading">
+                                <svg data-p-icon="chevron-right" *ngIf="!node.expanded" [class]="cx('nodeToggleIcon')" />
+                                <svg data-p-icon="chevron-down" *ngIf="node.expanded" [class]="cx('nodeToggleIcon')" />
+                            </ng-container>
+                            <ng-container *ngIf="loadingMode === 'icon' && node.loading">
+                                <svg data-p-icon="spinner" [class]="cx('nodeToggleIcon')" spin />
+                            </ng-container>
+                        </ng-container>
+                        <span *ngIf="tree.togglerIconTemplate || tree._togglerIconTemplate" [class]="cx('nodeToggleIcon')">
+                            <ng-template *ngTemplateOutlet="tree.togglerIconTemplate || tree._togglerIconTemplate; context: { $implicit: node.expanded, loading: node.loading }"></ng-template>
+                        </span>
+                    </button>
+
+                    <p-checkbox
+                        [ngModel]="isSelected()"
+                        [styleClass]="cx('nodeCheckbox')"
+                        [binary]="true"
+                        [indeterminate]="node.partialSelected"
+                        *ngIf="tree.selectionMode == 'checkbox'"
+                        [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()"
+                    >
+                        <ng-container *ngIf="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>
+                        </ng-container>
+                    </p-checkbox>
+
+                    <span [class]="getIcon()" *ngIf="node.icon || node.expandedIcon || node.collapsedIcon"></span>
+                    <span [class]="cx('nodeLabel')">
+                        <span *ngIf="!tree.getTemplateForNode(node)">{{ node.label }}</span>
+                        <span *ngIf="tree.getTemplateForNode(node)">
+                            <ng-container *ngTemplateOutlet="tree.getTemplateForNode(node); context: { $implicit: node }"></ng-container>
+                        </span>
+                    </span>
+                </div>
+                <ul [class]="cx('nodeChildren')" *ngIf="!tree.virtualScroll && node.children && node.expanded" role="group">
+                    <p-treeNode
+                        *ngFor="let childNode of node.children; let firstChild = first; let lastChild = last; let index = index; trackBy: tree.trackBy.bind(this)"
+                        [node]="childNode"
+                        [parentNode]="node"
+                        [firstChild]="firstChild"
+                        [lastChild]="lastChild"
+                        [index]="index"
+                        [itemSize]="itemSize"
+                        [level]="level + 1"
+                        [loadingMode]="loadingMode"
+                    ></p-treeNode>
+                </ul>
+            </li>
+
+            <li
+                *ngIf="tree.droppableNodes && lastChild"
+                [class]="cx('dropPoint', { param: draghoverNext })"
+                (drop)="onDropPoint($event, 1)"
+                [attr.aria-hidden]="true"
+                (dragover)="onDropPointDragOver($event)"
+                (dragenter)="onDropPointDragEnter($event, 1)"
+                (dragleave)="onDropPointDragLeave($event)"
+            ></li>
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: UITreeNode, selector: "p-treeNode", inputs: ["rowNode", "node", "parentNode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["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 }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UITreeNode, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-treeNode',
+                    standalone: true,
+                    imports: [CommonModule, Ripple, Checkbox, FormsModule, ChevronRightIcon, ChevronDownIcon, SpinnerIcon, SharedModule],
+                    template: `
+        @if (node) {
+            <li
+                *ngIf="tree.droppableNodes"
+                [class]="cx('dropPoint', { param: draghoverPrev })"
+                [attr.aria-hidden]="true"
+                (drop)="onDropPoint($event, -1)"
+                (dragover)="onDropPointDragOver($event)"
+                (dragenter)="onDropPointDragEnter($event, -1)"
+                (dragleave)="onDropPointDragLeave($event)"
+            ></li>
+            <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)"
+            >
+                <div
+                    [class]="cx('nodeContent')"
+                    [style.paddingLeft]="level * indentation + 'rem'"
+                    (click)="onNodeClick($event)"
+                    (contextmenu)="onNodeRightClick($event)"
+                    (dblclick)="onNodeDblClick($event)"
+                    (touchend)="onNodeTouchEnd()"
+                    (drop)="onDropNode($event)"
+                    (dragover)="onDropNodeDragOver($event)"
+                    (dragenter)="onDropNodeDragEnter($event)"
+                    (dragleave)="onDropNodeDragLeave($event)"
+                    [draggable]="tree.draggableNodes"
+                    (dragstart)="onDragStart($event)"
+                    (dragend)="onDragStop($event)"
+                >
+                    <button type="button" [attr.data-pc-section]="'toggler'" [class]="cx('nodeToggleButton')" (click)="toggle($event)" pRipple tabindex="-1">
+                        <ng-container *ngIf="!tree.togglerIconTemplate && !tree._togglerIconTemplate">
+                            <ng-container *ngIf="!node.loading">
+                                <svg data-p-icon="chevron-right" *ngIf="!node.expanded" [class]="cx('nodeToggleIcon')" />
+                                <svg data-p-icon="chevron-down" *ngIf="node.expanded" [class]="cx('nodeToggleIcon')" />
+                            </ng-container>
+                            <ng-container *ngIf="loadingMode === 'icon' && node.loading">
+                                <svg data-p-icon="spinner" [class]="cx('nodeToggleIcon')" spin />
+                            </ng-container>
+                        </ng-container>
+                        <span *ngIf="tree.togglerIconTemplate || tree._togglerIconTemplate" [class]="cx('nodeToggleIcon')">
+                            <ng-template *ngTemplateOutlet="tree.togglerIconTemplate || tree._togglerIconTemplate; context: { $implicit: node.expanded, loading: node.loading }"></ng-template>
+                        </span>
+                    </button>
+
+                    <p-checkbox
+                        [ngModel]="isSelected()"
+                        [styleClass]="cx('nodeCheckbox')"
+                        [binary]="true"
+                        [indeterminate]="node.partialSelected"
+                        *ngIf="tree.selectionMode == 'checkbox'"
+                        [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()"
+                    >
+                        <ng-container *ngIf="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>
+                        </ng-container>
+                    </p-checkbox>
+
+                    <span [class]="getIcon()" *ngIf="node.icon || node.expandedIcon || node.collapsedIcon"></span>
+                    <span [class]="cx('nodeLabel')">
+                        <span *ngIf="!tree.getTemplateForNode(node)">{{ node.label }}</span>
+                        <span *ngIf="tree.getTemplateForNode(node)">
+                            <ng-container *ngTemplateOutlet="tree.getTemplateForNode(node); context: { $implicit: node }"></ng-container>
+                        </span>
+                    </span>
+                </div>
+                <ul [class]="cx('nodeChildren')" *ngIf="!tree.virtualScroll && node.children && node.expanded" role="group">
+                    <p-treeNode
+                        *ngFor="let childNode of node.children; let firstChild = first; let lastChild = last; let index = index; trackBy: tree.trackBy.bind(this)"
+                        [node]="childNode"
+                        [parentNode]="node"
+                        [firstChild]="firstChild"
+                        [lastChild]="lastChild"
+                        [index]="index"
+                        [itemSize]="itemSize"
+                        [level]="level + 1"
+                        [loadingMode]="loadingMode"
+                    ></p-treeNode>
+                </ul>
+            </li>
+
+            <li
+                *ngIf="tree.droppableNodes && lastChild"
+                [class]="cx('dropPoint', { param: draghoverNext })"
+                (drop)="onDropPoint($event, 1)"
+                [attr.aria-hidden]="true"
+                (dragover)="onDropPointDragOver($event)"
+                (dragenter)="onDropPointDragEnter($event, 1)"
+                (dragleave)="onDropPointDragLeave($event)"
+            ></li>
+        }
+    `,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [TreeStyle]
+                }]
+        }], propDecorators: { rowNode: [{
+                type: Input
+            }], node: [{
+                type: Input
+            }], parentNode: [{
+                type: Input
+            }], root: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], index: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], firstChild: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], lastChild: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], level: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], indentation: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], itemSize: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], loadingMode: [{
+                type: Input
+            }] } });
+/**
+ * Tree is used to display hierarchical data.
+ * @group Components
+ */
+class Tree extends BaseComponent {
+    dragDropService;
+    /**
+     * An array of treenodes.
+     * @group Props
+     */
+    value;
+    /**
+     * Defines the selection mode.
+     * @group Props
+     */
+    selectionMode;
+    /**
+     * Loading mode display.
+     * @group Props
+     */
+    loadingMode = 'mask';
+    /**
+     * A single treenode instance or an array to refer to the selections.
+     * @group Props
+     */
+    selection;
+    /**
+     * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
+     * @group Props
+     */
+    styleClass;
+    /**
+     * Context menu instance.
+     * @group Props
+     */
+    contextMenu;
+    /**
+     * Scope of the draggable nodes to match a droppableScope.
+     * @group Props
+     */
+    draggableScope;
+    /**
+     * Scope of the droppable nodes to match a draggableScope.
+     * @group Props
+     */
+    droppableScope;
+    /**
+     * Whether the nodes are draggable.
+     * @group Props
+     */
+    draggableNodes;
+    /**
+     * Whether the nodes are droppable.
+     * @group Props
+     */
+    droppableNodes;
+    /**
+     * 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 = false;
+    /**
+     * Whether checkbox selections propagate to ancestor nodes.
+     * @group Props
+     */
+    propagateSelectionUp = true;
+    /**
+     * Whether checkbox selections propagate to descendant nodes.
+     * @group Props
+     */
+    propagateSelectionDown = true;
+    /**
+     * Displays a loader to indicate data load is in progress.
+     * @group Props
+     */
+    loading;
+    /**
+     * The icon to show while indicating data load is in progress.
+     * @group Props
+     */
+    loadingIcon;
+    /**
+     * Text to display when there is no data.
+     * @group Props
+     */
+    emptyMessage = '';
+    /**
+     * Used to define a string that labels the tree.
+     * @group Props
+     */
+    ariaLabel;
+    /**
+     * Defines a string that labels the toggler icon for accessibility.
+     * @group Props
+     */
+    togglerAriaLabel;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     * @group Props
+     */
+    ariaLabelledBy;
+    /**
+     * When enabled, drop can be accepted or rejected based on condition defined at onNodeDrop.
+     * @group Props
+     */
+    validateDrop;
+    /**
+     * When specified, displays an input field to filter the items.
+     * @group Props
+     */
+    filter;
+    /**
+     * Determines whether the filter input should be automatically focused when the component is rendered.
+     * @group Props
+     */
+    filterInputAutoFocus = false;
+    /**
+     * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
+     * @group Props
+     */
+    filterBy = 'label';
+    /**
+     * Mode for filtering valid values are "lenient" and "strict". Default is lenient.
+     * @group Props
+     */
+    filterMode = 'lenient';
+    /**
+     * Mode for filtering valid values are "lenient" and "strict". Default is lenient.
+     * @group Props
+     */
+    filterOptions;
+    /**
+     * Placeholder text to show when filter input is empty.
+     * @group Props
+     */
+    filterPlaceholder;
+    /**
+     * Values after the tree nodes are filtered.
+     * @group Props
+     */
+    filteredNodes;
+    /**
+     * Locale to use in filtering. The default locale is the host environment's current locale.
+     * @group Props
+     */
+    filterLocale;
+    /**
+     * Height of the scrollable viewport.
+     * @group Props
+     */
+    scrollHeight;
+    /**
+     * Defines if data is loaded and interacted with in lazy manner.
+     * @group Props
+     */
+    lazy = false;
+    /**
+     * Whether the data should be loaded on demand during scroll.
+     * @group Props
+     */
+    virtualScroll;
+    /**
+     * Height of an item in the list for VirtualScrolling.
+     * @group Props
+     */
+    virtualScrollItemSize;
+    /**
+     * Whether to use the scroller feature. The properties of scroller component can be used like an object in it.
+     * @group Props
+     */
+    virtualScrollOptions;
+    /**
+     * Indentation factor for spacing of the nested node when virtual scrolling is enabled.
+     * @group Props
+     */
+    indentation = 1.5;
+    /**
+     * Custom templates of the component.
+     * @group Props
+     */
+    _templateMap;
+    /**
+     * Function to optimize the node list rendering, default algorithm checks for object identity.
+     * @group Props
+     */
+    trackBy = (index, item) => item;
+    /**
+     * Highlights the node on select.
+     * @group Props
+     */
+    highlightOnSelect = false;
+    /**
+     * Callback to invoke on selection change.
+     * @param {(TreeNode<any> | TreeNode<any>[] | null)} event - Custom selection change event.
+     * @group Emits
+     */
+    selectionChange = new EventEmitter();
+    /**
+     * Callback to invoke when a node is selected.
+     * @param {TreeNodeSelectEvent} event - Node select event.
+     * @group Emits
+     */
+    onNodeSelect = new EventEmitter();
+    /**
+     * Callback to invoke when a node is unselected.
+     * @param {TreeNodeUnSelectEvent} event - Node unselect event.
+     * @group Emits
+     */
+    onNodeUnselect = new EventEmitter();
+    /**
+     * Callback to invoke when a node is expanded.
+     * @param {TreeNodeExpandEvent} event - Node expand event.
+     * @group Emits
+     */
+    onNodeExpand = new EventEmitter();
+    /**
+     * Callback to invoke when a node is collapsed.
+     * @param {TreeNodeCollapseEvent} event - Node collapse event.
+     * @group Emits
+     */
+    onNodeCollapse = new EventEmitter();
+    /**
+     * Callback to invoke when a node is selected with right click.
+     * @param {onNodeContextMenuSelect} event - Node context menu select event.
+     * @group Emits
+     */
+    onNodeContextMenuSelect = new EventEmitter();
+    /**
+     * Callback to invoke when a node is double clicked.
+     * @param {TreeNodeDoubleClickEvent} event - Node double click event.
+     * @group Emits
+     */
+    onNodeDoubleClick = new EventEmitter();
+    /**
+     * Callback to invoke when a node is dropped.
+     * @param {TreeNodeDropEvent} event - Node drop event.
+     * @group Emits
+     */
+    onNodeDrop = new EventEmitter();
+    /**
+     * Callback to invoke in lazy mode to load new data.
+     * @param {TreeLazyLoadEvent} event - Custom lazy load event.
+     * @group Emits
+     */
+    onLazyLoad = new EventEmitter();
+    /**
+     * Callback to invoke in virtual scroll mode when scroll position changes.
+     * @param {TreeScrollEvent} event - Custom scroll event.
+     * @group Emits
+     */
+    onScroll = new EventEmitter();
+    /**
+     * 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 = new EventEmitter();
+    /**
+     * Callback to invoke when data is filtered.
+     * @param {TreeFilterEvent} event - Custom filter event.
+     * @group Emits
+     */
+    onFilter = new EventEmitter();
+    /**
+     * Filter template.
+     * @group Templates
+     */
+    filterTemplate;
+    /**
+     * Node template.
+     * @group Templates
+     */
+    nodeTemplate;
+    /**
+     * Header template.
+     * @group Templates
+     */
+    headerTemplate;
+    /**
+     * Footer template.
+     * @group Templates
+     */
+    footerTemplate;
+    /**
+     * Loader template.
+     * @group Templates
+     */
+    loaderTemplate;
+    /**
+     * Empty message template.
+     * @group Templates
+     */
+    emptyMessageTemplate;
+    /**
+     * Toggler icon template.
+     * @group Templates
+     */
+    togglerIconTemplate;
+    /**
+     * Checkbox icon template.
+     * @group Templates
+     */
+    checkboxIconTemplate;
+    /**
+     * Loading icon template.
+     * @group Templates
+     */
+    loadingIconTemplate;
+    /**
+     * Filter icon template.
+     * @group Templates
+     */
+    filterIconTemplate;
+    filterViewChild;
+    scroller;
+    wrapperViewChild;
+    contentViewChild;
+    templates;
+    _headerTemplate;
+    _emptyMessageTemplate;
+    _footerTemplate;
+    _loaderTemplate;
+    _togglerIconTemplate;
+    _checkboxIconTemplate;
+    _loadingIconTemplate;
+    _filterIconTemplate;
+    _filterTemplate;
+    ngAfterContentInit() {
+        if (this.templates.length) {
+            this._templateMap = {};
+        }
+        this.templates.forEach((item) => {
+            switch (item.getType()) {
+                case 'header':
+                    this._headerTemplate = item.template;
+                    break;
+                case 'empty':
+                    this._emptyMessageTemplate = 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._templateMap[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);
+    }
+    constructor(dragDropService) {
+        super();
+        this.dragDropService = dragDropService;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (this.filterBy) {
+            this.filterOptions = {
+                filter: (value) => this._filter(value),
+                reset: () => this.resetFilter()
+            };
+        }
+        if (this.droppableNodes) {
+            this.dragStartSubscription = this.dragDropService.dragStart$.subscribe((event) => {
+                this.dragNodeTree = event.tree;
+                this.dragNode = event.node;
+                this.dragNodeSubNodes = event.subNodes;
+                this.dragNodeIndex = event.index;
+                this.dragNodeScope = event.scope;
+            });
+            this.dragStopSubscription = this.dragDropService.dragStop$.subscribe((event) => {
+                this.dragNodeTree = null;
+                this.dragNode = null;
+                this.dragNodeSubNodes = null;
+                this.dragNodeIndex = null;
+                this.dragNodeScope = null;
+                this.dragHover = false;
+            });
+        }
+    }
+    ngOnChanges(simpleChange) {
+        super.ngOnChanges(simpleChange);
+        if (simpleChange.value) {
+            this.updateSerializedValue();
+            if (this.hasFilterActive()) {
+                this._filter(this.filterViewChild.nativeElement.value);
+            }
+        }
+    }
+    get emptyMessageLabel() {
+        return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
+    }
+    updateSerializedValue() {
+        this.serializedValue = [];
+        this.serializeNodes(null, this.getRootNode(), 0, true);
+    }
+    serializeNodes(parent, nodes, level, visible) {
+        if (nodes && nodes.length) {
+            for (let node of nodes) {
+                node.parent = parent;
+                const rowNode = {
+                    node: node,
+                    parent: parent,
+                    level: level,
+                    visible: visible && (parent ? parent.expanded : true)
+                };
+                this.serializedValue.push(rowNode);
+                if (rowNode.visible && node.expanded) {
+                    this.serializeNodes(node, node.children, level + 1, rowNode.visible);
+                }
+            }
+        }
+    }
+    onNodeClick(event, node) {
+        let eventTarget = event.target;
+        if (hasClass(eventTarget, 'p-tree-toggler') || hasClass(eventTarget, 'p-tree-toggler-icon')) {
+            return;
+        }
+        else 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.filteredNodes);
+                if (!node) {
+                    return;
+                }
+            }
+            let index = this.findIndexInSelection(node);
+            let selected = index >= 0;
+            if (this.isCheckboxSelectionMode()) {
+                if (selected) {
+                    if (this.propagateSelectionDown)
+                        this.propagateDown(node, false);
+                    else
+                        this.selection = this.selection.filter((val, i) => i != index);
+                    if (this.propagateSelectionUp && node.parent) {
+                        this.propagateUp(node.parent, false);
+                    }
+                    this.selectionChange.emit(this.selection);
+                    this.onNodeUnselect.emit({ originalEvent: event, node: node });
+                }
+                else {
+                    if (this.propagateSelectionDown)
+                        this.propagateDown(node, true);
+                    else
+                        this.selection = [...(this.selection || []), node];
+                    if (this.propagateSelectionUp && node.parent) {
+                        this.propagateUp(node.parent, true);
+                    }
+                    this.selectionChange.emit(this.selection);
+                    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.selectionChange.emit(null);
+                        }
+                        else {
+                            this.selection = this.selection.filter((val, i) => i != index);
+                            this.selectionChange.emit(this.selection);
+                        }
+                        this.onNodeUnselect.emit({ originalEvent: event, node: node });
+                    }
+                    else {
+                        if (this.isSingleSelectionMode()) {
+                            this.selectionChange.emit(node);
+                        }
+                        else if (this.isMultipleSelectionMode()) {
+                            this.selection = !metaKey ? [] : this.selection || [];
+                            this.selection = [...this.selection, node];
+                            this.selectionChange.emit(this.selection);
+                        }
+                        this.onNodeSelect.emit({ originalEvent: event, node: node });
+                    }
+                }
+                else {
+                    if (this.isSingleSelectionMode()) {
+                        if (selected) {
+                            this.selection = null;
+                            this.onNodeUnselect.emit({ originalEvent: event, node: node });
+                        }
+                        else {
+                            this.selection = node;
+                            setTimeout(() => {
+                                this.onNodeSelect.emit({ originalEvent: event, node: node });
+                            });
+                        }
+                    }
+                    else {
+                        if (selected) {
+                            this.selection = this.selection.filter((val, i) => i != index);
+                            this.onNodeUnselect.emit({ originalEvent: event, node: node });
+                        }
+                        else {
+                            this.selection = [...(this.selection || []), node];
+                            setTimeout(() => {
+                                this.onNodeSelect.emit({ originalEvent: event, node: node });
+                            });
+                        }
+                    }
+                    this.selectionChange.emit(this.selection);
+                }
+            }
+        }
+        this.nodeTouched = false;
+    }
+    onNodeTouchEnd() {
+        this.nodeTouched = true;
+    }
+    onNodeRightClick(event, node) {
+        if (this.contextMenu) {
+            let eventTarget = event.target;
+            if (eventTarget.className && eventTarget.className.indexOf('p-tree-toggler') === 0) {
+                return;
+            }
+            else {
+                let index = this.findIndexInSelection(node);
+                let selected = index >= 0;
+                if (!selected) {
+                    if (this.isSingleSelectionMode())
+                        this.selectionChange.emit(node);
+                    else
+                        this.selectionChange.emit([node]);
+                }
+                this.contextMenu.show(event);
+                this.onNodeContextMenuSelect.emit({ originalEvent: event, node: node });
+            }
+        }
+    }
+    onNodeDblClick(event, node) {
+        this.onNodeDoubleClick.emit({ originalEvent: event, node: node });
+    }
+    findIndexInSelection(node) {
+        let index = -1;
+        if (this.selectionMode && this.selection) {
+            if (this.isSingleSelectionMode()) {
+                let areNodesEqual = (this.selection.key && this.selection.key === node.key) || this.selection == node;
+                index = areNodesEqual ? 0 : -1;
+            }
+            else {
+                for (let i = 0; i < this.selection.length; i++) {
+                    let selectedNode = this.selection[i];
+                    let areNodesEqual = (selectedNode.key && selectedNode.key === node.key) || selectedNode == node;
+                    if (areNodesEqual) {
+                        index = i;
+                        break;
+                    }
+                }
+            }
+        }
+        return index;
+    }
+    syncNodeOption(node, parentNodes, option, value) {
+        // to synchronize the node option between the filtered nodes and the original nodes(this.value)
+        const _node = this.hasFilteredNodes() ? this.getNodeWithKey(node.key, parentNodes) : null;
+        if (_node) {
+            _node[option] = value || node[option];
+        }
+    }
+    hasFilteredNodes() {
+        return this.filter && this.filteredNodes && this.filteredNodes.length;
+    }
+    hasFilterActive() {
+        return this.filter && this.filterViewChild?.nativeElement?.value.length > 0;
+    }
+    getNodeWithKey(key, nodes) {
+        for (let node of nodes) {
+            if (node.key === key) {
+                return node;
+            }
+            if (node.children) {
+                let matchedNode = this.getNodeWithKey(key, node.children);
+                if (matchedNode) {
+                    return matchedNode;
+                }
+            }
+        }
+    }
+    propagateUp(node, select) {
+        if (node.children && node.children.length) {
+            let selectedCount = 0;
+            let childPartialSelected = false;
+            for (let child of node.children) {
+                if (this.isSelected(child)) {
+                    selectedCount++;
+                }
+                else if (child.partialSelected) {
+                    childPartialSelected = true;
+                }
+            }
+            if (select && selectedCount == node.children.length) {
+                this.selection = [...(this.selection || []), node];
+                node.partialSelected = false;
+            }
+            else {
+                if (!select) {
+                    let index = this.findIndexInSelection(node);
+                    if (index >= 0) {
+                        this.selection = this.selection.filter((val, i) => i != index);
+                    }
+                }
+                if (childPartialSelected || (selectedCount > 0 && selectedCount != node.children.length))
+                    node.partialSelected = true;
+                else
+                    node.partialSelected = false;
+            }
+            this.syncNodeOption(node, this.filteredNodes, 'partialSelected');
+        }
+        let parent = node.parent;
+        if (parent) {
+            this.propagateUp(parent, select);
+        }
+    }
+    propagateDown(node, select) {
+        let index = this.findIndexInSelection(node);
+        if (select && index == -1) {
+            this.selection = [...(this.selection || []), node];
+        }
+        else if (!select && index > -1) {
+            this.selection = this.selection.filter((val, i) => i != index);
+        }
+        node.partialSelected = false;
+        this.syncNodeOption(node, this.filteredNodes, 'partialSelected');
+        if (node.children && node.children.length) {
+            for (let child of node.children) {
+                this.propagateDown(child, select);
+            }
+        }
+    }
+    isSelected(node) {
+        return this.findIndexInSelection(node) != -1;
+    }
+    isSingleSelectionMode() {
+        return this.selectionMode && this.selectionMode == 'single';
+    }
+    isMultipleSelectionMode() {
+        return this.selectionMode && this.selectionMode == 'multiple';
+    }
+    isCheckboxSelectionMode() {
+        return this.selectionMode && this.selectionMode == 'checkbox';
+    }
+    isNodeLeaf(node) {
+        return node.leaf == false ? false : !(node.children && node.children.length);
+    }
+    getRootNode() {
+        return this.filteredNodes ? this.filteredNodes : this.value;
+    }
+    getTemplateForNode(node) {
+        if (this._templateMap)
+            return node.type ? this._templateMap[node.type] : this._templateMap['default'];
+        else
+            return null;
+    }
+    onDragOver(event) {
+        if (this.droppableNodes && (!this.value || this.value.length === 0)) {
+            event.dataTransfer.dropEffect = 'move';
+            event.preventDefault();
+        }
+    }
+    onDrop(event) {
+        if (this.droppableNodes && (!this.value || this.value.length === 0)) {
+            event.preventDefault();
+            let dragNode = this.dragNode;
+            if (this.allowDrop(dragNode, null, this.dragNodeScope)) {
+                let dragNodeIndex = this.dragNodeIndex;
+                this.value = this.value || [];
+                if (this.validateDrop) {
+                    this.onNodeDrop.emit({
+                        originalEvent: event,
+                        dragNode: dragNode,
+                        dropNode: null,
+                        index: dragNodeIndex,
+                        accept: () => {
+                            this.processTreeDrop(dragNode, dragNodeIndex);
+                        }
+                    });
+                }
+                else {
+                    this.onNodeDrop.emit({
+                        originalEvent: event,
+                        dragNode: dragNode,
+                        dropNode: null,
+                        index: dragNodeIndex
+                    });
+                    this.processTreeDrop(dragNode, dragNodeIndex);
+                }
+            }
+        }
+    }
+    processTreeDrop(dragNode, dragNodeIndex) {
+        this.dragNodeSubNodes.splice(dragNodeIndex, 1);
+        this.value.push(dragNode);
+        this.dragDropService.stopDrag({
+            node: dragNode
+        });
+    }
+    onDragEnter() {
+        if (this.droppableNodes && this.allowDrop(this.dragNode, null, this.dragNodeScope)) {
+            this.dragHover = true;
+        }
+    }
+    onDragLeave(event) {
+        if (this.droppableNodes) {
+            let rect = event.currentTarget.getBoundingClientRect();
+            if (event.x > rect.left + rect.width || event.x < rect.left || event.y > rect.top + rect.height || event.y < 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;
+        }
+    }
+    isValidDragScope(dragScope) {
+        let dropScope = this.droppableScope;
+        if (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;
+        }
+        else {
+            return true;
+        }
+    }
+    _filter(value) {
+        let filterValue = value;
+        if (filterValue === '') {
+            this.filteredNodes = null;
+        }
+        else {
+            this.filteredNodes = [];
+            const searchFields = this.filterBy.split(',');
+            const filterText = removeAccents(filterValue).toLocaleLowerCase(this.filterLocale);
+            const isStrictMode = this.filterMode === 'strict';
+            for (let node of this.value) {
+                let copyNode = { ...node };
+                let paramsWithoutNode = { searchFields, filterText, isStrictMode };
+                if ((isStrictMode && (this.findFilteredNodes(copyNode, paramsWithoutNode) || this.isFilterMatched(copyNode, paramsWithoutNode))) ||
+                    (!isStrictMode && (this.isFilterMatched(copyNode, paramsWithoutNode) || this.findFilteredNodes(copyNode, paramsWithoutNode)))) {
+                    this.filteredNodes.push(copyNode);
+                }
+            }
+        }
+        this.updateSerializedValue();
+        this.onFilter.emit({
+            filter: filterValue,
+            filteredValue: this.filteredNodes
+        });
+    }
+    /**
+     * Resets filter.
+     * @group Method
+     */
+    resetFilter() {
+        this.filteredNodes = null;
+        if (this.filterViewChild && this.filterViewChild.nativeElement) {
+            this.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) {
+        if (this.virtualScroll) {
+            this.scroller?.scrollTo(options);
+        }
+        else if (this.wrapperViewChild && this.wrapperViewChild.nativeElement) {
+            if (this.wrapperViewChild.nativeElement.scrollTo) {
+                this.wrapperViewChild.nativeElement.scrollTo(options);
+            }
+            else {
+                this.wrapperViewChild.nativeElement.scrollLeft = options.left;
+                this.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];
+    }
+    ngOnDestroy() {
+        if (this.dragStartSubscription) {
+            this.dragStartSubscription.unsubscribe();
+        }
+        if (this.dragStopSubscription) {
+            this.dragStopSubscription.unsubscribe();
+        }
+        super.ngOnDestroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: Tree, deps: [{ token: i3.TreeDragDropService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: Tree, isStandalone: true, selector: "p-tree", inputs: { value: "value", selectionMode: "selectionMode", loadingMode: "loadingMode", selection: "selection", styleClass: "styleClass", contextMenu: "contextMenu", draggableScope: "draggableScope", droppableScope: "droppableScope", draggableNodes: ["draggableNodes", "draggableNodes", booleanAttribute], droppableNodes: ["droppableNodes", "droppableNodes", booleanAttribute], metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], propagateSelectionUp: ["propagateSelectionUp", "propagateSelectionUp", booleanAttribute], propagateSelectionDown: ["propagateSelectionDown", "propagateSelectionDown", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", emptyMessage: "emptyMessage", ariaLabel: "ariaLabel", togglerAriaLabel: "togglerAriaLabel", ariaLabelledBy: "ariaLabelledBy", validateDrop: ["validateDrop", "validateDrop", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterInputAutoFocus: ["filterInputAutoFocus", "filterInputAutoFocus", booleanAttribute], filterBy: "filterBy", filterMode: "filterMode", filterOptions: "filterOptions", filterPlaceholder: "filterPlaceholder", filteredNodes: "filteredNodes", filterLocale: "filterLocale", scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", indentation: ["indentation", "indentation", numberAttribute], _templateMap: "_templateMap", trackBy: "trackBy", highlightOnSelect: ["highlightOnSelect", "highlightOnSelect", booleanAttribute] }, outputs: { selectionChange: "selectionChange", 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)" } }, providers: [TreeStyle], queries: [{ propertyName: "filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "nodeTemplate", first: true, predicate: ["node"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"] }, { propertyName: "emptyMessageTemplate", first: true, predicate: ["empty"] }, { propertyName: "togglerIconTemplate", first: true, predicate: ["togglericon"] }, { propertyName: "checkboxIconTemplate", first: true, predicate: ["checkboxicon"] }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <div [class]="cx('mask')" *ngIf="loading && loadingMode === 'mask'">
+            <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)"></i>
+            <ng-container *ngIf="!loadingIcon">
+                <svg data-p-icon="spinner" *ngIf="!loadingIconTemplate && !_loadingIconTemplate" spin [class]="cx('loadingIcon')" />
+                <span *ngIf="loadingIconTemplate || _loadingIconTemplate" [class]="cx('loadingIcon')">
+                    <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
+                </span>
+            </ng-container>
+        </div>
+        <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
+        @if (filterTemplate || _filterTemplate) {
+            <ng-container *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { $implicit: filterOptions }"></ng-container>
+        } @else {
+            <p-iconfield *ngIf="filter" [class]="cx('pcFilterContainer')">
+                <input
+                    #filter
+                    [pAutoFocus]="filterInputAutoFocus"
+                    pInputText
+                    type="search"
+                    autocomplete="off"
+                    [class]="cx('pcFilterInput')"
+                    [attr.placeholder]="filterPlaceholder"
+                    (keydown.enter)="$event.preventDefault()"
+                    (input)="_filter($event.target?.value)"
+                />
+                <p-inputicon>
+                    <svg data-p-icon="search" *ngIf="!filterIconTemplate && !_filterIconTemplate" [class]="cx('filterIcon')" />
+                    <span *ngIf="filterIconTemplate || _filterIconTemplate" [class]="cx('filterIcon')">
+                        <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
+                    </span>
+                </p-inputicon>
+            </p-iconfield>
+        }
+
+        <ng-container *ngIf="getRootNode()?.length">
+            <p-scroller
+                #scroller
+                *ngIf="virtualScroll"
+                [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"
+            >
+                <ng-template #content let-items let-scrollerOptions="options">
+                    <ul *ngIf="items" #content [class]="cx('rootChildren')" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="tree" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy">
+                        <p-treeNode
+                            #treeNode
+                            *ngFor="let rowNode of items; let firstChild = first; let lastChild = last; let index = index; trackBy: trackBy"
+                            [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"
+                        ></p-treeNode>
+                    </ul>
+                </ng-template>
+                <ng-container *ngIf="loaderTemplate || _loaderTemplate">
+                    <ng-template #loader let-scrollerOptions="options">
+                        <ng-container *ngTemplateOutlet="loaderTemplate || _loaderTemplate; context: { options: scrollerOptions }"></ng-container>
+                    </ng-template>
+                </ng-container>
+            </p-scroller>
+            <ng-container *ngIf="!virtualScroll">
+                <div #wrapper [class]="cx('wrapper')" [style.max-height]="scrollHeight">
+                    <ul #content [class]="cx('rootChildren')" *ngIf="getRootNode()" role="tree" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy">
+                        <p-treeNode
+                            *ngFor="let node of getRootNode(); let firstChild = first; let lastChild = last; let index = index; trackBy: trackBy.bind(this)"
+                            [node]="node"
+                            [firstChild]="firstChild"
+                            [lastChild]="lastChild"
+                            [index]="index"
+                            [level]="0"
+                            [loadingMode]="loadingMode"
+                        ></p-treeNode>
+                    </ul>
+                </div>
+            </ng-container>
+        </ng-container>
+
+        <div [class]="cx('emptyMessage')" *ngIf="!loading && (getRootNode() == null || getRootNode().length === 0)">
+            <ng-container *ngIf="!emptyMessageTemplate && !_emptyMessageTemplate; else emptyFilter">
+                {{ emptyMessageLabel }}
+            </ng-container>
+            <ng-template #emptyFilter *ngTemplateOutlet="emptyMessageTemplate || _emptyMessageTemplate"></ng-template>
+        </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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["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: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type: UITreeNode, selector: "p-treeNode", inputs: ["rowNode", "node", "parentNode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i4.AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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],
+                    template: `
+        <div [class]="cx('mask')" *ngIf="loading && loadingMode === 'mask'">
+            <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)"></i>
+            <ng-container *ngIf="!loadingIcon">
+                <svg data-p-icon="spinner" *ngIf="!loadingIconTemplate && !_loadingIconTemplate" spin [class]="cx('loadingIcon')" />
+                <span *ngIf="loadingIconTemplate || _loadingIconTemplate" [class]="cx('loadingIcon')">
+                    <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
+                </span>
+            </ng-container>
+        </div>
+        <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
+        @if (filterTemplate || _filterTemplate) {
+            <ng-container *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { $implicit: filterOptions }"></ng-container>
+        } @else {
+            <p-iconfield *ngIf="filter" [class]="cx('pcFilterContainer')">
+                <input
+                    #filter
+                    [pAutoFocus]="filterInputAutoFocus"
+                    pInputText
+                    type="search"
+                    autocomplete="off"
+                    [class]="cx('pcFilterInput')"
+                    [attr.placeholder]="filterPlaceholder"
+                    (keydown.enter)="$event.preventDefault()"
+                    (input)="_filter($event.target?.value)"
+                />
+                <p-inputicon>
+                    <svg data-p-icon="search" *ngIf="!filterIconTemplate && !_filterIconTemplate" [class]="cx('filterIcon')" />
+                    <span *ngIf="filterIconTemplate || _filterIconTemplate" [class]="cx('filterIcon')">
+                        <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
+                    </span>
+                </p-inputicon>
+            </p-iconfield>
+        }
+
+        <ng-container *ngIf="getRootNode()?.length">
+            <p-scroller
+                #scroller
+                *ngIf="virtualScroll"
+                [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"
+            >
+                <ng-template #content let-items let-scrollerOptions="options">
+                    <ul *ngIf="items" #content [class]="cx('rootChildren')" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="tree" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy">
+                        <p-treeNode
+                            #treeNode
+                            *ngFor="let rowNode of items; let firstChild = first; let lastChild = last; let index = index; trackBy: trackBy"
+                            [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"
+                        ></p-treeNode>
+                    </ul>
+                </ng-template>
+                <ng-container *ngIf="loaderTemplate || _loaderTemplate">
+                    <ng-template #loader let-scrollerOptions="options">
+                        <ng-container *ngTemplateOutlet="loaderTemplate || _loaderTemplate; context: { options: scrollerOptions }"></ng-container>
+                    </ng-template>
+                </ng-container>
+            </p-scroller>
+            <ng-container *ngIf="!virtualScroll">
+                <div #wrapper [class]="cx('wrapper')" [style.max-height]="scrollHeight">
+                    <ul #content [class]="cx('rootChildren')" *ngIf="getRootNode()" role="tree" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy">
+                        <p-treeNode
+                            *ngFor="let node of getRootNode(); let firstChild = first; let lastChild = last; let index = index; trackBy: trackBy.bind(this)"
+                            [node]="node"
+                            [firstChild]="firstChild"
+                            [lastChild]="lastChild"
+                            [index]="index"
+                            [level]="0"
+                            [loadingMode]="loadingMode"
+                        ></p-treeNode>
+                    </ul>
+                </div>
+            </ng-container>
+        </ng-container>
+
+        <div [class]="cx('emptyMessage')" *ngIf="!loading && (getRootNode() == null || getRootNode().length === 0)">
+            <ng-container *ngIf="!emptyMessageTemplate && !_emptyMessageTemplate; else emptyFilter">
+                {{ emptyMessageLabel }}
+            </ng-container>
+            <ng-template #emptyFilter *ngTemplateOutlet="emptyMessageTemplate || _emptyMessageTemplate"></ng-template>
+        </div>
+        <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
+    `,
+                    changeDetection: ChangeDetectionStrategy.Default,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [TreeStyle],
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass)"
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i3.TreeDragDropService, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { value: [{
+                type: Input
+            }], selectionMode: [{
+                type: Input
+            }], loadingMode: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], contextMenu: [{
+                type: Input
+            }], draggableScope: [{
+                type: Input
+            }], droppableScope: [{
+                type: Input
+            }], draggableNodes: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], droppableNodes: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], metaKeySelection: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], propagateSelectionUp: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], propagateSelectionDown: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], loading: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], loadingIcon: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], togglerAriaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], validateDrop: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], filter: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], filterInputAutoFocus: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], filterBy: [{
+                type: Input
+            }], filterMode: [{
+                type: Input
+            }], filterOptions: [{
+                type: Input
+            }], filterPlaceholder: [{
+                type: Input
+            }], filteredNodes: [{
+                type: Input
+            }], filterLocale: [{
+                type: Input
+            }], scrollHeight: [{
+                type: Input
+            }], lazy: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], virtualScroll: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], virtualScrollItemSize: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], virtualScrollOptions: [{
+                type: Input
+            }], indentation: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], _templateMap: [{
+                type: Input
+            }], trackBy: [{
+                type: Input
+            }], highlightOnSelect: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], selectionChange: [{
+                type: Output
+            }], onNodeSelect: [{
+                type: Output
+            }], onNodeUnselect: [{
+                type: Output
+            }], onNodeExpand: [{
+                type: Output
+            }], onNodeCollapse: [{
+                type: Output
+            }], onNodeContextMenuSelect: [{
+                type: Output
+            }], onNodeDoubleClick: [{
+                type: Output
+            }], onNodeDrop: [{
+                type: Output
+            }], onLazyLoad: [{
+                type: Output
+            }], onScroll: [{
+                type: Output
+            }], onScrollIndexChange: [{
+                type: Output
+            }], onFilter: [{
+                type: Output
+            }], filterTemplate: [{
+                type: ContentChild,
+                args: ['filter', { descendants: false }]
+            }], nodeTemplate: [{
+                type: ContentChild,
+                args: ['node', { descendants: false }]
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: ['header', { descendants: false }]
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: ['footer', { descendants: false }]
+            }], loaderTemplate: [{
+                type: ContentChild,
+                args: ['loader', { descendants: false }]
+            }], emptyMessageTemplate: [{
+                type: ContentChild,
+                args: ['empty', { descendants: false }]
+            }], 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: ViewChild,
+                args: ['filter']
+            }], scroller: [{
+                type: ViewChild,
+                args: ['scroller']
+            }], wrapperViewChild: [{
+                type: ViewChild,
+                args: ['wrapper']
+            }], contentViewChild: [{
+                type: ViewChild,
+                args: ['content']
+            }], templates: [{
+                type: ContentChildren,
+                args: [PrimeTemplate]
+            }], handleDropEvent: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }], handleDragOverEvent: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], handleDragEnterEvent: [{
+                type: HostListener,
+                args: ['dragenter']
+            }], handleDragLeaveEvent: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }] } });
+class TreeModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule], exports: [Tree, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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=primeng-tree.mjs.map