Update example to v21

CODEOWNERS

@@ -0,0 +1 @@
+*       @DevExpressExampleBot

CustomParameterEditor.Client/CustomParameterEditor.client.esproj

@@ -0,0 +1,9 @@
+<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/1.0.1738743">
+  <PropertyGroup>
+    <StartupCommand>npm start</StartupCommand>
+    <!-- Allows the build (or compile) script located on package.json to run on Build -->
+    <ShouldRunBuildScript>false</ShouldRunBuildScript>
+    <!-- Folder where production build objects will be placed -->
+    <BuildOutputFolder>$(MSBuildProjectDirectory)\dist\CustomParameterEditor.client\browser\</BuildOutputFolder>
+  </PropertyGroup>
+</Project>

CustomParameterEditor.Client/README.md

@@ -0,0 +1,59 @@
+# CustomParameterEditor.client
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.3.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

CustomParameterEditor.Client/angular.json

@@ -0,0 +1,82 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm"
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "CustomParameterEditor.client": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "src/styles.css"
+            ],
+            "server": "src/main.server.ts",
+            "outputMode": "server",
+            "ssr": {
+              "entry": "src/server.ts"
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "1000kB",
+                  "maximumError": "30MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "100kB",
+                  "maximumError": "1MB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "CustomParameterEditor.client:build:production"
+            },
+            "development": {
+              "buildTarget": "CustomParameterEditor.client:build:development"
+            }
+          },
+          "defaultConfiguration": "development",
+          "options": {
+            "proxyConfig": "src/proxy.conf.js"
+          }
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        }
+      }
+    }
+  }
+}

CustomParameterEditor.Client/aspnetcore-https.js

@@ -0,0 +1,37 @@
+// This script sets up HTTPS for the application using the ASP.NET Core HTTPS certificate
+const fs = require('fs');
+const spawn = require('child_process').spawn;
+const path = require('path');
+
+const baseFolder =
+  process.env.APPDATA !== undefined && process.env.APPDATA !== ''
+    ? `${process.env.APPDATA}/ASP.NET/https`
+    : `${process.env.HOME}/.aspnet/https`;
+
+const certificateArg = process.argv.map(arg => arg.match(/--name=(?<value>.+)/i)).filter(Boolean)[0];
+const certificateName = certificateArg ? certificateArg.groups.value : process.env.npm_package_name;
+
+if (!certificateName) {
+  console.error('Invalid certificate name. Run this script in the context of an npm/yarn script or pass --name=<<app>> explicitly.')
+  process.exit(-1);
+}
+
+const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
+const keyFilePath = path.join(baseFolder, `${certificateName}.key`);
+
+if(!fs.existsSync(baseFolder)) {
+  fs.mkdirSync(baseFolder, { recursive: true });
+}
+
+if (!fs.existsSync(certFilePath) || !fs.existsSync(keyFilePath)) {
+  spawn('dotnet', [
+    'dev-certs',
+    'https',
+    '--export-path',
+    certFilePath,
+    '--format',
+    'Pem',
+    '--no-password',
+  ], { stdio: 'inherit', })
+  .on('exit', (code) => process.exit(code));
+}

CustomParameterEditor.Client/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "CustomParameterEditor",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "run-script-os",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "prestart": "node aspnetcore-https",
+    "start:windows": "ng serve --ssl --ssl-cert \"%APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem\" --ssl-key \"%APPDATA%\\ASP.NET\\https\\%npm_package_name%.key\"",
+    "start:default": "ng serve --ssl --ssl-cert \"$HOME/.aspnet/https/${npm_package_name}.pem\" --ssl-key \"$HOME/.aspnet/https/${npm_package_name}.key\"",
+    "test": "ng test"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
+  "private": true,
+  "packageManager": "npm@11.6.2",
+  "dependencies": {
+    "@angular/common": "^21.1.0",
+    "@angular/compiler": "^21.1.0",
+    "@angular/core": "^21.1.0",
+    "@angular/forms": "^21.1.0",
+    "@angular/platform-browser": "^21.1.0",
+    "@angular/platform-server": "^21.1.0",
+    "@angular/router": "^21.1.0",
+    "@angular/ssr": "^21.1.3",
+    "express": "^5.1.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "run-script-os": "^1.1.0",
+    "bootstrap": "^5.3.3",
+    "devexpress-reporting-angular": "25.2-stable",
+    "devextreme": "25.2-stable",
+    "devextreme-angular": "25.2-stable"
+  },
+  "devDependencies": {
+    "@angular/build": "^21.1.3",
+    "@angular/cli": "^21.1.3",
+    "@angular/compiler-cli": "^21.1.0",
+    "@types/express": "^5.0.1",
+    "@types/node": "^20.17.19",
+    "jsdom": "^27.1.0",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
+  }
+}

CustomParameterEditor.Client/src/app/app.config.server.ts

@@ -0,0 +1,12 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering, withRoutes } from '@angular/ssr';
+import { appConfig } from './app.config';
+import { serverRoutes } from './app.routes.server';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering(withRoutes(serverRoutes))
+  ]
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

CustomParameterEditor.Client/src/app/app.config.ts

@@ -0,0 +1,20 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { routes } from './app.routes';
+import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+import { provideHttpClient, withFetch } from '@angular/common/http';
+import { TemplateEngine } from 'devexpress-reporting-angular/dx-report-viewer';
+
+function getBaseUrl() {
+  return document.getElementsByTagName('base')[0].href;
+}
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes), provideClientHydration(withEventReplay()),
+    provideHttpClient(withFetch()),
+    TemplateEngine,
+    { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
+  ]
+};

CustomParameterEditor.Client/src/app/app.html

@@ -0,0 +1,2 @@
+<app-nav-menu></app-nav-menu>
+<router-outlet></router-outlet>

CustomParameterEditor.Client/src/app/app.routes.server.ts

@@ -0,0 +1,7 @@
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+  { path: 'DocumentViewer', renderMode: RenderMode.Client },
+  { path: '', renderMode: RenderMode.Prerender },
+  { path: '**', renderMode: RenderMode.Client }
+];

CustomParameterEditor.Client/src/app/app.routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+import { Home } from './home/home';
+
+export const routes: Routes = [
+  { path: '', component: Home, pathMatch: 'full' },
+  { path: 'DocumentViewer', loadComponent: () => import('./reportviewer/report-viewer').then(m => m.ReportViewer) },
+  { path: 'CustomInput', loadComponent: () => import('./custominputcomponent/custom-input-component').then(m => m.CustomInput) }
+];

CustomParameterEditor.Client/src/app/app.spec.ts

@@ -0,0 +1,19 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { App } from './app';
+import { routes } from './app.routes';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+      providers: [provideRouter(routes)]
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+});

CustomParameterEditor.Client/src/app/app.ts

@@ -0,0 +1,15 @@
+import { Component, signal } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { NavMenu } from './navmenu/nav-menu';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+	imports: [RouterOutlet, NavMenu],
+
+  templateUrl: './app.html',
+  styleUrl: './app.css'
+})
+export class App {
+	protected readonly title = signal('CustomParameterEditor');
+}

CustomParameterEditor.Client/src/app/custominputcomponent/custom-input-component.html

@@ -0,0 +1,4 @@
+<dx-text-box [value]="data.value" [disabled]="data.disabled" (onValueChanged)="data.onValueChanged($event)">
+    <dx-validator [validationRules]="data.validationRules">
+    </dx-validator>
+</dx-text-box>

CustomParameterEditor.Client/src/app/custominputcomponent/custom-input-component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { IEditorViewModel } from '@devexpress/analytics-core/analytics-widgets-native';
+import { DxTextBoxModule, DxValidatorModule } from 'devextreme-angular';
+
+@Component({
+    selector: 'custom-input-component',
+    templateUrl: 'custom-input-component.html',
+    standalone: true,
+    imports: [DxTextBoxModule, DxValidatorModule]
+})
+export class CustomInput {
+    @Input('data') data!: IEditorViewModel;
+}

CustomParameterEditor.Client/src/app/home/home.html

@@ -0,0 +1,23 @@
+<div class="container-fluid">
+    <h1>ASP.NET Core Reporting Application</h1>
+    <p>Welcome to your new single-page application, built with:</p>
+    <ul>
+        <li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a
+                href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code
+        </li>
+        <li><a href='https://angular.io/'>Angular</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for
+            client-side code</li>
+        <li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
+    </ul>
+    <p>Application uses</p>
+    <ul>
+        <li>Reporting Client-Side Widgets</li>
+        <li>ASP.NET Core MVC Reporting Controllers</li>
+    </ul>
+    <p>Overview</p>
+    <ul>
+        @for (link of links; track link.url) {
+            <li><a [href]="link.url">{{ link.text }}</a></li>
+        }
+    </ul>
+</div>