@kigi/components 1.40.2 → 1.41.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kigi/components",
-  "version": "1.40.2",
+  "version": "1.41.0-alpha.1",
   "description": "@kigi/components",
   "main": "src/components/index.ts",
   "scripts": {
@@ -75,7 +75,7 @@
     "progressbar.js": "^1.0.1",
     "raphael": "^2.2.8",
     "sugarss": "^2.0.0",
-    "swiper": "^5.4.5",
+    "swiper": "^5.3.6",
     "webcamjs": "^1.0.25"
   },
   "devDependencies": {

package/src/components/index.ts

@@ -87,6 +87,7 @@ import { mbgAceEditorModule } from './mbg-ace-editor'
 import { mbgImageUploadCropModule } from './mbg-image-upload-crop'
 import { mbgStoreGoalModule } from './mbg-store-goal'
 import { mbgStatusLabelModule } from './mbg-status-label'
+import { mbgAverageCustomerTimeModule } from './mbg-average-customer-time'
 
 if (!window['$']) {
   window['$'] = $
@@ -155,6 +156,7 @@ const mbgComponentsModule = angular
     mbgAceEditorModule,
     mbgStoreGoalModule,
     mbgStatusLabelModule,
+    mbgAverageCustomerTimeModule,
   ])
   .config(appConfig)
   .service('mbgAlert', MbgAlert)

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

@@ -0,0 +1,8 @@
+import * as angular from 'angular'
+import { mbgAverageCustomerTime } from './mbg-average-customer-time'
+
+const mbgAverageCustomerTimeModule = angular
+  .module('mbg.components.mbgAverageCustomerTime', [])
+  .component('mbgAverageCustomerTime', mbgAverageCustomerTime).name
+
+export { mbgAverageCustomerTimeModule }

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

@@ -0,0 +1,3 @@
+<div>
+   aaaaaaaaaaaaaa
+</div>

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

@@ -0,0 +1,301 @@
+.store-goal-wrapper {
+
+  .swiper {
+    width: 100%;
+    height: 100%;
+    overflow: hidden; 
+  }
+
+  .swiper-wrapper {
+    display: flex;
+    transition: transform 0.3s ease;
+  }
+
+  .swiper-slide {
+    width: 100%; 
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center; 
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .swiper-slide-active {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .swiper-pagination {
+    position: absolute;
+    top: 100px; 
+    left: 54%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 5px;
+  }
+  
+  .swiper-pagination-bullet {
+    width: 10px;
+    height: 10px;
+    background-color: #606A90; 
+    border-radius: 50%;
+    opacity: 0.5;
+  }
+
+  .swiper-pagination-bullet-active {
+    background-color: #0EBCBD; 
+    opacity: 1;
+  }
+
+  .active-index {
+    display: flex;
+    justify-content: end;
+    font-size: 14px;
+    margin-top: -17px;
+    color: var(--titleColor);
+  }
+  
+
+  .line-goal {
+    width: 100%;
+    background: #737373;
+    height: 1px;
+    opacity: 0.3;
+
+  }
+
+  .dashboard-wrapper {
+    overflow: hidden; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    left: -22px;
+
+    .dashboard-estimated {
+
+      position: relative;
+      left: 52px;
+      top: 10px;
+      height: 115px;
+      font-size: 14px;
+      color: #5f5b5b;
+
+    }
+
+    .dashboard-estimated-store {
+
+      position: relative;
+      top: 18px;
+      left: 38px;  
+      height: 115px;
+      font-size: 14px;
+      color: #5f5b5b;
+    }
+  }
+
+  .chart-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 300px;
+    height: auto;
+    position: relative;
+    left: 10%;
+    bottom: 195px;
+  }
+
+  .opacity-dash-goal {
+    opacity: 0.5;
+  }
+
+  .goal-target {
+    position: relative;
+    top: 180px;
+    font-size: 14px;
+    color: #5f5b5b;
+  }
+
+  .estimate-goal {
+    font-size: 14px;
+    color: #5f5b5b;
+  }
+
+  .estimate-goal-store {
+    font-size: 14px;
+    color: #5f5b5b;
+
+    i {
+      color: #0EBCBD;
+    }
+
+    .tooltip-inner {
+      width: 250px;
+    }
+
+
+    .tooltip-chart-panel {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      background: #0EBCBD !important;
+      font-weight: bold;
+      color: #FFFFFF;
+      width: 100%;
+      height: 100%;
+      margin-right: 200px;
+      border-radius: 10px;
+      opacity: 1.0;
+    }
+
+  }
+  .lock-permition{
+
+    .tooltip-inner {
+      background: #0EBCBD !important;
+      color: #000000 !important;
+      width: 300px;
+    }
+  }
+
+  .goal-day {
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+    position: relative;
+    top: 170px;
+    font-size: 16px;
+    color: #5f5b5b;
+  }
+
+  .description-container-dash {
+    flex-grow: 1;
+    color: var(--titleColor);
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 16px;
+    font-weight: 600;
+    font-size: 14px;
+
+    .active-index-slide{
+      position: relative;
+      top: -11px;
+      left: 95px;
+    }
+
+    .mbg-h-c-tone-s-icon-dash {
+      margin-top: -10px;
+      transition: opacity 500ms ease;
+      opacity: 0.9;
+    }
+
+    .lock-dash-store {
+      position: relative;
+      right: -20px;
+    }
+
+    .show-tooltip {
+      font-size: 20px;
+      color: #5f5b5b;
+      z-index: 9999;
+    }
+  }
+
+  @keyframes blink {
+    0% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .description-dash {
+    font-size: 20px;
+    color: #5f5b5b;
+
+    i {
+      animation: blink 1s infinite;
+      color: #ff8c00;
+      position: relative;
+      z-index: 9999;
+    }
+
+    .tooltip-inner {
+      background: #ff8c00 !important;
+      color: #000000 !important;
+      width: 300px;
+    }
+  }
+
+  @media screen and (max-width: 1920px){
+    .description-container-dash{
+      .active-index-slide {
+        left: 140px;
+      }
+    }
+  }
+
+  @media screen and (max-width: 1728px){
+    .description-container-dash{
+      .active-index-slide {
+        left: 108px;
+      }
+    }
+  }
+
+  @media screen and (max-width: 1536px){
+    .description-container-dash{
+      .active-index-slide {
+        left: 70px;
+      }
+    }
+  }
+  @media screen and (max-width: 1440px){
+    .description-container-dash{
+      .active-index-slide {
+        left: 58px;
+      }
+    }
+  }
+
+  @media screen and (max-width: 1366px){
+    .description-container-dash{
+      .active-index-slide {
+        left: 125px;
+      }
+    }
+  }
+
+  @media screen and (max-width: 1024px){
+    .description-container-dash{
+      .active-index-slide {
+        left: 44px;
+      }
+    }
+  }
+
+}
+
+.hide-goal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  font-size: 14px;
+  color: #5f5b5b;
+}
+
+.state-goal {
+  cursor: pointer;
+}

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

@@ -0,0 +1,31 @@
+import './mbg-average-customer-time.scss'
+import template from './mbg-average-customer-time.html'
+
+class MbgAverageCustomerTimeController {
+  constructor(
+    public $scope,
+    public $element,
+    public $attrs,
+    public $timeout,
+    public $filter,
+    public $state,
+  ) {}
+
+  async $onInit() {}
+}
+MbgAverageCustomerTimeController['$inject'] = [
+  '$scope',
+  '$element',
+  '$attrs',
+  '$timeout',
+  '$filter',
+  '$state',
+]
+
+const mbgAverageCustomerTime = {
+  bindings: {},
+  template,
+  controller: MbgAverageCustomerTimeController,
+}
+
+export { mbgAverageCustomerTime }

package/src/components/mbg-store-goal/mbg-store-goal.ts

@@ -7,7 +7,6 @@ import * as Exporting from 'highcharts/modules/exporting.js'
 import * as ExportData from 'highcharts/modules/export-data.js'
 import * as Accessibility from 'highcharts/modules/accessibility.js'
 import Swiper from 'swiper'
-import { Pagination } from 'swiper'
 
 // Inicialize os módulos
 HighchartsMore(Highcharts)
@@ -59,7 +58,6 @@ class MbgStoreGoalController {
 
   configSwiperSlides() {
     const swiper = new Swiper('.swiper', {
-      modules: [Pagination],
       speed: 1000,
       autoplay: {
         delay: 20000,
@@ -68,7 +66,6 @@ class MbgStoreGoalController {
       pagination: {
         el: '.swiper-pagination',
         progressbarOpposite: true,
-        allowTouchMove: false,
         clickable: true,
         bulletClass: 'swiper-pagination-bullet',
         bulletActiveClass: 'swiper-pagination-bullet-active',

package/src/index.html

@@ -161,7 +161,7 @@
       <div class="col-md-12">  -->
   <div class=""
        style="height: 260px">
-    <mbg-store-goal></mbg-store-goal>
+    <mbg-average-customer-time></mbg-average-customer-time>
 
     <!-- <mbg-text-editor ng-model="editorJodit"
                      ng-if="testeeditorif"