@kigi/components 1.45.1 → 1.46.0-beta.2

package/package.json

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

package/src/components/mbg-average-customer-time/mbg-average-customer-time.html

@@ -1,39 +1,33 @@
-<div class="average-customer-time-wrapper">
-  <div class="row customer-average">
-    <div class="description-container-dash"
-         ng-show="$ctrl.percentagesReturnCustomerTime.length">
-      <span class="description-dash">Tempo médio de retorno do cliente</span>
-      <div class="mbg-h-c-tone-s-icon-dash">
-        <i class="fa fa-lock lock-dash-store"
-           aria-hidden="true"
-           uib-tooltip="Sem permissão para visualizar"
-           tooltip-placement="left"
-           ng-if="$ctrl.isBlockValuesDashboarReturnCustomer"></i>
-        <i class="fa fa-play-circle-o play-interval"
-           uib-tooltip="Clique no painel e escolha um intervalo"
-           aria-hidden="true"></i>
-        <i ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesDashboarReturnCustomer"
-           disable-animate
-           class="far fa-eye eye-board-target"
-           ng-click="$ctrl.toggleShowValuesReturnCustomer(false)"></i>
-        <i ng-if="!$ctrl.hideValue && !$ctrl.isBlockValuesDashboarReturnCustomer"
-           ng-click="$ctrl.toggleShowValuesReturnCustomer(false)"
-           disable-animate
-           class="far fa-eye-slash eye-board-target"></i>
+<div class="average-customer-time-wrapper"
+     ng-class="{'opacity-dash': $ctrl.isBlockValuesDashboarReturnCustomer}">
+   <figure class="highcharts-figure">
+      <div class="description-container-dash"
+           ng-show="$ctrl.percentagesReturnCustomerTime.length">
+         <div class="mbg-h-c-tone-s-icon-dash">
+            <i class="fa fa-lock lock-dash-store"
+               aria-hidden="true"
+               uib-tooltip="Sem permissão para visualizar"
+               tooltip-placement="left"
+               ng-if="$ctrl.isBlockValuesDashboarReturnCustomer"></i>
+            <i class="fa fa-play-circle-o play-interval"
+               uib-tooltip="Clique no painel e escolha um intervalo"
+               aria-hidden="true"></i>
+            <i ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesDashboarReturnCustomer"
+               disable-animate
+               class="far fa-eye eye-board-target"
+               ng-click="$ctrl.toggleShowValuesReturnCustomer(false)"></i>
+            <i ng-if="!$ctrl.hideValue && !$ctrl.isBlockValuesDashboarReturnCustomer"
+               ng-click="$ctrl.toggleShowValuesReturnCustomer(false)"
+               disable-animate
+               class="far fa-eye-slash eye-board-target"></i>
+         </div>
+
+      </div>
+      <div class="chart-container"
+           id="container">
       </div>
-    
-    </div>
-    
-    <div class="line-pay"
-         ng-if="!$ctrl.loading"
-    ></div>
-    <div class="chart-container"
-         id="container">
-    </div>
-  </div>
-</div>
+      <div class="line-pay"
+           id="line"></div>
 
-<div class="fake-chart"
-     ng-if="$ctrl.loading">
-  <mbg-skeleton></mbg-skeleton>
+   </figure>
 </div>

package/src/components/mbg-average-customer-time/mbg-average-customer-time.scss

@@ -1,27 +1,4 @@
-mbg-average-customer-time {
-  display: block; 
-  width: 100%; 
-  height: 100%; 
-  flex-grow: 1; 
-  box-sizing: border-box;
-}
-
-.customer-average {
-  padding: 0px 32px;
-}
-
-.fake-chart {
-  width: 100%; 
-  height: 100%; 
-  position: relative;
-  border-radius: 15px;
-  padding: 0px;
-  margin: 0px;
-  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
-  overflow: hidden;
-  flex: 1;
-}
-
+.average-customer-time-wrapper {
   .opacity-dash{
     opacity: 0.6;
   }
@@ -30,34 +7,211 @@ mbg-average-customer-time {
     width: 250px;
   }
   
-
+  }
+  
   .play-interval{
     color: #0EBCBD;  
   }
 
-    .description-container-dash-average {
-      flex-grow: 1;
-      color: var(--titleColor);
-      display: flex;
-      justify-content: space-between;
-      width: 100%;
-      font-weight: 600;
-      font-size: 14px; 
-      align-items: center;
-      padding: 8px 16px 5px 16px;
+.highcharts-figure {
+.custom-title-container{
+  .custom-title{
+    position: relative;
+  }
+}
+
+  .line-pay {
+    background: #737373;
+    height: 1px;
+    opacity: 0.3;
+    position: relative;
+    top: -357px;
+    left: 34px;
+    width: 100%;
+  }
+
+  #container {
+    border-radius: 10px;
+    background: #FFF;
+    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
+    width: 100%;
+    margin-left: 19px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .description-container-dash {
+    color: var(--titleColor);
+    display: flex;
+    justify-content: end;
+    position: relative;
+    top: 22px;
+    z-index: 9999;
+
+    .mbg-h-c-tone-s-icon-dash {
+      margin-top: -10px;
+      transition: opacity 500ms ease;
+      opacity: 0.9;
+    }
+  }
+}
+
+@media screen and (max-width: 1920px){
+  .highcharts-figure {
+    .custom-title-container{
+      .custom-title{
+        position: relative;
+        left: 4px;
+      }
+    }
+    .line-pay {
+      position: relative;
+      left: 30px;
+      width: 480px;
+    }
+    #container {
+      border-radius: 10px;
+      background: #FFF;
+      box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
+      width: 504px;
+      margin-left: 19px;
+    }
     
-      .mbg-h-c-tone-s-icon-dash {
-        transition: opacity 500ms ease;
-        opacity: 0.9;
+  }
+
+}
+
+@media screen and (max-width: 1728px){
+  .highcharts-figure {
+    .line-pay {
+      position: relative;
+      left: 30px;
+      width: 418px;
+    }
+    #container {
+      border-radius: 10px;
+      background: #FFF;
+      box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
+      width: 444px;
+      padding: inherit;
+    }
+  }
+}
+
+@media screen and (max-width: 1536px){
+  .highcharts-figure {
+    .custom-title-container{
+      .custom-title{
+        font-size: 17px;
       }
     }
-    .description-dash {
-      color: #aaabaa;
-      font-size: 17px;
-      font-weight: 500;
-      fill: #aaabaa;
+    .line-pay {
+      position: relative;
+      left: 30px;
+      width: 366px;
+    }
+    #container {
+      border-radius: 10px;
+      background: #FFF;
+      box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
+      width: 390px;
     }
+  }
+}
 
-  
-  
+@media screen and (max-width: 1440px){
+  .highcharts-figure {
+    .custom-title-container{
+      .custom-title{
+        font-size: 16px;
+        width: 100vw;
+    }
+      }
+    
+    .line-pay {
+      position: relative;
+      left: 30px;
+      width: 332px;
+    }
+    #container {
+      border-radius: 10px;
+      background: #FFF;
+      box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
+      width: 358px;
+
+    }
+  }
+}
+
+@media screen and (max-width: 1368px){
+  .highcharts-figure {
+    .custom-title-container{
+      .custom-title{
+        font-size: 20px;
+        width: 100vw;
+    }
+      }
+    
+    .line-pay {
+      position: relative;
+      left: 30px;
+      width: 450px;
+    }
+    #container {
+      border-radius: 10px;
+      background: #FFF;
+      box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
+      width: 474px;
+
+    }
+  }
+}
+
+@media screen and (max-width: 1366px){
+  .highcharts-figure {
+    .custom-title-container{
+      .custom-title{
+        font-size: 20px;
+        width: 100vw;
+    }
+      }
+    
+    .line-pay {
+      position: relative;
+      left: 30px;
+      width: 450px;
+    }
+    #container {
+      border-radius: 10px;
+      background: #FFF;
+      box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
+      width: 474px;
+
+    }
+  }
+}
 
+@media screen and (max-width: 1024px){
+  .highcharts-figure {
+    .custom-title-container{
+      .custom-title{
+        font-size: 15px;
+        width: 100vw;
+    }
+      }
+    
+    .line-pay {
+      position: relative;
+      left: 30px;
+      width: 306px;
+    }
+    #container {
+      border-radius: 10px;
+      background: #FFF;
+      box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
+      width: 330px;
+
+    }
+  }
+}

package/src/components/mbg-average-customer-time/mbg-average-customer-time.ts

@@ -18,7 +18,6 @@ class MbgAverageCustomerTimeController {
   private allowDashBoardAutoValues
   private callBackInstanceZapi: Function
 
-
   constructor(
     public $scope,
     public $element,
@@ -29,7 +28,6 @@ class MbgAverageCustomerTimeController {
   ) {}
 
   async $onInit() {
-
     this.isBlockValuesDashboarReturnCustomer =
       !this.allowedToSee || !this.isPermissionAverageCustomerReturnTime
     this.initialize()
@@ -167,7 +165,17 @@ class MbgAverageCustomerTimeController {
         },
       },
       title: {
-        text: null,
+        align: 'left',
+        text: `
+          <div class="custom-title-container">
+            <p class="custom-title">Tempo médio de retorno do cliente</p>
+          </div>`,
+        useHTML: true,
+        style: {
+          fontSize: '20px',
+          color: '#5f5b5b',
+          fontWeight: 'bold',
+        },
       },
 
       legend: {
@@ -220,7 +228,7 @@ class MbgAverageCustomerTimeController {
         {
           name: 'Porcentagem',
           colorByPoint: true,
-          innerSize: '75%',
+          innerSize: '65%',
           data: transformedData,
         },
       ],
@@ -250,7 +258,6 @@ class MbgAverageCustomerTimeController {
     this.configPanelPercentagesReturnCustomerTime()
   }
 }
-
 MbgAverageCustomerTimeController['$inject'] = [
   '$scope',
   '$element',
@@ -269,7 +276,6 @@ const mbgAverageCustomerTime = {
     isBlockValuesDashboarReturnCustomer: '=?',
     allowDashBoardAutoValues: '=?',
     callBackInstanceZapi: '&?',
-    loading: '=?'
   },
   template,
   controller: MbgAverageCustomerTimeController,

package/src/components/mbg-homescreen/mbg-homescreen.html

@@ -80,12 +80,6 @@
          ng-click="$ctrl.handleDisplayValues()"><i class="fas fa-eye"></i> <span>Visualizar valores</span></a>
       <a ng-show="$ctrl.displayValues"
          ng-click="$ctrl.handleDisplayValues()"><i class="fas fa-eye-slash"></i> <span>Esconder valores</span></a>
-      <a class="print"
-         ng-click="$ctrl.printSalesPayments()">
-        <i class="fa fa-print"
-           aria-hidden="true"></i>
-        <span> Gerar extrato</span>
-      </a>
     </div>
   </div>
 

package/src/components/mbg-homescreen/mbg-homescreen.scss

@@ -24,10 +24,6 @@ mbg-homescreen {
           margin-right: 4px;
         }
       }
-
-      .print{
-        margin-left: 15px;
-      }
     }
 
     &:hover {
@@ -100,7 +96,7 @@ mbg-homescreen {
   .mh-container {
     width: 100%;
     height: auto;
-    padding: 10px 0px 0px 0px;
+    padding: 10px 2px;
 
     .mh-panel-container {
       background-color: white;

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

@@ -23,7 +23,6 @@ class MbgHomescreenController {
   }[]
   private allowDashboardMainSales
   private filterActive
-  private print: Function
 
   constructor(public $scope, public $element, public $attrs, public $timeout) {}
 
@@ -39,12 +38,6 @@ class MbgHomescreenController {
     })
   }
 
-  printSalesPayments() {
-    if (this.print) {
-      this.print()
-    }
-  }
-
   onToggleFilters(event) {
     event.stopPropagation()
     this.openedFilters = !this.openedFilters
@@ -117,7 +110,6 @@ const mbgHomescreen = {
     activeFilter: '=?',
     allowDashboardMainSales: '=?',
     panelValuesFilter: '=?',
-    print: '&?',
   },
   template,
   controller: MbgHomescreenController,

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

@@ -14,6 +14,7 @@
          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"

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-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,