Merge branch '10.2.x' into simeonoff/dock-mgr-drop-shadow

Author: simeonoff

angular.json

@@ -90,6 +90,8 @@
               "browserTarget": "igniteui-dev-demos:build:hmr"
             },
             "es5": {
+              "hmr": true,
+              "hmrWarning": false,
               "browserTarget": "igniteui-dev-demos:build:es5"
             }
           }

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve --open --configuration hmr",
-    "start-es5": "ng serve --configuration es5 -o",
+    "start:es5": "ng serve --open --configuration es5",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.html

@@ -1,7 +1,7 @@
 <ng-container *ngIf="!asMenuItem">
 
     <ng-container *ngIf="!asMenuItem">
-        <button igxButton="icon" igxRipple (click)="handleClick($event)">
+        <button igxButton="icon" igxRipple (click)="handleClick($event)" (mousedown)="preventEvent($event)">
             <igx-icon *ngIf="iconSet" [fontSet]="iconSet" [name]="iconName">{{iconName}}</igx-icon>
             <igx-icon *ngIf="!iconSet" >{{iconName}}</igx-icon>
         </button>
@@ -14,4 +14,4 @@
             <label *ngIf='asMenuItem' igxLabel>{{labelText}}</label>
         </div>
     </ng-container>
-</ng-container>
+</ng-container>

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.ts

@@ -69,4 +69,14 @@ export class IgxGridActionButtonComponent {
     public handleClick(event) {
        this.onActionClick.emit(event);
     }
+
+    /**
+     * @hidden @internal
+     */
+    public preventEvent(event) {
+        if (event) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
 }

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -471,7 +471,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;
     }

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

@@ -6767,6 +6767,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
      */
@@ -6805,7 +6836,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;
     }
 
     /**

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', () => {
@@ -347,7 +349,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
@@ -399,7 +401,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);
@@ -483,6 +485,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;

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

@@ -828,24 +828,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         }
     }
 
-
-    /**
-     * @hidden @internal
-     */
-    public get template(): TemplateRef<any> {
-        if (this.filteredData && this.filteredData.length === 0) {
-            return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyFilteredGridTemplate;
-        }
-
-        if (this.isLoading && (!this.data || this.dataLength === 0)) {
-            return this.loadingGridTemplate ? this.loadingGridTemplate : this.loadingGridDefaultTemplate;
-        }
-
-        if (this.dataLength === 0) {
-            return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyGridDefaultTemplate;
-        }
-    }
-
     /**
      * @hidden @internal
      */

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

@@ -485,23 +485,6 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         });
     }
 
-    /**
-     * @hidden
-     */
-    public get template(): TemplateRef<any> {
-        if (this.filteredData && this.filteredData.length === 0) {
-            return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyFilteredGridTemplate;
-        }
-
-        if (this.isLoading && (!this.data || this.dataLength === 0)) {
-            return this.loadingGridTemplate ? this.loadingGridTemplate : this.loadingGridDefaultTemplate;
-        }
-
-        if (this.dataLength === 0) {
-            return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyGridDefaultTemplate;
-        }
-    }
-
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/grids/row.directive.ts

@@ -113,7 +113,7 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
     }
 
     get cellHeight() {
-        return this.addRow ? null : this.grid.rowHeight || 32;
+        return this.addRow && !this.inEditMode ? null : this.grid.rowHeight || 32;
     }
 
     /**