From b74e1df2be8891cc1e5135412600e6229e9317e8 Mon Sep 17 00:00:00 2001 From: Enrico Messall Date: Fri, 18 Oct 2024 18:32:01 +0200 Subject: [PATCH] fix: primefaces#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 | 3 ++- .../components/autocomplete/autocomplete.ts | 5 ++-- src/app/components/avatar/avatar.ts | 3 ++- src/app/components/avatargroup/avatargroup.ts | 3 ++- src/app/components/base/base.ts | 16 +++++++++++++ src/app/components/base/public_api.ts | 1 + .../components/basecomponent/basecomponent.ts | 23 +++---------------- src/app/components/blockui/blockui.ts | 3 ++- src/app/components/breadcrumb/breadcrumb.ts | 3 ++- src/app/components/button/button.ts | 3 ++- src/app/components/calendar/calendar.ts | 5 ++-- src/app/components/card/card.ts | 3 ++- src/app/components/carousel/carousel.ts | 3 ++- .../components/cascadeselect/cascadeselect.ts | 3 ++- src/app/components/checkbox/checkbox.ts | 3 ++- src/app/components/chip/chip.ts | 3 ++- src/app/components/colorpicker/colorpicker.ts | 3 ++- .../components/confirmdialog/confirmdialog.ts | 3 ++- .../components/confirmpopup/confirmpopup.ts | 3 ++- src/app/components/contextmenu/contextmenu.ts | 3 ++- src/app/components/dataview/dataview.ts | 3 ++- src/app/components/datepicker/datepicker.ts | 5 ++-- src/app/components/dialog/dialog.ts | 3 ++- src/app/components/divider/divider.ts | 3 ++- src/app/components/dock/dock.ts | 3 ++- src/app/components/drawer/drawer.ts | 3 ++- src/app/components/dropdown/dropdown.ts | 3 ++- src/app/components/editor/editor.ts | 3 ++- src/app/components/fieldset/fieldset.ts | 3 ++- src/app/components/fileupload/fileupload.ts | 3 ++- src/app/components/image/image.ts | 3 ++- src/app/components/inplace/inplace.ts | 3 ++- src/app/components/inputgroup/inputgroup.ts | 3 ++- .../inputgroupaddon/inputgroupaddon.ts | 3 ++- src/app/components/inputicon/inputicon.ts | 3 ++- src/app/components/inputmask/inputmask.ts | 3 ++- src/app/components/inputnumber/inputnumber.ts | 5 ++-- src/app/components/inputotp/inputotp.ts | 3 ++- src/app/components/inputswitch/inputswitch.ts | 3 ++- src/app/components/knob/knob.ts | 3 ++- src/app/components/listbox/listbox.ts | 3 ++- src/app/components/megamenu/megamenu.ts | 3 ++- src/app/components/menu/menu.ts | 3 ++- src/app/components/menubar/menubar.ts | 3 ++- src/app/components/message/message.ts | 3 ++- src/app/components/messages/messages.ts | 3 ++- src/app/components/metergroup/metergroup.ts | 3 ++- src/app/components/multiselect/multiselect.ts | 3 ++- src/app/components/orderlist/orderlist.ts | 3 ++- .../organizationchart/organizationchart.ts | 3 ++- .../components/overlaybadge/overlaybadge.ts | 3 ++- .../components/overlaypanel/overlaypanel.ts | 3 ++- src/app/components/paginator/paginator.ts | 3 ++- src/app/components/panel/panel.ts | 3 ++- src/app/components/panelmenu/panelmenu.ts | 3 ++- src/app/components/password/password.ts | 5 ++-- src/app/components/picklist/picklist.ts | 3 ++- src/app/components/popover/popover.ts | 3 ++- src/app/components/progressbar/progressbar.ts | 3 ++- .../progressspinner/progressspinner.ts | 3 ++- src/app/components/radiobutton/radiobutton.ts | 3 ++- src/app/components/scrollpanel/scrollpanel.ts | 3 ++- src/app/components/scrolltop/scrolltop.ts | 3 ++- src/app/components/select/select.ts | 3 ++- .../components/selectbutton/selectbutton.ts | 3 ++- src/app/components/sidebar/sidebar.ts | 3 ++- src/app/components/skeleton/skeleton.ts | 3 ++- src/app/components/slider/slider.ts | 3 ++- src/app/components/splitbutton/splitbutton.ts | 3 ++- src/app/components/splitter/splitter.ts | 3 ++- src/app/components/steps/steps.ts | 3 ++- src/app/components/table/table.ts | 5 ++-- src/app/components/tabmenu/tabmenu.ts | 3 ++- src/app/components/tabview/tabview.ts | 3 ++- src/app/components/tag/tag.ts | 3 ++- src/app/components/terminal/terminal.ts | 3 ++- src/app/components/tieredmenu/tieredmenu.ts | 3 ++- src/app/components/timeline/timeline.ts | 3 ++- src/app/components/toast/toast.ts | 3 ++- .../components/togglebutton/togglebutton.ts | 3 ++- .../components/toggleswitch/toggleswitch.ts | 3 ++- src/app/components/toolbar/toolbar.ts | 3 ++- src/app/components/tree/tree.ts | 3 ++- src/app/components/treetable/treetable.ts | 3 ++- .../virtualscroller/virtualscroller.ts | 3 ++- 85 files changed, 190 insertions(+), 108 deletions(-) diff --git a/src/app/components/accordion/accordion.ts b/src/app/components/accordion/accordion.ts index 9f99ba6cea0..6c9da1c126f 100755 --- a/src/app/components/accordion/accordion.ts +++ b/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 diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts index 9cb2d37f159..b2d9f38ad19 100755 --- a/src/app/components/autocomplete/autocomplete.ts +++ b/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 diff --git a/src/app/components/avatar/avatar.ts b/src/app/components/avatar/avatar.ts index a12758fbaae..fd8ec928f1d 100755 --- a/src/app/components/avatar/avatar.ts +++ b/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 diff --git a/src/app/components/avatargroup/avatargroup.ts b/src/app/components/avatargroup/avatargroup.ts index a131abdc82f..62c812d25b4 100755 --- a/src/app/components/avatargroup/avatargroup.ts +++ b/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 diff --git a/src/app/components/base/base.ts b/src/app/components/base/base.ts index 9bf3669a5d7..f8f9406bc9c 100644 --- a/src/app/components/base/base.ts +++ b/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 + } +} + + diff --git a/src/app/components/base/public_api.ts b/src/app/components/base/public_api.ts index 82727ba8663..fcff0fc40c8 100644 --- a/src/app/components/base/public_api.ts +++ b/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'; diff --git a/src/app/components/basecomponent/basecomponent.ts b/src/app/components/basecomponent/basecomponent.ts index f44420e9d96..14e22260e73 100644 --- a/src/app/components/basecomponent/basecomponent.ts +++ b/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; } diff --git a/src/app/components/blockui/blockui.ts b/src/app/components/blockui/blockui.ts index a1928b26e06..69a24ea570b 100755 --- a/src/app/components/blockui/blockui.ts +++ b/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 diff --git a/src/app/components/breadcrumb/breadcrumb.ts b/src/app/components/breadcrumb/breadcrumb.ts index 989197c9b81..ed3eff03847 100755 --- a/src/app/components/breadcrumb/breadcrumb.ts +++ b/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 diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts index fb6ba3f6a2c..18fde8ee702 100755 --- a/src/app/components/button/button.ts +++ b/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 diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts index c5abf6d709b..f21a774996c 100644 --- a/src/app/components/calendar/calendar.ts +++ b/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 diff --git a/src/app/components/card/card.ts b/src/app/components/card/card.ts index 299d1a6a612..8c1cd947319 100755 --- a/src/app/components/card/card.ts +++ b/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 | undefined; diff --git a/src/app/components/carousel/carousel.ts b/src/app/components/carousel/carousel.ts index aa58136a21c..c538b959ca3 100755 --- a/src/app/components/carousel/carousel.ts +++ b/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 diff --git a/src/app/components/cascadeselect/cascadeselect.ts b/src/app/components/cascadeselect/cascadeselect.ts index c4ebb37a6d9..d1fdf83b9d6 100755 --- a/src/app/components/cascadeselect/cascadeselect.ts +++ b/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 diff --git a/src/app/components/checkbox/checkbox.ts b/src/app/components/checkbox/checkbox.ts index 9cf22bc0db7..e2de8c15599 100755 --- a/src/app/components/checkbox/checkbox.ts +++ b/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 diff --git a/src/app/components/chip/chip.ts b/src/app/components/chip/chip.ts index 84ff7a5590b..02921db9aa2 100755 --- a/src/app/components/chip/chip.ts +++ b/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 diff --git a/src/app/components/colorpicker/colorpicker.ts b/src/app/components/colorpicker/colorpicker.ts index ce5ad86945c..61d14e234f1 100755 --- a/src/app/components/colorpicker/colorpicker.ts +++ b/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 diff --git a/src/app/components/confirmdialog/confirmdialog.ts b/src/app/components/confirmdialog/confirmdialog.ts index 079910ff192..95f6c065d2a 100755 --- a/src/app/components/confirmdialog/confirmdialog.ts +++ b/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 diff --git a/src/app/components/confirmpopup/confirmpopup.ts b/src/app/components/confirmpopup/confirmpopup.ts index 5964188cbc2..b42b1d4c1a0 100755 --- a/src/app/components/confirmpopup/confirmpopup.ts +++ b/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 diff --git a/src/app/components/contextmenu/contextmenu.ts b/src/app/components/contextmenu/contextmenu.ts index 19a933f6106..6f0ca127477 100755 --- a/src/app/components/contextmenu/contextmenu.ts +++ b/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 diff --git a/src/app/components/dataview/dataview.ts b/src/app/components/dataview/dataview.ts index 73506dc793e..4b74ba827a0 100755 --- a/src/app/components/dataview/dataview.ts +++ b/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 diff --git a/src/app/components/datepicker/datepicker.ts b/src/app/components/datepicker/datepicker.ts index c8c0b3747a0..9583919f13b 100644 --- a/src/app/components/datepicker/datepicker.ts +++ b/src/app/components/datepicker/datepicker.ts @@ -48,6 +48,7 @@ import { AutoFocusModule } from 'primeng/autofocus'; import { InputTextModule } from 'primeng/inputtext'; import { DatePickerStyle } from './style/datepickerstyle'; import { BaseComponent } from 'primeng/basecomponent'; +import { styleClassAttribute } from "primeng/base"; export const DATEPICKER_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -570,7 +571,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 @@ -590,7 +591,7 @@ export class DatePicker extends BaseComponent implements OnInit, OnDestroy, Cont * 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 diff --git a/src/app/components/dialog/dialog.ts b/src/app/components/dialog/dialog.ts index 1a36748eb81..4726338e456 100755 --- a/src/app/components/dialog/dialog.ts +++ b/src/app/components/dialog/dialog.ts @@ -36,6 +36,7 @@ import { UniqueComponentId, ZIndexUtils } from 'primeng/utils'; import { ButtonModule, ButtonProps } from 'primeng/button'; import { DialogStyle } from './style/dialogstyle'; import { BaseComponent } from 'primeng/basecomponent'; +import { styleClassAttribute } from "primeng/base"; const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}')]); @@ -254,7 +255,7 @@ export class Dialog extends BaseComponent implements AfterContentInit, OnInit, O * 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/src/app/components/divider/divider.ts b/src/app/components/divider/divider.ts index cb56dbfe094..ed3a0f34a8f 100755 --- a/src/app/components/divider/divider.ts +++ b/src/app/components/divider/divider.ts @@ -2,6 +2,7 @@ import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, import { CommonModule } from '@angular/common'; import { BaseComponent } from 'primeng/basecomponent'; import { DividerStyle } from './style/dividerstyle'; +import { styleClassAttribute } from "primeng/base"; /** * Divider is used to separate contents. * @group Components @@ -50,7 +51,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/src/app/components/dock/dock.ts b/src/app/components/dock/dock.ts index 5bfdcc9139b..1e046f77f18 100755 --- a/src/app/components/dock/dock.ts +++ b/src/app/components/dock/dock.ts @@ -25,6 +25,7 @@ import { ObjectUtils, UniqueComponentId } from 'primeng/utils'; import { DomHandler } from 'primeng/dom'; import { DockStyle } from './style/dockstyle'; import { BaseComponent } from 'primeng/basecomponent'; +import { styleClassAttribute } from "primeng/base"; /** * Dock is a navigation component consisting of menuitems. * @group Components @@ -141,7 +142,7 @@ export class Dock extends BaseComponent implements AfterContentInit { * 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/src/app/components/drawer/drawer.ts b/src/app/components/drawer/drawer.ts index bcad29a41a6..2c5b7678d42 100755 --- a/src/app/components/drawer/drawer.ts +++ b/src/app/components/drawer/drawer.ts @@ -28,6 +28,7 @@ import { ZIndexUtils } from 'primeng/utils'; import { DrawerStyle } from './style/drawerstyle'; import { BaseComponent } from 'primeng/basecomponent'; import { ButtonModule, ButtonProps } from 'primeng/button'; +import { styleClassAttribute } from "primeng/base"; const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}')]); @@ -128,7 +129,7 @@ export class Drawer extends BaseComponent implements AfterViewInit, AfterContent * 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/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index 1f2f0002abf..95e11c5410a 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -51,6 +51,7 @@ import { IconFieldModule } from 'primeng/iconfield'; import { InputIconModule } from 'primeng/inputicon'; import { DropdownStyle } from './style/dropdownstyle'; import { BaseComponent } from 'primeng/basecomponent'; +import { styleClassAttribute } from "primeng/base"; export const DROPDOWN_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -444,7 +445,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/src/app/components/editor/editor.ts b/src/app/components/editor/editor.ts index 6a03f6f7f06..2c8ee7a1df7 100755 --- a/src/app/components/editor/editor.ts +++ b/src/app/components/editor/editor.ts @@ -23,6 +23,7 @@ import { Nullable } from 'primeng/ts-helpers'; import { EditorInitEvent, EditorSelectionChangeEvent, EditorTextChangeEvent } from './editor.interface'; import { EditorStyle } from './style/editorstyle'; import { BaseComponent } from 'primeng/basecomponent'; +import { styleClassAttribute } from "primeng/base"; export const EDITOR_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -102,7 +103,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/src/app/components/fieldset/fieldset.ts b/src/app/components/fieldset/fieldset.ts index 651e3bb9945..5c1a37d30a1 100755 --- a/src/app/components/fieldset/fieldset.ts +++ b/src/app/components/fieldset/fieldset.ts @@ -25,6 +25,7 @@ import { FieldsetAfterToggleEvent, FieldsetBeforeToggleEvent } from './fieldset. import { ButtonModule } from 'primeng/button'; import { BaseComponent } from 'primeng/basecomponent'; import { FieldsetStyle } from './style/fieldsetstyle'; +import { styleClassAttribute } from "primeng/base"; /** * Fieldset is a grouping component with the optional content toggle feature. @@ -157,7 +158,7 @@ export class Fieldset extends BaseComponent implements AfterContentInit, Blockab * Style class of the component. * @group Props */ - @Input() styleClass: string | undefined; + @Input({ transform: styleClassAttribute }) styleClass: string | undefined; /** * Transition options of the panel animation. * @group Props diff --git a/src/app/components/fileupload/fileupload.ts b/src/app/components/fileupload/fileupload.ts index 4d3c0d8bc45..cd7da2cef70 100755 --- a/src/app/components/fileupload/fileupload.ts +++ b/src/app/components/fileupload/fileupload.ts @@ -47,6 +47,7 @@ import { import { FileUploadStyle } from './style/fileuploadstyle'; import { BaseComponent } from 'primeng/basecomponent'; import { MessageModule } from 'primeng/message'; +import { styleClassAttribute } from "primeng/base"; /** * FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations. * @group Components @@ -364,7 +365,7 @@ export class FileUpload extends BaseComponent implements AfterViewInit, AfterCon * 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/src/app/components/image/image.ts b/src/app/components/image/image.ts index 1e21285f0d0..5461db31314 100755 --- a/src/app/components/image/image.ts +++ b/src/app/components/image/image.ts @@ -32,6 +32,7 @@ import { Nullable } from 'primeng/ts-helpers'; import { FocusTrapModule } from 'primeng/focustrap'; import { ImageStyle } from './style/imagestyle'; import { BaseComponent } from 'primeng/basecomponent'; +import { styleClassAttribute } from "primeng/base"; /** * Displays an image with preview and tranformation options. For multiple image, see Galleria. @@ -194,7 +195,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/src/app/components/inplace/inplace.ts b/src/app/components/inplace/inplace.ts index b2147af4d00..619061e08fc 100755 --- a/src/app/components/inplace/inplace.ts +++ b/src/app/components/inplace/inplace.ts @@ -20,6 +20,7 @@ import { ButtonModule } from 'primeng/button'; import { TimesIcon } from 'primeng/icons/times'; import { BaseComponent } from 'primeng/basecomponent'; import { InplaceStyle } from './style/inplacestyle'; +import { styleClassAttribute } from "primeng/base"; @Component({ selector: 'p-inplacedisplay, p-inplaceDisplay', @@ -120,7 +121,7 @@ export class Inplace extends BaseComponent implements AfterContentInit { * 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/src/app/components/inputgroup/inputgroup.ts b/src/app/components/inputgroup/inputgroup.ts index e087e89f2c1..02463ad176c 100755 --- a/src/app/components/inputgroup/inputgroup.ts +++ b/src/app/components/inputgroup/inputgroup.ts @@ -3,6 +3,7 @@ import { Component, inject, Input, NgModule } from '@angular/core'; import { SharedModule } from 'primeng/api'; import { InputGroupStyle } from './style/inputgroupstyle'; import { BaseComponent } from 'primeng/basecomponent'; +import { styleClassAttribute } from "primeng/base"; /** * InputGroup displays text, icon, buttons and other content can be grouped next to an input. * @group Components @@ -29,7 +30,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/src/app/components/inputgroupaddon/inputgroupaddon.ts b/src/app/components/inputgroupaddon/inputgroupaddon.ts index 74315eec104..dd49b51a95c 100755 --- a/src/app/components/inputgroupaddon/inputgroupaddon.ts +++ b/src/app/components/inputgroupaddon/inputgroupaddon.ts @@ -3,6 +3,7 @@ import { Component, HostBinding, inject, Input, NgModule } from '@angular/core'; import { SharedModule } from 'primeng/api'; import { BaseComponent } from 'primeng/basecomponent'; import { InputGroupAddonStyle } from './style/inputgroupaddonstyle'; +import { styleClassAttribute } from "primeng/base"; /** * InputGroupAddon displays text, icon, buttons and other content can be grouped next to an input. * @group Components @@ -27,7 +28,7 @@ export class InputGroupAddon extends BaseComponent { * Class of the element. * @group Props */ - @Input() styleClass: string | undefined; + @Input({ transform: styleClassAttribute }) styleClass: string | undefined; _componentStyle = inject(InputGroupAddonStyle); diff --git a/src/app/components/inputicon/inputicon.ts b/src/app/components/inputicon/inputicon.ts index 354bb572405..509972e8c87 100755 --- a/src/app/components/inputicon/inputicon.ts +++ b/src/app/components/inputicon/inputicon.ts @@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component, inject, Input, NgModule, ViewEncaps import { SharedModule } from 'primeng/api'; import { BaseComponent } from 'primeng/basecomponent'; import { InputIconStyle } from './style/inputiconstyle'; +import { styleClassAttribute } from "primeng/base"; /** * InputIcon displays an icon. @@ -24,7 +25,7 @@ export class InputIcon extends BaseComponent { * Style class of the element. * @group Props */ - @Input() styleClass: string | undefined; + @Input({ transform: styleClassAttribute }) styleClass: string | undefined; _componentStyle = inject(InputIconStyle); } diff --git a/src/app/components/inputmask/inputmask.ts b/src/app/components/inputmask/inputmask.ts index 9e981a81de7..fa35908d05b 100755 --- a/src/app/components/inputmask/inputmask.ts +++ b/src/app/components/inputmask/inputmask.ts @@ -55,6 +55,7 @@ import { Nullable } from 'primeng/ts-helpers'; import { Caret } from './inputmask.interface'; import { BaseComponent } from 'primeng/basecomponent'; import { InputMaskStyle } from './style/inputmaskstyle'; +import { styleClassAttribute } from "primeng/base"; export const INPUTMASK_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -152,7 +153,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/src/app/components/inputnumber/inputnumber.ts b/src/app/components/inputnumber/inputnumber.ts index 6de43d4439c..3bf4569b5b1 100644 --- a/src/app/components/inputnumber/inputnumber.ts +++ b/src/app/components/inputnumber/inputnumber.ts @@ -36,6 +36,7 @@ import { Nullable } from 'primeng/ts-helpers'; import { InputNumberInputEvent } from './inputnumber.interface'; import { BaseComponent } from 'primeng/basecomponent'; import { InputNumberStyle } from './style/inputnumberstyle'; +import { styleClassAttribute } from "primeng/base"; export const INPUTNUMBER_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -221,7 +222,7 @@ export class InputNumber extends BaseComponent implements OnInit, AfterContentIn * Style class of the component. * @group Props */ - @Input() styleClass: string | undefined; + @Input({ transform: styleClassAttribute }) styleClass: string | undefined; /** * Inline style of the component. * @group Props @@ -391,7 +392,7 @@ export class InputNumber extends BaseComponent implements OnInit, AfterContentIn * Style class of the input field. * @group Props */ - @Input() inputStyleClass: string | undefined; + @Input({ transform: styleClassAttribute }) inputStyleClass: string | undefined; /** * When enabled, a clear icon is displayed to clear the value. * @group Props diff --git a/src/app/components/inputotp/inputotp.ts b/src/app/components/inputotp/inputotp.ts index 90aefe8a6a4..94e8482b01b 100644 --- a/src/app/components/inputotp/inputotp.ts +++ b/src/app/components/inputotp/inputotp.ts @@ -23,6 +23,7 @@ import { AutoFocusModule } from 'primeng/autofocus'; import { InputOtpChangeEvent } from './inputotp.interface'; import { InputOtpStyle } from './style/inputotpstyle'; import { BaseComponent } from 'primeng/basecomponent'; +import { styleClassAttribute } from "primeng/base"; export const INPUT_OTP_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -113,7 +114,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/src/app/components/inputswitch/inputswitch.ts b/src/app/components/inputswitch/inputswitch.ts index 961545580eb..b6e84c2434f 100755 --- a/src/app/components/inputswitch/inputswitch.ts +++ b/src/app/components/inputswitch/inputswitch.ts @@ -20,6 +20,7 @@ import { AutoFocusModule } from 'primeng/autofocus'; import { InputSwitchChangeEvent } from './inputswitch.interface'; import { InputSwitchStyle } from './style/inputswitchstyle'; import { BaseComponent } from 'primeng/basecomponent'; +import { styleClassAttribute } from "primeng/base"; export const INPUTSWITCH_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -80,7 +81,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/src/app/components/knob/knob.ts b/src/app/components/knob/knob.ts index a78f7b46adc..f56d15ad465 100755 --- a/src/app/components/knob/knob.ts +++ b/src/app/components/knob/knob.ts @@ -17,6 +17,7 @@ import { VoidListener } from 'primeng/ts-helpers'; import { KnobStyle } from './style/knobstyle'; import { BaseComponent } from 'primeng/basecomponent'; import { $dt } from '@primeuix/styled'; +import { styleClassAttribute } from "primeng/base"; export const KNOB_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -75,7 +76,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/src/app/components/listbox/listbox.ts b/src/app/components/listbox/listbox.ts index 8f18ea8a034..2dc179c11ac 100755 --- a/src/app/components/listbox/listbox.ts +++ b/src/app/components/listbox/listbox.ts @@ -48,6 +48,7 @@ import { ListBoxStyle } from './style/listboxstyle'; import { BlankIcon } from 'primeng/icons/blank'; import { CheckboxModule } from 'primeng/checkbox'; import { InputIconModule } from 'primeng/inputicon'; +import { styleClassAttribute } from "primeng/base"; export const LISTBOX_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -423,7 +424,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/src/app/components/megamenu/megamenu.ts b/src/app/components/megamenu/megamenu.ts index 4025dd3af52..6e1c16f7cc0 100755 --- a/src/app/components/megamenu/megamenu.ts +++ b/src/app/components/megamenu/megamenu.ts @@ -35,6 +35,7 @@ import { VoidListener } from 'primeng/ts-helpers'; import { ObjectUtils, UniqueComponentId } from 'primeng/utils'; import { MegaMenuStyle } from './style/megamenustyle'; import { BadgeModule } from 'primeng/badge'; +import { styleClassAttribute } from "primeng/base"; @Component({ selector: 'p-megaMenuSub, p-megamenu-sub', @@ -506,7 +507,7 @@ export class MegaMenu extends BaseComponent implements AfterContentInit, OnDestr * Class of the element. * @group Props */ - @Input() styleClass: string | undefined; + @Input({ transform: styleClassAttribute }) styleClass: string | undefined; /** * Defines the orientation. * @group Props diff --git a/src/app/components/menu/menu.ts b/src/app/components/menu/menu.ts index 76b6d21ba5b..765132319a0 100755 --- a/src/app/components/menu/menu.ts +++ b/src/app/components/menu/menu.ts @@ -37,6 +37,7 @@ import { UniqueComponentId, ZIndexUtils } from 'primeng/utils'; import { MenuStyle } from './style/menustyle'; import { BaseComponent } from 'primeng/basecomponent'; import { BadgeModule } from 'primeng/badge'; +import { styleClassAttribute } from "primeng/base"; @Pipe({ name: 'safeHtml', @@ -303,7 +304,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/src/app/components/menubar/menubar.ts b/src/app/components/menubar/menubar.ts index f5e165d01ce..64b18718570 100755 --- a/src/app/components/menubar/menubar.ts +++ b/src/app/components/menubar/menubar.ts @@ -41,6 +41,7 @@ import { debounce, filter } from 'rxjs/operators'; import { MenuBarStyle } from './style/menubarstyle'; import { BaseComponent } from 'primeng/basecomponent'; import { BadgeModule } from 'primeng/badge'; +import { styleClassAttribute } from "primeng/base"; @Injectable() export class MenubarService { @@ -515,7 +516,7 @@ export class Menubar extends BaseComponent implements AfterContentInit, OnDestro * 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/src/app/components/message/message.ts b/src/app/components/message/message.ts index 149bdbe9742..77f74046748 100755 --- a/src/app/components/message/message.ts +++ b/src/app/components/message/message.ts @@ -25,6 +25,7 @@ import { Ripple } from 'primeng/ripple'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { animate, style, transition, trigger } from '@angular/animations'; import { TimesIcon } from 'primeng/icons/times'; +import { styleClassAttribute } from "primeng/base"; /** * Message groups a collection of contents in tabs. * @group Components @@ -145,7 +146,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/src/app/components/messages/messages.ts b/src/app/components/messages/messages.ts index 33f9674eaf9..c92d5b57413 100644 --- a/src/app/components/messages/messages.ts +++ b/src/app/components/messages/messages.ts @@ -28,6 +28,7 @@ import { Subscription, timer } from 'rxjs'; import { MessagesStyle } from './style/messagesstyle'; import { BaseComponent } from 'primeng/basecomponent'; import { ButtonModule } from 'primeng/button'; +import { styleClassAttribute } from "primeng/base"; /** * Messages is used to display alerts inline. * @group Components @@ -177,7 +178,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/src/app/components/metergroup/metergroup.ts b/src/app/components/metergroup/metergroup.ts index c99865cbd80..83809426e97 100644 --- a/src/app/components/metergroup/metergroup.ts +++ b/src/app/components/metergroup/metergroup.ts @@ -19,6 +19,7 @@ import { DomHandler } from 'primeng/dom'; import { MeterItem } from './metergroup.interface'; import { BaseComponent } from 'primeng/basecomponent'; import { MeterGroupStyle } from './style/metergroupstyle'; +import { styleClassAttribute } from "primeng/base"; @Component({ selector: 'p-meterGroupLabel, p-metergroup-label', @@ -189,7 +190,7 @@ export class MeterGroup extends BaseComponent implements AfterContentInit { * Style class of the element. * @group Props */ - @Input() styleClass: string | undefined; + @Input({ transform: styleClassAttribute }) styleClass: string | undefined; @ContentChildren(PrimeTemplate) templates: QueryList | undefined; diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts index 1862e037d64..20ef4dff3b3 100755 --- a/src/app/components/multiselect/multiselect.ts +++ b/src/app/components/multiselect/multiselect.ts @@ -73,6 +73,7 @@ import { ChipModule } from 'primeng/chip'; import { CheckboxModule } from 'primeng/checkbox'; import { MultiSelectStyle } from './style/multiselectstyle'; import { BaseComponent } from 'primeng/basecomponent'; +import { styleClassAttribute } from "primeng/base"; export const MULTISELECT_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -550,7 +551,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/src/app/components/orderlist/orderlist.ts b/src/app/components/orderlist/orderlist.ts index 7e560d5d711..dcc62955ee4 100755 --- a/src/app/components/orderlist/orderlist.ts +++ b/src/app/components/orderlist/orderlist.ts @@ -35,6 +35,7 @@ import { OrderListStyle } from './style/orderliststyle'; import { BaseComponent } from 'primeng/basecomponent'; import { Listbox, ListboxModule } from 'primeng/listbox'; import { FormsModule } from '@angular/forms'; +import { styleClassAttribute } from "primeng/base"; /** * OrderList is used to managed the order of a collection. @@ -169,7 +170,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/src/app/components/organizationchart/organizationchart.ts b/src/app/components/organizationchart/organizationchart.ts index 67d7429015c..03149c6d4e8 100755 --- a/src/app/components/organizationchart/organizationchart.ts +++ b/src/app/components/organizationchart/organizationchart.ts @@ -34,6 +34,7 @@ import { } from './organizationchart.interface'; import { OrganizationChartStyle } from './style/organizationchartstyle'; import { BaseComponent } from 'primeng/basecomponent'; +import { styleClassAttribute } from "primeng/base"; @Component({ selector: '[pOrganizationChartNode]', template: ` @@ -254,7 +255,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/src/app/components/overlaybadge/overlaybadge.ts b/src/app/components/overlaybadge/overlaybadge.ts index ac10e8c899f..e19d585c277 100755 --- a/src/app/components/overlaybadge/overlaybadge.ts +++ b/src/app/components/overlaybadge/overlaybadge.ts @@ -4,6 +4,7 @@ import { SharedModule } from 'primeng/api'; import { OverlayBadgeStyle } from './style/overlaybadgestyle'; import { BaseComponent } from 'primeng/basecomponent'; import { BadgeModule } from 'primeng/badge'; +import { styleClassAttribute } from "primeng/base"; /** * OverlayPanel is a container component positioned as connected to its target. @@ -33,7 +34,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/src/app/components/overlaypanel/overlaypanel.ts b/src/app/components/overlaypanel/overlaypanel.ts index 34522c1682b..1883d4cc701 100755 --- a/src/app/components/overlaypanel/overlaypanel.ts +++ b/src/app/components/overlaypanel/overlaypanel.ts @@ -30,6 +30,7 @@ import { ZIndexUtils } from 'primeng/utils'; import { Subscription } from 'rxjs'; import { PopoverStyle } from './style/popoverstyle'; import { BaseComponent } from 'primeng/basecomponent'; +import { styleClassAttribute } from "primeng/base"; /** * OverlayPanel is a container component positioned as connected to its target. * @group Components @@ -121,7 +122,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/src/app/components/paginator/paginator.ts b/src/app/components/paginator/paginator.ts index bea21076d83..350e6005ac5 100755 --- a/src/app/components/paginator/paginator.ts +++ b/src/app/components/paginator/paginator.ts @@ -33,6 +33,7 @@ import { PaginatorState } from './paginator.interface'; import { PaginatorStyle } from './style/paginatorstyle'; import { BaseComponent } from 'primeng/basecomponent'; import { SelectModule } from 'primeng/select'; +import { styleClassAttribute } from "primeng/base"; /** * Paginator is a generic component to display content in paged format. * @group Components @@ -196,7 +197,7 @@ export class Paginator extends BaseComponent implements OnInit, AfterContentInit * 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/src/app/components/panel/panel.ts b/src/app/components/panel/panel.ts index c98739ece15..a5f7e6d3437 100755 --- a/src/app/components/panel/panel.ts +++ b/src/app/components/panel/panel.ts @@ -29,6 +29,7 @@ import { PanelAfterToggleEvent, PanelBeforeToggleEvent } from './panel.interface import { ButtonModule } from 'primeng/button'; import { PanelStyle } from './style/panelstyle'; import { BaseComponent } from 'primeng/basecomponent'; +import { styleClassAttribute } from "primeng/base"; /** * Panel is a container with the optional content toggle feature. @@ -189,7 +190,7 @@ export class Panel extends BaseComponent implements AfterContentInit, BlockableU * 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/src/app/components/panelmenu/panelmenu.ts b/src/app/components/panelmenu/panelmenu.ts index 70c16c94838..7d8e8e5d2ae 100644 --- a/src/app/components/panelmenu/panelmenu.ts +++ b/src/app/components/panelmenu/panelmenu.ts @@ -35,6 +35,7 @@ import { TooltipModule } from 'primeng/tooltip'; import { ObjectUtils, UniqueComponentId } from 'primeng/utils'; import { PanelMenuStyle } from './style/panelmenustyle'; import { BaseComponent } from 'primeng/basecomponent'; +import { styleClassAttribute } from "primeng/base"; @Component({ selector: 'p-panelMenuSub, p-panelmenu-sub', @@ -980,7 +981,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/src/app/components/password/password.ts b/src/app/components/password/password.ts index 24f701e9e24..d92b0a3a37d 100644 --- a/src/app/components/password/password.ts +++ b/src/app/components/password/password.ts @@ -40,6 +40,7 @@ import { AutoFocusModule } from 'primeng/autofocus'; import { Subscription } from 'rxjs'; import { BaseComponent } from 'primeng/basecomponent'; import { PasswordStyle } from './style/passwordstyle'; +import { styleClassAttribute } from "primeng/base"; type Meter = { strength: string; @@ -558,12 +559,12 @@ export class Password extends BaseComponent implements AfterContentInit, OnInit * Style class of the input field. * @group Props */ - @Input() inputStyleClass: string | undefined; + @Input({ transform: styleClassAttribute }) inputStyleClass: string | undefined; /** * Style class of the element. * @group Props */ - @Input() styleClass: string | undefined; + @Input({ transform: styleClassAttribute }) styleClass: string | undefined; /** * Inline style of the component. * @group Props diff --git a/src/app/components/picklist/picklist.ts b/src/app/components/picklist/picklist.ts index 6787ad6cc90..7eac88b8666 100755 --- a/src/app/components/picklist/picklist.ts +++ b/src/app/components/picklist/picklist.ts @@ -52,6 +52,7 @@ import { PickListStyle } from './style/pickliststyle'; import { BaseComponent } from 'primeng/basecomponent'; import { Listbox, ListboxModule } from 'primeng/listbox'; import { FormsModule } from '@angular/forms'; +import { styleClassAttribute } from "primeng/base"; /** * PickList is used to reorder items between different lists. @@ -495,7 +496,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/src/app/components/popover/popover.ts b/src/app/components/popover/popover.ts index 5882cd8ac30..359652ef41d 100755 --- a/src/app/components/popover/popover.ts +++ b/src/app/components/popover/popover.ts @@ -30,6 +30,7 @@ import { ZIndexUtils } from 'primeng/utils'; import { Subscription } from 'rxjs'; import { PopoverStyle } from './style/popoverstyle'; import { BaseComponent } from 'primeng/basecomponent'; +import { styleClassAttribute } from "primeng/base"; /** * Popover is a container component that can overlay other components on page. * @group Components @@ -120,7 +121,7 @@ export class Popover extends BaseComponent implements AfterContentInit, OnDestro * 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/src/app/components/progressbar/progressbar.ts b/src/app/components/progressbar/progressbar.ts index d374c959a91..8e77dd0d82c 100755 --- a/src/app/components/progressbar/progressbar.ts +++ b/src/app/components/progressbar/progressbar.ts @@ -15,6 +15,7 @@ import { PrimeTemplate } from 'primeng/api'; import { QueryList } from '@angular/core'; import { BaseComponent } from 'primeng/basecomponent'; import { ProgressBarStyle } from './style/progressbarstyle'; +import { styleClassAttribute } from "primeng/base"; /** * ProgressBar is a process status indicator. @@ -91,7 +92,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/src/app/components/progressspinner/progressspinner.ts b/src/app/components/progressspinner/progressspinner.ts index 9c55e7a35c8..335514db118 100755 --- a/src/app/components/progressspinner/progressspinner.ts +++ b/src/app/components/progressspinner/progressspinner.ts @@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, inject, Input, NgModule, ViewEncapsulation } from '@angular/core'; import { BaseComponent } from 'primeng/basecomponent'; import { ProgressSpinnerStyle } from './style/progressspinnerstyle'; +import { styleClassAttribute } from "primeng/base"; /** * ProgressSpinner is a process status indicator. @@ -48,7 +49,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/src/app/components/radiobutton/radiobutton.ts b/src/app/components/radiobutton/radiobutton.ts index 3e76749cff8..7c76260956f 100755 --- a/src/app/components/radiobutton/radiobutton.ts +++ b/src/app/components/radiobutton/radiobutton.ts @@ -23,6 +23,7 @@ import { AutoFocusModule } from 'primeng/autofocus'; import { BaseComponent } from 'primeng/basecomponent'; import { RadioButtonStyle } from './style/radiobuttonstyle'; import { RadioButtonClickEvent } from './radiobutton.interface'; +import { styleClassAttribute } from "primeng/base"; export const RADIO_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -163,7 +164,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/src/app/components/scrollpanel/scrollpanel.ts b/src/app/components/scrollpanel/scrollpanel.ts index 4d1f8dd3942..9bcc10b9091 100755 --- a/src/app/components/scrollpanel/scrollpanel.ts +++ b/src/app/components/scrollpanel/scrollpanel.ts @@ -23,6 +23,7 @@ import { Nullable } from 'primeng/ts-helpers'; import { UniqueComponentId } from 'primeng/utils'; import { BaseComponent } from 'primeng/basecomponent'; import { ScrollPanelStyle } from './style/scrollpanelstyle'; +import { styleClassAttribute } from "primeng/base"; /** * ScrollPanel is a cross browser, lightweight and themable alternative to native browser scrollbar. @@ -90,7 +91,7 @@ export class ScrollPanel extends BaseComponent implements AfterViewInit, AfterCo * 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/src/app/components/scrolltop/scrolltop.ts b/src/app/components/scrolltop/scrolltop.ts index ba271b64685..fe7e846c19e 100755 --- a/src/app/components/scrolltop/scrolltop.ts +++ b/src/app/components/scrolltop/scrolltop.ts @@ -22,6 +22,7 @@ import { ButtonModule } from 'primeng/button'; import { ButtonProps } from 'primeng/button'; import { BaseComponent } from 'primeng/basecomponent'; import { ScrollTopStyle } from './style/scrolltopstyle'; +import { styleClassAttribute } from "primeng/base"; /** * ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly. @@ -82,7 +83,7 @@ export class ScrollTop extends BaseComponent implements OnInit, OnDestroy { * 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/src/app/components/select/select.ts b/src/app/components/select/select.ts index 41430d9d6f9..6d13277cdba 100755 --- a/src/app/components/select/select.ts +++ b/src/app/components/select/select.ts @@ -54,6 +54,7 @@ import { IconFieldModule } from 'primeng/iconfield'; import { InputIconModule } from 'primeng/inputicon'; import { SelectStyle } from './style/selectstyle'; import { BaseComponent } from 'primeng/basecomponent'; +import { styleClassAttribute } from "primeng/base"; export const SELECT_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -470,7 +471,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/src/app/components/selectbutton/selectbutton.ts b/src/app/components/selectbutton/selectbutton.ts index 0970a57b3ca..678c078d756 100755 --- a/src/app/components/selectbutton/selectbutton.ts +++ b/src/app/components/selectbutton/selectbutton.ts @@ -23,6 +23,7 @@ import { ToggleButton } from 'primeng/togglebutton'; import { BaseComponent } from 'primeng/basecomponent'; import { SelectButtonStyle } from './style/selectbuttonstyle'; import { CommonModule } from '@angular/common'; +import { styleClassAttribute } from "primeng/base"; export const SELECTBUTTON_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -120,7 +121,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/src/app/components/sidebar/sidebar.ts b/src/app/components/sidebar/sidebar.ts index 9e899a0e90a..d9319456194 100755 --- a/src/app/components/sidebar/sidebar.ts +++ b/src/app/components/sidebar/sidebar.ts @@ -30,6 +30,7 @@ import { ZIndexUtils } from 'primeng/utils'; import { ButtonModule, ButtonProps } from 'primeng/button'; import { BaseComponent } from 'primeng/basecomponent'; import { DrawerStyle } from './style/drawerstyle'; +import { styleClassAttribute } from "primeng/base"; const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}')]); @@ -120,7 +121,7 @@ export class Sidebar extends BaseComponent implements AfterViewInit, AfterConten * 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/src/app/components/skeleton/skeleton.ts b/src/app/components/skeleton/skeleton.ts index a981e15689c..a881c3f04a0 100755 --- a/src/app/components/skeleton/skeleton.ts +++ b/src/app/components/skeleton/skeleton.ts @@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, inject, Input, NgModule, ViewEncapsulation } from '@angular/core'; 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. @@ -29,7 +30,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/src/app/components/slider/slider.ts b/src/app/components/slider/slider.ts index ccfe0de58ad..a35e132c1f6 100755 --- a/src/app/components/slider/slider.ts +++ b/src/app/components/slider/slider.ts @@ -27,6 +27,7 @@ import { AutoFocusModule } from 'primeng/autofocus'; import { SliderChangeEvent, SliderSlideEndEvent } from './slider.interface'; import { SliderStyle } from './style/sliderstyle'; import { BaseComponent } from 'primeng/basecomponent'; +import { styleClassAttribute } from "primeng/base"; export const SLIDER_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -209,7 +210,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/src/app/components/splitbutton/splitbutton.ts b/src/app/components/splitbutton/splitbutton.ts index 4d8eebf6ab0..7d1676d9a41 100755 --- a/src/app/components/splitbutton/splitbutton.ts +++ b/src/app/components/splitbutton/splitbutton.ts @@ -27,6 +27,7 @@ import { ButtonProps, MenuButtonProps } from './splitbutton.interface'; import { SplitButtonStyle } from './style/splitbuttonstyle'; import { BaseComponent } from 'primeng/basecomponent'; import { RippleModule } from 'primeng/ripple'; +import { styleClassAttribute } from "primeng/base"; type SplitButtonIconPosition = 'left' | 'right'; /** @@ -202,7 +203,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/src/app/components/splitter/splitter.ts b/src/app/components/splitter/splitter.ts index 3afad0c7b22..a1120184d0c 100755 --- a/src/app/components/splitter/splitter.ts +++ b/src/app/components/splitter/splitter.ts @@ -24,6 +24,7 @@ import { Nullable, VoidListener } from 'primeng/ts-helpers'; import { SplitterResizeEndEvent, SplitterResizeStartEvent } from './splitter.interface'; import { BaseComponent } from 'primeng/basecomponent'; import { SplitterStyle } from './style/splitterstyle'; +import { styleClassAttribute } from "primeng/base"; /** * Splitter is utilized to separate and resize panels. * @group Components @@ -89,7 +90,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/src/app/components/steps/steps.ts b/src/app/components/steps/steps.ts index 6ddc8095dfa..5dbb3cb1aa3 100755 --- a/src/app/components/steps/steps.ts +++ b/src/app/components/steps/steps.ts @@ -24,6 +24,7 @@ import { TooltipModule } from 'primeng/tooltip'; import { Subscription } from 'rxjs'; import { StepsStyle } from './style/stepsstyle'; import { BaseComponent } from 'primeng/basecomponent'; +import { styleClassAttribute } from "primeng/base"; /** * Steps components is an indicator for the steps in a wizard workflow. * @group Components @@ -130,7 +131,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/src/app/components/table/table.ts b/src/app/components/table/table.ts index 8981d54e9eb..91a7fb11b34 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -97,6 +97,7 @@ import { BaseComponent } from 'primeng/basecomponent'; import { RadioButton, RadioButtonClickEvent, RadioButtonModule } from 'primeng/radiobutton'; import { SelectModule } from 'primeng/select'; import { DatePickerModule } from 'primeng/datepicker'; +import { styleClassAttribute } from "primeng/base"; @Injectable() export class TableService { @@ -398,7 +399,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 @@ -5362,7 +5363,7 @@ export class ReorderableRow implements AfterViewInit {