primeng 19.1.2 → 20.0.0-beta.1

package/fesm2022/primeng-listbox.mjs

@@ -3,13 +3,13 @@ import { DragDropModule, CDK_DRAG_CONFIG } from '@angular/cdk/drag-drop';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, EventEmitter, signal, inject, computed, booleanAttribute, numberAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, forwardRef, input, booleanAttribute, EventEmitter, signal, inject, computed, numberAttribute, HostListener, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { isNotEmpty, uuid, equals, focus, getFirstFocusableElement, isEmpty, isPrintableCharacter, resolveFieldData, findSingle, findLastIndex, isFunction } from '@primeuix/utils';
 import * as i1 from 'primeng/api';
 import { SharedModule, Header, Footer, PrimeTemplate } from 'primeng/api';
-import { BaseComponent } from 'primeng/basecomponent';
+import { BaseEditableHolder } from 'primeng/baseeditableholder';
 import { Checkbox } from 'primeng/checkbox';
 import { IconField } from 'primeng/iconfield';
 import { SearchIcon, CheckIcon, BlankIcon } from 'primeng/icons';
@@ -17,145 +17,26 @@ import { InputIcon } from 'primeng/inputicon';
 import { InputText } from 'primeng/inputtext';
 import { Ripple } from 'primeng/ripple';
 import { Scroller } from 'primeng/scroller';
+import { css, dt } from '@primeuix/styled';
+import { style } from '@primeuix/styles/listbox';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-listbox {
-    background: ${dt('listbox.background')};
-    color: ${dt('listbox.color')};
-    border: 1px solid ${dt('listbox.border.color')};
-    border-radius: ${dt('listbox.border.radius')};
-    transition: background ${dt('listbox.transition.duration')}, color ${dt('listbox.transition.duration')}, border-color ${dt('listbox.transition.duration')},
-            box-shadow ${dt('listbox.transition.duration')}, outline-color ${dt('listbox.transition.duration')};
-    outline-color: transparent;
-    box-shadow: ${dt('listbox.shadow')};
-}
-
-.p-listbox.p-focus {
-    border-color: ${dt('listbox.focus.border.color')};
-    box-shadow: ${dt('listbox.focus.ring.shadow')};
-    outline: ${dt('listbox.focus.ring.width')} ${dt('listbox.focus.ring.style')} ${dt('listbox.focus.ring.color')};
-    outline-offset: ${dt('listbox.focus.ring.offset')};
-}
-
-.p-listbox.p-disabled {
-    opacity: 1;
-    background: ${dt('listbox.disabled.background')};
-    color: ${dt('listbox.disabled.color')};
-}
-
-.p-listbox.p-disabled .p-listbox-option {
-    color: ${dt('listbox.disabled.color')};
-}
-
-.p-listbox-header {
-    padding: ${dt('listbox.list.header.padding')};
-    display: flex;
-    align-items: center;
-}
-
-.p-listbox-header > * {
-    flex: 1 1 auto;
-}
-
-.p-listbox-header > .p-checkbox {
-    flex: 0 0 auto;
-}
-
-.p-listbox-filter {
-    width: 100%;
-}
-
-.p-listbox-list-container {
-    overflow: auto;
-}
-
-.p-listbox-list {
-    list-style-type: none;
-    margin: 0;
-    padding: ${dt('listbox.list.padding')};
-    outline: 0 none;
-    display: flex;
-    flex-direction: column;
-    gap: ${dt('listbox.list.gap')};
-}
-
-.p-listbox-option {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-    padding: ${dt('listbox.option.padding')};
-    border: 0 none;
-    border-radius: ${dt('listbox.option.border.radius')};
-    color: ${dt('listbox.option.color')};
-    transition: background ${dt('listbox.transition.duration')}, color ${dt('listbox.transition.duration')}, border-color ${dt('listbox.transition.duration')},
-            box-shadow ${dt('listbox.transition.duration')}, outline-color ${dt('listbox.transition.duration')};
-}
-
-.p-listbox-option:not(.cdk-drag-disabled) {
-    cursor: move;
-}
-
-.p-listbox-striped li:nth-child(even of .p-listbox-option) {
-    background: ${dt('listbox.option.striped.background')};
-}
-
-.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected {
-    background: ${dt('listbox.option.selected.background')};
-    color: ${dt('listbox.option.selected.color')};
-}
-
-.p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus {
-    background: ${dt('listbox.option.selected.focus.background')};
-    color: ${dt('listbox.option.selected.focus.color')};
-}
-
-.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled).p-focus {
-    background: ${dt('listbox.option.focus.background')};
-    color: ${dt('listbox.option.focus.color')};
-}
-
-.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled):hover {
-    background: ${dt('listbox.option.focus.background')};
-    color: ${dt('listbox.option.focus.color')};
-}
-
-.p-listbox-option-check-icon {
-    position: relative;
-    margin-inline-start: ${dt('listbox.checkmark.gutter.start')};
-    margin-inline-end: ${dt('listbox.checkmark.gutter.end')};
-    color: ${dt('listbox.checkmark.color')};
-}
-
-.p-listbox-option-group {
-    margin: 0;
-    padding: ${dt('listbox.option.group.padding')};
-    color: ${dt('listbox.option.group.color')};
-    background: ${dt('listbox.option.group.background')};
-    font-weight: ${dt('listbox.option.group.font.weight')};
-}
-
-.p-listbox-empty-message {
-    padding: ${dt('listbox.empty.message.padding')};
-}
-
-/* For PrimeNG */
+const theme = css `
+    ${style}
 
-p-listBox.ng-invalid.ng-dirty > .p-listbox.p-component,
-p-list-box.ng-invalid.ng-dirty > .p-listbox.p-component,
-p-listbox.ng-invalid.ng-dirty > .p-listbox.p-component {
-    border-color: ${dt('listbox.invalid.border.color')};
-}
+    /* For PrimeNG */
+    .p-listbox.ng-invalid.ng-dirty {
+        border-color: ${dt('listbox.invalid.border.color')};
+    }
 `;
 const classes = {
-    root: ({ props }) => [
+    root: ({ instance }) => [
         'p-listbox p-component',
         {
-            'p-listbox-striped': props.striped,
-            'p-disabled': props.disabled,
-            'p-invalid': props.invalid
+            'p-listbox-striped': instance.striped,
+            'p-disabled': instance.disabled(),
+            'p-invalid': instance.invalid(),
+            'p-listbox-fluid': instance.fluid()
         }
     ],
     header: 'p-listbox-header',
@@ -163,11 +44,11 @@ const classes = {
     listContainer: 'p-listbox-list-container',
     list: 'p-listbox-list',
     optionGroup: 'p-listbox-option-group',
-    option: ({ instance, props, option, index, getItemOptions }) => [
+    option: ({ instance, option, i, scrollerOptions }) => [
         'p-listbox-option',
         {
-            'p-listbox-option-selected': instance.isSelected(option) && props.highlightOnSelect,
-            'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(index, getItemOptions),
+            'p-listbox-option-selected': instance.isSelected(option) && instance.highlightOnSelect,
+            'p-focus': instance.focusedOptionIndex() === instance.getOptionIndex(i, scrollerOptions),
             'p-disabled': instance.isOptionDisabled(option)
         }
     ],
@@ -179,10 +60,10 @@ class ListBoxStyle extends BaseStyle {
     name = 'listbox';
     theme = theme;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ListBoxStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ListBoxStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ListBoxStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ListBoxStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ListBoxStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ListBoxStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -247,7 +128,7 @@ const LISTBOX_VALUE_ACCESSOR = {
  * ListBox is used to select one or more values from a list of items.
  * @group Components
  */
-class Listbox extends BaseComponent {
+class Listbox extends BaseEditableHolder {
     filterService;
     /**
      * Unique identifier of the component.
@@ -342,13 +223,9 @@ class Listbox extends BaseComponent {
      * @group Props
      */
     multiple;
-    /**
-     * Inline style of the container.
-     * @group Props
-     */
-    style;
     /**
      * Style class of the container.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -367,11 +244,6 @@ class Listbox extends BaseComponent {
      * @group Props
      */
     readonly;
-    /**
-     * When present, it specifies that the element should be disabled.
-     * @group Props
-     */
-    disabled;
     /**
      * When specified, allows selecting items with checkboxes.
      * @group Props
@@ -515,6 +387,12 @@ class Listbox extends BaseComponent {
      * @group Props
      */
     dragdrop = false;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue undefined
+     * @group Props
+     */
+    fluid = input(undefined, { transform: booleanAttribute });
     /**
      * Callback to invoke on value change.
      * @param {ListboxChangeEvent} event - Custom change event.
@@ -659,13 +537,6 @@ class Listbox extends BaseComponent {
     focused;
     scrollerTabIndex = '0';
     _componentStyle = inject(ListBoxStyle);
-    get containerClass() {
-        return {
-            'p-listbox p-component': true,
-            'p-listbox-striped': this.striped,
-            'p-disabled': this.disabled
-        };
-    }
     get focusedOptionId() {
         return this.focusedOptionIndex() !== -1 ? `${this.id}_${this.focusedOptionIndex()}` : null;
     }
@@ -708,7 +579,9 @@ class Listbox extends BaseComponent {
     _options = signal(null);
     startRangeIndex = signal(-1);
     focusedOptionIndex = signal(-1);
-    modelValue = signal(null);
+    onHostFocusOut(event) {
+        this.onFocusout(event);
+    }
     visibleOptions = computed(() => {
         const options = this.group ? this.flatOptions(this._options()) : this._options() || [];
         return this._filterValue() ? this.filterService.filter(options, this.searchFields, this._filterValue(), this.filterMatchMode, this.filterLocale) : options;
@@ -775,7 +648,7 @@ class Listbox extends BaseComponent {
     }
     writeValue(value) {
         this.value = value;
-        this.modelValue.set(this.value);
+        this.writeModelValue(this.value);
         this.cd.markForCheck();
     }
     registerOnChange(fn) {
@@ -784,10 +657,6 @@ class Listbox extends BaseComponent {
     registerOnTouched(fn) {
         this.onModelTouched = fn;
     }
-    setDisabledState(val) {
-        this.disabled = val;
-        this.cd.markForCheck();
-    }
     flatOptions(options) {
         return (options || []).reduce((result, option, index) => {
             result.push({ optionGroup: option, group: true, index });
@@ -809,7 +678,7 @@ class Listbox extends BaseComponent {
      */
     updateModel(value, event) {
         this.value = value;
-        this.modelValue.set(value);
+        this.writeModelValue(value);
         this.onModelChange(value);
         this.onChange.emit({ originalEvent: event, value: this.value });
     }
@@ -817,7 +686,7 @@ class Listbox extends BaseComponent {
         return this.modelValue().filter((val) => !equals(val, this.getOptionValue(option), this.equalityKey()));
     }
     onOptionSelect(event, option, index = -1) {
-        if (this.disabled || this.isOptionDisabled(option) || this.readonly) {
+        if (this.disabled() || this.isOptionDisabled(option) || this.readonly) {
             return;
         }
         event && this.onClick.emit({ originalEvent: event, option, value: this.value });
@@ -884,7 +753,7 @@ class Listbox extends BaseComponent {
         }
     }
     onToggleAll(event) {
-        if (this.disabled || this.readonly) {
+        if (this.disabled() || this.readonly) {
             return;
         }
         focus(this.headerCheckboxViewChild.nativeElement);
@@ -910,7 +779,7 @@ class Listbox extends BaseComponent {
         return this.selectAll !== null ? this.selectAll : isNotEmpty(this.visibleOptions()) && this.visibleOptions().every((option) => this.isOptionGroup(option) || this.isOptionDisabled(option) || this.isSelected(option));
     }
     onOptionTouchEnd() {
-        if (this.disabled) {
+        if (this.disabled()) {
             return;
         }
         this.optionTouched = true;
@@ -919,12 +788,12 @@ class Listbox extends BaseComponent {
         this.changeFocusedOptionIndex(event, index);
     }
     onOptionMouseEnter(event, index) {
-        if (this.focusOnHover) {
+        if (this.focusOnHover && this.focused) {
             this.changeFocusedOptionIndex(event, index);
         }
     }
     onOptionDoubleClick(event, option) {
-        if (this.disabled || this.isOptionDisabled(option) || this.readonly) {
+        if (this.disabled() || this.isOptionDisabled(option) || this.readonly) {
             return;
         }
         this.onDblClick.emit({
@@ -934,14 +803,14 @@ class Listbox extends BaseComponent {
         });
     }
     onFirstHiddenFocus(event) {
-        focus(this.listViewChild.nativeElement);
+        focus(this.listViewChild?.nativeElement);
         const firstFocusableEl = getFirstFocusableElement(this.el.nativeElement, ':not([data-p-hidden-focusable="true"])');
         this.lastHiddenFocusableElement.nativeElement.tabIndex = isEmpty(firstFocusableEl) ? '-1' : undefined;
         this.firstHiddenFocusableElement.nativeElement.tabIndex = -1;
     }
     onLastHiddenFocus(event) {
         const relatedTarget = event.relatedTarget;
-        if (relatedTarget === this.listViewChild.nativeElement) {
+        if (relatedTarget === this.listViewChild?.nativeElement) {
             const firstFocusableEl = getFirstFocusableElement(this.el.nativeElement, ':not(.p-hidden-focusable)');
             focus(firstFocusableEl);
             this.firstHiddenFocusableElement.nativeElement.tabIndex = undefined;
@@ -954,26 +823,23 @@ class Listbox extends BaseComponent {
     onFocusout(event) {
         if (!this.el.nativeElement.contains(event.relatedTarget) && this.lastHiddenFocusableElement && this.firstHiddenFocusableElement) {
             this.firstHiddenFocusableElement.nativeElement.tabIndex = this.lastHiddenFocusableElement.nativeElement.tabIndex = undefined;
-            this.containerViewChild.nativeElement.tabIndex = '0';
             this.scrollerTabIndex = '0';
         }
     }
     onListFocus(event) {
         this.focused = true;
-        const focusedOptionIndex = this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
+        const focusedOptionIndex = this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.findSelectedOptionIndex();
         this.focusedOptionIndex.set(focusedOptionIndex);
+        this.scrollInView(focusedOptionIndex);
         this.onFocus.emit(event);
-        this.containerViewChild.nativeElement.tabIndex = '-1';
         this.scrollerTabIndex = '-1';
     }
-    onFilterFocus(event) {
-        this.containerViewChild.nativeElement.tabIndex = '-1';
-    }
     onListBlur(event) {
         this.focused = false;
         this.focusedOptionIndex.set(-1);
         this.startRangeIndex.set(-1);
         this.searchValue = '';
+        this.onBlur.emit(event);
     }
     onHeaderCheckboxFocus(event) {
         this.headerCheckboxFocus = true;
@@ -982,7 +848,7 @@ class Listbox extends BaseComponent {
         this.headerCheckboxFocus = false;
     }
     onHeaderCheckboxKeyDown(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             event.preventDefault();
             return;
         }
@@ -1001,7 +867,7 @@ class Listbox extends BaseComponent {
         }
     }
     onHeaderCheckboxTabKeyDown(event) {
-        focus(this.listViewChild.nativeElement);
+        focus(this.listViewChild?.nativeElement);
         event.preventDefault();
     }
     onFilterChange(event) {
@@ -1248,7 +1114,7 @@ class Listbox extends BaseComponent {
     }
     scrollInView(index = -1) {
         const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
-        const element = findSingle(this.listViewChild.nativeElement, `li[id="${id}"]`);
+        const element = findSingle(this.listViewChild?.nativeElement, `li[id="${id}"]`);
         if (element) {
             element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
         }
@@ -1300,6 +1166,22 @@ class Listbox extends BaseComponent {
         const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidOption(option)) : -1;
         return matchedOptionIndex > -1 ? matchedOptionIndex : index;
     }
+    findSelectedOptionIndex() {
+        if (this.$filled) {
+            if (this.multiple) {
+                for (let index = this.modelValue().length - 1; index >= 0; index--) {
+                    const value = this.modelValue()[index];
+                    const matchedOptionIndex = this.visibleOptions().findIndex((option) => this.isValidSelectedOption(option) && this.isEquals(value, this.getOptionValue(option)));
+                    if (matchedOptionIndex > -1)
+                        return matchedOptionIndex;
+                }
+            }
+            else {
+                return this.visibleOptions().findIndex((option) => this.isValidSelectedOption(option));
+            }
+        }
+        return -1;
+    }
     findNearestSelectedOptionIndex(index, firstCheckUp = false) {
         let matchedOptionIndex = -1;
         if (this.hasSelectedOption()) {
@@ -1326,12 +1208,15 @@ class Listbox extends BaseComponent {
         }
         return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
     }
+    isEquals(value1, value2) {
+        return equals(value1, value2, this.equalityKey());
+    }
     isSelected(option) {
         const optionValue = this.getOptionValue(option);
         if (this.multiple)
-            return (this.modelValue() || []).some((value) => equals(value, optionValue, this.equalityKey()));
+            return (this.modelValue() || []).some((value) => this.isEquals(value, optionValue));
         else
-            return equals(this.modelValue(), optionValue, this.equalityKey());
+            return this.isEquals(this.modelValue(), optionValue);
     }
     isValidOption(option) {
         return option && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
@@ -1359,8 +1244,8 @@ class Listbox extends BaseComponent {
         }
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: Listbox, deps: [{ token: i1.FilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: Listbox, isStandalone: true, selector: "p-listbox, p-listBox, p-list-box", inputs: { id: "id", searchMessage: "searchMessage", emptySelectionMessage: "emptySelectionMessage", selectionMessage: "selectionMessage", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], ariaLabel: "ariaLabel", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], searchLocale: ["searchLocale", "searchLocale", booleanAttribute], focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], filterMessage: "filterMessage", filterFields: "filterFields", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", scrollHeight: "scrollHeight", tabindex: ["tabindex", "tabindex", numberAttribute], multiple: ["multiple", "multiple", booleanAttribute], style: "style", styleClass: "styleClass", listStyle: "listStyle", listStyleClass: "listStyleClass", readonly: ["readonly", "readonly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], checkbox: ["checkbox", "checkbox", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterBy: "filterBy", filterMatchMode: "filterMatchMode", filterLocale: "filterLocale", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], dataKey: "dataKey", showToggleAll: ["showToggleAll", "showToggleAll", booleanAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", optionDisabled: "optionDisabled", ariaFilterLabel: "ariaFilterLabel", filterPlaceHolder: "filterPlaceHolder", emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", group: ["group", "group", booleanAttribute], options: "options", filterValue: "filterValue", selectAll: "selectAll", striped: ["striped", "striped", booleanAttribute], highlightOnSelect: ["highlightOnSelect", "highlightOnSelect", booleanAttribute], checkmark: ["checkmark", "checkmark", booleanAttribute], dragdrop: ["dragdrop", "dragdrop", booleanAttribute] }, outputs: { onChange: "onChange", onClick: "onClick", onDblClick: "onDblClick", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onSelectAllChange: "onSelectAllChange", onLazyLoad: "onLazyLoad", onDrop: "onDrop" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Listbox, deps: [{ token: i1.FilterService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: Listbox, isStandalone: true, selector: "p-listbox, p-listBox, p-list-box", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, searchMessage: { classPropertyName: "searchMessage", publicName: "searchMessage", isSignal: false, isRequired: false, transformFunction: null }, emptySelectionMessage: { classPropertyName: "emptySelectionMessage", publicName: "emptySelectionMessage", isSignal: false, isRequired: false, transformFunction: null }, selectionMessage: { classPropertyName: "selectionMessage", publicName: "selectionMessage", isSignal: false, isRequired: false, transformFunction: null }, autoOptionFocus: { classPropertyName: "autoOptionFocus", publicName: "autoOptionFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, searchLocale: { classPropertyName: "searchLocale", publicName: "searchLocale", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, focusOnHover: { classPropertyName: "focusOnHover", publicName: "focusOnHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterMessage: { classPropertyName: "filterMessage", publicName: "filterMessage", isSignal: false, isRequired: false, transformFunction: null }, filterFields: { classPropertyName: "filterFields", publicName: "filterFields", 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 }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: numberAttribute }, virtualScrollOptions: { classPropertyName: "virtualScrollOptions", publicName: "virtualScrollOptions", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, listStyle: { classPropertyName: "listStyle", publicName: "listStyle", isSignal: false, isRequired: false, transformFunction: null }, listStyleClass: { classPropertyName: "listStyleClass", publicName: "listStyleClass", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: false, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: false, isRequired: false, transformFunction: null }, metaKeySelection: { classPropertyName: "metaKeySelection", publicName: "metaKeySelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: false, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: false, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: false, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: false, isRequired: false, transformFunction: null }, ariaFilterLabel: { classPropertyName: "ariaFilterLabel", publicName: "ariaFilterLabel", isSignal: false, isRequired: false, transformFunction: null }, filterPlaceHolder: { classPropertyName: "filterPlaceHolder", publicName: "filterPlaceHolder", isSignal: false, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: false, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, 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 }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, highlightOnSelect: { classPropertyName: "highlightOnSelect", publicName: "highlightOnSelect", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, checkmark: { classPropertyName: "checkmark", publicName: "checkmark", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dragdrop: { classPropertyName: "dragdrop", publicName: "dragdrop", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onClick: "onClick", onDblClick: "onDblClick", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onSelectAllChange: "onSelectAllChange", onLazyLoad: "onLazyLoad", onDrop: "onDrop" }, host: { listeners: { "focusout": "onHostFocusOut($event)" }, properties: { "attr.id": "id", "class": "cn(cx('root'), styleClass)" } }, providers: [
             LISTBOX_VALUE_ACCESSOR,
             ListBoxStyle,
             {
@@ -1370,457 +1255,463 @@ class Listbox extends BaseComponent {
                 }
             }
         ], queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "groupTemplate", first: true, predicate: ["group"] }, { 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: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "checkIconTemplate", first: true, predicate: ["checkicon"] }, { propertyName: "checkmarkTemplate", first: true, predicate: ["checkmark"] }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "headerCheckboxViewChild", first: true, predicate: ["headerchkbox"], descendants: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "lastHiddenFocusableElement", first: true, predicate: ["lastHiddenFocusableElement"], descendants: true }, { propertyName: "firstHiddenFocusableElement", first: true, predicate: ["firstHiddenFocusableElement"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <div [attr.id]="id" [ngClass]="containerClass" [ngStyle]="style" [class]="styleClass" (focusout)="onFocusout($event)">
-            <span #firstHiddenFocusableElement role="presentation" class="p-hidden-accessible p-hidden-focusable" [tabindex]="!disabled ? tabindex : -1" (focus)="onFirstHiddenFocus($event)" [attr.data-p-hidden-focusable]="true"> </span>
-            <div class="p-listbox-header" *ngIf="headerFacet || headerTemplate || _headerTemplate">
-                <ng-content select="p-header"></ng-content>
-                <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }"></ng-container>
-            </div>
-            <div class="p-listbox-header" *ngIf="(checkbox && multiple && showToggleAll) || filter">
-                <div *ngIf="checkbox && multiple && showToggleAll" class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-disabled': disabled }" (click)="onToggleAll($event)" (keydown)="onHeaderCheckboxKeyDown($event)">
-                    <div class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
-                        <input #headerchkbox type="checkbox" readonly="readonly" [attr.checked]="allSelected()" [disabled]="disabled" (focus)="onHeaderCheckboxFocus($event)" (blur)="onHeaderCheckboxBlur()" [attr.aria-label]="toggleAllAriaLabel" />
-                    </div>
-                    <p-checkbox
-                        *ngIf="checkbox && multiple"
-                        styleClass="p-listbox-option-check-icon"
-                        [ngModel]="allSelected()"
-                        [disabled]="disabled"
-                        [tabindex]="-1"
-                        [variant]="config.inputStyle() === 'filled' || config.inputVariant() === 'filled' ? 'filled' : 'outlined'"
-                        [binary]="true"
-                    >
-                        <ng-container *ngIf="checkIconTemplate || _checkIconTemplate">
-                            <ng-template #icon>
-                                <ng-template *ngTemplateOutlet="checkIconTemplate || _checkIconTemplate; context: { $implicit: allSelected() }"></ng-template>
-                            </ng-template>
-                        </ng-container>
-                    </p-checkbox>
+        <span #firstHiddenFocusableElement role="presentation" class="p-hidden-accessible p-hidden-focusable" [tabindex]="!disabled() ? tabindex : -1" (focus)="onFirstHiddenFocus($event)" [attr.data-p-hidden-focusable]="true"> </span>
+        <div [class]="cx('header')" *ngIf="headerFacet || headerTemplate || _headerTemplate">
+            <ng-content select="p-header"></ng-content>
+            <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }"></ng-container>
+        </div>
+        <div [class]="cx('header')" *ngIf="(checkbox && multiple && showToggleAll) || filter">
+            <div *ngIf="checkbox && multiple && showToggleAll" class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-disabled': disabled() }" (click)="onToggleAll($event)" (keydown)="onHeaderCheckboxKeyDown($event)">
+                <div class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
+                    <input
+                        #headerchkbox
+                        type="checkbox"
+                        readonly="readonly"
+                        [attr.checked]="allSelected()"
+                        [attr.disabled]="disabled() ? '' : undefined"
+                        (focus)="onHeaderCheckboxFocus($event)"
+                        (blur)="onHeaderCheckboxBlur()"
+                        [attr.aria-label]="toggleAllAriaLabel"
+                    />
                 </div>
-                <ng-container *ngIf="filterTemplate || _filterTemplate; else builtInFilterElement">
-                    <ng-container *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { options: filterOptions }"></ng-container>
-                </ng-container>
-                <ng-template #builtInFilterElement>
-                    <div class="p-listbox-filter-container" *ngIf="filter">
-                        <p-iconfield>
-                            <input
-                                #filterInput
-                                pInputText
-                                type="text"
-                                class="p-listbox-filter"
-                                role="searchbox"
-                                [value]="_filterValue() || ''"
-                                [disabled]="disabled"
-                                [attr.aria-owns]="id + '_list'"
-                                [attr.aria-activedescendant]="focusedOptionId"
-                                [attr.placeholder]="filterPlaceHolder"
-                                [attr.aria-label]="ariaFilterLabel"
-                                [tabindex]="!disabled && !focused ? tabindex : -1"
-                                (input)="onFilterChange($event)"
-                                (keydown)="onFilterKeyDown($event)"
-                                (focus)="onFilterFocus($event)"
-                                (blur)="onFilterBlur($event)"
-                            />
-                            <p-inputicon>
-                                <SearchIcon *ngIf="!filterIconTemplate && !_filterIconTemplate" [styleClass]="'p-listbox-filter-icon'" [attr.aria-hidden]="true" />
-                                <span *ngIf="filterIconTemplate || _filterIconTemplate" class="p-listbox-filter-icon" [attr.aria-hidden]="true">
-                                    <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
-                                </span>
-                            </p-inputicon>
-                        </p-iconfield>
-                    </div>
-                    <span role="status" attr.aria-live="polite" class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
-                        {{ filterResultMessageText }}
-                    </span>
-                </ng-template>
-            </div>
-            <div [ngClass]="'p-listbox-list-container'" #container [ngStyle]="listStyle" [class]="listStyleClass" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'" [attr.tabindex]="!disabled && '0'">
-                @if (hasFilter() && isEmpty()) {
-                    <div class="p-listbox-empty-message" [cdkDropListData]="$any([])" (cdkDropListDropped)="drop($event)" cdkDropList>
-                        @if (!emptyFilterTemplate && !_emptyFilterTemplate && !_emptyTemplate && !emptyTemplate) {
-                            {{ emptyFilterMessageText }}
-                        } @else {
-                            <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || _emptyFilterTemplate || _emptyTemplate || emptyTemplate"></ng-container>
-                        }
-                    </div>
-                } @else if (!hasFilter() && isEmpty()) {
-                    <div class="p-listbox-empty-message" [cdkDropListData]="$any([])" (cdkDropListDropped)="drop($event)" cdkDropList>
-                        @if (!emptyTemplate && !_emptyTemplate) {
-                            {{ emptyMessage }}
-                        } @else {
-                            <ng-container #empty *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
-                        }
-                    </div>
-                } @else {
-                    <p-scroller
-                        #scroller
-                        *ngIf="virtualScroll"
-                        [items]="visibleOptions()"
-                        [style]="{ height: scrollHeight }"
-                        [itemSize]="virtualScrollItemSize"
-                        [autoSize]="true"
-                        [lazy]="lazy"
-                        [options]="virtualScrollOptions"
-                        (onLazyLoad)="onLazyLoad.emit($event)"
-                        [tabindex]="scrollerTabIndex"
-                    >
-                        <ng-template #content let-items let-scrollerOptions="options">
-                            <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
+                <p-checkbox
+                    *ngIf="checkbox && multiple"
+                    [class]="cx('optionCheckIcon')"
+                    [ngModel]="allSelected()"
+                    [disabled]="disabled()"
+                    [tabindex]="-1"
+                    [variant]="config.inputStyle() === 'filled' || config.inputVariant() === 'filled' ? 'filled' : 'outlined'"
+                    [binary]="true"
+                >
+                    <ng-container *ngIf="checkIconTemplate || _checkIconTemplate">
+                        <ng-template #icon>
+                            <ng-template *ngTemplateOutlet="checkIconTemplate || _checkIconTemplate; context: { $implicit: allSelected() }"></ng-template>
                         </ng-template>
-                        @if (loaderTemplate || _loaderTemplate) {
-                            <ng-template #loader let-scrollerOptions="options">
-                                <ng-container *ngTemplateOutlet="loaderTemplate || _loaderTemplate; context: { options: scrollerOptions }"></ng-container>
-                            </ng-template>
-                        }
-                    </p-scroller>
-                    <ng-container *ngIf="!virtualScroll">
-                        <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
                     </ng-container>
+                </p-checkbox>
+            </div>
+            <ng-container *ngIf="filterTemplate || _filterTemplate; else builtInFilterElement">
+                <ng-container *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { options: filterOptions }"></ng-container>
+            </ng-container>
+            <ng-template #builtInFilterElement>
+                <div *ngIf="filter">
+                    <p-iconfield>
+                        <input
+                            #filterInput
+                            pInputText
+                            type="text"
+                            [class]="cx('pcFilter')"
+                            role="searchbox"
+                            [value]="_filterValue() || ''"
+                            [attr.disabled]="disabled() ? '' : undefined"
+                            [attr.aria-owns]="id + '_list'"
+                            [attr.aria-activedescendant]="focusedOptionId"
+                            [attr.placeholder]="filterPlaceHolder"
+                            [attr.aria-label]="ariaFilterLabel"
+                            [attr.tabindex]="!disabled() && !focused ? tabindex : -1"
+                            (input)="onFilterChange($event)"
+                            (keydown)="onFilterKeyDown($event)"
+                            (blur)="onFilterBlur($event)"
+                        />
+                        <p-inputicon>
+                            <SearchIcon *ngIf="!filterIconTemplate && !_filterIconTemplate" [attr.aria-hidden]="true" />
+                            <span *ngIf="filterIconTemplate || _filterIconTemplate" [attr.aria-hidden]="true">
+                                <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
+                            </span>
+                        </p-inputicon>
+                    </p-iconfield>
+                </div>
+                <span role="status" [attr.aria-live]="'polite'" class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
+                    {{ filterResultMessageText }}
+                </span>
+            </ng-template>
+        </div>
+        <div #container [class]="cn(cx('listContainer'), listStyleClass)" [ngStyle]="listStyle" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
+            @if (hasFilter() && isEmpty()) {
+                <div [class]="cx('emptyMessage')" [cdkDropListData]="$any([])" (cdkDropListDropped)="drop($event)" cdkDropList>
+                    @if (!emptyFilterTemplate && !_emptyFilterTemplate && !_emptyTemplate && !emptyTemplate) {
+                        {{ emptyFilterMessageText }}
+                    } @else {
+                        <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || _emptyFilterTemplate || _emptyTemplate || emptyTemplate"></ng-container>
+                    }
+                </div>
+            } @else if (!hasFilter() && isEmpty()) {
+                <div [class]="cx('emptyMessage')" [cdkDropListData]="$any([])" (cdkDropListDropped)="drop($event)" cdkDropList>
+                    @if (!emptyTemplate && !_emptyTemplate) {
+                        {{ emptyMessage }}
+                    } @else {
+                        <ng-container #empty *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
+                    }
+                </div>
+            } @else {
+                <p-scroller
+                    #scroller
+                    *ngIf="virtualScroll"
+                    [items]="visibleOptions()"
+                    [style]="{ height: scrollHeight }"
+                    [itemSize]="virtualScrollItemSize"
+                    [autoSize]="true"
+                    [lazy]="lazy"
+                    [options]="virtualScrollOptions"
+                    (onLazyLoad)="onLazyLoad.emit($event)"
+                    [tabindex]="scrollerTabIndex"
+                >
+                    <ng-template #content let-items let-scrollerOptions="options">
+                        <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
+                    </ng-template>
+                    @if (loaderTemplate || _loaderTemplate) {
+                        <ng-template #loader let-scrollerOptions="options">
+                            <ng-container *ngTemplateOutlet="loaderTemplate || _loaderTemplate; context: { options: scrollerOptions }"></ng-container>
+                        </ng-template>
+                    }
+                </p-scroller>
+                <ng-container *ngIf="!virtualScroll">
+                    <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
+                </ng-container>
 
-                    <ng-template #buildInItems let-items let-scrollerOptions="options">
-                        <ul
-                            #list
-                            class="p-listbox-list"
-                            role="listbox"
-                            [tabindex]="-1"
-                            [attr.aria-multiselectable]="true"
-                            [ngClass]="scrollerOptions.contentStyleClass"
-                            [style]="scrollerOptions.contentStyle"
-                            [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
-                            [attr.aria-label]="ariaLabel"
-                            [attr.aria-disabled]="disabled"
-                            (focus)="onListFocus($event)"
-                            (blur)="onListBlur($event)"
-                            (keydown)="onListKeyDown($event)"
-                            cdkDropList
-                            [cdkDropListData]="items"
-                            (cdkDropListDropped)="drop($event)"
-                        >
-                            <ng-template ngFor let-option [ngForOf]="items" let-i="index">
-                                <ng-container *ngIf="isOptionGroup(option)">
-                                    <li
-                                        [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
-                                        class="p-listbox-option-group"
-                                        [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                        role="option"
-                                        cdkDrag
-                                        [cdkDragData]="option"
-                                        [cdkDragDisabled]="!dragdrop"
-                                    >
-                                        <span *ngIf="!groupTemplate && !_groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
-                                        <ng-container *ngTemplateOutlet="groupTemplate || _groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
-                                    </li>
-                                </ng-container>
-                                <ng-container *ngIf="!isOptionGroup(option)">
-                                    <li
-                                        pRipple
-                                        class="p-listbox-option"
-                                        role="option"
-                                        [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
-                                        [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                        [ngClass]="{
-                                            'p-listbox-option-selected': isSelected(option) && highlightOnSelect,
-                                            'p-focus': focusedOptionIndex() === getOptionIndex(i, scrollerOptions),
-                                            'p-disabled': isOptionDisabled(option)
-                                        }"
-                                        [attr.aria-label]="getOptionLabel(option)"
-                                        [attr.aria-selected]="isSelected(option)"
-                                        [attr.aria-disabled]="isOptionDisabled(option)"
-                                        [attr.aria-setsize]="ariaSetSize"
-                                        [attr.ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
-                                        (click)="onOptionSelect($event, option, getOptionIndex(i, scrollerOptions))"
-                                        (dblclick)="onOptionDoubleClick($event, option)"
-                                        (mousedown)="onOptionMouseDown($event, getOptionIndex(i, scrollerOptions))"
-                                        (mouseenter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
-                                        (touchend)="onOptionTouchEnd()"
-                                        cdkDrag
-                                        [cdkDragData]="option"
-                                        [cdkDragDisabled]="!dragdrop"
+                <ng-template #buildInItems let-items let-scrollerOptions="options">
+                    <ul
+                        #list
+                        [class]="cx('list')"
+                        role="listbox"
+                        [tabindex]="-1"
+                        [attr.aria-multiselectable]="true"
+                        [ngClass]="scrollerOptions.contentStyleClass"
+                        [style]="scrollerOptions.contentStyle"
+                        [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
+                        [attr.aria-label]="ariaLabel"
+                        [attr.aria-disabled]="disabled()"
+                        (focus)="onListFocus($event)"
+                        (blur)="onListBlur($event)"
+                        (keydown)="onListKeyDown($event)"
+                        cdkDropList
+                        [cdkDropListData]="items"
+                        (cdkDropListDropped)="drop($event)"
+                    >
+                        <ng-template ngFor let-option [ngForOf]="items" let-i="index">
+                            <ng-container *ngIf="isOptionGroup(option)">
+                                <li
+                                    [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
+                                    [class]="cx('optionGroup')"
+                                    [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                                    role="option"
+                                    cdkDrag
+                                    [cdkDragData]="option"
+                                    [cdkDragDisabled]="!dragdrop"
+                                >
+                                    <span *ngIf="!groupTemplate && !_groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
+                                    <ng-container *ngTemplateOutlet="groupTemplate || _groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
+                                </li>
+                            </ng-container>
+                            <ng-container *ngIf="!isOptionGroup(option)">
+                                <li
+                                    pRipple
+                                    [class]="cx('option', { option, i, scrollerOptions })"
+                                    role="option"
+                                    [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
+                                    [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                                    [attr.aria-label]="getOptionLabel(option)"
+                                    [attr.aria-selected]="isSelected(option)"
+                                    [attr.aria-disabled]="isOptionDisabled(option)"
+                                    [attr.aria-setsize]="ariaSetSize"
+                                    [attr.ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
+                                    [attr.data-pc-section]="'item'"
+                                    [attr.data-p-selected]="isSelected(option)"
+                                    (click)="onOptionSelect($event, option, getOptionIndex(i, scrollerOptions))"
+                                    (dblclick)="onOptionDoubleClick($event, option)"
+                                    (mousedown)="onOptionMouseDown($event, getOptionIndex(i, scrollerOptions))"
+                                    (mouseenter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
+                                    (touchend)="onOptionTouchEnd()"
+                                    cdkDrag
+                                    [cdkDragData]="option"
+                                    [cdkDragDisabled]="!dragdrop"
+                                >
+                                    <p-checkbox
+                                        *ngIf="checkbox && multiple"
+                                        [class]="cx('optionCheckIcon')"
+                                        [ngModel]="isSelected(option)"
+                                        [readonly]="true"
+                                        [disabled]="disabled() || isOptionDisabled(option)"
+                                        [tabindex]="-1"
+                                        [variant]="config.inputStyle() === 'filled' || config.inputVariant() === 'filled' ? 'filled' : 'outlined'"
+                                        [binary]="true"
                                     >
-                                        <p-checkbox
-                                            *ngIf="checkbox && multiple"
-                                            styleClass="p-listbox-option-check-icon"
-                                            [ngModel]="isSelected(option)"
-                                            [readonly]="true"
-                                            [disabled]="disabled || isOptionDisabled(option)"
-                                            [tabindex]="-1"
-                                            [variant]="config.inputStyle() === 'filled' || config.inputVariant() === 'filled' ? 'filled' : 'outlined'"
-                                            [binary]="true"
-                                        >
-                                            <ng-container *ngIf="checkIconTemplate || _checkIconTemplate">
-                                                <ng-template #icon>
-                                                    <ng-template *ngTemplateOutlet="checkIconTemplate || _checkIconTemplate; context: { $implicit: isSelected(option) }"></ng-template>
-                                                </ng-template>
-                                            </ng-container>
-                                        </p-checkbox>
-                                        <ng-container *ngIf="checkmark">
-                                            <ng-container *ngIf="!checkmarkTemplate && !_checkmarkTemplate">
-                                                <BlankIcon *ngIf="!isSelected(option)" styleClass="p-listbox-option-check-icon" />
-                                                <CheckIcon *ngIf="isSelected(option)" styleClass="p-listbox-option-check-icon" />
-                                            </ng-container>
-                                            <ng-container *ngTemplateOutlet="checkmarkTemplate || _checkmarkTemplate; context: { implicit: isSelected(option) }"></ng-container>
+                                        <ng-container *ngIf="checkIconTemplate || _checkIconTemplate">
+                                            <ng-template #icon>
+                                                <ng-template *ngTemplateOutlet="checkIconTemplate || _checkIconTemplate; context: { $implicit: isSelected(option) }"></ng-template>
+                                            </ng-template>
                                         </ng-container>
-                                        <span *ngIf="!itemTemplate && !_itemTemplate">{{ getOptionLabel(option) }}</span>
-                                        <ng-container
-                                            *ngTemplateOutlet="
-                                                itemTemplate || _itemTemplate;
-                                                context: {
-                                                    $implicit: option,
-                                                    index: getOptionIndex(i, scrollerOptions),
-                                                    selected: isSelected(option),
-                                                    disabled: isOptionDisabled(option)
-                                                }
-                                            "
-                                        ></ng-container>
-                                    </li>
-                                </ng-container>
-                            </ng-template>
-                        </ul>
-                    </ng-template>
-                }
-            </div>
-            <div class="p-listbox-footer" *ngIf="footerFacet || footerTemplate || _footerTemplate">
-                <ng-content select="p-footer"></ng-content>
-                <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }"></ng-container>
-            </div>
-            <span *ngIf="isEmpty()" role="status" aria-live="polite" class="p-hidden-accessible">
-                {{ emptyMessage }}
-            </span>
-            <span role="status" aria-live="polite" class="p-hidden-accessible">
-                {{ selectedMessageText }}
-            </span>
-            <span #lastHiddenFocusableElement role="presentation" class="p-hidden-accessible p-hidden-focusable" [tabindex]="!disabled ? tabindex : -1" (focus)="onLastHiddenFocus($event)" [attr.data-p-hidden-focusable]="true"> </span>
+                                    </p-checkbox>
+                                    <ng-container *ngIf="checkmark">
+                                        <ng-container *ngIf="!checkmarkTemplate && !_checkmarkTemplate">
+                                            <BlankIcon *ngIf="!isSelected(option)" [styleClass]="cx('optionBlankIcon')" />
+                                            <CheckIcon *ngIf="isSelected(option)" [styleClass]="cx('optionCheckIcon')" />
+                                        </ng-container>
+                                        <ng-container *ngTemplateOutlet="checkmarkTemplate || _checkmarkTemplate; context: { implicit: isSelected(option) }"></ng-container>
+                                    </ng-container>
+                                    <span *ngIf="!itemTemplate && !_itemTemplate">{{ getOptionLabel(option) }}</span>
+                                    <ng-container
+                                        *ngTemplateOutlet="
+                                            itemTemplate || _itemTemplate;
+                                            context: {
+                                                $implicit: option,
+                                                index: getOptionIndex(i, scrollerOptions),
+                                                selected: isSelected(option),
+                                                disabled: isOptionDisabled(option)
+                                            }
+                                        "
+                                    ></ng-container>
+                                </li>
+                            </ng-container>
+                        </ng-template>
+                    </ul>
+                </ng-template>
+            }
+        </div>
+        <div *ngIf="footerFacet || footerTemplate || _footerTemplate">
+            <ng-content select="p-footer"></ng-content>
+            <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }"></ng-container>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { 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: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type: SearchIcon, selector: "SearchIcon" }, { 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: "component", type: CheckIcon, selector: "CheckIcon" }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: BlankIcon, selector: "BlankIcon" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        <span *ngIf="isEmpty()" role="status" aria-live="polite" class="p-hidden-accessible">
+            {{ emptyMessage }}
+        </span>
+        <span role="status" aria-live="polite" class="p-hidden-accessible">
+            {{ selectedMessageText }}
+        </span>
+        <span #lastHiddenFocusableElement role="presentation" class="p-hidden-accessible p-hidden-focusable" [tabindex]="!disabled() ? tabindex : -1" (focus)="onLastHiddenFocus($event)" [attr.data-p-hidden-focusable]="true"> </span>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { 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: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type: SearchIcon, selector: "SearchIcon" }, { 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: "component", type: CheckIcon, selector: "CheckIcon" }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid"] }, { kind: "component", type: BlankIcon, selector: "BlankIcon" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: Listbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Listbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-listbox, p-listBox, p-list-box',
                     standalone: true,
                     imports: [CommonModule, Ripple, Scroller, InputIcon, SearchIcon, Checkbox, CheckIcon, IconField, InputText, BlankIcon, FormsModule, SharedModule, DragDropModule],
                     template: `
-        <div [attr.id]="id" [ngClass]="containerClass" [ngStyle]="style" [class]="styleClass" (focusout)="onFocusout($event)">
-            <span #firstHiddenFocusableElement role="presentation" class="p-hidden-accessible p-hidden-focusable" [tabindex]="!disabled ? tabindex : -1" (focus)="onFirstHiddenFocus($event)" [attr.data-p-hidden-focusable]="true"> </span>
-            <div class="p-listbox-header" *ngIf="headerFacet || headerTemplate || _headerTemplate">
-                <ng-content select="p-header"></ng-content>
-                <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }"></ng-container>
-            </div>
-            <div class="p-listbox-header" *ngIf="(checkbox && multiple && showToggleAll) || filter">
-                <div *ngIf="checkbox && multiple && showToggleAll" class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-disabled': disabled }" (click)="onToggleAll($event)" (keydown)="onHeaderCheckboxKeyDown($event)">
-                    <div class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
-                        <input #headerchkbox type="checkbox" readonly="readonly" [attr.checked]="allSelected()" [disabled]="disabled" (focus)="onHeaderCheckboxFocus($event)" (blur)="onHeaderCheckboxBlur()" [attr.aria-label]="toggleAllAriaLabel" />
-                    </div>
-                    <p-checkbox
-                        *ngIf="checkbox && multiple"
-                        styleClass="p-listbox-option-check-icon"
-                        [ngModel]="allSelected()"
-                        [disabled]="disabled"
-                        [tabindex]="-1"
-                        [variant]="config.inputStyle() === 'filled' || config.inputVariant() === 'filled' ? 'filled' : 'outlined'"
-                        [binary]="true"
-                    >
-                        <ng-container *ngIf="checkIconTemplate || _checkIconTemplate">
-                            <ng-template #icon>
-                                <ng-template *ngTemplateOutlet="checkIconTemplate || _checkIconTemplate; context: { $implicit: allSelected() }"></ng-template>
-                            </ng-template>
-                        </ng-container>
-                    </p-checkbox>
+        <span #firstHiddenFocusableElement role="presentation" class="p-hidden-accessible p-hidden-focusable" [tabindex]="!disabled() ? tabindex : -1" (focus)="onFirstHiddenFocus($event)" [attr.data-p-hidden-focusable]="true"> </span>
+        <div [class]="cx('header')" *ngIf="headerFacet || headerTemplate || _headerTemplate">
+            <ng-content select="p-header"></ng-content>
+            <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }"></ng-container>
+        </div>
+        <div [class]="cx('header')" *ngIf="(checkbox && multiple && showToggleAll) || filter">
+            <div *ngIf="checkbox && multiple && showToggleAll" class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-disabled': disabled() }" (click)="onToggleAll($event)" (keydown)="onHeaderCheckboxKeyDown($event)">
+                <div class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
+                    <input
+                        #headerchkbox
+                        type="checkbox"
+                        readonly="readonly"
+                        [attr.checked]="allSelected()"
+                        [attr.disabled]="disabled() ? '' : undefined"
+                        (focus)="onHeaderCheckboxFocus($event)"
+                        (blur)="onHeaderCheckboxBlur()"
+                        [attr.aria-label]="toggleAllAriaLabel"
+                    />
                 </div>
-                <ng-container *ngIf="filterTemplate || _filterTemplate; else builtInFilterElement">
-                    <ng-container *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { options: filterOptions }"></ng-container>
-                </ng-container>
-                <ng-template #builtInFilterElement>
-                    <div class="p-listbox-filter-container" *ngIf="filter">
-                        <p-iconfield>
-                            <input
-                                #filterInput
-                                pInputText
-                                type="text"
-                                class="p-listbox-filter"
-                                role="searchbox"
-                                [value]="_filterValue() || ''"
-                                [disabled]="disabled"
-                                [attr.aria-owns]="id + '_list'"
-                                [attr.aria-activedescendant]="focusedOptionId"
-                                [attr.placeholder]="filterPlaceHolder"
-                                [attr.aria-label]="ariaFilterLabel"
-                                [tabindex]="!disabled && !focused ? tabindex : -1"
-                                (input)="onFilterChange($event)"
-                                (keydown)="onFilterKeyDown($event)"
-                                (focus)="onFilterFocus($event)"
-                                (blur)="onFilterBlur($event)"
-                            />
-                            <p-inputicon>
-                                <SearchIcon *ngIf="!filterIconTemplate && !_filterIconTemplate" [styleClass]="'p-listbox-filter-icon'" [attr.aria-hidden]="true" />
-                                <span *ngIf="filterIconTemplate || _filterIconTemplate" class="p-listbox-filter-icon" [attr.aria-hidden]="true">
-                                    <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
-                                </span>
-                            </p-inputicon>
-                        </p-iconfield>
-                    </div>
-                    <span role="status" attr.aria-live="polite" class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
-                        {{ filterResultMessageText }}
-                    </span>
-                </ng-template>
-            </div>
-            <div [ngClass]="'p-listbox-list-container'" #container [ngStyle]="listStyle" [class]="listStyleClass" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'" [attr.tabindex]="!disabled && '0'">
-                @if (hasFilter() && isEmpty()) {
-                    <div class="p-listbox-empty-message" [cdkDropListData]="$any([])" (cdkDropListDropped)="drop($event)" cdkDropList>
-                        @if (!emptyFilterTemplate && !_emptyFilterTemplate && !_emptyTemplate && !emptyTemplate) {
-                            {{ emptyFilterMessageText }}
-                        } @else {
-                            <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || _emptyFilterTemplate || _emptyTemplate || emptyTemplate"></ng-container>
-                        }
-                    </div>
-                } @else if (!hasFilter() && isEmpty()) {
-                    <div class="p-listbox-empty-message" [cdkDropListData]="$any([])" (cdkDropListDropped)="drop($event)" cdkDropList>
-                        @if (!emptyTemplate && !_emptyTemplate) {
-                            {{ emptyMessage }}
-                        } @else {
-                            <ng-container #empty *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
-                        }
-                    </div>
-                } @else {
-                    <p-scroller
-                        #scroller
-                        *ngIf="virtualScroll"
-                        [items]="visibleOptions()"
-                        [style]="{ height: scrollHeight }"
-                        [itemSize]="virtualScrollItemSize"
-                        [autoSize]="true"
-                        [lazy]="lazy"
-                        [options]="virtualScrollOptions"
-                        (onLazyLoad)="onLazyLoad.emit($event)"
-                        [tabindex]="scrollerTabIndex"
-                    >
-                        <ng-template #content let-items let-scrollerOptions="options">
-                            <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
+                <p-checkbox
+                    *ngIf="checkbox && multiple"
+                    [class]="cx('optionCheckIcon')"
+                    [ngModel]="allSelected()"
+                    [disabled]="disabled()"
+                    [tabindex]="-1"
+                    [variant]="config.inputStyle() === 'filled' || config.inputVariant() === 'filled' ? 'filled' : 'outlined'"
+                    [binary]="true"
+                >
+                    <ng-container *ngIf="checkIconTemplate || _checkIconTemplate">
+                        <ng-template #icon>
+                            <ng-template *ngTemplateOutlet="checkIconTemplate || _checkIconTemplate; context: { $implicit: allSelected() }"></ng-template>
                         </ng-template>
-                        @if (loaderTemplate || _loaderTemplate) {
-                            <ng-template #loader let-scrollerOptions="options">
-                                <ng-container *ngTemplateOutlet="loaderTemplate || _loaderTemplate; context: { options: scrollerOptions }"></ng-container>
-                            </ng-template>
-                        }
-                    </p-scroller>
-                    <ng-container *ngIf="!virtualScroll">
-                        <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
                     </ng-container>
+                </p-checkbox>
+            </div>
+            <ng-container *ngIf="filterTemplate || _filterTemplate; else builtInFilterElement">
+                <ng-container *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { options: filterOptions }"></ng-container>
+            </ng-container>
+            <ng-template #builtInFilterElement>
+                <div *ngIf="filter">
+                    <p-iconfield>
+                        <input
+                            #filterInput
+                            pInputText
+                            type="text"
+                            [class]="cx('pcFilter')"
+                            role="searchbox"
+                            [value]="_filterValue() || ''"
+                            [attr.disabled]="disabled() ? '' : undefined"
+                            [attr.aria-owns]="id + '_list'"
+                            [attr.aria-activedescendant]="focusedOptionId"
+                            [attr.placeholder]="filterPlaceHolder"
+                            [attr.aria-label]="ariaFilterLabel"
+                            [attr.tabindex]="!disabled() && !focused ? tabindex : -1"
+                            (input)="onFilterChange($event)"
+                            (keydown)="onFilterKeyDown($event)"
+                            (blur)="onFilterBlur($event)"
+                        />
+                        <p-inputicon>
+                            <SearchIcon *ngIf="!filterIconTemplate && !_filterIconTemplate" [attr.aria-hidden]="true" />
+                            <span *ngIf="filterIconTemplate || _filterIconTemplate" [attr.aria-hidden]="true">
+                                <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
+                            </span>
+                        </p-inputicon>
+                    </p-iconfield>
+                </div>
+                <span role="status" [attr.aria-live]="'polite'" class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
+                    {{ filterResultMessageText }}
+                </span>
+            </ng-template>
+        </div>
+        <div #container [class]="cn(cx('listContainer'), listStyleClass)" [ngStyle]="listStyle" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
+            @if (hasFilter() && isEmpty()) {
+                <div [class]="cx('emptyMessage')" [cdkDropListData]="$any([])" (cdkDropListDropped)="drop($event)" cdkDropList>
+                    @if (!emptyFilterTemplate && !_emptyFilterTemplate && !_emptyTemplate && !emptyTemplate) {
+                        {{ emptyFilterMessageText }}
+                    } @else {
+                        <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || _emptyFilterTemplate || _emptyTemplate || emptyTemplate"></ng-container>
+                    }
+                </div>
+            } @else if (!hasFilter() && isEmpty()) {
+                <div [class]="cx('emptyMessage')" [cdkDropListData]="$any([])" (cdkDropListDropped)="drop($event)" cdkDropList>
+                    @if (!emptyTemplate && !_emptyTemplate) {
+                        {{ emptyMessage }}
+                    } @else {
+                        <ng-container #empty *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
+                    }
+                </div>
+            } @else {
+                <p-scroller
+                    #scroller
+                    *ngIf="virtualScroll"
+                    [items]="visibleOptions()"
+                    [style]="{ height: scrollHeight }"
+                    [itemSize]="virtualScrollItemSize"
+                    [autoSize]="true"
+                    [lazy]="lazy"
+                    [options]="virtualScrollOptions"
+                    (onLazyLoad)="onLazyLoad.emit($event)"
+                    [tabindex]="scrollerTabIndex"
+                >
+                    <ng-template #content let-items let-scrollerOptions="options">
+                        <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
+                    </ng-template>
+                    @if (loaderTemplate || _loaderTemplate) {
+                        <ng-template #loader let-scrollerOptions="options">
+                            <ng-container *ngTemplateOutlet="loaderTemplate || _loaderTemplate; context: { options: scrollerOptions }"></ng-container>
+                        </ng-template>
+                    }
+                </p-scroller>
+                <ng-container *ngIf="!virtualScroll">
+                    <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
+                </ng-container>
 
-                    <ng-template #buildInItems let-items let-scrollerOptions="options">
-                        <ul
-                            #list
-                            class="p-listbox-list"
-                            role="listbox"
-                            [tabindex]="-1"
-                            [attr.aria-multiselectable]="true"
-                            [ngClass]="scrollerOptions.contentStyleClass"
-                            [style]="scrollerOptions.contentStyle"
-                            [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
-                            [attr.aria-label]="ariaLabel"
-                            [attr.aria-disabled]="disabled"
-                            (focus)="onListFocus($event)"
-                            (blur)="onListBlur($event)"
-                            (keydown)="onListKeyDown($event)"
-                            cdkDropList
-                            [cdkDropListData]="items"
-                            (cdkDropListDropped)="drop($event)"
-                        >
-                            <ng-template ngFor let-option [ngForOf]="items" let-i="index">
-                                <ng-container *ngIf="isOptionGroup(option)">
-                                    <li
-                                        [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
-                                        class="p-listbox-option-group"
-                                        [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                        role="option"
-                                        cdkDrag
-                                        [cdkDragData]="option"
-                                        [cdkDragDisabled]="!dragdrop"
-                                    >
-                                        <span *ngIf="!groupTemplate && !_groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
-                                        <ng-container *ngTemplateOutlet="groupTemplate || _groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
-                                    </li>
-                                </ng-container>
-                                <ng-container *ngIf="!isOptionGroup(option)">
-                                    <li
-                                        pRipple
-                                        class="p-listbox-option"
-                                        role="option"
-                                        [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
-                                        [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                        [ngClass]="{
-                                            'p-listbox-option-selected': isSelected(option) && highlightOnSelect,
-                                            'p-focus': focusedOptionIndex() === getOptionIndex(i, scrollerOptions),
-                                            'p-disabled': isOptionDisabled(option)
-                                        }"
-                                        [attr.aria-label]="getOptionLabel(option)"
-                                        [attr.aria-selected]="isSelected(option)"
-                                        [attr.aria-disabled]="isOptionDisabled(option)"
-                                        [attr.aria-setsize]="ariaSetSize"
-                                        [attr.ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
-                                        (click)="onOptionSelect($event, option, getOptionIndex(i, scrollerOptions))"
-                                        (dblclick)="onOptionDoubleClick($event, option)"
-                                        (mousedown)="onOptionMouseDown($event, getOptionIndex(i, scrollerOptions))"
-                                        (mouseenter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
-                                        (touchend)="onOptionTouchEnd()"
-                                        cdkDrag
-                                        [cdkDragData]="option"
-                                        [cdkDragDisabled]="!dragdrop"
+                <ng-template #buildInItems let-items let-scrollerOptions="options">
+                    <ul
+                        #list
+                        [class]="cx('list')"
+                        role="listbox"
+                        [tabindex]="-1"
+                        [attr.aria-multiselectable]="true"
+                        [ngClass]="scrollerOptions.contentStyleClass"
+                        [style]="scrollerOptions.contentStyle"
+                        [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
+                        [attr.aria-label]="ariaLabel"
+                        [attr.aria-disabled]="disabled()"
+                        (focus)="onListFocus($event)"
+                        (blur)="onListBlur($event)"
+                        (keydown)="onListKeyDown($event)"
+                        cdkDropList
+                        [cdkDropListData]="items"
+                        (cdkDropListDropped)="drop($event)"
+                    >
+                        <ng-template ngFor let-option [ngForOf]="items" let-i="index">
+                            <ng-container *ngIf="isOptionGroup(option)">
+                                <li
+                                    [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
+                                    [class]="cx('optionGroup')"
+                                    [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                                    role="option"
+                                    cdkDrag
+                                    [cdkDragData]="option"
+                                    [cdkDragDisabled]="!dragdrop"
+                                >
+                                    <span *ngIf="!groupTemplate && !_groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
+                                    <ng-container *ngTemplateOutlet="groupTemplate || _groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
+                                </li>
+                            </ng-container>
+                            <ng-container *ngIf="!isOptionGroup(option)">
+                                <li
+                                    pRipple
+                                    [class]="cx('option', { option, i, scrollerOptions })"
+                                    role="option"
+                                    [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
+                                    [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                                    [attr.aria-label]="getOptionLabel(option)"
+                                    [attr.aria-selected]="isSelected(option)"
+                                    [attr.aria-disabled]="isOptionDisabled(option)"
+                                    [attr.aria-setsize]="ariaSetSize"
+                                    [attr.ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
+                                    [attr.data-pc-section]="'item'"
+                                    [attr.data-p-selected]="isSelected(option)"
+                                    (click)="onOptionSelect($event, option, getOptionIndex(i, scrollerOptions))"
+                                    (dblclick)="onOptionDoubleClick($event, option)"
+                                    (mousedown)="onOptionMouseDown($event, getOptionIndex(i, scrollerOptions))"
+                                    (mouseenter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
+                                    (touchend)="onOptionTouchEnd()"
+                                    cdkDrag
+                                    [cdkDragData]="option"
+                                    [cdkDragDisabled]="!dragdrop"
+                                >
+                                    <p-checkbox
+                                        *ngIf="checkbox && multiple"
+                                        [class]="cx('optionCheckIcon')"
+                                        [ngModel]="isSelected(option)"
+                                        [readonly]="true"
+                                        [disabled]="disabled() || isOptionDisabled(option)"
+                                        [tabindex]="-1"
+                                        [variant]="config.inputStyle() === 'filled' || config.inputVariant() === 'filled' ? 'filled' : 'outlined'"
+                                        [binary]="true"
                                     >
-                                        <p-checkbox
-                                            *ngIf="checkbox && multiple"
-                                            styleClass="p-listbox-option-check-icon"
-                                            [ngModel]="isSelected(option)"
-                                            [readonly]="true"
-                                            [disabled]="disabled || isOptionDisabled(option)"
-                                            [tabindex]="-1"
-                                            [variant]="config.inputStyle() === 'filled' || config.inputVariant() === 'filled' ? 'filled' : 'outlined'"
-                                            [binary]="true"
-                                        >
-                                            <ng-container *ngIf="checkIconTemplate || _checkIconTemplate">
-                                                <ng-template #icon>
-                                                    <ng-template *ngTemplateOutlet="checkIconTemplate || _checkIconTemplate; context: { $implicit: isSelected(option) }"></ng-template>
-                                                </ng-template>
-                                            </ng-container>
-                                        </p-checkbox>
-                                        <ng-container *ngIf="checkmark">
-                                            <ng-container *ngIf="!checkmarkTemplate && !_checkmarkTemplate">
-                                                <BlankIcon *ngIf="!isSelected(option)" styleClass="p-listbox-option-check-icon" />
-                                                <CheckIcon *ngIf="isSelected(option)" styleClass="p-listbox-option-check-icon" />
-                                            </ng-container>
-                                            <ng-container *ngTemplateOutlet="checkmarkTemplate || _checkmarkTemplate; context: { implicit: isSelected(option) }"></ng-container>
+                                        <ng-container *ngIf="checkIconTemplate || _checkIconTemplate">
+                                            <ng-template #icon>
+                                                <ng-template *ngTemplateOutlet="checkIconTemplate || _checkIconTemplate; context: { $implicit: isSelected(option) }"></ng-template>
+                                            </ng-template>
                                         </ng-container>
-                                        <span *ngIf="!itemTemplate && !_itemTemplate">{{ getOptionLabel(option) }}</span>
-                                        <ng-container
-                                            *ngTemplateOutlet="
-                                                itemTemplate || _itemTemplate;
-                                                context: {
-                                                    $implicit: option,
-                                                    index: getOptionIndex(i, scrollerOptions),
-                                                    selected: isSelected(option),
-                                                    disabled: isOptionDisabled(option)
-                                                }
-                                            "
-                                        ></ng-container>
-                                    </li>
-                                </ng-container>
-                            </ng-template>
-                        </ul>
-                    </ng-template>
-                }
-            </div>
-            <div class="p-listbox-footer" *ngIf="footerFacet || footerTemplate || _footerTemplate">
-                <ng-content select="p-footer"></ng-content>
-                <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }"></ng-container>
-            </div>
-            <span *ngIf="isEmpty()" role="status" aria-live="polite" class="p-hidden-accessible">
-                {{ emptyMessage }}
-            </span>
-            <span role="status" aria-live="polite" class="p-hidden-accessible">
-                {{ selectedMessageText }}
-            </span>
-            <span #lastHiddenFocusableElement role="presentation" class="p-hidden-accessible p-hidden-focusable" [tabindex]="!disabled ? tabindex : -1" (focus)="onLastHiddenFocus($event)" [attr.data-p-hidden-focusable]="true"> </span>
+                                    </p-checkbox>
+                                    <ng-container *ngIf="checkmark">
+                                        <ng-container *ngIf="!checkmarkTemplate && !_checkmarkTemplate">
+                                            <BlankIcon *ngIf="!isSelected(option)" [styleClass]="cx('optionBlankIcon')" />
+                                            <CheckIcon *ngIf="isSelected(option)" [styleClass]="cx('optionCheckIcon')" />
+                                        </ng-container>
+                                        <ng-container *ngTemplateOutlet="checkmarkTemplate || _checkmarkTemplate; context: { implicit: isSelected(option) }"></ng-container>
+                                    </ng-container>
+                                    <span *ngIf="!itemTemplate && !_itemTemplate">{{ getOptionLabel(option) }}</span>
+                                    <ng-container
+                                        *ngTemplateOutlet="
+                                            itemTemplate || _itemTemplate;
+                                            context: {
+                                                $implicit: option,
+                                                index: getOptionIndex(i, scrollerOptions),
+                                                selected: isSelected(option),
+                                                disabled: isOptionDisabled(option)
+                                            }
+                                        "
+                                    ></ng-container>
+                                </li>
+                            </ng-container>
+                        </ng-template>
+                    </ul>
+                </ng-template>
+            }
         </div>
+        <div *ngIf="footerFacet || footerTemplate || _footerTemplate">
+            <ng-content select="p-footer"></ng-content>
+            <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }"></ng-container>
+        </div>
+        <span *ngIf="isEmpty()" role="status" aria-live="polite" class="p-hidden-accessible">
+            {{ emptyMessage }}
+        </span>
+        <span role="status" aria-live="polite" class="p-hidden-accessible">
+            {{ selectedMessageText }}
+        </span>
+        <span #lastHiddenFocusableElement role="presentation" class="p-hidden-accessible p-hidden-focusable" [tabindex]="!disabled() ? tabindex : -1" (focus)="onLastHiddenFocus($event)" [attr.data-p-hidden-focusable]="true"> </span>
     `,
                     providers: [
                         LISTBOX_VALUE_ACCESSOR,
@@ -1833,7 +1724,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         }
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[attr.id]': 'id',
+                        '[class]': "cn(cx('root'), styleClass)"
+                    }
                 }]
         }], ctorParameters: () => [{ type: i1.FilterService }], propDecorators: { id: [{
                 type: Input
@@ -1880,8 +1775,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }], multiple: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], style: [{
-                type: Input
             }], styleClass: [{
                 type: Input
             }], listStyle: [{
@@ -1891,9 +1784,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }], readonly: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], checkbox: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -2034,13 +1924,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
+            }], onHostFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
             }] } });
 class ListboxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ListboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: ListboxModule, imports: [Listbox, SharedModule], exports: [Listbox, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ListboxModule, imports: [Listbox, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ListboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: ListboxModule, imports: [Listbox, SharedModule], exports: [Listbox, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ListboxModule, imports: [Listbox, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ListboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ListboxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Listbox, SharedModule],