@ministryofjustice/frontend 4.0.1 → 5.0.0

package/moj/all.bundle.mjs

@@ -0,0 +1,2502 @@
+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)) {
+        return;
+      }
+      button.type = 'button';
+    });
+  }
+  onAddButtonClick(event) {
+    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)) {
+      return;
+    }
+    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();
+    }
+  }
+  hasRemoveButton(item) {
+    return item.querySelectorAll('.moj-add-another__remove-button').length;
+  }
+  getItems() {
+    if (!this.container) {
+      return [];
+    }
+    const items = Array.from(this.container.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)) {
+      return;
+    }
+    if (!this.hasRemoveButton(item)) {
+      this.createRemoveButton(item);
+    }
+    return item;
+  }
+  updateAttributes(item, index) {
+    item.querySelectorAll('[data-name]').forEach(el => {
+      if (!(el 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;
+      }
+    });
+  }
+  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)) {
+        return;
+      }
+      if (el.type === 'checkbox' || el.type === 'radio') {
+        el.checked = false;
+      } else {
+        el.value = '';
+      }
+    });
+  }
+  onRemoveButtonClick(event) {
+    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();
+    }
+    items.forEach((el, index) => {
+      this.updateAttributes(el, index);
+    });
+    this.focusHeading();
+  }
+  focusHeading() {
+    const heading = this.container.querySelector('.moj-add-another__heading');
+    if (heading && heading instanceof HTMLElement) {
+      heading.focus();
+    }
+  }
+}
+
+function removeAttributeValue(el, attr, value) {
+  let re, m;
+  if (el.getAttribute(attr)) {
+    if (el.getAttribute(attr) === value) {
+      el.removeAttribute(attr);
+    } else {
+      re = new RegExp(`(^|\\s)${value}(\\s|$)`);
+      m = el.getAttribute(attr).match(re);
+      if (m && m.length === 3) {
+        el.setAttribute(attr, el.getAttribute(attr).replace(re, m[1] && m[2] ? ' ' : ''));
+      }
+    }
+  }
+}
+function addAttributeValue(el, attr, value) {
+  let re;
+  if (!el.getAttribute(attr)) {
+    el.setAttribute(attr, value);
+  } else {
+    re = new RegExp(`(^|\\s)${value}(\\s|$)`);
+    if (!re.test(el.getAttribute(attr))) {
+      el.setAttribute(attr, `${el.getAttribute(attr)} ${value}`);
+    }
+  }
+}
+function dragAndDropSupported() {
+  const div = document.createElement('div');
+  return typeof div.ondrop !== 'undefined';
+}
+function formDataSupported() {
+  return typeof FormData === 'function';
+}
+function fileApiSupported() {
+  const input = document.createElement('input');
+  input.type = 'file';
+  return typeof input.files !== 'undefined';
+}
+
+/**
+ * Find an elements preceding sibling
+ *
+ * Utility function to find an elements previous sibling matching the provided
+ * selector.
+ *
+ * @param {Element | null} $element - Element to find siblings for
+ * @param {string} [selector] - selector for required sibling
+ */
+function getPreviousSibling($element, selector) {
+  if (!$element || !($element instanceof HTMLElement)) {
+    return;
+  }
+
+  // Get the previous sibling element
+  let $sibling = $element.previousElementSibling;
+
+  // If the sibling matches our selector, use it
+  // If not, jump to the next sibling and continue the loop
+  while ($sibling) {
+    if ($sibling.matches(selector)) return $sibling;
+    $sibling = $sibling.previousElementSibling;
+  }
+}
+
+/**
+ * @param {Element | null} $element
+ * @param {string} [selector]
+ */
+function findNearestMatchingElement($element, selector) {
+  // If no element or selector is provided, return
+  if (!$element || !($element instanceof HTMLElement) || false) {
+    return;
+  }
+
+  // Start with the current element
+  let $currentElement = $element;
+  while ($currentElement) {
+    // First check the current element
+    if ($currentElement.matches(selector)) {
+      return $currentElement;
+    }
+
+    // Check all previous siblings
+    let $sibling = $currentElement.previousElementSibling;
+    while ($sibling) {
+      // Check if the sibling itself is a heading
+      if ($sibling.matches(selector)) {
+        return $sibling;
+      }
+      $sibling = $sibling.previousElementSibling;
+    }
+
+    // If no match found in siblings, move up to parent
+    $currentElement = $currentElement.parentElement;
+  }
+}
+
+/**
+ * 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.
+ *
+ * @param {HTMLElement} $element - HTML element
+ * @param {object} [options] - Handler options
+ * @param {function(this: HTMLElement): void} [options.onBeforeFocus] - Callback before focus
+ * @param {function(this: HTMLElement): void} [options.onBlur] - Callback on blur
+ */
+function setFocus($element, options = {}) {
+  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() {
+    if (options.onBlur) {
+      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
+  if (options.onBeforeFocus) {
+    options.onBeforeFocus.call($element);
+  }
+  $element.focus();
+}
+
+class Alert {
+  /**
+   * @param {Element | null} $module - HTML element to use for alert
+   * @param {AlertConfig} [config] - Alert config
+   */
+  constructor($module, config = {}) {
+    if (!$module || !($module instanceof HTMLElement)) {
+      return this;
+    }
+    const schema = Object.freeze({
+      properties: {
+        dismissible: {
+          type: 'boolean'
+        },
+        dismissText: {
+          type: 'string'
+        },
+        disableAutoFocus: {
+          type: 'boolean'
+        },
+        focusOnDismissSelector: {
+          type: 'string'
+        }
+      }
+    });
+    const defaults = {
+      dismissible: false,
+      dismissText: 'Dismiss',
+      disableAutoFocus: false
+    };
+
+    // data attributes override JS config, which overrides defaults
+    this.config = this.mergeConfigs(defaults, config, this.parseDataset(schema, $module.dataset));
+    this.$module = $module;
+
+    /**
+     * Focus the alert
+     *
+     * If `role="alert"` is set, focus the element to help some assistive
+     * technologies prioritise announcing it.
+     *
+     * You can turn off the auto-focus functionality by setting
+     * `data-disable-auto-focus="true"` in the component HTML. You might wish to
+     * do this based on user research findings, or to avoid a clash with another
+     * element which should be focused when the page loads.
+     */
+    if (this.$module.getAttribute('role') === 'alert' && !this.config.disableAutoFocus) {
+      setFocus(this.$module);
+    }
+    this.$dismissButton = this.$module.querySelector('.moj-alert__dismiss');
+    if (this.config.dismissible && this.$dismissButton) {
+      this.$dismissButton.innerHTML = this.config.dismissText;
+      this.$dismissButton.removeAttribute('hidden');
+      this.$module.addEventListener('click', event => {
+        if (event.target instanceof Node && this.$dismissButton.contains(event.target)) {
+          this.dimiss();
+        }
+      });
+    }
+  }
+
+  /**
+   * Handle dismissing the alert
+   */
+  dimiss() {
+    let $elementToRecieveFocus;
+
+    // If a selector has been provided, attempt to find that element
+    if (this.config.focusOnDismissSelector) {
+      $elementToRecieveFocus = document.querySelector(this.config.focusOnDismissSelector);
+    }
+
+    // Is the next sibling another alert
+    if (!$elementToRecieveFocus) {
+      const $nextSibling = this.$module.nextElementSibling;
+      if ($nextSibling && $nextSibling.matches('.moj-alert')) {
+        $elementToRecieveFocus = $nextSibling;
+      }
+    }
+
+    // Else try to find any preceding sibling alert or heading
+    if (!$elementToRecieveFocus) {
+      $elementToRecieveFocus = getPreviousSibling(this.$module, '.moj-alert, h1, h2, h3, h4, h5, h6');
+    }
+
+    // Else find the closest ancestor heading, or fallback to main, or last resort
+    // use the body element
+    if (!$elementToRecieveFocus) {
+      $elementToRecieveFocus = findNearestMatchingElement(this.$module, 'h1, h2, h3, h4, h5, h6, main, body');
+    }
+
+    // If we have an element, place focus on it
+    if ($elementToRecieveFocus instanceof HTMLElement) {
+      setFocus($elementToRecieveFocus);
+    }
+
+    // Remove the alert
+    this.$module.remove();
+  }
+
+  /**
+   * Normalise string
+   *
+   * 'If it looks like a duck, and it quacks like a duck…' 🦆
+   *
+   * If the passed value looks like a boolean or a number, convert it to a boolean
+   * or number.
+   *
+   * Designed to be used to convert config passed via data attributes (which are
+   * always strings) into something sensible.
+   *
+   * @internal
+   * @param {DOMStringMap[string]} value - The value to normalise
+   * @param {SchemaProperty} [property] - Component schema property
+   * @returns {string | boolean | number | undefined} Normalised data
+   */
+  normaliseString(value, property) {
+    const trimmedValue = value ? value.trim() : '';
+    let output;
+    let outputType;
+    if (property && property.type) {
+      outputType = property.type;
+    }
+
+    // No schema type set? Determine automatically
+    if (!outputType) {
+      if (['true', 'false'].includes(trimmedValue)) {
+        outputType = 'boolean';
+      }
+
+      // Empty / whitespace-only strings are considered finite so we need to check
+      // the length of the trimmed string as well
+      if (trimmedValue.length > 0 && Number.isFinite(Number(trimmedValue))) {
+        outputType = 'number';
+      }
+    }
+    switch (outputType) {
+      case 'boolean':
+        output = trimmedValue === 'true';
+        break;
+      case 'number':
+        output = Number(trimmedValue);
+        break;
+      default:
+        output = value;
+    }
+    return output;
+  }
+
+  /**
+   * Parse dataset
+   *
+   * Loop over an object and normalise each value using {@link normaliseString},
+   * optionally expanding nested `i18n.field`
+   *
+   * @param {Schema} schema - component schema
+   * @param {DOMStringMap} dataset - HTML element dataset
+   * @returns {object} Normalised dataset
+   */
+  parseDataset(schema, dataset) {
+    const parsed = {};
+    for (const [field, property] of Object.entries(schema.properties)) {
+      if (field in dataset) {
+        if (dataset[field]) {
+          parsed[field] = this.normaliseString(dataset[field], property);
+        }
+      }
+    }
+    return parsed;
+  }
+
+  /**
+   * Config merging function
+   *
+   * Takes any number of objects and combines them together, with
+   * greatest priority on the LAST item passed in.
+   *
+   * @param {...{ [key: string]: unknown }} configObjects - Config objects to merge
+   * @returns {{ [key: string]: unknown }} A merged config object
+   */
+  mergeConfigs(...configObjects) {
+    const formattedConfigObject = {};
+
+    // Loop through each of the passed objects
+    for (const configObject of configObjects) {
+      for (const key of Object.keys(configObject)) {
+        const option = formattedConfigObject[key];
+        const override = configObject[key];
+
+        // Push their keys one-by-one into formattedConfigObject. Any duplicate
+        // keys with object values will be merged, otherwise the new value will
+        // override the existing value.
+        if (typeof option === 'object' && typeof override === 'object') {
+          // @ts-expect-error Index signature for type 'string' is missing
+          formattedConfigObject[key] = this.mergeConfigs(option, override);
+        } else {
+          formattedConfigObject[key] = override;
+        }
+      }
+    }
+    return formattedConfigObject;
+  }
+}
+
+/**
+ * @typedef {object} AlertConfig
+ * @property {boolean} [dismissible=false] - Can the alert be dismissed by the user
+ * @property {string} [dismissText=Dismiss] - the label text for the dismiss button
+ * @property {boolean} [disableAutoFocus=false] - whether the alert will be autofocused
+ * @property {string} [focusOnDismissSelector] - CSS Selector for element to be focused on dismiss
+ */
+
+class ButtonMenu {
+  /**
+   * @param {Element | null} $module - HTML element to use for button menu
+   * @param {ButtonMenuConfig} [config] - Button menu config
+   */
+  constructor($module, config = {}) {
+    if (!$module || !($module instanceof HTMLElement)) {
+      return this;
+    }
+    const schema = Object.freeze({
+      properties: {
+        buttonText: {
+          type: 'string'
+        },
+        buttonClasses: {
+          type: 'string'
+        },
+        alignMenu: {
+          type: 'string'
+        }
+      }
+    });
+    const defaults = {
+      buttonText: 'Actions',
+      alignMenu: 'left',
+      buttonClasses: ''
+    };
+    // data attributes override JS config, which overrides defaults
+    this.config = this.mergeConfigs(defaults, config, this.parseDataset(schema, $module.dataset));
+    this.$module = $module;
+
+    // If only one button is provided, don't initiate a menu and toggle button
+    // if classes have been provided for the toggleButton, apply them to the single item
+    if (this.$module.children.length === 1) {
+      const button = this.$module.children[0];
+      button.classList.forEach(className => {
+        if (className.startsWith('govuk-button-')) {
+          button.classList.remove(className);
+        }
+        button.classList.remove('moj-button-menu__item');
+        button.classList.add('moj-button-menu__single-button');
+      });
+      if (this.config.buttonClasses) {
+        button.classList.add(...this.config.buttonClasses.split(' '));
+      }
+    }
+    // Otherwise intialise a button menu
+    if (this.$module.children.length > 1) {
+      this.initMenu();
+    }
+  }
+  initMenu() {
+    this.$menu = this.createMenu();
+    this.$module.insertAdjacentHTML('afterbegin', this.toggleTemplate());
+    this.setupMenuItems();
+    this.$menuToggle = this.$module.querySelector(':scope > button');
+    this.items = this.$menu.querySelectorAll('a, button');
+    this.$menuToggle.addEventListener('click', event => {
+      this.toggleMenu(event);
+    });
+    this.$module.addEventListener('keydown', event => {
+      this.handleKeyDown(event);
+    });
+    document.addEventListener('click', event => {
+      if (!this.$module.contains(event.target)) {
+        this.closeMenu(false);
+      }
+    });
+  }
+  createMenu() {
+    const $menu = document.createElement('ul');
+    $menu.setAttribute('role', 'list');
+    $menu.hidden = true;
+    $menu.classList.add('moj-button-menu__wrapper');
+    if (this.config.alignMenu === 'right') {
+      $menu.classList.add('moj-button-menu__wrapper--right');
+    }
+    this.$module.appendChild($menu);
+    while (this.$module.firstChild !== $menu) {
+      $menu.appendChild(this.$module.firstChild);
+    }
+    return $menu;
+  }
+  setupMenuItems() {
+    Array.from(this.$menu.children).forEach(item => {
+      // wrap item in li tag
+      const listItem = document.createElement('li');
+      this.$menu.insertBefore(listItem, item);
+      listItem.appendChild(item);
+      item.setAttribute('tabindex', '-1');
+      if (item.tagName === 'BUTTON') {
+        item.setAttribute('type', 'button');
+      }
+      item.classList.forEach(className => {
+        if (className.startsWith('govuk-button')) {
+          item.classList.remove(className);
+        }
+      });
+
+      // add a slight delay after click before closing the menu, makes it *feel* better
+      item.addEventListener('click', () => {
+        setTimeout(() => {
+          this.closeMenu(false);
+        }, 50);
+      });
+    });
+  }
+  toggleTemplate() {
+    return `
+    <button type="button" class="govuk-button moj-button-menu__toggle-button ${this.config.buttonClasses || ''}" aria-haspopup="true" aria-expanded="false">
+      <span>
+       ${this.config.buttonText}
+       <svg width="11" height="5" viewBox="0 0 11 5"  xmlns="http://www.w3.org/2000/svg">
+         <path d="M5.5 0L11 5L0 5L5.5 0Z" fill="currentColor"/>
+       </svg>
+      </span>
+    </button>`;
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  isOpen() {
+    return this.$menuToggle.getAttribute('aria-expanded') === 'true';
+  }
+  toggleMenu(event) {
+    event.preventDefault();
+
+    // If menu is triggered with mouse don't move focus to first item
+    const keyboardEvent = event.detail === 0;
+    const focusIndex = keyboardEvent ? 0 : -1;
+    if (this.isOpen()) {
+      this.closeMenu();
+    } else {
+      this.openMenu(focusIndex);
+    }
+  }
+
+  /**
+   * Opens the menu and optionally sets the focus to the item with given index
+   *
+   * @param {number} focusIndex - The index of the item to focus
+   */
+  openMenu(focusIndex = 0) {
+    this.$menu.hidden = false;
+    this.$menuToggle.setAttribute('aria-expanded', 'true');
+    if (focusIndex !== -1) {
+      this.focusItem(focusIndex);
+    }
+  }
+
+  /**
+   * Closes the menu and optionally returns focus back to menuToggle
+   *
+   * @param {boolean} moveFocus - whether to return focus to the toggle button
+   */
+  closeMenu(moveFocus = true) {
+    this.$menu.hidden = true;
+    this.$menuToggle.setAttribute('aria-expanded', 'false');
+    if (moveFocus) {
+      this.$menuToggle.focus();
+    }
+  }
+
+  /**
+   * Focuses the menu item at the specified index
+   *
+   * @param {number} index - the index of the item to focus
+   */
+  focusItem(index) {
+    if (index >= this.items.length) index = 0;
+    if (index < 0) index = this.items.length - 1;
+    const menuItem = this.items.item(index);
+    if (menuItem) {
+      menuItem.focus();
+    }
+  }
+  currentFocusIndex() {
+    const activeElement = document.activeElement;
+    const menuItems = Array.from(this.items);
+    return menuItems.indexOf(activeElement);
+  }
+  handleKeyDown(event) {
+    if (event.target === this.$menuToggle) {
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          this.openMenu();
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          this.openMenu(this.items.length - 1);
+          break;
+      }
+    }
+    if (this.$menu.contains(event.target) && this.isOpen()) {
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          if (this.currentFocusIndex() !== -1) {
+            this.focusItem(this.currentFocusIndex() + 1);
+          }
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          if (this.currentFocusIndex() !== -1) {
+            this.focusItem(this.currentFocusIndex() - 1);
+          }
+          break;
+        case 'Home':
+          event.preventDefault();
+          this.focusItem(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          this.focusItem(this.items.length - 1);
+          break;
+      }
+    }
+    if (event.key === 'Escape' && this.isOpen()) {
+      this.closeMenu();
+    }
+    if (event.key === 'Tab' && this.isOpen()) {
+      this.closeMenu(false);
+    }
+  }
+
+  /**
+   * Parse dataset
+   *
+   * Loop over an object and normalise each value using {@link normaliseString},
+   * optionally expanding nested `i18n.field`
+   *
+   * @param {Schema} schema - component schema
+   * @param {DOMStringMap} dataset - HTML element dataset
+   * @returns {object} Normalised dataset
+   */
+  parseDataset(schema, dataset) {
+    const parsed = {};
+    for (const [field,,] of Object.entries(schema.properties)) {
+      if (field in dataset) {
+        if (dataset[field]) {
+          parsed[field] = dataset[field];
+        }
+      }
+    }
+    return parsed;
+  }
+
+  /**
+   * Config merging function
+   *
+   * Takes any number of objects and combines them together, with
+   * greatest priority on the LAST item passed in.
+   *
+   * @param {...{ [key: string]: unknown }} configObjects - Config objects to merge
+   * @returns {{ [key: string]: unknown }} A merged config object
+   */
+  mergeConfigs(...configObjects) {
+    const formattedConfigObject = {};
+
+    // Loop through each of the passed objects
+    for (const configObject of configObjects) {
+      for (const key of Object.keys(configObject)) {
+        const option = formattedConfigObject[key];
+        const override = configObject[key];
+
+        // Push their keys one-by-one into formattedConfigObject. Any duplicate
+        // keys with object values will be merged, otherwise the new value will
+        // override the existing value.
+        if (typeof option === 'object' && typeof override === 'object') {
+          // @ts-expect-error Index signature for type 'string' is missing
+          formattedConfigObject[key] = this.mergeConfigs(option, override);
+        } else {
+          formattedConfigObject[key] = override;
+        }
+      }
+    }
+    return formattedConfigObject;
+  }
+}
+
+/**
+ * @typedef {object} ButtonMenuConfig
+ * @property {string} [buttonText='Actions'] - Label for the toggle button
+ * @property {"left" | "right"} [alignMenu='left'] - the alignment of the menu
+ * @property {string} [buttonClasses='govuk-button--secondary'] - css classes applied to the toggle button
+ */
+
+class DatePicker {
+  /**
+   * @param {Element | null} $module - HTML element to use for date picker
+   * @param {DatePickerConfig} [config] - Date picker config
+   */
+  constructor($module, config = {}) {
+    if (!$module || !($module instanceof HTMLElement)) {
+      return this;
+    }
+    const $input = $module.querySelector('.moj-js-datepicker-input');
+
+    // Check that required elements are present
+    if (!$input || !($input instanceof HTMLInputElement)) {
+      return this;
+    }
+    this.$module = $module;
+    this.$input = $input;
+    const schema = Object.freeze({
+      properties: {
+        excludedDates: {
+          type: 'string'
+        },
+        excludedDays: {
+          type: 'string'
+        },
+        leadingZeros: {
+          type: 'string'
+        },
+        maxDate: {
+          type: 'string'
+        },
+        minDate: {
+          type: 'string'
+        },
+        weekStartDay: {
+          type: 'string'
+        }
+      }
+    });
+    const defaults = {
+      leadingZeros: false,
+      weekStartDay: 'monday'
+    };
+
+    // data attributes override JS config, which overrides defaults
+    this.config = this.mergeConfigs(defaults, config, this.parseDataset(schema, $module.dataset));
+    this.dayLabels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+    this.monthLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    this.currentDate = new Date();
+    this.currentDate.setHours(0, 0, 0, 0);
+    this.calendarDays = [];
+    this.excludedDates = [];
+    this.excludedDays = [];
+    this.buttonClass = 'moj-datepicker__button';
+    this.selectedDayButtonClass = 'moj-datepicker__button--selected';
+    this.currentDayButtonClass = 'moj-datepicker__button--current';
+    this.todayButtonClass = 'moj-datepicker__button--today';
+    if (this.$module.dataset.initialized) {
+      return this;
+    }
+    this.setOptions();
+    this.initControls();
+    this.$module.setAttribute('data-initialized', 'true');
+  }
+  initControls() {
+    this.id = `datepicker-${this.$input.id}`;
+    this.$dialog = this.createDialog();
+    this.createCalendarHeaders();
+    const $componentWrapper = document.createElement('div');
+    const $inputWrapper = document.createElement('div');
+    $componentWrapper.classList.add('moj-datepicker__wrapper');
+    $inputWrapper.classList.add('govuk-input__wrapper');
+    this.$input.parentElement.insertBefore($componentWrapper, this.$input);
+    $componentWrapper.appendChild($inputWrapper);
+    $inputWrapper.appendChild(this.$input);
+    $inputWrapper.insertAdjacentHTML('beforeend', this.toggleTemplate());
+    $componentWrapper.insertAdjacentElement('beforeend', this.$dialog);
+    this.$calendarButton = this.$module.querySelector('.moj-js-datepicker-toggle');
+    this.$dialogTitle = this.$dialog.querySelector('.moj-js-datepicker-month-year');
+    this.createCalendar();
+    this.$prevMonthButton = this.$dialog.querySelector('.moj-js-datepicker-prev-month');
+    this.$prevYearButton = this.$dialog.querySelector('.moj-js-datepicker-prev-year');
+    this.$nextMonthButton = this.$dialog.querySelector('.moj-js-datepicker-next-month');
+    this.$nextYearButton = this.$dialog.querySelector('.moj-js-datepicker-next-year');
+    this.$cancelButton = this.$dialog.querySelector('.moj-js-datepicker-cancel');
+    this.$okButton = this.$dialog.querySelector('.moj-js-datepicker-ok');
+
+    // add event listeners
+    this.$prevMonthButton.addEventListener('click', event => this.focusPreviousMonth(event, false));
+    this.$prevYearButton.addEventListener('click', event => this.focusPreviousYear(event, false));
+    this.$nextMonthButton.addEventListener('click', event => this.focusNextMonth(event, false));
+    this.$nextYearButton.addEventListener('click', event => this.focusNextYear(event, false));
+    this.$cancelButton.addEventListener('click', event => {
+      event.preventDefault();
+      this.closeDialog();
+    });
+    this.$okButton.addEventListener('click', () => {
+      this.selectDate(this.currentDate);
+    });
+    const dialogButtons = this.$dialog.querySelectorAll('button:not([disabled="true"])');
+    this.$firstButtonInDialog = dialogButtons[0];
+    this.$lastButtonInDialog = dialogButtons[dialogButtons.length - 1];
+    this.$firstButtonInDialog.addEventListener('keydown', event => this.firstButtonKeydown(event));
+    this.$lastButtonInDialog.addEventListener('keydown', event => this.lastButtonKeydown(event));
+    this.$calendarButton.addEventListener('click', event => this.toggleDialog(event));
+    this.$dialog.addEventListener('keydown', event => {
+      if (event.key === 'Escape') {
+        this.closeDialog();
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    });
+    document.body.addEventListener('mouseup', event => this.backgroundClick(event));
+
+    // populates calendar with initial dates, avoids Wave errors about null buttons
+    this.updateCalendar();
+  }
+  createDialog() {
+    const titleId = `datepicker-title-${this.$input.id}`;
+    const $dialog = document.createElement('div');
+    $dialog.id = this.id;
+    $dialog.setAttribute('class', 'moj-datepicker__dialog');
+    $dialog.setAttribute('role', 'dialog');
+    $dialog.setAttribute('aria-modal', 'true');
+    $dialog.setAttribute('aria-labelledby', titleId);
+    $dialog.innerHTML = this.dialogTemplate(titleId);
+    $dialog.hidden = true;
+    return $dialog;
+  }
+  createCalendar() {
+    const $tbody = this.$dialog.querySelector('tbody');
+    let dayCount = 0;
+    for (let i = 0; i < 6; i++) {
+      // create row
+      const $row = $tbody.insertRow(i);
+      for (let j = 0; j < 7; j++) {
+        // create cell (day)
+        const $cell = document.createElement('td');
+        const $dateButton = document.createElement('button');
+        $cell.appendChild($dateButton);
+        $row.appendChild($cell);
+        const calendarDay = new DSCalendarDay($dateButton, dayCount, i, j, this);
+        this.calendarDays.push(calendarDay);
+        dayCount++;
+      }
+    }
+  }
+  toggleTemplate() {
+    return `<button class="moj-datepicker__toggle moj-js-datepicker-toggle" type="button" aria-haspopup="dialog" aria-controls="${this.id}" aria-expanded="false">
+            <span class="govuk-visually-hidden">Choose date</span>
+            <svg width="32" height="24" focusable="false" class="moj-datepicker-icon" aria-hidden="true" role="img" viewBox="0 0 22 22">
+              <path
+                fill="currentColor"
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M16.1333 2.93333H5.86668V4.4C5.86668 5.21002 5.21003 5.86667 4.40002 5.86667C3.59 5.86667 2.93335 5.21002 2.93335 4.4V2.93333H2C0.895431 2.93333 0 3.82877 0 4.93334V19.2667C0 20.3712 0.89543 21.2667 2 21.2667H20C21.1046 21.2667 22 20.3712 22 19.2667V4.93333C22 3.82876 21.1046 2.93333 20 2.93333H19.0667V4.4C19.0667 5.21002 18.41 5.86667 17.6 5.86667C16.79 5.86667 16.1333 5.21002 16.1333 4.4V2.93333ZM20.5333 8.06667H1.46665V18.8C1.46665 19.3523 1.91436 19.8 2.46665 19.8H19.5333C20.0856 19.8 20.5333 19.3523 20.5333 18.8V8.06667Z"
+              ></path>
+              <rect x="3.66669" width="1.46667" height="5.13333" rx="0.733333" fill="currentColor"></rect>
+              <rect x="16.8667" width="1.46667" height="5.13333" rx="0.733333" fill="currentColor"></rect>
+            </svg>
+          </button>`;
+  }
+
+  /**
+   * HTML template for calendar dialog
+   *
+   * @param {string} [titleId] - Id attribute for dialog title
+   * @returns {string}
+   */
+  dialogTemplate(titleId) {
+    return `<div class="moj-datepicker__dialog-header">
+            <div class="moj-datepicker__dialog-navbuttons">
+              <button class="moj-datepicker__button moj-js-datepicker-prev-year">
+                <span class="govuk-visually-hidden">Previous year</span>
+                <svg width="44" height="40" viewBox="0 0 44 40" fill="none" fill="none" focusable="false" aria-hidden="true" role="img">
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M23.1643 20L28.9572 14.2071L27.5429 12.7929L20.3358 20L27.5429 27.2071L28.9572 25.7929L23.1643 20Z" fill="currentColor"/>
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M17.1643 20L22.9572 14.2071L21.5429 12.7929L14.3358 20L21.5429 27.2071L22.9572 25.7929L17.1643 20Z" fill="currentColor"/>
+                </svg>
+              </button>
+
+              <button class="moj-datepicker__button moj-js-datepicker-prev-month">
+                <span class="govuk-visually-hidden">Previous month</span>
+                <svg width="44" height="40" viewBox="0 0 44 40" fill="none" focusable="false" aria-hidden="true" role="img">
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5729 20L25.7865 14.2071L24.5137 12.7929L18.0273 20L24.5137 27.2071L25.7865 25.7929L20.5729 20Z" fill="currentColor"/>
+                </svg>
+              </button>
+            </div>
+
+            <h2 id="${titleId}" class="moj-datepicker__dialog-title moj-js-datepicker-month-year" aria-live="polite">June 2020</h2>
+
+            <div class="moj-datepicker__dialog-navbuttons">
+              <button class="moj-datepicker__button moj-js-datepicker-next-month">
+                <span class="govuk-visually-hidden">Next month</span>
+                <svg width="44" height="40" viewBox="0 0 44 40" fill="none"  focusable="false" aria-hidden="true" role="img">
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M23.4271 20L18.2135 14.2071L19.4863 12.7929L25.9727 20L19.4863 27.2071L18.2135 25.7929L23.4271 20Z" fill="currentColor"/>
+                </svg>
+              </button>
+
+              <button class="moj-datepicker__button moj-js-datepicker-next-year">
+                <span class="govuk-visually-hidden">Next year</span>
+                <svg width="44" height="40" viewBox="0 0 44 40" fill="none" fill="none" focusable="false" aria-hidden="true" role="img">
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M20.8357 20L15.0428 14.2071L16.4571 12.7929L23.6642 20L16.4571 27.2071L15.0428 25.7929L20.8357 20Z" fill="currentColor"/>
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M26.8357 20L21.0428 14.2071L22.4571 12.7929L29.6642 20L22.4571 27.2071L21.0428 25.7929L26.8357 20Z" fill="currentColor"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <table class="moj-datepicker__calendar moj-js-datepicker-grid" role="grid" aria-labelledby="${titleId}">
+            <thead>
+              <tr></tr>
+            </thead>
+
+            <tbody></tbody>
+          </table>
+
+          <div class="govuk-button-group">
+            <button type="button" class="govuk-button moj-js-datepicker-ok">Select</button>
+            <button type="button" class="govuk-button govuk-button--secondary moj-js-datepicker-cancel">Close</button>
+          </div>`;
+  }
+  createCalendarHeaders() {
+    this.dayLabels.forEach(day => {
+      const html = `<th scope="col"><span aria-hidden="true">${day.substring(0, 3)}</span><span class="govuk-visually-hidden">${day}</span></th>`;
+      const $headerRow = this.$dialog.querySelector('thead > tr');
+      $headerRow.insertAdjacentHTML('beforeend', html);
+    });
+  }
+
+  /**
+   * Pads given number with leading zeros
+   *
+   * @param {number} value - The value to be padded
+   * @param {number} length - The length in characters of the output
+   * @returns {string}
+   */
+  leadingZeros(value, length = 2) {
+    let ret = value.toString();
+    while (ret.length < length) {
+      ret = `0${ret}`;
+    }
+    return ret;
+  }
+  setOptions() {
+    this.setMinAndMaxDatesOnCalendar();
+    this.setExcludedDates();
+    this.setExcludedDays();
+    this.setLeadingZeros();
+    this.setWeekStartDay();
+  }
+  setMinAndMaxDatesOnCalendar() {
+    if (this.config.minDate) {
+      this.minDate = this.formattedDateFromString(this.config.minDate, null);
+      if (this.minDate && this.currentDate < this.minDate) {
+        this.currentDate = this.minDate;
+      }
+    }
+    if (this.config.maxDate) {
+      this.maxDate = this.formattedDateFromString(this.config.maxDate, null);
+      if (this.maxDate && this.currentDate > this.maxDate) {
+        this.currentDate = this.maxDate;
+      }
+    }
+  }
+  setExcludedDates() {
+    if (this.config.excludedDates) {
+      this.excludedDates = this.config.excludedDates.replace(/\s+/, ' ').split(' ').map(item => {
+        return item.includes('-') ? this.parseDateRangeString(item) : [this.formattedDateFromString(item)];
+      }).reduce((dates, items) => dates.concat(items)).filter(date => date);
+    }
+  }
+
+  /*
+   * Parses a daterange string into an array of dates
+   * @param {String} datestring - A daterange string in the format "dd/mm/yyyy-dd/mm/yyyy"
+   * @returns {Date[]}
+   */
+  parseDateRangeString(datestring) {
+    const dates = [];
+    const [startDate, endDate] = datestring.split('-').map(d => this.formattedDateFromString(d, null));
+    if (startDate && endDate) {
+      const date = new Date(startDate.getTime());
+      /* eslint-disable no-unmodified-loop-condition */
+      while (date <= endDate) {
+        dates.push(new Date(date));
+        date.setDate(date.getDate() + 1);
+      }
+      /* eslint-enable no-unmodified-loop-condition */
+    }
+    return dates;
+  }
+  setExcludedDays() {
+    if (this.config.excludedDays) {
+      // lowercase and arrange dayLabels to put indexOf sunday == 0 for comparison
+      // with getDay() function
+      const weekDays = this.dayLabels.map(item => item.toLowerCase());
+      if (this.config.weekStartDay === 'monday') {
+        weekDays.unshift(weekDays.pop());
+      }
+      this.excludedDays = this.config.excludedDays.replace(/\s+/, ' ').toLowerCase().split(' ').map(item => weekDays.indexOf(item)).filter(item => item !== -1);
+    }
+  }
+  setLeadingZeros() {
+    if (typeof this.config.leadingZeros !== 'boolean') {
+      if (this.config.leadingZeros.toLowerCase() === 'true') {
+        this.config.leadingZeros = true;
+        return;
+      }
+      if (this.config.leadingZeros.toLowerCase() === 'false') {
+        this.config.leadingZeros = false;
+      }
+    }
+  }
+  setWeekStartDay() {
+    const weekStartDayParam = this.config.weekStartDay;
+    if (weekStartDayParam && weekStartDayParam.toLowerCase() === 'sunday') {
+      this.config.weekStartDay = 'sunday';
+      // Rotate dayLabels array to put Sunday as the first item
+      this.dayLabels.unshift(this.dayLabels.pop());
+    } else {
+      this.config.weekStartDay = 'monday';
+    }
+  }
+
+  /**
+   * Determine if a date is selecteable
+   *
+   * @param {Date} date - the date to check
+   * @returns {boolean}
+   */
+  isExcludedDate(date) {
+    // This comparison does not work correctly - it will exclude the mindate itself
+    // see: https://github.com/ministryofjustice/moj-frontend/issues/923
+    if (this.minDate && this.minDate > date) {
+      return true;
+    }
+
+    // This comparison works as expected - the maxdate will not be excluded
+    if (this.maxDate && this.maxDate < date) {
+      return true;
+    }
+    for (const excludedDate of this.excludedDates) {
+      if (date.toDateString() === excludedDate.toDateString()) {
+        return true;
+      }
+    }
+    if (this.excludedDays.includes(date.getDay())) {
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Get a Date object from a string
+   *
+   * @param {string} dateString - string in the format d/m/yyyy dd/mm/yyyy
+   * @param {Date} fallback - date object to return if formatting fails
+   * @returns {Date}
+   */
+  formattedDateFromString(dateString, fallback = new Date()) {
+    let formattedDate = null;
+    // Accepts d/m/yyyy and dd/mm/yyyy
+    const dateFormatPattern = /(\d{1,2})([-/,. ])(\d{1,2})\2(\d{4})/;
+    if (!dateFormatPattern.test(dateString)) return fallback;
+    const match = dateFormatPattern.exec(dateString);
+    const day = match[1];
+    const month = match[3];
+    const year = match[4];
+    formattedDate = new Date(`${year}-${month}-${day}`);
+    if (formattedDate instanceof Date && Number.isFinite(formattedDate.getTime())) {
+      return formattedDate;
+    }
+    return fallback;
+  }
+
+  /**
+   * Get a formatted date string from a Date object
+   *
+   * @param {Date} date - date to format to a string
+   * @returns {string}
+   */
+  formattedDateFromDate(date) {
+    if (this.config.leadingZeros) {
+      return `${this.leadingZeros(date.getDate())}/${this.leadingZeros(date.getMonth() + 1)}/${date.getFullYear()}`;
+    }
+    return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
+  }
+
+  /**
+   * Get a human readable date in the format Monday 2 March 2024
+   *
+   * @param {Date} date - date to format
+   * @returns {string}
+   */
+  formattedDateHuman(date) {
+    return `${this.dayLabels[(date.getDay() + 6) % 7]} ${date.getDate()} ${this.monthLabels[date.getMonth()]} ${date.getFullYear()}`;
+  }
+  backgroundClick(event) {
+    if (this.isOpen() && event.target instanceof Node && !this.$dialog.contains(event.target) && !this.$input.contains(event.target) && !this.$calendarButton.contains(event.target)) {
+      event.preventDefault();
+      this.closeDialog();
+    }
+  }
+  firstButtonKeydown(event) {
+    if (event.key === 'Tab' && event.shiftKey) {
+      this.$lastButtonInDialog.focus();
+      event.preventDefault();
+    }
+  }
+  lastButtonKeydown(event) {
+    if (event.key === 'Tab' && !event.shiftKey) {
+      this.$firstButtonInDialog.focus();
+      event.preventDefault();
+    }
+  }
+
+  // render calendar
+  updateCalendar() {
+    this.$dialogTitle.innerHTML = `${this.monthLabels[this.currentDate.getMonth()]} ${this.currentDate.getFullYear()}`;
+    const day = this.currentDate;
+    const firstOfMonth = new Date(day.getFullYear(), day.getMonth(), 1);
+    let dayOfWeek;
+    if (this.config.weekStartDay === 'monday') {
+      dayOfWeek = firstOfMonth.getDay() === 0 ? 6 : firstOfMonth.getDay() - 1; // Change logic to make Monday first day of week, i.e. 0
+    } else {
+      dayOfWeek = firstOfMonth.getDay();
+    }
+    firstOfMonth.setDate(firstOfMonth.getDate() - dayOfWeek);
+    const thisDay = new Date(firstOfMonth);
+
+    // loop through our days
+    for (const calendarDay of this.calendarDays) {
+      const hidden = thisDay.getMonth() !== day.getMonth();
+      const disabled = this.isExcludedDate(thisDay);
+      calendarDay.update(thisDay, hidden, disabled);
+      thisDay.setDate(thisDay.getDate() + 1);
+    }
+  }
+  setCurrentDate(focus = true) {
+    const {
+      currentDate
+    } = this;
+    this.calendarDays.forEach(calendarDay => {
+      calendarDay.button.classList.add('moj-datepicker__button');
+      calendarDay.button.classList.add('moj-datepicker__calendar-day');
+      calendarDay.button.setAttribute('tabindex', '-1');
+      calendarDay.button.classList.remove(this.selectedDayButtonClass);
+      const calendarDayDate = calendarDay.date;
+      calendarDayDate.setHours(0, 0, 0, 0);
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+      if (calendarDayDate.getTime() === currentDate.getTime() /* && !calendarDay.button.disabled */) {
+        if (focus) {
+          calendarDay.button.setAttribute('tabindex', '0');
+          calendarDay.button.focus();
+          calendarDay.button.classList.add(this.selectedDayButtonClass);
+        }
+      }
+      if (this.inputDate && calendarDayDate.getTime() === this.inputDate.getTime()) {
+        calendarDay.button.classList.add(this.currentDayButtonClass);
+        calendarDay.button.setAttribute('aria-current', 'date');
+      } else {
+        calendarDay.button.classList.remove(this.currentDayButtonClass);
+        calendarDay.button.removeAttribute('aria-current');
+      }
+      if (calendarDayDate.getTime() === today.getTime()) {
+        calendarDay.button.classList.add(this.todayButtonClass);
+      } else {
+        calendarDay.button.classList.remove(this.todayButtonClass);
+      }
+    });
+
+    // if no date is tab-able, make the first non-disabled date tab-able
+    if (!focus) {
+      const enabledDays = this.calendarDays.filter(calendarDay => {
+        return window.getComputedStyle(calendarDay.button).display === 'block' && !calendarDay.button.disabled;
+      });
+      enabledDays[0].button.setAttribute('tabindex', '0');
+      this.currentDate = enabledDays[0].date;
+    }
+  }
+  selectDate(date) {
+    if (this.isExcludedDate(date)) {
+      return;
+    }
+    this.$calendarButton.querySelector('span').innerText = `Choose date. Selected date is ${this.formattedDateHuman(date)}`;
+    this.$input.value = this.formattedDateFromDate(date);
+    const changeEvent = new Event('change', {
+      bubbles: true,
+      cancelable: true
+    });
+    this.$input.dispatchEvent(changeEvent);
+    this.closeDialog();
+  }
+  isOpen() {
+    return this.$dialog.classList.contains('moj-datepicker__dialog--open');
+  }
+  toggleDialog(event) {
+    event.preventDefault();
+    if (this.isOpen()) {
+      this.closeDialog();
+    } else {
+      this.setMinAndMaxDatesOnCalendar();
+      this.openDialog();
+    }
+  }
+  openDialog() {
+    this.$dialog.hidden = false;
+    this.$dialog.classList.add('moj-datepicker__dialog--open');
+    this.$calendarButton.setAttribute('aria-expanded', 'true');
+
+    // position the dialog
+    // if input is wider than dialog pin it to the right
+    if (this.$input.offsetWidth > this.$dialog.offsetWidth) {
+      this.$dialog.style.right = `0px`;
+    }
+    this.$dialog.style.top = `${this.$input.offsetHeight + 3}px`;
+
+    // get the date from the input element
+    this.inputDate = this.formattedDateFromString(this.$input.value);
+    this.currentDate = this.inputDate;
+    this.currentDate.setHours(0, 0, 0, 0);
+    this.updateCalendar();
+    this.setCurrentDate();
+  }
+  closeDialog() {
+    this.$dialog.hidden = true;
+    this.$dialog.classList.remove('moj-datepicker__dialog--open');
+    this.$calendarButton.setAttribute('aria-expanded', 'false');
+    this.$calendarButton.focus();
+  }
+  goToDate(date, focus) {
+    const current = this.currentDate;
+    this.currentDate = date;
+    if (current.getMonth() !== this.currentDate.getMonth() || current.getFullYear() !== this.currentDate.getFullYear()) {
+      this.updateCalendar();
+    }
+    this.setCurrentDate(focus);
+  }
+
+  // day navigation
+  focusNextDay() {
+    const date = new Date(this.currentDate);
+    date.setDate(date.getDate() + 1);
+    this.goToDate(date);
+  }
+  focusPreviousDay() {
+    const date = new Date(this.currentDate);
+    date.setDate(date.getDate() - 1);
+    this.goToDate(date);
+  }
+
+  // week navigation
+  focusNextWeek() {
+    const date = new Date(this.currentDate);
+    date.setDate(date.getDate() + 7);
+    this.goToDate(date);
+  }
+  focusPreviousWeek() {
+    const date = new Date(this.currentDate);
+    date.setDate(date.getDate() - 7);
+    this.goToDate(date);
+  }
+  focusFirstDayOfWeek() {
+    const date = new Date(this.currentDate);
+    const firstDayOfWeekIndex = this.config.weekStartDay === 'sunday' ? 0 : 1;
+    const dayOfWeek = date.getDay();
+    const diff = dayOfWeek >= firstDayOfWeekIndex ? dayOfWeek - firstDayOfWeekIndex : 6 - dayOfWeek;
+    date.setDate(date.getDate() - diff);
+    date.setHours(0, 0, 0, 0);
+    this.goToDate(date);
+  }
+  focusLastDayOfWeek() {
+    const date = new Date(this.currentDate);
+    const lastDayOfWeekIndex = this.config.weekStartDay === 'sunday' ? 6 : 0;
+    const dayOfWeek = date.getDay();
+    const diff = dayOfWeek <= lastDayOfWeekIndex ? lastDayOfWeekIndex - dayOfWeek : 7 - dayOfWeek;
+    date.setDate(date.getDate() + diff);
+    date.setHours(0, 0, 0, 0);
+    this.goToDate(date);
+  }
+
+  // month navigation
+  focusNextMonth(event, focus = true) {
+    event.preventDefault();
+    const date = new Date(this.currentDate);
+    date.setMonth(date.getMonth() + 1, 1);
+    this.goToDate(date, focus);
+  }
+  focusPreviousMonth(event, focus = true) {
+    event.preventDefault();
+    const date = new Date(this.currentDate);
+    date.setMonth(date.getMonth() - 1, 1);
+    this.goToDate(date, focus);
+  }
+
+  // year navigation
+  focusNextYear(event, focus = true) {
+    event.preventDefault();
+    const date = new Date(this.currentDate);
+    date.setFullYear(date.getFullYear() + 1, date.getMonth(), 1);
+    this.goToDate(date, focus);
+  }
+  focusPreviousYear(event, focus = true) {
+    event.preventDefault();
+    const date = new Date(this.currentDate);
+    date.setFullYear(date.getFullYear() - 1, date.getMonth(), 1);
+    this.goToDate(date, focus);
+  }
+
+  /**
+   * Parse dataset
+   *
+   * @param {Schema} schema - Component class
+   * @param {DOMStringMap} dataset - HTML element dataset
+   * @returns {object} Normalised dataset
+   */
+  parseDataset(schema, dataset) {
+    const parsed = {};
+    for (const [field,,] of Object.entries(schema.properties)) {
+      if (field in dataset) {
+        parsed[field] = dataset[field];
+      }
+    }
+    return parsed;
+  }
+
+  /**
+   * Config merging function
+   *
+   * Takes any number of objects and combines them together, with
+   * greatest priority on the LAST item passed in.
+   *
+   * @param {...{ [key: string]: unknown }} configObjects - Config objects to merge
+   * @returns {{ [key: string]: unknown }} A merged config object
+   */
+  mergeConfigs(...configObjects) {
+    const formattedConfigObject = {};
+
+    // Loop through each of the passed objects
+    for (const configObject of configObjects) {
+      for (const key of Object.keys(configObject)) {
+        const option = formattedConfigObject[key];
+        const override = configObject[key];
+
+        // Push their keys one-by-one into formattedConfigObject. Any duplicate
+        // keys with object values will be merged, otherwise the new value will
+        // override the existing value.
+        if (typeof option === 'object' && typeof override === 'object') {
+          // @ts-expect-error Index signature for type 'string' is missing
+          formattedConfigObject[key] = this.mergeConfigs(option, override);
+        } else {
+          formattedConfigObject[key] = override;
+        }
+      }
+    }
+    return formattedConfigObject;
+  }
+}
+class DSCalendarDay {
+  /**
+   *
+   * @param {HTMLElement} button
+   * @param {number} index
+   * @param {number} row
+   * @param {number} column
+   * @param {DatePicker} picker
+   */
+  constructor(button, index, row, column, picker) {
+    this.index = index;
+    this.row = row;
+    this.column = column;
+    this.button = button;
+    this.picker = picker;
+    this.date = new Date();
+    this.button.addEventListener('keydown', this.keyPress.bind(this));
+    this.button.addEventListener('click', this.click.bind(this));
+  }
+
+  /**
+   * @param {Date} day - the Date for the calendar day
+   * @param {boolean} hidden - visibility of the day
+   * @param {boolean} disabled - is the day selectable or excluded
+   */
+  update(day, hidden, disabled) {
+    const label = day.getDate();
+    let accessibleLabel = this.picker.formattedDateHuman(day);
+    if (disabled) {
+      this.button.setAttribute('aria-disabled', 'true');
+      accessibleLabel = `Excluded date, ${accessibleLabel}`;
+    } else {
+      this.button.removeAttribute('aria-disabled');
+    }
+    if (hidden) {
+      this.button.style.display = 'none';
+    } else {
+      this.button.style.display = 'block';
+    }
+    this.button.setAttribute('data-testid', this.picker.formattedDateFromDate(day));
+    this.button.innerHTML = `<span class="govuk-visually-hidden">${accessibleLabel}</span><span aria-hidden="true">${label}</span>`;
+    this.date = new Date(day);
+  }
+  click(event) {
+    this.picker.goToDate(this.date);
+    this.picker.selectDate(this.date);
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  keyPress(event) {
+    let calendarNavKey = true;
+    switch (event.key) {
+      case 'ArrowLeft':
+        this.picker.focusPreviousDay();
+        break;
+      case 'ArrowRight':
+        this.picker.focusNextDay();
+        break;
+      case 'ArrowUp':
+        this.picker.focusPreviousWeek();
+        break;
+      case 'ArrowDown':
+        this.picker.focusNextWeek();
+        break;
+      case 'Home':
+        this.picker.focusFirstDayOfWeek();
+        break;
+      case 'End':
+        this.picker.focusLastDayOfWeek();
+        break;
+      case 'PageUp':
+        {
+          if (event.shiftKey) {
+            this.picker.focusPreviousYear(event);
+          } else {
+            this.picker.focusPreviousMonth(event);
+          }
+          break;
+        }
+      case 'PageDown':
+        {
+          if (event.shiftKey) {
+            this.picker.focusNextYear(event);
+          } else {
+            this.picker.focusNextMonth(event);
+          }
+          break;
+        }
+      default:
+        calendarNavKey = false;
+        break;
+    }
+    if (calendarNavKey) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+}
+
+/**
+ * Date picker config
+ *
+ * @typedef {object} DatePickerConfig
+ * @property {string} [excludedDates] - Dates that cannot be selected
+ * @property {string} [excludedDays] - Days that cannot be selected
+ * @property {boolean} [leadingZeroes] - Whether to add leading zeroes when populating the field
+ * @property {string} [minDate] - The earliest available date
+ * @property {string} [maxDate] - The latest available date
+ * @property {string} [weekStartDay] - First day of the week in calendar view
+ */
+
+/**
+ * @import { Schema } from '../../all.mjs'
+ */
+
+class FilterToggleButton {
+  constructor(options) {
+    this.options = options;
+    this.container = this.options.toggleButton.container;
+    this.filterContainer = this.options.filter.container;
+    this.createToggleButton();
+    this.setupResponsiveChecks();
+    this.filterContainer.setAttribute('tabindex', '-1');
+    if (this.options.startHidden) {
+      this.hideMenu();
+    }
+  }
+  setupResponsiveChecks() {
+    this.mq = window.matchMedia(this.options.bigModeMediaQuery);
+    this.mq.addListener(this.checkMode.bind(this));
+    this.checkMode(this.mq);
+  }
+  createToggleButton() {
+    this.menuButton = document.createElement('button');
+    this.menuButton.setAttribute('type', 'button');
+    this.menuButton.setAttribute('aria-haspopup', 'true');
+    this.menuButton.setAttribute('aria-expanded', 'false');
+    this.menuButton.className = `govuk-button ${this.options.toggleButton.classes}`;
+    this.menuButton.textContent = this.options.toggleButton.showText;
+    this.menuButton.addEventListener('click', this.onMenuButtonClick.bind(this));
+    this.container.append(this.menuButton);
+  }
+  checkMode(mq) {
+    if (mq.matches) {
+      this.enableBigMode();
+    } else {
+      this.enableSmallMode();
+    }
+  }
+  enableBigMode() {
+    this.showMenu();
+    this.removeCloseButton();
+  }
+  enableSmallMode() {
+    this.hideMenu();
+    this.addCloseButton();
+  }
+  addCloseButton() {
+    if (!this.options.closeButton) {
+      return;
+    }
+    this.closeButton = document.createElement('button');
+    this.closeButton.setAttribute('type', 'button');
+    this.closeButton.className = 'moj-filter__close';
+    this.closeButton.textContent = this.options.closeButton.text;
+    this.closeButton.addEventListener('click', this.onCloseClick.bind(this));
+    this.options.closeButton.container.append(this.closeButton);
+  }
+  onCloseClick() {
+    this.hideMenu();
+    this.menuButton.focus();
+  }
+  removeCloseButton() {
+    if (this.closeButton) {
+      this.closeButton.remove();
+      this.closeButton = null;
+    }
+  }
+  hideMenu() {
+    this.menuButton.setAttribute('aria-expanded', 'false');
+    this.filterContainer.classList.add('moj-js-hidden');
+    this.menuButton.textContent = this.options.toggleButton.showText;
+  }
+  showMenu() {
+    this.menuButton.setAttribute('aria-expanded', 'true');
+    this.filterContainer.classList.remove('moj-js-hidden');
+    this.menuButton.textContent = this.options.toggleButton.hideText;
+  }
+  onMenuButtonClick() {
+    this.toggle();
+  }
+  toggle() {
+    if (this.menuButton.getAttribute('aria-expanded') === 'false') {
+      this.showMenu();
+      this.filterContainer.focus();
+    } else {
+      this.hideMenu();
+    }
+  }
+}
+
+class FormValidator {
+  /**
+   * @param {Element | null} form - HTML element to use for form validator
+   * @param {FormValidatorConfig} [config] - Button menu config
+   */
+  constructor(form, config = {}) {
+    if (!form || !(form instanceof HTMLFormElement)) {
+      return this;
+    }
+    this.form = form;
+    this.errors = [];
+    this.validators = [];
+    this.form.addEventListener('submit', this.onSubmit.bind(this));
+    this.summary = config.summary || document.querySelector('.govuk-error-summary');
+    this.originalTitle = document.title;
+  }
+  escapeHtml(string) {
+    return String(string).replace(/[&<>"'`=/]/g, function fromEntityMap(s) {
+      return FormValidator.entityMap[s];
+    });
+  }
+  resetTitle() {
+    document.title = this.originalTitle;
+  }
+  updateTitle() {
+    document.title = `${this.errors.length} errors - ${document.title}`;
+  }
+  showSummary() {
+    this.summary.innerHTML = this.getSummaryHtml();
+    this.summary.classList.remove('moj-hidden');
+    this.summary.setAttribute('aria-labelledby', 'errorSummary-heading');
+    this.summary.focus();
+  }
+  getSummaryHtml() {
+    let html = '<h2 id="error-summary-title" class="govuk-error-summary__title">There is a problem</h2>';
+    html += '<div class="govuk-error-summary__body">';
+    html += '<ul class="govuk-list govuk-error-summary__list">';
+    for (const error of this.errors) {
+      html += '<li>';
+      html += `<a href="#${this.escapeHtml(error.fieldName)}">`;
+      html += this.escapeHtml(error.message);
+      html += '</a>';
+      html += '</li>';
+    }
+    html += '</ul>';
+    html += '</div>';
+    return html;
+  }
+  hideSummary() {
+    this.summary.classList.add('moj-hidden');
+    this.summary.removeAttribute('aria-labelledby');
+  }
+  onSubmit(event) {
+    this.removeInlineErrors();
+    this.hideSummary();
+    this.resetTitle();
+    if (!this.validate()) {
+      event.preventDefault();
+      this.updateTitle();
+      this.showSummary();
+      this.showInlineErrors();
+    }
+  }
+  showInlineErrors() {
+    for (const error of this.errors) {
+      this.showInlineError(error);
+    }
+  }
+  showInlineError(error) {
+    const errorSpan = document.createElement('span');
+    errorSpan.id = `${error.fieldName}-error`;
+    errorSpan.classList.add('govuk-error-message');
+    errorSpan.innerHTML = this.escapeHtml(error.message);
+    const control = document.querySelector(`#${error.fieldName}`);
+    const fieldset = control.closest('.govuk-fieldset');
+    const fieldContainer = (fieldset || control).closest('.govuk-form-group');
+    const label = fieldContainer.querySelector('label');
+    const legend = fieldContainer.querySelector('legend');
+    fieldContainer.classList.add('govuk-form-group--error');
+    if (fieldset && legend) {
+      legend.after(errorSpan);
+      fieldContainer.setAttribute('aria-invalid', 'true');
+      addAttributeValue(fieldset, 'aria-describedby', errorSpan.id);
+    } else if (label && control) {
+      label.after(errorSpan);
+      control.setAttribute('aria-invalid', 'true');
+      addAttributeValue(control, 'aria-describedby', errorSpan.id);
+    }
+  }
+  removeInlineErrors() {
+    for (const error of this.errors) {
+      this.removeInlineError(error);
+    }
+  }
+  removeInlineError(error) {
+    const errorSpan = document.querySelector(`#${error.fieldName}-error`);
+    const control = document.querySelector(`#${error.fieldName}`);
+    const fieldset = control.closest('.govuk-fieldset');
+    const fieldContainer = (fieldset || control).closest('.govuk-form-group');
+    const label = fieldContainer.querySelector('label');
+    const legend = fieldContainer.querySelector('legend');
+    errorSpan.remove();
+    fieldContainer.classList.remove('govuk-form-group--error');
+    if (fieldset && legend) {
+      fieldContainer.removeAttribute('aria-invalid');
+      removeAttributeValue(fieldset, 'aria-describedby', errorSpan.id);
+    } else if (label && control) {
+      control.removeAttribute('aria-invalid');
+      removeAttributeValue(control, 'aria-describedby', errorSpan.id);
+    }
+  }
+  addValidator(fieldName, rules) {
+    this.validators.push({
+      fieldName,
+      rules,
+      field: this.form.elements[fieldName]
+    });
+  }
+  validate() {
+    this.errors = [];
+    let validator = null;
+    let validatorReturnValue = true;
+    let i;
+    let j;
+    for (i = 0; i < this.validators.length; i++) {
+      validator = this.validators[i];
+      for (j = 0; j < validator.rules.length; j++) {
+        validatorReturnValue = validator.rules[j].method(validator.field, validator.rules[j].params);
+        if (typeof validatorReturnValue === 'boolean' && !validatorReturnValue) {
+          this.errors.push({
+            fieldName: validator.fieldName,
+            message: validator.rules[j].message
+          });
+          break;
+        } else if (typeof validatorReturnValue === 'string') {
+          this.errors.push({
+            fieldName: validatorReturnValue,
+            message: validator.rules[j].message
+          });
+          break;
+        }
+      }
+    }
+    return this.errors.length === 0;
+  }
+}
+
+/**
+ * @typedef {object} FormValidatorConfig
+ * @property {HTMLElement} [summary] - HTML element to use for error summary
+ */
+FormValidator.entityMap = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;',
+  '/': '&#x2F;',
+  '`': '&#x60;',
+  '=': '&#x3D;'
+};
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+
+class MultiFileUpload {
+  /**
+   * @param {MultiFileUploadConfig} [params] - Multi file upload config
+   */
+  constructor(params = {}) {
+    const {
+      container
+    } = params;
+    if (!container || !(container instanceof HTMLElement) || !(dragAndDropSupported() && formDataSupported() && fileApiSupported())) {
+      return this;
+    }
+    this.container = container;
+    this.container.classList.add('moj-multi-file-upload--enhanced');
+    this.defaultParams = {
+      uploadFileEntryHook: () => {},
+      uploadFileExitHook: () => {},
+      uploadFileErrorHook: () => {},
+      fileDeleteHook: () => {},
+      uploadStatusText: 'Uploading files, please wait',
+      dropzoneHintText: 'Drag and drop files here or',
+      dropzoneButtonText: 'Choose files'
+    };
+    this.params = Object.assign({}, this.defaultParams, params);
+    this.feedbackContainer = /** @type {HTMLDivElement} */
+    this.container.querySelector('.moj-multi-file__uploaded-files');
+    this.setupFileInput();
+    this.setupDropzone();
+    this.setupLabel();
+    this.setupStatusBox();
+    this.container.addEventListener('click', this.onFileDeleteClick.bind(this));
+  }
+  setupDropzone() {
+    this.dropzone = document.createElement('div');
+    this.dropzone.classList.add('moj-multi-file-upload__dropzone');
+    this.dropzone.addEventListener('dragover', this.onDragOver.bind(this));
+    this.dropzone.addEventListener('dragleave', this.onDragLeave.bind(this));
+    this.dropzone.addEventListener('drop', this.onDrop.bind(this));
+    this.fileInput.replaceWith(this.dropzone);
+    this.dropzone.appendChild(this.fileInput);
+  }
+  setupLabel() {
+    const label = document.createElement('label');
+    label.setAttribute('for', this.fileInput.id);
+    label.classList.add('govuk-button', 'govuk-button--secondary');
+    label.textContent = this.params.dropzoneButtonText;
+    const hint = document.createElement('p');
+    hint.classList.add('govuk-body');
+    hint.textContent = this.params.dropzoneHintText;
+    this.label = label;
+    this.dropzone.append(hint);
+    this.dropzone.append(label);
+  }
+  setupFileInput() {
+    this.fileInput = /** @type {HTMLInputElement} */
+    this.container.querySelector('.moj-multi-file-upload__input');
+    this.fileInput.addEventListener('change', this.onFileChange.bind(this));
+    this.fileInput.addEventListener('focus', this.onFileFocus.bind(this));
+    this.fileInput.addEventListener('blur', this.onFileBlur.bind(this));
+  }
+  setupStatusBox() {
+    this.status = document.createElement('div');
+    this.status.classList.add('govuk-visually-hidden');
+    this.status.setAttribute('aria-live', 'polite');
+    this.status.setAttribute('role', 'status');
+    this.dropzone.append(this.status);
+  }
+  onDragOver(event) {
+    event.preventDefault();
+    this.dropzone.classList.add('moj-multi-file-upload--dragover');
+  }
+  onDragLeave() {
+    this.dropzone.classList.remove('moj-multi-file-upload--dragover');
+  }
+  onDrop(event) {
+    event.preventDefault();
+    this.dropzone.classList.remove('moj-multi-file-upload--dragover');
+    this.feedbackContainer.classList.remove('moj-hidden');
+    this.status.textContent = this.params.uploadStatusText;
+    this.uploadFiles(event.dataTransfer.files);
+  }
+  uploadFiles(files) {
+    for (const file of Array.from(files)) {
+      this.uploadFile(file);
+    }
+  }
+  onFileChange() {
+    this.feedbackContainer.classList.remove('moj-hidden');
+    this.status.textContent = this.params.uploadStatusText;
+    this.uploadFiles(this.fileInput.files);
+    const fileInput = this.fileInput.cloneNode(true);
+    if (!fileInput || !(fileInput instanceof HTMLInputElement)) {
+      return;
+    }
+    fileInput.value = '';
+    this.fileInput.replaceWith(fileInput);
+    this.setupFileInput();
+    this.fileInput.focus();
+  }
+  onFileFocus() {
+    this.label.classList.add('moj-multi-file-upload--focused');
+  }
+  onFileBlur() {
+    this.label.classList.remove('moj-multi-file-upload--focused');
+  }
+  getSuccessHtml(success) {
+    return `<span class="moj-multi-file-upload__success"> <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"/></svg>${success.messageHtml}</span>`;
+  }
+  getErrorHtml(error) {
+    return `<span class="moj-multi-file-upload__error"> <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z"/></svg>${error.message}</span>`;
+  }
+  getFileRow(file) {
+    const row = document.createElement('div');
+    row.classList.add('govuk-summary-list__row', 'moj-multi-file-upload__row');
+    row.innerHTML = `
+    <div class="govuk-summary-list__value moj-multi-file-upload__message">
+      <span class="moj-multi-file-upload__filename">${file.name}</span>
+      <span class="moj-multi-file-upload__progress">0%</span>
+    </div>
+    <div class="govuk-summary-list__actions moj-multi-file-upload__actions"></div>
+  `;
+    return row;
+  }
+  getDeleteButton(file) {
+    const button = document.createElement('button');
+    button.setAttribute('type', 'button');
+    button.setAttribute('name', 'delete');
+    button.setAttribute('value', file.filename);
+    button.classList.add('moj-multi-file-upload__delete', 'govuk-button', 'govuk-button--secondary', 'govuk-!-margin-bottom-0');
+    button.innerHTML = `Delete <span class="govuk-visually-hidden">${file.originalname}</span>`;
+    return button;
+  }
+  uploadFile(file) {
+    this.params.uploadFileEntryHook(this, file);
+    const item = this.getFileRow(file);
+    const message = item.querySelector('.moj-multi-file-upload__message');
+    const actions = item.querySelector('.moj-multi-file-upload__actions');
+    const progress = item.querySelector('.moj-multi-file-upload__progress');
+    const formData = new FormData();
+    formData.append('documents', file);
+    this.feedbackContainer.querySelector('.moj-multi-file-upload__list').append(item);
+    const xhr = new XMLHttpRequest();
+    const onLoad = () => {
+      if (xhr.status < 200 || xhr.status >= 300 || !('success' in xhr.response)) {
+        return onError();
+      }
+      message.innerHTML = this.getSuccessHtml(xhr.response.success);
+      this.status.textContent = xhr.response.success.messageText;
+      actions.append(this.getDeleteButton(xhr.response.file));
+      this.params.uploadFileExitHook(this, file, xhr, xhr.responseText);
+    };
+    const onError = () => {
+      const error = new Error(xhr.response && 'error' in xhr.response ? xhr.response.error.message : xhr.statusText || 'Upload failed');
+      message.innerHTML = this.getErrorHtml(error);
+      this.status.textContent = error.message;
+      this.params.uploadFileErrorHook(this, file, xhr, xhr.responseText, error);
+    };
+    xhr.addEventListener('load', onLoad);
+    xhr.addEventListener('error', onError);
+    xhr.upload.addEventListener('progress', event => {
+      if (!event.lengthComputable) {
+        return;
+      }
+      const percentComplete = Math.round(event.loaded / event.total * 100);
+      progress.textContent = ` ${percentComplete}%`;
+    });
+    xhr.open('POST', this.params.uploadUrl);
+    xhr.responseType = 'json';
+    xhr.send(formData);
+  }
+  onFileDeleteClick(event) {
+    const button = event.target;
+    if (!button || !(button instanceof HTMLButtonElement) || !button.classList.contains('moj-multi-file-upload__delete')) {
+      return;
+    }
+    event.preventDefault(); // if user refreshes page and then deletes
+
+    const xhr = new XMLHttpRequest();
+    xhr.addEventListener('load', () => {
+      if (xhr.status < 200 || xhr.status >= 300) {
+        return;
+      }
+      const rows = Array.from(this.feedbackContainer.querySelectorAll('.moj-multi-file-upload__row'));
+      if (rows.length === 1) {
+        this.feedbackContainer.classList.add('moj-hidden');
+      }
+      const row = rows.find(row => row.contains(button));
+      if (row) row.remove();
+      this.params.fileDeleteHook(this, undefined, xhr, xhr.responseText);
+    });
+    xhr.open('POST', this.params.deleteUrl);
+    xhr.setRequestHeader('Content-Type', 'application/json');
+    xhr.responseType = 'json';
+    xhr.send(JSON.stringify({
+      [button.name]: button.value
+    }));
+  }
+}
+
+class MultiSelect {
+  constructor(options) {
+    this.container = options.container;
+    if (this.container.hasAttribute('data-moj-multi-select-init')) {
+      return this;
+    }
+    this.container.setAttribute('data-moj-multi-select-init', '');
+    const idPrefix = options.id_prefix;
+    this.setupToggle(idPrefix);
+    this.toggleButton = this.toggle.querySelector('input');
+    this.toggleButton.addEventListener('click', this.onButtonClick.bind(this));
+    this.container.append(this.toggle);
+    this.checkboxes = Array.from(options.checkboxes);
+    this.checkboxes.forEach(el => el.addEventListener('click', this.onCheckboxClick.bind(this)));
+    this.checked = options.checked || false;
+  }
+  setupToggle(idPrefix = '') {
+    const id = `${idPrefix}checkboxes-all`;
+    const toggle = document.createElement('div');
+    const label = document.createElement('label');
+    const input = document.createElement('input');
+    const span = document.createElement('span');
+    toggle.classList.add('govuk-checkboxes__item', 'govuk-checkboxes--small', 'moj-multi-select__checkbox');
+    input.id = id;
+    input.type = 'checkbox';
+    input.classList.add('govuk-checkboxes__input');
+    label.setAttribute('for', id);
+    label.classList.add('govuk-label', 'govuk-checkboxes__label', 'moj-multi-select__toggle-label');
+    span.classList.add('govuk-visually-hidden');
+    span.textContent = 'Select all';
+    label.append(span);
+    toggle.append(input, label);
+    this.toggle = toggle;
+  }
+  onButtonClick() {
+    if (this.checked) {
+      this.uncheckAll();
+      this.toggleButton.checked = false;
+    } else {
+      this.checkAll();
+      this.toggleButton.checked = true;
+    }
+  }
+  checkAll() {
+    this.checkboxes.forEach(el => {
+      el.checked = true;
+    });
+    this.checked = true;
+  }
+  uncheckAll() {
+    this.checkboxes.forEach(el => {
+      el.checked = false;
+    });
+    this.checked = false;
+  }
+  onCheckboxClick(event) {
+    if (!event.target.checked) {
+      this.toggleButton.checked = false;
+      this.checked = false;
+    } else {
+      if (this.checkboxes.filter(el => el.checked).length === this.checkboxes.length) {
+        this.toggleButton.checked = true;
+        this.checked = true;
+      }
+    }
+  }
+}
+
+class PasswordReveal {
+  /**
+   * @param {Element | null} element - HTML element to use for password reveal
+   */
+  constructor(element) {
+    if (!element || !(element instanceof HTMLInputElement)) {
+      return this;
+    }
+    this.el = element;
+    this.container = element.parentElement;
+    if (this.container.hasAttribute('data-moj-password-reveal-init')) {
+      return this;
+    }
+    this.container.setAttribute('data-moj-password-reveal-init', '');
+    this.el.setAttribute('spellcheck', 'false');
+    this.createButton();
+  }
+  createButton() {
+    this.group = document.createElement('div');
+    this.button = document.createElement('button');
+    this.button.setAttribute('type', 'button');
+    this.group.className = 'moj-password-reveal';
+    this.button.className = 'govuk-button govuk-button--secondary moj-password-reveal__button';
+    this.button.innerHTML = 'Show <span class="govuk-visually-hidden">password</span>';
+    this.button.addEventListener('click', this.onButtonClick.bind(this));
+    this.group.append(this.el, this.button);
+    this.container.append(this.group);
+  }
+  onButtonClick() {
+    if (this.el.type === 'password') {
+      this.el.type = 'text';
+      this.button.innerHTML = 'Hide <span class="govuk-visually-hidden">password</span>';
+    } else {
+      this.el.type = 'password';
+      this.button.innerHTML = 'Show <span class="govuk-visually-hidden">password</span>';
+    }
+  }
+}
+
+class RichTextEditor {
+  /**
+   * @param {RichTextEditorConfig} options
+   */
+  constructor(options = {}) {
+    const {
+      textarea
+    } = options;
+    if (!textarea || !textarea.parentElement || !(textarea instanceof HTMLTextAreaElement) || !('contentEditable' in document.documentElement)) {
+      return this;
+    }
+    options.toolbar = options.toolbar || {
+      bold: false,
+      italic: false,
+      underline: false,
+      bullets: true,
+      numbers: true
+    };
+    this.textarea = textarea;
+    this.container = this.textarea.parentElement;
+    this.options = options;
+    if (this.container.hasAttribute('data-rich-text-editor-init')) {
+      return this;
+    }
+    this.container.setAttribute('data-rich-text-editor-init', '');
+    this.createToolbar();
+    this.hideDefault();
+    this.configureToolbar();
+    this.keys = {
+      left: 37,
+      right: 39,
+      up: 38,
+      down: 40
+    };
+    this.content.addEventListener('input', this.onEditorInput.bind(this));
+    this.container.querySelector('label').addEventListener('click', this.onLabelClick.bind(this));
+    this.toolbar.addEventListener('keydown', this.onToolbarKeydown.bind(this));
+  }
+  onToolbarKeydown(event) {
+    let focusableButton;
+    switch (event.keyCode) {
+      case this.keys.right:
+      case this.keys.down:
+        {
+          focusableButton = this.buttons.find(button => button.getAttribute('tabindex') === '0');
+          const nextButton = focusableButton.nextElementSibling;
+          if (nextButton instanceof HTMLButtonElement) {
+            nextButton.focus();
+            focusableButton.setAttribute('tabindex', '-1');
+            nextButton.setAttribute('tabindex', '0');
+          }
+          break;
+        }
+      case this.keys.left:
+      case this.keys.up:
+        {
+          focusableButton = this.buttons.find(button => button.getAttribute('tabindex') === '0');
+          const previousButton = focusableButton.previousElementSibling;
+          if (previousButton instanceof HTMLButtonElement) {
+            previousButton.focus();
+            focusableButton.setAttribute('tabindex', '-1');
+            previousButton.setAttribute('tabindex', '0');
+          }
+          break;
+        }
+    }
+  }
+  getToolbarHtml() {
+    let html = '';
+    html += '<div class="moj-rich-text-editor__toolbar" role="toolbar">';
+    if (this.options.toolbar.bold) {
+      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--bold" type="button" data-command="bold"><span class="govuk-visually-hidden">Bold</span></button>';
+    }
+    if (this.options.toolbar.italic) {
+      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--italic" type="button" data-command="italic"><span class="govuk-visually-hidden">Italic</span></button>';
+    }
+    if (this.options.toolbar.underline) {
+      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--underline" type="button" data-command="underline"><span class="govuk-visually-hidden">Underline</span></button>';
+    }
+    if (this.options.toolbar.bullets) {
+      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--unordered-list" type="button" data-command="insertUnorderedList"><span class="govuk-visually-hidden">Unordered list</span></button>';
+    }
+    if (this.options.toolbar.numbers) {
+      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--ordered-list" type="button" data-command="insertOrderedList"><span class="govuk-visually-hidden">Ordered list</span></button>';
+    }
+    html += '</div>';
+    return html;
+  }
+  getEnhancedHtml() {
+    return `${this.getToolbarHtml()}<div class="govuk-textarea moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>`;
+  }
+  hideDefault() {
+    this.textarea.classList.add('govuk-visually-hidden');
+    this.textarea.setAttribute('aria-hidden', 'true');
+    this.textarea.setAttribute('tabindex', '-1');
+  }
+  createToolbar() {
+    this.toolbar = document.createElement('div');
+    this.toolbar.className = 'moj-rich-text-editor';
+    this.toolbar.innerHTML = this.getEnhancedHtml();
+    this.container.append(this.toolbar);
+    this.content = /** @type {HTMLDivElement} */
+    this.container.querySelector('.moj-rich-text-editor__content');
+    this.content.innerHTML = this.$textarea.value;
+  }
+  configureToolbar() {
+    this.buttons = Array.from(/** @type {NodeListOf<HTMLButtonElement>} */
+    this.container.querySelectorAll('.moj-rich-text-editor__toolbar-button'));
+    this.buttons.forEach((button, index) => {
+      button.setAttribute('tabindex', !index ? '0' : '-1');
+      button.addEventListener('click', this.onButtonClick.bind(this));
+    });
+  }
+  onButtonClick(event) {
+    if (!(event.currentTarget instanceof HTMLElement)) {
+      return;
+    }
+    document.execCommand(event.currentTarget.getAttribute('data-command'), false, undefined);
+  }
+  getContent() {
+    return this.content.innerHTML;
+  }
+  onEditorInput() {
+    this.updateTextarea();
+  }
+  updateTextarea() {
+    document.execCommand('defaultParagraphSeparator', false, 'p');
+    this.textarea.value = this.getContent();
+  }
+  onLabelClick(event) {
+    event.preventDefault();
+    this.content.focus();
+  }
+}
+
+class SearchToggle {
+  constructor(options) {
+    this.options = options;
+    this.container = this.options.search.container;
+    this.toggleButtonContainer = this.options.toggleButton.container;
+    if (this.container.hasAttribute('data-moj-search-toggle-init')) {
+      return this;
+    }
+    this.container.setAttribute('data-moj-search-toggle-init', '');
+    const svg = '<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="moj-search-toggle__button__icon"><path d="M7.433,12.5790048 C6.06762625,12.5808611 4.75763941,12.0392925 3.79217348,11.0738265 C2.82670755,10.1083606 2.28513891,8.79837375 2.28699522,7.433 C2.28513891,6.06762625 2.82670755,4.75763941 3.79217348,3.79217348 C4.75763941,2.82670755 6.06762625,2.28513891 7.433,2.28699522 C8.79837375,2.28513891 10.1083606,2.82670755 11.0738265,3.79217348 C12.0392925,4.75763941 12.5808611,6.06762625 12.5790048,7.433 C12.5808611,8.79837375 12.0392925,10.1083606 11.0738265,11.0738265 C10.1083606,12.0392925 8.79837375,12.5808611 7.433,12.5790048 L7.433,12.5790048 Z M14.293,12.579 L13.391,12.579 L13.071,12.269 C14.2300759,10.9245158 14.8671539,9.20813198 14.866,7.433 C14.866,3.32786745 11.5381325,-1.65045755e-15 7.433,-1.65045755e-15 C3.32786745,-1.65045755e-15 -1.65045755e-15,3.32786745 -1.65045755e-15,7.433 C-1.65045755e-15,11.5381325 3.32786745,14.866 7.433,14.866 C9.208604,14.8671159 10.9253982,14.2296624 12.27,13.07 L12.579,13.39 L12.579,14.294 L18.296,20 L20,18.296 L14.294,12.579 L14.293,12.579 Z"></path></svg>';
+    this.toggleButton = document.createElement('button');
+    this.toggleButton.setAttribute('class', 'moj-search-toggle__button');
+    this.toggleButton.setAttribute('type', 'button');
+    this.toggleButton.setAttribute('aria-haspopup', 'true');
+    this.toggleButton.setAttribute('aria-expanded', 'false');
+    this.toggleButton.innerHTML = `${this.options.toggleButton.text} ${svg}`;
+    this.toggleButton.addEventListener('click', this.onToggleButtonClick.bind(this));
+    this.toggleButtonContainer.append(this.toggleButton);
+    document.addEventListener('click', this.onDocumentClick.bind(this));
+    document.addEventListener('focusin', this.onDocumentClick.bind(this));
+  }
+  showMenu() {
+    this.toggleButton.setAttribute('aria-expanded', 'true');
+    this.container.classList.remove('moj-js-hidden');
+    this.container.querySelector('input').focus();
+  }
+  hideMenu() {
+    this.container.classList.add('moj-js-hidden');
+    this.toggleButton.setAttribute('aria-expanded', 'false');
+  }
+  onToggleButtonClick() {
+    if (this.toggleButton.getAttribute('aria-expanded') === 'false') {
+      this.showMenu();
+    } else {
+      this.hideMenu();
+    }
+  }
+  onDocumentClick(event) {
+    if (!this.toggleButtonContainer.contains(event.target) && !this.container.contains(event.target)) {
+      this.hideMenu();
+    }
+  }
+}
+
+class SortableTable {
+  constructor(params) {
+    const table = params.table;
+    const head = table == null ? void 0 : table.querySelector('thead');
+    const body = table == null ? void 0 : table.querySelector('tbody');
+    if (!table || !(table instanceof HTMLElement) || !head || !body) {
+      return this;
+    }
+    this.table = table;
+    this.head = head;
+    this.body = body;
+    if (this.table.hasAttribute('data-moj-sortable-table-init')) {
+      return this;
+    }
+    this.table.setAttribute('data-moj-sortable-table-init', '');
+    this.headings = this.head ? Array.from(this.head.querySelectorAll('th')) : [];
+    this.setupOptions(params);
+    this.createHeadingButtons();
+    this.createStatusBox();
+    this.initialiseSortedColumn();
+    this.head.addEventListener('click', this.onSortButtonClick.bind(this));
+  }
+  setupOptions(params) {
+    params = params || {};
+    this.statusMessage = params.statusMessage || 'Sort by %heading% (%direction%)';
+    this.ascendingText = params.ascendingText || 'ascending';
+    this.descendingText = params.descendingText || 'descending';
+  }
+  createHeadingButtons() {
+    for (const heading of this.headings) {
+      if (heading.hasAttribute('aria-sort')) {
+        this.createHeadingButton(heading);
+      }
+    }
+  }
+  createHeadingButton(heading) {
+    const index = this.headings.indexOf(heading);
+    const button = document.createElement('button');
+    button.setAttribute('type', 'button');
+    button.setAttribute('data-index', `${index}`);
+    button.textContent = heading.textContent;
+    heading.textContent = '';
+    heading.appendChild(button);
+  }
+  createStatusBox() {
+    this.status = document.createElement('div');
+    this.status.setAttribute('aria-atomic', 'true');
+    this.status.setAttribute('aria-live', 'polite');
+    this.status.setAttribute('class', 'govuk-visually-hidden');
+    this.status.setAttribute('role', 'status');
+    this.table.insertAdjacentElement('afterend', this.status);
+  }
+  initialiseSortedColumn() {
+    var _sortButton$getAttrib;
+    const rows = this.getTableRowsArray();
+    const heading = this.table.querySelector('th[aria-sort]');
+    const sortButton = heading == null ? void 0 : heading.querySelector('button');
+    const sortDirection = heading == null ? void 0 : heading.getAttribute('aria-sort');
+    const columnNumber = Number.parseInt((_sortButton$getAttrib = sortButton == null ? void 0 : sortButton.getAttribute('data-index')) != null ? _sortButton$getAttrib : '0', 10);
+    if (!heading || !sortButton || !(sortDirection === 'ascending' || sortDirection === 'descending')) {
+      return;
+    }
+    const sortedRows = this.sort(rows, columnNumber, sortDirection);
+    this.addRows(sortedRows);
+  }
+  onSortButtonClick(event) {
+    var _button$getAttribute;
+    const button = event.target;
+    if (!button || !(button instanceof HTMLButtonElement) || !button.parentElement) {
+      return;
+    }
+    const heading = button.parentElement;
+    const sortDirection = heading.getAttribute('aria-sort');
+    const columnNumber = Number.parseInt((_button$getAttribute = button == null ? void 0 : button.getAttribute('data-index')) != null ? _button$getAttribute : '0', 10);
+    const newSortDirection = sortDirection === 'none' || sortDirection === 'descending' ? 'ascending' : 'descending';
+    const rows = this.getTableRowsArray();
+    const sortedRows = this.sort(rows, columnNumber, newSortDirection);
+    this.addRows(sortedRows);
+    this.removeButtonStates();
+    this.updateButtonState(button, newSortDirection);
+  }
+  updateButtonState(button, direction) {
+    if (!(direction === 'ascending' || direction === 'descending')) {
+      return;
+    }
+    button.parentElement.setAttribute('aria-sort', direction);
+    let message = this.statusMessage;
+    message = message.replace(/%heading%/, button.textContent);
+    message = message.replace(/%direction%/, this[`${direction}Text`]);
+    this.status.textContent = message;
+  }
+  removeButtonStates() {
+    for (const heading of this.headings) {
+      heading.setAttribute('aria-sort', 'none');
+    }
+  }
+  addRows(rows) {
+    for (const row of rows) {
+      this.body.append(row);
+    }
+  }
+  getTableRowsArray() {
+    return Array.from(this.body.querySelectorAll('tr'));
+  }
+  sort(rows, columnNumber, sortDirection) {
+    return rows.sort((rowA, rowB) => {
+      const tdA = rowA.querySelectorAll('td, th')[columnNumber];
+      const tdB = rowB.querySelectorAll('td, th')[columnNumber];
+      if (!tdA || !tdB || !(tdA instanceof HTMLElement) || !(tdB instanceof HTMLElement)) {
+        return 0;
+      }
+      const valueA = sortDirection === 'ascending' ? this.getCellValue(tdA) : this.getCellValue(tdB);
+      const valueB = sortDirection === 'ascending' ? this.getCellValue(tdB) : this.getCellValue(tdA);
+      return !(typeof valueA === 'number' && typeof valueB === 'number') ? valueA.toString().localeCompare(valueB.toString()) : valueA - valueB;
+    });
+  }
+  getCellValue(cell) {
+    const val = cell.getAttribute('data-sort-value') || cell.innerHTML;
+    const valAsNumber = Number(val);
+    return Number.isFinite(valAsNumber) ? valAsNumber // Exclude invalid numbers, infinity etc
+    : val;
+  }
+}
+
+const version = '0.0.0-development';
+
+/* 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);
+  });
+}
+
+/**
+ * @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
+ */
+
+/**
+ * Schema property for component config
+ *
+ * @typedef {object} SchemaProperty
+ * @property {'string' | 'boolean' | 'number' | 'object'} type - Property type
+ */
+
+export { AddAnother, Alert, ButtonMenu, DatePicker, FilterToggleButton, FormValidator, MultiFileUpload, MultiSelect, PasswordReveal, RichTextEditor, SearchToggle, SortableTable, initAll, version };
+//# sourceMappingURL=all.bundle.mjs.map