@enki-tek/fms-web-components 0.0.37 → 0.0.38

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