Merge branch 'master' into pivot-grid-master

Author: ChronosSF

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/grid-base.directive.ts

@@ -7000,7 +7000,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
         // eslint-disable-next-line prefer-const
         for (let [row, set] of selectionMap) {
-            row = this.paginator ? row + (this.paginator.perPage * this.paginator.page) : row;
+            row = this.paginator && source === this.filteredSortedData ? row + (this.paginator.perPage * this.paginator.page) : row;
             row = isRemote ? row - this.virtualizationState.startIndex : row;
             if (!source[row] || source[row].detailsData !== undefined) {
                 continue;

projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts

@@ -3,7 +3,7 @@ import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testin
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';
-import { UIInteractions, wait, waitForActiveNodeChange} from '../../test-utils/ui-interactions.spec';
+import { UIInteractions, wait, waitForActiveNodeChange } from '../../test-utils/ui-interactions.spec';
 import { IgxGridModule } from './public_api';
 import { IgxGridComponent } from './grid.component';
 import { IgxGridRowComponent } from './grid-row.component';
@@ -42,7 +42,7 @@ describe('IgxGrid Master Detail #grid', () => {
     }));
 
     describe('Basic', () => {
-        beforeEach( fakeAsync(() => {
+        beforeEach(fakeAsync(() => {
             fix = TestBed.createComponent(DefaultGridMasterDetailComponent);
             fix.detectChanges();
             grid = fix.componentInstance.grid;
@@ -689,7 +689,7 @@ describe('IgxGrid Master Detail #grid', () => {
 
     describe('Integration', () => {
         describe('Paging', () => {
-             it('Should not take into account expanded detail views as additional records.', fakeAsync(() => {
+            it('Should not take into account expanded detail views as additional records.', fakeAsync(() => {
                 fix = TestBed.createComponent(DefaultGridMasterDetailComponent);
                 grid = fix.componentInstance.grid;
                 fix.detectChanges();
@@ -859,6 +859,48 @@ describe('IgxGrid Master Detail #grid', () => {
                 fix.detectChanges();
                 expect(grid.getSelectedData()).toEqual(expectedData);
             }));
+
+            it('getSelectedData should return correct values when there are master details and paging is enabled', fakeAsync(() => {
+                const range = { rowStart: 0, rowEnd: 5, columnStart: 'ContactName', columnEnd: 'ContactName' };
+                const expectedDataFromSecondPage = [
+                    { ContactName: 'Hanna Moos' },
+                    { ContactName: 'Frédérique Citeaux' },
+                    { ContactName: 'Martín Sommer' }
+                ];
+                fix.componentInstance.paging = true;
+                fix.detectChanges();
+                grid.paginator.perPage = 5;
+                fix.detectChanges();
+                tick(16);
+                grid.paginator.paginate(1);
+                fix.detectChanges();
+                tick(16);
+
+                grid.expandAll();
+                tick(100);
+                fix.detectChanges();
+
+                grid.selectRange(range);
+                fix.detectChanges();
+                expect(grid.getSelectedData()).toEqual(expectedDataFromSecondPage);
+
+                const expectedDataFromThirdPage = [
+                    { ContactName: 'Victoria Ashworth' },
+                    { ContactName: 'Patricio Simpson' },
+                    { ContactName: 'Francisco Chang' }
+                ];
+                grid.paginator.paginate(2);
+                fix.detectChanges();
+                tick(16);
+
+                grid.expandAll();
+                tick(100);
+                fix.detectChanges();
+
+                grid.selectRange(range);
+                fix.detectChanges();
+                expect(grid.getSelectedData()).toEqual(expectedDataFromThirdPage);
+            }));
         });
 
         describe('Row Selection', () => {

projects/igniteui-angular/src/lib/icon/icon.service.ts

@@ -105,7 +105,7 @@ export class IgxIconService {
      *   this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags');
      * ```
      */
-    public addSvgIcon(name: string, url: string, family: string = '') {
+    public addSvgIcon(name: string, url: string, family = this._family) {
         if (name && url) {
             const safeUrl = this._sanitizer.bypassSecurityTrustResourceUrl(url);
             if (!safeUrl) {
@@ -154,8 +154,9 @@ export class IgxIconService {
      * ```
      */
     public isSvgIconCached(name: string, family: string = ''): boolean {
-        if(this._cachedSvgIcons.has(family)) {
-            const familyRegistry = this._cachedSvgIcons.get(family) as Map<string, SafeHtml>;
+        const familyClassName = this.familyClassName(family);
+        if(this._cachedSvgIcons.has(familyClassName)) {
+            const familyRegistry = this._cachedSvgIcons.get(familyClassName) as Map<string, SafeHtml>;
             return familyRegistry.has(name);
         }
 
@@ -169,7 +170,8 @@ export class IgxIconService {
      * ```
      */
     public getSvgIcon(name: string, family: string = '') {
-        return this._cachedSvgIcons.get(family)?.get(name);
+        const familyClassName = this.familyClassName(family);
+        return this._cachedSvgIcons.get(familyClassName)?.get(name);
     }
 
     /**

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');
         }

src/app/icon/icon.sample.html

@@ -86,7 +86,7 @@ <h4 class="sample-title">Using SVG Icons</h4>
             <igx-icon family="svg-flags" name="equals"></igx-icon>
             <igx-icon family="svg-flags" name="is_empty"></igx-icon>
             <igx-icon family="svg-flags" name="starts_with"></igx-icon>
-            <igx-icon family="svg-flags" name="copy"></igx-icon>
+            <igx-icon name="copy"></igx-icon>
         </div>
     </article>
 

src/app/icon/icon.sample.ts

@@ -19,6 +19,6 @@ export class IconSampleComponent implements OnInit {
         this._iconService.addSvgIcon('equals', '/assets/svg/filtering/equals.svg', 'svg-flags');
         this._iconService.addSvgIcon('is_empty', '/assets/svg/filtering/is_empty.svg', 'svg-flags');
         this._iconService.addSvgIcon('starts_with', '/assets/svg/filtering/starts_with.svg', 'svg-flags');
-        this._iconService.addSvgIcon('copy', '/assets/svg/filtering/copy.svg', 'svg-flags');
+        this._iconService.addSvgIcon('copy', '/assets/svg/filtering/copy.svg');
     }
 }