From 93b0bc9da74723ba65fb6250df432dad39f1a5a6 Mon Sep 17 00:00:00 2001
From: Kara <kara@users.noreply.github.com>
Date: Wed, 4 Jan 2017 11:31:29 -0800
Subject: [PATCH] chore(input): fix selector on mdInput (#2514)

---
 src/demo-app/baseline/baseline-demo.html     |  4 +-
 src/demo-app/chips/chips-demo.html           |  2 +-
 src/demo-app/input/input-container-demo.html | 60 ++++++++++----------
 src/demo-app/ripple/ripple-demo.html         |  6 +-
 src/demo-app/snack-bar/snack-bar-demo.html   |  2 +-
 src/demo-app/tabs/tabs-demo.html             |  6 +-
 src/demo-app/tooltip/tooltip-demo.html       |  2 +-
 src/lib/input/README.md                      | 32 +++++------
 src/lib/input/input-container-errors.ts      |  2 +-
 src/lib/input/input-container.spec.ts        | 28 ++++-----
 src/lib/input/input-container.ts             |  6 +-
 11 files changed, 77 insertions(+), 73 deletions(-)

diff --git a/src/demo-app/baseline/baseline-demo.html b/src/demo-app/baseline/baseline-demo.html
index e28173d99f94..3b2e6a47aaf5 100644
--- a/src/demo-app/baseline/baseline-demo.html
+++ b/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>
diff --git a/src/demo-app/chips/chips-demo.html b/src/demo-app/chips/chips-demo.html
index 086903316aca..f6932b772fc9 100644
--- a/src/demo-app/chips/chips-demo.html
+++ b/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>
diff --git a/src/demo-app/input/input-container-demo.html b/src/demo-app/input/input-container-demo.html
index 617a000e5c78..381403f7c67d 100644
--- a/src/demo-app/input/input-container-demo.html
+++ b/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>
diff --git a/src/demo-app/ripple/ripple-demo.html b/src/demo-app/ripple/ripple-demo.html
index dc156317bb0b..5c9cf2bd8004 100644
--- a/src/demo-app/ripple/ripple-demo.html
+++ b/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">
diff --git a/src/demo-app/snack-bar/snack-bar-demo.html b/src/demo-app/snack-bar/snack-bar-demo.html
index bbfefec80e4c..de6ed632bfdb 100644
--- a/src/demo-app/snack-bar/snack-bar-demo.html
+++ b/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">
diff --git a/src/demo-app/tabs/tabs-demo.html b/src/demo-app/tabs/tabs-demo.html
index 26f9455ab1a1..d2e8c16dea1f 100644
--- a/src/demo-app/tabs/tabs-demo.html
+++ b/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>
diff --git a/src/demo-app/tooltip/tooltip-demo.html b/src/demo-app/tooltip/tooltip-demo.html
index 5266f2eaeb3c..2951e4421f3e 100644
--- a/src/demo-app/tooltip/tooltip-demo.html
+++ b/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>
diff --git a/src/lib/input/README.md b/src/lib/input/README.md
index 5d0787efe35f..95a5be865ee3 100644
--- a/src/lib/input/README.md
+++ b/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>
diff --git a/src/lib/input/input-container-errors.ts b/src/lib/input/input-container-errors.ts
index 08dc690ddadf..90a9337b2a65 100644
--- a/src/lib/input/input-container-errors.ts
+++ b/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?');
   }
 }
diff --git a/src/lib/input/input-container.spec.ts b/src/lib/input/input-container.spec.ts
index 335acfaf3c40..f94227041189 100644
--- a/src/lib/input/input-container.spec.ts
+++ b/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 {
diff --git a/src/lib/input/input-container.ts b/src/lib/input/input-container.ts
index 37d18f2ff0db..58b80dc72846 100644
--- a/src/lib/input/input-container.ts
+++ b/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',