primeng 20.1.2 → 20.2.0

package/fesm2022/primeng-listbox.mjs

@@ -1,9 +1,9 @@
 import * as i4 from '@angular/cdk/drag-drop';
-import { DragDropModule, CDK_DRAG_CONFIG } from '@angular/cdk/drag-drop';
+import { moveItemInArray, 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, input, booleanAttribute, EventEmitter, signal, inject, computed, numberAttribute, HostListener, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, forwardRef, computed, input, booleanAttribute, EventEmitter, signal, inject, 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';
@@ -36,6 +36,28 @@ const theme = /*css*/ `
     .p-listbox-header > .p-iconfield {
         flex-grow: 1;
     }
+
+    .p-listbox-list-container {
+        height: 100%;
+    }
+
+    /* CDK Drag & Drop styles */
+    .p-listbox-option.cdk-drag-preview {
+        background: dt('listbox.background');
+    }
+
+    .p-listbox-dragging .p-listbox-option:not(.cdk-drag-preview) {
+        pointer-events: none !important;
+    }
+
+    .p-listbox-dragging .p-listbox-option:not(.cdk-drag-preview):hover {
+        background: inherit !important;
+        color: inherit !important;
+    }
+
+    .cdk-drag-placeholder { 
+        pointer-events: none;
+    }
 `;
 const classes = {
     root: ({ instance }) => [
@@ -68,10 +90,10 @@ class ListBoxStyle extends BaseStyle {
     name = 'listbox';
     theme = theme;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListBoxStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListBoxStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ListBoxStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ListBoxStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListBoxStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ListBoxStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -357,7 +379,7 @@ class Listbox extends BaseEditableHolder {
      * @group Props
      */
     get filterValue() {
-        return this._filterValue();
+        return this._filterValue() || '';
     }
     set filterValue(val) {
         this._filterValue.set(val);
@@ -395,6 +417,17 @@ class Listbox extends BaseEditableHolder {
      * @group Props
      */
     dragdrop = false;
+    /**
+     * Array to use for CDK drop list data binding. When not provided, uses options array.
+     * @group Props
+     */
+    dropListData;
+    /**
+     * Computed property for stable CDK drop list data reference
+     */
+    cdkDropData = computed(() => {
+        return this.dropListData || this._options();
+    }, ...(ngDevMode ? [{ debugName: "cdkDropData" }] : []));
     /**
      * Spans 100% width of the container when enabled.
      * @defaultValue undefined
@@ -585,6 +618,7 @@ class Listbox extends BaseEditableHolder {
     _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);
     }
@@ -678,7 +712,7 @@ class Listbox extends BaseEditableHolder {
         this.onChange.emit({ originalEvent: event, value: this.value });
     }
     removeOption(option) {
-        return this.modelValue().filter((val) => !equals(val, this.getOptionValue(option), this.equalityKey()));
+        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) {
@@ -691,7 +725,7 @@ class Listbox extends BaseEditableHolder {
     }
     onOptionSelectMultiple(event, option) {
         let selected = this.isSelected(option);
-        let value = null;
+        let value = [];
         let metaSelection = this.optionTouched ? false : this.metaKeySelection;
         if (metaSelection) {
             let metaKey = event.metaKey || event.ctrlKey;
@@ -700,7 +734,7 @@ class Listbox extends BaseEditableHolder {
             }
             else {
                 value = metaKey ? this.modelValue() || [] : [];
-                value = [...value, this.getOptionValue(option)];
+                value = [...(value || []), this.getOptionValue(option)];
             }
         }
         else {
@@ -751,7 +785,7 @@ class Listbox extends BaseEditableHolder {
         if (this.$disabled() || this.readonly) {
             return;
         }
-        focus(this.headerCheckboxViewChild.nativeElement);
+        focus(this.headerCheckboxViewChild?.nativeElement);
         if (this.selectAll !== null) {
             this.onSelectAllChange.emit({
                 originalEvent: event,
@@ -797,21 +831,21 @@ class Listbox extends BaseEditableHolder {
     }
     onFirstHiddenFocus(event) {
         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;
+        const firstFocusableEl = getFirstFocusableElement(this.el?.nativeElement, ':not([data-p-hidden-focusable="true"])');
+        this.lastHiddenFocusableElement?.nativeElement && (this.lastHiddenFocusableElement.nativeElement.tabIndex = isEmpty(firstFocusableEl) ? -1 : undefined);
+        this.firstHiddenFocusableElement?.nativeElement && (this.firstHiddenFocusableElement.nativeElement.tabIndex = -1);
     }
     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(.p-hidden-focusable)');
             focus(firstFocusableEl);
-            this.firstHiddenFocusableElement.nativeElement.tabIndex = undefined;
+            this.firstHiddenFocusableElement?.nativeElement && (this.firstHiddenFocusableElement.nativeElement.tabIndex = undefined);
         }
         else {
-            focus(this.firstHiddenFocusableElement.nativeElement);
+            focus(this.firstHiddenFocusableElement?.nativeElement);
         }
-        this.lastHiddenFocusableElement.nativeElement.tabIndex = -1;
+        this.lastHiddenFocusableElement?.nativeElement && (this.lastHiddenFocusableElement.nativeElement.tabIndex = -1);
     }
     onFocusout(event) {
         if (!this.el.nativeElement.contains(event.relatedTarget) && this.lastHiddenFocusableElement && this.firstHiddenFocusableElement) {
@@ -863,7 +897,7 @@ class Listbox extends BaseEditableHolder {
         this.focusedOptionIndex.set(-1);
         this.startRangeIndex.set(-1);
         this.onFilter.emit({ originalEvent: event, filter: this._filterValue() });
-        !this.virtualScrollerDisabled && this.scroller.scrollToIndex(0);
+        !this.virtualScrollerDisabled && this.scroller?.scrollToIndex(0);
     }
     onFilterBlur(event) {
         this.focusedOptionIndex.set(-1);
@@ -1097,7 +1131,7 @@ class Listbox extends BaseEditableHolder {
         return matched;
     }
     isOptionMatched(option) {
-        return this.isValidOption(option) && this.getOptionLabel(option).toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale));
+        return this.isValidOption(option) && this.getOptionLabel(option)?.toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue?.toLocaleLowerCase(this.filterLocale));
     }
     scrollInView(index = -1) {
         const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
@@ -1106,7 +1140,7 @@ class Listbox extends BaseEditableHolder {
             element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
         }
         else if (!this.virtualScrollerDisabled) {
-            this.virtualScroll && this.scroller.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex());
+            this.virtualScroll && this.scroller?.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex());
         }
     }
     findFirstOptionIndex() {
@@ -1154,7 +1188,7 @@ class Listbox extends BaseEditableHolder {
         return matchedOptionIndex > -1 ? matchedOptionIndex : index;
     }
     findSelectedOptionIndex() {
-        if (this.$filled) {
+        if (this.$filled()) {
             if (this.multiple) {
                 for (let index = this.modelValue().length - 1; index >= 0; index--) {
                     const value = this.modelValue()[index];
@@ -1196,7 +1230,7 @@ class Listbox extends BaseEditableHolder {
         return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
     }
     isEquals(value1, value2) {
-        return equals(value1, value2, this.equalityKey());
+        return equals(value1, value2, this.equalityKey() || '');
     }
     isSelected(option) {
         const optionValue = this.getOptionValue(option);
@@ -1212,7 +1246,7 @@ class Listbox extends BaseEditableHolder {
         return !this._options()?.length || !this.visibleOptions()?.length;
     }
     hasFilter() {
-        return this._filterValue() && this._filterValue().trim().length > 0;
+        return this._filterValue() && (this._filterValue()?.trim().length || 0) > 0;
     }
     resetFilter() {
         if (this.filterViewChild && this.filterViewChild.nativeElement) {
@@ -1220,8 +1254,29 @@ class Listbox extends BaseEditableHolder {
         }
         this._filterValue.set(null);
     }
+    onDragEntered() {
+        this.isDragging.set(true);
+    }
+    onDragExited() {
+        this.isDragging.set(false);
+    }
     drop(event) {
+        this.isDragging.set(false);
         if (event) {
+            // If dragdrop is enabled and same container (reordering), automatically handle reordering
+            if (this.dragdrop && event.previousContainer === event.container) {
+                const currentOptions = [...this._options()];
+                moveItemInArray(currentOptions, event.previousIndex, event.currentIndex);
+                this._options.set(currentOptions);
+                // Update model value if needed for selection preservation
+                if (this.modelValue()) {
+                    this.writeModelValue(this.modelValue());
+                    this.onModelChange(this.modelValue());
+                }
+                // Mark for change detection
+                this.cd.markForCheck();
+            }
+            // Always emit the event for custom handling
             this.onDrop.emit(event);
         }
     }
@@ -1242,8 +1297,8 @@ class Listbox extends BaseEditableHolder {
         }
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: Listbox, deps: [{ token: i1.FilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Listbox, deps: [{ token: i1.FilterService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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 }, 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: [
             LISTBOX_VALUE_ACCESSOR,
             ListBoxStyle,
             {
@@ -1313,9 +1368,19 @@ class Listbox extends BaseEditableHolder {
                 </span>
             </ng-template>
         </div>
-        <div #container [class]="cn(cx('listContainer'), listStyleClass)" [ngStyle]="listStyle" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
+        <div
+            #container
+            [class]="cn(cx('listContainer'), listStyleClass)"
+            [ngStyle]="listStyle"
+            [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'"
+            cdkDropList
+            [cdkDropListData]="cdkDropData()"
+            (cdkDropListDropped)="drop($event)"
+            (cdkDropListEntered)="onDragEntered()"
+            (cdkDropListExited)="onDragExited()"
+        >
             @if (hasFilter() && isEmpty()) {
-                <div [class]="cx('emptyMessage')" [cdkDropListData]="$any([])" (cdkDropListDropped)="drop($event)" cdkDropList>
+                <div [class]="cx('emptyMessage')">
                     @if (!emptyFilterTemplate && !_emptyFilterTemplate && !_emptyTemplate && !emptyTemplate) {
                         {{ emptyFilterMessageText }}
                     } @else {
@@ -1323,7 +1388,7 @@ class Listbox extends BaseEditableHolder {
                     }
                 </div>
             } @else if (!hasFilter() && isEmpty()) {
-                <div [class]="cx('emptyMessage')" [cdkDropListData]="$any([])" (cdkDropListDropped)="drop($event)" cdkDropList>
+                <div [class]="cx('emptyMessage')">
                     @if (!emptyTemplate && !_emptyTemplate) {
                         {{ emptyMessage }}
                     } @else {
@@ -1358,6 +1423,7 @@ class Listbox extends BaseEditableHolder {
 
                 <ng-template #buildInItems let-items let-scrollerOptions="options">
                     <ul
+                        #list
                         [id]="id + '_list'"
                         [class]="cx('list')"
                         role="listbox"
@@ -1371,9 +1437,6 @@ class Listbox extends BaseEditableHolder {
                         (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)">
@@ -1385,6 +1448,8 @@ class Listbox extends BaseEditableHolder {
                                     cdkDrag
                                     [cdkDragData]="option"
                                     [cdkDragDisabled]="!dragdrop"
+                                    (cdkDragStarted)="isDragging.set(true)"
+                                    (cdkDragEnded)="isDragging.set(false)"
                                 >
                                     <span *ngIf="!groupTemplate && !_groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
                                     <ng-container *ngTemplateOutlet="groupTemplate || _groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
@@ -1412,6 +1477,8 @@ class Listbox extends BaseEditableHolder {
                                     cdkDrag
                                     [cdkDragData]="option"
                                     [cdkDragDisabled]="!dragdrop"
+                                    (cdkDragStarted)="isDragging.set(true)"
+                                    (cdkDragEnded)="isDragging.set(false)"
                                 >
                                     <p-checkbox
                                         *ngIf="checkbox && multiple"
@@ -1468,7 +1535,7 @@ class Listbox extends BaseEditableHolder {
         <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: "[data-p-icon=\"search\"]" }, { 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: "[data-p-icon=\"check\"]" }, { 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", "invalid"] }, { kind: "component", type: BlankIcon, selector: "[data-p-icon=\"blank\"]" }, { 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", "cdkDropListHasAnchor"], 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: "20.3.0", ngImport: i0, type: Listbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Listbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-listbox, p-listBox, p-list-box',
@@ -1535,9 +1602,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 </span>
             </ng-template>
         </div>
-        <div #container [class]="cn(cx('listContainer'), listStyleClass)" [ngStyle]="listStyle" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
+        <div
+            #container
+            [class]="cn(cx('listContainer'), listStyleClass)"
+            [ngStyle]="listStyle"
+            [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'"
+            cdkDropList
+            [cdkDropListData]="cdkDropData()"
+            (cdkDropListDropped)="drop($event)"
+            (cdkDropListEntered)="onDragEntered()"
+            (cdkDropListExited)="onDragExited()"
+        >
             @if (hasFilter() && isEmpty()) {
-                <div [class]="cx('emptyMessage')" [cdkDropListData]="$any([])" (cdkDropListDropped)="drop($event)" cdkDropList>
+                <div [class]="cx('emptyMessage')">
                     @if (!emptyFilterTemplate && !_emptyFilterTemplate && !_emptyTemplate && !emptyTemplate) {
                         {{ emptyFilterMessageText }}
                     } @else {
@@ -1545,7 +1622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     }
                 </div>
             } @else if (!hasFilter() && isEmpty()) {
-                <div [class]="cx('emptyMessage')" [cdkDropListData]="$any([])" (cdkDropListDropped)="drop($event)" cdkDropList>
+                <div [class]="cx('emptyMessage')">
                     @if (!emptyTemplate && !_emptyTemplate) {
                         {{ emptyMessage }}
                     } @else {
@@ -1580,6 +1657,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
                 <ng-template #buildInItems let-items let-scrollerOptions="options">
                     <ul
+                        #list
                         [id]="id + '_list'"
                         [class]="cx('list')"
                         role="listbox"
@@ -1593,9 +1671,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         (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)">
@@ -1607,6 +1682,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                                     cdkDrag
                                     [cdkDragData]="option"
                                     [cdkDragDisabled]="!dragdrop"
+                                    (cdkDragStarted)="isDragging.set(true)"
+                                    (cdkDragEnded)="isDragging.set(false)"
                                 >
                                     <span *ngIf="!groupTemplate && !_groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
                                     <ng-container *ngTemplateOutlet="groupTemplate || _groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
@@ -1634,6 +1711,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                                     cdkDrag
                                     [cdkDragData]="option"
                                     [cdkDragDisabled]="!dragdrop"
+                                    (cdkDragStarted)="isDragging.set(true)"
+                                    (cdkDragEnded)="isDragging.set(false)"
                                 >
                                     <p-checkbox
                                         *ngIf="checkbox && multiple"
@@ -1703,7 +1782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         '[attr.id]': 'id',
-                        '[class]': "cn(cx('root'), styleClass)"
+                        '[class]': "cn(cx('root'), styleClass, { 'p-listbox-dragging': isDragging() })"
                     }
                 }]
         }], ctorParameters: () => [{ type: i1.FilterService }], propDecorators: { id: [{
@@ -1819,6 +1898,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }], dragdrop: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], dropListData: [{
+                type: Input
             }], onChange: [{
                 type: Output
             }], onClick: [{
@@ -1905,11 +1986,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['focusout', ['$event']]
             }] } });
 class ListboxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: ListboxModule, imports: [Listbox, SharedModule], exports: [Listbox, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListboxModule, imports: [Listbox, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ListboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: ListboxModule, imports: [Listbox, SharedModule], exports: [Listbox, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ListboxModule, imports: [Listbox, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ListboxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Listbox, SharedModule],