primeng 22.1.0 → 22.1.2

package/fesm2022/primeng-picklist.mjs

@@ -1,1192 +1,742 @@
-export * from 'primeng/types/picklist';
-import * as i2 from '@angular/cdk/drag-drop';
-import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, input, inject, model, numberAttribute, booleanAttribute, output, viewChild, contentChild, computed, signal, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import * as i3 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import { uuid, findIndexInList, find, setAttribute, isEmpty } from '@primeuix/utils';
-import { FilterService } from 'primeng/api';
-import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
-import * as i1 from 'primeng/bind';
-import { Bind } from 'primeng/bind';
-import { ButtonDirective } from 'primeng/button';
-import { AngleDoubleDown } from '@primeicons/angular/angle-double-down';
-import { AngleDoubleLeft } from '@primeicons/angular/angle-double-left';
-import { AngleDoubleRight } from '@primeicons/angular/angle-double-right';
-import { AngleDoubleUp } from '@primeicons/angular/angle-double-up';
-import { AngleDown } from '@primeicons/angular/angle-down';
-import { AngleLeft } from '@primeicons/angular/angle-left';
-import { AngleRight } from '@primeicons/angular/angle-right';
-import { AngleUp } from '@primeicons/angular/angle-up';
-import { Listbox } from 'primeng/listbox';
-import { style } from '@primeuix/styles/picklist';
-import { BaseStyle } from 'primeng/base';
-
+import * as i2 from "@angular/cdk/drag-drop";
+import { DragDropModule, moveItemInArray } from "@angular/cdk/drag-drop";
+import { NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, NgModule, ViewEncapsulation, booleanAttribute, computed, contentChild, effect, inject, input, model, numberAttribute, output, signal, viewChild } from "@angular/core";
+import { toSignal } from "@angular/core/rxjs-interop";
+import * as i3 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { AngleDoubleDown } from "@primeicons/angular/angle-double-down";
+import { AngleDoubleLeft } from "@primeicons/angular/angle-double-left";
+import { AngleDoubleRight } from "@primeicons/angular/angle-double-right";
+import { AngleDoubleUp } from "@primeicons/angular/angle-double-up";
+import { AngleDown } from "@primeicons/angular/angle-down";
+import { AngleLeft } from "@primeicons/angular/angle-left";
+import { AngleRight } from "@primeicons/angular/angle-right";
+import { AngleUp } from "@primeicons/angular/angle-up";
+import { find, findIndexInList, isEmpty, setAttribute, uuid } from "@primeuix/utils";
+import { FilterService } from "primeng/api";
+import { BaseComponent, PARENT_INSTANCE } from "primeng/basecomponent";
+import * as i1 from "primeng/bind";
+import { Bind } from "primeng/bind";
+import { ButtonDirective } from "primeng/button";
+import { Listbox } from "primeng/listbox";
+import { style } from "@primeuix/styles/picklist";
+import { BaseStyle } from "primeng/base";
+export * from "primeng/types/picklist";
 const classes = {
-    root: () => ['p-picklist p-component'],
-    sourceControls: 'p-picklist-controls p-picklist-source-controls',
-    sourceListContainer: 'p-picklist-list-container p-picklist-source-list-container',
-    transferControls: 'p-picklist-controls p-picklist-transfer-controls',
-    targetListContainer: 'p-picklist-list-container p-picklist-target-list-container',
-    targetControls: 'p-picklist-controls p-picklist-target-controls'
+	root: () => ["p-picklist p-component"],
+	sourceControls: "p-picklist-controls p-picklist-source-controls",
+	sourceListContainer: "p-picklist-list-container p-picklist-source-list-container",
+	transferControls: "p-picklist-controls p-picklist-transfer-controls",
+	targetListContainer: "p-picklist-list-container p-picklist-target-list-container",
+	targetControls: "p-picklist-controls p-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.0",
+		ngImport: i0,
+		type: PickListStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		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.2", ngImport: i0, type: PickListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PickListStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", 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.0",
+	ngImport: i0,
+	type: PickListStyle,
+	decorators: [{ type: Injectable }]
+});
 var PickListClasses;
-(function (PickListClasses) {
-    /**
-     * Class name of the root element
-     */
-    PickListClasses["root"] = "p-picklist";
-    /**
-     * Class name of the source controls element
-     */
-    PickListClasses["sourceControls"] = "p-picklist-source-controls";
-    /**
-     * Class name of the source list container element
-     */
-    PickListClasses["sourceListContainer"] = "p-picklist-source-list-container";
-    /**
-     * Class name of the transfer controls element
-     */
-    PickListClasses["transferControls"] = "p-picklist-transfer-controls";
-    /**
-     * Class name of the target list container element
-     */
-    PickListClasses["targetListContainer"] = "p-picklist-target-list-container";
-    /**
-     * Class name of the target controls element
-     */
-    PickListClasses["targetControls"] = "p-picklist-target-controls";
+(function(PickListClasses) {
+	PickListClasses["root"] = "p-picklist";
+	PickListClasses["sourceControls"] = "p-picklist-source-controls";
+	PickListClasses["sourceListContainer"] = "p-picklist-source-list-container";
+	PickListClasses["transferControls"] = "p-picklist-transfer-controls";
+	PickListClasses["targetListContainer"] = "p-picklist-target-list-container";
+	PickListClasses["targetControls"] = "p-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(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { 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(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "targetHeader" }] : /* istanbul ignore next */ []));
-    /**
-     * When enabled orderlist adjusts its controls based on screen size.
-     * @group Props
-     */
-    responsive = input(false, { ...(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 */ []));
-    /**
-     * 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(false, { ...(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(false, { ...(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 });
-    /**
-     * Configuration object forwarded to the Button component.
-     * @group Props
-     */
-    buttonProps = input({ severity: 'secondary' }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "buttonProps" }] : /* istanbul ignore next */ []));
-    /**
-     * Configuration object forwarded to the move up button inside the component.
-     * @group Props
-     */
-    moveUpButtonProps = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "moveUpButtonProps" }] : /* istanbul ignore next */ []));
-    /**
-     * 	Configuration object forwarded to the move top button inside the component.
-     * @group Props
-     */
-    moveTopButtonProps = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "moveTopButtonProps" }] : /* istanbul ignore next */ []));
-    /**
-     * 	Configuration object forwarded to the move down button inside the component.
-     * @group Props
-     */
-    moveDownButtonProps = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "moveDownButtonProps" }] : /* istanbul ignore next */ []));
-    /**
-     * 	Configuration object forwarded to the move bottom button inside the component.
-     * @group Props
-     */
-    moveBottomButtonProps = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "moveBottomButtonProps" }] : /* istanbul ignore next */ []));
-    /**
-     * 	Configuration object forwarded to the move to target button inside the component.
-     * @group Props
-     */
-    moveToTargetProps = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "moveToTargetProps" }] : /* istanbul ignore next */ []));
-    /**
-     * 	Configuration object forwarded to the move all to target button inside the component.
-     * @group Props
-     */
-    moveAllToTargetProps = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "moveAllToTargetProps" }] : /* istanbul ignore next */ []));
-    /**
-     *  Configuration object forwarded to the move to source button inside the component.
-     * @group Props
-     */
-    moveToSourceProps = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "moveToSourceProps" }] : /* istanbul ignore next */ []));
-    /**
-     *  Configuration object forwarded 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 = input('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 */ []));
-    /**
-     * 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 item template, falls back to the shared item template when not defined.
-     * @param {PickListItemTemplateContext} context - item context.
-     * @see {@link PickListItemTemplateContext}
-     * @group Templates
-     */
-    sourceItemTemplate = contentChild('sourceItem', { ...(ngDevMode ? { debugName: "sourceItemTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom target item template, falls back to the shared item template when not defined.
-     * @param {PickListItemTemplateContext} context - item context.
-     * @see {@link PickListItemTemplateContext}
-     * @group Templates
-     */
-    targetItemTemplate = contentChild('targetItem', { ...(ngDevMode ? { debugName: "targetItemTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Resolved item template for the source list (source-specific or shared).
-     */
-    $sourceItemTemplate = computed(() => this.sourceItemTemplate() ?? this.itemTemplate(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "$sourceItemTemplate" }] : /* istanbul ignore next */ []));
-    /**
-     * Resolved item template for the target list (target-specific or shared).
-     */
-    $targetItemTemplate = computed(() => this.targetItemTemplate() ?? this.itemTemplate(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "$targetItemTemplate" }] : /* istanbul ignore next */ []));
-    /**
-     * 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 });
-    // Computed button props
-    moveUpBtnProps = computed(() => ({ ...this.buttonProps(), ...this.moveUpButtonProps() }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveUpBtnProps" }] : /* istanbul ignore next */ []));
-    moveTopBtnProps = computed(() => ({ ...this.buttonProps(), ...this.moveTopButtonProps() }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveTopBtnProps" }] : /* istanbul ignore next */ []));
-    moveDownBtnProps = computed(() => ({ ...this.buttonProps(), ...this.moveDownButtonProps() }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveDownBtnProps" }] : /* istanbul ignore next */ []));
-    moveBottomBtnProps = computed(() => ({ ...this.buttonProps(), ...this.moveBottomButtonProps() }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveBottomBtnProps" }] : /* istanbul ignore next */ []));
-    moveToTargetBtnProps = computed(() => ({ ...this.buttonProps(), ...this.moveToTargetProps() }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveToTargetBtnProps" }] : /* istanbul ignore next */ []));
-    moveAllToTargetBtnProps = computed(() => ({ ...this.buttonProps(), ...this.moveAllToTargetProps() }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveAllToTargetBtnProps" }] : /* istanbul ignore next */ []));
-    moveToSourceBtnProps = computed(() => ({ ...this.buttonProps(), ...this.moveToSourceProps() }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveToSourceBtnProps" }] : /* istanbul ignore next */ []));
-    moveAllToSourceBtnProps = computed(() => ({ ...this.buttonProps(), ...this.moveAllToSourceProps() }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveAllToSourceBtnProps" }] : /* istanbul ignore next */ []));
-    // Translation
-    translation = toSignal(this.config.translationObserver, { initialValue: this.config.translation });
-    moveUpAriaLabel = computed(() => this.upButtonAriaLabel() || this.translation()?.aria?.moveUp, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveUpAriaLabel" }] : /* istanbul ignore next */ []));
-    moveTopAriaLabel = computed(() => this.topButtonAriaLabel() || this.translation()?.aria?.moveTop, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveTopAriaLabel" }] : /* istanbul ignore next */ []));
-    moveDownAriaLabel = computed(() => this.downButtonAriaLabel() || this.translation()?.aria?.moveDown, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveDownAriaLabel" }] : /* istanbul ignore next */ []));
-    moveBottomAriaLabel = computed(() => this.bottomButtonAriaLabel() || this.translation()?.aria?.moveDown, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveBottomAriaLabel" }] : /* istanbul ignore next */ []));
-    moveToTargetAriaLabel = computed(() => this.rightButtonAriaLabel() || this.translation()?.aria?.moveToTarget, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveToTargetAriaLabel" }] : /* istanbul ignore next */ []));
-    moveAllToTargetAriaLabel = computed(() => this.allRightButtonAriaLabel() || this.translation()?.aria?.moveAllToTarget, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveAllToTargetAriaLabel" }] : /* istanbul ignore next */ []));
-    moveToSourceAriaLabel = computed(() => this.leftButtonAriaLabel() || this.translation()?.aria?.moveToSource, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveToSourceAriaLabel" }] : /* istanbul ignore next */ []));
-    moveAllToSourceAriaLabel = computed(() => this.allLeftButtonAriaLabel() || this.translation()?.aria?.moveAllToSource, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moveAllToSourceAriaLabel" }] : /* istanbul ignore next */ []));
-    idSource = computed(() => this.id + '_source', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "idSource" }] : /* istanbul ignore next */ []));
-    idTarget = computed(() => this.id + '_target', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "idTarget" }] : /* istanbul ignore next */ []));
-    get targetOptions() {
-        return [...(this.target() || [])];
-    }
-    get sourceOptions() {
-        return [...(this.source() || [])];
-    }
-    visibleOptionsSource;
-    visibleOptionsTarget;
-    selectedItemsSource = [];
-    selectedItemsTarget = [];
-    reorderedListElement;
-    movedUp;
-    movedDown;
-    itemTouched;
-    styleElement;
-    id = uuid('pn_id_');
-    filterValueSource;
-    filterValueTarget;
-    sourceFilterOptions;
-    targetFilterOptions;
-    SOURCE_LIST = -1;
-    TARGET_LIST = 1;
-    media;
-    viewChanged = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "viewChanged" }] : /* istanbul ignore next */ []));
-    _componentStyle = inject(PickListStyle);
-    mediaChangeListener = null;
-    filterService = inject(FilterService);
-    constructor() {
-        super();
-        effect((onCleanup) => {
-            this.breakpoint();
-            if (isPlatformBrowser(this.platformId) && this.responsive()) {
-                this.createStyle();
-                this.initMedia();
-                onCleanup(() => {
-                    this.destroyStyle();
-                    this.destroyMedia();
-                });
-            }
-        });
-    }
-    onInit() {
-        if (this.filterBy()) {
-            this.sourceFilterOptions = {
-                filter: (value) => this.filterSource(value),
-                reset: () => this.resetSourceFilter()
-            };
-            this.targetFilterOptions = {
-                filter: (value) => this.filterTarget(value),
-                reset: () => this.resetTargetFilter()
-            };
-        }
-    }
-    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) {
-                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) {
-        let listElemet = this.getListElement(listType);
-        return find(listElemet, 'li.p-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;
-        const el = this.sourceFilterViewChild();
-        if (el) {
-            el.nativeElement.value = '';
-        }
-    }
-    resetTargetFilter() {
-        this.visibleOptionsTarget = null;
-        this.filterValueTarget = null;
-        const el = this.targetFilterViewChild();
-        if (el) {
-            el.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.set(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.set(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;
+	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(...ngDevMode ? [void 0, { 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(...ngDevMode ? [void 0, { debugName: "targetHeader" }] : /* istanbul ignore next */ []);
+	responsive = input(false, {
+		...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 */ []);
+	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(false, {
+		...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(false, {
+		...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 = input("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 */ []);
+	itemTemplate = contentChild("item", {
+		...ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	sourceItemTemplate = contentChild("sourceItem", {
+		...ngDevMode ? { debugName: "sourceItemTemplate" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	targetItemTemplate = contentChild("targetItem", {
+		...ngDevMode ? { debugName: "targetItemTemplate" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	$sourceItemTemplate = computed(() => this.sourceItemTemplate() ?? this.itemTemplate(), ...ngDevMode ? [{ debugName: "$sourceItemTemplate" }] : /* istanbul ignore next */ []);
+	$targetItemTemplate = computed(() => this.targetItemTemplate() ?? this.itemTemplate(), ...ngDevMode ? [{ debugName: "$targetItemTemplate" }] : /* istanbul ignore next */ []);
+	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
+	});
+	moveUpBtnProps = computed(() => ({
+		...this.buttonProps(),
+		...this.moveUpButtonProps()
+	}), ...ngDevMode ? [{ debugName: "moveUpBtnProps" }] : /* istanbul ignore next */ []);
+	moveTopBtnProps = computed(() => ({
+		...this.buttonProps(),
+		...this.moveTopButtonProps()
+	}), ...ngDevMode ? [{ debugName: "moveTopBtnProps" }] : /* istanbul ignore next */ []);
+	moveDownBtnProps = computed(() => ({
+		...this.buttonProps(),
+		...this.moveDownButtonProps()
+	}), ...ngDevMode ? [{ debugName: "moveDownBtnProps" }] : /* istanbul ignore next */ []);
+	moveBottomBtnProps = computed(() => ({
+		...this.buttonProps(),
+		...this.moveBottomButtonProps()
+	}), ...ngDevMode ? [{ debugName: "moveBottomBtnProps" }] : /* istanbul ignore next */ []);
+	moveToTargetBtnProps = computed(() => ({
+		...this.buttonProps(),
+		...this.moveToTargetProps()
+	}), ...ngDevMode ? [{ debugName: "moveToTargetBtnProps" }] : /* istanbul ignore next */ []);
+	moveAllToTargetBtnProps = computed(() => ({
+		...this.buttonProps(),
+		...this.moveAllToTargetProps()
+	}), ...ngDevMode ? [{ debugName: "moveAllToTargetBtnProps" }] : /* istanbul ignore next */ []);
+	moveToSourceBtnProps = computed(() => ({
+		...this.buttonProps(),
+		...this.moveToSourceProps()
+	}), ...ngDevMode ? [{ debugName: "moveToSourceBtnProps" }] : /* istanbul ignore next */ []);
+	moveAllToSourceBtnProps = computed(() => ({
+		...this.buttonProps(),
+		...this.moveAllToSourceProps()
+	}), ...ngDevMode ? [{ debugName: "moveAllToSourceBtnProps" }] : /* istanbul ignore next */ []);
+	translation = toSignal(this.config.translationObserver, { initialValue: this.config.translation });
+	moveUpAriaLabel = computed(() => this.upButtonAriaLabel() || this.translation()?.aria?.moveUp, ...ngDevMode ? [{ debugName: "moveUpAriaLabel" }] : /* istanbul ignore next */ []);
+	moveTopAriaLabel = computed(() => this.topButtonAriaLabel() || this.translation()?.aria?.moveTop, ...ngDevMode ? [{ debugName: "moveTopAriaLabel" }] : /* istanbul ignore next */ []);
+	moveDownAriaLabel = computed(() => this.downButtonAriaLabel() || this.translation()?.aria?.moveDown, ...ngDevMode ? [{ debugName: "moveDownAriaLabel" }] : /* istanbul ignore next */ []);
+	moveBottomAriaLabel = computed(() => this.bottomButtonAriaLabel() || this.translation()?.aria?.moveDown, ...ngDevMode ? [{ debugName: "moveBottomAriaLabel" }] : /* istanbul ignore next */ []);
+	moveToTargetAriaLabel = computed(() => this.rightButtonAriaLabel() || this.translation()?.aria?.moveToTarget, ...ngDevMode ? [{ debugName: "moveToTargetAriaLabel" }] : /* istanbul ignore next */ []);
+	moveAllToTargetAriaLabel = computed(() => this.allRightButtonAriaLabel() || this.translation()?.aria?.moveAllToTarget, ...ngDevMode ? [{ debugName: "moveAllToTargetAriaLabel" }] : /* istanbul ignore next */ []);
+	moveToSourceAriaLabel = computed(() => this.leftButtonAriaLabel() || this.translation()?.aria?.moveToSource, ...ngDevMode ? [{ debugName: "moveToSourceAriaLabel" }] : /* istanbul ignore next */ []);
+	moveAllToSourceAriaLabel = computed(() => this.allLeftButtonAriaLabel() || this.translation()?.aria?.moveAllToSource, ...ngDevMode ? [{ debugName: "moveAllToSourceAriaLabel" }] : /* istanbul ignore next */ []);
+	idSource = computed(() => this.id + "_source", ...ngDevMode ? [{ debugName: "idSource" }] : /* istanbul ignore next */ []);
+	idTarget = computed(() => this.id + "_target", ...ngDevMode ? [{ debugName: "idTarget" }] : /* istanbul ignore next */ []);
+	get targetOptions() {
+		return [...this.target() || []];
+	}
+	get sourceOptions() {
+		return [...this.source() || []];
+	}
+	visibleOptionsSource;
+	visibleOptionsTarget;
+	selectedItemsSource = [];
+	selectedItemsTarget = [];
+	reorderedListElement;
+	movedUp;
+	movedDown;
+	itemTouched;
+	styleElement;
+	id = uuid("pn_id_");
+	filterValueSource;
+	filterValueTarget;
+	sourceFilterOptions;
+	targetFilterOptions;
+	SOURCE_LIST = -1;
+	TARGET_LIST = 1;
+	media;
+	viewChanged = signal(false, ...ngDevMode ? [{ debugName: "viewChanged" }] : /* istanbul ignore next */ []);
+	_componentStyle = inject(PickListStyle);
+	mediaChangeListener = null;
+	filterService = inject(FilterService);
+	constructor() {
+		super();
+		effect((onCleanup) => {
+			this.breakpoint();
+			if (isPlatformBrowser(this.platformId) && this.responsive()) {
+				this.createStyle();
+				this.initMedia();
+				onCleanup(() => {
+					this.destroyStyle();
+					this.destroyMedia();
+				});
+			}
+		});
+	}
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptm("host"));
+	}
+	onInit() {
+		if (this.filterBy()) {
+			this.sourceFilterOptions = {
+				filter: (value) => this.filterSource(value),
+				reset: () => this.resetSourceFilter()
+			};
+			this.targetFilterOptions = {
+				filter: (value) => this.filterTarget(value),
+				reset: () => this.resetTargetFilter()
+			};
+		}
+	}
+	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);
+				}
+			}
+			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) {
+		let listElemet = this.getListElement(listType);
+		return find(listElemet, "li.p-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;
+		const el = this.sourceFilterViewChild();
+		if (el) el.nativeElement.value = "";
+	}
+	resetTargetFilter() {
+		this.visibleOptionsTarget = null;
+		this.filterValueTarget = null;
+		const el = this.targetFilterViewChild();
+		if (el) el.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.set(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.set(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()}) {
                     .p-picklist[${this.id}] {
                         flex-direction: column;
@@ -1196,41 +746,618 @@ 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;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PickList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: PickList, isStandalone: true, selector: "p-picklist, p-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 }, 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", 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: "sourceItemTemplate", first: true, predicate: ["sourceItem"], isSignal: true }, { propertyName: "targetItemTemplate", first: true, predicate: ["targetItem"], 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 }], 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: `
+				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;
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: PickList,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: PickList,
+		isStandalone: true,
+		selector: "p-picklist, p-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
+			},
+			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",
+			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: "sourceItemTemplate",
+				first: true,
+				predicate: ["sourceItem"],
+				isSignal: true
+			},
+			{
+				propertyName: "targetItemTemplate",
+				first: true,
+				predicate: ["targetItem"],
+				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
+			}
+		],
+		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 [style]="style()" [class]="cx('root')" cdkDropListGroup [pBind]="ptm('root')">
             @if (showSourceControls()) {
                 <div [class]="cx('sourceControls')" [pBind]="ptm('sourceControls')" [attr.data-pc-group-section]="'controls'">
@@ -1593,15 +1720,220 @@ class PickList extends BaseComponent {
                 </div>
             }
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: AngleDoubleDown, selector: "svg[data-p-icon=\"angle-double-down\"]" }, { kind: "component", type: AngleDoubleLeft, selector: "svg[data-p-icon=\"angle-double-left\"]" }, { kind: "component", type: AngleDoubleRight, selector: "svg[data-p-icon=\"angle-double-right\"]" }, { kind: "component", type: AngleDoubleUp, selector: "svg[data-p-icon=\"angle-double-up\"]" }, { kind: "component", type: AngleDown, selector: "svg[data-p-icon=\"angle-down\"]" }, { kind: "component", type: AngleLeft, selector: "svg[data-p-icon=\"angle-left\"]" }, { kind: "component", type: AngleRight, selector: "svg[data-p-icon=\"angle-right\"]" }, { kind: "component", type: AngleUp, selector: "svg[data-p-icon=\"angle-up\"]" }, { kind: "component", type: Listbox, selector: "p-listbox, p-list-box", inputs: ["hostName", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PickList, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p-picklist, p-pick-list',
-                    standalone: true,
-                    imports: [NgTemplateOutlet, ButtonDirective, DragDropModule, AngleDoubleDown, AngleDoubleLeft, AngleDoubleRight, AngleDoubleUp, AngleDown, AngleLeft, AngleRight, AngleUp, Listbox, FormsModule, Bind],
-                    template: `
+    `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "directive",
+				type: ButtonDirective,
+				selector: "[pButton]",
+				inputs: [
+					"pButton",
+					"pButtonPT",
+					"pButtonUnstyled",
+					"hostName",
+					"text",
+					"plain",
+					"raised",
+					"size",
+					"outlined",
+					"link",
+					"rounded",
+					"fluid",
+					"variant",
+					"iconOnly",
+					"loading",
+					"severity"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: DragDropModule
+			},
+			{
+				kind: "directive",
+				type: i2.CdkDropListGroup,
+				selector: "[cdkDropListGroup]",
+				inputs: ["cdkDropListGroupDisabled"],
+				exportAs: ["cdkDropListGroup"]
+			},
+			{
+				kind: "component",
+				type: AngleDoubleDown,
+				selector: "svg[data-p-icon=\"angle-double-down\"]"
+			},
+			{
+				kind: "component",
+				type: AngleDoubleLeft,
+				selector: "svg[data-p-icon=\"angle-double-left\"]"
+			},
+			{
+				kind: "component",
+				type: AngleDoubleRight,
+				selector: "svg[data-p-icon=\"angle-double-right\"]"
+			},
+			{
+				kind: "component",
+				type: AngleDoubleUp,
+				selector: "svg[data-p-icon=\"angle-double-up\"]"
+			},
+			{
+				kind: "component",
+				type: AngleDown,
+				selector: "svg[data-p-icon=\"angle-down\"]"
+			},
+			{
+				kind: "component",
+				type: AngleLeft,
+				selector: "svg[data-p-icon=\"angle-left\"]"
+			},
+			{
+				kind: "component",
+				type: AngleRight,
+				selector: "svg[data-p-icon=\"angle-right\"]"
+			},
+			{
+				kind: "component",
+				type: AngleUp,
+				selector: "svg[data-p-icon=\"angle-up\"]"
+			},
+			{
+				kind: "component",
+				type: Listbox,
+				selector: "p-listbox, p-list-box",
+				inputs: [
+					"hostName",
+					"id",
+					"searchMessage",
+					"emptySelectionMessage",
+					"selectionMessage",
+					"autoOptionFocus",
+					"ariaLabel",
+					"selectOnFocus",
+					"searchLocale",
+					"focusOnHover",
+					"filterMessage",
+					"filterFields",
+					"lazy",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"virtualScrollOptions",
+					"scrollHeight",
+					"tabindex",
+					"multiple",
+					"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: i3.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i3.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "directive",
+				type: Bind,
+				selector: "[pBind]",
+				inputs: ["pBind"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: PickList,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "p-picklist, p-pick-list",
+			standalone: true,
+			imports: [
+				NgTemplateOutlet,
+				ButtonDirective,
+				DragDropModule,
+				AngleDoubleDown,
+				AngleDoubleLeft,
+				AngleDoubleRight,
+				AngleDoubleUp,
+				AngleDown,
+				AngleLeft,
+				AngleRight,
+				AngleUp,
+				Listbox,
+				FormsModule,
+				Bind
+			],
+			template: `
         <div [style]="style()" [class]="cx('root')" cdkDropListGroup [pBind]="ptm('root')">
             @if (showSourceControls()) {
                 <div [class]="cx('sourceControls')" [pBind]="ptm('sourceControls')" [attr.data-pc-group-section]="'controls'">
@@ -1965,28 +2297,713 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
             }
         </div>
     `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    providers: [PickListStyle, { provide: PARENT_INSTANCE, useExisting: PickList }, { provide: PICKLIST_INSTANCE, useExisting: PickList }],
-                    hostDirectives: [Bind]
-                }]
-        }], ctorParameters: () => [], 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 }] }], 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 }] }], 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 }] }], sourceItemTemplate: [{ type: i0.ContentChild, args: ['sourceItem', { ...{ descendants: false }, isSignal: true }] }], targetItemTemplate: [{ type: i0.ContentChild, args: ['targetItem', { ...{ 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 }] }] } });
-class PickListModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: PickListModule, imports: [PickList], exports: [PickList] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PickListModule, imports: [PickList] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PickListModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [PickList],
-                    exports: [PickList]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			providers: [
+				PickListStyle,
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: PickList
+				},
+				{
+					provide: PICKLIST_INSTANCE,
+					useExisting: PickList
+				}
+			],
+			hostDirectives: [Bind]
+		}]
+	}],
+	ctorParameters: () => [],
+	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
+			}]
+		}],
+		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
+			}]
+		}],
+		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
+			}]
+		}],
+		sourceItemTemplate: [{
+			type: i0.ContentChild,
+			args: ["sourceItem", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		targetItemTemplate: [{
+			type: i0.ContentChild,
+			args: ["targetItem", {
+				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
+			}]
+		}]
+	}
+});
+var PickListModule = class PickListModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: PickListModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: PickListModule,
+		imports: [PickList],
+		exports: [PickList]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: PickListModule,
+		imports: [PickList]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: PickListModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [PickList],
+			exports: [PickList]
+		}]
+	}]
+});
 export { PickList, PickListClasses, PickListModule, PickListStyle };
-//# sourceMappingURL=primeng-picklist.mjs.map
+
+//# sourceMappingURL=primeng-picklist.mjs.map