feat(input): create md-input-container to eventually replace md-input (…

…#2052)

* created md-input-wrapper and removed useless inputs

* added demo

* remove ControlValueAccessor and start migrating input

* finished converting most input attrs

* typescript fixed, css needs work

* removed duplicate directives.

* fix scss

* set up demo area

* Fix disabled state

* fixed some small bugs and converted more of demo

* demo card #1 converted

* finished converting demo

* subscribe to ngModel changes

* updated other demos to use new input

* undo accidental changes to other inputs

* working through tests

* fixed all tests

* fixed lint issues

* fix firefox type=date issue

* try removing ie11 checks, see if we need them

* added md-input back to baseline demo

* started md-input directive

* more refactoring

* fixed demos, tests still broken

* remove useless imports

* fix tests

* fix tests for ff & ie

* move input feature detection into service

* addressed some comments

* s/input-wrapper/input-container

* s/NgModel/NgControl

* remove FeatureDetector

* s/MdPlatformModule/PlatformModule

* Remove some problematic privates and add mat- versions of everything

* fix import

src/demo-app/baseline/baseline-demo.html

@@ -10,7 +10,11 @@
     | Text 3 |
     <md-radio-button value="option_3">Radio 3</md-radio-button>
     | Text 4 |
-    <md-input>Label</md-input>
+    <md-input placeholder="Input"></md-input>
+    | Text 5 |
+    <md-input-container>
+      <input md-input placeholder="Input">
+    </md-input-container>
     | Text After
   </md-card-content>
 </md-card>
@@ -28,7 +32,11 @@ <h1>
       | Text 3 |
       <md-radio-button value="option_3">Radio 3</md-radio-button>
       | Text 4 |
-      <md-input>Label</md-input>
+      <md-input placeholder="Input"></md-input>
+      | Text 5 |
+      <md-input-container>
+        <input md-input placeholder="Input">
+      </md-input-container>
       | Text After
     </h1>
   </md-card-content>

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

@@ -37,6 +37,7 @@ import {TabsDemo, SunnyTabContent, RainyTabContent, FoggyTabContent} from './tab
 import {ProjectionDemo, ProjectionTestComponent} from './projection/projection-demo';
 import {PlatformDemo} from './platform/platform-demo';
 import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
+import {InputContainerDemo} from './input/input-container-demo';
 
 @NgModule({
   imports: [
@@ -62,6 +63,7 @@ import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
     Home,
     IconDemo,
     InputDemo,
+    InputContainerDemo,
     JazzDialog,
     ListDemo,
     LiveAnnouncerDemo,

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

@@ -31,6 +31,7 @@ export class DemoApp {
     {name: 'Grid List', route: 'grid-list'},
     {name: 'Icon', route: 'icon'},
     {name: 'Input', route: 'input'},
+    {name: 'Input Container', route: 'input-container'},
     {name: 'List', route: 'list'},
     {name: 'Menu', route: 'menu'},
     {name: 'Live Announcer', route: 'live-announcer'},

src/demo-app/demo-app/routes.ts

@@ -32,6 +32,7 @@ import {ProjectionDemo} from '../projection/projection-demo';
 import {TABS_DEMO_ROUTES} from '../tabs/routes';
 import {PlatformDemo} from '../platform/platform-demo';
 import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
+import {InputContainerDemo} from '../input/input-container-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -51,6 +52,7 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: 'overlay', component: OverlayDemo},
   {path: 'checkbox', component: CheckboxDemo},
   {path: 'input', component: InputDemo},
+  {path: 'input-container', component: InputContainerDemo},
   {path: 'toolbar', component: ToolbarDemo},
   {path: 'icon', component: IconDemo},
   {path: 'list', component: ListDemo},

src/demo-app/input/input-container-demo.html

@@ -0,0 +1,265 @@
+<md-card class="demo-card demo-basic">
+  <md-toolbar color="primary">Basic</md-toolbar>
+  <md-card-content>
+    <form>
+      <md-input-container class="demo-full-width">
+        <input md-input placeholder="Company (disabled)" disabled value="Google">
+      </md-input-container>
+
+      <table style="width: 100%" cellspacing="0"><tr>
+        <td>
+          <md-input-container style="width: 100%">
+            <input md-input placeholder="First name">
+          </md-input-container>
+        </td>
+        <td>
+          <md-input-container style="width: 100%">
+            <input md-input placeholder="Long Last Name That Will Be Truncated">
+          </md-input-container>
+        </td>
+      </tr></table>
+      <p>
+        <md-input-container class="demo-full-width">
+          <textarea md-input placeholder="Address">1600 Amphitheatre Pkway</textarea>
+        </md-input-container>
+        <md-input-container class="demo-full-width">
+          <textarea md-input placeholder="Address 2"></textarea>
+        </md-input-container>
+      </p>
+      <table style="width: 100%" cellspacing="0"><tr>
+        <td>
+          <md-input-container class="demo-full-width">
+            <input md-input placeholder="City" value="Mountain View">
+          </md-input-container>
+        </td>
+        <td>
+          <md-input-container class="demo-full-width">
+            <input md-input placeholder="State" maxLength="2" value="CA">
+          </md-input-container>
+        </td>
+        <td>
+          <md-input-container class="demo-full-width">
+            <input md-input #postalCode maxLength="5" placeholder="Postal Code" value="94043">
+            <md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
+          </md-input-container>
+        </td>
+      </tr></table>
+    </form>
+  </md-card-content>
+</md-card>
+
+<md-card class="demo-card demo-basic">
+  <md-toolbar color="primary">Prefix + Suffix</md-toolbar>
+  <md-card-content>
+    <md-input-container align="end">
+      <input md-input placeholder="amount">
+      <span md-prefix>$&nbsp;</span>
+      <span md-suffix>.00</span>
+    </md-input-container>
+  </md-card-content>
+</md-card>
+
+<md-card class="demo-card demo-basic">
+  <md-toolbar color="primary">Divider Colors</md-toolbar>
+  <md-card-content>
+    <h4>Input</h4>
+    <md-input-container dividerColor="primary" >
+      <input md-input placeholder="Default Color" value="example">
+    </md-input-container>
+    <md-input-container dividerColor="accent">
+      <input md-input placeholder="Accent Color" value="example">
+    </md-input-container>
+    <md-input-container dividerColor="warn">
+      <input md-input placeholder="Warn Color" value="example">
+    </md-input-container>
+
+    <h4>Textarea</h4>
+    <md-input-container dividerColor="primary">
+      <textarea md-input placeholder="Default Color">example</textarea>
+    </md-input-container>
+    <md-input-container dividerColor="accent">
+      <textarea md-input placeholder="Accent Color">example</textarea>
+    </md-input-container>
+    <md-input-container dividerColor="warn">
+      <textarea md-input placeholder="Warn Color">example</textarea>
+    </md-input-container>
+  </md-card-content>
+</md-card>
+
+<md-card class="demo-card demo-basic">
+  <md-toolbar color="primary">Hints</md-toolbar>
+  <md-card-content>
+    <h4>Input</h4>
+    <p>
+      <md-input-container class="demo-full-width">
+        <input md-input
+               #characterCountInputHintExample
+               placeholder="Character count (100 max)"
+               maxLength="100"
+               value="Hello world. How are you?">
+        <md-hint align="end">{{characterCountInputHintExample.value.length}} / 100</md-hint>
+      </md-input-container>
+    </p>
+
+    <h4>Textarea</h4>
+    <p>
+      <md-input-container class="demo-full-width">
+        <textarea md-input
+                  #characterCountTextareaHintExample
+                  placeholder="Character count (100 max)"
+                  maxLength="100">Hello world. How are you?</textarea>
+        <md-hint align="end">{{characterCountTextareaHintExample.value.length}} / 100</md-hint>
+      </md-input-container>
+    </p>
+  </md-card-content>
+</md-card>
+
+<md-card class="demo-card demo-basic">
+  <md-toolbar color="primary">
+    Hello&nbsp;
+    <md-input-container dividerColor="accent">
+      <input md-input [(ngModel)]="name" type="text" placeholder="First name">
+    </md-input-container>,
+    how are you?
+  </md-toolbar>
+  <md-card-content>
+    <p>
+      <md-input-container>
+        <input md-input disabled placeholder="Disabled field" value="Value">
+      </md-input-container>
+      <md-input-container>
+        <input md-input required placeholder="Required field">
+      </md-input-container>
+    </p>
+    <p>
+      <md-input-container style="width: 100%">
+        <input md-input placeholder="100% width placeholder">
+      </md-input-container>
+    </p>
+    <p>
+      <md-input-container style="width: 100%">
+        <input md-input #input placeholder="Character count (100 max)" maxLength="100">
+        <md-hint align="end">{{input.value.length}} / 100</md-hint>
+      </md-input-container>
+    </p>
+    <p>
+      <md-input-container hintLabel="Hint label" style="width: 100%">
+        <input md-input placeholder="Show Hint Label">
+      </md-input-container>
+    </p>
+
+    <p>
+      <md-input-container>
+        <input md-input>
+        <md-placeholder>
+          I <md-icon class="demo-icons">favorite</md-icon> <b>bold</b> placeholder
+        </md-placeholder>
+        <md-hint>
+          I also <md-icon class="demo-icons">home</md-icon> <i>italic</i> hint labels
+        </md-hint>
+      </md-input-container>
+    </p>
+    <p>
+      <md-input-container hintLabel="Hint label" style="width: 100%">
+        <input md-input #hintLabelWithCharCount placeholder="Show Hint Label With Character Count">
+        <md-hint align="end">{{hintLabelWithCharCount.value.length}}</md-hint>
+      </md-input-container>
+    </p>
+    <p>
+      <md-checkbox [(ngModel)]="dividerColor">Check to change the divider color:</md-checkbox>
+      <md-input-container [dividerColor]="dividerColor ? 'primary' : 'accent'">
+        <input md-input [placeholder]="dividerColor ? 'Primary color' : 'Accent color'">
+      </md-input-container>
+    </p>
+    <p>
+      <md-checkbox [(ngModel)]="requiredField"> Check to make required:</md-checkbox>
+      <md-input-container>
+        <input md-input
+               [required]="requiredField"
+               [placeholder]="requiredField ? 'Required field' : 'Not required field'">
+      </md-input-container>
+    </p>
+    <p>
+      <md-checkbox [(ngModel)]="floatingLabel"> Check to make floating label:</md-checkbox>
+      <md-input-container [floatingPlaceholder]="floatingLabel">
+        <input md-input [placeholder]="floatingLabel ? 'Floating label' : 'Not floating label'">
+      </md-input-container>
+    </p>
+
+    <p>
+      <md-input-container>
+        <input md-input placeholder="Prefixed" value="example">
+        <div md-prefix>Example:&nbsp;</div>
+      </md-input-container>
+      <md-input-container align="end">
+        <input md-input placeholder="Suffixed" value="123">
+        <span md-suffix>.00 €</span>
+      </md-input-container>
+      <br/>
+      Both:
+      <md-input-container align="end">
+        <input md-input #email placeholder="Email Address" value="angular-core">
+        <span md-prefix>
+          <md-icon [class.primary]="email.focused" class="demo-icons demo-transform">email</md-icon>
+          &nbsp;
+        </span>
+        <span md-suffix class="demo-transform" [class.primary]="email.focused">
+          &nbsp;@gmail.com
+        </span>
+      </md-input-container>
+    </p>
+
+    <p>
+      Empty: <md-input-container><input md-input></md-input-container>
+      <label>Label: <md-input-container><input md-input></md-input-container></label>
+    </p>
+  </md-card-content>
+</md-card>
+
+<md-card class="demo-card demo-basic">
+  <md-toolbar color="primary">Number Inputs</md-toolbar>
+  <md-card-content>
+    <table width="100%">
+      <thead>
+      <td>Table</td>
+      <td colspan="3">
+        <button (click)="addABunch(5)">Add 5</button>
+        <button (click)="addABunch(10)">Add 10</button>
+        <button (click)="addABunch(100)">Add 100</button>
+        <button (click)="addABunch(1000)">Add 1000</button>
+      </td>
+      </thead>
+      <tr *ngFor="let item of items; let i = index">
+        <td>{{i+1}}</td>
+        <td>
+          <md-input-container>
+            <input md-input
+                   type="number"
+                   placeholder="value"
+                   aria-label="hello"
+                   [(ngModel)]="items[i].value">
+          </md-input-container>
+        </td>
+        <td>
+          <input type="number" [(ngModel)]="items[i].value">
+        </td>
+        <td>{{item.value}}</td>
+      </tr>
+    </table>
+  </md-card-content>
+</md-card>
+
+
+<md-card class="demo-card demo-basic">
+  <md-toolbar color="primary">Textarea Autosize</md-toolbar>
+  <md-card-content>
+    <textarea md-autosize class="demo-textarea"></textarea>
+    <div>
+      <md-input-container>
+        <textarea md-input
+                  md-autosize
+                  placeholder="Autosized textarea"></textarea>
+      </md-input-container>
+    </div>
+  </md-card-content>
+</md-card>

src/demo-app/input/input-container-demo.ts

@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+
+
+let max = 5;
+
+@Component({
+  moduleId: module.id,
+  selector: 'input-container-demo',
+  templateUrl: 'input-container-demo.html',
+  styleUrls: ['input-demo.css'],
+})
+export class InputContainerDemo {
+  dividerColor: boolean;
+  requiredField: boolean;
+  floatingLabel: boolean;
+  name: string;
+  items: any[] = [
+    { value: 10 },
+    { value: 20 },
+    { value: 30 },
+    { value: 40 },
+    { value: 50 },
+  ];
+  rows = 8;
+
+  addABunch(n: number) {
+    for (let x = 0; x < n; x++) {
+      this.items.push({ value: ++max });
+    }
+  }
+}

src/demo-app/platform/platform-demo.html

@@ -0,0 +1,12 @@
+<p>Is Android: {{ platform.ANDROID }}</p>
+<p>Is iOS: {{ platform.IOS }}</p>
+<p>Is Firefox: {{ platform.FIREFOX }}</p>
+<p>Is Blink: {{ platform.BLINK }}</p>
+<p>Is Webkit: {{ platform.WEBKIT }}</p>
+<p>Is Trident: {{ platform.TRIDENT }}</p>
+<p>Is Edge: {{ platform.EDGE }}</p>
+
+<p>
+  Supported input types:
+  <span *ngFor="let type of supportedInputTypes">{{ type }}, </span>
+</p>