feat(dialogs): extend MatDialogConfig to leverage all the dialog conf…

…ig (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

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

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',
     });
   }
 

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;
 }

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;
 }

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;
+}

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;
   }