fix(toast): Adding checks for position settings #10305 - 12.2.x

CHANGELOG.md

@@ -12,6 +12,8 @@ All notable changes for each version of this project will be documented in this
 
 ### General
 - **Breaking Change** - `IgxPercentSummaryOperand` and `IgxCurrencySummaryOperand` have been removed and `IgxNumberSummaryOperand` should be used instead. If you have used the percent or currency summary operands to extend a custom summary operand from them, then change the custom operand to extend from the number summary operand.
+- `IgxToastComponent`
+    - **Deprecated** - The `position` input property has been deprecated. Use `positionSettings` input instead.   
 
 ## 12.2.1
 

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

@@ -11,8 +11,7 @@ import {
     IgxToastModule,
 } from './toast.component';
 import { configureTestSuite } from '../test-utils/configure-suite';
-import { useAnimation } from '@angular/animations';
-import { HorizontalAlignment, PositionSettings, slideInLeft, slideInRight, VerticalAlignment } from 'igniteui-angular';
+import { HorizontalAlignment, PositionSettings, VerticalAlignment } from 'igniteui-angular';
 
 describe('IgxToast', () => {
     configureTestSuite();
@@ -46,26 +45,49 @@ describe('IgxToast', () => {
         expect(domToast.id).toBe('customToast');
     });
 
-    it('should be able to set custom positionSettings', () => {
-        const defaultPositionSettings = toast.positionSettings;
-        expect(defaultPositionSettings.horizontalDirection).toBe(-0.5);
-        expect(defaultPositionSettings.verticalDirection).toBe(0);
-        const newPositionSettings: PositionSettings = {
-            openAnimation: useAnimation(slideInLeft, { params: { duration: '1000ms' } }),
-            closeAnimation: useAnimation(slideInRight, { params: { duration: '1000ms' } }),
-            horizontalDirection: HorizontalAlignment.Center,
-            verticalDirection: VerticalAlignment.Middle,
-            horizontalStartPoint: HorizontalAlignment.Center,
-            verticalStartPoint: VerticalAlignment.Middle,
-            minSize: { height: 100, width: 100 }
-        };
-        toast.positionSettings = newPositionSettings;
+    it('should properly change verical position', () => {
+        expect(toast.position).toBe('bottom');
+        expect(toast.positionSettings.verticalDirection).toBe(0);
+
+        toast.position = 'top';
+        fixture.detectChanges();
+        expect(toast.positionSettings.verticalDirection).toBe(-1);
+    });
+});
+
+describe('IgxToast with positionSettings', () => {
+    configureTestSuite();
+    beforeAll(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [ToastPositionSettingsTestComponent],
+            imports: [NoopAnimationsModule, IgxToastModule]
+        }).compileComponents();
+    }));
+
+    let fixture: ComponentFixture<ToastPositionSettingsTestComponent>;
+    let toast: IgxToastComponent;
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ToastPositionSettingsTestComponent);
+        toast = fixture.componentInstance.toast;
+        fixture.detectChanges();
+    });
+
+    it('should be able to change positionSettings', () => {
+        expect(toast.positionSettings.horizontalDirection).toBe(-1);
+        expect(toast.positionSettings.verticalDirection).toBe(-0.5);
+        toast.positionSettings = fixture.componentInstance.secondPositionSettings;
+        fixture.detectChanges();
+        expect(toast.positionSettings.horizontalDirection).toBe(-0.5);
+        expect(toast.positionSettings.verticalDirection).toBe(-0.5);
+    });
+
+    it('positionSettings passed in the open method should be applied', () => {
+        const positions = fixture.componentInstance.secondPositionSettings;
+        toast.open(undefined, positions);
         fixture.detectChanges();
-        const customPositionSettings = toast.positionSettings;
-        expect(customPositionSettings.horizontalDirection).toBe(-0.5);
-        expect(customPositionSettings.verticalDirection).toBe(-0.5);
-        expect(customPositionSettings.openAnimation.options.params).toEqual({duration: '1000ms'});
-        expect(customPositionSettings.minSize).toEqual({height: 100, width: 100});
+        expect(toast.positionSettings.horizontalDirection).toBe(-0.5);
+        expect(toast.positionSettings.verticalDirection).toBe(-0.5);
     });
 });
 
@@ -77,3 +99,23 @@ class ToastInitializeTestComponent {
     public toast: IgxToastComponent;
 }
 
+@Component({
+    template: `<igx-toast #toast [positionSettings]="firstPositionSettings"></igx-toast>`,
+})
+class ToastPositionSettingsTestComponent {
+    @ViewChild(IgxToastComponent, { static: true })
+    public toast: IgxToastComponent;
+    public firstPositionSettings: PositionSettings = {
+        horizontalDirection: HorizontalAlignment.Left,
+        verticalDirection: VerticalAlignment.Middle,
+        horizontalStartPoint: HorizontalAlignment.Left,
+        verticalStartPoint: VerticalAlignment.Middle
+    };
+    public secondPositionSettings: PositionSettings = {
+        horizontalDirection: HorizontalAlignment.Center,
+        verticalDirection: VerticalAlignment.Middle,
+        horizontalStartPoint: HorizontalAlignment.Center,
+        verticalStartPoint: VerticalAlignment.Middle
+    };
+}
+

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

@@ -8,9 +8,11 @@ import {
     Inject,
     Input,
     NgModule,
+    OnChanges,
     OnInit,
     Optional,
     Output,
+    SimpleChanges
 } from '@angular/core';
 import { takeUntil } from 'rxjs/operators';
 import { IgxNavigationService } from '../core/navigation';
@@ -26,6 +28,7 @@ import { IgxNotificationsDirective } from '../directives/notification/notificati
 import { ToggleViewEventArgs } from '../directives/toggle/toggle.directive';
 import { useAnimation } from '@angular/animations';
 import { fadeIn, fadeOut } from '../animations/fade';
+import { DeprecateProperty } from '../core/deprecateDecorators';
 
 let NEXT_ID = 0;
 
@@ -63,8 +66,7 @@ export type IgxToastPosition = (typeof IgxToastPosition)[keyof typeof IgxToastPo
     selector: 'igx-toast',
     templateUrl: 'toast.component.html'
 })
-export class IgxToastComponent extends IgxNotificationsDirective
-    implements OnInit {
+export class IgxToastComponent extends IgxNotificationsDirective implements OnInit, OnChanges {
     /**
      * @hidden
      */
@@ -119,8 +121,18 @@ export class IgxToastComponent extends IgxNotificationsDirective
      *
      * @memberof IgxToastComponent
      */
+    @DeprecateProperty('`position` is deprecated. We suggest using `positionSettings` property instead.')
     @Input()
-    public position: IgxToastPosition = 'bottom';
+    public get position(): IgxToastPosition {
+        return this._position;
+    }
+
+    public set position(position: IgxToastPosition) {
+        if (position) {
+            this._position = position;
+            this._positionSettings.verticalDirection = this.calculatePosition();
+        }
+    }
 
     /**
      * Get the position and animation settings used by the toast.
@@ -158,14 +170,10 @@ export class IgxToastComponent extends IgxNotificationsDirective
          this._positionSettings = settings;
      }
 
+     private _position: IgxToastPosition = 'bottom';
      private _positionSettings: PositionSettings = {
         horizontalDirection: HorizontalAlignment.Center,
-        verticalDirection:
-            this.position === 'bottom'
-                ? VerticalAlignment.Bottom
-                : this.position === 'middle'
-                    ? VerticalAlignment.Middle
-                    : VerticalAlignment.Top,
+        verticalDirection: VerticalAlignment.Bottom,
         openAnimation: useAnimation(fadeIn),
         closeAnimation: useAnimation(fadeOut),
     };
@@ -199,11 +207,13 @@ export class IgxToastComponent extends IgxNotificationsDirective
      * this.toast.open();
      * ```
      */
-    public open(message?: string) {
+    public open(message?: string, settings?: PositionSettings) {
         if (message !== undefined) {
             this.textMessage = message;
         }
-
+        if (settings !== undefined) {
+            this.positionSettings = settings;
+        }
         this.strategy = new GlobalPositionStrategy(this.positionSettings);
         super.open();
     }
@@ -237,6 +247,20 @@ export class IgxToastComponent extends IgxNotificationsDirective
             this.isVisibleChange.emit(closedEventArgs);
         });
     }
+
+    public ngOnChanges(changes: SimpleChanges) {
+        if (changes['position'] && this._positionSettings) {
+            this._positionSettings.verticalDirection = this.calculatePosition();
+        }
+    }
+
+    private calculatePosition() {
+        return this.position === 'bottom'
+            ? VerticalAlignment.Bottom
+            : this.position === 'middle'
+                ? VerticalAlignment.Middle
+                : VerticalAlignment.Top;
+    }
 }
 
 /**