Merge branch 'master' into tzhelev/noop-strategies

Author: tachojelev

CHANGELOG.md

@@ -25,9 +25,9 @@ All notable changes for each version of this project will be documented in this
     - `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 repositions the content in the horizontal and vertical directions.
+    - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
 - `IgxToggleDirective`:
-    - `setOffset` method added. It repositions the content in the horizontal and vertical directions.
+    - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
 
 ## 8.2.6
 

projects/igniteui-angular/src/lib/directives/toggle/README.md

@@ -49,7 +49,7 @@ handlers when the toggle is opened and respectively closed.
 | `close` | --- | `void` | Closes the toggle. |
 | `toggle` | overlaySettings?: `OverlaySettings` | `void` | Closes the toggle. |
 | `reposition` | --- | `void` | Repositions the toggle. |
-| `setOffset`  | Repositions the content in the horizontal and/or vertical directions. |deltaX, deltaY |
+| `setOffset`  | Offsets the content along the corresponding axis by the provided amount. |deltaX, deltaY |
 
 
 

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

@@ -277,7 +277,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
     }
 
     /**
-     * Repositions the content in the horizontal and/or vertical directions.
+     * Offsets the content along the corresponding axis by the provided amount
      */
     setOffset(deltaX: number, deltaY: number) {
         this.overlayService.setOffset(this._overlayId, deltaX, deltaY);

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

@@ -477,7 +477,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
 
         this.filteringService.filteredColumn = null;
         this.filteringService.selectedExpression = null;
-        this.cdr.detectChanges();
 
         this.chipAreaScrollOffset = 0;
         this.transform(this.chipAreaScrollOffset);

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

@@ -1009,6 +1009,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     set filterMode(value) {
         this._filterMode = value;
+
+        if (this.filteringService.isFilterRowVisible) {
+            this.filteringRow.close();
+        }
+        this.notifyChanges(true);
     }
 
     /**
@@ -4388,6 +4393,17 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         return pagingHeight;
     }
 
+    /**
+     * @hidden
+     */
+    protected getFilterCellHeight(): number {
+        const headerGroupNativeEl = (this.headerGroupsList.length !== 0) ?
+                                        this.headerGroupsList[0].element.nativeElement : null;
+        const filterCellNativeEl = (headerGroupNativeEl) ?
+                                    headerGroupNativeEl.querySelector('igx-grid-filtering-cell') : null;
+        return (filterCellNativeEl) ? filterCellNativeEl.offsetHeight : 0;
+    }
+
     /**
      * @hidden
      */
@@ -4396,12 +4412,14 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             return null;
         }
 
-
+        const actualTheadRow = (!this.allowFiltering || (this.allowFiltering && this.filterMode !== FilterMode.quickFilter)) ?
+                                 this.theadRow.nativeElement.offsetHeight - this.getFilterCellHeight() :
+                                 this.theadRow.nativeElement.offsetHeight;
         const footerHeight = this.summariesHeight || this.tfoot.nativeElement.offsetHeight - this.tfoot.nativeElement.clientHeight;
         const toolbarHeight = this.getToolbarHeight();
         const pagingHeight = this.getPagingHeight();
         const groupAreaHeight = this.getGroupAreaHeight();
-        const renderedHeight = toolbarHeight + this.theadRow.nativeElement.offsetHeight +
+        const renderedHeight = toolbarHeight + actualTheadRow +
             footerHeight + pagingHeight + groupAreaHeight +
             this.scr.nativeElement.clientHeight;
 

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

@@ -3441,6 +3441,34 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
         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();
+
+        // Add a condition chip without submitting it.
+        GridFunctions.typeValueInFilterRowInput('a', fix);
+        await wait(16);
+
+        // Change filterMode to 'excelStyleFilter`
+        grid.filterMode = FilterMode.excelStyleFilter;
+        fix.detectChanges();
+
+        // Verify the the filterRow is closed.
+        const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
+        expect(filterUIRow).toBeNull('filterRow is visible');
+
+        // Verify the ESF icons are visible.
+        const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
+        const thead = gridNativeElement.querySelector('.igx-grid__thead-wrapper');
+        const filterIcons = thead.querySelectorAll('.igx-excel-filter__icon');
+        expect(filterIcons.length).toEqual(4, 'incorrect esf filter icons count');
+
+        // Verify the condition was submitted.
+        const header = GridFunctions.getColumnHeader('ProductName', fix);
+        const activeFilterIcon = header.nativeElement.querySelector('.igx-excel-filter__icon--filtered');
+        expect(activeFilterIcon).toBeDefined('no active filter icon was found');
     }));
 });
     describe(null, () => {
@@ -3650,6 +3678,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
         let fix, grid;
         beforeEach(fakeAsync(() => {
             fix = TestBed.createComponent(IgxGridFilteringComponent);
+            fix.detectChanges();
             grid = fix.componentInstance.grid;
             grid.filterMode = FilterMode.excelStyleFilter;
             fix.detectChanges();

projects/igniteui-angular/src/lib/services/overlay/README.md

@@ -96,7 +96,7 @@ this.overlay.show(component, overlaySettings);
 |hide             | Remove the provided native element of for the component with provided id        |id               |
 |hideAll          | Remove the all native elements and hides the overlay                            |-                |
 |reposition       | Repositions the native element of the component with provided id                |id               |
-|setOffset        | Repositions the content in the horizontal and/or vertical directions.          |id, deltaX, deltaY |
+|setOffset        | Offsets the content along the corresponding axis by the provided amount       |id, deltaX, deltaY |
 
 ###### IPositionStrategy
 

projects/igniteui-angular/src/lib/services/overlay/overlay.ts

@@ -246,9 +246,9 @@ export class IgxOverlayService implements OnDestroy {
     }
 
     /**
-     * Repositions the content in the horizontal and/or vertical directions.
+     * Offsets the content along the corresponding axis by the provided amount
      * ```typescript
-     * this.overlay.setOffset(id, x, y);
+     * this.overlay.setOffset(id, deltaX, deltaY);
      * ```
      */
     setOffset(id: string, deltaX: number, deltaY: number) {

src/app/grid-filtering/grid-filtering.sample.ts

@@ -534,7 +534,6 @@ export class GridFilteringComponent implements OnInit, AfterViewInit {
         const filterMode = this.filterModes[event.index].value as FilterMode;
         if (filterMode !== this.grid1.filterMode) {
             this.grid1.filterMode = filterMode;
-            this.grid1.reflow();
         }
     }
 
@@ -552,6 +551,5 @@ export class GridFilteringComponent implements OnInit, AfterViewInit {
 
     public onAllowFilteringChanged(event: IChangeCheckboxEventArgs) {
         this.grid1.allowFiltering = event.checked;
-        this.grid1.reflow();
     }
 }