Merge branch 'master' into multi-select

Author: crisbeto

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

@@ -35,7 +35,9 @@
     </md-input-container>
   </section>
   <section>
-    <button md-raised-button (click)="doManualRipple()">Manual ripple</button>
+    <button md-raised-button (click)="launchRipple()">Launch Ripple</button>
+    <button md-raised-button (click)="launchRipple(true)">Launch Ripple (Persistent)</button>
+    <button md-raised-button (click)="fadeOutAll()">Fade Out All</button>
   </section>
   <section>
     <div class="demo-ripple-container"

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

@@ -21,9 +21,15 @@ export class RippleDemo {
 
   disableButtonRipples = false;
 
-  doManualRipple() {
+  launchRipple(persistent = false) {
     if (this.ripple) {
-      this.ripple.launch(0, 0, { centered: true });
+      this.ripple.launch(0, 0, { centered: true, persistent });
+    }
+  }
+
+  fadeOutAll() {
+    if (this.ripple) {
+      this.ripple.fadeOutAll();
     }
   }
 

src/examples/autocomplete-overview/autocomplete-overview-example.css

@@ -0,0 +1,9 @@
+<md-input-container>
+  <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
+</md-input-container>
+
+<md-autocomplete #auto="mdAutocomplete">
+  <md-option *ngFor="let state of filteredStates | async" [value]="state">
+    {{ state }}
+  </md-option>
+</md-autocomplete>

src/examples/autocomplete-overview/autocomplete-overview-example.html

@@ -0,0 +1,77 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import 'rxjs/add/operator/startWith';
+
+@Component({
+  selector: 'autocomplete-overview-example',
+  templateUrl: './autocomplete-overview-example.html',
+})
+export class AutocompleteOverviewExample {
+  stateCtrl: FormControl;
+  filteredStates: any;
+
+  states = [
+    'Alabama',
+    'Alaska',
+    'Arizona',
+    'Arkansas',
+    'California',
+    'Colorado',
+    'Connecticut',
+    'Delaware',
+    'Florida',
+    'Georgia',
+    'Hawaii',
+    'Idaho',
+    'Illinois',
+    'Indiana',
+    'Iowa',
+    'Kansas',
+    'Kentucky',
+    'Louisiana',
+    'Maine',
+    'Maryland',
+    'Massachusetts',
+    'Michigan',
+    'Minnesota',
+    'Mississippi',
+    'Missouri',
+    'Montana',
+    'Nebraska',
+    'Nevada',
+    'New Hampshire',
+    'New Jersey',
+    'New Mexico',
+    'New York',
+    'North Carolina',
+    'North Dakota',
+    'Ohio',
+    'Oklahoma',
+    'Oregon',
+    'Pennsylvania',
+    'Rhode Island',
+    'South Carolina',
+    'South Dakota',
+    'Tennessee',
+    'Texas',
+    'Utah',
+    'Vermont',
+    'Virginia',
+    'Washington',
+    'West Virginia',
+    'Wisconsin',
+    'Wyoming',
+  ];
+
+  constructor() {
+    this.stateCtrl = new FormControl();
+    this.filteredStates = this.stateCtrl.valueChanges
+        .startWith(null)
+        .map(name => this.filterStates(name));
+  }
+
+  filterStates(val: string) {
+    return val ? this.states.filter((s) => new RegExp(val, 'gi').test(s)) : this.states;
+  }
+
+}

src/examples/autocomplete-overview/autocomplete-overview-example.ts

@@ -1,7 +1,8 @@
 import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CommonModule} from '@angular/common';
 import {MaterialModule} from '@angular/material';
+import {AutocompleteOverviewExample} from './autocomplete-overview/autocomplete-overview-example';
 import {ButtonOverviewExample} from './button-overview/button-overview-example';
 import {ButtonTypesExample} from './button-types/button-types-example';
 import {CheckboxOverviewExample} from './checkbox-overview/checkbox-overview-example';
@@ -84,6 +85,7 @@ export interface LiveExample {
  * Value is the component.
  */
 export const EXAMPLE_COMPONENTS = {
+  'autocomplete-overview': {title: 'Basic autocomplete', component: AutocompleteOverviewExample},
   'button-overview': {title: 'Basic buttons', component: ButtonOverviewExample},
   'button-types': {title: 'Button varieties', component: ButtonTypesExample},
   'button-toggle-exclusive': {
@@ -169,6 +171,7 @@ export const EXAMPLE_COMPONENTS = {
  * We need to put them in both `declarations` and `entryComponents` to make them work.
  */
 export const EXAMPLE_LIST = [
+  AutocompleteOverviewExample,
   ButtonOverviewExample,
   ButtonToggleExclusiveExample,
   ButtonToggleOverviewExample,
@@ -226,6 +229,7 @@ export const EXAMPLE_LIST = [
   imports: [
     MaterialModule,
     FormsModule,
+    ReactiveFormsModule,
     CommonModule,
   ]
 })

src/examples/example-module.ts

@@ -3,11 +3,11 @@ import {MdLineModule} from './line/line';
 import {RtlModule} from './rtl/dir';
 import {ObserveContentModule} from './observe-content/observe-content';
 import {MdOptionModule} from './option/option';
-import {MdRippleModule} from './ripple/ripple';
 import {PortalModule} from './portal/portal-directives';
 import {OverlayModule} from './overlay/overlay-directives';
 import {A11yModule} from './a11y/index';
 import {MdSelectionModule} from './selection/index';
+import {MdRippleModule} from './ripple/index';
 
 
 // RTL
@@ -64,7 +64,7 @@ export {GestureConfig} from './gestures/gesture-config';
 export {HammerInput, HammerManager} from './gestures/gesture-annotations';
 
 // Ripple
-export {MdRipple, MdRippleModule} from './ripple/ripple';
+export * from './ripple/index';
 
 // a11y
 export {

src/lib/core/core.ts

@@ -74,7 +74,7 @@ export class ComponentPortal<T> extends Portal<ComponentRef<T>> {
   /**
    * [Optional] Where the attached component should live in Angular's *logical* component tree.
    * This is different from where the component *renders*, which is determined by the PortalHost.
-   * The origin necessary when the host is outside of the Angular application context.
+   * The origin is necessary when the host is outside of the Angular application context.
    */
   viewContainerRef: ViewContainerRef;
 

src/lib/core/portal/portal.ts

@@ -0,0 +1,25 @@
+import {ModuleWithProviders, NgModule} from '@angular/core';
+import {MdRipple} from './ripple';
+import {CompatibilityModule} from '../compatibility/compatibility';
+import {VIEWPORT_RULER_PROVIDER} from '../overlay/position/viewport-ruler';
+import {SCROLL_DISPATCHER_PROVIDER} from '../overlay/scroll/scroll-dispatcher';
+
+export {MdRipple} from './ripple';
+export {RippleRef} from './ripple-ref';
+export {RippleConfig} from './ripple-renderer';
+
+@NgModule({
+  imports: [CompatibilityModule],
+  exports: [MdRipple, CompatibilityModule],
+  declarations: [MdRipple],
+  providers: [VIEWPORT_RULER_PROVIDER, SCROLL_DISPATCHER_PROVIDER],
+})
+export class MdRippleModule {
+  /** @deprecated */
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: MdRippleModule,
+      providers: []
+    };
+  }
+}

src/lib/core/ripple/index.ts

@@ -0,0 +1,18 @@
+import {RippleConfig, RippleRenderer} from './ripple-renderer';
+
+/**
+ * Reference to a previously launched ripple element.
+ */
+export class RippleRef {
+
+  constructor(
+    private _renderer: RippleRenderer,
+    public element: HTMLElement,
+    public config: RippleConfig) {
+  }
+
+  /** Fades out the ripple element. */
+  fadeOut() {
+    this._renderer.fadeOutRipple(this);
+  }
+}

src/lib/core/ripple/ripple-ref.ts

@@ -1,26 +1,19 @@
 import {ElementRef, NgZone} from '@angular/core';
 import {ViewportRuler} from '../overlay/position/viewport-ruler';
+import {RippleRef} from './ripple-ref';
 
 /** Fade-in duration for the ripples. Can be modified with the speedFactor option. */
 export const RIPPLE_FADE_IN_DURATION = 450;
 
 /** Fade-out duration for the ripples in milliseconds. This can't be modified by the speedFactor. */
 export const RIPPLE_FADE_OUT_DURATION = 400;
 
-/**
- * Returns the distance from the point (x, y) to the furthest corner of a rectangle.
- */
-const distanceToFurthestCorner = (x: number, y: number, rect: ClientRect) => {
-  const distX = Math.max(Math.abs(x - rect.left), Math.abs(x - rect.right));
-  const distY = Math.max(Math.abs(y - rect.top), Math.abs(y - rect.bottom));
-  return Math.sqrt(distX * distX + distY * distY);
-};
-
 export type RippleConfig = {
   color?: string;
   centered?: boolean;
   radius?: number;
   speedFactor?: number;
+  persistent?: boolean;
 };
 
 /**
@@ -41,12 +34,12 @@ export class RippleRenderer {
   /** Whether the mouse is currently down or not. */
   private _isMousedown: boolean = false;
 
-  /** Currently active ripples that will be closed on mouseup. */
-  private _activeRipples: HTMLElement[] = [];
-
   /** Events to be registered on the trigger element. */
   private _triggerEvents = new Map<string, any>();
 
+  /** Set of currently active ripple references. */
+  private _activeRipples = new Set<RippleRef>();
+
   /** Ripple config for all ripples created by events. */
   rippleConfig: RippleConfig = {};
 
@@ -66,7 +59,7 @@ export class RippleRenderer {
   }
 
   /** Fades in a ripple at the given coordinates. */
-  fadeInRipple(pageX: number, pageY: number, config: RippleConfig = {}) {
+  fadeInRipple(pageX: number, pageY: number, config: RippleConfig = {}): RippleRef {
     let containerRect = this._containerElement.getBoundingClientRect();
 
     if (config.centered) {
@@ -101,28 +94,46 @@ export class RippleRenderer {
 
     // By default the browser does not recalculate the styles of dynamically created
     // ripple elements. This is critical because then the `scale` would not animate properly.
-    this._enforceStyleRecalculation(ripple);
+    enforceStyleRecalculation(ripple);
 
     ripple.style.transform = 'scale(1)';
 
-    // Wait for the ripple to be faded in. Once it's faded in, the ripple can be hidden immediately
-    // if the mouse is released.
+    // Exposed reference to the ripple that will be returned.
+    let rippleRef = new RippleRef(this, ripple, config);
+
+    // Wait for the ripple element to be completely faded in.
+    // Once it's faded in, the ripple can be hidden immediately if the mouse is released.
     this.runTimeoutOutsideZone(() => {
-      this._isMousedown ? this._activeRipples.push(ripple) : this.fadeOutRipple(ripple);
+      if (config.persistent || this._isMousedown) {
+        this._activeRipples.add(rippleRef);
+      } else {
+        rippleRef.fadeOut();
+      }
     }, duration);
+
+    return rippleRef;
   }
 
-  /** Fades out a ripple element. */
-  fadeOutRipple(ripple: HTMLElement) {
-    ripple.style.transitionDuration = `${RIPPLE_FADE_OUT_DURATION}ms`;
-    ripple.style.opacity = '0';
+  /** Fades out a ripple reference. */
+  fadeOutRipple(ripple: RippleRef) {
+    let rippleEl = ripple.element;
+
+    this._activeRipples.delete(ripple);
+
+    rippleEl.style.transitionDuration = `${RIPPLE_FADE_OUT_DURATION}ms`;
+    rippleEl.style.opacity = '0';
 
     // Once the ripple faded out, the ripple can be safely removed from the DOM.
     this.runTimeoutOutsideZone(() => {
-      ripple.parentNode.removeChild(ripple);
+      rippleEl.parentNode.removeChild(rippleEl);
     }, RIPPLE_FADE_OUT_DURATION);
   }
 
+  /** Fades out all currently active ripples. */
+  fadeOutAll() {
+    this._activeRipples.forEach(ripple => ripple.fadeOut());
+  }
+
   /** Sets the trigger element and registers the mouse events. */
   setTriggerElement(element: HTMLElement) {
     // Remove all previously register event listeners from the trigger element.
@@ -151,8 +162,13 @@ export class RippleRenderer {
   /** Listener being called on mouseup event. */
   private onMouseup() {
     this._isMousedown = false;
-    this._activeRipples.forEach(ripple => this.fadeOutRipple(ripple));
-    this._activeRipples = [];
+
+    // On mouseup, fade-out all ripples that are active and not persistent.
+    this._activeRipples.forEach(ripple => {
+      if (!ripple.config.persistent) {
+        ripple.fadeOut();
+      }
+    });
   }
 
   /** Listener being called on mouseleave event. */
@@ -167,13 +183,22 @@ export class RippleRenderer {
     this._ngZone.runOutsideAngular(() => setTimeout(fn, delay));
   }
 
-  /** Enforces a style recalculation of a DOM element by computing its styles. */
-  // TODO(devversion): Move into global utility function.
-  private _enforceStyleRecalculation(element: HTMLElement) {
-    // Enforce a style recalculation by calling `getComputedStyle` and accessing any property.
-    // Calling `getPropertyValue` is important to let optimizers know that this is not a noop.
-    // See: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
-    window.getComputedStyle(element).getPropertyValue('opacity');
-  }
+}
+
+/** Enforces a style recalculation of a DOM element by computing its styles. */
+// TODO(devversion): Move into global utility function.
+function enforceStyleRecalculation(element: HTMLElement) {
+  // Enforce a style recalculation by calling `getComputedStyle` and accessing any property.
+  // Calling `getPropertyValue` is important to let optimizers know that this is not a noop.
+  // See: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
+  window.getComputedStyle(element).getPropertyValue('opacity');
+}
 
+/**
+ * Returns the distance from the point (x, y) to the furthest corner of a rectangle.
+ */
+function distanceToFurthestCorner(x: number, y: number, rect: ClientRect) {
+  const distX = Math.max(Math.abs(x - rect.left), Math.abs(x - rect.right));
+  const distY = Math.max(Math.abs(y - rect.top), Math.abs(y - rect.bottom));
+  return Math.sqrt(distX * distX + distY * distY);
 }