primeng 19.1.3 → 20.0.0-beta.1

package/fesm2022/primeng-multiselect.mjs

@@ -1,17 +1,19 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, EventEmitter, booleanAttribute, numberAttribute, Output, Input, ViewEncapsulation, Component, inject, signal, computed, effect, HostBinding, ContentChildren, ContentChild, ViewChild, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, numberAttribute, Output, Input, ViewEncapsulation, Component, input, signal, computed, effect, ContentChildren, ContentChild, ViewChild, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { deepEquals, isNotEmpty, isArray, uuid, equals, focus, findLastIndex, resolveFieldData, isPrintableCharacter, getFirstFocusableElement, getLastFocusableElement, findSingle, unblockBodyScroll, hasClass, isHidden, getFocusableElements } from '@primeuix/utils';
+import { deepEquals, isNotEmpty, isArray, uuid, equals, focus, findLastIndex, resolveFieldData, isPrintableCharacter, getFirstFocusableElement, getLastFocusableElement, findSingle, getFocusableElements } from '@primeuix/utils';
 import * as i3 from 'primeng/api';
 import { SharedModule, TranslationKeys, Footer, Header, PrimeTemplate } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
 import { BaseComponent } from 'primeng/basecomponent';
+import { BaseEditableHolder } from 'primeng/baseeditableholder';
 import { Checkbox } from 'primeng/checkbox';
 import { Chip } from 'primeng/chip';
-import { DomHandler } from 'primeng/dom';
+import { DomHandler, unblockBodyScroll } from 'primeng/dom';
+import { Fluid } from 'primeng/fluid';
 import { IconField } from 'primeng/iconfield';
 import { CheckIcon, SearchIcon, TimesIcon, ChevronDownIcon } from 'primeng/icons';
 import { InputIcon } from 'primeng/inputicon';
@@ -21,257 +23,44 @@ import { Ripple } from 'primeng/ripple';
 import { Scroller } from 'primeng/scroller';
 import { Tooltip } from 'primeng/tooltip';
 import { ObjectUtils } from 'primeng/utils';
+import { css, dt } from '@primeuix/styled';
+import { style } from '@primeuix/styles/multiselect';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-multiselect {
-    display: inline-flex;
-    cursor: pointer;
-    position: relative;
-    user-select: none;
-    background: ${dt('multiselect.background')};
-    border: 1px solid ${dt('multiselect.border.color')};
-    transition: background ${dt('multiselect.transition.duration')}, color ${dt('multiselect.transition.duration')}, border-color ${dt('multiselect.transition.duration')}, outline-color ${dt('multiselect.transition.duration')}, box-shadow ${dt('multiselect.transition.duration')};
-    border-radius: ${dt('multiselect.border.radius')};
-    outline-color: transparent;
-    box-shadow: ${dt('multiselect.shadow')};
-}
-
-.p-multiselect.ng-invalid.ng-dirty {
-    border-color: ${dt('multiselect.invalid.border.color')};
-}
-
-.p-multiselect:not(.p-disabled):hover {
-    border-color: ${dt('multiselect.hover.border.color')};
-}
-
-.p-multiselect:not(.p-disabled).p-focus {
-    border-color: ${dt('multiselect.focus.border.color')};
-    box-shadow: ${dt('multiselect.focus.ring.shadow')};
-    outline: ${dt('multiselect.focus.ring.width')} ${dt('multiselect.focus.ring.style')} ${dt('multiselect.focus.ring.color')};
-    outline-offset: ${dt('multiselect.focus.ring.offset')};
-}
-
-.p-multiselect.p-variant-filled {
-    background: ${dt('multiselect.filled.background')};
-}
-
-.p-multiselect.p-variant-filled:not(.p-disabled):hover {
-    background: ${dt('multiselect.filled.hover.background')};
-}
-
-.p-multiselect.p-variant-filled.p-focus {
-    background: ${dt('multiselect.filled.focus.background')};
-}
-
-.p-multiselect.p-disabled {
-    opacity: 1;
-    background: ${dt('multiselect.disabled.background')};
-}
-
-.p-multiselect-dropdown {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    background: transparent;
-    color: ${dt('multiselect.dropdown.color')};
-    width: ${dt('multiselect.dropdown.width')};
-    border-start-end-radius: ${dt('multiselect.border.radius')};
-    border-end-end-radius: ${dt('multiselect.border.radius')};
-}
-
-.p-multiselect-label-container {
-    overflow: hidden;
-    flex: 1 1 auto;
-    cursor: pointer;
-}
-
-.p-multiselect-label {
-    display: flex;
-    align-items-center;
-    gap: calc(${dt('multiselect.padding.y')} / 2);
-    white-space: nowrap;
-    cursor: pointer;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: ${dt('multiselect.padding.y')} ${dt('multiselect.padding.x')};
-    color: ${dt('multiselect.color')};
-}
-
-.p-multiselect-label.p-placeholder {
-    color: ${dt('multiselect.placeholder.color')};
-}
-
-p-multiSelect.ng-invalid.ng-dirty .p-multiselect-label.p-placeholder,
-p-multi-select.ng-invalid.ng-dirty .p-multiselect-label.p-placeholder,
-p-multiselect.ng-invalid.ng-dirty .p-multiselect-label.p-placeholder {
-    color: ${dt('multiselect.invalid.placeholder.color')};
-}
-
-.p-multiselect.p-disabled .p-multiselect-label {
-    color: ${dt('multiselect.disabled.color')};
-}
-
-.p-multiselect-label-empty {
-    overflow: hidden;
-    visibility: hidden;
-}
-
-.p-multiselect .p-multiselect-overlay {
-    min-width: 100%;
-}
-
-.p-multiselect-overlay {
-    background: ${dt('multiselect.overlay.background')};
-    color: ${dt('multiselect.overlay.color')};
-    border: 1px solid ${dt('multiselect.overlay.border.color')};
-    border-radius: ${dt('multiselect.overlay.border.radius')};
-    box-shadow: ${dt('multiselect.overlay.shadow')};
-}
-
-.p-multiselect-header {
-    display: flex;
-    align-items: center;
-    padding: ${dt('multiselect.list.header.padding')};
-}
-
-.p-multiselect-header .p-checkbox {
-    margin-inline-end: ${dt('multiselect.option.gap')};
-}
-
-.p-multiselect-filter-container {
-    flex: 1 1 auto;
-}
-
-.p-multiselect-filter {
-    width: 100%;
-}
-
-.p-multiselect-list-container {
-    overflow: auto;
-}
-
-.p-multiselect-list {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    padding: ${dt('multiselect.list.padding')};
-    display: flex;
-    flex-direction: column;
-    gap: ${dt('multiselect.list.gap')}
-}
-
-.p-multiselect-option {
-    cursor: pointer;
-    font-weight: normal;
-    white-space: nowrap;
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    gap: ${dt('multiselect.option.gap')};
-    padding: ${dt('multiselect.option.padding')};
-    border: 0 none;
-    color: ${dt('multiselect.option.color')};
-    background: transparent;
-    transition: background ${dt('multiselect.transition.duration')}, color ${dt('multiselect.transition.duration')}, border-color ${dt('multiselect.transition.duration')}, box-shadow ${dt('multiselect.transition.duration')}, outline-color ${dt('multiselect.transition.duration')};
-    border-radius: ${dt('multiselect.option.border.radius')}
-}
-
-.p-multiselect-option:not(.p-multiselect-option-selected):not(.p-disabled).p-focus {
-    background: ${dt('multiselect.option.focus.background')};
-    color: ${dt('multiselect.option.focus.color')};
-}
-
-.p-multiselect-option.p-multiselect-option-selected {
-    background: ${dt('multiselect.option.selected.background')};
-    color: ${dt('multiselect.option.selected.color')};
-}
-
-.p-multiselect-option.p-multiselect-option-selected.p-focus {
-    background: ${dt('multiselect.option.selected.focus.background')};
-    color: ${dt('multiselect.option.selected.focus.color')};
-}
-
-.p-multiselect-option-group {
-    cursor: auto;
-    margin: 0;
-    padding: ${dt('multiselect.option.group.padding')};
-    background: ${dt('multiselect.option.group.background')};
-    color: ${dt('multiselect.option.group.color')};
-    font-weight: ${dt('multiselect.option.group.font.weight')};
-}
-
-.p-multiselect-empty-message {
-    padding: ${dt('multiselect.empty.message.padding')};
-}
+const theme = css `
+    ${style}
 
-.p-multiselect-label .p-chip {
-    padding-top: calc(${dt('multiselect.padding.y')} / 2);
-    padding-bottom: calc(${dt('multiselect.padding.y')} / 2);
-    border-radius: ${dt('multiselect.chip.border.radius')};
-}
-
-.p-multiselect-label:has(.p-chip) {
-    padding: calc(${dt('multiselect.padding.y')} / 2) calc(${dt('multiselect.padding.x')} / 2);
-}
-
-.p-multiselect-fluid {
-    display: flex;
-}
-
-.p-multiselect-sm .p-multiselect-label {
-    font-size: ${dt('multiselect.sm.font.size')};
-    padding-block: ${dt('multiselect.sm.padding.y')};
-    padding-inline: ${dt('multiselect.sm.padding.x')};
-}
-
-.p-multiselect-sm .p-multiselect-dropdown .p-icon {
-    font-size: ${dt('multiselect.sm.font.size')};
-    width: ${dt('multiselect.sm.font.size')};
-    height: ${dt('multiselect.sm.font.size')};
-}
-
-.p-multiselect-lg .p-multiselect-label {
-    font-size: ${dt('multiselect.lg.font.size')};
-    padding-block: ${dt('multiselect.lg.padding.y')};
-    padding-inline: ${dt('multiselect.lg.padding.x')};
-}
-
-.p-multiselect-lg .p-multiselect-dropdown .p-icon {
-    font-size: ${dt('multiselect.lg.font.size')};
-    width: ${dt('multiselect.lg.font.size')};
-    height: ${dt('multiselect.lg.font.size')};
-}
-
-.p-multiselect-clear-icon {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    background: transparent;
-    color: ${dt('multiselect.clear.icon.color')};
-}`;
+    /* For PrimeNG */
+   .p-multiselect.ng-invalid.ng-dirty {
+        border-color: ${dt('multiselect.invalid.border.color')};
+    }
+    p-multiSelect.ng-invalid.ng-dirty .p-multiselect-label.p-placeholder,
+    p-multi-select.ng-invalid.ng-dirty .p-multiselect-label.p-placeholder,
+    p-multiselect.ng-invalid.ng-dirty .p-multiselect-label.p-placeholder {
+        color: ${dt('multiselect.invalid.placeholder.color')};
+    }
+`;
 const inlineStyles = {
-    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
+    root: ({ instance }) => ({ position: instance.$appendTo() === 'self' ? 'relative' : undefined })
 };
 const classes = {
-    root: ({ instance }) => ({
-        'p-multiselect p-component p-inputwrapper': true,
-        'p-multiselect-display-chip': instance.display === 'chip',
-        'p-disabled': instance.disabled,
-        'p-invalid': instance.invalid,
-        'p-variant-filled': instance.variant ? instance.variant === 'filled' : instance.config.inputStyle === 'filled',
-        'p-focus': instance.focused,
-        'p-inputwrapper-filled': instance.filled,
-        'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
-        'p-multiselect-open': instance.overlayVisible,
-        'p-multiselect-fluid': instance.hasFluid,
-        'p-multiselect-sm p-inputfield-sm': instance.size === 'small',
-        'p-multiselect-lg p-inputfield-lg': instance.size === 'large'
-    }),
+    root: ({ instance }) => [
+        'p-multiselect p-component p-inputwrapper',
+        {
+            'p-multiselect p-component p-inputwrapper': true,
+            'p-multiselect-display-chip': instance.display === 'chip',
+            'p-disabled': instance.disabled(),
+            'p-invalid': instance.invalid(),
+            'p-variant-filled': instance.$variant(),
+            'p-focus': instance.focused,
+            'p-inputwrapper-filled': instance.$filled(),
+            'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
+            'p-multiselect-open': instance.overlayVisible,
+            'p-multiselect-fluid': instance.hasFluid,
+            'p-multiselect-sm p-inputfield-sm': instance.size() === 'small',
+            'p-multiselect-lg p-inputfield-lg': instance.size() === 'large'
+        }
+    ],
     labelContainer: 'p-multiselect-label-container',
     label: ({ instance }) => ({
         'p-multiselect-label': true,
@@ -291,23 +80,24 @@ const classes = {
     listContainer: 'p-multiselect-list-container',
     list: 'p-multiselect-list',
     optionGroup: 'p-multiselect-option-group',
-    option: ({ instance, option, index, getItemOptions }) => ({
+    option: ({ instance }) => ({
         'p-multiselect-option': true,
-        'p-multiselect-option-selected': instance.isSelected(option) && instance.highlightOnSelect,
-        'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(index, getItemOptions),
-        'p-disabled': instance.isOptionDisabled(option)
+        'p-multiselect-option-selected': instance.selected && instance.highlightOnSelect,
+        'p-disabled': instance.disabled,
+        'p-focus': instance.focused
     }),
-    emptyMessage: 'p-multiselect-empty-message'
+    emptyMessage: 'p-multiselect-empty-message',
+    clearIcon: 'p-multiselect-clear-icon'
 };
 class MultiSelectStyle extends BaseStyle {
     name = 'multiselect';
     theme = theme;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MultiSelectStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MultiSelectStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MultiSelectStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MultiSelectStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MultiSelectStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MultiSelectStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -393,6 +183,10 @@ var MultiSelectClasses;
      * Class name of the empty message element
      */
     MultiSelectClasses["emptyMessage"] = "p-multiselect-empty-message";
+    /**
+     * Class name of the clear icon
+     */
+    MultiSelectClasses["clearIcon"] = "p-autocomplete-clear-icon";
 })(MultiSelectClasses || (MultiSelectClasses = {}));
 
 const MULTISELECT_VALUE_ACCESSOR = {
@@ -417,6 +211,7 @@ class MultiSelectItem extends BaseComponent {
     highlightOnSelect;
     onClick = new EventEmitter();
     onMouseEnter = new EventEmitter();
+    _componentStyle = inject(MultiSelectStyle);
     onOptionClick(event) {
         this.onClick.emit({
             originalEvent: event,
@@ -433,18 +228,13 @@ class MultiSelectItem extends BaseComponent {
             selected: this.selected
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MultiSelectItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: MultiSelectItem, isStandalone: true, 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", highlightOnSelect: ["highlightOnSelect", "highlightOnSelect", booleanAttribute] }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MultiSelectItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: MultiSelectItem, isStandalone: true, 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", highlightOnSelect: ["highlightOnSelect", "highlightOnSelect", booleanAttribute] }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, providers: [MultiSelectStyle], usesInheritance: true, ngImport: i0, template: `
         <li
             pRipple
-            class="p-multiselect-option"
+            [class]="cx('option')"
             role="option"
             [ngStyle]="{ height: itemSize + 'px' }"
-            [ngClass]="{
-                'p-multiselect-option-selected': selected && highlightOnSelect,
-                'p-disabled': disabled,
-                'p-focus': focused
-            }"
             [id]="id"
             [attr.aria-label]="label"
             [attr.aria-setsize]="ariaSetSize"
@@ -467,9 +257,9 @@ class MultiSelectItem extends BaseComponent {
             <span *ngIf="!template">{{ label ?? 'empty' }}</span>
             <ng-container *ngTemplateOutlet="template; context: { $implicit: option }"></ng-container>
         </li>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: SharedModule }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: SharedModule }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MultiSelectItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MultiSelectItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-multiSelectItem, p-multiselect-item',
@@ -478,14 +268,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     template: `
         <li
             pRipple
-            class="p-multiselect-option"
+            [class]="cx('option')"
             role="option"
             [ngStyle]="{ height: itemSize + 'px' }"
-            [ngClass]="{
-                'p-multiselect-option-selected': selected && highlightOnSelect,
-                'p-disabled': disabled,
-                'p-focus': focused
-            }"
             [id]="id"
             [attr.aria-label]="label"
             [attr.aria-setsize]="ariaSetSize"
@@ -509,7 +294,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             <ng-container *ngTemplateOutlet="template; context: { $implicit: option }"></ng-container>
         </li>
     `,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [MultiSelectStyle]
                 }]
         }], propDecorators: { id: [{
                 type: Input
@@ -549,12 +335,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], onMouseEnter: [{
                 type: Output
             }] } });
-// @ts-ignore
 /**
  * MultiSelect is used to select multiple items from a collection.
  * @group Components
  */
-class MultiSelect extends BaseComponent {
+class MultiSelect extends BaseEditableHolder {
     zone;
     filterService;
     overlayService;
@@ -568,13 +353,9 @@ class MultiSelect extends BaseComponent {
      * @group Props
      */
     ariaLabel;
-    /**
-     * Inline style of the element.
-     * @group Props
-     */
-    style;
     /**
      * Style class of the element.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -593,16 +374,6 @@ class MultiSelect extends BaseComponent {
      * @group Props
      */
     inputId;
-    /**
-     * When present, it specifies that the element should be disabled.
-     * @group Props
-     */
-    disabled;
-    /**
-     * Spans 100% width of the container when enabled.
-     * @group Props
-     */
-    fluid;
     /**
      * When present, it specifies that the component cannot be edited.
      * @group Props
@@ -638,26 +409,11 @@ class MultiSelect extends BaseComponent {
      * @group Props
      */
     tabindex = 0;
-    /**
-     * Specifies the input variant of the component.
-     * @group Props
-     */
-    variant;
-    /**
-     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
-     * @group Props
-     */
-    appendTo;
     /**
      * A property to uniquely identify a value in options.
      * @group Props
      */
     dataKey;
-    /**
-     * Name of the input element.
-     * @group Props
-     */
-    name;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      * @group Props
@@ -845,11 +601,6 @@ class MultiSelect extends BaseComponent {
      * @group Props
      */
     autocomplete = 'off';
-    /**
-     * Defines the size of the component.
-     * @group Props
-     */
-    size;
     /**
      * When enabled, a clear icon is displayed to clear the value.
      * @group Props
@@ -860,66 +611,6 @@ class MultiSelect extends BaseComponent {
      * @group Props
      */
     autofocus;
-    /**
-     * @deprecated since v14.2.0, use overlayOptions property instead.
-     * Whether to automatically manage layering.
-     * @group Props
-     */
-    get autoZIndex() {
-        return this._autoZIndex;
-    }
-    set autoZIndex(val) {
-        this._autoZIndex = val;
-        console.log('The autoZIndex property is deprecated since v14.2.0, use overlayOptions property instead.');
-    }
-    /**
-     * @deprecated since v14.2.0, use overlayOptions property instead.
-     * Base zIndex value to use in layering.
-     * @group Props
-     */
-    get baseZIndex() {
-        return this._baseZIndex;
-    }
-    set baseZIndex(val) {
-        this._baseZIndex = val;
-        console.log('The baseZIndex property is deprecated since v14.2.0, use overlayOptions property instead.');
-    }
-    /**
-     * Transition options of the show animation.
-     * @group Props
-     * @deprecated since v14.2.0, use overlayOptions property instead.
-     */
-    get showTransitionOptions() {
-        return this._showTransitionOptions;
-    }
-    set showTransitionOptions(val) {
-        this._showTransitionOptions = val;
-        console.log('The showTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.');
-    }
-    /**
-     * Transition options of the hide animation.
-     * @group Props
-     * @deprecated since v14.2.0, use overlayOptions property instead.
-     */
-    get hideTransitionOptions() {
-        return this._hideTransitionOptions;
-    }
-    set hideTransitionOptions(val) {
-        this._hideTransitionOptions = val;
-        console.log('The hideTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.');
-    }
-    /**
-     * Label to display when there are no selections.
-     * @group Props
-     * @deprecated Use placeholder instead.
-     */
-    set defaultLabel(val) {
-        this._defaultLabel = val;
-        console.log('defaultLabel property is deprecated since 16.6.0, use placeholder instead');
-    }
-    get defaultLabel() {
-        return this._defaultLabel;
-    }
     /**
      * Label to display when there are no selections.
      * @group Props
@@ -952,18 +643,6 @@ class MultiSelect extends BaseComponent {
     set filterValue(val) {
         this._filterValue.set(val);
     }
-    /**
-     * Item size of item to be virtual scrolled.
-     * @group Props
-     * @deprecated use virtualScrollItemSize property instead.
-     */
-    get itemSize() {
-        return this._itemSize;
-    }
-    set itemSize(val) {
-        this._itemSize = val;
-        console.log('The itemSize property is deprecated, use virtualScrollItemSize property instead.');
-    }
     /**
      * Whether all data is selected.
      * @group Props
@@ -999,6 +678,30 @@ class MultiSelect extends BaseComponent {
      * @group Props
      */
     highlightOnSelect = true;
+    /**
+     * Specifies the size of the component.
+     * @defaultValue undefined
+     * @group Props
+     */
+    size = input();
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue undefined
+     * @group Props
+     */
+    variant = input();
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue undefined
+     * @group Props
+     */
+    fluid = input(undefined, { transform: booleanAttribute });
+    /**
+     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
+     * @defaultValue 'self'
+     * @group Props
+     */
+    appendTo = input(undefined);
     /**
      * Callback to invoke when value changes.
      * @param {MultiSelectChangeEvent} event - Custom change event.
@@ -1078,20 +781,12 @@ class MultiSelect extends BaseComponent {
     searchValue;
     searchTimeout;
     _selectAll = null;
-    _autoZIndex;
-    _baseZIndex;
-    _showTransitionOptions;
-    _hideTransitionOptions;
-    _defaultLabel;
     _placeholder = signal(undefined);
-    _itemSize;
-    _selectionLimit;
     _disableTooltip = false;
     value;
     _filteredOptions;
     onModelChange = () => { };
     onModelTouched = () => { };
-    valuesAsString;
     focus;
     filtered;
     itemTemplate;
@@ -1103,7 +798,6 @@ class MultiSelect extends BaseComponent {
     emptyFilterTemplate;
     emptyTemplate;
     selectedItemsTemplate;
-    checkIconTemplate;
     loadingIconTemplate;
     filterIconTemplate;
     removeTokenIconTemplate;
@@ -1122,7 +816,6 @@ class MultiSelect extends BaseComponent {
     _emptyFilterTemplate;
     _emptyTemplate;
     _selectedItemsTemplate;
-    _checkIconTemplate;
     _loadingIconTemplate;
     _filterIconTemplate;
     _removeTokenIconTemplate;
@@ -1131,6 +824,12 @@ class MultiSelect extends BaseComponent {
     _dropdownIconTemplate;
     _itemCheckboxIconTemplate;
     _headerCheckboxIconTemplate;
+    $variant = computed(() => this.variant() || this.config.inputStyle() || this.config.inputVariant());
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo());
+    pcFluid = inject(Fluid, { optional: true, host: true, skipSelf: true });
+    get hasFluid() {
+        return this.fluid() ?? !!this.pcFluid;
+    }
     ngAfterContentInit() {
         this.templates.forEach((item) => {
             switch (item.getType()) {
@@ -1162,10 +861,6 @@ class MultiSelect extends BaseComponent {
                 case 'loader':
                     this._loaderTemplate = item.template;
                     break;
-                case 'checkicon':
-                    this._checkIconTemplate = item.template;
-                    console.warn('checkicon is deprecated and will removed in future. Use itemcheckboxicon or headercheckboxicon templates instead.');
-                    break;
                 case 'headercheckboxicon':
                     this._headerCheckboxIconTemplate = item.template;
                     break;
@@ -1199,7 +894,6 @@ class MultiSelect extends BaseComponent {
     headerCheckboxFocus;
     filterOptions;
     preventModelTouched;
-    preventDocumentDefault;
     focused = false;
     itemsWrapper;
     _displaySelectedLabel = true;
@@ -1211,58 +905,21 @@ 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 });
-    }
-    get labelClass() {
-        return this._componentStyle.classes.label({ instance: this });
-    }
     get emptyMessageLabel() {
         return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
     }
     get emptyFilterMessageLabel() {
         return this.emptyFilterMessage || this.config.getTranslation(TranslationKeys.EMPTY_FILTER_MESSAGE);
     }
-    get filled() {
-        if (typeof this.modelValue() === 'string')
-            return !!this.modelValue();
-        return isNotEmpty(this.modelValue());
-    }
     get isVisibleClearIcon() {
-        return this.modelValue() != null && this.modelValue() !== '' && isNotEmpty(this.modelValue()) && this.showClear && !this.disabled && !this.readonly && this.filled;
+        return this.modelValue() != null && this.modelValue() !== '' && isNotEmpty(this.modelValue()) && this.showClear && !this.disabled() && !this.readonly && this.$filled();
     }
     get toggleAllAriaLabel() {
         return this.config.translation.aria ? this.config.translation.aria[this.allSelected() ? 'selectAll' : 'unselectAll'] : undefined;
     }
-    get closeAriaLabel() {
-        return this.config.translation.aria ? this.config.translation.aria.close : undefined;
-    }
     get listLabel() {
         return this.config.getTranslation(TranslationKeys.ARIA)['listLabel'];
     }
-    get hasFluid() {
-        const nativeElement = this.el.nativeElement;
-        const fluidComponent = nativeElement.closest('p-fluid');
-        return this.fluid || !!fluidComponent;
-    }
     getAllVisibleAndNonVisibleOptions() {
         return this.group ? this.flatOptions(this.options) : this.options || [];
     }
@@ -1313,7 +970,7 @@ class MultiSelect extends BaseComponent {
             }
         }
         else {
-            label = this.placeholder() || this.defaultLabel || '';
+            label = this.placeholder() || '';
         }
         return label;
     });
@@ -1391,7 +1048,7 @@ class MultiSelect extends BaseComponent {
     updateModel(value, event) {
         this.value = value;
         this.onModelChange(value);
-        this.modelValue.set(value);
+        this.writeValue(value);
     }
     onInputClick(event) {
         event.stopPropagation();
@@ -1400,7 +1057,7 @@ class MultiSelect extends BaseComponent {
     }
     onOptionSelect(event, isFocus = false, index = -1) {
         const { originalEvent, option } = event;
-        if (this.disabled || this.isOptionDisabled(option)) {
+        if (this.disabled() || this.isOptionDisabled(option)) {
             return;
         }
         let selected = this.isSelected(option);
@@ -1546,7 +1203,7 @@ class MultiSelect extends BaseComponent {
         return this.optionGroupChildren ? resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items;
     }
     onKeyDown(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             event.preventDefault();
             return;
         }
@@ -1730,12 +1387,6 @@ class MultiSelect extends BaseComponent {
         event.stopPropagation();
         event.preventDefault();
     }
-    onDeleteKey(event) {
-        if (this.showClear) {
-            this.clear(event);
-            event.preventDefault();
-        }
-    }
     onTabKey(event, pressedInInputText = false) {
         if (!pressedInInputText) {
             if (this.overlayVisible && this.hasFocusableElements()) {
@@ -1754,7 +1405,7 @@ class MultiSelect extends BaseComponent {
         this.startRangeIndex.set(this.focusedOptionIndex());
     }
     onContainerClick(event) {
-        if (this.disabled || this.loading || this.readonly || event.target.isSameNode(this.focusInputViewChild?.nativeElement)) {
+        if (this.disabled() || this.loading || this.readonly || event.target.isSameNode(this.focusInputViewChild?.nativeElement)) {
             return;
         }
         if (!this.overlayViewChild || !this.overlayViewChild.el.nativeElement.contains(event.target)) {
@@ -1809,33 +1460,11 @@ class MultiSelect extends BaseComponent {
             this.changeFocusedOptionIndex(event, index);
         }
     }
-    onHeaderCheckboxKeyDown(event) {
-        if (this.disabled) {
-            event.preventDefault();
-            return;
-        }
-        switch (event.code) {
-            case 'Space':
-                this.onToggleAll(event);
-                break;
-            case 'Enter':
-                this.onToggleAll(event);
-                break;
-            default:
-                break;
-        }
-    }
     onFilterBlur(event) {
         this.focusedOptionIndex.set(-1);
     }
-    onHeaderCheckboxFocus() {
-        this.headerCheckboxFocus = true;
-    }
-    onHeaderCheckboxBlur() {
-        this.headerCheckboxFocus = false;
-    }
     onToggleAll(event) {
-        if (this.disabled || this.readonly) {
+        if (this.disabled() || this.readonly) {
             return;
         }
         if (this.selectAll != null) {
@@ -1900,7 +1529,7 @@ class MultiSelect extends BaseComponent {
     }
     writeValue(value) {
         this.value = value;
-        this.modelValue.set(this.value);
+        this.writeModelValue(value);
         this.cd.markForCheck();
     }
     registerOnChange(fn) {
@@ -1909,10 +1538,6 @@ class MultiSelect extends BaseComponent {
     registerOnTouched(fn) {
         this.onModelTouched = fn;
     }
-    setDisabledState(val) {
-        this.disabled = val;
-        this.cd.markForCheck();
-    }
     allSelected() {
         return this.selectAll !== null ? this.selectAll : isNotEmpty(this.visibleOptions()) && this.visibleOptions().every((option) => this.isOptionGroup(option) || this.isOptionDisabled(option) || this.isSelected(option));
     }
@@ -2018,20 +1643,6 @@ class MultiSelect extends BaseComponent {
         });
         event && event.stopPropagation();
     }
-    findNextItem(item) {
-        let nextItem = item.nextElementSibling;
-        if (nextItem)
-            return hasClass(nextItem.children[0], 'p-disabled') || isHidden(nextItem.children[0]) || hasClass(nextItem, 'p-multiselect-item-group') ? this.findNextItem(nextItem) : nextItem.children[0];
-        else
-            return null;
-    }
-    findPrevItem(item) {
-        let prevItem = item.previousElementSibling;
-        if (prevItem)
-            return hasClass(prevItem.children[0], 'p-disabled') || isHidden(prevItem.children[0]) || hasClass(prevItem, 'p-multiselect-item-group') ? this.findPrevItem(prevItem) : prevItem.children[0];
-        else
-            return null;
-    }
     findNextOptionIndex(index) {
         const matchedOptionIndex = index < this.visibleOptions().length - 1
             ? this.visibleOptions()
@@ -2090,34 +1701,14 @@ class MultiSelect extends BaseComponent {
         }, 500);
         return matched;
     }
-    activateFilter() {
-        if (this.hasFilter() && this._options) {
-            if (this.group) {
-                let filteredGroups = [];
-                for (let optgroup of this.options) {
-                    let filteredSubOptions = this.filterService.filter(this.getOptionGroupChildren(optgroup), this.searchFields(), this.filterValue, this.filterMatchMode, this.filterLocale);
-                    if (filteredSubOptions && filteredSubOptions.length) {
-                        filteredGroups.push({ ...optgroup, ...{ [this.optionGroupChildren]: filteredSubOptions } });
-                    }
-                }
-                this._filteredOptions = filteredGroups;
-            }
-            else {
-                this._filteredOptions = this.filterService.filter(this.options, this.searchFields(), this.filterValue, this.filterMatchMode, this.filterLocale);
-            }
-        }
-        else {
-            this._filteredOptions = null;
-        }
-    }
     hasFocusableElements() {
         return getFocusableElements(this.overlayViewChild.overlayViewChild.nativeElement, ':not([data-p-hidden-focusable="true"])').length > 0;
     }
     hasFilter() {
         return this._filterValue() && this._filterValue().trim().length > 0;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MultiSelect, deps: [{ token: i0.NgZone }, { token: i3.FilterService }, { token: i3.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: MultiSelect, isStandalone: true, selector: "p-multiSelect, p-multiselect, p-multi-select", 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", size: "size", 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], highlightOnSelect: ["highlightOnSelect", "highlightOnSelect", booleanAttribute] }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onClear: "onClear", onPanelShow: "onPanelShow", onPanelHide: "onPanelHide", onLazyLoad: "onLazyLoad", onRemove: "onRemove", onSelectAllChange: "onSelectAllChange" }, host: { listeners: { "click": "onContainerClick($event)" }, properties: { "attr.id": "id", "style": "style", "class.p-variant-filled": "variant === \"filled\" || config.inputVariant() === \"filled\" || config.inputStyle() === \"filled\" ", "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: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "groupTemplate", first: true, predicate: ["group"] }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "emptyFilterTemplate", first: true, predicate: ["emptyfilter"] }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"] }, { propertyName: "selectedItemsTemplate", first: true, predicate: ["selecteditems"] }, { propertyName: "checkIconTemplate", first: true, predicate: ["checkicon"] }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "removeTokenIconTemplate", first: true, predicate: ["removetokenicon"] }, { propertyName: "chipIconTemplate", first: true, predicate: ["chipicon"] }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"] }, { propertyName: "itemCheckboxIconTemplate", first: true, predicate: ["itemcheckboxicon"] }, { propertyName: "headerCheckboxIconTemplate", first: true, predicate: ["headercheckboxicon"] }, { 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MultiSelect, deps: [{ token: i0.NgZone }, { token: i3.FilterService }, { token: i3.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MultiSelect, isStandalone: true, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: false, isRequired: false, transformFunction: null }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, group: { classPropertyName: "group", publicName: "group", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterPlaceHolder: { classPropertyName: "filterPlaceHolder", publicName: "filterPlaceHolder", isSignal: false, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: false, isRequired: false, transformFunction: null }, overlayVisible: { classPropertyName: "overlayVisible", publicName: "overlayVisible", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedLabel: { classPropertyName: "displaySelectedLabel", publicName: "displaySelectedLabel", isSignal: false, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: false, isRequired: false, transformFunction: null }, selectionLimit: { classPropertyName: "selectionLimit", publicName: "selectionLimit", isSignal: false, isRequired: false, transformFunction: numberAttribute }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: false, isRequired: false, transformFunction: null }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: false, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, resetFilterOnHide: { classPropertyName: "resetFilterOnHide", publicName: "resetFilterOnHide", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: false, isRequired: false, transformFunction: null }, chipIcon: { classPropertyName: "chipIcon", publicName: "chipIcon", isSignal: false, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: false, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: false, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: false, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: false, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: numberAttribute }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollOptions: { classPropertyName: "virtualScrollOptions", publicName: "virtualScrollOptions", isSignal: false, isRequired: false, transformFunction: null }, overlayOptions: { classPropertyName: "overlayOptions", publicName: "overlayOptions", isSignal: false, isRequired: false, transformFunction: null }, ariaFilterLabel: { classPropertyName: "ariaFilterLabel", publicName: "ariaFilterLabel", isSignal: false, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: false, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: false, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: false, isRequired: false, transformFunction: null }, tooltipPositionStyle: { classPropertyName: "tooltipPositionStyle", publicName: "tooltipPositionStyle", isSignal: false, isRequired: false, transformFunction: null }, tooltipStyleClass: { classPropertyName: "tooltipStyleClass", publicName: "tooltipStyleClass", isSignal: false, isRequired: false, transformFunction: null }, autofocusFilter: { classPropertyName: "autofocusFilter", publicName: "autofocusFilter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, display: { classPropertyName: "display", publicName: "display", isSignal: false, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: false, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: false, isRequired: false, transformFunction: null }, focusOnHover: { classPropertyName: "focusOnHover", publicName: "focusOnHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterFields: { classPropertyName: "filterFields", publicName: "filterFields", isSignal: false, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoOptionFocus: { classPropertyName: "autoOptionFocus", publicName: "autoOptionFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, highlightOnSelect: { classPropertyName: "highlightOnSelect", publicName: "highlightOnSelect", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, 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", "class": "cn(cx('root'), styleClass)", "style": "sx('root')" } }, providers: [MULTISELECT_VALUE_ACCESSOR, MultiSelectStyle], queries: [{ propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "groupTemplate", first: true, predicate: ["group"] }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "emptyFilterTemplate", first: true, predicate: ["emptyfilter"] }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"] }, { propertyName: "selectedItemsTemplate", first: true, predicate: ["selecteditems"] }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "removeTokenIconTemplate", first: true, predicate: ["removetokenicon"] }, { propertyName: "chipIconTemplate", first: true, predicate: ["chipicon"] }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"] }, { propertyName: "itemCheckboxIconTemplate", first: true, predicate: ["itemcheckboxicon"] }, { propertyName: "headerCheckboxIconTemplate", first: true, predicate: ["headercheckboxicon"] }, { 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
@@ -2125,7 +1716,7 @@ class MultiSelect extends BaseComponent {
                 [tooltipPosition]="tooltipPosition"
                 [positionStyle]="tooltipPositionStyle"
                 [tooltipStyleClass]="tooltipStyleClass"
-                [attr.aria-disabled]="disabled"
+                [attr.aria-disabled]="disabled()"
                 [attr.id]="inputId"
                 role="combobox"
                 [attr.aria-label]="ariaLabel"
@@ -2133,17 +1724,20 @@ class MultiSelect extends BaseComponent {
                 [attr.aria-haspopup]="'listbox'"
                 [attr.aria-expanded]="overlayVisible ?? false"
                 [attr.aria-controls]="overlayVisible ? id + '_list' : null"
-                [attr.tabindex]="!disabled ? tabindex : -1"
+                [attr.tabindex]="!disabled() ? tabindex : -1"
                 [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
                 (focus)="onInputFocus($event)"
                 (blur)="onInputBlur($event)"
                 (keydown)="onKeyDown($event)"
                 [pAutoFocus]="autofocus"
-                [attr.value]="label() || 'empty'"
+                [attr.value]="modelValue()"
+                [attr.name]="name()"
+                [attr.required]="required() ? '' : undefined"
+                [attr.disabled]="disabled() ? '' : undefined"
             />
         </div>
         <div
-            class="p-multiselect-label-container"
+            [class]="cx('labelContainer')"
             [pTooltip]="tooltip"
             (mouseleave)="labelContainerMouseLeave()"
             [tooltipDisabled]="_disableTooltip"
@@ -2151,20 +1745,20 @@ class MultiSelect extends BaseComponent {
             [positionStyle]="tooltipPositionStyle"
             [tooltipStyleClass]="tooltipStyleClass"
         >
-            <div [ngClass]="labelClass">
+            <div [class]="cx('label')">
                 <ng-container *ngIf="!selectedItemsTemplate && !_selectedItemsTemplate">
                     <ng-container *ngIf="display === 'comma'">{{ label() || 'empty' }}</ng-container>
                     <ng-container *ngIf="display === 'chip'">
                         @if (chipSelectedItems() && chipSelectedItems().length === maxSelectedLabels) {
                             {{ getSelectedItemsLabel() }}
                         } @else {
-                            <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]="!disabled && !readonly" (onRemove)="removeOption(item, $event)" [removeIcon]="chipIcon">
+                            <div #token *ngFor="let item of chipSelectedItems(); let i = index" [class]="cx('chipItem')">
+                                <p-chip [class]="cx('pcChip')" [label]="getLabelByValue(item)" [removable]="!disabled() && !readonly" (onRemove)="removeOption(item, $event)" [removeIcon]="chipIcon">
                                     <ng-container *ngIf="chipIconTemplate || _chipIconTemplate || removeTokenIconTemplate || _removeTokenIconTemplate">
                                         <ng-template #removeicon>
-                                            <ng-container *ngIf="!disabled && !readonly">
+                                            <ng-container *ngIf="!disabled() && !readonly">
                                                 <span
-                                                    class="p-multiselect-chip-icon"
+                                                    [class]="cx('chipIcon')"
                                                     *ngIf="chipIconTemplate || _chipIconTemplate || removeTokenIconTemplate || _removeTokenIconTemplate"
                                                     (click)="removeOption(item, $event)"
                                                     [attr.data-pc-section]="'clearicon'"
@@ -2178,56 +1772,44 @@ class MultiSelect extends BaseComponent {
                                 </p-chip>
                             </div>
                         }
-                        <ng-container *ngIf="!modelValue() || modelValue().length === 0">{{ placeholder() || defaultLabel || 'empty' }}</ng-container>
+                        <ng-container *ngIf="!modelValue() || modelValue().length === 0">{{ placeholder() || 'empty' }}</ng-container>
                     </ng-container>
                 </ng-container>
                 <ng-container *ngIf="selectedItemsTemplate || _selectedItemsTemplate">
                     <ng-container *ngTemplateOutlet="selectedItemsTemplate || _selectedItemsTemplate; context: { $implicit: selectedOptions, removeChip: removeOption.bind(this) }"></ng-container>
-                    <ng-container *ngIf="!modelValue() || modelValue().length === 0">{{ placeholder() || defaultLabel || 'empty' }}</ng-container>
+                    <ng-container *ngIf="!modelValue() || modelValue().length === 0">{{ placeholder() || 'empty' }}</ng-container>
                 </ng-container>
             </div>
         </div>
         <ng-container *ngIf="isVisibleClearIcon">
-            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" class="p-multiselect-clear-icon" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true" />
-            <span *ngIf="clearIconTemplate || _clearIconTemplate" class="p-multiselect-clear-icon" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true">
+            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true" />
+            <span *ngIf="clearIconTemplate || _clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true">
                 <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
             </span>
         </ng-container>
-        <div class="p-multiselect-dropdown">
+        <div [class]="cx('dropdown')">
             <ng-container *ngIf="loading; else elseBlock">
                 <ng-container *ngIf="loadingIconTemplate || _loadingIconTemplate">
                     <ng-container *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-container>
                 </ng-container>
                 <ng-container *ngIf="!loadingIconTemplate && !_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>
+                    <span *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin ' + loadingIcon)" aria-hidden="true"></span>
+                    <span *ngIf="!loadingIcon" [class]="cn(cx('loadingIcon'), 'pi pi-spinner pi-spin')" aria-hidden="true"></span>
                 </ng-container>
             </ng-container>
             <ng-template #elseBlock>
                 <ng-container *ngIf="!dropdownIconTemplate && !_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" />
+                    <span *ngIf="dropdownIcon" [class]="cx('dropdownIcon')" [ngClass]="dropdownIcon" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true"></span>
+                    <ChevronDownIcon *ngIf="!dropdownIcon" [styleClass]="cx('dropdownIcon')" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true" />
                 </ng-container>
-                <span *ngIf="dropdownIconTemplate || _dropdownIconTemplate" class="p-multiselect-dropdown-icon" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true">
+                <span *ngIf="dropdownIconTemplate || _dropdownIconTemplate" [class]="cx('dropdownIcon')" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true">
                     <ng-template *ngTemplateOutlet="dropdownIconTemplate || _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()"
-        >
+        <p-overlay #overlay [hostAttrSelector]="attrSelector" [(visible)]="overlayVisible" [options]="overlayOptions" [target]="'@parent'" [appendTo]="$appendTo()" (onAnimationStart)="onOverlayAnimationStart($event)" (onHide)="hide()">
             <ng-template #content>
-                <div [attr.id]="id + '_list'" [ngClass]="'p-multiselect-overlay p-component'" [ngStyle]="panelStyle" [class]="panelStyleClass">
+                <div [attr.id]="id + '_list'" [class]="cn(cx('overlay'), panelStyleClass)" [ngStyle]="panelStyle">
                     <span
                         #firstHiddenFocusableEl
                         role="presentation"
@@ -2239,13 +1821,22 @@ class MultiSelect extends BaseComponent {
                     >
                     </span>
                     <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
-                    <div class="p-multiselect-header" *ngIf="showHeader">
+                    <div [class]="cx('header')" *ngIf="showHeader">
                         <ng-content select="p-header"></ng-content>
                         <ng-container *ngIf="filterTemplate || _filterTemplate; else builtInFilterElement">
                             <ng-container *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { options: filterOptions }"></ng-container>
                         </ng-container>
                         <ng-template #builtInFilterElement>
-                            <p-checkbox [ngModel]="allSelected()" [ariaLabel]="toggleAllAriaLabel" [binary]="true" (onChange)="onToggleAll($event)" *ngIf="showToggleAll && !selectionLimit" [variant]="variant" [disabled]="disabled" #headerCheckbox>
+                            <p-checkbox
+                                [ngModel]="allSelected()"
+                                [ariaLabel]="toggleAllAriaLabel"
+                                [binary]="true"
+                                (onChange)="onToggleAll($event)"
+                                *ngIf="showToggleAll && !selectionLimit"
+                                [variant]="$variant()"
+                                [disabled]="disabled()"
+                                #headerCheckbox
+                            >
                                 <ng-template #checkboxicon let-klass="class">
                                     <CheckIcon *ngIf="!headerCheckboxIconTemplate && !_headerCheckboxIconTemplate && allSelected()" [styleClass]="klass" [attr.data-pc-section]="'icon'" />
                                     <ng-template
@@ -2261,44 +1852,42 @@ class MultiSelect extends BaseComponent {
                                 </ng-template>
                             </p-checkbox>
 
-                            <div class="p-multiselect-filter-container" *ngIf="filter">
-                                <p-iconfield>
-                                    <input
-                                        #filterInput
-                                        pInputText
-                                        [variant]="variant"
-                                        type="text"
-                                        [attr.autocomplete]="autocomplete"
-                                        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 && !_filterIconTemplate" />
-                                        <span *ngIf="filterIconTemplate || _filterIconTemplate" class="p-multiselect-filter-icon">
-                                            <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
-                                        </span>
-                                    </p-inputicon>
-                                </p-iconfield>
-                            </div>
+                            <p-iconfield *ngIf="filter" [class]="cx('pcFilterContainer')">
+                                <input
+                                    #filterInput
+                                    pInputText
+                                    [variant]="$variant()"
+                                    type="text"
+                                    [attr.autocomplete]="autocomplete"
+                                    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]="cx('pcFilter')"
+                                    [attr.disabled]="disabled() ? '' : undefined"
+                                    [attr.placeholder]="filterPlaceHolder"
+                                    [attr.aria-label]="ariaFilterLabel"
+                                />
+                                <p-inputicon>
+                                    <SearchIcon *ngIf="!filterIconTemplate && !_filterIconTemplate" />
+                                    <span *ngIf="filterIconTemplate || _filterIconTemplate" class="p-multiselect-filter-icon">
+                                        <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
+                                    </span>
+                                </p-inputicon>
+                            </p-iconfield>
                         </ng-template>
                     </div>
-                    <div class="p-multiselect-list-container" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
+                    <div [class]="cx('listContainer')" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
                         <p-scroller
                             *ngIf="virtualScroll"
                             #scroller
                             [items]="visibleOptions()"
                             [style]="{ height: scrollHeight }"
-                            [itemSize]="virtualScrollItemSize || _itemSize"
+                            [itemSize]="virtualScrollItemSize"
                             [autoSize]="true"
                             [tabindex]="-1"
                             [lazy]="lazy"
@@ -2319,10 +1908,10 @@ class MultiSelect extends BaseComponent {
                         </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">
+                            <ul #items [class]="cn(cx('list'), 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">
+                                        <li [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" [class]="cx('optionGroup')" [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>
@@ -2335,13 +1924,12 @@ class MultiSelect extends BaseComponent {
                                             [label]="getOptionLabel(option)"
                                             [disabled]="isOptionDisabled(option)"
                                             [template]="itemTemplate || _itemTemplate"
-                                            [checkIconTemplate]="checkIconTemplate || _checkIconTemplate"
                                             [itemCheckboxIconTemplate]="itemCheckboxIconTemplate || _itemCheckboxIconTemplate"
                                             [itemSize]="scrollerOptions.itemSize"
                                             [focused]="focusedOptionIndex() === getOptionIndex(i, scrollerOptions)"
                                             [ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
                                             [ariaSetSize]="ariaSetSize"
-                                            [variant]="variant"
+                                            [variant]="$variant()"
                                             [highlightOnSelect]="highlightOnSelect"
                                             (onClick)="onOptionSelect($event, false, getOptionIndex(i, scrollerOptions))"
                                             (onMouseEnter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
@@ -2349,14 +1937,14 @@ class MultiSelect extends BaseComponent {
                                     </ng-container>
                                 </ng-template>
 
-                                <li *ngIf="hasFilter() && isEmpty()" class="p-multiselect-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
+                                <li *ngIf="hasFilter() && isEmpty()" [class]="cx('emptyMessage')" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
                                     @if (!emptyFilterTemplate && !_emptyFilterTemplate && !emptyTemplate && !_emptyTemplate) {
                                         {{ emptyFilterMessageLabel }}
                                     } @else {
                                         <ng-container *ngTemplateOutlet="emptyFilterTemplate || _emptyFilterTemplate || emptyTemplate || _emptyFilterTemplate"></ng-container>
                                     }
                                 </li>
-                                <li *ngIf="!hasFilter() && isEmpty()" class="p-multiselect-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
+                                <li *ngIf="!hasFilter() && isEmpty()" [class]="cx('emptyMessage')" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
                                     @if (!emptyTemplate && !_emptyTemplate) {
                                         {{ emptyMessageLabel }}
                                     } @else {
@@ -2383,9 +1971,9 @@ class MultiSelect extends BaseComponent {
                 </div>
             </ng-template>
         </p-overlay>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MultiSelectItem, selector: "p-multiSelectItem, p-multiselect-item", inputs: ["id", "option", "selected", "label", "disabled", "itemSize", "focused", "ariaPosInset", "ariaSetSize", "variant", "template", "checkIconTemplate", "itemCheckboxIconTemplate", "highlightOnSelect"], outputs: ["onClick", "onMouseEnter"] }, { kind: "component", type: 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: "ngmodule", type: SharedModule }, { kind: "directive", type: 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: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", 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: AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus", "pAutoFocus"] }, { kind: "component", type: CheckIcon, selector: "CheckIcon" }, { kind: "component", type: SearchIcon, selector: "SearchIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MultiSelectItem, selector: "p-multiSelectItem, p-multiselect-item", inputs: ["id", "option", "selected", "label", "disabled", "itemSize", "focused", "ariaPosInset", "ariaSetSize", "variant", "template", "checkIconTemplate", "itemCheckboxIconTemplate", "highlightOnSelect"], outputs: ["onClick", "onMouseEnter"] }, { kind: "component", type: Overlay, selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options", "appendTo", "hostAttrSelector"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", 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: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: CheckIcon, selector: "CheckIcon" }, { kind: "component", type: SearchIcon, selector: "SearchIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MultiSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MultiSelect, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-multiSelect, p-multiselect, p-multi-select',
@@ -2399,7 +1987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 [tooltipPosition]="tooltipPosition"
                 [positionStyle]="tooltipPositionStyle"
                 [tooltipStyleClass]="tooltipStyleClass"
-                [attr.aria-disabled]="disabled"
+                [attr.aria-disabled]="disabled()"
                 [attr.id]="inputId"
                 role="combobox"
                 [attr.aria-label]="ariaLabel"
@@ -2407,17 +1995,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 [attr.aria-haspopup]="'listbox'"
                 [attr.aria-expanded]="overlayVisible ?? false"
                 [attr.aria-controls]="overlayVisible ? id + '_list' : null"
-                [attr.tabindex]="!disabled ? tabindex : -1"
+                [attr.tabindex]="!disabled() ? tabindex : -1"
                 [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
                 (focus)="onInputFocus($event)"
                 (blur)="onInputBlur($event)"
                 (keydown)="onKeyDown($event)"
                 [pAutoFocus]="autofocus"
-                [attr.value]="label() || 'empty'"
+                [attr.value]="modelValue()"
+                [attr.name]="name()"
+                [attr.required]="required() ? '' : undefined"
+                [attr.disabled]="disabled() ? '' : undefined"
             />
         </div>
         <div
-            class="p-multiselect-label-container"
+            [class]="cx('labelContainer')"
             [pTooltip]="tooltip"
             (mouseleave)="labelContainerMouseLeave()"
             [tooltipDisabled]="_disableTooltip"
@@ -2425,20 +2016,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             [positionStyle]="tooltipPositionStyle"
             [tooltipStyleClass]="tooltipStyleClass"
         >
-            <div [ngClass]="labelClass">
+            <div [class]="cx('label')">
                 <ng-container *ngIf="!selectedItemsTemplate && !_selectedItemsTemplate">
                     <ng-container *ngIf="display === 'comma'">{{ label() || 'empty' }}</ng-container>
                     <ng-container *ngIf="display === 'chip'">
                         @if (chipSelectedItems() && chipSelectedItems().length === maxSelectedLabels) {
                             {{ getSelectedItemsLabel() }}
                         } @else {
-                            <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]="!disabled && !readonly" (onRemove)="removeOption(item, $event)" [removeIcon]="chipIcon">
+                            <div #token *ngFor="let item of chipSelectedItems(); let i = index" [class]="cx('chipItem')">
+                                <p-chip [class]="cx('pcChip')" [label]="getLabelByValue(item)" [removable]="!disabled() && !readonly" (onRemove)="removeOption(item, $event)" [removeIcon]="chipIcon">
                                     <ng-container *ngIf="chipIconTemplate || _chipIconTemplate || removeTokenIconTemplate || _removeTokenIconTemplate">
                                         <ng-template #removeicon>
-                                            <ng-container *ngIf="!disabled && !readonly">
+                                            <ng-container *ngIf="!disabled() && !readonly">
                                                 <span
-                                                    class="p-multiselect-chip-icon"
+                                                    [class]="cx('chipIcon')"
                                                     *ngIf="chipIconTemplate || _chipIconTemplate || removeTokenIconTemplate || _removeTokenIconTemplate"
                                                     (click)="removeOption(item, $event)"
                                                     [attr.data-pc-section]="'clearicon'"
@@ -2452,56 +2043,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                                 </p-chip>
                             </div>
                         }
-                        <ng-container *ngIf="!modelValue() || modelValue().length === 0">{{ placeholder() || defaultLabel || 'empty' }}</ng-container>
+                        <ng-container *ngIf="!modelValue() || modelValue().length === 0">{{ placeholder() || 'empty' }}</ng-container>
                     </ng-container>
                 </ng-container>
                 <ng-container *ngIf="selectedItemsTemplate || _selectedItemsTemplate">
                     <ng-container *ngTemplateOutlet="selectedItemsTemplate || _selectedItemsTemplate; context: { $implicit: selectedOptions, removeChip: removeOption.bind(this) }"></ng-container>
-                    <ng-container *ngIf="!modelValue() || modelValue().length === 0">{{ placeholder() || defaultLabel || 'empty' }}</ng-container>
+                    <ng-container *ngIf="!modelValue() || modelValue().length === 0">{{ placeholder() || 'empty' }}</ng-container>
                 </ng-container>
             </div>
         </div>
         <ng-container *ngIf="isVisibleClearIcon">
-            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" class="p-multiselect-clear-icon" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true" />
-            <span *ngIf="clearIconTemplate || _clearIconTemplate" class="p-multiselect-clear-icon" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true">
+            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true" />
+            <span *ngIf="clearIconTemplate || _clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true">
                 <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
             </span>
         </ng-container>
-        <div class="p-multiselect-dropdown">
+        <div [class]="cx('dropdown')">
             <ng-container *ngIf="loading; else elseBlock">
                 <ng-container *ngIf="loadingIconTemplate || _loadingIconTemplate">
                     <ng-container *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-container>
                 </ng-container>
                 <ng-container *ngIf="!loadingIconTemplate && !_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>
+                    <span *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin ' + loadingIcon)" aria-hidden="true"></span>
+                    <span *ngIf="!loadingIcon" [class]="cn(cx('loadingIcon'), 'pi pi-spinner pi-spin')" aria-hidden="true"></span>
                 </ng-container>
             </ng-container>
             <ng-template #elseBlock>
                 <ng-container *ngIf="!dropdownIconTemplate && !_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" />
+                    <span *ngIf="dropdownIcon" [class]="cx('dropdownIcon')" [ngClass]="dropdownIcon" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true"></span>
+                    <ChevronDownIcon *ngIf="!dropdownIcon" [styleClass]="cx('dropdownIcon')" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true" />
                 </ng-container>
-                <span *ngIf="dropdownIconTemplate || _dropdownIconTemplate" class="p-multiselect-dropdown-icon" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true">
+                <span *ngIf="dropdownIconTemplate || _dropdownIconTemplate" [class]="cx('dropdownIcon')" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true">
                     <ng-template *ngTemplateOutlet="dropdownIconTemplate || _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()"
-        >
+        <p-overlay #overlay [hostAttrSelector]="attrSelector" [(visible)]="overlayVisible" [options]="overlayOptions" [target]="'@parent'" [appendTo]="$appendTo()" (onAnimationStart)="onOverlayAnimationStart($event)" (onHide)="hide()">
             <ng-template #content>
-                <div [attr.id]="id + '_list'" [ngClass]="'p-multiselect-overlay p-component'" [ngStyle]="panelStyle" [class]="panelStyleClass">
+                <div [attr.id]="id + '_list'" [class]="cn(cx('overlay'), panelStyleClass)" [ngStyle]="panelStyle">
                     <span
                         #firstHiddenFocusableEl
                         role="presentation"
@@ -2513,13 +2092,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     >
                     </span>
                     <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
-                    <div class="p-multiselect-header" *ngIf="showHeader">
+                    <div [class]="cx('header')" *ngIf="showHeader">
                         <ng-content select="p-header"></ng-content>
                         <ng-container *ngIf="filterTemplate || _filterTemplate; else builtInFilterElement">
                             <ng-container *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { options: filterOptions }"></ng-container>
                         </ng-container>
                         <ng-template #builtInFilterElement>
-                            <p-checkbox [ngModel]="allSelected()" [ariaLabel]="toggleAllAriaLabel" [binary]="true" (onChange)="onToggleAll($event)" *ngIf="showToggleAll && !selectionLimit" [variant]="variant" [disabled]="disabled" #headerCheckbox>
+                            <p-checkbox
+                                [ngModel]="allSelected()"
+                                [ariaLabel]="toggleAllAriaLabel"
+                                [binary]="true"
+                                (onChange)="onToggleAll($event)"
+                                *ngIf="showToggleAll && !selectionLimit"
+                                [variant]="$variant()"
+                                [disabled]="disabled()"
+                                #headerCheckbox
+                            >
                                 <ng-template #checkboxicon let-klass="class">
                                     <CheckIcon *ngIf="!headerCheckboxIconTemplate && !_headerCheckboxIconTemplate && allSelected()" [styleClass]="klass" [attr.data-pc-section]="'icon'" />
                                     <ng-template
@@ -2535,44 +2123,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                                 </ng-template>
                             </p-checkbox>
 
-                            <div class="p-multiselect-filter-container" *ngIf="filter">
-                                <p-iconfield>
-                                    <input
-                                        #filterInput
-                                        pInputText
-                                        [variant]="variant"
-                                        type="text"
-                                        [attr.autocomplete]="autocomplete"
-                                        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 && !_filterIconTemplate" />
-                                        <span *ngIf="filterIconTemplate || _filterIconTemplate" class="p-multiselect-filter-icon">
-                                            <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
-                                        </span>
-                                    </p-inputicon>
-                                </p-iconfield>
-                            </div>
+                            <p-iconfield *ngIf="filter" [class]="cx('pcFilterContainer')">
+                                <input
+                                    #filterInput
+                                    pInputText
+                                    [variant]="$variant()"
+                                    type="text"
+                                    [attr.autocomplete]="autocomplete"
+                                    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]="cx('pcFilter')"
+                                    [attr.disabled]="disabled() ? '' : undefined"
+                                    [attr.placeholder]="filterPlaceHolder"
+                                    [attr.aria-label]="ariaFilterLabel"
+                                />
+                                <p-inputicon>
+                                    <SearchIcon *ngIf="!filterIconTemplate && !_filterIconTemplate" />
+                                    <span *ngIf="filterIconTemplate || _filterIconTemplate" class="p-multiselect-filter-icon">
+                                        <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
+                                    </span>
+                                </p-inputicon>
+                            </p-iconfield>
                         </ng-template>
                     </div>
-                    <div class="p-multiselect-list-container" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
+                    <div [class]="cx('listContainer')" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
                         <p-scroller
                             *ngIf="virtualScroll"
                             #scroller
                             [items]="visibleOptions()"
                             [style]="{ height: scrollHeight }"
-                            [itemSize]="virtualScrollItemSize || _itemSize"
+                            [itemSize]="virtualScrollItemSize"
                             [autoSize]="true"
                             [tabindex]="-1"
                             [lazy]="lazy"
@@ -2593,10 +2179,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         </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">
+                            <ul #items [class]="cn(cx('list'), 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">
+                                        <li [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" [class]="cx('optionGroup')" [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>
@@ -2609,13 +2195,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                                             [label]="getOptionLabel(option)"
                                             [disabled]="isOptionDisabled(option)"
                                             [template]="itemTemplate || _itemTemplate"
-                                            [checkIconTemplate]="checkIconTemplate || _checkIconTemplate"
                                             [itemCheckboxIconTemplate]="itemCheckboxIconTemplate || _itemCheckboxIconTemplate"
                                             [itemSize]="scrollerOptions.itemSize"
                                             [focused]="focusedOptionIndex() === getOptionIndex(i, scrollerOptions)"
                                             [ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
                                             [ariaSetSize]="ariaSetSize"
-                                            [variant]="variant"
+                                            [variant]="$variant()"
                                             [highlightOnSelect]="highlightOnSelect"
                                             (onClick)="onOptionSelect($event, false, getOptionIndex(i, scrollerOptions))"
                                             (onMouseEnter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
@@ -2623,14 +2208,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                                     </ng-container>
                                 </ng-template>
 
-                                <li *ngIf="hasFilter() && isEmpty()" class="p-multiselect-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
+                                <li *ngIf="hasFilter() && isEmpty()" [class]="cx('emptyMessage')" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
                                     @if (!emptyFilterTemplate && !_emptyFilterTemplate && !emptyTemplate && !_emptyTemplate) {
                                         {{ emptyFilterMessageLabel }}
                                     } @else {
                                         <ng-container *ngTemplateOutlet="emptyFilterTemplate || _emptyFilterTemplate || emptyTemplate || _emptyFilterTemplate"></ng-container>
                                     }
                                 </li>
-                                <li *ngIf="!hasFilter() && isEmpty()" class="p-multiselect-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
+                                <li *ngIf="!hasFilter() && isEmpty()" [class]="cx('emptyMessage')" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
                                     @if (!emptyTemplate && !_emptyTemplate) {
                                         {{ emptyMessageLabel }}
                                     } @else {
@@ -2663,17 +2248,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         '[attr.id]': 'id',
-                        '[style]': 'style',
                         '(click)': 'onContainerClick($event)',
-                        '[class.p-variant-filled]': 'variant === "filled" || config.inputVariant() === "filled" || config.inputStyle() === "filled" '
+                        '[class]': "cn(cx('root'), styleClass)",
+                        '[style]': "sx('root')"
                     }
                 }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i3.FilterService }, { type: i3.OverlayService }], propDecorators: { id: [{
                 type: Input
             }], ariaLabel: [{
                 type: Input
-            }], style: [{
-                type: Input
             }], styleClass: [{
                 type: Input
             }], panelStyle: [{
@@ -2682,12 +2265,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Input
             }], inputId: [{
                 type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], fluid: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], readonly: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -2707,14 +2284,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], tabindex: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
-            }], variant: [{
-                type: Input
-            }], appendTo: [{
-                type: Input
             }], dataKey: [{
                 type: Input
-            }], name: [{
-                type: Input
             }], ariaLabelledBy: [{
                 type: Input
             }], displaySelectedLabel: [{
@@ -2794,32 +2365,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Input
             }], autocomplete: [{
                 type: Input
-            }], size: [{
-                type: Input
             }], showClear: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], autofocus: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], autoZIndex: [{
-                type: Input
-            }], baseZIndex: [{
-                type: Input
-            }], showTransitionOptions: [{
-                type: Input
-            }], hideTransitionOptions: [{
-                type: Input
-            }], defaultLabel: [{
-                type: Input
             }], placeholder: [{
                 type: Input
             }], options: [{
                 type: Input
             }], filterValue: [{
                 type: Input
-            }], itemSize: [{
-                type: Input
             }], selectAll: [{
                 type: Input
             }], focusOnHover: [{
@@ -2915,9 +2472,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], selectedItemsTemplate: [{
                 type: ContentChild,
                 args: ['selecteditems', { descendants: false }]
-            }], checkIconTemplate: [{
-                type: ContentChild,
-                args: ['checkicon', { descendants: false }]
             }], loadingIconTemplate: [{
                 type: ContentChild,
                 args: ['loadingicon', { descendants: false }]
@@ -2945,16 +2499,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
             }] } });
 class MultiSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: MultiSelectModule, imports: [MultiSelect, SharedModule], exports: [MultiSelect, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MultiSelectModule, imports: [MultiSelect, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: MultiSelectModule, imports: [MultiSelect, SharedModule], exports: [MultiSelect, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MultiSelectModule, imports: [MultiSelect, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MultiSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MultiSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [MultiSelect, SharedModule],