Fixed primefaces#16576 - Column Filter missing primary color

packages/primeng/src/accordion/accordion.ts

@@ -34,6 +34,7 @@ import { Ripple } from 'primeng/ripple';
 import { transformToBoolean } from 'primeng/utils';
 import { Subscription } from 'rxjs';
 import { AccordionStyle } from './style/accordionstyle';
+import { styleClassAttribute } from "primeng/base";
 
 /**
  * Custom tab open event.
@@ -715,7 +716,7 @@ export class Accordion extends BaseComponent implements BlockableUI, AfterConten
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Icon of a collapsed tab.
      * @group Props

packages/primeng/src/autocomplete/autocomplete.ts

@@ -42,6 +42,7 @@ import { Scroller } from 'primeng/scroller';
 import { Nullable } from 'primeng/ts-helpers';
 import { AutoCompleteCompleteEvent, AutoCompleteDropdownClickEvent, AutoCompleteLazyLoadEvent, AutoCompleteSelectEvent, AutoCompleteUnselectEvent } from './autocomplete.interface';
 import { AutoCompleteStyle } from './style/autocompletestyle';
+import {styleClassAttribute} from "primeng/base";
 
 export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -311,7 +312,7 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Style class of the overlay panel element.
      * @group Props

packages/primeng/src/avatar/avatar.ts

@@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, inject,
 import { SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { AvatarStyle } from './style/avatarstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * Avatar represents people using icons, labels and images.
@@ -69,7 +70,7 @@ export class Avatar extends BaseComponent {
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Establishes a string value that labels the component.
      * @group Props

packages/primeng/src/avatargroup/avatargroup.ts

@@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component, HostBinding, inject, Input, NgModul
 import { SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { AvatarGroupStyle } from './style/avatargroupstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * AvatarGroup is a helper component for Avatar.
@@ -26,7 +27,7 @@ export class AvatarGroup extends BaseComponent {
      * Style class of the component
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Inline style of the component.
      * @group Props

packages/primeng/src/base/base.ts

@@ -16,3 +16,19 @@ export default {
         this._loadedStyleNames.clear();
     }
 };
+
+export function styleClassAttribute(value: any): string | undefined{
+    if(typeof value === 'string'){
+        return value;
+    }else if(Array.isArray(value)){
+        return value.join(' ');
+    }else if(value){
+        return Object.keys(value)
+            .filter(key => value[key])
+            .join(' ');
+    }else{
+        return value
+    }
+}
+
+

packages/primeng/src/base/public_api.ts

@@ -1,2 +1,3 @@
 export { default as Base } from './base';
+export { styleClassAttribute } from './base';
 export * from './style/basestyle';

packages/primeng/src/basecomponent/basecomponent.ts

@@ -177,9 +177,8 @@ export class BaseComponent {
         const classes = this.parent ? this.parent.componentStyle?.classes?.[arg] : this.componentStyle?.classes?.[arg];
 
         if (typeof classes === 'function') {
-            return classes({ instance: this });
+            return classes({instance: this});
         }
-
         return typeof classes === 'string' ? classes : arg;
     }
 

packages/primeng/src/blockui/blockui.ts

@@ -5,6 +5,7 @@ import { SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { ZIndexUtils } from 'primeng/utils';
 import { BlockUiStyle } from './style/blockuistyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * BlockUI can either block other components or the whole page.
@@ -52,7 +53,7 @@ export class BlockUI extends BaseComponent implements AfterViewInit, OnDestroy {
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Current blocked state as a boolean.
      * @group Props

packages/primeng/src/breadcrumb/breadcrumb.ts

@@ -7,6 +7,7 @@ import { ChevronRightIcon, HomeIcon } from 'primeng/icons';
 import { TooltipModule } from 'primeng/tooltip';
 import { BreadcrumbItemClickEvent } from './breadcrumb.interface';
 import { BreadCrumbStyle } from './style/breadcrumbstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * Breadcrumb provides contextual information about page hierarchy.
@@ -150,7 +151,7 @@ export class Breadcrumb extends BaseComponent implements AfterContentInit {
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * MenuItem configuration for the home icon.
      * @group Props

packages/primeng/src/button/button.ts

@@ -29,6 +29,7 @@ import { SpinnerIcon } from 'primeng/icons';
 import { Ripple } from 'primeng/ripple';
 import { ButtonProps } from './button.interface';
 import { ButtonStyle } from './style/buttonstyle';
+import {styleClassAttribute} from "primeng/base";
 
 type ButtonIconPosition = 'left' | 'right' | 'top' | 'bottom';
 
@@ -567,7 +568,7 @@ export class Button extends BaseComponent implements AfterContentInit {
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Style class of the badge.
      * @group Props

packages/primeng/src/calendar/calendar.ts

@@ -53,6 +53,7 @@ import { ZIndexUtils } from 'primeng/utils';
 import { Subscription } from 'rxjs';
 import { CalendarMonthChangeEvent, CalendarResponsiveOptions, CalendarTypeView, CalendarYearChangeEvent, LocaleSettings, Month, NavigationState } from './calendar.interface';
 import { CalendarStyle } from './style/calendarstyle';
+import {styleClassAttribute} from "primeng/base";
 
 export const CALENDAR_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -533,7 +534,7 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Inline style of the input field.
      * @group Props

packages/primeng/src/card/card.ts

@@ -4,7 +4,7 @@ import { equals } from '@primeuix/utils';
 import { BlockableUI, Footer, Header, SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { CardStyle } from './style/cardstyle';
-
+import { styleClassAttribute } from "primeng/base";
 /**
  * Card is a flexible container component.
  * @group Components
@@ -67,7 +67,7 @@ export class Card extends BaseComponent implements BlockableUI {
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
 
     @ContentChild(Header) headerFacet: TemplateRef<any> | undefined;
 

packages/primeng/src/carousel/carousel.ts

@@ -27,6 +27,7 @@ import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } fro
 import { Ripple } from 'primeng/ripple';
 import { CarouselPageEvent, CarouselResponsiveOptions } from './carousel.interface';
 import { CarouselStyle } from './style/carouselstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * Carousel is a content slider featuring various customization options.
@@ -287,7 +288,7 @@ export class Carousel extends BaseComponent implements AfterContentInit {
      * Style class of the viewport container.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Used to pass all properties of the ButtonProps to the Button component.
      * @group Props

packages/primeng/src/cascadeselect/cascadeselect.ts

@@ -32,6 +32,7 @@ import { Ripple } from 'primeng/ripple';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { CascadeSelectBeforeHideEvent, CascadeSelectBeforeShowEvent, CascadeSelectChangeEvent, CascadeSelectHideEvent, CascadeSelectShowEvent } from './cascadeselect.interface';
 import { CascadeSelectStyle } from './style/cascadeselectstyle';
+import { styleClassAttribute } from "primeng/base";
 
 export const CASCADESELECT_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -392,7 +393,7 @@ export class CascadeSelect extends BaseComponent implements OnInit {
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Inline style of the component.
      * @group Props

packages/primeng/src/checkbox/checkbox.ts

@@ -27,6 +27,7 @@ import { CheckIcon, MinusIcon } from 'primeng/icons';
 import { Nullable } from 'primeng/ts-helpers';
 import { CheckboxChangeEvent } from './checkbox.interface';
 import { CheckboxStyle } from './style/checkboxstyle';
+import {styleClassAttribute} from "primeng/base";
 
 export const CHECKBOX_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -134,7 +135,7 @@ export class Checkbox extends BaseComponent implements ControlValueAccessor {
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Style class of the input element.
      * @group Props

packages/primeng/src/chip/chip.ts

@@ -5,6 +5,7 @@ import { BaseComponent } from 'primeng/basecomponent';
 import { TimesCircleIcon } from 'primeng/icons';
 import { ChipProps } from './chip.interface';
 import { ChipStyle } from './style/chipstyle';
+import { styleClassAttribute } from "primeng/base";
 
 /**
  * Chip represents people using icons, labels and images.
@@ -75,7 +76,7 @@ export class Chip extends BaseComponent {
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Whether to display a remove icon.
      * @group Props

packages/primeng/src/colorpicker/colorpicker.ts

@@ -11,6 +11,7 @@ import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { ZIndexUtils } from 'primeng/utils';
 import { ColorPickerChangeEvent } from './colorpicker.interface';
 import { ColorPickerStyle } from './style/colorpickerstyle';
+import { styleClassAttribute } from "primeng/base";
 
 export const COLORPICKER_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -97,7 +98,7 @@ export class ColorPicker extends BaseComponent implements ControlValueAccessor,
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Whether to display as an overlay or not.
      * @group Props

packages/primeng/src/confirmdialog/confirmdialog.ts

@@ -11,6 +11,7 @@ import { Ripple } from 'primeng/ripple';
 import { Nullable } from 'primeng/ts-helpers';
 import { Subscription } from 'rxjs';
 import { ConfirmDialogStyle } from './style/confirmdialogstyle';
+import {styleClassAttribute} from "primeng/base";
 
 const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}', style({ transform: 'none', opacity: 1 }))]);
 
@@ -142,7 +143,7 @@ export class ConfirmDialog extends BaseComponent implements OnInit, OnDestroy {
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Specify the CSS class(es) for styling the mask element
      * @group Props

packages/primeng/src/confirmpopup/confirmpopup.ts

@@ -28,6 +28,7 @@ import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { ZIndexUtils } from 'primeng/utils';
 import { Subscription } from 'rxjs';
 import { ConfirmPopupStyle } from './style/confirmpopupstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * ConfirmPopup displays a confirmation overlay displayed relatively to its target.
@@ -163,7 +164,7 @@ export class ConfirmPopup extends BaseComponent implements AfterContentInit, OnD
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Defines if the component is visible.
      * @group Props

packages/primeng/src/contextmenu/contextmenu.ts

@@ -53,6 +53,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import { VoidListener } from 'primeng/ts-helpers';
 import { ZIndexUtils } from 'primeng/utils';
 import { ContextMenuStyle } from './style/contextmenustyle';
+import {styleClassAttribute} from "primeng/base";
 
 @Component({
     selector: 'p-contextMenuSub, p-contextmenu-sub',
@@ -435,7 +436,7 @@ export class ContextMenu extends BaseComponent implements OnInit, OnDestroy {
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element.
      * @group Props

packages/primeng/src/dataview/dataview.ts

@@ -27,6 +27,7 @@ import { Nullable } from 'primeng/ts-helpers';
 import { Subscription } from 'rxjs';
 import { DataViewLayoutChangeEvent, DataViewLazyLoadEvent, DataViewPageEvent, DataViewPaginatorState, DataViewSortEvent } from './dataview.interface';
 import { DataViewStyle } from './style/dataviewstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * DataView displays data in grid or list layout with pagination and sorting features.
@@ -236,7 +237,7 @@ export class DataView extends BaseComponent implements OnInit, OnDestroy, Blocka
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Style class of the grid.
      * @group Props

packages/primeng/src/datepicker/datepicker.ts

@@ -53,6 +53,7 @@ import { ZIndexUtils } from 'primeng/utils';
 import { Subscription } from 'rxjs';
 import { DatePickerMonthChangeEvent, DatePickerResponsiveOptions, DatePickerTypeView, DatePickerYearChangeEvent, LocaleSettings, Month, NavigationState } from './datepicker.interface';
 import { DatePickerStyle } from './style/datepickerstyle';
+import {styleClassAttribute} from "primeng/base";
 
 export const DATEPICKER_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -554,7 +555,7 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Inline style of the input field.
      * @group Props

packages/primeng/src/dialog/dialog.ts

@@ -31,6 +31,7 @@ import { Ripple } from 'primeng/ripple';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { ZIndexUtils } from 'primeng/utils';
 import { DialogStyle } from './style/dialogstyle';
+import {styleClassAttribute} from "primeng/base";
 
 const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}')]);
 
@@ -231,7 +232,7 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy {
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Style class of the mask.
      * @group Props

packages/primeng/src/divider/divider.ts

@@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component, HostBinding, inject, Input, NgModul
 import { SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { DividerStyle } from './style/dividerstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * Divider is used to separate contents.
@@ -51,7 +52,7 @@ export class Divider extends BaseComponent {
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Specifies the orientation.
      * @group Props