feat(tagsInput): Add type option

Add a new 'type' option so the internal input element can customized.
Only a few values are currently supported: text, email and url. Due to
the use of the ti-bind-attrs directive, Angular will NOT process the
provided value and as a result of that no validation will be performed
whatsoever.

Closes #140.

.jshintrc

@@ -37,6 +37,7 @@
         "generateArray": true,
         "customMatchers": true,
         "KEYS": true,
-        "MAX_SAFE_INTEGER": true
+        "MAX_SAFE_INTEGER": true,
+        "SUPPORTED_INPUT_TYPES": true
     }
 }

src/constants.js

@@ -11,4 +11,5 @@ var KEYS = {
     comma: 188
 };
 
-var MAX_SAFE_INTEGER = 9007199254740991;
+var MAX_SAFE_INTEGER = 9007199254740991;
+var SUPPORTED_INPUT_TYPES = ['text', 'email', 'url'];

src/tags-input.js

@@ -10,6 +10,7 @@
  *
  * @param {string} ngModel Assignable angular expression to data-bind to.
  * @param {string=} [displayProperty=text] Property to be rendered as the tag label.
+ * @param {string=} [input=text] Type of the input element. Only 'text', 'email' and 'url' are supported values.
  * @param {number=} tabindex Tab order of the control.
  * @param {string=} [placeholder=Add a tag] Placeholder text for the control.
  * @param {number=} [minLength=3] Minimum length for a new tag.
@@ -106,6 +107,10 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig)
         return self;
     }
 
+    function validateType(type) {
+        return SUPPORTED_INPUT_TYPES.indexOf(type) !== -1;
+    }
+
     return {
         restrict: 'E',
         require: 'ngModel',
@@ -121,6 +126,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig)
             $scope.events = new SimplePubSub();
 
             tagsInputConfig.load('tagsInput', $scope, $attrs, {
+                type: [String, 'text', validateType],
                 placeholder: [String, 'Add a tag'],
                 tabindex: [Number, null],
                 removeTagSymbol: [String, String.fromCharCode(215)],

templates/tags-input.html

@@ -6,13 +6,12 @@
         <a class="remove-button" ng-click="tagList.remove($index)" ng-bind="options.removeTagSymbol"></a>
       </li>
     </ul>
-    <input type="text"
-           class="input"
+    <input class="input"
            ng-model="newTag.text"
            ng-change="newTagChange()"
            ng-trim="false"
            ng-class="{'invalid-tag': newTag.invalid}"
-           ti-bind-attrs="{placeholder: options.placeholder, tabindex: options.tabindex}"
+           ti-bind-attrs="{type: options.type, placeholder: options.placeholder, tabindex: options.tabindex}"
            ti-autosize>
   </div>
 </div>

test/tags-input.spec.js

@@ -523,8 +523,36 @@ describe('tags-input directive', function() {
         });
     });
 
+    describe('type option', function() {
+        it('sets the input\'s type property', function() {
+            SUPPORTED_INPUT_TYPES.forEach(function(type) {
+                // Arrange/Act
+                compile('type="' + type + '"');
+
+                // Assert
+                expect(getInput().attr('type')).toBe(type);
+            });
+        });
+
+        it('initializes the option to "text"', function() {
+            // Arrange/Act
+            compile();
+
+            // Assert
+            expect(isolateScope.options.type).toBe('text');
+        });
+
+        it('falls back to "text" when unsupported values are provided', function() {
+            // Arrange/Act
+            compile('type="datetime"');
+
+            // Assert
+            expect(getInput().attr('type')).toBe('text');
+        });
+    });
+
     describe('placeholder option', function() {
-        it('sets the input field placeholder text', function() {
+        it('sets the input\'s placeholder text', function() {
             // Arrange/Act
             compile('placeholder="New tag"');