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

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

@@ -1,8 +1,8 @@
-/* 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. */
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "outDir": "./dist/out-tsc",
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
@@ -10,30 +10,24 @@
     "noFallthroughCasesInSwitch": true,
     "skipLibCheck": true,
     "isolatedModules": true,
-    "esModuleInterop": true,
-    "sourceMap": true,
-    "declaration": false,
     "experimentalDecorators": true,
-    "moduleResolution": "Bundler",
     "importHelpers": true,
     "target": "ES2022",
-    "module": "preserve",
-    "useDefineForClassFields": false,
-    "lib": [
-      "ES2022",
-      "dom"
-    ]
+    "module": "preserve"
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true,
-    // TODO: Remove this option when fixing https://infragistics.visualstudio.com/Indigo_Platform/_workitems/edit/30602
-    "extendedDiagnostics": {
-      "checks": {
-        "optionalChainNotNullable": "suppress"
-      }
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
     }
-  }
+  ]
 }

package/igx-ts/projects/_base/files/tsconfig.spec.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/spec",
     "types": [
-      "jasmine"
+      "vitest/globals"
     ]
   },
   "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
   ]
 }

package/igx-ts/projects/_base/files/vitest-base.config.ts

@@ -0,0 +1,11 @@
+// Learn more about Vitest configuration options at https://vitest.dev/config/
+
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  resolve: {
+    alias: [
+      { find: /^fflate$/, replacement: 'fflate/browser' }
+    ]
+  }
+});

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

@@ -1,18 +1,16 @@
-import { ApplicationConfig, EnvironmentProviders, Provider, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig, 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 { routes } from './app.routes';
 
-// 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()
-];
-
-export const appConfig: ApplicationConfig = { providers };
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    importProvidersFrom(BrowserModule, HammerModule),
+    provideAnimations()
+  ]
+};

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

@@ -1,11 +1,11 @@
 import { Routes } from '@angular/router';
-import { HomeComponent } from './home/home.component';
-import { PageNotFoundComponent } from './error-routing/not-found/not-found.component';
-import { UncaughtErrorComponent } from './error-routing/error/uncaught-error.component';
+import { Home } from './home/home';
+import { NotFound } from './error-routing/not-found/not-found';
+import { UncaughtError } from './error-routing/error/uncaught-error';
 
 export const routes: Routes = [
 	{ path: '', redirectTo: '/home', pathMatch: 'full'},
-	{ path: 'home', component: HomeComponent, data: { text: 'Home' }},
-	{ path: 'error', component: UncaughtErrorComponent },
-	{ path: '**', component: PageNotFoundComponent } // must always be last
+	{ path: 'home', component: Home, data: { text: 'Home' }},
+	{ path: 'error', component: UncaughtError },
+	{ path: '**', component: NotFound } // must always be last
 ];

package/igx-ts/projects/_base_with_home/files/src/app/home/{home.component.html → home.html}

@@ -1,5 +1,5 @@
 <!--The content below is only a placeholder and can be replaced.-->
-<h1>{{title}}</h1>
+<h1>{{title()}}</h1>
 <img src="assets/responsive.gif" alt="Ignite UI CLI">
 
 <div id="linksContainer">

package/igx-ts/projects/_base_with_home/files/src/app/home/home.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
+import { Home } from './home';
+
+describe('Home', () => {
+  let component: Home;
+  let fixture: ComponentFixture<Home>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ Home, RouterModule.forRoot([]) ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Home);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts/projects/_base_with_home/files/src/app/home/home.ts

@@ -0,0 +1,10 @@
+import { Component, signal } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.html',
+  styleUrl: './home.scss'
+})
+export class Home  {
+  protected readonly title = signal('Welcome to Ignite UI for Angular!');
+}

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

@@ -1,17 +1,15 @@
 <!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">
-  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" 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">
+    <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
+  </head>
+  <body class="ig-typography ig-scrollbar">
+    <app-root></app-root>
+  </body>
 </html>

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

@@ -1,17 +1,15 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title><%=ApplicationTitle%></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">
-  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
-</head>
-<body class="ig-typography ig-scrollbar">
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8">
+    <title><%=ApplicationTitle%></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">
+    <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
+  </head>
+  <body class="ig-typography ig-scrollbar">
+    <app-root></app-root>
+  </body>
 </html>

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

@@ -1,18 +1,16 @@
-import { ApplicationConfig, EnvironmentProviders, Provider, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig, 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 { routes } from './app.routes';
 
-// 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()
-];
-
-export const appConfig: ApplicationConfig = { providers };
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    importProvidersFrom(BrowserModule, HammerModule),
+    provideAnimations()
+  ]
+};

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

@@ -1,7 +1,7 @@
 import { Routes } from '@angular/router';
-import { HomeComponent } from './home/home.component';
+import { Home } from './home/home';
 
 export const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
-  { path: 'home', component: HomeComponent, data: { text: 'Home' } }
+  { path: 'home', component: Home, data: { text: 'Home' } }
 ];

package/igx-ts/projects/empty/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/empty/files/src/app/home/home.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.html',
+  styleUrl: './home.scss'
+})
+export class Home {
+}

package/igx-ts/projects/side-nav/files/src/app/app.config.ts

@@ -1,31 +1,29 @@
-import { ApplicationConfig, EnvironmentProviders, Provider, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { ApplicationConfig, importProvidersFrom, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
 import { BrowserModule, HammerModule } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideRouter } from '@angular/router';
 import {
   IgxNavigationDrawerModule,
   IgxNavbarModule,
   IgxLayoutModule,
-  IgxRippleModule,
+  IgxRippleModule
 } from '<%=igxPackage%>';
 
 import { routes } from './app.routes';
 
-// 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,
-    IgxLayoutModule,
-    IgxNavbarModule,
-    IgxNavigationDrawerModule,
-    IgxRippleModule
-  ),
-  provideAnimations()
-];
-
-export const appConfig: ApplicationConfig = { providers };
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    importProvidersFrom(
+      BrowserModule,
+      HammerModule,
+      IgxLayoutModule,
+      IgxNavbarModule,
+      IgxNavigationDrawerModule,
+      IgxRippleModule
+    ),
+    provideAnimations()
+  ]
+};

package/igx-ts/projects/side-nav/files/src/app/app.spec.ts

@@ -0,0 +1,20 @@
+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([]),
+        App
+      ]
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+});

package/igx-ts/projects/side-nav/files/src/app/{app.component.ts → app.ts}

@@ -15,9 +15,8 @@ import { routes } from './app.routes';
 
 @Component({
   selector: 'app-root',
-  standalone: true,
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  templateUrl: './app.html',
+  styleUrl: './app.scss',
   encapsulation: ViewEncapsulation.None,
   imports: [
     IgxLayoutDirective,
@@ -33,7 +32,7 @@ import { routes } from './app.routes';
     RouterOutlet
   ]
 })
-export class AppComponent implements OnInit {
+export class App implements OnInit {
   public topNavLinks: {
     path: string,
     name: string

package/igx-ts/projects/side-nav-auth/files/package.json

@@ -6,46 +6,43 @@
     "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",
     "angular-auth-oidc-client": "~15.0.4",
     "hammerjs": "~2.0.8",
     "igniteui-angular": "~21.1.0",
     "minireset.css": "~0.0.7",
-    "rxjs": "~7.8.0",
+    "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",
-    "@angular/language-service": "~21.1.5",
+    "@angular/build": "~21.2.1",
+    "@angular/cli": "~21.2.1",
+    "@angular/compiler-cli": "~21.2.0",
+    "@angular/language-service": "~21.2.0",
+    "@eslint/js": "^10.0.1",
     "@types/facebook-js-sdk": "~3.3.6",
     "@types/hammerjs": "~2.0.46",
-    "@types/jasmine": "~5.1.4",
-    "angular-eslint": "~21.2.0",
-    "eslint": "~9.39.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/side-nav-auth/files/src/app/{app.module.ts → app-module.ts}

@@ -5,15 +5,15 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
   IgxLayoutModule, IgxNavbarModule, IgxNavigationDrawerModule, IgxRippleModule
 } from 'igniteui-angular';
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { AuthenticationModule, ExternalAuthService } from './authentication';
-import { HomeComponent } from './home/home.component';
+import { AppRoutingModule } from './app-routing-module';
+import { App } from './app';
+import { AuthenticationModule, ExternalAuth } from './authentication';
+import { Home } from './home/home';
 
 @NgModule({
   declarations: [
-    AppComponent,
-    HomeComponent
+    App,
+    Home
   ],
   imports: [
     FormsModule,
@@ -29,11 +29,11 @@ import { HomeComponent } from './home/home.component';
     IgxRippleModule
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [App]
 })
 export class AppModule {
 
-  constructor(private externalAuthService: ExternalAuthService) {
+  constructor(private externalAuthService: ExternalAuth) {
     /**
      * To register a social login, un-comment one or more of the following and add your service provider Client ID.
      * See https://github.com/IgniteUI/igniteui-cli/wiki/Angular-Authentication-Project-Template#add-a-third-party-social-provider

package/igx-ts/projects/side-nav-auth/files/src/app/app.config.ts

@@ -1,34 +1,32 @@
-import { ApplicationConfig, EnvironmentProviders, Provider, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { ApplicationConfig, importProvidersFrom, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
 import { BrowserModule, HammerModule } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideRouter } from '@angular/router';
 import {
-  IgxNavigationDrawerModule,
-  IgxNavbarModule,
   IgxLayoutModule,
+  IgxNavbarModule,
+  IgxNavigationDrawerModule,
   IgxRippleModule,
 } from '<%=igxPackage%>';
 
-import { AuthenticationModule, ExternalAuthService } from './authentication';
+import { AuthenticationModule, ExternalAuth } from './authentication';
 import { routes } from './app.routes';
 
-// 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,
-    IgxLayoutModule,
-    IgxNavbarModule,
-    IgxNavigationDrawerModule,
-    IgxRippleModule,
-    AuthenticationModule
-  ),
-  provideAnimations(),
-  ExternalAuthService
-];
-
-export const appConfig: ApplicationConfig = { providers };
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    importProvidersFrom(
+      BrowserModule,
+      HammerModule,
+      IgxLayoutModule,
+      IgxNavbarModule,
+      IgxNavigationDrawerModule,
+      IgxRippleModule,
+      AuthenticationModule
+    ),
+    provideAnimations(),
+    ExternalAuth
+  ]
+};

package/igx-ts/projects/side-nav-auth/files/src/app/{app.component.spec.ts → app.spec.ts}

@@ -1,13 +1,13 @@
-import { TestBed, waitForAsync } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
 import { IgxLayoutModule, IgxNavbarModule, IgxNavigationDrawerModule, IgxRippleModule } from 'igniteui-angular';
-import { AppComponent } from './app.component';
+import { App } from './app';
 import { AuthenticationModule } from './authentication';
 
-describe('AppComponent', () => {
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [
         NoopAnimationsModule,
         RouterModule.forRoot([]),
@@ -16,14 +16,14 @@ describe('AppComponent', () => {
         IgxNavbarModule,
         IgxLayoutModule,
         IgxRippleModule,
-        AppComponent
+        App
       ]
     }).compileComponents();
-  }));
+  });
 
-  it('should create the app', waitForAsync(() => {
-    const fixture = TestBed.createComponent(AppComponent);
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
-  }));
+  });
 });