govuk_publishing_components 65.1.0 → 65.2.0

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 (69) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/component_guide/application.scss +13 -15
  3. data/app/assets/stylesheets/govuk_publishing_components/all-components.scss +0 -1
  4. data/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss +25 -0
  5. data/app/assets/stylesheets/govuk_publishing_components/components/_details.scss +34 -0
  6. data/app/assets/stylesheets/govuk_publishing_components/components/_heading.scss +1 -0
  7. data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss +4 -0
  8. data/app/assets/stylesheets/govuk_publishing_components/specific-components.scss +0 -1
  9. data/app/controllers/govuk_publishing_components/applications_page_controller.rb +1 -1
  10. data/app/controllers/govuk_publishing_components/audit_controller.rb +0 -1
  11. data/app/models/govuk_publishing_components/component_doc.rb +10 -3
  12. data/app/models/govuk_publishing_components/component_wrapper_helper_options.rb +4 -2
  13. data/app/views/govuk_publishing_components/component_guide/component_doc/_component.html.erb +1 -1
  14. data/app/views/govuk_publishing_components/component_guide/component_doc/_preview.html.erb +2 -2
  15. data/app/views/govuk_publishing_components/component_guide/show.html.erb +47 -33
  16. data/app/views/govuk_publishing_components/components/_details.html.erb +4 -0
  17. data/app/views/govuk_publishing_components/components/_devolved_nations.html.erb +2 -2
  18. data/app/views/govuk_publishing_components/components/_option_select.html.erb +2 -2
  19. data/app/views/govuk_publishing_components/components/docs/details.yml +16 -0
  20. data/lib/govuk_publishing_components/presenters/devolved_nations_helper.rb +13 -7
  21. data/lib/govuk_publishing_components/version.rb +1 -1
  22. data/node_modules/choices.js/README.md +140 -30
  23. data/node_modules/choices.js/package.json +10 -13
  24. data/node_modules/choices.js/public/assets/scripts/choices.js +144 -89
  25. data/node_modules/choices.js/public/assets/scripts/choices.min.js +2 -2
  26. data/node_modules/choices.js/public/assets/scripts/choices.mjs +144 -89
  27. data/node_modules/choices.js/public/assets/scripts/choices.search-basic.js +144 -86
  28. data/node_modules/choices.js/public/assets/scripts/choices.search-basic.min.js +2 -2
  29. data/node_modules/choices.js/public/assets/scripts/choices.search-basic.mjs +144 -86
  30. data/node_modules/choices.js/public/assets/scripts/choices.search-kmp.js +139 -77
  31. data/node_modules/choices.js/public/assets/scripts/choices.search-kmp.min.js +2 -2
  32. data/node_modules/choices.js/public/assets/scripts/choices.search-kmp.mjs +139 -77
  33. data/node_modules/choices.js/public/assets/scripts/choices.search-prefix.js +137 -76
  34. data/node_modules/choices.js/public/assets/scripts/choices.search-prefix.min.js +2 -2
  35. data/node_modules/choices.js/public/assets/scripts/choices.search-prefix.mjs +137 -76
  36. data/node_modules/choices.js/public/assets/styles/base.css +39 -9
  37. data/node_modules/choices.js/public/assets/styles/base.css.map +1 -1
  38. data/node_modules/choices.js/public/assets/styles/base.min.css +1 -1
  39. data/node_modules/choices.js/public/assets/styles/choices.css +93 -95
  40. data/node_modules/choices.js/public/assets/styles/choices.css.map +1 -1
  41. data/node_modules/choices.js/public/assets/styles/choices.min.css +1 -1
  42. data/node_modules/choices.js/public/types/src/scripts/choices.d.ts +11 -0
  43. data/node_modules/choices.js/public/types/src/scripts/components/container.d.ts +2 -0
  44. data/node_modules/choices.js/public/types/src/scripts/interfaces/choice-full.d.ts +2 -1
  45. data/node_modules/choices.js/public/types/src/scripts/interfaces/class-names.d.ts +2 -0
  46. data/node_modules/choices.js/public/types/src/scripts/interfaces/input-choice.d.ts +2 -1
  47. data/node_modules/choices.js/public/types/src/scripts/interfaces/options.d.ts +19 -3
  48. data/node_modules/choices.js/public/types/src/scripts/interfaces/store.d.ts +2 -1
  49. data/node_modules/choices.js/public/types/src/scripts/interfaces/types.d.ts +2 -1
  50. data/node_modules/choices.js/public/types/src/scripts/lib/utils.d.ts +3 -1
  51. data/node_modules/choices.js/src/scripts/choices.ts +110 -64
  52. data/node_modules/choices.js/src/scripts/components/container.ts +8 -0
  53. data/node_modules/choices.js/src/scripts/components/wrapped-select.ts +3 -1
  54. data/node_modules/choices.js/src/scripts/defaults.ts +12 -7
  55. data/node_modules/choices.js/src/scripts/interfaces/choice-full.ts +2 -1
  56. data/node_modules/choices.js/src/scripts/interfaces/class-names.ts +2 -0
  57. data/node_modules/choices.js/src/scripts/interfaces/event-choice.ts +1 -0
  58. data/node_modules/choices.js/src/scripts/interfaces/input-choice.ts +4 -2
  59. data/node_modules/choices.js/src/scripts/interfaces/options.ts +21 -3
  60. data/node_modules/choices.js/src/scripts/interfaces/store.ts +2 -1
  61. data/node_modules/choices.js/src/scripts/interfaces/types.ts +3 -1
  62. data/node_modules/choices.js/src/scripts/lib/utils.ts +27 -4
  63. data/node_modules/choices.js/src/scripts/search/kmp.ts +2 -1
  64. data/node_modules/choices.js/src/scripts/store/store.ts +4 -1
  65. data/node_modules/choices.js/src/scripts/templates.ts +6 -3
  66. data/node_modules/choices.js/src/styles/base.scss +42 -9
  67. data/node_modules/choices.js/src/styles/choices.scss +119 -93
  68. metadata +2 -3
  69. data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_contents-list-helper.scss +0 -24
@@ -4,8 +4,8 @@
4
4
  .choices {
5
5
  position: relative;
6
6
  overflow: hidden;
7
- margin-bottom: 24px;
8
- font-size: 16px;
7
+ margin-bottom: var(--choices-guttering, 24px);
8
+ font-size: var(--choices-font-size-lg, 16px);
9
9
  }
10
10
  .choices:focus {
11
11
  outline: none;
@@ -16,36 +16,39 @@
16
16
  .choices.is-open {
17
17
  overflow: visible;
18
18
  }
19
- .choices.is-disabled .choices__inner,
20
- .choices.is-disabled .choices__input {
21
- background-color: #eaeaea;
22
- cursor: not-allowed;
19
+ .choices.is-disabled :is(.choices__inner, .choices__input) {
20
+ background-color: var(--choices-bg-color-disabled, #eaeaea);
21
+ cursor: not-allowed !important;
23
22
  -webkit-user-select: none;
24
23
  user-select: none;
25
24
  }
26
25
  .choices.is-disabled .choices__item {
27
26
  cursor: not-allowed;
27
+ color: var(--choices-item-disabled-color, #fff);
28
28
  }
29
29
  .choices [hidden] {
30
- display: none !important;
30
+ position: absolute;
31
+ inset: 0;
32
+ pointer-events: none;
33
+ opacity: 0;
31
34
  }
32
35
 
33
36
  .choices[data-type*=select-one] {
34
37
  cursor: pointer;
35
38
  }
36
39
  .choices[data-type*=select-one] .choices__inner {
37
- padding-bottom: 7.5px;
40
+ padding-bottom: var(--choices-inner-one-padding, 7.5px);
38
41
  }
39
42
  .choices[data-type*=select-one] .choices__input {
40
43
  display: block;
41
- width: 100%;
42
- padding: 10px;
43
- border-bottom: 1px solid #ddd;
44
- background-color: #fff;
44
+ width: var(--choices-width, 100%);
45
+ padding: var(--choices-dropdown-item-padding, 10px);
46
+ border-bottom: var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);
47
+ background-color: var(--choices-bg-color-dropdown, #fff);
45
48
  margin: 0;
46
49
  }
47
50
  .choices[data-type*=select-one] .choices__button {
48
- background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
51
+ background-image: var(--choices-icon-cross-inverse, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="));
49
52
  padding: 0;
50
53
  background-size: 8px;
51
54
  position: absolute;
@@ -58,11 +61,11 @@
58
61
  border-radius: 10em;
59
62
  opacity: 0.25;
60
63
  }
61
- .choices[data-type*=select-one] .choices__button:hover, .choices[data-type*=select-one] .choices__button:focus {
62
- opacity: 1;
64
+ .choices[data-type*=select-one] .choices__button:is(:hover, :focus) {
65
+ opacity: var(--choices-button-opacity-hover, 1);
63
66
  }
64
67
  .choices[data-type*=select-one] .choices__button:focus {
65
- box-shadow: 0 0 0 2px #005F75;
68
+ box-shadow: 0 0 0 2px var(--choices-highlight-color, #005F75);
66
69
  }
67
70
  .choices[data-type*=select-one] .choices__item[data-placeholder] .choices__button {
68
71
  display: none;
@@ -72,17 +75,17 @@
72
75
  height: 0;
73
76
  width: 0;
74
77
  border-style: solid;
75
- border-color: #333 transparent transparent transparent;
76
- border-width: 5px;
78
+ border-color: var(--choices-text-color, #333) transparent transparent transparent;
79
+ border-width: var(--choices-arrow-size, 5px);
77
80
  position: absolute;
78
- right: 11.5px;
81
+ right: var(--choices-arrow-right, 11.5px);
79
82
  top: 50%;
80
- margin-top: -2.5px;
83
+ margin-top: var(--choices-arrow-margin-top, -2.5px);
81
84
  pointer-events: none;
82
85
  }
83
86
  .choices[data-type*=select-one].is-open::after {
84
- border-color: transparent transparent #333;
85
- margin-top: -7.5px;
87
+ border-color: transparent transparent var(--choices-text-color, #333);
88
+ margin-top: var(--choices-arrow-margin-top-open, -7.5px);
86
89
  }
87
90
  .choices[data-type*=select-one][dir=rtl]::after {
88
91
  left: 11.5px;
@@ -95,53 +98,49 @@
95
98
  margin-right: 0;
96
99
  }
97
100
 
98
- .choices[data-type*=select-multiple] .choices__inner,
99
- .choices[data-type*=text] .choices__inner {
101
+ .choices:is([data-type*=select-multiple], [data-type*=text]) .choices__inner {
100
102
  cursor: text;
101
103
  }
102
- .choices[data-type*=select-multiple] .choices__button,
103
- .choices[data-type*=text] .choices__button {
104
+ .choices:is([data-type*=select-multiple], [data-type*=text]) .choices__button {
104
105
  position: relative;
105
106
  display: inline-block;
106
- margin-top: 0;
107
- margin-right: -4px;
108
- margin-bottom: 0;
109
- margin-left: 8px;
110
- padding-left: 16px;
111
- border-left: 1px solid #003642;
112
- background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
113
- background-size: 8px;
114
- width: 8px;
115
- line-height: 1;
116
- opacity: 0.75;
117
- border-radius: 0;
118
- }
119
- .choices[data-type*=select-multiple] .choices__button:hover, .choices[data-type*=select-multiple] .choices__button:focus,
120
- .choices[data-type*=text] .choices__button:hover,
121
- .choices[data-type*=text] .choices__button:focus {
122
- opacity: 1;
107
+ margin: 0 calc(var(--choices-button-offset, 8px) * -0.5) 0 var(--choices-button-offset, 8px);
108
+ padding-left: calc(var(--choices-button-offset, 8px) * 2);
109
+ border-left: 1px solid color-mix(in srgb, var(--choices-primary-color, #005F75) 90%, var(--choices-darken, black));
110
+ background-image: var(--choices-icon-cross, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="));
111
+ background-size: var(--choices-button-dimension, 8px);
112
+ width: var(--choices-button-dimension, 8px);
113
+ line-height: var(--choices-button-line-height, 1);
114
+ border-radius: var(--choices-button-border-radius, 0);
115
+ opacity: var(--choices-button-opacity, 0.75);
116
+ }
117
+ .choices:is([data-type*=select-multiple], [data-type*=text]) .choices__button:is(:hover, :focus) {
118
+ --choices-button-opacity: var(--choices-button-opacity-hover, 1);
123
119
  }
124
120
 
125
121
  .choices__inner {
126
122
  display: inline-block;
127
123
  vertical-align: top;
128
- width: 100%;
129
- background-color: #f9f9f9;
130
- padding: 7.5px 7.5px 3.75px;
131
- border: 1px solid #ddd;
132
- border-radius: 2.5px;
133
- font-size: 14px;
134
- min-height: 44px;
124
+ width: var(--choices-width, 100%);
125
+ background-color: var(--choices-bg-color, #f9f9f9);
126
+ padding: var(--choices-inner-padding, 7.5px 7.5px 3.75px);
127
+ border: var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);
128
+ border-radius: var(--choices-border-radius, 2.5px);
129
+ font-size: var(--choices-font-size-md, 14px);
130
+ min-height: var(--choices-input-height, 44px);
135
131
  overflow: hidden;
136
132
  }
137
133
  .is-focused .choices__inner, .is-open .choices__inner {
138
- border-color: #b7b7b7;
134
+ border-color: color-mix(in srgb, var(--choices-keyline-color, #ddd) 85%, var(--choices-darken, black));
139
135
  }
140
136
  .is-open .choices__inner {
141
- border-radius: 2.5px 2.5px 0 0;
137
+ border-radius: var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px) 0 0;
138
+ }
139
+ .is-invalid .choices__inner {
140
+ border-color: var(--choices-invalid-color, #d33141);
142
141
  }
143
142
  .is-flipped.is-open .choices__inner {
144
- border-radius: 0 0 2.5px 2.5px;
143
+ border-radius: 0 0 var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px);
145
144
  }
146
145
 
147
146
  .choices__list {
@@ -151,15 +150,15 @@
151
150
  }
152
151
  .choices__list--single {
153
152
  display: inline-block;
154
- padding: 4px 16px 4px 4px;
155
- width: 100%;
153
+ padding: var(--choices-list-single-padding, 4px 16px 4px 4px);
154
+ width: var(--choices-width, 100%);
156
155
  }
157
156
  [dir=rtl] .choices__list--single {
158
157
  padding-right: 4px;
159
158
  padding-left: 16px;
160
159
  }
161
160
  .choices__list--single .choices__item {
162
- width: 100%;
161
+ width: var(--choices-width, 100%);
163
162
  }
164
163
 
165
164
  .choices__list--multiple {
@@ -168,15 +167,15 @@
168
167
  .choices__list--multiple .choices__item {
169
168
  display: inline-block;
170
169
  vertical-align: middle;
171
- border-radius: 20px;
172
- padding: 4px 10px;
173
- font-size: 12px;
170
+ border-radius: var(--choices-border-radius-item, 20px);
171
+ padding: var(--choices-multiple-item-padding, 4px 10px);
172
+ font-size: var(--choices-font-size-sm, 12px);
174
173
  font-weight: 500;
175
- margin-right: 3.75px;
176
- margin-bottom: 3.75px;
177
- background-color: #005F75;
178
- border: 1px solid #004a5c;
179
- color: #fff;
174
+ margin-right: var(--choices-multiple-item-margin, 3.75px);
175
+ margin-bottom: var(--choices-multiple-item-margin, 3.75px);
176
+ background-color: var(--choices-primary-color, #005F75);
177
+ border: 1px solid color-mix(in srgb, var(--choices-primary-color, #005F75) 95%, var(--choices-darken, black));
178
+ color: var(--choices-item-color, #fff);
180
179
  word-break: break-all;
181
180
  box-sizing: border-box;
182
181
  }
@@ -185,28 +184,28 @@
185
184
  }
186
185
  [dir=rtl] .choices__list--multiple .choices__item {
187
186
  margin-right: 0;
188
- margin-left: 3.75px;
187
+ margin-left: var(--choices-multiple-item-margin, 3.75px);
189
188
  }
190
189
  .choices__list--multiple .choices__item.is-highlighted {
191
- background-color: #004a5c;
192
- border: 1px solid #003642;
190
+ background-color: color-mix(in srgb, var(--choices-primary-color, #005F75) 95%, var(--choices-darken, black));
191
+ border: 1px solid color-mix(in srgb, var(--choices-primary-color, #005F75) 90%, var(--choices-darken, black));
193
192
  }
194
193
  .is-disabled .choices__list--multiple .choices__item {
195
- background-color: #aaaaaa;
196
- border: 1px solid #919191;
194
+ background-color: color-mix(in srgb, var(--choices-disabled-color, #eaeaea) 75%, var(--choices-darken, black));
195
+ border: 1px solid color-mix(in srgb, var(--choices-disabled-color, #eaeaea) 65%, var(--choices-darken, black));
197
196
  }
198
197
 
199
198
  .choices__list--dropdown, .choices__list[aria-expanded] {
200
199
  display: none;
201
- z-index: 1;
200
+ z-index: var(--choices-z-index, 1);
202
201
  position: absolute;
203
- width: 100%;
204
- background-color: #fff;
205
- border: 1px solid #ddd;
202
+ width: var(--choices-width, 100%);
203
+ background-color: var(--choices-bg-color-dropdown, #fff);
204
+ border: var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);
206
205
  top: 100%;
207
206
  margin-top: -1px;
208
- border-bottom-left-radius: 2.5px;
209
- border-bottom-right-radius: 2.5px;
207
+ border-bottom-left-radius: var(--choices-border-radius, 2.5px);
208
+ border-bottom-right-radius: var(--choices-border-radius, 2.5px);
210
209
  overflow: hidden;
211
210
  word-break: break-all;
212
211
  }
@@ -214,7 +213,7 @@
214
213
  display: block;
215
214
  }
216
215
  .is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
217
- border-color: #b7b7b7;
216
+ border-color: color-mix(in srgb, var(--choices-keyline-color, #ddd) 85%, var(--choices-darken, black));
218
217
  }
219
218
  .is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] {
220
219
  top: auto;
@@ -232,40 +231,39 @@
232
231
  }
233
232
  .choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item {
234
233
  position: relative;
235
- padding: 10px;
236
- font-size: 14px;
234
+ padding: var(--choices-dropdown-item-padding, 10px);
235
+ font-size: var(--choices-font-size-md, 14px);
237
236
  }
238
237
  [dir=rtl] .choices__list--dropdown .choices__item, [dir=rtl] .choices__list[aria-expanded] .choices__item {
239
238
  text-align: right;
240
239
  }
241
240
  @media (min-width: 640px) {
242
- .choices__list--dropdown .choices__item--selectable[data-select-text], .choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
241
+ .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text], .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text] {
243
242
  padding-right: 100px;
244
243
  }
245
- .choices__list--dropdown .choices__item--selectable[data-select-text]::after, .choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after {
244
+ .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text]::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text]::after {
246
245
  content: attr(data-select-text);
247
- font-size: 12px;
248
- opacity: 0;
246
+ font-size: var(--choices-font-size-sm, 12px);
249
247
  position: absolute;
250
248
  right: 10px;
251
249
  top: 50%;
252
250
  transform: translateY(-50%);
253
251
  }
254
- [dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text], [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
252
+ [dir=rtl] .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text], [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text] {
255
253
  text-align: right;
256
254
  padding-left: 100px;
257
255
  padding-right: 10px;
258
256
  }
259
- [dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text]::after, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after {
257
+ [dir=rtl] .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text]::after, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text]::after {
260
258
  right: auto;
261
259
  left: 10px;
262
260
  }
263
261
  }
264
- .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
265
- background-color: #f2f2f2;
262
+ .choices__list--dropdown .choices__item--selectable.is-selected::after, .choices__list[aria-expanded] .choices__item--selectable.is-selected::after {
263
+ content: none !important;
266
264
  }
267
- .choices__list--dropdown .choices__item--selectable.is-highlighted::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
268
- opacity: 0.5;
265
+ .choices__list--dropdown .choices__item--selectable.is-selected, .choices__list[aria-expanded] .choices__item--selectable.is-selected, .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
266
+ background-color: var(--choices-highlighted-color, #f2f2f2);
269
267
  }
270
268
 
271
269
  .choices__item {
@@ -287,7 +285,7 @@
287
285
  font-weight: 600;
288
286
  font-size: 12px;
289
287
  padding: 10px;
290
- border-bottom: 1px solid #f7f7f7;
288
+ border-bottom: 1px solid color-mix(in srgb, var(--choices-keyline-color, #ddd) 90%, var(--choices-lighten, white));
291
289
  color: gray;
292
290
  }
293
291
 
@@ -307,13 +305,13 @@
307
305
  .choices__input {
308
306
  display: inline-block;
309
307
  vertical-align: baseline;
310
- background-color: #f9f9f9;
311
- font-size: 14px;
312
- margin-bottom: 5px;
308
+ background-color: var(--choices-bg-color, #f9f9f9);
309
+ font-size: var(--choices-font-size-md, 14px);
310
+ margin-bottom: var(--choices-input-margin-bottom, 5px);
313
311
  border: 0;
314
312
  border-radius: 0;
315
- max-width: 100%;
316
- padding: 4px 0 4px 2px;
313
+ max-width: var(--choices-width, 100%);
314
+ padding: var(--choices-input-padding, 4px 0 4px 2px);
317
315
  }
318
316
  .choices__input:focus {
319
317
  outline: 0;
@@ -332,7 +330,7 @@
332
330
  }
333
331
 
334
332
  .choices__placeholder {
335
- opacity: 0.5;
333
+ opacity: var(--choices-placeholder-opacity, 0.5);
336
334
  }
337
335
 
338
336
  /* ===== End of Choices ====== */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/styles/choices.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AA2BA;EACE;EACA;EACA,eApBkB;EAqBlB,WAxBqB;;AA0BrB;EACE;;AAGF;EACE;;AAGF;EACE;;AAIA;AAAA;EAEE,kBAlCsB;EAmCtB;EACA;;AAEF;EACE;;AAIJ;EACE;;;AAIJ;EACE;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE,kBApDyB;EAqDzB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAGJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;;AAOJ;AAAA;EACE;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA,aA5HoB;EA6HpB;EACA;EACA,kBA9HiB;EA+HjB,iBAjIuB;EAkIvB,OAlIuB;EAmIvB;EACA;EACA;;AAEA;AAAA;AAAA;EAEE;;;AAKN;EACE;EACA;EACA;EACA,kBA1JiB;EA2JjB;EACA;EACA,eA/JsB;EAgKtB,WAnKqB;EAoKrB;EACA;;AAEA;EAEE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;AAOF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;;AAIJ;EACE;;AACA;EACE;EACA;EACA,eA9MyB;EA+MzB;EACA,WAnNmB;EAoNnB;EACA;EACA;EACA,kBA9MoB;EA+MpB;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA,SApOgB;EAqOhB;EACA;EACA,kBAjP0B;EAkP1B;EACA;EACA;EACA,2BAzPsB;EA0PtB,4BA1PsB;EA2PtB;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA,WA1RmB;;AA4RnB;EACE;;AAKA;EADF;IAEI;;EAEA;IACE;IACA,WAtSa;IAuSb;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAEA;IACE;IACA;;;AAMR;EACE;;AAEA;EACE;;;AAUR;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA,WAzVqB;EA0VrB;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA,kBA5WiB;EA6WjB,WAlXqB;EAmXrB;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAIE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF","file":"choices.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/styles/choices.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAiDA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;;AAMJ;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;AAOF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;;AAIJ;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EACE;;AAKA;EADF;IAEI;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAEA;IACE;IACA;;;AAQN;EACE;;AAIJ;EAEE;;;AASN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA,WArXqB;EAsXrB;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAIE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF","file":"choices.css"}
@@ -1 +1 @@
1
- .choices{position:relative;overflow:hidden;margin-bottom:24px;font-size:16px}.choices:focus{outline:0}.choices:last-child{margin-bottom:0}.choices.is-open{overflow:visible}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;-webkit-user-select:none;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices [hidden]{display:none!important}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__inner{padding-bottom:7.5px}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:10px;border-bottom:1px solid #ddd;background-color:#fff;margin:0}.choices[data-type*=select-one] .choices__button{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);padding:0;background-size:8px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:25px;height:20px;width:20px;border-radius:10em;opacity:.25}.choices[data-type*=select-one] .choices__button:focus,.choices[data-type*=select-one] .choices__button:hover{opacity:1}.choices[data-type*=select-one] .choices__button:focus{box-shadow:0 0 0 2px #005f75}.choices[data-type*=select-one] .choices__item[data-placeholder] .choices__button{display:none}.choices[data-type*=select-one]::after{content:"";height:0;width:0;border-style:solid;border-color:#333 transparent transparent;border-width:5px;position:absolute;right:11.5px;top:50%;margin-top:-2.5px;pointer-events:none}.choices[data-type*=select-one].is-open::after{border-color:transparent transparent #333;margin-top:-7.5px}.choices[data-type*=select-one][dir=rtl]::after{left:11.5px;right:auto}.choices[data-type*=select-one][dir=rtl] .choices__button{right:auto;left:0;margin-left:25px;margin-right:0}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text}.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button{position:relative;display:inline-block;margin:0-4px 0 8px;padding-left:16px;border-left:1px solid #003642;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);background-size:8px;width:8px;line-height:1;opacity:.75;border-radius:0}.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=text] .choices__button:focus,.choices[data-type*=text] .choices__button:hover{opacity:1}.choices__inner{display:inline-block;vertical-align:top;width:100%;background-color:#f9f9f9;padding:7.5px 7.5px 3.75px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;min-height:44px;overflow:hidden}.is-focused .choices__inner,.is-open .choices__inner{border-color:#b7b7b7}.is-open .choices__inner{border-radius:2.5px 2.5px 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 2.5px 2.5px}.choices__list{margin:0;padding-left:0;list-style:none}.choices__list--single{display:inline-block;padding:4px 16px 4px 4px;width:100%}[dir=rtl] .choices__list--single{padding-right:4px;padding-left:16px}.choices__list--single .choices__item{width:100%}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:500;margin-right:3.75px;margin-bottom:3.75px;background-color:#005f75;border:1px solid #004a5c;color:#fff;word-break:break-all;box-sizing:border-box}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}[dir=rtl] .choices__list--multiple .choices__item{margin-right:0;margin-left:3.75px}.choices__list--multiple .choices__item.is-highlighted{background-color:#004a5c;border:1px solid #003642}.is-disabled .choices__list--multiple .choices__item{background-color:#aaa;border:1px solid #919191}.choices__list--dropdown,.choices__list[aria-expanded]{display:none;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;border-bottom-left-radius:2.5px;border-bottom-right-radius:2.5px;overflow:hidden;word-break:break-all}.is-active.choices__list--dropdown,.is-active.choices__list[aria-expanded]{display:block}.is-open .choices__list--dropdown,.is-open .choices__list[aria-expanded]{border-color:#b7b7b7}.is-flipped .choices__list--dropdown,.is-flipped .choices__list[aria-expanded]{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.choices__list--dropdown .choices__list,.choices__list[aria-expanded] .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item{position:relative;padding:10px;font-size:14px}[dir=rtl] .choices__list--dropdown .choices__item,[dir=rtl] .choices__list[aria-expanded] .choices__item{text-align:right}@media (min-width:640px){.choices__list--dropdown .choices__item--selectable[data-select-text],.choices__list[aria-expanded] .choices__item--selectable[data-select-text]{padding-right:100px}.choices__list--dropdown .choices__item--selectable[data-select-text]::after,.choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after{content:attr(data-select-text);font-size:12px;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%)}[dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text],[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text]{text-align:right;padding-left:100px;padding-right:10px}[dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text]::after,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after{right:auto;left:10px}}.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown .choices__item--selectable.is-highlighted::after,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after{opacity:.5}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;user-select:none;opacity:.5}.choices__heading{font-weight:600;font-size:12px;padding:10px;border-bottom:1px solid #f7f7f7;color:gray}.choices__button{text-indent:-9999px;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.choices__button:focus,.choices__input:focus{outline:0}.choices__input{display:inline-block;vertical-align:baseline;background-color:#f9f9f9;font-size:14px;margin-bottom:5px;border:0;border-radius:0;max-width:100%;padding:4px 0 4px 2px}.choices__input::-webkit-search-cancel-button,.choices__input::-webkit-search-decoration,.choices__input::-webkit-search-results-button,.choices__input::-webkit-search-results-decoration{display:none}.choices__input::-ms-clear,.choices__input::-ms-reveal{display:none;width:0;height:0}[dir=rtl] .choices__input{padding-right:2px;padding-left:0}.choices__placeholder{opacity:.5}
1
+ .choices{position:relative;overflow:hidden;margin-bottom:var(--choices-guttering, 24px);font-size:var(--choices-font-size-lg, 16px)}.choices:focus{outline:0}.choices:last-child{margin-bottom:0}.choices.is-open{overflow:visible}.choices.is-disabled :is(.choices__inner,.choices__input){background-color:var(--choices-bg-color-disabled, #eaeaea);cursor:not-allowed!important;-webkit-user-select:none;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed;color:var(--choices-item-disabled-color, #fff)}.choices [hidden]{position:absolute;inset:0;pointer-events:none;opacity:0}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__inner{padding-bottom:var(--choices-inner-one-padding, 7.5px)}.choices[data-type*=select-one] .choices__input{display:block;width:var(--choices-width, 100%);padding:var(--choices-dropdown-item-padding, 10px);border-bottom:var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);background-color:var(--choices-bg-color-dropdown, #fff);margin:0}.choices[data-type*=select-one] .choices__button{background-image:var(--choices-icon-cross-inverse, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="));padding:0;background-size:8px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:25px;height:20px;width:20px;border-radius:10em;opacity:.25}.choices[data-type*=select-one] .choices__button:is(:hover,:focus){opacity:var(--choices-button-opacity-hover, 1)}.choices[data-type*=select-one] .choices__button:focus{box-shadow:0 0 0 2px var(--choices-highlight-color, #005F75)}.choices[data-type*=select-one] .choices__item[data-placeholder] .choices__button{display:none}.choices[data-type*=select-one]::after{content:"";height:0;width:0;border-style:solid;border-color:var(--choices-text-color, #333) transparent transparent transparent;border-width:var(--choices-arrow-size, 5px);position:absolute;right:var(--choices-arrow-right, 11.5px);top:50%;margin-top:var(--choices-arrow-margin-top, -2.5px);pointer-events:none}.choices[data-type*=select-one].is-open::after{border-color:transparent transparent var(--choices-text-color, #333);margin-top:var(--choices-arrow-margin-top-open, -7.5px)}.choices[data-type*=select-one][dir=rtl]::after{left:11.5px;right:auto}.choices[data-type*=select-one][dir=rtl] .choices__button{right:auto;left:0;margin-left:25px;margin-right:0}.choices:is([data-type*=select-multiple],[data-type*=text]) .choices__inner{cursor:text}.choices:is([data-type*=select-multiple],[data-type*=text]) .choices__button{position:relative;display:inline-block;margin:0 calc(var(--choices-button-offset, 8px)*-.5)0 var(--choices-button-offset, 8px);padding-left:calc(var(--choices-button-offset, 8px)*2);border-left:1px solid color-mix(in srgb,var(--choices-primary-color, #005F75) 90%,var(--choices-darken, black));background-image:var(--choices-icon-cross, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="));background-size:var(--choices-button-dimension, 8px);width:var(--choices-button-dimension, 8px);line-height:var(--choices-button-line-height, 1);border-radius:var(--choices-button-border-radius, 0);opacity:var(--choices-button-opacity, 0.75)}.choices:is([data-type*=select-multiple],[data-type*=text]) .choices__button:is(:hover,:focus){--choices-button-opacity:var(--choices-button-opacity-hover, 1)}.choices__inner{display:inline-block;vertical-align:top;width:var(--choices-width, 100%);background-color:var(--choices-bg-color, #f9f9f9);padding:var(--choices-inner-padding, 7.5px 7.5px 3.75px);border:var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);border-radius:var(--choices-border-radius, 2.5px);font-size:var(--choices-font-size-md, 14px);min-height:var(--choices-input-height, 44px);overflow:hidden}.is-focused .choices__inner,.is-open .choices__inner{border-color:color-mix(in srgb,var(--choices-keyline-color, #ddd) 85%,var(--choices-darken, black))}.is-open .choices__inner{border-radius:var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px)0 0}.is-invalid .choices__inner{border-color:var(--choices-invalid-color, #d33141)}.is-flipped.is-open .choices__inner{border-radius:0 0 var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px)}.choices__list{margin:0;padding-left:0;list-style:none}.choices__list--single{display:inline-block;padding:var(--choices-list-single-padding, 4px 16px 4px 4px)}[dir=rtl] .choices__list--single{padding-right:4px;padding-left:16px}.choices__list--single,.choices__list--single .choices__item{width:var(--choices-width, 100%)}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:var(--choices-border-radius-item, 20px);padding:var(--choices-multiple-item-padding, 4px 10px);font-size:var(--choices-font-size-sm, 12px);font-weight:500;margin-right:var(--choices-multiple-item-margin, 3.75px);margin-bottom:var(--choices-multiple-item-margin, 3.75px);background-color:var(--choices-primary-color, #005F75);border:1px solid color-mix(in srgb,var(--choices-primary-color, #005F75) 95%,var(--choices-darken, black));color:var(--choices-item-color, #fff);word-break:break-all;box-sizing:border-box}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}[dir=rtl] .choices__list--multiple .choices__item{margin-right:0;margin-left:var(--choices-multiple-item-margin, 3.75px)}.choices__list--multiple .choices__item.is-highlighted{background-color:color-mix(in srgb,var(--choices-primary-color, #005F75) 95%,var(--choices-darken, black));border:1px solid color-mix(in srgb,var(--choices-primary-color, #005F75) 90%,var(--choices-darken, black))}.is-disabled .choices__list--multiple .choices__item{background-color:color-mix(in srgb,var(--choices-disabled-color, #eaeaea) 75%,var(--choices-darken, black));border:1px solid color-mix(in srgb,var(--choices-disabled-color, #eaeaea) 65%,var(--choices-darken, black))}.choices__list--dropdown,.choices__list[aria-expanded]{display:none;z-index:var(--choices-z-index, 1);position:absolute;width:var(--choices-width, 100%);background-color:var(--choices-bg-color-dropdown, #fff);border:var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);top:100%;margin-top:-1px;border-bottom-left-radius:var(--choices-border-radius, 2.5px);border-bottom-right-radius:var(--choices-border-radius, 2.5px);overflow:hidden;word-break:break-all}.is-active.choices__list--dropdown,.is-active.choices__list[aria-expanded]{display:block}.is-open .choices__list--dropdown,.is-open .choices__list[aria-expanded]{border-color:color-mix(in srgb,var(--choices-keyline-color, #ddd) 85%,var(--choices-darken, black))}.is-flipped .choices__list--dropdown,.is-flipped .choices__list[aria-expanded]{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.choices__list--dropdown .choices__list,.choices__list[aria-expanded] .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item{position:relative;padding:var(--choices-dropdown-item-padding, 10px);font-size:var(--choices-font-size-md, 14px)}[dir=rtl] .choices__list--dropdown .choices__item,[dir=rtl] .choices__list[aria-expanded] .choices__item{text-align:right}@media (min-width:640px){.choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text],.choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text]{padding-right:100px}.choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text]::after,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text]::after{content:attr(data-select-text);font-size:var(--choices-font-size-sm, 12px);position:absolute;right:10px;top:50%;transform:translateY(-50%)}[dir=rtl] .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text],[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text]{text-align:right;padding-left:100px;padding-right:10px}[dir=rtl] .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text]::after,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text]::after{right:auto;left:10px}}.choices__list--dropdown .choices__item--selectable.is-selected::after,.choices__list[aria-expanded] .choices__item--selectable.is-selected::after{content:none!important}.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list--dropdown .choices__item--selectable.is-selected,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-selected{background-color:var(--choices-highlighted-color, #f2f2f2)}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;user-select:none;opacity:.5}.choices__heading{font-weight:600;font-size:12px;padding:10px;border-bottom:1px solid color-mix(in srgb,var(--choices-keyline-color, #ddd) 90%,var(--choices-lighten, white));color:gray}.choices__button{text-indent:-9999px;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.choices__button:focus,.choices__input:focus{outline:0}.choices__input{display:inline-block;vertical-align:baseline;background-color:var(--choices-bg-color, #f9f9f9);font-size:var(--choices-font-size-md, 14px);margin-bottom:var(--choices-input-margin-bottom, 5px);border:0;border-radius:0;max-width:var(--choices-width, 100%);padding:var(--choices-input-padding, 4px 0 4px 2px)}.choices__input::-webkit-search-cancel-button,.choices__input::-webkit-search-decoration,.choices__input::-webkit-search-results-button,.choices__input::-webkit-search-results-decoration{display:none}.choices__input::-ms-clear,.choices__input::-ms-reveal{display:none;width:0;height:0}[dir=rtl] .choices__input{padding-right:2px;padding-left:0}.choices__placeholder{opacity:var(--choices-placeholder-opacity, 0.5)}
@@ -155,6 +155,9 @@ declare class Choices {
155
155
  _displayNotice(text: string, type: NoticeType, openDropdown?: boolean): void;
156
156
  _clearNotice(): void;
157
157
  _renderNotice(fragment?: DocumentFragment): void;
158
+ /**
159
+ * @deprecated Use utils.getChoiceForOutput
160
+ */
158
161
  _getChoiceForOutput(choice: ChoiceFull, keyCode?: number): EventChoice;
159
162
  _triggerChange(value: any): void;
160
163
  _handleButtonAction(element: HTMLElement): void;
@@ -193,6 +196,14 @@ declare class Choices {
193
196
  _onFocus({ target }: Pick<FocusEvent, 'target'>): void;
194
197
  _onBlur({ target }: Pick<FocusEvent, 'target'>): void;
195
198
  _onFormReset(): void;
199
+ _onChange(event: Event & {
200
+ target: HTMLInputElement | HTMLSelectElement;
201
+ }): void;
202
+ _onInvalid(): void;
203
+ /**
204
+ * Removes any highlighted choice options
205
+ */
206
+ _removeHighlightedChoices(): void;
196
207
  _highlightChoice(el?: HTMLElement | null): void;
197
208
  _addItem(item: ChoiceFull, withEvents?: boolean, userTriggered?: boolean): void;
198
209
  _removeItem(item: ChoiceFull): void;
@@ -27,6 +27,8 @@ export default class Container {
27
27
  close(): void;
28
28
  addFocusState(): void;
29
29
  removeFocusState(): void;
30
+ addInvalidState(): void;
31
+ removeInvalidState(): void;
30
32
  enable(): void;
31
33
  disable(): void;
32
34
  wrap(element: HTMLElement): void;
@@ -1,4 +1,5 @@
1
1
  import { StringUntrusted } from './string-untrusted';
2
+ import { StringPreEscaped } from './string-pre-escaped';
2
3
  import { Types } from './types';
3
4
  import { GroupFull } from './group-full';
4
5
  export interface ChoiceFull {
@@ -8,7 +9,7 @@ export interface ChoiceFull {
8
9
  itemEl?: HTMLElement;
9
10
  choiceEl?: HTMLElement;
10
11
  labelClass?: Array<string>;
11
- labelDescription?: string;
12
+ labelDescription?: StringPreEscaped | StringUntrusted | string;
12
13
  customProperties?: Types.CustomProperties;
13
14
  disabled: boolean;
14
15
  active: boolean;
@@ -50,6 +50,8 @@ export interface ClassNames {
50
50
  flippedState: string | Array<string>;
51
51
  /** @default ['is-loading'] */
52
52
  loadingState: string | Array<string>;
53
+ /** @default ['is-invalid'] */
54
+ invalidState: string | Array<string>;
53
55
  /** @default ['choices__notice'] */
54
56
  notice: string | Array<string>;
55
57
  /** @default ['choices__item--selectable', 'add-choice'] */
@@ -1,10 +1,11 @@
1
1
  import { StringUntrusted } from './string-untrusted';
2
+ import { StringPreEscaped } from './string-pre-escaped';
2
3
  import { Types } from './types';
3
4
  export interface InputChoice {
4
5
  id?: number;
5
6
  highlighted?: boolean;
6
7
  labelClass?: string | Array<string>;
7
- labelDescription?: string;
8
+ labelDescription?: StringPreEscaped | StringUntrusted | string;
8
9
  customProperties?: Types.CustomProperties;
9
10
  disabled?: boolean;
10
11
  active?: boolean;
@@ -186,7 +186,7 @@ export interface Options {
186
186
  *
187
187
  * @default
188
188
  * ```
189
- * (value, valueRaw) => `Remove item`;
189
+ * (value, valueRaw, item) => `Remove item`;
190
190
  * ```
191
191
  */
192
192
  removeItemIconText: string | Types.NoticeStringFunction;
@@ -200,7 +200,7 @@ export interface Options {
200
200
  *
201
201
  * @default
202
202
  * ```
203
- * (value, valueRaw) => `Remove item: ${value}`;
203
+ * (value, valueRaw, item) => `Remove item: ${value}`;
204
204
  * ```
205
205
  */
206
206
  removeItemLabelText: string | Types.NoticeStringFunction;
@@ -296,6 +296,14 @@ export interface Options {
296
296
  * @default true
297
297
  */
298
298
  searchChoices: boolean;
299
+ /**
300
+ * Whether disabled choices should be included in search results. If `true`, disabled choices will appear in search results but still cannot be selected.
301
+ *
302
+ * **Input types affected:** select-one, select-multiple
303
+ *
304
+ * @default false
305
+ */
306
+ searchDisabledChoices: boolean;
299
307
  /**
300
308
  * The minimum length a search value should be before choices are searched.
301
309
  *
@@ -431,6 +439,14 @@ export interface Options {
431
439
  * @default 'auto';
432
440
  */
433
441
  renderSelectedChoices: 'auto' | 'always' | boolean;
442
+ /**
443
+ * Whether selected choices should be removed from the list during search.
444
+ *
445
+ * **Input types affected:** select-multiple
446
+ *
447
+ * @default false;
448
+ */
449
+ searchRenderSelectedChoices: boolean;
434
450
  /**
435
451
  * The text that is shown whilst choices are being populated via AJAX.
436
452
  *
@@ -562,5 +578,5 @@ export interface Options {
562
578
  * @default null
563
579
  */
564
580
  callbackOnCreateTemplates: CallbackOnCreateTemplatesFn | null;
565
- appendGroupInSearch: false;
581
+ appendGroupInSearch: boolean;
566
582
  }
@@ -38,7 +38,8 @@ export interface Store {
38
38
  */
39
39
  get activeChoices(): ChoiceFull[];
40
40
  /**
41
- * Get choices that can be searched (excluding placeholders)
41
+ * Get choices that can be searched (excluding placeholders,
42
+ * optionally excluding disabled based on config)
42
43
  */
43
44
  get searchableChoices(): ChoiceFull[];
44
45
  /**
@@ -1,11 +1,12 @@
1
1
  import { StringUntrusted } from './string-untrusted';
2
2
  import { StringPreEscaped } from './string-pre-escaped';
3
+ import { EventChoice } from './event-choice';
3
4
  export declare namespace Types {
4
5
  type StrToEl = (str: string) => HTMLElement | HTMLInputElement | HTMLOptionElement;
5
6
  type EscapeForTemplateFn = (allowHTML: boolean, s: StringUntrusted | StringPreEscaped | string) => string;
6
7
  type GetClassNamesFn = (s: string | Array<string>) => string;
7
8
  type StringFunction = () => string;
8
- type NoticeStringFunction = (value: string, valueRaw: string) => string;
9
+ type NoticeStringFunction = (value: string, valueRaw: string, item?: EventChoice) => string;
9
10
  type NoticeLimitFunction = (maxItemCount: number) => string;
10
11
  type FilterFunction = (value: string) => boolean;
11
12
  type ValueCompareFunction = (value1: string, value2: string) => boolean;
@@ -3,15 +3,17 @@ import { StringUntrusted } from '../interfaces/string-untrusted';
3
3
  import { StringPreEscaped } from '../interfaces/string-pre-escaped';
4
4
  import { ChoiceFull } from '../interfaces/choice-full';
5
5
  import { Types } from '../interfaces/types';
6
+ import { EventChoice } from '../interfaces';
6
7
  export declare const generateId: (element: HTMLInputElement | HTMLSelectElement, prefix: string) => string;
7
8
  export declare const getAdjacentEl: (startEl: HTMLElement, selector: string, direction?: number) => HTMLElement | null;
8
9
  export declare const isScrolledIntoView: (element: HTMLElement, parent: HTMLElement, direction?: number) => boolean;
9
10
  export declare const sanitise: <T>(value: T | StringUntrusted | StringPreEscaped | string) => T | string;
10
11
  export declare const strToEl: (str: string) => Element;
11
- export declare const resolveNoticeFunction: (fn: Types.NoticeStringFunction | string, value: string) => string;
12
12
  export declare const resolveStringFunction: (fn: Types.StringFunction | string) => string;
13
13
  export declare const unwrapStringForRaw: (s?: StringUntrusted | StringPreEscaped | string) => string;
14
14
  export declare const unwrapStringForEscaped: (s?: StringUntrusted | StringPreEscaped | string) => string;
15
+ export declare const getChoiceForOutput: (choice: ChoiceFull, keyCode?: number) => EventChoice;
16
+ export declare const resolveNoticeFunction: (fn: Types.NoticeStringFunction | string, value: StringUntrusted | StringPreEscaped | string, item?: EventChoice) => string;
15
17
  export declare const escapeForTemplate: (allowHTML: boolean, s: StringUntrusted | StringPreEscaped | string) => string;
16
18
  export declare const setElementHtml: (el: HTMLElement, allowHtml: boolean, html: StringUntrusted | StringPreEscaped | string) => void;
17
19
  export declare const sortByAlpha: ({ value, label }: Types.RecordToCompare, { value: value2, label: label2 }: Types.RecordToCompare) => number;