Sync to master (#3505)

* fix(focus-trap): enabled property not being coerced (#3417)

* docs(autocomplete): fix a11y of autocomplete example

* docs(autocomplete): add guidance about filter criteria

* fix(ripple): fade-out-all should hide all ripples (#3400)

* fix(checkbox): show checkbox animation only if user click or indeterminate state (#3137)

Fixes #2783

* feat(checkbox): add value attribute to md-checkbox (#2701)

Fixes #2583

* fix(radio): add focus indication (#3402)

Fixes #3102

* fix(autocomplete): remove max width for autocomplete panel (#3297)

Fixes #3198

* fix(button-toggle): fix color for selected button toggle and selected disabled button toggle (#3418)

Fixes #3382

* fix(input): make icons in prefix/suffix the right size (#3342)

* refactor(focus-origin-monitor): complete stream when stopping monitor (#3404)

* docs(dialog): update dialog afterClosed (#3411)

* docs(progress-spinner): fix typo in progress spinner example (#3299)

Fixes #3148

* fix(checkbox): add focus indication (#3403)

Fixes #3102

* feat(ripple): add way to globally disable ripples (#3383)

* refactor: consistent module declaration (#3095)

* fix(focus-trap): avoid closure compiler issues when adding anchors (#3448)

* chore(menu): switch menu-item to common coercion logic (#3065)

* `MdMenuItem` to use the common coercion logic when determining the disabled state.
* Gets rid of the `@HostBinding` in favor of passing them through the `host` option.

Relates to #2985.

* fix(list-key-manager): exception when no initial active item (#3431)

* fix(list-key-manager): exception when no initial active item

Fixes an exception that is thrown when the user presses a key on ListKeyManager that doesn't have a default active item. The problem was due to the fact that we have a check for `null` a little bit down, that handles cases like this, however the active index is `undefined` by default.

Fixes #3317.

* fix: it it

* fix(focus-trap): exception when element contains SVG on IE (#3432)

Fixes an exception being thrown by the focus trap, if it contains an SVG element on IE. The problem was that on IE, SVG elements don't have the `children` property, which means that we have to fall back to `childNodes`.

Fixes #3410.

* fix(select): initial value not being displayed with FormControl and OnPush (#3434)

* fix(select): initial value not being displayed with FormControl and OnPush

Fixes the initial value not being displayed in a select that has a `FormControl` and is placed in a component with `ChangeDetectionStrategy.onPush`.

Relates to #2269 (comment).

* chore: remove unused properties

* build: run tslint on tool files (#3436)

* Since we had a lot of TSLint issues on our tooling scripts & tasks, we should run TSLint on those as well.
* Also updates Dgeni to latest version, because it now supports TypeScript typings.

* build: upgrade dev dependencies (#3440)

* Upgrades outdated devDependencies to the latest version.

* feat(data-table): initial prototype with sorting

Author: andrewseguin

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/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 {

src/lib/autocomplete/autocomplete.scss

@@ -15,7 +15,8 @@ $mat-autocomplete-panel-above-offset: -24px !default;
 .mat-autocomplete-panel {
   @include mat-menu-base();
   visibility: hidden;
-
+  
+  max-width: none;
   max-height: $mat-autocomplete-panel-max-height;
   position: relative;
 
@@ -34,4 +35,4 @@ $mat-autocomplete-panel-above-offset: -24px !default;
   &.mat-autocomplete-hidden {
     visibility: hidden;
   }
-}
+}

src/lib/autocomplete/index.ts

@@ -4,8 +4,6 @@ import {MdOptionModule, OverlayModule, OVERLAY_PROVIDERS, CompatibilityModule} f
 import {CommonModule} from '@angular/common';
 import {MdAutocomplete} from './autocomplete';
 import {MdAutocompleteTrigger} from './autocomplete-trigger';
-export * from './autocomplete';
-export * from './autocomplete-trigger';
 
 @NgModule({
   imports: [MdOptionModule, OverlayModule, CompatibilityModule, CommonModule],
@@ -21,3 +19,7 @@ export class MdAutocompleteModule {
     };
   }
 }
+
+
+export * from './autocomplete';
+export * from './autocomplete-trigger';

src/lib/button-toggle/_button-toggle-theme.scss

@@ -23,16 +23,16 @@
   }
 
   .mat-button-toggle-checked {
-    background-color: mat-color($mat-grey, 300);
+    background-color: mat-color($background, selected-button);
     color: mat-color($foreground, base);
   }
 
   .mat-button-toggle-disabled {
-    background-color: map_get($mat-grey, 200);
+    background-color: mat-color($background, disabled-button-toggle);
     color: mat-color($foreground, disabled-button);
 
     &.mat-button-toggle-checked {
-      background-color: mat-color($mat-grey, 400);
+      background-color: mat-color($background, selected-disabled-button);
     }
   }
 }