feat(textarea): make textarea autogrow with size of content

Closes #565. Closes #212.

src/components/input/demoBasicUsage/index.html

@@ -18,7 +18,7 @@
       <input ng-model="user.company" disabled>
     </md-input-container>
 
-    <div layout layout-padding layout-sm="column">
+    <div layout layout-sm="column">
       <md-input-container flex>
         <label>First Name</label>
         <input ng-model="user.firstName">
@@ -34,7 +34,7 @@
       <input ng-model="user.address">
     </md-input-container>
 
-    <div layout layout-padding layout-sm="column">
+    <div layout layout-sm="column">
       <md-input-container flex>
         <label>City</label>
         <input ng-model="user.city">
@@ -50,8 +50,8 @@
     </div>
 
     <md-input-container flex>
-      <label>Country</label>
-      <input ng-model="user.country">
+      <label>Biography</label>
+      <textarea ng-model="user.biography" columns="1"></textarea>
     </md-input-container>
 
   </md-content>

src/components/input/demoBasicUsage/script.js

@@ -10,7 +10,7 @@ angular.module('inputBasicDemo', ['ngMaterial'])
     address: '1600 Amphitheatre Pkwy' ,
     city: 'Mountain View' ,
     state: 'CA' ,
-    country: 'USA' ,
+    biography: 'Loves kittens, snowboarding, and can type at 130 WPM. And rumour has it she\'s bouldered up Castle Craig!',
     postalCode : '94043'
   };
 });

src/components/input/input.js

@@ -10,8 +10,8 @@ angular.module('material.components.input', [
 ])
   .directive('mdInputContainer', mdInputContainerDirective)
   .directive('label', labelDirective)
-  .directive('input', inputDirective)
-  .directive('textarea', inputDirective);
+  .directive('input', inputTextareaDirective)
+  .directive('textarea', inputTextareaDirective);
 
 /**
  * @ngdoc directive
@@ -86,7 +86,7 @@ function labelDirective() {
   };
 }
 
-function inputDirective($mdUtil) {
+function inputTextareaDirective($mdUtil, $window) {
   return {
     restrict: 'E',
     require: ['^?mdInputContainer', '?ngModel'],
@@ -104,6 +104,10 @@ function inputDirective($mdUtil) {
 
     if ( !containerCtrl ) return;
 
+    if (element[0].tagName.toLowerCase() === 'textarea') {
+      setupTextarea();
+    }
+
     if (containerCtrl.input) {
       throw new Error("<md-input-container> can only have *one* <input> or <textarea> child element!");
     }
@@ -143,10 +147,41 @@ function inputDirective($mdUtil) {
       containerCtrl.input = null;
     });
 
-    function isNotEmpty(value) {
-      value = angular.isUndefined(value) ? element.val() : value;
-      return (angular.isDefined(value) && (value!==null) &&
-             (value.toString().trim() !== ""));
+    function setupTextarea() {
+      var node = element[0];
+
+      if (ngModelCtrl) {
+        ngModelCtrl.$formatters.push(growTextarea);
+        ngModelCtrl.$parsers.push(growTextarea);
+      } else {
+        element.on('input', growTextarea);
+        growTextarea();
+      }
+      element.on('keydown', growTextarea);
+      element.on('scroll', onScroll);
+      angular.element($window).on('resize', growTextarea);
+
+      scope.$on('$destroy', function() {
+        angular.element($window).off('resize', growTextarea);
+      });
+
+      function growTextarea(value) {
+        node.style.height = "auto";
+        var line = node.scrollHeight - node.offsetHeight;
+        node.scrollTop = 0;
+        height = node.offsetHeight + (line > 0 ? line : 0);
+        node.style.height = height + 'px';
+
+        return value; // for $formatter/$parser
+      }
+
+      function onScroll(e) {
+        node.scrollTop = 0;
+        // for smooth new line adding
+        var line = node.scrollHeight - node.offsetHeight;
+        height = node.offsetHeight + line;
+        node.style.height = height + 'px';
+      }
     }
   }
 }

src/components/input/input.scss

@@ -35,6 +35,10 @@ md-input-container {
     -moz-appearance: none;
     -webkit-appearance: none;
   }
+  textarea {
+    resize: none;
+    overflow: hidden;
+  }
 
   label {
     order: 1;