Added textarea support for mdTextFloat

```
<md-text-float rows="4" cols="50"
                            type="textarea"
                            label="{{labels.intro}}"
                            ng-model="user.intro">
 ```

Author: Andy Tang

src/components/textField/demoBasicUsage/index.html

@@ -22,7 +22,7 @@
         <md-text-float label="Postal Code" ng-model="user.postalCode"></md-text-float>
       </div>
       <md-text-float label="Country" ng-model="user.country" disabled></md-text-float>
-      <md-textarea-float label="Intro" ng-model="user.intro" rows="4" cols="50"></md-textarea-float>
+      <md-text-float label="Intro" ng-model="user.intro" rows="4" cols="50" type="textarea"></md-text-float>
     </form>
   </md-content>
 

src/components/textField/textField.js

@@ -7,9 +7,7 @@
 angular.module('material.components.textField', ['material.core', 'material.services.theming'])
   .directive('mdInputGroup', [ mdInputGroupDirective ])
   .directive('mdInput', ['$mdUtil', mdInputDirective ])
-  .directive('mdTextarea', ['$mdUtil', mdTextareaDirective])
-  .directive('mdTextFloat', [ '$mdTheming', '$mdUtil', mdTextFloatDirective ])
-  .directive('mdTextareaFloat', [ '$mdTheming', '$mdUtil', mdTextareaFloatDirective ]);
+  .directive('mdTextFloat', [ '$mdTheming', '$mdUtil', mdTextFloatDirective ]);
 
 
 /**
@@ -36,6 +34,9 @@ angular.module('material.components.textField', ['material.core', 'material.serv
  *
  * <!-- Specify an input type if desired. -->
  * <md-text-float label="eMail"    ng-model="user.email" type="email" ></md-text-float>
+ *
+ * <!-- Specify textarea as an input type if desired. -->
+ * <md-text-float label="intro"    ng-model="user.intro" type="textarea" ></md-text-float>
  * </hljs>
  */
 function mdTextFloatDirective($mdTheming, $mdUtil) {
@@ -78,70 +79,6 @@ function mdTextFloatDirective($mdTheming, $mdUtil) {
   };
 }
 
-/**
- * @ngdoc directive
- * @name mdTextareaFloat
- * @module material.components.textField
- *
- * @restrict E
- *
- * @description
- * Use the `<md-textarea-float>` directive to quickly construct `Floating Label` textarea fields
- *
- * @param {string} fid Attribute used for accessibility link pairing between the Label and Input elements
- * @param {string=} rows Optional value to define the amount of rows.
- * @param {string=} cols Optional value to define the amount of cols.
- * @param {string} label Attribute to specify the input text field hint.
- * @param {string=} ng-model Optional value to assign as existing input text string
- *
- * @usage
- * <hljs lang="html">
- * <md-textarea-float label="Intro" ng-model="user.intro" > </md-textarea-float>
- *
- * <!-- Specify the amount of rows and cols. -->
- * <md-textarea-float label="Company"  ng-model="user.company" rows="4" cols="50" > </md-textarea-float>
- * </hljs>
- */
-function mdTextareaFloatDirective($mdTheming, $mdUtil) {
-  return {
-    restrict: 'E',
-    replace: true,
-    scope: {
-      fid: '@?',
-      label: '@?',
-      rows: '@?',
-      cols: '@?',
-      value: '=ngModel'
-    },
-    compile: function (element, attr) {
-
-      if (angular.isUndefined(attr.fid)) {
-        attr.fid = $mdUtil.nextUid();
-      }
-
-      return {
-        pre: function (scope, element, attrs) {
-          // transpose `disabled` flag
-          if (angular.isDefined(attrs.disabled)) {
-            element.attr('disabled', true);
-            scope.isDisabled = true;
-          }
-
-          // transpose optional `class` settings
-          element.attr('class', attrs.class);
-
-        },
-        post: $mdTheming
-      };
-    },
-    template: '<md-input-group ng-disabled="isDisabled" tabindex="-1">' +
-      ' <label for="{{fid}}" >{{label}}</label>' +
-      ' <md-textarea id="{{fid}}" ng-model="value" ' +
-      '  rows="{{rows}}" cols="{{cols}}"></md-textarea>' +
-      '</md-input-group>'
-  };
-}
-
 /*
  * @private
  *
@@ -199,113 +136,67 @@ function mdInputDirective($mdUtil) {
   return {
     restrict: 'E',
     replace: true,
-    template: '<input >',
+    template: function createTemplate(element) {
+      var isTextarea = element.parent().attr('type') === 'textarea';
+      if (isTextarea) {
+        return '<textarea >';
+      } else {
+        return '<input >';
+      }
+    },
     require: ['^?mdInputGroup', '?ngModel'],
     link: function mdInputDirectiveLink(scope, element, attr, ctrls) {
-      linkBehaviours(scope, element, ctrls, $mdUtil);
-
       element.attr('type', attr.type || element.parent().attr('type') || "text");
-    }
-  };
-}
-
-/*
- * @private
- *
- * @ngdoc directive
- * @name mdTextarea
- * @module material.components.textField
- *
- * @restrict E
- *
- * @description
- * Use the `<md-textarea>` directive as elements within a `<md-input-group>` container
- *
- * @usage
- * <hljs lang="html">
- * <md-input-group ng-disabled="user.isLocked">
- *   <label for="i1">Intro</label>
- *   <md-textarea id="i1" ng-model="user.intro"></md-textarea>
- * </md-input-group>
- * </hljs>
- */
-function mdTextareaDirective($mdUtil) {
-  return {
-    restrict: 'E',
-    replace: true,
-    template: '<textarea >',
-    require: ['^?mdInputGroup', '?ngModel'],
-    link: function mdInputDirectiveLink(scope, element, attr, ctrls) {
-      linkBehaviours(scope, element, ctrls, $mdUtil);
+      element.attr('rows', attr.rows || element.parent().attr('rows'));
+      element.attr('cols', attr.cols || element.parent().attr('cols'));
 
-      element.attr('rows', attr.rows || element.parent().attr('rows') || "8");
-      element.attr('cols', attr.cols || element.parent().attr('cols') || "100");
-    }
-  };
-}
-
-/*
- * @private
- *
- * @ngdoc directive
- * @name mdTextarea
- * @module material.components.textField
- * @function
- *
- * @description
- * The link function used in the mdInput and mdTextarea
- *
- */
-function linkBehaviours(scope, element, ctrls, $mdUtil) {
-  var inputGroupCtrl = ctrls[0];
-  var ngModelCtrl = ctrls[1];
-  if (!inputGroupCtrl) {
-    return;
-  }
-
-  // scan for disabled and transpose the `type` value to the <input> element
-  var isDisabled = $mdUtil.isParentDisabled(element);
-
-  element.attr('tabindex', isDisabled ? -1 : 0);
-  element.attr('aria-disabled', isDisabled ? 'true' : 'false');
-
-  // When the input value changes, check if it "has" a value, and
-  // set the appropriate class on the input group
-  if (ngModelCtrl) {
-    //Add a $formatter so we don't use up the render function
-    ngModelCtrl.$formatters.push(function (value) {
-      inputGroupCtrl.setHasValue(isNotEmpty(value));
-      return value;
-    });
-  }
-
-  element.on('input', function () {
-    inputGroupCtrl.setHasValue(isNotEmpty());
-  });
-
-  // When the input focuses, add the focused class to the group
-  element.on('focus', function (e) {
-    inputGroupCtrl.setFocused(true);
-  });
-  // When the input blurs, remove the focused class from the group
-  element.on('blur', function (e) {
-    inputGroupCtrl.setFocused(false);
-    inputGroupCtrl.setHasValue(isNotEmpty());
-  });
-
-  scope.$on('$destroy', function () {
-    inputGroupCtrl.setFocused(false);
-    inputGroupCtrl.setHasValue(false);
-  });
-
-
-  function isNotEmpty(value) {
-    value = angular.isUndefined(value) ? element.val() : value;
-    return (angular.isDefined(value) && (value !== null) &&
-      (value.toString().trim() != ""));
-  }
-}
+      var inputGroupCtrl = ctrls[0];
+      var ngModelCtrl = ctrls[1];
+      if (!inputGroupCtrl) {
+        return;
+      }
 
+      // scan for disabled and transpose the `type` value to the <input> element
+      var isDisabled = $mdUtil.isParentDisabled(element);
 
+      element.attr('tabindex', isDisabled ? -1 : 0);
+      element.attr('aria-disabled', isDisabled ? 'true' : 'false');
 
+      // When the input value changes, check if it "has" a value, and
+      // set the appropriate class on the input group
+      if (ngModelCtrl) {
+        //Add a $formatter so we don't use up the render function
+        ngModelCtrl.$formatters.push(function (value) {
+          inputGroupCtrl.setHasValue(isNotEmpty(value));
+          return value;
+        });
+      }
 
+      element.on('input', function () {
+        inputGroupCtrl.setHasValue(isNotEmpty());
+      });
+
+      // When the input focuses, add the focused class to the group
+      element.on('focus', function (e) {
+        inputGroupCtrl.setFocused(true);
+      });
+      // When the input blurs, remove the focused class from the group
+      element.on('blur', function (e) {
+        inputGroupCtrl.setFocused(false);
+        inputGroupCtrl.setHasValue(isNotEmpty());
+      });
+
+      scope.$on('$destroy', function () {
+        inputGroupCtrl.setFocused(false);
+        inputGroupCtrl.setHasValue(false);
+      });
+
+
+      function isNotEmpty(value) {
+        value = angular.isUndefined(value) ? element.val() : value;
+        return (angular.isDefined(value) && (value !== null) &&
+          (value.toString().trim() != ""));
+      }
+    }
+  };
+}

src/components/textField/textField.spec.js

@@ -246,10 +246,11 @@ describe('Text Field directives', function () {
     });
 
     it('should configure the amount of collumn and rows', function configureColsAndRows() {
-      var markup = '<md-textarea-float rows="4" cols="50"' +
+      var markup = '<md-text-float rows="4" cols="50"' +
+        '  type="textarea"' +
         '  label="{{labels.intro}}" ' +
         '  ng-model="user.filledIntro" >' +
-        '</md-textarea-float>';
+        '</md-text-float>';
       var el = buildElement(markup, model);
       var textarea = el.find('textarea');
 
@@ -258,10 +259,11 @@ describe('Text Field directives', function () {
     });
 
     it('should configure the label', function configureLabel() {
-      var markup = '<md-textarea-float rows="4" cols="50"' +
+      var markup = '<md-text-float rows="4" cols="50"' +
+        '  type="textarea"' +
         '  label="{{labels.intro}}" ' +
         '  ng-model="user.filledIntro" >' +
-        '</md-textarea-float>';
+        '</md-text-float>';
       var el = buildElement(markup, model);
       var label = el.find('label');