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

package/igx-ts-legacy/input-group/default/files/src/app/__path__/{__filePrefix__.component.spec.ts → __filePrefix__.spec.ts}

@@ -1,4 +1,4 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
@@ -11,15 +11,15 @@ import {
   IgxSelectModule,
   IgxTimePickerModule
 } from '<%=igxPackage%>';
-import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
+import { <%=ClassName%> } from './<%=filePrefix%>';
 
-describe('<%=ClassName%>Component', () => {
-  let component: <%=ClassName%>Component;
-  let fixture: ComponentFixture<<%=ClassName%>Component>;
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [<%=ClassName%>],
       imports: [
         FormsModule,
 		ReactiveFormsModule,
@@ -35,10 +35,10 @@ describe('<%=ClassName%>Component', () => {
       ]
     })
       .compileComponents();
-  }));
+  });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    fixture = TestBed.createComponent(<%=ClassName%>);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

package/igx-ts-legacy/input-group/default/files/src/app/__path__/{__filePrefix__.component.ts → __filePrefix__.ts}

@@ -8,11 +8,11 @@ interface Genre {
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   standalone: false
 })
-export class <%=ClassName%>Component implements OnInit {
+export class <%=ClassName%> implements OnInit {
   public genres!: Genre[];
   public user!: FormGroup;
   public minTime = '06:15:30';

package/igx-ts-legacy/linear-gauge/default/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IgxLinearGaugeModule } from 'igniteui-angular-gauges';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [<%=ClassName%>],
+      imports: [IgxLinearGaugeModule]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    // disable animation
+    component.linearGauge.transitionDuration = 0;
+  });
+});

package/igx-ts-legacy/linear-gauge/default/files/src/app/__path__/{__filePrefix__.component.ts → __filePrefix__.ts}

@@ -7,12 +7,12 @@ import {
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   encapsulation: ViewEncapsulation.None,
   standalone: false
 })
-export class <%=ClassName%>Component implements AfterViewInit {
+export class <%=ClassName%> implements AfterViewInit {
   public needleShape = LinearGraphNeedleShape
 
   @ViewChild('linearGauge', { static: true })

package/igx-ts-legacy/list/default/files/src/app/__path__/{__filePrefix__.component.spec.ts → __filePrefix__.spec.ts}

@@ -1,22 +1,22 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { IgxAvatarModule, IgxFilterModule, IgxIconModule, IgxInputGroupModule, IgxListModule } from '<%=igxPackage%>';
-import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
+import { <%=ClassName%> } from './<%=filePrefix%>';
 
-describe('<%=ClassName%>Component', () => {
-  let component: <%=ClassName%>Component;
-  let fixture: ComponentFixture<<%=ClassName%>Component>;
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [<%=ClassName%>],
       imports: [FormsModule, IgxAvatarModule, IgxFilterModule, IgxIconModule, IgxInputGroupModule, IgxListModule]
     })
       .compileComponents();
-  }));
+  });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    fixture = TestBed.createComponent(<%=ClassName%>);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

package/igx-ts-legacy/list/default/files/src/app/__path__/{__filePrefix__.component.ts → __filePrefix__.ts}

@@ -10,11 +10,11 @@ interface Contact {
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   standalone: false
 })
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   public title = '<%=name%>';
   public searchContact = '';
   public contacts: Contact[] = [

package/igx-ts-legacy/map/default/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxGeographicMapModule } from 'igniteui-angular-maps';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [<%=ClassName%>],
+      imports: [IgxGeographicMapModule, NoopAnimationsModule]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts-legacy/map/default/files/src/app/__path__/{__filePrefix__.component.ts → __filePrefix__.ts}

@@ -3,11 +3,11 @@ import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   standalone: false
 })
-export class <%=ClassName%>Component implements AfterViewInit {
+export class <%=ClassName%> implements AfterViewInit {
 
   @ViewChild('map', {static: true})
   public map!: IgxGeographicMapComponent;

package/igx-ts-legacy/pivot-grid/default/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxPivotGridModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [<%=ClassName%>],
+      imports: [IgxPivotGridModule,
+        NoopAnimationsModule]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts-legacy/pivot-grid/default/files/src/app/__path__/{__filePrefix__.component.ts → __filePrefix__.ts}

@@ -4,11 +4,11 @@ import { IPivotConfiguration, IgxPivotNumericAggregate } from '<%=igxPackage%>';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   standalone: false
 })
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   public data = DATA;
   public pivotConfigHierarchy: IPivotConfiguration = {
       columns: [

package/igx-ts-legacy/projects/_base/files/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}

package/igx-ts-legacy/projects/_base/files/__dot__azure/azure-pipelines.yml

@@ -19,5 +19,9 @@ steps:
     continueOnError: true
   - script: npm run build
     displayName: 'Build the project'
-  - script: npm run test -- --watch=false --browsers ChromeHeadless
+  - script: npx playwright install chromium-headless-shell
+    displayName: 'Install Playwright browsers'
+  - script: npm run test -- --watch=false
     displayName: 'Run tests'
+    env:
+      CI: 'true'

package/igx-ts-legacy/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-legacy/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-legacy/projects/_base/files/__dot__gitignore

@@ -36,6 +36,7 @@ yarn-error.log
 /libpeerconnection.log
 testem.log
 /typings
+__screenshots__/
 
 # System files
 .DS_Store

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

@@ -1,6 +1,10 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
+  "cli": {
+    "packageManager": "npm",
+    "schematicCollections": ["angular-eslint"]
+  },
   "newProjectRoot": "projects",
   "projects": {
     "<%=dashName%>": {
@@ -13,6 +17,12 @@
         "@schematics/angular:application": {
           "strict": true,
           "standalone": false
+        },
+        "@schematics/angular:directive": {
+          "standalone": false
+        },
+        "@schematics/angular:pipe": {
+          "standalone": false
         }
       },
       "root": "",
@@ -25,19 +35,14 @@
             "outputPath": "dist/<%=dashName%>",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": ["src/polyfills.ts"],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "src/styles.scss"<%=DefaultTheme%>
             ],
-            "scripts": [
-              "./node_modules/hammerjs/hammer.min.js"
-            ],
+            "scripts": ["./node_modules/hammerjs/hammer.min.js"],
             "stylePreprocessorOptions": {
               "includePaths": ["node_modules"]
             }
@@ -56,19 +61,19 @@
                   "maximumError": "2mb"
                 }
               ],
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
               "outputHashing": "all"
             },
             "development": {
               "optimization": false,
               "extractLicenses": false,
               "sourceMap": true,
-              "namedChunks": true
+              "namedChunks": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": "production"
@@ -86,49 +91,24 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "<%=dashName%>:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
-            "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": [
-              "./node_modules/hammerjs/hammer.min.js"
-            ],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "stylePreprocessorOptions": {
-              "includePaths": ["node_modules"]
-            }
+            "runnerConfig": true
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "eslintConfig": "eslint.config.js",
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         }
       }
     }
-  },
-  "cli": {
-    "schematicCollections": ["@angular-eslint/schematics"]
   }
 }

package/igx-ts-legacy/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,36 +15,34 @@ 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",
-      "@angular-eslint/prefer-standalone": "off"
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@angular-eslint/prefer-inject': 'off',
+      '@angular-eslint/prefer-standalone': '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-legacy/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",
+    "playwright": "^1.58.2",
+    "prettier": "^3.8.1",
     "typescript": "~5.9.3",
-    "typescript-eslint": "~8.47.0"
+    "typescript-eslint": "8.56.1",
+    "vitest": "^4.1.0"
   }
 }

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

@@ -0,0 +1,24 @@
+import { NgModule, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
+import { BrowserModule, HammerModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { AppRoutingModule } from './app-routing-module';
+import { App } from './app';
+
+@NgModule({
+  declarations: [
+    App
+  ],
+  imports: [
+    BrowserModule,
+    HammerModule,
+    AppRoutingModule,
+    BrowserAnimationsModule
+  ],
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true })
+  ],
+  bootstrap: [App]
+})
+export class AppModule {
+}

package/igx-ts-legacy/projects/_base/files/src/app/app-routing-module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { NotFound } from './error-routing/not-found/not-found';
+import { UncaughtError } from './error-routing/error/uncaught-error';
+import { ErrorRoutingModule } from './error-routing/error-routing-module';
+
+export const routes: Routes = [
+  { path: 'error', component: UncaughtError },
+  { path: '**', component: NotFound } // must always be last
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes), ErrorRoutingModule],
+  exports: [RouterModule, ErrorRoutingModule]
+})
+export class AppRoutingModule { }

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

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

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

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