Merge branch 'master' into dialog-animation

# Conflicts:
#	src/lib/dialog/dialog.ts

Author: crisbeto

.gitignore

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

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]  |              - |

e2e/components/dialog/dialog.e2e.ts

@@ -11,6 +11,12 @@ describe('dialog', () => {
     expectToExist('md-dialog-container');
   });
 
+  it('should open a template dialog', () => {
+    expectToExist('.my-template-dialog', false);
+    element(by.id('template')).click();
+    expectToExist('.my-template-dialog');
+  });
+
   it('should close by clicking on the backdrop', () => {
     element(by.id('default')).click();
 

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);
 }

package.json

@@ -66,9 +66,12 @@
     "gulp-clean-css": "^2.3.2",
     "gulp-cli": "^1.2.2",
     "gulp-connect": "^5.0.0",
+    "gulp-flatten": "^0.3.1",
+    "gulp-highlight-files": "0.0.4",
     "gulp-htmlmin": "^3.0.0",
     "gulp-if": "^2.0.2",
     "gulp-markdown": "^1.2.0",
+    "gulp-rename": "^1.2.2",
     "gulp-sass": "^3.1.0",
     "gulp-sourcemaps": "^2.4.0",
     "gulp-transform": "^1.1.0",
@@ -91,10 +94,11 @@
     "run-sequence": "^1.2.2",
     "sass": "^0.5.0",
     "selenium-webdriver": "^3.0.1",
-    "stylelint": "^7.7.1",
+    "stylelint": "^7.8.0",
     "travis-after-modes": "0.0.7",
     "ts-node": "^2.0.0",
-    "tslint": "^3.13.0",
+    "tslint": "^4.4.2",
+    "tslint-no-unused-var": "0.0.6",
     "typescript": "~2.0.10",
     "uglify-js": "^2.7.5",
     "web-animations-js": "^2.2.2"

src/demo-app/dialog/dialog-demo.html

@@ -1,7 +1,14 @@
 <h1>Dialog demo</h1>
 
-<button md-raised-button color="primary" (click)="openJazz()" [disabled]="dialogRef">Open dialog</button>
-<button md-raised-button color="accent" (click)="openContentElement()">Open dialog with content elements</button>
+<button md-raised-button color="primary" (click)="openJazz()" [disabled]="dialogRef">
+  Open dialog
+</button>
+<button md-raised-button color="accent" (click)="openContentElement()">
+  Open dialog with content elements
+</button>
+<button md-raised-button color="accent" (click)="openTemplate()">
+  Open dialog with template content
+</button>
 
 <md-card class="demo-dialog-card">
   <md-card-content>
@@ -59,3 +66,7 @@ <h2>Other options</h2>
 </md-card>
 
 <p>Last close result: {{lastCloseResult}}</p>
+
+<template>
+  I'm a template dialog. I've been opened {{numTemplateOpens}} times!
+</template>

src/demo-app/dialog/dialog-demo.ts

@@ -1,4 +1,4 @@
-import {Component, Inject} from '@angular/core';
+import {Component, Inject, ViewChild, TemplateRef} from '@angular/core';
 import {DOCUMENT} from '@angular/platform-browser';
 import {MdDialog, MdDialogRef, MdDialogConfig, MD_DIALOG_DATA} from '@angular/material';
 
@@ -27,6 +27,9 @@ export class DialogDemo {
       message: 'Jazzy jazz jazz'
     }
   };
+  numTemplateOpens = 0;
+
+  @ViewChild(TemplateRef) template: TemplateRef<any>;
 
   constructor(public dialog: MdDialog, @Inject(DOCUMENT) doc: any) {
     // Possible useful example for the open and closeAll events.
@@ -55,6 +58,11 @@ export class DialogDemo {
     let dialogRef = this.dialog.open(ContentElementDialog, this.config);
     dialogRef.componentInstance.actionsAlignment = this.actionsAlignment;
   }
+
+  openTemplate() {
+    this.numTemplateOpens++;
+    this.dialog.open(this.template, this.config);
+  }
 }
 
 

src/demo-app/select/select-demo.html

@@ -27,7 +27,7 @@
     <p> Touched: {{ drinkControl.touched }} </p>
     <p> Dirty: {{ drinkControl.dirty }} </p>
     <p> Status: {{ drinkControl.control?.status }} </p>
-    <button md-button (click)="currentDrink='sprite-1'">SET VALUE</button>
+    <button md-button (click)="currentDrink='water-2'">SET VALUE</button>
     <button md-button (click)="isRequired=!isRequired">TOGGLE REQUIRED</button>
     <button md-button (click)="isDisabled=!isDisabled">TOGGLE DISABLED</button>
     <button md-button (click)="drinkControl.reset()">RESET</button>

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/e2e-app/dialog/dialog-e2e.html

@@ -1,2 +1,5 @@
 <button id="default" (click)="openDefault()">DEFAULT</button>
 <button id="disabled" (click)="openDisabled()">DISABLED</button>
+<button id="template" (click)="openTemplate()">TEMPLATE</button>
+
+<template><div class="my-template-dialog">my template dialog</div></template>

src/e2e-app/dialog/dialog-e2e.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, ViewChild, TemplateRef} from '@angular/core';
 import {MdDialog, MdDialogRef, MdDialogConfig} from '@angular/material';
 
 @Component({
@@ -9,6 +9,8 @@ import {MdDialog, MdDialogRef, MdDialogConfig} from '@angular/material';
 export class DialogE2E {
   dialogRef: MdDialogRef<TestDialog>;
 
+  @ViewChild(TemplateRef) templateRef: TemplateRef<any>;
+
   constructor (private _dialog: MdDialog) { }
 
   private _openDialog(config?: MdDialogConfig) {
@@ -28,6 +30,10 @@ export class DialogE2E {
       disableClose: true
     });
   }
+
+  openTemplate() {
+    this.dialogRef = this._dialog.open(this.templateRef);
+  }
 }
 
 @Component({

src/lib/autocomplete/autocomplete-trigger.ts

@@ -84,14 +84,24 @@ 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 = () => {};
 
   /* The autocomplete panel to be attached to this trigger. */
   @Input('mdAutocomplete') autocomplete: MdAutocomplete;
 
+  /** Property with mat- prefix for no-conflict mode. */
+  @Input('matAutocomplete')
+  get _matAutocomplete(): MdAutocomplete {
+    return this.autocomplete;
+  }
+
+  set _matAutocomplete(autocomplete: MdAutocomplete) {
+    this.autocomplete = autocomplete;
+  }
+
   constructor(private _element: ElementRef, private _overlay: Overlay,
               private _viewContainerRef: ViewContainerRef,
               @Optional() private _dir: Dir, private _zone: NgZone,

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/checkbox/checkbox.html

@@ -7,7 +7,7 @@
            [checked]="checked"
            [disabled]="disabled"
            [name]="name"
-           [tabIndex]="tabindex"
+           [tabIndex]="tabIndex"
            [indeterminate]="indeterminate"
            [attr.aria-label]="ariaLabel"
            [attr.aria-labelledby]="ariaLabelledby"

src/lib/checkbox/checkbox.spec.ts

@@ -727,7 +727,7 @@ class MultipleCheckboxes { }
 @Component({
   template: `
     <md-checkbox
-        [tabindex]="customTabIndex"
+        [tabIndex]="customTabIndex"
         [disabled]="isDisabled"
         [disableRipple]="disableRipple">
     </md-checkbox>`,

src/lib/checkbox/checkbox.ts

@@ -139,8 +139,8 @@ export class MdCheckbox implements ControlValueAccessor {
   get disabled(): boolean { return this._disabled; }
   set disabled(value) { this._disabled = coerceBooleanProperty(value); }
 
-  /** @docs-private */
-  @Input() tabindex: number = 0;
+  /** Tabindex value that is passed to the underlying input element. */
+  @Input() tabIndex: number = 0;
 
   /** Name value will be applied to the input element if present */
   @Input() name: string = null;