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 @@
       <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 @@
       </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 @@
   <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 @@
     </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 @@
     <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 @@
 <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 @@
     <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 @@
     <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 @@
     <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 @@
     <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 @@
 
   <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?');
   }
 }

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

@@ -188,7 +188,7 @@ describe('MdInputContainer', function () {
         angularWrappedErrorMessage(new MdInputContainerPlaceholderConflictError()));
   });
 
-  it('validates that md-input child is present', () => {
+  it('validates that mdInput child is present', () => {
     let fixture = TestBed.createComponent(MdInputContainerMissingMdInputTestController);
 
     expect(() => fixture.detectChanges()).toThrowError(
@@ -298,20 +298,20 @@ describe('MdInputContainer', function () {
 @Component({
   template: `
     <md-input-container>
-      <input md-input id="test-id" placeholder="test">
+      <input mdInput id="test-id" placeholder="test">
     </md-input-container>`
 })
 class MdInputContainerWithId {}
 
 @Component({
-  template: `<md-input-container><input md-input [disabled]="disabled"></md-input-container>`
+  template: `<md-input-container><input mdInput [disabled]="disabled"></md-input-container>`
 })
 class MdInputContainerWithDisabled {
   disabled: boolean;
 }
 
 @Component({
-  template: `<md-input-container><input md-input required placeholder="hello"></md-input-container>`
+  template: `<md-input-container><input mdInput required placeholder="hello"></md-input-container>`
 })
 class MdInputContainerPlaceholderRequiredTestComponent {}
 
@@ -327,7 +327,7 @@ class MdInputContainerPlaceholderElementTestComponent {
 }
 
 @Component({
-  template: `<md-input-container><input md-input [placeholder]="placeholder"></md-input-container>`
+  template: `<md-input-container><input mdInput [placeholder]="placeholder"></md-input-container>`
 })
 class MdInputContainerPlaceholderAttrTestComponent {
   placeholder: string = '';
@@ -348,14 +348,14 @@ class MdInputContainerHintLabelTestController {
 }
 
 @Component({
-  template: `<md-input-container><input md-input type="file"></md-input-container>`
+  template: `<md-input-container><input mdInput type="file"></md-input-container>`
 })
 class MdInputContainerInvalidTypeTestController {}
 
 @Component({
   template: `
     <md-input-container>
-      <input md-input placeholder="Hello">
+      <input mdInput placeholder="Hello">
       <md-placeholder>World</md-placeholder>
     </md-input-container>`
 })
@@ -381,7 +381,7 @@ class MdInputContainerInvalidHint2TestController {}
 class MdInputContainerInvalidHintTestController {}
 
 @Component({
-  template: `<md-input-container><input md-input [(ngModel)]="model"></md-input-container>`
+  template: `<md-input-container><input mdInput [(ngModel)]="model"></md-input-container>`
 })
 class MdInputContainerBaseTestController {
   model: any = '';
@@ -390,7 +390,7 @@ class MdInputContainerBaseTestController {
 @Component({
   template: `
     <md-input-container>
-      <input md-input type="date" placeholder="Placeholder">
+      <input mdInput type="date" placeholder="Placeholder">
     </md-input-container>`
 })
 class MdInputContainerDateTestController {}
@@ -398,7 +398,7 @@ class MdInputContainerDateTestController {}
 @Component({
   template: `
     <md-input-container>
-      <input md-input type="text" placeholder="Placeholder">
+      <input mdInput type="text" placeholder="Placeholder">
     </md-input-container>`
 })
 class MdInputContainerTextTestController {}
@@ -406,7 +406,7 @@ class MdInputContainerTextTestController {}
 @Component({
   template: `
     <md-input-container>
-      <input md-input type="password" placeholder="Placeholder">
+      <input mdInput type="password" placeholder="Placeholder">
     </md-input-container>`
 })
 class MdInputContainerPasswordTestController {}
@@ -414,7 +414,7 @@ class MdInputContainerPasswordTestController {}
 @Component({
   template: `
     <md-input-container>
-      <input md-input type="number" placeholder="Placeholder">
+      <input mdInput type="number" placeholder="Placeholder">
     </md-input-container>`
 })
 class MdInputContainerNumberTestController {}
@@ -422,7 +422,7 @@ class MdInputContainerNumberTestController {}
 @Component({
   template: `
     <md-input-container>
-      <input md-input type="number" placeholder="Placeholder" [(ngModel)]="value">
+      <input mdInput type="number" placeholder="Placeholder" [(ngModel)]="value">
     </md-input-container>`
 })
 class MdInputContainerZeroTestController {
@@ -432,7 +432,7 @@ class MdInputContainerZeroTestController {
 @Component({
   template: `
     <md-input-container>
-      <textarea md-input [rows]="rows" [cols]="cols" [wrap]="wrap" placeholder="Snacks"></textarea>
+      <textarea mdInput [rows]="rows" [cols]="cols" [wrap]="wrap" placeholder="Snacks"></textarea>
     </md-input-container>`
 })
 class MdTextareaWithBindings {

src/lib/input/input-container.ts

@@ -68,7 +68,11 @@ export class MdHint {
 
 /** The input directive, used to mark the input that `MdInputContainer` is wrapping. */
 @Directive({
-  selector: 'input[md-input], textarea[md-input], input[mat-input], textarea[mat-input]',
+  // TODO: remove the md-input selector after next version
+  selector: `
+    input[mdInput], textarea[mdInput], input[matInput], textarea[matInput],
+    input[md-input], textarea[md-input], input[mat-input], textarea[mat-input]
+  `,
   host: {
     'class': 'md-input-element',
     '[id]': 'id',