chore: grid csp project update versions (#4229)

examples-standalone/grid-csp-enabled/.browserslistrc

@@ -1,16 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR

examples-standalone/grid-csp-enabled/angular.json

@@ -5,22 +5,20 @@
   "projects": {
     "grid-csp-enabled": {
       "projectType": "application",
-      "schematics": {
+      "schematics": {},
-        "@schematics/angular:application": {
-          "strict": true
-        }
-      },
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": "dist/grid-csp-enabled",
             "index": "src/index.html",
-            "main": "src/main.ts",
+            "browser": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "zone.js"
+            ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
@@ -48,21 +46,12 @@
                   "maximumError": "4kb"
                 }
               ],
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
-              "sourceMap": true,
+              "sourceMap": true
-              "namedChunks": true
             }
           },
           "defaultConfiguration": "production"
@@ -71,10 +60,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "grid-csp-enabled:build:production"
+              "buildTarget": "grid-csp-enabled:build:production"
             },
             "development": {
-              "browserTarget": "grid-csp-enabled:build:development"
+              "buildTarget": "grid-csp-enabled:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -82,16 +71,17 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "grid-csp-enabled:build"
+            "buildTarget": "grid-csp-enabled:build"
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "src/test.ts",
+            "polyfills": [
-            "polyfills": "src/polyfills.ts",
+              "zone.js",
+              "zone.js/testing"
+            ],
             "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
             "assets": [
               "src/favicon.ico",
               "src/assets"
@@ -107,6 +97,5 @@
         }
       }
     }
-  },
+  }
-  "defaultProject": "grid-csp-enabled"
 }

examples-standalone/grid-csp-enabled/karma.conf.js

@@ -1,44 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      jasmine: {
-        // you can add configuration options for Jasmine here
-        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-        // for example, you can disable the random execution with `random: false`
-        // or set a specific seed with `seed: 4321`
-      },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
-    },
-    coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/grid-csp-enabled'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};

examples-standalone/grid-csp-enabled/package.json

@@ -10,48 +10,54 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~13.3.0",
+    "@angular/animations": "^17.0.0",
-    "@angular/common": "~13.3.0",
+    "@angular/common": "^17.0.0",
-    "@angular/compiler": "~13.3.0",
+    "@angular/compiler": "^17.0.0",
-    "@angular/core": "~13.3.0",
+    "@angular/core": "^17.0.0",
-    "@angular/forms": "~13.3.0",
+    "@angular/forms": "^17.0.0",
-    "@angular/platform-browser": "~13.3.0",
+    "@angular/platform-browser": "^17.0.0",
-    "@angular/platform-browser-dynamic": "~13.3.0",
+    "@angular/platform-browser-dynamic": "^17.0.0",
-    "@angular/router": "~13.3.0",
+    "@angular/router": "^17.0.0",
-    "@progress/kendo-angular-grid": "^7.2.1",
+    "@progress/kendo-angular-grid": "^15.1.0",
-    "rxjs": "~7.5.0",
+    "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.11.4",
+    "zone.js": "~0.14.2",
-    "@progress/kendo-angular-buttons": "^8.0.0",
-    "@progress/kendo-angular-common": "^3.0.0",
-    "@progress/kendo-angular-dateinputs": "^7.0.0",
-    "@progress/kendo-angular-dropdowns": "^7.0.0",
-    "@progress/kendo-angular-excel-export": "^5.0.0",
-    "@progress/kendo-angular-inputs": "^9.0.0",
-    "@progress/kendo-angular-intl": "^4.0.0",
-    "@progress/kendo-angular-l10n": "^4.0.0",
-    "@progress/kendo-angular-label": "^4.0.0",
-    "@progress/kendo-angular-pdf-export": "^4.0.0",
-    "@progress/kendo-angular-popup": "^5.0.0",
     "@progress/kendo-data-query": "^1.0.0",
-    "@progress/kendo-drawing": "^1.0.0",
+    "@progress/kendo-drawing": "^1.19.0",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-treeview": "^7.0.0",
+    "@progress/kendo-angular-buttons": "15.1.0",
-    "@angular/localize": "~13.3.0",
+    "@progress/kendo-angular-common": "15.1.0",
-    "@progress/kendo-theme-default": "^5.0.0"
+    "@progress/kendo-angular-dateinputs": "15.1.0",
+    "@progress/kendo-angular-layout": "15.1.0",
+    "@progress/kendo-angular-dropdowns": "15.1.0",
+    "@progress/kendo-angular-excel-export": "15.1.0",
+    "@progress/kendo-angular-icons": "15.1.0",
+    "@progress/kendo-angular-inputs": "15.1.0",
+    "@progress/kendo-angular-intl": "15.1.0",
+    "@progress/kendo-angular-l10n": "15.1.0",
+    "@progress/kendo-angular-label": "15.1.0",
+    "@progress/kendo-angular-pdf-export": "15.1.0",
+    "@progress/kendo-angular-popup": "15.1.0",
+    "@progress/kendo-angular-utils": "15.1.0",
+    "@progress/kendo-angular-spreadsheet": "15.1.0",
+    "@progress/kendo-angular-treeview": "15.1.0",
+    "@progress/kendo-angular-dialog": "15.1.0",
+    "@progress/kendo-svg-icons": "^2.0.0",
+    "@progress/kendo-angular-progressbar": "15.1.0",
+    "@angular/localize": "^17.0.0",
+    "@progress/kendo-theme-default": "^7.2.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.3.3",
+    "@angular-devkit/build-angular": "^17.0.10",
-    "@angular/cli": "~13.3.3",
+    "@angular/cli": "^17.0.10",
-    "@angular/compiler-cli": "~13.3.0",
+    "@angular/compiler-cli": "^17.0.0",
-    "@types/jasmine": "~3.10.0",
+    "@types/jasmine": "~5.1.0",
-    "@types/node": "^12.11.1",
+    "jasmine-core": "~5.1.0",
-    "jasmine-core": "~4.0.0",
+    "karma": "~6.4.0",
-    "karma": "~6.3.0",
+    "karma-chrome-launcher": "~3.2.0",
-    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.2.0",
-    "karma-coverage": "~2.1.0",
+    "karma-jasmine": "~5.1.0",
-    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
-    "karma-jasmine-html-reporter": "~1.7.0",
+    "typescript": "~5.2.2"
-    "typescript": "~4.6.2"
   }
 }

examples-standalone/grid-csp-enabled/src/app/app.component.spec.ts

@@ -4,9 +4,7 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
+      imports: [AppComponent],
-        AppComponent
-      ],
     }).compileComponents();
   });
 
@@ -16,7 +14,7 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'grid-csp-enabled'`, () => {
+  it(`should have the 'grid-csp-enabled' title`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app.title).toEqual('grid-csp-enabled');
@@ -26,6 +24,6 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('grid-csp-enabled app is running!');
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, grid-csp-enabled');
   });
 });

examples-standalone/grid-csp-enabled/src/app/app.component.ts

@@ -1,12 +1,16 @@
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { GridModule } from '@progress/kendo-angular-grid';
 import { customers } from './customers';
 
 @Component({
   selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, GridModule],
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrl: './app.component.css',
 })
 export class AppComponent {
-  public title = 'grid-csp-enabled';
+    title = 'grid-csp-enabled';
-  public gridData: any[] = customers;
+    public gridData: any[] = customers;
 }

examples-standalone/grid-csp-enabled/src/app/app.config.ts

@@ -0,0 +1,6 @@
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+export const appConfig: ApplicationConfig = {
+  providers: [importProvidersFrom([BrowserAnimationsModule])]
+};

examples-standalone/grid-csp-enabled/src/app/app.module.ts

@@ -1,22 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { GridModule } from '@progress/kendo-angular-grid';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    GridModule,
-    BrowserAnimationsModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

examples-standalone/grid-csp-enabled/src/index.html

@@ -4,10 +4,8 @@
   <meta charset="utf-8">
   <title>GridCspEnabled</title>
   <base href="/">
-  
   <!-- Enable Content-Security-Policy -->
   <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; style-src-elem 'self' 'unsafe-inline'; img-src 'self'; font-src 'self' data:">
-  
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

examples-standalone/grid-csp-enabled/src/main.ts

@@ -1,12 +1,8 @@
-import { enableProdMode } from '@angular/core';
+/// <reference types="@angular/localize" />
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+import { bootstrapApplication } from '@angular/platform-browser';
-import { environment } from './environments/environment';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
 
-if (environment.production) {
+bootstrapApplication(AppComponent, appConfig)
-  enableProdMode();
+  .catch((err) => console.error(err));
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));

examples-standalone/grid-csp-enabled/src/polyfills.ts

@@ -1,57 +0,0 @@
-/***************************************************************************************************
- * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
- */
-import '@angular/localize/init';
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes recent versions of Safari, Chrome (including
- * Opera), Edge on the desktop, and iOS and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- * because those flags need to be set before `zone.js` being loaded, and webpack
- * will put import in the top of bundle, so user need to create a separate file
- * in this directory (for example: zone-flags.ts), and put the following flags
- * into that file, and then add the following code before importing zone.js.
- * import './zone-flags';
- *
- * The flags allowed in zone-flags.ts are listed here.
- *
- * The following flags will work for all browsers.
- *
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- *
- *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- *  with the following flag, it will bypass `zone.js` patch for IE/Edge
- *
- *  (window as any).__Zone_enable_cross_context_check = true;
- *
- */
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js';  // Included with Angular CLI.
-
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */

examples-standalone/grid-csp-enabled/src/test.ts

@@ -1,26 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    <T>(id: string): T;
-    keys(): string[];
-  };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-);
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

examples-standalone/grid-csp-enabled/tsconfig.app.json

@@ -3,11 +3,12 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": [
+      "@angular/localize"
+    ]
   },
   "files": [
-    "src/main.ts",
+    "src/main.ts"
-    "src/polyfills.ts"
   ],
   "include": [
     "src/**/*.d.ts"

examples-standalone/grid-csp-enabled/tsconfig.json

@@ -2,7 +2,6 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
@@ -10,16 +9,18 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2017",
+    "target": "ES2022",
-    "module": "es2020",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
     "lib": [
-      "es2020",
+      "ES2022",
       "dom"
     ]
   },

examples-standalone/grid-csp-enabled/tsconfig.spec.json

@@ -4,13 +4,10 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
+      "jasmine",
+      "@angular/localize"
     ]
   },
-  "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
-  ],
   "include": [
     "src/**/*.spec.ts",
     "src/**/*.d.ts"