@entur/dropdown 5.0.17 → 5.0.19

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
@@ -1,30 +1,118 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-dropdown__toggle-button {
4
- -webkit-appearance: none;
5
- -moz-appearance: none;
6
- appearance: none;
7
- background: none;
8
- border: none;
9
- border-radius: 0;
10
- color: inherit;
11
- font-size: inherit;
3
+ .eds-dropdown__searchable-selected-item {
4
+ display: block;
5
+ font-size: 1rem;
6
+ line-height: 1rem;
7
+ margin-right: -1rem;
8
+ padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
12
9
  font-family: inherit;
13
- margin-right: -0.75rem;
14
- padding: 0.5rem;
10
+ overflow-x: hidden;
11
+ text-overflow: ellipsis;
12
+ white-space: nowrap;
13
+ }
14
+ .eds-dropdown__searchable-selected-item__wrapper {
15
+ max-width: 65%;
16
+ }
17
+
18
+ .eds-form-control.eds-dropdown__input::-moz-placeholder {
19
+ -moz-transition: none;
20
+ transition: none;
21
+ }
22
+
23
+ .eds-form-control.eds-dropdown__input::placeholder {
24
+ transition: none;
25
+ }
26
+ /* DO NOT CHANGE!*/
27
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
28
+ .eds-multi-select {
29
+ position: relative;
30
+ }
31
+ .eds-multi-select__selected-items {
15
32
  display: flex;
16
- justify-content: center;
33
+ align-items: center;
34
+ flex-wrap: wrap;
35
+ position: relative;
36
+ flex: 1 1 0%;
37
+ padding: 0.25rem;
17
38
  }
18
- .eds-dropdown__toggle-button--open svg {
19
- transform: rotate(180deg);
39
+ .eds-multi-select__selected-items-tag.eds-tag-chip {
40
+ margin-left: 0.25rem;
41
+ white-space: nowrap;
20
42
  }
21
- .eds-dropdown__toggle-button:focus {
43
+ .eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip svg {
44
+ color: #181c56;
45
+ }
46
+ .eds-multi-select__selected-items-tag.eds-tag-chip:focus {
22
47
  outline-offset: 0.125rem;
23
- outline: none;
24
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
25
48
  }
26
- .eds-contrast .eds-dropdown__toggle-button:focus {
27
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
49
+ .eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip {
50
+ color: #181c56;
51
+ background: #ebebf1;
52
+ border: 0.0625rem solid #d1d4e3;
53
+ }
54
+ .eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip .eds-tag-chip__close-button:hover {
55
+ background: #babbcf;
56
+ }
57
+ .eds-multi-select__input {
58
+ flex: 1 1;
59
+ min-height: 44px;
60
+ display: flex;
61
+ align-items: center;
62
+ }
63
+ .eds-multi-select__placeholder {
64
+ padding-left: 1.5rem;
65
+ line-height: 1.375rem;
66
+ font-size: 1rem;
67
+ }
68
+ .eds-checkbox-icon {
69
+ height: 1rem;
70
+ width: 1rem;
71
+ visibility: hidden;
72
+ }
73
+ .eds-checkbox-icon__path {
74
+ transform-origin: 50% 50%;
75
+ stroke-dasharray: 48;
76
+ stroke-dashoffset: 48;
77
+ stroke-width: 0.375rem;
78
+ }
79
+
80
+ .eds-multiselect {
81
+ position: relative;
82
+ }
83
+ .eds-multiselect__button {
84
+ text-overflow: ellipsis;
85
+ }
86
+
87
+ .eds-multiselect-checkbox {
88
+ display: inline-flex;
89
+ justify-content: center;
90
+ align-items: center;
91
+ position: relative;
92
+ margin-right: 0.75rem;
93
+ height: 1.25rem;
94
+ width: 1.25rem;
95
+ border: 0.125rem solid #181c56;
96
+ border-radius: 0.0625rem;
97
+ background-color: transparent;
98
+ color: #ffffff;
99
+ }
100
+
101
+ .eds-multiselect-checkbox--checked {
102
+ background-color: #181c56;
103
+ }
104
+ .eds-multiselect-checkbox--checked .eds-checkbox-icon {
105
+ visibility: visible;
106
+ }
107
+ .eds-multiselect-checkbox--checked .eds-checkbox-icon__path {
108
+ stroke: #ffffff;
109
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
110
+ }
111
+
112
+ @keyframes stroke {
113
+ 100% {
114
+ stroke-dashoffset: 0;
115
+ }
28
116
  }
29
117
  /* DO NOT CHANGE!*/
30
118
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -90,30 +178,40 @@
90
178
  .eds-dropdown-list-icon {
91
179
  margin-left: 0.75rem;
92
180
  }
181
+ .eds-inline-spinner {
182
+ align-items: center;
183
+ display: flex;
184
+ justify-content: center;
185
+ height: 100%;
186
+ width: 100%;
187
+ }
93
188
  /* DO NOT CHANGE!*/
94
189
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
95
- .eds-dropdown__searchable-selected-item {
96
- display: block;
97
- font-size: 1rem;
98
- line-height: 1rem;
99
- margin-right: -1rem;
100
- padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
190
+ .eds-dropdown__toggle-button {
191
+ -webkit-appearance: none;
192
+ -moz-appearance: none;
193
+ appearance: none;
194
+ background: none;
195
+ border: none;
196
+ border-radius: 0;
197
+ color: inherit;
198
+ font-size: inherit;
101
199
  font-family: inherit;
102
- overflow-x: hidden;
103
- text-overflow: ellipsis;
104
- white-space: nowrap;
200
+ margin-right: -0.75rem;
201
+ padding: 0.5rem;
202
+ display: flex;
203
+ justify-content: center;
105
204
  }
106
- .eds-dropdown__searchable-selected-item__wrapper {
107
- max-width: 65%;
205
+ .eds-dropdown__toggle-button--open svg {
206
+ transform: rotate(180deg);
108
207
  }
109
-
110
- .eds-form-control.eds-dropdown__input::-moz-placeholder {
111
- -moz-transition: none;
112
- transition: none;
208
+ .eds-dropdown__toggle-button:focus {
209
+ outline-offset: 0.125rem;
210
+ outline: none;
211
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
113
212
  }
114
-
115
- .eds-form-control.eds-dropdown__input::placeholder {
116
- transition: none;
213
+ .eds-contrast .eds-dropdown__toggle-button:focus {
214
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
117
215
  }
118
216
  /* DO NOT CHANGE!*/
119
217
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -173,104 +271,6 @@
173
271
  .eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown__divider {
174
272
  background-color: #8285a8;
175
273
  }
176
- .eds-inline-spinner {
177
- align-items: center;
178
- display: flex;
179
- justify-content: center;
180
- height: 100%;
181
- width: 100%;
182
- }
183
- /* DO NOT CHANGE!*/
184
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
185
- .eds-multi-select {
186
- position: relative;
187
- }
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;
195
- }
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;
217
- display: flex;
218
- align-items: center;
219
- }
220
- .eds-multi-select__placeholder {
221
- padding-left: 1.5rem;
222
- line-height: 1.375rem;
223
- font-size: 1rem;
224
- }
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
- }
236
-
237
- .eds-multiselect {
238
- position: relative;
239
- }
240
- .eds-multiselect__button {
241
- text-overflow: ellipsis;
242
- }
243
-
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;
256
- }
257
-
258
- .eds-multiselect-checkbox--checked {
259
- background-color: #181c56;
260
- }
261
- .eds-multiselect-checkbox--checked .eds-checkbox-icon {
262
- visibility: visible;
263
- }
264
- .eds-multiselect-checkbox--checked .eds-checkbox-icon__path {
265
- stroke: #ffffff;
266
- animation: stroke ease-in-out 0.2s 0.1s forwards;
267
- }
268
-
269
- @keyframes stroke {
270
- 100% {
271
- stroke-dashoffset: 0;
272
- }
273
- }
274
274
  /* DO NOT CHANGE!*/
275
275
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
276
276
  .eds-dropdown__list {
@@ -357,73 +357,49 @@
357
357
  }
358
358
  /* DO NOT CHANGE!*/
359
359
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
360
- .eds-dropdown__wrapper {
361
- position: relative;
362
- width: 100%;
363
- min-width: 6rem;
364
- max-width: 100%;
365
- }
366
- .eds-dropdown__input {
367
- flex: 1;
368
- width: 0;
369
- min-height: 3rem;
370
- }
371
- .eds-dropdown__input--hidden {
372
- flex: 0;
373
- }
374
- .eds-dropdown__input__wrapper {
375
- flex: 1 1 auto;
376
- display: flex;
360
+ .eds-dropdown__selected-item-tag {
361
+ height: 1.5rem;
362
+ max-width: 10rem;
363
+ padding: 0;
377
364
  }
378
- .eds-dropdown__selected-item {
379
- cursor: pointer;
380
- flex: 1;
381
- padding: 1.25rem 1rem 0.25rem;
382
- min-height: 3rem;
383
- overflow-x: hidden;
365
+ .eds-dropdown__selected-item-tag > span {
366
+ overflow: hidden;
384
367
  text-overflow: ellipsis;
368
+ white-space: nowrap;
369
+ margin-left: 0.5rem;
385
370
  }
386
- .eds-dropdown__selected-item__placeholder {
387
- color: #54568c;
371
+ .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
372
+ margin-right: 0.125rem;
388
373
  }
389
- .eds-contrast .eds-dropdown__selected-item__placeholder {
390
- color: #656782;
374
+ .eds-dropdown__selected-item-tag .eds-tag-chip__close-button > svg {
375
+ font-size: 0.6rem;
391
376
  }
392
- .eds-contrast .eds-dropdown__selected-item__placeholder--readonly {
393
- color: #aeb7e2;
377
+ .eds-contrast .eds-dropdown__selected-item-tag {
378
+ background: #ebebf1;
379
+ border: 0.0625rem solid #d1d4e3;
380
+ color: #181c56;
394
381
  }
395
- .eds-dropdown--searchable__selected-item {
396
- position: relative;
397
- top: 5px;
398
- flex: 1;
399
- overflow-x: hidden;
400
- text-overflow: ellipsis;
401
- font-size: 1rem;
402
- line-height: 1rem;
403
- margin-right: -1rem;
404
- padding: 1.25rem 0rem 0.25rem 1rem;
405
- font-family: inherit;
382
+ .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
383
+ color: #181c56;
406
384
  }
407
- .eds-dropdown--searchable__selected-item--hidden {
408
- flex: 0;
385
+ .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:hover {
386
+ background-color: #babbcf;
409
387
  }
410
- .eds-dropdown--multiselect__selected-items-and-input {
411
- display: flex;
412
- flex-wrap: wrap;
413
- flex: 1;
414
- gap: 0.5rem;
415
- min-width: 0;
388
+ .eds-dropdown__selected-item-tag--readonly, .eds-dropdown__selected-item-tag--disabled {
389
+ padding-right: 0.5rem;
416
390
  }
417
- .eds-dropdown--multiselect__selected-items-and-input--filled {
418
- padding: 1.25rem 0rem 0.25rem 1rem;
391
+ .eds-dropdown__selected-item-tag--readonly .eds-tag-chip__close-button, .eds-dropdown__selected-item-tag--disabled .eds-tag-chip__close-button {
392
+ display: none;
419
393
  }
420
- .eds-dropdown--multiselect__selected-items-and-input--filled .eds-dropdown__input {
421
- padding: 0;
422
- padding: initial;
423
- min-height: 1.5rem;
394
+ .eds-contrast .eds-dropdown__selected-item-tag--readonly {
395
+ background-color: #8285a8;
396
+ border-color: transparent;
397
+ color: #ffffff;
424
398
  }
425
- .eds-dropdown--multiselect__selected-items-and-input--filled .eds-tag-chip:focus {
426
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
399
+ .eds-contrast .eds-dropdown__selected-item-tag--disabled {
400
+ background-color: #54568c;
401
+ border-color: transparent;
402
+ color: #8285a8;
427
403
  }
428
404
  .eds-dropdown__appendix {
429
405
  display: flex;
@@ -474,8 +450,8 @@
474
450
  display: flex;
475
451
  justify-content: center;
476
452
  height: 100%;
477
- width: 100%;
478
- margin-right: 0;
453
+ width: 1rem;
454
+ margin-left: calc(0.5rem + 2px);
479
455
  }
480
456
  .eds-contrast .eds-dropdown__appendix__toggle-button:hover {
481
457
  background: #d1d3d3;
@@ -487,6 +463,77 @@
487
463
  border: none;
488
464
  outline: none;
489
465
  }
466
+ /* DO NOT CHANGE!*/
467
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
468
+ .eds-dropdown__wrapper {
469
+ position: relative;
470
+ width: 100%;
471
+ min-width: 6rem;
472
+ max-width: 100%;
473
+ }
474
+ .eds-dropdown__input {
475
+ flex: 1;
476
+ width: 0;
477
+ min-height: 3rem;
478
+ }
479
+ .eds-dropdown__input--hidden {
480
+ flex: 0;
481
+ }
482
+ .eds-dropdown__input__wrapper {
483
+ flex: 1 1 auto;
484
+ display: flex;
485
+ }
486
+ .eds-dropdown__selected-item {
487
+ cursor: pointer;
488
+ flex: 1;
489
+ padding: 1.25rem 1rem 0.25rem;
490
+ min-height: 3rem;
491
+ overflow-x: hidden;
492
+ text-overflow: ellipsis;
493
+ }
494
+ .eds-dropdown__selected-item__placeholder {
495
+ color: #54568c;
496
+ }
497
+ .eds-contrast .eds-dropdown__selected-item__placeholder {
498
+ color: #656782;
499
+ }
500
+ .eds-contrast .eds-dropdown__selected-item__placeholder--readonly {
501
+ color: #aeb7e2;
502
+ }
503
+ .eds-dropdown--searchable__selected-item {
504
+ position: relative;
505
+ top: 5px;
506
+ flex: 1;
507
+ overflow-x: hidden;
508
+ text-overflow: ellipsis;
509
+ white-space: nowrap;
510
+ font-size: 1rem;
511
+ line-height: 1rem;
512
+ margin-right: -1rem;
513
+ padding: 1.25rem 0rem 0.25rem 1rem;
514
+ font-family: inherit;
515
+ }
516
+ .eds-dropdown--searchable__selected-item--hidden {
517
+ flex: 0;
518
+ }
519
+ .eds-dropdown--multiselect__selected-items-and-input {
520
+ display: flex;
521
+ flex-wrap: wrap;
522
+ flex: 1;
523
+ gap: 0.5rem;
524
+ min-width: 0;
525
+ }
526
+ .eds-dropdown--multiselect__selected-items-and-input--filled {
527
+ padding: 1.25rem 0rem 0.25rem 1rem;
528
+ }
529
+ .eds-dropdown--multiselect__selected-items-and-input--filled .eds-dropdown__input {
530
+ padding: 0;
531
+ padding: initial;
532
+ min-height: 1.5rem;
533
+ }
534
+ .eds-dropdown--multiselect__selected-items-and-input--filled .eds-tag-chip:focus {
535
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
536
+ }
490
537
  .eds-dropdown.eds-form-control-wrapper {
491
538
  align-items: start;
492
539
  }
@@ -521,52 +568,6 @@
521
568
  .eds-contrast .eds-dropdown--native option {
522
569
  color: #181c56;
523
570
  }
524
- /* DO NOT CHANGE!*/
525
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
526
- .eds-dropdown__selected-item-tag {
527
- height: 1.5rem;
528
- max-width: 10rem;
529
- padding: 0;
530
- }
531
- .eds-dropdown__selected-item-tag > span {
532
- overflow: hidden;
533
- text-overflow: ellipsis;
534
- white-space: nowrap;
535
- margin-left: 0.5rem;
536
- }
537
- .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
538
- margin-right: 0.125rem;
539
- }
540
- .eds-dropdown__selected-item-tag .eds-tag-chip__close-button > svg {
541
- font-size: 0.6rem;
542
- }
543
- .eds-contrast .eds-dropdown__selected-item-tag {
544
- background: #ebebf1;
545
- border: 0.0625rem solid #d1d4e3;
546
- color: #181c56;
547
- }
548
- .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
549
- color: #181c56;
550
- }
551
- .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:hover {
552
- background-color: #babbcf;
553
- }
554
- .eds-dropdown__selected-item-tag--readonly, .eds-dropdown__selected-item-tag--disabled {
555
- padding-right: 0.5rem;
556
- }
557
- .eds-dropdown__selected-item-tag--readonly .eds-tag-chip__close-button, .eds-dropdown__selected-item-tag--disabled .eds-tag-chip__close-button {
558
- display: none;
559
- }
560
- .eds-contrast .eds-dropdown__selected-item-tag--readonly {
561
- background-color: #8285a8;
562
- border-color: transparent;
563
- color: #ffffff;
564
- }
565
- .eds-contrast .eds-dropdown__selected-item-tag--disabled {
566
- background-color: #54568c;
567
- border-color: transparent;
568
- color: #8285a8;
569
- }
570
571
  :root {
571
572
  --eds-dropdown: 1;
572
573
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/dropdown",
3
- "version": "5.0.17",
3
+ "version": "5.0.19",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/dropdown.esm.js",
@@ -39,5 +39,5 @@
39
39
  "classnames": "^2.3.1",
40
40
  "downshift": "^7.6.1"
41
41
  },
42
- "gitHead": "bfcfe0c1a78ad15d2e1a3fffe235ec21f02bae17"
42
+ "gitHead": "6d109c0335f6803a2a48a7e77d7c14f5c74505a5"
43
43
  }