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

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;
     }
 

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,

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"

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}',

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}',

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}',

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