Merge branch 'master' into vmihalkov/fix-6593

Author: ChronosSF

CHANGELOG.md

@@ -14,6 +14,22 @@ All notable changes for each version of this project will be documented in this
     - `IgxHierarchicalGridBaseComponent` -> `IgxHierarchicalGridBaseDirective`
     - `IgxMonthPickerBase` -> `IgxMonthPickerBaseDirective`
 
+- **Breaking Changes** Due to a breaking change in Angular 9 with Ivy, Hammer providers are no longer included by default. You can find more information at: https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes-9 . Because of this change the following components require `HammerModule` to be imported in the root module of the application in order for user interactions to work as expected:
+    - `IgxSlider`
+
+    The following components require `HammerModule` to be imported in the root module of the application so that their **touch** interactions work as expected:
+    - `igxGrid`
+    - `igxHierarchicalGrid`
+    - `igxTreeGrid`
+    - `igxList`
+    - `igxNavigationDrawer`
+    - `igxTimePicker`
+    - `igxMonthPicker`
+    - `igxSlider`
+    - `igxCalendar`
+    - `igxDatePicker`
+    - `igxCarousel`
+
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Breaking Change** - Hierarchical grid children no longer use the same `IgxTransactionService` instance and transaction handling should be modified to address each grid's transactions separately.
     - **Behavioral Change** - Pinning columns is no longer automatically prevented when the pinning area would exceed the size of the grid.

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts

@@ -60,8 +60,6 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit {
     @Input()
     public inline: boolean;
 
-    public filteredData: FilterListItem[];
-
     @Input()
     public column: IgxColumnComponent;
 

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.pipe.ts

@@ -9,18 +9,12 @@ import { cloneArray } from '../../../core/utils';
     name: 'excelStyleSearchFilter'
 })
 export class IgxExcelStyleSearchFilterPipe implements PipeTransform {
-
-    constructor(private esf: IgxGridExcelStyleFilteringComponent) { }
-
     transform(items: FilterListItem[], searchText: string): any[] {
         if (!items || !items.length) {
             return [];
         }
 
         if (!searchText) {
-            if (this.esf.excelStyleSearch) {
-                this.esf.excelStyleSearch.filteredData = null;
-            }
             return items;
         }
 
@@ -29,16 +23,7 @@ export class IgxExcelStyleSearchFilterPipe implements PipeTransform {
             (it.value !== null && it.value !== undefined) &&
             it.value.toString().toLowerCase().indexOf(searchText) > -1);
 
-        // If 'result' contains the 'Select All' item and at least one more, we use it as a 'finalResult',
-        // otherwise we use an empty array as a 'finalResult' of the filtering.
-        const finalResult = result.length > 1 ? result : [];
-
-        // Update the filteredData of the search component.
-        if (this.esf.excelStyleSearch) {
-            this.esf.excelStyleSearch.filteredData = cloneArray(finalResult);
-            this.esf.cdr.detectChanges();
-        }
-
-        return finalResult;
+        // If 'result' contains the 'Select All' item and at least one more - we use it, otherwise we use an empty array.
+        return result.length > 1 ? result : [];
     }
 }

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

@@ -237,7 +237,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterView
      * @hidden @internal
      */
     @ViewChild('excelStyleSearch', { read: IgxExcelStyleSearchComponent })
-    public excelStyleSearch: IgxExcelStyleSearchComponent;
+    protected excelStyleSearch: IgxExcelStyleSearchComponent;
 
     /**
      * @hidden @internal
@@ -304,7 +304,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterView
         }
     }
 
-    constructor(public cdr: ChangeDetectorRef) {}
+    constructor(private cdr: ChangeDetectorRef) {}
 
     /**
      * @hidden @internal
@@ -784,8 +784,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, AfterView
      * @hidden @internal
      */
     get applyButtonDisabled() {
-        return  (this.excelStyleSearch && this.excelStyleSearch.filteredData && this.excelStyleSearch.filteredData.length === 0) ||
-                (this.listData[0] && !this.listData[0].isSelected && !this.listData[0].indeterminate);
+        return this.listData[0] && !this.listData[0].isSelected && !this.listData[0].indeterminate;
     }
 
     /**

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

@@ -3210,40 +3210,27 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             tick(100);
         }));
 
-        it('Should filter, clear and enable/disable the apply button correctly.', fakeAsync(() => {
+        it('Should enable/disable the apply button correctly.', fakeAsync(() => {
             GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
             tick(100);
             fix.detectChanges();
 
-            // Type string in search box.
+            // Verify there are filtered-in results and that apply button is enabled.
             const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
-            const inputNativeElement = searchComponent.querySelector('.igx-input-group__input');
-            sendInputNativeElement(inputNativeElement, 'hello there', fix);
-            tick(100);
-            fix.detectChanges();
-
-            // Verify there are no filtered-in results and that apply button is disabled.
-            let listItems = searchComponent.querySelectorAll('igx-list-item');
-            let excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
-            let raisedButtons = Array.from(excelMenu.querySelectorAll('.igx-button--raised'));
+            const listItems = searchComponent.querySelectorAll('igx-list-item');
+            const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
+            const raisedButtons = Array.from(excelMenu.querySelectorAll('.igx-button--raised'));
             let applyButton: any = raisedButtons.find((rb: any) => rb.innerText === 'apply');
-            expect(listItems.length).toBe(0, 'ESF search result should be empty');
-            expect(applyButton.classList.contains('igx-button--disabled')).toBe(true);
+            expect(listItems.length).toBe(6, 'ESF search result should NOT be empty');
+            expect(applyButton.classList.contains('igx-button--disabled')).toBe(false);
 
-            // Clear filtering.
-            const icons = Array.from(searchComponent.querySelectorAll('igx-icon'));
-            const clearIcon: any = icons.find((ic: any) => ic.innerText === 'clear');
-            clearIcon.click();
-            tick(100);
+            // Verify the apply button is disabled when all items are unchecked (when unchecking 'Select All').
+            const checkbox = excelMenu.querySelectorAll('.igx-checkbox__input');
+            checkbox[0].click(); // Select All
+            tick();
             fix.detectChanges();
-
-            // Verify there are filtered-in results and that apply button is enabled.
-            listItems = searchComponent.querySelectorAll('igx-list-item');
-            excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
-            raisedButtons = Array.from(excelMenu.querySelectorAll('.igx-button--raised'));
             applyButton = raisedButtons.find((rb: any) => rb.innerText === 'apply');
-            expect(listItems.length).toBe(6, 'ESF search result should NOT be empty');
-            expect(applyButton.classList.contains('igx-button--disabled')).toBe(false);
+            expect(applyButton.classList.contains('igx-button--disabled')).toBe(true);
         }));
 
         it('display density is properly applied on the excel style filtering component', fakeAsync(() => {

projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts

@@ -571,6 +571,14 @@ describe('Navigation Drawer', () => {
         done();
     });
 
+    it('should retain classes added in markup, fix for #6508', () => {
+        const fix = TestBed.createComponent(TestComponent);
+        fix.detectChanges();
+
+        expect(fix.componentInstance.navDrawer.element.classList.contains('markupClass')).toBeTruthy();
+        expect(fix.componentInstance.navDrawer.element.classList.contains('igx-nav-drawer')).toBeTruthy();
+    });
+
     function swipe(element, posX, posY, duration, deltaX, deltaY) {
         const swipeOptions = {
             deltaX,
@@ -610,7 +618,7 @@ describe('Navigation Drawer', () => {
 
 @Component({
     selector: 'igx-test-cmp',
-    template: '<igx-nav-drawer></igx-nav-drawer>'
+    template: '<igx-nav-drawer class="markupClass"></igx-nav-drawer>'
 })
 class TestComponent {
     @ViewChild(IgxNavigationDrawerComponent, { static: true }) public navDrawer: IgxNavigationDrawerComponent;

projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts

@@ -61,8 +61,12 @@ export class IgxNavigationDrawerComponent implements
     AfterContentInit,
     OnDestroy,
     OnChanges {
+
     private _isOpen = false;
-    @HostBinding('class') public cssClass = 'igx-nav-drawer';
+
+    /** @hidden @internal */
+    @HostBinding('class.igx-nav-drawer')
+    public cssClass = true;
 
     /**
      * ID of the component