primeng 18.0.5-lts → 18.0.7-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) { }
@@ -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);
@@ -1022,6 +1022,7 @@ class MultiSelectItem extends BaseComponent {
     template;
     checkIconTemplate;
     itemCheckboxIconTemplate;
+    highlightOnSelect;
     onClick = new EventEmitter();
     onMouseEnter = new EventEmitter();
     onOptionClick(event) {
@@ -1033,7 +1034,7 @@ class MultiSelectItem extends BaseComponent {
         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);
@@ -1042,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);
@@ -1051,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, [{
@@ -1064,8 +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"
@@ -1121,6 +1123,9 @@ class MultiSelectItem extends BaseComponent {
             type: Input
         }], itemCheckboxIconTemplate: [{
             type: Input
+        }], highlightOnSelect: [{
+            type: Input,
+            args: [{ transform: booleanAttribute }]
         }], onClick: [{
             type: Output
         }], onMouseEnter: [{
@@ -1573,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.
@@ -2287,8 +2297,11 @@ class MultiSelect extends BaseComponent {
         event.preventDefault();
     }
     onEscapeKey(event) {
-        this.overlayVisible && this.hide(true);
-        event.preventDefault();
+        if (this.overlayVisible) {
+            this.hide(true);
+            event.stopPropagation();
+            event.preventDefault();
+        }
     }
     onDeleteKey(event) {
         if (this.showClear) {
@@ -2407,7 +2420,8 @@ 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
@@ -2734,7 +2748,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);
@@ -2993,6 +3007,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>
@@ -3204,6 +3219,9 @@ class MultiSelect extends BaseComponent {
         }], autoOptionFocus: [{
             type: Input,
             args: [{ transform: booleanAttribute }]
+        }], highlightOnSelect: [{
+            type: Input,
+            args: [{ transform: booleanAttribute }]
         }], onChange: [{
             type: Output
         }], onFilter: [{