From e84365c93d76b3cbe94039d1719620aee606dcc3 Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Fri, 21 Oct 2016 23:49:46 +0200
Subject: [PATCH 01/15] add textarea

---
 src/demo-app/input/input-demo.html | 36 ++++++++++++++++++--
 src/lib/input/README.md            | 21 +++++++++---
 src/lib/input/input.html           | 33 ++++++++++++++++++
 src/lib/input/input.scss           |  6 +++-
 src/lib/input/input.ts             | 54 ++++++++++++++++++++++++++++--
 5 files changed, 139 insertions(+), 11 deletions(-)

diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
index bd79e8ccf017..4184cf12f50e 100644
--- a/src/demo-app/input/input-demo.html
+++ b/src/demo-app/input/input-demo.html
@@ -10,8 +10,8 @@
         <td><md-input placeholder="Long Last Name That Will Be Truncated" style="width: 100%"></md-input></td>
       </tr></table>
       <p>
-        <md-input class="demo-full-width" placeholder="Address" value="1600 Amphitheatre Pkway"></md-input>
-        <md-input class="demo-full-width" placeholder="Address 2"></md-input>
+        <md-textarea class="demo-full-width" placeholder="Address" value="1600 Amphitheatre Pkway"></md-textarea>
+        <md-textarea class="demo-full-width" placeholder="Address 2"></md-textarea>
       </p>
       <table style="width: 100%" cellspacing="0"><tr>
         <td><md-input class="demo-full-width" placeholder="City" value="Mountain View"></md-input></td>
@@ -39,15 +39,23 @@
 <md-card class="demo-card demo-basic">
   <md-toolbar color="primary">Divider Colors</md-toolbar>
   <md-card-content>
+    <h4>Input</h4>
     <md-input dividerColor="primary" placeholder="Default Color" value="example"></md-input>
     <md-input dividerColor="accent" placeholder="Accent Color" value="example"></md-input>
     <md-input dividerColor="warn" placeholder="Warn Color" value="example"></md-input>
+
+    <h4>Textarea</h4>
+    <md-textarea dividerColor="primary" placeholder="Default Color" value="example"></md-textarea>
+    <md-textarea dividerColor="accent" placeholder="Accent Color" value="example"></md-textarea>
+    <md-textarea dividerColor="warn" placeholder="Warn Color" value="example"></md-textarea>
+
   </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 placeholder="Character count (100 max)" maxLength="100" class="demo-full-width"
                 value="Hello world. How are you?"
@@ -55,9 +63,33 @@
         <md-hint align="end">{{characterCountHintExample.characterCount}} / 100</md-hint>
       </md-input>
     </p>
+
+    <h4>Textarea</h4>
+    <p>
+      <md-textarea placeholder="Character count (100 max)" maxLength="100" class="demo-full-width"
+                value="Hello world. How are you?"
+                #characterCountHintExample>
+        <md-hint align="end">{{characterCountHintExample.characterCount}} / 100</md-hint>
+      </md-textarea>
+    </p>
   </md-card-content>
 </md-card>
 
+<md-card class="demo-card demo-basic">
+  <md-toolbar color="primary">Expanding textarea</md-toolbar>
+  <md-card-content>
+    <p>
+      <md-textarea
+        placeholder="Textarea with autosize"
+        class="demo-full-width"
+        autosize
+        value="Hello world. How are you?">
+      </md-textarea>
+    </p>
+  </md-card-content>
+</md-card>
+
+
 <md-card class="demo-card">
   <md-card-title>
     Hello <md-input [(ngModel)]="name" type="text" placeholder="First name"></md-input>,
diff --git a/src/lib/input/README.md b/src/lib/input/README.md
index 81eaa2dbf22c..3b8bee2f2928 100644
--- a/src/lib/input/README.md
+++ b/src/lib/input/README.md
@@ -1,11 +1,11 @@
-# mdInput
+# mdInput / mdTextarea
 
 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).
 
 
 
 ## Notes
-* The `<md-input>` component fully support two-way binding of `ngModel`, as if it was a normal `<input>`.
+* The `<md-input>` / `<md-textara>` component fully support two-way binding of `ngModel`, as if it was a normal `<input>` and `<textarea>`.
 
 
 
@@ -18,7 +18,7 @@ The valid `type` attribute values are any supported by your browser, with the ex
 
 ## Placeholder
 
-A placeholder is an indicative text displayed in the input zone when the input does not contain text. When text is present, the indicative text will float above this input zone. 
+A placeholder is an indicative text displayed in the input zone when the input does not contain text. When text is present, the indicative text will float above this input zone.
 
 You can set the `floatingPlaceholder` attribute to `false` to hide the indicative text instead when text is present in the input.
 
@@ -106,6 +106,17 @@ export class MyComponent implements OnInit {
 }
 ```
 
+## Textareas
+
+Supports same attributes as MdInput, except `type`, additionally it support `autosize` attribute
+which enables auto expanding functionality.
+
+```html
+<md-textarea autosize placeholder="Textarea with autosize"></md-textarea>
+```
+
+### Example
+
 ## Full Forms
 
 You can make a full form using inputs, and it will support autofill natively.
@@ -125,8 +136,8 @@ You can make a full form using inputs, and it will support autofill natively.
         <td><md-input placeholder="Long Last Name That Will Be Truncated" style="width: 100%"></md-input></td>
       </tr></table>
       <p>
-        <md-input class="demo-full-width" placeholder="Address" value="1600 Amphitheatre Pkway"></md-input>
-        <md-input class="demo-full-width" placeholder="Address 2"></md-input>
+        <md-textarea class="demo-full-width" placeholder="Address" value="1600 Amphitheatre Pkway"></md-textarea>
+        <md-textarea class="demo-full-width" placeholder="Address 2"></md-textarea>
       </p>
       <table style="width: 100%" cellspacing="0"><tr>
         <td><md-input class="demo-full-width" placeholder="City"></md-input></td>
diff --git a/src/lib/input/input.html b/src/lib/input/input.html
index bb11bc1ea131..0242e5bf3449 100644
--- a/src/lib/input/input.html
+++ b/src/lib/input/input.html
@@ -4,6 +4,7 @@
 
     <div class="md-input-infix">
       <input #input
+             *ngIf="elementType === 'input'"
              class="md-input-element"
              [class.md-end]="align == 'end'"
              [attr.aria-label]="ariaLabel"
@@ -34,6 +35,38 @@
              [(ngModel)]="value"
              (change)="_handleChange($event)">
 
+      <textarea
+             #input
+             *ngIf="elementType === 'textarea'"
+             class="md-input-element  md-input-element--textarea"
+             [class.md-end]="align == 'end'"
+             [attr.aria-label]="ariaLabel"
+             [attr.aria-labelledby]="ariaLabelledBy"
+             [attr.aria-disabled]="ariaDisabled"
+             [attr.aria-required]="ariaRequired"
+             [attr.aria-invalid]="ariaInvalid"
+             [attr.autocomplete]="autocomplete"
+             [attr.autocorrect]="autocorrect"
+             [attr.autocapitalize]="autocapitalize"
+             [autofocus]="autofocus"
+             [disabled]="disabled"
+             [id]="inputId"
+             [mdAutosize]="autosize"
+             [attr.max]="max"
+             [attr.maxlength]="maxlength"
+             [attr.min]="min"
+             [attr.minlength]="minlength"
+             [readonly]="readonly"
+             [required]="required"
+             [spellcheck]="spellcheck"
+             [attr.tabindex]="tabindex"
+             [attr.name]="name"
+             (focus)="_handleFocus($event)"
+             (blur)="_handleBlur($event)"
+             [(ngModel)]="value"
+             (change)="_handleChange($event)"></textarea>
+
+
       <label class="md-input-placeholder"
              [attr.for]="inputId"
              [class.md-empty]="empty"
diff --git a/src/lib/input/input.scss b/src/lib/input/input.scss
index 19bdefd6d3c2..482b2d066b37 100644
--- a/src/lib/input/input.scss
+++ b/src/lib/input/input.scss
@@ -15,7 +15,7 @@ $md-input-underline-disabled-background-image:
   width: 100% / $md-input-floating-placeholder-scale-factor;
 }
 
-md-input {
+md-input, md-textarea {
   display: inline-block;
   position: relative;
   font-family: $md-font-family;
@@ -95,6 +95,10 @@ md-input {
   }
 }
 
+.md-input-element--textarea {
+  min-height: 60px;
+}
+
 // The placeholder label. This is invisible unless it is. The logic to show it is
 // basically `empty || (float && (!empty || focused))`. Float is dependent on the
 // `floatingPlaceholder` input.
diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index ee569594a2f9..82d33df269fe 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -5,7 +5,9 @@ import {
   Input,
   Directive,
   AfterContentInit,
+  OnInit,
   ContentChild,
+  HostListener,
   SimpleChange,
   ContentChildren,
   ViewChild,
@@ -26,6 +28,9 @@ import {Observable} from 'rxjs/Observable';
 
 const noop = () => {};
 
+const MD_INPUT_SELECTOR = 'md-input';
+const MD_TEXTAREA_SELECTOR = 'md-textarea';
+
 export const MD_INPUT_CONTROL_VALUE_ACCESSOR: any = {
   provide: NG_VALUE_ACCESSOR,
   useExisting: forwardRef(() => MdInput),
@@ -86,6 +91,38 @@ export class MdHint {
   @Input() align: 'start' | 'end' = 'start';
 }
 
+/**
+ * Enables auto expanding behaviour for the textarea
+ */
+@Directive({
+  selector: 'textarea[mdAutosize]'
+})
+export class MdAutosize implements OnInit {
+  @HostListener('input', ['$event.target'])
+  public onChange() {
+    if (this._isActive) {
+      this._adjust();
+    }
+  }
+
+  @Input('mdAutosize')
+  private _isActive: boolean;
+
+  constructor(private _elRef: ElementRef) {}
+
+  ngOnInit() {
+    if (this._isActive) {
+      this._adjust();
+    }
+  }
+
+  private _adjust() {
+    this._elRef.nativeElement.style.overflow = 'hidden';
+    this._elRef.nativeElement.style.height = 'auto';
+    this._elRef.nativeElement.style.height = `${this._elRef.nativeElement.scrollHeight}px`;
+  }
+}
+
 
 /**
  * Component that represents a text input. It encapsulates the <input> HTMLElement and
@@ -93,7 +130,7 @@ export class MdHint {
  */
 @Component({
   moduleId: module.id,
-  selector: 'md-input',
+  selector: `${MD_INPUT_SELECTOR}, ${MD_TEXTAREA_SELECTOR}`,
   templateUrl: 'input.html',
   styleUrls: ['input.css'],
   providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR],
@@ -229,6 +266,10 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
 
   @ViewChild('input') _inputElement: ElementRef;
 
+  public elementType: 'input' | 'textarea' = undefined;
+
+  constructor(private _elRef: ElementRef) { }
+
   /** Set focus on input */
   focus() {
     this._inputElement.nativeElement.focus();
@@ -282,6 +323,13 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
   ngAfterContentInit() {
     this._validateConstraints();
 
+    // Set the element type depending on normalized selector used(md-input / md-textarea)
+    if (this._elRef.nativeElement.tagName.toLowerCase() === MD_INPUT_SELECTOR.toLowerCase()) {
+      this.elementType = 'input';
+    } else {
+      this.elementType = 'textarea';
+    }
+
     // Trigger validation when the hint children change.
     this._hintChildren.changes.subscribe(() => {
       this._validateConstraints();
@@ -346,9 +394,9 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
 
 
 @NgModule({
-  declarations: [MdPlaceholder, MdInput, MdHint],
+  declarations: [MdPlaceholder, MdInput, MdHint, MdAutosize],
   imports: [CommonModule, FormsModule],
-  exports: [MdPlaceholder, MdInput, MdHint],
+  exports: [MdPlaceholder, MdInput, MdHint, MdAutosize],
 })
 export class MdInputModule {
   static forRoot(): ModuleWithProviders {

From 42b7592db2c4cd4823b55efd6ed82e91da232ab3 Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Sat, 22 Oct 2016 09:09:39 +0200
Subject: [PATCH 02/15] adress comments

---
 src/lib/input/input.html |  8 ++++----
 src/lib/input/input.scss |  2 +-
 src/lib/input/input.ts   | 13 ++++++-------
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/lib/input/input.html b/src/lib/input/input.html
index 0242e5bf3449..934bea3d665a 100644
--- a/src/lib/input/input.html
+++ b/src/lib/input/input.html
@@ -38,7 +38,7 @@
       <textarea
              #input
              *ngIf="elementType === 'textarea'"
-             class="md-input-element  md-input-element--textarea"
+             class="md-input-element  md-input-element-textarea"
              [class.md-end]="align == 'end'"
              [attr.aria-label]="ariaLabel"
              [attr.aria-labelledby]="ariaLabelledBy"
@@ -46,15 +46,15 @@
              [attr.aria-required]="ariaRequired"
              [attr.aria-invalid]="ariaInvalid"
              [attr.autocomplete]="autocomplete"
-             [attr.autocorrect]="autocorrect"
              [attr.autocapitalize]="autocapitalize"
+             [attr.cols]="cols"
+             [attr.rows]="rows"
+             [attr.wrap]="wrap"
              [autofocus]="autofocus"
              [disabled]="disabled"
              [id]="inputId"
              [mdAutosize]="autosize"
-             [attr.max]="max"
              [attr.maxlength]="maxlength"
-             [attr.min]="min"
              [attr.minlength]="minlength"
              [readonly]="readonly"
              [required]="required"
diff --git a/src/lib/input/input.scss b/src/lib/input/input.scss
index 482b2d066b37..c3210596e9e2 100644
--- a/src/lib/input/input.scss
+++ b/src/lib/input/input.scss
@@ -95,7 +95,7 @@ md-input, md-textarea {
   }
 }
 
-.md-input-element--textarea {
+.md-input-element-textarea {
   min-height: 60px;
 }
 
diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index 82d33df269fe..a79733f97da2 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -28,8 +28,6 @@ import {Observable} from 'rxjs/Observable';
 
 const noop = () => {};
 
-const MD_INPUT_SELECTOR = 'md-input';
-const MD_TEXTAREA_SELECTOR = 'md-textarea';
 
 export const MD_INPUT_CONTROL_VALUE_ACCESSOR: any = {
   provide: NG_VALUE_ACCESSOR,
@@ -93,13 +91,14 @@ export class MdHint {
 
 /**
  * Enables auto expanding behaviour for the textarea
+ * based on: https://github.com/stevepapa/angular2-autosize
  */
 @Directive({
   selector: 'textarea[mdAutosize]'
 })
 export class MdAutosize implements OnInit {
-  @HostListener('input', ['$event.target'])
-  public onChange() {
+  @HostListener('input')
+  private _onChange() {
     if (this._isActive) {
       this._adjust();
     }
@@ -112,12 +111,12 @@ export class MdAutosize implements OnInit {
 
   ngOnInit() {
     if (this._isActive) {
+      this._elRef.nativeElement.style.overflow = 'hidden';
       this._adjust();
     }
   }
 
   private _adjust() {
-    this._elRef.nativeElement.style.overflow = 'hidden';
     this._elRef.nativeElement.style.height = 'auto';
     this._elRef.nativeElement.style.height = `${this._elRef.nativeElement.scrollHeight}px`;
   }
@@ -130,7 +129,7 @@ export class MdAutosize implements OnInit {
  */
 @Component({
   moduleId: module.id,
-  selector: `${MD_INPUT_SELECTOR}, ${MD_TEXTAREA_SELECTOR}`,
+  selector: 'md-input, md-textarea',
   templateUrl: 'input.html',
   styleUrls: ['input.css'],
   providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR],
@@ -324,7 +323,7 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
     this._validateConstraints();
 
     // Set the element type depending on normalized selector used(md-input / md-textarea)
-    if (this._elRef.nativeElement.tagName.toLowerCase() === MD_INPUT_SELECTOR.toLowerCase()) {
+    if (this._elRef.nativeElement.tagName.toLowerCase() === 'md-input') {
       this.elementType = 'input';
     } else {
       this.elementType = 'textarea';

From f53e654089ed52e0bbc88c5c3b91652c54eee7a3 Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Sat, 22 Oct 2016 11:18:23 +0200
Subject: [PATCH 03/15] make autosize work along rows

---
 src/demo-app/input/input-demo.html | 15 ++++-
 src/lib/input/input.ts             | 91 +++++++++++++++++++++++++++++-
 2 files changed, 101 insertions(+), 5 deletions(-)

diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
index 4184cf12f50e..a163c085fe63 100644
--- a/src/demo-app/input/input-demo.html
+++ b/src/demo-app/input/input-demo.html
@@ -78,14 +78,25 @@ <h4>Textarea</h4>
 <md-card class="demo-card demo-basic">
   <md-toolbar color="primary">Expanding textarea</md-toolbar>
   <md-card-content>
-    <p>
+    <div>
       <md-textarea
         placeholder="Textarea with autosize"
         class="demo-full-width"
         autosize
         value="Hello world. How are you?">
       </md-textarea>
-    </p>
+    </div>
+
+    <h4>With `rows` explicitly set</h4>
+    <div>
+      <md-textarea
+        placeholder="Textarea with autosize"
+        class="demo-full-width"
+        autosize
+        rows="8"
+        value="Hello world. How are you?">
+      </md-textarea>
+    </div>
   </md-card-content>
 </md-card>
 
diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index a79733f97da2..b3d35ffb65c2 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -5,6 +5,7 @@ import {
   Input,
   Directive,
   AfterContentInit,
+  Attribute,
   OnInit,
   ContentChild,
   HostListener,
@@ -97,32 +98,116 @@ export class MdHint {
   selector: 'textarea[mdAutosize]'
 })
 export class MdAutosize implements OnInit {
+  // public because of AOT
   @HostListener('input')
-  private _onChange() {
+  public _onChange() {
     if (this._isActive) {
       this._adjust();
     }
   }
 
+  // public because of AOT
   @Input('mdAutosize')
-  private _isActive: boolean;
+  public _isActive: boolean;
+
+  // public because of AOT
+  // TODO: change to a setter, to recalculate on change
+  @Input('attr.rows')
+  public _rows: string;
+
+  private _height: number;
+  private _lineHeight: number;
 
   constructor(private _elRef: ElementRef) {}
 
   ngOnInit() {
     if (this._isActive) {
       this._elRef.nativeElement.style.overflow = 'hidden';
+
+      // check is rows is explicitly set, otherwise we don't need to
+      // care about it(and getting the actual line-height) at all
+      if (this._rows) {
+        this._lineHeight = this._getLineHeight();
+        this._elRef.nativeElement.style.minHeight = `${+this._rows * this._lineHeight}px`;
+      }
+
       this._adjust();
     }
   }
 
   private _adjust() {
+    // reset height(and rows if it was set by the user)
+    // to the default values to properly calculate new height
     this._elRef.nativeElement.style.height = 'auto';
-    this._elRef.nativeElement.style.height = `${this._elRef.nativeElement.scrollHeight}px`;
+
+    // only need to do this if user explicitly set rows
+    if (this._rows) {
+      this._elRef.nativeElement.rows = this._rows;
+    }
+
+    this._height = +this._elRef.nativeElement.scrollHeight;
+
+    // only need to do this if user explicitly set rows
+    if (this._rows) {
+      this._elRef.nativeElement.rows = this._getCalculatedRows();
+    }
+
+    this._elRef.nativeElement.style.height = `${this._height}px`;
+  }
+
+  private _getCalculatedRows() {
+    return Math.round(this._height / this._lineHeight);
+  }
+
+  private _getLineHeight(): number {
+    const el: HTMLElement = this._elRef.nativeElement;
+
+    // get the actual computed styles for the element
+    const computedStyles = window.getComputedStyle(el);
+
+    // if line height is explicitly set(to a pixel value), use that
+    if (computedStyles.lineHeight && computedStyles.lineHeight.toLowerCase().indexOf('px') >= 0) {
+      // return stripped of the "px" and as a number
+      return +computedStyles.lineHeight.replace('px', '');
+    }
+
+    // create temporary element
+    const tempEl = document.createElement(el.nodeName);
+
+    // reset styling, visually hiden the element
+    // and set its font styles to match the ones of our textarea
+    tempEl.setAttribute('rows', '1');
+    tempEl.setAttribute(
+      'style',
+      `
+        margin: 0px;
+        padding: 0px;
+        visibility: hidden;
+        opacity: 0;
+        font-family: ${computedStyles.fontFamily};
+        font-size: ${computedStyles.fontSize};
+      `
+    );
+
+    // fill in one row
+    tempEl.innerHTML = '-';
+
+    // append to parent element to correctly inherit same values
+    // as the actual textarea
+    el.parentNode.appendChild(tempEl);
+
+    // get the actual line height
+    const lineHeight = tempEl.clientHeight;
+
+    // cleanup
+    tempEl.parentNode.removeChild(tempEl);
+
+    return lineHeight;
   }
 }
 
 
+
 /**
  * Component that represents a text input. It encapsulates the <input> HTMLElement and
  * improve on its behaviour, along with styling it according to the Material Design.

From 17c27612d9d8c2b48c70e20d3dd36f17ce6581b7 Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Sat, 22 Oct 2016 12:02:03 +0200
Subject: [PATCH 04/15] change innerHTML to value

---
 src/lib/input/input.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index b3d35ffb65c2..fe9780b9c082 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -160,7 +160,7 @@ export class MdAutosize implements OnInit {
   }
 
   private _getLineHeight(): number {
-    const el: HTMLElement = this._elRef.nativeElement;
+    const el: HTMLTextAreaElement = this._elRef.nativeElement;
 
     // get the actual computed styles for the element
     const computedStyles = window.getComputedStyle(el);
@@ -172,7 +172,7 @@ export class MdAutosize implements OnInit {
     }
 
     // create temporary element
-    const tempEl = document.createElement(el.nodeName);
+    const tempEl = <HTMLTextAreaElement>document.createElement(el.nodeName);
 
     // reset styling, visually hiden the element
     // and set its font styles to match the ones of our textarea
@@ -190,7 +190,7 @@ export class MdAutosize implements OnInit {
     );
 
     // fill in one row
-    tempEl.innerHTML = '-';
+    tempEl.value = '-';
 
     // append to parent element to correctly inherit same values
     // as the actual textarea

From ddda4ed157c46ce09be28cbe5fb97cdcba766858 Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Sat, 22 Oct 2016 12:05:55 +0200
Subject: [PATCH 05/15] replace replace with parseFloat

---
 src/lib/input/input.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index fe9780b9c082..f4f6da1f232b 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -168,7 +168,7 @@ export class MdAutosize implements OnInit {
     // if line height is explicitly set(to a pixel value), use that
     if (computedStyles.lineHeight && computedStyles.lineHeight.toLowerCase().indexOf('px') >= 0) {
       // return stripped of the "px" and as a number
-      return +computedStyles.lineHeight.replace('px', '');
+      return parseFloat(computedStyles.lineHeight);
     }
 
     // create temporary element

From 41cfdd5c9e971539a41399af962329ddb34f2c78 Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Sat, 22 Oct 2016 12:21:42 +0200
Subject: [PATCH 06/15] fix "supports a name attribute test"

---
 src/lib/input/input.spec.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts
index 6f53fd3797ff..6f45fff3f24c 100644
--- a/src/lib/input/input.spec.ts
+++ b/src/lib/input/input.spec.ts
@@ -611,9 +611,11 @@ describe('MdInput', function () {
 
   it('supports a name attribute', () => {
     let fixture = TestBed.createComponent(MdInputWithNameTestController);
+
+    fixture.detectChanges();
+
     const inputElement: HTMLInputElement = fixture.debugElement.query(By.css('input'))
         .nativeElement;
-    fixture.detectChanges();
 
     expect(inputElement.name).toBe('some-name');
   });

From 6f2354cb55a4fad67ba4e8175ddf890598c34481 Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Sat, 22 Oct 2016 12:29:35 +0200
Subject: [PATCH 07/15] remove unused import

---
 src/lib/input/input.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index f4f6da1f232b..7570eb0ad867 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -5,7 +5,6 @@ import {
   Input,
   Directive,
   AfterContentInit,
-  Attribute,
   OnInit,
   ContentChild,
   HostListener,

From ba71282aa103bb5492bcf139dc902bfe7c96caf8 Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Sat, 22 Oct 2016 14:48:02 +0200
Subject: [PATCH 08/15] change rows in textarea demo to by dynamic

---
 src/demo-app/input/input-demo.html | 2 +-
 src/demo-app/input/input-demo.ts   | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
index a163c085fe63..45604ad7f46b 100644
--- a/src/demo-app/input/input-demo.html
+++ b/src/demo-app/input/input-demo.html
@@ -93,7 +93,7 @@ <h4>With `rows` explicitly set</h4>
         placeholder="Textarea with autosize"
         class="demo-full-width"
         autosize
-        rows="8"
+        [rows]="rows"
         value="Hello world. How are you?">
       </md-textarea>
     </div>
diff --git a/src/demo-app/input/input-demo.ts b/src/demo-app/input/input-demo.ts
index 36891a409f01..49dcfe0f56a8 100644
--- a/src/demo-app/input/input-demo.ts
+++ b/src/demo-app/input/input-demo.ts
@@ -21,6 +21,7 @@ export class InputDemo {
     { value: 40 },
     { value: 50 },
   ];
+  rows = 8;
 
   addABunch(n: number) {
     for (let x = 0; x < n; x++) {

From 262785cf2a508bb6e610c28632655dec9123fb42 Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Thu, 27 Oct 2016 00:35:25 +0200
Subject: [PATCH 09/15] rebase + remove autosize

---
 src/lib/input/input.html |   1 -
 src/lib/input/input.ts   | 122 +--------------------------------------
 2 files changed, 2 insertions(+), 121 deletions(-)

diff --git a/src/lib/input/input.html b/src/lib/input/input.html
index 934bea3d665a..11e55e4478d2 100644
--- a/src/lib/input/input.html
+++ b/src/lib/input/input.html
@@ -53,7 +53,6 @@
              [autofocus]="autofocus"
              [disabled]="disabled"
              [id]="inputId"
-             [mdAutosize]="autosize"
              [attr.maxlength]="maxlength"
              [attr.minlength]="minlength"
              [readonly]="readonly"
diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index 7570eb0ad867..3165c1e3cc8b 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -89,124 +89,6 @@ export class MdHint {
   @Input() align: 'start' | 'end' = 'start';
 }
 
-/**
- * Enables auto expanding behaviour for the textarea
- * based on: https://github.com/stevepapa/angular2-autosize
- */
-@Directive({
-  selector: 'textarea[mdAutosize]'
-})
-export class MdAutosize implements OnInit {
-  // public because of AOT
-  @HostListener('input')
-  public _onChange() {
-    if (this._isActive) {
-      this._adjust();
-    }
-  }
-
-  // public because of AOT
-  @Input('mdAutosize')
-  public _isActive: boolean;
-
-  // public because of AOT
-  // TODO: change to a setter, to recalculate on change
-  @Input('attr.rows')
-  public _rows: string;
-
-  private _height: number;
-  private _lineHeight: number;
-
-  constructor(private _elRef: ElementRef) {}
-
-  ngOnInit() {
-    if (this._isActive) {
-      this._elRef.nativeElement.style.overflow = 'hidden';
-
-      // check is rows is explicitly set, otherwise we don't need to
-      // care about it(and getting the actual line-height) at all
-      if (this._rows) {
-        this._lineHeight = this._getLineHeight();
-        this._elRef.nativeElement.style.minHeight = `${+this._rows * this._lineHeight}px`;
-      }
-
-      this._adjust();
-    }
-  }
-
-  private _adjust() {
-    // reset height(and rows if it was set by the user)
-    // to the default values to properly calculate new height
-    this._elRef.nativeElement.style.height = 'auto';
-
-    // only need to do this if user explicitly set rows
-    if (this._rows) {
-      this._elRef.nativeElement.rows = this._rows;
-    }
-
-    this._height = +this._elRef.nativeElement.scrollHeight;
-
-    // only need to do this if user explicitly set rows
-    if (this._rows) {
-      this._elRef.nativeElement.rows = this._getCalculatedRows();
-    }
-
-    this._elRef.nativeElement.style.height = `${this._height}px`;
-  }
-
-  private _getCalculatedRows() {
-    return Math.round(this._height / this._lineHeight);
-  }
-
-  private _getLineHeight(): number {
-    const el: HTMLTextAreaElement = this._elRef.nativeElement;
-
-    // get the actual computed styles for the element
-    const computedStyles = window.getComputedStyle(el);
-
-    // if line height is explicitly set(to a pixel value), use that
-    if (computedStyles.lineHeight && computedStyles.lineHeight.toLowerCase().indexOf('px') >= 0) {
-      // return stripped of the "px" and as a number
-      return parseFloat(computedStyles.lineHeight);
-    }
-
-    // create temporary element
-    const tempEl = <HTMLTextAreaElement>document.createElement(el.nodeName);
-
-    // reset styling, visually hiden the element
-    // and set its font styles to match the ones of our textarea
-    tempEl.setAttribute('rows', '1');
-    tempEl.setAttribute(
-      'style',
-      `
-        margin: 0px;
-        padding: 0px;
-        visibility: hidden;
-        opacity: 0;
-        font-family: ${computedStyles.fontFamily};
-        font-size: ${computedStyles.fontSize};
-      `
-    );
-
-    // fill in one row
-    tempEl.value = '-';
-
-    // append to parent element to correctly inherit same values
-    // as the actual textarea
-    el.parentNode.appendChild(tempEl);
-
-    // get the actual line height
-    const lineHeight = tempEl.clientHeight;
-
-    // cleanup
-    tempEl.parentNode.removeChild(tempEl);
-
-    return lineHeight;
-  }
-}
-
-
-
 /**
  * Component that represents a text input. It encapsulates the <input> HTMLElement and
  * improve on its behaviour, along with styling it according to the Material Design.
@@ -477,9 +359,9 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
 
 
 @NgModule({
-  declarations: [MdPlaceholder, MdInput, MdHint, MdAutosize],
+  declarations: [MdPlaceholder, MdInput, MdHint],
   imports: [CommonModule, FormsModule],
-  exports: [MdPlaceholder, MdInput, MdHint, MdAutosize],
+  exports: [MdPlaceholder, MdInput, MdHint],
 })
 export class MdInputModule {
   static forRoot(): ModuleWithProviders {

From acac45e6e0234a0c77834b23421f3b0d7fe547e8 Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Thu, 27 Oct 2016 00:40:31 +0200
Subject: [PATCH 10/15] remove autosize from demo-app

---
 src/demo-app/input/input-demo.html | 26 --------------------------
 1 file changed, 26 deletions(-)

diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
index 45604ad7f46b..2130e211064e 100644
--- a/src/demo-app/input/input-demo.html
+++ b/src/demo-app/input/input-demo.html
@@ -75,32 +75,6 @@ <h4>Textarea</h4>
   </md-card-content>
 </md-card>
 
-<md-card class="demo-card demo-basic">
-  <md-toolbar color="primary">Expanding textarea</md-toolbar>
-  <md-card-content>
-    <div>
-      <md-textarea
-        placeholder="Textarea with autosize"
-        class="demo-full-width"
-        autosize
-        value="Hello world. How are you?">
-      </md-textarea>
-    </div>
-
-    <h4>With `rows` explicitly set</h4>
-    <div>
-      <md-textarea
-        placeholder="Textarea with autosize"
-        class="demo-full-width"
-        autosize
-        [rows]="rows"
-        value="Hello world. How are you?">
-      </md-textarea>
-    </div>
-  </md-card-content>
-</md-card>
-
-
 <md-card class="demo-card">
   <md-card-title>
     Hello <md-input [(ngModel)]="name" type="text" placeholder="First name"></md-input>,

From 4784301ebdc9267a13125bb16448046af1c825fb Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Thu, 27 Oct 2016 00:44:55 +0200
Subject: [PATCH 11/15] remove unused imports

---
 src/lib/input/input.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index 3165c1e3cc8b..9a6bab53c094 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -5,9 +5,7 @@ import {
   Input,
   Directive,
   AfterContentInit,
-  OnInit,
   ContentChild,
-  HostListener,
   SimpleChange,
   ContentChildren,
   ViewChild,

From 95e6bab1776fe08015af4afd6799427befd0c9de Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Thu, 27 Oct 2016 01:39:57 +0200
Subject: [PATCH 12/15] address comments, add tests

---
 src/lib/input/README.md     |  5 +----
 src/lib/input/input.scss    |  4 ----
 src/lib/input/input.spec.ts | 23 +++++++++++++++++++++++
 src/lib/input/input.ts      | 21 ++++++++++++---------
 4 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/lib/input/README.md b/src/lib/input/README.md
index 3b8bee2f2928..dc0ca061c255 100644
--- a/src/lib/input/README.md
+++ b/src/lib/input/README.md
@@ -108,11 +108,8 @@ export class MyComponent implements OnInit {
 
 ## Textareas
 
-Supports same attributes as MdInput, except `type`, additionally it support `autosize` attribute
-which enables auto expanding functionality.
-
 ```html
-<md-textarea autosize placeholder="Textarea with autosize"></md-textarea>
+<md-textarea placeholder="Textarea with autosize"></md-textarea>
 ```
 
 ### Example
diff --git a/src/lib/input/input.scss b/src/lib/input/input.scss
index c3210596e9e2..228b371ca432 100644
--- a/src/lib/input/input.scss
+++ b/src/lib/input/input.scss
@@ -95,10 +95,6 @@ md-input, md-textarea {
   }
 }
 
-.md-input-element-textarea {
-  min-height: 60px;
-}
-
 // The placeholder label. This is invisible unless it is. The logic to show it is
 // basically `empty || (float && (!empty || focused))`. Float is dependent on the
 // `floatingPlaceholder` input.
diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts
index 6f45fff3f24c..d1591c615210 100644
--- a/src/lib/input/input.spec.ts
+++ b/src/lib/input/input.spec.ts
@@ -57,6 +57,7 @@ describe('MdInput', function () {
         MdInputTextTestController,
         MdInputPasswordTestController,
         MdInputNumberTestController,
+        MdTextareaWithBindings,
       ],
     });
 
@@ -619,6 +620,20 @@ describe('MdInput', function () {
 
     expect(inputElement.name).toBe('some-name');
   });
+
+  describe('md-textarea', () => {
+    it('supports the rows, cols, and wrap attributes', () => {
+      let fixture = TestBed.createComponent(MdTextareaWithBindings);
+
+      fixture.detectChanges();
+
+      const textarea: HTMLTextAreaElement = fixture.nativeElement.querySelector('textarea');
+      expect(textarea.rows).toBe(4);
+      expect(textarea.cols).toBe(8);
+      expect(textarea.wrap).toBe('hard');
+    });
+  });
+
 });
 
 @Component({template: `<md-input id="test-id"></md-input>`})
@@ -791,3 +806,11 @@ class MdInputPasswordTestController {
 class MdInputNumberTestController {
   placeholder: string = '';
 }
+
+@Component({template:
+    `<md-textarea [rows]="rows" [cols]="cols" [wrap]="wrap" placeholder="Snacks"></md-textarea>`})
+class MdTextareaWithBindings {
+  rows: number = 4;
+  cols: number = 8;
+  wrap: string = 'hard';
+}
diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index 9a6bab53c094..a975d0603dd0 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -167,6 +167,11 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
   @Input() type: string = 'text';
   @Input() name: string = null;
 
+  // textarea-specific
+  @Input() rows: number = null;
+  @Input() cols: number = null;
+  @Input() wrap: string = null;
+
   private _floatingPlaceholder: boolean = true;
   private _autofocus: boolean = false;
   private _disabled: boolean = false;
@@ -229,9 +234,14 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
 
   @ViewChild('input') _inputElement: ElementRef;
 
-  public elementType: 'input' | 'textarea' = undefined;
+  elementType: 'input' | 'textarea';
 
-  constructor(private _elRef: ElementRef) { }
+  constructor(public _elementRef: ElementRef) {
+    // Set the element type depending on normalized selector used(md-input / md-textarea)
+    this.elementType = this._elementRef.nativeElement.nodeName.toLowerCase() === 'md-input' ?
+        'input' :
+        'textarea';
+  }
 
   /** Set focus on input */
   focus() {
@@ -286,13 +296,6 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
   ngAfterContentInit() {
     this._validateConstraints();
 
-    // Set the element type depending on normalized selector used(md-input / md-textarea)
-    if (this._elRef.nativeElement.tagName.toLowerCase() === 'md-input') {
-      this.elementType = 'input';
-    } else {
-      this.elementType = 'textarea';
-    }
-
     // Trigger validation when the hint children change.
     this._hintChildren.changes.subscribe(() => {
       this._validateConstraints();

From 6bf56133a2274687f388c6045d7bce066ae928f9 Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Thu, 27 Oct 2016 01:41:48 +0200
Subject: [PATCH 13/15] prefix element type with underscore

---
 src/lib/input/input.html | 4 ++--
 src/lib/input/input.ts   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/input/input.html b/src/lib/input/input.html
index 11e55e4478d2..5b6924d94813 100644
--- a/src/lib/input/input.html
+++ b/src/lib/input/input.html
@@ -4,7 +4,7 @@
 
     <div class="md-input-infix">
       <input #input
-             *ngIf="elementType === 'input'"
+             *ngIf="_elementType === 'input'"
              class="md-input-element"
              [class.md-end]="align == 'end'"
              [attr.aria-label]="ariaLabel"
@@ -37,7 +37,7 @@
 
       <textarea
              #input
-             *ngIf="elementType === 'textarea'"
+             *ngIf="_elementType === 'textarea'"
              class="md-input-element  md-input-element-textarea"
              [class.md-end]="align == 'end'"
              [attr.aria-label]="ariaLabel"
diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index a975d0603dd0..553be2f08a1d 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -234,11 +234,11 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
 
   @ViewChild('input') _inputElement: ElementRef;
 
-  elementType: 'input' | 'textarea';
+  _elementType: 'input' | 'textarea';
 
   constructor(public _elementRef: ElementRef) {
     // Set the element type depending on normalized selector used(md-input / md-textarea)
-    this.elementType = this._elementRef.nativeElement.nodeName.toLowerCase() === 'md-input' ?
+    this._elementType = this._elementRef.nativeElement.nodeName.toLowerCase() === 'md-input' ?
         'input' :
         'textarea';
   }

From 43a6762639387cf38be02bb5ee7e0492a445d6b9 Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Thu, 27 Oct 2016 01:43:13 +0200
Subject: [PATCH 14/15] proper type of wrap

---
 src/lib/input/input.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index 553be2f08a1d..73070f84cd4a 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -170,7 +170,7 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
   // textarea-specific
   @Input() rows: number = null;
   @Input() cols: number = null;
-  @Input() wrap: string = null;
+  @Input() wrap: 'soft' | 'hard' = null;
 
   private _floatingPlaceholder: boolean = true;
   private _autofocus: boolean = false;

From 88a560bf0c6d139a5a13ff60dba28330d1d96e64 Mon Sep 17 00:00:00 2001
From: Ales Rechtorik <ales@f13.cz>
Date: Thu, 27 Oct 2016 01:49:01 +0200
Subject: [PATCH 15/15] remove public from element ref injection

---
 src/lib/input/input.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index 73070f84cd4a..3d8b10a3c613 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -236,9 +236,9 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
 
   _elementType: 'input' | 'textarea';
 
-  constructor(public _elementRef: ElementRef) {
+  constructor(elementRef: ElementRef) {
     // Set the element type depending on normalized selector used(md-input / md-textarea)
-    this._elementType = this._elementRef.nativeElement.nodeName.toLowerCase() === 'md-input' ?
+    this._elementType = elementRef.nativeElement.nodeName.toLowerCase() === 'md-input' ?
         'input' :
         'textarea';
   }