primeng 19.0.0-rc.1 → 19.0.0

package/fesm2022/primeng-listbox.mjs

@@ -1,12 +1,12 @@
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, EventEmitter, signal, inject, computed, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { Injectable, forwardRef, EventEmitter, signal, inject, computed, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChild, ContentChildren, NgModule } from '@angular/core';
 import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { isNotEmpty, uuid, equals, focus, getFirstFocusableElement, isEmpty, isPrintableCharacter, resolveFieldData, findSingle, findLastIndex } from '@primeuix/utils';
 import * as i1 from 'primeng/api';
-import { Header, Footer, SharedModule } from 'primeng/api';
+import { Header, Footer, PrimeTemplate, SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { Checkbox } from 'primeng/checkbox';
 import { IconField } from 'primeng/iconfield';
@@ -259,7 +259,7 @@ function Listbox_div_3_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c19, ctx_r1.modelValue(), ctx_r1.visibleOptions()));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerTemplate || ctx_r1._headerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c19, ctx_r1.modelValue(), ctx_r1.visibleOptions()));
 } }
 function Listbox_div_4_div_1_p_checkbox_4_ng_container_1_ng_template_1_0_ng_template_0_Template(rf, ctx) { }
 function Listbox_div_4_div_1_p_checkbox_4_ng_container_1_ng_template_1_0_Template(rf, ctx) { if (rf & 1) {
@@ -269,7 +269,7 @@ function Listbox_div_4_div_1_p_checkbox_4_ng_container_1_ng_template_1_Template(
     i0.ɵɵtemplate(0, Listbox_div_4_div_1_p_checkbox_4_ng_container_1_ng_template_1_0_Template, 1, 0, null, 24);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.checkIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c21, ctx_r1.allSelected()));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.checkIconTemplate || ctx_r1._checkIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c21, ctx_r1.allSelected()));
 } }
 function Listbox_div_4_div_1_p_checkbox_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -284,7 +284,7 @@ function Listbox_div_4_div_1_p_checkbox_4_Template(rf, ctx) { if (rf & 1) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngModel", ctx_r1.allSelected())("disabled", ctx_r1.disabled)("tabindex", -1)("variant", ctx_r1.config.inputStyle() === "filled" ? "filled" : "outlined" || ctx_r1.config.inputVariant() === "filled" ? "filled" : "outlined")("binary", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.checkIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.checkIconTemplate || ctx_r1._checkIconTemplate);
 } }
 function Listbox_div_4_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -316,7 +316,7 @@ function Listbox_div_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.filterTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c22, ctx_r1.filterOptions));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.filterTemplate || ctx_r1._filterTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c22, ctx_r1.filterOptions));
 } }
 function Listbox_div_4_ng_template_3_div_0_SearchIcon_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "SearchIcon", 38);
@@ -336,7 +336,7 @@ function Listbox_div_4_ng_template_3_div_0_span_6_Template(rf, ctx) { if (rf & 1
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵattribute("aria-hidden", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.filterIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.filterIconTemplate || ctx_r1._filterIconTemplate);
 } }
 function Listbox_div_4_ng_template_3_div_0_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -352,9 +352,9 @@ function Listbox_div_4_ng_template_3_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("value", ctx_r1._filterValue() || "")("disabled", ctx_r1.disabled)("tabindex", !ctx_r1.disabled && !ctx_r1.focused ? ctx_r1.tabindex : -1);
     i0.ɵɵattribute("aria-owns", ctx_r1.id + "_list")("aria-activedescendant", ctx_r1.focusedOptionId)("placeholder", ctx_r1.filterPlaceHolder)("aria-label", ctx_r1.ariaFilterLabel);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", !ctx_r1.filterIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.filterIconTemplate && !ctx_r1._filterIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.filterIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.filterIconTemplate || ctx_r1._filterIconTemplate);
 } }
 function Listbox_div_4_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, Listbox_div_4_ng_template_3_div_0_Template, 7, 9, "div", 32);
@@ -379,7 +379,7 @@ function Listbox_div_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.checkbox && ctx_r1.multiple && ctx_r1.showToggleAll);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.filterTemplate)("ngIfElse", builtInFilterElement_r5);
+    i0.ɵɵproperty("ngIf", ctx_r1.filterTemplate || ctx_r1._filterTemplate)("ngIfElse", builtInFilterElement_r5);
 } }
 function Listbox_p_scroller_7_ng_template_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -401,7 +401,7 @@ function Listbox_p_scroller_7_Conditional_4_ng_template_0_Template(rf, ctx) { if
 } if (rf & 2) {
     const scrollerOptions_r10 = ctx.options;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.loaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c22, scrollerOptions_r10));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.loaderTemplate || ctx_r1._loaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c22, scrollerOptions_r10));
 } }
 function Listbox_p_scroller_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, Listbox_p_scroller_7_Conditional_4_ng_template_0_Template, 1, 4, "ng-template", null, 10, i0.ɵɵtemplateRefExtractor);
@@ -417,7 +417,7 @@ function Listbox_p_scroller_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵstyleMap(i0.ɵɵpureFunction1(9, _c23, ctx_r1.scrollHeight));
     i0.ɵɵproperty("items", ctx_r1.visibleOptions())("itemSize", ctx_r1.virtualScrollItemSize)("autoSize", true)("lazy", ctx_r1.lazy)("options", ctx_r1.virtualScrollOptions)("tabindex", ctx_r1.scrollerTabIndex);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r1.loaderTemplate ? 4 : -1);
+    i0.ɵɵconditional(ctx_r1.loaderTemplate || ctx_r1._loaderTemplate ? 4 : -1);
 } }
 function Listbox_ng_container_8_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -461,9 +461,9 @@ function Listbox_ng_template_9_ng_template_2_ng_container_0_Template(rf, ctx) {
     i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(5, _c23, scrollerOptions_r15.itemSize + "px"));
     i0.ɵɵattribute("id", ctx_r1.id + "_" + ctx_r1.getOptionIndex(i_r14, scrollerOptions_r15));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.groupTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.groupTemplate && !ctx_r1._groupTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.groupTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(7, _c21, option_r12.optionGroup));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.groupTemplate || ctx_r1._groupTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(7, _c21, option_r12.optionGroup));
 } }
 function Listbox_ng_template_9_ng_template_2_ng_container_1_p_checkbox_2_ng_container_1_ng_template_1_0_ng_template_0_Template(rf, ctx) { }
 function Listbox_ng_template_9_ng_template_2_ng_container_1_p_checkbox_2_ng_container_1_ng_template_1_0_Template(rf, ctx) { if (rf & 1) {
@@ -474,7 +474,7 @@ function Listbox_ng_template_9_ng_template_2_ng_container_1_p_checkbox_2_ng_cont
 } if (rf & 2) {
     const option_r12 = i0.ɵɵnextContext(4).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.checkIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c21, ctx_r1.isSelected(option_r12)));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.checkIconTemplate || ctx_r1._checkIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c21, ctx_r1.isSelected(option_r12)));
 } }
 function Listbox_ng_template_9_ng_template_2_ng_container_1_p_checkbox_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -490,7 +490,7 @@ function Listbox_ng_template_9_ng_template_2_ng_container_1_p_checkbox_2_Templat
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngModel", ctx_r1.isSelected(option_r12))("disabled", ctx_r1.disabled || ctx_r1.isOptionDisabled(option_r12))("tabindex", -1)("variant", ctx_r1.config.inputStyle() === "filled" ? "filled" : "outlined" || ctx_r1.config.inputVariant() === "filled" ? "filled" : "outlined")("binary", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.checkIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.checkIconTemplate || ctx_r1._checkIconTemplate);
 } }
 function Listbox_ng_template_9_ng_template_2_ng_container_1_ng_container_3_ng_container_1_BlankIcon_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "BlankIcon", 48);
@@ -521,9 +521,9 @@ function Listbox_ng_template_9_ng_template_2_ng_container_1_ng_container_3_Templ
     const option_r12 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.checkmarkTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.checkmarkTemplate && !ctx_r1._checkmarkTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.checkmarkTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c27, ctx_r1.isSelected(option_r12)));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.checkmarkTemplate || ctx_r1._checkmarkTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c27, ctx_r1.isSelected(option_r12)));
 } }
 function Listbox_ng_template_9_ng_template_2_ng_container_1_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -560,9 +560,9 @@ function Listbox_ng_template_9_ng_template_2_ng_container_1_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.checkmark);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.itemTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.itemTemplate && !ctx_r1._itemTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(19, _c26, option_r12, ctx_r1.getOptionIndex(i_r14, scrollerOptions_r15), ctx_r1.isSelected(option_r12)));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemTemplate || ctx_r1._itemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(19, _c26, option_r12, ctx_r1.getOptionIndex(i_r14, scrollerOptions_r15), ctx_r1.isSelected(option_r12)));
 } }
 function Listbox_ng_template_9_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, Listbox_ng_template_9_ng_template_2_ng_container_0_Template, 4, 9, "ng-container", 19)(1, Listbox_ng_template_9_ng_template_2_ng_container_1_Template, 6, 23, "ng-container", 19);
@@ -586,7 +586,7 @@ function Listbox_ng_template_9_li_3_Conditional_2_Template(rf, ctx) { if (rf & 1
     i0.ɵɵtemplate(0, Listbox_ng_template_9_li_3_Conditional_2_ng_container_0_Template, 2, 0, "ng-container", 40);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.emptyfilter || ctx_r1.emptyTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.emptyFilterTemplate || ctx_r1._emptyFilterTemplate || ctx_r1._emptyTemplate || ctx_r1.emptyTemplate);
 } }
 function Listbox_ng_template_9_li_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li", 49);
@@ -595,7 +595,7 @@ function Listbox_ng_template_9_li_3_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.emptyfilter && !ctx_r1.emptyTemplate ? 1 : 2);
+    i0.ɵɵconditional(!ctx_r1.emptyFilterTemplate && !ctx_r1._emptyFilterTemplate && !ctx_r1._emptyTemplate && !ctx_r1.emptyTemplate ? 1 : 2);
 } }
 function Listbox_ng_template_9_li_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
@@ -610,7 +610,7 @@ function Listbox_ng_template_9_li_4_Conditional_2_Template(rf, ctx) { if (rf & 1
     i0.ɵɵtemplate(0, Listbox_ng_template_9_li_4_Conditional_2_ng_container_0_Template, 2, 0, "ng-container", 40);
 } 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 Listbox_ng_template_9_li_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li", 49);
@@ -619,7 +619,7 @@ function Listbox_ng_template_9_li_4_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.emptyTemplate ? 1 : 2);
+    i0.ɵɵconditional(!ctx_r1.emptyTemplate && !ctx_r1._emptyTemplate ? 1 : 2);
 } }
 function Listbox_ng_template_9_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
@@ -652,7 +652,7 @@ function Listbox_div_11_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.footerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c19, ctx_r1.modelValue(), ctx_r1.visibleOptions()));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.footerTemplate || ctx_r1._footerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c19, ctx_r1.modelValue(), ctx_r1.visibleOptions()));
 } }
 function Listbox_span_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 22);
@@ -1021,7 +1021,7 @@ class Listbox extends BaseComponent {
      * Custom empty filter message template.
      * @group Templates
      */
-    emptyfilter;
+    emptyFilterTemplate;
     /**
      * Custom empty message template.
      * @group Templates
@@ -1047,6 +1047,18 @@ class Listbox extends BaseComponent {
      * @group Templates
      */
     loaderTemplate;
+    templates;
+    _itemTemplate;
+    _groupTemplate;
+    _headerTemplate;
+    _filterTemplate;
+    _footerTemplate;
+    _emptyFilterTemplate;
+    _emptyTemplate;
+    _filterIconTemplate;
+    _checkIconTemplate;
+    _checkmarkTemplate;
+    _loaderTemplate;
     _filterValue = signal(null);
     _filteredOptions;
     filterOptions;
@@ -1133,6 +1145,48 @@ class Listbox extends BaseComponent {
             };
         }
     }
+    ngAfterContentInit() {
+        this.templates.forEach((item) => {
+            switch (item.getType()) {
+                case 'item':
+                    this._itemTemplate = item.template;
+                    break;
+                case 'group':
+                    this._groupTemplate = item.template;
+                    break;
+                case 'header':
+                    this._headerTemplate = item.template;
+                    break;
+                case 'filter':
+                    this._filterTemplate = item.template;
+                    break;
+                case 'footer':
+                    this._footerTemplate = item.template;
+                    break;
+                case 'empty':
+                    this._emptyTemplate = item.template;
+                    break;
+                case 'emptyfilter':
+                    this._emptyFilterTemplate = item.template;
+                    break;
+                case 'filtericon':
+                    this._filterIconTemplate = item.template;
+                    break;
+                case 'checkicon':
+                    this._checkIconTemplate = item.template;
+                    break;
+                case 'checkmark':
+                    this._checkmarkTemplate = item.template;
+                    break;
+                case 'loader':
+                    this._loaderTemplate = item.template;
+                    break;
+                default:
+                    this._itemTemplate = item.template;
+                    break;
+            }
+        });
+    }
     writeValue(value) {
         this.value = value;
         this.modelValue.set(this.value);
@@ -1715,17 +1769,18 @@ class Listbox extends BaseComponent {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Listbox, selectors: [["p-listbox"], ["p-listBox"], ["p-list-box"]], contentQueries: function Listbox_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, Header, 5);
             i0.ɵɵcontentQuery(dirIndex, Footer, 5);
-            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, _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, PrimeTemplate, 4);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerFacet = _t.first);
@@ -1735,12 +1790,13 @@ class Listbox extends BaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footerTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.emptyfilter = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.emptyFilterTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.emptyTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterIconTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.checkIconTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.checkmarkTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loaderTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t);
         } }, viewQuery: function Listbox_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c11, 5);
             i0.ɵɵviewQuery(_c3, 5);
@@ -1785,7 +1841,7 @@ class Listbox extends BaseComponent {
             i0.ɵɵproperty("tabindex", !ctx.disabled ? ctx.tabindex : -1);
             i0.ɵɵattribute("aria-hidden", true)("data-p-hidden-focusable", true);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.headerFacet || ctx.headerTemplate);
+            i0.ɵɵproperty("ngIf", ctx.headerFacet || ctx.headerTemplate || ctx._headerTemplate);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.checkbox && ctx.multiple && ctx.showToggleAll || ctx.filter);
             i0.ɵɵadvance();
@@ -1798,7 +1854,7 @@ class Listbox extends BaseComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.virtualScroll);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", ctx.footerFacet || ctx.footerTemplate);
+            i0.ɵɵproperty("ngIf", ctx.footerFacet || ctx.footerTemplate || ctx._footerTemplate);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.isEmpty());
             i0.ɵɵadvance(2);
@@ -1826,9 +1882,9 @@ class Listbox extends BaseComponent {
                 [attr.data-p-hidden-focusable]="true"
             >
             </span>
-            <div class="p-listbox-header" *ngIf="headerFacet || headerTemplate">
+            <div class="p-listbox-header" *ngIf="headerFacet || headerTemplate || _headerTemplate">
                 <ng-content select="p-header"></ng-content>
-                <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }"></ng-container>
+                <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }"></ng-container>
             </div>
             <div class="p-listbox-header" *ngIf="(checkbox && multiple && showToggleAll) || filter">
                 <div *ngIf="checkbox && multiple && showToggleAll" class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-disabled': disabled }" (click)="onToggleAll($event)" (keydown)="onHeaderCheckboxKeyDown($event)">
@@ -1844,15 +1900,15 @@ class Listbox extends BaseComponent {
                         [variant]="config.inputStyle() === 'filled' ? 'filled' : 'outlined' || config.inputVariant() === 'filled' ? 'filled' : 'outlined'"
                         [binary]="true"
                     >
-                        <ng-container *ngIf="checkIconTemplate">
+                        <ng-container *ngIf="checkIconTemplate || _checkIconTemplate">
                             <ng-template #icon>
-                                <ng-template *ngTemplateOutlet="checkIconTemplate; context: { $implicit: allSelected() }"></ng-template>
+                                <ng-template *ngTemplateOutlet="checkIconTemplate || _checkIconTemplate; context: { $implicit: allSelected() }"></ng-template>
                             </ng-template>
                         </ng-container>
                     </p-checkbox>
                 </div>
-                <ng-container *ngIf="filterTemplate; else builtInFilterElement">
-                    <ng-container *ngTemplateOutlet="filterTemplate; context: { options: filterOptions }"></ng-container>
+                <ng-container *ngIf="filterTemplate || _filterTemplate; else builtInFilterElement">
+                    <ng-container *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { options: filterOptions }"></ng-container>
                 </ng-container>
                 <ng-template #builtInFilterElement>
                     <div class="p-listbox-filter-container" *ngIf="filter">
@@ -1876,9 +1932,9 @@ class Listbox extends BaseComponent {
                                 (blur)="onFilterBlur($event)"
                             />
                             <p-inputicon>
-                                <SearchIcon *ngIf="!filterIconTemplate" [styleClass]="'p-listbox-filter-icon'" [attr.aria-hidden]="true" />
-                                <span *ngIf="filterIconTemplate" class="p-listbox-filter-icon" [attr.aria-hidden]="true">
-                                    <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
+                                <SearchIcon *ngIf="!filterIconTemplate && !_filterIconTemplate" [styleClass]="'p-listbox-filter-icon'" [attr.aria-hidden]="true" />
+                                <span *ngIf="filterIconTemplate || _filterIconTemplate" class="p-listbox-filter-icon" [attr.aria-hidden]="true">
+                                    <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
                                 </span>
                             </p-inputicon>
                         </p-iconfield>
@@ -1904,9 +1960,9 @@ class Listbox extends BaseComponent {
                     <ng-template #content let-items let-scrollerOptions="options">
                         <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
                     </ng-template>
-                    @if (loaderTemplate) {
+                    @if (loaderTemplate || _loaderTemplate) {
                         <ng-template #loader let-scrollerOptions="options">
-                            <ng-container *ngTemplateOutlet="loaderTemplate; context: { options: scrollerOptions }"></ng-container>
+                            <ng-container *ngTemplateOutlet="loaderTemplate || _loaderTemplate; context: { options: scrollerOptions }"></ng-container>
                         </ng-template>
                     }
                 </p-scroller>
@@ -1933,8 +1989,8 @@ class Listbox extends BaseComponent {
                         <ng-template ngFor let-option [ngForOf]="items" let-i="index">
                             <ng-container *ngIf="isOptionGroup(option)">
                                 <li [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" class="p-listbox-option-group" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
-                                    <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
-                                    <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
+                                    <span *ngIf="!groupTemplate && !_groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
+                                    <ng-container *ngTemplateOutlet="groupTemplate || _groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
                                 </li>
                             </ng-container>
                             <ng-container *ngIf="!isOptionGroup(option)">
@@ -1969,23 +2025,23 @@ class Listbox extends BaseComponent {
                                         [variant]="config.inputStyle() === 'filled' ? 'filled' : 'outlined' || config.inputVariant() === 'filled' ? 'filled' : 'outlined'"
                                         [binary]="true"
                                     >
-                                        <ng-container *ngIf="checkIconTemplate">
+                                        <ng-container *ngIf="checkIconTemplate || _checkIconTemplate">
                                             <ng-template #icon>
-                                                <ng-template *ngTemplateOutlet="checkIconTemplate; context: { $implicit: isSelected(option) }"></ng-template>
+                                                <ng-template *ngTemplateOutlet="checkIconTemplate || _checkIconTemplate; context: { $implicit: isSelected(option) }"></ng-template>
                                             </ng-template>
                                         </ng-container>
                                     </p-checkbox>
                                     <ng-container *ngIf="checkmark">
-                                        <ng-container *ngIf="!checkmarkTemplate">
+                                        <ng-container *ngIf="!checkmarkTemplate && !_checkmarkTemplate">
                                             <BlankIcon *ngIf="!isSelected(option)" styleClass="p-listbox-option-check-icon" />
                                             <CheckIcon *ngIf="isSelected(option)" styleClass="p-listbox-option-check-icon" />
                                         </ng-container>
-                                        <ng-container *ngTemplateOutlet="checkmarkTemplate; context: { implicit: isSelected(option) }"></ng-container>
+                                        <ng-container *ngTemplateOutlet="checkmarkTemplate || _checkmarkTemplate; context: { implicit: isSelected(option) }"></ng-container>
                                     </ng-container>
-                                    <span *ngIf="!itemTemplate">{{ getOptionLabel(option) }}</span>
+                                    <span *ngIf="!itemTemplate && !_itemTemplate">{{ getOptionLabel(option) }}</span>
                                     <ng-container
                                         *ngTemplateOutlet="
-                                            itemTemplate;
+                                            itemTemplate || _itemTemplate;
                                             context: {
                                                 $implicit: option,
                                                 index: getOptionIndex(i, scrollerOptions),
@@ -1997,25 +2053,25 @@ class Listbox extends BaseComponent {
                             </ng-container>
                         </ng-template>
                         <li *ngIf="hasFilter() && isEmpty()" class="p-listbox-empty-message" role="option">
-                            @if (!emptyfilter && !emptyTemplate) {
+                            @if (!emptyFilterTemplate && !_emptyFilterTemplate && !_emptyTemplate && !emptyTemplate) {
                                 {{ emptyFilterMessageText }}
                             } @else {
-                                <ng-container #emptyFilter *ngTemplateOutlet="emptyfilter || emptyTemplate"></ng-container>
+                                <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || _emptyFilterTemplate || _emptyTemplate || emptyTemplate"></ng-container>
                             }
                         </li>
                         <li *ngIf="!hasFilter() && isEmpty()" class="p-listbox-empty-message" role="option">
-                            @if (!emptyTemplate) {
+                            @if (!emptyTemplate && !_emptyTemplate) {
                                 {{ emptyMessage }}
                             } @else {
-                                <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
+                                <ng-container #empty *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
                             }
                         </li>
                     </ul>
                 </ng-template>
             </div>
-            <div class="p-listbox-footer" *ngIf="footerFacet || footerTemplate">
+            <div class="p-listbox-footer" *ngIf="footerFacet || footerTemplate || _footerTemplate">
                 <ng-content select="p-footer"></ng-content>
-                <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }"></ng-container>
+                <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }"></ng-container>
             </div>
             <span *ngIf="isEmpty()" role="status" aria-live="polite" class="p-hidden-accessible">
                 {{ emptyMessage }}
@@ -2199,39 +2255,42 @@ class Listbox extends BaseComponent {
             args: [Footer]
         }], itemTemplate: [{
             type: ContentChild,
-            args: ['item']
+            args: ['item', { descendants: false }]
         }], groupTemplate: [{
             type: ContentChild,
-            args: ['group']
+            args: ['group', { descendants: false }]
         }], headerTemplate: [{
             type: ContentChild,
-            args: ['header']
+            args: ['header', { descendants: false }]
         }], filterTemplate: [{
             type: ContentChild,
-            args: ['filter']
+            args: ['filter', { descendants: false }]
         }], footerTemplate: [{
             type: ContentChild,
-            args: ['footer']
-        }], emptyfilter: [{
+            args: ['footer', { descendants: false }]
+        }], emptyFilterTemplate: [{
             type: ContentChild,
-            args: ['emptyfilter']
+            args: ['emptyfilter', { descendants: false }]
         }], emptyTemplate: [{
             type: ContentChild,
-            args: ['empty']
+            args: ['empty', { descendants: false }]
         }], filterIconTemplate: [{
             type: ContentChild,
-            args: ['filtericon']
+            args: ['filtericon', { descendants: false }]
         }], checkIconTemplate: [{
             type: ContentChild,
-            args: ['checkicon']
+            args: ['checkicon', { descendants: false }]
         }], checkmarkTemplate: [{
             type: ContentChild,
-            args: ['checkmark']
+            args: ['checkmark', { descendants: false }]
         }], loaderTemplate: [{
             type: ContentChild,
-            args: ['loader']
+            args: ['loader', { descendants: false }]
+        }], templates: [{
+            type: ContentChildren,
+            args: [PrimeTemplate]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Listbox, { className: "Listbox", filePath: "listbox.ts", lineNumber: 278 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Listbox, { className: "Listbox", filePath: "listbox.ts", lineNumber: 280 }); })();
 class ListboxModule {
     static ɵfac = function ListboxModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ListboxModule)(); };
     static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: ListboxModule });