closes primefaces#16211 Table: breaks after one call to updateStyleEl…

…ement()

closes primefaces#16211 use domSanitizer to bypass code generated Trusted Types.

src/app/components/calendar/calendar.ts

@@ -19,6 +19,7 @@ import {
     Output,
     QueryList,
     Renderer2,
+    SecurityContext,
     TemplateRef,
     ViewChild,
     ViewEncapsulation
@@ -39,6 +40,7 @@ import { CalendarIcon } from 'primeng/icons/calendar';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { NavigationState, CalendarResponsiveOptions, CalendarTypeView, LocaleSettings, Month, CalendarMonthChangeEvent, CalendarYearChangeEvent } from './calendar.interface';
 import { AutoFocusModule } from 'primeng/autofocus';
+import { DomSanitizer } from '@angular/platform-browser';
 
 export const CALENDAR_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -1169,7 +1171,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
         return this.currentView === 'year' ? this.getTranslation('nextDecade') : this.currentView === 'month' ? this.getTranslation('nextYear') : this.getTranslation('nextMonth');
     }
 
-    constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, private zone: NgZone, private config: PrimeNGConfig, public overlayService: OverlayService) {
+    constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, private zone: NgZone, private config: PrimeNGConfig, public overlayService: OverlayService, private readonly domSanitizer: DomSanitizer) {
         this.window = this.document.defaultView as Window;
     }
 
@@ -3573,8 +3575,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
                     `;
                 }
             }
-
-            (<HTMLStyleElement>this.responsiveStyleElement).innerHTML = innerHTML;
+            this.responsiveStyleElement.innerHTML = this.domSanitizer.bypassSecurityTrustStyle(innerHTML) as string;
         }
     }
 

src/app/components/carousel/carousel.ts

@@ -33,6 +33,7 @@ import { UniqueComponentId } from 'primeng/utils';
 import { CarouselPageEvent, CarouselResponsiveOptions } from './carousel.interface';
 import { PrimeNGConfig } from 'primeng/api';
 import { DomHandler } from 'primeng/dom';
+import { DomSanitizer } from '@angular/platform-browser';
 /**
  * Carousel is a content slider featuring various customization options.
  * @group Components
@@ -357,7 +358,7 @@ export class Carousel implements AfterContentInit {
 
     window: Window;
 
-    constructor(public el: ElementRef, public zone: NgZone, public cd: ChangeDetectorRef, private renderer: Renderer2, @Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private config: PrimeNGConfig) {
+    constructor(public el: ElementRef, public zone: NgZone, public cd: ChangeDetectorRef, private renderer: Renderer2, @Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private config: PrimeNGConfig, private readonly domSanitizer: DomSanitizer) {
         this.totalShiftedItems = this.page * this.numScroll * -1;
         this.window = this.document.defaultView as Window;
     }
@@ -558,7 +559,7 @@ export class Carousel implements AfterContentInit {
             }
         }
 
-        this.carouselStyle.innerHTML = innerHTML;
+        this.carouselStyle.innerHTML = this.domSanitizer.bypassSecurityTrustStyle(innerHTML);
     }
 
     calculatePosition() {

src/app/components/confirmdialog/confirmdialog.ts

@@ -35,6 +35,7 @@ import { Nullable } from 'primeng/ts-helpers';
 import { UniqueComponentId, ZIndexUtils } from 'primeng/utils';
 import { Subscription } from 'rxjs';
 import { SafeHtmlPipe } from '../dom/safeHtmlPipe';
+import { DomSanitizer } from '@angular/platform-browser';
 
 const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}', style({ transform: 'none', opacity: 1 }))]);
 
@@ -443,7 +444,7 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy {
 
     translationSubscription: Subscription | undefined;
 
-    constructor(public el: ElementRef, public renderer: Renderer2, private confirmationService: ConfirmationService, public zone: NgZone, private cd: ChangeDetectorRef, public config: PrimeNGConfig, @Inject(DOCUMENT) private document: Document) {
+    constructor(public el: ElementRef, public renderer: Renderer2, private confirmationService: ConfirmationService, public zone: NgZone, private cd: ChangeDetectorRef, public config: PrimeNGConfig, @Inject(DOCUMENT) private document: Document, private readonly domSanitizer: DomSanitizer) {
         this.subscription = this.confirmationService.requireConfirmation$.subscribe((confirmation) => {
             if (!confirmation) {
                 this.hide();
@@ -617,7 +618,7 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy {
                 `;
             }
 
-            this.styleElement.innerHTML = innerHTML;
+            this.styleElement.innerHTML = this.domSanitizer.bypassSecurityTrustStyle(innerHTML);
         }
     }
 

src/app/components/galleria/galleria.ts

@@ -41,6 +41,7 @@ import { VoidListener } from 'primeng/ts-helpers';
 import { UniqueComponentId, ZIndexUtils } from 'primeng/utils';
 import { GalleriaResponsiveOptions } from './galleria.interface';
 import { FocusTrapModule } from 'primeng/focustrap';
+import { DomSanitizer } from '@angular/platform-browser';
 /**
  * Galleria is an advanced content gallery component.
  * @group Components
@@ -1017,7 +1018,7 @@ export class GalleriaThumbnails implements OnInit, AfterContentChecked, AfterVie
 
     _oldactiveIndex: number = 0;
 
-    constructor(public galleria: Galleria, @Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private renderer: Renderer2, private cd: ChangeDetectorRef) {}
+    constructor(public galleria: Galleria, @Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private renderer: Renderer2, private cd: ChangeDetectorRef, private readonly domSanitizer: DomSanitizer) {}
 
     ngOnInit() {
         if (isPlatformBrowser(this.platformId)) {
@@ -1108,7 +1109,7 @@ export class GalleriaThumbnails implements OnInit, AfterContentChecked, AfterVie
             }
         }
 
-        this.thumbnailsStyle.innerHTML = innerHTML;
+        this.thumbnailsStyle.innerHTML = this.domSanitizer.bypassSecurityTrustStyle(innerHTML) as string;
         DomHandler.setAttribute(this.thumbnailsStyle, 'nonce', this.galleria.config?.csp()?.nonce);
     }
 

src/app/components/tooltip/tooltip.ts

@@ -1,5 +1,6 @@
 import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { AfterViewInit, Directive, ElementRef, HostListener, Inject, Input, NgModule, NgZone, OnDestroy, PLATFORM_ID, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef, booleanAttribute, numberAttribute } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, HostListener, Inject, Input, NgModule, NgZone, OnDestroy, PLATFORM_ID, Renderer2, SecurityContext, SimpleChanges, TemplateRef, ViewContainerRef, booleanAttribute, numberAttribute } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 import { PrimeNGConfig, TooltipOptions } from 'primeng/api';
 import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom';
 import { Nullable } from 'primeng/ts-helpers';
@@ -166,7 +167,7 @@ export class Tooltip implements AfterViewInit, OnDestroy {
 
     interactionInProgress = false;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any, public el: ElementRef, public zone: NgZone, public config: PrimeNGConfig, private renderer: Renderer2, private viewContainer: ViewContainerRef) {}
+    constructor(@Inject(PLATFORM_ID) private platformId: any, public el: ElementRef, public zone: NgZone, public config: PrimeNGConfig, private renderer: Renderer2, private viewContainer: ViewContainerRef, private readonly domSanitizer: DomSanitizer) {}
 
     ngAfterViewInit() {
         if (isPlatformBrowser(this.platformId)) {
@@ -470,7 +471,7 @@ export class Tooltip implements AfterViewInit, OnDestroy {
             this.tooltipText.innerHTML = '';
             this.tooltipText.appendChild(document.createTextNode(content));
         } else {
-            this.tooltipText.innerHTML = content;
+            this.tooltipText.innerHTML = this.domSanitizer.sanitize(SecurityContext.HTML, content);
         }
     }