@entur/form 5.4.13 → 5.4.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.
Files changed (2) hide show
  1. package/dist/styles.css +232 -219
  2. package/package.json +6 -6
package/dist/styles.css CHANGED
@@ -62,94 +62,6 @@
62
62
  color: #ffe082;
63
63
  }/* DO NOT CHANGE!*/
64
64
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
65
- .eds-form-component--radio__container {
66
- display: flex;
67
- justify-content: center;
68
- align-items: center;
69
- position: relative;
70
- cursor: pointer;
71
- height: 2rem;
72
- width: -moz-fit-content;
73
- width: fit-content;
74
- -webkit-user-select: none;
75
- -moz-user-select: none;
76
- -ms-user-select: none;
77
- user-select: none;
78
- }
79
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
80
- border-color: #54568c;
81
- }
82
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
83
- background-color: #54568c;
84
- }
85
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
86
- border-color: #8285a8;
87
- }
88
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
89
- background-color: #8285a8;
90
- }
91
- .eds-form-component--radio__container input {
92
- position: absolute;
93
- opacity: 0;
94
- cursor: pointer;
95
- height: 0;
96
- width: 0;
97
- }
98
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
99
- height: 0.625rem;
100
- width: 0.625rem;
101
- }
102
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
103
- outline: none;
104
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
105
- outline-offset: 0.125rem;
106
- }
107
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
108
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
109
- }
110
- .eds-form-component--radio__container .eds-form-component--radio__radio {
111
- position: relative;
112
- height: 1.25rem;
113
- width: 1.25rem;
114
- margin-right: 1rem;
115
- background-color: #ffffff;
116
- border: 0.125rem solid #181c56;
117
- border-radius: 50%;
118
- display: flex;
119
- align-items: center;
120
- justify-content: center;
121
- }
122
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
123
- background-color: #181c56;
124
- border-color: #aeb7e2;
125
- }
126
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
127
- background: #d1d3d3;
128
- border-color: #d1d3d3;
129
- cursor: not-allowed;
130
- }
131
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
132
- border-color: #d1d3d3;
133
- }
134
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
135
- background: #d1d3d3;
136
- border-color: #d1d3d3;
137
- }
138
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
139
- color: #656782;
140
- }
141
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
142
- display: block;
143
- width: 0;
144
- height: 0;
145
- border-radius: 50%;
146
- background-color: #181c56;
147
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
148
- }
149
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
150
- background-color: #aeb7e2;
151
- }/* DO NOT CHANGE!*/
152
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
153
65
  .eds-checkbox__container {
154
66
  display: flex;
155
67
  align-items: center;
@@ -163,10 +75,12 @@
163
75
  -moz-user-select: none;
164
76
  -ms-user-select: none;
165
77
  user-select: none;
78
+ width: -webkit-fit-content;
166
79
  width: -moz-fit-content;
167
80
  width: fit-content;
168
81
  }
169
82
  .eds-checkbox__container--reduced-click-area {
83
+ height: -webkit-fit-content;
170
84
  height: -moz-fit-content;
171
85
  height: fit-content;
172
86
  }
@@ -184,7 +98,8 @@
184
98
  }
185
99
  .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon__path {
186
100
  stroke: #ffffff;
187
- animation: stroke ease-in-out 0.2s 0.1s forwards;
101
+ -webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
102
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
188
103
  }
189
104
  .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
190
105
  opacity: 0.5;
@@ -273,136 +188,16 @@
273
188
  stroke-width: 0.375rem;
274
189
  }
275
190
 
276
- @keyframes stroke {
191
+ @-webkit-keyframes stroke {
277
192
  100% {
278
193
  stroke-dashoffset: 0;
279
194
  }
280
- }/* DO NOT CHANGE!*/
281
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
282
- .eds-input-group {
283
- color: inherit;
284
- display: block;
285
- position: relative;
286
- }
287
- .eds-input-group__label {
288
- color: #656782;
289
- display: flex;
290
- font-size: 1rem;
291
- position: absolute;
292
- line-height: 1rem;
293
- height: 3rem;
294
- padding: 1rem;
295
- padding-left: 0;
296
- margin-left: 1rem;
297
- top: -0.125rem;
298
- 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;
299
- -webkit-user-select: none;
300
- -moz-user-select: none;
301
- -ms-user-select: none;
302
- user-select: none;
303
- pointer-events: none;
304
- }
305
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
306
- top: calc(0.5rem - 0.125rem);
307
- font-size: 0.75rem;
308
- line-height: 0.75rem;
309
- height: 10px;
310
- padding: 0;
311
- margin-left: 1rem;
312
- }
313
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
314
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
315
- background: var(--textarea-label-background);
316
- width: calc( 100% - 1rem - 1rem - 4px );
317
- }
318
- .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
319
- top: 0.5rem;
320
- font-size: 0.875rem;
321
- line-height: 1rem;
322
- padding: 0;
323
- margin-left: 1rem;
324
- }
325
- .eds-contrast .eds-input-group__label {
326
- color: #8285a8;
327
- }
328
- .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
329
- color: #aeb7e2;
330
- }
331
- .eds-form-control-wrapper--size-large .eds-input-group__label {
332
- font-size: 1.5rem;
333
- line-height: 2.25rem;
334
- height: 4rem;
335
- }
336
- .eds-input-group__label--filled {
337
- top: calc(0.5rem - 0.125rem);
338
- font-size: 0.75rem;
339
- line-height: 0.75rem;
340
- height: 10px;
341
- padding: 0;
342
- margin-left: 1rem;
343
- }
344
- .eds-textarea__label .eds-input-group__label--filled {
345
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
346
- background: var(--textarea-label-background);
347
- width: calc( 100% - 1rem - 1rem - 4px );
348
- }
349
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
350
- top: 0.5rem;
351
- font-size: 0.875rem;
352
- line-height: 1rem;
353
- padding: 0;
354
- margin-left: 1rem;
355
- }
356
- .eds-input-group__label-tooltip-icon {
357
- color: #0082b9;
358
- padding-left: 0.25rem;
359
- padding-right: 0.25rem;
360
- display: flex;
361
- align-items: center;
362
- cursor: help;
363
- font-size: 1rem;
364
- }
365
-
366
- .eds-form-control-wrapper[focus-within] .eds-input-group__label {
367
- top: calc(0.5rem - 0.125rem);
368
- font-size: 0.75rem;
369
- line-height: 0.75rem;
370
- height: 10px;
371
- padding: 0;
372
- margin-left: 1rem;
373
195
  }
374
196
 
375
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
376
- top: calc(0.5rem - 0.125rem);
377
- font-size: 0.75rem;
378
- line-height: 0.75rem;
379
- height: 10px;
380
- padding: 0;
381
- margin-left: 1rem;
382
- }
383
- .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
384
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
385
- background: var(--textarea-label-background);
386
- width: calc( 100% - 1rem - 1rem - 4px );
387
- }
388
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
389
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
390
- background: var(--textarea-label-background);
391
- width: calc( 100% - 1rem - 1rem - 4px );
392
- }
393
- .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
394
- top: 0.5rem;
395
- font-size: 0.875rem;
396
- line-height: 1rem;
397
- padding: 0;
398
- margin-left: 1rem;
399
- }
400
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
401
- top: 0.5rem;
402
- font-size: 0.875rem;
403
- line-height: 1rem;
404
- padding: 0;
405
- margin-left: 1rem;
197
+ @keyframes stroke {
198
+ 100% {
199
+ stroke-dashoffset: 0;
200
+ }
406
201
  }/* DO NOT CHANGE!*/
407
202
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
408
203
  .eds-form-control-wrapper {
@@ -661,6 +456,101 @@
661
456
  margin-left: 0;
662
457
  }/* DO NOT CHANGE!*/
663
458
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
459
+ textarea.eds-form-control.eds-textarea {
460
+ min-height: 7.75rem;
461
+ resize: vertical;
462
+ line-height: 1.5rem;
463
+ }/* DO NOT CHANGE!*/
464
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
465
+ .eds-form-component--radio__container {
466
+ display: flex;
467
+ justify-content: center;
468
+ align-items: center;
469
+ position: relative;
470
+ cursor: pointer;
471
+ height: 2rem;
472
+ width: -webkit-fit-content;
473
+ width: -moz-fit-content;
474
+ width: fit-content;
475
+ -webkit-user-select: none;
476
+ -moz-user-select: none;
477
+ -ms-user-select: none;
478
+ user-select: none;
479
+ }
480
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
481
+ border-color: #54568c;
482
+ }
483
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
484
+ background-color: #54568c;
485
+ }
486
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
487
+ border-color: #8285a8;
488
+ }
489
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
490
+ background-color: #8285a8;
491
+ }
492
+ .eds-form-component--radio__container input {
493
+ position: absolute;
494
+ opacity: 0;
495
+ cursor: pointer;
496
+ height: 0;
497
+ width: 0;
498
+ }
499
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
500
+ height: 0.625rem;
501
+ width: 0.625rem;
502
+ }
503
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
504
+ outline: none;
505
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
506
+ outline-offset: 0.125rem;
507
+ }
508
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
509
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
510
+ }
511
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
512
+ position: relative;
513
+ height: 1.25rem;
514
+ width: 1.25rem;
515
+ margin-right: 1rem;
516
+ background-color: #ffffff;
517
+ border: 0.125rem solid #181c56;
518
+ border-radius: 50%;
519
+ display: flex;
520
+ align-items: center;
521
+ justify-content: center;
522
+ }
523
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
524
+ background-color: #181c56;
525
+ border-color: #aeb7e2;
526
+ }
527
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
528
+ background: #d1d3d3;
529
+ border-color: #d1d3d3;
530
+ cursor: not-allowed;
531
+ }
532
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
533
+ border-color: #d1d3d3;
534
+ }
535
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
536
+ background: #d1d3d3;
537
+ border-color: #d1d3d3;
538
+ }
539
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
540
+ color: #656782;
541
+ }
542
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
543
+ display: block;
544
+ width: 0;
545
+ height: 0;
546
+ border-radius: 50%;
547
+ background-color: #181c56;
548
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
549
+ }
550
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
551
+ background-color: #aeb7e2;
552
+ }/* DO NOT CHANGE!*/
553
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
664
554
  .eds-switch {
665
555
  cursor: pointer;
666
556
  -webkit-user-select: none;
@@ -668,6 +558,7 @@
668
558
  -ms-user-select: none;
669
559
  user-select: none;
670
560
  padding: 0.5rem 0;
561
+ width: -webkit-fit-content;
671
562
  width: -moz-fit-content;
672
563
  width: fit-content;
673
564
  }
@@ -812,7 +703,8 @@
812
703
  }
813
704
  .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon__path {
814
705
  stroke: #5ac39a;
815
- animation: stroke ease-in-out 0.2s 0.1s forwards;
706
+ -webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
707
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
816
708
  }
817
709
  .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled {
818
710
  opacity: 0.5;
@@ -834,6 +726,7 @@
834
726
  -moz-user-select: none;
835
727
  -ms-user-select: none;
836
728
  user-select: none;
729
+ width: -webkit-fit-content;
837
730
  width: -moz-fit-content;
838
731
  width: fit-content;
839
732
  }
@@ -912,10 +805,130 @@
912
805
  stroke-width: 0.375rem;
913
806
  }/* DO NOT CHANGE!*/
914
807
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
915
- textarea.eds-form-control.eds-textarea {
916
- min-height: 7.75rem;
917
- resize: vertical;
918
- line-height: 1.5rem;
808
+ .eds-input-group {
809
+ color: inherit;
810
+ display: block;
811
+ position: relative;
812
+ }
813
+ .eds-input-group__label {
814
+ color: #656782;
815
+ display: flex;
816
+ font-size: 1rem;
817
+ position: absolute;
818
+ line-height: 1rem;
819
+ height: 3rem;
820
+ padding: 1rem;
821
+ padding-left: 0;
822
+ margin-left: 1rem;
823
+ top: -0.125rem;
824
+ 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;
825
+ -webkit-user-select: none;
826
+ -moz-user-select: none;
827
+ -ms-user-select: none;
828
+ user-select: none;
829
+ pointer-events: none;
830
+ }
831
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
832
+ top: calc(0.5rem - 0.125rem);
833
+ font-size: 0.75rem;
834
+ line-height: 0.75rem;
835
+ height: 10px;
836
+ padding: 0;
837
+ margin-left: 1rem;
838
+ }
839
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
840
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
841
+ background: var(--textarea-label-background);
842
+ width: calc( 100% - 1rem - 1rem - 4px );
843
+ }
844
+ .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
845
+ top: 0.5rem;
846
+ font-size: 0.875rem;
847
+ line-height: 1rem;
848
+ padding: 0;
849
+ margin-left: 1rem;
850
+ }
851
+ .eds-contrast .eds-input-group__label {
852
+ color: #8285a8;
853
+ }
854
+ .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
855
+ color: #aeb7e2;
856
+ }
857
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
858
+ font-size: 1.5rem;
859
+ line-height: 2.25rem;
860
+ height: 4rem;
861
+ }
862
+ .eds-input-group__label--filled {
863
+ top: calc(0.5rem - 0.125rem);
864
+ font-size: 0.75rem;
865
+ line-height: 0.75rem;
866
+ height: 10px;
867
+ padding: 0;
868
+ margin-left: 1rem;
869
+ }
870
+ .eds-textarea__label .eds-input-group__label--filled {
871
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
872
+ background: var(--textarea-label-background);
873
+ width: calc( 100% - 1rem - 1rem - 4px );
874
+ }
875
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
876
+ top: 0.5rem;
877
+ font-size: 0.875rem;
878
+ line-height: 1rem;
879
+ padding: 0;
880
+ margin-left: 1rem;
881
+ }
882
+ .eds-input-group__label-tooltip-icon {
883
+ color: #0082b9;
884
+ padding-left: 0.25rem;
885
+ padding-right: 0.25rem;
886
+ display: flex;
887
+ align-items: center;
888
+ cursor: help;
889
+ font-size: 1rem;
890
+ }
891
+
892
+ .eds-form-control-wrapper[focus-within] .eds-input-group__label {
893
+ top: calc(0.5rem - 0.125rem);
894
+ font-size: 0.75rem;
895
+ line-height: 0.75rem;
896
+ height: 10px;
897
+ padding: 0;
898
+ margin-left: 1rem;
899
+ }
900
+
901
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
902
+ top: calc(0.5rem - 0.125rem);
903
+ font-size: 0.75rem;
904
+ line-height: 0.75rem;
905
+ height: 10px;
906
+ padding: 0;
907
+ margin-left: 1rem;
908
+ }
909
+ .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
910
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
911
+ background: var(--textarea-label-background);
912
+ width: calc( 100% - 1rem - 1rem - 4px );
913
+ }
914
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
915
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
916
+ background: var(--textarea-label-background);
917
+ width: calc( 100% - 1rem - 1rem - 4px );
918
+ }
919
+ .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
920
+ top: 0.5rem;
921
+ font-size: 0.875rem;
922
+ line-height: 1rem;
923
+ padding: 0;
924
+ margin-left: 1rem;
925
+ }
926
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
927
+ top: 0.5rem;
928
+ font-size: 0.875rem;
929
+ line-height: 1rem;
930
+ padding: 0;
931
+ margin-left: 1rem;
919
932
  }/* DO NOT CHANGE!*/
920
933
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
921
934
  .eds-textfield__clear-button {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "5.4.13",
3
+ "version": "5.4.14",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -27,12 +27,12 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/icons": "^5.4.1",
30
+ "@entur/icons": "^5.4.2",
31
31
  "@entur/tokens": "^3.4.4",
32
- "@entur/tooltip": "^2.6.0",
33
- "@entur/typography": "^1.7.4",
34
- "@entur/utils": "^0.4.9",
32
+ "@entur/tooltip": "^2.6.1",
33
+ "@entur/typography": "^1.7.5",
34
+ "@entur/utils": "^0.5.0",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "de71e205560a699e2dce301e133966dc9348c459"
37
+ "gitHead": "36772ae4f2d8375622acff19736c07d15435cb95"
38
38
  }