Added text area support for mdTextFloat directive

.gitignore

@@ -11,3 +11,6 @@ dist
 /vendor
 
 .polymer-qp
+
+atlassian-ide-plugin.xml
+*.iml

src/components/textField/demoBasicUsage/index.html

@@ -1,28 +1,28 @@
-
 <div ng-controller="DemoController" layout="vertical">
   <md-content md-theme="light-blue-dark">
     <form style="padding: 20px;">
       <div class="row">
-        <md-text-float label="Title"  ng-model="user.title"   ></md-text-float>
-        <md-text-float label="eMail"  ng-model="user.email" type="email" ></md-text-float>
+        <md-text-float label="Title" ng-model="user.title"></md-text-float>
+        <md-text-float label="eMail" ng-model="user.email" type="email"></md-text-float>
       </div>
     </form>
   </md-content>
 
   <md-content>
     <form style="padding: 20px;">
-      <md-text-float label="Company"       ng-model="user.company"    disabled > </md-text-float>
+      <md-text-float label="Company" ng-model="user.company" disabled></md-text-float>
       <div class="row">
-          <md-text-float label="FirstName" ng-model="user.firstName"  > </md-text-float>
-          <md-text-float label="LastName"  ng-model="user.lastName"   class="long"> </md-text-float>
+        <md-text-float label="FirstName" ng-model="user.firstName"></md-text-float>
+        <md-text-float label="LastName" ng-model="user.lastName" class="long"></md-text-float>
       </div>
-      <md-text-float label="Address"       ng-model="user.address"    > </md-text-float>
+      <md-text-float label="Address" ng-model="user.address"></md-text-float>
       <div class="row">
-        <md-text-float label="City"        ng-model="user.city"       > </md-text-float>
-        <md-text-float label="State"       ng-model="user.state"      > </md-text-float>
-        <md-text-float label="Postal Code" ng-model="user.postalCode" > </md-text-float>
+        <md-text-float label="City" ng-model="user.city"></md-text-float>
+        <md-text-float label="State" ng-model="user.state"></md-text-float>
+        <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-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>
     </form>
   </md-content>
 

src/components/textField/demoBasicUsage/script.js

@@ -1,22 +1,22 @@
-
 angular.module('textFieldDemo1', ['ngMaterial'])
 
-  /**
-   *  Simple controller to build a `user` data model
-   *  that will be used to databinding with `<tf-float>` directives
-   */
-  .controller('DemoController', function($scope) {
+/**
+ *  Simple controller to build a `user` data model
+ *  that will be used to databinding with `<tf-float>` directives
+ */
+  .controller('DemoController', function ($scope) {
     $scope.user = {
-       title:     "Technical Program Manager",
-       email:     "ipsum@lorem.com",
-       firstName: "Naomi",
-       lastName:  "" ,
-       company:   "Google" ,
-       address:   "1600 Amphitheatre Pkwy" ,
-       city:      "Mountain View" ,
-       state:     "CA" ,
-       country:   "USA" ,
-       postalCode : "94043"
+      title: "Technical Program Manager",
+      email: "ipsum@lorem.com",
+      firstName: "Naomi",
+      lastName: "",
+      company: "Google",
+      address: "1600 Amphitheatre Pkwy",
+      city: "Mountain View",
+      state: "CA",
+      country: "USA",
+      postalCode: "94043",
+      intro: ""
     };
   });
 

src/components/textField/textField.js

@@ -5,10 +5,11 @@
  * Form
  */
 angular.module('material.components.textField', ['material.core', 'material.services.theming'])
-       .directive('mdInputGroup', [ mdInputGroupDirective ])
-       .directive('mdInput', ['$mdUtil', mdInputDirective ])
-       .directive('mdTextFloat', [ '$mdTheming', '$mdUtil', mdTextFloatDirective ]);
-
+  .directive('mdInputGroup', [ mdInputGroupDirective ])
+  .directive('mdInput', ['$mdUtil', mdInputDirective ])
+  .directive('mdTextarea', ['$mdUtil', mdTextareaDirective])
+  .directive('mdTextFloat', [ '$mdTheming', '$mdUtil', mdTextFloatDirective ])
+  .directive('mdTextareaFloat', [ '$mdTheming', '$mdUtil', mdTextareaFloatDirective ]);
 
 
 /**
@@ -41,21 +42,21 @@ function mdTextFloatDirective($mdTheming, $mdUtil) {
   return {
     restrict: 'E',
     replace: true,
-    scope : {
-      fid : '@?',
-      label : '@?',
-      value : '=ngModel'
+    scope: {
+      fid: '@?',
+      label: '@?',
+      value: '=ngModel'
     },
-    compile : function(element, attr) {
+    compile: function (element, attr) {
 
-      if ( angular.isUndefined(attr.fid) ) {
+      if (angular.isUndefined(attr.fid)) {
         attr.fid = $mdUtil.nextUid();
       }
 
       return {
-        pre : function(scope, element, attrs) {
+        pre: function (scope, element, attrs) {
           // transpose `disabled` flag
-          if ( angular.isDefined(attrs.disabled) ) {
+          if (angular.isDefined(attrs.disabled)) {
             element.attr('disabled', true);
             scope.isDisabled = true;
           }
@@ -64,17 +65,80 @@ function mdTextFloatDirective($mdTheming, $mdUtil) {
           element.removeAttr('type');
 
           // transpose optional `class` settings
-          element.attr('class', attrs.class );
+          element.attr('class', attrs.class);
+
+        },
+        post: $mdTheming
+      };
+    },
+    template: '<md-input-group ng-disabled="isDisabled" tabindex="-1">' +
+      ' <label for="{{fid}}" >{{label}}</label>' +
+      ' <md-input id="{{fid}}" ng-model="value" type="{{inputType}}"></md-input>' +
+      '</md-input-group>'
+  };
+}
+
+/**
+ * @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-input id="{{fid}}" ng-model="value" type="{{inputType}}"></md-input>' +
-    '</md-input-group>'
+    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>'
   };
 }
 
@@ -99,12 +163,12 @@ function mdTextFloatDirective($mdTheming, $mdUtil) {
 function mdInputGroupDirective() {
   return {
     restrict: 'CE',
-    controller: ['$element', function($element) {
-      this.setFocused = function(isFocused) {
+    controller: ['$element', function ($element) {
+      this.setFocused = function (isFocused) {
         $element.toggleClass('md-input-focused', !!isFocused);
       };
-      this.setHasValue = function(hasValue) {
-        $element.toggleClass('md-input-has-value', hasValue );
+      this.setHasValue = function (hasValue) {
+        $element.toggleClass('md-input-has-value', hasValue);
       };
     }]
   };
@@ -137,59 +201,111 @@ function mdInputDirective($mdUtil) {
     replace: true,
     template: '<input >',
     require: ['^?mdInputGroup', '?ngModel'],
-    link: function(scope, element, attr, ctrls) {
-      var inputGroupCtrl = ctrls[0];
-      var ngModelCtrl = ctrls[1];
-      if (!inputGroupCtrl) {
-        return;
-      }
+    link: function mdInputDirectiveLink(scope, element, attr, ctrls) {
+      linkBehaviours(scope, element, ctrls, $mdUtil);
 
-      // 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');
-      element.attr('type', attr.type || element.parent().attr('type') || "text" );
-
-      // 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.attr('type', attr.type || element.parent().attr('type') || "text");
+    }
+  };
+}
 
-      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() != ""));
-      }
+/*
+ * @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') || "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() != ""));
+  }
+}
+