primeng 18.0.0-beta.1 → 18.0.0-beta.3

package/fesm2022/primeng-multiselect.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, EventEmitter, booleanAttribute, numberAttribute, Component, ViewEncapsulation, Input, Output, inject, signal, computed, effect, ChangeDetectionStrategy, ViewChild, ContentChild, ContentChildren, NgModule } from '@angular/core';
+import { Injectable, forwardRef, EventEmitter, booleanAttribute, numberAttribute, Component, ViewEncapsulation, Input, Output, inject, signal, computed, effect, ChangeDetectionStrategy, ViewChild, ContentChild, ContentChildren, HostBinding, NgModule } from '@angular/core';
 import * as i5 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i2 from 'primeng/api';
@@ -294,6 +294,90 @@ class MultiSelectStyle extends BaseStyle {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: MultiSelectStyle, decorators: [{
             type: Injectable
         }] });
+/**
+ *
+ * MultiSelect is used to select multiple items from a collection.
+ *
+ * [Live Demo](https://www.primeng.org/multiselect/)
+ *
+ * @module multiselectstyle
+ *
+ */
+var MultiSelectClasses;
+(function (MultiSelectClasses) {
+    /**
+     * Class name of the root element
+     */
+    MultiSelectClasses["root"] = "p-multiselect";
+    /**
+     * Class name of the label container element
+     */
+    MultiSelectClasses["labelContainer"] = "p-multiselect-label-container";
+    /**
+     * Class name of the label element
+     */
+    MultiSelectClasses["label"] = "p-multiselect-label";
+    /**
+     * Class name of the chip item element
+     */
+    MultiSelectClasses["chipItem"] = "p-multiselect-chip-item";
+    /**
+     * Class name of the chip element
+     */
+    MultiSelectClasses["pcChip"] = "p-multiselect-chip";
+    /**
+     * Class name of the chip icon element
+     */
+    MultiSelectClasses["chipIcon"] = "p-multiselect-chip-icon";
+    /**
+     * Class name of the dropdown element
+     */
+    MultiSelectClasses["dropdown"] = "p-multiselect-dropdown";
+    /**
+     * Class name of the loading icon element
+     */
+    MultiSelectClasses["loadingIcon"] = "p-multiselect-loading-icon";
+    /**
+     * Class name of the dropdown icon element
+     */
+    MultiSelectClasses["dropdownIcon"] = "p-multiselect-dropdown-icon";
+    /**
+     * Class name of the overlay element
+     */
+    MultiSelectClasses["overlay"] = "p-multiselect-overlay";
+    /**
+     * Class name of the header element
+     */
+    MultiSelectClasses["header"] = "p-multiselect-header";
+    /**
+     * Class name of the filter container element
+     */
+    MultiSelectClasses["pcFilterContainer"] = "p-multiselect-filter-container";
+    /**
+     * Class name of the filter element
+     */
+    MultiSelectClasses["pcFilter"] = "p-multiselect-filter";
+    /**
+     * Class name of the list container element
+     */
+    MultiSelectClasses["listContainer"] = "p-multiselect-list-container";
+    /**
+     * Class name of the list element
+     */
+    MultiSelectClasses["list"] = "p-multiselect-list";
+    /**
+     * Class name of the option group element
+     */
+    MultiSelectClasses["optionGroup"] = "p-multiselect-option-group";
+    /**
+     * Class name of the option element
+     */
+    MultiSelectClasses["option"] = "p-multiselect-option";
+    /**
+     * Class name of the empty message element
+     */
+    MultiSelectClasses["emptyMessage"] = "p-multiselect-empty-message";
+})(MultiSelectClasses || (MultiSelectClasses = {}));
 
 const MULTISELECT_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -333,14 +417,13 @@ class MultiSelectItem extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: MultiSelectItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: MultiSelectItem, selector: "p-multiSelectItem", inputs: { id: "id", option: "option", selected: ["selected", "selected", booleanAttribute], label: "label", disabled: ["disabled", "disabled", booleanAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], focused: ["focused", "focused", booleanAttribute], ariaPosInset: "ariaPosInset", ariaSetSize: "ariaSetSize", variant: "variant", template: "template", checkIconTemplate: "checkIconTemplate", itemCheckboxIconTemplate: "itemCheckboxIconTemplate" }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: MultiSelectItem, selector: "p-multiSelectItem, p-multiselect-item", inputs: { id: "id", option: "option", selected: ["selected", "selected", booleanAttribute], label: "label", disabled: ["disabled", "disabled", booleanAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], focused: ["focused", "focused", booleanAttribute], ariaPosInset: "ariaPosInset", ariaSetSize: "ariaSetSize", variant: "variant", template: "template", checkIconTemplate: "checkIconTemplate", itemCheckboxIconTemplate: "itemCheckboxIconTemplate" }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, usesInheritance: true, ngImport: i0, template: `
         <li
             pRipple
             role="option"
             [ngStyle]="{ height: itemSize + 'px' }"
             [ngClass]="{
                 'p-multiselect-option': true,
-                'p-multiselect-option-selected': selected,
                 'p-disabled': disabled,
                 'p-focus': focused,
             }"
@@ -373,7 +456,7 @@ class MultiSelectItem extends BaseComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: MultiSelectItem, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-multiSelectItem',
+                    selector: 'p-multiSelectItem, p-multiselect-item',
                     template: `
         <li
             pRipple
@@ -381,7 +464,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             [ngStyle]="{ height: itemSize + 'px' }"
             [ngClass]="{
                 'p-multiselect-option': true,
-                'p-multiselect-option-selected': selected,
                 'p-disabled': disabled,
                 'p-focus': focused,
             }"
@@ -732,7 +814,7 @@ class MultiSelect extends BaseComponent {
      * Applies focus to the filter element when the overlay is shown.
      * @group Props
      */
-    autofocusFilter = true;
+    autofocusFilter = false;
     /**
      * Defines how the selected items are displayed.
      * @group Props
@@ -872,7 +954,7 @@ class MultiSelect extends BaseComponent {
      * Indicates whether to focus on options when hovering over them, defaults to optionLabel.
      * @group Props
      */
-    focusOnHover = false;
+    focusOnHover = true;
     /**
      * Fields used when filtering the options, defaults to optionLabel.
      * @group Props
@@ -951,7 +1033,6 @@ class MultiSelect extends BaseComponent {
      * @group Emits
      */
     onSelectAllChange = new EventEmitter();
-    containerViewChild;
     overlayViewChild;
     filterInputChild;
     focusInputViewChild;
@@ -1016,6 +1097,24 @@ class MultiSelect extends BaseComponent {
     focusedOptionIndex = signal(-1);
     selectedOptions;
     clickInProgress = false;
+    get hostClasses() {
+        const classes = [];
+        if (typeof this.rootClass === 'string') {
+            classes.push(this.rootClass);
+        }
+        else if (Array.isArray(this.rootClass)) {
+            classes.push(...this.rootClass);
+        }
+        else if (typeof this.rootClass === 'object') {
+            Object.keys(this.rootClass)
+                .filter((key) => this.rootClass[key])
+                .forEach((key) => classes.push(key));
+        }
+        if (this.styleClass) {
+            classes.push(this.styleClass);
+        }
+        return classes.join(' ');
+    }
     get rootClass() {
         return this._componentStyle.classes.root({ instance: this });
     }
@@ -1763,8 +1862,6 @@ class MultiSelect extends BaseComponent {
         this.onChange.emit({ originalEvent: event, value: this.value });
         DomHandler.focus(this.headerCheckboxViewChild?.nativeElement);
         this.headerCheckboxFocus = true;
-        event.preventDefault();
-        event.stopPropagation();
     }
     changeFocusedOptionIndex(event, index) {
         if (this.focusedOptionIndex() !== index) {
@@ -2022,720 +2119,713 @@ class MultiSelect extends BaseComponent {
         return this._filterValue() && this._filterValue().trim().length > 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: MultiSelect, deps: [{ token: i0.NgZone }, { token: i2.FilterService }, { token: i2.PrimeNGConfig }, { token: i2.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: MultiSelect, selector: "p-multiSelect", inputs: { id: "id", ariaLabel: "ariaLabel", style: "style", styleClass: "styleClass", panelStyle: "panelStyle", panelStyleClass: "panelStyleClass", inputId: "inputId", disabled: ["disabled", "disabled", booleanAttribute], fluid: ["fluid", "fluid", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], group: ["group", "group", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterPlaceHolder: "filterPlaceHolder", filterLocale: "filterLocale", overlayVisible: ["overlayVisible", "overlayVisible", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], variant: "variant", appendTo: "appendTo", dataKey: "dataKey", name: "name", ariaLabelledBy: "ariaLabelledBy", displaySelectedLabel: "displaySelectedLabel", maxSelectedLabels: "maxSelectedLabels", selectionLimit: ["selectionLimit", "selectionLimit", numberAttribute], selectedItemsLabel: "selectedItemsLabel", showToggleAll: ["showToggleAll", "showToggleAll", booleanAttribute], emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", resetFilterOnHide: ["resetFilterOnHide", "resetFilterOnHide", booleanAttribute], dropdownIcon: "dropdownIcon", chipIcon: "chipIcon", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", showHeader: ["showHeader", "showHeader", booleanAttribute], filterBy: "filterBy", scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], loading: ["loading", "loading", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], loadingIcon: "loadingIcon", virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", filterMatchMode: "filterMatchMode", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: ["autofocusFilter", "autofocusFilter", booleanAttribute], display: "display", autocomplete: "autocomplete", showClear: ["showClear", "showClear", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", defaultLabel: "defaultLabel", placeholder: "placeholder", options: "options", filterValue: "filterValue", itemSize: "itemSize", selectAll: "selectAll", focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], filterFields: "filterFields", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], autoOptionFocus: ["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" }, providers: [MULTISELECT_VALUE_ACCESSOR, MultiSelectStyle], queries: [{ propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "filterInputChild", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "focusInputViewChild", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "lastHiddenFocusableElementOnOverlay", first: true, predicate: ["lastHiddenFocusableEl"], descendants: true }, { propertyName: "firstHiddenFocusableElementOnOverlay", first: true, predicate: ["firstHiddenFocusableEl"], descendants: true }, { propertyName: "headerCheckboxViewChild", first: true, predicate: ["headerCheckbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <div #container [attr.id]="id" [ngClass]="rootClass" [ngStyle]="style" [class]="styleClass" (click)="onContainerClick($event)">
-            <div class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
-                <input
-                    #focusInput
-                    [pTooltip]="tooltip"
-                    [tooltipPosition]="tooltipPosition"
-                    [positionStyle]="tooltipPositionStyle"
-                    [tooltipStyleClass]="tooltipStyleClass"
-                    [attr.aria-disabled]="disabled"
-                    [attr.id]="inputId"
-                    role="combobox"
-                    [attr.aria-label]="ariaLabel"
-                    [attr.aria-labelledby]="ariaLabelledBy"
-                    [attr.aria-haspopup]="'listbox'"
-                    [attr.aria-expanded]="overlayVisible ?? false"
-                    [attr.aria-controls]="overlayVisible ? id + '_list' : null"
-                    [attr.tabindex]="!disabled ? tabindex : -1"
-                    [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
-                    (focus)="onInputFocus($event)"
-                    (blur)="onInputBlur($event)"
-                    (keydown)="onKeyDown($event)"
-                    pAutoFocus
-                    [autofocus]="autofocus"
-                />
-            </div>
-            <div
-                class="p-multiselect-label-container"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: MultiSelect, selector: "p-multiSelect, p-multiselect", inputs: { id: "id", ariaLabel: "ariaLabel", style: "style", styleClass: "styleClass", panelStyle: "panelStyle", panelStyleClass: "panelStyleClass", inputId: "inputId", disabled: ["disabled", "disabled", booleanAttribute], fluid: ["fluid", "fluid", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], group: ["group", "group", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterPlaceHolder: "filterPlaceHolder", filterLocale: "filterLocale", overlayVisible: ["overlayVisible", "overlayVisible", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], variant: "variant", appendTo: "appendTo", dataKey: "dataKey", name: "name", ariaLabelledBy: "ariaLabelledBy", displaySelectedLabel: "displaySelectedLabel", maxSelectedLabels: "maxSelectedLabels", selectionLimit: ["selectionLimit", "selectionLimit", numberAttribute], selectedItemsLabel: "selectedItemsLabel", showToggleAll: ["showToggleAll", "showToggleAll", booleanAttribute], emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", resetFilterOnHide: ["resetFilterOnHide", "resetFilterOnHide", booleanAttribute], dropdownIcon: "dropdownIcon", chipIcon: "chipIcon", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", showHeader: ["showHeader", "showHeader", booleanAttribute], filterBy: "filterBy", scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], loading: ["loading", "loading", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], loadingIcon: "loadingIcon", virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", filterMatchMode: "filterMatchMode", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: ["autofocusFilter", "autofocusFilter", booleanAttribute], display: "display", autocomplete: "autocomplete", showClear: ["showClear", "showClear", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", defaultLabel: "defaultLabel", placeholder: "placeholder", options: "options", filterValue: "filterValue", itemSize: "itemSize", selectAll: "selectAll", focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], filterFields: "filterFields", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], autoOptionFocus: ["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" }, host: { listeners: { "click": "onContainerClick($event)" }, properties: { "attr.id": "id", "style": "style", "class": "this.hostClasses" } }, providers: [MULTISELECT_VALUE_ACCESSOR, MultiSelectStyle], queries: [{ propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "filterInputChild", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "focusInputViewChild", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "lastHiddenFocusableElementOnOverlay", first: true, predicate: ["lastHiddenFocusableEl"], descendants: true }, { propertyName: "firstHiddenFocusableElementOnOverlay", first: true, predicate: ["firstHiddenFocusableEl"], descendants: true }, { propertyName: "headerCheckboxViewChild", first: true, predicate: ["headerCheckbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <div class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
+            <input
+                #focusInput
                 [pTooltip]="tooltip"
-                (mouseleave)="labelContainerMouseLeave()"
-                [tooltipDisabled]="_disableTooltip"
                 [tooltipPosition]="tooltipPosition"
                 [positionStyle]="tooltipPositionStyle"
                 [tooltipStyleClass]="tooltipStyleClass"
-            >
-                <div [ngClass]="labelClass">
-                    <ng-container *ngIf="!selectedItemsTemplate">
-                        <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"
-                                >
-                                    <ng-container *ngIf="chipIconTemplate || removeTokenIconTemplate">
-                                        <ng-template pTemplate="removeicon">
-                                            <ng-container *ngIf="!disabled">
-                                                <span
-                                                    class="p-multiselect-chip-icon"
-                                                    *ngIf="chipIconTemplate || removeTokenIconTemplate"
-                                                    (click)="removeOption(item, event)"
-                                                    [attr.data-pc-section]="'clearicon'"
-                                                    [attr.aria-hidden]="true"
-                                                >
-                                                    <ng-container
-                                                        *ngTemplateOutlet="
-                                                            chipIconTemplate || removeTokenIconTemplate;
-                                                            context: { class: 'p-multiselect-chip-icon' }
-                                                        "
-                                                    ></ng-container>
-                                                </span>
-                                            </ng-container>
-                                        </ng-template>
-                                    </ng-container>
-                                </p-chip>
-                            </div>
-                            <ng-container *ngIf="!modelValue() || modelValue().length === 0">{{
-                                placeholder() || defaultLabel || 'empty'
-                            }}</ng-container>
-                        </ng-container>
+                [attr.aria-disabled]="disabled"
+                [attr.id]="inputId"
+                role="combobox"
+                [attr.aria-label]="ariaLabel"
+                [attr.aria-labelledby]="ariaLabelledBy"
+                [attr.aria-haspopup]="'listbox'"
+                [attr.aria-expanded]="overlayVisible ?? false"
+                [attr.aria-controls]="overlayVisible ? id + '_list' : null"
+                [attr.tabindex]="!disabled ? tabindex : -1"
+                [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
+                (focus)="onInputFocus($event)"
+                (blur)="onInputBlur($event)"
+                (keydown)="onKeyDown($event)"
+                pAutoFocus
+                [autofocus]="autofocus"
+            />
+        </div>
+        <div
+            class="p-multiselect-label-container"
+            [pTooltip]="tooltip"
+            (mouseleave)="labelContainerMouseLeave()"
+            [tooltipDisabled]="_disableTooltip"
+            [tooltipPosition]="tooltipPosition"
+            [positionStyle]="tooltipPositionStyle"
+            [tooltipStyleClass]="tooltipStyleClass"
+        >
+            <div [ngClass]="labelClass">
+                <ng-container *ngIf="!selectedItemsTemplate">
+                    <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"
+                            >
+                                <ng-container *ngIf="chipIconTemplate || removeTokenIconTemplate">
+                                    <ng-template pTemplate="removeicon">
+                                        <ng-container *ngIf="!disabled">
+                                            <span
+                                                class="p-multiselect-chip-icon"
+                                                *ngIf="chipIconTemplate || removeTokenIconTemplate"
+                                                (click)="removeOption(item, event)"
+                                                [attr.data-pc-section]="'clearicon'"
+                                                [attr.aria-hidden]="true"
+                                            >
+                                                <ng-container
+                                                    *ngTemplateOutlet="
+                                                        chipIconTemplate || removeTokenIconTemplate;
+                                                        context: { class: 'p-multiselect-chip-icon' }
+                                                    "
+                                                ></ng-container>
+                                            </span>
+                                        </ng-container>
+                                    </ng-template>
+                                </ng-container>
+                            </p-chip>
+                        </div>
+                        <ng-container *ngIf="!modelValue() || modelValue().length === 0">{{
+                            placeholder() || defaultLabel || 'empty'
+                        }}</ng-container>
                     </ng-container>
-                    <ng-container
-                        *ngTemplateOutlet="
-                            selectedItemsTemplate;
-                            context: { $implicit: selectedOptions, removeChip: removeOption.bind(this) }
-                        "
-                    ></ng-container>
-                </div>
+                </ng-container>
+                <ng-container
+                    *ngTemplateOutlet="selectedItemsTemplate; context: { $implicit: selectedOptions, removeChip: removeOption.bind(this) }"
+                ></ng-container>
             </div>
-            <ng-container *ngIf="isVisibleClearIcon">
-                <TimesIcon
-                    *ngIf="!clearIconTemplate"
-                    class="p-multiselect-clear-icon"
-                    (click)="clear($event)"
-                    [attr.data-pc-section]="'clearicon'"
-                    [attr.aria-hidden]="true"
-                />
-                <span
-                    *ngIf="clearIconTemplate"
-                    class="p-multiselect-clear-icon"
-                    (click)="clear($event)"
-                    [attr.data-pc-section]="'clearicon'"
-                    [attr.aria-hidden]="true"
-                >
-                    <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
-                </span>
-            </ng-container>
-            <div class="p-multiselect-dropdown">
-                <ng-container *ngIf="loading; else elseBlock">
-                    <ng-container *ngIf="loadingIconTemplate">
-                        <ng-container *ngTemplateOutlet="loadingIconTemplate"></ng-container>
-                    </ng-container>
-                    <ng-container *ngIf="!loadingIconTemplate">
-                        <span *ngIf="loadingIcon" [ngClass]="'p-multiselect-loading-icon pi-spin ' + loadingIcon" aria-hidden="true"></span>
-                        <span *ngIf="!loadingIcon" [class]="'p-multiselect-loading-icon pi pi-spinner pi-spin'" aria-hidden="true"></span>
-                    </ng-container>
+        </div>
+        <ng-container *ngIf="isVisibleClearIcon">
+            <TimesIcon
+                *ngIf="!clearIconTemplate"
+                class="p-multiselect-clear-icon"
+                (click)="clear($event)"
+                [attr.data-pc-section]="'clearicon'"
+                [attr.aria-hidden]="true"
+            />
+            <span
+                *ngIf="clearIconTemplate"
+                class="p-multiselect-clear-icon"
+                (click)="clear($event)"
+                [attr.data-pc-section]="'clearicon'"
+                [attr.aria-hidden]="true"
+            >
+                <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
+            </span>
+        </ng-container>
+        <div class="p-multiselect-dropdown">
+            <ng-container *ngIf="loading; else elseBlock">
+                <ng-container *ngIf="loadingIconTemplate">
+                    <ng-container *ngTemplateOutlet="loadingIconTemplate"></ng-container>
                 </ng-container>
-                <ng-template #elseBlock>
-                    <ng-container *ngIf="!dropdownIconTemplate">
-                        <span
-                            *ngIf="dropdownIcon"
-                            class="p-multiselect-dropdown-icon"
-                            [ngClass]="dropdownIcon"
-                            [attr.data-pc-section]="'triggericon'"
-                            [attr.aria-hidden]="true"
-                        ></span>
-                        <ChevronDownIcon
-                            *ngIf="!dropdownIcon"
-                            [styleClass]="'p-multiselect-dropdown-icon'"
-                            [attr.data-pc-section]="'triggericon'"
-                            [attr.aria-hidden]="true"
-                        />
-                    </ng-container>
+                <ng-container *ngIf="!loadingIconTemplate">
+                    <span *ngIf="loadingIcon" [ngClass]="'p-multiselect-loading-icon pi-spin ' + loadingIcon" aria-hidden="true"></span>
+                    <span *ngIf="!loadingIcon" [class]="'p-multiselect-loading-icon pi pi-spinner pi-spin'" aria-hidden="true"></span>
+                </ng-container>
+            </ng-container>
+            <ng-template #elseBlock>
+                <ng-container *ngIf="!dropdownIconTemplate">
                     <span
-                        *ngIf="dropdownIconTemplate"
+                        *ngIf="dropdownIcon"
                         class="p-multiselect-dropdown-icon"
+                        [ngClass]="dropdownIcon"
                         [attr.data-pc-section]="'triggericon'"
                         [attr.aria-hidden]="true"
+                    ></span>
+                    <ChevronDownIcon
+                        *ngIf="!dropdownIcon"
+                        [styleClass]="'p-multiselect-dropdown-icon'"
+                        [attr.data-pc-section]="'triggericon'"
+                        [attr.aria-hidden]="true"
+                    />
+                </ng-container>
+                <span
+                    *ngIf="dropdownIconTemplate"
+                    class="p-multiselect-dropdown-icon"
+                    [attr.data-pc-section]="'triggericon'"
+                    [attr.aria-hidden]="true"
+                >
+                    <ng-template *ngTemplateOutlet="dropdownIconTemplate"></ng-template>
+                </span>
+            </ng-template>
+        </div>
+        <p-overlay
+            #overlay
+            [(visible)]="overlayVisible"
+            [options]="overlayOptions"
+            [target]="'@parent'"
+            [appendTo]="appendTo"
+            [autoZIndex]="autoZIndex"
+            [baseZIndex]="baseZIndex"
+            [showTransitionOptions]="showTransitionOptions"
+            [hideTransitionOptions]="hideTransitionOptions"
+            (onAnimationStart)="onOverlayAnimationStart($event)"
+            (onHide)="hide()"
+        >
+            <ng-template pTemplate="content">
+                <div
+                    [attr.id]="id + '_list'"
+                    [ngClass]="'p-multiselect-overlay p-component'"
+                    [ngStyle]="panelStyle"
+                    [class]="panelStyleClass"
+                >
+                    <span
+                        #firstHiddenFocusableEl
+                        role="presentation"
+                        class="p-hidden-accessible p-hidden-focusable"
+                        [attr.tabindex]="0"
+                        (focus)="onFirstHiddenFocus($event)"
+                        [attr.data-p-hidden-accessible]="true"
+                        [attr.data-p-hidden-focusable]="true"
                     >
-                        <ng-template *ngTemplateOutlet="dropdownIconTemplate"></ng-template>
                     </span>
-                </ng-template>
-            </div>
-            <p-overlay
-                #overlay
-                [(visible)]="overlayVisible"
-                [options]="overlayOptions"
-                [target]="'@parent'"
-                [appendTo]="appendTo"
-                [autoZIndex]="autoZIndex"
-                [baseZIndex]="baseZIndex"
-                [showTransitionOptions]="showTransitionOptions"
-                [hideTransitionOptions]="hideTransitionOptions"
-                (onAnimationStart)="onOverlayAnimationStart($event)"
-                (onHide)="hide()"
-            >
-                <ng-template pTemplate="content">
-                    <div
-                        [attr.id]="id + '_list'"
-                        [ngClass]="'p-multiselect-overlay p-component'"
-                        [ngStyle]="panelStyle"
-                        [class]="panelStyleClass"
-                    >
-                        <span
-                            #firstHiddenFocusableEl
-                            role="presentation"
-                            class="p-hidden-accessible p-hidden-focusable"
-                            [attr.tabindex]="0"
-                            (focus)="onFirstHiddenFocus($event)"
-                            [attr.data-p-hidden-accessible]="true"
-                            [attr.data-p-hidden-focusable]="true"
-                        >
-                        </span>
-                        <div class="p-multiselect-header" *ngIf="showHeader">
-                            <ng-content select="p-header"></ng-content>
-                            <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
-                            <ng-container *ngIf="filterTemplate; else builtInFilterElement">
-                                <ng-container *ngTemplateOutlet="filterTemplate; context: { options: filterOptions }"></ng-container>
-                            </ng-container>
-                            <ng-template #builtInFilterElement>
-                                <p-checkbox
-                                    [ngModel]="allSelected()"
-                                    [binary]="true"
-                                    (onChange)="onToggleAll($event)"
-                                    *ngIf="showToggleAll && !selectionLimit"
-                                    [variant]="variant"
-                                    [disabled]="disabled || toggleAllDisabled"
-                                >
-                                    <ng-container *ngIf="allSelected() || partialSelected()">
-                                        <ng-template pTemplate="icon" let-class="class">
-                                            <span *ngIf="headerCheckboxIconTemplate">
-                                                <ng-template
-                                                    *ngTemplateOutlet="
-                                                        headerCheckboxIconTemplate;
-                                                        context: {
-                                                            checked: allSelected(),
-                                                            partialSelected: partialSelected(),
-                                                            class: class,
-                                                        }
-                                                    "
-                                                ></ng-template>
-                                            </span>
-                                        </ng-template>
-                                    </ng-container>
-                                </p-checkbox>
-
-                                <div class="p-multiselect-filter-container" *ngIf="filter">
-                                    <p-iconField>
-                                        <input
-                                            #filterInput
-                                            pInputText
-                                            [variant]="variant"
-                                            type="text"
-                                            role="searchbox"
-                                            [attr.autocomplete]="autocomplete"
-                                            [attr.placeholder]="filterPlaceHolder"
-                                            role="searchbox"
-                                            [attr.aria-owns]="id + '_list'"
-                                            [attr.aria-activedescendant]="focusedOptionId"
-                                            [value]="_filterValue() || ''"
-                                            (input)="onFilterInputChange($event)"
-                                            (keydown)="onFilterKeyDown($event)"
-                                            (click)="onInputClick($event)"
-                                            (blur)="onFilterBlur($event)"
-                                            class="p-multiselect-filter"
-                                            [disabled]="disabled"
-                                            [attr.placeholder]="filterPlaceHolder"
-                                            [attr.aria-label]="ariaFilterLabel"
-                                        />
-                                        <p-inputIcon>
-                                            <SearchIcon [styleClass]="'p-multiselect-filter-icon'" *ngIf="!filterIconTemplate" />
-                                            <span *ngIf="filterIconTemplate" class="p-multiselect-filter-icon">
-                                                <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
-                                            </span>
-                                        </p-inputIcon>
-                                    </p-iconField>
-                                </div>
-                            </ng-template>
-                        </div>
-                        <div class="p-multiselect-list-container" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
-                            <p-scroller
-                                *ngIf="virtualScroll"
-                                #scroller
-                                [items]="visibleOptions()"
-                                [style]="{ height: scrollHeight }"
-                                [itemSize]="virtualScrollItemSize || _itemSize"
-                                [autoSize]="true"
-                                [tabindex]="-1"
-                                [lazy]="lazy"
-                                (onLazyLoad)="onLazyLoad.emit($event)"
-                                [options]="virtualScrollOptions"
+                    <div class="p-multiselect-header" *ngIf="showHeader">
+                        <ng-content select="p-header"></ng-content>
+                        <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+                        <ng-container *ngIf="filterTemplate; else builtInFilterElement">
+                            <ng-container *ngTemplateOutlet="filterTemplate; context: { options: filterOptions }"></ng-container>
+                        </ng-container>
+                        <ng-template #builtInFilterElement>
+                            <p-checkbox
+                                [ngModel]="allSelected()"
+                                [binary]="true"
+                                (onChange)="onToggleAll($event)"
+                                *ngIf="showToggleAll && !selectionLimit"
+                                [variant]="variant"
+                                [disabled]="disabled || toggleAllDisabled"
                             >
-                                <ng-template pTemplate="content" let-items let-scrollerOptions="options">
-                                    <ng-container
-                                        *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"
-                                    ></ng-container>
+                                <ng-template pTemplate="icon" let-class="class">
+                                    <CheckIcon
+                                        *ngIf="!headerCheckboxIconTemplate && allSelected()"
+                                        [styleClass]="class"
+                                        [attr.data-pc-section]="'icon'"
+                                    />
+                                    <ng-template
+                                        *ngTemplateOutlet="
+                                            headerCheckboxIconTemplate;
+                                            context: {
+                                                checked: allSelected(),
+                                                partialSelected: partialSelected(),
+                                                class: class,
+                                            }
+                                        "
+                                    ></ng-template>
                                 </ng-template>
-                                <ng-container *ngIf="loaderTemplate">
-                                    <ng-template pTemplate="loader" let-scrollerOptions="options">
-                                        <ng-container
-                                            *ngTemplateOutlet="loaderTemplate; context: { options: scrollerOptions }"
-                                        ></ng-container>
-                                    </ng-template>
-                                </ng-container>
-                            </p-scroller>
-                            <ng-container *ngIf="!virtualScroll">
+                            </p-checkbox>
+
+                            <div class="p-multiselect-filter-container" *ngIf="filter">
+                                <p-iconfield>
+                                    <input
+                                        #filterInput
+                                        pInputText
+                                        [variant]="variant"
+                                        type="text"
+                                        role="searchbox"
+                                        [attr.autocomplete]="autocomplete"
+                                        [attr.placeholder]="filterPlaceHolder"
+                                        role="searchbox"
+                                        [attr.aria-owns]="id + '_list'"
+                                        [attr.aria-activedescendant]="focusedOptionId"
+                                        [value]="_filterValue() || ''"
+                                        (input)="onFilterInputChange($event)"
+                                        (keydown)="onFilterKeyDown($event)"
+                                        (click)="onInputClick($event)"
+                                        (blur)="onFilterBlur($event)"
+                                        class="p-multiselect-filter"
+                                        [disabled]="disabled"
+                                        [attr.placeholder]="filterPlaceHolder"
+                                        [attr.aria-label]="ariaFilterLabel"
+                                    />
+                                    <p-inputicon>
+                                        <SearchIcon [styleClass]="'p-multiselect-filter-icon'" *ngIf="!filterIconTemplate" />
+                                        <span *ngIf="filterIconTemplate" class="p-multiselect-filter-icon">
+                                            <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
+                                        </span>
+                                    </p-inputicon>
+                                </p-iconfield>
+                            </div>
+                        </ng-template>
+                    </div>
+                    <div class="p-multiselect-list-container" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
+                        <p-scroller
+                            *ngIf="virtualScroll"
+                            #scroller
+                            [items]="visibleOptions()"
+                            [style]="{ height: scrollHeight }"
+                            [itemSize]="virtualScrollItemSize || _itemSize"
+                            [autoSize]="true"
+                            [tabindex]="-1"
+                            [lazy]="lazy"
+                            (onLazyLoad)="onLazyLoad.emit($event)"
+                            [options]="virtualScrollOptions"
+                        >
+                            <ng-template pTemplate="content" let-items let-scrollerOptions="options">
                                 <ng-container
-                                    *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"
+                                    *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"
                                 ></ng-container>
+                            </ng-template>
+                            <ng-container *ngIf="loaderTemplate">
+                                <ng-template pTemplate="loader" let-scrollerOptions="options">
+                                    <ng-container *ngTemplateOutlet="loaderTemplate; context: { options: scrollerOptions }"></ng-container>
+                                </ng-template>
                             </ng-container>
+                        </p-scroller>
+                        <ng-container *ngIf="!virtualScroll">
+                            <ng-container
+                                *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"
+                            ></ng-container>
+                        </ng-container>
 
-                            <ng-template #buildInItems let-items let-scrollerOptions="options">
-                                <ul
-                                    #items
-                                    class="p-multiselect-list"
-                                    [ngClass]="scrollerOptions.contentStyleClass"
-                                    [style]="scrollerOptions.contentStyle"
-                                    role="listbox"
-                                    aria-multiselectable="true"
-                                    [attr.aria-label]="listLabel"
-                                >
-                                    <ng-template ngFor let-option [ngForOf]="items" let-i="index">
-                                        <ng-container *ngIf="isOptionGroup(option)">
-                                            <li
-                                                [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
-                                                class="p-multiselect-option-group"
-                                                [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                                role="option"
-                                            >
-                                                <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
-                                                <ng-container
-                                                    *ngTemplateOutlet="groupTemplate; context: { $implicit: option.optionGroup }"
-                                                ></ng-container>
-                                            </li>
-                                        </ng-container>
-                                        <ng-container *ngIf="!isOptionGroup(option)">
-                                            <p-multiSelectItem
-                                                [id]="id + '_' + getOptionIndex(i, scrollerOptions)"
-                                                [option]="option"
-                                                [selected]="isSelected(option)"
-                                                [label]="getOptionLabel(option)"
-                                                [disabled]="isOptionDisabled(option)"
-                                                [template]="itemTemplate"
-                                                [checkIconTemplate]="checkIconTemplate"
-                                                [itemCheckboxIconTemplate]="itemCheckboxIconTemplate"
-                                                [itemSize]="scrollerOptions.itemSize"
-                                                [focused]="focusedOptionIndex() === getOptionIndex(i, scrollerOptions)"
-                                                [ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
-                                                [ariaSetSize]="ariaSetSize"
-                                                [variant]="variant"
-                                                (onClick)="onOptionSelect($event, false, getOptionIndex(i, scrollerOptions))"
-                                                (onMouseEnter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
-                                            ></p-multiSelectItem>
-                                        </ng-container>
-                                    </ng-template>
-
-                                    <li
-                                        *ngIf="hasFilter() && isEmpty()"
-                                        class="p-multiselect-empty-message"
-                                        [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                        role="option"
-                                    >
-                                        <ng-container *ngIf="!emptyFilterTemplate && !emptyTemplate; else emptyFilter">
-                                            {{ emptyFilterMessageLabel }}
-                                        </ng-container>
-                                        <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || emptyTemplate"></ng-container>
-                                    </li>
-                                    <li
-                                        *ngIf="!hasFilter() && isEmpty()"
-                                        class="p-multiselect-empty-message"
-                                        [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                        role="option"
-                                    >
-                                        <ng-container *ngIf="!emptyTemplate; else empty">
-                                            {{ emptyMessageLabel }}
-                                        </ng-container>
-                                        <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
-                                    </li>
-                                </ul>
-                            </ng-template>
-                        </div>
-                        <div *ngIf="footerFacet || footerTemplate">
-                            <ng-content select="p-footer"></ng-content>
-                            <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
-                        </div>
+                        <ng-template #buildInItems let-items let-scrollerOptions="options">
+                            <ul
+                                #items
+                                class="p-multiselect-list"
+                                [ngClass]="scrollerOptions.contentStyleClass"
+                                [style]="scrollerOptions.contentStyle"
+                                role="listbox"
+                                aria-multiselectable="true"
+                                [attr.aria-label]="listLabel"
+                            >
+                                <ng-template ngFor let-option [ngForOf]="items" let-i="index">
+                                    <ng-container *ngIf="isOptionGroup(option)">
+                                        <li
+                                            [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
+                                            class="p-multiselect-option-group"
+                                            [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                                            role="option"
+                                        >
+                                            <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
+                                            <ng-container
+                                                *ngTemplateOutlet="groupTemplate; context: { $implicit: option.optionGroup }"
+                                            ></ng-container>
+                                        </li>
+                                    </ng-container>
+                                    <ng-container *ngIf="!isOptionGroup(option)">
+                                        <p-multiselect-item
+                                            [id]="id + '_' + getOptionIndex(i, scrollerOptions)"
+                                            [option]="option"
+                                            [selected]="isSelected(option)"
+                                            [label]="getOptionLabel(option)"
+                                            [disabled]="isOptionDisabled(option)"
+                                            [template]="itemTemplate"
+                                            [checkIconTemplate]="checkIconTemplate"
+                                            [itemCheckboxIconTemplate]="itemCheckboxIconTemplate"
+                                            [itemSize]="scrollerOptions.itemSize"
+                                            [focused]="focusedOptionIndex() === getOptionIndex(i, scrollerOptions)"
+                                            [ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
+                                            [ariaSetSize]="ariaSetSize"
+                                            [variant]="variant"
+                                            (onClick)="onOptionSelect($event, false, getOptionIndex(i, scrollerOptions))"
+                                            (onMouseEnter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
+                                        ></p-multiselect-item>
+                                    </ng-container>
+                                </ng-template>
 
-                        <span
-                            #lastHiddenFocusableEl
-                            role="presentation"
-                            class="p-hidden-accessible p-hidden-focusable"
-                            [attr.tabindex]="0"
-                            (focus)="onLastHiddenFocus($event)"
-                            [attr.data-p-hidden-accessible]="true"
-                            [attr.data-p-hidden-focusable]="true"
-                        ></span>
+                                <li
+                                    *ngIf="hasFilter() && isEmpty()"
+                                    class="p-multiselect-empty-message"
+                                    [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                                    role="option"
+                                >
+                                    <ng-container *ngIf="!emptyFilterTemplate && !emptyTemplate; else emptyFilter">
+                                        {{ emptyFilterMessageLabel }}
+                                    </ng-container>
+                                    <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || emptyTemplate"></ng-container>
+                                </li>
+                                <li
+                                    *ngIf="!hasFilter() && isEmpty()"
+                                    class="p-multiselect-empty-message"
+                                    [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                                    role="option"
+                                >
+                                    <ng-container *ngIf="!emptyTemplate; else empty">
+                                        {{ emptyMessageLabel }}
+                                    </ng-container>
+                                    <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
+                                </li>
+                            </ul>
+                        </ng-template>
                     </div>
-                </ng-template>
-            </p-overlay>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => i6.Overlay), selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i0.forwardRef(() => i2.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i7.Tooltip), selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i0.forwardRef(() => i8.Scroller), selector: "p-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i0.forwardRef(() => i9.AutoFocus), selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i0.forwardRef(() => SearchIcon), selector: "SearchIcon" }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronDownIcon), selector: "ChevronDownIcon" }, { kind: "component", type: i0.forwardRef(() => i10.IconField), selector: "p-iconfield, p-iconField", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: i0.forwardRef(() => i11.InputIcon), selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "directive", type: i0.forwardRef(() => i12.InputText), selector: "[pInputText]", inputs: ["variant", "fluid"] }, { kind: "component", type: i0.forwardRef(() => i13.Chip), selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: i0.forwardRef(() => i4.Checkbox), selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i0.forwardRef(() => i5.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i5.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => MultiSelectItem), selector: "p-multiSelectItem", inputs: ["id", "option", "selected", "label", "disabled", "itemSize", "focused", "ariaPosInset", "ariaSetSize", "variant", "template", "checkIconTemplate", "itemCheckboxIconTemplate"], outputs: ["onClick", "onMouseEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+                    <div *ngIf="footerFacet || footerTemplate">
+                        <ng-content select="p-footer"></ng-content>
+                        <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+                    </div>
+
+                    <span
+                        #lastHiddenFocusableEl
+                        role="presentation"
+                        class="p-hidden-accessible p-hidden-focusable"
+                        [attr.tabindex]="0"
+                        (focus)="onLastHiddenFocus($event)"
+                        [attr.data-p-hidden-accessible]="true"
+                        [attr.data-p-hidden-focusable]="true"
+                    ></span>
+                </div>
+            </ng-template>
+        </p-overlay>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => i6.Overlay), selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i0.forwardRef(() => i2.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i7.Tooltip), selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i0.forwardRef(() => i8.Scroller), selector: "p-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i0.forwardRef(() => i9.AutoFocus), selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i0.forwardRef(() => CheckIcon), selector: "CheckIcon" }, { kind: "component", type: i0.forwardRef(() => SearchIcon), selector: "SearchIcon" }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronDownIcon), selector: "ChevronDownIcon" }, { kind: "component", type: i0.forwardRef(() => i10.IconField), selector: "p-iconfield, p-iconField", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: i0.forwardRef(() => i11.InputIcon), selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "directive", type: i0.forwardRef(() => i12.InputText), selector: "[pInputText]", inputs: ["variant", "fluid", "size"] }, { kind: "component", type: i0.forwardRef(() => i13.Chip), selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: i0.forwardRef(() => i4.Checkbox), selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i0.forwardRef(() => i5.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i5.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => MultiSelectItem), selector: "p-multiSelectItem, p-multiselect-item", inputs: ["id", "option", "selected", "label", "disabled", "itemSize", "focused", "ariaPosInset", "ariaSetSize", "variant", "template", "checkIconTemplate", "itemCheckboxIconTemplate"], outputs: ["onClick", "onMouseEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: MultiSelect, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-multiSelect',
+                    selector: 'p-multiSelect, p-multiselect',
                     template: `
-        <div #container [attr.id]="id" [ngClass]="rootClass" [ngStyle]="style" [class]="styleClass" (click)="onContainerClick($event)">
-            <div class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
-                <input
-                    #focusInput
-                    [pTooltip]="tooltip"
-                    [tooltipPosition]="tooltipPosition"
-                    [positionStyle]="tooltipPositionStyle"
-                    [tooltipStyleClass]="tooltipStyleClass"
-                    [attr.aria-disabled]="disabled"
-                    [attr.id]="inputId"
-                    role="combobox"
-                    [attr.aria-label]="ariaLabel"
-                    [attr.aria-labelledby]="ariaLabelledBy"
-                    [attr.aria-haspopup]="'listbox'"
-                    [attr.aria-expanded]="overlayVisible ?? false"
-                    [attr.aria-controls]="overlayVisible ? id + '_list' : null"
-                    [attr.tabindex]="!disabled ? tabindex : -1"
-                    [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
-                    (focus)="onInputFocus($event)"
-                    (blur)="onInputBlur($event)"
-                    (keydown)="onKeyDown($event)"
-                    pAutoFocus
-                    [autofocus]="autofocus"
-                />
-            </div>
-            <div
-                class="p-multiselect-label-container"
+        <div class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
+            <input
+                #focusInput
                 [pTooltip]="tooltip"
-                (mouseleave)="labelContainerMouseLeave()"
-                [tooltipDisabled]="_disableTooltip"
                 [tooltipPosition]="tooltipPosition"
                 [positionStyle]="tooltipPositionStyle"
                 [tooltipStyleClass]="tooltipStyleClass"
-            >
-                <div [ngClass]="labelClass">
-                    <ng-container *ngIf="!selectedItemsTemplate">
-                        <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"
-                                >
-                                    <ng-container *ngIf="chipIconTemplate || removeTokenIconTemplate">
-                                        <ng-template pTemplate="removeicon">
-                                            <ng-container *ngIf="!disabled">
-                                                <span
-                                                    class="p-multiselect-chip-icon"
-                                                    *ngIf="chipIconTemplate || removeTokenIconTemplate"
-                                                    (click)="removeOption(item, event)"
-                                                    [attr.data-pc-section]="'clearicon'"
-                                                    [attr.aria-hidden]="true"
-                                                >
-                                                    <ng-container
-                                                        *ngTemplateOutlet="
-                                                            chipIconTemplate || removeTokenIconTemplate;
-                                                            context: { class: 'p-multiselect-chip-icon' }
-                                                        "
-                                                    ></ng-container>
-                                                </span>
-                                            </ng-container>
-                                        </ng-template>
-                                    </ng-container>
-                                </p-chip>
-                            </div>
-                            <ng-container *ngIf="!modelValue() || modelValue().length === 0">{{
-                                placeholder() || defaultLabel || 'empty'
-                            }}</ng-container>
-                        </ng-container>
+                [attr.aria-disabled]="disabled"
+                [attr.id]="inputId"
+                role="combobox"
+                [attr.aria-label]="ariaLabel"
+                [attr.aria-labelledby]="ariaLabelledBy"
+                [attr.aria-haspopup]="'listbox'"
+                [attr.aria-expanded]="overlayVisible ?? false"
+                [attr.aria-controls]="overlayVisible ? id + '_list' : null"
+                [attr.tabindex]="!disabled ? tabindex : -1"
+                [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
+                (focus)="onInputFocus($event)"
+                (blur)="onInputBlur($event)"
+                (keydown)="onKeyDown($event)"
+                pAutoFocus
+                [autofocus]="autofocus"
+            />
+        </div>
+        <div
+            class="p-multiselect-label-container"
+            [pTooltip]="tooltip"
+            (mouseleave)="labelContainerMouseLeave()"
+            [tooltipDisabled]="_disableTooltip"
+            [tooltipPosition]="tooltipPosition"
+            [positionStyle]="tooltipPositionStyle"
+            [tooltipStyleClass]="tooltipStyleClass"
+        >
+            <div [ngClass]="labelClass">
+                <ng-container *ngIf="!selectedItemsTemplate">
+                    <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"
+                            >
+                                <ng-container *ngIf="chipIconTemplate || removeTokenIconTemplate">
+                                    <ng-template pTemplate="removeicon">
+                                        <ng-container *ngIf="!disabled">
+                                            <span
+                                                class="p-multiselect-chip-icon"
+                                                *ngIf="chipIconTemplate || removeTokenIconTemplate"
+                                                (click)="removeOption(item, event)"
+                                                [attr.data-pc-section]="'clearicon'"
+                                                [attr.aria-hidden]="true"
+                                            >
+                                                <ng-container
+                                                    *ngTemplateOutlet="
+                                                        chipIconTemplate || removeTokenIconTemplate;
+                                                        context: { class: 'p-multiselect-chip-icon' }
+                                                    "
+                                                ></ng-container>
+                                            </span>
+                                        </ng-container>
+                                    </ng-template>
+                                </ng-container>
+                            </p-chip>
+                        </div>
+                        <ng-container *ngIf="!modelValue() || modelValue().length === 0">{{
+                            placeholder() || defaultLabel || 'empty'
+                        }}</ng-container>
                     </ng-container>
-                    <ng-container
-                        *ngTemplateOutlet="
-                            selectedItemsTemplate;
-                            context: { $implicit: selectedOptions, removeChip: removeOption.bind(this) }
-                        "
-                    ></ng-container>
-                </div>
+                </ng-container>
+                <ng-container
+                    *ngTemplateOutlet="selectedItemsTemplate; context: { $implicit: selectedOptions, removeChip: removeOption.bind(this) }"
+                ></ng-container>
             </div>
-            <ng-container *ngIf="isVisibleClearIcon">
-                <TimesIcon
-                    *ngIf="!clearIconTemplate"
-                    class="p-multiselect-clear-icon"
-                    (click)="clear($event)"
-                    [attr.data-pc-section]="'clearicon'"
-                    [attr.aria-hidden]="true"
-                />
-                <span
-                    *ngIf="clearIconTemplate"
-                    class="p-multiselect-clear-icon"
-                    (click)="clear($event)"
-                    [attr.data-pc-section]="'clearicon'"
-                    [attr.aria-hidden]="true"
-                >
-                    <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
-                </span>
-            </ng-container>
-            <div class="p-multiselect-dropdown">
-                <ng-container *ngIf="loading; else elseBlock">
-                    <ng-container *ngIf="loadingIconTemplate">
-                        <ng-container *ngTemplateOutlet="loadingIconTemplate"></ng-container>
-                    </ng-container>
-                    <ng-container *ngIf="!loadingIconTemplate">
-                        <span *ngIf="loadingIcon" [ngClass]="'p-multiselect-loading-icon pi-spin ' + loadingIcon" aria-hidden="true"></span>
-                        <span *ngIf="!loadingIcon" [class]="'p-multiselect-loading-icon pi pi-spinner pi-spin'" aria-hidden="true"></span>
-                    </ng-container>
+        </div>
+        <ng-container *ngIf="isVisibleClearIcon">
+            <TimesIcon
+                *ngIf="!clearIconTemplate"
+                class="p-multiselect-clear-icon"
+                (click)="clear($event)"
+                [attr.data-pc-section]="'clearicon'"
+                [attr.aria-hidden]="true"
+            />
+            <span
+                *ngIf="clearIconTemplate"
+                class="p-multiselect-clear-icon"
+                (click)="clear($event)"
+                [attr.data-pc-section]="'clearicon'"
+                [attr.aria-hidden]="true"
+            >
+                <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
+            </span>
+        </ng-container>
+        <div class="p-multiselect-dropdown">
+            <ng-container *ngIf="loading; else elseBlock">
+                <ng-container *ngIf="loadingIconTemplate">
+                    <ng-container *ngTemplateOutlet="loadingIconTemplate"></ng-container>
                 </ng-container>
-                <ng-template #elseBlock>
-                    <ng-container *ngIf="!dropdownIconTemplate">
-                        <span
-                            *ngIf="dropdownIcon"
-                            class="p-multiselect-dropdown-icon"
-                            [ngClass]="dropdownIcon"
-                            [attr.data-pc-section]="'triggericon'"
-                            [attr.aria-hidden]="true"
-                        ></span>
-                        <ChevronDownIcon
-                            *ngIf="!dropdownIcon"
-                            [styleClass]="'p-multiselect-dropdown-icon'"
-                            [attr.data-pc-section]="'triggericon'"
-                            [attr.aria-hidden]="true"
-                        />
-                    </ng-container>
+                <ng-container *ngIf="!loadingIconTemplate">
+                    <span *ngIf="loadingIcon" [ngClass]="'p-multiselect-loading-icon pi-spin ' + loadingIcon" aria-hidden="true"></span>
+                    <span *ngIf="!loadingIcon" [class]="'p-multiselect-loading-icon pi pi-spinner pi-spin'" aria-hidden="true"></span>
+                </ng-container>
+            </ng-container>
+            <ng-template #elseBlock>
+                <ng-container *ngIf="!dropdownIconTemplate">
                     <span
-                        *ngIf="dropdownIconTemplate"
+                        *ngIf="dropdownIcon"
                         class="p-multiselect-dropdown-icon"
+                        [ngClass]="dropdownIcon"
                         [attr.data-pc-section]="'triggericon'"
                         [attr.aria-hidden]="true"
+                    ></span>
+                    <ChevronDownIcon
+                        *ngIf="!dropdownIcon"
+                        [styleClass]="'p-multiselect-dropdown-icon'"
+                        [attr.data-pc-section]="'triggericon'"
+                        [attr.aria-hidden]="true"
+                    />
+                </ng-container>
+                <span
+                    *ngIf="dropdownIconTemplate"
+                    class="p-multiselect-dropdown-icon"
+                    [attr.data-pc-section]="'triggericon'"
+                    [attr.aria-hidden]="true"
+                >
+                    <ng-template *ngTemplateOutlet="dropdownIconTemplate"></ng-template>
+                </span>
+            </ng-template>
+        </div>
+        <p-overlay
+            #overlay
+            [(visible)]="overlayVisible"
+            [options]="overlayOptions"
+            [target]="'@parent'"
+            [appendTo]="appendTo"
+            [autoZIndex]="autoZIndex"
+            [baseZIndex]="baseZIndex"
+            [showTransitionOptions]="showTransitionOptions"
+            [hideTransitionOptions]="hideTransitionOptions"
+            (onAnimationStart)="onOverlayAnimationStart($event)"
+            (onHide)="hide()"
+        >
+            <ng-template pTemplate="content">
+                <div
+                    [attr.id]="id + '_list'"
+                    [ngClass]="'p-multiselect-overlay p-component'"
+                    [ngStyle]="panelStyle"
+                    [class]="panelStyleClass"
+                >
+                    <span
+                        #firstHiddenFocusableEl
+                        role="presentation"
+                        class="p-hidden-accessible p-hidden-focusable"
+                        [attr.tabindex]="0"
+                        (focus)="onFirstHiddenFocus($event)"
+                        [attr.data-p-hidden-accessible]="true"
+                        [attr.data-p-hidden-focusable]="true"
                     >
-                        <ng-template *ngTemplateOutlet="dropdownIconTemplate"></ng-template>
                     </span>
-                </ng-template>
-            </div>
-            <p-overlay
-                #overlay
-                [(visible)]="overlayVisible"
-                [options]="overlayOptions"
-                [target]="'@parent'"
-                [appendTo]="appendTo"
-                [autoZIndex]="autoZIndex"
-                [baseZIndex]="baseZIndex"
-                [showTransitionOptions]="showTransitionOptions"
-                [hideTransitionOptions]="hideTransitionOptions"
-                (onAnimationStart)="onOverlayAnimationStart($event)"
-                (onHide)="hide()"
-            >
-                <ng-template pTemplate="content">
-                    <div
-                        [attr.id]="id + '_list'"
-                        [ngClass]="'p-multiselect-overlay p-component'"
-                        [ngStyle]="panelStyle"
-                        [class]="panelStyleClass"
-                    >
-                        <span
-                            #firstHiddenFocusableEl
-                            role="presentation"
-                            class="p-hidden-accessible p-hidden-focusable"
-                            [attr.tabindex]="0"
-                            (focus)="onFirstHiddenFocus($event)"
-                            [attr.data-p-hidden-accessible]="true"
-                            [attr.data-p-hidden-focusable]="true"
-                        >
-                        </span>
-                        <div class="p-multiselect-header" *ngIf="showHeader">
-                            <ng-content select="p-header"></ng-content>
-                            <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
-                            <ng-container *ngIf="filterTemplate; else builtInFilterElement">
-                                <ng-container *ngTemplateOutlet="filterTemplate; context: { options: filterOptions }"></ng-container>
-                            </ng-container>
-                            <ng-template #builtInFilterElement>
-                                <p-checkbox
-                                    [ngModel]="allSelected()"
-                                    [binary]="true"
-                                    (onChange)="onToggleAll($event)"
-                                    *ngIf="showToggleAll && !selectionLimit"
-                                    [variant]="variant"
-                                    [disabled]="disabled || toggleAllDisabled"
-                                >
-                                    <ng-container *ngIf="allSelected() || partialSelected()">
-                                        <ng-template pTemplate="icon" let-class="class">
-                                            <span *ngIf="headerCheckboxIconTemplate">
-                                                <ng-template
-                                                    *ngTemplateOutlet="
-                                                        headerCheckboxIconTemplate;
-                                                        context: {
-                                                            checked: allSelected(),
-                                                            partialSelected: partialSelected(),
-                                                            class: class,
-                                                        }
-                                                    "
-                                                ></ng-template>
-                                            </span>
-                                        </ng-template>
-                                    </ng-container>
-                                </p-checkbox>
-
-                                <div class="p-multiselect-filter-container" *ngIf="filter">
-                                    <p-iconField>
-                                        <input
-                                            #filterInput
-                                            pInputText
-                                            [variant]="variant"
-                                            type="text"
-                                            role="searchbox"
-                                            [attr.autocomplete]="autocomplete"
-                                            [attr.placeholder]="filterPlaceHolder"
-                                            role="searchbox"
-                                            [attr.aria-owns]="id + '_list'"
-                                            [attr.aria-activedescendant]="focusedOptionId"
-                                            [value]="_filterValue() || ''"
-                                            (input)="onFilterInputChange($event)"
-                                            (keydown)="onFilterKeyDown($event)"
-                                            (click)="onInputClick($event)"
-                                            (blur)="onFilterBlur($event)"
-                                            class="p-multiselect-filter"
-                                            [disabled]="disabled"
-                                            [attr.placeholder]="filterPlaceHolder"
-                                            [attr.aria-label]="ariaFilterLabel"
-                                        />
-                                        <p-inputIcon>
-                                            <SearchIcon [styleClass]="'p-multiselect-filter-icon'" *ngIf="!filterIconTemplate" />
-                                            <span *ngIf="filterIconTemplate" class="p-multiselect-filter-icon">
-                                                <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
-                                            </span>
-                                        </p-inputIcon>
-                                    </p-iconField>
-                                </div>
-                            </ng-template>
-                        </div>
-                        <div class="p-multiselect-list-container" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
-                            <p-scroller
-                                *ngIf="virtualScroll"
-                                #scroller
-                                [items]="visibleOptions()"
-                                [style]="{ height: scrollHeight }"
-                                [itemSize]="virtualScrollItemSize || _itemSize"
-                                [autoSize]="true"
-                                [tabindex]="-1"
-                                [lazy]="lazy"
-                                (onLazyLoad)="onLazyLoad.emit($event)"
-                                [options]="virtualScrollOptions"
+                    <div class="p-multiselect-header" *ngIf="showHeader">
+                        <ng-content select="p-header"></ng-content>
+                        <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+                        <ng-container *ngIf="filterTemplate; else builtInFilterElement">
+                            <ng-container *ngTemplateOutlet="filterTemplate; context: { options: filterOptions }"></ng-container>
+                        </ng-container>
+                        <ng-template #builtInFilterElement>
+                            <p-checkbox
+                                [ngModel]="allSelected()"
+                                [binary]="true"
+                                (onChange)="onToggleAll($event)"
+                                *ngIf="showToggleAll && !selectionLimit"
+                                [variant]="variant"
+                                [disabled]="disabled || toggleAllDisabled"
                             >
-                                <ng-template pTemplate="content" let-items let-scrollerOptions="options">
-                                    <ng-container
-                                        *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"
-                                    ></ng-container>
+                                <ng-template pTemplate="icon" let-class="class">
+                                    <CheckIcon
+                                        *ngIf="!headerCheckboxIconTemplate && allSelected()"
+                                        [styleClass]="class"
+                                        [attr.data-pc-section]="'icon'"
+                                    />
+                                    <ng-template
+                                        *ngTemplateOutlet="
+                                            headerCheckboxIconTemplate;
+                                            context: {
+                                                checked: allSelected(),
+                                                partialSelected: partialSelected(),
+                                                class: class,
+                                            }
+                                        "
+                                    ></ng-template>
                                 </ng-template>
-                                <ng-container *ngIf="loaderTemplate">
-                                    <ng-template pTemplate="loader" let-scrollerOptions="options">
-                                        <ng-container
-                                            *ngTemplateOutlet="loaderTemplate; context: { options: scrollerOptions }"
-                                        ></ng-container>
-                                    </ng-template>
-                                </ng-container>
-                            </p-scroller>
-                            <ng-container *ngIf="!virtualScroll">
+                            </p-checkbox>
+
+                            <div class="p-multiselect-filter-container" *ngIf="filter">
+                                <p-iconfield>
+                                    <input
+                                        #filterInput
+                                        pInputText
+                                        [variant]="variant"
+                                        type="text"
+                                        role="searchbox"
+                                        [attr.autocomplete]="autocomplete"
+                                        [attr.placeholder]="filterPlaceHolder"
+                                        role="searchbox"
+                                        [attr.aria-owns]="id + '_list'"
+                                        [attr.aria-activedescendant]="focusedOptionId"
+                                        [value]="_filterValue() || ''"
+                                        (input)="onFilterInputChange($event)"
+                                        (keydown)="onFilterKeyDown($event)"
+                                        (click)="onInputClick($event)"
+                                        (blur)="onFilterBlur($event)"
+                                        class="p-multiselect-filter"
+                                        [disabled]="disabled"
+                                        [attr.placeholder]="filterPlaceHolder"
+                                        [attr.aria-label]="ariaFilterLabel"
+                                    />
+                                    <p-inputicon>
+                                        <SearchIcon [styleClass]="'p-multiselect-filter-icon'" *ngIf="!filterIconTemplate" />
+                                        <span *ngIf="filterIconTemplate" class="p-multiselect-filter-icon">
+                                            <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
+                                        </span>
+                                    </p-inputicon>
+                                </p-iconfield>
+                            </div>
+                        </ng-template>
+                    </div>
+                    <div class="p-multiselect-list-container" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
+                        <p-scroller
+                            *ngIf="virtualScroll"
+                            #scroller
+                            [items]="visibleOptions()"
+                            [style]="{ height: scrollHeight }"
+                            [itemSize]="virtualScrollItemSize || _itemSize"
+                            [autoSize]="true"
+                            [tabindex]="-1"
+                            [lazy]="lazy"
+                            (onLazyLoad)="onLazyLoad.emit($event)"
+                            [options]="virtualScrollOptions"
+                        >
+                            <ng-template pTemplate="content" let-items let-scrollerOptions="options">
                                 <ng-container
-                                    *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"
+                                    *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"
                                 ></ng-container>
+                            </ng-template>
+                            <ng-container *ngIf="loaderTemplate">
+                                <ng-template pTemplate="loader" let-scrollerOptions="options">
+                                    <ng-container *ngTemplateOutlet="loaderTemplate; context: { options: scrollerOptions }"></ng-container>
+                                </ng-template>
                             </ng-container>
+                        </p-scroller>
+                        <ng-container *ngIf="!virtualScroll">
+                            <ng-container
+                                *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"
+                            ></ng-container>
+                        </ng-container>
 
-                            <ng-template #buildInItems let-items let-scrollerOptions="options">
-                                <ul
-                                    #items
-                                    class="p-multiselect-list"
-                                    [ngClass]="scrollerOptions.contentStyleClass"
-                                    [style]="scrollerOptions.contentStyle"
-                                    role="listbox"
-                                    aria-multiselectable="true"
-                                    [attr.aria-label]="listLabel"
-                                >
-                                    <ng-template ngFor let-option [ngForOf]="items" let-i="index">
-                                        <ng-container *ngIf="isOptionGroup(option)">
-                                            <li
-                                                [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
-                                                class="p-multiselect-option-group"
-                                                [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                                role="option"
-                                            >
-                                                <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
-                                                <ng-container
-                                                    *ngTemplateOutlet="groupTemplate; context: { $implicit: option.optionGroup }"
-                                                ></ng-container>
-                                            </li>
-                                        </ng-container>
-                                        <ng-container *ngIf="!isOptionGroup(option)">
-                                            <p-multiSelectItem
-                                                [id]="id + '_' + getOptionIndex(i, scrollerOptions)"
-                                                [option]="option"
-                                                [selected]="isSelected(option)"
-                                                [label]="getOptionLabel(option)"
-                                                [disabled]="isOptionDisabled(option)"
-                                                [template]="itemTemplate"
-                                                [checkIconTemplate]="checkIconTemplate"
-                                                [itemCheckboxIconTemplate]="itemCheckboxIconTemplate"
-                                                [itemSize]="scrollerOptions.itemSize"
-                                                [focused]="focusedOptionIndex() === getOptionIndex(i, scrollerOptions)"
-                                                [ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
-                                                [ariaSetSize]="ariaSetSize"
-                                                [variant]="variant"
-                                                (onClick)="onOptionSelect($event, false, getOptionIndex(i, scrollerOptions))"
-                                                (onMouseEnter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
-                                            ></p-multiSelectItem>
-                                        </ng-container>
-                                    </ng-template>
-
-                                    <li
-                                        *ngIf="hasFilter() && isEmpty()"
-                                        class="p-multiselect-empty-message"
-                                        [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                        role="option"
-                                    >
-                                        <ng-container *ngIf="!emptyFilterTemplate && !emptyTemplate; else emptyFilter">
-                                            {{ emptyFilterMessageLabel }}
-                                        </ng-container>
-                                        <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || emptyTemplate"></ng-container>
-                                    </li>
-                                    <li
-                                        *ngIf="!hasFilter() && isEmpty()"
-                                        class="p-multiselect-empty-message"
-                                        [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                        role="option"
-                                    >
-                                        <ng-container *ngIf="!emptyTemplate; else empty">
-                                            {{ emptyMessageLabel }}
-                                        </ng-container>
-                                        <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
-                                    </li>
-                                </ul>
-                            </ng-template>
-                        </div>
-                        <div *ngIf="footerFacet || footerTemplate">
-                            <ng-content select="p-footer"></ng-content>
-                            <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
-                        </div>
+                        <ng-template #buildInItems let-items let-scrollerOptions="options">
+                            <ul
+                                #items
+                                class="p-multiselect-list"
+                                [ngClass]="scrollerOptions.contentStyleClass"
+                                [style]="scrollerOptions.contentStyle"
+                                role="listbox"
+                                aria-multiselectable="true"
+                                [attr.aria-label]="listLabel"
+                            >
+                                <ng-template ngFor let-option [ngForOf]="items" let-i="index">
+                                    <ng-container *ngIf="isOptionGroup(option)">
+                                        <li
+                                            [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
+                                            class="p-multiselect-option-group"
+                                            [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                                            role="option"
+                                        >
+                                            <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
+                                            <ng-container
+                                                *ngTemplateOutlet="groupTemplate; context: { $implicit: option.optionGroup }"
+                                            ></ng-container>
+                                        </li>
+                                    </ng-container>
+                                    <ng-container *ngIf="!isOptionGroup(option)">
+                                        <p-multiselect-item
+                                            [id]="id + '_' + getOptionIndex(i, scrollerOptions)"
+                                            [option]="option"
+                                            [selected]="isSelected(option)"
+                                            [label]="getOptionLabel(option)"
+                                            [disabled]="isOptionDisabled(option)"
+                                            [template]="itemTemplate"
+                                            [checkIconTemplate]="checkIconTemplate"
+                                            [itemCheckboxIconTemplate]="itemCheckboxIconTemplate"
+                                            [itemSize]="scrollerOptions.itemSize"
+                                            [focused]="focusedOptionIndex() === getOptionIndex(i, scrollerOptions)"
+                                            [ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
+                                            [ariaSetSize]="ariaSetSize"
+                                            [variant]="variant"
+                                            (onClick)="onOptionSelect($event, false, getOptionIndex(i, scrollerOptions))"
+                                            (onMouseEnter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
+                                        ></p-multiselect-item>
+                                    </ng-container>
+                                </ng-template>
 
-                        <span
-                            #lastHiddenFocusableEl
-                            role="presentation"
-                            class="p-hidden-accessible p-hidden-focusable"
-                            [attr.tabindex]="0"
-                            (focus)="onLastHiddenFocus($event)"
-                            [attr.data-p-hidden-accessible]="true"
-                            [attr.data-p-hidden-focusable]="true"
-                        ></span>
+                                <li
+                                    *ngIf="hasFilter() && isEmpty()"
+                                    class="p-multiselect-empty-message"
+                                    [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                                    role="option"
+                                >
+                                    <ng-container *ngIf="!emptyFilterTemplate && !emptyTemplate; else emptyFilter">
+                                        {{ emptyFilterMessageLabel }}
+                                    </ng-container>
+                                    <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || emptyTemplate"></ng-container>
+                                </li>
+                                <li
+                                    *ngIf="!hasFilter() && isEmpty()"
+                                    class="p-multiselect-empty-message"
+                                    [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                                    role="option"
+                                >
+                                    <ng-container *ngIf="!emptyTemplate; else empty">
+                                        {{ emptyMessageLabel }}
+                                    </ng-container>
+                                    <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
+                                </li>
+                            </ul>
+                        </ng-template>
                     </div>
-                </ng-template>
-            </p-overlay>
-        </div>
+                    <div *ngIf="footerFacet || footerTemplate">
+                        <ng-content select="p-footer"></ng-content>
+                        <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+                    </div>
+
+                    <span
+                        #lastHiddenFocusableEl
+                        role="presentation"
+                        class="p-hidden-accessible p-hidden-focusable"
+                        [attr.tabindex]="0"
+                        (focus)="onLastHiddenFocus($event)"
+                        [attr.data-p-hidden-accessible]="true"
+                        [attr.data-p-hidden-focusable]="true"
+                    ></span>
+                </div>
+            </ng-template>
+        </p-overlay>
     `,
                     providers: [MULTISELECT_VALUE_ACCESSOR, MultiSelectStyle],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[attr.id]': 'id',
+                        '[style]': 'style',
+                        '(click)': 'onContainerClick($event)',
+                    },
                 }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i2.FilterService }, { type: i2.PrimeNGConfig }, { type: i2.OverlayService }], propDecorators: { id: [{
                 type: Input
@@ -2922,9 +3012,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 type: Output
             }], onSelectAllChange: [{
                 type: Output
-            }], containerViewChild: [{
-                type: ViewChild,
-                args: ['container']
             }], overlayViewChild: [{
                 type: ViewChild,
                 args: ['overlay']
@@ -2958,6 +3045,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 class MultiSelectModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3036,5 +3126,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MULTISELECT_VALUE_ACCESSOR, MultiSelect, MultiSelectItem, MultiSelectModule };
+export { MULTISELECT_VALUE_ACCESSOR, MultiSelect, MultiSelectClasses, MultiSelectItem, MultiSelectModule, MultiSelectStyle };
 //# sourceMappingURL=primeng-multiselect.mjs.map