From ded4d9ab084cc7ad68f1bb90417419e22fc83d79 Mon Sep 17 00:00:00 2001
From: Enrico Messall <enrico.messall@arematics.com>
Date: Tue, 26 Nov 2024 16:09:40 +0100
Subject: [PATCH] Fixed merge with v18

---
 packages/primeng/src/autocomplete/autocomplete.ts           | 3 ++-
 packages/primeng/src/avatar/avatar.ts                       | 3 ++-
 packages/primeng/src/avatargroup/avatargroup.ts             | 3 ++-
 packages/primeng/src/blockui/blockui.ts                     | 3 ++-
 packages/primeng/src/breadcrumb/breadcrumb.ts               | 3 ++-
 packages/primeng/src/button/button.ts                       | 3 ++-
 packages/primeng/src/calendar/calendar.ts                   | 3 ++-
 packages/primeng/src/carousel/carousel.ts                   | 3 ++-
 packages/primeng/src/checkbox/checkbox.ts                   | 3 ++-
 packages/primeng/src/confirmdialog/confirmdialog.ts         | 3 ++-
 packages/primeng/src/confirmpopup/confirmpopup.ts           | 3 ++-
 packages/primeng/src/contextmenu/contextmenu.ts             | 3 ++-
 packages/primeng/src/dataview/dataview.ts                   | 3 ++-
 packages/primeng/src/datepicker/datepicker.ts               | 3 ++-
 packages/primeng/src/dialog/dialog.ts                       | 3 ++-
 packages/primeng/src/divider/divider.ts                     | 3 ++-
 packages/primeng/src/dock/dock.ts                           | 3 ++-
 packages/primeng/src/drawer/drawer.ts                       | 3 ++-
 packages/primeng/src/dropdown/dropdown.ts                   | 3 ++-
 packages/primeng/src/editor/editor.ts                       | 3 ++-
 packages/primeng/src/fileupload/fileupload.ts               | 3 ++-
 packages/primeng/src/image/image.ts                         | 3 ++-
 packages/primeng/src/inplace/inplace.ts                     | 3 ++-
 packages/primeng/src/inputgroup/inputgroup.ts               | 3 ++-
 packages/primeng/src/inputicon/inputicon.ts                 | 3 ++-
 packages/primeng/src/inputmask/inputmask.ts                 | 3 ++-
 packages/primeng/src/inputotp/inputotp.ts                   | 3 ++-
 packages/primeng/src/inputswitch/inputswitch.ts             | 3 ++-
 packages/primeng/src/knob/knob.ts                           | 3 ++-
 packages/primeng/src/listbox/listbox.ts                     | 3 ++-
 packages/primeng/src/megamenu/megamenu.ts                   | 3 ++-
 packages/primeng/src/menu/menu.ts                           | 3 ++-
 packages/primeng/src/menubar/menubar.ts                     | 3 ++-
 packages/primeng/src/message/message.ts                     | 3 ++-
 packages/primeng/src/messages/messages.ts                   | 3 ++-
 packages/primeng/src/multiselect/multiselect.ts             | 3 ++-
 packages/primeng/src/orderlist/orderlist.ts                 | 3 ++-
 packages/primeng/src/organizationchart/organizationchart.ts | 3 ++-
 packages/primeng/src/overlaybadge/overlaybadge.ts           | 3 ++-
 packages/primeng/src/overlaypanel/overlaypanel.ts           | 3 ++-
 packages/primeng/src/paginator/paginator.ts                 | 3 ++-
 packages/primeng/src/panel/panel.ts                         | 3 ++-
 packages/primeng/src/panelmenu/panelmenu.ts                 | 3 ++-
 packages/primeng/src/picklist/picklist.ts                   | 3 ++-
 packages/primeng/src/popover/popover.ts                     | 3 ++-
 packages/primeng/src/progressbar/progressbar.ts             | 3 ++-
 packages/primeng/src/progressspinner/progressspinner.ts     | 3 ++-
 packages/primeng/src/radiobutton/radiobutton.ts             | 3 ++-
 packages/primeng/src/scrollpanel/scrollpanel.ts             | 3 ++-
 packages/primeng/src/select/select.ts                       | 3 ++-
 packages/primeng/src/selectbutton/selectbutton.ts           | 3 ++-
 packages/primeng/src/skeleton/skeleton.ts                   | 3 ++-
 packages/primeng/src/slider/slider.ts                       | 3 ++-
 packages/primeng/src/splitbutton/splitbutton.ts             | 3 ++-
 packages/primeng/src/splitter/splitter.ts                   | 3 ++-
 packages/primeng/src/steps/steps.ts                         | 3 ++-
 packages/primeng/src/table/table.ts                         | 3 ++-
 packages/primeng/src/tabmenu/tabmenu.ts                     | 3 ++-
 packages/primeng/src/tabview/tabview.ts                     | 3 ++-
 packages/primeng/src/terminal/terminal.ts                   | 3 ++-
 packages/primeng/src/tieredmenu/tieredmenu.ts               | 3 ++-
 packages/primeng/src/timeline/timeline.ts                   | 3 ++-
 packages/primeng/src/toast/toast.ts                         | 3 ++-
 packages/primeng/src/togglebutton/togglebutton.ts           | 3 ++-
 packages/primeng/src/toggleswitch/toggleswitch.ts           | 3 ++-
 packages/primeng/src/tree/tree.ts                           | 3 ++-
 packages/primeng/src/treetable/treetable.ts                 | 3 ++-
 67 files changed, 134 insertions(+), 67 deletions(-)

diff --git a/packages/primeng/src/autocomplete/autocomplete.ts b/packages/primeng/src/autocomplete/autocomplete.ts
index d8144abd10e..a72bfa756c7 100755
--- a/packages/primeng/src/autocomplete/autocomplete.ts
+++ b/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
diff --git a/packages/primeng/src/avatar/avatar.ts b/packages/primeng/src/avatar/avatar.ts
index 8560dfc235c..e845d2336f1 100755
--- a/packages/primeng/src/avatar/avatar.ts
+++ b/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
diff --git a/packages/primeng/src/avatargroup/avatargroup.ts b/packages/primeng/src/avatargroup/avatargroup.ts
index 758890b31a8..df4a366df70 100755
--- a/packages/primeng/src/avatargroup/avatargroup.ts
+++ b/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
diff --git a/packages/primeng/src/blockui/blockui.ts b/packages/primeng/src/blockui/blockui.ts
index 3f4db624362..333d7b04d68 100755
--- a/packages/primeng/src/blockui/blockui.ts
+++ b/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
diff --git a/packages/primeng/src/breadcrumb/breadcrumb.ts b/packages/primeng/src/breadcrumb/breadcrumb.ts
index fba02018c9c..b7f8f5f43ea 100755
--- a/packages/primeng/src/breadcrumb/breadcrumb.ts
+++ b/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
diff --git a/packages/primeng/src/button/button.ts b/packages/primeng/src/button/button.ts
index 763fcc4e4d6..f3b31ac7e83 100755
--- a/packages/primeng/src/button/button.ts
+++ b/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
diff --git a/packages/primeng/src/calendar/calendar.ts b/packages/primeng/src/calendar/calendar.ts
index 5dcfd919491..db34073f216 100644
--- a/packages/primeng/src/calendar/calendar.ts
+++ b/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
diff --git a/packages/primeng/src/carousel/carousel.ts b/packages/primeng/src/carousel/carousel.ts
index 7df6fe30c6c..7293a28e0c4 100755
--- a/packages/primeng/src/carousel/carousel.ts
+++ b/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
diff --git a/packages/primeng/src/checkbox/checkbox.ts b/packages/primeng/src/checkbox/checkbox.ts
index 8d27fa50152..09cc34a1dbf 100755
--- a/packages/primeng/src/checkbox/checkbox.ts
+++ b/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
diff --git a/packages/primeng/src/confirmdialog/confirmdialog.ts b/packages/primeng/src/confirmdialog/confirmdialog.ts
index 8b15d7e8969..79793c026d0 100755
--- a/packages/primeng/src/confirmdialog/confirmdialog.ts
+++ b/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
diff --git a/packages/primeng/src/confirmpopup/confirmpopup.ts b/packages/primeng/src/confirmpopup/confirmpopup.ts
index 7af7d3bce5f..35bcd438106 100755
--- a/packages/primeng/src/confirmpopup/confirmpopup.ts
+++ b/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
diff --git a/packages/primeng/src/contextmenu/contextmenu.ts b/packages/primeng/src/contextmenu/contextmenu.ts
index 9144832e060..d0b0db8c5a0 100755
--- a/packages/primeng/src/contextmenu/contextmenu.ts
+++ b/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
diff --git a/packages/primeng/src/dataview/dataview.ts b/packages/primeng/src/dataview/dataview.ts
index 21863b44c4d..0d544ff9a60 100755
--- a/packages/primeng/src/dataview/dataview.ts
+++ b/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
diff --git a/packages/primeng/src/datepicker/datepicker.ts b/packages/primeng/src/datepicker/datepicker.ts
index 640823962ae..b03ba5e07eb 100644
--- a/packages/primeng/src/datepicker/datepicker.ts
+++ b/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
diff --git a/packages/primeng/src/dialog/dialog.ts b/packages/primeng/src/dialog/dialog.ts
index da5707acf50..07e0dee2e67 100755
--- a/packages/primeng/src/dialog/dialog.ts
+++ b/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
diff --git a/packages/primeng/src/divider/divider.ts b/packages/primeng/src/divider/divider.ts
index 2acf31e2aff..bb5a2f38de2 100755
--- a/packages/primeng/src/divider/divider.ts
+++ b/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
diff --git a/packages/primeng/src/dock/dock.ts b/packages/primeng/src/dock/dock.ts
index d5674d94287..6e5da11f884 100755
--- a/packages/primeng/src/dock/dock.ts
+++ b/packages/primeng/src/dock/dock.ts
@@ -9,6 +9,7 @@ import { Ripple } from 'primeng/ripple';
 import { TooltipModule } from 'primeng/tooltip';
 import { Nullable } from 'primeng/ts-helpers';
 import { DockStyle } from './style/dockstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * Dock is a navigation component consisting of menuitems.
@@ -116,7 +117,7 @@ export class Dock extends BaseComponent {
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * MenuModel instance to define the action items.
      * @group Props
diff --git a/packages/primeng/src/drawer/drawer.ts b/packages/primeng/src/drawer/drawer.ts
index baa3739c586..19628868328 100755
--- a/packages/primeng/src/drawer/drawer.ts
+++ b/packages/primeng/src/drawer/drawer.ts
@@ -9,6 +9,7 @@ import { TimesIcon } from 'primeng/icons';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { ZIndexUtils } from 'primeng/utils';
 import { DrawerStyle } from './style/drawerstyle';
+import {styleClassAttribute} from "primeng/base";
 
 const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}')]);
 
@@ -104,7 +105,7 @@ export class Drawer extends BaseComponent implements AfterViewInit, OnDestroy {
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Aria label of the close icon.
      * @group Props
diff --git a/packages/primeng/src/dropdown/dropdown.ts b/packages/primeng/src/dropdown/dropdown.ts
index de72bf519a7..546022fd5b6 100755
--- a/packages/primeng/src/dropdown/dropdown.ts
+++ b/packages/primeng/src/dropdown/dropdown.ts
@@ -60,6 +60,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import { Nullable } from 'primeng/ts-helpers';
 import { DropdownChangeEvent, DropdownFilterEvent, DropdownFilterOptions, DropdownLazyLoadEvent } from './dropdown.interface';
 import { DropdownStyle } from './style/dropdownstyle';
+import {styleClassAttribute} from "primeng/base";
 
 export const DROPDOWN_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -408,7 +409,7 @@ export class Dropdown extends BaseComponent implements OnInit, AfterViewInit, Af
      * Style class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Style class of the overlay panel element.
      * @group Props
diff --git a/packages/primeng/src/editor/editor.ts b/packages/primeng/src/editor/editor.ts
index 8f1d727281b..732561b989e 100755
--- a/packages/primeng/src/editor/editor.ts
+++ b/packages/primeng/src/editor/editor.ts
@@ -7,6 +7,7 @@ import { BaseComponent } from 'primeng/basecomponent';
 import { Nullable } from 'primeng/ts-helpers';
 import { EditorInitEvent, EditorSelectionChangeEvent, EditorTextChangeEvent } from './editor.interface';
 import { EditorStyle } from './style/editorstyle';
+import {styleClassAttribute} from "primeng/base";
 
 export const EDITOR_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -88,7 +89,7 @@ export class Editor extends BaseComponent implements AfterContentInit, ControlVa
      * Style class of the container.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Placeholder text to show when editor is empty.
      * @group Props
diff --git a/packages/primeng/src/fileupload/fileupload.ts b/packages/primeng/src/fileupload/fileupload.ts
index be9c9f27689..7b8695393f2 100755
--- a/packages/primeng/src/fileupload/fileupload.ts
+++ b/packages/primeng/src/fileupload/fileupload.ts
@@ -33,6 +33,7 @@ import { VoidListener } from 'primeng/ts-helpers';
 import { Subscription } from 'rxjs';
 import { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEvent, FileSendEvent, FileUploadErrorEvent, FileUploadEvent, FileUploadHandlerEvent, RemoveUploadedFileEvent } from './fileupload.interface';
 import { FileUploadStyle } from './style/fileuploadstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
@@ -306,7 +307,7 @@ export class FileUpload extends BaseComponent implements AfterViewInit, OnInit,
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Width of the image thumbnail in pixels.
      * @group Props
diff --git a/packages/primeng/src/image/image.ts b/packages/primeng/src/image/image.ts
index e5c48d2ca83..786f0c03e2f 100755
--- a/packages/primeng/src/image/image.ts
+++ b/packages/primeng/src/image/image.ts
@@ -10,6 +10,7 @@ import { EyeIcon, RefreshIcon, SearchMinusIcon, SearchPlusIcon, TimesIcon, UndoI
 import { Nullable } from 'primeng/ts-helpers';
 import { ZIndexUtils } from 'primeng/utils';
 import { ImageStyle } from './style/imagestyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * Displays an image with preview and tranformation options. For multiple image, see Galleria.
@@ -110,7 +111,7 @@ export class Image extends BaseComponent implements AfterContentInit {
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Inline style of the element.
      * @group Props
diff --git a/packages/primeng/src/inplace/inplace.ts b/packages/primeng/src/inplace/inplace.ts
index a9dde8cba7a..168ac79ffb0 100755
--- a/packages/primeng/src/inplace/inplace.ts
+++ b/packages/primeng/src/inplace/inplace.ts
@@ -5,6 +5,7 @@ import { BaseComponent } from 'primeng/basecomponent';
 import { ButtonModule } from 'primeng/button';
 import { TimesIcon } from 'primeng/icons';
 import { InplaceStyle } from './style/inplacestyle';
+import {styleClassAttribute} from "primeng/base";
 
 @Component({
     selector: 'p-inplacedisplay, p-inplaceDisplay',
@@ -83,7 +84,7 @@ export class Inplace extends BaseComponent {
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Icon to display in the close button.
      * @group Props
diff --git a/packages/primeng/src/inputgroup/inputgroup.ts b/packages/primeng/src/inputgroup/inputgroup.ts
index 2a6379bddf0..887b094ac3c 100755
--- a/packages/primeng/src/inputgroup/inputgroup.ts
+++ b/packages/primeng/src/inputgroup/inputgroup.ts
@@ -3,6 +3,7 @@ import { Component, inject, Input, NgModule } from '@angular/core';
 import { SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { InputGroupStyle } from './style/inputgroupstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * InputGroup displays text, icon, buttons and other content can be grouped next to an input.
@@ -31,7 +32,7 @@ export class InputGroup extends BaseComponent {
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
 
     _componentStyle = inject(InputGroupStyle);
 }
diff --git a/packages/primeng/src/inputicon/inputicon.ts b/packages/primeng/src/inputicon/inputicon.ts
index 64ea7e6159a..961406c30f3 100755
--- a/packages/primeng/src/inputicon/inputicon.ts
+++ b/packages/primeng/src/inputicon/inputicon.ts
@@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component, HostBinding, inject, Input, NgModul
 import { SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { InputIconStyle } from './style/inputiconstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * InputIcon displays an icon.
@@ -26,7 +27,7 @@ export class InputIcon extends BaseComponent {
      * Style class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
 
     @HostBinding('class') get hostClasses(): string {
         return this.styleClass;
diff --git a/packages/primeng/src/inputmask/inputmask.ts b/packages/primeng/src/inputmask/inputmask.ts
index 6637642dd01..4667724752e 100755
--- a/packages/primeng/src/inputmask/inputmask.ts
+++ b/packages/primeng/src/inputmask/inputmask.ts
@@ -37,6 +37,7 @@ import { InputText } from 'primeng/inputtext';
 import { Nullable } from 'primeng/ts-helpers';
 import { Caret } from './inputmask.interface';
 import { InputMaskStyle } from './style/inputmaskstyle';
+import {styleClassAttribute} from "primeng/base";
 
 export const INPUTMASK_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -130,7 +131,7 @@ export class InputMask extends BaseComponent implements OnInit, ControlValueAcce
      * Style class of the input field.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Advisory information to display on input.
      * @group Props
diff --git a/packages/primeng/src/inputotp/inputotp.ts b/packages/primeng/src/inputotp/inputotp.ts
index dbcaa951e03..f3db086ddc7 100644
--- a/packages/primeng/src/inputotp/inputotp.ts
+++ b/packages/primeng/src/inputotp/inputotp.ts
@@ -6,6 +6,7 @@ import { AutoFocus } from 'primeng/autofocus';
 import { BaseComponent } from 'primeng/basecomponent';
 import { InputText } from 'primeng/inputtext';
 import { InputOtpStyle } from './style/inputotpstyle';
+import {styleClassAttribute} from "primeng/base";
 
 export const INPUT_OTP_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -133,7 +134,7 @@ export class InputOtp extends BaseComponent implements AfterContentInit {
      * Style class of the input element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Mask pattern.
      * @group Props
diff --git a/packages/primeng/src/inputswitch/inputswitch.ts b/packages/primeng/src/inputswitch/inputswitch.ts
index 592136dff5a..d24fbd745ae 100755
--- a/packages/primeng/src/inputswitch/inputswitch.ts
+++ b/packages/primeng/src/inputswitch/inputswitch.ts
@@ -6,6 +6,7 @@ import { AutoFocusModule } from 'primeng/autofocus';
 import { BaseComponent } from 'primeng/basecomponent';
 import { InputSwitchChangeEvent } from './inputswitch.interface';
 import { InputSwitchStyle } from './style/inputswitchstyle';
+import {styleClassAttribute} from "primeng/base";
 
 export const INPUTSWITCH_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -59,7 +60,7 @@ export class InputSwitch extends BaseComponent {
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Index of the element in tabbing order.
      * @group Props
diff --git a/packages/primeng/src/knob/knob.ts b/packages/primeng/src/knob/knob.ts
index 0e56d7a7c6d..ef3e9b87b4b 100755
--- a/packages/primeng/src/knob/knob.ts
+++ b/packages/primeng/src/knob/knob.ts
@@ -6,6 +6,7 @@ import { SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { VoidListener } from 'primeng/ts-helpers';
 import { KnobStyle } from './style/knobstyle';
+import {styleClassAttribute} from "primeng/base";
 
 export const KNOB_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -58,7 +59,7 @@ export class Knob 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
diff --git a/packages/primeng/src/listbox/listbox.ts b/packages/primeng/src/listbox/listbox.ts
index 550d8579967..4779b22e5dc 100755
--- a/packages/primeng/src/listbox/listbox.ts
+++ b/packages/primeng/src/listbox/listbox.ts
@@ -36,6 +36,7 @@ import { Nullable } from 'primeng/ts-helpers';
 import { Subscription } from 'rxjs';
 import { ListboxChangeEvent, ListboxClickEvent, ListboxDoubleClickEvent, ListboxFilterEvent, ListboxFilterOptions, ListboxSelectAllChangeEvent } from './listbox.interface';
 import { ListBoxStyle } from './style/listboxstyle';
+import {styleClassAttribute} from "primeng/base";
 
 export const LISTBOX_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -378,7 +379,7 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit,
      * Style class of the container.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Inline style of the list element.
      * @group Props
diff --git a/packages/primeng/src/megamenu/megamenu.ts b/packages/primeng/src/megamenu/megamenu.ts
index 161d4ed4e1f..6a2a1e39395 100755
--- a/packages/primeng/src/megamenu/megamenu.ts
+++ b/packages/primeng/src/megamenu/megamenu.ts
@@ -31,6 +31,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import { VoidListener } from 'primeng/ts-helpers';
 import { ZIndexUtils } from 'primeng/utils';
 import { MegaMenuStyle } from './style/megamenustyle';
+import {styleClassAttribute} from "primeng/base";
 
 @Component({
     selector: 'p-megaMenuSub, p-megamenu-sub',
@@ -468,7 +469,7 @@ export class MegaMenu extends BaseComponent implements OnDestroy, OnInit {
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Defines the orientation.
      * @group Props
diff --git a/packages/primeng/src/menu/menu.ts b/packages/primeng/src/menu/menu.ts
index 082e35e5313..cda23c24b6b 100755
--- a/packages/primeng/src/menu/menu.ts
+++ b/packages/primeng/src/menu/menu.ts
@@ -37,6 +37,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { ZIndexUtils } from 'primeng/utils';
 import { MenuStyle } from './style/menustyle';
+import {styleClassAttribute} from "primeng/base";
 
 @Pipe({
     name: 'safeHtml',
@@ -279,7 +280,7 @@ export class Menu extends BaseComponent implements 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 (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
      * @group Props
diff --git a/packages/primeng/src/menubar/menubar.ts b/packages/primeng/src/menubar/menubar.ts
index c7a7c59b302..71cdc599b73 100755
--- a/packages/primeng/src/menubar/menubar.ts
+++ b/packages/primeng/src/menubar/menubar.ts
@@ -37,6 +37,7 @@ import { ZIndexUtils } from 'primeng/utils';
 import { interval, Subject, Subscription } from 'rxjs';
 import { debounce, filter } from 'rxjs/operators';
 import { MenuBarStyle } from './style/menubarstyle';
+import {styleClassAttribute} from "primeng/base";
 
 @Injectable()
 export class MenubarService {
@@ -434,7 +435,7 @@ export class Menubar extends BaseComponent implements OnDestroy, OnInit {
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Whether to automatically manage layering.
      * @group Props
diff --git a/packages/primeng/src/message/message.ts b/packages/primeng/src/message/message.ts
index f86b1d28453..e5e9e5ec3c2 100755
--- a/packages/primeng/src/message/message.ts
+++ b/packages/primeng/src/message/message.ts
@@ -6,6 +6,7 @@ import { BaseComponent } from 'primeng/basecomponent';
 import { CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesCircleIcon, TimesIcon } from 'primeng/icons';
 import { Ripple } from 'primeng/ripple';
 import { MessageStyle } from './style/messagestyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * Message groups a collection of contents in tabs.
@@ -119,7 +120,7 @@ export class Message extends BaseComponent {
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Whether the message can be closed manually using the close icon.
      * @group Props
diff --git a/packages/primeng/src/messages/messages.ts b/packages/primeng/src/messages/messages.ts
index ee5ee47fdc5..a60f9a041d0 100644
--- a/packages/primeng/src/messages/messages.ts
+++ b/packages/primeng/src/messages/messages.ts
@@ -8,6 +8,7 @@ import { CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesCircleIcon, Ti
 import { Ripple } from 'primeng/ripple';
 import { Subscription, timer } from 'rxjs';
 import { MessagesStyle } from './style/messagesstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * Messages is used to display alerts inline.
@@ -132,7 +133,7 @@ export class Messages extends BaseComponent implements AfterContentInit, OnDestr
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Whether displaying services messages are enabled.
      * @group Props
diff --git a/packages/primeng/src/multiselect/multiselect.ts b/packages/primeng/src/multiselect/multiselect.ts
index 60b440f69be..0de3ca1a52a 100755
--- a/packages/primeng/src/multiselect/multiselect.ts
+++ b/packages/primeng/src/multiselect/multiselect.ts
@@ -65,6 +65,7 @@ import { Tooltip } from 'primeng/tooltip';
 import { Nullable } from 'primeng/ts-helpers';
 import { MultiSelectBlurEvent, MultiSelectChangeEvent, MultiSelectFilterEvent, MultiSelectFilterOptions, MultiSelectFocusEvent, MultiSelectLazyLoadEvent, MultiSelectRemoveEvent, MultiSelectSelectAllChangeEvent } from './multiselect.interface';
 import { MultiSelectStyle } from './style/multiselectstyle';
+import {styleClassAttribute} from "primeng/base";
 
 export const MULTISELECT_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -472,7 +473,7 @@ export class MultiSelect extends BaseComponent implements OnInit, AfterViewInit,
      * Style class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Inline style of the overlay panel.
      * @group Props
diff --git a/packages/primeng/src/orderlist/orderlist.ts b/packages/primeng/src/orderlist/orderlist.ts
index b5753e2d89c..9cf29916b3e 100755
--- a/packages/primeng/src/orderlist/orderlist.ts
+++ b/packages/primeng/src/orderlist/orderlist.ts
@@ -12,6 +12,7 @@ import { Ripple } from 'primeng/ripple';
 import { Nullable } from 'primeng/ts-helpers';
 import { OrderListFilterEvent, OrderListFilterOptions, OrderListSelectionChangeEvent } from './orderlist.interface';
 import { OrderListStyle } from './style/orderliststyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * OrderList is used to manage the order of a collection.
@@ -120,7 +121,7 @@ export class OrderList extends BaseComponent implements AfterContentInit {
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
 
     /**
      * Index of the element in tabbing order.
diff --git a/packages/primeng/src/organizationchart/organizationchart.ts b/packages/primeng/src/organizationchart/organizationchart.ts
index 6c7f09ea61d..19f992ad80b 100755
--- a/packages/primeng/src/organizationchart/organizationchart.ts
+++ b/packages/primeng/src/organizationchart/organizationchart.ts
@@ -27,6 +27,7 @@ import { Nullable } from 'primeng/ts-helpers';
 import { Subject, Subscription } from 'rxjs';
 import { OrganizationChartNodeCollapseEvent, OrganizationChartNodeExpandEvent, OrganizationChartNodeSelectEvent, OrganizationChartNodeUnSelectEvent } from './organizationchart.interface';
 import { OrganizationChartStyle } from './style/organizationchartstyle';
+import {styleClassAttribute} from "primeng/base";
 
 @Component({
     selector: '[pOrganizationChartNode]',
@@ -195,7 +196,7 @@ export class OrganizationChart extends BaseComponent implements AfterContentInit
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Defines the selection mode.
      * @group Props
diff --git a/packages/primeng/src/overlaybadge/overlaybadge.ts b/packages/primeng/src/overlaybadge/overlaybadge.ts
index 56f17f4fcc7..1413fd3c3c7 100755
--- a/packages/primeng/src/overlaybadge/overlaybadge.ts
+++ b/packages/primeng/src/overlaybadge/overlaybadge.ts
@@ -4,6 +4,7 @@ import { SharedModule } from 'primeng/api';
 import { BadgeModule } from 'primeng/badge';
 import { BaseComponent } from 'primeng/basecomponent';
 import { OverlayBadgeStyle } from './style/overlaybadgestyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * OverlayPanel is a container component positioned as connected to its target.
@@ -28,7 +29,7 @@ export class OverlayBadge extends BaseComponent {
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Inline style of the element.
      * @group Props
diff --git a/packages/primeng/src/overlaypanel/overlaypanel.ts b/packages/primeng/src/overlaypanel/overlaypanel.ts
index d2d9c3dd294..a20ee5ef88a 100755
--- a/packages/primeng/src/overlaypanel/overlaypanel.ts
+++ b/packages/primeng/src/overlaypanel/overlaypanel.ts
@@ -29,6 +29,7 @@ import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { ZIndexUtils } from 'primeng/utils';
 import { Subscription } from 'rxjs';
 import { PopoverStyle } from './style/popoverstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * OverlayPanel is a container component positioned as connected to its target.
@@ -122,7 +123,7 @@ export class OverlayPanel extends BaseComponent implements AfterContentInit, OnD
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      *  Target element to attach the panel, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
      * @group Props
diff --git a/packages/primeng/src/paginator/paginator.ts b/packages/primeng/src/paginator/paginator.ts
index dec932b77aa..0b3308ad9d6 100755
--- a/packages/primeng/src/paginator/paginator.ts
+++ b/packages/primeng/src/paginator/paginator.ts
@@ -11,6 +11,7 @@ import { Select } from 'primeng/select';
 import { Nullable } from 'primeng/ts-helpers';
 import { PaginatorState } from './paginator.interface';
 import { PaginatorStyle } from './style/paginatorstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * Paginator is a generic component to display content in paged format.
@@ -148,7 +149,7 @@ export class Paginator extends BaseComponent implements OnInit, OnChanges {
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Whether to show it even there is only one page.
      * @group Props
diff --git a/packages/primeng/src/panel/panel.ts b/packages/primeng/src/panel/panel.ts
index 1c60c45683b..69c257a8ff7 100755
--- a/packages/primeng/src/panel/panel.ts
+++ b/packages/primeng/src/panel/panel.ts
@@ -9,6 +9,7 @@ import { MinusIcon, PlusIcon } from 'primeng/icons';
 import { Ripple } from 'primeng/ripple';
 import { Nullable } from 'primeng/ts-helpers';
 import { PanelStyle } from './style/panelstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * Custom panel toggle event, emits before panel toggle.
@@ -206,7 +207,7 @@ export class Panel extends BaseComponent implements BlockableUI {
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Position of the icons.
      * @group Props
diff --git a/packages/primeng/src/panelmenu/panelmenu.ts b/packages/primeng/src/panelmenu/panelmenu.ts
index 4795fb79223..9690a2a1ff4 100644
--- a/packages/primeng/src/panelmenu/panelmenu.ts
+++ b/packages/primeng/src/panelmenu/panelmenu.ts
@@ -29,6 +29,7 @@ import { BaseComponent } from 'primeng/basecomponent';
 import { AngleDownIcon, AngleRightIcon, ChevronDownIcon, ChevronRightIcon } from 'primeng/icons';
 import { TooltipModule } from 'primeng/tooltip';
 import { PanelMenuStyle } from './style/panelmenustyle';
+import {styleClassAttribute} from "primeng/base";
 
 @Component({
     selector: 'p-panelMenuSub, p-panelmenu-sub',
@@ -871,7 +872,7 @@ export class PanelMenu extends BaseComponent implements AfterContentInit {
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Whether multiple tabs can be activated at the same time or not.
      * @group Props
diff --git a/packages/primeng/src/picklist/picklist.ts b/packages/primeng/src/picklist/picklist.ts
index b529063c025..11c0b684042 100755
--- a/packages/primeng/src/picklist/picklist.ts
+++ b/packages/primeng/src/picklist/picklist.ts
@@ -42,6 +42,7 @@ import {
     PickListTargetSelectEvent
 } from './picklist.interface';
 import { PickListStyle } from './style/pickliststyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * PickList is used to reorder items between different lists.
@@ -471,7 +472,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Inline style of the source list element.
      * @group Props
diff --git a/packages/primeng/src/popover/popover.ts b/packages/primeng/src/popover/popover.ts
index 220c90b95a4..dd98b30373b 100755
--- a/packages/primeng/src/popover/popover.ts
+++ b/packages/primeng/src/popover/popover.ts
@@ -11,6 +11,7 @@ import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { ZIndexUtils } from 'primeng/utils';
 import { Subscription } from 'rxjs';
 import { PopoverStyle } from './style/popoverstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * Popover is a container component that can overlay other components on page.
@@ -104,7 +105,7 @@ export class Popover extends BaseComponent implements OnDestroy {
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      *  Target element to attach the panel, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
      * @group Props
diff --git a/packages/primeng/src/progressbar/progressbar.ts b/packages/primeng/src/progressbar/progressbar.ts
index 1c00c41db8f..69cd7ac520c 100755
--- a/packages/primeng/src/progressbar/progressbar.ts
+++ b/packages/primeng/src/progressbar/progressbar.ts
@@ -3,6 +3,7 @@ import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, inj
 import { SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { ProgressBarStyle } from './style/progressbarstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * ProgressBar is a process status indicator.
@@ -58,7 +59,7 @@ export class ProgressBar extends BaseComponent {
      * Style class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Style class of the value element.
      * @group Props
diff --git a/packages/primeng/src/progressspinner/progressspinner.ts b/packages/primeng/src/progressspinner/progressspinner.ts
index 71e50efde22..297da69fb6e 100755
--- a/packages/primeng/src/progressspinner/progressspinner.ts
+++ b/packages/primeng/src/progressspinner/progressspinner.ts
@@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component, inject, Input, NgModule, ViewEncaps
 import { SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { ProgressSpinnerStyle } from './style/progressspinnerstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * ProgressSpinner is a process status indicator.
@@ -28,7 +29,7 @@ export class ProgressSpinner extends BaseComponent {
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Inline style of the element.
      * @group Props
diff --git a/packages/primeng/src/radiobutton/radiobutton.ts b/packages/primeng/src/radiobutton/radiobutton.ts
index e4d84076a3f..65ce49688db 100755
--- a/packages/primeng/src/radiobutton/radiobutton.ts
+++ b/packages/primeng/src/radiobutton/radiobutton.ts
@@ -7,6 +7,7 @@ import { BaseComponent } from 'primeng/basecomponent';
 import { Nullable } from 'primeng/ts-helpers';
 import { RadioButtonClickEvent } from './radiobutton.interface';
 import { RadioButtonStyle } from './style/radiobuttonstyle';
+import {styleClassAttribute} from "primeng/base";
 
 export const RADIO_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -155,7 +156,7 @@ export class RadioButton extends BaseComponent implements ControlValueAccessor,
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * When present, it specifies that the component should automatically get focus on load.
      * @group Props
diff --git a/packages/primeng/src/scrollpanel/scrollpanel.ts b/packages/primeng/src/scrollpanel/scrollpanel.ts
index 8fd7a8700b1..c5f18efad11 100755
--- a/packages/primeng/src/scrollpanel/scrollpanel.ts
+++ b/packages/primeng/src/scrollpanel/scrollpanel.ts
@@ -5,6 +5,7 @@ import { SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { Nullable } from 'primeng/ts-helpers';
 import { ScrollPanelStyle } from './style/scrollpanelstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * ScrollPanel is a cross browser, lightweight and themable alternative to native browser scrollbar.
@@ -69,7 +70,7 @@ export class ScrollPanel extends BaseComponent implements AfterViewInit, OnDestr
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Step factor to scroll the content while pressing the arrow keys.
      * @group Props
diff --git a/packages/primeng/src/select/select.ts b/packages/primeng/src/select/select.ts
index 325b9d2278a..6f07a08af62 100755
--- a/packages/primeng/src/select/select.ts
+++ b/packages/primeng/src/select/select.ts
@@ -61,6 +61,7 @@ import { Tooltip } from 'primeng/tooltip';
 import { Nullable } from 'primeng/ts-helpers';
 import { SelectChangeEvent, SelectFilterEvent, SelectFilterOptions, SelectLazyLoadEvent } from './select.interface';
 import { SelectStyle } from './style/selectstyle';
+import {styleClassAttribute} from "primeng/base";
 
 export const SELECT_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -411,7 +412,7 @@ export class Select extends BaseComponent implements OnInit, AfterViewInit, Afte
      * Style class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Style class of the overlay panel element.
      * @group Props
diff --git a/packages/primeng/src/selectbutton/selectbutton.ts b/packages/primeng/src/selectbutton/selectbutton.ts
index 2a604a42121..170b2ecebf4 100755
--- a/packages/primeng/src/selectbutton/selectbutton.ts
+++ b/packages/primeng/src/selectbutton/selectbutton.ts
@@ -8,6 +8,7 @@ import { Ripple } from 'primeng/ripple';
 import { ToggleButton } from 'primeng/togglebutton';
 import { SelectButtonChangeEvent, SelectButtonOptionClickEvent } from './selectbutton.interface';
 import { SelectButtonStyle } from './style/selectbuttonstyle';
+import {styleClassAttribute} from "primeng/base";
 
 export const SELECTBUTTON_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -106,7 +107,7 @@ export class SelectButton extends BaseComponent implements ControlValueAccessor
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      * @group Props
diff --git a/packages/primeng/src/skeleton/skeleton.ts b/packages/primeng/src/skeleton/skeleton.ts
index e741ed59fe3..0f0880fdba1 100755
--- a/packages/primeng/src/skeleton/skeleton.ts
+++ b/packages/primeng/src/skeleton/skeleton.ts
@@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component, inject, Input, NgModule, ViewEncaps
 import { SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { SkeletonStyle } from './style/skeletonstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * Skeleton is a placeholder to display instead of the actual content.
@@ -22,7 +23,7 @@ export class Skeleton extends BaseComponent {
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Inline style of the element.
      * @group Props
diff --git a/packages/primeng/src/slider/slider.ts b/packages/primeng/src/slider/slider.ts
index e0f94eaf943..3c6c4b54d14 100755
--- a/packages/primeng/src/slider/slider.ts
+++ b/packages/primeng/src/slider/slider.ts
@@ -8,6 +8,7 @@ import { BaseComponent } from 'primeng/basecomponent';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { SliderChangeEvent, SliderSlideEndEvent } from './slider.interface';
 import { SliderStyle } from './style/sliderstyle';
+import {styleClassAttribute} from "primeng/base";
 
 export const SLIDER_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -181,7 +182,7 @@ export class Slider extends BaseComponent implements OnDestroy, ControlValueAcce
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Defines a string that labels the input for accessibility.
      * @group Props
diff --git a/packages/primeng/src/splitbutton/splitbutton.ts b/packages/primeng/src/splitbutton/splitbutton.ts
index 3ade6043be9..d5c3ba7f57a 100755
--- a/packages/primeng/src/splitbutton/splitbutton.ts
+++ b/packages/primeng/src/splitbutton/splitbutton.ts
@@ -11,6 +11,7 @@ import { TieredMenu } from 'primeng/tieredmenu';
 import { TooltipModule } from 'primeng/tooltip';
 import { ButtonProps, MenuButtonProps } from './splitbutton.interface';
 import { SplitButtonStyle } from './style/splitbuttonstyle';
+import {styleClassAttribute} from "primeng/base";
 
 type SplitButtonIconPosition = 'left' | 'right';
 /**
@@ -186,7 +187,7 @@ export class SplitButton extends BaseComponent {
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Inline style of the overlay menu.
      * @group Props
diff --git a/packages/primeng/src/splitter/splitter.ts b/packages/primeng/src/splitter/splitter.ts
index aa7fd7b68b6..0b0ad9bdff5 100755
--- a/packages/primeng/src/splitter/splitter.ts
+++ b/packages/primeng/src/splitter/splitter.ts
@@ -6,6 +6,7 @@ import { BaseComponent } from 'primeng/basecomponent';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { SplitterResizeEndEvent, SplitterResizeStartEvent } from './splitter.interface';
 import { SplitterStyle } from './style/splitterstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * Splitter is utilized to separate and resize panels.
@@ -59,7 +60,7 @@ export class Splitter extends BaseComponent {
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Style class of the panel.
      * @group Props
diff --git a/packages/primeng/src/steps/steps.ts b/packages/primeng/src/steps/steps.ts
index c4ffc888109..21e9ca3238a 100755
--- a/packages/primeng/src/steps/steps.ts
+++ b/packages/primeng/src/steps/steps.ts
@@ -8,6 +8,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import { Nullable } from 'primeng/ts-helpers';
 import { Subscription } from 'rxjs';
 import { StepsStyle } from './style/stepsstyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * Steps components is an indicator for the steps in a wizard workflow.
@@ -112,7 +113,7 @@ export class Steps extends BaseComponent implements OnInit, OnDestroy {
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
      * @group Props
diff --git a/packages/primeng/src/table/table.ts b/packages/primeng/src/table/table.ts
index d36900f36cf..79c8deff78a 100644
--- a/packages/primeng/src/table/table.ts
+++ b/packages/primeng/src/table/table.ts
@@ -100,6 +100,7 @@ import {
     TableRowUnSelectEvent,
     TableSelectAllChangeEvent
 } from './table.interface';
+import {styleClassAttribute} from "primeng/base";
 
 @Injectable()
 export class TableService {
@@ -3486,7 +3487,7 @@ export class Table extends BaseComponent implements OnInit, AfterViewInit, After
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Inline style of the table.
      * @group Props
diff --git a/packages/primeng/src/tabmenu/tabmenu.ts b/packages/primeng/src/tabmenu/tabmenu.ts
index 57790e97032..727b0032227 100644
--- a/packages/primeng/src/tabmenu/tabmenu.ts
+++ b/packages/primeng/src/tabmenu/tabmenu.ts
@@ -31,6 +31,7 @@ import { Ripple } from 'primeng/ripple';
 import { TooltipModule } from 'primeng/tooltip';
 import { Nullable } from 'primeng/ts-helpers';
 import { TabMenuStyle } from './style/tabmenustyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * TabMenu is a navigation component that displays items as tab headers.
@@ -180,7 +181,7 @@ export class TabMenu extends BaseComponent implements AfterContentInit, AfterVie
      * Class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Defines a string value that labels an interactive element.
      * @group Props
diff --git a/packages/primeng/src/tabview/tabview.ts b/packages/primeng/src/tabview/tabview.ts
index f19b8ba3da6..5ce320feeaa 100755
--- a/packages/primeng/src/tabview/tabview.ts
+++ b/packages/primeng/src/tabview/tabview.ts
@@ -31,6 +31,7 @@ import { Nullable } from 'primeng/ts-helpers';
 import { Subscription } from 'rxjs';
 import { TabsStyle } from './style/tabsstyle';
 import { TabViewChangeEvent, TabViewCloseEvent } from './tabview.interface';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * TabPanel is a helper component for TabView component.
@@ -372,7 +373,7 @@ export class TabView extends BaseComponent implements AfterContentInit, AfterVie
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Whether tab close is controlled at onClose event or not.
      * @defaultValue false
diff --git a/packages/primeng/src/terminal/terminal.ts b/packages/primeng/src/terminal/terminal.ts
index d60e5cd580c..0e663fa733c 100755
--- a/packages/primeng/src/terminal/terminal.ts
+++ b/packages/primeng/src/terminal/terminal.ts
@@ -7,6 +7,7 @@ import { BaseComponent } from 'primeng/basecomponent';
 import { Subscription } from 'rxjs';
 import { TerminalStyle } from './style/terminalstyle';
 import { TerminalService } from './terminalservice';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * Terminal is a text based user interface.
@@ -56,7 +57,7 @@ export class Terminal extends BaseComponent implements AfterViewInit, AfterViewC
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
 
     commands: any[] = [];
 
diff --git a/packages/primeng/src/tieredmenu/tieredmenu.ts b/packages/primeng/src/tieredmenu/tieredmenu.ts
index bf1d87ba52e..8eaed5a4545 100755
--- a/packages/primeng/src/tieredmenu/tieredmenu.ts
+++ b/packages/primeng/src/tieredmenu/tieredmenu.ts
@@ -36,6 +36,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { ZIndexUtils } from 'primeng/utils';
 import { TieredMenuStyle } from './style/tieredmenustyle';
+import {styleClassAttribute} from "primeng/base";
 
 @Component({
     selector: 'p-tieredMenuSub, p-tieredmenusub',
@@ -420,7 +421,7 @@ export class TieredMenu 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
diff --git a/packages/primeng/src/timeline/timeline.ts b/packages/primeng/src/timeline/timeline.ts
index 446e6bdf301..fee704c3269 100755
--- a/packages/primeng/src/timeline/timeline.ts
+++ b/packages/primeng/src/timeline/timeline.ts
@@ -4,6 +4,7 @@ import { BlockableUI, PrimeTemplate, SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { Nullable } from 'primeng/ts-helpers';
 import { TimelineStyle } from './style/timelinestyle';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * Timeline visualizes a series of chained events.
@@ -65,7 +66,7 @@ export class Timeline extends BaseComponent implements AfterContentInit, Blockab
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Position of the timeline bar relative to the content. Valid values are "left", "right" for vertical layout and "top", "bottom" for horizontal layout.
      * @group Props
diff --git a/packages/primeng/src/toast/toast.ts b/packages/primeng/src/toast/toast.ts
index d4643c54262..c8ea445ab63 100755
--- a/packages/primeng/src/toast/toast.ts
+++ b/packages/primeng/src/toast/toast.ts
@@ -30,6 +30,7 @@ import { ZIndexUtils } from 'primeng/utils';
 import { Subscription } from 'rxjs';
 import { ToastStyle } from './style/toaststyle';
 import { ToastCloseEvent, ToastItemCloseEvent, ToastPositionType } from './toast.interface';
+import {styleClassAttribute} from "primeng/base";
 
 @Component({
     selector: 'p-toastItem',
@@ -287,7 +288,7 @@ export class Toast extends BaseComponent implements OnInit, OnDestroy {
      * Inline class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
 
     /**
      * Position of the toast in viewport.
diff --git a/packages/primeng/src/togglebutton/togglebutton.ts b/packages/primeng/src/togglebutton/togglebutton.ts
index 0e3e77a8f58..be656a8d301 100755
--- a/packages/primeng/src/togglebutton/togglebutton.ts
+++ b/packages/primeng/src/togglebutton/togglebutton.ts
@@ -8,6 +8,7 @@ import { Ripple } from 'primeng/ripple';
 import { Nullable } from 'primeng/ts-helpers';
 import { ToggleButtonStyle } from './style/togglebuttonstyle';
 import { ToggleButtonChangeEvent } from './togglebutton.interface';
+import {styleClassAttribute} from "primeng/base";
 
 export const TOGGLEBUTTON_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -109,7 +110,7 @@ export class ToggleButton extends BaseComponent implements ControlValueAccessor
      * Style class of the element.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     @HostBinding('class') get hostClass() {
         return this.styleClass || '';
     }
diff --git a/packages/primeng/src/toggleswitch/toggleswitch.ts b/packages/primeng/src/toggleswitch/toggleswitch.ts
index b740c1fbd10..53d93cc4ac3 100755
--- a/packages/primeng/src/toggleswitch/toggleswitch.ts
+++ b/packages/primeng/src/toggleswitch/toggleswitch.ts
@@ -6,6 +6,7 @@ import { AutoFocus } from 'primeng/autofocus';
 import { BaseComponent } from 'primeng/basecomponent';
 import { ToggleSwitchStyle } from './style/toggleswitchstyle';
 import { ToggleSwitchChangeEvent } from './toggleswitch.interface';
+import {styleClassAttribute} from "primeng/base";
 
 /**
  * Context interface for the handle template.
@@ -72,7 +73,7 @@ export class ToggleSwitch extends BaseComponent implements AfterContentInit {
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Index of the element in tabbing order.
      * @group Props
diff --git a/packages/primeng/src/tree/tree.ts b/packages/primeng/src/tree/tree.ts
index cddb1c1e592..d7d4a046ab1 100755
--- a/packages/primeng/src/tree/tree.ts
+++ b/packages/primeng/src/tree/tree.ts
@@ -47,6 +47,7 @@ import {
     TreeScrollEvent,
     TreeScrollIndexChangeEvent
 } from './tree.interface';
+import {styleClassAttribute} from "primeng/base";
 
 @Component({
     selector: 'p-treeNode',
@@ -826,7 +827,7 @@ export class Tree extends BaseComponent implements OnInit, OnChanges, OnDestroy,
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Context menu instance.
      * @group Props
diff --git a/packages/primeng/src/treetable/treetable.ts b/packages/primeng/src/treetable/treetable.ts
index 71bda005929..d3462b76614 100755
--- a/packages/primeng/src/treetable/treetable.ts
+++ b/packages/primeng/src/treetable/treetable.ts
@@ -78,6 +78,7 @@ import {
     TreeTablePaginatorState,
     TreeTableSortEvent
 } from './treetable.interface';
+import {styleClassAttribute} from "primeng/base";
 
 @Injectable()
 export class TreeTableService {
@@ -287,7 +288,7 @@ export class TreeTable extends BaseComponent implements AfterContentInit, OnInit
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    @Input({ transform: styleClassAttribute }) styleClass: string | undefined;
     /**
      * Inline style of the table.
      * @group Props