@igniteui/angular-templates 21.1.1492 → 21.1.1500-rc.0

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.html

@@ -0,0 +1,9 @@
+<!--The content below is only a placeholder and can be replaced.-->
+<h1>{{title()}}</h1>
+<img src="assets/responsive.gif" alt="Ignite UI CLI">
+
+<div id="linksContainer">
+    <h3 class="links"><a target="_blank" rel="noopener" href="https://github.com/IgniteUI/ignite-ui-cli">Ignite UI CLI </a></h3>
+    <h3 class="links"><a target="_blank" rel="noopener" href="https://www.infragistics.com/products/ignite-ui-angular">Component Demos</a></h3>
+    <h3 class="links"><a target="_blank" rel="noopener" href="https://github.com/IgniteUI/igniteui-angular-ui-kits">Sketch UI Kit</a></h3>
+</div>

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.html

@@ -0,0 +1,16 @@
+<div class="outer-wrapper" igxLayout>
+  <igx-nav-drawer #nav id="project-menu" [isOpen]="true" [enableGestures]="true" width="280px">
+    <ng-template igxDrawer>
+      <span igxDrawerItem [isHeader]="true">Views</span>
+      @for (route of topNavLinks; track route) {
+        <span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" [routerLink]="route.path">{{route.name}}</span>
+      }
+    </ng-template>
+  </igx-nav-drawer>
+  <div igxFlex igxLayout igxLayoutDir="columns">
+    <igx-navbar title="<%=name%>" actionButtonIcon="menu" (action)="nav.toggle()"></igx-navbar>
+    <div class="content" igxFlex>
+      <router-outlet></router-outlet>
+     </div>
+  </div>
+</div>

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.ts

@@ -0,0 +1,64 @@
+import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { NavigationStart, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
+import {
+  IgxNavigationDrawerComponent,
+  IgxLayoutDirective,
+  IgxNavDrawerTemplateDirective,
+  IgxNavDrawerItemDirective,
+  IgxRippleDirective,
+  IgxFlexDirective,
+  IgxNavbarComponent,
+} from 'igniteui-angular';
+import { filter } from 'rxjs/operators';
+import { routes } from './app.routes';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.html',
+  styleUrl: './app.scss',
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    IgxLayoutDirective,
+    IgxNavigationDrawerComponent,
+    IgxNavDrawerTemplateDirective,
+    IgxNavDrawerItemDirective,
+    IgxRippleDirective,
+    RouterLinkActive,
+    RouterLink,
+    IgxFlexDirective,
+    IgxNavbarComponent,
+    RouterOutlet
+  ]
+})
+export class App implements OnInit {
+  public topNavLinks: {
+    path: string,
+    name: string
+  }[] = [];
+
+  @ViewChild(IgxNavigationDrawerComponent, { static: true })
+  public navdrawer!: IgxNavigationDrawerComponent;
+
+  constructor(private router: Router) {
+    for (const route of routes) {
+      if (route.path && route.data && route.path.indexOf('*') === -1) {
+        this.topNavLinks.push({
+          name: route.data['text'],
+          path: '/' + route.path
+        });
+      }
+    }
+  }
+
+  public ngOnInit(): void {
+    this.router.events.pipe(
+      filter((x): x is NavigationStart => x instanceof NavigationStart)
+    )
+      .subscribe((event: NavigationStart) => {
+        if (event.url !== '/' && !this.navdrawer.pin) {
+          // Close drawer when selecting a view on mobile (unpinned)
+          this.navdrawer.close();
+        }
+      });
+  }
+}

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-auth-oidc-client": "~15.0.4",
+    "@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": "~21.0.1",
     "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.config.ts

@@ -1,34 +1,35 @@
-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 { provideAuthentication } 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,
+    ),
+    provideAnimations(),
+    provideAuthentication({
+      // google: { clientId: 'YOUR_GOOGLE_CLIENT_ID' },
+      // microsoft: { clientId: 'YOUR_MICROSOFT_CLIENT_ID', tenantId: 'YOUR_TENANT_ID' },
+      // facebook: { clientId: 'YOUR_FACEBOOK_CLIENT_ID' },
+    })
+  ]
+};

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

@@ -0,0 +1,18 @@
+<div class="outer-wrapper" igxLayout>
+  <igx-nav-drawer #nav id="project-menu" [isOpen]="true" [enableGestures]="true" width="280px">
+    <ng-template igxDrawer>
+      <span igxDrawerItem [isHeader]="true">Views</span>
+      @for (route of topNavLinks; track route) {
+        <span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" [routerLink]="route.path">{{route.name}}</span>
+      }
+    </ng-template>
+  </igx-nav-drawer>
+  <div class="main" igxFlex igxLayout igxLayoutDir="columns">
+    <igx-navbar title="<%=name%>" actionButtonIcon="menu" (action)="nav.toggle()">
+      <app-login-bar></app-login-bar>
+  </igx-navbar>
+    <div class="content" igxFlex>
+      <router-outlet></router-outlet>
+    </div>
+  </div>
+</div>

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

@@ -1,3 +1,10 @@
 import { Routes } from '@angular/router';
+import { Home } from './home/home';
+import { AUTH_ROUTES } from './authentication';
+import { AUTH_BASE_PATH } from './authentication/services/external-auth-configs';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: 'home', component: Home, data: { text: 'Home' } },
+  { path: AUTH_BASE_PATH, children: AUTH_ROUTES }
+];

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

@@ -0,0 +1,31 @@
+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 { App } from './app';
+import { provideAuthentication } from './authentication/provide-authentication';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NoopAnimationsModule,
+        RouterModule.forRoot([]),
+        IgxNavigationDrawerModule,
+        IgxNavbarModule,
+        IgxLayoutModule,
+        IgxRippleModule,
+        App
+      ],
+      providers: [
+        ...provideAuthentication()
+      ]
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+});