From eb2ca43b6a2738bb285bfc251a2bf0189c60b454 Mon Sep 17 00:00:00 2001
From: Ed Morales <emoralesb05@gmail.com>
Date: Wed, 3 Jan 2018 16:22:14 -0800
Subject: [PATCH] feat(dialogs): extend MatDialogConfig to leverage all the
 dialog config (closes #1011) (#1059)

* feat(dialogs): extend MatDialogConfig to leverage all the dialog configurations

we are going away from hardcoding widths so this is technically a breaking change, but now you will be able to pass any widths and update the dialog configuration as needed.. also long words wrap properly

* feat(): add 400px width by default
---
 .../components/dialogs/dialogs.component.html      |  3 +++
 .../components/dialogs/dialogs.component.ts        |  1 +
 .../alert-dialog/alert-dialog.component.scss       | 11 ++---------
 .../confirm-dialog/confirm-dialog.component.scss   | 11 ++---------
 .../prompt-dialog/prompt-dialog.component.scss     | 14 ++++----------
 .../core/dialogs/services/dialog.service.ts        | 10 +++++-----
 6 files changed, 17 insertions(+), 33 deletions(-)

diff --git a/src/app/components/components/dialogs/dialogs.component.html b/src/app/components/components/dialogs/dialogs.component.html
index e219c5147b..5938c8b5d5 100644
--- a/src/app/components/components/dialogs/dialogs.component.html
+++ b/src/app/components/components/dialogs/dialogs.component.html
@@ -48,6 +48,7 @@ <h3>Example(after setup):</h3>
               viewContainerRef: this._viewContainerRef, //OPTIONAL
               title: 'Alert', //OPTIONAL, hides if not provided
               closeButton: 'Close', //OPTIONAL, defaults to 'CLOSE'
+              width: '400px', //OPTIONAL, defaults to 400px
             });
           }
 
@@ -59,6 +60,7 @@ <h3>Example(after setup):</h3>
               title: 'Confirm', //OPTIONAL, hides if not provided
               cancelButton: 'Disagree', //OPTIONAL, defaults to 'CANCEL'
               acceptButton: 'Agree', //OPTIONAL, defaults to 'ACCEPT'
+              width: '500px', //OPTIONAL, defaults to 400px
             }).afterClosed().subscribe((accept: boolean) => {
               if (accept) {
                 // DO SOMETHING
@@ -77,6 +79,7 @@ <h3>Example(after setup):</h3>
               value: 'Prepopulated value', //OPTIONAL
               cancelButton: 'Cancel', //OPTIONAL, defaults to 'CANCEL'
               acceptButton: 'Ok', //OPTIONAL, defaults to 'ACCEPT'
+              width: '400px', //OPTIONAL, defaults to 400px
             }).afterClosed().subscribe((newValue: string) => {
               if (newValue) {
                 // DO SOMETHING
diff --git a/src/app/components/components/dialogs/dialogs.component.ts b/src/app/components/components/dialogs/dialogs.component.ts
index 62a3eaeb23..42e3f0bf50 100644
--- a/src/app/components/components/dialogs/dialogs.component.ts
+++ b/src/app/components/components/dialogs/dialogs.component.ts
@@ -55,6 +55,7 @@ export class DialogsDemoComponent {
       message: 'This is how simple it is to create a confirm with this wrapper service. Do you agree?',
       cancelButton: 'Disagree',
       acceptButton: 'Agree',
+      width: '500px',
     });
   }
 
diff --git a/src/platform/core/dialogs/alert-dialog/alert-dialog.component.scss b/src/platform/core/dialogs/alert-dialog/alert-dialog.component.scss
index 267af23164..b777100f60 100644
--- a/src/platform/core/dialogs/alert-dialog/alert-dialog.component.scss
+++ b/src/platform/core/dialogs/alert-dialog/alert-dialog.component.scss
@@ -1,10 +1,3 @@
-@media (min-width: 600px) {
-  td-dialog {
-    width: 400px;
-  }
-}
-@media (max-width: 599px) {
-  td-dialog {
-    width: 250px;
-  }
+.td-dialog-message {
+  word-break: break-word;
 }
diff --git a/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.scss b/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.scss
index 267af23164..b777100f60 100644
--- a/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.scss
+++ b/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.scss
@@ -1,10 +1,3 @@
-@media (min-width: 600px) {
-  td-dialog {
-    width: 400px;
-  }
-}
-@media (max-width: 599px) {
-  td-dialog {
-    width: 250px;
-  }
+.td-dialog-message {
+  word-break: break-word;
 }
diff --git a/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.scss b/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.scss
index 1723c4145f..519e53fa01 100644
--- a/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.scss
+++ b/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.scss
@@ -1,13 +1,3 @@
-@media (min-width: 600px) {
-  td-dialog {
-    width: 400px;
-  }
-}
-@media (max-width: 599px) {
-  td-dialog {
-    width: 250px;
-  }
-}
 .td-dialog-input-wrapper {
   // layout row
   flex-direction: row;
@@ -19,3 +9,7 @@
     box-sizing: border-box;
   }
 }
+
+.td-dialog-message {
+  word-break: break-word;
+}
diff --git a/src/platform/core/dialogs/services/dialog.service.ts b/src/platform/core/dialogs/services/dialog.service.ts
index 0edcdcb7e3..75cb727575 100644
--- a/src/platform/core/dialogs/services/dialog.service.ts
+++ b/src/platform/core/dialogs/services/dialog.service.ts
@@ -6,11 +6,9 @@ import { TdAlertDialogComponent } from '../alert-dialog/alert-dialog.component';
 import { TdConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component';
 import { TdPromptDialogComponent } from '../prompt-dialog/prompt-dialog.component';
 
-export interface IDialogConfig {
+export interface IDialogConfig extends MatDialogConfig {
   title?: string;
   message: string;
-  viewContainerRef?: ViewContainerRef;
-  disableClose?: boolean;
 }
 
 export interface IAlertConfig extends IDialogConfig {
@@ -137,8 +135,10 @@ export class TdDialogService {
 
   private _createConfig(config: MatDialogConfig): MatDialogConfig {
     let dialogConfig: MatDialogConfig = new MatDialogConfig();
-    dialogConfig.viewContainerRef = config.viewContainerRef;
-    dialogConfig.disableClose = config.disableClose;
+    dialogConfig.width = '400px';
+    for (let key in config) {
+      dialogConfig[key] = config[key];
+    }
     return dialogConfig;
   }