@enki-tek/fms-web-components 0.0.12 → 0.0.14

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