primeng 19.0.0-rc.1 → 19.0.0

package/fesm2022/primeng-autocomplete.mjs

@@ -1,11 +1,11 @@
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, EventEmitter, inject, signal, computed, effect, numberAttribute, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { Injectable, forwardRef, EventEmitter, inject, signal, computed, effect, numberAttribute, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChild, ContentChildren, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { resolveFieldData, isNotEmpty, uuid, findLastIndex, equals, focus, isEmpty, findSingle } from '@primeuix/utils';
 import * as i1 from 'primeng/api';
-import { TranslationKeys, SharedModule } from 'primeng/api';
+import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
 import { BaseComponent } from 'primeng/basecomponent';
 import { Chip } from 'primeng/chip';
@@ -485,7 +485,7 @@ function AutoComplete_ng_container_3_span_2_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵattribute("aria-hidden", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.cleariconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.clearIconTemplate || ctx_r2._clearIconTemplate);
 } }
 function AutoComplete_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -494,9 +494,9 @@ function AutoComplete_ng_container_3_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.cleariconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.clearIconTemplate && !ctx_r2._clearIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.cleariconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r2.clearIconTemplate || ctx_r2._clearIconTemplate);
 } }
 function AutoComplete_ul_4_li_2_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -526,7 +526,7 @@ function AutoComplete_ul_4_li_2_p_chip_3_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("label", ctx_r2.getOptionLabel(option_r9))("removable", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.removeiconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.removeIconTemplate && !ctx_r2._removeIconTemplate);
 } }
 function AutoComplete_ul_4_li_2_span_4_1_ng_template_0_Template(rf, ctx) { }
 function AutoComplete_ul_4_li_2_span_4_1_Template(rf, ctx) { if (rf & 1) {
@@ -540,7 +540,7 @@ function AutoComplete_ul_4_li_2_span_4_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵattribute("aria-hidden", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.removeiconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction0(3, _c21));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.removeIconTemplate || ctx_r2._removeIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction0(3, _c21));
 } }
 function AutoComplete_ul_4_li_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li", 29, 5);
@@ -553,11 +553,11 @@ function AutoComplete_ul_4_li_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c19, ctx_r2.focusedMultipleOptionIndex() === i_r8));
     i0.ɵɵattribute("id", ctx_r2.id + "_multiple_option_" + i_r8)("aria-label", ctx_r2.getOptionLabel(option_r9))("aria-setsize", ctx_r2.modelValue().length)("aria-posinset", i_r8 + 1)("aria-selected", true);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.selecteditemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(12, _c20, option_r9));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.selectedItemTemplate || ctx_r2._selectedItemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(12, _c20, option_r9));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.selecteditemTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.selectedItemTemplate && !ctx_r2._selectedItemTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.removeiconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r2.removeIconTemplate || ctx_r2._removeIconTemplate);
 } }
 function AutoComplete_ul_4_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
@@ -597,7 +597,7 @@ function AutoComplete_ng_container_5_span_2_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵattribute("aria-hidden", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.loadingiconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.loadingIconTemplate || ctx_r2._loadingIconTemplate);
 } }
 function AutoComplete_ng_container_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -606,9 +606,9 @@ function AutoComplete_ng_container_5_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.loadingiconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.loadingIconTemplate && !ctx_r2._loadingIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.loadingiconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r2.loadingIconTemplate || ctx_r2._loadingIconTemplate);
 } }
 function AutoComplete_button_6_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 41);
@@ -631,9 +631,9 @@ function AutoComplete_button_6_ng_container_3_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.dropdowniconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.dropdownIconTemplate && !ctx_r2._dropdownIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.dropdowniconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.dropdownIconTemplate || ctx_r2._dropdownIconTemplate);
 } }
 function AutoComplete_button_6_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
@@ -672,9 +672,8 @@ function AutoComplete_ng_template_9_p_scroller_3_ng_container_4_ng_template_1_Te
     i0.ɵɵtemplate(0, AutoComplete_ng_template_9_p_scroller_3_ng_container_4_ng_template_1_ng_container_0_Template, 1, 0, "ng-container", 30);
 } if (rf & 2) {
     const scrollerOptions_r15 = ctx.options;
-    i0.ɵɵnextContext();
-    const loader_r16 = i0.ɵɵreference(2);
-    i0.ɵɵproperty("ngTemplateOutlet", loader_r16)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c24, scrollerOptions_r15));
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.loaderTemplate || ctx_r2._loaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c24, scrollerOptions_r15));
 } }
 function AutoComplete_ng_template_9_p_scroller_3_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -692,7 +691,7 @@ function AutoComplete_ng_template_9_p_scroller_3_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵstyleMap(i0.ɵɵpureFunction1(8, _c22, ctx_r2.scrollHeight));
     i0.ɵɵproperty("items", ctx_r2.visibleOptions())("itemSize", ctx_r2.virtualScrollItemSize || ctx_r2._itemSize)("autoSize", true)("lazy", ctx_r2.lazy)("options", ctx_r2.virtualScrollOptions);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngIf", ctx_r2.loaderTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r2.loaderTemplate || ctx_r2._loaderTemplate);
 } }
 function AutoComplete_ng_template_9_ng_container_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -713,10 +712,10 @@ function AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_0_s
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const option_r17 = i0.ɵɵnextContext(2).$implicit;
+    const option_r16 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r2.getOptionGroupLabel(option_r17.optionGroup));
+    i0.ɵɵtextInterpolate(ctx_r2.getOptionGroupLabel(option_r16.optionGroup));
 } }
 function AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_0_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -728,62 +727,62 @@ function AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_0_T
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r17 = i0.ɵɵnextContext();
-    const option_r17 = ctx_r17.$implicit;
-    const i_r19 = ctx_r17.index;
-    const scrollerOptions_r20 = i0.ɵɵnextContext().options;
+    const ctx_r16 = i0.ɵɵnextContext();
+    const option_r16 = ctx_r16.$implicit;
+    const i_r18 = ctx_r16.index;
+    const scrollerOptions_r19 = i0.ɵɵnextContext().options;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(5, _c22, scrollerOptions_r20.itemSize + "px"));
-    i0.ɵɵattribute("id", ctx_r2.id + "_" + ctx_r2.getOptionIndex(i_r19, scrollerOptions_r20));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(5, _c22, scrollerOptions_r19.itemSize + "px"));
+    i0.ɵɵattribute("id", ctx_r2.id + "_" + ctx_r2.getOptionIndex(i_r18, scrollerOptions_r19));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r2.groupTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.groupTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(7, _c20, option_r17.optionGroup));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.groupTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(7, _c20, option_r16.optionGroup));
 } }
 function AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_1_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const option_r17 = i0.ɵɵnextContext(2).$implicit;
+    const option_r16 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r2.getOptionLabel(option_r17));
+    i0.ɵɵtextInterpolate(ctx_r2.getOptionLabel(option_r16));
 } }
 function AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_1_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
+    const _r20 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelementStart(1, "li", 51);
-    i0.ɵɵlistener("click", function AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_1_Template_li_click_1_listener($event) { i0.ɵɵrestoreView(_r21); const option_r17 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onOptionSelect($event, option_r17)); })("mouseenter", function AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_1_Template_li_mouseenter_1_listener($event) { i0.ɵɵrestoreView(_r21); const i_r19 = i0.ɵɵnextContext().index; const scrollerOptions_r20 = i0.ɵɵnextContext().options; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onOptionMouseEnter($event, ctx_r2.getOptionIndex(i_r19, scrollerOptions_r20))); });
+    i0.ɵɵlistener("click", function AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_1_Template_li_click_1_listener($event) { i0.ɵɵrestoreView(_r20); const option_r16 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onOptionSelect($event, option_r16)); })("mouseenter", function AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_1_Template_li_mouseenter_1_listener($event) { i0.ɵɵrestoreView(_r20); const i_r18 = i0.ɵɵnextContext().index; const scrollerOptions_r19 = i0.ɵɵnextContext().options; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onOptionMouseEnter($event, ctx_r2.getOptionIndex(i_r18, scrollerOptions_r19))); });
     i0.ɵɵtemplate(2, AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_1_span_2_Template, 2, 1, "span", 15)(3, AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_1_ng_container_3_Template, 1, 0, "ng-container", 30);
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r17 = i0.ɵɵnextContext();
-    const option_r17 = ctx_r17.$implicit;
-    const i_r19 = ctx_r17.index;
-    const scrollerOptions_r20 = i0.ɵɵnextContext().options;
+    const ctx_r16 = i0.ɵɵnextContext();
+    const option_r16 = ctx_r16.$implicit;
+    const i_r18 = ctx_r16.index;
+    const scrollerOptions_r19 = i0.ɵɵnextContext().options;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(12, _c22, scrollerOptions_r20.itemSize + "px"))("ngClass", ctx_r2.optionClass(option_r17, i_r19, scrollerOptions_r20));
-    i0.ɵɵattribute("id", ctx_r2.id + "_" + ctx_r2.getOptionIndex(i_r19, scrollerOptions_r20))("aria-label", ctx_r2.getOptionLabel(option_r17))("aria-selected", ctx_r2.isSelected(option_r17))("aria-disabled", ctx_r2.isOptionDisabled(option_r17))("data-p-focused", ctx_r2.focusedOptionIndex() === ctx_r2.getOptionIndex(i_r19, scrollerOptions_r20))("aria-setsize", ctx_r2.ariaSetSize)("aria-posinset", ctx_r2.getAriaPosInset(ctx_r2.getOptionIndex(i_r19, scrollerOptions_r20)));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(12, _c22, scrollerOptions_r19.itemSize + "px"))("ngClass", ctx_r2.optionClass(option_r16, i_r18, scrollerOptions_r19));
+    i0.ɵɵattribute("id", ctx_r2.id + "_" + ctx_r2.getOptionIndex(i_r18, scrollerOptions_r19))("aria-label", ctx_r2.getOptionLabel(option_r16))("aria-selected", ctx_r2.isSelected(option_r16))("aria-disabled", ctx_r2.isOptionDisabled(option_r16))("data-p-focused", ctx_r2.focusedOptionIndex() === ctx_r2.getOptionIndex(i_r18, scrollerOptions_r19))("aria-setsize", ctx_r2.ariaSetSize)("aria-posinset", ctx_r2.getAriaPosInset(ctx_r2.getOptionIndex(i_r18, scrollerOptions_r19)));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.itemTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.itemTemplate && !ctx_r2._itemTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.itemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(14, _c26, option_r17, scrollerOptions_r20.getOptions ? scrollerOptions_r20.getOptions(i_r19) : i_r19));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.itemTemplate || ctx_r2._itemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(14, _c26, option_r16, scrollerOptions_r19.getOptions ? scrollerOptions_r19.getOptions(i_r18) : i_r18));
 } }
 function AutoComplete_ng_template_9_ng_template_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_0_Template, 4, 9, "ng-container", 15)(1, AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_1_Template, 4, 17, "ng-container", 15);
 } if (rf & 2) {
-    const option_r17 = ctx.$implicit;
+    const option_r16 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngIf", ctx_r2.isOptionGroup(option_r17));
+    i0.ɵɵproperty("ngIf", ctx_r2.isOptionGroup(option_r16));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.isOptionGroup(option_r17));
+    i0.ɵɵproperty("ngIf", !ctx_r2.isOptionGroup(option_r16));
 } }
 function AutoComplete_ng_template_9_ng_template_5_li_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -802,29 +801,29 @@ function AutoComplete_ng_template_9_ng_template_5_li_3_Template(rf, ctx) { if (r
     i0.ɵɵtemplate(1, AutoComplete_ng_template_9_ng_template_5_li_3_ng_container_1_Template, 2, 1, "ng-container", 53)(2, AutoComplete_ng_template_9_ng_template_5_li_3_ng_container_2_Template, 2, 0, "ng-container", 24);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const scrollerOptions_r20 = i0.ɵɵnextContext().options;
+    const scrollerOptions_r19 = i0.ɵɵnextContext().options;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c22, scrollerOptions_r20.itemSize + "px"));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c22, scrollerOptions_r19.itemSize + "px"));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.emptyTemplate)("ngIfElse", ctx_r2.empty);
+    i0.ɵɵproperty("ngIf", !ctx_r2.emptyTemplate && !ctx_r2._emptyTemplate)("ngIfElse", ctx_r2.empty);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.emptyTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.emptyTemplate || ctx_r2._emptyTemplate);
 } }
 function AutoComplete_ng_template_9_ng_template_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "ul", 47, 11);
     i0.ɵɵtemplate(2, AutoComplete_ng_template_9_ng_template_5_ng_template_2_Template, 2, 2, "ng-template", 48)(3, AutoComplete_ng_template_9_ng_template_5_li_3_Template, 3, 6, "li", 49);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const items_r22 = ctx.$implicit;
-    const scrollerOptions_r20 = ctx.options;
+    const items_r21 = ctx.$implicit;
+    const scrollerOptions_r19 = ctx.options;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleMap(scrollerOptions_r20.contentStyle);
-    i0.ɵɵproperty("ngClass", scrollerOptions_r20.contentStyleClass);
+    i0.ɵɵstyleMap(scrollerOptions_r19.contentStyle);
+    i0.ɵɵproperty("ngClass", scrollerOptions_r19.contentStyleClass);
     i0.ɵɵattribute("id", ctx_r2.id + "_list")("aria-label", ctx_r2.listLabel);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", items_r22);
+    i0.ɵɵproperty("ngForOf", items_r21);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !items_r22 || items_r22 && items_r22.length === 0 && ctx_r2.showEmptyMessage);
+    i0.ɵɵproperty("ngIf", !items_r21 || items_r21 && items_r21.length === 0 && ctx_r2.showEmptyMessage);
 } }
 function AutoComplete_ng_template_9_ng_container_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -845,7 +844,7 @@ function AutoComplete_ng_template_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassMap(ctx_r2.panelStyleClass);
     i0.ɵɵproperty("ngClass", ctx_r2.panelClass)("ngStyle", ctx_r2.panelStyle);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.headerTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.headerTemplate || ctx_r2._headerTemplate);
     i0.ɵɵadvance();
     i0.ɵɵstyleProp("max-height", ctx_r2.virtualScroll ? "auto" : ctx_r2.scrollHeight);
     i0.ɵɵadvance();
@@ -853,7 +852,7 @@ function AutoComplete_ng_template_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r2.virtualScroll);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.footerTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.footerTemplate || ctx_r2._footerTemplate);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.selectedMessageText, " ");
 } }
@@ -1317,7 +1316,7 @@ class AutoComplete extends BaseComponent {
      * Custom selected item template.
      * @group Templates
      */
-    selecteditemTemplate;
+    selectedItemTemplate;
     /**
      * Custom group item template.
      * @group Templates
@@ -1332,22 +1331,22 @@ class AutoComplete extends BaseComponent {
      * Custom remove icon template.
      * @group Templates
      */
-    removeiconTemplate;
+    removeIconTemplate;
     /**
      * Custom loading icon template.
      * @group Templates
      */
-    loadingiconTemplate;
+    loadingIconTemplate;
     /**
      * Custom clear icon template.
      * @group Templates
      */
-    cleariconTemplate;
+    clearIconTemplate;
     /**
      * Custom dropdown icon template.
      * @group Templates
      */
-    dropdowniconTemplate;
+    dropdownIconTemplate;
     primeng = inject(PrimeNG);
     value;
     _suggestions = signal(null);
@@ -1371,6 +1370,17 @@ class AutoComplete extends BaseComponent {
     listId;
     searchTimeout;
     dirty = false;
+    _itemTemplate;
+    _groupTemplate;
+    _selectedItemTemplate;
+    _headerTemplate;
+    _emptyTemplate;
+    _footerTemplate;
+    _loaderTemplate;
+    _removeIconTemplate;
+    _loadingIconTemplate;
+    _clearIconTemplate;
+    _dropdownIconTemplate;
     modelValue = signal(null);
     focusedMultipleOptionIndex = signal(-1);
     focusedOptionIndex = signal(-1);
@@ -1473,6 +1483,52 @@ class AutoComplete extends BaseComponent {
         this.id = this.id || uuid('pn_id_');
         this.cd.detectChanges();
     }
+    templates;
+    ngAfterContentInit() {
+        this.templates.forEach((item) => {
+            switch (item.getType()) {
+                case 'item':
+                    this._itemTemplate = item.template;
+                    break;
+                case 'group':
+                    this._groupTemplate = item.template;
+                    break;
+                case 'selecteditem':
+                    this._selectedItemTemplate = item.template;
+                    break;
+                case 'selectedItem':
+                    this._selectedItemTemplate = 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 'loader':
+                    this._loaderTemplate = item.template;
+                    break;
+                case 'removetokenicon':
+                    this._removeIconTemplate = item.template;
+                    break;
+                case 'loadingicon':
+                    this._loadingIconTemplate = item.template;
+                    break;
+                case 'clearicon':
+                    this._clearIconTemplate = item.template;
+                    break;
+                case 'dropdownicon':
+                    this._dropdownIconTemplate = item.template;
+                    break;
+                default:
+                    this._itemTemplate = item.template;
+                    break;
+            }
+        });
+    }
     ngAfterViewChecked() {
         //Use timeouts as since Angular 4.2, AfterViewChecked is broken and not called after panel is updated
         if (this.suggestionsUpdated && this.overlayViewChild) {
@@ -2076,19 +2132,21 @@ class AutoComplete extends BaseComponent {
             i0.ɵɵcontentQuery(dirIndex, _c8, 5);
             i0.ɵɵcontentQuery(dirIndex, _c9, 5);
             i0.ɵɵcontentQuery(dirIndex, _c10, 5);
+            i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.emptyTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footerTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selecteditemTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectedItemTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.groupTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loaderTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.removeiconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loadingiconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.cleariconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdowniconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.removeIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loadingIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.clearIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdownIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t);
         } }, viewQuery: function AutoComplete_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c11, 5);
             i0.ɵɵviewQuery(_c12, 5);
@@ -2183,9 +2241,9 @@ class AutoComplete extends BaseComponent {
                 [fluid]="hasFluid()"
             />
             <ng-container *ngIf="filled && !disabled && showClear && !loading">
-                <TimesIcon *ngIf="!cleariconTemplate" [styleClass]="'p-autocomplete-clear-icon'" (click)="clear()" [attr.aria-hidden]="true" />
-                <span *ngIf="cleariconTemplate" class="p-autocomplete-clear-icon" (click)="clear()" [attr.aria-hidden]="true">
-                    <ng-template *ngTemplateOutlet="cleariconTemplate"></ng-template>
+                <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [styleClass]="'p-autocomplete-clear-icon'" (click)="clear()" [attr.aria-hidden]="true" />
+                <span *ngIf="clearIconTemplate || _clearIconTemplate" class="p-autocomplete-clear-icon" (click)="clear()" [attr.aria-hidden]="true">
+                    <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
                 </span>
             </ng-container>
 
@@ -2212,9 +2270,9 @@ class AutoComplete extends BaseComponent {
                     [attr.aria-posinset]="i + 1"
                     [attr.aria-selected]="true"
                 >
-                    <ng-container *ngTemplateOutlet="selecteditemTemplate; context: { $implicit: option }"></ng-container>
-                    <p-chip styleClass="p-autocomplete-chip" *ngIf="!selecteditemTemplate" [label]="getOptionLabel(option)" [removable]="true">
-                        <ng-container *ngIf="!removeiconTemplate">
+                    <ng-container *ngTemplateOutlet="selectedItemTemplate || _selectedItemTemplate; context: { $implicit: option }"></ng-container>
+                    <p-chip styleClass="p-autocomplete-chip" *ngIf="!selectedItemTemplate && !_selectedItemTemplate" [label]="getOptionLabel(option)" [removable]="true">
+                        <ng-container *ngIf="!removeIconTemplate && !_removeIconTemplate">
                             <ng-template #removeicon>
                                 <span class="p-autocomplete-chip-icon" (click)="!readonly ? removeOption($event, i) : ''">
                                     <TimesCircleIcon [styleClass]="'p-autocomplete-chip-icon'" [attr.aria-hidden]="true" />
@@ -2222,8 +2280,8 @@ class AutoComplete extends BaseComponent {
                             </ng-template>
                         </ng-container>
                     </p-chip>
-                    <span *ngIf="removeiconTemplate" [attr.aria-hidden]="true">
-                        <ng-template *ngTemplateOutlet="removeiconTemplate; context: { class: 'p-autocomplete-chip-icon' }"></ng-template>
+                    <span *ngIf="removeIconTemplate || _removeIconTemplate" [attr.aria-hidden]="true">
+                        <ng-template *ngTemplateOutlet="removeIconTemplate || _removeIconTemplate; context: { class: 'p-autocomplete-chip-icon' }"></ng-template>
                     </span>
                 </li>
                 <li class="p-autocomplete-input-chip" role="option">
@@ -2262,16 +2320,16 @@ class AutoComplete extends BaseComponent {
                 </li>
             </ul>
             <ng-container *ngIf="loading">
-                <SpinnerIcon *ngIf="!loadingiconTemplate" [styleClass]="'p-autocomplete-loader'" [spin]="true" [attr.aria-hidden]="true" />
-                <span *ngIf="loadingiconTemplate" class="p-autocomplete-loader pi-spin " [attr.aria-hidden]="true">
-                    <ng-template *ngTemplateOutlet="loadingiconTemplate"></ng-template>
+                <SpinnerIcon *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [styleClass]="'p-autocomplete-loader'" [spin]="true" [attr.aria-hidden]="true" />
+                <span *ngIf="loadingIconTemplate || _loadingIconTemplate" class="p-autocomplete-loader pi-spin " [attr.aria-hidden]="true">
+                    <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
                 </span>
             </ng-container>
             <button #ddBtn type="button" [attr.aria-label]="dropdownAriaLabel" class="p-autocomplete-dropdown" [disabled]="disabled" pRipple (click)="handleDropdownClick($event)" *ngIf="dropdown" [attr.tabindex]="tabindex">
                 <span *ngIf="dropdownIcon" [ngClass]="dropdownIcon" [attr.aria-hidden]="true"></span>
                 <ng-container *ngIf="!dropdownIcon">
-                    <ChevronDownIcon *ngIf="!dropdowniconTemplate" />
-                    <ng-template *ngTemplateOutlet="dropdowniconTemplate"></ng-template>
+                    <ChevronDownIcon *ngIf="!dropdownIconTemplate && !_dropdownIconTemplate" />
+                    <ng-template *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate"></ng-template>
                 </ng-container>
             </button>
             <p-overlay
@@ -2287,7 +2345,7 @@ class AutoComplete extends BaseComponent {
             >
                 <ng-template #content>
                     <div [ngClass]="panelClass" [ngStyle]="panelStyle" [class]="panelStyleClass">
-                        <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+                        <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
                         <div class="p-autocomplete-list-container" [style.max-height]="virtualScroll ? 'auto' : scrollHeight">
                             <p-scroller
                                 *ngIf="virtualScroll"
@@ -2303,9 +2361,9 @@ class AutoComplete extends BaseComponent {
                                 <ng-template #content let-items let-scrollerOptions="options">
                                     <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
                                 </ng-template>
-                                <ng-container *ngIf="loaderTemplate">
+                                <ng-container *ngIf="loaderTemplate || _loaderTemplate">
                                     <ng-template #loader let-scrollerOptions="options">
-                                        <ng-container *ngTemplateOutlet="loader; context: { options: scrollerOptions }"></ng-container>
+                                        <ng-container *ngTemplateOutlet="loaderTemplate || _loaderTemplate; context: { options: scrollerOptions }"></ng-container>
                                     </ng-template>
                                 </ng-container>
                             </p-scroller>
@@ -2339,10 +2397,10 @@ class AutoComplete extends BaseComponent {
                                             (click)="onOptionSelect($event, option)"
                                             (mouseenter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
                                         >
-                                            <span *ngIf="!itemTemplate">{{ getOptionLabel(option) }}</span>
+                                            <span *ngIf="!itemTemplate && !_itemTemplate">{{ getOptionLabel(option) }}</span>
                                             <ng-container
                                                 *ngTemplateOutlet="
-                                                    itemTemplate;
+                                                    itemTemplate || _itemTemplate;
                                                     context: {
                                                         $implicit: option,
                                                         index: scrollerOptions.getOptions ? scrollerOptions.getOptions(i) : i
@@ -2353,14 +2411,14 @@ class AutoComplete extends BaseComponent {
                                     </ng-container>
                                 </ng-template>
                                 <li *ngIf="!items || (items && items.length === 0 && showEmptyMessage)" class="p-autocomplete-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
-                                    <ng-container *ngIf="!emptyTemplate; else empty">
+                                    <ng-container *ngIf="!emptyTemplate && !_emptyTemplate; else empty">
                                         {{ searchResultMessageText }}
                                     </ng-container>
-                                    <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
+                                    <ng-container #empty *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
                                 </li>
                             </ul>
                         </ng-template>
-                        <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+                        <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
                     </div>
                     <span role="status" aria-live="polite" class="p-hidden-accessible">
                         {{ selectedMessageText }}
@@ -2591,7 +2649,7 @@ class AutoComplete extends BaseComponent {
         }], footerTemplate: [{
             type: ContentChild,
             args: ['footer']
-        }], selecteditemTemplate: [{
+        }], selectedItemTemplate: [{
             type: ContentChild,
             args: ['selecteditem']
         }], groupTemplate: [{
@@ -2600,20 +2658,23 @@ class AutoComplete extends BaseComponent {
         }], loaderTemplate: [{
             type: ContentChild,
             args: ['loader']
-        }], removeiconTemplate: [{
+        }], removeIconTemplate: [{
             type: ContentChild,
             args: ['removeicon']
-        }], loadingiconTemplate: [{
+        }], loadingIconTemplate: [{
             type: ContentChild,
             args: ['loadingicon']
-        }], cleariconTemplate: [{
+        }], clearIconTemplate: [{
             type: ContentChild,
             args: ['clearicon']
-        }], dropdowniconTemplate: [{
+        }], dropdownIconTemplate: [{
             type: ContentChild,
             args: ['dropdownicon']
+        }], templates: [{
+            type: ContentChildren,
+            args: [PrimeTemplate]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AutoComplete, { className: "AutoComplete", filePath: "autocomplete.ts", lineNumber: 288 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AutoComplete, { className: "AutoComplete", filePath: "autocomplete.ts", lineNumber: 290 }); })();
 class AutoCompleteModule {
     static ɵfac = function AutoCompleteModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AutoCompleteModule)(); };
     static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: AutoCompleteModule });