@angular/material - npm Package Compare versions

Comparing version 2.0.0-alpha.9 to 2.0.0-alpha.10-experimental-3

button-toggle/button-toggle.d.ts

@@ -28,3 +28,6 @@ import { ModuleWithProviders, OnInit, QueryList, AfterViewInit } from '@angular/core';
     private _isInitialized;
-    /** The method to be called in order to update ngModel. */
+    /**
+     * The method to be called in order to update ngModel.
+     * Now `ngModel` binding is not supported in multiple selection mode.
+     */
     private _controlValueAccessorChangeFn;
@@ -64,3 +67,3 @@ /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
 }
-/** Multiple selection button-toggle group. */
+/** Multiple selection button-toggle group. `ngModel` is not supported in this mode. */
 export declare class MdButtonToggleGroupMultiple {
@@ -67,0 +70,0 @@ /** Disables all toggles in the group. */

button-toggle/button-toggle.js

@@ -16,3 +16,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { Observable } from 'rxjs/Observable';
-import { BooleanFieldValue, MdUniqueSelectionDispatcher } from '../core';
+import { MdUniqueSelectionDispatcher, coerceBooleanProperty } from '../core';
 /**
@@ -47,3 +47,6 @@ * Provider Expression that allows md-button-toggle-group to register as a ControlValueAccessor.
         this._isInitialized = false;
-        /** The method to be called in order to update ngModel. */
+        /**
+         * The method to be called in order to update ngModel.
+         * Now `ngModel` binding is not supported in multiple selection mode.
+         */
         this._controlValueAccessorChangeFn = function (value) { };
@@ -84,3 +87,3 @@ /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
         set: function (value) {
-            this._disabled = (value != null && value !== false) ? true : null;
+            this._disabled = coerceBooleanProperty(value);
         },
@@ -189,4 +192,3 @@ enumerable: true,
     __decorate([
-        Input(),
-        BooleanFieldValue(), 
+        Input(), 
         __metadata('design:type', Boolean)
@@ -209,2 +211,3 @@ ], MdButtonToggleGroup.prototype, "disabled", null);
             },
+            exportAs: 'mdButtonToggleGroup',
         }), 
@@ -215,3 +218,3 @@ __metadata('design:paramtypes', [])
 }());
-/** Multiple selection button-toggle group. */
+/** Multiple selection button-toggle group. `ngModel` is not supported in this mode. */
 export var MdButtonToggleGroupMultiple = (function () {
@@ -239,2 +242,3 @@ function MdButtonToggleGroupMultiple() {
             selector: 'md-button-toggle-group[multiple]',
+            exportAs: 'mdButtonToggleGroup',
         }), 
@@ -414,3 +418,3 @@ __metadata('design:paramtypes', [])
             template: "<label [attr.for]=\"inputId\" class=\"md-button-toggle-label\"> <input #input class=\"md-button-toggle-input md-visually-hidden\" [type]=\"_type\" [id]=\"inputId\" [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\" (change)=\"_onInputChange($event)\" (click)=\"_onInputClick($event)\"> <div class=\"md-button-toggle-label-content\"> <ng-content></ng-content> </div> </label> ",
-            styles: ["md-button-toggle-group { box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); position: relative; display: inline-flex; border-radius: 3px; cursor: pointer; white-space: nowrap; } .md-button-toggle-disabled .md-button-toggle-label-content { cursor: default; } md-button-toggle { white-space: nowrap; } .md-button-toggle-label-content { display: inline-block; line-height: 36px; padding: 0 16px; cursor: pointer; } .md-button-toggle-label-content > * { vertical-align: middle; } /*# sourceMappingURL=button-toggle.css.map */ "],
+            styles: ["md-button-toggle-group { box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); position: relative; display: inline-flex; border-radius: 2px; cursor: pointer; white-space: nowrap; } .md-button-toggle-disabled .md-button-toggle-label-content { cursor: default; } md-button-toggle { white-space: nowrap; } .md-button-toggle-label-content { display: inline-block; line-height: 36px; padding: 0 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .md-button-toggle-label-content > * { vertical-align: middle; } /*# sourceMappingURL=button-toggle.css.map */ "],
             encapsulation: ViewEncapsulation.None,
@@ -417,0 +421,0 @@ }),

button-toggle/button-toggle.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MdButtonToggleGroup"},"multi":true},"MdButtonToggleGroup":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"md-button-toggle-group:not([multiple])","providers":[{"__symbolic":"reference","name":"MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR"}],"host":{"role":"radiogroup"}}]}],"members":{"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"_buttonToggles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"MdButtonToggle"}]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../core","name":"BooleanFieldValue"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_updateButtonToggleNames":[{"__symbolic":"method"}],"_updateSelectedButtonToggleFromValue":[{"__symbolic":"method"}],"_emitChangeEvent":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}]}},"MdButtonToggleGroupMultiple":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"md-button-toggle-group[multiple]"}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}]}},"MdButtonToggle":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-button-toggle","templateUrl":"button-toggle.html","styleUrls":["button-toggle.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}],null],"parameters":[{"__symbolic":"reference","name":"MdButtonToggleGroup"},{"__symbolic":"reference","name":"MdButtonToggleGroupMultiple"},{"__symbolic":"reference","module":"../core","name":"MdUniqueSelectionDispatcher"}]}],"ngOnInit":[{"__symbolic":"method"}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-button-toggle-checked"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_emitChangeEvent":[{"__symbolic":"method"}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-button-toggle-disabled"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_toggle":[{"__symbolic":"method"}],"_onInputChange":[{"__symbolic":"method"}],"_onInputClick":[{"__symbolic":"method"}]}},"MdButtonToggleModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","name":"MdButtonToggleGroup"},{"__symbolic":"reference","name":"MdButtonToggleGroupMultiple"},{"__symbolic":"reference","name":"MdButtonToggle"}],"declarations":[{"__symbolic":"reference","name":"MdButtonToggleGroup"},{"__symbolic":"reference","name":"MdButtonToggleGroupMultiple"},{"__symbolic":"reference","name":"MdButtonToggle"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdButtonToggleModule"},"providers":[{"__symbolic":"reference","module":"../core","name":"MdUniqueSelectionDispatcher"}]}}}}}}
+{"__symbolic":"module","version":1,"metadata":{"MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MdButtonToggleGroup"},"multi":true},"MdButtonToggleGroup":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"md-button-toggle-group:not([multiple])","providers":[{"__symbolic":"reference","name":"MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR"}],"host":{"role":"radiogroup"},"exportAs":"mdButtonToggleGroup"}]}],"members":{"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"_buttonToggles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"MdButtonToggle"}]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_updateButtonToggleNames":[{"__symbolic":"method"}],"_updateSelectedButtonToggleFromValue":[{"__symbolic":"method"}],"_emitChangeEvent":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}]}},"MdButtonToggleGroupMultiple":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"md-button-toggle-group[multiple]","exportAs":"mdButtonToggleGroup"}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}]}},"MdButtonToggle":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-button-toggle","templateUrl":"button-toggle.html","styleUrls":["button-toggle.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}],null],"parameters":[{"__symbolic":"reference","name":"MdButtonToggleGroup"},{"__symbolic":"reference","name":"MdButtonToggleGroupMultiple"},{"__symbolic":"reference","module":"../core","name":"MdUniqueSelectionDispatcher"}]}],"ngOnInit":[{"__symbolic":"method"}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-button-toggle-checked"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_emitChangeEvent":[{"__symbolic":"method"}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-button-toggle-disabled"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_toggle":[{"__symbolic":"method"}],"_onInputChange":[{"__symbolic":"method"}],"_onInputClick":[{"__symbolic":"method"}]}},"MdButtonToggleModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","name":"MdButtonToggleGroup"},{"__symbolic":"reference","name":"MdButtonToggleGroupMultiple"},{"__symbolic":"reference","name":"MdButtonToggle"}],"declarations":[{"__symbolic":"reference","name":"MdButtonToggleGroup"},{"__symbolic":"reference","name":"MdButtonToggleGroupMultiple"},{"__symbolic":"reference","name":"MdButtonToggle"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdButtonToggleModule"},"providers":[{"__symbolic":"reference","module":"../core","name":"MdUniqueSelectionDispatcher"}]}}}}}}

button-toggle/README.md

@@ -12,13 +12,2 @@ # md-button-toggle
 
-### Setup
-
-Importing the module:
-```ts
- @NgModule({
-    imports: [MdButtonToggleModule.forRoot()],
-    ...
- })
- export class MyAppModule { }
-```
-
 ### Basic Usage
@@ -59,3 +48,3 @@
 `md-button-toggle-group multiple`. This styles all buttons within the group to appear as a single
-group of button toggles.
+group of button toggles. This component does not yet support `NgModel` when using `multiple` mode.
 
@@ -62,0 +51,0 @@ ```html

button/button.d.ts

@@ -11,3 +11,6 @@ import { ElementRef, Renderer, ModuleWithProviders } from '@angular/core';
     /** Whether the ripple effect on click should be disabled. */
+    private _disableRipple;
+    private _disabled;
     disableRipple: boolean;
+    disabled: boolean;
     constructor(_elementRef: ElementRef, _renderer: Renderer);
@@ -24,10 +27,8 @@ color: string;
     isRoundButton(): any;
-    isRippleEnabled(): boolean;
+    _isRippleDisabled(): boolean;
 }
 export declare class MdAnchor extends MdButton {
-    _disabled: boolean;
     constructor(elementRef: ElementRef, renderer: Renderer);
     readonly tabIndex: number;
     readonly isAriaDisabled: string;
-    disabled: boolean;
     _haltDisabledEvents(event: Event): void;
@@ -34,0 +35,0 @@ }

button/button.js

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || function (d, b) {
 import { CommonModule } from '@angular/common';
-import { BooleanFieldValue, MdRippleModule } from '../core';
+import { MdRippleModule, coerceBooleanProperty } from '../core';
 // TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.
@@ -30,4 +30,17 @@ // TODO(kara): Convert attribute selectors to classes when attr maps become available
         /** Whether the ripple effect on click should be disabled. */
-        this.disableRipple = false;
+        this._disableRipple = false;
+        this._disabled = false;
     }
+    Object.defineProperty(MdButton.prototype, "disableRipple", {
+        get: function () { return this._disableRipple; },
+        set: function (v) { this._disableRipple = coerceBooleanProperty(v); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdButton.prototype, "disabled", {
+        get: function () { return this._disabled; },
+        set: function (value) { this._disabled = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(MdButton.prototype, "color", {
@@ -81,12 +94,15 @@ get: function () {
     };
-    MdButton.prototype.isRippleEnabled = function () {
-        return !this.disableRipple;
+    MdButton.prototype._isRippleDisabled = function () {
+        return this.disableRipple || this.disabled;
     };
     __decorate([
-        Input(),
-        BooleanFieldValue(), 
-        __metadata('design:type', Boolean)
-    ], MdButton.prototype, "disableRipple", void 0);
+        Input(), 
+        __metadata('design:type', Object)
+    ], MdButton.prototype, "disableRipple", null);
     __decorate([
         Input(), 
+        __metadata('design:type', Object)
+    ], MdButton.prototype, "disabled", null);
+    __decorate([
+        Input(), 
         __metadata('design:type', String)
@@ -98,2 +114,3 @@ ], MdButton.prototype, "color", null);
             host: {
+                '[disabled]': 'disabled',
                 '[class.md-button-focus]': '_isKeyboardFocused',
@@ -104,4 +121,4 @@ '(mousedown)': '_setMousedown()',
             },
-            template: "<span class=\"md-button-wrapper\"><ng-content></ng-content></span> <div md-ripple *ngIf=\"isRippleEnabled()\" class=\"md-button-ripple\" [class.md-button-ripple-round]=\"isRoundButton()\" [md-ripple-trigger]=\"getHostElement()\" [md-ripple-color]=\"isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''\" md-ripple-background-color=\"rgba(0, 0, 0, 0)\"></div> ",
-            styles: ["[md-raised-button], [md-fab], [md-mini-fab], [md-button], [md-icon-button] { box-sizing: border-box; position: relative; cursor: pointer; user-select: none; outline: none; border: none; display: inline-block; white-space: nowrap; text-decoration: none; vertical-align: baseline; font-size: 14px; font-family: Roboto, \"Helvetica Neue\", sans-serif; font-weight: 500; color: currentColor; text-align: center; margin: 0; min-width: 88px; line-height: 36px; padding: 0 16px; border-radius: 3px; } [disabled][md-raised-button], [disabled][md-fab], [disabled][md-mini-fab], [disabled][md-button], [disabled][md-icon-button] { cursor: default; } .md-button-focus[md-raised-button]::after, .md-button-focus[md-fab]::after, .md-button-focus[md-mini-fab]::after, .md-button-focus[md-button]::after, .md-button-focus[md-icon-button]::after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: ''; background-color: rgba(0, 0, 0, 0.12); border-radius: inherit; pointer-events: none; } [md-raised-button], [md-fab], [md-mini-fab] { box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); transform: translate3d(0, 0, 0); transition: background 400ms cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); } [md-raised-button]:active, [md-fab]:active, [md-mini-fab]:active { box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } [disabled][md-raised-button], [disabled][md-fab], [disabled][md-mini-fab] { box-shadow: none; } [md-button]:hover::after, [md-icon-button]:hover::after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: ''; background-color: rgba(0, 0, 0, 0.12); border-radius: inherit; pointer-events: none; } [md-button][disabled]:hover.md-primary, [md-button][disabled]:hover.md-accent, [md-button][disabled]:hover.md-warn, [md-button][disabled]:hover::after, [md-icon-button][disabled]:hover.md-primary, [md-icon-button][disabled]:hover.md-accent, [md-icon-button][disabled]:hover.md-warn, [md-icon-button][disabled]:hover::after { background-color: transparent; } [md-fab] { min-width: 0; border-radius: 50%; width: 56px; height: 56px; padding: 0; } [md-fab] i, [md-fab] md-icon { padding: 16px 0; } [md-mini-fab] { min-width: 0; border-radius: 50%; width: 40px; height: 40px; padding: 0; } [md-mini-fab] i, [md-mini-fab] md-icon { padding: 8px 0; } [md-icon-button] { min-width: 0; padding: 0; width: 40px; height: 40px; line-height: 24px; border-radius: 50%; } [md-icon-button] .md-button-wrapper > * { vertical-align: middle; } .md-button-ripple { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .md-button-ripple-round { border-radius: 50%; z-index: 1; } @media screen and (-ms-high-contrast: active) { .md-raised-button, .md-fab, .md-mini-fab { border: 1px solid #fff; } } /*# sourceMappingURL=button.css.map */ "],
+            template: "<span class=\"md-button-wrapper\"><ng-content></ng-content></span> <div md-ripple *ngIf=\"!_isRippleDisabled()\" class=\"md-button-ripple\" [class.md-button-ripple-round]=\"isRoundButton()\" [md-ripple-trigger]=\"getHostElement()\" [md-ripple-color]=\"isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''\" md-ripple-background-color=\"rgba(0, 0, 0, 0)\"></div> ",
+            styles: ["[md-raised-button], [md-fab], [md-mini-fab], [md-button], [md-icon-button] { box-sizing: border-box; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; border: none; display: inline-block; white-space: nowrap; text-decoration: none; vertical-align: baseline; font-size: 14px; font-family: Roboto, \"Helvetica Neue\", sans-serif; font-weight: 500; color: currentColor; text-align: center; margin: 0; min-width: 88px; line-height: 36px; padding: 0 16px; border-radius: 2px; } [disabled][md-raised-button], [disabled][md-fab], [disabled][md-mini-fab], [disabled][md-button], [disabled][md-icon-button] { cursor: default; } .md-button-focus[md-raised-button]::after, .md-button-focus[md-fab]::after, .md-button-focus[md-mini-fab]::after, .md-button-focus[md-button]::after, .md-button-focus[md-icon-button]::after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: ''; background-color: rgba(0, 0, 0, 0.12); border-radius: inherit; pointer-events: none; } [md-raised-button], [md-fab], [md-mini-fab] { box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); transform: translate3d(0, 0, 0); transition: background 400ms cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); } [md-raised-button]:active, [md-fab]:active, [md-mini-fab]:active { box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } [disabled][md-raised-button], [disabled][md-fab], [disabled][md-mini-fab] { box-shadow: none; } [md-button]:hover::after, [md-icon-button]:hover::after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: ''; background-color: rgba(0, 0, 0, 0.12); border-radius: inherit; pointer-events: none; } [md-button][disabled]:hover.md-primary, [md-button][disabled]:hover.md-accent, [md-button][disabled]:hover.md-warn, [md-button][disabled]:hover::after, [md-icon-button][disabled]:hover.md-primary, [md-icon-button][disabled]:hover.md-accent, [md-icon-button][disabled]:hover.md-warn, [md-icon-button][disabled]:hover::after { background-color: transparent; } [md-fab] { min-width: 0; border-radius: 50%; width: 56px; height: 56px; padding: 0; } [md-fab] i, [md-fab] md-icon { padding: 16px 0; line-height: 24px; } [md-mini-fab] { min-width: 0; border-radius: 50%; width: 40px; height: 40px; padding: 0; } [md-mini-fab] i, [md-mini-fab] md-icon { padding: 8px 0; line-height: 24px; } [md-icon-button] { min-width: 0; padding: 0; width: 40px; height: 40px; line-height: 24px; border-radius: 50%; } [md-icon-button] .md-button-wrapper > * { line-height: 24px; vertical-align: middle; } [md-button] .md-button-wrapper > *, [md-raised-button] .md-button-wrapper > * { vertical-align: middle; } .md-button-ripple { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .md-button-ripple-round { border-radius: 50%; z-index: 1; } @media screen and (-ms-high-contrast: active) { .md-raised-button, .md-fab, .md-mini-fab { border: 1px solid #fff; } } /*# sourceMappingURL=button.css.map */ "],
             encapsulation: ViewEncapsulation.None,
@@ -118,3 +135,2 @@ changeDetection: ChangeDetectionStrategy.OnPush,
         _super.call(this, elementRef, renderer);
-        this._disabled = null;
     }
@@ -135,11 +151,2 @@ Object.defineProperty(MdAnchor.prototype, "tabIndex", {
     });
-    Object.defineProperty(MdAnchor.prototype, "disabled", {
-        get: function () { return this._disabled; },
-        set: function (value) {
-            // The presence of *any* disabled value makes the component disabled, *except* for false.
-            this._disabled = (value != null && value != false) ? true : null;
-        },
-        enumerable: true,
-        configurable: true
-    });
     MdAnchor.prototype._haltDisabledEvents = function (event) {
@@ -160,11 +167,7 @@ // A disabled button shouldn't apply any actions
     ], MdAnchor.prototype, "isAriaDisabled", null);
-    __decorate([
-        HostBinding('attr.disabled'),
-        Input('disabled'), 
-        __metadata('design:type', Object)
-    ], MdAnchor.prototype, "disabled", null);
     MdAnchor = __decorate([
         Component({selector: 'a[md-button], a[md-raised-button], a[md-icon-button], a[md-fab], a[md-mini-fab]',
-            inputs: ['color'],
+            inputs: ['color', 'disabled', 'disableRipple'],
             host: {
+                '[attr.disabled]': 'disabled',
                 '[class.md-button-focus]': '_isKeyboardFocused',
@@ -176,4 +179,4 @@ '(mousedown)': '_setMousedown()',
             },
-            template: "<span class=\"md-button-wrapper\"><ng-content></ng-content></span> <div md-ripple *ngIf=\"isRippleEnabled()\" class=\"md-button-ripple\" [class.md-button-ripple-round]=\"isRoundButton()\" [md-ripple-trigger]=\"getHostElement()\" [md-ripple-color]=\"isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''\" md-ripple-background-color=\"rgba(0, 0, 0, 0)\"></div> ",
-            styles: ["[md-raised-button], [md-fab], [md-mini-fab], [md-button], [md-icon-button] { box-sizing: border-box; position: relative; cursor: pointer; user-select: none; outline: none; border: none; display: inline-block; white-space: nowrap; text-decoration: none; vertical-align: baseline; font-size: 14px; font-family: Roboto, \"Helvetica Neue\", sans-serif; font-weight: 500; color: currentColor; text-align: center; margin: 0; min-width: 88px; line-height: 36px; padding: 0 16px; border-radius: 3px; } [disabled][md-raised-button], [disabled][md-fab], [disabled][md-mini-fab], [disabled][md-button], [disabled][md-icon-button] { cursor: default; } .md-button-focus[md-raised-button]::after, .md-button-focus[md-fab]::after, .md-button-focus[md-mini-fab]::after, .md-button-focus[md-button]::after, .md-button-focus[md-icon-button]::after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: ''; background-color: rgba(0, 0, 0, 0.12); border-radius: inherit; pointer-events: none; } [md-raised-button], [md-fab], [md-mini-fab] { box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); transform: translate3d(0, 0, 0); transition: background 400ms cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); } [md-raised-button]:active, [md-fab]:active, [md-mini-fab]:active { box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } [disabled][md-raised-button], [disabled][md-fab], [disabled][md-mini-fab] { box-shadow: none; } [md-button]:hover::after, [md-icon-button]:hover::after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: ''; background-color: rgba(0, 0, 0, 0.12); border-radius: inherit; pointer-events: none; } [md-button][disabled]:hover.md-primary, [md-button][disabled]:hover.md-accent, [md-button][disabled]:hover.md-warn, [md-button][disabled]:hover::after, [md-icon-button][disabled]:hover.md-primary, [md-icon-button][disabled]:hover.md-accent, [md-icon-button][disabled]:hover.md-warn, [md-icon-button][disabled]:hover::after { background-color: transparent; } [md-fab] { min-width: 0; border-radius: 50%; width: 56px; height: 56px; padding: 0; } [md-fab] i, [md-fab] md-icon { padding: 16px 0; } [md-mini-fab] { min-width: 0; border-radius: 50%; width: 40px; height: 40px; padding: 0; } [md-mini-fab] i, [md-mini-fab] md-icon { padding: 8px 0; } [md-icon-button] { min-width: 0; padding: 0; width: 40px; height: 40px; line-height: 24px; border-radius: 50%; } [md-icon-button] .md-button-wrapper > * { vertical-align: middle; } .md-button-ripple { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .md-button-ripple-round { border-radius: 50%; z-index: 1; } @media screen and (-ms-high-contrast: active) { .md-raised-button, .md-fab, .md-mini-fab { border: 1px solid #fff; } } /*# sourceMappingURL=button.css.map */ "],
+            template: "<span class=\"md-button-wrapper\"><ng-content></ng-content></span> <div md-ripple *ngIf=\"!_isRippleDisabled()\" class=\"md-button-ripple\" [class.md-button-ripple-round]=\"isRoundButton()\" [md-ripple-trigger]=\"getHostElement()\" [md-ripple-color]=\"isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''\" md-ripple-background-color=\"rgba(0, 0, 0, 0)\"></div> ",
+            styles: ["[md-raised-button], [md-fab], [md-mini-fab], [md-button], [md-icon-button] { box-sizing: border-box; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; border: none; display: inline-block; white-space: nowrap; text-decoration: none; vertical-align: baseline; font-size: 14px; font-family: Roboto, \"Helvetica Neue\", sans-serif; font-weight: 500; color: currentColor; text-align: center; margin: 0; min-width: 88px; line-height: 36px; padding: 0 16px; border-radius: 2px; } [disabled][md-raised-button], [disabled][md-fab], [disabled][md-mini-fab], [disabled][md-button], [disabled][md-icon-button] { cursor: default; } .md-button-focus[md-raised-button]::after, .md-button-focus[md-fab]::after, .md-button-focus[md-mini-fab]::after, .md-button-focus[md-button]::after, .md-button-focus[md-icon-button]::after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: ''; background-color: rgba(0, 0, 0, 0.12); border-radius: inherit; pointer-events: none; } [md-raised-button], [md-fab], [md-mini-fab] { box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); transform: translate3d(0, 0, 0); transition: background 400ms cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); } [md-raised-button]:active, [md-fab]:active, [md-mini-fab]:active { box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } [disabled][md-raised-button], [disabled][md-fab], [disabled][md-mini-fab] { box-shadow: none; } [md-button]:hover::after, [md-icon-button]:hover::after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: ''; background-color: rgba(0, 0, 0, 0.12); border-radius: inherit; pointer-events: none; } [md-button][disabled]:hover.md-primary, [md-button][disabled]:hover.md-accent, [md-button][disabled]:hover.md-warn, [md-button][disabled]:hover::after, [md-icon-button][disabled]:hover.md-primary, [md-icon-button][disabled]:hover.md-accent, [md-icon-button][disabled]:hover.md-warn, [md-icon-button][disabled]:hover::after { background-color: transparent; } [md-fab] { min-width: 0; border-radius: 50%; width: 56px; height: 56px; padding: 0; } [md-fab] i, [md-fab] md-icon { padding: 16px 0; line-height: 24px; } [md-mini-fab] { min-width: 0; border-radius: 50%; width: 40px; height: 40px; padding: 0; } [md-mini-fab] i, [md-mini-fab] md-icon { padding: 8px 0; line-height: 24px; } [md-icon-button] { min-width: 0; padding: 0; width: 40px; height: 40px; line-height: 24px; border-radius: 50%; } [md-icon-button] .md-button-wrapper > * { line-height: 24px; vertical-align: middle; } [md-button] .md-button-wrapper > *, [md-raised-button] .md-button-wrapper > * { vertical-align: middle; } .md-button-ripple { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .md-button-ripple-round { border-radius: 50%; z-index: 1; } @media screen and (-ms-high-contrast: active) { .md-raised-button, .md-fab, .md-mini-fab { border: 1px solid #fff; } } /*# sourceMappingURL=button.css.map */ "],
             encapsulation: ViewEncapsulation.None
@@ -180,0 +183,0 @@ }),

button/button.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MdButton":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"button[md-button], button[md-raised-button], button[md-icon-button], button[md-fab], button[md-mini-fab]","host":{"[class.md-button-focus]":"_isKeyboardFocused","(mousedown)":"_setMousedown()","(focus)":"_setKeyboardFocus()","(blur)":"_removeKeyboardFocus()"},"templateUrl":"button.html","styleUrls":["button.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"disableRipple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../core","name":"BooleanFieldValue"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_setMousedown":[{"__symbolic":"method"}],"_updateColor":[{"__symbolic":"method"}],"_setElementColor":[{"__symbolic":"method"}],"_setKeyboardFocus":[{"__symbolic":"method"}],"_removeKeyboardFocus":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"getHostElement":[{"__symbolic":"method"}],"isRoundButton":[{"__symbolic":"method"}],"isRippleEnabled":[{"__symbolic":"method"}]}},"MdAnchor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"a[md-button], a[md-raised-button], a[md-icon-button], a[md-fab], a[md-mini-fab]","inputs":["color"],"host":{"[class.md-button-focus]":"_isKeyboardFocused","(mousedown)":"_setMousedown()","(focus)":"_setKeyboardFocus()","(blur)":"_removeKeyboardFocus()","(click)":"_haltDisabledEvents($event)"},"templateUrl":"button.html","styleUrls":["button.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["tabIndex"]}]}],"isAriaDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-disabled"]}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.disabled"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["disabled"]}]}],"_haltDisabledEvents":[{"__symbolic":"method"}]}},"MdButtonModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"../core","name":"MdRippleModule"}],"exports":[{"__symbolic":"reference","name":"MdButton"},{"__symbolic":"reference","name":"MdAnchor"}],"declarations":[{"__symbolic":"reference","name":"MdButton"},{"__symbolic":"reference","name":"MdAnchor"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdButtonModule"},"providers":[]}}}}}}
+{"__symbolic":"module","version":1,"metadata":{"MdButton":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"button[md-button], button[md-raised-button], button[md-icon-button], button[md-fab], button[md-mini-fab]","host":{"[disabled]":"disabled","[class.md-button-focus]":"_isKeyboardFocused","(mousedown)":"_setMousedown()","(focus)":"_setKeyboardFocus()","(blur)":"_removeKeyboardFocus()"},"templateUrl":"button.html","styleUrls":["button.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"disableRipple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_setMousedown":[{"__symbolic":"method"}],"_updateColor":[{"__symbolic":"method"}],"_setElementColor":[{"__symbolic":"method"}],"_setKeyboardFocus":[{"__symbolic":"method"}],"_removeKeyboardFocus":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"getHostElement":[{"__symbolic":"method"}],"isRoundButton":[{"__symbolic":"method"}],"_isRippleDisabled":[{"__symbolic":"method"}]}},"MdAnchor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"a[md-button], a[md-raised-button], a[md-icon-button], a[md-fab], a[md-mini-fab]","inputs":["color","disabled","disableRipple"],"host":{"[attr.disabled]":"disabled","[class.md-button-focus]":"_isKeyboardFocused","(mousedown)":"_setMousedown()","(focus)":"_setKeyboardFocus()","(blur)":"_removeKeyboardFocus()","(click)":"_haltDisabledEvents($event)"},"templateUrl":"button.html","styleUrls":["button.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["tabIndex"]}]}],"isAriaDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-disabled"]}]}],"_haltDisabledEvents":[{"__symbolic":"method"}]}},"MdButtonModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"../core","name":"MdRippleModule"}],"exports":[{"__symbolic":"reference","name":"MdButton"},{"__symbolic":"reference","name":"MdAnchor"}],"declarations":[{"__symbolic":"reference","name":"MdButton"},{"__symbolic":"reference","name":"MdAnchor"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdButtonModule"},"providers":[]}}}}}}

checkbox/checkbox.d.ts

@@ -47,4 +47,8 @@ import { ElementRef, EventEmitter, Renderer, ModuleWithProviders } from '@angular/core';
     id: string;
+    /** Whether the ripple effect on click should be disabled. */
+    private _disableRipple;
+    disableRipple: boolean;
     /** ID to be applied to the `input` element */
     readonly inputId: string;
+    private _required;
     /** Whether the checkbox is required or not. */
@@ -54,2 +58,3 @@ required: boolean;
     align: 'start' | 'end';
+    private _disabled;
     /**
@@ -75,2 +80,3 @@ * Whether the checkbox is disabled. When the checkbox is disabled it cannot be interacted with.
     private _indeterminate;
+    private _color;
     private _controlValueAccessorChangeFn;
@@ -94,2 +100,7 @@ hasFocus: boolean;
     indeterminate: boolean;
+    /** Sets the color of the checkbox */
+    color: string;
+    _updateColor(newColor: string): void;
+    _setElementColor(color: string, isAdd: boolean): void;
+    _isRippleDisabled(): boolean;
     /**
@@ -128,2 +139,3 @@ * Implemented as part of ControlValueAccessor.
     private _getAnimationClassForCheckStateTransition(oldState, newState);
+    getHostElement(): any;
 }
@@ -130,0 +142,0 @@ export declare class MdCheckboxModule {

checkbox/checkbox.js

@@ -11,4 +11,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, Renderer, ViewEncapsulation, forwardRef, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { BooleanFieldValue } from '../core';
+import { coerceBooleanProperty } from '../core/coersion/boolean-property';
+import { MdRippleModule } from '../core';
 /**
@@ -70,12 +72,5 @@ * Monotonically increasing integer used to auto-generate unique ids for checkbox components.
         this.id = "md-checkbox-" + ++nextId;
-        /** Whether the checkbox is required or not. */
-        this.required = false;
         /** Whether or not the checkbox should come before or after the label. */
         this.align = 'start';
         /**
-         * Whether the checkbox is disabled. When the checkbox is disabled it cannot be interacted with.
-         * The correct ARIA attributes are applied to denote this to assistive technology.
-         */
-        this.disabled = false;
-        /**
          * The tabindex attribute for the checkbox. Note that when the checkbox is disabled, the attribute
@@ -97,3 +92,10 @@ * on the host element will be removed. It will be placed back when the checkbox is re-enabled.
         this.hasFocus = false;
+        this.color = 'accent';
     }
+    Object.defineProperty(MdCheckbox.prototype, "disableRipple", {
+        get: function () { return this._disableRipple; },
+        set: function (value) { this._disableRipple = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(MdCheckbox.prototype, "inputId", {
@@ -107,2 +109,19 @@ /** ID to be applied to the `input` element */
     });
+    Object.defineProperty(MdCheckbox.prototype, "required", {
+        /** Whether the checkbox is required or not. */
+        get: function () { return this._required; },
+        set: function (value) { this._required = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdCheckbox.prototype, "disabled", {
+        /**
+         * Whether the checkbox is disabled. When the checkbox is disabled it cannot be interacted with.
+         * The correct ARIA attributes are applied to denote this to assistive technology.
+         */
+        get: function () { return this._disabled; },
+        set: function (value) { this._disabled = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(MdCheckbox.prototype, "checked", {
@@ -151,2 +170,26 @@ /**
     });
+    Object.defineProperty(MdCheckbox.prototype, "color", {
+        /** Sets the color of the checkbox */
+        get: function () {
+            return this._color;
+        },
+        set: function (value) {
+            this._updateColor(value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    MdCheckbox.prototype._updateColor = function (newColor) {
+        this._setElementColor(this._color, false);
+        this._setElementColor(newColor, true);
+        this._color = newColor;
+    };
+    MdCheckbox.prototype._setElementColor = function (color, isAdd) {
+        if (color != null && color != '') {
+            this._renderer.setElementClass(this._elementRef.nativeElement, "md-" + color, isAdd);
+        }
+    };
+    MdCheckbox.prototype._isRippleDisabled = function () {
+        return this.disableRipple || this.disabled;
+    };
     /**
@@ -266,2 +309,5 @@ * Implemented as part of ControlValueAccessor.
     };
+    MdCheckbox.prototype.getHostElement = function () {
+        return this._elementRef.nativeElement;
+    };
     __decorate([
@@ -280,8 +326,11 @@ Input('aria-label'),
     __decorate([
-        Input(),
-        BooleanFieldValue(), 
+        Input(), 
         __metadata('design:type', Boolean)
-    ], MdCheckbox.prototype, "required", void 0);
+    ], MdCheckbox.prototype, "disableRipple", null);
     __decorate([
         Input(), 
+        __metadata('design:type', Boolean)
+    ], MdCheckbox.prototype, "required", null);
+    __decorate([
+        Input(), 
         __metadata('design:type', Object)
@@ -292,3 +341,3 @@ ], MdCheckbox.prototype, "align", void 0);
         __metadata('design:type', Boolean)
-    ], MdCheckbox.prototype, "disabled", void 0);
+    ], MdCheckbox.prototype, "disabled", null);
     __decorate([
@@ -314,6 +363,10 @@ Input(),
     ], MdCheckbox.prototype, "indeterminate", null);
+    __decorate([
+        Input(), 
+        __metadata('design:type', String)
+    ], MdCheckbox.prototype, "color", null);
     MdCheckbox = __decorate([
         Component({selector: 'md-checkbox',
-            template: "<label class=\"md-checkbox-layout\"> <div class=\"md-checkbox-inner-container\"> <input class=\"md-checkbox-input md-visually-hidden\" type=\"checkbox\" [id]=\"inputId\" [required]=\"required\" [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\" [tabIndex]=\"tabindex\" [indeterminate]=\"indeterminate\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (focus)=\"_onInputFocus()\" (blur)=\"_onInputBlur()\" (change)=\"_onInteractionEvent($event)\" (click)=\"_onInputClick($event)\"> <div class=\"md-ink-ripple\"></div> <div class=\"md-checkbox-frame\"></div> <div class=\"md-checkbox-background\"> <svg version=\"1.1\" class=\"md-checkbox-checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" xml:space=\"preserve\"> <path class=\"md-checkbox-checkmark-path\" fill=\"none\" stroke=\"white\" d=\"M4.1,12.7 9,17.6 20.3,6.3\"/> </svg> <!-- Element for rendering the indeterminate state checkbox. --> <div class=\"md-checkbox-mixedmark\"></div> </div> </div> <span class=\"md-checkbox-label\"> <ng-content></ng-content> </span> </label> ",
-            styles: ["@keyframes md-checkbox-fade-in-background { 0% { opacity: 0; } 50% { opacity: 1; } } @keyframes md-checkbox-fade-out-background { 0%, 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes md-checkbox-unchecked-checked-checkmark-path { 0%, 50% { stroke-dashoffset: 22.91026; } 50% { animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); } 100% { stroke-dashoffset: 0; } } @keyframes md-checkbox-unchecked-indeterminate-mixedmark { 0%, 68.2% { transform: scaleX(0); } 68.2% { animation-timing-function: cubic-bezier(0, 0, 0, 1); } 100% { transform: scaleX(1); } } @keyframes md-checkbox-checked-unchecked-checkmark-path { from { animation-timing-function: cubic-bezier(0.4, 0, 1, 1); stroke-dashoffset: 0; } to { stroke-dashoffset: -22.91026; } } @keyframes md-checkbox-checked-indeterminate-checkmark { from { animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); opacity: 1; transform: rotate(0deg); } to { opacity: 0; transform: rotate(45deg); } } @keyframes md-checkbox-indeterminate-checked-checkmark { from { animation-timing-function: cubic-bezier(0.14, 0, 0, 1); opacity: 0; transform: rotate(45deg); } to { opacity: 1; transform: rotate(360deg); } } @keyframes md-checkbox-checked-indeterminate-mixedmark { from { animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); opacity: 0; transform: rotate(-45deg); } to { opacity: 1; transform: rotate(0deg); } } @keyframes md-checkbox-indeterminate-checked-mixedmark { from { animation-timing-function: cubic-bezier(0.14, 0, 0, 1); opacity: 1; transform: rotate(0deg); } to { opacity: 0; transform: rotate(315deg); } } @keyframes md-checkbox-indeterminate-unchecked-mixedmark { 0% { animation-timing-function: linear; opacity: 1; transform: scaleX(1); } 32.8%, 100% { opacity: 0; transform: scaleX(0); } } .md-checkbox-frame, .md-checkbox-background, .md-checkbox-checkmark { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .md-checkbox-checkmark, .md-checkbox-mixedmark { width: calc(100% - 4px); } .md-checkbox-frame, .md-checkbox-background { border-radius: 2px; box-sizing: border-box; pointer-events: none; } md-checkbox { cursor: pointer; } .md-checkbox-layout { cursor: inherit; align-items: baseline; display: inline-flex; } .md-checkbox-inner-container { display: inline-block; height: 20px; line-height: 0; margin: auto; margin-right: 8px; order: 0; position: relative; vertical-align: middle; white-space: nowrap; width: 20px; } [dir='rtl'] .md-checkbox-inner-container { margin-left: 8px; margin-right: auto; } .md-checkbox-layout .md-checkbox-label { line-height: 24px; } .md-checkbox-frame { background-color: transparent; border: 2px solid; transition: border-color 90ms cubic-bezier(0, 0, 0.2, 0.1); will-change: border-color; } .md-checkbox-background { align-items: center; display: inline-flex; justify-content: center; transition: background-color 90ms cubic-bezier(0, 0, 0.2, 0.1), opacity 90ms cubic-bezier(0, 0, 0.2, 0.1); will-change: background-color, opacity; } .md-checkbox-checkmark { width: 100%; } .md-checkbox-checkmark-path { stroke-dashoffset: 22.91026; stroke-dasharray: 22.91026; stroke-width: 2.66667px; } .md-checkbox-mixedmark { height: 2px; opacity: 0; transform: scaleX(0) rotate(0deg); } .md-checkbox-align-end .md-checkbox-inner-container { order: 1; margin-left: 8px; margin-right: auto; } [dir='rtl'] .md-checkbox-align-end .md-checkbox-inner-container { margin-left: auto; margin-right: 8px; } .md-checkbox-checked .md-checkbox-checkmark { opacity: 1; } .md-checkbox-checked .md-checkbox-checkmark-path { stroke-dashoffset: 0; } .md-checkbox-checked .md-checkbox-mixedmark { transform: scaleX(1) rotate(-45deg); } .md-checkbox-indeterminate .md-checkbox-checkmark { opacity: 0; transform: rotate(45deg); } .md-checkbox-indeterminate .md-checkbox-checkmark-path { stroke-dashoffset: 0; } .md-checkbox-indeterminate .md-checkbox-mixedmark { opacity: 1; transform: scaleX(1) rotate(0deg); } .md-checkbox-unchecked .md-checkbox-background { background-color: transparent; } .md-checkbox-disabled { cursor: default; } .md-checkbox-anim-unchecked-checked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-in-background; } .md-checkbox-anim-unchecked-checked .md-checkbox-checkmark-path { animation: 180ms linear 0ms md-checkbox-unchecked-checked-checkmark-path; } .md-checkbox-anim-unchecked-indeterminate .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-in-background; } .md-checkbox-anim-unchecked-indeterminate .md-checkbox-mixedmark { animation: 90ms linear 0ms md-checkbox-unchecked-indeterminate-mixedmark; } .md-checkbox-anim-checked-unchecked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-out-background; } .md-checkbox-anim-checked-unchecked .md-checkbox-checkmark-path { animation: 90ms linear 0ms md-checkbox-checked-unchecked-checkmark-path; } .md-checkbox-anim-checked-indeterminate .md-checkbox-checkmark { animation: 90ms linear 0ms md-checkbox-checked-indeterminate-checkmark; } .md-checkbox-anim-checked-indeterminate .md-checkbox-mixedmark { animation: 90ms linear 0ms md-checkbox-checked-indeterminate-mixedmark; } .md-checkbox-anim-indeterminate-checked .md-checkbox-checkmark { animation: 500ms linear 0ms md-checkbox-indeterminate-checked-checkmark; } .md-checkbox-anim-indeterminate-checked .md-checkbox-mixedmark { animation: 500ms linear 0ms md-checkbox-indeterminate-checked-mixedmark; } .md-checkbox-anim-indeterminate-unchecked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-out-background; } .md-checkbox-anim-indeterminate-unchecked .md-checkbox-mixedmark { animation: 300ms linear 0ms md-checkbox-indeterminate-unchecked-mixedmark; } .md-checkbox-input { bottom: 0; left: 50%; } .md-ink-ripple { border-radius: 50%; opacity: 0; height: 48px; left: 50%; overflow: hidden; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: opacity ease 280ms, background-color ease 280ms; width: 48px; } .md-checkbox-focused .md-ink-ripple { opacity: 1; } .md-checkbox-disabled .md-ink-ripple { background-color: #000; } /*# sourceMappingURL=checkbox.css.map */ "],
+            template: "<label class=\"md-checkbox-layout\"> <div class=\"md-checkbox-inner-container\"> <input class=\"md-checkbox-input md-visually-hidden\" type=\"checkbox\" [id]=\"inputId\" [required]=\"required\" [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\" [tabIndex]=\"tabindex\" [indeterminate]=\"indeterminate\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (focus)=\"_onInputFocus()\" (blur)=\"_onInputBlur()\" (change)=\"_onInteractionEvent($event)\" (click)=\"_onInputClick($event)\"> <div md-ripple *ngIf=\"!_isRippleDisabled()\" class=\"md-checkbox-ripple\" [md-ripple-trigger]=\"getHostElement()\" [md-ripple-centered]=\"true\" [md-ripple-speed-factor]=\"0.3\" md-ripple-background-color=\"rgba(0, 0, 0, 0)\"></div> <div class=\"md-checkbox-frame\"></div> <div class=\"md-checkbox-background\"> <svg version=\"1.1\" class=\"md-checkbox-checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" xml:space=\"preserve\"> <path class=\"md-checkbox-checkmark-path\" fill=\"none\" stroke=\"white\" d=\"M4.1,12.7 9,17.6 20.3,6.3\"/> </svg> <!-- Element for rendering the indeterminate state checkbox. --> <div class=\"md-checkbox-mixedmark\"></div> </div> </div> <span class=\"md-checkbox-label\"> <ng-content></ng-content> </span> </label> ",
+            styles: ["@keyframes md-checkbox-fade-in-background { 0% { opacity: 0; } 50% { opacity: 1; } } @keyframes md-checkbox-fade-out-background { 0%, 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes md-checkbox-unchecked-checked-checkmark-path { 0%, 50% { stroke-dashoffset: 22.91026; } 50% { animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); } 100% { stroke-dashoffset: 0; } } @keyframes md-checkbox-unchecked-indeterminate-mixedmark { 0%, 68.2% { transform: scaleX(0); } 68.2% { animation-timing-function: cubic-bezier(0, 0, 0, 1); } 100% { transform: scaleX(1); } } @keyframes md-checkbox-checked-unchecked-checkmark-path { from { animation-timing-function: cubic-bezier(0.4, 0, 1, 1); stroke-dashoffset: 0; } to { stroke-dashoffset: -22.91026; } } @keyframes md-checkbox-checked-indeterminate-checkmark { from { animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); opacity: 1; transform: rotate(0deg); } to { opacity: 0; transform: rotate(45deg); } } @keyframes md-checkbox-indeterminate-checked-checkmark { from { animation-timing-function: cubic-bezier(0.14, 0, 0, 1); opacity: 0; transform: rotate(45deg); } to { opacity: 1; transform: rotate(360deg); } } @keyframes md-checkbox-checked-indeterminate-mixedmark { from { animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); opacity: 0; transform: rotate(-45deg); } to { opacity: 1; transform: rotate(0deg); } } @keyframes md-checkbox-indeterminate-checked-mixedmark { from { animation-timing-function: cubic-bezier(0.14, 0, 0, 1); opacity: 1; transform: rotate(0deg); } to { opacity: 0; transform: rotate(315deg); } } @keyframes md-checkbox-indeterminate-unchecked-mixedmark { 0% { animation-timing-function: linear; opacity: 1; transform: scaleX(1); } 32.8%, 100% { opacity: 0; transform: scaleX(0); } } .md-checkbox-frame, .md-checkbox-background, .md-checkbox-checkmark { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .md-checkbox-checkmark, .md-checkbox-mixedmark { width: calc(100% - 4px); } .md-checkbox-frame, .md-checkbox-background { border-radius: 2px; box-sizing: border-box; pointer-events: none; } md-checkbox { cursor: pointer; transition: background 400ms cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); } .md-checkbox-layout { cursor: inherit; align-items: baseline; vertical-align: middle; display: inline-flex; } .md-checkbox-inner-container { display: inline-block; height: 20px; line-height: 0; margin: auto; margin-right: 8px; order: 0; position: relative; vertical-align: middle; white-space: nowrap; width: 20px; flex-shrink: 0; } [dir='rtl'] .md-checkbox-inner-container { margin-left: 8px; margin-right: auto; } .md-checkbox-layout .md-checkbox-label { line-height: 24px; } .md-checkbox-frame { background-color: transparent; border: 2px solid; transition: border-color 90ms cubic-bezier(0, 0, 0.2, 0.1); will-change: border-color; } .md-checkbox-background { align-items: center; display: inline-flex; justify-content: center; transition: background-color 90ms cubic-bezier(0, 0, 0.2, 0.1), opacity 90ms cubic-bezier(0, 0, 0.2, 0.1); will-change: background-color, opacity; } .md-checkbox-checkmark { width: 100%; } .md-checkbox-checkmark-path { stroke-dashoffset: 22.91026; stroke-dasharray: 22.91026; stroke-width: 2.66667px; } .md-checkbox-mixedmark { height: 2px; opacity: 0; transform: scaleX(0) rotate(0deg); } .md-checkbox-align-end .md-checkbox-inner-container { order: 1; margin-left: 8px; margin-right: auto; } [dir='rtl'] .md-checkbox-align-end .md-checkbox-inner-container { margin-left: auto; margin-right: 8px; } .md-checkbox-checked .md-checkbox-checkmark { opacity: 1; } .md-checkbox-checked .md-checkbox-checkmark-path { stroke-dashoffset: 0; } .md-checkbox-checked .md-checkbox-mixedmark { transform: scaleX(1) rotate(-45deg); } .md-checkbox-indeterminate .md-checkbox-checkmark { opacity: 0; transform: rotate(45deg); } .md-checkbox-indeterminate .md-checkbox-checkmark-path { stroke-dashoffset: 0; } .md-checkbox-indeterminate .md-checkbox-mixedmark { opacity: 1; transform: scaleX(1) rotate(0deg); } .md-checkbox-unchecked .md-checkbox-background { background-color: transparent; } .md-checkbox-disabled { cursor: default; } .md-checkbox-anim-unchecked-checked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-in-background; } .md-checkbox-anim-unchecked-checked .md-checkbox-checkmark-path { animation: 180ms linear 0ms md-checkbox-unchecked-checked-checkmark-path; } .md-checkbox-anim-unchecked-indeterminate .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-in-background; } .md-checkbox-anim-unchecked-indeterminate .md-checkbox-mixedmark { animation: 90ms linear 0ms md-checkbox-unchecked-indeterminate-mixedmark; } .md-checkbox-anim-checked-unchecked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-out-background; } .md-checkbox-anim-checked-unchecked .md-checkbox-checkmark-path { animation: 90ms linear 0ms md-checkbox-checked-unchecked-checkmark-path; } .md-checkbox-anim-checked-indeterminate .md-checkbox-checkmark { animation: 90ms linear 0ms md-checkbox-checked-indeterminate-checkmark; } .md-checkbox-anim-checked-indeterminate .md-checkbox-mixedmark { animation: 90ms linear 0ms md-checkbox-checked-indeterminate-mixedmark; } .md-checkbox-anim-indeterminate-checked .md-checkbox-checkmark { animation: 500ms linear 0ms md-checkbox-indeterminate-checked-checkmark; } .md-checkbox-anim-indeterminate-checked .md-checkbox-mixedmark { animation: 500ms linear 0ms md-checkbox-indeterminate-checked-mixedmark; } .md-checkbox-anim-indeterminate-unchecked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-out-background; } .md-checkbox-anim-indeterminate-unchecked .md-checkbox-mixedmark { animation: 300ms linear 0ms md-checkbox-indeterminate-unchecked-mixedmark; } .md-checkbox-input { bottom: 0; left: 50%; } .md-checkbox-ripple { position: absolute; left: -15px; top: -15px; right: -15px; bottom: -15px; border-radius: 50%; z-index: 1; pointer-events: none; } /*# sourceMappingURL=checkbox.css.map */ "],
             host: {
@@ -345,2 +398,3 @@ '[class.md-checkbox-indeterminate]': 'indeterminate',
         NgModule({
+            imports: [CommonModule, MdRippleModule],
             exports: [MdCheckbox],
@@ -347,0 +401,0 @@ declarations: [MdCheckbox],

checkbox/checkbox.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MD_CHECKBOX_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MdCheckbox"},"multi":true},"TransitionCheckState":{"Init":0,"Checked":1,"Unchecked":2,"Indeterminate":3},"MdCheckbox":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-checkbox","templateUrl":"checkbox.html","styleUrls":["checkbox.css"],"host":{"[class.md-checkbox-indeterminate]":"indeterminate","[class.md-checkbox-checked]":"checked","[class.md-checkbox-disabled]":"disabled","[class.md-checkbox-align-end]":"align == \"end\"","[class.md-checkbox-focused]":"hasFocus"},"providers":[{"__symbolic":"reference","name":"MD_CHECKBOX_CONTROL_VALUE_ACCESSOR"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["aria-label"]}]}],"ariaLabelledby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["aria-labelledby"]}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../core","name":"BooleanFieldValue"}}]}],"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"indeterminate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"_transitionCheckState":[{"__symbolic":"method"}],"_emitChangeEvent":[{"__symbolic":"method"}],"_onInputFocus":[{"__symbolic":"method"}],"_onInputBlur":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"_onInteractionEvent":[{"__symbolic":"method"}],"_onInputClick":[{"__symbolic":"method"}],"_getAnimationClassForCheckStateTransition":[{"__symbolic":"method"}]}},"MdCheckboxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"exports":[{"__symbolic":"reference","name":"MdCheckbox"}],"declarations":[{"__symbolic":"reference","name":"MdCheckbox"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdCheckboxModule"},"providers":[]}}}}}}
+{"__symbolic":"module","version":1,"metadata":{"MD_CHECKBOX_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MdCheckbox"},"multi":true},"TransitionCheckState":{"Init":0,"Checked":1,"Unchecked":2,"Indeterminate":3},"MdCheckbox":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-checkbox","templateUrl":"checkbox.html","styleUrls":["checkbox.css"],"host":{"[class.md-checkbox-indeterminate]":"indeterminate","[class.md-checkbox-checked]":"checked","[class.md-checkbox-disabled]":"disabled","[class.md-checkbox-align-end]":"align == \"end\"","[class.md-checkbox-focused]":"hasFocus"},"providers":[{"__symbolic":"reference","name":"MD_CHECKBOX_CONTROL_VALUE_ACCESSOR"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["aria-label"]}]}],"ariaLabelledby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["aria-labelledby"]}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableRipple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"indeterminate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_updateColor":[{"__symbolic":"method"}],"_setElementColor":[{"__symbolic":"method"}],"_isRippleDisabled":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"_transitionCheckState":[{"__symbolic":"method"}],"_emitChangeEvent":[{"__symbolic":"method"}],"_onInputFocus":[{"__symbolic":"method"}],"_onInputBlur":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"_onInteractionEvent":[{"__symbolic":"method"}],"_onInputClick":[{"__symbolic":"method"}],"_getAnimationClassForCheckStateTransition":[{"__symbolic":"method"}],"getHostElement":[{"__symbolic":"method"}]}},"MdCheckboxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"../core","name":"MdRippleModule"}],"exports":[{"__symbolic":"reference","name":"MdCheckbox"}],"declarations":[{"__symbolic":"reference","name":"MdCheckbox"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdCheckboxModule"},"providers":[]}}}}}}

checkbox/README.md

@@ -80,1 +80,15 @@ # md-checkbox
 ```
+
+### Theming
+
+The color of a `md-checkbox` can be changed by using the `color` attribute.
+The value `accent` is default and will correspond to your theme accent color.
+Alternatively, you can specify `primary` or `warn`.
+
+Example:
+
+ ```html
+<md-checkbox [checked]="true" color="primary">
+  I come after my label.
+</md-checkbox>
+ ```

core/a11y/index.d.ts

 import { ModuleWithProviders } from '@angular/core';
-export { FocusTrap } from './focus-trap';
-export { MdLiveAnnouncer } from './live-announcer';
-export { InteractivityChecker } from './interactivity-checker';
+import { MdLiveAnnouncer } from './live-announcer';
+import { InteractivityChecker } from './interactivity-checker';
+export declare const A11Y_PROVIDERS: (typeof InteractivityChecker | typeof MdLiveAnnouncer)[];
 export declare class A11yModule {
     static forRoot(): ModuleWithProviders;
 }

core/a11y/index.js

@@ -14,5 +14,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { InteractivityChecker } from './interactivity-checker';
-export { FocusTrap } from './focus-trap';
-export { MdLiveAnnouncer } from './live-announcer';
-export { InteractivityChecker } from './interactivity-checker';
+export var A11Y_PROVIDERS = [MdLiveAnnouncer, InteractivityChecker];
 export var A11yModule = (function () {
@@ -24,3 +22,3 @@ function A11yModule() {
             ngModule: A11yModule,
-            providers: [MdLiveAnnouncer, InteractivityChecker],
+            providers: A11Y_PROVIDERS,
         };
@@ -27,0 +25,0 @@ };

core/a11y/index.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"A11yModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./focus-trap","name":"FocusTrap"}],"exports":[{"__symbolic":"reference","module":"./focus-trap","name":"FocusTrap"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"A11yModule"},"providers":[{"__symbolic":"reference","module":"./live-announcer","name":"MdLiveAnnouncer"},{"__symbolic":"reference","module":"./interactivity-checker","name":"InteractivityChecker"}]}}}}},"exports":[{"from":"./focus-trap","export":["FocusTrap"]},{"from":"./live-announcer","export":["MdLiveAnnouncer"]},{"from":"./interactivity-checker","export":["InteractivityChecker"]}]}
+{"__symbolic":"module","version":1,"metadata":{"A11Y_PROVIDERS":[{"__symbolic":"reference","module":"./live-announcer","name":"MdLiveAnnouncer"},{"__symbolic":"reference","module":"./interactivity-checker","name":"InteractivityChecker"}],"A11yModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./focus-trap","name":"FocusTrap"}],"exports":[{"__symbolic":"reference","module":"./focus-trap","name":"FocusTrap"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"A11yModule"},"providers":{"__symbolic":"reference","name":"A11Y_PROVIDERS"}}}}}}}

core/a11y/interactivity-checker.js

@@ -0,1 +1,11 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Injectable } from '@angular/core';
 /**
@@ -55,2 +65,6 @@ * Utility for checking the interactivity of an element, such as whether is is focusable or
     };
+    InteractivityChecker = __decorate([
+        Injectable(), 
+        __metadata('design:paramtypes', [])
+    ], InteractivityChecker);
     return InteractivityChecker;
@@ -57,0 +71,0 @@ }());

core/a11y/live-announcer.d.ts

@@ -12,3 +12,5 @@ import { OpaqueToken } from '@angular/core';
     announce(message: string, politeness?: AriaLivePoliteness): void;
+    /** Removes the aria-live element from the DOM. */
+    _removeLiveElement(): void;
     private _createLiveElement();
 }

core/a11y/live-announcer.js

@@ -39,2 +39,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     };
+    /** Removes the aria-live element from the DOM. */
+    MdLiveAnnouncer.prototype._removeLiveElement = function () {
+        if (this._liveElement && this._liveElement.parentNode) {
+            this._liveElement.parentNode.removeChild(this._liveElement);
+        }
+    };
     MdLiveAnnouncer.prototype._createLiveElement = function () {
@@ -41,0 +47,0 @@ var liveEl = document.createElement('div');

core/a11y/live-announcer.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"LIVE_ANNOUNCER_ELEMENT_TOKEN":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"OpaqueToken"},"arguments":["mdLiveAnnouncerElement"]},"MdLiveAnnouncer":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","name":"LIVE_ANNOUNCER_ELEMENT_TOKEN"}]}]],"parameters":[{"__symbolic":"reference","name":"any"}]}],"announce":[{"__symbolic":"method"}],"_createLiveElement":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"LIVE_ANNOUNCER_ELEMENT_TOKEN":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"OpaqueToken"},"arguments":["mdLiveAnnouncerElement"]},"MdLiveAnnouncer":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","name":"LIVE_ANNOUNCER_ELEMENT_TOKEN"}]}]],"parameters":[{"__symbolic":"reference","name":"any"}]}],"announce":[{"__symbolic":"method"}],"_removeLiveElement":[{"__symbolic":"method"}],"_createLiveElement":[{"__symbolic":"method"}]}}}}

core/core.d.ts

@@ -18,2 +18,4 @@ import { ModuleWithProviders } from '@angular/core';
 export { InteractivityChecker } from './a11y/interactivity-checker';
+export { isFakeMousedownFromScreenReader } from './a11y/fake-mousedown';
+export { A11yModule } from './a11y/index';
 export { MdUniqueSelectionDispatcher, MdUniqueSelectionDispatcherListener } from './coordination/unique-selection-dispatcher';
@@ -23,7 +25,10 @@ export { MdLineModule, MdLine, MdLineSetter } from './line/line';
 export { MdError } from './errors/error';
-export { BooleanFieldValue } from './annotations/field-value';
 export { ComponentType } from './overlay/generic-component-type';
 export * from './keyboard/keycodes';
+export * from './compatibility/style-compatibility';
+export * from './animation/animation';
+export { coerceBooleanProperty } from './coersion/boolean-property';
+export { coerceNumberProperty } from './coersion/number-property';
 export declare class MdCoreModule {
     static forRoot(): ModuleWithProviders;
 }

core/core.js

@@ -16,3 +16,4 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { OverlayModule } from './overlay/overlay-directives';
-import { A11yModule } from './a11y/index';
+import { A11yModule, A11Y_PROVIDERS } from './a11y/index';
+import { OVERLAY_PROVIDERS } from './overlay/overlay';
 // RTL
@@ -40,2 +41,4 @@ export { Dir, RtlModule } from './rtl/dir';
 export { InteractivityChecker } from './a11y/interactivity-checker';
+export { isFakeMousedownFromScreenReader } from './a11y/fake-mousedown';
+export { A11yModule } from './a11y/index';
 export { MdUniqueSelectionDispatcher } from './coordination/unique-selection-dispatcher';
@@ -47,7 +50,11 @@ export { MdLineModule, MdLine, MdLineSetter } from './line/line';
 export { MdError } from './errors/error';
-// Annotations.
-export { BooleanFieldValue } from './annotations/field-value';
 // Misc
 // Keybindings
 export * from './keyboard/keycodes';
+export * from './compatibility/style-compatibility';
+// Animation
+export * from './animation/animation';
+// Coersion
+export { coerceBooleanProperty } from './coersion/boolean-property';
+export { coerceNumberProperty } from './coersion/number-property';
 export var MdCoreModule = (function () {
@@ -59,3 +66,3 @@ function MdCoreModule() {
             ngModule: MdCoreModule,
-            providers: [A11yModule.forRoot().providers],
+            providers: [A11Y_PROVIDERS, OVERLAY_PROVIDERS],
         };
@@ -62,0 +69,0 @@ };

core/core.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MdCoreModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"./line/line","name":"MdLineModule"},{"__symbolic":"reference","module":"./rtl/dir","name":"RtlModule"},{"__symbolic":"reference","module":"./ripple/ripple","name":"MdRippleModule"},{"__symbolic":"reference","module":"./portal/portal-directives","name":"PortalModule"},{"__symbolic":"reference","module":"./overlay/overlay-directives","name":"OverlayModule"},{"__symbolic":"reference","module":"./a11y/index","name":"A11yModule"}],"exports":[{"__symbolic":"reference","module":"./line/line","name":"MdLineModule"},{"__symbolic":"reference","module":"./rtl/dir","name":"RtlModule"},{"__symbolic":"reference","module":"./ripple/ripple","name":"MdRippleModule"},{"__symbolic":"reference","module":"./portal/portal-directives","name":"PortalModule"},{"__symbolic":"reference","module":"./overlay/overlay-directives","name":"OverlayModule"},{"__symbolic":"reference","module":"./a11y/index","name":"A11yModule"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdCoreModule"},"providers":[{"__symbolic":"select","expression":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./a11y/index","name":"A11yModule"},"member":"forRoot"}},"member":"providers"}]}}}}},"exports":[{"from":"./rtl/dir","export":["Dir","LayoutDirection","RtlModule"]},{"from":"./portal/portal","export":["Portal","PortalHost","BasePortalHost","ComponentPortal","TemplatePortal"]},{"from":"./portal/portal-directives","export":["PortalHostDirective","TemplatePortalDirective","PortalModule"]},{"from":"./portal/dom-portal-host","export":["DomPortalHost"]},{"from":"./overlay/overlay","export":["Overlay","OVERLAY_PROVIDERS"]},{"from":"./overlay/overlay-container","export":["OverlayContainer"]},{"from":"./overlay/overlay-ref","export":["OverlayRef"]},{"from":"./overlay/overlay-state","export":["OverlayState"]},{"from":"./overlay/overlay-directives","export":["ConnectedOverlayDirective","OverlayOrigin","OverlayModule"]},{"from":"./overlay/position/connected-position-strategy"},{"from":"./overlay/position/connected-position"},{"from":"./gestures/MdGestureConfig","export":["MdGestureConfig"]},{"from":"./ripple/ripple","export":["MdRipple","MdRippleModule"]},{"from":"./a11y/live-announcer","export":["AriaLivePoliteness","MdLiveAnnouncer","LIVE_ANNOUNCER_ELEMENT_TOKEN"]},{"from":"./a11y/focus-trap","export":["FocusTrap"]},{"from":"./a11y/interactivity-checker","export":["InteractivityChecker"]},{"from":"./coordination/unique-selection-dispatcher","export":["MdUniqueSelectionDispatcher","MdUniqueSelectionDispatcherListener"]},{"from":"./line/line","export":["MdLineModule","MdLine","MdLineSetter"]},{"from":"./style/apply-transform","export":["applyCssTransform"]},{"from":"./errors/error","export":["MdError"]},{"from":"./annotations/field-value","export":["BooleanFieldValue"]},{"from":"./overlay/generic-component-type","export":["ComponentType"]},{"from":"./keyboard/keycodes"}]}
+{"__symbolic":"module","version":1,"metadata":{"MdCoreModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"./line/line","name":"MdLineModule"},{"__symbolic":"reference","module":"./rtl/dir","name":"RtlModule"},{"__symbolic":"reference","module":"./ripple/ripple","name":"MdRippleModule"},{"__symbolic":"reference","module":"./portal/portal-directives","name":"PortalModule"},{"__symbolic":"reference","module":"./overlay/overlay-directives","name":"OverlayModule"},{"__symbolic":"reference","module":"./a11y/index","name":"A11yModule"}],"exports":[{"__symbolic":"reference","module":"./line/line","name":"MdLineModule"},{"__symbolic":"reference","module":"./rtl/dir","name":"RtlModule"},{"__symbolic":"reference","module":"./ripple/ripple","name":"MdRippleModule"},{"__symbolic":"reference","module":"./portal/portal-directives","name":"PortalModule"},{"__symbolic":"reference","module":"./overlay/overlay-directives","name":"OverlayModule"},{"__symbolic":"reference","module":"./a11y/index","name":"A11yModule"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdCoreModule"},"providers":[{"__symbolic":"reference","module":"./a11y/index","name":"A11Y_PROVIDERS"},{"__symbolic":"reference","module":"./overlay/overlay","name":"OVERLAY_PROVIDERS"}]}}}}},"exports":[{"from":"./rtl/dir","export":["Dir","LayoutDirection","RtlModule"]},{"from":"./portal/portal","export":["Portal","PortalHost","BasePortalHost","ComponentPortal","TemplatePortal"]},{"from":"./portal/portal-directives","export":["PortalHostDirective","TemplatePortalDirective","PortalModule"]},{"from":"./portal/dom-portal-host","export":["DomPortalHost"]},{"from":"./overlay/overlay","export":["Overlay","OVERLAY_PROVIDERS"]},{"from":"./overlay/overlay-container","export":["OverlayContainer"]},{"from":"./overlay/overlay-ref","export":["OverlayRef"]},{"from":"./overlay/overlay-state","export":["OverlayState"]},{"from":"./overlay/overlay-directives","export":["ConnectedOverlayDirective","OverlayOrigin","OverlayModule"]},{"from":"./overlay/position/connected-position-strategy"},{"from":"./overlay/position/connected-position"},{"from":"./gestures/MdGestureConfig","export":["MdGestureConfig"]},{"from":"./ripple/ripple","export":["MdRipple","MdRippleModule"]},{"from":"./a11y/live-announcer","export":["AriaLivePoliteness","MdLiveAnnouncer","LIVE_ANNOUNCER_ELEMENT_TOKEN"]},{"from":"./a11y/focus-trap","export":["FocusTrap"]},{"from":"./a11y/interactivity-checker","export":["InteractivityChecker"]},{"from":"./a11y/fake-mousedown","export":["isFakeMousedownFromScreenReader"]},{"from":"./a11y/index","export":["A11yModule"]},{"from":"./coordination/unique-selection-dispatcher","export":["MdUniqueSelectionDispatcher","MdUniqueSelectionDispatcherListener"]},{"from":"./line/line","export":["MdLineModule","MdLine","MdLineSetter"]},{"from":"./style/apply-transform","export":["applyCssTransform"]},{"from":"./errors/error","export":["MdError"]},{"from":"./overlay/generic-component-type","export":["ComponentType"]},{"from":"./keyboard/keycodes"},{"from":"./compatibility/style-compatibility"},{"from":"./animation/animation"},{"from":"./coersion/boolean-property","export":["coerceBooleanProperty"]},{"from":"./coersion/number-property","export":["coerceNumberProperty"]}]}

core/gestures/MdGestureConfig.js

@@ -24,7 +24,2 @@ var __extends = (this && this.__extends) || function (d, b) {
         this.events = [
-            'drag',
-            'dragstart',
-            'dragend',
-            'dragright',
-            'dragleft',
             'longpress',
@@ -59,3 +54,2 @@ 'slide',
         var slide = this._createRecognizer(pan, { event: 'slide', threshold: 0 }, swipe);
-        var drag = this._createRecognizer(slide, { event: 'drag', threshold: 6 }, swipe);
         var longpress = this._createRecognizer(press, { event: 'longpress', time: 500 });
@@ -65,3 +59,3 @@ // Overwrite the default `pan` event to use the swipe event.
         // Add customized gestures to Hammer manager
-        mc.add([swipe, press, pan, drag, slide, longpress]);
+        mc.add([swipe, press, pan, slide, longpress]);
         return mc;
@@ -68,0 +62,0 @@ };

core/keyboard/keycodes.d.ts

@@ -6,2 +6,3 @@ export declare const UP_ARROW: number;
 export declare const ENTER: number;
+export declare const SPACE: number;
 export declare const TAB: number;

core/keyboard/keycodes.js

@@ -10,4 +10,5 @@ // Due to a bug in the ChromeDriver, Angular 2 keyboard events are not triggered by `sendKeys`
 export var ENTER = 13;
+export var SPACE = 32;
 export var TAB = 9;
 
 //# sourceMappingURL=keycodes.js.map

core/keyboard/keycodes.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"UP_ARROW":38,"DOWN_ARROW":40,"RIGHT_ARROW":39,"LEFT_ARROW":37,"ENTER":13,"TAB":9}}
+{"__symbolic":"module","version":1,"metadata":{"UP_ARROW":38,"DOWN_ARROW":40,"RIGHT_ARROW":39,"LEFT_ARROW":37,"ENTER":13,"SPACE":32,"TAB":9}}

core/line/line.js

@@ -42,2 +42,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         }
+        else if (count > 3) {
+            this._setClass("md-multi-line", true);
+        }
     };
@@ -47,2 +50,3 @@ MdLineSetter.prototype._resetClasses = function () {
         this._setClass('md-3-line', false);
+        this._setClass('md-multi-line', false);
     };
@@ -49,0 +53,0 @@ MdLineSetter.prototype._setClass = function (className, bool) {

core/overlay/overlay-directives.d.ts

@@ -1,5 +0,6 @@
-import { ModuleWithProviders, TemplateRef, ViewContainerRef, OnInit, OnDestroy, ElementRef } from '@angular/core';
+import { ModuleWithProviders, EventEmitter, TemplateRef, ViewContainerRef, OnDestroy, ElementRef } from '@angular/core';
 import { Overlay } from './overlay';
 import { OverlayRef } from './overlay-ref';
 import { ConnectionPositionPair } from './position/connected-position';
+import { Dir, LayoutDirection } from '../rtl/dir';
 /**
@@ -17,16 +18,42 @@ * Directive applied to an element to make it usable as an origin for an Overlay using a
  */
-export declare class ConnectedOverlayDirective implements OnInit, OnDestroy {
+export declare class ConnectedOverlayDirective implements OnDestroy {
     private _overlay;
+    private _dir;
     private _overlayRef;
     private _templatePortal;
+    private _open;
+    private _hasBackdrop;
+    private _backdropSubscription;
     origin: OverlayOrigin;
     positions: ConnectionPositionPair[];
-    constructor(_overlay: Overlay, templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef);
+    /** The offset in pixels for the overlay connection point on the x-axis */
+    offsetX: number;
+    /** The offset in pixels for the overlay connection point on the y-axis */
+    offsetY: number;
+    /** The width of the overlay panel. */
+    width: number | string;
+    /** The height of the overlay panel. */
+    height: number | string;
+    /** The custom class to be set on the backdrop element. */
+    backdropClass: string;
+    /** Whether or not the overlay should attach a backdrop. */
+    hasBackdrop: any;
+    open: boolean;
+    /** Event emitted when the backdrop is clicked. */
+    backdropClick: EventEmitter<void>;
+    constructor(_overlay: Overlay, templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef, _dir: Dir);
     readonly overlayRef: OverlayRef;
+    readonly dir: LayoutDirection;
     /** TODO: internal */
-    ngOnInit(): void;
-    /** TODO: internal */
     ngOnDestroy(): void;
-    /** Creates an overlay and attaches this directive's template to it. */
+    /** Creates an overlay */
     private _createOverlay();
+    /** Builds the overlay config based on the directive's inputs */
+    private _buildConfig();
+    /** Returns the position strategy of the overlay to be set on the overlay config */
+    private _createPositionStrategy();
+    /** Attaches the overlay and subscribes to backdrop clicks if backdrop exists */
+    private _attachOverlay();
+    /** Detaches the overlay and unsubscribes to backdrop clicks if backdrop exists */
+    private _detachOverlay();
     /** Destroys the overlay created by this directive. */
@@ -33,0 +60,0 @@ private _destroyOverlay();

core/overlay/overlay-directives.js

@@ -10,3 +10,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { NgModule, Directive, TemplateRef, ViewContainerRef, Input, ElementRef } from '@angular/core';
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+import { NgModule, Directive, EventEmitter, TemplateRef, ViewContainerRef, Optional, Input, Output, ElementRef } from '@angular/core';
 import { Overlay, OVERLAY_PROVIDERS } from './overlay';
@@ -17,2 +20,3 @@ import { TemplatePortal } from '../portal/portal';
 import { PortalModule } from '../portal/portal-directives';
+import { Dir } from '../rtl/dir';
 /** Default set of positions for the overlay. Follows the behavior of a dropdown. */
@@ -52,6 +56,38 @@ var defaultPositionList = [
     // TODO(jelbourn): inputs for size, scroll behavior, animation, etc.
-    function ConnectedOverlayDirective(_overlay, templateRef, viewContainerRef) {
+    function ConnectedOverlayDirective(_overlay, templateRef, viewContainerRef, _dir) {
         this._overlay = _overlay;
+        this._dir = _dir;
+        this._open = false;
+        this._hasBackdrop = false;
+        /** The offset in pixels for the overlay connection point on the x-axis */
+        this.offsetX = 0;
+        /** The offset in pixels for the overlay connection point on the y-axis */
+        this.offsetY = 0;
+        /** Event emitted when the backdrop is clicked. */
+        this.backdropClick = new EventEmitter();
         this._templatePortal = new TemplatePortal(templateRef, viewContainerRef);
     }
+    Object.defineProperty(ConnectedOverlayDirective.prototype, "hasBackdrop", {
+        /** Whether or not the overlay should attach a backdrop. */
+        get: function () {
+            return this._hasBackdrop;
+        },
+        // TODO: move the boolean coercion logic to a shared function in core
+        set: function (value) {
+            this._hasBackdrop = value != null && "" + value !== 'false';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ConnectedOverlayDirective.prototype, "open", {
+        get: function () {
+            return this._open;
+        },
+        set: function (value) {
+            value ? this._attachOverlay() : this._detachOverlay();
+            this._open = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ConnectedOverlayDirective.prototype, "overlayRef", {
@@ -64,11 +100,14 @@ get: function () {
     });
+    Object.defineProperty(ConnectedOverlayDirective.prototype, "dir", {
+        get: function () {
+            return this._dir ? this._dir.value : 'ltr';
+        },
+        enumerable: true,
+        configurable: true
+    });
     /** TODO: internal */
-    ConnectedOverlayDirective.prototype.ngOnInit = function () {
-        this._createOverlay();
-    };
-    /** TODO: internal */
     ConnectedOverlayDirective.prototype.ngOnDestroy = function () {
         this._destroyOverlay();
     };
-    /** Creates an overlay and attaches this directive's template to it. */
+    /** Creates an overlay */
     ConnectedOverlayDirective.prototype._createOverlay = function () {
@@ -78,11 +117,65 @@ if (!this.positions || !this.positions.length) {
         }
+        this._overlayRef = this._overlay.create(this._buildConfig());
+    };
+    /** Builds the overlay config based on the directive's inputs */
+    ConnectedOverlayDirective.prototype._buildConfig = function () {
         var overlayConfig = new OverlayState();
-        overlayConfig.positionStrategy =
-            this._overlay.position().connectedTo(this.origin.elementRef, { originX: this.positions[0].overlayX, originY: this.positions[0].originY }, { overlayX: this.positions[0].overlayX, overlayY: this.positions[0].overlayY });
-        this._overlayRef = this._overlay.create(overlayConfig);
-        this._overlayRef.attach(this._templatePortal);
+        if (this.width || this.width === 0) {
+            overlayConfig.width = this.width;
+        }
+        if (this.height || this.height === 0) {
+            overlayConfig.height = this.height;
+        }
+        overlayConfig.hasBackdrop = this.hasBackdrop;
+        if (this.backdropClass) {
+            overlayConfig.backdropClass = this.backdropClass;
+        }
+        overlayConfig.positionStrategy = this._createPositionStrategy();
+        overlayConfig.direction = this.dir;
+        return overlayConfig;
     };
+    /** Returns the position strategy of the overlay to be set on the overlay config */
+    ConnectedOverlayDirective.prototype._createPositionStrategy = function () {
+        var pos = this.positions[0];
+        var originPoint = { originX: pos.originX, originY: pos.originY };
+        var overlayPoint = { overlayX: pos.overlayX, overlayY: pos.overlayY };
+        return this._overlay.position()
+            .connectedTo(this.origin.elementRef, originPoint, overlayPoint)
+            .withDirection(this.dir)
+            .withOffsetX(this.offsetX)
+            .withOffsetY(this.offsetY);
+    };
+    /** Attaches the overlay and subscribes to backdrop clicks if backdrop exists */
+    ConnectedOverlayDirective.prototype._attachOverlay = function () {
+        var _this = this;
+        if (!this._overlayRef) {
+            this._createOverlay();
+        }
+        if (!this._overlayRef.hasAttached()) {
+            this._overlayRef.attach(this._templatePortal);
+        }
+        if (this.hasBackdrop) {
+            this._backdropSubscription = this._overlayRef.backdropClick().subscribe(function () {
+                _this.backdropClick.emit();
+            });
+        }
+    };
+    /** Detaches the overlay and unsubscribes to backdrop clicks if backdrop exists */
+    ConnectedOverlayDirective.prototype._detachOverlay = function () {
+        if (this._overlayRef) {
+            this._overlayRef.detach();
+        }
+        if (this._backdropSubscription) {
+            this._backdropSubscription.unsubscribe();
+            this._backdropSubscription = null;
+        }
+    };
     /** Destroys the overlay created by this directive. */
     ConnectedOverlayDirective.prototype._destroyOverlay = function () {
-        this._overlayRef.dispose();
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+        }
+        if (this._backdropSubscription) {
+            this._backdropSubscription.unsubscribe();
+        }
     };
@@ -97,7 +190,41 @@ __decorate([
     ], ConnectedOverlayDirective.prototype, "positions", void 0);
+    __decorate([
+        Input(), 
+        __metadata('design:type', Number)
+    ], ConnectedOverlayDirective.prototype, "offsetX", void 0);
+    __decorate([
+        Input(), 
+        __metadata('design:type', Number)
+    ], ConnectedOverlayDirective.prototype, "offsetY", void 0);
+    __decorate([
+        Input(), 
+        __metadata('design:type', Object)
+    ], ConnectedOverlayDirective.prototype, "width", void 0);
+    __decorate([
+        Input(), 
+        __metadata('design:type', Object)
+    ], ConnectedOverlayDirective.prototype, "height", void 0);
+    __decorate([
+        Input(), 
+        __metadata('design:type', String)
+    ], ConnectedOverlayDirective.prototype, "backdropClass", void 0);
+    __decorate([
+        Input(), 
+        __metadata('design:type', Object)
+    ], ConnectedOverlayDirective.prototype, "hasBackdrop", null);
+    __decorate([
+        Input(), 
+        __metadata('design:type', Object)
+    ], ConnectedOverlayDirective.prototype, "open", null);
+    __decorate([
+        Output(), 
+        __metadata('design:type', Object)
+    ], ConnectedOverlayDirective.prototype, "backdropClick", void 0);
     ConnectedOverlayDirective = __decorate([
         Directive({
-            selector: '[connected-overlay]'
-        }), 
-        __metadata('design:paramtypes', [Overlay, TemplateRef, ViewContainerRef])
+            selector: '[connected-overlay]',
+            exportAs: 'connectedOverlay'
+        }),
+        __param(3, Optional()), 
+        __metadata('design:paramtypes', [Overlay, TemplateRef, ViewContainerRef, Dir])
     ], ConnectedOverlayDirective);
@@ -104,0 +231,0 @@ return ConnectedOverlayDirective;

core/overlay/overlay-directives.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"OverlayOrigin":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[overlay-origin]","exportAs":"overlayOrigin"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}]}},"ConnectedOverlayDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[connected-overlay]"}]}],"members":{"origin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"positions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./overlay","name":"Overlay"},{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_createOverlay":[{"__symbolic":"method"}],"_destroyOverlay":[{"__symbolic":"method"}]}},"OverlayModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"../portal/portal-directives","name":"PortalModule"}],"exports":[{"__symbolic":"reference","name":"ConnectedOverlayDirective"},{"__symbolic":"reference","name":"OverlayOrigin"}],"declarations":[{"__symbolic":"reference","name":"ConnectedOverlayDirective"},{"__symbolic":"reference","name":"OverlayOrigin"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"OverlayModule"},"providers":{"__symbolic":"reference","module":"./overlay","name":"OVERLAY_PROVIDERS"}}}}}}}
+{"__symbolic":"module","version":1,"metadata":{"OverlayOrigin":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[overlay-origin]","exportAs":"overlayOrigin"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}]}},"ConnectedOverlayDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[connected-overlay]","exportAs":"connectedOverlay"}]}],"members":{"origin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"positions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"offsetX":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"offsetY":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"backdropClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hasBackdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"backdropClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}]],"parameters":[{"__symbolic":"reference","module":"./overlay","name":"Overlay"},{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"},{"__symbolic":"reference","module":"../rtl/dir","name":"Dir"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"_createOverlay":[{"__symbolic":"method"}],"_buildConfig":[{"__symbolic":"method"}],"_createPositionStrategy":[{"__symbolic":"method"}],"_attachOverlay":[{"__symbolic":"method"}],"_detachOverlay":[{"__symbolic":"method"}],"_destroyOverlay":[{"__symbolic":"method"}]}},"OverlayModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"../portal/portal-directives","name":"PortalModule"}],"exports":[{"__symbolic":"reference","name":"ConnectedOverlayDirective"},{"__symbolic":"reference","name":"OverlayOrigin"}],"declarations":[{"__symbolic":"reference","name":"ConnectedOverlayDirective"},{"__symbolic":"reference","name":"OverlayOrigin"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"OverlayModule"},"providers":{"__symbolic":"reference","module":"./overlay","name":"OVERLAY_PROVIDERS"}}}}}}}

core/overlay/overlay-ref.d.ts

@@ -24,2 +24,6 @@ import { PortalHost, Portal } from '../portal/portal';
     updatePosition(): void;
+    /** Updates the text direction of the overlay panel. **/
+    private updateDirection();
+    /** Updates the size of the overlay based on the overlay config. */
+    updateSize(): void;
     /** Attaches a backdrop for this overlay. */
@@ -26,0 +30,0 @@ private _attachBackdrop();

core/overlay/overlay-ref.js

@@ -19,2 +19,4 @@ import { Subject } from 'rxjs/Subject';
         var attachResult = this._portalHost.attach(portal);
+        this.updateSize();
+        this.updateDirection();
         this.updatePosition();
@@ -47,2 +49,15 @@ return attachResult;
     };
+    /** Updates the text direction of the overlay panel. **/
+    OverlayRef.prototype.updateDirection = function () {
+        this._pane.setAttribute('dir', this._state.direction);
+    };
+    /** Updates the size of the overlay based on the overlay config. */
+    OverlayRef.prototype.updateSize = function () {
+        if (this._state.width || this._state.width === 0) {
+            this._pane.style.width = formatCssUnit(this._state.width);
+        }
+        if (this._state.height || this._state.height === 0) {
+            this._pane.style.height = formatCssUnit(this._state.height);
+        }
+    };
     /** Attaches a backdrop for this overlay. */
@@ -53,2 +68,3 @@ OverlayRef.prototype._attachBackdrop = function () {
         this._backdropElement.classList.add('md-overlay-backdrop');
+        this._backdropElement.classList.add(this._state.backdropClass);
         this._pane.parentElement.appendChild(this._backdropElement);
@@ -71,2 +87,3 @@ // Forward backdrop clicks such that the consumer of the overlay can perform whatever
             backdropToDetach.classList.remove('md-overlay-backdrop-showing');
+            backdropToDetach.classList.remove(this._state.backdropClass);
             backdropToDetach.addEventListener('transitionend', function () {
@@ -85,3 +102,6 @@ backdropToDetach.parentNode.removeChild(backdropToDetach);
 }());
+function formatCssUnit(value) {
+    return typeof value === 'string' ? value : value + "px";
+}
 
 //# sourceMappingURL=overlay-ref.js.map

core/overlay/overlay-state.d.ts

 import { PositionStrategy } from './position/position-strategy';
+import { LayoutDirection } from '../rtl/dir';
 /**
@@ -11,2 +12,10 @@ * OverlayState is a bag of values for either the initial configuration or current state of an
     hasBackdrop: boolean;
+    /** Custom class to add to the backdrop **/
+    backdropClass: string;
+    /** The width of the overlay panel. If a number is provided, pixel units are assumed. **/
+    width: number | string;
+    /** The height of the overlay panel. If a number is provided, pixel units are assumed. **/
+    height: number | string;
+    /** The direction of the text in the overlay panel. */
+    direction: LayoutDirection;
 }

core/overlay/overlay-state.js

@@ -9,2 +9,6 @@ /**
         this.hasBackdrop = false;
+        /** Custom class to add to the backdrop **/
+        this.backdropClass = 'md-overlay-dark-backdrop';
+        /** The direction of the text in the overlay panel. */
+        this.direction = 'ltr';
     }
@@ -11,0 +15,0 @@ return OverlayState;

core/overlay/overlay.d.ts

@@ -1,2 +0,2 @@
-import { ComponentFactoryResolver } from '@angular/core';
+import { ComponentFactoryResolver, ApplicationRef, Injector } from '@angular/core';
 import { OverlayState } from './overlay-state';
@@ -19,3 +19,5 @@ import { OverlayRef } from './overlay-ref';
     private _positionBuilder;
-    constructor(_overlayContainer: OverlayContainer, _componentFactoryResolver: ComponentFactoryResolver, _positionBuilder: OverlayPositionBuilder);
+    private _appRef;
+    private _injector;
+    constructor(_overlayContainer: OverlayContainer, _componentFactoryResolver: ComponentFactoryResolver, _positionBuilder: OverlayPositionBuilder, _appRef: ApplicationRef, _injector: Injector);
     /**
@@ -22,0 +24,0 @@ * Creates an overlay.

core/overlay/overlay.js

@@ -10,3 +10,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { ComponentFactoryResolver, Injectable } from '@angular/core';
+import { ComponentFactoryResolver, Injectable, ApplicationRef, Injector } from '@angular/core';
 import { OverlayState } from './overlay-state';
@@ -31,6 +31,8 @@ import { DomPortalHost } from '../portal/dom-portal-host';
 export var Overlay = (function () {
-    function Overlay(_overlayContainer, _componentFactoryResolver, _positionBuilder) {
+    function Overlay(_overlayContainer, _componentFactoryResolver, _positionBuilder, _appRef, _injector) {
         this._overlayContainer = _overlayContainer;
         this._componentFactoryResolver = _componentFactoryResolver;
         this._positionBuilder = _positionBuilder;
+        this._appRef = _appRef;
+        this._injector = _injector;
     }
@@ -70,3 +72,3 @@ /**
     Overlay.prototype._createPortalHost = function (pane) {
-        return new DomPortalHost(pane, this._componentFactoryResolver);
+        return new DomPortalHost(pane, this._componentFactoryResolver, this._appRef, this._injector);
     };
@@ -84,3 +86,3 @@ /**
         Injectable(), 
-        __metadata('design:paramtypes', [OverlayContainer, ComponentFactoryResolver, OverlayPositionBuilder])
+        __metadata('design:paramtypes', [OverlayContainer, ComponentFactoryResolver, OverlayPositionBuilder, ApplicationRef, Injector])
     ], Overlay);
@@ -87,0 +89,0 @@ return Overlay;

core/overlay/overlay.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"Overlay":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./overlay-container","name":"OverlayContainer"},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"./position/overlay-position-builder","name":"OverlayPositionBuilder"}]}],"create":[{"__symbolic":"method"}],"position":[{"__symbolic":"method"}],"_createPaneElement":[{"__symbolic":"method"}],"_createPortalHost":[{"__symbolic":"method"}],"_createOverlayRef":[{"__symbolic":"method"}]}},"OVERLAY_PROVIDERS":[{"__symbolic":"reference","module":"./position/viewport-ruler","name":"ViewportRuler"},{"__symbolic":"reference","module":"./position/overlay-position-builder","name":"OverlayPositionBuilder"},{"__symbolic":"reference","name":"Overlay"},{"__symbolic":"reference","module":"./overlay-container","name":"OverlayContainer"}]}}
+{"__symbolic":"module","version":1,"metadata":{"Overlay":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./overlay-container","name":"OverlayContainer"},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"./position/overlay-position-builder","name":"OverlayPositionBuilder"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"}]}],"create":[{"__symbolic":"method"}],"position":[{"__symbolic":"method"}],"_createPaneElement":[{"__symbolic":"method"}],"_createPortalHost":[{"__symbolic":"method"}],"_createOverlayRef":[{"__symbolic":"method"}]}},"OVERLAY_PROVIDERS":[{"__symbolic":"reference","module":"./position/viewport-ruler","name":"ViewportRuler"},{"__symbolic":"reference","module":"./position/overlay-position-builder","name":"OverlayPositionBuilder"},{"__symbolic":"reference","name":"Overlay"},{"__symbolic":"reference","module":"./overlay-container","name":"OverlayContainer"}]}}

core/overlay/position/connected-position-strategy.d.ts

@@ -7,3 +7,3 @@ import { PositionStrategy } from './position-strategy';
  * A strategy for positioning overlays. Using this strategy, an overlay is given an
- * implict position relative some origin element. The relative position is defined in terms of
+ * implicit position relative some origin element. The relative position is defined in terms of
  * a point on the origin element that is connected to a point on the overlay element. For example,
@@ -18,4 +18,9 @@ * a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner
     private _viewportRuler;
+    private _dir;
+    /** The offset in pixels for the overlay connection point on the x-axis */
+    private _offsetX;
+    /** The offset in pixels for the overlay connection point on the y-axis */
+    private _offsetY;
     /** Whether the we're dealing with an RTL context */
-    _isRtl: boolean;
+    readonly _isRtl: boolean;
     /** Ordered list of preferred positions, from most to least desirable. */
@@ -34,2 +39,8 @@ _preferredPositions: ConnectionPositionPair[];
     withFallbackPosition(originPos: OriginConnectionPosition, overlayPos: OverlayConnectionPosition): this;
+    /** Sets the layout direction so the overlay's position can be adjusted to match. */
+    withDirection(dir: 'ltr' | 'rtl'): this;
+    /** Sets an offset for the overlay's connection point on the x-axis */
+    withOffsetX(offset: number): this;
+    /** Sets an offset for the overlay's connection point on the y-axis */
+    withOffsetY(offset: number): this;
     /**
@@ -36,0 +47,0 @@ * Gets the horizontal (x) "start" dimension based on whether the overlay is in an RTL context.

core/overlay/position/connected-position-strategy.js

@@ -5,3 +5,3 @@ import { applyCssTransform } from '../../style/apply-transform';
  * A strategy for positioning overlays. Using this strategy, an overlay is given an
- * implict position relative some origin element. The relative position is defined in terms of
+ * implicit position relative some origin element. The relative position is defined in terms of
  * a point on the origin element that is connected to a point on the overlay element. For example,
@@ -17,5 +17,7 @@ * a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner
         this._viewportRuler = _viewportRuler;
-        // TODO(jelbourn): set RTL to the actual value from the app.
-        /** Whether the we're dealing with an RTL context */
-        this._isRtl = false;
+        this._dir = 'ltr';
+        /** The offset in pixels for the overlay connection point on the x-axis */
+        this._offsetX = 0;
+        /** The offset in pixels for the overlay connection point on the y-axis */
+        this._offsetY = 0;
         /** Ordered list of preferred positions, from most to least desirable. */
@@ -26,2 +28,10 @@ this._preferredPositions = [];
     }
+    Object.defineProperty(ConnectedPositionStrategy.prototype, "_isRtl", {
+        /** Whether the we're dealing with an RTL context */
+        get: function () {
+            return this._dir === 'rtl';
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ConnectedPositionStrategy.prototype, "positions", {
@@ -71,2 +81,17 @@ get: function () {
     };
+    /** Sets the layout direction so the overlay's position can be adjusted to match. */
+    ConnectedPositionStrategy.prototype.withDirection = function (dir) {
+        this._dir = dir;
+        return this;
+    };
+    /** Sets an offset for the overlay's connection point on the x-axis */
+    ConnectedPositionStrategy.prototype.withOffsetX = function (offset) {
+        this._offsetX = offset;
+        return this;
+    };
+    /** Sets an offset for the overlay's connection point on the y-axis */
+    ConnectedPositionStrategy.prototype.withOffsetY = function (offset) {
+        this._offsetY = offset;
+        return this;
+    };
     /**
@@ -124,4 +149,7 @@ * Gets the horizontal (x) "start" dimension based on whether the overlay is in an RTL context.
         }
+        else if (pos.overlayX === 'start') {
+            overlayStartX = this._isRtl ? -overlayRect.width : 0;
+        }
         else {
-            overlayStartX = pos.overlayX == 'start' ? 0 : -overlayRect.width;
+            overlayStartX = this._isRtl ? 0 : -overlayRect.width;
         }
@@ -136,4 +164,4 @@ var overlayStartY;
         return {
-            x: originPoint.x + overlayStartX,
-            y: originPoint.y + overlayStartY
+            x: originPoint.x + overlayStartX + this._offsetX,
+            y: originPoint.y + overlayStartY + this._offsetY
         };
@@ -160,5 +188,4 @@ };
     ConnectedPositionStrategy.prototype._setElementPosition = function (element, overlayPoint) {
-        var scrollPos = this._viewportRuler.getViewportScrollPosition();
-        var x = overlayPoint.x + scrollPos.left;
-        var y = overlayPoint.y + scrollPos.top;
+        var x = overlayPoint.x;
+        var y = overlayPoint.y;
         // TODO(jelbourn): we don't want to always overwrite the transform property here,
@@ -165,0 +192,0 @@ // because it will need to be used for animations.

core/portal/dom-portal-host.d.ts

@@ -1,2 +0,2 @@
-import { ComponentFactoryResolver, ComponentRef } from '@angular/core';
+import { ComponentFactoryResolver, ComponentRef, ApplicationRef, Injector } from '@angular/core';
 import { BasePortalHost, ComponentPortal, TemplatePortal } from './portal';
@@ -12,3 +12,5 @@ /**
     private _componentFactoryResolver;
-    constructor(_hostDomElement: Element, _componentFactoryResolver: ComponentFactoryResolver);
+    private _appRef;
+    private _defaultInjector;
+    constructor(_hostDomElement: Element, _componentFactoryResolver: ComponentFactoryResolver, _appRef: ApplicationRef, _defaultInjector: Injector);
     /** Attach the given ComponentPortal to DOM element using the ComponentFactoryResolver. */
@@ -18,2 +20,4 @@ attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
     dispose(): void;
+    /** Gets the root HTMLElement for an instantiated component. */
+    private _getComponentRootNode(componentRef);
 }

core/portal/dom-portal-host.js

@@ -7,3 +7,2 @@ var __extends = (this && this.__extends) || function (d, b) {
 import { BasePortalHost } from './portal';
-import { MdComponentPortalAttachedToDomWithoutOriginError } from './portal-errors';
 /**
@@ -17,18 +16,48 @@ * A PortalHost for attaching portals to an arbitrary DOM element outside of the Angular
     __extends(DomPortalHost, _super);
-    function DomPortalHost(_hostDomElement, _componentFactoryResolver) {
+    function DomPortalHost(_hostDomElement, _componentFactoryResolver, _appRef, _defaultInjector) {
         _super.call(this);
         this._hostDomElement = _hostDomElement;
         this._componentFactoryResolver = _componentFactoryResolver;
+        this._appRef = _appRef;
+        this._defaultInjector = _defaultInjector;
     }
     /** Attach the given ComponentPortal to DOM element using the ComponentFactoryResolver. */
     DomPortalHost.prototype.attachComponentPortal = function (portal) {
-        if (portal.viewContainerRef == null) {
-            throw new MdComponentPortalAttachedToDomWithoutOriginError();
+        var _this = this;
+        var componentFactory = this._componentFactoryResolver.resolveComponentFactory(portal.component);
+        var componentRef;
+        // If the portal specifies a ViewContainerRef, we will use that as the attachment point
+        // for the component (in terms of Angular's component tree, not rendering).
+        // When the ViewContainerRef is missing, we use the factory to create the component directly
+        // and then manually attach the ChangeDetector for that component to the application (which
+        // happens automatically when using a ViewContainer).
+        if (portal.viewContainerRef) {
+            componentRef = portal.viewContainerRef.createComponent(componentFactory, portal.viewContainerRef.length, portal.injector || portal.viewContainerRef.parentInjector);
+            this.setDisposeFn(function () { return componentRef.destroy(); });
         }
-        var componentFactory = this._componentFactoryResolver.resolveComponentFactory(portal.component);
-        var ref = portal.viewContainerRef.createComponent(componentFactory, portal.viewContainerRef.length, portal.injector || portal.viewContainerRef.parentInjector);
-        var hostView = ref.hostView;
-        this._hostDomElement.appendChild(hostView.rootNodes[0]);
-        this.setDisposeFn(function () { return ref.destroy(); });
-        return ref;
+        else {
+            componentRef = componentFactory.create(portal.injector || this._defaultInjector);
+            // When creating a component outside of a ViewContainer, we need to manually register
+            // its ChangeDetector with the application. This API is unfortunately not yet published
+            // in Angular core. The change detector must also be deregistered when the component
+            // is destroyed to prevent memory leaks.
+            //
+            // See https://github.com/angular/angular/pull/12674
+            var changeDetectorRef_1 = componentRef.changeDetectorRef;
+            this._appRef.registerChangeDetector(changeDetectorRef_1);
+            this.setDisposeFn(function () {
+                _this._appRef.unregisterChangeDetector(changeDetectorRef_1);
+                // Normally the ViewContainer will remove the component's nodes from the DOM.
+                // Without a ViewContainer, we need to manually remove the nodes.
+                var componentRootNode = _this._getComponentRootNode(componentRef);
+                if (componentRootNode.parentNode) {
+                    componentRootNode.parentNode.removeChild(componentRootNode);
+                }
+                componentRef.destroy();
+            });
+        }
+        // At this point the component has been instantiated, so we move it to the location in the DOM
+        // where we want it to be rendered.
+        this._hostDomElement.appendChild(this._getComponentRootNode(componentRef));
+        return componentRef;
     };
@@ -55,2 +84,6 @@ DomPortalHost.prototype.attachTemplatePortal = function (portal) {
     };
+    /** Gets the root HTMLElement for an instantiated component. */
+    DomPortalHost.prototype._getComponentRootNode = function (componentRef) {
+        return componentRef.hostView.rootNodes[0];
+    };
     return DomPortalHost;
@@ -57,0 +90,0 @@ }(BasePortalHost));

core/portal/portal-directives.d.ts

@@ -1,2 +0,2 @@
-import { ModuleWithProviders, ComponentRef, TemplateRef, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
+import { ModuleWithProviders, ComponentRef, TemplateRef, ComponentFactoryResolver, ViewContainerRef, OnDestroy } from '@angular/core';
 import { Portal, TemplatePortal, ComponentPortal, BasePortalHost } from './portal';
@@ -22,3 +22,3 @@ /**
  */
-export declare class PortalHostDirective extends BasePortalHost {
+export declare class PortalHostDirective extends BasePortalHost implements OnDestroy {
     private _componentFactoryResolver;
@@ -30,3 +30,4 @@ private _viewContainerRef;
     portal: Portal<any>;
-    /** Attach the given ComponentPortal to this PortlHost using the ComponentFactoryResolver. */
+    ngOnDestroy(): void;
+    /** Attach the given ComponentPortal to this PortalHost using the ComponentFactoryResolver. */
     attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
@@ -33,0 +34,0 @@ /** Attach the given TemplatePortal to this PortlHost as an embedded View. */

core/portal/portal-directives.js

@@ -64,3 +64,6 @@ var __extends = (this && this.__extends) || function (d, b) {
     });
-    /** Attach the given ComponentPortal to this PortlHost using the ComponentFactoryResolver. */
+    PortalHostDirective.prototype.ngOnDestroy = function () {
+        this.dispose();
+    };
+    /** Attach the given ComponentPortal to this PortalHost using the ComponentFactoryResolver. */
     PortalHostDirective.prototype.attachComponentPortal = function (portal) {
@@ -67,0 +70,0 @@ portal.setAttachedHost(this);

core/portal/portal-directives.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"TemplatePortalDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[portal]","exportAs":"portal"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}]}},"PortalHostDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[portalHost]","inputs":["portal: portalHost"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}],"attachComponentPortal":[{"__symbolic":"method"}],"attachTemplatePortal":[{"__symbolic":"method"}],"_replaceAttachedPortal":[{"__symbolic":"method"}]}},"PortalModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"exports":[{"__symbolic":"reference","name":"TemplatePortalDirective"},{"__symbolic":"reference","name":"PortalHostDirective"}],"declarations":[{"__symbolic":"reference","name":"TemplatePortalDirective"},{"__symbolic":"reference","name":"PortalHostDirective"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"PortalModule"},"providers":[]}}}}}}
+{"__symbolic":"module","version":1,"metadata":{"TemplatePortalDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[portal]","exportAs":"portal"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}]}},"PortalHostDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[portalHost]","inputs":["portal: portalHost"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"attachComponentPortal":[{"__symbolic":"method"}],"attachTemplatePortal":[{"__symbolic":"method"}],"_replaceAttachedPortal":[{"__symbolic":"method"}]}},"PortalModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"exports":[{"__symbolic":"reference","name":"TemplatePortalDirective"},{"__symbolic":"reference","name":"PortalHostDirective"}],"declarations":[{"__symbolic":"reference","name":"TemplatePortalDirective"},{"__symbolic":"reference","name":"PortalHostDirective"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"PortalModule"},"providers":[]}}}}}}

core/portal/portal-errors.d.ts

 import { MdError } from '../errors/error';
-/** Exception thrown when a ComponentPortal is attached to a DomPortalHost without an origin. */
-export declare class MdComponentPortalAttachedToDomWithoutOriginError extends MdError {
-    constructor();
-}
 /** Exception thrown when attempting to attach a null portal to a host. */
@@ -7,0 +3,0 @@ export declare class MdNullPortalError extends MdError {

core/portal/portal-errors.js

@@ -7,11 +7,2 @@ var __extends = (this && this.__extends) || function (d, b) {
 import { MdError } from '../errors/error';
-/** Exception thrown when a ComponentPortal is attached to a DomPortalHost without an origin. */
-export var MdComponentPortalAttachedToDomWithoutOriginError = (function (_super) {
-    __extends(MdComponentPortalAttachedToDomWithoutOriginError, _super);
-    function MdComponentPortalAttachedToDomWithoutOriginError() {
-        _super.call(this, 'A ComponentPortal must have an origin set when attached to a DomPortalHost ' +
-            'because the DOM element is not part of the Angular application context.');
-    }
-    return MdComponentPortalAttachedToDomWithoutOriginError;
-}(MdError));
 /** Exception thrown when attempting to attach a null portal to a host. */
@@ -18,0 +9,0 @@ export var MdNullPortalError = (function (_super) {

core/README.md

@@ -1,2 +0,1 @@
-Core library code for other `@angular2-material` components.
-This should be added as a dependency for any project using the components.
+Core library code for other `@angular/material` components.

core/rtl/dir.js

@@ -30,3 +30,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
             if (old != this._dir) {
-                this.dirChange.emit(null);
+                this.dirChange.emit();
             }
@@ -33,0 +33,0 @@ },

dialog/dialog-config.d.ts

@@ -8,5 +8,7 @@ import { ViewContainerRef } from '@angular/core';
 export declare class MdDialogConfig {
-    viewContainerRef: ViewContainerRef;
+    viewContainerRef?: ViewContainerRef;
     /** The ARIA role of the dialog element. */
-    role: DialogRole;
+    role?: DialogRole;
+    /** Whether the user can use escape or clicking outside to close a modal. */
+    disableClose?: boolean;
 }

dialog/dialog-config.js

@@ -8,2 +8,4 @@ /**
         this.role = 'dialog';
+        /** Whether the user can use escape or clicking outside to close a modal. */
+        this.disableClose = false;
     }
@@ -10,0 +12,0 @@ return MdDialogConfig;

dialog/dialog-container.js

@@ -52,4 +52,5 @@ var __extends = (this && this.__extends) || function (d, b) {
     MdDialogContainer.prototype.handleEscapeKey = function () {
-        // TODO(jelbourn): add MdDialogConfig option to disable this behavior.
-        this.dialogRef.close();
+        if (!this.dialogConfig.disableClose) {
+            this.dialogRef.close();
+        }
     };
@@ -56,0 +57,0 @@ MdDialogContainer.prototype.ngOnDestroy = function () {

dialog/dialog.d.ts

@@ -20,3 +20,3 @@ import { ModuleWithProviders, Injector } from '@angular/core';
      */
-    open<T>(component: ComponentType<T>, config: MdDialogConfig): MdDialogRef<T>;
+    open<T>(component: ComponentType<T>, config?: MdDialogConfig): MdDialogRef<T>;
     /**
@@ -23,0 +23,0 @@ * Creates the overlay into which the dialog will be loaded.

dialog/dialog.js

@@ -12,6 +12,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { Overlay, OverlayModule, PortalModule, OverlayState, ComponentPortal, OVERLAY_PROVIDERS } from '../core';
+import { MdDialogConfig } from './dialog-config';
 import { MdDialogRef } from './dialog-ref';
 import { DialogInjector } from './dialog-injector';
 import { MdDialogContainer } from './dialog-container';
-import { A11yModule } from '../core/a11y/index';
+import { A11yModule, InteractivityChecker } from '../core';
+import { extendObject } from '../core/util/object-extend';
 export { MdDialogConfig } from './dialog-config';
@@ -39,2 +41,3 @@ export { MdDialogRef } from './dialog-ref';
     MdDialog.prototype.open = function (component, config) {
+        config = _applyConfigDefaults(config);
         var overlayRef = this._createOverlay(config);
@@ -60,3 +63,4 @@ var dialogContainer = this._attachDialogContainer(overlayRef, config);
     MdDialog.prototype._attachDialogContainer = function (overlay, config) {
-        var containerPortal = new ComponentPortal(MdDialogContainer, config.viewContainerRef);
+        var viewContainer = config ? config.viewContainerRef : null;
+        var containerPortal = new ComponentPortal(MdDialogContainer, viewContainer);
         var containerRef = overlay.attach(containerPortal);
@@ -77,4 +81,6 @@ containerRef.instance.dialogConfig = config;
         var dialogRef = new MdDialogRef(overlayRef);
-        // When the dialog backdrop is clicked, we want to close it.
-        overlayRef.backdropClick().subscribe(function () { return dialogRef.close(); });
+        if (!dialogContainer.dialogConfig.disableClose) {
+            // When the dialog backdrop is clicked, we want to close it.
+            overlayRef.backdropClick().first().subscribe(function () { return dialogRef.close(); });
+        }
         // Set the dialogRef to the container so that it can use the ref to close the dialog.
@@ -111,2 +117,10 @@ dialogContainer.dialogRef = dialogRef;
 }());
+/**
+ * Applies default options to the dialog config.
+ * @param dialogConfig Config to be modified.
+ * @returns The new configuration object.
+ */
+function _applyConfigDefaults(dialogConfig) {
+    return extendObject(new MdDialogConfig(), dialogConfig);
+}
 export var MdDialogModule = (function () {
@@ -118,3 +132,3 @@ function MdDialogModule() {
             ngModule: MdDialogModule,
-            providers: [MdDialog, OVERLAY_PROVIDERS, A11yModule.forRoot().providers],
+            providers: [MdDialog, OVERLAY_PROVIDERS, InteractivityChecker],
         };
@@ -121,0 +135,0 @@ };

dialog/dialog.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MdDialog":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../core","name":"Overlay"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"}]}],"open":[{"__symbolic":"method"}],"_createOverlay":[{"__symbolic":"method"}],"_attachDialogContainer":[{"__symbolic":"method"}],"_attachDialogContent":[{"__symbolic":"method"}],"_getOverlayState":[{"__symbolic":"method"}]}},"MdDialogModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"../core","name":"OverlayModule"},{"__symbolic":"reference","module":"../core","name":"PortalModule"},{"__symbolic":"reference","module":"../core/a11y/index","name":"A11yModule"}],"exports":[{"__symbolic":"reference","module":"./dialog-container","name":"MdDialogContainer"}],"declarations":[{"__symbolic":"reference","module":"./dialog-container","name":"MdDialogContainer"}],"entryComponents":[{"__symbolic":"reference","module":"./dialog-container","name":"MdDialogContainer"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdDialogModule"},"providers":[{"__symbolic":"reference","name":"MdDialog"},{"__symbolic":"reference","module":"../core","name":"OVERLAY_PROVIDERS"},{"__symbolic":"select","expression":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"../core/a11y/index","name":"A11yModule"},"member":"forRoot"}},"member":"providers"}]}}}}},"exports":[{"from":"./dialog-config","export":["MdDialogConfig"]},{"from":"./dialog-ref","export":["MdDialogRef"]}]}
+{"__symbolic":"module","version":1,"metadata":{"MdDialog":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../core","name":"Overlay"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"}]}],"open":[{"__symbolic":"method"}],"_createOverlay":[{"__symbolic":"method"}],"_attachDialogContainer":[{"__symbolic":"method"}],"_attachDialogContent":[{"__symbolic":"method"}],"_getOverlayState":[{"__symbolic":"method"}]}},"MdDialogModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"../core","name":"OverlayModule"},{"__symbolic":"reference","module":"../core","name":"PortalModule"},{"__symbolic":"reference","module":"../core","name":"A11yModule"}],"exports":[{"__symbolic":"reference","module":"./dialog-container","name":"MdDialogContainer"}],"declarations":[{"__symbolic":"reference","module":"./dialog-container","name":"MdDialogContainer"}],"entryComponents":[{"__symbolic":"reference","module":"./dialog-container","name":"MdDialogContainer"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdDialogModule"},"providers":[{"__symbolic":"reference","name":"MdDialog"},{"__symbolic":"reference","module":"../core","name":"OVERLAY_PROVIDERS"},{"__symbolic":"reference","module":"../core","name":"InteractivityChecker"}]}}}}},"exports":[{"from":"./dialog-config","export":["MdDialogConfig"]},{"from":"./dialog-ref","export":["MdDialogRef"]}]}

dialog/index.d.ts

 export * from './dialog';
+export * from './dialog-container';
+export * from './dialog-config';
+export * from './dialog-ref';

dialog/index.js

 export * from './dialog';
+export * from './dialog-container';
+export * from './dialog-config';
+export * from './dialog-ref';
 
 //# sourceMappingURL=index.js.map

dialog/index.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./dialog"}]}
+{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./dialog"},{"from":"./dialog-container"},{"from":"./dialog-config"},{"from":"./dialog-ref"}]}

grid-list/README.md

@@ -10,15 +10,2 @@ # md-grid-list
 
-To use `md-grid-list`, import the MdGridList module into your application's NgModule:
-
-*my-app-module.ts*
-```ts
-import {MdGridListModule} from '@angular2-material/grid-list';
-
-@NgModule({
-  imports: [MdGridListModule.forRoot()],
-  ...
-})
-export class MyAppModule {}
-```
-
 In your template, create an `md-grid-list` element and specify the number of columns you want for
@@ -25,0 +12,0 @@ your grid using the `cols` property (this is the only mandatory attribute).

icon/icon.js

@@ -104,6 +104,6 @@ var __extends = (this && this.__extends) || function (d, b) {
                 var _a = this._splitIconName(this.svgIcon), namespace = _a[0], iconName = _a[1];
-                this._mdIconRegistry.getNamedSvgIcon(iconName, namespace).subscribe(function (svg) { return _this._setSvgElement(svg); }, function (err) { return console.log("Error retrieving icon: " + err); });
+                this._mdIconRegistry.getNamedSvgIcon(iconName, namespace).first().subscribe(function (svg) { return _this._setSvgElement(svg); }, function (err) { return console.log("Error retrieving icon: " + err); });
             }
             else if (this.svgSrc) {
-                this._mdIconRegistry.getSvgIconFromUrl(this.svgSrc).subscribe(function (svg) { return _this._setSvgElement(svg); }, function (err) { return console.log("Error retrieving icon: " + err); });
+                this._mdIconRegistry.getSvgIconFromUrl(this.svgSrc).first().subscribe(function (svg) { return _this._setSvgElement(svg); }, function (err) { return console.log("Error retrieving icon: " + err); });
             }
@@ -110,0 +110,0 @@ }

index.d.ts

@@ -22,3 +22,4 @@ export * from './core';
 export * from './tabs/index';
+export * from './tabs/tab-nav-bar/index';
 export * from './toolbar/index';
 export * from './tooltip/index';

index.js

@@ -22,2 +22,3 @@ export * from './core';
 export * from './tabs/index';
+export * from './tabs/tab-nav-bar/index';
 export * from './toolbar/index';
@@ -24,0 +25,0 @@ export * from './tooltip/index';

index.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./core"},{"from":"./module"},{"from":"./button/index"},{"from":"./button-toggle/index"},{"from":"./card/index"},{"from":"./checkbox/index"},{"from":"./dialog/index"},{"from":"./grid-list/index"},{"from":"./icon/index"},{"from":"./input/index"},{"from":"./list/index"},{"from":"./menu/index"},{"from":"./progress-bar/index"},{"from":"./progress-circle/index"},{"from":"./radio/index"},{"from":"./select/index"},{"from":"./sidenav/index"},{"from":"./slider/index"},{"from":"./slide-toggle/index"},{"from":"./snack-bar/index"},{"from":"./tabs/index"},{"from":"./toolbar/index"},{"from":"./tooltip/index"}]}
+{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./core"},{"from":"./module"},{"from":"./button/index"},{"from":"./button-toggle/index"},{"from":"./card/index"},{"from":"./checkbox/index"},{"from":"./dialog/index"},{"from":"./grid-list/index"},{"from":"./icon/index"},{"from":"./input/index"},{"from":"./list/index"},{"from":"./menu/index"},{"from":"./progress-bar/index"},{"from":"./progress-circle/index"},{"from":"./radio/index"},{"from":"./select/index"},{"from":"./sidenav/index"},{"from":"./slider/index"},{"from":"./slide-toggle/index"},{"from":"./snack-bar/index"},{"from":"./tabs/index"},{"from":"./tabs/tab-nav-bar/index"},{"from":"./toolbar/index"},{"from":"./tooltip/index"}]}

input/input.d.ts

@@ -41,2 +41,5 @@ import { AfterContentInit, SimpleChange, ElementRef, QueryList, OnChanges, ModuleWithProviders } from '@angular/core';
     ariaLabelledBy: string;
+    private _ariaDisabled;
+    private _ariaRequired;
+    private _ariaInvalid;
     ariaDisabled: boolean;
@@ -60,3 +63,2 @@ ariaRequired: boolean;
     dividerColor: 'primary' | 'accent' | 'warn';
-    floatingPlaceholder: boolean;
     hintLabel: string;
@@ -66,4 +68,2 @@ autocomplete: string;
     autocapitalize: string;
-    autofocus: boolean;
-    disabled: boolean;
     id: string;
@@ -76,5 +76,2 @@ list: string;
     placeholder: string;
-    readonly: boolean;
-    required: boolean;
-    spellcheck: boolean;
     step: number;
@@ -84,2 +81,17 @@ tabindex: number;
     name: string;
+    rows: number;
+    cols: number;
+    wrap: 'soft' | 'hard';
+    private _floatingPlaceholder;
+    private _autofocus;
+    private _disabled;
+    private _readonly;
+    private _required;
+    private _spellcheck;
+    floatingPlaceholder: boolean;
+    autofocus: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    spellcheck: boolean;
     private _blurEmitter;
@@ -92,2 +104,4 @@ private _focusEmitter;
     _inputElement: ElementRef;
+    _elementType: 'input' | 'textarea';
+    constructor(elementRef: ElementRef);
     /** Set focus on input */
@@ -94,0 +108,0 @@ focus(): void;

input/input.js

@@ -18,3 +18,3 @@ var __extends = (this && this.__extends) || function (d, b) {
 import { CommonModule } from '@angular/common';
-import { BooleanFieldValue, MdError } from '../core';
+import { MdError, coerceBooleanProperty } from '../core';
 import { Observable } from 'rxjs/Observable';
@@ -97,3 +97,3 @@ var noop = function () { };
 export var MdInput = (function () {
-    function MdInput() {
+    function MdInput(elementRef) {
         this._focused = false;
@@ -110,6 +110,3 @@ this._value = '';
         this.dividerColor = 'primary';
-        this.floatingPlaceholder = true;
         this.hintLabel = '';
-        this.autofocus = false;
-        this.disabled = false;
         this.id = "md-input-" + nextUniqueId++;
@@ -122,5 +119,2 @@ this.list = null;
         this.placeholder = null;
-        this.readonly = false;
-        this.required = false;
-        this.spellcheck = false;
         this.step = null;
@@ -130,5 +124,37 @@ this.tabindex = null;
         this.name = null;
+        // textarea-specific
+        this.rows = null;
+        this.cols = null;
+        this.wrap = null;
+        this._floatingPlaceholder = true;
+        this._autofocus = false;
+        this._disabled = false;
+        this._readonly = false;
+        this._required = false;
+        this._spellcheck = false;
         this._blurEmitter = new EventEmitter();
         this._focusEmitter = new EventEmitter();
+        // Set the element type depending on normalized selector used(md-input / md-textarea)
+        this._elementType = elementRef.nativeElement.nodeName.toLowerCase() === 'md-input' ?
+            'input' :
+            'textarea';
     }
+    Object.defineProperty(MdInput.prototype, "ariaDisabled", {
+        get: function () { return this._ariaDisabled; },
+        set: function (value) { this._ariaDisabled = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdInput.prototype, "ariaRequired", {
+        get: function () { return this._ariaRequired; },
+        set: function (value) { this._ariaRequired = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdInput.prototype, "ariaInvalid", {
+        get: function () { return this._ariaInvalid; },
+        set: function (value) { this._ariaInvalid = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(MdInput.prototype, "focused", {
@@ -157,2 +183,38 @@ /** Readonly properties. */
     });
+    Object.defineProperty(MdInput.prototype, "floatingPlaceholder", {
+        get: function () { return this._floatingPlaceholder; },
+        set: function (value) { this._floatingPlaceholder = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdInput.prototype, "autofocus", {
+        get: function () { return this._autofocus; },
+        set: function (value) { this._autofocus = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdInput.prototype, "disabled", {
+        get: function () { return this._disabled; },
+        set: function (value) { this._disabled = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdInput.prototype, "readonly", {
+        get: function () { return this._readonly; },
+        set: function (value) { this._readonly = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdInput.prototype, "required", {
+        get: function () { return this._required; },
+        set: function (value) { this._required = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdInput.prototype, "spellcheck", {
+        get: function () { return this._spellcheck; },
+        set: function (value) { this._spellcheck = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(MdInput.prototype, "onBlur", {
@@ -305,16 +367,13 @@ get: function () {
     __decorate([
-        Input('aria-disabled'),
-        BooleanFieldValue(), 
+        Input('aria-disabled'), 
         __metadata('design:type', Boolean)
-    ], MdInput.prototype, "ariaDisabled", void 0);
+    ], MdInput.prototype, "ariaDisabled", null);
     __decorate([
-        Input('aria-required'),
-        BooleanFieldValue(), 
+        Input('aria-required'), 
         __metadata('design:type', Boolean)
-    ], MdInput.prototype, "ariaRequired", void 0);
+    ], MdInput.prototype, "ariaRequired", null);
     __decorate([
-        Input('aria-invalid'),
-        BooleanFieldValue(), 
+        Input('aria-invalid'), 
         __metadata('design:type', Boolean)
-    ], MdInput.prototype, "ariaInvalid", void 0);
+    ], MdInput.prototype, "ariaInvalid", null);
     __decorate([
@@ -337,7 +396,2 @@ ContentChild(MdPlaceholder),
     __decorate([
-        Input(),
-        BooleanFieldValue(), 
-        __metadata('design:type', Boolean)
-    ], MdInput.prototype, "floatingPlaceholder", void 0);
-    __decorate([
         Input(), 
@@ -359,12 +413,2 @@ __metadata('design:type', String)
     __decorate([
-        Input(),
-        BooleanFieldValue(), 
-        __metadata('design:type', Boolean)
-    ], MdInput.prototype, "autofocus", void 0);
-    __decorate([
-        Input(),
-        BooleanFieldValue(), 
-        __metadata('design:type', Boolean)
-    ], MdInput.prototype, "disabled", void 0);
-    __decorate([
         Input(), 
@@ -398,17 +442,2 @@ __metadata('design:type', String)
     __decorate([
-        Input(),
-        BooleanFieldValue(), 
-        __metadata('design:type', Boolean)
-    ], MdInput.prototype, "readonly", void 0);
-    __decorate([
-        Input(),
-        BooleanFieldValue(), 
-        __metadata('design:type', Boolean)
-    ], MdInput.prototype, "required", void 0);
-    __decorate([
-        Input(),
-        BooleanFieldValue(), 
-        __metadata('design:type', Boolean)
-    ], MdInput.prototype, "spellcheck", void 0);
-    __decorate([
         Input(), 
@@ -430,2 +459,38 @@ __metadata('design:type', Number)
     __decorate([
+        Input(), 
+        __metadata('design:type', Number)
+    ], MdInput.prototype, "rows", void 0);
+    __decorate([
+        Input(), 
+        __metadata('design:type', Number)
+    ], MdInput.prototype, "cols", void 0);
+    __decorate([
+        Input(), 
+        __metadata('design:type', Object)
+    ], MdInput.prototype, "wrap", void 0);
+    __decorate([
+        Input(), 
+        __metadata('design:type', Boolean)
+    ], MdInput.prototype, "floatingPlaceholder", null);
+    __decorate([
+        Input(), 
+        __metadata('design:type', Boolean)
+    ], MdInput.prototype, "autofocus", null);
+    __decorate([
+        Input(), 
+        __metadata('design:type', Boolean)
+    ], MdInput.prototype, "disabled", null);
+    __decorate([
+        Input(), 
+        __metadata('design:type', Boolean)
+    ], MdInput.prototype, "readonly", null);
+    __decorate([
+        Input(), 
+        __metadata('design:type', Boolean)
+    ], MdInput.prototype, "required", null);
+    __decorate([
+        Input(), 
+        __metadata('design:type', Boolean)
+    ], MdInput.prototype, "spellcheck", null);
+    __decorate([
         Output('blur'), 
@@ -451,5 +516,5 @@ __metadata('design:type', Observable)
     MdInput = __decorate([
-        Component({selector: 'md-input',
-            template: "<div class=\"md-input-wrapper\"> <div class=\"md-input-table\"> <div class=\"md-input-prefix\"><ng-content select=\"[md-prefix]\"></ng-content></div> <div class=\"md-input-infix\"> <input #input aria-target class=\"md-input-element\" [class.md-end]=\"align == 'end'\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledBy\" [attr.aria-disabled]=\"ariaDisabled\" [attr.aria-required]=\"ariaRequired\" [attr.aria-invalid]=\"ariaInvalid\" [attr.autocomplete]=\"autocomplete\" [attr.autocorrect]=\"autocorrect\" [attr.autocapitalize]=\"autocapitalize\" [autofocus]=\"autofocus\" [disabled]=\"disabled\" [id]=\"inputId\" [attr.list]=\"list\" [attr.max]=\"max\" [attr.maxlength]=\"maxlength\" [attr.min]=\"min\" [attr.minlength]=\"minlength\" [readonly]=\"readonly\" [required]=\"required\" [spellcheck]=\"spellcheck\" [attr.step]=\"step\" [attr.tabindex]=\"tabindex\" [type]=\"type\" [attr.name]=\"name\" (focus)=\"_handleFocus($event)\" (blur)=\"_handleBlur($event)\" [(ngModel)]=\"value\" (change)=\"_handleChange($event)\"> <label class=\"md-input-placeholder\" [attr.for]=\"inputId\" [class.md-empty]=\"empty\" [class.md-focused]=\"focused\" [class.md-float]=\"floatingPlaceholder\" [class.md-accent]=\"dividerColor == 'accent'\" [class.md-warn]=\"dividerColor == 'warn'\" *ngIf=\"_hasPlaceholder()\"> <ng-content select=\"md-placeholder\"></ng-content> {{placeholder}} <span class=\"md-placeholder-required\" *ngIf=\"required\">*</span> </label> </div> <div class=\"md-input-suffix\"><ng-content select=\"[md-suffix]\"></ng-content></div> </div> <div class=\"md-input-underline\" [class.md-disabled]=\"disabled\"> <span class=\"md-input-ripple\" [class.md-focused]=\"focused\" [class.md-accent]=\"dividerColor == 'accent'\" [class.md-warn]=\"dividerColor == 'warn'\"></span> </div> <div *ngIf=\"hintLabel != ''\" class=\"md-hint\">{{hintLabel}}</div> <ng-content select=\"md-hint\"></ng-content> </div> ",
-            styles: ["md-input { display: inline-block; position: relative; font-family: Roboto, \"Helvetica Neue\", sans-serif; text-align: left; } [dir='rtl'] md-input { text-align: right; } .md-input-wrapper { margin: 16px 0; } .md-input-table { display: inline-table; flex-flow: column; vertical-align: bottom; width: 100%; } .md-input-table > * { display: table-cell; } .md-input-infix { position: relative; } .md-input-element { font: inherit; background: transparent; color: currentColor; border: none; outline: none; padding: 0; width: 100%; } .md-input-element.md-end { text-align: right; } [dir='rtl'] .md-input-element.md-end { text-align: left; } .md-input-element:-moz-ui-invalid { box-shadow: none; } .md-input-element:-webkit-autofill + .md-input-placeholder { display: block; padding-bottom: 5px; transform: translateY(-100%) scale(0.75); width: 133.33333%; } .md-input-placeholder { position: absolute; left: 0; top: 0; font-size: 100%; pointer-events: none; z-index: 1; width: 100%; display: none; white-space: nowrap; text-overflow: ellipsis; overflow-x: hidden; transform: translateY(0); transform-origin: bottom left; transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1), scale 400ms cubic-bezier(0.25, 0.8, 0.25, 1), color 400ms cubic-bezier(0.25, 0.8, 0.25, 1), width 400ms cubic-bezier(0.25, 0.8, 0.25, 1); } .md-input-placeholder.md-empty { display: block; cursor: text; } .md-input-placeholder.md-float:not(.md-empty), .md-input-placeholder.md-float.md-focused { display: block; padding-bottom: 5px; transform: translateY(-100%) scale(0.75); width: 133.33333%; } [dir='rtl'] .md-input-placeholder { transform-origin: bottom right; } .md-input-underline { position: absolute; height: 1px; width: 100%; margin-top: 4px; border-top-width: 1px; border-top-style: solid; } .md-input-underline.md-disabled { border-top: 0; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%); background-position: 0; background-size: 4px 1px; background-repeat: repeat-x; } .md-input-underline .md-input-ripple { position: absolute; height: 2px; z-index: 1; top: -1px; width: 100%; transform-origin: top; opacity: 0; transform: scaleY(0); transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); } .md-input-underline .md-input-ripple.md-focused { opacity: 1; transform: scaleY(1); } .md-hint { position: absolute; font-size: 75%; bottom: -0.5em; } .md-hint.md-right { right: 0; } [dir='rtl'] .md-hint { right: 0; left: auto; } [dir='rtl'] .md-hint.md-right { right: auto; left: 0; } /*# sourceMappingURL=input.css.map */ "],
+        Component({selector: 'md-input, md-textarea',
+            template: "<div class=\"md-input-wrapper\"> <div class=\"md-input-table\"> <div class=\"md-input-prefix\"><ng-content select=\"[md-prefix]\"></ng-content></div> <div class=\"md-input-infix\"> <input #input *ngIf=\"_elementType === 'input'\" class=\"md-input-element\" [class.md-end]=\"align == 'end'\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledBy\" [attr.aria-disabled]=\"ariaDisabled\" [attr.aria-required]=\"ariaRequired\" [attr.aria-invalid]=\"ariaInvalid\" [attr.autocomplete]=\"autocomplete\" [attr.autocorrect]=\"autocorrect\" [attr.autocapitalize]=\"autocapitalize\" [autofocus]=\"autofocus\" [disabled]=\"disabled\" [id]=\"inputId\" [attr.list]=\"list\" [attr.max]=\"max\" [attr.maxlength]=\"maxlength\" [attr.min]=\"min\" [attr.minlength]=\"minlength\" [readonly]=\"readonly\" [required]=\"required\" [spellcheck]=\"spellcheck\" [attr.step]=\"step\" [attr.tabindex]=\"tabindex\" [type]=\"type\" [attr.name]=\"name\" (focus)=\"_handleFocus($event)\" (blur)=\"_handleBlur($event)\" [(ngModel)]=\"value\" (change)=\"_handleChange($event)\"> <textarea #input *ngIf=\"_elementType === 'textarea'\" class=\"md-input-element  md-input-element-textarea\" [class.md-end]=\"align == 'end'\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledBy\" [attr.aria-disabled]=\"ariaDisabled\" [attr.aria-required]=\"ariaRequired\" [attr.aria-invalid]=\"ariaInvalid\" [attr.autocomplete]=\"autocomplete\" [attr.autocapitalize]=\"autocapitalize\" [attr.cols]=\"cols\" [attr.rows]=\"rows\" [attr.wrap]=\"wrap\" [autofocus]=\"autofocus\" [disabled]=\"disabled\" [id]=\"inputId\" [attr.maxlength]=\"maxlength\" [attr.minlength]=\"minlength\" [readonly]=\"readonly\" [required]=\"required\" [spellcheck]=\"spellcheck\" [attr.tabindex]=\"tabindex\" [attr.name]=\"name\" (focus)=\"_handleFocus($event)\" (blur)=\"_handleBlur($event)\" [(ngModel)]=\"value\" (change)=\"_handleChange($event)\"></textarea> <label class=\"md-input-placeholder\" [attr.for]=\"inputId\" [class.md-empty]=\"empty\" [class.md-focused]=\"focused\" [class.md-float]=\"floatingPlaceholder\" [class.md-accent]=\"dividerColor == 'accent'\" [class.md-warn]=\"dividerColor == 'warn'\" *ngIf=\"_hasPlaceholder()\"> <ng-content select=\"md-placeholder\"></ng-content> {{placeholder}} <span class=\"md-placeholder-required\" *ngIf=\"required\">*</span> </label> </div> <div class=\"md-input-suffix\"><ng-content select=\"[md-suffix]\"></ng-content></div> </div> <div class=\"md-input-underline\" [class.md-disabled]=\"disabled\"> <span class=\"md-input-ripple\" [class.md-focused]=\"focused\" [class.md-accent]=\"dividerColor == 'accent'\" [class.md-warn]=\"dividerColor == 'warn'\"></span> </div> <div *ngIf=\"hintLabel != ''\" class=\"md-hint\">{{hintLabel}}</div> <ng-content select=\"md-hint\"></ng-content> </div> ",
+            styles: ["md-input, md-textarea { display: inline-block; position: relative; font-family: Roboto, \"Helvetica Neue\", sans-serif; line-height: normal; text-align: left; } [dir='rtl'] md-input, [dir='rtl'] md-textarea { text-align: right; } .md-input-wrapper { margin: 16px 0; } .md-input-table { display: inline-table; flex-flow: column; vertical-align: bottom; width: 100%; } .md-input-table > * { display: table-cell; } .md-input-infix { position: relative; } .md-input-element { font: inherit; background: transparent; color: currentColor; border: none; outline: none; padding: 0; width: 100%; } .md-input-element.md-end { text-align: right; } [dir='rtl'] .md-input-element.md-end { text-align: left; } .md-input-element:-moz-ui-invalid { box-shadow: none; } .md-input-element:-webkit-autofill + .md-input-placeholder.md-float { display: block; padding-bottom: 5px; transform: translateY(-100%) scale(0.75); width: 133.33333%; } .md-input-placeholder { position: absolute; left: 0; top: 0; font-size: 100%; pointer-events: none; z-index: 1; width: 100%; display: none; white-space: nowrap; text-overflow: ellipsis; overflow-x: hidden; transform: translateY(0); transform-origin: bottom left; transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1), scale 400ms cubic-bezier(0.25, 0.8, 0.25, 1), color 400ms cubic-bezier(0.25, 0.8, 0.25, 1), width 400ms cubic-bezier(0.25, 0.8, 0.25, 1); } .md-input-placeholder.md-empty { display: block; cursor: text; } .md-input-placeholder.md-float:not(.md-empty), .md-input-placeholder.md-float.md-focused { display: block; padding-bottom: 5px; transform: translateY(-100%) scale(0.75); width: 133.33333%; } [dir='rtl'] .md-input-placeholder { transform-origin: bottom right; } .md-input-underline { position: absolute; height: 1px; width: 100%; margin-top: 4px; border-top-width: 1px; border-top-style: solid; } .md-input-underline.md-disabled { border-top: 0; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%); background-position: 0; background-size: 4px 1px; background-repeat: repeat-x; } .md-input-underline .md-input-ripple { position: absolute; height: 2px; z-index: 1; top: -1px; width: 100%; transform-origin: top; opacity: 0; transform: scaleY(0); transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); } .md-input-underline .md-input-ripple.md-focused { opacity: 1; transform: scaleY(1); } .md-hint { display: block; position: absolute; font-size: 75%; bottom: -0.5em; } .md-hint.md-right { right: 0; } [dir='rtl'] .md-hint { right: 0; left: auto; } [dir='rtl'] .md-hint.md-right { right: auto; left: 0; } /*# sourceMappingURL=input.css.map */ "],
             providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR],
@@ -459,3 +524,3 @@ host: { '(click)': 'focus()' },
         }), 
-        __metadata('design:paramtypes', [])
+        __metadata('design:paramtypes', [ElementRef])
     ], MdInput);
@@ -462,0 +527,0 @@ return MdInput;

input/input.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MD_INPUT_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MdInput"},"multi":true},"MdPlaceholder":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"md-placeholder"}]}]},"MdHint":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"md-hint","host":{"[class.md-right]":"align == \"end\"","[class.md-hint]":"true"}}]}],"members":{"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}]}},"MdInput":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-input","templateUrl":"input.html","styleUrls":["input.css"],"providers":[{"__symbolic":"reference","name":"MD_INPUT_CONTROL_VALUE_ACCESSOR"}],"host":{"(click)":"focus()"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["aria-label"]}]}],"ariaLabelledBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["aria-labelledby"]}]}],"ariaDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["aria-disabled"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../core","name":"BooleanFieldValue"}}]}],"ariaRequired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["aria-required"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../core","name":"BooleanFieldValue"}}]}],"ariaInvalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["aria-invalid"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../core","name":"BooleanFieldValue"}}]}],"_placeholderChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","name":"MdPlaceholder"}]}]}],"_hintChildren":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"MdHint"}]}]}],"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dividerColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"floatingPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../core","name":"BooleanFieldValue"}}]}],"hintLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autocomplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autocorrect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autocapitalize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autofocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../core","name":"BooleanFieldValue"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../core","name":"BooleanFieldValue"}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"list":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../core","name":"BooleanFieldValue"}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../core","name":"BooleanFieldValue"}}]}],"spellcheck":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../core","name":"BooleanFieldValue"}}]}],"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["blur"]}]}],"onFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["focus"]}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.align"]}]}],"_inputElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["input"]}]}],"focus":[{"__symbolic":"method"}],"_handleFocus":[{"__symbolic":"method"}],"_handleBlur":[{"__symbolic":"method"}],"_handleChange":[{"__symbolic":"method"}],"_hasPlaceholder":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"_convertValueForInputType":[{"__symbolic":"method"}],"_validateConstraints":[{"__symbolic":"method"}]}},"MdInputModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MdPlaceholder"},{"__symbolic":"reference","name":"MdInput"},{"__symbolic":"reference","name":"MdHint"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","name":"MdPlaceholder"},{"__symbolic":"reference","name":"MdInput"},{"__symbolic":"reference","name":"MdHint"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdInputModule"},"providers":[]}}}}}}
+{"__symbolic":"module","version":1,"metadata":{"MD_INPUT_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MdInput"},"multi":true},"MdPlaceholder":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"md-placeholder"}]}]},"MdHint":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"md-hint","host":{"[class.md-right]":"align == \"end\"","[class.md-hint]":"true"}}]}],"members":{"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}]}},"MdInput":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-input, md-textarea","templateUrl":"input.html","styleUrls":["input.css"],"providers":[{"__symbolic":"reference","name":"MD_INPUT_CONTROL_VALUE_ACCESSOR"}],"host":{"(click)":"focus()"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["aria-label"]}]}],"ariaLabelledBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["aria-labelledby"]}]}],"ariaDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["aria-disabled"]}]}],"ariaRequired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["aria-required"]}]}],"ariaInvalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["aria-invalid"]}]}],"_placeholderChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","name":"MdPlaceholder"}]}]}],"_hintChildren":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"MdHint"}]}]}],"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dividerColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hintLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autocomplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autocorrect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autocapitalize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"list":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"rows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"cols":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"wrap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"floatingPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autofocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"spellcheck":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["blur"]}]}],"onFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["focus"]}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.align"]}]}],"_inputElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["input"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"focus":[{"__symbolic":"method"}],"_handleFocus":[{"__symbolic":"method"}],"_handleBlur":[{"__symbolic":"method"}],"_handleChange":[{"__symbolic":"method"}],"_hasPlaceholder":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"_convertValueForInputType":[{"__symbolic":"method"}],"_validateConstraints":[{"__symbolic":"method"}]}},"MdInputModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MdPlaceholder"},{"__symbolic":"reference","name":"MdInput"},{"__symbolic":"reference","name":"MdHint"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","name":"MdPlaceholder"},{"__symbolic":"reference","name":"MdInput"},{"__symbolic":"reference","name":"MdHint"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdInputModule"},"providers":[]}}}}}}

input/README.md

@@ -1,2 +0,2 @@
-# mdInput
+# mdInput / mdTextarea
 
@@ -8,3 +8,3 @@ Inputs are the basic input component of Material 2. The spec can be found [here](https://www.google.com/design/spec/components/text-fields.html).
 ## Notes
-* The `<md-input>` component fully support two-way binding of `ngModel`, as if it was a normal `<input>`.
+* The `<md-input>` / `<md-textarea>` component fully support two-way binding of `ngModel`, as if it was a normal `<input>` and `<textarea>`.
 
@@ -20,3 +20,11 @@
 
+## Placeholder
 
+A placeholder is an indicative text displayed in the input zone when the input does not contain text. When text is present, the indicative text will float above this input zone.
+
+You can set the `floatingPlaceholder` attribute to `false` to hide the indicative text instead when text is present in the input.
+
+You can specify a placeholder for the input in one of two ways; either using the `placeholder` attribute, or using an `<md-placeholder>` directive in the `<md-input>`. Using both will raise an error.
+
+
 ## Prefix and Suffix
@@ -83,4 +91,30 @@
 
+## Focus
 
+You can put the focus on an input component using the `focus()` method.
 
+### Example
+
+```html
+<md-input #nameInput placeholder="name"></md-input>
+```
+
+```ts
+export class MyComponent implements OnInit {
+  @ViewChild('nameInput') nameInput: MdInput;
+
+  ngOnInit() {
+    this.nameInput.focus();
+  }
+}
+```
+
+## Textareas
+
+```html
+<md-textarea placeholder="Textarea with autosize"></md-textarea>
+```
+
+### Example
+
 ## Full Forms
@@ -105,4 +139,4 @@
       <p>
-        <md-input class="demo-full-width" placeholder="Address" value="1600 Amphitheatre Pkway"></md-input>
-        <md-input class="demo-full-width" placeholder="Address 2"></md-input>
+        <md-textarea class="demo-full-width" placeholder="Address" value="1600 Amphitheatre Pkway"></md-textarea>
+        <md-textarea class="demo-full-width" placeholder="Address 2"></md-textarea>
       </p>
@@ -109,0 +143,0 @@ <table style="width: 100%" cellspacing="0"><tr>

list/list.js

@@ -30,3 +30,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
             template: '<ng-content></ng-content>',
-            styles: ["md-list, md-nav-list { padding-top: 8px; display: block; } md-list [md-subheader], md-nav-list [md-subheader] { display: block; box-sizing: border-box; height: 48px; padding: 16px; margin: 0; font-size: 14px; font-weight: 500; } md-list [md-subheader]:first-child, md-nav-list [md-subheader]:first-child { margin-top: -8px; } md-list md-list-item .md-list-item, md-list a[md-list-item] .md-list-item, md-nav-list md-list-item .md-list-item, md-nav-list a[md-list-item] .md-list-item { display: flex; flex-direction: row; align-items: center; font-family: Roboto, \"Helvetica Neue\", sans-serif; box-sizing: border-box; font-size: 16px; height: 48px; padding: 0 16px; } md-list md-list-item.md-list-avatar .md-list-item, md-list a[md-list-item].md-list-avatar .md-list-item, md-nav-list md-list-item.md-list-avatar .md-list-item, md-nav-list a[md-list-item].md-list-avatar .md-list-item { height: 56px; } md-list md-list-item.md-2-line .md-list-item, md-list a[md-list-item].md-2-line .md-list-item, md-nav-list md-list-item.md-2-line .md-list-item, md-nav-list a[md-list-item].md-2-line .md-list-item { height: 72px; } md-list md-list-item.md-3-line .md-list-item, md-list a[md-list-item].md-3-line .md-list-item, md-nav-list md-list-item.md-3-line .md-list-item, md-nav-list a[md-list-item].md-3-line .md-list-item { height: 88px; } md-list md-list-item .md-list-text, md-list a[md-list-item] .md-list-text, md-nav-list md-list-item .md-list-text, md-nav-list a[md-list-item] .md-list-text { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; overflow: hidden; padding: 0 16px; } md-list md-list-item .md-list-text > *, md-list a[md-list-item] .md-list-text > *, md-nav-list md-list-item .md-list-text > *, md-nav-list a[md-list-item] .md-list-text > * { margin: 0; padding: 0; font-weight: normal; font-size: inherit; } md-list md-list-item .md-list-text:empty, md-list a[md-list-item] .md-list-text:empty, md-nav-list md-list-item .md-list-text:empty, md-nav-list a[md-list-item] .md-list-text:empty { display: none; } md-list md-list-item .md-list-text:first-child, md-list a[md-list-item] .md-list-text:first-child, md-nav-list md-list-item .md-list-text:first-child, md-nav-list a[md-list-item] .md-list-text:first-child { padding: 0; } md-list md-list-item [md-list-avatar], md-list a[md-list-item] [md-list-avatar], md-nav-list md-list-item [md-list-avatar], md-nav-list a[md-list-item] [md-list-avatar] { width: 40px; height: 40px; border-radius: 50%; } md-list md-list-item [md-list-icon], md-list a[md-list-item] [md-list-icon], md-nav-list md-list-item [md-list-icon], md-nav-list a[md-list-item] [md-list-icon] { width: 24px; height: 24px; border-radius: 50%; padding: 4px; } md-list md-list-item [md-line], md-list a[md-list-item] [md-line], md-nav-list md-list-item [md-line], md-nav-list a[md-list-item] [md-line] { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } md-list md-list-item [md-line]:nth-child(n+2), md-list a[md-list-item] [md-line]:nth-child(n+2), md-nav-list md-list-item [md-line]:nth-child(n+2), md-nav-list a[md-list-item] [md-line]:nth-child(n+2) { font-size: 14px; } md-list[dense], md-nav-list[dense] { padding-top: 4px; display: block; } md-list[dense] [md-subheader], md-nav-list[dense] [md-subheader] { display: block; box-sizing: border-box; height: 40px; padding: 16px; margin: 0; font-size: 13px; font-weight: 500; } md-list[dense] [md-subheader]:first-child, md-nav-list[dense] [md-subheader]:first-child { margin-top: -4px; } md-list[dense] md-list-item .md-list-item, md-list[dense] a[md-list-item] .md-list-item, md-nav-list[dense] md-list-item .md-list-item, md-nav-list[dense] a[md-list-item] .md-list-item { display: flex; flex-direction: row; align-items: center; font-family: Roboto, \"Helvetica Neue\", sans-serif; box-sizing: border-box; font-size: 13px; height: 40px; padding: 0 16px; } md-list[dense] md-list-item.md-list-avatar .md-list-item, md-list[dense] a[md-list-item].md-list-avatar .md-list-item, md-nav-list[dense] md-list-item.md-list-avatar .md-list-item, md-nav-list[dense] a[md-list-item].md-list-avatar .md-list-item { height: 48px; } md-list[dense] md-list-item.md-2-line .md-list-item, md-list[dense] a[md-list-item].md-2-line .md-list-item, md-nav-list[dense] md-list-item.md-2-line .md-list-item, md-nav-list[dense] a[md-list-item].md-2-line .md-list-item { height: 60px; } md-list[dense] md-list-item.md-3-line .md-list-item, md-list[dense] a[md-list-item].md-3-line .md-list-item, md-nav-list[dense] md-list-item.md-3-line .md-list-item, md-nav-list[dense] a[md-list-item].md-3-line .md-list-item { height: 76px; } md-list[dense] md-list-item .md-list-text, md-list[dense] a[md-list-item] .md-list-text, md-nav-list[dense] md-list-item .md-list-text, md-nav-list[dense] a[md-list-item] .md-list-text { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; overflow: hidden; padding: 0 16px; } md-list[dense] md-list-item .md-list-text > *, md-list[dense] a[md-list-item] .md-list-text > *, md-nav-list[dense] md-list-item .md-list-text > *, md-nav-list[dense] a[md-list-item] .md-list-text > * { margin: 0; padding: 0; font-weight: normal; font-size: inherit; } md-list[dense] md-list-item .md-list-text:empty, md-list[dense] a[md-list-item] .md-list-text:empty, md-nav-list[dense] md-list-item .md-list-text:empty, md-nav-list[dense] a[md-list-item] .md-list-text:empty { display: none; } md-list[dense] md-list-item .md-list-text:first-child, md-list[dense] a[md-list-item] .md-list-text:first-child, md-nav-list[dense] md-list-item .md-list-text:first-child, md-nav-list[dense] a[md-list-item] .md-list-text:first-child { padding: 0; } md-list[dense] md-list-item [md-list-avatar], md-list[dense] a[md-list-item] [md-list-avatar], md-nav-list[dense] md-list-item [md-list-avatar], md-nav-list[dense] a[md-list-item] [md-list-avatar] { width: 40px; height: 40px; border-radius: 50%; } md-list[dense] md-list-item [md-list-icon], md-list[dense] a[md-list-item] [md-list-icon], md-nav-list[dense] md-list-item [md-list-icon], md-nav-list[dense] a[md-list-item] [md-list-icon] { width: 24px; height: 24px; border-radius: 50%; padding: 4px; } md-list[dense] md-list-item [md-line], md-list[dense] a[md-list-item] [md-line], md-nav-list[dense] md-list-item [md-line], md-nav-list[dense] a[md-list-item] [md-line] { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } md-list[dense] md-list-item [md-line]:nth-child(n+2), md-list[dense] a[md-list-item] [md-line]:nth-child(n+2), md-nav-list[dense] md-list-item [md-line]:nth-child(n+2), md-nav-list[dense] a[md-list-item] [md-line]:nth-child(n+2) { font-size: 13px; } md-divider { display: block; border-top: 1px solid; margin: 0; } md-nav-list a { text-decoration: none; color: inherit; } md-nav-list .md-list-item { cursor: pointer; } md-nav-list .md-list-item:hover, md-nav-list .md-list-item.md-list-item-focus { outline: none; } /*# sourceMappingURL=list.css.map */ "],
+            styles: ["md-list, md-nav-list { padding-top: 8px; display: block; } md-list [md-subheader], md-nav-list [md-subheader] { display: block; box-sizing: border-box; height: 48px; padding: 16px; margin: 0; font-size: 14px; font-weight: 500; } md-list [md-subheader]:first-child, md-nav-list [md-subheader]:first-child { margin-top: -8px; } md-list md-list-item .md-list-item, md-list a[md-list-item] .md-list-item, md-nav-list md-list-item .md-list-item, md-nav-list a[md-list-item] .md-list-item { display: flex; flex-direction: row; align-items: center; font-family: Roboto, \"Helvetica Neue\", sans-serif; box-sizing: border-box; font-size: 16px; height: 48px; padding: 0 16px; } md-list md-list-item.md-list-avatar .md-list-item, md-list a[md-list-item].md-list-avatar .md-list-item, md-nav-list md-list-item.md-list-avatar .md-list-item, md-nav-list a[md-list-item].md-list-avatar .md-list-item { height: 56px; } md-list md-list-item.md-2-line .md-list-item, md-list a[md-list-item].md-2-line .md-list-item, md-nav-list md-list-item.md-2-line .md-list-item, md-nav-list a[md-list-item].md-2-line .md-list-item { height: 72px; } md-list md-list-item.md-3-line .md-list-item, md-list a[md-list-item].md-3-line .md-list-item, md-nav-list md-list-item.md-3-line .md-list-item, md-nav-list a[md-list-item].md-3-line .md-list-item { height: 88px; } md-list md-list-item.md-multi-line .md-list-item, md-list a[md-list-item].md-multi-line .md-list-item, md-nav-list md-list-item.md-multi-line .md-list-item, md-nav-list a[md-list-item].md-multi-line .md-list-item { height: 100%; padding: 8px 16px; } md-list md-list-item .md-list-text, md-list a[md-list-item] .md-list-text, md-nav-list md-list-item .md-list-text, md-nav-list a[md-list-item] .md-list-text { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; overflow: hidden; padding: 0 16px; } md-list md-list-item .md-list-text > *, md-list a[md-list-item] .md-list-text > *, md-nav-list md-list-item .md-list-text > *, md-nav-list a[md-list-item] .md-list-text > * { margin: 0; padding: 0; font-weight: normal; font-size: inherit; } md-list md-list-item .md-list-text:empty, md-list a[md-list-item] .md-list-text:empty, md-nav-list md-list-item .md-list-text:empty, md-nav-list a[md-list-item] .md-list-text:empty { display: none; } md-list md-list-item .md-list-text:first-child, md-list a[md-list-item] .md-list-text:first-child, md-nav-list md-list-item .md-list-text:first-child, md-nav-list a[md-list-item] .md-list-text:first-child { padding: 0; } md-list md-list-item [md-list-avatar], md-list a[md-list-item] [md-list-avatar], md-nav-list md-list-item [md-list-avatar], md-nav-list a[md-list-item] [md-list-avatar] { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; } md-list md-list-item [md-list-icon], md-list a[md-list-item] [md-list-icon], md-nav-list md-list-item [md-list-icon], md-nav-list a[md-list-item] [md-list-icon] { width: 24px; height: 24px; border-radius: 50%; padding: 4px; } md-list md-list-item [md-line], md-list a[md-list-item] [md-line], md-nav-list md-list-item [md-line], md-nav-list a[md-list-item] [md-line] { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } md-list md-list-item [md-line]:nth-child(n+2), md-list a[md-list-item] [md-line]:nth-child(n+2), md-nav-list md-list-item [md-line]:nth-child(n+2), md-nav-list a[md-list-item] [md-line]:nth-child(n+2) { font-size: 14px; } md-list[dense], md-nav-list[dense] { padding-top: 4px; display: block; } md-list[dense] [md-subheader], md-nav-list[dense] [md-subheader] { display: block; box-sizing: border-box; height: 40px; padding: 16px; margin: 0; font-size: 13px; font-weight: 500; } md-list[dense] [md-subheader]:first-child, md-nav-list[dense] [md-subheader]:first-child { margin-top: -4px; } md-list[dense] md-list-item .md-list-item, md-list[dense] a[md-list-item] .md-list-item, md-nav-list[dense] md-list-item .md-list-item, md-nav-list[dense] a[md-list-item] .md-list-item { display: flex; flex-direction: row; align-items: center; font-family: Roboto, \"Helvetica Neue\", sans-serif; box-sizing: border-box; font-size: 13px; height: 40px; padding: 0 16px; } md-list[dense] md-list-item.md-list-avatar .md-list-item, md-list[dense] a[md-list-item].md-list-avatar .md-list-item, md-nav-list[dense] md-list-item.md-list-avatar .md-list-item, md-nav-list[dense] a[md-list-item].md-list-avatar .md-list-item { height: 48px; } md-list[dense] md-list-item.md-2-line .md-list-item, md-list[dense] a[md-list-item].md-2-line .md-list-item, md-nav-list[dense] md-list-item.md-2-line .md-list-item, md-nav-list[dense] a[md-list-item].md-2-line .md-list-item { height: 60px; } md-list[dense] md-list-item.md-3-line .md-list-item, md-list[dense] a[md-list-item].md-3-line .md-list-item, md-nav-list[dense] md-list-item.md-3-line .md-list-item, md-nav-list[dense] a[md-list-item].md-3-line .md-list-item { height: 76px; } md-list[dense] md-list-item.md-multi-line .md-list-item, md-list[dense] a[md-list-item].md-multi-line .md-list-item, md-nav-list[dense] md-list-item.md-multi-line .md-list-item, md-nav-list[dense] a[md-list-item].md-multi-line .md-list-item { height: 100%; padding: 8px 16px; } md-list[dense] md-list-item .md-list-text, md-list[dense] a[md-list-item] .md-list-text, md-nav-list[dense] md-list-item .md-list-text, md-nav-list[dense] a[md-list-item] .md-list-text { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; overflow: hidden; padding: 0 16px; } md-list[dense] md-list-item .md-list-text > *, md-list[dense] a[md-list-item] .md-list-text > *, md-nav-list[dense] md-list-item .md-list-text > *, md-nav-list[dense] a[md-list-item] .md-list-text > * { margin: 0; padding: 0; font-weight: normal; font-size: inherit; } md-list[dense] md-list-item .md-list-text:empty, md-list[dense] a[md-list-item] .md-list-text:empty, md-nav-list[dense] md-list-item .md-list-text:empty, md-nav-list[dense] a[md-list-item] .md-list-text:empty { display: none; } md-list[dense] md-list-item .md-list-text:first-child, md-list[dense] a[md-list-item] .md-list-text:first-child, md-nav-list[dense] md-list-item .md-list-text:first-child, md-nav-list[dense] a[md-list-item] .md-list-text:first-child { padding: 0; } md-list[dense] md-list-item [md-list-avatar], md-list[dense] a[md-list-item] [md-list-avatar], md-nav-list[dense] md-list-item [md-list-avatar], md-nav-list[dense] a[md-list-item] [md-list-avatar] { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; } md-list[dense] md-list-item [md-list-icon], md-list[dense] a[md-list-item] [md-list-icon], md-nav-list[dense] md-list-item [md-list-icon], md-nav-list[dense] a[md-list-item] [md-list-icon] { width: 24px; height: 24px; border-radius: 50%; padding: 4px; } md-list[dense] md-list-item [md-line], md-list[dense] a[md-list-item] [md-line], md-nav-list[dense] md-list-item [md-line], md-nav-list[dense] a[md-list-item] [md-line] { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; display: block; box-sizing: border-box; } md-list[dense] md-list-item [md-line]:nth-child(n+2), md-list[dense] a[md-list-item] [md-line]:nth-child(n+2), md-nav-list[dense] md-list-item [md-line]:nth-child(n+2), md-nav-list[dense] a[md-list-item] [md-line]:nth-child(n+2) { font-size: 13px; } md-divider { display: block; border-top-style: solid; border-top-width: 1px; margin: 0; } md-nav-list a { text-decoration: none; color: inherit; } md-nav-list .md-list-item { cursor: pointer; } md-nav-list .md-list-item:hover, md-nav-list .md-list-item.md-list-item-focus { outline: none; } /*# sourceMappingURL=list.css.map */ "],
             encapsulation: ViewEncapsulation.None
@@ -33,0 +33,0 @@ }),

list/README.md

@@ -10,15 +10,2 @@ # md-list
 
-To use `md-list`, import the MdList module into your application's NgModule:
-
-*my-app-module.ts*
-```ts
-import {MdListModule} from '@angular2-material/list';
-
-@NgModule({
-  imports: [MdListModule.forRoot()],
-  ...
-})
-export class MyAppModule {}
-```
-
 In your template, create an `md-list` element and wrap each of your items in an `md-list-item` tag.
@@ -25,0 +12,0 @@

menu/menu-directive.d.ts

@@ -1,8 +0,11 @@
-import { EventEmitter, QueryList, TemplateRef } from '@angular/core';
+import { AfterContentInit, EventEmitter, OnDestroy, QueryList, TemplateRef } from '@angular/core';
 import { MenuPositionX, MenuPositionY } from './menu-positions';
 import { MdMenuItem } from './menu-item';
-export declare class MdMenu {
-    _showClickCatcher: boolean;
-    private _focusedItemIndex;
-    _classList: Object;
+import { MdMenuPanel } from './menu-panel';
+export declare class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
+    private _keyManager;
+    /** Subscription to tab events on the menu panel */
+    private _tabSubscription;
+    /** Config object to be passed into the menu's ngClass */
+    _classList: any;
     positionX: MenuPositionX;
@@ -13,2 +16,4 @@ positionY: MenuPositionY;
     constructor(posX: MenuPositionX, posY: MenuPositionY);
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
     /**
@@ -21,10 +26,4 @@ * This method takes classes set on the host md-menu element and applies them on the
     classList: string;
-    close: EventEmitter<{}>;
+    close: EventEmitter<void>;
     /**
-     * This function toggles the display of the menu's click catcher element.
-     * This element covers the viewport when the menu is open to detect clicks outside the menu.
-     * TODO: internal
-     */
-    _setClickCatcher(bool: boolean): void;
-    /**
      * Focus the first item in the menu. This method is used by the menu trigger
@@ -34,4 +33,3 @@ * to focus the first item when the menu is opened by the ENTER key.
      */
-    _focusFirstItem(): void;
-    _handleKeydown(event: KeyboardEvent): void;
+    focusFirstItem(): void;
     /**
@@ -41,18 +39,10 @@ * This emits a close event to which the trigger is subscribed. When emitted, the
      */
-    private _emitCloseEvent();
-    private _focusNextItem();
-    private _focusPreviousItem();
-    /**
-     * This method sets focus to the correct menu item, given a list of menu items and the delta
-     * between the currently focused menu item and the new menu item to be focused. It will
-     * continue to move down the list until it finds an item that is not disabled, and it will wrap
-     * if it encounters either end of the menu.
-     *
-     * @param delta the desired change in focus index
-     * @param menuItems the menu items that should be focused
-     * @private
-       */
-    private _updateFocusedItemIndex(delta, menuItems?);
+    _emitCloseEvent(): void;
     private _setPositionX(pos);
     private _setPositionY(pos);
+    /**
+     * It's necessary to set position-based classes to ensure the menu panel animation
+     * folds out from the correct direction.
+     */
+    private _setPositionClasses();
 }

menu/menu-directive.js

@@ -17,10 +17,11 @@ // TODO(kara): prevent-close functionality
 import { MdMenuItem } from './menu-item';
-import { UP_ARROW, DOWN_ARROW, TAB } from '../core';
+import { ListKeyManager } from '../core/a11y/list-key-manager';
+import { transformMenu, fadeInItems } from './menu-animations';
 export var MdMenu = (function () {
     function MdMenu(posX, posY) {
-        this._showClickCatcher = false;
-        this._focusedItemIndex = 0;
+        /** Config object to be passed into the menu's ngClass */
+        this._classList = {};
         this.positionX = 'after';
         this.positionY = 'below';
-        this.close = new EventEmitter;
+        this.close = new EventEmitter();
         if (posX) {
@@ -32,3 +33,16 @@ this._setPositionX(posX);
         }
+        this._setPositionClasses();
     }
+    // TODO: internal
+    MdMenu.prototype.ngAfterContentInit = function () {
+        var _this = this;
+        this._keyManager = new ListKeyManager(this.items);
+        this._tabSubscription = this._keyManager.tabOut.subscribe(function () {
+            _this._emitCloseEvent();
+        });
+    };
+    // TODO: internal
+    MdMenu.prototype.ngOnDestroy = function () {
+        this._tabSubscription.unsubscribe();
+    };
     Object.defineProperty(MdMenu.prototype, "classList", {
@@ -46,2 +60,3 @@ /**
             }, {});
+            this._setPositionClasses();
         },
@@ -52,10 +67,2 @@ enumerable: true,
     /**
-     * This function toggles the display of the menu's click catcher element.
-     * This element covers the viewport when the menu is open to detect clicks outside the menu.
-     * TODO: internal
-     */
-    MdMenu.prototype._setClickCatcher = function (bool) {
-        this._showClickCatcher = bool;
-    };
-    /**
      * Focus the first item in the menu. This method is used by the menu trigger
@@ -65,18 +72,7 @@ * to focus the first item when the menu is opened by the ENTER key.
      */
-    MdMenu.prototype._focusFirstItem = function () {
+    MdMenu.prototype.focusFirstItem = function () {
+        // The menu always opens with the first item focused.
         this.items.first.focus();
+        this._keyManager.focusedItemIndex = 0;
     };
-    // TODO(kara): update this when (keydown.downArrow) testability is fixed
-    // TODO: internal
-    MdMenu.prototype._handleKeydown = function (event) {
-        if (event.keyCode === DOWN_ARROW) {
-            this._focusNextItem();
-        }
-        else if (event.keyCode === UP_ARROW) {
-            this._focusPreviousItem();
-        }
-        else if (event.keyCode === TAB) {
-            this._emitCloseEvent();
-        }
-    };
     /**
@@ -87,34 +83,4 @@ * This emits a close event to which the trigger is subscribed. When emitted, the
     MdMenu.prototype._emitCloseEvent = function () {
-        this._focusedItemIndex = 0;
-        this.close.emit(null);
+        this.close.emit();
     };
-    MdMenu.prototype._focusNextItem = function () {
-        this._updateFocusedItemIndex(1);
-        this.items.toArray()[this._focusedItemIndex].focus();
-    };
-    MdMenu.prototype._focusPreviousItem = function () {
-        this._updateFocusedItemIndex(-1);
-        this.items.toArray()[this._focusedItemIndex].focus();
-    };
-    /**
-     * This method sets focus to the correct menu item, given a list of menu items and the delta
-     * between the currently focused menu item and the new menu item to be focused. It will
-     * continue to move down the list until it finds an item that is not disabled, and it will wrap
-     * if it encounters either end of the menu.
-     *
-     * @param delta the desired change in focus index
-     * @param menuItems the menu items that should be focused
-     * @private
-       */
-    MdMenu.prototype._updateFocusedItemIndex = function (delta, menuItems) {
-        if (menuItems === void 0) { menuItems = this.items.toArray(); }
-        // when focus would leave menu, wrap to beginning or end
-        this._focusedItemIndex = (this._focusedItemIndex + delta + this.items.length)
-            % this.items.length;
-        // skip all disabled menu items recursively until an active one
-        // is reached or the menu closes for overreaching bounds
-        while (menuItems[this._focusedItemIndex].disabled) {
-            this._updateFocusedItemIndex(delta, menuItems);
-        }
-    };
     MdMenu.prototype._setPositionX = function (pos) {
@@ -132,2 +98,12 @@ if (pos !== 'before' && pos !== 'after') {
     };
+    /**
+     * It's necessary to set position-based classes to ensure the menu panel animation
+     * folds out from the correct direction.
+     */
+    MdMenu.prototype._setPositionClasses = function () {
+        this._classList['md-menu-before'] = this.positionX == 'before';
+        this._classList['md-menu-after'] = this.positionX == 'after';
+        this._classList['md-menu-above'] = this.positionY == 'above';
+        this._classList['md-menu-below'] = this.positionY == 'below';
+    };
     __decorate([
@@ -153,5 +129,9 @@ ViewChild(TemplateRef),
             host: { 'role': 'menu' },
-            template: "<template> <div class=\"md-menu\" [ngClass]=\"_classList\" (click)=\"_emitCloseEvent()\" (keydown)=\"_handleKeydown($event)\"> <ng-content></ng-content> </div> </template> <div class=\"md-menu-click-catcher\" *ngIf=\"_showClickCatcher\" (click)=\"_emitCloseEvent()\"></div>",
-            styles: [".md-menu { box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); min-width: 112px; max-width: 280px; max-height: calc(100vh + 48px); overflow: auto; -webkit-overflow-scrolling: touch; padding-top: 8px; padding-bottom: 8px; } [md-menu-item] { cursor: pointer; user-select: none; outline: none; border: none; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; display: flex; flex-direction: row; align-items: center; height: 48px; padding: 0 16px; font-size: 16px; font-family: Roboto, \"Helvetica Neue\", sans-serif; text-align: start; text-decoration: none; } [md-menu-item][disabled] { cursor: default; } button[md-menu-item] { width: 100%; } .md-menu-click-catcher { position: fixed; top: 0; left: 0; right: 0; bottom: 0; } /*# sourceMappingURL=menu.css.map */ "],
+            template: "<template> <div class=\"md-menu-panel\" [ngClass]=\"_classList\" (keydown)=\"_keyManager.onKeydown($event)\" (click)=\"_emitCloseEvent()\" [@transformMenu]=\"'showing'\"> <div class=\"md-menu-content\" [@fadeInItems]=\"'showing'\"> <ng-content></ng-content> </div> </div> </template> ",
+            styles: ["/** The mixins below are shared between md-menu and md-select */ /** * This mixin adds the correct panel transform styles based * on the direction that the menu panel opens. */ .md-menu-panel { box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); min-width: 112px; max-width: 280px; overflow: auto; -webkit-overflow-scrolling: touch; max-height: calc(100vh + 48px); } .md-menu-panel.md-menu-after.md-menu-below { transform-origin: left top; } .md-menu-panel.md-menu-after.md-menu-above { transform-origin: left bottom; } .md-menu-panel.md-menu-before.md-menu-below { transform-origin: right top; } .md-menu-panel.md-menu-before.md-menu-above { transform-origin: right bottom; } [dir='rtl'] .md-menu-panel.md-menu-after.md-menu-below { transform-origin: right top; } [dir='rtl'] .md-menu-panel.md-menu-after.md-menu-above { transform-origin: right bottom; } [dir='rtl'] .md-menu-panel.md-menu-before.md-menu-below { transform-origin: left top; } [dir='rtl'] .md-menu-panel.md-menu-before.md-menu-above { transform-origin: left bottom; } .md-menu-content { padding-top: 8px; padding-bottom: 8px; } [md-menu-item] { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; border: none; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; display: flex; flex-direction: row; align-items: center; height: 48px; padding: 0 16px; font-size: 16px; font-family: Roboto, \"Helvetica Neue\", sans-serif; text-align: start; text-decoration: none; position: relative; } [md-menu-item][disabled] { cursor: default; } [md-menu-item] md-icon { margin-right: 16px; } [dir='rtl'] [md-menu-item] md-icon { margin-left: 16px; } button[md-menu-item] { width: 100%; } .md-menu-ripple { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /*# sourceMappingURL=menu.css.map */ "],
             encapsulation: ViewEncapsulation.None,
+            animations: [
+                transformMenu,
+                fadeInItems
+            ],
             exportAs: 'mdMenu'
@@ -158,0 +138,0 @@ }),

menu/menu-directive.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MdMenu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-menu","host":{"role":"menu"},"templateUrl":"menu.html","styleUrls":["menu.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"exportAs":"mdMenu"}]}],"members":{"templateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./menu-item","name":"MdMenuItem"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Attribute"},"arguments":["x-position"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Attribute"},"arguments":["y-position"]}]],"parameters":[{"__symbolic":"reference","module":"./menu-positions","name":"MenuPositionX"},{"__symbolic":"reference","module":"./menu-positions","name":"MenuPositionY"}]}],"classList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["class"]}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"_setClickCatcher":[{"__symbolic":"method"}],"_focusFirstItem":[{"__symbolic":"method"}],"_handleKeydown":[{"__symbolic":"method"}],"_emitCloseEvent":[{"__symbolic":"method"}],"_focusNextItem":[{"__symbolic":"method"}],"_focusPreviousItem":[{"__symbolic":"method"}],"_updateFocusedItemIndex":[{"__symbolic":"method"}],"_setPositionX":[{"__symbolic":"method"}],"_setPositionY":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"MdMenu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-menu","host":{"role":"menu"},"templateUrl":"menu.html","styleUrls":["menu.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"animations":[{"__symbolic":"reference","module":"./menu-animations","name":"transformMenu"},{"__symbolic":"reference","module":"./menu-animations","name":"fadeInItems"}],"exportAs":"mdMenu"}]}],"members":{"templateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./menu-item","name":"MdMenuItem"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Attribute"},"arguments":["x-position"]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Attribute"},"arguments":["y-position"]}]],"parameters":[{"__symbolic":"reference","module":"./menu-positions","name":"MenuPositionX"},{"__symbolic":"reference","module":"./menu-positions","name":"MenuPositionY"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"classList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["class"]}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"focusFirstItem":[{"__symbolic":"method"}],"_emitCloseEvent":[{"__symbolic":"method"}],"_setPositionX":[{"__symbolic":"method"}],"_setPositionY":[{"__symbolic":"method"}],"_setPositionClasses":[{"__symbolic":"method"}]}}}}

menu/menu-item.d.ts

 import { ElementRef, Renderer } from '@angular/core';
+import { MdFocusable } from '../core/a11y/list-key-manager';
 /**
@@ -6,3 +7,3 @@ * This directive is intended to be used inside an md-menu tag.
  */
-export declare class MdMenuItem {
+export declare class MdMenuItem implements MdFocusable {
     private _renderer;
@@ -15,6 +16,5 @@ private _elementRef;
     readonly isAriaDisabled: string;
-    /**
-     * TODO: internal
-     */
+    readonly _tabindex: string;
+    _getHostElement(): HTMLElement;
     _checkDisabled(event: Event): void;
 }

menu/menu-item.js

@@ -10,3 +10,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { Directive, ElementRef, Input, HostBinding, Renderer } from '@angular/core';
+import { Component, ElementRef, Input, HostBinding, Renderer } from '@angular/core';
 /**
@@ -37,3 +37,3 @@ * This directive is intended to be used inside an md-menu tag.
         get: function () {
-            return String(this.disabled);
+            return String(!!this.disabled);
         },
@@ -43,5 +43,12 @@ enumerable: true,
     });
-    /**
-     * TODO: internal
-     */
+    Object.defineProperty(MdMenuItem.prototype, "_tabindex", {
+        get: function () {
+            return this.disabled ? '-1' : '0';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    MdMenuItem.prototype._getHostElement = function () {
+        return this._elementRef.nativeElement;
+    };
     MdMenuItem.prototype._checkDisabled = function (event) {
@@ -63,9 +70,9 @@ if (this.disabled) {
     MdMenuItem = __decorate([
-        Directive({
-            selector: '[md-menu-item]',
+        Component({selector: '[md-menu-item]',
             host: {
                 'role': 'menuitem',
                 '(click)': '_checkDisabled($event)',
-                'tabindex': '-1'
+                '[attr.tabindex]': '_tabindex'
             },
+            template: "<ng-content></ng-content> <div class=\"md-menu-ripple\" *ngIf=\"!disabled\" md-ripple md-ripple-background-color=\"rgba(0,0,0,0)\" [md-ripple-trigger]=\"_getHostElement()\"> </div> ",
             exportAs: 'mdMenuItem'
@@ -72,0 +79,0 @@ }),

menu/menu-item.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MdMenuItem":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[md-menu-item]","host":{"role":"menuitem","(click)":"_checkDisabled($event)","tabindex":"-1"},"exportAs":"mdMenuItem"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"focus":[{"__symbolic":"method"}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.disabled"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isAriaDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-disabled"]}]}],"_checkDisabled":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"MdMenuItem":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"[md-menu-item]","host":{"role":"menuitem","(click)":"_checkDisabled($event)","[attr.tabindex]":"_tabindex"},"templateUrl":"menu-item.html","exportAs":"mdMenuItem"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"focus":[{"__symbolic":"method"}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.disabled"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isAriaDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-disabled"]}]}],"_getHostElement":[{"__symbolic":"method"}],"_checkDisabled":[{"__symbolic":"method"}]}}}}

menu/menu-trigger.d.ts

@@ -1,4 +0,4 @@
-import { ElementRef, EventEmitter, ViewContainerRef, AfterViewInit, OnDestroy, Renderer } from '@angular/core';
-import { MdMenu } from './menu-directive';
-import { Overlay } from '../core';
+import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, Renderer, ViewContainerRef } from '@angular/core';
+import { MdMenuPanel } from './menu-panel';
+import { Dir, LayoutDirection, Overlay } from '../core';
 /**
@@ -13,10 +13,12 @@ * This directive is intended to be used in conjunction with an md-menu tag.  It is
     private _renderer;
+    private _dir;
     private _portal;
     private _overlayRef;
     private _menuOpen;
-    private _openedFromKeyboard;
-    menu: MdMenu;
-    onMenuOpen: EventEmitter<{}>;
-    onMenuClose: EventEmitter<{}>;
-    constructor(_overlay: Overlay, _element: ElementRef, _viewContainerRef: ViewContainerRef, _renderer: Renderer);
+    private _backdropSubscription;
+    private _openedByMouse;
+    menu: MdMenuPanel;
+    onMenuOpen: EventEmitter<void>;
+    onMenuClose: EventEmitter<void>;
+    constructor(_overlay: Overlay, _element: ElementRef, _viewContainerRef: ViewContainerRef, _renderer: Renderer, _dir: Dir);
     ngAfterViewInit(): void;
@@ -30,3 +32,12 @@ ngOnDestroy(): void;
     focus(): void;
+    /** The text direction of the containing app. */
+    readonly dir: LayoutDirection;
     /**
+     * This method ensures that the menu closes when the overlay backdrop is clicked.
+     * We do not use first() here because doing so would not catch clicks from within
+     * the menu, and it would fail to unsubscribe properly. Instead, we unsubscribe
+     * explicitly when the menu is closed or destroyed.
+     */
+    private _subscribeToBackdrop();
+    /**
      * This method sets the menu state to open and focuses the first item if
@@ -63,3 +74,3 @@ * the menu was opened via the keyboard.
     private _getPosition();
-    _handleKeydown(event: KeyboardEvent): void;
+    _handleMousedown(event: MouseEvent): void;
 }

menu/menu-trigger.js

@@ -10,6 +10,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { Directive, ElementRef, Input, Output, EventEmitter, HostListener, ViewContainerRef, Renderer } from '@angular/core';
-import { MdMenu } from './menu-directive';
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+import { Directive, ElementRef, EventEmitter, Input, Optional, Output, Renderer, ViewContainerRef } from '@angular/core';
 import { MdMenuMissingError } from './menu-errors';
-import { ENTER, Overlay, OverlayState, TemplatePortal } from '../core';
+import { isFakeMousedownFromScreenReader, Dir, Overlay, OverlayState, TemplatePortal } from '../core';
 /**
@@ -20,3 +22,3 @@ * This directive is intended to be used in conjunction with an md-menu tag.  It is
 export var MdMenuTrigger = (function () {
-    function MdMenuTrigger(_overlay, _element, _viewContainerRef, _renderer) {
+    function MdMenuTrigger(_overlay, _element, _viewContainerRef, _renderer, _dir) {
         this._overlay = _overlay;
@@ -26,6 +28,7 @@ this._element = _element;
         this._renderer = _renderer;
+        this._dir = _dir;
         this._menuOpen = false;
         // tracking input type is necessary so it's possible to only auto-focus
         // the first item of the list when the menu is opened via the keyboard
-        this._openedFromKeyboard = false;
+        this._openedByMouse = false;
         this.onMenuOpen = new EventEmitter();
@@ -49,5 +52,8 @@ this.onMenuClose = new EventEmitter();
     MdMenuTrigger.prototype.openMenu = function () {
-        this._createOverlay();
-        this._overlayRef.attach(this._portal);
-        this._initMenu();
+        if (!this._menuOpen) {
+            this._createOverlay();
+            this._overlayRef.attach(this._portal);
+            this._subscribeToBackdrop();
+            this._initMenu();
+        }
     };
@@ -57,2 +63,3 @@ MdMenuTrigger.prototype.closeMenu = function () {
             this._overlayRef.detach();
+            this._backdropSubscription.unsubscribe();
             this._resetMenu();
@@ -65,2 +72,5 @@ }
             this._overlayRef = null;
+            if (this._backdropSubscription) {
+                this._backdropSubscription.unsubscribe();
+            }
         }
@@ -71,3 +81,23 @@ };
     };
+    Object.defineProperty(MdMenuTrigger.prototype, "dir", {
+        /** The text direction of the containing app. */
+        get: function () {
+            return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
+     * This method ensures that the menu closes when the overlay backdrop is clicked.
+     * We do not use first() here because doing so would not catch clicks from within
+     * the menu, and it would fail to unsubscribe properly. Instead, we unsubscribe
+     * explicitly when the menu is closed or destroyed.
+     */
+    MdMenuTrigger.prototype._subscribeToBackdrop = function () {
+        var _this = this;
+        this._backdropSubscription = this._overlayRef.backdropClick().subscribe(function () {
+            _this.closeMenu();
+        });
+    };
+    /**
      * This method sets the menu state to open and focuses the first item if
@@ -78,4 +108,7 @@ * the menu was opened via the keyboard.
         this._setIsMenuOpen(true);
-        if (this._openedFromKeyboard) {
-            this.menu._focusFirstItem();
+        // Should only set focus if opened via the keyboard, so keyboard users can
+        // can easily navigate menu items. According to spec, mouse users should not
+        // see the focus style.
+        if (!this._openedByMouse) {
+            this.menu.focusFirstItem();
         }
@@ -90,6 +123,8 @@ };
         this._setIsMenuOpen(false);
-        if (this._openedFromKeyboard) {
+        // Focus only needs to be reset to the host element if the menu was opened
+        // by the keyboard and manually shifted to the first menu item.
+        if (!this._openedByMouse) {
             this.focus();
-            this._openedFromKeyboard = false;
         }
+        this._openedByMouse = false;
     };
@@ -99,4 +134,3 @@ // set state rather than toggle to support triggers sharing a menu
         this._menuOpen = isOpen;
-        this.menu._setClickCatcher(isOpen);
-        this._menuOpen ? this.onMenuOpen.emit(null) : this.onMenuClose.emit(null);
+        this._menuOpen ? this.onMenuOpen.emit() : this.onMenuClose.emit();
     };
@@ -108,3 +142,3 @@ /**
     MdMenuTrigger.prototype._checkMenu = function () {
-        if (!this.menu || !(this.menu instanceof MdMenu)) {
+        if (!this.menu) {
             throw new MdMenuMissingError();
@@ -129,3 +163,7 @@ }
         var overlayState = new OverlayState();
-        overlayState.positionStrategy = this._getPosition();
+        overlayState.positionStrategy = this._getPosition()
+            .withDirection(this.dir);
+        overlayState.hasBackdrop = true;
+        overlayState.backdropClass = 'md-overlay-transparent-backdrop';
+        overlayState.direction = this.dir;
         return overlayState;
@@ -143,6 +181,5 @@ };
     };
-    // TODO: internal
-    MdMenuTrigger.prototype._handleKeydown = function (event) {
-        if (event.keyCode === ENTER) {
-            this._openedFromKeyboard = true;
+    MdMenuTrigger.prototype._handleMousedown = function (event) {
+        if (!isFakeMousedownFromScreenReader(event)) {
+            this._openedByMouse = true;
         }
@@ -152,3 +189,3 @@ };
         Input('md-menu-trigger-for'), 
-        __metadata('design:type', MdMenu)
+        __metadata('design:type', Object)
     ], MdMenuTrigger.prototype, "menu", void 0);
@@ -163,8 +200,2 @@ __decorate([
     ], MdMenuTrigger.prototype, "onMenuClose", void 0);
-    __decorate([
-        HostListener('click'), 
-        __metadata('design:type', Function), 
-        __metadata('design:paramtypes', []), 
-        __metadata('design:returntype', void 0)
-    ], MdMenuTrigger.prototype, "toggleMenu", null);
     MdMenuTrigger = __decorate([
@@ -175,7 +206,9 @@ Directive({
                 'aria-haspopup': 'true',
-                '(keydown)': '_handleKeydown($event)'
+                '(mousedown)': '_handleMousedown($event)',
+                '(click)': 'toggleMenu()',
             },
             exportAs: 'mdMenuTrigger'
-        }), 
-        __metadata('design:paramtypes', [Overlay, ElementRef, ViewContainerRef, Renderer])
+        }),
+        __param(4, Optional()), 
+        __metadata('design:paramtypes', [Overlay, ElementRef, ViewContainerRef, Renderer, Dir])
     ], MdMenuTrigger);
@@ -182,0 +215,0 @@ return MdMenuTrigger;

menu/menu-trigger.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MdMenuTrigger":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[md-menu-trigger-for]","host":{"aria-haspopup":"true","(keydown)":"_handleKeydown($event)"},"exportAs":"mdMenuTrigger"}]}],"members":{"menu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["md-menu-trigger-for"]}]}],"onMenuOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onMenuClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../core","name":"Overlay"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"toggleMenu":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click"]}]}],"openMenu":[{"__symbolic":"method"}],"closeMenu":[{"__symbolic":"method"}],"destroyMenu":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"_initMenu":[{"__symbolic":"method"}],"_resetMenu":[{"__symbolic":"method"}],"_setIsMenuOpen":[{"__symbolic":"method"}],"_checkMenu":[{"__symbolic":"method"}],"_createOverlay":[{"__symbolic":"method"}],"_getOverlayConfig":[{"__symbolic":"method"}],"_getPosition":[{"__symbolic":"method"}],"_handleKeydown":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"MdMenuTrigger":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[md-menu-trigger-for]","host":{"aria-haspopup":"true","(mousedown)":"_handleMousedown($event)","(click)":"toggleMenu()"},"exportAs":"mdMenuTrigger"}]}],"members":{"menu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["md-menu-trigger-for"]}]}],"onMenuOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onMenuClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}]],"parameters":[{"__symbolic":"reference","module":"../core","name":"Overlay"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"../core","name":"Dir"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"toggleMenu":[{"__symbolic":"method"}],"openMenu":[{"__symbolic":"method"}],"closeMenu":[{"__symbolic":"method"}],"destroyMenu":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"_subscribeToBackdrop":[{"__symbolic":"method"}],"_initMenu":[{"__symbolic":"method"}],"_resetMenu":[{"__symbolic":"method"}],"_setIsMenuOpen":[{"__symbolic":"method"}],"_checkMenu":[{"__symbolic":"method"}],"_createOverlay":[{"__symbolic":"method"}],"_getOverlayConfig":[{"__symbolic":"method"}],"_getPosition":[{"__symbolic":"method"}],"_handleMousedown":[{"__symbolic":"method"}]}}}}

menu/menu.d.ts

@@ -5,4 +5,6 @@ import { ModuleWithProviders } from '@angular/core';
 export { MdMenuTrigger } from './menu-trigger';
+export { MdMenuPanel } from './menu-panel';
+export { MenuPositionX, MenuPositionY } from './menu-positions';
 export declare class MdMenuModule {
     static forRoot(): ModuleWithProviders;
 }

menu/menu.js

@@ -16,2 +16,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { MdMenuTrigger } from './menu-trigger';
+import { MdRippleModule } from '../core/ripple/ripple';
 export { MdMenu } from './menu-directive';
@@ -31,3 +32,3 @@ export { MdMenuItem } from './menu-item';
         NgModule({
-            imports: [OverlayModule, CommonModule],
+            imports: [OverlayModule, CommonModule, MdRippleModule],
             exports: [MdMenu, MdMenuItem, MdMenuTrigger],
@@ -34,0 +35,0 @@ declarations: [MdMenu, MdMenuItem, MdMenuTrigger],

menu/menu.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MdMenuModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"../core","name":"OverlayModule"},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","module":"./menu-directive","name":"MdMenu"},{"__symbolic":"reference","module":"./menu-item","name":"MdMenuItem"},{"__symbolic":"reference","module":"./menu-trigger","name":"MdMenuTrigger"}],"declarations":[{"__symbolic":"reference","module":"./menu-directive","name":"MdMenu"},{"__symbolic":"reference","module":"./menu-item","name":"MdMenuItem"},{"__symbolic":"reference","module":"./menu-trigger","name":"MdMenuTrigger"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdMenuModule"},"providers":{"__symbolic":"reference","module":"../core","name":"OVERLAY_PROVIDERS"}}}}}},"exports":[{"from":"./menu-directive","export":["MdMenu"]},{"from":"./menu-item","export":["MdMenuItem"]},{"from":"./menu-trigger","export":["MdMenuTrigger"]}]}
+{"__symbolic":"module","version":1,"metadata":{"MdMenuModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"../core","name":"OverlayModule"},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"../core/ripple/ripple","name":"MdRippleModule"}],"exports":[{"__symbolic":"reference","module":"./menu-directive","name":"MdMenu"},{"__symbolic":"reference","module":"./menu-item","name":"MdMenuItem"},{"__symbolic":"reference","module":"./menu-trigger","name":"MdMenuTrigger"}],"declarations":[{"__symbolic":"reference","module":"./menu-directive","name":"MdMenu"},{"__symbolic":"reference","module":"./menu-item","name":"MdMenuItem"},{"__symbolic":"reference","module":"./menu-trigger","name":"MdMenuTrigger"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdMenuModule"},"providers":{"__symbolic":"reference","module":"../core","name":"OVERLAY_PROVIDERS"}}}}}},"exports":[{"from":"./menu-directive","export":["MdMenu"]},{"from":"./menu-item","export":["MdMenuItem"]},{"from":"./menu-trigger","export":["MdMenuTrigger"]},{"from":"./menu-panel","export":["MdMenuPanel"]},{"from":"./menu-positions","export":["MenuPositionX","MenuPositionY"]}]}

menu/README.md

@@ -14,23 +14,2 @@ # md-menu
 
-### Setup
-
-Import the MdMenu module.
-
-*my-app-module.ts*
-```ts
-import {MdMenuModule} from '@angular2-material/menu';
-
-@NgModule({
-  imports: [MdMenuModule.forRoot()],
-  ...
-})
-export class MyAppModule {}
-```
-
-For alpha.7, you need to include the overlay styles in your app via a `link` element. This will
-look something like
-```html
-<link href="vendor/@angular2-material/core/overlay/overlay.css" rel="stylesheet">
-```
-
 ### Simple menu
@@ -109,2 +88,30 @@
 
+### Adding an icon
+
+Menus also support displaying `md-icon` elements before the menu item text.
+
+*my-comp.html*
+```html
+<md-menu #menu="mdMenu">
+  <button md-menu-item> 
+    <md-icon> dialpad </md-icon>
+    <span> Redial </span>
+  </button>
+  <button md-menu-item disabled> 
+    <md-icon> voicemail </md-icon>
+    <span> Check voicemail </span>
+  </button>
+  <button md-menu-item> 
+    <md-icon> notifications_off </md-icon>
+    <span> Disable alerts </span>
+  </button>
+</md-menu>
+```
+
+Output:
+
+<img src="https://material.angularjs.org/material2_assets/menu/icon_menu_closed.png">
+<img src="https://material.angularjs.org/material2_assets/menu/icon_menu_open.png">
+
+
 ### Customizing menu position
@@ -111,0 +118,0 @@

module.js

@@ -11,3 +11,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { NgModule } from '@angular/core';
-import { MdLiveAnnouncer, MdRippleModule, RtlModule, PortalModule, OverlayModule } from './core/index';
+import { MdRippleModule, RtlModule, PortalModule, OverlayModule, A11yModule, StyleCompatibilityModule } from './core/index';
 import { MdButtonToggleModule } from './button-toggle/index';
@@ -60,2 +60,4 @@ import { MdButtonModule } from './button/index';
     RtlModule,
+    A11yModule,
+    StyleCompatibilityModule,
 ];
@@ -84,2 +86,3 @@ export var MaterialRootModule = (function () {
                 // These modules include providers.
+                A11yModule.forRoot(),
                 MdButtonToggleModule.forRoot(),
@@ -95,5 +98,5 @@ MdDialogModule.forRoot(),
                 OverlayModule.forRoot(),
+                StyleCompatibilityModule.forRoot(),
             ],
             exports: MATERIAL_MODULES,
-            providers: [MdLiveAnnouncer]
         }), 
@@ -100,0 +103,0 @@ __metadata('design:paramtypes', [])

module.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MaterialRootModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./button/index","name":"MdButtonModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./card/index","name":"MdCardModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./checkbox/index","name":"MdCheckboxModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./grid-list/index","name":"MdGridListModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./input/index","name":"MdInputModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./list/index","name":"MdListModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./progress-bar/index","name":"MdProgressBarModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./progress-circle/index","name":"MdProgressCircleModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./core/index","name":"MdRippleModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./select/index","name":"MdSelectModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./sidenav/index","name":"MdSidenavModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./tabs/index","name":"MdTabsModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./toolbar/index","name":"MdToolbarModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./core/index","name":"PortalModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./core/index","name":"RtlModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./button-toggle/index","name":"MdButtonToggleModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./dialog/index","name":"MdDialogModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./icon/index","name":"MdIconModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./menu/index","name":"MdMenuModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./radio/index","name":"MdRadioModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./slider/index","name":"MdSliderModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./slide-toggle/index","name":"MdSlideToggleModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./snack-bar/snack-bar","name":"MdSnackBarModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./tooltip/index","name":"MdTooltipModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./core/index","name":"OverlayModule"},"member":"forRoot"}}],"exports":[{"__symbolic":"reference","module":"./button/index","name":"MdButtonModule"},{"__symbolic":"reference","module":"./button-toggle/index","name":"MdButtonToggleModule"},{"__symbolic":"reference","module":"./card/index","name":"MdCardModule"},{"__symbolic":"reference","module":"./checkbox/index","name":"MdCheckboxModule"},{"__symbolic":"reference","module":"./dialog/index","name":"MdDialogModule"},{"__symbolic":"reference","module":"./grid-list/index","name":"MdGridListModule"},{"__symbolic":"reference","module":"./icon/index","name":"MdIconModule"},{"__symbolic":"reference","module":"./input/index","name":"MdInputModule"},{"__symbolic":"reference","module":"./list/index","name":"MdListModule"},{"__symbolic":"reference","module":"./menu/index","name":"MdMenuModule"},{"__symbolic":"reference","module":"./progress-bar/index","name":"MdProgressBarModule"},{"__symbolic":"reference","module":"./progress-circle/index","name":"MdProgressCircleModule"},{"__symbolic":"reference","module":"./radio/index","name":"MdRadioModule"},{"__symbolic":"reference","module":"./core/index","name":"MdRippleModule"},{"__symbolic":"reference","module":"./select/index","name":"MdSelectModule"},{"__symbolic":"reference","module":"./sidenav/index","name":"MdSidenavModule"},{"__symbolic":"reference","module":"./slider/index","name":"MdSliderModule"},{"__symbolic":"reference","module":"./slide-toggle/index","name":"MdSlideToggleModule"},{"__symbolic":"reference","module":"./snack-bar/snack-bar","name":"MdSnackBarModule"},{"__symbolic":"reference","module":"./tabs/index","name":"MdTabsModule"},{"__symbolic":"reference","module":"./toolbar/index","name":"MdToolbarModule"},{"__symbolic":"reference","module":"./tooltip/index","name":"MdTooltipModule"},{"__symbolic":"reference","module":"./core/index","name":"OverlayModule"},{"__symbolic":"reference","module":"./core/index","name":"PortalModule"},{"__symbolic":"reference","module":"./core/index","name":"RtlModule"}],"providers":[{"__symbolic":"reference","module":"./core/index","name":"MdLiveAnnouncer"}]}]}]},"MaterialModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"./button/index","name":"MdButtonModule"},{"__symbolic":"reference","module":"./button-toggle/index","name":"MdButtonToggleModule"},{"__symbolic":"reference","module":"./card/index","name":"MdCardModule"},{"__symbolic":"reference","module":"./checkbox/index","name":"MdCheckboxModule"},{"__symbolic":"reference","module":"./dialog/index","name":"MdDialogModule"},{"__symbolic":"reference","module":"./grid-list/index","name":"MdGridListModule"},{"__symbolic":"reference","module":"./icon/index","name":"MdIconModule"},{"__symbolic":"reference","module":"./input/index","name":"MdInputModule"},{"__symbolic":"reference","module":"./list/index","name":"MdListModule"},{"__symbolic":"reference","module":"./menu/index","name":"MdMenuModule"},{"__symbolic":"reference","module":"./progress-bar/index","name":"MdProgressBarModule"},{"__symbolic":"reference","module":"./progress-circle/index","name":"MdProgressCircleModule"},{"__symbolic":"reference","module":"./radio/index","name":"MdRadioModule"},{"__symbolic":"reference","module":"./core/index","name":"MdRippleModule"},{"__symbolic":"reference","module":"./select/index","name":"MdSelectModule"},{"__symbolic":"reference","module":"./sidenav/index","name":"MdSidenavModule"},{"__symbolic":"reference","module":"./slider/index","name":"MdSliderModule"},{"__symbolic":"reference","module":"./slide-toggle/index","name":"MdSlideToggleModule"},{"__symbolic":"reference","module":"./snack-bar/snack-bar","name":"MdSnackBarModule"},{"__symbolic":"reference","module":"./tabs/index","name":"MdTabsModule"},{"__symbolic":"reference","module":"./toolbar/index","name":"MdToolbarModule"},{"__symbolic":"reference","module":"./tooltip/index","name":"MdTooltipModule"},{"__symbolic":"reference","module":"./core/index","name":"OverlayModule"},{"__symbolic":"reference","module":"./core/index","name":"PortalModule"},{"__symbolic":"reference","module":"./core/index","name":"RtlModule"}],"exports":[{"__symbolic":"reference","module":"./button/index","name":"MdButtonModule"},{"__symbolic":"reference","module":"./button-toggle/index","name":"MdButtonToggleModule"},{"__symbolic":"reference","module":"./card/index","name":"MdCardModule"},{"__symbolic":"reference","module":"./checkbox/index","name":"MdCheckboxModule"},{"__symbolic":"reference","module":"./dialog/index","name":"MdDialogModule"},{"__symbolic":"reference","module":"./grid-list/index","name":"MdGridListModule"},{"__symbolic":"reference","module":"./icon/index","name":"MdIconModule"},{"__symbolic":"reference","module":"./input/index","name":"MdInputModule"},{"__symbolic":"reference","module":"./list/index","name":"MdListModule"},{"__symbolic":"reference","module":"./menu/index","name":"MdMenuModule"},{"__symbolic":"reference","module":"./progress-bar/index","name":"MdProgressBarModule"},{"__symbolic":"reference","module":"./progress-circle/index","name":"MdProgressCircleModule"},{"__symbolic":"reference","module":"./radio/index","name":"MdRadioModule"},{"__symbolic":"reference","module":"./core/index","name":"MdRippleModule"},{"__symbolic":"reference","module":"./select/index","name":"MdSelectModule"},{"__symbolic":"reference","module":"./sidenav/index","name":"MdSidenavModule"},{"__symbolic":"reference","module":"./slider/index","name":"MdSliderModule"},{"__symbolic":"reference","module":"./slide-toggle/index","name":"MdSlideToggleModule"},{"__symbolic":"reference","module":"./snack-bar/snack-bar","name":"MdSnackBarModule"},{"__symbolic":"reference","module":"./tabs/index","name":"MdTabsModule"},{"__symbolic":"reference","module":"./toolbar/index","name":"MdToolbarModule"},{"__symbolic":"reference","module":"./tooltip/index","name":"MdTooltipModule"},{"__symbolic":"reference","module":"./core/index","name":"OverlayModule"},{"__symbolic":"reference","module":"./core/index","name":"PortalModule"},{"__symbolic":"reference","module":"./core/index","name":"RtlModule"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MaterialRootModule"}}}}}}}
+{"__symbolic":"module","version":1,"metadata":{"MaterialRootModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./button/index","name":"MdButtonModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./card/index","name":"MdCardModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./checkbox/index","name":"MdCheckboxModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./grid-list/index","name":"MdGridListModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./input/index","name":"MdInputModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./list/index","name":"MdListModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./progress-bar/index","name":"MdProgressBarModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./progress-circle/index","name":"MdProgressCircleModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./core/index","name":"MdRippleModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./select/index","name":"MdSelectModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./sidenav/index","name":"MdSidenavModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./tabs/index","name":"MdTabsModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./toolbar/index","name":"MdToolbarModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./core/index","name":"PortalModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./core/index","name":"RtlModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./core/index","name":"A11yModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./button-toggle/index","name":"MdButtonToggleModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./dialog/index","name":"MdDialogModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./icon/index","name":"MdIconModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./menu/index","name":"MdMenuModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./radio/index","name":"MdRadioModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./slider/index","name":"MdSliderModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./slide-toggle/index","name":"MdSlideToggleModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./snack-bar/snack-bar","name":"MdSnackBarModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./tooltip/index","name":"MdTooltipModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./core/index","name":"OverlayModule"},"member":"forRoot"}},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./core/index","name":"StyleCompatibilityModule"},"member":"forRoot"}}],"exports":[{"__symbolic":"reference","module":"./button/index","name":"MdButtonModule"},{"__symbolic":"reference","module":"./button-toggle/index","name":"MdButtonToggleModule"},{"__symbolic":"reference","module":"./card/index","name":"MdCardModule"},{"__symbolic":"reference","module":"./checkbox/index","name":"MdCheckboxModule"},{"__symbolic":"reference","module":"./dialog/index","name":"MdDialogModule"},{"__symbolic":"reference","module":"./grid-list/index","name":"MdGridListModule"},{"__symbolic":"reference","module":"./icon/index","name":"MdIconModule"},{"__symbolic":"reference","module":"./input/index","name":"MdInputModule"},{"__symbolic":"reference","module":"./list/index","name":"MdListModule"},{"__symbolic":"reference","module":"./menu/index","name":"MdMenuModule"},{"__symbolic":"reference","module":"./progress-bar/index","name":"MdProgressBarModule"},{"__symbolic":"reference","module":"./progress-circle/index","name":"MdProgressCircleModule"},{"__symbolic":"reference","module":"./radio/index","name":"MdRadioModule"},{"__symbolic":"reference","module":"./core/index","name":"MdRippleModule"},{"__symbolic":"reference","module":"./select/index","name":"MdSelectModule"},{"__symbolic":"reference","module":"./sidenav/index","name":"MdSidenavModule"},{"__symbolic":"reference","module":"./slider/index","name":"MdSliderModule"},{"__symbolic":"reference","module":"./slide-toggle/index","name":"MdSlideToggleModule"},{"__symbolic":"reference","module":"./snack-bar/snack-bar","name":"MdSnackBarModule"},{"__symbolic":"reference","module":"./tabs/index","name":"MdTabsModule"},{"__symbolic":"reference","module":"./toolbar/index","name":"MdToolbarModule"},{"__symbolic":"reference","module":"./tooltip/index","name":"MdTooltipModule"},{"__symbolic":"reference","module":"./core/index","name":"OverlayModule"},{"__symbolic":"reference","module":"./core/index","name":"PortalModule"},{"__symbolic":"reference","module":"./core/index","name":"RtlModule"},{"__symbolic":"reference","module":"./core/index","name":"A11yModule"},{"__symbolic":"reference","module":"./core/index","name":"StyleCompatibilityModule"}]}]}]},"MaterialModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"./button/index","name":"MdButtonModule"},{"__symbolic":"reference","module":"./button-toggle/index","name":"MdButtonToggleModule"},{"__symbolic":"reference","module":"./card/index","name":"MdCardModule"},{"__symbolic":"reference","module":"./checkbox/index","name":"MdCheckboxModule"},{"__symbolic":"reference","module":"./dialog/index","name":"MdDialogModule"},{"__symbolic":"reference","module":"./grid-list/index","name":"MdGridListModule"},{"__symbolic":"reference","module":"./icon/index","name":"MdIconModule"},{"__symbolic":"reference","module":"./input/index","name":"MdInputModule"},{"__symbolic":"reference","module":"./list/index","name":"MdListModule"},{"__symbolic":"reference","module":"./menu/index","name":"MdMenuModule"},{"__symbolic":"reference","module":"./progress-bar/index","name":"MdProgressBarModule"},{"__symbolic":"reference","module":"./progress-circle/index","name":"MdProgressCircleModule"},{"__symbolic":"reference","module":"./radio/index","name":"MdRadioModule"},{"__symbolic":"reference","module":"./core/index","name":"MdRippleModule"},{"__symbolic":"reference","module":"./select/index","name":"MdSelectModule"},{"__symbolic":"reference","module":"./sidenav/index","name":"MdSidenavModule"},{"__symbolic":"reference","module":"./slider/index","name":"MdSliderModule"},{"__symbolic":"reference","module":"./slide-toggle/index","name":"MdSlideToggleModule"},{"__symbolic":"reference","module":"./snack-bar/snack-bar","name":"MdSnackBarModule"},{"__symbolic":"reference","module":"./tabs/index","name":"MdTabsModule"},{"__symbolic":"reference","module":"./toolbar/index","name":"MdToolbarModule"},{"__symbolic":"reference","module":"./tooltip/index","name":"MdTooltipModule"},{"__symbolic":"reference","module":"./core/index","name":"OverlayModule"},{"__symbolic":"reference","module":"./core/index","name":"PortalModule"},{"__symbolic":"reference","module":"./core/index","name":"RtlModule"},{"__symbolic":"reference","module":"./core/index","name":"A11yModule"},{"__symbolic":"reference","module":"./core/index","name":"StyleCompatibilityModule"}],"exports":[{"__symbolic":"reference","module":"./button/index","name":"MdButtonModule"},{"__symbolic":"reference","module":"./button-toggle/index","name":"MdButtonToggleModule"},{"__symbolic":"reference","module":"./card/index","name":"MdCardModule"},{"__symbolic":"reference","module":"./checkbox/index","name":"MdCheckboxModule"},{"__symbolic":"reference","module":"./dialog/index","name":"MdDialogModule"},{"__symbolic":"reference","module":"./grid-list/index","name":"MdGridListModule"},{"__symbolic":"reference","module":"./icon/index","name":"MdIconModule"},{"__symbolic":"reference","module":"./input/index","name":"MdInputModule"},{"__symbolic":"reference","module":"./list/index","name":"MdListModule"},{"__symbolic":"reference","module":"./menu/index","name":"MdMenuModule"},{"__symbolic":"reference","module":"./progress-bar/index","name":"MdProgressBarModule"},{"__symbolic":"reference","module":"./progress-circle/index","name":"MdProgressCircleModule"},{"__symbolic":"reference","module":"./radio/index","name":"MdRadioModule"},{"__symbolic":"reference","module":"./core/index","name":"MdRippleModule"},{"__symbolic":"reference","module":"./select/index","name":"MdSelectModule"},{"__symbolic":"reference","module":"./sidenav/index","name":"MdSidenavModule"},{"__symbolic":"reference","module":"./slider/index","name":"MdSliderModule"},{"__symbolic":"reference","module":"./slide-toggle/index","name":"MdSlideToggleModule"},{"__symbolic":"reference","module":"./snack-bar/snack-bar","name":"MdSnackBarModule"},{"__symbolic":"reference","module":"./tabs/index","name":"MdTabsModule"},{"__symbolic":"reference","module":"./toolbar/index","name":"MdToolbarModule"},{"__symbolic":"reference","module":"./tooltip/index","name":"MdTooltipModule"},{"__symbolic":"reference","module":"./core/index","name":"OverlayModule"},{"__symbolic":"reference","module":"./core/index","name":"PortalModule"},{"__symbolic":"reference","module":"./core/index","name":"RtlModule"},{"__symbolic":"reference","module":"./core/index","name":"A11yModule"},{"__symbolic":"reference","module":"./core/index","name":"StyleCompatibilityModule"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MaterialRootModule"}}}}}}}

package.json

 {
   "name": "@angular/material",
-  "version": "2.0.0-alpha.9",
+  "version": "2.0.0-alpha.10-experimental-3",
   "description": "Angular 2 Material",
@@ -25,3 +25,4 @@ "main": "./material.umd.js",
     "@angular/core": "^2.0.0",
-    "@angular/common": "^2.0.0"
+    "@angular/common": "^2.0.0",
+    "@angular/http": "^2.0.0"
   },
@@ -28,0 +29,0 @@ "dependencies": {

progress-bar/progress-bar.js

@@ -89,3 +89,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
             template: "<!-- The background div is named as such because it appears below the other divs and is not sized based on values. --> <div class=\"md-progress-bar-background\"></div> <div class=\"md-progress-bar-buffer\" [ngStyle]=\"_bufferTransform()\"></div> <div class=\"md-progress-bar-primary md-progress-bar-fill\" [ngStyle]=\"_primaryTransform()\"></div> <div class=\"md-progress-bar-secondary md-progress-bar-fill\"></div> ",
-            styles: [":host { display: block; height: 5px; overflow: hidden; position: relative; transform: translateZ(0); transition: opacity 250ms linear; width: 100%; } :host .md-progress-bar-background { background-repeat: repeat-x; background-size: 10px 4px; height: 100%; position: absolute; visibility: hidden; width: 100%; } :host .md-progress-bar-buffer { height: 100%; position: absolute; transform-origin: top left; transition: transform 250ms ease; width: 100%; } :host .md-progress-bar-secondary { visibility: hidden; } :host .md-progress-bar-fill { animation: none; height: 100%; position: absolute; transform-origin: top left; transition: transform 250ms ease; width: 100%; } :host .md-progress-bar-fill::after { animation: none; content: ''; display: inline-block; height: 100%; position: absolute; width: 100%; } :host[mode='query'] { transform: rotateZ(180deg); } :host[mode='indeterminate'] .md-progress-bar-fill, :host[mode='query'] .md-progress-bar-fill { transition: none; } :host[mode='indeterminate'] .md-progress-bar-primary, :host[mode='query'] .md-progress-bar-primary { animation: md-progress-bar-primary-indeterminate-translate 2000ms infinite linear; left: -145.166611%; } :host[mode='indeterminate'] .md-progress-bar-primary.md-progress-bar-fill::after, :host[mode='query'] .md-progress-bar-primary.md-progress-bar-fill::after { animation: md-progress-bar-primary-indeterminate-scale 2000ms infinite linear; } :host[mode='indeterminate'] .md-progress-bar-secondary, :host[mode='query'] .md-progress-bar-secondary { animation: md-progress-bar-secondary-indeterminate-translate 2000ms infinite linear; left: -54.888891%; visibility: visible; } :host[mode='indeterminate'] .md-progress-bar-secondary.md-progress-bar-fill::after, :host[mode='query'] .md-progress-bar-secondary.md-progress-bar-fill::after { animation: md-progress-bar-secondary-indeterminate-scale 2000ms infinite linear; } :host[mode='buffer'] .md-progress-bar-background { animation: md-progress-bar-background-scroll 250ms infinite linear; visibility: visible; } :host-context([dir='rtl']) { transform: rotateY(180deg); } @keyframes md-progress-bar-primary-indeterminate-translate { 0% { transform: translateX(0); } 20% { animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); transform: translateX(0); } 59.15% { animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); transform: translateX(83.67142%); } 100% { transform: translateX(200.61106%); } } @keyframes md-progress-bar-primary-indeterminate-scale { 0% { transform: scaleX(0.08); } 36.65% { animation-timing-function: cubic-bezier(0.33473, 0.12482, 0.78584, 1); transform: scaleX(0.08); } 69.15% { animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1); transform: scaleX(0.66148); } 100% { transform: scaleX(0.08); } } @keyframes md-progress-bar-secondary-indeterminate-translate { 0% { animation-timing-function: cubic-bezier(0.15, 0, 0.51506, 0.40969); transform: translateX(0); } 25% { animation-timing-function: cubic-bezier(0.31033, 0.28406, 0.8, 0.73371); transform: translateX(37.65191%); } 48.35% { animation-timing-function: cubic-bezier(0.4, 0.62704, 0.6, 0.90203); transform: translateX(84.38617%); } 100% { transform: translateX(160.27778%); } } @keyframes md-progress-bar-secondary-indeterminate-scale { 0% { animation-timing-function: cubic-bezier(0.15, 0, 0.51506, 0.40969); transform: scaleX(0.08); } 19.15% { animation-timing-function: cubic-bezier(0.31033, 0.28406, 0.8, 0.73371); transform: scaleX(0.4571); } 44.15% { animation-timing-function: cubic-bezier(0.4, 0.62704, 0.6, 0.90203); transform: scaleX(0.72796); } 100% { transform: scaleX(0.08); } } @keyframes md-progress-bar-background-scroll { to { transform: translateX(-10px); } } /*# sourceMappingURL=progress-bar.css.map */ "],
+            styles: [":host { display: block; height: 5px; overflow: hidden; position: relative; transform: translateZ(0); transition: opacity 250ms linear; width: 100%; } :host .md-progress-bar-background { background-repeat: repeat-x; background-size: 10px 4px; height: 100%; position: absolute; visibility: hidden; width: 100%; } :host .md-progress-bar-buffer { height: 100%; position: absolute; transform-origin: top left; transition: transform 250ms ease; width: 100%; } :host .md-progress-bar-secondary { visibility: hidden; } :host .md-progress-bar-fill { animation: none; height: 100%; position: absolute; transform-origin: top left; transition: transform 250ms ease; width: 100%; } :host .md-progress-bar-fill::after { animation: none; content: ''; display: inline-block; height: 100%; position: absolute; width: 100%; left: 0; } :host[mode='query'] { transform: rotateZ(180deg); } :host[mode='indeterminate'] .md-progress-bar-fill, :host[mode='query'] .md-progress-bar-fill { transition: none; } :host[mode='indeterminate'] .md-progress-bar-primary, :host[mode='query'] .md-progress-bar-primary { animation: md-progress-bar-primary-indeterminate-translate 2000ms infinite linear; left: -145.166611%; } :host[mode='indeterminate'] .md-progress-bar-primary.md-progress-bar-fill::after, :host[mode='query'] .md-progress-bar-primary.md-progress-bar-fill::after { animation: md-progress-bar-primary-indeterminate-scale 2000ms infinite linear; } :host[mode='indeterminate'] .md-progress-bar-secondary, :host[mode='query'] .md-progress-bar-secondary { animation: md-progress-bar-secondary-indeterminate-translate 2000ms infinite linear; left: -54.888891%; visibility: visible; } :host[mode='indeterminate'] .md-progress-bar-secondary.md-progress-bar-fill::after, :host[mode='query'] .md-progress-bar-secondary.md-progress-bar-fill::after { animation: md-progress-bar-secondary-indeterminate-scale 2000ms infinite linear; } :host[mode='buffer'] .md-progress-bar-background { animation: md-progress-bar-background-scroll 250ms infinite linear; visibility: visible; } :host-context([dir='rtl']) { transform: rotateY(180deg); } @keyframes md-progress-bar-primary-indeterminate-translate { 0% { transform: translateX(0); } 20% { animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); transform: translateX(0); } 59.15% { animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); transform: translateX(83.67142%); } 100% { transform: translateX(200.61106%); } } @keyframes md-progress-bar-primary-indeterminate-scale { 0% { transform: scaleX(0.08); } 36.65% { animation-timing-function: cubic-bezier(0.33473, 0.12482, 0.78584, 1); transform: scaleX(0.08); } 69.15% { animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1); transform: scaleX(0.66148); } 100% { transform: scaleX(0.08); } } @keyframes md-progress-bar-secondary-indeterminate-translate { 0% { animation-timing-function: cubic-bezier(0.15, 0, 0.51506, 0.40969); transform: translateX(0); } 25% { animation-timing-function: cubic-bezier(0.31033, 0.28406, 0.8, 0.73371); transform: translateX(37.65191%); } 48.35% { animation-timing-function: cubic-bezier(0.4, 0.62704, 0.6, 0.90203); transform: translateX(84.38617%); } 100% { transform: translateX(160.27778%); } } @keyframes md-progress-bar-secondary-indeterminate-scale { 0% { animation-timing-function: cubic-bezier(0.15, 0, 0.51506, 0.40969); transform: scaleX(0.08); } 19.15% { animation-timing-function: cubic-bezier(0.31033, 0.28406, 0.8, 0.73371); transform: scaleX(0.4571); } 44.15% { animation-timing-function: cubic-bezier(0.4, 0.62704, 0.6, 0.90203); transform: scaleX(0.72796); } 100% { transform: scaleX(0.08); } } @keyframes md-progress-bar-background-scroll { to { transform: translateX(-10px); } } /*# sourceMappingURL=progress-bar.css.map */ "],
             changeDetection: ChangeDetectionStrategy.OnPush,
@@ -92,0 +92,0 @@ }),

progress-circle/progress-circle.d.ts

@@ -1,2 +0,2 @@
-import { ModuleWithProviders, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { ModuleWithProviders, ChangeDetectorRef, OnDestroy, ElementRef, NgZone } from '@angular/core';
 export declare type ProgressCircleMode = 'determinate' | 'indeterminate';
@@ -8,2 +8,4 @@ /**
     private _changeDetectorRef;
+    private _ngZone;
+    private _elementRef;
     /** The id of the last requested animation. */
@@ -13,2 +15,4 @@ private _lastAnimationId;
     private _interdeterminateInterval;
+    /** The SVG <path> node that is used to draw the circle. */
+    private _path;
     /**
@@ -24,6 +28,2 @@ * Values for aria max and min are only defined as numbers when in a determinate mode.  We do this
     interdeterminateInterval: number;
-    /** The current path value, representing the progress circle. */
-    private _currentPath;
-    /** TODO: internal */
-    currentPath: string;
     /** Clean up any animations that were running. */
@@ -47,3 +47,3 @@ ngOnDestroy(): void;
     private _mode;
-    constructor(_changeDetectorRef: ChangeDetectorRef);
+    constructor(_changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _elementRef: ElementRef);
     /**
@@ -68,2 +68,7 @@ * Animates the circle from one percentage value to another.
     private _cleanupIndeterminateAnimation();
+    /**
+     * Renders the arc onto the SVG element. Proxies `getArc` while setting the proper
+     * DOM attribute on the `<path>`.
+     */
+    private _renderArc(currentValue, rotation);
 }
@@ -77,3 +82,3 @@ /**
 export declare class MdSpinner extends MdProgressCircle {
-    constructor(changeDetectorRef: ChangeDetectorRef);
+    constructor(changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, ngZone: NgZone);
 }
@@ -80,0 +85,0 @@ export declare class MdProgressCircleModule {

progress-circle/progress-circle.js

@@ -15,3 +15,3 @@ var __extends = (this && this.__extends) || function (d, b) {
 };
-import { NgModule, Component, HostBinding, ChangeDetectorRef, ChangeDetectionStrategy, Input } from '@angular/core';
+import { NgModule, Component, HostBinding, ChangeDetectorRef, ChangeDetectionStrategy, Input, ElementRef, NgZone } from '@angular/core';
 // TODO(josephperrott): Benchpress tests.
@@ -28,2 +28,4 @@ /** A single degree in radians. */
 var endIndeterminate = 80;
+/* Maximum angle for the arc. The angle can't be exactly 360, because the arc becomes hidden. */
+var MAX_ANGLE = 359.99 / 100;
 /**
@@ -33,4 +35,6 @@ * <md-progress-circle> component.
 export var MdProgressCircle = (function () {
-    function MdProgressCircle(_changeDetectorRef) {
+    function MdProgressCircle(_changeDetectorRef, _ngZone, _elementRef) {
         this._changeDetectorRef = _changeDetectorRef;
+        this._ngZone = _ngZone;
+        this._elementRef = _elementRef;
         /** The id of the last requested animation. */
@@ -72,16 +76,2 @@ this._lastAnimationId = 0;
     });
-    Object.defineProperty(MdProgressCircle.prototype, "currentPath", {
-        /** TODO: internal */
-        get: function () {
-            return this._currentPath;
-        },
-        set: function (path) {
-            this._currentPath = path;
-            // Mark for check as our ChangeDetectionStrategy is OnPush, when changes come from within the
-            // component, change detection must be called for.
-            this._changeDetectorRef.markForCheck();
-        },
-        enumerable: true,
-        configurable: true
-    });
     /** Clean up any animations that were running. */
@@ -98,3 +88,3 @@ MdProgressCircle.prototype.ngOnDestroy = function () {
         set: function (v) {
-            if (v && this.mode == 'determinate') {
+            if (v != null && this.mode == 'determinate') {
                 var newValue = clamp(v);
@@ -147,3 +137,3 @@ this._animateCircle((this.value || 0), newValue, linearEase, DURATION_DETERMINATE, 0);
         if (animateTo === animateFrom) {
-            this.currentPath = getSvgArc(animateTo, rotation);
+            this._renderArc(animateTo, rotation);
         }
@@ -153,5 +143,5 @@ else {
                 var elapsedTime = Math.max(0, Math.min(Date.now() - startTime, duration));
-                _this.currentPath = getSvgArc(ease(elapsedTime, animateFrom, changeInValue, duration), rotation);
+                _this._renderArc(ease(elapsedTime, animateFrom, changeInValue, duration), rotation);
                 // Prevent overlapping animations by checking if a new animation has been called for and
-                // if the animation has lasted long than the animation duration.
+                // if the animation has lasted longer than the animation duration.
                 if (id === _this._lastAnimationId && elapsedTime < duration) {
@@ -161,3 +151,5 @@ requestAnimationFrame(animation_1);
             };
-            requestAnimationFrame(animation_1);
+            // Run the animation outside of Angular's zone, in order to avoid
+            // hitting ZoneJS and change detection on each frame.
+            this._ngZone.runOutsideAngular(animation_1);
         }
@@ -183,4 +175,6 @@ };
         if (!this.interdeterminateInterval) {
-            this.interdeterminateInterval = setInterval(animate, duration + 50, 0, false);
-            animate();
+            this._ngZone.runOutsideAngular(function () {
+                _this.interdeterminateInterval = setInterval(animate, duration + 50, 0, false);
+                animate();
+            });
         }
@@ -194,2 +188,15 @@ };
     };
+    /**
+     * Renders the arc onto the SVG element. Proxies `getArc` while setting the proper
+     * DOM attribute on the `<path>`.
+     */
+    MdProgressCircle.prototype._renderArc = function (currentValue, rotation) {
+        // Caches the path reference so it doesn't have to be looked up every time.
+        var path = this._path = this._path || this._elementRef.nativeElement.querySelector('path');
+        // Ensure that the path was found. This may not be the case if the
+        // animation function fires too early.
+        if (path) {
+            path.setAttribute('d', getSvgArc(currentValue, rotation));
+        }
+    };
     __decorate([
@@ -212,7 +219,7 @@ Input(),
             },
-            template: "<!-- preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's center.  The center of the circle with remain at the center of the md-progress-circle element containing the SVG. --> <svg viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid meet\"> <path [attr.d]=\"currentPath\"></path> </svg> ",
-            styles: [":host { display: block; height: 100px; width: 100px; } :host svg { height: 100%; width: 100%; transform-origin: center; } :host path { fill: transparent; stroke-width: 10px; } :host[mode='indeterminate'] { animation-duration: 5250ms, 2887.5ms; animation-name: md-progress-circle-sporadic-rotate, md-progress-circle-linear-rotate; animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1), linear; animation-iteration-count: infinite; transition: none; } @keyframes md-progress-circle-linear-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes md-progress-circle-sporadic-rotate { 12.5% { transform: rotate(135deg); } 25% { transform: rotate(270deg); } 37.5% { transform: rotate(405deg); } 50% { transform: rotate(540deg); } 62.5% { transform: rotate(675deg); } 75% { transform: rotate(810deg); } 87.5% { transform: rotate(945deg); } 100% { transform: rotate(1080deg); } } /*# sourceMappingURL=progress-circle.css.map */ "],
+            template: "<!-- preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's center.  The center of the circle with remain at the center of the md-progress-circle element containing the SVG. --> <svg viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid meet\"> <path></path> </svg> ",
+            styles: [":host { display: block; height: 100px; width: 100px; overflow: hidden; } :host svg { height: 100%; width: 100%; transform-origin: center; } :host path { fill: transparent; stroke-width: 10px; } :host[mode='indeterminate'] svg { animation-duration: 5250ms, 2887.5ms; animation-name: md-progress-circle-sporadic-rotate, md-progress-circle-linear-rotate; animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1), linear; animation-iteration-count: infinite; transition: none; } @keyframes md-progress-circle-linear-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes md-progress-circle-sporadic-rotate { 12.5% { transform: rotate(135deg); } 25% { transform: rotate(270deg); } 37.5% { transform: rotate(405deg); } 50% { transform: rotate(540deg); } 62.5% { transform: rotate(675deg); } 75% { transform: rotate(810deg); } 87.5% { transform: rotate(945deg); } 100% { transform: rotate(1080deg); } } /*# sourceMappingURL=progress-circle.css.map */ "],
             changeDetection: ChangeDetectionStrategy.OnPush,
         }), 
-        __metadata('design:paramtypes', [ChangeDetectorRef])
+        __metadata('design:paramtypes', [ChangeDetectorRef, NgZone, ElementRef])
     ], MdProgressCircle);
@@ -229,4 +236,4 @@ return MdProgressCircle;
     __extends(MdSpinner, _super);
-    function MdSpinner(changeDetectorRef) {
-        _super.call(this, changeDetectorRef);
+    function MdSpinner(changeDetectorRef, elementRef, ngZone) {
+        _super.call(this, changeDetectorRef, ngZone, elementRef);
         this.mode = 'indeterminate';
@@ -240,6 +247,6 @@ }
             },
-            template: "<!-- preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's center.  The center of the circle with remain at the center of the md-progress-circle element containing the SVG. --> <svg viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid meet\"> <path [attr.d]=\"currentPath\"></path> </svg> ",
-            styles: [":host { display: block; height: 100px; width: 100px; } :host svg { height: 100%; width: 100%; transform-origin: center; } :host path { fill: transparent; stroke-width: 10px; } :host[mode='indeterminate'] { animation-duration: 5250ms, 2887.5ms; animation-name: md-progress-circle-sporadic-rotate, md-progress-circle-linear-rotate; animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1), linear; animation-iteration-count: infinite; transition: none; } @keyframes md-progress-circle-linear-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes md-progress-circle-sporadic-rotate { 12.5% { transform: rotate(135deg); } 25% { transform: rotate(270deg); } 37.5% { transform: rotate(405deg); } 50% { transform: rotate(540deg); } 62.5% { transform: rotate(675deg); } 75% { transform: rotate(810deg); } 87.5% { transform: rotate(945deg); } 100% { transform: rotate(1080deg); } } /*# sourceMappingURL=progress-circle.css.map */ "],
+            template: "<!-- preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's center.  The center of the circle with remain at the center of the md-progress-circle element containing the SVG. --> <svg viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid meet\"> <path></path> </svg> ",
+            styles: [":host { display: block; height: 100px; width: 100px; overflow: hidden; } :host svg { height: 100%; width: 100%; transform-origin: center; } :host path { fill: transparent; stroke-width: 10px; } :host[mode='indeterminate'] svg { animation-duration: 5250ms, 2887.5ms; animation-name: md-progress-circle-sporadic-rotate, md-progress-circle-linear-rotate; animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1), linear; animation-iteration-count: infinite; transition: none; } @keyframes md-progress-circle-linear-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes md-progress-circle-sporadic-rotate { 12.5% { transform: rotate(135deg); } 25% { transform: rotate(270deg); } 37.5% { transform: rotate(405deg); } 50% { transform: rotate(540deg); } 62.5% { transform: rotate(675deg); } 75% { transform: rotate(810deg); } 87.5% { transform: rotate(945deg); } 100% { transform: rotate(1080deg); } } /*# sourceMappingURL=progress-circle.css.map */ "],
         }), 
-        __metadata('design:paramtypes', [ChangeDetectorRef])
+        __metadata('design:paramtypes', [ChangeDetectorRef, ElementRef, NgZone])
     ], MdSpinner);
@@ -290,9 +297,7 @@ return MdSpinner;
 function getSvgArc(currentValue, rotation) {
-    // The angle can't be exactly 360, because the arc becomes hidden.
-    var maximumAngle = 359.99 / 100;
     var startPoint = rotation || 0;
     var radius = 50;
     var pathRadius = 40;
-    var startAngle = startPoint * maximumAngle;
-    var endAngle = currentValue * maximumAngle;
+    var startAngle = startPoint * MAX_ANGLE;
+    var endAngle = currentValue * MAX_ANGLE;
     var start = polarToCartesian(radius, pathRadius, startAngle);
@@ -299,0 +304,0 @@ var end = polarToCartesian(radius, pathRadius, endAngle + startAngle);

progress-circle/progress-circle.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MdProgressCircle":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-progress-circle","host":{"role":"progressbar","[attr.aria-valuemin]":"_ariaValueMin","[attr.aria-valuemax]":"_ariaValueMax"},"templateUrl":"progress-circle.html","styleUrls":["progress-circle.css"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"ngOnDestroy":[{"__symbolic":"method"}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-valuenow"]}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.mode"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"_animateCircle":[{"__symbolic":"method"}],"_startIndeterminateAnimation":[{"__symbolic":"method"}],"_cleanupIndeterminateAnimation":[{"__symbolic":"method"}]}},"MdSpinner":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-spinner","host":{"role":"progressbar","mode":"indeterminate"},"templateUrl":"progress-circle.html","styleUrls":["progress-circle.css"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}]}},"MdProgressCircleModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"exports":[{"__symbolic":"reference","name":"MdProgressCircle"},{"__symbolic":"reference","name":"MdSpinner"}],"declarations":[{"__symbolic":"reference","name":"MdProgressCircle"},{"__symbolic":"reference","name":"MdSpinner"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdProgressCircleModule"},"providers":[]}}}}}}
+{"__symbolic":"module","version":1,"metadata":{"MdProgressCircle":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-progress-circle","host":{"role":"progressbar","[attr.aria-valuemin]":"_ariaValueMin","[attr.aria-valuemax]":"_ariaValueMax"},"templateUrl":"progress-circle.html","styleUrls":["progress-circle.css"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"ngOnDestroy":[{"__symbolic":"method"}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-valuenow"]}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.mode"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"_animateCircle":[{"__symbolic":"method"}],"_startIndeterminateAnimation":[{"__symbolic":"method"}],"_cleanupIndeterminateAnimation":[{"__symbolic":"method"}],"_renderArc":[{"__symbolic":"method"}]}},"MdSpinner":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-spinner","host":{"role":"progressbar","mode":"indeterminate"},"templateUrl":"progress-circle.html","styleUrls":["progress-circle.css"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}]}},"MdProgressCircleModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"exports":[{"__symbolic":"reference","name":"MdProgressCircle"},{"__symbolic":"reference","name":"MdSpinner"}],"declarations":[{"__symbolic":"reference","name":"MdProgressCircle"},{"__symbolic":"reference","name":"MdSpinner"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdProgressCircleModule"},"providers":[]}}}}}}

radio/radio.d.ts

@@ -1,2 +0,2 @@
-import { AfterContentInit, EventEmitter, OnInit, QueryList, ModuleWithProviders } from '@angular/core';
+import { AfterContentInit, ElementRef, EventEmitter, OnInit, QueryList, ModuleWithProviders } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
@@ -31,3 +31,3 @@ import { MdUniqueSelectionDispatcher } from '../core';
     /** The method to be called in order to update ngModel */
-    private _controlValueAccessorChangeFn;
+    _controlValueAccessorChangeFn: (value: any) => void;
     /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
@@ -59,3 +59,3 @@ onTouched: () => any;
     /** Dispatch change event with current selection and group value. */
-    private _emitChangeEvent();
+    _emitChangeEvent(): void;
     /**
@@ -78,2 +78,3 @@ * Implemented as part of ControlValueAccessor.
 export declare class MdRadioButton implements OnInit {
+    private _elementRef;
     radioDispatcher: MdUniqueSelectionDispatcher;
@@ -95,7 +96,10 @@ _isFocused: boolean;
     private _value;
+    /** Whether the ripple effect on click should be disabled. */
+    private _disableRipple;
     /** The parent radio group. May or may not be present. */
     radioGroup: MdRadioGroup;
+    disableRipple: boolean;
     /** Event emitted when the group value changes. */
     change: EventEmitter<MdRadioChange>;
-    constructor(radioGroup: MdRadioGroup, radioDispatcher: MdUniqueSelectionDispatcher);
+    constructor(radioGroup: MdRadioGroup, _elementRef: ElementRef, radioDispatcher: MdUniqueSelectionDispatcher);
     readonly inputId: string;
@@ -112,2 +116,3 @@ checked: boolean;
     private _emitChangeEvent();
+    _isRippleDisabled(): boolean;
     /**
@@ -129,2 +134,3 @@ * We use a hidden native input field to handle changes to focus state via keyboard navigation,
     _onInputChange(event: Event): void;
+    getHostElement(): any;
 }
@@ -131,0 +137,0 @@ export declare class MdRadioModule {

radio/radio.js

@@ -13,5 +13,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { Component, ContentChildren, Directive, EventEmitter, HostBinding, Input, Optional, Output, QueryList, ViewEncapsulation, forwardRef, NgModule } from '@angular/core';
+import { Component, ContentChildren, Directive, ElementRef, EventEmitter, HostBinding, Input, Optional, Output, QueryList, ViewEncapsulation, forwardRef, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { MdUniqueSelectionDispatcher } from '../core';
+import { MdRippleModule, MdUniqueSelectionDispatcher } from '../core';
+import { coerceBooleanProperty } from '../core/coersion/boolean-property';
 /**
@@ -97,6 +99,2 @@ * Provider Expression that allows md-radio-group to register as a ControlValueAccessor. This
                 this._updateSelectedRadioFromValue();
-                // Only fire a change event if this isn't the first time the value is ever set.
-                if (this._isInitialized) {
-                    this._emitChangeEvent();
-                }
             }
@@ -167,7 +165,8 @@ },
     MdRadioGroup.prototype._emitChangeEvent = function () {
-        var event = new MdRadioChange();
-        event.source = this._selected;
-        event.value = this._value;
-        this._controlValueAccessorChangeFn(event.value);
-        this.change.emit(event);
+        if (this._isInitialized) {
+            var event_1 = new MdRadioChange();
+            event_1.source = this._selected;
+            event_1.value = this._value;
+            this.change.emit(event_1);
+        }
     };
@@ -236,6 +235,7 @@ /**
 export var MdRadioButton = (function () {
-    function MdRadioButton(radioGroup, radioDispatcher) {
+    function MdRadioButton(radioGroup, _elementRef, radioDispatcher) {
         // Assertions. Ideally these should be stripped out by the compiler.
         // TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
         var _this = this;
+        this._elementRef = _elementRef;
         this.radioDispatcher = radioDispatcher;
@@ -257,2 +257,8 @@ /** Whether this radio is checked. */
     }
+    Object.defineProperty(MdRadioButton.prototype, "disableRipple", {
+        get: function () { return this._disableRipple; },
+        set: function (value) { this._disableRipple = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(MdRadioButton.prototype, "inputId", {
@@ -270,2 +276,11 @@ get: function () {
         set: function (newCheckedState) {
+            this._checked = newCheckedState;
+            if (newCheckedState && this.radioGroup && this.radioGroup.value != this.value) {
+                this.radioGroup.selected = this;
+            }
+            else if (!newCheckedState && this.radioGroup && this.radioGroup.value == this.value) {
+                // When unchecking the selected radio button, update the selected radio
+                // property on the group.
+                this.radioGroup.selected = null;
+            }
             if (newCheckedState) {
@@ -275,6 +290,2 @@ // Notify all radio buttons with the same name to un-check.
             }
-            this._checked = newCheckedState;
-            if (newCheckedState && this.radioGroup && this.radioGroup.value != this.value) {
-                this.radioGroup.selected = this;
-            }
         },
@@ -337,2 +348,5 @@ enumerable: true,
     };
+    MdRadioButton.prototype._isRippleDisabled = function () {
+        return this.disableRipple || this.disabled;
+    };
     /**
@@ -374,8 +388,16 @@ * We use a hidden native input field to handle changes to focus state via keyboard navigation,
         event.stopPropagation();
+        var groupValueChanged = this.radioGroup && this.value != this.radioGroup.value;
         this.checked = true;
         this._emitChangeEvent();
         if (this.radioGroup) {
+            this.radioGroup._controlValueAccessorChangeFn(this.value);
             this.radioGroup._touch();
+            if (groupValueChanged) {
+                this.radioGroup._emitChangeEvent();
+            }
         }
     };
+    MdRadioButton.prototype.getHostElement = function () {
+        return this._elementRef.nativeElement;
+    };
     __decorate([
@@ -403,2 +425,6 @@ HostBinding('class.md-radio-focused'),
     __decorate([
+        Input(), 
+        __metadata('design:type', Boolean)
+    ], MdRadioButton.prototype, "disableRipple", null);
+    __decorate([
         Output(), 
@@ -427,8 +453,8 @@ __metadata('design:type', EventEmitter)
         Component({selector: 'md-radio-button',
-            template: "<!-- TODO(jelbourn): render the radio on either side of the content --> <!-- TODO(mtlin): Evaluate trade-offs of using native radio vs. cost of additional bindings. --> <label [attr.for]=\"inputId\" class=\"md-radio-label\"> <!-- The actual 'radio' part of the control. --> <div class=\"md-radio-container\"> <div class=\"md-radio-outer-circle\"></div> <div class=\"md-radio-inner-circle\"></div> <div class=\"md-ink-ripple\"></div> </div> <input #input class=\"md-radio-input md-visually-hidden\" type=\"radio\" [id]=\"inputId\" [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (change)=\"_onInputChange($event)\" (focus)=\"_onInputFocus()\" (blur)=\"_onInputBlur()\" (click)=\"_onInputClick($event)\"> <!-- The label content for radio control. --> <div class=\"md-radio-label-content\" [class.md-radio-align-end]=\"align == 'end'\"> <ng-content></ng-content> </div> </label> ",
-            styles: ["md-radio-button { display: inline-block; } .md-radio-label { cursor: pointer; display: inline-flex; align-items: baseline; white-space: nowrap; } .md-radio-container { box-sizing: border-box; display: inline-block; height: 20px; position: relative; width: 20px; top: 2px; } .md-radio-outer-circle { border: solid 2px; border-radius: 50%; box-sizing: border-box; height: 20px; left: 0; position: absolute; top: 0; transition: border-color ease 280ms; width: 20px; } .md-radio-inner-circle { border-radius: 50%; box-sizing: border-box; height: 20px; left: 0; position: absolute; top: 0; transition: transform ease 280ms, background-color ease 280ms; transform: scale(0); width: 20px; } .md-radio-checked .md-radio-inner-circle { transform: scale(0.5); } .md-radio-label-content { display: inline-block; order: 0; line-height: inherit; padding-left: 8px; padding-right: 0; } [dir='rtl'] .md-radio-label-content { padding-right: 8px; padding-left: 0; } .md-radio-label-content.md-radio-align-end { order: -1; padding-left: 0; padding-right: 8px; } [dir='rtl'] .md-radio-label-content.md-radio-align-end { padding-right: 0; padding-left: 8px; } .md-radio-disabled, .md-radio-disabled .md-radio-label { cursor: default; } .md-ink-ripple { border-radius: 50%; opacity: 0; height: 48px; left: 50%; overflow: hidden; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: opacity ease 280ms, background-color ease 280ms; width: 48px; } .md-radio-focused .md-ink-ripple { opacity: 1; } .md-radio-disabled .md-ink-ripple { background-color: #000; } /*# sourceMappingURL=radio.css.map */ "],
+            template: "<!-- TODO(jelbourn): render the radio on either side of the content --> <!-- TODO(mtlin): Evaluate trade-offs of using native radio vs. cost of additional bindings. --> <label [attr.for]=\"inputId\" class=\"md-radio-label\"> <!-- The actual 'radio' part of the control. --> <div class=\"md-radio-container\"> <div class=\"md-radio-outer-circle\"></div> <div class=\"md-radio-inner-circle\"></div> <div md-ripple *ngIf=\"!_isRippleDisabled()\" class=\"md-radio-ripple\" [md-ripple-trigger]=\"getHostElement()\" [md-ripple-centered]=\"true\" [md-ripple-speed-factor]=\"0.3\" md-ripple-background-color=\"rgba(0, 0, 0, 0)\"></div> </div> <input #input class=\"md-radio-input md-visually-hidden\" type=\"radio\" [id]=\"inputId\" [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (change)=\"_onInputChange($event)\" (focus)=\"_onInputFocus()\" (blur)=\"_onInputBlur()\" (click)=\"_onInputClick($event)\"> <!-- The label content for radio control. --> <div class=\"md-radio-label-content\" [class.md-radio-align-end]=\"align == 'end'\"> <ng-content></ng-content> </div> </label> ",
+            styles: ["md-radio-button { display: inline-block; } .md-radio-label { cursor: pointer; display: inline-flex; align-items: baseline; white-space: nowrap; } .md-radio-container { box-sizing: border-box; display: inline-block; height: 20px; position: relative; width: 20px; top: 2px; } .md-radio-outer-circle { border: solid 2px; border-radius: 50%; box-sizing: border-box; height: 20px; left: 0; position: absolute; top: 0; transition: border-color ease 280ms; width: 20px; } .md-radio-inner-circle { border-radius: 50%; box-sizing: border-box; height: 20px; left: 0; position: absolute; top: 0; transition: transform ease 280ms, background-color ease 280ms; transform: scale(0); width: 20px; } .md-radio-checked .md-radio-inner-circle { transform: scale(0.5); } .md-radio-label-content { display: inline-block; order: 0; line-height: inherit; padding-left: 8px; padding-right: 0; } [dir='rtl'] .md-radio-label-content { padding-right: 8px; padding-left: 0; } .md-radio-label-content.md-radio-align-end { order: -1; padding-left: 0; padding-right: 8px; } [dir='rtl'] .md-radio-label-content.md-radio-align-end { padding-right: 0; padding-left: 8px; } .md-radio-disabled, .md-radio-disabled .md-radio-label { cursor: default; } .md-radio-ripple { position: absolute; left: -15px; top: -15px; right: -15px; bottom: -15px; border-radius: 50%; z-index: 1; pointer-events: none; } /*# sourceMappingURL=radio.css.map */ "],
             encapsulation: ViewEncapsulation.None
         }),
         __param(0, Optional()), 
-        __metadata('design:paramtypes', [MdRadioGroup, MdUniqueSelectionDispatcher])
+        __metadata('design:paramtypes', [MdRadioGroup, ElementRef, MdUniqueSelectionDispatcher])
     ], MdRadioButton);
@@ -448,2 +474,3 @@ return MdRadioButton;
         NgModule({
+            imports: [CommonModule, MdRippleModule],
             exports: [MdRadioGroup, MdRadioButton],
@@ -450,0 +477,0 @@ declarations: [MdRadioGroup, MdRadioButton],

radio/radio.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MdRadioGroup"},"multi":true},"MdRadioGroup":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"md-radio-group","providers":[{"__symbolic":"reference","name":"MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR"}],"host":{"role":"radiogroup"}}]}],"members":{"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"_radios":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"MdRadioButton"}]}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"_touch":[{"__symbolic":"method"}],"_updateRadioButtonNames":[{"__symbolic":"method"}],"_updateSelectedRadioFromValue":[{"__symbolic":"method"}],"_emitChangeEvent":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}]}},"MdRadioButton":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-radio-button","templateUrl":"radio.html","styleUrls":["radio.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"_isFocused":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-radio-focused"]}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["id"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["aria-label"]}]}],"ariaLabelledby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["aria-labelledby"]}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}],null],"parameters":[{"__symbolic":"reference","name":"MdRadioGroup"},{"__symbolic":"reference","module":"../core","name":"MdUniqueSelectionDispatcher"}]}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-radio-checked"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-radio-disabled"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngOnInit":[{"__symbolic":"method"}],"_emitChangeEvent":[{"__symbolic":"method"}],"_onInputFocus":[{"__symbolic":"method"}],"_onInputBlur":[{"__symbolic":"method"}],"_onInputClick":[{"__symbolic":"method"}],"_onInputChange":[{"__symbolic":"method"}]}},"MdRadioModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"exports":[{"__symbolic":"reference","name":"MdRadioGroup"},{"__symbolic":"reference","name":"MdRadioButton"}],"declarations":[{"__symbolic":"reference","name":"MdRadioGroup"},{"__symbolic":"reference","name":"MdRadioButton"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdRadioModule"},"providers":[{"__symbolic":"reference","module":"../core","name":"MdUniqueSelectionDispatcher"}]}}}}}}
+{"__symbolic":"module","version":1,"metadata":{"MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MdRadioGroup"},"multi":true},"MdRadioGroup":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"md-radio-group","providers":[{"__symbolic":"reference","name":"MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR"}],"host":{"role":"radiogroup"}}]}],"members":{"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"_radios":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"MdRadioButton"}]}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"_touch":[{"__symbolic":"method"}],"_updateRadioButtonNames":[{"__symbolic":"method"}],"_updateSelectedRadioFromValue":[{"__symbolic":"method"}],"_emitChangeEvent":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}]}},"MdRadioButton":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-radio-button","templateUrl":"radio.html","styleUrls":["radio.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"_isFocused":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-radio-focused"]}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["id"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["aria-label"]}]}],"ariaLabelledby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["aria-labelledby"]}]}],"disableRipple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}],null,null],"parameters":[{"__symbolic":"reference","name":"MdRadioGroup"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"../core","name":"MdUniqueSelectionDispatcher"}]}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-radio-checked"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-radio-disabled"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngOnInit":[{"__symbolic":"method"}],"_emitChangeEvent":[{"__symbolic":"method"}],"_isRippleDisabled":[{"__symbolic":"method"}],"_onInputFocus":[{"__symbolic":"method"}],"_onInputBlur":[{"__symbolic":"method"}],"_onInputClick":[{"__symbolic":"method"}],"_onInputChange":[{"__symbolic":"method"}],"getHostElement":[{"__symbolic":"method"}]}},"MdRadioModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"../core","name":"MdRippleModule"}],"exports":[{"__symbolic":"reference","name":"MdRadioGroup"},{"__symbolic":"reference","name":"MdRadioButton"}],"declarations":[{"__symbolic":"reference","name":"MdRadioGroup"},{"__symbolic":"reference","name":"MdRadioButton"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdRadioModule"},"providers":[{"__symbolic":"reference","module":"../core","name":"MdUniqueSelectionDispatcher"}]}}}}}}

radio/README.md

@@ -6,17 +6,2 @@ # MdRadio
 
-### Setup
-Importing the symbols:
-```ts
-import { MdRadioModule } from '@angular2-material/radio';
-```
-
-Adding providers and directives:
-```ts
-@NgModule({
-  imports: [MdRadioModule.forRoot()],
-  ...
-})
-export class MyAppModule { }
-```
-
 ### Examples
@@ -23,0 +8,0 @@ A basic radio group would have the following markup.

README.md

 # Material Design for Angular 2
-[![NPM Version](https://badge.fury.io/js/%40angular2-material%2Fcore.svg)](https://www.npmjs.com/package/%2540angular2-material%2Fcore)
+[![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)
@@ -31,9 +31,11 @@ [![Gitter](https://badges.gitter.im/angular/material2.svg)](https://gitter.im/angular/material2?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 
-High level items planned for September 2016:
-* Work on Angular core towards 2.0.0 final
-* Preparing for conferences (Angular Connect and ng-europe)
-* Final features for dialog
-* Initial version of snackbar.
-* Additional behaviors for menu, start design for select.
-* Finalize high-level design details for data-table.
+High level items planned for November 2016:
+* Initial version of md-select
+* Continued bug bashing
+* Initial versions of autocomplete and chips
+* AoT compile e2e app
+* Continue work on https://material.angular.io site
+* Major refactoring for md-input
+* Tabs animations
+* Expanding e2e test coverage
 
@@ -64,13 +66,13 @@
 | ripples          |  Available, but needs to be applied | [README][19] |   [#108][0108] |
-| dialog           |  Started, not yet ready for release |           -  |   [#114][0114] |
-| snackbar / toast |                    Proof-of-concept |           -  |   [#115][0115] |
+| dialog           |  Started, not yet ready for release | [README][22] |   [#114][0114] |
+| snackbar / toast | Initial version, needs enhancements | [README][21] |   [#115][0115] |
 | select           |                      Design started |           -  |   [#118][0118] |
-| textarea         |                         Not started |           -  |   [#546][0546] |
-| autocomplete     |                         Not started |           -  |   [#117][0117] |
-| chips            |                         Not started |           -  |   [#120][0120] |
-| theming          | In master, not released, some bugs  | [Guide][20]  |   [#123][0123] |
+| textarea         |                             Started |           -  |   [#546][0546] |
+| autocomplete     |                      Design started |           -  |   [#117][0117] |
+| chips            |                      Design started |           -  |   [#120][0120] |
+| theming          | Initial version, needs enhancements | [Guide][20]  |              - |
 | prod build       |                         Not started |           -  |              - |
 | docs site        |   UX design and tooling in progress |           -  |              - |
 | typography       |                         Not started |           -  |   [#205][0205] |
-| layout           |                         Not started |           -  |              - |
+| layout           |      Design in-progress, prototyped |           -  |              - |
 | fab speed-dial   |                         Not started |           -  |   [#860][0860] |
@@ -105,2 +107,4 @@ | fab toolbar      |                         Not started |           -  |              - |
 [20]: https://github.com/angular/material2/blob/master/docs/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
 
@@ -107,0 +111,0 @@ [0107]: https://github.com/angular/material2/issues/107

select/index.js

@@ -11,3 +11,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { MdSelect } from './select';
+import { MdOption } from './option';
+import { OverlayModule } from '../core/overlay/overlay-directives';
+import { MdRippleModule } from '../core/ripple/ripple';
+import { OVERLAY_PROVIDERS } from '../core/overlay/overlay';
 export * from './select';
@@ -20,3 +25,3 @@ export var MdSelectModule = (function () {
             ngModule: MdSelectModule,
-            providers: []
+            providers: [OVERLAY_PROVIDERS]
         };
@@ -26,5 +31,5 @@ };
         NgModule({
-            imports: [],
-            exports: [MdSelect],
-            declarations: [MdSelect],
+            imports: [CommonModule, OverlayModule, MdRippleModule],
+            exports: [MdSelect, MdOption],
+            declarations: [MdSelect, MdOption],
         }), 
@@ -31,0 +36,0 @@ __metadata('design:paramtypes', [])

select/index.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MdSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[],"exports":[{"__symbolic":"reference","module":"./select","name":"MdSelect"}],"declarations":[{"__symbolic":"reference","module":"./select","name":"MdSelect"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdSelectModule"},"providers":[]}}}}},"exports":[{"from":"./select"}]}
+{"__symbolic":"module","version":1,"metadata":{"MdSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"../core/overlay/overlay-directives","name":"OverlayModule"},{"__symbolic":"reference","module":"../core/ripple/ripple","name":"MdRippleModule"}],"exports":[{"__symbolic":"reference","module":"./select","name":"MdSelect"},{"__symbolic":"reference","module":"./option","name":"MdOption"}],"declarations":[{"__symbolic":"reference","module":"./select","name":"MdSelect"},{"__symbolic":"reference","module":"./option","name":"MdOption"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdSelectModule"},"providers":[{"__symbolic":"reference","module":"../core/overlay/overlay","name":"OVERLAY_PROVIDERS"}]}}}}},"exports":[{"from":"./select"}]}

select/select.d.ts

@@ -1,2 +0,114 @@
-export declare class MdSelect {
+import { AfterContentInit, ElementRef, EventEmitter, OnDestroy, QueryList, Renderer } from '@angular/core';
+import { MdOption } from './option';
+import { ListKeyManager } from '../core/a11y/list-key-manager';
+import { Dir } from '../core/rtl/dir';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+export declare class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestroy {
+    private _element;
+    private _renderer;
+    private _dir;
+    _control: NgControl;
+    /** Whether or not the overlay panel is open. */
+    private _panelOpen;
+    /** The currently selected option. */
+    private _selected;
+    /** Subscriptions to option events. */
+    private _subscriptions;
+    /** Subscription to changes in the option list. */
+    private _changeSubscription;
+    /** Subscription to tab events while overlay is focused. */
+    private _tabSubscription;
+    /** Whether filling out the select is required in the form.  */
+    private _required;
+    /** Manages keyboard events for options in the panel. */
+    _keyManager: ListKeyManager;
+    /** View -> model callback called when value changes */
+    _onChange: (value: any) => void;
+    /** View -> model callback called when select has been touched */
+    _onTouched: Function;
+    /** This position config ensures that the top left corner of the overlay
+     * is aligned with with the top left of the origin (overlapping the trigger
+     * completely). In RTL mode, the top right corners are aligned instead.
+     */
+    _positions: {
+        originX: string;
+        originY: string;
+        overlayX: string;
+        overlayY: string;
+    }[];
+    trigger: ElementRef;
+    options: QueryList<MdOption>;
+    placeholder: string;
+    required: any;
+    onOpen: EventEmitter<{}>;
+    onClose: EventEmitter<{}>;
+    constructor(_element: ElementRef, _renderer: Renderer, _dir: Dir, _control: NgControl);
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    /** Toggles the overlay panel open or closed. */
+    toggle(): void;
+    /** Opens the overlay panel. */
+    open(): void;
+    /** Closes the overlay panel and focuses the host element. */
+    close(): void;
+    /**
+     * Sets the select's value. Part of the ControlValueAccessor interface
+     * required to integrate with Angular's core forms API.
+     */
+    writeValue(value: any): void;
+    /**
+     * Saves a callback function to be invoked when the select's value
+     * changes from user input. Part of the ControlValueAccessor interface
+     * required to integrate with Angular's core forms API.
+     */
+    registerOnChange(fn: (value: any) => void): void;
+    /**
+     * Saves a callback function to be invoked when the select is blurred
+     * by the user. Part of the ControlValueAccessor interface required
+     * to integrate with Angular's core forms API.
+     */
+    registerOnTouched(fn: Function): void;
+    /** Whether or not the overlay panel is open. */
+    readonly panelOpen: boolean;
+    /** The currently selected option. */
+    readonly selected: MdOption;
+    _isRtl(): boolean;
+    /** The width of the trigger element. This is necessary to match
+     * the overlay width to the trigger width.
+     */
+    _getWidth(): number;
+    /** The animation state of the placeholder. */
+    _getPlaceholderState(): string;
+    /** The animation state of the overlay panel. */
+    _getPanelState(): string;
+    /** Ensures the panel opens if activated by the keyboard. */
+    _handleKeydown(event: KeyboardEvent): void;
+    /**
+     * When the panel is finished animating, emits an event and focuses
+     * an option if the panel is open.
+     */
+    _onPanelDone(): void;
+    /**
+     * Calls the touched callback only if the panel is closed. Otherwise, the trigger will
+     * "blur" to the panel when it opens, causing a false positive.
+     */
+    _onBlur(): void;
+    /** Sets up a key manager to listen to keyboard events on the overlay panel. */
+    private _initKeyManager();
+    /** Listens to selection events on each option. */
+    private _listenToOptions();
+    /** Unsubscribes from all option subscriptions. */
+    private _dropSubscriptions();
+    /** When a new option is selected, deselects the others and closes the panel. */
+    private _onSelect(option);
+    /** Deselect each option that doesn't match the current selection. */
+    private _updateOptions();
+    /** Focuses the selected item. If no option is selected, it will focus
+     * the first item instead.
+     */
+    private _focusCorrectOption();
+    /** Focuses the host element when the panel closes. */
+    private _focusHost();
+    /** Gets the index of the provided option in the option list. */
+    private _getOptionIndex(option);
 }

select/select.js

@@ -10,13 +10,284 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { Component, ViewEncapsulation } from '@angular/core';
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+import { Component, ContentChildren, ElementRef, EventEmitter, Input, Optional, Output, QueryList, Renderer, ViewEncapsulation, ViewChild } from '@angular/core';
+import { MdOption } from './option';
+import { ENTER, SPACE } from '../core/keyboard/keycodes';
+import { ListKeyManager } from '../core/a11y/list-key-manager';
+import { Dir } from '../core/rtl/dir';
+import { transformPlaceholder, transformPanel, fadeInContent } from './select-animations';
+import { NgControl } from '@angular/forms';
+import { coerceBooleanProperty } from '../core/coersion/boolean-property';
 export var MdSelect = (function () {
-    function MdSelect() {
+    function MdSelect(_element, _renderer, _dir, _control) {
+        this._element = _element;
+        this._renderer = _renderer;
+        this._dir = _dir;
+        this._control = _control;
+        /** Whether or not the overlay panel is open. */
+        this._panelOpen = false;
+        /** Subscriptions to option events. */
+        this._subscriptions = [];
+        /** Whether filling out the select is required in the form.  */
+        this._required = false;
+        /** This position config ensures that the top left corner of the overlay
+         * is aligned with with the top left of the origin (overlapping the trigger
+         * completely). In RTL mode, the top right corners are aligned instead.
+         */
+        this._positions = [{
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'top'
+            }];
+        this.onOpen = new EventEmitter();
+        this.onClose = new EventEmitter();
+        this._control.valueAccessor = this;
     }
+    Object.defineProperty(MdSelect.prototype, "required", {
+        get: function () {
+            return this._required;
+        },
+        set: function (value) {
+            this._required = coerceBooleanProperty(value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    MdSelect.prototype.ngAfterContentInit = function () {
+        var _this = this;
+        this._initKeyManager();
+        this._listenToOptions();
+        this._changeSubscription = this.options.changes.subscribe(function () {
+            _this._dropSubscriptions();
+            _this._listenToOptions();
+        });
+    };
+    MdSelect.prototype.ngOnDestroy = function () {
+        this._dropSubscriptions();
+        this._changeSubscription.unsubscribe();
+        this._tabSubscription.unsubscribe();
+    };
+    /** Toggles the overlay panel open or closed. */
+    MdSelect.prototype.toggle = function () {
+        this.panelOpen ? this.close() : this.open();
+    };
+    /** Opens the overlay panel. */
+    MdSelect.prototype.open = function () {
+        this._panelOpen = true;
+    };
+    /** Closes the overlay panel and focuses the host element. */
+    MdSelect.prototype.close = function () {
+        this._panelOpen = false;
+        this._focusHost();
+    };
+    /**
+     * Sets the select's value. Part of the ControlValueAccessor interface
+     * required to integrate with Angular's core forms API.
+     */
+    MdSelect.prototype.writeValue = function (value) {
+        if (!this.options) {
+            return;
+        }
+        this.options.forEach(function (option) {
+            if (option.value === value) {
+                option.select();
+            }
+        });
+    };
+    /**
+     * Saves a callback function to be invoked when the select's value
+     * changes from user input. Part of the ControlValueAccessor interface
+     * required to integrate with Angular's core forms API.
+     */
+    MdSelect.prototype.registerOnChange = function (fn) {
+        this._onChange = fn;
+    };
+    /**
+     * Saves a callback function to be invoked when the select is blurred
+     * by the user. Part of the ControlValueAccessor interface required
+     * to integrate with Angular's core forms API.
+     */
+    MdSelect.prototype.registerOnTouched = function (fn) {
+        this._onTouched = fn;
+    };
+    Object.defineProperty(MdSelect.prototype, "panelOpen", {
+        /** Whether or not the overlay panel is open. */
+        get: function () {
+            return this._panelOpen;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdSelect.prototype, "selected", {
+        /** The currently selected option. */
+        get: function () {
+            return this._selected;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    MdSelect.prototype._isRtl = function () {
+        return this._dir ? this._dir.value === 'rtl' : false;
+    };
+    /** The width of the trigger element. This is necessary to match
+     * the overlay width to the trigger width.
+     */
+    MdSelect.prototype._getWidth = function () {
+        return this.trigger.nativeElement.getBoundingClientRect().width;
+    };
+    /** The animation state of the placeholder. */
+    MdSelect.prototype._getPlaceholderState = function () {
+        if (this.panelOpen || this.selected) {
+            return this._isRtl() ? 'floating-rtl' : 'floating-ltr';
+        }
+        else {
+            return 'normal';
+        }
+    };
+    /** The animation state of the overlay panel. */
+    MdSelect.prototype._getPanelState = function () {
+        return this._isRtl() ? 'showing-rtl' : 'showing-ltr';
+    };
+    /** Ensures the panel opens if activated by the keyboard. */
+    MdSelect.prototype._handleKeydown = function (event) {
+        if (event.keyCode === ENTER || event.keyCode === SPACE) {
+            this.open();
+        }
+    };
+    /**
+     * When the panel is finished animating, emits an event and focuses
+     * an option if the panel is open.
+     */
+    MdSelect.prototype._onPanelDone = function () {
+        if (this.panelOpen) {
+            this._focusCorrectOption();
+            this.onOpen.emit();
+        }
+        else {
+            this.onClose.emit();
+        }
+    };
+    /**
+     * Calls the touched callback only if the panel is closed. Otherwise, the trigger will
+     * "blur" to the panel when it opens, causing a false positive.
+     */
+    MdSelect.prototype._onBlur = function () {
+        if (!this.panelOpen) {
+            this._onTouched();
+        }
+    };
+    /** Sets up a key manager to listen to keyboard events on the overlay panel. */
+    MdSelect.prototype._initKeyManager = function () {
+        var _this = this;
+        this._keyManager = new ListKeyManager(this.options);
+        this._tabSubscription = this._keyManager.tabOut.subscribe(function () {
+            _this.close();
+        });
+    };
+    /** Listens to selection events on each option. */
+    MdSelect.prototype._listenToOptions = function () {
+        var _this = this;
+        this.options.forEach(function (option) {
+            var sub = option.onSelect.subscribe(function (isUserInput) {
+                if (isUserInput) {
+                    _this._onChange(option.value);
+                }
+                _this._onSelect(option);
+            });
+            _this._subscriptions.push(sub);
+        });
+    };
+    /** Unsubscribes from all option subscriptions. */
+    MdSelect.prototype._dropSubscriptions = function () {
+        this._subscriptions.forEach(function (sub) { return sub.unsubscribe(); });
+        this._subscriptions = [];
+    };
+    /** When a new option is selected, deselects the others and closes the panel. */
+    MdSelect.prototype._onSelect = function (option) {
+        this._selected = option;
+        this._updateOptions();
+        this.close();
+    };
+    /** Deselect each option that doesn't match the current selection. */
+    MdSelect.prototype._updateOptions = function () {
+        var _this = this;
+        this.options.forEach(function (option) {
+            if (option !== _this.selected) {
+                option.deselect();
+            }
+        });
+    };
+    /** Focuses the selected item. If no option is selected, it will focus
+     * the first item instead.
+     */
+    MdSelect.prototype._focusCorrectOption = function () {
+        if (this.selected) {
+            this._keyManager.focusedItemIndex = this._getOptionIndex(this.selected);
+            this.selected.focus();
+        }
+        else {
+            this._keyManager.focusedItemIndex = 0;
+            this.options.first.focus();
+        }
+    };
+    /** Focuses the host element when the panel closes. */
+    MdSelect.prototype._focusHost = function () {
+        this._renderer.invokeElementMethod(this._element.nativeElement, 'focus');
+    };
+    /** Gets the index of the provided option in the option list. */
+    MdSelect.prototype._getOptionIndex = function (option) {
+        return this.options.reduce(function (result, current, index) {
+            return result === undefined ? (option === current ? index : undefined) : result;
+        }, undefined);
+    };
+    __decorate([
+        ViewChild('trigger'), 
+        __metadata('design:type', ElementRef)
+    ], MdSelect.prototype, "trigger", void 0);
+    __decorate([
+        ContentChildren(MdOption), 
+        __metadata('design:type', QueryList)
+    ], MdSelect.prototype, "options", void 0);
+    __decorate([
+        Input(), 
+        __metadata('design:type', String)
+    ], MdSelect.prototype, "placeholder", void 0);
+    __decorate([
+        Input(), 
+        __metadata('design:type', Object)
+    ], MdSelect.prototype, "required", null);
+    __decorate([
+        Output(), 
+        __metadata('design:type', Object)
+    ], MdSelect.prototype, "onOpen", void 0);
+    __decorate([
+        Output(), 
+        __metadata('design:type', Object)
+    ], MdSelect.prototype, "onClose", void 0);
     MdSelect = __decorate([
         Component({selector: 'md-select',
-            template: "I'm a select!",
-            styles: [" /*# sourceMappingURL=select.css.map */ "],
-            encapsulation: ViewEncapsulation.None
-        }), 
-        __metadata('design:paramtypes', [])
+            template: "<div class=\"md-select-trigger\" overlay-origin (click)=\"toggle()\" #origin=\"overlayOrigin\" #trigger> <span class=\"md-select-placeholder\" [@transformPlaceholder]=\"_getPlaceholderState()\"> {{ placeholder }} </span> <span class=\"md-select-value\" *ngIf=\"selected\"> {{ selected?.viewValue }} </span> <span class=\"md-select-arrow\"></span> </div> <template connected-overlay [origin]=\"origin\"  [open]=\"panelOpen\" hasBackdrop (backdropClick)=\"close()\" backdropClass=\"md-overlay-transparent-backdrop\" [positions]=\"_positions\" [width]=\"_getWidth()\"> <div class=\"md-select-panel\" [@transformPanel]=\"_getPanelState()\" (@transformPanel.done)=\"_onPanelDone()\" (keydown)=\"_keyManager.onKeydown($event)\"> <div class=\"md-select-content\" [@fadeInContent]=\"'showing'\"> <ng-content></ng-content> </div> </div> </template> ",
+            styles: ["/** The mixins below are shared between md-menu and md-select */ /** * This mixin adds the correct panel transform styles based * on the direction that the menu panel opens. */ md-select { display: inline-block; outline: none; } .md-select-trigger { display: flex; justify-content: space-between; align-items: center; height: 30px; min-width: 112px; cursor: pointer; } .md-select-placeholder { padding: 0 2px; transform-origin: left top; } [dir='rtl'] .md-select-placeholder { transform-origin: right top; } [aria-required=true] .md-select-placeholder::after { content: '*'; } .md-select-value { position: absolute; } .md-select-arrow { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid; } .md-select-panel { box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); min-width: 112px; max-width: 280px; overflow: auto; -webkit-overflow-scrolling: touch; padding-top: 0; padding-bottom: 0; transform-origin: top; } md-option { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; display: flex; flex-direction: row; align-items: center; height: 48px; padding: 0 16px; font-size: 16px; font-family: Roboto, \"Helvetica Neue\", sans-serif; text-align: start; text-decoration: none; position: relative; cursor: pointer; outline: none; } md-option[disabled] { cursor: default; } md-option md-icon { margin-right: 16px; } [dir='rtl'] md-option md-icon { margin-left: 16px; } .md-option-ripple { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /*# sourceMappingURL=select.css.map */ "],
+            encapsulation: ViewEncapsulation.None,
+            host: {
+                'role': 'listbox',
+                'tabindex': '0',
+                '[attr.aria-label]': 'placeholder',
+                '[attr.aria-required]': 'required.toString()',
+                '[attr.aria-invalid]': '_control?.invalid || "false"',
+                '(keydown)': '_handleKeydown($event)',
+                '(blur)': '_onBlur()'
+            },
+            animations: [
+                transformPlaceholder,
+                transformPanel,
+                fadeInContent
+            ],
+            exportAs: 'mdSelect',
+        }),
+        __param(2, Optional()),
+        __param(3, Optional()), 
+        __metadata('design:paramtypes', [ElementRef, Renderer, Dir, NgControl])
     ], MdSelect);
@@ -23,0 +294,0 @@ return MdSelect;

select/select.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MdSelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-select","templateUrl":"select.html","styleUrls":["select.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}]}}}
+{"__symbolic":"module","version":1,"metadata":{"MdSelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-select","templateUrl":"select.html","styleUrls":["select.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"host":{"role":"listbox","tabindex":"0","[attr.aria-label]":"placeholder","[attr.aria-required]":"required.toString()","[attr.aria-invalid]":"_control?.invalid || \"false\"","(keydown)":"_handleKeydown($event)","(blur)":"_onBlur()"},"animations":[{"__symbolic":"reference","module":"./select-animations","name":"transformPlaceholder"},{"__symbolic":"reference","module":"./select-animations","name":"transformPanel"},{"__symbolic":"reference","module":"./select-animations","name":"fadeInContent"}],"exportAs":"mdSelect"}]}],"members":{"trigger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["trigger"]}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./option","name":"MdOption"}]}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"../core/rtl/dir","name":"Dir"},{"__symbolic":"reference","module":"@angular/forms","name":"NgControl"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"_isRtl":[{"__symbolic":"method"}],"_getWidth":[{"__symbolic":"method"}],"_getPlaceholderState":[{"__symbolic":"method"}],"_getPanelState":[{"__symbolic":"method"}],"_handleKeydown":[{"__symbolic":"method"}],"_onPanelDone":[{"__symbolic":"method"}],"_onBlur":[{"__symbolic":"method"}],"_initKeyManager":[{"__symbolic":"method"}],"_listenToOptions":[{"__symbolic":"method"}],"_dropSubscriptions":[{"__symbolic":"method"}],"_onSelect":[{"__symbolic":"method"}],"_updateOptions":[{"__symbolic":"method"}],"_focusCorrectOption":[{"__symbolic":"method"}],"_focusHost":[{"__symbolic":"method"}],"_getOptionIndex":[{"__symbolic":"method"}]}}}}

sidenav/README.md

@@ -14,9 +14,2 @@ # MdSidenav
 
-### Properties
-
-| Name | Description |
-| --- | --- |
-| `start` | The start aligned `MdSidenav` instance, or `null` if none is specified. In LTR direction, this is the sidenav shown on the left side. In RTL direction, it will show on the right. There can only be one sidenav on either side. |
-| `end` | The end aligned `MdSidenav` instance, or `null` if none is specified. This is the sidenav opposing the `start` sidenav. There can only be one sidenav on either side. |
-
 ## `<md-sidenav>`
@@ -30,3 +23,3 @@
 | --- | --- | --- |
-| `align` | `"start"|"end"` | The alignment of this sidenav. In LTR direction, `"start"` will be shown on the left, `"end"` on the right. In RTL, it is reversed. `"start"` is used by default. An exception will be thrown if there are more than 1 sidenav on either side. |
+| `align` | `"start"|"end"` | The alignment of this sidenav. In LTR direction, `"start"` will be shown on the left, `"end"` on the right. In RTL, it is reversed. `"start"` is used by default. If there is more than 1 sidenav on either side the layout will be considered invalid and none of the sidenavs will be visible or toggleable until the layout is valid again. |
 | `mode` | `"over"|"push"|"side"` | The mode or styling of the sidenav, default being `"over"`. With `"over"` the sidenav will appear above the content, and a backdrop will be shown. With `"push"` the sidenav will push the content of the `<md-sidenav-layout>` to the side, and show a backdrop over it. `"side"` will resize the content and keep the sidenav opened. Clicking the backdrop will close sidenavs that do not have `mode="side"`. |
@@ -71,6 +64,6 @@ | `opened` | `boolean` | Whether or not the sidenav is opened. Use this binding to open/close the sidenav. |
   <md-sidenav-layout>
-    <md-sidenav #start (open)="mybutton.focus()">
+    <md-sidenav #start (open)="closeStartButton.focus()">
       Start Sidenav.
       <br>
-      <button md-button #mybutton (click)="start.close()">Close</button>
+      <button md-button #closeStartButton (click)="start.close()">Close</button>
     </md-sidenav>
@@ -83,2 +76,5 @@ <md-sidenav #end align="end">
     My regular content. This will be moved into the proper DOM at runtime.
+    <button md-button (click)="start.open()">Open start sidenav</button>
+    <button md-button (click)="end.open()">Open end sidenav</button>
+
   </md-sidenav-layout>
@@ -85,0 +81,0 @@ </app>

sidenav/sidenav.d.ts

@@ -14,6 +14,10 @@ import { ModuleWithProviders, AfterContentInit, ElementRef, QueryList, EventEmitter, Renderer } from '@angular/core';
  */
-export declare class MdSidenav {
+export declare class MdSidenav implements AfterContentInit {
     private _elementRef;
     /** Alignment of the sidenav (direction neutral); whether 'start' or 'end'. */
-    align: 'start' | 'end';
+    private _align;
+    /** Whether this md-sidenav is part of a valid md-sidenav-layout configuration. */
+    valid: boolean;
+    private _valid;
+    align: "start" | "end";
     /** Mode of the sidenav; whether 'over' or 'side'. */
@@ -31,2 +35,4 @@ mode: 'over' | 'push' | 'side';
     onClose: EventEmitter<void>;
+    /** Event emitted when the sidenav alignment changes. */
+    onAlignChanged: EventEmitter<void>;
     /**
@@ -37,2 +43,3 @@ * @param _elementRef The DOM element reference. Used for transition and width calculation.
     constructor(_elementRef: ElementRef);
+    ngAfterContentInit(): void;
     /**
@@ -71,3 +78,2 @@ * Whether the sidenav is opened. We overload this because we trigger an event when it
     readonly _modePush: boolean;
-    /** TODO: internal (needed by MdSidenavLayout). */
     readonly _width: any;
@@ -86,3 +92,3 @@ private _transition;
  * This is the parent component to one or two <md-sidenav>s that validates the state internally
- * and coordinate the backdrop and content styling.
+ * and coordinates the backdrop and content styling.
  */
@@ -108,6 +114,18 @@ export declare class MdSidenavLayout implements AfterContentInit {
     constructor(_dir: Dir, _element: ElementRef, _renderer: Renderer);
-    /** TODO: internal */
     ngAfterContentInit(): void;
+    /**
+     * Subscribes to sidenav events in order to set a class on the main layout element when the
+     * sidenav is open and the backdrop is visible. This ensures any overflow on the layout element is
+     * properly hidden.
+     */
     private _watchSidenavToggle(sidenav);
+    /**
+     * Subscribes to sidenav onAlignChanged event in order to re-validate drawers when the align
+     * changes.
+     */
+    private _watchSidenavAlign(sidenav);
+    /** Toggles the 'md-sidenav-opened' class on the main 'md-sidenav-layout' element. */
     private _setLayoutClass(sidenav, bool);
+    /** Sets the valid state of the drawers. */
+    private _setDrawersValid(valid);
     /** Validate the state of the sidenav children components. */
@@ -114,0 +132,0 @@ private _validateDrawers();

sidenav/sidenav.js

@@ -18,5 +18,5 @@ var __extends = (this && this.__extends) || function (d, b) {
 };
-import { NgModule, Component, ContentChildren, ElementRef, HostBinding, Input, Optional, Output, QueryList, ChangeDetectionStrategy, EventEmitter, Renderer, ViewEncapsulation } from '@angular/core';
+import { NgModule, Component, ContentChildren, ElementRef, Input, Optional, Output, QueryList, ChangeDetectionStrategy, EventEmitter, Renderer, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { Dir, MdError } from '../core';
+import { Dir, MdError, coerceBooleanProperty } from '../core';
 /** Exception thrown when two MdSidenav are matching the same side. */
@@ -45,3 +45,4 @@ export var MdDuplicatedSidenavError = (function (_super) {
         /** Alignment of the sidenav (direction neutral); whether 'start' or 'end'. */
-        this.align = 'start';
+        this._align = 'start';
+        this._valid = true;
         /** Mode of the sidenav; whether 'over' or 'side'. */
@@ -59,4 +60,46 @@ this.mode = 'over';
         this.onClose = new EventEmitter();
+        /** Event emitted when the sidenav alignment changes. */
+        this.onAlignChanged = new EventEmitter();
         this._transition = false;
     }
+    Object.defineProperty(MdSidenav.prototype, "valid", {
+        /** Whether this md-sidenav is part of a valid md-sidenav-layout configuration. */
+        get: function () {
+            return this._valid;
+        },
+        set: function (value) {
+            value = coerceBooleanProperty(value);
+            // When the drawers are not in a valid configuration we close them all until they are in a valid
+            // configuration again.
+            if (!value) {
+                this.close();
+            }
+            this._valid = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdSidenav.prototype, "align", {
+        get: function () {
+            return this._align;
+        },
+        set: function (value) {
+            // Make sure we have a valid value.
+            value = (value == 'end') ? 'end' : 'start';
+            if (value != this._align) {
+                this._align = value;
+                this.onAlignChanged.emit();
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    MdSidenav.prototype.ngAfterContentInit = function () {
+        // This can happen when the sidenav is set to opened in the template and the transition
+        // isn't ended.
+        if (this._openPromise) {
+            this._openPromiseResolve();
+            this._openPromise = null;
+        }
+    };
     Object.defineProperty(MdSidenav.prototype, "opened", {
@@ -69,5 +112,3 @@ /**
         set: function (v) {
-            // TODO(jelbourn): this coercion goes away when BooleanFieldValue is removed.
-            var booleanValue = v != null && "" + v !== 'false';
-            this.toggle(booleanValue);
+            this.toggle(coerceBooleanProperty(v));
         },
@@ -97,2 +138,5 @@ enumerable: true,
         if (isOpen === void 0) { isOpen = !this.opened; }
+        if (!this.valid) {
+            return Promise.resolve(null);
+        }
         // Shortcut it if we're already opened.
@@ -110,6 +154,6 @@ if (isOpen === this.opened) {
         if (isOpen) {
-            this.onOpenStart.emit(null);
+            this.onOpenStart.emit();
         }
         else {
-            this.onCloseStart.emit(null);
+            this.onCloseStart.emit();
         }
@@ -151,3 +195,3 @@ if (isOpen) {
                 }
-                this.onOpen.emit(null);
+                this.onOpen.emit();
             }
@@ -161,3 +205,3 @@ else {
                 }
-                this.onClose.emit(null);
+                this.onClose.emit();
             }
@@ -225,3 +269,2 @@ this._openPromise = null;
     Object.defineProperty(MdSidenav.prototype, "_width", {
-        /** TODO: internal (needed by MdSidenavLayout). */
         get: function () {
@@ -239,3 +282,3 @@ if (this._elementRef.nativeElement) {
         __metadata('design:type', Object)
-    ], MdSidenav.prototype, "align", void 0);
+    ], MdSidenav.prototype, "align", null);
     __decorate([
@@ -262,37 +305,9 @@ Input(),
     __decorate([
+        Output('align-changed'), 
+        __metadata('design:type', Object)
+    ], MdSidenav.prototype, "onAlignChanged", void 0);
+    __decorate([
         Input(), 
         __metadata('design:type', Boolean)
     ], MdSidenav.prototype, "opened", null);
-    __decorate([
-        HostBinding('class.md-sidenav-closing'), 
-        __metadata('design:type', Object)
-    ], MdSidenav.prototype, "_isClosing", null);
-    __decorate([
-        HostBinding('class.md-sidenav-opening'), 
-        __metadata('design:type', Object)
-    ], MdSidenav.prototype, "_isOpening", null);
-    __decorate([
-        HostBinding('class.md-sidenav-closed'), 
-        __metadata('design:type', Object)
-    ], MdSidenav.prototype, "_isClosed", null);
-    __decorate([
-        HostBinding('class.md-sidenav-opened'), 
-        __metadata('design:type', Object)
-    ], MdSidenav.prototype, "_isOpened", null);
-    __decorate([
-        HostBinding('class.md-sidenav-end'), 
-        __metadata('design:type', Object)
-    ], MdSidenav.prototype, "_isEnd", null);
-    __decorate([
-        HostBinding('class.md-sidenav-side'), 
-        __metadata('design:type', Object)
-    ], MdSidenav.prototype, "_modeSide", null);
-    __decorate([
-        HostBinding('class.md-sidenav-over'), 
-        __metadata('design:type', Object)
-    ], MdSidenav.prototype, "_modeOver", null);
-    __decorate([
-        HostBinding('class.md-sidenav-push'), 
-        __metadata('design:type', Object)
-    ], MdSidenav.prototype, "_modePush", null);
     MdSidenav = __decorate([
@@ -304,3 +319,12 @@ Component({selector: 'md-sidenav',
                 // must prevent the browser from aligning text based on value
-                '[attr.align]': 'null'
+                '[attr.align]': 'null',
+                '[class.md-sidenav-closed]': '_isClosed',
+                '[class.md-sidenav-closing]': '_isClosing',
+                '[class.md-sidenav-end]': '_isEnd',
+                '[class.md-sidenav-opened]': '_isOpened',
+                '[class.md-sidenav-opening]': '_isOpening',
+                '[class.md-sidenav-over]': '_modeOver',
+                '[class.md-sidenav-push]': '_modePush',
+                '[class.md-sidenav-side]': '_modeSide',
+                '[class.md-sidenav-invalid]': '!valid',
             },
@@ -318,3 +342,3 @@ changeDetection: ChangeDetectionStrategy.OnPush,
  * This is the parent component to one or two <md-sidenav>s that validates the state internally
- * and coordinate the backdrop and content styling.
+ * and coordinates the backdrop and content styling.
  */
@@ -343,3 +367,2 @@ export var MdSidenavLayout = (function () {
     });
-    /** TODO: internal */
     MdSidenavLayout.prototype.ngAfterContentInit = function () {
@@ -349,10 +372,13 @@ var _this = this;
         this._sidenavs.changes.subscribe(function () { return _this._validateDrawers(); });
-        this._sidenavs.forEach(function (sidenav) { return _this._watchSidenavToggle(sidenav); });
+        this._sidenavs.forEach(function (sidenav) {
+            _this._watchSidenavToggle(sidenav);
+            _this._watchSidenavAlign(sidenav);
+        });
         this._validateDrawers();
     };
-    /*
-    * Subscribes to sidenav events in order to set a class on the main layout element when the sidenav
-    * is open and the backdrop is visible. This ensures any overflow on the layout element is properly
-    * hidden.
-    */
+    /**
+     * Subscribes to sidenav events in order to set a class on the main layout element when the
+     * sidenav is open and the backdrop is visible. This ensures any overflow on the layout element is
+     * properly hidden.
+     */
     MdSidenavLayout.prototype._watchSidenavToggle = function (sidenav) {
@@ -366,25 +392,49 @@ var _this = this;
     };
-    /* Toggles the 'md-sidenav-opened' class on the main 'md-sidenav-layout' element. */
+    /**
+     * Subscribes to sidenav onAlignChanged event in order to re-validate drawers when the align
+     * changes.
+     */
+    MdSidenavLayout.prototype._watchSidenavAlign = function (sidenav) {
+        var _this = this;
+        if (!sidenav) {
+            return;
+        }
+        sidenav.onAlignChanged.subscribe(function () { return _this._validateDrawers(); });
+    };
+    /** Toggles the 'md-sidenav-opened' class on the main 'md-sidenav-layout' element. */
     MdSidenavLayout.prototype._setLayoutClass = function (sidenav, bool) {
         this._renderer.setElementClass(this._element.nativeElement, 'md-sidenav-opened', bool);
     };
+    /** Sets the valid state of the drawers. */
+    MdSidenavLayout.prototype._setDrawersValid = function (valid) {
+        this._sidenavs.forEach(function (sidenav) {
+            sidenav.valid = valid;
+        });
+        if (!valid) {
+            this._start = this._end = this._left = this._right = null;
+        }
+    };
     /** Validate the state of the sidenav children components. */
     MdSidenavLayout.prototype._validateDrawers = function () {
-        var _this = this;
         this._start = this._end = null;
         // Ensure that we have at most one start and one end sidenav.
-        this._sidenavs.forEach(function (sidenav) {
+        // NOTE: We must call toArray on _sidenavs even though it's iterable
+        // (see https://github.com/Microsoft/TypeScript/issues/3164).
+        for (var _i = 0, _a = this._sidenavs.toArray(); _i < _a.length; _i++) {
+            var sidenav = _a[_i];
             if (sidenav.align == 'end') {
-                if (_this._end != null) {
-                    throw new MdDuplicatedSidenavError('end');
+                if (this._end != null) {
+                    this._setDrawersValid(false);
+                    return;
                 }
-                _this._end = sidenav;
+                this._end = sidenav;
             }
             else {
-                if (_this._start != null) {
-                    throw new MdDuplicatedSidenavError('start');
+                if (this._start != null) {
+                    this._setDrawersValid(false);
+                    return;
                 }
-                _this._start = sidenav;
+                this._start = sidenav;
             }
-        });
+        }
         this._right = this._left = null;
@@ -400,2 +450,3 @@ // Detect if we're LTR or RTL.
         }
+        this._setDrawersValid(true);
     };
@@ -467,3 +518,3 @@ MdSidenavLayout.prototype._closeModalSidenav = function () {
             template: "<div class=\"md-sidenav-backdrop\" (click)=\"_closeModalSidenav()\" [class.md-sidenav-shown]=\"_isShowingBackdrop()\"></div> <ng-content select=\"md-sidenav\"></ng-content> <div class=\"md-sidenav-content\" [ngStyle]=\"_getStyles()\"> <ng-content></ng-content> </div> ",
-            styles: ["md-sidenav-layout { position: relative; transform: translate3d(0, 0, 0); box-sizing: border-box; -webkit-overflow-scrolling: touch; display: block; overflow: hidden; } md-sidenav-layout[fullscreen] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; } md-sidenav-layout[fullscreen].md-sidenav-opened { overflow: hidden; } .md-sidenav-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 2; visibility: hidden; } .md-sidenav-backdrop.md-sidenav-shown { visibility: visible; } .md-sidenav-content { position: relative; transform: translate3d(0, 0, 0); display: block; height: 100%; overflow: auto; } md-sidenav { position: relative; transform: translate3d(0, 0, 0); display: block; position: absolute; top: 0; bottom: 0; z-index: 3; min-width: 5%; overflow-y: auto; transform: translate3d(-100%, 0, 0); } md-sidenav.md-sidenav-closed { visibility: hidden; } md-sidenav.md-sidenav-closing { transform: translate3d(-100%, 0, 0); will-change: transform; } md-sidenav.md-sidenav-opening { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); visibility: visible; transform: translate3d(0, 0, 0); will-change: transform; } md-sidenav.md-sidenav-opened { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); transform: translate3d(0, 0, 0); } md-sidenav.md-sidenav-side { z-index: 1; } md-sidenav.md-sidenav-end { right: 0; transform: translate3d(100%, 0, 0); } md-sidenav.md-sidenav-end.md-sidenav-closed { visibility: hidden; } md-sidenav.md-sidenav-end.md-sidenav-closing { transform: translate3d(100%, 0, 0); will-change: transform; } md-sidenav.md-sidenav-end.md-sidenav-opening { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); visibility: visible; transform: translate3d(0, 0, 0); will-change: transform; } md-sidenav.md-sidenav-end.md-sidenav-opened { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); transform: translate3d(0, 0, 0); } [dir='rtl'] md-sidenav { transform: translate3d(100%, 0, 0); } [dir='rtl'] md-sidenav.md-sidenav-closed { visibility: hidden; } [dir='rtl'] md-sidenav.md-sidenav-closing { transform: translate3d(100%, 0, 0); will-change: transform; } [dir='rtl'] md-sidenav.md-sidenav-opening { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); visibility: visible; transform: translate3d(0, 0, 0); will-change: transform; } [dir='rtl'] md-sidenav.md-sidenav-opened { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); transform: translate3d(0, 0, 0); } [dir='rtl'] md-sidenav.md-sidenav-end { left: 0; right: auto; transform: translate3d(-100%, 0, 0); } [dir='rtl'] md-sidenav.md-sidenav-end.md-sidenav-closed { visibility: hidden; } [dir='rtl'] md-sidenav.md-sidenav-end.md-sidenav-closing { transform: translate3d(-100%, 0, 0); will-change: transform; } [dir='rtl'] md-sidenav.md-sidenav-end.md-sidenav-opening { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); visibility: visible; transform: translate3d(0, 0, 0); will-change: transform; } [dir='rtl'] md-sidenav.md-sidenav-end.md-sidenav-opened { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); transform: translate3d(0, 0, 0); } /*# sourceMappingURL=sidenav.css.map */ ",
+            styles: ["md-sidenav-layout { position: relative; transform: translate3d(0, 0, 0); box-sizing: border-box; -webkit-overflow-scrolling: touch; display: block; overflow: hidden; } md-sidenav-layout[fullscreen] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; } md-sidenav-layout[fullscreen].md-sidenav-opened { overflow: hidden; } .md-sidenav-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 2; visibility: hidden; } .md-sidenav-backdrop.md-sidenav-shown { visibility: visible; } .md-sidenav-content { position: relative; transform: translate3d(0, 0, 0); display: block; height: 100%; overflow: auto; } md-sidenav { position: relative; transform: translate3d(0, 0, 0); display: block; position: absolute; top: 0; bottom: 0; z-index: 3; min-width: 5%; overflow-y: auto; transform: translate3d(-100%, 0, 0); } md-sidenav.md-sidenav-closed { visibility: hidden; } md-sidenav.md-sidenav-closing { transform: translate3d(-100%, 0, 0); } md-sidenav.md-sidenav-opening { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); visibility: visible; transform: translate3d(0, 0, 0); } md-sidenav.md-sidenav-opened { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); transform: translate3d(0, 0, 0); } md-sidenav.md-sidenav-side { z-index: 1; } md-sidenav.md-sidenav-end { right: 0; transform: translate3d(100%, 0, 0); } md-sidenav.md-sidenav-end.md-sidenav-closed { visibility: hidden; } md-sidenav.md-sidenav-end.md-sidenav-closing { transform: translate3d(100%, 0, 0); } md-sidenav.md-sidenav-end.md-sidenav-opening { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); visibility: visible; transform: translate3d(0, 0, 0); } md-sidenav.md-sidenav-end.md-sidenav-opened { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); transform: translate3d(0, 0, 0); } [dir='rtl'] md-sidenav { transform: translate3d(100%, 0, 0); } [dir='rtl'] md-sidenav.md-sidenav-closed { visibility: hidden; } [dir='rtl'] md-sidenav.md-sidenav-closing { transform: translate3d(100%, 0, 0); } [dir='rtl'] md-sidenav.md-sidenav-opening { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); visibility: visible; transform: translate3d(0, 0, 0); } [dir='rtl'] md-sidenav.md-sidenav-opened { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); transform: translate3d(0, 0, 0); } [dir='rtl'] md-sidenav.md-sidenav-end { left: 0; right: auto; transform: translate3d(-100%, 0, 0); } [dir='rtl'] md-sidenav.md-sidenav-end.md-sidenav-closed { visibility: hidden; } [dir='rtl'] md-sidenav.md-sidenav-end.md-sidenav-closing { transform: translate3d(-100%, 0, 0); } [dir='rtl'] md-sidenav.md-sidenav-end.md-sidenav-opening { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); visibility: visible; transform: translate3d(0, 0, 0); } [dir='rtl'] md-sidenav.md-sidenav-end.md-sidenav-opened { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); transform: translate3d(0, 0, 0); } .md-sidenav-invalid { display: none; } /*# sourceMappingURL=sidenav.css.map */ ",
 "md-sidenav { transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1); } .md-sidenav-content { transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1); } .md-sidenav-backdrop.md-sidenav-shown { transition: background-color 400ms cubic-bezier(0.25, 0.8, 0.25, 1); } /*# sourceMappingURL=sidenav-transitions.css.map */ "],
@@ -470,0 +521,0 @@ encapsulation: ViewEncapsulation.None,

sidenav/sidenav.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MdSidenav":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-sidenav","template":"<ng-content></ng-content>","host":{"(transitionend)":"_onTransitionEnd($event)","[attr.align]":"null"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onOpenStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["open-start"]}]}],"onOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["open"]}]}],"onCloseStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["close-start"]}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["close"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"opened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"_onTransitionEnd":[{"__symbolic":"method"}],"_isClosing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-sidenav-closing"]}]}],"_isOpening":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-sidenav-opening"]}]}],"_isClosed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-sidenav-closed"]}]}],"_isOpened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-sidenav-opened"]}]}],"_isEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-sidenav-end"]}]}],"_modeSide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-sidenav-side"]}]}],"_modeOver":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-sidenav-over"]}]}],"_modePush":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-sidenav-push"]}]}]}},"MdSidenavLayout":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-sidenav-layout","templateUrl":"sidenav.html","styleUrls":["sidenav.css","sidenav-transitions.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"_sidenavs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"MdSidenav"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}],null,null],"parameters":[{"__symbolic":"reference","module":"../core","name":"Dir"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"_watchSidenavToggle":[{"__symbolic":"method"}],"_setLayoutClass":[{"__symbolic":"method"}],"_validateDrawers":[{"__symbolic":"method"}],"_closeModalSidenav":[{"__symbolic":"method"}],"_isShowingBackdrop":[{"__symbolic":"method"}],"_isSidenavOpen":[{"__symbolic":"method"}],"_getSidenavEffectiveWidth":[{"__symbolic":"method"}],"_getMarginLeft":[{"__symbolic":"method"}],"_getMarginRight":[{"__symbolic":"method"}],"_getPositionLeft":[{"__symbolic":"method"}],"_getPositionRight":[{"__symbolic":"method"}],"_getPositionOffset":[{"__symbolic":"method"}],"_getStyles":[{"__symbolic":"method"}]}},"MdSidenavModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","name":"MdSidenavLayout"},{"__symbolic":"reference","name":"MdSidenav"}],"declarations":[{"__symbolic":"reference","name":"MdSidenavLayout"},{"__symbolic":"reference","name":"MdSidenav"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdSidenavModule"},"providers":[]}}}}}}
+{"__symbolic":"module","version":1,"metadata":{"MdSidenav":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-sidenav","template":"<ng-content></ng-content>","host":{"(transitionend)":"_onTransitionEnd($event)","[attr.align]":"null","[class.md-sidenav-closed]":"_isClosed","[class.md-sidenav-closing]":"_isClosing","[class.md-sidenav-end]":"_isEnd","[class.md-sidenav-opened]":"_isOpened","[class.md-sidenav-opening]":"_isOpening","[class.md-sidenav-over]":"_modeOver","[class.md-sidenav-push]":"_modePush","[class.md-sidenav-side]":"_modeSide","[class.md-sidenav-invalid]":"!valid"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onOpenStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["open-start"]}]}],"onOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["open"]}]}],"onCloseStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["close-start"]}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["close"]}]}],"onAlignChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["align-changed"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"opened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"_onTransitionEnd":[{"__symbolic":"method"}]}},"MdSidenavLayout":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-sidenav-layout","templateUrl":"sidenav.html","styleUrls":["sidenav.css","sidenav-transitions.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"_sidenavs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"MdSidenav"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}],null,null],"parameters":[{"__symbolic":"reference","module":"../core","name":"Dir"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"_watchSidenavToggle":[{"__symbolic":"method"}],"_watchSidenavAlign":[{"__symbolic":"method"}],"_setLayoutClass":[{"__symbolic":"method"}],"_setDrawersValid":[{"__symbolic":"method"}],"_validateDrawers":[{"__symbolic":"method"}],"_closeModalSidenav":[{"__symbolic":"method"}],"_isShowingBackdrop":[{"__symbolic":"method"}],"_isSidenavOpen":[{"__symbolic":"method"}],"_getSidenavEffectiveWidth":[{"__symbolic":"method"}],"_getMarginLeft":[{"__symbolic":"method"}],"_getMarginRight":[{"__symbolic":"method"}],"_getPositionLeft":[{"__symbolic":"method"}],"_getPositionRight":[{"__symbolic":"method"}],"_getPositionOffset":[{"__symbolic":"method"}],"_getStyles":[{"__symbolic":"method"}]}},"MdSidenavModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","name":"MdSidenavLayout"},{"__symbolic":"reference","name":"MdSidenav"}],"declarations":[{"__symbolic":"reference","name":"MdSidenavLayout"},{"__symbolic":"reference","name":"MdSidenav"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdSidenavModule"},"providers":[]}}}}}}

slide-toggle/slide-toggle.d.ts

@@ -17,7 +17,7 @@ import { ElementRef, Renderer, AfterContentInit, ModuleWithProviders } from '@angular/core';
     private _color;
-    _hasFocus: boolean;
     private _isMousedown;
     private _slideRenderer;
-    disabled: boolean;
-    required: boolean;
+    private _disabled;
+    private _required;
+    _hasFocus: boolean;
     name: string;
@@ -28,2 +28,4 @@ id: string;
     ariaLabelledby: string;
+    disabled: boolean;
+    required: boolean;
     private _change;
@@ -30,0 +32,0 @@ change: Observable<MdSlideToggleChange>;

slide-toggle/slide-toggle.js

@@ -10,8 +10,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { Component, ElementRef, Renderer, forwardRef, ChangeDetectionStrategy, Input, Output, EventEmitter, NgModule } from '@angular/core';
+import { Component, ElementRef, Renderer, forwardRef, ChangeDetectionStrategy, Input, Output, EventEmitter, NgModule, ViewEncapsulation } from '@angular/core';
 import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { BooleanFieldValue, applyCssTransform } from '../core';
+import { applyCssTransform, coerceBooleanProperty, MdGestureConfig } from '../core';
 import { Observable } from 'rxjs/Observable';
-import { MdGestureConfig } from '../core';
 export var MD_SLIDE_TOGGLE_VALUE_ACCESSOR = {
@@ -40,7 +39,8 @@ provide: NG_VALUE_ACCESSOR,
         this._checked = false;
-        this._hasFocus = false;
         this._isMousedown = false;
         this._slideRenderer = null;
-        this.disabled = false;
-        this.required = false;
+        this._disabled = false;
+        this._required = false;
+        // Needs to be public to support AOT compilation (as host binding).
+        this._hasFocus = false;
         this.name = null;
@@ -56,2 +56,14 @@ this.id = this._uniqueId;
     }
+    Object.defineProperty(MdSlideToggle.prototype, "disabled", {
+        get: function () { return this._disabled; },
+        set: function (value) { this._disabled = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdSlideToggle.prototype, "required", {
+        get: function () { return this._required; },
+        set: function (value) { this._required = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
     /** TODO: internal */
@@ -177,7 +189,11 @@ MdSlideToggle.prototype.ngAfterContentInit = function () {
     MdSlideToggle.prototype._onDragStart = function () {
-        this._slideRenderer.startThumbDrag(this.checked);
+        if (!this.disabled) {
+            this._slideRenderer.startThumbDrag(this.checked);
+        }
     };
     /** TODO: internal */
     MdSlideToggle.prototype._onDrag = function (event) {
-        this._slideRenderer.updateThumbPosition(event.deltaX);
+        if (this._slideRenderer.isDragging()) {
+            this._slideRenderer.updateThumbPosition(event.deltaX);
+        }
     };
@@ -187,2 +203,5 @@ /** TODO: internal */
         var _this = this;
+        if (!this._slideRenderer.isDragging()) {
+            return;
+        }
         // Notice that we have to stop outside of the current event handler,
@@ -192,15 +211,6 @@ // because otherwise the click event will be fired and will reset the new checked variable.
             _this.checked = _this._slideRenderer.stopThumbDrag();
+            _this._emitChangeEvent();
         }, 0);
     };
     __decorate([
-        Input(),
-        BooleanFieldValue(), 
-        __metadata('design:type', Boolean)
-    ], MdSlideToggle.prototype, "disabled", void 0);
-    __decorate([
-        Input(),
-        BooleanFieldValue(), 
-        __metadata('design:type', Boolean)
-    ], MdSlideToggle.prototype, "required", void 0);
-    __decorate([
         Input(), 
@@ -226,2 +236,10 @@ __metadata('design:type', String)
     __decorate([
+        Input(), 
+        __metadata('design:type', Boolean)
+    ], MdSlideToggle.prototype, "disabled", null);
+    __decorate([
+        Input(), 
+        __metadata('design:type', Boolean)
+    ], MdSlideToggle.prototype, "required", null);
+    __decorate([
         Output(), 
@@ -248,4 +266,5 @@ __metadata('design:type', Observable)
             template: "<label class=\"md-slide-toggle-label\"> <div class=\"md-slide-toggle-container\"> <div class=\"md-slide-toggle-bar\"></div> <div class=\"md-slide-toggle-thumb-container\" (slidestart)=\"_onDragStart()\" (slide)=\"_onDrag($event)\" (slideend)=\"_onDragEnd()\"> <div class=\"md-slide-toggle-thumb\"> <div class=\"md-ink-ripple\"></div> </div> </div> <input #input class=\"md-slide-toggle-input md-visually-hidden\" type=\"checkbox\" [id]=\"getInputId()\" [required]=\"required\" [tabIndex]=\"tabIndex\" [checked]=\"checked\" [disabled]=\"disabled\" [attr.name]=\"name\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (blur)=\"_onInputBlur()\" (focus)=\"_onInputFocus()\" (change)=\"_onChangeEvent($event)\" (click)=\"_onInputClick($event)\"> </div> <span class=\"md-slide-toggle-content\"> <ng-content></ng-content> </span> </label> ",
-            styles: [":host { display: flex; height: 24px; margin: 16px 0; line-height: 24px; white-space: nowrap; user-select: none; outline: none; } :host.md-checked .md-slide-toggle-thumb-container { transform: translate3d(100%, 0, 0); } :host .md-ink-ripple { border-radius: 50%; opacity: 0; height: 48px; left: 50%; overflow: hidden; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: opacity ease 280ms, background-color ease 280ms; width: 48px; } :host.md-slide-toggle-focused .md-ink-ripple { opacity: 1; } :host.md-slide-toggle-disabled .md-ink-ripple { background-color: #000; } :host.md-disabled .md-slide-toggle-label, :host.md-disabled .md-slide-toggle-container { cursor: default; } .md-slide-toggle-content { font-size: 14px; font-family: Roboto, \"Helvetica Neue\", sans-serif; font-weight: 500; } .md-slide-toggle-label { display: flex; flex: 1; cursor: pointer; } .md-slide-toggle-container { cursor: grab; width: 36px; height: 24px; position: relative; user-select: none; margin-right: 8px; } .md-slide-toggle-thumb-container { position: absolute; top: 2px; left: 0; z-index: 1; width: 16px; transform: translate3d(0, 0, 0); transition: all 80ms linear; transition-property: transform; } .md-slide-toggle-thumb-container.md-dragging { transition-duration: 0ms; } .md-slide-toggle-thumb { position: absolute; margin: 0; left: 0; top: 0; height: 20px; width: 20px; border-radius: 50%; box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); } .md-slide-toggle-bar { position: absolute; left: 1px; top: 5px; width: 34px; height: 14px; border-radius: 8px; } .md-slide-toggle-input { bottom: 0; left: 10px; } .md-slide-toggle-bar, .md-slide-toggle-thumb { transition: all 80ms linear; transition-property: background-color; transition-delay: 50ms; } /*# sourceMappingURL=slide-toggle.css.map */ "],
+            styles: ["md-slide-toggle { display: flex; height: 24px; margin: 16px 0; line-height: 24px; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; } md-slide-toggle.md-checked .md-slide-toggle-thumb-container { transform: translate3d(100%, 0, 0); } md-slide-toggle .md-ink-ripple { border-radius: 50%; opacity: 0; height: 48px; left: 50%; overflow: hidden; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: opacity ease 280ms, background-color ease 280ms; width: 48px; } md-slide-toggle.md-slide-toggle-focused .md-ink-ripple { opacity: 1; } md-slide-toggle.md-slide-toggle-disabled .md-ink-ripple { background-color: #000; } md-slide-toggle.md-disabled .md-slide-toggle-label, md-slide-toggle.md-disabled .md-slide-toggle-container { cursor: default; } .md-slide-toggle-content { font-size: 14px; font-family: Roboto, \"Helvetica Neue\", sans-serif; font-weight: 500; } .md-slide-toggle-label { display: flex; flex: 1; cursor: pointer; } .md-slide-toggle-container { cursor: -webkit-grab; cursor: grab; width: 36px; height: 24px; position: relative; margin-right: 8px; } [dir='rtl'] .md-slide-toggle-container { margin-left: 8px; margin-right: 0; } .md-slide-toggle-thumb-container { position: absolute; top: 2px; left: 0; z-index: 1; width: 16px; transform: translate3d(0, 0, 0); transition: all 80ms linear; transition-property: transform; } .md-slide-toggle-thumb-container.md-dragging { transition-duration: 0ms; } .md-slide-toggle-thumb { position: absolute; margin: 0; left: 0; top: 0; height: 20px; width: 20px; border-radius: 50%; box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); } .md-slide-toggle-bar { position: absolute; left: 1px; top: 5px; width: 34px; height: 14px; border-radius: 8px; } .md-slide-toggle-input { bottom: 0; left: 10px; } .md-slide-toggle-bar, .md-slide-toggle-thumb { transition: all 80ms linear; transition-property: background-color; transition-delay: 50ms; } /*# sourceMappingURL=slide-toggle.css.map */ "],
             providers: [MD_SLIDE_TOGGLE_VALUE_ACCESSOR],
+            encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush
@@ -272,3 +291,3 @@ }),
     SlideToggleRenderer.prototype.startThumbDrag = function (checked) {
-        if (!this._thumbBarWidth) {
+        if (!this.isDragging()) {
             this._thumbBarWidth = this._thumbBarEl.clientWidth - this._thumbEl.clientWidth;
@@ -281,3 +300,3 @@ this._checked = checked;
     SlideToggleRenderer.prototype.stopThumbDrag = function () {
-        if (this._thumbBarWidth) {
+        if (this.isDragging()) {
             this._thumbBarWidth = null;
@@ -291,6 +310,4 @@ this._thumbEl.classList.remove('md-dragging');
     SlideToggleRenderer.prototype.updateThumbPosition = function (distance) {
-        if (this._thumbBarWidth) {
-            this._percentage = this._getThumbPercentage(distance);
-            applyCssTransform(this._thumbEl, "translate3d(" + this._percentage + "%, 0, 0)");
-        }
+        this._percentage = this._getThumbPercentage(distance);
+        applyCssTransform(this._thumbEl, "translate3d(" + this._percentage + "%, 0, 0)");
     };
@@ -297,0 +314,0 @@ /** Retrieves the percentage of thumb from the moved distance. */

slide-toggle/slide-toggle.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MD_SLIDE_TOGGLE_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MdSlideToggle"},"multi":true},"MdSlideToggle":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-slide-toggle","host":{"[class.md-checked]":"checked","[class.md-disabled]":"disabled","[class.md-slide-toggle-focused]":"_hasFocus","(mousedown)":"_setMousedown()"},"templateUrl":"slide-toggle.html","styleUrls":["slide-toggle.css"],"providers":[{"__symbolic":"reference","name":"MD_SLIDE_TOGGLE_VALUE_ACCESSOR"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../core","name":"BooleanFieldValue"}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../core","name":"BooleanFieldValue"}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ariaLabelledby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"_onChangeEvent":[{"__symbolic":"method"}],"_onInputClick":[{"__symbolic":"method"}],"_setMousedown":[{"__symbolic":"method"}],"_onInputFocus":[{"__symbolic":"method"}],"_onInputBlur":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"toggle":[{"__symbolic":"method"}],"_updateColor":[{"__symbolic":"method"}],"_setElementColor":[{"__symbolic":"method"}],"_emitChangeEvent":[{"__symbolic":"method"}],"_onDragStart":[{"__symbolic":"method"}],"_onDrag":[{"__symbolic":"method"}],"_onDragEnd":[{"__symbolic":"method"}]}},"MdSlideToggleModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","name":"MdSlideToggle"}],"declarations":[{"__symbolic":"reference","name":"MdSlideToggle"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdSlideToggleModule"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HAMMER_GESTURE_CONFIG"},"useClass":{"__symbolic":"reference","module":"../core","name":"MdGestureConfig"}}]}}}}}}
+{"__symbolic":"module","version":1,"metadata":{"MD_SLIDE_TOGGLE_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MdSlideToggle"},"multi":true},"MdSlideToggle":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-slide-toggle","host":{"[class.md-checked]":"checked","[class.md-disabled]":"disabled","[class.md-slide-toggle-focused]":"_hasFocus","(mousedown)":"_setMousedown()"},"templateUrl":"slide-toggle.html","styleUrls":["slide-toggle.css"],"providers":[{"__symbolic":"reference","name":"MD_SLIDE_TOGGLE_VALUE_ACCESSOR"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ariaLabelledby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"_onChangeEvent":[{"__symbolic":"method"}],"_onInputClick":[{"__symbolic":"method"}],"_setMousedown":[{"__symbolic":"method"}],"_onInputFocus":[{"__symbolic":"method"}],"_onInputBlur":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"toggle":[{"__symbolic":"method"}],"_updateColor":[{"__symbolic":"method"}],"_setElementColor":[{"__symbolic":"method"}],"_emitChangeEvent":[{"__symbolic":"method"}],"_onDragStart":[{"__symbolic":"method"}],"_onDrag":[{"__symbolic":"method"}],"_onDragEnd":[{"__symbolic":"method"}]}},"MdSlideToggleModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","name":"MdSlideToggle"}],"declarations":[{"__symbolic":"reference","name":"MdSlideToggle"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdSlideToggleModule"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HAMMER_GESTURE_CONFIG"},"useClass":{"__symbolic":"reference","module":"../core","name":"MdGestureConfig"}}]}}}}}}

slider/README.md

@@ -20,13 +20,2 @@ # md-slider
 
-### Setup
-
-Importing the module:
-```ts
- @NgModule({
-    imports: [MdSliderModule.forRoot()],
-    ...
- })
- export class MyAppModule { }
-```
-
 ### Basic Usage
@@ -33,0 +22,0 @@

slider/slider.d.ts

@@ -1,2 +0,2 @@
-import { ModuleWithProviders, ElementRef, AfterContentInit } from '@angular/core';
+import { ModuleWithProviders, ElementRef, EventEmitter } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
@@ -8,3 +8,8 @@ /**
 export declare const MD_SLIDER_VALUE_ACCESSOR: any;
-export declare class MdSlider implements AfterContentInit, ControlValueAccessor {
+/** A simple change event emitted by the MdSlider component. */
+export declare class MdSliderChange {
+    source: MdSlider;
+    value: number;
+}
+export declare class MdSlider implements ControlValueAccessor {
     /** A renderer to handle updating the slider's thumb and fill track. */
@@ -14,103 +19,83 @@ private _renderer;
     private _sliderDimensions;
+    /** Whether or not the slider is disabled. */
+    private _disabled;
     disabled: boolean;
     /** Whether or not to show the thumb label. */
+    private _thumbLabel;
     thumbLabel: boolean;
-    /** The miniumum value that the slider can have. */
-    private _min;
-    /** The maximum value that the slider can have. */
-    private _max;
-    /** The percentage of the slider that coincides with the value. */
-    private _percent;
     private _controlValueAccessorChangeFn;
+    /** The last value for which a change event was emitted. */
+    private _lastEmittedValue;
     /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
     onTouched: () => any;
-    /** The values at which the thumb will snap. */
-    step: number;
     /**
-     * How often to show ticks. Relative to the step so that a tick always appears on a step.
-     * Ex: Tick interval of 4 with a step of 3 will draw a tick every 4 steps (every 12 values).
-     */
-    _tickInterval: 'auto' | number;
-    /**
      * Whether or not the thumb is sliding.
      * Used to determine if there should be a transition for the thumb and fill track.
-     * TODO: internal
      */
-    isSliding: boolean;
+    _isSliding: boolean;
     /**
      * Whether or not the slider is active (clicked or sliding).
      * Used to shrink and grow the thumb as according to the Material Design spec.
-     * TODO: internal
      */
-    isActive: boolean;
-    /** Indicator for if the value has been set or not. */
-    private _isInitialized;
+    _isActive: boolean;
+    /** The values at which the thumb will snap. */
+    private _step;
+    step: number;
+    /**
+     * How often to show ticks. Relative to the step so that a tick always appears on a step.
+     * Ex: Tick interval of 4 with a step of 3 will draw a tick every 4 steps (every 12 values).
+     */
+    private _tickInterval;
+    tickInterval: number | "auto";
+    /** The size of a tick interval as a percentage of the size of the track. */
+    private _tickIntervalPercent;
+    readonly tickIntervalPercent: number;
+    /** The percentage of the slider that coincides with the value. */
+    private _percent;
+    readonly percent: number;
     /** Value of the slider. */
     private _value;
+    value: number;
+    /** The miniumum value that the slider can have. */
+    private _min;
     min: number;
+    /** The maximum value that the slider can have. */
+    private _max;
     max: number;
-    value: number;
+    readonly trackFillFlexBasis: string;
+    readonly ticksMarginLeft: string;
+    readonly ticksContainerMarginLeft: string;
+    readonly ticksBackgroundSize: string;
+    change: EventEmitter<MdSliderChange>;
     constructor(elementRef: ElementRef);
+    _onMouseenter(): void;
+    _onClick(event: MouseEvent): void;
+    _onSlide(event: HammerInput): void;
+    _onSlideStart(event: HammerInput): void;
+    _onSlideEnd(): void;
+    _onBlur(): void;
     /**
-     * Once the slider has rendered, grab the dimensions and update the position of the thumb and
-     * fill track.
-     * TODO: internal
-     */
-    ngAfterContentInit(): void;
-    /** TODO: internal */
-    onClick(event: MouseEvent): void;
-    /** TODO: internal */
-    onSlide(event: HammerInput): void;
-    /** TODO: internal */
-    onSlideStart(event: HammerInput): void;
-    /** TODO: internal */
-    onSlideEnd(): void;
-    /** TODO: internal */
-    onResize(): void;
-    /** TODO: internal */
-    onBlur(): void;
-    /**
-     * When the value changes without a physical position, the percentage needs to be recalculated
-     * independent of the physical location.
-     * This is also used to move the thumb to a snapped value once sliding is done.
-     */
-    updatePercentFromValue(): void;
-    /**
      * Calculate the new value from the new physical location. The value will always be snapped.
      */
-    updateValueFromPosition(pos: number): void;
+    private _updateValueFromPosition(pos);
+    /** Emits a change event if the current value is different from the last emitted value. */
+    private _emitValueIfChanged();
     /**
-     * Snaps the thumb to the current value.
-     * Called after a click or drag event is over.
+     * Updates the amount of space between ticks as a percentage of the width of the slider.
      */
-    snapThumbToValue(): void;
+    private _updateTickIntervalPercent();
     /**
-     * Calculates the separation in pixels of tick marks. If there is no tick interval or the interval
-     * is set to something other than a number or 'auto', nothing happens.
-     */
-    private _updateTickSeparation();
-    /**
-     * Calculates the optimal separation in pixels of tick marks based on the minimum auto tick
-     * separation constant.
-     */
-    private _updateAutoTickSeparation();
-    /**
-     * Calculates the separation of tick marks by finding the pixel value of the tickInterval.
-     */
-    private _updateTickSeparationFromInterval();
-    /**
      * Calculates the percentage of the slider that a value is.
      */
-    calculatePercentage(value: number): number;
+    private _calculatePercentage(value);
     /**
      * Calculates the value a percentage of the slider corresponds to.
      */
-    calculateValue(percentage: number): number;
+    private _calculateValue(percentage);
     /**
      * Return a number between two numbers.
      */
-    clamp(value: number, min?: number, max?: number): number;
+    private _clamp(value, min?, max?);
     /**
      * Implemented as part of ControlValueAccessor.
-     * TODO: internal
      */
@@ -120,3 +105,2 @@ writeValue(value: any): void;
      * Implemented as part of ControlValueAccessor.
-     * TODO: internal
      */
@@ -126,5 +110,8 @@ registerOnChange(fn: (value: any) => void): void;
      * Implemented as part of ControlValueAccessor.
-     * TODO: internal
      */
     registerOnTouched(fn: any): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    setDisabledState(isDisabled: boolean): void;
 }
@@ -144,6 +131,2 @@ /**
     /**
-     * Update the physical position of the thumb and fill track on the slider.
-     */
-    updateThumbAndFillPosition(percent: number, width: number): void;
-    /**
      * Focuses the native element.
@@ -153,6 +136,2 @@ * Currently only used to allow a blur event to fire but will be used with keyboard input later.
     addFocus(): void;
-    /**
-     * Draws ticks onto the tick container.
-     */
-    drawTicks(tickSeparation: number): void;
 }
@@ -159,0 +138,0 @@ export declare class MdSliderModule {

slider/slider.js

@@ -10,6 +10,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { NgModule, Component, ElementRef, HostBinding, Input, ViewEncapsulation, forwardRef } from '@angular/core';
+import { NgModule, Component, ElementRef, Input, Output, ViewEncapsulation, forwardRef, EventEmitter } from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
-import { BooleanFieldValue, MdGestureConfig, applyCssTransform } from '../core';
+import { MdGestureConfig, coerceBooleanProperty, coerceNumberProperty } from '../core';
 /**
@@ -29,2 +29,8 @@ * Visually, a 30px separation between tick marks looks best. This is very subjective but it is
 };
+/** A simple change event emitted by the MdSlider component. */
+export var MdSliderChange = (function () {
+    function MdSliderChange() {
+    }
+    return MdSliderChange;
+}());
 export var MdSlider = (function () {
@@ -36,34 +42,92 @@ function MdSlider(elementRef) {
         this._sliderDimensions = null;
-        this.disabled = false;
+        /** Whether or not the slider is disabled. */
+        this._disabled = false;
         /** Whether or not to show the thumb label. */
-        this.thumbLabel = false;
-        /** The miniumum value that the slider can have. */
-        this._min = 0;
-        /** The maximum value that the slider can have. */
-        this._max = 100;
-        /** The percentage of the slider that coincides with the value. */
-        this._percent = 0;
-        this._controlValueAccessorChangeFn = function (value) { };
+        this._thumbLabel = false;
+        this._controlValueAccessorChangeFn = function () { };
+        /** The last value for which a change event was emitted. */
+        this._lastEmittedValue = null;
         /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
         this.onTouched = function () { };
-        /** The values at which the thumb will snap. */
-        this.step = 1;
         /**
          * Whether or not the thumb is sliding.
          * Used to determine if there should be a transition for the thumb and fill track.
-         * TODO: internal
          */
-        this.isSliding = false;
+        this._isSliding = false;
         /**
          * Whether or not the slider is active (clicked or sliding).
          * Used to shrink and grow the thumb as according to the Material Design spec.
-         * TODO: internal
          */
-        this.isActive = false;
-        /** Indicator for if the value has been set or not. */
-        this._isInitialized = false;
+        this._isActive = false;
+        /** The values at which the thumb will snap. */
+        this._step = 1;
+        /**
+         * How often to show ticks. Relative to the step so that a tick always appears on a step.
+         * Ex: Tick interval of 4 with a step of 3 will draw a tick every 4 steps (every 12 values).
+         */
+        this._tickInterval = 0;
+        /** The size of a tick interval as a percentage of the size of the track. */
+        this._tickIntervalPercent = 0;
+        /** The percentage of the slider that coincides with the value. */
+        this._percent = 0;
         /** Value of the slider. */
-        this._value = 0;
+        this._value = null;
+        /** The miniumum value that the slider can have. */
+        this._min = 0;
+        /** The maximum value that the slider can have. */
+        this._max = 100;
+        this.change = new EventEmitter();
         this._renderer = new SliderRenderer(elementRef);
     }
+    Object.defineProperty(MdSlider.prototype, "disabled", {
+        get: function () { return this._disabled; },
+        set: function (value) { this._disabled = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdSlider.prototype, "thumbLabel", {
+        get: function () { return this._thumbLabel; },
+        set: function (value) { this._thumbLabel = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdSlider.prototype, "step", {
+        get: function () { return this._step; },
+        set: function (v) { this._step = coerceNumberProperty(v, this._step); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdSlider.prototype, "tickInterval", {
+        get: function () { return this._tickInterval; },
+        set: function (v) {
+            this._tickInterval = (v == 'auto') ? v : coerceNumberProperty(v, this._tickInterval);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdSlider.prototype, "tickIntervalPercent", {
+        get: function () { return this._tickIntervalPercent; },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdSlider.prototype, "percent", {
+        get: function () { return this._clamp(this._percent); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdSlider.prototype, "value", {
+        get: function () {
+            // If the value needs to be read and it is still uninitialized, initialize it to the min.
+            if (this._value === null) {
+                this.value = this._min;
+            }
+            return this._value;
+        },
+        set: function (v) {
+            this._value = coerceNumberProperty(v, this._value);
+            this._percent = this._calculatePercentage(this._value);
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(MdSlider.prototype, "min", {
@@ -74,8 +138,8 @@ get: function () {
         set: function (v) {
-            // This has to be forced as a number to handle the math later.
-            this._min = Number(v);
+            this._min = coerceNumberProperty(v, this._min);
             // If the value wasn't explicitly set by the user, set it to the min.
-            if (!this._isInitialized) {
+            if (this._value === null) {
                 this.value = this._min;
             }
+            this._percent = this._calculatePercentage(this.value);
         },
@@ -90,3 +154,4 @@ enumerable: true,
         set: function (v) {
-            this._max = Number(v);
+            this._max = coerceNumberProperty(v, this._max);
+            this._percent = this._calculatePercentage(this.value);
         },
@@ -96,15 +161,12 @@ enumerable: true,
     });
-    Object.defineProperty(MdSlider.prototype, "value", {
+    Object.defineProperty(MdSlider.prototype, "trackFillFlexBasis", {
         get: function () {
-            return this._value;
+            return this.percent * 100 + '%';
         },
-        set: function (v) {
-            // Only set the value to a valid number. v is casted to an any as we know it will come in as a
-            // string but it is labeled as a number which causes parseFloat to not accept it.
-            if (isNaN(parseFloat(v))) {
-                return;
-            }
-            this._value = Number(v);
-            this._isInitialized = true;
-            this._controlValueAccessorChangeFn(this._value);
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdSlider.prototype, "ticksMarginLeft", {
+        get: function () {
+            return this.tickIntervalPercent / 2 * 100 + '%';
         },
@@ -114,28 +176,36 @@ enumerable: true,
     });
-    /**
-     * Once the slider has rendered, grab the dimensions and update the position of the thumb and
-     * fill track.
-     * TODO: internal
-     */
-    MdSlider.prototype.ngAfterContentInit = function () {
+    Object.defineProperty(MdSlider.prototype, "ticksContainerMarginLeft", {
+        get: function () {
+            return '-' + this.ticksMarginLeft;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdSlider.prototype, "ticksBackgroundSize", {
+        get: function () {
+            return this.tickIntervalPercent * 100 + '% 2px';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    MdSlider.prototype._onMouseenter = function () {
+        if (this.disabled) {
+            return;
+        }
+        // We save the dimensions of the slider here so we can use them to update the spacing of the
+        // ticks and determine where on the slider click and slide events happen.
         this._sliderDimensions = this._renderer.getSliderDimensions();
-        // This needs to be called after content init because the value can be set to the min if the
-        // value itself isn't set. If this happens, the control value accessor needs to be updated.
-        this._controlValueAccessorChangeFn(this.value);
-        this.snapThumbToValue();
-        this._updateTickSeparation();
+        this._updateTickIntervalPercent();
     };
-    /** TODO: internal */
-    MdSlider.prototype.onClick = function (event) {
+    MdSlider.prototype._onClick = function (event) {
         if (this.disabled) {
             return;
         }
-        this.isActive = true;
-        this.isSliding = false;
+        this._isActive = true;
+        this._isSliding = false;
         this._renderer.addFocus();
-        this.updateValueFromPosition(event.clientX);
-        this.snapThumbToValue();
+        this._updateValueFromPosition(event.clientX);
+        this._emitValueIfChanged();
     };
-    /** TODO: internal */
-    MdSlider.prototype.onSlide = function (event) {
+    MdSlider.prototype._onSlide = function (event) {
         if (this.disabled) {
@@ -146,6 +216,5 @@ return;
         event.preventDefault();
-        this.updateValueFromPosition(event.center.x);
+        this._updateValueFromPosition(event.center.x);
     };
-    /** TODO: internal */
-    MdSlider.prototype.onSlideStart = function (event) {
+    MdSlider.prototype._onSlideStart = function (event) {
         if (this.disabled) {
@@ -155,41 +224,27 @@ return;
         event.preventDefault();
-        this.isSliding = true;
-        this.isActive = true;
+        this._isSliding = true;
+        this._isActive = true;
         this._renderer.addFocus();
-        this.updateValueFromPosition(event.center.x);
+        this._updateValueFromPosition(event.center.x);
     };
-    /** TODO: internal */
-    MdSlider.prototype.onSlideEnd = function () {
-        this.isSliding = false;
-        this.snapThumbToValue();
+    MdSlider.prototype._onSlideEnd = function () {
+        this._isSliding = false;
+        this._emitValueIfChanged();
     };
-    /** TODO: internal */
-    MdSlider.prototype.onResize = function () {
-        this.isSliding = true;
-        this._sliderDimensions = this._renderer.getSliderDimensions();
-        // Skip updating the value and position as there is no new placement.
-        this._renderer.updateThumbAndFillPosition(this._percent, this._sliderDimensions.width);
-    };
-    /** TODO: internal */
-    MdSlider.prototype.onBlur = function () {
-        this.isActive = false;
+    MdSlider.prototype._onBlur = function () {
+        this._isActive = false;
         this.onTouched();
     };
     /**
-     * When the value changes without a physical position, the percentage needs to be recalculated
-     * independent of the physical location.
-     * This is also used to move the thumb to a snapped value once sliding is done.
-     */
-    MdSlider.prototype.updatePercentFromValue = function () {
-        this._percent = this.calculatePercentage(this.value);
-    };
-    /**
      * Calculate the new value from the new physical location. The value will always be snapped.
      */
-    MdSlider.prototype.updateValueFromPosition = function (pos) {
+    MdSlider.prototype._updateValueFromPosition = function (pos) {
+        if (!this._sliderDimensions) {
+            return;
+        }
         var offset = this._sliderDimensions.left;
         var size = this._sliderDimensions.width;
         // The exact value is calculated from the event and used to find the closest snap value.
-        this._percent = this.clamp((pos - offset) / size);
-        var exactValue = this.calculateValue(this._percent);
+        var percent = this._clamp((pos - offset) / size);
+        var exactValue = this._calculateValue(percent);
         // This calculation finds the closest step by finding the closest whole number divisible by the
@@ -199,68 +254,36 @@ // step relative to the min.
         // The value needs to snap to the min and max.
-        this.value = this.clamp(closestValue, this.min, this.max);
-        this._renderer.updateThumbAndFillPosition(this._percent, this._sliderDimensions.width);
+        this.value = this._clamp(closestValue, this.min, this.max);
     };
-    /**
-     * Snaps the thumb to the current value.
-     * Called after a click or drag event is over.
-     */
-    MdSlider.prototype.snapThumbToValue = function () {
-        this.updatePercentFromValue();
-        this._renderer.updateThumbAndFillPosition(this._percent, this._sliderDimensions.width);
+    /** Emits a change event if the current value is different from the last emitted value. */
+    MdSlider.prototype._emitValueIfChanged = function () {
+        if (this.value != this._lastEmittedValue) {
+            var event_1 = new MdSliderChange();
+            event_1.source = this;
+            event_1.value = this.value;
+            this.change.emit(event_1);
+            this._controlValueAccessorChangeFn(this.value);
+            this._lastEmittedValue = this.value;
+        }
     };
     /**
-     * Calculates the separation in pixels of tick marks. If there is no tick interval or the interval
-     * is set to something other than a number or 'auto', nothing happens.
+     * Updates the amount of space between ticks as a percentage of the width of the slider.
      */
-    MdSlider.prototype._updateTickSeparation = function () {
-        if (this._tickInterval == 'auto') {
-            this._updateAutoTickSeparation();
+    MdSlider.prototype._updateTickIntervalPercent = function () {
+        if (!this.tickInterval) {
+            return;
         }
-        else if (Number(this._tickInterval)) {
-            this._updateTickSeparationFromInterval();
+        if (this.tickInterval == 'auto') {
+            var pixelsPerStep = this._sliderDimensions.width * this.step / (this.max - this.min);
+            var stepsPerTick = Math.ceil(MIN_AUTO_TICK_SEPARATION / pixelsPerStep);
+            var pixelsPerTick = stepsPerTick * this.step;
+            this._tickIntervalPercent = pixelsPerTick / (this._sliderDimensions.width);
         }
+        else {
+            this._tickIntervalPercent = this.tickInterval * this.step / (this.max - this.min);
+        }
     };
     /**
-     * Calculates the optimal separation in pixels of tick marks based on the minimum auto tick
-     * separation constant.
-     */
-    MdSlider.prototype._updateAutoTickSeparation = function () {
-        // We're looking for the multiple of step for which the separation between is greater than the
-        // minimum tick separation.
-        var sliderWidth = this._sliderDimensions.width;
-        // This is the total "width" of the slider in terms of values.
-        var valueWidth = this.max - this.min;
-        // Calculate how many values exist within 1px on the slider.
-        var valuePerPixel = valueWidth / sliderWidth;
-        // Calculate how many values exist in the minimum tick separation (px).
-        var valuePerSeparation = valuePerPixel * MIN_AUTO_TICK_SEPARATION;
-        // Calculate how many steps exist in this separation. This will be the lowest value you can
-        // multiply step by to get a separation that is greater than or equal to the minimum tick
-        // separation.
-        var stepsPerSeparation = Math.ceil(valuePerSeparation / this.step);
-        // Get the percentage of the slider for which this tick would be located so we can then draw
-        // it on the slider.
-        var tickPercentage = this.calculatePercentage((this.step * stepsPerSeparation) + this.min);
-        // The pixel value of the tick is the percentage * the width of the slider. Use this to draw
-        // the ticks on the slider.
-        this._renderer.drawTicks(sliderWidth * tickPercentage);
-    };
-    /**
-     * Calculates the separation of tick marks by finding the pixel value of the tickInterval.
-     */
-    MdSlider.prototype._updateTickSeparationFromInterval = function () {
-        // Force tickInterval to be a number so it can be used in calculations.
-        var interval = this._tickInterval;
-        // Calculate the first value a tick will be located at by getting the step at which the interval
-        // lands and adding that to the min.
-        var tickValue = (this.step * interval) + this.min;
-        // The percentage of the step on the slider is needed in order to calculate the pixel offset
-        // from the beginning of the slider. This offset is the tick separation.
-        var tickPercentage = this.calculatePercentage(tickValue);
-        this._renderer.drawTicks(this._sliderDimensions.width * tickPercentage);
-    };
-    /**
      * Calculates the percentage of the slider that a value is.
      */
-    MdSlider.prototype.calculatePercentage = function (value) {
+    MdSlider.prototype._calculatePercentage = function (value) {
         return (value - this.min) / (this.max - this.min);
@@ -271,4 +294,4 @@ };
      */
-    MdSlider.prototype.calculateValue = function (percentage) {
-        return this.min + (percentage * (this.max - this.min));
+    MdSlider.prototype._calculateValue = function (percentage) {
+        return this.min + percentage * (this.max - this.min);
     };
@@ -278,3 +301,3 @@ /**
      */
-    MdSlider.prototype.clamp = function (value, min, max) {
+    MdSlider.prototype._clamp = function (value, min, max) {
         if (min === void 0) { min = 0; }
@@ -286,13 +309,8 @@ if (max === void 0) { max = 1; }
      * Implemented as part of ControlValueAccessor.
-     * TODO: internal
      */
     MdSlider.prototype.writeValue = function (value) {
         this.value = value;
-        if (this._sliderDimensions) {
-            this.snapThumbToValue();
-        }
     };
     /**
      * Implemented as part of ControlValueAccessor.
-     * TODO: internal
      */
@@ -304,3 +322,2 @@ MdSlider.prototype.registerOnChange = function (fn) {
      * Implemented as part of ControlValueAccessor.
-     * TODO: internal
      */
@@ -310,37 +327,40 @@ MdSlider.prototype.registerOnTouched = function (fn) {
     };
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    MdSlider.prototype.setDisabledState = function (isDisabled) {
+        this.disabled = isDisabled;
+    };
     __decorate([
-        Input(),
-        BooleanFieldValue(),
-        HostBinding('class.md-slider-disabled'),
-        HostBinding('attr.aria-disabled'), 
+        Input(), 
         __metadata('design:type', Boolean)
-    ], MdSlider.prototype, "disabled", void 0);
+    ], MdSlider.prototype, "disabled", null);
     __decorate([
-        Input('thumb-label'),
-        BooleanFieldValue(), 
+        Input('thumb-label'), 
         __metadata('design:type', Boolean)
-    ], MdSlider.prototype, "thumbLabel", void 0);
+    ], MdSlider.prototype, "thumbLabel", null);
     __decorate([
         Input(), 
-        __metadata('design:type', Number)
-    ], MdSlider.prototype, "step", void 0);
+        __metadata('design:type', Object)
+    ], MdSlider.prototype, "step", null);
     __decorate([
         Input('tick-interval'), 
         __metadata('design:type', Object)
-    ], MdSlider.prototype, "_tickInterval", void 0);
+    ], MdSlider.prototype, "tickInterval", null);
     __decorate([
-        Input(),
-        HostBinding('attr.aria-valuemin'), 
+        Input(), 
         __metadata('design:type', Object)
+    ], MdSlider.prototype, "value", null);
+    __decorate([
+        Input(), 
+        __metadata('design:type', Object)
     ], MdSlider.prototype, "min", null);
     __decorate([
-        Input(),
-        HostBinding('attr.aria-valuemax'), 
+        Input(), 
         __metadata('design:type', Object)
     ], MdSlider.prototype, "max", null);
     __decorate([
-        Input(),
-        HostBinding('attr.aria-valuenow'), 
+        Output(), 
         __metadata('design:type', Object)
-    ], MdSlider.prototype, "value", null);
+    ], MdSlider.prototype, "change", void 0);
     MdSlider = __decorate([
@@ -350,12 +370,21 @@ Component({selector: 'md-slider',
             host: {
+                '(blur)': '_onBlur()',
+                '(click)': '_onClick($event)',
+                '(mouseenter)': '_onMouseenter()',
+                '(slide)': '_onSlide($event)',
+                '(slideend)': '_onSlideEnd()',
+                '(slidestart)': '_onSlideStart($event)',
                 'tabindex': '0',
-                '(click)': 'onClick($event)',
-                '(slide)': 'onSlide($event)',
-                '(slidestart)': 'onSlideStart($event)',
-                '(slideend)': 'onSlideEnd()',
-                '(window:resize)': 'onResize()',
-                '(blur)': 'onBlur()',
+                '[attr.aria-disabled]': 'disabled',
+                '[attr.aria-valuemax]': 'max',
+                '[attr.aria-valuemin]': 'min',
+                '[attr.aria-valuenow]': 'value',
+                '[class.md-slider-active]': '_isActive',
+                '[class.md-slider-disabled]': 'disabled',
+                '[class.md-slider-has-ticks]': 'tickInterval',
+                '[class.md-slider-sliding]': '_isSliding',
+                '[class.md-slider-thumb-label-showing]': 'thumbLabel',
             },
-            template: "<div class=\"md-slider-wrapper\"> <div class=\"md-slider-container\" [class.md-slider-sliding]=\"isSliding\" [class.md-slider-active]=\"isActive\" [class.md-slider-thumb-label-showing]=\"thumbLabel\"> <div class=\"md-slider-track-container\"> <div class=\"md-slider-track\"></div> <div class=\"md-slider-track md-slider-track-fill\"></div> <div class=\"md-slider-tick-container\"></div> <div class=\"md-slider-last-tick-container\"></div> </div> <div class=\"md-slider-thumb-container\"> <div class=\"md-slider-thumb-position\"> <div class=\"md-slider-thumb\"></div> <div class=\"md-slider-thumb-label\"> <span class=\"md-slider-thumb-label-text\">{{value}}</span> </div> </div> </div> </div> </div> ",
-            styles: ["md-slider { height: 48px; min-width: 128px; position: relative; padding: 0; display: inline-block; outline: none; vertical-align: middle; } md-slider *, md-slider *::after { box-sizing: border-box; } .md-slider-wrapper { width: 100%; height: 100%; padding-left: 8px; padding-right: 8px; } .md-slider-container { position: relative; } .md-slider-track-container { width: 100%; position: absolute; top: 23px; height: 2px; } .md-slider-track { position: absolute; left: 0; right: 0; height: 100%; } .md-slider-track-fill { transition-duration: 400ms; transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); transition-property: width, height; } .md-slider-tick-container, .md-slider-last-tick-container { position: absolute; left: 0; right: 0; height: 100%; } .md-slider-thumb-container { position: absolute; left: 0; top: 50%; transform: translate3d(-50%, -50%, 0); transition-duration: 400ms; transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); transition-property: left, bottom; } .md-slider-thumb-position { transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1); } .md-slider-thumb { z-index: 1; position: absolute; top: 14px; left: -10px; width: 20px; height: 20px; border-radius: 20px; transform: scale(0.7); transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1); } .md-slider-thumb::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 20px; border-width: 3px; border-style: solid; transition: inherit; } .md-slider-thumb-label { display: flex; align-items: center; justify-content: center; position: absolute; left: -14px; top: -17px; width: 28px; height: 28px; border-radius: 50%; transform: scale(0.4) translate3d(0, 67.5px, 0) rotate(45deg); transition: 300ms cubic-bezier(0.35, 0, 0.25, 1); transition-property: transform, border-radius; } .md-slider-thumb-label-text { z-index: 1; font-size: 12px; font-weight: bold; opacity: 0; transform: rotate(-45deg); transition: opacity 300ms cubic-bezier(0.35, 0, 0.25, 1); } .md-slider-container:not(.md-slider-thumb-label-showing) .md-slider-thumb-label { display: none; } .md-slider-active.md-slider-thumb-label-showing .md-slider-thumb { transform: scale(0); } .md-slider-sliding .md-slider-thumb-position, .md-slider-sliding .md-slider-track-fill { transition: none; cursor: default; } .md-slider-active .md-slider-thumb { transform: scale(1); } .md-slider-active .md-slider-thumb-label { border-radius: 50% 50% 0; transform: rotate(45deg); } .md-slider-active .md-slider-thumb-label-text { opacity: 1; } /*# sourceMappingURL=slider.css.map */ "],
+            template: "<div class=\"md-slider-track\"> <div class=\"md-slider-track-fill\" [style.flexBasis]=\"trackFillFlexBasis\"></div> <div class=\"md-slider-ticks-container\" [style.marginLeft]=\"ticksContainerMarginLeft\"> <div class=\"md-slider-ticks\" [style.marginLeft]=\"ticksMarginLeft\" [style.backgroundSize]=\"ticksBackgroundSize\"></div> </div> <div class=\"md-slider-thumb-container\"> <div class=\"md-slider-thumb\"></div> <div class=\"md-slider-thumb-label\"> <span class=\"md-slider-thumb-label-text\">{{value}}</span> </div> </div> </div>",
+            styles: ["md-slider { display: inline-block; box-sizing: border-box; position: relative; height: 48px; min-width: 128px; padding: 8px; outline: none; vertical-align: middle; } .md-slider-track { display: flex; flex-grow: 1; align-items: center; position: relative; top: 15px; height: 2px; transition: box-shadow 400ms cubic-bezier(0.25, 0.8, 0.25, 1); } .md-slider-has-ticks.md-slider-active .md-slider-track, .md-slider-has-ticks:hover .md-slider-track { box-shadow: inset -4px 0 0 -2px rgba(0, 0, 0, 0.6); } .md-slider-track-fill { flex: 0 0 50%; height: 2px; transition: flex-basis 400ms cubic-bezier(0.25, 0.8, 0.25, 1); } .md-slider-sliding .md-slider-track-fill { transition: none; } .md-slider-ticks-container { position: absolute; left: 0; top: 0; height: 2px; width: 100%; overflow: hidden; } .md-slider-ticks { background: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) 2px, transparent 0, transparent) repeat; background: -moz-repeating-linear-gradient(0.0001deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) 2px, transparent 0, transparent) repeat; height: 2px; width: 100%; opacity: 0; transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); } .md-slider-has-ticks.md-slider-active .md-slider-ticks, .md-slider-has-ticks:hover .md-slider-ticks { opacity: 1; } .md-slider-thumb-container { flex: 0 0 auto; position: relative; width: 0; height: 0; } .md-slider-thumb { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; transform-origin: 50% 50%; transform: scale(0.7); transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1); } .md-slider-active .md-slider-thumb { transform: scale(1); } .md-slider-active.md-slider-thumb-label-showing .md-slider-thumb { transform: scale(0); } .md-slider-thumb-label { display: flex; align-items: center; justify-content: center; position: absolute; left: -14px; top: -40px; width: 28px; height: 28px; border-radius: 50%; transform: translateY(26px) scale(0.4) rotate(45deg); transition: 300ms cubic-bezier(0.35, 0, 0.25, 1); transition-property: transform, border-radius; } .md-slider-active .md-slider-thumb-label { border-radius: 50% 50% 0; transform: rotate(45deg); } md-slider:not(.md-slider-thumb-label-showing) .md-slider-thumb-label { display: none; } .md-slider-thumb-label-text { z-index: 1; font-size: 12px; font-weight: bold; opacity: 0; transform: rotate(-45deg); transition: opacity 300ms cubic-bezier(0.35, 0, 0.25, 1); } .md-slider-active .md-slider-thumb-label-text { opacity: 1; } /*# sourceMappingURL=slider.css.map */ "],
             encapsulation: ViewEncapsulation.None,
@@ -384,13 +413,2 @@ }),
     /**
-     * Update the physical position of the thumb and fill track on the slider.
-     */
-    SliderRenderer.prototype.updateThumbAndFillPosition = function (percent, width) {
-        // A container element that is used to avoid overwriting the transform on the thumb itself.
-        var thumbPositionElement = this._sliderElement.querySelector('.md-slider-thumb-position');
-        var fillTrackElement = this._sliderElement.querySelector('.md-slider-track-fill');
-        var position = Math.round(percent * width);
-        fillTrackElement.style.width = position + "px";
-        applyCssTransform(thumbPositionElement, "translateX(" + position + "px)");
-    };
-    /**
      * Focuses the native element.
@@ -402,25 +420,2 @@ * Currently only used to allow a blur event to fire but will be used with keyboard input later.
     };
-    /**
-     * Draws ticks onto the tick container.
-     */
-    SliderRenderer.prototype.drawTicks = function (tickSeparation) {
-        var tickContainer = this._sliderElement.querySelector('.md-slider-tick-container');
-        var tickContainerWidth = tickContainer.getBoundingClientRect().width;
-        // An extra element for the last tick is needed because the linear gradient cannot be told to
-        // always draw a tick at the end of the gradient. To get around this, there is a second
-        // container for ticks that has a single tick mark on the very right edge.
-        var lastTickContainer = this._sliderElement.querySelector('.md-slider-last-tick-container');
-        // Subtract 1 from the tick separation to center the tick.
-        // TODO: Evaluate the rendering performance of using repeating background gradients.
-        tickContainer.style.background = "repeating-linear-gradient(to right, black, black 2px, " +
-            ("transparent 2px, transparent " + (tickSeparation - 1) + "px)");
-        // Add a tick to the very end by starting on the right side and adding a 2px black line.
-        lastTickContainer.style.background = "linear-gradient(to left, black, black 2px, transparent " +
-            "2px, transparent)";
-        // If the second to last tick is too close (a separation of less than half the normal
-        // separation), don't show it by decreasing the width of the tick container element.
-        if (tickContainerWidth % tickSeparation < (tickSeparation / 2)) {
-            tickContainer.style.width = tickContainerWidth - tickSeparation + 'px';
-        }
-    };
     return SliderRenderer;
@@ -427,0 +422,0 @@ }());

slider/slider.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MD_SLIDER_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MdSlider"},"multi":true},"MdSlider":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-slider","providers":[{"__symbolic":"reference","name":"MD_SLIDER_VALUE_ACCESSOR"}],"host":{"tabindex":"0","(click)":"onClick($event)","(slide)":"onSlide($event)","(slidestart)":"onSlideStart($event)","(slideend)":"onSlideEnd()","(window:resize)":"onResize()","(blur)":"onBlur()"},"templateUrl":"slider.html","styleUrls":["slider.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../core","name":"BooleanFieldValue"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.md-slider-disabled"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-disabled"]}]}],"thumbLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["thumb-label"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../core","name":"BooleanFieldValue"}}]}],"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_tickInterval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["tick-interval"]}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-valuemin"]}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-valuemax"]}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-valuenow"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onSlide":[{"__symbolic":"method"}],"onSlideStart":[{"__symbolic":"method"}],"onSlideEnd":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"updatePercentFromValue":[{"__symbolic":"method"}],"updateValueFromPosition":[{"__symbolic":"method"}],"snapThumbToValue":[{"__symbolic":"method"}],"_updateTickSeparation":[{"__symbolic":"method"}],"_updateAutoTickSeparation":[{"__symbolic":"method"}],"_updateTickSeparationFromInterval":[{"__symbolic":"method"}],"calculatePercentage":[{"__symbolic":"method"}],"calculateValue":[{"__symbolic":"method"}],"clamp":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}]}},"MdSliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","name":"MdSlider"}],"declarations":[{"__symbolic":"reference","name":"MdSlider"}],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HAMMER_GESTURE_CONFIG"},"useClass":{"__symbolic":"reference","module":"../core","name":"MdGestureConfig"}}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdSliderModule"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HAMMER_GESTURE_CONFIG"},"useClass":{"__symbolic":"reference","module":"../core","name":"MdGestureConfig"}}]}}}}}}
+{"__symbolic":"module","version":1,"metadata":{"MD_SLIDER_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MdSlider"},"multi":true},"MdSlider":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-slider","providers":[{"__symbolic":"reference","name":"MD_SLIDER_VALUE_ACCESSOR"}],"host":{"(blur)":"_onBlur()","(click)":"_onClick($event)","(mouseenter)":"_onMouseenter()","(slide)":"_onSlide($event)","(slideend)":"_onSlideEnd()","(slidestart)":"_onSlideStart($event)","tabindex":"0","[attr.aria-disabled]":"disabled","[attr.aria-valuemax]":"max","[attr.aria-valuemin]":"min","[attr.aria-valuenow]":"value","[class.md-slider-active]":"_isActive","[class.md-slider-disabled]":"disabled","[class.md-slider-has-ticks]":"tickInterval","[class.md-slider-sliding]":"_isSliding","[class.md-slider-thumb-label-showing]":"thumbLabel"},"templateUrl":"slider.html","styleUrls":["slider.css"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"thumbLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["thumb-label"]}]}],"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tickInterval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["tick-interval"]}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"_onMouseenter":[{"__symbolic":"method"}],"_onClick":[{"__symbolic":"method"}],"_onSlide":[{"__symbolic":"method"}],"_onSlideStart":[{"__symbolic":"method"}],"_onSlideEnd":[{"__symbolic":"method"}],"_onBlur":[{"__symbolic":"method"}],"_updateValueFromPosition":[{"__symbolic":"method"}],"_emitValueIfChanged":[{"__symbolic":"method"}],"_updateTickIntervalPercent":[{"__symbolic":"method"}],"_calculatePercentage":[{"__symbolic":"method"}],"_calculateValue":[{"__symbolic":"method"}],"_clamp":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}]}},"MdSliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","name":"MdSlider"}],"declarations":[{"__symbolic":"reference","name":"MdSlider"}],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HAMMER_GESTURE_CONFIG"},"useClass":{"__symbolic":"reference","module":"../core","name":"MdGestureConfig"}}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdSliderModule"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HAMMER_GESTURE_CONFIG"},"useClass":{"__symbolic":"reference","module":"../core","name":"MdGestureConfig"}}]}}}}}}

slider/test-gesture-config.d.ts

@@ -20,3 +20,3 @@ import { MdGestureConfig } from '../core';
      */
-    emitEventForElement(eventType: string, element: HTMLElement, eventData: Object): void;
+    emitEventForElement(eventType: string, element: HTMLElement, eventData?: {}): void;
 }

slider/test-gesture-config.js

@@ -49,2 +49,3 @@ var __extends = (this && this.__extends) || function (d, b) {
     TestGestureConfig.prototype.emitEventForElement = function (eventType, element, eventData) {
+        if (eventData === void 0) { eventData = {}; }
         var instances = this.hammerInstances.get(element);
@@ -51,0 +52,0 @@ instances.forEach(function (instance) { return instance.emit(eventType, eventData); });

snack-bar/index.d.ts

 export * from './snack-bar';
+export * from './snack-bar-container';
+export * from './snack-bar-config';
+export * from './snack-bar-ref';

snack-bar/index.js

 export * from './snack-bar';
+export * from './snack-bar-container';
+export * from './snack-bar-config';
+export * from './snack-bar-ref';
 
 //# sourceMappingURL=index.js.map

snack-bar/index.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./snack-bar"}]}
+{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./snack-bar"},{"from":"./snack-bar-container"},{"from":"./snack-bar-config"},{"from":"./snack-bar-ref"}]}

snack-bar/README.md

@@ -8,4 +8,4 @@ # MdSnackBar
 | --- | --- |
-| `open(message: string,<br>  actionLabel: string, config: MdSnackBarConfig): MdSnackBarRef<SimpleSnackBar>` | Creates and opens a simple snack bar noticiation matching material spec. |
-| `openFromComponent(component: ComponentType<T>, config: MdSnackBarConfig): MdSnackBarRef<T>` | Creates and opens a snack bar noticiation with a custom component as content. |
+| `open(message: string,<br>  actionLabel: string, config: MdSnackBarConfig): MdSnackBarRef<SimpleSnackBar>` | Creates and opens a simple snack bar notification matching material spec. |
+| `openFromComponent(component: ComponentType<T>, config: MdSnackBarConfig): MdSnackBarRef<T>` | Creates and opens a snack bar notification with a custom component as content. |
 
@@ -39,2 +39,2 @@ ### Config
 }
-```
+```

snack-bar/snack-bar-config.d.ts

 import { ViewContainerRef } from '@angular/core';
 import { AriaLivePoliteness } from '../core';
+/**
+ * Configuration used when opening a snack-bar.
+ */
 export declare class MdSnackBarConfig {
     /** The politeness level for the MdAriaLiveAnnouncer announcement. */
-    politeness: AriaLivePoliteness;
+    politeness?: AriaLivePoliteness;
     /** Message to be announced by the MdAriaLiveAnnouncer */
-    announcementMessage: string;
+    announcementMessage?: string;
     /** The view container to place the overlay for the snack bar into. */
-    viewContainerRef: ViewContainerRef;
-    constructor(viewContainerRef: ViewContainerRef);
+    viewContainerRef?: ViewContainerRef;
 }

snack-bar/snack-bar-config.js

@@ -0,6 +1,12 @@
+/**
+ * Configuration used when opening a snack-bar.
+ */
 export var MdSnackBarConfig = (function () {
-    function MdSnackBarConfig(viewContainerRef) {
+    function MdSnackBarConfig() {
         /** The politeness level for the MdAriaLiveAnnouncer announcement. */
         this.politeness = 'assertive';
-        this.viewContainerRef = viewContainerRef;
+        /** Message to be announced by the MdAriaLiveAnnouncer */
+        this.announcementMessage = '';
+        /** The view container to place the overlay for the snack bar into. */
+        this.viewContainerRef = null;
     }
@@ -7,0 +13,0 @@ return MdSnackBarConfig;

snack-bar/snack-bar-container.d.ts

@@ -1,4 +0,8 @@
-import { ComponentRef } from '@angular/core';
+import { ComponentRef, AnimationTransitionEvent, NgZone } from '@angular/core';
 import { BasePortalHost, ComponentPortal, TemplatePortal, PortalHostDirective } from '../core';
 import { MdSnackBarConfig } from './snack-bar-config';
+import { Observable } from 'rxjs/Observable';
+export declare type SnackBarState = 'initial' | 'visible' | 'complete' | 'void';
+export declare const SHOW_ANIMATION: string;
+export declare const HIDE_ANIMATION: string;
 /**
@@ -8,9 +12,22 @@ * Internal component that wraps user-provided snack bar content.
 export declare class MdSnackBarContainer extends BasePortalHost {
+    private _ngZone;
     /** The portal host inside of this container into which the snack bar content will be loaded. */
     _portalHost: PortalHostDirective;
+    /** Subject for notifying that the snack bar has exited from view. */
+    private _onExit;
+    /** The state of the snack bar animations. */
+    animationState: SnackBarState;
     /** The snack bar configuration. */
     snackBarConfig: MdSnackBarConfig;
-    /** Attach a portal as content to this snack bar container. */
+    constructor(_ngZone: NgZone);
+    /** Attach a component portal as content to this snack bar container. */
     attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
+    /** Attach a template portal as content to this snack bar container. */
     attachTemplatePortal(portal: TemplatePortal): Map<string, any>;
+    /** Begin animation of the snack bar exiting from view. */
+    exit(): Observable<void>;
+    /** Mark snack bar as exited from the view. */
+    markAsExited(event: AnimationTransitionEvent): void;
+    /** Begin animation of snack bar entrance into view. */
+    enter(): void;
 }

snack-bar/snack-bar-container.js

@@ -15,5 +15,10 @@ var __extends = (this && this.__extends) || function (d, b) {
 };
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, trigger, state, style, transition, animate, NgZone } from '@angular/core';
 import { BasePortalHost, PortalHostDirective } from '../core';
 import { MdSnackBarContentAlreadyAttached } from './snack-bar-errors';
+import { Subject } from 'rxjs/Subject';
+// TODO(jelbourn): we can't use constants from animation.ts here because you can't use
+// a text interpolation in anything that is analyzed statically with ngc (for AoT compile).
+export var SHOW_ANIMATION = '225ms cubic-bezier(0.4,0.0,1,1)';
+export var HIDE_ANIMATION = '195ms cubic-bezier(0.0,0.0,0.2,1)';
 /**
@@ -24,6 +29,11 @@ * Internal component that wraps user-provided snack bar content.
     __extends(MdSnackBarContainer, _super);
-    function MdSnackBarContainer() {
-        _super.apply(this, arguments);
+    function MdSnackBarContainer(_ngZone) {
+        _super.call(this);
+        this._ngZone = _ngZone;
+        /** Subject for notifying that the snack bar has exited from view. */
+        this._onExit = new Subject();
+        /** The state of the snack bar animations. */
+        this.animationState = 'initial';
     }
-    /** Attach a portal as content to this snack bar container. */
+    /** Attach a component portal as content to this snack bar container. */
     MdSnackBarContainer.prototype.attachComponentPortal = function (portal) {
@@ -35,5 +45,26 @@ if (this._portalHost.hasAttached()) {
     };
+    /** Attach a template portal as content to this snack bar container. */
     MdSnackBarContainer.prototype.attachTemplatePortal = function (portal) {
         throw Error('Not yet implemented');
     };
+    /** Begin animation of the snack bar exiting from view. */
+    MdSnackBarContainer.prototype.exit = function () {
+        this.animationState = 'complete';
+        return this._onExit.asObservable();
+    };
+    /** Mark snack bar as exited from the view. */
+    MdSnackBarContainer.prototype.markAsExited = function (event) {
+        var _this = this;
+        if (event.fromState === 'visible' &&
+            (event.toState === 'void' || event.toState === 'complete')) {
+            this._ngZone.run(function () {
+                _this._onExit.next();
+                _this._onExit.complete();
+            });
+        }
+    };
+    /** Begin animation of snack bar entrance into view. */
+    MdSnackBarContainer.prototype.enter = function () {
+        this.animationState = 'visible';
+    };
     __decorate([
@@ -46,8 +77,19 @@ ViewChild(PortalHostDirective),
             template: "<template portalHost></template>",
-            styles: [":host { box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); background: #323232; border-radius: 2px; display: block; height: 20px; max-width: 568px; min-width: 288px; overflow: hidden; padding: 14px 24px; } /*# sourceMappingURL=snack-bar-container.css.map */ "],
+            styles: [":host { box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); background: #323232; border-radius: 2px; box-sizing: content-box; display: block; height: 20px; max-width: 568px; min-width: 288px; overflow: hidden; padding: 14px 24px; transform: translateY(100%); } /*# sourceMappingURL=snack-bar-container.css.map */ "],
             host: {
-                'role': 'alert'
-            }
+                'role': 'alert',
+                '[@state]': 'animationState',
+                '(@state.done)': 'markAsExited($event)'
+            },
+            animations: [
+                trigger('state', [
+                    state('initial', style({ transform: 'translateY(100%)' })),
+                    state('visible', style({ transform: 'translateY(0%)' })),
+                    state('complete', style({ transform: 'translateY(100%)' })),
+                    transition('visible => complete', animate(HIDE_ANIMATION)),
+                    transition('initial => visible, void => visible', animate(SHOW_ANIMATION)),
+                ])
+            ],
         }), 
-        __metadata('design:paramtypes', [])
+        __metadata('design:paramtypes', [NgZone])
     ], MdSnackBarContainer);
@@ -54,0 +96,0 @@ return MdSnackBarContainer;

snack-bar/snack-bar-container.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MdSnackBarContainer":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"snack-bar-container","templateUrl":"snack-bar-container.html","styleUrls":["snack-bar-container.css"],"host":{"role":"alert"}}]}],"members":{"_portalHost":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../core","name":"PortalHostDirective"}]}]}],"attachComponentPortal":[{"__symbolic":"method"}],"attachTemplatePortal":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"SHOW_ANIMATION":"225ms cubic-bezier(0.4,0.0,1,1)","HIDE_ANIMATION":"195ms cubic-bezier(0.0,0.0,0.2,1)","MdSnackBarContainer":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"snack-bar-container","templateUrl":"snack-bar-container.html","styleUrls":["snack-bar-container.css"],"host":{"role":"alert","[@state]":"animationState","(@state.done)":"markAsExited($event)"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["state",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["initial",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(100%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["complete",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(100%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["visible => complete",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["195ms cubic-bezier(0.0,0.0,0.2,1)"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["initial => visible, void => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["225ms cubic-bezier(0.4,0.0,1,1)"]}]}]]}]}]}],"members":{"_portalHost":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../core","name":"PortalHostDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"attachComponentPortal":[{"__symbolic":"method"}],"attachTemplatePortal":[{"__symbolic":"method"}],"exit":[{"__symbolic":"method"}],"markAsExited":[{"__symbolic":"method"}],"enter":[{"__symbolic":"method"}]}}}}

snack-bar/snack-bar-ref.d.ts

 import { OverlayRef } from '../core';
 import { Observable } from 'rxjs/Observable';
+import { MdSnackBarContainer } from './snack-bar-container';
 /**
@@ -10,5 +11,7 @@ * Reference to a snack bar dispatched from the snack bar service.
     readonly instance: T;
+    /** The instance of the component making up the content of the snack bar. */
+    readonly containerInstance: MdSnackBarContainer;
     /** Subject for notifying the user that the snack bar has closed. */
     private _afterClosed;
-    constructor(instance: T, _overlayRef: OverlayRef);
+    constructor(instance: T, containerInstance: MdSnackBarContainer, _overlayRef: OverlayRef);
     /** Dismisses the snack bar. */
@@ -15,0 +18,0 @@ dismiss(): void;

snack-bar/snack-bar-ref.js

@@ -7,3 +7,3 @@ import { Subject } from 'rxjs/Subject';
 export var MdSnackBarRef = (function () {
-    function MdSnackBarRef(instance, _overlayRef) {
+    function MdSnackBarRef(instance, containerInstance, _overlayRef) {
         this._overlayRef = _overlayRef;
@@ -14,8 +14,13 @@ /** Subject for notifying the user that the snack bar has closed. */
         this.instance = instance;
+        this.containerInstance = containerInstance;
     }
     /** Dismisses the snack bar. */
     MdSnackBarRef.prototype.dismiss = function () {
+        var _this = this;
         if (!this._afterClosed.closed) {
-            this._overlayRef.dispose();
-            this._afterClosed.complete();
+            this.containerInstance.exit().subscribe(function () {
+                _this._overlayRef.dispose();
+                _this._afterClosed.next();
+                _this._afterClosed.complete();
+            });
         }
@@ -22,0 +27,0 @@ };

snack-bar/snack-bar.d.ts

@@ -6,4 +6,2 @@ import { ModuleWithProviders } from '@angular/core';
 import { SimpleSnackBar } from './simple-snack-bar';
-export { MdSnackBarRef } from './snack-bar-ref';
-export { MdSnackBarConfig } from './snack-bar-config';
 /**
@@ -22,7 +20,11 @@ * Service to dispatch Material Design snack bar messages.
      */
-    openFromComponent<T>(component: ComponentType<T>, config: MdSnackBarConfig): MdSnackBarRef<T>;
+    openFromComponent<T>(component: ComponentType<T>, config?: MdSnackBarConfig): MdSnackBarRef<T>;
     /**
-     * Creates and dispatches a snack bar.
+     * Opens a snackbar with a message and an optional action.
+     * @param message The message to show in the snackbar.
+     * @param action The label for the snackbar action.
+     * @param config Additional configuration options for the snackbar.
+     * @returns {MdSnackBarRef<SimpleSnackBar>}
      */
-    open(message: string, actionLabel: string, config: MdSnackBarConfig): MdSnackBarRef<SimpleSnackBar>;
+    open(message: string, action?: string, config?: MdSnackBarConfig): MdSnackBarRef<SimpleSnackBar>;
     /**
@@ -29,0 +31,0 @@ * Attaches the snack bar container component to the overlay.

snack-bar/snack-bar.js

@@ -13,8 +13,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { CommonModule } from '@angular/common';
+import { MdSnackBarConfig } from './snack-bar-config';
 import { MdSnackBarRef } from './snack-bar-ref';
 import { MdSnackBarContainer } from './snack-bar-container';
 import { SimpleSnackBar } from './simple-snack-bar';
-export { MdSnackBarRef } from './snack-bar-ref';
-export { MdSnackBarConfig } from './snack-bar-config';
-// TODO(josephperrott): Animate entrance and exit of snack bars.
+import { extendObject } from '../core/util/object-extend';
 // TODO(josephperrott): Automate dismiss after timeout.
@@ -34,15 +33,36 @@ /**
     MdSnackBar.prototype.openFromComponent = function (component, config) {
+        var _this = this;
+        config = _applyConfigDefaults(config);
+        var overlayRef = this._createOverlay();
+        var snackBarContainer = this._attachSnackBarContainer(overlayRef, config);
+        var snackBarRef = this._attachSnackbarContent(component, snackBarContainer, overlayRef);
+        // When the snackbar is dismissed, clear the reference to it.
+        snackBarRef.afterDismissed().subscribe(function () {
+            _this._snackBarRef = null;
+        });
+        // If a snack bar is already in view, dismiss it and enter the new snack bar after exit
+        // animation is complete.
         if (this._snackBarRef) {
+            this._snackBarRef.afterDismissed().subscribe(function () {
+                snackBarRef.containerInstance.enter();
+            });
             this._snackBarRef.dismiss();
         }
-        var overlayRef = this._createOverlay();
-        var snackBarContainer = this._attachSnackBarContainer(overlayRef, config);
-        var mdSnackBarRef = this._attachSnackbarContent(component, snackBarContainer, overlayRef);
+        else {
+            snackBarRef.containerInstance.enter();
+        }
         this._live.announce(config.announcementMessage, config.politeness);
-        return mdSnackBarRef;
+        this._snackBarRef = snackBarRef;
+        return this._snackBarRef;
     };
     /**
-     * Creates and dispatches a snack bar.
+     * Opens a snackbar with a message and an optional action.
+     * @param message The message to show in the snackbar.
+     * @param action The label for the snackbar action.
+     * @param config Additional configuration options for the snackbar.
+     * @returns {MdSnackBarRef<SimpleSnackBar>}
      */
-    MdSnackBar.prototype.open = function (message, actionLabel, config) {
+    MdSnackBar.prototype.open = function (message, action, config) {
+        if (action === void 0) { action = ''; }
+        if (config === void 0) { config = {}; }
         config.announcementMessage = message;
@@ -52,3 +72,3 @@ var simpleSnackBarRef = this.openFromComponent(SimpleSnackBar, config);
         simpleSnackBarRef.instance.message = message;
-        simpleSnackBarRef.instance.action = actionLabel;
+        simpleSnackBarRef.instance.action = action;
         return simpleSnackBarRef;
@@ -71,5 +91,3 @@ };
         var contentRef = container.attachComponentPortal(portal);
-        var snackBarRef = new MdSnackBarRef(contentRef.instance, overlayRef);
-        this._snackBarRef = snackBarRef;
-        return snackBarRef;
+        return new MdSnackBarRef(contentRef.instance, container, overlayRef);
     };
@@ -93,2 +111,10 @@ /**
 }());
+/**
+ * Applies default options to the snackbar config.
+ * @param config The configuration to which the defaults will be applied.
+ * @returns The new configuration object with defaults applied.
+ */
+function _applyConfigDefaults(config) {
+    return extendObject(new MdSnackBarConfig(), config);
+}
 export var MdSnackBarModule = (function () {
@@ -95,0 +121,0 @@ function MdSnackBarModule() {

snack-bar/snack-bar.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MdSnackBar":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../core","name":"Overlay"},{"__symbolic":"reference","module":"../core","name":"MdLiveAnnouncer"}]}],"openFromComponent":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"_attachSnackBarContainer":[{"__symbolic":"method"}],"_attachSnackbarContent":[{"__symbolic":"method"}],"_createOverlay":[{"__symbolic":"method"}]}},"MdSnackBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"../core","name":"OverlayModule"},{"__symbolic":"reference","module":"../core","name":"PortalModule"},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","module":"./snack-bar-container","name":"MdSnackBarContainer"}],"declarations":[{"__symbolic":"reference","module":"./snack-bar-container","name":"MdSnackBarContainer"},{"__symbolic":"reference","module":"./simple-snack-bar","name":"SimpleSnackBar"}],"entryComponents":[{"__symbolic":"reference","module":"./snack-bar-container","name":"MdSnackBarContainer"},{"__symbolic":"reference","module":"./simple-snack-bar","name":"SimpleSnackBar"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdSnackBarModule"},"providers":[{"__symbolic":"reference","name":"MdSnackBar"},{"__symbolic":"reference","module":"../core","name":"OVERLAY_PROVIDERS"},{"__symbolic":"reference","module":"../core","name":"MdLiveAnnouncer"}]}}}}},"exports":[{"from":"./snack-bar-ref","export":["MdSnackBarRef"]},{"from":"./snack-bar-config","export":["MdSnackBarConfig"]}]}
+{"__symbolic":"module","version":1,"metadata":{"MdSnackBar":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../core","name":"Overlay"},{"__symbolic":"reference","module":"../core","name":"MdLiveAnnouncer"}]}],"openFromComponent":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"_attachSnackBarContainer":[{"__symbolic":"method"}],"_attachSnackbarContent":[{"__symbolic":"method"}],"_createOverlay":[{"__symbolic":"method"}]}},"MdSnackBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"../core","name":"OverlayModule"},{"__symbolic":"reference","module":"../core","name":"PortalModule"},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","module":"./snack-bar-container","name":"MdSnackBarContainer"}],"declarations":[{"__symbolic":"reference","module":"./snack-bar-container","name":"MdSnackBarContainer"},{"__symbolic":"reference","module":"./simple-snack-bar","name":"SimpleSnackBar"}],"entryComponents":[{"__symbolic":"reference","module":"./snack-bar-container","name":"MdSnackBarContainer"},{"__symbolic":"reference","module":"./simple-snack-bar","name":"SimpleSnackBar"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdSnackBarModule"},"providers":[{"__symbolic":"reference","name":"MdSnackBar"},{"__symbolic":"reference","module":"../core","name":"OVERLAY_PROVIDERS"},{"__symbolic":"reference","module":"../core","name":"MdLiveAnnouncer"}]}}}}}}

tabs/README.md

@@ -18,19 +18,13 @@ # MdTabGroup
 
-### Examples
+### Basic use
 A basic tab group would have the following markup.
 ```html
 <md-tab-group>
-  <md-tab>
-    <template md-tab-label>One</template>
-    <template md-tab-content>
-      <h1>Some tab content</h1>
-      <p>...</p>
-    </template>
+  <md-tab label="One">
+    <h1>Some tab content</h1>
+    <p>...</p>
   </md-tab>
-  <md-tab>
-    <template md-tab-label>Two</template>
-    <template md-tab-content>
-      <h1>Some more tab content</h1>
-      <p>...</p>
-    </template>
+  <md-tab label="Two">
+    <h1>Some more tab content</h1>
+    <p>...</p>
   </md-tab>
@@ -40,3 +34,3 @@ </md-tab-group>
 
-It is also possible to specifiy the active tab by using the `selectedIndex` property.
+You can specifiy the active tab by using the `selectedIndex` property.
 
@@ -50,1 +44,24 @@ ```html
 **Note**: The index always starts counting from `zero`.
+
+
+### Tabs with label templates
+If you want to use an arbitrary template for your tab, you can use the `md-tab-label` directive to
+provide the label template:
+```html
+<md-tab-group>
+  <md-tab>
+    <template md-tab-label>
+      The <em>best</em> pasta
+    </template>
+    <h1>Best pasta restaurants</h1>
+    <p>...</p>
+  </md-tab>
+  <md-tab>
+    <template md-tab-label>
+      <md-icon>thumb_down</md-icon> The worst sushi
+    </template>
+    <h1>Terrible sushi restaurants</h1>
+    <p>...</p>
+  </md-tab>
+</md-tab-group>
+```

tabs/tabs.d.ts

@@ -1,4 +0,4 @@
-import { ModuleWithProviders, NgZone, QueryList } from '@angular/core';
+import { ModuleWithProviders, NgZone, QueryList, TemplateRef, ViewContainerRef, OnInit } from '@angular/core';
+import { TemplatePortal } from '../core';
 import { MdTabLabel } from './tab-label';
-import { MdTabContent } from './tab-content';
 import { MdTabLabelWrapper } from './tab-label-wrapper';
@@ -13,7 +13,16 @@ import { MdInkBar } from './ink-bar';
 }
-export declare class MdTab {
-    label: MdTabLabel;
-    content: MdTabContent;
+export declare class MdTab implements OnInit {
+    private _viewContainerRef;
+    /** Content for the tab label given by <template md-tab-label>. */
+    templateLabel: MdTabLabel;
+    /** Template inside the MdTab view that contains an <ng-content>. */
+    _content: TemplateRef<any>;
+    /** The plain text label for the tab, used when there is no template label. */
+    textLabel: string;
+    private _contentPortal;
+    constructor(_viewContainerRef: ViewContainerRef);
+    ngOnInit(): void;
     private _disabled;
     disabled: boolean;
+    readonly content: TemplatePortal;
 }
@@ -39,3 +48,3 @@ /**
     /** Output to enable support for two-way binding on `selectedIndex`. */
-    private readonly _selectedIndexChange;
+    readonly selectedIndexChange: Observable<number>;
     private _onFocusChange;
@@ -49,3 +58,3 @@ readonly focusChange: Observable<MdTabChangeEvent>;
     /**
-     * Waits one frame for the view to update, then upates the ink bar
+     * Waits one frame for the view to update, then updates the ink bar
      * Note: This must be run outside of the zone or it will create an infinite change detection loop
@@ -52,0 +61,0 @@ * TODO: internal

tabs/tabs.js

@@ -10,12 +10,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { NgModule, ContentChild, Directive, Component, Input, Output, ViewChildren, NgZone, EventEmitter, QueryList, ContentChildren } from '@angular/core';
+import { NgModule, ContentChild, ViewChild, Component, Input, Output, ViewChildren, NgZone, EventEmitter, QueryList, ContentChildren, TemplateRef, ViewContainerRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { PortalModule } from '../core';
+import { PortalModule, TemplatePortal, RIGHT_ARROW, LEFT_ARROW, ENTER, coerceBooleanProperty } from '../core';
 import { MdTabLabel } from './tab-label';
-import { MdTabContent } from './tab-content';
 import { MdTabLabelWrapper } from './tab-label-wrapper';
+import { MdTabNavBar, MdTabLink } from './tab-nav-bar/tab-nav-bar';
 import { MdInkBar } from './ink-bar';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
-import { RIGHT_ARROW, LEFT_ARROW, ENTER } from '../core';
 /** Used to generate unique ID's for each tab component */
@@ -30,13 +29,22 @@ var nextId = 0;
 export var MdTab = (function () {
-    function MdTab() {
-        // TODO: Replace this when BooleanFieldValue is removed.
+    function MdTab(_viewContainerRef) {
+        this._viewContainerRef = _viewContainerRef;
+        /** The plain text label for the tab, used when there is no template label. */
+        this.textLabel = '';
+        this._contentPortal = null;
         this._disabled = false;
     }
+    MdTab.prototype.ngOnInit = function () {
+        this._contentPortal = new TemplatePortal(this._content, this._viewContainerRef);
+    };
     Object.defineProperty(MdTab.prototype, "disabled", {
+        get: function () { return this._disabled; },
+        set: function (value) { this._disabled = coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MdTab.prototype, "content", {
         get: function () {
-            return this._disabled;
+            return this._contentPortal;
         },
-        set: function (value) {
-            this._disabled = (value != null && "" + value !== 'false');
-        },
         enumerable: true,
@@ -48,9 +56,13 @@ configurable: true
         __metadata('design:type', MdTabLabel)
-    ], MdTab.prototype, "label", void 0);
+    ], MdTab.prototype, "templateLabel", void 0);
     __decorate([
-        ContentChild(MdTabContent), 
-        __metadata('design:type', MdTabContent)
-    ], MdTab.prototype, "content", void 0);
+        ViewChild(TemplateRef), 
+        __metadata('design:type', TemplateRef)
+    ], MdTab.prototype, "_content", void 0);
     __decorate([
-        Input('disabled'), 
+        Input('label'), 
+        __metadata('design:type', String)
+    ], MdTab.prototype, "textLabel", void 0);
+    __decorate([
+        Input(), 
         __metadata('design:type', Boolean), 
@@ -60,6 +72,6 @@ __metadata('design:paramtypes', [Boolean])
     MdTab = __decorate([
-        Directive({
-            selector: 'md-tab'
+        Component({selector: 'md-tab',
+            template: "<!-- Create a template for the content of the <md-tab> so that we can grab a reference to this TemplateRef and use it in a Portal to render the tab content in the appropriate place in the tab-group. --> <template><ng-content></ng-content></template> ",
         }), 
-        __metadata('design:paramtypes', [])
+        __metadata('design:paramtypes', [ViewContainerRef])
     ], MdTab);
@@ -111,3 +123,3 @@ return MdTab;
     };
-    Object.defineProperty(MdTabGroup.prototype, "_selectedIndexChange", {
+    Object.defineProperty(MdTabGroup.prototype, "selectedIndexChange", {
         /** Output to enable support for two-way binding on `selectedIndex`. */
@@ -135,3 +147,3 @@ get: function () {
     /**
-     * Waits one frame for the view to update, then upates the ink bar
+     * Waits one frame for the view to update, then updates the ink bar
      * Note: This must be run outside of the zone or it will create an infinite change detection loop
@@ -255,11 +267,11 @@ * TODO: internal
     __decorate([
-        Output('selectedIndexChange'), 
+        Output(), 
         __metadata('design:type', Observable)
-    ], MdTabGroup.prototype, "_selectedIndexChange", null);
+    ], MdTabGroup.prototype, "selectedIndexChange", null);
     __decorate([
-        Output('focusChange'), 
+        Output(), 
         __metadata('design:type', Observable)
     ], MdTabGroup.prototype, "focusChange", null);
     __decorate([
-        Output('selectChange'), 
+        Output(), 
         __metadata('design:type', Observable)
@@ -269,4 +281,4 @@ ], MdTabGroup.prototype, "selectChange", null);
         Component({selector: 'md-tab-group',
-            template: "<div class=\"md-tab-header\" role=\"tablist\" (keydown)=\"handleKeydown($event)\"> <div class=\"md-tab-label\" role=\"tab\" md-tab-label-wrapper *ngFor=\"let tab of _tabs; let i = index\" [id]=\"_getTabLabelId(i)\" [tabIndex]=\"selectedIndex == i ? 0 : -1\" [attr.aria-controls]=\"_getTabContentId(i)\" [attr.aria-selected]=\"selectedIndex == i\" [class.md-tab-active]=\"selectedIndex == i\" [class.md-tab-disabled]=\"tab.disabled\" (click)=\"focusIndex = selectedIndex = i\"> <template [portalHost]=\"tab.label\"></template> </div> <md-ink-bar></md-ink-bar> </div> <div class=\"md-tab-body-wrapper\"> <div class=\"md-tab-body\" role=\"tabpanel\" *ngFor=\"let tab of _tabs; let i = index\" [id]=\"_getTabContentId(i)\" [class.md-tab-active]=\"selectedIndex == i\" [attr.aria-labelledby]=\"_getTabLabelId(i)\"> <template [ngIf]=\"selectedIndex == i\"> <template [portalHost]=\"tab.content\"></template> </template> </div> </div> ",
-            styles: [":host { display: flex; flex-direction: column; font-family: Roboto, \"Helvetica Neue\", sans-serif; } .md-tab-header { overflow: hidden; position: relative; display: flex; flex-direction: row; flex-shrink: 0; } .md-tab-label { line-height: 48px; height: 48px; padding: 0 12px; font-size: 14px; font-family: Roboto, \"Helvetica Neue\", sans-serif; font-weight: 500; cursor: pointer; box-sizing: border-box; color: currentColor; opacity: 0.6; min-width: 160px; text-align: center; } .md-tab-label:focus { outline: none; opacity: 1; } .md-tab-disabled { cursor: default; pointer-events: none; } .md-tab-body-wrapper { position: relative; overflow: hidden; flex-grow: 1; display: flex; } .md-tab-body { display: none; overflow: auto; box-sizing: border-box; flex-grow: 1; flex-shrink: 1; } .md-tab-body.md-tab-active { display: block; } md-ink-bar { position: absolute; bottom: 0; height: 2px; transition: 350ms ease-out; } /*# sourceMappingURL=tab-group.css.map */ "],
+            template: "<div class=\"md-tab-header\" role=\"tablist\" (keydown)=\"handleKeydown($event)\"> <div class=\"md-tab-label\" role=\"tab\" md-tab-label-wrapper *ngFor=\"let tab of _tabs; let i = index\" [id]=\"_getTabLabelId(i)\" [tabIndex]=\"selectedIndex == i ? 0 : -1\" [attr.aria-controls]=\"_getTabContentId(i)\" [attr.aria-selected]=\"selectedIndex == i\" [class.md-tab-active]=\"selectedIndex == i\" [class.md-tab-disabled]=\"tab.disabled\" (click)=\"focusIndex = selectedIndex = i\"> <!-- If there is a label template, use it. --> <template [ngIf]=\"tab.templateLabel\"> <template [portalHost]=\"tab.templateLabel\"></template> </template> <!-- If there is not a label template, fall back to the text label. --> <template [ngIf]=\"!tab.templateLabel\">{{tab.textLabel}}</template> </div> <md-ink-bar></md-ink-bar> </div> <div class=\"md-tab-body-wrapper\"> <div class=\"md-tab-body\" role=\"tabpanel\" *ngFor=\"let tab of _tabs; let i = index\" [id]=\"_getTabContentId(i)\" [class.md-tab-active]=\"selectedIndex == i\" [attr.aria-labelledby]=\"_getTabLabelId(i)\"> <template [ngIf]=\"selectedIndex == i\"> <template [portalHost]=\"tab.content\"></template> </template> </div> </div> ",
+            styles: [":host { display: flex; flex-direction: column; font-family: Roboto, \"Helvetica Neue\", sans-serif; } .md-tab-header { overflow: hidden; position: relative; display: flex; flex-direction: row; flex-shrink: 0; } .md-tab-label { line-height: 48px; height: 48px; padding: 0 12px; font-size: 14px; font-family: Roboto, \"Helvetica Neue\", sans-serif; font-weight: 500; cursor: pointer; box-sizing: border-box; color: currentColor; opacity: 0.6; min-width: 160px; text-align: center; } .md-tab-label:focus { outline: none; opacity: 1; } @media (max-width: 600px) { .md-tab-label { min-width: 72px; } } md-ink-bar { position: absolute; bottom: 0; height: 2px; transition: 350ms ease-out; } .md-tab-body-wrapper { position: relative; overflow: hidden; flex-grow: 1; display: flex; } .md-tab-body { display: none; overflow: auto; box-sizing: border-box; flex-grow: 1; flex-shrink: 1; } .md-tab-body.md-tab-active { display: block; } .md-tab-disabled { cursor: default; pointer-events: none; } /*# sourceMappingURL=tab-group.css.map */ "],
         }), 
@@ -289,5 +301,6 @@ __metadata('design:paramtypes', [NgZone])
             imports: [CommonModule, PortalModule],
-            // Don't export MdInkBar or MdTabLabelWrapper, as they are internal implementatino details.
-            exports: [MdTabGroup, MdTabLabel, MdTabContent, MdTab],
-            declarations: [MdTabGroup, MdTabLabel, MdTabContent, MdTab, MdInkBar, MdTabLabelWrapper],
+            // Don't export MdInkBar or MdTabLabelWrapper, as they are internal implementation details.
+            exports: [MdTabGroup, MdTabLabel, MdTab, MdTabNavBar, MdTabLink],
+            declarations: [MdTabGroup, MdTabLabel, MdTab, MdInkBar, MdTabLabelWrapper,
+                MdTabNavBar, MdTabLink],
         }), 
@@ -294,0 +307,0 @@ __metadata('design:paramtypes', [])

tabs/tabs.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MdTab":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"md-tab"}]}],"members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./tab-label","name":"MdTabLabel"}]}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./tab-content","name":"MdTabContent"}]}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["disabled"]}]}]}},"MdTabGroup":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-tab-group","templateUrl":"tab-group.html","styleUrls":["tab-group.css"]}]}],"members":{"_tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"MdTab"}]}]}],"_labelWrappers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":[{"__symbolic":"reference","module":"./tab-label-wrapper","name":"MdTabLabelWrapper"}]}]}],"_inkBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":[{"__symbolic":"reference","module":"./ink-bar","name":"MdInkBar"}]}]}],"selectedIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isValidIndex":[{"__symbolic":"method"}],"_selectedIndexChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["selectedIndexChange"]}]}],"focusChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["focusChange"]}]}],"selectChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["selectChange"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"ngAfterViewChecked":[{"__symbolic":"method"}],"_updateInkBar":[{"__symbolic":"method"}],"_createChangeEvent":[{"__symbolic":"method"}],"_getTabLabelId":[{"__symbolic":"method"}],"_getTabContentId":[{"__symbolic":"method"}],"handleKeydown":[{"__symbolic":"method"}],"moveFocus":[{"__symbolic":"method"}],"focusNextTab":[{"__symbolic":"method"}],"focusPreviousTab":[{"__symbolic":"method"}]}},"MdTabsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"../core","name":"PortalModule"}],"exports":[{"__symbolic":"reference","name":"MdTabGroup"},{"__symbolic":"reference","module":"./tab-label","name":"MdTabLabel"},{"__symbolic":"reference","module":"./tab-content","name":"MdTabContent"},{"__symbolic":"reference","name":"MdTab"}],"declarations":[{"__symbolic":"reference","name":"MdTabGroup"},{"__symbolic":"reference","module":"./tab-label","name":"MdTabLabel"},{"__symbolic":"reference","module":"./tab-content","name":"MdTabContent"},{"__symbolic":"reference","name":"MdTab"},{"__symbolic":"reference","module":"./ink-bar","name":"MdInkBar"},{"__symbolic":"reference","module":"./tab-label-wrapper","name":"MdTabLabelWrapper"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdTabsModule"},"providers":[]}}}}}}
+{"__symbolic":"module","version":1,"metadata":{"MdTab":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-tab","templateUrl":"tab.html"}]}],"members":{"templateLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./tab-label","name":"MdTabLabel"}]}]}],"_content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"textLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["label"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}]}},"MdTabGroup":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-tab-group","templateUrl":"tab-group.html","styleUrls":["tab-group.css"]}]}],"members":{"_tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"MdTab"}]}]}],"_labelWrappers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":[{"__symbolic":"reference","module":"./tab-label-wrapper","name":"MdTabLabelWrapper"}]}]}],"_inkBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":[{"__symbolic":"reference","module":"./ink-bar","name":"MdInkBar"}]}]}],"selectedIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isValidIndex":[{"__symbolic":"method"}],"selectedIndexChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"focusChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"ngAfterViewChecked":[{"__symbolic":"method"}],"_updateInkBar":[{"__symbolic":"method"}],"_createChangeEvent":[{"__symbolic":"method"}],"_getTabLabelId":[{"__symbolic":"method"}],"_getTabContentId":[{"__symbolic":"method"}],"handleKeydown":[{"__symbolic":"method"}],"moveFocus":[{"__symbolic":"method"}],"focusNextTab":[{"__symbolic":"method"}],"focusPreviousTab":[{"__symbolic":"method"}]}},"MdTabsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"../core","name":"PortalModule"}],"exports":[{"__symbolic":"reference","name":"MdTabGroup"},{"__symbolic":"reference","module":"./tab-label","name":"MdTabLabel"},{"__symbolic":"reference","name":"MdTab"},{"__symbolic":"reference","module":"./tab-nav-bar/tab-nav-bar","name":"MdTabNavBar"},{"__symbolic":"reference","module":"./tab-nav-bar/tab-nav-bar","name":"MdTabLink"}],"declarations":[{"__symbolic":"reference","name":"MdTabGroup"},{"__symbolic":"reference","module":"./tab-label","name":"MdTabLabel"},{"__symbolic":"reference","name":"MdTab"},{"__symbolic":"reference","module":"./ink-bar","name":"MdInkBar"},{"__symbolic":"reference","module":"./tab-label-wrapper","name":"MdTabLabelWrapper"},{"__symbolic":"reference","module":"./tab-nav-bar/tab-nav-bar","name":"MdTabNavBar"},{"__symbolic":"reference","module":"./tab-nav-bar/tab-nav-bar","name":"MdTabLink"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdTabsModule"},"providers":[]}}}}}}

toolbar/toolbar.d.ts

@@ -1,4 +0,2 @@
-import { ModuleWithProviders } from '@angular/core';
-import { Renderer } from '@angular/core';
-import { ElementRef } from '@angular/core';
+import { ModuleWithProviders, ElementRef, Renderer } from '@angular/core';
 export declare class MdToolbarRow {
@@ -5,0 +3,0 @@ }

toolbar/toolbar.js

@@ -10,5 +10,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { NgModule, Component, ChangeDetectionStrategy, Input, ViewEncapsulation, Directive } from '@angular/core';
-import { Renderer } from '@angular/core';
-import { ElementRef } from '@angular/core';
+import { NgModule, Component, ChangeDetectionStrategy, Input, ViewEncapsulation, Directive, ElementRef, Renderer } from '@angular/core';
 export var MdToolbarRow = (function () {
@@ -15,0 +13,0 @@ function MdToolbarRow() {

tooltip/README.md

 # MdTooltip
 Tooltip allows the user to specify text to be displayed when the mouse hover over an element.
 
-### Setup
-For alpha.7, you need to include the overlay styles in your app via a `link` element. This will
-look something like
-```html
-<link href="vendor/@angular2-material/core/overlay/overlay.css" rel="stylesheet">
-```
-
-
 ### Examples
@@ -13,0 +5,0 @@ A button with a tooltip

tooltip/tooltip.d.ts

@@ -1,4 +0,13 @@
-import { ModuleWithProviders, ElementRef, ViewContainerRef, ChangeDetectorRef } from '@angular/core';
-import { Overlay } from '../core';
+import { ModuleWithProviders, ElementRef, ViewContainerRef, AnimationTransitionEvent, NgZone } from '@angular/core';
+import { Overlay, OverlayRef } from '../core';
+import { Observable } from 'rxjs/Observable';
 export declare type TooltipPosition = 'before' | 'after' | 'above' | 'below';
+/** Time in ms to delay before changing the tooltip visibility to hidden */
+export declare const TOOLTIP_HIDE_DELAY: number;
+/**
+ * Directive that attaches a material design tooltip to the host element. Animates the showing and
+ * hiding of a tooltip provided position (defaults to below the element).
+ *
+ * https://material.google.com/components/tooltips.html
+ */
 export declare class MdTooltip {
@@ -8,4 +17,5 @@ private _overlay;
     private _viewContainerRef;
-    private _changeDetectionRef;
-    visible: boolean;
+    private _ngZone;
+    _overlayRef: OverlayRef;
+    _tooltipInstance: TooltipComponent;
     /** Allows the user to define the position of the tooltip relative to the parent element */
@@ -17,50 +27,61 @@ private _position;
     message: string;
-    private _overlayRef;
-    constructor(_overlay: Overlay, _elementRef: ElementRef, _viewContainerRef: ViewContainerRef, _changeDetectionRef: ChangeDetectorRef);
+    constructor(_overlay: Overlay, _elementRef: ElementRef, _viewContainerRef: ViewContainerRef, _ngZone: NgZone);
+    /** Dispose the tooltip when destroyed */
+    ngOnDestroy(): void;
+    /** Shows the tooltip */
+    show(): void;
     /**
-     * Create overlay on init
-     * TODO: internal
-     */
-    ngOnInit(): void;
-    /**
      * Create the overlay config and position strategy
+     * Hides the tooltip after the provided delay in ms. Defaults the delay to the material design
+     * prescribed delay time
      */
+    hide(delay?: number): void;
+    /** Shows/hides the tooltip */
+    toggle(): void;
+    /** Returns true if the tooltip is currently visible to the user */
+    _isTooltipVisible(): boolean;
+    /** Create the tooltip to display */
+    private _createTooltip();
+    /** Create the overlay config and position strategy */
     private _createOverlay();
-    /**
-     * Returns the origin position based on the user's position preference
-     */
+    /** Disposes the current tooltip and the overlay it is attached to */
+    private _disposeTooltip();
+    /** Returns the origin position based on the user's position preference */
     private _getOrigin();
-    /**
-     * Returns the overlay position based on the user's preference
-     */
+    /** Returns the overlay position based on the user's preference */
     private _getOverlayPosition();
-    /**
-     * Shows the tooltip on mouse enter
-     * @param event
-     */
-    _handleMouseEnter(event: MouseEvent): void;
-    /**
-     * Hides the tooltip on mouse leave
-     * @param event
-     */
-    _handleMouseLeave(event: MouseEvent): void;
-    /**
-     * Shows the tooltip and returns a promise that will resolve when the tooltip is visible
-     */
-    show(): void;
-    /**
-     * Hides the tooltip and returns a promise that will resolve when the tooltip is hidden
-     */
-    hide(): void;
-    /**
-     * Shows/hides the tooltip and returns a promise that will resolve when it is done
-     */
-    toggle(): void;
-    /**
-     * Updates the tooltip's position
-     */
-    private _updatePosition();
+    /** Updates the tooltip message and repositions the overlay according to the new message length */
+    private _setTooltipMessage(message);
 }
+export declare type TooltipVisibility = 'visible' | 'hidden';
 export declare class TooltipComponent {
+    /** Message to display in the tooltip */
     message: string;
+    /** The timeout ID of any current timer set to hide the tooltip */
+    _hideTimeoutId: number;
+    /** Property watched by the animation framework to show or hide the tooltip */
+    _visibility: TooltipVisibility;
+    /** Whether interactions on the page should close the tooltip */
+    _closeOnInteraction: boolean;
+    /** The transform origin used in the animation for showing and hiding the tooltip */
+    _transformOrigin: string;
+    /** Subject for notifying that the tooltip has been hidden from the view */
+    private _onHide;
+    /** Shows the tooltip with an animation originating from the provided origin */
+    show(position: TooltipPosition): void;
+    /** Begins the animation to hide the tooltip after the provided delay in ms */
+    hide(delay: number): void;
+    /** Returns an observable that notifies when the tooltip has been hidden from view */
+    afterHidden(): Observable<void>;
+    /** Whether the tooltip is being displayed */
+    isVisible(): boolean;
+    /** Sets the tooltip transform origin according to the tooltip position */
+    _setTransformOrigin(value: TooltipPosition): void;
+    _afterVisibilityAnimation(e: AnimationTransitionEvent): void;
+    /**
+     * Interactions on the HTML body should close the tooltip immediately as defined in the
+     * material design spec.
+     * https://material.google.com/components/tooltips.html#tooltips-interaction
+     */
+    _handleBodyInteraction(): void;
 }
@@ -67,0 +88,0 @@ export declare class MdTooltipModule {

tooltip/tooltip.js

@@ -10,11 +10,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { NgModule, Component, Directive, Input, ElementRef, ViewContainerRef, ChangeDetectorRef } from '@angular/core';
+import { NgModule, Component, Directive, Input, ElementRef, ViewContainerRef, style, trigger, state, transition, animate, NgZone } from '@angular/core';
 import { Overlay, OverlayState, OverlayModule, ComponentPortal, OVERLAY_PROVIDERS } from '../core';
+import { Subject } from 'rxjs/Subject';
+/** Time in ms to delay before changing the tooltip visibility to hidden */
+export var TOOLTIP_HIDE_DELAY = 1500;
+/**
+ * Directive that attaches a material design tooltip to the host element. Animates the showing and
+ * hiding of a tooltip provided position (defaults to below the element).
+ *
+ * https://material.google.com/components/tooltips.html
+ */
 export var MdTooltip = (function () {
-    function MdTooltip(_overlay, _elementRef, _viewContainerRef, _changeDetectionRef) {
+    function MdTooltip(_overlay, _elementRef, _viewContainerRef, _ngZone) {
         this._overlay = _overlay;
         this._elementRef = _elementRef;
         this._viewContainerRef = _viewContainerRef;
-        this._changeDetectionRef = _changeDetectionRef;
-        this.visible = false;
+        this._ngZone = _ngZone;
         /** Allows the user to define the position of the tooltip relative to the parent element */
@@ -30,4 +38,7 @@ this._position = 'below';
                 this._position = value;
-                this._createOverlay();
-                this._updatePosition();
+                // TODO(andrewjs): When the overlay's position can be dynamically changed, do not destroy
+                // the tooltip.
+                if (this._tooltipInstance) {
+                    this._disposeTooltip();
+                }
             }
@@ -44,3 +55,5 @@ },
             this._message = value;
-            this._updatePosition();
+            if (this._tooltipInstance) {
+                this._setTooltipMessage(this._message);
+            }
         },
@@ -50,38 +63,62 @@ enumerable: true,
     });
-    /**
-     * Create overlay on init
-     * TODO: internal
-     */
-    MdTooltip.prototype.ngOnInit = function () {
-        this._createOverlay();
+    /** Dispose the tooltip when destroyed */
+    MdTooltip.prototype.ngOnDestroy = function () {
+        if (this._tooltipInstance) {
+            this._disposeTooltip();
+        }
     };
+    /** Shows the tooltip */
+    MdTooltip.prototype.show = function () {
+        if (!this._tooltipInstance) {
+            this._createTooltip();
+        }
+        this._setTooltipMessage(this._message);
+        this._tooltipInstance.show(this._position);
+    };
     /**
      * Create the overlay config and position strategy
+     * Hides the tooltip after the provided delay in ms. Defaults the delay to the material design
+     * prescribed delay time
      */
-    MdTooltip.prototype._createOverlay = function () {
-        if (this._overlayRef) {
-            if (this.visible) {
-                // if visible, hide before destroying
-                this.hide();
-                this._createOverlay();
-            }
-            else {
-                // if not visible, dispose and recreate
-                this._overlayRef.dispose();
-                this._overlayRef = null;
-                this._createOverlay();
-            }
+    MdTooltip.prototype.hide = function (delay) {
+        if (delay === void 0) { delay = TOOLTIP_HIDE_DELAY; }
+        if (this._tooltipInstance) {
+            this._tooltipInstance.hide(delay);
         }
-        else {
-            var origin = this._getOrigin();
-            var position = this._getOverlayPosition();
-            var strategy = this._overlay.position().connectedTo(this._elementRef, origin, position);
-            var config = new OverlayState();
-            config.positionStrategy = strategy;
-            this._overlayRef = this._overlay.create(config);
-        }
     };
-    /**
-     * Returns the origin position based on the user's position preference
-     */
+    /** Shows/hides the tooltip */
+    MdTooltip.prototype.toggle = function () {
+        this._isTooltipVisible() ? this.hide() : this.show();
+    };
+    /** Returns true if the tooltip is currently visible to the user */
+    MdTooltip.prototype._isTooltipVisible = function () {
+        return this._tooltipInstance && this._tooltipInstance.isVisible();
+    };
+    /** Create the tooltip to display */
+    MdTooltip.prototype._createTooltip = function () {
+        var _this = this;
+        this._createOverlay();
+        var portal = new ComponentPortal(TooltipComponent, this._viewContainerRef);
+        this._tooltipInstance = this._overlayRef.attach(portal).instance;
+        // Dispose the overlay when finished the shown tooltip.
+        this._tooltipInstance.afterHidden().subscribe(function () {
+            _this._disposeTooltip();
+        });
+    };
+    /** Create the overlay config and position strategy */
+    MdTooltip.prototype._createOverlay = function () {
+        var origin = this._getOrigin();
+        var position = this._getOverlayPosition();
+        var strategy = this._overlay.position().connectedTo(this._elementRef, origin, position);
+        var config = new OverlayState();
+        config.positionStrategy = strategy;
+        this._overlayRef = this._overlay.create(config);
+    };
+    /** Disposes the current tooltip and the overlay it is attached to */
+    MdTooltip.prototype._disposeTooltip = function () {
+        this._overlayRef.dispose();
+        this._overlayRef = null;
+        this._tooltipInstance = null;
+    };
+    /** Returns the origin position based on the user's position preference */
     MdTooltip.prototype._getOrigin = function () {
@@ -95,5 +132,3 @@ switch (this.position) {
     };
-    /**
-     * Returns the overlay position based on the user's preference
-     */
+    /** Returns the overlay position based on the user's preference */
     MdTooltip.prototype._getOverlayPosition = function () {
@@ -107,57 +142,14 @@ switch (this.position) {
     };
-    /**
-     * Shows the tooltip on mouse enter
-     * @param event
-     */
-    MdTooltip.prototype._handleMouseEnter = function (event) {
-        this.show();
+    /** Updates the tooltip message and repositions the overlay according to the new message length */
+    MdTooltip.prototype._setTooltipMessage = function (message) {
+        var _this = this;
+        // Must wait for the message to be painted to the tooltip so that the overlay can properly
+        // calculate the correct positioning based on the size of the text.
+        this._tooltipInstance.message = message;
+        this._ngZone.onMicrotaskEmpty.first().subscribe(function () {
+            if (_this._tooltipInstance) {
+                _this._overlayRef.updatePosition();
+            }
+        });
     };
-    /**
-     * Hides the tooltip on mouse leave
-     * @param event
-     */
-    MdTooltip.prototype._handleMouseLeave = function (event) {
-        this.hide();
-    };
-    /**
-     * Shows the tooltip and returns a promise that will resolve when the tooltip is visible
-     */
-    MdTooltip.prototype.show = function () {
-        if (!this.visible && this._overlayRef && !this._overlayRef.hasAttached()) {
-            this.visible = true;
-            var portal = new ComponentPortal(TooltipComponent, this._viewContainerRef);
-            var tooltipRef = this._overlayRef.attach(portal);
-            tooltipRef.instance.message = this.message;
-            this._updatePosition();
-        }
-    };
-    /**
-     * Hides the tooltip and returns a promise that will resolve when the tooltip is hidden
-     */
-    MdTooltip.prototype.hide = function () {
-        if (this.visible && this._overlayRef && this._overlayRef.hasAttached()) {
-            this.visible = false;
-            this._overlayRef.detach();
-        }
-    };
-    /**
-     * Shows/hides the tooltip and returns a promise that will resolve when it is done
-     */
-    MdTooltip.prototype.toggle = function () {
-        if (this.visible) {
-            this.hide();
-        }
-        else {
-            this.show();
-        }
-    };
-    /**
-     * Updates the tooltip's position
-     */
-    MdTooltip.prototype._updatePosition = function () {
-        if (this._overlayRef) {
-            this._changeDetectionRef.detectChanges();
-            this._overlayRef.updatePosition();
-        }
-    };
     __decorate([
@@ -175,7 +167,8 @@ Input('tooltip-position'),
             host: {
-                '(mouseenter)': '_handleMouseEnter($event)',
-                '(mouseleave)': '_handleMouseLeave($event)',
-            }
+                '(mouseenter)': 'show()',
+                '(mouseleave)': 'hide()',
+            },
+            exportAs: 'mdTooltip',
         }), 
-        __metadata('design:paramtypes', [Overlay, ElementRef, ViewContainerRef, ChangeDetectorRef])
+        __metadata('design:paramtypes', [Overlay, ElementRef, ViewContainerRef, NgZone])
     ], MdTooltip);
@@ -186,7 +179,87 @@ return MdTooltip;
     function TooltipComponent() {
+        /** Whether interactions on the page should close the tooltip */
+        this._closeOnInteraction = false;
+        /** The transform origin used in the animation for showing and hiding the tooltip */
+        this._transformOrigin = 'bottom';
+        /** Subject for notifying that the tooltip has been hidden from the view */
+        this._onHide = new Subject();
     }
+    /** Shows the tooltip with an animation originating from the provided origin */
+    TooltipComponent.prototype.show = function (position) {
+        var _this = this;
+        this._closeOnInteraction = false;
+        this._visibility = 'visible';
+        this._setTransformOrigin(position);
+        // Cancel the delayed hide if it is scheduled
+        if (this._hideTimeoutId) {
+            clearTimeout(this._hideTimeoutId);
+        }
+        // If this was set to true immediately, then the body click would trigger interaction and
+        // close the tooltip right after it was displayed.
+        setTimeout(function () { _this._closeOnInteraction = true; }, 0);
+    };
+    /** Begins the animation to hide the tooltip after the provided delay in ms */
+    TooltipComponent.prototype.hide = function (delay) {
+        var _this = this;
+        this._hideTimeoutId = setTimeout(function () {
+            _this._visibility = 'hidden';
+            _this._closeOnInteraction = false;
+        }, delay);
+    };
+    /** Returns an observable that notifies when the tooltip has been hidden from view */
+    TooltipComponent.prototype.afterHidden = function () {
+        return this._onHide.asObservable();
+    };
+    /** Whether the tooltip is being displayed */
+    TooltipComponent.prototype.isVisible = function () {
+        return this._visibility === 'visible';
+    };
+    /** Sets the tooltip transform origin according to the tooltip position */
+    TooltipComponent.prototype._setTransformOrigin = function (value) {
+        switch (value) {
+            case 'before':
+                this._transformOrigin = 'right';
+                break;
+            case 'after':
+                this._transformOrigin = 'left';
+                break;
+            case 'above':
+                this._transformOrigin = 'bottom';
+                break;
+            case 'below':
+                this._transformOrigin = 'top';
+                break;
+        }
+    };
+    TooltipComponent.prototype._afterVisibilityAnimation = function (e) {
+        if (e.toState === 'hidden' && !this.isVisible()) {
+            this._onHide.next();
+        }
+    };
+    /**
+     * Interactions on the HTML body should close the tooltip immediately as defined in the
+     * material design spec.
+     * https://material.google.com/components/tooltips.html#tooltips-interaction
+     */
+    TooltipComponent.prototype._handleBodyInteraction = function () {
+        if (this._closeOnInteraction) {
+            this.hide(0);
+        }
+    };
     TooltipComponent = __decorate([
         Component({selector: 'md-tooltip-component',
-            template: "<div class=\"md-tooltip\">{{message}}</div>",
+            template: "<div class=\"md-tooltip\" [style.transform-origin]=\"_transformOrigin\" [@state]=\"_visibility\" (@state.done)=\"this._afterVisibilityAnimation($event)\"> {{message}} </div>",
             styles: [":host { pointer-events: none; } .md-tooltip { color: white; padding: 0 8px; border-radius: 2px; font-family: Roboto, \"Helvetica Neue\", sans-serif; font-size: 10px; margin: 14px; height: 22px; line-height: 22px; } /*# sourceMappingURL=tooltip.css.map */ "],
+            animations: [
+                trigger('state', [
+                    state('void', style({ transform: 'scale(0)' })),
+                    state('visible', style({ transform: 'scale(1)' })),
+                    state('hidden', style({ transform: 'scale(0)' })),
+                    transition('* => visible', animate('150ms cubic-bezier(0.0, 0.0, 0.2, 1)')),
+                    transition('* => hidden', animate('150ms cubic-bezier(0.4, 0.0, 1, 1)')),
+                ])
+            ],
+            host: {
+                '(body:click)': 'this._handleBodyInteraction()'
+            }
         }), 
@@ -193,0 +266,0 @@ __metadata('design:paramtypes', [])

tooltip/tooltip.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MdTooltip":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[md-tooltip]","host":{"(mouseenter)":"_handleMouseEnter($event)","(mouseleave)":"_handleMouseLeave($event)"}}]}],"members":{"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["tooltip-position"]}]}],"message":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["md-tooltip"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../core","name":"Overlay"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"_createOverlay":[{"__symbolic":"method"}],"_getOrigin":[{"__symbolic":"method"}],"_getOverlayPosition":[{"__symbolic":"method"}],"_handleMouseEnter":[{"__symbolic":"method"}],"_handleMouseLeave":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"_updatePosition":[{"__symbolic":"method"}]}},"TooltipComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-tooltip-component","template":"<div class=\"md-tooltip\">{{message}}</div>","styleUrls":["tooltip.css"]}]}]},"MdTooltipModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"../core","name":"OverlayModule"}],"exports":[{"__symbolic":"reference","name":"MdTooltip"},{"__symbolic":"reference","name":"TooltipComponent"}],"declarations":[{"__symbolic":"reference","name":"MdTooltip"},{"__symbolic":"reference","name":"TooltipComponent"}],"entryComponents":[{"__symbolic":"reference","name":"TooltipComponent"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdTooltipModule"},"providers":{"__symbolic":"reference","module":"../core","name":"OVERLAY_PROVIDERS"}}}}}}}
+{"__symbolic":"module","version":1,"metadata":{"TOOLTIP_HIDE_DELAY":1500,"MdTooltip":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[md-tooltip]","host":{"(mouseenter)":"show()","(mouseleave)":"hide()"},"exportAs":"mdTooltip"}]}],"members":{"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["tooltip-position"]}]}],"message":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["md-tooltip"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../core","name":"Overlay"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"_isTooltipVisible":[{"__symbolic":"method"}],"_createTooltip":[{"__symbolic":"method"}],"_createOverlay":[{"__symbolic":"method"}],"_disposeTooltip":[{"__symbolic":"method"}],"_getOrigin":[{"__symbolic":"method"}],"_getOverlayPosition":[{"__symbolic":"method"}],"_setTooltipMessage":[{"__symbolic":"method"}]}},"TooltipComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"md-tooltip-component","templateUrl":"tooltip.html","styleUrls":["tooltip.css"],"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["state",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"scale(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"scale(1)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"scale(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["150ms cubic-bezier(0.0, 0.0, 0.2, 1)"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["150ms cubic-bezier(0.4, 0.0, 1, 1)"]}]}]]}],"host":{"(body:click)":"this._handleBodyInteraction()"}}]}],"members":{"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"afterHidden":[{"__symbolic":"method"}],"isVisible":[{"__symbolic":"method"}],"_setTransformOrigin":[{"__symbolic":"method"}],"_afterVisibilityAnimation":[{"__symbolic":"method"}],"_handleBodyInteraction":[{"__symbolic":"method"}]}},"MdTooltipModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"../core","name":"OverlayModule"}],"exports":[{"__symbolic":"reference","name":"MdTooltip"},{"__symbolic":"reference","name":"TooltipComponent"}],"declarations":[{"__symbolic":"reference","name":"MdTooltip"},{"__symbolic":"reference","name":"TooltipComponent"}],"entryComponents":[{"__symbolic":"reference","name":"TooltipComponent"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MdTooltipModule"},"providers":{"__symbolic":"reference","module":"../core","name":"OVERLAY_PROVIDERS"}}}}}}}

tsconfig.json

@@ -8,3 +8,3 @@ {
     "mapRoot": "",
-    "module": "es2015",
+    "module": "commonjs",
     "moduleResolution": "node",
@@ -19,2 +19,5 @@ "noEmitOnError": true,
     "stripInternal": true,
+    "baseUrl": "",
+    "paths": {
+    },
     "typeRoots": [
@@ -24,10 +27,7 @@ "../../node_modules/@types"
     "types": [
+      "jasmine"
     ]
   },
-  "exclude": [
-    "**/*.spec.*",
-    "system-config-spec.ts"
-  ],
   "angularCompilerOptions": {
-    "genDir": "../../dist/@angular/material",
+    "genDir": "../../dist",
     "skipTemplateCodegen": true,
@@ -34,0 +34,0 @@ "debug": true

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of package files

618

increased by9.38%

Lines of code

27954

increased by14.28%

Number of lines in readme file

152

increased by2.7%

Worsened metrics

Total package byte prevSize

3211200

decreased by-1.41%

Dependency count

4

increased by33.33%

Number of low supply chain risk alerts

40

increased by42.86%

Published versions last week

1

decreased by-50%

No dependency changes