Merge branch 'master' into 2326/tooltip-touch-click

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

Author: crisbeto

.travis.yml

@@ -2,7 +2,7 @@ language: node_js
 sudo: false
 
 node_js:
-  - '6.9.1'
+  - '6.9.4'
 
 branches:
   only:

CONTRIBUTING.md

@@ -1,6 +1,6 @@
-# Contributing to Angular 2 Material
+# Contributing to Angular Material
 
-We would love for you to contribute to Angular 2 Material and help make it ever better!
+We would love for you to contribute to Angular Material and help make it ever better!
 As a contributor, here are the guidelines we would like you to follow:
 
  - [Code of Conduct](#coc)
@@ -19,7 +19,7 @@ Help us keep Angular open and inclusive. Please read and follow our [Code of Con
 
 If you have questions about how to *use* Angular Material, please direct them to the 
 [Google Group][material-group] discussion list or [StackOverflow][stackoverflow]. 
-Please note that Angular 2 Material is still in very early development, and the team's capacity 
+Please note that Angular Material is still in very early development, and the team's capacity 
 to answer usage questions is limited. Community chat is also available on [Gitter][gitter].
 
 ## <a name="issue"></a> Found an Issue?
@@ -33,7 +33,7 @@ You can help the team even more and [submit a Pull Request](#submit-pr) with a f
 ## <a name="feature"></a> Want a Feature?
 You can *request* a new feature by [submitting an issue](#submit-issue) to our [GitHub
 Repository][github]. If you would like to *implement* a new feature, please submit an issue with
-a proposal for your work first, to be sure that we can use it. Angular 2 Material is in very early 
+a proposal for your work first, to be sure that we can use it. Angular Material is in very early 
 stages and we are not ready to accept major contributions ahead of the full release.
 Please consider what kind of change it is:
 

README.md

@@ -1,9 +1,9 @@
-# Material Design for Angular 2
+# Material Design for Angular
 [![npm version](https://badge.fury.io/js/%40angular%2Fmaterial.svg)](https://www.npmjs.com/package/%40angular%2Fmaterial)
 [![Build Status](https://travis-ci.org/angular/material2.svg?branch=master)](https://travis-ci.org/angular/material2)
 [![Gitter](https://badges.gitter.im/angular/material2.svg)](https://gitter.im/angular/material2?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 
-This is the home for the Angular team's Material Design components built on top of Angular 2.
+This is the home for the Angular team's Material Design components built on top of Angular.
 
 #### Quick links
 [Google group](https://groups.google.com/forum/#!forum/angular-material2),
@@ -14,19 +14,19 @@ This is the home for the Angular team's Material Design components built on top
 
 The latest release of Angular Material can be installed from npm
 
-`npm install @angular/material`
+`npm install --save @angular/material`
 
 Playing with the latest changes from [master](https://github.com/angular/material2/tree/master) is also possible
 
-`npm install https://github.com/angular/material2-builds.git`
+`npm install --save https://github.com/angular/material2-builds.git`
 
 ### Getting started
 
 See our [Getting Started Guide][getting-started]
-if you're building your first project with Angular Material 2.
+if you're building your first project with Angular Material.
 
 ### Project status
-Angular Material 2 is currently in beta and under active development.
+Angular Material is currently in beta and under active development.
 During beta, new features will be added regularly and APIs will evolve based on user feedback.
 
 Check out our [directory of design documents](https://github.com/angular/material2/wiki/Design-doc-directory)
@@ -39,6 +39,7 @@ Also see our [`Good for community contribution`](https://github.com/angular/mate
 label.
 
 High level items planned for January 2017:
+
 * Initial version of md-autocomplete
 * Prototyping for data-table
 * Improvements to https://material.angular.io
@@ -73,7 +74,7 @@ High level items planned for January 2017:
 | ripples          |                           Available | [README][19] |   [#108][0108] |
 | dialog           |                           Available | [README][22] |   [#114][0114] |
 | snackbar / toast |                           Available | [README][21] |   [#115][0115] |
-| select           |                           Available |           -  |   [#118][0118] |
+| select           |                           Available | [README][23] |   [#118][0118] |
 | textarea         |                           Available |           -  |              - |
 | autocomplete     |                         In-progress |           -  |   [#117][0117] |
 | chips            |  Initial version, features evolving |           -  |   [#120][0120] |
@@ -114,6 +115,7 @@ High level items planned for January 2017:
 [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
 
 [0107]: https://github.com/angular/material2/issues/107
 [0119]: https://github.com/angular/material2/issues/119
@@ -141,7 +143,7 @@ High level items planned for January 2017:
 be missing some behaviors or polish.
 
 ## The goal of Angular Material
-Our goal is to build a set of high-quality UI components built with Angular 2 and TypeScript,
+Our goal is to build a set of high-quality UI components built with Angular and TypeScript,
 following the Material Design spec. These
 components will serve as an example of how to write Angular code following best practices.
 

e2e/index.e2e.ts

@@ -4,7 +4,7 @@ describe('hello, protractor', function () {
   describe('index', function () {
     browser.get('/');
     it('should have a title', function () {
-      expect(browser.getTitle()).toBe('Material2');
+      expect(browser.getTitle()).toBe('Angular Material');
     });
   });
 });

guides/getting-started.md

@@ -1,9 +1,9 @@
-Get started with Angular Material 2 using the Angular CLI.
+Get started with Angular Material using the Angular CLI.
 
-## Install the CLI
+## Install Angular CLI
 
  ```bash
- npm install -g angular-cli
+ npm install -g @angular/cli
  ```
 
 ## Create a new project
@@ -85,6 +85,6 @@ load the Material Design font in your `index.html`.
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 ```
 
-## Sample Angular Material 2 projects
-- [Material 2 Sample App](https://github.com/jelbourn/material2-app)
+## Sample Angular Material projects
+- [Material Sample App](https://github.com/jelbourn/material2-app)
 - [Angular Connect 2016 Demo](https://github.com/kara/leashed-in)

guides/theming.md

@@ -13,7 +13,7 @@ a theme consists of:
 * A foreground palette: colors for text and icons.
 * A background palette: colors used for element backgrounds.
 
-In Angular Material 2, all theme styles are generated _statically_ at build-time so that your
+In Angular Material, all theme styles are generated _statically_ at build-time so that your
 app doesn't have to spend cycles generating theme styles on startup.
 
 [1]: https://material.google.com/style/color.html#color-color-palette

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "material2",
-  "description": "Material Design components for Angular 2",
+  "name": "material2-srcs",
+  "description": "Material Design components for Angular",
   "homepage": "https://github.com/angular/material2",
   "bugs": "https://github.com/angular/material2/issues",
   "repository": {
@@ -72,7 +72,6 @@
     "gulp-sass": "^3.1.0",
     "gulp-sourcemaps": "^2.4.0",
     "gulp-transform": "^1.1.0",
-    "gulp-typescript": "^3.1.4",
     "hammerjs": "^2.0.8",
     "highlight.js": "^9.9.0",
     "jasmine-core": "^2.5.2",
@@ -97,6 +96,7 @@
     "ts-node": "^2.0.0",
     "tslint": "^3.13.0",
     "typescript": "~2.0.10",
-    "uglify-js": "^2.7.5"
+    "uglify-js": "^2.7.5",
+    "web-animations-js": "^2.2.2"
   }
 }

scripts/release/copy-docs.sh

@@ -7,7 +7,7 @@
 # Use OVERVIEW.html when possible. If there's no OVERVIEW file exists, use README.html
 
 usage='Usage: copy-docs.sh $destinationFolder'
-if [ $# -ne 1 ]; then 
+if [ $# -ne 1 ]; then
   echo "Missing destination folder. $usage"
   exit
 fi
@@ -23,7 +23,7 @@ fi
 for file in $originFolder*
 do
   name=${file#$originFolder}
-  overviewFile=$originFolder$name/OVERVIEW.html
+  overviewFile=$originFolder$name/$name.html
   readmeFile=$originFolder$name/README.html
   destFile=$destFolder/$name.html
   if [ -f $overviewFile ]; then

src/demo-app/autocomplete/autocomplete-demo.html

@@ -1,6 +1,9 @@
+Space above cards: <input type="number" [formControl]="topHeightCtrl">
+<div [style.height.px]="topHeightCtrl.value"></div>
 <div class="demo-autocomplete">
   <md-card>
-    <div>Reactive value: {{ stateCtrl.value }}</div>
+    Reactive length: {{ reactiveStates.length }}
+    <div>Reactive value: {{ stateCtrl.value | json }}</div>
     <div>Reactive dirty: {{ stateCtrl.dirty }}</div>
 
     <md-input-container>
@@ -9,7 +12,7 @@
 
     <md-card-actions>
       <button md-button (click)="stateCtrl.reset()">RESET</button>
-      <button md-button (click)="stateCtrl.setValue('California')">SET VALUE</button>
+      <button md-button (click)="stateCtrl.setValue(states[10])">SET VALUE</button>
       <button md-button (click)="stateCtrl.enabled ? stateCtrl.disable() : stateCtrl.enable()">
         TOGGLE DISABLED
       </button>
@@ -37,8 +40,8 @@
   </md-card>
 </div>
 
-<md-autocomplete #reactiveAuto="mdAutocomplete">
-  <md-option *ngFor="let state of reactiveStates" [value]="state.name">
+<md-autocomplete #reactiveAuto="mdAutocomplete" [displayWith]="displayFn">
+  <md-option *ngFor="let state of reactiveStates | async" [value]="state">
     <span>{{ state.name }}</span>
     <span class="demo-secondary-text"> ({{state.code}}) </span>
   </md-option>
@@ -47,6 +50,5 @@
 <md-autocomplete #tdAuto="mdAutocomplete">
   <md-option *ngFor="let state of tdStates" [value]="state.name">
     <span>{{ state.name }}</span>
-    <span class="demo-secondary-text"> ({{state.code}}) </span>
   </md-option>
 </md-autocomplete>

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

@@ -3,7 +3,7 @@
   flex-flow: row wrap;
 
   md-card {
-    width: 350px;
+    width: 400px;
     margin: 24px;
   }
 

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

@@ -1,6 +1,6 @@
-import {Component, OnDestroy, ViewEncapsulation} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {Subscription} from 'rxjs/Subscription';
+import 'rxjs/add/operator/startWith';
 
 @Component({
   moduleId: module.id,
@@ -9,59 +9,84 @@ import {Subscription} from 'rxjs/Subscription';
   styleUrls: ['autocomplete-demo.css'],
   encapsulation: ViewEncapsulation.None
 })
-export class AutocompleteDemo implements OnDestroy {
-  stateCtrl = new FormControl();
+export class AutocompleteDemo {
+  stateCtrl: FormControl;
   currentState = '';
+  topHeightCtrl = new FormControl(0);
 
-  reactiveStates: any[];
+  reactiveStates: any;
   tdStates: any[];
 
-  reactiveValueSub: Subscription;
   tdDisabled = false;
 
   states = [
     {code: 'AL', name: 'Alabama'},
+    {code: 'AK', name: 'Alaska'},
     {code: 'AZ', name: 'Arizona'},
+    {code: 'AR', name: 'Arkansas'},
     {code: 'CA', name: 'California'},
     {code: 'CO', name: 'Colorado'},
     {code: 'CT', name: 'Connecticut'},
+    {code: 'DE', name: 'Delaware'},
     {code: 'FL', name: 'Florida'},
     {code: 'GA', name: 'Georgia'},
+    {code: 'HI', name: 'Hawaii'},
     {code: 'ID', name: 'Idaho'},
+    {code: 'IL', name: 'Illinois'},
+    {code: 'IN', name: 'Indiana'},
+    {code: 'IA', name: 'Iowa'},
     {code: 'KS', name: 'Kansas'},
+    {code: 'KY', name: 'Kentucky'},
     {code: 'LA', name: 'Louisiana'},
+    {code: 'ME', name: 'Maine'},
+    {code: 'MD', name: 'Maryland'},
     {code: 'MA', name: 'Massachusetts'},
+    {code: 'MI', name: 'Michigan'},
     {code: 'MN', name: 'Minnesota'},
-    {code: 'MI', name: 'Mississippi'},
+    {code: 'MS', name: 'Mississippi'},
+    {code: 'MO', name: 'Missouri'},
+    {code: 'MT', name: 'Montana'},
+    {code: 'NE', name: 'Nebraska'},
+    {code: 'NV', name: 'Nevada'},
+    {code: 'NH', name: 'New Hampshire'},
+    {code: 'NJ', name: 'New Jersey'},
+    {code: 'NM', name: 'New Mexico'},
     {code: 'NY', name: 'New York'},
     {code: 'NC', name: 'North Carolina'},
-    {code: 'OK', name: 'Oklahoma'},
+    {code: 'ND', name: 'North Dakota'},
     {code: 'OH', name: 'Ohio'},
+    {code: 'OK', name: 'Oklahoma'},
     {code: 'OR', name: 'Oregon'},
     {code: 'PA', name: 'Pennsylvania'},
+    {code: 'RI', name: 'Rhode Island'},
     {code: 'SC', name: 'South Carolina'},
+    {code: 'SD', name: 'South Dakota'},
     {code: 'TN', name: 'Tennessee'},
     {code: 'TX', name: 'Texas'},
+    {code: 'UT', name: 'Utah'},
+    {code: 'VT', name: 'Vermont'},
     {code: 'VA', name: 'Virginia'},
     {code: 'WA', name: 'Washington'},
+    {code: 'WV', name: 'West Virginia'},
     {code: 'WI', name: 'Wisconsin'},
     {code: 'WY', name: 'Wyoming'},
   ];
 
   constructor() {
-    this.reactiveStates = this.states;
     this.tdStates = this.states;
-    this.reactiveValueSub =
-        this.stateCtrl.valueChanges.subscribe(val => this.reactiveStates = this.filterStates(val));
+    this.stateCtrl = new FormControl({code: 'CA', name: 'California'});
+    this.reactiveStates = this.stateCtrl.valueChanges
+        .startWith(this.stateCtrl.value)
+        .map(val => this.displayFn(val))
+        .map(name => this.filterStates(name));
+  }
 
+  displayFn(value: any): string {
+    return value && typeof value === 'object' ? value.name : value;
   }
 
   filterStates(val: string) {
     return val ? this.states.filter((s) => s.name.match(new RegExp(val, 'gi'))) : this.states;
   }
 
-  ngOnDestroy() {
-    this.reactiveValueSub.unsubscribe();
-  }
-
 }

src/demo-app/baseline/baseline-demo.html

@@ -10,8 +10,6 @@
     | Text 3 |
     <md-radio-button value="option_3">Radio 3</md-radio-button>
     | Text 4 |
-    <md-input placeholder="Input"></md-input>
-    | Text 5 |
     <md-input-container>
       <input mdInput placeholder="Input">
     </md-input-container>
@@ -32,8 +30,6 @@ <h1>
       | Text 3 |
       <md-radio-button value="option_3">Radio 3</md-radio-button>
       | Text 4 |
-      <md-input placeholder="Input"></md-input>
-      | Text 5 |
       <md-input-container>
         <input mdInput placeholder="Input">
       </md-input-container>

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

@@ -25,7 +25,7 @@ export class MdCheckboxDemoNestedChecklist {
       subtasks: [
         { name: 'Cook Dinner', completed: false },
         { name: 'Read the Material Design Spec', completed: false },
-        { name: 'Upgrade Application to Angular2', completed: false }
+        { name: 'Upgrade Application to Angular', completed: false }
       ]
     },
     {

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

@@ -1,5 +1,4 @@
-import {Component} from '@angular/core';
-import {MdInput} from '@angular/material';
+import {Component, ElementRef} from '@angular/core';
 
 export interface Person {
   name: string;
@@ -40,10 +39,10 @@ export class ChipsDemo {
     alert(message);
   }
 
-  add(input: MdInput): void {
-    if (input.value && input.value.trim() != '') {
-      this.people.push({ name: input.value.trim() });
-      input.value = '';
+  add(input: ElementRef): void {
+    if (input.nativeElement.value && input.nativeElement.value.trim() != '') {
+      this.people.push({ name: input.nativeElement.value.trim() });
+      input.nativeElement.value = '';
     }
   }