Merge branch '10.1.x' into ddincheva/bugFixs8294-10.1

zdrawku · web-flow · commit 69e2edabe17d · 2020-10-27T12:13:16.000+02:00
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -5,9 +5,9 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ master, 9.1.x, 10.0.x, 10.1.x ]
+    branches: [ master, '[0-9]+.[0-9]+.x' ]
   pull_request:
-    branches: [ master, 9.1.x, 10.0.x, 10.1.x ]
+    branches: [ master, '[0-9]+.[0-9]+.x' ]
 
 jobs:
   build:
diff --git a/angular.json b/angular.json
@@ -69,6 +69,9 @@
                   "with": "src/environments/environment.hmr.ts"
                 }
               ]
+            },
+            "es5": {
+              "tsConfig": "src/tsconfig-es5.app.json"
             }
           }
         },
@@ -85,6 +88,9 @@
               "hmr": true,
               "hmrWarning": false,
               "browserTarget": "igniteui-dev-demos:build:hmr"
+            },
+            "es5": {
+              "browserTarget": "igniteui-dev-demos:build:es5"
             }
           }
         },
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve --open --configuration hmr",
+    "start-es5": "ng serve --configuration es5 -o",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
@@ -401,7 +401,9 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         private _cdr: ChangeDetectorRef,
         private _moduleRef: NgModuleRef<any>,
         private _injector: Injector,
-        private _renderer: Renderer2) { }
+        private _renderer: Renderer2) {
+    }
+
 
     /**
      * Gets the input group template.
@@ -801,7 +803,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         return this._inputGroup || this._inputGroupUserTemplate || null;
     }
 
-     /** @hidden @internal */
+    /** @hidden @internal */
     public get inputDirective(): IgxInputDirective {
         return this._inputDirective || this._inputDirectiveUserTemplates.first || null;
     }
@@ -895,7 +897,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 
         this._inputDirectiveUserTemplates.changes.subscribe(() => {
             this.attachTemplateBlur();
-         });
+        });
         this.attachTemplateBlur();
     }
 
@@ -911,8 +913,8 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
                     this.rawDateString = (res.target as HTMLInputElement).value;
                     this.onBlur(res, false);
                 });
-                // TODO: Refactor custom template handling.
-                // Revise blur handling when custom template is passed
+            // TODO: Refactor custom template handling.
+            // Revise blur handling when custom template is passed
         }
     }
 
@@ -1151,6 +1153,12 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 
     /** @hidden @internal */
     public onInput(event) {
+        /**
+         * Fix for #8165 until refactoring (#6483).
+         * The IgxDateTimeEditor will be used to handle all inputs, i.e. this handler will be removed.
+         * It extends the IgxMaskDirective which contains logic that handles this issue.
+         */
+        if (isIE() && !this._isInEditMode && !this.inputGroup.isFocused) { return; }
         const targetValue = event.target.value;
         const cursorPosition = this._getCursorPosition();
         const checkInput = DatePickerUtil.checkForCompleteDateInput(this.dateFormatParts, targetValue);
diff --git a/projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts b/projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts
@@ -154,7 +154,7 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
     /** @hidden */
     public ngOnInit(): void {
         if (!this.nativeElement.placeholder) {
-          this.renderer.setAttribute(this.nativeElement, 'placeholder', this.maskOptions.format);
+            this.renderer.setAttribute(this.nativeElement, 'placeholder', this.maskOptions.format);
         }
     }
 
@@ -188,7 +188,15 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
     /** @hidden */
     @HostListener('input')
     public onInputChanged(): void {
-        if (isIE() && this._stopPropagation) {
+        /**
+         * '!this._focused' is a fix for #8165
+         * On page load IE triggers input events before focus events and
+         * it does so for every single input on the page.
+         * The mask needs to be prevented from doing anything while this is happening because
+         * the end user will be unable to blur the input.
+         * https://stackoverflow.com/questions/21406138/input-event-triggered-on-internet-explorer-when-placeholder-changed
+         */
+        if (isIE() && (this._stopPropagation || !this._focused)) {
             this._stopPropagation = false;
             return;
         }
diff --git a/projects/igniteui-angular/src/lib/grids/api.service.ts b/projects/igniteui-angular/src/lib/grids/api.service.ts
@@ -443,7 +443,7 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
 
     public get_all_data(includeTransactions = false): any[] {
         const grid = this.grid;
-        let data = grid.data ? grid.data : [];
+        let data = grid && grid.data ? grid.data : [];
         data = includeTransactions ? grid.dataWithAddedInTransactionRows : data;
         return data;
     }
diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions-base.directive.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions-base.directive.ts
@@ -16,12 +16,12 @@ export abstract class IgxColumnActionsBaseDirective {
     /**
      * @hidden @internal
      */
-    public checkAllLabel: string;
+    public abstract get checkAllLabel(): string;
 
     /**
      * @hidden @internal
      */
-    public uncheckAllLabel: string;
+    public abstract get uncheckAllLabel(): string;
 
     /**
      * @hidden @internal
diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-hiding.directive.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-hiding.directive.ts
@@ -18,13 +18,16 @@ export class IgxColumnHidingDirective extends IgxColumnActionsBaseDirective {
     /**
      * @hidden @internal
      */
-    public checkAllLabel = this.columnActions.grid?.resourceStrings.igx_grid_hiding_check_all_label ?? 'Hide All';
+    public get checkAllLabel(): string {
+        return this.columnActions.grid?.resourceStrings.igx_grid_hiding_check_all_label ?? 'Hide All';
+    }
 
     /**
      * @hidden @internal
      */
-    public uncheckAllLabel = this.columnActions.grid?.resourceStrings.igx_grid_hiding_uncheck_all_label ?? 'Show All';
-
+    public get uncheckAllLabel(): string {
+        return this.columnActions.grid?.resourceStrings.igx_grid_hiding_uncheck_all_label ?? 'Show All';
+    }
     /**
      * @hidden @internal
      */
diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-pinning.directive.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-pinning.directive.ts
@@ -18,13 +18,16 @@ export class IgxColumnPinningDirective extends IgxColumnActionsBaseDirective {
     /**
      * @hidden @internal
      */
-    public checkAllLabel = this.columnActions.grid?.resourceStrings.igx_grid_pinning_check_all_label ?? 'Pin All';
+    public get checkAllLabel(): string {
+        return this.columnActions.grid?.resourceStrings.igx_grid_pinning_check_all_label ?? 'Pin All';
+    }
 
     /**
      * @hidden @internal
      */
-    public uncheckAllLabel = this.columnActions.grid?.resourceStrings.igx_grid_pinning_uncheck_all_label ?? 'Unpin All';
-
+    public get uncheckAllLabel(): string {
+        return this.columnActions.grid?.resourceStrings.igx_grid_pinning_uncheck_all_label ?? 'Unpin All';
+    }
     /**
      * @hidden @internal
      */
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts
@@ -125,7 +125,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
             this._columnPinning = this.grid.onColumnPinning.pipe(takeUntil(this.destroy$)).subscribe(() => {
                 requestAnimationFrame(() => {
                     if (!(this.cdr as ViewRef).destroyed) {
-                       this.cdr.detectChanges();
+                        this.cdr.detectChanges();
                     }
                 });
             });
@@ -189,7 +189,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
      */
     @Input()
     get minHeight(): string {
-        if (this._minHeight || this._minHeight === 0)             {
+        if (this._minHeight || this._minHeight === 0) {
             return this._minHeight;
         }
 
@@ -406,20 +406,20 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
     private areExpressionsSelectable () {
         if (this.expressionsList.length === 1 &&
             (this.expressionsList[0].expression.condition.name === 'equals' ||
-             this.expressionsList[0].expression.condition.name === 'true' ||
-             this.expressionsList[0].expression.condition.name === 'false' ||
-             this.expressionsList[0].expression.condition.name === 'empty' ||
-             this.expressionsList[0].expression.condition.name === 'in')) {
+                this.expressionsList[0].expression.condition.name === 'true' ||
+                this.expressionsList[0].expression.condition.name === 'false' ||
+                this.expressionsList[0].expression.condition.name === 'empty' ||
+                this.expressionsList[0].expression.condition.name === 'in')) {
             return true;
         }
 
         const selectableExpressionsCount = this.expressionsList.filter(exp =>
             (exp.beforeOperator === 1 || exp.afterOperator === 1) &&
             (exp.expression.condition.name === 'equals' ||
-             exp.expression.condition.name === 'true' ||
-             exp.expression.condition.name === 'false' ||
-             exp.expression.condition.name === 'empty' ||
-             exp.expression.condition.name === 'in')).length;
+                exp.expression.condition.name === 'true' ||
+                exp.expression.condition.name === 'false' ||
+                exp.expression.condition.name === 'empty' ||
+                exp.expression.condition.name === 'in')).length;
 
         return selectableExpressionsCount === this.expressionsList.length;
     }
@@ -459,7 +459,12 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
         this.loadingStart.emit();
         const expressionsTree: FilteringExpressionsTree = this.getColumnFilterExpressionsTree();
 
+        const prevColumn = this.column;
         this.grid.uniqueColumnValuesStrategy(this.column, expressionsTree, (colVals: any[]) => {
+            if (!this.column || this.column !== prevColumn) {
+                return;
+            }
+
             const columnValues = (this.column.dataType === DataType.Date) ?
                 colVals.map(val => val ? val.toDateString() : val) : colVals;
 
@@ -494,9 +499,9 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
 
     private generateUniqueValues(columnValues: any[]) {
         if (this.column.dataType === DataType.String && this.column.filteringIgnoreCase) {
-            const filteredUniqueValues = columnValues.map(s => s?.toLowerCase())
+            const filteredUniqueValues = columnValues.map(s => s?.toString().toLowerCase())
                 .reduce((map, val, i) => map.get(val) ? map : map.set(val, columnValues[i]),
-                new Map);
+                    new Map);
 
             this.uniqueValues = Array.from(filteredUniqueValues.values());
         } else {
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -6486,6 +6486,37 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         return this.transactions.enabled ? this.dataWithAddedInTransactionRows.length : this.gridAPI.get_all_data().length;
     }
 
+    /**
+     * @hidden @internal
+     */
+    public get template(): TemplateRef<any> {
+        if (this.isLoading && (this.hasZeroResultFilter || this.hasNoData)) {
+            return this.loadingGridTemplate ? this.loadingGridTemplate : this.loadingGridDefaultTemplate;
+        }
+
+        if (this.hasZeroResultFilter) {
+            return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyFilteredGridTemplate;
+        }
+
+        if (this.hasNoData) {
+            return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyGridDefaultTemplate;
+        }
+    }
+
+    /**
+     * @hidden @internal
+     */
+    private get hasZeroResultFilter(): boolean {
+        return this.filteredData && this.filteredData.length === 0;
+    }
+
+    /**
+     * @hidden @internal
+     */
+    private get hasNoData(): boolean {
+        return !this.data || this.dataLength === 0;
+    }
+
     /**
      * @hidden @internal
      */
@@ -6524,7 +6555,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden @internal
      */
     get shouldOverlayLoading(): boolean {
-        return this.isLoading && this.data && this.data.length > 0;
+        return this.isLoading && !this.hasNoData && !this.hasZeroResultFilter;
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts
@@ -213,7 +213,7 @@ export class IgxGridNavigationService {
     }
 
     focusFirstCell(header = true) {
-        if (this.grid.dataView.length && this.activeNode &&
+        if ((header || this.grid.dataView.length) && this.activeNode &&
             (this.activeNode.row === -1 || this.activeNode.row === this.grid.dataView.length ||
             (!header && !this.grid.hasSummarizedColumns))) { return; }
 
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
@@ -4581,6 +4581,17 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             loadingIndicator = GridFunctions.getExcelFilteringLoadingIndicator(fix);
             expect(loadingIndicator).toBeNull('esf loading indicator is visible');
         }));
+
+        it('Should not execute done callback for null column', fakeAsync(() => {
+            const compInstance = fix.componentInstance as IgxGridFilteringESFLoadOnDemandComponent;
+            GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
+            fix.detectChanges();
+
+            expect(() => {
+                GridFunctions.clickExcelFilterIcon(fix, 'Downloads');
+                tick(2000);
+            }).not.toThrowError(/\'dataType\' of null/);
+        }));
     });
 
     describe(null, () => {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
@@ -24,6 +24,8 @@ import { IgxTabsModule, IgxTabsComponent } from '../../tabs/public_api';
 import { GridSelectionMode } from '../common/enums';
 import { registerLocaleData } from '@angular/common';
 import localeDE from '@angular/common/locales/de';
+import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
+import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
 
 describe('IgxGrid Component Tests #grid', () => {
     const MIN_COL_WIDTH = '136px';
@@ -346,7 +348,7 @@ describe('IgxGrid Component Tests #grid', () => {
             grid.filter(columns[0].field, 546000, IgxNumberFilteringOperand.instance().condition('equals'));
             fixture.detectChanges();
             tick(100);
-            expect(gridBody.nativeElement.textContent).toEqual(grid.emptyFilteredGridMessage);
+            expect(gridBody.nativeElement.textContent).not.toEqual(grid.emptyFilteredGridMessage);
             expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(548);
 
             // Clear filter and check if grid's body height is restored based on all loaded rows
@@ -398,7 +400,7 @@ describe('IgxGrid Component Tests #grid', () => {
             grid.filter(columns[0].field, 546000, IgxNumberFilteringOperand.instance().condition('equals'));
             fixture.detectChanges();
             tick(100);
-            expect(gridBody.nativeElement.textContent).toEqual(grid.emptyFilteredGridMessage);
+            expect(gridBody.nativeElement.textContent).not.toEqual(grid.emptyFilteredGridMessage);
 
             // Clear filter and check if grid's body height is restored based on all loaded rows
             grid.clearFilter(columns[0].field);
@@ -482,6 +484,33 @@ describe('IgxGrid Component Tests #grid', () => {
             expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBeGreaterThan(500);
         }));
 
+        it('should render loading indicator when loading is enabled and the grid has empty filtering pre-applied', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxGridTestComponent);
+            const grid = fixture.componentInstance.grid;
+            grid.filteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
+            grid.filteringExpressionsTree.filteringOperands = [
+                {
+                    condition: IgxNumberFilteringOperand.instance().condition('equals'),
+                    fieldName: 'index',
+                    searchVal: 0
+                }
+            ];
+            grid.isLoading = true;
+            fixture.detectChanges();
+            tick(16);
+
+            const gridBody = fixture.debugElement.query(By.css(TBODY_CLASS));
+            const loadingIndicator = gridBody.query(By.css('.igx-grid__loading'));
+            const domGrid = fixture.debugElement.query(By.css('igx-grid')).nativeElement;
+
+            // make sure default width/height are applied when there is no data
+            expect(domGrid.style.height).toBe('100%');
+            expect(domGrid.style.width).toBe('100%');
+
+            expect(loadingIndicator).not.toBeNull();
+            expect(gridBody.nativeElement.textContent).not.toEqual(grid.emptyFilteredGridMessage);
+        }));
+
         it('should allow applying custom loading indicator', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxGridRemoteOnDemandComponent);
             fixture.componentInstance.instance.loadingGridTemplate = fixture.componentInstance.customTemaplate;
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts
diff --git a/src/app/grid-column-actions/custom-action-directive.ts b/src/app/grid-column-actions/custom-action-directive.ts
diff --git a/src/tsconfig-es5.app.json b/src/tsconfig-es5.app.json

Original file line number	Diff line number	Diff line change
`@@ -69,6 +69,9 @@`
`69`	`69`	`"with": "src/environments/environment.hmr.ts"`
`70`	`70`	`}`
`71`	`71`	`]`
	`72`	`+ },`
	`73`	`+ "es5": {`
	`74`	`+ "tsConfig": "src/tsconfig-es5.app.json"`
`72`	`75`	`}`
`73`	`76`	`}`
`74`	`77`	`},`
`@@ -85,6 +88,9 @@`
`85`	`88`	`"hmr": true,`
`86`	`89`	`"hmrWarning": false,`
`87`	`90`	`"browserTarget": "igniteui-dev-demos:build:hmr"`
	`91`	`+ },`
	`92`	`+ "es5": {`
	`93`	`+ "browserTarget": "igniteui-dev-demos:build:es5"`
`88`	`94`	`}`
`89`	`95`	`}`
`90`	`96`	`},`
Original file line number	Diff line number	Diff line change
`@@ -443,7 +443,7 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {`
`443`	`443`
`444`	`444`	`public get_all_data(includeTransactions = false): any[] {`
`445`	`445`	`const grid = this.grid;`
`446`		`- let data = grid.data ? grid.data : [];`
	`446`	`+ let data = grid && grid.data ? grid.data : [];`
`447`	`447`	`data = includeTransactions ? grid.dataWithAddedInTransactionRows : data;`
`448`	`448`	`return data;`
`449`	`449`	`}`