Merge branch 'master' into dialog-animation

# Conflicts:
#	src/lib/dialog/dialog-container.ts
#	src/lib/dialog/dialog-ref.ts
#	src/lib/dialog/dialog.spec.ts
#	src/lib/dialog/dialog.ts

Author: crisbeto

e2e/components/dialog/dialog.e2e.ts

@@ -35,6 +35,16 @@ describe('dialog', () => {
     });
   });
 
+  it('should close by pressing escape when the first tabbable element has lost focus', () => {
+    element(by.id('default')).click();
+
+    waitForDialog().then(() => {
+      clickElementAtPoint('md-dialog-container', { x: 0, y: 0 });
+      pressKeys(Key.ESCAPE);
+      expectToExist('md-dialog-container', false);
+    });
+  });
+
   it('should close by clicking on the "close" button', () => {
     element(by.id('default')).click();
 

package.json

@@ -25,26 +25,26 @@
     "node": ">= 5.4.1 < 7"
   },
   "dependencies": {
-    "@angular/common": "^2.2.0",
-    "@angular/compiler": "^2.2.0",
-    "@angular/core": "^2.2.0",
-    "@angular/forms": "^2.2.0",
-    "@angular/http": "^2.2.0",
-    "@angular/platform-browser": "^2.2.0",
+    "@angular/common": "^2.3.0",
+    "@angular/compiler": "^2.3.0",
+    "@angular/core": "^2.3.0",
+    "@angular/forms": "^2.3.0",
+    "@angular/http": "^2.3.0",
+    "@angular/platform-browser": "^2.3.0",
     "core-js": "^2.4.1",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "^5.0.1",
     "systemjs": "0.19.43",
-    "zone.js": "^0.6.23"
+    "zone.js": "^0.7.2"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^2.2.0",
-    "@angular/platform-browser-dynamic": "^2.2.0",
-    "@angular/platform-server": "^2.2.0",
-    "@angular/router": "^3.2.0",
+    "@angular/compiler-cli": "^2.3.0",
+    "@angular/platform-browser-dynamic": "^2.3.0",
+    "@angular/platform-server": "^2.3.0",
+    "@angular/router": "^3.3.0",
     "@types/glob": "^5.0.30",
     "@types/gulp": "^3.8.32",
     "@types/hammerjs": "^2.0.34",
-    "@types/jasmine": "^2.5.41",
+    "@types/jasmine": "2.5.41",
     "@types/merge2": "^0.3.29",
     "@types/minimist": "^1.2.0",
     "@types/node": "^7.0.4",

scripts/release/publish-docs-content.sh

@@ -8,6 +8,7 @@ cd "$(dirname $0)/../../"
 docsPath="/dist/docs"
 repoPath="/tmp/material2-docs-content"
 repoUrl="https://github.com/DevVersion/material2-docs-content"
+examplesSource="/dist/docs/examples"
 
 # If the docs directory is not present, generate docs
 if [ ! -d $docsPath ]; then
@@ -21,47 +22,46 @@ commitAuthorEmail="$(git --no-pager show -s --format='%ae' HEAD)"
 commitMessage="$(git log --oneline -n 1)"
 
 # create directory and clone test repo
-rm -rf "/tmp/"
-mkdir "/tmp/" $repoPath
+rm -rf /tmp/
+mkdir -p $repoPath
 git clone $repoUrl $repoPath
 
 # Clean out repo directory and copy contents of dist/docs into it
 rm -rf $repoPath/*
 mkdir $repoPath/overview
 mkdir $repoPath/guides
 mkdir $repoPath/api
-# mkdir $repoPath/examples
+mkdir $repoPath/examples
 
 # Move api files over to $repoPath/api
 cp -r $docsPath/api/* $repoPath/api
 
-# Move guide files over to $repoPath/guides
-for filename in $overviewFiles*
-do
-  if [ -f $filename ]; then
-    cp -r $filename $repoPath/guides
-  fi
-done
-
 # Flatten the markdown docs structure and move it into $repoPath/overview
 overviewFiles=$docsPath/markdown/
-targetFile="OVERVIEW.html"
 for filename in $overviewFiles*
 do
   if [ -d $filename ]; then
     for _ in $filename/*
     do
-      if [ -f $filename/$targetFile ]; then
-        name=${filename#$overviewFiles}
-        cp -r $filename/$targetFile $repoPath/overview/
-        mv $repoPath/overview/$targetFile $repoPath/overview/$name.html
+      markdownFile=${filename#$overviewFiles}.html
+      # Filename should be same as folder name with .html extension
+      if [ -e $filename/$markdownFile ]; then
+        cp -r $filename/$markdownFile $repoPath/overview/
       fi
     done
   fi
 done
 
-# src/examples should be added to the $repoPath after they have been moved into
-# the material2 repo from material.angular.io
+# Move guide files over to $repoPath/guides
+for filename in $overviewFiles*
+do
+  if [ -f $filename ]; then
+    cp -r $filename $repoPath/guides
+  fi
+done
+
+# Move highlighted examples into $repoPath
+cp -r $examplesSource/* $repoPath/examples
 
 # Push content to repo
 cd $repoPath

src/demo-app/ripple/ripple-demo.html

@@ -21,24 +21,18 @@
   <section>
     Speed
     <md-radio-group [(ngModel)]="rippleSpeed">
-      <md-radio-button name="demo-ripple-options" value="0.1">Slow</md-radio-button>
+      <md-radio-button name="demo-ripple-options" value="0.4">Slow</md-radio-button>
       <md-radio-button name="demo-ripple-options" value="1">Normal</md-radio-button>
-      <md-radio-button name="demo-ripple-options" value="4">Fast</md-radio-button>
+      <md-radio-button name="demo-ripple-options" value="2.5">Fast</md-radio-button>
     </md-radio-group>
   </section>
   <section>
     <md-input-container>
-      <input mdInput placeholder="Max radius" aria-label="radius" [(ngModel)]="maxRadius">
+      <input mdInput placeholder="Ripple radius" aria-label="radius" [(ngModel)]="radius">
     </md-input-container>
     <md-input-container>
       <input mdInput placeholder="Ripple color" aria-label="color" [(ngModel)]="rippleColor">
     </md-input-container>
-    <md-input-container>
-      <input mdInput
-             placeholder="Ripple background"
-             aria-label="background"
-             [(ngModel)]="rippleBackgroundColor">
-    </md-input-container>
   </section>
   <section>
     <button md-raised-button (click)="doManualRipple()">Manual ripple</button>
@@ -51,9 +45,8 @@
         [mdRippleCentered]="centered"
         [mdRippleDisabled]="disabled"
         [mdRippleUnbounded]="unbounded"
-        [mdRippleMaxRadius]="maxRadius"
+        [mdRippleRadius]="radius"
         [mdRippleColor]="rippleColor"
-        [mdRippleBackgroundColor]="rippleBackgroundColor"
         [mdRippleSpeedFactor]="rippleSpeed">
       Click me
     </div>

src/demo-app/ripple/ripple-demo.ts

@@ -9,23 +9,22 @@ import {MdRipple} from '@angular/material';
   styleUrls: ['ripple-demo.css'],
 })
 export class RippleDemo {
-  @ViewChild(MdRipple) manualRipple: MdRipple;
+  @ViewChild(MdRipple) ripple: MdRipple;
 
   centered = false;
   disabled = false;
   unbounded = false;
   rounded = false;
-  maxRadius: number = null;
+  radius: number = null;
   rippleSpeed = 1;
   rippleColor = '';
-  rippleBackgroundColor = '';
 
   disableButtonRipples = false;
 
   doManualRipple() {
-    if (this.manualRipple) {
-      window.setTimeout(() => this.manualRipple.start(), 10);
-      window.setTimeout(() => this.manualRipple.end(0, 0), 500);
+    if (this.ripple) {
+      this.ripple.launch(0, 0, { centered: true });
     }
   }
+
 }

src/demo-app/style/style-demo.html

@@ -2,6 +2,7 @@
 <button (click)="b.focus()">focus programmatically</button>
 
 <button (click)="fom.focusVia(b, renderer, 'mouse')">focusVia: mouse</button>
+<button (click)="fom.focusVia(b, renderer, 'touch')">focusVia: touch</button>
 <button (click)="fom.focusVia(b, renderer, 'keyboard')">focusVia: keyboard</button>
 <button (click)="fom.focusVia(b, renderer, 'program')">focusVia: program</button>
 

src/demo-app/style/style-demo.scss

@@ -13,3 +13,7 @@
 .demo-button.cdk-program-focused {
   background: blue;
 }
+
+.demo-button.cdk-touch-focused {
+  background: purple;
+}

src/lib/autocomplete/autocomplete-trigger.ts

@@ -8,7 +8,6 @@ import {
     NgZone,
     Optional,
     OnDestroy,
-    QueryList,
     ViewContainerRef,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
@@ -23,7 +22,6 @@ import {ENTER, UP_ARROW, DOWN_ARROW} from '../core/keyboard/keycodes';
 import {Dir} from '../core/rtl/dir';
 import {Subscription} from 'rxjs/Subscription';
 import {Subject} from 'rxjs/Subject';
-import 'rxjs/add/observable/of';
 import 'rxjs/add/observable/merge';
 import 'rxjs/add/operator/startWith';
 import 'rxjs/add/operator/switchMap';
@@ -258,33 +256,20 @@ export class MdAutocompleteTrigger implements AfterContentInit, ControlValueAcce
    * stream every time the option list changes.
    */
   private _subscribeToClosingActions(): void {
-    const initialOptions = this._getStableOptions();
-
     // When the zone is stable initially, and when the option list changes...
-    Observable.merge(initialOptions, this.autocomplete.options.changes)
+    Observable.merge(this._zone.onStable.first(), this.autocomplete.options.changes)
         // create a new stream of panelClosingActions, replacing any previous streams
         // that were created, and flatten it so our stream only emits closing events...
-        .switchMap(options => {
+        .switchMap(() => {
           this._resetPanel();
-          // If the options list is empty, emit close event immediately.
-          // Otherwise, listen for panel closing actions...
-          return options.length ? this.panelClosingActions : Observable.of(null);
+          return this.panelClosingActions;
         })
         // when the first closing event occurs...
         .first()
         // set the value, close the panel, and complete.
         .subscribe(event => this._setValueAndClose(event));
   }
 
-  /**
-   * Retrieves the option list once the zone stabilizes. It's important to wait until
-   * stable so that change detection can run first and update the query list
-   * with the options available under the current filter.
-   */
-  private _getStableOptions(): Observable<QueryList<MdOption>> {
-    return this._zone.onStable.first().map(() => this.autocomplete.options);
-  }
-
   /** Destroys the autocomplete suggestion panel. */
   private _destroyPanel(): void {
     if (this._overlayRef) {
@@ -364,6 +349,7 @@ export class MdAutocompleteTrigger implements AfterContentInit, ControlValueAcce
   private _resetPanel() {
     this._resetActiveItem();
     this._positionStrategy.recalculateLastPosition();
+    this.autocomplete._setVisibility();
   }
 
 }

src/lib/autocomplete/autocomplete.html

@@ -1,5 +1,5 @@
 <template>
-  <div class="mat-autocomplete-panel" role="listbox" [id]="id" [ngClass]="_getPositionClass()" #panel>
+  <div class="mat-autocomplete-panel" role="listbox" [id]="id" [ngClass]="_getClassList()" #panel>
     <ng-content></ng-content>
   </div>
 </template>

src/lib/autocomplete/autocomplete.scss

@@ -14,6 +14,7 @@ $mat-autocomplete-panel-above-offset: -24px !default;
 
 .mat-autocomplete-panel {
   @include mat-menu-base();
+  visibility: hidden;
 
   max-height: $mat-autocomplete-panel-max-height;
   position: relative;
@@ -25,4 +26,12 @@ $mat-autocomplete-panel-above-offset: -24px !default;
   &.mat-autocomplete-panel-above {
     top: $mat-autocomplete-panel-above-offset;
   }
+
+  &.mat-autocomplete-visible {
+    visibility: visible;
+  }
+
+  &.mat-autocomplete-hidden {
+    visibility: hidden;
+  }
 }

src/lib/autocomplete/autocomplete.spec.ts

@@ -165,20 +165,30 @@ describe('MdAutocomplete', () => {
           .toEqual('', `Expected closing programmatically to close the panel.`);
     });
 
-    it('should close the panel when the options list is empty', async(() => {
+    it('should hide the panel when the options list is empty', async(() => {
       dispatchEvent('focus', input);
-      fixture.detectChanges();
 
       fixture.whenStable().then(() => {
+        fixture.detectChanges();
+
+        const panel =
+            overlayContainerElement.querySelector('.mat-autocomplete-panel') as HTMLElement;
+        expect(panel.classList)
+            .toContain('mat-autocomplete-visible', `Expected panel to start out visible.`);
+
         // Filter down the option list such that no options match the value
         input.value = 'af';
         dispatchEvent('input', input);
         fixture.detectChanges();
 
-        expect(fixture.componentInstance.trigger.panelOpen)
-            .toBe(false, `Expected panel to close when options list is empty.`);
-        expect(overlayContainerElement.textContent)
-            .toEqual('', `Expected panel to close when options list is empty.`);
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+
+          expect(fixture.componentInstance.trigger.panelOpen)
+            .toBe(true, `Expected panel to stay open when options list is empty.`);
+          expect(panel.classList)
+              .toContain('mat-autocomplete-hidden', `Expected panel to hide itself when empty.`);
+        });
       });
     }));
 

src/lib/autocomplete/autocomplete.ts

@@ -34,6 +34,9 @@ export class MdAutocomplete {
   /** Whether the autocomplete panel displays above or below its trigger. */
   positionY: AutocompletePositionY = 'below';
 
+  /** Whether the autocomplete panel should be visible, depending on option length. */
+  showPanel = false;
+
   @ViewChild(TemplateRef) template: TemplateRef<any>;
   @ViewChild('panel') panel: ElementRef;
   @ContentChildren(MdOption) options: QueryList<MdOption>;
@@ -54,11 +57,18 @@ export class MdAutocomplete {
     }
   }
 
+  /** Panel should hide itself when the option list is empty. */
+  _setVisibility() {
+    Promise.resolve().then(() => this.showPanel = !!this.options.length);
+  }
+
   /** Sets a class on the panel based on its position (used to set y-offset). */
-  _getPositionClass() {
+  _getClassList() {
     return {
       'mat-autocomplete-panel-below': this.positionY === 'below',
-      'mat-autocomplete-panel-above': this.positionY === 'above'
+      'mat-autocomplete-panel-above': this.positionY === 'above',
+      'mat-autocomplete-visible': this.showPanel,
+      'mat-autocomplete-hidden': !this.showPanel
     };
   }
 

src/lib/button-toggle/_button-toggle-theme.scss

@@ -18,5 +18,9 @@
   .mat-button-toggle-disabled {
     background-color: map_get($mat-grey, 200);
     color: mat-color($foreground, disabled-button);
+
+    &.mat-button-toggle-checked {
+      background-color: mat-color($mat-grey, 400);
+    }
   }
 }