separate md-form-field into separate directory

Author: mmalerba

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/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,8 @@ 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 {MdFormField, MdInput} from '../input/input-container';
+import {MdFormField} from '../form-field/index';
+import {MdInput} from '../input/input';
 import {Subscription} from 'rxjs/Subscription';
 import {merge} from 'rxjs/observable/merge';
 import {fromEvent} from 'rxjs/observable/fromEvent';

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 {MdFormField} 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,

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/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 {MdFormField} 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';

src/lib/datepicker/datepicker.spec.ts

@@ -16,6 +16,7 @@ import {
   createKeyboardEvent,
   dispatchEvent,
 } from '@angular/cdk/testing';
+import {MdFormFieldModule} from "../form-field/index";
 
 describe('MdDatepicker', () => {
   afterEach(inject([OverlayContainer], (container: OverlayContainer) => {
@@ -28,6 +29,7 @@ describe('MdDatepicker', () => {
         imports: [
           FormsModule,
           MdDatepickerModule,
+          MdFormFieldModule,
           MdInputModule,
           MdNativeDateModule,
           NoopAnimationsModule,
@@ -817,6 +819,7 @@ describe('MdDatepicker', () => {
         imports: [
           FormsModule,
           MdDatepickerModule,
+          MdFormFieldModule,
           MdInputModule,
           NoopAnimationsModule,
           ReactiveFormsModule,
@@ -840,7 +843,13 @@ describe('MdDatepicker', () => {
 
     beforeEach(async(() => {
       TestBed.configureTestingModule({
-        imports: [MdDatepickerModule, MdInputModule, MdNativeDateModule, NoopAnimationsModule],
+        imports: [
+          MdDatepickerModule,
+          MdFormFieldModule,
+          MdInputModule,
+          MdNativeDateModule,
+          NoopAnimationsModule
+        ],
         declarations: [StandardDatepicker],
       }).compileComponents();
 

src/lib/form-field/_form-field-theme.scss

@@ -0,0 +1,217 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/style/form-common';
+@import '../core/typography/typography-utils';
+
+
+@mixin mat-form-field-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  // Placeholder colors. Required is used for the `*` star shown in the placeholder.
+  $form-field-placeholder-color: mat-color($foreground, secondary-text);
+  $form-field-floating-placeholder-color: mat-color($primary);
+  $form-field-required-placeholder-color: mat-color($accent);
+
+  // Underline colors.
+  $form-field-underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
+  $form-field-underline-color-accent: mat-color($accent);
+  $form-field-underline-color-warn: mat-color($warn);
+  $form-field-underline-focused-color: mat-color($primary);
+
+  .mat-form-field-placeholder {
+    color: $form-field-placeholder-color;
+  }
+
+  .mat-hint {
+    color: mat-color($foreground, secondary-text);
+  }
+
+  .mat-focused .mat-form-field-placeholder {
+    color: $form-field-floating-placeholder-color;
+
+    &.mat-accent {
+      color: $form-field-underline-color-accent;
+    }
+
+    &.mat-warn {
+      color: $form-field-underline-color-warn;
+    }
+  }
+
+  .mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder,
+  .mat-focused .mat-form-field-placeholder.mat-form-field-float {
+    .mat-form-field-required-marker {
+      color: $form-field-required-placeholder-color;
+    }
+  }
+
+  .mat-form-field-underline {
+    background-color: $form-field-underline-color;
+
+    &.mat-disabled {
+      @include mat-control-disabled-underline($form-field-underline-color);
+    }
+  }
+
+  .mat-form-field-ripple {
+    background-color: $form-field-underline-focused-color;
+
+    &.mat-accent {
+      background-color: $form-field-underline-color-accent;
+    }
+
+    &.mat-warn {
+      background-color: $form-field-underline-color-warn;
+    }
+  }
+
+  // Styling for the error state of the form field. Note that while the same can be
+  // achieved with the ng-* classes, we use this approach in order to ensure that the same
+  // logic is used to style the error state and to show the error messages.
+  .mat-form-field-invalid {
+    .mat-form-field-placeholder {
+      color: $form-field-underline-color-warn;
+
+      &.mat-accent,
+      &.mat-form-field-float .mat-form-field-required-marker {
+        color: $form-field-underline-color-warn;
+      }
+    }
+
+    .mat-form-field-ripple {
+      background-color: $form-field-underline-color-warn;
+    }
+  }
+
+  .mat-error {
+    color: $form-field-underline-color-warn;
+  }
+}
+
+// Applies a floating placeholder above the form field control itself.
+@mixin _mat-form-field-placeholder-floating($font-scale, $infix-padding, $infix-margin-top) {
+  // We use perspective to fix the text blurriness as described here:
+  // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
+  // This results in a small jitter after the label floats on Firefox, which the
+  // translateZ fixes.
+  transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale) perspective(100px)
+             translateZ(0.001px);
+  // The tricks above used to smooth out the animation on chrome and firefox actually make things
+  // worse on IE, so we don't include them in the IE version.
+  -ms-transform: translateY(-$infix-margin-top - $infix-padding)
+  scale($font-scale);
+
+  width: 100% / $font-scale;
+}
+
+@mixin mat-form-field-typography($config) {
+  // The unit-less line-height from the font config.
+  $line-height: mat-line-height($config, input);
+
+  // The amount to scale the font for the floating label and subscript.
+  $subscript-font-scale: 0.75;
+  // The amount to scale the font for the prefix and suffix icons.
+  $prefix-suffix-icon-font-scale: 1.5;
+
+  // The amount of space between the top of the line and the top of the actual text
+  // (as a fraction of the font-size).
+  $line-spacing: ($line-height - 1) / 2;
+  // The padding on the infix. Mocks show half of the text size, but seem to measure from the edge
+  // of the text itself, not the edge of the line; therefore we subtract off the line spacing.
+  $infix-padding: 0.5em - $line-spacing;
+  // The margin applied to the form-field-infix to reserve space for the floating label.
+  $infix-margin-top: 1em * $line-height * $subscript-font-scale;
+  // Font size to use for the label and subscript text.
+  $subscript-font-size: $subscript-font-scale * 100%;
+  // Font size to use for the for the prefix and suffix icons.
+  $prefix-suffix-icon-font-size: $prefix-suffix-icon-font-scale * 100%;
+  // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
+  // Mocks show half of the text size, but this margin is applied to an element with the subscript
+  // text font size, so we need to divide by the scale factor to make it half of the original text
+  // size. We again need to subtract off the line spacing since the mocks measure to the edge of the
+  // text, not the  edge of the line.
+  $subscript-margin-top: 0.5em / $subscript-font-scale - ($line-spacing * 2);
+  // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
+  // absolutely positioned. This is a combination of the subscript's margin and line-height, but we
+  // need to multiply by the subscript font scale factor since the wrapper has a larger font size.
+  $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
+
+  .mat-form-field {
+    font-family: mat-font-family($config);
+    font-size: inherit;
+    font-weight: mat-font-weight($config, input);
+    line-height: mat-line-height($config, input);
+  }
+
+  .mat-form-field-wrapper {
+    padding-bottom: $wrapper-padding-bottom;
+  }
+
+  .mat-form-field-prefix,
+  .mat-form-field-suffix {
+    // Allow icons in a prefix or suffix to adapt to the correct size.
+    .mat-icon {
+      font-size: $prefix-suffix-icon-font-size;
+      line-height: $line-height;
+    }
+
+    // Allow icon buttons in a prefix or suffix to adapt to the correct size.
+    .mat-icon-button {
+      height: $prefix-suffix-icon-font-scale * 1em;
+      width: $prefix-suffix-icon-font-scale * 1em;
+
+      .mat-icon {
+        height: $line-height * 1em;
+        line-height: $line-height;
+      }
+    }
+  }
+
+  .mat-form-field-infix {
+    padding: $infix-padding 0;
+    // Throws off the baseline if we do it as a real margin, so we do it as a border instead.
+    border-top: $infix-margin-top solid transparent;
+  }
+
+  .mat-form-field-autofill-float:-webkit-autofill +
+      .mat-form-field-placeholder-wrapper .mat-form-field-float {
+    @include _mat-form-field-placeholder-floating(
+        $subscript-font-scale, $infix-padding, $infix-margin-top);
+  }
+
+  .mat-form-field-placeholder-wrapper {
+    top: -$infix-margin-top;
+    padding-top: $infix-margin-top;
+  }
+
+  .mat-form-field-placeholder {
+    top: $infix-margin-top + $infix-padding;
+
+    // Show the placeholder above the control when it's not empty, or focused.
+    &.mat-form-field-float:not(.mat-form-field-empty),
+    .mat-focused &.mat-form-field-float {
+      @include _mat-form-field-placeholder-floating($subscript-font-scale,
+          $infix-padding, $infix-margin-top);
+    }
+  }
+
+  .mat-form-field-underline {
+    // We want the underline to start at the end of the content box, not the padding box,
+    // so we move it up by the padding amount.
+    bottom: $wrapper-padding-bottom;
+  }
+
+  .mat-form-field-subscript-wrapper {
+    font-size: $subscript-font-size;
+    margin-top: $subscript-margin-top;
+
+    // We want the subscript to start at the end of the content box, not the padding box,
+    // so we move it up by the padding amount (adjusted for the smaller font size);
+    top: calc(100% - #{$wrapper-padding-bottom / $subscript-font-scale});
+  }
+}