primeng 18.0.0-rc.2 → 18.0.1

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';
@@ -86,9 +86,6 @@ const theme = ({ dt }) => `
 }
 
 .p-autocomplete-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
     background: ${dt('autocomplete.overlay.background')};
     color: ${dt('autocomplete.overlay.color')};
     border: 1px solid ${dt('autocomplete.overlay.border.color')};
@@ -283,6 +280,10 @@ const theme = ({ dt }) => `
     color: ${dt('autocomplete.dropdown.color')};
 }
 
+.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-clear-icon {
+    right: calc(${dt('autocomplete.padding.x')} + ${dt('autocomplete.dropdown.width')});
+}
+
 p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input,
 p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input-multiple {
     border-color: ${dt('autocomplete.invalid.border.color')};
@@ -451,19 +452,19 @@ const _c25 = () => ({});
 const _c26 = (a0, a1) => ({ $implicit: a0, index: a1 });
 function AutoComplete_input_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 18, 3);
+    i0.ɵɵelementStart(0, "input", 19, 3);
     i0.ɵɵlistener("input", function AutoComplete_input_2_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onInput($event)); })("keydown", function AutoComplete_input_2_Template_input_keydown_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onKeyDown($event)); })("change", function AutoComplete_input_2_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onInputChange($event)); })("focus", function AutoComplete_input_2_Template_input_focus_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onInputFocus($event)); })("blur", function AutoComplete_input_2_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onInputBlur($event)); })("paste", function AutoComplete_input_2_Template_input_paste_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onInputPaste($event)); })("keyup", function AutoComplete_input_2_Template_input_keyup_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onInputKeyUp($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_26_0;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵclassMap(ctx_r2.inputStyleClass);
-    i0.ɵɵproperty("pAutoFocus", ctx_r2.autofocus)("ngClass", "p-autocomplete-input")("ngStyle", ctx_r2.inputStyle)("type", ctx_r2.type)("variant", ctx_r2.variant)("autocomplete", ctx_r2.autocomplete)("required", ctx_r2.required)("name", ctx_r2.name)("size", ctx_r2.size)("tabindex", !ctx_r2.disabled ? ctx_r2.tabindex : -1)("readonly", ctx_r2.readonly)("disabled", ctx_r2.disabled)("fluid", ctx_r2.hasFluid());
+    i0.ɵɵproperty("pAutoFocus", ctx_r2.autofocus)("ngClass", "p-autocomplete-input")("ngStyle", ctx_r2.inputStyle)("type", ctx_r2.type)("variant", ctx_r2.variant)("autocomplete", ctx_r2.autocomplete)("required", ctx_r2.required)("name", ctx_r2.name)("pSize", ctx_r2.size)("tabindex", !ctx_r2.disabled ? ctx_r2.tabindex : -1)("readonly", ctx_r2.readonly)("disabled", ctx_r2.disabled)("fluid", ctx_r2.hasFluid());
     i0.ɵɵattribute("value", ctx_r2.inputValue())("id", ctx_r2.inputId)("placeholder", ctx_r2.placeholder)("maxlength", ctx_r2.maxlength)("aria-label", ctx_r2.ariaLabel)("aria-labelledby", ctx_r2.ariaLabelledBy)("aria-required", ctx_r2.required)("aria-expanded", (tmp_26_0 = ctx_r2.overlayVisible) !== null && tmp_26_0 !== undefined ? tmp_26_0 : false)("aria-controls", ctx_r2.overlayVisible ? ctx_r2.id + "_list" : null)("aria-activedescendant", ctx_r2.focused ? ctx_r2.focusedOptionId : undefined);
 } }
 function AutoComplete_ng_container_3_TimesIcon_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "TimesIcon", 21);
+    i0.ɵɵelementStart(0, "TimesIcon", 22);
     i0.ɵɵlistener("click", function AutoComplete_ng_container_3_TimesIcon_1_Template_TimesIcon_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.clear()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -476,35 +477,35 @@ function AutoComplete_ng_container_3_span_2_1_Template(rf, ctx) { if (rf & 1) {
 } }
 function AutoComplete_ng_container_3_span_2_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 22);
+    i0.ɵɵelementStart(0, "span", 23);
     i0.ɵɵlistener("click", function AutoComplete_ng_container_3_span_2_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.clear()); });
-    i0.ɵɵtemplate(1, AutoComplete_ng_container_3_span_2_1_Template, 1, 0, null, 23);
+    i0.ɵɵtemplate(1, AutoComplete_ng_container_3_span_2_1_Template, 1, 0, null, 24);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵattribute("aria-hidden", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.clearicon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.clearIconTemplate || ctx_r2._clearIconTemplate);
 } }
 function AutoComplete_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, AutoComplete_ng_container_3_TimesIcon_1_Template, 1, 2, "TimesIcon", 19)(2, AutoComplete_ng_container_3_span_2_Template, 2, 2, "span", 20);
+    i0.ɵɵtemplate(1, AutoComplete_ng_container_3_TimesIcon_1_Template, 1, 2, "TimesIcon", 20)(2, AutoComplete_ng_container_3_span_2_Template, 2, 2, "span", 21);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.clearicon);
+    i0.ɵɵproperty("ngIf", !ctx_r2.clearIconTemplate && !ctx_r2._clearIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.clearicon);
+    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);
 } }
 function AutoComplete_ul_4_li_2_p_chip_3_ng_container_1_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 32);
+    i0.ɵɵelementStart(0, "span", 33);
     i0.ɵɵlistener("click", function AutoComplete_ul_4_li_2_p_chip_3_ng_container_1_ng_template_1_Template_span_click_0_listener($event) { i0.ɵɵrestoreView(_r7); const i_r8 = i0.ɵɵnextContext(3).index; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(!ctx_r2.readonly ? ctx_r2.removeOption($event, i_r8) : ""); });
-    i0.ɵɵelement(1, "TimesCircleIcon", 33);
+    i0.ɵɵelement(1, "TimesCircleIcon", 34);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
@@ -517,15 +518,15 @@ function AutoComplete_ul_4_li_2_p_chip_3_ng_container_1_Template(rf, ctx) { if (
     i0.ɵɵelementContainerEnd();
 } }
 function AutoComplete_ul_4_li_2_p_chip_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p-chip", 31);
-    i0.ɵɵtemplate(1, AutoComplete_ul_4_li_2_p_chip_3_ng_container_1_Template, 3, 0, "ng-container", 14);
+    i0.ɵɵelementStart(0, "p-chip", 32);
+    i0.ɵɵtemplate(1, AutoComplete_ul_4_li_2_p_chip_3_ng_container_1_Template, 3, 0, "ng-container", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const option_r9 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("label", ctx_r2.getOptionLabel(option_r9))("removable", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.removeicon);
+    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) {
@@ -533,17 +534,17 @@ function AutoComplete_ul_4_li_2_span_4_1_Template(rf, ctx) { if (rf & 1) {
 } }
 function AutoComplete_ul_4_li_2_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵtemplate(1, AutoComplete_ul_4_li_2_span_4_1_Template, 1, 0, null, 29);
+    i0.ɵɵtemplate(1, AutoComplete_ul_4_li_2_span_4_1_Template, 1, 0, null, 30);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵattribute("aria-hidden", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.removeicon)("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", 28, 5);
-    i0.ɵɵtemplate(2, AutoComplete_ul_4_li_2_ng_container_2_Template, 1, 0, "ng-container", 29)(3, AutoComplete_ul_4_li_2_p_chip_3_Template, 2, 3, "p-chip", 30)(4, AutoComplete_ul_4_li_2_span_4_Template, 2, 4, "span", 14);
+    i0.ɵɵelementStart(0, "li", 29, 5);
+    i0.ɵɵtemplate(2, AutoComplete_ul_4_li_2_ng_container_2_Template, 1, 0, "ng-container", 30)(3, AutoComplete_ul_4_li_2_p_chip_3_Template, 2, 3, "p-chip", 31)(4, AutoComplete_ul_4_li_2_span_4_Template, 2, 4, "span", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const option_r9 = ctx.$implicit;
@@ -552,18 +553,18 @@ 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.selecteditem)("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.selecteditem);
+    i0.ɵɵproperty("ngIf", !ctx_r2.selectedItemTemplate && !ctx_r2._selectedItemTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.removeicon);
+    i0.ɵɵproperty("ngIf", ctx_r2.removeIconTemplate || ctx_r2._removeIconTemplate);
 } }
 function AutoComplete_ul_4_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "ul", 24, 4);
+    i0.ɵɵelementStart(0, "ul", 25, 4);
     i0.ɵɵlistener("focus", function AutoComplete_ul_4_Template_ul_focus_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onMultipleContainerFocus($event)); })("blur", function AutoComplete_ul_4_Template_ul_blur_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onMultipleContainerBlur($event)); })("keydown", function AutoComplete_ul_4_Template_ul_keydown_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onMultipleContainerKeyDown($event)); });
-    i0.ɵɵtemplate(2, AutoComplete_ul_4_li_2_Template, 5, 14, "li", 25);
-    i0.ɵɵelementStart(3, "li", 26)(4, "input", 27, 3);
+    i0.ɵɵtemplate(2, AutoComplete_ul_4_li_2_Template, 5, 14, "li", 26);
+    i0.ɵɵelementStart(3, "li", 27)(4, "input", 28, 3);
     i0.ɵɵlistener("input", function AutoComplete_ul_4_Template_input_input_4_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onInput($event)); })("keydown", function AutoComplete_ul_4_Template_input_keydown_4_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onKeyDown($event)); })("change", function AutoComplete_ul_4_Template_input_change_4_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onInputChange($event)); })("focus", function AutoComplete_ul_4_Template_input_focus_4_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onInputFocus($event)); })("blur", function AutoComplete_ul_4_Template_input_blur_4_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onInputBlur($event)); })("paste", function AutoComplete_ul_4_Template_input_paste_4_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onInputPaste($event)); })("keyup", function AutoComplete_ul_4_Template_input_keyup_4_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onInputKeyUp($event)); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -579,7 +580,7 @@ function AutoComplete_ul_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵattribute("type", ctx_r2.type)("id", ctx_r2.inputId)("name", ctx_r2.name)("placeholder", !ctx_r2.filled ? ctx_r2.placeholder : null)("maxlength", ctx_r2.maxlength)("aria-label", ctx_r2.ariaLabel)("aria-labelledby", ctx_r2.ariaLabelledBy)("aria-required", ctx_r2.required)("aria-expanded", (tmp_28_0 = ctx_r2.overlayVisible) !== null && tmp_28_0 !== undefined ? tmp_28_0 : false)("aria-controls", ctx_r2.overlayVisible ? ctx_r2.id + "_list" : null)("aria-activedescendant", ctx_r2.focused ? ctx_r2.focusedOptionId : undefined);
 } }
 function AutoComplete_ng_container_5_SpinnerIcon_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "SpinnerIcon", 36);
+    i0.ɵɵelement(0, "SpinnerIcon", 37);
 } if (rf & 2) {
     i0.ɵɵproperty("styleClass", "p-autocomplete-loader")("spin", true);
     i0.ɵɵattribute("aria-hidden", true);
@@ -589,28 +590,28 @@ function AutoComplete_ng_container_5_span_2_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, AutoComplete_ng_container_5_span_2_1_ng_template_0_Template, 0, 0, "ng-template");
 } }
 function AutoComplete_ng_container_5_span_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 37);
-    i0.ɵɵtemplate(1, AutoComplete_ng_container_5_span_2_1_Template, 1, 0, null, 23);
+    i0.ɵɵelementStart(0, "span", 38);
+    i0.ɵɵtemplate(1, AutoComplete_ng_container_5_span_2_1_Template, 1, 0, null, 24);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵattribute("aria-hidden", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.loadingicon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.loadingIconTemplate || ctx_r2._loadingIconTemplate);
 } }
 function AutoComplete_ng_container_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, AutoComplete_ng_container_5_SpinnerIcon_1_Template, 1, 3, "SpinnerIcon", 34)(2, AutoComplete_ng_container_5_span_2_Template, 2, 2, "span", 35);
+    i0.ɵɵtemplate(1, AutoComplete_ng_container_5_SpinnerIcon_1_Template, 1, 3, "SpinnerIcon", 35)(2, AutoComplete_ng_container_5_span_2_Template, 2, 2, "span", 36);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.loadingicon);
+    i0.ɵɵproperty("ngIf", !ctx_r2.loadingIconTemplate && !ctx_r2._loadingIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.loadingicon);
+    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", 40);
+    i0.ɵɵelement(0, "span", 41);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r2.dropdownIcon);
@@ -625,20 +626,20 @@ function AutoComplete_button_6_ng_container_3_2_Template(rf, ctx) { if (rf & 1)
 } }
 function AutoComplete_button_6_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, AutoComplete_button_6_ng_container_3_ChevronDownIcon_1_Template, 1, 0, "ChevronDownIcon", 14)(2, AutoComplete_button_6_ng_container_3_2_Template, 1, 0, null, 23);
+    i0.ɵɵtemplate(1, AutoComplete_button_6_ng_container_3_ChevronDownIcon_1_Template, 1, 0, "ChevronDownIcon", 15)(2, AutoComplete_button_6_ng_container_3_2_Template, 1, 0, null, 24);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.dropdownicon);
+    i0.ɵɵproperty("ngIf", !ctx_r2.dropdownIconTemplate && !ctx_r2._dropdownIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.dropdownicon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.dropdownIconTemplate || ctx_r2._dropdownIconTemplate);
 } }
 function AutoComplete_button_6_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 38, 7);
+    i0.ɵɵelementStart(0, "button", 39, 7);
     i0.ɵɵlistener("click", function AutoComplete_button_6_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleDropdownClick($event)); });
-    i0.ɵɵtemplate(2, AutoComplete_button_6_span_2_Template, 1, 2, "span", 39)(3, AutoComplete_button_6_ng_container_3_Template, 3, 2, "ng-container", 14);
+    i0.ɵɵtemplate(2, AutoComplete_button_6_span_2_Template, 1, 2, "span", 40)(3, AutoComplete_button_6_ng_container_3_Template, 3, 2, "ng-container", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -656,7 +657,7 @@ function AutoComplete_ng_template_9_p_scroller_3_ng_template_2_ng_container_0_Te
     i0.ɵɵelementContainer(0);
 } }
 function AutoComplete_ng_template_9_p_scroller_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, AutoComplete_ng_template_9_p_scroller_3_ng_template_2_ng_container_0_Template, 1, 0, "ng-container", 29);
+    i0.ɵɵtemplate(0, AutoComplete_ng_template_9_p_scroller_3_ng_template_2_ng_container_0_Template, 1, 0, "ng-container", 30);
 } if (rf & 2) {
     const items_r12 = ctx.$implicit;
     const scrollerOptions_r13 = ctx.options;
@@ -668,12 +669,11 @@ function AutoComplete_ng_template_9_p_scroller_3_ng_container_4_ng_template_1_ng
     i0.ɵɵelementContainer(0);
 } }
 function AutoComplete_ng_template_9_p_scroller_3_ng_container_4_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, AutoComplete_ng_template_9_p_scroller_3_ng_container_4_ng_template_1_ng_container_0_Template, 1, 0, "ng-container", 29);
+    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);
@@ -682,23 +682,23 @@ function AutoComplete_ng_template_9_p_scroller_3_ng_container_4_Template(rf, ctx
 } }
 function AutoComplete_ng_template_9_p_scroller_3_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "p-scroller", 45, 9);
+    i0.ɵɵelementStart(0, "p-scroller", 46, 9);
     i0.ɵɵlistener("onLazyLoad", function AutoComplete_ng_template_9_p_scroller_3_Template_p_scroller_onLazyLoad_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onLazyLoad.emit($event)); });
-    i0.ɵɵtemplate(2, AutoComplete_ng_template_9_p_scroller_3_ng_template_2_Template, 1, 5, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor)(4, AutoComplete_ng_template_9_p_scroller_3_ng_container_4_Template, 3, 0, "ng-container", 14);
+    i0.ɵɵtemplate(2, AutoComplete_ng_template_9_p_scroller_3_ng_template_2_Template, 1, 5, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor)(4, AutoComplete_ng_template_9_p_scroller_3_ng_container_4_Template, 3, 0, "ng-container", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     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.loader);
+    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);
 } }
 function AutoComplete_ng_template_9_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, AutoComplete_ng_template_9_ng_container_4_ng_container_1_Template, 1, 0, "ng-container", 29);
+    i0.ɵɵtemplate(1, AutoComplete_ng_template_9_ng_container_4_ng_container_1_Template, 1, 0, "ng-container", 30);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext();
@@ -712,132 +712,131 @@ 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);
 } }
 function AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "li", 49);
-    i0.ɵɵtemplate(2, AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_0_span_2_Template, 2, 1, "span", 14)(3, AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_0_ng_container_3_Template, 1, 0, "ng-container", 29);
+    i0.ɵɵelementStart(1, "li", 50);
+    i0.ɵɵtemplate(2, AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_0_span_2_Template, 2, 1, "span", 15)(3, AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_0_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(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", 50);
-    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.ɵɵtemplate(2, AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_1_span_2_Template, 2, 1, "span", 14)(3, AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_1_ng_container_3_Template, 1, 0, "ng-container", 29);
+    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(_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.item);
+    i0.ɵɵproperty("ngIf", !ctx_r2.itemTemplate && !ctx_r2._itemTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.item)("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", 14)(1, AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_1_Template, 4, 17, "ng-container", 14);
+    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_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0);
+function AutoComplete_ng_template_9_ng_template_5_li_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.searchResultMessageText, " ");
 } }
-function AutoComplete_ng_template_9_ng_template_5_li_3_Conditional_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0);
-} }
-function AutoComplete_ng_template_9_ng_template_5_li_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, AutoComplete_ng_template_9_ng_template_5_li_3_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 23);
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.empty);
+function AutoComplete_ng_template_9_ng_template_5_li_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, null, 12);
 } }
 function AutoComplete_ng_template_9_ng_template_5_li_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "li", 51);
-    i0.ɵɵtemplate(1, AutoComplete_ng_template_9_ng_template_5_li_3_Conditional_1_Template, 1, 1)(2, AutoComplete_ng_template_9_ng_template_5_li_3_Conditional_2_Template, 1, 1, "ng-container");
+    i0.ɵɵelementStart(0, "li", 52);
+    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(2, _c22, scrollerOptions_r20.itemSize + "px"));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c22, scrollerOptions_r19.itemSize + "px"));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.empty ? 1 : 2);
+    i0.ɵɵproperty("ngIf", !ctx_r2.emptyTemplate && !ctx_r2._emptyTemplate)("ngIfElse", ctx_r2.empty);
+    i0.ɵɵadvance();
+    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", 46, 11);
-    i0.ɵɵtemplate(2, AutoComplete_ng_template_9_ng_template_5_ng_template_2_Template, 2, 2, "ng-template", 47)(3, AutoComplete_ng_template_9_ng_template_5_li_3_Template, 3, 4, "li", 48);
+    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);
 } }
 function AutoComplete_ng_template_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 41);
-    i0.ɵɵtemplate(1, AutoComplete_ng_template_9_ng_container_1_Template, 1, 0, "ng-container", 23);
-    i0.ɵɵelementStart(2, "div", 42);
-    i0.ɵɵtemplate(3, AutoComplete_ng_template_9_p_scroller_3_Template, 5, 10, "p-scroller", 43)(4, AutoComplete_ng_template_9_ng_container_4_Template, 2, 6, "ng-container", 14);
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵtemplate(1, AutoComplete_ng_template_9_ng_container_1_Template, 1, 0, "ng-container", 24);
+    i0.ɵɵelementStart(2, "div", 43);
+    i0.ɵɵtemplate(3, AutoComplete_ng_template_9_p_scroller_3_Template, 5, 10, "p-scroller", 44)(4, AutoComplete_ng_template_9_ng_container_4_Template, 2, 6, "ng-container", 15);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(5, AutoComplete_ng_template_9_ng_template_5_Template, 4, 7, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor)(7, AutoComplete_ng_template_9_ng_container_7_Template, 1, 0, "ng-container", 23);
+    i0.ɵɵtemplate(5, AutoComplete_ng_template_9_ng_template_5_Template, 4, 7, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor)(7, AutoComplete_ng_template_9_ng_container_7_Template, 1, 0, "ng-container", 24);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 44);
+    i0.ɵɵelementStart(8, "span", 45);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -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.header);
+    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.footer);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.footerTemplate || ctx_r2._footerTemplate);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.selectedMessageText, " ");
 } }
@@ -1297,27 +1296,27 @@ class AutoComplete extends BaseComponent {
      * Custom item template.
      * @group Templates
      */
-    item;
+    itemTemplate;
     /**
      * Custom empty message template.
      * @group Templates
      */
-    empty;
+    emptyTemplate;
     /**
      * Custom header template.
      * @group Templates
      */
-    header;
+    headerTemplate;
     /**
      * Custom footer template.
      * @group Templates
      */
-    footer;
+    footerTemplate;
     /**
      * Custom selected item template.
      * @group Templates
      */
-    selecteditem;
+    selectedItemTemplate;
     /**
      * Custom group item template.
      * @group Templates
@@ -1327,27 +1326,27 @@ class AutoComplete extends BaseComponent {
      * Custom loader template.
      * @group Templates
      */
-    loader;
+    loaderTemplate;
     /**
      * Custom remove icon template.
      * @group Templates
      */
-    removeicon;
+    removeIconTemplate;
     /**
      * Custom loading icon template.
      * @group Templates
      */
-    loadingicon;
+    loadingIconTemplate;
     /**
      * Custom clear icon template.
      * @group Templates
      */
-    clearicon;
+    clearIconTemplate;
     /**
      * Custom dropdown icon template.
      * @group Templates
      */
-    dropdownicon;
+    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) {
@@ -1488,7 +1544,7 @@ class AutoComplete extends BaseComponent {
     }
     handleSuggestionsChange() {
         if (this.loading) {
-            this._suggestions()?.length > 0 ? this.show() : !!this.empty ? this.show() : this.hide();
+            this._suggestions()?.length > 0 ? this.show() : !!this.emptyTemplate ? this.show() : this.hide();
             const focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
             this.focusedOptionIndex.set(focusedOptionIndex);
             this.suggestionsUpdated = true;
@@ -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.item = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.empty = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.header = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footer = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selecteditem = _t.first);
+            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.groupTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loader = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.removeicon = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loadingicon = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.clearicon = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdownicon = _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.templates = _t);
         } }, viewQuery: function AutoComplete_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c11, 5);
             i0.ɵɵviewQuery(_c12, 5);
@@ -2108,12 +2166,12 @@ class AutoComplete extends BaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemsViewChild = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scroller = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.overlayViewChild = _t.first);
-        } }, inputs: { minLength: [2, "minLength", "minLength", numberAttribute], delay: [2, "delay", "delay", numberAttribute], style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", inputStyle: "inputStyle", inputId: "inputId", inputStyleClass: "inputStyleClass", placeholder: "placeholder", readonly: [2, "readonly", "readonly", booleanAttribute], disabled: [2, "disabled", "disabled", booleanAttribute], scrollHeight: "scrollHeight", lazy: [2, "lazy", "lazy", booleanAttribute], virtualScroll: [2, "virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: [2, "virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", maxlength: [2, "maxlength", "maxlength", (value) => numberAttribute(value, null)], name: "name", required: [2, "required", "required", booleanAttribute], size: "size", appendTo: "appendTo", autoHighlight: [2, "autoHighlight", "autoHighlight", booleanAttribute], forceSelection: [2, "forceSelection", "forceSelection", booleanAttribute], type: "type", autoZIndex: [2, "autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: [2, "baseZIndex", "baseZIndex", numberAttribute], ariaLabel: "ariaLabel", dropdownAriaLabel: "dropdownAriaLabel", ariaLabelledBy: "ariaLabelledBy", dropdownIcon: "dropdownIcon", unique: [2, "unique", "unique", booleanAttribute], group: [2, "group", "group", booleanAttribute], completeOnFocus: [2, "completeOnFocus", "completeOnFocus", booleanAttribute], showClear: [2, "showClear", "showClear", booleanAttribute], field: "field", dropdown: [2, "dropdown", "dropdown", booleanAttribute], showEmptyMessage: [2, "showEmptyMessage", "showEmptyMessage", booleanAttribute], dropdownMode: "dropdownMode", multiple: [2, "multiple", "multiple", booleanAttribute], tabindex: [2, "tabindex", "tabindex", numberAttribute], dataKey: "dataKey", emptyMessage: "emptyMessage", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autofocus: [2, "autofocus", "autofocus", booleanAttribute], autocomplete: "autocomplete", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", overlayOptions: "overlayOptions", suggestions: "suggestions", itemSize: "itemSize", optionLabel: "optionLabel", optionValue: "optionValue", id: "id", searchMessage: "searchMessage", emptySelectionMessage: "emptySelectionMessage", selectionMessage: "selectionMessage", autoOptionFocus: [2, "autoOptionFocus", "autoOptionFocus", booleanAttribute], selectOnFocus: [2, "selectOnFocus", "selectOnFocus", booleanAttribute], searchLocale: [2, "searchLocale", "searchLocale", booleanAttribute], optionDisabled: "optionDisabled", focusOnHover: [2, "focusOnHover", "focusOnHover", booleanAttribute], typeahead: [2, "typeahead", "typeahead", booleanAttribute], variant: "variant", fluid: [2, "fluid", "fluid", booleanAttribute] }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad" }, standalone: true, features: [i0.ɵɵProvidersFeature([AUTOCOMPLETE_VALUE_ACCESSOR, AutoCompleteStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 11, vars: 15, consts: [["container", ""], ["overlay", ""], ["content", ""], ["focusInput", ""], ["multiContainer", ""], ["token", ""], ["removeicon", ""], ["ddBtn", ""], ["buildInItems", ""], ["scroller", ""], ["loader", ""], ["items", ""], [2, "position", "relative", 3, "click", "ngClass", "ngStyle"], ["pInputText", "", "aria-autocomplete", "list", "role", "combobox", 3, "pAutoFocus", "ngClass", "ngStyle", "class", "type", "variant", "autocomplete", "required", "name", "size", "tabindex", "readonly", "disabled", "fluid", "input", "keydown", "change", "focus", "blur", "paste", "keyup", 4, "ngIf"], [4, "ngIf"], ["role", "listbox", 3, "ngClass", "tabindex", "focus", "blur", "keydown", 4, "ngIf"], ["type", "button", "class", "p-autocomplete-dropdown", "pRipple", "", 3, "disabled", "click", 4, "ngIf"], [3, "visibleChange", "onAnimationStart", "onHide", "visible", "options", "target", "appendTo", "showTransitionOptions", "hideTransitionOptions"], ["pInputText", "", "aria-autocomplete", "list", "role", "combobox", 3, "input", "keydown", "change", "focus", "blur", "paste", "keyup", "pAutoFocus", "ngClass", "ngStyle", "type", "variant", "autocomplete", "required", "name", "size", "tabindex", "readonly", "disabled", "fluid"], [3, "styleClass", "click", 4, "ngIf"], ["class", "p-autocomplete-clear-icon", 3, "click", 4, "ngIf"], [3, "click", "styleClass"], [1, "p-autocomplete-clear-icon", 3, "click"], [4, "ngTemplateOutlet"], ["role", "listbox", 3, "focus", "blur", "keydown", "ngClass", "tabindex"], ["role", "option", 3, "ngClass", 4, "ngFor", "ngForOf"], ["role", "option", 1, "p-autocomplete-input-chip"], ["role", "combobox", "aria-autocomplete", "list", 3, "input", "keydown", "change", "focus", "blur", "paste", "keyup", "pAutoFocus", "ngClass", "ngStyle", "autocomplete", "required", "tabindex", "readonly", "disabled"], ["role", "option", 3, "ngClass"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["styleClass", "p-autocomplete-chip", 3, "label", "removable", 4, "ngIf"], ["styleClass", "p-autocomplete-chip", 3, "label", "removable"], [1, "p-autocomplete-chip-icon", 3, "click"], [3, "styleClass"], [3, "styleClass", "spin", 4, "ngIf"], ["class", "p-autocomplete-loader pi-spin ", 4, "ngIf"], [3, "styleClass", "spin"], [1, "p-autocomplete-loader", "pi-spin"], ["type", "button", "pRipple", "", 1, "p-autocomplete-dropdown", 3, "click", "disabled"], [3, "ngClass", 4, "ngIf"], [3, "ngClass"], [3, "ngClass", "ngStyle"], [1, "p-autocomplete-list-container"], [3, "items", "style", "itemSize", "autoSize", "lazy", "options", "onLazyLoad", 4, "ngIf"], ["role", "status", "aria-live", "polite", 1, "p-hidden-accessible"], [3, "onLazyLoad", "items", "itemSize", "autoSize", "lazy", "options"], ["role", "listbox", 1, "p-autocomplete-list", 3, "ngClass"], ["ngFor", "", 3, "ngForOf"], ["class", "p-autocomplete-empty-message", "role", "option", 3, "ngStyle", 4, "ngIf"], ["role", "option", 1, "p-autocomplete-option-group", 3, "ngStyle"], ["pRipple", "", "role", "option", 3, "click", "mouseenter", "ngStyle", "ngClass"], ["role", "option", 1, "p-autocomplete-empty-message", 3, "ngStyle"]], template: function AutoComplete_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { minLength: [2, "minLength", "minLength", numberAttribute], delay: [2, "delay", "delay", numberAttribute], style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", inputStyle: "inputStyle", inputId: "inputId", inputStyleClass: "inputStyleClass", placeholder: "placeholder", readonly: [2, "readonly", "readonly", booleanAttribute], disabled: [2, "disabled", "disabled", booleanAttribute], scrollHeight: "scrollHeight", lazy: [2, "lazy", "lazy", booleanAttribute], virtualScroll: [2, "virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: [2, "virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", maxlength: [2, "maxlength", "maxlength", (value) => numberAttribute(value, null)], name: "name", required: [2, "required", "required", booleanAttribute], size: "size", appendTo: "appendTo", autoHighlight: [2, "autoHighlight", "autoHighlight", booleanAttribute], forceSelection: [2, "forceSelection", "forceSelection", booleanAttribute], type: "type", autoZIndex: [2, "autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: [2, "baseZIndex", "baseZIndex", numberAttribute], ariaLabel: "ariaLabel", dropdownAriaLabel: "dropdownAriaLabel", ariaLabelledBy: "ariaLabelledBy", dropdownIcon: "dropdownIcon", unique: [2, "unique", "unique", booleanAttribute], group: [2, "group", "group", booleanAttribute], completeOnFocus: [2, "completeOnFocus", "completeOnFocus", booleanAttribute], showClear: [2, "showClear", "showClear", booleanAttribute], field: "field", dropdown: [2, "dropdown", "dropdown", booleanAttribute], showEmptyMessage: [2, "showEmptyMessage", "showEmptyMessage", booleanAttribute], dropdownMode: "dropdownMode", multiple: [2, "multiple", "multiple", booleanAttribute], tabindex: [2, "tabindex", "tabindex", numberAttribute], dataKey: "dataKey", emptyMessage: "emptyMessage", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autofocus: [2, "autofocus", "autofocus", booleanAttribute], autocomplete: "autocomplete", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", overlayOptions: "overlayOptions", suggestions: "suggestions", itemSize: "itemSize", optionLabel: "optionLabel", optionValue: "optionValue", id: "id", searchMessage: "searchMessage", emptySelectionMessage: "emptySelectionMessage", selectionMessage: "selectionMessage", autoOptionFocus: [2, "autoOptionFocus", "autoOptionFocus", booleanAttribute], selectOnFocus: [2, "selectOnFocus", "selectOnFocus", booleanAttribute], searchLocale: [2, "searchLocale", "searchLocale", booleanAttribute], optionDisabled: "optionDisabled", focusOnHover: [2, "focusOnHover", "focusOnHover", booleanAttribute], typeahead: [2, "typeahead", "typeahead", booleanAttribute], variant: "variant", fluid: [2, "fluid", "fluid", booleanAttribute] }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad" }, standalone: true, features: [i0.ɵɵProvidersFeature([AUTOCOMPLETE_VALUE_ACCESSOR, AutoCompleteStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 11, vars: 15, consts: [["container", ""], ["overlay", ""], ["content", ""], ["focusInput", ""], ["multiContainer", ""], ["token", ""], ["removeicon", ""], ["ddBtn", ""], ["buildInItems", ""], ["scroller", ""], ["loader", ""], ["items", ""], ["empty", ""], [2, "position", "relative", 3, "click", "ngClass", "ngStyle"], ["pInputText", "", "aria-autocomplete", "list", "role", "combobox", 3, "pAutoFocus", "ngClass", "ngStyle", "class", "type", "variant", "autocomplete", "required", "name", "pSize", "tabindex", "readonly", "disabled", "fluid", "input", "keydown", "change", "focus", "blur", "paste", "keyup", 4, "ngIf"], [4, "ngIf"], ["role", "listbox", 3, "ngClass", "tabindex", "focus", "blur", "keydown", 4, "ngIf"], ["type", "button", "class", "p-autocomplete-dropdown", "pRipple", "", 3, "disabled", "click", 4, "ngIf"], [3, "visibleChange", "onAnimationStart", "onHide", "visible", "options", "target", "appendTo", "showTransitionOptions", "hideTransitionOptions"], ["pInputText", "", "aria-autocomplete", "list", "role", "combobox", 3, "input", "keydown", "change", "focus", "blur", "paste", "keyup", "pAutoFocus", "ngClass", "ngStyle", "type", "variant", "autocomplete", "required", "name", "pSize", "tabindex", "readonly", "disabled", "fluid"], [3, "styleClass", "click", 4, "ngIf"], ["class", "p-autocomplete-clear-icon", 3, "click", 4, "ngIf"], [3, "click", "styleClass"], [1, "p-autocomplete-clear-icon", 3, "click"], [4, "ngTemplateOutlet"], ["role", "listbox", 3, "focus", "blur", "keydown", "ngClass", "tabindex"], ["role", "option", 3, "ngClass", 4, "ngFor", "ngForOf"], ["role", "option", 1, "p-autocomplete-input-chip"], ["role", "combobox", "aria-autocomplete", "list", 3, "input", "keydown", "change", "focus", "blur", "paste", "keyup", "pAutoFocus", "ngClass", "ngStyle", "autocomplete", "required", "tabindex", "readonly", "disabled"], ["role", "option", 3, "ngClass"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["styleClass", "p-autocomplete-chip", 3, "label", "removable", 4, "ngIf"], ["styleClass", "p-autocomplete-chip", 3, "label", "removable"], [1, "p-autocomplete-chip-icon", 3, "click"], [3, "styleClass"], [3, "styleClass", "spin", 4, "ngIf"], ["class", "p-autocomplete-loader pi-spin ", 4, "ngIf"], [3, "styleClass", "spin"], [1, "p-autocomplete-loader", "pi-spin"], ["type", "button", "pRipple", "", 1, "p-autocomplete-dropdown", 3, "click", "disabled"], [3, "ngClass", 4, "ngIf"], [3, "ngClass"], [3, "ngClass", "ngStyle"], [1, "p-autocomplete-list-container"], [3, "items", "style", "itemSize", "autoSize", "lazy", "options", "onLazyLoad", 4, "ngIf"], ["role", "status", "aria-live", "polite", 1, "p-hidden-accessible"], [3, "onLazyLoad", "items", "itemSize", "autoSize", "lazy", "options"], ["role", "listbox", 1, "p-autocomplete-list", 3, "ngClass"], ["ngFor", "", 3, "ngForOf"], ["class", "p-autocomplete-empty-message", "role", "option", 3, "ngStyle", 4, "ngIf"], ["role", "option", 1, "p-autocomplete-option-group", 3, "ngStyle"], ["pRipple", "", "role", "option", 3, "click", "mouseenter", "ngStyle", "ngClass"], ["role", "option", 1, "p-autocomplete-empty-message", 3, "ngStyle"], [4, "ngIf", "ngIfElse"]], template: function AutoComplete_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 12, 0);
+            i0.ɵɵelementStart(0, "div", 13, 0);
             i0.ɵɵlistener("click", function AutoComplete_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onContainerClick($event)); });
-            i0.ɵɵtemplate(2, AutoComplete_input_2_Template, 2, 25, "input", 13)(3, AutoComplete_ng_container_3_Template, 3, 2, "ng-container", 14)(4, AutoComplete_ul_4_Template, 6, 26, "ul", 15)(5, AutoComplete_ng_container_5_Template, 3, 2, "ng-container", 14)(6, AutoComplete_button_6_Template, 4, 5, "button", 16);
-            i0.ɵɵelementStart(7, "p-overlay", 17, 1);
+            i0.ɵɵtemplate(2, AutoComplete_input_2_Template, 2, 25, "input", 14)(3, AutoComplete_ng_container_3_Template, 3, 2, "ng-container", 15)(4, AutoComplete_ul_4_Template, 6, 26, "ul", 16)(5, AutoComplete_ng_container_5_Template, 3, 2, "ng-container", 15)(6, AutoComplete_button_6_Template, 4, 5, "button", 17);
+            i0.ɵɵelementStart(7, "p-overlay", 18, 1);
             i0.ɵɵtwoWayListener("visibleChange", function AutoComplete_Template_p_overlay_visibleChange_7_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.overlayVisible, $event) || (ctx.overlayVisible = $event); return i0.ɵɵresetView($event); });
             i0.ɵɵlistener("onAnimationStart", function AutoComplete_Template_p_overlay_onAnimationStart_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onOverlayAnimationStart($event)); })("onHide", function AutoComplete_Template_p_overlay_onHide_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.hide()); });
             i0.ɵɵtemplate(9, AutoComplete_ng_template_9_Template, 10, 11, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
@@ -2162,7 +2220,7 @@ class AutoComplete extends BaseComponent {
                 aria-autocomplete="list"
                 role="combobox"
                 [attr.placeholder]="placeholder"
-                [size]="size"
+                [pSize]="size"
                 [attr.maxlength]="maxlength"
                 [tabindex]="!disabled ? tabindex : -1"
                 [readonly]="readonly"
@@ -2183,9 +2241,9 @@ class AutoComplete extends BaseComponent {
                 [fluid]="hasFluid()"
             />
             <ng-container *ngIf="filled && !disabled && showClear && !loading">
-                <TimesIcon *ngIf="!clearicon" [styleClass]="'p-autocomplete-clear-icon'" (click)="clear()" [attr.aria-hidden]="true" />
-                <span *ngIf="clearicon" class="p-autocomplete-clear-icon" (click)="clear()" [attr.aria-hidden]="true">
-                    <ng-template *ngTemplateOutlet="clearicon"></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="selecteditem; context: { $implicit: option }"></ng-container>
-                    <p-chip styleClass="p-autocomplete-chip" *ngIf="!selecteditem" [label]="getOptionLabel(option)" [removable]="true">
-                        <ng-container *ngIf="!removeicon">
+                    <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="removeicon" [attr.aria-hidden]="true">
-                        <ng-template *ngTemplateOutlet="removeicon; 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="!loadingicon" [styleClass]="'p-autocomplete-loader'" [spin]="true" [attr.aria-hidden]="true" />
-                <span *ngIf="loadingicon" class="p-autocomplete-loader pi-spin " [attr.aria-hidden]="true">
-                    <ng-template *ngTemplateOutlet="loadingicon"></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="!dropdownicon" />
-                    <ng-template *ngTemplateOutlet="dropdownicon"></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="header"></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="loader">
+                                <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="!item">{{ getOptionLabel(option) }}</span>
+                                            <span *ngIf="!itemTemplate && !_itemTemplate">{{ getOptionLabel(option) }}</span>
                                             <ng-container
                                                 *ngTemplateOutlet="
-                                                    item;
+                                                    itemTemplate || _itemTemplate;
                                                     context: {
                                                         $implicit: option,
                                                         index: scrollerOptions.getOptions ? scrollerOptions.getOptions(i) : i
@@ -2353,15 +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">
-                                    @if (!empty) {
+                                    <ng-container *ngIf="!emptyTemplate && !_emptyTemplate; else empty">
                                         {{ searchResultMessageText }}
-                                    } @else {
-                                        <ng-container *ngTemplateOutlet="empty"></ng-container>
-                                    }
+                                    </ng-container>
+                                    <ng-container #empty *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
                                 </li>
                             </ul>
                         </ng-template>
-                        <ng-container *ngTemplateOutlet="footer"></ng-container>
+                        <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
                     </div>
                     <span role="status" aria-live="polite" class="p-hidden-accessible">
                         {{ selectedMessageText }}
@@ -2580,39 +2637,42 @@ class AutoComplete extends BaseComponent {
         }], overlayViewChild: [{
             type: ViewChild,
             args: ['overlay']
-        }], item: [{
+        }], itemTemplate: [{
             type: ContentChild,
             args: ['item']
-        }], empty: [{
+        }], emptyTemplate: [{
             type: ContentChild,
             args: ['empty']
-        }], header: [{
+        }], headerTemplate: [{
             type: ContentChild,
             args: ['header']
-        }], footer: [{
+        }], footerTemplate: [{
             type: ContentChild,
             args: ['footer']
-        }], selecteditem: [{
+        }], selectedItemTemplate: [{
             type: ContentChild,
             args: ['selecteditem']
         }], groupTemplate: [{
             type: ContentChild,
             args: ['group']
-        }], loader: [{
+        }], loaderTemplate: [{
             type: ContentChild,
             args: ['loader']
-        }], removeicon: [{
+        }], removeIconTemplate: [{
             type: ContentChild,
             args: ['removeicon']
-        }], loadingicon: [{
+        }], loadingIconTemplate: [{
             type: ContentChild,
             args: ['loadingicon']
-        }], clearicon: [{
+        }], clearIconTemplate: [{
             type: ContentChild,
             args: ['clearicon']
-        }], dropdownicon: [{
+        }], dropdownIconTemplate: [{
             type: ContentChild,
             args: ['dropdownicon']
+        }], templates: [{
+            type: ContentChildren,
+            args: [PrimeTemplate]
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AutoComplete, { className: "AutoComplete" }); })();
 class AutoCompleteModule {