added chip component #624

client/core/src/components/chip/index.html

@@ -1,7 +1,7 @@
 <div>
     <span ng-class="{'mdl-chip--deletable': !$ctrl.disabled}" class="mdl-chip">
         <span class="mdl-chip__text" ng-transclude></span>
-        <button ng-show="!$ctrl.disabled" type="button" class="mdl-chip__action">
+        <button ng-click="$ctrl.remove()" ng-show="!$ctrl.disabled" type="button" class="mdl-chip__action">
             <i class="material-icons">cancel</i>
         </button>
     </span>

client/core/src/components/chip/index.js

@@ -6,12 +6,14 @@ export default class Chip {
         $transclude($scope.$parent, clone => {
             angular.element($element[0].querySelector('div')).append(clone);
         });
-    /*     this.mdlElement = this.element.querySelector('.mdl-slider');
-        componentHandler.upgradeElement(this.mdlElement); */
-      /*   this.mdlElement.addEventListener('change', () => {
-            this._value = this.input.value;
-            this.$.$applyAsync();
-        }); */
+    }
+
+/**
+ * Remove chip event
+ */
+    remove() {
+        if (this.onRemove)
+            this.onRemove();
     }
 }
 
@@ -22,6 +24,7 @@ ngModule.component('vnChip', {
     controller: Chip,
     transclude: true,
     bindings: {
-        disabled: '<?'
+        disabled: '<?',
+        onRemove: '&?'
     }
 });

client/core/src/components/chip/index.spec.js

@@ -0,0 +1,31 @@
+import './index.js';
+import template from './index.html';
+
+describe('Component vnChip', () => {
+    let $element;
+    let $scope;
+    let $httpBackend;
+    let controller;
+
+    beforeEach(() => {
+        angular.mock.module('client');
+    });
+
+    beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_, _$timeout_) => {
+        $scope = $rootScope.$new();
+        $element = angular.element(`<div>${template}</div>`);
+        $httpBackend = _$httpBackend_;
+        $httpBackend.when('GET', /\/locale\/\w+\/[a-z]{2}\.json/).respond({});
+        controller = _$componentController_('vnChip', {$element, $scope, $httpBackend, $transclude: () => {}});
+    }));
+
+    describe('remove()', () => {
+        it(`should call onRemove()`, () => {
+            controller.onRemove = () => {};
+            spyOn(controller, 'onRemove');
+            controller.remove();
+
+            expect(controller.onRemove).toHaveBeenCalledWith();
+        });
+    });
+});

client/core/src/components/chip/style.scss

@@ -2,6 +2,10 @@
 
 vn-chip {
     .mdl-chip {
+        background-color: rgba($main-01, 0.9);
+    }
+
+    .mdl-chip:active {
         background-color: $main-01
     }
 }