@kigi/components 1.45.1 → 1.46.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.
@@ -1,216 +1,439 @@
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;
1
+ .top-sellings-products-wrapper {
2
+
3
+
4
+ .loading-indicator-top {
5
+ position: absolute;
6
+ top: 90%;
7
+ left: 96%;
8
+ transform: translate(-50%, -50%);
9
+ width: 40px;
10
+ height: 40px;
11
+ }
12
+
13
+ #loading-circle-top {
14
+ position: absolute;
15
+ }
16
+
17
+ .active-index-top {
18
+ display: flex;
19
+ position: relative;
20
+ top: -53px;
21
+ justify-content: center;
22
+ color: #5f5b5b;
23
+ }
24
+
25
+ display: flex;
26
+ align-items: stretch;
27
+ width: 100%;
28
+
29
+ .opacity-dash{
30
+ opacity: 0.6;
31
+ }
32
+
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
+
83
+ .description-header {
84
+ flex-direction: column;
85
+ width: 100%;
86
+ display: flex;
87
+ justify-content: center;
88
+ align-items: center;
8
89
  }
90
+
9
91
 
10
- .loading-chart{
11
- padding: 0;
92
+ .product-header {
93
+ display: flex;
94
+ justify-content: end;
95
+ font-weight: bold;
96
+ width: 100%;
97
+ padding: 0px 24px;
12
98
  }
13
99
 
14
- .top-sellings-products-wrapper{
15
- padding: 0px 16px;
100
+ .product-header span {
101
+ color: #555;
16
102
  }
103
+
17
104
 
18
- .top-selling {
19
- padding: 0px 16px;
105
+ .header-sales {
106
+ width: 40%;
107
+ text-align: right;
20
108
  }
21
109
 
22
- .description-container-dash {
23
- flex-grow: 1;
24
- color: var(--titleColor);
25
- display: flex;
26
- justify-content: space-between;
27
- width: 100%;
28
- font-weight: 600;
29
- font-size: 14px;
30
- align-items: center;
31
- padding: 8px 0 5px 0;
32
-
33
- .mbg-h-c-tone-s-icon-dash {
34
- transition: opacity 500ms ease;
35
- opacity: 0.9;
36
- }
37
- }
38
-
39
-
40
- .loading-indicator-top {
41
- position: absolute;
42
- top: 97%;
43
- left: 97%;
44
- transform: translate(-50%, -50%);
45
- width: 40px;
46
- height: 40px;
47
- }
48
-
49
- #loading-circle-top {
50
- position: absolute;
51
- }
110
+ .header-stock {
111
+ width: 20%;
112
+ text-align: right;
113
+ }
52
114
 
53
- .active-index-top {
54
- display: flex;
55
- position: relative;
56
- top: -24px;
57
- justify-content: center;
58
- color: #5f5b5b;
59
- }
115
+ .product-list {
116
+ flex-grow: 1;
117
+ width: 100%;
118
+ flex-grow: 1;
119
+ position: relative;
120
+ left: 14px;
121
+ }
60
122
 
123
+ .product-item {
124
+ display: block;
125
+ padding: 0;
126
+ padding: 0px 23px 0px 0px;
127
+
128
+ }
61
129
 
62
- .opacity-dash{
63
- opacity: 0.6;
64
- }
130
+ .swiper-container {
131
+ width: 100%;
132
+ overflow: hidden;
133
+ height: 350px;
134
+ position: relative;
135
+ left: -14px;
136
+ padding-left: 10px;
137
+ }
138
+
139
+ .swiper-pagination {
140
+ position: relative;
141
+ top: -38px;
142
+ left: 50%;
143
+ transform: translateX(-50%);
144
+ display: flex;
145
+ gap: 5px;
146
+ }
147
+
148
+ .swiper-pagination-bullet {
149
+ width: 10px;
150
+ height: 10px;
151
+ background-color: #606A90;
152
+ border-radius: 50%;
153
+ opacity: 0.5;
154
+ }
155
+
156
+ .swiper-pagination-bullet-active {
157
+ background-color: #0EBCBD;
158
+ opacity: 1;
159
+ }
160
+
161
+
162
+
65
163
 
164
+ .segment-item {
165
+ display: flex;
166
+ justify-content: space-between;
167
+ padding: 6px 0;
168
+ }
169
+
170
+ .name {
171
+ width: 70%;
172
+ max-width: 50%;
173
+ white-space: nowrap;
174
+ overflow: hidden;
175
+ text-overflow: ellipsis;
176
+ position: relative;
177
+ left: 8px;
178
+ font-size: 14px;
179
+ color: #5f5b5b;
180
+ }
181
+
182
+ .tooltip-inner {
183
+ background: #0EBCBD !important;
184
+ font-weight: bold;
185
+ color: #FFFFFF;
186
+ }
187
+
188
+ .line-block-top{
189
+ height: 1px;
190
+ background: black;
191
+ width: 60%;
192
+ position: relative;
193
+ left: 10px;
194
+ opacity: 0.3;
195
+ top: 8px;
196
+ }
66
197
 
67
- .description-header {
68
- flex-direction: column;
69
- width: 100%;
70
- display: flex;
71
- justify-content: center;
72
- align-items: center;
73
- height: 400px;
74
- padding: 16px 0px;
75
- }
198
+ .sales {
199
+ width: 20%;
200
+ text-align: right;
201
+ font-size: 14px;
202
+ color: #5f5b5b;
203
+ position: relative;
204
+ right: 18px;
205
+ }
76
206
 
77
-
78
- .product-header {
79
- display: flex;
80
- justify-content: end;
81
- font-weight: bold;
82
- width: 100%;
83
- // padding: 0px 24px;
84
- }
85
-
86
- .product-header span {
87
- color: #555;
207
+ .stock {
208
+ width: 20%;
209
+ text-align: right;
210
+ font-size: 14px;
211
+ color: #5f5b5b;
212
+ position: relative;
213
+ }
214
+
215
+ .show-slides-not-data{
216
+ display: flex;
217
+ justify-content: center;
218
+ align-items: center;
219
+ width: 444px;
220
+ height: 100%;
221
+ font-size: 14px;
222
+ color: #5f5b5b;
223
+ }
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;
88
234
  }
89
-
90
-
91
- .header-sales {
92
- width: 40%;
93
- text-align: right;
235
+ .top-sellings-products-wrapper .panel .description .description-container-dash-selling .mbg-h-c-tone-s-icon-dash{
236
+ position: relative;
237
+ top: 12px;
94
238
  }
95
-
96
- .header-stock {
97
- width: 20%;
98
- text-align: right;
239
+
240
+ .top-sellings-products-wrapper .panel .description .line-pay-selling {
241
+ background: #737373;
242
+ top: 9px;
99
243
  }
100
-
101
- .product-list {
102
-
103
- width: 100%;
244
+
245
+ .top-sellings-products-wrapper .description-header{
246
+ position: relative;
247
+ top: 15px;
104
248
  }
105
-
106
- .product-item {
107
- display: block;
108
- padding: 0;
109
- padding: 0px 23px 0px 0px;
110
-
249
+
250
+ .top-sellings-products-wrapper .panel .show-slides-not-data{
251
+ width: 520px;
111
252
  }
112
-
113
- .fake-chart {
114
- width: 100%;
115
- height: 100%;
116
- position: relative;
253
+ }
254
+
255
+ @media screen and (max-width: 1728px) {
256
+ .top-sellings-products-wrapper .panel {
257
+ margin-left: 55px;
117
258
  border-radius: 10px;
118
- padding: 0px;
119
- margin: 0px;
259
+ background: #FFF;
120
260
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
121
- overflow: hidden;
122
- flex: 1;
123
261
  display: flex;
262
+ flex-direction: column;
263
+ width: 100%;
264
+ height: 400px;
124
265
  }
125
-
126
- .swiper-container {
127
- width: 100%;
128
- overflow: hidden;
129
- height: 350px;
130
- position: relative;
131
-
266
+
267
+ .top-sellings-products-wrapper .panel .show-slides-not-data{
268
+ width: 520px;
269
+ padding-right: 72px;
270
+
132
271
  }
133
-
134
- .swiper-pagination {
135
- display: flex;
136
- gap: 5px;
137
- }
138
-
139
- .swiper-pagination-bullet {
140
- width: 10px;
141
- height: 10px;
142
- background-color: #606A90;
143
- border-radius: 50%;
144
- opacity: 0.5;
145
- }
146
-
147
- .swiper-pagination-bullet-active {
148
- background-color: #0EBCBD;
149
- opacity: 1;
150
- }
151
-
152
-
153
- .segment-item {
154
- display: flex;
155
- justify-content: space-between;
156
- padding: 6px 0;
157
- }
158
-
159
- .name {
160
- width: 70%;
161
- max-width: 50%;
162
- white-space: nowrap;
163
- overflow: hidden;
164
- text-overflow: ellipsis;
165
- position: relative;
166
- font-size: 14px;
167
- color: #5f5b5b;
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;
168
280
  }
169
-
170
- .tooltip-inner {
171
- background: #0EBCBD !important;
172
- font-weight: bold;
173
- color: #FFFFFF;
174
- }
175
-
176
- .line-block-top{
177
- height: 1px;
178
- background: black;
179
- width: 60%;
180
- position: relative;
181
- left: 10px;
182
- opacity: 0.3;
183
- top: 8px;
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;
184
285
  }
185
-
186
- .sales {
187
- width: 20%;
188
- text-align: right;
189
- font-size: 14px;
190
- color: #5f5b5b;
191
- position: relative;
192
- right: 18px;
286
+
287
+ .top-sellings-products-wrapper .panel .description .line-pay-selling {
288
+ background: #737373;
289
+ top: 12px;
193
290
  }
194
-
195
- .stock {
196
- width: 20%;
197
- text-align: right;
198
- font-size: 14px;
199
- color: #5f5b5b;
200
- position: relative;
291
+
292
+ .top-sellings-products-wrapper .description-header{
293
+ position: relative;
294
+ top: 20px;
201
295
  }
202
-
203
- .show-slides-not-data{
204
- display: flex;
205
- justify-content: center;
206
- align-items: center;
207
- width: 444px;
208
- height: 100%;
209
- font-size: 14px;
210
- color: #5f5b5b;
296
+ .top-sellings-products-wrapper .panel .description-header .loading-indicator {
297
+ position: absolute;
298
+ left: 97%;
211
299
  }
212
-
213
-
214
-
215
-
216
-
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
+
438
+
439
+
@@ -16,7 +16,6 @@ class MbgTopSellingsProducts {
16
16
  private oneMonthInterval
17
17
  private threeMonthInterval
18
18
  private oneYearInterval
19
- private loadingChart: boolean
20
19
 
21
20
  constructor(
22
21
  public $scope,
@@ -28,7 +27,6 @@ class MbgTopSellingsProducts {
28
27
  ) {}
29
28
 
30
29
  async $onInit() {
31
- this.loadingChart = true
32
30
  this.isBlockValuesTopSellingsProducts =
33
31
  !this.allowedToSee || !this.isPermissionTopSellingsProducts
34
32
  this.$scope.$watch(
@@ -67,8 +65,6 @@ class MbgTopSellingsProducts {
67
65
  this.transformeParseFloat(this.oneMonthInterval)
68
66
  this.transformeParseFloat(this.threeMonthInterval)
69
67
  this.transformeParseFloat(this.oneYearInterval)
70
-
71
- this.loadingChart = false
72
68
  }
73
69
 
74
70
  transformeParseFloat(array) {
@@ -175,7 +171,6 @@ const mbgTopSellingsProducts = {
175
171
  isPermissionTopSellingsProducts: '=?',
176
172
  isBlockValuesTopSellingsProducts: '=?',
177
173
  isProductsTopSellings: '=?',
178
- loading: '=?',
179
174
  },
180
175
  template,
181
176
  controller: MbgTopSellingsProducts,