primeng 20.1.2 → 20.3.0-rc.1

package/fesm2022/primeng-orderlist.mjs

@@ -1,14 +1,17 @@
+export * from 'primeng/types/orderlist';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i1 from '@angular/common';
+import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, booleanAttribute, numberAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import * as i3 from '@angular/forms';
+import { Injectable, InjectionToken, inject, EventEmitter, booleanAttribute, numberAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { uuid, findIndexInList, setAttribute } from '@primeuix/utils';
 import { FilterService, SharedModule, PrimeTemplate } from 'primeng/api';
-import { BaseComponent } from 'primeng/basecomponent';
-import * as i2 from 'primeng/button';
+import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
+import * as i1 from 'primeng/bind';
+import { Bind } from 'primeng/bind';
+import * as i3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { AngleDoubleDownIcon, AngleDoubleUpIcon, AngleUpIcon, AngleDownIcon } from 'primeng/icons';
 import { Listbox } from 'primeng/listbox';
@@ -22,12 +25,12 @@ const classes = {
 };
 class OrderListStyle extends BaseStyle {
     name = 'orderlist';
-    theme = style;
+    style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: OrderListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: OrderListStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OrderListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OrderListStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: OrderListStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OrderListStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -51,11 +54,17 @@ var OrderListClasses;
     OrderListClasses["controls"] = "p-orderlist-controls";
 })(OrderListClasses || (OrderListClasses = {}));
 
+const ORDERLIST_INSTANCE = new InjectionToken('ORDERLIST_INSTANCE');
 /**
  * OrderList is used to manage the order of a collection.
  * @group Components
  */
 class OrderList extends BaseComponent {
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pcOrderList = inject(ORDERLIST_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
     /**
      * Text for the caption.
      * @group Props
@@ -162,6 +171,11 @@ class OrderList extends BaseComponent {
      * @group Props
      */
     autoOptionFocus = true;
+    /**
+     * Name of the field that uniquely identifies the record in the data.
+     * @group Props
+     */
+    dataKey;
     /**
      * A list of values that are currently selected.
      * @group Props
@@ -182,6 +196,10 @@ class OrderList extends BaseComponent {
         if (this.filterValue) {
             this.filter();
         }
+        else if (this.dragdrop) {
+            // Initialize visibleOptions for drag&drop even when no filtering is active
+            this.visibleOptions = [...(val || [])];
+        }
     }
     get value() {
         return this._value;
@@ -337,8 +355,7 @@ class OrderList extends BaseComponent {
                 return this.buttonProps;
         }
     }
-    ngOnInit() {
-        super.ngOnInit();
+    onInit() {
         if (this.responsive) {
             this.createStyle();
         }
@@ -348,6 +365,10 @@ class OrderList extends BaseComponent {
                 reset: () => this.resetFilter()
             };
         }
+        // Initialize visibleOptions for drag&drop if enabled and value exists
+        if (this.dragdrop && this.value && !this.visibleOptions) {
+            this.visibleOptions = [...this.value];
+        }
     }
     templates;
     _itemTemplate;
@@ -360,7 +381,7 @@ class OrderList extends BaseComponent {
     _moveDownIconTemplate;
     _moveBottomIconTemplate;
     _filterIconTemplate;
-    ngAfterContentInit() {
+    onAfterContentInit() {
         this.templates.forEach((item) => {
             switch (item.getType()) {
                 case 'item':
@@ -423,7 +444,7 @@ class OrderList extends BaseComponent {
      * @group Method
      */
     resetFilter() {
-        this.filterValue = null;
+        this.filterValue = '';
         this.filterViewChild && (this.filterViewChild.nativeElement.value = '');
     }
     isItemVisible(item) {
@@ -445,22 +466,29 @@ class OrderList extends BaseComponent {
         return this.filterValue ? !this.visibleOptions || this.visibleOptions.length === 0 : !this.value || this.value.length === 0;
     }
     moveUp() {
-        if (this.selection) {
-            for (let i = 0; i < this.selection.length; i++) {
-                let selectedItem = this.selection[i];
+        if (this.selection && this.value instanceof Array) {
+            // Sort selection by their current index to process them from top to bottom
+            const sortedSelection = this.sortByIndexInList(this.selection, this.value);
+            for (let selectedItem of sortedSelection) {
                 let selectedItemIndex = findIndexInList(selectedItem, this.value);
-                if (selectedItemIndex != 0 && this.value instanceof Array) {
+                // Only move if not at top and there's a valid position above
+                if (selectedItemIndex > 0) {
                     let movedItem = this.value[selectedItemIndex];
                     let temp = this.value[selectedItemIndex - 1];
                     this.value[selectedItemIndex - 1] = movedItem;
                     this.value[selectedItemIndex] = temp;
                 }
-                else {
-                    break;
+                // Don't break - continue with other items even if one can't move
+            }
+            if (this.dragdrop) {
+                if (this.filterValue) {
+                    this.filter();
+                }
+                else if (this.visibleOptions) {
+                    // Update visibleOptions to match value when no filtering
+                    this.visibleOptions = [...this.value];
                 }
             }
-            if (this.dragdrop && this.filterValue)
-                this.filter();
             this.movedUp = true;
             this.onReorder.emit(this.selection);
         }
@@ -470,7 +498,7 @@ class OrderList extends BaseComponent {
         if (this.selection) {
             for (let i = this.selection.length - 1; i >= 0; i--) {
                 let selectedItem = this.selection[i];
-                let selectedItemIndex = findIndexInList(selectedItem, this.value);
+                let selectedItemIndex = findIndexInList(selectedItem, this.value || []);
                 if (selectedItemIndex != 0 && this.value instanceof Array) {
                     let movedItem = this.value.splice(selectedItemIndex, 1)[0];
                     this.value.unshift(movedItem);
@@ -479,8 +507,15 @@ class OrderList extends BaseComponent {
                     break;
                 }
             }
-            if (this.dragdrop && this.filterValue)
-                this.filter();
+            if (this.dragdrop) {
+                if (this.filterValue) {
+                    this.filter();
+                }
+                else if (this.visibleOptions) {
+                    // Update visibleOptions to match value when no filtering
+                    this.visibleOptions = [...(this.value || [])];
+                }
+            }
             this.onReorder.emit(this.selection);
             setTimeout(() => {
                 this.listViewChild.scrollInView(0);
@@ -489,22 +524,25 @@ class OrderList extends BaseComponent {
         this.listViewChild?.cd?.markForCheck();
     }
     moveDown() {
-        if (this.selection) {
-            for (let i = this.selection.length - 1; i >= 0; i--) {
-                let selectedItem = this.selection[i];
+        if (this.selection && this.value instanceof Array) {
+            const sortedSelection = this.sortByIndexInList(this.selection, this.value).reverse();
+            for (let selectedItem of sortedSelection) {
                 let selectedItemIndex = findIndexInList(selectedItem, this.value);
-                if (this.value instanceof Array && selectedItemIndex != this.value.length - 1) {
+                if (selectedItemIndex < this.value.length - 1) {
                     let movedItem = this.value[selectedItemIndex];
                     let temp = this.value[selectedItemIndex + 1];
                     this.value[selectedItemIndex + 1] = movedItem;
                     this.value[selectedItemIndex] = temp;
                 }
-                else {
-                    break;
+            }
+            if (this.dragdrop) {
+                if (this.filterValue) {
+                    this.filter();
+                }
+                else if (this.visibleOptions) {
+                    this.visibleOptions = [...this.value];
                 }
             }
-            if (this.dragdrop && this.filterValue)
-                this.filter();
             this.movedDown = true;
             this.onReorder.emit(this.selection);
         }
@@ -514,7 +552,7 @@ class OrderList extends BaseComponent {
         if (this.selection) {
             for (let i = 0; i < this.selection.length; i++) {
                 let selectedItem = this.selection[i];
-                let selectedItemIndex = findIndexInList(selectedItem, this.value);
+                let selectedItemIndex = findIndexInList(selectedItem, this.value || []);
                 if (this.value instanceof Array && selectedItemIndex != this.value.length - 1) {
                     let movedItem = this.value.splice(selectedItemIndex, 1)[0];
                     this.value.push(movedItem);
@@ -523,28 +561,102 @@ class OrderList extends BaseComponent {
                     break;
                 }
             }
-            if (this.dragdrop && this.filterValue)
-                this.filter();
+            if (this.dragdrop) {
+                if (this.filterValue) {
+                    this.filter();
+                }
+                else if (this.visibleOptions) {
+                    this.visibleOptions = [...(this.value || [])];
+                }
+            }
             this.onReorder.emit(this.selection);
-            this.listViewChild.scrollInView(this.value?.length - 1);
+            this.listViewChild?.scrollInView(this.value?.length ? this.value.length - 1 : 0);
         }
         this.listViewChild?.cd?.markForCheck();
     }
     onDrop(event) {
         let previousIndex = event.previousIndex;
         let currentIndex = event.currentIndex;
+        // Store the original state before any modifications
+        const originalValue = [...(this.value || [])];
+        const originalVisibleOptions = this.visibleOptions ? [...this.visibleOptions] : null;
         if (previousIndex !== currentIndex) {
-            if (this.visibleOptions) {
+            // Determine items to move
+            let itemsToMove = [];
+            // Check if dragged item is in selected items AND we have multiple selections
+            if (this.selection && this.selection.length > 1 && findIndexInList(event.item.data, this.selection) !== -1) {
+                // Multi-selection: Move all selected items
+                itemsToMove = [...this.selection];
+                // For multi-selection, restore original state to undo Listbox's automatic reordering
+                if (this.value) {
+                    this.value.length = 0;
+                    this.value.push(...originalValue);
+                }
+                if (originalVisibleOptions && this.visibleOptions) {
+                    this.visibleOptions.length = 0;
+                    this.visibleOptions.push(...originalVisibleOptions);
+                }
+                // Sort items by their index in the array to maintain relative order
+                itemsToMove = this.sortByIndexInList(itemsToMove, this.value || []);
+                // Calculate how many selected items are before the drop position
+                let itemsBefore = 0;
+                for (const item of itemsToMove) {
+                    const itemIndex = findIndexInList(item, this.value || []);
+                    if (itemIndex !== -1 && itemIndex < currentIndex) {
+                        itemsBefore++;
+                    }
+                }
+                // Remove all selected items (in reverse order to avoid index shifting)
+                for (let i = itemsToMove.length - 1; i >= 0; i--) {
+                    const itemIndex = findIndexInList(itemsToMove[i], this.value || []);
+                    if (itemIndex !== -1) {
+                        this.value?.splice(itemIndex, 1);
+                    }
+                }
+                // Calculate the final target index
+                // If we're dragging down, we need to subtract the number of items that were before the target
+                const targetIndex = Math.max(0, currentIndex - itemsBefore);
+                // Insert all selected items at the target position
+                for (let i = 0; i < itemsToMove.length; i++) {
+                    this.value?.splice(targetIndex + i, 0, itemsToMove[i]);
+                }
+                // Update visibleOptions to match value
+                if (this.dragdrop) {
+                    if (this.filterValue) {
+                        this.filter();
+                    }
+                    else if (this.visibleOptions) {
+                        this.visibleOptions = [...(this.value || [])];
+                    }
+                }
+                // Ensure change detection runs
+                this.cd?.markForCheck();
+                this.onReorder.emit(itemsToMove);
+            }
+            else {
+                // Single item: Move only the dragged item (let Listbox handle it)
+                itemsToMove = [event.item.data];
                 if (this.filterValue) {
-                    previousIndex = findIndexInList(event.item.data, this.value);
-                    currentIndex = findIndexInList(this.visibleOptions[currentIndex], this.value);
+                    previousIndex = findIndexInList(event.item.data, this.value || []);
+                    currentIndex = findIndexInList(this.visibleOptions?.[currentIndex], this.value || []);
+                }
+                moveItemInArray(this.value, previousIndex, currentIndex);
+                // Sync visibleOptions for non-filtered case
+                if (this.dragdrop && this.visibleOptions && !this.filterValue) {
+                    this.visibleOptions = [...(this.value || [])];
                 }
-                moveItemInArray(this.visibleOptions, event.previousIndex, event.currentIndex);
+                this.onReorder.emit([event.item.data]);
             }
-            moveItemInArray(this.value, previousIndex, currentIndex);
-            this.onReorder.emit([event.item.data]);
         }
     }
+    // Helper method to sort items by their index in a list
+    sortByIndexInList(items, list) {
+        return items.sort((a, b) => {
+            const indexA = findIndexInList(a, list);
+            const indexB = findIndexInList(b, list);
+            return indexA - indexB;
+        });
+    }
     onListFocus(event) {
         this.onFocus.emit(event);
     }
@@ -569,21 +681,21 @@ class OrderList extends BaseComponent {
                 this.renderer.appendChild(this.document.head, this.styleElement);
                 let innerHTML = `
                     @media screen and (max-width: ${this.breakpoint}) {
-                        .p-orderlist[${this.attrSelector}] {
+                        .p-orderlist[${this.$attrSelector}] {
                             flex-direction: column;
                         }
 
-                        .p-orderlist[${this.attrSelector}] .p-orderlist-controls {
+                        .p-orderlist[${this.$attrSelector}] .p-orderlist-controls {
                             padding: var(--content-padding);
                             flex-direction: row;
                         }
 
-                        .p-orderlist[${this.attrSelector}] .p-orderlist-controls .p-button {
+                        .p-orderlist[${this.$attrSelector}] .p-orderlist-controls .p-button {
                             margin-right: var(--inline-spacing);
                             margin-bottom: 0;
                         }
 
-                        .p-orderlist[${this.attrSelector}] .p-orderlist-controls .p-button:last-child {
+                        .p-orderlist[${this.$attrSelector}] .p-orderlist-controls .p-button:last-child {
                             margin-right: 0;
                         }
                     }
@@ -602,36 +714,36 @@ class OrderList extends BaseComponent {
             }
         }
     }
-    ngOnDestroy() {
+    onDestroy() {
         this.destroyStyle();
-        super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: OrderList, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.0", type: OrderList, isStandalone: true, selector: "p-orderList, p-orderlist, p-order-list", inputs: { header: "header", styleClass: "styleClass", tabindex: ["tabindex", "tabindex", numberAttribute], ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", listStyle: "listStyle", responsive: ["responsive", "responsive", booleanAttribute], filterBy: "filterBy", filterPlaceholder: "filterPlaceholder", filterLocale: "filterLocale", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], dragdrop: ["dragdrop", "dragdrop", booleanAttribute], controlsPosition: "controlsPosition", ariaFilterLabel: "ariaFilterLabel", filterMatchMode: "filterMatchMode", breakpoint: "breakpoint", stripedRows: ["stripedRows", "stripedRows", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], trackBy: "trackBy", scrollHeight: "scrollHeight", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], selection: "selection", value: "value", buttonProps: "buttonProps", moveUpButtonProps: "moveUpButtonProps", moveTopButtonProps: "moveTopButtonProps", moveDownButtonProps: "moveDownButtonProps", moveBottomButtonProps: "moveBottomButtonProps" }, outputs: { selectionChange: "selectionChange", onReorder: "onReorder", onSelectionChange: "onSelectionChange", onFilterEvent: "onFilterEvent", onFocus: "onFocus", onBlur: "onBlur" }, host: { properties: { "class": "cn(cx('root'), styleClass)", "attr.data-pc-section": "'root'" } }, providers: [OrderListStyle], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "emptyMessageTemplate", first: true, predicate: ["empty"] }, { propertyName: "emptyFilterMessageTemplate", first: true, predicate: ["emptyfilter"] }, { propertyName: "filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "moveUpIconTemplate", first: true, predicate: ["moveupicon"] }, { propertyName: "moveTopIconTemplate", first: true, predicate: ["movetopicon"] }, { propertyName: "moveDownIconTemplate", first: true, predicate: ["movedownicon"] }, { propertyName: "moveBottomIconTemplate", first: true, predicate: ["movebottomicon"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["listelement"], descendants: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <div [class]="cx('controls')" [attr.data-pc-section]="'controls'">
-            <button type="button" [disabled]="moveDisabled()" pButton pRipple (click)="moveUp()" [attr.aria-label]="moveUpAriaLabel" [attr.data-pc-section]="'moveUpButton'" [buttonProps]="getButtonProps('up')">
-                <svg data-p-icon="angle-up" *ngIf="!moveUpIconTemplate && !_moveUpIconTemplate" [attr.data-pc-section]="'moveupicon'" pButtonIcon />
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OrderList, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: OrderList, isStandalone: true, selector: "p-orderList, p-orderlist, p-order-list", inputs: { header: "header", styleClass: "styleClass", tabindex: ["tabindex", "tabindex", numberAttribute], ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", listStyle: "listStyle", responsive: ["responsive", "responsive", booleanAttribute], filterBy: "filterBy", filterPlaceholder: "filterPlaceholder", filterLocale: "filterLocale", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], dragdrop: ["dragdrop", "dragdrop", booleanAttribute], controlsPosition: "controlsPosition", ariaFilterLabel: "ariaFilterLabel", filterMatchMode: "filterMatchMode", breakpoint: "breakpoint", stripedRows: ["stripedRows", "stripedRows", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], trackBy: "trackBy", scrollHeight: "scrollHeight", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], dataKey: "dataKey", selection: "selection", value: "value", buttonProps: "buttonProps", moveUpButtonProps: "moveUpButtonProps", moveTopButtonProps: "moveTopButtonProps", moveDownButtonProps: "moveDownButtonProps", moveBottomButtonProps: "moveBottomButtonProps" }, outputs: { selectionChange: "selectionChange", onReorder: "onReorder", onSelectionChange: "onSelectionChange", onFilterEvent: "onFilterEvent", onFocus: "onFocus", onBlur: "onBlur" }, host: { properties: { "class": "cn(cx('root'), styleClass)" } }, providers: [OrderListStyle, { provide: ORDERLIST_INSTANCE, useExisting: OrderList }, { provide: PARENT_INSTANCE, useExisting: OrderList }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "emptyMessageTemplate", first: true, predicate: ["empty"] }, { propertyName: "emptyFilterMessageTemplate", first: true, predicate: ["emptyfilter"] }, { propertyName: "filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "moveUpIconTemplate", first: true, predicate: ["moveupicon"] }, { propertyName: "moveTopIconTemplate", first: true, predicate: ["movetopicon"] }, { propertyName: "moveDownIconTemplate", first: true, predicate: ["movedownicon"] }, { propertyName: "moveBottomIconTemplate", first: true, predicate: ["movebottomicon"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["listelement"], descendants: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <div [pBind]="ptm('controls')" [class]="cx('controls')">
+            <button [pt]="ptm('pcMoveUpButton')" type="button" [disabled]="moveDisabled()" pButton pRipple (click)="moveUp()" [attr.aria-label]="moveUpAriaLabel" [buttonProps]="getButtonProps('up')" hostName="orderlist">
+                <svg data-p-icon="angle-up" *ngIf="!moveUpIconTemplate && !_moveUpIconTemplate" pButtonIcon [pt]="ptm('pcMoveUpButton')['icon']" />
                 <ng-template *ngTemplateOutlet="moveUpIconTemplate || _moveUpIconTemplate"></ng-template>
             </button>
-            <button type="button" [disabled]="moveDisabled()" pButton pRipple (click)="moveTop()" [attr.aria-label]="moveTopAriaLabel" [attr.data-pc-section]="'moveTopButton'" [buttonProps]="getButtonProps('top')">
-                <svg data-p-icon="angle-double-up" *ngIf="!moveTopIconTemplate && !_moveTopIconTemplate" [attr.data-pc-section]="'movetopicon'" pButtonIcon />
+            <button [pt]="ptm('pcMoveTopButton')" type="button" [disabled]="moveDisabled()" pButton pRipple (click)="moveTop()" [attr.aria-label]="moveTopAriaLabel" [buttonProps]="getButtonProps('top')" hostName="orderlist">
+                <svg data-p-icon="angle-double-up" *ngIf="!moveTopIconTemplate && !_moveTopIconTemplate" pButtonIcon [pt]="ptm('pcMoveTopButton')['icon']" />
                 <ng-template *ngTemplateOutlet="moveTopIconTemplate || _moveTopIconTemplate"></ng-template>
             </button>
-            <button type="button" [disabled]="moveDisabled()" pButton pRipple (click)="moveDown()" [attr.aria-label]="moveDownAriaLabel" [attr.data-pc-section]="'moveDownButton'" [buttonProps]="getButtonProps('down')">
-                <svg data-p-icon="angle-down" *ngIf="!moveDownIconTemplate && !_moveDownIconTemplate" [attr.data-pc-section]="'movedownicon'" pButtonIcon />
+            <button [pt]="ptm('pcMoveDownButton')" type="button" [disabled]="moveDisabled()" pButton pRipple (click)="moveDown()" [attr.aria-label]="moveDownAriaLabel" [buttonProps]="getButtonProps('down')" hostName="orderlist">
+                <svg data-p-icon="angle-down" *ngIf="!moveDownIconTemplate && !_moveDownIconTemplate" pButtonIcon [pt]="ptm('pcMoveDownButton')['icon']" />
                 <ng-template *ngTemplateOutlet="moveDownIconTemplate || _moveDownIconTemplate"></ng-template>
             </button>
-            <button type="button" [disabled]="moveDisabled()" pButton pRipple (click)="moveBottom()" [attr.aria-label]="moveBottomAriaLabel" [attr.data-pc-section]="'moveBottomButton'" [buttonProps]="getButtonProps('bottom')">
-                <svg data-p-icon="angle-double-down" *ngIf="!moveBottomIconTemplate && !_moveBottomIconTemplate" [attr.data-pc-section]="'movebottomicon'" pButtonIcon />
+            <button [pt]="ptm('pcMoveBottomButton')" type="button" [disabled]="moveDisabled()" pButton pRipple (click)="moveBottom()" [attr.aria-label]="moveBottomAriaLabel" [buttonProps]="getButtonProps('bottom')" hostName="orderlist">
+                <svg data-p-icon="angle-double-down" *ngIf="!moveBottomIconTemplate && !_moveBottomIconTemplate" pButtonIcon [pt]="ptm('pcMoveBottomButton')['icon']" />
                 <ng-template *ngTemplateOutlet="moveBottomIconTemplate || _moveBottomIconTemplate"></ng-template>
             </button>
         </div>
         <p-listbox
+            [pt]="ptm('pcListbox')"
             #listelement
             [multiple]="true"
             [options]="value"
             [(ngModel)]="d_selection"
-            optionLabel="name"
+            [optionLabel]="dataKey ?? 'name'"
             [id]="id + '_list'"
             [listStyle]="listStyle"
             [striped]="stripedRows"
@@ -650,6 +762,7 @@ class OrderList extends BaseComponent {
             [filterPlaceHolder]="filterPlaceholder"
             [dragdrop]="dragdrop"
             (onDrop)="onDrop($event)"
+            hostName="orderlist"
         >
             <ng-container *ngIf="headerTemplate || _headerTemplate">
                 <ng-template #header>
@@ -671,40 +784,51 @@ class OrderList extends BaseComponent {
                     <ng-template *ngTemplateOutlet="emptyFilterMessageTemplate || _emptyFilterMessageTemplate"></ng-template>
                 </ng-template>
             </ng-container>
+            <ng-container *ngIf="filterIconTemplate || _filterIconTemplate">
+                <ng-template #filtericon>
+                    <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
+                </ng-template>
+            </ng-container>
+            <ng-container *ngIf="filterTemplate || _filterTemplate">
+                <ng-template #filter let-options="options">
+                    <ng-template *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { options: options }"></ng-template>
+                </ng-template>
+            </ng-container>
         </p-listbox>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: i2.ButtonIcon, selector: "[pButtonIcon]" }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "component", type: AngleDoubleDownIcon, selector: "[data-p-icon=\"angle-double-down\"]" }, { kind: "component", type: AngleDoubleUpIcon, selector: "[data-p-icon=\"angle-double-up\"]" }, { kind: "component", type: AngleUpIcon, selector: "[data-p-icon=\"angle-up\"]" }, { kind: "component", type: AngleDownIcon, selector: "[data-p-icon=\"angle-down\"]" }, { kind: "component", type: Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { 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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: i3.ButtonIcon, selector: "[pButtonIcon]", inputs: ["ptButtonIcon"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "component", type: AngleDoubleDownIcon, selector: "[data-p-icon=\"angle-double-down\"]" }, { kind: "component", type: AngleDoubleUpIcon, selector: "[data-p-icon=\"angle-double-up\"]" }, { kind: "component", type: AngleUpIcon, selector: "[data-p-icon=\"angle-up\"]" }, { kind: "component", type: AngleDownIcon, selector: "[data-p-icon=\"angle-down\"]" }, { kind: "component", type: Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["hostName", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: OrderList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OrderList, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-orderList, p-orderlist, p-order-list',
                     standalone: true,
-                    imports: [CommonModule, ButtonModule, Ripple, DragDropModule, AngleDoubleDownIcon, AngleDoubleUpIcon, AngleUpIcon, AngleDownIcon, Listbox, FormsModule, SharedModule],
+                    imports: [CommonModule, ButtonModule, Ripple, DragDropModule, AngleDoubleDownIcon, AngleDoubleUpIcon, AngleUpIcon, AngleDownIcon, Listbox, FormsModule, SharedModule, Bind],
                     template: `
-        <div [class]="cx('controls')" [attr.data-pc-section]="'controls'">
-            <button type="button" [disabled]="moveDisabled()" pButton pRipple (click)="moveUp()" [attr.aria-label]="moveUpAriaLabel" [attr.data-pc-section]="'moveUpButton'" [buttonProps]="getButtonProps('up')">
-                <svg data-p-icon="angle-up" *ngIf="!moveUpIconTemplate && !_moveUpIconTemplate" [attr.data-pc-section]="'moveupicon'" pButtonIcon />
+        <div [pBind]="ptm('controls')" [class]="cx('controls')">
+            <button [pt]="ptm('pcMoveUpButton')" type="button" [disabled]="moveDisabled()" pButton pRipple (click)="moveUp()" [attr.aria-label]="moveUpAriaLabel" [buttonProps]="getButtonProps('up')" hostName="orderlist">
+                <svg data-p-icon="angle-up" *ngIf="!moveUpIconTemplate && !_moveUpIconTemplate" pButtonIcon [pt]="ptm('pcMoveUpButton')['icon']" />
                 <ng-template *ngTemplateOutlet="moveUpIconTemplate || _moveUpIconTemplate"></ng-template>
             </button>
-            <button type="button" [disabled]="moveDisabled()" pButton pRipple (click)="moveTop()" [attr.aria-label]="moveTopAriaLabel" [attr.data-pc-section]="'moveTopButton'" [buttonProps]="getButtonProps('top')">
-                <svg data-p-icon="angle-double-up" *ngIf="!moveTopIconTemplate && !_moveTopIconTemplate" [attr.data-pc-section]="'movetopicon'" pButtonIcon />
+            <button [pt]="ptm('pcMoveTopButton')" type="button" [disabled]="moveDisabled()" pButton pRipple (click)="moveTop()" [attr.aria-label]="moveTopAriaLabel" [buttonProps]="getButtonProps('top')" hostName="orderlist">
+                <svg data-p-icon="angle-double-up" *ngIf="!moveTopIconTemplate && !_moveTopIconTemplate" pButtonIcon [pt]="ptm('pcMoveTopButton')['icon']" />
                 <ng-template *ngTemplateOutlet="moveTopIconTemplate || _moveTopIconTemplate"></ng-template>
             </button>
-            <button type="button" [disabled]="moveDisabled()" pButton pRipple (click)="moveDown()" [attr.aria-label]="moveDownAriaLabel" [attr.data-pc-section]="'moveDownButton'" [buttonProps]="getButtonProps('down')">
-                <svg data-p-icon="angle-down" *ngIf="!moveDownIconTemplate && !_moveDownIconTemplate" [attr.data-pc-section]="'movedownicon'" pButtonIcon />
+            <button [pt]="ptm('pcMoveDownButton')" type="button" [disabled]="moveDisabled()" pButton pRipple (click)="moveDown()" [attr.aria-label]="moveDownAriaLabel" [buttonProps]="getButtonProps('down')" hostName="orderlist">
+                <svg data-p-icon="angle-down" *ngIf="!moveDownIconTemplate && !_moveDownIconTemplate" pButtonIcon [pt]="ptm('pcMoveDownButton')['icon']" />
                 <ng-template *ngTemplateOutlet="moveDownIconTemplate || _moveDownIconTemplate"></ng-template>
             </button>
-            <button type="button" [disabled]="moveDisabled()" pButton pRipple (click)="moveBottom()" [attr.aria-label]="moveBottomAriaLabel" [attr.data-pc-section]="'moveBottomButton'" [buttonProps]="getButtonProps('bottom')">
-                <svg data-p-icon="angle-double-down" *ngIf="!moveBottomIconTemplate && !_moveBottomIconTemplate" [attr.data-pc-section]="'movebottomicon'" pButtonIcon />
+            <button [pt]="ptm('pcMoveBottomButton')" type="button" [disabled]="moveDisabled()" pButton pRipple (click)="moveBottom()" [attr.aria-label]="moveBottomAriaLabel" [buttonProps]="getButtonProps('bottom')" hostName="orderlist">
+                <svg data-p-icon="angle-double-down" *ngIf="!moveBottomIconTemplate && !_moveBottomIconTemplate" pButtonIcon [pt]="ptm('pcMoveBottomButton')['icon']" />
                 <ng-template *ngTemplateOutlet="moveBottomIconTemplate || _moveBottomIconTemplate"></ng-template>
             </button>
         </div>
         <p-listbox
+            [pt]="ptm('pcListbox')"
             #listelement
             [multiple]="true"
             [options]="value"
             [(ngModel)]="d_selection"
-            optionLabel="name"
+            [optionLabel]="dataKey ?? 'name'"
             [id]="id + '_list'"
             [listStyle]="listStyle"
             [striped]="stripedRows"
@@ -723,6 +847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             [filterPlaceHolder]="filterPlaceholder"
             [dragdrop]="dragdrop"
             (onDrop)="onDrop($event)"
+            hostName="orderlist"
         >
             <ng-container *ngIf="headerTemplate || _headerTemplate">
                 <ng-template #header>
@@ -744,15 +869,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     <ng-template *ngTemplateOutlet="emptyFilterMessageTemplate || _emptyFilterMessageTemplate"></ng-template>
                 </ng-template>
             </ng-container>
+            <ng-container *ngIf="filterIconTemplate || _filterIconTemplate">
+                <ng-template #filtericon>
+                    <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
+                </ng-template>
+            </ng-container>
+            <ng-container *ngIf="filterTemplate || _filterTemplate">
+                <ng-template #filter let-options="options">
+                    <ng-template *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { options: options }"></ng-template>
+                </ng-template>
+            </ng-container>
         </p-listbox>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [OrderListStyle],
+                    providers: [OrderListStyle, { provide: ORDERLIST_INSTANCE, useExisting: OrderList }, { provide: PARENT_INSTANCE, useExisting: OrderList }],
                     host: {
-                        '[class]': "cn(cx('root'), styleClass)",
-                        '[attr.data-pc-section]': "'root'"
-                    }
+                        '[class]': "cn(cx('root'), styleClass)"
+                    },
+                    hostDirectives: [Bind]
                 }]
         }], propDecorators: { header: [{
                 type: Input
@@ -803,6 +938,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }], autoOptionFocus: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], dataKey: [{
+                type: Input
             }], selection: [{
                 type: Input
             }], value: [{
@@ -870,11 +1007,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class OrderListModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: OrderListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: OrderListModule, imports: [OrderList, SharedModule], exports: [OrderList, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: OrderListModule, imports: [OrderList, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OrderListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: OrderListModule, imports: [OrderList, SharedModule], exports: [OrderList, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OrderListModule, imports: [OrderList, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: OrderListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OrderListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [OrderList, SharedModule],