From 108ade283597fd31dc74bdcea707830897289bd5 Mon Sep 17 00:00:00 2001
From: Enrico Messall <enrico.messall@arematics.com>
Date: Fri, 18 Oct 2024 14:53:28 +0200
Subject: [PATCH] fix: primefaces#16576  + CX Function add support for flatting
 functions for styleClass (Similar to ngStyle doing it)  + Added new theming
 for p-column filter active button color  + Added
 p-datatable-column-filter-button-active class again

---
 .../components/basecomponent/basecomponent.ts | 21 ++++++++++++++++---
 src/app/components/table/style/tablestyle.ts  |  9 +++++++-
 src/app/components/table/table.ts             |  2 +-
 .../components/themes/aura/datatable/index.ts |  5 +++++
 .../components/themes/lara/datatable/index.ts |  5 +++++
 .../components/themes/nora/datatable/index.ts |  5 +++++
 .../themes/types/datatable/index.d.ts         |  6 ++++++
 7 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/src/app/components/basecomponent/basecomponent.ts b/src/app/components/basecomponent/basecomponent.ts
index 2102bdebd02..f44420e9d96 100644
--- a/src/app/components/basecomponent/basecomponent.ts
+++ b/src/app/components/basecomponent/basecomponent.ts
@@ -165,13 +165,28 @@ export class BaseComponent {
         ThemeService.on('theme:change', callback);
     }
 
-    cx(arg: string, rest?: string): string {
+    cx(arg: string, flat?: boolean): string {
         const classes = this.parent ? this.parent.componentStyle?.classes?.[arg] : this.componentStyle?.classes?.[arg];
 
         if (typeof classes === 'function') {
-            return classes({ instance: this });
+            if(flat){
+                const result = classes({ instance: this })
+                if(typeof result === 'string'){
+                    return result;
+                }else if(Array.isArray(result)){
+                    return result.join(' ');
+                }else if(result){
+                    return Object.keys(result)
+                        .filter(key => result[key])
+                        .join(' ');
+                }else{
+                    return ""
+                }
+
+            }else {
+                return classes({instance: this});
+            }
         }
-
         return typeof classes === 'string' ? classes : arg;
     }
 
diff --git a/src/app/components/table/style/tablestyle.ts b/src/app/components/table/style/tablestyle.ts
index 92fb0dc5435..66e01bc0d97 100644
--- a/src/app/components/table/style/tablestyle.ts
+++ b/src/app/components/table/style/tablestyle.ts
@@ -323,6 +323,10 @@ const theme = ({ dt }) => `
 }
 */
 
+.p-button.p-button-text.p-datatable-column-filter-button-active {
+    color: ${dt('datatable.filter.button.active.color')};
+}
+
 .p-datatable-tbody > tr {
     outline-color: transparent;
     background: ${dt('datatable.row.background')};
@@ -641,7 +645,10 @@ const classes = {
         'p-datatable-popover-filter': instance.display === 'menu',
     }),
     filterElementContainer: 'p-datatable-filter-element-container',
-    pcColumnFilterButton: 'p-datatable-column-filter-button',
+    pcColumnFilterButton: ({instance}) => ({
+        'p-datatable-column-filter-button': true,
+        'p-datatable-column-filter-button-active': instance.hasFilter
+    }),
     pcColumnFilterClearButton: 'p-datatable-column-filter-clear-button',
     filterOverlay: ({ instance }) => ({
         'p-datatable-filter-overlay p-component': true,
diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
index b0d1658a366..8981d54e9eb 100644
--- a/src/app/components/table/table.ts
+++ b/src/app/components/table/table.ts
@@ -5362,7 +5362,7 @@ export class ReorderableRow implements AfterViewInit {
             <p-button
                 #icon
                 *ngIf="showMenuButton"
-                [styleClass]="cx('pcColumnFilterButton')"
+                [styleClass]="cx('pcColumnFilterButton', true)"
                 [attr.aria-haspopup]="true"
                 [ariaLabel]="filterMenuButtonAriaLabel"
                 [attr.aria-controls]="overlayVisible ? overlayId : null"
diff --git a/src/app/components/themes/aura/datatable/index.ts b/src/app/components/themes/aura/datatable/index.ts
index b628b4f8036..7cd8778634f 100644
--- a/src/app/components/themes/aura/datatable/index.ts
+++ b/src/app/components/themes/aura/datatable/index.ts
@@ -133,6 +133,11 @@ export default {
             padding: '{list.option.padding}',
             borderRadius: '{list.option.border.radius}',
         },
+        button: {
+            active:{
+                color: '{primary.active.color}'
+            }
+        }
     },
     paginatorTop: {
         borderColor: '{datatable.border.color}',
diff --git a/src/app/components/themes/lara/datatable/index.ts b/src/app/components/themes/lara/datatable/index.ts
index 0ad6f1ecbfa..2670148e583 100644
--- a/src/app/components/themes/lara/datatable/index.ts
+++ b/src/app/components/themes/lara/datatable/index.ts
@@ -124,6 +124,11 @@ export default {
             padding: '{list.option.padding}',
             borderRadius: '{list.option.border.radius}',
         },
+        button: {
+            active:{
+                color: '{primary.active.color}'
+            }
+        }
     },
     paginatorTop: {
         borderColor: '{datatable.border.color}',
diff --git a/src/app/components/themes/nora/datatable/index.ts b/src/app/components/themes/nora/datatable/index.ts
index 585c61c8d8d..ea3ea7707e6 100644
--- a/src/app/components/themes/nora/datatable/index.ts
+++ b/src/app/components/themes/nora/datatable/index.ts
@@ -133,6 +133,11 @@ export default {
             padding: '{list.option.padding}',
             borderRadius: '{list.option.border.radius}',
         },
+        button: {
+            active:{
+                color: '{primary.active.color}'
+            }
+        }
     },
     paginatorTop: {
         borderColor: '{datatable.border.color}',
diff --git a/src/app/components/themes/types/datatable/index.d.ts b/src/app/components/themes/types/datatable/index.d.ts
index 531ad561072..c664114ee04 100644
--- a/src/app/components/themes/types/datatable/index.d.ts
+++ b/src/app/components/themes/types/datatable/index.d.ts
@@ -801,6 +801,12 @@ export interface DataTableDesignTokens extends ColorSchemeDesignToken<DataTableD
              */
             borderRadius?: string;
         };
+
+        button?: {
+            active?:{
+                color?: string;
+            }
+        }
     };
     /**
      * Used to pass tokens of the paginator top section