Merge branch 'master' into fix/slide-toggle-ripple-speed

README.md

@@ -38,16 +38,16 @@ and which pieces are blocked) and make a comment.
 Also see our [`Good for community contribution`](https://github.com/angular/material2/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+for+community+contribution%22)
 label.
 
-High level items planned for January 2017:
-
-* Initial version of md-autocomplete
-* Prototyping for data-table
-* Improvements to https://material.angular.io
-* Continued expanding e2e test coverage
-* More work on scroll / resize handling for overlays
-* Screenshot tests
-* Better development automation
+High level items planned for next few months:
 
+- Initial version of datepicker
+- Initial version of data table
+- Initial version of tree
+- Select improvements (multi-select, etc)
+- Screenshot test improvements
+- Docs site improvements
+- A11y audit
+- Various bug fixes
 
 #### Feature status:
 
@@ -76,7 +76,7 @@ High level items planned for January 2017:
 | snackbar / toast |                           Available | [README][21] |   [#115][0115] |
 | select           |                           Available | [README][23] |   [#118][0118] |
 | textarea         |                           Available | [README][5]  |              - |
-| autocomplete     |                         In-progress |           -  |   [#117][0117] |
+| autocomplete     |  Initial version, features evolving | [README][24] |   [#117][0117] |
 | chips            |  Initial version, features evolving |           -  |   [#120][0120] |
 | theming          |   Available, need guidance overlays | [Guide][20]  |              - |
 | docs site        |   UX design and tooling in progress |           -  |              - |
@@ -86,36 +86,37 @@ High level items planned for January 2017:
 | bottom-sheet     |                         Not started |           -  |              - |
 | bottom-nav       |                         Not started |           -  |   [#408][0408] |
 | virtual-repeat   |                         Not started |           -  |   [#823][0823] |
-| datepicker       |                         Not started |           -  |   [#675][0675] |
+| datepicker       |                         In progress |           -  |   [#675][0675] |
 | data-table       |                  Design in-progress |           -  |   [#581][0581] |
 | stepper          |                         Not started |           -  |   [#508][0508] |
 | layout           |   See [angular/flex-layout][lay_rp] | [Wiki][0]    |              - |
 
  [lay_rp]:  https://github.com/angular/flex-layout
  [0]: https://github.com/angular/flex-layout/wiki
- [1]: https://github.com/angular/material2/blob/master/src/lib/button/README.md
- [2]: https://github.com/angular/material2/blob/master/src/lib/card/README.md
- [3]: https://github.com/angular/material2/blob/master/src/lib/checkbox/README.md
- [4]: https://github.com/angular/material2/blob/master/src/lib/radio/README.md
- [5]: https://github.com/angular/material2/blob/master/src/lib/input/README.md
- [6]: https://github.com/angular/material2/blob/master/src/lib/sidenav/README.md
- [7]: https://github.com/angular/material2/blob/master/src/lib/toolbar/README.md
- [8]: https://github.com/angular/material2/blob/master/src/lib/list/README.md
- [9]: https://github.com/angular/material2/blob/master/src/lib/grid-list/README.md
-[10]: https://github.com/angular/material2/blob/master/src/lib/icon/README.md
-[11]: https://github.com/angular/material2/blob/master/src/lib/progress-spinner/README.md
-[12]: https://github.com/angular/material2/blob/master/src/lib/progress-bar/README.md
-[13]: https://github.com/angular/material2/blob/master/src/lib/tabs/README.md
-[14]: https://github.com/angular/material2/blob/master/src/lib/slide-toggle/README.md
-[15]: https://github.com/angular/material2/blob/master/src/lib/button-toggle/README.md
-[16]: https://github.com/angular/material2/blob/master/src/lib/slider/README.md
-[17]: https://github.com/angular/material2/blob/master/src/lib/menu/README.md
-[18]: https://github.com/angular/material2/blob/master/src/lib/tooltip/README.md
+ [1]: https://material.angular.io/components/component/button
+ [2]: https://material.angular.io/components/component/card
+ [3]: https://material.angular.io/components/component/checkbox
+ [4]: https://material.angular.io/components/component/radio
+ [5]: https://material.angular.io/components/component/input
+ [6]: https://material.angular.io/components/component/sidenav
+ [7]: https://material.angular.io/components/component/toolbar
+ [8]: https://material.angular.io/components/component/list
+ [9]: https://material.angular.io/components/component/grid-list
+[10]: https://material.angular.io/components/component/icon
+[11]: https://material.angular.io/components/component/progress-spinner
+[12]: https://material.angular.io/components/component/progress-bar
+[13]: https://material.angular.io/components/component/tabs
+[14]: https://material.angular.io/components/component/slide-toggle
+[15]: https://material.angular.io/components/component/button-toggle
+[16]: https://material.angular.io/components/component/slider
+[17]: https://material.angular.io/components/component/menu
+[18]: https://material.angular.io/components/component/tooltip
 [19]: https://github.com/angular/material2/blob/master/src/lib/core/ripple/README.md
 [20]: https://github.com/angular/material2/blob/master/guides/theming.md
-[21]: https://github.com/angular/material2/blob/master/src/lib/snack-bar/README.md
-[22]: https://github.com/angular/material2/blob/master/src/lib/dialog/README.md
-[23]: https://github.com/angular/material2/blob/master/src/lib/select/README.md
+[21]: https://material.angular.io/components/component/snack-bar
+[22]: https://material.angular.io/components/component/dialog
+[23]: https://material.angular.io/components/component/select
+[24]: https://material.angular.io/components/component/autocomplete
 
 [0107]: https://github.com/angular/material2/issues/107
 [0119]: https://github.com/angular/material2/issues/119

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

@@ -1,4 +1,4 @@
-import {browser, element, by, Key} from 'protractor';
+import {browser, element, by, Key, ExpectedConditions} from 'protractor';
 import {expectToExist} from '../../util/asserts';
 import {screenshot} from '../../screenshot';
 
@@ -21,7 +21,9 @@ describe('slide-toggle', () => {
     getNormalToggle().click();
 
     expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked');
-    screenshot();
+    browser.wait(ExpectedConditions.not(
+      ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+      .then(() => screenshot());
   });
 
   it('should change the checked state on click', () => {
@@ -32,7 +34,9 @@ describe('slide-toggle', () => {
     getNormalToggle().click();
 
     expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked');
-    screenshot();
+    browser.wait(ExpectedConditions.not(
+      ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+      .then(() => screenshot());
   });
 
   it('should not change the checked state on click when disabled', () => {
@@ -43,7 +47,9 @@ describe('slide-toggle', () => {
     element(by.css('#disabled-slide-toggle')).click();
 
     expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
-    screenshot();
+    browser.wait(ExpectedConditions.not(
+      ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+      .then(() => screenshot());
   });
 
   it('should move the thumb on state change', () => {
@@ -57,7 +63,9 @@ describe('slide-toggle', () => {
     let newX = thumbEl.getLocation().then(pos => pos.x);
 
     expect(previousX).not.toBe(newX);
-    screenshot();
+    browser.wait(ExpectedConditions.not(
+      ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+      .then(() => screenshot());
   });
 
   it('should toggle the slide-toggle on space key', () => {

e2e/screenshot.ts

@@ -3,11 +3,14 @@ import * as path from 'path';
 import {browser} from 'protractor';
 
 const OUTPUT_DIR = './screenshots/';
+const HEIGHT = 768;
+const WIDTH = 1024;
 
 let currentJasmineSpecName = '';
 
 /**  Adds a custom jasmine reporter that simply keeps track of the current test name. */
 function initializeEnvironment(jasmine: any) {
+  browser.manage().window().setSize(WIDTH, HEIGHT);
   let reporter = new jasmine.JsApiReporter({});
   reporter.specStarted = function(result: any) {
     currentJasmineSpecName = result.fullName;

guides/theming-your-components.md

@@ -22,7 +22,7 @@ All you need is to create a `@mixin` function in the custom-component-theme.scss
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
 
-  // Use md-color to extract individual colors from a palette as necessary.
+  // Use mat-color to extract individual colors from a palette as necessary.
   .candy-carousel {
     background-color: mat-color($primary);
     border-color: mat-color($accent, A400);

package.json

@@ -41,6 +41,7 @@
     "@angular/platform-browser-dynamic": "^2.3.0",
     "@angular/platform-server": "^2.3.0",
     "@angular/router": "^3.3.0",
+    "@types/fs-extra": "0.0.37",
     "@types/glob": "^5.0.30",
     "@types/gulp": "^3.8.32",
     "@types/hammerjs": "^2.0.34",
@@ -59,6 +60,7 @@
     "firebase-tools": "^2.2.1",
     "fs-extra": "^2.0.0",
     "glob": "^7.1.1",
+    "google-cloud": "^0.45.1",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.1",
     "gulp-better-rollup": "^1.0.2",
@@ -77,6 +79,7 @@
     "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-browserstack-launcher": "^1.2.0",

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

@@ -43,5 +43,15 @@ <h1>md-checkbox: Basic Example</h1>
   </div>
 </div>
 
+<h1>Pseudo checkboxes</h1>
+<md-pseudo-checkbox></md-pseudo-checkbox>
+<md-pseudo-checkbox [disabled]="true"></md-pseudo-checkbox>
+
+<md-pseudo-checkbox state="checked"></md-pseudo-checkbox>
+<md-pseudo-checkbox state="checked" [disabled]="true"></md-pseudo-checkbox>
+
+<md-pseudo-checkbox state="indeterminate"></md-pseudo-checkbox>
+<md-pseudo-checkbox state="indeterminate" [disabled]="true"></md-pseudo-checkbox>
+
 <h1>Nested Checklist</h1>
 <md-checkbox-demo-nested-checklist></md-checkbox-demo-nested-checklist>

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

@@ -4,7 +4,12 @@ import {HttpModule} from '@angular/http';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {DemoApp, Home} from './demo-app/demo-app';
 import {RouterModule} from '@angular/router';
-import {MaterialModule, OverlayContainer, FullscreenOverlayContainer} from '@angular/material';
+import {
+  MaterialModule,
+  OverlayContainer,
+  FullscreenOverlayContainer,
+  MdSelectionModule,
+} from '@angular/material';
 import {DEMO_APP_ROUTES} from './demo-app/routes';
 import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
 import {JazzDialog, ContentElementDialog, DialogDemo, IFrameDialog} from './dialog/dialog-demo';
@@ -47,6 +52,7 @@ import {StyleDemo} from './style/style-demo';
     ReactiveFormsModule,
     RouterModule.forRoot(DEMO_APP_ROUTES),
     MaterialModule.forRoot(),
+    MdSelectionModule,
   ],
   declarations: [
     AutocompleteDemo,
@@ -93,7 +99,7 @@ import {StyleDemo} from './style/style-demo';
     SunnyTabContent,
     RainyTabContent,
     FoggyTabContent,
-    PlatformDemo
+    PlatformDemo,
   ],
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer}

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

@@ -18,7 +18,7 @@
 
   <md-card>
     <md-select placeholder="Drink" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled"
-      #drinkControl="ngModel">
+      [floatPlaceholder]="floatPlaceholder" #drinkControl="ngModel">
       <md-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
         {{ drink.viewValue }}
       </md-option>
@@ -27,6 +27,15 @@
     <p> Touched: {{ drinkControl.touched }} </p>
     <p> Dirty: {{ drinkControl.dirty }} </p>
     <p> Status: {{ drinkControl.control?.status }} </p>
+    <p>
+      <label for="floating-placeholder">Floating placeholder:</label>
+      <select [(ngModel)]="floatPlaceholder" id="floating-placeholder">
+        <option value="auto">Auto</option>
+        <option value="always">Always</option>
+        <option value="never">Never</option>
+      </select>
+    </p>
+
     <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>

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

@@ -14,6 +14,7 @@ export class SelectDemo {
   showSelect = false;
   currentDrink: string;
   latestChangeEvent: MdSelectChange;
+  floatPlaceholder: string = 'auto';
   foodControl = new FormControl('pizza-1');
 
   foods = [

src/lib/autocomplete/autocomplete-trigger.ts

@@ -61,7 +61,7 @@ export const MD_AUTOCOMPLETE_VALUE_ACCESSOR: any = {
     '[attr.aria-owns]': 'autocomplete?.id',
     '(focus)': 'openPanel()',
     '(blur)': '_handleBlur($event.relatedTarget?.tagName)',
-    '(input)': '_handleInput($event.target.value)',
+    '(input)': '_handleInput($event)',
     '(keydown)': '_handleKeydown($event)',
   },
   providers: [MD_AUTOCOMPLETE_VALUE_ACCESSOR]
@@ -153,15 +153,15 @@ export class MdAutocompleteTrigger implements AfterContentInit, ControlValueAcce
    */
   get panelClosingActions(): Observable<MdOptionSelectEvent> {
     return Observable.merge(
-        ...this.optionSelections,
+        this.optionSelections,
         this._blurStream.asObservable(),
         this._keyManager.tabOut
     );
   }
 
   /** Stream of autocomplete option selections. */
-  get optionSelections(): Observable<MdOptionSelectEvent>[] {
-    return this.autocomplete.options.map(option => option.onSelect);
+  get optionSelections(): Observable<MdOptionSelectEvent> {
+    return Observable.merge(...this.autocomplete.options.map(option => option.onSelect));
   }
 
   /** The currently active option, coerced to MdOption type. */
@@ -213,9 +213,14 @@ export class MdAutocompleteTrigger implements AfterContentInit, ControlValueAcce
     }
   }
 
-  _handleInput(value: string): void {
-    this._onChange(value);
-    this.openPanel();
+  _handleInput(event: KeyboardEvent): void {
+    // We need to ensure that the input is focused, because IE will fire the `input`
+    // event on focus/blur/load if the input has a placeholder. See:
+    // https://connect.microsoft.com/IE/feedback/details/885747/
+    if (document.activeElement === event.target) {
+      this._onChange((event.target as HTMLInputElement).value);
+      this.openPanel();
+    }
   }
 
   _handleBlur(newlyFocusedTag: string): void {