feat(dialog): Add clickOutsideToClose + mdc-dialog-button (#84)

* feat(dialog): Add [clickOutsideToClose] property.
* feat(dialog): Add [mdc-dialog-button] directive.
* feat(dialog): Add [action] boolean to apply accent color to dialog button.
* feat(demo): Add example alert without title bar.
* feat(demo): Add example dialog with selectable list items.

BREAKING CHANGE: Depreciated `mdc-dialog-button-accept` and `mdc-dialog-button-cancel`.
Use new [mdc-dialog-button] with [accept] and [cancel] properties instead.
  <mdc-dialog-footer>
    <button mdc-dialog-button [cancel]="true">Cancel</button>
    <button mdc-dialog-button [accept]="true">Discard</button>
  </mdc-dialog-footer>

src/demo-app/components/dialog-demo/dialog-demo.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="column" fxLayoutAlign="start start" class="mdc-padding">
+<div fxLayout="column" class="mdc-padding">
   <h1 mdc-typography-display1>Dialog</h1>
   <div mdc-typography-subheading2>Dialogs inform users about a specific task, require decisions, or involve multiple tasks.</div>
   <div class="info-banner" mdc-typography-subheading1>
@@ -14,7 +14,18 @@ <h1 mdc-typography-display1>Dialog</h1>
       <tbody>
         <tr>
           <td>mdc-dialog</td>
-          <td>The main component which is composed of mdc-dialog elements.</td>
+        </tr>
+      </tbody>
+      <thead>
+        <tr>
+          <th>Properties</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>clickOutsideCloses: boolean</td>
+          <td>Close the dialog if user clicks on the backdrop.</td>
         </tr>
       </tbody>
       <thead>
@@ -67,24 +78,61 @@ <h1 mdc-typography-display1>Dialog</h1>
         </tr>
         <tr>
           <td>mdc-dialog-header-title</td>
-          <td>A header title block.</td>
+          <td>Briefly describes the type of choice being made.</td>
         </tr>
         <tr>
           <td>mdc-dialog-body</td>
-          <td></td>
+          <td>Body content typically consists of text and/or UI control elements.</td>
         </tr>
         <tr>
           <td>mdc-dialog-footer</td>
-          <td></td>
+          <td>Place mdc-dialog-button's inside the footer.</td>
+        </tr>
+      </tbody>
+    </table>
+    <table>
+      <thead>
+        <tr>
+          <th>Directive</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>button[mdc-dialog-button]</td>
+        </tr>
+        <tr>
+          <td>a[mdc-dialog-button]</td>
+        </tr>
+      </tbody>
+      <thead>
+        <tr>
+          <th>Properties</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>accept: boolean</td>
+          <td>Closes the dialog and emits an accept() event.</td>
+        </tr>
+        <tr>
+          <td>cancel: boolean</td>
+          <td>Closes the dialog and emits an cancel() event.</td>
+        </tr>
+        <tr>
+          <td>action: boolean</td>
+          <td>Apply contrasting secondary color to button.</td>
         </tr>
       </tbody>
     </table>
   </div>
   <div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start start" class="mdc-padding">
-    <button mdc-button [primary]="true" [raised]="true" (click)="showDialog();">Show Dialog</button>
-    <button mdc-button [primary]="true" [raised]="true" (click)="showDialogScroll();">Show Scrolling Dialog</button>
+    <button mdc-button [primary]="true" [raised]="true" (click)="showDialog();">Simple Dialog</button>
+    <button mdc-button [primary]="true" [raised]="true" (click)="showDialogAlert();">Alert</button>
+    <button mdc-button [primary]="true" [raised]="true" (click)="showDialogScroll();">Scrolling Dialog</button>
+    <button mdc-button [primary]="true" [raised]="true" (click)="showDialogGmail();">No footer</button>
 
-<span mdc-typography-headline>Dialog</span>
+<span mdc-typography-headline>Simple Dialog</span>
 <pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog</span> #<span style="color:#89bdff">dialog</span>></span>
   <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header</span>></span>
     <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header-title</span>></span>
@@ -95,8 +143,8 @@ <h1 mdc-typography-display1>Dialog</h1>
     Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
   <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-body</span>></span>
   <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-footer</span>></span>
-    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> <span style="color:#e0c589">mdc-dialog-button-cancel</span>></span>Decline<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
-    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> <span style="color:#e0c589">mdc-dialog-button-accept</span>></span>Accept<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-dialog-button</span> [<span style="color:#e0c589">cancel</span>]=<span style="color:#65b042">"true"</span>></span>Decline<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-dialog-button</span> [<span style="color:#e0c589">action</span>]=<span style="color:#65b042">"true"</span> [<span style="color:#e0c589">accept</span>]=<span style="color:#65b042">"true"</span>></span>Accept<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
   <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-footer</span>></span>
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog</span>></span>
 </pre>
@@ -124,11 +172,47 @@ <h1 mdc-typography-display1>Dialog</h1>
     <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span>></span>
   <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-body</span>></span>
   <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-footer</span>></span>
-    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> <span style="color:#e0c589">mdc-dialog-button-cancel</span>></span>Decline<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
-    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> <span style="color:#e0c589">mdc-dialog-button-accept</span>></span>Accept<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-dialog-button</span> [<span style="color:#e0c589">cancel</span>]=<span style="color:#65b042">"true"</span>></span>Decline<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-dialog-button</span> [<span style="color:#e0c589">action</span>]=<span style="color:#65b042">"true"</span> [<span style="color:#e0c589">accept</span>]=<span style="color:#65b042">"true"</span>></span>Accept<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
   <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-footer</span>></span> 
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog</span>></span>
 </pre>
+
+<span mdc-typography-headline>Alert</span>
+<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog</span> #<span style="color:#89bdff">dialogalert</span> [<span style="color:#89bdff">clickOutsideToClose</span>]=<span style="color:#65b042">"false"</span>></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header</span>></span>
+      Discard draft?
+  <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header</span>></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-footer</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-dialog-button</span> [<span style="color:#e0c589">cancel</span>]=<span style="color:#65b042">"true"</span>></span>Cancel<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-dialog-button</span> [<span style="color:#e0c589">action</span>]=<span style="color:#65b042">"true"</span> [<span style="color:#e0c589">accept</span>]=<span style="color:#65b042">"true"</span>></span>Discard<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
+  <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-footer</span>></span>
+<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog</span>></span>
+</pre>
+
+<span mdc-typography-headline>No Footer</span>
+<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog</span> #<span style="color:#89bdff">dialoggmail</span> [<span style="color:#89bdff">clickOutsideToClose</span>]=<span style="color:#65b042">"false"</span>></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header</span>></span>
+    <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header-title</span>></span>
+      Set backup account
+    <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header-title</span>></span>
+  <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header</span>></span>
+  <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-body</span>></span>
+    <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span> [<span style="color:#89bdff">avatar</span>]=<span style="color:#65b042">"true"</span>></span>
+      <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span> (<span style="color:#89bdff">click</span>)=<span style="color:#65b042">"closeDialogGmail();"</span>></span>
+        <span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-start</span> <span style="color:#e0c589">material-icon</span> <span style="color:#e0c589">class</span>=<span style="color:#65b042">"grey-avatar"</span>></span>person<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>[email protected]
+      <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+      <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span> (<span style="color:#89bdff">click</span>)=<span style="color:#65b042">"closeDialogGmail();"</span>></span>
+        <span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-start</span> <span style="color:#e0c589">material-icon</span> <span style="color:#e0c589">class</span>=<span style="color:#65b042">"grey-avatar"</span>></span>person<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>[email protected]
+      <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+      <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span> (<span style="color:#89bdff">click</span>)=<span style="color:#65b042">"closeDialogGmail();"</span>></span>
+        <span style="color:#e0c589">&lt;<span style="color:#e0c589">i</span> <span style="color:#e0c589">mdc-list-item-start</span> <span style="color:#e0c589">material-icon</span> <span style="color:#e0c589">class</span>=<span style="color:#65b042">"grey-avatar"</span>></span>add<span style="color:#e0c589">&lt;/<span style="color:#e0c589">i</span>></span>add account
+      <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list-item</span>></span>
+    <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span>></span>
+  <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-body</span>></span>
+<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog</span>></span>
+</pre>
+
 <mdc-dialog #dialog>
   <mdc-dialog-header>
     <mdc-dialog-header-title>
@@ -139,8 +223,8 @@ <h1 mdc-typography-display1>Dialog</h1>
     Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
   </mdc-dialog-body>
   <mdc-dialog-footer>
-    <button mdc-button mdc-dialog-button-cancel>Decline</button>
-    <button mdc-button mdc-dialog-button-accept>Accept</button>
+    <button mdc-dialog-button [cancel]="true">Decline</button>
+    <button mdc-dialog-button [action]="true" [accept]="true">Accept</button>
   </mdc-dialog-footer>
 </mdc-dialog>
 
@@ -166,9 +250,40 @@ <h1 mdc-typography-display1>Dialog</h1>
     </mdc-list>
   </mdc-dialog-body>
   <mdc-dialog-footer>
-    <button mdc-button mdc-dialog-button-cancel>Decline</button>
-    <button mdc-button mdc-dialog-button-accept>Accept</button>
+    <button mdc-dialog-button [cancel]="true">Decline</button>
+    <button mdc-dialog-button [action]="true" [accept]="true">Accept</button>
   </mdc-dialog-footer> 
 </mdc-dialog>
+
+<mdc-dialog #dialogalert [clickOutsideToClose]="false">
+  <mdc-dialog-header>
+      Discard draft?
+  </mdc-dialog-header>
+  <mdc-dialog-footer>
+    <button mdc-dialog-button [cancel]="true">Cancel</button>
+    <button mdc-dialog-button [action]="true" [accept]="true">Discard</button>
+  </mdc-dialog-footer>
+</mdc-dialog>
+
+<mdc-dialog #dialoggmail [clickOutsideToClose]="false">
+  <mdc-dialog-header>
+    <mdc-dialog-header-title>
+      Set backup account
+    </mdc-dialog-header-title>
+  </mdc-dialog-header>
+  <mdc-dialog-body>
+    <mdc-list [avatar]="true">
+      <mdc-list-item (click)="closeDialogGmail();">
+        <i mdc-list-item-start material-icon class="grey-avatar">person</i>[email protected]
+      </mdc-list-item>
+      <mdc-list-item (click)="closeDialogGmail();">
+        <i mdc-list-item-start material-icon class="grey-avatar">person</i>[email protected]
+      </mdc-list-item>
+      <mdc-list-item (click)="closeDialogGmail();">
+        <i mdc-list-item-start material-icon class="grey-avatar">add</i>add account
+      </mdc-list-item>
+    </mdc-list>
+  </mdc-dialog-body>
+</mdc-dialog>
   </div>
-</div>
+</div>

src/demo-app/components/dialog-demo/dialog-demo.component.ts

@@ -9,6 +9,8 @@ import { DialogComponent } from '@angular-mdc/web';
 export class DialogDemoComponent {
   @ViewChild('dialog') dialog: DialogComponent;
   @ViewChild('dialogscroll') dialogScroll: DialogComponent;
+  @ViewChild('dialogalert') dialogAlert: DialogComponent;
+  @ViewChild('dialoggmail') dialogGmail: DialogComponent;
 
   showDialog() {
     this.dialog.show();
@@ -17,4 +19,16 @@ export class DialogDemoComponent {
   showDialogScroll() {
     this.dialogScroll.show();
   }
+
+  showDialogAlert() {
+    this.dialogAlert.show();
+  }
+
+  showDialogGmail() {
+    this.dialogGmail.show();
+  }
+
+  closeDialogGmail() {
+    this.dialogGmail.close();
+  }
 }

src/lib/button/button.component.ts

@@ -35,9 +35,9 @@ export class ButtonComponent implements OnChanges {
   set disabled(value) {
     this._disabled = toBoolean(value);
     if (this._disabled) {
-      this._renderer.setAttribute(this._root.nativeElement, "disabled", 'true');
+      this.renderer.setAttribute(this.elementRef.nativeElement, "disabled", 'true');
     } else {
-      this._renderer.removeAttribute(this._root.nativeElement, "disabled");
+      this.renderer.removeAttribute(this.elementRef.nativeElement, "disabled");
     }
   }
   @Input()
@@ -71,15 +71,15 @@ export class ButtonComponent implements OnChanges {
     return this.cardAction ? 'mdc-card__action' : '';
   }
   @HostListener('keypress', ['$event']) onkeypress(evt) {
-    this.handleKeyPress(evt);
+    this.handleKeyPress_(evt);
   }
   @HostListener('blur', ['$event']) blur(evt) {
-    this.handleBlur(evt);
+    this.handleBlur_(evt);
   }
 
   constructor(
-    private _renderer: Renderer2,
-    private _root: ElementRef,
+    public renderer: Renderer2,
+    public elementRef: ElementRef,
     private _ripple: Ripple) {
     this._ripple.init();
   }
@@ -96,7 +96,7 @@ export class ButtonComponent implements OnChanges {
     }
   }
 
-  private handleKeyPress(keyboardEvent: KeyboardEvent) {
+  private handleKeyPress_(keyboardEvent: KeyboardEvent) {
     let keyCode = keyboardEvent.keyCode;
     if (keyCode == KeyCodes.ENTER || isSpaceKey(keyboardEvent)) {
       this._ripple.active = true;
@@ -106,7 +106,7 @@ export class ButtonComponent implements OnChanges {
     }
   }
 
-  private handleBlur(focusEvent: FocusEvent) {
+  private handleBlur_(focusEvent: FocusEvent) {
     this._ripple.active = false;
   }
 }