Merge branch 'master' into pbozhinov/fixes-chips-not-being-reordered-ivy

Author: ChronosSF

CHANGELOG.md

@@ -17,6 +17,13 @@ All notable changes for each version of this project will be documented in this
     - **Behavioral Change** - Pinning columns is no longer automatically prevented when the pinning area would exceed the size of the grid.
 
 ### New Features
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`:
+    - `sortStrategy` input is added, which can be used to set a global sorting strategy for the entire grid.
+        (**NOTE**: The grid's `sortStrategy` is of different type compared to the column's `sortStrategy`.)
+    - `NoopSortingStrategy` is added, which can be used to disable the default sorting of the grid by assigning its instance to the grid's `sortStrategy` input. (Useful for remote sorting.)
+    - `NoopFilteringStrategy` is added, which can be used to disable the default filtering of the grid by assigning its instance to the grid's `filterStrategy` input. (Useful for remote filtering.)
+    - `sortingExpressionsChange` event emitter is added, which is fired whenever a change to the sorting expressions has occurred (prior to performing the actual sorting).
+    - `filteringExpressionsTreeChange` event emitter is added, which is fired whenever a change to the filtering expressions has occurred (prior to performing the actual filtering).
 - `IgxOverlayService`:
     - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
 - `IgxToggleDirective`:

projects/igniteui-angular/migrations/update-8_2_6/index.spec.ts

@@ -1,5 +1,4 @@
 import * as path from 'path';
-
 // tslint:disable:no-implicit-dependencies
 import { virtualFs } from '@angular-devkit/core';
 import { EmptyTree } from '@angular-devkit/schematics';
@@ -64,4 +63,27 @@ describe('Update 8.2.6', () => {
             );
         done();
     });
+
+    it('should update igx-grid-paginator-theme', done => {
+        appTree.create(
+            '/testSrc/appPrefix/component/test.component.scss',
+            `$dark-grid-paginator: igx-grid-paginator-theme($color: black);
+            @include igx-grid-paginator($dark-grid-paginator);
+            .igx-grid-paginator__pager {
+                @include igx-button($dark-button);
+            }
+            $dark-grid-paginator-schema: extend($_dark-grid-pagination,());`
+        );
+        const tree = schematicRunner.runSchematic('migration-12', {}, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss'))
+        .toEqual(
+            `$dark-grid-paginator: igx-paginator-theme($color: black);
+            @include igx-paginator($dark-grid-paginator);
+            .igx-grid-paginator__pager {
+                @include igx-button($dark-button);
+            }
+            $dark-grid-paginator-schema: extend($_dark-pagination,());`
+        );
+        done();
+    });
 });

projects/igniteui-angular/migrations/update-8_2_6/index.ts

@@ -3,14 +3,64 @@ import {
     SchematicContext,
     Tree
 } from '@angular-devkit/schematics';
+import { getProjects, getWorkspace } from '../common/util';
 import { UpdateChanges } from '../common/UpdateChanges';
 
 const version = '8.2.6';
 
 export default function(): Rule {
     return (host: Tree, context: SchematicContext) => {
+        const themes = ['$_base-dark-grid-pagination',
+            '$_dark-grid-pagination',
+            '$_dark-fluent-grid-pagination',
+            '$_light-grid-pagination',
+            '$_fluent-grid-pagination',
+            '$_round-shape-grid-pagination',
+            '$_default-shape-grid-pagination',
+            '$_square-shape-grid-pagination'];
+
+        const newThemes = ['$_base-dark-pagination',
+        '$_dark-pagination',
+        '$_dark-fluent-pagination',
+        '$_light-pagination',
+        '$_fluent-pagination',
+        '$_round-shape-pagination',
+        '$_default-shape-pagination',
+        '$_square-shape-pagination'];
+
+        let globalStyleExt: string;
+        const config = getWorkspace(host);
+        const projects = getProjects(config);
+
         context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
 
+        if (config.schematics && config.schematics['@schematics/angular:component']) {
+            // updated projects have global prefix rather than per-project:
+            globalStyleExt = config.schematics['@schematics/angular:component'].styleext;
+        }
+
+        for (const proj of projects) {
+            const dir = host.getDir(proj.sourceRoot);
+            let ext = globalStyleExt || 'scss';
+            if (proj.schematics && proj.schematics['@schematics/angular:component']) {
+                ext = proj.schematics['@schematics/angular:component'].styleext || ext;
+            }
+            dir.visit((path, entry) => {
+                if (path.endsWith('.' + ext)) {
+                    let content = entry.content.toString();
+                    if (content.match(/\bigx-grid-paginator\b/g)) {
+                        content = content.replace(/\bigx-grid-paginator\b/g, 'igx-paginator');
+                    }
+                    themes.forEach((n, i) => {
+                        if (content.indexOf(n) !== -1) {
+                            content = content.split(n).join(newThemes[i]);
+                        }
+                    });
+                    host.overwrite(path, content);
+                }
+            });
+        }
+
         const update = new UpdateChanges(__dirname, host, context);
         update.applyChanges();
     };

projects/igniteui-angular/src/lib/data-operations/data-util.ts

@@ -1,6 +1,6 @@
 import { IFilteringState } from './filtering-state.interface';
 
-import { IgxSorting, IgxDataRecordSorting } from './sorting-strategy';
+import { IgxSorting, IgxDataRecordSorting, IGridSortingStrategy } from './sorting-strategy';
 import { IgxGrouping } from './grouping-strategy';
 import { IGroupByResult } from './grouping-result.interface';
 
@@ -30,24 +30,25 @@ export enum DataType {
  * @hidden
  */
 export class DataUtil {
-    public static sort<T>(data: T[], expressions: ISortingExpression[], sorting: IgxSorting = new IgxSorting()): T[] {
+    public static sort<T>(data: T[], expressions: ISortingExpression[], sorting: IGridSortingStrategy = new IgxSorting()): T[] {
         return sorting.sort(data, expressions);
     }
 
     public static treeGridSort(hierarchicalData: ITreeGridRecord[],
         expressions: ISortingExpression[],
+        sorting: IGridSortingStrategy = new IgxDataRecordSorting(),
         parent?: ITreeGridRecord): ITreeGridRecord[] {
         let res: ITreeGridRecord[] = [];
         hierarchicalData.forEach((hr: ITreeGridRecord) => {
             const rec: ITreeGridRecord = DataUtil.cloneTreeGridRecord(hr);
             rec.parent = parent;
             if (rec.children) {
-                rec.children = DataUtil.treeGridSort(rec.children, expressions, rec);
+                rec.children = DataUtil.treeGridSort(rec.children, expressions, sorting, rec);
             }
             res.push(rec);
         });
 
-        res = DataUtil.sort(res, expressions, new IgxDataRecordSorting());
+        res = DataUtil.sort(res, expressions, sorting);
 
         return res;
     }

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

@@ -5,6 +5,20 @@ export interface IFilteringStrategy {
     filter(data: any[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree): any[];
 }
 
+export class NoopFilteringStrategy implements IFilteringStrategy {
+    private static _instance: NoopFilteringStrategy = null;
+
+    private constructor() {  }
+
+    public static instance() {
+        return this._instance || (this._instance = new NoopFilteringStrategy());
+    }
+
+    public filter(data: any[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree): any[] {
+        return data;
+    }
+}
+
 export abstract class BaseFilteringStrategy implements IFilteringStrategy  {
     public abstract filter(data: any[], expressionsTree: IFilteringExpressionsTree,
         advancedExpressionsTree?: IFilteringExpressionsTree): any[];

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

@@ -71,7 +71,25 @@ export class DefaultSortingStrategy implements ISortingStrategy {
     }
 }
 
-export class IgxSorting {
+export interface IGridSortingStrategy {
+    sort(data: any[], expressions: ISortingExpression[]): 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[], expressions: ISortingExpression[]): any[] {
+        return data;
+    }
+}
+
+export class IgxSorting implements IGridSortingStrategy {
     public sort(data: any[], expressions: ISortingExpression[]): any[] {
         return this.sortDataRecursive(data, expressions);
     }

projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts

@@ -201,7 +201,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
     }
 
     /** @hidden  @internal */
-    @HostListener('input', ['$event'])
+    @HostListener('input')
     onInput() {
         this.open();
     }
@@ -217,8 +217,8 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
     }
 
     /** @hidden  @internal */
-    @HostListener('keydown.Tab', ['$event'])
-    @HostListener('keydown.Shift.Tab', [`$event`])
+    @HostListener('keydown.Tab')
+    @HostListener('keydown.Shift.Tab')
     onTab() {
         this.close();
     }

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

@@ -131,6 +131,7 @@ import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from './selection/r
 import { IgxGridToolbarCustomContentDirective } from './toolbar/toolbar.directive';
 import { IgxColumnComponent } from './columns/column.component';
 import { IgxColumnGroupComponent } from './columns/column-group.component';
+import { IGridSortingStrategy } from '../data-operations/sorting-strategy';
 
 const MINIMUM_COLUMN_WIDTH = 136;
 const FILTER_ROW_HEIGHT = 50;
@@ -168,6 +169,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     public _destroyed = false;
     private overlayIDs = [];
     private _filteringStrategy: IFilteringStrategy;
+    private _sortingStrategy: IGridSortingStrategy;
 
     private _hostWidth;
     private _advancedFilteringOverlayId: string;
@@ -327,7 +329,18 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
-     *@hidden
+     * Emitted before filtering is performed.
+     * Returns the filtering expressions tree of the column for which filtering was performed.
+     * ```typescript
+     * filteringExprTreeChange(event: IFilteringExpressionsTree){
+     *     const filteringTree = event;
+     * }
+     * ```
+     * ```html
+     * <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
+     *              (filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid>
+     * ```
+     * @memberof IgxGridBaseDirective
      */
     @Output()
     public filteringExpressionsTreeChange = new EventEmitter<IFilteringExpressionsTree>();
@@ -1078,6 +1091,27 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this._filteringStrategy = classRef;
     }
 
+    /**
+     * Gets the sorting strategy of the grid.
+     * ```typescript
+     *  let sortStrategy = this.grid.sortStrategy
+     * ```
+     */
+    @Input()
+    get sortStrategy(): IGridSortingStrategy {
+        return this._sortingStrategy;
+    }
+
+    /**
+     * Sets the sorting strategy of the grid.
+     * ```html
+     *  <igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-grid>
+     * ```
+     */
+    set sortStrategy(value: IGridSortingStrategy) {
+        this._sortingStrategy = value;
+    }
+
     /**
      * An @Input property that provides a callback for loading unique column values on demand.
      * If this property is provided, the unique values it generates will be used by the Excel Style Filtering.
@@ -2155,7 +2189,16 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
-     *@hidden
+     * Emitted before sorting is performed. Returns the sorting expressions.
+     * ```html
+     * <igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid>
+     * ```
+     * ```typescript
+     * sortingExprChange(event: ISortingExpression[]){
+     *     const sortingExpressions = event;
+     * }
+     * ```
+     * @memberof IgxGridBaseDirective
      */
     @Output()
     public sortingExpressionsChange = new EventEmitter<ISortingExpression[]>();

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -45,6 +45,7 @@ import {
 } from '../../test-utils/grid-samples.spec';
 import { HelperUtils } from '../../test-utils/helper-utils.spec';
 import { GridSelectionMode, FilterMode } from '../common/enums';
+import { NoopFilteringStrategy } from '../../data-operations/filtering-strategy';
 
 const FILTER_UI_ROW = 'igx-grid-filtering-row';
 const FILTER_UI_CELL = 'igx-grid-filtering-cell';
@@ -3422,6 +3423,26 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             expect(chip.componentInstance.selected).toBeTruthy();
     }));
 
+    it('Should disable filtering feature when using NoopFilteringStrategy.', (async () => {
+        // Use the NoopFilteringStrategy.
+        grid.filterStrategy = NoopFilteringStrategy.instance();
+        fix.detectChanges();
+
+        GridFunctions.clickFilterCellChip(fix, 'ProductName');
+        fix.detectChanges();
+
+        // Add first chip.
+        GridFunctions.typeValueInFilterRowInput('some value', fix);
+        await wait(16);
+        GridFunctions.submitFilterRowInput(fix);
+        await wait(100);
+
+        // Verify the grid is not filtered, because of the noop filter strategy.
+        expect(grid.rowList.length).toBe(8);
+        expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
+        expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('NetAdvantage');
+      }));
+
     it('Should close filterRow when changing filterMode from \'quickFilter\' to \'excelStyleFilter\'', (async () => {
         GridFunctions.clickFilterCellChip(fix, 'ProductName');
         fix.detectChanges();

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -107,7 +107,7 @@
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger
-        | gridSort:sortingExpressions:id:pipeTrigger
+        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
         | gridGroupBy:groupingExpressions:groupingExpansionState:groupsExpanded:id:groupsRecords:pipeTrigger
         | gridPaging:page:perPage:id:pipeTrigger
         | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:pipeTrigger:summaryPipeTrigger"

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

@@ -12,6 +12,7 @@ import { GridBaseAPIService } from '../api.service';
 import { IgxGridBaseDirective } from '../grid-base.directive';
 import { GridType } from '../common/grid.interface';
 import { IFilteringStrategy } from '../../data-operations/filtering-strategy';
+import { IGridSortingStrategy } from '../../data-operations/sorting-strategy';
 
 /**
  *@hidden
@@ -27,14 +28,15 @@ export class IgxGridSortingPipe implements PipeTransform {
         this.gridAPI = <IgxGridAPIService>gridAPI;
     }
 
-    public transform(collection: any[], expressions: ISortingExpression[], id: string, pipeTrigger: number): any[] {
+    public transform(collection: any[], expressions: ISortingExpression[], sorting: IGridSortingStrategy,
+                     id: string, pipeTrigger: number): any[] {
         const grid = this.gridAPI.grid;
         let result: any[];
 
         if (!expressions.length) {
             result = collection;
         } else {
-            result = DataUtil.sort(cloneArray(collection), expressions);
+            result = DataUtil.sort(cloneArray(collection), expressions, sorting);
         }
         grid.filteredSortedData = result;