feat(pivot): Update pivot to Angular 13 and partial ivy compilation

Author: dkamburov

projects/igniteui-angular/src/lib/chips/chip.component.ts

@@ -814,7 +814,7 @@ export class IgxChipComponent extends DisplayDensityBase {
      * @hidden
      * @internal
      */
-    public onChipOverHandler(event: IDropDroppedEventArgs) {
+    public onChipOverHandler(event: IDropBaseEventArgs) {
             const eventArgs: IChipEnterDragAreaEventArgs = {
                 owner: this,
                 dragChip: event.drag.data.chip,

projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts

@@ -5,8 +5,7 @@ import { IPivotDimension, IPivotKeys, IPivotValue, PivotDimensionType } from '..
 import { PivotUtil } from '../grids/pivot-grid/pivot-util';
 import { FilteringStrategy } from './filtering-strategy';
 import { GridColumnDataType } from './data-util';
-import { SortingDirection } from './sorting-expression.interface';
-import { DefaultSortingStrategy, ISortingStrategy } from './sorting-strategy';
+import { DefaultSortingStrategy, ISortingStrategy, SortingDirection } from './sorting-strategy';
 import { parseDate } from '../core/utils';
 
 export interface IPivotDimensionStrategy {

projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts

@@ -1,15 +1,4 @@
-import { cloneArray, IBaseEventArgs, parseDate, resolveNestedPath } from '../core/utils';
-import { GridType } from '../grids/common/grid.interface';
-import { IGroupByExpandState } from './groupby-expand-state.interface';
-import { IGroupByRecord } from './groupby-record.interface';
-import { IGroupingState } from './groupby-state.interface';
-import { IGroupingExpression } from './grouping-expression.interface';
-import { IGroupByResult } from './grouping-result.interface';
-import { getHierarchy, isHierarchyMatch } from './operations';
-
-const DATE_TYPE = 'date';
-const TIME_TYPE = 'time';
-const DATE_TIME_TYPE = 'dateTime';
+import { IBaseEventArgs } from '../core/utils';
 
 export enum SortingDirection {
     None = 0,
@@ -32,8 +21,7 @@ export interface ISortingStrategy {
         ignoreCase: boolean,
         valueResolver: (obj: any, key: string, isDate?: boolean) => any,
         isDate?: boolean,
-        isTime?: boolean,
-        grid?: GridType
+        isTime?: boolean
     ) => any[];
 }
 
@@ -85,8 +73,8 @@ export class DefaultSortingStrategy implements ISortingStrategy {
         isDate: boolean,
         isTime: boolean
     ) {
-        let a = valueResolver.call(this, obj1, key, isDate, isTime);
-        let b = valueResolver.call(this, obj2, key, isDate, isTime);
+        let a = valueResolver(obj1, key, isDate, isTime);
+        let b = valueResolver(obj2, key, isDate, isTime);
         if (ignoreCase) {
             a = a && a.toLowerCase ? a.toLowerCase() : a;
             b = b && b.toLowerCase ? b.toLowerCase() : b;
@@ -97,164 +85,4 @@ export class DefaultSortingStrategy implements ISortingStrategy {
     protected arraySort(data: any[], compareFn?: (arg0: any, arg1: any) => number): any[] {
         return data.sort(compareFn);
     }
-}
-
-export interface IGridSortingStrategy {
-    sort(data: any[], expressions: ISortingExpression[], grid?: GridType): any[];
-}
-
-export class NoopSortingStrategy implements IGridSortingStrategy {
-    private static _instance: NoopSortingStrategy = null;
-
-    private constructor() {  }
-
-    public static instance() {
-        return this._instance || (this._instance = new NoopSortingStrategy());
-    }
-
-    public sort(data: any[]): any[] {
-        return data;
-    }
-}
-
-export class IgxSorting implements IGridSortingStrategy {
-    public sort(data: any[], expressions: ISortingExpression[], grid?: GridType): any[] {
-        return this.sortDataRecursive(data, expressions, 0, grid);
-    }
-
-    protected groupDataRecursive<T>(data: T[], state: IGroupingState, level: number,
-        parent: IGroupByRecord, metadata: IGroupByRecord[], grid: GridType = null,
-        groupsRecords: any[] = [], fullResult: IGroupByResult = { data: [], metadata: [] }): T[] {
-        const expressions = state.expressions;
-        const expansion = state.expansion;
-        let i = 0;
-        let result = [];
-        while (i < data.length) {
-            const column = grid ? grid.getColumnByName(expressions[level].fieldName) : null;
-            const isDate = column?.dataType === DATE_TYPE || column?.dataType === DATE_TIME_TYPE;
-            const isTime = column?.dataType === TIME_TYPE;
-            const group = this.groupedRecordsByExpression(data, i, expressions[level], isDate);
-            const groupRow: IGroupByRecord = {
-                expression: expressions[level],
-                level,
-                records: cloneArray(group),
-                value: this.getFieldValue(group[0], expressions[level].fieldName, isDate, isTime),
-                groupParent: parent,
-                groups: [],
-                height: grid ? grid.renderedRowHeight : null,
-                column
-            };
-            if (parent) {
-                parent.groups.push(groupRow);
-            } else {
-                groupsRecords.push(groupRow);
-            }
-            const hierarchy = getHierarchy(groupRow);
-            const expandState: IGroupByExpandState = expansion.find((s) =>
-                isHierarchyMatch(s.hierarchy || [{ fieldName: groupRow.expression.fieldName, value: groupRow.value }], hierarchy));
-            const expanded = expandState ? expandState.expanded : state.defaultExpanded;
-            let recursiveResult;
-            result.push(groupRow);
-            metadata.push(null);
-            fullResult.data.push(groupRow);
-            fullResult.metadata.push(null);
-            if (level < expressions.length - 1) {
-                recursiveResult = this.groupDataRecursive(group, state, level + 1, groupRow,
-                    expanded ? metadata : [], grid, groupsRecords, fullResult);
-                if (expanded) {
-                    result = result.concat(recursiveResult);
-                }
-            } else {
-                for (const groupItem of group) {
-                    fullResult.metadata.push(groupRow);
-                    fullResult.data.push(groupItem);
-                }
-                if (expanded) {
-                    metadata.push(...fullResult.metadata.slice(fullResult.metadata.length - group.length));
-                    result.push(...fullResult.data.slice(fullResult.data.length - group.length));
-                }
-            }
-            i += group.length;
-        }
-        return result;
-    }
-
-    protected getFieldValue(obj: any, key: string, isDate: boolean = false, isTime: boolean = false): any {
-        let resolvedValue = resolveNestedPath(obj, key);
-        if (isDate || isTime) {
-            const date = parseDate(resolvedValue);
-            resolvedValue = isTime && date ?
-                new Date().setHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()) : date;
-
-        }
-        return resolvedValue;
-    }
-
-    protected sortDataRecursive<T>(data: T[],
-        expressions: ISortingExpression[],
-        expressionIndex: number = 0,
-        grid: GridType): T[] {
-        let i;
-        let j;
-        let gbData;
-        let gbDataLen;
-        const exprsLen = expressions.length;
-        const dataLen = data.length;
-        expressionIndex = expressionIndex || 0;
-        if (expressionIndex >= exprsLen || dataLen <= 1) {
-            return data;
-        }
-        const expr: ISortingExpression = expressions[expressionIndex];
-        if (!expr.strategy) {
-            expr.strategy = DefaultSortingStrategy.instance();
-        }
-        const column = grid?.getColumnByName(expr.fieldName);
-        const isDate = column?.dataType === DATE_TYPE || column?.dataType === DATE_TIME_TYPE;
-        const isTime = column?.dataType === TIME_TYPE;
-        data = expr.strategy.sort(data, expr.fieldName, expr.dir, expr.ignoreCase, this.getFieldValue, isDate, isTime, grid);
-        if (expressionIndex === exprsLen - 1) {
-            return data;
-        }
-        // in case of multiple sorting
-        for (i = 0; i < dataLen; i++) {
-            gbData = this.groupedRecordsByExpression(data, i, expr, isDate);
-            gbDataLen = gbData.length;
-            if (gbDataLen > 1) {
-                gbData = this.sortDataRecursive(gbData, expressions, expressionIndex + 1, grid);
-            }
-            for (j = 0; j < gbDataLen; j++) {
-                data[i + j] = gbData[j];
-            }
-            i += gbDataLen - 1;
-        }
-        return data;
-    }
-
-    private groupedRecordsByExpression(data: any[],
-        index: number,
-        expression: IGroupingExpression,
-        isDate: boolean = false): any[] {
-        const res = [];
-        const key = expression.fieldName;
-        const len = data.length;
-        const groupval = this.getFieldValue(data[index], key, isDate);
-        res.push(data[index]);
-        index++;
-        const comparer = expression.groupingComparer || DefaultSortingStrategy.instance().compareValues;
-        for (let i = index; i < len; i++) {
-            if (comparer(this.getFieldValue(data[i], key, isDate), groupval) === 0) {
-                res.push(data[i]);
-            } else {
-                break;
-            }
-        }
-        return res;
-    }
-}
-
-export class IgxDataRecordSorting extends IgxSorting {
-
-    protected getFieldValue(obj: any, key: string, isDate: boolean = false, isTime: boolean = false): any {
-        return super.getFieldValue(obj.data, key, isDate, isTime);
-    }
-}
+}

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -34,6 +34,9 @@ import { IGridGroupingStrategy, IGridSortingStrategy } from './strategy';
 import { IForOfState, IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
 import { OverlaySettings } from '../../services/overlay/utilities';
 import { IPinningConfig } from '../grid.common';
+import { IPivotConfiguration, IPivotDimension, IPivotValue } from '../pivot-grid/pivot-grid.interface';
+import { IgxColumnComponent } from '../columns/column.component';
+
 
 export const IGX_GRID_BASE = new InjectionToken<GridType>('IgxGridBaseToken');
 export const IGX_GRID_SERVICE_BASE = new InjectionToken<GridServiceType>('IgxGridServiceBaseToken');
@@ -264,6 +267,7 @@ export interface GridType extends IGridDataBindable {
     renderedRowHeight: number;
     pipeTrigger: number;
     summaryPipeTrigger: number;
+    filteringPipeTrigger: number;
     hasColumnLayouts: boolean;
     isLoading: boolean;
 
@@ -502,6 +506,8 @@ export interface GridType extends IGridDataBindable {
     groupingMetadata?: any[];
     selectedCells?: CellType[];
     selectedRows: any[];
+    activeDescendant?: string;
+    isPivot?: boolean;
 
     toggleGroup?(groupRow: IGroupByRecord): void;
     clearGrouping?(field: string): void;
@@ -580,6 +586,7 @@ export interface GridType extends IGridDataBindable {
     toggleAllGroupRows?(): void;
     toggleAll?(): void;
     generateRowPath?(rowId: any): any[];
+    preventHeaderScroll?(args: any): void;
 
 }
 
@@ -611,6 +618,17 @@ export interface HierarchicalGridType extends GridType {
     childLayoutKeys: any[];
 }
 
+export interface PivotGridType extends GridType {
+    pivotConfiguration: IPivotConfiguration;
+    columnDimensions: IPivotDimension[];
+    rowDimensions: IPivotDimension[];
+    values: IPivotValue[];
+    filterDimensions: IPivotDimension[];
+    dimensionDataColumns: IgxColumnComponent[];
+    pivotRowWidths: number;
+    setupColumns(): void;
+    toggleRow(rowID: any): void;
+}
 export interface GridSVGIcon {
     name: string;
     value: string;

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

@@ -21,15 +21,17 @@ import {
     TemplateRef,
     ViewChild,
     ViewChildren,
-    ViewContainerRef
+    ViewContainerRef,
+    Injector,
+    NgModuleRef,
+    ApplicationRef
 } from '@angular/core';
 import { IgxGridBaseDirective } from '../grid-base.directive';
 import { GridBaseAPIService } from '../api.service';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
 import { IgxGridSelectionService } from '../selection/selection.service';
 import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
-import { GridType } from '../common/grid.interface';
-import { IgxGridNavigationService } from '../grid-navigation.service';
+import { GridType, RowType } from '../common/grid.interface';
 import { IgxGridCRUDService } from '../common/crud.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
 import { IPivotConfiguration, IPivotDimension, IPivotKeys, PivotDimensionType } from './pivot-grid.interface';
@@ -47,7 +49,6 @@ import {
 } from '../common/events';
 import { IgxGridRowComponent } from '../grid/grid-row.component';
 import { DropPosition } from '../moving/moving.service';
-import { RowType } from '../common/row.interface';
 import { DimensionValuesFilteringStrategy, NoopPivotDimensionsStrategy } from '../../data-operations/pivot-strategy';
 import { IgxGridExcelStyleFilteringComponent } from '../filtering/excel-style/grid.excel-style-filtering.component';
 import { IgxPivotGridNavigationService } from './pivot-grid-navigation.service';
@@ -56,11 +57,11 @@ import { IgxFlatTransactionFactory, IgxOverlayService, State, Transaction, Trans
 import { DOCUMENT } from '@angular/common';
 import { DisplayDensityToken, IDisplayDensityOptions } from '../../core/displayDensity';
 import { cloneArray, PlatformUtil } from '../../core/utils';
-import { IgxGridTransaction } from '../hierarchical-grid/public_api';
 import { IgxPivotFilteringService } from './pivot-filtering.service';
 import { DataUtil } from '../../data-operations/data-util';
 import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
-import { SortingDirection } from '../../data-operations/sorting-expression.interface';
+import { IgxGridTransaction } from '../common/types';
+import { SortingDirection } from '../../data-operations/sorting-strategy';
 
 let NEXT_ID = 0;
 const MINIMUM_COLUMN_WIDTH = 200;
@@ -415,6 +416,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         resolver: ComponentFactoryResolver,
         differs: IterableDiffers,
         viewRef: ViewContainerRef,
+        private _appRef: ApplicationRef,
+        private _moduleRef: NgModuleRef<any>,
+        private _factoryResolver: ComponentFactoryResolver,
+        private _injector: Injector,
         navigation: IgxPivotGridNavigationService,
         filteringService: IgxFilteringService,
         @Inject(IgxOverlayService) protected overlayService: IgxOverlayService,
@@ -435,6 +440,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             resolver,
             differs,
             viewRef,
+            _appRef,
+            _moduleRef,
+            _factoryResolver,
+            _injector,
             navigation,
             filteringService,
             overlayService,
@@ -621,7 +630,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         const state = this.columnGroupStates.get(col.field);
         const newState = !state;
         this.columnGroupStates.set(col.field, newState);
-        this.toggleGroup(col, newState);
+        this.toggleRowGroup(col, newState);
         this.reflow();
     }
 
@@ -830,7 +839,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return this.calcHeight;
     }
 
-    protected toggleGroup(col: IgxColumnComponent, newState: boolean) {
+    public toggleRowGroup(col: IgxColumnComponent, newState: boolean) {
         if (this.hasMultipleValues) {
             const fieldColumns = col.children.filter(x => !x.columnGroup);
             const groupColumns = col.children.filter(x => x.columnGroup);
@@ -856,6 +865,15 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         }
     }
 
+    /*
+     * @hidden
+     * @internal
+     * Expose setup columns so it can used in pivot-header-row.component
+     */
+    public setupColumns() {
+        super.setupColumns();
+    }
+
     protected resolveToggle(groupColumn: IgxColumnComponent) {
         const hasChildGroup = groupColumn.children.filter(x => x.columnGroup).length > 0;
         if (!groupColumn.hidden && hasChildGroup) {
@@ -922,7 +940,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         }
     }
 
-    protected generateDimensionColumns() {
+    protected generateDimensionColumns(): IgxColumnComponent[] {
         const config = this.pivotConfiguration;
         const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null);
         const leafFields = PivotUtil.flatten(allDimensions, 0).filter(x => !x.childLevel).map(x => x.memberName);

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts

@@ -1,8 +1,8 @@
 import { GridColumnDataType } from '../../data-operations/data-util';
 import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { IPivotDimensionStrategy } from '../../data-operations/pivot-strategy';
+import { SortingDirection } from '../../data-operations/sorting-strategy';
 import { IgxColumnComponent } from '../columns/column.component';
-import { SortingDirection } from '../../data-operations/sorting-expression.interface';
 
 export type PivotAggregation = (members: any[], data: any[]) => any;