primeng 15.3.0 → 15.4.0

package/fesm2020/primeng-picklist.mjs

@@ -12,6 +12,16 @@ import { RippleModule } from 'primeng/ripple';
 import * as i5 from '@angular/cdk/drag-drop';
 import { transferArrayItem, moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { UniqueComponentId, ObjectUtils } from 'primeng/utils';
+import { AngleDoubleDownIcon } from 'primeng/icons/angledoubledown';
+import { AngleDoubleLeftIcon } from 'primeng/icons/angledoubleleft';
+import { AngleDoubleRightIcon } from 'primeng/icons/angledoubleright';
+import { AngleDoubleUpIcon } from 'primeng/icons/angledoubleup';
+import { AngleDownIcon } from 'primeng/icons/angledown';
+import { AngleLeftIcon } from 'primeng/icons/angleleft';
+import { AngleRightIcon } from 'primeng/icons/angleright';
+import { AngleUpIcon } from 'primeng/icons/angleup';
+import { SearchIcon } from 'primeng/icons/search';
+import { HomeIcon } from 'primeng/icons/home';
 
 class PickList {
     constructor(document, platformId, renderer, el, cd, filterService) {
@@ -30,7 +40,6 @@ class PickList {
         this.showTargetControls = true;
         this.disabled = false;
         this.filterMatchMode = 'contains';
-        this.breakpoint = '960px';
         this.keepSelection = false;
         this.onMoveToSource = new EventEmitter();
         this.onMoveAllToSource = new EventEmitter();
@@ -42,15 +51,30 @@ class PickList {
         this.onTargetSelect = new EventEmitter();
         this.onSourceFilter = new EventEmitter();
         this.onTargetFilter = new EventEmitter();
+        this._breakpoint = '960px';
         this.selectedItemsSource = [];
         this.selectedItemsTarget = [];
         this.id = UniqueComponentId();
         this.SOURCE_LIST = -1;
         this.TARGET_LIST = 1;
+        this.window = this.document.defaultView;
+    }
+    get breakpoint() {
+        return this._breakpoint;
+    }
+    set breakpoint(value) {
+        if (value !== this._breakpoint) {
+            this._breakpoint = value;
+            if (isPlatformBrowser(this.platformId)) {
+                this.destroyMedia();
+                this.initMedia();
+            }
+        }
     }
     ngOnInit() {
         if (this.responsive) {
             this.createStyle();
+            this.initMedia();
         }
         if (this.filterBy) {
             this.sourceFilterOptions = {
@@ -93,6 +117,36 @@ class PickList {
                 case 'emptyfiltermessagetarget':
                     this.emptyFilterMessageTargetTemplate = item.template;
                     break;
+                case 'moveupicon':
+                    this.moveUpIconTemplate = item.template;
+                    break;
+                case 'movetopicon':
+                    this.moveTopIconTemplate = item.template;
+                    break;
+                case 'movedownicon':
+                    this.moveDownIconTemplate = item.template;
+                    break;
+                case 'movebottomicon':
+                    this.moveBottomIconTemplate = item.template;
+                    break;
+                case 'movetotargeticon':
+                    this.moveToTargetIconTemplate = item.template;
+                    break;
+                case 'movealltotargeticon':
+                    this.moveAllToTargetIconTemplate = item.template;
+                    break;
+                case 'movetosourceicon':
+                    this.moveToSourceIconTemplate = item.template;
+                    break;
+                case 'movealltosourceicon':
+                    this.moveAllToSourceIconTemplate = item.template;
+                    break;
+                case 'targetfiltericon':
+                    this.targetFilterIconTemplate = item.template;
+                    break;
+                case 'sourcefiltericon':
+                    this.sourceFilterIconTemplate = item.template;
+                    break;
                 default:
                     this.itemTemplate = item.template;
                     break;
@@ -519,6 +573,30 @@ class PickList {
         else
             return null;
     }
+    initMedia() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.media = this.window.matchMedia(`(max-width: ${this.breakpoint})`);
+            this.viewChanged = this.media.matches;
+            this.bindMediaChangeListener();
+        }
+    }
+    destroyMedia() {
+        this.unbindMediaChangeListener();
+    }
+    bindMediaChangeListener() {
+        if (this.media && !this.mediaChangeListener) {
+            this.mediaChangeListener = this.renderer.listen(this.media, 'change', (event) => {
+                this.viewChanged = event.matches;
+                this.cd.markForCheck();
+            });
+        }
+    }
+    unbindMediaChangeListener() {
+        if (this.mediaChangeListener) {
+            this.mediaChangeListener();
+            this.mediaChangeListener = null;
+        }
+    }
     createStyle() {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.styleElement) {
@@ -545,24 +623,7 @@ class PickList {
                     .p-picklist[${this.id}] .p-picklist-buttons .p-button:last-child {
                         margin-right: 0;
                     }
-    
-                    .p-picklist[${this.id}] .pi-angle-right:before {
-                        content: "\\e930"
-                    }
-    
-                    .p-picklist[${this.id}] .pi-angle-double-right:before {
-                        content: "\\e92c"
-                    }
-    
-                    .p-picklist[${this.id}] .pi-angle-left:before {
-                        content: "\\e933"
-                    }
-    
-                    .p-picklist[${this.id}] .pi-angle-double-left:before {
-                        content: "\\e92f"
-                    }
-                }
-                `;
+                }`;
                 this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML);
             }
         }
@@ -598,40 +659,53 @@ class PickList {
     }
     ngOnDestroy() {
         this.destroyStyle();
+        this.destroyMedia();
     }
 }
 PickList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: PickList, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FilterService }], target: i0.ɵɵFactoryTarget.Component });
 PickList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.4", type: PickList, selector: "p-pickList", inputs: { source: "source", target: "target", sourceHeader: "sourceHeader", rightButtonAriaLabel: "rightButtonAriaLabel", leftButtonAriaLabel: "leftButtonAriaLabel", allRightButtonAriaLabel: "allRightButtonAriaLabel", allLeftButtonAriaLabel: "allLeftButtonAriaLabel", upButtonAriaLabel: "upButtonAriaLabel", downButtonAriaLabel: "downButtonAriaLabel", topButtonAriaLabel: "topButtonAriaLabel", bottomButtonAriaLabel: "bottomButtonAriaLabel", targetHeader: "targetHeader", responsive: "responsive", filterBy: "filterBy", filterLocale: "filterLocale", trackBy: "trackBy", sourceTrackBy: "sourceTrackBy", targetTrackBy: "targetTrackBy", showSourceFilter: "showSourceFilter", showTargetFilter: "showTargetFilter", metaKeySelection: "metaKeySelection", dragdrop: "dragdrop", style: "style", styleClass: "styleClass", sourceStyle: "sourceStyle", targetStyle: "targetStyle", showSourceControls: "showSourceControls", showTargetControls: "showTargetControls", sourceFilterPlaceholder: "sourceFilterPlaceholder", targetFilterPlaceholder: "targetFilterPlaceholder", disabled: "disabled", ariaSourceFilterLabel: "ariaSourceFilterLabel", ariaTargetFilterLabel: "ariaTargetFilterLabel", filterMatchMode: "filterMatchMode", breakpoint: "breakpoint", stripedRows: "stripedRows", keepSelection: "keepSelection" }, outputs: { onMoveToSource: "onMoveToSource", onMoveAllToSource: "onMoveAllToSource", onMoveAllToTarget: "onMoveAllToTarget", onMoveToTarget: "onMoveToTarget", onSourceReorder: "onSourceReorder", onTargetReorder: "onTargetReorder", onSourceSelect: "onSourceSelect", onTargetSelect: "onTargetSelect", onSourceFilter: "onSourceFilter", onTargetFilter: "onTargetFilter" }, host: { classAttribute: "p-element" }, 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 }], ngImport: i0, template: `
         <div [class]="styleClass" [ngStyle]="style" [ngClass]="{ 'p-picklist p-component': true, 'p-picklist-striped': stripedRows }" cdkDropListGroup>
             <div class="p-picklist-buttons p-picklist-source-controls" *ngIf="showSourceControls">
-                <button type="button" [attr.aria-label]="upButtonAriaLabel" pButton pRipple icon="pi pi-angle-up" [disabled]="sourceMoveDisabled()" (click)="moveUp(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)"></button>
+                <button type="button" [attr.aria-label]="upButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="sourceMoveDisabled()" (click)="moveUp(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)">
+                    <AngleUpIcon *ngIf="!moveUpIconTemplate"/>
+                    <ng-template *ngTemplateOutlet="moveUpIconTemplate"></ng-template>
+                </button>
                 <button
                     type="button"
                     [attr.aria-label]="topButtonAriaLabel"
                     pButton
                     pRipple
-                    icon="pi pi-angle-double-up"
+                    class="p-button-icon-only"
                     [disabled]="sourceMoveDisabled()"
                     (click)="moveTop(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)"
-                ></button>
+                >
+                    <AngleDoubleUpIcon *ngIf="!moveTopIconTemplate"/>
+                    <ng-template *ngTemplateOutlet="moveTopIconTemplate"></ng-template>
+                </button>
                 <button
                     type="button"
                     [attr.aria-label]="downButtonAriaLabel"
                     pButton
                     pRipple
-                    icon="pi pi-angle-down"
+                    class="p-button-icon-only"
                     [disabled]="sourceMoveDisabled()"
                     (click)="moveDown(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)"
-                ></button>
+                >
+                    <AngleDownIcon *ngIf="!moveDownIconTemplate"/>
+                    <ng-template *ngTemplateOutlet="moveDownIconTemplate"></ng-template>
+                </button>
                 <button
                     type="button"
                     [attr.aria-label]="bottomButtonAriaLabel"
                     pButton
                     pRipple
-                    icon="pi pi-angle-double-down"
+                    class="p-button-icon-only"
                     [disabled]="sourceMoveDisabled()"
                     (click)="moveBottom(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)"
-                ></button>
+                >
+                    <AngleDoubleDownIcon *ngIf="!moveBottomIconTemplate"/>
+                    <ng-template *ngTemplateOutlet="moveBottomIconTemplate"></ng-template>
+                </button>
             </div>
             <div class="p-picklist-list-wrapper p-picklist-source-wrapper">
                 <div class="p-picklist-header" *ngIf="sourceHeader || sourceHeaderTemplate">
@@ -654,7 +728,10 @@ PickList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.
                                 [attr.placeholder]="sourceFilterPlaceholder"
                                 [attr.aria-label]="ariaSourceFilterLabel"
                             />
-                            <span class="p-picklist-filter-icon pi pi-search"></span>
+                            <SearchIcon *ngIf="!sourceFilterIconTemplate" [styleClass]="'p-picklist-filter-icon'"/>
+                            <span class="p-picklist-filter-icon" *ngIf="sourceFilterIconTemplate">
+                                <ng-template *ngTemplateOutlet="sourceFilterIconTemplate"></ng-template>
+                            </span>
                         </div>
                     </ng-template>
                 </div>
@@ -690,10 +767,34 @@ PickList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.
                 </ul>
             </div>
             <div class="p-picklist-buttons p-picklist-transfer-buttons">
-                <button type="button" [attr.aria-label]="rightButtonAriaLabel" pButton pRipple icon="pi pi-angle-right" [disabled]="moveRightDisabled()" (click)="moveRight()"></button>
-                <button type="button" [attr.aria-label]="allRightButtonAriaLabel" pButton pRipple icon="pi pi-angle-double-right" [disabled]="moveAllRightDisabled()" (click)="moveAllRight()"></button>
-                <button type="button" [attr.aria-label]="leftButtonAriaLabel" pButton pRipple icon="pi pi-angle-left" [disabled]="moveLeftDisabled()" (click)="moveLeft()"></button>
-                <button type="button" [attr.aria-label]="allLeftButtonAriaLabel" pButton pRipple icon="pi pi-angle-double-left" [disabled]="moveAllLeftDisabled()" (click)="moveAllLeft()"></button>
+                <button type="button" [attr.aria-label]="rightButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveRightDisabled()" (click)="moveRight()">
+                    <ng-container *ngIf="!moveToTargetIconTemplate">
+                        <AngleRightIcon *ngIf="!viewChanged"/>
+                        <AngleDownIcon *ngIf="viewChanged"/>
+                    </ng-container>
+                    <ng-template *ngTemplateOutlet="moveToTargetIconTemplate; context: { $implicit: viewChanged }"></ng-template>
+                </button>
+                <button type="button" [attr.aria-label]="allRightButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveAllRightDisabled()" (click)="moveAllRight()">
+                    <ng-container *ngIf="!moveAllToTargetIconTemplate">
+                        <AngleDoubleRightIcon *ngIf="!viewChanged"/>
+                        <AngleDoubleDownIcon *ngIf="viewChanged"/>
+                    </ng-container>
+                    <ng-template *ngTemplateOutlet="moveAllToTargetIconTemplate; context: { $implicit: viewChanged }"></ng-template>
+                </button>
+                <button type="button" [attr.aria-label]="leftButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveLeftDisabled()" (click)="moveLeft()">
+                    <ng-container *ngIf="!moveToSourceIconTemplate">
+                        <AngleLeftIcon *ngIf="!viewChanged"/>
+                        <AngleUpIcon *ngIf="viewChanged"/>
+                    </ng-container>
+                    <ng-template *ngTemplateOutlet="moveToSourceIconTemplate; context: { $implicit: viewChanged }"></ng-template>
+                </button>
+                <button type="button" [attr.aria-label]="allLeftButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveAllLeftDisabled()" (click)="moveAllLeft()">
+                    <ng-container *ngIf="!moveAllToSourceIconTemplate">
+                        <AngleDoubleLeftIcon *ngIf="!viewChanged"/>
+                        <AngleDoubleUpIcon *ngIf="viewChanged"/>
+                    </ng-container>
+                    <ng-template *ngTemplateOutlet="moveAllToSourceIconTemplate; context: { $implicit: viewChanged }"></ng-template>
+                </button>
             </div>
             <div class="p-picklist-list-wrapper p-picklist-target-wrapper">
                 <div class="p-picklist-header" *ngIf="targetHeader || targetHeaderTemplate">
@@ -716,7 +817,10 @@ PickList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.
                                 [attr.placeholder]="targetFilterPlaceholder"
                                 [attr.aria-label]="ariaTargetFilterLabel"
                             />
-                            <span class="p-picklist-filter-icon pi pi-search"></span>
+                            <SearchIcon *ngIf="!targetFilterIconTemplate" [styleClass]="'p-picklist-filter-icon'"/>
+                            <span class="p-picklist-filter-icon" *ngIf="targetFilterIconTemplate">
+                                <ng-template *ngTemplateOutlet="targetFilterIconTemplate"></ng-template>
+                            </span>
                         </div>
                     </ng-template>
                 </div>
@@ -751,70 +855,94 @@ PickList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.
                 </ul>
             </div>
             <div class="p-picklist-buttons p-picklist-target-controls" *ngIf="showTargetControls">
-                <button type="button" [attr.aria-label]="upButtonAriaLabel" pButton pRipple icon="pi pi-angle-up" [disabled]="targetMoveDisabled()" (click)="moveUp(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)"></button>
+                <button type="button" [attr.aria-label]="upButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="targetMoveDisabled()" (click)="moveUp(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)">
+                    <AngleUpIcon *ngIf="!moveUpIconTemplate"/>
+                    <ng-template *ngTemplateOutlet="moveUpIconTemplate"></ng-template>
+                </button>
                 <button
                     type="button"
                     [attr.aria-label]="topButtonAriaLabel"
                     pButton
                     pRipple
-                    icon="pi pi-angle-double-up"
+                    class="p-button-icon-only"
                     [disabled]="targetMoveDisabled()"
                     (click)="moveTop(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)"
-                ></button>
+                >
+                    <AngleDoubleUpIcon *ngIf="!moveTopIconTemplate"/>
+                    <ng-template *ngTemplateOutlet="moveTopIconTemplate"></ng-template>
+                </button>
                 <button
                     type="button"
                     [attr.aria-label]="downButtonAriaLabel"
                     pButton
                     pRipple
-                    icon="pi pi-angle-down"
+                    class="p-button-icon-only"
                     [disabled]="targetMoveDisabled()"
                     (click)="moveDown(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)"
-                ></button>
+                >
+                    <AngleDownIcon *ngIf="!moveDownIconTemplate"/>
+                    <ng-template *ngTemplateOutlet="moveDownIconTemplate"></ng-template>
+                </button>
                 <button
                     type="button"
                     [attr.aria-label]="bottomButtonAriaLabel"
                     pButton
                     pRipple
-                    icon="pi pi-angle-double-down"
+                    class="p-button-icon-only"
                     [disabled]="targetMoveDisabled()"
                     (click)="moveBottom(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)"
-                ></button>
+                >
+                    <AngleDoubleDownIcon *ngIf="!moveBottomIconTemplate"/>
+                    <ng-template *ngTemplateOutlet="moveBottomIconTemplate"></ng-template>
+                </button>
             </div>
         </div>
-    `, isInline: true, styles: [".p-picklist{display:flex}.p-picklist-buttons{display:flex;flex-direction:column;justify-content:center}.p-picklist-list-wrapper{flex:1 1 50%}.p-picklist-list{list-style-type:none;margin:0;padding:0;overflow:auto;min-height:12rem}.p-picklist-item{display:block;cursor:pointer;overflow:hidden;position:relative}.p-picklist-item:not(.cdk-drag-disabled){cursor:move}.p-picklist-item.cdk-drag-placeholder{opacity:0}.p-picklist-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.p-picklist-filter{position:relative}.p-picklist-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-picklist-filter-input{width:100%}.p-picklist-list.cdk-drop-list-dragging .p-picklist-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i4.Ripple, selector: "[pRipple]" }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: [".p-picklist{display:flex}.p-picklist-buttons{display:flex;flex-direction:column;justify-content:center}.p-picklist-list-wrapper{flex:1 1 50%}.p-picklist-list{list-style-type:none;margin:0;padding:0;overflow:auto;min-height:12rem}.p-picklist-item{display:block;cursor:pointer;overflow:hidden;position:relative}.p-picklist-item:not(.cdk-drag-disabled){cursor:move}.p-picklist-item.cdk-drag-placeholder{opacity:0}.p-picklist-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.p-picklist-filter{position:relative}.p-picklist-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-picklist-filter-input{width:100%}.p-picklist-list.cdk-drop-list-dragging .p-picklist-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.ButtonDirective; }), selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.Ripple; }), selector: "[pRipple]" }, { kind: "directive", type: i0.forwardRef(function () { return i5.CdkDropList; }), selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.CdkDropListGroup; }), selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.CdkDrag; }), selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i0.forwardRef(function () { return AngleDoubleDownIcon; }), selector: "AngleDoubleDownIcon" }, { kind: "component", type: i0.forwardRef(function () { return AngleDoubleLeftIcon; }), selector: "AngleDoubleLeftIcon" }, { kind: "component", type: i0.forwardRef(function () { return AngleDoubleRightIcon; }), selector: "AngleDoubleRightIcon" }, { kind: "component", type: i0.forwardRef(function () { return AngleDoubleUpIcon; }), selector: "AngleDoubleUpIcon" }, { kind: "component", type: i0.forwardRef(function () { return AngleDownIcon; }), selector: "AngleDownIcon" }, { kind: "component", type: i0.forwardRef(function () { return AngleLeftIcon; }), selector: "AngleLeftIcon" }, { kind: "component", type: i0.forwardRef(function () { return AngleRightIcon; }), selector: "AngleRightIcon" }, { kind: "component", type: i0.forwardRef(function () { return AngleUpIcon; }), selector: "AngleUpIcon" }, { kind: "component", type: i0.forwardRef(function () { return SearchIcon; }), selector: "SearchIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: PickList, decorators: [{
             type: Component,
             args: [{ selector: 'p-pickList', template: `
         <div [class]="styleClass" [ngStyle]="style" [ngClass]="{ 'p-picklist p-component': true, 'p-picklist-striped': stripedRows }" cdkDropListGroup>
             <div class="p-picklist-buttons p-picklist-source-controls" *ngIf="showSourceControls">
-                <button type="button" [attr.aria-label]="upButtonAriaLabel" pButton pRipple icon="pi pi-angle-up" [disabled]="sourceMoveDisabled()" (click)="moveUp(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)"></button>
+                <button type="button" [attr.aria-label]="upButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="sourceMoveDisabled()" (click)="moveUp(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)">
+                    <AngleUpIcon *ngIf="!moveUpIconTemplate"/>
+                    <ng-template *ngTemplateOutlet="moveUpIconTemplate"></ng-template>
+                </button>
                 <button
                     type="button"
                     [attr.aria-label]="topButtonAriaLabel"
                     pButton
                     pRipple
-                    icon="pi pi-angle-double-up"
+                    class="p-button-icon-only"
                     [disabled]="sourceMoveDisabled()"
                     (click)="moveTop(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)"
-                ></button>
+                >
+                    <AngleDoubleUpIcon *ngIf="!moveTopIconTemplate"/>
+                    <ng-template *ngTemplateOutlet="moveTopIconTemplate"></ng-template>
+                </button>
                 <button
                     type="button"
                     [attr.aria-label]="downButtonAriaLabel"
                     pButton
                     pRipple
-                    icon="pi pi-angle-down"
+                    class="p-button-icon-only"
                     [disabled]="sourceMoveDisabled()"
                     (click)="moveDown(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)"
-                ></button>
+                >
+                    <AngleDownIcon *ngIf="!moveDownIconTemplate"/>
+                    <ng-template *ngTemplateOutlet="moveDownIconTemplate"></ng-template>
+                </button>
                 <button
                     type="button"
                     [attr.aria-label]="bottomButtonAriaLabel"
                     pButton
                     pRipple
-                    icon="pi pi-angle-double-down"
+                    class="p-button-icon-only"
                     [disabled]="sourceMoveDisabled()"
                     (click)="moveBottom(sourcelist, source, selectedItemsSource, onSourceReorder, SOURCE_LIST)"
-                ></button>
+                >
+                    <AngleDoubleDownIcon *ngIf="!moveBottomIconTemplate"/>
+                    <ng-template *ngTemplateOutlet="moveBottomIconTemplate"></ng-template>
+                </button>
             </div>
             <div class="p-picklist-list-wrapper p-picklist-source-wrapper">
                 <div class="p-picklist-header" *ngIf="sourceHeader || sourceHeaderTemplate">
@@ -837,7 +965,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
                                 [attr.placeholder]="sourceFilterPlaceholder"
                                 [attr.aria-label]="ariaSourceFilterLabel"
                             />
-                            <span class="p-picklist-filter-icon pi pi-search"></span>
+                            <SearchIcon *ngIf="!sourceFilterIconTemplate" [styleClass]="'p-picklist-filter-icon'"/>
+                            <span class="p-picklist-filter-icon" *ngIf="sourceFilterIconTemplate">
+                                <ng-template *ngTemplateOutlet="sourceFilterIconTemplate"></ng-template>
+                            </span>
                         </div>
                     </ng-template>
                 </div>
@@ -873,10 +1004,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
                 </ul>
             </div>
             <div class="p-picklist-buttons p-picklist-transfer-buttons">
-                <button type="button" [attr.aria-label]="rightButtonAriaLabel" pButton pRipple icon="pi pi-angle-right" [disabled]="moveRightDisabled()" (click)="moveRight()"></button>
-                <button type="button" [attr.aria-label]="allRightButtonAriaLabel" pButton pRipple icon="pi pi-angle-double-right" [disabled]="moveAllRightDisabled()" (click)="moveAllRight()"></button>
-                <button type="button" [attr.aria-label]="leftButtonAriaLabel" pButton pRipple icon="pi pi-angle-left" [disabled]="moveLeftDisabled()" (click)="moveLeft()"></button>
-                <button type="button" [attr.aria-label]="allLeftButtonAriaLabel" pButton pRipple icon="pi pi-angle-double-left" [disabled]="moveAllLeftDisabled()" (click)="moveAllLeft()"></button>
+                <button type="button" [attr.aria-label]="rightButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveRightDisabled()" (click)="moveRight()">
+                    <ng-container *ngIf="!moveToTargetIconTemplate">
+                        <AngleRightIcon *ngIf="!viewChanged"/>
+                        <AngleDownIcon *ngIf="viewChanged"/>
+                    </ng-container>
+                    <ng-template *ngTemplateOutlet="moveToTargetIconTemplate; context: { $implicit: viewChanged }"></ng-template>
+                </button>
+                <button type="button" [attr.aria-label]="allRightButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveAllRightDisabled()" (click)="moveAllRight()">
+                    <ng-container *ngIf="!moveAllToTargetIconTemplate">
+                        <AngleDoubleRightIcon *ngIf="!viewChanged"/>
+                        <AngleDoubleDownIcon *ngIf="viewChanged"/>
+                    </ng-container>
+                    <ng-template *ngTemplateOutlet="moveAllToTargetIconTemplate; context: { $implicit: viewChanged }"></ng-template>
+                </button>
+                <button type="button" [attr.aria-label]="leftButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveLeftDisabled()" (click)="moveLeft()">
+                    <ng-container *ngIf="!moveToSourceIconTemplate">
+                        <AngleLeftIcon *ngIf="!viewChanged"/>
+                        <AngleUpIcon *ngIf="viewChanged"/>
+                    </ng-container>
+                    <ng-template *ngTemplateOutlet="moveToSourceIconTemplate; context: { $implicit: viewChanged }"></ng-template>
+                </button>
+                <button type="button" [attr.aria-label]="allLeftButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveAllLeftDisabled()" (click)="moveAllLeft()">
+                    <ng-container *ngIf="!moveAllToSourceIconTemplate">
+                        <AngleDoubleLeftIcon *ngIf="!viewChanged"/>
+                        <AngleDoubleUpIcon *ngIf="viewChanged"/>
+                    </ng-container>
+                    <ng-template *ngTemplateOutlet="moveAllToSourceIconTemplate; context: { $implicit: viewChanged }"></ng-template>
+                </button>
             </div>
             <div class="p-picklist-list-wrapper p-picklist-target-wrapper">
                 <div class="p-picklist-header" *ngIf="targetHeader || targetHeaderTemplate">
@@ -899,7 +1054,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
                                 [attr.placeholder]="targetFilterPlaceholder"
                                 [attr.aria-label]="ariaTargetFilterLabel"
                             />
-                            <span class="p-picklist-filter-icon pi pi-search"></span>
+                            <SearchIcon *ngIf="!targetFilterIconTemplate" [styleClass]="'p-picklist-filter-icon'"/>
+                            <span class="p-picklist-filter-icon" *ngIf="targetFilterIconTemplate">
+                                <ng-template *ngTemplateOutlet="targetFilterIconTemplate"></ng-template>
+                            </span>
                         </div>
                     </ng-template>
                 </div>
@@ -934,34 +1092,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
                 </ul>
             </div>
             <div class="p-picklist-buttons p-picklist-target-controls" *ngIf="showTargetControls">
-                <button type="button" [attr.aria-label]="upButtonAriaLabel" pButton pRipple icon="pi pi-angle-up" [disabled]="targetMoveDisabled()" (click)="moveUp(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)"></button>
+                <button type="button" [attr.aria-label]="upButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="targetMoveDisabled()" (click)="moveUp(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)">
+                    <AngleUpIcon *ngIf="!moveUpIconTemplate"/>
+                    <ng-template *ngTemplateOutlet="moveUpIconTemplate"></ng-template>
+                </button>
                 <button
                     type="button"
                     [attr.aria-label]="topButtonAriaLabel"
                     pButton
                     pRipple
-                    icon="pi pi-angle-double-up"
+                    class="p-button-icon-only"
                     [disabled]="targetMoveDisabled()"
                     (click)="moveTop(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)"
-                ></button>
+                >
+                    <AngleDoubleUpIcon *ngIf="!moveTopIconTemplate"/>
+                    <ng-template *ngTemplateOutlet="moveTopIconTemplate"></ng-template>
+                </button>
                 <button
                     type="button"
                     [attr.aria-label]="downButtonAriaLabel"
                     pButton
                     pRipple
-                    icon="pi pi-angle-down"
+                    class="p-button-icon-only"
                     [disabled]="targetMoveDisabled()"
                     (click)="moveDown(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)"
-                ></button>
+                >
+                    <AngleDownIcon *ngIf="!moveDownIconTemplate"/>
+                    <ng-template *ngTemplateOutlet="moveDownIconTemplate"></ng-template>
+                </button>
                 <button
                     type="button"
                     [attr.aria-label]="bottomButtonAriaLabel"
                     pButton
                     pRipple
-                    icon="pi pi-angle-double-down"
+                    class="p-button-icon-only"
                     [disabled]="targetMoveDisabled()"
                     (click)="moveBottom(targetlist, target, selectedItemsTarget, onTargetReorder, TARGET_LIST)"
-                ></button>
+                >
+                    <AngleDoubleDownIcon *ngIf="!moveBottomIconTemplate"/>
+                    <ng-template *ngTemplateOutlet="moveBottomIconTemplate"></ng-template>
+                </button>
             </div>
         </div>
     `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
@@ -1086,12 +1256,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
 class PickListModule {
 }
 PickListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: PickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PickListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.4", ngImport: i0, type: PickListModule, declarations: [PickList], imports: [CommonModule, ButtonModule, SharedModule, RippleModule, DragDropModule], exports: [PickList, SharedModule, DragDropModule] });
-PickListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: PickListModule, imports: [CommonModule, ButtonModule, SharedModule, RippleModule, DragDropModule, SharedModule, DragDropModule] });
+PickListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.4", ngImport: i0, type: PickListModule, declarations: [PickList], imports: [CommonModule, ButtonModule, SharedModule, RippleModule, DragDropModule, AngleDoubleDownIcon, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleDoubleUpIcon, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, SearchIcon, HomeIcon], exports: [PickList, SharedModule, DragDropModule] });
+PickListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: PickListModule, imports: [CommonModule, ButtonModule, SharedModule, RippleModule, DragDropModule, AngleDoubleDownIcon, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleDoubleUpIcon, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, SearchIcon, HomeIcon, SharedModule, DragDropModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: PickListModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ButtonModule, SharedModule, RippleModule, DragDropModule],
+                    imports: [CommonModule, ButtonModule, SharedModule, RippleModule, DragDropModule, AngleDoubleDownIcon, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleDoubleUpIcon, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, SearchIcon, HomeIcon],
                     exports: [PickList, SharedModule, DragDropModule],
                     declarations: [PickList]
                 }]