@kigi/components 1.18.0 → 1.19.0-beta.1

package/package.json

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

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

@@ -50,7 +50,7 @@ class MbgAddressController {
     public $timeout,
     public mbgAddressService: MbgAddressService,
     public $uibModal,
-  ) {}
+  ) { }
 
   $onInit() {
     if (this.capitalize && this.address) {
@@ -93,8 +93,8 @@ class MbgAddressController {
             state: this.address.state
               ? this.address.state
               : this.address.uf && this.address.uf.initial
-              ? this.address.uf.initial
-              : '',
+                ? this.address.uf.initial
+                : '',
           }
           if (this.ngModel) {
             this.ngModel.EX = (this.ngModel.country || '').toLowerCase() !== 'brasil'
@@ -236,13 +236,10 @@ class MbgAddressController {
 
   createFullName() {
     if (this.address.premisse) {
-      this.fullAddress = `${
-        this.address.premisse ? this.address.premisse : this.ngModel.premisse
-      } - ${
-        this.address.neighbourhood ? this.address.neighbourhood : this.ngModel.neighbourhood
-      }, ${this.address.localization ? this.address.localization : this.ngModel.localization} - ${
-        this.ngModel.state
-      }, ${this.ngModel.country}`
+      this.fullAddress = `${this.address.premisse ? this.address.premisse : this.ngModel.premisse
+        } - ${this.address.neighbourhood ? this.address.neighbourhood : this.ngModel.neighbourhood
+        }, ${this.address.localization ? this.address.localization : this.ngModel.localization} - ${this.ngModel.state
+        }, ${this.ngModel.country}`
     }
   }
 
@@ -289,8 +286,8 @@ class MbgAddressController {
       countryCode: this.ngModel.countryCode,
       zipCode: this.address.zipCode ? this.address.zipCode : this.ngModel.zipCode.replace('-', ''),
       neighbourhood: this.address.neighbourhood
-        ? this.address.neighbourhood
-        : this.ngModel.neighbourhood,
+        ? this.ngModel.neighbourhood
+        : this.address.neighbourhood,
       localization: this.ngModel.localization,
       premisse: this.address.premisse
         ? this.address.premisse
@@ -575,6 +572,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,9 +1,14 @@
 <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"
        ng-class="{'disabled': $ctrl.ngDisabled, 'inline-mode-wrapper': $ctrl.inlineMode}">
+
     <div class="mbg-multi-select-content">
       <ul class="items-selected">
         <li ng-repeat="item in $ctrl.ngModel track by $index"
@@ -37,7 +42,10 @@
                   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

@@ -1,7 +1,6 @@
 .mbg-multi-select-wrapper {
 
   position: relative;
-
   display: flex;
   align-items: center;
 
@@ -9,6 +8,8 @@
     position: absolute;
     font-size: 20px;
 
+    z-index: 10;
+
     background: white;
     overflow: hidden;
     height: 20px;
@@ -21,183 +22,271 @@
     }
   }
 
-  .visibility {
-    display: none;
-  }
-  
-  &:hover {
-    .visibility {
-        display: block;
-      }
-  }
-
   .arrow-left {
-    left: 8px;
+    animation: left-exit .2s linear forwards ;
   }
 
   .arrow-right {
-    right: 8px;
+    animation: right-exit .2s linear forwards ;
   }
   
-  .mbg-multi-select-scroll {
-    border: 1px solid #ddd;
-    background: #fff;
-    border-radius: 5px;
-    padding: 8px;
-    -ms-flex: 1 1;
-    flex: 1 1;
-    outline: none;
-    width: inherit;
-    display: inline-flex;
-    height: 44px;
-    align-items: center;
-    overflow: visible;
-    max-width: 100%;
-    overflow: scroll;
-    overflow: -moz-scrollbars-none;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    padding-top: 0;
-    padding-bottom: 0;
-    width: 100%;
+  &:hover {
+    .arrow-left {
+      animation: left-enter .3s linear forwards;
+
+    }
+    .arrow-right {
+      animation: right-enter .3s linear forwards;
+    }
+  }
+  
+.mbg-multi-select-scroll {
+  border: 1px solid #ddd;
+  background: #fff;
+  border-radius: 5px;
+  padding: 8px;
+  -ms-flex: 1 1;
+  flex: 1 1;
+  outline: none;
+  width: inherit;
+  display: inline-flex;
+  height: 44px;
+  align-items: center;
+  overflow: visible;
+  max-width: 100%;
+  overflow: scroll;
+  overflow: -moz-scrollbars-none;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  padding-top: 0;
+  padding-bottom: 0;
+  width: 100%;
+
+  &.inline-mode-wrapper {
+    height: auto;
+    max-height: 284px;
 
-    &.inline-mode-wrapper {
-      height: auto;
-      max-height: 284px;
+    .mbg-multi-select-content {
+      flex-direction: column;
+      width: 100%;
 
-      .mbg-multi-select-content {
+      mbg-select {
+        width: 100%;
+      }
+
+      ul {
         flex-direction: column;
         width: 100%;
+        max-height: 234px;
+        overflow-y: auto;
+        overflow-x: hidden;
 
-        mbg-select {
+        li {
           width: 100%;
-        }
+          margin-top: 4px;
+          position: relative;
+          min-height: 28px;
 
-        ul {
-          flex-direction: column;
-          width: 100%;
-          max-height: 234px;
-          overflow-y: auto;
-          overflow-x: hidden;
-
-          li {
-            width: 100%;
-            margin-top: 4px;
-            position: relative;
-            min-height: 28px;
-
-            svg {
-              position: absolute;
-              right: 6px;
-            }
+          svg {
+            position: absolute;
+            right: 6px;
+          }
+
+          label {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            padding-right: 14px;
 
-            label {
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              padding-right: 14px;
-
-              &:hover {
-                &::after {
-                  content: attr(data-text);
-                  overflow: visible;
-                  text-overflow: inherit;
-                  background: #fff;
-                  position: absolute;
-                  width: auto;
-                  max-width: 25rem;
-                  border: 1px solid #eaebec;
-                  border-radius: 4px;
-                  padding: 0 1rem;
-                  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-                  white-space: normal;
-                  word-wrap: break-word;
-                  display: block;
-                  color: #666;
-                  font-weight: 500;
-                  margin-top: -20px;
-                  z-index: 100;
-                }
+            &:hover {
+              &::after {
+                content: attr(data-text);
+                overflow: visible;
+                text-overflow: inherit;
+                background: #fff;
+                position: absolute;
+                width: auto;
+                max-width: 25rem;
+                border: 1px solid #eaebec;
+                border-radius: 4px;
+                padding: 0 1rem;
+                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+                white-space: normal;
+                word-wrap: break-word;
+                display: block;
+                color: #666;
+                font-weight: 500;
+                margin-top: -20px;
+                z-index: 100;
               }
             }
           }
         }
       }
     }
+  }
 
-    &.disabled {
-      background-color: #f5f5f5;
-      border: 1px solid #ddd !important;
-    }
+  &.disabled {
+    background-color: #f5f5f5;
+    border: 1px solid #ddd !important;
+  }
 
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    .mbg-multi-select-content {
-      display: inline-flex;
-      align-items: center;
-    }
-    input {
-      width: 100%;
-      border: none;
-      background-color: transparent;
-      padding: 0 0 0 10px;
-      &:focus {
-        outline: none;
-        box-shadow: none;
-      }
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  .mbg-multi-select-content {
+    display: inline-flex;
+    align-items: center;
+  }
+  input {
+    width: 100%;
+    border: none;
+    background-color: transparent;
+    padding: 0 0 0 10px;
+    &:focus {
+      outline: none;
+      box-shadow: none;
     }
-    ul {
-      &.items-selected {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        display: flex;
-        width: fit-content;
+  }
+  ul {
+    &.items-selected {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      width: fit-content;
+      min-width: fit-content;
+      li {
         min-width: fit-content;
-        li {
-          min-width: fit-content;
-          background: #e6e6e6;
-          border-radius: 4px;
-          height: 28px;
+        background: #e6e6e6;
+        border-radius: 4px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0px 5px 0px 8px;
+        color: #666;
+        margin-right: 8px;
+        font-size: 14px;
+        width: max-content;
+        cursor: move;
+        font-weight: 500;
+        * {
+          user-select: none;
+        }
+        svg {
+          cursor: pointer;
+          width: 14px;
+          fill: currentColor;
+          margin-left: 4px;
           display: flex;
           align-items: center;
-          justify-content: center;
-          padding: 0px 5px 0px 8px;
-          color: #666;
-          margin-right: 8px;
-          font-size: 14px;
-          width: max-content;
-          cursor: move;
-          font-weight: 500;
-          * {
-            user-select: none;
-          }
-          svg {
-            cursor: pointer;
-            width: 14px;
-            fill: currentColor;
-            margin-left: 4px;
-            display: flex;
-            align-items: center;
-            pointer-events: all;
-          }
-          &.dragging {
-            opacity: 0.6;
-          }
-          &.over {
-            background: red;
-          }
+          pointer-events: all;
+        }
+        &.dragging {
+          opacity: 0.6;
+        }
+        &.over {
+          background: red;
         }
       }
     }
-    .mbg-select-input-fake {
-      flex: 1;
-      min-width: 191.03px;
-      border: none;
-    }
-    .mbg-select-wrapper .mbg-icon-select {
-      display: none;
-    }
+  }
+  .mbg-select-input-fake {
+    flex: 1;
+    min-width: 191.03px;
+    border: none;
+  }
+  .mbg-select-wrapper .mbg-icon-select {
+    display: none;
+  }
+}
+
+@keyframes right-enter {
+  0% {
+   opacity: 0;
+   right: 0px;
+  }
+  25% {
+   right: 2px;
+  }
+  50% {
+   right: 4px;
+  }
+  75% {
+   right: 6px;
+  }
+  100% {
+   opacity: 1;
+   right: 8px;
+  }
+}
+
+@keyframes right-exit {
+  0% {
+   opacity: 0;
+   right: 8px;
+  }
+  25% {
+    right: 6px;
+    opacity: .5;
+  }
+  50% {
+    right: 4px;
+    opacity: .3;
+  }
+  75% {
+    right: 2px;
+    opacity: .1;
+    
+  }
+  100% {
+    right: 0px;
+    opacity: 0;
+  }
+}
+
+@keyframes left-enter {
+  0% {
+   opacity: 0;
+   left: 0px;
+  }
+  25% {
+   left: 2px;
+  }
+  50% {
+   left: 4px;
+  }
+  75% {
+   left: 6px;
+  }
+  100% {
+   opacity: 1;
+   left: 8px;
+  }
+}
+
+@keyframes left-exit {
+  0% {
+   opacity: 0;
+   left: 8px;
+  }
+  25% {
+    left: 6px;
+    opacity: .5;
+  }
+  50% {
+    left: 4px;
+    opacity: .3;
+  }
+  75% {
+    left: 2px;
+    opacity: .1;
+    
+  }
+  100% {
+    left: 0px;
+    opacity: 0;
   }
 }
+}

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() {
@@ -257,6 +266,10 @@ class MbgMultiSelectController {
       this.ngModel = Array.from(this.$element.find('ul.items-selected li')).map(
         (liElement: HTMLElement) => angular.element(liElement).scope().item,
       )
+
+      if (this.ngChange) {
+        this.ngChange({ value: this.ngModel })
+      }
     })
   }
 }
@@ -279,6 +292,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 {