@desynova-digital/components 8.19.26 → 8.19.28

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 (3) hide show
  1. package/atoms/icon/icons.json +101 -30
  2. package/molecules/table/table.js +3 -3
  3. package/package.json +2 -2
package/atoms/icon/icons.json CHANGED
@@ -16,7 +16,9 @@
16
16
  "height": 18
17
17
  },
18
18
  "arrow-left": {
19
- "paths": ["M16 7H3.83l5.59-5.59L8 0 0 8l8 8 1.41-1.41L3.83 9H16z"],
19
+ "paths": [
20
+ "M16 7H3.83l5.59-5.59L8 0 0 8l8 8 1.41-1.41L3.83 9H16z"
21
+ ],
20
22
  "width": 16,
21
23
  "height": 16
22
24
  },
@@ -36,7 +38,9 @@
36
38
  "height": 24
37
39
  },
38
40
  "chevron-down": {
39
- "paths": ["M16 0l8 8 10-10z"],
41
+ "paths": [
42
+ "M16 0l8 8 10-10z"
43
+ ],
40
44
  "width": 14,
41
45
  "height": 14,
42
46
  "transform": "translate(-17,-2)"
@@ -148,7 +152,9 @@
148
152
  "height": 17
149
153
  },
150
154
  "ingest-angle-right": {
151
- "paths": ["M.912 8.912L4.73 5.087.912 1.262 2.088.087l5 5-5 5z"],
155
+ "paths": [
156
+ "M.912 8.912L4.73 5.087.912 1.262 2.088.087l5 5-5 5z"
157
+ ],
152
158
  "width": 8,
153
159
  "height": 11
154
160
  },
@@ -247,7 +253,9 @@
247
253
  "height": 14
248
254
  },
249
255
  "angle-left": {
250
- "paths": ["M6 0 L0 6 L6 12"],
256
+ "paths": [
257
+ "M6 0 L0 6 L6 12"
258
+ ],
251
259
  "width": 10,
252
260
  "height": 20,
253
261
  "transform": "translate(2, 2)",
@@ -255,7 +263,9 @@
255
263
  "strokeWidth": 2
256
264
  },
257
265
  "angle-right": {
258
- "paths": ["M0 0 L6 6 L0 12"],
266
+ "paths": [
267
+ "M0 0 L6 6 L0 12"
268
+ ],
259
269
  "width": 10,
260
270
  "height": 20,
261
271
  "transform": "translate(2, 2)",
@@ -263,7 +273,10 @@
263
273
  "strokeWidth": 2
264
274
  },
265
275
  "angle-left-double": {
266
- "paths": ["M6 0 L0 6 L6 12", "M12 0 L6 6 L12 12"],
276
+ "paths": [
277
+ "M6 0 L0 6 L6 12",
278
+ "M12 0 L6 6 L12 12"
279
+ ],
267
280
  "width": 20,
268
281
  "height": 20,
269
282
  "transform": "translate(2, 2)",
@@ -271,7 +284,10 @@
271
284
  "strokeWidth": 2
272
285
  },
273
286
  "angle-right-double": {
274
- "paths": ["M0 0 L6 6 L0 12", "M6 0 L12 6 L6 12"],
287
+ "paths": [
288
+ "M0 0 L6 6 L0 12",
289
+ "M6 0 L12 6 L6 12"
290
+ ],
275
291
  "width": 20,
276
292
  "height": 20,
277
293
  "transform": "translate(2, 2)",
@@ -279,22 +295,30 @@
279
295
  "strokeWidth": 2
280
296
  },
281
297
  "angle-bottom": {
282
- "paths": ["M1.645 0L7 5.343 12.355 0 14 1.645l-7 7-7-7z"],
298
+ "paths": [
299
+ "M1.645 0L7 5.343 12.355 0 14 1.645l-7 7-7-7z"
300
+ ],
283
301
  "width": 14,
284
302
  "height": 9
285
303
  },
286
304
  "first-page": {
287
- "paths": ["M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"],
305
+ "paths": [
306
+ "M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"
307
+ ],
288
308
  "width": 24,
289
309
  "height": 24
290
310
  },
291
311
  "last-page": {
292
- "paths": ["M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"],
312
+ "paths": [
313
+ "M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"
314
+ ],
293
315
  "width": 24,
294
316
  "height": 24
295
317
  },
296
318
  "play": {
297
- "paths": ["M61 27 61 52.3333333 81 39.6666667z"],
319
+ "paths": [
320
+ "M61 27 61 52.3333333 81 39.6666667z"
321
+ ],
298
322
  "width": 20,
299
323
  "height": 26,
300
324
  "transform": "translate(-60, -26)"
@@ -371,7 +395,9 @@
371
395
  "height": 14
372
396
  },
373
397
  "send": {
374
- "paths": ["M.01 17.143L20 8.57.01 0 0 6.667 14.286 8.57 0 10.476z"],
398
+ "paths": [
399
+ "M.01 17.143L20 8.57.01 0 0 6.667 14.286 8.57 0 10.476z"
400
+ ],
375
401
  "width": 20,
376
402
  "height": 18
377
403
  },
@@ -544,7 +570,9 @@
544
570
  "height": 17
545
571
  },
546
572
  "check": {
547
- "paths": ["M5.09 9.636L1.274 5.818 0 7.091l5.09 5.09L16 1.274 14.727 0z"],
573
+ "paths": [
574
+ "M5.09 9.636L1.274 5.818 0 7.091l5.09 5.09L16 1.274 14.727 0z"
575
+ ],
548
576
  "width": 16,
549
577
  "height": 13
550
578
  },
@@ -588,7 +616,10 @@
588
616
  "fillRule": "evenodd"
589
617
  },
590
618
  "align_bottom": {
591
- "paths": ["M.5.5h23v15H.5z", "M4 10v1.778h16V10z"],
619
+ "paths": [
620
+ "M.5.5h23v15H.5z",
621
+ "M4 10v1.778h16V10z"
622
+ ],
592
623
  "width": 24,
593
624
  "height": 16
594
625
  },
@@ -600,7 +631,10 @@
600
631
  "height": 16
601
632
  },
602
633
  "align_top": {
603
- "paths": ["M.5.5h23v15H.5z", "M4 4v1.778h16V4z"],
634
+ "paths": [
635
+ "M.5.5h23v15H.5z",
636
+ "M4 4v1.778h16V4z"
637
+ ],
604
638
  "width": 16,
605
639
  "height": 16
606
640
  },
@@ -612,7 +646,10 @@
612
646
  "height": 16
613
647
  },
614
648
  "align_middle": {
615
- "paths": ["M.5.5h23v15H.5z", "M4 7v1.778h16V7z"],
649
+ "paths": [
650
+ "M.5.5h23v15H.5z",
651
+ "M4 7v1.778h16V7z"
652
+ ],
616
653
  "width": 16,
617
654
  "height": 16
618
655
  },
@@ -652,7 +689,9 @@
652
689
  "height": 15
653
690
  },
654
691
  "mute": {
655
- "paths": ["M0 5.556v6.666h4.444L10 17.778V0L4.444 5.556z"],
692
+ "paths": [
693
+ "M0 5.556v6.666h4.444L10 17.778V0L4.444 5.556z"
694
+ ],
656
695
  "width": 10,
657
696
  "height": 18
658
697
  },
@@ -776,7 +815,9 @@
776
815
  "height": 14
777
816
  },
778
817
  "expand": {
779
- "paths": ["M6 0 L0 6 L6 12"],
818
+ "paths": [
819
+ "M6 0 L0 6 L6 12"
820
+ ],
780
821
  "width": 20,
781
822
  "height": 14,
782
823
  "transform": "translate(16, 4) rotate(90)",
@@ -784,7 +825,9 @@
784
825
  "strokeWidth": 2
785
826
  },
786
827
  "collapse": {
787
- "paths": ["M0 0 L6 6 L0 12"],
828
+ "paths": [
829
+ "M0 0 L6 6 L0 12"
830
+ ],
788
831
  "width": 20,
789
832
  "height": 14,
790
833
  "transform": "translate(16, 4) rotate(90)",
@@ -799,7 +842,9 @@
799
842
  "height": 30
800
843
  },
801
844
  "filter": {
802
- "paths": ["M7 12h4v-2H7v2zM0 0v2h18V0H0zm3 7h12V5H3v2z"],
845
+ "paths": [
846
+ "M7 12h4v-2H7v2zM0 0v2h18V0H0zm3 7h12V5H3v2z"
847
+ ],
803
848
  "width": 18,
804
849
  "height": 12
805
850
  },
@@ -900,7 +945,9 @@
900
945
  "height": 22
901
946
  },
902
947
  "carousel": {
903
- "paths": ["M7 19h10V4H7v15zm-5-2h4V6H2v11zM18 6v11h4V6h-4z"],
948
+ "paths": [
949
+ "M7 19h10V4H7v15zm-5-2h4V6H2v11zM18 6v11h4V6h-4z"
950
+ ],
904
951
  "width": 24,
905
952
  "height": 24
906
953
  },
@@ -983,7 +1030,9 @@
983
1030
  "height": 16
984
1031
  },
985
1032
  "long-arrow": {
986
- "paths": ["M0 5h14.17l-3.58-3.59L12 0l6 6-6 6-1.41-1.41L14.17 7H0z"],
1033
+ "paths": [
1034
+ "M0 5h14.17l-3.58-3.59L12 0l6 6-6 6-1.41-1.41L14.17 7H0z"
1035
+ ],
987
1036
  "width": 18,
988
1037
  "height": 12
989
1038
  },
@@ -1017,7 +1066,9 @@
1017
1066
  "height": 12
1018
1067
  },
1019
1068
  "delivery": {
1020
- "paths": ["M.006 10.286L12 5.143.006 0 0 4l8.571 1.143L0 6.286z"],
1069
+ "paths": [
1070
+ "M.006 10.286L12 5.143.006 0 0 4l8.571 1.143L0 6.286z"
1071
+ ],
1021
1072
  "width": 12,
1022
1073
  "height": 11
1023
1074
  },
@@ -1156,19 +1207,25 @@
1156
1207
  "height": 16
1157
1208
  },
1158
1209
  "text_position_top": {
1159
- "paths": ["M0 0H24V16H0V0ZM2 2H22V14H2V2ZM4 5.77778V4H20V5.77778H4Z"],
1210
+ "paths": [
1211
+ "M0 0H24V16H0V0ZM2 2H22V14H2V2ZM4 5.77778V4H20V5.77778H4Z"
1212
+ ],
1160
1213
  "width": 24,
1161
1214
  "height": 20,
1162
1215
  "fillRule": "evenodd"
1163
1216
  },
1164
1217
  "text_position_center": {
1165
- "paths": ["M0 0H24V16H0V0ZM2 2H22V14H2V2ZM4 8.77778V7H20V8.77778H4Z"],
1218
+ "paths": [
1219
+ "M0 0H24V16H0V0ZM2 2H22V14H2V2ZM4 8.77778V7H20V8.77778H4Z"
1220
+ ],
1166
1221
  "width": 24,
1167
1222
  "height": 20,
1168
1223
  "fillRule": "evenodd"
1169
1224
  },
1170
1225
  "text_position_bottom": {
1171
- "paths": ["M0 0H24V16H0V0ZM2 2H22V14H2V2ZM4 11.7778V10H20V11.7778H4Z"],
1226
+ "paths": [
1227
+ "M0 0H24V16H0V0ZM2 2H22V14H2V2ZM4 11.7778V10H20V11.7778H4Z"
1228
+ ],
1172
1229
  "width": 24,
1173
1230
  "height": 20,
1174
1231
  "fillRule": "evenodd"
@@ -1292,7 +1349,10 @@
1292
1349
  "height": 24
1293
1350
  },
1294
1351
  "publishing": {
1295
- "paths": ["M15.5 5H11l5 7-5 7h4.5l5-7z", "M8.5 5H4l5 7-5 7h4.5l5-7z"],
1352
+ "paths": [
1353
+ "M15.5 5H11l5 7-5 7h4.5l5-7z",
1354
+ "M8.5 5H4l5 7-5 7h4.5l5-7z"
1355
+ ],
1296
1356
  "width": 24,
1297
1357
  "height": 24
1298
1358
  },
@@ -1333,7 +1393,9 @@
1333
1393
  "height": 12
1334
1394
  },
1335
1395
  "triangle-carat": {
1336
- "paths": ["M3.5 5.6001L7 9.77516e-05H0L3.5 5.6001Z"],
1396
+ "paths": [
1397
+ "M3.5 5.6001L7 9.77516e-05H0L3.5 5.6001Z"
1398
+ ],
1337
1399
  "width": 7,
1338
1400
  "height": 6
1339
1401
  },
@@ -1366,7 +1428,9 @@
1366
1428
  "height": 13
1367
1429
  },
1368
1430
  "remove_small": {
1369
- "paths": ["M6 0.929408H0V0.0722656H6V0.929408Z"],
1431
+ "paths": [
1432
+ "M6 0.929408H0V0.0722656H6V0.929408Z"
1433
+ ],
1370
1434
  "width": 6,
1371
1435
  "height": 1
1372
1436
  },
@@ -1432,6 +1496,13 @@
1432
1496
  ],
1433
1497
  "width": 80,
1434
1498
  "height": 80
1499
+ },
1500
+ "cloud_x": {
1501
+ "paths": [
1502
+ "M8 0C3.584 0 0 3.584 0 8C0 12.416 3.584 16 8 16C12.416 16 16 12.416 16 8C16 3.584 12.416 0 8 0ZM8 14.4C4.472 14.4 1.6 11.528 1.6 8C1.6 4.472 4.472 1.6 8 1.6C11.528 1.6 14.4 4.472 14.4 8C14.4 11.528 11.528 14.4 8 14.4ZM11.432 6.552C11.112 4.944 9.704 3.736 8 3.736C6.648 3.736 5.48 4.504 4.896 5.624C3.488 5.768 2.4 6.96 2.4 8.4C2.4 9.944 3.656 11.2 5.2 11.2H11.264C12.552 11.2 13.6 10.152 13.6 8.864C13.6 7.632 12.64 6.632 11.432 6.552ZM11.2 9.6H5.2C4.536 9.6 4 9.064 4 8.4C4 7.736 4.536 7.2 5.2 7.2H5.92L6.312 6.36C6.64 5.728 7.288 5.336 8 5.336C8.904 5.336 9.688 5.976 9.864 6.864L10.088 8H11.2C11.64 8 12 8.36 12 8.8C12 9.24 11.64 9.6 11.2 9.6Z"
1503
+ ],
1504
+ "width": 16,
1505
+ "height": 16
1435
1506
  }
1436
1507
  }
1437
- }
1508
+ }
package/molecules/table/table.js CHANGED
@@ -14,7 +14,7 @@ var _templateObject = _taggedTemplateLiteral(["\n border-bottom: 1px solid #303
14
14
  _templateObject2 = _taggedTemplateLiteral(["\n & .avatar-details {\n display: none;\n }\n\n .initial-placeholder {\n background: #78909c;\n width: 24px;\n height: 24px;\n text-align: center;\n border-radius: 100%;\n font-size: 12px;\n color: #fff;\n }\n"], ["\n & .avatar-details {\n display: none;\n }\n\n .initial-placeholder {\n background: #78909c;\n width: 24px;\n height: 24px;\n text-align: center;\n border-radius: 100%;\n font-size: 12px;\n color: #fff;\n }\n"]),
15
15
  _templateObject3 = _taggedTemplateLiteral(["\n\n position: absolute;\n top: 0;\n left: 55px;\n width: 0px;\n overflow: hidden;\n transition: all 0.4s ease;\n height: 38px;\n background: ", ";//#ccc;\n display: flex;\n align-items: center;\n &.show{\n width: 146px;\n overflow: visible;\n }\n\n div.action-icons-common{\n white-space: nowrap;\n &>button{\n margin-right: 15px;\n display: inline-flex;\n }\n &>button:last-child{\n margin-right: 0px;\n }\n\n .tooltip-container{\n display: inline-block;\n margin: 0px 5px;\n }\n\n .action-button{\n // padding: 0px;\n // border-radius: 50%;\n // -webkit-appearance: none;\n // cursor:pointer;\n // align-items: center;\n // justify-content: center;\n // height: 25px;\n // width: 25px;\n\n &.default{\n //background: #666666;\n //border:1px solid #666666;\n &:hover{\n //background: #8e8e8e;\n //border:1px solid #8e8e8e;\n }\n }\n &.play{\n background: #33D7CE;\n border:1px solid #33D7CE;\n &:hover{\n background: #39cac2;\n border:1px solid #39cac2;\n }\n }\n }\n\n"], ["\n\n position: absolute;\n top: 0;\n left: 55px;\n width: 0px;\n overflow: hidden;\n transition: all 0.4s ease;\n height: 38px;\n background: ", ";//#ccc;\n display: flex;\n align-items: center;\n &.show{\n width: 146px;\n overflow: visible;\n }\n\n div.action-icons-common{\n white-space: nowrap;\n &>button{\n margin-right: 15px;\n display: inline-flex;\n }\n &>button:last-child{\n margin-right: 0px;\n }\n\n .tooltip-container{\n display: inline-block;\n margin: 0px 5px;\n }\n\n .action-button{\n // padding: 0px;\n // border-radius: 50%;\n // -webkit-appearance: none;\n // cursor:pointer;\n // align-items: center;\n // justify-content: center;\n // height: 25px;\n // width: 25px;\n\n &.default{\n //background: #666666;\n //border:1px solid #666666;\n &:hover{\n //background: #8e8e8e;\n //border:1px solid #8e8e8e;\n }\n }\n &.play{\n background: #33D7CE;\n border:1px solid #33D7CE;\n &:hover{\n background: #39cac2;\n border:1px solid #39cac2;\n }\n }\n }\n\n"]),
16
16
  _templateObject4 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n margin: 10px 0;\n /* box-shadow: 0 0 10px 0 rgba(18, 29, 41); */\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n position:relative\n\n ", "\n\ninput[type='checkbox']{ height: 0; width: 0; display:none;}\n\ninput[type='checkbox'] + label{\n position: relative;\n display: flex;\n margin:0;\n align-items: center;\n color: #9e9e9e;\n transition: color 250ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type='checkbox'] + label > span{\n display: flex;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n background: transparent;\n border: 1px solid #9E9E9E;\n border-radius: 50%;\n cursor: pointer; \n transition: all 250ms cubic-bezier(.4,.0,.23,1);\n}\n\n\ninput[type='checkbox'] + label:hover > span,\ninput[type='checkbox']:focus + label > span{\n background: rgba(255,255,255,.1);\n}\n\ninput[type='checkbox']:checked + label > span{\n border: 10px solid #49dad0\n animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type='checkbox']:checked + label > span:before{\n content: \"\";\n position: absolute;\n top: 6px;\n left: 4px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0% 100%;\n animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;\n}\n\n@keyframes shrink-bounce{\n 0%{\n transform: scale(1);\n }\n 33%{ \n transform: scale(.85);\n }\n 100%{\n transform: scale(1); \n }\n}\n@keyframes checkbox-check{\n 0%{\n width: 0;\n height: 0;\n border-color: #FFF;\n transform: translate3d(0,0,0) rotate(45deg);\n }\n 33%{\n width: 4px;\n height: 0;\n transform: translate3d(0,0,0) rotate(45deg);\n }\n 100%{ \n width: 4px;\n height: 9px; \n border-color: #FFF;\n transform: translate3d(0,-.5em,0) rotate(45deg);\n }\n}\n \n"], ["\n width: 100%;\n height: 100%;\n margin: 10px 0;\n /* box-shadow: 0 0 10px 0 rgba(18, 29, 41); */\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n position:relative\n\n ", "\n\ninput[type='checkbox']{ height: 0; width: 0; display:none;}\n\ninput[type='checkbox'] + label{\n position: relative;\n display: flex;\n margin:0;\n align-items: center;\n color: #9e9e9e;\n transition: color 250ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type='checkbox'] + label > span{\n display: flex;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n background: transparent;\n border: 1px solid #9E9E9E;\n border-radius: 50%;\n cursor: pointer; \n transition: all 250ms cubic-bezier(.4,.0,.23,1);\n}\n\n\ninput[type='checkbox'] + label:hover > span,\ninput[type='checkbox']:focus + label > span{\n background: rgba(255,255,255,.1);\n}\n\ninput[type='checkbox']:checked + label > span{\n border: 10px solid #49dad0\n animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type='checkbox']:checked + label > span:before{\n content: \"\";\n position: absolute;\n top: 6px;\n left: 4px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0% 100%;\n animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;\n}\n\n@keyframes shrink-bounce{\n 0%{\n transform: scale(1);\n }\n 33%{ \n transform: scale(.85);\n }\n 100%{\n transform: scale(1); \n }\n}\n@keyframes checkbox-check{\n 0%{\n width: 0;\n height: 0;\n border-color: #FFF;\n transform: translate3d(0,0,0) rotate(45deg);\n }\n 33%{\n width: 4px;\n height: 0;\n transform: translate3d(0,0,0) rotate(45deg);\n }\n 100%{ \n width: 4px;\n height: 9px; \n border-color: #FFF;\n transform: translate3d(0,-.5em,0) rotate(45deg);\n }\n}\n \n"]),
17
- _templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 20px;\n .table-title {\n font-family: 'SFUIText-Medium';\n font-size: 18px;\n letter-spacing: 0.3px;\n color: ", ";\n }\n .title-right-area {\n display: flex;\n align-items: center;\n & > div {\n margin-left: 10px;\n }\n\n .refresh-section {\n position: relative;\n\n @keyframes glowing {\n 0% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 15% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 30% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 45% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 60% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 75% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 90% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 100% {\n box-shadow: 0 8px 8px 0 rgba(18, 29, 41, 0.2);\n }\n }\n\n .red-dot {\n position: absolute;\n top: 0;\n right 0;\n width: 16px\n height: 16px;\n border-radius: 100%;\n background-color: rgba(255, 108, 86, 0.1);\n &:after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 6px;\n height: 6px;\n background-color: #FF6C56;\n border-radius: 100%;\n transform: translate(-50%, -50%);\n }\n \n }\n\n .tooltip {\n font-family: 'SFUIText-Regular';\n font-size: 12px;\n top: -44px;\n right: -5px;\n position: absolute;\n width: 200px;\n background-color: #00cec6;\n color: #0c141d;\n border-radius: 20px;\n padding: 10px 5px;\n &:after {\n content: '';\n border-top: 6px dashed #00cec6;\n border-right: 6px solid transparent;\n border-left: 6px solid transparent;\n position: absolute;\n bottom: -6px;\n right: 15px;\n }\n }\n\n .refresh-btn {\n background-color: #121d28;\n border: 1px solid #121d28;\n padding: 7px;\n border-radius: 50%;\n cursor: pointer;\n\n &:hover {\n path {\n fill: #fff;\n }\n }\n \n &.active {\n background-color: #00cec6;\n border-color: #00cec6;\n transition: all 0.2s ease-in-out;\n path {\n transition: all 0.2s ease-in-out;\n fill: #fff;\n }\n }\n\n &.active {\n animation: glowing 5000ms infinite;\n }\n\n > button {\n border: none;\n background-color: transparent;\n position: relative;\n path {\n fill: #afb2ba;\n }\n }\n }\n }\n }\n .column-show-holder {\n position: relative;\n text-align: left;\n\n .column-show-icon {\n width: 30px;\n height: 30px;\n background: #121d28;\n border-radius: 50%;\n padding: 7px 7px;\n\n &:hover {\n path {\n fill: #fff;\n transition: all 0.4s ease-out;\n }\n }\n }\n\n .column-show-list-box {\n position: absolute;\n display: none;\n //display:block;\n width: 345px;\n right: 0;\n z-index: 101;\n padding-top: 7px;\n top: 29px;\n\n & > div {\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 1);\n }\n\n &:before {\n content: '';\n position: absolute;\n /* left: 42%; */\n /* top: 100%; */\n width: 0;\n height: 0;\n\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 6px solid #00cec6;\n transform: translate(327px, -6px);\n }\n\n .column-show-info {\n background: #182738;\n color: #afb2ba;\n font-family: 'SFUIText-Regular';\n padding: 15px;\n font-size: 12px;\n border-bottom: solid 1px #303f51;\n line-height: 15px;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n .column-show-info-header {\n font-family: SFUIText-Medium;\n font-size: 14px;\n padding-bottom: 5px;\n }\n }\n\n .column-show-list {\n background: #182738;\n color: #fff;\n padding: 5px;\n border-bottom-left-radius: 2px;\n border-bottom-right-radius: 2px;\n & .label {\n margin-right: 0px;\n\n & > input {\n & ~ span {\n color: #fff;\n background: #303f51;\n &:hover {\n background: #303f51;\n color: #63d0c7;\n }\n }\n\n &:checked ~ span {\n background: #00cec6;\n &:hover {\n background: #00cec6;\n color: #fff;\n }\n }\n }\n }\n }\n }\n\n &:hover {\n .column-show-list-box {\n display: block;\n }\n }\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 20px;\n .table-title {\n font-family: 'SFUIText-Medium';\n font-size: 18px;\n letter-spacing: 0.3px;\n color: ", ";\n }\n .title-right-area {\n display: flex;\n align-items: center;\n & > div {\n margin-left: 10px;\n }\n\n .refresh-section {\n position: relative;\n\n @keyframes glowing {\n 0% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 15% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 30% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 45% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 60% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 75% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 90% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 100% {\n box-shadow: 0 8px 8px 0 rgba(18, 29, 41, 0.2);\n }\n }\n\n .red-dot {\n position: absolute;\n top: 0;\n right 0;\n width: 16px\n height: 16px;\n border-radius: 100%;\n background-color: rgba(255, 108, 86, 0.1);\n &:after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 6px;\n height: 6px;\n background-color: #FF6C56;\n border-radius: 100%;\n transform: translate(-50%, -50%);\n }\n \n }\n\n .tooltip {\n font-family: 'SFUIText-Regular';\n font-size: 12px;\n top: -44px;\n right: -5px;\n position: absolute;\n width: 200px;\n background-color: #00cec6;\n color: #0c141d;\n border-radius: 20px;\n padding: 10px 5px;\n &:after {\n content: '';\n border-top: 6px dashed #00cec6;\n border-right: 6px solid transparent;\n border-left: 6px solid transparent;\n position: absolute;\n bottom: -6px;\n right: 15px;\n }\n }\n\n .refresh-btn {\n background-color: #121d28;\n border: 1px solid #121d28;\n padding: 7px;\n border-radius: 50%;\n cursor: pointer;\n\n &:hover {\n path {\n fill: #fff;\n }\n }\n \n &.active {\n background-color: #00cec6;\n border-color: #00cec6;\n transition: all 0.2s ease-in-out;\n path {\n transition: all 0.2s ease-in-out;\n fill: #fff;\n }\n }\n\n &.active {\n animation: glowing 5000ms infinite;\n }\n\n > button {\n border: none;\n background-color: transparent;\n position: relative;\n path {\n fill: #afb2ba;\n }\n }\n }\n }\n }\n .column-show-holder {\n position: relative;\n text-align: left;\n\n .column-show-icon {\n width: 30px;\n height: 30px;\n background: #121d28;\n border-radius: 50%;\n padding: 7px 7px;\n\n &:hover {\n path {\n fill: #fff;\n transition: all 0.4s ease-out;\n }\n }\n }\n\n .column-show-list-box {\n position: absolute;\n display: none;\n //display:block;\n width: 345px;\n right: 0;\n z-index: 101;\n padding-top: 7px;\n top: 29px;\n\n & > div {\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 1);\n }\n\n &:before {\n content: '';\n position: absolute;\n /* left: 42%; */\n /* top: 100%; */\n width: 0;\n height: 0;\n\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 6px solid #00cec6;\n transform: translate(327px, -6px);\n }\n\n .column-show-info {\n background: #182738;\n color: #afb2ba;\n font-family: 'SFUIText-Regular';\n padding: 15px;\n font-size: 12px;\n border-bottom: solid 1px #303f51;\n line-height: 15px;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n .column-show-info-header {\n font-family: SFUIText-Medium;\n font-size: 14px;\n padding-bottom: 5px;\n }\n }\n\n .column-show-list {\n background: #182738;\n color: #fff;\n padding: 5px;\n border-bottom-left-radius: 2px;\n border-bottom-right-radius: 2px;\n & .label {\n margin-right: 0px;\n\n & > input {\n & ~ span {\n color: #fff;\n background: #303f51;\n &:hover {\n background: #303f51;\n color: #63d0c7;\n }\n }\n\n &:checked ~ span {\n background: #00cec6;\n &:hover {\n background: #00cec6;\n color: #fff;\n }\n }\n }\n }\n }\n }\n\n &:hover {\n .column-show-list-box {\n display: block;\n }\n }\n }\n"]),
17
+ _templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 20px;\n .table-title {\n font-family: 'SFUIText-Medium';\n font-size: 18px;\n letter-spacing: 0.3px;\n color: ", ";\n }\n .title-right-area {\n display: flex;\n align-items: center;\n & > div {\n margin-left: 10px;\n }\n\n .refresh-section {\n position: relative;\n\n @keyframes glowing {\n 0% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 15% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 30% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 45% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 60% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 75% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 90% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 100% {\n box-shadow: 0 8px 8px 0 rgba(18, 29, 41, 0.2);\n }\n }\n\n .red-dot {\n position: absolute;\n top: 0;\n right 0;\n width: 16px\n height: 16px;\n border-radius: 100%;\n background-color: rgba(255, 108, 86, 0.1);\n &:after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 6px;\n height: 6px;\n background-color: #FF6C56;\n border-radius: 100%;\n transform: translate(-50%, -50%);\n }\n \n }\n\n .tooltip {\n font-family: 'SFUIText-Regular';\n font-size: 12px;\n top: -38px;\n right: -66px;\n position: absolute;\n display: flex;\n justify-content: center;\n width: 170px;\n background-color: #00cec6;\n color: #0c141d;\n border-radius: 20px;\n padding: 10px 5px;\n &:after {\n content: '';\n border-top: 6px dashed #00cec6;\n border-right: 6px solid transparent;\n border-left: 6px solid transparent;\n position: absolute;\n bottom: -6px;\n right: 76px;\n }\n }\n\n .refresh-btn {\n background-color: #121d28;\n border: 1px solid #121d28;\n padding: 7px;\n border-radius: 50%;\n cursor: pointer;\n\n &:hover {\n path {\n fill: #fff;\n }\n }\n \n &.active {\n background-color: #00cec6;\n border-color: #00cec6;\n transition: all 0.2s ease-in-out;\n path {\n transition: all 0.2s ease-in-out;\n fill: #fff;\n }\n }\n\n &.active {\n animation: glowing 5000ms infinite;\n }\n\n > button {\n border: none;\n background-color: transparent;\n position: relative;\n path {\n fill: #afb2ba;\n }\n }\n }\n }\n }\n .column-show-holder {\n position: relative;\n text-align: left;\n\n .column-show-icon {\n width: 30px;\n height: 30px;\n background: #121d28;\n border-radius: 50%;\n padding: 7px 7px;\n\n &:hover {\n path {\n fill: #fff;\n transition: all 0.4s ease-out;\n }\n }\n }\n\n .column-show-list-box {\n position: absolute;\n display: none;\n //display:block;\n width: 345px;\n right: 0;\n z-index: 101;\n padding-top: 7px;\n top: 29px;\n\n & > div {\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 1);\n }\n\n &:before {\n content: '';\n position: absolute;\n /* left: 42%; */\n /* top: 100%; */\n width: 0;\n height: 0;\n\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 6px solid #00cec6;\n transform: translate(327px, -6px);\n }\n\n .column-show-info {\n background: #182738;\n color: #afb2ba;\n font-family: 'SFUIText-Regular';\n padding: 15px;\n font-size: 12px;\n border-bottom: solid 1px #303f51;\n line-height: 15px;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n .column-show-info-header {\n font-family: SFUIText-Medium;\n font-size: 14px;\n padding-bottom: 5px;\n }\n }\n\n .column-show-list {\n background: #182738;\n color: #fff;\n padding: 5px;\n border-bottom-left-radius: 2px;\n border-bottom-right-radius: 2px;\n & .label {\n margin-right: 0px;\n\n & > input {\n & ~ span {\n color: #fff;\n background: #303f51;\n &:hover {\n background: #303f51;\n color: #63d0c7;\n }\n }\n\n &:checked ~ span {\n background: #00cec6;\n &:hover {\n background: #00cec6;\n color: #fff;\n }\n }\n }\n }\n }\n }\n\n &:hover {\n .column-show-list-box {\n display: block;\n }\n }\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 20px;\n .table-title {\n font-family: 'SFUIText-Medium';\n font-size: 18px;\n letter-spacing: 0.3px;\n color: ", ";\n }\n .title-right-area {\n display: flex;\n align-items: center;\n & > div {\n margin-left: 10px;\n }\n\n .refresh-section {\n position: relative;\n\n @keyframes glowing {\n 0% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 15% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 30% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 45% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 60% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 75% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 90% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 100% {\n box-shadow: 0 8px 8px 0 rgba(18, 29, 41, 0.2);\n }\n }\n\n .red-dot {\n position: absolute;\n top: 0;\n right 0;\n width: 16px\n height: 16px;\n border-radius: 100%;\n background-color: rgba(255, 108, 86, 0.1);\n &:after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 6px;\n height: 6px;\n background-color: #FF6C56;\n border-radius: 100%;\n transform: translate(-50%, -50%);\n }\n \n }\n\n .tooltip {\n font-family: 'SFUIText-Regular';\n font-size: 12px;\n top: -38px;\n right: -66px;\n position: absolute;\n display: flex;\n justify-content: center;\n width: 170px;\n background-color: #00cec6;\n color: #0c141d;\n border-radius: 20px;\n padding: 10px 5px;\n &:after {\n content: '';\n border-top: 6px dashed #00cec6;\n border-right: 6px solid transparent;\n border-left: 6px solid transparent;\n position: absolute;\n bottom: -6px;\n right: 76px;\n }\n }\n\n .refresh-btn {\n background-color: #121d28;\n border: 1px solid #121d28;\n padding: 7px;\n border-radius: 50%;\n cursor: pointer;\n\n &:hover {\n path {\n fill: #fff;\n }\n }\n \n &.active {\n background-color: #00cec6;\n border-color: #00cec6;\n transition: all 0.2s ease-in-out;\n path {\n transition: all 0.2s ease-in-out;\n fill: #fff;\n }\n }\n\n &.active {\n animation: glowing 5000ms infinite;\n }\n\n > button {\n border: none;\n background-color: transparent;\n position: relative;\n path {\n fill: #afb2ba;\n }\n }\n }\n }\n }\n .column-show-holder {\n position: relative;\n text-align: left;\n\n .column-show-icon {\n width: 30px;\n height: 30px;\n background: #121d28;\n border-radius: 50%;\n padding: 7px 7px;\n\n &:hover {\n path {\n fill: #fff;\n transition: all 0.4s ease-out;\n }\n }\n }\n\n .column-show-list-box {\n position: absolute;\n display: none;\n //display:block;\n width: 345px;\n right: 0;\n z-index: 101;\n padding-top: 7px;\n top: 29px;\n\n & > div {\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 1);\n }\n\n &:before {\n content: '';\n position: absolute;\n /* left: 42%; */\n /* top: 100%; */\n width: 0;\n height: 0;\n\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 6px solid #00cec6;\n transform: translate(327px, -6px);\n }\n\n .column-show-info {\n background: #182738;\n color: #afb2ba;\n font-family: 'SFUIText-Regular';\n padding: 15px;\n font-size: 12px;\n border-bottom: solid 1px #303f51;\n line-height: 15px;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n .column-show-info-header {\n font-family: SFUIText-Medium;\n font-size: 14px;\n padding-bottom: 5px;\n }\n }\n\n .column-show-list {\n background: #182738;\n color: #fff;\n padding: 5px;\n border-bottom-left-radius: 2px;\n border-bottom-right-radius: 2px;\n & .label {\n margin-right: 0px;\n\n & > input {\n & ~ span {\n color: #fff;\n background: #303f51;\n &:hover {\n background: #303f51;\n color: #63d0c7;\n }\n }\n\n &:checked ~ span {\n background: #00cec6;\n &:hover {\n background: #00cec6;\n color: #fff;\n }\n }\n }\n }\n }\n }\n\n &:hover {\n .column-show-list-box {\n display: block;\n }\n }\n }\n"]),
18
18
  _templateObject6 = _taggedTemplateLiteral(["\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n"], ["\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n"]),
19
19
  _templateObject7 = _taggedTemplateLiteral(["\n font-family: \"SFUIText-Regular\";\n font-size: 12px;\n letter-spacing: 0.4px;\n color: ", ";\n padding: 7px 14px;\n border-top: 1px solid ", ";\n text-align: left;\n vertical-align: middle;\n line-height: 2;\n width: auto;\n"], ["\n font-family: \"SFUIText-Regular\";\n font-size: 12px;\n letter-spacing: 0.4px;\n color: ", ";\n padding: 7px 14px;\n border-top: 1px solid ", ";\n text-align: left;\n vertical-align: middle;\n line-height: 2;\n width: auto;\n"]),
20
20
  _templateObject8 = _taggedTemplateLiteral([""], [""]),
@@ -1352,7 +1352,7 @@ var Table = function (_Component) {
1352
1352
  isRefreshActivated && _react2.default.createElement(
1353
1353
  "div",
1354
1354
  { className: "tooltip" },
1355
- "Refresh Records"
1355
+ "Refresh to get updated reports"
1356
1356
  ),
1357
1357
  isRefreshDotVisible && _react2.default.createElement("div", { className: "red-dot" }),
1358
1358
  (!tableLoading || tableLoadingAction) && _react2.default.createElement(
@@ -1389,7 +1389,7 @@ var Table = function (_Component) {
1389
1389
  _react2.default.createElement(
1390
1390
  "div",
1391
1391
  {
1392
- className: "" + (isRefreshActivated ? "refresh-btn active" : "refresh-btn"),
1392
+ className: "refresh-btn",
1393
1393
  onClick: function onClick() {
1394
1394
  return getTableData({ page: 1 }, false, true);
1395
1395
  }
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "8.19.26",
3
+ "version": "8.19.28",
4
4
  "description": "Components for Desynova Digital",
5
5
  "main": "index.js",
6
6
  "author": "desynova-digital",
7
7
  "license": "MIT",
8
8
  "repository": "desynova-digital",
9
9
  "dependencies": {
10
- "@desynova-digital/tokens": "8.19.26",
10
+ "@desynova-digital/tokens": "8.19.28",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },