chore(*): add optional parameter to open method

Author: dobromirts

CHANGELOG.md

@@ -35,6 +35,8 @@ All notable changes for each version of this project will be documented in this
 - `IgxColumnActionsComponent`
     - **Breaking Change** - The following input has been removed
         - Input `columns`. Use `igxGrid` `columns` input instead.        
+- `IgxToastComponent`
+    - **Deprecated** - The `position` input property has been deprecated. Use `positionSettings` input instead.   
 
 ## 12.2.3
 

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

@@ -54,27 +54,41 @@ describe('IgxToast', () => {
         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('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('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);
     });
 });
 
@@ -86,3 +100,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
+    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,7 +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
      */
@@ -118,6 +121,7 @@ export class IgxToastComponent extends IgxNotificationsDirective implements OnIn
      *
      * @memberof IgxToastComponent
      */
+    @DeprecateProperty('`position` is deprecated. We suggest using `positionSettings` property instead.')
     @Input()
     public get position(): IgxToastPosition {
         return this._position;
@@ -167,7 +171,6 @@ export class IgxToastComponent extends IgxNotificationsDirective implements OnIn
      }
 
      private _position: IgxToastPosition = 'bottom';
-
      private _positionSettings: PositionSettings = {
         horizontalDirection: HorizontalAlignment.Center,
         verticalDirection: VerticalAlignment.Bottom,
@@ -204,14 +207,15 @@ export class IgxToastComponent extends IgxNotificationsDirective implements OnIn
      * this.toast.open();
      * ```
      */
-    public open(message?: string) {
+    public open(message?: string, settings?: PositionSettings) {
         if (message !== undefined) {
             this.textMessage = message;
         }
-        requestAnimationFrame(() => {
-            this.strategy = new GlobalPositionStrategy(this.positionSettings);
-            super.open();
-        });
+        if (settings !== undefined) {
+            this.positionSettings = settings;
+        }
+        this.strategy = new GlobalPositionStrategy(this.positionSettings);
+        super.open();
     }
 
     /**
@@ -251,6 +255,12 @@ export class IgxToastComponent extends IgxNotificationsDirective implements OnIn
                 ? VerticalAlignment.Middle
                 : VerticalAlignment.Top;
     }
+
+    public ngOnChanges(changes: SimpleChanges) {
+        if (changes['position'] && this._positionSettings) {
+            this._positionSettings.verticalDirection = this.calculatePosition();
+        }
+    }
 }
 
 /**