primeng 19.1.3 → 20.0.0-beta.1

package/fesm2022/primeng-orderlist.mjs

@@ -5,40 +5,28 @@ 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 i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { uuid, find, scrollInView, findIndexInList, insertIntoOrderedArray, findSingle, hasClass, isHidden, setAttribute } from '@primeuix/utils';
+import { uuid, findIndexInList, setAttribute } from '@primeuix/utils';
 import { FilterService, SharedModule, PrimeTemplate } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { ButtonDirective } from 'primeng/button';
 import { AngleDoubleDownIcon, AngleDoubleUpIcon, AngleUpIcon, AngleDownIcon } from 'primeng/icons';
 import { Listbox } from 'primeng/listbox';
 import { Ripple } from 'primeng/ripple';
+import { style } from '@primeuix/styles/orderlist';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-orderlist {
-    display: flex;
-    gap: ${dt('orderlist.gap')};
-}
-
-.p-orderlist-controls {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: ${dt('orderlist.controls.gap')};
-}
-`;
 const classes = {
-    root: 'p-orderlist p-component',
+    root: () => ['p-orderlist p-component'],
     controls: 'p-orderlist-controls'
 };
 class OrderListStyle extends BaseStyle {
     name = 'orderlist';
-    theme = theme;
+    theme = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OrderListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OrderListStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OrderListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OrderListStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OrderListStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OrderListStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -72,13 +60,9 @@ class OrderList extends BaseComponent {
      * @group Props
      */
     header;
-    /**
-     * Inline style of the component.
-     * @group Props
-     */
-    style;
     /**
      * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -161,7 +145,7 @@ class OrderList extends BaseComponent {
      * When present, it specifies that the component should be disabled.
      * @group Props
      */
-    disabled = false;
+    disabled;
     /**
      * Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity.
      * @group Props
@@ -334,9 +318,6 @@ class OrderList extends BaseComponent {
     itemTouched;
     styleElement;
     id = uuid('pn_id_');
-    focused = false;
-    focusedOptionIndex = -1;
-    focusedOption;
     filterValue;
     visibleOptions;
     _value;
@@ -367,21 +348,6 @@ class OrderList extends BaseComponent {
             };
         }
     }
-    ngAfterViewChecked() {
-        if (this.movedUp || this.movedDown) {
-            let listItems = find(this.listViewChild?.el.nativeElement, 'li.p-listbox-option-selected');
-            let listItem;
-            if (listItems.length > 0) {
-                if (this.movedUp)
-                    listItem = listItems[0];
-                else
-                    listItem = listItems[listItems.length - 1];
-                scrollInView(this.listViewChild?.el.nativeElement, listItem);
-            }
-            this.movedUp = false;
-            this.movedDown = false;
-        }
-    }
     templates;
     _itemTemplate;
     _emptyMessageTemplate;
@@ -432,38 +398,12 @@ class OrderList extends BaseComponent {
             }
         });
     }
-    onItemClick(event, item, index, selectedId) {
-        this.itemTouched = false;
-        let focusedIndex = index ? index : findIndexInList(this.focusedOption, this.value);
-        let selectedIndex = findIndexInList(item, this.d_selection);
-        let selected = selectedIndex !== -1;
-        let metaSelection = this.itemTouched ? false : this.metaKeySelection;
-        if (selectedId) {
-            this.focusedOptionIndex = selectedId;
-        }
-        if (metaSelection) {
-            let metaKey = event.metaKey || event.ctrlKey;
-            if (selected && metaKey) {
-                this.d_selection = this.d_selection.filter((val, focusedIndex) => focusedIndex !== selectedIndex);
-            }
-            else {
-                this.d_selection = metaKey ? (this.d_selection ? [...this.d_selection] : []) : [];
-                insertIntoOrderedArray(item, focusedIndex, this.d_selection, this.value);
-            }
-        }
-        else {
-            if (selected) {
-                this.d_selection = this.d_selection.filter((val, focusedIndex) => focusedIndex !== selectedIndex);
-            }
-            else {
-                this.d_selection = this.d_selection ? [...this.d_selection] : [];
-                insertIntoOrderedArray(item, focusedIndex, this.d_selection, this.value);
-            }
-        }
+    onChangeSelection(e) {
+        this.d_selection = e.value;
         //binding
-        this.selectionChange.emit(this.d_selection);
+        this.selectionChange.emit(e.value);
         //event
-        this.onSelectionChange.emit({ originalEvent: event, value: this.d_selection });
+        this.onSelectionChange.emit({ originalEvent: e.originalEvent, value: e.value });
     }
     onFilterKeyup(event) {
         this.filterValue = event.target.value.trim().toLocaleLowerCase(this.filterLocale);
@@ -497,9 +437,6 @@ class OrderList extends BaseComponent {
             return true;
         }
     }
-    onItemTouchEnd() {
-        this.itemTouched = true;
-    }
     isSelected(item) {
         return findIndexInList(item, this.d_selection) !== -1;
     }
@@ -604,175 +541,23 @@ class OrderList extends BaseComponent {
                 moveItemInArray(this.visibleOptions, event.previousIndex, event.currentIndex);
             }
             moveItemInArray(this.value, previousIndex, currentIndex);
-            this.changeFocusedOptionIndex(currentIndex);
             this.onReorder.emit([event.item.data]);
         }
     }
     onListFocus(event) {
-        const focusableEl = findSingle(this.listViewChild.el.nativeElement, '[data-p-highlight="true"]') || findSingle(this.listViewChild.el.nativeElement, '[data-pc-section="item"]');
-        if (focusableEl) {
-            const findIndex = findIndexInList(focusableEl, this.listViewChild.el.nativeElement.children);
-            this.focused = true;
-            const index = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : focusableEl ? findIndex : -1;
-            this.changeFocusedOptionIndex(index);
-        }
         this.onFocus.emit(event);
     }
     onListBlur(event) {
-        this.focused = false;
-        this.focusedOption = null;
-        this.focusedOptionIndex = -1;
         this.onBlur.emit(event);
     }
-    onItemKeydown(event) {
-        switch (event.code) {
-            case 'ArrowDown':
-                this.onArrowDownKey(event);
-                break;
-            case 'ArrowUp':
-                this.onArrowUpKey(event);
-                break;
-            case 'Home':
-                this.onHomeKey(event);
-                break;
-            case 'End':
-                this.onEndKey(event);
-                break;
-            case 'Enter':
-                this.onEnterKey(event);
-                break;
-            case 'Space':
-                this.onSpaceKey(event);
-                break;
-            case 'KeyA':
-                if (event.ctrlKey) {
-                    this.d_selection = [...this.value];
-                    this.selectionChange.emit(this.d_selection);
-                }
-            default:
-                break;
-        }
-    }
-    onOptionMouseDown(index) {
-        this.focused = true;
-        this.focusedOptionIndex = index;
-    }
-    onArrowDownKey(event) {
-        const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex);
-        this.changeFocusedOptionIndex(optionIndex);
-        if (event.shiftKey) {
-            this.onEnterKey(event);
-        }
-        event.preventDefault();
-    }
-    onArrowUpKey(event) {
-        const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex);
-        this.changeFocusedOptionIndex(optionIndex);
-        if (event.shiftKey) {
-            this.onEnterKey(event);
-        }
-        event.preventDefault();
-    }
-    onHomeKey(event) {
-        if (event.ctrlKey && event.shiftKey) {
-            let visibleOptions = this.getVisibleOptions();
-            let focusedIndex = findIndexInList(this.focusedOption, visibleOptions);
-            this.d_selection = [...this.value].slice(0, focusedIndex + 1);
-            this.selectionChange.emit(this.d_selection);
-        }
-        else {
-            this.changeFocusedOptionIndex(0);
-        }
-        event.preventDefault();
-    }
-    onEndKey(event) {
-        if (event.ctrlKey && event.shiftKey) {
-            let visibleOptions = this.getVisibleOptions();
-            let focusedIndex = findIndexInList(this.focusedOption, visibleOptions);
-            this.d_selection = [...this.value].slice(focusedIndex, visibleOptions.length - 1);
-            this.selectionChange.emit(this.d_selection);
-        }
-        else {
-            this.changeFocusedOptionIndex(find(this.listViewChild.el.nativeElement, '[data-pc-section="item"]').length - 1);
-        }
-        event.preventDefault();
-    }
-    onEnterKey(event) {
-        this.onItemClick(event, this.focusedOption);
-        event.preventDefault();
-    }
-    onSpaceKey(event) {
-        event.preventDefault();
-        if (event.shiftKey && this.selection && this.selection.length > 0) {
-            let visibleOptions = this.getVisibleOptions();
-            let lastSelectedIndex = this.getLatestSelectedVisibleOptionIndex(visibleOptions);
-            if (lastSelectedIndex !== -1) {
-                let focusedIndex = findIndexInList(this.focusedOption, visibleOptions);
-                this.d_selection = [...visibleOptions.slice(Math.min(lastSelectedIndex, focusedIndex), Math.max(lastSelectedIndex, focusedIndex) + 1)];
-                this.selectionChange.emit(this.d_selection);
-                this.onSelectionChange.emit({ originalEvent: event, value: this.d_selection });
-                return;
-            }
-        }
-        this.onEnterKey(event);
-    }
-    findNextOptionIndex(index) {
-        const items = find(this.listViewChild.el.nativeElement, '[data-pc-section="item"]');
-        const matchedOptionIndex = [...items].findIndex((link) => link.id === index);
-        return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
-    }
-    findPrevOptionIndex(index) {
-        const items = find(this.listViewChild.el.nativeElement, '[data-pc-section="item"]');
-        const matchedOptionIndex = [...items].findIndex((link) => link.id === index);
-        return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
-    }
-    getLatestSelectedVisibleOptionIndex(visibleOptions) {
-        const latestSelectedItem = [...this.d_selection].reverse().find((item) => visibleOptions.includes(item));
-        return latestSelectedItem !== undefined ? visibleOptions.indexOf(latestSelectedItem) : -1;
-    }
     getVisibleOptions() {
         return this.visibleOptions && this.visibleOptions.length > 0 ? this.visibleOptions : this.value && this.value.length > 0 ? this.value : null;
     }
-    getFocusedOption(index) {
-        if (index === -1)
-            return null;
-        return this.visibleOptions && this.visibleOptions.length ? this.visibleOptions[index] : this.value && this.value.length ? this.value[index] : null;
-    }
-    changeFocusedOptionIndex(index) {
-        const items = find(this.listViewChild.el.nativeElement, '[data-pc-section="item"]');
-        let order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index;
-        this.focusedOptionIndex = items[order] ? items[order].getAttribute('id') : -1;
-        this.focusedOption = this.getFocusedOption(order);
-        this.scrollInView(this.focusedOptionIndex);
-    }
-    scrollInView(id) {
-        const element = findSingle(this.listViewChild.el.nativeElement, `[data-pc-section="item"][id="${id}"]`);
-        if (element) {
-            element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-        }
-    }
-    findNextItem(item) {
-        let nextItem = item.nextElementSibling;
-        if (nextItem)
-            return !hasClass(nextItem, 'p-orderlist-item') || isHidden(nextItem) ? this.findNextItem(nextItem) : nextItem;
-        else
-            return null;
-    }
-    findPrevItem(item) {
-        let prevItem = item.previousElementSibling;
-        if (prevItem)
-            return !hasClass(prevItem, 'p-orderlist-item') || isHidden(prevItem) ? this.findPrevItem(prevItem) : prevItem;
-        else
-            return null;
-    }
     moveDisabled() {
         if (this.disabled || !this.selection.length) {
             return true;
         }
     }
-    focusedOptionId() {
-        return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
-    }
     createStyle() {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.styleElement) {
@@ -782,21 +567,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.id}] {
+                        .p-orderlist[${this.attrSelector}] {
                             flex-direction: column;
                         }
 
-                        .p-orderlist[${this.id}] .p-orderlist-controls {
+                        .p-orderlist[${this.attrSelector}] .p-orderlist-controls {
                             padding: var(--content-padding);
                             flex-direction: row;
                         }
 
-                        .p-orderlist[${this.id}] .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.id}] .p-orderlist-controls .p-button:last-child {
+                        .p-orderlist[${this.attrSelector}] .p-orderlist-controls .p-button:last-child {
                             margin-right: 0;
                         }
                     }
@@ -819,202 +604,156 @@ class OrderList extends BaseComponent {
         this.destroyStyle();
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OrderList, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: OrderList, isStandalone: true, selector: "p-orderList, p-orderlist, p-order-list", inputs: { header: "header", style: "style", 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" }, 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
-            [ngClass]="{
-                'p-orderlist p-component': true,
-                'p-orderlist-striped': stripedRows,
-                'p-orderlist-controls-left': controlsPosition === 'left',
-                'p-orderlist-controls-right': controlsPosition === 'right'
-            }"
-            [ngStyle]="style"
-            [class]="styleClass"
-            [attr.data-pc-section]="'root'"
-        >
-            <div class="p-orderlist-controls" [attr.data-pc-section]="'controls'">
-                <button type="button" [disabled]="moveDisabled()" pButton pRipple class="p-button-icon-only" (click)="moveUp()" [attr.aria-label]="moveUpAriaLabel" [attr.data-pc-section]="'moveUpButton'" [buttonProps]="getButtonProps('up')">
-                    <AngleUpIcon *ngIf="!moveUpIconTemplate && !_moveUpIconTemplate" [attr.data-pc-section]="'moveupicon'" />
-                    <ng-template *ngTemplateOutlet="moveUpIconTemplate || _moveUpIconTemplate"></ng-template>
-                </button>
-                <button type="button" [disabled]="moveDisabled()" pButton pRipple class="p-button-icon-only" (click)="moveTop()" [attr.aria-label]="moveTopAriaLabel" [attr.data-pc-section]="'moveTopButton'" [buttonProps]="getButtonProps('top')">
-                    <AngleDoubleUpIcon *ngIf="!moveTopIconTemplate && !_moveTopIconTemplate" [attr.data-pc-section]="'movetopicon'" />
-                    <ng-template *ngTemplateOutlet="moveTopIconTemplate || _moveTopIconTemplate"></ng-template>
-                </button>
-                <button type="button" [disabled]="moveDisabled()" pButton pRipple class="p-button-icon-only" (click)="moveDown()" [attr.aria-label]="moveDownAriaLabel" [attr.data-pc-section]="'moveDownButton'" [buttonProps]="getButtonProps('down')">
-                    <AngleDownIcon *ngIf="!moveDownIconTemplate && !_moveDownIconTemplate" [attr.data-pc-section]="'movedownicon'" />
-                    <ng-template *ngTemplateOutlet="moveDownIconTemplate || _moveDownIconTemplate"></ng-template>
-                </button>
-                <button
-                    type="button"
-                    [disabled]="moveDisabled()"
-                    pButton
-                    pRipple
-                    class="p-button-icon-only"
-                    (click)="moveBottom()"
-                    [attr.aria-label]="moveBottomAriaLabel"
-                    [attr.data-pc-section]="'moveBottomButton'"
-                    [buttonProps]="getButtonProps('bottom')"
-                >
-                    <AngleDoubleDownIcon *ngIf="!moveBottomIconTemplate && !_moveBottomIconTemplate" [attr.data-pc-section]="'movebottomicon'" />
-                    <ng-template *ngTemplateOutlet="moveBottomIconTemplate || _moveBottomIconTemplate"></ng-template>
-                </button>
-            </div>
-            <div class="p-orderlist-list-container" [attr.data-pc-section]="'container'">
-                <p-listbox
-                    #listelement
-                    [multiple]="true"
-                    [options]="value"
-                    [(ngModel)]="d_selection"
-                    optionLabel="name"
-                    [id]="id + '_list'"
-                    [listStyle]="listStyle"
-                    [striped]="stripedRows"
-                    [tabindex]="tabindex"
-                    (onFocus)="onListFocus($event)"
-                    (onBlur)="onListBlur($event)"
-                    (keydown)="onItemKeydown($event)"
-                    [ariaLabel]="ariaLabel"
-                    [disabled]="disabled"
-                    [metaKeySelection]="metaKeySelection"
-                    [scrollHeight]="scrollHeight"
-                    [autoOptionFocus]="autoOptionFocus"
-                    [filter]="filterBy"
-                    [filterBy]="filterBy"
-                    [filterLocale]="filterLocale"
-                    [filterPlaceHolder]="filterPlaceholder"
-                    [dragdrop]="dragdrop"
-                    (onDrop)="onDrop($event)"
-                >
-                    <ng-container *ngIf="headerTemplate || _headerTemplate">
-                        <ng-template #header>
-                            <ng-template *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-template>
-                        </ng-template>
-                    </ng-container>
-                    <ng-container *ngIf="itemTemplate || _itemTemplate">
-                        <ng-template #item let-option let-selected="selected" let-index="index">
-                            <ng-template *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: option, selected: selected, index: index }"></ng-template>
-                        </ng-template>
-                    </ng-container>
-                    <ng-container *ngIf="emptyMessageTemplate || _emptyMessageTemplate">
-                        <ng-template #empty>
-                            <ng-template *ngTemplateOutlet="emptyMessageTemplate || _emptyMessageTemplate"></ng-template>
-                        </ng-template>
-                    </ng-container>
-                    <ng-container *ngIf="emptyFilterMessageTemplate || _emptyFilterMessageTemplate">
-                        <ng-template #emptyfilter>
-                            <ng-template *ngTemplateOutlet="emptyFilterMessageTemplate || _emptyFilterMessageTemplate"></ng-template>
-                        </ng-template>
-                    </ng-container>
-                </p-listbox>
-            </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OrderList, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", 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')">
+                <AngleUpIcon *ngIf="!moveUpIconTemplate && !_moveUpIconTemplate" [attr.data-pc-section]="'moveupicon'" />
+                <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')">
+                <AngleDoubleUpIcon *ngIf="!moveTopIconTemplate && !_moveTopIconTemplate" [attr.data-pc-section]="'movetopicon'" />
+                <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')">
+                <AngleDownIcon *ngIf="!moveDownIconTemplate && !_moveDownIconTemplate" [attr.data-pc-section]="'movedownicon'" />
+                <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')">
+                <AngleDoubleDownIcon *ngIf="!moveBottomIconTemplate && !_moveBottomIconTemplate" [attr.data-pc-section]="'movebottomicon'" />
+                <ng-template *ngTemplateOutlet="moveBottomIconTemplate || _moveBottomIconTemplate"></ng-template>
+            </button>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "component", type: AngleDoubleDownIcon, selector: "AngleDoubleDownIcon" }, { kind: "component", type: AngleDoubleUpIcon, selector: "AngleDoubleUpIcon" }, { kind: "component", type: AngleUpIcon, selector: "AngleUpIcon" }, { kind: "component", type: AngleDownIcon, selector: "AngleDownIcon" }, { 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", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "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"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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 });
+        <p-listbox
+            #listelement
+            [multiple]="true"
+            [options]="value"
+            [(ngModel)]="d_selection"
+            optionLabel="name"
+            [id]="id + '_list'"
+            [listStyle]="listStyle"
+            [striped]="stripedRows"
+            [tabindex]="tabindex"
+            (onFocus)="onListFocus($event)"
+            (onBlur)="onListBlur($event)"
+            (onChange)="onChangeSelection($event)"
+            [ariaLabel]="ariaLabel"
+            [disabled]="disabled"
+            [metaKeySelection]="metaKeySelection"
+            [scrollHeight]="scrollHeight"
+            [autoOptionFocus]="autoOptionFocus"
+            [filter]="filterBy"
+            [filterBy]="filterBy"
+            [filterLocale]="filterLocale"
+            [filterPlaceHolder]="filterPlaceholder"
+            [dragdrop]="dragdrop"
+            (onDrop)="onDrop($event)"
+        >
+            <ng-container *ngIf="headerTemplate || _headerTemplate">
+                <ng-template #header>
+                    <ng-template *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-template>
+                </ng-template>
+            </ng-container>
+            <ng-container *ngIf="itemTemplate || _itemTemplate">
+                <ng-template #item let-option let-selected="selected" let-index="index">
+                    <ng-template *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: option, selected: selected, index: index }"></ng-template>
+                </ng-template>
+            </ng-container>
+            <ng-container *ngIf="emptyMessageTemplate || _emptyMessageTemplate">
+                <ng-template #empty>
+                    <ng-template *ngTemplateOutlet="emptyMessageTemplate || _emptyMessageTemplate"></ng-template>
+                </ng-template>
+            </ng-container>
+            <ng-container *ngIf="emptyFilterMessageTemplate || _emptyFilterMessageTemplate">
+                <ng-template #emptyfilter>
+                    <ng-template *ngTemplateOutlet="emptyFilterMessageTemplate || _emptyFilterMessageTemplate"></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: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "component", type: AngleDoubleDownIcon, selector: "AngleDoubleDownIcon" }, { kind: "component", type: AngleDoubleUpIcon, selector: "AngleDoubleUpIcon" }, { kind: "component", type: AngleUpIcon, selector: "AngleUpIcon" }, { kind: "component", type: AngleDownIcon, selector: "AngleDownIcon" }, { 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: "19.2.10", ngImport: i0, type: OrderList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OrderList, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-orderList, p-orderlist, p-order-list',
                     standalone: true,
                     imports: [CommonModule, ButtonDirective, Ripple, DragDropModule, AngleDoubleDownIcon, AngleDoubleUpIcon, AngleUpIcon, AngleDownIcon, Listbox, FormsModule, SharedModule],
                     template: `
-        <div
-            [ngClass]="{
-                'p-orderlist p-component': true,
-                'p-orderlist-striped': stripedRows,
-                'p-orderlist-controls-left': controlsPosition === 'left',
-                'p-orderlist-controls-right': controlsPosition === 'right'
-            }"
-            [ngStyle]="style"
-            [class]="styleClass"
-            [attr.data-pc-section]="'root'"
-        >
-            <div class="p-orderlist-controls" [attr.data-pc-section]="'controls'">
-                <button type="button" [disabled]="moveDisabled()" pButton pRipple class="p-button-icon-only" (click)="moveUp()" [attr.aria-label]="moveUpAriaLabel" [attr.data-pc-section]="'moveUpButton'" [buttonProps]="getButtonProps('up')">
-                    <AngleUpIcon *ngIf="!moveUpIconTemplate && !_moveUpIconTemplate" [attr.data-pc-section]="'moveupicon'" />
-                    <ng-template *ngTemplateOutlet="moveUpIconTemplate || _moveUpIconTemplate"></ng-template>
-                </button>
-                <button type="button" [disabled]="moveDisabled()" pButton pRipple class="p-button-icon-only" (click)="moveTop()" [attr.aria-label]="moveTopAriaLabel" [attr.data-pc-section]="'moveTopButton'" [buttonProps]="getButtonProps('top')">
-                    <AngleDoubleUpIcon *ngIf="!moveTopIconTemplate && !_moveTopIconTemplate" [attr.data-pc-section]="'movetopicon'" />
-                    <ng-template *ngTemplateOutlet="moveTopIconTemplate || _moveTopIconTemplate"></ng-template>
-                </button>
-                <button type="button" [disabled]="moveDisabled()" pButton pRipple class="p-button-icon-only" (click)="moveDown()" [attr.aria-label]="moveDownAriaLabel" [attr.data-pc-section]="'moveDownButton'" [buttonProps]="getButtonProps('down')">
-                    <AngleDownIcon *ngIf="!moveDownIconTemplate && !_moveDownIconTemplate" [attr.data-pc-section]="'movedownicon'" />
-                    <ng-template *ngTemplateOutlet="moveDownIconTemplate || _moveDownIconTemplate"></ng-template>
-                </button>
-                <button
-                    type="button"
-                    [disabled]="moveDisabled()"
-                    pButton
-                    pRipple
-                    class="p-button-icon-only"
-                    (click)="moveBottom()"
-                    [attr.aria-label]="moveBottomAriaLabel"
-                    [attr.data-pc-section]="'moveBottomButton'"
-                    [buttonProps]="getButtonProps('bottom')"
-                >
-                    <AngleDoubleDownIcon *ngIf="!moveBottomIconTemplate && !_moveBottomIconTemplate" [attr.data-pc-section]="'movebottomicon'" />
-                    <ng-template *ngTemplateOutlet="moveBottomIconTemplate || _moveBottomIconTemplate"></ng-template>
-                </button>
-            </div>
-            <div class="p-orderlist-list-container" [attr.data-pc-section]="'container'">
-                <p-listbox
-                    #listelement
-                    [multiple]="true"
-                    [options]="value"
-                    [(ngModel)]="d_selection"
-                    optionLabel="name"
-                    [id]="id + '_list'"
-                    [listStyle]="listStyle"
-                    [striped]="stripedRows"
-                    [tabindex]="tabindex"
-                    (onFocus)="onListFocus($event)"
-                    (onBlur)="onListBlur($event)"
-                    (keydown)="onItemKeydown($event)"
-                    [ariaLabel]="ariaLabel"
-                    [disabled]="disabled"
-                    [metaKeySelection]="metaKeySelection"
-                    [scrollHeight]="scrollHeight"
-                    [autoOptionFocus]="autoOptionFocus"
-                    [filter]="filterBy"
-                    [filterBy]="filterBy"
-                    [filterLocale]="filterLocale"
-                    [filterPlaceHolder]="filterPlaceholder"
-                    [dragdrop]="dragdrop"
-                    (onDrop)="onDrop($event)"
-                >
-                    <ng-container *ngIf="headerTemplate || _headerTemplate">
-                        <ng-template #header>
-                            <ng-template *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-template>
-                        </ng-template>
-                    </ng-container>
-                    <ng-container *ngIf="itemTemplate || _itemTemplate">
-                        <ng-template #item let-option let-selected="selected" let-index="index">
-                            <ng-template *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: option, selected: selected, index: index }"></ng-template>
-                        </ng-template>
-                    </ng-container>
-                    <ng-container *ngIf="emptyMessageTemplate || _emptyMessageTemplate">
-                        <ng-template #empty>
-                            <ng-template *ngTemplateOutlet="emptyMessageTemplate || _emptyMessageTemplate"></ng-template>
-                        </ng-template>
-                    </ng-container>
-                    <ng-container *ngIf="emptyFilterMessageTemplate || _emptyFilterMessageTemplate">
-                        <ng-template #emptyfilter>
-                            <ng-template *ngTemplateOutlet="emptyFilterMessageTemplate || _emptyFilterMessageTemplate"></ng-template>
-                        </ng-template>
-                    </ng-container>
-                </p-listbox>
-            </div>
+        <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')">
+                <AngleUpIcon *ngIf="!moveUpIconTemplate && !_moveUpIconTemplate" [attr.data-pc-section]="'moveupicon'" />
+                <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')">
+                <AngleDoubleUpIcon *ngIf="!moveTopIconTemplate && !_moveTopIconTemplate" [attr.data-pc-section]="'movetopicon'" />
+                <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')">
+                <AngleDownIcon *ngIf="!moveDownIconTemplate && !_moveDownIconTemplate" [attr.data-pc-section]="'movedownicon'" />
+                <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')">
+                <AngleDoubleDownIcon *ngIf="!moveBottomIconTemplate && !_moveBottomIconTemplate" [attr.data-pc-section]="'movebottomicon'" />
+                <ng-template *ngTemplateOutlet="moveBottomIconTemplate || _moveBottomIconTemplate"></ng-template>
+            </button>
         </div>
+        <p-listbox
+            #listelement
+            [multiple]="true"
+            [options]="value"
+            [(ngModel)]="d_selection"
+            optionLabel="name"
+            [id]="id + '_list'"
+            [listStyle]="listStyle"
+            [striped]="stripedRows"
+            [tabindex]="tabindex"
+            (onFocus)="onListFocus($event)"
+            (onBlur)="onListBlur($event)"
+            (onChange)="onChangeSelection($event)"
+            [ariaLabel]="ariaLabel"
+            [disabled]="disabled"
+            [metaKeySelection]="metaKeySelection"
+            [scrollHeight]="scrollHeight"
+            [autoOptionFocus]="autoOptionFocus"
+            [filter]="filterBy"
+            [filterBy]="filterBy"
+            [filterLocale]="filterLocale"
+            [filterPlaceHolder]="filterPlaceholder"
+            [dragdrop]="dragdrop"
+            (onDrop)="onDrop($event)"
+        >
+            <ng-container *ngIf="headerTemplate || _headerTemplate">
+                <ng-template #header>
+                    <ng-template *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-template>
+                </ng-template>
+            </ng-container>
+            <ng-container *ngIf="itemTemplate || _itemTemplate">
+                <ng-template #item let-option let-selected="selected" let-index="index">
+                    <ng-template *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: option, selected: selected, index: index }"></ng-template>
+                </ng-template>
+            </ng-container>
+            <ng-container *ngIf="emptyMessageTemplate || _emptyMessageTemplate">
+                <ng-template #empty>
+                    <ng-template *ngTemplateOutlet="emptyMessageTemplate || _emptyMessageTemplate"></ng-template>
+                </ng-template>
+            </ng-container>
+            <ng-container *ngIf="emptyFilterMessageTemplate || _emptyFilterMessageTemplate">
+                <ng-template #emptyfilter>
+                    <ng-template *ngTemplateOutlet="emptyFilterMessageTemplate || _emptyFilterMessageTemplate"></ng-template>
+                </ng-template>
+            </ng-container>
+        </p-listbox>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [OrderListStyle]
+                    providers: [OrderListStyle],
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass)",
+                        '[attr.data-pc-section]': "'root'"
+                    }
                 }]
         }], propDecorators: { header: [{
                 type: Input
-            }], style: [{
-                type: Input
             }], styleClass: [{
                 type: Input
             }], tabindex: [{
@@ -1129,11 +868,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: [PrimeTemplate]
             }] } });
 class OrderListModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OrderListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: OrderListModule, imports: [OrderList, SharedModule], exports: [OrderList, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OrderListModule, imports: [OrderList, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OrderListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: OrderListModule, imports: [OrderList, SharedModule], exports: [OrderList, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OrderListModule, imports: [OrderList, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OrderListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OrderListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [OrderList, SharedModule],