fix(dialog): Expose positionSettings Input #5576

Author: zdrawku

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

@@ -216,6 +216,41 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
         this._closeOnOutsideSelect = val;
     }
 
+    /**
+     * Get the position and animation settings used by the dialog.
+     * ```typescript
+     * @ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
+     * let currentPosition: PositionSettings = this.alert.positionSettings
+     * ```
+     */
+    @Input()
+    public get positionSettings(): PositionSettings {
+        return this._positionSettings;
+    }
+
+    /**
+     * Set the position and animation settings used by the dialog.
+     * ```typescript
+     * import { slideInLeft, slideOutRight } from 'igniteui-angular';
+     * ...
+     * @ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
+     *  public newPositionSettings: PositionSettings = {
+     *      openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }),
+     *      closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }),
+     *      horizontalDirection: HorizontalAlignment.Left,
+     *      verticalDirection: VerticalAlignment.Middle,
+     *      horizontalStartPoint: HorizontalAlignment.Left,
+     *      verticalStartPoint: VerticalAlignment.Middle,
+     *      minSize: { height: 100, width: 100 }
+     *  };
+     * this.alert.positionSettings = this.newPositionSettings;
+     * ```
+     */
+    public set positionSettings(settings: PositionSettings) {
+        this._positionSettings = settings;
+        this._overlayDefaultSettings.positionStrategy = new GlobalPositionStrategy(this._positionSettings);
+    }
+
     /**
      * An event that is emitted when the dialog is opened.
      *```html
@@ -258,7 +293,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     @Output()
     public onRightButtonSelect = new EventEmitter<IDialogEventArgs>();
 
-    private _animaitonSettings: PositionSettings = {
+    private _positionSettings: PositionSettings = {
         openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }),
         closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)' } })
     };
@@ -365,7 +400,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
         this._titleId = IgxDialogComponent.NEXT_ID++ + '_title';
 
         this._overlayDefaultSettings = {
-            positionStrategy: new GlobalPositionStrategy(this._animaitonSettings),
+            positionStrategy: new GlobalPositionStrategy(this._positionSettings),
             scrollStrategy: new NoOpScrollStrategy(),
             modal: this.isModal,
             closeOnOutsideClick: this.closeOnOutsideSelect

src/app/dialog/dialog.sample.html

@@ -6,7 +6,8 @@ <h4 class="sample-title">Alert</h4>
             <p class="sample-description">Detailed description to be added.</p>
             <br>
             <button igxButton="raised" igxRipple (click)="alert.open()">Trigger Alert</button>
-            <igx-dialog #alert title="Notification" message="Your email has been sent successfully!" leftButtonLabel="OK" (onLeftButtonSelect)="alert.close()">
+            <igx-dialog #alert title="Notification" message="Your email has been sent successfully!" leftButtonLabel="OK" (onLeftButtonSelect)="alert.close()"
+                [positionSettings]="positionSettings" >
             </igx-dialog>
         </article>
 

src/app/dialog/dialog.sample.ts

@@ -1,11 +1,38 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild, OnInit } from '@angular/core';
+import { IgxDialogComponent, slideOutBottom, slideInTop,
+    PositionSettings, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular';
+import { useAnimation } from '@angular/animations';
 
 @Component({
     selector: 'app-dialog-sample',
     styleUrls: ['dialog.sample.css'],
     templateUrl: 'dialog.sample.html'
 })
-export class DialogSampleComponent {
+export class DialogSampleComponent implements OnInit {
+
+    @ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
+
+    public positionSettings: PositionSettings = {
+        openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }),
+        closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }),
+        horizontalDirection: HorizontalAlignment.Left,
+        verticalDirection: VerticalAlignment.Middle,
+        horizontalStartPoint: HorizontalAlignment.Left,
+        verticalStartPoint: VerticalAlignment.Middle,
+        minSize: { height: 100, width: 100 }
+    };
+
+    public positionSettings2: PositionSettings = {
+        openAnimation: useAnimation(slideInTop),
+        closeAnimation: useAnimation(slideOutBottom)
+    };
+
+    public ngOnInit() {
+        // Set position settings on ngOnInit
+        // this.alert.positionSettings = this.positionSettings2;
+
+        console.log(this.alert.positionSettings);
+    }
 
     onDialogOKSelected(args) {
         // args.event - event