Avoid false green framework CSP checks

.github/workflows/visual-tests-demos.yml

@@ -1092,6 +1092,8 @@ jobs:
       needs.build-devextreme.result == 'success'
     runs-on: devextreme-shr2
     timeout-minutes: 60
+    env:
+      CSP_USE_BUNDLED: '0'
 
     steps:
     - name: Get sources
@@ -1155,7 +1157,7 @@ jobs:
         if-no-files-found: ignore
 
   csp-check-frameworks:
-    name: CSP check (${{ matrix.FRAMEWORK }})
+    name: ${{ matrix.SHARD_TOTAL == 1 && format('CSP check ({0})', matrix.FRAMEWORK) || format('CSP check ({0} {1}/{2})', matrix.FRAMEWORK, matrix.SHARD_INDEX, matrix.SHARD_TOTAL) }}
     needs: [check-should-run, determine-framework-tests-scope, build-devextreme]
     if: |
       always() &&
@@ -1165,10 +1167,21 @@ jobs:
       needs.build-devextreme.result == 'success'
     strategy:
       fail-fast: false
+      # Angular AOT bundling is slow, so it is split into parallel shards
+      # (CSP_SHARD_*, round-robin in csp-bundle-angular.js). React/Vue stay light.
       matrix:
-        FRAMEWORK: [React, Vue, Angular]
+        include:
+          - { FRAMEWORK: React,   SHARD_INDEX: 1, SHARD_TOTAL: 2 }
+          - { FRAMEWORK: React,   SHARD_INDEX: 2, SHARD_TOTAL: 2 }
+          - { FRAMEWORK: Vue,     SHARD_INDEX: 1, SHARD_TOTAL: 2 }
+          - { FRAMEWORK: Vue,     SHARD_INDEX: 2, SHARD_TOTAL: 2 }
+          - { FRAMEWORK: Angular, SHARD_INDEX: 1, SHARD_TOTAL: 3 }
+          - { FRAMEWORK: Angular, SHARD_INDEX: 2, SHARD_TOTAL: 3 }
+          - { FRAMEWORK: Angular, SHARD_INDEX: 3, SHARD_TOTAL: 3 }
     runs-on: devextreme-shr2
     timeout-minutes: 60
+    env:
+      CSP_USE_BUNDLED: '1'
 
     steps:
     - name: Get sources
@@ -1212,6 +1225,16 @@ jobs:
       working-directory: apps/demos
       run: pnpm add ../../devextreme-installer.tgz ../../devextreme-dist-installer.tgz ../../devextreme-react-installer.tgz ../../devextreme-vue-installer.tgz ../../devextreme-angular-installer.tgz
 
+    # Bundle production-style pages only when the CSP check is configured to
+    # read csp-bundled-demos; otherwise the checker uses SystemJS dev demos.
+    - name: Bundle demos for CSP check
+      if: env.CSP_USE_BUNDLED == '1' || env.CSP_USE_BUNDLED == 'true'
+      working-directory: apps/demos
+      env:
+        CSP_SHARD_INDEX: ${{ matrix.SHARD_INDEX }}
+        CSP_SHARD_TOTAL: ${{ matrix.SHARD_TOTAL }}
+      run: node utils/server/csp-bundle.js --framework=${{ matrix.FRAMEWORK }}
+
     - name: Start CSP Server
       run: node apps/demos/utils/server/csp-server.js 8080 &
 
@@ -1220,13 +1243,15 @@ jobs:
       env:
         CSP_FRAMEWORKS: ${{ matrix.FRAMEWORK }}
         CHROME_PATH: google-chrome-stable
+        CSP_SHARD_INDEX: ${{ matrix.SHARD_INDEX }}
+        CSP_SHARD_TOTAL: ${{ matrix.SHARD_TOTAL }}
       run: node utils/server/csp-check.js
 
     - name: Upload CSP report
       if: always()
       uses: actions/upload-artifact@v7
       with:
-        name: csp-violations-${{ matrix.FRAMEWORK }}
+        name: csp-violations-${{ matrix.FRAMEWORK }}${{ matrix.SHARD_TOTAL != 1 && format('-shard{0}', matrix.SHARD_INDEX) || '' }}
         path: apps/demos/csp-reports/
         if-no-files-found: ignore
 
@@ -1300,4 +1325,3 @@ jobs:
           name: csp-violations-report
           path: apps/demos/csp-reports/
           if-no-files-found: ignore
-

apps/demos/.gitignore

@@ -34,6 +34,11 @@ Demos/**/tsconfig.json
 publish-demos
 
 csp-reports
+csp-bundled-demos
+
+# Scratch artifacts from utils/server/csp-bundle-angular.js (cleaned up on success).
+utils/server/.csp-bundle-angular-*
+Demos/**/.csp-bundle-angular-patched.*.ts
 
 .angular
 angular.json

apps/demos/Demos/ActionSheet/PopoverMode/Angular/app/app.component.html

@@ -1,5 +1,5 @@
 <dx-list (onItemClick)="itemClick($event)">
-  @for (contact of contacts; track contact.id) {
+  @for (contact of contacts; track contact.name) {
   <dxi-list-item>
     <div>{{ contact.name }}</div>
     <div>{{ contact.phone }}</div>

apps/demos/Demos/Charts/AreaSelectionZooming/Angular/app/app.component.html

@@ -28,8 +28,4 @@
     <dxo-chart-border [visible]="true"></dxo-chart-border>
   </dxo-chart-legend>
 </dx-chart>
-<dx-button
-  id="reset-zoom"
-  text="Reset"
-  (onClick)="resetZoom($event)"
-></dx-button>
+<dx-button id="reset-zoom" text="Reset" (onClick)="resetZoom()"></dx-button>

apps/demos/Demos/Charts/CenterLabelCustomization/Angular/app/app.component.css

@@ -15,3 +15,11 @@
   text-align: center;
   margin-bottom: 20px;
 }
+
+::ng-deep .center-label {
+  font-size: 18px;
+}
+
+::ng-deep .center-label-total {
+  font-weight: 600;
+}

apps/demos/Demos/Charts/CenterLabelCustomization/Angular/app/app.component.html

@@ -38,15 +38,15 @@
           height="40"
         />
         <text
+          class="center-label"
           text-anchor="middle"
-          style="font-size: 18px"
           x="100"
           y="120"
           fill="#494949"
         >
           <tspan x="100">{{ country }}</tspan>
           <!-- display: inline -->
-          <tspan x="100" dy="20px" style="font-weight: 600">{{
+          <tspan class="center-label-total" x="100" dy="20px">{{
             calculateTotal(pieChart)
           }}</tspan>
         </text>

apps/demos/Demos/Charts/TilingAlgorithms/Angular/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
-import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
+import { bootstrapApplication } from '@angular/platform-browser';
 import { DxTreeMapModule, DxSelectBoxModule } from 'devextreme-angular';
 import { PopulationByAge, Service } from './app.service';
 
@@ -20,7 +20,6 @@ if (window && window.config?.packageConfigPaths) {
   providers: [Service],
   preserveWhitespaces: true,
   imports: [
-    BrowserModule,
     DxTreeMapModule,
     DxSelectBoxModule,
   ],

apps/demos/Demos/Chat/MessageEditing/Angular/app/app.component.html

@@ -27,7 +27,7 @@
         displayExpr="text"
         valueExpr="key"
         [value]="selectedEditingStrategy"
-        [inputAttr]="alloUpdatingLabel"
+        [inputAttr]="allowEditingLabel"
         (onValueChanged)="onAllowUpdatingChange($event)"
       ></dx-select-box>
     </div>

apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/Angular/app/app.component.html

@@ -6,7 +6,7 @@
   [showBorders]="true"
 >
   <dxo-data-grid-keyboard-navigation
-    [editOnKeyPress]="editOnkeyPress"
+    [editOnKeyPress]="editOnKeyPress"
     [enterKeyAction]="enterKeyAction"
     [enterKeyDirection]="enterKeyDirection"
   >

apps/demos/Demos/DataGrid/NewRecordPosition/Angular/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
-import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
+import { bootstrapApplication } from '@angular/platform-browser';
 import Guid from 'devextreme/core/guid';
 import { CustomStore } from 'devextreme-angular/common/data';
 import { DxSelectBoxModule } from 'devextreme-angular';
@@ -24,7 +24,6 @@ if (window && window.config?.packageConfigPaths) {
   styleUrls: [`.${modulePrefix}/app.component.css`],
   providers: [Service],
   imports: [
-    BrowserModule,
     DxDataGridModule,
     DxSelectBoxModule,
   ],

apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.css

@@ -11,6 +11,10 @@
   display: flex;
 }
 
+::ng-deep .drawer-panel {
+  width: 200px;
+}
+
 ::ng-deep #toolbar {
   background-color: var(--dx-component-color-bg);
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08);

apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.html

@@ -9,7 +9,7 @@
     [height]="400"
     [closeOnOutsideClick]="true"
   >
-    <div *dxTemplate="let data of 'template'" style="width: 200px">
+    <div *dxTemplate="let data of 'template'" class="drawer-panel">
       <dx-list
         class="panel-list"
         [elementAttr]="listElementAttr"

apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/index.html

@@ -6,7 +6,6 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
     <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
-    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
 
     <script src="../../../../node_modules/core-js/client/shim.min.js"></script>
     <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>

apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/index.html

@@ -6,7 +6,6 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
     <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
-    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
 
     <script src="../../../../node_modules/core-js/client/shim.min.js"></script>
     <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>

apps/demos/Demos/FileUploader/ChunkUpload/Angular/app/app.component.html

@@ -3,7 +3,7 @@
   accept="image/*"
   uploadUrl="https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/ChunkUpload"
   [chunkSize]="200000"
-  (onUploadStarted)="onUploadStarted($event)"
+  (onUploadStarted)="onUploadStarted()"
   (onProgress)="onUploadProgress($event)"
 >
 </dx-file-uploader>

apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
-import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
+import { bootstrapApplication } from '@angular/platform-browser';
 import { DxListModule, DxButtonModule, DxTagBoxModule } from 'devextreme-angular';
 import { DxFilterBuilderModule, DxFilterBuilderComponent, DxFilterBuilderTypes } from 'devextreme-angular/ui/filter-builder';
 import { Service } from './app.service';
@@ -34,7 +34,6 @@ if (window && window.config?.packageConfigPaths) {
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
   imports: [
-    BrowserModule,
     DxListModule,
     DxButtonModule,
     DxTagBoxModule,

apps/demos/Demos/Form/Grouping/Angular/app/app.component.ts

@@ -26,7 +26,7 @@ if (window && window.config?.packageConfigPaths) {
 export class AppComponent {
   employee: Employee;
 
-  groupCaptionTemplates: Object;
+  groupCaptionTemplates: { name: string; icon: string }[];
 
   constructor(service: Service) {
     this.employee = service.getEmployee();

apps/demos/Demos/Form/ItemCustomization/Angular/app/app.component.ts

@@ -60,7 +60,7 @@ export class AppComponent implements AfterViewInit {
 
   phoneEditorOptions: Object;
 
-  labelTemplates: Object;
+  labelTemplates: { name: string; icon: string }[];
 
   constructor(service: Service) {
     this.employee = service.getEmployee();

apps/demos/Demos/List/Selection/Angular/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
-import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
+import { bootstrapApplication } from '@angular/platform-browser';
 import { DataSource, ArrayStore } from 'devextreme-angular/common/data';
 import { DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular';
 import type { SingleMultipleAllOrNone } from 'devextreme-angular/common';
@@ -24,7 +24,6 @@ if (window && window.config?.packageConfigPaths) {
   styleUrls: [`.${modulePrefix}/app.component.css`],
   preserveWhitespaces: true,
   imports: [
-    BrowserModule,
     DxSelectBoxModule,
     DxListModule,
     DxCheckBoxModule,

apps/demos/Demos/LoadIndicator/Overview/Angular/app/app.component.html

@@ -23,12 +23,7 @@
     indicatorSrc="../../../../images/Loading.gif"
   ></dx-load-indicator>
   <div class="label">Using with other widgets</div>
-  <dx-button
-    id="button"
-    [height]="40"
-    [width]="180"
-    (onClick)="onClick($event)"
-  >
+  <dx-button id="button" [height]="40" [width]="180" (onClick)="onClick()">
     <div *dxTemplate="let data of 'content'">
       <dx-load-indicator
         class="button-indicator"

apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.html

@@ -34,7 +34,7 @@
       dataType="date"
     >
     </dxi-data-grid-column>
-    <dxo-data-grid-filter-row [visible]="true" [applyFilter]="auto">
+    <dxo-data-grid-filter-row [visible]="true" [applyFilter]="'auto'">
     </dxo-data-grid-filter-row>
     <dxo-data-grid-editing mode="popup" [allowUpdating]="true">
       <dxo-data-grid-popup [width]="700" [height]="345"> </dxo-data-grid-popup>

apps/demos/Demos/Localization/UsingIntl/Angular/app/app.component.html

@@ -36,7 +36,7 @@
       dataType="date"
     >
     </dxi-data-grid-column>
-    <dxo-data-grid-filter-row [visible]="true" [applyFilter]="auto">
+    <dxo-data-grid-filter-row [visible]="true" [applyFilter]="'auto'">
     </dxo-data-grid-filter-row>
     <dxo-data-grid-editing mode="popup" [allowUpdating]="true">
       <dxo-data-grid-popup [width]="700" [height]="345"> </dxo-data-grid-popup>

apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.html

@@ -5,7 +5,7 @@
     [group]="draggingGroupName"
     (onDragStart)="onListDragStart($event)"
   >
-    @for (task of tasks; track task.id) {
+    @for (task of tasks; track task.text) {
     <dx-draggable
       class="item dx-card"
       [clone]="true"

apps/demos/Demos/SpeechToText/Overview/Angular/app/app.component.html

@@ -27,7 +27,7 @@
     <dx-button
       text="Clear"
       [disabled]="textAreaValue === ''"
-      (onClick)="onClearButtonClick($event)"
+      (onClick)="onClearButtonClick()"
     ></dx-button>
   </div>
   <div class="options">

apps/demos/Demos/Stepper/FormIntegration/Angular/app/app.component.html

@@ -75,15 +75,15 @@
         [visible]="selectedIndex !== 0 && !isConfirmed"
         text="Back"
         type="normal"
-        (onClick)="onPrevButtonClick($event)"
+        (onClick)="onPrevButtonClick()"
         [width]="100"
       >
       </dx-button>
       <dx-button
         id="nextButton"
         [text]="getNextButtonText()"
         type="default"
-        (onClick)="onNextButtonClick($event)"
+        (onClick)="onNextButtonClick()"
         [width]="100"
       >
       </dx-button>

apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/Angular/app/app.component.html

@@ -8,7 +8,7 @@
   (onFocusedCellChanging)="onFocusedCellChanging($event)"
 >
   <dxo-tree-list-keyboard-navigation
-    [editOnKeyPress]="editOnkeyPress"
+    [editOnKeyPress]="editOnKeyPress"
     [enterKeyAction]="enterKeyAction"
     [enterKeyDirection]="enterKeyDirection"
   >

apps/demos/Demos/TreeList/MultipleRowSelection/Angular/app/app.component.html

@@ -40,15 +40,15 @@
       [(value)]="selectionMode"
       [inputAttr]="{ 'aria-label': 'Selection Mode' }"
       [items]="['all', 'excludeRecursive', 'leavesOnly']"
-      (onValueChanged)="onOptionsChanged($event)"
+      (onValueChanged)="onOptionsChanged()"
       text="Recursive Selection"
     >
     </dx-select-box>
   </div>
   <div class="option">
     <dx-check-box
       [(value)]="recursiveSelectionEnabled"
-      (onValueChanged)="onOptionsChanged($event)"
+      (onValueChanged)="onOptionsChanged()"
       text="Recursive Selection"
     >
     </dx-check-box>

apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.ts

@@ -1,7 +1,7 @@
 import {
   Component, Pipe, PipeTransform, enableProdMode, ViewChild, provideZoneChangeDetection,
 } from '@angular/core';
-import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
+import { bootstrapApplication } from '@angular/platform-browser';
 import { DxListModule, DxCheckBoxModule } from 'devextreme-angular';
 import { DxTreeViewModule, DxTreeViewComponent, DxTreeViewTypes } from 'devextreme-angular/ui/tree-view';
 import { DxSelectBoxModule, DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
@@ -31,7 +31,6 @@ if (window && window.config?.packageConfigPaths) {
   providers: [Service],
   preserveWhitespaces: true,
   imports: [
-    BrowserModule,
     DxTreeViewModule,
     DxListModule,
     DxCheckBoxModule,