@gravionlabs/helix-core 22.0.0

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

@@ -0,0 +1,1393 @@
+export * from '@gravionlabs/helix-core/types/picklist';
+import * as i4 from '@angular/cdk/drag-drop';
+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, input, inject, model, numberAttribute, booleanAttribute, output, viewChild, contentChild, contentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i5 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { uuid, findIndexInList, find, setAttribute, isEmpty } 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, BindModule } from '@gravionlabs/helix-core/bind';
+import * as i3 from '@gravionlabs/helix-core/button';
+import { ButtonModule } from '@gravionlabs/helix-core/button';
+import { AngleDoubleDownIcon, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleDoubleUpIcon, AngleDownIcon, AngleLeftIcon, AngleRightIcon, 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';
+
+const style = /*css*/ `
+    .h-picklist {
+        display: flex;
+        gap: dt('picklist.gap');
+    }
+
+    .h-picklist-controls {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: dt('picklist.controls.gap');
+    }
+
+    .h-picklist-list-container {
+        flex: 1 1 50%;
+    }
+
+    .h-picklist .h-listbox {
+        height: 100%;
+    }
+`;
+
+const classes = {
+    root: () => ['h-picklist h-component'],
+    sourceControls: 'h-picklist-controls h-picklist-source-controls',
+    sourceListContainer: 'h-picklist-list-container h-picklist-source-list-container',
+    transferControls: 'h-picklist-controls h-picklist-transfer-controls',
+    targetListContainer: 'h-picklist-list-container h-picklist-target-list-container',
+    targetControls: 'h-picklist-controls h-picklist-target-controls'
+};
+class PickListStyle extends BaseStyle {
+    name = 'picklist';
+    style = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PickListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PickListStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PickListStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * PickList is used to reorder items between different lists.
+ *
+ * [Live Demo](https://www.primeng.org/picklist)
+ *
+ * @module pickliststyle
+ *
+ */
+var PickListClasses;
+(function (PickListClasses) {
+    /**
+     * Class name of the root element
+     */
+    PickListClasses["root"] = "h-picklist";
+    /**
+     * Class name of the source controls element
+     */
+    PickListClasses["sourceControls"] = "h-picklist-source-controls";
+    /**
+     * Class name of the source list container element
+     */
+    PickListClasses["sourceListContainer"] = "h-picklist-source-list-container";
+    /**
+     * Class name of the transfer controls element
+     */
+    PickListClasses["transferControls"] = "h-picklist-transfer-controls";
+    /**
+     * Class name of the target list container element
+     */
+    PickListClasses["targetListContainer"] = "h-picklist-target-list-container";
+    /**
+     * Class name of the target controls element
+     */
+    PickListClasses["targetControls"] = "h-picklist-target-controls";
+})(PickListClasses || (PickListClasses = {}));
+
+const PICKLIST_INSTANCE = new InjectionToken('PICKLIST_INSTANCE');
+/**
+ * PickList is used to reorder items between different lists.
+ * @group Components
+ */
+class PickList extends BaseComponent {
+    componentName = 'PickList';
+    hostName = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostName" }] : /* istanbul ignore next */ []));
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pcPickList = inject(PICKLIST_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('host'));
+    }
+    /**
+     * An array of objects for the source list.
+     * @group Props
+     */
+    source = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+    /**
+     * An array of objects for the target list.
+     * @group Props
+     */
+    target = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+    /**
+     * Name of the field that uniquely identifies the options.
+     * @group Props
+     */
+    dataKey = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dataKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Text for the source list caption
+     * @group Props
+     */
+    sourceHeader = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceHeader" }] : /* istanbul ignore next */ []));
+    /**
+     * Index of the element in tabbing order.
+     * @group Props
+     */
+    tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Defines a string that labels the move to right button for accessibility.
+     * @group Props
+     */
+    rightButtonAriaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rightButtonAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines a string that labels the move to left button for accessibility.
+     * @group Props
+     */
+    leftButtonAriaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "leftButtonAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines a string that labels the move to all right button for accessibility.
+     * @group Props
+     */
+    allRightButtonAriaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "allRightButtonAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines a string that labels the move to all left button for accessibility.
+     * @group Props
+     */
+    allLeftButtonAriaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "allLeftButtonAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines a string that labels the move to up button for accessibility.
+     * @group Props
+     */
+    upButtonAriaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "upButtonAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines a string that labels the move to down button for accessibility.
+     * @group Props
+     */
+    downButtonAriaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "downButtonAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines a string that labels the move to top button for accessibility.
+     * @group Props
+     */
+    topButtonAriaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "topButtonAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines a string that labels the move to bottom button for accessibility.
+     * @group Props
+     */
+    bottomButtonAriaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "bottomButtonAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines a string that labels the source list.
+     * @group Props
+     */
+    sourceAriaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "sourceAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines a string that labels the target list.
+     * @group Props
+     */
+    targetAriaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "targetAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Text for the target list caption
+     * @group Props
+     */
+    targetHeader = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetHeader" }] : /* istanbul ignore next */ []));
+    /**
+     * When enabled orderlist adjusts its controls based on screen size.
+     * @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 field to search (Accepts multiple fields with a comma).
+     * @group Props
+     */
+    filterBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "filterBy" }] : /* 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 */ []));
+    /**
+     * Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity. Use sourceTrackBy or targetTrackBy in case different algorithms are needed per list.
+     * @group Props
+     */
+    trackBy = input((index, item) => item, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Function to optimize the dom operations by delegating to ngForTrackBy in source list, default algorithm checks for object identity.
+     * @group Props
+     */
+    sourceTrackBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "sourceTrackBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Function to optimize the dom operations by delegating to ngForTrackBy in target list, default algorithm checks for object identity.
+     * @group Props
+     */
+    targetTrackBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "targetTrackBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to show filter input for source list when filterBy is enabled.
+     * @group Props
+     */
+    showSourceFilter = input(true, { ...(ngDevMode ? { debugName: "showSourceFilter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to show filter input for target list when filterBy is enabled.
+     * @group Props
+     */
+    showTargetFilter = input(true, { ...(ngDevMode ? { debugName: "showTargetFilter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Defines how multiple items can be selected, 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 });
+    /**
+     * Inline style of the component.
+     * @group Props
+     */
+    style = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "style" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the component.
+     * @group Props
+     */
+    styleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Inline style of the source list element.
+     * @group Props
+     */
+    sourceStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "sourceStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * Inline style of the target list element.
+     * @group Props
+     */
+    targetStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "targetStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to show buttons of source list.
+     * @group Props
+     */
+    showSourceControls = input(true, { ...(ngDevMode ? { debugName: "showSourceControls" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to show buttons of target list.
+     * @group Props
+     */
+    showTargetControls = input(true, { ...(ngDevMode ? { debugName: "showTargetControls" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Placeholder text on source filter input.
+     * @group Props
+     */
+    sourceFilterPlaceholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "sourceFilterPlaceholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Placeholder text on target filter input.
+     * @group Props
+     */
+    targetFilterPlaceholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "targetFilterPlaceholder" }] : /* istanbul ignore next */ []));
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @group Props
+     */
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Name of the disabled field of a target option or function to determine disabled state.
+     * @group Props
+     */
+    sourceOptionDisabled = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "sourceOptionDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Name of the disabled field of a target option or function to determine disabled state.
+     * @group Props
+     */
+    targetOptionDisabled = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "targetOptionDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines a string that labels the filter input of source list.
+     * @group Props
+     */
+    ariaSourceFilterLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaSourceFilterLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines a string that labels the filter input of target list.
+     * @group Props
+     */
+    ariaTargetFilterLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaTargetFilterLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines how the items are filtered.
+     * @group Props
+     */
+    filterMatchMode = input('contains', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterMatchMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to displays rows with alternating colors.
+     * @group Props
+     */
+    stripedRows = input(undefined, { ...(ngDevMode ? { debugName: "stripedRows" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Keeps selection on the transfer list.
+     * @group Props
+     */
+    keepSelection = input(false, { ...(ngDevMode ? { debugName: "keepSelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * 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 });
+    /**
+     * 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(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { 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(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { 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(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { 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(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "moveBottomButtonProps" }] : /* istanbul ignore next */ []));
+    /**
+     * 	Used to pass all properties of the ButtonProps to the move to target button inside the component.
+     * @group Props
+     */
+    moveToTargetProps = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "moveToTargetProps" }] : /* istanbul ignore next */ []));
+    /**
+     * 	Used to pass all properties of the ButtonProps to the move all to target button inside the component.
+     * @group Props
+     */
+    moveAllToTargetProps = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "moveAllToTargetProps" }] : /* istanbul ignore next */ []));
+    /**
+     *  Used to pass all properties of the ButtonProps to the move to source button inside the component.
+     * @group Props
+     */
+    moveToSourceProps = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "moveToSourceProps" }] : /* istanbul ignore next */ []));
+    /**
+     *  Used to pass all properties of the ButtonProps to the move all to source button inside the component.
+     * @group Props
+     */
+    moveAllToSourceProps = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "moveAllToSourceProps" }] : /* istanbul ignore next */ []));
+    /**
+     * Indicates the width of the screen at which the component should change its behavior.
+     * @group Props
+     */
+    breakpoint = model('960px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "breakpoint" }] : /* istanbul ignore next */ []));
+    /**
+     * Callback to invoke when items are moved from target to source.
+     * @param {PickListMoveToSourceEvent} event - Custom move to source event.
+     * @group Emits
+     */
+    onMoveToSource = output();
+    /**
+     * Callback to invoke when all items are moved from target to source.
+     * @param {PickListMoveAllToSourceEvent} event - Custom move all to source event.
+     * @group Emits
+     */
+    onMoveAllToSource = output();
+    /**
+     * Callback to invoke when all items are moved from source to target.
+     * @param {PickListMoveAllToTargetEvent} event - Custom move all to target event.
+     * @group Emits
+     */
+    onMoveAllToTarget = output();
+    /**
+     * Callback to invoke when items are moved from source to target.
+     * @param {PickListMoveToTargetEvent} event - Custom move to target event.
+     * @group Emits
+     */
+    onMoveToTarget = output();
+    /**
+     * Callback to invoke when items are reordered within source list.
+     * @param {PickListSourceReorderEvent} event - Custom source reorder event.
+     * @group Emits
+     */
+    onSourceReorder = output();
+    /**
+     * Callback to invoke when items are reordered within target list.
+     * @param {PickListTargetReorderEvent} event - Custom target reorder event.
+     * @group Emits
+     */
+    onTargetReorder = output();
+    /**
+     * Callback to invoke when items are selected within source list.
+     * @param {PickListSourceSelectEvent} event - Custom source select event.
+     * @group Emits
+     */
+    onSourceSelect = output();
+    /**
+     * Callback to invoke when items are selected within target list.
+     * @param {PickListTargetSelectEvent} event - Custom target select event.
+     * @group Emits
+     */
+    onTargetSelect = output();
+    /**
+     * Callback to invoke when the source list is filtered
+     * @param {PickListSourceFilterEvent} event - Custom source filter event.
+     * @group Emits
+     */
+    onSourceFilter = output();
+    /**
+     * Callback to invoke when the target list is filtered
+     * @param {PickListTargetFilterEvent} event - Custom target filter event.
+     * @group Emits
+     */
+    onTargetFilter = 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();
+    listViewSourceChild = viewChild('sourcelist', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listViewSourceChild" }] : /* istanbul ignore next */ []));
+    listViewTargetChild = viewChild('targetlist', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listViewTargetChild" }] : /* istanbul ignore next */ []));
+    sourceFilterViewChild = viewChild('sourceFilter', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceFilterViewChild" }] : /* istanbul ignore next */ []));
+    targetFilterViewChild = viewChild('targetFilter', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetFilterViewChild" }] : /* istanbul ignore next */ []));
+    getButtonProps(direction) {
+        switch (direction) {
+            case 'moveup':
+                return { ...this.buttonProps(), ...this.moveUpButtonProps() };
+            case 'movetop':
+                return { ...this.buttonProps(), ...this.moveTopButtonProps() };
+            case 'movedown':
+                return { ...this.buttonProps(), ...this.moveDownButtonProps() };
+            case 'movebottom':
+                return { ...this.buttonProps(), ...this.moveBottomButtonProps() };
+            case 'movetotarget':
+                return { ...this.buttonProps(), ...this.moveToTargetProps() };
+            case 'movealltotarget':
+                return { ...this.buttonProps(), ...this.moveAllToTargetProps() };
+            case 'movetosource':
+                return { ...this.buttonProps(), ...this.moveToSourceProps() };
+            case 'movealltosource':
+                return { ...this.buttonProps(), ...this.moveAllToSourceProps() };
+            default:
+                return this.buttonProps();
+        }
+    }
+    get targetOptions() {
+        return [...(this.target() || [])];
+    }
+    get sourceOptions() {
+        return [...(this.source() || [])];
+    }
+    get moveUpAriaLabel() {
+        const upButtonAriaLabel = this.upButtonAriaLabel();
+        return upButtonAriaLabel ? upButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveUp : undefined;
+    }
+    get moveTopAriaLabel() {
+        const topButtonAriaLabel = this.topButtonAriaLabel();
+        return topButtonAriaLabel ? topButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveTop : undefined;
+    }
+    get moveDownAriaLabel() {
+        const downButtonAriaLabel = this.downButtonAriaLabel();
+        return downButtonAriaLabel ? downButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveDown : undefined;
+    }
+    get moveBottomAriaLabel() {
+        const bottomButtonAriaLabel = this.bottomButtonAriaLabel();
+        return bottomButtonAriaLabel ? bottomButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveDown : undefined;
+    }
+    get moveToTargetAriaLabel() {
+        const rightButtonAriaLabel = this.rightButtonAriaLabel();
+        return rightButtonAriaLabel ? rightButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveToTarget : undefined;
+    }
+    get moveAllToTargetAriaLabel() {
+        const allRightButtonAriaLabel = this.allRightButtonAriaLabel();
+        return allRightButtonAriaLabel ? allRightButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveAllToTarget : undefined;
+    }
+    get moveToSourceAriaLabel() {
+        const leftButtonAriaLabel = this.leftButtonAriaLabel();
+        return leftButtonAriaLabel ? leftButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveToSource : undefined;
+    }
+    get moveAllToSourceAriaLabel() {
+        const allLeftButtonAriaLabel = this.allLeftButtonAriaLabel();
+        return allLeftButtonAriaLabel ? allLeftButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveAllToSource : undefined;
+    }
+    get idSource() {
+        return this.id + '_source';
+    }
+    get idTarget() {
+        return this.id + '_target';
+    }
+    visibleOptionsSource;
+    visibleOptionsTarget;
+    selectedItemsSource = [];
+    selectedItemsTarget = [];
+    reorderedListElement;
+    movedUp;
+    movedDown;
+    itemTouched;
+    styleElement;
+    id = uuid('pn_id_');
+    filterValueSource;
+    filterValueTarget;
+    fromListType;
+    sourceFilterOptions;
+    targetFilterOptions;
+    SOURCE_LIST = -1;
+    TARGET_LIST = 1;
+    window;
+    media;
+    viewChanged;
+    _componentStyle = inject(PickListStyle);
+    mediaChangeListener;
+    filterService = inject(FilterService);
+    onInit() {
+        if (this.responsive()) {
+            this.createStyle();
+            this.initMedia();
+        }
+        if (this.filterBy()) {
+            this.sourceFilterOptions = {
+                filter: (value) => this.filterSource(value),
+                reset: () => this.resetSourceFilter()
+            };
+            this.targetFilterOptions = {
+                filter: (value) => this.filterTarget(value),
+                reset: () => this.resetTargetFilter()
+            };
+        }
+    }
+    /**
+     * Custom item template.
+     * @param {PickListItemTemplateContext} context - item context.
+     * @see {@link PickListItemTemplateContext}
+     * @group Templates
+     */
+    itemTemplate = contentChild('item', { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom source header template.
+     * @group Templates
+     */
+    sourceHeaderTemplate = contentChild('sourceHeader', { ...(ngDevMode ? { debugName: "sourceHeaderTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom target header template.
+     * @group Templates
+     */
+    targetHeaderTemplate = contentChild('targetHeader', { ...(ngDevMode ? { debugName: "targetHeaderTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom source filter template.
+     * @param {PickListFilterTemplateContext} context - filter context.
+     * @see {@link PickListFilterTemplateContext}
+     * @group Templates
+     */
+    sourceFilterTemplate = contentChild('sourceFilter', { ...(ngDevMode ? { debugName: "sourceFilterTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom target filter template.
+     * @param {PickListFilterTemplateContext} context - filter context.
+     * @see {@link PickListFilterTemplateContext}
+     * @group Templates
+     */
+    targetFilterTemplate = contentChild('targetFilter', { ...(ngDevMode ? { debugName: "targetFilterTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom empty message when source is empty template.
+     * @group Templates
+     */
+    emptyMessageSourceTemplate = contentChild('emptymessagesource', { ...(ngDevMode ? { debugName: "emptyMessageSourceTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom empty filter message when source is empty template.
+     * @group Templates
+     */
+    emptyFilterMessageSourceTemplate = contentChild('emptyfiltermessagesource', { ...(ngDevMode ? { debugName: "emptyFilterMessageSourceTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom empty message when target is empty template.
+     * @group Templates
+     */
+    emptyMessageTargetTemplate = contentChild('emptymessagetarget', { ...(ngDevMode ? { debugName: "emptyMessageTargetTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom empty filter message when target is empty template.
+     * @group Templates
+     */
+    emptyFilterMessageTargetTemplate = contentChild('emptyfiltermessagetarget', { ...(ngDevMode ? { debugName: "emptyFilterMessageTargetTemplate" } : /* 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 move to target icon template.
+     * @param {PickListTransferIconTemplateContext} context - icon context.
+     * @see {@link PickListTransferIconTemplateContext}
+     * @group Templates
+     */
+    moveToTargetIconTemplate = contentChild('movetotargeticon', { ...(ngDevMode ? { debugName: "moveToTargetIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom move all to target icon template.
+     * @param {PickListTransferIconTemplateContext} context - icon context.
+     * @see {@link PickListTransferIconTemplateContext}
+     * @group Templates
+     */
+    moveAllToTargetIconTemplate = contentChild('movealltotargeticon', { ...(ngDevMode ? { debugName: "moveAllToTargetIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom move to source icon template.
+     * @param {PickListTransferIconTemplateContext} context - icon context.
+     * @see {@link PickListTransferIconTemplateContext}
+     * @group Templates
+     */
+    moveToSourceIconTemplate = contentChild('movetosourceicon', { ...(ngDevMode ? { debugName: "moveToSourceIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom move all to source icon template.
+     * @param {PickListTransferIconTemplateContext} context - icon context.
+     * @see {@link PickListTransferIconTemplateContext}
+     * @group Templates
+     */
+    moveAllToSourceIconTemplate = contentChild('movealltosourceicon', { ...(ngDevMode ? { debugName: "moveAllToSourceIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom target filter icon template.
+     * @group Templates
+     */
+    targetFilterIconTemplate = contentChild('targetfiltericon', { ...(ngDevMode ? { debugName: "targetFilterIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom source filter icon template.
+     * @group Templates
+     */
+    sourceFilterIconTemplate = contentChild('sourcefiltericon', { ...(ngDevMode ? { debugName: "sourceFilterIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    templates = contentChildren(HelixTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    _itemTemplate;
+    _sourceHeaderTemplate;
+    _targetHeaderTemplate;
+    _sourceFilterTemplate;
+    _targetFilterTemplate;
+    _emptyMessageSourceTemplate;
+    _emptyFilterMessageSourceTemplate;
+    _emptyMessageTargetTemplate;
+    _emptyFilterMessageTargetTemplate;
+    _moveUpIconTemplate;
+    _moveTopIconTemplate;
+    _moveDownIconTemplate;
+    _moveBottomIconTemplate;
+    _moveToTargetIconTemplate;
+    _moveAllToTargetIconTemplate;
+    _moveToSourceIconTemplate;
+    _moveAllToSourceIconTemplate;
+    _targetFilterIconTemplate;
+    _sourceFilterIconTemplate;
+    onAfterContentInit() {
+        this.templates().forEach((item) => {
+            switch (item.getType()) {
+                case 'item':
+                    this._itemTemplate = item.template;
+                    break;
+                case 'option':
+                    this._itemTemplate = item.template;
+                    break;
+                case 'sourceHeader':
+                    this._sourceHeaderTemplate = item.template;
+                    break;
+                case 'targetHeader':
+                    this._targetHeaderTemplate = item.template;
+                    break;
+                case 'sourceFilter':
+                    this._sourceFilterTemplate = item.template;
+                    break;
+                case 'targetFilter':
+                    this._targetFilterTemplate = item.template;
+                    break;
+                case 'emptymessagesource':
+                    this._emptyMessageSourceTemplate = item.template;
+                    break;
+                case 'emptyfiltermessagesource':
+                    this._emptyFilterMessageSourceTemplate = item.template;
+                    break;
+                case 'emptymessagetarget':
+                    this._emptyMessageTargetTemplate = item.template;
+                    break;
+                case 'emptyfiltermessagetarget':
+                    this._emptyFilterMessageTargetTemplate = 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 'movetotargeticon':
+                    this._moveToTargetIconTemplate = item.template;
+                    break;
+                case 'movealltotargeticon':
+                    this._moveAllToTargetIconTemplate = item.template;
+                    break;
+                case 'movetosourceicon':
+                    this._moveToSourceIconTemplate = item.template;
+                    break;
+                case 'movealltosourceicon':
+                    this._moveAllToSourceIconTemplate = item.template;
+                    break;
+                case 'targetfiltericon':
+                    this._targetFilterIconTemplate = item.template;
+                    break;
+                case 'sourcefiltericon':
+                    this._sourceFilterIconTemplate = item.template;
+                    break;
+                default:
+                    this._itemTemplate = item.template;
+                    break;
+            }
+        });
+    }
+    onChangeSelection(e, listType) {
+        this.setSelectionList(listType, e.value);
+        const callback = listType === this.SOURCE_LIST ? this.onSourceSelect : this.onTargetSelect;
+        callback.emit({ originalEvent: e.originalEvent, items: e.value });
+    }
+    onSourceItemDblClick() {
+        if (this.disabled()) {
+            return;
+        }
+        this.moveRight();
+        this.triggerChangeDetection();
+    }
+    onTargetItemDblClick() {
+        if (this.disabled()) {
+            return;
+        }
+        this.moveLeft();
+        this.triggerChangeDetection();
+    }
+    onFilter(event, listType) {
+        let query = event.target.value;
+        if (listType === this.SOURCE_LIST)
+            this.filterSource(query);
+        else if (listType === this.TARGET_LIST)
+            this.filterTarget(query);
+    }
+    filterSource(value = '') {
+        this.filterValueSource = value.trim().toLocaleLowerCase(this.filterLocale());
+        this.filter(this.source(), this.SOURCE_LIST);
+        this.onSourceFilter.emit({ query: this.filterValueSource, value: this.visibleOptionsSource });
+    }
+    filterTarget(value = '') {
+        this.filterValueTarget = value.trim().toLocaleLowerCase(this.filterLocale());
+        this.filter(this.target(), this.TARGET_LIST);
+        this.onTargetFilter.emit({ query: this.filterValueTarget, value: this.visibleOptionsTarget });
+    }
+    filter(data, listType) {
+        let searchFields = this.filterBy().split(',');
+        if (listType === this.SOURCE_LIST) {
+            this.visibleOptionsSource = this.filterService.filter(data, searchFields, this.filterValueSource, this.filterMatchMode(), this.filterLocale());
+            this.onSourceFilter.emit({ query: this.filterValueSource, value: this.visibleOptionsSource });
+        }
+        else if (listType === this.TARGET_LIST) {
+            this.visibleOptionsTarget = this.filterService.filter(data, searchFields, this.filterValueTarget, this.filterMatchMode(), this.filterLocale());
+            this.onTargetFilter.emit({ query: this.filterValueTarget, value: this.visibleOptionsTarget });
+        }
+    }
+    isItemVisible(item, listType) {
+        if (listType == this.SOURCE_LIST)
+            return this.isVisibleInList(this.visibleOptionsSource, item, this.filterValueSource);
+        else
+            return this.isVisibleInList(this.visibleOptionsTarget, item, this.filterValueTarget);
+    }
+    isEmpty(listType) {
+        if (listType == this.SOURCE_LIST)
+            return this.filterValueSource ? !this.visibleOptionsSource || this.visibleOptionsSource.length === 0 : !this.source() || this.source().length === 0;
+        else
+            return this.filterValueTarget ? !this.visibleOptionsTarget || this.visibleOptionsTarget.length === 0 : !this.target() || this.target().length === 0;
+    }
+    isVisibleInList(data, item, filterValue) {
+        if (filterValue && filterValue.trim().length) {
+            for (let i = 0; i < data.length; i++) {
+                if (item == data[i]) {
+                    return true;
+                }
+            }
+        }
+        else {
+            return true;
+        }
+    }
+    onItemTouchEnd() {
+        if (this.disabled()) {
+            return;
+        }
+        this.itemTouched = true;
+    }
+    sortByIndexInList(items, list) {
+        return items.sort((item1, item2) => findIndexInList(item1, list) - findIndexInList(item2, list));
+    }
+    triggerChangeDetection() {
+        this.listViewTargetChild()?.cd.markForCheck();
+        this.listViewSourceChild()?.cd.markForCheck();
+    }
+    moveUp(listElement, list, selectedItems, callback, listType) {
+        if (selectedItems && selectedItems.length) {
+            selectedItems = this.sortByIndexInList(selectedItems, list);
+            for (let i = 0; i < selectedItems.length; i++) {
+                let selectedItem = selectedItems[i];
+                let selectedItemIndex = findIndexInList(selectedItem, list);
+                if (selectedItemIndex != 0) {
+                    let movedItem = list[selectedItemIndex];
+                    let temp = list[selectedItemIndex - 1];
+                    list[selectedItemIndex - 1] = movedItem;
+                    list[selectedItemIndex] = temp;
+                }
+                else {
+                    break;
+                }
+            }
+            if (this.dragdrop() && ((this.filterValueSource && listType === this.SOURCE_LIST) || (this.filterValueTarget && listType === this.TARGET_LIST)))
+                this.filter(list, listType);
+            this.movedUp = true;
+            this.reorderedListElement = listElement;
+            callback.emit({ items: selectedItems });
+            this.triggerChangeDetection();
+        }
+    }
+    moveTop(listElement, list, selectedItems, callback, listType) {
+        if (selectedItems && selectedItems.length) {
+            selectedItems = this.sortByIndexInList(selectedItems, list);
+            for (let i = 0; i < selectedItems.length; i++) {
+                let selectedItem = selectedItems[i];
+                let selectedItemIndex = findIndexInList(selectedItem, list);
+                if (selectedItemIndex != 0) {
+                    let movedItem = list.splice(selectedItemIndex, 1)[0];
+                    list.unshift(movedItem);
+                }
+                else {
+                    break;
+                }
+            }
+            if (this.dragdrop() && ((this.filterValueSource && listType === this.SOURCE_LIST) || (this.filterValueTarget && listType === this.TARGET_LIST)))
+                this.filter(list, listType);
+            listElement.scrollTop = 0;
+            callback.emit({ items: selectedItems });
+            this.triggerChangeDetection();
+        }
+    }
+    moveDown(listElement, list, selectedItems, callback, listType) {
+        if (selectedItems && selectedItems.length) {
+            selectedItems = this.sortByIndexInList(selectedItems, list);
+            for (let i = selectedItems.length - 1; i >= 0; i--) {
+                let selectedItem = selectedItems[i];
+                let selectedItemIndex = findIndexInList(selectedItem, list);
+                if (selectedItemIndex != list.length - 1) {
+                    let movedItem = list[selectedItemIndex];
+                    let temp = list[selectedItemIndex + 1];
+                    list[selectedItemIndex + 1] = movedItem;
+                    list[selectedItemIndex] = temp;
+                }
+                else {
+                    break;
+                }
+            }
+            if (this.dragdrop() && ((this.filterValueSource && listType === this.SOURCE_LIST) || (this.filterValueTarget && listType === this.TARGET_LIST)))
+                this.filter(list, listType);
+            this.movedDown = true;
+            this.reorderedListElement = listElement;
+            callback.emit({ items: selectedItems });
+            this.triggerChangeDetection();
+        }
+    }
+    moveBottom(listElement, list, selectedItems, callback, listType) {
+        if (selectedItems && selectedItems.length) {
+            selectedItems = this.sortByIndexInList(selectedItems, list);
+            for (let i = selectedItems.length - 1; i >= 0; i--) {
+                let selectedItem = selectedItems[i];
+                let selectedItemIndex = findIndexInList(selectedItem, list);
+                if (selectedItemIndex != list.length - 1) {
+                    let movedItem = list.splice(selectedItemIndex, 1)[0];
+                    list.push(movedItem);
+                }
+                else {
+                    break;
+                }
+            }
+            if (this.dragdrop() && ((this.filterValueSource && listType === this.SOURCE_LIST) || (this.filterValueTarget && listType === this.TARGET_LIST)))
+                this.filter(list, listType);
+            listElement.scrollTop = listElement.scrollHeight;
+            callback.emit({ items: selectedItems });
+            this.triggerChangeDetection();
+        }
+    }
+    moveRight() {
+        if (this.selectedItemsSource && this.selectedItemsSource.length) {
+            let itemsToMove = [...this.selectedItemsSource];
+            for (let i = 0; i < itemsToMove.length; i++) {
+                let selectedItem = itemsToMove[i];
+                if (findIndexInList(selectedItem, this.target() || []) == -1) {
+                    this.target()?.push(this.source()?.splice(findIndexInList(selectedItem, this.source()), 1)[0]);
+                    if (this.visibleOptionsSource?.includes(selectedItem)) {
+                        this.visibleOptionsSource.splice(findIndexInList(selectedItem, this.visibleOptionsSource), 1);
+                    }
+                }
+            }
+            this.onMoveToTarget.emit({
+                items: itemsToMove
+            });
+            if (this.keepSelection()) {
+                this.selectedItemsTarget = [...this.selectedItemsTarget, ...itemsToMove];
+            }
+            itemsToMove = [];
+            this.selectedItemsSource = [];
+            if (this.filterValueTarget) {
+                this.filter(this.target(), this.TARGET_LIST);
+            }
+            this.triggerChangeDetection();
+        }
+    }
+    moveAllRight() {
+        if (this.source()) {
+            let movedItems = [];
+            for (let i = 0; i < this.source().length; i++) {
+                if (this.isItemVisible(this.source()[i], this.SOURCE_LIST)) {
+                    let removedItem = this.source().splice(i, 1)[0];
+                    this.target().push(removedItem);
+                    movedItems.push(removedItem);
+                    i--;
+                }
+            }
+            this.onMoveAllToTarget.emit({
+                items: movedItems
+            });
+            if (this.keepSelection()) {
+                this.selectedItemsTarget = [...this.selectedItemsTarget, ...this.selectedItemsSource];
+            }
+            this.selectedItemsSource = [];
+            if (this.filterValueTarget) {
+                this.filter(this.target(), this.TARGET_LIST);
+            }
+            this.visibleOptionsSource = [];
+            this.triggerChangeDetection();
+        }
+    }
+    moveLeft() {
+        if (this.selectedItemsTarget && this.selectedItemsTarget.length) {
+            let itemsToMove = [...this.selectedItemsTarget];
+            for (let i = 0; i < itemsToMove.length; i++) {
+                let selectedItem = itemsToMove[i];
+                if (findIndexInList(selectedItem, this.source() || []) == -1) {
+                    this.source()?.push(this.target()?.splice(findIndexInList(selectedItem, this.target()), 1)[0]);
+                    if (this.visibleOptionsTarget?.includes(selectedItem)) {
+                        this.visibleOptionsTarget.splice(findIndexInList(selectedItem, this.visibleOptionsTarget), 1)[0];
+                    }
+                }
+            }
+            this.onMoveToSource.emit({
+                items: itemsToMove
+            });
+            if (this.keepSelection()) {
+                this.selectedItemsSource = [...this.selectedItemsSource, itemsToMove];
+            }
+            itemsToMove = [];
+            this.selectedItemsTarget = [];
+            if (this.filterValueSource) {
+                this.filter(this.source(), this.SOURCE_LIST);
+            }
+            this.triggerChangeDetection();
+        }
+    }
+    moveAllLeft() {
+        if (this.target()) {
+            let movedItems = [];
+            for (let i = 0; i < this.target().length; i++) {
+                if (this.isItemVisible(this.target()[i], this.TARGET_LIST)) {
+                    let removedItem = this.target().splice(i, 1)[0];
+                    this.source().push(removedItem);
+                    movedItems.push(removedItem);
+                    i--;
+                }
+            }
+            this.onMoveAllToSource.emit({
+                items: movedItems
+            });
+            if (this.keepSelection()) {
+                this.selectedItemsSource = [...this.selectedItemsSource, ...this.selectedItemsTarget];
+            }
+            this.selectedItemsTarget = [];
+            if (this.filterValueSource) {
+                this.filter(this.source(), this.SOURCE_LIST);
+            }
+            this.visibleOptionsTarget = [];
+            this.triggerChangeDetection();
+        }
+    }
+    isSelected(item, selectedItems) {
+        return this.findIndexInList(item, selectedItems) != -1;
+    }
+    findIndexInList(item, selectedItems) {
+        return findIndexInList(item, selectedItems);
+    }
+    onDrop(event, listType) {
+        let isTransfer = event.previousContainer !== event.container;
+        let dropIndexes = this.getDropIndexes(event.previousIndex, event.currentIndex, listType, isTransfer, event.item.data);
+        if (listType === this.SOURCE_LIST) {
+            if (isTransfer) {
+                // Moving from target to source
+                let itemsToMove = [];
+                // Check if dragged item is in selected items
+                if (this.selectedItemsTarget && this.selectedItemsTarget.length > 0 && findIndexInList(event.item.data, this.selectedItemsTarget) !== -1) {
+                    // Move all selected items
+                    itemsToMove = [...this.selectedItemsTarget];
+                }
+                else {
+                    // Move only the dragged item
+                    itemsToMove = [event.item.data];
+                }
+                // Sort items by their index in target (to maintain order)
+                const sortedItems = this.sortByIndexInList(itemsToMove, this.target() || []);
+                // Remove all items from target
+                for (let item of sortedItems) {
+                    const itemIndex = findIndexInList(item, this.target() || []);
+                    if (itemIndex !== -1) {
+                        this.target()?.splice(itemIndex, 1);
+                    }
+                }
+                // Add all items to source at the drop position
+                for (let i = 0; i < sortedItems.length; i++) {
+                    this.source()?.splice(dropIndexes.currentIndex + i, 0, sortedItems[i]);
+                }
+                // Clear target selection
+                this.selectedItemsTarget = [];
+                if (this.keepSelection()) {
+                    this.selectedItemsSource = [...this.selectedItemsSource, ...itemsToMove];
+                }
+                if (this.visibleOptionsTarget) {
+                    // Update visible options
+                    for (let item of itemsToMove) {
+                        const visibleIndex = findIndexInList(item, this.visibleOptionsTarget);
+                        if (visibleIndex !== -1) {
+                            this.visibleOptionsTarget.splice(visibleIndex, 1);
+                        }
+                    }
+                }
+                this.onMoveToSource.emit({ items: itemsToMove });
+            }
+            else {
+                if (this.source()) {
+                    moveItemInArray(this.source(), dropIndexes.previousIndex, dropIndexes.currentIndex);
+                }
+                this.onSourceReorder.emit({ items: [event.item.data] });
+            }
+            if (this.filterValueSource) {
+                this.filter(this.source(), this.SOURCE_LIST);
+            }
+        }
+        else {
+            if (isTransfer) {
+                // Moving from source to target
+                let itemsToMove = [];
+                // Check if dragged item is in selected items
+                if (this.selectedItemsSource && this.selectedItemsSource.length > 0 && findIndexInList(event.item.data, this.selectedItemsSource) !== -1) {
+                    // Move all selected items
+                    itemsToMove = [...this.selectedItemsSource];
+                }
+                else {
+                    // Move only the dragged item
+                    itemsToMove = [event.item.data];
+                }
+                // Sort items by their index in source (to maintain order)
+                const sortedItems = this.sortByIndexInList(itemsToMove, this.source() || []);
+                // Remove all items from source
+                for (let item of sortedItems) {
+                    const itemIndex = findIndexInList(item, this.source() || []);
+                    if (itemIndex !== -1) {
+                        this.source()?.splice(itemIndex, 1);
+                    }
+                }
+                // Add all items to target at the drop position
+                for (let i = 0; i < sortedItems.length; i++) {
+                    this.target()?.splice(dropIndexes.currentIndex + i, 0, sortedItems[i]);
+                }
+                // Clear source selection
+                this.selectedItemsSource = [];
+                if (this.keepSelection()) {
+                    this.selectedItemsTarget = [...this.selectedItemsTarget, ...itemsToMove];
+                }
+                if (this.visibleOptionsSource) {
+                    // Update visible options
+                    for (let item of itemsToMove) {
+                        const visibleIndex = findIndexInList(item, this.visibleOptionsSource);
+                        if (visibleIndex !== -1) {
+                            this.visibleOptionsSource.splice(visibleIndex, 1);
+                        }
+                    }
+                }
+                this.onMoveToTarget.emit({ items: itemsToMove });
+            }
+            else {
+                if (this.target()) {
+                    moveItemInArray(this.target(), dropIndexes.previousIndex, dropIndexes.currentIndex);
+                }
+                this.onTargetReorder.emit({ items: [event.item.data] });
+            }
+            if (this.filterValueTarget) {
+                this.filter(this.target(), this.TARGET_LIST);
+            }
+        }
+        // Only trigger change detection for transfers, not reordering
+        // Reordering modifies arrays in-place and triggerChangeDetection() would override changes
+        if (isTransfer) {
+            this.triggerChangeDetection();
+        }
+        this.cd.markForCheck();
+    }
+    onListFocus(event, listType) {
+        this.onFocus.emit(event);
+    }
+    onListBlur(event, listType) {
+        this.onBlur.emit(event);
+    }
+    getListElement(listType) {
+        return listType === this.SOURCE_LIST ? this.listViewSourceChild()?.el.nativeElement : this.listViewTargetChild()?.el.nativeElement;
+    }
+    getListItems(listType) {
+        let listElemet = this.getListElement(listType);
+        return find(listElemet, 'li.h-picklist-item');
+    }
+    getLatestSelectedVisibleOptionIndex(visibleList, selectedItems) {
+        const latestSelectedItem = [...selectedItems].reverse().find((item) => visibleList.includes(item));
+        return latestSelectedItem !== undefined ? visibleList.indexOf(latestSelectedItem) : -1;
+    }
+    getVisibleList(listType) {
+        if (listType === this.SOURCE_LIST) {
+            return this.visibleOptionsSource && this.visibleOptionsSource.length > 0 ? this.visibleOptionsSource : this.source() && this.source().length > 0 ? this.source() : null;
+        }
+        return this.visibleOptionsTarget && this.visibleOptionsTarget.length > 0 ? this.visibleOptionsTarget : this.target() && this.target().length > 0 ? this.target() : null;
+    }
+    setSelectionList(listType, selectedItems) {
+        if (listType === this.SOURCE_LIST) {
+            this.selectedItemsSource = selectedItems;
+        }
+        else {
+            this.selectedItemsTarget = selectedItems;
+        }
+    }
+    getDropIndexes(fromIndex, toIndex, droppedList, isTransfer, data) {
+        let previousIndex, currentIndex;
+        if (droppedList === this.SOURCE_LIST) {
+            previousIndex = isTransfer ? (this.filterValueTarget ? findIndexInList(data, this.target() || []) : fromIndex) : this.filterValueSource ? findIndexInList(data, this.source() || []) : fromIndex;
+            currentIndex = this.filterValueSource ? this.findFilteredCurrentIndex(this.visibleOptionsSource || [], toIndex, this.source() || []) : toIndex;
+        }
+        else {
+            previousIndex = isTransfer ? (this.filterValueSource ? findIndexInList(data, this.source() || []) : fromIndex) : this.filterValueTarget ? findIndexInList(data, this.target() || []) : fromIndex;
+            currentIndex = this.filterValueTarget ? this.findFilteredCurrentIndex(this.visibleOptionsTarget || [], toIndex, this.target() || []) : toIndex;
+        }
+        return { previousIndex, currentIndex };
+    }
+    findFilteredCurrentIndex(visibleOptions, index, options) {
+        if (visibleOptions.length === index) {
+            let toIndex = findIndexInList(visibleOptions[index - 1], options);
+            return toIndex + 1;
+        }
+        else {
+            return findIndexInList(visibleOptions[index], options);
+        }
+    }
+    resetSourceFilter() {
+        this.visibleOptionsSource = null;
+        this.filterValueSource = null;
+        this.sourceFilterViewChild() && (this.sourceFilterViewChild().nativeElement.value = '');
+    }
+    resetTargetFilter() {
+        this.visibleOptionsTarget = null;
+        this.filterValueTarget = null;
+        this.targetFilterViewChild() && (this.targetFilterViewChild().nativeElement.value = '');
+    }
+    resetFilter() {
+        this.resetSourceFilter();
+        this.resetTargetFilter();
+    }
+    initMedia() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.media = this.document.defaultView?.matchMedia(`(max-width: ${this.breakpoint()})`) || null;
+            this.viewChanged = this.media?.matches || false;
+            this.bindMediaChangeListener();
+        }
+    }
+    destroyMedia() {
+        this.unbindMediaChangeListener();
+    }
+    bindMediaChangeListener() {
+        if (this.media && !this.mediaChangeListener) {
+            this.mediaChangeListener = this.renderer.listen(this.media, 'change', (event) => {
+                this.viewChanged = event.matches;
+                this.cd.markForCheck();
+            });
+        }
+    }
+    unbindMediaChangeListener() {
+        if (this.mediaChangeListener) {
+            this.mediaChangeListener();
+            this.mediaChangeListener = null;
+        }
+    }
+    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-picklist[${this.id}] {
+                        flex-direction: column;
+                    }
+
+                    .h-picklist[${this.id}] .h-picklist-controls {
+                        flex-direction: row;
+                    }
+                }`;
+                this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML);
+                setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
+            }
+        }
+    }
+    sourceMoveDisabled() {
+        if (this.disabled() || !this.selectedItemsSource.length) {
+            return true;
+        }
+    }
+    targetMoveDisabled() {
+        if (this.disabled() || !this.selectedItemsTarget.length) {
+            return true;
+        }
+    }
+    moveRightDisabled() {
+        return this.disabled() || isEmpty(this.selectedItemsSource);
+    }
+    moveLeftDisabled() {
+        return this.disabled() || isEmpty(this.selectedItemsTarget);
+    }
+    moveAllRightDisabled() {
+        return this.disabled() || isEmpty(this.source());
+    }
+    moveAllLeftDisabled() {
+        return this.disabled() || isEmpty(this.target());
+    }
+    destroyStyle() {
+        if (this.styleElement) {
+            this.renderer.removeChild(this.document.head, this.styleElement);
+            this.styleElement = null;
+            ``;
+        }
+    }
+    onDestroy() {
+        this.destroyStyle();
+        this.destroyMedia();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PickList, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: PickList, isStandalone: true, selector: "h-pickList, h-picklist, h-pick-list", inputs: { hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, sourceHeader: { classPropertyName: "sourceHeader", publicName: "sourceHeader", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, rightButtonAriaLabel: { classPropertyName: "rightButtonAriaLabel", publicName: "rightButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, leftButtonAriaLabel: { classPropertyName: "leftButtonAriaLabel", publicName: "leftButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, allRightButtonAriaLabel: { classPropertyName: "allRightButtonAriaLabel", publicName: "allRightButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, allLeftButtonAriaLabel: { classPropertyName: "allLeftButtonAriaLabel", publicName: "allLeftButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, upButtonAriaLabel: { classPropertyName: "upButtonAriaLabel", publicName: "upButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, downButtonAriaLabel: { classPropertyName: "downButtonAriaLabel", publicName: "downButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, topButtonAriaLabel: { classPropertyName: "topButtonAriaLabel", publicName: "topButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, bottomButtonAriaLabel: { classPropertyName: "bottomButtonAriaLabel", publicName: "bottomButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, sourceAriaLabel: { classPropertyName: "sourceAriaLabel", publicName: "sourceAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, targetAriaLabel: { classPropertyName: "targetAriaLabel", publicName: "targetAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, targetHeader: { classPropertyName: "targetHeader", publicName: "targetHeader", 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 }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, sourceTrackBy: { classPropertyName: "sourceTrackBy", publicName: "sourceTrackBy", isSignal: true, isRequired: false, transformFunction: null }, targetTrackBy: { classPropertyName: "targetTrackBy", publicName: "targetTrackBy", isSignal: true, isRequired: false, transformFunction: null }, showSourceFilter: { classPropertyName: "showSourceFilter", publicName: "showSourceFilter", isSignal: true, isRequired: false, transformFunction: null }, showTargetFilter: { classPropertyName: "showTargetFilter", publicName: "showTargetFilter", 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 }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, sourceStyle: { classPropertyName: "sourceStyle", publicName: "sourceStyle", isSignal: true, isRequired: false, transformFunction: null }, targetStyle: { classPropertyName: "targetStyle", publicName: "targetStyle", isSignal: true, isRequired: false, transformFunction: null }, showSourceControls: { classPropertyName: "showSourceControls", publicName: "showSourceControls", isSignal: true, isRequired: false, transformFunction: null }, showTargetControls: { classPropertyName: "showTargetControls", publicName: "showTargetControls", isSignal: true, isRequired: false, transformFunction: null }, sourceFilterPlaceholder: { classPropertyName: "sourceFilterPlaceholder", publicName: "sourceFilterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, targetFilterPlaceholder: { classPropertyName: "targetFilterPlaceholder", publicName: "targetFilterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, sourceOptionDisabled: { classPropertyName: "sourceOptionDisabled", publicName: "sourceOptionDisabled", isSignal: true, isRequired: false, transformFunction: null }, targetOptionDisabled: { classPropertyName: "targetOptionDisabled", publicName: "targetOptionDisabled", isSignal: true, isRequired: false, transformFunction: null }, ariaSourceFilterLabel: { classPropertyName: "ariaSourceFilterLabel", publicName: "ariaSourceFilterLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaTargetFilterLabel: { classPropertyName: "ariaTargetFilterLabel", publicName: "ariaTargetFilterLabel", isSignal: true, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: true, isRequired: false, transformFunction: null }, stripedRows: { classPropertyName: "stripedRows", publicName: "stripedRows", isSignal: true, isRequired: false, transformFunction: null }, keepSelection: { classPropertyName: "keepSelection", publicName: "keepSelection", 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 }, 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 }, moveToTargetProps: { classPropertyName: "moveToTargetProps", publicName: "moveToTargetProps", isSignal: true, isRequired: false, transformFunction: null }, moveAllToTargetProps: { classPropertyName: "moveAllToTargetProps", publicName: "moveAllToTargetProps", isSignal: true, isRequired: false, transformFunction: null }, moveToSourceProps: { classPropertyName: "moveToSourceProps", publicName: "moveToSourceProps", isSignal: true, isRequired: false, transformFunction: null }, moveAllToSourceProps: { classPropertyName: "moveAllToSourceProps", publicName: "moveAllToSourceProps", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { source: "sourceChange", target: "targetChange", breakpoint: "breakpointChange", onMoveToSource: "onMoveToSource", onMoveAllToSource: "onMoveAllToSource", onMoveAllToTarget: "onMoveAllToTarget", onMoveToTarget: "onMoveToTarget", onSourceReorder: "onSourceReorder", onTargetReorder: "onTargetReorder", onSourceSelect: "onSourceSelect", onTargetSelect: "onTargetSelect", onSourceFilter: "onSourceFilter", onTargetFilter: "onTargetFilter", onFocus: "onFocus", onBlur: "onBlur" }, providers: [PickListStyle, { provide: PARENT_INSTANCE, useExisting: PickList }, { provide: PICKLIST_INSTANCE, useExisting: PickList }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], isSignal: true }, { propertyName: "sourceHeaderTemplate", first: true, predicate: ["sourceHeader"], isSignal: true }, { propertyName: "targetHeaderTemplate", first: true, predicate: ["targetHeader"], isSignal: true }, { propertyName: "sourceFilterTemplate", first: true, predicate: ["sourceFilter"], isSignal: true }, { propertyName: "targetFilterTemplate", first: true, predicate: ["targetFilter"], isSignal: true }, { propertyName: "emptyMessageSourceTemplate", first: true, predicate: ["emptymessagesource"], isSignal: true }, { propertyName: "emptyFilterMessageSourceTemplate", first: true, predicate: ["emptyfiltermessagesource"], isSignal: true }, { propertyName: "emptyMessageTargetTemplate", first: true, predicate: ["emptymessagetarget"], isSignal: true }, { propertyName: "emptyFilterMessageTargetTemplate", first: true, predicate: ["emptyfiltermessagetarget"], 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: "moveToTargetIconTemplate", first: true, predicate: ["movetotargeticon"], isSignal: true }, { propertyName: "moveAllToTargetIconTemplate", first: true, predicate: ["movealltotargeticon"], isSignal: true }, { propertyName: "moveToSourceIconTemplate", first: true, predicate: ["movetosourceicon"], isSignal: true }, { propertyName: "moveAllToSourceIconTemplate", first: true, predicate: ["movealltosourceicon"], isSignal: true }, { propertyName: "targetFilterIconTemplate", first: true, predicate: ["targetfiltericon"], isSignal: true }, { propertyName: "sourceFilterIconTemplate", first: true, predicate: ["sourcefiltericon"], isSignal: true }, { propertyName: "templates", predicate: HelixTemplate, isSignal: true }], viewQueries: [{ propertyName: "listViewSourceChild", first: true, predicate: ["sourcelist"], descendants: true, isSignal: true }, { propertyName: "listViewTargetChild", first: true, predicate: ["targetlist"], descendants: true, isSignal: true }, { propertyName: "sourceFilterViewChild", first: true, predicate: ["sourceFilter"], descendants: true, isSignal: true }, { propertyName: "targetFilterViewChild", first: true, predicate: ["targetFilter"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "<div [ngStyle]=\"style()\" [class]=\"cn(cx('root'), styleClass())\" cdkDropListGroup [hBind]=\"ptm('root')\">\n  @if (showSourceControls()) {\n    <div [class]=\"cx('sourceControls')\" [hBind]=\"ptm('sourceControls')\" [attr.data-pc-group-section]=\"'controls'\">\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moveUpAriaLabel\"\n        hButton\n        hRipple\n        severity=\"secondary\"\n        [disabled]=\"sourceMoveDisabled()\"\n        (click)=\"moveUp(sourcelist, source(), selectedItemsSource, onSourceReorder, SOURCE_LIST)\"\n        [buttonProps]=\"getButtonProps('moveup')\"\n        [pt]=\"ptm('pcSourceMoveUpButton')\"\n        [unstyled]=\"unstyled()\"\n        >\n        @if (!moveUpIconTemplate() && !_moveUpIconTemplate) {\n          <svg data-h-icon=\"angle-up\" [pt]=\"ptm('pcSourceMoveUpButton')['icon']\" hButtonIcon />\n        }\n        <ng-template *ngTemplateOutlet=\"moveUpIconTemplate() || _moveUpIconTemplate\"></ng-template>\n      </button>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moveTopAriaLabel\"\n        hButton\n        hRipple\n        severity=\"secondary\"\n        [disabled]=\"sourceMoveDisabled()\"\n        (click)=\"moveTop(sourcelist, source(), selectedItemsSource, onSourceReorder, SOURCE_LIST)\"\n        [buttonProps]=\"getButtonProps('movetop')\"\n        [pt]=\"ptm('pcSourceMoveTopButton')\"\n        [unstyled]=\"unstyled()\"\n        >\n        @if (!moveTopIconTemplate() && !_moveTopIconTemplate) {\n          <svg data-h-icon=\"angle-double-up\" hButtonIcon [pt]=\"ptm('pcSourceMoveTopButton')['icon']\" />\n        }\n        <ng-template *ngTemplateOutlet=\"moveTopIconTemplate() || _moveTopIconTemplate\"></ng-template>\n      </button>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moveDownAriaLabel\"\n        hButton\n        hRipple\n        severity=\"secondary\"\n        [disabled]=\"sourceMoveDisabled()\"\n        (click)=\"moveDown(sourcelist, source(), selectedItemsSource, onSourceReorder, SOURCE_LIST)\"\n        [buttonProps]=\"getButtonProps('movedown')\"\n        [pt]=\"ptm('pcSourceMoveDownButton')\"\n        [unstyled]=\"unstyled()\"\n        hostName=\"picklist\"\n        >\n        @if (!moveDownIconTemplate() && !_moveDownIconTemplate) {\n          <svg data-h-icon=\"angle-down\" hButtonIcon [pt]=\"ptm('pcSourceMoveDownButton')['icon']\" />\n        }\n        <ng-template *ngTemplateOutlet=\"moveDownIconTemplate() || _moveDownIconTemplate\"></ng-template>\n      </button>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moveBottomAriaLabel\"\n        hButton\n        hRipple\n        severity=\"secondary\"\n        [disabled]=\"sourceMoveDisabled()\"\n        (click)=\"moveBottom(sourcelist, source(), selectedItemsSource, onSourceReorder, SOURCE_LIST)\"\n        [buttonProps]=\"getButtonProps('movebottom')\"\n        [pt]=\"ptm('pcSourceMoveBottomButton')\"\n        [unstyled]=\"unstyled()\"\n        hostName=\"picklist\"\n        >\n        @if (!moveBottomIconTemplate() || _moveBottomIconTemplate) {\n          <svg data-h-icon=\"angle-double-down\" hButtonIcon [pt]=\"ptm('pcSourceMoveBottomButton')['icon']\" />\n        }\n        <ng-template *ngTemplateOutlet=\"moveBottomIconTemplate() || _moveBottomIconTemplate\"></ng-template>\n      </button>\n    </div>\n  }\n  <div [class]=\"cx('sourceListContainer')\" [attr.data-pc-group-section]=\"'listcontainer'\" [hBind]=\"ptm('sourceListContainer')\">\n    <h-listbox\n      #sourcelist\n      [ariaLabel]=\"sourceAriaLabel()\"\n      [multiple]=\"true\"\n      [options]=\"sourceOptions\"\n      [(ngModel)]=\"selectedItemsSource\"\n      [optionLabel]=\"dataKey() ?? 'name'\"\n      [id]=\"idSource + '_list'\"\n      [listStyle]=\"sourceStyle()\"\n      [striped]=\"stripedRows()\"\n      [tabindex]=\"tabindex()\"\n      (onFocus)=\"onListFocus($event, SOURCE_LIST)\"\n      (onBlur)=\"onListBlur($event, SOURCE_LIST)\"\n      (onChange)=\"onChangeSelection($event, SOURCE_LIST)\"\n      (onDblClick)=\"onSourceItemDblClick()\"\n      [disabled]=\"disabled()\"\n      [optionDisabled]=\"sourceOptionDisabled()\"\n      [metaKeySelection]=\"metaKeySelection()\"\n      [scrollHeight]=\"scrollHeight()\"\n      [autoOptionFocus]=\"autoOptionFocus()\"\n      [filter]=\"filterBy() && showSourceFilter()\"\n      [filterBy]=\"filterBy()\"\n      [filterLocale]=\"filterLocale()\"\n      [filterMatchMode]=\"filterMatchMode()\"\n      [filterPlaceHolder]=\"sourceFilterPlaceholder()\"\n      [dragdrop]=\"dragdrop()\"\n      [dropListData]=\"source()\"\n      (onDrop)=\"onDrop($event, SOURCE_LIST)\"\n      (onFilter)=\"onFilter($event.originalEvent, SOURCE_LIST)\"\n      [pt]=\"ptm('pcListbox')\"\n      hostName=\"picklist\"\n      [attr.data-pc-group-section]=\"'list'\"\n      [unstyled]=\"unstyled()\"\n      >\n      @if (sourceHeaderTemplate() || _sourceHeaderTemplate || sourceHeader()) {\n        <ng-template #header>\n          @if (!sourceHeaderTemplate() && !_sourceHeaderTemplate) {\n            <div>{{ sourceHeader() }}</div>\n          }\n          <ng-template *ngTemplateOutlet=\"sourceHeaderTemplate() || _sourceHeaderTemplate\"></ng-template>\n        </ng-template>\n      }\n      @if (sourceFilterTemplate() || _sourceFilterTemplate) {\n        <ng-template #filter>\n          <ng-template *ngTemplateOutlet=\"sourceFilterTemplate() || _sourceFilterTemplate; context: { options: sourceFilterOptions }\"></ng-template>\n        </ng-template>\n      }\n      @if (sourceFilterIconTemplate() || _sourceFilterIconTemplate) {\n        <ng-container *ngTemplateOutlet=\"sourceFilterIconTemplate() || _sourceFilterIconTemplate\"></ng-container>\n      }\n      @if (itemTemplate() || _itemTemplate) {\n        <ng-template #item let-item let-index=\"index\" let-selected=\"selected\" let-disabled=\"disabled\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate() || _itemTemplate; context: { $implicit: item, index: index, selected: selected, disabled: disabled }\"></ng-container>\n        </ng-template>\n      }\n      @if (emptyMessageSourceTemplate() || _emptyMessageSourceTemplate) {\n        <ng-template #empty>\n          <ng-container *ngTemplateOutlet=\"emptyMessageSourceTemplate() || _emptyMessageSourceTemplate\"></ng-container>\n        </ng-template>\n      }\n      @if (emptyFilterMessageSourceTemplate() || _emptyFilterMessageSourceTemplate) {\n        <ng-template #emptyfilter>\n          <ng-container *ngTemplateOutlet=\"emptyFilterMessageSourceTemplate() || _emptyFilterMessageSourceTemplate\"></ng-container>\n        </ng-template>\n      }\n    </h-listbox>\n  </div>\n  <div [class]=\"cx('transferControls')\" [attr.data-pc-group-section]=\"'controls'\" [hBind]=\"ptm('transferControls')\">\n    <button\n      type=\"button\"\n      [attr.aria-label]=\"moveToTargetAriaLabel\"\n      hButton\n      hRipple\n      severity=\"secondary\"\n      [disabled]=\"moveRightDisabled()\"\n      (click)=\"moveRight()\"\n      [buttonProps]=\"getButtonProps('movetotarget')\"\n      [pt]=\"ptm('pcMoveToTargetButton')\"\n      hostName=\"picklist\"\n      [unstyled]=\"unstyled()\"\n      >\n      @if (!moveToTargetIconTemplate() && !_moveToTargetIconTemplate) {\n        @if (!viewChanged) {\n          <svg data-h-icon=\"angle-right\" hButtonIcon [pt]=\"ptm('pcMoveToTargetButton')['icon']\" />\n        }\n        @if (viewChanged) {\n          <svg data-h-icon=\"angle-down\" hButtonIcon [pt]=\"ptm('pcMoveToTargetButton')['icon']\" />\n        }\n      }\n      <ng-template *ngTemplateOutlet=\"moveToTargetIconTemplate() || _moveToTargetIconTemplate; context: { $implicit: viewChanged }\"></ng-template>\n    </button>\n    <button\n      type=\"button\"\n      [attr.aria-label]=\"moveAllToTargetAriaLabel\"\n      hButton\n      hRipple\n      severity=\"secondary\"\n      [disabled]=\"moveAllRightDisabled()\"\n      (click)=\"moveAllRight()\"\n      [buttonProps]=\"getButtonProps('movealltotarget')\"\n      [pt]=\"ptm('pcMoveAllToTargetButton')\"\n      [unstyled]=\"unstyled()\"\n      >\n      @if (!moveAllToTargetIconTemplate() && !_moveAllToTargetIconTemplate) {\n        @if (!viewChanged) {\n          <svg data-h-icon=\"angle-double-right\" hButtonIcon [pt]=\"ptm('pcMoveAllToTargetButton')['icon']\" />\n        }\n        @if (viewChanged) {\n          <svg data-h-icon=\"angle-double-down\" hButtonIcon [pt]=\"ptm('pcMoveAllToTargetButton')['icon']\" />\n        }\n      }\n      <ng-template *ngTemplateOutlet=\"moveAllToTargetIconTemplate() || _moveAllToTargetIconTemplate; context: { $implicit: viewChanged }\"></ng-template>\n    </button>\n    <button\n      type=\"button\"\n      [attr.aria-label]=\"moveToSourceAriaLabel\"\n      hButton\n      hRipple\n      severity=\"secondary\"\n      [disabled]=\"moveLeftDisabled()\"\n      (click)=\"moveLeft()\"\n      [buttonProps]=\"getButtonProps('movetosource')\"\n      [pt]=\"ptm('pcMoveToSourceButton')\"\n      hostName=\"picklist\"\n      [unstyled]=\"unstyled()\"\n      >\n      @if (!moveToSourceIconTemplate() && !_moveToSourceIconTemplate) {\n        @if (!viewChanged) {\n          <svg data-h-icon=\"angle-left\" hButtonIcon [pt]=\"ptm('pcMoveToSourceButton')['icon']\" />\n        }\n        @if (viewChanged) {\n          <svg data-h-icon=\"angle-up\" hButtonIcon [pt]=\"ptm('pcMoveToSourceButton')['icon']\" />\n        }\n      }\n      <ng-template *ngTemplateOutlet=\"moveToSourceIconTemplate() || _moveToSourceIconTemplate; context: { $implicit: viewChanged }\"></ng-template>\n    </button>\n    <button\n      type=\"button\"\n      [attr.aria-label]=\"moveAllToSourceAriaLabel\"\n      hButton\n      hRipple\n      severity=\"secondary\"\n      [disabled]=\"moveAllLeftDisabled()\"\n      (click)=\"moveAllLeft()\"\n      [buttonProps]=\"getButtonProps('movealltosource')\"\n      [pt]=\"ptm('pcMoveAllToSourceButton')\"\n      hostName=\"picklist\"\n      [unstyled]=\"unstyled()\"\n      >\n      @if (!moveAllToSourceIconTemplate() && !_moveAllToSourceIconTemplate) {\n        @if (!viewChanged) {\n          <svg data-h-icon=\"angle-double-left\" hButtonIcon [pt]=\"ptm('pcMoveAllToSourceButton')['icon']\" />\n        }\n        @if (viewChanged) {\n          <svg data-h-icon=\"angle-double-up\" hButtonIcon [pt]=\"ptm('pcMoveAllToSourceButton')['icon']\" />\n        }\n      }\n      <ng-template *ngTemplateOutlet=\"moveAllToSourceIconTemplate() || _moveAllToSourceIconTemplate; context: { $implicit: viewChanged }\"></ng-template>\n    </button>\n  </div>\n  <div [class]=\"cx('targetListContainer')\" [attr.data-pc-group-section]=\"'listcontainer'\" [hBind]=\"ptm('targetListContainer')\">\n    <h-listbox\n      #targetlist\n      [ariaLabel]=\"targetAriaLabel()\"\n      [multiple]=\"true\"\n      [options]=\"targetOptions\"\n      [(ngModel)]=\"selectedItemsTarget\"\n      [optionLabel]=\"dataKey() ?? 'name'\"\n      [id]=\"idTarget + '_list'\"\n      [listStyle]=\"targetStyle()\"\n      [striped]=\"stripedRows()\"\n      [tabindex]=\"tabindex()\"\n      (onFocus)=\"onListFocus($event, TARGET_LIST)\"\n      (onBlur)=\"onListBlur($event, TARGET_LIST)\"\n      (onChange)=\"onChangeSelection($event, TARGET_LIST)\"\n      (onDblClick)=\"onTargetItemDblClick()\"\n      [disabled]=\"disabled()\"\n      [optionDisabled]=\"targetOptionDisabled()\"\n      [metaKeySelection]=\"metaKeySelection()\"\n      [scrollHeight]=\"scrollHeight()\"\n      [autoOptionFocus]=\"autoOptionFocus()\"\n      [filter]=\"filterBy() && showTargetFilter()\"\n      [filterBy]=\"filterBy()\"\n      [filterLocale]=\"filterLocale()\"\n      [filterMatchMode]=\"filterMatchMode()\"\n      [filterPlaceHolder]=\"targetFilterPlaceholder()\"\n      [dragdrop]=\"dragdrop()\"\n      [dropListData]=\"target()\"\n      (onDrop)=\"onDrop($event, TARGET_LIST)\"\n      (onFilter)=\"onFilter($event.originalEvent, TARGET_LIST)\"\n      [pt]=\"ptm('pcListbox')\"\n      [attr.data-pc-group-section]=\"'list'\"\n      hostName=\"picklist\"\n      [unstyled]=\"unstyled()\"\n      >\n      @if (targetHeaderTemplate() || _targetHeaderTemplate || targetHeader()) {\n        <ng-template #header>\n          @if (!targetHeaderTemplate() && !_targetHeaderTemplate) {\n            <div>{{ targetHeader() }}</div>\n          }\n          <ng-template *ngTemplateOutlet=\"targetHeaderTemplate() || _targetHeaderTemplate\"></ng-template>\n        </ng-template>\n      }\n      @if (targetFilterTemplate() || _targetFilterTemplate) {\n        <ng-template #filter>\n          <ng-template *ngTemplateOutlet=\"targetFilterTemplate() || _targetFilterTemplate; context: { options: targetFilterOptions }\"></ng-template>\n        </ng-template>\n      }\n      @if (targetFilterIconTemplate() || _targetFilterIconTemplate) {\n        <ng-container *ngTemplateOutlet=\"targetFilterIconTemplate() || _targetFilterIconTemplate\"></ng-container>\n      }\n      @if (itemTemplate() || _itemTemplate) {\n        <ng-template #item let-item let-index=\"index\" let-selected=\"selected\" let-disabled=\"disabled\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate() || _itemTemplate; context: { $implicit: item, index: index, selected: selected, disabled: disabled }\"></ng-container>\n        </ng-template>\n      }\n      @if (emptyMessageTargetTemplate() || _emptyMessageTargetTemplate) {\n        <ng-template #empty>\n          <ng-container *ngTemplateOutlet=\"emptyMessageTargetTemplate() || _emptyMessageTargetTemplate\"></ng-container>\n        </ng-template>\n      }\n      @if (emptyFilterMessageTargetTemplate() || _emptyFilterMessageTargetTemplate) {\n        <ng-template #emptyfilter>\n          <ng-container *ngTemplateOutlet=\"emptyFilterMessageTargetTemplate() || _emptyFilterMessageTargetTemplate\"></ng-container>\n        </ng-template>\n      }\n    </h-listbox>\n  </div>\n  @if (showTargetControls()) {\n    <div [class]=\"cx('targetControls')\" [attr.data-pc-group-section]=\"'controls'\" [hBind]=\"ptm('targetControls')\">\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moveUpAriaLabel\"\n        hButton\n        hRipple\n        severity=\"secondary\"\n        [disabled]=\"targetMoveDisabled()\"\n        (click)=\"moveUp(targetlist, target(), selectedItemsTarget, onTargetReorder, TARGET_LIST)\"\n        [buttonProps]=\"getButtonProps('moveup')\"\n        [pt]=\"ptm('pcTargetMoveUpButton')\"\n        hostName=\"picklist\"\n        [unstyled]=\"unstyled()\"\n        >\n        @if (!moveUpIconTemplate() && !_moveUpIconTemplate) {\n          <svg data-h-icon=\"angle-up\" hButtonIcon [pt]=\"ptm('pcTargetMoveUpButton')['icon']\" />\n        }\n        <ng-template *ngTemplateOutlet=\"moveUpIconTemplate() || _moveUpIconTemplate\"></ng-template>\n      </button>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moveTopAriaLabel\"\n        hButton\n        hRipple\n        severity=\"secondary\"\n        [disabled]=\"targetMoveDisabled()\"\n        (click)=\"moveTop(targetlist, target(), selectedItemsTarget, onTargetReorder, TARGET_LIST)\"\n        [buttonProps]=\"getButtonProps('movetop')\"\n        [pt]=\"ptm('pcTargetMoveTopButton')\"\n        hostName=\"picklist\"\n        [unstyled]=\"unstyled()\"\n        >\n        @if (!moveTopIconTemplate() && !_moveTopIconTemplate) {\n          <svg data-h-icon=\"angle-double-up\" hButtonIcon [pt]=\"ptm('pcTargetMoveTopButton')['icon']\" />\n        }\n        <ng-template *ngTemplateOutlet=\"moveTopIconTemplate() || moveTopIconTemplate\"></ng-template>\n      </button>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moveDownAriaLabel\"\n        hButton\n        hRipple\n        severity=\"secondary\"\n        [disabled]=\"targetMoveDisabled()\"\n        (click)=\"moveDown(targetlist, target(), selectedItemsTarget, onTargetReorder, TARGET_LIST)\"\n        [buttonProps]=\"getButtonProps('movedown')\"\n        [pt]=\"ptm('pcTargetMoveDownButton')\"\n        hostName=\"picklist\"\n        [unstyled]=\"unstyled()\"\n        >\n        @if (!moveDownIconTemplate() && !_moveDownIconTemplate) {\n          <svg data-h-icon=\"angle-down\" hButtonIcon [pt]=\"ptm('pcTargetMoveDownButton')['icon']\" />\n        }\n        <ng-template *ngTemplateOutlet=\"moveDownIconTemplate() || _moveDownIconTemplate\"></ng-template>\n      </button>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moveBottomAriaLabel\"\n        hButton\n        hRipple\n        severity=\"secondary\"\n        [disabled]=\"targetMoveDisabled()\"\n        (click)=\"moveBottom(targetlist, target(), selectedItemsTarget, onTargetReorder, TARGET_LIST)\"\n        [buttonProps]=\"getButtonProps('movebottom')\"\n        [pt]=\"ptm('pcTargetMoveBottomButton')\"\n        hostName=\"picklist\"\n        [unstyled]=\"unstyled()\"\n        >\n        @if (!moveBottomIconTemplate() && !_moveBottomIconTemplate) {\n          <svg data-h-icon=\"angle-double-down\" hButtonIcon [pt]=\"ptm('pcTargetMoveBottomButton')['icon']\" />\n        }\n        <ng-template *ngTemplateOutlet=\"moveBottomIconTemplate() || _moveBottomIconTemplate\"></ng-template>\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "directive", type: i4.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: AngleDoubleDownIcon, selector: "[data-h-icon=\"angle-double-down\"]" }, { kind: "component", type: AngleDoubleLeftIcon, selector: "[data-h-icon=\"angle-double-left\"]" }, { kind: "component", type: AngleDoubleRightIcon, selector: "[data-h-icon=\"angle-double-right\"]" }, { kind: "component", type: AngleDoubleUpIcon, selector: "[data-h-icon=\"angle-double-up\"]" }, { kind: "component", type: AngleDownIcon, selector: "[data-h-icon=\"angle-down\"]" }, { kind: "component", type: AngleLeftIcon, selector: "[data-h-icon=\"angle-left\"]" }, { kind: "component", type: AngleRightIcon, selector: "[data-h-icon=\"angle-right\"]" }, { kind: "component", type: AngleUpIcon, selector: "[data-h-icon=\"angle-up\"]" }, { 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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.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: PickList, decorators: [{
+            type: Component,
+            args: [{ selector: 'h-pickList, h-picklist, h-pick-list', standalone: true, imports: [
+                        CommonModule,
+                        ButtonModule,
+                        Ripple,
+                        DragDropModule,
+                        AngleDoubleDownIcon,
+                        AngleDoubleLeftIcon,
+                        AngleDoubleRightIcon,
+                        AngleDoubleUpIcon,
+                        AngleDownIcon,
+                        AngleLeftIcon,
+                        AngleRightIcon,
+                        AngleUpIcon,
+                        Listbox,
+                        FormsModule,
+                        SharedModule,
+                        BindModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [PickListStyle, { provide: PARENT_INSTANCE, useExisting: PickList }, { provide: PICKLIST_INSTANCE, useExisting: PickList }], hostDirectives: [Bind], template: "<div [ngStyle]=\"style()\" [class]=\"cn(cx('root'), styleClass())\" cdkDropListGroup [hBind]=\"ptm('root')\">\n  @if (showSourceControls()) {\n    <div [class]=\"cx('sourceControls')\" [hBind]=\"ptm('sourceControls')\" [attr.data-pc-group-section]=\"'controls'\">\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moveUpAriaLabel\"\n        hButton\n        hRipple\n        severity=\"secondary\"\n        [disabled]=\"sourceMoveDisabled()\"\n        (click)=\"moveUp(sourcelist, source(), selectedItemsSource, onSourceReorder, SOURCE_LIST)\"\n        [buttonProps]=\"getButtonProps('moveup')\"\n        [pt]=\"ptm('pcSourceMoveUpButton')\"\n        [unstyled]=\"unstyled()\"\n        >\n        @if (!moveUpIconTemplate() && !_moveUpIconTemplate) {\n          <svg data-h-icon=\"angle-up\" [pt]=\"ptm('pcSourceMoveUpButton')['icon']\" hButtonIcon />\n        }\n        <ng-template *ngTemplateOutlet=\"moveUpIconTemplate() || _moveUpIconTemplate\"></ng-template>\n      </button>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moveTopAriaLabel\"\n        hButton\n        hRipple\n        severity=\"secondary\"\n        [disabled]=\"sourceMoveDisabled()\"\n        (click)=\"moveTop(sourcelist, source(), selectedItemsSource, onSourceReorder, SOURCE_LIST)\"\n        [buttonProps]=\"getButtonProps('movetop')\"\n        [pt]=\"ptm('pcSourceMoveTopButton')\"\n        [unstyled]=\"unstyled()\"\n        >\n        @if (!moveTopIconTemplate() && !_moveTopIconTemplate) {\n          <svg data-h-icon=\"angle-double-up\" hButtonIcon [pt]=\"ptm('pcSourceMoveTopButton')['icon']\" />\n        }\n        <ng-template *ngTemplateOutlet=\"moveTopIconTemplate() || _moveTopIconTemplate\"></ng-template>\n      </button>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moveDownAriaLabel\"\n        hButton\n        hRipple\n        severity=\"secondary\"\n        [disabled]=\"sourceMoveDisabled()\"\n        (click)=\"moveDown(sourcelist, source(), selectedItemsSource, onSourceReorder, SOURCE_LIST)\"\n        [buttonProps]=\"getButtonProps('movedown')\"\n        [pt]=\"ptm('pcSourceMoveDownButton')\"\n        [unstyled]=\"unstyled()\"\n        hostName=\"picklist\"\n        >\n        @if (!moveDownIconTemplate() && !_moveDownIconTemplate) {\n          <svg data-h-icon=\"angle-down\" hButtonIcon [pt]=\"ptm('pcSourceMoveDownButton')['icon']\" />\n        }\n        <ng-template *ngTemplateOutlet=\"moveDownIconTemplate() || _moveDownIconTemplate\"></ng-template>\n      </button>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moveBottomAriaLabel\"\n        hButton\n        hRipple\n        severity=\"secondary\"\n        [disabled]=\"sourceMoveDisabled()\"\n        (click)=\"moveBottom(sourcelist, source(), selectedItemsSource, onSourceReorder, SOURCE_LIST)\"\n        [buttonProps]=\"getButtonProps('movebottom')\"\n        [pt]=\"ptm('pcSourceMoveBottomButton')\"\n        [unstyled]=\"unstyled()\"\n        hostName=\"picklist\"\n        >\n        @if (!moveBottomIconTemplate() || _moveBottomIconTemplate) {\n          <svg data-h-icon=\"angle-double-down\" hButtonIcon [pt]=\"ptm('pcSourceMoveBottomButton')['icon']\" />\n        }\n        <ng-template *ngTemplateOutlet=\"moveBottomIconTemplate() || _moveBottomIconTemplate\"></ng-template>\n      </button>\n    </div>\n  }\n  <div [class]=\"cx('sourceListContainer')\" [attr.data-pc-group-section]=\"'listcontainer'\" [hBind]=\"ptm('sourceListContainer')\">\n    <h-listbox\n      #sourcelist\n      [ariaLabel]=\"sourceAriaLabel()\"\n      [multiple]=\"true\"\n      [options]=\"sourceOptions\"\n      [(ngModel)]=\"selectedItemsSource\"\n      [optionLabel]=\"dataKey() ?? 'name'\"\n      [id]=\"idSource + '_list'\"\n      [listStyle]=\"sourceStyle()\"\n      [striped]=\"stripedRows()\"\n      [tabindex]=\"tabindex()\"\n      (onFocus)=\"onListFocus($event, SOURCE_LIST)\"\n      (onBlur)=\"onListBlur($event, SOURCE_LIST)\"\n      (onChange)=\"onChangeSelection($event, SOURCE_LIST)\"\n      (onDblClick)=\"onSourceItemDblClick()\"\n      [disabled]=\"disabled()\"\n      [optionDisabled]=\"sourceOptionDisabled()\"\n      [metaKeySelection]=\"metaKeySelection()\"\n      [scrollHeight]=\"scrollHeight()\"\n      [autoOptionFocus]=\"autoOptionFocus()\"\n      [filter]=\"filterBy() && showSourceFilter()\"\n      [filterBy]=\"filterBy()\"\n      [filterLocale]=\"filterLocale()\"\n      [filterMatchMode]=\"filterMatchMode()\"\n      [filterPlaceHolder]=\"sourceFilterPlaceholder()\"\n      [dragdrop]=\"dragdrop()\"\n      [dropListData]=\"source()\"\n      (onDrop)=\"onDrop($event, SOURCE_LIST)\"\n      (onFilter)=\"onFilter($event.originalEvent, SOURCE_LIST)\"\n      [pt]=\"ptm('pcListbox')\"\n      hostName=\"picklist\"\n      [attr.data-pc-group-section]=\"'list'\"\n      [unstyled]=\"unstyled()\"\n      >\n      @if (sourceHeaderTemplate() || _sourceHeaderTemplate || sourceHeader()) {\n        <ng-template #header>\n          @if (!sourceHeaderTemplate() && !_sourceHeaderTemplate) {\n            <div>{{ sourceHeader() }}</div>\n          }\n          <ng-template *ngTemplateOutlet=\"sourceHeaderTemplate() || _sourceHeaderTemplate\"></ng-template>\n        </ng-template>\n      }\n      @if (sourceFilterTemplate() || _sourceFilterTemplate) {\n        <ng-template #filter>\n          <ng-template *ngTemplateOutlet=\"sourceFilterTemplate() || _sourceFilterTemplate; context: { options: sourceFilterOptions }\"></ng-template>\n        </ng-template>\n      }\n      @if (sourceFilterIconTemplate() || _sourceFilterIconTemplate) {\n        <ng-container *ngTemplateOutlet=\"sourceFilterIconTemplate() || _sourceFilterIconTemplate\"></ng-container>\n      }\n      @if (itemTemplate() || _itemTemplate) {\n        <ng-template #item let-item let-index=\"index\" let-selected=\"selected\" let-disabled=\"disabled\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate() || _itemTemplate; context: { $implicit: item, index: index, selected: selected, disabled: disabled }\"></ng-container>\n        </ng-template>\n      }\n      @if (emptyMessageSourceTemplate() || _emptyMessageSourceTemplate) {\n        <ng-template #empty>\n          <ng-container *ngTemplateOutlet=\"emptyMessageSourceTemplate() || _emptyMessageSourceTemplate\"></ng-container>\n        </ng-template>\n      }\n      @if (emptyFilterMessageSourceTemplate() || _emptyFilterMessageSourceTemplate) {\n        <ng-template #emptyfilter>\n          <ng-container *ngTemplateOutlet=\"emptyFilterMessageSourceTemplate() || _emptyFilterMessageSourceTemplate\"></ng-container>\n        </ng-template>\n      }\n    </h-listbox>\n  </div>\n  <div [class]=\"cx('transferControls')\" [attr.data-pc-group-section]=\"'controls'\" [hBind]=\"ptm('transferControls')\">\n    <button\n      type=\"button\"\n      [attr.aria-label]=\"moveToTargetAriaLabel\"\n      hButton\n      hRipple\n      severity=\"secondary\"\n      [disabled]=\"moveRightDisabled()\"\n      (click)=\"moveRight()\"\n      [buttonProps]=\"getButtonProps('movetotarget')\"\n      [pt]=\"ptm('pcMoveToTargetButton')\"\n      hostName=\"picklist\"\n      [unstyled]=\"unstyled()\"\n      >\n      @if (!moveToTargetIconTemplate() && !_moveToTargetIconTemplate) {\n        @if (!viewChanged) {\n          <svg data-h-icon=\"angle-right\" hButtonIcon [pt]=\"ptm('pcMoveToTargetButton')['icon']\" />\n        }\n        @if (viewChanged) {\n          <svg data-h-icon=\"angle-down\" hButtonIcon [pt]=\"ptm('pcMoveToTargetButton')['icon']\" />\n        }\n      }\n      <ng-template *ngTemplateOutlet=\"moveToTargetIconTemplate() || _moveToTargetIconTemplate; context: { $implicit: viewChanged }\"></ng-template>\n    </button>\n    <button\n      type=\"button\"\n      [attr.aria-label]=\"moveAllToTargetAriaLabel\"\n      hButton\n      hRipple\n      severity=\"secondary\"\n      [disabled]=\"moveAllRightDisabled()\"\n      (click)=\"moveAllRight()\"\n      [buttonProps]=\"getButtonProps('movealltotarget')\"\n      [pt]=\"ptm('pcMoveAllToTargetButton')\"\n      [unstyled]=\"unstyled()\"\n      >\n      @if (!moveAllToTargetIconTemplate() && !_moveAllToTargetIconTemplate) {\n        @if (!viewChanged) {\n          <svg data-h-icon=\"angle-double-right\" hButtonIcon [pt]=\"ptm('pcMoveAllToTargetButton')['icon']\" />\n        }\n        @if (viewChanged) {\n          <svg data-h-icon=\"angle-double-down\" hButtonIcon [pt]=\"ptm('pcMoveAllToTargetButton')['icon']\" />\n        }\n      }\n      <ng-template *ngTemplateOutlet=\"moveAllToTargetIconTemplate() || _moveAllToTargetIconTemplate; context: { $implicit: viewChanged }\"></ng-template>\n    </button>\n    <button\n      type=\"button\"\n      [attr.aria-label]=\"moveToSourceAriaLabel\"\n      hButton\n      hRipple\n      severity=\"secondary\"\n      [disabled]=\"moveLeftDisabled()\"\n      (click)=\"moveLeft()\"\n      [buttonProps]=\"getButtonProps('movetosource')\"\n      [pt]=\"ptm('pcMoveToSourceButton')\"\n      hostName=\"picklist\"\n      [unstyled]=\"unstyled()\"\n      >\n      @if (!moveToSourceIconTemplate() && !_moveToSourceIconTemplate) {\n        @if (!viewChanged) {\n          <svg data-h-icon=\"angle-left\" hButtonIcon [pt]=\"ptm('pcMoveToSourceButton')['icon']\" />\n        }\n        @if (viewChanged) {\n          <svg data-h-icon=\"angle-up\" hButtonIcon [pt]=\"ptm('pcMoveToSourceButton')['icon']\" />\n        }\n      }\n      <ng-template *ngTemplateOutlet=\"moveToSourceIconTemplate() || _moveToSourceIconTemplate; context: { $implicit: viewChanged }\"></ng-template>\n    </button>\n    <button\n      type=\"button\"\n      [attr.aria-label]=\"moveAllToSourceAriaLabel\"\n      hButton\n      hRipple\n      severity=\"secondary\"\n      [disabled]=\"moveAllLeftDisabled()\"\n      (click)=\"moveAllLeft()\"\n      [buttonProps]=\"getButtonProps('movealltosource')\"\n      [pt]=\"ptm('pcMoveAllToSourceButton')\"\n      hostName=\"picklist\"\n      [unstyled]=\"unstyled()\"\n      >\n      @if (!moveAllToSourceIconTemplate() && !_moveAllToSourceIconTemplate) {\n        @if (!viewChanged) {\n          <svg data-h-icon=\"angle-double-left\" hButtonIcon [pt]=\"ptm('pcMoveAllToSourceButton')['icon']\" />\n        }\n        @if (viewChanged) {\n          <svg data-h-icon=\"angle-double-up\" hButtonIcon [pt]=\"ptm('pcMoveAllToSourceButton')['icon']\" />\n        }\n      }\n      <ng-template *ngTemplateOutlet=\"moveAllToSourceIconTemplate() || _moveAllToSourceIconTemplate; context: { $implicit: viewChanged }\"></ng-template>\n    </button>\n  </div>\n  <div [class]=\"cx('targetListContainer')\" [attr.data-pc-group-section]=\"'listcontainer'\" [hBind]=\"ptm('targetListContainer')\">\n    <h-listbox\n      #targetlist\n      [ariaLabel]=\"targetAriaLabel()\"\n      [multiple]=\"true\"\n      [options]=\"targetOptions\"\n      [(ngModel)]=\"selectedItemsTarget\"\n      [optionLabel]=\"dataKey() ?? 'name'\"\n      [id]=\"idTarget + '_list'\"\n      [listStyle]=\"targetStyle()\"\n      [striped]=\"stripedRows()\"\n      [tabindex]=\"tabindex()\"\n      (onFocus)=\"onListFocus($event, TARGET_LIST)\"\n      (onBlur)=\"onListBlur($event, TARGET_LIST)\"\n      (onChange)=\"onChangeSelection($event, TARGET_LIST)\"\n      (onDblClick)=\"onTargetItemDblClick()\"\n      [disabled]=\"disabled()\"\n      [optionDisabled]=\"targetOptionDisabled()\"\n      [metaKeySelection]=\"metaKeySelection()\"\n      [scrollHeight]=\"scrollHeight()\"\n      [autoOptionFocus]=\"autoOptionFocus()\"\n      [filter]=\"filterBy() && showTargetFilter()\"\n      [filterBy]=\"filterBy()\"\n      [filterLocale]=\"filterLocale()\"\n      [filterMatchMode]=\"filterMatchMode()\"\n      [filterPlaceHolder]=\"targetFilterPlaceholder()\"\n      [dragdrop]=\"dragdrop()\"\n      [dropListData]=\"target()\"\n      (onDrop)=\"onDrop($event, TARGET_LIST)\"\n      (onFilter)=\"onFilter($event.originalEvent, TARGET_LIST)\"\n      [pt]=\"ptm('pcListbox')\"\n      [attr.data-pc-group-section]=\"'list'\"\n      hostName=\"picklist\"\n      [unstyled]=\"unstyled()\"\n      >\n      @if (targetHeaderTemplate() || _targetHeaderTemplate || targetHeader()) {\n        <ng-template #header>\n          @if (!targetHeaderTemplate() && !_targetHeaderTemplate) {\n            <div>{{ targetHeader() }}</div>\n          }\n          <ng-template *ngTemplateOutlet=\"targetHeaderTemplate() || _targetHeaderTemplate\"></ng-template>\n        </ng-template>\n      }\n      @if (targetFilterTemplate() || _targetFilterTemplate) {\n        <ng-template #filter>\n          <ng-template *ngTemplateOutlet=\"targetFilterTemplate() || _targetFilterTemplate; context: { options: targetFilterOptions }\"></ng-template>\n        </ng-template>\n      }\n      @if (targetFilterIconTemplate() || _targetFilterIconTemplate) {\n        <ng-container *ngTemplateOutlet=\"targetFilterIconTemplate() || _targetFilterIconTemplate\"></ng-container>\n      }\n      @if (itemTemplate() || _itemTemplate) {\n        <ng-template #item let-item let-index=\"index\" let-selected=\"selected\" let-disabled=\"disabled\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate() || _itemTemplate; context: { $implicit: item, index: index, selected: selected, disabled: disabled }\"></ng-container>\n        </ng-template>\n      }\n      @if (emptyMessageTargetTemplate() || _emptyMessageTargetTemplate) {\n        <ng-template #empty>\n          <ng-container *ngTemplateOutlet=\"emptyMessageTargetTemplate() || _emptyMessageTargetTemplate\"></ng-container>\n        </ng-template>\n      }\n      @if (emptyFilterMessageTargetTemplate() || _emptyFilterMessageTargetTemplate) {\n        <ng-template #emptyfilter>\n          <ng-container *ngTemplateOutlet=\"emptyFilterMessageTargetTemplate() || _emptyFilterMessageTargetTemplate\"></ng-container>\n        </ng-template>\n      }\n    </h-listbox>\n  </div>\n  @if (showTargetControls()) {\n    <div [class]=\"cx('targetControls')\" [attr.data-pc-group-section]=\"'controls'\" [hBind]=\"ptm('targetControls')\">\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moveUpAriaLabel\"\n        hButton\n        hRipple\n        severity=\"secondary\"\n        [disabled]=\"targetMoveDisabled()\"\n        (click)=\"moveUp(targetlist, target(), selectedItemsTarget, onTargetReorder, TARGET_LIST)\"\n        [buttonProps]=\"getButtonProps('moveup')\"\n        [pt]=\"ptm('pcTargetMoveUpButton')\"\n        hostName=\"picklist\"\n        [unstyled]=\"unstyled()\"\n        >\n        @if (!moveUpIconTemplate() && !_moveUpIconTemplate) {\n          <svg data-h-icon=\"angle-up\" hButtonIcon [pt]=\"ptm('pcTargetMoveUpButton')['icon']\" />\n        }\n        <ng-template *ngTemplateOutlet=\"moveUpIconTemplate() || _moveUpIconTemplate\"></ng-template>\n      </button>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moveTopAriaLabel\"\n        hButton\n        hRipple\n        severity=\"secondary\"\n        [disabled]=\"targetMoveDisabled()\"\n        (click)=\"moveTop(targetlist, target(), selectedItemsTarget, onTargetReorder, TARGET_LIST)\"\n        [buttonProps]=\"getButtonProps('movetop')\"\n        [pt]=\"ptm('pcTargetMoveTopButton')\"\n        hostName=\"picklist\"\n        [unstyled]=\"unstyled()\"\n        >\n        @if (!moveTopIconTemplate() && !_moveTopIconTemplate) {\n          <svg data-h-icon=\"angle-double-up\" hButtonIcon [pt]=\"ptm('pcTargetMoveTopButton')['icon']\" />\n        }\n        <ng-template *ngTemplateOutlet=\"moveTopIconTemplate() || moveTopIconTemplate\"></ng-template>\n      </button>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moveDownAriaLabel\"\n        hButton\n        hRipple\n        severity=\"secondary\"\n        [disabled]=\"targetMoveDisabled()\"\n        (click)=\"moveDown(targetlist, target(), selectedItemsTarget, onTargetReorder, TARGET_LIST)\"\n        [buttonProps]=\"getButtonProps('movedown')\"\n        [pt]=\"ptm('pcTargetMoveDownButton')\"\n        hostName=\"picklist\"\n        [unstyled]=\"unstyled()\"\n        >\n        @if (!moveDownIconTemplate() && !_moveDownIconTemplate) {\n          <svg data-h-icon=\"angle-down\" hButtonIcon [pt]=\"ptm('pcTargetMoveDownButton')['icon']\" />\n        }\n        <ng-template *ngTemplateOutlet=\"moveDownIconTemplate() || _moveDownIconTemplate\"></ng-template>\n      </button>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moveBottomAriaLabel\"\n        hButton\n        hRipple\n        severity=\"secondary\"\n        [disabled]=\"targetMoveDisabled()\"\n        (click)=\"moveBottom(targetlist, target(), selectedItemsTarget, onTargetReorder, TARGET_LIST)\"\n        [buttonProps]=\"getButtonProps('movebottom')\"\n        [pt]=\"ptm('pcTargetMoveBottomButton')\"\n        hostName=\"picklist\"\n        [unstyled]=\"unstyled()\"\n        >\n        @if (!moveBottomIconTemplate() && !_moveBottomIconTemplate) {\n          <svg data-h-icon=\"angle-double-down\" hButtonIcon [pt]=\"ptm('pcTargetMoveBottomButton')['icon']\" />\n        }\n        <ng-template *ngTemplateOutlet=\"moveBottomIconTemplate() || _moveBottomIconTemplate\"></ng-template>\n      </button>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { hostName: [{ type: i0.Input, args: [{ isSignal: true, alias: "hostName", required: false }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }, { type: i0.Output, args: ["sourceChange"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }, { type: i0.Output, args: ["targetChange"] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], sourceHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceHeader", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], rightButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightButtonAriaLabel", required: false }] }], leftButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftButtonAriaLabel", required: false }] }], allRightButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "allRightButtonAriaLabel", required: false }] }], allLeftButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "allLeftButtonAriaLabel", required: false }] }], upButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "upButtonAriaLabel", required: false }] }], downButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "downButtonAriaLabel", required: false }] }], topButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "topButtonAriaLabel", required: false }] }], bottomButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomButtonAriaLabel", required: false }] }], sourceAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceAriaLabel", required: false }] }], targetAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetAriaLabel", required: false }] }], targetHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetHeader", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], filterLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocale", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], sourceTrackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceTrackBy", required: false }] }], targetTrackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetTrackBy", required: false }] }], showSourceFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSourceFilter", required: false }] }], showTargetFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTargetFilter", required: false }] }], metaKeySelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaKeySelection", required: false }] }], dragdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragdrop", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], sourceStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceStyle", required: false }] }], targetStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetStyle", required: false }] }], showSourceControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSourceControls", required: false }] }], showTargetControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTargetControls", required: false }] }], sourceFilterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceFilterPlaceholder", required: false }] }], targetFilterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetFilterPlaceholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], sourceOptionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceOptionDisabled", required: false }] }], targetOptionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetOptionDisabled", required: false }] }], ariaSourceFilterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaSourceFilterLabel", required: false }] }], ariaTargetFilterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaTargetFilterLabel", required: false }] }], filterMatchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatchMode", required: false }] }], stripedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "stripedRows", required: false }] }], keepSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepSelection", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], autoOptionFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoOptionFocus", required: false }] }], 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 }] }], moveToTargetProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveToTargetProps", required: false }] }], moveAllToTargetProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveAllToTargetProps", required: false }] }], moveToSourceProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveToSourceProps", required: false }] }], moveAllToSourceProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveAllToSourceProps", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }, { type: i0.Output, args: ["breakpointChange"] }], onMoveToSource: [{ type: i0.Output, args: ["onMoveToSource"] }], onMoveAllToSource: [{ type: i0.Output, args: ["onMoveAllToSource"] }], onMoveAllToTarget: [{ type: i0.Output, args: ["onMoveAllToTarget"] }], onMoveToTarget: [{ type: i0.Output, args: ["onMoveToTarget"] }], onSourceReorder: [{ type: i0.Output, args: ["onSourceReorder"] }], onTargetReorder: [{ type: i0.Output, args: ["onTargetReorder"] }], onSourceSelect: [{ type: i0.Output, args: ["onSourceSelect"] }], onTargetSelect: [{ type: i0.Output, args: ["onTargetSelect"] }], onSourceFilter: [{ type: i0.Output, args: ["onSourceFilter"] }], onTargetFilter: [{ type: i0.Output, args: ["onTargetFilter"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], listViewSourceChild: [{ type: i0.ViewChild, args: ['sourcelist', { isSignal: true }] }], listViewTargetChild: [{ type: i0.ViewChild, args: ['targetlist', { isSignal: true }] }], sourceFilterViewChild: [{ type: i0.ViewChild, args: ['sourceFilter', { isSignal: true }] }], targetFilterViewChild: [{ type: i0.ViewChild, args: ['targetFilter', { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: ['item', { ...{ descendants: false }, isSignal: true }] }], sourceHeaderTemplate: [{ type: i0.ContentChild, args: ['sourceHeader', { ...{ descendants: false }, isSignal: true }] }], targetHeaderTemplate: [{ type: i0.ContentChild, args: ['targetHeader', { ...{ descendants: false }, isSignal: true }] }], sourceFilterTemplate: [{ type: i0.ContentChild, args: ['sourceFilter', { ...{ descendants: false }, isSignal: true }] }], targetFilterTemplate: [{ type: i0.ContentChild, args: ['targetFilter', { ...{ descendants: false }, isSignal: true }] }], emptyMessageSourceTemplate: [{ type: i0.ContentChild, args: ['emptymessagesource', { ...{ descendants: false }, isSignal: true }] }], emptyFilterMessageSourceTemplate: [{ type: i0.ContentChild, args: ['emptyfiltermessagesource', { ...{ descendants: false }, isSignal: true }] }], emptyMessageTargetTemplate: [{ type: i0.ContentChild, args: ['emptymessagetarget', { ...{ descendants: false }, isSignal: true }] }], emptyFilterMessageTargetTemplate: [{ type: i0.ContentChild, args: ['emptyfiltermessagetarget', { ...{ 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 }] }], moveToTargetIconTemplate: [{ type: i0.ContentChild, args: ['movetotargeticon', { ...{ descendants: false }, isSignal: true }] }], moveAllToTargetIconTemplate: [{ type: i0.ContentChild, args: ['movealltotargeticon', { ...{ descendants: false }, isSignal: true }] }], moveToSourceIconTemplate: [{ type: i0.ContentChild, args: ['movetosourceicon', { ...{ descendants: false }, isSignal: true }] }], moveAllToSourceIconTemplate: [{ type: i0.ContentChild, args: ['movealltosourceicon', { ...{ descendants: false }, isSignal: true }] }], targetFilterIconTemplate: [{ type: i0.ContentChild, args: ['targetfiltericon', { ...{ descendants: false }, isSignal: true }] }], sourceFilterIconTemplate: [{ type: i0.ContentChild, args: ['sourcefiltericon', { ...{ descendants: false }, isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }] }] } });
+class PickListModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: PickListModule, imports: [PickList, SharedModule], exports: [PickList, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PickListModule, imports: [PickList, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PickListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [PickList, SharedModule],
+                    exports: [PickList, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PickList, PickListClasses, PickListModule, PickListStyle };
+//# sourceMappingURL=gravionlabs-helix-core-picklist.mjs.map