Fixed merge with v18

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/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/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/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/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

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

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

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

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

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

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

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