Merge branch 'master' into 2601/dialog-pop-state

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

Author: crisbeto

.gitignore

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

CODING_STANDARDS.md

@@ -43,8 +43,8 @@ if (!$attrs['tabindex']) {
 For example, rather than doing this:
 ```html
 <md-button>Basic button</md-button>
-<md-button class="md-fab">FAB</md-button>
-<md-button class="md-icon-button">pony</md-button>
+<md-button class="mat-fab">FAB</md-button>
+<md-button class="mat-icon-button">pony</md-button>
 ```
 
 do this:
@@ -192,13 +192,13 @@ code organization.** This will allow users to much more easily override styles.
 
 For example, rather than doing this:
 ```scss
-md-calendar {
+.mat-calendar {
   display: block;
 
-  .md-month {
+  .mat-month {
     display: inline-block;
 
-    .md-date.md-selected {
+    .mat-date.mat-selected {
       font-weight: bold;
     }
   }
@@ -207,15 +207,15 @@ md-calendar {
 
 do this:
 ```scss
-md-calendar {
+.mat-calendar {
   display: block;
 }
 
-.md-calendar-month {
+.mat-calendar-month {
   display: inline-block;
 }
 
-.md-calendar-date.md-selected {
+.mat-calendar-date.mat-selected {
   font-weight: bold;
 }
 ```
@@ -260,11 +260,11 @@ This is a low-effort task that makes a big difference for low-vision users. Exam
 When it is not super obvious, include a brief description of what a class represents. For example:
 ```scss
 // The calendar icon button used to open the calendar pane.
-.md-datepicker-button { ... }
+.mat-datepicker-button { ... }
 
 // Floating pane that contains the calendar at the bottom of the input.
-.md-datepicker-calendar-pane { ... }
+.mat-datepicker-calendar-pane { ... }
 
 // Portion of the floating panel that sits, invisibly, on top of the input.
-.md-datepicker-input-mask { }
+.mat-datepicker-input-mask { }
 ``` 

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();
 

e2e/components/menu/menu-page.ts

@@ -3,7 +3,7 @@ import {browser, by, element, ElementFinder} from 'protractor';
 export class MenuPage {
   constructor() { browser.get('/menu'); }
 
-  menu(): ElementFinder { return element(by.css('.md-menu-panel')); }
+  menu(): ElementFinder { return element(by.css('.mat-menu-panel')); }
 
   start(): ElementFinder { return element(by.id('start')); }
 
@@ -23,11 +23,11 @@ export class MenuPage {
 
   combinedTrigger(): ElementFinder { return element(by.id('combined-t')); }
 
-  beforeMenu(): ElementFinder { return element(by.css('.md-menu-panel.before')); }
+  beforeMenu(): ElementFinder { return element(by.css('.mat-menu-panel.before')); }
 
-  aboveMenu(): ElementFinder { return element(by.css('.md-menu-panel.above')); }
+  aboveMenu(): ElementFinder { return element(by.css('.mat-menu-panel.above')); }
 
-  combinedMenu(): ElementFinder { return element(by.css('.md-menu-panel.combined')); }
+  combinedMenu(): ElementFinder { return element(by.css('.mat-menu-panel.combined')); }
 
   getResultText() { return this.textArea().getText(); }
 }

e2e/components/menu/menu.e2e.ts

@@ -4,7 +4,7 @@ import {expectToExist, expectAlignedWith, expectFocusOn, expectLocation} from '.
 import {pressKeys} from '../../util/actions';
 
 describe('menu', () => {
-  const menuSelector = '.md-menu-panel';
+  const menuSelector = '.mat-menu-panel';
   let page: MenuPage;
 
   beforeEach(() => page = new MenuPage());
@@ -60,7 +60,7 @@ describe('menu', () => {
   it('should mirror classes on host to menu template in overlay', () => {
     page.trigger().click();
     page.menu().getAttribute('class').then((classes: string) => {
-      expect(classes).toContain('md-menu-panel custom');
+      expect(classes).toContain('mat-menu-panel custom');
     });
   });
 

e2e/components/radio/radio.e2e.ts

@@ -7,7 +7,7 @@ describe('radio', () => {
     it('should be checked when clicked', () => {
       element(by.id('water')).click();
       element(by.id('water')).getAttribute('class').then((value: string) => {
-        expect(value).toContain('md-radio-checked');
+        expect(value).toContain('mat-radio-checked');
       });
       element(by.css('input[id=water-input]')).getAttribute('checked').then((value: string) => {
         expect(value).toBeTruthy();
@@ -18,7 +18,7 @@ describe('radio', () => {
 
       element(by.id('leaf')).click();
       element(by.id('leaf')).getAttribute('class').then((value: string) => {
-        expect(value).toContain('md-radio-checked');
+        expect(value).toContain('mat-radio-checked');
       });
       element(by.css('input[id=leaf-input]')).getAttribute('checked').then((value: string) => {
         expect(value).toBeTruthy();
@@ -32,15 +32,15 @@ describe('radio', () => {
       element(by.id('toggle-disable')).click();
       element(by.id('water')).click();
       element(by.id('water')).getAttribute('class').then((value: string) => {
-        expect(value).toContain('md-radio-disabled');
+        expect(value).toContain('mat-radio-disabled');
       });
         element(by.css('input[id=water-input]')).getAttribute('disabled').then((value: string) => {
         expect(value).toBeTruthy();
       });
 
       element(by.id('leaf')).click();
       element(by.id('leaf')).getAttribute('class').then((value: string) => {
-        expect(value).toContain('md-radio-disabled');
+        expect(value).toContain('mat-radio-disabled');
       });
       element(by.css('input[id=leaf-input]')).getAttribute('disabled').then((value: string) => {
         expect(value).toBeTruthy();

e2e/components/slide-toggle/slide-toggle.e2e.ts

@@ -43,7 +43,7 @@ describe('slide-toggle', () => {
 
   it('should move the thumb on state change', () => {
     let slideToggleEl = getNormalToggle();
-    let thumbEl = element(by.css('#normal-slide-toggle .md-slide-toggle-thumb-container'));
+    let thumbEl = element(by.css('#normal-slide-toggle .mat-slide-toggle-thumb-container'));
 
     let previousX = thumbEl.getLocation().then(pos => pos.x);
 

e2e/components/tabs/tabs.e2e.ts

@@ -10,7 +10,7 @@ describe('tabs', () => {
     beforeEach(() => {
       browser.get('/tabs');
       tabGroup = element(by.css('md-tab-group'));
-      tabLabels = element.all(by.css('.md-tab-label'));
+      tabLabels = element.all(by.css('.mat-tab-label'));
       tabBodies = element.all(by.css('md-tab-body'));
     });
 
@@ -67,12 +67,12 @@ function getFocusStates(elements: ElementArrayFinder) {
 
 /** Returns an array of true/false that represents the active states for the provided elements. */
 function getLabelActiveStates(elements: ElementArrayFinder) {
-  return getClassStates(elements, 'md-tab-label-active');
+  return getClassStates(elements, 'mat-tab-label-active');
 }
 
 /** Returns an array of true/false that represents the active states for the provided elements */
 function getBodyActiveStates(elements: ElementArrayFinder) {
-  return getClassStates(elements, 'md-tab-body-active');
+  return getClassStates(elements, 'mat-tab-body-active');
 }
 
 /**

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/autocomplete/autocomplete-demo.scss

@@ -2,12 +2,12 @@
   display: flex;
   flex-flow: row wrap;
 
-  md-card {
+  .mat-card {
     width: 400px;
     margin: 24px;
   }
 
-  md-input-container {
+  .mat-input-container {
     margin-top: 16px;
   }
 }

src/demo-app/baseline/baseline-demo.scss

@@ -2,7 +2,7 @@
 .demo-basic {
   padding: 0;
 }
-.demo-basic md-card-content {
+.demo-basic .mat-card-content {
   padding: 16px;
 }
 .demo-full-width {

src/demo-app/card/card-demo.html

@@ -51,7 +51,7 @@
     </md-card-content>
   </md-card>
 
-  <md-card class="demo-card-blue md-card-flat">
+  <md-card class="demo-card-blue mat-card-flat">
     <md-card-title>Easily customizable</md-card-title>
     <md-card-actions>
       <button md-button>First</button>

src/demo-app/card/card-demo.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-flow: column nowrap;
 
-  md-card {
+  .mat-card {
     margin: 0 16px 16px 0;
     width: 350px;
   }
@@ -15,7 +15,7 @@
 .demo-card-blue {
   background-color: #b0becc;
 
-  md-card-actions {
+  .mat-card-actions {
     display: flex;
     flex-direction: column;
   }

src/demo-app/chips/chips-demo.html

@@ -54,7 +54,7 @@ <h4>Stacked Chips</h4>
         <code>(focus)</code> event to run custom code.
       </p>
 
-      <md-chip-list class="md-chip-list-stacked">
+      <md-chip-list class="mat-chip-list-stacked">
         <md-chip *ngFor="let aColor of availableColors"
                  (focus)="color = aColor.color" color="{{aColor.color}}" selected="true">
           {{aColor.name}}

src/demo-app/chips/chips-demo.scss

@@ -1,23 +1,23 @@
 .chips-demo {
-  .md-chip-list-stacked {
+  .mat-chip-list-stacked {
     display: block;
     max-width: 200px;
   }
 
-  md-card {
+  .mat-card {
     padding: 0;
     margin: 16px;
 
-    & md-toolbar {
+    & .mat-toolbar {
       margin: 0;
     }
 
-    & md-card-content {
+    & .mat-card-content {
       padding: 24px;
     }
   }
 
-  .md-basic-chip {
+  .mat-basic-chip {
     margin: auto 10px;
   }
 }

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

@@ -8,10 +8,10 @@ body {
     -moz-osx-font-smoothing: grayscale;
   }
 
-  md-sidenav {
+  .mat-sidenav {
     min-width: 15%;
 
-    [md-button] {
+    .mat-button {
       width: 100%;
       position: relative;
       bottom: 0;
@@ -24,8 +24,8 @@ body {
     box-sizing: border-box;
   }
 
-  md-toolbar {
-    md-icon {
+  .mat-toolbar {
+    .mat-icon {
       cursor: pointer;
     }
 

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