@ministryofjustice/frontend 4.0.1 → 5.0.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 (244) hide show
  1. package/govuk-prototype-kit.config.json +19 -4
  2. package/moj/_base.scss +2 -0
  3. package/moj/_base.scss.map +1 -0
  4. package/moj/all.bundle.js +2523 -0
  5. package/moj/all.bundle.js.map +1 -0
  6. package/moj/all.bundle.mjs +2502 -0
  7. package/moj/all.bundle.mjs.map +1 -0
  8. package/moj/all.mjs +59 -69
  9. package/moj/all.mjs.map +1 -1
  10. package/moj/all.scss +2 -0
  11. package/moj/all.scss.map +1 -0
  12. package/moj/components/_all.scss +2 -0
  13. package/moj/components/_all.scss.map +1 -0
  14. package/moj/components/action-bar/_action-bar.scss +2 -0
  15. package/moj/components/action-bar/_action-bar.scss.map +1 -0
  16. package/moj/components/add-another/_add-another.scss +2 -0
  17. package/moj/components/add-another/_add-another.scss.map +1 -0
  18. package/moj/components/add-another/add-another.bundle.js +128 -0
  19. package/moj/components/add-another/add-another.bundle.js.map +1 -0
  20. package/moj/components/add-another/add-another.bundle.mjs +120 -0
  21. package/moj/components/add-another/add-another.bundle.mjs.map +1 -0
  22. package/moj/components/add-another/add-another.mjs +112 -99
  23. package/moj/components/add-another/add-another.mjs.map +1 -1
  24. package/moj/components/alert/_alert.scss +4 -0
  25. package/moj/components/alert/_alert.scss.map +1 -0
  26. package/moj/components/alert/alert.bundle.js +330 -0
  27. package/moj/components/alert/alert.bundle.js.map +1 -0
  28. package/moj/components/alert/alert.bundle.mjs +322 -0
  29. package/moj/components/alert/alert.bundle.mjs.map +1 -0
  30. package/moj/components/alert/alert.mjs +181 -217
  31. package/moj/components/alert/alert.mjs.map +1 -1
  32. package/moj/components/alert/{alert.spec.helper.js → alert.spec.helper.bundle.js} +1 -1
  33. package/moj/components/alert/alert.spec.helper.bundle.js.map +1 -0
  34. package/moj/components/alert/alert.spec.helper.bundle.mjs +67 -0
  35. package/moj/components/alert/alert.spec.helper.bundle.mjs.map +1 -0
  36. package/moj/components/alert/alert.spec.helper.mjs.map +1 -1
  37. package/moj/components/badge/_badge.scss +2 -0
  38. package/moj/components/badge/_badge.scss.map +1 -0
  39. package/moj/components/banner/_banner.scss +2 -0
  40. package/moj/components/banner/_banner.scss.map +1 -0
  41. package/moj/components/button-menu/README.md +10 -6
  42. package/moj/components/button-menu/_button-menu.scss +4 -1
  43. package/moj/components/button-menu/_button-menu.scss.map +1 -0
  44. package/moj/components/button-menu/button-menu.bundle.js +299 -0
  45. package/moj/components/button-menu/button-menu.bundle.js.map +1 -0
  46. package/moj/components/button-menu/{button-menu.js → button-menu.bundle.mjs} +74 -121
  47. package/moj/components/button-menu/button-menu.bundle.mjs.map +1 -0
  48. package/moj/components/button-menu/button-menu.mjs +246 -285
  49. package/moj/components/button-menu/button-menu.mjs.map +1 -1
  50. package/moj/components/cookie-banner/_cookie-banner.scss +2 -0
  51. package/moj/components/cookie-banner/_cookie-banner.scss.map +1 -0
  52. package/moj/components/currency-input/_currency-input.scss +2 -0
  53. package/moj/components/currency-input/_currency-input.scss.map +1 -0
  54. package/moj/components/date-picker/_date-picker.scss +2 -0
  55. package/moj/components/date-picker/_date-picker.scss.map +1 -0
  56. package/moj/components/date-picker/date-picker.bundle.js +784 -0
  57. package/moj/components/date-picker/date-picker.bundle.js.map +1 -0
  58. package/moj/components/date-picker/{date-picker.js → date-picker.bundle.mjs} +245 -439
  59. package/moj/components/date-picker/date-picker.bundle.mjs.map +1 -0
  60. package/moj/components/date-picker/date-picker.mjs +654 -840
  61. package/moj/components/date-picker/date-picker.mjs.map +1 -1
  62. package/moj/components/filter/_filter.scss +2 -0
  63. package/moj/components/filter/_filter.scss.map +1 -0
  64. package/moj/components/filter-toggle-button/filter-toggle-button.bundle.js +96 -0
  65. package/moj/components/filter-toggle-button/filter-toggle-button.bundle.js.map +1 -0
  66. package/moj/components/filter-toggle-button/filter-toggle-button.bundle.mjs +88 -0
  67. package/moj/components/filter-toggle-button/filter-toggle-button.bundle.mjs.map +1 -0
  68. package/moj/components/filter-toggle-button/filter-toggle-button.mjs +78 -84
  69. package/moj/components/filter-toggle-button/filter-toggle-button.mjs.map +1 -1
  70. package/moj/components/form-validator/form-validator.bundle.js +198 -0
  71. package/moj/components/form-validator/form-validator.bundle.js.map +1 -0
  72. package/moj/components/form-validator/form-validator.bundle.mjs +190 -0
  73. package/moj/components/form-validator/form-validator.bundle.mjs.map +1 -0
  74. package/moj/components/form-validator/form-validator.mjs +149 -152
  75. package/moj/components/form-validator/form-validator.mjs.map +1 -1
  76. package/moj/components/header/_header.scss +2 -0
  77. package/moj/components/header/_header.scss.map +1 -0
  78. package/moj/components/identity-bar/_identity-bar.scss +2 -0
  79. package/moj/components/identity-bar/_identity-bar.scss.map +1 -0
  80. package/moj/components/interruption-card/_interruption-card.scss +2 -0
  81. package/moj/components/interruption-card/_interruption-card.scss.map +1 -0
  82. package/moj/components/messages/_messages.scss +2 -0
  83. package/moj/components/messages/_messages.scss.map +1 -0
  84. package/moj/components/multi-file-upload/_multi-file-upload.scss +2 -0
  85. package/moj/components/multi-file-upload/_multi-file-upload.scss.map +1 -0
  86. package/moj/components/multi-file-upload/multi-file-upload.bundle.js +223 -0
  87. package/moj/components/multi-file-upload/multi-file-upload.bundle.js.map +1 -0
  88. package/moj/components/multi-file-upload/multi-file-upload.bundle.mjs +215 -0
  89. package/moj/components/multi-file-upload/multi-file-upload.bundle.mjs.map +1 -0
  90. package/moj/components/multi-file-upload/multi-file-upload.mjs +193 -209
  91. package/moj/components/multi-file-upload/multi-file-upload.mjs.map +1 -1
  92. package/moj/components/multi-select/_multi-select.scss +2 -0
  93. package/moj/components/multi-select/_multi-select.scss.map +1 -0
  94. package/moj/components/multi-select/multi-select.bundle.js +78 -0
  95. package/moj/components/multi-select/multi-select.bundle.js.map +1 -0
  96. package/moj/components/multi-select/multi-select.bundle.mjs +70 -0
  97. package/moj/components/multi-select/multi-select.bundle.mjs.map +1 -0
  98. package/moj/components/multi-select/multi-select.mjs +59 -67
  99. package/moj/components/multi-select/multi-select.mjs.map +1 -1
  100. package/moj/components/notification-badge/_notification-badge.scss +2 -0
  101. package/moj/components/notification-badge/_notification-badge.scss.map +1 -0
  102. package/moj/components/organisation-switcher/_organisation-switcher.scss +2 -0
  103. package/moj/components/organisation-switcher/_organisation-switcher.scss.map +1 -0
  104. package/moj/components/page-header-actions/_page-header-actions.scss +2 -0
  105. package/moj/components/page-header-actions/_page-header-actions.scss.map +1 -0
  106. package/moj/components/pagination/_pagination.scss +2 -2
  107. package/moj/components/pagination/_pagination.scss.map +1 -0
  108. package/moj/components/password-reveal/_password-reveal.scss +2 -0
  109. package/moj/components/password-reveal/_password-reveal.scss.map +1 -0
  110. package/moj/components/password-reveal/password-reveal.bundle.js +49 -0
  111. package/moj/components/password-reveal/password-reveal.bundle.js.map +1 -0
  112. package/moj/components/password-reveal/password-reveal.bundle.mjs +41 -0
  113. package/moj/components/password-reveal/password-reveal.bundle.mjs.map +1 -0
  114. package/moj/components/password-reveal/password-reveal.mjs +36 -31
  115. package/moj/components/password-reveal/password-reveal.mjs.map +1 -1
  116. package/moj/components/primary-navigation/_primary-navigation.scss +2 -0
  117. package/moj/components/primary-navigation/_primary-navigation.scss.map +1 -0
  118. package/moj/components/progress-bar/_progress-bar.scss +2 -0
  119. package/moj/components/progress-bar/_progress-bar.scss.map +1 -0
  120. package/moj/components/rich-text-editor/README.md +15 -9
  121. package/moj/components/rich-text-editor/_rich-text-editor.scss +2 -0
  122. package/moj/components/rich-text-editor/_rich-text-editor.scss.map +1 -0
  123. package/moj/components/rich-text-editor/rich-text-editor.bundle.js +145 -0
  124. package/moj/components/rich-text-editor/rich-text-editor.bundle.js.map +1 -0
  125. package/moj/components/rich-text-editor/rich-text-editor.bundle.mjs +137 -0
  126. package/moj/components/rich-text-editor/rich-text-editor.bundle.mjs.map +1 -0
  127. package/moj/components/rich-text-editor/rich-text-editor.mjs +124 -145
  128. package/moj/components/rich-text-editor/rich-text-editor.mjs.map +1 -1
  129. package/moj/components/search/_search.scss +2 -0
  130. package/moj/components/search/_search.scss.map +1 -0
  131. package/moj/components/search-toggle/{search-toggle.scss → _search-toggle.scss} +2 -0
  132. package/moj/components/search-toggle/_search-toggle.scss.map +1 -0
  133. package/moj/components/search-toggle/search-toggle.bundle.js +54 -0
  134. package/moj/components/search-toggle/search-toggle.bundle.js.map +1 -0
  135. package/moj/components/search-toggle/search-toggle.bundle.mjs +46 -0
  136. package/moj/components/search-toggle/search-toggle.bundle.mjs.map +1 -0
  137. package/moj/components/search-toggle/search-toggle.mjs +40 -49
  138. package/moj/components/search-toggle/search-toggle.mjs.map +1 -1
  139. package/moj/components/side-navigation/_side-navigation.scss +2 -0
  140. package/moj/components/side-navigation/_side-navigation.scss.map +1 -0
  141. package/moj/components/sortable-table/_sortable-table.scss +2 -2
  142. package/moj/components/sortable-table/_sortable-table.scss.map +1 -0
  143. package/moj/components/sortable-table/sortable-table.bundle.js +134 -0
  144. package/moj/components/sortable-table/sortable-table.bundle.js.map +1 -0
  145. package/moj/components/sortable-table/sortable-table.bundle.mjs +126 -0
  146. package/moj/components/sortable-table/sortable-table.bundle.mjs.map +1 -0
  147. package/moj/components/sortable-table/sortable-table.mjs +117 -130
  148. package/moj/components/sortable-table/sortable-table.mjs.map +1 -1
  149. package/moj/components/sub-navigation/_sub-navigation.scss +2 -0
  150. package/moj/components/sub-navigation/_sub-navigation.scss.map +1 -0
  151. package/moj/components/tag/_tag.scss +2 -0
  152. package/moj/components/tag/_tag.scss.map +1 -0
  153. package/moj/components/task-list/_task-list.scss +2 -0
  154. package/moj/components/task-list/_task-list.scss.map +1 -0
  155. package/moj/components/ticket-panel/_ticket-panel.scss +2 -0
  156. package/moj/components/ticket-panel/_ticket-panel.scss.map +1 -0
  157. package/moj/components/timeline/_timeline.scss +2 -0
  158. package/moj/components/timeline/_timeline.scss.map +1 -0
  159. package/moj/filters/all.js +44 -22
  160. package/moj/helpers/_all.scss +2 -0
  161. package/moj/helpers/_all.scss.map +1 -0
  162. package/moj/helpers/_hidden.scss +2 -0
  163. package/moj/helpers/_hidden.scss.map +1 -0
  164. package/moj/helpers/_links.scss +2 -0
  165. package/moj/helpers/_links.scss.map +1 -0
  166. package/moj/{helpers.js → helpers.bundle.js} +37 -42
  167. package/moj/helpers.bundle.js.map +1 -0
  168. package/moj/helpers.bundle.mjs +179 -0
  169. package/moj/helpers.bundle.mjs.map +1 -0
  170. package/moj/helpers.mjs +52 -28
  171. package/moj/helpers.mjs.map +1 -1
  172. package/moj/init.js +11 -2
  173. package/moj/moj-frontend.min.css +1 -1
  174. package/moj/moj-frontend.min.css.map +1 -1
  175. package/moj/moj-frontend.min.js +1 -1
  176. package/moj/moj-frontend.min.js.map +1 -1
  177. package/moj/objects/_all.scss +2 -0
  178. package/moj/objects/_all.scss.map +1 -0
  179. package/moj/objects/_button-group.scss +2 -0
  180. package/moj/objects/_button-group.scss.map +1 -0
  181. package/moj/objects/_filter-layout.scss +2 -0
  182. package/moj/objects/_filter-layout.scss.map +1 -0
  183. package/moj/objects/_scrollable-pane.scss +2 -0
  184. package/moj/objects/_scrollable-pane.scss.map +1 -0
  185. package/moj/objects/_width-container.scss +2 -0
  186. package/moj/objects/_width-container.scss.map +1 -0
  187. package/moj/settings/_all.scss +2 -0
  188. package/moj/settings/_all.scss.map +1 -0
  189. package/moj/settings/_assets.scss +2 -0
  190. package/moj/settings/_assets.scss.map +1 -0
  191. package/moj/settings/_colours.scss +2 -0
  192. package/moj/settings/_colours.scss.map +1 -0
  193. package/moj/settings/_measurements.scss +2 -0
  194. package/moj/settings/_measurements.scss.map +1 -0
  195. package/moj/settings/_typography.scss +2 -0
  196. package/moj/settings/_typography.scss.map +1 -0
  197. package/moj/template.njk +13 -0
  198. package/moj/utilities/_all.scss +2 -0
  199. package/moj/utilities/_all.scss.map +1 -0
  200. package/moj/utilities/_hidden.scss +2 -0
  201. package/moj/utilities/_hidden.scss.map +1 -0
  202. package/moj/utilities/_width-container.scss +2 -0
  203. package/moj/utilities/_width-container.scss.map +1 -0
  204. package/moj/vendor/govuk-frontend/_base.scss +2 -0
  205. package/moj/vendor/govuk-frontend/_base.scss.map +1 -0
  206. package/moj/vendor/govuk-frontend/_index.scss +2 -0
  207. package/moj/vendor/govuk-frontend/_index.scss.map +1 -0
  208. package/moj/{version.js → version.bundle.js} +1 -1
  209. package/moj/version.bundle.js.map +1 -0
  210. package/moj/version.bundle.mjs +4 -0
  211. package/moj/version.bundle.mjs.map +1 -0
  212. package/moj/version.mjs.map +1 -1
  213. package/package.json +5 -6
  214. package/moj/all.jquery.min.js +0 -1
  215. package/moj/all.jquery.min.js.map +0 -1
  216. package/moj/all.js +0 -2662
  217. package/moj/all.js.map +0 -1
  218. package/moj/components/add-another/add-another.js +0 -115
  219. package/moj/components/add-another/add-another.js.map +0 -1
  220. package/moj/components/alert/alert.js +0 -356
  221. package/moj/components/alert/alert.js.map +0 -1
  222. package/moj/components/alert/alert.spec.helper.js.map +0 -1
  223. package/moj/components/button-menu/button-menu.js.map +0 -1
  224. package/moj/components/date-picker/date-picker.js.map +0 -1
  225. package/moj/components/filter-toggle-button/filter-toggle-button.js +0 -102
  226. package/moj/components/filter-toggle-button/filter-toggle-button.js.map +0 -1
  227. package/moj/components/form-validator/form-validator.js +0 -205
  228. package/moj/components/form-validator/form-validator.js.map +0 -1
  229. package/moj/components/multi-file-upload/multi-file-upload.js +0 -241
  230. package/moj/components/multi-file-upload/multi-file-upload.js.map +0 -1
  231. package/moj/components/multi-select/multi-select.js +0 -86
  232. package/moj/components/multi-select/multi-select.js.map +0 -1
  233. package/moj/components/password-reveal/password-reveal.js +0 -44
  234. package/moj/components/password-reveal/password-reveal.js.map +0 -1
  235. package/moj/components/rich-text-editor/rich-text-editor.js +0 -166
  236. package/moj/components/rich-text-editor/rich-text-editor.js.map +0 -1
  237. package/moj/components/search-toggle/search-toggle.js +0 -63
  238. package/moj/components/search-toggle/search-toggle.js.map +0 -1
  239. package/moj/components/sortable-table/sortable-table.js +0 -147
  240. package/moj/components/sortable-table/sortable-table.js.map +0 -1
  241. package/moj/helpers.js.map +0 -1
  242. package/moj/vendor/html5shiv.js +0 -326
  243. package/moj/vendor/jquery.js +0 -9300
  244. package/moj/version.js.map +0 -1
@@ -0,0 +1,70 @@
1
+ class MultiSelect {
2
+ constructor(options) {
3
+ this.container = options.container;
4
+ if (this.container.hasAttribute('data-moj-multi-select-init')) {
5
+ return this;
6
+ }
7
+ this.container.setAttribute('data-moj-multi-select-init', '');
8
+ const idPrefix = options.id_prefix;
9
+ this.setupToggle(idPrefix);
10
+ this.toggleButton = this.toggle.querySelector('input');
11
+ this.toggleButton.addEventListener('click', this.onButtonClick.bind(this));
12
+ this.container.append(this.toggle);
13
+ this.checkboxes = Array.from(options.checkboxes);
14
+ this.checkboxes.forEach(el => el.addEventListener('click', this.onCheckboxClick.bind(this)));
15
+ this.checked = options.checked || false;
16
+ }
17
+ setupToggle(idPrefix = '') {
18
+ const id = `${idPrefix}checkboxes-all`;
19
+ const toggle = document.createElement('div');
20
+ const label = document.createElement('label');
21
+ const input = document.createElement('input');
22
+ const span = document.createElement('span');
23
+ toggle.classList.add('govuk-checkboxes__item', 'govuk-checkboxes--small', 'moj-multi-select__checkbox');
24
+ input.id = id;
25
+ input.type = 'checkbox';
26
+ input.classList.add('govuk-checkboxes__input');
27
+ label.setAttribute('for', id);
28
+ label.classList.add('govuk-label', 'govuk-checkboxes__label', 'moj-multi-select__toggle-label');
29
+ span.classList.add('govuk-visually-hidden');
30
+ span.textContent = 'Select all';
31
+ label.append(span);
32
+ toggle.append(input, label);
33
+ this.toggle = toggle;
34
+ }
35
+ onButtonClick() {
36
+ if (this.checked) {
37
+ this.uncheckAll();
38
+ this.toggleButton.checked = false;
39
+ } else {
40
+ this.checkAll();
41
+ this.toggleButton.checked = true;
42
+ }
43
+ }
44
+ checkAll() {
45
+ this.checkboxes.forEach(el => {
46
+ el.checked = true;
47
+ });
48
+ this.checked = true;
49
+ }
50
+ uncheckAll() {
51
+ this.checkboxes.forEach(el => {
52
+ el.checked = false;
53
+ });
54
+ this.checked = false;
55
+ }
56
+ onCheckboxClick(event) {
57
+ if (!event.target.checked) {
58
+ this.toggleButton.checked = false;
59
+ this.checked = false;
60
+ } else {
61
+ if (this.checkboxes.filter(el => el.checked).length === this.checkboxes.length) {
62
+ this.toggleButton.checked = true;
63
+ this.checked = true;
64
+ }
65
+ }
66
+ }
67
+ }
68
+
69
+ export { MultiSelect };
70
+ //# sourceMappingURL=multi-select.bundle.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"multi-select.bundle.mjs","sources":["../../../../src/moj/components/multi-select/multi-select.mjs"],"sourcesContent":["export class MultiSelect {\n constructor(options) {\n this.container = options.container\n\n if (this.container.hasAttribute('data-moj-multi-select-init')) {\n return this\n }\n\n this.container.setAttribute('data-moj-multi-select-init', '')\n\n const idPrefix = options.id_prefix\n this.setupToggle(idPrefix)\n\n this.toggleButton = this.toggle.querySelector('input')\n this.toggleButton.addEventListener('click', this.onButtonClick.bind(this))\n this.container.append(this.toggle)\n\n this.checkboxes = Array.from(options.checkboxes)\n this.checkboxes.forEach((el) =>\n el.addEventListener('click', this.onCheckboxClick.bind(this))\n )\n\n this.checked = options.checked || false\n }\n\n setupToggle(idPrefix = '') {\n const id = `${idPrefix}checkboxes-all`\n\n const toggle = document.createElement('div')\n const label = document.createElement('label')\n const input = document.createElement('input')\n const span = document.createElement('span')\n\n toggle.classList.add(\n 'govuk-checkboxes__item',\n 'govuk-checkboxes--small',\n 'moj-multi-select__checkbox'\n )\n\n input.id = id\n input.type = 'checkbox'\n input.classList.add('govuk-checkboxes__input')\n\n label.setAttribute('for', id)\n label.classList.add(\n 'govuk-label',\n 'govuk-checkboxes__label',\n 'moj-multi-select__toggle-label'\n )\n\n span.classList.add('govuk-visually-hidden')\n span.textContent = 'Select all'\n\n label.append(span)\n toggle.append(input, label)\n\n this.toggle = toggle\n }\n\n onButtonClick() {\n if (this.checked) {\n this.uncheckAll()\n this.toggleButton.checked = false\n } else {\n this.checkAll()\n this.toggleButton.checked = true\n }\n }\n\n checkAll() {\n this.checkboxes.forEach((el) => {\n el.checked = true\n })\n this.checked = true\n }\n\n uncheckAll() {\n this.checkboxes.forEach((el) => {\n el.checked = false\n })\n this.checked = false\n }\n\n onCheckboxClick(event) {\n if (!event.target.checked) {\n this.toggleButton.checked = false\n this.checked = false\n } else {\n if (\n this.checkboxes.filter((el) => el.checked).length ===\n this.checkboxes.length\n ) {\n this.toggleButton.checked = true\n this.checked = true\n }\n }\n }\n}\n"],"names":["MultiSelect","constructor","options","container","hasAttribute","setAttribute","idPrefix","id_prefix","setupToggle","toggleButton","toggle","querySelector","addEventListener","onButtonClick","bind","append","checkboxes","Array","from","forEach","el","onCheckboxClick","checked","id","document","createElement","label","input","span","classList","add","type","textContent","uncheckAll","checkAll","event","target","filter","length"],"mappings":"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"}
@@ -1,78 +1,70 @@
1
- function MultiSelect(options) {
2
- this.container = $(options.container);
3
-
4
- if (this.container.data('moj-multi-select-initialised')) {
5
- return
1
+ class MultiSelect {
2
+ constructor(options) {
3
+ this.container = options.container;
4
+ if (this.container.hasAttribute('data-moj-multi-select-init')) {
5
+ return this;
6
+ }
7
+ this.container.setAttribute('data-moj-multi-select-init', '');
8
+ const idPrefix = options.id_prefix;
9
+ this.setupToggle(idPrefix);
10
+ this.toggleButton = this.toggle.querySelector('input');
11
+ this.toggleButton.addEventListener('click', this.onButtonClick.bind(this));
12
+ this.container.append(this.toggle);
13
+ this.checkboxes = Array.from(options.checkboxes);
14
+ this.checkboxes.forEach(el => el.addEventListener('click', this.onCheckboxClick.bind(this)));
15
+ this.checked = options.checked || false;
6
16
  }
7
-
8
- this.container.data('moj-multi-select-initialised', true);
9
-
10
- const idPrefix = options.id_prefix;
11
- let allId = 'checkboxes-all';
12
- if (typeof idPrefix !== 'undefined') {
13
- allId = `${idPrefix}checkboxes-all`;
17
+ setupToggle(idPrefix = '') {
18
+ const id = `${idPrefix}checkboxes-all`;
19
+ const toggle = document.createElement('div');
20
+ const label = document.createElement('label');
21
+ const input = document.createElement('input');
22
+ const span = document.createElement('span');
23
+ toggle.classList.add('govuk-checkboxes__item', 'govuk-checkboxes--small', 'moj-multi-select__checkbox');
24
+ input.id = id;
25
+ input.type = 'checkbox';
26
+ input.classList.add('govuk-checkboxes__input');
27
+ label.setAttribute('for', id);
28
+ label.classList.add('govuk-label', 'govuk-checkboxes__label', 'moj-multi-select__toggle-label');
29
+ span.classList.add('govuk-visually-hidden');
30
+ span.textContent = 'Select all';
31
+ label.append(span);
32
+ toggle.append(input, label);
33
+ this.toggle = toggle;
14
34
  }
15
-
16
- this.toggle = $(this.getToggleHtml(allId));
17
- this.toggleButton = this.toggle.find('input');
18
- this.toggleButton.on('click', $.proxy(this, 'onButtonClick'));
19
- this.container.append(this.toggle);
20
- this.checkboxes = $(options.checkboxes);
21
- this.checkboxes.on('click', $.proxy(this, 'onCheckboxClick'));
22
- this.checked = options.checked || false;
23
- }
24
-
25
- MultiSelect.prototype.getToggleHtml = function (allId) {
26
- let html = '';
27
- html +=
28
- '<div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">';
29
- html += ` <input type="checkbox" class="govuk-checkboxes__input" id="${allId}">`;
30
- html += ` <label class="govuk-label govuk-checkboxes__label moj-multi-select__toggle-label" for="${allId}">`;
31
- html += ' <span class="govuk-visually-hidden">Select all</span>';
32
- html += ' </label>';
33
- html += '</div>';
34
- return html
35
- };
36
-
37
- MultiSelect.prototype.onButtonClick = function (e) {
38
- if (this.checked) {
39
- this.uncheckAll();
40
- this.toggleButton[0].checked = false;
41
- } else {
42
- this.checkAll();
43
- this.toggleButton[0].checked = true;
35
+ onButtonClick() {
36
+ if (this.checked) {
37
+ this.uncheckAll();
38
+ this.toggleButton.checked = false;
39
+ } else {
40
+ this.checkAll();
41
+ this.toggleButton.checked = true;
42
+ }
44
43
  }
45
- };
46
-
47
- MultiSelect.prototype.checkAll = function () {
48
- this.checkboxes.each(
49
- $.proxy(function (index, el) {
44
+ checkAll() {
45
+ this.checkboxes.forEach(el => {
50
46
  el.checked = true;
51
- }, this)
52
- );
53
- this.checked = true;
54
- };
55
-
56
- MultiSelect.prototype.uncheckAll = function () {
57
- this.checkboxes.each(
58
- $.proxy(function (index, el) {
47
+ });
48
+ this.checked = true;
49
+ }
50
+ uncheckAll() {
51
+ this.checkboxes.forEach(el => {
59
52
  el.checked = false;
60
- }, this)
61
- );
62
- this.checked = false;
63
- };
64
-
65
- MultiSelect.prototype.onCheckboxClick = function (e) {
66
- if (!e.target.checked) {
67
- this.toggleButton[0].checked = false;
53
+ });
68
54
  this.checked = false;
69
- } else {
70
- if (this.checkboxes.filter(':checked').length === this.checkboxes.length) {
71
- this.toggleButton[0].checked = true;
72
- this.checked = true;
55
+ }
56
+ onCheckboxClick(event) {
57
+ if (!event.target.checked) {
58
+ this.toggleButton.checked = false;
59
+ this.checked = false;
60
+ } else {
61
+ if (this.checkboxes.filter(el => el.checked).length === this.checkboxes.length) {
62
+ this.toggleButton.checked = true;
63
+ this.checked = true;
64
+ }
73
65
  }
74
66
  }
75
- };
67
+ }
76
68
 
77
69
  export { MultiSelect };
78
70
  //# sourceMappingURL=multi-select.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"multi-select.mjs","sources":["../../../../src/moj/components/multi-select/multi-select.mjs"],"sourcesContent":["import $ from 'jquery'\n\nexport function MultiSelect(options) {\n this.container = $(options.container)\n\n if (this.container.data('moj-multi-select-initialised')) {\n return\n }\n\n this.container.data('moj-multi-select-initialised', true)\n\n const idPrefix = options.id_prefix\n let allId = 'checkboxes-all'\n if (typeof idPrefix !== 'undefined') {\n allId = `${idPrefix}checkboxes-all`\n }\n\n this.toggle = $(this.getToggleHtml(allId))\n this.toggleButton = this.toggle.find('input')\n this.toggleButton.on('click', $.proxy(this, 'onButtonClick'))\n this.container.append(this.toggle)\n this.checkboxes = $(options.checkboxes)\n this.checkboxes.on('click', $.proxy(this, 'onCheckboxClick'))\n this.checked = options.checked || false\n}\n\nMultiSelect.prototype.getToggleHtml = function (allId) {\n let html = ''\n html +=\n '<div class=\"govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox\">'\n html += ` <input type=\"checkbox\" class=\"govuk-checkboxes__input\" id=\"${allId}\">`\n html += ` <label class=\"govuk-label govuk-checkboxes__label moj-multi-select__toggle-label\" for=\"${allId}\">`\n html += ' <span class=\"govuk-visually-hidden\">Select all</span>'\n html += ' </label>'\n html += '</div>'\n return html\n}\n\nMultiSelect.prototype.onButtonClick = function (e) {\n if (this.checked) {\n this.uncheckAll()\n this.toggleButton[0].checked = false\n } else {\n this.checkAll()\n this.toggleButton[0].checked = true\n }\n}\n\nMultiSelect.prototype.checkAll = function () {\n this.checkboxes.each(\n $.proxy(function (index, el) {\n el.checked = true\n }, this)\n )\n this.checked = true\n}\n\nMultiSelect.prototype.uncheckAll = function () {\n this.checkboxes.each(\n $.proxy(function (index, el) {\n el.checked = false\n }, this)\n )\n this.checked = false\n}\n\nMultiSelect.prototype.onCheckboxClick = function (e) {\n if (!e.target.checked) {\n this.toggleButton[0].checked = false\n this.checked = false\n } else {\n if (this.checkboxes.filter(':checked').length === this.checkboxes.length) {\n this.toggleButton[0].checked = true\n this.checked = true\n }\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"multi-select.mjs","sources":["../../../../src/moj/components/multi-select/multi-select.mjs"],"sourcesContent":["export class MultiSelect {\n constructor(options) {\n this.container = options.container\n\n if (this.container.hasAttribute('data-moj-multi-select-init')) {\n return this\n }\n\n this.container.setAttribute('data-moj-multi-select-init', '')\n\n const idPrefix = options.id_prefix\n this.setupToggle(idPrefix)\n\n this.toggleButton = this.toggle.querySelector('input')\n this.toggleButton.addEventListener('click', this.onButtonClick.bind(this))\n this.container.append(this.toggle)\n\n this.checkboxes = Array.from(options.checkboxes)\n this.checkboxes.forEach((el) =>\n el.addEventListener('click', this.onCheckboxClick.bind(this))\n )\n\n this.checked = options.checked || false\n }\n\n setupToggle(idPrefix = '') {\n const id = `${idPrefix}checkboxes-all`\n\n const toggle = document.createElement('div')\n const label = document.createElement('label')\n const input = document.createElement('input')\n const span = document.createElement('span')\n\n toggle.classList.add(\n 'govuk-checkboxes__item',\n 'govuk-checkboxes--small',\n 'moj-multi-select__checkbox'\n )\n\n input.id = id\n input.type = 'checkbox'\n input.classList.add('govuk-checkboxes__input')\n\n label.setAttribute('for', id)\n label.classList.add(\n 'govuk-label',\n 'govuk-checkboxes__label',\n 'moj-multi-select__toggle-label'\n )\n\n span.classList.add('govuk-visually-hidden')\n span.textContent = 'Select all'\n\n label.append(span)\n toggle.append(input, label)\n\n this.toggle = toggle\n }\n\n onButtonClick() {\n if (this.checked) {\n this.uncheckAll()\n this.toggleButton.checked = false\n } else {\n this.checkAll()\n this.toggleButton.checked = true\n }\n }\n\n checkAll() {\n this.checkboxes.forEach((el) => {\n el.checked = true\n })\n this.checked = true\n }\n\n uncheckAll() {\n this.checkboxes.forEach((el) => {\n el.checked = false\n })\n this.checked = false\n }\n\n onCheckboxClick(event) {\n if (!event.target.checked) {\n this.toggleButton.checked = false\n this.checked = false\n } else {\n if (\n this.checkboxes.filter((el) => el.checked).length ===\n this.checkboxes.length\n ) {\n this.toggleButton.checked = true\n this.checked = true\n }\n }\n }\n}\n"],"names":["MultiSelect","constructor","options","container","hasAttribute","setAttribute","idPrefix","id_prefix","setupToggle","toggleButton","toggle","querySelector","addEventListener","onButtonClick","bind","append","checkboxes","Array","from","forEach","el","onCheckboxClick","checked","id","document","createElement","label","input","span","classList","add","type","textContent","uncheckAll","checkAll","event","target","filter","length"],"mappings":"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"}
@@ -16,3 +16,5 @@
16
16
  white-space: nowrap;
17
17
  @include govuk-font($size: 16, $weight: "bold");
18
18
  }
19
+
20
+ /*# sourceMappingURL=_notification-badge.scss.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/moj/components/notification-badge/_notification-badge.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,qBAAqB;EACrB,eAAe;EACf,oBAAoB;EACpB,mBAAmB;EACnB,4BAA4B;EAC5B,qCAAqC;EACrC,gBAAgB;EAChB,kBAAkB;EAClB,mBAAmB;EACnB,+CAA+C;AACjD","file":"_notification-badge.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n #NOTIFICATION BADGE\n ========================================================================== */\n\n.moj-notification-badge {\n display: inline-block;\n min-width: 15px;\n padding: 5px 8px 2px;\n border-radius: 75px;\n color: govuk-colour(\"white\");\n background-color: govuk-colour(\"red\");\n font-weight: 600;\n text-align: center;\n white-space: nowrap;\n @include govuk-font($size: 16, $weight: \"bold\");\n}\n"]}
@@ -28,3 +28,5 @@
28
28
  float: right;
29
29
  }
30
30
  }
31
+
32
+ /*# sourceMappingURL=_organisation-switcher.scss.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/moj/components/organisation-switcher/_organisation-switcher.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,4BAA4B;EAC5B,+BAA+B;EAC/B,gCAAgC;EAChC,6CAA6C;EAC7C,uBAAuB;AACzB;;AAEA;EACE,+CAA+C;EAC/C;IACE,UAAU;IACV,WAAW;EACb;AACF;;AAEA;EACE,0BAA0B;EAC1B,iCAAiC;EACjC,kCAAkC;EAClC;IACE,YAAY;EACd;AACF","file":"_organisation-switcher.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n #ORGANISATION SWITCHER\n ========================================================================== */\n\n.moj-organisation-nav {\n margin-top: govuk-spacing(2);\n margin-bottom: govuk-spacing(3);\n padding-bottom: govuk-spacing(1);\n border-bottom: 1px solid $govuk-border-colour;\n @include govuk-clearfix;\n}\n\n.moj-organisation-nav__title {\n @include govuk-font($size: 19, $weight: \"bold\");\n @include govuk-media-query($from: tablet) {\n width: 75%;\n float: left;\n }\n}\n\n.moj-organisation-nav__link {\n @include govuk-link-common;\n @include govuk-link-style-default;\n @include govuk-link-print-friendly;\n @include govuk-media-query($from: tablet) {\n float: right;\n }\n}\n"]}
@@ -25,3 +25,5 @@
25
25
  margin-bottom: 0;
26
26
  }
27
27
  }
28
+
29
+ /*# sourceMappingURL=_page-header-actions.scss.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/moj/components/page-header-actions/_page-header-actions.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;EACE,aAAa;EACb,4BAA4B,EAAE,qBAAqB;EACnD,+BAA+B;EAC/B,eAAe;EACf,8BAA8B;EAC9B,mBAAmB;EACnB,qBAAqB;AACvB;;AAEA;EACE;IACE,gBAAgB;EAClB;AACF;;AAEA;EACE;IACE,gBAAgB;EAClB;;EAEA;IACE,gBAAgB;EAClB;AACF","file":"_page-header-actions.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-page-header-actions {\n display: flex;\n min-height: govuk-spacing(7); // Match button height\n margin-bottom: govuk-spacing(7);\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: govuk-spacing(2);\n}\n\n.moj-page-header-actions__title {\n [class^=\"govuk-heading-\"] {\n margin-bottom: 0;\n }\n}\n\n.moj-page-header-actions__actions {\n .moj-button-group {\n margin-bottom: 0;\n }\n\n .govuk-button {\n margin-bottom: 0;\n }\n}\n"]}
@@ -69,8 +69,6 @@
69
69
  display: inline-block;
70
70
  width: 10px;
71
71
  height: 10px;
72
- -webkit-transform: rotate(-45deg);
73
- -ms-transform: rotate(-45deg);
74
72
  transform: rotate(-45deg);
75
73
  border-style: solid;
76
74
  color: govuk-colour("black");
@@ -115,3 +113,5 @@
115
113
  color: govuk-colour("black");
116
114
  }
117
115
  }
116
+
117
+ /*# sourceMappingURL=_pagination.scss.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/moj/components/pagination/_pagination.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;EACE,qBAAqB;;EAErB;IACE,gCAAgC;;IAEhC,uBAAuB;IACvB,+BAA+B;;IAE/B,kCAAkC;IAClC,YAAY;;IAEZ,qCAAqC;IACrC,mBAAmB;;IAEnB;MACE,WAAW;MACX,qBAAqB;MACrB,WAAW;IACb;EACF;AACF;;AAEA;EACE,SAAS;EACT,UAAU;EACV,gBAAgB;EAChB;IACE,qBAAqB;IACrB,gBAAgB;IAChB,sBAAsB;EACxB;AACF;;AAEA;EACE,aAAa;EACb,yBAAyB;EACzB,uBAAuB;EACvB;IACE,qBAAqB;IACrB,gBAAgB;IAChB,sBAAsB;EACxB;AACF;;AAEA;EACE,qBAAqB;EACrB,uBAAuB;AACzB;;AAEA;;EAEE,YAAY;EACZ,0CAA0C;EAC1C,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA;EACE,gBAAgB;EAChB,eAAe;AACjB;;AAEA;;EAEE,WAAW;EACX,qBAAqB;EACrB,WAAW;EACX,YAAY;EAGZ,yBAAyB;EACzB,mBAAmB;EACnB,4BAA4B;EAC5B,uBAAuB;AACzB;;AAEA;EACE,8BAA8B;EAC9B,yBAAyB;AAC3B;;AAEA;EACE,6BAA6B;EAC7B,yBAAyB;AAC3B;;AAEA;EACE,cAAc;EACd,eAAe;EACf,yBAAyB;EACzB,kBAAkB;EAClB,0BAA0B;EAC1B,iCAAiC;;EAEjC;;;;IAIE,qBAAqB;EACvB;;EAEA;;IAEE,yBAAyB;EAC3B;;EAEA;IACE,yCAAyC;EAC3C;;EAEA;IACE,4BAA4B;EAC9B;AACF","file":"_pagination.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-pagination {\n // text-align: center;\n\n @include govuk-media-query($from: desktop) {\n margin-right: - govuk-spacing(1);\n\n // Alignment adjustments\n margin-left: - govuk-spacing(1);\n\n // Hide whitespace between elements\n font-size: 0;\n\n // Trick to remove the need for floats\n text-align: justify;\n\n &::after {\n content: \"\";\n display: inline-block;\n width: 100%;\n }\n }\n}\n\n.moj-pagination__list {\n margin: 0;\n padding: 0;\n list-style: none;\n @include govuk-media-query($from: desktop) {\n display: inline-block;\n margin-bottom: 0;\n vertical-align: middle;\n }\n}\n\n.moj-pagination__results {\n margin-top: 0;\n padding: govuk-spacing(1);\n @include govuk-font(19);\n @include govuk-media-query($from: desktop) {\n display: inline-block;\n margin-bottom: 0;\n vertical-align: middle;\n }\n}\n\n.moj-pagination__item {\n display: inline-block;\n @include govuk-font(19);\n}\n\n.moj-pagination__item--active,\n.moj-pagination__item--dots {\n height: 25px;\n padding: govuk-spacing(1) govuk-spacing(2);\n font-weight: bold;\n text-align: center;\n}\n\n.moj-pagination__item--dots {\n padding-right: 0;\n padding-left: 0;\n}\n\n.moj-pagination__item--prev .moj-pagination__link::before,\n.moj-pagination__item--next .moj-pagination__link::after {\n content: \"\";\n display: inline-block;\n width: 10px;\n height: 10px;\n -webkit-transform: rotate(-45deg);\n -ms-transform: rotate(-45deg);\n transform: rotate(-45deg);\n border-style: solid;\n color: govuk-colour(\"black\");\n background: transparent;\n}\n\n.moj-pagination__item--prev .moj-pagination__link::before {\n margin-right: govuk-spacing(1);\n border-width: 3px 0 0 3px;\n}\n\n.moj-pagination__item--next .moj-pagination__link::after {\n margin-left: govuk-spacing(1);\n border-width: 0 3px 3px 0;\n}\n\n.moj-pagination__link {\n display: block;\n min-width: 25px;\n padding: govuk-spacing(1);\n text-align: center;\n @include govuk-link-common;\n @include govuk-link-style-default;\n\n &:link,\n &:visited,\n &:hover,\n &:active {\n text-decoration: none;\n }\n\n &:link,\n &:visited {\n color: $govuk-link-colour;\n }\n\n &:hover {\n color: govuk-tint($govuk-link-colour, 25);\n }\n\n &:focus {\n color: govuk-colour(\"black\");\n }\n}\n"]}
@@ -15,3 +15,5 @@
15
15
  width: 80px;
16
16
  }
17
17
  }
18
+
19
+ /*# sourceMappingURL=_password-reveal.scss.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/moj/components/password-reveal/_password-reveal.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,aAAa;;EAEb;IACE,8BAA8B;EAChC;;EAEA;IACE,WAAW;EACb;AACF","file":"_password-reveal.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n #PASSWORD SHOW/HIDE\n ========================================================================== */\n\n.moj-password-reveal {\n display: flex;\n\n &__input {\n margin-right: govuk-spacing(1);\n }\n\n &__button {\n width: 80px;\n }\n}\n"]}
@@ -0,0 +1,49 @@
1
+ (function (global, factory) {
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
3
+ typeof define === 'function' && define.amd ? define(['exports'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MOJFrontend = global.MOJFrontend || {}));
5
+ })(this, (function (exports) { 'use strict';
6
+
7
+ class PasswordReveal {
8
+ /**
9
+ * @param {Element | null} element - HTML element to use for password reveal
10
+ */
11
+ constructor(element) {
12
+ if (!element || !(element instanceof HTMLInputElement)) {
13
+ return this;
14
+ }
15
+ this.el = element;
16
+ this.container = element.parentElement;
17
+ if (this.container.hasAttribute('data-moj-password-reveal-init')) {
18
+ return this;
19
+ }
20
+ this.container.setAttribute('data-moj-password-reveal-init', '');
21
+ this.el.setAttribute('spellcheck', 'false');
22
+ this.createButton();
23
+ }
24
+ createButton() {
25
+ this.group = document.createElement('div');
26
+ this.button = document.createElement('button');
27
+ this.button.setAttribute('type', 'button');
28
+ this.group.className = 'moj-password-reveal';
29
+ this.button.className = 'govuk-button govuk-button--secondary moj-password-reveal__button';
30
+ this.button.innerHTML = 'Show <span class="govuk-visually-hidden">password</span>';
31
+ this.button.addEventListener('click', this.onButtonClick.bind(this));
32
+ this.group.append(this.el, this.button);
33
+ this.container.append(this.group);
34
+ }
35
+ onButtonClick() {
36
+ if (this.el.type === 'password') {
37
+ this.el.type = 'text';
38
+ this.button.innerHTML = 'Hide <span class="govuk-visually-hidden">password</span>';
39
+ } else {
40
+ this.el.type = 'password';
41
+ this.button.innerHTML = 'Show <span class="govuk-visually-hidden">password</span>';
42
+ }
43
+ }
44
+ }
45
+
46
+ exports.PasswordReveal = PasswordReveal;
47
+
48
+ }));
49
+ //# sourceMappingURL=password-reveal.bundle.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"password-reveal.bundle.js","sources":["../../../../src/moj/components/password-reveal/password-reveal.mjs"],"sourcesContent":["export class PasswordReveal {\n /**\n * @param {Element | null} element - HTML element to use for password reveal\n */\n constructor(element) {\n if (!element || !(element instanceof HTMLInputElement)) {\n return this\n }\n\n this.el = element\n this.container = element.parentElement\n\n if (this.container.hasAttribute('data-moj-password-reveal-init')) {\n return this\n }\n\n this.container.setAttribute('data-moj-password-reveal-init', '')\n\n this.el.setAttribute('spellcheck', 'false')\n this.createButton()\n }\n\n createButton() {\n this.group = document.createElement('div')\n this.button = document.createElement('button')\n\n this.button.setAttribute('type', 'button')\n\n this.group.className = 'moj-password-reveal'\n\n this.button.className =\n 'govuk-button govuk-button--secondary moj-password-reveal__button'\n\n this.button.innerHTML =\n 'Show <span class=\"govuk-visually-hidden\">password</span>'\n\n this.button.addEventListener('click', this.onButtonClick.bind(this))\n\n this.group.append(this.el, this.button)\n this.container.append(this.group)\n }\n\n onButtonClick() {\n if (this.el.type === 'password') {\n this.el.type = 'text'\n this.button.innerHTML =\n 'Hide <span class=\"govuk-visually-hidden\">password</span>'\n } else {\n this.el.type = 'password'\n this.button.innerHTML =\n 'Show <span class=\"govuk-visually-hidden\">password</span>'\n }\n }\n}\n"],"names":["PasswordReveal","constructor","element","HTMLInputElement","el","container","parentElement","hasAttribute","setAttribute","createButton","group","document","createElement","button","className","innerHTML","addEventListener","onButtonClick","bind","append","type"],"mappings":";;;;;;EAAO,MAAMA,cAAc,CAAC;EAC1B;EACF;EACA;IACEC,WAAWA,CAACC,OAAO,EAAE;MACnB,IAAI,CAACA,OAAO,IAAI,EAAEA,OAAO,YAAYC,gBAAgB,CAAC,EAAE;EACtD,MAAA,OAAO,IAAI;EACb;MAEA,IAAI,CAACC,EAAE,GAAGF,OAAO;EACjB,IAAA,IAAI,CAACG,SAAS,GAAGH,OAAO,CAACI,aAAa;MAEtC,IAAI,IAAI,CAACD,SAAS,CAACE,YAAY,CAAC,+BAA+B,CAAC,EAAE;EAChE,MAAA,OAAO,IAAI;EACb;MAEA,IAAI,CAACF,SAAS,CAACG,YAAY,CAAC,+BAA+B,EAAE,EAAE,CAAC;MAEhE,IAAI,CAACJ,EAAE,CAACI,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC;MAC3C,IAAI,CAACC,YAAY,EAAE;EACrB;EAEAA,EAAAA,YAAYA,GAAG;MACb,IAAI,CAACC,KAAK,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;MAC1C,IAAI,CAACC,MAAM,GAAGF,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;MAE9C,IAAI,CAACC,MAAM,CAACL,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC;EAE1C,IAAA,IAAI,CAACE,KAAK,CAACI,SAAS,GAAG,qBAAqB;EAE5C,IAAA,IAAI,CAACD,MAAM,CAACC,SAAS,GACnB,kEAAkE;EAEpE,IAAA,IAAI,CAACD,MAAM,CAACE,SAAS,GACnB,0DAA0D;EAE5D,IAAA,IAAI,CAACF,MAAM,CAACG,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAACC,aAAa,CAACC,IAAI,CAAC,IAAI,CAAC,CAAC;EAEpE,IAAA,IAAI,CAACR,KAAK,CAACS,MAAM,CAAC,IAAI,CAACf,EAAE,EAAE,IAAI,CAACS,MAAM,CAAC;MACvC,IAAI,CAACR,SAAS,CAACc,MAAM,CAAC,IAAI,CAACT,KAAK,CAAC;EACnC;EAEAO,EAAAA,aAAaA,GAAG;EACd,IAAA,IAAI,IAAI,CAACb,EAAE,CAACgB,IAAI,KAAK,UAAU,EAAE;EAC/B,MAAA,IAAI,CAAChB,EAAE,CAACgB,IAAI,GAAG,MAAM;EACrB,MAAA,IAAI,CAACP,MAAM,CAACE,SAAS,GACnB,0DAA0D;EAC9D,KAAC,MAAM;EACL,MAAA,IAAI,CAACX,EAAE,CAACgB,IAAI,GAAG,UAAU;EACzB,MAAA,IAAI,CAACP,MAAM,CAACE,SAAS,GACnB,0DAA0D;EAC9D;EACF;EACF;;;;;;;;"}
@@ -0,0 +1,41 @@
1
+ class PasswordReveal {
2
+ /**
3
+ * @param {Element | null} element - HTML element to use for password reveal
4
+ */
5
+ constructor(element) {
6
+ if (!element || !(element instanceof HTMLInputElement)) {
7
+ return this;
8
+ }
9
+ this.el = element;
10
+ this.container = element.parentElement;
11
+ if (this.container.hasAttribute('data-moj-password-reveal-init')) {
12
+ return this;
13
+ }
14
+ this.container.setAttribute('data-moj-password-reveal-init', '');
15
+ this.el.setAttribute('spellcheck', 'false');
16
+ this.createButton();
17
+ }
18
+ createButton() {
19
+ this.group = document.createElement('div');
20
+ this.button = document.createElement('button');
21
+ this.button.setAttribute('type', 'button');
22
+ this.group.className = 'moj-password-reveal';
23
+ this.button.className = 'govuk-button govuk-button--secondary moj-password-reveal__button';
24
+ this.button.innerHTML = 'Show <span class="govuk-visually-hidden">password</span>';
25
+ this.button.addEventListener('click', this.onButtonClick.bind(this));
26
+ this.group.append(this.el, this.button);
27
+ this.container.append(this.group);
28
+ }
29
+ onButtonClick() {
30
+ if (this.el.type === 'password') {
31
+ this.el.type = 'text';
32
+ this.button.innerHTML = 'Hide <span class="govuk-visually-hidden">password</span>';
33
+ } else {
34
+ this.el.type = 'password';
35
+ this.button.innerHTML = 'Show <span class="govuk-visually-hidden">password</span>';
36
+ }
37
+ }
38
+ }
39
+
40
+ export { PasswordReveal };
41
+ //# sourceMappingURL=password-reveal.bundle.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"password-reveal.bundle.mjs","sources":["../../../../src/moj/components/password-reveal/password-reveal.mjs"],"sourcesContent":["export class PasswordReveal {\n /**\n * @param {Element | null} element - HTML element to use for password reveal\n */\n constructor(element) {\n if (!element || !(element instanceof HTMLInputElement)) {\n return this\n }\n\n this.el = element\n this.container = element.parentElement\n\n if (this.container.hasAttribute('data-moj-password-reveal-init')) {\n return this\n }\n\n this.container.setAttribute('data-moj-password-reveal-init', '')\n\n this.el.setAttribute('spellcheck', 'false')\n this.createButton()\n }\n\n createButton() {\n this.group = document.createElement('div')\n this.button = document.createElement('button')\n\n this.button.setAttribute('type', 'button')\n\n this.group.className = 'moj-password-reveal'\n\n this.button.className =\n 'govuk-button govuk-button--secondary moj-password-reveal__button'\n\n this.button.innerHTML =\n 'Show <span class=\"govuk-visually-hidden\">password</span>'\n\n this.button.addEventListener('click', this.onButtonClick.bind(this))\n\n this.group.append(this.el, this.button)\n this.container.append(this.group)\n }\n\n onButtonClick() {\n if (this.el.type === 'password') {\n this.el.type = 'text'\n this.button.innerHTML =\n 'Hide <span class=\"govuk-visually-hidden\">password</span>'\n } else {\n this.el.type = 'password'\n this.button.innerHTML =\n 'Show <span class=\"govuk-visually-hidden\">password</span>'\n }\n }\n}\n"],"names":["PasswordReveal","constructor","element","HTMLInputElement","el","container","parentElement","hasAttribute","setAttribute","createButton","group","document","createElement","button","className","innerHTML","addEventListener","onButtonClick","bind","append","type"],"mappings":"AAAO,MAAMA,cAAc,CAAC;AAC1B;AACF;AACA;EACEC,WAAWA,CAACC,OAAO,EAAE;IACnB,IAAI,CAACA,OAAO,IAAI,EAAEA,OAAO,YAAYC,gBAAgB,CAAC,EAAE;AACtD,MAAA,OAAO,IAAI;AACb;IAEA,IAAI,CAACC,EAAE,GAAGF,OAAO;AACjB,IAAA,IAAI,CAACG,SAAS,GAAGH,OAAO,CAACI,aAAa;IAEtC,IAAI,IAAI,CAACD,SAAS,CAACE,YAAY,CAAC,+BAA+B,CAAC,EAAE;AAChE,MAAA,OAAO,IAAI;AACb;IAEA,IAAI,CAACF,SAAS,CAACG,YAAY,CAAC,+BAA+B,EAAE,EAAE,CAAC;IAEhE,IAAI,CAACJ,EAAE,CAACI,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC;IAC3C,IAAI,CAACC,YAAY,EAAE;AACrB;AAEAA,EAAAA,YAAYA,GAAG;IACb,IAAI,CAACC,KAAK,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAC1C,IAAI,CAACC,MAAM,GAAGF,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;IAE9C,IAAI,CAACC,MAAM,CAACL,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC;AAE1C,IAAA,IAAI,CAACE,KAAK,CAACI,SAAS,GAAG,qBAAqB;AAE5C,IAAA,IAAI,CAACD,MAAM,CAACC,SAAS,GACnB,kEAAkE;AAEpE,IAAA,IAAI,CAACD,MAAM,CAACE,SAAS,GACnB,0DAA0D;AAE5D,IAAA,IAAI,CAACF,MAAM,CAACG,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAACC,aAAa,CAACC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEpE,IAAA,IAAI,CAACR,KAAK,CAACS,MAAM,CAAC,IAAI,CAACf,EAAE,EAAE,IAAI,CAACS,MAAM,CAAC;IACvC,IAAI,CAACR,SAAS,CAACc,MAAM,CAAC,IAAI,CAACT,KAAK,CAAC;AACnC;AAEAO,EAAAA,aAAaA,GAAG;AACd,IAAA,IAAI,IAAI,CAACb,EAAE,CAACgB,IAAI,KAAK,UAAU,EAAE;AAC/B,MAAA,IAAI,CAAChB,EAAE,CAACgB,IAAI,GAAG,MAAM;AACrB,MAAA,IAAI,CAACP,MAAM,CAACE,SAAS,GACnB,0DAA0D;AAC9D,KAAC,MAAM;AACL,MAAA,IAAI,CAACX,EAAE,CAACgB,IAAI,GAAG,UAAU;AACzB,MAAA,IAAI,CAACP,MAAM,CAACE,SAAS,GACnB,0DAA0D;AAC9D;AACF;AACF;;;;"}
@@ -1,36 +1,41 @@
1
- function PasswordReveal(element) {
2
- this.el = element;
3
- const $el = $(this.el);
4
-
5
- if ($el.data('moj-password-reveal-initialised')) {
6
- return
1
+ class PasswordReveal {
2
+ /**
3
+ * @param {Element | null} element - HTML element to use for password reveal
4
+ */
5
+ constructor(element) {
6
+ if (!element || !(element instanceof HTMLInputElement)) {
7
+ return this;
8
+ }
9
+ this.el = element;
10
+ this.container = element.parentElement;
11
+ if (this.container.hasAttribute('data-moj-password-reveal-init')) {
12
+ return this;
13
+ }
14
+ this.container.setAttribute('data-moj-password-reveal-init', '');
15
+ this.el.setAttribute('spellcheck', 'false');
16
+ this.createButton();
7
17
  }
8
-
9
- $el.data('moj-password-reveal-initialised', true);
10
- $el.attr('spellcheck', 'false');
11
-
12
- $el.wrap('<div class="moj-password-reveal"></div>');
13
- this.container = $(this.el).parent();
14
- this.createButton();
15
- }
16
-
17
- PasswordReveal.prototype.createButton = function () {
18
- this.button = $(
19
- '<button type="button" class="govuk-button govuk-button--secondary moj-password-reveal__button">Show <span class="govuk-visually-hidden">password</span></button>'
20
- );
21
- this.container.append(this.button);
22
- this.button.on('click', $.proxy(this, 'onButtonClick'));
23
- };
24
-
25
- PasswordReveal.prototype.onButtonClick = function () {
26
- if (this.el.type === 'password') {
27
- this.el.type = 'text';
28
- this.button.html('Hide <span class="govuk-visually-hidden">password</span>');
29
- } else {
30
- this.el.type = 'password';
31
- this.button.html('Show <span class="govuk-visually-hidden">password</span>');
18
+ createButton() {
19
+ this.group = document.createElement('div');
20
+ this.button = document.createElement('button');
21
+ this.button.setAttribute('type', 'button');
22
+ this.group.className = 'moj-password-reveal';
23
+ this.button.className = 'govuk-button govuk-button--secondary moj-password-reveal__button';
24
+ this.button.innerHTML = 'Show <span class="govuk-visually-hidden">password</span>';
25
+ this.button.addEventListener('click', this.onButtonClick.bind(this));
26
+ this.group.append(this.el, this.button);
27
+ this.container.append(this.group);
32
28
  }
33
- };
29
+ onButtonClick() {
30
+ if (this.el.type === 'password') {
31
+ this.el.type = 'text';
32
+ this.button.innerHTML = 'Hide <span class="govuk-visually-hidden">password</span>';
33
+ } else {
34
+ this.el.type = 'password';
35
+ this.button.innerHTML = 'Show <span class="govuk-visually-hidden">password</span>';
36
+ }
37
+ }
38
+ }
34
39
 
35
40
  export { PasswordReveal };
36
41
  //# sourceMappingURL=password-reveal.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"password-reveal.mjs","sources":["../../../../src/moj/components/password-reveal/password-reveal.mjs"],"sourcesContent":["import $ from 'jquery'\n\nexport function PasswordReveal(element) {\n this.el = element\n const $el = $(this.el)\n\n if ($el.data('moj-password-reveal-initialised')) {\n return\n }\n\n $el.data('moj-password-reveal-initialised', true)\n $el.attr('spellcheck', 'false')\n\n $el.wrap('<div class=\"moj-password-reveal\"></div>')\n this.container = $(this.el).parent()\n this.createButton()\n}\n\nPasswordReveal.prototype.createButton = function () {\n this.button = $(\n '<button type=\"button\" class=\"govuk-button govuk-button--secondary moj-password-reveal__button\">Show <span class=\"govuk-visually-hidden\">password</span></button>'\n )\n this.container.append(this.button)\n this.button.on('click', $.proxy(this, 'onButtonClick'))\n}\n\nPasswordReveal.prototype.onButtonClick = function () {\n if (this.el.type === 'password') {\n this.el.type = 'text'\n this.button.html('Hide <span class=\"govuk-visually-hidden\">password</span>')\n } else {\n this.el.type = 'password'\n this.button.html('Show <span class=\"govuk-visually-hidden\">password</span>')\n }\n}\n"],"names":[],"mappings":"AAEA,SAAA,cAAA,CAAA,OAAA,EAAA;AACA,EAAA,IAAA,CAAA,EAAA,GAAA;AACA,EAAA,MAAA,GAAA,GAAA,CAAA,CAAA,IAAA,CAAA,EAAA;;AAEA,EAAA,IAAA,GAAA,CAAA,IAAA,CAAA,iCAAA,CAAA,EAAA;AACA,IAAA;AACA;;AAEA,EAAA,GAAA,CAAA,IAAA,CAAA,iCAAA,EAAA,IAAA;AACA,EAAA,GAAA,CAAA,IAAA,CAAA,YAAA,EAAA,OAAA;;AAEA,EAAA,GAAA,CAAA,IAAA,CAAA,yCAAA;AACA,EAAA,IAAA,CAAA,SAAA,GAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,MAAA;AACA,EAAA,IAAA,CAAA,YAAA;AACA;;AAEA,cAAA,CAAA,SAAA,CAAA,YAAA,GAAA,YAAA;AACA,EAAA,IAAA,CAAA,MAAA,GAAA,CAAA;AACA,IAAA;AACA;AACA,EAAA,IAAA,CAAA,SAAA,CAAA,MAAA,CAAA,IAAA,CAAA,MAAA;AACA,EAAA,IAAA,CAAA,MAAA,CAAA,EAAA,CAAA,OAAA,EAAA,CAAA,CAAA,KAAA,CAAA,IAAA,EAAA,eAAA,CAAA;AACA;;AAEA,cAAA,CAAA,SAAA,CAAA,aAAA,GAAA,YAAA;AACA,EAAA,IAAA,IAAA,CAAA,EAAA,CAAA,IAAA,KAAA,UAAA,EAAA;AACA,IAAA,IAAA,CAAA,EAAA,CAAA,IAAA,GAAA;AACA,IAAA,IAAA,CAAA,MAAA,CAAA,IAAA,CAAA,0DAAA;AACA,GAAA,MAAA;AACA,IAAA,IAAA,CAAA,EAAA,CAAA,IAAA,GAAA;AACA,IAAA,IAAA,CAAA,MAAA,CAAA,IAAA,CAAA,0DAAA;AACA;AACA;;;;"}
1
+ {"version":3,"file":"password-reveal.mjs","sources":["../../../../src/moj/components/password-reveal/password-reveal.mjs"],"sourcesContent":["export class PasswordReveal {\n /**\n * @param {Element | null} element - HTML element to use for password reveal\n */\n constructor(element) {\n if (!element || !(element instanceof HTMLInputElement)) {\n return this\n }\n\n this.el = element\n this.container = element.parentElement\n\n if (this.container.hasAttribute('data-moj-password-reveal-init')) {\n return this\n }\n\n this.container.setAttribute('data-moj-password-reveal-init', '')\n\n this.el.setAttribute('spellcheck', 'false')\n this.createButton()\n }\n\n createButton() {\n this.group = document.createElement('div')\n this.button = document.createElement('button')\n\n this.button.setAttribute('type', 'button')\n\n this.group.className = 'moj-password-reveal'\n\n this.button.className =\n 'govuk-button govuk-button--secondary moj-password-reveal__button'\n\n this.button.innerHTML =\n 'Show <span class=\"govuk-visually-hidden\">password</span>'\n\n this.button.addEventListener('click', this.onButtonClick.bind(this))\n\n this.group.append(this.el, this.button)\n this.container.append(this.group)\n }\n\n onButtonClick() {\n if (this.el.type === 'password') {\n this.el.type = 'text'\n this.button.innerHTML =\n 'Hide <span class=\"govuk-visually-hidden\">password</span>'\n } else {\n this.el.type = 'password'\n this.button.innerHTML =\n 'Show <span class=\"govuk-visually-hidden\">password</span>'\n }\n }\n}\n"],"names":["PasswordReveal","constructor","element","HTMLInputElement","el","container","parentElement","hasAttribute","setAttribute","createButton","group","document","createElement","button","className","innerHTML","addEventListener","onButtonClick","bind","append","type"],"mappings":"AAAO,MAAMA,cAAc,CAAC;AAC1B;AACF;AACA;EACEC,WAAWA,CAACC,OAAO,EAAE;IACnB,IAAI,CAACA,OAAO,IAAI,EAAEA,OAAO,YAAYC,gBAAgB,CAAC,EAAE;AACtD,MAAA,OAAO,IAAI;AACb;IAEA,IAAI,CAACC,EAAE,GAAGF,OAAO;AACjB,IAAA,IAAI,CAACG,SAAS,GAAGH,OAAO,CAACI,aAAa;IAEtC,IAAI,IAAI,CAACD,SAAS,CAACE,YAAY,CAAC,+BAA+B,CAAC,EAAE;AAChE,MAAA,OAAO,IAAI;AACb;IAEA,IAAI,CAACF,SAAS,CAACG,YAAY,CAAC,+BAA+B,EAAE,EAAE,CAAC;IAEhE,IAAI,CAACJ,EAAE,CAACI,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC;IAC3C,IAAI,CAACC,YAAY,EAAE;AACrB;AAEAA,EAAAA,YAAYA,GAAG;IACb,IAAI,CAACC,KAAK,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAC1C,IAAI,CAACC,MAAM,GAAGF,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;IAE9C,IAAI,CAACC,MAAM,CAACL,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC;AAE1C,IAAA,IAAI,CAACE,KAAK,CAACI,SAAS,GAAG,qBAAqB;AAE5C,IAAA,IAAI,CAACD,MAAM,CAACC,SAAS,GACnB,kEAAkE;AAEpE,IAAA,IAAI,CAACD,MAAM,CAACE,SAAS,GACnB,0DAA0D;AAE5D,IAAA,IAAI,CAACF,MAAM,CAACG,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAACC,aAAa,CAACC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEpE,IAAA,IAAI,CAACR,KAAK,CAACS,MAAM,CAAC,IAAI,CAACf,EAAE,EAAE,IAAI,CAACS,MAAM,CAAC;IACvC,IAAI,CAACR,SAAS,CAACc,MAAM,CAAC,IAAI,CAACT,KAAK,CAAC;AACnC;AAEAO,EAAAA,aAAaA,GAAG;AACd,IAAA,IAAI,IAAI,CAACb,EAAE,CAACgB,IAAI,KAAK,UAAU,EAAE;AAC/B,MAAA,IAAI,CAAChB,EAAE,CAACgB,IAAI,GAAG,MAAM;AACrB,MAAA,IAAI,CAACP,MAAM,CAACE,SAAS,GACnB,0DAA0D;AAC9D,KAAC,MAAM;AACL,MAAA,IAAI,CAACX,EAAE,CAACgB,IAAI,GAAG,UAAU;AACzB,MAAA,IAAI,CAACP,MAAM,CAACE,SAAS,GACnB,0DAA0D;AAC9D;AACF;AACF;;;;"}
@@ -132,3 +132,5 @@
132
132
  vertical-align: middle;
133
133
  }
134
134
  }
135
+
136
+ /*# sourceMappingURL=_primary-navigation.scss.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/moj/components/primary-navigation/_primary-navigation.scss"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,4CAA4C;AAC9C;;AAEA;EACE,YAAY,EAAE,kCAAkC;EAChD,mBAAmB,EAAE,qCAAqC;EAC1D,4BAA4B;;EAE5B;IACE,WAAW;IACX,qBAAqB;IACrB,WAAW;EACb;AACF;;AAEA;EACE,gBAAgB;EAChB;IACE,qBAAqB;IACrB,sBAAsB;EACxB;AACF;;AAEA;EACE,SAAS;EACT,UAAU;EACV,YAAY,EAAE,+DAA+D;EAC7E,gBAAgB;AAClB;;AAEA;EACE,qBAAqB;EACrB,aAAa;EACb,8BAA8B;EAC9B,8BAA8B;;EAE9B;IACE,eAAe;EACjB;AACF;;AAEA;EACE,cAAc;EACd,iBAAiB;EACjB,oBAAoB;EACpB,iBAAiB;EACjB,0BAA0B;EAC1B,iCAAiC;;EAEjC;;;;IAIE,qBAAqB;EACvB;;EAEA;;IAEE,yBAAyB;EAC3B;;EAEA;IACE,+BAA+B;EACjC;;EAEA;IACE,kBAAkB,EAAE,0CAA0C;IAC9D,UAAU;IACV,4BAA4B,EAAE,gDAAgD;IAC9E,gBAAgB;EAClB;;EAEA;IACE,WAAW;IACX,cAAc;IACd,kBAAkB;IAClB,SAAS;IACT,OAAO;IACP,WAAW;IACX,WAAW;IACX,uCAAuC;EACzC;;EAEA;IACE,kBAAkB;IAClB,yBAAyB;IACzB,iBAAiB;IACjB,qBAAqB;;IAErB;MACE,WAAW;MACX,cAAc;MACd,kBAAkB;MAClB,SAAS;MACT,OAAO;MACP,WAAW;MACX,WAAW;MACX,oCAAoC;IACtC;;IAEA;MACE,+BAA+B;;MAE/B;QACE,0CAA0C;MAC5C;IACF;;IAEA;MACE,kBAAkB,EAAE,0CAA0C;MAC9D,YAAY;MACZ,4BAA4B,EAAE,gDAAgD;;MAE9E;QACE,uCAAuC;MACzC;IACF;EACF;AACF;;AAEA;EACE;IACE,qBAAqB;IACrB,sBAAsB;EACxB;AACF","file":"_primary-navigation.scss","sourcesContent":["@use \"../../objects/width-container\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n #PRIMARY NAVIGATION\n ========================================================================== */\n\n.moj-primary-navigation {\n background-color: govuk-colour(\"light-grey\");\n}\n\n.moj-primary-navigation__container {\n font-size: 0; // Hide whitespace between elements\n text-align: justify; // Trick to remove the need for floats\n @include moj-width-container;\n\n &::after {\n content: \"\";\n display: inline-block;\n width: 100%;\n }\n}\n\n.moj-primary-navigation__nav {\n text-align: left;\n @include govuk-media-query($from: desktop) {\n display: inline-block;\n vertical-align: middle;\n }\n}\n\n.moj-primary-navigation__list {\n margin: 0;\n padding: 0;\n font-size: 0; // Removes white space when using inline-block on child element.\n list-style: none;\n}\n\n.moj-primary-navigation__item {\n display: inline-block;\n margin-top: 0;\n margin-right: govuk-spacing(4);\n @include govuk-font($size: 19);\n\n &:last-child {\n margin-right: 0;\n }\n}\n\n.moj-primary-navigation__link {\n display: block;\n padding-top: 15px;\n padding-bottom: 15px;\n font-weight: bold;\n @include govuk-link-common;\n @include govuk-link-style-default;\n\n &:link,\n &:visited,\n &:hover,\n &:active {\n text-decoration: none;\n }\n\n &:link,\n &:visited {\n color: $govuk-link-colour;\n }\n\n &:hover {\n color: $govuk-link-hover-colour;\n }\n\n &:focus {\n position: relative; // Ensure focus sits above everything else.\n z-index: 1;\n color: govuk-colour(\"black\"); // Focus colour on yellow should really be black.\n box-shadow: none;\n }\n\n &:focus::before {\n content: \"\";\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 5px;\n background-color: govuk-colour(\"black\");\n }\n\n &[aria-current] {\n position: relative;\n color: $govuk-link-colour;\n font-weight: bold;\n text-decoration: none;\n\n &::before {\n content: \"\";\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 5px;\n background-color: $govuk-link-colour;\n }\n\n &:hover {\n color: $govuk-link-hover-colour;\n\n &::before {\n background-color: $govuk-link-hover-colour;\n }\n }\n\n &:focus {\n position: relative; // Ensure focus sits above everything else.\n border: none;\n color: govuk-colour(\"black\"); // Focus colour on yellow should really be black.\n\n &::before {\n background-color: govuk-colour(\"black\");\n }\n }\n }\n}\n\n.moj-primary-navigation__search {\n @include govuk-media-query($from: desktop) {\n display: inline-block;\n vertical-align: middle;\n }\n}\n"]}
@@ -101,3 +101,5 @@
101
101
  word-wrap: break-word; // Just in case
102
102
  @include govuk-font(16);
103
103
  }
104
+
105
+ /*# sourceMappingURL=_progress-bar.scss.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/moj/components/progress-bar/_progress-bar.scss"],"names":[],"mappings":"AAAA,iCAAiC;AACjC,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,+BAA+B;AACjC;;AAEA;EACE,kBAAkB;EAClB,SAAS;EACT,UAAU;EACV,YAAY,EAAE,mCAAmC;EACjD,gBAAgB;EAChB,mBAAmB;EACnB,mBAAmB;;EAEnB;IACE,WAAW;IACX,qBAAqB;IACrB,WAAW;EACb;;EAEA;IACE,WAAW;IACX,kBAAkB;IAClB,SAAS;IACT,OAAO;IACP,WAAW;IACX,2CAA2C;EAC7C;AACF;;AAEA;EACE,qBAAqB;EACrB,kBAAkB;EAClB,cAAc;EACd,kBAAkB;EAClB,mBAAmB;EACnB,uBAAuB;;EAEvB;;IAEE;MACE,WAAW;MACX,kBAAkB;MAClB,SAAS;MACT,OAAO;MACP,UAAU;MACV,2CAA2C;IAC7C;EACF;;EAEA;IACE;MACE,OAAO;IACT;EACF;;EAEA;IACE;MACE,QAAQ;MACR,UAAU;IACZ;EACF;;EAEA;IACE,kDAAkD;IAClD,+CAA+C;EACjD;AACF;;AAEA;EACE,sBAAsB;EACtB,cAAc;EACd,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,iBAAiB;EACjB,uCAAuC;EACvC,kBAAkB;EAClB,uCAAuC;AACzC;;AAEA;EACE,uCAAuC;EACvC,gEAAgE;EAChE,4BAA4B;EAC5B,4BAA4B;AAC9B;;AAEA;EACE,cAAc;EACd,kBAAkB;EAClB,4BAA4B;EAC5B,oBAAoB;EACpB,qBAAqB,EAAE,cAAc;EACrC,uBAAuB;AACzB","file":"_progress-bar.scss","sourcesContent":["@use \"../../settings/assets\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n #PROGRESS BAR\n ========================================================================== */\n\n.moj-progress-bar {\n margin-bottom: govuk-spacing(7);\n}\n\n.moj-progress-bar__list {\n position: relative;\n margin: 0;\n padding: 0;\n font-size: 0; // Hide white space between elements\n list-style: none;\n text-align: justify;\n vertical-align: top;\n\n &::after {\n content: \"\";\n display: inline-block;\n width: 100%;\n }\n\n &::before {\n content: \"\";\n position: absolute;\n top: 13px;\n left: 0;\n width: 100%;\n border-top: 6px solid govuk-colour(\"green\");\n }\n}\n\n.moj-progress-bar__item {\n display: inline-block;\n position: relative;\n max-width: 20%;\n text-align: center;\n vertical-align: top;\n @include govuk-font(19);\n\n &:first-child,\n &:last-child {\n &::before {\n content: \"\";\n position: absolute;\n top: 13px;\n left: 0;\n width: 50%;\n border-top: 6px solid govuk-colour(\"white\");\n }\n }\n\n &:first-child {\n &::before {\n left: 0;\n }\n }\n\n &:last-child {\n &::before {\n right: 0;\n left: auto;\n }\n }\n\n &[aria-current=\"step\"] {\n // https://tink.uk/using-the-aria-current-attribute\n @include govuk-font($size: 19, $weight: \"bold\");\n }\n}\n\n.moj-progress-bar__icon {\n box-sizing: border-box;\n display: block;\n position: relative;\n width: 32px;\n height: 32px;\n margin-right: auto;\n margin-left: auto;\n border: 6px solid govuk-colour(\"green\");\n border-radius: 50%;\n background-color: govuk-colour(\"white\");\n}\n\n.moj-progress-bar__icon--complete {\n background-color: govuk-colour(\"green\");\n background-image: url(#{$moj-images-path}icon-progress-tick.svg);\n background-repeat: no-repeat;\n background-position: 50% 50%;\n}\n\n.moj-progress-bar__label {\n display: block;\n position: relative;\n margin-top: govuk-spacing(3);\n font-weight: inherit;\n word-wrap: break-word; // Just in case\n @include govuk-font(16);\n}\n"]}