Dialog: Add position settings input

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 8.1.4
+- `IgxDialog` - @Input `positionSettings` is now available. It provides the ability to get/set both position and animation settings of the Dialog component. 
+
 ## 8.1.3
 - `IgxCombo`
     - Combo `onSelectionChange` events now emits the item(s) that were added to or removed from the collection:
@@ -22,7 +25,7 @@ All notable changes for each version of this project will be documented in this
 ### New Features
 - `IgxDatePicker`
     - `valueChange` event is added.
-    
+
 ## 8.1.0
 
 ### New Features

projects/igniteui-angular/src/lib/dialog/README.md

@@ -93,3 +93,23 @@ or
         <div igxDialogActions>BUTTONS</div>
     </igx-dialog>
 ```
+
+You can now set set the position and animation settings used by the dialog by using `positionSettings` @Input
+
+```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;
+```
+

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

@@ -1,14 +1,17 @@
-import { Component, DebugElement, ElementRef, ViewChild } from '@angular/core';
-import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { Component, ViewChild } from '@angular/core';
+import { async, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
 import { IDialogEventArgs, IgxDialogComponent, IgxDialogModule } from './dialog.component';
 import { configureTestSuite } from '../test-utils/configure-suite';
+import { PositionSettings, slideInTop, slideOutBottom, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular';
+import { useAnimation } from '@angular/animations';
 
 const OVERLAY_MAIN_CLASS = 'igx-overlay';
 const OVERLAY_WRAPPER_CLASS = `${OVERLAY_MAIN_CLASS}__wrapper`;
 const OVERLAY_MODAL_WRAPPER_CLASS = `${OVERLAY_WRAPPER_CLASS}--modal`;
+const CLASS_OVERLAY_CONTENT_MODAL = `${OVERLAY_MAIN_CLASS}__content--modal`;
 
 describe('Dialog', () => {
     configureTestSuite();
@@ -21,7 +24,8 @@ describe('Dialog', () => {
                 NestedDialogsComponent,
                 CustomTemplates1DialogComponent,
                 CustomTemplates2DialogComponent,
-                DialogSampleComponent
+                DialogSampleComponent,
+                PositionSettingsDialogComponent
             ],
             imports: [BrowserAnimationsModule, NoopAnimationsModule, IgxDialogModule]
         }).compileComponents();
@@ -322,6 +326,78 @@ describe('Dialog', () => {
         expect(dialog.isOpen).toEqual(false);
     }));
 
+    describe('Position settings', () => {
+        let fix;
+        let dialog;
+        let detect;
+
+        beforeEach( fakeAsync(() => {
+            fix = TestBed.createComponent(PositionSettingsDialogComponent);
+            fix.detectChanges();
+            dialog = fix.componentInstance.dialog;
+            detect = () => dialog.cdr.detectChanges();
+        }));
+
+        it('Define different position settings ', (async() => {
+            const currentElement = fix.componentInstance;
+            dialog.open();
+            fix.detectChanges();
+            await wait(16);
+
+            expect(dialog.isOpen).toEqual(true);
+            const firstContentRect = document.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0].getBoundingClientRect();
+            const middleDialogPosition = document.documentElement.offsetHeight / 2 - firstContentRect.height / 2;
+            expect(firstContentRect.left).toEqual(0, 'OffsetLeft position check');
+            expect(firstContentRect.top).toBeGreaterThanOrEqual(middleDialogPosition - 2, 'OffsetTop position check');
+            expect(firstContentRect.top).toBeLessThanOrEqual(middleDialogPosition + 2, 'OffsetTop position check');
+
+            dialog.close();
+            fix.detectChanges();
+            await wait(16);
+
+            expect(dialog.isOpen).toEqual(false);
+            dialog.positionSettings = currentElement.newPositionSettings;
+            fix.detectChanges();
+            await wait(16);
+
+            dialog.open();
+            fix.detectChanges();
+            await wait(16);
+
+            expect(dialog.isOpen).toEqual(true);
+            const secondContentRect = document.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0].getBoundingClientRect();
+            const topDialogPosition = document.documentElement.offsetWidth / 2 - secondContentRect.width / 2;
+            expect(secondContentRect.top).toEqual(0, 'OffsetTop position check');
+            expect(secondContentRect.left).toBeGreaterThanOrEqual(topDialogPosition - 2, 'OffsetLeft position check');
+            expect(secondContentRect.left).toBeLessThanOrEqual(topDialogPosition + 2, 'OffsetLeft position check');
+
+            dialog.close();
+            fix.detectChanges();
+            await wait(16);
+
+            expect(dialog.isOpen).toEqual(false);
+        }));
+
+        it('Set animation settings', (async() => {
+            const currentElement = fix.componentInstance;
+
+            // Check initial animation settings
+            expect(dialog.positionSettings.openAnimation.animation.type).toEqual(8, 'Animation type is set');
+            expect(dialog.positionSettings.openAnimation.options.params.duration).toEqual('200ms', 'Animation duration is set to 200ms');
+
+            expect(dialog.positionSettings.closeAnimation.animation.type).toEqual(8, 'Animation type is set');
+            expect(dialog.positionSettings.closeAnimation.options.params.duration).toEqual('200ms', 'Animation duration is set to 200ms');
+
+            dialog.positionSettings = currentElement.animationSettings;
+            fix.detectChanges();
+            await wait(16);
+
+            // Check the new animation settings
+            expect(dialog.positionSettings.openAnimation.options.params.duration).toEqual('800ms', 'Animation duration is set to 800ms');
+            expect(dialog.positionSettings.closeAnimation.options.params.duration).toEqual('700ms', 'Animation duration is set to 700ms');
+        }));
+    });
+
     function dispatchEvent(element: HTMLElement, eventType: string) {
         const event = new Event(eventType);
         element.dispatchEvent(event);
@@ -436,3 +512,32 @@ class CustomTemplates1DialogComponent {
 class CustomTemplates2DialogComponent {
     @ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
 }
+
+
+@Component({
+    template: `<igx-dialog #dialog title="Notification" message="Your email has been sent successfully!" leftButtonLabel="OK"
+        [positionSettings]="positionSettings" >
+    </igx-dialog>` })
+class PositionSettingsDialogComponent {
+    @ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
+
+    public positionSettings: PositionSettings = {
+        horizontalDirection: HorizontalAlignment.Left,
+        verticalDirection: VerticalAlignment.Middle,
+        horizontalStartPoint: HorizontalAlignment.Left,
+        verticalStartPoint: VerticalAlignment.Middle,
+        openAnimation: useAnimation(slideInTop, { params: { duration: '200ms' } }),
+        closeAnimation: useAnimation(slideOutBottom, { params: { duration: '200ms'} })
+    };
+
+    public newPositionSettings: PositionSettings = {
+        horizontalDirection: HorizontalAlignment.Center,
+        verticalDirection: VerticalAlignment.Top
+    };
+
+    public animationSettings: PositionSettings = {
+        openAnimation: useAnimation(slideInTop, { params: { duration: '800ms' } }),
+        closeAnimation: useAnimation(slideOutBottom, { params: { duration: '700ms'} })
+    };
+
+}

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.css

@@ -13,3 +13,8 @@
 igx-input-group+igx-input-group {
     margin-top: 24px;
 }
+
+.alertSection button {
+    width: 140px;
+    margin-right: 5px;
+}

src/app/dialog/dialog.sample.html

@@ -5,8 +5,13 @@
             <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()">
+            <div class="alertSection">
+                <button igxButton="raised" igxRipple (click)="alert.open()">Open Alert</button>
+                <button igxButton="flat" (click)="togglePosition()">Toggle position</button>
+            </div>
+
+            <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,48 @@
-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 newPositionSettings: PositionSettings = {
+        horizontalDirection: HorizontalAlignment.Center,
+        verticalDirection: VerticalAlignment.Middle,
+    };
+
+    public newAnimationSettings: PositionSettings = {
+        openAnimation: useAnimation(slideInTop),
+        closeAnimation: useAnimation(slideOutBottom)
+    };
+
+    public ngOnInit() {
+        // Set position settings on ngOnInit
+        // this.alert.positionSettings = this.newAnimationSettings;
+
+        console.log(this.alert.positionSettings);
+    }
+
+    togglePosition() {
+        this.alert.positionSettings = this.alert.positionSettings === this.positionSettings ?
+            this.newPositionSettings : this.positionSettings;
+    }
 
     onDialogOKSelected(args) {
         // args.event - event