primeng 19.0.5 → 19.0.6

package/fesm2022/primeng-listbox.mjs

@@ -1,3 +1,5 @@
+import * as i4 from '@angular/cdk/drag-drop';
+import { CDK_DRAG_CONFIG, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -292,7 +294,7 @@ function Listbox_div_4_div_1_p_checkbox_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngModel", ctx_r1.allSelected())("disabled", ctx_r1.disabled)("tabindex", -1)("variant", ctx_r1.config.inputStyle() === "filled" ? "filled" : "outlined" || ctx_r1.config.inputVariant() === "filled" ? "filled" : "outlined")("binary", true);
+    i0.ɵɵproperty("ngModel", ctx_r1.allSelected())("disabled", ctx_r1.disabled)("tabindex", -1)("variant", ctx_r1.config.inputStyle() === "filled" || ctx_r1.config.inputVariant() === "filled" ? "filled" : "outlined")("binary", true);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.checkIconTemplate || ctx_r1._checkIconTemplate);
 } }
@@ -468,12 +470,12 @@ function Listbox_ng_template_9_ng_template_2_ng_container_0_Template(rf, ctx) {
     const scrollerOptions_r15 = i0.ɵɵnextContext().options;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(5, _c23, scrollerOptions_r15.itemSize + "px"));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(7, _c23, scrollerOptions_r15.itemSize + "px"))("cdkDragData", option_r12)("cdkDragDisabled", !ctx_r1.dragdrop);
     i0.ɵɵattribute("id", ctx_r1.id + "_" + ctx_r1.getOptionIndex(i_r14, scrollerOptions_r15));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r1.groupTemplate && !ctx_r1._groupTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.groupTemplate || ctx_r1._groupTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(7, _c21, option_r12.optionGroup));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.groupTemplate || ctx_r1._groupTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(9, _c21, option_r12.optionGroup));
 } }
 function Listbox_ng_template_9_ng_template_2_ng_container_1_p_checkbox_2_ng_container_1_ng_template_1_0_ng_template_0_Template(rf, ctx) { }
 function Listbox_ng_template_9_ng_template_2_ng_container_1_p_checkbox_2_ng_container_1_ng_template_1_0_Template(rf, ctx) { if (rf & 1) {
@@ -498,7 +500,7 @@ function Listbox_ng_template_9_ng_template_2_ng_container_1_p_checkbox_2_Templat
 } if (rf & 2) {
     const option_r12 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngModel", ctx_r1.isSelected(option_r12))("readonly", true)("disabled", ctx_r1.disabled || ctx_r1.isOptionDisabled(option_r12))("tabindex", -1)("variant", ctx_r1.config.inputStyle() === "filled" ? "filled" : "outlined" || ctx_r1.config.inputVariant() === "filled" ? "filled" : "outlined")("binary", true);
+    i0.ɵɵproperty("ngModel", ctx_r1.isSelected(option_r12))("readonly", true)("disabled", ctx_r1.disabled || ctx_r1.isOptionDisabled(option_r12))("tabindex", -1)("variant", ctx_r1.config.inputStyle() === "filled" || ctx_r1.config.inputVariant() === "filled" ? "filled" : "outlined")("binary", true);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.checkIconTemplate || ctx_r1._checkIconTemplate);
 } }
@@ -563,7 +565,7 @@ function Listbox_ng_template_9_ng_template_2_ng_container_1_Template(rf, ctx) {
     const scrollerOptions_r15 = i0.ɵɵnextContext().options;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(13, _c23, scrollerOptions_r15.itemSize + "px"))("ngClass", i0.ɵɵpureFunction3(15, _c25, ctx_r1.isSelected(option_r12) && ctx_r1.highlightOnSelect, ctx_r1.focusedOptionIndex() === ctx_r1.getOptionIndex(i_r14, scrollerOptions_r15), ctx_r1.isOptionDisabled(option_r12)));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(15, _c23, scrollerOptions_r15.itemSize + "px"))("ngClass", i0.ɵɵpureFunction3(17, _c25, ctx_r1.isSelected(option_r12) && ctx_r1.highlightOnSelect, ctx_r1.focusedOptionIndex() === ctx_r1.getOptionIndex(i_r14, scrollerOptions_r15), ctx_r1.isOptionDisabled(option_r12)))("cdkDragData", option_r12)("cdkDragDisabled", !ctx_r1.dragdrop);
     i0.ɵɵattribute("id", ctx_r1.id + "_" + ctx_r1.getOptionIndex(i_r14, scrollerOptions_r15))("aria-label", ctx_r1.getOptionLabel(option_r12))("aria-selected", ctx_r1.isSelected(option_r12))("aria-disabled", ctx_r1.isOptionDisabled(option_r12))("aria-setsize", ctx_r1.ariaSetSize)("ariaPosInset", ctx_r1.getAriaPosInset(ctx_r1.getOptionIndex(i_r14, scrollerOptions_r15)));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.checkbox && ctx_r1.multiple);
@@ -572,10 +574,10 @@ function Listbox_ng_template_9_ng_template_2_ng_container_1_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r1.itemTemplate && !ctx_r1._itemTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemTemplate || ctx_r1._itemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(19, _c26, option_r12, ctx_r1.getOptionIndex(i_r14, scrollerOptions_r15), ctx_r1.isSelected(option_r12)));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemTemplate || ctx_r1._itemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(21, _c26, option_r12, ctx_r1.getOptionIndex(i_r14, scrollerOptions_r15), ctx_r1.isSelected(option_r12)));
 } }
 function Listbox_ng_template_9_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, Listbox_ng_template_9_ng_template_2_ng_container_0_Template, 4, 9, "ng-container", 19)(1, Listbox_ng_template_9_ng_template_2_ng_container_1_Template, 6, 23, "ng-container", 19);
+    i0.ɵɵtemplate(0, Listbox_ng_template_9_ng_template_2_ng_container_0_Template, 4, 11, "ng-container", 19)(1, Listbox_ng_template_9_ng_template_2_ng_container_1_Template, 6, 25, "ng-container", 19);
 } if (rf & 2) {
     const option_r12 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -634,7 +636,7 @@ function Listbox_ng_template_9_li_4_Template(rf, ctx) { if (rf & 1) {
 function Listbox_ng_template_9_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "ul", 42, 11);
-    i0.ɵɵlistener("focus", function Listbox_ng_template_9_Template_ul_focus_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onListFocus($event)); })("blur", function Listbox_ng_template_9_Template_ul_blur_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onListBlur($event)); })("keydown", function Listbox_ng_template_9_Template_ul_keydown_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onListKeyDown($event)); });
+    i0.ɵɵlistener("focus", function Listbox_ng_template_9_Template_ul_focus_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onListFocus($event)); })("blur", function Listbox_ng_template_9_Template_ul_blur_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onListBlur($event)); })("keydown", function Listbox_ng_template_9_Template_ul_keydown_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onListKeyDown($event)); })("cdkDropListDropped", function Listbox_ng_template_9_Template_ul_cdkDropListDropped_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.drop($event)); });
     i0.ɵɵtemplate(2, Listbox_ng_template_9_ng_template_2_Template, 2, 2, "ng-template", 43)(3, Listbox_ng_template_9_li_3_Template, 3, 1, "li", 44)(4, Listbox_ng_template_9_li_4_Template, 3, 1, "li", 44);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -642,7 +644,7 @@ function Listbox_ng_template_9_Template(rf, ctx) { if (rf & 1) {
     const scrollerOptions_r15 = ctx.options;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵstyleMap(scrollerOptions_r15.contentStyle);
-    i0.ɵɵproperty("tabindex", -1)("ngClass", scrollerOptions_r15.contentStyleClass);
+    i0.ɵɵproperty("tabindex", -1)("ngClass", scrollerOptions_r15.contentStyleClass)("cdkDropListData", items_r17);
     i0.ɵɵattribute("aria-multiselectable", true)("aria-activedescendant", ctx_r1.focused ? ctx_r1.focusedOptionId : undefined)("aria-label", ctx_r1.ariaLabel)("aria-disabled", ctx_r1.disabled);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngForOf", items_r17);
@@ -945,6 +947,11 @@ class Listbox extends BaseComponent {
      * @defaultValue false
      */
     checkmark = false;
+    /**
+     * Whether to enable dragdrop based reordering.
+     * @group Props
+     */
+    dragdrop = false;
     /**
      * Callback to invoke on value change.
      * @param {ListboxChangeEvent} event - Custom change event.
@@ -993,6 +1000,12 @@ class Listbox extends BaseComponent {
      * @group Emits
      */
     onLazyLoad = new EventEmitter();
+    /**
+     * Emits on item is dropped.
+     * @param {CdkDragDrop<string[]>} event - Scroller lazy load event.
+     * @group Emits
+     */
+    onDrop = new EventEmitter();
     headerCheckboxViewChild;
     filterViewChild;
     lastHiddenFocusableElement;
@@ -1769,6 +1782,11 @@ class Listbox extends BaseComponent {
         }
         this._filterValue.set(null);
     }
+    drop(event) {
+        if (event) {
+            this.onDrop.emit(event);
+        }
+    }
     ngOnDestroy() {
         if (this.translationSubscription) {
             this.translationSubscription.unsubscribe();
@@ -1824,7 +1842,16 @@ class Listbox extends BaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scroller = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listViewChild = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.containerViewChild = _t.first);
-        } }, inputs: { id: "id", searchMessage: "searchMessage", emptySelectionMessage: "emptySelectionMessage", selectionMessage: "selectionMessage", autoOptionFocus: [2, "autoOptionFocus", "autoOptionFocus", booleanAttribute], ariaLabel: "ariaLabel", selectOnFocus: [2, "selectOnFocus", "selectOnFocus", booleanAttribute], searchLocale: [2, "searchLocale", "searchLocale", booleanAttribute], focusOnHover: [2, "focusOnHover", "focusOnHover", booleanAttribute], filterMessage: "filterMessage", filterFields: "filterFields", lazy: [2, "lazy", "lazy", booleanAttribute], virtualScroll: [2, "virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: [2, "virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", scrollHeight: "scrollHeight", tabindex: [2, "tabindex", "tabindex", numberAttribute], multiple: [2, "multiple", "multiple", booleanAttribute], style: "style", styleClass: "styleClass", listStyle: "listStyle", listStyleClass: "listStyleClass", readonly: [2, "readonly", "readonly", booleanAttribute], disabled: [2, "disabled", "disabled", booleanAttribute], checkbox: [2, "checkbox", "checkbox", booleanAttribute], filter: [2, "filter", "filter", booleanAttribute], filterBy: "filterBy", filterMatchMode: "filterMatchMode", filterLocale: "filterLocale", metaKeySelection: [2, "metaKeySelection", "metaKeySelection", booleanAttribute], dataKey: "dataKey", showToggleAll: [2, "showToggleAll", "showToggleAll", booleanAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", optionDisabled: "optionDisabled", ariaFilterLabel: "ariaFilterLabel", filterPlaceHolder: "filterPlaceHolder", emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", group: [2, "group", "group", booleanAttribute], options: "options", filterValue: "filterValue", selectAll: "selectAll", striped: [2, "striped", "striped", booleanAttribute], highlightOnSelect: [2, "highlightOnSelect", "highlightOnSelect", booleanAttribute], checkmark: [2, "checkmark", "checkmark", booleanAttribute] }, outputs: { onChange: "onChange", onClick: "onClick", onDblClick: "onDblClick", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onSelectAllChange: "onSelectAllChange", onLazyLoad: "onLazyLoad" }, features: [i0.ɵɵProvidersFeature([LISTBOX_VALUE_ACCESSOR, ListBoxStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c18, decls: 17, vars: 25, consts: [["firstHiddenFocusableElement", ""], ["container", ""], ["buildInItems", ""], ["lastHiddenFocusableElement", ""], ["builtInFilterElement", ""], ["headerchkbox", ""], ["icon", ""], ["filterInput", ""], ["scroller", ""], ["content", ""], ["loader", ""], ["list", ""], ["emptyFilter", ""], ["empty", ""], [3, "focusout", "ngClass", "ngStyle"], ["role", "presentation", 1, "p-hidden-accessible", "p-hidden-focusable", 3, "focus", "tabindex"], ["class", "p-listbox-header", 4, "ngIf"], [3, "ngClass", "ngStyle"], [3, "items", "style", "itemSize", "autoSize", "lazy", "options", "tabindex", "onLazyLoad", 4, "ngIf"], [4, "ngIf"], ["class", "p-listbox-footer", 4, "ngIf"], ["role", "status", "aria-live", "polite", "class", "p-hidden-accessible", 4, "ngIf"], ["role", "status", "aria-live", "polite", 1, "p-hidden-accessible"], [1, "p-listbox-header"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["class", "p-checkbox p-component", 3, "ngClass", "click", "keydown", 4, "ngIf"], [4, "ngIf", "ngIfElse"], [1, "p-checkbox", "p-component", 3, "click", "keydown", "ngClass"], [1, "p-hidden-accessible"], ["type", "checkbox", "readonly", "readonly", 3, "focus", "blur", "disabled"], ["styleClass", "p-listbox-option-check-icon", 3, "ngModel", "disabled", "tabindex", "variant", "binary", 4, "ngIf"], ["styleClass", "p-listbox-option-check-icon", 3, "ngModel", "disabled", "tabindex", "variant", "binary"], ["class", "p-listbox-filter-container", 4, "ngIf"], ["role", "status", "attr.aria-live", "polite", 1, "p-hidden-accessible"], [1, "p-listbox-filter-container"], ["pInputText", "", "type", "text", "role", "searchbox", 1, "p-listbox-filter", 3, "input", "keydown", "focus", "blur", "value", "disabled", "tabindex"], [3, "styleClass", 4, "ngIf"], ["class", "p-listbox-filter-icon", 4, "ngIf"], [3, "styleClass"], [1, "p-listbox-filter-icon"], [4, "ngTemplateOutlet"], [3, "onLazyLoad", "items", "itemSize", "autoSize", "lazy", "options", "tabindex"], ["role", "listbox", 1, "p-listbox-list", 3, "focus", "blur", "keydown", "tabindex", "ngClass"], ["ngFor", "", 3, "ngForOf"], ["class", "p-listbox-empty-message", "role", "option", 4, "ngIf"], ["role", "option", 1, "p-listbox-option-group", 3, "ngStyle"], ["pRipple", "", "role", "option", 1, "p-listbox-option", 3, "click", "dblclick", "mousedown", "mouseenter", "touchend", "ngStyle", "ngClass"], ["styleClass", "p-listbox-option-check-icon", 3, "ngModel", "readonly", "disabled", "tabindex", "variant", "binary", 4, "ngIf"], ["styleClass", "p-listbox-option-check-icon", 3, "ngModel", "readonly", "disabled", "tabindex", "variant", "binary"], ["styleClass", "p-listbox-option-check-icon", 4, "ngIf"], ["styleClass", "p-listbox-option-check-icon"], ["role", "option", 1, "p-listbox-empty-message"], [1, "p-listbox-footer"]], template: function Listbox_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { id: "id", searchMessage: "searchMessage", emptySelectionMessage: "emptySelectionMessage", selectionMessage: "selectionMessage", autoOptionFocus: [2, "autoOptionFocus", "autoOptionFocus", booleanAttribute], ariaLabel: "ariaLabel", selectOnFocus: [2, "selectOnFocus", "selectOnFocus", booleanAttribute], searchLocale: [2, "searchLocale", "searchLocale", booleanAttribute], focusOnHover: [2, "focusOnHover", "focusOnHover", booleanAttribute], filterMessage: "filterMessage", filterFields: "filterFields", lazy: [2, "lazy", "lazy", booleanAttribute], virtualScroll: [2, "virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: [2, "virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", scrollHeight: "scrollHeight", tabindex: [2, "tabindex", "tabindex", numberAttribute], multiple: [2, "multiple", "multiple", booleanAttribute], style: "style", styleClass: "styleClass", listStyle: "listStyle", listStyleClass: "listStyleClass", readonly: [2, "readonly", "readonly", booleanAttribute], disabled: [2, "disabled", "disabled", booleanAttribute], checkbox: [2, "checkbox", "checkbox", booleanAttribute], filter: [2, "filter", "filter", booleanAttribute], filterBy: "filterBy", filterMatchMode: "filterMatchMode", filterLocale: "filterLocale", metaKeySelection: [2, "metaKeySelection", "metaKeySelection", booleanAttribute], dataKey: "dataKey", showToggleAll: [2, "showToggleAll", "showToggleAll", booleanAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", optionDisabled: "optionDisabled", ariaFilterLabel: "ariaFilterLabel", filterPlaceHolder: "filterPlaceHolder", emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", group: [2, "group", "group", booleanAttribute], options: "options", filterValue: "filterValue", selectAll: "selectAll", striped: [2, "striped", "striped", booleanAttribute], highlightOnSelect: [2, "highlightOnSelect", "highlightOnSelect", booleanAttribute], checkmark: [2, "checkmark", "checkmark", booleanAttribute], dragdrop: [2, "dragdrop", "dragdrop", booleanAttribute] }, outputs: { onChange: "onChange", onClick: "onClick", onDblClick: "onDblClick", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onSelectAllChange: "onSelectAllChange", onLazyLoad: "onLazyLoad", onDrop: "onDrop" }, features: [i0.ɵɵProvidersFeature([
+                LISTBOX_VALUE_ACCESSOR,
+                ListBoxStyle,
+                {
+                    provide: CDK_DRAG_CONFIG,
+                    useValue: {
+                        zIndex: 1200
+                    }
+                }
+            ]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c18, decls: 17, vars: 23, consts: [["firstHiddenFocusableElement", ""], ["container", ""], ["buildInItems", ""], ["lastHiddenFocusableElement", ""], ["builtInFilterElement", ""], ["headerchkbox", ""], ["icon", ""], ["filterInput", ""], ["scroller", ""], ["content", ""], ["loader", ""], ["list", ""], ["emptyFilter", ""], ["empty", ""], [3, "focusout", "ngClass", "ngStyle"], ["role", "presentation", 1, "p-hidden-accessible", "p-hidden-focusable", 3, "focus", "tabindex"], ["class", "p-listbox-header", 4, "ngIf"], [3, "ngClass", "ngStyle"], [3, "items", "style", "itemSize", "autoSize", "lazy", "options", "tabindex", "onLazyLoad", 4, "ngIf"], [4, "ngIf"], ["class", "p-listbox-footer", 4, "ngIf"], ["role", "status", "aria-live", "polite", "class", "p-hidden-accessible", 4, "ngIf"], ["role", "status", "aria-live", "polite", 1, "p-hidden-accessible"], [1, "p-listbox-header"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["class", "p-checkbox p-component", 3, "ngClass", "click", "keydown", 4, "ngIf"], [4, "ngIf", "ngIfElse"], [1, "p-checkbox", "p-component", 3, "click", "keydown", "ngClass"], [1, "p-hidden-accessible"], ["type", "checkbox", "readonly", "readonly", 3, "focus", "blur", "disabled"], ["styleClass", "p-listbox-option-check-icon", 3, "ngModel", "disabled", "tabindex", "variant", "binary", 4, "ngIf"], ["styleClass", "p-listbox-option-check-icon", 3, "ngModel", "disabled", "tabindex", "variant", "binary"], ["class", "p-listbox-filter-container", 4, "ngIf"], ["role", "status", "attr.aria-live", "polite", 1, "p-hidden-accessible"], [1, "p-listbox-filter-container"], ["pInputText", "", "type", "text", "role", "searchbox", 1, "p-listbox-filter", 3, "input", "keydown", "focus", "blur", "value", "disabled", "tabindex"], [3, "styleClass", 4, "ngIf"], ["class", "p-listbox-filter-icon", 4, "ngIf"], [3, "styleClass"], [1, "p-listbox-filter-icon"], [4, "ngTemplateOutlet"], [3, "onLazyLoad", "items", "itemSize", "autoSize", "lazy", "options", "tabindex"], ["role", "listbox", "cdkDropList", "", 1, "p-listbox-list", 3, "focus", "blur", "keydown", "cdkDropListDropped", "tabindex", "ngClass", "cdkDropListData"], ["ngFor", "", 3, "ngForOf"], ["class", "p-listbox-empty-message", "role", "option", 4, "ngIf"], ["role", "option", "cdkDrag", "", 1, "p-listbox-option-group", 3, "ngStyle", "cdkDragData", "cdkDragDisabled"], ["pRipple", "", "role", "option", "cdkDrag", "", 1, "p-listbox-option", 3, "click", "dblclick", "mousedown", "mouseenter", "touchend", "ngStyle", "ngClass", "cdkDragData", "cdkDragDisabled"], ["styleClass", "p-listbox-option-check-icon", 3, "ngModel", "readonly", "disabled", "tabindex", "variant", "binary", 4, "ngIf"], ["styleClass", "p-listbox-option-check-icon", 3, "ngModel", "readonly", "disabled", "tabindex", "variant", "binary"], ["styleClass", "p-listbox-option-check-icon", 4, "ngIf"], ["styleClass", "p-listbox-option-check-icon"], ["role", "option", 1, "p-listbox-empty-message"], [1, "p-listbox-footer"]], template: function Listbox_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵprojectionDef(_c17);
             i0.ɵɵelementStart(0, "div", 14);
@@ -1834,7 +1861,7 @@ class Listbox extends BaseComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(3, Listbox_div_3_Template, 3, 5, "div", 16)(4, Listbox_div_4_Template, 5, 3, "div", 16);
             i0.ɵɵelementStart(5, "div", 17, 1);
-            i0.ɵɵtemplate(7, Listbox_p_scroller_7_Template, 5, 11, "p-scroller", 18)(8, Listbox_ng_container_8_Template, 2, 6, "ng-container", 19)(9, Listbox_ng_template_9_Template, 5, 11, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(7, Listbox_p_scroller_7_Template, 5, 11, "p-scroller", 18)(8, Listbox_ng_container_8_Template, 2, 6, "ng-container", 19)(9, Listbox_ng_template_9_Template, 5, 12, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(11, Listbox_div_11_Template, 3, 5, "div", 20)(12, Listbox_span_12_Template, 2, 1, "span", 21);
             i0.ɵɵelementStart(13, "span", 22);
@@ -1849,7 +1876,7 @@ class Listbox extends BaseComponent {
             i0.ɵɵattribute("id", ctx.id);
             i0.ɵɵadvance();
             i0.ɵɵproperty("tabindex", !ctx.disabled ? ctx.tabindex : -1);
-            i0.ɵɵattribute("aria-hidden", true)("data-p-hidden-focusable", true);
+            i0.ɵɵattribute("data-p-hidden-focusable", true);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.headerFacet || ctx.headerTemplate || ctx._headerTemplate);
             i0.ɵɵadvance();
@@ -1871,27 +1898,18 @@ class Listbox extends BaseComponent {
             i0.ɵɵtextInterpolate1(" ", ctx.selectedMessageText, " ");
             i0.ɵɵadvance();
             i0.ɵɵproperty("tabindex", !ctx.disabled ? ctx.tabindex : -1);
-            i0.ɵɵattribute("aria-hidden", true)("data-p-hidden-focusable", true);
-        } }, dependencies: [CommonModule, i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, Ripple, Scroller, InputIcon, SearchIcon, Checkbox, CheckIcon, IconField, InputText, BlankIcon, FormsModule, i3.NgControlStatus, i3.NgModel, SharedModule], encapsulation: 2, changeDetection: 0 });
+            i0.ɵɵattribute("data-p-hidden-focusable", true);
+        } }, dependencies: [CommonModule, i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, Ripple, Scroller, InputIcon, SearchIcon, Checkbox, CheckIcon, IconField, InputText, BlankIcon, FormsModule, i3.NgControlStatus, i3.NgModel, SharedModule, DragDropModule, i4.CdkDropList, i4.CdkDrag], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Listbox, [{
         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],
+                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"
-                [attr.aria-hidden]="true"
-                class="p-hidden-accessible p-hidden-focusable"
-                [tabindex]="!disabled ? tabindex : -1"
-                (focus)="onFirstHiddenFocus($event)"
-                [attr.data-p-hidden-focusable]="true"
-            >
-            </span>
+            <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>
@@ -1907,7 +1925,7 @@ class Listbox extends BaseComponent {
                         [ngModel]="allSelected()"
                         [disabled]="disabled"
                         [tabindex]="-1"
-                        [variant]="config.inputStyle() === 'filled' ? 'filled' : 'outlined' || config.inputVariant() === 'filled' ? 'filled' : 'outlined'"
+                        [variant]="config.inputStyle() === 'filled' || config.inputVariant() === 'filled' ? 'filled' : 'outlined'"
                         [binary]="true"
                     >
                         <ng-container *ngIf="checkIconTemplate || _checkIconTemplate">
@@ -1995,10 +2013,21 @@ class Listbox extends BaseComponent {
                         (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">
+                                <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>
@@ -2025,6 +2054,9 @@ class Listbox extends BaseComponent {
                                     (mousedown)="onOptionMouseDown($event, getOptionIndex(i, scrollerOptions))"
                                     (mouseenter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
                                     (touchend)="onOptionTouchEnd()"
+                                    cdkDrag
+                                    [cdkDragData]="option"
+                                    [cdkDragDisabled]="!dragdrop"
                                 >
                                     <p-checkbox
                                         *ngIf="checkbox && multiple"
@@ -2033,7 +2065,7 @@ class Listbox extends BaseComponent {
                                         [readonly]="true"
                                         [disabled]="disabled || isOptionDisabled(option)"
                                         [tabindex]="-1"
-                                        [variant]="config.inputStyle() === 'filled' ? 'filled' : 'outlined' || config.inputVariant() === 'filled' ? 'filled' : 'outlined'"
+                                        [variant]="config.inputStyle() === 'filled' || config.inputVariant() === 'filled' ? 'filled' : 'outlined'"
                                         [binary]="true"
                                     >
                                         <ng-container *ngIf="checkIconTemplate || _checkIconTemplate">
@@ -2090,19 +2122,19 @@ class Listbox extends BaseComponent {
             <span role="status" aria-live="polite" class="p-hidden-accessible">
                 {{ selectedMessageText }}
             </span>
-            <span
-                #lastHiddenFocusableElement
-                role="presentation"
-                [attr.aria-hidden]="true"
-                class="p-hidden-accessible p-hidden-focusable"
-                [tabindex]="!disabled ? tabindex : -1"
-                (focus)="onLastHiddenFocus($event)"
-                [attr.data-p-hidden-focusable]="true"
-            >
-            </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>
         </div>
     `,
-                providers: [LISTBOX_VALUE_ACCESSOR, ListBoxStyle],
+                providers: [
+                    LISTBOX_VALUE_ACCESSOR,
+                    ListBoxStyle,
+                    {
+                        provide: CDK_DRAG_CONFIG,
+                        useValue: {
+                            zIndex: 1200
+                        }
+                    }
+                ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             }]
@@ -2221,6 +2253,9 @@ class Listbox extends BaseComponent {
         }], checkmark: [{
             type: Input,
             args: [{ transform: booleanAttribute }]
+        }], dragdrop: [{
+            type: Input,
+            args: [{ transform: booleanAttribute }]
         }], onChange: [{
             type: Output
         }], onClick: [{
@@ -2237,6 +2272,8 @@ class Listbox extends BaseComponent {
             type: Output
         }], onLazyLoad: [{
             type: Output
+        }], onDrop: [{
+            type: Output
         }], headerCheckboxViewChild: [{
             type: ViewChild,
             args: ['headerchkbox']
@@ -2301,7 +2338,7 @@ class Listbox extends BaseComponent {
             type: ContentChildren,
             args: [PrimeTemplate]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Listbox, { className: "Listbox", filePath: "listbox.ts", lineNumber: 281 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Listbox, { className: "Listbox", filePath: "listbox.ts", lineNumber: 287 }); })();
 class ListboxModule {
     static ɵfac = function ListboxModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ListboxModule)(); };
     static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: ListboxModule });