Updating master to Angular v21

package.json

@@ -59,17 +59,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.3.6",
-    "@angular/common": "^20.3.6",
-    "@angular/compiler": "^20.3.6",
-    "@angular/core": "^20.3.6",
-    "@angular/elements": "^20.3.6",
-    "@angular/forms": "^20.3.6",
-    "@angular/platform-browser": "^20.3.6",
-    "@angular/platform-browser-dynamic": "^20.3.6",
-    "@angular/platform-server": "^20.3.6",
-    "@angular/router": "^20.3.6",
-    "@angular/ssr": "^20.3.6",
+    "@angular/animations": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/elements": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/platform-browser-dynamic": "^21.0.0",
+    "@angular/platform-server": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "@angular/ssr": "^21.0.0",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@lit-labs/ssr-dom-shim": "^1.3.0",
     "@types/source-map": "0.5.2",
@@ -83,16 +83,16 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/schematics": "^20.3.6",
-    "@angular-eslint/builder": "^20.4.0",
-    "@angular-eslint/eslint-plugin": "^20.4.0",
-    "@angular-eslint/eslint-plugin-template": "^20.4.0",
-    "@angular-eslint/schematics": "^20.4.0",
-    "@angular-eslint/template-parser": "^20.4.0",
-    "@angular/build": "^20.3.6",
-    "@angular/cli": "^20.3.9",
-    "@angular/compiler-cli": "^20.3.6",
-    "@angular/language-service": "^20.3.6",
+    "@angular-devkit/schematics": "^21.0.0",
+    "@angular-eslint/builder": "^20.6.0",
+    "@angular-eslint/eslint-plugin": "^20.6.0",
+    "@angular-eslint/eslint-plugin-template": "^20.6.0",
+    "@angular-eslint/schematics": "^20.6.0",
+    "@angular-eslint/template-parser": "^20.6.0",
+    "@angular/build": "^21.0.0",
+    "@angular/cli": "^21.0.0",
+    "@angular/compiler-cli": "^21.0.0",
+    "@angular/language-service": "^21.0.0",
     "@angularclass/hmr": "^3.0.0",
     "@microsoft/signalr": "^7.0.12",
     "@types/estree": "^1.0.0",
@@ -132,7 +132,7 @@
     "karma-parallel": "^0.3.1",
     "karma-spec-reporter": "^0.0.36",
     "lit-html": "^3.2.1",
-    "ng-packagr": "^20.0.0",
+    "ng-packagr": "^21.0.0",
     "postcss": "^8.5.1",
     "postcss-scss": "^4.0.6",
     "prettier": "^3.3.3",
@@ -148,6 +148,6 @@
     "ts-node": "^10.8.1",
     "typedoc": "^0.28.14",
     "typedoc-plugin-localization": "^3.1.0",
-    "typescript": "5.8.3"
+    "typescript": "5.9.3"
   }
 }

projects/bundle-test/src/main.server.ts

@@ -1,7 +1,8 @@
+import { provideZoneChangeDetection } from "@angular/core";
 import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { config } from './app/app.config.server';
 
-const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, config, context);
+const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, {...config, providers: [provideZoneChangeDetection(), ...config.providers]}, context);
 
 export default bootstrap;

projects/bundle-test/src/main.ts

@@ -1,6 +1,7 @@
+import { provideZoneChangeDetection } from "@angular/core";
 import { AppComponent } from './app/app.component';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 
 
-bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));
+bootstrapApplication(AppComponent, {...appConfig, providers: [provideZoneChangeDetection(), ...appConfig.providers]}).catch(err => console.error(err));

projects/igniteui-angular-elements/src/lib/icon.broadcast.service.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ActionType, BroadcastIconsChangeMessage, IgxIconBroadcastService, SvgIcon,  } from './icon.broadcast.service';
-import { Component, SecurityContext } from '@angular/core';
+import { ActionType, BroadcastIconsChangeMessage, IgxIconBroadcastService, SvgIcon, } from './icon.broadcast.service';
+import { Component, inject } from '@angular/core';
 import { IconMeta, IgxIconService } from 'igniteui-angular';
 import { wait } from 'igniteui-angular/test-utils/ui-interactions.spec';
 
@@ -9,107 +9,107 @@ describe('Icon broadcast service', () => {
     let broadcastChannel: BroadcastChannel;
     let events: BroadcastIconsChangeMessage[] = [];
     const buildIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>';
+        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>';
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-        imports: [],
-        providers: [IgxIconBroadcastService]
+            imports: [],
+            providers: [IgxIconBroadcastService]
         })
-        .compileComponents();
-      });
+            .compileComponents();
+    });
 
-      beforeEach(() => {
+    beforeEach(() => {
         broadcastChannel = new BroadcastChannel("ignite-ui-icon-channel");
         broadcastChannel.onmessage = (e: MessageEvent<BroadcastIconsChangeMessage>) => {
             events.push(e.data);
         }
         fixture = TestBed.createComponent(BroadcastServiceComponent);
-      });
+    });
 
-      afterEach(() => {
+    afterEach(() => {
         events = [];
         broadcastChannel.close();
-      });
+    });
 
     describe('Broadcast Events', () => {
-      it('should correctly process event of icons registering on channel.', async() => {
-        // simulate a new icon being registered on channel
-        const icons: Map<string, Map<string, SvgIcon>> = new Map();
-        const icon: Map<string, SvgIcon> = new Map()
-        icon.set("customIcon", { svg: buildIcon });
-        icons.set("customCollection", icon);
-        const message: BroadcastIconsChangeMessage = {
-            actionType: ActionType.RegisterIcon,
-            collections: icons
-        };
-        broadcastChannel.postMessage(message);
-        fixture.detectChanges();
-        await wait(50);
-        fixture.detectChanges();
-        const iconService = fixture.componentInstance.iconService;
-        const svg = iconService.getSvgIcon("customIcon", "customCollection");
-        expect(svg).not.toBeUndefined();
-      });
+        it('should correctly process event of icons registering on channel.', async () => {
+            // simulate a new icon being registered on channel
+            const icons: Map<string, Map<string, SvgIcon>> = new Map();
+            const icon: Map<string, SvgIcon> = new Map();
+            icon.set("customIcon", { svg: buildIcon });
+            icons.set("customCollection", icon);
+            const message: BroadcastIconsChangeMessage = {
+                actionType: ActionType.RegisterIcon,
+                collections: icons
+            };
+            broadcastChannel.postMessage(message);
+            fixture.detectChanges();
+            await wait(50);
+            fixture.detectChanges();
+            const iconService = fixture.componentInstance.iconService;
+            const svg = iconService.getSvgIcon("customIcon", "customCollection");
+            expect(svg).not.toBeUndefined();
+        });
 
-      it('should correctly process event of setting an icon reference on channel.', async() => {
-        const refs: Map<string, Map<string, IconMeta>> = new Map();
-        const ref: Map<string, IconMeta> = new Map()
-        ref.set("customIcon", {name: "customNameOfIcon", collection: "customCollection" } as any);
-        refs.set("customCollection", ref);
-        const message: BroadcastIconsChangeMessage = {
-            actionType: ActionType.UpdateIconReference,
-            references: refs
-        };
-        broadcastChannel.postMessage(message);
-        fixture.detectChanges();
-        await wait(50);
-        fixture.detectChanges();
+        it('should correctly process event of setting an icon reference on channel.', async () => {
+            const refs: Map<string, Map<string, IconMeta>> = new Map();
+            const ref: Map<string, IconMeta> = new Map();
+            ref.set("customIcon", { name: "customNameOfIcon", collection: "customCollection" } as any);
+            refs.set("customCollection", ref);
+            const message: BroadcastIconsChangeMessage = {
+                actionType: ActionType.UpdateIconReference,
+                references: refs
+            };
+            broadcastChannel.postMessage(message);
+            fixture.detectChanges();
+            await wait(50);
+            fixture.detectChanges();
 
-        const iconService = fixture.componentInstance.iconService;
-        const serviceRef = iconService.getIconRef("customIcon", "default");
-        expect(serviceRef.family).toBe("customCollection");
-        expect(serviceRef.name).toBe("customNameOfIcon");
-      });
+            const iconService = fixture.componentInstance.iconService;
+            const serviceRef = iconService.getIconRef("customIcon", "default");
+            expect(serviceRef.family).toBe("customCollection");
+            expect(serviceRef.name).toBe("customNameOfIcon");
+        });
 
-      it('should send a request to sync state from any peer already on the channel on init.', async() => {
-        await wait(50);
-        expect(events.length).toBe(1);
-        expect(events[0].actionType).toBe(ActionType.SyncState);
-      });
+        it('should send a request to sync state from any peer already on the channel on init.', async () => {
+            await wait(50);
+            expect(events.length).toBe(1);
+            expect(events[0].actionType).toBe(ActionType.SyncState);
+        });
 
-      it('should correctly process event of synching full state of icons on channel.', async() => {
-        const icons: Map<string, Map<string, SvgIcon>> = new Map();
-        const icon: Map<string, SvgIcon> = new Map()
-        icon.set("customIcon", { svg: buildIcon });
-        icons.set("customCollection", icon);
-        const refs: Map<string, Map<string, IconMeta>> = new Map();
-        const ref: Map<string, IconMeta> = new Map()
-        ref.set("customIcon", {name: "customIcon", family: "customCollection" });
-        refs.set("customCollection", ref);
-        const message: BroadcastIconsChangeMessage = {
-            actionType: ActionType.SyncState,
-            collections: icons,
-            references: refs
-        };
-        broadcastChannel.postMessage(message);
-        await wait(50);
-        const iconService = fixture.componentInstance.iconService;
-        const svg = iconService.getSvgIcon("customIcon", "customCollection");
-        expect(svg).not.toBeUndefined();
-        const serviceRef = iconService.getIconRef("customIcon", "customCollection");
-        expect(serviceRef.family).toBe("customCollection");
-        expect(serviceRef.name).toBe("customIcon");
-      });
+        it('should correctly process event of synching full state of icons on channel.', async () => {
+            const icons: Map<string, Map<string, SvgIcon>> = new Map();
+            const icon: Map<string, SvgIcon> = new Map()
+            icon.set("customIcon", { svg: buildIcon });
+            icons.set("customCollection", icon);
+            const refs: Map<string, Map<string, IconMeta>> = new Map();
+            const ref: Map<string, IconMeta> = new Map()
+            ref.set("customIcon", { name: "customIcon", family: "customCollection" });
+            refs.set("customCollection", ref);
+            const message: BroadcastIconsChangeMessage = {
+                actionType: ActionType.SyncState,
+                collections: icons,
+                references: refs
+            };
+            broadcastChannel.postMessage(message);
+            await wait(50);
+            const iconService = fixture.componentInstance.iconService;
+            const svg = iconService.getSvgIcon("customIcon", "customCollection");
+            expect(svg).not.toBeUndefined();
+            const serviceRef = iconService.getIconRef("customIcon", "customCollection");
+            expect(serviceRef.family).toBe("customCollection");
+            expect(serviceRef.name).toBe("customIcon");
+        });
     })
 });
 
 @Component({
-    template: `
-    `,
+    template: ``,
     standalone: true,
     providers: [IgxIconBroadcastService, IgxIconService]
 })
 export class BroadcastServiceComponent {
-    constructor(public iconBroadcast: IgxIconBroadcastService, public iconService: IgxIconService) {}
+    public iconBroadcast = inject(IgxIconBroadcastService);
+    public iconService = inject(IgxIconService);
 }

projects/igniteui-angular-elements/src/utils/injector-ref.ts

@@ -1,4 +1,4 @@
-import { createEnvironmentInjector, EnvironmentInjector, getPlatform, importProvidersFrom, provideZoneChangeDetection, ɵChangeDetectionScheduler, ɵChangeDetectionSchedulerImpl } from '@angular/core';
+import { ClassProvider, createEnvironmentInjector, EnvironmentInjector, getPlatform, importProvidersFrom, provideZoneChangeDetection, ɵChangeDetectionScheduler, ɵprovideZonelessChangeDetectionInternal, } from '@angular/core';
 import { BrowserModule, platformBrowser } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { IgxIconBroadcastService } from '../lib/icon.broadcast.service';
@@ -24,11 +24,14 @@ const platformInjector = getPlatform()?.injector ?? platformBrowser().injector;
 // createEnvironmentInjector is a public wrapper around EnvironmentNgModuleRefAdapter
 // https://github.com/angular/angular/blob/969dadc8e2fad8ca9d892858bdadbe3abb13de95/packages/core/src/application/create_application.ts#L56C25-L56C54
 const injector = createEnvironmentInjector([
-     // TODO: -> provideExperimentalZonelessChangeDetection
+    // TODO: -> provideExperimentalZonelessChangeDetection
     provideZoneChangeDetection({ eventCoalescing: true }),
     // Required, but only provided internally by `provideExperimentalZonelessChangeDetection`, `bootstrapModuleFactory`
     // & `internalCreateApplication` (`bootstrapApplication`/`createApplication`), so no public API alternative:
-    { provide: ɵChangeDetectionScheduler, useExisting: ɵChangeDetectionSchedulerImpl },
+
+    // Still no "direct" public API but at least `ɵprovideZonelessChangeDetectionInternal` exports it somewhat:
+    // https://github.com/angular/angular/commit/45fed3d2011bf6feffa8ee1365a5c88d603f826c#diff-10544e5a7c018dbc5dc5a1d4192919bb839c5d1b7cbcc1b20f57aa74c2ae7febR391-R397
+    ɵprovideZonelessChangeDetectionInternal().find((entity) => (entity as ClassProvider).provide === ɵChangeDetectionScheduler),
     importProvidersFrom(BrowserModule),
     // Elements specific:
     provideAnimations(),

projects/igniteui-angular-i18n/tsconfig.build.json

@@ -4,7 +4,7 @@
         "rootDir": "./src",
         "target": "es2015",
         "module": "esnext",
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
         "declaration": true,
         "outDir": "../../dist/igniteui-angular-i18n",
         "stripInternal": true,

projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts

@@ -262,7 +262,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
     /**
      * @hidden
      */
-    @HostListener('keydown.Space', ['$event'])
+    @HostListener('keydown.space', ['$event'])
     @HostListener('keydown.enter', ['$event'])
     protected onKeydownEnter(event: KeyboardEvent) {
         event.stopPropagation();

projects/igniteui-angular/chips/src/chips/chips-area.component.ts

@@ -187,7 +187,7 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
     protected destroy$ = new Subject<boolean>();
 
     @HostBinding('class')
-    private hostClass = 'igx-chip-area';
+    protected hostClass = 'igx-chip-area';
 
     private modifiedChipsArray: IgxChipComponent[];
     private _differ: IterableDiffer<IgxChipComponent> | null = null;

projects/igniteui-angular/core/src/core/global-types.ts

@@ -0,0 +1,27 @@
+/**
+ * Global type augmentations for IgniteUI Angular
+ */
+
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'keydown.enter': KeyboardEvent;
+        'keydown.escape': KeyboardEvent;
+        'keydown.tab': KeyboardEvent;
+        'keydown.arrowup': KeyboardEvent;
+        'keydown.arrowdown': KeyboardEvent;
+        'keydown.arrowleft': KeyboardEvent;
+        'keydown.arrowright': KeyboardEvent;
+        'keydown.shift.tab': KeyboardEvent;
+        'keydown.alt.arrowup': KeyboardEvent;
+        'keydown.alt.arrowdown': KeyboardEvent;
+        'keydown.pageup': KeyboardEvent;
+        'keydown.pagedown': KeyboardEvent;
+        'keydown.home': KeyboardEvent;
+        'keydown.end': KeyboardEvent;
+        'keydown.space': KeyboardEvent;
+        'igcChange': CustomEvent;
+    }
+}
+
+// This export is needed to make this file a module
+export {};

projects/igniteui-angular/core/src/date-common/util/date-time.util.ts

@@ -268,7 +268,7 @@ export abstract class DateTimeUtil {
     public static formatDate(value: number | Date, format: string, locale: string, timezone?: string): string {
         let formattedDate: string;
         try {
-            formattedDate = formatDate(value, format, locale, timezone);
+            formattedDate = formatDate(value, format, locale, timezone).normalize("NFKD");
         } catch {
             DateTimeUtil.logMissingLocaleSettings(locale);
             const formatter = new Intl.DateTimeFormat(locale);

projects/igniteui-angular/core/src/public_api.ts

@@ -59,3 +59,6 @@ export * from './core/i18n/query-builder-resources';
 export * from './core/i18n/resources';
 export * from './core/i18n/time-picker-resources';
 export * from './core/i18n/tree-resources';
+
+// Types
+export * from './core/global-types';