Merge branch 'master' into hPopov/refactor-grid-row-selectors-master

Author: Hristo Popov

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

@@ -462,12 +462,14 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
             this.expressionsList[0].expression.searchVal === null &&
             this.expressionsList[0].expression.condition.isUnary === false) {
             this.filteringService.getExpressions(this.column.field).pop();
+
+            this.filter();
         } else {
-            this.expressionsList.forEach((item) => {
-                if (item.expression.searchVal === null && !item.expression.condition.isUnary) {
-                    this.filteringService.removeExpression(this.column.field, this.expressionsList.indexOf(item));
-                }
-            });
+            const condToRemove = this.expressionsList.filter(ex => ex.expression.searchVal === null && !ex.expression.condition.isUnary);
+            if (condToRemove && condToRemove.length > 0) {
+                condToRemove.forEach(c => this.filteringService.removeExpression(this.column.field, this.expressionsList.indexOf(c)));
+                this.filter();
+            }
         }
 
         this.filteringService.isFilterRowVisible = false;

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

@@ -604,6 +604,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this.notifyChanges();
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @Input()
+    public class = '';
+
     /**
      * Gets/Sets the height.
      * @example
@@ -633,6 +640,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     get hostWidth() {
         return this._width || this._hostWidth;
     }
+
     /**
      * Gets/Sets the width of the grid.
      * @example
@@ -1940,7 +1948,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     @HostBinding('attr.class')
     get hostClass(): string {
-        return this.getComponentDensityClass('igx-grid');
+        const classes = [this.getComponentDensityClass('igx-grid')];
+        // The custom classes should be at the end.
+        classes.push(this.class);
+        return classes.join(' ');
     }
 
     get bannerClass(): string {

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

@@ -1969,6 +1969,23 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             const activeFilterIcon = header.nativeElement.querySelector('.igx-excel-filter__icon--filtered');
             expect(activeFilterIcon).toBeDefined('no active filter icon was found');
         }));
+
+        it('Should clear non-unary conditions with null searchVal when close', fakeAsync(() => {
+            GridFunctions.clickFilterCellChip(fix, 'ProductName');
+            fix.detectChanges();
+
+            GridFunctions.openFilterDD(fix.debugElement);
+            const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down__list.igx-toggle'));
+            GridFunctions.selectFilteringCondition('Empty', dropdownList);
+            fix.detectChanges();
+            GridFunctions.openFilterDD(fix.debugElement);
+            GridFunctions.selectFilteringCondition('Contains', dropdownList);
+            fix.detectChanges();
+            GridFunctions.closeFilterRow(fix);
+
+            const headerChip = GridFunctions.getFilterChipsForColumn('ProductName', fix);
+            expect(headerChip.length).toBe(1);
+        }));
     });
 
     describe('Integration scenarios', () => {

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

@@ -190,8 +190,8 @@
         <ng-container *ngTemplateOutlet="template"></ng-container>
         <div class="igx-grid__row-editing-outlet" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>
     </div>
-    <div [style.display]="shouldOverlayLoading ? 'flex' : 'none'" #loadingOverlay>
-        <igx-circular-bar [indeterminate]="true">
+    <div #loadingOverlay>
+        <igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
         </igx-circular-bar>
     </div>
     <span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"

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

@@ -72,8 +72,8 @@
         <igx-grid-filtering-row #filteringRow [style.width.px]='calcWidth' *ngIf="filteringService.isFilterRowVisible"
             [column]="filteringService.filteredColumn"></igx-grid-filtering-row>
     </div>
-    <div [style.display]="shouldOverlayLoading ? 'flex' : 'none'" #loadingOverlay>
-        <igx-circular-bar [indeterminate]="true">
+    <div #loadingOverlay>
+        <igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
         </igx-circular-bar>
     </div>
     <span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"

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

@@ -68,6 +68,13 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
 
     private _filterColumnsPrompt = 'Filter columns list ...';
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @Input()
+    public class = '';
+
     /**
      * Gets the height for the `IgxGridToolbarComponent`'s drop down panels.
      * ```typescript
@@ -211,6 +218,10 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
 
     @HostBinding('attr.class')
     get hostClass(): string {
+        const classes = [this.getComponentDensityClass('igx-grid-toolbar')];
+        // The custom classes should be at the end.
+        classes.push(this.class);
+        return classes.join(' ');
         return this.getComponentDensityClass('igx-grid-toolbar');
     }
 

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

@@ -56,8 +56,8 @@
             [column]="filteringService.filteredColumn"></igx-grid-filtering-row>
     </div>
     <div class="igx-grid__thead-thumb" [hidden]='!hasVerticalSroll()' [style.width.px]="scrollWidth"></div>
-    <div [style.display]="shouldOverlayLoading ? 'flex' : 'none'" #loadingOverlay>
-        <igx-circular-bar [indeterminate]="true">
+    <div #loadingOverlay>
+        <igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
         </igx-circular-bar>
     </div>
     <span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"