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

package.json

@@ -81,12 +81,12 @@
     "igniteui-trial-watermark": "^3.1.0",
     "jspdf": "^3.0.4",
     "lodash-es": "^4.17.21",
-    "marked": "^16.4.0",
+    "marked": "^17.0.0",
     "marked-shiki": "^1.2.1",
     "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",
@@ -128,7 +128,7 @@
     "igniteui-dockmanager": "^1.17.0",
     "igniteui-i18n-resources": "^1.0.2",
     "igniteui-sassdoc-theme": "^2.1.0",
-    "igniteui-webcomponents": "^6.3.1",
+    "igniteui-webcomponents": "^6.4.0",
     "jasmine": "^5.6.0",
     "jasmine-core": "^5.6.0",
     "karma": "^6.4.4",

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/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/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 */

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

@@ -0,0 +1,46 @@
+import { NAVIGATION_KEYS } from 'igniteui-angular/core';
+
+/**
+ * Horizontal navigation keys for grid columns
+ * @hidden
+ * @internal
+ */
+export const HORIZONTAL_NAV_KEYS = new Set(['arrowleft', 'left', 'arrowright', 'right', 'home', 'end']);
+
+/**
+ * Keys for expanding rows (tree-grid, hierarchical-grid, master-detail)
+ * @hidden
+ * @internal
+ */
+export const ROW_EXPAND_KEYS = new Set('right down arrowright arrowdown'.split(' '));
+
+/**
+ * Keys for collapsing rows (tree-grid, hierarchical-grid, master-detail)
+ * @hidden
+ * @internal
+ */
+export const ROW_COLLAPSE_KEYS = new Set('left up arrowleft arrowup'.split(' '));
+
+/**
+ * Keys for adding rows in editable grids
+ * @hidden
+ * @internal
+ */
+export const ROW_ADD_KEYS = new Set(['+', 'add', '≠', '±', '=']);
+
+/**
+ * All supported navigation and action keys for grid cells
+ * @hidden
+ * @internal
+ */
+export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS),
+    ...Array.from(ROW_ADD_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup']);
+
+/**
+ * Navigation keys for grid headers
+ * @hidden
+ * @internal
+ */
+export const HEADER_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'escape', 'esc', 'l',
+    /** This symbol corresponds to the Alt + L combination under MAC. */
+    '¬']);

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

@@ -4,15 +4,17 @@ import { IgxForOfDirective } from 'igniteui-angular/directives';
 import { GridType } from './common/grid.interface';
 import {
     NAVIGATION_KEYS,
+    PlatformUtil,
+    SortingDirection
+} from 'igniteui-angular/core';
+import {
     ROW_COLLAPSE_KEYS,
     ROW_EXPAND_KEYS,
     SUPPORTED_KEYS,
     HORIZONTAL_NAV_KEYS,
     HEADER_KEYS,
-    ROW_ADD_KEYS,
-    PlatformUtil,
-    SortingDirection
-} from 'igniteui-angular/core';
+    ROW_ADD_KEYS
+} from './grid-navigation-keys';
 import { GridKeydownTargetType, GridSelectionMode, FilterMode } from './common/enums';
 import { IActiveNodeChangeEventArgs } from './common/events';
 import { IMultiRowLayoutNode } from './common/types';

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

@@ -102,10 +102,10 @@ export * from './resizing/pivot-grid/pivot-resize-handle.directive';
 export * from './resizing/pivot-grid/pivot-resizer.component';
 export * from './resizing/pivot-grid/pivot-resizing.service';
 export * from './grid-navigation.service';
+export * from './grid-navigation-keys';
 export * from './grid-validation.service';
 export * from './grid.common';
 export { IgxGridCellComponent } from './cell.component';
-export * from './grouping/grid-group-by-area.component';
 export * from './grouping/group-by-area.directive';
 export * from './grid-mrl-navigation.service';
 export * from './api.service';

projects/igniteui-angular/grids/core/src/services/csv/char-separated-value-data.ts

@@ -1,6 +1,6 @@
 import { ExportUtilities } from '../exporter-common/export-utilities';
 import { IColumnInfo } from '../exporter-common/base-export-service';
-import { yieldingLoop } from 'igniteui-angular/core';
+import { yieldingLoop } from '../exporter-common/yielding-loop';
 
 /**
  * @hidden

projects/igniteui-angular/grids/core/src/services/excel/excel-files.ts

@@ -4,7 +4,7 @@ import { WorksheetData } from './worksheet-data';
 
 import { strToU8 } from 'fflate';
 import { ExportHeaderType, ExportRecordType, IExportRecord, IColumnList, IColumnInfo, GRID_ROOT_SUMMARY, GRID_PARENT, GRID_LEVEL_COL } from '../exporter-common/base-export-service';
-import { yieldingLoop } from 'igniteui-angular/core';
+import { yieldingLoop } from '../exporter-common/yielding-loop';
 
 /**
  * @hidden

projects/igniteui-angular/grids/core/src/services/exporter-common/base-export-service.ts

@@ -1,7 +1,8 @@
 import { EventEmitter } from '@angular/core';
 import { ExportUtilities } from './export-utilities';
 import { IgxExporterOptionsBase } from './exporter-options-base';
-import { type ITreeGridRecord, type ColumnType, type GridTypeBase, type IPathSegment, type IgxSummaryResult, type GridColumnDataType, DataUtil, FilterUtil, GridSummaryCalculationMode, IBaseEventArgs, IFilteringState, IGroupByExpandState, IGroupByRecord, IGroupingState, TreeGridFilteringStrategy, cloneArray, cloneValue, columnFieldPath, resolveNestedPath, yieldingLoop, getHierarchy, isHierarchyMatch, BaseFormatter } from 'igniteui-angular/core';
+import { yieldingLoop } from './yielding-loop';
+import { type ITreeGridRecord, type ColumnType, type GridTypeBase, type IPathSegment, type IgxSummaryResult, type GridColumnDataType, DataUtil, FilterUtil, GridSummaryCalculationMode, IBaseEventArgs, IFilteringState, IGroupByExpandState, IGroupByRecord, IGroupingState, TreeGridFilteringStrategy, cloneArray, cloneValue, columnFieldPath, resolveNestedPath, getHierarchy, isHierarchyMatch, BaseFormatter } from 'igniteui-angular/core';
 import { FormatWidth, getLocaleDateFormat, getLocaleDateTimeFormat } from '@angular/common';
 
 export enum ExportRecordType {

projects/igniteui-angular/grids/core/src/services/exporter-common/yielding-loop.ts

@@ -0,0 +1,21 @@
+/**
+ * Executes a loop in chunks to avoid blocking the UI thread.
+ * Uses setTimeout(0) for macrotask scheduling between chunks.
+ * @hidden
+ * @internal
+ */
+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) {
+            setTimeout(chunk, 0);
+        } else {
+            done();
+        }
+    };
+    chunk();
+};

projects/igniteui-angular/grids/grid/src/grid-base.directive.ts

@@ -104,9 +104,10 @@ import {
     IgxTemplateOutletDirective
 } from 'igniteui-angular/directives';
 import { IgxGridRowComponent } from './grid-row.component';
+import { IgxGridGroupByAreaComponent } from './grouping/grid-group-by-area.component';
 import { IgxPaginatorToken, type IgxPaginatorComponent } from 'igniteui-angular/paginator';
 import { IgxSnackbarComponent } from 'igniteui-angular/snackbar';
-import { CharSeparatedValueData, DropPosition, FilterMode, getUUID, GridCellMergeMode, GridKeydownTargetType, GridPagingMode, GridSelectionMode, GridSelectionRange, GridServiceType, GridSummaryPosition, GridType, GridValidationTrigger, IActiveNode, IActiveNodeChangeEventArgs, ICellPosition, IClipboardOptions, IColumnMovingEndEventArgs, IColumnMovingEventArgs, IColumnMovingStartEventArgs, IColumnResizeEventArgs, IColumnsAutoGeneratedEventArgs, IColumnSelectionEventArgs, IColumnVisibilityChangedEventArgs, IColumnVisibilityChangingEventArgs, IFilteringEventArgs, IGridCellEventArgs, IGridClipboardEvent, IGridContextMenuEventArgs, IGridEditDoneEventArgs, IGridEditEventArgs, IGridFormGroupCreatedEventArgs, IGridKeydownEventArgs, IGridRowEventArgs, IGridScrollEventArgs, IGridToolbarExportEventArgs, IGridValidationStatusEventArgs, IGX_GRID_SERVICE_BASE, IgxAdvancedFilteringDialogComponent, IgxCell, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnResizingService, IgxDragIndicatorIconDirective, IgxEditRow, IgxExcelStyleHeaderIconDirective, IgxExcelStyleLoadingValuesTemplateDirective, IgxFilteringService, IgxGridBodyDirective, IgxGridCellComponent, IgxGridColumnResizerComponent, IgxGridEmptyTemplateContext, IgxGridEmptyTemplateDirective, IgxGridExcelStyleFilteringComponent, IgxGridFilteringCellComponent, IgxGridFilteringRowComponent, IgxGridGroupByAreaComponent, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridHeaderTemplateContext, IgxGridLoadingTemplateDirective, IgxGridNavigationService, IgxGridRowDragGhostContext, IgxGridRowEditActionsTemplateContext, IgxGridRowEditTemplateContext, IgxGridRowEditTextTemplateContext, IgxGridRowTemplateContext, IgxGridSelectionService, IgxGridSummaryService, IgxGridTemplateContext, IgxGridToolbarComponent, IgxGridTransaction, IgxGridValidationService, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHeadSelectorDirective, IgxHeadSelectorTemplateContext, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowDirective, IgxRowDragGhostDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowSelectorDirective, IgxRowSelectorTemplateContext, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxSummaryRowComponent, IgxToolbarToken, IPinColumnCancellableEventArgs, IPinColumnEventArgs, IPinningConfig, IPinRowEventArgs, IRowDataCancelableEventArgs, IRowDataEventArgs, IRowDragEndEventArgs, IRowDragStartEventArgs, IRowSelectionEventArgs, IRowToggleEventArgs, ISearchInfo, ISizeInfo, ISortingEventArgs, RowEditPositionStrategy, RowPinningPosition, RowType, WatchChanges } from 'igniteui-angular/grids/core';
+import { CharSeparatedValueData, DropPosition, FilterMode, getUUID, GridCellMergeMode, GridKeydownTargetType, GridPagingMode, GridSelectionMode, GridSelectionRange, GridServiceType, GridSummaryPosition, GridType, GridValidationTrigger, IActiveNode, IActiveNodeChangeEventArgs, ICellPosition, IClipboardOptions, IColumnMovingEndEventArgs, IColumnMovingEventArgs, IColumnMovingStartEventArgs, IColumnResizeEventArgs, IColumnsAutoGeneratedEventArgs, IColumnSelectionEventArgs, IColumnVisibilityChangedEventArgs, IColumnVisibilityChangingEventArgs, IFilteringEventArgs, IGridCellEventArgs, IGridClipboardEvent, IGridContextMenuEventArgs, IGridEditDoneEventArgs, IGridEditEventArgs, IGridFormGroupCreatedEventArgs, IGridKeydownEventArgs, IGridRowEventArgs, IGridScrollEventArgs, IGridToolbarExportEventArgs, IGridValidationStatusEventArgs, IGX_GRID_SERVICE_BASE, IgxAdvancedFilteringDialogComponent, IgxCell, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnResizingService, IgxDragIndicatorIconDirective, IgxEditRow, IgxExcelStyleHeaderIconDirective, IgxExcelStyleLoadingValuesTemplateDirective, IgxFilteringService, IgxGridBodyDirective, IgxGridCellComponent, IgxGridColumnResizerComponent, IgxGridEmptyTemplateContext, IgxGridEmptyTemplateDirective, IgxGridExcelStyleFilteringComponent, IgxGridFilteringCellComponent, IgxGridFilteringRowComponent, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridHeaderTemplateContext, IgxGridLoadingTemplateDirective, IgxGridNavigationService, IgxGridRowDragGhostContext, IgxGridRowEditActionsTemplateContext, IgxGridRowEditTemplateContext, IgxGridRowEditTextTemplateContext, IgxGridRowTemplateContext, IgxGridSelectionService, IgxGridSummaryService, IgxGridTemplateContext, IgxGridToolbarComponent, IgxGridTransaction, IgxGridValidationService, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHeadSelectorDirective, IgxHeadSelectorTemplateContext, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowDirective, IgxRowDragGhostDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowSelectorDirective, IgxRowSelectorTemplateContext, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxSummaryRowComponent, IgxToolbarToken, IPinColumnCancellableEventArgs, IPinColumnEventArgs, IPinningConfig, IPinRowEventArgs, IRowDataCancelableEventArgs, IRowDataEventArgs, IRowDragEndEventArgs, IRowDragStartEventArgs, IRowSelectionEventArgs, IRowToggleEventArgs, ISearchInfo, ISizeInfo, ISortingEventArgs, RowEditPositionStrategy, RowPinningPosition, RowType, WatchChanges } from 'igniteui-angular/grids/core';
 import { getCurrentI18n, getNumberFormatter, IResourceChangeEventArgs,  } from 'igniteui-i18n-core';
 import { I18N_FORMATTER } from 'igniteui-angular/core';
 

projects/igniteui-angular/grids/grid/src/grid.component.ts

@@ -21,7 +21,6 @@ import {
     IgxGridCRUDService,
     IgxGridDetailTemplateDirective,
     IgxGridDragSelectDirective,
-    IgxGridGroupByAreaComponent,
     IgxGridHeaderRowComponent,
     IgxGridMasterDetailContext,
     IgxGridMRLNavigationService,
@@ -49,6 +48,7 @@ import {
 } from 'igniteui-angular/grids/core';
 import { IgxGridAPIService } from './grid-api.service';
 import { IgxGridGroupByRowComponent } from './groupby-row.component';
+import { IgxGridGroupByAreaComponent } from './grouping/grid-group-by-area.component';
 import { take, takeUntil } from 'rxjs/operators';
 import { cloneArray, IBaseEventArgs, IGridGroupingStrategy, IGroupByExpandState, IGroupByRecord, IGroupingExpression, IgxOverlayOutletDirective, ISortingExpression } from 'igniteui-angular/core';
 import { IgxGridDetailsPipe } from './grid.details.pipe';

projects/igniteui-angular/grids/grid/src/grid.pipes.ts

@@ -119,7 +119,7 @@ export class IgxGridUnmergeActivePipe implements PipeTransform {
             return collection;
         }
 
-        let result = cloneArray(collection) as any;
+        const result = cloneArray(collection) as any;
         uniqueRoots.forEach(x => {
             const index = collection.indexOf(x);
             const colKeys = [...x.cellMergeMeta.keys()];

projects/igniteui-angular/grids/core/src/grouping/grid-group-by-area.component.ts → projects/igniteui-angular/grids/grid/src/grouping/grid-group-by-area.component.ts

@@ -3,9 +3,7 @@ import {
     Input,
 } from '@angular/core';
 import { IChipsAreaReorderEventArgs, IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips';
-import { FlatGridType } from '../common/grid.interface';
-import { IgxGroupByAreaDirective, IgxGroupByMetaPipe } from './group-by-area.directive';
-import { IgxGroupAreaDropDirective } from '../grid.directives';
+import { FlatGridType, IgxGroupByAreaDirective, IgxGroupByMetaPipe, IgxGroupAreaDropDirective } from 'igniteui-angular/grids/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 import { IgxSuffixDirective } from 'igniteui-angular/input-group';