Merge branch 'master' into 2601/dialog-pop-state

Author: crisbeto

README.md

@@ -75,7 +75,7 @@ High level items planned for January 2017:
 | dialog           |                           Available | [README][22] |   [#114][0114] |
 | snackbar / toast |                           Available | [README][21] |   [#115][0115] |
 | select           |                           Available | [README][23] |   [#118][0118] |
-| textarea         |                           Available |           -  |              - |
+| textarea         |                           Available | [README][5]  |              - |
 | autocomplete     |                         In-progress |           -  |   [#117][0117] |
 | chips            |  Initial version, features evolving |           -  |   [#120][0120] |
 | theming          |   Available, need guidance overlays | [Guide][20]  |              - |

guides/theming.md

@@ -41,7 +41,7 @@ The actual path will depend on your server setup.
 You can also concatenate the file with the rest of your application's css.
 
 Finally, if your app's content **is not** placed inside of a `md-sidenav-container` element, you
-need to add the `md-app-background` class to your wrapper element (for example the `body`). This
+need to add the `mat-app-background` class to your wrapper element (for example the `body`). This
 ensures that the proper theme background is applied to your page.
 
 ### Defining a custom theme
@@ -55,19 +55,19 @@ the corresponding styles. A typical theme file will look something like this:
 
 // Include the base styles for Angular Material core. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
-@include md-core();
+@include mat-core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue.
-$candy-app-primary: md-palette($md-indigo);
-$candy-app-accent:  md-palette($md-pink, A200, A100, A400);
+$candy-app-primary: mat-palette($mat-indigo);
+$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$candy-app-warn:    md-palette($md-red);
+$candy-app-warn:    mat-palette($mat-red);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$candy-app-theme: md-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
+$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
@@ -96,11 +96,11 @@ some selector. For example, we could append the following to the example above t
 secondary dark theme:
 ```scss
 .unicorn-dark-theme {
-  $dark-primary: md-palette($md-blue-grey);
-  $dark-accent:  md-palette($md-amber, A200, A100, A400);
-  $dark-warn:    md-palette($md-deep-orange);
+  $dark-primary: mat-palette($mat-blue-grey);
+  $dark-accent:  mat-palette($mat-amber, A200, A100, A400);
+  $dark-warn:    mat-palette($mat-deep-orange);
 
-  $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
+  $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
 
   @include angular-material-theme($dark-theme);
 }

src/demo-app/tooltip/tooltip-demo.html

@@ -1,7 +1,7 @@
 <div class="demo-tooltip">
   <h1>Tooltip Demo</h1>
 
-  <p class="centered">
+  <div class="centered" cdk-scrollable>
     <button #tooltip="mdTooltip"
             md-raised-button
             color="primary"
@@ -11,7 +11,9 @@ <h1>Tooltip Demo</h1>
             [mdTooltipHideDelay]="hideDelay">
       Mouse over to see the tooltip
     </button>
-  </p>
+    <div>Scroll down while tooltip is open to see it hide automatically</div>
+    <div style="height: 400px;"></div>
+  </div>
 
   <p>
     <md-radio-group [(ngModel)]="position">

src/demo-app/tooltip/tooltip-demo.scss

@@ -1,6 +1,12 @@
 .demo-tooltip {
   .centered {
     text-align: center;
+    height: 200px;
+    overflow: auto;
+
+    button {
+      margin: 16px;
+    }
   }
   .mat-radio-button {
     display: block;

src/lib/autocomplete/autocomplete-trigger.ts

@@ -84,7 +84,7 @@ export class MdAutocompleteTrigger implements AfterContentInit, ControlValueAcce
   private _blurStream = new Subject<any>();
 
   /** View -> model callback called when value changes */
-  _onChange: (value: any) => {};
+  _onChange = (value: any) => {};
 
   /** View -> model callback called when autocomplete has been touched */
   _onTouched = () => {};

src/lib/autocomplete/autocomplete.spec.ts

@@ -24,7 +24,7 @@ describe('MdAutocomplete', () => {
       imports: [
           MdAutocompleteModule.forRoot(), MdInputModule.forRoot(), ReactiveFormsModule
       ],
-      declarations: [SimpleAutocomplete],
+      declarations: [SimpleAutocomplete, AutocompleteWithoutForms],
       providers: [
         {provide: OverlayContainer, useFactory: () => {
           overlayContainerElement = document.createElement('div');
@@ -790,6 +790,25 @@ describe('MdAutocomplete', () => {
 
   });
 
+  describe('misc', () => {
+
+    it('should allow basic use without any forms directives', () => {
+      expect(() => {
+        const fixture = TestBed.createComponent(AutocompleteWithoutForms);
+        fixture.detectChanges();
+
+        const input = fixture.debugElement.query(By.css('input')).nativeElement;
+        input.value = 'd';
+        dispatchEvent('input', input);
+        fixture.detectChanges();
+
+        const options =
+            overlayContainerElement.querySelectorAll('md-option') as NodeListOf<HTMLElement>;
+        expect(options.length).toBe(1);
+      }).not.toThrowError();
+    });
+
+  });
 });
 
 @Component({
@@ -849,6 +868,33 @@ class SimpleAutocomplete implements OnDestroy {
 }
 
 
+@Component({
+  template: `
+    <md-input-container>
+      <input mdInput placeholder="State" [mdAutocomplete]="auto" 
+      (input)="onInput($event.target?.value)">
+    </md-input-container>
+  
+    <md-autocomplete #auto="mdAutocomplete">
+      <md-option *ngFor="let state of filteredStates" [value]="state">
+        <span> {{ state }}  </span>
+      </md-option>
+    </md-autocomplete>
+  `
+})
+class AutocompleteWithoutForms {
+  filteredStates: any[];
+  states = ['Alabama', 'California', 'Florida'];
+
+  constructor() {
+    this.filteredStates = this.states.slice();
+  }
+
+  onInput(value: any) {
+    this.filteredStates = this.states.filter(s => new RegExp(value, 'gi').test(s));
+  }
+
+}
 
 /**
  * TODO: Move this to core testing utility until Angular has event faking

src/lib/core/overlay/scroll/scroll-dispatcher.spec.ts

@@ -1,5 +1,5 @@
-import {inject, TestBed, async, ComponentFixture} from '@angular/core/testing';
-import {NgModule, Component, ViewChild, ElementRef, QueryList, ViewChildren} from '@angular/core';
+import {inject, TestBed, async, fakeAsync, ComponentFixture, tick} from '@angular/core/testing';
+import {NgModule, Component, ViewChild, ElementRef} from '@angular/core';
 import {ScrollDispatcher} from './scroll-dispatcher';
 import {OverlayModule} from '../overlay-directives';
 import {Scrollable} from './scrollable';
@@ -38,15 +38,17 @@ describe('Scroll Dispatcher', () => {
       expect(scroll.scrollableReferences.has(componentScrollable)).toBe(false);
     });
 
-    it('should notify through the directive and service that a scroll event occurred', () => {
+    it('should notify through the directive and service that a scroll event occurred',
+        fakeAsync(() => {
       let hasDirectiveScrollNotified = false;
       // Listen for notifications from scroll directive
       let scrollable = fixture.componentInstance.scrollable;
       scrollable.elementScrolled().subscribe(() => { hasDirectiveScrollNotified = true; });
 
-      // Listen for notifications from scroll service
+      // Listen for notifications from scroll service with a throttle of 100ms
+      const throttleTime = 100;
       let hasServiceScrollNotified = false;
-      scroll.scrolled().subscribe(() => { hasServiceScrollNotified = true; });
+      scroll.scrolled(throttleTime).subscribe(() => { hasServiceScrollNotified = true; });
 
       // Emit a scroll event from the scrolling element in our component.
       // This event should be picked up by the scrollable directive and notify.
@@ -55,9 +57,17 @@ describe('Scroll Dispatcher', () => {
       scrollEvent.initUIEvent('scroll', true, true, window, 0);
       fixture.componentInstance.scrollingElement.nativeElement.dispatchEvent(scrollEvent);
 
+      // The scrollable directive should have notified the service immediately.
       expect(hasDirectiveScrollNotified).toBe(true);
+
+      // Verify that the throttle is used, the service should wait for the throttle time until
+      // sending the notification.
+      expect(hasServiceScrollNotified).toBe(false);
+
+      // After the throttle time, the notification should be sent.
+      tick(throttleTime);
       expect(hasServiceScrollNotified).toBe(true);
-    });
+    }));
   });
 
   describe('Nested scrollables', () => {
@@ -107,7 +117,6 @@ class ScrollingComponent {
 })
 class NestedScrollingComponent {
   @ViewChild('interestingElement') interestingElement: ElementRef;
-  @ViewChildren(Scrollable) scrollables: QueryList<Scrollable>;
 }
 
 const TEST_COMPONENTS = [ScrollingComponent, NestedScrollingComponent];

src/lib/core/overlay/scroll/scroll-dispatcher.ts

@@ -4,8 +4,12 @@ import {Subject} from 'rxjs/Subject';
 import {Observable} from 'rxjs/Observable';
 import {Subscription} from 'rxjs/Subscription';
 import 'rxjs/add/observable/fromEvent';
+import 'rxjs/add/operator/auditTime';
 
 
+/** Time in ms to throttle the scrolling events by default. */
+export const DEFAULT_SCROLL_TIME = 20;
+
 /**
  * Service contained all registered Scrollable references and emits an event when any one of the
  * Scrollable references emit a scrolled event.
@@ -50,11 +54,17 @@ export class ScrollDispatcher {
 
   /**
    * Returns an observable that emits an event whenever any of the registered Scrollable
-   * references (or window, document, or body) fire a scrolled event.
+   * references (or window, document, or body) fire a scrolled event. Can provide a time in ms
+   * to override the default "throttle" time.
    */
-  scrolled(): Observable<void> {
-    // TODO: Add an event limiter that includes throttle with the leading and trailing events.
-    return this._scrolled.asObservable();
+  scrolled(auditTimeInMs: number = DEFAULT_SCROLL_TIME): Observable<void> {
+    // In the case of a 0ms delay, return the observable without auditTime since it does add
+    // a perceptible delay in processing overhead.
+    if (auditTimeInMs == 0) {
+      return this._scrolled.asObservable();
+    }
+
+    return this._scrolled.asObservable().auditTime(auditTimeInMs);
   }
 
   /** Returns all registered Scrollables that contain the provided element. */
@@ -90,7 +100,7 @@ export class ScrollDispatcher {
 
 export function SCROLL_DISPATCHER_PROVIDER_FACTORY(parentDispatcher: ScrollDispatcher) {
   return parentDispatcher || new ScrollDispatcher();
-};
+}
 
 export const SCROLL_DISPATCHER_PROVIDER = {
   // If there is already a ScrollDispatcher available, use that. Otherwise, provide a new one.

src/lib/dialog/dialog.spec.ts

@@ -408,6 +408,8 @@ describe('MdDialog', () => {
 
       expect(document.activeElement.id)
           .toBe('dialog-trigger', 'Expected that the trigger was refocused after dialog close');
+
+      document.body.removeChild(button);
     }));
   });
 

src/lib/select/select.spec.ts

@@ -7,6 +7,7 @@ import {
   ViewChild,
   ViewChildren,
   ChangeDetectionStrategy,
+  OnInit,
 } from '@angular/core';
 import {MdSelectModule} from './index';
 import {OverlayContainer} from '../core/overlay/overlay-container';
@@ -34,6 +35,8 @@ describe('MdSelect', () => {
         SelectWithChangeEvent,
         CustomSelectAccessor,
         CompWithCustomSelect,
+        SelectWithErrorSibling,
+        ThrowsErrorOnInit,
         BasicSelectOnPush
       ],
       providers: [
@@ -1239,6 +1242,14 @@ describe('MdSelect', () => {
       });
     }));
 
+    it('should not crash the browser when a sibling throws an error on init', async(() => {
+      // Note that this test can be considered successful if the error being thrown didn't
+      // end up crashing the testing setup altogether.
+      expect(() => {
+        TestBed.createComponent(SelectWithErrorSibling).detectChanges();
+      }).toThrowError(new RegExp('Oh no!', 'g'));
+    }));
+
   });
 
   describe('change event', () => {
@@ -1281,7 +1292,7 @@ describe('MdSelect', () => {
     beforeEach(() => {
       fixture = TestBed.createComponent(BasicSelectOnPush);
       fixture.detectChanges();
-      trigger = fixture.debugElement.query(By.css('.md-select-trigger')).nativeElement;
+      trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
     });
 
     it('should update the trigger based on the value', () => {
@@ -1474,6 +1485,27 @@ class CompWithCustomSelect {
   @ViewChild(CustomSelectAccessor) customAccessor: CustomSelectAccessor;
 }
 
+@Component({
+  selector: 'select-infinite-loop',
+  template: `
+    <md-select [(ngModel)]="value"></md-select>
+    <throws-error-on-init></throws-error-on-init>
+  `
+})
+class SelectWithErrorSibling {
+  value: string;
+}
+
+@Component({
+  selector: 'throws-error-on-init',
+  template: ''
+})
+export class ThrowsErrorOnInit implements OnInit {
+  ngOnInit() {
+    throw new Error('Oh no!');
+  }
+}
+
 @Component({
   selector: 'basic-select-on-push',
   changeDetection: ChangeDetectionStrategy.OnPush,