Added suport to insert chip on field blur

dist/angular-chips.js

@@ -411,6 +411,9 @@
         return {
             restrict: 'A',
             require: '^chips',
+            scope: {
+                addOnBlur: '&?'
+            },
             link: ChipControlLinkFun,
         }
     };
@@ -430,6 +433,10 @@
         });
         iElement.on('blur', function() {
             chipsCtrl.setFocus(false);
+
+            if (scope.addOnBlur && event.target.value !== '' && chipsCtrl.addChip(event.target.value)) {
+              event.target.value = '';
+            }
         });
     };
 })();

dist/main.css

@@ -1,17 +1,15 @@
 chip-tmpl {
   display: inline-block;
-  margin: 0 5px 5px 0; }
+  margin: 0 5px 0 0; }
 
 .default-chip {
-  border: 2px solid #e0e0e0;
   border-radius: 5px;
   background: #e0e0e0;
-  padding: 5px; }
+  padding: 0 5px; }
 
 chip-tmpl:focus {
   outline: none; }
   chip-tmpl:focus .default-chip {
-    border: 2px solid #9e9e9e;
     background: #9e9e9e;
     color: white; }
 
@@ -29,9 +27,3 @@ chips {
       font-size: 14px; }
     chips > div > input:focus {
       outline: none; }
-
-.chip-out-focus {
-  border-bottom: 1px solid #e0e0e0; }
-
-.chip-in-focus {
-  border-bottom: 1px solid #106cc8; }

src/css/main.scss

@@ -4,20 +4,20 @@ $chip-tmpl-focus-color: rgb(158, 158, 158);
 
 chip-tmpl {
     display: inline-block;
-    margin: 0 5px 5px 0;
+    margin: 0 5px 0 0;
 }
 
 .default-chip {
-    border: 2px solid $default-color;
+    // border: 2px solid $default-color;
     border-radius: 5px;
     background: $default-color;
-    padding: 5px;
+    padding: 0 5px;
 }
 
 chip-tmpl:focus {
     outline: none;
     .default-chip {
-        border: 2px solid $chip-tmpl-focus-color;
+        // border: 2px solid $chip-tmpl-focus-color;
         background: $chip-tmpl-focus-color;
         color: white;
     }
@@ -46,9 +46,9 @@ chips {
 }
 
 .chip-out-focus {
-    border-bottom: 1px solid $default-color;
+    // border-bottom: 1px solid $default-color;
 }
 
 .chip-in-focus {
-    border-bottom: 1px solid $focus-color;
+    // border-bottom: 1px solid $focus-color;
 }

src/js/directives/controls/chip_control.js

@@ -10,6 +10,9 @@
         return {
             restrict: 'A',
             require: '^chips',
+            scope: {
+                addOnBlur: '&?'
+            },
             link: ChipControlLinkFun,
         }
     };
@@ -29,6 +32,10 @@
         });
         iElement.on('blur', function() {
             chipsCtrl.setFocus(false);
+
+            if (scope.addOnBlur && event.target.value !== '' && chipsCtrl.addChip(event.target.value)) {
+              event.target.value = '';
+            }
         });
     };
 })();