@ministryofjustice/frontend 4.0.0 → 5.0.0

package/moj/components/filter-toggle-button/filter-toggle-button.mjs

@@ -1,94 +1,88 @@
-function FilterToggleButton(options) {
-  this.options = options;
-  this.container = $(this.options.toggleButton.container);
-  this.filterContainer = $(this.options.filter.container);
-
-  this.createToggleButton();
-  this.setupResponsiveChecks();
-  this.filterContainer.attr('tabindex', '-1');
-  if (this.options.startHidden) {
-    this.hideMenu();
+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();
+    }
   }
-}
-
-FilterToggleButton.prototype.setupResponsiveChecks = function () {
-  this.mq = window.matchMedia(this.options.bigModeMediaQuery);
-  this.mq.addListener($.proxy(this, 'checkMode'));
-  this.checkMode(this.mq);
-};
-
-FilterToggleButton.prototype.createToggleButton = function () {
-  this.menuButton = $(
-    `<button class="govuk-button ${this.options.toggleButton.classes}" type="button" aria-haspopup="true" aria-expanded="false">${this.options.toggleButton.showText}</button>`
-  );
-  this.menuButton.on('click', $.proxy(this, 'onMenuButtonClick'));
-  this.container.append(this.menuButton);
-};
-
-FilterToggleButton.prototype.checkMode = function (mq) {
-  if (mq.matches) {
-    this.enableBigMode();
-  } else {
-    this.enableSmallMode();
+  setupResponsiveChecks() {
+    this.mq = window.matchMedia(this.options.bigModeMediaQuery);
+    this.mq.addListener(this.checkMode.bind(this));
+    this.checkMode(this.mq);
   }
-};
-
-FilterToggleButton.prototype.enableBigMode = function () {
-  this.showMenu();
-  this.removeCloseButton();
-};
-
-FilterToggleButton.prototype.enableSmallMode = function () {
-  this.hideMenu();
-  this.addCloseButton();
-};
-
-FilterToggleButton.prototype.addCloseButton = function () {
-  if (this.options.closeButton) {
-    this.closeButton = $(
-      `<button class="moj-filter__close" type="button">${this.options.closeButton.text}</button>`
-    );
-    this.closeButton.on('click', $.proxy(this, 'onCloseClick'));
-    $(this.options.closeButton.container).append(this.closeButton);
+  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);
   }
-};
-
-FilterToggleButton.prototype.onCloseClick = function () {
-  this.hideMenu();
-  this.menuButton.focus();
-};
-
-FilterToggleButton.prototype.removeCloseButton = function () {
-  if (this.closeButton) {
-    this.closeButton.remove();
-    this.closeButton = null;
+  checkMode(mq) {
+    if (mq.matches) {
+      this.enableBigMode();
+    } else {
+      this.enableSmallMode();
+    }
   }
-};
-
-FilterToggleButton.prototype.hideMenu = function () {
-  this.menuButton.attr('aria-expanded', 'false');
-  this.filterContainer.addClass('moj-js-hidden');
-  this.menuButton.text(this.options.toggleButton.showText);
-};
-
-FilterToggleButton.prototype.showMenu = function () {
-  this.menuButton.attr('aria-expanded', 'true');
-  this.filterContainer.removeClass('moj-js-hidden');
-  this.menuButton.text(this.options.toggleButton.hideText);
-};
-
-FilterToggleButton.prototype.onMenuButtonClick = function () {
-  this.toggle();
-};
-
-FilterToggleButton.prototype.toggle = function () {
-  if (this.menuButton.attr('aria-expanded') === 'false') {
+  enableBigMode() {
     this.showMenu();
-    this.filterContainer.get(0).focus();
-  } else {
+    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();
+    }
+  }
+}
 
 export { FilterToggleButton };
 //# sourceMappingURL=filter-toggle-button.mjs.map

package/moj/components/filter-toggle-button/filter-toggle-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"filter-toggle-button.mjs","sources":["../../../../src/moj/components/filter-toggle-button/filter-toggle-button.mjs"],"sourcesContent":["import $ from 'jquery'\n\nexport function FilterToggleButton(options) {\n  this.options = options\n  this.container = $(this.options.toggleButton.container)\n  this.filterContainer = $(this.options.filter.container)\n\n  this.createToggleButton()\n  this.setupResponsiveChecks()\n  this.filterContainer.attr('tabindex', '-1')\n  if (this.options.startHidden) {\n    this.hideMenu()\n  }\n}\n\nFilterToggleButton.prototype.setupResponsiveChecks = function () {\n  this.mq = window.matchMedia(this.options.bigModeMediaQuery)\n  this.mq.addListener($.proxy(this, 'checkMode'))\n  this.checkMode(this.mq)\n}\n\nFilterToggleButton.prototype.createToggleButton = function () {\n  this.menuButton = $(\n    `<button class=\"govuk-button ${this.options.toggleButton.classes}\" type=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">${this.options.toggleButton.showText}</button>`\n  )\n  this.menuButton.on('click', $.proxy(this, 'onMenuButtonClick'))\n  this.container.append(this.menuButton)\n}\n\nFilterToggleButton.prototype.checkMode = function (mq) {\n  if (mq.matches) {\n    this.enableBigMode()\n  } else {\n    this.enableSmallMode()\n  }\n}\n\nFilterToggleButton.prototype.enableBigMode = function () {\n  this.showMenu()\n  this.removeCloseButton()\n}\n\nFilterToggleButton.prototype.enableSmallMode = function () {\n  this.hideMenu()\n  this.addCloseButton()\n}\n\nFilterToggleButton.prototype.addCloseButton = function () {\n  if (this.options.closeButton) {\n    this.closeButton = $(\n      `<button class=\"moj-filter__close\" type=\"button\">${this.options.closeButton.text}</button>`\n    )\n    this.closeButton.on('click', $.proxy(this, 'onCloseClick'))\n    $(this.options.closeButton.container).append(this.closeButton)\n  }\n}\n\nFilterToggleButton.prototype.onCloseClick = function () {\n  this.hideMenu()\n  this.menuButton.focus()\n}\n\nFilterToggleButton.prototype.removeCloseButton = function () {\n  if (this.closeButton) {\n    this.closeButton.remove()\n    this.closeButton = null\n  }\n}\n\nFilterToggleButton.prototype.hideMenu = function () {\n  this.menuButton.attr('aria-expanded', 'false')\n  this.filterContainer.addClass('moj-js-hidden')\n  this.menuButton.text(this.options.toggleButton.showText)\n}\n\nFilterToggleButton.prototype.showMenu = function () {\n  this.menuButton.attr('aria-expanded', 'true')\n  this.filterContainer.removeClass('moj-js-hidden')\n  this.menuButton.text(this.options.toggleButton.hideText)\n}\n\nFilterToggleButton.prototype.onMenuButtonClick = function () {\n  this.toggle()\n}\n\nFilterToggleButton.prototype.toggle = function () {\n  if (this.menuButton.attr('aria-expanded') === 'false') {\n    this.showMenu()\n    this.filterContainer.get(0).focus()\n  } else {\n    this.hideMenu()\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"filter-toggle-button.mjs","sources":["../../../../src/moj/components/filter-toggle-button/filter-toggle-button.mjs"],"sourcesContent":["export class FilterToggleButton {\n  constructor(options) {\n    this.options = options\n    this.container = this.options.toggleButton.container\n    this.filterContainer = this.options.filter.container\n\n    this.createToggleButton()\n    this.setupResponsiveChecks()\n    this.filterContainer.setAttribute('tabindex', '-1')\n    if (this.options.startHidden) {\n      this.hideMenu()\n    }\n  }\n\n  setupResponsiveChecks() {\n    this.mq = window.matchMedia(this.options.bigModeMediaQuery)\n    this.mq.addListener(this.checkMode.bind(this))\n    this.checkMode(this.mq)\n  }\n\n  createToggleButton() {\n    this.menuButton = document.createElement('button')\n    this.menuButton.setAttribute('type', 'button')\n    this.menuButton.setAttribute('aria-haspopup', 'true')\n    this.menuButton.setAttribute('aria-expanded', 'false')\n\n    this.menuButton.className = `govuk-button ${this.options.toggleButton.classes}`\n    this.menuButton.textContent = this.options.toggleButton.showText\n\n    this.menuButton.addEventListener('click', this.onMenuButtonClick.bind(this))\n    this.container.append(this.menuButton)\n  }\n\n  checkMode(mq) {\n    if (mq.matches) {\n      this.enableBigMode()\n    } else {\n      this.enableSmallMode()\n    }\n  }\n\n  enableBigMode() {\n    this.showMenu()\n    this.removeCloseButton()\n  }\n\n  enableSmallMode() {\n    this.hideMenu()\n    this.addCloseButton()\n  }\n\n  addCloseButton() {\n    if (!this.options.closeButton) {\n      return\n    }\n\n    this.closeButton = document.createElement('button')\n    this.closeButton.setAttribute('type', 'button')\n\n    this.closeButton.className = 'moj-filter__close'\n    this.closeButton.textContent = this.options.closeButton.text\n\n    this.closeButton.addEventListener('click', this.onCloseClick.bind(this))\n    this.options.closeButton.container.append(this.closeButton)\n  }\n\n  onCloseClick() {\n    this.hideMenu()\n    this.menuButton.focus()\n  }\n\n  removeCloseButton() {\n    if (this.closeButton) {\n      this.closeButton.remove()\n      this.closeButton = null\n    }\n  }\n\n  hideMenu() {\n    this.menuButton.setAttribute('aria-expanded', 'false')\n    this.filterContainer.classList.add('moj-js-hidden')\n    this.menuButton.textContent = this.options.toggleButton.showText\n  }\n\n  showMenu() {\n    this.menuButton.setAttribute('aria-expanded', 'true')\n    this.filterContainer.classList.remove('moj-js-hidden')\n    this.menuButton.textContent = this.options.toggleButton.hideText\n  }\n\n  onMenuButtonClick() {\n    this.toggle()\n  }\n\n  toggle() {\n    if (this.menuButton.getAttribute('aria-expanded') === 'false') {\n      this.showMenu()\n      this.filterContainer.focus()\n    } else {\n      this.hideMenu()\n    }\n  }\n}\n"],"names":["FilterToggleButton","constructor","options","container","toggleButton","filterContainer","filter","createToggleButton","setupResponsiveChecks","setAttribute","startHidden","hideMenu","mq","window","matchMedia","bigModeMediaQuery","addListener","checkMode","bind","menuButton","document","createElement","className","classes","textContent","showText","addEventListener","onMenuButtonClick","append","matches","enableBigMode","enableSmallMode","showMenu","removeCloseButton","addCloseButton","closeButton","text","onCloseClick","focus","remove","classList","add","hideText","toggle","getAttribute"],"mappings":"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"}

package/moj/components/form-validator/form-validator.bundle.js

@@ -0,0 +1,198 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MOJFrontend = global.MOJFrontend || {}));
+})(this, (function (exports) { 'use strict';
+
+  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}`);
+      }
+    }
+  }
+
+  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;'
+  };
+
+  exports.FormValidator = FormValidator;
+
+}));
+//# sourceMappingURL=form-validator.bundle.js.map

package/moj/components/form-validator/form-validator.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-validator.bundle.js","sources":["../../../../src/moj/helpers.mjs","../../../../src/moj/components/form-validator/form-validator.mjs"],"sourcesContent":["export function removeAttributeValue(el, attr, value) {\n  let re, m\n  if (el.getAttribute(attr)) {\n    if (el.getAttribute(attr) === value) {\n      el.removeAttribute(attr)\n    } else {\n      re = new RegExp(`(^|\\\\s)${value}(\\\\s|$)`)\n      m = el.getAttribute(attr).match(re)\n      if (m && m.length === 3) {\n        el.setAttribute(\n          attr,\n          el.getAttribute(attr).replace(re, m[1] && m[2] ? ' ' : '')\n        )\n      }\n    }\n  }\n}\n\nexport function addAttributeValue(el, attr, value) {\n  let re\n  if (!el.getAttribute(attr)) {\n    el.setAttribute(attr, value)\n  } else {\n    re = new RegExp(`(^|\\\\s)${value}(\\\\s|$)`)\n    if (!re.test(el.getAttribute(attr))) {\n      el.setAttribute(attr, `${el.getAttribute(attr)} ${value}`)\n    }\n  }\n}\n\nexport function dragAndDropSupported() {\n  const div = document.createElement('div')\n  return typeof div.ondrop !== 'undefined'\n}\n\nexport function formDataSupported() {\n  return typeof FormData === 'function'\n}\n\nexport function fileApiSupported() {\n  const input = document.createElement('input')\n  input.type = 'file'\n  return typeof input.files !== 'undefined'\n}\n\n/**\n * Find an elements next sibling\n *\n * Utility function to find an elements next sibling matching the provided\n * selector.\n *\n * @param {Element | null} $element - Element to find siblings for\n * @param {string} [selector] - selector for required sibling\n */\nexport function getNextSibling($element, selector) {\n  if (!$element || !($element instanceof HTMLElement)) {\n    return\n  }\n\n  // Get the next sibling element\n  let $sibling = $element.nextElementSibling\n\n  // If there's no selector, return the first sibling\n  if (!selector) return $sibling\n\n  // If the sibling matches our selector, use it\n  // If not, jump to the next sibling and continue the loop\n  while ($sibling) {\n    if ($sibling.matches(selector)) return $sibling\n    $sibling = $sibling.nextElementSibling\n  }\n}\n\n/**\n * Find an elements preceding sibling\n *\n * Utility function to find an elements previous sibling matching the provided\n * selector.\n *\n * @param {Element | null} $element - Element to find siblings for\n * @param {string} [selector] - selector for required sibling\n */\nexport function getPreviousSibling($element, selector) {\n  if (!$element || !($element instanceof HTMLElement)) {\n    return\n  }\n\n  // Get the previous sibling element\n  let $sibling = $element.previousElementSibling\n\n  // If there's no selector, return the first sibling\n  if (!selector) return $sibling\n\n  // If the sibling matches our selector, use it\n  // If not, jump to the next sibling and continue the loop\n  while ($sibling) {\n    if ($sibling.matches(selector)) return $sibling\n    $sibling = $sibling.previousElementSibling\n  }\n}\n\n/**\n * @param {Element | null} $element\n * @param {string} [selector]\n */\nexport function findNearestMatchingElement($element, selector) {\n  // If no element or selector is provided, return\n  if (!$element || !($element instanceof HTMLElement) || !selector) {\n    return\n  }\n\n  // Start with the current element\n  let $currentElement = $element\n\n  while ($currentElement) {\n    // First check the current element\n    if ($currentElement.matches(selector)) {\n      return $currentElement\n    }\n\n    // Check all previous siblings\n    let $sibling = $currentElement.previousElementSibling\n    while ($sibling) {\n      // Check if the sibling itself is a heading\n      if ($sibling.matches(selector)) {\n        return $sibling\n      }\n      $sibling = $sibling.previousElementSibling\n    }\n\n    // If no match found in siblings, move up to parent\n    $currentElement = $currentElement.parentElement\n  }\n}\n\n/**\n * Move focus to element\n *\n * Sets tabindex to -1 to make the element programmatically focusable,\n * but removes it on blur as the element doesn't need to be focused again.\n *\n * @param {HTMLElement} $element - HTML element\n * @param {object} [options] - Handler options\n * @param {function(this: HTMLElement): void} [options.onBeforeFocus] - Callback before focus\n * @param {function(this: HTMLElement): void} [options.onBlur] - Callback on blur\n */\nexport function setFocus($element, options = {}) {\n  const isFocusable = $element.getAttribute('tabindex')\n\n  if (!isFocusable) {\n    $element.setAttribute('tabindex', '-1')\n  }\n\n  /**\n   * Handle element focus\n   */\n  function onFocus() {\n    $element.addEventListener('blur', onBlur, { once: true })\n  }\n\n  /**\n   * Handle element blur\n   */\n  function onBlur() {\n    if (options.onBlur) {\n      options.onBlur.call($element)\n    }\n\n    if (!isFocusable) {\n      $element.removeAttribute('tabindex')\n    }\n  }\n\n  // Add listener to reset element on blur, after focus\n  $element.addEventListener('focus', onFocus, { once: true })\n\n  // Focus element\n  if (options.onBeforeFocus) {\n    options.onBeforeFocus.call($element)\n  }\n  $element.focus()\n}\n","import { addAttributeValue, removeAttributeValue } from '../../helpers.mjs'\n\nexport class FormValidator {\n  /**\n   * @param {Element | null} form - HTML element to use for form validator\n   * @param {FormValidatorConfig} [config] - Button menu config\n   */\n  constructor(form, config = {}) {\n    if (!form || !(form instanceof HTMLFormElement)) {\n      return this\n    }\n\n    this.form = form\n    this.errors = []\n    this.validators = []\n    this.form.addEventListener('submit', this.onSubmit.bind(this))\n    this.summary =\n      config.summary || document.querySelector('.govuk-error-summary')\n    this.originalTitle = document.title\n  }\n\n  escapeHtml(string) {\n    return String(string).replace(/[&<>\"'`=/]/g, function fromEntityMap(s) {\n      return FormValidator.entityMap[s]\n    })\n  }\n\n  resetTitle() {\n    document.title = this.originalTitle\n  }\n\n  updateTitle() {\n    document.title = `${this.errors.length} errors - ${document.title}`\n  }\n\n  showSummary() {\n    this.summary.innerHTML = this.getSummaryHtml()\n    this.summary.classList.remove('moj-hidden')\n    this.summary.setAttribute('aria-labelledby', 'errorSummary-heading')\n    this.summary.focus()\n  }\n\n  getSummaryHtml() {\n    let html =\n      '<h2 id=\"error-summary-title\" class=\"govuk-error-summary__title\">There is a problem</h2>'\n    html += '<div class=\"govuk-error-summary__body\">'\n    html += '<ul class=\"govuk-list govuk-error-summary__list\">'\n    for (const error of this.errors) {\n      html += '<li>'\n      html += `<a href=\"#${this.escapeHtml(error.fieldName)}\">`\n      html += this.escapeHtml(error.message)\n      html += '</a>'\n      html += '</li>'\n    }\n    html += '</ul>'\n    html += '</div>'\n    return html\n  }\n\n  hideSummary() {\n    this.summary.classList.add('moj-hidden')\n    this.summary.removeAttribute('aria-labelledby')\n  }\n\n  onSubmit(event) {\n    this.removeInlineErrors()\n    this.hideSummary()\n    this.resetTitle()\n    if (!this.validate()) {\n      event.preventDefault()\n      this.updateTitle()\n      this.showSummary()\n      this.showInlineErrors()\n    }\n  }\n\n  showInlineErrors() {\n    for (const error of this.errors) {\n      this.showInlineError(error)\n    }\n  }\n\n  showInlineError(error) {\n    const errorSpan = document.createElement('span')\n    errorSpan.id = `${error.fieldName}-error`\n    errorSpan.classList.add('govuk-error-message')\n    errorSpan.innerHTML = this.escapeHtml(error.message)\n\n    const control = document.querySelector(`#${error.fieldName}`)\n    const fieldset = control.closest('.govuk-fieldset')\n    const fieldContainer = (fieldset || control).closest('.govuk-form-group')\n\n    const label = fieldContainer.querySelector('label')\n    const legend = fieldContainer.querySelector('legend')\n\n    fieldContainer.classList.add('govuk-form-group--error')\n\n    if (fieldset && legend) {\n      legend.after(errorSpan)\n      fieldContainer.setAttribute('aria-invalid', 'true')\n      addAttributeValue(fieldset, 'aria-describedby', errorSpan.id)\n    } else if (label && control) {\n      label.after(errorSpan)\n      control.setAttribute('aria-invalid', 'true')\n      addAttributeValue(control, 'aria-describedby', errorSpan.id)\n    }\n  }\n\n  removeInlineErrors() {\n    for (const error of this.errors) {\n      this.removeInlineError(error)\n    }\n  }\n\n  removeInlineError(error) {\n    const errorSpan = document.querySelector(`#${error.fieldName}-error`)\n\n    const control = document.querySelector(`#${error.fieldName}`)\n    const fieldset = control.closest('.govuk-fieldset')\n    const fieldContainer = (fieldset || control).closest('.govuk-form-group')\n\n    const label = fieldContainer.querySelector('label')\n    const legend = fieldContainer.querySelector('legend')\n\n    errorSpan.remove()\n    fieldContainer.classList.remove('govuk-form-group--error')\n\n    if (fieldset && legend) {\n      fieldContainer.removeAttribute('aria-invalid')\n      removeAttributeValue(fieldset, 'aria-describedby', errorSpan.id)\n    } else if (label && control) {\n      control.removeAttribute('aria-invalid')\n      removeAttributeValue(control, 'aria-describedby', errorSpan.id)\n    }\n  }\n\n  addValidator(fieldName, rules) {\n    this.validators.push({\n      fieldName,\n      rules,\n      field: this.form.elements[fieldName]\n    })\n  }\n\n  validate() {\n    this.errors = []\n    let validator = null\n    let validatorReturnValue = true\n    let i\n    let j\n    for (i = 0; i < this.validators.length; i++) {\n      validator = this.validators[i]\n      for (j = 0; j < validator.rules.length; j++) {\n        validatorReturnValue = validator.rules[j].method(\n          validator.field,\n          validator.rules[j].params\n        )\n\n        if (\n          typeof validatorReturnValue === 'boolean' &&\n          !validatorReturnValue\n        ) {\n          this.errors.push({\n            fieldName: validator.fieldName,\n            message: validator.rules[j].message\n          })\n          break\n        } else if (typeof validatorReturnValue === 'string') {\n          this.errors.push({\n            fieldName: validatorReturnValue,\n            message: validator.rules[j].message\n          })\n          break\n        }\n      }\n    }\n    return this.errors.length === 0\n  }\n\n  static entityMap = {\n    '&': '&amp;',\n    '<': '&lt;',\n    '>': '&gt;',\n    '\"': '&quot;',\n    \"'\": '&#39;',\n    '/': '&#x2F;',\n    '`': '&#x60;',\n    '=': '&#x3D;'\n  }\n}\n\n/**\n * @typedef {object} FormValidatorConfig\n * @property {HTMLElement} [summary] - HTML element to use for error summary\n */\n"],"names":["removeAttributeValue","el","attr","value","re","m","getAttribute","removeAttribute","RegExp","match","length","setAttribute","replace","addAttributeValue","test","FormValidator","constructor","form","config","HTMLFormElement","errors","validators","addEventListener","onSubmit","bind","summary","document","querySelector","originalTitle","title","escapeHtml","string","String","fromEntityMap","s","entityMap","resetTitle","updateTitle","showSummary","innerHTML","getSummaryHtml","classList","remove","focus","html","error","fieldName","message","hideSummary","add","event","removeInlineErrors","validate","preventDefault","showInlineErrors","showInlineError","errorSpan","createElement","id","control","fieldset","closest","fieldContainer","label","legend","after","removeInlineError","addValidator","rules","push","field","elements","validator","validatorReturnValue","i","j","method","params"],"mappings":"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"}

package/moj/components/form-validator/form-validator.bundle.mjs

@@ -0,0 +1,190 @@
+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}`);
+    }
+  }
+}
+
+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;'
+};
+
+export { FormValidator };
+//# sourceMappingURL=form-validator.bundle.mjs.map