@kigi/components 1.46.0 → 1.47.0

package/package.json

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

package/src/components/mbg-input-date/mbg-input-date.html

@@ -1,74 +1,76 @@
 <div class="mbg-input-wrapper mb-input-date-wrapper"
      ng-if="$ctrl.props">
-  <!-- only mask -->
-  <input type="text"
-         ng-if="!$ctrl.calendar && !$ctrl.between"
-         ng-model="$ctrl.ngModel"
-         ng-change="$ctrl.onChange()"
-         placeholder="{{ $ctrl.placeholder }}"
-         ng-required="$ctrl.ngRequired"
-         ng-disabled="$ctrl.ngDisabled"
-         ng-blur="$ctrl.ngBlur({ $event })"
-         ng-focus="$ctrl.ngFocus({ $event })"
-         ng-keyup="$ctrl.ngKeyup({ $event })"
-         ng-keypress="$ctrl.ngKeypress({ $event })"
-         ng-keydown="$ctrl.ngKeydown({ $event })"
-         ui-date-mask="{{ $ctrl.format }}" />
-  <!-- with calendar -->
-  <input type="text"
-         class="input-with-calendar"
-         ng-if="$ctrl.calendar && !$ctrl.between"
-         ng-model="$ctrl.ngModel"
-         ng-change="$ctrl.onChange()"
-         placeholder="{{ $ctrl.placeholder }}"
-         ng-required="$ctrl.ngRequired"
-         ng-disabled="$ctrl.ngDisabled"
-         ng-blur="$ctrl.handleBlur({ $event })"
-         ng-focus="$ctrl.handleFocus({ $event })"
-         ng-keyup="$ctrl.ngKeyup({ $event })"
-         ng-keypress="$ctrl.ngKeypress({ $event })"
-         ng-keydown="$ctrl.ngKeydown({ $event })"
-         ui-date-mask="{{ $ctrl.format }}"
-         only-month-year="$ctrl.onlyMonthYear"
-         ng-class="{'input-date':$ctrl.titleMode}"
-         mbg-datepicker />
-  <!-- between dates -->
-  <div class="mbg-date-between"
-       ng-if="$ctrl.between">
-    <input type="text"
-           class="mbg-date-between-start"
-           ng-model="$ctrl.ngModel.start"
-           ng-change="$ctrl.onChange()"
-           placeholder="{{ $ctrl.props.placeholderStart }}"
-           ng-required="$ctrl.ngRequired"
-           ng-disabled="$ctrl.ngDisabled"
-           ng-blur="$ctrl.handleBlur({ $event })"
-           ng-focus="$ctrl.handleFocus({ $event })"
-           ng-keyup="$ctrl.ngKeyup({ $event })"
-           ng-keypress="$ctrl.ngKeypress({ $event })"
-           ng-keydown="$ctrl.ngKeydown({ $event })"
-           ui-date-mask="{{ $ctrl.format }}"
-           on-select="$ctrl.onSelectStart()"
-           only-month-year="$ctrl.onlyMonthYear"
-           mbg-datepicker />
-    <div class="mbg-date-between-space">
-      {{ $ctrl.betweenText == undefined ? 'Até' : $ctrl.betweenText }}
-    </div>
-    <input type="text"
-           class="mbg-date-between-end"
-           ng-model="$ctrl.ngModel.end"
-           ng-change="$ctrl.onChangeEndDate()"
-           placeholder="{{ $ctrl.props.placeholderEnd }}"
-           ng-required="$ctrl.ngRequired"
-           ng-disabled="$ctrl.ngDisabled"
-           ng-blur="$ctrl.handleBlur({ $event })"
-           ng-focus="$ctrl.handleFocus({ $event })"
-           ng-keyup="$ctrl.ngKeyup({ $event })"
-           ng-keypress="$ctrl.ngKeypress({ $event })"
-           ng-keydown="$ctrl.ngKeydown({ $event })"
-           ui-date-mask="{{ $ctrl.format }}"
-           on-select="$ctrl.onSelectEnd()"
-           only-month-year="$ctrl.onlyMonthYear"
-           mbg-datepicker />
-  </div>
+       <!-- only mask -->
+       <input type="text"
+              ng-if="!$ctrl.calendar && !$ctrl.between"
+              ng-model="$ctrl.ngModel"
+              ng-change="$ctrl.onChange()"
+              placeholder="{{ $ctrl.placeholder }}"
+              ng-required="$ctrl.ngRequired"
+              ng-disabled="$ctrl.ngDisabled"
+              ng-blur="$ctrl.ngBlur({ $event })"
+              ng-focus="$ctrl.ngFocus({ $event })"
+              ng-keyup="$ctrl.ngKeyup({ $event })"
+              ng-keypress="$ctrl.ngKeypress({ $event })"
+              ng-keydown="$ctrl.ngKeydown({ $event })"
+              ui-date-mask="{{ $ctrl.format }}" />
+       <label class="labelDayOfWeek"
+              ng-if="$ctrl.nameOfTheDay">{{$ctrl.changeDay()}}</label>
+       <!-- with calendar -->
+       <input type="text"
+              class="input-with-calendar"
+              ng-if="$ctrl.calendar && !$ctrl.between"
+              ng-model="$ctrl.ngModel"
+              ng-change="$ctrl.onChange()"
+              placeholder="{{ $ctrl.placeholder }}"
+              ng-required="$ctrl.ngRequired"
+              ng-disabled="$ctrl.ngDisabled"
+              ng-blur="$ctrl.handleBlur({ $event })"
+              ng-focus="$ctrl.handleFocus({ $event })"
+              ng-keyup="$ctrl.ngKeyup({ $event })"
+              ng-keypress="$ctrl.ngKeypress({ $event })"
+              ng-keydown="$ctrl.ngKeydown({ $event })"
+              ui-date-mask="{{ $ctrl.format }}"
+              only-month-year="$ctrl.onlyMonthYear"
+              ng-class="{'input-date':$ctrl.titleMode}"
+              mbg-datepicker />
+       <!-- between dates -->
+       <div class="mbg-date-between"
+            ng-if="$ctrl.between">
+              <input type="text"
+                     class="mbg-date-between-start"
+                     ng-model="$ctrl.ngModel.start"
+                     ng-change="$ctrl.onChange()"
+                     placeholder="{{ $ctrl.props.placeholderStart }}"
+                     ng-required="$ctrl.ngRequired"
+                     ng-disabled="$ctrl.ngDisabled"
+                     ng-blur="$ctrl.handleBlur({ $event })"
+                     ng-focus="$ctrl.handleFocus({ $event })"
+                     ng-keyup="$ctrl.ngKeyup({ $event })"
+                     ng-keypress="$ctrl.ngKeypress({ $event })"
+                     ng-keydown="$ctrl.ngKeydown({ $event })"
+                     ui-date-mask="{{ $ctrl.format }}"
+                     on-select="$ctrl.onSelectStart()"
+                     only-month-year="$ctrl.onlyMonthYear"
+                     mbg-datepicker />
+              <div class="mbg-date-between-space">
+                     {{ $ctrl.betweenText == undefined ? 'Até' : $ctrl.betweenText }}
+              </div>
+              <input type="text"
+                     class="mbg-date-between-end"
+                     ng-model="$ctrl.ngModel.end"
+                     ng-change="$ctrl.onChangeEndDate()"
+                     placeholder="{{ $ctrl.props.placeholderEnd }}"
+                     ng-required="$ctrl.ngRequired"
+                     ng-disabled="$ctrl.ngDisabled"
+                     ng-blur="$ctrl.handleBlur({ $event })"
+                     ng-focus="$ctrl.handleFocus({ $event })"
+                     ng-keyup="$ctrl.ngKeyup({ $event })"
+                     ng-keypress="$ctrl.ngKeypress({ $event })"
+                     ng-keydown="$ctrl.ngKeydown({ $event })"
+                     ui-date-mask="{{ $ctrl.format }}"
+                     on-select="$ctrl.onSelectEnd()"
+                     only-month-year="$ctrl.onlyMonthYear"
+                     mbg-datepicker />
+       </div>
 </div>

package/src/components/mbg-input-date/mbg-input-date.scss

@@ -7,6 +7,13 @@
   input {
     width: 100%;
   }
+  .labelDayOfWeek{
+    margin-left: 4px;
+    margin-top: 4px;
+    padding: 6px;
+    width: 116px;
+    word-break: break-word;
+  }
   .mbg-date-between {
     display: flex;
     width: 100%;

package/src/components/mbg-input-date/mbg-input-date.ts

@@ -17,7 +17,7 @@ class MbgInputDateController {
   public betweenText: string
   public filterDate: Function
   public onlyMonthYear: boolean
-
+  private nameOfTheDay
 
   constructor(public $scope, public $element, public $attrs, public $timeout) {
     if ($attrs.ngRequired === '') {
@@ -47,6 +47,10 @@ class MbgInputDateController {
     }
   }
 
+  changeDay() {
+    return new Intl.DateTimeFormat('pt-BR', { weekday: 'long' }).format(this.ngModel)
+  }
+
   onChange() {
     if (this.ngChange) {
       this.ngChange({})
@@ -133,6 +137,7 @@ const mbgInputDate = {
     filterDate: '&?',
     onlyMonthYear: '=?',
     titleMode: '=?',
+    nameOfTheDay: '=?',
   },
   template,
   controller: MbgInputDateController,

package/src/components/mbg-input-password/mbg-input-password.ts

@@ -20,6 +20,7 @@ class MbgInputPasswordController {
     }
   }
   onChange() {
+    console.log('this.ngChange', this.ngChange)
     if (this.ngChange) {
       this.ngChange({})
     }

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

@@ -48,6 +48,9 @@ class MbgSelectController {
   private executeAfterOnInit: Function
   private mountValue
   private strMountValue
+  private callBackFavorite: Function
+  private favoriteModel
+  private productKitList: boolean
 
   constructor(
     public $scope,
@@ -242,15 +245,23 @@ class MbgSelectController {
     }
   }
 
-  onInputBlur() {
+  onInputBlur(viewFavorite) {
     this.$timeout(() => {
       this.hasFocus = false
       this.data = []
       this.checkPosition()
-      if (!this.ngModel && this.cacheNgModel) {
+      if (!viewFavorite) {
+        this.favoriteModel = null
+      }
+
+      if (!this.ngModel && this.cacheNgModel && !this.favoriteModel) {
+        this.ngModel = this.cacheNgModel
+      } else if (this.favoriteModel && this.favoriteModel.key) {
+        this.cacheNgModel = this.favoriteModel.key
         this.ngModel = this.cacheNgModel
       }
     })
+
     if (this.ngBlur) {
       this.ngBlur()
     }
@@ -419,6 +430,7 @@ class MbgSelectController {
       } else {
         await this.updateModelValue(this.inputValue)
       }
+
       this.executeCallback()
       if (this.onSelect) {
         this.onSelect({ value: this.ngModel })
@@ -598,7 +610,7 @@ class MbgSelectController {
           }
           if (!this.ngModel) {
             delete this.inputValue
-            delete this.inputNgValue
+            this.inputNgValue = ''
           }
         }
       }
@@ -610,15 +622,34 @@ class MbgSelectController {
   }
 
   checkFavorite() {
-    let favorite
+    let favorite = null
     this.$timeout(() => {
       favorite = MbgCookie.get(this.getFavoriteKey())
       if (favorite && this.enableFavorite && !this.ngModel) {
         this.selectOption(favorite)
+
+        if (this.callBackFavorite) {
+          this.callBackFavorite({ value: favorite })
+        }
+
         if (this.executeAfterOnInit) {
           this.executeAfterOnInit()
         }
       }
+      if (this.callBackFavorite) {
+        this.callBackFavorite({ value: favorite })
+      }
+    }, 300)
+  }
+
+  getCheckFavoriteModel(viewFavorite) {
+    this.$timeout(() => {
+      if (!this.productKitList) return
+      this.favoriteModel = MbgCookie.get(this.getFavoriteKey())
+      if (this.callBackFavorite && this.favoriteModel) {
+        this.callBackFavorite({ value: this.favoriteModel })
+      }
+      this.onInputBlur(viewFavorite)
     }, 300)
   }
 
@@ -640,6 +671,7 @@ class MbgSelectController {
       }
     } else {
       MbgCookie.set(this.getFavoriteKey(), item)
+      this.getCheckFavoriteModel(true)
     }
   }
 
@@ -683,7 +715,7 @@ class MbgSelectController {
   }
 }
 
-MbgSelectController.$inject = [
+MbgSelectController['$inject'] = [
   '$scope',
   '$element',
   '$attrs',
@@ -717,6 +749,8 @@ const mbgSelect = {
     manyFavorite: '=?',
     executeAfterOnInit: '&?',
     mountValue: '&?',
+    callBackFavorite: '&?',
+    productKitList: '=?',
   },
   controller: MbgSelectController,
   template,

package/src/components/mbg-top-sellings-products/mbg-top-sellings-products.html

@@ -39,7 +39,7 @@
                        ng-repeat="item in $ctrl.oneMonthInterval">
                      <div class="segment-item">
                         <span class="rank">{{ $index + 1 }}°</span>
-                        <span class="name"
+                        <span class="description-top-selling-name"
                               ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts"
                               uib-tooltip="{{ item.reference }} - {{ item.nameProduct }}"
                               tooltip-placement="{{$index === 0 || $index === 1 || item.nameProduct.length > 30 ?  'bottom' :'top' }}">{{
@@ -77,7 +77,7 @@
                        ng-repeat="item in $ctrl.threeMonthInterval">
                      <div class="segment-item">
                         <span class="rank">{{ $index + 1 }}°</span>
-                        <span class="name"
+                        <span class="description-top-selling-name"
                               ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts"
                               uib-tooltip="{{ item.reference }} - {{ item.nameProduct }}"
                               tooltip-placement="{{$index === 0 || $index === 1 || item.nameProduct.length > 30 ?  'bottom' :'top' }}">{{
@@ -115,7 +115,7 @@
                        ng-repeat="item in $ctrl.oneYearInterval">
                      <div class="segment-item">
                         <span class="rank">{{ $index + 1 }}°</span>
-                        <span class="name"
+                        <span class="description-top-selling-name"
                               ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts"
                               uib-tooltip="{{ item.reference }} - {{ item.nameProduct }}"
                               tooltip-placement="{{$index === 0 || $index === 1 || item.nameProduct.length > 30 ?  'bottom' :'top' }}">{{

package/src/components/mbg-top-sellings-products/mbg-top-sellings-products.scss

@@ -1,8 +1,8 @@
 mbg-top-sellings-products {
-   display: block; 
-   width: 100%; 
-   height: 100%; 
-   flex-grow: 1; 
+   display: block;
+   width: 100%;
+   height: 100%;
+   flex-grow: 1;
    box-sizing: border-box;
  //   padding: 0px 16px;
  }
@@ -14,19 +14,19 @@ mbg-top-sellings-products {
    color: #FFFFFF;
  }
  }
- 
+
  .loading-chart{
    padding: 0;
  }
- 
+
  .top-sellings-products-wrapper{
     padding: 0px 16px;
  }
- 
+
  .top-selling {
     padding: 0px 16px;
  }
- 
+
    .description-container-dash {
      flex-grow: 1;
      color: var(--titleColor);
@@ -34,17 +34,17 @@ mbg-top-sellings-products {
      justify-content: space-between;
      width: 100%;
      font-weight: 600;
-     font-size: 14px; 
+     font-size: 14px;
      align-items: center;
      padding: 8px 0 5px 0;
-   
+
      .mbg-h-c-tone-s-icon-dash {
        transition: opacity 500ms ease;
        opacity: 0.9;
      }
    }
- 
- 
+
+
    .loading-indicator-top {
      position: absolute;
      top: 97%;
@@ -53,11 +53,11 @@ mbg-top-sellings-products {
      width: 40px;
      height: 40px;
    }
- 
+
    #loading-circle-top {
      position: absolute;
    }
- 
+
    .active-index-top {
    display: flex;
    position: relative;
@@ -65,13 +65,13 @@ mbg-top-sellings-products {
    justify-content: center;
    color: #5f5b5b;
    }
- 
- 
+
+
    .opacity-dash{
      opacity: 0.6;
    }
- 
- 
+
+
    .description-header {
      flex-direction: column;
      width: 100%;
@@ -81,8 +81,8 @@ mbg-top-sellings-products {
      height: 400px;
      padding: 16px 0px;
   }
- 
-  
+
+
   .product-header {
      display: flex;
      justify-content: end;
@@ -90,37 +90,37 @@ mbg-top-sellings-products {
      width: 100%;
      // padding: 0px 24px;
   }
-  
+
   .product-header span {
      color: #555;
   }
- 
-  
+
+
   .header-sales {
      width: 40%;
      text-align: right;
   }
-  
+
   .header-stock {
      width: 20%;
      text-align: right;
   }
-  
+
   .product-list {
- 
+
      width: 100%;
   }
-  
+
   .product-item {
      display: block;
      padding: 0;
      padding: 0px 23px 0px 0px;
- 
+
   }
- 
+
   .fake-chart {
-    width: 100%; 
-    height: 100%; 
+    width: 100%;
+    height: 100%;
     position: relative;
     border-radius: 10px;
     padding: 0px;
@@ -130,41 +130,41 @@ mbg-top-sellings-products {
     flex: 1;
     display: flex;
   }
-  
+
   .swiper-container {
      width: 100%;
      overflow: hidden;
      height: 350px;
      position: relative;
- 
+
   }
- 
+
   .swiper-pagination {
    display: flex;
    gap: 5px;
  }
- 
+
  .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
-   background-color: #606A90; 
+   background-color: #606A90;
    border-radius: 50%;
    opacity: 0.5;
  }
- 
+
  .swiper-pagination-bullet-active {
-   background-color: #0EBCBD; 
+   background-color: #0EBCBD;
    opacity: 1;
  }
- 
-  
+
+
   .segment-item {
      display: flex;
      justify-content: space-between;
      padding: 6px 0;
   }
-   
-  .name {
+
+  .description-top-selling-name {
      width: 70%;
      max-width: 50%;
      white-space: nowrap;
@@ -174,9 +174,9 @@ mbg-top-sellings-products {
      font-size: 14px;
      color: #5f5b5b;
   }
- 
 
- 
+
+
   .line-block-top{
      height: 1px;
      background: black;
@@ -186,7 +186,7 @@ mbg-top-sellings-products {
      opacity: 0.3;
      top: 8px;
   }
-  
+
   .sales {
      width: 20%;
      text-align: right;
@@ -195,7 +195,7 @@ mbg-top-sellings-products {
      position: relative;
      right: 18px;
   }
-  
+
   .stock {
      width: 20%;
      text-align: right;
@@ -203,7 +203,7 @@ mbg-top-sellings-products {
      color: #5f5b5b;
      position: relative;
   }
- 
+
   .show-slides-not-data{
    display: flex;
    justify-content: center;
@@ -213,7 +213,7 @@ mbg-top-sellings-products {
    font-size: 14px;
    color: #5f5b5b;
   }
- 
+