From 02daf3f2fabbbfb49a84dfa517cb87a86061e105 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 5 Feb 2017 13:17:32 +0100
Subject: [PATCH 1/5] feat(dialog): allow for the dialog dimensions to be
 updated

Adds an `updateDimensions` method to the `MdDialogRef` which allows the user to update a dialog's dimensions after it has been created.

Fixes #2930.
---
 src/demo-app/dialog/dialog-demo.ts | 18 +++++++++-
 src/lib/core/core.ts               |  1 +
 src/lib/dialog/dialog-ref.ts       | 28 +++++++++++++++-
 src/lib/dialog/dialog.spec.ts      | 20 +++++++++++
 src/lib/dialog/dialog.ts           | 54 +++++++++---------------------
 5 files changed, 81 insertions(+), 40 deletions(-)

diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts
index f82ecbfbce4c..89bc0fec9e11 100644
--- a/src/demo-app/dialog/dialog-demo.ts
+++ b/src/demo-app/dialog/dialog-demo.ts
@@ -72,12 +72,28 @@ export class DialogDemo {
   <p>It's Jazz!</p>
   <p><label>How much? <input #howMuch></label></p>
   <p> {{ data.message }} </p>
-  <button type="button" (click)="dialogRef.close(howMuch.value)">Close dialog</button>`
+  <button type="button" (click)="dialogRef.close(howMuch.value)">Close dialog</button>
+  <button (click)="togglePosition()">Change position</button>`
 })
 export class JazzDialog {
+  private _positionToggle = false;
+
   constructor(
     public dialogRef: MdDialogRef<JazzDialog>,
     @Inject(MD_DIALOG_DATA) public data: any) { }
+
+  togglePosition(): void {
+    this._positionToggle = !this._positionToggle;
+
+    if (this._positionToggle) {
+      this.dialogRef.updateDimensions(null, null, {
+        top: '25px',
+        left: '25px'
+      });
+    } else {
+      this.dialogRef.updateDimensions();
+    }
+  }
 }
 
 
diff --git a/src/lib/core/core.ts b/src/lib/core/core.ts
index ac0e148798dd..46d33184499d 100644
--- a/src/lib/core/core.ts
+++ b/src/lib/core/core.ts
@@ -53,6 +53,7 @@ export {
   OverlayOrigin,
   OverlayModule,
 } from './overlay/overlay-directives';
+export * from './overlay/position/global-position-strategy';
 export * from './overlay/position/connected-position-strategy';
 export * from './overlay/position/connected-position';
 export {ScrollDispatcher} from './overlay/scroll/scroll-dispatcher';
diff --git a/src/lib/dialog/dialog-ref.ts b/src/lib/dialog/dialog-ref.ts
index fa70a0b78741..d7df7e31b1a0 100644
--- a/src/lib/dialog/dialog-ref.ts
+++ b/src/lib/dialog/dialog-ref.ts
@@ -1,4 +1,5 @@
-import {OverlayRef} from '../core';
+import {OverlayRef, GlobalPositionStrategy} from '../core';
+import {DialogPosition} from './dialog-config';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 import {MdDialogContainer, MdDialogContainerAnimationState} from './dialog-container';
@@ -50,4 +51,29 @@ export class MdDialogRef<T> {
   afterClosed(): Observable<any> {
     return this._afterClosed.asObservable();
   }
+
+  /**
+   * Updates the dialog's dimensions.
+   * @param width New width of the dialog.
+   * @param height New height of the dialog.
+   * @param position New position of the dialog.
+   */
+  updateDimensions(width?: string, height?: string, position?: DialogPosition): void {
+    let strategy = this._overlayRef.getState().positionStrategy as GlobalPositionStrategy;
+
+    if (position && (position.left || position.right)) {
+      position.left ? strategy.left(position.left) : strategy.right(position.right);
+    } else {
+      strategy.centerHorizontally();
+    }
+
+    if (position && (position.top || position.bottom)) {
+      position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);
+    } else {
+      strategy.centerVertically();
+    }
+
+    strategy.width(width).height(height);
+    this._overlayRef.updatePosition();
+  }
 }
diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts
index 53e67ca2066a..1a56aeba645f 100644
--- a/src/lib/dialog/dialog.spec.ts
+++ b/src/lib/dialog/dialog.spec.ts
@@ -274,6 +274,26 @@ describe('MdDialog', () => {
     expect(overlayPane.style.marginRight).toBe('125px');
   });
 
+  it('should allow for the dimensions to be updated', () => {
+    let dialogRef = dialog.open(PizzaMsg, {
+      position: {
+        left: '250px'
+      }
+    });
+
+    viewContainerFixture.detectChanges();
+
+    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+
+    expect(overlayPane.style.marginLeft).toBe('250px');
+
+    dialogRef.updateDimensions(null, null, {
+      left: '500px'
+    });
+
+    expect(overlayPane.style.marginLeft).toBe('500px');
+  });
+
   it('should close all of the dialogs', async(() => {
     dialog.open(PizzaMsg);
     dialog.open(PizzaMsg);
diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
index 3cc1c57ebe67..4c1c3efca996 100644
--- a/src/lib/dialog/dialog.ts
+++ b/src/lib/dialog/dialog.ts
@@ -92,11 +92,16 @@ export class MdDialog {
 
   /**
    * Creates the overlay into which the dialog will be loaded.
-   * @param dialogConfig The dialog configuration.
+   * @param config The dialog configuration.
    * @returns A promise resolving to the OverlayRef for the created overlay.
    */
-  private _createOverlay(dialogConfig: MdDialogConfig): OverlayRef {
-    let overlayState = this._getOverlayState(dialogConfig);
+  private _createOverlay(config: MdDialogConfig): OverlayRef {
+    let overlayState = new OverlayState();
+    let strategy = this._overlay.position().global();
+
+    overlayState.hasBackdrop = true;
+    overlayState.positionStrategy = strategy;
+
     return this._overlay.create(overlayState);
   }
 
@@ -129,10 +134,11 @@ export class MdDialog {
       componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
       dialogContainer: MdDialogContainer,
       overlayRef: OverlayRef,
-      config?: MdDialogConfig): MdDialogRef<T> {
+      config: MdDialogConfig): MdDialogRef<T> {
     // Create a reference to the dialog we're creating in order to give the user a handle
     // to modify and close it.
-    let dialogRef = new MdDialogRef(overlayRef, dialogContainer) as MdDialogRef<T>;
+
+    let dialogRef = new MdDialogRef<T>(overlayRef, dialogContainer);
 
     if (!config.disableClose) {
       // When the dialog backdrop is clicked, we want to close it.
@@ -153,37 +159,9 @@ export class MdDialog {
       dialogRef.componentInstance = contentRef.instance;
     }
 
-    return dialogRef;
-  }
-
-  /**
-   * Creates an overlay state from a dialog config.
-   * @param dialogConfig The dialog configuration.
-   * @returns The overlay configuration.
-   */
-  private _getOverlayState(dialogConfig: MdDialogConfig): OverlayState {
-    let state = new OverlayState();
-    let strategy = this._overlay.position().global();
-    let position = dialogConfig.position;
-
-    state.hasBackdrop = true;
-    state.positionStrategy = strategy;
-
-    if (position && (position.left || position.right)) {
-      position.left ? strategy.left(position.left) : strategy.right(position.right);
-    } else {
-      strategy.centerHorizontally();
-    }
-
-    if (position && (position.top || position.bottom)) {
-      position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);
-    } else {
-      strategy.centerVertically();
-    }
+    dialogRef.updateDimensions(config.width, config.height, config.position);
 
-    strategy.width(dialogConfig.width).height(dialogConfig.height);
-
-    return state;
+    return dialogRef;
   }
 
   /**
@@ -221,10 +199,10 @@ export class MdDialog {
 
 /**
  * Applies default options to the dialog config.
- * @param dialogConfig Config to be modified.
+ * @param config Config to be modified.
  * @returns The new configuration object.
  */
-function _applyConfigDefaults(dialogConfig: MdDialogConfig): MdDialogConfig {
-  return extendObject(new MdDialogConfig(), dialogConfig);
+function _applyConfigDefaults(config: MdDialogConfig): MdDialogConfig {
+  return extendObject(new MdDialogConfig(), config);
 }
 

From fc6d7c3083a736c100ca27af7ef99c441fda65f7 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 4 Mar 2017 10:21:43 +0100
Subject: [PATCH 2/5] refactor: split dimensions method into two

---
 src/demo-app/dialog/dialog-demo.ts | 19 ++++++++++---------
 src/lib/dialog/dialog-ref.ts       | 29 ++++++++++++++++++++++-------
 src/lib/dialog/dialog.spec.ts      | 20 ++++++++++++++++----
 src/lib/dialog/dialog.ts           |  4 +++-
 4 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts
index 89bc0fec9e11..57ed7c9e0dbd 100644
--- a/src/demo-app/dialog/dialog-demo.ts
+++ b/src/demo-app/dialog/dialog-demo.ts
@@ -73,25 +73,26 @@ export class DialogDemo {
   <p><label>How much? <input #howMuch></label></p>
   <p> {{ data.message }} </p>
   <button type="button" (click)="dialogRef.close(howMuch.value)">Close dialog</button>
-  <button (click)="togglePosition()">Change position</button>`
+  <button (click)="togglePosition()">Change dimensions</button>`
 })
 export class JazzDialog {
-  private _positionToggle = false;
+  private _dimesionToggle = false;
 
   constructor(
     public dialogRef: MdDialogRef<JazzDialog>,
     @Inject(MD_DIALOG_DATA) public data: any) { }
 
   togglePosition(): void {
-    this._positionToggle = !this._positionToggle;
+    this._dimesionToggle = !this._dimesionToggle;
 
-    if (this._positionToggle) {
-      this.dialogRef.updateDimensions(null, null, {
-        top: '25px',
-        left: '25px'
-      });
+    if (this._dimesionToggle) {
+      this.dialogRef
+        .updateDimensions('500px', '500px')
+        .updatePosition({ top: '25px', left: '25px' });
     } else {
-      this.dialogRef.updateDimensions();
+      this.dialogRef
+        .updateDimensions()
+        .updatePosition();
     }
   }
 }
diff --git a/src/lib/dialog/dialog-ref.ts b/src/lib/dialog/dialog-ref.ts
index d7df7e31b1a0..f58856273616 100644
--- a/src/lib/dialog/dialog-ref.ts
+++ b/src/lib/dialog/dialog-ref.ts
@@ -53,13 +53,11 @@ export class MdDialogRef<T> {
   }
 
   /**
-   * Updates the dialog's dimensions.
-   * @param width New width of the dialog.
-   * @param height New height of the dialog.
-   * @param position New position of the dialog.
+   * Updates the dialog's position.
+   * @param position New dialog position.
    */
-  updateDimensions(width?: string, height?: string, position?: DialogPosition): void {
-    let strategy = this._overlayRef.getState().positionStrategy as GlobalPositionStrategy;
+  updatePosition(position?: DialogPosition): this {
+    let strategy = this._getPositionStrategy();
 
     if (position && (position.left || position.right)) {
       position.left ? strategy.left(position.left) : strategy.right(position.right);
@@ -73,7 +71,24 @@ export class MdDialogRef<T> {
       strategy.centerVertically();
     }
 
-    strategy.width(width).height(height);
     this._overlayRef.updatePosition();
+
+    return this;
+  }
+
+  /**
+   * Updates the dialog's width and height.
+   * @param width New width of the dialog.
+   * @param height New height of the dialog.
+   */
+  updateDimensions(width = 'auto', height = 'auto'): this {
+    this._getPositionStrategy().width(width).height(height);
+    this._overlayRef.updatePosition();
+    return this;
+  }
+
+  /** Fetches the position strategy object from the overlay ref. */
+  private _getPositionStrategy(): GlobalPositionStrategy {
+    return this._overlayRef.getState().positionStrategy as GlobalPositionStrategy;
   }
 }
diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts
index 1a56aeba645f..e905f99369d1 100644
--- a/src/lib/dialog/dialog.spec.ts
+++ b/src/lib/dialog/dialog.spec.ts
@@ -274,7 +274,7 @@ describe('MdDialog', () => {
     expect(overlayPane.style.marginRight).toBe('125px');
   });
 
-  it('should allow for the dimensions to be updated', () => {
+  it('should allow for the position to be updated', () => {
     let dialogRef = dialog.open(PizzaMsg, {
       position: {
         left: '250px'
@@ -287,13 +287,25 @@ describe('MdDialog', () => {
 
     expect(overlayPane.style.marginLeft).toBe('250px');
 
-    dialogRef.updateDimensions(null, null, {
-      left: '500px'
-    });
+    dialogRef.updatePosition({ left: '500px' });
 
     expect(overlayPane.style.marginLeft).toBe('500px');
   });
 
+  it('should allow for the dimensions to be updated', () => {
+    let dialogRef = dialog.open(PizzaMsg, { width: '100px' });
+
+    viewContainerFixture.detectChanges();
+
+    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+
+    expect(overlayPane.style.width).toBe('100px');
+
+    dialogRef.updateDimensions('200px');
+
+    expect(overlayPane.style.width).toBe('200px');
+  });
+
   it('should close all of the dialogs', async(() => {
     dialog.open(PizzaMsg);
     dialog.open(PizzaMsg);
diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
index 4c1c3efca996..a6442e17cb4e 100644
--- a/src/lib/dialog/dialog.ts
+++ b/src/lib/dialog/dialog.ts
@@ -159,7 +159,9 @@ export class MdDialog {
       dialogRef.componentInstance = contentRef.instance;
     }
 
-    dialogRef.updateDimensions(config.width, config.height, config.position);
+    dialogRef
+      .updateDimensions(config.width, config.height)
+      .updatePosition(config.position);
 
     return dialogRef;
   }

From 6b9b163bcd7ab579d2ddab25a29dc3f59391f18e Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Fri, 10 Mar 2017 20:55:14 +0100
Subject: [PATCH 3/5] refactor: rename updateDimensions to updateSize

---
 src/lib/dialog/dialog-ref.ts  | 2 +-
 src/lib/dialog/dialog.spec.ts | 2 +-
 src/lib/dialog/dialog.ts      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/dialog/dialog-ref.ts b/src/lib/dialog/dialog-ref.ts
index f58856273616..f8ad6488e623 100644
--- a/src/lib/dialog/dialog-ref.ts
+++ b/src/lib/dialog/dialog-ref.ts
@@ -81,7 +81,7 @@ export class MdDialogRef<T> {
    * @param width New width of the dialog.
    * @param height New height of the dialog.
    */
-  updateDimensions(width = 'auto', height = 'auto'): this {
+  updateSize(width = 'auto', height = 'auto'): this {
     this._getPositionStrategy().width(width).height(height);
     this._overlayRef.updatePosition();
     return this;
diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts
index e905f99369d1..d1e547888af4 100644
--- a/src/lib/dialog/dialog.spec.ts
+++ b/src/lib/dialog/dialog.spec.ts
@@ -301,7 +301,7 @@ describe('MdDialog', () => {
 
     expect(overlayPane.style.width).toBe('100px');
 
-    dialogRef.updateDimensions('200px');
+    dialogRef.updateSize('200px');
 
     expect(overlayPane.style.width).toBe('200px');
   });
diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
index a6442e17cb4e..89b6dca75d5a 100644
--- a/src/lib/dialog/dialog.ts
+++ b/src/lib/dialog/dialog.ts
@@ -160,7 +160,7 @@ export class MdDialog {
     }
 
     dialogRef
-      .updateDimensions(config.width, config.height)
+      .updateSize(config.width, config.height)
       .updatePosition(config.position);
 
     return dialogRef;

From 4f44a3d4c8fb0d8806edcc5811097911aefcee7e Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Fri, 10 Mar 2017 21:04:57 +0100
Subject: [PATCH 4/5] refactor: add back _getOverlayState method

---
 src/lib/dialog/dialog.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
index 89b6dca75d5a..3ef37383b4fe 100644
--- a/src/lib/dialog/dialog.ts
+++ b/src/lib/dialog/dialog.ts
@@ -96,13 +96,21 @@ export class MdDialog {
    * @returns A promise resolving to the OverlayRef for the created overlay.
    */
   private _createOverlay(config: MdDialogConfig): OverlayRef {
-    let overlayState = new OverlayState();
-    let strategy = this._overlay.position().global();
+    let overlayState = this._getOverlayState(config);
+    return this._overlay.create(overlayState);
+  }
 
+  /**
+   * Creates an overlay state from a dialog config.
+   * @param dialogConfig The dialog configuration.
+   * @returns The overlay configuration.
+   */
+  private _getOverlayState(dialogConfig: MdDialogConfig): OverlayState {
+    let overlayState = new OverlayState();
     overlayState.hasBackdrop = true;
-    overlayState.positionStrategy = strategy;
+    overlayState.positionStrategy = this._overlay.position().global();
 
-    return this._overlay.create(overlayState);
+    return overlayState;
   }
 
   /**

From 946397dcfb1ca950e5ab9a7f5dc617992387cfd3 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Fri, 10 Mar 2017 21:20:45 +0100
Subject: [PATCH 5/5] chore: fix aot issue

---
 src/demo-app/dialog/dialog-demo.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts
index 57ed7c9e0dbd..5ccd67a0ec68 100644
--- a/src/demo-app/dialog/dialog-demo.ts
+++ b/src/demo-app/dialog/dialog-demo.ts
@@ -87,11 +87,11 @@ export class JazzDialog {
 
     if (this._dimesionToggle) {
       this.dialogRef
-        .updateDimensions('500px', '500px')
+        .updateSize('500px', '500px')
         .updatePosition({ top: '25px', left: '25px' });
     } else {
       this.dialogRef
-        .updateDimensions()
+        .updateSize()
         .updatePosition();
     }
   }