Merge branch '10.1.x' into ddincheva/pageUp-10.1

Author: zdrawku

projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts

@@ -26,7 +26,8 @@ describe('Dialog', () => {
                 CustomTemplates1DialogComponent,
                 CustomTemplates2DialogComponent,
                 DialogSampleComponent,
-                PositionSettingsDialogComponent
+                PositionSettingsDialogComponent,
+                DialogTwoWayDataBindingComponent
             ],
             imports: [BrowserAnimationsModule, NoopAnimationsModule, IgxDialogModule]
         }).compileComponents();
@@ -80,6 +81,41 @@ describe('Dialog', () => {
         expect(messageDebugElement.nativeElement.textContent.trim()).toEqual(expectedMessage);
     });
 
+    it('Should open and close dialog when set values to IsOpen', fakeAsync(() => {
+        const fixture = TestBed.createComponent(AlertComponent);
+        const dialog = fixture.componentInstance.dialog;
+        const expectedMessage = 'message';
+
+        dialog.isOpen = true;
+        tick();
+        fixture.detectChanges();
+        expect(dialog.isOpen).toEqual(true);
+
+        dialog.close();
+        tick();
+        fixture.detectChanges();
+        expect(dialog.isOpen).toEqual(false);
+    }));
+
+    it('Should open and close dialog with isOpen two way data binding', fakeAsync(() => {
+        const fixture = TestBed.createComponent(DialogTwoWayDataBindingComponent);
+        const dialog = fixture.componentInstance.dialog;
+        fixture.detectChanges();
+
+        fixture.componentInstance.myDialog = true;
+
+        fixture.detectChanges();
+        tick();
+        expect(dialog.isOpen).toEqual(true);
+
+
+        fixture.componentInstance.myDialog = false;
+
+        fixture.detectChanges();
+        tick();
+        expect(dialog.isOpen).toEqual(false);
+    }));
+
     it('Should set custom modal message.', () => {
         const fixture = TestBed.createComponent(CustomDialogComponent);
         const dialog = fixture.componentInstance.dialog;
@@ -310,6 +346,7 @@ describe('Dialog', () => {
         dialog.open();
         tick(100);
         fix.detectChanges();
+        tick(100);
 
         // Verify dialog is opened and its default right button is focused
         const dialogDOM = fix.debugElement.query(By.css('.igx-dialog'));
@@ -436,6 +473,28 @@ class AlertComponent {
 class DialogComponent {
     @ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
 }
+
+@Component({
+    template: `<div #wrapper>
+                            <igx-dialog #dialog title="dialog" message="message"
+                                [(isOpen)]="myDialog"
+                                leftButtonLabel="left button"
+                                leftButtonType="raised"
+                                leftButtonColor="black"
+                                leftButtonBackgroundColor="darkblue"
+                                leftButtonRipple="pink"
+                                rightButtonLabel="right button"
+                                rightButtonType="raised"
+                                rightButtonColor="orange"
+                                rightButtonBackgroundColor="lightblue"
+                                rightButtonRipple="white">
+                            </igx-dialog>
+                        </div>` })
+class DialogTwoWayDataBindingComponent {
+    @ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
+    public myDialog = false;
+}
+
 @Component({
     template: `<div #wrapper>
                             <igx-dialog #dialog

projects/igniteui-angular/src/lib/dialog/dialog.component.ts

@@ -58,6 +58,8 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     private static NEXT_ID = 1;
     private static readonly DIALOG_CLASS = 'igx-dialog';
 
+
+
     @ViewChild(IgxToggleDirective, { static: true })
     public toggleRef: IgxToggleDirective;
 
@@ -316,6 +318,11 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     @Output()
     public onRightButtonSelect = new EventEmitter<IDialogEventArgs>();
 
+    /**
+     * @hidden
+     */
+    @Output() public isOpenChange = new EventEmitter<boolean>();
+
     private _positionSettings: PositionSettings = {
         openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }),
         closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)' } })
@@ -359,19 +366,37 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     }
 
     /**
-     * Returns whether the dialog is visible to the end user.
+     * State of the dialog.
+     *
      * ```typescript
-     * @ViewChild("MyDialog")
-     * public dialog: IgxDialogComponent;
-     * ngAfterViewInit() {
-     *     let dialogOpen = this.dialog.isOpen;
-     * }
+     *  // get
+     * let dialogIsOpen = this.dialog.isOpen;
+     * ```
+     *
+     * ```html
+     * <!--set-->
+     * <igx-dialog [isOpen]='false'></igx-dialog>
+     * ```
+     *
+     * Two-way data binding.
+     * ```html
+     * <!--set-->
+     * <igx-dialog [(isOpen)]='model.isOpen'></igx-dialog>
      * ```
      */
     @Input()
-    get isOpen() {
+    public get isOpen() {
         return !this.toggleRef.collapsed;
     }
+    public set isOpen(value: boolean) {
+
+        this.isOpenChange.emit(value);
+        if (value) {
+            this.open();
+        } else {
+            this.close();
+        }
+    }
 
     @HostBinding('class.igx-dialog--hidden')
     get isCollapsed() {

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

@@ -129,6 +129,12 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
         esf.columnChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.virtDir.resetScrollPosition();
         });
+
+        esf.listDataLoaded.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            if (this.searchValue) {
+                this.clearInput();
+            }
+        });
     }
 
     public ngAfterViewInit() {

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

@@ -125,7 +125,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();
                     }
                 });
             });
@@ -189,7 +189,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;
         }
 
@@ -284,6 +284,12 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
     @Output()
     public columnChange = new EventEmitter<IgxColumnComponent>();
 
+    /**
+     * @hidden @internal
+     */
+    @Output()
+    public listDataLoaded = new EventEmitter();
+
     /**
      * @hidden @internal
      */
@@ -406,20 +412,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;
     }
@@ -459,7 +465,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;
 
@@ -496,7 +507,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 {
@@ -549,6 +560,8 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
         if (!(this.cdr as any).destroyed) {
             this.cdr.detectChanges();
         }
+
+        this.listDataLoaded.emit();
     }
 
     private getColumnFilterExpressionsTree() {

projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts

@@ -1295,6 +1295,8 @@ describe('IgxGrid - Cell selection #grid', () => {
             UIInteractions.triggerKeyDownEvtUponElem('arrowright', firstCell.nativeElement, true, false, true, true);
             await wait(100);
             fix.detectChanges();
+            await wait(50);
+            fix.detectChanges();
 
             expect(selectionChangeSpy).toHaveBeenCalledTimes(1);
             GridSelectionFunctions.verifySelectedRange(grid, 4, 4, 2, 5);
@@ -1332,14 +1334,15 @@ describe('IgxGrid - Cell selection #grid', () => {
             const selectionChangeSpy = spyOn<any>(grid.onRangeSelection, 'emit').and.callThrough();
 
             UIInteractions.simulateClickAndSelectEvent(firstCell);
+            await wait();
             fix.detectChanges();
 
             expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
             GridSelectionFunctions.verifyCellSelected(firstCell);
             expect(grid.selectedCells.length).toBe(1);
 
             UIInteractions.triggerKeyDownEvtUponElem('end', firstCell.nativeElement, true, false, true, true);
-            await wait(100);
+            await wait(200);
             fix.detectChanges();
 
             expect(selectionChangeSpy).toHaveBeenCalledTimes(1);

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

@@ -4213,6 +4213,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
         it('Should correctly update all items based on \'SelectAll\' checkbox.', fakeAsync(() => {
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
+            flush();
 
             const visibleListItems = GridFunctions.getExcelStyleFilteringCheckboxes(fix);
             const dataListItems = visibleListItems.slice(1, visibleListItems.length);
@@ -4245,6 +4246,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
         it('Should correctly update all \'SelectAll\' checkbox when not a single item is checked.', fakeAsync(() => {
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Released');
+            flush();
 
             const visibleListItems = GridFunctions.getExcelStyleFilteringCheckboxes(fix);
             expect(visibleListItems.length).toBe(4);
@@ -4377,6 +4379,48 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(listItems[3].innerText).toBe('custoM', 'incorrect list item label');
             expect(listItems[4].innerText).toBe('custom', 'incorrect list item label');
         }));
+
+        it('Should clear search criteria when selecting clear column filters option.', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
+
+            let checkboxes = GridFunctions.getExcelStyleFilteringCheckboxes(fix);
+            fix.detectChanges();
+
+            checkboxes[0].click();
+            tick();
+            fix.detectChanges();
+
+            checkboxes[2].click();
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.clickApplyExcelStyleFiltering(fix);
+            tick();
+            fix.detectChanges();
+            expect(grid.filteredData.length).toEqual(1);
+
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
+            flush();
+
+            let inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, 'Net', fix);
+
+            const listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
+            expect(listItems.length).toBe(2, 'incorrect rendered list items count');
+
+            GridFunctions.clickClearFilterInExcelStyleFiltering(fix);
+            flush();
+            expect(grid.filteredData).toBeNull();
+
+            inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+            expect(inputNativeElement.value).toBe('', 'search criteria is not cleared');
+
+            checkboxes = GridFunctions.getExcelStyleFilteringCheckboxes(fix);
+            const listItemsCheckboxes = checkboxes.slice(1, checkboxes.length);
+            for (const checkbox of listItemsCheckboxes) {
+                ControlsFunction.verifyCheckboxState(checkbox.parentElement);
+            }
+        }));
     });
 
     describe('Templates: ', () => {
@@ -4527,6 +4571,23 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             GridSelectionFunctions.verifyColumnAndCellsSelected(columnId, false);
 
         });
+
+        it('Should reset esf menu with templates on column change', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
+            flush();
+
+            let inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, 20, fix);
+
+            const listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
+            expect(listItems.length).toBe(2, 'incorrect rendered list items count');
+
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
+            flush();
+
+            inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+            expect(inputNativeElement.value).toBe('', 'input value didn\'t reset');
+        }));
     });
 
     describe('Load values on demand', () => {
@@ -4581,6 +4642,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, () => {
@@ -4729,7 +4801,6 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             GridSelectionFunctions.verifyColumnAndCellsSelected(columnId, false);
 
         });
-
     });
 });