Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into vkombov/fix-10276-master

Author: viktorkombov

CHANGELOG.md

@@ -6,7 +6,23 @@ All notable changes for each version of this project will be documented in this
 
 ### New Features
 - `IgxCsvExporterService`, `IgxExcelExporterService`
-    - Exporter services are no longer required to be provided in the application since they are now injected on a root level. 
+    - Exporter services are no longer required to be provided in the application since they are now injected on a root level.
+
+### General
+
+- `IgxDialog`
+    - **Breaking Change** - The default positionSettings open/close animation has been changed to `fadeIn`/`fadeOut`. The open/close animation can be set through the position settings, e.g. change the animation to the previously default open/close animation:
+
+    ```typescript
+    import { slideInBottom, slideOutTop } from 'igniteui-angular';
+
+    @ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
+    public newPositionSettings: PositionSettings = {
+        openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }),
+        closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)'} })
+    };
+    this.alert.positionSettings = this.newPositionSettings;
+    ```
 
 ## 12.2.1
 

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

@@ -1,4 +1,3 @@
-import { useAnimation } from '@angular/animations';
 import { CommonModule } from '@angular/common';
 import {
     Component,
@@ -22,7 +21,7 @@ import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxDialogActionsDirective, IgxDialogTitleDirective } from './dialog.directives';
 import { IgxToggleModule, IgxToggleDirective } from '../directives/toggle/toggle.directive';
 import { OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, PositionSettings } from '../services/public_api';
-import { slideInBottom, slideOutTop } from '../animations/slide/index';
+import {fadeIn, fadeOut} from '../animations/fade/index';
 import { IgxFocusModule } from '../directives/focus/focus.directive';
 import { CancelableEventArgs, IBaseEventArgs } from '../core/utils';
 
@@ -459,8 +458,8 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     protected destroy$ = new Subject<boolean>();
 
     private _positionSettings: PositionSettings = {
-        openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }),
-        closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)' } })
+        openAnimation: fadeIn,
+        closeAnimation: fadeOut
     };
 
     private _overlayDefaultSettings: OverlaySettings;

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

@@ -277,9 +277,10 @@ export class IgxFilteringService implements OnDestroy {
             }
         }
 
+        const emptyFilter = new FilteringExpressionsTree(null, field);
         const onFilteringEventArgs: IFilteringEventArgs = {
             owner: this.grid,
-            filteringExpressions: null,
+            filteringExpressions: emptyFilter,
             cancel: false };
 
         this.grid.filtering.emit(onFilteringEventArgs);
@@ -292,7 +293,7 @@ export class IgxFilteringService implements OnDestroy {
         this.clear_filter(field);
 
         // Wait for the change detection to update filtered data through the pipes and then emit the event.
-        requestAnimationFrame(() => this.grid.filteringDone.emit(null));
+        requestAnimationFrame(() => this.grid.filteringDone.emit(emptyFilter));
 
         if (field) {
             const expressions = this.getExpressions(field);

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

@@ -485,9 +485,10 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             GridFunctions.clickFilterCellChip(fix, columnName);
             GridFunctions.resetFilterRow(fix);
 
-            expect(grid.filtering.emit).toHaveBeenCalledWith({ owner: grid, cancel: false, filteringExpressions: null });
+            const emptyFilter = new FilteringExpressionsTree(null, columnName);
+            expect(grid.filtering.emit).toHaveBeenCalledWith({ owner: grid, cancel: false, filteringExpressions: emptyFilter });
             expect(grid.filtering.emit).toHaveBeenCalledTimes(2);
-            expect(grid.filteringDone.emit).toHaveBeenCalledWith(null);
+            expect(grid.filteringDone.emit).toHaveBeenCalledWith(emptyFilter);
             expect(grid.filteringDone.emit).toHaveBeenCalledTimes(2);
 
             const filterUiRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
@@ -512,9 +513,10 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             tick(100);
             fix.detectChanges();
 
-            const args = { owner: grid, cancel: false, filteringExpressions: null };
+            const emptyFilter = new FilteringExpressionsTree(null, columnName);
+            const args = { owner: grid, cancel: false, filteringExpressions: emptyFilter };
             expect(grid.filtering.emit).toHaveBeenCalledWith(args);
-            expect(grid.filteringDone.emit).toHaveBeenCalledWith(null);
+            expect(grid.filteringDone.emit).toHaveBeenCalledWith(emptyFilter);
         }));
 
         it('Removing second condition removes the And/Or button', fakeAsync(() => {
@@ -826,13 +828,14 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             spyOn(grid.filtering, 'emit');
             spyOn(grid.filteringDone, 'emit');
 
-            grid.filter('ProductName', 'I', IgxStringFilteringOperand.instance().condition('startsWith'));
+            const columnName = 'ProductName';
+            grid.filter(columnName, 'I', IgxStringFilteringOperand.instance().condition('startsWith'));
             tick(30);
             fix.detectChanges();
 
             expect(grid.rowList.length).toEqual(2);
 
-            const filteringExpressions = grid.filteringExpressionsTree.find('ProductName') as FilteringExpressionsTree;
+            const filteringExpressions = grid.filteringExpressionsTree.find(columnName) as FilteringExpressionsTree;
             const args = { owner: grid, cancel: false, filteringExpressions };
             expect(grid.filtering.emit).toHaveBeenCalledWith(args);
             expect(grid.filtering.emit).toHaveBeenCalledTimes(1);
@@ -849,10 +852,11 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
 
             expect(grid.rowList.length).toEqual(8);
 
-            args.filteringExpressions = null;
+            const emptyFilter = new FilteringExpressionsTree(null, columnName);
+            args.filteringExpressions = emptyFilter;
             expect(grid.filtering.emit).toHaveBeenCalledWith(args);
             expect(grid.filtering.emit).toHaveBeenCalledTimes(2);
-            expect(grid.filteringDone.emit).toHaveBeenCalledWith(null);
+            expect(grid.filteringDone.emit).toHaveBeenCalledWith(emptyFilter);
             expect(grid.filteringDone.emit).toHaveBeenCalledTimes(2);
         }));
 

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

@@ -745,9 +745,6 @@ export class IgxOverlayService implements OnDestroy {
             wrapperElement.style.transitionDuration = '0ms';
             return;
         }
-        if (animationOptions.type === AnimationMetadataType.AnimateRef) {
-            animationOptions = (animationOptions as AnimationAnimateRefMetadata).animation;
-        }
         if (!animationOptions.options || !animationOptions.options.params) {
             return;
         }
@@ -893,6 +890,7 @@ export class IgxOverlayService implements OnDestroy {
     private removeModalClasses(info: OverlayInfo) {
         if (info.settings.modal) {
             const wrapperElement = info.elementRef.nativeElement.parentElement.parentElement;
+            this.applyAnimationParams(wrapperElement, info.settings.positionStrategy.settings.closeAnimation);
             wrapperElement.classList.remove('igx-overlay__wrapper--modal');
             wrapperElement.classList.add('igx-overlay__wrapper');
         }