fix(input): remove md-input and md-textarea in favor of md-input-container (#2788)

* remove md-input and md-textarea

* fix demo

* clean up filenames

Author: mmalerba

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

@@ -10,8 +10,6 @@
     | Text 3 |
     <md-radio-button value="option_3">Radio 3</md-radio-button>
     | Text 4 |
-    <md-input placeholder="Input"></md-input>
-    | Text 5 |
     <md-input-container>
       <input mdInput placeholder="Input">
     </md-input-container>
@@ -32,8 +30,6 @@ <h1>
       | Text 3 |
       <md-radio-button value="option_3">Radio 3</md-radio-button>
       | Text 4 |
-      <md-input placeholder="Input"></md-input>
-      | Text 5 |
       <md-input-container>
         <input mdInput placeholder="Input">
       </md-input-container>

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

@@ -1,5 +1,4 @@
-import {Component} from '@angular/core';
-import {MdInput} from '@angular/material';
+import {Component, ElementRef} from '@angular/core';
 
 export interface Person {
   name: string;
@@ -40,10 +39,10 @@ export class ChipsDemo {
     alert(message);
   }
 
-  add(input: MdInput): void {
-    if (input.value && input.value.trim() != '') {
-      this.people.push({ name: input.value.trim() });
-      input.value = '';
+  add(input: ElementRef): void {
+    if (input.nativeElement.value && input.nativeElement.value.trim() != '') {
+      this.people.push({ name: input.nativeElement.value.trim() });
+      input.nativeElement.value = '';
     }
   }
 

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

@@ -12,7 +12,6 @@ import {JazzDialog, ContentElementDialog, DialogDemo} from './dialog/dialog-demo
 import {RippleDemo} from './ripple/ripple-demo';
 import {IconDemo} from './icon/icon-demo';
 import {GesturesDemo} from './gestures/gestures-demo';
-import {InputDemo} from './input/input-demo';
 import {CardDemo} from './card/card-demo';
 import {ChipsDemo} from './chips/chips-demo';
 import {RadioDemo} from './radio/radio-demo';
@@ -63,7 +62,6 @@ import {InputContainerDemo} from './input/input-container-demo';
     GridListDemo,
     Home,
     IconDemo,
-    InputDemo,
     InputContainerDemo,
     JazzDialog,
     ContentElementDialog,

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

@@ -10,7 +10,6 @@ import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
 import {ListDemo} from '../list/list-demo';
 import {IconDemo} from '../icon/icon-demo';
 import {ToolbarDemo} from '../toolbar/toolbar-demo';
-import {InputDemo} from '../input/input-demo';
 import {CheckboxDemo} from '../checkbox/checkbox-demo';
 import {OverlayDemo} from '../overlay/overlay-demo';
 import {PortalDemo} from '../portal/portal-demo';
@@ -51,7 +50,6 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: 'projection', component: ProjectionDemo},
   {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},

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

@@ -8,20 +8,32 @@ <h1>Dialog demo</h1>
     <h2>Dialog dimensions</h2>
 
     <p>
-      <md-input [(ngModel)]="config.width" placeholder="Width"></md-input>
-      <md-input [(ngModel)]="config.height" placeholder="Height"></md-input>
+      <md-input-container>
+        <input mdInput [(ngModel)]="config.width" placeholder="Width">
+      </md-input-container>
+      <md-input-container>
+        <input mdInput [(ngModel)]="config.height" placeholder="Height">
+      </md-input-container>
     </p>
 
     <h2>Dialog position</h2>
 
     <p>
-      <md-input [(ngModel)]="config.position.top" (change)="config.position.bottom = ''" placeholder="Top"></md-input>
-      <md-input [(ngModel)]="config.position.bottom" (change)="config.position.top = ''" placeholder="Bottom"></md-input>
+      <md-input-container>
+        <input mdInput [(ngModel)]="config.position.top" (change)="config.position.bottom = ''" placeholder="Top">
+      </md-input-container>
+      <md-input-container>
+        <input mdInput [(ngModel)]="config.position.bottom" (change)="config.position.top = ''" placeholder="Bottom">
+      </md-input-container>
     </p>
 
     <p>
-      <md-input [(ngModel)]="config.position.left" (change)="config.position.right = ''" placeholder="Left"></md-input>
-      <md-input [(ngModel)]="config.position.right" (change)="config.position.left = ''" placeholder="Right"></md-input>
+      <md-input-container>
+        <input mdInput [(ngModel)]="config.position.left" (change)="config.position.right = ''" placeholder="Left">
+      </md-input-container>
+      <md-input-container>
+        <input mdInput [(ngModel)]="config.position.right" (change)="config.position.left = ''" placeholder="Right">
+      </md-input-container>
     </p>
 
     <h2>Other options</h2>

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

@@ -92,7 +92,7 @@ <h4>Textarea</h4>
     <h4>Input</h4>
     <p>
       <md-input-container class="demo-full-width">
-        <input md-input
+        <input mdInput
                #characterCountInputHintExample
                placeholder="Character count (100 max)"
                maxLength="100"
@@ -104,7 +104,7 @@ <h4>Input</h4>
     <h4>Textarea</h4>
     <p>
       <md-input-container class="demo-full-width">
-        <textarea md-input
+        <textarea mdInput
                   #characterCountTextareaHintExample
                   placeholder="Character count (100 max)"
                   maxLength="100">Hello world. How are you?</textarea>
@@ -150,7 +150,7 @@ <h4>Textarea</h4>
 
     <p>
       <md-input-container>
-        <input md-input>
+        <input mdInput>
         <md-placeholder>
           I <md-icon class="demo-icons">favorite</md-icon> <b>bold</b> placeholder
         </md-placeholder>
@@ -174,7 +174,7 @@ <h4>Textarea</h4>
     <p>
       <md-checkbox [(ngModel)]="requiredField"> Check to make required:</md-checkbox>
       <md-input-container>
-        <input md-input
+        <input mdInput
                [required]="requiredField"
                [placeholder]="requiredField ? 'Required field' : 'Not required field'">
       </md-input-container>
@@ -210,8 +210,8 @@ <h4>Textarea</h4>
     </p>
 
     <p>
-      Empty: <md-input-container><input md-input></md-input-container>
-      <label>Label: <md-input-container><input md-input></md-input-container></label>
+      Empty: <md-input-container><input mdInput></md-input-container>
+      <label>Label: <md-input-container><input mdInput></md-input-container></label>
     </p>
   </md-card-content>
 </md-card>
@@ -233,7 +233,7 @@ <h4>Textarea</h4>
         <td>{{i+1}}</td>
         <td>
           <md-input-container>
-            <input md-input
+            <input mdInput
                    type="number"
                    placeholder="value"
                    aria-label="hello"

src/demo-app/input/input-demo.scss renamed to src/demo-app/input/input-container-demo.scss

@@ -8,7 +8,7 @@ let max = 5;
   moduleId: module.id,
   selector: 'input-container-demo',
   templateUrl: 'input-container-demo.html',
-  styleUrls: ['input-demo.css'],
+  styleUrls: ['input-container-demo.css'],
 })
 export class InputContainerDemo {
   dividerColor: boolean;