@entur/form 5.4.10 → 5.4.11

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.
package/dist/styles.css CHANGED
@@ -53,13 +53,132 @@
53
53
  color: #ffe082;
54
54
  }/* DO NOT CHANGE!*/
55
55
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
56
- .eds-fieldset {
57
- margin: 0;
58
- padding: 0;
59
- border: 0;
56
+ .eds-checkbox__container {
57
+ display: flex;
58
+ align-items: center;
59
+ position: relative;
60
+ -webkit-appearance: none;
61
+ -moz-appearance: none;
62
+ appearance: none;
63
+ cursor: pointer;
64
+ height: 2rem;
65
+ -webkit-user-select: none;
66
+ -moz-user-select: none;
67
+ user-select: none;
68
+ width: -moz-fit-content;
69
+ width: fit-content;
60
70
  }
61
- .eds-fieldset .eds-legend {
62
- margin: 0 0 0.5rem;
71
+ .eds-checkbox__container--reduced-click-area {
72
+ height: -moz-fit-content;
73
+ height: fit-content;
74
+ }
75
+ .eds-checkbox__container input {
76
+ position: absolute;
77
+ opacity: 0;
78
+ height: 0;
79
+ width: 0;
80
+ }
81
+ .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
82
+ background-color: #181c56;
83
+ }
84
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
85
+ visibility: visible;
86
+ }
87
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon__path {
88
+ stroke: #ffffff;
89
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
90
+ }
91
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
92
+ opacity: 0.5;
93
+ }
94
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled .eds-checkbox-icon__path {
95
+ opacity: 0.5;
96
+ }
97
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
98
+ background: #54568c;
99
+ }
100
+ .eds-checkbox__container:hover input + .eds-checkbox__icon {
101
+ border-color: #54568c;
102
+ background: #f3f3f3;
103
+ }
104
+ .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
105
+ border-color: #656782;
106
+ background: #292b6a;
107
+ }
108
+ .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
109
+ .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
110
+ border-color: #54568c;
111
+ background-color: #54568c;
112
+ }
113
+ .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
114
+ .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
115
+ background: #8285a8;
116
+ border-color: #8285a8;
117
+ }
118
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
119
+ .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
120
+ outline: none;
121
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
122
+ outline-offset: 0.125rem;
123
+ }
124
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
125
+ .eds-checkbox__container :focus-within + .eds-checkbox__icon {
126
+ outline: none;
127
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
128
+ outline-offset: 0.125rem;
129
+ }
130
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
131
+ .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
132
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
133
+ }
134
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
135
+ .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
136
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
137
+ }
138
+ .eds-checkbox--disabled {
139
+ pointer-events: none;
140
+ }
141
+ .eds-checkbox--disabled .eds-checkbox__label {
142
+ opacity: 0.5;
143
+ }
144
+ .eds-checkbox--disabled .eds-checkbox__icon {
145
+ opacity: 0.5;
146
+ }
147
+ .eds-checkbox__icon {
148
+ display: inline-flex;
149
+ justify-content: center;
150
+ align-items: center;
151
+ position: relative;
152
+ margin-right: 1rem;
153
+ height: 1.25rem;
154
+ width: 1.25rem;
155
+ border: 0.125rem solid #181c56;
156
+ border-radius: 0.0625rem;
157
+ background-color: transparent;
158
+ color: #ffffff;
159
+ }
160
+ .eds-checkbox__icon--reduced-click-area {
161
+ margin-right: 0;
162
+ }
163
+ .eds-contrast .eds-checkbox__icon {
164
+ border-color: #54568c;
165
+ }
166
+ .eds-checkbox__icon .eds-checkbox-icon {
167
+ height: 1rem;
168
+ width: 1rem;
169
+ visibility: hidden;
170
+ }
171
+ .eds-checkbox__icon .eds-checkbox-icon__path {
172
+ transform-origin: 50% 50%;
173
+ stroke-dasharray: 48;
174
+ stroke-dashoffset: 48;
175
+ stroke-width: 0.375rem;
176
+ }
177
+
178
+ @keyframes stroke {
179
+ 100% {
180
+ stroke-dashoffset: 0;
181
+ }
63
182
  }/* DO NOT CHANGE!*/
64
183
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
65
184
  .eds-form-control-wrapper {
@@ -116,9 +235,6 @@
116
235
  .eds-form-control-wrapper ::-moz-placeholder {
117
236
  color: #656782;
118
237
  }
119
- .eds-form-control-wrapper :-ms-input-placeholder {
120
- color: #656782;
121
- }
122
238
  .eds-form-control-wrapper ::placeholder {
123
239
  color: #656782;
124
240
  }
@@ -234,9 +350,6 @@
234
350
  .eds-contrast .eds-form-control-wrapper--dark ::-moz-placeholder {
235
351
  color: #aeb7e2;
236
352
  }
237
- .eds-contrast .eds-form-control-wrapper--dark :-ms-input-placeholder {
238
- color: #aeb7e2;
239
- }
240
353
  .eds-contrast .eds-form-control-wrapper--dark ::placeholder {
241
354
  color: #aeb7e2;
242
355
  }
@@ -279,11 +392,6 @@
279
392
  -moz-transition: opacity 0.2s ease-in-out;
280
393
  transition: opacity 0.2s ease-in-out;
281
394
  }
282
- .eds-form-control:-ms-input-placeholder {
283
- opacity: 0;
284
- -ms-transition: opacity 0.2s ease-in-out;
285
- transition: opacity 0.2s ease-in-out;
286
- }
287
395
  .eds-form-control::placeholder {
288
396
  opacity: 0;
289
397
  transition: opacity 0.2s ease-in-out;
@@ -294,9 +402,6 @@
294
402
  .eds-form-control:focus::-moz-placeholder {
295
403
  opacity: 1;
296
404
  }
297
- .eds-form-control:focus:-ms-input-placeholder {
298
- opacity: 1;
299
- }
300
405
  .eds-form-control:focus::placeholder {
301
406
  opacity: 1;
302
407
  }
@@ -318,46 +423,13 @@
318
423
  margin-left: 0;
319
424
  }/* DO NOT CHANGE!*/
320
425
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
321
- textarea.eds-form-control.eds-textarea {
322
- min-height: 7.75rem;
323
- resize: vertical;
324
- line-height: 1.5rem;
325
- }/* DO NOT CHANGE!*/
326
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
327
- .eds-textfield__clear-button {
328
- background: none;
329
- border: none;
330
- border-radius: 50%;
331
- color: inherit;
332
- cursor: pointer;
333
- display: flex;
334
- font: inherit;
335
- font-size: 1rem;
336
- line-height: 1rem;
337
- padding: 0.5rem;
338
- margin-right: -0.75rem;
339
- }
340
- .eds-textfield__clear-button-wrapper {
341
- display: flex;
342
- align-items: center;
343
- }
344
- .eds-textfield__clear-button:hover {
345
- background: #f3f3f3;
346
- }
347
- .eds-textfield__clear-button:focus {
348
- outline: none;
349
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
350
- }
351
-
352
- .eds-textfield__divider {
353
- content: "";
354
- display: block;
355
- background-color: #e9e9e9;
356
- height: 1.5rem;
357
- width: 1px;
426
+ .eds-fieldset {
427
+ margin: 0;
428
+ padding: 0;
429
+ border: 0;
358
430
  }
359
- .eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
360
- background-color: #8285a8;
431
+ .eds-fieldset .eds-legend {
432
+ margin: 0 0 0.5rem;
361
433
  }/* DO NOT CHANGE!*/
362
434
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
363
435
  .eds-form-component--radio__container {
@@ -367,12 +439,10 @@ textarea.eds-form-control.eds-textarea {
367
439
  position: relative;
368
440
  cursor: pointer;
369
441
  height: 2rem;
370
- width: -webkit-fit-content;
371
442
  width: -moz-fit-content;
372
443
  width: fit-content;
373
444
  -webkit-user-select: none;
374
445
  -moz-user-select: none;
375
- -ms-user-select: none;
376
446
  user-select: none;
377
447
  }
378
448
  .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
@@ -449,152 +519,12 @@ textarea.eds-form-control.eds-textarea {
449
519
  background-color: #aeb7e2;
450
520
  }/* DO NOT CHANGE!*/
451
521
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
452
- .eds-checkbox__container {
453
- display: flex;
454
- align-items: center;
455
- position: relative;
456
- -webkit-appearance: none;
457
- -moz-appearance: none;
458
- appearance: none;
459
- cursor: pointer;
460
- height: 2rem;
461
- -webkit-user-select: none;
462
- -moz-user-select: none;
463
- -ms-user-select: none;
464
- user-select: none;
465
- width: -webkit-fit-content;
466
- width: -moz-fit-content;
467
- width: fit-content;
468
- }
469
- .eds-checkbox__container--reduced-click-area {
470
- height: -webkit-fit-content;
471
- height: -moz-fit-content;
472
- height: fit-content;
473
- }
474
- .eds-checkbox__container input {
475
- position: absolute;
476
- opacity: 0;
477
- height: 0;
478
- width: 0;
479
- }
480
- .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
481
- background-color: #181c56;
482
- }
483
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
484
- visibility: visible;
485
- }
486
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon__path {
487
- stroke: #ffffff;
488
- -webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
489
- animation: stroke ease-in-out 0.2s 0.1s forwards;
490
- }
491
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
492
- opacity: 0.5;
493
- }
494
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled .eds-checkbox-icon__path {
495
- opacity: 0.5;
496
- }
497
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
498
- background: #54568c;
499
- }
500
- .eds-checkbox__container:hover input + .eds-checkbox__icon {
501
- border-color: #54568c;
502
- background: #f3f3f3;
503
- }
504
- .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
505
- border-color: #656782;
506
- background: #292b6a;
507
- }
508
- .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
509
- .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
510
- border-color: #54568c;
511
- background-color: #54568c;
512
- }
513
- .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
514
- .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
515
- background: #8285a8;
516
- border-color: #8285a8;
517
- }
518
- .eds-checkbox__container:focus + .eds-checkbox__icon,
519
- .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
520
- outline: none;
521
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
522
- outline-offset: 0.125rem;
523
- }
524
- .eds-checkbox__container:focus + .eds-checkbox__icon,
525
- .eds-checkbox__container :focus-within + .eds-checkbox__icon {
526
- outline: none;
527
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
528
- outline-offset: 0.125rem;
529
- }
530
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
531
- .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
532
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
533
- }
534
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
535
- .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
536
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
537
- }
538
- .eds-checkbox--disabled {
539
- pointer-events: none;
540
- }
541
- .eds-checkbox--disabled .eds-checkbox__label {
542
- opacity: 0.5;
543
- }
544
- .eds-checkbox--disabled .eds-checkbox__icon {
545
- opacity: 0.5;
546
- }
547
- .eds-checkbox__icon {
548
- display: inline-flex;
549
- justify-content: center;
550
- align-items: center;
551
- position: relative;
552
- margin-right: 1rem;
553
- height: 1.25rem;
554
- width: 1.25rem;
555
- border: 0.125rem solid #181c56;
556
- border-radius: 0.0625rem;
557
- background-color: transparent;
558
- color: #ffffff;
559
- }
560
- .eds-checkbox__icon--reduced-click-area {
561
- margin-right: 0;
562
- }
563
- .eds-contrast .eds-checkbox__icon {
564
- border-color: #54568c;
565
- }
566
- .eds-checkbox__icon .eds-checkbox-icon {
567
- height: 1rem;
568
- width: 1rem;
569
- visibility: hidden;
570
- }
571
- .eds-checkbox__icon .eds-checkbox-icon__path {
572
- transform-origin: 50% 50%;
573
- stroke-dasharray: 48;
574
- stroke-dashoffset: 48;
575
- stroke-width: 0.375rem;
576
- }
577
-
578
- @-webkit-keyframes stroke {
579
- 100% {
580
- stroke-dashoffset: 0;
581
- }
582
- }
583
-
584
- @keyframes stroke {
585
- 100% {
586
- stroke-dashoffset: 0;
587
- }
588
- }/* DO NOT CHANGE!*/
589
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
590
522
  .eds-switch {
591
523
  cursor: pointer;
592
524
  -webkit-user-select: none;
593
525
  -moz-user-select: none;
594
- -ms-user-select: none;
595
526
  user-select: none;
596
527
  padding: 0.5rem 0;
597
- width: -webkit-fit-content;
598
528
  width: -moz-fit-content;
599
529
  width: fit-content;
600
530
  }
@@ -739,8 +669,7 @@ textarea.eds-form-control.eds-textarea {
739
669
  }
740
670
  .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon__path {
741
671
  stroke: #5ac39a;
742
- -webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
743
- animation: stroke ease-in-out 0.2s 0.1s forwards;
672
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
744
673
  }
745
674
  .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled {
746
675
  opacity: 0.5;
@@ -760,9 +689,7 @@ textarea.eds-form-control.eds-textarea {
760
689
  padding: 1rem;
761
690
  -webkit-user-select: none;
762
691
  -moz-user-select: none;
763
- -ms-user-select: none;
764
692
  user-select: none;
765
- width: -webkit-fit-content;
766
693
  width: -moz-fit-content;
767
694
  width: fit-content;
768
695
  }
@@ -860,7 +787,6 @@ textarea.eds-form-control.eds-textarea {
860
787
  transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
861
788
  -webkit-user-select: none;
862
789
  -moz-user-select: none;
863
- -ms-user-select: none;
864
790
  user-select: none;
865
791
  pointer-events: none;
866
792
  }
@@ -967,6 +893,48 @@ textarea.eds-form-control.eds-textarea {
967
893
  margin-left: 1rem;
968
894
  }/* DO NOT CHANGE!*/
969
895
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
896
+ textarea.eds-form-control.eds-textarea {
897
+ min-height: 7.75rem;
898
+ resize: vertical;
899
+ line-height: 1.5rem;
900
+ }/* DO NOT CHANGE!*/
901
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
902
+ .eds-textfield__clear-button {
903
+ background: none;
904
+ border: none;
905
+ border-radius: 50%;
906
+ color: inherit;
907
+ cursor: pointer;
908
+ display: flex;
909
+ font: inherit;
910
+ font-size: 1rem;
911
+ line-height: 1rem;
912
+ padding: 0.5rem;
913
+ margin-right: -0.75rem;
914
+ }
915
+ .eds-textfield__clear-button-wrapper {
916
+ display: flex;
917
+ align-items: center;
918
+ }
919
+ .eds-textfield__clear-button:hover {
920
+ background: #f3f3f3;
921
+ }
922
+ .eds-textfield__clear-button:focus {
923
+ outline: none;
924
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
925
+ }
926
+
927
+ .eds-textfield__divider {
928
+ content: "";
929
+ display: block;
930
+ background-color: #e9e9e9;
931
+ height: 1.5rem;
932
+ width: 1px;
933
+ }
934
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
935
+ background-color: #8285a8;
936
+ }/* DO NOT CHANGE!*/
937
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
970
938
  .eds-segmented-control {
971
939
  margin-top: 0.25rem;
972
940
  display: flex;
@@ -996,7 +964,6 @@ textarea.eds-form-control.eds-textarea {
996
964
  text-align: center;
997
965
  -webkit-user-select: none;
998
966
  -moz-user-select: none;
999
- -ms-user-select: none;
1000
967
  user-select: none;
1001
968
  }
1002
969
  .eds-contrast .eds-segmented-choice .eds-base-segmented {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "5.4.10",
3
+ "version": "5.4.11",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -17,22 +17,29 @@
17
17
  "access": "public"
18
18
  },
19
19
  "scripts": {
20
- "start": "dts watch --noClean",
21
- "build": "dts build",
22
- "test": "dts test --env=jsdom",
23
- "lint": "dts lint"
20
+ "start": "yarn run dts watch --noClean",
21
+ "build": "yarn run dts build",
22
+ "test": "yarn run dts test --env=jsdom",
23
+ "lint": "yarn run dts lint"
24
24
  },
25
25
  "peerDependencies": {
26
26
  "react": ">=16.8.0",
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/icons": "^5.2.2",
31
- "@entur/tokens": "^3.4.1",
32
- "@entur/tooltip": "^2.5.22",
33
- "@entur/typography": "^1.7.1",
34
- "@entur/utils": "^0.4.6",
30
+ "@entur/icons": "^5.3.0",
31
+ "@entur/tokens": "^3.4.2",
32
+ "@entur/tooltip": "^2.5.23",
33
+ "@entur/typography": "^1.7.2",
34
+ "@entur/utils": "^0.4.7",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "11fde5ffbfd805773572c3a7d999d63f2733e0c7"
37
+ "devDependencies": {
38
+ "dts-cli": "^1.1.6",
39
+ "jest": "^27.0.0",
40
+ "jest-watch-typeahead": "^2.2.0",
41
+ "ts-jest": "^27.0.0",
42
+ "typescript": "^4.8.0"
43
+ },
44
+ "gitHead": "8915b1630bd936740ba9a4a88883f3432948a80e"
38
45
  }