primeng 18.0.0-rc.1 → 18.0.0

package/fesm2022/primeng-tree.mjs

@@ -1,12 +1,12 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, forwardRef, booleanAttribute, numberAttribute, Component, ViewEncapsulation, Input, EventEmitter, ChangeDetectionStrategy, Optional, ContentChild, Output, ViewChild, NgModule } from '@angular/core';
+import { Injectable, inject, forwardRef, booleanAttribute, numberAttribute, Component, ViewEncapsulation, Input, EventEmitter, ChangeDetectionStrategy, Optional, ContentChild, Output, ViewChild, ContentChildren, 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 } from 'primeng/api';
+import { SharedModule, TranslationKeys, PrimeTemplate } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { Checkbox } from 'primeng/checkbox';
 import { IconField } from 'primeng/iconfield';
@@ -34,11 +34,13 @@ const theme = ({ dt }) => `
 }
 
 .p-tree-root-children {
-    padding: ${dt('tree.gap')} 0 0 0;
+    padding: 0;
+    padding-block-start: ${dt('tree.gap')};
 }
 
 .p-tree-node-children {
-    padding: ${dt('tree.gap')} 0 0 ${dt('tree.indent')};
+    padding-block-start: ${dt('tree.gap')};
+    padding-inline-start: ${dt('tree.indent')};
 }
 
 .p-tree-node {
@@ -175,12 +177,22 @@ const theme = ({ dt }) => `
 
 .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-left: 0;
-    padding-right: 0;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
     overflow: auto;
 }
 
@@ -207,7 +219,7 @@ const theme = ({ dt }) => `
 
 .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-right: 0;
+    padding-inline-end: 0;
 }
 
 .p-tree.p-tree-horizontal .p-tree-node-children {
@@ -234,7 +246,7 @@ const classes = {
         'p-tree-selectable': instance.selectionMode != null,
         'p-tree-loading': instance.loading,
         'p-tree-flex-scrollable': instance.scrollHeight === 'flex',
-        'p-tree-node-tragover': instance.dragHover
+        'p-tree-node-dragover': instance.dragHover
     }),
     mask: 'p-tree-mask p-overlay-mask',
     loadingIcon: 'p-tree-loading-icon',
@@ -246,7 +258,7 @@ const classes = {
         'p-tree-node-content': true,
         [instance.styleClass]: !!instance.styleClass,
         'p-tree-node-selectable': instance.selectable,
-        'p-tree-node-dragover': instance.ragHoberNode,
+        'p-tree-node-dragover': instance.draghoverNode,
         'p-tree-node-selected': instance.selectionMode === 'checkbox' && instance.tree.highlightOnSelect ? instance.checked : instance.selected
     }),
     nodeToggleButton: 'p-tree-node-toggle-button',
@@ -336,13 +348,12 @@ var TreeClasses;
 })(TreeClasses || (TreeClasses = {}));
 
 const _c0 = a0 => ({ height: a0 });
-const _c1 = a0 => ({ "p-treenode-droppoint-active": a0 });
+const _c1 = a0 => ({ "p-tree-node-droppoint-active": a0 });
 const _c2 = a0 => ({ $implicit: a0 });
 const _c3 = (a0, a1) => ({ $implicit: a0, partialSelected: a1, class: "p-tree-node-checkbox" });
-const _c4 = a0 => ({ "p-tree-node-droppoint-active": a0 });
 function UITreeNode_Conditional_0_li_0_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 12);
+    i0.ɵɵelementStart(0, "li", 11);
     i0.ɵɵlistener("drop", function UITreeNode_Conditional_0_li_0_Template_li_drop_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDropPoint($event, -1)); })("dragover", function UITreeNode_Conditional_0_li_0_Template_li_dragover_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDropPointDragOver($event)); })("dragenter", function UITreeNode_Conditional_0_li_0_Template_li_dragenter_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDropPointDragEnter($event, -1)); })("dragleave", function UITreeNode_Conditional_0_li_0_Template_li_dragleave_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDropPointDragLeave($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -351,18 +362,18 @@ function UITreeNode_Conditional_0_li_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵattribute("aria-hidden", true);
 } }
 function UITreeNode_Conditional_0_ng_container_4_ng_container_1_ChevronRightIcon_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ChevronRightIcon", 14);
+    i0.ɵɵelement(0, "ChevronRightIcon", 13);
 } if (rf & 2) {
     i0.ɵɵproperty("styleClass", "p-tree-node-toggle-icon");
 } }
 function UITreeNode_Conditional_0_ng_container_4_ng_container_1_ChevronDownIcon_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ChevronDownIcon", 14);
+    i0.ɵɵelement(0, "ChevronDownIcon", 13);
 } if (rf & 2) {
     i0.ɵɵproperty("styleClass", "p-tree-node-toggle-icon");
 } }
 function UITreeNode_Conditional_0_ng_container_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, UITreeNode_Conditional_0_ng_container_4_ng_container_1_ChevronRightIcon_1_Template, 1, 1, "ChevronRightIcon", 13)(2, UITreeNode_Conditional_0_ng_container_4_ng_container_1_ChevronDownIcon_2_Template, 1, 1, "ChevronDownIcon", 13);
+    i0.ɵɵtemplate(1, UITreeNode_Conditional_0_ng_container_4_ng_container_1_ChevronRightIcon_1_Template, 1, 1, "ChevronRightIcon", 12)(2, UITreeNode_Conditional_0_ng_container_4_ng_container_1_ChevronDownIcon_2_Template, 1, 1, "ChevronDownIcon", 12);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -373,7 +384,7 @@ function UITreeNode_Conditional_0_ng_container_4_ng_container_1_Template(rf, ctx
 } }
 function UITreeNode_Conditional_0_ng_container_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelement(1, "SpinnerIcon", 14);
+    i0.ɵɵelement(1, "SpinnerIcon", 13);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
@@ -395,23 +406,23 @@ function UITreeNode_Conditional_0_span_5_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, UITreeNode_Conditional_0_span_5_1_ng_template_0_Template, 0, 0, "ng-template");
 } }
 function UITreeNode_Conditional_0_span_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 15);
-    i0.ɵɵtemplate(1, UITreeNode_Conditional_0_span_5_1_Template, 1, 0, null, 16);
+    i0.ɵɵelementStart(0, "span", 14);
+    i0.ɵɵtemplate(1, UITreeNode_Conditional_0_span_5_1_Template, 1, 0, null, 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.tree.togglerIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, ctx_r2.node.expanded));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.tree.togglericonTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, ctx_r2.node.expanded));
 } }
 function UITreeNode_Conditional_0_p_checkbox_6_ng_container_1_ng_template_1_0_ng_template_0_Template(rf, ctx) { }
 function UITreeNode_Conditional_0_p_checkbox_6_ng_container_1_ng_template_1_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, UITreeNode_Conditional_0_p_checkbox_6_ng_container_1_ng_template_1_0_ng_template_0_Template, 0, 0, "ng-template");
 } }
 function UITreeNode_Conditional_0_p_checkbox_6_ng_container_1_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, UITreeNode_Conditional_0_p_checkbox_6_ng_container_1_ng_template_1_0_Template, 1, 0, null, 16);
+    i0.ɵɵtemplate(0, UITreeNode_Conditional_0_p_checkbox_6_ng_container_1_ng_template_1_0_Template, 1, 0, null, 15);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.tree.checkboxIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c3, ctx_r2.isSelected(), ctx_r2.node.partialSelected));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.tree.checkboxiconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c3, ctx_r2.isSelected(), ctx_r2.node.partialSelected));
 } }
 function UITreeNode_Conditional_0_p_checkbox_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -419,7 +430,7 @@ function UITreeNode_Conditional_0_p_checkbox_6_ng_container_1_Template(rf, ctx)
     i0.ɵɵelementContainerEnd();
 } }
 function UITreeNode_Conditional_0_p_checkbox_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p-checkbox", 17);
+    i0.ɵɵelementStart(0, "p-checkbox", 16);
     i0.ɵɵtemplate(1, UITreeNode_Conditional_0_p_checkbox_6_ng_container_1_Template, 3, 0, "ng-container", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -427,7 +438,7 @@ function UITreeNode_Conditional_0_p_checkbox_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngModel", ctx_r2.isSelected())("binary", true)("indeterminate", ctx_r2.node.partialSelected)("disabled", ctx_r2.node.selectable === false)("variant", (ctx_r2.tree == null ? null : ctx_r2.tree.config.inputStyle()) === "filled" ? "filled" : "outlined" || (ctx_r2.tree == null ? null : ctx_r2.tree.config.inputVariant()) === "filled" ? "filled" : "outlined")("tabindex", -1);
     i0.ɵɵattribute("data-p-partialchecked", ctx_r2.node.partialSelected);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.tree.checkboxIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r2.tree.checkboxiconTemplate);
 } }
 function UITreeNode_Conditional_0_span_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span");
@@ -449,15 +460,15 @@ function UITreeNode_Conditional_0_span_10_ng_container_1_Template(rf, ctx) { if
 } }
 function UITreeNode_Conditional_0_span_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵtemplate(1, UITreeNode_Conditional_0_span_10_ng_container_1_Template, 1, 0, "ng-container", 16);
+    i0.ɵɵtemplate(1, UITreeNode_Conditional_0_span_10_ng_container_1_Template, 1, 0, "ng-container", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.tree.nodeTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, ctx_r2.node));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.tree.getTemplateForNode(ctx_r2.node))("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, ctx_r2.node));
 } }
 function UITreeNode_Conditional_0_ul_11_p_treeNode_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "p-treeNode", 20);
+    i0.ɵɵelement(0, "p-treeNode", 19);
 } if (rf & 2) {
     const childNode_r4 = ctx.$implicit;
     const firstChild_r5 = ctx.first;
@@ -467,23 +478,23 @@ function UITreeNode_Conditional_0_ul_11_p_treeNode_1_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("node", childNode_r4)("parentNode", ctx_r2.node)("firstChild", firstChild_r5)("lastChild", lastChild_r6)("index", index_r7)("itemSize", ctx_r2.itemSize)("level", ctx_r2.level + 1)("loadingMode", ctx_r2.loadingMode);
 } }
 function UITreeNode_Conditional_0_ul_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "ul", 18);
-    i0.ɵɵtemplate(1, UITreeNode_Conditional_0_ul_11_p_treeNode_1_Template, 1, 8, "p-treeNode", 19);
+    i0.ɵɵelementStart(0, "ul", 17);
+    i0.ɵɵtemplate(1, UITreeNode_Conditional_0_ul_11_p_treeNode_1_Template, 1, 8, "p-treeNode", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵstyleProp("display", ctx_r2.node.expanded ? "block" : "none");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.node.children)("ngForTrackBy", ctx_r2.tree.trackBy);
+    i0.ɵɵproperty("ngForOf", ctx_r2.node.children)("ngForTrackBy", ctx_r2.tree.trackBy.bind(ctx_r2));
 } }
 function UITreeNode_Conditional_0_li_12_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 21);
+    i0.ɵɵelementStart(0, "li", 11);
     i0.ɵɵlistener("drop", function UITreeNode_Conditional_0_li_12_Template_li_drop_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDropPoint($event, 1)); })("dragover", function UITreeNode_Conditional_0_li_12_Template_li_dragover_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDropPointDragOver($event)); })("dragenter", function UITreeNode_Conditional_0_li_12_Template_li_dragenter_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDropPointDragEnter($event, 1)); })("dragleave", function UITreeNode_Conditional_0_li_12_Template_li_dragleave_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDropPointDragLeave($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c4, ctx_r2.draghoverNext));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c1, ctx_r2.draghoverNext));
     i0.ɵɵattribute("aria-hidden", true);
 } }
 function UITreeNode_Conditional_0_Template(rf, ctx) { if (rf & 1) {
@@ -503,7 +514,7 @@ function UITreeNode_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd()();
     i0.ɵɵtemplate(11, UITreeNode_Conditional_0_ul_11_Template, 2, 4, "ul", 10);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(12, UITreeNode_Conditional_0_li_12_Template, 1, 4, "li", 11);
+    i0.ɵɵtemplate(12, UITreeNode_Conditional_0_li_12_Template, 1, 4, "li", 1);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngIf", ctx_r2.tree.droppableNodes);
@@ -517,35 +528,35 @@ function UITreeNode_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵattribute("data-pc-section", "toggler");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.tree.togglerIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.tree.togglericonTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.tree.togglerIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r2.tree.togglericonTemplate);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r2.tree.selectionMode == "checkbox");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r2.node.icon || ctx_r2.node.expandedIcon || ctx_r2.node.collapsedIcon);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", !ctx_r2.tree.nodeTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.tree.getTemplateForNode(ctx_r2.node));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.tree.nodeTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r2.tree.getTemplateForNode(ctx_r2.node));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r2.tree.virtualScroll && ctx_r2.node.children && ctx_r2.node.expanded);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r2.tree.droppableNodes && ctx_r2.lastChild);
 } }
-const _c5 = ["filter"];
-const _c6 = ["node"];
-const _c7 = ["header"];
-const _c8 = ["footer"];
-const _c9 = ["loader"];
-const _c10 = ["empty"];
-const _c11 = ["togglericon"];
-const _c12 = ["checkboxicon"];
-const _c13 = ["loadingicon"];
-const _c14 = ["filtericon"];
-const _c15 = ["scroller"];
-const _c16 = ["wrapper"];
-const _c17 = a0 => ({ options: a0 });
+const _c4 = ["filter"];
+const _c5 = ["node"];
+const _c6 = ["header"];
+const _c7 = ["footer"];
+const _c8 = ["loader"];
+const _c9 = ["empty"];
+const _c10 = ["togglericon"];
+const _c11 = ["checkboxicon"];
+const _c12 = ["loadingicon"];
+const _c13 = ["filtericon"];
+const _c14 = ["scroller"];
+const _c15 = ["wrapper"];
+const _c16 = a0 => ({ options: a0 });
 function Tree_div_1_i_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
@@ -568,7 +579,7 @@ function Tree_div_1_ng_container_2_span_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.loadingIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.loadingiconTemplate);
 } }
 function Tree_div_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -577,9 +588,9 @@ function Tree_div_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r0.loadingIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r0.loadingiconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r0.loadingIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r0.loadingiconTemplate);
 } }
 function Tree_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 12);
@@ -618,7 +629,7 @@ function Tree_Conditional_4_p_iconField_0_span_5_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.filterIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.filtericonTemplate);
 } }
 function Tree_Conditional_4_p_iconField_0_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -633,9 +644,9 @@ function Tree_Conditional_4_p_iconField_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵattribute("placeholder", ctx_r0.filterPlaceholder);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", !ctx_r0.filterIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r0.filtericonTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r0.filterIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r0.filtericonTemplate);
 } }
 function Tree_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, Tree_Conditional_4_p_iconField_0_Template, 6, 3, "p-iconField", 10);
@@ -683,7 +694,7 @@ function Tree_ng_container_5_p_scroller_1_ng_container_4_ng_template_1_Template(
 } if (rf & 2) {
     const scrollerOptions_r11 = ctx.options;
     const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.loaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c17, scrollerOptions_r11));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.loaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c16, scrollerOptions_r11));
 } }
 function Tree_ng_container_5_p_scroller_1_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -721,7 +732,7 @@ function Tree_ng_container_5_ng_container_2_ul_3_Template(rf, ctx) { if (rf & 1)
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵattribute("aria-label", ctx_r0.ariaLabel)("aria-labelledby", ctx_r0.ariaLabelledBy);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r0.getRootNode())("ngForTrackBy", ctx_r0.trackBy);
+    i0.ɵɵproperty("ngForOf", ctx_r0.getRootNode())("ngForTrackBy", ctx_r0.trackBy.bind(ctx_r0));
 } }
 function Tree_ng_container_5_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -766,15 +777,15 @@ function Tree_div_6_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r0.emptyMessageTemplate)("ngIfElse", ctx_r0.emptyFilter);
+    i0.ɵɵproperty("ngIf", !ctx_r0.emptymessageTemplate)("ngIfElse", ctx_r0.emptyFilter);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.emptyMessageTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.emptymessageTemplate);
 } }
 function Tree_ng_container_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 class UITreeNode extends BaseComponent {
-    static ICON_CLASS = 'p-treenode-icon ';
+    static ICON_CLASS = 'p-tree-node-icon ';
     rowNode;
     node;
     parentNode;
@@ -1140,7 +1151,7 @@ class UITreeNode extends BaseComponent {
         event.preventDefault();
     }
     setAllNodesTabIndexes() {
-        const nodes = find(this.tree.el.nativeElement, '.p-treenode');
+        const nodes = find(this.tree.el.nativeElement, '.p-tree-node');
         const hasSelectedNode = [...nodes].some((node) => node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true');
         [...nodes].forEach((node) => {
             node.tabIndex = -1;
@@ -1156,7 +1167,7 @@ class UITreeNode extends BaseComponent {
     }
     setTabIndexForSelectionMode(event, nodeTouched) {
         if (this.tree.selectionMode !== null) {
-            const elements = [...find(this.tree.el.nativeElement, '.p-treenode')];
+            const elements = [...find(this.tree.el.nativeElement, '[role="treeitem"]')];
             event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0;
             if (elements.every((element) => element.tabIndex === -1)) {
                 elements[0].tabIndex = 0;
@@ -1176,8 +1187,8 @@ class UITreeNode extends BaseComponent {
         }
     }
     findLastVisibleDescendant(nodeElement) {
-        const listElement = Array.from(nodeElement.children).find((el) => hasClass(el, 'p-treenode'));
-        const childrenListElement = listElement.children[1];
+        const listElement = Array.from(nodeElement.children).find((el) => hasClass(el, 'p-tree-node'));
+        const childrenListElement = listElement?.children[1];
         if (childrenListElement && childrenListElement.children.length > 0) {
             const lastChildElement = childrenListElement.children[childrenListElement.children.length - 1];
             return this.findLastVisibleDescendant(lastChildElement);
@@ -1208,7 +1219,7 @@ class UITreeNode extends BaseComponent {
         }, 1);
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵUITreeNode_BaseFactory; return function UITreeNode_Factory(__ngFactoryType__) { return (ɵUITreeNode_BaseFactory || (ɵUITreeNode_BaseFactory = i0.ɵɵgetInheritedFactory(UITreeNode)))(__ngFactoryType__ || UITreeNode); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UITreeNode, selectors: [["p-treeNode"]], inputs: { rowNode: "rowNode", node: "node", parentNode: "parentNode", root: [2, "root", "root", booleanAttribute], index: [2, "index", "index", numberAttribute], firstChild: [2, "firstChild", "firstChild", booleanAttribute], lastChild: [2, "lastChild", "lastChild", booleanAttribute], level: [2, "level", "level", numberAttribute], indentation: [2, "indentation", "indentation", numberAttribute], itemSize: [2, "itemSize", "itemSize", numberAttribute], loadingMode: "loadingMode" }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 1, vars: 1, consts: [["icon", ""], ["class", "p-treenode-droppoint", 3, "ngClass", "drop", "dragover", "dragenter", "dragleave", 4, "ngIf"], ["role", "treeitem", 3, "keydown", "ngClass", "ngStyle"], [3, "click", "contextmenu", "touchend", "drop", "dragover", "dragenter", "dragleave", "dragstart", "dragend", "ngClass", "draggable"], ["type", "button", "pRipple", "", "tabindex", "-1", 1, "p-tree-node-toggle-button", 3, "click"], [4, "ngIf"], ["class", "p-tree-node-toggle-icon", 4, "ngIf"], ["styleClass", "p-tree-node-checkbox", 3, "ngModel", "binary", "indeterminate", "disabled", "variant", "tabindex", 4, "ngIf"], [3, "class", 4, "ngIf"], [1, "p-tree-node-label"], ["class", "p-tree-node-children", "style", "display: none;", "role", "group", 3, "display", 4, "ngIf"], ["class", "p-tree-node-droppoint", 3, "ngClass", "drop", "dragover", "dragenter", "dragleave", 4, "ngIf"], [1, "p-treenode-droppoint", 3, "drop", "dragover", "dragenter", "dragleave", "ngClass"], [3, "styleClass", 4, "ngIf"], [3, "styleClass"], [1, "p-tree-node-toggle-icon"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["styleClass", "p-tree-node-checkbox", 3, "ngModel", "binary", "indeterminate", "disabled", "variant", "tabindex"], ["role", "group", 1, "p-tree-node-children", 2, "display", "none"], [3, "node", "parentNode", "firstChild", "lastChild", "index", "itemSize", "level", "loadingMode", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "node", "parentNode", "firstChild", "lastChild", "index", "itemSize", "level", "loadingMode"], [1, "p-tree-node-droppoint", 3, "drop", "dragover", "dragenter", "dragleave", "ngClass"]], template: function UITreeNode_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UITreeNode, selectors: [["p-treeNode"]], inputs: { rowNode: "rowNode", node: "node", parentNode: "parentNode", root: [2, "root", "root", booleanAttribute], index: [2, "index", "index", numberAttribute], firstChild: [2, "firstChild", "firstChild", booleanAttribute], lastChild: [2, "lastChild", "lastChild", booleanAttribute], level: [2, "level", "level", numberAttribute], indentation: [2, "indentation", "indentation", numberAttribute], itemSize: [2, "itemSize", "itemSize", numberAttribute], loadingMode: "loadingMode" }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 1, vars: 1, consts: [["icon", ""], ["class", "p-tree-node-droppoint", 3, "ngClass", "drop", "dragover", "dragenter", "dragleave", 4, "ngIf"], ["role", "treeitem", 3, "keydown", "ngClass", "ngStyle"], [3, "click", "contextmenu", "touchend", "drop", "dragover", "dragenter", "dragleave", "dragstart", "dragend", "ngClass", "draggable"], ["type", "button", "pRipple", "", "tabindex", "-1", 1, "p-tree-node-toggle-button", 3, "click"], [4, "ngIf"], ["class", "p-tree-node-toggle-icon", 4, "ngIf"], ["styleClass", "p-tree-node-checkbox", 3, "ngModel", "binary", "indeterminate", "disabled", "variant", "tabindex", 4, "ngIf"], [3, "class", 4, "ngIf"], [1, "p-tree-node-label"], ["class", "p-tree-node-children", "style", "display: none;", "role", "group", 3, "display", 4, "ngIf"], [1, "p-tree-node-droppoint", 3, "drop", "dragover", "dragenter", "dragleave", "ngClass"], [3, "styleClass", 4, "ngIf"], [3, "styleClass"], [1, "p-tree-node-toggle-icon"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["styleClass", "p-tree-node-checkbox", 3, "ngModel", "binary", "indeterminate", "disabled", "variant", "tabindex"], ["role", "group", 1, "p-tree-node-children", 2, "display", "none"], [3, "node", "parentNode", "firstChild", "lastChild", "index", "itemSize", "level", "loadingMode", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "node", "parentNode", "firstChild", "lastChild", "index", "itemSize", "level", "loadingMode"]], template: function UITreeNode_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, UITreeNode_Conditional_0_Template, 13, 29);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.node ? 0 : -1);
@@ -1224,9 +1235,9 @@ class UITreeNode extends BaseComponent {
         @if (node) {
             <li
                 *ngIf="tree.droppableNodes"
-                class="p-treenode-droppoint"
+                class="p-tree-node-droppoint"
                 [attr.aria-hidden]="true"
-                [ngClass]="{ 'p-treenode-droppoint-active': draghoverPrev }"
+                [ngClass]="{ 'p-tree-node-droppoint-active': draghoverPrev }"
                 (drop)="onDropPoint($event, -1)"
                 (dragover)="onDropPointDragOver($event)"
                 (dragenter)="onDropPointDragEnter($event, -1)"
@@ -1263,7 +1274,7 @@ class UITreeNode extends BaseComponent {
                     (dragend)="onDragStop($event)"
                 >
                     <button type="button" [attr.data-pc-section]="'toggler'" class="p-tree-node-toggle-button" (click)="toggle($event)" pRipple tabindex="-1">
-                        <ng-container *ngIf="!tree.togglerIconTemplate">
+                        <ng-container *ngIf="!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'" />
@@ -1272,8 +1283,8 @@ class UITreeNode extends BaseComponent {
                                 <SpinnerIcon [styleClass]="'pi-spin p-tree-node-toggle-icon'" />
                             </ng-container>
                         </ng-container>
-                        <span *ngIf="tree.togglerIconTemplate" class="p-tree-node-toggle-icon">
-                            <ng-template *ngTemplateOutlet="tree.togglerIconTemplate; context: { $implicit: node.expanded }"></ng-template>
+                        <span *ngIf="tree.togglericonTemplate" class="p-tree-node-toggle-icon">
+                            <ng-template *ngTemplateOutlet="tree.togglericonTemplate; context: { $implicit: node.expanded }"></ng-template>
                         </span>
                     </button>
 
@@ -1288,11 +1299,11 @@ class UITreeNode extends BaseComponent {
                         [attr.data-p-partialchecked]="node.partialSelected"
                         [tabindex]="-1"
                     >
-                        <ng-container *ngIf="tree.checkboxIconTemplate">
+                        <ng-container *ngIf="tree.checkboxiconTemplate">
                             <ng-template #icon>
                                 <ng-template
                                     *ngTemplateOutlet="
-                                        tree.checkboxIconTemplate;
+                                        tree.checkboxiconTemplate;
                                         context: {
                                             $implicit: isSelected(),
                                             partialSelected: node.partialSelected,
@@ -1306,15 +1317,15 @@ class UITreeNode extends BaseComponent {
 
                     <span [class]="getIcon()" *ngIf="node.icon || node.expandedIcon || node.collapsedIcon"></span>
                     <span class="p-tree-node-label">
-                        <span *ngIf="!tree.nodeTemplate">{{ node.label }}</span>
-                        <span *ngIf="tree.nodeTemplate">
-                            <ng-container *ngTemplateOutlet="tree.nodeTemplate; context: { $implicit: node }"></ng-container>
+                        <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 ? 'block' : 'none'" role="group">
                     <p-treeNode
-                        *ngFor="let childNode of node.children; let firstChild = first; let lastChild = last; let index = index; trackBy: tree.trackBy"
+                        *ngFor="let childNode of node.children; let firstChild = first; let lastChild = last; let index = index; trackBy: tree.trackBy.bind(this)"
                         [node]="childNode"
                         [parentNode]="node"
                         [firstChild]="firstChild"
@@ -1667,30 +1678,67 @@ class Tree extends BaseComponent {
      * Empty message template.
      * @group Templates
      */
-    emptyMessageTemplate;
+    emptymessageTemplate;
     /**
      * Toggler icon template.
      * @group Templates
      */
-    togglerIconTemplate;
+    togglericonTemplate;
     /**
      * Checkbox icon template.
      * @group Templates
      */
-    checkboxIconTemplate;
+    checkboxiconTemplate;
     /**
      * Loading icon template.
      * @group Templates
      */
-    loadingIconTemplate;
+    loadingiconTemplate;
     /**
      * Filter icon template.
      * @group Templates
      */
-    filterIconTemplate;
+    filtericonTemplate;
     filterViewChild;
     scroller;
     wrapperViewChild;
+    _templates;
+    ngAfterContentInit() {
+        if (this._templates.length) {
+            this._templateMap = {};
+        }
+        this._templates.forEach((item) => {
+            switch (item.getType()) {
+                case 'header':
+                    this.headerTemplate = item.template;
+                    break;
+                case 'empty':
+                    this.emptymessageTemplate = item.template;
+                    break;
+                case 'footer':
+                    this.footerTemplate = item.template;
+                    break;
+                case 'loader':
+                    this.loaderTemplate = item.template;
+                    break;
+                case 'togglericon':
+                    this.togglericonTemplate = item.template;
+                    break;
+                case 'checkboxicon':
+                    this.checkboxiconTemplate = item.template;
+                    break;
+                case 'loadingicon':
+                    this.loadingiconTemplate = item.template;
+                    break;
+                case 'filtericon':
+                    this.filtericonTemplate = item.template;
+                    break;
+                default:
+                    this._templateMap[item.name] = item.template;
+                    break;
+            }
+        });
+    }
     serializedValue;
     nodeTouched;
     dragNodeTree;
@@ -2241,6 +2289,7 @@ class Tree extends BaseComponent {
     }
     static ɵfac = function Tree_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || Tree)(i0.ɵɵdirectiveInject(i3.TreeDragDropService, 8)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Tree, selectors: [["p-tree"]], contentQueries: function Tree_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuery(dirIndex, _c4, 5);
             i0.ɵɵcontentQuery(dirIndex, _c5, 5);
             i0.ɵɵcontentQuery(dirIndex, _c6, 5);
             i0.ɵɵcontentQuery(dirIndex, _c7, 5);
@@ -2250,7 +2299,7 @@ class Tree extends BaseComponent {
             i0.ɵɵcontentQuery(dirIndex, _c11, 5);
             i0.ɵɵcontentQuery(dirIndex, _c12, 5);
             i0.ɵɵcontentQuery(dirIndex, _c13, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c14, 5);
+            i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterTemplate = _t.first);
@@ -2258,15 +2307,16 @@ class Tree extends BaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footerTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loaderTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.emptyMessageTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.togglerIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.checkboxIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loadingIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.emptymessageTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.togglericonTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.checkboxiconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loadingiconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filtericonTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._templates = _t);
         } }, viewQuery: function Tree_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c5, 5);
+            i0.ɵɵviewQuery(_c4, 5);
+            i0.ɵɵviewQuery(_c14, 5);
             i0.ɵɵviewQuery(_c15, 5);
-            i0.ɵɵviewQuery(_c16, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterViewChild = _t.first);
@@ -2306,9 +2356,9 @@ class Tree extends BaseComponent {
             <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" [spin]="true" [styleClass]="'p-tree-loading-icon'" />
-                    <span *ngIf="loadingIconTemplate" class="p-tree-loading-icon">
-                        <ng-template *ngTemplateOutlet="loadingIconTemplate"></ng-template>
+                    <SpinnerIcon *ngIf="!loadingiconTemplate" [spin]="true" [styleClass]="'p-tree-loading-icon'" />
+                    <span *ngIf="loadingiconTemplate" class="p-tree-loading-icon">
+                        <ng-template *ngTemplateOutlet="loadingiconTemplate"></ng-template>
                     </span>
                 </ng-container>
             </div>
@@ -2319,9 +2369,9 @@ class Tree extends BaseComponent {
                 <p-iconField *ngIf="filter">
                     <input #filter 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" class="p-tree-filter-icon" />
-                        <span *ngIf="filterIconTemplate">
-                            <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
+                        <SearchIcon *ngIf="!filtericonTemplate" class="p-tree-filter-icon" />
+                        <span *ngIf="filtericonTemplate">
+                            <ng-template *ngTemplateOutlet="filtericonTemplate"></ng-template>
                         </span>
                     </p-inputIcon>
                 </p-iconField>
@@ -2371,7 +2421,7 @@ class Tree extends BaseComponent {
                     <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"
+                                *ngFor="let node of getRootNode(); let firstChild = first; let lastChild = last; let index = index; trackBy: trackBy.bind(this)"
                                 [node]="node"
                                 [firstChild]="firstChild"
                                 [lastChild]="lastChild"
@@ -2385,10 +2435,10 @@ class Tree extends BaseComponent {
             </ng-container>
 
             <div class="p-tree-empty-message" *ngIf="!loading && (getRootNode() == null || getRootNode().length === 0)">
-                <ng-container *ngIf="!emptyMessageTemplate; else emptyFilter">
+                <ng-container *ngIf="!emptymessageTemplate; else emptyFilter">
                     {{ emptyMessageLabel }}
                 </ng-container>
-                <ng-container #emptyFilter *ngTemplateOutlet="emptyMessageTemplate"></ng-container>
+                <ng-container #emptyFilter *ngTemplateOutlet="emptymessageTemplate"></ng-container>
             </div>
             <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
         </div>
@@ -2525,19 +2575,19 @@ class Tree extends BaseComponent {
         }], loaderTemplate: [{
             type: ContentChild,
             args: ['loader']
-        }], emptyMessageTemplate: [{
+        }], emptymessageTemplate: [{
             type: ContentChild,
             args: ['empty']
-        }], togglerIconTemplate: [{
+        }], togglericonTemplate: [{
             type: ContentChild,
             args: ['togglericon']
-        }], checkboxIconTemplate: [{
+        }], checkboxiconTemplate: [{
             type: ContentChild,
             args: ['checkboxicon']
-        }], loadingIconTemplate: [{
+        }], loadingiconTemplate: [{
             type: ContentChild,
             args: ['loadingicon']
-        }], filterIconTemplate: [{
+        }], filtericonTemplate: [{
             type: ContentChild,
             args: ['filtericon']
         }], filterViewChild: [{
@@ -2549,6 +2599,9 @@ class Tree extends BaseComponent {
         }], wrapperViewChild: [{
             type: ViewChild,
             args: ['wrapper']
+        }], _templates: [{
+            type: ContentChildren,
+            args: [PrimeTemplate]
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Tree, { className: "Tree" }); })();
 class TreeModule {