@ministryofjustice/frontend 5.0.0 → 5.1.1

package/moj/all.mjs

@@ -1,3 +1,5 @@
+import { createAll } from 'govuk-frontend';
+export { version } from './common/moj-frontend-version.mjs';
 import { AddAnother } from './components/add-another/add-another.mjs';
 import { Alert } from './components/alert/alert.mjs';
 import { ButtonMenu } from './components/button-menu/button-menu.mjs';
@@ -10,107 +12,22 @@ import { PasswordReveal } from './components/password-reveal/password-reveal.mjs
 import { RichTextEditor } from './components/rich-text-editor/rich-text-editor.mjs';
 import { SearchToggle } from './components/search-toggle/search-toggle.mjs';
 import { SortableTable } from './components/sortable-table/sortable-table.mjs';
-export { version } from './version.mjs';
-
-/* eslint-disable no-new */
-
 
 /**
  * @param {Config} [config]
  */
 function initAll(config) {
-  // Set the config to an empty object by default if no config is passed.
-  config = typeof config !== 'undefined' ? config : {};
-
-  // Allow the user to initialise MOJ Frontend in only certain sections of the page
-  // Defaults to the entire document if nothing is set.
-  const scope = typeof config.scope !== 'undefined' ? config.scope : document;
-  const $addAnothers = scope.querySelectorAll('[data-module="moj-add-another"]');
-  $addAnothers.forEach($addAnother => {
-    new AddAnother($addAnother);
-  });
-  const $multiSelects = scope.querySelectorAll('[data-module="moj-multi-select"]');
-  $multiSelects.forEach($multiSelect => {
-    const containerSelector = $multiSelect.getAttribute('data-multi-select-checkbox');
-    if (!($multiSelect instanceof HTMLElement) || !containerSelector) {
-      return;
-    }
-    new MultiSelect({
-      container: $multiSelect.querySelector(containerSelector),
-      checkboxes: $multiSelect.querySelectorAll('tbody .govuk-checkboxes__input'),
-      id_prefix: $multiSelect.getAttribute('data-multi-select-idprefix')
-    });
-  });
-  const $passwordReveals = scope.querySelectorAll('[data-module="moj-password-reveal"]');
-  $passwordReveals.forEach($passwordReveal => {
-    new PasswordReveal($passwordReveal);
-  });
-  const $richTextEditors = scope.querySelectorAll('[data-module="moj-rich-text-editor"]');
-  $richTextEditors.forEach($richTextEditor => {
-    const options = {
-      textarea: $richTextEditor
-    };
-    const toolbarAttr = $richTextEditor.getAttribute('data-moj-rich-text-editor-toolbar');
-    if (toolbarAttr) {
-      const toolbar = toolbarAttr.split(',');
-      options.toolbar = {};
-      for (const option of toolbar) {
-        if (option === 'bold' || option === 'italic' || option === 'underline' || option === 'bullets' || option === 'numbers') {
-          options.toolbar[option] = true;
-        }
-      }
-    }
-    new RichTextEditor(options);
-  });
-  const $searchToggles = scope.querySelectorAll('[data-module="moj-search-toggle"]');
-  $searchToggles.forEach($searchToggle => {
-    new SearchToggle({
-      toggleButton: {
-        container: $searchToggle.querySelector('.moj-search-toggle__toggle'),
-        text: $searchToggle.getAttribute('data-moj-search-toggle-text')
-      },
-      search: {
-        container: $searchToggle.querySelector('.moj-search')
-      }
-    });
-  });
-  const $sortableTables = scope.querySelectorAll('[data-module="moj-sortable-table"]');
-  $sortableTables.forEach($table => {
-    new SortableTable({
-      table: $table
-    });
-  });
-  const $datePickers = scope.querySelectorAll('[data-module="moj-date-picker"]');
-  $datePickers.forEach($datePicker => {
-    new DatePicker($datePicker);
-  });
-  const $buttonMenus = scope.querySelectorAll('[data-module="moj-button-menu"]');
-  $buttonMenus.forEach($buttonmenu => {
-    new ButtonMenu($buttonmenu);
-  });
-  const $alerts = scope.querySelectorAll('[data-module="moj-alert"]');
-  $alerts.forEach($alert => {
-    new Alert($alert);
-  });
+  for (const Component of [AddAnother, Alert, ButtonMenu, DatePicker, MultiSelect, PasswordReveal, RichTextEditor, SearchToggle, SortableTable]) {
+    createAll(Component, undefined, config);
+  }
 }
 
 /**
- * @typedef {object} Config
- * @property {Element} [scope=document] - Scope to query for components
- */
-
-/**
- * Schema for component config
- *
- * @typedef {object} Schema
- * @property {{ [field: string]: SchemaProperty | undefined }} properties - Schema properties
+ * @typedef {Parameters<typeof GOVUKFrontend.initAll>[0]} Config
  */
 
 /**
- * Schema property for component config
- *
- * @typedef {object} SchemaProperty
- * @property {'string' | 'boolean' | 'number' | 'object'} type - Property type
+ * @import * as GOVUKFrontend from 'govuk-frontend'
  */
 
 export { AddAnother, Alert, ButtonMenu, DatePicker, MultiSelect, PasswordReveal, RichTextEditor, SearchToggle, SortableTable, initAll };

package/moj/all.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"all.mjs","sources":["../../src/moj/all.mjs"],"sourcesContent":["/* eslint-disable no-new */\n\nimport { AddAnother } from './components/add-another/add-another.mjs'\nimport { Alert } from './components/alert/alert.mjs'\nimport { ButtonMenu } from './components/button-menu/button-menu.mjs'\nimport { DatePicker } from './components/date-picker/date-picker.mjs'\nimport { FilterToggleButton } from './components/filter-toggle-button/filter-toggle-button.mjs'\nimport { FormValidator } from './components/form-validator/form-validator.mjs'\nimport { MultiFileUpload } from './components/multi-file-upload/multi-file-upload.mjs'\nimport { MultiSelect } from './components/multi-select/multi-select.mjs'\nimport { PasswordReveal } from './components/password-reveal/password-reveal.mjs'\nimport { RichTextEditor } from './components/rich-text-editor/rich-text-editor.mjs'\nimport { SearchToggle } from './components/search-toggle/search-toggle.mjs'\nimport { SortableTable } from './components/sortable-table/sortable-table.mjs'\nimport { version } from './version.mjs'\n\n/**\n * @param {Config} [config]\n */\nfunction initAll(config) {\n  // Set the config to an empty object by default if no config is passed.\n  config = typeof config !== 'undefined' ? config : {}\n\n  // Allow the user to initialise MOJ Frontend in only certain sections of the page\n  // Defaults to the entire document if nothing is set.\n  const scope = typeof config.scope !== 'undefined' ? config.scope : document\n\n  const $addAnothers = scope.querySelectorAll('[data-module=\"moj-add-another\"]')\n\n  $addAnothers.forEach(($addAnother) => {\n    new AddAnother($addAnother)\n  })\n\n  const $multiSelects = scope.querySelectorAll(\n    '[data-module=\"moj-multi-select\"]'\n  )\n\n  $multiSelects.forEach(($multiSelect) => {\n    const containerSelector = $multiSelect.getAttribute(\n      'data-multi-select-checkbox'\n    )\n\n    if (!($multiSelect instanceof HTMLElement) || !containerSelector) {\n      return\n    }\n\n    new MultiSelect({\n      container: $multiSelect.querySelector(containerSelector),\n      checkboxes: $multiSelect.querySelectorAll(\n        'tbody .govuk-checkboxes__input'\n      ),\n      id_prefix: $multiSelect.getAttribute('data-multi-select-idprefix')\n    })\n  })\n\n  const $passwordReveals = scope.querySelectorAll(\n    '[data-module=\"moj-password-reveal\"]'\n  )\n\n  $passwordReveals.forEach(($passwordReveal) => {\n    new PasswordReveal($passwordReveal)\n  })\n\n  const $richTextEditors = scope.querySelectorAll(\n    '[data-module=\"moj-rich-text-editor\"]'\n  )\n\n  $richTextEditors.forEach(($richTextEditor) => {\n    const options = {\n      textarea: $richTextEditor\n    }\n\n    const toolbarAttr = $richTextEditor.getAttribute(\n      'data-moj-rich-text-editor-toolbar'\n    )\n\n    if (toolbarAttr) {\n      const toolbar = toolbarAttr.split(',')\n\n      options.toolbar = {}\n\n      for (const option of toolbar) {\n        if (\n          option === 'bold' ||\n          option === 'italic' ||\n          option === 'underline' ||\n          option === 'bullets' ||\n          option === 'numbers'\n        ) {\n          options.toolbar[option] = true\n        }\n      }\n    }\n\n    new RichTextEditor(options)\n  })\n\n  const $searchToggles = scope.querySelectorAll(\n    '[data-module=\"moj-search-toggle\"]'\n  )\n\n  $searchToggles.forEach(($searchToggle) => {\n    new SearchToggle({\n      toggleButton: {\n        container: $searchToggle.querySelector('.moj-search-toggle__toggle'),\n        text: $searchToggle.getAttribute('data-moj-search-toggle-text')\n      },\n      search: {\n        container: $searchToggle.querySelector('.moj-search')\n      }\n    })\n  })\n\n  const $sortableTables = scope.querySelectorAll(\n    '[data-module=\"moj-sortable-table\"]'\n  )\n\n  $sortableTables.forEach(($table) => {\n    new SortableTable({\n      table: $table\n    })\n  })\n\n  const $datePickers = scope.querySelectorAll('[data-module=\"moj-date-picker\"]')\n\n  $datePickers.forEach(($datePicker) => {\n    new DatePicker($datePicker)\n  })\n\n  const $buttonMenus = scope.querySelectorAll('[data-module=\"moj-button-menu\"]')\n\n  $buttonMenus.forEach(($buttonmenu) => {\n    new ButtonMenu($buttonmenu)\n  })\n\n  const $alerts = scope.querySelectorAll('[data-module=\"moj-alert\"]')\n  $alerts.forEach(($alert) => {\n    new Alert($alert)\n  })\n}\n\nexport {\n  initAll,\n  version,\n\n  // Components\n  AddAnother,\n  Alert,\n  ButtonMenu,\n  DatePicker,\n  FilterToggleButton,\n  FormValidator,\n  MultiFileUpload,\n  MultiSelect,\n  PasswordReveal,\n  RichTextEditor,\n  SearchToggle,\n  SortableTable\n}\n\n/**\n * @typedef {object} Config\n * @property {Element} [scope=document] - Scope to query for components\n */\n\n/**\n * Schema for component config\n *\n * @typedef {object} Schema\n * @property {{ [field: string]: SchemaProperty | undefined }} properties - Schema properties\n */\n\n/**\n * Schema property for component config\n *\n * @typedef {object} SchemaProperty\n * @property {'string' | 'boolean' | 'number' | 'object'} type - Property type\n */\n"],"names":["initAll","config","scope","document","$addAnothers","querySelectorAll","forEach","$addAnother","AddAnother","$multiSelects","$multiSelect","containerSelector","getAttribute","HTMLElement","MultiSelect","container","querySelector","checkboxes","id_prefix","$passwordReveals","$passwordReveal","PasswordReveal","$richTextEditors","$richTextEditor","options","textarea","toolbarAttr","toolbar","split","option","RichTextEditor","$searchToggles","$searchToggle","SearchToggle","toggleButton","text","search","$sortableTables","$table","SortableTable","table","$datePickers","$datePicker","DatePicker","$buttonMenus","$buttonmenu","ButtonMenu","$alerts","$alert","Alert"],"mappings":"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"}
+{"version":3,"file":"all.mjs","sources":["../../src/moj/all.mjs"],"sourcesContent":["import { createAll } from 'govuk-frontend'\n\nimport { version } from './common/moj-frontend-version.mjs'\nimport { AddAnother } from './components/add-another/add-another.mjs'\nimport { Alert } from './components/alert/alert.mjs'\nimport { ButtonMenu } from './components/button-menu/button-menu.mjs'\nimport { DatePicker } from './components/date-picker/date-picker.mjs'\nimport { FilterToggleButton } from './components/filter-toggle-button/filter-toggle-button.mjs'\nimport { FormValidator } from './components/form-validator/form-validator.mjs'\nimport { MultiFileUpload } from './components/multi-file-upload/multi-file-upload.mjs'\nimport { MultiSelect } from './components/multi-select/multi-select.mjs'\nimport { PasswordReveal } from './components/password-reveal/password-reveal.mjs'\nimport { RichTextEditor } from './components/rich-text-editor/rich-text-editor.mjs'\nimport { SearchToggle } from './components/search-toggle/search-toggle.mjs'\nimport { SortableTable } from './components/sortable-table/sortable-table.mjs'\n\n/**\n * @param {Config} [config]\n */\nfunction initAll(config) {\n  for (const Component of [\n    AddAnother,\n    Alert,\n    ButtonMenu,\n    DatePicker,\n    MultiSelect,\n    PasswordReveal,\n    RichTextEditor,\n    SearchToggle,\n    SortableTable\n  ]) {\n    createAll(Component, undefined, config)\n  }\n}\n\nexport {\n  initAll,\n  version,\n\n  // Components\n  AddAnother,\n  Alert,\n  ButtonMenu,\n  DatePicker,\n  FilterToggleButton,\n  FormValidator,\n  MultiFileUpload,\n  MultiSelect,\n  PasswordReveal,\n  RichTextEditor,\n  SearchToggle,\n  SortableTable\n}\n\n/**\n * @typedef {Parameters<typeof GOVUKFrontend.initAll>[0]} Config\n */\n\n/**\n * @import * as GOVUKFrontend from 'govuk-frontend'\n */\n"],"names":["initAll","config","Component","AddAnother","Alert","ButtonMenu","DatePicker","MultiSelect","PasswordReveal","RichTextEditor","SearchToggle","SortableTable","createAll","undefined"],"mappings":";;;;;;;;;;;;;;;AAgBA;AACA;AACA;AACA,SAASA,OAAOA,CAACC,MAAM,EAAE;EACvB,KAAK,MAAMC,SAAS,IAAI,CACtBC,UAAU,EACVC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,cAAc,EACdC,cAAc,EACdC,YAAY,EACZC,aAAa,CACd,EAAE;AACDC,IAAAA,SAAS,CAACV,SAAS,EAAEW,SAAS,EAAEZ,MAAM,CAAC;AACzC;AACF;;AAqBA;AACA;AACA;;AAEA;AACA;AACA;;;;"}

package/moj/all.scss

@@ -1,4 +1,5 @@
 @forward "base";
+@forward "core/all";
 @forward "objects/all";
 @forward "components/all";
 @forward "utilities/all";

package/moj/all.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/moj/all.scss"],"names":[],"mappings":"AAAA,eAAe;AACf,sBAAsB;AACtB,yBAAyB;AACzB,wBAAwB","file":"all.scss","sourcesContent":["@forward \"base\";\n@forward \"objects/all\";\n@forward \"components/all\";\n@forward \"utilities/all\";\n"]}
+{"version":3,"sources":["../../src/moj/all.scss"],"names":[],"mappings":"AAAA,eAAe;AACf,mBAAmB;AACnB,sBAAsB;AACtB,yBAAyB;AACzB,wBAAwB","file":"all.scss","sourcesContent":["@forward \"base\";\n@forward \"core/all\";\n@forward \"objects/all\";\n@forward \"components/all\";\n@forward \"utilities/all\";\n"]}

package/moj/common/index.mjs

@@ -0,0 +1,57 @@
+/**
+ * GOV.UK Frontend helpers
+ *
+ * @todo Import from GOV.UK Frontend
+ */
+
+/**
+ * Move focus to element
+ *
+ * Sets tabindex to -1 to make the element programmatically focusable,
+ * but removes it on blur as the element doesn't need to be focused again.
+ *
+ * @template {HTMLElement} FocusElement
+ * @param {FocusElement} $element - HTML element
+ * @param {object} [options] - Handler options
+ * @param {function(this: FocusElement): void} [options.onBeforeFocus] - Callback before focus
+ * @param {function(this: FocusElement): void} [options.onBlur] - Callback on blur
+ */
+function setFocus($element, options = {}) {
+  var _options$onBeforeFocu;
+  const isFocusable = $element.getAttribute('tabindex');
+  if (!isFocusable) {
+    $element.setAttribute('tabindex', '-1');
+  }
+
+  /**
+   * Handle element focus
+   */
+  function onFocus() {
+    $element.addEventListener('blur', onBlur, {
+      once: true
+    });
+  }
+
+  /**
+   * Handle element blur
+   */
+  function onBlur() {
+    var _options$onBlur;
+    (_options$onBlur = options.onBlur) == null || _options$onBlur.call($element);
+    if (!isFocusable) {
+      $element.removeAttribute('tabindex');
+    }
+  }
+
+  // Add listener to reset element on blur, after focus
+  $element.addEventListener('focus', onFocus, {
+    once: true
+  });
+
+  // Focus element
+  (_options$onBeforeFocu = options.onBeforeFocus) == null || _options$onBeforeFocu.call($element);
+  $element.focus();
+}
+
+export { setFocus };
+//# sourceMappingURL=index.mjs.map

package/moj/common/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../src/moj/common/index.mjs"],"sourcesContent":["/**\n * GOV.UK Frontend helpers\n *\n * @todo Import from GOV.UK Frontend\n */\n\n/**\n * Move focus to element\n *\n * Sets tabindex to -1 to make the element programmatically focusable,\n * but removes it on blur as the element doesn't need to be focused again.\n *\n * @template {HTMLElement} FocusElement\n * @param {FocusElement} $element - HTML element\n * @param {object} [options] - Handler options\n * @param {function(this: FocusElement): void} [options.onBeforeFocus] - Callback before focus\n * @param {function(this: FocusElement): void} [options.onBlur] - Callback on blur\n */\nexport function setFocus($element, options = {}) {\n  const isFocusable = $element.getAttribute('tabindex')\n\n  if (!isFocusable) {\n    $element.setAttribute('tabindex', '-1')\n  }\n\n  /**\n   * Handle element focus\n   */\n  function onFocus() {\n    $element.addEventListener('blur', onBlur, { once: true })\n  }\n\n  /**\n   * Handle element blur\n   */\n  function onBlur() {\n    options.onBlur?.call($element)\n\n    if (!isFocusable) {\n      $element.removeAttribute('tabindex')\n    }\n  }\n\n  // Add listener to reset element on blur, after focus\n  $element.addEventListener('focus', onFocus, { once: true })\n\n  // Focus element\n  options.onBeforeFocus?.call($element)\n  $element.focus()\n}\n"],"names":["setFocus","$element","options","_options$onBeforeFocu","isFocusable","getAttribute","setAttribute","onFocus","addEventListener","onBlur","once","_options$onBlur","call","removeAttribute","onBeforeFocus","focus"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,QAAQA,CAACC,QAAQ,EAAEC,OAAO,GAAG,EAAE,EAAE;AAAA,EAAA,IAAAC,qBAAA;AAC/C,EAAA,MAAMC,WAAW,GAAGH,QAAQ,CAACI,YAAY,CAAC,UAAU,CAAC;EAErD,IAAI,CAACD,WAAW,EAAE;AAChBH,IAAAA,QAAQ,CAACK,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC;AACzC;;AAEA;AACF;AACA;EACE,SAASC,OAAOA,GAAG;AACjBN,IAAAA,QAAQ,CAACO,gBAAgB,CAAC,MAAM,EAAEC,MAAM,EAAE;AAAEC,MAAAA,IAAI,EAAE;AAAK,KAAC,CAAC;AAC3D;;AAEA;AACF;AACA;EACE,SAASD,MAAMA,GAAG;AAAA,IAAA,IAAAE,eAAA;IAChB,CAAAA,eAAA,GAAAT,OAAO,CAACO,MAAM,KAAdE,IAAAA,IAAAA,eAAA,CAAgBC,IAAI,CAACX,QAAQ,CAAC;IAE9B,IAAI,CAACG,WAAW,EAAE;AAChBH,MAAAA,QAAQ,CAACY,eAAe,CAAC,UAAU,CAAC;AACtC;AACF;;AAEA;AACAZ,EAAAA,QAAQ,CAACO,gBAAgB,CAAC,OAAO,EAAED,OAAO,EAAE;AAAEG,IAAAA,IAAI,EAAE;AAAK,GAAC,CAAC;;AAE3D;EACA,CAAAP,qBAAA,GAAAD,OAAO,CAACY,aAAa,KAArBX,IAAAA,IAAAA,qBAAA,CAAuBS,IAAI,CAACX,QAAQ,CAAC;EACrCA,QAAQ,CAACc,KAAK,EAAE;AAClB;;;;"}

package/moj/common/moj-frontend-version.mjs

@@ -0,0 +1,14 @@
+/*
+ * This variable is automatically overwritten during builds and releases.
+ * It doesn't need to be updated manually.
+ */
+
+/**
+ * MoJ Frontend release version
+ *
+ * {@link https://github.com/ministryofjustice/moj-frontend/releases}
+ */
+const version = '5.1.1';
+
+export { version };
+//# sourceMappingURL=moj-frontend-version.mjs.map

package/moj/common/moj-frontend-version.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"moj-frontend-version.mjs","sources":["../../../src/moj/common/moj-frontend-version.mjs"],"sourcesContent":["/*\n * This variable is automatically overwritten during builds and releases.\n * It doesn't need to be updated manually.\n */\n\n/**\n * MoJ Frontend release version\n *\n * {@link https://github.com/ministryofjustice/moj-frontend/releases}\n */\nexport const version = 'development'\n"],"names":["version"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACO,MAAMA,OAAO,GAAG;;;;"}

package/moj/components/add-another/add-another.bundle.js

@@ -1,126 +1,155 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MOJFrontend = global.MOJFrontend || {}));
-})(this, (function (exports) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('govuk-frontend')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'govuk-frontend'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MOJFrontend = global.MOJFrontend || {}, global.GOVUKFrontend));
+})(this, (function (exports, govukFrontend) { 'use strict';
 
-  class AddAnother {
-    constructor(container) {
-      this.container = container;
-      if (this.container.hasAttribute('data-moj-add-another-init')) {
-        return this;
-      }
-      this.container.setAttribute('data-moj-add-another-init', '');
-      this.container.addEventListener('click', this.onRemoveButtonClick.bind(this));
-      this.container.addEventListener('click', this.onAddButtonClick.bind(this));
-      const buttons = this.container.querySelectorAll('.moj-add-another__add-button, moj-add-another__remove-button');
-      buttons.forEach(button => {
-        if (!(button instanceof HTMLButtonElement)) {
+  class AddAnother extends govukFrontend.Component {
+    /**
+     * @param {Element | null} $root - HTML element to use for add another
+     */
+    constructor($root) {
+      super($root);
+      this.$root.addEventListener('click', this.onRemoveButtonClick.bind(this));
+      this.$root.addEventListener('click', this.onAddButtonClick.bind(this));
+      const $buttons = this.$root.querySelectorAll('.moj-add-another__add-button, moj-add-another__remove-button');
+      $buttons.forEach($button => {
+        if (!($button instanceof HTMLButtonElement)) {
           return;
         }
-        button.type = 'button';
+        $button.type = 'button';
       });
     }
+
+    /**
+     * @param {MouseEvent} event - Click event
+     */
     onAddButtonClick(event) {
-      const button = event.target;
-      if (!button || !(button instanceof HTMLButtonElement) || !button.classList.contains('moj-add-another__add-button')) {
+      const $button = event.target;
+      if (!$button || !($button instanceof HTMLButtonElement) || !$button.classList.contains('moj-add-another__add-button')) {
         return;
       }
-      const items = this.getItems();
-      const item = this.getNewItem();
-      if (!item || !(item instanceof HTMLElement)) {
+      const $items = this.getItems();
+      const $item = this.getNewItem();
+      if (!$item || !($item instanceof HTMLElement)) {
         return;
       }
-      this.updateAttributes(item, items.length);
-      this.resetItem(item);
-      const firstItem = items[0];
-      if (!this.hasRemoveButton(firstItem)) {
-        this.createRemoveButton(firstItem);
+      this.updateAttributes($item, $items.length);
+      this.resetItem($item);
+      const $firstItem = $items[0];
+      if (!this.hasRemoveButton($firstItem)) {
+        this.createRemoveButton($firstItem);
       }
-      items[items.length - 1].after(item);
-      const input = item.querySelector('input, textarea, select');
-      if (input && input instanceof HTMLInputElement) {
-        input.focus();
+      $items[$items.length - 1].after($item);
+      const $input = $item.querySelector('input, textarea, select');
+      if ($input && $input instanceof HTMLInputElement) {
+        $input.focus();
       }
     }
-    hasRemoveButton(item) {
-      return item.querySelectorAll('.moj-add-another__remove-button').length;
+
+    /**
+     * @param {HTMLElement} $item - Add another item
+     */
+    hasRemoveButton($item) {
+      return $item.querySelectorAll('.moj-add-another__remove-button').length;
     }
     getItems() {
-      if (!this.container) {
+      if (!this.$root) {
         return [];
       }
-      const items = Array.from(this.container.querySelectorAll('.moj-add-another__item'));
-      return items.filter(item => item instanceof HTMLElement);
+      const $items = Array.from(this.$root.querySelectorAll('.moj-add-another__item'));
+      return $items.filter(item => item instanceof HTMLElement);
     }
     getNewItem() {
-      const items = this.getItems();
-      const item = items[0].cloneNode(true);
-      if (!item || !(item instanceof HTMLElement)) {
+      const $items = this.getItems();
+      const $item = $items[0].cloneNode(true);
+      if (!$item || !($item instanceof HTMLElement)) {
         return;
       }
-      if (!this.hasRemoveButton(item)) {
-        this.createRemoveButton(item);
+      if (!this.hasRemoveButton($item)) {
+        this.createRemoveButton($item);
       }
-      return item;
+      return $item;
     }
-    updateAttributes(item, index) {
-      item.querySelectorAll('[data-name]').forEach(el => {
-        if (!(el instanceof HTMLInputElement)) {
+
+    /**
+     * @param {HTMLElement} $item - Add another item
+     * @param {number} index - Add another item index
+     */
+    updateAttributes($item, index) {
+      $item.querySelectorAll('[data-name]').forEach($input => {
+        if (!($input instanceof HTMLInputElement)) {
           return;
         }
-        const name = el.getAttribute('data-name') || '';
-        const id = el.getAttribute('data-id') || '';
-        const originalId = el.id;
-        el.name = name.replace(/%index%/, `${index}`);
-        el.id = id.replace(/%index%/, `${index}`);
-        const label = el.parentElement.querySelector('label') || el.closest('label') || item.querySelector(`[for="${originalId}"]`);
-        if (label && label instanceof HTMLLabelElement) {
-          label.htmlFor = el.id;
+        const name = $input.getAttribute('data-name') || '';
+        const id = $input.getAttribute('data-id') || '';
+        const originalId = $input.id;
+        $input.name = name.replace(/%index%/, `${index}`);
+        $input.id = id.replace(/%index%/, `${index}`);
+        const $label = $input.parentElement.querySelector('label') || $input.closest('label') || $item.querySelector(`[for="${originalId}"]`);
+        if ($label && $label instanceof HTMLLabelElement) {
+          $label.htmlFor = $input.id;
         }
       });
     }
-    createRemoveButton(item) {
-      const button = document.createElement('button');
-      button.type = 'button';
-      button.classList.add('govuk-button', 'govuk-button--secondary', 'moj-add-another__remove-button');
-      button.textContent = 'Remove';
-      item.append(button);
+
+    /**
+     * @param {HTMLElement} $item - Add another item
+     */
+    createRemoveButton($item) {
+      const $button = document.createElement('button');
+      $button.type = 'button';
+      $button.classList.add('govuk-button', 'govuk-button--secondary', 'moj-add-another__remove-button');
+      $button.textContent = 'Remove';
+      $item.append($button);
     }
-    resetItem(item) {
-      item.querySelectorAll('[data-name], [data-id]').forEach(el => {
-        if (!(el instanceof HTMLInputElement)) {
+
+    /**
+     * @param {HTMLElement} $item - Add another item
+     */
+    resetItem($item) {
+      $item.querySelectorAll('[data-name], [data-id]').forEach($input => {
+        if (!($input instanceof HTMLInputElement)) {
           return;
         }
-        if (el.type === 'checkbox' || el.type === 'radio') {
-          el.checked = false;
+        if ($input.type === 'checkbox' || $input.type === 'radio') {
+          $input.checked = false;
         } else {
-          el.value = '';
+          $input.value = '';
         }
       });
     }
+
+    /**
+     * @param {MouseEvent} event - Click event
+     */
     onRemoveButtonClick(event) {
-      const button = event.target;
-      if (!button || !(button instanceof HTMLButtonElement) || !button.classList.contains('moj-add-another__remove-button')) {
+      const $button = event.target;
+      if (!$button || !($button instanceof HTMLButtonElement) || !$button.classList.contains('moj-add-another__remove-button')) {
         return;
       }
-      button.closest('.moj-add-another__item').remove();
-      const items = this.getItems();
-      if (items.length === 1) {
-        items[0].querySelector('.moj-add-another__remove-button').remove();
+      $button.closest('.moj-add-another__item').remove();
+      const $items = this.getItems();
+      if ($items.length === 1) {
+        $items[0].querySelector('.moj-add-another__remove-button').remove();
       }
-      items.forEach((el, index) => {
-        this.updateAttributes(el, index);
+      $items.forEach(($item, index) => {
+        this.updateAttributes($item, index);
       });
       this.focusHeading();
     }
     focusHeading() {
-      const heading = this.container.querySelector('.moj-add-another__heading');
-      if (heading && heading instanceof HTMLElement) {
-        heading.focus();
+      const $heading = this.$root.querySelector('.moj-add-another__heading');
+      if ($heading && $heading instanceof HTMLElement) {
+        $heading.focus();
       }
     }
+
+    /**
+     * Name for the component used when initialising using data-module attributes.
+     */
   }
+  AddAnother.moduleName = 'moj-add-another';
 
   exports.AddAnother = AddAnother;
 

package/moj/components/add-another/add-another.bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"add-another.bundle.js","sources":["../../../../src/moj/components/add-another/add-another.mjs"],"sourcesContent":["export class AddAnother {\n  constructor(container) {\n    this.container = container\n\n    if (this.container.hasAttribute('data-moj-add-another-init')) {\n      return this\n    }\n\n    this.container.setAttribute('data-moj-add-another-init', '')\n\n    this.container.addEventListener(\n      'click',\n      this.onRemoveButtonClick.bind(this)\n    )\n    this.container.addEventListener('click', this.onAddButtonClick.bind(this))\n\n    const buttons = this.container.querySelectorAll(\n      '.moj-add-another__add-button, moj-add-another__remove-button'\n    )\n\n    buttons.forEach((button) => {\n      if (!(button instanceof HTMLButtonElement)) {\n        return\n      }\n\n      button.type = 'button'\n    })\n  }\n\n  onAddButtonClick(event) {\n    const button = event.target\n\n    if (\n      !button ||\n      !(button instanceof HTMLButtonElement) ||\n      !button.classList.contains('moj-add-another__add-button')\n    ) {\n      return\n    }\n\n    const items = this.getItems()\n    const item = this.getNewItem()\n\n    if (!item || !(item instanceof HTMLElement)) {\n      return\n    }\n\n    this.updateAttributes(item, items.length)\n    this.resetItem(item)\n\n    const firstItem = items[0]\n    if (!this.hasRemoveButton(firstItem)) {\n      this.createRemoveButton(firstItem)\n    }\n\n    items[items.length - 1].after(item)\n\n    const input = item.querySelector('input, textarea, select')\n    if (input && input instanceof HTMLInputElement) {\n      input.focus()\n    }\n  }\n\n  hasRemoveButton(item) {\n    return item.querySelectorAll('.moj-add-another__remove-button').length\n  }\n\n  getItems() {\n    if (!this.container) {\n      return []\n    }\n\n    const items = Array.from(\n      this.container.querySelectorAll('.moj-add-another__item')\n    )\n\n    return items.filter((item) => item instanceof HTMLElement)\n  }\n\n  getNewItem() {\n    const items = this.getItems()\n    const item = items[0].cloneNode(true)\n\n    if (!item || !(item instanceof HTMLElement)) {\n      return\n    }\n\n    if (!this.hasRemoveButton(item)) {\n      this.createRemoveButton(item)\n    }\n\n    return item\n  }\n\n  updateAttributes(item, index) {\n    item.querySelectorAll('[data-name]').forEach((el) => {\n      if (!(el instanceof HTMLInputElement)) {\n        return\n      }\n\n      const name = el.getAttribute('data-name') || ''\n      const id = el.getAttribute('data-id') || ''\n      const originalId = el.id\n\n      el.name = name.replace(/%index%/, `${index}`)\n      el.id = id.replace(/%index%/, `${index}`)\n\n      const label =\n        el.parentElement.querySelector('label') ||\n        el.closest('label') ||\n        item.querySelector(`[for=\"${originalId}\"]`)\n\n      if (label && label instanceof HTMLLabelElement) {\n        label.htmlFor = el.id\n      }\n    })\n  }\n\n  createRemoveButton(item) {\n    const button = document.createElement('button')\n    button.type = 'button'\n\n    button.classList.add(\n      'govuk-button',\n      'govuk-button--secondary',\n      'moj-add-another__remove-button'\n    )\n\n    button.textContent = 'Remove'\n\n    item.append(button)\n  }\n\n  resetItem(item) {\n    item.querySelectorAll('[data-name], [data-id]').forEach((el) => {\n      if (!(el instanceof HTMLInputElement)) {\n        return\n      }\n\n      if (el.type === 'checkbox' || el.type === 'radio') {\n        el.checked = false\n      } else {\n        el.value = ''\n      }\n    })\n  }\n\n  onRemoveButtonClick(event) {\n    const button = event.target\n\n    if (\n      !button ||\n      !(button instanceof HTMLButtonElement) ||\n      !button.classList.contains('moj-add-another__remove-button')\n    ) {\n      return\n    }\n\n    button.closest('.moj-add-another__item').remove()\n\n    const items = this.getItems()\n\n    if (items.length === 1) {\n      items[0].querySelector('.moj-add-another__remove-button').remove()\n    }\n\n    items.forEach((el, index) => {\n      this.updateAttributes(el, index)\n    })\n\n    this.focusHeading()\n  }\n\n  focusHeading() {\n    const heading = this.container.querySelector('.moj-add-another__heading')\n\n    if (heading && heading instanceof HTMLElement) {\n      heading.focus()\n    }\n  }\n}\n"],"names":["AddAnother","constructor","container","hasAttribute","setAttribute","addEventListener","onRemoveButtonClick","bind","onAddButtonClick","buttons","querySelectorAll","forEach","button","HTMLButtonElement","type","event","target","classList","contains","items","getItems","item","getNewItem","HTMLElement","updateAttributes","length","resetItem","firstItem","hasRemoveButton","createRemoveButton","after","input","querySelector","HTMLInputElement","focus","Array","from","filter","cloneNode","index","el","name","getAttribute","id","originalId","replace","label","parentElement","closest","HTMLLabelElement","htmlFor","document","createElement","add","textContent","append","checked","value","remove","focusHeading","heading"],"mappings":"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"}
+{"version":3,"file":"add-another.bundle.js","sources":["../../../../src/moj/components/add-another/add-another.mjs"],"sourcesContent":["import { Component } from 'govuk-frontend'\n\nexport class AddAnother extends Component {\n  /**\n   * @param {Element | null} $root - HTML element to use for add another\n   */\n  constructor($root) {\n    super($root)\n\n    this.$root.addEventListener('click', this.onRemoveButtonClick.bind(this))\n    this.$root.addEventListener('click', this.onAddButtonClick.bind(this))\n\n    const $buttons = this.$root.querySelectorAll(\n      '.moj-add-another__add-button, moj-add-another__remove-button'\n    )\n\n    $buttons.forEach(($button) => {\n      if (!($button instanceof HTMLButtonElement)) {\n        return\n      }\n\n      $button.type = 'button'\n    })\n  }\n\n  /**\n   * @param {MouseEvent} event - Click event\n   */\n  onAddButtonClick(event) {\n    const $button = event.target\n\n    if (\n      !$button ||\n      !($button instanceof HTMLButtonElement) ||\n      !$button.classList.contains('moj-add-another__add-button')\n    ) {\n      return\n    }\n\n    const $items = this.getItems()\n    const $item = this.getNewItem()\n\n    if (!$item || !($item instanceof HTMLElement)) {\n      return\n    }\n\n    this.updateAttributes($item, $items.length)\n    this.resetItem($item)\n\n    const $firstItem = $items[0]\n    if (!this.hasRemoveButton($firstItem)) {\n      this.createRemoveButton($firstItem)\n    }\n\n    $items[$items.length - 1].after($item)\n\n    const $input = $item.querySelector('input, textarea, select')\n    if ($input && $input instanceof HTMLInputElement) {\n      $input.focus()\n    }\n  }\n\n  /**\n   * @param {HTMLElement} $item - Add another item\n   */\n  hasRemoveButton($item) {\n    return $item.querySelectorAll('.moj-add-another__remove-button').length\n  }\n\n  getItems() {\n    if (!this.$root) {\n      return []\n    }\n\n    const $items = Array.from(\n      this.$root.querySelectorAll('.moj-add-another__item')\n    )\n\n    return $items.filter((item) => item instanceof HTMLElement)\n  }\n\n  getNewItem() {\n    const $items = this.getItems()\n    const $item = $items[0].cloneNode(true)\n\n    if (!$item || !($item instanceof HTMLElement)) {\n      return\n    }\n\n    if (!this.hasRemoveButton($item)) {\n      this.createRemoveButton($item)\n    }\n\n    return $item\n  }\n\n  /**\n   * @param {HTMLElement} $item - Add another item\n   * @param {number} index - Add another item index\n   */\n  updateAttributes($item, index) {\n    $item.querySelectorAll('[data-name]').forEach(($input) => {\n      if (!($input instanceof HTMLInputElement)) {\n        return\n      }\n\n      const name = $input.getAttribute('data-name') || ''\n      const id = $input.getAttribute('data-id') || ''\n      const originalId = $input.id\n\n      $input.name = name.replace(/%index%/, `${index}`)\n      $input.id = id.replace(/%index%/, `${index}`)\n\n      const $label =\n        $input.parentElement.querySelector('label') ||\n        $input.closest('label') ||\n        $item.querySelector(`[for=\"${originalId}\"]`)\n\n      if ($label && $label instanceof HTMLLabelElement) {\n        $label.htmlFor = $input.id\n      }\n    })\n  }\n\n  /**\n   * @param {HTMLElement} $item - Add another item\n   */\n  createRemoveButton($item) {\n    const $button = document.createElement('button')\n    $button.type = 'button'\n\n    $button.classList.add(\n      'govuk-button',\n      'govuk-button--secondary',\n      'moj-add-another__remove-button'\n    )\n\n    $button.textContent = 'Remove'\n\n    $item.append($button)\n  }\n\n  /**\n   * @param {HTMLElement} $item - Add another item\n   */\n  resetItem($item) {\n    $item.querySelectorAll('[data-name], [data-id]').forEach(($input) => {\n      if (!($input instanceof HTMLInputElement)) {\n        return\n      }\n\n      if ($input.type === 'checkbox' || $input.type === 'radio') {\n        $input.checked = false\n      } else {\n        $input.value = ''\n      }\n    })\n  }\n\n  /**\n   * @param {MouseEvent} event - Click event\n   */\n  onRemoveButtonClick(event) {\n    const $button = event.target\n\n    if (\n      !$button ||\n      !($button instanceof HTMLButtonElement) ||\n      !$button.classList.contains('moj-add-another__remove-button')\n    ) {\n      return\n    }\n\n    $button.closest('.moj-add-another__item').remove()\n\n    const $items = this.getItems()\n\n    if ($items.length === 1) {\n      $items[0].querySelector('.moj-add-another__remove-button').remove()\n    }\n\n    $items.forEach(($item, index) => {\n      this.updateAttributes($item, index)\n    })\n\n    this.focusHeading()\n  }\n\n  focusHeading() {\n    const $heading = this.$root.querySelector('.moj-add-another__heading')\n\n    if ($heading && $heading instanceof HTMLElement) {\n      $heading.focus()\n    }\n  }\n\n  /**\n   * Name for the component used when initialising using data-module attributes.\n   */\n  static moduleName = 'moj-add-another'\n}\n"],"names":["AddAnother","Component","constructor","$root","addEventListener","onRemoveButtonClick","bind","onAddButtonClick","$buttons","querySelectorAll","forEach","$button","HTMLButtonElement","type","event","target","classList","contains","$items","getItems","$item","getNewItem","HTMLElement","updateAttributes","length","resetItem","$firstItem","hasRemoveButton","createRemoveButton","after","$input","querySelector","HTMLInputElement","focus","Array","from","filter","item","cloneNode","index","name","getAttribute","id","originalId","replace","$label","parentElement","closest","HTMLLabelElement","htmlFor","document","createElement","add","textContent","append","checked","value","remove","focusHeading","$heading","moduleName"],"mappings":"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"}