From 949938fa0709c4b623700de75c6a3e1f99d2e97a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=2E=20Borz=C4=99cki?= <konradsborzecki@gmail.com>
Date: Wed, 17 Jan 2024 11:50:41 +0100
Subject: [PATCH] feat: Paginator & Table - Add option to customize dropdown
 icon #9605 (#14555)

* feat: Paginator & Table - Add option to customize dropdown icon #9605

* add missing semicolons
---
 .../components/paginator/paginator.interface.ts    |  4 ++++
 src/app/components/paginator/paginator.ts          | 12 ++++++++++++
 src/app/components/table/table.interface.ts        |  4 ++++
 src/app/components/table/table.ts                  | 14 ++++++++++++++
 4 files changed, 34 insertions(+)

diff --git a/src/app/components/paginator/paginator.interface.ts b/src/app/components/paginator/paginator.interface.ts
index 7142f4a2193..8c59fd07cb1 100644
--- a/src/app/components/paginator/paginator.interface.ts
+++ b/src/app/components/paginator/paginator.interface.ts
@@ -16,6 +16,10 @@ export interface PaginatorState {
  * @group Templates
  */
 export interface PaginatorTemplates {
+    /**
+     * Custom dropdown trigger icon template.
+     */
+    dropdownicon(): TemplateRef<any>;
     /**
      * Custom first page link icon template.
      */
diff --git a/src/app/components/paginator/paginator.ts b/src/app/components/paginator/paginator.ts
index 69fb7ab092e..8b40ee54b0e 100755
--- a/src/app/components/paginator/paginator.ts
+++ b/src/app/components/paginator/paginator.ts
@@ -78,6 +78,9 @@ import { PaginatorState } from './paginator.interface';
                 [scrollHeight]="dropdownScrollHeight"
             >
                 <ng-template pTemplate="selectedItem">{{ currentPageReport }}</ng-template>
+                <ng-template pTemplate="dropdownicon" *ngIf="dropdownIconTemplate">
+                    <ng-container *ngTemplateOutlet="dropdownIconTemplate"></ng-container>
+                </ng-template>
             </p-dropdown>
             <button
                 type="button"
@@ -125,6 +128,9 @@ import { PaginatorState } from './paginator.interface';
                         <ng-container *ngTemplateOutlet="dropdownItemTemplate; context: { $implicit: item }"> </ng-container>
                     </ng-template>
                 </ng-container>
+                <ng-template pTemplate="dropdownicon" *ngIf="dropdownIconTemplate">
+                    <ng-container *ngTemplateOutlet="dropdownIconTemplate"></ng-container>
+                </ng-template>
             </p-dropdown>
             <div class="p-paginator-right-content" *ngIf="templateRight" [attr.data-pc-section]="'end'">
                 <ng-container *ngTemplateOutlet="templateRight; context: { $implicit: paginatorState }"></ng-container>
@@ -261,6 +267,8 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges {
 
     @ContentChildren(PrimeTemplate) templates: Nullable<QueryList<any>>;
 
+    dropdownIconTemplate: Nullable<TemplateRef<any>>;
+
     firstPageLinkIconTemplate: Nullable<TemplateRef<any>>;
 
     previousPageLinkIconTemplate: Nullable<TemplateRef<any>>;
@@ -309,6 +317,10 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges {
     ngAfterContentInit(): void {
         (this.templates as QueryList<PrimeTemplate>).forEach((item) => {
             switch (item.getType()) {
+                case 'dropdownicon':
+                    this.dropdownIconTemplate = item.template;
+                    break;
+
                 case 'firstpagelinkicon':
                     this.firstPageLinkIconTemplate = item.template;
                     break;
diff --git a/src/app/components/table/table.interface.ts b/src/app/components/table/table.interface.ts
index ab9caae327d..c33e01bd3e4 100644
--- a/src/app/components/table/table.interface.ts
+++ b/src/app/components/table/table.interface.ts
@@ -524,6 +524,10 @@ export interface TableTemplates {
      * Custom paginator right template.
      */
     paginatorright(): TemplateRef<any>;
+    /**
+     * Custom paginator dropdown trigger icon template.
+     */
+    paginatordropdownicon(): TemplateRef<any>;
     /**
      * Custom paginator dropdown item template.
      */
diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
index 6b0a7fded9a..fc04c943e77 100644
--- a/src/app/components/table/table.ts
+++ b/src/app/components/table/table.ts
@@ -163,6 +163,10 @@ export class TableService {
                 [styleClass]="paginatorStyleClass"
                 [locale]="paginatorLocale"
             >
+                <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate">
+                    <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate"></ng-container>
+                </ng-template>
+
                 <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate">
                     <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate"></ng-container>
                 </ng-template>
@@ -278,6 +282,10 @@ export class TableService {
                 [styleClass]="paginatorStyleClass"
                 [locale]="paginatorLocale"
             >
+                <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate">
+                    <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate"></ng-container>
+                </ng-template>
+
                 <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate">
                     <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate"></ng-container>
                 </ng-template>
@@ -1043,6 +1051,8 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
 
     headerCheckboxIconTemplate: Nullable<TemplateRef<any>>;
 
+    paginatorDropdownIconTemplate: Nullable<TemplateRef<any>>;
+
     paginatorFirstPageLinkIconTemplate: Nullable<TemplateRef<any>>;
 
     paginatorLastPageLinkIconTemplate: Nullable<TemplateRef<any>>;
@@ -1247,6 +1257,10 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
                     this.paginatorRightTemplate = item.template;
                     break;
 
+                case 'paginatordropdownicon':
+                    this.paginatorDropdownIconTemplate = item.template;
+                    break;
+
                 case 'paginatordropdownitem':
                     this.paginatorDropdownItemTemplate = item.template;
                     break;