@kigi/components 1.17.1-beta.6 → 1.18.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kigi/components",
-  "version": "1.17.1-beta.6",
+  "version": "1.18.0-beta.1",
   "description": "@kigi/components",
   "main": "src/components/index.ts",
   "scripts": {

package/src/components/mbg-multi-select/mbg-multi-select.html

@@ -1,5 +1,5 @@
 <div class="mbg-multi-select-wrapper">
-  <span ng-if="$ctrl.showScrollArrows" class="arrow-left visibility" ng-click="$ctrl.scrollToLeft()">
+  <span ng-if="$ctrl.showScrollArrows" class="arrow-left" ng-click="$ctrl.scrollToLeft()">
     <i class="fas fa-chevron-circle-left"></i>
   </span>
   <div class="mbg-multi-select-scroll"
@@ -37,7 +37,7 @@
                   label="{{ $ctrl.label }}"></mbg-select>
     </div>
   </div>
-  <span ng-if="$ctrl.showScrollArrows" class="arrow-right visibility" ng-click="$ctrl.scrollToRight()">
+  <span ng-if="$ctrl.showScrollArrows" class="arrow-right" ng-click="$ctrl.scrollToRight()">
     <i class="fas fa-chevron-circle-right"></i>
   </span>
 </div>

package/src/components/mbg-multi-select/mbg-multi-select.scss

@@ -9,6 +9,8 @@
     position: absolute;
     font-size: 20px;
 
+    z-index: 10;
+
     background: white;
     overflow: hidden;
     height: 20px;
@@ -21,22 +23,28 @@
     }
   }
 
-  .visibility {
-    display: none;
-  }
-  
-  &:hover {
-    .visibility {
-        display: block;
-      }
-  }
-
   .arrow-left {
-    left: 8px;
-  }
+      left: 0px;
+      transition: transform .5s;
+      transform: translateX(-40px);
+    }
 
   .arrow-right {
-    right: 8px;
+    right: 0px;
+    transition: transform .5s;
+    transform: translateX(40px);
+  }
+
+  
+  &:hover {
+    .arrow-left {
+      transition: transform  .3s;
+      transform: translateX(8px);
+    }
+    .arrow-right {
+      transition: transform  .3s;
+      transform: translateX(-8px);
+    }
   }
   
   .mbg-multi-select-scroll {

package/src/components/mbg-multi-select/mbg-multi-select.ts

@@ -22,6 +22,7 @@ class MbgMultiSelectController {
   private enableFavorite: boolean
   private stepScrollSize: any
   private showScrollArrows: boolean
+  private onRemoveItem: Function
 
   constructor(public $scope, public $element, public $attrs, public $timeout) {}
 
@@ -119,6 +120,8 @@ class MbgMultiSelectController {
   }
 
   remoteItem(index) {
+    const item = this.ngModel[index]
+
     this.ngModel.splice(index, 1)
     this.verifyScroll()
     this.$timeout(() => {
@@ -126,6 +129,10 @@ class MbgMultiSelectController {
         this.ngChange()
       }
     })
+
+    if (this.onRemoveItem) {
+      this.onRemoveItem({ item, index })
+    }
   }
 
   stopDragEvents() {
@@ -279,6 +286,7 @@ const mbgMultiSelect = {
     enableFavorite: '=?',
     stepScrollSize: '=?',
     showScrollArrows: '=?',
+    onRemoveItem: '&?',
   },
   template,
   controller: MbgMultiSelectController,