@entur/form 5.1.4 → 5.2.2

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 (17) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/Checkbox.d.ts +1 -1
  3. package/dist/RadioPanel.d.ts +1 -1
  4. package/dist/Switch.d.ts +11 -3
  5. package/dist/TextArea.d.ts +1 -1
  6. package/dist/TextField.d.ts +2 -2
  7. package/dist/TravelSwitch.d.ts +5 -1
  8. package/dist/form.cjs.development.js +201 -143
  9. package/dist/form.cjs.development.js.map +1 -1
  10. package/dist/form.cjs.production.min.js +1 -1
  11. package/dist/form.cjs.production.min.js.map +1 -1
  12. package/dist/form.esm.js +94 -56
  13. package/dist/form.esm.js.map +1 -1
  14. package/dist/segmented-control/SegmentedChoice.d.ts +1 -1
  15. package/dist/styles.css +192 -169
  16. package/dist/utils.d.ts +1 -1
  17. package/package.json +11 -11
package/dist/styles.css CHANGED
@@ -59,175 +59,6 @@
59
59
  color: #64b3e7;
60
60
  }/* DO NOT CHANGE!*/
61
61
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
62
- .eds-form-component--radio__container {
63
- display: flex;
64
- justify-content: center;
65
- align-items: center;
66
- position: relative;
67
- cursor: pointer;
68
- height: 2rem;
69
- width: fit-content;
70
- user-select: none;
71
- }
72
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
73
- border-color: #54568c;
74
- }
75
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
76
- background-color: #54568c;
77
- }
78
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
79
- border-color: #8285a8;
80
- }
81
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
82
- background-color: #8285a8;
83
- }
84
- .eds-form-component--radio__container input {
85
- position: absolute;
86
- opacity: 0;
87
- cursor: pointer;
88
- height: 0;
89
- width: 0;
90
- }
91
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
92
- height: 0.625rem;
93
- width: 0.625rem;
94
- }
95
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
96
- outline: none;
97
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
98
- outline-offset: 0.125rem;
99
- }
100
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
101
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
102
- }
103
- .eds-form-component--radio__container .eds-form-component--radio__radio {
104
- position: relative;
105
- height: 1.25rem;
106
- width: 1.25rem;
107
- margin-right: 1rem;
108
- background-color: #ffffff;
109
- border: 0.125rem solid #181c56;
110
- border-radius: 50%;
111
- display: flex;
112
- align-items: center;
113
- justify-content: center;
114
- }
115
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
116
- background-color: #181c56;
117
- border-color: #aeb7e2;
118
- }
119
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
120
- background: #d1d3d3;
121
- border-color: #d1d3d3;
122
- cursor: not-allowed;
123
- }
124
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
125
- border-color: #d1d3d3;
126
- }
127
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
128
- background: #d1d3d3;
129
- border-color: #d1d3d3;
130
- }
131
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
132
- color: #656782;
133
- }
134
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
135
- display: block;
136
- width: 0;
137
- height: 0;
138
- border-radius: 50%;
139
- background-color: #181c56;
140
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
141
- }
142
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
143
- background-color: #aeb7e2;
144
- }/* DO NOT CHANGE!*/
145
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
146
- .eds-switch {
147
- align-items: center;
148
- cursor: pointer;
149
- display: flex;
150
- user-select: none;
151
- padding: 0.5rem 0;
152
- width: fit-content;
153
- }
154
- .eds-switch input {
155
- opacity: 0;
156
- pointer-events: none;
157
- position: absolute;
158
- }
159
- .eds-switch__circle {
160
- border-radius: 50%;
161
- height: 1.25rem;
162
- width: 1.25rem;
163
- content: "";
164
- display: flex;
165
- align-items: center;
166
- justify-content: center;
167
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
168
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
169
- background-color: #ffffff;
170
- top: 0.125rem;
171
- left: 0.125rem;
172
- position: relative;
173
- }
174
- .eds-switch__switch--large .eds-switch__circle {
175
- height: 1.75rem;
176
- width: 1.75rem;
177
- }
178
- .eds-switch .eds-switch__switch svg g,
179
- .eds-switch .eds-switch__switch path {
180
- fill: #949494;
181
- transition: fill ease-in-out 0.1s;
182
- }
183
- .eds-switch__switch {
184
- margin-right: 0.75rem;
185
- position: relative;
186
- background-color: #d1d3d3;
187
- content: "";
188
- display: block;
189
- transition: background-color 0.1s ease-in-out;
190
- height: 1.5rem;
191
- width: 3rem;
192
- border-radius: 1.5rem;
193
- }
194
- :checked + .eds-switch__switch {
195
- background-color: var(--eds-switch-color);
196
- }
197
- :checked + .eds-switch__switch .eds-switch__circle {
198
- left: 1.625rem;
199
- }
200
- :checked + .eds-switch__switch .eds-switch__circle svg g,
201
- :checked + .eds-switch__switch .eds-switch__circle path {
202
- fill: var(--eds-switch-color);
203
- }
204
- .eds-contrast :checked + .eds-switch__switch .eds-switch__circle svg g,
205
- .eds-contrast :checked + .eds-switch__switch .eds-switch__circle path {
206
- fill: var(--eds-switch-color);
207
- }
208
- .eds-contrast :checked + .eds-switch__switch {
209
- background-color: var(--eds-switch-contrast-color);
210
- }
211
- :focus + .eds-switch__switch {
212
- outline: none;
213
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
214
- outline-offset: 0.125rem;
215
- }
216
- .eds-contrast :focus + .eds-switch__switch {
217
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
218
- }
219
- .eds-contrast .eds-switch__switch {
220
- background-color: #54568c;
221
- }
222
- .eds-switch__switch--large {
223
- width: 3.75rem;
224
- height: 2rem;
225
- border-radius: 3.75rem;
226
- }
227
- :checked + .eds-switch__switch--large .eds-switch__circle {
228
- left: 1.875rem;
229
- }/* DO NOT CHANGE!*/
230
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
231
62
  .eds-checkbox__container {
232
63
  display: flex;
233
64
  align-items: center;
@@ -773,6 +604,197 @@ textarea.eds-form-control.eds-textarea {
773
604
  line-height: 1.5rem;
774
605
  }/* DO NOT CHANGE!*/
775
606
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
607
+ .eds-form-component--radio__container {
608
+ display: flex;
609
+ justify-content: center;
610
+ align-items: center;
611
+ position: relative;
612
+ cursor: pointer;
613
+ height: 2rem;
614
+ width: fit-content;
615
+ user-select: none;
616
+ }
617
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
618
+ border-color: #54568c;
619
+ }
620
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
621
+ background-color: #54568c;
622
+ }
623
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
624
+ border-color: #8285a8;
625
+ }
626
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
627
+ background-color: #8285a8;
628
+ }
629
+ .eds-form-component--radio__container input {
630
+ position: absolute;
631
+ opacity: 0;
632
+ cursor: pointer;
633
+ height: 0;
634
+ width: 0;
635
+ }
636
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
637
+ height: 0.625rem;
638
+ width: 0.625rem;
639
+ }
640
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
641
+ outline: none;
642
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
643
+ outline-offset: 0.125rem;
644
+ }
645
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
646
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
647
+ }
648
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
649
+ position: relative;
650
+ height: 1.25rem;
651
+ width: 1.25rem;
652
+ margin-right: 1rem;
653
+ background-color: #ffffff;
654
+ border: 0.125rem solid #181c56;
655
+ border-radius: 50%;
656
+ display: flex;
657
+ align-items: center;
658
+ justify-content: center;
659
+ }
660
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
661
+ background-color: #181c56;
662
+ border-color: #aeb7e2;
663
+ }
664
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
665
+ background: #d1d3d3;
666
+ border-color: #d1d3d3;
667
+ cursor: not-allowed;
668
+ }
669
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
670
+ border-color: #d1d3d3;
671
+ }
672
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
673
+ background: #d1d3d3;
674
+ border-color: #d1d3d3;
675
+ }
676
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
677
+ color: #656782;
678
+ }
679
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
680
+ display: block;
681
+ width: 0;
682
+ height: 0;
683
+ border-radius: 50%;
684
+ background-color: #181c56;
685
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
686
+ }
687
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
688
+ background-color: #aeb7e2;
689
+ }/* DO NOT CHANGE!*/
690
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
691
+ .eds-switch {
692
+ cursor: pointer;
693
+ user-select: none;
694
+ padding: 0.5rem 0;
695
+ width: fit-content;
696
+ }
697
+ .eds-switch input {
698
+ opacity: 0;
699
+ pointer-events: none;
700
+ position: absolute;
701
+ }
702
+ .eds-switch--right {
703
+ display: flex;
704
+ flex-direction: row;
705
+ align-items: center;
706
+ }
707
+ .eds-switch--bottom {
708
+ display: flex;
709
+ flex-direction: column;
710
+ align-items: center;
711
+ }
712
+ .eds-switch__circle {
713
+ border-radius: 50%;
714
+ height: 1.25rem;
715
+ width: 1.25rem;
716
+ content: "";
717
+ display: flex;
718
+ align-items: center;
719
+ justify-content: center;
720
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
721
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
722
+ background-color: #ffffff;
723
+ top: 0.125rem;
724
+ left: 0.125rem;
725
+ position: relative;
726
+ }
727
+ .eds-switch__switch--large .eds-switch__circle {
728
+ height: 1.75rem;
729
+ width: 1.75rem;
730
+ }
731
+ .eds-switch .eds-switch__switch svg g,
732
+ .eds-switch .eds-switch__switch path {
733
+ fill: #949494;
734
+ transition: fill ease-in-out 0.1s;
735
+ }
736
+ .eds-switch__switch {
737
+ position: relative;
738
+ background-color: #d1d3d3;
739
+ content: "";
740
+ display: block;
741
+ transition: background-color 0.1s ease-in-out;
742
+ height: 1.5rem;
743
+ width: 3rem;
744
+ border-radius: 1.5rem;
745
+ }
746
+ .eds-switch--right .eds-switch__switch {
747
+ margin-right: 0.75rem;
748
+ }
749
+ :checked + .eds-switch__switch {
750
+ background-color: var(--eds-switch-color);
751
+ }
752
+ :checked + .eds-switch__switch .eds-switch__circle {
753
+ left: 1.625rem;
754
+ }
755
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
756
+ :checked + .eds-switch__switch .eds-switch__circle path {
757
+ fill: var(--eds-switch-color);
758
+ }
759
+ .eds-contrast :checked + .eds-switch__switch .eds-switch__circle svg g,
760
+ .eds-contrast :checked + .eds-switch__switch .eds-switch__circle path {
761
+ fill: var(--eds-switch-color);
762
+ }
763
+ .eds-contrast :checked + .eds-switch__switch {
764
+ background-color: var(--eds-switch-contrast-color);
765
+ }
766
+ :focus + .eds-switch__switch {
767
+ outline: none;
768
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
769
+ outline-offset: 0.125rem;
770
+ }
771
+ .eds-contrast :focus + .eds-switch__switch {
772
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
773
+ }
774
+ .eds-contrast .eds-switch__switch {
775
+ background-color: #54568c;
776
+ }
777
+ .eds-switch__switch--large {
778
+ width: 3.75rem;
779
+ height: 2rem;
780
+ border-radius: 3.75rem;
781
+ }
782
+ :checked + .eds-switch__switch--large .eds-switch__circle {
783
+ left: 1.875rem;
784
+ }
785
+ .eds-switch__label--large--right {
786
+ font-size: 1rem;
787
+ }
788
+ .eds-switch__label--large--bottom {
789
+ font-size: 0.875rem;
790
+ }
791
+ .eds-switch__label--medium--right {
792
+ font-size: 0.875rem;
793
+ }
794
+ .eds-switch__label--medium--bottom {
795
+ font-size: 0.75rem;
796
+ }/* DO NOT CHANGE!*/
797
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
776
798
  .eds-textfield__clear-button {
777
799
  background: none;
778
800
  border: none;
@@ -810,6 +832,7 @@ textarea.eds-form-control.eds-textarea {
810
832
  }/* DO NOT CHANGE!*/
811
833
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
812
834
  .eds-segmented-control {
835
+ margin-top: 0.25rem;
813
836
  display: flex;
814
837
  background: #d1d4e3;
815
838
  border-radius: 0.25rem;
package/dist/utils.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export declare function hasValue(value: any): boolean;
2
- export declare function isFilled(obj: any, SSR?: boolean): boolean;
2
+ export declare function isFilled(obj: any, SSR?: boolean): any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "5.1.4",
3
+ "version": "5.2.2",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -17,22 +17,22 @@
17
17
  "access": "public"
18
18
  },
19
19
  "scripts": {
20
- "start": "tsdx watch --noClean",
21
- "build": "tsdx build",
22
- "test": "tsdx test --env=jsdom",
23
- "lint": "tsdx lint"
20
+ "start": "dts watch --noClean",
21
+ "build": "dts build",
22
+ "test": "dts test --env=jsdom",
23
+ "lint": "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": "^3.4.0",
31
- "@entur/tokens": "^3.3.0",
32
- "@entur/tooltip": "^2.4.27",
33
- "@entur/typography": "^1.6.10",
34
- "@entur/utils": "^0.4.2",
30
+ "@entur/icons": "^3.4.1",
31
+ "@entur/tokens": "^3.3.1",
32
+ "@entur/tooltip": "^2.5.2",
33
+ "@entur/typography": "^1.6.11",
34
+ "@entur/utils": "^0.4.3",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "6255452bbbb124b6569095cf08f96143873a7f8e"
37
+ "gitHead": "61e643371cfc5653c93160b7c220152e5b2bafeb"
38
38
  }