Merge branch '10.2.x' into grid-cell-edit-styling

Author: zdrawku

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/filtering/excel-style/grid.excel-style-filtering.component.ts

@@ -126,7 +126,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();
                     }
                 });
             });
@@ -190,7 +190,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;
         }
 
@@ -413,20 +413,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;
     }
@@ -466,7 +466,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;
 
@@ -503,7 +508,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
         if (this.column.dataType === DataType.String && this.column.filteringIgnoreCase) {
             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 {
@@ -591,9 +596,9 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
                         filterListItem.isFiltered = true;
                         this.selectAllIndeterminate = true;
                     } else if (element === false && this.expressionsList.find(exp => exp.expression.condition.name === 'false' )) {
-                            filterListItem.isSelected = true;
-                            filterListItem.isFiltered = true;
-                            this.selectAllIndeterminate = true;
+                        filterListItem.isSelected = true;
+                        filterListItem.isFiltered = true;
+                        this.selectAllIndeterminate = true;
                     } else {
                         filterListItem.isSelected = false;
                         filterListItem.isFiltered = false;

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

@@ -4855,6 +4855,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, () => {

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;
     }
 
     /**

src/polyfills.ts

@@ -21,6 +21,8 @@
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js';  // Run `npm install --save classlist.js`.
 
+import 'core-js/es7/array'; // for Array.includes()
+
 /**
  * Web Animations `@angular/platform-browser/animations`
  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.

src/styles/igniteui-theme.scss

@@ -18,7 +18,7 @@ body {
 }
 
 @include igx-core($direction: ltr);
-@include igx-theme($palette: $palette, $schema: $schema);
+@include igx-theme($palette: $palette, $schema: $schema, $legacy-support: true);
 @include igx-typography($type-scale: $typography);
 
 @include igx-palette-vars($palette, $contrast: true);