chore(input): fix selector on mdInput (#2514)

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

@@ -13,7 +13,7 @@
     <md-input placeholder="Input"></md-input>
     | Text 5 |
     <md-input-container>
-      <input md-input placeholder="Input">
+      <input mdInput placeholder="Input">
     </md-input-container>
     | Text After
   </md-card-content>
@@ -35,7 +35,7 @@ <h1>
       <md-input placeholder="Input"></md-input>
       | Text 5 |
       <md-input-container>
-        <input md-input placeholder="Input">
+        <input mdInput placeholder="Input">
       </md-input-container>
       | Text After
     </h1>

src/demo-app/chips/chips-demo.html

@@ -44,7 +44,7 @@ <h4>Input Container</h4>
       </md-chip-list>
 
       <md-input-container>
-        <input md-input #input (keyup.enter)="add(input)" placeholder="New Contributor..."/>
+        <input mdInput #input (keyup.enter)="add(input)" placeholder="New Contributor..."/>
       </md-input-container>
 
       <h4>Stacked Chips</h4>

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

@@ -3,43 +3,43 @@
   <md-card-content>
     <form>
       <md-input-container class="demo-full-width">
-        <input md-input placeholder="Company (disabled)" disabled value="Google">
+        <input mdInput 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">
+            <input mdInput 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">
+            <input mdInput 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>
+          <textarea mdInput placeholder="Address">1600 Amphitheatre Pkway</textarea>
         </md-input-container>
         <md-input-container class="demo-full-width">
-          <textarea md-input placeholder="Address 2"></textarea>
+          <textarea mdInput 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">
+            <input mdInput 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">
+            <input mdInput 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">
+            <input mdInput #postalCode maxLength="5" placeholder="Postal Code" value="94043">
             <md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
           </md-input-container>
         </td>
@@ -52,7 +52,7 @@
   <md-toolbar color="primary">Prefix + Suffix</md-toolbar>
   <md-card-content>
     <md-input-container align="end">
-      <input md-input placeholder="amount">
+      <input mdInput placeholder="amount">
       <span md-prefix>$&nbsp;</span>
       <span md-suffix>.00</span>
     </md-input-container>
@@ -64,24 +64,24 @@
   <md-card-content>
     <h4>Input</h4>
     <md-input-container dividerColor="primary" >
-      <input md-input placeholder="Default Color" value="example">
+      <input mdInput placeholder="Default Color" value="example">
     </md-input-container>
     <md-input-container dividerColor="accent">
-      <input md-input placeholder="Accent Color" value="example">
+      <input mdInput placeholder="Accent Color" value="example">
     </md-input-container>
     <md-input-container dividerColor="warn">
-      <input md-input placeholder="Warn Color" value="example">
+      <input mdInput placeholder="Warn Color" value="example">
     </md-input-container>
 
     <h4>Textarea</h4>
     <md-input-container dividerColor="primary">
-      <textarea md-input placeholder="Default Color">example</textarea>
+      <textarea mdInput placeholder="Default Color">example</textarea>
     </md-input-container>
     <md-input-container dividerColor="accent">
-      <textarea md-input placeholder="Accent Color">example</textarea>
+      <textarea mdInput placeholder="Accent Color">example</textarea>
     </md-input-container>
     <md-input-container dividerColor="warn">
-      <textarea md-input placeholder="Warn Color">example</textarea>
+      <textarea mdInput placeholder="Warn Color">example</textarea>
     </md-input-container>
   </md-card-content>
 </md-card>
@@ -118,33 +118,33 @@ <h4>Textarea</h4>
   <md-toolbar color="primary">
     Hello&nbsp;
     <md-input-container dividerColor="accent">
-      <input md-input [(ngModel)]="name" type="text" placeholder="First name">
+      <input mdInput [(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">
+        <input mdInput disabled placeholder="Disabled field" value="Value">
       </md-input-container>
       <md-input-container>
-        <input md-input required placeholder="Required field">
+        <input mdInput required placeholder="Required field">
       </md-input-container>
     </p>
     <p>
       <md-input-container style="width: 100%">
-        <input md-input placeholder="100% width placeholder">
+        <input mdInput 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">
+        <input mdInput #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">
+        <input mdInput placeholder="Show Hint Label">
       </md-input-container>
     </p>
 
@@ -161,14 +161,14 @@ <h4>Textarea</h4>
     </p>
     <p>
       <md-input-container hintLabel="Hint label" style="width: 100%">
-        <input md-input #hintLabelWithCharCount placeholder="Show Hint Label With Character Count">
+        <input mdInput #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'">
+        <input mdInput [placeholder]="dividerColor ? 'Primary color' : 'Accent color'">
       </md-input-container>
     </p>
     <p>
@@ -182,23 +182,23 @@ <h4>Textarea</h4>
     <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'">
+        <input mdInput [placeholder]="floatingLabel ? 'Floating label' : 'Not floating label'">
       </md-input-container>
     </p>
 
     <p>
       <md-input-container>
-        <input md-input placeholder="Prefixed" value="example">
+        <input mdInput 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">
+        <input mdInput 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">
+        <input mdInput #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;
@@ -252,8 +252,8 @@ <h4>Textarea</h4>
 <md-card class="demo-card demo-basic">
   <md-toolbar color="primary">Forms</md-toolbar>
   <md-card-content>
-    <md-input-container><input md-input placeholder="reactive" [formControl]="formControl"></md-input-container>
-    <md-input-container><input md-input placeholder="template" [(ngModel)]="model" required></md-input-container>
+    <md-input-container><input mdInput placeholder="reactive" [formControl]="formControl"></md-input-container>
+    <md-input-container><input mdInput placeholder="template" [(ngModel)]="model" required></md-input-container>
   </md-card-content>
 </md-card>
 
@@ -263,7 +263,7 @@ <h4>Textarea</h4>
     <textarea md-autosize class="demo-textarea"></textarea>
     <div>
       <md-input-container>
-        <textarea md-input
+        <textarea mdInput
                   md-autosize
                   placeholder="Autosized textarea"></textarea>
       </md-input-container>

src/demo-app/ripple/ripple-demo.html

@@ -28,13 +28,13 @@
   </section>
   <section>
     <md-input-container>
-      <input md-input placeholder="Max radius" aria-label="radius" [(ngModel)]="maxRadius">
+      <input mdInput placeholder="Max radius" aria-label="radius" [(ngModel)]="maxRadius">
     </md-input-container>
     <md-input-container>
-      <input md-input placeholder="Ripple color" aria-label="color" [(ngModel)]="rippleColor">
+      <input mdInput placeholder="Ripple color" aria-label="color" [(ngModel)]="rippleColor">
     </md-input-container>
     <md-input-container>
-      <input md-input
+      <input mdInput
              placeholder="Ripple background"
              aria-label="background"
              [(ngModel)]="rippleBackgroundColor">

src/demo-app/snack-bar/snack-bar-demo.html

@@ -1,7 +1,7 @@
 <h1>SnackBar demo</h1>
 <div>
   <div>
-    Message: <md-input-container><input md-input type="text" [(ngModel)]="message"></md-input-container>
+    Message: <md-input-container><input mdInput type="text" [(ngModel)]="message"></md-input-container>
   </div>
   <div>
     <md-checkbox [(ngModel)]="action">

src/demo-app/tabs/tabs-demo.html

@@ -126,7 +126,7 @@ <h1>Tab Group Demo - Dynamic Height</h1>
     <br>
     <br>
     <md-input-container>
-      <input md-input placeholder="Tab Label" [(ngModel)]="tab.label">
+      <input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
     </md-input-container>
   </md-tab>
 </md-tab-group>
@@ -170,7 +170,7 @@ <h1>Tab Group Demo - Fixed Height</h1>
     <br>
     <br>
     <md-input-container>
-      <input md-input placeholder="Tab Label" [(ngModel)]="tab.label">
+      <input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
     </md-input-container>
   </md-tab>
 </md-tab-group>
@@ -195,7 +195,7 @@ <h1>Async Tabs</h1>
     <br>
     <br>
     <md-input-container>
-      <input md-input placeholder="Tab Label" [(ngModel)]="tab.label">
+      <input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
     </md-input-container>
   </md-tab>
 </md-tab-group>

src/demo-app/tooltip/tooltip-demo.html

@@ -26,7 +26,7 @@ <h1>Tooltip Demo</h1>
 
   <p>
     <strong>Message: </strong>
-    <md-input-container><input md-input type="text" [(ngModel)]="message"></md-input-container>
+    <md-input-container><input mdInput type="text" [(ngModel)]="message"></md-input-container>
   </p>
 
   <p>

src/lib/input/README.md

@@ -6,19 +6,19 @@ used instead.**
 Inputs are the basic input component of Material 2. The spec can be found
 [here](https://www.google.com/design/spec/components/text-fields.html). `md-input-container` acts as
 a wrapper for native `input` and `textarea` elements. The native element wrapped by the
-`md-input-container` must be marked with the `md-input` directive.
+`md-input-container` must be marked with the `mdInput` directive.
 
 Simple `input` example:
 ```html
 <md-input-container>
-  <input md-input>
+  <input mdInput>
 </md-input-container>
 ```
 
 Simple `textarea` example:
 ```html
 <md-input-container>
-  <textarea md-input></textarea>
+  <textarea mdInput></textarea>
 </md-input-container>
 ```
 
@@ -73,7 +73,7 @@ To add a prefix, use the `md-prefix` attribute on the element. Similarly, to add
 
 ```html
 <md-input-container align="end">
-  <input md-input placeholder="amount">
+  <input mdInput placeholder="amount">
   <span md-prefix>$&nbsp;</span>
   <span md-suffix>.00</span>
 </md-input-container>
@@ -94,7 +94,7 @@ Specifying a side twice will result in an exception during initialization.
 For example, a simple character counter can be made like the following:
 ```html
 <md-input-container>
-  <input md-input
+  <input mdInput
          placeholder="Character count (100 max)"
          maxlength="100"
          value="Hello world. How are you?"
@@ -113,13 +113,13 @@ theme primary color. Alternatively, you can specify `accent` or `warn`.
 
 ```html
 <md-input-container>
-  <input md-input placeholder="Default color" value="example">
+  <input mdInput placeholder="Default color" value="example">
 </md-input-container>
 <md-input-container dividerColor="accent">
-  <input md-input placeholder="Accent color" value="example">
+  <input mdInput placeholder="Accent color" value="example">
 </md-input-container>
 <md-input-container dividerColor="warn">
-  <input md-input placeholder="Warn color" value="example">
+  <input mdInput placeholder="Warn color" value="example">
 </md-input-container>
 ```
 
@@ -133,36 +133,36 @@ You can make a full form using inputs, and they will support autofill natively.
 ```html
 <form>
   <md-input-container style="width: 100%">
-    <input md-input placeholder="Company (disabled)" disabled value="Google">
+    <input mdInput 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">
+      <input mdInput 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">
+      <input mdInput placeholder="Long Last Name That Will Be Truncated">
     </md-input-container></td>
   </tr></table>
 
   <p>
     <md-input-container width="100%">
-      <textarea md-input placeholder="Address" value="1600 Amphitheatre Pkway"></textarea>
+      <textarea mdInput placeholder="Address" value="1600 Amphitheatre Pkway"></textarea>
     </md-input-container>
     <md-input-container width="100%">
-      <textarea md-input placeholder="Address 2"></textarea>
+      <textarea mdInput placeholder="Address 2"></textarea>
     </md-input-container>
   </p>
 
   <table style="width: 100%" cellspacing="0"><tr>
     <td><md-input-container width="100%">
-      <input md-input placeholder="City">
+      <input mdInput placeholder="City">
     </md-input-container></td>
     <td><md-input-container width="100%">
-      <input md-input placeholder="State">
+      <input mdInput placeholder="State">
     </md-input-container></td>
     <td><md-input-container width="100%">
-      <input md-input #postalCode maxlength="5" placeholder="Postal Code" value="94043">
+      <input mdInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
       <md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
     </md-input-container></td>
   </tr></table>

src/lib/input/input-container-errors.ts

@@ -24,7 +24,7 @@ export class MdInputContainerDuplicatedHintError extends MdError {
 /** @docs-private */
 export class MdInputContainerMissingMdInputError extends MdError {
   constructor() {
-    super('md-input-container must contain an md-input directive. Did you forget to add md-input ' +
+    super('md-input-container must contain an mdInput directive. Did you forget to add mdInput ' +
           'to the native input or textarea element?');
   }
 }