@ops-prime/primeng 0.0.0-stage → 21.1.11

package/fesm2022/primeng-orderlist.mjs

@@ -0,0 +1,1086 @@
+export * from 'primeng/types/orderlist';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i2 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+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, 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';
+import { Ripple } from 'primeng/ripple';
+import { style } from '@primeuix/styles/orderlist';
+import { BaseStyle } from 'primeng/base';
+
+const theme = /*css*/ `
+    ${style}
+
+    /* For PrimeNG */
+    .p-orderlist-controls-right .p-orderlist-controls {
+        order: 2;
+    }
+`;
+const classes = {
+    root: ({ instance }) => ['p-orderlist p-component', { 'p-orderlist-controls-left': instance.controlsPosition === 'left', 'p-orderlist-controls-right': instance.controlsPosition === 'right' }],
+    controls: 'p-orderlist-controls'
+};
+class OrderListStyle extends BaseStyle {
+    name = 'orderlist';
+    style = theme;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: OrderListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: OrderListStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: OrderListStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * OrderList is used to maneged the order of a collection.
+ *
+ * [Live Demo](https://primeng.org/orderlist)
+ *
+ * @module orderliststyle
+ *
+ */
+var OrderListClasses;
+(function (OrderListClasses) {
+    /**
+     * Class name of the root element
+     */
+    OrderListClasses["root"] = "p-orderlist";
+    /**
+     * Class name of the controls element
+     */
+    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 {
+    componentName = 'OrderList';
+    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
+     */
+    header;
+    /**
+     * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
+     * @group Props
+     */
+    styleClass;
+    /**
+     * Index of the element in tabbing order.
+     * @group Props
+     */
+    tabindex;
+    /**
+     * Defines a string that labels the input for accessibility.
+     * @group Props
+     */
+    ariaLabel;
+    /**
+     * Specifies one or more IDs in the DOM that labels the input field.
+     * @group Props
+     */
+    ariaLabelledBy;
+    /**
+     * Inline style of the list element.
+     * @group Props
+     */
+    listStyle;
+    /**
+     * A boolean value that indicates whether the component should be responsive.
+     * @group Props
+     */
+    responsive;
+    /**
+     * When specified displays an input field to filter the items on keyup and decides which fields to search against.
+     * @group Props
+     */
+    filterBy;
+    /**
+     * Placeholder of the filter input.
+     * @group Props
+     */
+    filterPlaceholder;
+    /**
+     * Locale to use in filtering. The default locale is the host environment's current locale.
+     * @group Props
+     */
+    filterLocale;
+    /**
+     * When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
+     * @group Props
+     */
+    metaKeySelection = false;
+    /**
+     * Whether to enable dragdrop based reordering.
+     * @group Props
+     */
+    dragdrop = false;
+    /**
+     * Defines the location of the buttons with respect to the list.
+     * @group Props
+     */
+    controlsPosition = 'left';
+    /**
+     * Defines a string that labels the filter input.
+     * @group Props
+     */
+    ariaFilterLabel;
+    /**
+     * Defines how the items are filtered.
+     * @group Props
+     */
+    filterMatchMode = 'contains';
+    /**
+     * Indicates the width of the screen at which the component should change its behavior.
+     * @group Props
+     */
+    breakpoint = '960px';
+    /**
+     * Whether to displays rows with alternating colors.
+     * @group Props
+     */
+    stripedRows;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @group Props
+     */
+    disabled;
+    /**
+     * Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity.
+     * @group Props
+     */
+    trackBy = (index, item) => item;
+    /**
+     * Height of the viewport, a scrollbar is defined if height of list exceeds this value.
+     * @group Props
+     */
+    scrollHeight = '14rem';
+    /**
+     * Whether to focus on the first visible or selected element.
+     * @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
+     */
+    set selection(val) {
+        this.d_selection = val;
+    }
+    get selection() {
+        return this.d_selection;
+    }
+    /**
+     * Array of values to be displayed in the component.
+     * It represents the data source for the list of items.
+     * @group Props
+     */
+    set value(val) {
+        this._value = val;
+        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;
+    }
+    /**
+     * Used to pass all properties of the ButtonProps to the Button component.
+     * @group Props
+     */
+    buttonProps = { severity: 'secondary' };
+    /**
+     * Used to pass all properties of the ButtonProps to the move up button inside the component.
+     * @group Props
+     */
+    moveUpButtonProps;
+    /**
+     * Used to pass all properties of the ButtonProps to the move top button inside the component.
+     * @group Props
+     */
+    moveTopButtonProps;
+    /**
+     * Used to pass all properties of the ButtonProps to the move down button inside the component.
+     * @group Props
+     */
+    moveDownButtonProps;
+    /**
+     * Used to pass all properties of the ButtonProps to the move bottom button inside the component.
+     * @group Props
+     */
+    moveBottomButtonProps;
+    /**
+     * Callback to invoke on selection change.
+     * @param {*} any - selection instance.
+     * @group Emits
+     */
+    selectionChange = new EventEmitter();
+    /**
+     * Callback to invoke when list is reordered.
+     * @param {*} any - list instance.
+     * @group Emits
+     */
+    onReorder = new EventEmitter();
+    /**
+     * Callback to invoke when selection changes.
+     * @param {OrderListSelectionChangeEvent} event - Custom change event.
+     * @group Emits
+     */
+    onSelectionChange = new EventEmitter();
+    /**
+     * Callback to invoke when filtering occurs.
+     * @param {OrderListFilterEvent} event - Custom filter event.
+     * @group Emits
+     */
+    onFilterEvent = new EventEmitter();
+    /**
+     * Callback to invoke when the list is focused
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
+    onFocus = new EventEmitter();
+    /**
+     * Callback to invoke when the list is blurred
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
+    onBlur = new EventEmitter();
+    listViewChild;
+    filterViewChild;
+    /**
+     * Custom item template.
+     * @param {OrderListItemTemplateContext} context - item context.
+     * @see {@link OrderListItemTemplateContext}
+     * @group Templates
+     */
+    itemTemplate;
+    /**
+     * Custom empty template.
+     * @group Templates
+     */
+    emptyMessageTemplate;
+    /**
+     * Custom empty filter template.
+     * @group Templates
+     */
+    emptyFilterMessageTemplate;
+    /**
+     * Custom filter template.
+     * @param {OrderListFilterTemplateContext} context - filter context.
+     * @see {@link OrderListFilterTemplateContext}
+     * @group Templates
+     */
+    filterTemplate;
+    /**
+     * Custom header template.
+     * @group Templates
+     */
+    headerTemplate;
+    /**
+     * Custom move up icon template.
+     * @group Templates
+     */
+    moveUpIconTemplate;
+    /**
+     * Custom move top icon template.
+     * @group Templates
+     */
+    moveTopIconTemplate;
+    /**
+     * Custom move down icon template.
+     * @group Templates
+     */
+    moveDownIconTemplate;
+    /**
+     * Custom move bottom icon template.
+     * @group Templates
+     */
+    moveBottomIconTemplate;
+    /**
+     * Custom filter icon template.
+     * @group Templates
+     */
+    filterIconTemplate;
+    get moveUpAriaLabel() {
+        return this.config.translation.aria ? this.config.translation.aria.moveUp : undefined;
+    }
+    get moveTopAriaLabel() {
+        return this.config.translation.aria ? this.config.translation.aria.moveTop : undefined;
+    }
+    get moveDownAriaLabel() {
+        return this.config.translation.aria ? this.config.translation.aria.moveDown : undefined;
+    }
+    get moveBottomAriaLabel() {
+        return this.config.translation.aria ? this.config.translation.aria.moveBottom : undefined;
+    }
+    _componentStyle = inject(OrderListStyle);
+    filterOptions;
+    d_selection = [];
+    movedUp;
+    movedDown;
+    itemTouched;
+    styleElement;
+    id = uuid('pn_id_');
+    filterValue;
+    visibleOptions;
+    _value;
+    filterService = inject(FilterService);
+    getButtonProps(direction) {
+        switch (direction) {
+            case 'up':
+                return { ...this.buttonProps, ...this.moveUpButtonProps };
+            case 'top':
+                return { ...this.buttonProps, ...this.moveTopButtonProps };
+            case 'down':
+                return { ...this.buttonProps, ...this.moveDownButtonProps };
+            case 'bottom':
+                return { ...this.buttonProps, ...this.moveBottomButtonProps };
+            default:
+                return this.buttonProps;
+        }
+    }
+    onInit() {
+        if (this.responsive) {
+            this.createStyle();
+        }
+        if (this.filterBy) {
+            this.filterOptions = {
+                filter: (value) => this.onFilterKeyup(value),
+                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;
+    _emptyMessageTemplate;
+    _emptyFilterMessageTemplate;
+    _filterTemplate;
+    _headerTemplate;
+    _moveUpIconTemplate;
+    _moveTopIconTemplate;
+    _moveDownIconTemplate;
+    _moveBottomIconTemplate;
+    _filterIconTemplate;
+    onAfterContentInit() {
+        this.templates.forEach((item) => {
+            switch (item.getType()) {
+                case 'item':
+                    this._itemTemplate = item.template;
+                    break;
+                case 'empty':
+                    this._emptyMessageTemplate = item.template;
+                    break;
+                case 'emptyfilter':
+                    this._emptyFilterMessageTemplate = item.template;
+                    break;
+                case 'filter':
+                    this._filterTemplate = item.template;
+                    break;
+                case 'header':
+                    this._headerTemplate = item.template;
+                    break;
+                case 'moveupicon':
+                    this._moveUpIconTemplate = item.template;
+                    break;
+                case 'movetopicon':
+                    this._moveTopIconTemplate = item.template;
+                    break;
+                case 'movedownicon':
+                    this._moveDownIconTemplate = item.template;
+                    break;
+                case 'movebottomicon':
+                    this._moveBottomIconTemplate = item.template;
+                    break;
+                case 'filtericon':
+                    this._filterIconTemplate = item.template;
+                    break;
+                default:
+                    this._itemTemplate = item.template;
+                    break;
+            }
+        });
+    }
+    onChangeSelection(e) {
+        this.d_selection = e.value;
+        //binding
+        this.selectionChange.emit(e.value);
+        //event
+        this.onSelectionChange.emit({ originalEvent: e.originalEvent, value: e.value });
+    }
+    onFilterKeyup(event) {
+        this.filterValue = event.target.value.trim().toLocaleLowerCase(this.filterLocale);
+        this.filter();
+        this.onFilterEvent.emit({
+            originalEvent: event,
+            value: this.visibleOptions
+        });
+    }
+    filter() {
+        let searchFields = this.filterBy.split(',');
+        this.visibleOptions = this.filterService.filter(this.value, searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
+    }
+    /**
+     * Callback to invoke on filter reset.
+     * @group Method
+     */
+    resetFilter() {
+        this.filterValue = '';
+        this.filterViewChild && (this.filterViewChild.nativeElement.value = '');
+    }
+    isItemVisible(item) {
+        if (this.filterValue && this.filterValue.trim().length) {
+            for (let i = 0; i < this.visibleOptions.length; i++) {
+                if (item == this.visibleOptions[i]) {
+                    return true;
+                }
+            }
+        }
+        else {
+            return true;
+        }
+    }
+    isSelected(item) {
+        return findIndexInList(item, this.d_selection) !== -1;
+    }
+    isEmpty() {
+        return this.filterValue ? !this.visibleOptions || this.visibleOptions.length === 0 : !this.value || this.value.length === 0;
+    }
+    moveUp() {
+        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);
+                // 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;
+                }
+                // 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];
+                }
+            }
+            this.movedUp = true;
+            this.onReorder.emit(this.selection);
+        }
+        this.listViewChild?.cd?.markForCheck();
+    }
+    moveTop() {
+        if (this.selection) {
+            for (let i = this.selection.length - 1; i >= 0; i--) {
+                let selectedItem = this.selection[i];
+                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);
+                }
+                else {
+                    break;
+                }
+            }
+            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);
+            });
+        }
+        this.listViewChild?.cd?.markForCheck();
+    }
+    moveDown() {
+        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 (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;
+                }
+            }
+            if (this.dragdrop) {
+                if (this.filterValue) {
+                    this.filter();
+                }
+                else if (this.visibleOptions) {
+                    this.visibleOptions = [...this.value];
+                }
+            }
+            this.movedDown = true;
+            this.onReorder.emit(this.selection);
+        }
+        this.listViewChild?.cd?.markForCheck();
+    }
+    moveBottom() {
+        if (this.selection) {
+            for (let i = 0; i < this.selection.length; i++) {
+                let selectedItem = this.selection[i];
+                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);
+                }
+                else {
+                    break;
+                }
+            }
+            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 ? 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) {
+            // 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 || []);
+                }
+                moveItemInArray(this.value, previousIndex, currentIndex);
+                // Sync visibleOptions for non-filtered case
+                if (this.dragdrop && this.visibleOptions && !this.filterValue) {
+                    this.visibleOptions = [...(this.value || [])];
+                }
+                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);
+    }
+    onListBlur(event) {
+        this.onBlur.emit(event);
+    }
+    getVisibleOptions() {
+        return this.visibleOptions && this.visibleOptions.length > 0 ? this.visibleOptions : this.value && this.value.length > 0 ? this.value : null;
+    }
+    moveDisabled() {
+        if (this.disabled || !this.selection.length) {
+            return true;
+        }
+    }
+    createStyle() {
+        if (isPlatformBrowser(this.platformId)) {
+            if (!this.styleElement) {
+                this.renderer.setAttribute(this.el.nativeElement.children[0], this.id, '');
+                this.styleElement = this.renderer.createElement('style');
+                this.renderer.setAttribute(this.styleElement, 'type', 'text/css');
+                setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
+                this.renderer.appendChild(this.document.head, this.styleElement);
+                let innerHTML = `
+                    @media screen and (max-width: ${this.breakpoint}) {
+                        .p-orderlist[${this.$attrSelector}] {
+                            flex-direction: column;
+                        }
+
+                        .p-orderlist[${this.$attrSelector}] .p-orderlist-controls {
+                            padding: var(--content-padding);
+                            flex-direction: row;
+                        }
+
+                        .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 {
+                            margin-right: 0;
+                        }
+                    }
+                `;
+                this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML);
+                setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
+            }
+        }
+    }
+    destroyStyle() {
+        if (isPlatformBrowser(this.platformId)) {
+            if (this.styleElement) {
+                this.renderer.removeChild(this.document, this.styleElement);
+                this.styleElement = null;
+                ``;
+            }
+        }
+    }
+    onDestroy() {
+        this.destroyStyle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: OrderList, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.22", 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" [unstyled]="unstyled()">
+                <svg data-p-icon="angle-up" *ngIf="!moveUpIconTemplate && !_moveUpIconTemplate" pButtonIcon [pt]="ptm('pcMoveUpButton')['icon']" />
+                <ng-template *ngTemplateOutlet="moveUpIconTemplate || _moveUpIconTemplate"></ng-template>
+            </button>
+            <button [pt]="ptm('pcMoveTopButton')" type="button" [disabled]="moveDisabled()" pButton pRipple (click)="moveTop()" [attr.aria-label]="moveTopAriaLabel" [buttonProps]="getButtonProps('top')" hostName="orderlist" [unstyled]="unstyled()">
+                <svg data-p-icon="angle-double-up" *ngIf="!moveTopIconTemplate && !_moveTopIconTemplate" pButtonIcon [pt]="ptm('pcMoveTopButton')['icon']" />
+                <ng-template *ngTemplateOutlet="moveTopIconTemplate || _moveTopIconTemplate"></ng-template>
+            </button>
+            <button
+                [pt]="ptm('pcMoveDownButton')"
+                type="button"
+                [disabled]="moveDisabled()"
+                pButton
+                pRipple
+                (click)="moveDown()"
+                [attr.aria-label]="moveDownAriaLabel"
+                [buttonProps]="getButtonProps('down')"
+                hostName="orderlist"
+                [unstyled]="unstyled()"
+            >
+                <svg data-p-icon="angle-down" *ngIf="!moveDownIconTemplate && !_moveDownIconTemplate" pButtonIcon [pt]="ptm('pcMoveDownButton')['icon']" />
+                <ng-template *ngTemplateOutlet="moveDownIconTemplate || _moveDownIconTemplate"></ng-template>
+            </button>
+            <button
+                [pt]="ptm('pcMoveBottomButton')"
+                type="button"
+                [disabled]="moveDisabled()"
+                pButton
+                pRipple
+                (click)="moveBottom()"
+                [attr.aria-label]="moveBottomAriaLabel"
+                [buttonProps]="getButtonProps('bottom')"
+                hostName="orderlist"
+                [unstyled]="unstyled()"
+            >
+                <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]="dataKey ?? '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)"
+            hostName="orderlist"
+            [unstyled]="unstyled()"
+        >
+            <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>
+            <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: 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", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: i3.ButtonIcon, selector: "[pButtonIcon]", inputs: ["ptButtonIcon", "pButtonIconPT", "pButtonUnstyled"] }, { 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: "21.2.22", 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, Bind],
+                    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" [unstyled]="unstyled()">
+                <svg data-p-icon="angle-up" *ngIf="!moveUpIconTemplate && !_moveUpIconTemplate" pButtonIcon [pt]="ptm('pcMoveUpButton')['icon']" />
+                <ng-template *ngTemplateOutlet="moveUpIconTemplate || _moveUpIconTemplate"></ng-template>
+            </button>
+            <button [pt]="ptm('pcMoveTopButton')" type="button" [disabled]="moveDisabled()" pButton pRipple (click)="moveTop()" [attr.aria-label]="moveTopAriaLabel" [buttonProps]="getButtonProps('top')" hostName="orderlist" [unstyled]="unstyled()">
+                <svg data-p-icon="angle-double-up" *ngIf="!moveTopIconTemplate && !_moveTopIconTemplate" pButtonIcon [pt]="ptm('pcMoveTopButton')['icon']" />
+                <ng-template *ngTemplateOutlet="moveTopIconTemplate || _moveTopIconTemplate"></ng-template>
+            </button>
+            <button
+                [pt]="ptm('pcMoveDownButton')"
+                type="button"
+                [disabled]="moveDisabled()"
+                pButton
+                pRipple
+                (click)="moveDown()"
+                [attr.aria-label]="moveDownAriaLabel"
+                [buttonProps]="getButtonProps('down')"
+                hostName="orderlist"
+                [unstyled]="unstyled()"
+            >
+                <svg data-p-icon="angle-down" *ngIf="!moveDownIconTemplate && !_moveDownIconTemplate" pButtonIcon [pt]="ptm('pcMoveDownButton')['icon']" />
+                <ng-template *ngTemplateOutlet="moveDownIconTemplate || _moveDownIconTemplate"></ng-template>
+            </button>
+            <button
+                [pt]="ptm('pcMoveBottomButton')"
+                type="button"
+                [disabled]="moveDisabled()"
+                pButton
+                pRipple
+                (click)="moveBottom()"
+                [attr.aria-label]="moveBottomAriaLabel"
+                [buttonProps]="getButtonProps('bottom')"
+                hostName="orderlist"
+                [unstyled]="unstyled()"
+            >
+                <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]="dataKey ?? '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)"
+            hostName="orderlist"
+            [unstyled]="unstyled()"
+        >
+            <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>
+            <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, { provide: ORDERLIST_INSTANCE, useExisting: OrderList }, { provide: PARENT_INSTANCE, useExisting: OrderList }],
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass)"
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], propDecorators: { header: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], tabindex: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], listStyle: [{
+                type: Input
+            }], responsive: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], filterBy: [{
+                type: Input
+            }], filterPlaceholder: [{
+                type: Input
+            }], filterLocale: [{
+                type: Input
+            }], metaKeySelection: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], dragdrop: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], controlsPosition: [{
+                type: Input
+            }], ariaFilterLabel: [{
+                type: Input
+            }], filterMatchMode: [{
+                type: Input
+            }], breakpoint: [{
+                type: Input
+            }], stripedRows: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], trackBy: [{
+                type: Input
+            }], scrollHeight: [{
+                type: Input
+            }], autoOptionFocus: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], dataKey: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], buttonProps: [{
+                type: Input
+            }], moveUpButtonProps: [{
+                type: Input
+            }], moveTopButtonProps: [{
+                type: Input
+            }], moveDownButtonProps: [{
+                type: Input
+            }], moveBottomButtonProps: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], onReorder: [{
+                type: Output
+            }], onSelectionChange: [{
+                type: Output
+            }], onFilterEvent: [{
+                type: Output
+            }], onFocus: [{
+                type: Output
+            }], onBlur: [{
+                type: Output
+            }], listViewChild: [{
+                type: ViewChild,
+                args: ['listelement']
+            }], filterViewChild: [{
+                type: ViewChild,
+                args: ['filter']
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: ['item', { descendants: false }]
+            }], emptyMessageTemplate: [{
+                type: ContentChild,
+                args: ['empty', { descendants: false }]
+            }], emptyFilterMessageTemplate: [{
+                type: ContentChild,
+                args: ['emptyfilter', { descendants: false }]
+            }], filterTemplate: [{
+                type: ContentChild,
+                args: ['filter', { descendants: false }]
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: ['header', { descendants: false }]
+            }], moveUpIconTemplate: [{
+                type: ContentChild,
+                args: ['moveupicon', { descendants: false }]
+            }], moveTopIconTemplate: [{
+                type: ContentChild,
+                args: ['movetopicon', { descendants: false }]
+            }], moveDownIconTemplate: [{
+                type: ContentChild,
+                args: ['movedownicon', { descendants: false }]
+            }], moveBottomIconTemplate: [{
+                type: ContentChild,
+                args: ['movebottomicon', { descendants: false }]
+            }], filterIconTemplate: [{
+                type: ContentChild,
+                args: ['filtericon', { descendants: false }]
+            }], templates: [{
+                type: ContentChildren,
+                args: [PrimeTemplate]
+            }] } });
+class OrderListModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: OrderListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: OrderListModule, imports: [OrderList, SharedModule], exports: [OrderList, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: OrderListModule, imports: [OrderList, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: OrderListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [OrderList, SharedModule],
+                    exports: [OrderList, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OrderList, OrderListClasses, OrderListModule, OrderListStyle };
+//# sourceMappingURL=primeng-orderlist.mjs.map