primeng 18.0.4-lts → 18.0.6-lts

package/fesm2022/primeng-multiselect.mjs

@@ -393,7 +393,7 @@ var MultiSelectClasses;
 })(MultiSelectClasses || (MultiSelectClasses = {}));
 
 const _c0 = a0 => ({ height: a0 });
-const _c1 = (a0, a1) => ({ "p-multiselect-option": true, "p-disabled": a0, "p-focus": a1 });
+const _c1 = (a0, a1, a2) => ({ "p-multiselect-option-selected": a0, "p-disabled": a1, "p-focus": a2 });
 const _c2 = a0 => ({ $implicit: a0 });
 const _c3 = (a0, a1) => ({ checked: a0, class: a1 });
 function MultiSelectItem_ng_container_2_ng_template_1_0_ng_template_0_Template(rf, ctx) { }
@@ -496,7 +496,7 @@ function MultiSelect_ng_container_5_ng_container_2_div_1_ng_container_3_ng_templ
     i0.ɵɵtemplate(0, MultiSelect_ng_container_5_ng_container_2_div_1_ng_container_3_ng_template_1_ng_container_0_Template, 2, 1, "ng-container", 20);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵproperty("ngIf", !ctx_r1.disabled);
+    i0.ɵɵproperty("ngIf", !ctx_r1.disabled && !ctx_r1.readonly);
 } }
 function MultiSelect_ng_container_5_ng_container_2_div_1_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -513,7 +513,7 @@ function MultiSelect_ng_container_5_ng_container_2_div_1_Template(rf, ctx) { if
     const item_r4 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("label", ctx_r1.getLabelByValue(item_r4))("removable", true)("removeIcon", ctx_r1.chipIcon);
+    i0.ɵɵproperty("label", ctx_r1.getLabelByValue(item_r4))("removable", !ctx_r1.disabled && !ctx_r1.readonly)("removeIcon", ctx_r1.chipIcon);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.chipIconTemplate || ctx_r1._chipIconTemplate || ctx_r1.removeTokenIconTemplate || ctx_r1._removeTokenIconTemplate);
 } }
@@ -878,10 +878,10 @@ function MultiSelect_ng_template_14_ng_template_8_ng_template_2_ng_container_1_T
     const scrollerOptions_r21 = i0.ɵɵnextContext().options;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("id", ctx_r1.id + "_" + ctx_r1.getOptionIndex(i_r20, scrollerOptions_r21))("option", option_r18)("selected", ctx_r1.isSelected(option_r18))("label", ctx_r1.getOptionLabel(option_r18))("disabled", ctx_r1.isOptionDisabled(option_r18))("template", ctx_r1.itemTemplate || ctx_r1._itemTemplate)("checkIconTemplate", ctx_r1.checkIconTemplate || ctx_r1._checkIconTemplate)("itemCheckboxIconTemplate", ctx_r1.itemCheckboxIconTemplate || ctx_r1._itemCheckboxIconTemplate)("itemSize", scrollerOptions_r21.itemSize)("focused", ctx_r1.focusedOptionIndex() === ctx_r1.getOptionIndex(i_r20, scrollerOptions_r21))("ariaPosInset", ctx_r1.getAriaPosInset(ctx_r1.getOptionIndex(i_r20, scrollerOptions_r21)))("ariaSetSize", ctx_r1.ariaSetSize)("variant", ctx_r1.variant);
+    i0.ɵɵproperty("id", ctx_r1.id + "_" + ctx_r1.getOptionIndex(i_r20, scrollerOptions_r21))("option", option_r18)("selected", ctx_r1.isSelected(option_r18))("label", ctx_r1.getOptionLabel(option_r18))("disabled", ctx_r1.isOptionDisabled(option_r18))("template", ctx_r1.itemTemplate || ctx_r1._itemTemplate)("checkIconTemplate", ctx_r1.checkIconTemplate || ctx_r1._checkIconTemplate)("itemCheckboxIconTemplate", ctx_r1.itemCheckboxIconTemplate || ctx_r1._itemCheckboxIconTemplate)("itemSize", scrollerOptions_r21.itemSize)("focused", ctx_r1.focusedOptionIndex() === ctx_r1.getOptionIndex(i_r20, scrollerOptions_r21))("ariaPosInset", ctx_r1.getAriaPosInset(ctx_r1.getOptionIndex(i_r20, scrollerOptions_r21)))("ariaSetSize", ctx_r1.ariaSetSize)("variant", ctx_r1.variant)("highlightOnSelect", ctx_r1.highlightOnSelect);
 } }
 function MultiSelect_ng_template_14_ng_template_8_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, MultiSelect_ng_template_14_ng_template_8_ng_template_2_ng_container_0_Template, 4, 9, "ng-container", 20)(1, MultiSelect_ng_template_14_ng_template_8_ng_template_2_ng_container_1_Template, 2, 13, "ng-container", 20);
+    i0.ɵɵtemplate(0, MultiSelect_ng_template_14_ng_template_8_ng_template_2_ng_container_0_Template, 4, 9, "ng-container", 20)(1, MultiSelect_ng_template_14_ng_template_8_ng_template_2_ng_container_1_Template, 2, 14, "ng-container", 20);
 } if (rf & 2) {
     const option_r18 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1007,11 +1007,7 @@ function MultiSelect_ng_template_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵattribute("tabindex", 0)("data-p-hidden-accessible", true)("data-p-hidden-focusable", true);
 } }
-const MULTISELECT_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => MultiSelect),
-    multi: true
-};
+const MULTISELECT_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelect), multi: true };
 class MultiSelectItem extends BaseComponent {
     id;
     option;
@@ -1026,26 +1022,19 @@ class MultiSelectItem extends BaseComponent {
     template;
     checkIconTemplate;
     itemCheckboxIconTemplate;
+    highlightOnSelect;
     onClick = new EventEmitter();
     onMouseEnter = new EventEmitter();
     onOptionClick(event) {
-        this.onClick.emit({
-            originalEvent: event,
-            option: this.option,
-            selected: this.selected
-        });
+        this.onClick.emit({ originalEvent: event, option: this.option, selected: this.selected });
         event.stopPropagation();
         event.preventDefault();
     }
     onOptionMouseEnter(event) {
-        this.onMouseEnter.emit({
-            originalEvent: event,
-            option: this.option,
-            selected: this.selected
-        });
+        this.onMouseEnter.emit({ originalEvent: event, option: this.option, selected: this.selected });
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵMultiSelectItem_BaseFactory; return function MultiSelectItem_Factory(__ngFactoryType__) { return (ɵMultiSelectItem_BaseFactory || (ɵMultiSelectItem_BaseFactory = i0.ɵɵgetInheritedFactory(MultiSelectItem)))(__ngFactoryType__ || MultiSelectItem); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MultiSelectItem, selectors: [["p-multiSelectItem"], ["p-multiselect-item"]], inputs: { id: "id", option: "option", selected: [2, "selected", "selected", booleanAttribute], label: "label", disabled: [2, "disabled", "disabled", booleanAttribute], itemSize: [2, "itemSize", "itemSize", numberAttribute], focused: [2, "focused", "focused", booleanAttribute], ariaPosInset: "ariaPosInset", ariaSetSize: "ariaSetSize", variant: "variant", template: "template", checkIconTemplate: "checkIconTemplate", itemCheckboxIconTemplate: "itemCheckboxIconTemplate" }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 5, vars: 26, consts: [["icon", ""], ["pRipple", "", "role", "option", 3, "click", "mouseenter", "ngStyle", "ngClass", "id"], [3, "ngModel", "binary", "tabindex", "variant"], [4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function MultiSelectItem_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MultiSelectItem, selectors: [["p-multiSelectItem"], ["p-multiselect-item"]], inputs: { id: "id", option: "option", selected: [2, "selected", "selected", booleanAttribute], label: "label", disabled: [2, "disabled", "disabled", booleanAttribute], itemSize: [2, "itemSize", "itemSize", numberAttribute], focused: [2, "focused", "focused", booleanAttribute], ariaPosInset: "ariaPosInset", ariaSetSize: "ariaSetSize", variant: "variant", template: "template", checkIconTemplate: "checkIconTemplate", itemCheckboxIconTemplate: "itemCheckboxIconTemplate", highlightOnSelect: [2, "highlightOnSelect", "highlightOnSelect", booleanAttribute] }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 5, vars: 27, consts: [["icon", ""], ["pRipple", "", "role", "option", 1, "p-multiselect-option", 3, "click", "mouseenter", "ngStyle", "ngClass", "id"], [3, "ngModel", "binary", "tabindex", "variant"], [4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function MultiSelectItem_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "li", 1);
             i0.ɵɵlistener("click", function MultiSelectItem_Template_li_click_0_listener($event) { return ctx.onOptionClick($event); })("mouseenter", function MultiSelectItem_Template_li_mouseenter_0_listener($event) { return ctx.onOptionMouseEnter($event); });
             i0.ɵɵelementStart(1, "p-checkbox", 2);
@@ -1054,7 +1043,7 @@ class MultiSelectItem extends BaseComponent {
             i0.ɵɵtemplate(3, MultiSelectItem_span_3_Template, 2, 1, "span", 3)(4, MultiSelectItem_ng_container_4_Template, 1, 0, "ng-container", 4);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(19, _c0, ctx.itemSize + "px"))("ngClass", i0.ɵɵpureFunction2(21, _c1, ctx.disabled, ctx.focused))("id", ctx.id);
+            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(19, _c0, ctx.itemSize + "px"))("ngClass", i0.ɵɵpureFunction3(21, _c1, ctx.selected && ctx.highlightOnSelect, ctx.disabled, ctx.focused))("id", ctx.id);
             i0.ɵɵattribute("aria-label", ctx.label)("aria-setsize", ctx.ariaSetSize)("aria-posinset", ctx.ariaPosInset)("aria-selected", ctx.selected)("data-p-focused", ctx.focused)("data-p-highlight", ctx.selected)("data-p-disabled", ctx.disabled)("aria-checked", ctx.selected);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngModel", ctx.selected)("binary", true)("tabindex", -1)("variant", ctx.variant);
@@ -1063,7 +1052,7 @@ class MultiSelectItem extends BaseComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.template);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngTemplateOutlet", ctx.template)("ngTemplateOutletContext", i0.ɵɵpureFunction1(24, _c2, ctx.option));
+            i0.ɵɵproperty("ngTemplateOutlet", ctx.template)("ngTemplateOutletContext", i0.ɵɵpureFunction1(25, _c2, ctx.option));
         } }, dependencies: [CommonModule, i1.NgClass, i1.NgIf, i1.NgTemplateOutlet, i1.NgStyle, Checkbox, FormsModule, i2.NgControlStatus, i2.NgModel, Ripple, SharedModule], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MultiSelectItem, [{
@@ -1076,12 +1065,9 @@ class MultiSelectItem extends BaseComponent {
         <li
             pRipple
             role="option"
+            class="p-multiselect-option"
             [ngStyle]="{ height: itemSize + 'px' }"
-            [ngClass]="{
-                'p-multiselect-option': true,
-                'p-disabled': disabled,
-                'p-focus': focused
-            }"
+            [ngClass]="{ 'p-multiselect-option-selected': selected && highlightOnSelect, 'p-disabled': disabled, 'p-focus': focused }"
             [id]="id"
             [attr.aria-label]="label"
             [attr.aria-setsize]="ariaSetSize"
@@ -1137,6 +1123,9 @@ class MultiSelectItem extends BaseComponent {
             type: Input
         }], itemCheckboxIconTemplate: [{
             type: Input
+        }], highlightOnSelect: [{
+            type: Input,
+            args: [{ transform: booleanAttribute }]
         }], onClick: [{
             type: Output
         }], onMouseEnter: [{
@@ -1589,6 +1578,11 @@ class MultiSelect extends BaseComponent {
      * @group Props
      */
     autoOptionFocus = false;
+    /**
+     * Whether the selected option will be add highlight class.
+     * @group Props
+     */
+    highlightOnSelect = true;
     /**
      * Callback to invoke when value changes.
      * @param {MultiSelectChangeEvent} event - Custom change event.
@@ -1834,7 +1828,7 @@ class MultiSelect extends BaseComponent {
         return isNotEmpty(this.modelValue());
     }
     get isVisibleClearIcon() {
-        return this.modelValue() != null && this.modelValue() !== '' && isNotEmpty(this.modelValue()) && this.showClear && !this.disabled && this.filled;
+        return this.modelValue() != null && this.modelValue() !== '' && isNotEmpty(this.modelValue()) && this.showClear && !this.disabled && !this.readonly && this.filled;
     }
     get toggleAllAriaLabel() {
         return this.config.translation.aria ? this.config.translation.aria[this.allSelected() ? 'selectAll' : 'unselectAll'] : undefined;
@@ -1871,10 +1865,7 @@ class MultiSelect extends BaseComponent {
                     const groupChildren = this.getOptionGroupChildren(group);
                     const filteredItems = groupChildren.filter((item) => filteredOptions.includes(item));
                     if (filteredItems.length > 0)
-                        filtered.push({
-                            ...group,
-                            [typeof this.optionGroupChildren === 'string' ? this.optionGroupChildren : 'items']: [...filteredItems]
-                        });
+                        filtered.push({ ...group, [typeof this.optionGroupChildren === 'string' ? this.optionGroupChildren : 'items']: [...filteredItems] });
                 });
                 return this.flatOptions(filtered);
             }
@@ -1931,10 +1922,7 @@ class MultiSelect extends BaseComponent {
         this.id = this.id || uuid('pn_id_');
         this.autoUpdateModel();
         if (this.filterBy) {
-            this.filterOptions = {
-                filter: (value) => this.onFilterInputChange(value),
-                reset: () => this.resetFilter()
-            };
+            this.filterOptions = { filter: (value) => this.onFilterInputChange(value), reset: () => this.resetFilter() };
         }
     }
     maxSelectionLimitReached() {
@@ -2001,11 +1989,7 @@ class MultiSelect extends BaseComponent {
         this.updateModel(value, originalEvent);
         index !== -1 && this.focusedOptionIndex.set(index);
         isFocus && focus(this.focusInputViewChild?.nativeElement);
-        this.onChange.emit({
-            originalEvent: event,
-            value: value,
-            itemValue: option
-        });
+        this.onChange.emit({ originalEvent: event, value: value, itemValue: option });
     }
     findSelectedOptionIndex() {
         return this.hasSelectedOption() ? this.visibleOptions().findIndex((option) => this.isValidSelectedOption(option)) : -1;
@@ -2425,10 +2409,7 @@ class MultiSelect extends BaseComponent {
             return;
         }
         if (this.selectAll != null) {
-            this.onSelectAllChange.emit({
-                originalEvent: event,
-                checked: !this.allSelected()
-            });
+            this.onSelectAllChange.emit({ originalEvent: event, checked: !this.allSelected() });
         }
         else {
             // pre-selected disabled options should always be selected.
@@ -2436,15 +2417,13 @@ class MultiSelect extends BaseComponent {
             const visibleOptions = this.allSelected()
                 ? this.visibleOptions().filter((option) => !this.isValidOption(option) && this.isSelected(option))
                 : this.visibleOptions().filter((option) => this.isSelected(option) || this.isValidOption(option));
-            const optionValues = [...selectedDisabledOptions, ...visibleOptions].map((option) => this.getOptionValue(option));
+            const selectedOptionsBeforeSearch = this.filter && !this.allSelected() ? this.getAllVisibleAndNonVisibleOptions().filter((option) => this.isSelected(option) && this.isValidOption(option)) : [];
+            const optionValues = [...selectedOptionsBeforeSearch, ...selectedDisabledOptions, ...visibleOptions].map((option) => this.getOptionValue(option));
             const value = [...new Set(optionValues)];
             this.updateModel(value, event);
             // because onToggleAll could have been called during filtering, this additional test needs to be performed before calling onSelectAllChange.emit
             if (!value.length || value.length === this.getAllVisibleAndNonVisibleOptions().length) {
-                this.onSelectAllChange.emit({
-                    originalEvent: event,
-                    checked: !!value.length
-                });
+                this.onSelectAllChange.emit({ originalEvent: event, checked: !!value.length });
             }
         }
         if (this.partialSelected()) {
@@ -2593,15 +2572,8 @@ class MultiSelect extends BaseComponent {
     removeOption(optionValue, event) {
         let value = this.modelValue().filter((val) => !equals(val, optionValue, this.equalityKey()));
         this.updateModel(value, event);
-        this.onChange.emit({
-            originalEvent: event,
-            value: value,
-            itemValue: optionValue
-        });
-        this.onRemove.emit({
-            newValue: value,
-            removed: optionValue
-        });
+        this.onChange.emit({ originalEvent: event, value: value, itemValue: optionValue });
+        this.onRemove.emit({ newValue: value, removed: optionValue });
         event && event.stopPropagation();
     }
     findNextItem(item) {
@@ -2773,7 +2745,7 @@ class MultiSelect extends BaseComponent {
             i0.ɵɵattribute("id", ctx.id);
             i0.ɵɵstyleMap(ctx.style);
             i0.ɵɵclassMap(ctx.hostClasses);
-        } }, inputs: { id: "id", ariaLabel: "ariaLabel", style: "style", styleClass: "styleClass", panelStyle: "panelStyle", panelStyleClass: "panelStyleClass", inputId: "inputId", disabled: [2, "disabled", "disabled", booleanAttribute], fluid: [2, "fluid", "fluid", booleanAttribute], readonly: [2, "readonly", "readonly", booleanAttribute], group: [2, "group", "group", booleanAttribute], filter: [2, "filter", "filter", booleanAttribute], filterPlaceHolder: "filterPlaceHolder", filterLocale: "filterLocale", overlayVisible: [2, "overlayVisible", "overlayVisible", booleanAttribute], tabindex: [2, "tabindex", "tabindex", numberAttribute], variant: "variant", appendTo: "appendTo", dataKey: "dataKey", name: "name", ariaLabelledBy: "ariaLabelledBy", displaySelectedLabel: "displaySelectedLabel", maxSelectedLabels: "maxSelectedLabels", selectionLimit: [2, "selectionLimit", "selectionLimit", numberAttribute], selectedItemsLabel: "selectedItemsLabel", showToggleAll: [2, "showToggleAll", "showToggleAll", booleanAttribute], emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", resetFilterOnHide: [2, "resetFilterOnHide", "resetFilterOnHide", booleanAttribute], dropdownIcon: "dropdownIcon", chipIcon: "chipIcon", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", showHeader: [2, "showHeader", "showHeader", booleanAttribute], filterBy: "filterBy", scrollHeight: "scrollHeight", lazy: [2, "lazy", "lazy", booleanAttribute], virtualScroll: [2, "virtualScroll", "virtualScroll", booleanAttribute], loading: [2, "loading", "loading", booleanAttribute], virtualScrollItemSize: [2, "virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], loadingIcon: "loadingIcon", virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", filterMatchMode: "filterMatchMode", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: [2, "autofocusFilter", "autofocusFilter", booleanAttribute], display: "display", autocomplete: "autocomplete", size: "size", showClear: [2, "showClear", "showClear", booleanAttribute], autofocus: [2, "autofocus", "autofocus", booleanAttribute], autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", defaultLabel: "defaultLabel", placeholder: "placeholder", options: "options", filterValue: "filterValue", itemSize: "itemSize", selectAll: "selectAll", focusOnHover: [2, "focusOnHover", "focusOnHover", booleanAttribute], filterFields: "filterFields", selectOnFocus: [2, "selectOnFocus", "selectOnFocus", booleanAttribute], autoOptionFocus: [2, "autoOptionFocus", "autoOptionFocus", booleanAttribute] }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onClear: "onClear", onPanelShow: "onPanelShow", onPanelHide: "onPanelHide", onLazyLoad: "onLazyLoad", onRemove: "onRemove", onSelectAllChange: "onSelectAllChange" }, standalone: true, features: [i0.ɵɵProvidersFeature([MULTISELECT_VALUE_ACCESSOR, MultiSelectStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], ngContentSelectors: _c31, decls: 16, vars: 39, consts: [["focusInput", ""], ["elseBlock", ""], ["overlay", ""], ["content", ""], ["token", ""], ["removeicon", ""], ["firstHiddenFocusableEl", ""], ["buildInItems", ""], ["lastHiddenFocusableEl", ""], ["builtInFilterElement", ""], ["headerCheckbox", ""], ["checkboxicon", ""], ["filterInput", ""], ["scroller", ""], ["loader", ""], ["items", ""], [1, "p-hidden-accessible"], ["role", "combobox", 3, "focus", "blur", "keydown", "pTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "pAutoFocus"], [1, "p-multiselect-label-container", 3, "mouseleave", "pTooltip", "tooltipDisabled", "tooltipPosition", "positionStyle", "tooltipStyleClass"], [3, "ngClass"], [4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "p-multiselect-dropdown"], [4, "ngIf", "ngIfElse"], [3, "visibleChange", "onAnimationStart", "onHide", "visible", "options", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], ["class", "p-multiselect-chip-item", 4, "ngFor", "ngForOf"], [1, "p-multiselect-chip-item"], ["styleClass", "p-multiselect-chip", 3, "onRemove", "label", "removable", "removeIcon"], ["class", "p-multiselect-chip-icon", 3, "click", 4, "ngIf"], [1, "p-multiselect-chip-icon", 3, "click"], ["class", "p-multiselect-clear-icon", 3, "click", 4, "ngIf"], [1, "p-multiselect-clear-icon", 3, "click"], [4, "ngTemplateOutlet"], ["aria-hidden", "true", 3, "ngClass", 4, "ngIf"], ["aria-hidden", "true", 3, "class", 4, "ngIf"], ["aria-hidden", "true", 3, "ngClass"], ["aria-hidden", "true"], ["class", "p-multiselect-dropdown-icon", 4, "ngIf"], ["class", "p-multiselect-dropdown-icon", 3, "ngClass", 4, "ngIf"], [3, "styleClass", 4, "ngIf"], [1, "p-multiselect-dropdown-icon", 3, "ngClass"], [3, "styleClass"], [1, "p-multiselect-dropdown-icon"], [3, "ngClass", "ngStyle"], ["role", "presentation", 1, "p-hidden-accessible", "p-hidden-focusable", 3, "focus"], ["class", "p-multiselect-header", 4, "ngIf"], [1, "p-multiselect-list-container"], [3, "items", "style", "itemSize", "autoSize", "tabindex", "lazy", "options", "onLazyLoad", 4, "ngIf"], [1, "p-multiselect-header"], [3, "ngModel", "binary", "variant", "disabled", "onChange", 4, "ngIf"], ["class", "p-multiselect-filter-container", 4, "ngIf"], [3, "onChange", "ngModel", "binary", "variant", "disabled"], [1, "p-multiselect-filter-container"], ["pInputText", "", "type", "text", "role", "searchbox", 1, "p-multiselect-filter", 3, "input", "keydown", "click", "blur", "variant", "value", "disabled"], ["class", "p-multiselect-filter-icon", 4, "ngIf"], [1, "p-multiselect-filter-icon"], [3, "onLazyLoad", "items", "itemSize", "autoSize", "tabindex", "lazy", "options"], ["role", "listbox", "aria-multiselectable", "true", 1, "p-multiselect-list", 3, "ngClass"], ["ngFor", "", 3, "ngForOf"], ["class", "p-multiselect-empty-message", "role", "option", 3, "ngStyle", 4, "ngIf"], ["role", "option", 1, "p-multiselect-option-group", 3, "ngStyle"], [3, "onClick", "onMouseEnter", "id", "option", "selected", "label", "disabled", "template", "checkIconTemplate", "itemCheckboxIconTemplate", "itemSize", "focused", "ariaPosInset", "ariaSetSize", "variant"], ["role", "option", 1, "p-multiselect-empty-message", 3, "ngStyle"]], template: function MultiSelect_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { id: "id", ariaLabel: "ariaLabel", style: "style", styleClass: "styleClass", panelStyle: "panelStyle", panelStyleClass: "panelStyleClass", inputId: "inputId", disabled: [2, "disabled", "disabled", booleanAttribute], fluid: [2, "fluid", "fluid", booleanAttribute], readonly: [2, "readonly", "readonly", booleanAttribute], group: [2, "group", "group", booleanAttribute], filter: [2, "filter", "filter", booleanAttribute], filterPlaceHolder: "filterPlaceHolder", filterLocale: "filterLocale", overlayVisible: [2, "overlayVisible", "overlayVisible", booleanAttribute], tabindex: [2, "tabindex", "tabindex", numberAttribute], variant: "variant", appendTo: "appendTo", dataKey: "dataKey", name: "name", ariaLabelledBy: "ariaLabelledBy", displaySelectedLabel: "displaySelectedLabel", maxSelectedLabels: "maxSelectedLabels", selectionLimit: [2, "selectionLimit", "selectionLimit", numberAttribute], selectedItemsLabel: "selectedItemsLabel", showToggleAll: [2, "showToggleAll", "showToggleAll", booleanAttribute], emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", resetFilterOnHide: [2, "resetFilterOnHide", "resetFilterOnHide", booleanAttribute], dropdownIcon: "dropdownIcon", chipIcon: "chipIcon", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", showHeader: [2, "showHeader", "showHeader", booleanAttribute], filterBy: "filterBy", scrollHeight: "scrollHeight", lazy: [2, "lazy", "lazy", booleanAttribute], virtualScroll: [2, "virtualScroll", "virtualScroll", booleanAttribute], loading: [2, "loading", "loading", booleanAttribute], virtualScrollItemSize: [2, "virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], loadingIcon: "loadingIcon", virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", filterMatchMode: "filterMatchMode", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: [2, "autofocusFilter", "autofocusFilter", booleanAttribute], display: "display", autocomplete: "autocomplete", size: "size", showClear: [2, "showClear", "showClear", booleanAttribute], autofocus: [2, "autofocus", "autofocus", booleanAttribute], autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", defaultLabel: "defaultLabel", placeholder: "placeholder", options: "options", filterValue: "filterValue", itemSize: "itemSize", selectAll: "selectAll", focusOnHover: [2, "focusOnHover", "focusOnHover", booleanAttribute], filterFields: "filterFields", selectOnFocus: [2, "selectOnFocus", "selectOnFocus", booleanAttribute], autoOptionFocus: [2, "autoOptionFocus", "autoOptionFocus", booleanAttribute], highlightOnSelect: [2, "highlightOnSelect", "highlightOnSelect", booleanAttribute] }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onClear: "onClear", onPanelShow: "onPanelShow", onPanelHide: "onPanelHide", onLazyLoad: "onLazyLoad", onRemove: "onRemove", onSelectAllChange: "onSelectAllChange" }, standalone: true, features: [i0.ɵɵProvidersFeature([MULTISELECT_VALUE_ACCESSOR, MultiSelectStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], ngContentSelectors: _c31, decls: 16, vars: 39, consts: [["focusInput", ""], ["elseBlock", ""], ["overlay", ""], ["content", ""], ["token", ""], ["removeicon", ""], ["firstHiddenFocusableEl", ""], ["buildInItems", ""], ["lastHiddenFocusableEl", ""], ["builtInFilterElement", ""], ["headerCheckbox", ""], ["checkboxicon", ""], ["filterInput", ""], ["scroller", ""], ["loader", ""], ["items", ""], [1, "p-hidden-accessible"], ["role", "combobox", 3, "focus", "blur", "keydown", "pTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "pAutoFocus"], [1, "p-multiselect-label-container", 3, "mouseleave", "pTooltip", "tooltipDisabled", "tooltipPosition", "positionStyle", "tooltipStyleClass"], [3, "ngClass"], [4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "p-multiselect-dropdown"], [4, "ngIf", "ngIfElse"], [3, "visibleChange", "onAnimationStart", "onHide", "visible", "options", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], ["class", "p-multiselect-chip-item", 4, "ngFor", "ngForOf"], [1, "p-multiselect-chip-item"], ["styleClass", "p-multiselect-chip", 3, "onRemove", "label", "removable", "removeIcon"], ["class", "p-multiselect-chip-icon", 3, "click", 4, "ngIf"], [1, "p-multiselect-chip-icon", 3, "click"], ["class", "p-multiselect-clear-icon", 3, "click", 4, "ngIf"], [1, "p-multiselect-clear-icon", 3, "click"], [4, "ngTemplateOutlet"], ["aria-hidden", "true", 3, "ngClass", 4, "ngIf"], ["aria-hidden", "true", 3, "class", 4, "ngIf"], ["aria-hidden", "true", 3, "ngClass"], ["aria-hidden", "true"], ["class", "p-multiselect-dropdown-icon", 4, "ngIf"], ["class", "p-multiselect-dropdown-icon", 3, "ngClass", 4, "ngIf"], [3, "styleClass", 4, "ngIf"], [1, "p-multiselect-dropdown-icon", 3, "ngClass"], [3, "styleClass"], [1, "p-multiselect-dropdown-icon"], [3, "ngClass", "ngStyle"], ["role", "presentation", 1, "p-hidden-accessible", "p-hidden-focusable", 3, "focus"], ["class", "p-multiselect-header", 4, "ngIf"], [1, "p-multiselect-list-container"], [3, "items", "style", "itemSize", "autoSize", "tabindex", "lazy", "options", "onLazyLoad", 4, "ngIf"], [1, "p-multiselect-header"], [3, "ngModel", "binary", "variant", "disabled", "onChange", 4, "ngIf"], ["class", "p-multiselect-filter-container", 4, "ngIf"], [3, "onChange", "ngModel", "binary", "variant", "disabled"], [1, "p-multiselect-filter-container"], ["pInputText", "", "type", "text", "role", "searchbox", 1, "p-multiselect-filter", 3, "input", "keydown", "click", "blur", "variant", "value", "disabled"], ["class", "p-multiselect-filter-icon", 4, "ngIf"], [1, "p-multiselect-filter-icon"], [3, "onLazyLoad", "items", "itemSize", "autoSize", "tabindex", "lazy", "options"], ["role", "listbox", "aria-multiselectable", "true", 1, "p-multiselect-list", 3, "ngClass"], ["ngFor", "", 3, "ngForOf"], ["class", "p-multiselect-empty-message", "role", "option", 3, "ngStyle", 4, "ngIf"], ["role", "option", 1, "p-multiselect-option-group", 3, "ngStyle"], [3, "onClick", "onMouseEnter", "id", "option", "selected", "label", "disabled", "template", "checkIconTemplate", "itemCheckboxIconTemplate", "itemSize", "focused", "ariaPosInset", "ariaSetSize", "variant", "highlightOnSelect"], ["role", "option", 1, "p-multiselect-empty-message", 3, "ngStyle"]], template: function MultiSelect_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵprojectionDef(_c30);
             i0.ɵɵelementStart(0, "div", 16)(1, "input", 17, 0);
@@ -2862,10 +2834,10 @@ class MultiSelect extends BaseComponent {
                     <ng-container *ngIf="display === 'comma'">{{ label() || 'empty' }}</ng-container>
                     <ng-container *ngIf="display === 'chip'">
                         <div #token *ngFor="let item of chipSelectedItems(); let i = index" class="p-multiselect-chip-item">
-                            <p-chip styleClass="p-multiselect-chip" [label]="getLabelByValue(item)" [removable]="true" (onRemove)="removeOption(item, $event)" [removeIcon]="chipIcon">
+                            <p-chip styleClass="p-multiselect-chip" [label]="getLabelByValue(item)" [removable]="!disabled && !readonly" (onRemove)="removeOption(item, $event)" [removeIcon]="chipIcon">
                                 <ng-container *ngIf="chipIconTemplate || _chipIconTemplate || removeTokenIconTemplate || _removeTokenIconTemplate">
                                     <ng-template #removeicon>
-                                        <ng-container *ngIf="!disabled">
+                                        <ng-container *ngIf="!disabled && !readonly">
                                             <span
                                                 class="p-multiselect-chip-icon"
                                                 *ngIf="chipIconTemplate || _chipIconTemplate || removeTokenIconTemplate || _removeTokenIconTemplate"
@@ -2947,16 +2919,7 @@ class MultiSelect extends BaseComponent {
                             <p-checkbox [ngModel]="allSelected()" [binary]="true" (onChange)="onToggleAll($event)" *ngIf="showToggleAll && !selectionLimit" [variant]="variant" [disabled]="disabled" #headerCheckbox>
                                 <ng-template #checkboxicon let-klass="class">
                                     <CheckIcon *ngIf="!headerCheckboxIconTemplate && !_headerCheckboxIconTemplate && allSelected()" [styleClass]="klass" [attr.data-pc-section]="'icon'" />
-                                    <ng-template
-                                        *ngTemplateOutlet="
-                                            headerCheckboxIconTemplate || _headerCheckboxIconTemplate;
-                                            context: {
-                                                checked: allSelected(),
-                                                partialSelected: partialSelected(),
-                                                class: klass
-                                            }
-                                        "
-                                    ></ng-template>
+                                    <ng-template *ngTemplateOutlet="headerCheckboxIconTemplate || _headerCheckboxIconTemplate; context: { checked: allSelected(), partialSelected: partialSelected(), class: klass }"></ng-template>
                                 </ng-template>
                             </p-checkbox>
 
@@ -3041,6 +3004,7 @@ class MultiSelect extends BaseComponent {
                                             [ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
                                             [ariaSetSize]="ariaSetSize"
                                             [variant]="variant"
+                                            [highlightOnSelect]="highlightOnSelect"
                                             (onClick)="onOptionSelect($event, false, getOptionIndex(i, scrollerOptions))"
                                             (onMouseEnter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
                                         ></p-multiselect-item>
@@ -3085,11 +3049,7 @@ class MultiSelect extends BaseComponent {
                 providers: [MULTISELECT_VALUE_ACCESSOR, MultiSelectStyle],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
-                host: {
-                    '[attr.id]': 'id',
-                    '[style]': 'style',
-                    '(click)': 'onContainerClick($event)'
-                }
+                host: { '[attr.id]': 'id', '[style]': 'style', '(click)': 'onContainerClick($event)' }
             }]
     }], () => [{ type: i0.NgZone }, { type: i3.FilterService }, { type: i3.OverlayService }], { id: [{
             type: Input
@@ -3256,6 +3216,9 @@ class MultiSelect extends BaseComponent {
         }], autoOptionFocus: [{
             type: Input,
             args: [{ transform: booleanAttribute }]
+        }], highlightOnSelect: [{
+            type: Input,
+            args: [{ transform: booleanAttribute }]
         }], onChange: [{
             type: Output
         }], onFilter: [{
@@ -3377,10 +3340,7 @@ class MultiSelectModule {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MultiSelectModule, [{
         type: NgModule,
-        args: [{
-                imports: [MultiSelect, SharedModule],
-                exports: [MultiSelect, SharedModule]
-            }]
+        args: [{ imports: [MultiSelect, SharedModule], exports: [MultiSelect, SharedModule] }]
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MultiSelectModule, { imports: [MultiSelect, SharedModule], exports: [MultiSelect, SharedModule] }); })();