@ons/design-system 70.0.6 → 70.0.8

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 (308) hide show
  1. package/README.md +11 -17
  2. package/components/access-code/_macro.spec.js +145 -145
  3. package/components/access-code/access-code.dom.js +5 -5
  4. package/components/access-code/access-code.js +16 -16
  5. package/components/access-code/access-code.scss +22 -22
  6. package/components/access-code/access-code.spec.js +17 -17
  7. package/components/accordion/_macro.spec.js +154 -154
  8. package/components/accordion/accordion.dom.js +10 -10
  9. package/components/accordion/accordion.js +50 -50
  10. package/components/accordion/accordion.spec.js +104 -104
  11. package/components/address-input/_macro.spec.js +420 -420
  12. package/components/address-input/autosuggest.address.dom.js +5 -5
  13. package/components/address-input/autosuggest.address.error.js +77 -77
  14. package/components/address-input/autosuggest.address.js +357 -357
  15. package/components/address-input/autosuggest.address.setter.js +95 -95
  16. package/components/address-input/autosuggest.address.spec.js +668 -651
  17. package/components/address-input/example-address-input-editable.njk +1 -1
  18. package/components/address-input/example-address-input.njk +1 -1
  19. package/components/address-output/_address-output.scss +3 -3
  20. package/components/address-output/_macro.spec.js +84 -84
  21. package/components/autosuggest/_autosuggest.scss +114 -114
  22. package/components/autosuggest/_macro.spec.js +255 -255
  23. package/components/autosuggest/autosuggest.dom.js +5 -5
  24. package/components/autosuggest/autosuggest.helpers.js +11 -11
  25. package/components/autosuggest/autosuggest.helpers.spec.js +73 -73
  26. package/components/autosuggest/autosuggest.js +20 -20
  27. package/components/autosuggest/autosuggest.spec.js +542 -536
  28. package/components/autosuggest/autosuggest.ui.js +478 -475
  29. package/components/autosuggest/fuse-config.js +17 -17
  30. package/components/back-to-top/_back-to-top.scss +27 -27
  31. package/components/back-to-top/_macro.spec.js +49 -49
  32. package/components/back-to-top/back-to-top.dom.js +5 -5
  33. package/components/back-to-top/back-to-top.js +52 -52
  34. package/components/back-to-top/back-to-top.spec.js +106 -106
  35. package/components/back-to-top/example-back-to-top.njk +6 -6
  36. package/components/breadcrumbs/_breadcrumbs.scss +63 -65
  37. package/components/breadcrumbs/_macro.spec.js +91 -91
  38. package/components/browser-banner/_browser-banner.scss +23 -23
  39. package/components/browser-banner/_macro.spec.js +92 -92
  40. package/components/button/_button.scss +482 -483
  41. package/components/button/_macro.spec.js +363 -363
  42. package/components/button/button.dom.js +15 -15
  43. package/components/button/button.js +53 -53
  44. package/components/button/button.spec.js +248 -240
  45. package/components/call-to-action/_call-to-action.scss +5 -5
  46. package/components/call-to-action/_macro.spec.js +28 -28
  47. package/components/card/_card.scss +23 -23
  48. package/components/card/_macro.spec.js +180 -180
  49. package/components/char-check-limit/_macro.spec.js +48 -48
  50. package/components/char-check-limit/character-check.js +58 -58
  51. package/components/char-check-limit/character-check.spec.js +173 -173
  52. package/components/char-check-limit/character-limit.js +40 -40
  53. package/components/checkboxes/_checkbox-macro.spec.js +355 -355
  54. package/components/checkboxes/_checkbox.scss +180 -180
  55. package/components/checkboxes/_checkboxes.scss +37 -27
  56. package/components/checkboxes/_macro.spec.js +261 -261
  57. package/components/checkboxes/checkbox-with-autoselect.js +32 -32
  58. package/components/checkboxes/checkbox-with-fieldset.js +21 -21
  59. package/components/checkboxes/checkboxes-with-reveal.js +10 -10
  60. package/components/checkboxes/checkboxes.dom.js +27 -27
  61. package/components/checkboxes/checkboxes.spec.js +183 -183
  62. package/components/content-pagination/_content-pagination.scss +41 -41
  63. package/components/content-pagination/_macro.spec.js +159 -159
  64. package/components/cookies-banner/_cookies-banner.scss +22 -22
  65. package/components/cookies-banner/_macro.spec.js +177 -177
  66. package/components/cookies-banner/cookies-banner.dom.js +7 -7
  67. package/components/cookies-banner/cookies-banner.js +76 -76
  68. package/components/cookies-banner/cookies-banner.spec.js +72 -68
  69. package/components/date-input/_macro.spec.js +338 -338
  70. package/components/description-list/_description-list.scss +23 -23
  71. package/components/description-list/_macro.spec.js +144 -144
  72. package/components/details/_details.scss +109 -109
  73. package/components/details/_macro.spec.js +132 -132
  74. package/components/details/details.dom.js +6 -6
  75. package/components/details/details.js +60 -60
  76. package/components/details/details.spec.js +106 -106
  77. package/components/document-list/_macro.spec.js +444 -444
  78. package/components/document-list/document-list.scss +145 -149
  79. package/components/download-resources/_download-resources.scss +109 -108
  80. package/components/download-resources/download-resources.js +907 -900
  81. package/components/download-resources/download-resources.spec.js +461 -461
  82. package/components/duration/_macro.spec.js +291 -291
  83. package/components/error/_macro.spec.js +72 -72
  84. package/components/external-link/_external-link.scss +19 -19
  85. package/components/external-link/_macro.spec.js +68 -68
  86. package/components/feedback/_feedback.scss +31 -31
  87. package/components/feedback/_macro.spec.js +72 -72
  88. package/components/field/_field-group.scss +10 -10
  89. package/components/field/_field.scss +16 -16
  90. package/components/field/_macro.spec.js +80 -80
  91. package/components/fieldset/_fieldset.scss +27 -27
  92. package/components/fieldset/_macro.spec.js +161 -161
  93. package/components/footer/_footer.scss +45 -45
  94. package/components/footer/_macro.spec.js +452 -452
  95. package/components/header/_header.scss +202 -202
  96. package/components/header/_macro.spec.js +833 -829
  97. package/components/helpers/_grid.scss +4 -4
  98. package/components/hero/_hero.scss +48 -48
  99. package/components/hero/_macro.spec.js +59 -59
  100. package/components/icon/_icon.scss +44 -44
  101. package/components/icon/_macro.spec.js +110 -110
  102. package/components/image/_image.scss +11 -11
  103. package/components/image/_macro.spec.js +81 -81
  104. package/components/input/_input-type.scss +86 -89
  105. package/components/input/_input.scss +123 -124
  106. package/components/input/_macro.spec.js +604 -604
  107. package/components/input/character-check.dom.js +5 -5
  108. package/components/input/input.dom.js +5 -5
  109. package/components/input/input.js +10 -10
  110. package/components/input/input.spec.js +18 -18
  111. package/components/label/_label.scss +24 -24
  112. package/components/label/_macro.spec.js +173 -170
  113. package/components/language-selector/_macro.spec.js +97 -97
  114. package/components/language-selector/language.scss +7 -7
  115. package/components/list/_list.scss +84 -84
  116. package/components/list/_macro.njk +2 -2
  117. package/components/list/_macro.spec.js +583 -583
  118. package/components/message/_macro.njk +5 -5
  119. package/components/message/_macro.spec.js +74 -74
  120. package/components/message/_message.scss +39 -39
  121. package/components/message-list/_macro.spec.js +86 -86
  122. package/components/message-list/_message-list.scss +16 -16
  123. package/components/modal/_macro.spec.js +69 -69
  124. package/components/modal/_modal.scss +36 -36
  125. package/components/modal/modal.dom.js +6 -6
  126. package/components/modal/modal.js +89 -89
  127. package/components/modal/modal.spec.js +50 -50
  128. package/components/mutually-exclusive/_macro.spec.js +140 -140
  129. package/components/mutually-exclusive/mutually-exclusive.checkboxes.spec.js +188 -188
  130. package/components/mutually-exclusive/mutually-exclusive.date.spec.js +211 -211
  131. package/components/mutually-exclusive/mutually-exclusive.dom.js +5 -5
  132. package/components/mutually-exclusive/mutually-exclusive.duration.spec.js +210 -210
  133. package/components/mutually-exclusive/mutually-exclusive.email.spec.js +90 -90
  134. package/components/mutually-exclusive/mutually-exclusive.js +137 -137
  135. package/components/mutually-exclusive/mutually-exclusive.multiple-options.checkboxes.spec.js +197 -197
  136. package/components/mutually-exclusive/mutually-exclusive.number.spec.js +96 -96
  137. package/components/mutually-exclusive/mutually-exclusive.textarea.spec.js +102 -102
  138. package/components/navigation/_macro.spec.js +360 -354
  139. package/components/navigation/_navigation.scss +122 -123
  140. package/components/navigation/navigation.dom.js +35 -35
  141. package/components/navigation/navigation.js +49 -49
  142. package/components/navigation/navigation.spec.js +249 -249
  143. package/components/pagination/_macro.spec.js +342 -335
  144. package/components/pagination/_pagination.scss +58 -58
  145. package/components/panel/_macro.spec.js +372 -372
  146. package/components/panel/_panel.scss +200 -199
  147. package/components/password/_macro.spec.js +95 -95
  148. package/components/password/password.dom.js +5 -5
  149. package/components/password/password.js +10 -10
  150. package/components/password/password.spec.js +26 -26
  151. package/components/phase-banner/_macro.spec.js +86 -86
  152. package/components/phase-banner/_phase-banner.scss +16 -16
  153. package/components/question/_macro.spec.js +235 -235
  154. package/components/question/_question.scss +24 -24
  155. package/components/quote/_macro.spec.js +52 -52
  156. package/components/quote/_quote.scss +24 -24
  157. package/components/radios/_macro.spec.js +524 -524
  158. package/components/radios/_radio.scss +49 -48
  159. package/components/radios/_radios.scss +14 -20
  160. package/components/radios/check-radios.js +21 -21
  161. package/components/radios/clear-radios.js +45 -45
  162. package/components/radios/radio-with-fieldset.js +22 -22
  163. package/components/radios/radios.dom.js +32 -32
  164. package/components/radios/radios.spec.js +251 -251
  165. package/components/related-content/_macro.spec.js +109 -109
  166. package/components/related-content/_related-content.scss +12 -12
  167. package/components/related-content/_section-macro.spec.js +20 -20
  168. package/components/relationships/_macro.spec.js +94 -94
  169. package/components/relationships/_relationships.scss +9 -9
  170. package/components/relationships/relationships.dom.js +5 -5
  171. package/components/relationships/relationships.js +18 -18
  172. package/components/relationships/relationships.spec.js +71 -71
  173. package/components/reply/_macro.spec.js +47 -47
  174. package/components/reply/reply-input.js +15 -15
  175. package/components/reply/reply.dom.js +5 -5
  176. package/components/reply/reply.spec.js +57 -57
  177. package/components/section-navigation/_macro.spec.js +210 -210
  178. package/components/section-navigation/_section-navigation.scss +76 -76
  179. package/components/select/_macro.spec.js +166 -166
  180. package/components/share-page/_macro.spec.js +68 -68
  181. package/components/skip-to-content/_macro.spec.js +54 -54
  182. package/components/skip-to-content/_skip.scss +30 -30
  183. package/components/skip-to-content/skip-to-content.dom.js +6 -6
  184. package/components/skip-to-content/skip-to-content.js +7 -7
  185. package/components/skip-to-content/skip-to-content.spec.js +21 -21
  186. package/components/status/_macro.spec.js +53 -53
  187. package/components/status/_status.scss +32 -32
  188. package/components/summary/_macro.spec.js +551 -535
  189. package/components/summary/_summary.scss +191 -195
  190. package/components/table/_macro.spec.js +499 -499
  191. package/components/table/_table.scss +204 -201
  192. package/components/table/scrollable-table.dom.js +5 -5
  193. package/components/table/scrollable-table.js +60 -60
  194. package/components/table/sortable-table.dom.js +5 -5
  195. package/components/table/sortable-table.js +135 -135
  196. package/components/table/table.spec.js +144 -140
  197. package/components/table-of-contents/_macro.spec.js +125 -125
  198. package/components/table-of-contents/_toc.scss +9 -9
  199. package/components/table-of-contents/toc.dom.js +5 -5
  200. package/components/table-of-contents/toc.js +30 -30
  201. package/components/table-of-contents/toc.spec.js +88 -88
  202. package/components/tabs/_macro.spec.js +92 -92
  203. package/components/tabs/_tabs.scss +120 -115
  204. package/components/tabs/tabs.dom.js +5 -5
  205. package/components/tabs/tabs.js +266 -266
  206. package/components/tabs/tabs.spec.js +268 -268
  207. package/components/text-indent/_macro.spec.js +33 -33
  208. package/components/text-indent/_text-indent.scss +3 -3
  209. package/components/textarea/_macro.spec.js +238 -238
  210. package/components/textarea/textarea.dom.js +5 -5
  211. package/components/textarea/textarea.spec.js +78 -74
  212. package/components/timeline/_macro.spec.js +83 -83
  213. package/components/timeline/_timeline.scss +26 -26
  214. package/components/timeout-modal/_macro.spec.js +47 -47
  215. package/components/timeout-modal/timeout-modal.dom.js +9 -9
  216. package/components/timeout-modal/timeout-modal.js +66 -66
  217. package/components/timeout-modal/timeout-modal.spec.js +157 -157
  218. package/components/timeout-panel/_macro.spec.js +41 -41
  219. package/components/timeout-panel/timeout-panel.dom.js +8 -8
  220. package/components/timeout-panel/timeout-panel.spec.js +118 -118
  221. package/components/upload/_macro.spec.js +52 -52
  222. package/components/upload/_upload.scss +28 -28
  223. package/components/video/_macro.spec.js +42 -42
  224. package/components/video/_video.scss +16 -16
  225. package/components/video/video.dom.js +5 -5
  226. package/components/video/video.js +32 -32
  227. package/components/video/video.spec.js +103 -97
  228. package/css/main.css +1 -1
  229. package/favicons/android-chrome-192x192.png +0 -0
  230. package/favicons/android-chrome-512x512.png +0 -0
  231. package/favicons/apple-touch-icon.png +0 -0
  232. package/favicons/favicon-16x16.png +0 -0
  233. package/favicons/favicon-32x32.png +0 -0
  234. package/favicons/favicon.ico +0 -0
  235. package/favicons/manifest.json +25 -25
  236. package/favicons/maskable_icon.png +0 -0
  237. package/favicons/opengraph.png +0 -0
  238. package/favicons/twitter.png +0 -0
  239. package/img/large/alison-pritchard-featured.jpg +0 -0
  240. package/img/large/alison-pritchard.jpg +0 -0
  241. package/img/large/census-monuments-lights-featured.jpg +0 -0
  242. package/img/large/census-monuments-lights.jpg +0 -0
  243. package/img/large/mother-and-daughter-in-ireland.jpg +0 -0
  244. package/img/large/mum-and-child-healthcare-belfast.jpg +0 -0
  245. package/img/large/ons-award-winners.jpg +0 -0
  246. package/img/large/placeholder-card.png +0 -0
  247. package/img/large/placeholder-news-medium.png +0 -0
  248. package/img/large/placeholder-news.png +0 -0
  249. package/img/large/placeholder-portrait.png +0 -0
  250. package/img/large/students.jpg +0 -0
  251. package/img/large/woman-in-purple-dress-shirt.jpg +0 -0
  252. package/img/small/alison-pritchard-featured.jpg +0 -0
  253. package/img/small/alison-pritchard.jpg +0 -0
  254. package/img/small/census-monuments-lights-featured.jpg +0 -0
  255. package/img/small/census-monuments-lights.jpg +0 -0
  256. package/img/small/mother-and-daughter-in-ireland.jpg +0 -0
  257. package/img/small/mum-and-child-healthcare-belfast.jpg +0 -0
  258. package/img/small/ons-award-winners.jpg +0 -0
  259. package/img/small/placeholder-card.png +0 -0
  260. package/img/small/placeholder-news-medium.png +0 -0
  261. package/img/small/placeholder-news.png +0 -0
  262. package/img/small/placeholder-portrait.png +0 -0
  263. package/img/small/students.jpg +0 -0
  264. package/img/small/woman-in-purple-dress-shirt.jpg +0 -0
  265. package/js/abortable-fetch.js +23 -23
  266. package/js/analytics.js +53 -53
  267. package/js/cookies-functions.js +135 -135
  268. package/js/cookies-settings.dom.js +7 -7
  269. package/js/cookies-settings.js +77 -77
  270. package/js/cookies-settings.spec.js +106 -106
  271. package/js/domready.js +8 -8
  272. package/js/fetch.js +14 -14
  273. package/js/inpagelink.dom.js +5 -5
  274. package/js/inpagelink.js +19 -19
  275. package/js/polyfills.js +0 -1
  276. package/js/print-button.js +6 -6
  277. package/js/timeout.js +211 -211
  278. package/layout/_template.njk +5 -7
  279. package/package.json +131 -127
  280. package/scripts/main.es5.js +1 -1
  281. package/scripts/main.js +1 -1
  282. package/scss/base/_forms.scss +10 -10
  283. package/scss/base/_global.scss +45 -44
  284. package/scss/base/_typography.scss +20 -20
  285. package/scss/helpers/_functions.scss +18 -15
  286. package/scss/helpers/_mixins.scss +59 -53
  287. package/scss/helpers/_mq.scss +62 -65
  288. package/scss/objects/_container.scss +20 -20
  289. package/scss/objects/_page.scss +33 -33
  290. package/scss/objects/_spacing.scss +10 -10
  291. package/scss/overrides/hcm.scss +237 -237
  292. package/scss/overrides/rtl.scss +95 -95
  293. package/scss/print.scss +47 -47
  294. package/scss/utilities/_border.scss +7 -7
  295. package/scss/utilities/_colors.scss +6 -6
  296. package/scss/utilities/_display.scss +8 -8
  297. package/scss/utilities/_float.scss +7 -7
  298. package/scss/utilities/_grid.scss +144 -144
  299. package/scss/utilities/_highlight.scss +4 -4
  300. package/scss/utilities/_margin.scss +17 -17
  301. package/scss/utilities/_pad.scss +15 -15
  302. package/scss/utilities/_typography.scss +35 -33
  303. package/scss/utilities/_utilities.scss +8 -8
  304. package/scss/utilities/_visibility.scss +25 -25
  305. package/scss/vars/_colors.scss +116 -116
  306. package/scss/vars/_forms.scss +22 -22
  307. package/scss/vars/_grid.scss +11 -9
  308. package/scss/vars/_typography.scss +54 -54
@@ -12,405 +12,405 @@ export const classInput = 'ons-js-autosuggest-input';
12
12
  export const classInputUPRN = 'ons-js-hidden-uprn';
13
13
 
14
14
  export default class AutosuggestAddress {
15
- constructor(context) {
16
- this.context = context;
17
- this.input = context.querySelector(`.${classInput}`);
18
- this.search = context.querySelector(`.${classSearch}`);
19
- this.addressReplaceChars = [','];
20
- this.sanitisedQuerySplitNumsChars = true;
21
- this.form = context.closest('form');
22
- this.container = context.querySelector(`.${classInputContainer}`);
23
- this.errorMessage = this.container.getAttribute('data-error-message');
24
- this.groupCount = this.container.getAttribute('data-group-count');
25
- this.authorizationToken = this.container.getAttribute('data-authorization-token');
26
- this.uprn = context.querySelector(`.${classInputUPRN}`);
27
-
28
- // State
29
- this.fetch = null;
30
- this.totalResults = 0;
31
- this.errored = false;
32
- this.isEditable = context.querySelector(`.${classNotEditable}`) ? false : true;
33
- this.isMandatory = context.querySelector(`.${classMandatory}`) ? true : false;
34
- this.addressSelected = false;
35
- this.groupQuery = '';
36
- this.selectedAddressValue = '';
37
-
38
- // Bind event listeners
39
- if (this.form) {
40
- this.form.addEventListener('submit', this.handleSubmit.bind(this));
15
+ constructor(context) {
16
+ this.context = context;
17
+ this.input = context.querySelector(`.${classInput}`);
18
+ this.search = context.querySelector(`.${classSearch}`);
19
+ this.addressReplaceChars = [','];
20
+ this.sanitisedQuerySplitNumsChars = true;
21
+ this.form = context.closest('form');
22
+ this.container = context.querySelector(`.${classInputContainer}`);
23
+ this.errorMessage = this.container.getAttribute('data-error-message');
24
+ this.groupCount = this.container.getAttribute('data-group-count');
25
+ this.authorizationToken = this.container.getAttribute('data-authorization-token');
26
+ this.uprn = context.querySelector(`.${classInputUPRN}`);
27
+
28
+ // State
29
+ this.fetch = null;
30
+ this.totalResults = 0;
31
+ this.errored = false;
32
+ this.isEditable = context.querySelector(`.${classNotEditable}`) ? false : true;
33
+ this.isMandatory = context.querySelector(`.${classMandatory}`) ? true : false;
34
+ this.addressSelected = false;
35
+ this.groupQuery = '';
36
+ this.selectedAddressValue = '';
37
+
38
+ // Bind event listeners
39
+ if (this.form) {
40
+ this.form.addEventListener('submit', this.handleSubmit.bind(this));
41
+ }
42
+
43
+ // Initialise address setter
44
+ if (this.isEditable) {
45
+ this.addressSetter = new AddressSetter(context);
46
+ }
47
+
48
+ // Initialise autosuggest
49
+ this.autosuggest = new AutosuggestUI({
50
+ context: this.container,
51
+ onSelect: this.onAddressSelect.bind(this),
52
+ lang: this.lang,
53
+ suggestionFunction: this.suggestAddresses.bind(this),
54
+ sanitisedQueryReplaceChars: this.addressReplaceChars,
55
+ sanitisedQuerySplitNumsChars: this.sanitisedQuerySplitNumsChars,
56
+ suggestOnBoot: true,
57
+ handleUpdate: true,
58
+ });
59
+
60
+ // Set up AIMS api variables and auth
61
+ this.APIDomain = this.container.getAttribute('data-api-domain');
62
+ this.lookupURL = `${this.APIDomain}/addresses/eq?input=`;
63
+ this.lookupGroupURL = `${this.APIDomain}/addresses/eq/bucket?`;
64
+ this.retrieveURL = `${this.APIDomain}/addresses/eq/uprn/`;
65
+
66
+ // Query string options
67
+ this.manualQueryParams = this.container.getAttribute('data-query-params');
68
+ this.regionCode = this.container.getAttribute('data-options-region-code');
69
+ this.epoch = this.container.getAttribute('data-options-one-year-ago');
70
+ this.classificationFilter = this.container.getAttribute('data-options-address-type');
71
+
72
+ // Check API status
73
+ this.checkAPIStatus();
41
74
  }
42
75
 
43
- // Initialise address setter
44
- if (this.isEditable) {
45
- this.addressSetter = new AddressSetter(context);
76
+ get lang() {
77
+ return document.documentElement.getAttribute('lang').toLowerCase();
46
78
  }
47
79
 
48
- // Initialise autosuggest
49
- this.autosuggest = new AutosuggestUI({
50
- context: this.container,
51
- onSelect: this.onAddressSelect.bind(this),
52
- lang: this.lang,
53
- suggestionFunction: this.suggestAddresses.bind(this),
54
- sanitisedQueryReplaceChars: this.addressReplaceChars,
55
- sanitisedQuerySplitNumsChars: this.sanitisedQuerySplitNumsChars,
56
- suggestOnBoot: true,
57
- handleUpdate: true,
58
- });
59
-
60
- // Set up AIMS api variables and auth
61
- this.APIDomain = this.container.getAttribute('data-api-domain');
62
- this.lookupURL = `${this.APIDomain}/addresses/eq?input=`;
63
- this.lookupGroupURL = `${this.APIDomain}/addresses/eq/bucket?`;
64
- this.retrieveURL = `${this.APIDomain}/addresses/eq/uprn/`;
65
-
66
- // Query string options
67
- this.manualQueryParams = this.container.getAttribute('data-query-params');
68
- this.regionCode = this.container.getAttribute('data-options-region-code');
69
- this.epoch = this.container.getAttribute('data-options-one-year-ago');
70
- this.classificationFilter = this.container.getAttribute('data-options-address-type');
71
-
72
- // Check API status
73
- this.checkAPIStatus();
74
- }
75
-
76
- get lang() {
77
- return document.documentElement.getAttribute('lang').toLowerCase();
78
- }
79
-
80
- async checkAPIStatus() {
81
- this.fetch = abortableFetch(this.lookupURL + 'cf142&limit=10', {
82
- method: 'GET',
83
- headers: this.setAuthorization(this.authorizationToken),
84
- });
85
- try {
86
- const response = await this.fetch.send();
87
- const status = (await response.json()).status.code;
88
- if (status > 400) {
89
- if (this.isEditable) {
90
- this.handleAPIError();
91
- } else {
92
- this.autosuggest.handleNoResults(status);
80
+ async checkAPIStatus() {
81
+ this.fetch = abortableFetch(this.lookupURL + 'cf142&limit=10', {
82
+ method: 'GET',
83
+ headers: this.setAuthorization(this.authorizationToken),
84
+ });
85
+ try {
86
+ const response = await this.fetch.send();
87
+ const status = (await response.json()).status.code;
88
+ if (status > 400) {
89
+ if (this.isEditable) {
90
+ this.handleAPIError();
91
+ } else {
92
+ this.autosuggest.handleNoResults(status);
93
+ }
94
+ }
95
+ } catch (error) {
96
+ if (this.isEditable) {
97
+ this.handleAPIError();
98
+ } else {
99
+ this.autosuggest.handleNoResults(status);
100
+ }
93
101
  }
94
- }
95
- } catch (error) {
96
- if (this.isEditable) {
97
- this.handleAPIError();
98
- } else {
99
- this.autosuggest.handleNoResults(status);
100
- }
101
102
  }
102
- }
103
103
 
104
- async suggestAddresses(query, [], grouped) {
105
- if (this.fetch && this.fetch.status !== 'DONE') {
106
- this.fetch.abort();
104
+ async suggestAddresses(query, [], grouped) {
105
+ if (this.fetch && this.fetch.status !== 'DONE') {
106
+ this.fetch.abort();
107
+ }
108
+
109
+ return await this.findAddress(query, grouped);
107
110
  }
108
111
 
109
- return await this.findAddress(query, grouped);
110
- }
112
+ async findAddress(text, grouped) {
113
+ let queryURL, fullQueryURL;
114
+
115
+ if (this.manualQueryParams) {
116
+ const manualQueryParams = this.container.getAttribute('data-query-params');
117
+ fullQueryURL = this.lookupURL + text + manualQueryParams;
118
+ } else {
119
+ const fullPostcodeQuery = this.testFullPostcodeQuery(text);
120
+ let limit = fullPostcodeQuery ? 100 : 10;
121
+
122
+ queryURL = grouped ? this.lookupGroupURL + this.groupQuery : this.lookupURL + text + '&limit=' + limit;
111
123
 
112
- async findAddress(text, grouped) {
113
- let queryURL, fullQueryURL;
124
+ fullQueryURL = this.generateURLParams(queryURL);
125
+ if (fullPostcodeQuery && grouped !== false) {
126
+ fullQueryURL = fullQueryURL + '&groupfullpostcodes=combo';
127
+ }
128
+ }
129
+
130
+ this.fetch = abortableFetch(fullQueryURL, {
131
+ method: 'GET',
132
+ headers: this.setAuthorization(this.authorizationToken),
133
+ });
134
+ const data = await this.fetch.send();
135
+ const response = await data.json();
136
+ const status = response.status.code;
137
+ const addresses = response.response;
138
+ const limit = response.response.limit;
139
+ const results = await this.mapFindResults(addresses, limit, status);
140
+ return results;
141
+ }
114
142
 
115
- if (this.manualQueryParams) {
116
- const manualQueryParams = this.container.getAttribute('data-query-params');
117
- fullQueryURL = this.lookupURL + text + manualQueryParams;
118
- } else {
119
- const fullPostcodeQuery = this.testFullPostcodeQuery(text);
120
- let limit = fullPostcodeQuery ? 100 : 10;
143
+ async mapFindResults(results, limit, status) {
144
+ let mappedResults, currentResults;
145
+ const total = results.total;
146
+
147
+ if (results.partpostcode || (results.groupfullpostcodes === 'combo' && results.postcodes && results.postcodes.length > 1)) {
148
+ mappedResults = await this.postcodeGroupsMapping(results);
149
+ currentResults = mappedResults;
150
+ } else if (results.addresses) {
151
+ mappedResults = await this.addressMapping(results);
152
+ currentResults = mappedResults ? mappedResults.results.sort() : null;
153
+ } else {
154
+ currentResults = results.addresses;
155
+ }
156
+ return {
157
+ results: currentResults,
158
+ totalResults: total,
159
+ limit: limit,
160
+ status: status,
161
+ };
162
+ }
121
163
 
122
- queryURL = grouped ? this.lookupGroupURL + this.groupQuery : this.lookupURL + text + '&limit=' + limit;
164
+ async addressMapping(results) {
165
+ let updatedResults;
166
+ const addresses = results.addresses;
167
+ if (addresses[0]) {
168
+ if (addresses[0] && addresses[0].bestMatchAddress) {
169
+ updatedResults = addresses.map(({ uprn, bestMatchAddress, bestMatchAddressType }) => ({
170
+ uprn: uprn,
171
+ address: bestMatchAddress,
172
+ type: bestMatchAddressType,
173
+ }));
174
+ } else if (addresses[0] && addresses[0].formattedAddress) {
175
+ updatedResults = addresses.map(({ uprn, formattedAddress, addressType }) => ({
176
+ uprn: uprn,
177
+ address: formattedAddress,
178
+ type: addressType,
179
+ }));
180
+ }
181
+
182
+ results = updatedResults.map(({ uprn, address, type }) => {
183
+ const sanitisedText = sanitiseAutosuggestText(address, this.addressReplaceChars);
184
+ return {
185
+ [this.lang]: address,
186
+ sanitisedText,
187
+ uprn,
188
+ type,
189
+ };
190
+ });
191
+ return {
192
+ results: results,
193
+ limit: results.limit,
194
+ };
195
+ }
196
+ }
123
197
 
124
- fullQueryURL = this.generateURLParams(queryURL);
125
- if (fullPostcodeQuery && grouped !== false) {
126
- fullQueryURL = fullQueryURL + '&groupfullpostcodes=combo';
127
- }
198
+ async postcodeGroupsMapping(results) {
199
+ const postcodeGroups = results.postcodes;
200
+ let groups = postcodeGroups.map(({ postcode, postTown, streetName, townName, addressCount, firstUprn }) => {
201
+ return {
202
+ [this.lang]:
203
+ streetName +
204
+ ', ' +
205
+ (townName === postTown ? postTown : townName + ', ' + postTown) +
206
+ ', ' +
207
+ postcode +
208
+ ' (<span class="ons-autosuggest__group">' +
209
+ this.groupCount.replace(`{n}`, addressCount) +
210
+ '</span>)',
211
+ postcode,
212
+ streetName,
213
+ townName,
214
+ postTown,
215
+ firstUprn,
216
+ addressCount,
217
+ };
218
+ });
219
+ const newGroups = await this.replaceSingleCountAddresses(groups);
220
+ return newGroups;
128
221
  }
129
222
 
130
- this.fetch = abortableFetch(fullQueryURL, {
131
- method: 'GET',
132
- headers: this.setAuthorization(this.authorizationToken),
133
- });
134
- const data = await this.fetch.send();
135
- const response = await data.json();
136
- const status = response.status.code;
137
- const addresses = response.response;
138
- const limit = response.response.limit;
139
- const results = await this.mapFindResults(addresses, limit, status);
140
- return results;
141
- }
142
-
143
- async mapFindResults(results, limit, status) {
144
- let mappedResults, currentResults;
145
- const total = results.total;
146
-
147
- if (results.partpostcode || (results.groupfullpostcodes === 'combo' && results.postcodes && results.postcodes.length > 1)) {
148
- mappedResults = await this.postcodeGroupsMapping(results);
149
- currentResults = mappedResults;
150
- } else if (results.addresses) {
151
- mappedResults = await this.addressMapping(results);
152
- currentResults = mappedResults ? mappedResults.results.sort() : null;
153
- } else {
154
- currentResults = results.addresses;
223
+ async replaceSingleCountAddresses(items) {
224
+ for (const item of items) {
225
+ if (item.addressCount === 1 && item.firstUprn !== 0) {
226
+ let result = await this.createAddressObject(item.firstUprn);
227
+ const matchingItem = items.findIndex((x) => x.firstUprn == result.uprn);
228
+ items[matchingItem] = result;
229
+ }
230
+ }
231
+ return items;
155
232
  }
156
- return {
157
- results: currentResults,
158
- totalResults: total,
159
- limit: limit,
160
- status: status,
161
- };
162
- }
163
-
164
- async addressMapping(results) {
165
- let updatedResults;
166
- const addresses = results.addresses;
167
- if (addresses[0]) {
168
- if (addresses[0] && addresses[0].bestMatchAddress) {
169
- updatedResults = addresses.map(({ uprn, bestMatchAddress, bestMatchAddressType }) => ({
170
- uprn: uprn,
171
- address: bestMatchAddress,
172
- type: bestMatchAddressType,
173
- }));
174
- } else if (addresses[0] && addresses[0].formattedAddress) {
175
- updatedResults = addresses.map(({ uprn, formattedAddress, addressType }) => ({
176
- uprn: uprn,
177
- address: formattedAddress,
178
- type: addressType,
179
- }));
180
- }
181
-
182
- results = updatedResults.map(({ uprn, address, type }) => {
233
+
234
+ async createAddressObject(id) {
235
+ const data = await this.retrieveAddress(id);
236
+ const address = data.response.address.formattedAddress;
237
+ const uprn = data.response.address.uprn;
183
238
  const sanitisedText = sanitiseAutosuggestText(address, this.addressReplaceChars);
184
239
  return {
185
- [this.lang]: address,
186
- sanitisedText,
187
- uprn,
188
- type,
240
+ [this.lang]: address,
241
+ sanitisedText,
242
+ uprn,
189
243
  };
190
- });
191
- return {
192
- results: results,
193
- limit: results.limit,
194
- };
195
- }
196
- }
197
-
198
- async postcodeGroupsMapping(results) {
199
- const postcodeGroups = results.postcodes;
200
- let groups = postcodeGroups.map(({ postcode, postTown, streetName, townName, addressCount, firstUprn }) => {
201
- return {
202
- [this.lang]:
203
- streetName +
204
- ', ' +
205
- (townName === postTown ? postTown : townName + ', ' + postTown) +
206
- ', ' +
207
- postcode +
208
- ' (<span class="ons-autosuggest__group">' +
209
- this.groupCount.replace(`{n}`, addressCount) +
210
- '</span>)',
211
- postcode,
212
- streetName,
213
- townName,
214
- postTown,
215
- firstUprn,
216
- addressCount,
217
- };
218
- });
219
- const newGroups = await this.replaceSingleCountAddresses(groups);
220
- return newGroups;
221
- }
222
-
223
- async replaceSingleCountAddresses(items) {
224
- for (const item of items) {
225
- if (item.addressCount === 1 && item.firstUprn !== 0) {
226
- let result = await this.createAddressObject(item.firstUprn);
227
- const matchingItem = items.findIndex((x) => x.firstUprn == result.uprn);
228
- items[matchingItem] = result;
229
- }
230
244
  }
231
- return items;
232
- }
233
-
234
- async createAddressObject(id) {
235
- const data = await this.retrieveAddress(id);
236
- const address = data.response.address.formattedAddress;
237
- const uprn = data.response.address.uprn;
238
- const sanitisedText = sanitiseAutosuggestText(address, this.addressReplaceChars);
239
- return {
240
- [this.lang]: address,
241
- sanitisedText,
242
- uprn,
243
- };
244
- }
245
-
246
- testFullPostcodeQuery(input) {
247
- const fullPostcodeRegex =
248
- /\b((?:(?:gir)|(?:[a-pr-uwyz])(?:(?:[0-9](?:[a-hjkpstuw]|[0-9])?)|(?:[a-hk-y][0-9](?:[0-9]|[abehmnprv-y])?)))) ?([0-9][abd-hjlnp-uw-z]{2})\b/i;
249
- const testFullPostcode = fullPostcodeRegex.test(input);
250
- if (testFullPostcode) {
251
- return true;
245
+
246
+ testFullPostcodeQuery(input) {
247
+ const fullPostcodeRegex =
248
+ /\b((?:(?:gir)|(?:[a-pr-uwyz])(?:(?:[0-9](?:[a-hjkpstuw]|[0-9])?)|(?:[a-hk-y][0-9](?:[0-9]|[abehmnprv-y])?)))) ?([0-9][abd-hjlnp-uw-z]{2})\b/i;
249
+ const testFullPostcode = fullPostcodeRegex.test(input);
250
+ if (testFullPostcode) {
251
+ return true;
252
+ }
252
253
  }
253
- }
254
254
 
255
- async retrieveAddress(id, type = null) {
256
- let retrieveUrl = this.retrieveURL + id;
255
+ async retrieveAddress(id, type = null) {
256
+ let retrieveUrl = this.retrieveURL + id;
257
257
 
258
- const fullUPRNURL = this.generateURLParams(retrieveUrl, id, type);
258
+ const fullUPRNURL = this.generateURLParams(retrieveUrl, id, type);
259
259
 
260
- this.fetch = abortableFetch(fullUPRNURL, {
261
- method: 'GET',
262
- headers: this.setAuthorization(this.authorizationToken),
263
- });
260
+ this.fetch = abortableFetch(fullUPRNURL, {
261
+ method: 'GET',
262
+ headers: this.setAuthorization(this.authorizationToken),
263
+ });
264
264
 
265
- const response = await this.fetch.send();
266
- const data = await response.json();
267
- return data;
268
- }
265
+ const response = await this.fetch.send();
266
+ const data = await response.json();
267
+ return data;
268
+ }
269
269
 
270
- async onAddressSelect(selectedResult) {
271
- if (selectedResult.uprn) {
272
- try {
273
- const data = await this.retrieveAddress(selectedResult.uprn, selectedResult.type);
274
- if (this.isEditable) {
275
- if (data.status.code >= 403) {
276
- this.autosuggest.handleNoResults(403);
277
- } else {
278
- this.addressSetter.setAddress(this.createAddressLines(data));
279
- this.addressSelected = true;
280
- }
281
- } else {
282
- this.selectedAddressValue = selectedResult.displayText;
283
- this.autosuggest.input.value = selectedResult.displayText;
284
- this.uprn.value = selectedResult.uprn;
285
- this.addressSelected = true;
286
- }
287
- } catch (error) {
288
- if (this.isEditable) {
289
- this.handleAPIError();
290
- } else {
291
- this.autosuggest.handleNoResults(403);
270
+ async onAddressSelect(selectedResult) {
271
+ if (selectedResult.uprn) {
272
+ try {
273
+ const data = await this.retrieveAddress(selectedResult.uprn, selectedResult.type);
274
+ if (this.isEditable) {
275
+ if (data.status.code >= 403) {
276
+ this.autosuggest.handleNoResults(403);
277
+ } else {
278
+ this.addressSetter.setAddress(this.createAddressLines(data));
279
+ this.addressSelected = true;
280
+ }
281
+ } else {
282
+ this.selectedAddressValue = selectedResult.displayText;
283
+ this.autosuggest.input.value = selectedResult.displayText;
284
+ this.uprn.value = selectedResult.uprn;
285
+ this.addressSelected = true;
286
+ }
287
+ } catch (error) {
288
+ if (this.isEditable) {
289
+ this.handleAPIError();
290
+ } else {
291
+ this.autosuggest.handleNoResults(403);
292
+ }
293
+ throw error;
294
+ }
295
+ } else if (selectedResult.postcode) {
296
+ this.autosuggest.input.value =
297
+ selectedResult.streetName +
298
+ ', ' +
299
+ (selectedResult.townName === selectedResult.postTown
300
+ ? selectedResult.postTown
301
+ : selectedResult.townName + ', ' + selectedResult.postTown) +
302
+ ', ' +
303
+ selectedResult.postcode;
304
+ this.autosuggest.input.focus();
305
+ this.groupQuery =
306
+ 'postcode=' + selectedResult.postcode + '&streetname=' + selectedResult.streetName + '&townname=' + selectedResult.townName;
307
+ this.autosuggest.handleChange(true);
292
308
  }
293
- throw error;
294
- }
295
- } else if (selectedResult.postcode) {
296
- this.autosuggest.input.value =
297
- selectedResult.streetName +
298
- ', ' +
299
- (selectedResult.townName === selectedResult.postTown
300
- ? selectedResult.postTown
301
- : selectedResult.townName + ', ' + selectedResult.postTown) +
302
- ', ' +
303
- selectedResult.postcode;
304
- this.autosuggest.input.focus();
305
- this.groupQuery =
306
- 'postcode=' + selectedResult.postcode + '&streetname=' + selectedResult.streetName + '&townname=' + selectedResult.townName;
307
- this.autosuggest.handleChange(true);
308
309
  }
309
- }
310
-
311
- createAddressLines(data) {
312
- const values = data.response.address;
313
- return {
314
- addressLine1: values.addressLine1,
315
- addressLine2: values.addressLine2,
316
- addressLine3: values.addressLine3,
317
- townName: values.townName,
318
- postcode: values.postcode,
319
- uprn: values.uprn,
320
- };
321
- }
322
-
323
- generateURLParams(baseURL, uprn, type) {
324
- let fullURL = baseURL,
325
- addressType;
326
-
327
- const classificationFilterParam = '&classificationfilter=',
328
- eboostParam = '&eboost=10',
329
- wboostParam = '&wboost=10',
330
- nionlyParam = '&eboost=0&sboost=0&wboost=0',
331
- niboostParam = '&nboost=10',
332
- favourwelshParam = '&favourwelsh=true',
333
- addresstypeParam = '?addresstype=',
334
- epochParam = '&epoch=75';
335
-
336
- if (type) {
337
- addressType = type.toLowerCase();
338
- } else {
339
- addressType = 'paf';
310
+
311
+ createAddressLines(data) {
312
+ const values = data.response.address;
313
+ return {
314
+ addressLine1: values.addressLine1,
315
+ addressLine2: values.addressLine2,
316
+ addressLine3: values.addressLine3,
317
+ townName: values.townName,
318
+ postcode: values.postcode,
319
+ uprn: values.uprn,
320
+ };
340
321
  }
341
322
 
342
- if (!uprn) {
343
- if (this.classificationFilter && this.classificationFilter !== 'residential') {
344
- fullURL = fullURL + classificationFilterParam + this.classificationFilter;
345
- }
323
+ generateURLParams(baseURL, uprn, type) {
324
+ let fullURL = baseURL,
325
+ addressType;
326
+
327
+ const classificationFilterParam = '&classificationfilter=',
328
+ eboostParam = '&eboost=10',
329
+ wboostParam = '&wboost=10',
330
+ nionlyParam = '&eboost=0&sboost=0&wboost=0',
331
+ niboostParam = '&nboost=10',
332
+ favourwelshParam = '&favourwelsh=true',
333
+ addresstypeParam = '?addresstype=',
334
+ epochParam = '&epoch=75';
335
+
336
+ if (type) {
337
+ addressType = type.toLowerCase();
338
+ } else {
339
+ addressType = 'paf';
340
+ }
346
341
 
347
- if (this.classificationFilter === 'workplace') {
348
- if (this.regionCode === 'gb-eng') {
349
- fullURL = fullURL + eboostParam;
350
- } else if (this.regionCode === 'gb-wls') {
351
- fullURL = fullURL + wboostParam;
342
+ if (!uprn) {
343
+ if (this.classificationFilter && this.classificationFilter !== 'residential') {
344
+ fullURL = fullURL + classificationFilterParam + this.classificationFilter;
345
+ }
346
+
347
+ if (this.classificationFilter === 'workplace') {
348
+ if (this.regionCode === 'gb-eng') {
349
+ fullURL = fullURL + eboostParam;
350
+ } else if (this.regionCode === 'gb-wls') {
351
+ fullURL = fullURL + wboostParam;
352
+ }
353
+ }
354
+
355
+ if (this.regionCode === 'gb-nir') {
356
+ if (this.classificationFilter === 'educational') {
357
+ fullURL = fullURL + nionlyParam;
358
+ } else {
359
+ fullURL = fullURL + niboostParam;
360
+ }
361
+ }
362
+
363
+ if (this.lang === 'cy') {
364
+ fullURL = fullURL + favourwelshParam;
365
+ }
366
+ } else if (uprn) {
367
+ fullURL = baseURL + addresstypeParam + addressType;
352
368
  }
353
- }
354
369
 
355
- if (this.regionCode === 'gb-nir') {
356
- if (this.classificationFilter === 'educational') {
357
- fullURL = fullURL + nionlyParam;
358
- } else {
359
- fullURL = fullURL + niboostParam;
370
+ if (this.epoch === 'true') {
371
+ fullURL = fullURL + epochParam;
360
372
  }
361
- }
362
373
 
363
- if (this.lang === 'cy') {
364
- fullURL = fullURL + favourwelshParam;
365
- }
366
- } else if (uprn) {
367
- fullURL = baseURL + addresstypeParam + addressType;
374
+ return fullURL;
368
375
  }
369
376
 
370
- if (this.epoch === 'true') {
371
- fullURL = fullURL + epochParam;
377
+ handleAPIError() {
378
+ this.addressSetter.setManualMode(true, false);
379
+ const searchBtn = document.querySelector('.ons-js-address-search-btn');
380
+ searchBtn.classList.add('ons-u-d-no');
372
381
  }
373
382
 
374
- return fullURL;
375
- }
376
-
377
- handleAPIError() {
378
- this.addressSetter.setManualMode(true, false);
379
- const searchBtn = document.querySelector('.ons-js-address-search-btn');
380
- searchBtn.classList.add('ons-u-d-no');
381
- }
382
-
383
- handleSubmit(event) {
384
- let isManualMode = false;
383
+ handleSubmit(event) {
384
+ let isManualMode = false;
385
385
 
386
- if (this.isEditable) {
387
- isManualMode = this.addressSetter.manualMode;
388
- this.addressSetter.checkManualInputsValues(false);
386
+ if (this.isEditable) {
387
+ isManualMode = this.addressSetter.manualMode;
388
+ this.addressSetter.checkManualInputsValues(false);
389
+ }
390
+ if (this.isMandatory && !isManualMode) {
391
+ if (
392
+ !this.addressSelected ||
393
+ this.input.value === '' ||
394
+ (!this.isEditable && this.checkValueHasBeenUpdated(this.selectedAddressValue))
395
+ ) {
396
+ event.preventDefault();
397
+ this.handleError = new AddressError(this.context);
398
+ this.handleError.showErrorPanel();
399
+ this.autosuggest.setAriaStatus(this.errorMessage);
400
+ }
401
+ }
389
402
  }
390
- if (this.isMandatory && !isManualMode) {
391
- if (
392
- !this.addressSelected ||
393
- this.input.value === '' ||
394
- (!this.isEditable && this.checkValueHasBeenUpdated(this.selectedAddressValue))
395
- ) {
396
- event.preventDefault();
397
- this.handleError = new AddressError(this.context);
398
- this.handleError.showErrorPanel();
399
- this.autosuggest.setAriaStatus(this.errorMessage);
400
- }
403
+
404
+ checkValueHasBeenUpdated(value) {
405
+ if (value !== this.input.value) {
406
+ return true;
407
+ }
401
408
  }
402
- }
403
409
 
404
- checkValueHasBeenUpdated(value) {
405
- if (value !== this.input.value) {
406
- return true;
410
+ setAuthorization(token) {
411
+ this.authorization = `Bearer ${token}`;
412
+ return new Headers({
413
+ Authorization: this.authorization,
414
+ });
407
415
  }
408
- }
409
-
410
- setAuthorization(token) {
411
- this.authorization = `Bearer ${token}`;
412
- return new Headers({
413
- Authorization: this.authorization,
414
- });
415
- }
416
416
  }