@enki-tek/fms-web-components 0.0.22 → 0.0.24

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.
@@ -0,0 +1,664 @@
1
+ <script>
2
+ import { CardBody } from 'sveltestrap';
3
+ export let className;
4
+ </script>
5
+
6
+ <CardBody class='custom-cardicon-body {className}'>
7
+ <slot />
8
+ </CardBody>
9
+
10
+ <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
11
+ @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
12
+ @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
13
+ @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
14
+ @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
15
+ @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
16
+ :global(.custom-card-style) {
17
+ width: auto;
18
+ padding: 7px 10px;
19
+ display: flex;
20
+ flex-direction: column;
21
+ align-items: flex-start;
22
+ gap: 0 !important;
23
+ flex: 1 0 0;
24
+ border-radius: 10px;
25
+ border: 1px dashed #B8B8B8;
26
+ background: #ffffff;
27
+ }
28
+ :global(.cardicon-main) {
29
+ width: 100%;
30
+ display: flex;
31
+ padding: 10px;
32
+ justify-content: space-between;
33
+ align-items: flex-start;
34
+ align-self: stretch;
35
+ color: #000000;
36
+ font-size: 18px;
37
+ text-transform: capitalize;
38
+ }
39
+ :global(.custom-cardicon-body) {
40
+ width: 100%;
41
+ display: flex;
42
+ flex-direction: column;
43
+ position: relative;
44
+ padding: 1rem 1rem;
45
+ }
46
+ :global(.cardicon-content) {
47
+ width: 100%;
48
+ display: flex;
49
+ color: #444;
50
+ text-align: right;
51
+ font-size: 30px;
52
+ line-height: 40px;
53
+ }
54
+ :global(.cardicon-main .card-title) {
55
+ color: #000000;
56
+ font-size: 18px;
57
+ text-transform: capitalize;
58
+ }
59
+ :global(.cardicon-main i) {
60
+ width: 20px;
61
+ height: 20px;
62
+ }
63
+ :global(.cardicon-main), :global(.cardicon-content), :global(.cardicon-main .card-title) {
64
+ font-family: Roboto;
65
+ font-style: normal;
66
+ font-weight: 400;
67
+ line-height: 20px;
68
+ }
69
+ :global(.top) {
70
+ flex-direction: column;
71
+ }
72
+ :global(.bottom) {
73
+ flex-direction: column-reverse;
74
+ }
75
+ :global(.left) {
76
+ flex-direction: row-reverse;
77
+ }
78
+ :global(.right) {
79
+ flex-direction: row;
80
+ }
81
+ :global(.bottom-right) {
82
+ position: absolute;
83
+ bottom: 0;
84
+ right: 0;
85
+ flex-direction: row-reverse;
86
+ padding: 5px 10px;
87
+ }
88
+ :global(.bottom-left) {
89
+ position: absolute;
90
+ bottom: 0;
91
+ left: 0;
92
+ flex-direction: row;
93
+ padding: 5px 10px;
94
+ }
95
+ :global(.top-left) {
96
+ flex-direction: row;
97
+ padding: 0;
98
+ margin-left: -4px;
99
+ }
100
+ :global(.top-right) {
101
+ flex-direction: row-reverse;
102
+ }
103
+ :global(.ebg-none) {
104
+ background-color: #ffffff !important;
105
+ }
106
+ :global(.ebg-white) {
107
+ background-color: #ffffff;
108
+ }
109
+ :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
110
+ background-color: #3AC82E !important;
111
+ }
112
+ :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
113
+ background-color: #00A855;
114
+ }
115
+ :global(.ebg-secondaryLight, .eactive-secondaryLight:active, .ehover-secondaryLight:hover) {
116
+ background-color: #CBFFC7;
117
+ }
118
+ :global(.ebg-primary) {
119
+ background-color: #00AEE5;
120
+ }
121
+ :global(.ebg-primaryDark) {
122
+ background-color: #007FD8;
123
+ }
124
+ :global(.ebg-primaryLight) {
125
+ background-color: #CEF3FF;
126
+ }
127
+ :global(.ebg-danger) {
128
+ background-color: #FE4747;
129
+ }
130
+ :global(.ebg-dangerDark) {
131
+ background-color: #B02A37;
132
+ }
133
+ :global(.ebg-dangerLight) {
134
+ background-color: #FE4747;
135
+ }
136
+ :global(.ebg-warning) {
137
+ background-color: #FFBA3A;
138
+ }
139
+ :global(.ebg-warningDark) {
140
+ background-color: #997404;
141
+ color: #ffffff !important;
142
+ }
143
+ :global(.ebg-warningLight) {
144
+ background-color: #FFF3CD;
145
+ }
146
+ :global(.ebg-info) {
147
+ background-color: #0DCAF0;
148
+ }
149
+ :global(.ebg-infoDark) {
150
+ background-color: #087990;
151
+ }
152
+ :global(.ebg-infoLight) {
153
+ background-color: #9EEAF9;
154
+ }
155
+ :global(.ebg-success) {
156
+ background-color: #00A96B;
157
+ }
158
+ :global(.ebg-successDark) {
159
+ background-color: #146C43;
160
+ }
161
+ :global(.ebg-successLight) {
162
+ background-color: #D1E7DD;
163
+ }
164
+ :global(.ebg-gray100) {
165
+ background-color: #F8F9FA;
166
+ }
167
+ :global(.ebg-gray200) {
168
+ background-color: #E9ECEF;
169
+ }
170
+ :global(.ebg-gray300) {
171
+ background-color: #DEE2E6;
172
+ }
173
+ :global(.ebg-gray400) {
174
+ background-color: #CED4DA;
175
+ }
176
+ :global(.ebg-gray500) {
177
+ background-color: #adb5bd;
178
+ }
179
+ :global(.ebg-gray600) {
180
+ background-color: #6C757D;
181
+ }
182
+ :global(.ebg-gray700) {
183
+ background-color: #495057;
184
+ }
185
+ :global(.ebg-gray800) {
186
+ background-color: #343A40;
187
+ }
188
+ :global(.ebg-gray900) {
189
+ background-color: #212529;
190
+ }
191
+ :global(.ebg-green100) {
192
+ background-color: #D1E7DD;
193
+ }
194
+ :global(.ebg-green200) {
195
+ background-color: #A3CFBB;
196
+ }
197
+ :global(.ebg-green300) {
198
+ background-color: #75B798;
199
+ }
200
+ :global(.ebg-green400) {
201
+ background-color: #479F76;
202
+ }
203
+ :global(.ebg-green500) {
204
+ background-color: #198754;
205
+ }
206
+ :global(.ebg-green600) {
207
+ background-color: #146C43;
208
+ }
209
+ :global(.ebg-green700) {
210
+ background-color: #0F5132;
211
+ }
212
+ :global(.ebg-green800) {
213
+ background-color: #0A3622;
214
+ }
215
+ :global(.ebg-green900) {
216
+ background-color: #051B11;
217
+ }
218
+ :global(.ebg-red100) {
219
+ background-color: #F8D7DA;
220
+ }
221
+ :global(.ebg-red200) {
222
+ background-color: #F1AEB5;
223
+ }
224
+ :global(.ebg-red300) {
225
+ background-color: #EA868F;
226
+ }
227
+ :global(.ebg-red400) {
228
+ background-color: #E35D6A;
229
+ }
230
+ :global(.ebg-red500) {
231
+ background-color: #DC3545;
232
+ }
233
+ :global(.ebg-red600) {
234
+ background-color: #B02A37;
235
+ }
236
+ :global(.ebg-red700) {
237
+ background-color: #842029;
238
+ }
239
+ :global(.ebg-red800) {
240
+ background-color: #58151C;
241
+ }
242
+ :global(.ebg-red900) {
243
+ background-color: #2C0B0E;
244
+ }
245
+ :global(.ebg-yellow100) {
246
+ background-color: #FFF3CD;
247
+ }
248
+ :global(.ebg-yellow200) {
249
+ background-color: #FFE69C;
250
+ }
251
+ :global(.ebg-yellow300) {
252
+ background-color: #FFDA6A;
253
+ }
254
+ :global(.ebg-yellow400) {
255
+ background-color: #FFCD39;
256
+ }
257
+ :global(.ebg-yellow500) {
258
+ background-color: #FFC107;
259
+ }
260
+ :global(.ebg-yellow600) {
261
+ background-color: #CC9A06;
262
+ }
263
+ :global(.ebg-yellow700) {
264
+ background-color: #997404;
265
+ }
266
+ :global(.ebg-yellow800) {
267
+ background-color: #664D03;
268
+ }
269
+ :global(.ebg-yellow900) {
270
+ background-color: #332701;
271
+ }
272
+ :global(.ebg-cyan100) {
273
+ background-color: #CFF4FC;
274
+ }
275
+ :global(.ebg-cyan200) {
276
+ background-color: #9EEAF9;
277
+ }
278
+ :global(.ebg-cyan300) {
279
+ background-color: #6EDFF6;
280
+ }
281
+ :global(.ebg-cyan400) {
282
+ background-color: #3DD5F3;
283
+ }
284
+ :global(.ebg-cyan500) {
285
+ background-color: #0DCAF0;
286
+ }
287
+ :global(.ebg-cyan600) {
288
+ background-color: #0AA2C0;
289
+ }
290
+ :global(.ebg-cyan700) {
291
+ background-color: #087990;
292
+ }
293
+ :global(.ebg-cyan800) {
294
+ background-color: #055160;
295
+ }
296
+ :global(.ebg-cyan900) {
297
+ background-color: #032830;
298
+ }
299
+ .etext-white {
300
+ color: #ffffff;
301
+ }
302
+ :global(.etext-dark) {
303
+ color: #000000;
304
+ }
305
+ :global(.etext-secondary) {
306
+ color: #3AC82E;
307
+ }
308
+ :global(.etext-secondaryDark) {
309
+ color: #00A855;
310
+ }
311
+ :global(.etext-secondaryLight) {
312
+ color: #CBFFC7;
313
+ }
314
+ :global(.etext-primary) {
315
+ color: #00AEE5;
316
+ }
317
+ :global(.etext-primaryDark) {
318
+ color: #007FD8;
319
+ }
320
+ :global(.etext-primaryLight) {
321
+ color: #CEF3FF;
322
+ }
323
+ :global(.etext-danger) {
324
+ color: #FE4747;
325
+ }
326
+ :global(.etext-dangerDark) {
327
+ color: #B02A37;
328
+ }
329
+ :global(.etext-dangerLight) {
330
+ color: #FE4747;
331
+ }
332
+ :global(.etext-info) {
333
+ color: #0DCAF0;
334
+ }
335
+ :global(.etext-infoDark) {
336
+ color: #087990;
337
+ }
338
+ :global(.etext-infoLight) {
339
+ color: #9EEAF9;
340
+ }
341
+ :global(.etext-success) {
342
+ color: #00A96B;
343
+ }
344
+ :global(.etext-successDark) {
345
+ color: #146C43;
346
+ }
347
+ :global(.etext-successLight) {
348
+ color: #D1E7DD;
349
+ }
350
+ :global(.etext-warning) {
351
+ color: #FFBA3A;
352
+ }
353
+ :global(.etext-warningDark) {
354
+ color: #997404;
355
+ }
356
+ :global(.etext-warningLight) {
357
+ color: #FFF3CD;
358
+ }
359
+ :global(.etext-gray100) {
360
+ color: #F8F9FA;
361
+ }
362
+ :global(.etext-gray200) {
363
+ color: #E9ECEF;
364
+ }
365
+ :global(.etext-gray300) {
366
+ color: #DEE2E6;
367
+ }
368
+ :global(.etext-gray400) {
369
+ color: #CED4DA;
370
+ }
371
+ :global(.etext-gray500) {
372
+ color: #adb5bd;
373
+ }
374
+ :global(.etext-gray600) {
375
+ color: #6C757D;
376
+ }
377
+ :global(.etext-gray700) {
378
+ color: #495057;
379
+ }
380
+ :global(.etext-gray800) {
381
+ color: #343A40;
382
+ }
383
+ :global(.etext-gray900) {
384
+ color: #212529;
385
+ }
386
+ :global(.etext-green100) {
387
+ color: #D1E7DD;
388
+ }
389
+ :global(.etext-green200) {
390
+ color: #A3CFBB;
391
+ }
392
+ :global(.etext-green300) {
393
+ color: #75B798;
394
+ }
395
+ :global(.etext-green400) {
396
+ color: #479F76;
397
+ }
398
+ :global(.etext-green500) {
399
+ color: #198754;
400
+ }
401
+ :global(.etext-green600) {
402
+ color: #146C43;
403
+ }
404
+ :global(.etext-green700) {
405
+ color: #0F5132;
406
+ }
407
+ :global(.etext-green800) {
408
+ color: #0A3622;
409
+ }
410
+ :global(.etext-green900) {
411
+ color: #051B11;
412
+ }
413
+ :global(.etext-red100) {
414
+ color: #F8D7DA;
415
+ }
416
+ :global(.etext-red200) {
417
+ color: #F1AEB5;
418
+ }
419
+ :global(.etext-red300) {
420
+ color: #EA868F;
421
+ }
422
+ :global(.etext-red400) {
423
+ color: #E35D6A;
424
+ }
425
+ :global(.etext-red500) {
426
+ color: #DC3545;
427
+ }
428
+ :global(.etext-red600) {
429
+ color: #B02A37;
430
+ }
431
+ :global(.etext-red700) {
432
+ color: #842029;
433
+ }
434
+ :global(.etext-red800) {
435
+ color: #58151C;
436
+ }
437
+ :global(.etext-red900) {
438
+ color: #2C0B0E;
439
+ }
440
+ :global(.etext-yellow100) {
441
+ color: #FFF3CD;
442
+ }
443
+ :global(.etext-yellow200) {
444
+ color: #FFE69C;
445
+ }
446
+ :global(.etext-yellow300) {
447
+ color: #FFDA6A;
448
+ }
449
+ :global(.etext-yellow400) {
450
+ color: #FFCD39;
451
+ }
452
+ :global(.etext-yellow500) {
453
+ color: #FFC107;
454
+ }
455
+ :global(.etext-yellow600) {
456
+ color: #CC9A06;
457
+ }
458
+ :global(.etext-yellow700) {
459
+ color: #997404;
460
+ }
461
+ :global(.etext-yellow800) {
462
+ color: #664D03;
463
+ }
464
+ :global(.etext-yellow900) {
465
+ color: #332701;
466
+ }
467
+ :global(.etext-cyan100) {
468
+ color: #CFF4FC;
469
+ }
470
+ :global(.etext-cyan200) {
471
+ color: #9EEAF9;
472
+ }
473
+ :global(.etext-cyan300) {
474
+ color: #6EDFF6;
475
+ }
476
+ :global(.etext-cyan400) {
477
+ color: #3DD5F3;
478
+ }
479
+ :global(.etext-cyan500) {
480
+ color: #0DCAF0;
481
+ }
482
+ :global(.etext-cyan600) {
483
+ color: #0AA2C0;
484
+ }
485
+ :global(.etext-cyan700) {
486
+ color: #087990;
487
+ }
488
+ :global(.etext-cyan800) {
489
+ color: #055160;
490
+ }
491
+ :global(.etext-cyan900) {
492
+ color: #032830;
493
+ }
494
+ :global(.eoutline-secondary) {
495
+ outline: 1px solid #3AC82E;
496
+ }
497
+ :global(.eoutline-secondaryDark) {
498
+ outline: 1px solid #00A855;
499
+ }
500
+ :global(.eoutline-secondaryLight) {
501
+ outline: 1px solid #CBFFC7;
502
+ }
503
+ :global(.eoutline-primary) {
504
+ outline: 1px solid #00AEE5;
505
+ }
506
+ :global(.eoutline-primaryDark) {
507
+ outline: 1px solid #007FD8;
508
+ }
509
+ :global(.eoutline-primaryLight) {
510
+ outline: 1px solid #CEF3FF;
511
+ }
512
+ :global(.eoutline-danger) {
513
+ outline: 1px solid #FE4747;
514
+ }
515
+ :global(.eoutline-dangerDark) {
516
+ outline: 1px solid #B02A37;
517
+ }
518
+ :global(.eoutline-dangerLight) {
519
+ outline: 1px solid #FE4747;
520
+ }
521
+ :global(.eoutline-success) {
522
+ outline: 1px solid #00A96B;
523
+ }
524
+ :global(.eoutline-successDark) {
525
+ outline: 1px solid #146C43;
526
+ }
527
+ :global(.eoutline-successLight) {
528
+ outline: 1px solid #D1E7DD;
529
+ }
530
+ :global(.eoutline-info) {
531
+ outline: 1px solid #0DCAF0;
532
+ }
533
+ :global(.eoutline-infoDark) {
534
+ outline: 1px solid #087990;
535
+ }
536
+ :global(.eoutline-infoLight) {
537
+ outline: 1px solid #9EEAF9;
538
+ }
539
+ :global(.eoutline-warning) {
540
+ outline: 1px solid #FFBA3A;
541
+ }
542
+ :global(.eoutline-warningDark) {
543
+ outline: 1px solid #997404;
544
+ }
545
+ :global(.eoutline-warningLight) {
546
+ outline: 1px solid #FFF3CD;
547
+ }
548
+ :global(.eradius) {
549
+ border-radius: 4px;
550
+ }
551
+ :global(.eradius-low) {
552
+ border-radius: 8px;
553
+ }
554
+ :global(.eradius-medium) {
555
+ border-radius: 16px;
556
+ }
557
+ :global(.eradius-full) {
558
+ border-radius: 50%;
559
+ }
560
+ .eshadow-non {
561
+ box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
562
+ }
563
+ .eshadow-low {
564
+ box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
565
+ }
566
+ .eshadow-medium {
567
+ box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
568
+ }
569
+ .eshadow-high {
570
+ box-shadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.1);
571
+ }
572
+ :global(.efs-small) {
573
+ font-family: Roboto;
574
+ font-size: 12px;
575
+ font-style: normal;
576
+ font-weight: 400;
577
+ line-height: normal;
578
+ }
579
+ :global(.efs-normal) {
580
+ font-family: Roboto;
581
+ font-size: 16px;
582
+ font-style: normal;
583
+ font-weight: 400;
584
+ line-height: 28px;
585
+ }
586
+ :global(.efs-strong) {
587
+ font-family: Roboto;
588
+ font-size: 17px;
589
+ font-style: normal;
590
+ font-weight: 700;
591
+ line-height: 28px;
592
+ }
593
+ :global(.efs-h6) {
594
+ font-family: Roboto;
595
+ font-size: 16px;
596
+ font-style: normal;
597
+ font-weight: 700;
598
+ line-height: normal;
599
+ }
600
+ :global(.efs-h5) {
601
+ font-family: Roboto;
602
+ font-size: 20px;
603
+ font-style: normal;
604
+ font-weight: 700;
605
+ line-height: normal;
606
+ }
607
+ :global(.efs-h4) {
608
+ font-family: Roboto;
609
+ font-size: 24px;
610
+ font-style: normal;
611
+ font-weight: 700;
612
+ line-height: normal;
613
+ }
614
+ :global(.efs-h3) {
615
+ font-family: Roboto;
616
+ font-size: 28px;
617
+ font-style: normal;
618
+ font-weight: 700;
619
+ line-height: normal;
620
+ }
621
+ :global(.efs-h2) {
622
+ font-family: Roboto;
623
+ font-size: 32px;
624
+ font-style: normal;
625
+ font-weight: 700;
626
+ line-height: normal;
627
+ }
628
+ :global(.efs-h1) {
629
+ font-family: Roboto;
630
+ font-size: 40px;
631
+ font-style: normal;
632
+ font-weight: 700;
633
+ line-height: normal;
634
+ letter-spacing: -0.8px;
635
+ }
636
+ :global(.efs-h4D) {
637
+ font-family: Merriweather;
638
+ font-size: 52px;
639
+ font-style: normal;
640
+ font-weight: 400;
641
+ line-height: normal;
642
+ }
643
+ :global(.efs-h3D) {
644
+ font-family: Merriweather;
645
+ font-size: 58px;
646
+ font-style: normal;
647
+ font-weight: 400;
648
+ line-height: normal;
649
+ }
650
+ :global(.efs-h2D) {
651
+ font-family: Merriweather;
652
+ font-size: 64px;
653
+ font-style: normal;
654
+ font-weight: 400;
655
+ line-height: normal;
656
+ letter-spacing: -1.28px;
657
+ }
658
+ :global(.efs-h1D) {
659
+ font-family: Merriweather;
660
+ font-size: 72px;
661
+ font-style: normal;
662
+ font-weight: 400;
663
+ line-height: normal;
664
+ }</style>
@@ -0,0 +1,27 @@
1
+ /** @typedef {typeof __propDef.props} CardiconBodyProps */
2
+ /** @typedef {typeof __propDef.events} CardiconBodyEvents */
3
+ /** @typedef {typeof __propDef.slots} CardiconBodySlots */
4
+ export default class CardiconBody extends SvelteComponentTyped<{
5
+ className: any;
6
+ }, {
7
+ [evt: string]: CustomEvent<any>;
8
+ }, {
9
+ default: {};
10
+ }> {
11
+ }
12
+ export type CardiconBodyProps = typeof __propDef.props;
13
+ export type CardiconBodyEvents = typeof __propDef.events;
14
+ export type CardiconBodySlots = typeof __propDef.slots;
15
+ import { SvelteComponentTyped } from "svelte";
16
+ declare const __propDef: {
17
+ props: {
18
+ className: any;
19
+ };
20
+ events: {
21
+ [evt: string]: CustomEvent<any>;
22
+ };
23
+ slots: {
24
+ default: {};
25
+ };
26
+ };
27
+ export {};