@kigi/components 1.19.0 → 1.19.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kigi/components",
-  "version": "1.19.0",
+  "version": "1.19.2",
   "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,11 +236,17 @@ 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}`
     }
+    console.log('this.address.neighbourhood', this.address.neighbourhood);
+    console.log('this.address.neighbourhood', this.ngModel.neighbourhood);
+
   }
 
   getPremisseType(str) {
@@ -286,8 +292,8 @@ class MbgAddressController {
       countryCode: this.ngModel.countryCode,
       zipCode: this.address.zipCode ? this.address.zipCode : this.ngModel.zipCode.replace('-', ''),
       neighbourhood: this.address.neighbourhood
-        ? this.ngModel.neighbourhood
-        : this.address.neighbourhood,
+        ? this.address.neighbourhood
+        : this.ngModel.neighbourhood,
       localization: this.ngModel.localization,
       premisse: this.address.premisse
         ? this.address.premisse

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" 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" 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;
 
@@ -24,188 +23,270 @@
   }
 
   .arrow-left {
-      left: 0px;
-      transition: transform .5s;
-      transform: translateX(-40px);
-    }
+    animation: left-exit .2s linear forwards ;
+  }
 
   .arrow-right {
-    right: 0px;
-    transition: transform .5s;
-    transform: translateX(40px);
+    animation: right-exit .2s linear forwards ;
   }
-
   
   &:hover {
     .arrow-left {
-      transition: transform  .3s;
-      transform: translateX(8px);
+      animation: left-enter .3s linear forwards;
+
     }
     .arrow-right {
-      transition: transform  .3s;
-      transform: translateX(-8px);
+      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%;
+.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 {
+    .mbg-multi-select-content {
+      flex-direction: column;
+      width: 100%;
+
+      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

@@ -266,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 })
+      }
     })
   }
 }

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

@@ -12,7 +12,15 @@
             <mbg-input-search ng-model="$ctrl.inputValue"
                               placeholder="$ctrl.placeholderLeft"
                               ng-model-options="{ debounce: 300 }"
-                              ng-change="$ctrl.executeFetch()"></mbg-input-search>
+                              ng-change="$ctrl.executeFetch()">
+                <select ng-model="$ctrl.selectOptionLeft"
+                        ng-change="$ctrl.executeFetch()">
+                    <option ng-repeat="option in $ctrl.selectOptions"
+                            ng-value="option.key">
+                        {{option.label}}
+                    </option>
+                </select>
+            </mbg-input-search>
             <div ng-if="$ctrl.listHeaderDataTransclude"
                  mbg-dynamic-html="$ctrl.listHeaderDataTransclude"></div>
             <div class="mbg-multi-list-wrapper"
@@ -48,9 +56,22 @@
             <mbg-input-search ng-model="$ctrl.inputValueResult"
                               ng-model-options="{ debounce: 300 }"
                               placeholder="$ctrl.placeholderRight"
-                              ng-change="$ctrl.searchNgModel()"></mbg-input-search>
+                              ng-change="$ctrl.searchNgModel()">
+                <select ng-model="$ctrl.selectOptionRight"
+                        ng-change="$ctrl.searchNgModel()">
+                    <option ng-repeat="option in $ctrl.selectOptions"
+                            ng-value="option.key">
+                        {{option.label}}
+                    </option>
+                </select>
+            </mbg-input-search>
             <div ng-if="$ctrl.listHeaderResultTransclude"
                  mbg-dynamic-html="$ctrl.listHeaderResultTransclude"></div>
+            <div ng-if="$ctrl.dataModel.length <= 0">
+                <label class="mbg-label input-label message-text"
+                       ng-if="$ctrl.dataModel.length <= 0">{{$ctrl.message}}
+                </label>
+            </div>
             <div class="mbg-multi-list-wrapper result-multi-list-wrapper"
                  ng-show="$ctrl.dataModel.length > 0">
                 <div ng-if="$ctrl.listRowTransclude"

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

@@ -1,4 +1,12 @@
 .mbg-select-multi-list-wrapper {
+  .message-text{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 102px;
+    margin-bottom: 152px;  
+}
+
   mbg-input-search .mbg-input-search-wrapper .input-group-search {
     border: none;
     border-radius: 5px;

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

@@ -22,6 +22,10 @@ export class MbgSelectMultiListController {
   private pagination
   private order
   private fieldOrder
+  private selectOptions
+  private selectOptionLeft
+  private selectOptionRight
+  private message
 
   constructor(
     public $scope,
@@ -30,9 +34,14 @@ export class MbgSelectMultiListController {
     public $timeout,
     public $compile,
     public $transclude,
-  ) {}
+  ) { }
 
   $onInit() {
+    if (this.selectOptions && !!this.selectOptions.length) {
+      this.selectOptionRight = this.selectOptions[0].key
+      this.selectOptionLeft = this.selectOptions[0].key
+    }
+
     this.placeholderLeft = this.placeholderLeft || ''
     this.placeholderRight = this.placeholderRight || ''
     this.$scope.$c = this.$scope.$parent
@@ -87,7 +96,7 @@ export class MbgSelectMultiListController {
 
   executeFetch() {
     this.$timeout(() => {
-      this.fetch({ query: this.inputValue || '' })
+      this.fetch({ query: this.inputValue || '', selectOption: this.selectOptionLeft })
     })
   }
 
@@ -108,7 +117,7 @@ export class MbgSelectMultiListController {
       this.dataModel.push(copyRow)
       this.data.splice(index, 1)
       this.$timeout(() => {
-        ;(this.ngModel || []).forEach((model) => {
+        ; (this.ngModel || []).forEach((model) => {
           delete model._uid
         })
       }, 500)
@@ -129,10 +138,12 @@ export class MbgSelectMultiListController {
 
   searchNgModel() {
     this.$timeout(() => {
-      const search = (this.label || '').split(',')
+      const search = (this.selectOptionRight !== "all" ? this.selectOptionRight : this.label).split(',')
       const keys = search.map((word) => word.trim())
       const dataModel = JSON.parse(JSON.stringify(this.ngModel))
       const options = {
+        isCaseSensitive: false,
+        includeScore: false,
         shouldSort: true,
         threshold: 0.3,
         location: 0,
@@ -143,7 +154,10 @@ export class MbgSelectMultiListController {
       }
       const fuse = new Fuse(dataModel, options)
       const result = fuse.search(this.inputValueResult)
-      this.dataModel = result.length > 0 ? result : dataModel
+      this.dataModel = result.length > 0 ? result : this.inputValueResult ? [] : dataModel
+      if (this.dataModel.length === 0) {
+        this.message = `Nenhum resultado encontrado pela pesquisa: "${this.inputValueResult}"`
+      }
     })
   }
 
@@ -172,7 +186,7 @@ export class MbgSelectMultiListController {
   }
 }
 
-MbgSelectMultiListController.$inject = [
+MbgSelectMultiListController['$inject'] = [
   '$scope',
   '$element',
   '$attrs',
@@ -195,6 +209,7 @@ const mbgSelectMultiList = {
     data: '=?',
     isLoading: '=?',
     pagination: '=?',
+    selectOptions: '=?',
   },
   template,
   controller: MbgSelectMultiListController,