@enki-tek/fms-web-components 0.0.34 → 0.0.35

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