refactor(input): rename input-container to form-field... (#6331)

* refactor all communication between input-container and input into a
separate interface

* rename input-container to form-field

* alias mat-input-* classes with mat-form-field-* classes

* separate md-form-field into separate directory

* rebase and fix lint

* address comments

* addressed comments

* getter methods --> readonly properties

Author: mmalerba

src/demo-app/a11y/datepicker/datepicker-a11y.scss

@@ -1,3 +1,3 @@
-.mat-input-container {
+.mat-form-field {
   width: 250px;
 }

src/demo-app/autocomplete/autocomplete-demo.scss

@@ -7,7 +7,7 @@
     margin: 24px;
   }
 
-  .mat-input-container {
+  .mat-form-field {
     margin-top: 16px;
   }
 }

src/demo-app/datepicker/datepicker-demo.html

@@ -9,20 +9,20 @@ <h2>Options</h2>
   <md-input-container>
     <input mdInput [mdDatepicker]="minDatePicker" [(ngModel)]="minDate" placeholder="Min date">
     <md-datepicker-toggle mdSuffix [for]="minDatePicker"></md-datepicker-toggle>
+    <md-datepicker #minDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></md-datepicker>
   </md-input-container>
-  <md-datepicker #minDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></md-datepicker>
   <md-input-container>
     <input mdInput [mdDatepicker]="maxDatePicker" [(ngModel)]="maxDate" placeholder="Max date">
     <md-datepicker-toggle mdSuffix [for]="maxDatePicker"></md-datepicker-toggle>
+    <md-datepicker #maxDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></md-datepicker>
   </md-input-container>
-  <md-datepicker #maxDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></md-datepicker>
 </p>
 <p>
   <md-input-container>
     <input mdInput [mdDatepicker]="startAtPicker" [(ngModel)]="startAt" placeholder="Start at date">
     <md-datepicker-toggle mdSuffix [for]="startAtPicker"></md-datepicker-toggle>
+    <md-datepicker #startAtPicker [touchUi]="touch" [disabled]="datepickerDisabled"></md-datepicker>
   </md-input-container>
-  <md-datepicker #startAtPicker [touchUi]="touch" [disabled]="datepickerDisabled"></md-datepicker>
 </p>
 
 <h2>Result</h2>
@@ -40,20 +40,20 @@ <h2>Result</h2>
            placeholder="Pick a date"
            (dateInput)="onDateInput($event)"
            (dateChange)="onDateChange($event)">
+    <md-datepicker
+        #resultPicker
+        [touchUi]="touch"
+        [disabled]="datepickerDisabled"
+        [startAt]="startAt"
+        [startView]="yearView ? 'year' : 'month'">
+    </md-datepicker>
     <md-error *ngIf="resultPickerModel.hasError('mdDatepickerParse')">
       "{{resultPickerModel.getError('mdDatepickerParse').text}}" is not a valid date!
     </md-error>
     <md-error *ngIf="resultPickerModel.hasError('mdDatepickerMin')">Too early!</md-error>
     <md-error *ngIf="resultPickerModel.hasError('mdDatepickerMax')">Too late!</md-error>
     <md-error *ngIf="resultPickerModel.hasError('mdDatepickerFilter')">Date unavailable!</md-error>
   </md-input-container>
-  <md-datepicker
-      #resultPicker
-      [touchUi]="touch"
-      [disabled]="datepickerDisabled"
-      [startAt]="startAt"
-      [startView]="yearView ? 'year' : 'month'">
-  </md-datepicker>
 </p>
 <p>Last input: {{lastDateInput}}</p>
 <p>Last change: {{lastDateChange}}</p>
@@ -83,9 +83,9 @@ <h2>Input disabled datepicker</h2>
     <input mdInput [mdDatepicker]="datePicker1" [(ngModel)]="date" [min]="minDate" [max]="maxDate"
            [mdDatepickerFilter]="filterOdd ? dateFilter : null" [disabled]="true"
            placeholder="Input disabled">
-  </md-input-container>
-  <md-datepicker #datePicker1 [touchUi]="touch" [startAt]="startAt"
+    <md-datepicker #datePicker1 [touchUi]="touch" [startAt]="startAt"
                    [startView]="yearView ? 'year' : 'month'"></md-datepicker>
+  </md-input-container>
 </p>
 
 <h2>Input disabled, datepicker popup enabled</h2>
@@ -95,7 +95,7 @@ <h2>Input disabled, datepicker popup enabled</h2>
     <input mdInput disabled [mdDatepicker]="datePicker2" [(ngModel)]="date" [min]="minDate"
            [max]="maxDate" [mdDatepickerFilter]="filterOdd ? dateFilter : null"
            placeholder="Input disabled, datepicker enabled">
+    <md-datepicker #datePicker2 [touchUi]="touch" [disabled]="false" [startAt]="startAt"
+                   [startView]="yearView ? 'year' : 'month'"></md-datepicker>
   </md-input-container>
-  <md-datepicker #datePicker2 [touchUi]="touch" [disabled]="false" [startAt]="startAt"
-                 [startView]="yearView ? 'year' : 'month'"></md-datepicker>
 </p>

src/demo-app/demo-material-module.ts

@@ -11,6 +11,7 @@ import {
   MdDatepickerModule,
   MdDialogModule,
   MdExpansionModule,
+  MdFormFieldModule,
   MdGridListModule,
   MdIconModule,
   MdInputModule,
@@ -50,6 +51,7 @@ import {CdkTableModule} from '@angular/cdk/table';
     MdDatepickerModule,
     MdDialogModule,
     MdExpansionModule,
+    MdFormFieldModule,
     MdGridListModule,
     MdIconModule,
     MdInputModule,

src/demo-app/tabs/tabs-demo.scss

@@ -43,7 +43,7 @@ tabs-demo .mat-card {
       margin-top: 8px;
     }
 
-    .mat-input-container {
+    .mat-form-field {
       width: 100px;
     }
 

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

@@ -20,10 +20,24 @@ import {InputE2E} from './input/input-e2e';
 import {SidenavE2E} from './sidenav/sidenav-e2e';
 import {BlockScrollStrategyE2E} from './block-scroll-strategy/block-scroll-strategy-e2e';
 import {
-  OverlayContainer, FullscreenOverlayContainer, MdGridListModule, MdProgressBarModule,
-  MdProgressSpinnerModule, MdTabsModule, MdRadioModule, MdSlideToggleModule, MdMenuModule,
-  MdListModule, MdInputModule, MdIconModule, MdDialogModule, MdCheckboxModule, MdButtonModule,
-  MdSidenavModule, MdNativeDateModule,
+  FullscreenOverlayContainer,
+  MdButtonModule,
+  MdCheckboxModule,
+  MdDialogModule,
+  MdFormFieldModule,
+  MdGridListModule,
+  MdIconModule,
+  MdInputModule,
+  MdListModule,
+  MdMenuModule,
+  MdNativeDateModule,
+  MdProgressBarModule,
+  MdProgressSpinnerModule,
+  MdRadioModule,
+  MdSidenavModule,
+  MdSlideToggleModule,
+  MdTabsModule,
+  OverlayContainer,
 } from '@angular/material';
 import {ExampleModule} from '@angular/material-examples';
 
@@ -35,6 +49,7 @@ import {ExampleModule} from '@angular/material-examples';
     MdButtonModule,
     MdCheckboxModule,
     MdDialogModule,
+    MdFormFieldModule,
     MdGridListModule,
     MdIconModule,
     MdInputModule,

src/lib/autocomplete/autocomplete-trigger.ts

@@ -40,7 +40,7 @@ import {Observable} from 'rxjs/Observable';
 import {MdOptionSelectionChange, MdOption} from '../core/option/option';
 import {ENTER, UP_ARROW, DOWN_ARROW, ESCAPE} from '../core/keyboard/keycodes';
 import {Directionality} from '../core/bidi/index';
-import {MdInputContainer} from '../input/input-container';
+import {MdFormField} from '../form-field/index';
 import {Subscription} from 'rxjs/Subscription';
 import {merge} from 'rxjs/observable/merge';
 import {fromEvent} from 'rxjs/observable/fromEvent';
@@ -153,7 +153,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
               private _changeDetectorRef: ChangeDetectorRef,
               @Inject(MD_AUTOCOMPLETE_SCROLL_STRATEGY) private _scrollStrategy,
               @Optional() private _dir: Directionality,
-              @Optional() @Host() private _inputContainer: MdInputContainer,
+              @Optional() @Host() private _formField: MdFormField,
               @Optional() @Inject(DOCUMENT) private _document: any) {}
 
   ngOnDestroy() {
@@ -246,8 +246,8 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
       fromEvent(this._document, 'touchend')
     )).call(filter, (event: MouseEvent | TouchEvent) => {
       const clickTarget = event.target as HTMLElement;
-      const inputContainer = this._inputContainer ?
-          this._inputContainer._elementRef.nativeElement : null;
+      const inputContainer = this._formField ?
+          this._formField._elementRef.nativeElement : null;
 
       return this._panelOpen &&
              clickTarget !== this._element.nativeElement &&
@@ -329,16 +329,16 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
    * This method manually floats the placeholder until the panel can be closed.
    */
   private _floatPlaceholder(): void {
-    if (this._inputContainer && this._inputContainer.floatPlaceholder === 'auto') {
-      this._inputContainer.floatPlaceholder = 'always';
+    if (this._formField && this._formField.floatPlaceholder === 'auto') {
+      this._formField.floatPlaceholder = 'always';
       this._manuallyFloatingPlaceholder = true;
     }
   }
 
   /** If the placeholder has been manually elevated, return it to its normal state. */
   private _resetPlaceholder(): void  {
     if (this._manuallyFloatingPlaceholder) {
-      this._inputContainer.floatPlaceholder = 'auto';
+      this._formField.floatPlaceholder = 'auto';
       this._manuallyFloatingPlaceholder = false;
     }
   }
@@ -408,10 +408,10 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     // The display value can also be the number zero and shouldn't fall back to an empty string.
     const inputValue = toDisplay != null ? toDisplay : '';
 
-    // If it's used in a Material container, we should set it through
-    // the property so it can go through the change detection.
-    if (this._inputContainer) {
-      this._inputContainer._mdInputChild.value = inputValue;
+    // If it's used within a `MdFormField`, we should set it through the property so it can go
+    // through change detection.
+    if (this._formField) {
+      this._formField._control.value = inputValue;
     } else {
       this._element.nativeElement.value = inputValue;
     }
@@ -469,7 +469,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
   }
 
   private _getConnectedElement(): ElementRef {
-    return this._inputContainer ? this._inputContainer._connectionContainerRef : this._element;
+    return this._formField ? this._formField._connectionContainerRef : this._element;
   }
 
   /** Returns the width of the input element, so the panel width can match it. */

src/lib/autocomplete/autocomplete.spec.ts

@@ -23,7 +23,7 @@ import {Directionality, Direction} from '../core/bidi/index';
 import {Subscription} from 'rxjs/Subscription';
 import {ENTER, DOWN_ARROW, SPACE, UP_ARROW, ESCAPE} from '../core/keyboard/keycodes';
 import {MdOption} from '../core/option/option';
-import {MdInputContainer} from '../input/input-container';
+import {MdFormField, MdFormFieldModule} from '../form-field/index';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 import {createKeyboardEvent, dispatchFakeEvent, typeInElement} from '@angular/cdk/testing';
@@ -41,6 +41,7 @@ describe('MdAutocomplete', () => {
     TestBed.configureTestingModule({
       imports: [
         MdAutocompleteModule,
+        MdFormFieldModule,
         MdInputModule,
         FormsModule,
         ReactiveFormsModule,
@@ -517,7 +518,7 @@ describe('MdAutocomplete', () => {
 
     it('should disable input in view when disabled programmatically', () => {
       const inputUnderline =
-          fixture.debugElement.query(By.css('.mat-input-underline')).nativeElement;
+          fixture.debugElement.query(By.css('.mat-form-field-underline')).nativeElement;
 
       expect(input.disabled)
           .toBe(false, `Expected input to start out enabled in view.`);
@@ -1319,10 +1320,10 @@ describe('MdAutocomplete', () => {
         fixture.detectChanges();
 
         const input = fixture.nativeElement.querySelector('input');
-        const placeholder = fixture.nativeElement.querySelector('.mat-input-placeholder');
+        const placeholder = fixture.nativeElement.querySelector('.mat-form-field-placeholder');
 
         expect(input.value).toBe('California');
-        expect(placeholder.classList).not.toContain('mat-empty');
+        expect(placeholder.classList).not.toContain('mat-form-field-empty');
       }));
 
   });
@@ -1417,7 +1418,7 @@ class SimpleAutocomplete implements OnDestroy {
 
   @ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger;
   @ViewChild(MdAutocomplete) panel: MdAutocomplete;
-  @ViewChild(MdInputContainer) inputContainer: MdInputContainer;
+  @ViewChild(MdFormField) inputContainer: MdFormField;
   @ViewChildren(MdOption) options: QueryList<MdOption>;
 
   states = [

src/lib/chips/chip-list.spec.ts

@@ -9,6 +9,7 @@ import {createKeyboardEvent} from '@angular/cdk/testing';
 import {MdInputModule} from '../input/index';
 import {LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE, TAB} from '../core/keyboard/keycodes';
 import {Directionality} from '../core';
+import {MdFormFieldModule} from '../form-field/index';
 
 describe('MdChipList', () => {
   let fixture: ComponentFixture<any>;
@@ -23,7 +24,7 @@ describe('MdChipList', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdChipsModule, MdInputModule, NoopAnimationsModule],
+      imports: [MdChipsModule, MdFormFieldModule, MdInputModule, NoopAnimationsModule],
       declarations: [
         StandardChipList, InputContainerChipList
       ],

src/lib/chips/chips.scss

@@ -32,7 +32,7 @@ $mat-chips-chip-margin: 8px;
     }
   }
 
-  .mat-input-prefix & {
+  .mat-form-field-prefix & {
     &:last-child {
       margin-right: $mat-chips-chip-margin;
     }
@@ -76,7 +76,7 @@ $mat-chips-chip-margin: 8px;
   }
 }
 
-.mat-input-prefix .mat-chip-list-wrapper {
+.mat-form-field-prefix .mat-chip-list-wrapper {
   margin-bottom: $mat-chips-chip-margin;
 }
 

src/lib/core/compatibility/compatibility.ts

@@ -75,6 +75,7 @@ export const MAT_ELEMENTS_SELECTOR = `
   mat-hint,
   mat-icon,
   mat-input-container,
+  mat-form-field,
   mat-list,
   mat-list-item,
   mat-menu,
@@ -151,6 +152,7 @@ export const MD_ELEMENTS_SELECTOR = `
   md-hint,
   md-icon,
   md-input-container,
+  md-form-field,
   md-list,
   md-list-item,
   md-menu,

src/lib/core/theming/_all-theme.scss

@@ -27,6 +27,7 @@
 @import '../../toolbar/toolbar-theme';
 @import '../../tooltip/tooltip-theme';
 @import '../../snack-bar/simple-snack-bar-theme';
+@import '../../form-field/form-field-theme';
 
 
 // Create a theme.
@@ -42,6 +43,7 @@
   @include mat-datepicker-theme($theme);
   @include mat-dialog-theme($theme);
   @include mat-expansion-panel-theme($theme);
+  @include mat-form-field-theme($theme);
   @include mat-grid-list-theme($theme);
   @include mat-icon-theme($theme);
   @include mat-input-theme($theme);

src/lib/core/typography/_all-typography.scss

@@ -28,6 +28,7 @@
 @import '../../snack-bar/simple-snack-bar-theme';
 @import '../option/option-theme';
 @import '../option/optgroup-theme';
+@import '../../form-field/form-field-theme';
 
 
 // Includes all of the typographic styles.
@@ -47,6 +48,7 @@
   @include mat-datepicker-typography($config);
   @include mat-dialog-typography($config);
   @include mat-expansion-panel-typography($config);
+  @include mat-form-field-typography($config);
   @include mat-grid-list-typography($config);
   @include mat-icon-typography($config);
   @include mat-input-typography($config);

src/lib/datepicker/datepicker-input.ts

@@ -31,7 +31,7 @@ import {
   Validators
 } from '@angular/forms';
 import {Subscription} from 'rxjs/Subscription';
-import {MdInputContainer} from '../input/input-container';
+import {MdFormField} from '../form-field/index';
 import {DOWN_ARROW} from '../core/keyboard/keycodes';
 import {DateAdapter} from '../core/datetime/index';
 import {createMissingDateImplError} from './datepicker-errors';
@@ -212,7 +212,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
       private _renderer: Renderer2,
       @Optional() private _dateAdapter: DateAdapter<D>,
       @Optional() @Inject(MD_DATE_FORMATS) private _dateFormats: MdDateFormats,
-      @Optional() private _mdInputContainer: MdInputContainer) {
+      @Optional() private _mdInputContainer: MdFormField) {
     if (!this._dateAdapter) {
       throw createMissingDateImplError('DateAdapter');
     }