Sync to master

package.json

@@ -48,24 +48,24 @@
     "@types/jasmine": "2.5.41",
     "@types/merge2": "^0.3.29",
     "@types/minimist": "^1.2.0",
-    "@types/node": "^7.0.4",
+    "@types/node": "^7.0.5",
     "@types/run-sequence": "^0.0.28",
     "@types/rx": "2.5.33",
     "axe-core": "^2.1.7",
     "axe-webdriverjs": "^0.5.0",
     "conventional-changelog": "^1.1.0",
-    "dgeni": "^0.4.2",
+    "dgeni": "^0.4.7",
     "dgeni-packages": "^0.16.5",
-    "firebase-admin": "^4.0.6",
+    "firebase-admin": "^4.1.2",
     "firebase-tools": "^2.2.1",
     "fs-extra": "^2.0.0",
     "glob": "^7.1.1",
-    "google-cloud": "^0.45.1",
+    "google-cloud": "^0.48.0",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.1",
     "gulp-better-rollup": "^1.0.2",
     "gulp-clean": "^0.3.2",
-    "gulp-clean-css": "^2.3.2",
+    "gulp-clean-css": "^3.0.3",
     "gulp-cli": "^1.2.2",
     "gulp-connect": "^5.0.0",
     "gulp-flatten": "^0.3.1",
@@ -75,35 +75,35 @@
     "gulp-markdown": "^1.2.0",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^3.1.0",
-    "gulp-sourcemaps": "^2.4.0",
+    "gulp-sourcemaps": "^2.4.1",
     "gulp-transform": "^1.1.0",
     "hammerjs": "^2.0.8",
     "highlight.js": "^9.9.0",
     "image-diff": "^1.6.3",
     "jasmine-core": "^2.5.2",
-    "karma": "^1.4.1",
+    "karma": "^1.5.0",
     "karma-browserstack-launcher": "^1.2.0",
     "karma-chrome-launcher": "^2.0.0",
-    "karma-firefox-launcher": "^1.0.0",
+    "karma-firefox-launcher": "^1.0.1",
     "karma-jasmine": "^1.1.0",
     "karma-sauce-launcher": "^1.1.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "madge": "^1.5.0",
+    "madge": "^1.6.0",
     "merge2": "^1.0.2",
     "minimist": "^1.2.0",
-    "node-sass": "^4.3.0",
-    "protractor": "^5.1.0",
+    "node-sass": "^4.5.0",
+    "protractor": "^5.1.1",
     "resolve-bin": "^0.4.0",
     "run-sequence": "^1.2.2",
     "sass": "^0.5.0",
-    "selenium-webdriver": "^3.0.1",
+    "selenium-webdriver": "^3.1.0",
     "stylelint": "^7.8.0",
     "travis-after-modes": "0.0.7",
-    "ts-node": "^2.0.0",
+    "ts-node": "^2.1.0",
     "tslint": "^4.4.2",
     "tslint-no-unused-var": "0.0.6",
     "typescript": "~2.0.10",
-    "uglify-js": "^2.7.5",
+    "uglify-js": "^2.8.7",
     "web-animations-js": "^2.2.2"
   }
 }

src/demo-app/autocomplete/autocomplete-demo.ts

@@ -88,7 +88,8 @@ export class AutocompleteDemo {
   }
 
   filterStates(val: string) {
-    return val ? this.states.filter((s) => s.name.match(new RegExp(val, 'gi'))) : this.states;
+    return val ? this.states.filter(s => new RegExp(`^${val}`, 'gi').test(s.name))
+               : this.states;
   }
 
 }

src/demo-app/checkbox/checkbox-demo.html

@@ -1,7 +1,8 @@
 <h1>md-checkbox: Basic Example</h1>
 <form>
 <md-checkbox [(ngModel)]="isChecked"
-              name="cb"
+             name="cb"
+             value="basic_checkbox"
              [color]="checkboxColor()"
              (change)="isIndeterminate = false"
              [indeterminate]="isIndeterminate"

src/demo-app/data-table/data-table-demo.css

@@ -0,0 +1,3 @@
+md-data-table {
+  padding: 16px;
+}

src/demo-app/data-table/data-table-demo.html

@@ -0,0 +1,33 @@
+<md-input-container>
+  <input mdInput name="searchTerm"
+         placeholder="Data filter"
+         [ngModel]="dataSource.filter"
+         (ngModelChange)="onSearchChanged($event)">
+</md-input-container>
+
+<md-data-table class="mat-elevation-z1"
+               [dataSource]="dataSource"
+               (onSort)="onSort($event)"
+               [initialSortColumn]="'name'"
+               [defaultSortOrder]="'ascending'">
+  <md-header-row>
+    <md-header-cell sortKey="name">Name</md-header-cell>
+    <md-header-cell sortKey="movie">Movie</md-header-cell>
+  </md-header-row>
+  <md-row *mdRowContext="let characterData = row; when: characterIsVillan" (click)="rowClicked(characterData)">
+    <md-cell>{{characterData.name}} (villan).</md-cell>
+    <md-cell>{{characterData.movie}}</md-cell>
+  </md-row>
+  <md-row *mdRowContext="let characterData = row; when: lastCharacterDisplayed" (click)="rowClicked(characterData)">
+    <md-cell>{{characterData.name}} is last.</md-cell>
+    <md-cell>{{characterData.movie}}</md-cell>
+  </md-row>
+  <md-row *mdRowContext="let characterData = row" (click)="rowClicked(characterData)">
+    <md-cell>{{characterData.name}}</md-cell>
+    <md-cell>{{characterData.movie}}</md-cell>
+  </md-row>
+</md-data-table>
+
+<p *ngIf="lastRowClicked">
+  You just clicked on: {{lastRowClicked.name}} from {{lastRowClicked.movie}}
+</p>

src/demo-app/data-table/data-table-demo.ts

@@ -0,0 +1,39 @@
+import {Component} from '@angular/core';
+import {TableDemoDataSource, Character} from './demo-data-source';
+import {MdTableSortData, NgForContext} from '@angular/material';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'data-table-demo',
+  templateUrl: 'data-table-demo.html',
+  styleUrls: ['data-table-demo.css']
+})
+export class DataTableDemo {
+  dataSource = new TableDemoDataSource();
+
+  lastRowClicked: Character;
+
+  onSearchChanged(val: string) {
+    this.dataSource.filter = val;
+    this.dataSource.loadTableRows();
+  }
+
+  onSort(event: MdTableSortData) {
+    this.dataSource.sortOrder = event.sortOrder;
+    this.dataSource.sortColumn = event.sortColumn;
+    this.dataSource.loadTableRows();
+  }
+
+  characterIsVillan(row: Character): boolean {
+    return row.villan;
+  }
+
+  lastCharacterDisplayed(row: Character, context: NgForContext) {
+    return context.last;
+  }
+
+  rowClicked(row: Character) {
+    this.lastRowClicked = row;
+  }
+}

src/demo-app/data-table/demo-data-source.ts

@@ -0,0 +1,106 @@
+import {Observable} from 'rxjs/Observable';
+import {BehaviorSubject} from 'rxjs/Rx';
+import {MdTableSortOrder, MdTableDataSource, MdTableRows} from '@angular/material';
+
+export interface Character {
+  name: string;
+  movie: string;
+  villan?: boolean;
+}
+
+export const CHARACTERS = [
+  {name: 'Goofy', movie: 'A Goofy Movie'},
+  {name: 'Tinker Bell', movie: 'Peter Pan'},
+  {name: 'Thumper', movie: 'Bambi'},
+  {name: 'Mad Hatter', movie: 'Alice in Wonderland'},
+  {name: 'Kronk', movie: 'The Emperor\'s New Groove', villan: true},
+  {name: 'Gus Gus', movie: 'Cinderella'},
+  {name: 'Jiminy Cricket', movie: 'Pinocchio'},
+  {name: 'Tigger', movie: 'Winnie the Pooh'},
+  {name: 'Gaston', movie: 'Beauty and the Beast', villan: true},
+  {name: 'Dumbo', movie: 'Dumbo'},
+  {name: 'Jafar', movie: 'Aladdin', villan: true},
+  {name: 'Lilo', movie: 'Lilo and Stitch'},
+  {name: 'Sebastian', movie: 'The Little Mermaid'},
+  {name: 'Jane', movie: 'Tarzan'},
+  {name: 'Pumbaa', movie: 'The Lion King'},
+  {name: 'Mulan', movie: 'Mulan'},
+];
+
+export class TableDemoDataSource implements MdTableDataSource<Character> {
+  private readonly rowSubject =
+      new BehaviorSubject<MdTableRows<Character>>({rows: [], rowCount: 0});
+
+  filter: string;
+  sortOrder: MdTableSortOrder;
+  sortColumn: string;
+
+  constructor() {
+    this.loadTableRows();
+  }
+
+  /**
+   * Returns an observable the table watches in order to update rows.
+   * @override
+   */
+  getRows(): Observable<MdTableRows<Character>> {
+    return this.rowSubject.asObservable();
+  }
+
+  /**
+   * Updates the table based on the table settings and filters.
+   */
+  loadTableRows() {
+    this.getRowsFromServer().subscribe(filteredRows => {
+      const rows = {rows: filteredRows, rowCount: filteredRows.length};
+      this.rowSubject.next(rows);
+    });
+  }
+
+  /**
+   * Simulates getting a list of filtered rows from the server with a delay.
+   */
+  getRowsFromServer(): Observable<Character[]> {
+    const filteredRows = CHARACTERS.filter(this.matchesSearchTerm.bind(this));
+    if (this.sortColumn) {
+      filteredRows.sort(this.compareRows.bind(this));
+      if (this.sortOrder === 'descending') {
+        filteredRows.reverse();
+      }
+    }
+
+    return Observable.of(filteredRows);
+  }
+
+  private matchesSearchTerm(row: Character): boolean {
+    if (!this.filter) {
+      return true;  // Everything matches.
+    }
+
+    return (row.name + row.movie).toLowerCase().indexOf(this.filter.toLowerCase()) != -1;
+  }
+
+  private compareRows(a: Character, b: Character): number {
+    if (!this.sortColumn) { return 0; }
+
+    let valueA: string;
+    let valueB: string;
+    if (this.sortColumn == 'name') {
+      valueA = a.name;
+      valueB = b.name;
+    } else if (this.sortColumn == 'movie') {
+      valueA = a.movie;
+      valueB = b.movie;
+    }
+
+    // For arbitrary objects, if the valueOf method is overridden, then
+    // comparison will use that. Otherwise, sorting will do nothing.
+    if (valueA < valueB) {
+      return -1;
+    } else if (valueA > valueB) {
+      return 1;
+    } else {
+      return 0;
+    }
+  }
+}

src/demo-app/demo-app-module.ts

@@ -43,6 +43,7 @@ import {PlatformDemo} from './platform/platform-demo';
 import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
 import {InputDemo} from './input/input-demo';
 import {StyleDemo} from './style/style-demo';
+import {DataTableDemo} from './data-table/data-table-demo';
 
 @NgModule({
   imports: [
@@ -62,6 +63,7 @@ import {StyleDemo} from './style/style-demo';
     CardDemo,
     ChipsDemo,
     CheckboxDemo,
+    DataTableDemo,
     DemoApp,
     DialogDemo,
     GesturesDemo,

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

@@ -26,6 +26,7 @@ export class DemoApp {
     {name: 'Card', route: 'card'},
     {name: 'Chips', route: 'chips'},
     {name: 'Checkbox', route: 'checkbox'},
+    {name: 'Data Table', route: 'data-table'},
     {name: 'Dialog', route: 'dialog'},
     {name: 'Gestures', route: 'gestures'},
     {name: 'Grid List', route: 'grid-list'},

src/demo-app/demo-app/routes.ts

@@ -33,13 +33,15 @@ import {PlatformDemo} from '../platform/platform-demo';
 import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
 import {InputDemo} from '../input/input-demo';
 import {StyleDemo} from '../style/style-demo';
+import {DataTableDemo} from '../data-table/data-table-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
   {path: 'autocomplete', component: AutocompleteDemo},
   {path: 'button', component: ButtonDemo},
   {path: 'card', component: CardDemo},
   {path: 'chips', component: ChipsDemo},
+  {path: 'data-table', component: DataTableDemo},
   {path: 'radio', component: RadioDemo},
   {path: 'select', component: SelectDemo},
   {path: 'sidenav', component: SidenavDemo},

src/demo-app/input/input-demo.html

@@ -206,13 +206,8 @@ <h4>Textarea</h4>
       Both:
       <md-input-container align="end">
         <input mdInput #email placeholder="Email Address" value="angular-core">
-        <span mdPrefix>
-          <md-icon [class.primary]="email.focused" class="demo-icons demo-transform">email</md-icon>
-          &nbsp;
-        </span>
-        <span mdSuffix class="demo-transform" [class.primary]="email.focused">
-          &nbsp;@gmail.com
-        </span>
+        <span mdPrefix><md-icon [class.primary]="email.focused">email</md-icon>&nbsp;</span>
+        <span mdSuffix [class.primary]="email.focused">&nbsp;@gmail.com</span>
       </md-input-container>
     </p>
 

src/examples/autocomplete-overview/autocomplete-overview-example.ts

@@ -71,7 +71,8 @@ export class AutocompleteOverviewExample {
   }
 
   filterStates(val: string) {
-    return val ? this.states.filter((s) => new RegExp(val, 'gi').test(s)) : this.states;
+    return val ? this.states.filter(s => new RegExp(`^${val}`, 'gi').test(s))
+               : this.states;
   }
 
 }

src/examples/progress-spinner-configurable/progress-spinner-configurable-example.ts

@@ -7,7 +7,7 @@ import {Component} from '@angular/core';
   styleUrls: ['./progress-spinner-configurable-example.css'],
 })
 export class ProgressSpinnerConfigurableExample {
-  color = 'praimry';
+  color = 'primary';
   mode = 'determinate';
   value = 50;
 }

src/lib/autocomplete/autocomplete.md

@@ -48,15 +48,19 @@ local template variable (here we called it "auto"), and binding that variable to
 At this point, the autocomplete panel should be toggleable on focus and options should be selectable. But if we want 
 our options to filter when we type, we need to add a custom filter. 
 
-You can filter the options in any way you want based on the text input. Here we will do a simple string test on the 
-input value to see if it matches the option value. We already have access to the built-in `valueChanges` observable on 
-the `FormControl`, so we can simply map the text input's values to the suggested options by passing them through this 
-filter. The resulting observable (`filteredOptions`) can be added to the template in place of the `options` property 
-using the `async` pipe.
+You can filter the options in any way you like based on the text input*. Here we will perform a simple string test on 
+the option value to see if it matches the input value, starting from the option's first letter. We already have access 
+to the built-in `valueChanges` observable on the `FormControl`, so we can simply map the text input's values to the 
+suggested options by passing them through this filter. The resulting observable (`filteredOptions`) can be added to the 
+template in place of the `options` property using the `async` pipe.
 
 Below we are also priming our value change stream with `null` so that the options are filtered by that value on init 
 (before there are any value changes).
 
+*For optimal accessibility, you may want to consider adding text guidance on the page to explain filter criteria. 
+This is especially helpful for screenreader users if you're using a non-standard filter that doesn't limit matches 
+to the beginning of the string.
+
 *my-comp.ts*
 ```ts
 class MyComp {
@@ -75,7 +79,7 @@ class MyComp {
    }
 
    filter(val: string): string[] {
-      return this.options.filter(option => new RegExp(val, 'gi').test(option)); 
+      return this.options.filter(option => new RegExp(`^${val}`, 'gi').test(option)); 
    }
 }
 ```
@@ -134,7 +138,7 @@ class MyComp {
    }
 
    filter(name: string): User[] {
-      return this.options.filter(option => new RegExp(name, 'gi').test(option)); 
+      return this.options.filter(option => new RegExp(`^${name}`, 'gi').test(option)); 
    }
 
    displayFn(user: User): string {