@kigi/components 1.18.0 → 1.19.0-beta.2

package/package.json

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

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

@@ -575,6 +575,7 @@ class MbgAddressController {
         response.zipCode = response.zipCode || ''
         this.address.country = response.country || 'Brasil'
         this.address.premisse = response.premisse || this.address.premisse
+        this.address.neighbourhood = response.neighbourhood || 'Centro'
         this.ngModel = response
         if (!EX) {
           this.$timeout(() => this.searchAddressInfo(JSON.parse(JSON.stringify(response))))

package/src/components/mbg-address/modals/mbg-address-manual/mbg-address-manual.html

@@ -1,76 +1,112 @@
 <div class="mbg-address-manual-wrapper">
 
   <form name="manualAddress">
-    <div class="row" ng-if="$ctrl.EX">
+    <div class="row"
+         ng-if="$ctrl.EX">
       <div class="col-md-6">
         <label>País</label>
-        <mbg-select ng-model="$ctrl.entity.country" placeholder="Brasil" ng-if="$ctrl.countries"
-          on-select="$ctrl.selectCountry(value)" on-unselect="$ctrl.unselectCountry()" label="label" ng-value="label"
-          fetch="$ctrl.countries"></mbg-select>
+        <mbg-select ng-model="$ctrl.entity.country"
+                    placeholder="Brasil"
+                    ng-if="$ctrl.countries"
+                    on-select="$ctrl.selectCountry(value)"
+                    on-unselect="$ctrl.unselectCountry()"
+                    label="label"
+                    ng-value="label"
+                    fetch="$ctrl.countries"></mbg-select>
       </div>
       <div class="col-md-6">
         <label>CEP</label>
         <div class="mbg-input-wrapper input-cep-wrapper">
-          <input type="text" ng-model="$ctrl.entity.zipCode" ng-change="$ctrl.validateLenth($event)"
-            placeholder="99999" />
+          <input type="text"
+                 ng-model="$ctrl.entity.zipCode"
+                 ng-change="$ctrl.validateLenth($event)"
+                 placeholder="99999" />
         </div>
       </div>
     </div>
     <div class="row">
-      <div class="col-md-4" ng-if="!$ctrl.EX">
+      <div class="col-md-4"
+           ng-if="!$ctrl.EX">
         <label>CEP</label>
         <div class="mbg-input-wrapper input-cep-wrapper">
-          <input autocomplete="{{ $ctrl.autocompleteValue }}" autocorrect="{{ $ctrl.autocompleteValue }}"
-            ng-class="{'mbg-error': (!$ctrl.entity.zipCode && $ctrl.inputErrors) || $ctrl.notFoundCep}"
-            mbg-error="!$ctrl.entity.zipCode || $ctrl.notFoundCep" mbg-error-when="$ctrl.inputErrors"
-            mbg-error-message="É necessário informar o CEP" spellcheck="false" type="text"
-            ng-change="$ctrl.onChangeCep()" ng-model="$ctrl.entity.zipCode" placeholder="99999-999" ui-br-cep-mask />
+          <input autocomplete="{{ $ctrl.autocompleteValue }}"
+                 autocorrect="{{ $ctrl.autocompleteValue }}"
+                 ng-class="{'mbg-error': (!$ctrl.entity.zipCode && $ctrl.inputErrors) || $ctrl.notFoundCep}"
+                 mbg-error="!$ctrl.entity.zipCode || $ctrl.notFoundCep"
+                 mbg-error-when="$ctrl.inputErrors"
+                 mbg-error-message="É necessário informar o CEP"
+                 spellcheck="false"
+                 type="text"
+                 ng-change="$ctrl.onChangeCep()"
+                 ng-model="$ctrl.entity.zipCode"
+                 placeholder="99999-999"
+                 ui-br-cep-mask />
         </div>
       </div>
       <div ng-class="$ctrl.EX ? 'col-md-12' : 'col-md-8'">
-        <label>Logradouro</label>
-        <mbg-input-text capitalize="true" ng-model="$ctrl.entity.premisse" placeholder="Ex. Av Duque de Caxias">
+        <label>Logradouros</label>
+        <mbg-input-text capitalize="true"
+                        ng-model="$ctrl.entity.premisse"
+                        placeholder="Ex. Av Duque de Caxias">
         </mbg-input-text>
       </div>
     </div>
     <div class="row">
       <div class="col-md-12">
         <label>Bairro</label>
-        <mbg-input-text capitalize="true" ng-model="$ctrl.entity.neighbourhood" placeholder="Ex. Jardim América">
+        <mbg-input-text capitalize="true"
+                        ng-model="$ctrl.entity.neighbourhood"
+                        placeholder="Ex. Jardim América">
         </mbg-input-text>
       </div>
     </div>
     <div class="row">
-      <div class="col-md-6" ng-if="!$ctrl.EX">
+      <div class="col-md-6"
+           ng-if="!$ctrl.EX">
         <label>Estado</label>
-        <mbg-select capitalize="true" ng-model="$ctrl.entity.state" fetch="$ctrl.searchState(query)" label="name"
-          ng-value="shortName" placeholder="Ex. Paraná"></mbg-select>
+        <mbg-select capitalize="true"
+                    ng-model="$ctrl.entity.state"
+                    fetch="$ctrl.searchState(query)"
+                    label="name"
+                    ng-value="shortName"
+                    placeholder="Ex. Paraná"></mbg-select>
       </div>
-      <div class="col-md-6" ng-if="$ctrl.EX">
+      <div class="col-md-6"
+           ng-if="$ctrl.EX">
         <label>Estado</label>
-        <mbg-input-text capitalize="true" ng-model="$ctrl.entity.state" placeholder="Ex. Maringá"></mbg-input-text>
+        <mbg-input-text capitalize="true"
+                        ng-model="$ctrl.entity.state"
+                        placeholder="Ex. Maringá"></mbg-input-text>
       </div>
       <div class="col-md-6">
         <label>Cidade</label>
-        <mbg-input-text capitalize="true" ng-model="$ctrl.entity.localization" placeholder="Ex. Maringá">
+        <mbg-input-text capitalize="true"
+                        ng-model="$ctrl.entity.localization"
+                        placeholder="Ex. Maringá">
         </mbg-input-text>
       </div>
     </div>
     <div class="row">
       <div class="col-md-4">
         <label>Número</label>
-        <mbg-input-text ng-model="$ctrl.entity.number" placeholder="Ex. 36"></mbg-input-text>
+        <mbg-input-text ng-model="$ctrl.entity.number"
+                        placeholder="Ex. 36"></mbg-input-text>
       </div>
       <div class="col-md-8">
         <label>Complemento</label>
-        <mbg-input-text capitalize="true" ng-model="$ctrl.entity.information" placeholder="Ex. Restaurante X">
+        <mbg-input-text capitalize="true"
+                        ng-model="$ctrl.entity.information"
+                        placeholder="Ex. Restaurante X">
         </mbg-input-text>
       </div>
     </div>
   </form>
 
   <div class="content-confirm-upload">
-    <mbg-btn-form label="Salvar" loading="$ctrl.loading" ng-click="$ctrl.finish(manualAddress.$valid)"></mbg-btn-form>
-    <a class="btn-cancel" ng-click="$ctrl.dismiss()">Cancelar</a>
+    <mbg-btn-form label="Salvar"
+                  loading="$ctrl.loading"
+                  ng-click="$ctrl.finish(manualAddress.$valid)"></mbg-btn-form>
+    <a class="btn-cancel"
+       ng-click="$ctrl.dismiss()">Cancelar</a>
   </div>
 </div>

package/src/components/mbg-address/modals/mbg-address-manual/mbg-address-manual.ts

@@ -38,15 +38,16 @@ class MbgAddressManualController {
     public EX,
     public notFound,
     public address,
-  ) {}
+  ) { }
 
-  $onInit() {
+  async $onInit() {
     this.navigatorData = detect()
     this.createAutocompleteDisabled()
-    this.loadStates()
+    await this.loadStates()
     this.loadCountries()
     if (this.address) {
       this.entity = this.address
+      this.searchAddressByCEP()
     }
   }
 
@@ -116,9 +117,9 @@ class MbgAddressManualController {
           this.entity = {
             zipCode: this.entity.zipCode.replace('-', ''),
             neighbourhood: response.data.bairro ? response.data.bairro.trim() : 'Centro',
-            localization: this.entity.localization
-              ? this.entity.localization
-              : (response.data.localidade || '').trim(),
+            localization: response.data.localidade
+              ? (response.data.localidade || '').trim()
+              : this.entity.localization,
             premisse: premisse || 'CEP Único',
             number: this.entity.number || '',
             information: this.entity.information || '',
@@ -148,8 +149,9 @@ class MbgAddressManualController {
     )
   }
 
+
   loadStates = () => {
-    this.$http.get(`https://servicodados.ibge.gov.br/api/v1/localidades/estados`).then((resp) => {
+    return this.$http.get(`https://servicodados.ibge.gov.br/api/v1/localidades/estados`).then((resp) => {
       this.states = resp.data.map((city) => {
         return {
           id: city.id,

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,8 @@ class MbgMultiSelectController {
   private enableFavorite: boolean
   private stepScrollSize: any
   private showScrollArrows: boolean
+  private onRemoveItem: Function
+  private index
 
   constructor(public $scope, public $element, public $attrs, public $timeout) {}
 
@@ -30,6 +32,8 @@ class MbgMultiSelectController {
       this.stepScrollSize = 200
     }
 
+    this.index = this.index || 0
+
     this.widthEllipsis = this.widthEllipsis || '154px'
     this.$scope.$watch(
       '$ctrl.ngModel',
@@ -53,7 +57,7 @@ class MbgMultiSelectController {
 
   verifyScroll() {
     this.$timeout(() => {
-      const elm = angular.element(`.mbg-multi-select-scroll`)[0]
+      const elm = angular.element(`.mbg-multi-select-scroll`)[this.index]
       this.$timeout(() => {
         ScrollAnimate.scrollLeftTo(elm, elm.scrollWidth, 350)
       }, 100)
@@ -62,7 +66,7 @@ class MbgMultiSelectController {
 
   scrollToLeft() {
     this.$timeout(() => {
-      const elm: Element = angular.element(`.mbg-multi-select-scroll`)[0]
+      const elm: Element = angular.element(`.mbg-multi-select-scroll`)[this.index]
       this.$timeout(() => {
         const value = +elm.scrollLeft - this.stepScrollSize
         elm.scroll({
@@ -75,8 +79,7 @@ class MbgMultiSelectController {
 
   scrollToRight() {
     this.$timeout(() => {
-      const elm = angular.element(`.mbg-multi-select-scroll`)[0]
-
+      const elm = angular.element(`.mbg-multi-select-scroll`)[this.index]
       this.$timeout(() => {
         const value = +elm.scrollLeft + this.stepScrollSize
         elm.scroll({
@@ -119,6 +122,8 @@ class MbgMultiSelectController {
   }
 
   remoteItem(index) {
+    const item = this.ngModel[index]
+
     this.ngModel.splice(index, 1)
     this.verifyScroll()
     this.$timeout(() => {
@@ -126,6 +131,10 @@ class MbgMultiSelectController {
         this.ngChange()
       }
     })
+
+    if (this.onRemoveItem) {
+      this.onRemoveItem({ item, index })
+    }
   }
 
   stopDragEvents() {
@@ -279,6 +288,8 @@ const mbgMultiSelect = {
     enableFavorite: '=?',
     stepScrollSize: '=?',
     showScrollArrows: '=?',
+    onRemoveItem: '&?',
+    index: '=?',
   },
   template,
   controller: MbgMultiSelectController,

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

@@ -56,7 +56,7 @@ class MbgSelectController {
     public $timeout,
     public $compile,
     public $transclude,
-  ) {}
+  ) { }
 
   $onInit() {
     this.fixedValue = this.ngValue || 'id'
@@ -409,7 +409,8 @@ class MbgSelectController {
               item = isNaN(this.inputValue) ? this.inputValue : Number(this.inputValue)
             }
           }
-          await this.updateModelValue(this.ngValue ? item[this.ngValue] : item)
+          this.selectOption(item)
+          return
         }
       } else {
         await this.updateModelValue(this.inputValue)
@@ -458,6 +459,7 @@ class MbgSelectController {
           value &&
           (!angular.equals(value, this.ngModel) || !angular.equals(value, this.inputValue))
         ) {
+          this.inputValue = ''
           this.updateInputValue()
         }
       }

package/src/helpers/interfaces/confirm-alert.ts

@@ -21,4 +21,5 @@ export interface ConfirmAlert {
   blockSpecialChars?: boolean
   buttons?: ButtonConfirmModal[]
   focusClose?: boolean
+  showCloseButton?: boolean
 }

package/src/helpers/modals/mbg-confirm/mbg-confirm-alert.html

@@ -56,6 +56,7 @@
     </svg>
   </div>
   <div class="information-wrapper">
+    <button ng-if="$ctrl.config.showCloseButton" class="close-button" ng-click="$ctrl.dismiss()">x</button>
     <h3>{{$ctrl.config.title}}</h3>
     <p ng-if="$ctrl.config.message"
        class="message">{{$ctrl.config.message}}</p>

package/src/helpers/modals/mbg-confirm/mbg-confirm-alert.scss

@@ -57,6 +57,23 @@
         text-align: center;
       }
     }
+
+    .close-button {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+
+      border: none;
+      background-color: transparent;
+      font-weight: bold;
+      color: var(--neutral2);
+      border-radius: 999px;
+      transition:all .500ms  ease-in-out;
+
+      &:hover {
+        box-shadow:1px 1px 5px var(--neutral2);
+      }
+    }
   }
 
   .mbg-alert-icon {