@gravionlabs/helix-core 22.1.2 → 22.1.3

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

@@ -1,25 +1,24 @@
-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*/ `
+import * as i4 from "@angular/cdk/drag-drop";
+import { DragDropModule, moveItemInArray } from "@angular/cdk/drag-drop";
+import * as i2 from "@angular/common";
+import { CommonModule, isPlatformBrowser } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, NgModule, ViewEncapsulation, booleanAttribute, contentChild, contentChildren, inject, input, model, numberAttribute, output, viewChild } from "@angular/core";
+import * as i5 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { find, findIndexInList, isEmpty, setAttribute, uuid } from "@gravionlabs/helix-core/uix/utils";
+import { FilterService, HelixTemplate, SharedModule } from "@gravionlabs/helix-core/api";
+import { BaseComponent, PARENT_INSTANCE } from "@gravionlabs/helix-core/basecomponent";
+import * as i1 from "@gravionlabs/helix-core/bind";
+import { Bind, 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";
+export * from "@gravionlabs/helix-core/types/picklist";
+const style = `
     .h-picklist {
         display: flex;
         gap: dt('picklist.gap');
@@ -40,1267 +39,820 @@ const style = /*css*/ `
         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'
+	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"
+};
+var PickListStyle = class PickListStyle extends BaseStyle {
+	name = "picklist";
+	style = style;
+	classes = classes;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: PickListStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: PickListStyle
+	});
 };
-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
- *
- */
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: PickListStyle,
+	decorators: [{ type: Injectable }]
+});
 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";
+(function(PickListClasses) {
+	PickListClasses["root"] = "h-picklist";
+	PickListClasses["sourceControls"] = "h-picklist-source-controls";
+	PickListClasses["sourceListContainer"] = "h-picklist-source-list-container";
+	PickListClasses["transferControls"] = "h-picklist-transfer-controls";
+	PickListClasses["targetListContainer"] = "h-picklist-target-list-container";
+	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 = `
+const PICKLIST_INSTANCE = new InjectionToken("PICKLIST_INSTANCE");
+var PickList = class PickList extends BaseComponent {
+	componentName = "PickList";
+	hostName = input("", ...ngDevMode ? [{ debugName: "hostName" }] : 	/* istanbul ignore next */ []);
+	bindDirectiveInstance = inject(Bind, { self: true });
+	$pcPickList = inject(PICKLIST_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptm("host"));
+	}
+	source = model([], ...ngDevMode ? [{ debugName: "source" }] : 	/* istanbul ignore next */ []);
+	target = model([], ...ngDevMode ? [{ debugName: "target" }] : 	/* istanbul ignore next */ []);
+	dataKey = input(...ngDevMode ? [void 0, { debugName: "dataKey" }] : 	/* istanbul ignore next */ []);
+	sourceHeader = input(void 0, ...ngDevMode ? [{ debugName: "sourceHeader" }] : 	/* istanbul ignore next */ []);
+	tabindex = input(0, {
+		...ngDevMode ? { debugName: "tabindex" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	rightButtonAriaLabel = input(...ngDevMode ? [void 0, { debugName: "rightButtonAriaLabel" }] : 	/* istanbul ignore next */ []);
+	leftButtonAriaLabel = input(...ngDevMode ? [void 0, { debugName: "leftButtonAriaLabel" }] : 	/* istanbul ignore next */ []);
+	allRightButtonAriaLabel = input(...ngDevMode ? [void 0, { debugName: "allRightButtonAriaLabel" }] : 	/* istanbul ignore next */ []);
+	allLeftButtonAriaLabel = input(...ngDevMode ? [void 0, { debugName: "allLeftButtonAriaLabel" }] : 	/* istanbul ignore next */ []);
+	upButtonAriaLabel = input(...ngDevMode ? [void 0, { debugName: "upButtonAriaLabel" }] : 	/* istanbul ignore next */ []);
+	downButtonAriaLabel = input(...ngDevMode ? [void 0, { debugName: "downButtonAriaLabel" }] : 	/* istanbul ignore next */ []);
+	topButtonAriaLabel = input(...ngDevMode ? [void 0, { debugName: "topButtonAriaLabel" }] : 	/* istanbul ignore next */ []);
+	bottomButtonAriaLabel = input(...ngDevMode ? [void 0, { debugName: "bottomButtonAriaLabel" }] : 	/* istanbul ignore next */ []);
+	sourceAriaLabel = input(...ngDevMode ? [void 0, { debugName: "sourceAriaLabel" }] : 	/* istanbul ignore next */ []);
+	targetAriaLabel = input(...ngDevMode ? [void 0, { debugName: "targetAriaLabel" }] : 	/* istanbul ignore next */ []);
+	targetHeader = input(void 0, ...ngDevMode ? [{ debugName: "targetHeader" }] : 	/* istanbul ignore next */ []);
+	responsive = input(void 0, {
+		...ngDevMode ? { debugName: "responsive" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	filterBy = input(...ngDevMode ? [void 0, { debugName: "filterBy" }] : 	/* istanbul ignore next */ []);
+	filterLocale = input(...ngDevMode ? [void 0, { debugName: "filterLocale" }] : 	/* istanbul ignore next */ []);
+	trackBy = input((index, item) => item, ...ngDevMode ? [{ debugName: "trackBy" }] : 	/* istanbul ignore next */ []);
+	sourceTrackBy = input(...ngDevMode ? [void 0, { debugName: "sourceTrackBy" }] : 	/* istanbul ignore next */ []);
+	targetTrackBy = input(...ngDevMode ? [void 0, { debugName: "targetTrackBy" }] : 	/* istanbul ignore next */ []);
+	showSourceFilter = input(true, {
+		...ngDevMode ? { debugName: "showSourceFilter" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showTargetFilter = input(true, {
+		...ngDevMode ? { debugName: "showTargetFilter" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	metaKeySelection = input(false, {
+		...ngDevMode ? { debugName: "metaKeySelection" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	dragdrop = input(false, {
+		...ngDevMode ? { debugName: "dragdrop" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	style = input(...ngDevMode ? [void 0, { debugName: "style" }] : 	/* istanbul ignore next */ []);
+	styleClass = input(...ngDevMode ? [void 0, { debugName: "styleClass" }] : 	/* istanbul ignore next */ []);
+	sourceStyle = input(...ngDevMode ? [void 0, { debugName: "sourceStyle" }] : 	/* istanbul ignore next */ []);
+	targetStyle = input(...ngDevMode ? [void 0, { debugName: "targetStyle" }] : 	/* istanbul ignore next */ []);
+	showSourceControls = input(true, {
+		...ngDevMode ? { debugName: "showSourceControls" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showTargetControls = input(true, {
+		...ngDevMode ? { debugName: "showTargetControls" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	sourceFilterPlaceholder = input(...ngDevMode ? [void 0, { debugName: "sourceFilterPlaceholder" }] : 	/* istanbul ignore next */ []);
+	targetFilterPlaceholder = input(...ngDevMode ? [void 0, { debugName: "targetFilterPlaceholder" }] : 	/* istanbul ignore next */ []);
+	disabled = input(void 0, {
+		...ngDevMode ? { debugName: "disabled" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	sourceOptionDisabled = input(...ngDevMode ? [void 0, { debugName: "sourceOptionDisabled" }] : 	/* istanbul ignore next */ []);
+	targetOptionDisabled = input(...ngDevMode ? [void 0, { debugName: "targetOptionDisabled" }] : 	/* istanbul ignore next */ []);
+	ariaSourceFilterLabel = input(...ngDevMode ? [void 0, { debugName: "ariaSourceFilterLabel" }] : 	/* istanbul ignore next */ []);
+	ariaTargetFilterLabel = input(...ngDevMode ? [void 0, { debugName: "ariaTargetFilterLabel" }] : 	/* istanbul ignore next */ []);
+	filterMatchMode = input("contains", ...ngDevMode ? [{ debugName: "filterMatchMode" }] : 	/* istanbul ignore next */ []);
+	stripedRows = input(void 0, {
+		...ngDevMode ? { debugName: "stripedRows" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	keepSelection = input(false, {
+		...ngDevMode ? { debugName: "keepSelection" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	scrollHeight = input("14rem", ...ngDevMode ? [{ debugName: "scrollHeight" }] : 	/* istanbul ignore next */ []);
+	autoOptionFocus = input(true, {
+		...ngDevMode ? { debugName: "autoOptionFocus" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	buttonProps = input({ severity: "secondary" }, ...ngDevMode ? [{ debugName: "buttonProps" }] : 	/* istanbul ignore next */ []);
+	moveUpButtonProps = input(...ngDevMode ? [void 0, { debugName: "moveUpButtonProps" }] : 	/* istanbul ignore next */ []);
+	moveTopButtonProps = input(...ngDevMode ? [void 0, { debugName: "moveTopButtonProps" }] : 	/* istanbul ignore next */ []);
+	moveDownButtonProps = input(...ngDevMode ? [void 0, { debugName: "moveDownButtonProps" }] : 	/* istanbul ignore next */ []);
+	moveBottomButtonProps = input(...ngDevMode ? [void 0, { debugName: "moveBottomButtonProps" }] : 	/* istanbul ignore next */ []);
+	moveToTargetProps = input(...ngDevMode ? [void 0, { debugName: "moveToTargetProps" }] : 	/* istanbul ignore next */ []);
+	moveAllToTargetProps = input(...ngDevMode ? [void 0, { debugName: "moveAllToTargetProps" }] : 	/* istanbul ignore next */ []);
+	moveToSourceProps = input(...ngDevMode ? [void 0, { debugName: "moveToSourceProps" }] : 	/* istanbul ignore next */ []);
+	moveAllToSourceProps = input(...ngDevMode ? [void 0, { debugName: "moveAllToSourceProps" }] : 	/* istanbul ignore next */ []);
+	breakpoint = model("960px", ...ngDevMode ? [{ debugName: "breakpoint" }] : 	/* istanbul ignore next */ []);
+	onMoveToSource = output();
+	onMoveAllToSource = output();
+	onMoveAllToTarget = output();
+	onMoveToTarget = output();
+	onSourceReorder = output();
+	onTargetReorder = output();
+	onSourceSelect = output();
+	onTargetSelect = output();
+	onSourceFilter = output();
+	onTargetFilter = output();
+	onFocus = output();
+	onBlur = output();
+	listViewSourceChild = viewChild("sourcelist", ...ngDevMode ? [{ debugName: "listViewSourceChild" }] : 	/* istanbul ignore next */ []);
+	listViewTargetChild = viewChild("targetlist", ...ngDevMode ? [{ debugName: "listViewTargetChild" }] : 	/* istanbul ignore next */ []);
+	sourceFilterViewChild = viewChild("sourceFilter", ...ngDevMode ? [{ debugName: "sourceFilterViewChild" }] : 	/* istanbul ignore next */ []);
+	targetFilterViewChild = viewChild("targetFilter", ...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 : void 0;
+	}
+	get moveTopAriaLabel() {
+		const topButtonAriaLabel = this.topButtonAriaLabel();
+		return topButtonAriaLabel ? topButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveTop : void 0;
+	}
+	get moveDownAriaLabel() {
+		const downButtonAriaLabel = this.downButtonAriaLabel();
+		return downButtonAriaLabel ? downButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveDown : void 0;
+	}
+	get moveBottomAriaLabel() {
+		const bottomButtonAriaLabel = this.bottomButtonAriaLabel();
+		return bottomButtonAriaLabel ? bottomButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveDown : void 0;
+	}
+	get moveToTargetAriaLabel() {
+		const rightButtonAriaLabel = this.rightButtonAriaLabel();
+		return rightButtonAriaLabel ? rightButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveToTarget : void 0;
+	}
+	get moveAllToTargetAriaLabel() {
+		const allRightButtonAriaLabel = this.allRightButtonAriaLabel();
+		return allRightButtonAriaLabel ? allRightButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveAllToTarget : void 0;
+	}
+	get moveToSourceAriaLabel() {
+		const leftButtonAriaLabel = this.leftButtonAriaLabel();
+		return leftButtonAriaLabel ? leftButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveToSource : void 0;
+	}
+	get moveAllToSourceAriaLabel() {
+		const allLeftButtonAriaLabel = this.allLeftButtonAriaLabel();
+		return allLeftButtonAriaLabel ? allLeftButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveAllToSource : void 0;
+	}
+	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()
+			};
+		}
+	}
+	itemTemplate = contentChild("item", {
+		...ngDevMode ? { debugName: "itemTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	sourceHeaderTemplate = contentChild("sourceHeader", {
+		...ngDevMode ? { debugName: "sourceHeaderTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	targetHeaderTemplate = contentChild("targetHeader", {
+		...ngDevMode ? { debugName: "targetHeaderTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	sourceFilterTemplate = contentChild("sourceFilter", {
+		...ngDevMode ? { debugName: "sourceFilterTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	targetFilterTemplate = contentChild("targetFilter", {
+		...ngDevMode ? { debugName: "targetFilterTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	emptyMessageSourceTemplate = contentChild("emptymessagesource", {
+		...ngDevMode ? { debugName: "emptyMessageSourceTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	emptyFilterMessageSourceTemplate = contentChild("emptyfiltermessagesource", {
+		...ngDevMode ? { debugName: "emptyFilterMessageSourceTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	emptyMessageTargetTemplate = contentChild("emptymessagetarget", {
+		...ngDevMode ? { debugName: "emptyMessageTargetTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	emptyFilterMessageTargetTemplate = contentChild("emptyfiltermessagetarget", {
+		...ngDevMode ? { debugName: "emptyFilterMessageTargetTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	moveUpIconTemplate = contentChild("moveupicon", {
+		...ngDevMode ? { debugName: "moveUpIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	moveTopIconTemplate = contentChild("movetopicon", {
+		...ngDevMode ? { debugName: "moveTopIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	moveDownIconTemplate = contentChild("movedownicon", {
+		...ngDevMode ? { debugName: "moveDownIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	moveBottomIconTemplate = contentChild("movebottomicon", {
+		...ngDevMode ? { debugName: "moveBottomIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	moveToTargetIconTemplate = contentChild("movetotargeticon", {
+		...ngDevMode ? { debugName: "moveToTargetIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	moveAllToTargetIconTemplate = contentChild("movealltotargeticon", {
+		...ngDevMode ? { debugName: "moveAllToTargetIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	moveToSourceIconTemplate = contentChild("movetosourceicon", {
+		...ngDevMode ? { debugName: "moveToSourceIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	moveAllToSourceIconTemplate = contentChild("movealltosourceicon", {
+		...ngDevMode ? { debugName: "moveAllToSourceIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	targetFilterIconTemplate = contentChild("targetfiltericon", {
+		...ngDevMode ? { debugName: "targetFilterIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	sourceFilterIconTemplate = contentChild("sourcefiltericon", {
+		...ngDevMode ? { debugName: "sourceFilterIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	templates = contentChildren(HelixTemplate, ...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);
+		(listType === this.SOURCE_LIST ? this.onSourceSelect : this.onTargetSelect).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) {
+				let itemsToMove = [];
+				if (this.selectedItemsTarget && this.selectedItemsTarget.length > 0 && findIndexInList(event.item.data, this.selectedItemsTarget) !== -1) itemsToMove = [...this.selectedItemsTarget];
+				else itemsToMove = [event.item.data];
+				const sortedItems = this.sortByIndexInList(itemsToMove, this.target() || []);
+				for (let item of sortedItems) {
+					const itemIndex = findIndexInList(item, this.target() || []);
+					if (itemIndex !== -1) this.target()?.splice(itemIndex, 1);
+				}
+				for (let i = 0; i < sortedItems.length; i++) this.source()?.splice(dropIndexes.currentIndex + i, 0, sortedItems[i]);
+				this.selectedItemsTarget = [];
+				if (this.keepSelection()) this.selectedItemsSource = [...this.selectedItemsSource, ...itemsToMove];
+				if (this.visibleOptionsTarget) 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) {
+				let itemsToMove = [];
+				if (this.selectedItemsSource && this.selectedItemsSource.length > 0 && findIndexInList(event.item.data, this.selectedItemsSource) !== -1) itemsToMove = [...this.selectedItemsSource];
+				else itemsToMove = [event.item.data];
+				const sortedItems = this.sortByIndexInList(itemsToMove, this.source() || []);
+				for (let item of sortedItems) {
+					const itemIndex = findIndexInList(item, this.source() || []);
+					if (itemIndex !== -1) this.source()?.splice(itemIndex, 1);
+				}
+				for (let i = 0; i < sortedItems.length; i++) this.target()?.splice(dropIndexes.currentIndex + i, 0, sortedItems[i]);
+				this.selectedItemsSource = [];
+				if (this.keepSelection()) this.selectedItemsTarget = [...this.selectedItemsTarget, ...itemsToMove];
+				if (this.visibleOptionsSource) 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);
+		}
+		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) {
+		return find(this.getListElement(listType), "li.h-picklist-item");
+	}
+	getLatestSelectedVisibleOptionIndex(visibleList, selectedItems) {
+		const latestSelectedItem = [...selectedItems].reverse().find((item) => visibleList.includes(item));
+		return latestSelectedItem !== void 0 ? 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) return findIndexInList(visibleOptions[index - 1], options) + 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;
@@ -1310,84 +862,1588 @@ class PickList extends BaseComponent {
                         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.
- */
-
+				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.2.1",
+		ngImport: i0,
+		type: PickList,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		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.2.1",
+	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 }]
+		}]
+	}
+});
+var PickListModule = class PickListModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: PickListModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: PickListModule,
+		imports: [PickList, SharedModule],
+		exports: [PickList, SharedModule]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: PickListModule,
+		imports: [
+			PickList,
+			SharedModule,
+			SharedModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: PickListModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [PickList, SharedModule],
+			exports: [PickList, SharedModule]
+		}]
+	}]
+});
 export { PickList, PickListClasses, PickListModule, PickListStyle };
-//# sourceMappingURL=gravionlabs-helix-core-picklist.mjs.map
+
+//# sourceMappingURL=gravionlabs-helix-core-picklist.mjs.map