@kigi/components 1.4.6 → 1.5.0

package/package.json

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

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

@@ -88,12 +88,17 @@
     <ul class="ul-options"
         vs-repeat="{size: {{$ctrl.transcludeSize || 'null'}}}">
       <li ng-mousedown="$ctrl.selectOption(item)"
+          class="mbg-item-select"
           ng-style="$ctrl.transcludeSize && {'min-height': $ctrl.transcludeSize}"
           ng-repeat="item in $ctrl.data">
         <div ng-if="$ctrl.transcludeTemplate"
              mbg-dynamic-html="$ctrl.transcludeTemplate"></div>
-        <div ng-if="!$ctrl.transcludeTemplate && $ctrl.labelValue">{{item[$ctrl.labelValue]}}</div>
-        <div ng-if="!$ctrl.transcludeTemplate && !$ctrl.labelValue">{{item}}</div>
+        <div ng-if="!$ctrl.transcludeTemplate && $ctrl.labelValue"><span
+                ng-class="{'mbg-item-animation': item[$ctrl.labelValue].length > 30}">{{item[$ctrl.labelValue]}}</span>
+        </div>
+        <div ng-if="!$ctrl.transcludeTemplate && !$ctrl.labelValue"><span
+                ng-class="{'mbg-item-animation': item.length > 30}">{{item}}</span>
+        </div>
         <i title="Favoritar"
            ng-if="$ctrl.enableFavorite"
            ng-mousedown="$ctrl.favorite($event, item)"
@@ -115,4 +120,4 @@
       </li>
     </ul>
   </div>
-</div>
+</div>

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

@@ -1,5 +1,6 @@
 .mbg-select-wrapper {
   position: relative;
+
   .mbg-select-input-fake {
     border: 1px solid #ddd;
     background: #fff;
@@ -131,7 +132,8 @@
       transform: rotate(40deg);
       opacity: 0.4;
 
-      &:hover, &.fixed {
+      &:hover,
+      &.fixed {
         transform: rotate(0deg);
         opacity: 1;
       }
@@ -170,3 +172,35 @@ mbg-select[disabled="disabled"] {
     font-weight: 500;
   }
 }
+
+.mbg-item-select {
+  span.mbg-item-animation {
+    left: 0;
+    transition-delay: 1s;
+  }
+
+  &:hover {
+    text-overflow: initial;
+
+    span.mbg-item-animation {
+      display: inline-block;
+      position: relative;
+      animation: animation-select-label 5s infinite;
+    }
+  }
+}
+
+@keyframes animation-select-label {
+  0% {
+    transform: translateX(0%);
+  }
+  15% {
+    transform: translateX(0%);
+  }
+  80% {
+    transform: translateX(-50%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}

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

@@ -41,6 +41,7 @@ class MbgSelectController {
   private fixedOptionId: any
   private fixedValue: string
   private transcludeSize: any
+  private getCustomModel: Function
 
   constructor(
     public $scope,
@@ -387,7 +388,7 @@ class MbgSelectController {
   }
 
   setModel() {
-    this.$timeout(() => {
+    this.$timeout(async () => {
       if (this.fetch) {
         const currentOption = this.getOptionFocused()
         if (currentOption[0]) {
@@ -399,10 +400,10 @@ class MbgSelectController {
               item = isNaN(this.inputValue) ? this.inputValue : Number(this.inputValue)
             }
           }
-          this.updateModelValue(this.ngValue ? item[this.ngValue] : item)
+          await this.updateModelValue(this.ngValue ? item[this.ngValue] : item)
         }
       } else {
-        this.updateModelValue(this.inputValue)
+        await this.updateModelValue(this.inputValue)
       }
       this.executeCallback()
       if (this.onSelect) {
@@ -419,12 +420,12 @@ class MbgSelectController {
     }
   }
 
-  selectOption(item, isNew?: boolean) {
+  async selectOption(item, isNew?: boolean) {
     this.data = []
     this.executeCallback(isNew)
     this.pressEnter = false
     this.hasFocus = false
-    this.updateModelValue(this.ngValue ? item[this.ngValue] : item)
+    await this.updateModelValue(this.ngValue ? item[this.ngValue] : item)
     if (this.onSelect) {
       this.onSelect({ value: this.ngModel })
     }
@@ -516,8 +517,41 @@ class MbgSelectController {
   }
 
   updateModelValue(value) {
-    this.ngModel = value
-    this.updateInputValue()
+    return new Promise((resolve) => {
+      if (this.getCustomModel) {
+        const response: any = this.getCustomModel({ value })
+        this.isLoading = true
+        if (response && response.then) {
+          if (response && response.then) {
+            response
+              .then((responseCustomModel) => {
+                this.ngModel =
+                  responseCustomModel && responseCustomModel.data
+                    ? responseCustomModel.data
+                    : responseCustomModel
+                this.updateInputValue()
+                this.isLoading = false
+                resolve(true)
+                return
+              })
+              .catch(() => {
+                this.isLoading = false
+                resolve(true)
+              })
+          }
+        } else {
+          this.ngModel = response
+          this.updateInputValue()
+          this.isLoading = false
+          resolve(true)
+          return
+        }
+      } else {
+        this.ngModel = value
+        this.updateInputValue()
+        resolve(true)
+      }
+    })
   }
 
   updateInputValue() {
@@ -632,6 +666,7 @@ const mbgSelect = {
     fixedOptionId: '=?',
     callbackAddFixedOption: '&?',
     transcludeSize: '=?',
+    getCustomModel: '&?',
   },
   controller: MbgSelectController,
   template,

package/src/components/mbg-status-label/mbg-status-label.ts

@@ -47,6 +47,7 @@ class MbgStatusLabelController {
         this.label = 'Autorizada'
         break
       case 'CANCELADA':
+      case 'CANCELLED':
         this.label = 'Cancelada'
         break
       case 'REJEITADA':
@@ -91,6 +92,7 @@ class MbgStatusLabelController {
       case 'REJEITADA':
       case 'PENDING_REJECT':
       case 'REJECTED':
+      case 'CANCELLED':
         this.labelClass = 'error'
         break
       case 'PASSED_ALONG':