Merge pull request #16005 from primefaces/issue-15998

Fixed #15998 - Inline style not compliant with strict CSP

src/app/components/accordion/accordion.ts

@@ -40,7 +40,7 @@ import { UniqueComponentId } from 'primeng/utils';
             <div class="p-accordion-header" role="heading" [attr.aria-level]="headerAriaLevel" [class.p-highlight]="selected" [class.p-disabled]="disabled" [attr.data-p-disabled]="disabled" [attr.data-pc-section]="'header'">
                 <a
                     [ngClass]="headerStyleClass"
-                    [style]="headerStyle"
+                    [ngStyle]="headerStyle"
                     role="button"
                     class="p-accordion-header-link"
                     (click)="toggle($event)"

src/app/components/autocomplete/autocomplete.ts

@@ -194,7 +194,7 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
                 (onAnimationStart)="onOverlayAnimationStart($event)"
                 (onHide)="hide()"
             >
-                <div [ngClass]="panelClass" [style.max-height]="virtualScroll ? 'auto' : scrollHeight" [ngStyle]="panelStyle" [class]="panelStyleClass">
+                <div [ngClass]="panelClass" [ngStyle]="panelStyles" [class]="panelStyleClass">
                     <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                     <p-scroller
                         *ngIf="virtualScroll"
@@ -825,6 +825,13 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
         };
     }
 
+    get panelStyles() {
+        return {
+          'max-height': this.virtualScroll ? 'auto' : this.scrollHeight,
+          ...this.panelStyle
+        };
+      }
+
     get inputClass() {
         return {
             'p-autocomplete-input p-inputtext p-component': !this.multiple,

src/app/components/chart/chart.ts

@@ -8,8 +8,23 @@ import Chart from 'chart.js/auto';
 @Component({
     selector: 'p-chart',
     template: `
-        <div style="position:relative" [style.width]="responsive && !width ? null : width" [style.height]="responsive && !height ? null : height">
-            <canvas role="img" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy" [attr.width]="responsive && !width ? null : width" [attr.height]="responsive && !height ? null : height" (click)="onCanvasClick($event)"></canvas>
+        <div
+            [ngStyle]="{
+                position: 'relative',
+                width: responsive && !width ? null : width,
+                height: responsive && !height ? null : height
+            }"
+        >
+            <canvas
+                role="img"
+                [attr.aria-label]="ariaLabel"
+                [attr.aria-labelledby]="ariaLabelledBy"
+                [ngStyle]="{
+                    width: responsive && !width ? null : width,
+                    height: responsive && !height ? null : height
+                }"
+                (click)="onCanvasClick($event)"
+            ></canvas>
         </div>
     `,
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -92,7 +107,11 @@ export class UIChart implements AfterViewInit, OnDestroy {
 
     chart: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any, public el: ElementRef, private zone: NgZone) {}
+    constructor(
+        @Inject(PLATFORM_ID) private platformId: any,
+        public el: ElementRef,
+        private zone: NgZone
+    ) {}
 
     ngAfterViewInit() {
         this.initChart();

src/app/components/contextmenu/contextmenu.ts

@@ -62,7 +62,7 @@ import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';
                 <li
                     *ngIf="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                     [attr.id]="getItemId(processedItem)"
-                    [style]="getItemProp(processedItem, 'style')"
+                    [ngStyle]="getItemProp(processedItem, 'style')"
                     [ngClass]="getSeparatorItemClass(processedItem)"
                     role="separator"
                     [attr.data-pc-section]="'separator'"

src/app/components/dialog/dialog.ts

@@ -51,7 +51,7 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
         <div
             *ngIf="maskVisible"
             [class]="maskStyleClass"
-            [style]="maskStyle"
+            [ngStyle]="maskStyle"
             [ngClass]="{
                 'p-dialog-mask': true,
                 'p-component-overlay p-component-overlay-enter': this.modal,
@@ -267,7 +267,7 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy {
      * Style of the mask.
      * @group Props
      */
-    @Input() maskStyle: string | undefined;
+    @Input() maskStyle: { [klass: string]: any } | null | undefined;
     /**
      * Whether to show the header or not.
      * @group Props

src/app/components/dropdown/dropdown.ts

@@ -268,7 +268,13 @@ export class DropdownItem {
                                 </div>
                             </ng-template>
                         </div>
-                        <div class="p-dropdown-items-wrapper" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'" tabindex="0">
+                        <div
+                            class="p-dropdown-items-wrapper"
+                            [ngStyle]="{
+                                'max-height': virtualScroll ? 'auto' : scrollHeight || 'auto'
+                            }"
+                            tabindex="0"
+                        >
                             <p-scroller
                                 *ngIf="virtualScroll"
                                 #scroller
@@ -294,7 +300,7 @@ export class DropdownItem {
                             </ng-container>
 
                             <ng-template #buildInItems let-items let-scrollerOptions="options">
-                                <ul #items [attr.id]="id + '_list'" [attr.aria-label]="listLabel" class="p-dropdown-items" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox">
+                                <ul #items [attr.id]="id + '_list'" [attr.aria-label]="listLabel" class="p-dropdown-items" [ngClass]="scrollerOptions.contentStyleClass" [ngStyle]="scrollerOptions.contentStyle" role="listbox">
                                     <ng-template ngFor let-option [ngForOf]="items" let-i="index">
                                         <ng-container *ngIf="isOptionGroup(option)">
                                             <li class="p-dropdown-item-group" [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
@@ -1012,7 +1018,14 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
 
     editableInputValue = computed(() => this.getOptionLabel(this.selectedOption) || this.modelValue() || '');
 
-    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig) {
+    constructor(
+        public el: ElementRef,
+        public renderer: Renderer2,
+        public cd: ChangeDetectorRef,
+        public zone: NgZone,
+        public filterService: FilterService,
+        public config: PrimeNGConfig
+    ) {
         effect(() => {
             const modelValue = this.modelValue();
             const visibleOptions = this.visibleOptions();

src/app/components/dynamicdialog/dynamicdialog.ts

@@ -58,7 +58,7 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
             <div
                 #container
                 [ngClass]="{ 'p-dialog p-dynamic-dialog p-component': true, 'p-dialog-rtl': config.rtl, 'p-dialog-resizable': config.resizable, 'p-dialog-draggable': config.draggable, 'p-dialog-maximized': maximized }"
-                [ngStyle]="config.style"
+                [ngStyle]="containerStyle"
                 [class]="config.styleClass"
                 [@animation]="{ value: 'visible', params: { transform: transformOptions, transition: config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)' } }"
                 (@animation.start)="onAnimationStart($event)"
@@ -67,8 +67,6 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
                 *ngIf="visible"
                 pFocusTrap
                 [pFocusTrapDisabled]="config.focusTrap === false"
-                [style.width]="config.width"
-                [style.height]="config.height"
                 [attr.aria-labelledby]="ariaLabelledBy"
                 [attr.aria-modal]="true"
             >
@@ -274,6 +272,14 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy {
         return dynamicDialogCount;
     }
 
+    get containerStyle() {
+        return {
+            ...this.config.style, 
+            'width': this.config.width, 
+            'height': this.config.height 
+        };
+    }
+
     constructor(
         @Inject(DOCUMENT) private document: Document,
         @Inject(PLATFORM_ID) private platformId: any,

src/app/components/listbox/listbox.ts

@@ -117,7 +117,14 @@ export const LISTBOX_VALUE_ACCESSOR: any = {
                     </span>
                 </ng-template>
             </div>
-            <div [ngClass]="'p-listbox-list-wrapper'" [ngStyle]="listStyle" [class]="listStyleClass" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
+            <div
+                [ngClass]="'p-listbox-list-wrapper'"
+                [ngStyle]="listStyle"
+                [class]="listStyleClass"
+                [ngStyle]="{
+                    'max-height': virtualScroll ? 'auto' : scrollHeight || 'auto'
+                }"
+            >
                 <p-scroller
                     #scroller
                     *ngIf="virtualScroll"
@@ -151,7 +158,7 @@ export const LISTBOX_VALUE_ACCESSOR: any = {
                         [tabindex]="-1"
                         [attr.aria-multiselectable]="true"
                         [ngClass]="scrollerOptions.contentStyleClass"
-                        [style]="scrollerOptions.contentStyle"
+                        [ngStyle]="scrollerOptions.contentStyle"
                         [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
                         [attr.aria-label]="ariaLabel"
                         [attr.aria-multiselectable]="multiple"
@@ -671,7 +678,13 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor,
         } else return filterValue ? this.filterService.filter(options, this.searchFields, filterValue, this.filterMatchMode, this.filterLocale) : options;
     });
 
-    constructor(public el: ElementRef, public cd: ChangeDetectorRef, public filterService: FilterService, public config: PrimeNGConfig, private renderer: Renderer2) {}
+    constructor(
+        public el: ElementRef,
+        public cd: ChangeDetectorRef,
+        public filterService: FilterService,
+        public config: PrimeNGConfig,
+        private renderer: Renderer2
+    ) {}
 
     ngOnInit() {
         this.id = this.id || UniqueComponentId();

src/app/components/megamenu/megamenu.ts

@@ -52,12 +52,12 @@ import { ObjectUtils, UniqueComponentId } from 'primeng/utils';
             (focus)="menuFocus.emit($event)"
             (blur)="menuBlur.emit($event)"
         >
-            <li *ngIf="submenu" [ngClass]="getSubmenuHeaderClass(submenu)" [style]="getItemProp(submenu, 'style')" role="presentation">{{ getItemLabel(submenu) }}</li>
+            <li *ngIf="submenu" [ngClass]="getSubmenuHeaderClass(submenu)" [ngStyle]="getItemProp(submenu, 'style')" role="presentation">{{ getItemLabel(submenu) }}</li>
             <ng-template ngFor let-processedItem [ngForOf]="items" let-index="index">
                 <li
                     *ngIf="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                     [attr.id]="getItemId(processedItem)"
-                    [style]="getItemProp(processedItem, 'style')"
+                    [ngStyle]="getItemProp(processedItem, 'style')"
                     [ngClass]="getSeparatorItemClass(processedItem)"
                     role="separator"
                     [attr.data-pc-section]="'separator'"

src/app/components/menubar/menubar.ts

@@ -73,7 +73,7 @@ export class MenubarService {
                 <li
                     *ngIf="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                     [attr.id]="getItemId(processedItem)"
-                    [style]="getItemProp(processedItem, 'style')"
+                    [ngStyle]="getItemProp(processedItem, 'style')"
                     [ngClass]="getSeparatorItemClass(processedItem)"
                     role="separator"
                     [attr.data-pc-section]="'separator'"

src/app/components/multiselect/multiselect.ts

@@ -25,7 +25,6 @@ import {
     Renderer2,
     Signal,
     signal,
-    SimpleChanges,
     TemplateRef,
     ViewChild,
     ViewEncapsulation
@@ -346,7 +345,7 @@ export class MultiSelectItem {
                                 </button>
                             </ng-template>
                         </div>
-                        <div class="p-multiselect-items-wrapper" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
+                        <div class="p-multiselect-items-wrapper" [ngStyle]="{ 'max-height': virtualScroll ? 'auto' : scrollHeight || 'auto' }">
                             <p-scroller
                                 *ngIf="virtualScroll"
                                 #scroller
@@ -373,7 +372,7 @@ export class MultiSelectItem {
                             </ng-container>
 
                             <ng-template #buildInItems let-items let-scrollerOptions="options">
-                                <ul #items class="p-multiselect-items p-component" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox" aria-multiselectable="true" [attr.aria-label]="listLabel">
+                                <ul #items class="p-multiselect-items p-component" [ngClass]="scrollerOptions.contentStyleClass" [ngStyle]="scrollerOptions.contentStyle" role="listbox" aria-multiselectable="true" [attr.aria-label]="listLabel">
                                     <ng-template ngFor let-option [ngForOf]="items" let-i="index">
                                         <ng-container *ngIf="isOptionGroup(option)">
                                             <li [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" class="p-multiselect-item-group" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
@@ -1189,7 +1188,15 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
         return ObjectUtils.isNotEmpty(this.maxSelectedLabels) && this.modelValue() && this.modelValue().length > this.maxSelectedLabels ? this.modelValue().slice(0, this.maxSelectedLabels) : this.modelValue();
     });
 
-    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig, public overlayService: OverlayService) {
+    constructor(
+        public el: ElementRef,
+        public renderer: Renderer2,
+        public cd: ChangeDetectorRef,
+        public zone: NgZone,
+        public filterService: FilterService,
+        public config: PrimeNGConfig,
+        public overlayService: OverlayService
+    ) {
         effect(() => {
             const modelValue = this.modelValue();
 

src/app/components/progressbar/progressbar.ts

@@ -20,14 +20,37 @@ import { QueryList } from '@angular/core';
             [attr.data-pc-section]="'root'"
             [ngClass]="{ 'p-progressbar p-component': true, 'p-progressbar-determinate': mode === 'determinate', 'p-progressbar-indeterminate': mode === 'indeterminate' }"
         >
-            <div *ngIf="mode === 'determinate'" class="p-progressbar-value p-progressbar-value-animate" [style.width]="value + '%'" style="display:flex" [style.background]="color" [attr.data-pc-section]="'value'">
+            <div
+                *ngIf="mode === 'determinate'"
+                class="p-progressbar-value p-progressbar-value-animate"
+                [ngStyle]="{
+                    width: value + '%',
+                    display: 'flex',
+                    background: color
+                }"
+                [attr.data-pc-section]="'value'"
+            >
                 <div class="p-progressbar-label">
-                    <div *ngIf="showValue && !contentTemplate" [style.display]="value != null && value !== 0 ? 'flex' : 'none'" [attr.data-pc-section]="'label'">{{ value }}{{ unit }}</div>
+                    <div
+                        *ngIf="showValue && !contentTemplate"
+                        [ngStyle]="{
+                            display: value != null && value !== 0 ? 'flex' : 'none'
+                        }"
+                        [attr.data-pc-section]="'label'"
+                    >
+                        {{ value }}{{ unit }}
+                    </div>
                     <ng-container *ngTemplateOutlet="contentTemplate; context: { $implicit: value }"></ng-container>
                 </div>
             </div>
             <div *ngIf="mode === 'indeterminate'" class="p-progressbar-indeterminate-container" [attr.data-pc-section]="'container'">
-                <div class="p-progressbar-value p-progressbar-value-animate" [style.background]="color" [attr.data-pc-section]="'value'"></div>
+                <div
+                    class="p-progressbar-value p-progressbar-value-animate"
+                    [ngStyle]="{
+                        background: color
+                    }"
+                    [attr.data-pc-section]="'value'"
+                ></div>
             </div>
         </div>
     `,