feat(tagsInput): add softRemove option

src/tags-input.js

@@ -36,6 +36,7 @@
  * @param {string=} [allowedTagsPattern=.+] Regular expression that determines whether a new tag is valid.
  * @param {boolean=} [enableEditingLastTag=false] Flag indicating that the last tag will be moved back into the new tag
  *    input box instead of being removed when the backspace key is pressed and the input box is empty.
+ * @param {boolean=} [softRemove=false] Flag indicating that tags are hidden rather than removed, add `removed:true` property on element.
  * @param {boolean=} [addFromAutocompleteOnly=false] Flag indicating that only tags coming from the autocomplete list
  *    will be allowed. When this flag is true, addOnEnter, addOnComma, addOnSpace and addOnBlur values are ignored.
  * @param {boolean=} [spellcheck=true] Flag indicating whether the browser's spellcheck is enabled for the input field or not.
@@ -121,6 +122,16 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, $q, tags
             });
         };
 
+        self.softRemove = function(index) {
+            var tag = self.items[index];
+
+            return canRemoveTag(tag).then(function() {
+                self.items[index].removed = true;
+                events.trigger('tag-removed', { $tag: tag });
+            });
+
+        };
+
         self.select = function(index) {
             if (index < 0) {
                 index = self.items.length - 1;
@@ -196,6 +207,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, $q, tags
                 addOnPaste: [Boolean, false],
                 pasteSplitPattern: [RegExp, /,/],
                 allowedTagsPattern: [RegExp, /.+/],
+                softRemove: [Boolean, false],
                 enableEditingLastTag: [Boolean, false],
                 minTags: [Number, 0],
                 maxTags: [Number, MAX_SAFE_INTEGER],
@@ -245,6 +257,10 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, $q, tags
                         if ($scope.disabled) {
                             return;
                         }
+                        if($scope.options.softRemove){
+                            $scope.tagList.softRemove(index);
+                            return;
+                        }
                         $scope.tagList.remove(index);
                     }
                 };

templates/tags-input.html

@@ -4,7 +4,8 @@
       <li class="tag-item"
           ng-repeat="tag in tagList.items track by track(tag)"
           ng-class="getTagClass(tag, $index)"
-          ng-click="eventHandlers.tag.click(tag)">
+          ng-click="eventHandlers.tag.click(tag)"
+          ng-hide="tag.removed">
         <ti-tag-item scope="templateScope" data="::tag"></ti-tag-item>
       </li>
     </ul>

test/tags-input.spec.js

@@ -184,6 +184,26 @@ describe('tags-input directive', function() {
             expect(isolateScope.tagList.index).toBe(-1);
         });
 
+        it('soft removes a tag when the remove button is clicked and softRemove option is true', function() {
+            // Arrange
+            $scope.tags = generateTags(3);
+            compile('soft-remove="true"');
+
+            var itemIndex = 1;
+            // Act
+            getRemoveButton(itemIndex).click();
+
+
+            var tagsElement = angular.element(element.find('li')[itemIndex]);
+
+            // Assert
+            expect(tagsElement.hasClass('ng-hide')).toBe(true);
+            expect(element.find('li.ng-hide').length).toBe(1);
+            expect($scope.tags[itemIndex].removed).toEqual(true);
+            expect(isolateScope.tagList.selected).toBe(null);
+            expect(isolateScope.tagList.index).toBe(-1);
+        });
+
         it('sets focus on the input field after a tag is added', function() {
             // Arrange
             compile();