primeng 20.3.0 → 21.0.0-rc.1

package/fesm2022/primeng-listbox.mjs

@@ -70,7 +70,8 @@ const classes = {
             'p-listbox-striped': instance.striped,
             'p-disabled': instance.$disabled(),
             'p-invalid': instance.invalid(),
-            'p-listbox-fluid': instance.fluid()
+            'p-listbox-fluid': instance.fluid(),
+            'p-listbox-dragging': instance.isDragging()
         }
     ],
     header: 'p-listbox-header',
@@ -94,10 +95,10 @@ class ListBoxStyle extends BaseStyle {
     name = 'listbox';
     style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ListBoxStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ListBoxStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ListBoxStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ListBoxStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ListBoxStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ListBoxStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -438,13 +439,13 @@ class Listbox extends BaseEditableHolder {
      */
     cdkDropData = computed(() => {
         return this.dropListData || this._options();
-    }, ...(ngDevMode ? [{ debugName: "cdkDropData" }] : []));
+    }, { ...(ngDevMode ? { debugName: "cdkDropData" } : {}) });
     /**
      * Spans 100% width of the container when enabled.
      * @defaultValue undefined
      * @group Props
      */
-    fluid = input(undefined, ...(ngDevMode ? [{ debugName: "fluid", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    fluid = input(undefined, { ...(ngDevMode ? { debugName: "fluid" } : {}), transform: booleanAttribute });
     /**
      * Callback to invoke on value change.
      * @param {ListboxChangeEvent} event - Custom change event.
@@ -510,26 +511,36 @@ class Listbox extends BaseEditableHolder {
     footerFacet;
     /**
      * Custom item template.
+     * @param {ListboxItemTemplateContext} context - item context.
+     * @see {@link ListboxItemTemplateContext}
      * @group Templates
      */
     itemTemplate;
     /**
      * Custom group template.
+     * @param {ListboxGroupTemplateContext} context - group context.
+     * @see {@link ListboxGroupTemplateContext}
      * @group Templates
      */
     groupTemplate;
     /**
      * Custom header template.
+     * @param {ListboxHeaderTemplateContext} context - header context.
+     * @see {@link ListboxHeaderTemplateContext}
      * @group Templates
      */
     headerTemplate;
     /**
      * Custom filter template.
+     * @param {ListboxFilterTemplateContext} context - filter context.
+     * @see {@link ListboxFilterTemplateContext}
      * @group Templates
      */
     filterTemplate;
     /**
      * Custom footer template.
+     * @param {ListboxFooterTemplateContext} context - footer context.
+     * @see {@link ListboxFooterTemplateContext}
      * @group Templates
      */
     footerTemplate;
@@ -550,16 +561,22 @@ class Listbox extends BaseEditableHolder {
     filterIconTemplate;
     /**
      * Custom check icon template.
+     * @param {ListboxCheckIconTemplateContext} context - check icon context.
+     * @see {@link ListboxCheckIconTemplateContext}
      * @group Templates
      */
     checkIconTemplate;
     /**
      * Custom checkmark icon template.
+     * @param {ListboxCheckmarkTemplateContext} context - checkmark context.
+     * @see {@link ListboxCheckmarkTemplateContext}
      * @group Templates
      */
     checkmarkTemplate;
     /**
      * Custom loader template.
+     * @param {ListboxLoaderTemplateContext} context - loader context.
+     * @see {@link ListboxLoaderTemplateContext}
      * @group Templates
      */
     loaderTemplate;
@@ -575,7 +592,7 @@ class Listbox extends BaseEditableHolder {
     _checkIconTemplate;
     _checkmarkTemplate;
     _loaderTemplate;
-    _filterValue = signal(null, ...(ngDevMode ? [{ debugName: "_filterValue" }] : []));
+    _filterValue = signal(null, { ...(ngDevMode ? { debugName: "_filterValue" } : {}) });
     _filteredOptions;
     filterOptions;
     filtered;
@@ -626,17 +643,17 @@ class Listbox extends BaseEditableHolder {
     searchValue;
     searchTimeout;
     _selectAll = null;
-    _options = signal(null, ...(ngDevMode ? [{ debugName: "_options" }] : []));
-    startRangeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "startRangeIndex" }] : []));
-    focusedOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedOptionIndex" }] : []));
-    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    _options = signal(null, { ...(ngDevMode ? { debugName: "_options" } : {}) });
+    startRangeIndex = signal(-1, { ...(ngDevMode ? { debugName: "startRangeIndex" } : {}) });
+    focusedOptionIndex = signal(-1, { ...(ngDevMode ? { debugName: "focusedOptionIndex" } : {}) });
+    isDragging = signal(false, { ...(ngDevMode ? { debugName: "isDragging" } : {}) });
     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;
-    }, ...(ngDevMode ? [{ debugName: "visibleOptions" }] : []));
+    }, { ...(ngDevMode ? { debugName: "visibleOptions" } : {}) });
     constructor(filterService) {
         super();
         this.filterService = filterService;
@@ -848,7 +865,7 @@ class Listbox extends BaseEditableHolder {
     onLastHiddenFocus(event) {
         const relatedTarget = event.relatedTarget;
         if (relatedTarget === this.listViewChild?.nativeElement) {
-            const firstFocusableEl = getFirstFocusableElement(this.el?.nativeElement, ':not(.p-hidden-focusable)');
+            const firstFocusableEl = getFirstFocusableElement(this.el?.nativeElement, ':not([data-p-hidden-focusable="true"])');
             focus(firstFocusableEl);
             this.firstHiddenFocusableElement?.nativeElement && (this.firstHiddenFocusableElement.nativeElement.tabIndex = undefined);
         }
@@ -1275,9 +1292,11 @@ class Listbox extends BaseEditableHolder {
     }
     onDragEntered() {
         this.isDragging.set(true);
+        this.el.nativeElement.setAttribute('p-listbox-dragging', 'true');
     }
     onDragExited() {
         this.isDragging.set(false);
+        this.el.nativeElement.setAttribute('p-listbox-dragging', 'false');
     }
     drop(event) {
         this.isDragging.set(false);
@@ -1287,6 +1306,7 @@ class Listbox extends BaseEditableHolder {
                 const currentOptions = [...this._options()];
                 moveItemInArray(currentOptions, event.previousIndex, event.currentIndex);
                 this._options.set(currentOptions);
+                this.changeFocusedOptionIndex(event, event.currentIndex);
                 // Update model value if needed for selection preservation
                 if (this.modelValue()) {
                     this.writeModelValue(this.modelValue());
@@ -1299,6 +1319,12 @@ class Listbox extends BaseEditableHolder {
             this.onDrop.emit(event);
         }
     }
+    get containerDataP() {
+        return this.cn({
+            invalid: this.invalid(),
+            disabled: this.$disabled()
+        });
+    }
     /**
      * @override
      *
@@ -1315,8 +1341,8 @@ class Listbox extends BaseEditableHolder {
             this.translationSubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Listbox, deps: [{ token: i1.FilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: Listbox, isStandalone: true, selector: "p-listbox, p-listBox, p-list-box", inputs: { hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: false, isRequired: false, transformFunction: null }, 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 }, dropListData: { classPropertyName: "dropListData", publicName: "dropListData", isSignal: false, isRequired: false, transformFunction: null }, 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, { 'p-listbox-dragging': isDragging() })" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Listbox, deps: [{ token: i1.FilterService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: Listbox, isStandalone: true, selector: "p-listbox, p-listBox, p-list-box", inputs: { hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: false, isRequired: false, transformFunction: null }, 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 }, dropListData: { classPropertyName: "dropListData", publicName: "dropListData", isSignal: false, isRequired: false, transformFunction: null }, 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)", "attr.data-p": "containerDataP" } }, providers: [
             LISTBOX_VALUE_ACCESSOR,
             ListBoxStyle,
             {
@@ -1355,6 +1381,7 @@ class Listbox extends BaseEditableHolder {
                 [binary]="true"
                 [attr.aria-label]="toggleAllAriaLabel"
                 [pt]="ptm('pcCheckbox')"
+                [unstyled]="unstyled()"
             >
                 <ng-container *ngIf="checkIconTemplate || _checkIconTemplate">
                     <ng-template #icon>
@@ -1367,7 +1394,7 @@ class Listbox extends BaseEditableHolder {
             </ng-container>
             <ng-template #builtInFilterElement>
                 @if (filter) {
-                    <p-iconfield [pt]="ptm('pcFilterContainer')" hostName="listbox">
+                    <p-iconfield [pt]="ptm('pcFilterContainer')" hostName="listbox" [unstyled]="unstyled()">
                         <input
                             #filterInput
                             pInputText
@@ -1385,9 +1412,10 @@ class Listbox extends BaseEditableHolder {
                             (keydown)="onFilterKeyDown($event)"
                             (blur)="onFilterBlur($event)"
                             [pt]="ptm('pcFilter')"
+                            [unstyled]="unstyled()"
                             hostName="listbox"
                         />
-                        <p-inputicon [pt]="ptm('pcFilterIconContainer')">
+                        <p-inputicon [pt]="ptm('pcFilterIconContainer')" [unstyled]="unstyled()">
                             <svg data-p-icon="search" *ngIf="!filterIconTemplate && !_filterIconTemplate" [attr.aria-hidden]="true" [pBind]="ptm('filterIcon')" />
                             <span *ngIf="filterIconTemplate || _filterIconTemplate" [attr.aria-hidden]="true">
                                 <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
@@ -1530,6 +1558,7 @@ class Listbox extends BaseEditableHolder {
                                         [binary]="true"
                                         [pt]="ptm('pcCheckbox')"
                                         hostName="listbox"
+                                        [unstyled]="unstyled()"
                                     >
                                         <ng-container *ngIf="checkIconTemplate || _checkIconTemplate">
                                             <ng-template #icon>
@@ -1583,9 +1612,9 @@ class Listbox extends BaseEditableHolder {
             [pBind]="ptm('hiddenLastFocusableEl')"
         >
         </span>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.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: ["hostName", "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: ["hostName", "styleClass"] }, { kind: "component", type: SearchIcon, selector: "[data-p-icon=\"search\"]" }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "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: "[data-p-icon=\"check\"]" }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: BlankIcon, selector: "[data-p-icon=\"blank\"]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.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"] }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i2.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.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: ["hostName", "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: ["hostName", "styleClass"] }, { kind: "component", type: SearchIcon, selector: "[data-p-icon=\"search\"]" }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "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: "[data-p-icon=\"check\"]" }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: BlankIcon, selector: "[data-p-icon=\"blank\"]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.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"] }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i2.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Listbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Listbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-listbox, p-listBox, p-list-box',
@@ -1619,6 +1648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 [binary]="true"
                 [attr.aria-label]="toggleAllAriaLabel"
                 [pt]="ptm('pcCheckbox')"
+                [unstyled]="unstyled()"
             >
                 <ng-container *ngIf="checkIconTemplate || _checkIconTemplate">
                     <ng-template #icon>
@@ -1631,7 +1661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             </ng-container>
             <ng-template #builtInFilterElement>
                 @if (filter) {
-                    <p-iconfield [pt]="ptm('pcFilterContainer')" hostName="listbox">
+                    <p-iconfield [pt]="ptm('pcFilterContainer')" hostName="listbox" [unstyled]="unstyled()">
                         <input
                             #filterInput
                             pInputText
@@ -1649,9 +1679,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                             (keydown)="onFilterKeyDown($event)"
                             (blur)="onFilterBlur($event)"
                             [pt]="ptm('pcFilter')"
+                            [unstyled]="unstyled()"
                             hostName="listbox"
                         />
-                        <p-inputicon [pt]="ptm('pcFilterIconContainer')">
+                        <p-inputicon [pt]="ptm('pcFilterIconContainer')" [unstyled]="unstyled()">
                             <svg data-p-icon="search" *ngIf="!filterIconTemplate && !_filterIconTemplate" [attr.aria-hidden]="true" [pBind]="ptm('filterIcon')" />
                             <span *ngIf="filterIconTemplate || _filterIconTemplate" [attr.aria-hidden]="true">
                                 <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
@@ -1794,6 +1825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                                         [binary]="true"
                                         [pt]="ptm('pcCheckbox')"
                                         hostName="listbox"
+                                        [unstyled]="unstyled()"
                                     >
                                         <ng-container *ngIf="checkIconTemplate || _checkIconTemplate">
                                             <ng-template #icon>
@@ -1864,7 +1896,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         '[attr.id]': 'id',
-                        '[class]': "cn(cx('root'), styleClass, { 'p-listbox-dragging': isDragging() })"
+                        '[class]': "cn(cx('root'), styleClass)",
+                        '[attr.data-p]': 'containerDataP'
                     },
                     hostDirectives: [Bind]
                 }]
@@ -1985,7 +2018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: [{ transform: booleanAttribute }]
             }], dropListData: [{
                 type: Input
-            }], onChange: [{
+            }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], onChange: [{
                 type: Output
             }], onClick: [{
                 type: Output
@@ -2071,11 +2104,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['focusout', ['$event']]
             }] } });
 class ListboxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ListboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: ListboxModule, imports: [Listbox, SharedModule], exports: [Listbox, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ListboxModule, imports: [Listbox, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ListboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: ListboxModule, imports: [Listbox, SharedModule], exports: [Listbox, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ListboxModule, imports: [Listbox, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ListboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ListboxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Listbox, SharedModule],