primeng 19.1.3 → 20.0.0-beta.1

package/fesm2022/primeng-tree.mjs

@@ -1,12 +1,14 @@
 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, ContentChildren, ViewChild, ContentChild, Output, Optional, ChangeDetectionStrategy, NgModule } 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';
@@ -15,250 +17,27 @@ 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';
-import * as i4 from 'primeng/autofocus';
-import { AutoFocusModule } from 'primeng/autofocus';
-
-const theme = ({ dt }) => `
-.p-tree {
-    background: ${dt('tree.background')};
-    color: ${dt('tree.color')};
-    padding: ${dt('tree.padding')};
-}
-
-.p-tree-root-children,
-.p-tree-node-children {
-    display: flex;
-    list-style-type: none;
-    flex-direction: column;
-    margin: 0;
-    gap: ${dt('tree.gap')};
-}
-
-.p-tree-root-children {
-    padding: 0;
-    padding-block-start: ${dt('tree.gap')};
-}
-
-.p-tree-node-children {
-    padding-block-start: ${dt('tree.gap')};
-    padding-inline-start: ${dt('tree.indent')};
-}
-
-.p-tree-node {
-    padding: 0;
-    outline: 0 none;
-}
-
-.p-tree-node-content {
-    border-radius: ${dt('tree.node.border.radius')};
-    padding: ${dt('tree.node.padding')};
-    display: flex;
-    align-items: center;
-    outline-color: transparent;
-    color: ${dt('tree.node.color')};
-    gap: ${dt('tree.node.gap')};
-    transition: background ${dt('tree.transition.duration')}, color ${dt('tree.transition.duration')}, outline-color ${dt('tree.transition.duration')}, box-shadow ${dt('tree.transition.duration')};
-}
-
-.p-tree-node:focus-visible > .p-tree-node-content {
-    box-shadow: ${dt('tree.node.focus.ring.shadow')};
-    outline: ${dt('tree.node.focus.ring.width')} ${dt('tree.node.focus.ring.style')} ${dt('tree.node.focus.ring.color')};
-    outline-offset: ${dt('tree.node.focus.ring.offset')};
-}
-
-.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover {
-    background: ${dt('tree.node.hover.background')};
-    color: ${dt('tree.node.hover.color')};
-}
-
-.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-icon {
-    color: ${dt('tree.node.icon.hover.color')};
-}
-
-.p-tree-node-content.p-tree-node-selected {
-    background: ${dt('tree.node.selected.background')};
-    color: ${dt('tree.node.selected.color')};
-}
-
-.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button {
-    color: inherit;
-}
-
-.p-tree-node-toggle-button {
-    cursor: pointer;
-    user-select: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-    flex-shrink: 0;
-    width: ${dt('tree.node.toggle.button.size')};
-    height: ${dt('tree.node.toggle.button.size')};
-    color: ${dt('tree.node.toggle.button.color')};
-    border: 0 none;
-    background: transparent;
-    border-radius: ${dt('tree.node.toggle.button.border.radius')};
-    transition: background ${dt('tree.transition.duration')}, color ${dt('tree.transition.duration')}, border-color ${dt('tree.transition.duration')}, outline-color ${dt('tree.transition.duration')}, box-shadow ${dt('tree.transition.duration')};
-    outline-color: transparent;
-    padding: 0;
-}
-
-.p-tree-node-toggle-button:enabled:hover {
-    background: ${dt('tree.node.toggle.button.hover.background')};
-    color: ${dt('tree.node.toggle.button.hover.color')};
-}
-
-.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button:hover {
-    background: ${dt('tree.node.toggle.button.selected.hover.background')};
-    color: ${dt('tree.node.toggle.button.selected.hover.color')};
-}
-
-.p-tree-root {
-    overflow: auto;
-}
-
-.p-tree-node-selectable {
-    cursor: pointer;
-    user-select: none;
-}
-
-.p-tree-node-leaf > .p-tree-node-content .p-tree-node-toggle-button {
-    visibility: hidden;
-}
-
-.p-tree-node-icon {
-    color: ${dt('tree.node.icon.color')};
-    transition: color ${dt('tree.transition.duration')};
-}
-
-.p-tree-node-content.p-tree-node-selected .p-tree-node-icon {
-    color: ${dt('tree.node.icon.selected.color')};
-}
-
-.p-tree-filter-input {
-    width: 100%;
-}
-
-.p-tree-loading {
-    position: relative;
-    height: 100%;
-}
-
-.p-tree-loading-icon {
-    font-size: ${dt('tree.loading.icon.size')};
-    width: ${dt('tree.loading.icon.size')};
-    height: ${dt('tree.loading.icon.size')};
-}
-
-.p-tree .p-tree-mask {
-    position: absolute;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-tree-flex-scrollable {
-    display: flex;
-    flex: 1;
-    height: 100%;
-    flex-direction: column;
-}
-
-.p-tree-flex-scrollable .p-tree-root {
-    flex: 1;
-}
-
-/* For PrimeNG */
-.p-tree .p-tree-node-droppoint {
-    height: 4px;
-    list-style-type: none;
-}
-
-.p-tree .p-tree-node-droppoint-active {
-    border: 0 none;
-    background-color: ${dt('primary.color')};
-}
-
-.p-tree-node-content.p-tree-node-dragover {
-    background: ${dt('tree.node.hover.background')};
-    color: ${dt('tree.node.hover.color')};
-}
-
-.p-tree-node-content.p-tree-node-dragover .p-tree-node-icon {
-    color: ${dt('tree.node.icon.hover.color')};
-}
-
-.p-tree-horizontal {
-    width: auto;
-    padding-inline-start: 0;
-    padding-inline-end: 0;
-    overflow: auto;
-}
 
-.p-tree.p-tree-horizontal table,
-.p-tree.p-tree-horizontal tr,
-.p-tree.p-tree-horizontal td {
-    border-collapse: collapse;
-    margin: 0;
-    padding: 0;
-    vertical-align: middle;
-}
-
-.p-tree-horizontal .p-tree-node-content {
-    font-weight: normal;
-    padding: 0.4em 1em 0.4em 0.2em;
-    display: flex;
-    align-items: center;
-}
-
-.p-tree-horizontal .p-tree-node-parent .p-tree-node-content {
-    font-weight: normal;
-    white-space: nowrap;
-}
-
-.p-tree.p-tree-horizontal .p-tree-node.p-tree-node-leaf,
-.p-tree.p-tree-horizontal .p-tree-node.p-tree-node-collapsed {
-    padding-inline-end: 0;
-}
-
-.p-tree.p-tree-horizontal .p-tree-node-children {
-    padding: 0;
-    margin: 0;
-}
-
-.p-tree.p-tree-horizontal .p-tree-node-connector {
-    width: 1px;
-}
-
-.p-tree.p-tree-horizontal .p-tree-node-connector-table {
-    height: 100%;
-    width: 1px;
-}
-
-.p-tree.p-tree-horizontal table {
-    height: 0;
-}
-`;
 const classes = {
-    root: ({ instance }) => ({
-        'p-tree p-component': true,
-        'p-tree-selectable': instance.selectionMode != null,
-        'p-tree-loading': instance.loading,
-        'p-tree-flex-scrollable': instance.scrollHeight === 'flex',
-        'p-tree-node-dragover': instance.dragHover
-    }),
+    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', //TODO: discuss
+    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,
-        [instance.styleClass]: !!instance.styleClass,
         '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
@@ -268,16 +47,18 @@ const classes = {
     nodeCheckbox: 'p-tree-node-checkbox',
     nodeIcon: 'p-tree-node-icon',
     nodeLabel: 'p-tree-node-label',
-    nodeChildren: 'p-tree-node-children'
+    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 = theme;
+    theme = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -347,6 +128,14 @@ var TreeClasses;
      * 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 {
@@ -367,6 +156,7 @@ class UITreeNode extends BaseComponent {
     draghoverPrev;
     draghoverNext;
     draghoverNode;
+    _componentStyle = inject(TreeStyle);
     get selected() {
         return this.tree.selectionMode === 'single' || this.tree.selectionMode === 'multiple' ? this.isSelected() : undefined;
     }
@@ -376,9 +166,6 @@ class UITreeNode extends BaseComponent {
     get nodeClass() {
         return this.tree._componentStyle.classes.node({ instance: this });
     }
-    get nodeContentClass() {
-        return this.tree._componentStyle.classes.nodeContent({ instance: this });
-    }
     get selectable() {
         return this.node.selectable === false ? false : this.tree.selectionMode != null;
     }
@@ -781,26 +568,24 @@ class UITreeNode extends BaseComponent {
     }
     focusVirtualNode() {
         this.timeout = setTimeout(() => {
-            let node = findSingle(document.body, `[data-id="${this.node?.key ?? this.node?.data}"]`);
+            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: "19.2.10", ngImport: i0, type: UITreeNode, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UITreeNode, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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="p-tree-node-droppoint"
+                [class]="cx('dropPoint', { param: draghoverPrev })"
                 [attr.aria-hidden]="true"
-                [ngClass]="{ 'p-tree-node-droppoint-active': draghoverPrev }"
                 (drop)="onDropPoint($event, -1)"
                 (dragover)="onDropPointDragOver($event)"
                 (dragenter)="onDropPointDragEnter($event, -1)"
                 (dragleave)="onDropPointDragLeave($event)"
             ></li>
             <li
-                [ngClass]="nodeClass"
-                [class]="node.styleClass"
+                [class]="cn(cx('node'), node.styleClass)"
                 [ngStyle]="{ height: itemSize + 'px' }"
                 [style]="node.style"
                 [attr.aria-label]="node.label"
@@ -816,7 +601,7 @@ class UITreeNode extends BaseComponent {
                 (keydown)="onKeyDown($event)"
             >
                 <div
-                    [ngClass]="nodeContentClass"
+                    [class]="cx('nodeContent')"
                     [style.paddingLeft]="level * indentation + 'rem'"
                     (click)="onNodeClick($event)"
                     (contextmenu)="onNodeRightClick($event)"
@@ -830,24 +615,24 @@ class UITreeNode extends BaseComponent {
                     (dragstart)="onDragStart($event)"
                     (dragend)="onDragStop($event)"
                 >
-                    <button type="button" [attr.data-pc-section]="'toggler'" class="p-tree-node-toggle-button" (click)="toggle($event)" pRipple tabindex="-1">
+                    <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">
-                                <ChevronRightIcon *ngIf="!node.expanded" [styleClass]="'p-tree-node-toggle-icon'" />
-                                <ChevronDownIcon *ngIf="node.expanded" [styleClass]="'p-tree-node-toggle-icon'" />
+                                <ChevronRightIcon *ngIf="!node.expanded" [styleClass]="cx('nodeToggleIcon')" />
+                                <ChevronDownIcon *ngIf="node.expanded" [styleClass]="cx('nodeToggleIcon')" />
                             </ng-container>
                             <ng-container *ngIf="loadingMode === 'icon' && node.loading">
-                                <SpinnerIcon [styleClass]="'pi-spin p-tree-node-toggle-icon'" />
+                                <SpinnerIcon [styleClass]="cn(cx('nodeToggleIcon'), 'pi-spin')" />
                             </ng-container>
                         </ng-container>
-                        <span *ngIf="tree.togglerIconTemplate || tree._togglerIconTemplate" class="p-tree-node-toggle-icon">
+                        <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="p-tree-node-checkbox"
+                        [styleClass]="cx('nodeCheckbox')"
                         [binary]="true"
                         [indeterminate]="node.partialSelected"
                         *ngIf="tree.selectionMode == 'checkbox'"
@@ -865,7 +650,7 @@ class UITreeNode extends BaseComponent {
                                         context: {
                                             $implicit: isSelected(),
                                             partialSelected: node.partialSelected,
-                                            class: 'p-tree-node-checkbox'
+                                            class: cx('nodeCheckbox')
                                         }
                                     "
                                 ></ng-template>
@@ -874,14 +659,14 @@ class UITreeNode extends BaseComponent {
                     </p-checkbox>
 
                     <span [class]="getIcon()" *ngIf="node.icon || node.expandedIcon || node.collapsedIcon"></span>
-                    <span class="p-tree-node-label">
+                    <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="p-tree-node-children" style="display: none;" *ngIf="!tree.virtualScroll && node.children && node.expanded" [style.display]="node.expanded ? 'flex' : 'none'" role="group">
+                <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"
@@ -898,8 +683,7 @@ class UITreeNode extends BaseComponent {
 
             <li
                 *ngIf="tree.droppableNodes && lastChild"
-                class="p-tree-node-droppoint"
-                [ngClass]="{ 'p-tree-node-droppoint-active': draghoverNext }"
+                [class]="cx('dropPoint', { param: draghoverNext })"
                 (drop)="onDropPoint($event, 1)"
                 [attr.aria-hidden]="true"
                 (dragover)="onDropPointDragOver($event)"
@@ -907,9 +691,9 @@ class UITreeNode extends BaseComponent {
                 (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.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: "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", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], 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: "ChevronRightIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: SpinnerIcon, selector: "SpinnerIcon" }, { kind: "ngmodule", type: SharedModule }], encapsulation: i0.ViewEncapsulation.None });
+    `, 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: "ChevronRightIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: SpinnerIcon, selector: "SpinnerIcon" }, { kind: "ngmodule", type: SharedModule }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: UITreeNode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UITreeNode, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeNode',
@@ -919,17 +703,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         @if (node) {
             <li
                 *ngIf="tree.droppableNodes"
-                class="p-tree-node-droppoint"
+                [class]="cx('dropPoint', { param: draghoverPrev })"
                 [attr.aria-hidden]="true"
-                [ngClass]="{ 'p-tree-node-droppoint-active': draghoverPrev }"
                 (drop)="onDropPoint($event, -1)"
                 (dragover)="onDropPointDragOver($event)"
                 (dragenter)="onDropPointDragEnter($event, -1)"
                 (dragleave)="onDropPointDragLeave($event)"
             ></li>
             <li
-                [ngClass]="nodeClass"
-                [class]="node.styleClass"
+                [class]="cn(cx('node'), node.styleClass)"
                 [ngStyle]="{ height: itemSize + 'px' }"
                 [style]="node.style"
                 [attr.aria-label]="node.label"
@@ -945,7 +727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 (keydown)="onKeyDown($event)"
             >
                 <div
-                    [ngClass]="nodeContentClass"
+                    [class]="cx('nodeContent')"
                     [style.paddingLeft]="level * indentation + 'rem'"
                     (click)="onNodeClick($event)"
                     (contextmenu)="onNodeRightClick($event)"
@@ -959,24 +741,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     (dragstart)="onDragStart($event)"
                     (dragend)="onDragStop($event)"
                 >
-                    <button type="button" [attr.data-pc-section]="'toggler'" class="p-tree-node-toggle-button" (click)="toggle($event)" pRipple tabindex="-1">
+                    <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">
-                                <ChevronRightIcon *ngIf="!node.expanded" [styleClass]="'p-tree-node-toggle-icon'" />
-                                <ChevronDownIcon *ngIf="node.expanded" [styleClass]="'p-tree-node-toggle-icon'" />
+                                <ChevronRightIcon *ngIf="!node.expanded" [styleClass]="cx('nodeToggleIcon')" />
+                                <ChevronDownIcon *ngIf="node.expanded" [styleClass]="cx('nodeToggleIcon')" />
                             </ng-container>
                             <ng-container *ngIf="loadingMode === 'icon' && node.loading">
-                                <SpinnerIcon [styleClass]="'pi-spin p-tree-node-toggle-icon'" />
+                                <SpinnerIcon [styleClass]="cn(cx('nodeToggleIcon'), 'pi-spin')" />
                             </ng-container>
                         </ng-container>
-                        <span *ngIf="tree.togglerIconTemplate || tree._togglerIconTemplate" class="p-tree-node-toggle-icon">
+                        <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="p-tree-node-checkbox"
+                        [styleClass]="cx('nodeCheckbox')"
                         [binary]="true"
                         [indeterminate]="node.partialSelected"
                         *ngIf="tree.selectionMode == 'checkbox'"
@@ -994,7 +776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                                         context: {
                                             $implicit: isSelected(),
                                             partialSelected: node.partialSelected,
-                                            class: 'p-tree-node-checkbox'
+                                            class: cx('nodeCheckbox')
                                         }
                                     "
                                 ></ng-template>
@@ -1003,14 +785,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     </p-checkbox>
 
                     <span [class]="getIcon()" *ngIf="node.icon || node.expandedIcon || node.collapsedIcon"></span>
-                    <span class="p-tree-node-label">
+                    <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="p-tree-node-children" style="display: none;" *ngIf="!tree.virtualScroll && node.children && node.expanded" [style.display]="node.expanded ? 'flex' : 'none'" role="group">
+                <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"
@@ -1027,8 +809,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 
             <li
                 *ngIf="tree.droppableNodes && lastChild"
-                class="p-tree-node-droppoint"
-                [ngClass]="{ 'p-tree-node-droppoint-active': draghoverNext }"
+                [class]="cx('dropPoint', { param: draghoverNext })"
                 (drop)="onDropPoint($event, 1)"
                 [attr.aria-hidden]="true"
                 (dragover)="onDropPointDragOver($event)"
@@ -1037,7 +818,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             ></li>
         }
     `,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [TreeStyle]
                 }]
         }], propDecorators: { rowNode: [{
                 type: Input
@@ -1095,13 +877,9 @@ class Tree extends BaseComponent {
      * @group Props
      */
     selection;
-    /**
-     * Inline style of the component.
-     * @group Props
-     */
-    style;
     /**
      * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -1265,19 +1043,6 @@ class Tree extends BaseComponent {
      * @group Props
      */
     highlightOnSelect = false;
-    /**
-     * Height of the node.
-     * @group Props
-     * @deprecated use virtualScrollItemSize property instead.
-     */
-    _virtualNodeHeight;
-    get virtualNodeHeight() {
-        return this._virtualNodeHeight;
-    }
-    set virtualNodeHeight(val) {
-        this._virtualNodeHeight = val;
-        console.log('The virtualNodeHeight property is deprecated, use virtualScrollItemSize property instead.');
-    }
     /**
      * Callback to invoke on selection change.
      * @param {(TreeNode<any> | TreeNode<any>[] | null)} event - Custom selection change event.
@@ -1403,6 +1168,7 @@ class Tree extends BaseComponent {
     filterViewChild;
     scroller;
     wrapperViewChild;
+    contentViewChild;
     templates;
     _headerTemplate;
     _emptyMessageTemplate;
@@ -1463,6 +1229,18 @@ class Tree extends BaseComponent {
     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;
@@ -1502,9 +1280,6 @@ class Tree extends BaseComponent {
             }
         }
     }
-    get containerClass() {
-        return this._componentStyle.classes.root({ instance: this });
-    }
     get emptyMessageLabel() {
         return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
     }
@@ -2005,221 +1780,220 @@ class Tree extends BaseComponent {
         }
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Tree, deps: [{ token: i3.TreeDragDropService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: Tree, isStandalone: true, selector: "p-tree", inputs: { value: "value", selectionMode: "selectionMode", loadingMode: "loadingMode", selection: "selection", style: "style", 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], virtualNodeHeight: "virtualNodeHeight" }, 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" }, 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 }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-        <div [ngClass]="containerClass" [ngStyle]="style" [class]="styleClass" (drop)="onDrop($event)" (dragover)="onDragOver($event)" (dragenter)="onDragEnter()" (dragleave)="onDragLeave($event)">
-            <div class="p-tree-mask p-overlay-mask" *ngIf="loading && loadingMode === 'mask'">
-                <i *ngIf="loadingIcon" [class]="'p-tree-loading-icon pi-spin ' + loadingIcon"></i>
-                <ng-container *ngIf="!loadingIcon">
-                    <SpinnerIcon *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [styleClass]="'p-tree-loading-icon'" />
-                    <span *ngIf="loadingIconTemplate || _loadingIconTemplate" class="p-tree-loading-icon">
-                        <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Tree, deps: [{ token: i3.TreeDragDropService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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">
+                <SpinnerIcon *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [styleClass]="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>
+                    <SearchIcon *ngIf="!filterIconTemplate && !_filterIconTemplate" [class]="cx('filterIcon')" />
+                    <span *ngIf="filterIconTemplate || _filterIconTemplate" [class]="cx('filterIcon')">
+                        <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></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">
-                    <input
-                        #filter
-                        [pAutoFocus]="filterInputAutoFocus"
-                        pInputText
-                        type="search"
-                        autocomplete="off"
-                        class="p-tree-filter-input"
-                        [attr.placeholder]="filterPlaceholder"
-                        (keydown.enter)="$event.preventDefault()"
-                        (input)="_filter($event.target.value)"
-                    />
-                    <p-inputIcon>
-                        <SearchIcon *ngIf="!filterIconTemplate && !_filterIconTemplate" class="p-tree-filter-icon" />
-                        <span *ngIf="filterIconTemplate || _filterIconTemplate">
-                            <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
-                        </span>
-                    </p-inputIcon>
-                </p-iconField>
-            }
+                </p-inputicon>
+            </p-iconfield>
+        }
 
-            <ng-container *ngIf="getRootNode()?.length">
-                <p-scroller
-                    #scroller
-                    *ngIf="virtualScroll"
-                    [items]="serializedValue"
-                    [tabindex]="-1"
-                    styleClass="p-tree-root"
-                    [style]="{ height: scrollHeight !== 'flex' ? scrollHeight : undefined }"
-                    [scrollHeight]="scrollHeight !== 'flex' ? undefined : '100%'"
-                    [itemSize]="virtualScrollItemSize || _virtualNodeHeight"
-                    [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" class="p-tree-root-children" [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-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 *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="p-tree-root" [style.max-height]="scrollHeight">
-                        <ul class="p-tree-root-children" *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>
+            </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="p-tree-empty-message" *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>
+        <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>
-    `, 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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "SearchIcon" }, { kind: "component", type: SpinnerIcon, selector: "SpinnerIcon" }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { 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: ["autofocus", "pAutoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+        <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: "SearchIcon" }, { kind: "component", type: SpinnerIcon, selector: "SpinnerIcon" }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid"] }, { 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: "19.2.10", ngImport: i0, type: Tree, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", 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 [ngClass]="containerClass" [ngStyle]="style" [class]="styleClass" (drop)="onDrop($event)" (dragover)="onDragOver($event)" (dragenter)="onDragEnter()" (dragleave)="onDragLeave($event)">
-            <div class="p-tree-mask p-overlay-mask" *ngIf="loading && loadingMode === 'mask'">
-                <i *ngIf="loadingIcon" [class]="'p-tree-loading-icon pi-spin ' + loadingIcon"></i>
-                <ng-container *ngIf="!loadingIcon">
-                    <SpinnerIcon *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [styleClass]="'p-tree-loading-icon'" />
-                    <span *ngIf="loadingIconTemplate || _loadingIconTemplate" class="p-tree-loading-icon">
-                        <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
+        <div [class]="cx('mask')" *ngIf="loading && loadingMode === 'mask'">
+            <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)"></i>
+            <ng-container *ngIf="!loadingIcon">
+                <SpinnerIcon *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [styleClass]="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>
+                    <SearchIcon *ngIf="!filterIconTemplate && !_filterIconTemplate" [class]="cx('filterIcon')" />
+                    <span *ngIf="filterIconTemplate || _filterIconTemplate" [class]="cx('filterIcon')">
+                        <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></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">
-                    <input
-                        #filter
-                        [pAutoFocus]="filterInputAutoFocus"
-                        pInputText
-                        type="search"
-                        autocomplete="off"
-                        class="p-tree-filter-input"
-                        [attr.placeholder]="filterPlaceholder"
-                        (keydown.enter)="$event.preventDefault()"
-                        (input)="_filter($event.target.value)"
-                    />
-                    <p-inputIcon>
-                        <SearchIcon *ngIf="!filterIconTemplate && !_filterIconTemplate" class="p-tree-filter-icon" />
-                        <span *ngIf="filterIconTemplate || _filterIconTemplate">
-                            <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
-                        </span>
-                    </p-inputIcon>
-                </p-iconField>
-            }
+                </p-inputicon>
+            </p-iconfield>
+        }
 
-            <ng-container *ngIf="getRootNode()?.length">
-                <p-scroller
-                    #scroller
-                    *ngIf="virtualScroll"
-                    [items]="serializedValue"
-                    [tabindex]="-1"
-                    styleClass="p-tree-root"
-                    [style]="{ height: scrollHeight !== 'flex' ? scrollHeight : undefined }"
-                    [scrollHeight]="scrollHeight !== 'flex' ? undefined : '100%'"
-                    [itemSize]="virtualScrollItemSize || _virtualNodeHeight"
-                    [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" class="p-tree-root-children" [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-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 *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="p-tree-root" [style.max-height]="scrollHeight">
-                        <ul class="p-tree-root-children" *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>
+            </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="p-tree-empty-message" *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>
+        <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]
+                    providers: [TreeStyle],
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass)"
+                    }
                 }]
         }], ctorParameters: () => [{ type: i3.TreeDragDropService, decorators: [{
                     type: Optional
@@ -2231,8 +2005,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Input
             }], selection: [{
                 type: Input
-            }], style: [{
-                type: Input
             }], styleClass: [{
                 type: Input
             }], contextMenu: [{
@@ -2313,8 +2085,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], highlightOnSelect: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], virtualNodeHeight: [{
-                type: Input
             }], selectionChange: [{
                 type: Output
             }], onNodeSelect: [{
@@ -2378,16 +2148,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], 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: "19.2.10", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule], exports: [Tree, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule], exports: [Tree, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Tree, SharedModule],