primeng 18.0.0-rc.1 → 18.0.0

package/fesm2022/primeng-autocomplete.mjs

@@ -8,7 +8,6 @@ import * as i1 from 'primeng/api';
 import { TranslationKeys, SharedModule } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
 import { BaseComponent } from 'primeng/basecomponent';
-import { Button } from 'primeng/button';
 import { Chip } from 'primeng/chip';
 import { PrimeNG } from 'primeng/config';
 import { TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon } from 'primeng/icons';
@@ -87,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')};
@@ -275,16 +271,6 @@ const theme = ({ dt }) => `
     height: ${dt('form.field.lg.font.size')};
 }
 
-/* For PrimeNG */
-
-p-autocomplete.ng-invalid.ng-dirty > .p-autocomplete.p-inputwrapper > .p-autocomplete-input.p-inputtext {
-    border-color: ${dt('autocomplete.invalid.border.color')};
-}
-
-p-autocomplete.ng-invalid.ng-dirty > .p-autocomplete.p-inputwrapper > .p-autocomplete-input-multiple {
-    border-color: ${dt('autocomplete.invalid.border.color')};
-}
-
 .p-autocomplete-clear-icon {
     position: absolute;
     top: 50%;
@@ -294,11 +280,25 @@ p-autocomplete.ng-invalid.ng-dirty > .p-autocomplete.p-inputwrapper > .p-autocom
     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')};
+}
+
+p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input:enabled:focus,
+p-autocomplete.ng-invalid.ng-dirty:not(.p-disabled).p-focus .p-autocomplete-input-multiple {
+    border-color: ${dt('autocomplete.focus.border.color')};
+}
+
 p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input-chip input::placeholder {
     color: ${dt('autocomplete.invalid.placeholder.color')};
 }
 
-p-autocomplete.ng-invalid.ng-dirty .p-inputtext::placeholder {
+p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input::placeholder {
     color: ${dt('autocomplete.invalid.placeholder.color')};
 }`;
 const inlineStyles = {
@@ -452,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", 23, 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", 26);
+    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) {
@@ -477,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", 27);
+    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, 19);
+    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.clearIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", 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", 24)(2, AutoComplete_ng_container_3_span_2_Template, 2, 2, "span", 25);
+    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.clearIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.cleariconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.clearIconTemplate);
+    i0.ɵɵproperty("ngIf", 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", 36);
+    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", 37);
+    i0.ɵɵelement(1, "TimesCircleIcon", 34);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
@@ -518,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", 35);
-    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.removeIconTemplate);
+    i0.ɵɵproperty("ngIf", !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) {
@@ -534,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, 33);
+    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.removeIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction0(3, _c21));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.removeiconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction0(3, _c21));
 } }
 function AutoComplete_ul_4_li_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "li", 32, 5);
-    i0.ɵɵtemplate(2, AutoComplete_ul_4_li_2_ng_container_2_Template, 1, 0, "ng-container", 33)(3, AutoComplete_ul_4_li_2_p_chip_3_Template, 2, 3, "p-chip", 34)(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;
@@ -553,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.selectedItemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(12, _c20, option_r9));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.selecteditemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(12, _c20, option_r9));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.selectedItemTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.selecteditemTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.removeIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r2.removeiconTemplate);
 } }
 function AutoComplete_ul_4_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "ul", 28, 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", 29);
-    i0.ɵɵelementStart(3, "li", 30)(4, "input", 31, 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) {
@@ -580,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", 40);
+    i0.ɵɵelement(0, "SpinnerIcon", 37);
 } if (rf & 2) {
     i0.ɵɵproperty("styleClass", "p-autocomplete-loader")("spin", true);
     i0.ɵɵattribute("aria-hidden", true);
@@ -590,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", 41);
-    i0.ɵɵtemplate(1, AutoComplete_ng_container_5_span_2_1_Template, 1, 0, null, 19);
+    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.loadingIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", 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", 38)(2, AutoComplete_ng_container_5_span_2_Template, 2, 2, "span", 39);
+    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.loadingIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.loadingiconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.loadingIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r2.loadingiconTemplate);
 } }
 function AutoComplete_button_6_span_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 44);
+    i0.ɵɵelement(0, "span", 41);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r2.dropdownIcon);
@@ -626,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, 19);
+    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.dropdownIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.dropdowniconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.dropdownIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.dropdowniconTemplate);
 } }
 function AutoComplete_button_6_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 42, 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", 43)(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();
@@ -650,184 +650,213 @@ function AutoComplete_button_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r2.dropdownIcon);
 } }
-function AutoComplete_ng_container_10_Template(rf, ctx) { if (rf & 1) {
+function AutoComplete_ng_template_9_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function AutoComplete_p_scroller_12_ng_template_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function AutoComplete_ng_template_9_p_scroller_3_ng_template_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function AutoComplete_p_scroller_12_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, AutoComplete_p_scroller_12_ng_template_2_ng_container_0_Template, 1, 0, "ng-container", 33);
+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", 30);
 } if (rf & 2) {
     const items_r12 = ctx.$implicit;
     const scrollerOptions_r13 = ctx.options;
     i0.ɵɵnextContext(2);
-    const buildInItems_r14 = i0.ɵɵreference(15);
+    const buildInItems_r14 = i0.ɵɵreference(6);
     i0.ɵɵproperty("ngTemplateOutlet", buildInItems_r14)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c23, items_r12, scrollerOptions_r13));
 } }
-function AutoComplete_p_scroller_12_ng_container_4_ng_template_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function AutoComplete_ng_template_9_p_scroller_3_ng_container_4_ng_template_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function AutoComplete_p_scroller_12_ng_container_4_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, AutoComplete_p_scroller_12_ng_container_4_ng_template_1_ng_container_0_Template, 1, 0, "ng-container", 33);
+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", 30);
 } if (rf & 2) {
     const scrollerOptions_r15 = ctx.options;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.loaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c24, scrollerOptions_r15));
+    i0.ɵɵnextContext();
+    const loader_r16 = i0.ɵɵreference(2);
+    i0.ɵɵproperty("ngTemplateOutlet", loader_r16)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c24, scrollerOptions_r15));
 } }
-function AutoComplete_p_scroller_12_ng_container_4_Template(rf, ctx) { if (rf & 1) {
+function AutoComplete_ng_template_9_p_scroller_3_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, AutoComplete_p_scroller_12_ng_container_4_ng_template_1_Template, 1, 4, "ng-template", null, 10, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵtemplate(1, AutoComplete_ng_template_9_p_scroller_3_ng_container_4_ng_template_1_Template, 1, 4, "ng-template", null, 10, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementContainerEnd();
 } }
-function AutoComplete_p_scroller_12_Template(rf, ctx) { if (rf & 1) {
+function AutoComplete_ng_template_9_p_scroller_3_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "p-scroller", 45, 8);
-    i0.ɵɵlistener("onLazyLoad", function AutoComplete_p_scroller_12_Template_p_scroller_onLazyLoad_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onLazyLoad.emit($event)); });
-    i0.ɵɵtemplate(2, AutoComplete_p_scroller_12_ng_template_2_Template, 1, 5, "ng-template", null, 9, i0.ɵɵtemplateRefExtractor)(4, AutoComplete_p_scroller_12_ng_container_4_Template, 3, 0, "ng-container", 14);
+    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", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    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.loaderTemplate);
 } }
-function AutoComplete_ng_container_13_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function AutoComplete_ng_template_9_ng_container_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function AutoComplete_ng_container_13_Template(rf, ctx) { if (rf & 1) {
+function AutoComplete_ng_template_9_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, AutoComplete_ng_container_13_ng_container_1_Template, 1, 0, "ng-container", 33);
+    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();
+    const buildInItems_r14 = i0.ɵɵreference(6);
     const ctx_r2 = i0.ɵɵnextContext();
-    const buildInItems_r14 = i0.ɵɵreference(15);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", buildInItems_r14)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c23, ctx_r2.visibleOptions(), i0.ɵɵpureFunction0(2, _c25)));
 } }
-function AutoComplete_ng_template_14_ng_template_2_ng_container_0_span_2_Template(rf, ctx) { if (rf & 1) {
+function AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_0_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const option_r16 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const option_r17 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r2.getOptionGroupLabel(option_r16.optionGroup));
+    i0.ɵɵtextInterpolate(ctx_r2.getOptionGroupLabel(option_r17.optionGroup));
 } }
-function AutoComplete_ng_template_14_ng_template_2_ng_container_0_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+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_14_ng_template_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+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_14_ng_template_2_ng_container_0_span_2_Template, 2, 1, "span", 14)(3, AutoComplete_ng_template_14_ng_template_2_ng_container_0_ng_container_3_Template, 1, 0, "ng-container", 33);
+    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_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();
+    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_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    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.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(5, _c22, scrollerOptions_r20.itemSize + "px"));
+    i0.ɵɵattribute("id", ctx_r2.id + "_" + ctx_r2.getOptionIndex(i_r19, scrollerOptions_r20));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r2.groupTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.groupTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(7, _c20, option_r16.optionGroup));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.groupTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(7, _c20, option_r17.optionGroup));
 } }
-function AutoComplete_ng_template_14_ng_template_2_ng_container_1_span_2_Template(rf, ctx) { if (rf & 1) {
+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_r16 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const option_r17 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r2.getOptionLabel(option_r16));
+    i0.ɵɵtextInterpolate(ctx_r2.getOptionLabel(option_r17));
 } }
-function AutoComplete_ng_template_14_ng_template_2_ng_container_1_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+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_14_ng_template_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
+function AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "li", 50);
-    i0.ɵɵlistener("click", function AutoComplete_ng_template_14_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(2); return i0.ɵɵresetView(ctx_r2.onOptionSelect($event, option_r16)); })("mouseenter", function AutoComplete_ng_template_14_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(); return i0.ɵɵresetView(ctx_r2.onOptionMouseEnter($event, ctx_r2.getOptionIndex(i_r18, scrollerOptions_r19))); });
-    i0.ɵɵtemplate(2, AutoComplete_ng_template_14_ng_template_2_ng_container_1_span_2_Template, 2, 1, "span", 14)(3, AutoComplete_ng_template_14_ng_template_2_ng_container_1_ng_container_3_Template, 1, 0, "ng-container", 33);
+    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.ɵɵ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_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();
+    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_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    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.ɵɵ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.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r2.itemTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.itemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(14, _c26, option_r16, scrollerOptions_r19.getOptions ? scrollerOptions_r19.getOptions(i_r18) : i_r18));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.itemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(14, _c26, option_r17, scrollerOptions_r20.getOptions ? scrollerOptions_r20.getOptions(i_r19) : i_r19));
 } }
-function AutoComplete_ng_template_14_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, AutoComplete_ng_template_14_ng_template_2_ng_container_0_Template, 4, 9, "ng-container", 14)(1, AutoComplete_ng_template_14_ng_template_2_ng_container_1_Template, 4, 17, "ng-container", 14);
+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_r16 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngIf", ctx_r2.isOptionGroup(option_r16));
+    const option_r17 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngIf", ctx_r2.isOptionGroup(option_r17));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.isOptionGroup(option_r16));
+    i0.ɵɵproperty("ngIf", !ctx_r2.isOptionGroup(option_r17));
 } }
-function AutoComplete_ng_template_14_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(3);
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.searchResultMessageText, " ");
 } }
-function AutoComplete_ng_template_14_li_3_Conditional_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0);
-} }
-function AutoComplete_ng_template_14_li_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, AutoComplete_ng_template_14_li_3_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 19);
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.emptyTemplate);
+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_14_li_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "li", 51);
-    i0.ɵɵtemplate(1, AutoComplete_ng_template_14_li_3_Conditional_1_Template, 1, 1)(2, AutoComplete_ng_template_14_li_3_Conditional_2_Template, 1, 1, "ng-container");
+function AutoComplete_ng_template_9_ng_template_5_li_3_Template(rf, ctx) { if (rf & 1) {
+    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_r19 = i0.ɵɵnextContext().options;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(2, _c22, scrollerOptions_r19.itemSize + "px"));
+    const scrollerOptions_r20 = i0.ɵɵnextContext().options;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c22, scrollerOptions_r20.itemSize + "px"));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r2.emptyTemplate)("ngIfElse", ctx_r2.empty);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.emptyTemplate ? 1 : 2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.emptyTemplate);
 } }
-function AutoComplete_ng_template_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "ul", 46, 11);
-    i0.ɵɵtemplate(2, AutoComplete_ng_template_14_ng_template_2_Template, 2, 2, "ng-template", 47)(3, AutoComplete_ng_template_14_li_3_Template, 3, 4, "li", 48);
+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_r21 = ctx.$implicit;
-    const scrollerOptions_r19 = ctx.options;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵstyleMap(scrollerOptions_r19.contentStyle);
-    i0.ɵɵproperty("ngClass", scrollerOptions_r19.contentStyleClass);
+    const items_r22 = ctx.$implicit;
+    const scrollerOptions_r20 = ctx.options;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleMap(scrollerOptions_r20.contentStyle);
+    i0.ɵɵproperty("ngClass", scrollerOptions_r20.contentStyleClass);
     i0.ɵɵattribute("id", ctx_r2.id + "_list")("aria-label", ctx_r2.listLabel);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", items_r21);
+    i0.ɵɵproperty("ngForOf", items_r22);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !items_r21 || items_r21 && items_r21.length === 0 && ctx_r2.showEmptyMessage);
+    i0.ɵɵproperty("ngIf", !items_r22 || items_r22 && items_r22.length === 0 && ctx_r2.showEmptyMessage);
 } }
-function AutoComplete_ng_container_16_Template(rf, ctx) { if (rf & 1) {
+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", 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", 24);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "span", 45);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r2.panelStyleClass);
+    i0.ɵɵproperty("ngClass", ctx_r2.panelClass)("ngStyle", ctx_r2.panelStyle);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.headerTemplate);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("max-height", ctx_r2.virtualScroll ? "auto" : ctx_r2.scrollHeight);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.virtualScroll);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r2.virtualScroll);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.footerTemplate);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.selectedMessageText, " ");
+} }
 const AUTOCOMPLETE_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => AutoComplete),
@@ -1288,7 +1317,7 @@ class AutoComplete extends BaseComponent {
      * Custom selected item template.
      * @group Templates
      */
-    selectedItemTemplate;
+    selecteditemTemplate;
     /**
      * Custom group item template.
      * @group Templates
@@ -1303,22 +1332,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);
@@ -1457,51 +1486,9 @@ class AutoComplete extends BaseComponent {
             });
         }
     }
-    ngAfterContentInit() {
-        this.templates.forEach((item) => {
-            switch (item.getType()) {
-                case 'item':
-                    this.itemTemplate = item.template;
-                    break;
-                case 'group':
-                    this.groupTemplate = item.template;
-                    break;
-                case '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;
-            }
-        });
-    }
     handleSuggestionsChange() {
         if (this.loading) {
-            this._suggestions() ? this.show() : !!this.emptyTemplate ? 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;
@@ -2095,13 +2082,13 @@ class AutoComplete extends BaseComponent {
             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);
         } }, viewQuery: function AutoComplete_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c11, 5);
             i0.ɵɵviewQuery(_c12, 5);
@@ -2121,24 +2108,16 @@ 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: 19, vars: 26, consts: [["container", ""], ["overlay", ""], ["buildInItems", ""], ["focusInput", ""], ["multiContainer", ""], ["token", ""], ["removeicon", ""], ["ddBtn", ""], ["scroller", ""], ["content", ""], ["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"], [3, "ngClass", "ngStyle"], [4, "ngTemplateOutlet"], [1, "p-autocomplete-list-container"], [3, "items", "style", "itemSize", "autoSize", "lazy", "options", "onLazyLoad", 4, "ngIf"], ["role", "status", "aria-live", "polite", 1, "p-hidden-accessible"], ["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"], ["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, "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.ɵɵelementStart(9, "div", 18);
-            i0.ɵɵtemplate(10, AutoComplete_ng_container_10_Template, 1, 0, "ng-container", 19);
-            i0.ɵɵelementStart(11, "div", 20);
-            i0.ɵɵtemplate(12, AutoComplete_p_scroller_12_Template, 5, 10, "p-scroller", 21)(13, AutoComplete_ng_container_13_Template, 2, 6, "ng-container", 14);
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(14, AutoComplete_ng_template_14_Template, 4, 7, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor)(16, AutoComplete_ng_container_16_Template, 1, 0, "ng-container", 19);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(17, "span", 22);
-            i0.ɵɵtext(18);
-            i0.ɵɵelementEnd()()();
+            i0.ɵɵtemplate(9, AutoComplete_ng_template_9_Template, 10, 11, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵclassMap(ctx.styleClass);
             i0.ɵɵproperty("ngClass", ctx.rootClass)("ngStyle", ctx.style);
@@ -2155,21 +2134,6 @@ class AutoComplete extends BaseComponent {
             i0.ɵɵadvance();
             i0.ɵɵtwoWayProperty("visible", ctx.overlayVisible);
             i0.ɵɵproperty("options", ctx.overlayOptions)("target", "@parent")("appendTo", ctx.appendTo)("showTransitionOptions", ctx.showTransitionOptions)("hideTransitionOptions", ctx.hideTransitionOptions);
-            i0.ɵɵadvance(2);
-            i0.ɵɵclassMap(ctx.panelStyleClass);
-            i0.ɵɵproperty("ngClass", ctx.panelClass)("ngStyle", ctx.panelStyle);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngTemplateOutlet", ctx.headerTemplate);
-            i0.ɵɵadvance();
-            i0.ɵɵstyleProp("max-height", ctx.virtualScroll ? "auto" : ctx.scrollHeight);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.virtualScroll);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.virtualScroll);
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngTemplateOutlet", ctx.footerTemplate);
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", ctx.selectedMessageText, " ");
         } }, dependencies: [CommonModule, i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, Overlay, InputText, Ripple, Scroller, AutoFocus, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon, Chip, SharedModule], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AutoComplete, [{
@@ -2177,7 +2141,7 @@ class AutoComplete extends BaseComponent {
         args: [{
                 selector: 'p-autoComplete, p-autocomplete, p-auto-complete',
                 standalone: true,
-                imports: [CommonModule, Overlay, InputText, Button, Ripple, Scroller, AutoFocus, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon, Chip, SharedModule],
+                imports: [CommonModule, Overlay, InputText, Ripple, Scroller, AutoFocus, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon, Chip, SharedModule],
                 template: `
         <div #container [ngClass]="rootClass" [ngStyle]="style" style="position: relative;" [class]="styleClass" (click)="onContainerClick($event)">
             <input
@@ -2198,7 +2162,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"
@@ -2219,9 +2183,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" [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>
                 </span>
             </ng-container>
 
@@ -2248,9 +2212,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; context: { $implicit: option }"></ng-container>
+                    <p-chip styleClass="p-autocomplete-chip" *ngIf="!selecteditemTemplate" [label]="getOptionLabel(option)" [removable]="true">
+                        <ng-container *ngIf="!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" />
@@ -2258,8 +2222,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" [attr.aria-hidden]="true">
+                        <ng-template *ngTemplateOutlet="removeiconTemplate; context: { class: 'p-autocomplete-chip-icon' }"></ng-template>
                     </span>
                 </li>
                 <li class="p-autocomplete-input-chip" role="option">
@@ -2298,16 +2262,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" [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>
                 </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" />
+                    <ng-template *ngTemplateOutlet="dropdowniconTemplate"></ng-template>
                 </ng-container>
             </button>
             <p-overlay
@@ -2321,86 +2285,87 @@ class AutoComplete extends BaseComponent {
                 (onAnimationStart)="onOverlayAnimationStart($event)"
                 (onHide)="hide()"
             >
-                <div [ngClass]="panelClass" [ngStyle]="panelStyle" [class]="panelStyleClass">
-                    <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
-                    <div class="p-autocomplete-list-container" [style.max-height]="virtualScroll ? 'auto' : scrollHeight">
-                        <p-scroller
-                            *ngIf="virtualScroll"
-                            #scroller
-                            [items]="visibleOptions()"
-                            [style]="{ height: scrollHeight }"
-                            [itemSize]="virtualScrollItemSize || _itemSize"
-                            [autoSize]="true"
-                            [lazy]="lazy"
-                            (onLazyLoad)="onLazyLoad.emit($event)"
-                            [options]="virtualScrollOptions"
-                        >
-                            <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-template #loader let-scrollerOptions="options">
-                                    <ng-container *ngTemplateOutlet="loaderTemplate; context: { options: scrollerOptions }"></ng-container>
+                <ng-template #content>
+                    <div [ngClass]="panelClass" [ngStyle]="panelStyle" [class]="panelStyleClass">
+                        <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+                        <div class="p-autocomplete-list-container" [style.max-height]="virtualScroll ? 'auto' : scrollHeight">
+                            <p-scroller
+                                *ngIf="virtualScroll"
+                                #scroller
+                                [items]="visibleOptions()"
+                                [style]="{ height: scrollHeight }"
+                                [itemSize]="virtualScrollItemSize || _itemSize"
+                                [autoSize]="true"
+                                [lazy]="lazy"
+                                (onLazyLoad)="onLazyLoad.emit($event)"
+                                [options]="virtualScrollOptions"
+                            >
+                                <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-template #loader let-scrollerOptions="options">
+                                        <ng-container *ngTemplateOutlet="loader; context: { options: scrollerOptions }"></ng-container>
+                                    </ng-template>
+                                </ng-container>
+                            </p-scroller>
+                            <ng-container *ngIf="!virtualScroll">
+                                <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
                             </ng-container>
-                        </p-scroller>
-                        <ng-container *ngIf="!virtualScroll">
-                            <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
-                        </ng-container>
-                    </div>
+                        </div>
 
-                    <ng-template #buildInItems let-items let-scrollerOptions="options">
-                        <ul #items class="p-autocomplete-list" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox" [attr.id]="id + '_list'" [attr.aria-label]="listLabel">
-                            <ng-template ngFor let-option [ngForOf]="items" let-i="index">
-                                <ng-container *ngIf="isOptionGroup(option)">
-                                    <li [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" class="p-autocomplete-option-group" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
-                                        <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
-                                        <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
-                                    </li>
-                                </ng-container>
-                                <ng-container *ngIf="!isOptionGroup(option)">
-                                    <li
-                                        pRipple
-                                        [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                        [ngClass]="optionClass(option, i, scrollerOptions)"
-                                        [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
-                                        role="option"
-                                        [attr.aria-label]="getOptionLabel(option)"
-                                        [attr.aria-selected]="isSelected(option)"
-                                        [attr.aria-disabled]="isOptionDisabled(option)"
-                                        [attr.data-p-focused]="focusedOptionIndex() === getOptionIndex(i, scrollerOptions)"
-                                        [attr.aria-setsize]="ariaSetSize"
-                                        [attr.aria-posinset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
-                                        (click)="onOptionSelect($event, option)"
-                                        (mouseenter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
-                                    >
-                                        <span *ngIf="!itemTemplate">{{ getOptionLabel(option) }}</span>
-                                        <ng-container
-                                            *ngTemplateOutlet="
-                                                itemTemplate;
-                                                context: {
-                                                    $implicit: option,
-                                                    index: scrollerOptions.getOptions ? scrollerOptions.getOptions(i) : i
-                                                }
-                                            "
-                                        ></ng-container>
-                                    </li>
-                                </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 (!emptyTemplate) {
-                                    {{ searchResultMessageText }}
-                                } @else {
-                                    <ng-container *ngTemplateOutlet="emptyTemplate"></ng-container>
-                                }
-                            </li>
-                        </ul>
-                    </ng-template>
-                    <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
-                </div>
-                <span role="status" aria-live="polite" class="p-hidden-accessible">
-                    {{ selectedMessageText }}
-                </span>
+                        <ng-template #buildInItems let-items let-scrollerOptions="options">
+                            <ul #items class="p-autocomplete-list" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox" [attr.id]="id + '_list'" [attr.aria-label]="listLabel">
+                                <ng-template ngFor let-option [ngForOf]="items" let-i="index">
+                                    <ng-container *ngIf="isOptionGroup(option)">
+                                        <li [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" class="p-autocomplete-option-group" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
+                                            <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
+                                            <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
+                                        </li>
+                                    </ng-container>
+                                    <ng-container *ngIf="!isOptionGroup(option)">
+                                        <li
+                                            pRipple
+                                            [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                                            [ngClass]="optionClass(option, i, scrollerOptions)"
+                                            [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
+                                            role="option"
+                                            [attr.aria-label]="getOptionLabel(option)"
+                                            [attr.aria-selected]="isSelected(option)"
+                                            [attr.aria-disabled]="isOptionDisabled(option)"
+                                            [attr.data-p-focused]="focusedOptionIndex() === getOptionIndex(i, scrollerOptions)"
+                                            [attr.aria-setsize]="ariaSetSize"
+                                            [attr.aria-posinset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
+                                            (click)="onOptionSelect($event, option)"
+                                            (mouseenter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
+                                        >
+                                            <span *ngIf="!itemTemplate">{{ getOptionLabel(option) }}</span>
+                                            <ng-container
+                                                *ngTemplateOutlet="
+                                                    itemTemplate;
+                                                    context: {
+                                                        $implicit: option,
+                                                        index: scrollerOptions.getOptions ? scrollerOptions.getOptions(i) : i
+                                                    }
+                                                "
+                                            ></ng-container>
+                                        </li>
+                                    </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">
+                                        {{ searchResultMessageText }}
+                                    </ng-container>
+                                    <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
+                                </li>
+                            </ul>
+                        </ng-template>
+                        <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+                    </div>
+                    <span role="status" aria-live="polite" class="p-hidden-accessible">
+                        {{ selectedMessageText }}
+                    </span>
+                </ng-template>
             </p-overlay>
         </div>
     `,
@@ -2626,7 +2591,7 @@ class AutoComplete extends BaseComponent {
         }], footerTemplate: [{
             type: ContentChild,
             args: ['footer']
-        }], selectedItemTemplate: [{
+        }], selecteditemTemplate: [{
             type: ContentChild,
             args: ['selecteditem']
         }], groupTemplate: [{
@@ -2635,16 +2600,16 @@ 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']
         }] }); })();