feat(tagsInput): Add support for some Bootstrap classes

Add support for the following Bootstrap classes:
- input-group
- input-group-lg
- input-group-sm
- input-lg (via ti-input-lg class)
- input-sm (via ti-input-sm class)
- has-feedback
- has-success
- has-error
- has-warning

Closes mbenford#78.

Gruntfile.js

@@ -36,9 +36,16 @@ module.exports = function(grunt) {
                 outMin: 'build/<%= pkg.name %>.min.js'
             },
             css: {
-                src: 'scss/main.scss',
-                out: 'build/<%= pkg.name %>.css',
-                outMin: 'build/<%= pkg.name %>.min.css'
+                main: {
+                    src: 'scss/main.scss',
+                    out: 'build/<%= pkg.name %>.css',
+                    outMin: 'build/<%= pkg.name %>.min.css'
+                },
+                bootstrap: {
+                    src: 'scss/bootstrap/main.scss',
+                    out: 'build/<%= pkg.name %>.bootstrap.css',
+                    outMin: 'build/<%= pkg.name %>.bootstrap.min.css'
+                }
             },
             html: {
                 src: ['templates/tags-input.html', 'templates/auto-complete.html'],

grunt/options/compress.js

@@ -9,7 +9,7 @@ module.exports = {
         files : [
             {
                 expand: true,
-                src : ['<%= files.js.outMin %>', '<%= files.css.outMin %>'],
+                src : ['<%= files.js.outMin %>', '<%= files.css.main.outMin %>'],
                 flatten: true
             }
         ]
@@ -21,7 +21,7 @@ module.exports = {
         files : [
             {
                 expand: true,
-                src : ['<%= files.js.out %>', '<%= files.css.out %>'],
+                src : ['<%= files.js.out %>', '<%= files.css.main.out %>'],
                 flatten: true
             }
         ]

grunt/options/cssmin.js

@@ -1,7 +1,8 @@
 module.exports = {
     build: {
         files: {
-            '<%= files.css.outMin %>': ['<%= files.css.out %>']
+            '<%= files.css.main.outMin %>': ['<%= files.css.main.out %>'],
+            '<%= files.css.bootstrap.outMin %>': ['<%= files.css.bootstrap.out %>']
         }
     }
 };

grunt/options/sass.js

@@ -5,7 +5,8 @@ module.exports = {
             noCache: true
         },
         files: {
-            '<%= files.css.out %>': ['<%= files.css.src %>']
+            '<%= files.css.main.out %>': ['<%= files.css.main.src %>'],
+            '<%= files.css.bootstrap.out %>': ['<%= files.css.bootstrap.src %>']
         }
     }
 };

scss/auto-complete.scss

@@ -5,11 +5,11 @@ tags-input .autocomplete {
   margin-top: 5px;
   position: absolute;
   padding: 5px 0;
-  z-index: $suggestion-box-z-index;
-  width: $suggestion-box-width;
-  background-color: $suggestion-box-color;
-  border: $suggestion-box-border;
-  @include box-shadow($suggestion-box-shadow);
+  z-index: $suggestions-z-index;
+  width: $suggestions-width;
+  background-color: $suggestions-bgcolor;
+  border: $suggestions-border;
+  @include box-shadow($suggestions-border-shadow);
 
   .suggestion-list {
     margin: 0;

scss/bootstrap/forms.scss

@@ -0,0 +1,97 @@
+@import "../mixins";
+@import "variables";
+
+tags-input.ti-input-lg {
+  min-height: $tags-height-lg;
+
+  .tags {
+    border-radius: $tag-border-radius-lg;
+
+    .tag-item {
+      height: $tag-height-lg;
+      line-height: $tag-height-lg - 1px;
+      font-size: $tag-font-size-lg;
+      border-radius: $tag-border-radius-lg;
+
+      .remove-button {
+        font-size: $remove-button-font-size-lg;
+      }
+    }
+
+    .input {
+      height: $tag-height-lg;
+      font-size: $input-font-size-lg;
+    }
+  }
+}
+
+tags-input.ti-input-sm {
+  min-height: $tags-height-sm;
+
+  .tags {
+    border-radius: $tag-border-radius-sm;
+
+    .tag-item {
+      height: $tag-height-sm;
+      line-height: $tag-height-sm - 1px;
+      font-size: $tag-font-size-sm;
+      border-radius: $tag-border-radius-sm;
+
+      .remove-button {
+        font-size: $remove-button-font-size-sm;
+      }
+    }
+
+    .input {
+      height: $tag-height-sm;
+      font-size: $input-font-size-sm;
+    }
+  }
+}
+
+.has-feedback {
+  tags-input {
+    .tags {
+      padding-right: 30px;
+    }
+  }
+
+  &.has-success {
+    tags-input {
+      .tags {
+        border-color: $tags-border-color-success;
+
+        &.focused {
+          border-color: $tags-outline-border-color-success;
+          @include box-shadow($tags-outline-border-shadow-success)
+        }
+      }
+    }
+  }
+
+  &.has-error {
+    tags-input {
+      .tags {
+        border-color: $tags-border-color-error;
+
+        &.focused {
+          border-color: $tags-outline-border-color-error;
+          @include box-shadow($tags-outline-border-shadow-error)
+        }
+      }
+    }
+  }
+
+  &.has-warning {
+    tags-input {
+      .tags {
+        border-color: $tags-border-color-warning;
+
+        &.focused {
+          border-color: $tags-outline-border-color-warning;
+          @include box-shadow($tags-outline-border-shadow-warning)
+        }
+      }
+    }
+  }
+}

scss/bootstrap/input-groups.scss

@@ -0,0 +1,47 @@
+@import "forms";
+@import "variables";
+
+.input-group {
+  tags-input {
+    padding: 0;
+    display: table-cell;
+  }
+
+  tags-input:not(:first-child) {
+    .tags {
+      @include border-left-radius(0)
+    }
+  }
+
+  tags-input:not(:last-child) {
+    .tags {
+      @include border-right-radius(0)
+    }
+  }
+}
+
+.input-group-lg {
+  tags-input {
+    @extend .ti-input-lg;
+  }
+
+  tags-input:first-child {
+    @include border-left-radius($tag-border-radius-lg);
+  }
+
+  tags-input:last-child {
+    @include border-right-radius($tag-border-radius-lg);
+  }
+}
+
+.input-group-sm tags-input {
+  @extend .ti-input-sm;
+
+  tags-input:first-child {
+    @include border-left-radius($tag-border-radius-sm);
+  }
+
+  tags-input:last-child {
+    @include border-right-radius($tag-border-radius-sm);
+  }
+}

scss/bootstrap/main.scss

@@ -0,0 +1,73 @@
+@import "../mixins";
+@import "variables";
+
+tags-input {
+  box-shadow: none;
+  border: none;
+  padding: 0;
+  min-height: $tags-height;
+
+  .host {
+    margin: 0;
+  }
+
+  .tags {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    border: $tags-border;
+    border-radius: $tags-border-radius;
+    @include box-shadow($tags-border-shadow);
+    @include transition($tags-transition);
+
+    .tag-item {
+      color: $tag-color;
+      background: $tag-bgcolor;
+      border: $tag-border;
+      border-radius: $tag-border-radius;
+
+      &.selected {
+        color: $tag-color-selected;
+        background: $tag-bgcolor-selected;
+        border: $tag-border-selected;
+      }
+
+      .remove-button:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .tags.focused {
+    border: $tags-outline-border;
+    @include box-shadow($tags-outline-border-shadow);
+  }
+
+  .autocomplete {
+    border-radius: $suggestions-border-radius;
+
+    .suggestion-item {
+      &.selected {
+        color: $suggestion-color-selected;
+        background-color: $suggestion-bgcolor-selected;
+
+        em {
+          color: $suggestion-highlight-color-selected;
+          background-color: $suggestion-highlight-bgcolor-selected;
+        }
+      }
+
+      em {
+        color: $suggestion-highlight-color;
+        background-color: $suggestion-highlight-bgcolor;
+      }
+    }
+  }
+
+  &.ng-invalid .tags {
+    border-color: #843534;
+    @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483)
+  }
+}
+
+@import "input-groups";
+@import "forms";

scss/bootstrap/variables.scss

@@ -0,0 +1,55 @@
+// tagsInput
+$tags-border:                           1px solid #ccc;
+$tags-border-radius:                    4px;
+$tags-border-shadow:                    inset 0 1px 1px rgba(0, 0, 0, .075);
+$tags-transition:                       border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+$tags-outline-border:                   1px solid #66afe9;
+$tags-outline-border-shadow:            inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
+
+$tag-color:                             #fff;
+$tag-bgcolor:                           #428bca;
+$tag-border:                            1px solid #357ebd;
+$tag-border-radius:                     4px;
+
+$tag-color-selected:                    #fff;
+$tag-bgcolor-selected:                  #d9534f;
+$tag-border-selected:                   1px solid #d43f3a;
+
+$tags-height:                           34px;
+
+$tags-height-lg:                        46px;
+$tag-height-lg:                         38px;
+$tag-font-size-lg:                      18px;
+$tag-border-radius-lg:                  6px;
+$remove-button-font-size-lg:            20px;
+$input-font-size-lg:                    18px;
+
+$tags-height-sm:                        30px;
+$tag-height-sm:                         22px;
+$tag-font-size-sm:                      12px;
+$tag-border-radius-sm:                  3px;
+$remove-button-font-size-sm:            16px;
+$input-font-size-sm:                    12px;
+
+$tags-border-color-success:             #3c763d;
+$tags-outline-border-color-success:     #2b542c;
+$tags-outline-border-shadow-success:    inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
+
+$tags-border-color-error:               #a94442;
+$tags-outline-border-color-error:       #843534;
+$tags-outline-border-shadow-error:      inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
+
+$tags-border-color-warning:             #8a6d3b;
+$tags-outline-border-color-warning:     #66512c;
+$tags-outline-border-shadow-warning:    inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
+
+// autoComplete
+$suggestions-border-radius:             4px;
+
+$suggestion-color-selected:             #262626;
+$suggestion-bgcolor-selected:           #f5f5f5;
+
+$suggestion-highlight-color:            #000;
+$suggestion-highlight-bgcolor:          #fff;
+$suggestion-highlight-color-selected:   $suggestion-color-selected;
+$suggestion-highlight-bgcolor-selected: $suggestion-bgcolor-selected;

scss/main.scss

@@ -1,14 +1,17 @@
-tags-input *, *:before, *:after {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
 tags-input {
+  display: block;
+
+  *, *:before, *:after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
   .host {
     position: relative;
     margin-top: 5px;
     margin-bottom: 5px;
+    height: 100%;
 
     &:active {
       outline: none;