primeng 20.1.2 → 20.2.0

package/fesm2022/primeng-orderlist.mjs

@@ -24,10 +24,10 @@ class OrderListStyle extends BaseStyle {
     name = 'orderlist';
     theme = 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.2", ngImport: i0, type: OrderListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", 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.2", ngImport: i0, type: OrderListStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -162,6 +162,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 +187,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;
@@ -348,6 +357,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;
@@ -423,7 +436,7 @@ class OrderList extends BaseComponent {
      * @group Method
      */
     resetFilter() {
-        this.filterValue = null;
+        this.filterValue = '';
         this.filterViewChild && (this.filterViewChild.nativeElement.value = '');
     }
     isItemVisible(item) {
@@ -445,22 +458,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 +490,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 +499,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 +516,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 +544,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 +553,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);
     }
@@ -606,8 +710,8 @@ class OrderList extends BaseComponent {
         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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: OrderList, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.2", 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)", "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 />
@@ -631,7 +735,7 @@ class OrderList extends BaseComponent {
             [multiple]="true"
             [options]="value"
             [(ngModel)]="d_selection"
-            optionLabel="name"
+            [optionLabel]="dataKey ?? 'name'"
             [id]="id + '_list'"
             [listStyle]="listStyle"
             [striped]="stripedRows"
@@ -672,9 +776,9 @@ class OrderList extends BaseComponent {
                 </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: 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", "dropListData", "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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: OrderList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: OrderList, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-orderList, p-orderlist, p-order-list',
@@ -704,7 +808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             [multiple]="true"
             [options]="value"
             [(ngModel)]="d_selection"
-            optionLabel="name"
+            [optionLabel]="dataKey ?? 'name'"
             [id]="id + '_list'"
             [listStyle]="listStyle"
             [striped]="stripedRows"
@@ -803,6 +907,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 +976,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.2", ngImport: i0, type: OrderListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: OrderListModule, imports: [OrderList, SharedModule], exports: [OrderList, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.2", 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.2", ngImport: i0, type: OrderListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [OrderList, SharedModule],