igniteui-angular 13.0.0-alpha.1 → 13.0.0-alpha.2

package/lib/data-operations/data-util.d.ts

@@ -8,7 +8,7 @@ import { Transaction, HierarchicalTransaction } from '../services/transaction/tr
 import { GridType } from '../grids/common/grid.interface';
 import { ITreeGridRecord } from '../grids/tree-grid/tree-grid.interfaces';
 import { ISortingExpression } from './sorting-strategy';
-import { IGridSortingStrategy } from '../grids/common/strategy';
+import { IGridSortingStrategy, IGridGroupingStrategy } from '../grids/common/strategy';
 /**
  * @hidden
  */
@@ -30,7 +30,7 @@ export declare class DataUtil {
     static sort<T>(data: T[], expressions: ISortingExpression[], sorting?: IGridSortingStrategy, grid?: GridType): T[];
     static treeGridSort(hierarchicalData: ITreeGridRecord[], expressions: ISortingExpression[], sorting?: IGridSortingStrategy, parent?: ITreeGridRecord, grid?: GridType): ITreeGridRecord[];
     static cloneTreeGridRecord(hierarchicalRecord: ITreeGridRecord): ITreeGridRecord;
-    static group<T>(data: T[], state: IGroupingState, grid?: GridType, groupsRecords?: any[], fullResult?: IGroupByResult): IGroupByResult;
+    static group<T>(data: T[], state: IGroupingState, grouping?: IGridGroupingStrategy, grid?: GridType, groupsRecords?: any[], fullResult?: IGroupByResult): IGroupByResult;
     static page<T>(data: T[], state: IPagingState, dataLength?: number): T[];
     static filter<T>(data: T[], state: IFilteringState, grid?: GridType): T[];
     static correctPagingState(state: IPagingState, length: number): void;

package/lib/grids/common/grid.interface.d.ts

@@ -22,7 +22,7 @@ import { IgxFilteringOperand } from '../../data-operations/filtering-condition';
 import { IColumnPipeArgs, MRLResizeColumnInfo } from '../columns/interfaces';
 import { IgxSummaryResult } from '../summaries/grid-summary';
 import { ISortingExpression, ISortingStrategy } from '../../data-operations/sorting-strategy';
-import { IGridSortingStrategy } from './strategy';
+import { IGridGroupingStrategy, IGridSortingStrategy } from './strategy';
 import { IForOfState } from '../../directives/for-of/for_of.directive';
 import { OverlaySettings } from '../../services/overlay/utilities';
 export declare const IGX_GRID_BASE: InjectionToken<GridType>;
@@ -413,6 +413,7 @@ export interface GridType extends IGridDataBindable {
     rendered$: Observable<boolean>;
     resizeNotify: Subject<void>;
     sortStrategy: IGridSortingStrategy;
+    groupStrategy?: IGridGroupingStrategy;
     filteringLogic: FilteringLogic;
     filterStrategy: IFilteringStrategy;
     allowAdvancedFiltering: boolean;

package/lib/grids/common/strategy.d.ts

@@ -6,6 +6,9 @@ import { GridType } from './grid.interface';
 export interface IGridSortingStrategy {
     sort(data: any[], expressions: ISortingExpression[], grid?: GridType): any[];
 }
+export interface IGridGroupingStrategy extends IGridSortingStrategy {
+    groupBy(data: any[], state: IGroupingState, grid?: any, groupsRecords?: any[], fullResult?: IGroupByResult): IGroupByResult;
+}
 export declare class IgxSorting implements IGridSortingStrategy {
     sort(data: any[], expressions: ISortingExpression[], grid?: GridType): any[];
     protected groupDataRecursive(data: any[], state: IGroupingState, level: number, parent: IGroupByRecord, metadata: IGroupByRecord[], grid?: GridType, groupsRecords?: any[], fullResult?: IGroupByResult): any[];
@@ -13,6 +16,9 @@ export declare class IgxSorting implements IGridSortingStrategy {
     private groupedRecordsByExpression;
     private sortDataRecursive;
 }
+export declare class IgxGrouping extends IgxSorting implements IGridGroupingStrategy {
+    groupBy(data: any[], state: IGroupingState, grid?: any, groupsRecords?: any[], fullResult?: IGroupByResult): IGroupByResult;
+}
 export declare class NoopSortingStrategy implements IGridSortingStrategy {
     private static _instance;
     private constructor();

package/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.d.ts

@@ -12,6 +12,7 @@ import { PlatformUtil } from '../../../core/utils';
 import { IgxDatePickerComponent } from '../../../date-picker/date-picker.component';
 import { IgxTimePickerComponent } from '../../../time-picker/time-picker.component';
 import { ColumnType, GridType } from '../../common/grid.interface';
+import { DisplayDensity } from '../../../core/displayDensity';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -204,7 +205,7 @@ export declare class IgxAdvancedFilteringDialogComponent implements AfterViewIni
     /**
      * @hidden @internal
      */
-    get displayDensity(): import("igniteui-angular").DisplayDensity;
+    get displayDensity(): DisplayDensity;
     /**
      * @hidden @internal
      */

package/lib/grids/grid/grid.component.d.ts

@@ -11,6 +11,7 @@ import { CellType, GridType, RowType } from '../common/grid.interface';
 import { IgxGroupByRowSelectorDirective } from '../selection/row-selectors';
 import { IgxGridGroupByAreaComponent } from '../grouping/grid-group-by-area.component';
 import { ISortingExpression } from '../../data-operations/sorting-strategy';
+import { IGridGroupingStrategy } from '../common/strategy';
 import * as i0 from "@angular/core";
 export interface IGroupingDoneEventArgs extends IBaseEventArgs {
     expressions: Array<ISortingExpression> | ISortingExpression;
@@ -180,6 +181,10 @@ export declare class IgxGridComponent extends IgxGridBaseDirective implements Gr
      * @hidden
      */
     protected _groupAreaTemplate: TemplateRef<any>;
+    /**
+     * @hidden
+     */
+    protected _groupStrategy: IGridGroupingStrategy;
     /**
      * @hidden
      */
@@ -268,6 +273,18 @@ export declare class IgxGridComponent extends IgxGridBaseDirective implements Gr
      */
     get hideGroupedColumns(): boolean;
     set hideGroupedColumns(value: boolean);
+    /**
+     * Gets/Sets the grouping strategy of the grid.
+     *
+     * @remarks The default IgxGrouping extends from IgxSorting and a custom one can be used as a `sortStrategy` as well.
+     *
+     * @example
+     * ```html
+     *  <igx-grid #grid [data]="localData" [groupStrategy]="groupStrategy"></igx-grid>
+     * ```
+     */
+    get groupStrategy(): IGridGroupingStrategy;
+    set groupStrategy(value: IGridGroupingStrategy);
     /**
      * Gets/Sets the message displayed inside the GroupBy drop area where columns can be dragged on.
      *
@@ -642,5 +659,5 @@ export declare class IgxGridComponent extends IgxGridBaseDirective implements Gr
     private checkIfNoColumnField;
     private _setGroupColsVisibility;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxGridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IgxGridComponent, "igx-grid", never, { "groupsExpanded": "groupsExpanded"; "dropAreaTemplate": "dropAreaTemplate"; "id": "id"; "data": "data"; "groupingExpressions": "groupingExpressions"; "groupingExpansionState": "groupingExpansionState"; "hideGroupedColumns": "hideGroupedColumns"; "dropAreaMessage": "dropAreaMessage"; "showGroupArea": "showGroupArea"; }, { "dataPreLoad": "dataPreLoad"; "groupingExpressionsChange": "groupingExpressionsChange"; "groupingExpansionStateChange": "groupingExpansionStateChange"; "onGroupingDone": "onGroupingDone"; }, ["detailTemplate", "groupTemplate", "gridDetailsTemplate", "groupByRowSelectorsTemplates"], ["igx-grid-toolbar", "igx-grid-footer", "igx-paginator"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IgxGridComponent, "igx-grid", never, { "groupsExpanded": "groupsExpanded"; "dropAreaTemplate": "dropAreaTemplate"; "id": "id"; "data": "data"; "groupingExpressions": "groupingExpressions"; "groupingExpansionState": "groupingExpansionState"; "hideGroupedColumns": "hideGroupedColumns"; "groupStrategy": "groupStrategy"; "dropAreaMessage": "dropAreaMessage"; "showGroupArea": "showGroupArea"; }, { "dataPreLoad": "dataPreLoad"; "groupingExpressionsChange": "groupingExpressionsChange"; "groupingExpansionStateChange": "groupingExpansionStateChange"; "onGroupingDone": "onGroupingDone"; }, ["detailTemplate", "groupTemplate", "gridDetailsTemplate", "groupByRowSelectorsTemplates"], ["igx-grid-toolbar", "igx-grid-footer", "igx-paginator"]>;
 }

package/lib/grids/grid/grid.pipes.d.ts

@@ -6,7 +6,7 @@ import { IGroupingExpression } from '../../data-operations/grouping-expression.i
 import { GridType } from '../common/grid.interface';
 import { IFilteringStrategy } from '../../data-operations/filtering-strategy';
 import { ISortingExpression } from '../../data-operations/sorting-strategy';
-import { IGridSortingStrategy } from '../common/strategy';
+import { IGridSortingStrategy, IGridGroupingStrategy } from '../common/strategy';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -24,7 +24,7 @@ export declare class IgxGridSortingPipe implements PipeTransform {
 export declare class IgxGridGroupingPipe implements PipeTransform {
     private grid;
     constructor(grid: GridType);
-    transform(collection: any[], expression: IGroupingExpression | IGroupingExpression[], expansion: IGroupByExpandState | IGroupByExpandState[], defaultExpanded: boolean, id: string, groupsRecords: any[], _pipeTrigger: number): IGroupByResult;
+    transform(collection: any[], expression: IGroupingExpression | IGroupingExpression[], expansion: IGroupByExpandState | IGroupByExpandState[], groupingStrategy: IGridGroupingStrategy, defaultExpanded: boolean, id: string, groupsRecords: any[], _pipeTrigger: number): IGroupByResult;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxGridGroupingPipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<IgxGridGroupingPipe, "gridGroupBy">;
 }

package/lib/grids/grid-base.directive.d.ts

@@ -49,6 +49,8 @@ import { StateUpdateEvent } from '../services/transaction/transaction';
 import { ISortingExpression } from '../data-operations/sorting-strategy';
 import { IGridSortingStrategy } from './common/strategy';
 import { IgxGridExcelStyleFilteringComponent } from './filtering/excel-style/grid.excel-style-filtering.component';
+import { IgxGridHeaderComponent } from './headers/grid-header.component';
+import { IgxGridFilteringRowComponent } from './filtering/base/grid-filtering-row.component';
 import * as i0 from "@angular/core";
 export declare abstract class IgxGridBaseDirective extends DisplayDensityBase implements GridType, OnInit, DoCheck, OnDestroy, AfterContentInit, AfterViewInit {
     selectionService: IgxGridSelectionService;
@@ -847,7 +849,7 @@ export declare abstract class IgxGridBaseDirective extends DisplayDensityBase im
     get headerSelectorContainer(): ElementRef<HTMLElement>;
     get headerDragContainer(): ElementRef<HTMLElement>;
     get headerGroupContainer(): ElementRef<HTMLElement>;
-    get filteringRow(): import("igniteui-angular").θIgxGridFilteringRowComponent;
+    get filteringRow(): IgxGridFilteringRowComponent;
     /** @hidden @internal */
     theadRow: IgxGridHeaderRowComponent;
     /** @hidden @internal */
@@ -1333,7 +1335,7 @@ export declare abstract class IgxGridBaseDirective extends DisplayDensityBase im
      * const headers = this.grid.headerCellList;
      * ```
      */
-    get headerCellList(): import("igniteui-angular").IgxGridHeaderComponent[];
+    get headerCellList(): IgxGridHeaderComponent[];
     /**
      * A list of all `IgxGridFilteringCellComponent`.
      *

package/lib/grids/headers/grid-header-row.component.d.ts

@@ -2,8 +2,10 @@ import { ChangeDetectorRef, DoCheck, ElementRef, QueryList, TemplateRef } from '
 import { DisplayDensity } from '../../core/displayDensity';
 import { IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
 import { ColumnType, GridType } from '../common/grid.interface';
+import { IgxGridFilteringCellComponent } from '../filtering/base/grid-filtering-cell.component';
 import { IgxGridFilteringRowComponent } from '../filtering/base/grid-filtering-row.component';
 import { IgxGridHeaderGroupComponent } from './grid-header-group.component';
+import { IgxGridHeaderComponent } from './grid-header.component';
 import * as i0 from "@angular/core";
 export interface IgxGridRowSelectorsTemplateContext {
     $implicit: {
@@ -62,9 +64,9 @@ export declare class IgxGridHeaderRowComponent implements DoCheck {
      */
     get groups(): IgxGridHeaderGroupComponent[];
     /** Header components in the header row. */
-    get headers(): import("igniteui-angular").IgxGridHeaderComponent[];
+    get headers(): IgxGridHeaderComponent[];
     /** Filtering cell components in the header row. */
-    get filters(): import("igniteui-angular").θIgxGridFilteringCellComponent[];
+    get filters(): IgxGridFilteringCellComponent[];
     /** The virtualized part of the header row containing the unpinned header groups. */
     headerContainer: IgxGridForOfDirective<IgxGridHeaderGroupComponent>;
     headerDragContainer: ElementRef<HTMLElement>;

package/lib/grids/hierarchical-grid/hierarchical-grid.component.d.ts

@@ -5,6 +5,7 @@ import { IgxHierarchicalGridBaseDirective } from './hierarchical-grid-base.direc
 import { CellType, GridServiceType, GridType, RowType } from '../common/grid.interface';
 import { IgxGridToolbarTemplateContext } from '../toolbar/common';
 import { IgxPaginatorComponent } from '../../paginator/paginator.component';
+import { IgxOverlayOutletDirective } from '../../directives/toggle/toggle.directive';
 import * as i0 from "@angular/core";
 export interface HierarchicalStateRecord {
     rowID: any;
@@ -281,7 +282,7 @@ export declare class IgxHierarchicalGridComponent extends IgxHierarchicalGridBas
      * @hidden
      */
     ngAfterViewInit(): void;
-    get outletDirective(): import("igniteui-angular").IgxOverlayOutletDirective;
+    get outletDirective(): IgxOverlayOutletDirective;
     /**
      * @hidden
      */

package/lib/grids/public_api.d.ts

@@ -5,6 +5,7 @@ export * from './columns/interfaces';
 export * from './columns/column.module';
 export * from './headers/headers.module';
 export * from './common/events';
+export * from './common/strategy';
 export * from './filtering/base/filtering.module';
 export { IgxGridExcelStyleFilteringModule } from './filtering/excel-style/grid.excel-style-filtering.module';
 export { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component';

package/lib/stepper/stepper.common.d.ts

@@ -102,27 +102,27 @@ export interface IStepChangedEventArgs extends IBaseEventArgs {
     owner: IgxStepper;
 }
 export declare const IgxStepperOrientation: {
-    Horizontal: string;
-    Vertical: string;
+    readonly Horizontal: "horizontal";
+    readonly Vertical: "vertical";
 };
 export declare type IgxStepperOrientation = (typeof IgxStepperOrientation)[keyof typeof IgxStepperOrientation];
 export declare const IgxStepType: {
-    Indicator: string;
-    Title: string;
-    Full: string;
+    readonly Indicator: "indicator";
+    readonly Title: "title";
+    readonly Full: "full";
 };
 export declare type IgxStepType = (typeof IgxStepType)[keyof typeof IgxStepType];
 export declare const IgxStepperTitlePosition: {
-    Bottom: string;
-    Top: string;
-    End: string;
-    Start: string;
+    readonly Bottom: "bottom";
+    readonly Top: "top";
+    readonly End: "end";
+    readonly Start: "start";
 };
 export declare type IgxStepperTitlePosition = (typeof IgxStepperTitlePosition)[keyof typeof IgxStepperTitlePosition];
 export declare const VerticalAnimationType: {
-    Grow: string;
-    Fade: string;
-    None: string;
+    readonly Grow: "grow";
+    readonly Fade: "fade";
+    readonly None: "none";
 };
 export declare type VerticalAnimationType = (typeof VerticalAnimationType)[keyof typeof VerticalAnimationType];
 export declare const IGX_STEPPER_COMPONENT: InjectionToken<IgxStepperComponent>;

package/lib/toast/toast.component.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, OnInit } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { IgxNavigationService } from '../core/navigation';
 import { IgxOverlayService, PositionSettings } from '../services/public_api';
 import { IgxNotificationsDirective } from '../directives/notification/notifications.directive';
@@ -33,7 +33,7 @@ export declare type IgxToastPosition = (typeof IgxToastPosition)[keyof typeof Ig
  * </igx-toast>
  * ```
  */
-export declare class IgxToastComponent extends IgxNotificationsDirective implements OnInit {
+export declare class IgxToastComponent extends IgxNotificationsDirective implements OnInit, OnChanges {
     private _element;
     /**
      * @hidden
@@ -79,7 +79,8 @@ export declare class IgxToastComponent extends IgxNotificationsDirective impleme
      *
      * @memberof IgxToastComponent
      */
-    position: IgxToastPosition;
+    get position(): IgxToastPosition;
+    set position(position: IgxToastPosition);
     /**
      * Get the position and animation settings used by the toast.
      * ```typescript
@@ -109,6 +110,7 @@ export declare class IgxToastComponent extends IgxNotificationsDirective impleme
      * ```
      */
     set positionSettings(settings: PositionSettings);
+    private _position;
     private _positionSettings;
     /**
      * Gets the nativeElement of the toast.
@@ -128,7 +130,7 @@ export declare class IgxToastComponent extends IgxNotificationsDirective impleme
      * this.toast.open();
      * ```
      */
-    open(message?: string): void;
+    open(message?: string, settings?: PositionSettings): void;
     /**
      * Opens or closes the toast, depending on its current state.
      *
@@ -141,6 +143,8 @@ export declare class IgxToastComponent extends IgxNotificationsDirective impleme
      * @hidden
      */
     ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private calculatePosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxToastComponent, [null, null, { optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<IgxToastComponent, "igx-toast", never, { "id": "id"; "role": "role"; "position": "position"; "positionSettings": "positionSettings"; }, { "isVisibleChange": "isVisibleChange"; }, never, ["*"]>;
 }

package/migrations/update-13_0_0/index.js

@@ -1,9 +1,56 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const UpdateChanges_1 = require("../common/UpdateChanges");
+const util_1 = require("../common/util");
 const version = '13.0.0';
 exports.default = () => (host, context) => {
+    var _a;
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
     const update = new UpdateChanges_1.UpdateChanges(__dirname, host, context);
+    const GRIDS = ['IgxGridComponent', 'IgxTreeGridComponent', 'IgxHierarchicalGridComponent'];
+    const TAGS = ['igx-grid', 'igx-tree-grid', 'igx-hierarchical-grid'];
+    const tsFiles = update.tsFiles;
+    for (const path of update.templateFiles) {
+        (0, util_1.findElementNodes)((0, util_1.parseFile)(host, path), TAGS)
+            .map(node => (0, util_1.getSourceOffset)(node))
+            .forEach(offset => {
+            const { file, node } = offset;
+            if (file.content.includes('columns')) {
+                const gridRef = node.attrs.find(e => e.name.includes('#')).name.substring(1);
+                const content = file.content.split(gridRef + '.columns').join(gridRef + '.columnsCollection');
+                host.overwrite(path, content);
+            }
+        });
+    }
+    const getIndicesOf = (searchStr, str) => {
+        if (searchStr.length === 0) {
+            return [];
+        }
+        let startIndex = 0;
+        let index = 0;
+        const indexes = [];
+        while ((index = str.indexOf(searchStr, startIndex)) > -1) {
+            indexes.push(index);
+            startIndex = index + searchStr.length;
+        }
+        return indexes;
+    };
+    for (const path of tsFiles) {
+        let content = (_a = host.read(path)) === null || _a === void 0 ? void 0 : _a.toString();
+        GRIDS.forEach(grid => {
+            if (content.indexOf(grid) > -1) {
+                const indexes = getIndicesOf('@ViewChild', content);
+                indexes.forEach(index => {
+                    const viewChildRef = content.substring(index, content.indexOf(';', index)).replace(/\s\s+/g, ' ');
+                    if (viewChildRef.includes(grid)) {
+                        const gridDeclaration = viewChildRef.substring(viewChildRef.indexOf(')') + 1).replace(/\:/g, '').trim();
+                        const gridName = gridDeclaration.split(' ')[1];
+                        content = content.split(gridName + '.columns').join(gridName + '.columnsCollection');
+                        host.overwrite(path, content);
+                    }
+                });
+            }
+        });
+    }
     update.applyChanges();
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "13.0.0-alpha.1",
+  "version": "13.0.0-alpha.2",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -76,10 +76,10 @@
     "@igniteui/material-icons-extended": "^2.10.0"
   },
   "peerDependencies": {
-    "@angular/common": "^13.0.0-rc.2",
-    "@angular/core": "^13.0.0-rc.2",
-    "@angular/animations": "^13.0.0-rc.2",
-    "@angular/forms": "^13.0.0-rc.2"
+    "@angular/common": "^13.0.0-rc.3",
+    "@angular/core": "^13.0.0-rc.3",
+    "@angular/animations": "^13.0.0-rc.3",
+    "@angular/forms": "^13.0.0-rc.3"
   },
   "igxDevDependencies": {
     "@igniteui/angular-schematics": "~12.2.820"

package/public_api.d.ts

@@ -36,7 +36,6 @@ export * from './lib/data-operations/groupby-expand-state.interface';
 export * from './lib/data-operations/groupby-record.interface';
 export * from './lib/data-operations/groupby-state.interface';
 export * from './lib/data-operations/grouping-expression.interface';
-export * from './lib/data-operations/grouping-strategy';
 export * from './lib/data-operations/sorting-strategy';
 export * from './lib/data-operations/paging-state.interface';
 export * from './lib/data-operations/data-util';