Merge pull request #106 from Availity/feature/add-removable-labels

adding removable labels

bower.json

@@ -19,7 +19,7 @@
     "angular": "1.2.28",
     "angular-sanitize": "1.2.28",
     "angular-ui-router": "0.2.13",
-    "availity-uikit": "~0.10.1",
+    "availity-uikit": "~0.11.0",
     "angular-shims-placeholder": "~0.4.2",
     "jquery.inputmask": "~3.1.63",
     "lodash-compat": "~3.4.0",

gulp/config.js

@@ -100,7 +100,8 @@ module.exports = {
       './lib/ui/placeholder/placeholder.js',
       './lib/ui/breadcrumbs/breadcrumbs.js',
       './lib/ui/filters/approximate.js',
-      './lib/ui/badge/badge.js'
+      './lib/ui/badge/badge.js',
+      './lib/ui/removable-label/removable-label.js'
     ],
     specs: './lib/ui/**/*spec.js',
     destDist: './dist',

lib/core/api/tests/api-factory-spec.js

@@ -222,7 +222,7 @@ describe('AvApiResource', function() {
         config.data = data;
 
         expect(_request).toHaveBeenCalled();
-        expect(_request).toHaveBeenCalledWith(config, null)
+        expect(_request).toHaveBeenCalledWith(config, null);
       });
 
     });

lib/ui/removable-label/docs/removable-label-ui-demo.html

@@ -0,0 +1,55 @@
+---
+title: Removable Labels
+---
+<div data-ng-controller="RemovableLabelController">
+  <div class="guide-example">
+    <form role="form">
+      <div class="row">
+        <div class="form-group col-sm-3">
+          <label for="newRemovableLabel">Label</label>
+          <input id="newRemovableLabel" type="text" class="form-control" data-ng-model="newRemovableLabel">
+        </div>
+        <div class="form-group col-sm-6">
+          <label for="newLabelType">Type</label>
+          <div id="newLabelType" class="btn-group input-group">
+            <button type="button" class="btn btn-default" data-ng-click="addLabel('label-default')">Default</button>
+            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              <span class="caret"></span>
+              <span class="sr-only">Toggle Dropdown</span>
+            </button>
+            <ul class="dropdown-menu">
+              <li><a data-ng-click="addLabel('label-unstyled')">Unstyled</a></li>
+              <li><a data-ng-click="addLabel('label-primary')">Primary</a></li>
+              <li><a data-ng-click="addLabel('label-success')">Success</a></li>
+              <li><a data-ng-click="addLabel('label-info')">Info</a></li>
+              <li><a data-ng-click="addLabel('label-warning')">Warning</a></li>
+              <li><a data-ng-click="addLabel('label-danger')">Danger</a></li>
+              <li><a data-ng-click="addLabel('label-brand')">Brand</a></li>
+              <li><a data-ng-click="addLabel('label-extra')">Extra</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <button type="button" class="btn btn-default btn-xs" data-ng-click="clearLabels()">Clear All</button>
+        <span data-ng-repeat="label in labels">
+          <span  class="label" data-ng-class="label.labelClass" data-av-removable-label data-on-remove="removeLabel" data-remove-value="$index">
+            <span data-ng-bind="label.value"></span>
+          </span>
+        </span>
+      </div>
+    </form>
+  </div>
+  <code class="language-markup">
+    <span data-ng-repeat="label in labels">
+      <span class="label"
+            data-ng-class="label.labelClass"
+            data-av-removable-label
+            data-on-remove="removeLabel"
+            data-remove-value="$index">
+        <span data-ng-bind="label.value"></span>
+      </span>
+    </span>
+  </code>
+</div>

lib/ui/removable-label/docs/removable-label-ui-demo.js

@@ -0,0 +1,30 @@
+(function(root) {
+
+  'use strict';
+
+  var availity = root.availity;
+
+  availity.demo.controller('RemovableLabelController', function($scope) {
+    $scope.labels = [
+      { value: 'Default', labelClass: 'label-default' },
+      { value: 'Primary', labelClass: 'label-primary' },
+      { value: 'Success', labelClass: 'label-success' },
+      { value: 'Info', labelClass: 'label-info' },
+      { value: 'Warning', labelClass: 'label-warning' },
+      { value: 'Danger', labelClass: 'label-danger' }
+    ];
+
+    $scope.addLabel = function(labelClass) {
+      $scope.labels.push({value: $scope.newRemovableLabel, labelClass: labelClass});
+    };
+
+    $scope.removeLabel = function(index) {
+      $scope.labels.splice(index, 1);
+    };
+
+    $scope.clearLabels = function() {
+      $scope.labels = [];
+    };
+  });
+
+})(window);

lib/ui/removable-label/removable-label-tpl.html

@@ -0,0 +1 @@
+<a data-ng-click="removeLabel()"><i class="icon icon-cancel"></i></a><span data-ng-transclude></span>

lib/ui/removable-label/removable-label.js

@@ -0,0 +1,29 @@
+(function(root) {
+  'use strict';
+
+  var availity = root.availity;
+
+  availity.ui.constant('AV_REMOVABLE_LABEL', {
+    TEMPLATE: 'ui/removable-label/removable-label-tpl.html'
+  });
+
+  availity.ui.directive('avRemovableLabel', function(AV_REMOVABLE_LABEL) {
+    return {
+      templateUrl: AV_REMOVABLE_LABEL.TEMPLATE,
+      transclude: true,
+      scope: {
+        removeValue: '=',
+        onRemove: '&'
+      },
+      link: function(scope, element, attrs) {
+        element.addClass('label-remove');
+        scope.removeLabel = function() {
+          if(!attrs.disabled) {
+            scope.onRemove()(scope.removeValue);
+          }
+        };
+      }
+    };
+  });
+
+})(window);

lib/ui/removable-label/tests/removable-label-spec.js

@@ -0,0 +1,59 @@
+/* global beforeEach, availity, expect, module, inject, describe, it */
+describe('avRemovableLabel', function() {
+
+  'use strict';
+
+  beforeEach(function() {
+    module('availity');
+    module('availity.ui');
+  });
+
+  beforeEach(inject(function($templateCache) {
+
+    $templateCache.put('ui/removable-label/removable-label-tpl.html', '');
+  }));
+
+  availity.mock.directiveSpecHelper();
+  var $el;
+
+  // jscs: disable
+  var fixtures = {
+    'default': '<div av-removable-label on-remove="demo.removeLabel" remove-value="1">New Label</div>',
+    'disabled': '<div av-removable-label on-remove="demo.removeLabel" remove-value="1" disabled="disabled">New Label</div>'
+  };
+  // jscs: enable
+
+  beforeEach(inject(function() {
+
+    availity.mock.$scope.demo = {};
+    availity.mock.$scope.demo.removeLabel = function() {};
+
+    spyOn(availity.mock.$scope.demo, 'removeLabel').and.callFake(function() {
+    });
+
+  }));
+
+  it('should add label-remove class', function() {
+
+    $el = availity.mock.compileDirective(fixtures['default']);
+
+    expect($el.hasClass('label-remove')).toBe(true);
+  });
+
+  it('should call remove label callback function with removed value', function() {
+
+    $el = availity.mock.compileDirective(fixtures['default']);
+
+    $el.data('$isolateScope').removeLabel();
+    expect(availity.mock.$scope.demo.removeLabel).toHaveBeenCalledWith(1);
+  });
+
+  it('should not call remove label callback function when disabled', function() {
+
+    $el = availity.mock.compileDirective(fixtures['disabled']);
+
+    $el.data('$isolateScope').removeLabel();
+    expect(availity.mock.$scope.demo.removeLabel).not.toHaveBeenCalled();
+  });
+
+});