primeng 18.0.0-beta.2 → 18.0.0-beta.3

package/fesm2022/primeng-picklist.mjs

@@ -306,6 +306,51 @@ class PickList extends BaseComponent {
      * @group Props
      */
     autoOptionFocus = true;
+    /**
+     * Used to pass all properties of the ButtonProps to the Button component.
+     * @group Props
+     */
+    buttonProps = { severity: 'secondary' };
+    /**
+     * Used to pass all properties of the ButtonProps to the move up button inside the component.
+     * @group Props
+     */
+    moveUpButtonProps;
+    /**
+     * 	Used to pass all properties of the ButtonProps to the move top button inside the component.
+     * @group Props
+     */
+    moveTopButtonProps;
+    /**
+     * 	Used to pass all properties of the ButtonProps to the move down button inside the component.
+     * @group Props
+     */
+    moveDownButtonProps;
+    /**
+     * 	Used to pass all properties of the ButtonProps to the move bottom button inside the component.
+     * @group Props
+     */
+    moveBottomButtonProps;
+    /**
+     * 	Used to pass all properties of the ButtonProps to the move to target button inside the component.
+     * @group Props
+     */
+    moveToTargetProps;
+    /**
+     * 	Used to pass all properties of the ButtonProps to the move all to target button inside the component.
+     * @group Props
+     */
+    moveAllToTargetProps;
+    /**
+     *  Used to pass all properties of the ButtonProps to the move to source button inside the component.
+     * @group Props
+     */
+    moveToSourceProps;
+    /**
+     *  Used to pass all properties of the ButtonProps to the move all to source button inside the component.
+     * @group Props
+     */
+    moveAllToSourceProps;
     /**
      * Indicates the width of the screen at which the component should change its behavior.
      * @group Props
@@ -399,6 +444,28 @@ class PickList extends BaseComponent {
     sourceFilterViewChild;
     targetFilterViewChild;
     templates;
+    getButtonProps(direction) {
+        switch (direction) {
+            case 'moveup':
+                return { ...this.buttonProps, ...this.moveUpButtonProps };
+            case 'movetop':
+                return { ...this.buttonProps, ...this.moveTopButtonProps };
+            case 'movedown':
+                return { ...this.buttonProps, ...this.moveDownButtonProps };
+            case 'movebottom':
+                return { ...this.buttonProps, ...this.moveBottomButtonProps };
+            case 'movetotarget':
+                return { ...this.buttonProps, ...this.moveToTargetProps };
+            case 'movealltotarget':
+                return { ...this.buttonProps, ...this.moveAllToTargetProps };
+            case 'movetosource':
+                return { ...this.buttonProps, ...this.moveToSourceProps };
+            case 'movealltosource':
+                return { ...this.buttonProps, ...this.moveAllToSourceProps };
+            default:
+                return this.buttonProps;
+        }
+    }
     get moveUpAriaLabel() {
         return this.upButtonAriaLabel
             ? this.upButtonAriaLabel
@@ -540,6 +607,9 @@ class PickList extends BaseComponent {
                 case 'item':
                     this.itemTemplate = item.template;
                     break;
+                case 'option':
+                    this.itemTemplate = item.template;
+                    break;
                 case 'sourceHeader':
                     this.sourceHeaderTemplate = item.template;
                     break;
@@ -1238,23 +1308,13 @@ class PickList extends BaseComponent {
                 this.renderer.appendChild(this.document.head, this.styleElement);
                 let innerHTML = `
                 @media screen and (max-width: ${this.breakpoint}) {
-                    .p-picklist[${this.id}] {
+                    .p-picklist[${this.attrSelector}] {
                         flex-direction: column;
                     }
 
-                    .p-picklist[${this.id}] .p-picklist-buttons {
-                        padding: var(--content-padding);
+                    .p-picklist[${this.attrSelector}] .p-picklist-controls {
                         flex-direction: row;
                     }
-
-                    .p-picklist[${this.id}] .p-picklist-buttons .p-button {
-                        margin-right: var(--inline-spacing);
-                        margin-bottom: 0;
-                    }
-
-                    .p-picklist[${this.id}] .p-picklist-buttons .p-button:last-child {
-                        margin-right: 0;
-                    }
                 }`;
                 this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML);
                 DomHandler.setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
@@ -1296,7 +1356,7 @@ class PickList extends BaseComponent {
         super.ngOnDestroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PickList, deps: [{ token: i1.FilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: PickList, selector: "p-pickList, p-picklist", inputs: { source: "source", target: "target", sourceHeader: "sourceHeader", tabindex: ["tabindex", "tabindex", numberAttribute], rightButtonAriaLabel: "rightButtonAriaLabel", leftButtonAriaLabel: "leftButtonAriaLabel", allRightButtonAriaLabel: "allRightButtonAriaLabel", allLeftButtonAriaLabel: "allLeftButtonAriaLabel", upButtonAriaLabel: "upButtonAriaLabel", downButtonAriaLabel: "downButtonAriaLabel", topButtonAriaLabel: "topButtonAriaLabel", bottomButtonAriaLabel: "bottomButtonAriaLabel", targetHeader: "targetHeader", responsive: ["responsive", "responsive", booleanAttribute], filterBy: "filterBy", filterLocale: "filterLocale", trackBy: "trackBy", sourceTrackBy: "sourceTrackBy", targetTrackBy: "targetTrackBy", showSourceFilter: ["showSourceFilter", "showSourceFilter", booleanAttribute], showTargetFilter: ["showTargetFilter", "showTargetFilter", booleanAttribute], metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], dragdrop: ["dragdrop", "dragdrop", booleanAttribute], style: "style", styleClass: "styleClass", sourceStyle: "sourceStyle", targetStyle: "targetStyle", showSourceControls: ["showSourceControls", "showSourceControls", booleanAttribute], showTargetControls: ["showTargetControls", "showTargetControls", booleanAttribute], sourceFilterPlaceholder: "sourceFilterPlaceholder", targetFilterPlaceholder: "targetFilterPlaceholder", disabled: ["disabled", "disabled", booleanAttribute], ariaSourceFilterLabel: "ariaSourceFilterLabel", ariaTargetFilterLabel: "ariaTargetFilterLabel", filterMatchMode: "filterMatchMode", stripedRows: ["stripedRows", "stripedRows", booleanAttribute], keepSelection: ["keepSelection", "keepSelection", booleanAttribute], scrollHeight: "scrollHeight", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], breakpoint: "breakpoint" }, outputs: { 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], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listViewSourceChild", first: true, predicate: ["sourcelist"], descendants: true }, { propertyName: "listViewTargetChild", first: true, predicate: ["targetlist"], descendants: true }, { propertyName: "sourceFilterViewChild", first: true, predicate: ["sourceFilter"], descendants: true }, { propertyName: "targetFilterViewChild", first: true, predicate: ["targetFilter"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: PickList, selector: "p-pickList, p-picklist", inputs: { source: "source", target: "target", sourceHeader: "sourceHeader", tabindex: ["tabindex", "tabindex", numberAttribute], rightButtonAriaLabel: "rightButtonAriaLabel", leftButtonAriaLabel: "leftButtonAriaLabel", allRightButtonAriaLabel: "allRightButtonAriaLabel", allLeftButtonAriaLabel: "allLeftButtonAriaLabel", upButtonAriaLabel: "upButtonAriaLabel", downButtonAriaLabel: "downButtonAriaLabel", topButtonAriaLabel: "topButtonAriaLabel", bottomButtonAriaLabel: "bottomButtonAriaLabel", targetHeader: "targetHeader", responsive: ["responsive", "responsive", booleanAttribute], filterBy: "filterBy", filterLocale: "filterLocale", trackBy: "trackBy", sourceTrackBy: "sourceTrackBy", targetTrackBy: "targetTrackBy", showSourceFilter: ["showSourceFilter", "showSourceFilter", booleanAttribute], showTargetFilter: ["showTargetFilter", "showTargetFilter", booleanAttribute], metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], dragdrop: ["dragdrop", "dragdrop", booleanAttribute], style: "style", styleClass: "styleClass", sourceStyle: "sourceStyle", targetStyle: "targetStyle", showSourceControls: ["showSourceControls", "showSourceControls", booleanAttribute], showTargetControls: ["showTargetControls", "showTargetControls", booleanAttribute], sourceFilterPlaceholder: "sourceFilterPlaceholder", targetFilterPlaceholder: "targetFilterPlaceholder", disabled: ["disabled", "disabled", booleanAttribute], ariaSourceFilterLabel: "ariaSourceFilterLabel", ariaTargetFilterLabel: "ariaTargetFilterLabel", filterMatchMode: "filterMatchMode", stripedRows: ["stripedRows", "stripedRows", booleanAttribute], keepSelection: ["keepSelection", "keepSelection", booleanAttribute], scrollHeight: "scrollHeight", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], buttonProps: "buttonProps", moveUpButtonProps: "moveUpButtonProps", moveTopButtonProps: "moveTopButtonProps", moveDownButtonProps: "moveDownButtonProps", moveBottomButtonProps: "moveBottomButtonProps", moveToTargetProps: "moveToTargetProps", moveAllToTargetProps: "moveAllToTargetProps", moveToSourceProps: "moveToSourceProps", moveAllToSourceProps: "moveAllToSourceProps", breakpoint: "breakpoint" }, outputs: { 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], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listViewSourceChild", first: true, predicate: ["sourcelist"], descendants: true }, { propertyName: "listViewTargetChild", first: true, predicate: ["targetlist"], descendants: true }, { propertyName: "sourceFilterViewChild", first: true, predicate: ["sourceFilter"], descendants: true }, { propertyName: "targetFilterViewChild", first: true, predicate: ["targetFilter"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <div
             [class]="styleClass"
             [ngStyle]="style"
@@ -1316,10 +1376,12 @@ class PickList extends BaseComponent {
                     [attr.aria-label]="moveUpAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="sourceMoveDisabled()"
                     (click)="moveUp(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)"
                     [attr.data-pc-section]="'sourceMoveUpButton'"
+                    [buttonProps]="getButtonProps('moveup')"
                 >
                     <AngleUpIcon *ngIf="!moveUpIconTemplate" [attr.data-pc-section]="'moveupicon'" />
                     <ng-template *ngTemplateOutlet="moveUpIconTemplate"></ng-template>
@@ -1329,10 +1391,12 @@ class PickList extends BaseComponent {
                     [attr.aria-label]="moveTopAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="sourceMoveDisabled()"
                     (click)="moveTop(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)"
                     [attr.data-pc-section]="'sourceMoveTopButton'"
+                    [buttonProps]="getButtonProps('movetop')"
                 >
                     <AngleDoubleUpIcon *ngIf="!moveTopIconTemplate" [attr.data-pc-section]="'movetopicon'" />
                     <ng-template *ngTemplateOutlet="moveTopIconTemplate"></ng-template>
@@ -1342,10 +1406,12 @@ class PickList extends BaseComponent {
                     [attr.aria-label]="moveDownAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="sourceMoveDisabled()"
                     (click)="moveDown(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)"
                     [attr.data-pc-section]="'sourceMoveDownButton'"
+                    [buttonProps]="getButtonProps('movedown')"
                 >
                     <AngleDownIcon *ngIf="!moveDownIconTemplate" [attr.data-pc-section]="'movedownicon'" />
                     <ng-template *ngTemplateOutlet="moveDownIconTemplate"></ng-template>
@@ -1355,10 +1421,12 @@ class PickList extends BaseComponent {
                     [attr.aria-label]="moveBottomAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="sourceMoveDisabled()"
                     (click)="moveBottom(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)"
                     [attr.data-pc-section]="'sourceMoveBottomButton'"
+                    [buttonProps]="getButtonProps('movebottom')"
                 >
                     <AngleDoubleDownIcon *ngIf="!moveBottomIconTemplate" [attr.data-pc-section]="'movebottomicon'" />
                     <ng-template *ngTemplateOutlet="moveBottomIconTemplate"></ng-template>
@@ -1387,12 +1455,23 @@ class PickList extends BaseComponent {
                     [metaKeySelection]="metaKeySelection"
                     [scrollHeight]="scrollHeight"
                     [autoOptionFocus]="autoOptionFocus"
+                    [filter]="filterBy"
+                    [filterBy]="filterBy"
+                    [filterLocale]="filterLocale"
+                    [filterPlaceHolder]="sourceFilterPlaceholder"
                 >
                     <ng-container *ngIf="sourceHeaderTemplate">
                         <ng-template pTemplate="header">
                             <ng-template *ngTemplateOutlet="headerTemplate"></ng-template>
                         </ng-template>
                     </ng-container>
+                    <ng-container *ngIf="itemTemplate">
+                        <ng-template pTemplate="item" let-item let-index="index" let-selected="selected">
+                            <ng-container
+                                *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: index, selected: selected }"
+                            ></ng-container>
+                        </ng-template>
+                    </ng-container>
                 </p-listbox>
             </div>
             <div
@@ -1405,10 +1484,12 @@ class PickList extends BaseComponent {
                     [attr.aria-label]="moveToTargetAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="moveRightDisabled()"
                     (click)="moveRight()"
                     [attr.data-pc-section]="'moveToTargetButton'"
+                    [buttonProps]="getButtonProps('movetotarget')"
                 >
                     <ng-container *ngIf="!moveToTargetIconTemplate">
                         <AngleRightIcon *ngIf="!viewChanged" [attr.data-pc-section]="'movetotargeticon'" />
@@ -1421,10 +1502,12 @@ class PickList extends BaseComponent {
                     [attr.aria-label]="moveAllToTargetAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="moveAllRightDisabled()"
                     (click)="moveAllRight()"
                     [attr.data-pc-section]="'moveAllToTargetButton'"
+                    [buttonProps]="getButtonProps('movealltotarget')"
                 >
                     <ng-container *ngIf="!moveAllToTargetIconTemplate">
                         <AngleDoubleRightIcon *ngIf="!viewChanged" [attr.data-pc-section]="'movealltotargeticon'" />
@@ -1437,10 +1520,12 @@ class PickList extends BaseComponent {
                     [attr.aria-label]="moveToSourceAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="moveLeftDisabled()"
                     (click)="moveLeft()"
                     [attr.data-pc-section]="'moveToSourceButton'"
+                    [buttonProps]="getButtonProps('movetosource')"
                 >
                     <ng-container *ngIf="!moveToSourceIconTemplate">
                         <AngleLeftIcon *ngIf="!viewChanged" [attr.data-pc-section]="'movedownsourceticon'" />
@@ -1453,10 +1538,12 @@ class PickList extends BaseComponent {
                     [attr.aria-label]="moveAllToSourceAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="moveAllLeftDisabled()"
                     (click)="moveAllLeft()"
                     [attr.data-pc-section]="'moveAllToSourceButton'"
+                    [buttonProps]="getButtonProps('movealltosource')"
                 >
                     <ng-container *ngIf="!moveAllToSourceIconTemplate">
                         <AngleDoubleLeftIcon *ngIf="!viewChanged" [attr.data-pc-section]="'movealltosourceticon'" />
@@ -1488,12 +1575,23 @@ class PickList extends BaseComponent {
                     [metaKeySelection]="metaKeySelection"
                     [scrollHeight]="scrollHeight"
                     [autoOptionFocus]="autoOptionFocus"
+                    [filter]="filterBy"
+                    [filterBy]="filterBy"
+                    [filterLocale]="filterLocale"
+                    [filterPlaceHolder]="targetFilterPlaceholder"
                 >
                     <ng-container *ngIf="targetHeaderTemplate">
                         <ng-template pTemplate="header">
                             <ng-template *ngTemplateOutlet="headerTemplate"></ng-template>
                         </ng-template>
                     </ng-container>
+                    <ng-container *ngIf="itemTemplate">
+                        <ng-template pTemplate="item" let-item let-index="index" let-selected="selected">
+                            <ng-container
+                                *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: index, selected: selected }"
+                            ></ng-container>
+                        </ng-template>
+                    </ng-container>
                 </p-listbox>
             </div>
             <div
@@ -1507,10 +1605,12 @@ class PickList extends BaseComponent {
                     [attr.aria-label]="moveUpAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="targetMoveDisabled()"
                     (click)="moveUp(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)"
                     [attr.data-pc-section]="'targetMoveUpButton'"
+                    [buttonProps]="getButtonProps('moveup')"
                 >
                     <AngleUpIcon *ngIf="!moveUpIconTemplate" [attr.data-pc-section]="'moveupicon'" />
                     <ng-template *ngTemplateOutlet="moveUpIconTemplate"></ng-template>
@@ -1520,10 +1620,12 @@ class PickList extends BaseComponent {
                     [attr.aria-label]="moveTopAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="targetMoveDisabled()"
                     (click)="moveTop(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)"
                     [attr.data-pc-section]="'targetMoveTopButton'"
+                    [buttonProps]="getButtonProps('movetop')"
                 >
                     <AngleDoubleUpIcon *ngIf="!moveTopIconTemplate" [attr.data-pc-section]="'movetopicon'" />
                     <ng-template *ngTemplateOutlet="moveTopIconTemplate"></ng-template>
@@ -1533,10 +1635,12 @@ class PickList extends BaseComponent {
                     [attr.aria-label]="moveDownAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="targetMoveDisabled()"
                     (click)="moveDown(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)"
                     [attr.data-pc-section]="'targetMoveDownButton'"
+                    [buttonProps]="getButtonProps('movedown')"
                 >
                     <AngleDownIcon *ngIf="!moveDownIconTemplate" [attr.data-pc-section]="'movedownicon'" />
                     <ng-template *ngTemplateOutlet="moveDownIconTemplate"></ng-template>
@@ -1546,17 +1650,19 @@ class PickList extends BaseComponent {
                     [attr.aria-label]="moveBottomAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="targetMoveDisabled()"
                     (click)="moveBottom(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)"
                     [attr.data-pc-section]="'targetMoveBottomButton'"
+                    [buttonProps]="getButtonProps('movebottom')"
                 >
                     <AngleDoubleDownIcon *ngIf="!moveBottomIconTemplate" [attr.data-pc-section]="'movebottomicon'" />
                     <ng-template *ngTemplateOutlet="moveBottomIconTemplate"></ng-template>
                 </button>
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i3.ButtonDirective), selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "buttonProps", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i0.forwardRef(() => i1.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i4.Ripple), selector: "[pRipple]" }, { kind: "directive", type: i0.forwardRef(() => i5.CdkDropListGroup), selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: i0.forwardRef(() => AngleDoubleDownIcon), selector: "AngleDoubleDownIcon" }, { kind: "component", type: i0.forwardRef(() => AngleDoubleLeftIcon), selector: "AngleDoubleLeftIcon" }, { kind: "component", type: i0.forwardRef(() => AngleDoubleRightIcon), selector: "AngleDoubleRightIcon" }, { kind: "component", type: i0.forwardRef(() => AngleDoubleUpIcon), selector: "AngleDoubleUpIcon" }, { kind: "component", type: i0.forwardRef(() => AngleDownIcon), selector: "AngleDownIcon" }, { kind: "component", type: i0.forwardRef(() => AngleLeftIcon), selector: "AngleLeftIcon" }, { kind: "component", type: i0.forwardRef(() => AngleRightIcon), selector: "AngleRightIcon" }, { kind: "component", type: i0.forwardRef(() => AngleUpIcon), selector: "AngleUpIcon" }, { kind: "component", type: i0.forwardRef(() => i6.Listbox), selector: "p-listbox", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "checkmark"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange"] }, { kind: "directive", type: i0.forwardRef(() => i7.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i7.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i3.ButtonDirective), selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "buttonProps", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i0.forwardRef(() => i1.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i4.Ripple), selector: "[pRipple]" }, { kind: "directive", type: i0.forwardRef(() => i5.CdkDropListGroup), selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: i0.forwardRef(() => AngleDoubleDownIcon), selector: "AngleDoubleDownIcon" }, { kind: "component", type: i0.forwardRef(() => AngleDoubleLeftIcon), selector: "AngleDoubleLeftIcon" }, { kind: "component", type: i0.forwardRef(() => AngleDoubleRightIcon), selector: "AngleDoubleRightIcon" }, { kind: "component", type: i0.forwardRef(() => AngleDoubleUpIcon), selector: "AngleDoubleUpIcon" }, { kind: "component", type: i0.forwardRef(() => AngleDownIcon), selector: "AngleDownIcon" }, { kind: "component", type: i0.forwardRef(() => AngleLeftIcon), selector: "AngleLeftIcon" }, { kind: "component", type: i0.forwardRef(() => AngleRightIcon), selector: "AngleRightIcon" }, { kind: "component", type: i0.forwardRef(() => AngleUpIcon), selector: "AngleUpIcon" }, { kind: "component", type: i0.forwardRef(() => i6.Listbox), selector: "p-listbox", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange"] }, { kind: "directive", type: i0.forwardRef(() => i7.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i7.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PickList, decorators: [{
             type: Component,
@@ -1582,10 +1688,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [attr.aria-label]="moveUpAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="sourceMoveDisabled()"
                     (click)="moveUp(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)"
                     [attr.data-pc-section]="'sourceMoveUpButton'"
+                    [buttonProps]="getButtonProps('moveup')"
                 >
                     <AngleUpIcon *ngIf="!moveUpIconTemplate" [attr.data-pc-section]="'moveupicon'" />
                     <ng-template *ngTemplateOutlet="moveUpIconTemplate"></ng-template>
@@ -1595,10 +1703,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [attr.aria-label]="moveTopAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="sourceMoveDisabled()"
                     (click)="moveTop(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)"
                     [attr.data-pc-section]="'sourceMoveTopButton'"
+                    [buttonProps]="getButtonProps('movetop')"
                 >
                     <AngleDoubleUpIcon *ngIf="!moveTopIconTemplate" [attr.data-pc-section]="'movetopicon'" />
                     <ng-template *ngTemplateOutlet="moveTopIconTemplate"></ng-template>
@@ -1608,10 +1718,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [attr.aria-label]="moveDownAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="sourceMoveDisabled()"
                     (click)="moveDown(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)"
                     [attr.data-pc-section]="'sourceMoveDownButton'"
+                    [buttonProps]="getButtonProps('movedown')"
                 >
                     <AngleDownIcon *ngIf="!moveDownIconTemplate" [attr.data-pc-section]="'movedownicon'" />
                     <ng-template *ngTemplateOutlet="moveDownIconTemplate"></ng-template>
@@ -1621,10 +1733,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [attr.aria-label]="moveBottomAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="sourceMoveDisabled()"
                     (click)="moveBottom(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)"
                     [attr.data-pc-section]="'sourceMoveBottomButton'"
+                    [buttonProps]="getButtonProps('movebottom')"
                 >
                     <AngleDoubleDownIcon *ngIf="!moveBottomIconTemplate" [attr.data-pc-section]="'movebottomicon'" />
                     <ng-template *ngTemplateOutlet="moveBottomIconTemplate"></ng-template>
@@ -1653,12 +1767,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [metaKeySelection]="metaKeySelection"
                     [scrollHeight]="scrollHeight"
                     [autoOptionFocus]="autoOptionFocus"
+                    [filter]="filterBy"
+                    [filterBy]="filterBy"
+                    [filterLocale]="filterLocale"
+                    [filterPlaceHolder]="sourceFilterPlaceholder"
                 >
                     <ng-container *ngIf="sourceHeaderTemplate">
                         <ng-template pTemplate="header">
                             <ng-template *ngTemplateOutlet="headerTemplate"></ng-template>
                         </ng-template>
                     </ng-container>
+                    <ng-container *ngIf="itemTemplate">
+                        <ng-template pTemplate="item" let-item let-index="index" let-selected="selected">
+                            <ng-container
+                                *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: index, selected: selected }"
+                            ></ng-container>
+                        </ng-template>
+                    </ng-container>
                 </p-listbox>
             </div>
             <div
@@ -1671,10 +1796,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [attr.aria-label]="moveToTargetAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="moveRightDisabled()"
                     (click)="moveRight()"
                     [attr.data-pc-section]="'moveToTargetButton'"
+                    [buttonProps]="getButtonProps('movetotarget')"
                 >
                     <ng-container *ngIf="!moveToTargetIconTemplate">
                         <AngleRightIcon *ngIf="!viewChanged" [attr.data-pc-section]="'movetotargeticon'" />
@@ -1687,10 +1814,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [attr.aria-label]="moveAllToTargetAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="moveAllRightDisabled()"
                     (click)="moveAllRight()"
                     [attr.data-pc-section]="'moveAllToTargetButton'"
+                    [buttonProps]="getButtonProps('movealltotarget')"
                 >
                     <ng-container *ngIf="!moveAllToTargetIconTemplate">
                         <AngleDoubleRightIcon *ngIf="!viewChanged" [attr.data-pc-section]="'movealltotargeticon'" />
@@ -1703,10 +1832,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [attr.aria-label]="moveToSourceAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="moveLeftDisabled()"
                     (click)="moveLeft()"
                     [attr.data-pc-section]="'moveToSourceButton'"
+                    [buttonProps]="getButtonProps('movetosource')"
                 >
                     <ng-container *ngIf="!moveToSourceIconTemplate">
                         <AngleLeftIcon *ngIf="!viewChanged" [attr.data-pc-section]="'movedownsourceticon'" />
@@ -1719,10 +1850,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [attr.aria-label]="moveAllToSourceAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="moveAllLeftDisabled()"
                     (click)="moveAllLeft()"
                     [attr.data-pc-section]="'moveAllToSourceButton'"
+                    [buttonProps]="getButtonProps('movealltosource')"
                 >
                     <ng-container *ngIf="!moveAllToSourceIconTemplate">
                         <AngleDoubleLeftIcon *ngIf="!viewChanged" [attr.data-pc-section]="'movealltosourceticon'" />
@@ -1754,12 +1887,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [metaKeySelection]="metaKeySelection"
                     [scrollHeight]="scrollHeight"
                     [autoOptionFocus]="autoOptionFocus"
+                    [filter]="filterBy"
+                    [filterBy]="filterBy"
+                    [filterLocale]="filterLocale"
+                    [filterPlaceHolder]="targetFilterPlaceholder"
                 >
                     <ng-container *ngIf="targetHeaderTemplate">
                         <ng-template pTemplate="header">
                             <ng-template *ngTemplateOutlet="headerTemplate"></ng-template>
                         </ng-template>
                     </ng-container>
+                    <ng-container *ngIf="itemTemplate">
+                        <ng-template pTemplate="item" let-item let-index="index" let-selected="selected">
+                            <ng-container
+                                *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: index, selected: selected }"
+                            ></ng-container>
+                        </ng-template>
+                    </ng-container>
                 </p-listbox>
             </div>
             <div
@@ -1773,10 +1917,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [attr.aria-label]="moveUpAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="targetMoveDisabled()"
                     (click)="moveUp(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)"
                     [attr.data-pc-section]="'targetMoveUpButton'"
+                    [buttonProps]="getButtonProps('moveup')"
                 >
                     <AngleUpIcon *ngIf="!moveUpIconTemplate" [attr.data-pc-section]="'moveupicon'" />
                     <ng-template *ngTemplateOutlet="moveUpIconTemplate"></ng-template>
@@ -1786,10 +1932,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [attr.aria-label]="moveTopAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="targetMoveDisabled()"
                     (click)="moveTop(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)"
                     [attr.data-pc-section]="'targetMoveTopButton'"
+                    [buttonProps]="getButtonProps('movetop')"
                 >
                     <AngleDoubleUpIcon *ngIf="!moveTopIconTemplate" [attr.data-pc-section]="'movetopicon'" />
                     <ng-template *ngTemplateOutlet="moveTopIconTemplate"></ng-template>
@@ -1799,10 +1947,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [attr.aria-label]="moveDownAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="targetMoveDisabled()"
                     (click)="moveDown(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)"
                     [attr.data-pc-section]="'targetMoveDownButton'"
+                    [buttonProps]="getButtonProps('movedown')"
                 >
                     <AngleDownIcon *ngIf="!moveDownIconTemplate" [attr.data-pc-section]="'movedownicon'" />
                     <ng-template *ngTemplateOutlet="moveDownIconTemplate"></ng-template>
@@ -1812,10 +1962,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [attr.aria-label]="moveBottomAriaLabel"
                     pButton
                     pRipple
+                    severity="secondary"
                     class="p-button-icon-only"
                     [disabled]="targetMoveDisabled()"
                     (click)="moveBottom(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)"
                     [attr.data-pc-section]="'targetMoveBottomButton'"
+                    [buttonProps]="getButtonProps('movebottom')"
                 >
                     <AngleDoubleDownIcon *ngIf="!moveBottomIconTemplate" [attr.data-pc-section]="'movebottomicon'" />
                     <ng-template *ngTemplateOutlet="moveBottomIconTemplate"></ng-template>
@@ -1917,6 +2069,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             }], autoOptionFocus: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], buttonProps: [{
+                type: Input
+            }], moveUpButtonProps: [{
+                type: Input
+            }], moveTopButtonProps: [{
+                type: Input
+            }], moveDownButtonProps: [{
+                type: Input
+            }], moveBottomButtonProps: [{
+                type: Input
+            }], moveToTargetProps: [{
+                type: Input
+            }], moveAllToTargetProps: [{
+                type: Input
+            }], moveToSourceProps: [{
+                type: Input
+            }], moveAllToSourceProps: [{
+                type: Input
             }], breakpoint: [{
                 type: Input
             }], onMoveToSource: [{
@@ -2031,5 +2201,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { PickList, PickListModule };
+export { PickList, PickListClasses, PickListModule, PickListStyle };
 //# sourceMappingURL=primeng-picklist.mjs.map