Merge branch 'master' into overlay-scroll

package.json

@@ -31,8 +31,6 @@
     "@angular/forms": "^2.2.0",
     "@angular/http": "^2.2.0",
     "@angular/platform-browser": "^2.2.0",
-    "@angular/platform-browser-dynamic": "^2.2.0",
-    "@angular/router": "^3.2.0",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "rxjs": "5.0.0-beta.12",
@@ -41,7 +39,9 @@
   },
   "devDependencies": {
     "@angular/compiler-cli": "^2.2.0",
+    "@angular/platform-browser-dynamic": "^2.2.0",
     "@angular/platform-server": "^2.2.0",
+    "@angular/router": "^3.2.0",
     "@types/glob": "^5.0.29",
     "@types/gulp": "^3.8.29",
     "@types/hammerjs": "^2.0.30",
@@ -52,10 +52,9 @@
     "@types/protractor": "^4.0.0",
     "@types/run-sequence": "0.0.27",
     "@types/rx": "^2.5.33",
-    "@types/selenium-webdriver": "^2.53.36",
+    "@types/selenium-webdriver": "2.53.36",
     "axe-core": "^2.0.7",
     "axe-webdriverjs": "^0.4.0",
-    "@types/selenium-webdriver": "^2.53.36",
     "conventional-changelog": "^1.1.0",
     "dgeni": "^0.4.2",
     "dgeni-packages": "^0.16.2",
@@ -93,6 +92,7 @@
     "rollup": "^0.34.13",
     "run-sequence": "^1.2.2",
     "sass": "^0.5.0",
+    "selenium-webdriver": "2.53.3",
     "strip-ansi": "^3.0.0",
     "stylelint": "^7.7.0",
     "symlink-or-copy": "^1.0.1",

src/lib/button-toggle/OVERVIEW.md

@@ -0,0 +1,22 @@
+Button-toggles are on/off toggles with the appearance of a button. These toggles can be configured
+to behave as either radio-buttons or checkboxes. While they can be standalone, they are typically 
+part of a `md-button-toggle-group`.
+
+
+<!-- example(button-toggle-overview) -->
+
+### Exclusive selection vs. multiple selection
+By default, `md-button-toggle-group` acts like a radio-button group- only one item can be selected.
+In this mode, the `value` of the `md-button-toggle-group` will reflect the value of the selected 
+button and `ngModel` is supported. 
+
+Adding the `multiple` attribute allows multiple items to be selected (checkbox behavior). In this
+mode the values of the the toggles are not used, the `md-button-toggle-group` does not have a value, 
+and `ngModel` is not supported.
+
+### Accessibility
+The button-toggles will present themselves as either checkboxes or radio-buttons based on the 
+presence of the `multiple` attribute. 
+
+### Orientation
+The button-toggles can be rendered in a vertical orientation by adding the `vertical` attribute.

src/lib/button/OVERVIEW.md

@@ -0,0 +1,25 @@
+Angular Material buttons are native `<button>` or `<a>` elements enhanced with Material Design 
+styling and ink ripples.
+
+<!-- example(button-overview) -->
+
+Native `<button>` and `<a>` elements are always used in order to provide the most straightforward
+and accessible experience for users. A `<button>` element should be used whenever some _action_
+is performed. An `<a>` element should be used whenever the user will _navigate_ to another view.
+
+
+There are five button variants, each applied as an attribute:
+
+| Attribute          | Description                                                                 |
+|--------------------|-----------------------------------------------------------------------------|
+| `md-button`        | Rectangular button w/ no elevation.                                         |
+| `md-raised-button` | Rectangular button w/ elevation                                             |
+| `md-icon-button`   | Circular button with a transparent background, meant to contain an icon     |
+| `md-fab`           | Circular button w/ elevation, defaults to theme's accent color              |
+| `md-mini-fab`      | Same as `md-fab` but smaller                                                |
+
+
+### Theming
+Buttons can be colored in terms of the current theme using the `color` property to set the 
+background color to `primary`, `accent`, or `warn`. By default, only FABs are colored; the default
+background color for `md-button` and `md-raised-button` matches the theme's background color. 

src/lib/card/OVERVIEW.md

@@ -0,0 +1,45 @@
+Cards are content containers for text, photos, and actions. Cards are intended to provide 
+information on a single subject.
+
+<!-- example(card-overview) -->
+
+
+### Basic card sections
+The most basic card needs only an `<md-card>` element with some content. However, Angular Material
+provides a number of preset sections that you can use inside of an `<md-card>`:
+
+
+| Element               | Description                                                              |
+|-----------------------|--------------------------------------------------------------------------|
+| `<md-card-title>`     | Card title                                                               |
+| `<md-card-subtitle>`  | Card subtitle                                                            |
+| `<md-card-content>`   | Primary card content. Intended for blocks of text                        |
+| `<img md-card-image>` | Card image. Stretches the image to the container width                   |
+| `<md-card-actions>`   | Container for buttons at the bottom of the card                          |
+| `<md-card-footer>`    | Section anchored to the bottom of the card                               |
+
+These elements primary serve as pre-styled content containers without any additional APIs. 
+However, the `align` property on `<md-card-actions>` can be used to position the actions at the 
+`'start'` or `'end` of the container.  
+
+
+### Card headers
+In addition to the aforementioned sections, `<md-card-header>` gives the ability to add a rich
+header to a card. This header can contain:
+
+| Element                | Description                                                             |
+|------------------------|-------------------------------------------------------------------------|
+| `<md-card-title>`      | A title within the header                                               |
+| `<md-card-subtitle>`   | A subtitle within the header                                            |
+| `<img md-card-avatar>` | An image used as an avatar within the header                            |
+
+
+### Title groups
+An `<md-title-group>` can be used to combine a title, subtitle, and image into a single section.
+This element can contain:
+* `<md-card-title>`
+* `<md-card-subtite>`
+* One of:
+    * `<img md-card-sm-image>`
+    * `<img md-card-md-image>`
+    * `<img md-card-lg-image>`

src/lib/checkbox/OVERVIEW.md

@@ -0,0 +1,28 @@
+`<md-checkbox>` provides the same functionality as a native `<input type="checkbox">`
+enhanced Material Design styling and animations.
+
+<!-- example(checkbox-overview) -->
+
+### Checkbox label
+The checkbox label is provided as the content to the `<md-checkbox>` element. The label can be 
+positioned before or after the checkbox by setting the `labelPosition` property to `'before'` or
+`'after'`.
+
+If you don't want the label to appear next to the checkbox, you can use 
+[`aria-label`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-label) or 
+[`aria-labelledby`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) to 
+specify an appropriate label.
+
+### Use with `@angular/forms`
+`<md-checkobx>` is compatible with `@angular/forms` and supports both `FormsModule` 
+and `ReactiveFormsModule`.
+
+### Indeterminate state
+`<md-checkbox>` supports an `indeterminate` state, similar to the native `<input type="checkbox">`.
+While the `indeterminate` property of the checkbox is true, it will render as indeterminate 
+regardless of the `checked` value. Any interaction with the checkbox by a user (i.e., clicking) will
+remove the indeterminate state.
+
+### Theming
+The color of a `<md-checkbox>` can be changed by using the `color` property. By default, checkboxes
+use the theme's accent color. This can be changed to `'primary'` or `'warn'`.  

src/lib/dialog/OVERVIEW.md

@@ -0,0 +1,39 @@
+The `MdDialog` service can be used to open modal dialogs with Material Design styling and 
+animations.
+
+<!-- example(dialog-overview) -->
+
+A dialog is opened by calling the `open` method with a component to be loaded and an optional 
+config object. The `open` method will return an instance of `MdDialogRef`:
+
+```ts
+let dialogRef = dialog.open(UserProfileComponent, {
+  height: '400px',
+  width: '600px',
+});
+```
+
+The `MdDialogRef` provides a handle on the opened dialog. It can be used to close the dialog and to
+recieve notification when the dialog has been closed.
+```ts
+dialogRef.afterClosed.then(result => {
+  console.log(`Dialog result: ${result}`); // Pizza!
+});
+
+dialogRef.close('Pizza!');
+
+```
+
+Components created via `MdDialog` can _inject_ `MdDialogRef` and use it to close the dialog
+in which they are contained. When closing, an optional result value can be provided. This result
+value is forwarded as the result of the `afterClosed` promise. 
+
+### Dialog content
+Several directives are available to make it easier to structure your dialog content:
+
+| Name                  | Description                                                              |
+|-----------------------|--------------------------------------------------------------------------|
+| `md-dialog-title`     | \[Attr] Dialog title, applied to a heading element (e.g., `<h1>`, `<h2>`)|
+| `<md-dialog-content>` | Primary scrollable content of the dialog                                 |
+| `<md-dialog-actions>` | Container for action buttons at the bottom of the dialog                 |
+| `md-dialog-close`     | \[Attr] Added to a `<button>`, makes the button close the dialog on click|

src/lib/dialog/README.md

@@ -8,7 +8,6 @@ MdDialog is a service, which opens dialogs components in the view.
 | ---- | ----------- |
 | `open(component: ComponentType<T>, config: MdDialogConfig): MdDialogRef<T>` | Creates and opens a dialog matching material spec. |
 | `closeAll(): void` | Closes all of the dialogs that are currently open. |
-| `closeTop(): void` | Closes the topmost of the open dialogs. |
 
 ### Config
 

src/lib/snack-bar/snack-bar-ref.ts

@@ -5,7 +5,7 @@ import {MdSnackBarContainer} from './snack-bar-container';
 
 // TODO(josephperrott): Implement onAction observable.
 
-
+Observable.of([]);
 /**
  * Reference to a snack bar dispatched from the snack bar service.
  */

src/lib/system-config-spec.ts

@@ -18,8 +18,6 @@ System.config({
     '@angular/http/testing': 'vendor/@angular/http/bundles/http-testing.umd.js',
     '@angular/forms': 'vendor/@angular/forms/bundles/forms.umd.js',
     '@angular/forms/testing': 'vendor/@angular/forms/bundles/forms-testing.umd.js',
-    '@angular/router': 'vendor/@angular/router/bundles/router.umd.js',
-    '@angular/router/testing': 'vendor/@angular/router/bundles/router-testing.umd.js',
     '@angular/platform-browser': 'vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
     '@angular/platform-browser/testing':
       'vendor/@angular/platform-browser/bundles/platform-browser-testing.umd.js',

src/lib/tooltip/tooltip.ts

@@ -32,6 +32,7 @@ import {Dir} from '../core/rtl/dir';
 import {ScrollDispatcher} from '../core/overlay/scroll/scroll-dispatcher';
 import {OverlayPositionBuilder} from '../core/overlay/position/overlay-position-builder';
 import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
+import 'rxjs/add/operator/first';
 
 export type TooltipPosition = 'left' | 'right' | 'above' | 'below' | 'before' | 'after';
 

test/browser-providers.ts

@@ -63,7 +63,7 @@ export const customLaunchers: { [name: string]: BrowserLauncherInfo } = {
   'SL_CHROME': {
     base: 'SauceLabs',
     browserName: 'chrome',
-    version: '46'
+    version: 'latest'
   },
   'SL_CHROMEBETA': {
     base: 'SauceLabs',
@@ -78,7 +78,7 @@ export const customLaunchers: { [name: string]: BrowserLauncherInfo } = {
   'SL_FIREFOX': {
     base: 'SauceLabs',
     browserName: 'firefox',
-    version: '42'
+    version: 'latest'
   },
   'SL_FIREFOXBETA': {
     base: 'SauceLabs',

test/protractor.conf.js

@@ -43,7 +43,11 @@ if (process.env['TRAVIS']) {
     'browserName': 'chrome',
     'tunnel-identifier': process.env['TRAVIS_JOB_NUMBER'],
     'build': process.env['TRAVIS_JOB_NUMBER'],
-    'name': 'Material 2 E2E Tests'
+    'name': 'Material 2 E2E Tests',
+
+    // By default Saucelabs tries to record the whole e2e run. This can slow down the builds.
+    'recordVideo': false,
+    'recordScreenshots': false
   };
 }
 

tools/gulp/constants.ts

@@ -17,7 +17,9 @@ export const SASS_AUTOPREFIXER_OPTIONS = {
 
 export const HTML_MINIFIER_OPTIONS = {
   collapseWhitespace: true,
-  removeComments: true
+  removeComments: true,
+  caseSensitive: true,
+  removeAttributeQuotes: false
 };
 
 export const NPM_VENDOR_FILES = [