update(textfield): propagates type settings

src/components/textField/demo1/index.html

@@ -3,8 +3,8 @@
 
   <material-toolbar class="theme-dark-tff material-medium-tall" style="padding-top:15px;">
     <div class="material-toolbar-tools dark">
-      <tf-float label="Title"   value="user.title"   ></tf-float>
-      <tf-float label="Message" value="user.message" ></tf-float>
+      <tf-float label="Title"  value="user.title"   ></tf-float>
+      <tf-float label="eMail"  value="user.email" type="email" ></tf-float>
     </div>
   </material-toolbar>
 

src/components/textField/demo1/script.js

@@ -8,7 +8,7 @@ angular.module('textFieldDemo1', ['ngMaterial'])
   .controller('DemoController', function($scope) {
     $scope.user = {
        title:     "Project Manager",
-       message:   "ipsum lorem id screib",
+       email:     "ipsum@lorem.com",
        firstName: "Naomi",
        lastName:  "" ,
        company:   "Google" ,
@@ -35,25 +35,26 @@ angular.module('textFieldDemo1', ['ngMaterial'])
       compile : function() {
         return {
           pre : function(scope, element, attrs) {
+            // transpose `disabled` flag
             if ( angular.isDefined(attrs.disabled) ) {
               element.attr('disabled', true);
               scope.isDisabled = true;
             }
-            scope.label = angular.isUndefined(scope.label) ? attrs.label : "";
 
-            if ( angular.isUndefined(scope.fid) ) {
-              scope.fid = scope.label;
-            }
+            // transpose the `label` value
+            scope.label = attrs.label || "";
+            scope.fid = scope.fid || scope.label;
 
-            // transpose class settings...
+            // transpose optional `type` and `class` settings
+            element.attr('type', attrs.type || "text");
             element.attr('class', attrs.class );
           }
         }
       },
       template:
         '<material-input-group ng-disabled="isDisabled">' +
           '<label for="{{fid}}">{{label}}</label>' +
-          '<material-input id="{{fid}}" type="text" ng-model="value">' +
+          '<material-input id="{{fid}}" ng-model="value">' +
         '</material-input-group>'
     };
   });

src/components/textField/textField.js

@@ -56,15 +56,15 @@ function materialInputGroupDirective() {
  * <hljs lang="html">
  * <material-input-group ng-disabled="user.isLocked">
  *   <label for="i1">FirstName</label>
- *   <material-input id="i1" type="text" ng-model="user.firstName"></material-input>
+ *   <material-input id="i1" ng-model="user.firstName"></material-input>
  * </material-input-group>
  * </hljs>
  */
 function materialInputDirective() {
   return {
     restrict: 'E',
     replace: true,
-    template: '<input type="text">',
+    template: '<input >',
     require: ['^?materialInputGroup', '?ngModel'],
     link: function(scope, element, attr, ctrls) {
       var inputGroupCtrl = ctrls[0];
@@ -73,10 +73,11 @@ function materialInputDirective() {
         return;
       }
 
-      if ( Util.isParentDisabled(element.parent()) ) {
-        // tab focus not allowed
-        element.attr('tabindex', -1);
-      }
+      // scan for disabled and transpose the `type` value to the <input> element
+      var isDisabled = Util.isParentDisabled(element);
+
+      element.attr('tabindex', isDisabled ? -1 : 0 );
+      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