@igniteui/angular-templates 21.1.1492 → 21.1.14100-alpha.0

package/igx-ts/projects/_base/files/__dot__claude/CLAUDE.md

@@ -0,0 +1,3 @@
+Strictly follow the rules in ../AGENTS.md
+
+The canonical AI agent instructions are in [AGENTS.md](../AGENTS.md) in the root directory.

package/igx-ts/projects/_base/files/__dot__editorconfig

@@ -10,6 +10,7 @@ trim_trailing_whitespace = true
 
 [*.ts]
 quote_type = single
+ij_typescript_use_double_quotes = false
 
 [*.md]
 max_line_length = off

package/igx-ts/projects/_base/files/__dot__github/copilot-instructions.md

@@ -0,0 +1,3 @@
+Strictly follow the rules in ../AGENTS.md
+
+The canonical AI agent instructions are in [AGENTS.md](../AGENTS.md) in the root directory.

package/igx-ts/projects/_base/files/__dot__github/workflows/node.js.yml

@@ -32,4 +32,8 @@ jobs:
     - run: npm i # replace with 'npm ci' after committing lock file from first install
     - run: npm run lint
     - run: npm run build
-    - run: npm run test -- --watch=false --browsers ChromeHeadless
+    - name: Install Playwright browsers
+      run: npx playwright install chromium-headless-shell
+    - run: npm run test -- --watch=false
+      env:
+        CI: 'true'

package/igx-ts/projects/_base/files/__dot__gitignore

@@ -1,4 +1,4 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
 
 # Compiled output
 /dist
@@ -36,6 +36,7 @@ yarn-error.log
 /libpeerconnection.log
 testem.log
 /typings
+__screenshots__/
 
 # System files
 .DS_Store

package/igx-ts/projects/_base/files/__dot__vscode/mcp.json

@@ -0,0 +1,16 @@
+{
+  "servers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    },
+    "igniteui-cli": {
+      "command": "npx",
+      "args": ["-y", "igniteui-cli-mcp"]
+    },
+    "igniteui-theming": {
+      "command": "npx",
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
+    }
+  }
+}

package/igx-ts/projects/_base/files/angular.json

@@ -1,127 +1,102 @@
 {
-	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-	"version": 1,
-	"newProjectRoot": "projects",
-	"projects": {
-		"<%=dashName%>": {
-			"projectType": "application",
-			"schematics": {
-				"@schematics/angular:component": {
-					"style": "scss"
-				}
-			},
-			"root": "",
-			"sourceRoot": "src",
-			"prefix": "app",
-			"architect": {
-				"build": {
-					"builder": "@angular/build:application",
-					"options": {
-						"outputPath": "dist/<%=dashName%>",
-						"index": "src/index.html",
-						"browser": "src/main.ts",
-						"polyfills": [
-							"zone.js"
-						],
-						"tsConfig": "tsconfig.app.json",
-						"inlineStyleLanguage": "scss",
-						"assets": [
-							"src/favicon.ico",
-							"src/assets"
-						],
-						"styles": [
-							"src/styles.scss"<%=DefaultTheme%>
-						],
-						"scripts": [
-							"./node_modules/hammerjs/hammer.min.js"
-						],
-						"stylePreprocessorOptions": {
-							"includePaths": [
-								"node_modules"
-							]
-						}
-					},
-					"configurations": {
-						"production": {
-							"budgets": [
-								{
-									"type": "initial",
-									"maximumWarning": "5mb",
-									"maximumError": "40mb"
-								},
-								{
-									"type": "anyComponentStyle",
-                  "maximumWarning": "8kb",
-                  "maximumError": "2mb"
-								}
-							],
-							"outputHashing": "all"
-						},
-						"development": {
-							"optimization": false,
-							"extractLicenses": false,
-							"sourceMap": true
-						}
-					},
-					"defaultConfiguration": "production"
-				},
-				"serve": {
-					"builder": "@angular/build:dev-server",
-					"configurations": {
-						"production": {
-							"buildTarget": "<%=dashName%>:build:production"
-						},
-						"development": {
-							"buildTarget": "<%=dashName%>:build:development"
-						}
-					},
-					"defaultConfiguration": "development"
-				},
-				"extract-i18n": {
-					"builder": "@angular-devkit/build-angular:extract-i18n",
-					"options": {
-						"buildTarget": "<%=dashName%>:build"
-					}
-				},
-				"test": {
-					"builder": "@angular-devkit/build-angular:karma",
-					"options": {
-						"polyfills": [
-							"zone.js",
-							"zone.js/testing"
-						],
-						"tsConfig": "tsconfig.spec.json",
-						"inlineStyleLanguage": "scss",
-						"assets": [
-							"src/favicon.ico",
-							"src/assets"
-						],
-						"styles": [
-							"src/styles.scss"
-						],
-						"scripts": [],
-            "stylePreprocessorOptions": {
-							"includePaths": [
-								"node_modules"
-							]
-						}
-					}
-				},
-				"lint": {
-				  "builder": "@angular-eslint/builder:lint",
-				  "options": {
-					  "lintFilePatterns": [
-					    "src/**/*.ts",
-					    "src/**/*.html"
-					  ]
-				  }
-				}
-			}
-		}
-	},
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
   "cli": {
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ]
+    "packageManager": "npm",
+    "schematicCollections": ["angular-eslint"]
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "<%=dashName%>": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": "dist/<%=dashName%>",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": [
+              "src/styles.scss"<%=DefaultTheme%>
+            ],
+            "scripts": ["./node_modules/hammerjs/hammer.min.js"],
+            "stylePreprocessorOptions": {
+              "includePaths": ["node_modules"]
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "5mb",
+                  "maximumError": "40mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "8kB",
+                  "maximumError": "2mb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "<%=dashName%>:build:production"
+            },
+            "development": {
+              "buildTarget": "<%=dashName%>:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular/build:extract-i18n",
+          "options": {
+            "buildTarget": "<%=dashName%>:build"
+          }
+        },
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "runnerConfig": true
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+          }
+        }
+      }
+    }
   }
 }

package/igx-ts/projects/_base/files/eslint.config.js

@@ -1,12 +1,12 @@
 // @ts-check
-const eslint = require("@eslint/js");
-const { defineConfig } = require("eslint/config");
-const tseslint = require("typescript-eslint");
-const angular = require("angular-eslint");
+const eslint = require('@eslint/js');
+const { defineConfig } = require('eslint/config');
+const tseslint = require('typescript-eslint');
+const angular = require('angular-eslint');
 
 module.exports = defineConfig([
   {
-    files: ["**/*.ts"],
+    files: ['**/*.ts'],
     extends: [
       eslint.configs.recommended,
       tseslint.configs.recommended,
@@ -15,35 +15,33 @@ module.exports = defineConfig([
     ],
     processor: angular.processInlineTemplates,
     rules: {
-      "@angular-eslint/directive-selector": [
-        "error",
+      '@angular-eslint/directive-selector': [
+        'error',
         {
-          type: "attribute",
-          prefix: "app",
-          style: "camelCase",
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
         },
       ],
-      "@angular-eslint/component-selector": [
-        "error",
+      '@angular-eslint/component-selector': [
+        'error',
         {
-          type: "element",
-          prefix: "app",
-          style: "kebab-case",
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
         },
       ],
       // Relax rules
-      "@typescript-eslint/no-explicit-any": "off",
-      "@angular-eslint/prefer-inject": "off",
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@angular-eslint/prefer-inject': 'off',
     },
   },
   {
-    files: ["**/*.html"],
-    extends: [
-      angular.configs.templateRecommended
-    ],
+    files: ['**/*.html'],
+    extends: [angular.configs.templateRecommended],
     rules: {
       // Relax rules
-      "@angular-eslint/template/eqeqeq": "off"
+      '@angular-eslint/template/eqeqeq': 'off'
     },
   }
 ]);

package/igx-ts/projects/_base/files/package.json

@@ -6,42 +6,39 @@
     "start": "ng serve -o",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng test",
+    "test": "ng test --browsers=chromium",
     "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~21.1.5",
-    "@angular/common": "~21.1.5",
-    "@angular/compiler": "~21.1.5",
-    "@angular/core": "~21.1.5",
-    "@angular/forms": "~21.1.5",
-    "@angular/platform-browser": "~21.1.5",
-    "@angular/platform-browser-dynamic": "~21.1.5",
-    "@angular/router": "~21.1.5",
+    "@angular/animations": "~21.2.0",
+    "@angular/common": "~21.2.0",
+    "@angular/compiler": "~21.2.0",
+    "@angular/core": "~21.2.0",
+    "@angular/forms": "~21.2.0",
+    "@angular/platform-browser": "~21.2.0",
+    "@angular/platform-browser-dynamic": "~21.2.0",
+    "@angular/router": "~21.2.0",
     "hammerjs": "~2.0.8",
     "igniteui-angular": "~21.1.0",
     "minireset.css": "~0.0.7",
     "rxjs": "~7.8.1",
     "tslib": "~2.8.1",
-    "zone.js": "~0.15.0"
+    "zone.js": "~0.16.0"
   },
   "devDependencies": {
-    "@angular/build": "~21.1.5",
-    "@angular-devkit/build-angular": "~21.1.5",
-    "@angular/cli": "~21.1.5",
-    "@angular/compiler-cli": "~21.1.5",
-    "@types/jasmine": "~5.1.4",
-    "angular-eslint": "~21.2.0",
-    "eslint": "~9.39.1",
+    "@angular/build": "~21.2.1",
+    "@angular/cli": "~21.2.1",
+    "@angular/compiler-cli": "~21.2.0",
+    "@eslint/js": "^10.0.1",
+    "@vitest/browser-playwright": "^4.1.0",
+    "angular-eslint": "~21.3.0",
+    "eslint": "^10.0.2",
     "igniteui-cli": "~<%=cliVersion%>",
-    "jasmine-core": "~5.12.1",
-    "karma": "~6.4.4",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.1",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "~8.47.0"
+    "playwright": "^1.58.2",
+    "prettier": "^3.8.1",
+    "typescript": "~5.9.2",
+    "typescript-eslint": "8.56.1",
+    "vitest": "^4.1.0"
   }
 }

package/igx-ts/projects/_base/files/src/app/app.config.ts

@@ -1,27 +1,19 @@
-import { ApplicationConfig, EnvironmentProviders, ErrorHandler, Provider, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig, ErrorHandler, importProvidersFrom, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
 import { BrowserModule, HammerModule } from '@angular/platform-browser';
-import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideAnimations } from "@angular/platform-browser/animations";
 import { provideRouter } from '@angular/router';
 
 import { environment } from '../environments/environment';
 import { routes } from './app.routes';
-import { GlobalErrorHandlerService } from './error-routing/error/global-error-handler.service';
+import { GlobalErrorHandler } from './error-routing/error/global-error-handler';
 
-// provide the HAMMER_GESTURE_CONFIG token
-// to override the default settings of the HammerModule
-// { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }
-const providers: (EnvironmentProviders | Provider)[] = [
-  provideZoneChangeDetection({ eventCoalescing: true }),
-  provideRouter(routes),
-  importProvidersFrom(BrowserModule, HammerModule),
-  provideAnimations()
-];
-
-if (environment.production) {
-  providers.push({
-    provide: ErrorHandler,
-    useClass: GlobalErrorHandlerService
-  });
-}
-
-export const appConfig: ApplicationConfig = { providers };
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    importProvidersFrom(BrowserModule, HammerModule),
+    provideAnimations(),
+    ...(environment.production ? [{ provide: ErrorHandler, useClass: GlobalErrorHandler }] : [])
+  ]
+};

package/igx-ts/projects/_base/files/src/app/app.routes.ts

@@ -1,8 +1,8 @@
 import { Routes } from '@angular/router';
-import { PageNotFoundComponent } from './error-routing/not-found/not-found.component';
-import { UncaughtErrorComponent } from './error-routing/error/uncaught-error.component';
+import { NotFound } from './error-routing/not-found/not-found';
+import { UncaughtError } from './error-routing/error/uncaught-error';
 
 export const routes: Routes = [
-  { path: 'error', component: UncaughtErrorComponent },
-  { path: '**', component: PageNotFoundComponent } // must always be last
+  { path: 'error', component: UncaughtError },
+  { path: '**', component: NotFound } // must always be last
 ];

package/igx-ts/projects/_base/files/src/app/app.spec.ts

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

package/igx-ts/projects/_base/files/src/app/app.ts

@@ -0,0 +1,12 @@
+import { Component, signal } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet],
+  templateUrl: './app.html',
+  styleUrl: './app.scss'
+})
+export class App {
+  protected readonly title = signal('Home - IgniteUI for Angular');
+}

package/igx-ts/projects/_base/files/src/app/error-routing/error/{global-error-handler.service.ts → global-error-handler.ts}

@@ -1,12 +1,12 @@
-import { ErrorHandler, Injectable, Injector, NgZone } from '@angular/core';
+import { ErrorHandler, Injectable, Injector, NgZone, inject } from '@angular/core';
 import { Router } from '@angular/router';
 
 @Injectable()
-export class GlobalErrorHandlerService implements ErrorHandler {
+export class GlobalErrorHandler implements ErrorHandler {
+  private injector = inject(Injector);
+  private zone = inject(NgZone);
 
-  constructor(private injector: Injector, private zone: NgZone) { }
-
-  handleError(error: any) {
+  handleError(error: unknown) {
     // handle and/or log error, for example:
     console.error(error);
 
@@ -16,7 +16,7 @@ export class GlobalErrorHandlerService implements ErrorHandler {
       this.zone.run(() => {
         router
           .navigate(['error'])
-          .catch((err: any) => console.error(err));
+          .catch((err: unknown) => console.error(err));
       });
     }
   }

package/igx-ts/projects/_base/files/src/app/error-routing/error/uncaught-error.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: '<h2>Error 500: Internal Server Error</h2>'
+})
+export class UncaughtError  { }

package/igx-ts/projects/_base/files/src/app/error-routing/not-found/not-found.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: '<h2>Error 404: Page not found</h2>'
+})
+export class NotFound { }

package/igx-ts/projects/_base/files/src/environments/{environment.prod.ts → environment.development.ts}

@@ -1,3 +1,3 @@
 export const environment = {
-  production: true
+  production: false
 };

package/igx-ts/projects/_base/files/src/environments/environment.ts

@@ -1,3 +1,3 @@
 export const environment = {
-  production: false
+  production: true
 };

package/igx-ts/projects/_base/files/src/index.html

@@ -1,16 +1,14 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Ignite UI for Angular</title>
-  <base href="/">
-
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-</head>
-<body class="ig-typography ig-scrollbar">
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8">
+    <title>Ignite UI for Angular</title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  </head>
+  <body class="ig-typography ig-scrollbar">
+    <app-root></app-root>
+  </body>
 </html>

package/igx-ts/projects/_base/files/src/main.ts

@@ -1,13 +1,6 @@
-import { enableProdMode } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
-
+import { App } from './app/app';
 import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
 
-bootstrapApplication(AppComponent, appConfig)
+bootstrapApplication(App, appConfig)
   .catch((err) => console.error(err));

package/igx-ts/projects/_base/files/tsconfig.app.json

@@ -1,14 +1,15 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": [
-    "src/main.ts"
-  ],
   "include": [
-    "src/**/*.d.ts"
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
   ]
 }