primeng 18.0.0-rc.2 → 18.0.1

package/fesm2022/primeng-treeselect.mjs

@@ -1,17 +1,15 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChild, ContentChildren, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { uuid, isNotEmpty, getFocusableElements, hasClass, getFirstFocusableElement, focus, getLastFocusableElement } from '@primeuix/utils';
-import { SharedModule } from 'primeng/api';
+import { PrimeTemplate, SharedModule } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
 import { BaseComponent } from 'primeng/basecomponent';
 import { Chip } from 'primeng/chip';
-import { TimesIcon, ChevronDownIcon, SearchIcon } from 'primeng/icons';
-import { InputText } from 'primeng/inputtext';
+import { TimesIcon, ChevronDownIcon } from 'primeng/icons';
 import { Overlay } from 'primeng/overlay';
-import { Ripple } from 'primeng/ripple';
 import { Tree } from 'primeng/tree';
 import { BaseStyle } from 'primeng/base';
 
@@ -117,9 +115,6 @@ p-treeselect.ng-invalid.ng-dirty .p-treeselect-label.p-placeholder {
 }
 
 .p-treeselect-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
     background: ${dt('treeselect.overlay.background')};
     color: ${dt('treeselect.overlay.color')};
     border: 1px solid ${dt('treeselect.overlay.border.color')};
@@ -321,7 +316,7 @@ function TreeSelect_ng_container_7_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.valueTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c20, ctx_r1.value, ctx_r1.placeholder));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.valueTemplate || ctx_r1._valueTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c20, ctx_r1.value, ctx_r1.placeholder));
 } }
 function TreeSelect_ng_template_8_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -386,7 +381,7 @@ function TreeSelect_ng_container_10_span_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.cleariconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.clearIconTemplate || ctx_r1._clearIconTemplate);
 } }
 function TreeSelect_ng_container_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -395,9 +390,9 @@ function TreeSelect_ng_container_10_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.cleariconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.clearIconTemplate && !ctx_r1._clearIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.cleariconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.clearIconTemplate || ctx_r1.clearIconTemplate);
 } }
 function TreeSelect_ChevronDownIcon_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ChevronDownIcon", 34);
@@ -415,7 +410,7 @@ function TreeSelect_span_13_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.triggericonTemplate || ctx_r1.dropdowniconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.triggerIconTemplate || ctx_r1._triggerIconTemplate || ctx_r1.dropdownIconTemplate || ctx_r1._dropdownIconTemplate);
 } }
 function TreeSelect_ng_template_16_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -427,7 +422,7 @@ function TreeSelect_ng_template_16_ng_container_8_ng_template_1_Template(rf, ctx
     i0.ɵɵtemplate(0, TreeSelect_ng_template_16_ng_container_8_ng_template_1_ng_container_0_Template, 1, 0, "ng-container", 33);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.emptyTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.emptyTemplate || ctx_r1._emptyTemplate);
 } }
 function TreeSelect_ng_template_16_ng_container_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -442,7 +437,7 @@ function TreeSelect_ng_template_16_9_ng_template_0_Template(rf, ctx) { if (rf &
 } if (rf & 2) {
     const expanded_r8 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemtogglericonTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c23, expanded_r8));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemTogglerIconTemplate || ctx_r1._itemTogglerIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c23, expanded_r8));
 } }
 function TreeSelect_ng_template_16_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, TreeSelect_ng_template_16_9_ng_template_0_Template, 1, 4, "ng-template", null, 11, i0.ɵɵtemplateRefExtractor);
@@ -456,7 +451,7 @@ function TreeSelect_ng_template_16_10_ng_template_0_Template(rf, ctx) { if (rf &
     const selected_r9 = ctx.$implicit;
     const partialSelected_r10 = ctx.partialSelected;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemcheckboxiconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c24, selected_r9, partialSelected_r10));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemCheckboxIconTemplate || ctx_r1._itemCheckboxIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c24, selected_r9, partialSelected_r10));
 } }
 function TreeSelect_ng_template_16_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, TreeSelect_ng_template_16_10_ng_template_0_Template, 1, 5, "ng-template", null, 12, i0.ɵɵtemplateRefExtractor);
@@ -468,7 +463,7 @@ function TreeSelect_ng_template_16_11_ng_template_0_Template(rf, ctx) { if (rf &
     i0.ɵɵtemplate(0, TreeSelect_ng_template_16_11_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 33);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemloadingiconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemLoadingIconTemplate || ctx_r1._itemLoadingIconTemplate);
 } }
 function TreeSelect_ng_template_16_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, TreeSelect_ng_template_16_11_ng_template_0_Template, 1, 1, "ng-template", null, 13, i0.ɵɵtemplateRefExtractor);
@@ -498,19 +493,19 @@ function TreeSelect_ng_template_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵattribute("tabindex", 0)("data-p-hidden-accessible", true)("data-p-hidden-focusable", true);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(38, _c21, ctx_r1.value, ctx_r1.options));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerTemplate || ctx_r1._headerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(38, _c21, ctx_r1.value, ctx_r1.options));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(41, _c22, ctx_r1.scrollHeight));
     i0.ɵɵadvance();
     i0.ɵɵproperty("value", ctx_r1.options)("propagateSelectionDown", ctx_r1.propagateSelectionDown)("propagateSelectionUp", ctx_r1.propagateSelectionUp)("selectionMode", ctx_r1.selectionMode)("selection", ctx_r1.value)("metaKeySelection", ctx_r1.metaKeySelection)("emptyMessage", ctx_r1.emptyMessage)("filter", ctx_r1.filter)("filterBy", ctx_r1.filterBy)("filterMode", ctx_r1.filterMode)("filterPlaceholder", ctx_r1.filterPlaceholder)("filterLocale", ctx_r1.filterLocale)("filteredNodes", ctx_r1.filteredNodes)("virtualScroll", ctx_r1.virtualScroll)("virtualScrollItemSize", ctx_r1.virtualScrollItemSize)("virtualScrollOptions", ctx_r1.virtualScrollOptions)("_templateMap", ctx_r1.templateMap)("loading", ctx_r1.loading);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r1.emptyTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.emptyTemplate || ctx_r1._emptyTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.itemtogglericonTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.itemTogglerIconTemplate || ctx_r1._itemTogglerIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.itemcheckboxiconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.itemCheckboxIconTemplate || ctx_r1._itemCheckboxIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.itemloadingiconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.itemLoadingIconTemplate || ctx_r1._itemLoadingIconTemplate);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.footerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(43, _c21, ctx_r1.value, ctx_r1.options));
     i0.ɵɵadvance();
@@ -854,42 +849,55 @@ class TreeSelect extends BaseComponent {
      * Custom clear icon template.
      * @group Templates
      */
-    cleariconTemplate;
+    clearIconTemplate;
     /**
      * Custom trigger icon template.
      * @group Templates
      */
-    triggericonTemplate;
+    triggerIconTemplate;
     /**
      * Custom dropdown icon template.
      * @group Templates
      */
-    dropdowniconTemplate;
+    dropdownIconTemplate;
     /**
      * Custom filter icon template.
      * @group Templates
      */
-    filtericonTemplate;
+    filterIconTemplate;
     /**
      * Custom close icon template.
      * @group Templates
      */
-    closeiconTemplate;
+    closeIconTemplate;
     /**
      * Custom item toggler icon template.
      * @group Templates
      */
-    itemtogglericonTemplate;
+    itemTogglerIconTemplate;
     /**
      * Custom item checkbox icon template.
      * @group Templates
      */
-    itemcheckboxiconTemplate;
+    itemCheckboxIconTemplate;
     /**
      * Custom item loading icon template.
      * @group Templates
      */
-    itemloadingiconTemplate;
+    itemLoadingIconTemplate;
+    templates;
+    _valueTemplate;
+    _headerTemplate;
+    _emptyTemplate;
+    _footerTemplate;
+    _clearIconTemplate;
+    _triggerIconTemplate;
+    _filterIconTemplate;
+    _closeIconTemplate;
+    _itemTogglerIconTemplate;
+    _itemCheckboxIconTemplate;
+    _itemLoadingIconTemplate;
+    _dropdownIconTemplate;
     focused;
     overlayVisible;
     selfChange;
@@ -906,6 +914,57 @@ class TreeSelect extends BaseComponent {
         this.listId = uuid('pn_id_') + '_list';
         this.updateTreeState();
     }
+    ngAfterContentInit() {
+        if (this.templates.length) {
+            this.templateMap = {};
+        }
+        this.templates.forEach((item) => {
+            switch (item.getType()) {
+                case 'value':
+                    this._valueTemplate = item.template;
+                    break;
+                case 'header':
+                    this._headerTemplate = item.template;
+                    break;
+                case 'empty':
+                    this._emptyTemplate = item.template;
+                    break;
+                case 'footer':
+                    this._footerTemplate = item.template;
+                    break;
+                case 'clearicon':
+                    this._clearIconTemplate = item.template;
+                    break;
+                case 'triggericon':
+                    this._triggerIconTemplate = item.template;
+                    break;
+                case 'filtericon':
+                    this._filterIconTemplate = item.template;
+                    break;
+                case 'closeicon':
+                    this._closeIconTemplate = item.template;
+                    break;
+                case 'itemtogglericon':
+                    this._itemTogglerIconTemplate = item.template;
+                    break;
+                case 'itemcheckboxicon':
+                    this._itemCheckboxIconTemplate = item.template;
+                    break;
+                case 'dropdownicon':
+                    this._dropdownIconTemplate = item.template;
+                    break;
+                case 'itemloadingicon':
+                    this._itemLoadingIconTemplate = item.template;
+                    break;
+                default: //TODO: @deprecated Used "value" template instead
+                    if (item.name)
+                        this.templateMap[item.name] = item.template;
+                    else
+                        this.valueTemplate = item.template;
+                    break;
+            }
+        });
+    }
     onOverlayAnimationStart(event) {
         switch (event.toState) {
             case 'visible':
@@ -995,7 +1054,7 @@ class TreeSelect extends BaseComponent {
     }
     onArrowDown(event) {
         if (this.overlayVisible && this.panelEl?.nativeElement) {
-            let focusableElements = getFocusableElements(this.panelEl.nativeElement, '.p-treenode');
+            let focusableElements = getFocusableElements(this.panelEl.nativeElement, '.p-tree-node');
             if (focusableElements && focusableElements.length > 0) {
                 focusableElements[0].focus();
             }
@@ -1216,32 +1275,34 @@ class TreeSelect extends BaseComponent {
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵTreeSelect_BaseFactory; return function TreeSelect_Factory(__ngFactoryType__) { return (ɵTreeSelect_BaseFactory || (ɵTreeSelect_BaseFactory = i0.ɵɵgetInheritedFactory(TreeSelect)))(__ngFactoryType__ || TreeSelect); }; })();
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TreeSelect, selectors: [["p-treeSelect"], ["p-treeselect"], ["p-tree-select"]], contentQueries: function TreeSelect_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, _c0, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c1, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c2, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c3, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c4, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c5, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c6, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c7, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c8, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c9, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c10, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c11, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c0, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c1, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c2, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c3, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c4, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c5, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c6, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c7, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c8, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c9, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c10, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c11, 4);
+            i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.valueTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.emptyTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footerTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.cleariconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.triggericonTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdowniconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filtericonTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.closeiconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemtogglericonTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemcheckboxiconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemloadingiconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.clearIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.triggerIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdownIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.closeIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemTogglerIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemCheckboxIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemLoadingIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t);
         } }, viewQuery: function TreeSelect_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c12, 5);
             i0.ɵɵviewQuery(_c13, 5);
@@ -1293,15 +1354,15 @@ class TreeSelect extends BaseComponent {
             i0.ɵɵclassMap(ctx.labelStyleClass);
             i0.ɵɵproperty("ngClass", ctx.labelClass)("ngStyle", ctx.labelStyle);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.valueTemplate)("ngIfElse", defaultValueTemplate_r11);
+            i0.ɵɵproperty("ngIf", ctx.valueTemplate || ctx._valueTemplate)("ngIfElse", defaultValueTemplate_r11);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.checkValue() && !ctx.disabled && ctx.showClear);
             i0.ɵɵadvance();
             i0.ɵɵattribute("aria-expanded", (tmp_23_0 = ctx.overlayVisible) !== null && tmp_23_0 !== undefined ? tmp_23_0 : false)("aria-label", "treeselect trigger");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.triggericonTemplate && !ctx.dropdowniconTemplate);
+            i0.ɵɵproperty("ngIf", !ctx.triggerIconTemplate && !ctx._triggerIconTemplate && !ctx.dropdownIconTemplate && !ctx._dropdownIconTemplate);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.triggericonTemplate || ctx.dropdowniconTemplate);
+            i0.ɵɵproperty("ngIf", ctx.triggerIconTemplate || ctx._triggerIconTemplate || ctx.dropdownIconTemplate || ctx._dropdownIconTemplate);
             i0.ɵɵadvance();
             i0.ɵɵtwoWayProperty("visible", ctx.overlayVisible);
             i0.ɵɵproperty("options", ctx.overlayOptions)("target", "@parent")("appendTo", ctx.appendTo)("showTransitionOptions", ctx.showTransitionOptions)("hideTransitionOptions", ctx.hideTransitionOptions);
@@ -1312,7 +1373,7 @@ class TreeSelect extends BaseComponent {
         args: [{
                 selector: 'p-treeSelect, p-treeselect, p-tree-select',
                 standalone: true,
-                imports: [CommonModule, Overlay, SharedModule, Ripple, InputText, Tree, AutoFocus, SearchIcon, TimesIcon, ChevronDownIcon, Chip],
+                imports: [CommonModule, Overlay, SharedModule, Tree, AutoFocus, TimesIcon, ChevronDownIcon, Chip],
                 template: `
         <div #container [ngClass]="containerClass" [class]="containerStyleClass" [ngStyle]="containerStyle" (click)="onClick($event)">
             <div class="p-hidden-accessible">
@@ -1337,8 +1398,8 @@ class TreeSelect extends BaseComponent {
             </div>
             <div class="p-treeselect-label-container">
                 <div [ngClass]="labelClass" [class]="labelStyleClass" [ngStyle]="labelStyle">
-                    <ng-container *ngIf="valueTemplate; else defaultValueTemplate">
-                        <ng-container *ngTemplateOutlet="valueTemplate; context: { $implicit: value, placeholder: placeholder }"></ng-container>
+                    <ng-container *ngIf="valueTemplate || _valueTemplate; else defaultValueTemplate">
+                        <ng-container *ngTemplateOutlet="valueTemplate || _valueTemplate; context: { $implicit: value, placeholder: placeholder }"></ng-container>
                     </ng-container>
                     <ng-template #defaultValueTemplate>
                         <ng-container *ngIf="display === 'comma'; else chipsValueTemplate">
@@ -1354,15 +1415,15 @@ class TreeSelect extends BaseComponent {
                 </div>
             </div>
             <ng-container *ngIf="checkValue() && !disabled && showClear">
-                <TimesIcon *ngIf="!cleariconTemplate" [class]="'p-treeselect-clear-icon'" (click)="clear($event)" />
-                <span *ngIf="cleariconTemplate" class="p-treeselect-clear-icon" (click)="clear($event)">
-                    <ng-template *ngTemplateOutlet="cleariconTemplate"></ng-template>
+                <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="'p-treeselect-clear-icon'" (click)="clear($event)" />
+                <span *ngIf="clearIconTemplate || clearIconTemplate" class="p-treeselect-clear-icon" (click)="clear($event)">
+                    <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
                 </span>
             </ng-container>
             <div class="p-treeselect-dropdown" role="button" aria-haspopup="tree" [attr.aria-expanded]="overlayVisible ?? false" [attr.aria-label]="'treeselect trigger'">
-                <ChevronDownIcon *ngIf="!triggericonTemplate && !dropdowniconTemplate" [styleClass]="'p-treeselect-dropdown-icon'" />
-                <span *ngIf="triggericonTemplate || dropdowniconTemplate" class="p-treeselect-dropdown-icon">
-                    <ng-template *ngTemplateOutlet="triggericonTemplate || dropdowniconTemplate"></ng-template>
+                <ChevronDownIcon *ngIf="!triggerIconTemplate && !_triggerIconTemplate && !dropdownIconTemplate && !_dropdownIconTemplate" [styleClass]="'p-treeselect-dropdown-icon'" />
+                <span *ngIf="triggerIconTemplate || _triggerIconTemplate || dropdownIconTemplate || _dropdownIconTemplate" class="p-treeselect-dropdown-icon">
+                    <ng-template *ngTemplateOutlet="triggerIconTemplate || _triggerIconTemplate || dropdownIconTemplate || _dropdownIconTemplate"></ng-template>
                 </span>
             </div>
             <p-overlay
@@ -1390,7 +1451,7 @@ class TreeSelect extends BaseComponent {
                             [attr.data-p-hidden-focusable]="true"
                         >
                         </span>
-                        <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: value, options: options }"></ng-container>
+                        <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: value, options: options }"></ng-container>
                         <div class="p-treeselect-tree-container" [ngStyle]="{ 'max-height': scrollHeight }">
                             <p-tree
                                 #tree
@@ -1418,19 +1479,19 @@ class TreeSelect extends BaseComponent {
                                 [_templateMap]="templateMap"
                                 [loading]="loading"
                             >
-                                <ng-container *ngIf="emptyTemplate">
+                                <ng-container *ngIf="emptyTemplate || _emptyTemplate">
                                     <ng-template #empty>
-                                        <ng-container *ngTemplateOutlet="emptyTemplate"></ng-container>
+                                        <ng-container *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
                                     </ng-template>
                                 </ng-container>
-                                <ng-template #togglericon let-expanded *ngIf="itemtogglericonTemplate">
-                                    <ng-container *ngTemplateOutlet="itemtogglericonTemplate; context: { $implicit: expanded }"></ng-container>
+                                <ng-template #togglericon let-expanded *ngIf="itemTogglerIconTemplate || _itemTogglerIconTemplate">
+                                    <ng-container *ngTemplateOutlet="itemTogglerIconTemplate || _itemTogglerIconTemplate; context: { $implicit: expanded }"></ng-container>
                                 </ng-template>
-                                <ng-template #checkboxicon let-selected let-partialSelected="partialSelected" *ngIf="itemcheckboxiconTemplate">
-                                    <ng-container *ngTemplateOutlet="itemcheckboxiconTemplate; context: { $implicit: selected, partialSelected: partialSelected }"></ng-container>
+                                <ng-template #checkboxicon let-selected let-partialSelected="partialSelected" *ngIf="itemCheckboxIconTemplate || _itemCheckboxIconTemplate">
+                                    <ng-container *ngTemplateOutlet="itemCheckboxIconTemplate || _itemCheckboxIconTemplate; context: { $implicit: selected, partialSelected: partialSelected }"></ng-container>
                                 </ng-template>
-                                <ng-template #loadingicon *ngIf="itemloadingiconTemplate">
-                                    <ng-container *ngTemplateOutlet="itemloadingiconTemplate"></ng-container>
+                                <ng-template #loadingicon *ngIf="itemLoadingIconTemplate || _itemLoadingIconTemplate">
+                                    <ng-container *ngTemplateOutlet="itemLoadingIconTemplate || _itemLoadingIconTemplate"></ng-container>
                                 </ng-template>
                             </p-tree>
                         </div>
@@ -1592,40 +1653,43 @@ class TreeSelect extends BaseComponent {
             args: ['lastHiddenFocusableEl']
         }], valueTemplate: [{
             type: ContentChild,
-            args: ['value']
+            args: ['value', { descendants: false }]
         }], headerTemplate: [{
             type: ContentChild,
-            args: ['header']
+            args: ['header', { descendants: false }]
         }], emptyTemplate: [{
             type: ContentChild,
-            args: ['empty']
+            args: ['empty', { descendants: false }]
         }], footerTemplate: [{
             type: ContentChild,
-            args: ['footer']
-        }], cleariconTemplate: [{
+            args: ['footer', { descendants: false }]
+        }], clearIconTemplate: [{
             type: ContentChild,
-            args: ['clearicon']
-        }], triggericonTemplate: [{
+            args: ['clearicon', { descendants: false }]
+        }], triggerIconTemplate: [{
             type: ContentChild,
-            args: ['triggericon']
-        }], dropdowniconTemplate: [{
+            args: ['triggericon', { descendants: false }]
+        }], dropdownIconTemplate: [{
             type: ContentChild,
-            args: ['dropdownicon']
-        }], filtericonTemplate: [{
+            args: ['dropdownicon', { descendants: false }]
+        }], filterIconTemplate: [{
             type: ContentChild,
-            args: ['filtericon']
-        }], closeiconTemplate: [{
+            args: ['filtericon', { descendants: false }]
+        }], closeIconTemplate: [{
             type: ContentChild,
-            args: ['closeicon']
-        }], itemtogglericonTemplate: [{
+            args: ['closeicon', { descendants: false }]
+        }], itemTogglerIconTemplate: [{
             type: ContentChild,
-            args: ['itemtogglericon']
-        }], itemcheckboxiconTemplate: [{
+            args: ['itemtogglericon', { descendants: false }]
+        }], itemCheckboxIconTemplate: [{
             type: ContentChild,
-            args: ['itemcheckboxicon']
-        }], itemloadingiconTemplate: [{
+            args: ['itemcheckboxicon', { descendants: false }]
+        }], itemLoadingIconTemplate: [{
             type: ContentChild,
-            args: ['itemloadingicon']
+            args: ['itemloadingicon', { descendants: false }]
+        }], templates: [{
+            type: ContentChildren,
+            args: [PrimeTemplate]
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeSelect, { className: "TreeSelect" }); })();
 class TreeSelectModule {