primeng 20.2.0 → 20.3.0-rc.1

package/fesm2022/primeng-tree.mjs

@@ -1,15 +1,18 @@
+export * from 'primeng/types/tree';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, forwardRef, signal, computed, numberAttribute, booleanAttribute, Input, ViewEncapsulation, Component, EventEmitter, HostListener, ContentChildren, ViewChild, ContentChild, Output, Optional, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, inject, forwardRef, signal, computed, numberAttribute, booleanAttribute, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, HostListener, ContentChildren, ViewChild, ContentChild, Output, Optional, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { getOuterWidth, getOuterHeight, find, hasClass, findSingle, focus, removeAccents, resolveFieldData } from '@primeuix/utils';
-import * as i3 from 'primeng/api';
+import * as i4 from 'primeng/api';
 import { SharedModule, TranslationKeys, PrimeTemplate } from 'primeng/api';
-import * as i4 from 'primeng/autofocus';
+import * as i5 from 'primeng/autofocus';
 import { AutoFocusModule } from 'primeng/autofocus';
-import { BaseComponent } from 'primeng/basecomponent';
+import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
+import * as i3 from 'primeng/bind';
+import { BindModule, Bind } from 'primeng/bind';
 import { Checkbox } from 'primeng/checkbox';
 import { IconField } from 'primeng/iconfield';
 import { ChevronRightIcon, ChevronDownIcon, SpinnerIcon, SearchIcon } from 'primeng/icons';
@@ -53,12 +56,12 @@ const classes = {
 };
 class TreeStyle extends BaseStyle {
     name = 'tree';
-    theme = style;
+    style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TreeStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TreeStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TreeStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -138,7 +141,10 @@ var TreeClasses;
     TreeClasses["dropPoint"] = "p-tree-node-droppoint";
 })(TreeClasses || (TreeClasses = {}));
 
+const TREE_INSTANCE = new InjectionToken('TREE_INSTANCE');
+const TREENODE_INSTANCE = new InjectionToken('TREENODE_INSTANCE');
 class UITreeNode extends BaseComponent {
+    $pcTreeNode = inject(TREENODE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
     static ICON_CLASS = 'p-tree-node-icon ';
     rowNode;
     node;
@@ -176,8 +182,20 @@ class UITreeNode extends BaseComponent {
     get subNodes() {
         return this.node?.parent ? this.node.parent.children : this.tree.value;
     }
-    ngOnInit() {
-        super.ngOnInit();
+    getPTOptions(key) {
+        return this.ptm(key, {
+            context: {
+                node: this.node,
+                index: this.index,
+                expanded: this.node?.expanded,
+                selected: this.selected,
+                checked: this.checked,
+                partialChecked: this.node?.partialSelected,
+                leaf: this.isLeaf()
+            }
+        });
+    }
+    onInit() {
         this.node.parent = this.parentNode;
         const nativeElement = this.tree.el.nativeElement;
         const pDialogWrapper = nativeElement.closest('p-dialog');
@@ -261,17 +279,17 @@ class UITreeNode extends BaseComponent {
             return;
         }
         const position = this.dropPosition();
-        let subNodes = this.subNodes || [];
+        const subNodes = this.subNodes || [];
+        const index = this.index || 0;
+        const dropIndex = dragNodeSubNodes === subNodes ? (dragNodeIndex > index ? index : index - 1) : index;
         dragNodeSubNodes.splice(dragNodeIndex, 1);
         if (position < 0) {
             // insert before a Node
-            const index = this.index || 0;
-            const dropIndex = dragNodeSubNodes === subNodes ? (dragNodeIndex > index ? index : index - 1) : index;
             subNodes.splice(dropIndex, 0, dragNode);
         }
         else if (position > 0) {
             // insert after a Node
-            subNodes.push(dragNode);
+            subNodes.splice(dropIndex + 1, 0, dragNode);
         }
         else {
             // insert as child of a Node
@@ -320,11 +338,12 @@ class UITreeNode extends BaseComponent {
     }
     onNodeDragStart(event) {
         if (this.isNodeDraggable()) {
+            event.dataTransfer.effectAllowed = 'all';
             event.dataTransfer?.setData('text', 'data');
             const target = event.currentTarget;
             const dragEl = target.cloneNode(true);
-            const toggler = dragEl.querySelector('[data-pc-section="toggler"]');
-            const checkbox = dragEl.querySelector('[data-pc-name="checkbox"]');
+            const toggler = dragEl.querySelector('[data-pc-section="nodetogglebutton"]');
+            const checkbox = dragEl.querySelector('[data-pc-name="pcnodecheckbox"]');
             target.setAttribute('data-p-dragging', 'true');
             dragEl.style.width = getOuterWidth(target) + 'px';
             dragEl.style.height = getOuterHeight(target) + 'px';
@@ -347,11 +366,11 @@ class UITreeNode extends BaseComponent {
         }
     }
     onNodeDragOver(event) {
-        event.dataTransfer.dropEffect = 'move';
         if (this.isDroppable()) {
+            event.dataTransfer.dropEffect = 'copy';
             const nodeElement = event.currentTarget;
             const rect = nodeElement.getBoundingClientRect();
-            const y = event.clientY - rect.top;
+            const y = event.clientY - parseInt(rect.top);
             this.isPrevDropPointHovered.set(false);
             this.isNextDropPointHovered.set(false);
             this.isNodeDropHovered.set(false);
@@ -365,6 +384,9 @@ class UITreeNode extends BaseComponent {
                 this.isNodeDropHovered.set(true);
             }
         }
+        else {
+            event.dataTransfer.dropEffect = 'none';
+        }
         if (this.tree.droppableNodes) {
             event.preventDefault();
             event.stopPropagation();
@@ -420,7 +442,7 @@ class UITreeNode extends BaseComponent {
         }
     }
     onArrowUp(event) {
-        const nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target.parentElement;
+        const nodeElement = event.target.getAttribute('data-pc-section') === 'nodetogglebutton' ? event.target.closest('[role="treeitem"]') : event.target.parentElement;
         if (nodeElement?.previousElementSibling) {
             this.focusRowChange(nodeElement, nodeElement.previousElementSibling, this.findLastVisibleDescendant(nodeElement.previousElementSibling));
         }
@@ -433,7 +455,7 @@ class UITreeNode extends BaseComponent {
         event.preventDefault();
     }
     onArrowDown(event) {
-        const nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target;
+        const nodeElement = event.target.getAttribute('data-pc-section') === 'nodetogglebutton' ? event.target.closest('[role="treeitem"]') : event.target;
         const listElement = nodeElement?.children[1];
         if (listElement && listElement.children.length > 0) {
             this.focusRowChange(nodeElement, listElement.children[0]);
@@ -462,7 +484,7 @@ class UITreeNode extends BaseComponent {
         event.preventDefault();
     }
     onArrowLeft(event) {
-        const nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target;
+        const nodeElement = event.target.getAttribute('data-pc-section') === 'nodetogglebutton' ? event.target.closest('[role="treeitem"]') : event.target;
         if (this.level === 0 && !this.node?.expanded) {
             return false;
         }
@@ -549,8 +571,8 @@ class UITreeNode extends BaseComponent {
             focus(node);
         }, 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UITreeNode, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UITreeNode, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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, { provide: TREENODE_INSTANCE, useExisting: UITreeNode }, { provide: PARENT_INSTANCE, useExisting: UITreeNode }], usesInheritance: true, ngImport: i0, template: `
         @if (node) {
             <li
                 [class]="cn(cx('node'), node.styleClass)"
@@ -567,9 +589,10 @@ class UITreeNode extends BaseComponent {
                 [attr.data-id]="node.key"
                 role="treeitem"
                 (keydown)="onKeyDown($event)"
+                [pBind]="getPTOptions('node')"
             >
                 @if (isPrevDropPointActive()) {
-                    <div [class]="cx('dropPoint')" [attr.aria-hidden]="true"></div>
+                    <div [class]="cx('dropPoint')" [attr.aria-hidden]="true" [pBind]="getPTOptions('dropPoint')"></div>
                 }
                 <div
                     [class]="cx('nodeContent')"
@@ -584,18 +607,19 @@ class UITreeNode extends BaseComponent {
                     (dragleave)="onNodeDragLeave($event)"
                     (dragend)="onNodeDragEnd($event)"
                     [draggable]="tree.draggableNodes"
+                    [pBind]="getPTOptions('nodeContent')"
                 >
-                    <button type="button" [attr.data-pc-section]="'toggler'" [class]="cx('nodeToggleButton')" (click)="toggle($event)" pRipple tabindex="-1">
+                    <button type="button" [class]="cx('nodeToggleButton')" (click)="toggle($event)" pRipple tabindex="-1" [pBind]="getPTOptions('nodeToggleButton')">
                         <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')" />
+                                <svg data-p-icon="chevron-right" *ngIf="!node.expanded" [class]="cx('nodeToggleIcon')" [pBind]="getPTOptions('nodeToggleIcon')" />
+                                <svg data-p-icon="chevron-down" *ngIf="node.expanded" [class]="cx('nodeToggleIcon')" [pBind]="getPTOptions('nodeToggleIcon')" />
                             </ng-container>
                             <ng-container *ngIf="loadingMode === 'icon' && node.loading">
-                                <svg data-p-icon="spinner" [class]="cx('nodeToggleIcon')" spin />
+                                <svg data-p-icon="spinner" [class]="cx('nodeToggleIcon')" spin [pBind]="getPTOptions('nodeToggleIcon')" />
                             </ng-container>
                         </ng-container>
-                        <span *ngIf="tree.togglerIconTemplate || tree._togglerIconTemplate" [class]="cx('nodeToggleIcon')">
+                        <span *ngIf="tree.togglerIconTemplate || tree._togglerIconTemplate" [class]="cx('nodeToggleIcon')" [pBind]="getPTOptions('nodeToggleIcon')">
                             <ng-template *ngTemplateOutlet="tree.togglerIconTemplate || tree._togglerIconTemplate; context: { $implicit: node.expanded, loading: node.loading }"></ng-template>
                         </span>
                     </button>
@@ -611,6 +635,7 @@ class UITreeNode extends BaseComponent {
                         [attr.data-p-partialchecked]="node.partialSelected"
                         [tabindex]="-1"
                         (click)="$event.preventDefault()"
+                        [pt]="getPTOptions('pcNodeCheckbox')"
                     >
                         <ng-container *ngIf="tree.checkboxIconTemplate || tree._checkboxIconTemplate">
                             <ng-template #icon>
@@ -628,8 +653,8 @@ class UITreeNode extends BaseComponent {
                         </ng-container>
                     </p-checkbox>
 
-                    <span [class]="getIcon()" *ngIf="node.icon || node.expandedIcon || node.collapsedIcon"></span>
-                    <span [class]="cx('nodeLabel')">
+                    <span [class]="getIcon()" *ngIf="node.icon || node.expandedIcon || node.collapsedIcon" [pBind]="getPTOptions('nodeIcon')"></span>
+                    <span [class]="cx('nodeLabel')" [pBind]="getPTOptions('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>
@@ -637,9 +662,9 @@ class UITreeNode extends BaseComponent {
                     </span>
                 </div>
                 @if (isNextDropPointActive()) {
-                    <div [class]="cx('dropPoint')" [attr.aria-hidden]="true"></div>
+                    <div [class]="cx('dropPoint')" [attr.aria-hidden]="true" [pBind]="getPTOptions('dropPoint')"></div>
                 }
-                <ul [class]="cx('nodeChildren')" *ngIf="!tree.virtualScroll && node.children && node.expanded" role="group">
+                <ul [class]="cx('nodeChildren')" *ngIf="!tree.virtualScroll && node.children && node.expanded" role="group" [pBind]="ptm('nodeChildren')">
                     <p-treeNode
                         *ngFor="let childNode of node.children; let firstChild = first; let lastChild = last; let index = index; trackBy: tree.trackBy.bind(this)"
                         [node]="childNode"
@@ -654,14 +679,14 @@ class UITreeNode extends BaseComponent {
                 </ul>
             </li>
         }
-    `, isInline: true, dependencies: [{ kind: "component", type: UITreeNode, selector: "p-treeNode", inputs: ["rowNode", "node", "parentNode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"] }, { kind: "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 });
+    `, 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: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChevronRightIcon, selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: SpinnerIcon, selector: "[data-p-icon=\"spinner\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i3.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UITreeNode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UITreeNode, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeNode',
                     standalone: true,
-                    imports: [CommonModule, Ripple, Checkbox, FormsModule, ChevronRightIcon, ChevronDownIcon, SpinnerIcon, SharedModule],
+                    imports: [CommonModule, Ripple, Checkbox, FormsModule, ChevronRightIcon, ChevronDownIcon, SpinnerIcon, SharedModule, BindModule],
                     template: `
         @if (node) {
             <li
@@ -679,9 +704,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                 [attr.data-id]="node.key"
                 role="treeitem"
                 (keydown)="onKeyDown($event)"
+                [pBind]="getPTOptions('node')"
             >
                 @if (isPrevDropPointActive()) {
-                    <div [class]="cx('dropPoint')" [attr.aria-hidden]="true"></div>
+                    <div [class]="cx('dropPoint')" [attr.aria-hidden]="true" [pBind]="getPTOptions('dropPoint')"></div>
                 }
                 <div
                     [class]="cx('nodeContent')"
@@ -696,18 +722,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                     (dragleave)="onNodeDragLeave($event)"
                     (dragend)="onNodeDragEnd($event)"
                     [draggable]="tree.draggableNodes"
+                    [pBind]="getPTOptions('nodeContent')"
                 >
-                    <button type="button" [attr.data-pc-section]="'toggler'" [class]="cx('nodeToggleButton')" (click)="toggle($event)" pRipple tabindex="-1">
+                    <button type="button" [class]="cx('nodeToggleButton')" (click)="toggle($event)" pRipple tabindex="-1" [pBind]="getPTOptions('nodeToggleButton')">
                         <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')" />
+                                <svg data-p-icon="chevron-right" *ngIf="!node.expanded" [class]="cx('nodeToggleIcon')" [pBind]="getPTOptions('nodeToggleIcon')" />
+                                <svg data-p-icon="chevron-down" *ngIf="node.expanded" [class]="cx('nodeToggleIcon')" [pBind]="getPTOptions('nodeToggleIcon')" />
                             </ng-container>
                             <ng-container *ngIf="loadingMode === 'icon' && node.loading">
-                                <svg data-p-icon="spinner" [class]="cx('nodeToggleIcon')" spin />
+                                <svg data-p-icon="spinner" [class]="cx('nodeToggleIcon')" spin [pBind]="getPTOptions('nodeToggleIcon')" />
                             </ng-container>
                         </ng-container>
-                        <span *ngIf="tree.togglerIconTemplate || tree._togglerIconTemplate" [class]="cx('nodeToggleIcon')">
+                        <span *ngIf="tree.togglerIconTemplate || tree._togglerIconTemplate" [class]="cx('nodeToggleIcon')" [pBind]="getPTOptions('nodeToggleIcon')">
                             <ng-template *ngTemplateOutlet="tree.togglerIconTemplate || tree._togglerIconTemplate; context: { $implicit: node.expanded, loading: node.loading }"></ng-template>
                         </span>
                     </button>
@@ -723,6 +750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         [attr.data-p-partialchecked]="node.partialSelected"
                         [tabindex]="-1"
                         (click)="$event.preventDefault()"
+                        [pt]="getPTOptions('pcNodeCheckbox')"
                     >
                         <ng-container *ngIf="tree.checkboxIconTemplate || tree._checkboxIconTemplate">
                             <ng-template #icon>
@@ -740,8 +768,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         </ng-container>
                     </p-checkbox>
 
-                    <span [class]="getIcon()" *ngIf="node.icon || node.expandedIcon || node.collapsedIcon"></span>
-                    <span [class]="cx('nodeLabel')">
+                    <span [class]="getIcon()" *ngIf="node.icon || node.expandedIcon || node.collapsedIcon" [pBind]="getPTOptions('nodeIcon')"></span>
+                    <span [class]="cx('nodeLabel')" [pBind]="getPTOptions('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>
@@ -749,9 +777,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                     </span>
                 </div>
                 @if (isNextDropPointActive()) {
-                    <div [class]="cx('dropPoint')" [attr.aria-hidden]="true"></div>
+                    <div [class]="cx('dropPoint')" [attr.aria-hidden]="true" [pBind]="getPTOptions('dropPoint')"></div>
                 }
-                <ul [class]="cx('nodeChildren')" *ngIf="!tree.virtualScroll && node.children && node.expanded" role="group">
+                <ul [class]="cx('nodeChildren')" *ngIf="!tree.virtualScroll && node.children && node.expanded" role="group" [pBind]="ptm('nodeChildren')">
                     <p-treeNode
                         *ngFor="let childNode of node.children; let firstChild = first; let lastChild = last; let index = index; trackBy: tree.trackBy.bind(this)"
                         [node]="childNode"
@@ -768,7 +796,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
         }
     `,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [TreeStyle]
+                    providers: [TreeStyle, { provide: TREENODE_INSTANCE, useExisting: UITreeNode }, { provide: PARENT_INSTANCE, useExisting: UITreeNode }],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { rowNode: [{
                 type: Input
@@ -806,6 +835,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
  */
 class Tree extends BaseComponent {
     dragDropService;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pcTree = inject(TREE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
     /**
      * An array of treenodes.
      * @group Props
@@ -1128,7 +1162,7 @@ class Tree extends BaseComponent {
     _loadingIconTemplate;
     _filterIconTemplate;
     _filterTemplate;
-    ngAfterContentInit() {
+    onAfterContentInit() {
         if (this.templates.length) {
             this._templateMap = {};
         }
@@ -1194,8 +1228,7 @@ class Tree extends BaseComponent {
         super();
         this.dragDropService = dragDropService;
     }
-    ngOnInit() {
-        super.ngOnInit();
+    onInit() {
         if (this.filterBy) {
             this.filterOptions = {
                 filter: (value) => this._filter(value),
@@ -1220,8 +1253,7 @@ class Tree extends BaseComponent {
             });
         }
     }
-    ngOnChanges(simpleChange) {
-        super.ngOnChanges(simpleChange);
+    onChanges(simpleChange) {
         if (simpleChange.value) {
             this.updateSerializedValue();
             if (this.hasFilterActive()) {
@@ -1505,15 +1537,18 @@ class Tree extends BaseComponent {
             return null;
     }
     onDragOver(event) {
-        if (this.droppableNodes && (!this.value || this.value.length === 0)) {
-            event.dataTransfer.dropEffect = 'move';
+        if (this.droppableNodes && this.allowDrop(this.dragNode, null, this.dragNodeScope)) {
+            event.dataTransfer.dropEffect = 'copy';
             event.preventDefault();
         }
     }
     onDrop(event) {
-        if (this.droppableNodes && (!this.value || this.value.length === 0)) {
+        if (this.droppableNodes) {
             event.preventDefault();
             let dragNode = this.dragNode;
+            if (this.isSameTreeScope(this.dragNodeScope)) {
+                return;
+            }
             if (this.allowDrop(dragNode, null, this.dragNodeScope)) {
                 let dragNodeIndex = this.dragNodeIndex;
                 this.value = this.value || [];
@@ -1555,7 +1590,7 @@ class Tree extends BaseComponent {
     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) {
+            if (event.x > parseInt(rect.left) + rect.width || event.x < parseInt(rect.left) || event.y > parseInt(rect.top) + rect.height || event.y < parseInt(rect.top)) {
                 this.dragHover = false;
             }
         }
@@ -1588,30 +1623,36 @@ class Tree extends BaseComponent {
             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;
+    hasCommonScope(dragScope, dropScope) {
+        if (typeof dropScope === 'string') {
+            if (typeof dragScope === 'string')
+                return dropScope === dragScope;
+            else if (Array.isArray(dragScope))
+                return dragScope.indexOf(dropScope) != -1;
+        }
+        else if (Array.isArray(dropScope)) {
+            if (typeof dragScope === 'string') {
+                return dropScope.indexOf(dragScope) != -1;
             }
-            else if (Array.isArray(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;
-                            }
+            else if (Array.isArray(dragScope)) {
+                for (let s of dropScope) {
+                    for (let ds of dragScope) {
+                        if (s === ds) {
+                            return true;
                         }
                     }
                 }
             }
-            return false;
+        }
+        return false;
+    }
+    isSameTreeScope(dragScope) {
+        return this.hasCommonScope(dragScope, this.draggableScope);
+    }
+    isValidDragScope(dragScope) {
+        let dropScope = this.droppableScope;
+        if (dropScope) {
+            return this.hasCommonScope(dragScope, dropScope);
         }
         else {
             return true;
@@ -1720,22 +1761,21 @@ class Tree extends BaseComponent {
     getBlockableElement() {
         return this.el.nativeElement.children[0];
     }
-    ngOnDestroy() {
+    onDestroy() {
         if (this.dragStartSubscription) {
             this.dragStartSubscription.unsubscribe();
         }
         if (this.dragStopSubscription) {
             this.dragStopSubscription.unsubscribe();
         }
-        super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Tree, deps: [{ token: i3.TreeDragDropService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Tree, deps: [{ token: i4.TreeDragDropService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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, { provide: TREE_INSTANCE, useExisting: Tree }, { provide: PARENT_INSTANCE, useExisting: Tree }], 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, hostDirectives: [{ directive: i3.Bind }], ngImport: i0, template: `
+        <div [class]="cx('mask')" *ngIf="loading && loadingMode === 'mask'" [pBind]="ptm('mask')">
+            <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)" [pBind]="ptm('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')">
+                <svg data-p-icon="spinner" *ngIf="!loadingIconTemplate && !_loadingIconTemplate" spin [class]="cx('loadingIcon')" [pBind]="ptm('loadingIcon')" />
+                <span *ngIf="loadingIconTemplate || _loadingIconTemplate" [class]="cx('loadingIcon')" [pBind]="ptm('loadingIcon')">
                     <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
                 </span>
             </ng-container>
@@ -1744,7 +1784,7 @@ class Tree extends BaseComponent {
         @if (filterTemplate || _filterTemplate) {
             <ng-container *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { $implicit: filterOptions }"></ng-container>
         } @else {
-            <p-iconfield *ngIf="filter" [class]="cx('pcFilterContainer')">
+            <p-iconfield *ngIf="filter" [class]="cx('pcFilterContainer')" [pt]="ptm('pcFilterContainer')">
                 <input
                     #filter
                     [pAutoFocus]="filterInputAutoFocus"
@@ -1755,10 +1795,11 @@ class Tree extends BaseComponent {
                     [attr.placeholder]="filterPlaceholder"
                     (keydown.enter)="$event.preventDefault()"
                     (input)="_filter($event.target?.value)"
+                    [pt]="ptm('pcFilterInput')"
                 />
-                <p-inputicon>
-                    <svg data-p-icon="search" *ngIf="!filterIconTemplate && !_filterIconTemplate" [class]="cx('filterIcon')" />
-                    <span *ngIf="filterIconTemplate || _filterIconTemplate" [class]="cx('filterIcon')">
+                <p-inputicon [pt]="ptm('pcFilterIconContainer')">
+                    <svg data-p-icon="search" *ngIf="!filterIconTemplate && !_filterIconTemplate" [class]="cx('filterIcon')" [pBind]="ptm('filterIcon')" />
+                    <span *ngIf="filterIconTemplate || _filterIconTemplate" [class]="cx('filterIcon')" [pBind]="ptm('filterIcon')">
                         <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
                     </span>
                 </p-inputicon>
@@ -1780,9 +1821,21 @@ class Tree extends BaseComponent {
                 (onScrollIndexChange)="onScrollIndexChange.emit($event)"
                 (onLazyLoad)="onLazyLoad.emit($event)"
                 [options]="virtualScrollOptions"
+                [pt]="ptm('virtualScroller')"
+                hostName="tree"
             >
                 <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">
+                    <ul
+                        *ngIf="items"
+                        #content
+                        [class]="cx('rootChildren')"
+                        [ngClass]="scrollerOptions.contentStyleClass"
+                        [style]="scrollerOptions.contentStyle"
+                        role="tree"
+                        [attr.aria-label]="ariaLabel"
+                        [attr.aria-labelledby]="ariaLabelledBy"
+                        [pBind]="ptm('rootChildren')"
+                    >
                         <p-treeNode
                             #treeNode
                             *ngFor="let rowNode of items; let firstChild = first; let lastChild = last; let index = index; trackBy: trackBy"
@@ -1796,6 +1849,7 @@ class Tree extends BaseComponent {
                             [itemSize]="scrollerOptions.itemSize"
                             [indentation]="indentation"
                             [loadingMode]="loadingMode"
+                            [pt]="pt"
                         ></p-treeNode>
                     </ul>
                 </ng-template>
@@ -1806,8 +1860,8 @@ class Tree extends BaseComponent {
                 </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">
+                <div #wrapper [class]="cx('wrapper')" [style.max-height]="scrollHeight" [pBind]="ptm('wrapper')">
+                    <ul #content [class]="cx('rootChildren')" *ngIf="getRootNode()" role="tree" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy" [pBind]="ptm('rootChildren')">
                         <p-treeNode
                             *ngFor="let node of getRootNode(); let firstChild = first; let lastChild = last; let index = index; trackBy: trackBy.bind(this)"
                             [node]="node"
@@ -1816,33 +1870,34 @@ class Tree extends BaseComponent {
                             [index]="index"
                             [level]="0"
                             [loadingMode]="loadingMode"
+                            [pt]="pt"
                         ></p-treeNode>
                     </ul>
                 </div>
             </ng-container>
         </ng-container>
 
-        <div [class]="cx('emptyMessage')" *ngIf="!loading && (getRootNode() == null || getRootNode().length === 0)">
+        <div [class]="cx('emptyMessage')" *ngIf="!loading && (getRootNode() == null || getRootNode().length === 0)" [pBind]="ptm('emptyMessage')">
             <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 });
+    `, 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: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: SearchIcon, selector: "[data-p-icon=\"search\"]" }, { kind: "component", type: SpinnerIcon, selector: "[data-p-icon=\"spinner\"]" }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: UITreeNode, selector: "p-treeNode", inputs: ["rowNode", "node", "parentNode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i5.AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Tree, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.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],
+                    imports: [CommonModule, Scroller, SharedModule, SearchIcon, SpinnerIcon, InputText, FormsModule, IconField, InputIcon, UITreeNode, AutoFocusModule, Bind],
                     template: `
-        <div [class]="cx('mask')" *ngIf="loading && loadingMode === 'mask'">
-            <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)"></i>
+        <div [class]="cx('mask')" *ngIf="loading && loadingMode === 'mask'" [pBind]="ptm('mask')">
+            <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)" [pBind]="ptm('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')">
+                <svg data-p-icon="spinner" *ngIf="!loadingIconTemplate && !_loadingIconTemplate" spin [class]="cx('loadingIcon')" [pBind]="ptm('loadingIcon')" />
+                <span *ngIf="loadingIconTemplate || _loadingIconTemplate" [class]="cx('loadingIcon')" [pBind]="ptm('loadingIcon')">
                     <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
                 </span>
             </ng-container>
@@ -1851,7 +1906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
         @if (filterTemplate || _filterTemplate) {
             <ng-container *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { $implicit: filterOptions }"></ng-container>
         } @else {
-            <p-iconfield *ngIf="filter" [class]="cx('pcFilterContainer')">
+            <p-iconfield *ngIf="filter" [class]="cx('pcFilterContainer')" [pt]="ptm('pcFilterContainer')">
                 <input
                     #filter
                     [pAutoFocus]="filterInputAutoFocus"
@@ -1862,10 +1917,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                     [attr.placeholder]="filterPlaceholder"
                     (keydown.enter)="$event.preventDefault()"
                     (input)="_filter($event.target?.value)"
+                    [pt]="ptm('pcFilterInput')"
                 />
-                <p-inputicon>
-                    <svg data-p-icon="search" *ngIf="!filterIconTemplate && !_filterIconTemplate" [class]="cx('filterIcon')" />
-                    <span *ngIf="filterIconTemplate || _filterIconTemplate" [class]="cx('filterIcon')">
+                <p-inputicon [pt]="ptm('pcFilterIconContainer')">
+                    <svg data-p-icon="search" *ngIf="!filterIconTemplate && !_filterIconTemplate" [class]="cx('filterIcon')" [pBind]="ptm('filterIcon')" />
+                    <span *ngIf="filterIconTemplate || _filterIconTemplate" [class]="cx('filterIcon')" [pBind]="ptm('filterIcon')">
                         <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
                     </span>
                 </p-inputicon>
@@ -1887,9 +1943,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                 (onScrollIndexChange)="onScrollIndexChange.emit($event)"
                 (onLazyLoad)="onLazyLoad.emit($event)"
                 [options]="virtualScrollOptions"
+                [pt]="ptm('virtualScroller')"
+                hostName="tree"
             >
                 <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">
+                    <ul
+                        *ngIf="items"
+                        #content
+                        [class]="cx('rootChildren')"
+                        [ngClass]="scrollerOptions.contentStyleClass"
+                        [style]="scrollerOptions.contentStyle"
+                        role="tree"
+                        [attr.aria-label]="ariaLabel"
+                        [attr.aria-labelledby]="ariaLabelledBy"
+                        [pBind]="ptm('rootChildren')"
+                    >
                         <p-treeNode
                             #treeNode
                             *ngFor="let rowNode of items; let firstChild = first; let lastChild = last; let index = index; trackBy: trackBy"
@@ -1903,6 +1971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                             [itemSize]="scrollerOptions.itemSize"
                             [indentation]="indentation"
                             [loadingMode]="loadingMode"
+                            [pt]="pt"
                         ></p-treeNode>
                     </ul>
                 </ng-template>
@@ -1913,8 +1982,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                 </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">
+                <div #wrapper [class]="cx('wrapper')" [style.max-height]="scrollHeight" [pBind]="ptm('wrapper')">
+                    <ul #content [class]="cx('rootChildren')" *ngIf="getRootNode()" role="tree" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy" [pBind]="ptm('rootChildren')">
                         <p-treeNode
                             *ngFor="let node of getRootNode(); let firstChild = first; let lastChild = last; let index = index; trackBy: trackBy.bind(this)"
                             [node]="node"
@@ -1923,13 +1992,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                             [index]="index"
                             [level]="0"
                             [loadingMode]="loadingMode"
+                            [pt]="pt"
                         ></p-treeNode>
                     </ul>
                 </div>
             </ng-container>
         </ng-container>
 
-        <div [class]="cx('emptyMessage')" *ngIf="!loading && (getRootNode() == null || getRootNode().length === 0)">
+        <div [class]="cx('emptyMessage')" *ngIf="!loading && (getRootNode() == null || getRootNode().length === 0)" [pBind]="ptm('emptyMessage')">
             <ng-container *ngIf="!emptyMessageTemplate && !_emptyMessageTemplate; else emptyFilter">
                 {{ emptyMessageLabel }}
             </ng-container>
@@ -1937,14 +2007,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
         </div>
         <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
     `,
-                    changeDetection: ChangeDetectionStrategy.Default,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [TreeStyle],
+                    providers: [TreeStyle, { provide: TREE_INSTANCE, useExisting: Tree }, { provide: PARENT_INSTANCE, useExisting: Tree }],
                     host: {
                         '[class]': "cn(cx('root'), styleClass)"
-                    }
+                    },
+                    hostDirectives: [Bind]
                 }]
-        }], ctorParameters: () => [{ type: i3.TreeDragDropService, decorators: [{
+        }], ctorParameters: () => [{ type: i4.TreeDragDropService, decorators: [{
                     type: Optional
                 }] }], propDecorators: { value: [{
                 type: Input
@@ -2117,11 +2188,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                 args: ['dragleave', ['$event']]
             }] } });
 class TreeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule], exports: [Tree, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule], exports: [Tree, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Tree, SharedModule],