primeng 18.0.6-lts → 18.0.7-lts

package/fesm2022/primeng-picklist.mjs

@@ -1,5 +1,5 @@
 import * as i2 from '@angular/cdk/drag-drop';
-import { transferArrayItem, moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -1556,20 +1556,50 @@ class PickList extends BaseComponent {
         let dropIndexes = this.getDropIndexes(event.previousIndex, event.currentIndex, listType, isTransfer, event.item.data);
         if (listType === this.SOURCE_LIST) {
             if (isTransfer) {
-                transferArrayItem(event.previousContainer.data, event.container.data, dropIndexes.previousIndex, dropIndexes.currentIndex);
-                let selectedItemIndex = findIndexInList(event.item.data, this.selectedItemsTarget);
-                if (selectedItemIndex != -1) {
-                    this.selectedItemsTarget.splice(selectedItemIndex, 1);
-                    if (this.keepSelection) {
-                        this.selectedItemsTarget.push(event.item.data);
+                // Moving from target to source
+                let itemsToMove = [];
+                // Check if dragged item is in selected items
+                if (this.selectedItemsTarget && this.selectedItemsTarget.length > 0 && findIndexInList(event.item.data, this.selectedItemsTarget) !== -1) {
+                    // Move all selected items
+                    itemsToMove = [...this.selectedItemsTarget];
+                }
+                else {
+                    // Move only the dragged item
+                    itemsToMove = [event.item.data];
+                }
+                // Sort items by their index in target (to maintain order)
+                const sortedItems = this.sortByIndexInList(itemsToMove, this.target || []);
+                // Remove all items from target
+                for (let item of sortedItems) {
+                    const itemIndex = findIndexInList(item, this.target || []);
+                    if (itemIndex !== -1) {
+                        this.target?.splice(itemIndex, 1);
+                    }
+                }
+                // Add all items to source at the drop position
+                for (let i = 0; i < sortedItems.length; i++) {
+                    this.source?.splice(dropIndexes.currentIndex + i, 0, sortedItems[i]);
+                }
+                // Clear target selection
+                this.selectedItemsTarget = [];
+                if (this.keepSelection) {
+                    this.selectedItemsSource = [...this.selectedItemsSource, ...itemsToMove];
+                }
+                if (this.visibleOptionsTarget) {
+                    // Update visible options
+                    for (let item of itemsToMove) {
+                        const visibleIndex = findIndexInList(item, this.visibleOptionsTarget);
+                        if (visibleIndex !== -1) {
+                            this.visibleOptionsTarget.splice(visibleIndex, 1);
+                        }
                     }
                 }
-                if (this.visibleOptionsTarget)
-                    this.visibleOptionsTarget.splice(event.previousIndex, 1);
-                this.onMoveToSource.emit({ items: [event.item.data] });
+                this.onMoveToSource.emit({ items: itemsToMove });
             }
             else {
-                moveItemInArray(event.container.data, dropIndexes.previousIndex, dropIndexes.currentIndex);
+                if (this.source) {
+                    moveItemInArray(this.source, dropIndexes.previousIndex, dropIndexes.currentIndex);
+                }
                 this.onSourceReorder.emit({ items: [event.item.data] });
             }
             if (this.filterValueSource) {
@@ -1578,26 +1608,62 @@ class PickList extends BaseComponent {
         }
         else {
             if (isTransfer) {
-                transferArrayItem(event.previousContainer.data, event.container.data, dropIndexes.previousIndex, dropIndexes.currentIndex);
-                let selectedItemIndex = findIndexInList(event.item.data, this.selectedItemsSource);
-                if (selectedItemIndex != -1) {
-                    this.selectedItemsSource.splice(selectedItemIndex, 1);
-                    if (this.keepSelection) {
-                        this.selectedItemsTarget.push(event.item.data);
+                // Moving from source to target
+                let itemsToMove = [];
+                // Check if dragged item is in selected items
+                if (this.selectedItemsSource && this.selectedItemsSource.length > 0 && findIndexInList(event.item.data, this.selectedItemsSource) !== -1) {
+                    // Move all selected items
+                    itemsToMove = [...this.selectedItemsSource];
+                }
+                else {
+                    // Move only the dragged item
+                    itemsToMove = [event.item.data];
+                }
+                // Sort items by their index in source (to maintain order)
+                const sortedItems = this.sortByIndexInList(itemsToMove, this.source || []);
+                // Remove all items from source
+                for (let item of sortedItems) {
+                    const itemIndex = findIndexInList(item, this.source || []);
+                    if (itemIndex !== -1) {
+                        this.source?.splice(itemIndex, 1);
+                    }
+                }
+                // Add all items to target at the drop position
+                for (let i = 0; i < sortedItems.length; i++) {
+                    this.target?.splice(dropIndexes.currentIndex + i, 0, sortedItems[i]);
+                }
+                // Clear source selection
+                this.selectedItemsSource = [];
+                if (this.keepSelection) {
+                    this.selectedItemsTarget = [...this.selectedItemsTarget, ...itemsToMove];
+                }
+                if (this.visibleOptionsSource) {
+                    // Update visible options
+                    for (let item of itemsToMove) {
+                        const visibleIndex = findIndexInList(item, this.visibleOptionsSource);
+                        if (visibleIndex !== -1) {
+                            this.visibleOptionsSource.splice(visibleIndex, 1);
+                        }
                     }
                 }
-                if (this.visibleOptionsSource)
-                    this.visibleOptionsSource.splice(event.previousIndex, 1);
-                this.onMoveToTarget.emit({ items: [event.item.data] });
+                this.onMoveToTarget.emit({ items: itemsToMove });
             }
             else {
-                moveItemInArray(event.container.data, dropIndexes.previousIndex, dropIndexes.currentIndex);
+                if (this.target) {
+                    moveItemInArray(this.target, dropIndexes.previousIndex, dropIndexes.currentIndex);
+                }
                 this.onTargetReorder.emit({ items: [event.item.data] });
             }
             if (this.filterValueTarget) {
                 this.filter(this.target, this.TARGET_LIST);
             }
         }
+        // Only trigger change detection for transfers, not reordering
+        // Reordering modifies arrays in-place and triggerChangeDetection() would override changes
+        if (isTransfer) {
+            this.triggerChangeDetection();
+        }
+        this.cd.markForCheck();
     }
     onListFocus(event, listType) {
         this.onFocus.emit(event);
@@ -1929,13 +1995,13 @@ class PickList extends BaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listViewTargetChild = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sourceFilterViewChild = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.targetFilterViewChild = _t.first);
-        } }, inputs: { source: "source", target: "target", sourceHeader: "sourceHeader", tabindex: [2, "tabindex", "tabindex", numberAttribute], rightButtonAriaLabel: "rightButtonAriaLabel", leftButtonAriaLabel: "leftButtonAriaLabel", allRightButtonAriaLabel: "allRightButtonAriaLabel", allLeftButtonAriaLabel: "allLeftButtonAriaLabel", upButtonAriaLabel: "upButtonAriaLabel", downButtonAriaLabel: "downButtonAriaLabel", topButtonAriaLabel: "topButtonAriaLabel", bottomButtonAriaLabel: "bottomButtonAriaLabel", targetHeader: "targetHeader", responsive: [2, "responsive", "responsive", booleanAttribute], filterBy: "filterBy", filterLocale: "filterLocale", trackBy: "trackBy", sourceTrackBy: "sourceTrackBy", targetTrackBy: "targetTrackBy", showSourceFilter: [2, "showSourceFilter", "showSourceFilter", booleanAttribute], showTargetFilter: [2, "showTargetFilter", "showTargetFilter", booleanAttribute], metaKeySelection: [2, "metaKeySelection", "metaKeySelection", booleanAttribute], dragdrop: [2, "dragdrop", "dragdrop", booleanAttribute], style: "style", styleClass: "styleClass", sourceStyle: "sourceStyle", targetStyle: "targetStyle", showSourceControls: [2, "showSourceControls", "showSourceControls", booleanAttribute], showTargetControls: [2, "showTargetControls", "showTargetControls", booleanAttribute], sourceFilterPlaceholder: "sourceFilterPlaceholder", targetFilterPlaceholder: "targetFilterPlaceholder", disabled: [2, "disabled", "disabled", booleanAttribute], ariaSourceFilterLabel: "ariaSourceFilterLabel", ariaTargetFilterLabel: "ariaTargetFilterLabel", filterMatchMode: "filterMatchMode", stripedRows: [2, "stripedRows", "stripedRows", booleanAttribute], keepSelection: [2, "keepSelection", "keepSelection", booleanAttribute], scrollHeight: "scrollHeight", autoOptionFocus: [2, "autoOptionFocus", "autoOptionFocus", booleanAttribute], buttonProps: "buttonProps", moveUpButtonProps: "moveUpButtonProps", moveTopButtonProps: "moveTopButtonProps", moveDownButtonProps: "moveDownButtonProps", moveBottomButtonProps: "moveBottomButtonProps", moveToTargetProps: "moveToTargetProps", moveAllToTargetProps: "moveAllToTargetProps", moveToSourceProps: "moveToSourceProps", moveAllToSourceProps: "moveAllToSourceProps", breakpoint: "breakpoint" }, outputs: { onMoveToSource: "onMoveToSource", onMoveAllToSource: "onMoveAllToSource", onMoveAllToTarget: "onMoveAllToTarget", onMoveToTarget: "onMoveToTarget", onSourceReorder: "onSourceReorder", onTargetReorder: "onTargetReorder", onSourceSelect: "onSourceSelect", onTargetSelect: "onTargetSelect", onSourceFilter: "onSourceFilter", onTargetFilter: "onTargetFilter", onFocus: "onFocus", onBlur: "onBlur" }, standalone: true, features: [i0.ɵɵProvidersFeature([PickListStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 36, vars: 97, consts: [["sourcelist", ""], ["targetlist", ""], ["header", ""], ["filter", ""], ["item", ""], ["empty", ""], ["emptyfilter", ""], ["cdkDropListGroup", "", 3, "ngStyle", "ngClass"], ["class", "p-picklist-controls p-picklist-source-controls", 4, "ngIf"], [1, "p-picklist-list-container", "p-picklist-source-list-container"], ["optionLabel", "name", 3, "ngModelChange", "onFocus", "onBlur", "keydown", "onDblClick", "onFilter", "multiple", "options", "ngModel", "id", "ngStyle", "striped", "tabindex", "disabled", "metaKeySelection", "scrollHeight", "autoOptionFocus", "filter", "filterBy", "filterLocale", "filterMatchMode", "filterPlaceHolder"], [4, "ngIf"], ["class", "p-picklist-title", 4, "ngIf"], [1, "p-picklist-controls", "p-picklist-transfer-controls"], ["type", "button", "pButton", "", "pRipple", "", "severity", "secondary", 1, "p-button-icon-only", 3, "click", "disabled", "buttonProps"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "p-picklist-list-container", "p-picklist-target-list-container"], ["class", "p-picklist-controls p-picklist-target-controls", 4, "ngIf"], [1, "p-picklist-controls", "p-picklist-source-controls"], [4, "ngTemplateOutlet"], [1, "p-picklist-title"], [1, "p-picklist-controls", "p-picklist-target-controls"]], template: function PickList_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { source: "source", target: "target", sourceHeader: "sourceHeader", tabindex: [2, "tabindex", "tabindex", numberAttribute], rightButtonAriaLabel: "rightButtonAriaLabel", leftButtonAriaLabel: "leftButtonAriaLabel", allRightButtonAriaLabel: "allRightButtonAriaLabel", allLeftButtonAriaLabel: "allLeftButtonAriaLabel", upButtonAriaLabel: "upButtonAriaLabel", downButtonAriaLabel: "downButtonAriaLabel", topButtonAriaLabel: "topButtonAriaLabel", bottomButtonAriaLabel: "bottomButtonAriaLabel", targetHeader: "targetHeader", responsive: [2, "responsive", "responsive", booleanAttribute], filterBy: "filterBy", filterLocale: "filterLocale", trackBy: "trackBy", sourceTrackBy: "sourceTrackBy", targetTrackBy: "targetTrackBy", showSourceFilter: [2, "showSourceFilter", "showSourceFilter", booleanAttribute], showTargetFilter: [2, "showTargetFilter", "showTargetFilter", booleanAttribute], metaKeySelection: [2, "metaKeySelection", "metaKeySelection", booleanAttribute], dragdrop: [2, "dragdrop", "dragdrop", booleanAttribute], style: "style", styleClass: "styleClass", sourceStyle: "sourceStyle", targetStyle: "targetStyle", showSourceControls: [2, "showSourceControls", "showSourceControls", booleanAttribute], showTargetControls: [2, "showTargetControls", "showTargetControls", booleanAttribute], sourceFilterPlaceholder: "sourceFilterPlaceholder", targetFilterPlaceholder: "targetFilterPlaceholder", disabled: [2, "disabled", "disabled", booleanAttribute], ariaSourceFilterLabel: "ariaSourceFilterLabel", ariaTargetFilterLabel: "ariaTargetFilterLabel", filterMatchMode: "filterMatchMode", stripedRows: [2, "stripedRows", "stripedRows", booleanAttribute], keepSelection: [2, "keepSelection", "keepSelection", booleanAttribute], scrollHeight: "scrollHeight", autoOptionFocus: [2, "autoOptionFocus", "autoOptionFocus", booleanAttribute], buttonProps: "buttonProps", moveUpButtonProps: "moveUpButtonProps", moveTopButtonProps: "moveTopButtonProps", moveDownButtonProps: "moveDownButtonProps", moveBottomButtonProps: "moveBottomButtonProps", moveToTargetProps: "moveToTargetProps", moveAllToTargetProps: "moveAllToTargetProps", moveToSourceProps: "moveToSourceProps", moveAllToSourceProps: "moveAllToSourceProps", breakpoint: "breakpoint" }, outputs: { onMoveToSource: "onMoveToSource", onMoveAllToSource: "onMoveAllToSource", onMoveAllToTarget: "onMoveAllToTarget", onMoveToTarget: "onMoveToTarget", onSourceReorder: "onSourceReorder", onTargetReorder: "onTargetReorder", onSourceSelect: "onSourceSelect", onTargetSelect: "onTargetSelect", onSourceFilter: "onSourceFilter", onTargetFilter: "onTargetFilter", onFocus: "onFocus", onBlur: "onBlur" }, standalone: true, features: [i0.ɵɵProvidersFeature([PickListStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 36, vars: 101, consts: [["sourcelist", ""], ["targetlist", ""], ["header", ""], ["filter", ""], ["item", ""], ["empty", ""], ["emptyfilter", ""], ["cdkDropListGroup", "", 3, "ngStyle", "ngClass"], ["class", "p-picklist-controls p-picklist-source-controls", 4, "ngIf"], [1, "p-picklist-list-container", "p-picklist-source-list-container"], ["optionLabel", "name", 3, "ngModelChange", "onFocus", "onBlur", "keydown", "onDblClick", "onFilter", "onDrop", "multiple", "options", "ngModel", "id", "ngStyle", "striped", "tabindex", "disabled", "metaKeySelection", "scrollHeight", "autoOptionFocus", "filter", "filterBy", "filterLocale", "filterMatchMode", "filterPlaceHolder", "dragdrop", "dropListData"], [4, "ngIf"], ["class", "p-picklist-title", 4, "ngIf"], [1, "p-picklist-controls", "p-picklist-transfer-controls"], ["type", "button", "pButton", "", "pRipple", "", "severity", "secondary", 1, "p-button-icon-only", 3, "click", "disabled", "buttonProps"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "p-picklist-list-container", "p-picklist-target-list-container"], ["class", "p-picklist-controls p-picklist-target-controls", 4, "ngIf"], [1, "p-picklist-controls", "p-picklist-source-controls"], [4, "ngTemplateOutlet"], [1, "p-picklist-title"], [1, "p-picklist-controls", "p-picklist-target-controls"]], template: function PickList_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 7);
             i0.ɵɵtemplate(1, PickList_div_1_Template, 13, 26, "div", 8);
             i0.ɵɵelementStart(2, "div", 9)(3, "p-listbox", 10, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function PickList_Template_p_listbox_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.selectedItemsSource, $event) || (ctx.selectedItemsSource = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("onFocus", function PickList_Template_p_listbox_onFocus_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onListFocus($event, ctx.SOURCE_LIST)); })("onBlur", function PickList_Template_p_listbox_onBlur_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onListBlur($event, ctx.SOURCE_LIST)); })("keydown", function PickList_Template_p_listbox_keydown_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onItemKeyDown($event, ctx.selectedItemsSource, ctx.onSourceSelect, ctx.SOURCE_LIST)); })("onDblClick", function PickList_Template_p_listbox_onDblClick_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSourceItemDblClick()); })("onFilter", function PickList_Template_p_listbox_onFilter_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onFilter($event.originalEvent, ctx.SOURCE_LIST)); });
+            i0.ɵɵlistener("onFocus", function PickList_Template_p_listbox_onFocus_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onListFocus($event, ctx.SOURCE_LIST)); })("onBlur", function PickList_Template_p_listbox_onBlur_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onListBlur($event, ctx.SOURCE_LIST)); })("keydown", function PickList_Template_p_listbox_keydown_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onItemKeyDown($event, ctx.selectedItemsSource, ctx.onSourceSelect, ctx.SOURCE_LIST)); })("onDblClick", function PickList_Template_p_listbox_onDblClick_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSourceItemDblClick()); })("onFilter", function PickList_Template_p_listbox_onFilter_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onFilter($event.originalEvent, ctx.SOURCE_LIST)); })("onFilter", function PickList_Template_p_listbox_onFilter_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onFilter($event.originalEvent, ctx.SOURCE_LIST)); })("onDrop", function PickList_Template_p_listbox_onDrop_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDrop($event, ctx.SOURCE_LIST)); });
             i0.ɵɵtemplate(5, PickList_ng_container_5_Template, 3, 0, "ng-container", 11)(6, PickList_ng_container_6_Template, 3, 0, "ng-container", 11)(7, PickList_ng_container_7_Template, 2, 1, "ng-container", 11)(8, PickList_div_8_Template, 2, 1, "div", 12)(9, PickList_ng_container_9_Template, 3, 0, "ng-container", 11)(10, PickList_ng_container_10_Template, 3, 0, "ng-container", 11)(11, PickList_ng_container_11_Template, 3, 0, "ng-container", 11);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(12, "div", 13)(13, "button", 14);
@@ -1956,14 +2022,14 @@ class PickList extends BaseComponent {
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(25, "div", 16)(26, "p-listbox", 10, 1);
             i0.ɵɵtwoWayListener("ngModelChange", function PickList_Template_p_listbox_ngModelChange_26_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.selectedItemsTarget, $event) || (ctx.selectedItemsTarget = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("onFocus", function PickList_Template_p_listbox_onFocus_26_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onListFocus($event, ctx.TARGET_LIST)); })("onBlur", function PickList_Template_p_listbox_onBlur_26_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onListBlur($event, ctx.TARGET_LIST)); })("keydown", function PickList_Template_p_listbox_keydown_26_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onItemKeyDown($event, ctx.selectedItemsTarget, ctx.onTargetSelect, ctx.TARGET_LIST)); })("onDblClick", function PickList_Template_p_listbox_onDblClick_26_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onTargetItemDblClick()); })("onFilter", function PickList_Template_p_listbox_onFilter_26_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onFilter($event.originalEvent, ctx.TARGET_LIST)); });
+            i0.ɵɵlistener("onFocus", function PickList_Template_p_listbox_onFocus_26_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onListFocus($event, ctx.TARGET_LIST)); })("onBlur", function PickList_Template_p_listbox_onBlur_26_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onListBlur($event, ctx.TARGET_LIST)); })("keydown", function PickList_Template_p_listbox_keydown_26_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onItemKeyDown($event, ctx.selectedItemsTarget, ctx.onTargetSelect, ctx.TARGET_LIST)); })("onDblClick", function PickList_Template_p_listbox_onDblClick_26_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onTargetItemDblClick()); })("onFilter", function PickList_Template_p_listbox_onFilter_26_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onFilter($event.originalEvent, ctx.TARGET_LIST)); })("onDrop", function PickList_Template_p_listbox_onDrop_26_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDrop($event, ctx.TARGET_LIST)); });
             i0.ɵɵtemplate(28, PickList_ng_container_28_Template, 3, 0, "ng-container", 11)(29, PickList_ng_container_29_Template, 3, 0, "ng-container", 11)(30, PickList_ng_container_30_Template, 2, 1, "ng-container", 11)(31, PickList_div_31_Template, 2, 1, "div", 12)(32, PickList_ng_container_32_Template, 3, 0, "ng-container", 11)(33, PickList_ng_container_33_Template, 3, 0, "ng-container", 11)(34, PickList_ng_container_34_Template, 3, 0, "ng-container", 11);
             i0.ɵɵelementEnd()();
             i0.ɵɵtemplate(35, PickList_div_35_Template, 13, 26, "div", 17);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassMap(ctx.styleClass);
-            i0.ɵɵproperty("ngStyle", ctx.style)("ngClass", i0.ɵɵpureFunction0(88, _c21));
+            i0.ɵɵproperty("ngStyle", ctx.style)("ngClass", i0.ɵɵpureFunction0(92, _c21));
             i0.ɵɵattribute("data-pc-name", "picklist")("data-pc-section", "root");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.showSourceControls);
@@ -1972,7 +2038,7 @@ class PickList extends BaseComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("multiple", true)("options", ctx.source);
             i0.ɵɵtwoWayProperty("ngModel", ctx.selectedItemsSource);
-            i0.ɵɵproperty("id", ctx.idSource + "_list")("ngStyle", ctx.sourceStyle)("striped", ctx.stripedRows)("tabindex", ctx.tabindex)("disabled", ctx.disabled)("metaKeySelection", ctx.metaKeySelection)("scrollHeight", ctx.scrollHeight)("autoOptionFocus", ctx.autoOptionFocus)("filter", ctx.filterBy)("filterBy", ctx.filterBy)("filterLocale", ctx.filterLocale)("filterMatchMode", ctx.filterMatchMode)("filterPlaceHolder", ctx.sourceFilterPlaceholder);
+            i0.ɵɵproperty("id", ctx.idSource + "_list")("ngStyle", ctx.sourceStyle)("striped", ctx.stripedRows)("tabindex", ctx.tabindex)("disabled", ctx.disabled)("metaKeySelection", ctx.metaKeySelection)("scrollHeight", ctx.scrollHeight)("autoOptionFocus", ctx.autoOptionFocus)("filter", ctx.filterBy)("filterBy", ctx.filterBy)("filterLocale", ctx.filterLocale)("filterMatchMode", ctx.filterMatchMode)("filterPlaceHolder", ctx.sourceFilterPlaceholder)("dragdrop", ctx.dragdrop)("dropListData", ctx.source);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.sourceHeaderTemplate || ctx._sourceHeaderTemplate || ctx.sourceHeader);
             i0.ɵɵadvance();
@@ -1995,34 +2061,34 @@ class PickList extends BaseComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.moveToTargetIconTemplate && !ctx._moveToTargetIconTemplate);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngTemplateOutlet", ctx.moveToTargetIconTemplate || ctx._moveToTargetIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(89, _c22, ctx.viewChanged));
+            i0.ɵɵproperty("ngTemplateOutlet", ctx.moveToTargetIconTemplate || ctx._moveToTargetIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(93, _c22, ctx.viewChanged));
             i0.ɵɵadvance();
             i0.ɵɵproperty("disabled", ctx.moveAllRightDisabled())("buttonProps", ctx.getButtonProps("movealltotarget"));
             i0.ɵɵattribute("aria-label", ctx.moveAllToTargetAriaLabel)("data-pc-section", "moveAllToTargetButton");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.moveAllToTargetIconTemplate && !ctx._moveAllToTargetIconTemplate);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngTemplateOutlet", ctx.moveAllToTargetIconTemplate || ctx._moveAllToTargetIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(91, _c22, ctx.viewChanged));
+            i0.ɵɵproperty("ngTemplateOutlet", ctx.moveAllToTargetIconTemplate || ctx._moveAllToTargetIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(95, _c22, ctx.viewChanged));
             i0.ɵɵadvance();
             i0.ɵɵproperty("disabled", ctx.moveLeftDisabled())("buttonProps", ctx.getButtonProps("movetosource"));
             i0.ɵɵattribute("aria-label", ctx.moveToSourceAriaLabel)("data-pc-section", "moveToSourceButton");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.moveToSourceIconTemplate && !ctx._moveToSourceIconTemplate);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngTemplateOutlet", ctx.moveToSourceIconTemplate || ctx._moveToSourceIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(93, _c22, ctx.viewChanged));
+            i0.ɵɵproperty("ngTemplateOutlet", ctx.moveToSourceIconTemplate || ctx._moveToSourceIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(97, _c22, ctx.viewChanged));
             i0.ɵɵadvance();
             i0.ɵɵproperty("disabled", ctx.moveAllLeftDisabled())("buttonProps", ctx.getButtonProps("movealltosource"));
             i0.ɵɵattribute("aria-label", ctx.moveAllToSourceAriaLabel)("data-pc-section", "moveAllToSourceButton");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.moveAllToSourceIconTemplate && !ctx._moveAllToSourceIconTemplate);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngTemplateOutlet", ctx.moveAllToSourceIconTemplate || ctx._moveAllToSourceIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(95, _c22, ctx.viewChanged));
+            i0.ɵɵproperty("ngTemplateOutlet", ctx.moveAllToSourceIconTemplate || ctx._moveAllToSourceIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(99, _c22, ctx.viewChanged));
             i0.ɵɵadvance();
             i0.ɵɵattribute("data-pc-section", "targetWrapper")("data-pc-group-section", "listwrapper");
             i0.ɵɵadvance();
             i0.ɵɵproperty("multiple", true)("options", ctx.target);
             i0.ɵɵtwoWayProperty("ngModel", ctx.selectedItemsTarget);
-            i0.ɵɵproperty("id", ctx.idTarget + "_list")("ngStyle", ctx.targetStyle)("striped", ctx.stripedRows)("tabindex", ctx.tabindex)("disabled", ctx.disabled)("metaKeySelection", ctx.metaKeySelection)("scrollHeight", ctx.scrollHeight)("autoOptionFocus", ctx.autoOptionFocus)("filter", ctx.filterBy)("filterBy", ctx.filterBy)("filterLocale", ctx.filterLocale)("filterMatchMode", ctx.filterMatchMode)("filterPlaceHolder", ctx.targetFilterPlaceholder);
+            i0.ɵɵproperty("id", ctx.idTarget + "_list")("ngStyle", ctx.targetStyle)("striped", ctx.stripedRows)("tabindex", ctx.tabindex)("disabled", ctx.disabled)("metaKeySelection", ctx.metaKeySelection)("scrollHeight", ctx.scrollHeight)("autoOptionFocus", ctx.autoOptionFocus)("filter", ctx.filterBy)("filterBy", ctx.filterBy)("filterLocale", ctx.filterLocale)("filterMatchMode", ctx.filterMatchMode)("filterPlaceHolder", ctx.targetFilterPlaceholder)("dragdrop", ctx.dragdrop)("dropListData", ctx.target);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.targetHeaderTemplate || ctx._targetHeaderTemplate || ctx.targetHeader);
             i0.ɵɵadvance();
@@ -2136,6 +2202,10 @@ class PickList extends BaseComponent {
                     [filterMatchMode]="filterMatchMode"
                     [filterPlaceHolder]="sourceFilterPlaceholder"
                     (onFilter)="onFilter($event.originalEvent, SOURCE_LIST)"
+                    [dragdrop]="dragdrop"
+                    [dropListData]="source"
+                    (onFilter)="onFilter($event.originalEvent, SOURCE_LIST)"
+                    (onDrop)="onDrop($event, SOURCE_LIST)"
                 >
                     <ng-container *ngIf="sourceHeaderTemplate || _sourceHeaderTemplate || sourceHeader">
                         <ng-template #header>
@@ -2268,6 +2338,9 @@ class PickList extends BaseComponent {
                     [filterMatchMode]="filterMatchMode"
                     [filterPlaceHolder]="targetFilterPlaceholder"
                     (onFilter)="onFilter($event.originalEvent, TARGET_LIST)"
+                    [dragdrop]="dragdrop"
+                    [dropListData]="target"
+                    (onDrop)="onDrop($event, TARGET_LIST)"
                 >
                     <ng-container *ngIf="targetHeaderTemplate || _targetHeaderTemplate || targetHeader">
                         <ng-template #header>