primeng 18.0.4-lts → 18.0.6-lts

package/fesm2022/primeng-autocomplete.mjs

@@ -191,6 +191,10 @@ const theme = ({ dt }) => `
     background: ${dt('autocomplete.filled.focus.background')};
 }
 
+.p-autocomplete.p-disabled {
+    opacity: 1;
+}
+
 .p-autocomplete.p-disabled .p-autocomplete-input-multiple {
     opacity: 1;
     background: ${dt('autocomplete.disabled.background')};
@@ -283,21 +287,30 @@ const theme = ({ dt }) => `
 .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,
+p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input,
+p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input-multiple
 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,
+p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input:enabled:focus,
+p-auto-complete.ng-invalid.ng-dirty:not(.p-disabled).p-focus .p-autocomplete-input-multiple,
 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,
+p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input-chip input::placeholder,
 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-autocomplete-input::placeholder,
+p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input::placeholder,
 p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input::placeholder {
     color: ${dt('autocomplete.invalid.placeholder.color')};
 }`;
@@ -314,12 +327,12 @@ const classes = {
         'p-autocomplete-open': instance.overlayVisible,
         'p-autocomplete-clearable': instance.showClear && !instance.disabled,
         // 'p-invalid': instance.invalid,
-        'p-autocomplete-fluid': instance.hasFluid()
+        'p-autocomplete-fluid': instance.hasFluid
     }),
     pcInput: 'p-autocomplete-input',
     inputMultiple: ({ instance }) => ({
         'p-autocomplete-input-multiple': true,
-        'p-variant-filled': instance.variant ? instance.variant === 'filled' : instance.config.inputStyle() === 'filled'
+        'p-variant-filled': (instance.variant ?? (instance.config.inputStyle() || instance.config.inputVariant())) === 'filled'
     }),
     chipItem: ({ instance, i }) => [
         'p-autocomplete-chip-item',
@@ -502,9 +515,9 @@ 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();
+    const _r9 = i0.ɵɵgetCurrentView();
     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.ɵɵ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(_r9); 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", 34);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -518,13 +531,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) {
+    const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "p-chip", 32);
+    i0.ɵɵlistener("onRemove", function AutoComplete_ul_4_li_2_p_chip_3_Template_p_chip_onRemove_0_listener($event) { i0.ɵɵrestoreView(_r7); const i_r8 = i0.ɵɵnextContext().index; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(!ctx_r2.readonly ? ctx_r2.removeOption($event, i_r8) : ""); });
     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 option_r10 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("label", ctx_r2.getOptionLabel(option_r9))("removable", true);
+    i0.ɵɵproperty("label", ctx_r2.getOptionLabel(option_r10))("removable", true);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r2.removeIconTemplate && !ctx_r2._removeIconTemplate);
 } }
@@ -547,13 +562,13 @@ function AutoComplete_ul_4_li_2_Template(rf, ctx) { if (rf & 1) {
     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;
+    const option_r10 = ctx.$implicit;
     const i_r8 = ctx.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
     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.ɵɵattribute("id", ctx_r2.id + "_multiple_option_" + i_r8)("aria-label", ctx_r2.getOptionLabel(option_r10))("aria-setsize", ctx_r2.modelValue().length)("aria-posinset", i_r8 + 1)("aria-selected", true);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.selectedItemTemplate || ctx_r2._selectedItemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(12, _c20, option_r9));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.selectedItemTemplate || ctx_r2._selectedItemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(12, _c20, option_r10));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r2.selectedItemTemplate && !ctx_r2._selectedItemTemplate);
     i0.ɵɵadvance();
@@ -636,9 +651,9 @@ function AutoComplete_button_6_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.dropdownIconTemplate || ctx_r2._dropdownIconTemplate);
 } }
 function AutoComplete_button_6_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
+    const _r11 = i0.ɵɵgetCurrentView();
     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.ɵɵlistener("click", function AutoComplete_button_6_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleDropdownClick($event)); });
     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) {
@@ -659,11 +674,11 @@ function AutoComplete_ng_template_9_p_scroller_3_ng_template_2_ng_container_0_Te
 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;
+    const items_r13 = ctx.$implicit;
+    const scrollerOptions_r14 = ctx.options;
     i0.ɵɵnextContext(2);
-    const buildInItems_r14 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", buildInItems_r14)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c23, items_r12, scrollerOptions_r13));
+    const buildInItems_r15 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", buildInItems_r15)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c23, items_r13, scrollerOptions_r14));
 } }
 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);
@@ -671,9 +686,9 @@ function AutoComplete_ng_template_9_p_scroller_3_ng_container_4_ng_template_1_ng
 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 scrollerOptions_r16 = ctx.options;
     const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.loaderTemplate || ctx_r2._loaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c24, scrollerOptions_r15));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.loaderTemplate || ctx_r2._loaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c24, scrollerOptions_r16));
 } }
 function AutoComplete_ng_template_9_p_scroller_3_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -681,9 +696,9 @@ function AutoComplete_ng_template_9_p_scroller_3_ng_container_4_Template(rf, ctx
     i0.ɵɵelementContainerEnd();
 } }
 function AutoComplete_ng_template_9_p_scroller_3_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
+    const _r12 = i0.ɵɵgetCurrentView();
     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.ɵɵlistener("onLazyLoad", function AutoComplete_ng_template_9_p_scroller_3_Template_p_scroller_onLazyLoad_0_listener($event) { i0.ɵɵrestoreView(_r12); 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) {
@@ -702,20 +717,20 @@ function AutoComplete_ng_template_9_ng_container_4_Template(rf, ctx) { if (rf &
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const buildInItems_r14 = i0.ɵɵreference(6);
+    const buildInItems_r15 = i0.ɵɵreference(6);
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", buildInItems_r14)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c23, ctx_r2.visibleOptions(), i0.ɵɵpureFunction0(2, _c25)));
+    i0.ɵɵproperty("ngTemplateOutlet", buildInItems_r15)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c23, ctx_r2.visibleOptions(), i0.ɵɵpureFunction0(2, _c25)));
 } }
 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 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_9_ng_template_5_ng_template_2_ng_container_0_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -727,62 +742,62 @@ function AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_0_T
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r16 = i0.ɵɵnextContext();
-    const option_r16 = ctx_r16.$implicit;
-    const i_r18 = ctx_r16.index;
-    const scrollerOptions_r19 = i0.ɵɵnextContext().options;
+    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_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 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_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 _r20 = i0.ɵɵgetCurrentView();
+    const _r21 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelementStart(1, "li", 51);
-    i0.ɵɵlistener("click", function AutoComplete_ng_template_9_ng_template_5_ng_template_2_ng_container_1_Template_li_click_1_listener($event) { i0.ɵɵrestoreView(_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.ɵɵ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_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 && !ctx_r2._itemTemplate);
     i0.ɵɵadvance();
-    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));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.itemTemplate || ctx_r2._itemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(14, _c26, option_r17, scrollerOptions_r20.getOptions ? scrollerOptions_r20.getOptions(i_r19) : i_r19));
 } }
 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 option_r17 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngIf", ctx_r2.isOptionGroup(option_r16));
+    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_9_ng_template_5_li_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -801,9 +816,9 @@ function AutoComplete_ng_template_9_ng_template_5_li_3_Template(rf, ctx) { if (r
     i0.ɵɵtemplate(1, AutoComplete_ng_template_9_ng_template_5_li_3_ng_container_1_Template, 2, 1, "ng-container", 53)(2, AutoComplete_ng_template_9_ng_template_5_li_3_ng_container_2_Template, 2, 0, "ng-container", 24);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const scrollerOptions_r19 = i0.ɵɵnextContext().options;
+    const scrollerOptions_r20 = i0.ɵɵnextContext().options;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c22, scrollerOptions_r19.itemSize + "px"));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c22, scrollerOptions_r20.itemSize + "px"));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r2.emptyTemplate && !ctx_r2._emptyTemplate)("ngIfElse", ctx_r2.empty);
     i0.ɵɵadvance();
@@ -814,16 +829,16 @@ function AutoComplete_ng_template_9_ng_template_5_Template(rf, ctx) { if (rf & 1
     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 items_r22 = ctx.$implicit;
+    const scrollerOptions_r20 = ctx.options;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleMap(scrollerOptions_r19.contentStyle);
-    i0.ɵɵproperty("ngClass", scrollerOptions_r19.contentStyleClass);
+    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_template_9_ng_container_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -1963,9 +1978,7 @@ class AutoComplete extends BaseComponent {
     removeOption(event, index) {
         event.stopPropagation();
         const removedOption = this.modelValue()[index];
-        const value = this.modelValue()
-            .filter((_, i) => i !== index)
-            .map((option) => this.getOptionValue(option));
+        const value = this.modelValue().filter((_, i) => i !== index);
         this.updateModel(value);
         this.onUnselect.emit({ originalEvent: event, value: removedOption });
         focus(this.inputEL.nativeElement);
@@ -2166,7 +2179,7 @@ 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", ""], ["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) {
+        } }, 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", "onRemove", 4, "ngIf"], ["styleClass", "p-autocomplete-chip", 3, "onRemove", "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", 13, 0);
             i0.ɵɵlistener("click", function AutoComplete_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onContainerClick($event)); });
@@ -2271,7 +2284,7 @@ class AutoComplete extends BaseComponent {
                     [attr.aria-selected]="true"
                 >
                     <ng-container *ngTemplateOutlet="selectedItemTemplate || _selectedItemTemplate; context: { $implicit: option }"></ng-container>
-                    <p-chip styleClass="p-autocomplete-chip" *ngIf="!selectedItemTemplate && !_selectedItemTemplate" [label]="getOptionLabel(option)" [removable]="true">
+                    <p-chip styleClass="p-autocomplete-chip" *ngIf="!selectedItemTemplate && !_selectedItemTemplate" [label]="getOptionLabel(option)" [removable]="true" (onRemove)="!readonly ? removeOption($event, i) : ''">
                         <ng-container *ngIf="!removeIconTemplate && !_removeIconTemplate">
                             <ng-template #removeicon>
                                 <span class="p-autocomplete-chip-icon" (click)="!readonly ? removeOption($event, i) : ''">