fix: #16576

 + Undo changes to cx function
 + Used custom styleClass transformer on styleClass inputs instead to provide safe translation always

src/app/components/accordion/accordion.ts

@@ -35,6 +35,7 @@ import { AccordionStyle } from './style/accordionstyle';
 import { BaseComponent } from 'primeng/basecomponent';
 import { ChevronUpIcon } from 'primeng/icons/chevronup';
 import { Ripple } from 'primeng/ripple';
+import { styleClassAttribute } from "primeng/base";
 
 /**
  * Custom tab open event.
@@ -744,7 +745,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

src/app/components/autocomplete/autocomplete.ts

@@ -50,6 +50,7 @@ import {
 import { ChipModule } from 'primeng/chip';
 import { AutoCompleteStyle } from './style/autocompletestyle';
 import { BaseComponent } from 'primeng/basecomponent';
+import { styleClassAttribute } from "primeng/base";
 
 export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -373,7 +374,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
@@ -393,7 +394,7 @@ export class AutoComplete extends BaseComponent implements AfterViewChecked, Aft
      * Inline style of the input field.
      * @group Props
      */
-    @Input() inputStyleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) inputStyleClass: string | undefined;
     /**
      * Hint text for the input field.
      * @group Props

src/app/components/avatar/avatar.ts

@@ -12,6 +12,7 @@ import {
 } from '@angular/core';
 import { BaseComponent } from 'primeng/basecomponent';
 import { AvatarStyle } from './style/avatarstyle';
+import { styleClassAttribute } from "primeng/base";
 
 /**
  * Avatar represents people using icons, labels and images.
@@ -78,7 +79,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

src/app/components/avatargroup/avatargroup.ts

@@ -2,6 +2,7 @@ import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input,
 import { CommonModule } from '@angular/common';
 import { AvatarGroupStyle } from './style/avatargroupstyle';
 import { BaseComponent } from 'primeng/basecomponent';
+import { styleClassAttribute } from "primeng/base";
 /**
  * AvatarGroup is a helper component for Avatar.
  * @group Components
@@ -22,7 +23,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

src/app/components/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
+    }
+}
+
+

src/app/components/base/public_api.ts

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

src/app/components/basecomponent/basecomponent.ts

@@ -3,9 +3,8 @@ import { ChangeDetectorRef, Directive, ElementRef, inject, Injector, Input, PLAT
 import { getKeyValue } from '@primeuix/utils/object';
 import { PrimeNGConfig } from 'primeng/api';
 import { Base, BaseStyle } from 'primeng/base';
-import { DomHandler } from 'primeng/dom';
 import { Theme, ThemeService } from 'primeng/themes';
-import { ObjectUtils, UniqueComponentId } from 'primeng/utils';
+import { UniqueComponentId } from 'primeng/utils';
 import { BaseComponentStyle } from './style/basecomponentstyle';
 
 @Directive({ standalone: true, providers: [BaseComponentStyle, BaseStyle] })
@@ -165,27 +164,11 @@ export class BaseComponent {
         ThemeService.on('theme:change', callback);
     }
 
-    cx(arg: string, flat?: boolean): string {
+    cx(arg: string, rest?: string): string {
         const classes = this.parent ? this.parent.componentStyle?.classes?.[arg] : this.componentStyle?.classes?.[arg];
 
         if (typeof classes === 'function') {
-            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 classes({instance: this});
         }
         return typeof classes === 'string' ? classes : arg;
     }

src/app/components/blockui/blockui.ts

@@ -21,6 +21,7 @@ import { DomHandler } from 'primeng/dom';
 import { ZIndexUtils } from 'primeng/utils';
 import { BaseComponent } from 'primeng/basecomponent';
 import { BlockUiStyle } from './style/blockuistyle';
+import { styleClassAttribute } from "primeng/base";
 /**
  * BlockUI can either block other components or the whole page.
  * @group Components
@@ -66,7 +67,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

src/app/components/breadcrumb/breadcrumb.ts

@@ -21,6 +21,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import { BreadcrumbItemClickEvent } from './breadcrumb.interface';
 import { BreadCrumbStyle } from './style/breadcrumbstyle';
 import { BaseComponent } from 'primeng/basecomponent';
+import { styleClassAttribute } from "primeng/base";
 
 /**
  * Breadcrumb provides contextual information about page hierarchy.
@@ -198,7 +199,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

src/app/components/button/button.ts

@@ -32,6 +32,7 @@ import { BaseComponent } from 'primeng/basecomponent';
 import { ButtonStyle } from './style/buttonstyle';
 import { BadgeModule } from 'primeng/badge';
 import { ButtonProps } from './button.interface';
+import { styleClassAttribute } from "primeng/base";
 
 type ButtonIconPosition = 'left' | 'right' | 'top' | 'bottom';
 
@@ -520,7 +521,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

src/app/components/calendar/calendar.ts

@@ -49,6 +49,7 @@ import { AutoFocusModule } from 'primeng/autofocus';
 import { InputTextModule } from 'primeng/inputtext';
 import { CalendarStyle } from './style/calendarstyle';
 import { BaseComponent } from 'primeng/basecomponent';
+import { styleClassAttribute } from "primeng/base";
 
 export const CALENDAR_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -564,7 +565,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
@@ -584,7 +585,7 @@ export class Calendar extends BaseComponent implements OnInit, OnDestroy, Contro
      * Style class of the input field.
      * @group Props
      */
-    @Input() inputStyleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) inputStyleClass: string | undefined;
     /**
      * Placeholder text for the input.
      * @group Props

src/app/components/card/card.ts

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

src/app/components/carousel/carousel.ts

@@ -37,6 +37,7 @@ import { ButtonModule } from 'primeng/button';
 import { ButtonProps } from 'primeng/button';
 import { CarouselStyle } from './style/carouselstyle';
 import { BaseComponent } from 'primeng/basecomponent';
+import { styleClassAttribute } from "primeng/base";
 
 /**
  * Carousel is a content slider featuring various customization options.
@@ -309,7 +310,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

src/app/components/cascadeselect/cascadeselect.ts

@@ -45,6 +45,7 @@ import {
 } from './cascadeselect.interface';
 import { BaseComponent } from 'primeng/basecomponent';
 import { CascadeSelectStyle } from './style/cascadeselectstyle';
+import { styleClassAttribute } from "primeng/base";
 
 export const CASCADESELECT_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -453,7 +454,7 @@ export class CascadeSelect extends BaseComponent implements OnInit, AfterContent
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Inline style of the component.
      * @group Props

src/app/components/checkbox/checkbox.ts

@@ -29,6 +29,7 @@ import { CheckboxChangeEvent } from './checkbox.interface';
 import { MinusIcon } from 'primeng/icons/minus';
 import { BaseComponent } from 'primeng/basecomponent';
 import { CheckboxStyle } from './style/checkboxstyle';
+import { styleClassAttribute } from "primeng/base";
 
 export const CHECKBOX_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -143,7 +144,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

src/app/components/chip/chip.ts

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

src/app/components/colorpicker/colorpicker.ts

@@ -26,6 +26,7 @@ import { ZIndexUtils } from 'primeng/utils';
 import { ColorPickerChangeEvent } from './colorpicker.interface';
 import { BaseComponent } from 'primeng/basecomponent';
 import { ColorPickerStyle } from './style/colorpickerstyle';
+import { styleClassAttribute } from "primeng/base";
 
 export const COLORPICKER_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -132,7 +133,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

src/app/components/confirmdialog/confirmdialog.ts

@@ -33,6 +33,7 @@ import { Subscription } from 'rxjs';
 import { BaseComponent } from 'primeng/basecomponent';
 import { ConfirmDialogStyle } from './style/confirmdialogstyle';
 import { Dialog, DialogModule } from 'primeng/dialog';
+import { styleClassAttribute } from "primeng/base";
 
 const showAnimation = animation([
     style({ transform: '{{transform}}', opacity: 0 }),
@@ -169,7 +170,7 @@ export class ConfirmDialog extends BaseComponent implements AfterContentInit, On
      * 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

src/app/components/confirmpopup/confirmpopup.ts

@@ -37,6 +37,7 @@ import { ZIndexUtils } from 'primeng/utils';
 import { Subscription } from 'rxjs';
 import { ConfirmPopupStyle } from './style/confirmpopupstyle';
 import { BaseComponent } from 'primeng/basecomponent';
+import { styleClassAttribute } from "primeng/base";
 
 /**
  * ConfirmPopup displays a confirmation overlay displayed relatively to its target.
@@ -170,7 +171,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

src/app/components/contextmenu/contextmenu.ts

@@ -36,6 +36,7 @@ import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';
 import { ContextMenuStyle } from './style/contextmenustyle';
 import { BaseComponent } from 'primeng/basecomponent';
 import { BadgeModule } from 'primeng/badge';
+import { styleClassAttribute } from "primeng/base";
 
 @Component({
     selector: 'p-contextMenuSub, p-contextmenu-sub',
@@ -481,7 +482,7 @@ export class ContextMenu extends BaseComponent implements OnInit, AfterContentIn
      * 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

src/app/components/dataview/dataview.ts

@@ -38,6 +38,7 @@ import {
 } from './dataview.interface';
 import { DataViewStyle } from './style/dataviewstyle';
 import { BaseComponent } from 'primeng/basecomponent';
+import { styleClassAttribute } from "primeng/base";
 /**
  * DataView displays data in grid or list layout with pagination and sorting features.
  * @group Components
@@ -239,7 +240,7 @@ export class DataView extends BaseComponent implements OnInit, AfterContentInit,
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Style class of the grid.
      * @group Props