Merge branch '25_2_update_angular19' of https://github.com/GoodDayForSurf/DevExtreme into 25_2_update_angular19

# Conflicts:
#	packages/devextreme-angular/package.json
#	pnpm-lock.yaml

Author: GoodDayForSurf

.github/workflows/demos_visual_tests.yml

@@ -190,7 +190,7 @@ jobs:
   build-demos:
     runs-on: devextreme-shr2
     name: Build Demos Bundles
-    timeout-minutes: 20
+    timeout-minutes: 30
     needs: [check-should-run, determine-framework-tests-scope, build-devextreme]
     if: |
       always() &&
@@ -271,7 +271,7 @@ jobs:
       needs.determine-framework-tests-scope.outputs.framework-tests-scope != 'none' &&
       needs.build-devextreme.result == 'success'
     runs-on: devextreme-shr2
-    timeout-minutes: 20
+    timeout-minutes: 30
 
     steps:
       - name: Get sources
@@ -310,17 +310,17 @@ jobs:
       - name: Install tgz
         run: pnpm add -w ./devextreme-installer.tgz ./devextreme-dist-installer.tgz ./devextreme-react-installer.tgz ./devextreme-vue-installer.tgz ./devextreme-angular-installer.tgz
 
-      - name: Run check TS for Vue
+      - name: Demos - Check Vue TS
         working-directory: apps/demos
         run: pnpm run ts-check-vue
 
       # - name: Run check TS for Angular
       #   working-directory: apps/demos
       #   run: pnpm run ts-check-ng
 
-      # - name: Run check TS for React
-      #   working-directory: apps/demos
-      #   run: pnpm run ts-check-react
+      - name: Demos - Check React TS
+        working-directory: apps/demos
+        run: pnpm run ts-check-react
 
   lint:
     name: Lint code base

.github/workflows/packages_publishing.yml

@@ -96,7 +96,15 @@ jobs:
       - name: Build artifacts package
         run: npx ts-node tools/scripts/make-artifacts-package
 
-      - uses: actions/upload-artifact@v4
+      - name: Upload SBOM artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: sbom
+          path: packages/sbom/dist
+          retention-days: 7
+
+      - name: Upload packages
+        uses: actions/upload-artifact@v4
         with:
           name: packages
           path: artifacts/npm/*.tgz

apps/angular/angular.json

@@ -11,18 +11,22 @@
       "schematics": {},
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/sandbox",
+            "outputPath": {
+              "base": "dist/sandbox"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "tsConfig": "src/tsconfig.app.json",
             "styles": [
               "node_modules/devextreme/dist/css/dx.common.css",
               "node_modules/devextreme/dist/css/dx.light.css"
             ],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -38,8 +42,6 @@
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -54,23 +56,21 @@
               "sourceMap": true,
               "namedChunks": false,
               "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": false
+              "extractLicenses": true
             }
           }
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "sandbox:build"
+            "buildTarget": "sandbox:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "sandbox:build:production"
+              "buildTarget": "sandbox:build:production"
             },
             "dev": {
-              "browserTarget": "sandbox:build:dev"
+              "buildTarget": "sandbox:build:dev"
             }
           }
         },

apps/angular/package.json

@@ -6,31 +6,29 @@
   "author": "Developer Express Inc.",
   "license": "MIT",
   "dependencies": {
-    "@angular/animations": "17.3.12",
-    "@angular/common": "17.3.12",
-    "@angular/compiler": "17.3.12",
-    "@angular/compiler-cli": "17.3.12",
-    "@angular/core": "17.3.12",
-    "@angular/forms": "17.3.12",
-    "@angular/platform-browser": "17.3.12",
-    "@angular/platform-browser-dynamic": "17.3.12",
-    "@angular/router": "17.3.12",
+    "@angular/animations": "19.2.15",
+    "@angular/common": "19.2.15",
+    "@angular/compiler": "19.2.15",
+    "@angular/compiler-cli": "19.2.15",
+    "@angular/core": "19.2.15",
+    "@angular/forms": "19.2.15",
+    "@angular/platform-browser": "19.2.15",
+    "@angular/platform-browser-dynamic": "19.2.15",
+    "@angular/router": "19.2.17",
     "core-js": "^2.6.12",
     "devextreme": "workspace:*",
     "devextreme-angular": "workspace:*",
-    "rxjs": "7.8.1",
     "tslib": "^2.6.1",
-    "zone.js": "0.14.10"
+    "zone.js": "0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.3.11",
-    "@angular/cli": "17.3.11",
-    "@angular/language-service": "17.3.12",
+    "@angular-devkit/build-angular": "19.2.19",
+    "@angular/cli": "19.2.18",
     "@types/jasmine": "5.1.4",
     "@types/node": "20.11.17",
     "cross-env": "7.0.3",
     "ts-node": "10.9.2",
-    "typescript": "5.4.5"
+    "typescript": "5.8.3"
   },
   "scripts": {
     "ng": "ng",

apps/angular/src/app/app.component.ts

@@ -1,5 +1,4 @@
 /* tslint:disable:component-selector */
-
 import {
   Component,
   OnInit,
@@ -95,7 +94,8 @@ import ArrayStore from 'devextreme/data/array_store';
     CustomerService,
     AppointmentService,
     OwnerService
-  ]
+  ],
+  standalone: false
 })
 export class AppComponent implements OnInit, AfterViewInit {
   @ViewChild(DxPopoverComponent) popover: DxPopoverComponent;

apps/angular/src/app/app.module.ts

@@ -3,7 +3,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import { ReactiveFormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 
-
 import { DevExtremeModule } from 'devextreme-angular';
 
 @NgModule({

apps/angular/tsconfig.json

@@ -5,12 +5,11 @@
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
+    "module": "ES2022",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "target": "es5",
     "typeRoots": [
       "node_modules/@types"
     ],

apps/demos/Demos/Accordion/Overview/Angular/app/app.component.ts

@@ -1,7 +1,5 @@
-import { NgModule, Component, enableProdMode } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
+import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
 import {
   DxAccordionModule, DxCheckBoxModule, DxSliderModule, DxTagBoxModule,
 } from 'devextreme-angular';
@@ -24,6 +22,12 @@ if (window && window.config?.packageConfigPaths) {
   styleUrls: [`.${modulePrefix}/app.component.css`],
   providers: [Service],
   preserveWhitespaces: true,
+  imports: [
+    DxAccordionModule,
+    DxCheckBoxModule,
+    DxSliderModule,
+    DxTagBoxModule,
+  ],
 })
 export class AppComponent {
   companies: Company[];
@@ -33,17 +37,8 @@ export class AppComponent {
   }
 }
 
-@NgModule({
-  imports: [
-    BrowserModule,
-    DxAccordionModule,
-    DxCheckBoxModule,
-    DxSliderModule,
-    DxTagBoxModule,
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
   ],
-  declarations: [AppComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule { }
-
-platformBrowserDynamic().bootstrapModule(AppModule);
+});

apps/demos/Demos/Accordion/Overview/React/App.tsx

@@ -4,22 +4,22 @@ import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
 import TagBox, { type TagBoxTypes } from 'devextreme-react/tag-box';
 import Slider, { Tooltip, Label, type SliderTypes } from 'devextreme-react/slider';
 
-import service from './data.ts';
+import { companies } from './data.ts';
+import type { Company } from './types.ts';
 import CustomTitle from './CustomTitle.tsx';
 import CustomItem from './CustomItem.tsx';
 
 const companyLabel = { 'aria-label': 'Company' };
-const companies = service.getCompanies();
 
 const App = () => {
-  const [selectedItems, setSelectedItems] = useState([companies[0]]);
-  const [multiple, setMultiple] = useState(false);
-  const [collapsible, setCollapsible] = useState(false);
-  const [animationDuration, setAnimationDuration] = useState(300);
+  const [selectedItems, setSelectedItems] = useState<Company[]>([companies[0]]);
+  const [multiple, setMultiple] = useState<boolean>(false);
+  const [collapsible, setCollapsible] = useState<boolean>(false);
+  const [animationDuration, setAnimationDuration] = useState<number>(300);
 
-  const selectionChanged = useCallback((e: AccordionTypes.SelectionChangedEvent) => {
+  const selectionChanged = useCallback((e: AccordionTypes.SelectionChangedEvent): void => {
     let newItems = [...selectedItems];
-    e.removedItems.forEach((item) => {
+    e.removedItems.forEach((item: Company): void => {
       const index = newItems.indexOf(item);
       if (index >= 0) {
         newItems.splice(index, 1);
@@ -31,21 +31,21 @@ const App = () => {
     setSelectedItems(newItems);
   }, [selectedItems, setSelectedItems]);
 
-  const selectedItemsChanged = useCallback((e: TagBoxTypes.ValueChangedEvent) => {
+  const selectedItemsChanged = useCallback((e: TagBoxTypes.ValueChangedEvent): void => {
     setSelectedItems(e.value);
-  }, [setSelectedItems]);
+  }, []);
 
-  const multipleChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
+  const multipleChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent): void => {
     setMultiple(e.value);
-  }, [setMultiple]);
+  }, []);
 
-  const collapsibleChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
+  const collapsibleChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent): void => {
     setCollapsible(e.value);
-  }, [setCollapsible]);
+  }, []);
 
-  const animationDurationChanged = useCallback((e: SliderTypes.ValueChangedEvent) => {
+  const animationDurationChanged = useCallback((e: SliderTypes.ValueChangedEvent): void => {
     setAnimationDuration(e.value);
-  }, [setAnimationDuration]);
+  }, []);
 
   return (
     <div id="accordion">

apps/demos/Demos/Accordion/Overview/React/CustomItem.tsx

@@ -1,28 +1,39 @@
 import React from 'react';
+import type { Company } from './types.ts';
+
+export default function CustomItem(company: Company) {
+  const {
+    Address,
+    City,
+    State,
+    Zipcode,
+    Phone,
+    Fax,
+    Website,
+  } = company;
 
-export default function CustomItem(data) {
   return (
     <div>
       <div>
         <p>
-          <b>{data.City} </b>
-          (<span>{data.State}</span>)
+          <b>{City} </b>
+          (<span>{State}</span>)
         </p>
         <p>
-          <span>{data.Zipcode} </span>
-          <span>{data.Address}</span>
+          <span>{Zipcode} </span>
+          <span>{Address}</span>
         </p>
       </div>
       <div>
         <p>
-          Phone: <b>{data.Phone}</b>
+          Phone: <b>{Phone}</b>
         </p>
         <p>
-          Fax: <b>{data.Fax}</b>
+          Fax: <b>{Fax}</b>
         </p>
         <p>
-          Website: <a href={data.Website} target="_blank">
-            {data.Website}
+          Website: <a href={Website} target="_blank">
+            {Website}
           </a>
         </p>
       </div>