govuk_publishing_components 58.1.1 → 58.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 (143) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/select-with-search/cross-icon.svg +6 -0
  3. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-search-tracker.js +4 -0
  4. data/app/assets/javascripts/govuk_publishing_components/components/select-with-search.js +57 -0
  5. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +1 -0
  6. data/app/assets/stylesheets/govuk_publishing_components/components/_select-with-search.scss +168 -0
  7. data/app/assets/stylesheets/govuk_publishing_components/components/_select.scss +6 -0
  8. data/app/views/govuk_publishing_components/components/_select.html.erb +22 -23
  9. data/app/views/govuk_publishing_components/components/_select_with_search.html.erb +14 -0
  10. data/app/views/govuk_publishing_components/components/docs/select.yml +11 -0
  11. data/app/views/govuk_publishing_components/components/docs/select_with_search.yml +196 -0
  12. data/lib/govuk_publishing_components/presenters/select_helper.rb +8 -5
  13. data/lib/govuk_publishing_components/presenters/select_with_search_helper.rb +92 -0
  14. data/lib/govuk_publishing_components/version.rb +1 -1
  15. data/lib/govuk_publishing_components.rb +1 -0
  16. data/node_modules/choices.js/LICENSE +21 -0
  17. data/node_modules/choices.js/README.md +1360 -0
  18. data/node_modules/choices.js/package.json +173 -0
  19. data/node_modules/choices.js/public/assets/scripts/choices.js +5230 -0
  20. data/node_modules/choices.js/public/assets/scripts/choices.min.js +2 -0
  21. data/node_modules/choices.js/public/assets/scripts/choices.mjs +5222 -0
  22. data/node_modules/choices.js/public/assets/scripts/choices.search-basic.js +4748 -0
  23. data/node_modules/choices.js/public/assets/scripts/choices.search-basic.min.js +2 -0
  24. data/node_modules/choices.js/public/assets/scripts/choices.search-basic.mjs +4740 -0
  25. data/node_modules/choices.js/public/assets/scripts/choices.search-kmp.js +3631 -0
  26. data/node_modules/choices.js/public/assets/scripts/choices.search-kmp.min.js +2 -0
  27. data/node_modules/choices.js/public/assets/scripts/choices.search-kmp.mjs +3623 -0
  28. data/node_modules/choices.js/public/assets/scripts/choices.search-prefix.js +3590 -0
  29. data/node_modules/choices.js/public/assets/scripts/choices.search-prefix.min.js +2 -0
  30. data/node_modules/choices.js/public/assets/scripts/choices.search-prefix.mjs +3582 -0
  31. data/node_modules/choices.js/public/assets/styles/base.css +180 -0
  32. data/node_modules/choices.js/public/assets/styles/base.css.map +1 -0
  33. data/node_modules/choices.js/public/assets/styles/base.min.css +1 -0
  34. data/node_modules/choices.js/public/assets/styles/choices.css +338 -0
  35. data/node_modules/choices.js/public/assets/styles/choices.css.map +1 -0
  36. data/node_modules/choices.js/public/assets/styles/choices.min.css +1 -0
  37. data/node_modules/choices.js/public/types/src/index.d.ts +6 -0
  38. data/node_modules/choices.js/public/types/src/scripts/actions/choices.d.ts +30 -0
  39. data/node_modules/choices.js/public/types/src/scripts/actions/groups.d.ts +8 -0
  40. data/node_modules/choices.js/public/types/src/scripts/actions/items.d.ts +17 -0
  41. data/node_modules/choices.js/public/types/src/scripts/choices.d.ts +210 -0
  42. data/node_modules/choices.js/public/types/src/scripts/components/container.d.ts +36 -0
  43. data/node_modules/choices.js/public/types/src/scripts/components/dropdown.d.ts +21 -0
  44. data/node_modules/choices.js/public/types/src/scripts/components/index.d.ts +7 -0
  45. data/node_modules/choices.js/public/types/src/scripts/components/input.d.ts +37 -0
  46. data/node_modules/choices.js/public/types/src/scripts/components/list.d.ts +14 -0
  47. data/node_modules/choices.js/public/types/src/scripts/components/wrapped-element.d.ts +21 -0
  48. data/node_modules/choices.js/public/types/src/scripts/components/wrapped-input.d.ts +3 -0
  49. data/node_modules/choices.js/public/types/src/scripts/components/wrapped-select.d.ts +20 -0
  50. data/node_modules/choices.js/public/types/src/scripts/constants.d.ts +1 -0
  51. data/node_modules/choices.js/public/types/src/scripts/defaults.d.ts +4 -0
  52. data/node_modules/choices.js/public/types/src/scripts/interfaces/action-type.d.ts +13 -0
  53. data/node_modules/choices.js/public/types/src/scripts/interfaces/build-flags.d.ts +11 -0
  54. data/node_modules/choices.js/public/types/src/scripts/interfaces/choice-full.d.ts +23 -0
  55. data/node_modules/choices.js/public/types/src/scripts/interfaces/class-names.d.ts +61 -0
  56. data/node_modules/choices.js/public/types/src/scripts/interfaces/event-choice.d.ts +7 -0
  57. data/node_modules/choices.js/public/types/src/scripts/interfaces/event-type.d.ts +14 -0
  58. data/node_modules/choices.js/public/types/src/scripts/interfaces/group-full.d.ts +10 -0
  59. data/node_modules/choices.js/public/types/src/scripts/interfaces/index.d.ts +14 -0
  60. data/node_modules/choices.js/public/types/src/scripts/interfaces/input-choice.d.ts +15 -0
  61. data/node_modules/choices.js/public/types/src/scripts/interfaces/input-group.d.ts +10 -0
  62. data/node_modules/choices.js/public/types/src/scripts/interfaces/item.d.ts +17 -0
  63. data/node_modules/choices.js/public/types/src/scripts/interfaces/keycode-map.d.ts +13 -0
  64. data/node_modules/choices.js/public/types/src/scripts/interfaces/options.d.ts +566 -0
  65. data/node_modules/choices.js/public/types/src/scripts/interfaces/passed-element-type.d.ts +7 -0
  66. data/node_modules/choices.js/public/types/src/scripts/interfaces/passed-element.d.ts +95 -0
  67. data/node_modules/choices.js/public/types/src/scripts/interfaces/position-options-type.d.ts +1 -0
  68. data/node_modules/choices.js/public/types/src/scripts/interfaces/search.d.ts +11 -0
  69. data/node_modules/choices.js/public/types/src/scripts/interfaces/state.d.ts +10 -0
  70. data/node_modules/choices.js/public/types/src/scripts/interfaces/store.d.ts +64 -0
  71. data/node_modules/choices.js/public/types/src/scripts/interfaces/string-pre-escaped.d.ts +3 -0
  72. data/node_modules/choices.js/public/types/src/scripts/interfaces/string-untrusted.d.ts +4 -0
  73. data/node_modules/choices.js/public/types/src/scripts/interfaces/templates.d.ts +29 -0
  74. data/node_modules/choices.js/public/types/src/scripts/interfaces/types.d.ts +18 -0
  75. data/node_modules/choices.js/public/types/src/scripts/lib/choice-input.d.ts +9 -0
  76. data/node_modules/choices.js/public/types/src/scripts/lib/html-guard-statements.d.ts +4 -0
  77. data/node_modules/choices.js/public/types/src/scripts/lib/utils.d.ts +31 -0
  78. data/node_modules/choices.js/public/types/src/scripts/reducers/choices.d.ts +8 -0
  79. data/node_modules/choices.js/public/types/src/scripts/reducers/groups.d.ts +8 -0
  80. data/node_modules/choices.js/public/types/src/scripts/reducers/items.d.ts +9 -0
  81. data/node_modules/choices.js/public/types/src/scripts/search/fuse.d.ts +14 -0
  82. data/node_modules/choices.js/public/types/src/scripts/search/index.d.ts +3 -0
  83. data/node_modules/choices.js/public/types/src/scripts/search/kmp.d.ts +11 -0
  84. data/node_modules/choices.js/public/types/src/scripts/search/prefix-filter.d.ts +11 -0
  85. data/node_modules/choices.js/public/types/src/scripts/store/store.d.ts +59 -0
  86. data/node_modules/choices.js/public/types/src/scripts/templates.d.ts +8 -0
  87. data/node_modules/choices.js/src/entry.js +3 -0
  88. data/node_modules/choices.js/src/icons/cross-inverse.svg +1 -0
  89. data/node_modules/choices.js/src/icons/cross.svg +1 -0
  90. data/node_modules/choices.js/src/index.ts +8 -0
  91. data/node_modules/choices.js/src/scripts/actions/choices.ts +59 -0
  92. data/node_modules/choices.js/src/scripts/actions/groups.ts +14 -0
  93. data/node_modules/choices.js/src/scripts/actions/items.ts +34 -0
  94. data/node_modules/choices.js/src/scripts/choices.ts +2364 -0
  95. data/node_modules/choices.js/src/scripts/components/container.ts +157 -0
  96. data/node_modules/choices.js/src/scripts/components/dropdown.ts +50 -0
  97. data/node_modules/choices.js/src/scripts/components/index.ts +8 -0
  98. data/node_modules/choices.js/src/scripts/components/input.ts +146 -0
  99. data/node_modules/choices.js/src/scripts/components/list.ts +89 -0
  100. data/node_modules/choices.js/src/scripts/components/wrapped-element.ts +89 -0
  101. data/node_modules/choices.js/src/scripts/components/wrapped-input.ts +3 -0
  102. data/node_modules/choices.js/src/scripts/components/wrapped-select.ts +115 -0
  103. data/node_modules/choices.js/src/scripts/constants.ts +1 -0
  104. data/node_modules/choices.js/src/scripts/defaults.ts +93 -0
  105. data/node_modules/choices.js/src/scripts/interfaces/action-type.ts +15 -0
  106. data/node_modules/choices.js/src/scripts/interfaces/build-flags.ts +17 -0
  107. data/node_modules/choices.js/src/scripts/interfaces/choice-full.ts +30 -0
  108. data/node_modules/choices.js/src/scripts/interfaces/class-names.ts +61 -0
  109. data/node_modules/choices.js/src/scripts/interfaces/event-choice.ts +9 -0
  110. data/node_modules/choices.js/src/scripts/interfaces/event-type.ts +16 -0
  111. data/node_modules/choices.js/src/scripts/interfaces/group-full.ts +12 -0
  112. data/node_modules/choices.js/src/scripts/interfaces/index.ts +14 -0
  113. data/node_modules/choices.js/src/scripts/interfaces/input-choice.ts +17 -0
  114. data/node_modules/choices.js/src/scripts/interfaces/input-group.ts +11 -0
  115. data/node_modules/choices.js/src/scripts/interfaces/item.ts +17 -0
  116. data/node_modules/choices.js/src/scripts/interfaces/keycode-map.ts +13 -0
  117. data/node_modules/choices.js/src/scripts/interfaces/options.ts +619 -0
  118. data/node_modules/choices.js/src/scripts/interfaces/passed-element-type.ts +9 -0
  119. data/node_modules/choices.js/src/scripts/interfaces/passed-element.ts +96 -0
  120. data/node_modules/choices.js/src/scripts/interfaces/position-options-type.ts +1 -0
  121. data/node_modules/choices.js/src/scripts/interfaces/search.ts +12 -0
  122. data/node_modules/choices.js/src/scripts/interfaces/state.ts +12 -0
  123. data/node_modules/choices.js/src/scripts/interfaces/store.ts +84 -0
  124. data/node_modules/choices.js/src/scripts/interfaces/string-pre-escaped.ts +3 -0
  125. data/node_modules/choices.js/src/scripts/interfaces/string-untrusted.ts +5 -0
  126. data/node_modules/choices.js/src/scripts/interfaces/templates.ts +66 -0
  127. data/node_modules/choices.js/src/scripts/interfaces/types.ts +21 -0
  128. data/node_modules/choices.js/src/scripts/lib/choice-input.ts +88 -0
  129. data/node_modules/choices.js/src/scripts/lib/html-guard-statements.ts +7 -0
  130. data/node_modules/choices.js/src/scripts/lib/utils.ts +230 -0
  131. data/node_modules/choices.js/src/scripts/reducers/choices.ts +86 -0
  132. data/node_modules/choices.js/src/scripts/reducers/groups.ts +32 -0
  133. data/node_modules/choices.js/src/scripts/reducers/items.ts +86 -0
  134. data/node_modules/choices.js/src/scripts/search/fuse.ts +59 -0
  135. data/node_modules/choices.js/src/scripts/search/index.ts +17 -0
  136. data/node_modules/choices.js/src/scripts/search/kmp.ts +87 -0
  137. data/node_modules/choices.js/src/scripts/search/prefix-filter.ts +42 -0
  138. data/node_modules/choices.js/src/scripts/store/store.ts +184 -0
  139. data/node_modules/choices.js/src/scripts/templates.ts +409 -0
  140. data/node_modules/choices.js/src/styles/base.scss +189 -0
  141. data/node_modules/choices.js/src/styles/choices.scss +414 -0
  142. data/node_modules/choices.js/src/tsconfig.json +22 -0
  143. metadata +134 -1
@@ -0,0 +1,414 @@
1
+ /* ===============================
2
+ = Choices =
3
+ =============================== */
4
+
5
+ @use "sass:color";
6
+
7
+ $choices-selector: "choices" !default;
8
+ $choices-font-size-lg: 16px !default;
9
+ $choices-font-size-md: 14px !default;
10
+ $choices-font-size-sm: 12px !default;
11
+ $choices-guttering: 24px !default;
12
+ $choices-border-radius: 2.5px !default;
13
+ $choices-border-radius-item: 20px !default;
14
+ $choices-bg-color: #f9f9f9 !default;
15
+ $choices-bg-color-disabled: #eaeaea !default;
16
+ $choices-bg-color-dropdown: #fff !default;
17
+ $choices-text-color: #333 !default;
18
+ $choices-keyline-color: #ddd !default;
19
+ $choices-primary-color: #005F75 !default;
20
+ $choices-disabled-color: #eaeaea !default;
21
+ $choices-highlight-color: $choices-primary-color !default;
22
+ $choices-button-dimension: 8px !default;
23
+ $choices-button-offset: 8px !default;
24
+ $choices-icon-cross: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==") !default;
25
+ $choices-icon-cross-inverse: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==") !default;
26
+ $choices-z-index: 1 !default;
27
+
28
+ .#{$choices-selector} {
29
+ position: relative;
30
+ overflow: hidden;
31
+ margin-bottom: $choices-guttering;
32
+ font-size: $choices-font-size-lg;
33
+
34
+ &:focus {
35
+ outline: none;
36
+ }
37
+
38
+ &:last-child {
39
+ margin-bottom: 0;
40
+ }
41
+
42
+ &.is-open {
43
+ overflow: visible;
44
+ }
45
+
46
+ &.is-disabled {
47
+ .#{$choices-selector}__inner,
48
+ .#{$choices-selector}__input {
49
+ background-color: $choices-bg-color-disabled;
50
+ cursor: not-allowed;
51
+ user-select: none;
52
+ }
53
+ .#{$choices-selector}__item {
54
+ cursor: not-allowed;
55
+ }
56
+ }
57
+
58
+ [hidden] {
59
+ display: none !important;
60
+ }
61
+ }
62
+
63
+ .#{$choices-selector}[data-type*='select-one'] {
64
+ cursor: pointer;
65
+ .#{$choices-selector}__inner {
66
+ padding-bottom: 7.5px;
67
+ }
68
+ .#{$choices-selector}__input {
69
+ display: block;
70
+ width: 100%;
71
+ padding: 10px;
72
+ border-bottom: 1px solid $choices-keyline-color;
73
+ background-color: #fff;
74
+ margin: 0;
75
+ }
76
+ .#{$choices-selector}__button {
77
+ background-image: $choices-icon-cross-inverse;
78
+ padding: 0;
79
+ background-size: 8px;
80
+ position: absolute;
81
+ top: 50%;
82
+ right: 0;
83
+ margin-top: -10px;
84
+ margin-right: 25px;
85
+ height: 20px;
86
+ width: 20px;
87
+ border-radius: 10em;
88
+ opacity: 0.25;
89
+
90
+ &:hover,
91
+ &:focus {
92
+ opacity: 1;
93
+ }
94
+
95
+ &:focus {
96
+ box-shadow: 0 0 0 2px $choices-highlight-color;
97
+ }
98
+ }
99
+ .#{$choices-selector}__item[data-placeholder] .#{$choices-selector}__button {
100
+ display: none;
101
+ }
102
+
103
+ &::after {
104
+ content: "";
105
+ height: 0;
106
+ width: 0;
107
+ border-style: solid;
108
+ border-color: $choices-text-color transparent transparent transparent;
109
+ border-width: 5px;
110
+ position: absolute;
111
+ right: 11.5px;
112
+ top: 50%;
113
+ margin-top: -2.5px;
114
+ pointer-events: none;
115
+ }
116
+
117
+ &.is-open::after {
118
+ border-color: transparent transparent $choices-text-color;
119
+ margin-top: -7.5px;
120
+ }
121
+
122
+ &[dir="rtl"] {
123
+ &::after {
124
+ left: 11.5px;
125
+ right: auto;
126
+ }
127
+ .#{$choices-selector}__button {
128
+ right: auto;
129
+ left: 0;
130
+ margin-left: 25px;
131
+ margin-right: 0;
132
+ }
133
+ }
134
+ }
135
+
136
+ .#{$choices-selector}[data-type*='select-multiple'],
137
+ .#{$choices-selector}[data-type*='text'] {
138
+ .#{$choices-selector}__inner {
139
+ cursor: text;
140
+ }
141
+ .#{$choices-selector}__button {
142
+ position: relative;
143
+ display: inline-block;
144
+ margin-top: 0;
145
+ margin-right: -$choices-button-offset * 0.5;
146
+ margin-bottom: 0;
147
+ margin-left: $choices-button-offset;
148
+ padding-left: $choices-button-offset * 2;
149
+ border-left: 1px solid color.adjust($choices-primary-color, $lightness: -10%);
150
+ background-image: $choices-icon-cross;
151
+ background-size: $choices-button-dimension;
152
+ width: $choices-button-dimension;
153
+ line-height: 1;
154
+ opacity: 0.75;
155
+ border-radius: 0;
156
+
157
+ &:hover,
158
+ &:focus {
159
+ opacity: 1;
160
+ }
161
+ }
162
+ }
163
+
164
+ .#{$choices-selector}__inner {
165
+ display: inline-block;
166
+ vertical-align: top;
167
+ width: 100%;
168
+ background-color: $choices-bg-color;
169
+ padding: 7.5px 7.5px 3.75px;
170
+ border: 1px solid $choices-keyline-color;
171
+ border-radius: $choices-border-radius;
172
+ font-size: $choices-font-size-md;
173
+ min-height: 44px;
174
+ overflow: hidden;
175
+
176
+ .is-focused &,
177
+ .is-open & {
178
+ border-color: color.adjust($choices-keyline-color, $lightness: -15%);
179
+ }
180
+
181
+ .is-open & {
182
+ border-radius: $choices-border-radius $choices-border-radius 0 0;
183
+ }
184
+
185
+ .is-flipped.is-open & {
186
+ border-radius: 0 0 $choices-border-radius $choices-border-radius;
187
+ }
188
+ }
189
+
190
+ .#{$choices-selector}__list {
191
+ margin: 0;
192
+ padding-left: 0;
193
+ list-style: none;
194
+
195
+ &[aria-expanded] {
196
+ @extend %choices-dropdown;
197
+ }
198
+ }
199
+
200
+ .#{$choices-selector}__list--single {
201
+ display: inline-block;
202
+ padding: 4px 16px 4px 4px;
203
+ width: 100%;
204
+
205
+ [dir="rtl"] & {
206
+ padding-right: 4px;
207
+ padding-left: 16px;
208
+ }
209
+ .#{$choices-selector}__item {
210
+ width: 100%;
211
+ }
212
+ }
213
+
214
+ .#{$choices-selector}__list--multiple {
215
+ display: inline;
216
+ .#{$choices-selector}__item {
217
+ display: inline-block;
218
+ vertical-align: middle;
219
+ border-radius: $choices-border-radius-item;
220
+ padding: 4px 10px;
221
+ font-size: $choices-font-size-sm;
222
+ font-weight: 500;
223
+ margin-right: 3.75px;
224
+ margin-bottom: 3.75px;
225
+ background-color: $choices-primary-color;
226
+ border: 1px solid color.adjust($choices-primary-color, $lightness: -5%);
227
+ color: #fff;
228
+ word-break: break-all;
229
+ box-sizing: border-box;
230
+
231
+ &[data-deletable] {
232
+ padding-right: 5px;
233
+ }
234
+
235
+ [dir="rtl"] & {
236
+ margin-right: 0;
237
+ margin-left: 3.75px;
238
+ }
239
+
240
+ &.is-highlighted {
241
+ background-color: color.adjust($choices-primary-color, $lightness: -5%);
242
+ border: 1px solid color.adjust($choices-primary-color, $lightness: -10%);
243
+ }
244
+
245
+ .is-disabled & {
246
+ background-color: color.adjust($choices-disabled-color, $lightness: -25%);
247
+ border: 1px solid color.adjust($choices-disabled-color, $lightness: -35%);
248
+ }
249
+ }
250
+ }
251
+
252
+ %choices-dropdown {
253
+ display: none;
254
+ z-index: $choices-z-index;
255
+ position: absolute;
256
+ width: 100%;
257
+ background-color: $choices-bg-color-dropdown;
258
+ border: 1px solid $choices-keyline-color;
259
+ top: 100%;
260
+ margin-top: -1px;
261
+ border-bottom-left-radius: $choices-border-radius;
262
+ border-bottom-right-radius: $choices-border-radius;
263
+ overflow: hidden;
264
+ word-break: break-all;
265
+
266
+ &.is-active {
267
+ display: block;
268
+ }
269
+
270
+ .is-open & {
271
+ border-color: color.adjust($choices-keyline-color, $lightness: -15%);
272
+ }
273
+
274
+ .is-flipped & {
275
+ top: auto;
276
+ bottom: 100%;
277
+ margin-top: 0;
278
+ margin-bottom: -1px;
279
+ border-radius: 0.25rem 0.25rem 0 0;
280
+ }
281
+ .#{$choices-selector}__list {
282
+ position: relative;
283
+ max-height: 300px;
284
+ overflow: auto;
285
+ -webkit-overflow-scrolling: touch;
286
+ will-change: scroll-position;
287
+ }
288
+ .#{$choices-selector}__item {
289
+ position: relative;
290
+ padding: 10px;
291
+ font-size: $choices-font-size-md;
292
+
293
+ [dir="rtl"] & {
294
+ text-align: right;
295
+ }
296
+ }
297
+ .#{$choices-selector}__item--selectable {
298
+ &[data-select-text] {
299
+ @media (min-width: 640px) {
300
+ padding-right: 100px;
301
+
302
+ &::after {
303
+ content: attr(data-select-text);
304
+ font-size: $choices-font-size-sm;
305
+ opacity: 0;
306
+ position: absolute;
307
+ right: 10px;
308
+ top: 50%;
309
+ transform: translateY(-50%);
310
+ }
311
+
312
+ [dir="rtl"] & {
313
+ text-align: right;
314
+ padding-left: 100px;
315
+ padding-right: 10px;
316
+
317
+ &::after {
318
+ right: auto;
319
+ left: 10px;
320
+ }
321
+ }
322
+ }
323
+ }
324
+
325
+ &.is-highlighted {
326
+ background-color: color.mix(#000, #fff, 5%);
327
+
328
+ &::after {
329
+ opacity: 0.5;
330
+ }
331
+ }
332
+ }
333
+ }
334
+
335
+ .#{$choices-selector}__list--dropdown {
336
+ @extend %choices-dropdown;
337
+ }
338
+
339
+ .#{$choices-selector}__item {
340
+ cursor: default;
341
+ }
342
+
343
+ .#{$choices-selector}__item--selectable {
344
+ cursor: pointer;
345
+ }
346
+
347
+ .#{$choices-selector}__item--disabled {
348
+ cursor: not-allowed;
349
+ user-select: none;
350
+ opacity: 0.5;
351
+ }
352
+
353
+ .#{$choices-selector}__heading {
354
+ font-weight: 600;
355
+ font-size: $choices-font-size-sm;
356
+ padding: 10px;
357
+ border-bottom: 1px solid color.adjust($choices-keyline-color, $lightness: 10%);
358
+ color: color.adjust(#333, $lightness: 30%);
359
+ }
360
+
361
+ .#{$choices-selector}__button {
362
+ text-indent: -9999px;
363
+ appearance: none;
364
+ border: 0;
365
+ background-color: transparent;
366
+ background-repeat: no-repeat;
367
+ background-position: center;
368
+ cursor: pointer;
369
+
370
+ &:focus {
371
+ outline: none;
372
+ }
373
+ }
374
+
375
+ .#{$choices-selector}__input {
376
+ display: inline-block;
377
+ vertical-align: baseline;
378
+ background-color: $choices-bg-color;
379
+ font-size: $choices-font-size-md;
380
+ margin-bottom: 5px;
381
+ border: 0;
382
+ border-radius: 0;
383
+ max-width: 100%;
384
+ padding: 4px 0 4px 2px;
385
+
386
+ &:focus {
387
+ outline: 0;
388
+ }
389
+
390
+ &::-webkit-search-decoration,
391
+ &::-webkit-search-cancel-button,
392
+ &::-webkit-search-results-button,
393
+ &::-webkit-search-results-decoration {
394
+ display: none;
395
+ }
396
+
397
+ &::-ms-clear,
398
+ &::-ms-reveal {
399
+ display: none;
400
+ width: 0;
401
+ height: 0;
402
+ }
403
+
404
+ [dir="rtl"] & {
405
+ padding-right: 2px;
406
+ padding-left: 0;
407
+ }
408
+ }
409
+
410
+ .#{$choices-selector}__placeholder {
411
+ opacity: 0.5;
412
+ }
413
+
414
+ /* ===== End of Choices ====== */
@@ -0,0 +1,22 @@
1
+ {
2
+ "compilerOptions": {
3
+ "module": "es6",
4
+ "lib": ["es2017", "dom"],
5
+ "target": "es5",
6
+ "moduleResolution": "bundler",
7
+ "allowSyntheticDefaultImports": true,
8
+ "resolveJsonModule": true,
9
+ "esModuleInterop": true,
10
+ "strict": false,
11
+ "noImplicitAny": false,
12
+ "allowJs": true,
13
+ "noUnusedLocals": true,
14
+ "noUnusedParameters": true,
15
+ "strictNullChecks": true,
16
+ "newLine": "lf",
17
+ "declaration": false,
18
+ "declarationMap": false
19
+ },
20
+ "include": ["."],
21
+ "exclude": ["**/node_modules", "**/public"]
22
+ }
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: govuk_publishing_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 58.1.1
4
+ version: 58.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - GOV.UK Dev
@@ -444,6 +444,7 @@ files:
444
444
  - app/assets/images/govuk_publishing_components/youtube-play-icon.png
445
445
  - app/assets/images/govuk_publishing_components/youtube-play-icon.svg
446
446
  - app/assets/images/option-select/input-icon.svg
447
+ - app/assets/images/select-with-search/cross-icon.svg
447
448
  - app/assets/javascripts/component_guide/accessibility-test.js
448
449
  - app/assets/javascripts/component_guide/application.js
449
450
  - app/assets/javascripts/component_guide/audit-filter.js
@@ -498,6 +499,7 @@ files:
498
499
  - app/assets/javascripts/govuk_publishing_components/components/radio.js
499
500
  - app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js
500
501
  - app/assets/javascripts/govuk_publishing_components/components/search-with-autocomplete.js
502
+ - app/assets/javascripts/govuk_publishing_components/components/select-with-search.js
501
503
  - app/assets/javascripts/govuk_publishing_components/components/service-navigation.js
502
504
  - app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js
503
505
  - app/assets/javascripts/govuk_publishing_components/components/skip-link.js
@@ -596,6 +598,7 @@ files:
596
598
  - app/assets/stylesheets/govuk_publishing_components/components/_search-with-autocomplete.scss
597
599
  - app/assets/stylesheets/govuk_publishing_components/components/_search.scss
598
600
  - app/assets/stylesheets/govuk_publishing_components/components/_secondary-navigation.scss
601
+ - app/assets/stylesheets/govuk_publishing_components/components/_select-with-search.scss
599
602
  - app/assets/stylesheets/govuk_publishing_components/components/_select.scss
600
603
  - app/assets/stylesheets/govuk_publishing_components/components/_service-navigation.scss
601
604
  - app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss
@@ -748,6 +751,7 @@ files:
748
751
  - app/views/govuk_publishing_components/components/_search_with_autocomplete.html.erb
749
752
  - app/views/govuk_publishing_components/components/_secondary_navigation.html.erb
750
753
  - app/views/govuk_publishing_components/components/_select.html.erb
754
+ - app/views/govuk_publishing_components/components/_select_with_search.html.erb
751
755
  - app/views/govuk_publishing_components/components/_service_navigation.html.erb
752
756
  - app/views/govuk_publishing_components/components/_share_links.html.erb
753
757
  - app/views/govuk_publishing_components/components/_signup_link.html.erb
@@ -848,6 +852,7 @@ files:
848
852
  - app/views/govuk_publishing_components/components/docs/search_with_autocomplete.yml
849
853
  - app/views/govuk_publishing_components/components/docs/secondary_navigation.yml
850
854
  - app/views/govuk_publishing_components/components/docs/select.yml
855
+ - app/views/govuk_publishing_components/components/docs/select_with_search.yml
851
856
  - app/views/govuk_publishing_components/components/docs/service_navigation.yml
852
857
  - app/views/govuk_publishing_components/components/docs/share_links.yml
853
858
  - app/views/govuk_publishing_components/components/docs/signup_link.yml
@@ -1005,6 +1010,7 @@ files:
1005
1010
  - lib/govuk_publishing_components/presenters/related_navigation_helper.rb
1006
1011
  - lib/govuk_publishing_components/presenters/schema_org.rb
1007
1012
  - lib/govuk_publishing_components/presenters/select_helper.rb
1013
+ - lib/govuk_publishing_components/presenters/select_with_search_helper.rb
1008
1014
  - lib/govuk_publishing_components/presenters/shared_helper.rb
1009
1015
  - lib/govuk_publishing_components/presenters/single_page_notification_button_helper.rb
1010
1016
  - lib/govuk_publishing_components/presenters/step_by_step_nav_helper.rb
@@ -1078,6 +1084,133 @@ files:
1078
1084
  - node_modules/axe-core/locales/zh_TW.json
1079
1085
  - node_modules/axe-core/package.json
1080
1086
  - node_modules/axe-core/sri-history.json
1087
+ - node_modules/choices.js/LICENSE
1088
+ - node_modules/choices.js/README.md
1089
+ - node_modules/choices.js/package.json
1090
+ - node_modules/choices.js/public/assets/scripts/choices.js
1091
+ - node_modules/choices.js/public/assets/scripts/choices.min.js
1092
+ - node_modules/choices.js/public/assets/scripts/choices.mjs
1093
+ - node_modules/choices.js/public/assets/scripts/choices.search-basic.js
1094
+ - node_modules/choices.js/public/assets/scripts/choices.search-basic.min.js
1095
+ - node_modules/choices.js/public/assets/scripts/choices.search-basic.mjs
1096
+ - node_modules/choices.js/public/assets/scripts/choices.search-kmp.js
1097
+ - node_modules/choices.js/public/assets/scripts/choices.search-kmp.min.js
1098
+ - node_modules/choices.js/public/assets/scripts/choices.search-kmp.mjs
1099
+ - node_modules/choices.js/public/assets/scripts/choices.search-prefix.js
1100
+ - node_modules/choices.js/public/assets/scripts/choices.search-prefix.min.js
1101
+ - node_modules/choices.js/public/assets/scripts/choices.search-prefix.mjs
1102
+ - node_modules/choices.js/public/assets/styles/base.css
1103
+ - node_modules/choices.js/public/assets/styles/base.css.map
1104
+ - node_modules/choices.js/public/assets/styles/base.min.css
1105
+ - node_modules/choices.js/public/assets/styles/choices.css
1106
+ - node_modules/choices.js/public/assets/styles/choices.css.map
1107
+ - node_modules/choices.js/public/assets/styles/choices.min.css
1108
+ - node_modules/choices.js/public/types/src/index.d.ts
1109
+ - node_modules/choices.js/public/types/src/scripts/actions/choices.d.ts
1110
+ - node_modules/choices.js/public/types/src/scripts/actions/groups.d.ts
1111
+ - node_modules/choices.js/public/types/src/scripts/actions/items.d.ts
1112
+ - node_modules/choices.js/public/types/src/scripts/choices.d.ts
1113
+ - node_modules/choices.js/public/types/src/scripts/components/container.d.ts
1114
+ - node_modules/choices.js/public/types/src/scripts/components/dropdown.d.ts
1115
+ - node_modules/choices.js/public/types/src/scripts/components/index.d.ts
1116
+ - node_modules/choices.js/public/types/src/scripts/components/input.d.ts
1117
+ - node_modules/choices.js/public/types/src/scripts/components/list.d.ts
1118
+ - node_modules/choices.js/public/types/src/scripts/components/wrapped-element.d.ts
1119
+ - node_modules/choices.js/public/types/src/scripts/components/wrapped-input.d.ts
1120
+ - node_modules/choices.js/public/types/src/scripts/components/wrapped-select.d.ts
1121
+ - node_modules/choices.js/public/types/src/scripts/constants.d.ts
1122
+ - node_modules/choices.js/public/types/src/scripts/defaults.d.ts
1123
+ - node_modules/choices.js/public/types/src/scripts/interfaces/action-type.d.ts
1124
+ - node_modules/choices.js/public/types/src/scripts/interfaces/build-flags.d.ts
1125
+ - node_modules/choices.js/public/types/src/scripts/interfaces/choice-full.d.ts
1126
+ - node_modules/choices.js/public/types/src/scripts/interfaces/class-names.d.ts
1127
+ - node_modules/choices.js/public/types/src/scripts/interfaces/event-choice.d.ts
1128
+ - node_modules/choices.js/public/types/src/scripts/interfaces/event-type.d.ts
1129
+ - node_modules/choices.js/public/types/src/scripts/interfaces/group-full.d.ts
1130
+ - node_modules/choices.js/public/types/src/scripts/interfaces/index.d.ts
1131
+ - node_modules/choices.js/public/types/src/scripts/interfaces/input-choice.d.ts
1132
+ - node_modules/choices.js/public/types/src/scripts/interfaces/input-group.d.ts
1133
+ - node_modules/choices.js/public/types/src/scripts/interfaces/item.d.ts
1134
+ - node_modules/choices.js/public/types/src/scripts/interfaces/keycode-map.d.ts
1135
+ - node_modules/choices.js/public/types/src/scripts/interfaces/options.d.ts
1136
+ - node_modules/choices.js/public/types/src/scripts/interfaces/passed-element-type.d.ts
1137
+ - node_modules/choices.js/public/types/src/scripts/interfaces/passed-element.d.ts
1138
+ - node_modules/choices.js/public/types/src/scripts/interfaces/position-options-type.d.ts
1139
+ - node_modules/choices.js/public/types/src/scripts/interfaces/search.d.ts
1140
+ - node_modules/choices.js/public/types/src/scripts/interfaces/state.d.ts
1141
+ - node_modules/choices.js/public/types/src/scripts/interfaces/store.d.ts
1142
+ - node_modules/choices.js/public/types/src/scripts/interfaces/string-pre-escaped.d.ts
1143
+ - node_modules/choices.js/public/types/src/scripts/interfaces/string-untrusted.d.ts
1144
+ - node_modules/choices.js/public/types/src/scripts/interfaces/templates.d.ts
1145
+ - node_modules/choices.js/public/types/src/scripts/interfaces/types.d.ts
1146
+ - node_modules/choices.js/public/types/src/scripts/lib/choice-input.d.ts
1147
+ - node_modules/choices.js/public/types/src/scripts/lib/html-guard-statements.d.ts
1148
+ - node_modules/choices.js/public/types/src/scripts/lib/utils.d.ts
1149
+ - node_modules/choices.js/public/types/src/scripts/reducers/choices.d.ts
1150
+ - node_modules/choices.js/public/types/src/scripts/reducers/groups.d.ts
1151
+ - node_modules/choices.js/public/types/src/scripts/reducers/items.d.ts
1152
+ - node_modules/choices.js/public/types/src/scripts/search/fuse.d.ts
1153
+ - node_modules/choices.js/public/types/src/scripts/search/index.d.ts
1154
+ - node_modules/choices.js/public/types/src/scripts/search/kmp.d.ts
1155
+ - node_modules/choices.js/public/types/src/scripts/search/prefix-filter.d.ts
1156
+ - node_modules/choices.js/public/types/src/scripts/store/store.d.ts
1157
+ - node_modules/choices.js/public/types/src/scripts/templates.d.ts
1158
+ - node_modules/choices.js/src/entry.js
1159
+ - node_modules/choices.js/src/icons/cross-inverse.svg
1160
+ - node_modules/choices.js/src/icons/cross.svg
1161
+ - node_modules/choices.js/src/index.ts
1162
+ - node_modules/choices.js/src/scripts/actions/choices.ts
1163
+ - node_modules/choices.js/src/scripts/actions/groups.ts
1164
+ - node_modules/choices.js/src/scripts/actions/items.ts
1165
+ - node_modules/choices.js/src/scripts/choices.ts
1166
+ - node_modules/choices.js/src/scripts/components/container.ts
1167
+ - node_modules/choices.js/src/scripts/components/dropdown.ts
1168
+ - node_modules/choices.js/src/scripts/components/index.ts
1169
+ - node_modules/choices.js/src/scripts/components/input.ts
1170
+ - node_modules/choices.js/src/scripts/components/list.ts
1171
+ - node_modules/choices.js/src/scripts/components/wrapped-element.ts
1172
+ - node_modules/choices.js/src/scripts/components/wrapped-input.ts
1173
+ - node_modules/choices.js/src/scripts/components/wrapped-select.ts
1174
+ - node_modules/choices.js/src/scripts/constants.ts
1175
+ - node_modules/choices.js/src/scripts/defaults.ts
1176
+ - node_modules/choices.js/src/scripts/interfaces/action-type.ts
1177
+ - node_modules/choices.js/src/scripts/interfaces/build-flags.ts
1178
+ - node_modules/choices.js/src/scripts/interfaces/choice-full.ts
1179
+ - node_modules/choices.js/src/scripts/interfaces/class-names.ts
1180
+ - node_modules/choices.js/src/scripts/interfaces/event-choice.ts
1181
+ - node_modules/choices.js/src/scripts/interfaces/event-type.ts
1182
+ - node_modules/choices.js/src/scripts/interfaces/group-full.ts
1183
+ - node_modules/choices.js/src/scripts/interfaces/index.ts
1184
+ - node_modules/choices.js/src/scripts/interfaces/input-choice.ts
1185
+ - node_modules/choices.js/src/scripts/interfaces/input-group.ts
1186
+ - node_modules/choices.js/src/scripts/interfaces/item.ts
1187
+ - node_modules/choices.js/src/scripts/interfaces/keycode-map.ts
1188
+ - node_modules/choices.js/src/scripts/interfaces/options.ts
1189
+ - node_modules/choices.js/src/scripts/interfaces/passed-element-type.ts
1190
+ - node_modules/choices.js/src/scripts/interfaces/passed-element.ts
1191
+ - node_modules/choices.js/src/scripts/interfaces/position-options-type.ts
1192
+ - node_modules/choices.js/src/scripts/interfaces/search.ts
1193
+ - node_modules/choices.js/src/scripts/interfaces/state.ts
1194
+ - node_modules/choices.js/src/scripts/interfaces/store.ts
1195
+ - node_modules/choices.js/src/scripts/interfaces/string-pre-escaped.ts
1196
+ - node_modules/choices.js/src/scripts/interfaces/string-untrusted.ts
1197
+ - node_modules/choices.js/src/scripts/interfaces/templates.ts
1198
+ - node_modules/choices.js/src/scripts/interfaces/types.ts
1199
+ - node_modules/choices.js/src/scripts/lib/choice-input.ts
1200
+ - node_modules/choices.js/src/scripts/lib/html-guard-statements.ts
1201
+ - node_modules/choices.js/src/scripts/lib/utils.ts
1202
+ - node_modules/choices.js/src/scripts/reducers/choices.ts
1203
+ - node_modules/choices.js/src/scripts/reducers/groups.ts
1204
+ - node_modules/choices.js/src/scripts/reducers/items.ts
1205
+ - node_modules/choices.js/src/scripts/search/fuse.ts
1206
+ - node_modules/choices.js/src/scripts/search/index.ts
1207
+ - node_modules/choices.js/src/scripts/search/kmp.ts
1208
+ - node_modules/choices.js/src/scripts/search/prefix-filter.ts
1209
+ - node_modules/choices.js/src/scripts/store/store.ts
1210
+ - node_modules/choices.js/src/scripts/templates.ts
1211
+ - node_modules/choices.js/src/styles/base.scss
1212
+ - node_modules/choices.js/src/styles/choices.scss
1213
+ - node_modules/choices.js/src/tsconfig.json
1081
1214
  - node_modules/govuk-frontend/README.md
1082
1215
  - node_modules/govuk-frontend/dist/govuk-prototype-kit/functions.js
1083
1216
  - node_modules/govuk-frontend/dist/govuk-prototype-kit/init.js