refactor(*): further improvements to core and grids/core

CHANGELOG.md

@@ -24,6 +24,7 @@ All notable changes for each version of this project will be documented in this
 
 - `igxForOf`, `igxGrid`, `igxTreeGrid`, `igxHierarchicalGrid`, `igxPivotGrid`
     - original `data` array mutations (like adding/removing/moving records in the original array) are no longer detected automatically. Components need an array ref change for the change to be detected.
+- `IgxGridGroupByAreaComponent` has moved from the `grids/core` to the `grids/grid` entry point. The `ng update` migration will prompt you to optionally migrate your imports to the new entry point.
 
 ### Localization(i18n)
 

package.json

@@ -59,17 +59,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.0.2",
-    "@angular/common": "^21.0.2",
-    "@angular/compiler": "^21.0.2",
-    "@angular/core": "^21.0.2",
-    "@angular/elements": "^21.0.2",
-    "@angular/forms": "^21.0.2",
-    "@angular/platform-browser": "^21.0.2",
-    "@angular/platform-browser-dynamic": "^21.0.2",
-    "@angular/platform-server": "^21.0.2",
-    "@angular/router": "^21.0.2",
-    "@angular/ssr": "^21.0.1",
+    "@angular/animations": "^21.1.3",
+    "@angular/common": "^21.1.3",
+    "@angular/compiler": "^21.1.3",
+    "@angular/core": "^21.1.3",
+    "@angular/elements": "^21.1.3",
+    "@angular/forms": "^21.1.3",
+    "@angular/platform-browser": "^21.1.3",
+    "@angular/platform-browser-dynamic": "^21.1.3",
+    "@angular/platform-server": "^21.1.3",
+    "@angular/router": "^21.1.3",
+    "@angular/ssr": "^21.1.2",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@lit-labs/ssr-dom-shim": "^1.3.0",
     "@types/source-map": "0.5.2",
@@ -86,19 +86,19 @@
     "rxjs": "^7.8.2",
     "shiki": "^3.13.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.15.0"
+    "zone.js": "~0.16.0"
   },
   "devDependencies": {
-    "@angular-devkit/schematics": "^21.0.1",
-    "@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.1",
-    "@angular/cli": "^21.0.2",
-    "@angular/compiler-cli": "^21.0.2",
-    "@angular/language-service": "^21.0.2",
+    "@angular-devkit/schematics": "^21.1.2",
+    "@angular-eslint/builder": "^21.2.0",
+    "@angular-eslint/eslint-plugin": "^21.2.0",
+    "@angular-eslint/eslint-plugin-template": "^21.2.0",
+    "@angular-eslint/schematics": "^21.2.0",
+    "@angular-eslint/template-parser": "^21.2.0",
+    "@angular/build": "^21.1.2",
+    "@angular/cli": "^21.1.2",
+    "@angular/compiler-cli": "^21.1.3",
+    "@angular/language-service": "^21.1.3",
     "@angularclass/hmr": "^3.0.0",
     "@microsoft/signalr": "^7.0.12",
     "@types/estree": "^1.0.0",

projects/igniteui-angular/accordion/src/accordion/accordion.component.ts

@@ -1,14 +1,16 @@
 import { AfterContentInit, AfterViewInit, ChangeDetectorRef, Component, ContentChildren, EventEmitter, HostBinding, Input, OnDestroy, Output, QueryList, booleanAttribute, inject } from '@angular/core';
 import { fromEvent, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { ACCORDION_NAVIGATION_KEYS } from 'igniteui-angular/core';
 import {
     IExpansionPanelCancelableEventArgs,
     IExpansionPanelEventArgs, IgxExpansionPanelBase
 } from 'igniteui-angular/expansion-panel';
 import { IgxExpansionPanelComponent } from 'igniteui-angular/expansion-panel';
 import { ToggleAnimationSettings } from 'igniteui-angular/expansion-panel';
 
+/** @hidden @internal */
+const ACCORDION_NAVIGATION_KEYS = new Set('up down arrowup arrowdown home end'.split(' '));
+
 export interface IAccordionEventArgs extends IExpansionPanelEventArgs {
     owner: IgxAccordionComponent;
     /** Provides a reference to the `IgxExpansionPanelComponent` which was expanded/collapsed. */

projects/igniteui-angular/banner/src/banner/banner.directives.ts

@@ -1,6 +1,7 @@
 import { Directive } from '@angular/core';
 
 @Directive({
+    // eslint-disable-next-line @angular-eslint/directive-selector
     selector: 'igx-banner-actions',
     standalone: true
 })

projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.directives.ts

@@ -1,13 +1,13 @@
 import { Directive } from '@angular/core';
 
 @Directive({
-    selector: 'igx-bottom-nav-header-label,[igxBottomNavHeaderLabel]',
+    selector: '[igxBottomNavHeaderLabel],igx-bottom-nav-header-label',
     standalone: true
 })
 export class IgxBottomNavHeaderLabelDirective { }
 
 @Directive({
-    selector: 'igx-bottom-nav-header-icon,[igxBottomNavHeaderIcon]',
+    selector: '[igxBottomNavHeaderIcon],igx-bottom-nav-header-icon',
     standalone: true
 })
 export class IgxBottomNavHeaderIconDirective { }

projects/igniteui-angular/card/src/card/card.component.ts

@@ -7,6 +7,7 @@ let NEXT_ID = 0;
  * Use it to wrap images and videos.
  */
 @Directive({
+    // eslint-disable-next-line @angular-eslint/directive-selector
     selector: 'igx-card-media',
     standalone: true
 })
@@ -118,7 +119,7 @@ export class IgxCardHeaderSubtitleDirective {
  * IgxCardContent is container for the card content.
  */
 @Directive({
-
+    // eslint-disable-next-line @angular-eslint/directive-selector
     selector: 'igx-card-content',
     standalone: true
 })
@@ -132,7 +133,7 @@ export class IgxCardContentDirective {
  * IgxCardFooter is container for the card footer
  */
 @Directive({
-
+    // eslint-disable-next-line @angular-eslint/directive-selector
     selector: 'igx-card-footer',
     standalone: true
 })
@@ -266,7 +267,6 @@ export type IgxCardActionsLayout = (typeof IgxCardActionsLayout)[keyof typeof Ig
  * IgxCardActions is container for the card actions.
  */
 @Component({
-
     selector: 'igx-card-actions',
     templateUrl: 'card-actions.component.html',
     standalone: true

projects/igniteui-angular/core/src/core/i18n/formatters/formatter-base.spec.ts

@@ -83,10 +83,10 @@ describe('Localization', () => {
 
         it('should return correct date and time format per locale', () => {
             // Defaults to Angular's one because they are registered in tests
-            expect(i18nFormatter.getLocaleDateTimeFormat('en', false, { dateStyle: 'short', timeStyle: 'short' })).toEqual('M/d/yy, h:mm tt');
-            expect(i18nFormatter.getLocaleDateTimeFormat('en', false, { dateStyle: 'medium', timeStyle: 'short' })).toEqual('MMM d, yyyy, h:mm tt');
-            expect(i18nFormatter.getLocaleDateTimeFormat('en', false, { dateStyle: 'long', timeStyle: 'long' })).toEqual(`MMMM d, yyyy at h:mm:ss tt z`);
-            expect(i18nFormatter.getLocaleDateTimeFormat('en', false, { dateStyle: 'full', timeStyle: 'short' })).toEqual(`EEEE, MMMM d, yyyy at h:mm tt`);
+            expect(i18nFormatter.getLocaleDateTimeFormat('en', false, { dateStyle: 'short', timeStyle: 'short' })).toEqual('M/d/yy, h:mm tt');
+            expect(i18nFormatter.getLocaleDateTimeFormat('en', false, { dateStyle: 'medium', timeStyle: 'short' })).toEqual('MMM d, yyyy, h:mm tt');
+            expect(i18nFormatter.getLocaleDateTimeFormat('en', false, { dateStyle: 'long', timeStyle: 'long' })).toEqual(`MMMM d, yyyy at h:mm:ss tt z`);
+            expect(i18nFormatter.getLocaleDateTimeFormat('en', false, { dateStyle: 'full', timeStyle: 'short' })).toEqual(`EEEE, MMMM d, yyyy at h:mm tt`);
 
             expect(i18nFormatter.getLocaleDateTimeFormat('de', false, { dateStyle: 'short', timeStyle: 'short' })).toEqual('dd.MM.yy, HH:mm');
             expect(i18nFormatter.getLocaleDateTimeFormat('de', false, { dateStyle: 'medium', timeStyle: 'short' })).toEqual('dd.MM.yyyy, HH:mm');

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

@@ -2,7 +2,6 @@ import { isPlatformBrowser } from '@angular/common';
 import { Injectable, InjectionToken, PLATFORM_ID, inject } from '@angular/core';
 import { mergeWith } from 'lodash-es';
 import { NEVER, Observable } from 'rxjs';
-import { setImmediate } from './setImmediate';
 import { isDevMode } from '@angular/core';
 import type { IgxTheme } from '../services/theme/theme.token';
 
@@ -429,8 +428,6 @@ export interface IBaseCancelableBrowserEventArgs extends CancelableBrowserEventA
 
 export interface IBaseCancelableEventArgs extends CancelableEventArgs, IBaseEventArgs { }
 
-export const HORIZONTAL_NAV_KEYS = new Set(['arrowleft', 'left', 'arrowright', 'right', 'home', 'end']);
-
 export const NAVIGATION_KEYS = new Set([
     'down',
     'up',
@@ -446,15 +443,6 @@ export const NAVIGATION_KEYS = new Set([
     'spacebar',
     ' '
 ]);
-export const ACCORDION_NAVIGATION_KEYS = new Set('up down arrowup arrowdown home end'.split(' '));
-export const ROW_EXPAND_KEYS = new Set('right down arrowright arrowdown'.split(' '));
-export const ROW_COLLAPSE_KEYS = new Set('left up arrowleft arrowup'.split(' '));
-export const ROW_ADD_KEYS = new Set(['+', 'add', '≠', '±', '=']);
-export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS),
-...Array.from(ROW_ADD_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup']);
-export const HEADER_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'escape', 'esc', 'l',
-    /** This symbol corresponds to the Alt + L combination under MAC. */
-    '¬']);
 
 /**
  * @hidden
@@ -581,22 +569,6 @@ export const reverseMapper = (path: string, value: any) => {
     return obj;
 };
 
-export const yieldingLoop = (count: number, chunkSize: number, callback: (index: number) => void, done: () => void) => {
-    let i = 0;
-    const chunk = () => {
-        const end = Math.min(i + chunkSize, count);
-        for (; i < end; ++i) {
-            callback(i);
-        }
-        if (i < count) {
-            setImmediate(chunk);
-        } else {
-            done();
-        }
-    };
-    chunk();
-};
-
 export const isConstructor = (ref: any) => typeof ref === 'function' && Boolean(ref.prototype) && Boolean(ref.prototype.constructor);
 
 /** Converts pixel values to their rem counterparts for a base value */

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

@@ -685,7 +685,7 @@ describe(`DateTimeUtil Unit tests`, () => {
 
         // returns the equivalent of the predefined numeric formats as date parts
         // should be transformed as inputFormats for editing (numeric year, 2-digit parts for the rest)
-        expect(DateTimeUtil.getNumericInputFormat(locale, angularFormatter, 'short')).toBe('MM/dd/yyyy, hh:mm tt');
+        expect(DateTimeUtil.getNumericInputFormat(locale, angularFormatter, 'short')).toBe('MM/dd/yyyy, hh:mm tt');
         expect(DateTimeUtil.getNumericInputFormat(locale, angularFormatter, 'shortDate')).toBe('MM/dd/yyyy');
         expect(DateTimeUtil.getNumericInputFormat(locale, angularFormatter, 'shortTime').normalize('NFKD')).toBe('hh:mm tt');
         expect(DateTimeUtil.getNumericInputFormat(locale, angularFormatter, 'mediumTime').normalize('NFKD')).toBe('hh:mm:ss tt');

projects/igniteui-angular/dialog/src/dialog/dialog.directives.ts

@@ -4,7 +4,7 @@ import { Directive, HostBinding } from '@angular/core';
  * @hidden
  */
 @Directive({
-    selector: 'igx-dialog-title,[igxDialogTitle]',
+    selector: '[igxDialogTitle],igx-dialog-title',
     standalone: true
 })
 export class IgxDialogTitleDirective {
@@ -17,7 +17,7 @@ export class IgxDialogTitleDirective {
  * @hidden
  */
 @Directive({
-    selector: 'igx-dialog-actions,[igxDialogActions]',
+    selector: '[igxDialogActions],igx-dialog-actions',
     standalone: true
 })
 export class IgxDialogActionsDirective {

projects/igniteui-angular/directives/src/directives/divider/divider.directive.ts

@@ -9,6 +9,7 @@ export type IgxDividerType = (typeof IgxDividerType)[keyof typeof IgxDividerType
 let NEXT_ID = 0;
 
 @Directive({
+    // eslint-disable-next-line @angular-eslint/directive-selector
     selector: 'igx-divider',
     standalone: true
 })

projects/igniteui-angular/directives/src/directives/form-control/form-control.directive.ts

@@ -1,7 +1,8 @@
 import { Directive, forwardRef, ElementRef, HostListener, Renderer2, inject } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
-@Directive({ 
+@Directive({
+    // eslint-disable-next-line @angular-eslint/directive-selector
     selector: 'igc-rating[ngModel],igc-rating[formControlName]',
     providers: [
         {

projects/igniteui-angular/eslint.config.mjs

@@ -21,13 +21,14 @@ export default [
         rules: {
             "@angular-eslint/component-selector": ["error", {
                 type: "element",
-                prefix: ["igx", "igc", "test"],
+                prefix: ["igx", "test"],
                 style: "kebab-case",
             }],
 
             "@angular-eslint/directive-selector": ["error", {
                 type: ["attribute", "element"],
-                prefix: ["igx", "igc"],
+                prefix: ["igx", "ig"],
+                style: "camelCase",
             }],
 
             "@angular-eslint/no-input-rename": "off",

projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.directives.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @angular-eslint/directive-selector */
 import { Directive, HostBinding } from '@angular/core';
 import { HeaderContentBaseDirective } from './expansion-panel.common';
 

projects/igniteui-angular/grids/core/src/columns/validators.directive.ts

@@ -1,8 +1,8 @@
+/* eslint-disable @angular-eslint/directive-selector */
 import { Directive } from '@angular/core';
 import { RequiredValidator, NG_VALIDATORS, MinValidator, MaxValidator, EmailValidator, MinLengthValidator, MaxLengthValidator, PatternValidator } from '@angular/forms';
 
 @Directive({
-
     selector: 'igx-column[required]',
     providers: [{
             provide: NG_VALIDATORS,
@@ -15,7 +15,6 @@ export class IgxColumnRequiredValidatorDirective extends RequiredValidator {
 }
 
 @Directive({
-
     selector: 'igx-column[min]',
     providers: [{
             provide: NG_VALIDATORS,
@@ -28,7 +27,6 @@ export class IgxColumnMinValidatorDirective extends MinValidator { }
 
 
 @Directive({
-
     selector: 'igx-column[max]',
     providers: [{
             provide: NG_VALIDATORS,
@@ -41,7 +39,6 @@ export class IgxColumnMaxValidatorDirective extends MaxValidator { }
 
 
 @Directive({
-
     selector: 'igx-column[email]',
     providers: [{
             provide: NG_VALIDATORS,
@@ -54,7 +51,6 @@ export class IgxColumnEmailValidatorDirective extends EmailValidator { }
 
 
 @Directive({
-
     selector: 'igx-column[minlength]',
     providers: [{
             provide: NG_VALIDATORS,
@@ -66,7 +62,6 @@ export class IgxColumnEmailValidatorDirective extends EmailValidator { }
 export class IgxColumnMinLengthValidatorDirective extends MinLengthValidator { }
 
 @Directive({
-
     selector: 'igx-column[maxlength]',
     providers: [{
             provide: NG_VALIDATORS,
@@ -79,7 +74,6 @@ export class IgxColumnMaxLengthValidatorDirective extends MaxLengthValidator {
 }
 
 @Directive({
-
     selector: 'igx-column[pattern]',
     providers: [{
             provide: NG_VALIDATORS,

projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts

@@ -35,13 +35,13 @@ import { IgxExcelStyleHeaderComponent } from './excel-style-header.component';
 import { ColumnType, FilteringExpressionsTree, GridColumnDataType, GridTypeBase, IFilteringExpressionsTree, IgxFilterItem, IgxOverlayService, isTree, SortingDirection } from 'igniteui-angular/core';
 
 @Directive({
-    selector: 'igx-excel-style-column-operations,[igxExcelStyleColumnOperations]',
+    selector: '[igxExcelStyleColumnOperations],igx-excel-style-column-operations',
     standalone: true
 })
 export class IgxExcelStyleColumnOperationsTemplateDirective { }
 
 @Directive({
-    selector: 'igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]',
+    selector: '[igxExcelStyleFilterOperations],igx-excel-style-filter-operations',
     standalone: true
 })
 export class IgxExcelStyleFilterOperationsTemplateDirective { }

projects/igniteui-angular/grids/core/src/grid-mrl-navigation.service.ts

@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
 import { first } from 'rxjs/operators';
 import { IgxGridNavigationService } from './grid-navigation.service';
-import { HORIZONTAL_NAV_KEYS, HEADER_KEYS, ColumnType } from 'igniteui-angular/core';
+import { ColumnType } from 'igniteui-angular/core';
+import { HORIZONTAL_NAV_KEYS, HEADER_KEYS } from './grid-navigation-keys';
 import { GridKeydownTargetType } from './common/enums';
 
 /** @hidden */