Merge branch 'master' into dialog-animation

# Conflicts:
#	src/lib/dialog/dialog.ts

Author: crisbeto

.gitignore

@@ -33,4 +33,4 @@
 /libpeerconnection.log
 npm-debug.log
 testem.log
-/.chrome
+/.chrome

README.md

@@ -75,7 +75,7 @@ High level items planned for January 2017:
 | dialog           |                           Available | [README][22] |   [#114][0114] |
 | snackbar / toast |                           Available | [README][21] |   [#115][0115] |
 | select           |                           Available | [README][23] |   [#118][0118] |
-| textarea         |                           Available |           -  |              - |
+| textarea         |                           Available | [README][5]  |              - |
 | autocomplete     |                         In-progress |           -  |   [#117][0117] |
 | chips            |  Initial version, features evolving |           -  |   [#120][0120] |
 | theming          |   Available, need guidance overlays | [Guide][20]  |              - |

e2e/components/dialog/dialog.e2e.ts

@@ -11,6 +11,12 @@ describe('dialog', () => {
     expectToExist('md-dialog-container');
   });
 
+  it('should open a template dialog', () => {
+    expectToExist('.my-template-dialog', false);
+    element(by.id('template')).click();
+    expectToExist('.my-template-dialog');
+  });
+
   it('should close by clicking on the backdrop', () => {
     element(by.id('default')).click();
 

guides/theming.md

@@ -41,7 +41,7 @@ The actual path will depend on your server setup.
 You can also concatenate the file with the rest of your application's css.
 
 Finally, if your app's content **is not** placed inside of a `md-sidenav-container` element, you
-need to add the `md-app-background` class to your wrapper element (for example the `body`). This
+need to add the `mat-app-background` class to your wrapper element (for example the `body`). This
 ensures that the proper theme background is applied to your page.
 
 ### Defining a custom theme
@@ -55,19 +55,19 @@ the corresponding styles. A typical theme file will look something like this:
 
 // Include the base styles for Angular Material core. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
-@include md-core();
+@include mat-core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue.
-$candy-app-primary: md-palette($md-indigo);
-$candy-app-accent:  md-palette($md-pink, A200, A100, A400);
+$candy-app-primary: mat-palette($mat-indigo);
+$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$candy-app-warn:    md-palette($md-red);
+$candy-app-warn:    mat-palette($mat-red);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$candy-app-theme: md-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
+$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
@@ -96,11 +96,11 @@ some selector. For example, we could append the following to the example above t
 secondary dark theme:
 ```scss
 .unicorn-dark-theme {
-  $dark-primary: md-palette($md-blue-grey);
-  $dark-accent:  md-palette($md-amber, A200, A100, A400);
-  $dark-warn:    md-palette($md-deep-orange);
+  $dark-primary: mat-palette($mat-blue-grey);
+  $dark-accent:  mat-palette($mat-amber, A200, A100, A400);
+  $dark-warn:    mat-palette($mat-deep-orange);
 
-  $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
+  $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
 
   @include angular-material-theme($dark-theme);
 }

package.json

@@ -66,9 +66,12 @@
     "gulp-clean-css": "^2.3.2",
     "gulp-cli": "^1.2.2",
     "gulp-connect": "^5.0.0",
+    "gulp-flatten": "^0.3.1",
+    "gulp-highlight-files": "0.0.4",
     "gulp-htmlmin": "^3.0.0",
     "gulp-if": "^2.0.2",
     "gulp-markdown": "^1.2.0",
+    "gulp-rename": "^1.2.2",
     "gulp-sass": "^3.1.0",
     "gulp-sourcemaps": "^2.4.0",
     "gulp-transform": "^1.1.0",
@@ -91,10 +94,11 @@
     "run-sequence": "^1.2.2",
     "sass": "^0.5.0",
     "selenium-webdriver": "^3.0.1",
-    "stylelint": "^7.7.1",
+    "stylelint": "^7.8.0",
     "travis-after-modes": "0.0.7",
     "ts-node": "^2.0.0",
-    "tslint": "^3.13.0",
+    "tslint": "^4.4.2",
+    "tslint-no-unused-var": "0.0.6",
     "typescript": "~2.0.10",
     "uglify-js": "^2.7.5",
     "web-animations-js": "^2.2.2"

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

@@ -1,7 +1,14 @@
 <h1>Dialog demo</h1>
 
-<button md-raised-button color="primary" (click)="openJazz()" [disabled]="dialogRef">Open dialog</button>
-<button md-raised-button color="accent" (click)="openContentElement()">Open dialog with content elements</button>
+<button md-raised-button color="primary" (click)="openJazz()" [disabled]="dialogRef">
+  Open dialog
+</button>
+<button md-raised-button color="accent" (click)="openContentElement()">
+  Open dialog with content elements
+</button>
+<button md-raised-button color="accent" (click)="openTemplate()">
+  Open dialog with template content
+</button>
 
 <md-card class="demo-dialog-card">
   <md-card-content>
@@ -59,3 +66,7 @@ <h2>Other options</h2>
 </md-card>
 
 <p>Last close result: {{lastCloseResult}}</p>
+
+<template>
+  I'm a template dialog. I've been opened {{numTemplateOpens}} times!
+</template>

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

@@ -1,4 +1,4 @@
-import {Component, Inject} from '@angular/core';
+import {Component, Inject, ViewChild, TemplateRef} from '@angular/core';
 import {DOCUMENT} from '@angular/platform-browser';
 import {MdDialog, MdDialogRef, MdDialogConfig, MD_DIALOG_DATA} from '@angular/material';
 
@@ -27,6 +27,9 @@ export class DialogDemo {
       message: 'Jazzy jazz jazz'
     }
   };
+  numTemplateOpens = 0;
+
+  @ViewChild(TemplateRef) template: TemplateRef<any>;
 
   constructor(public dialog: MdDialog, @Inject(DOCUMENT) doc: any) {
     // Possible useful example for the open and closeAll events.
@@ -55,6 +58,11 @@ export class DialogDemo {
     let dialogRef = this.dialog.open(ContentElementDialog, this.config);
     dialogRef.componentInstance.actionsAlignment = this.actionsAlignment;
   }
+
+  openTemplate() {
+    this.numTemplateOpens++;
+    this.dialog.open(this.template, this.config);
+  }
 }
 
 

src/demo-app/select/select-demo.html

@@ -27,7 +27,7 @@
     <p> Touched: {{ drinkControl.touched }} </p>
     <p> Dirty: {{ drinkControl.dirty }} </p>
     <p> Status: {{ drinkControl.control?.status }} </p>
-    <button md-button (click)="currentDrink='sprite-1'">SET VALUE</button>
+    <button md-button (click)="currentDrink='water-2'">SET VALUE</button>
     <button md-button (click)="isRequired=!isRequired">TOGGLE REQUIRED</button>
     <button md-button (click)="isDisabled=!isDisabled">TOGGLE DISABLED</button>
     <button md-button (click)="drinkControl.reset()">RESET</button>

src/demo-app/tooltip/tooltip-demo.html

@@ -1,7 +1,7 @@
 <div class="demo-tooltip">
   <h1>Tooltip Demo</h1>
 
-  <p class="centered">
+  <div class="centered" cdk-scrollable>
     <button #tooltip="mdTooltip"
             md-raised-button
             color="primary"
@@ -11,7 +11,9 @@ <h1>Tooltip Demo</h1>
             [mdTooltipHideDelay]="hideDelay">
       Mouse over to see the tooltip
     </button>
-  </p>
+    <div>Scroll down while tooltip is open to see it hide automatically</div>
+    <div style="height: 400px;"></div>
+  </div>
 
   <p>
     <md-radio-group [(ngModel)]="position">

src/demo-app/tooltip/tooltip-demo.scss

@@ -1,6 +1,12 @@
 .demo-tooltip {
   .centered {
     text-align: center;
+    height: 200px;
+    overflow: auto;
+
+    button {
+      margin: 16px;
+    }
   }
   .mat-radio-button {
     display: block;