@kigi/components 1.19.0-beta.1 → 1.19.0-beta.3

package/package.json

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

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

@@ -241,6 +241,9 @@ class MbgAddressController {
         }, ${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 +289,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,14 +1,9 @@
 <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"
@@ -42,10 +37,7 @@
                   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,6 +1,7 @@
 .mbg-multi-select-wrapper {
 
   position: relative;
+
   display: flex;
   align-items: center;
 
@@ -23,270 +24,188 @@
   }
 
   .arrow-left {
-    animation: left-exit .2s linear forwards ;
-  }
+      left: 0px;
+      transition: transform .5s;
+      transform: translateX(-40px);
+    }
 
   .arrow-right {
-    animation: right-exit .2s linear forwards ;
+    right: 0px;
+    transition: transform .5s;
+    transform: translateX(40px);
   }
+
   
   &:hover {
     .arrow-left {
-      animation: left-enter .3s linear forwards;
-
+      transition: transform  .3s;
+      transform: translateX(8px);
     }
     .arrow-right {
-      animation: right-enter .3s linear forwards;
+      transition: transform  .3s;
+      transform: translateX(-8px);
     }
   }
   
-.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;
-
-    .mbg-multi-select-content {
-      flex-direction: column;
-      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%;
 
-      mbg-select {
-        width: 100%;
-      }
+    &.inline-mode-wrapper {
+      height: auto;
+      max-height: 284px;
 
-      ul {
+      .mbg-multi-select-content {
         flex-direction: column;
         width: 100%;
-        max-height: 234px;
-        overflow-y: auto;
-        overflow-x: hidden;
 
-        li {
+        mbg-select {
           width: 100%;
-          margin-top: 4px;
-          position: relative;
-          min-height: 28px;
-
-          svg {
-            position: absolute;
-            right: 6px;
-          }
+        }
 
-          label {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            padding-right: 14px;
+        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;
+            }
 
-            &: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;
+            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;
+                }
               }
             }
           }
         }
       }
     }
-  }
 
-  &.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;
     }
-  }
-  ul {
-    &.items-selected {
-      margin: 0;
-      padding: 0;
-      list-style: none;
-      display: flex;
-      width: fit-content;
-      min-width: fit-content;
-      li {
-        min-width: fit-content;
-        background: #e6e6e6;
-        border-radius: 4px;
-        height: 28px;
+    .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;
-        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;
+        width: fit-content;
+        min-width: fit-content;
+        li {
+          min-width: fit-content;
+          background: #e6e6e6;
+          border-radius: 4px;
+          height: 28px;
           display: flex;
           align-items: center;
-          pointer-events: all;
-        }
-        &.dragging {
-          opacity: 0.6;
-        }
-        &.over {
-          background: red;
+          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;
+          }
         }
       }
     }
-  }
-  .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;
+    .mbg-select-input-fake {
+      flex: 1;
+      min-width: 191.03px;
+      border: none;
+    }
+    .mbg-select-wrapper .mbg-icon-select {
+      display: none;
+    }
   }
 }
-}

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

@@ -266,10 +266,6 @@ 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,