feat(MdDialog): add material2 overlay based dialog

 - use portals and Overlay service to position and display user dialog content.
 - add basic documentation of API and usage
 - add example for three types of dialogs

modules/docs/src/app/examples/dialog/dialog-basic-usage.component.html

@@ -1,31 +1,71 @@
 <div class="md-padding" id="popupContainer">
   <p class="inset">
-    Open a dialog over the app's content. Press escape or click outside to close the dialog and
-    send focus back to the triggering button.
+    Open a dialog over the app's content. Press escape to close the dialog and send focus back to the triggering button.
   </p>
 
-  <md-dialog #dialog>
-    <md-dialog-title>Test Title</md-dialog-title>
-    Test Content
-  </md-dialog>
 
   <div class="dialog-demo-content" layout-gt-md="row" layout="column" layout-margin>
-    <button md-raised-button class="md-primary" (click)="dialog.show($event)" flex="auto">
+
+    <md-dialog #alert>
+      <md-dialog-title>This is an alert title</md-dialog-title>
+      You can specify some description text in here
+      <md-dialog-actions ok="Got It"></md-dialog-actions>
+    </md-dialog>
+    <button md-raised-button class="md-primary" (click)="alert.show()" flex="auto">
       Alert Dialog
     </button>
-    <button md-raised-button class="md-primary" (click)="showConfirm($event)" flex="auto">
+
+    <md-dialog #confirm (onClose)="confirmClose($event)">
+      <md-dialog-title>Would you like to delete your debt?</md-dialog-title>
+      All of the banks have agreed to forgive you your debts.
+      <md-dialog-actions ok="Please do it!" cancel="Sounds like a scam"></md-dialog-actions>
+    </md-dialog>
+    <button md-raised-button class="md-primary" (click)="confirm.show()" flex="auto">
       Confirm Dialog
     </button>
-    <button md-raised-button class="md-primary" (click)="showAdvanced($event)" flex="auto">
+
+    <md-dialog #custom (onClose)="customClose($event)">
+      <form>
+        <h2 class="md-title">{{fruit}} (Fruit)</h2>
+        <div>
+          <p>
+            The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous
+            tropical fruiting trees, cultivated mostly for edible fruit. The majority of these species
+            are found in nature as wild mangoes. They all belong to the flowering plant family
+            Anacardiaceae. The mango is native to South and Southeast Asia, from where it has been
+            distributed worldwide to become one of the most cultivated fruits in the tropics.
+          </p>
+          <p>
+            The highest concentration of Mangifera genus is in the western part of Malesia (Sumatra,
+            Java and Borneo) and in Burma and India. While other Mangifera species (e.g. horse mango,
+            M. foetida) are also grown on a more localized basis, Mangifera indica&mdash;the "common
+            mango" or "Indian mango"&mdash;is the only mango tree commonly cultivated in many tropical
+            and subtropical regions.
+          </p>
+          <p>
+            It originated in Indian subcontinent (present day India and Pakistan) and Burma. It is the
+            national fruit of India, Pakistan, and the Philippines, and the national tree of
+            Bangladesh. In several cultures, its fruit and leaves are ritually used as floral
+            decorations at weddings, public celebrations, and religious ceremonies.
+          </p>
+        </div>
+      </form>
+      <md-dialog-actions>
+        <a md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank">
+          <span>More on Wikipedia</span>
+        </a>
+        <span flex></span>
+        <button md-button (click)="custom.close(false)">
+          <span>Ignore</span>
+        </button>
+        <button md-button class="md-primary" (click)="custom.close(true)">
+          <span>Interesting...</span>
+        </button>
+      </md-dialog-actions>
+    </md-dialog>
+    <button md-raised-button class="md-primary" flex="auto" (click)="custom.show()">
       Custom Dialog
     </button>
-    <div hide-gt-sm layout="row" layout-align="center center" flex="100">
-      <md-checkbox [(checked)]="customFullscreen" aria-label="Fullscreen Custom Dialog">Custom Dialog Fullscreen
-      </md-checkbox>
-    </div>
-    <button md-raised-button disabled class="md-primary" (click)="showTabDialog($event)" flex="auto">
-      Tab Dialog
-    </button>
   </div>
   <p class="footer">Note: The <b>Confirm</b> dialog sets <code>config.clickOutsideToClose(false)</code>.</p>
 

modules/docs/src/app/examples/dialog/dialog-basic-usage.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component} from '@angular/core';
 import {MATERIAL_DIRECTIVES} from 'ng2-material';
 
 @Component({
@@ -9,51 +9,21 @@ import {MATERIAL_DIRECTIVES} from 'ng2-material';
   directives: [MATERIAL_DIRECTIVES]
 })
 export class DialogBasicUsageComponent {
-}
+  status: string = '';
 
-@Component({
-  selector: 'dialog-custom',
-  template: `
-  <form>
-    <h2 class="md-title">{{fruit}} (Fruit)</h2>
-    <div>
-      <p>
-        The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous
-        tropical fruiting trees, cultivated mostly for edible fruit. The majority of these species
-        are found in nature as wild mangoes. They all belong to the flowering plant family
-        Anacardiaceae. The mango is native to South and Southeast Asia, from where it has been
-        distributed worldwide to become one of the most cultivated fruits in the tropics.
-      </p>
-      <p>
-        The highest concentration of Mangifera genus is in the western part of Malesia (Sumatra,
-        Java and Borneo) and in Burma and India. While other Mangifera species (e.g. horse mango,
-        M. foetida) are also grown on a more localized basis, Mangifera indica&mdash;the "common
-        mango" or "Indian mango"&mdash;is the only mango tree commonly cultivated in many tropical
-        and subtropical regions.
-      </p>
-      <p>
-        It originated in Indian subcontinent (present day India and Pakistan) and Burma. It is the
-        national fruit of India, Pakistan, and the Philippines, and the national tree of
-        Bangladesh. In several cultures, its fruit and leaves are ritually used as floral
-        decorations at weddings, public celebrations, and religious ceremonies.
-      </p>
-    </div>
-    <md-dialog-actions>
-      <a md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank">
-        <span>More on Wikipedia</span>
-      </a>
-      <span flex></span>
-      <button md-button (click)="dialog.close(false)">
-        <span>Ignore</span>
-      </button>
-      <button md-button class="md-primary" (click)="dialog.close(true)">
-        <span>Interesting...</span>
-      </button>
-    </md-dialog-actions>
-  </form>
-  `,
-  directives: [MATERIAL_DIRECTIVES]
-})
-class DialogCustom {
-  @Input() fruit: string;
+  confirmClose(forgiveDebt: boolean) {
+    if (forgiveDebt) {
+      this.status = 'You decided to get rid of your debt.';
+    } else {
+      this.status = 'You decided to keep your debt.';
+    }
+  }
+
+  customClose(interesting: boolean) {
+    if (interesting) {
+      this.status = 'That article was interesting.';
+    } else {
+      this.status = 'Look for something else.';
+    }
+  }
 }

modules/docs/src/app/examples/dialog/readme.md

@@ -1,4 +1,4 @@
 
 ```
-This example is currently broken.
+These components are a work in progress.
 ```

src/components/dialog/dialog-actions.scss

@@ -0,0 +1,28 @@
+.md-dialog {
+  md-dialog-actions {
+    display: flex;
+    order: 2;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: flex-end;
+    padding-top: $baseline-grid * 3;
+    padding-right: $baseline-grid;
+    padding-left: $baseline-grid * 2;
+
+    // Align md-actions outside of the padding of .md-dialog
+    margin-bottom: -$baseline-grid * 3;
+    margin-left: -$baseline-grid * 3;
+    margin-right: -$baseline-grid * 3;
+
+    right: -$baseline-grid * 3;
+    min-height: $baseline-grid * 6.5;
+    overflow: hidden;
+
+    [md-button], [md-raised-button] {
+      margin-bottom: $baseline-grid;
+      margin-left: $baseline-grid;
+      margin-right: 0;
+      margin-top: $baseline-grid;
+    }
+  }
+}

src/components/dialog/dialog-actions.ts

@@ -0,0 +1,20 @@
+import {Component, Input, ChangeDetectionStrategy} from '@angular/core';
+import {MdDialog} from './dialog';
+
+@Component({
+  selector: 'md-dialog-actions',
+  template: `
+  <button *ngIf="cancel" md-button type="button" (click)="dialog.close(false)">
+    <span>{{ cancel }}</span>
+  </button>
+  <button *ngIf="ok" md-button class="md-primary" type="button" (click)="dialog.close(true)">
+    <span>{{ ok }}</span>
+  </button> 
+  <ng-content></ng-content>`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MdDialogActions {
+  @Input() cancel: string;
+  @Input() ok: string;
+  @Input() dialog: MdDialog;
+}

src/components/dialog/dialog-portal.ts

@@ -0,0 +1,9 @@
+import {Directive, ViewContainerRef, TemplateRef} from '@angular/core';
+import {TemplatePortalDirective} from '@angular2-material/core';
+
+@Directive({selector: '[mdDialogPortal]'})
+export class MdDialogPortal extends TemplatePortalDirective {
+  constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
+    super(templateRef, viewContainerRef);
+  }
+}

src/components/dialog/dialog-title.scss

@@ -0,0 +1,8 @@
+@import "../../core/style/typography";
+
+.md-dialog {
+  md-dialog-title {
+    @extend .md-headline;
+    margin-bottom: 20px;
+  }
+}

src/components/dialog/dialog-title.ts

@@ -0,0 +1,11 @@
+import {Component, Input, ChangeDetectionStrategy} from '@angular/core';
+import {MdDialog} from './dialog';
+
+@Component({
+  selector: 'md-dialog-title',
+  template: `<h2 *ngIf="title">{{title}}</h2><ng-content></ng-content>`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MdDialogTitle {
+  @Input() title: string;
+}

src/components/dialog/dialog.scss

@@ -1,14 +1,12 @@
 @import "../../core/style/variables";
 @import "../../core/style/shadows";
 @import "../../core/style/default-theme";
+@import "../../core/style/typography";
 
+md-dialog {
+  display: none;
+}
 .md-dialog {
-  position: fixed;
-  z-index: 80;
-
-  /** Center the dialog. */
-  top: 50%;
-  left: 50%;
   min-width: 300px;
   min-height: 100px;
 
@@ -20,62 +18,20 @@
 
   opacity: 0;
   transition: $swift-ease-out;
-  transform: translate3d(-50%, -50%, 0) scale(0.2);
+  transform: scale(0.2);
 
   order: 1;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 
-  &:not([layout=row]) > * > *:first-child:not(.md-subheader) {
-    margin-top: 0;
-  }
-
   &:focus {
     outline: none;
   }
 
   &.md-active {
     opacity: 1;
-    transition: $swift-ease-out;
-    transform: translate3d(-50%, -50%, 0) scale(1.0);
-    -webkit-filter: blur(0px);
-    -moz-filter: blur(0px);
-    -ms-filter: blur(0px);
-    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
-    filter: none;
-  }
-
-  &.md-dialog-absolute {
-    position: absolute;
-  }
-
-  .md-actions, md-dialog-actions {
-    display: flex;
-    order: 2;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: flex-end;
-    padding-top: $baseline-grid * 3;
-    padding-right: $baseline-grid;
-    padding-left: $baseline-grid * 2;
-
-    // Align md-actions outside of the padding of .md-dialog
-    margin-bottom: -$baseline-grid * 3;
-    margin-left: -$baseline-grid * 3;
-    margin-right: -$baseline-grid * 3;
-
-    right: -$baseline-grid * 3;
-    min-height: $baseline-grid * 6.5;
-    overflow: hidden;
-
-    [md-button], [md-raised-button] {
-      margin-bottom: $baseline-grid;
-      margin-left: $baseline-grid;
-      margin-right: 0;
-      margin-top: $baseline-grid;
-    }
+    transform: perspective(1px) scale(1.0);
   }
-
 }
 
 // Theme
@@ -93,4 +49,5 @@ $dialog-border-radius: 4px !default;
   }
 }
 
-
+@import "dialog-actions";
+@import "dialog-title";