fix(slider): constraints value between min and max

.gitignore

@@ -33,3 +33,4 @@
 /libpeerconnection.log
 npm-debug.log
 testem.log
+/.chrome

GETTING_STARTED.md

@@ -33,19 +33,20 @@ import { MaterialModule } from '@angular/material';
 export class PizzaPartyAppModule { }
 ```
 
-## Including core and theme styles:
-This is required to apply all of the core and theme styles to your application.
-See the [theming guide](docs/theming.md) for instructions.
+## Include the core and theme styles:
+This is **required** to apply all of the core and theme styles to your application. You can either
+use a pre-built theme, or define your own custom theme.
 
+:trident:  See the [theming guide](docs/theming.md) for instructions.
 
-## Additional setup for `md-slide-toggle` and `md-slider`:
+### Additional setup for `md-slide-toggle` and `md-slider`:
 The slide-toggle and slider components have a dependency on [HammerJS](http://hammerjs.github.io/).
 
 Add HammerJS to your application via [npm](https://www.npmjs.com/package/hammerjs), a CDN 
 (such as the [Google CDN](https://developers.google.com/speed/libraries/#hammerjs)), or served 
 directly from your app.
 
-## [Optional] Using Material Design icons with `md-icon`:
+### [Optional] Using Material Design icons with `md-icon`:
 
 - If you want to use Material Design icons in addition to Angular Material components, 
 load the Material Design font in your `index.html`.  

README.md

@@ -61,7 +61,7 @@ High level items planned for October 2016:
 | menu             | Initial version, needs enhancements | [README][17] |   [#119][0119] |
 | tooltip          | Initial version, needs enhancements | [README][18] |              - |
 | ripples          |  Available, but needs to be applied | [README][19] |   [#108][0108] |
-| dialog           |  Started, not yet ready for release |           -  |   [#114][0114] |
+| 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] |
@@ -102,6 +102,7 @@ High level items planned for October 2016:
 [19]: https://github.com/angular/material2/blob/master/src/lib/core/ripple/README.md
 [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
 
 [0107]: https://github.com/angular/material2/issues/107
 [0119]: https://github.com/angular/material2/issues/119

e2e/components/checkbox/checkbox.e2e.ts

@@ -0,0 +1,18 @@
+describe('checkbox', function () {
+  describe('check behavior', function () {
+    beforeEach(function() {
+      browser.get('/checkbox');
+    });
+    it('should be checked when clicked, and be unchecked when clicked again', function () {
+      element(by.id('test-checkbox')).click();
+      element(by.css('input[id=input-test-checkbox]')).getAttribute('checked').then((value: string) => {
+        expect(value).toBeTruthy('Expect checkbox "checked" property to be true');
+      });
+
+      element(by.id('test-checkbox')).click();
+      element(by.css('input[id=input-test-checkbox]')).getAttribute('checked').then((value: string) => {
+        expect(value).toBeFalsy('Expect checkbox "checked" property to be false');
+      });
+    });
+  });
+});

e2e/components/radio/radio.e2e.ts

@@ -0,0 +1,51 @@
+describe('radio', function () {
+
+  describe('disabling behavior', function () {
+    beforeEach(function() {
+      browser.get('/radio');
+    });
+
+    it('should be checked when clicked', function () {
+      element(by.id('water')).click();
+      element(by.id('water')).getAttribute('class').then((value: string) => {
+        expect(value).toContain('md-radio-checked');
+      });
+      element(by.css('input[id=water-input]')).getAttribute('checked').then((value: string) => {
+        expect(value).toBeTruthy();
+      });
+      element(by.css('input[id=leaf-input]')).getAttribute('checked').then((value: string) => {
+        expect(value).toBeFalsy();
+      });
+
+      element(by.id('leaf')).click();
+      element(by.id('leaf')).getAttribute('class').then((value: string) => {
+        expect(value).toContain('md-radio-checked');
+      });
+      element(by.css('input[id=leaf-input]')).getAttribute('checked').then((value: string) => {
+        expect(value).toBeTruthy();
+      });
+      element(by.css('input[id=water-input]')).getAttribute('checked').then((value: string) => {
+        expect(value).toBeFalsy();
+      });
+    });
+
+    it('should be disabled when disable the radio group', function () {
+      element(by.id('toggle-disable')).click();
+      element(by.id('water')).click();
+      element(by.id('water')).getAttribute('class').then((value: string) => {
+        expect(value).toContain('md-radio-disabled');
+      });
+        element(by.css('input[id=water-input]')).getAttribute('disabled').then((value: string) => {
+        expect(value).toBeTruthy();
+      });
+
+      element(by.id('leaf')).click();
+      element(by.id('leaf')).getAttribute('class').then((value: string) => {
+        expect(value).toContain('md-radio-disabled');
+      });
+      element(by.css('input[id=leaf-input]')).getAttribute('disabled').then((value: string) => {
+        expect(value).toBeTruthy();
+      });
+    });
+  });
+});

firebase.json

@@ -1,23 +1,30 @@
 {
-  "firebase": "material2-test",
-  "public": "dist",
-  "ignore": [
-    "firebase.json",
-    "**/.*",
-    "**/node_modules/**",
-    "tmp",
-    "deploy",
-    "typings"
-  ],
-  "headers": [{
-    "source": "*",
-    "headers": [{
-      "key": "Cache-Control",
-      "value": "no-cache"
-    }]
-  }],
-  "rewrites": [{
-    "source": "/**/!(*.@(js|ts|html|css|json|svg|png|jpg|jpeg))",
-    "destination": "/index.html"
-  }]
+  "hosting": {
+    "public": "dist",
+    "rewrites": [
+      {
+        "source": "/**/!(*.@(js|ts|html|css|json|svg|png|jpg|jpeg))",
+        "destination": "/index.html"
+      }
+    ],
+    "headers": [
+      {
+        "source": "*",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "no-cache"
+          }
+        ]
+      }
+    ],
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**",
+      "tmp",
+      "deploy",
+      "typings"
+    ]
+  }
 }

package.json

@@ -38,7 +38,7 @@
     "zone.js": "^0.6.23"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "0.6.0",
+    "@angular/compiler-cli": "^2.0.0",
     "@angular/platform-server": "^2.0.0",
     "@types/glob": "^5.0.29",
     "@types/gulp": "^3.8.29",
@@ -57,6 +57,7 @@
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.1",
     "gulp-clean": "^0.3.2",
+    "gulp-cli": "^1.2.2",
     "gulp-sass": "^2.3.2",
     "gulp-server-livereload": "^1.8.2",
     "gulp-shell": "^0.5.2",

scripts/sauce/sauce_connect_setup.sh

@@ -23,10 +23,10 @@ CONNECT_STDERR="$LOGS_DIR/sauce-connect.stderr"
 if [ `uname -s` = "Darwin" ]; then
   # If the user is running Mac, download the OSX version
   # https://en.wikipedia.org/wiki/Darwin_(operating_system)
-  CONNECT_URL="https://saucelabs.com/downloads/sc-4.3.11-osx.zip"
+  CONNECT_URL="https://saucelabs.com/downloads/sc-4.4.1-osx.zip"
 else
   # Otherwise, default to Linux for Travis-CI
-  CONNECT_URL="https://saucelabs.com/downloads/sc-4.3.11-linux.tar.gz"
+  CONNECT_URL="https://saucelabs.com/downloads/sc-4.4.1-linux.tar.gz"
 fi
 mkdir -p $CONNECT_DIR
 cd $CONNECT_DIR

src/demo-app/button/button-demo.html

@@ -89,4 +89,16 @@
     <a href="http://www.google.com" md-raised-button color="primary">SEARCH</a>
     <button md-raised-button>DANCE</button>
   </section>
+  <section>
+    <button md-raised-button>More<md-icon>more_vert</md-icon></button>
+    <button md-raised-button>Check<md-icon>check</md-icon></button>
+    <button md-raised-button>Check<md-icon class="md-24">favorite</md-icon></button>
+    <button md-raised-button>Last<md-icon>navigate_before</md-icon></button>
+  </section>
+  <section>
+    <button md-button>More<md-icon>more_vert</md-icon></button>
+    <button md-button>Check<md-icon>check</md-icon></button>
+    <button md-button>Check<md-icon class="md-24">favorite</md-icon></button>
+    <button md-button>Last<md-icon>navigate_before</md-icon></button>
+  </section>
 </div>

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

@@ -2,6 +2,7 @@ <h1>md-checkbox: Basic Example</h1>
 <form>
 <md-checkbox [(ngModel)]="isChecked"
               name="cb"
+             [color]="checkboxColor()"
              (change)="isIndeterminate = false"
              [indeterminate]="isIndeterminate"
              [disabled]="isDisabled"
@@ -18,6 +19,8 @@ <h1>md-checkbox: Basic Example</h1>
 <label for="indeterminate-toggle">Toggle Indeterminate</label>
 <input id="disabled-toggle" type="checkbox" [(ngModel)]="isDisabled">
 <label for="disabled-toggle">Toggle Disabled</label>
+<input id="color-toggle" type="checkbox" [(ngModel)]="useAlternativeColor">
+<label for="color-toggle">Toggle Color</label>
 </div>
 <div>
   <p>Alignment:</p>
@@ -41,4 +44,4 @@ <h1>md-checkbox: Basic Example</h1>
 </div>
 
 <h1>Nested Checklist</h1>
-<md-checkbox-demo-nested-checklist></md-checkbox-demo-nested-checklist>
+<md-checkbox-demo-nested-checklist></md-checkbox-demo-nested-checklist>

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

@@ -67,11 +67,16 @@ export class CheckboxDemo {
   isChecked: boolean = false;
   isDisabled: boolean = false;
   alignment: string = 'start';
+  useAlternativeColor: boolean = false;
 
   printResult() {
     if (this.isIndeterminate) {
       return 'Maybe!';
     }
     return this.isChecked ? 'Yes!' : 'No!';
   }
+
+  checkboxColor() {
+    return this.useAlternativeColor ? 'primary' : 'accent';
+  }
 }

src/demo-app/overlay/overlay-demo.html

@@ -15,8 +15,9 @@
   Open menu
 </button>
 
-<template connected-overlay [origin]="trigger">
-  <div style="background-color: mediumpurple" *ngIf="isMenuOpen">
+<template connected-overlay [origin]="trigger" [width]="500" hasBackdrop [open]="isMenuOpen"
+  (backdropClick)="isMenuOpen=false">
+  <div style="background-color: mediumpurple" >
     This is the menu panel.
   </div>
 </template>

src/demo-app/slider/slider-demo.html

@@ -24,6 +24,10 @@ <h1>Slider with set tick interval</h1>
 <h1>Slider with Thumb Label</h1>
 <md-slider thumb-label></md-slider>
 
+<h1>Slider with one-way binding</h1>
+<md-slider [value]="val" step="40"></md-slider>
+<input [(ngModel)]="val">
+
 <h1>Slider with two-way binding</h1>
 <md-slider [(ngModel)]="demo" step="40"></md-slider>
 <input [(ngModel)]="demo">

src/demo-app/slider/slider-demo.ts

@@ -8,4 +8,5 @@ import {Component} from '@angular/core';
 })
 export class SliderDemo {
   demo: number;
+  val: number = 50;
 }

src/e2e-app/checkbox/checkbox-e2e.html

@@ -0,0 +1 @@
+<md-checkbox id="test-checkbox">Check this button</md-checkbox>

src/e2e-app/checkbox/checkbox-e2e.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'checkbox-e2e',
+  templateUrl: 'checkbox-e2e.html',
+})
+export class SimpleCheckboxes {}

src/e2e-app/e2e-app-module.ts

@@ -1,10 +1,12 @@
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {RouterModule} from '@angular/router';
+import {SimpleCheckboxes} from './checkbox/checkbox-e2e';
 import {E2EApp, Home} from './e2e-app/e2e-app';
 import {IconE2E} from './icon/icon-e2e';
 import {ButtonE2E} from './button/button-e2e';
 import {MenuE2E} from './menu/menu-e2e';
+import {SimpleRadioButtons} from './radio/radio-e2e';
 import {BasicTabs} from './tabs/tabs-e2e';
 import {MaterialModule} from '@angular/material';
 import {E2E_APP_ROUTES} from './e2e-app/routes';
@@ -22,6 +24,8 @@ import {E2E_APP_ROUTES} from './e2e-app/routes';
     ButtonE2E,
     MenuE2E,
     BasicTabs,
+    SimpleRadioButtons,
+    SimpleCheckboxes,
     Home,
   ],
   bootstrap: [E2EApp],

src/e2e-app/e2e-app/e2e-app.html

@@ -1,6 +1,8 @@
 <a md-list-item [routerLink]="['button']">Button</a>
+<a md-list-item [routerLink]="['checkbox']">Checkbox</a>
 <a md-list-item [routerLink]="['icon']">Icon</a>
 <a md-list-item [routerLink]="['menu']">Menu</a>
+<a md-list-item [routerLink]="['radio']">Radios</a>
 <a md-list-item [routerLink]="['tabs']">Tabs</a>
 
 <router-outlet></router-outlet>

src/e2e-app/e2e-app/routes.ts

@@ -4,11 +4,16 @@ import {ButtonE2E} from '../button/button-e2e';
 import {BasicTabs} from '../tabs/tabs-e2e';
 import {IconE2E} from '../icon/icon-e2e';
 import {MenuE2E} from '../menu/menu-e2e';
+import {SimpleRadioButtons} from '../radio/radio-e2e';
+import {SimpleCheckboxes} from '../checkbox/checkbox-e2e';
 
 export const E2E_APP_ROUTES: Routes = [
   {path: '', component: Home},
   {path: 'button', component: ButtonE2E},
+  {path: 'checkbox', component: SimpleCheckboxes},
   {path: 'menu', component: MenuE2E},
   {path: 'icon', component: IconE2E},
+  {path: 'radio', component: SimpleRadioButtons},
   {path: 'tabs', component: BasicTabs}
+
 ];

src/e2e-app/radio/radio-e2e.html

@@ -0,0 +1,10 @@
+<section>
+  <md-radio-group [disabled]="isGroupDisabled"
+                  [(value)]="groupValue"
+                  id="test-group">
+    <md-radio-button value="fire" id="fire">Charmander</md-radio-button>
+    <md-radio-button value="water" id="water">Squirtle</md-radio-button>
+    <md-radio-button value="leaf" id="leaf">Bulbasaur</md-radio-button>
+  </md-radio-group>
+  <button (click)="isGroupDisabled=!isGroupDisabled" id="toggle-disable">Disable/enable group</button>
+</section>

src/e2e-app/radio/radio-e2e.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'radio-e2e',
+  templateUrl: 'radio-e2e.html',
+})
+export class SimpleRadioButtons {
+  isGroupDisabled: boolean = false;
+}

src/lib/button-toggle/button-toggle.ts

@@ -15,13 +15,9 @@ import {
     forwardRef,
     AfterViewInit
 } from '@angular/core';
-import {
-    NG_VALUE_ACCESSOR,
-    ControlValueAccessor,
-    FormsModule,
-} from '@angular/forms';
+import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule} from '@angular/forms';
 import {Observable} from 'rxjs/Observable';
-import {BooleanFieldValue, MdUniqueSelectionDispatcher} from '../core';
+import {MdUniqueSelectionDispatcher, coerceBooleanProperty} from '../core';
 
 export type ToggleType = 'checkbox' | 'radio';
 
@@ -102,13 +98,12 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor
   }
 
   @Input()
-  @BooleanFieldValue()
   get disabled(): boolean {
     return this._disabled;
   }
 
   set disabled(value) {
-    this._disabled = (value != null && value !== false) ? true : null;
+    this._disabled = coerceBooleanProperty(value);
   }
 
   @Input()