primeng 11.3.1 → 11.4.2

package/fesm2015/primeng-picklist.js

@@ -4,8 +4,8 @@ import { ButtonModule } from 'primeng/button';
 import { FilterService, PrimeTemplate, SharedModule } from 'primeng/api';
 import { DomHandler } from 'primeng/dom';
 import { RippleModule } from 'primeng/ripple';
-import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
-import { UniqueComponentId } from 'primeng/utils';
+import { transferArrayItem, moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { UniqueComponentId, ObjectUtils } from 'primeng/utils';
 
 class PickList {
     constructor(el, cd, filterService) {
@@ -16,6 +16,7 @@ class PickList {
         this.showSourceFilter = true;
         this.showTargetFilter = true;
         this.metaKeySelection = true;
+        this.dragdrop = false;
         this.showSourceControls = true;
         this.showTargetControls = true;
         this.disabled = false;
@@ -48,12 +49,24 @@ class PickList {
                 case 'item':
                     this.itemTemplate = item.template;
                     break;
+                case 'sourceHeader':
+                    this.sourceHeaderTemplate = item.template;
+                    break;
+                case 'targetHeader':
+                    this.targetHeaderTemplate = item.template;
+                    break;
                 case 'emptymessagesource':
                     this.emptyMessageSourceTemplate = item.template;
                     break;
+                case 'emptyfiltermessagesource':
+                    this.emptyFilterMessageSourceTemplate = item.template;
+                    break;
                 case 'emptymessagetarget':
                     this.emptyMessageTargetTemplate = item.template;
                     break;
+                case 'emptyfiltermessagetarget':
+                    this.emptyFilterMessageTargetTemplate = item.template;
+                    break;
                 default:
                     this.itemTemplate = item.template;
                     break;
@@ -116,17 +129,19 @@ class PickList {
     }
     onFilter(event, data, listType) {
         let query = event.target.value.trim().toLocaleLowerCase(this.filterLocale);
-        this.filter(query, data, listType);
+        if (listType === this.SOURCE_LIST)
+            this.filterValueSource = query;
+        else if (listType === this.TARGET_LIST)
+            this.filterValueTarget = query;
+        this.filter(data, listType);
     }
-    filter(query, data, listType) {
+    filter(data, listType) {
         let searchFields = this.filterBy.split(',');
         if (listType === this.SOURCE_LIST) {
-            this.filterValueSource = query;
             this.visibleOptionsSource = this.filterService.filter(data, searchFields, this.filterValueSource, this.filterMatchMode, this.filterLocale);
             this.onSourceFilter.emit({ query: this.filterValueSource, value: this.visibleOptionsSource });
         }
         else if (listType === this.TARGET_LIST) {
-            this.filterValueTarget = query;
             this.visibleOptionsTarget = this.filterService.filter(data, searchFields, this.filterValueTarget, this.filterMatchMode, this.filterLocale);
             this.onTargetFilter.emit({ query: this.filterValueTarget, value: this.visibleOptionsTarget });
         }
@@ -137,6 +152,12 @@ class PickList {
         else
             return this.isVisibleInList(this.visibleOptionsTarget, item, this.filterValueTarget);
     }
+    isEmpty(listType) {
+        if (listType == this.SOURCE_LIST)
+            return this.filterValueSource ? (!this.visibleOptionsSource || this.visibleOptionsSource.length === 0) : (!this.source || this.source.length === 0);
+        else
+            return this.filterValueTarget ? (!this.visibleOptionsTarget || this.visibleOptionsTarget.length === 0) : (!this.target || this.target.length === 0);
+    }
     isVisibleInList(data, item, filterValue) {
         if (filterValue && filterValue.trim().length) {
             for (let i = 0; i < data.length; i++) {
@@ -149,21 +170,21 @@ class PickList {
             return true;
         }
     }
-    onItemTouchEnd(event) {
+    onItemTouchEnd() {
         if (this.disabled) {
             return;
         }
         this.itemTouched = true;
     }
     sortByIndexInList(items, list) {
-        return items.sort((item1, item2) => this.findIndexInList(item1, list) - this.findIndexInList(item2, list));
+        return items.sort((item1, item2) => ObjectUtils.findIndexInList(item1, list) - ObjectUtils.findIndexInList(item2, list));
     }
-    moveUp(listElement, list, selectedItems, callback) {
+    moveUp(listElement, list, selectedItems, callback, listType) {
         if (selectedItems && selectedItems.length) {
             selectedItems = this.sortByIndexInList(selectedItems, list);
             for (let i = 0; i < selectedItems.length; i++) {
                 let selectedItem = selectedItems[i];
-                let selectedItemIndex = this.findIndexInList(selectedItem, list);
+                let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list);
                 if (selectedItemIndex != 0) {
                     let movedItem = list[selectedItemIndex];
                     let temp = list[selectedItemIndex - 1];
@@ -174,17 +195,19 @@ class PickList {
                     break;
                 }
             }
+            if (this.dragdrop && ((this.filterValueSource && listType === this.SOURCE_LIST) || (this.filterValueTarget && listType === this.TARGET_LIST)))
+                this.filter(list, listType);
             this.movedUp = true;
             this.reorderedListElement = listElement;
             callback.emit({ items: selectedItems });
         }
     }
-    moveTop(listElement, list, selectedItems, callback) {
+    moveTop(listElement, list, selectedItems, callback, listType) {
         if (selectedItems && selectedItems.length) {
             selectedItems = this.sortByIndexInList(selectedItems, list);
             for (let i = 0; i < selectedItems.length; i++) {
                 let selectedItem = selectedItems[i];
-                let selectedItemIndex = this.findIndexInList(selectedItem, list);
+                let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list);
                 if (selectedItemIndex != 0) {
                     let movedItem = list.splice(selectedItemIndex, 1)[0];
                     list.unshift(movedItem);
@@ -193,16 +216,18 @@ class PickList {
                     break;
                 }
             }
+            if (this.dragdrop && ((this.filterValueSource && listType === this.SOURCE_LIST) || (this.filterValueTarget && listType === this.TARGET_LIST)))
+                this.filter(list, listType);
             listElement.scrollTop = 0;
             callback.emit({ items: selectedItems });
         }
     }
-    moveDown(listElement, list, selectedItems, callback) {
+    moveDown(listElement, list, selectedItems, callback, listType) {
         if (selectedItems && selectedItems.length) {
             selectedItems = this.sortByIndexInList(selectedItems, list);
             for (let i = selectedItems.length - 1; i >= 0; i--) {
                 let selectedItem = selectedItems[i];
-                let selectedItemIndex = this.findIndexInList(selectedItem, list);
+                let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list);
                 if (selectedItemIndex != (list.length - 1)) {
                     let movedItem = list[selectedItemIndex];
                     let temp = list[selectedItemIndex + 1];
@@ -213,17 +238,19 @@ class PickList {
                     break;
                 }
             }
+            if (this.dragdrop && ((this.filterValueSource && listType === this.SOURCE_LIST) || (this.filterValueTarget && listType === this.TARGET_LIST)))
+                this.filter(list, listType);
             this.movedDown = true;
             this.reorderedListElement = listElement;
             callback.emit({ items: selectedItems });
         }
     }
-    moveBottom(listElement, list, selectedItems, callback) {
+    moveBottom(listElement, list, selectedItems, callback, listType) {
         if (selectedItems && selectedItems.length) {
             selectedItems = this.sortByIndexInList(selectedItems, list);
             for (let i = selectedItems.length - 1; i >= 0; i--) {
                 let selectedItem = selectedItems[i];
-                let selectedItemIndex = this.findIndexInList(selectedItem, list);
+                let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list);
                 if (selectedItemIndex != (list.length - 1)) {
                     let movedItem = list.splice(selectedItemIndex, 1)[0];
                     list.push(movedItem);
@@ -232,6 +259,8 @@ class PickList {
                     break;
                 }
             }
+            if (this.dragdrop && ((this.filterValueSource && listType === this.SOURCE_LIST) || (this.filterValueTarget && listType === this.TARGET_LIST)))
+                this.filter(list, listType);
             listElement.scrollTop = listElement.scrollHeight;
             callback.emit({ items: selectedItems });
         }
@@ -240,8 +269,10 @@ class PickList {
         if (this.selectedItemsSource && this.selectedItemsSource.length) {
             for (let i = 0; i < this.selectedItemsSource.length; i++) {
                 let selectedItem = this.selectedItemsSource[i];
-                if (this.findIndexInList(selectedItem, this.target) == -1) {
-                    this.target.push(this.source.splice(this.findIndexInList(selectedItem, this.source), 1)[0]);
+                if (ObjectUtils.findIndexInList(selectedItem, this.target) == -1) {
+                    this.target.push(this.source.splice(ObjectUtils.findIndexInList(selectedItem, this.source), 1)[0]);
+                    if (this.visibleOptionsSource)
+                        this.visibleOptionsSource.splice(ObjectUtils.findIndexInList(selectedItem, this.visibleOptionsSource), 1);
                 }
             }
             this.onMoveToTarget.emit({
@@ -249,7 +280,7 @@ class PickList {
             });
             this.selectedItemsSource = [];
             if (this.filterValueTarget) {
-                this.filter(this.filterValueTarget, this.target, this.TARGET_LIST);
+                this.filter(this.target, this.TARGET_LIST);
             }
         }
     }
@@ -269,16 +300,19 @@ class PickList {
             });
             this.selectedItemsSource = [];
             if (this.filterValueTarget) {
-                this.filter(this.filterValueTarget, this.target, this.TARGET_LIST);
+                this.filter(this.target, this.TARGET_LIST);
             }
+            this.visibleOptionsSource = [];
         }
     }
     moveLeft() {
         if (this.selectedItemsTarget && this.selectedItemsTarget.length) {
             for (let i = 0; i < this.selectedItemsTarget.length; i++) {
                 let selectedItem = this.selectedItemsTarget[i];
-                if (this.findIndexInList(selectedItem, this.source) == -1) {
-                    this.source.push(this.target.splice(this.findIndexInList(selectedItem, this.target), 1)[0]);
+                if (ObjectUtils.findIndexInList(selectedItem, this.source) == -1) {
+                    this.source.push(this.target.splice(ObjectUtils.findIndexInList(selectedItem, this.target), 1)[0]);
+                    if (this.visibleOptionsTarget)
+                        this.visibleOptionsTarget.splice(ObjectUtils.findIndexInList(selectedItem, this.visibleOptionsTarget), 1)[0];
                 }
             }
             this.onMoveToSource.emit({
@@ -286,7 +320,7 @@ class PickList {
             });
             this.selectedItemsTarget = [];
             if (this.filterValueSource) {
-                this.filter(this.filterValueSource, this.source, this.SOURCE_LIST);
+                this.filter(this.source, this.SOURCE_LIST);
             }
         }
     }
@@ -306,42 +340,70 @@ class PickList {
             });
             this.selectedItemsTarget = [];
             if (this.filterValueSource) {
-                this.filter(this.filterValueSource, this.source, this.SOURCE_LIST);
+                this.filter(this.source, this.SOURCE_LIST);
             }
+            this.visibleOptionsTarget = [];
         }
     }
     isSelected(item, selectedItems) {
         return this.findIndexInSelection(item, selectedItems) != -1;
     }
     findIndexInSelection(item, selectedItems) {
-        return this.findIndexInList(item, selectedItems);
-    }
-    findIndexInList(item, list) {
-        let index = -1;
-        if (list) {
-            for (let i = 0; i < list.length; i++) {
-                if (list[i] == item) {
-                    index = i;
-                    break;
-                }
+        return ObjectUtils.findIndexInList(item, selectedItems);
+    }
+    onDrop(event, listType) {
+        let isTransfer = event.previousContainer !== event.container;
+        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);
+                if (this.visibleOptionsTarget)
+                    this.visibleOptionsTarget.splice(event.previousIndex, 1);
+                this.onMoveToSource.emit({ items: event.item.data });
+            }
+            else {
+                moveItemInArray(event.container.data, dropIndexes.previousIndex, dropIndexes.currentIndex);
+                this.onSourceReorder.emit({ items: event.item.data });
+            }
+            if (this.filterValueSource) {
+                this.filter(this.source, this.SOURCE_LIST);
+            }
+        }
+        else {
+            if (isTransfer) {
+                transferArrayItem(event.previousContainer.data, event.container.data, dropIndexes.previousIndex, dropIndexes.currentIndex);
+                if (this.visibleOptionsSource)
+                    this.visibleOptionsSource.splice(event.previousIndex, 1);
+                this.onMoveToTarget.emit({ items: event.item.data });
+            }
+            else {
+                moveItemInArray(event.container.data, dropIndexes.previousIndex, dropIndexes.currentIndex);
+                this.onTargetReorder.emit({ items: event.item.data });
+            }
+            if (this.filterValueTarget) {
+                this.filter(this.target, this.TARGET_LIST);
             }
         }
-        return index;
     }
-    onDrop(event, listType) {
-        if (event.previousContainer === event.container) {
-            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-            if (listType == this.SOURCE_LIST)
-                this.onSourceReorder.emit([event.item.data]);
-            else
-                this.onTargetReorder.emit([event.item.data]);
+    getDropIndexes(fromIndex, toIndex, droppedList, isTransfer, data) {
+        let previousIndex, currentIndex;
+        if (droppedList === this.SOURCE_LIST) {
+            previousIndex = isTransfer ? this.filterValueTarget ? ObjectUtils.findIndexInList(data, this.target) : fromIndex : this.filterValueSource ? ObjectUtils.findIndexInList(data, this.source) : fromIndex;
+            currentIndex = this.filterValueSource ? this.findFilteredCurrentIndex(this.visibleOptionsSource, toIndex, this.source) : toIndex;
         }
         else {
-            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
-            if (listType == this.SOURCE_LIST)
-                this.onMoveToSource.emit([event.item.data]);
-            else
-                this.onMoveToTarget.emit([event.item.data]);
+            previousIndex = isTransfer ? this.filterValueSource ? ObjectUtils.findIndexInList(data, this.source) : fromIndex : this.filterValueTarget ? ObjectUtils.findIndexInList(data, this.target) : fromIndex;
+            currentIndex = this.filterValueTarget ? this.findFilteredCurrentIndex(this.visibleOptionsTarget, toIndex, this.target) : toIndex;
+        }
+        return { previousIndex, currentIndex };
+    }
+    findFilteredCurrentIndex(visibleOptions, index, options) {
+        if (visibleOptions.length === index) {
+            let toIndex = ObjectUtils.findIndexInList(visibleOptions[index - 1], options);
+            return toIndex + 1;
+        }
+        else {
+            return ObjectUtils.findIndexInList(visibleOptions[index], options);
         }
     }
     resetFilter() {
@@ -455,14 +517,15 @@ PickList.decorators = [
                 template: `
         <div [class]="styleClass" [ngStyle]="style" [ngClass]="'p-picklist p-component'" cdkDropListGroup>
             <div class="p-picklist-buttons p-picklist-source-controls" *ngIf="showSourceControls">
-                <button type="button" pButton pRipple icon="pi pi-angle-up" [disabled]="disabled" (click)="moveUp(sourcelist,source,selectedItemsSource,onSourceReorder)"></button>
-                <button type="button" pButton pRipple icon="pi pi-angle-double-up" [disabled]="disabled" (click)="moveTop(sourcelist,source,selectedItemsSource,onSourceReorder)"></button>
-                <button type="button" pButton pRipple icon="pi pi-angle-down" [disabled]="disabled" (click)="moveDown(sourcelist,source,selectedItemsSource,onSourceReorder)"></button>
-                <button type="button" pButton pRipple icon="pi pi-angle-double-down" [disabled]="disabled" (click)="moveBottom(sourcelist,source,selectedItemsSource,onSourceReorder)"></button>
+                <button type="button" pButton pRipple icon="pi pi-angle-up" [disabled]="disabled" (click)="moveUp(sourcelist,source,selectedItemsSource,onSourceReorder,SOURCE_LIST)"></button>
+                <button type="button" pButton pRipple icon="pi pi-angle-double-up" [disabled]="disabled" (click)="moveTop(sourcelist,source,selectedItemsSource,onSourceReorder,SOURCE_LIST)"></button>
+                <button type="button" pButton pRipple icon="pi pi-angle-down" [disabled]="disabled" (click)="moveDown(sourcelist,source,selectedItemsSource,onSourceReorder,SOURCE_LIST)"></button>
+                <button type="button" pButton pRipple icon="pi pi-angle-double-down" [disabled]="disabled" (click)="moveBottom(sourcelist,source,selectedItemsSource,onSourceReorder,SOURCE_LIST)"></button>
             </div>
             <div class="p-picklist-list-wrapper p-picklist-source-wrapper">
-                <div class="p-picklist-header" *ngIf="sourceHeader">
-                    <div class="p-picklist-title">{{sourceHeader}}</div>
+                <div class="p-picklist-header" *ngIf="sourceHeader || sourceHeaderTemplate">
+                    <div class="p-picklist-title" *ngIf="!sourceHeaderTemplate">{{sourceHeader}}</div>
+                    <ng-container *ngTemplateOutlet="sourceHeaderTemplate"></ng-container>
                 </div>
                 <div class="p-picklist-filter-container" *ngIf="filterBy && showSourceFilter !== false">
                     <div class="p-picklist-filter">
@@ -474,16 +537,19 @@ PickList.decorators = [
                 <ul #sourcelist class="p-picklist-list p-picklist-source" cdkDropList [cdkDropListData]="source" (cdkDropListDropped)="onDrop($event, SOURCE_LIST)"
                     [ngStyle]="sourceStyle" role="listbox" aria-multiselectable="multiple">
                     <ng-template ngFor let-item [ngForOf]="source" [ngForTrackBy]="sourceTrackBy || trackBy" let-i="index" let-l="last">
-                        <li [ngClass]="{'p-picklist-item':true,'p-highlight':isSelected(item,selectedItemsSource),'p-disabled': disabled}" pRipple cdkDrag [cdkDragData]="item"
-                            (click)="onItemClick($event,item,selectedItemsSource,onSourceSelect)" (dblclick)="onSourceItemDblClick()" (touchend)="onItemTouchEnd($event)" (keydown)="onItemKeydown($event,item,selectedItemsSource,onSourceSelect)"
-                            [style.display]="isItemVisible(item, SOURCE_LIST) ? 'block' : 'none'" tabindex="0" role="option" [attr.aria-selected]="isSelected(item, selectedItemsSource)">
+                        <li [ngClass]="{'p-picklist-item':true,'p-highlight':isSelected(item,selectedItemsSource),'p-disabled': disabled}" pRipple cdkDrag [cdkDragData]="item" [cdkDragDisabled]="!dragdrop"
+                            (click)="onItemClick($event,item,selectedItemsSource,onSourceSelect)" (dblclick)="onSourceItemDblClick()" (touchend)="onItemTouchEnd()" (keydown)="onItemKeydown($event,item,selectedItemsSource,onSourceSelect)"
+                            *ngIf="isItemVisible(item, SOURCE_LIST)" tabindex="0" role="option" [attr.aria-selected]="isSelected(item, selectedItemsSource)">
                             <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i}"></ng-container>
                         </li>
                     </ng-template>
-                    <ng-container *ngIf="(source == null || source.length === 0) && emptyMessageSourceTemplate">
-                        <li class="p-picklist-empty-message">
+                    <ng-container *ngIf="isEmpty(SOURCE_LIST) && (emptyMessageSourceTemplate || emptyFilterMessageSourceTemplate)">
+                        <li class="p-picklist-empty-message" *ngIf="!filterValueSource || !emptyFilterMessageSourceTemplate">
                             <ng-container *ngTemplateOutlet="emptyMessageSourceTemplate"></ng-container>
                         </li>
+                        <li class="p-picklist-empty-message" *ngIf="filterValueSource">
+                            <ng-container *ngTemplateOutlet="emptyFilterMessageSourceTemplate"></ng-container>
+                        </li>
                     </ng-container>
                 </ul>
             </div>
@@ -494,8 +560,9 @@ PickList.decorators = [
                 <button type="button" pButton pRipple icon="pi pi-angle-double-left" [disabled]="disabled" (click)="moveAllLeft()"></button>
             </div>
             <div class="p-picklist-list-wrapper p-picklist-target-wrapper">
-                <div class="p-picklist-header" *ngIf="targetHeader">
-                    <div class="p-picklist-title" *ngIf="targetHeader">{{targetHeader}}</div>
+                <div class="p-picklist-header" *ngIf="targetHeader || targetHeaderTemplate">
+                    <div class="p-picklist-title" *ngIf="!targetHeaderTemplate">{{targetHeader}}</div>
+                    <ng-container *ngTemplateOutlet="targetHeaderTemplate"></ng-container>
                 </div>
                 <div class="p-picklist-filter-container" *ngIf="filterBy && showTargetFilter !== false">
                     <div class="p-picklist-filter">
@@ -506,30 +573,33 @@ PickList.decorators = [
                 <ul #targetlist class="p-picklist-list p-picklist-target" cdkDropList [cdkDropListData]="target" (cdkDropListDropped)="onDrop($event, TARGET_LIST)"
                     [ngStyle]="targetStyle" role="listbox" aria-multiselectable="multiple">
                     <ng-template ngFor let-item [ngForOf]="target" [ngForTrackBy]="targetTrackBy || trackBy" let-i="index" let-l="last">
-                        <li [ngClass]="{'p-picklist-item':true,'p-highlight':isSelected(item,selectedItemsTarget), 'p-disabled': disabled}" pRipple cdkDrag [cdkDragData]="item"
-                            (click)="onItemClick($event,item,selectedItemsTarget,onTargetSelect)" (dblclick)="onTargetItemDblClick()" (touchend)="onItemTouchEnd($event)" (keydown)="onItemKeydown($event,item,selectedItemsTarget,onTargetSelect)"
-                            [style.display]="isItemVisible(item, TARGET_LIST) ? 'block' : 'none'" tabindex="0" role="option" [attr.aria-selected]="isSelected(item, selectedItemsTarget)">
+                        <li [ngClass]="{'p-picklist-item':true,'p-highlight':isSelected(item,selectedItemsTarget), 'p-disabled': disabled}" pRipple cdkDrag [cdkDragData]="item" [cdkDragDisabled]="!dragdrop"
+                            (click)="onItemClick($event,item,selectedItemsTarget,onTargetSelect)" (dblclick)="onTargetItemDblClick()" (touchend)="onItemTouchEnd()" (keydown)="onItemKeydown($event,item,selectedItemsTarget,onTargetSelect)"
+                            *ngIf="isItemVisible(item, TARGET_LIST)" tabindex="0" role="option" [attr.aria-selected]="isSelected(item, selectedItemsTarget)">
                             <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i}"></ng-container>
                         </li>
                     </ng-template>
-                    <ng-container *ngIf="(target == null || target.length === 0) && emptyMessageTargetTemplate">
-                        <li class="p-picklist-empty-message">
+                    <ng-container *ngIf="isEmpty(TARGET_LIST) && (emptyMessageTargetTemplate || emptyFilterMessageTargetTemplate)">
+                        <li class="p-picklist-empty-message" *ngIf="!filterValueTarget || !emptyFilterMessageTargetTemplate">
                             <ng-container *ngTemplateOutlet="emptyMessageTargetTemplate"></ng-container>
                         </li>
+                        <li class="p-picklist-empty-message" *ngIf="filterValueTarget">
+                            <ng-container *ngTemplateOutlet="emptyFilterMessageTargetTemplate"></ng-container>
+                        </li>
                     </ng-container>
                 </ul>
             </div>
             <div class="p-picklist-buttons p-picklist-target-controls" *ngIf="showTargetControls">
-                <button type="button" pButton pRipple icon="pi pi-angle-up" [disabled]="disabled" (click)="moveUp(targetlist,target,selectedItemsTarget,onTargetReorder)"></button>
-                <button type="button" pButton pRipple icon="pi pi-angle-double-up" [disabled]="disabled" (click)="moveTop(targetlist,target,selectedItemsTarget,onTargetReorder)"></button>
-                <button type="button" pButton pRipple icon="pi pi-angle-down" [disabled]="disabled" (click)="moveDown(targetlist,target,selectedItemsTarget,onTargetReorder)"></button>
-                <button type="button" pButton pRipple icon="pi pi-angle-double-down" [disabled]="disabled" (click)="moveBottom(targetlist,target,selectedItemsTarget,onTargetReorder)"></button>
+                <button type="button" pButton pRipple icon="pi pi-angle-up" [disabled]="disabled" (click)="moveUp(targetlist,target,selectedItemsTarget,onTargetReorder,TARGET_LIST)"></button>
+                <button type="button" pButton pRipple icon="pi pi-angle-double-up" [disabled]="disabled" (click)="moveTop(targetlist,target,selectedItemsTarget,onTargetReorder,TARGET_LIST)"></button>
+                <button type="button" pButton pRipple icon="pi pi-angle-down" [disabled]="disabled" (click)="moveDown(targetlist,target,selectedItemsTarget,onTargetReorder,TARGET_LIST)"></button>
+                <button type="button" pButton pRipple icon="pi pi-angle-double-down" [disabled]="disabled" (click)="moveBottom(targetlist,target,selectedItemsTarget,onTargetReorder,TARGET_LIST)"></button>
             </div>
         </div>
     `,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
-                styles: [".p-picklist{display:flex}.p-picklist-buttons{display:flex;flex-direction:column;justify-content:center}.p-picklist-list-wrapper{flex:1 1 50%}.p-picklist-list{list-style-type:none;margin:0;min-height:12rem;overflow:auto;padding:0}.p-picklist-item{cursor:pointer;overflow:hidden;position:relative}.p-picklist-item:not(.cdk-drag-disabled){cursor:move}.p-picklist-item.cdk-drag-placeholder{opacity:0}.p-picklist-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.p-picklist-filter{position:relative}.p-picklist-filter-icon{margin-top:-.5rem;position:absolute;top:50%}.p-picklist-filter-input{width:100%}.p-picklist-list.cdk-drop-list-dragging .p-picklist-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}"]
+                styles: [".p-picklist{display:flex}.p-picklist-buttons{display:flex;flex-direction:column;justify-content:center}.p-picklist-list-wrapper{flex:1 1 50%}.p-picklist-list{list-style-type:none;margin:0;min-height:12rem;overflow:auto;padding:0}.p-picklist-item{cursor:pointer;display:block;overflow:hidden;position:relative}.p-picklist-item:not(.cdk-drag-disabled){cursor:move}.p-picklist-item.cdk-drag-placeholder{opacity:0}.p-picklist-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.p-picklist-filter{position:relative}.p-picklist-filter-icon{margin-top:-.5rem;position:absolute;top:50%}.p-picklist-filter-input{width:100%}.p-picklist-list.cdk-drop-list-dragging .p-picklist-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}"]
             },] }
 ];
 PickList.ctorParameters = () => [