@entur/dropdown 5.4.0 → 5.4.1
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 +152 -152
- package/package.json +10 -10
package/dist/styles.css
CHANGED
|
@@ -1,101 +1,3 @@
|
|
|
1
|
-
.eds-inline-spinner {
|
|
2
|
-
align-items: center;
|
|
3
|
-
display: flex;
|
|
4
|
-
justify-content: center;
|
|
5
|
-
height: 100%;
|
|
6
|
-
width: 100%;
|
|
7
|
-
}
|
|
8
|
-
/* DO NOT CHANGE!*/
|
|
9
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
10
|
-
.eds-multi-select {
|
|
11
|
-
position: relative;
|
|
12
|
-
}
|
|
13
|
-
.eds-multi-select__selected-items {
|
|
14
|
-
display: flex;
|
|
15
|
-
align-items: center;
|
|
16
|
-
flex-wrap: wrap;
|
|
17
|
-
position: relative;
|
|
18
|
-
flex: 1 1 0%;
|
|
19
|
-
padding: 0.25rem;
|
|
20
|
-
}
|
|
21
|
-
.eds-multi-select__selected-items-tag.eds-tag-chip {
|
|
22
|
-
margin-left: 0.25rem;
|
|
23
|
-
white-space: nowrap;
|
|
24
|
-
}
|
|
25
|
-
.eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip svg {
|
|
26
|
-
color: #181c56;
|
|
27
|
-
}
|
|
28
|
-
.eds-multi-select__selected-items-tag.eds-tag-chip:focus {
|
|
29
|
-
outline-offset: 0.125rem;
|
|
30
|
-
}
|
|
31
|
-
.eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip {
|
|
32
|
-
color: #181c56;
|
|
33
|
-
background: #ebebf1;
|
|
34
|
-
border: 0.0625rem solid #d1d4e3;
|
|
35
|
-
}
|
|
36
|
-
.eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip .eds-tag-chip__close-button:hover {
|
|
37
|
-
background: #babbcf;
|
|
38
|
-
}
|
|
39
|
-
.eds-multi-select__input {
|
|
40
|
-
flex: 1 1;
|
|
41
|
-
min-height: 44px;
|
|
42
|
-
display: flex;
|
|
43
|
-
align-items: center;
|
|
44
|
-
}
|
|
45
|
-
.eds-multi-select__placeholder {
|
|
46
|
-
padding-left: 1.5rem;
|
|
47
|
-
line-height: 1.375rem;
|
|
48
|
-
font-size: 1rem;
|
|
49
|
-
}
|
|
50
|
-
.eds-checkbox-icon {
|
|
51
|
-
height: 1rem;
|
|
52
|
-
width: 1rem;
|
|
53
|
-
visibility: hidden;
|
|
54
|
-
}
|
|
55
|
-
.eds-checkbox-icon__path {
|
|
56
|
-
transform-origin: 50% 50%;
|
|
57
|
-
stroke-dasharray: 48;
|
|
58
|
-
stroke-dashoffset: 48;
|
|
59
|
-
stroke-width: 0.375rem;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.eds-multiselect {
|
|
63
|
-
position: relative;
|
|
64
|
-
}
|
|
65
|
-
.eds-multiselect__button {
|
|
66
|
-
text-overflow: ellipsis;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.eds-multiselect-checkbox {
|
|
70
|
-
display: inline-flex;
|
|
71
|
-
justify-content: center;
|
|
72
|
-
align-items: center;
|
|
73
|
-
position: relative;
|
|
74
|
-
margin-right: 0.75rem;
|
|
75
|
-
height: 1.25rem;
|
|
76
|
-
width: 1.25rem;
|
|
77
|
-
border: 0.125rem solid #181c56;
|
|
78
|
-
border-radius: 0.0625rem;
|
|
79
|
-
background-color: transparent;
|
|
80
|
-
color: #ffffff;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.eds-multiselect-checkbox--checked {
|
|
84
|
-
background-color: #181c56;
|
|
85
|
-
}
|
|
86
|
-
.eds-multiselect-checkbox--checked .eds-checkbox-icon {
|
|
87
|
-
visibility: visible;
|
|
88
|
-
}
|
|
89
|
-
.eds-multiselect-checkbox--checked .eds-checkbox-icon__path {
|
|
90
|
-
stroke: #ffffff;
|
|
91
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
@keyframes stroke {
|
|
95
|
-
100% {
|
|
96
|
-
stroke-dashoffset: 0;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
1
|
/* DO NOT CHANGE!*/
|
|
100
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
101
3
|
.eds-dropdown__searchable-selected-item {
|
|
@@ -123,31 +25,61 @@
|
|
|
123
25
|
}
|
|
124
26
|
/* DO NOT CHANGE!*/
|
|
125
27
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
126
|
-
.eds-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
28
|
+
.eds-dropdown-wrapper {
|
|
29
|
+
position: relative;
|
|
30
|
+
}
|
|
31
|
+
.eds-dropdown-wrapper .eds-form-control {
|
|
32
|
+
padding-right: 0;
|
|
33
|
+
}
|
|
34
|
+
.eds-dropdown-wrapper .eds-form-control__append {
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.eds-dropdown__input::-moz-placeholder {
|
|
40
|
+
color: var(--components-form-baseform-standard-text-label);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.eds-dropdown__input::placeholder {
|
|
44
|
+
color: var(--components-form-baseform-standard-text-label);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.eds-dropdown__selected-item {
|
|
48
|
+
overflow-x: hidden;
|
|
49
|
+
text-overflow: ellipsis;
|
|
50
|
+
white-space: nowrap;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.eds-dropdown__clear-button {
|
|
130
54
|
background: none;
|
|
131
55
|
border: none;
|
|
132
|
-
border-radius:
|
|
56
|
+
border-radius: 50%;
|
|
133
57
|
color: inherit;
|
|
134
|
-
|
|
135
|
-
font-family: inherit;
|
|
136
|
-
margin-right: -0.75rem;
|
|
137
|
-
padding: 0.5rem;
|
|
58
|
+
cursor: pointer;
|
|
138
59
|
display: flex;
|
|
139
|
-
|
|
60
|
+
font: inherit;
|
|
61
|
+
font-size: 1rem;
|
|
62
|
+
line-height: 1rem;
|
|
63
|
+
padding: 0.5rem;
|
|
140
64
|
}
|
|
141
|
-
.eds-
|
|
142
|
-
|
|
65
|
+
.eds-dropdown__clear-button:hover {
|
|
66
|
+
background: #f3f3f3;
|
|
143
67
|
}
|
|
144
|
-
.eds-
|
|
68
|
+
.eds-dropdown__clear-button:focus {
|
|
145
69
|
outline-offset: 0.125rem;
|
|
146
70
|
outline: none;
|
|
147
71
|
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
148
72
|
}
|
|
149
|
-
|
|
150
|
-
|
|
73
|
+
|
|
74
|
+
.eds-dropdown__divider {
|
|
75
|
+
content: "";
|
|
76
|
+
display: block;
|
|
77
|
+
background-color: #e9e9e9;
|
|
78
|
+
height: 1.5rem;
|
|
79
|
+
width: 1px;
|
|
80
|
+
}
|
|
81
|
+
.eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown__divider {
|
|
82
|
+
background-color: #8285a8;
|
|
151
83
|
}
|
|
152
84
|
/* DO NOT CHANGE!*/
|
|
153
85
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -213,63 +145,131 @@
|
|
|
213
145
|
.eds-dropdown-list-icon {
|
|
214
146
|
margin-left: 0.75rem;
|
|
215
147
|
}
|
|
148
|
+
.eds-inline-spinner {
|
|
149
|
+
align-items: center;
|
|
150
|
+
display: flex;
|
|
151
|
+
justify-content: center;
|
|
152
|
+
height: 100%;
|
|
153
|
+
width: 100%;
|
|
154
|
+
}
|
|
216
155
|
/* DO NOT CHANGE!*/
|
|
217
156
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
218
|
-
.eds-
|
|
157
|
+
.eds-dropdown__toggle-button {
|
|
158
|
+
-webkit-appearance: none;
|
|
159
|
+
-moz-appearance: none;
|
|
160
|
+
appearance: none;
|
|
161
|
+
background: none;
|
|
162
|
+
border: none;
|
|
163
|
+
border-radius: 0;
|
|
164
|
+
color: inherit;
|
|
165
|
+
font-size: inherit;
|
|
166
|
+
font-family: inherit;
|
|
167
|
+
margin-right: -0.75rem;
|
|
168
|
+
padding: 0.5rem;
|
|
169
|
+
display: flex;
|
|
170
|
+
justify-content: center;
|
|
171
|
+
}
|
|
172
|
+
.eds-dropdown__toggle-button--open svg {
|
|
173
|
+
transform: rotate(180deg);
|
|
174
|
+
}
|
|
175
|
+
.eds-dropdown__toggle-button:focus {
|
|
176
|
+
outline-offset: 0.125rem;
|
|
177
|
+
outline: none;
|
|
178
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
179
|
+
}
|
|
180
|
+
.eds-contrast .eds-dropdown__toggle-button:focus {
|
|
181
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
182
|
+
}
|
|
183
|
+
/* DO NOT CHANGE!*/
|
|
184
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
185
|
+
.eds-multi-select {
|
|
219
186
|
position: relative;
|
|
220
187
|
}
|
|
221
|
-
.eds-
|
|
222
|
-
|
|
188
|
+
.eds-multi-select__selected-items {
|
|
189
|
+
display: flex;
|
|
190
|
+
align-items: center;
|
|
191
|
+
flex-wrap: wrap;
|
|
192
|
+
position: relative;
|
|
193
|
+
flex: 1 1 0%;
|
|
194
|
+
padding: 0.25rem;
|
|
223
195
|
}
|
|
224
|
-
.eds-
|
|
196
|
+
.eds-multi-select__selected-items-tag.eds-tag-chip {
|
|
197
|
+
margin-left: 0.25rem;
|
|
198
|
+
white-space: nowrap;
|
|
199
|
+
}
|
|
200
|
+
.eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip svg {
|
|
201
|
+
color: #181c56;
|
|
202
|
+
}
|
|
203
|
+
.eds-multi-select__selected-items-tag.eds-tag-chip:focus {
|
|
204
|
+
outline-offset: 0.125rem;
|
|
205
|
+
}
|
|
206
|
+
.eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip {
|
|
207
|
+
color: #181c56;
|
|
208
|
+
background: #ebebf1;
|
|
209
|
+
border: 0.0625rem solid #d1d4e3;
|
|
210
|
+
}
|
|
211
|
+
.eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip .eds-tag-chip__close-button:hover {
|
|
212
|
+
background: #babbcf;
|
|
213
|
+
}
|
|
214
|
+
.eds-multi-select__input {
|
|
215
|
+
flex: 1 1;
|
|
216
|
+
min-height: 44px;
|
|
225
217
|
display: flex;
|
|
226
218
|
align-items: center;
|
|
227
219
|
}
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
220
|
+
.eds-multi-select__placeholder {
|
|
221
|
+
padding-left: 1.5rem;
|
|
222
|
+
line-height: 1.375rem;
|
|
223
|
+
font-size: 1rem;
|
|
231
224
|
}
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
225
|
+
.eds-checkbox-icon {
|
|
226
|
+
height: 1rem;
|
|
227
|
+
width: 1rem;
|
|
228
|
+
visibility: hidden;
|
|
229
|
+
}
|
|
230
|
+
.eds-checkbox-icon__path {
|
|
231
|
+
transform-origin: 50% 50%;
|
|
232
|
+
stroke-dasharray: 48;
|
|
233
|
+
stroke-dashoffset: 48;
|
|
234
|
+
stroke-width: 0.375rem;
|
|
235
235
|
}
|
|
236
236
|
|
|
237
|
-
.eds-
|
|
238
|
-
|
|
237
|
+
.eds-multiselect {
|
|
238
|
+
position: relative;
|
|
239
|
+
}
|
|
240
|
+
.eds-multiselect__button {
|
|
239
241
|
text-overflow: ellipsis;
|
|
240
|
-
white-space: nowrap;
|
|
241
242
|
}
|
|
242
243
|
|
|
243
|
-
.eds-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
244
|
+
.eds-multiselect-checkbox {
|
|
245
|
+
display: inline-flex;
|
|
246
|
+
justify-content: center;
|
|
247
|
+
align-items: center;
|
|
248
|
+
position: relative;
|
|
249
|
+
margin-right: 0.75rem;
|
|
250
|
+
height: 1.25rem;
|
|
251
|
+
width: 1.25rem;
|
|
252
|
+
border: 0.125rem solid #181c56;
|
|
253
|
+
border-radius: 0.0625rem;
|
|
254
|
+
background-color: transparent;
|
|
255
|
+
color: #ffffff;
|
|
254
256
|
}
|
|
255
|
-
|
|
256
|
-
|
|
257
|
+
|
|
258
|
+
.eds-multiselect-checkbox--checked {
|
|
259
|
+
background-color: #181c56;
|
|
257
260
|
}
|
|
258
|
-
.eds-
|
|
259
|
-
|
|
260
|
-
outline: none;
|
|
261
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
261
|
+
.eds-multiselect-checkbox--checked .eds-checkbox-icon {
|
|
262
|
+
visibility: visible;
|
|
262
263
|
}
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
display: block;
|
|
267
|
-
background-color: #e9e9e9;
|
|
268
|
-
height: 1.5rem;
|
|
269
|
-
width: 1px;
|
|
264
|
+
.eds-multiselect-checkbox--checked .eds-checkbox-icon__path {
|
|
265
|
+
stroke: #ffffff;
|
|
266
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
270
267
|
}
|
|
271
|
-
|
|
272
|
-
|
|
268
|
+
|
|
269
|
+
@keyframes stroke {
|
|
270
|
+
100% {
|
|
271
|
+
stroke-dashoffset: 0;
|
|
272
|
+
}
|
|
273
273
|
}
|
|
274
274
|
/* DO NOT CHANGE!*/
|
|
275
275
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/dropdown",
|
|
3
|
-
"version": "5.4.
|
|
3
|
+
"version": "5.4.1",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/dropdown.esm.js",
|
|
@@ -27,17 +27,17 @@
|
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@entur/a11y": "^0.2.
|
|
31
|
-
"@entur/button": "^3.2.
|
|
32
|
-
"@entur/chip": "^0.7.
|
|
33
|
-
"@entur/form": "^7.1.
|
|
34
|
-
"@entur/icons": "^6.15.
|
|
35
|
-
"@entur/loader": "^0.4.
|
|
36
|
-
"@entur/tokens": "^3.13.
|
|
37
|
-
"@entur/tooltip": "^2.7.
|
|
30
|
+
"@entur/a11y": "^0.2.81",
|
|
31
|
+
"@entur/button": "^3.2.17",
|
|
32
|
+
"@entur/chip": "^0.7.2",
|
|
33
|
+
"@entur/form": "^7.1.1",
|
|
34
|
+
"@entur/icons": "^6.15.6",
|
|
35
|
+
"@entur/loader": "^0.4.61",
|
|
36
|
+
"@entur/tokens": "^3.13.4",
|
|
37
|
+
"@entur/tooltip": "^2.7.1",
|
|
38
38
|
"@entur/utils": "^0.11.0",
|
|
39
39
|
"classnames": "^2.3.1",
|
|
40
40
|
"downshift": "^8.3.3"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "af2884729bb414d54d6cf9e9a28b2b6f7c74af74"
|
|
43
43
|
}
|