@gravionlabs/helix-core 22.1.2 → 22.1.3

package/fesm2022/gravionlabs-helix-core-orderlist.mjs

@@ -1,24 +1,24 @@
-export * from '@gravionlabs/helix-core/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, input, numberAttribute, booleanAttribute, model, output, viewChild, contentChild, effect, contentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import * as i4 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import { uuid, findIndexInList, setAttribute } from '@gravionlabs/helix-core/uix/utils';
-import { FilterService, HelixTemplate, SharedModule } from '@gravionlabs/helix-core/api';
-import { BaseComponent, PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
-import * as i1 from '@gravionlabs/helix-core/bind';
-import { Bind } from '@gravionlabs/helix-core/bind';
-import * as i3 from '@gravionlabs/helix-core/button';
-import { ButtonModule } from '@gravionlabs/helix-core/button';
-import { AngleDoubleDownIcon, AngleDoubleUpIcon, AngleUpIcon, AngleDownIcon } from '@gravionlabs/helix-core/icons';
-import { Listbox } from '@gravionlabs/helix-core/listbox';
-import { Ripple } from '@gravionlabs/helix-core/ripple';
-import { BaseStyle } from '@gravionlabs/helix-core/base';
-
-const style = /*css*/ `
+import { DragDropModule, moveItemInArray } from "@angular/cdk/drag-drop";
+import * as i2 from "@angular/common";
+import { CommonModule, isPlatformBrowser } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, NgModule, ViewEncapsulation, booleanAttribute, contentChild, contentChildren, effect, inject, input, model, numberAttribute, output, viewChild } from "@angular/core";
+import * as i4 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { findIndexInList, setAttribute, uuid } from "@gravionlabs/helix-core/uix/utils";
+import { FilterService, HelixTemplate, SharedModule } from "@gravionlabs/helix-core/api";
+import { BaseComponent, PARENT_INSTANCE } from "@gravionlabs/helix-core/basecomponent";
+import * as i1 from "@gravionlabs/helix-core/bind";
+import { Bind } from "@gravionlabs/helix-core/bind";
+import * as i3 from "@gravionlabs/helix-core/button";
+import { ButtonModule } from "@gravionlabs/helix-core/button";
+import { AngleDoubleDownIcon, AngleDoubleUpIcon, AngleDownIcon, AngleUpIcon } from "@gravionlabs/helix-core/icons";
+import { Listbox } from "@gravionlabs/helix-core/listbox";
+import { Ripple } from "@gravionlabs/helix-core/ripple";
+import { BaseStyle } from "@gravionlabs/helix-core/base";
+export * from "@gravionlabs/helix-core/types/orderlist";
+const theme = `
+    
     .h-orderlist {
         display: flex;
         gap: dt('orderlist.gap');
@@ -34,10 +34,7 @@ const style = /*css*/ `
         justify-content: center;
         gap: dt('orderlist.controls.gap');
     }
-`;
 
-const theme = /*css*/ `
-    ${style}
 
     /* For Helix */
     .h-orderlist-controls-right .h-orderlist-controls {
@@ -45,694 +42,455 @@ const theme = /*css*/ `
     }
 `;
 const classes = {
-    root: ({ instance }) => ['h-orderlist h-component', { 'h-orderlist-controls-left': instance.controlsPosition() === 'left', 'h-orderlist-controls-right': instance.controlsPosition() === 'right' }],
-    controls: 'h-orderlist-controls'
+	root: ({ instance }) => ["h-orderlist h-component", {
+		"h-orderlist-controls-left": instance.controlsPosition() === "left",
+		"h-orderlist-controls-right": instance.controlsPosition() === "right"
+	}],
+	controls: "h-orderlist-controls"
+};
+var OrderListStyle = class OrderListStyle extends BaseStyle {
+	name = "orderlist";
+	style = theme;
+	classes = classes;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OrderListStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OrderListStyle
+	});
 };
-class OrderListStyle extends BaseStyle {
-    name = 'orderlist';
-    style = theme;
-    classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OrderListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OrderListStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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
- *
- */
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: OrderListStyle,
+	decorators: [{ type: Injectable }]
+});
 var OrderListClasses;
-(function (OrderListClasses) {
-    /**
-     * Class name of the root element
-     */
-    OrderListClasses["root"] = "h-orderlist";
-    /**
-     * Class name of the controls element
-     */
-    OrderListClasses["controls"] = "h-orderlist-controls";
+(function(OrderListClasses) {
+	OrderListClasses["root"] = "h-orderlist";
+	OrderListClasses["controls"] = "h-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 = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
-    /**
-     * Style class of the component.
-     * @deprecated since v20.0.0, use `class` instead.
-     * @group Props
-     */
-    styleClass = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
-    /**
-     * Index of the element in tabbing order.
-     * @group Props
-     */
-    tabindex = input(undefined, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    /**
-     * Defines a string that labels the input for accessibility.
-     * @group Props
-     */
-    ariaLabel = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    /**
-     * Specifies one or more IDs in the DOM that labels the input field.
-     * @group Props
-     */
-    ariaLabelledBy = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
-    /**
-     * Inline style of the list element.
-     * @group Props
-     */
-    listStyle = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "listStyle" }] : /* istanbul ignore next */ []));
-    /**
-     * A boolean value that indicates whether the component should be responsive.
-     * @group Props
-     */
-    responsive = input(undefined, { ...(ngDevMode ? { debugName: "responsive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * When specified displays an input field to filter the items on keyup and decides which fields to search against.
-     * @group Props
-     */
-    filterBy = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "filterBy" }] : /* istanbul ignore next */ []));
-    /**
-     * Placeholder of the filter input.
-     * @group Props
-     */
-    filterPlaceholder = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
-    /**
-     * Locale to use in filtering. The default locale is the host environment's current locale.
-     * @group Props
-     */
-    filterLocale = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "filterLocale" }] : /* istanbul ignore next */ []));
-    /**
-     * 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 = input(false, { ...(ngDevMode ? { debugName: "metaKeySelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Whether to enable dragdrop based reordering.
-     * @group Props
-     */
-    dragdrop = input(false, { ...(ngDevMode ? { debugName: "dragdrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Defines the location of the buttons with respect to the list.
-     * @group Props
-     */
-    controlsPosition = input('left', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "controlsPosition" }] : /* istanbul ignore next */ []));
-    /**
-     * Defines a string that labels the filter input.
-     * @group Props
-     */
-    ariaFilterLabel = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "ariaFilterLabel" }] : /* istanbul ignore next */ []));
-    /**
-     * Defines how the items are filtered.
-     * @group Props
-     */
-    filterMatchMode = input('contains', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "filterMatchMode" }] : /* istanbul ignore next */ []));
-    /**
-     * Indicates the width of the screen at which the component should change its behavior.
-     * @group Props
-     */
-    breakpoint = input('960px', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "breakpoint" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether to displays rows with alternating colors.
-     * @group Props
-     */
-    stripedRows = input(undefined, { ...(ngDevMode ? { debugName: "stripedRows" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * When present, it specifies that the component should be disabled.
-     * @group Props
-     */
-    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity.
-     * @group Props
-     */
-    trackBy = input((index, item) => item, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
-    /**
-     * Height of the viewport, a scrollbar is defined if height of list exceeds this value.
-     * @group Props
-     */
-    scrollHeight = input('14rem', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "scrollHeight" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether to focus on the first visible or selected element.
-     * @group Props
-     */
-    autoOptionFocus = input(true, { ...(ngDevMode ? { debugName: "autoOptionFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Name of the field that uniquely identifies the record in the data.
-     * @group Props
-     */
-    dataKey = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "dataKey" }] : /* istanbul ignore next */ []));
-    /**
-     * A list of values that are currently selected.
-     * @group Props
-     */
-    selection = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
-    /**
-     * Array of values to be displayed in the component.
-     * It represents the data source for the list of items.
-     * @group Props
-     */
-    value = model([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    /**
-     * Used to pass all properties of the ButtonProps to the Button component.
-     * @group Props
-     */
-    buttonProps = input({ severity: 'secondary' }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "buttonProps" }] : /* istanbul ignore next */ []));
-    /**
-     * Used to pass all properties of the ButtonProps to the move up button inside the component.
-     * @group Props
-     */
-    moveUpButtonProps = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveUpButtonProps" }] : /* istanbul ignore next */ []));
-    /**
-     * Used to pass all properties of the ButtonProps to the move top button inside the component.
-     * @group Props
-     */
-    moveTopButtonProps = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveTopButtonProps" }] : /* istanbul ignore next */ []));
-    /**
-     * Used to pass all properties of the ButtonProps to the move down button inside the component.
-     * @group Props
-     */
-    moveDownButtonProps = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveDownButtonProps" }] : /* istanbul ignore next */ []));
-    /**
-     * Used to pass all properties of the ButtonProps to the move bottom button inside the component.
-     * @group Props
-     */
-    moveBottomButtonProps = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveBottomButtonProps" }] : /* istanbul ignore next */ []));
-    /**
-     * Callback to invoke on selection change.
-     * @param {*} any - selection instance.
-     * @group Emits
-     */
-    selectionChange = output();
-    /**
-     * Callback to invoke when list is reordered.
-     * @param {*} any - list instance.
-     * @group Emits
-     */
-    onReorder = output();
-    /**
-     * Callback to invoke when selection changes.
-     * @param {OrderListSelectionChangeEvent} event - Custom change event.
-     * @group Emits
-     */
-    onSelectionChange = output();
-    /**
-     * Callback to invoke when filtering occurs.
-     * @param {OrderListFilterEvent} event - Custom filter event.
-     * @group Emits
-     */
-    onFilterEvent = output();
-    /**
-     * Callback to invoke when the list is focused
-     * @param {Event} event - Browser event.
-     * @group Emits
-     */
-    onFocus = output();
-    /**
-     * Callback to invoke when the list is blurred
-     * @param {Event} event - Browser event.
-     * @group Emits
-     */
-    onBlur = output();
-    listViewChild = viewChild.required('listelement', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "listViewChild" }] : /* istanbul ignore next */ []));
-    filterViewChild = viewChild('filter', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "filterViewChild" }] : /* istanbul ignore next */ []));
-    /**
-     * Custom item template.
-     * @param {OrderListItemTemplateContext} context - item context.
-     * @see {@link OrderListItemTemplateContext}
-     * @group Templates
-     */
-    itemTemplate = contentChild('item', { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom empty template.
-     * @group Templates
-     */
-    emptyMessageTemplate = contentChild('empty', { ...(ngDevMode ? { debugName: "emptyMessageTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom empty filter template.
-     * @group Templates
-     */
-    emptyFilterMessageTemplate = contentChild('emptyfilter', { ...(ngDevMode ? { debugName: "emptyFilterMessageTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom filter template.
-     * @param {OrderListFilterTemplateContext} context - filter context.
-     * @see {@link OrderListFilterTemplateContext}
-     * @group Templates
-     */
-    filterTemplate = contentChild('filter', { ...(ngDevMode ? { debugName: "filterTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom header template.
-     * @group Templates
-     */
-    headerTemplate = contentChild('header', { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom move up icon template.
-     * @group Templates
-     */
-    moveUpIconTemplate = contentChild('moveupicon', { ...(ngDevMode ? { debugName: "moveUpIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom move top icon template.
-     * @group Templates
-     */
-    moveTopIconTemplate = contentChild('movetopicon', { ...(ngDevMode ? { debugName: "moveTopIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom move down icon template.
-     * @group Templates
-     */
-    moveDownIconTemplate = contentChild('movedownicon', { ...(ngDevMode ? { debugName: "moveDownIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom move bottom icon template.
-     * @group Templates
-     */
-    moveBottomIconTemplate = contentChild('movebottomicon', { ...(ngDevMode ? { debugName: "moveBottomIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom filter icon template.
-     * @group Templates
-     */
-    filterIconTemplate = contentChild('filtericon', { ...(ngDevMode ? { debugName: "filterIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    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 = [];
-    constructor() {
-        super();
-        effect(() => {
-            this.d_selection = this.selection();
-        });
-        effect(() => {
-            const val = this.value();
-            if (this.filterValue) {
-                this.filter();
-            }
-            else if (this.dragdrop()) {
-                // Initialize visibleOptions for drag&drop even when no filtering is active
-                this.visibleOptions = [...(val || [])];
-            }
-        });
-    }
-    movedUp;
-    movedDown;
-    itemTouched;
-    styleElement;
-    id = uuid('pn_id_');
-    filterValue;
-    visibleOptions;
-    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 = contentChildren(HelixTemplate, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
-    _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()?.nativeElement && (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.d_selection && this.value() instanceof Array) {
-            // Sort selection by their current index to process them from top to bottom
-            const sortedSelection = this.sortByIndexInList(this.d_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.d_selection);
-        }
-        this.listViewChild()?.cd?.markForCheck();
-    }
-    moveTop() {
-        if (this.d_selection) {
-            for (let i = this.d_selection.length - 1; i >= 0; i--) {
-                let selectedItem = this.d_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.d_selection);
-            setTimeout(() => {
-                this.listViewChild().scrollInView(0);
-            });
-        }
-        this.listViewChild()?.cd?.markForCheck();
-    }
-    moveDown() {
-        if (this.d_selection && this.value() instanceof Array) {
-            const sortedSelection = this.sortByIndexInList(this.d_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.d_selection);
-        }
-        this.listViewChild()?.cd?.markForCheck();
-    }
-    moveBottom() {
-        if (this.d_selection) {
-            for (let i = 0; i < this.d_selection.length; i++) {
-                let selectedItem = this.d_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.d_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.d_selection && this.d_selection.length > 1 && findIndexInList(event.item.data, this.d_selection) !== -1) {
-                // Multi-selection: Move all selected items
-                itemsToMove = [...this.d_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.d_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 = `
+const ORDERLIST_INSTANCE = new InjectionToken("ORDERLIST_INSTANCE");
+var OrderList = class OrderList extends BaseComponent {
+	componentName = "OrderList";
+	bindDirectiveInstance = inject(Bind, { self: true });
+	$pcOrderList = inject(ORDERLIST_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	header = input(...ngDevMode ? [void 0, { debugName: "header" }] : 	/* istanbul ignore next */ []);
+	styleClass = input(...ngDevMode ? [void 0, { debugName: "styleClass" }] : 	/* istanbul ignore next */ []);
+	tabindex = input(void 0, {
+		...ngDevMode ? { debugName: "tabindex" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : 	/* istanbul ignore next */ []);
+	ariaLabelledBy = input(...ngDevMode ? [void 0, { debugName: "ariaLabelledBy" }] : 	/* istanbul ignore next */ []);
+	listStyle = input(...ngDevMode ? [void 0, { debugName: "listStyle" }] : 	/* istanbul ignore next */ []);
+	responsive = input(void 0, {
+		...ngDevMode ? { debugName: "responsive" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	filterBy = input(...ngDevMode ? [void 0, { debugName: "filterBy" }] : 	/* istanbul ignore next */ []);
+	filterPlaceholder = input(...ngDevMode ? [void 0, { debugName: "filterPlaceholder" }] : 	/* istanbul ignore next */ []);
+	filterLocale = input(...ngDevMode ? [void 0, { debugName: "filterLocale" }] : 	/* istanbul ignore next */ []);
+	metaKeySelection = input(false, {
+		...ngDevMode ? { debugName: "metaKeySelection" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	dragdrop = input(false, {
+		...ngDevMode ? { debugName: "dragdrop" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	controlsPosition = input("left", ...ngDevMode ? [{ debugName: "controlsPosition" }] : 	/* istanbul ignore next */ []);
+	ariaFilterLabel = input(...ngDevMode ? [void 0, { debugName: "ariaFilterLabel" }] : 	/* istanbul ignore next */ []);
+	filterMatchMode = input("contains", ...ngDevMode ? [{ debugName: "filterMatchMode" }] : 	/* istanbul ignore next */ []);
+	breakpoint = input("960px", ...ngDevMode ? [{ debugName: "breakpoint" }] : 	/* istanbul ignore next */ []);
+	stripedRows = input(void 0, {
+		...ngDevMode ? { debugName: "stripedRows" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabled = input(void 0, {
+		...ngDevMode ? { debugName: "disabled" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	trackBy = input((index, item) => item, ...ngDevMode ? [{ debugName: "trackBy" }] : 	/* istanbul ignore next */ []);
+	scrollHeight = input("14rem", ...ngDevMode ? [{ debugName: "scrollHeight" }] : 	/* istanbul ignore next */ []);
+	autoOptionFocus = input(true, {
+		...ngDevMode ? { debugName: "autoOptionFocus" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	dataKey = input(...ngDevMode ? [void 0, { debugName: "dataKey" }] : 	/* istanbul ignore next */ []);
+	selection = input(void 0, ...ngDevMode ? [{ debugName: "selection" }] : 	/* istanbul ignore next */ []);
+	value = model([], ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
+	buttonProps = input({ severity: "secondary" }, ...ngDevMode ? [{ debugName: "buttonProps" }] : 	/* istanbul ignore next */ []);
+	moveUpButtonProps = input(void 0, ...ngDevMode ? [{ debugName: "moveUpButtonProps" }] : 	/* istanbul ignore next */ []);
+	moveTopButtonProps = input(void 0, ...ngDevMode ? [{ debugName: "moveTopButtonProps" }] : 	/* istanbul ignore next */ []);
+	moveDownButtonProps = input(void 0, ...ngDevMode ? [{ debugName: "moveDownButtonProps" }] : 	/* istanbul ignore next */ []);
+	moveBottomButtonProps = input(void 0, ...ngDevMode ? [{ debugName: "moveBottomButtonProps" }] : 	/* istanbul ignore next */ []);
+	selectionChange = output();
+	onReorder = output();
+	onSelectionChange = output();
+	onFilterEvent = output();
+	onFocus = output();
+	onBlur = output();
+	listViewChild = viewChild.required("listelement", ...ngDevMode ? [{ debugName: "listViewChild" }] : 	/* istanbul ignore next */ []);
+	filterViewChild = viewChild("filter", ...ngDevMode ? [{ debugName: "filterViewChild" }] : 	/* istanbul ignore next */ []);
+	itemTemplate = contentChild("item", {
+		...ngDevMode ? { debugName: "itemTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	emptyMessageTemplate = contentChild("empty", {
+		...ngDevMode ? { debugName: "emptyMessageTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	emptyFilterMessageTemplate = contentChild("emptyfilter", {
+		...ngDevMode ? { debugName: "emptyFilterMessageTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	filterTemplate = contentChild("filter", {
+		...ngDevMode ? { debugName: "filterTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	headerTemplate = contentChild("header", {
+		...ngDevMode ? { debugName: "headerTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	moveUpIconTemplate = contentChild("moveupicon", {
+		...ngDevMode ? { debugName: "moveUpIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	moveTopIconTemplate = contentChild("movetopicon", {
+		...ngDevMode ? { debugName: "moveTopIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	moveDownIconTemplate = contentChild("movedownicon", {
+		...ngDevMode ? { debugName: "moveDownIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	moveBottomIconTemplate = contentChild("movebottomicon", {
+		...ngDevMode ? { debugName: "moveBottomIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	filterIconTemplate = contentChild("filtericon", {
+		...ngDevMode ? { debugName: "filterIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	get moveUpAriaLabel() {
+		return this.config.translation.aria ? this.config.translation.aria.moveUp : void 0;
+	}
+	get moveTopAriaLabel() {
+		return this.config.translation.aria ? this.config.translation.aria.moveTop : void 0;
+	}
+	get moveDownAriaLabel() {
+		return this.config.translation.aria ? this.config.translation.aria.moveDown : void 0;
+	}
+	get moveBottomAriaLabel() {
+		return this.config.translation.aria ? this.config.translation.aria.moveBottom : void 0;
+	}
+	_componentStyle = inject(OrderListStyle);
+	filterOptions;
+	d_selection = [];
+	constructor() {
+		super();
+		effect(() => {
+			this.d_selection = this.selection();
+		});
+		effect(() => {
+			const val = this.value();
+			if (this.filterValue) this.filter();
+			else if (this.dragdrop()) this.visibleOptions = [...val || []];
+		});
+	}
+	movedUp;
+	movedDown;
+	itemTouched;
+	styleElement;
+	id = uuid("pn_id_");
+	filterValue;
+	visibleOptions;
+	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()
+		};
+		if (this.dragdrop() && this.value() && !this.visibleOptions) this.visibleOptions = [...this.value()];
+	}
+	templates = contentChildren(HelixTemplate, ...ngDevMode ? [{ debugName: "templates" }] : 	/* istanbul ignore next */ []);
+	_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;
+		this.selectionChange.emit(e.value);
+		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());
+	}
+	resetFilter() {
+		this.filterValue = "";
+		this.filterViewChild()?.nativeElement && (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.d_selection && this.value() instanceof Array) {
+			const sortedSelection = this.sortByIndexInList(this.d_selection, this.value());
+			for (let selectedItem of sortedSelection) {
+				let selectedItemIndex = findIndexInList(selectedItem, this.value());
+				if (selectedItemIndex > 0) {
+					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.movedUp = true;
+			this.onReorder.emit(this.d_selection);
+		}
+		this.listViewChild()?.cd?.markForCheck();
+	}
+	moveTop() {
+		if (this.d_selection) {
+			for (let i = this.d_selection.length - 1; i >= 0; i--) {
+				let selectedItem = this.d_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) this.visibleOptions = [...this.value() || []];
+			}
+			this.onReorder.emit(this.d_selection);
+			setTimeout(() => {
+				this.listViewChild().scrollInView(0);
+			});
+		}
+		this.listViewChild()?.cd?.markForCheck();
+	}
+	moveDown() {
+		if (this.d_selection && this.value() instanceof Array) {
+			const sortedSelection = this.sortByIndexInList(this.d_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.d_selection);
+		}
+		this.listViewChild()?.cd?.markForCheck();
+	}
+	moveBottom() {
+		if (this.d_selection) {
+			for (let i = 0; i < this.d_selection.length; i++) {
+				let selectedItem = this.d_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.d_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;
+		const originalValue = [...this.value() || []];
+		const originalVisibleOptions = this.visibleOptions ? [...this.visibleOptions] : null;
+		if (previousIndex !== currentIndex) {
+			let itemsToMove = [];
+			if (this.d_selection && this.d_selection.length > 1 && findIndexInList(event.item.data, this.d_selection) !== -1) {
+				itemsToMove = [...this.d_selection];
+				if (this.value()) {
+					this.value().length = 0;
+					this.value().push(...originalValue);
+				}
+				if (originalVisibleOptions && this.visibleOptions) {
+					this.visibleOptions.length = 0;
+					this.visibleOptions.push(...originalVisibleOptions);
+				}
+				itemsToMove = this.sortByIndexInList(itemsToMove, this.value() || []);
+				let itemsBefore = 0;
+				for (const item of itemsToMove) {
+					const itemIndex = findIndexInList(item, this.value() || []);
+					if (itemIndex !== -1 && itemIndex < currentIndex) itemsBefore++;
+				}
+				for (let i = itemsToMove.length - 1; i >= 0; i--) {
+					const itemIndex = findIndexInList(itemsToMove[i], this.value() || []);
+					if (itemIndex !== -1) this.value()?.splice(itemIndex, 1);
+				}
+				const targetIndex = Math.max(0, currentIndex - itemsBefore);
+				for (let i = 0; i < itemsToMove.length; i++) this.value()?.splice(targetIndex + i, 0, itemsToMove[i]);
+				if (this.dragdrop()) {
+					if (this.filterValue) this.filter();
+					else if (this.visibleOptions) this.visibleOptions = [...this.value() || []];
+				}
+				this.cd?.markForCheck();
+				this.onReorder.emit(itemsToMove);
+			} else {
+				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);
+				if (this.dragdrop() && this.visibleOptions && !this.filterValue) this.visibleOptions = [...this.value() || []];
+				this.onReorder.emit([event.item.data]);
+			}
+		}
+	}
+	sortByIndexInList(items, list) {
+		return items.sort((a, b) => {
+			return findIndexInList(a, list) - findIndexInList(b, list);
+		});
+	}
+	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.d_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()}) {
                         .h-orderlist[${this.$attrSelector}] {
                             flex-direction: column;
@@ -753,48 +511,963 @@ class OrderList extends BaseComponent {
                         }
                     }
                 `;
-                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: "22.1.6", ngImport: i0, type: OrderList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OrderList, isStandalone: true, selector: "h-orderList, h-orderlist, h-order-list", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, listStyle: { classPropertyName: "listStyle", publicName: "listStyle", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: true, isRequired: false, transformFunction: null }, metaKeySelection: { classPropertyName: "metaKeySelection", publicName: "metaKeySelection", isSignal: true, isRequired: false, transformFunction: null }, dragdrop: { classPropertyName: "dragdrop", publicName: "dragdrop", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, ariaFilterLabel: { classPropertyName: "ariaFilterLabel", publicName: "ariaFilterLabel", isSignal: true, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, stripedRows: { classPropertyName: "stripedRows", publicName: "stripedRows", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, autoOptionFocus: { classPropertyName: "autoOptionFocus", publicName: "autoOptionFocus", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, buttonProps: { classPropertyName: "buttonProps", publicName: "buttonProps", isSignal: true, isRequired: false, transformFunction: null }, moveUpButtonProps: { classPropertyName: "moveUpButtonProps", publicName: "moveUpButtonProps", isSignal: true, isRequired: false, transformFunction: null }, moveTopButtonProps: { classPropertyName: "moveTopButtonProps", publicName: "moveTopButtonProps", isSignal: true, isRequired: false, transformFunction: null }, moveDownButtonProps: { classPropertyName: "moveDownButtonProps", publicName: "moveDownButtonProps", isSignal: true, isRequired: false, transformFunction: null }, moveBottomButtonProps: { classPropertyName: "moveBottomButtonProps", publicName: "moveBottomButtonProps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", 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"], isSignal: true }, { propertyName: "emptyMessageTemplate", first: true, predicate: ["empty"], isSignal: true }, { propertyName: "emptyFilterMessageTemplate", first: true, predicate: ["emptyfilter"], isSignal: true }, { propertyName: "filterTemplate", first: true, predicate: ["filter"], isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], isSignal: true }, { propertyName: "moveUpIconTemplate", first: true, predicate: ["moveupicon"], isSignal: true }, { propertyName: "moveTopIconTemplate", first: true, predicate: ["movetopicon"], isSignal: true }, { propertyName: "moveDownIconTemplate", first: true, predicate: ["movedownicon"], isSignal: true }, { propertyName: "moveBottomIconTemplate", first: true, predicate: ["movebottomicon"], isSignal: true }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"], isSignal: true }, { propertyName: "templates", predicate: HelixTemplate, isSignal: true }], viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["listelement"], descendants: true, isSignal: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "<div [hBind]=\"ptm('controls')\" [class]=\"cx('controls')\">\n  <button [pt]=\"ptm('pcMoveUpButton')\" type=\"button\" [disabled]=\"moveDisabled()\" hButton hRipple (click)=\"moveUp()\" [attr.aria-label]=\"moveUpAriaLabel\" [buttonProps]=\"getButtonProps('up')\" hostName=\"orderlist\" [unstyled]=\"unstyled()\">\n    @if (!moveUpIconTemplate() && !_moveUpIconTemplate) {\n      <svg data-h-icon=\"angle-up\" hButtonIcon [pt]=\"ptm('pcMoveUpButton')['icon']\" />\n    }\n    <ng-template *ngTemplateOutlet=\"moveUpIconTemplate() || _moveUpIconTemplate\"></ng-template>\n  </button>\n  <button [pt]=\"ptm('pcMoveTopButton')\" type=\"button\" [disabled]=\"moveDisabled()\" hButton hRipple (click)=\"moveTop()\" [attr.aria-label]=\"moveTopAriaLabel\" [buttonProps]=\"getButtonProps('top')\" hostName=\"orderlist\" [unstyled]=\"unstyled()\">\n    @if (!moveTopIconTemplate() && !_moveTopIconTemplate) {\n      <svg data-h-icon=\"angle-double-up\" hButtonIcon [pt]=\"ptm('pcMoveTopButton')['icon']\" />\n    }\n    <ng-template *ngTemplateOutlet=\"moveTopIconTemplate() || _moveTopIconTemplate\"></ng-template>\n  </button>\n  <button\n    [pt]=\"ptm('pcMoveDownButton')\"\n    type=\"button\"\n    [disabled]=\"moveDisabled()\"\n    hButton\n    hRipple\n    (click)=\"moveDown()\"\n    [attr.aria-label]=\"moveDownAriaLabel\"\n    [buttonProps]=\"getButtonProps('down')\"\n    hostName=\"orderlist\"\n    [unstyled]=\"unstyled()\"\n    >\n    @if (!moveDownIconTemplate() && !_moveDownIconTemplate) {\n      <svg data-h-icon=\"angle-down\" hButtonIcon [pt]=\"ptm('pcMoveDownButton')['icon']\" />\n    }\n    <ng-template *ngTemplateOutlet=\"moveDownIconTemplate() || _moveDownIconTemplate\"></ng-template>\n  </button>\n  <button\n    [pt]=\"ptm('pcMoveBottomButton')\"\n    type=\"button\"\n    [disabled]=\"moveDisabled()\"\n    hButton\n    hRipple\n    (click)=\"moveBottom()\"\n    [attr.aria-label]=\"moveBottomAriaLabel\"\n    [buttonProps]=\"getButtonProps('bottom')\"\n    hostName=\"orderlist\"\n    [unstyled]=\"unstyled()\"\n    >\n    @if (!moveBottomIconTemplate() && !_moveBottomIconTemplate) {\n      <svg data-h-icon=\"angle-double-down\" hButtonIcon [pt]=\"ptm('pcMoveBottomButton')['icon']\" />\n    }\n    <ng-template *ngTemplateOutlet=\"moveBottomIconTemplate() || _moveBottomIconTemplate\"></ng-template>\n  </button>\n</div>\n<h-listbox\n  [pt]=\"ptm('pcListbox')\"\n  #listelement\n  [multiple]=\"true\"\n  [options]=\"value()\"\n  [(ngModel)]=\"d_selection\"\n  [optionLabel]=\"dataKey() ?? 'name'\"\n  [id]=\"id + '_list'\"\n  [listStyle]=\"listStyle()\"\n  [striped]=\"stripedRows()\"\n  [tabindex]=\"tabindex()\"\n  (onFocus)=\"onListFocus($event)\"\n  (onBlur)=\"onListBlur($event)\"\n  (onChange)=\"onChangeSelection($event)\"\n  [ariaLabel]=\"ariaLabel()\"\n  [disabled]=\"disabled()\"\n  [metaKeySelection]=\"metaKeySelection()\"\n  [scrollHeight]=\"scrollHeight()\"\n  [autoOptionFocus]=\"autoOptionFocus()\"\n  [filter]=\"filterBy()\"\n  [filterBy]=\"filterBy()\"\n  [filterLocale]=\"filterLocale()\"\n  [filterPlaceHolder]=\"filterPlaceholder()\"\n  [dragdrop]=\"dragdrop()\"\n  (onDrop)=\"onDrop($event)\"\n  hostName=\"orderlist\"\n  [unstyled]=\"unstyled()\"\n  >\n  @if (headerTemplate() || _headerTemplate) {\n    <ng-template #header>\n      <ng-template *ngTemplateOutlet=\"headerTemplate() || _headerTemplate\"></ng-template>\n    </ng-template>\n  }\n  @if (itemTemplate() || _itemTemplate) {\n    <ng-template #item let-option let-selected=\"selected\" let-index=\"index\">\n      <ng-template *ngTemplateOutlet=\"itemTemplate() || _itemTemplate; context: { $implicit: option, selected: selected, index: index }\"></ng-template>\n    </ng-template>\n  }\n  @if (emptyMessageTemplate() || _emptyMessageTemplate) {\n    <ng-template #empty>\n      <ng-template *ngTemplateOutlet=\"emptyMessageTemplate() || _emptyMessageTemplate\"></ng-template>\n    </ng-template>\n  }\n  @if (emptyFilterMessageTemplate() || _emptyFilterMessageTemplate) {\n    <ng-template #emptyfilter>\n      <ng-template *ngTemplateOutlet=\"emptyFilterMessageTemplate() || _emptyFilterMessageTemplate\"></ng-template>\n    </ng-template>\n  }\n  @if (filterIconTemplate() || _filterIconTemplate) {\n    <ng-template #filtericon>\n      <ng-template *ngTemplateOutlet=\"filterIconTemplate() || _filterIconTemplate\"></ng-template>\n    </ng-template>\n  }\n  @if (filterTemplate() || _filterTemplate) {\n    <ng-template #filter let-options=\"options\">\n      <ng-template *ngTemplateOutlet=\"filterTemplate() || _filterTemplate; context: { options: options }\"></ng-template>\n    </ng-template>\n  }\n</h-listbox>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[hButton]", 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: "[hButtonIcon]", inputs: ["ptButtonIcon", "pButtonIconPT", "pButtonUnstyled"] }, { kind: "directive", type: Ripple, selector: "[hRipple]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "component", type: AngleDoubleDownIcon, selector: "[data-h-icon=\"angle-double-down\"]" }, { kind: "component", type: AngleDoubleUpIcon, selector: "[data-h-icon=\"angle-double-up\"]" }, { kind: "component", type: AngleUpIcon, selector: "[data-h-icon=\"angle-up\"]" }, { kind: "component", type: AngleDownIcon, selector: "[data-h-icon=\"angle-down\"]" }, { kind: "component", type: Listbox, selector: "h-listbox, h-listBox, h-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: "[hBind]", inputs: ["hBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OrderList, decorators: [{
-            type: Component,
-            args: [{ selector: 'h-orderList, h-orderlist, h-order-list', standalone: true, imports: [CommonModule, ButtonModule, Ripple, DragDropModule, AngleDoubleDownIcon, AngleDoubleUpIcon, AngleUpIcon, AngleDownIcon, Listbox, FormsModule, SharedModule, Bind], 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], template: "<div [hBind]=\"ptm('controls')\" [class]=\"cx('controls')\">\n  <button [pt]=\"ptm('pcMoveUpButton')\" type=\"button\" [disabled]=\"moveDisabled()\" hButton hRipple (click)=\"moveUp()\" [attr.aria-label]=\"moveUpAriaLabel\" [buttonProps]=\"getButtonProps('up')\" hostName=\"orderlist\" [unstyled]=\"unstyled()\">\n    @if (!moveUpIconTemplate() && !_moveUpIconTemplate) {\n      <svg data-h-icon=\"angle-up\" hButtonIcon [pt]=\"ptm('pcMoveUpButton')['icon']\" />\n    }\n    <ng-template *ngTemplateOutlet=\"moveUpIconTemplate() || _moveUpIconTemplate\"></ng-template>\n  </button>\n  <button [pt]=\"ptm('pcMoveTopButton')\" type=\"button\" [disabled]=\"moveDisabled()\" hButton hRipple (click)=\"moveTop()\" [attr.aria-label]=\"moveTopAriaLabel\" [buttonProps]=\"getButtonProps('top')\" hostName=\"orderlist\" [unstyled]=\"unstyled()\">\n    @if (!moveTopIconTemplate() && !_moveTopIconTemplate) {\n      <svg data-h-icon=\"angle-double-up\" hButtonIcon [pt]=\"ptm('pcMoveTopButton')['icon']\" />\n    }\n    <ng-template *ngTemplateOutlet=\"moveTopIconTemplate() || _moveTopIconTemplate\"></ng-template>\n  </button>\n  <button\n    [pt]=\"ptm('pcMoveDownButton')\"\n    type=\"button\"\n    [disabled]=\"moveDisabled()\"\n    hButton\n    hRipple\n    (click)=\"moveDown()\"\n    [attr.aria-label]=\"moveDownAriaLabel\"\n    [buttonProps]=\"getButtonProps('down')\"\n    hostName=\"orderlist\"\n    [unstyled]=\"unstyled()\"\n    >\n    @if (!moveDownIconTemplate() && !_moveDownIconTemplate) {\n      <svg data-h-icon=\"angle-down\" hButtonIcon [pt]=\"ptm('pcMoveDownButton')['icon']\" />\n    }\n    <ng-template *ngTemplateOutlet=\"moveDownIconTemplate() || _moveDownIconTemplate\"></ng-template>\n  </button>\n  <button\n    [pt]=\"ptm('pcMoveBottomButton')\"\n    type=\"button\"\n    [disabled]=\"moveDisabled()\"\n    hButton\n    hRipple\n    (click)=\"moveBottom()\"\n    [attr.aria-label]=\"moveBottomAriaLabel\"\n    [buttonProps]=\"getButtonProps('bottom')\"\n    hostName=\"orderlist\"\n    [unstyled]=\"unstyled()\"\n    >\n    @if (!moveBottomIconTemplate() && !_moveBottomIconTemplate) {\n      <svg data-h-icon=\"angle-double-down\" hButtonIcon [pt]=\"ptm('pcMoveBottomButton')['icon']\" />\n    }\n    <ng-template *ngTemplateOutlet=\"moveBottomIconTemplate() || _moveBottomIconTemplate\"></ng-template>\n  </button>\n</div>\n<h-listbox\n  [pt]=\"ptm('pcListbox')\"\n  #listelement\n  [multiple]=\"true\"\n  [options]=\"value()\"\n  [(ngModel)]=\"d_selection\"\n  [optionLabel]=\"dataKey() ?? 'name'\"\n  [id]=\"id + '_list'\"\n  [listStyle]=\"listStyle()\"\n  [striped]=\"stripedRows()\"\n  [tabindex]=\"tabindex()\"\n  (onFocus)=\"onListFocus($event)\"\n  (onBlur)=\"onListBlur($event)\"\n  (onChange)=\"onChangeSelection($event)\"\n  [ariaLabel]=\"ariaLabel()\"\n  [disabled]=\"disabled()\"\n  [metaKeySelection]=\"metaKeySelection()\"\n  [scrollHeight]=\"scrollHeight()\"\n  [autoOptionFocus]=\"autoOptionFocus()\"\n  [filter]=\"filterBy()\"\n  [filterBy]=\"filterBy()\"\n  [filterLocale]=\"filterLocale()\"\n  [filterPlaceHolder]=\"filterPlaceholder()\"\n  [dragdrop]=\"dragdrop()\"\n  (onDrop)=\"onDrop($event)\"\n  hostName=\"orderlist\"\n  [unstyled]=\"unstyled()\"\n  >\n  @if (headerTemplate() || _headerTemplate) {\n    <ng-template #header>\n      <ng-template *ngTemplateOutlet=\"headerTemplate() || _headerTemplate\"></ng-template>\n    </ng-template>\n  }\n  @if (itemTemplate() || _itemTemplate) {\n    <ng-template #item let-option let-selected=\"selected\" let-index=\"index\">\n      <ng-template *ngTemplateOutlet=\"itemTemplate() || _itemTemplate; context: { $implicit: option, selected: selected, index: index }\"></ng-template>\n    </ng-template>\n  }\n  @if (emptyMessageTemplate() || _emptyMessageTemplate) {\n    <ng-template #empty>\n      <ng-template *ngTemplateOutlet=\"emptyMessageTemplate() || _emptyMessageTemplate\"></ng-template>\n    </ng-template>\n  }\n  @if (emptyFilterMessageTemplate() || _emptyFilterMessageTemplate) {\n    <ng-template #emptyfilter>\n      <ng-template *ngTemplateOutlet=\"emptyFilterMessageTemplate() || _emptyFilterMessageTemplate\"></ng-template>\n    </ng-template>\n  }\n  @if (filterIconTemplate() || _filterIconTemplate) {\n    <ng-template #filtericon>\n      <ng-template *ngTemplateOutlet=\"filterIconTemplate() || _filterIconTemplate\"></ng-template>\n    </ng-template>\n  }\n  @if (filterTemplate() || _filterTemplate) {\n    <ng-template #filter let-options=\"options\">\n      <ng-template *ngTemplateOutlet=\"filterTemplate() || _filterTemplate; context: { options: options }\"></ng-template>\n    </ng-template>\n  }\n</h-listbox>\n" }]
-        }], ctorParameters: () => [], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], listStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listStyle", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], filterLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocale", required: false }] }], metaKeySelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaKeySelection", required: false }] }], dragdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragdrop", required: false }] }], controlsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsPosition", required: false }] }], ariaFilterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaFilterLabel", required: false }] }], filterMatchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatchMode", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], stripedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "stripedRows", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], autoOptionFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoOptionFocus", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], buttonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonProps", required: false }] }], moveUpButtonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveUpButtonProps", required: false }] }], moveTopButtonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTopButtonProps", required: false }] }], moveDownButtonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDownButtonProps", required: false }] }], moveBottomButtonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveBottomButtonProps", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], onReorder: [{ type: i0.Output, args: ["onReorder"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }], onFilterEvent: [{ type: i0.Output, args: ["onFilterEvent"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], listViewChild: [{ type: i0.ViewChild, args: ['listelement', { isSignal: true }] }], filterViewChild: [{ type: i0.ViewChild, args: ['filter', { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: ['item', { ...{ descendants: false }, isSignal: true }] }], emptyMessageTemplate: [{ type: i0.ContentChild, args: ['empty', { ...{ descendants: false }, isSignal: true }] }], emptyFilterMessageTemplate: [{ type: i0.ContentChild, args: ['emptyfilter', { ...{ descendants: false }, isSignal: true }] }], filterTemplate: [{ type: i0.ContentChild, args: ['filter', { ...{ descendants: false }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { ...{ descendants: false }, isSignal: true }] }], moveUpIconTemplate: [{ type: i0.ContentChild, args: ['moveupicon', { ...{ descendants: false }, isSignal: true }] }], moveTopIconTemplate: [{ type: i0.ContentChild, args: ['movetopicon', { ...{ descendants: false }, isSignal: true }] }], moveDownIconTemplate: [{ type: i0.ContentChild, args: ['movedownicon', { ...{ descendants: false }, isSignal: true }] }], moveBottomIconTemplate: [{ type: i0.ContentChild, args: ['movebottomicon', { ...{ descendants: false }, isSignal: true }] }], filterIconTemplate: [{ type: i0.ContentChild, args: ['filtericon', { ...{ descendants: false }, isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }] }] } });
-class OrderListModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OrderListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: OrderListModule, imports: [OrderList, SharedModule], exports: [OrderList, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OrderListModule, imports: [OrderList, SharedModule, SharedModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OrderListModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [OrderList, SharedModule],
-                    exports: [OrderList, SharedModule]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+				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: "22.2.1",
+		ngImport: i0,
+		type: OrderList,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: OrderList,
+		isStandalone: true,
+		selector: "h-orderList, h-orderlist, h-order-list",
+		inputs: {
+			header: {
+				classPropertyName: "header",
+				publicName: "header",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			styleClass: {
+				classPropertyName: "styleClass",
+				publicName: "styleClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tabindex: {
+				classPropertyName: "tabindex",
+				publicName: "tabindex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabelledBy: {
+				classPropertyName: "ariaLabelledBy",
+				publicName: "ariaLabelledBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			listStyle: {
+				classPropertyName: "listStyle",
+				publicName: "listStyle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			responsive: {
+				classPropertyName: "responsive",
+				publicName: "responsive",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filterBy: {
+				classPropertyName: "filterBy",
+				publicName: "filterBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filterPlaceholder: {
+				classPropertyName: "filterPlaceholder",
+				publicName: "filterPlaceholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filterLocale: {
+				classPropertyName: "filterLocale",
+				publicName: "filterLocale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			metaKeySelection: {
+				classPropertyName: "metaKeySelection",
+				publicName: "metaKeySelection",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dragdrop: {
+				classPropertyName: "dragdrop",
+				publicName: "dragdrop",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			controlsPosition: {
+				classPropertyName: "controlsPosition",
+				publicName: "controlsPosition",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaFilterLabel: {
+				classPropertyName: "ariaFilterLabel",
+				publicName: "ariaFilterLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filterMatchMode: {
+				classPropertyName: "filterMatchMode",
+				publicName: "filterMatchMode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			breakpoint: {
+				classPropertyName: "breakpoint",
+				publicName: "breakpoint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stripedRows: {
+				classPropertyName: "stripedRows",
+				publicName: "stripedRows",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			trackBy: {
+				classPropertyName: "trackBy",
+				publicName: "trackBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			scrollHeight: {
+				classPropertyName: "scrollHeight",
+				publicName: "scrollHeight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autoOptionFocus: {
+				classPropertyName: "autoOptionFocus",
+				publicName: "autoOptionFocus",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dataKey: {
+				classPropertyName: "dataKey",
+				publicName: "dataKey",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selection: {
+				classPropertyName: "selection",
+				publicName: "selection",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			buttonProps: {
+				classPropertyName: "buttonProps",
+				publicName: "buttonProps",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			moveUpButtonProps: {
+				classPropertyName: "moveUpButtonProps",
+				publicName: "moveUpButtonProps",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			moveTopButtonProps: {
+				classPropertyName: "moveTopButtonProps",
+				publicName: "moveTopButtonProps",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			moveDownButtonProps: {
+				classPropertyName: "moveDownButtonProps",
+				publicName: "moveDownButtonProps",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			moveBottomButtonProps: {
+				classPropertyName: "moveBottomButtonProps",
+				publicName: "moveBottomButtonProps",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			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"],
+				isSignal: true
+			},
+			{
+				propertyName: "emptyMessageTemplate",
+				first: true,
+				predicate: ["empty"],
+				isSignal: true
+			},
+			{
+				propertyName: "emptyFilterMessageTemplate",
+				first: true,
+				predicate: ["emptyfilter"],
+				isSignal: true
+			},
+			{
+				propertyName: "filterTemplate",
+				first: true,
+				predicate: ["filter"],
+				isSignal: true
+			},
+			{
+				propertyName: "headerTemplate",
+				first: true,
+				predicate: ["header"],
+				isSignal: true
+			},
+			{
+				propertyName: "moveUpIconTemplate",
+				first: true,
+				predicate: ["moveupicon"],
+				isSignal: true
+			},
+			{
+				propertyName: "moveTopIconTemplate",
+				first: true,
+				predicate: ["movetopicon"],
+				isSignal: true
+			},
+			{
+				propertyName: "moveDownIconTemplate",
+				first: true,
+				predicate: ["movedownicon"],
+				isSignal: true
+			},
+			{
+				propertyName: "moveBottomIconTemplate",
+				first: true,
+				predicate: ["movebottomicon"],
+				isSignal: true
+			},
+			{
+				propertyName: "filterIconTemplate",
+				first: true,
+				predicate: ["filtericon"],
+				isSignal: true
+			},
+			{
+				propertyName: "templates",
+				predicate: HelixTemplate,
+				isSignal: true
+			}
+		],
+		viewQueries: [{
+			propertyName: "listViewChild",
+			first: true,
+			predicate: ["listelement"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "filterViewChild",
+			first: true,
+			predicate: ["filter"],
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: "<div [hBind]=\"ptm('controls')\" [class]=\"cx('controls')\">\n  <button [pt]=\"ptm('pcMoveUpButton')\" type=\"button\" [disabled]=\"moveDisabled()\" hButton hRipple (click)=\"moveUp()\" [attr.aria-label]=\"moveUpAriaLabel\" [buttonProps]=\"getButtonProps('up')\" hostName=\"orderlist\" [unstyled]=\"unstyled()\">\n    @if (!moveUpIconTemplate() && !_moveUpIconTemplate) {\n      <svg data-h-icon=\"angle-up\" hButtonIcon [pt]=\"ptm('pcMoveUpButton')['icon']\" />\n    }\n    <ng-template *ngTemplateOutlet=\"moveUpIconTemplate() || _moveUpIconTemplate\"></ng-template>\n  </button>\n  <button [pt]=\"ptm('pcMoveTopButton')\" type=\"button\" [disabled]=\"moveDisabled()\" hButton hRipple (click)=\"moveTop()\" [attr.aria-label]=\"moveTopAriaLabel\" [buttonProps]=\"getButtonProps('top')\" hostName=\"orderlist\" [unstyled]=\"unstyled()\">\n    @if (!moveTopIconTemplate() && !_moveTopIconTemplate) {\n      <svg data-h-icon=\"angle-double-up\" hButtonIcon [pt]=\"ptm('pcMoveTopButton')['icon']\" />\n    }\n    <ng-template *ngTemplateOutlet=\"moveTopIconTemplate() || _moveTopIconTemplate\"></ng-template>\n  </button>\n  <button\n    [pt]=\"ptm('pcMoveDownButton')\"\n    type=\"button\"\n    [disabled]=\"moveDisabled()\"\n    hButton\n    hRipple\n    (click)=\"moveDown()\"\n    [attr.aria-label]=\"moveDownAriaLabel\"\n    [buttonProps]=\"getButtonProps('down')\"\n    hostName=\"orderlist\"\n    [unstyled]=\"unstyled()\"\n    >\n    @if (!moveDownIconTemplate() && !_moveDownIconTemplate) {\n      <svg data-h-icon=\"angle-down\" hButtonIcon [pt]=\"ptm('pcMoveDownButton')['icon']\" />\n    }\n    <ng-template *ngTemplateOutlet=\"moveDownIconTemplate() || _moveDownIconTemplate\"></ng-template>\n  </button>\n  <button\n    [pt]=\"ptm('pcMoveBottomButton')\"\n    type=\"button\"\n    [disabled]=\"moveDisabled()\"\n    hButton\n    hRipple\n    (click)=\"moveBottom()\"\n    [attr.aria-label]=\"moveBottomAriaLabel\"\n    [buttonProps]=\"getButtonProps('bottom')\"\n    hostName=\"orderlist\"\n    [unstyled]=\"unstyled()\"\n    >\n    @if (!moveBottomIconTemplate() && !_moveBottomIconTemplate) {\n      <svg data-h-icon=\"angle-double-down\" hButtonIcon [pt]=\"ptm('pcMoveBottomButton')['icon']\" />\n    }\n    <ng-template *ngTemplateOutlet=\"moveBottomIconTemplate() || _moveBottomIconTemplate\"></ng-template>\n  </button>\n</div>\n<h-listbox\n  [pt]=\"ptm('pcListbox')\"\n  #listelement\n  [multiple]=\"true\"\n  [options]=\"value()\"\n  [(ngModel)]=\"d_selection\"\n  [optionLabel]=\"dataKey() ?? 'name'\"\n  [id]=\"id + '_list'\"\n  [listStyle]=\"listStyle()\"\n  [striped]=\"stripedRows()\"\n  [tabindex]=\"tabindex()\"\n  (onFocus)=\"onListFocus($event)\"\n  (onBlur)=\"onListBlur($event)\"\n  (onChange)=\"onChangeSelection($event)\"\n  [ariaLabel]=\"ariaLabel()\"\n  [disabled]=\"disabled()\"\n  [metaKeySelection]=\"metaKeySelection()\"\n  [scrollHeight]=\"scrollHeight()\"\n  [autoOptionFocus]=\"autoOptionFocus()\"\n  [filter]=\"filterBy()\"\n  [filterBy]=\"filterBy()\"\n  [filterLocale]=\"filterLocale()\"\n  [filterPlaceHolder]=\"filterPlaceholder()\"\n  [dragdrop]=\"dragdrop()\"\n  (onDrop)=\"onDrop($event)\"\n  hostName=\"orderlist\"\n  [unstyled]=\"unstyled()\"\n  >\n  @if (headerTemplate() || _headerTemplate) {\n    <ng-template #header>\n      <ng-template *ngTemplateOutlet=\"headerTemplate() || _headerTemplate\"></ng-template>\n    </ng-template>\n  }\n  @if (itemTemplate() || _itemTemplate) {\n    <ng-template #item let-option let-selected=\"selected\" let-index=\"index\">\n      <ng-template *ngTemplateOutlet=\"itemTemplate() || _itemTemplate; context: { $implicit: option, selected: selected, index: index }\"></ng-template>\n    </ng-template>\n  }\n  @if (emptyMessageTemplate() || _emptyMessageTemplate) {\n    <ng-template #empty>\n      <ng-template *ngTemplateOutlet=\"emptyMessageTemplate() || _emptyMessageTemplate\"></ng-template>\n    </ng-template>\n  }\n  @if (emptyFilterMessageTemplate() || _emptyFilterMessageTemplate) {\n    <ng-template #emptyfilter>\n      <ng-template *ngTemplateOutlet=\"emptyFilterMessageTemplate() || _emptyFilterMessageTemplate\"></ng-template>\n    </ng-template>\n  }\n  @if (filterIconTemplate() || _filterIconTemplate) {\n    <ng-template #filtericon>\n      <ng-template *ngTemplateOutlet=\"filterIconTemplate() || _filterIconTemplate\"></ng-template>\n    </ng-template>\n  }\n  @if (filterTemplate() || _filterTemplate) {\n    <ng-template #filter let-options=\"options\">\n      <ng-template *ngTemplateOutlet=\"filterTemplate() || _filterTemplate; context: { options: options }\"></ng-template>\n    </ng-template>\n  }\n</h-listbox>\n",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "directive",
+				type: i2.NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: ButtonModule
+			},
+			{
+				kind: "directive",
+				type: i3.ButtonDirective,
+				selector: "[hButton]",
+				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: "[hButtonIcon]",
+				inputs: [
+					"ptButtonIcon",
+					"pButtonIconPT",
+					"pButtonUnstyled"
+				]
+			},
+			{
+				kind: "directive",
+				type: Ripple,
+				selector: "[hRipple]"
+			},
+			{
+				kind: "ngmodule",
+				type: DragDropModule
+			},
+			{
+				kind: "component",
+				type: AngleDoubleDownIcon,
+				selector: "[data-h-icon=\"angle-double-down\"]"
+			},
+			{
+				kind: "component",
+				type: AngleDoubleUpIcon,
+				selector: "[data-h-icon=\"angle-double-up\"]"
+			},
+			{
+				kind: "component",
+				type: AngleUpIcon,
+				selector: "[data-h-icon=\"angle-up\"]"
+			},
+			{
+				kind: "component",
+				type: AngleDownIcon,
+				selector: "[data-h-icon=\"angle-down\"]"
+			},
+			{
+				kind: "component",
+				type: Listbox,
+				selector: "h-listbox, h-listBox, h-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: "[hBind]",
+				inputs: ["hBind"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: OrderList,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-orderList, h-orderlist, h-order-list",
+			standalone: true,
+			imports: [
+				CommonModule,
+				ButtonModule,
+				Ripple,
+				DragDropModule,
+				AngleDoubleDownIcon,
+				AngleDoubleUpIcon,
+				AngleUpIcon,
+				AngleDownIcon,
+				Listbox,
+				FormsModule,
+				SharedModule,
+				Bind
+			],
+			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],
+			template: "<div [hBind]=\"ptm('controls')\" [class]=\"cx('controls')\">\n  <button [pt]=\"ptm('pcMoveUpButton')\" type=\"button\" [disabled]=\"moveDisabled()\" hButton hRipple (click)=\"moveUp()\" [attr.aria-label]=\"moveUpAriaLabel\" [buttonProps]=\"getButtonProps('up')\" hostName=\"orderlist\" [unstyled]=\"unstyled()\">\n    @if (!moveUpIconTemplate() && !_moveUpIconTemplate) {\n      <svg data-h-icon=\"angle-up\" hButtonIcon [pt]=\"ptm('pcMoveUpButton')['icon']\" />\n    }\n    <ng-template *ngTemplateOutlet=\"moveUpIconTemplate() || _moveUpIconTemplate\"></ng-template>\n  </button>\n  <button [pt]=\"ptm('pcMoveTopButton')\" type=\"button\" [disabled]=\"moveDisabled()\" hButton hRipple (click)=\"moveTop()\" [attr.aria-label]=\"moveTopAriaLabel\" [buttonProps]=\"getButtonProps('top')\" hostName=\"orderlist\" [unstyled]=\"unstyled()\">\n    @if (!moveTopIconTemplate() && !_moveTopIconTemplate) {\n      <svg data-h-icon=\"angle-double-up\" hButtonIcon [pt]=\"ptm('pcMoveTopButton')['icon']\" />\n    }\n    <ng-template *ngTemplateOutlet=\"moveTopIconTemplate() || _moveTopIconTemplate\"></ng-template>\n  </button>\n  <button\n    [pt]=\"ptm('pcMoveDownButton')\"\n    type=\"button\"\n    [disabled]=\"moveDisabled()\"\n    hButton\n    hRipple\n    (click)=\"moveDown()\"\n    [attr.aria-label]=\"moveDownAriaLabel\"\n    [buttonProps]=\"getButtonProps('down')\"\n    hostName=\"orderlist\"\n    [unstyled]=\"unstyled()\"\n    >\n    @if (!moveDownIconTemplate() && !_moveDownIconTemplate) {\n      <svg data-h-icon=\"angle-down\" hButtonIcon [pt]=\"ptm('pcMoveDownButton')['icon']\" />\n    }\n    <ng-template *ngTemplateOutlet=\"moveDownIconTemplate() || _moveDownIconTemplate\"></ng-template>\n  </button>\n  <button\n    [pt]=\"ptm('pcMoveBottomButton')\"\n    type=\"button\"\n    [disabled]=\"moveDisabled()\"\n    hButton\n    hRipple\n    (click)=\"moveBottom()\"\n    [attr.aria-label]=\"moveBottomAriaLabel\"\n    [buttonProps]=\"getButtonProps('bottom')\"\n    hostName=\"orderlist\"\n    [unstyled]=\"unstyled()\"\n    >\n    @if (!moveBottomIconTemplate() && !_moveBottomIconTemplate) {\n      <svg data-h-icon=\"angle-double-down\" hButtonIcon [pt]=\"ptm('pcMoveBottomButton')['icon']\" />\n    }\n    <ng-template *ngTemplateOutlet=\"moveBottomIconTemplate() || _moveBottomIconTemplate\"></ng-template>\n  </button>\n</div>\n<h-listbox\n  [pt]=\"ptm('pcListbox')\"\n  #listelement\n  [multiple]=\"true\"\n  [options]=\"value()\"\n  [(ngModel)]=\"d_selection\"\n  [optionLabel]=\"dataKey() ?? 'name'\"\n  [id]=\"id + '_list'\"\n  [listStyle]=\"listStyle()\"\n  [striped]=\"stripedRows()\"\n  [tabindex]=\"tabindex()\"\n  (onFocus)=\"onListFocus($event)\"\n  (onBlur)=\"onListBlur($event)\"\n  (onChange)=\"onChangeSelection($event)\"\n  [ariaLabel]=\"ariaLabel()\"\n  [disabled]=\"disabled()\"\n  [metaKeySelection]=\"metaKeySelection()\"\n  [scrollHeight]=\"scrollHeight()\"\n  [autoOptionFocus]=\"autoOptionFocus()\"\n  [filter]=\"filterBy()\"\n  [filterBy]=\"filterBy()\"\n  [filterLocale]=\"filterLocale()\"\n  [filterPlaceHolder]=\"filterPlaceholder()\"\n  [dragdrop]=\"dragdrop()\"\n  (onDrop)=\"onDrop($event)\"\n  hostName=\"orderlist\"\n  [unstyled]=\"unstyled()\"\n  >\n  @if (headerTemplate() || _headerTemplate) {\n    <ng-template #header>\n      <ng-template *ngTemplateOutlet=\"headerTemplate() || _headerTemplate\"></ng-template>\n    </ng-template>\n  }\n  @if (itemTemplate() || _itemTemplate) {\n    <ng-template #item let-option let-selected=\"selected\" let-index=\"index\">\n      <ng-template *ngTemplateOutlet=\"itemTemplate() || _itemTemplate; context: { $implicit: option, selected: selected, index: index }\"></ng-template>\n    </ng-template>\n  }\n  @if (emptyMessageTemplate() || _emptyMessageTemplate) {\n    <ng-template #empty>\n      <ng-template *ngTemplateOutlet=\"emptyMessageTemplate() || _emptyMessageTemplate\"></ng-template>\n    </ng-template>\n  }\n  @if (emptyFilterMessageTemplate() || _emptyFilterMessageTemplate) {\n    <ng-template #emptyfilter>\n      <ng-template *ngTemplateOutlet=\"emptyFilterMessageTemplate() || _emptyFilterMessageTemplate\"></ng-template>\n    </ng-template>\n  }\n  @if (filterIconTemplate() || _filterIconTemplate) {\n    <ng-template #filtericon>\n      <ng-template *ngTemplateOutlet=\"filterIconTemplate() || _filterIconTemplate\"></ng-template>\n    </ng-template>\n  }\n  @if (filterTemplate() || _filterTemplate) {\n    <ng-template #filter let-options=\"options\">\n      <ng-template *ngTemplateOutlet=\"filterTemplate() || _filterTemplate; context: { options: options }\"></ng-template>\n    </ng-template>\n  }\n</h-listbox>\n"
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		header: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "header",
+				required: false
+			}]
+		}],
+		styleClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "styleClass",
+				required: false
+			}]
+		}],
+		tabindex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tabindex",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledBy",
+				required: false
+			}]
+		}],
+		listStyle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "listStyle",
+				required: false
+			}]
+		}],
+		responsive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "responsive",
+				required: false
+			}]
+		}],
+		filterBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterBy",
+				required: false
+			}]
+		}],
+		filterPlaceholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterPlaceholder",
+				required: false
+			}]
+		}],
+		filterLocale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterLocale",
+				required: false
+			}]
+		}],
+		metaKeySelection: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "metaKeySelection",
+				required: false
+			}]
+		}],
+		dragdrop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dragdrop",
+				required: false
+			}]
+		}],
+		controlsPosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "controlsPosition",
+				required: false
+			}]
+		}],
+		ariaFilterLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaFilterLabel",
+				required: false
+			}]
+		}],
+		filterMatchMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterMatchMode",
+				required: false
+			}]
+		}],
+		breakpoint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "breakpoint",
+				required: false
+			}]
+		}],
+		stripedRows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stripedRows",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		trackBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trackBy",
+				required: false
+			}]
+		}],
+		scrollHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scrollHeight",
+				required: false
+			}]
+		}],
+		autoOptionFocus: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoOptionFocus",
+				required: false
+			}]
+		}],
+		dataKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dataKey",
+				required: false
+			}]
+		}],
+		selection: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selection",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		buttonProps: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "buttonProps",
+				required: false
+			}]
+		}],
+		moveUpButtonProps: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moveUpButtonProps",
+				required: false
+			}]
+		}],
+		moveTopButtonProps: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moveTopButtonProps",
+				required: false
+			}]
+		}],
+		moveDownButtonProps: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moveDownButtonProps",
+				required: false
+			}]
+		}],
+		moveBottomButtonProps: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moveBottomButtonProps",
+				required: false
+			}]
+		}],
+		selectionChange: [{
+			type: i0.Output,
+			args: ["selectionChange"]
+		}],
+		onReorder: [{
+			type: i0.Output,
+			args: ["onReorder"]
+		}],
+		onSelectionChange: [{
+			type: i0.Output,
+			args: ["onSelectionChange"]
+		}],
+		onFilterEvent: [{
+			type: i0.Output,
+			args: ["onFilterEvent"]
+		}],
+		onFocus: [{
+			type: i0.Output,
+			args: ["onFocus"]
+		}],
+		onBlur: [{
+			type: i0.Output,
+			args: ["onBlur"]
+		}],
+		listViewChild: [{
+			type: i0.ViewChild,
+			args: ["listelement", { isSignal: true }]
+		}],
+		filterViewChild: [{
+			type: i0.ViewChild,
+			args: ["filter", { isSignal: true }]
+		}],
+		itemTemplate: [{
+			type: i0.ContentChild,
+			args: ["item", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		emptyMessageTemplate: [{
+			type: i0.ContentChild,
+			args: ["empty", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		emptyFilterMessageTemplate: [{
+			type: i0.ContentChild,
+			args: ["emptyfilter", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		filterTemplate: [{
+			type: i0.ContentChild,
+			args: ["filter", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		headerTemplate: [{
+			type: i0.ContentChild,
+			args: ["header", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		moveUpIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["moveupicon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		moveTopIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["movetopicon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		moveDownIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["movedownicon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		moveBottomIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["movebottomicon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		filterIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["filtericon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		templates: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }]
+		}]
+	}
+});
+var OrderListModule = class OrderListModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OrderListModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OrderListModule,
+		imports: [OrderList, SharedModule],
+		exports: [OrderList, SharedModule]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OrderListModule,
+		imports: [
+			OrderList,
+			SharedModule,
+			SharedModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: OrderListModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [OrderList, SharedModule],
+			exports: [OrderList, SharedModule]
+		}]
+	}]
+});
 export { OrderList, OrderListClasses, OrderListModule, OrderListStyle };
-//# sourceMappingURL=gravionlabs-helix-core-orderlist.mjs.map
+
+//# sourceMappingURL=gravionlabs-helix-core-orderlist.mjs.map