@kigi/components 1.44.0 → 1.45.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/package.json +1 -1
  2. package/src/components/mbg-average-customer-time/mbg-average-customer-time.html +6 -7
  3. package/src/components/mbg-average-customer-time/mbg-average-customer-time.scss +31 -199
  4. package/src/components/mbg-average-customer-time/mbg-average-customer-time.ts +2 -12
  5. package/src/components/mbg-homescreen/mbg-homescreen.html +6 -0
  6. package/src/components/mbg-homescreen/mbg-homescreen.scss +5 -1
  7. package/src/components/mbg-homescreen/mbg-homescreen.ts +8 -0
  8. package/src/components/mbg-store-goal/mbg-store-goal.html +7 -4
  9. package/src/components/mbg-store-goal/mbg-store-goal.scss +16 -91
  10. package/src/components/mbg-top-sellings-products/mbg-top-sellings-products.html +170 -170
  11. package/src/components/mbg-top-sellings-products/mbg-top-sellings-products.scss +37 -282
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kigi/components",
3
- "version": "1.44.0",
3
+ "version": "1.45.0-beta.2",
4
4
  "description": "@kigi/components",
5
5
  "main": "src/components/index.ts",
6
6
  "scripts": {
package/src/components/mbg-average-customer-time/mbg-average-customer-time.html CHANGED
@@ -1,8 +1,8 @@
1
- <div class="average-customer-time-wrapper"
2
- ng-class="{'opacity-dash': $ctrl.isBlockValuesDashboarReturnCustomer}">
3
- <figure class="highcharts-figure">
1
+ <div class="average-customer-time-wrapper">
2
+ <div class="row">
4
3
  <div class="description-container-dash"
5
4
  ng-show="$ctrl.percentagesReturnCustomerTime.length">
5
+ <span class="description-dash">Tempo médio de retorno do cliente</span>
6
6
  <div class="mbg-h-c-tone-s-icon-dash">
7
7
  <i class="fa fa-lock lock-dash-store"
8
8
  aria-hidden="true"
@@ -23,11 +23,10 @@
23
23
  </div>
24
24
 
25
25
  </div>
26
+
27
+ <div class="line-pay"></div>
26
28
  <div class="chart-container"
27
29
  id="container">
28
30
  </div>
29
- <div class="line-pay"
30
- id="line"></div>
31
-
32
- </figure>
31
+ </div>
33
32
  </div>
package/src/components/mbg-average-customer-time/mbg-average-customer-time.scss CHANGED
@@ -1,4 +1,13 @@
1
- .average-customer-time-wrapper {
1
+ mbg-average-customer-time {
2
+ display: block;
3
+ width: 100%;
4
+ height: 100%;
5
+ flex-grow: 1;
6
+ box-sizing: border-box;
7
+ padding: 0px 16px;
8
+ }
9
+
10
+
2
11
  .opacity-dash{
3
12
  opacity: 0.6;
4
13
  }
@@ -7,211 +16,34 @@
7
16
  width: 250px;
8
17
  }
9
18
 
10
- }
11
-
19
+
12
20
  .play-interval{
13
21
  color: #0EBCBD;
14
22
  }
15
23
 
16
- .highcharts-figure {
17
- .custom-title-container{
18
- .custom-title{
19
- position: relative;
20
- }
21
- }
22
-
23
- .line-pay {
24
- background: #737373;
25
- height: 1px;
26
- opacity: 0.3;
27
- position: relative;
28
- top: -357px;
29
- left: 34px;
30
- width: 100%;
31
- }
32
-
33
- #container {
34
- border-radius: 10px;
35
- background: #FFF;
36
- box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
37
- width: 100%;
38
- margin-left: 19px;
39
- display: flex;
40
- justify-content: center;
41
- align-items: center;
42
- }
43
-
44
- .description-container-dash {
45
- color: var(--titleColor);
46
- display: flex;
47
- justify-content: end;
48
- position: relative;
49
- top: 22px;
50
- z-index: 9999;
51
-
52
- .mbg-h-c-tone-s-icon-dash {
53
- margin-top: -10px;
54
- transition: opacity 500ms ease;
55
- opacity: 0.9;
56
- }
57
- }
58
- }
59
-
60
- @media screen and (max-width: 1920px){
61
- .highcharts-figure {
62
- .custom-title-container{
63
- .custom-title{
64
- position: relative;
65
- left: 4px;
66
- }
67
- }
68
- .line-pay {
69
- position: relative;
70
- left: 30px;
71
- width: 480px;
72
- }
73
- #container {
74
- border-radius: 10px;
75
- background: #FFF;
76
- box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
77
- width: 504px;
78
- margin-left: 19px;
79
- }
80
-
81
- }
82
-
83
- }
84
-
85
- @media screen and (max-width: 1728px){
86
- .highcharts-figure {
87
- .line-pay {
88
- position: relative;
89
- left: 30px;
90
- width: 418px;
91
- }
92
- #container {
93
- border-radius: 10px;
94
- background: #FFF;
95
- box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
96
- width: 444px;
97
- padding: inherit;
98
- }
99
- }
100
- }
101
-
102
- @media screen and (max-width: 1536px){
103
- .highcharts-figure {
104
- .custom-title-container{
105
- .custom-title{
106
- font-size: 17px;
107
- }
108
- }
109
- .line-pay {
110
- position: relative;
111
- left: 30px;
112
- width: 366px;
113
- }
114
- #container {
115
- border-radius: 10px;
116
- background: #FFF;
117
- box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
118
- width: 390px;
119
- }
120
- }
121
- }
122
-
123
- @media screen and (max-width: 1440px){
124
- .highcharts-figure {
125
- .custom-title-container{
126
- .custom-title{
127
- font-size: 16px;
128
- width: 100vw;
129
- }
130
- }
24
+ .description-container-dash-average {
25
+ flex-grow: 1;
26
+ color: var(--titleColor);
27
+ display: flex;
28
+ justify-content: space-between;
29
+ width: 100%;
30
+ font-weight: 600;
31
+ font-size: 14px;
32
+ align-items: center;
33
+ padding: 8px 16px 5px 16px;
131
34
 
132
- .line-pay {
133
- position: relative;
134
- left: 30px;
135
- width: 332px;
136
- }
137
- #container {
138
- border-radius: 10px;
139
- background: #FFF;
140
- box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
141
- width: 358px;
142
-
143
- }
144
- }
145
- }
146
-
147
- @media screen and (max-width: 1368px){
148
- .highcharts-figure {
149
- .custom-title-container{
150
- .custom-title{
151
- font-size: 20px;
152
- width: 100vw;
153
- }
35
+ .mbg-h-c-tone-s-icon-dash {
36
+ transition: opacity 500ms ease;
37
+ opacity: 0.9;
154
38
  }
155
-
156
- .line-pay {
157
- position: relative;
158
- left: 30px;
159
- width: 450px;
160
39
  }
161
- #container {
162
- border-radius: 10px;
163
- background: #FFF;
164
- box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
165
- width: 474px;
166
-
40
+ .description-dash {
41
+ color: #aaabaa;
42
+ font-size: 17px;
43
+ font-weight: 500;
44
+ fill: #aaabaa;
167
45
  }
168
- }
169
- }
170
46
 
171
- @media screen and (max-width: 1366px){
172
- .highcharts-figure {
173
- .custom-title-container{
174
- .custom-title{
175
- font-size: 20px;
176
- width: 100vw;
177
- }
178
- }
179
-
180
- .line-pay {
181
- position: relative;
182
- left: 30px;
183
- width: 450px;
184
- }
185
- #container {
186
- border-radius: 10px;
187
- background: #FFF;
188
- box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
189
- width: 474px;
190
-
191
- }
192
- }
193
- }
194
-
195
- @media screen and (max-width: 1024px){
196
- .highcharts-figure {
197
- .custom-title-container{
198
- .custom-title{
199
- font-size: 15px;
200
- width: 100vw;
201
- }
202
- }
203
-
204
- .line-pay {
205
- position: relative;
206
- left: 30px;
207
- width: 306px;
208
- }
209
- #container {
210
- border-radius: 10px;
211
- background: #FFF;
212
- box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
213
- width: 330px;
47
+
48
+
214
49
 
215
- }
216
- }
217
- }
package/src/components/mbg-average-customer-time/mbg-average-customer-time.ts CHANGED
@@ -165,17 +165,7 @@ class MbgAverageCustomerTimeController {
165
165
  },
166
166
  },
167
167
  title: {
168
- align: 'left',
169
- text: `
170
- <div class="custom-title-container">
171
- <p class="custom-title">Tempo médio de retorno do cliente</p>
172
- </div>`,
173
- useHTML: true,
174
- style: {
175
- fontSize: '20px',
176
- color: '#5f5b5b',
177
- fontWeight: 'bold',
178
- },
168
+ text: null,
179
169
  },
180
170
 
181
171
  legend: {
@@ -228,7 +218,7 @@ class MbgAverageCustomerTimeController {
228
218
  {
229
219
  name: 'Porcentagem',
230
220
  colorByPoint: true,
231
- innerSize: '65%',
221
+ innerSize: '75%',
232
222
  data: transformedData,
233
223
  },
234
224
  ],
package/src/components/mbg-homescreen/mbg-homescreen.html CHANGED
@@ -80,6 +80,12 @@
80
80
  ng-click="$ctrl.handleDisplayValues()"><i class="fas fa-eye"></i> <span>Visualizar valores</span></a>
81
81
  <a ng-show="$ctrl.displayValues"
82
82
  ng-click="$ctrl.handleDisplayValues()"><i class="fas fa-eye-slash"></i> <span>Esconder valores</span></a>
83
+ <a class="print"
84
+ ng-click="$ctrl.printSalesPayments()">
85
+ <i class="fa fa-print"
86
+ aria-hidden="true"></i>
87
+ <span> Gerar extrato</span>
88
+ </a>
83
89
  </div>
84
90
  </div>
85
91
 
package/src/components/mbg-homescreen/mbg-homescreen.scss CHANGED
@@ -24,6 +24,10 @@ mbg-homescreen {
24
24
  margin-right: 4px;
25
25
  }
26
26
  }
27
+
28
+ .print{
29
+ margin-left: 15px;
30
+ }
27
31
  }
28
32
 
29
33
  &:hover {
@@ -96,7 +100,7 @@ mbg-homescreen {
96
100
  .mh-container {
97
101
  width: 100%;
98
102
  height: auto;
99
- padding: 10px 2px;
103
+ padding: 10px 0px 0px 0px;
100
104
 
101
105
  .mh-panel-container {
102
106
  background-color: white;
package/src/components/mbg-homescreen/mbg-homescreen.ts CHANGED
@@ -23,6 +23,7 @@ class MbgHomescreenController {
23
23
  }[]
24
24
  private allowDashboardMainSales
25
25
  private filterActive
26
+ private print: Function
26
27
 
27
28
  constructor(public $scope, public $element, public $attrs, public $timeout) {}
28
29
 
@@ -38,6 +39,12 @@ class MbgHomescreenController {
38
39
  })
39
40
  }
40
41
 
42
+ printSalesPayments() {
43
+ if (this.print) {
44
+ this.print()
45
+ }
46
+ }
47
+
41
48
  onToggleFilters(event) {
42
49
  event.stopPropagation()
43
50
  this.openedFilters = !this.openedFilters
@@ -110,6 +117,7 @@ const mbgHomescreen = {
110
117
  activeFilter: '=?',
111
118
  allowDashboardMainSales: '=?',
112
119
  panelValuesFilter: '=?',
120
+ print: '&?',
113
121
  },
114
122
  template,
115
123
  controller: MbgHomescreenController,
package/src/components/mbg-store-goal/mbg-store-goal.html CHANGED
@@ -2,16 +2,18 @@
2
2
  ng-class="{'opacity-dash-goal': $ctrl.blockStoreGoal}"
3
3
  ng-show="$ctrl.showDashboard">
4
4
  <div class="description-container-dash">
5
- <p class="description-dash">
5
+ <span class="description-dash">
6
6
  Meta do mês / {{$ctrl.currentMonthName}}
7
7
  <i class="fa fa-exclamation-circle"
8
8
  uib-tooltip="{{$ctrl.percentageEstimatedMessage}}"
9
9
  tooltip-placement="top"
10
10
  ng-show="$ctrl.estimatedPercentageGreaterThanTarget"
11
11
  aria-hidden="true"></i>
12
- </p>
12
+ </span>
13
+
13
14
  <div class="mbg-h-c-tone-s-icon-dash"
14
15
  ng-click="$ctrl.toggleShowValueStoreGoal(false)">
16
+ <label>{{$ctrl.indexActiveSlide}}</label>
15
17
  <i class="fa fa-lock lock-dash-store"
16
18
  aria-hidden="true"
17
19
  uib-tooltip="Sem permissão para visualizar"
@@ -23,12 +25,13 @@
23
25
  <i ng-if="!$ctrl.hideValue && !$ctrl.blockStoreGoal"
24
26
  disable-animate
25
27
  class="far fa-eye-slash eye-board-target"></i>
28
+
26
29
  </div>
27
30
  </div>
28
- <div class="active-index"
31
+ <!-- <div class="active-index"
29
32
  ng-if="$ctrl.indexActiveSlide">
30
33
  <label>{{$ctrl.indexActiveSlide}}</label>
31
- </div>
34
+ </div> -->
32
35
 
33
36
  <div class="line-goal"></div>
34
37
  <div class="dashboard-wrapper">
package/src/components/mbg-store-goal/mbg-store-goal.scss CHANGED
@@ -1,4 +1,7 @@
1
1
  .store-goal-wrapper {
2
+ width: 100%;
3
+ max-width: 100%;
4
+ overflow: hidden;
2
5
 
3
6
  .loading-indicator {
4
7
  position: absolute;
@@ -182,36 +185,22 @@
182
185
  }
183
186
 
184
187
  .description-container-dash {
185
- flex-grow: 1;
186
- color: var(--titleColor);
187
- display: flex;
188
- justify-content: space-between;
189
- width: 100%;
190
- margin-top: 16px;
191
- font-weight: 600;
192
- font-size: 14px;
188
+ flex-grow: 1;
189
+ color: var(--titleColor);
190
+ display: flex;
191
+ justify-content: space-between;
192
+ width: 100%;
193
+ font-weight: 600;
194
+ font-size: 14px;
195
+ align-items: center;
196
+ padding: 8px 0 5px 0;
193
197
 
194
- .active-index-slide{
195
- position: relative;
196
- top: -11px;
197
- left: 95px;
198
- }
199
198
 
200
199
  .mbg-h-c-tone-s-icon-dash {
201
- margin-top: -10px;
202
200
  transition: opacity 500ms ease;
203
201
  opacity: 0.9;
204
202
  }
205
203
 
206
- .lock-dash-store {
207
- position: relative;
208
- }
209
-
210
- .show-tooltip {
211
- font-size: 20px;
212
- color: #5f5b5b;
213
- z-index: 9999;
214
- }
215
204
  }
216
205
 
217
206
  @keyframes blink {
@@ -229,8 +218,10 @@
229
218
  }
230
219
 
231
220
  .description-dash {
232
- font-size: 20px;
233
- color: #5f5b5b;
221
+ color: #aaabaa;
222
+ font-size: 17px;
223
+ font-weight: 500;
224
+ fill: #aaabaa;
234
225
 
235
226
  i {
236
227
  animation: blink 1s infinite;
@@ -246,72 +237,6 @@
246
237
  }
247
238
  }
248
239
 
249
- @media screen and (max-width: 1920px){
250
-
251
- .description-container-dash{
252
- .active-index-slide {
253
- left: 140px;
254
- }
255
- }
256
- }
257
-
258
- @media screen and (max-width: 1728px){
259
- .description-container-dash{
260
- .active-index-slide {
261
- left: 108px;
262
- }
263
- }
264
- }
265
-
266
- @media screen and (max-width: 1536px){
267
- .description-container-dash{
268
- .active-index-slide {
269
- left: 70px;
270
- }
271
- }
272
- }
273
- @media screen and (max-width: 1440px){
274
- .dashboard-wrapper{
275
- .swiper-slide{
276
- .dashboard-estimated{
277
- position: relative;
278
- left: 32px;
279
- }
280
- }
281
-
282
- }
283
- .description-container-dash{
284
- .active-index-slide {
285
- left: 58px;
286
- }
287
- }
288
- }
289
-
290
- @media screen and (max-width: 1366px){
291
- .description-container-dash{
292
- .active-index-slide {
293
- left: 125px;
294
- }
295
- }
296
- }
297
-
298
- @media screen and (max-width: 1024px){
299
- .dashboard-wrapper{
300
- .swiper-slide{
301
- .dashboard-estimated{
302
- position: relative;
303
- left: 24px;
304
- }
305
- }
306
-
307
- }
308
- .description-container-dash{
309
- .active-index-slide {
310
- left: 44px;
311
- }
312
- }
313
- }
314
-
315
240
  }
316
241
 
317
242
  .opacity-dash-goal {
package/src/components/mbg-top-sellings-products/mbg-top-sellings-products.html CHANGED
@@ -1,194 +1,194 @@
1
1
  <div class="top-sellings-products-wrapper "
2
2
  ng-class="{'opacity-dash': $ctrl.isBlockValuesTopSellingsProducts}">
3
- <div class="panel">
4
- <div class="description"
5
- ng-show="!$ctrl.isProductsTopSellings">
6
- <div class="description-container-dash-selling">
7
- <p class="description-dash-selling">10 Produtos mais vendidos</p>
8
- <div class="mbg-h-c-tone-s-icon-dash"
9
- ng-click="$ctrl.toggleShow(false)">
10
- <i class="fa fa-lock lock-dash"
11
- aria-hidden="true"
12
- uib-tooltip="Sem permissão para visualizar"
13
- ng-if="$ctrl.isBlockValuesTopSellingsProducts && !$ctrl.hideValue"></i>
14
- <i ng-if="$ctrl.hideValue"
15
- disable-animate
16
- class="far fa-eye"></i>
17
- <i ng-if="!$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts"
18
- disable-animate
19
- class="far fa-eye-slash"></i>
20
- </div>
3
+ <div class="row top-selling"
4
+ ng-show="!$ctrl.isProductsTopSellings">
5
+ <div class="description-container-dash">
6
+ <span class="description-dash">10 Produtos mais vendidos</span>
7
+ <div class="mbg-h-c-tone-s-icon-dash"
8
+ ng-click="$ctrl.toggleShow(false)">
9
+ <i class="fa fa-lock lock-dash"
10
+ aria-hidden="true"
11
+ uib-tooltip="Sem permissão para visualizar"
12
+ ng-if="$ctrl.isBlockValuesTopSellingsProducts && !$ctrl.hideValue"></i>
13
+ <i ng-if="$ctrl.hideValue"
14
+ disable-animate
15
+ class="far fa-eye"></i>
16
+ <i ng-if="!$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts"
17
+ disable-animate
18
+ class="far fa-eye-slash"></i>
21
19
  </div>
22
- <div class="line-pay-selling"></div>
23
20
  </div>
21
+ <div class="line-pay"></div>
22
+ </div>
24
23
 
25
- <div class="description-header"
26
- ng-show="!$ctrl.isProductsTopSellings">
27
- <div class="product-list">
28
- <div class="product-header">
29
- <span class="header-sales">Itens vendidos</span>
30
- <span class="header-stock">Estoque</span>
31
- </div>
32
24
 
25
+ <div class="description-header"
26
+ ng-show="!$ctrl.isProductsTopSellings">
27
+ <div class="product-list">
28
+ <div class="product-header">
29
+ <span class="header-sales">Itens vendidos</span>
30
+ <span class="header-stock">Estoque</span>
31
+ </div>
33
32
 
34
- <div class="swiper-container">
35
- <div class="swiper-wrapper">
36
- <div class="swiper-slide">
37
- <div class="product-item"
38
- ng-repeat="item in $ctrl.oneMonthInterval">
39
- <div class="segment-item">
40
- <span class="rank">{{ $index + 1 }}°</span>
41
- <span class="name"
42
- ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts"
43
- uib-tooltip="{{ item.reference }} - {{ item.nameProduct }}"
44
- tooltip-placement="{{$index === 0 || $index === 1 || item.nameProduct.length > 30 ? 'bottom' :'top' }}">{{
45
- item.nameProduct
46
- }}</span>
47
- <div class="line-block-top"
48
- ng-if="!$ctrl.hideValue || $ctrl.isBlockValuesTopSellingsProducts"></div>
49
-
50
- <span class="sales"
51
- ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts">{{ item.stock
52
- }}</span>
53
- <span class="sales"
54
- ng-if="!$ctrl.hideValue || $ctrl.isBlockValuesTopSellingsProducts"> <i
55
- class="fa fa-lock lock-dash"
56
- aria-hidden="true"
57
- tooltip-placement="left"
58
- uib-tooltip="Sem permissão para visualizar"></i></span>
59
-
60
-
61
- <span class="stock"
62
- ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts">{{ item.stockCount
63
- }}</span>
64
- <span class="stock"
65
- ng-if="!$ctrl.hideValue || $ctrl.isBlockValuesTopSellingsProducts"> <i
66
- class="fa fa-lock lock-dash"
67
- aria-hidden="true"
68
- tooltip-placement="left"
69
- uib-tooltip="Sem permissão para visualizar"></i></span>
70
- </div>
71
- </div>
72
- </div>
73
33
 
74
- <div class="swiper-slide">
75
- <div class="product-item"
76
- ng-repeat="item in $ctrl.threeMonthInterval">
77
- <div class="segment-item">
78
- <span class="rank">{{ $index + 1 }}°</span>
79
- <span class="name"
80
- ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts"
81
- uib-tooltip="{{ item.reference }} - {{ item.nameProduct }}"
82
- tooltip-placement="{{$index === 0 || $index === 1 || item.nameProduct.length > 30 ? 'bottom' :'top' }}">{{
83
- item.nameProduct
84
- }}</span>
85
- <div class="line-block-top"
86
- ng-if="!$ctrl.hideValue || $ctrl.isBlockValuesTopSellingsProducts"></div>
87
-
88
- <span class="sales"
89
- ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts">{{ item.stock
90
- }}</span>
91
- <span class="sales"
92
- ng-if="!$ctrl.hideValue || $ctrl.isBlockValuesTopSellingsProducts"> <i
93
- class="fa fa-lock lock-dash"
94
- aria-hidden="true"
95
- tooltip-placement="left"
96
- uib-tooltip="Sem permissão para visualizar"></i></span>
97
-
98
-
99
- <span class="stock"
100
- ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts">{{ item.stockCount
101
- }}</span>
102
- <span class="stock"
103
- ng-if="!$ctrl.hideValue || $ctrl.isBlockValuesTopSellingsProducts"> <i
104
- class="fa fa-lock lock-dash"
105
- aria-hidden="true"
106
- tooltip-placement="left"
107
- uib-tooltip="Sem permissão para visualizar"></i></span>
108
- </div>
34
+ <div class="swiper-container">
35
+ <div class="swiper-wrapper">
36
+ <div class="swiper-slide">
37
+ <div class="product-item"
38
+ ng-repeat="item in $ctrl.oneMonthInterval">
39
+ <div class="segment-item">
40
+ <span class="rank">{{ $index + 1 }}°</span>
41
+ <span class="name"
42
+ ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts"
43
+ uib-tooltip="{{ item.reference }} - {{ item.nameProduct }}"
44
+ tooltip-placement="{{$index === 0 || $index === 1 || item.nameProduct.length > 30 ? 'bottom' :'top' }}">{{
45
+ item.nameProduct
46
+ }}</span>
47
+ <div class="line-block-top"
48
+ ng-if="!$ctrl.hideValue || $ctrl.isBlockValuesTopSellingsProducts"></div>
49
+
50
+ <span class="sales"
51
+ ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts">{{ item.stock
52
+ }}</span>
53
+ <span class="sales"
54
+ ng-if="!$ctrl.hideValue || $ctrl.isBlockValuesTopSellingsProducts"> <i
55
+ class="fa fa-lock lock-dash"
56
+ aria-hidden="true"
57
+ tooltip-placement="left"
58
+ uib-tooltip="Sem permissão para visualizar"></i></span>
59
+
60
+
61
+ <span class="stock"
62
+ ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts">{{ item.stockCount
63
+ }}</span>
64
+ <span class="stock"
65
+ ng-if="!$ctrl.hideValue || $ctrl.isBlockValuesTopSellingsProducts"> <i
66
+ class="fa fa-lock lock-dash"
67
+ aria-hidden="true"
68
+ tooltip-placement="left"
69
+ uib-tooltip="Sem permissão para visualizar"></i></span>
109
70
  </div>
110
71
  </div>
72
+ </div>
111
73
 
112
- <div class="swiper-slide">
113
- <div class="product-item"
114
- ng-repeat="item in $ctrl.oneYearInterval">
115
- <div class="segment-item">
116
- <span class="rank">{{ $index + 1 }}°</span>
117
- <span class="name"
118
- ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts"
119
- uib-tooltip="{{ item.reference }} - {{ item.nameProduct }}"
120
- tooltip-placement="{{$index === 0 || $index === 1 || item.nameProduct.length > 30 ? 'bottom' :'top' }}">{{
121
- item.nameProduct
122
- }}</span>
123
- <div class="line-block-top"
124
- ng-if="!$ctrl.hideValue || $ctrl.isBlockValuesTopSellingsProducts"></div>
125
-
126
- <span class="sales"
127
- ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts">{{ item.stock
128
- }}</span>
129
- <span class="sales"
130
- ng-if="!$ctrl.hideValue || $ctrl.isBlockValuesTopSellingsProducts"> <i
131
- class="fa fa-lock lock-dash"
132
- aria-hidden="true"
133
- tooltip-placement="left"
134
- uib-tooltip="Sem permissão para visualizar"></i></span>
135
-
136
-
137
- <span class="stock"
138
- ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts">{{ item.stockCount
139
- }}</span>
140
- <span class="stock"
141
- ng-if="!$ctrl.hideValue || $ctrl.isBlockValuesTopSellingsProducts"> <i
142
- class="fa fa-lock lock-dash"
143
- aria-hidden="true"
144
- tooltip-placement="left"
145
- uib-tooltip="Sem permissão para visualizar"></i></span>
146
- </div>
74
+ <div class="swiper-slide">
75
+ <div class="product-item"
76
+ ng-repeat="item in $ctrl.threeMonthInterval">
77
+ <div class="segment-item">
78
+ <span class="rank">{{ $index + 1 }}°</span>
79
+ <span class="name"
80
+ ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts"
81
+ uib-tooltip="{{ item.reference }} - {{ item.nameProduct }}"
82
+ tooltip-placement="{{$index === 0 || $index === 1 || item.nameProduct.length > 30 ? 'bottom' :'top' }}">{{
83
+ item.nameProduct
84
+ }}</span>
85
+ <div class="line-block-top"
86
+ ng-if="!$ctrl.hideValue || $ctrl.isBlockValuesTopSellingsProducts"></div>
87
+
88
+ <span class="sales"
89
+ ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts">{{ item.stock
90
+ }}</span>
91
+ <span class="sales"
92
+ ng-if="!$ctrl.hideValue || $ctrl.isBlockValuesTopSellingsProducts"> <i
93
+ class="fa fa-lock lock-dash"
94
+ aria-hidden="true"
95
+ tooltip-placement="left"
96
+ uib-tooltip="Sem permissão para visualizar"></i></span>
97
+
98
+
99
+ <span class="stock"
100
+ ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts">{{ item.stockCount
101
+ }}</span>
102
+ <span class="stock"
103
+ ng-if="!$ctrl.hideValue || $ctrl.isBlockValuesTopSellingsProducts"> <i
104
+ class="fa fa-lock lock-dash"
105
+ aria-hidden="true"
106
+ tooltip-placement="left"
107
+ uib-tooltip="Sem permissão para visualizar"></i></span>
147
108
  </div>
148
109
  </div>
149
110
  </div>
150
- <div class="swiper-pagination"></div>
151
111
 
152
- <div class="active-index-top"
153
- ng-if="$ctrl.indexActiveSlide">
154
- <label>{{$ctrl.indexActiveSlide}}</label>
155
- </div>
156
- <div class="loading-indicator-top">
157
- <svg id="loading-circle-top"
158
- width="30"
159
- height="30"
160
- viewBox="0 0 100 100">
161
-
162
- <circle cx="50"
163
- cy="50"
164
- r="40"
165
- stroke="#E9E9E9"
166
- stroke-width="8"
167
- fill="none" />
168
-
169
- <circle id="progress-top"
170
- cx="50"
171
- cy="50"
172
- r="40"
173
- stroke="#0ebcbd"
174
- stroke-width="8"
175
- stroke-dasharray="251.2"
176
- stroke-dashoffset="251.2"
177
- fill="none"
178
- transform="rotate(-90 50 50)" />
179
- </svg>
112
+ <div class="swiper-slide">
113
+ <div class="product-item"
114
+ ng-repeat="item in $ctrl.oneYearInterval">
115
+ <div class="segment-item">
116
+ <span class="rank">{{ $index + 1 }}°</span>
117
+ <span class="name"
118
+ ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts"
119
+ uib-tooltip="{{ item.reference }} - {{ item.nameProduct }}"
120
+ tooltip-placement="{{$index === 0 || $index === 1 || item.nameProduct.length > 30 ? 'bottom' :'top' }}">{{
121
+ item.nameProduct
122
+ }}</span>
123
+ <div class="line-block-top"
124
+ ng-if="!$ctrl.hideValue || $ctrl.isBlockValuesTopSellingsProducts"></div>
125
+
126
+ <span class="sales"
127
+ ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts">{{ item.stock
128
+ }}</span>
129
+ <span class="sales"
130
+ ng-if="!$ctrl.hideValue || $ctrl.isBlockValuesTopSellingsProducts"> <i
131
+ class="fa fa-lock lock-dash"
132
+ aria-hidden="true"
133
+ tooltip-placement="left"
134
+ uib-tooltip="Sem permissão para visualizar"></i></span>
135
+
136
+
137
+ <span class="stock"
138
+ ng-if="$ctrl.hideValue && !$ctrl.isBlockValuesTopSellingsProducts">{{ item.stockCount
139
+ }}</span>
140
+ <span class="stock"
141
+ ng-if="!$ctrl.hideValue || $ctrl.isBlockValuesTopSellingsProducts"> <i
142
+ class="fa fa-lock lock-dash"
143
+ aria-hidden="true"
144
+ tooltip-placement="left"
145
+ uib-tooltip="Sem permissão para visualizar"></i></span>
146
+ </div>
147
+ </div>
180
148
  </div>
181
149
  </div>
150
+ <div class="swiper-pagination"></div>
182
151
 
152
+ <div class="active-index-top"
153
+ ng-if="$ctrl.indexActiveSlide">
154
+ <label>{{$ctrl.indexActiveSlide}}</label>
155
+ </div>
156
+ <div class="loading-indicator-top">
157
+ <svg id="loading-circle-top"
158
+ width="30"
159
+ height="30"
160
+ viewBox="0 0 100 100">
161
+
162
+ <circle cx="50"
163
+ cy="50"
164
+ r="40"
165
+ stroke="#E9E9E9"
166
+ stroke-width="8"
167
+ fill="none" />
168
+
169
+ <circle id="progress-top"
170
+ cx="50"
171
+ cy="50"
172
+ r="40"
173
+ stroke="#0ebcbd"
174
+ stroke-width="8"
175
+ stroke-dasharray="251.2"
176
+ stroke-dashoffset="251.2"
177
+ fill="none"
178
+ transform="rotate(-90 50 50)" />
179
+ </svg>
180
+ </div>
183
181
  </div>
182
+
184
183
  </div>
184
+ </div>
185
185
 
186
186
 
187
- <div class="show-slides-not-data"
188
- ng-if="$ctrl.isProductsTopSellings">
189
- <label>
190
- Atualmente, a empresa não possui vendas registradas.
191
- </label>
192
- </div>
187
+ <div class="show-slides-not-data"
188
+ ng-if="$ctrl.isProductsTopSellings">
189
+ <label>
190
+ Atualmente, a empresa não possui vendas registradas.
191
+ </label>
193
192
  </div>
193
+
194
194
  </div>
package/src/components/mbg-top-sellings-products/mbg-top-sellings-products.scss CHANGED
@@ -1,10 +1,38 @@
1
- .top-sellings-products-wrapper {
1
+ mbg-top-sellings-products {
2
+ display: block;
3
+ width: 100%;
4
+ height: 100%;
5
+ flex-grow: 1;
6
+ box-sizing: border-box;
7
+ padding: 0px 16px;
8
+ }
9
+
10
+ .top-selling {
11
+ padding: 0px 16px;
12
+ }
13
+
14
+ .description-container-dash {
15
+ flex-grow: 1;
16
+ color: var(--titleColor);
17
+ display: flex;
18
+ justify-content: space-between;
19
+ width: 100%;
20
+ font-weight: 600;
21
+ font-size: 14px;
22
+ align-items: center;
23
+ padding: 8px 0 5px 0;
24
+
25
+ .mbg-h-c-tone-s-icon-dash {
26
+ transition: opacity 500ms ease;
27
+ opacity: 0.9;
28
+ }
29
+ }
2
30
 
3
31
 
4
32
  .loading-indicator-top {
5
33
  position: absolute;
6
- top: 90%;
7
- left: 96%;
34
+ top: 97%;
35
+ left: 97%;
8
36
  transform: translate(-50%, -50%);
9
37
  width: 40px;
10
38
  height: 40px;
@@ -17,68 +45,16 @@
17
45
  .active-index-top {
18
46
  display: flex;
19
47
  position: relative;
20
- top: -53px;
48
+ top: -24px;
21
49
  justify-content: center;
22
50
  color: #5f5b5b;
23
51
  }
24
52
 
25
- display: flex;
26
- align-items: stretch;
27
- width: 100%;
28
53
 
29
54
  .opacity-dash{
30
55
  opacity: 0.6;
31
56
  }
32
57
 
33
- .panel {
34
- margin-left: 54px;
35
- border-radius: 10px;
36
- background: #FFF;
37
- box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
38
- display: flex;
39
- flex-direction: column;
40
- width: 100%;
41
- height: 400px;
42
-
43
-
44
- .description{
45
- .description-container-dash-selling {
46
- padding: 0px 32px;
47
- flex-grow: 1;
48
- color: var(--titleColor);
49
- display: flex;
50
- justify-content: space-between;
51
- width: 100%;
52
- position: relative;
53
- left: -20px;
54
- top: -8px;
55
- font-weight: 600;
56
- font-size: 14px;
57
-
58
- .mbg-h-c-tone-s-icon-dash {
59
- position: relative;
60
- top: 10px;
61
- right: -40px;
62
- transition: opacity 500ms ease;
63
- opacity: 0.9;
64
- }
65
- }
66
-
67
- .description-dash-selling {
68
- font-size: 20px;
69
- color: #5f5b5b;
70
- }
71
-
72
- .line-pay-selling {
73
- background: #737373;
74
- height: 1px;
75
- opacity: 0.3;
76
- position: relative;
77
- width: 95%;
78
- top: -8px;
79
- left: 12px;
80
- }
81
- }
82
58
 
83
59
  .description-header {
84
60
  flex-direction: column;
@@ -86,6 +62,8 @@
86
62
  display: flex;
87
63
  justify-content: center;
88
64
  align-items: center;
65
+ height: 400px;
66
+ padding: 16px 0px;
89
67
  }
90
68
 
91
69
 
@@ -94,7 +72,7 @@
94
72
  justify-content: end;
95
73
  font-weight: bold;
96
74
  width: 100%;
97
- padding: 0px 24px;
75
+ // padding: 0px 24px;
98
76
  }
99
77
 
100
78
  .product-header span {
@@ -113,11 +91,8 @@
113
91
  }
114
92
 
115
93
  .product-list {
116
- flex-grow: 1;
94
+
117
95
  width: 100%;
118
- flex-grow: 1;
119
- position: relative;
120
- left: 14px;
121
96
  }
122
97
 
123
98
  .product-item {
@@ -132,15 +107,10 @@
132
107
  overflow: hidden;
133
108
  height: 350px;
134
109
  position: relative;
135
- left: -14px;
136
- padding-left: 10px;
110
+
137
111
  }
138
112
 
139
113
  .swiper-pagination {
140
- position: relative;
141
- top: -38px;
142
- left: 50%;
143
- transform: translateX(-50%);
144
114
  display: flex;
145
115
  gap: 5px;
146
116
  }
@@ -157,8 +127,6 @@
157
127
  background-color: #0EBCBD;
158
128
  opacity: 1;
159
129
  }
160
-
161
-
162
130
 
163
131
 
164
132
  .segment-item {
@@ -174,7 +142,6 @@
174
142
  overflow: hidden;
175
143
  text-overflow: ellipsis;
176
144
  position: relative;
177
- left: 8px;
178
145
  font-size: 14px;
179
146
  color: #5f5b5b;
180
147
  }
@@ -221,219 +188,7 @@
221
188
  font-size: 14px;
222
189
  color: #5f5b5b;
223
190
  }
224
- }
225
-
226
- }
227
-
228
- @media screen and (max-width: 1920px) {
229
- .top-sellings-products-wrapper .panel .description .description-container-dash-selling .description-dash-selling {
230
- font-size: 20px;
231
- color: #5f5b5b;
232
- position: relative;
233
- top: 17px;
234
- }
235
- .top-sellings-products-wrapper .panel .description .description-container-dash-selling .mbg-h-c-tone-s-icon-dash{
236
- position: relative;
237
- top: 12px;
238
- }
239
-
240
- .top-sellings-products-wrapper .panel .description .line-pay-selling {
241
- background: #737373;
242
- top: 9px;
243
- }
244
-
245
- .top-sellings-products-wrapper .description-header{
246
- position: relative;
247
- top: 15px;
248
- }
249
-
250
- .top-sellings-products-wrapper .panel .show-slides-not-data{
251
- width: 520px;
252
- }
253
- }
254
-
255
- @media screen and (max-width: 1728px) {
256
- .top-sellings-products-wrapper .panel {
257
- margin-left: 55px;
258
- border-radius: 10px;
259
- background: #FFF;
260
- box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
261
- display: flex;
262
- flex-direction: column;
263
- width: 100%;
264
- height: 400px;
265
- }
266
-
267
- .top-sellings-products-wrapper .panel .show-slides-not-data{
268
- width: 520px;
269
- padding-right: 72px;
270
-
271
- }
272
- }
273
-
274
- @media screen and (max-width: 1536px) {
275
- .top-sellings-products-wrapper .panel .description .description-container-dash-selling .description-dash-selling {
276
- font-size: 17px;
277
- color: #5f5b5b;
278
- top: 17px;
279
- position: relative;
280
- }
281
-
282
- .top-sellings-products-wrapper .panel .description .description-container-dash-selling .mbg-h-c-tone-s-icon-dash{
283
- position: relative;
284
- top: 11px;
285
- }
286
191
 
287
- .top-sellings-products-wrapper .panel .description .line-pay-selling {
288
- background: #737373;
289
- top: 12px;
290
- }
291
-
292
- .top-sellings-products-wrapper .description-header{
293
- position: relative;
294
- top: 20px;
295
- }
296
- .top-sellings-products-wrapper .panel .description-header .loading-indicator {
297
- position: absolute;
298
- left: 97%;
299
- }
300
-
301
- .top-sellings-products-wrapper .panel .description-header .name {
302
- width: 70%;
303
- position: relative;
304
- left: 4px;
305
- }
306
-
307
- // .top-sellings-products-wrapper .panel .description-header .product-list .product-header .header-sales {
308
- // width: 32%;
309
-
310
- // }
311
- .top-sellings-products-wrapper .panel {
312
- margin-left: 48px;
313
- border-radius: 10px;
314
- background: #FFF;
315
- box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
316
- display: flex;
317
- flex-direction: column;
318
- width: 100%;
319
- height: 400px;
320
- }
321
-
322
- .top-sellings-products-wrapper .panel .show-slides-not-data{
323
- width: 520px;
324
- padding-left: 22px;
325
-
326
- label {
327
- width: 400px;
328
- }
329
-
330
- }
331
- }
332
-
333
- @media screen and (max-width: 1440px) {
334
- .top-sellings-products-wrapper .panel .description-header .name {
335
- width: 70%;
336
- position: relative;
337
- left: 4px;
338
- }
339
-
340
- // .top-sellings-products-wrapper .panel .description-header .product-list .product-header .header-sales {
341
- // width: 35%;
342
- // }
343
-
344
- .top-sellings-products-wrapper .panel .description-header .product-list .product-header .header-stock {
345
- width: 21%;
346
- }
347
-
348
- .top-sellings-products-wrapper .panel {
349
- margin-left: 48px;
350
- border-radius: 10px;
351
- background: #FFF;
352
- box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
353
- display: flex;
354
- flex-direction: column;
355
- width: 100%;
356
- height: 400px;
357
- }
358
-
359
-
360
- .top-sellings-products-wrapper .panel .show-slides-not-data{
361
- width: 520px;
362
- padding-left: 0px;
363
-
364
- label {
365
- width: 400px;
366
- }
367
-
368
- }
369
- }
370
-
371
-
372
- @media screen and (max-width: 1366px) {
373
- .top-sellings-products-wrapper .panel .description .description-container-dash-selling .description-dash-selling {
374
- font-size: 20px;
375
- color: #5f5b5b;
376
- top: 17px;
377
- position: relative;
378
- }
379
-
380
- .top-sellings-products-wrapper .panel .description .line-pay-selling {
381
- background: #737373;
382
- top: 8px;
383
- }
384
-
385
- .top-sellings-products-wrapper .panel {
386
- margin-left: 55px;
387
- border-radius: 10px;
388
- background: #FFF;
389
- box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
390
- display: flex;
391
- flex-direction: column;
392
- width: 100%;
393
- height: 400px;
394
- }
395
-
396
-
397
- .top-sellings-products-wrapper .panel .show-slides-not-data{
398
- width: 520px;
399
- padding-left: 25px;
400
-
401
- label {
402
- width: 500px;
403
- }
404
-
405
- }
406
- }
407
-
408
-
409
- @media screen and (max-width: 1024px) {
410
- .top-sellings-products-wrapper .panel .description .description-container-dash-selling .description-dash-selling {
411
- font-size: 15px;
412
- color: #5f5b5b;
413
- top: 17px;
414
- position: relative;
415
- }
416
-
417
- .top-sellings-products-wrapper .panel .description .line-pay-selling {
418
- background: #737373;
419
- top: 10px;
420
- }
421
-
422
- // .top-sellings-products-wrapper .panel .description-header .product-list .product-header .header-sales {
423
- // width: 39%;
424
- // left: -9px;
425
- // position: relative;
426
- // }
427
-
428
- .top-sellings-products-wrapper .panel .show-slides-not-data{
429
- width: 400px;
430
- padding-left: 12px;
431
- }
432
-
433
- .top-sellings-products-wrapper .panel{
434
- margin-left: 47px;
435
- }
436
- }
437
192
 
438
193
 
439
194