katalyst-govuk-formbuilder 1.9.2 → 1.9.4

data/app/assets/builds/katalyst/govuk/formbuilder.js

@@ -0,0 +1,1253 @@
+function normaliseString(value, property) {
+  const trimmedValue = value ? value.trim() : '';
+  let output;
+  let outputType = property == null ? void 0 : property.type;
+  if (!outputType) {
+    if (['true', 'false'].includes(trimmedValue)) {
+      outputType = 'boolean';
+    }
+    if (trimmedValue.length > 0 && isFinite(Number(trimmedValue))) {
+      outputType = 'number';
+    }
+  }
+  switch (outputType) {
+    case 'boolean':
+      output = trimmedValue === 'true';
+      break;
+    case 'number':
+      output = Number(trimmedValue);
+      break;
+    default:
+      output = value;
+  }
+  return output;
+}
+
+function mergeConfigs(...configObjects) {
+  const formattedConfigObject = {};
+  for (const configObject of configObjects) {
+    for (const key of Object.keys(configObject)) {
+      const option = formattedConfigObject[key];
+      const override = configObject[key];
+      if (isObject(option) && isObject(override)) {
+        formattedConfigObject[key] = mergeConfigs(option, override);
+      } else {
+        formattedConfigObject[key] = override;
+      }
+    }
+  }
+  return formattedConfigObject;
+}
+function extractConfigByNamespace(Component, dataset, namespace) {
+  const property = Component.schema.properties[namespace];
+  if ((property == null ? void 0 : property.type) !== 'object') {
+    return;
+  }
+  const newObject = {
+    [namespace]: ({})
+  };
+  for (const [key, value] of Object.entries(dataset)) {
+    let current = newObject;
+    const keyParts = key.split('.');
+    for (const [index, name] of keyParts.entries()) {
+      if (typeof current === 'object') {
+        if (index < keyParts.length - 1) {
+          if (!isObject(current[name])) {
+            current[name] = {};
+          }
+          current = current[name];
+        } else if (key !== namespace) {
+          current[name] = normaliseString(value);
+        }
+      }
+    }
+  }
+  return newObject[namespace];
+}
+function getFragmentFromUrl(url) {
+  if (!url.includes('#')) {
+    return undefined;
+  }
+  return url.split('#').pop();
+}
+function setFocus($element, options = {}) {
+  var _options$onBeforeFocu;
+  const isFocusable = $element.getAttribute('tabindex');
+  if (!isFocusable) {
+    $element.setAttribute('tabindex', '-1');
+  }
+  function onFocus() {
+    $element.addEventListener('blur', onBlur, {
+      once: true
+    });
+  }
+  function onBlur() {
+    var _options$onBlur;
+    (_options$onBlur = options.onBlur) == null || _options$onBlur.call($element);
+    if (!isFocusable) {
+      $element.removeAttribute('tabindex');
+    }
+  }
+  $element.addEventListener('focus', onFocus, {
+    once: true
+  });
+  (_options$onBeforeFocu = options.onBeforeFocus) == null || _options$onBeforeFocu.call($element);
+  $element.focus();
+}
+function isSupported($scope = document.body) {
+  if (!$scope) {
+    return false;
+  }
+  return $scope.classList.contains('govuk-frontend-supported');
+}
+function validateConfig(schema, config) {
+  const validationErrors = [];
+  for (const [name, conditions] of Object.entries(schema)) {
+    const errors = [];
+    if (Array.isArray(conditions)) {
+      for (const {
+        required,
+        errorMessage
+      } of conditions) {
+        if (!required.every(key => !!config[key])) {
+          errors.push(errorMessage);
+        }
+      }
+      if (name === 'anyOf' && !(conditions.length - errors.length >= 1)) {
+        validationErrors.push(...errors);
+      }
+    }
+  }
+  return validationErrors;
+}
+function isArray(option) {
+  return Array.isArray(option);
+}
+function isObject(option) {
+  return !!option && typeof option === 'object' && !isArray(option);
+}
+
+function normaliseDataset(Component, dataset) {
+  const out = {};
+  for (const [field, property] of Object.entries(Component.schema.properties)) {
+    if (field in dataset) {
+      out[field] = normaliseString(dataset[field], property);
+    }
+    if ((property == null ? void 0 : property.type) === 'object') {
+      out[field] = extractConfigByNamespace(Component, dataset, field);
+    }
+  }
+  return out;
+}
+
+class GOVUKFrontendError extends Error {
+  constructor(...args) {
+    super(...args);
+    this.name = 'GOVUKFrontendError';
+  }
+}
+class SupportError extends GOVUKFrontendError {
+  /**
+   * Checks if GOV.UK Frontend is supported on this page
+   *
+   * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
+   */
+  constructor($scope = document.body) {
+    const supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';
+    super($scope ? supportMessage : 'GOV.UK Frontend initialised without `<script type="module">`');
+    this.name = 'SupportError';
+  }
+}
+class ConfigError extends GOVUKFrontendError {
+  constructor(...args) {
+    super(...args);
+    this.name = 'ConfigError';
+  }
+}
+class ElementError extends GOVUKFrontendError {
+  constructor(messageOrOptions) {
+    let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
+    if (typeof messageOrOptions === 'object') {
+      const {
+        componentName,
+        identifier,
+        element,
+        expectedType
+      } = messageOrOptions;
+      message = `${componentName}: ${identifier}`;
+      message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
+    }
+    super(message);
+    this.name = 'ElementError';
+  }
+}
+
+class GOVUKFrontendComponent {
+  constructor() {
+    this.checkSupport();
+  }
+  checkSupport() {
+    if (!isSupported()) {
+      throw new SupportError();
+    }
+  }
+}
+
+class I18n {
+  constructor(translations = {}, config = {}) {
+    var _config$locale;
+    this.translations = void 0;
+    this.locale = void 0;
+    this.translations = translations;
+    this.locale = (_config$locale = config.locale) != null ? _config$locale : document.documentElement.lang || 'en';
+  }
+  t(lookupKey, options) {
+    if (!lookupKey) {
+      throw new Error('i18n: lookup key missing');
+    }
+    let translation = this.translations[lookupKey];
+    if (typeof (options == null ? void 0 : options.count) === 'number' && typeof translation === 'object') {
+      const translationPluralForm = translation[this.getPluralSuffix(lookupKey, options.count)];
+      if (translationPluralForm) {
+        translation = translationPluralForm;
+      }
+    }
+    if (typeof translation === 'string') {
+      if (translation.match(/%{(.\S+)}/)) {
+        if (!options) {
+          throw new Error('i18n: cannot replace placeholders in string if no option data provided');
+        }
+        return this.replacePlaceholders(translation, options);
+      }
+      return translation;
+    }
+    return lookupKey;
+  }
+  replacePlaceholders(translationString, options) {
+    const formatter = Intl.NumberFormat.supportedLocalesOf(this.locale).length ? new Intl.NumberFormat(this.locale) : undefined;
+    return translationString.replace(/%{(.\S+)}/g, function (placeholderWithBraces, placeholderKey) {
+      if (Object.prototype.hasOwnProperty.call(options, placeholderKey)) {
+        const placeholderValue = options[placeholderKey];
+        if (placeholderValue === false || typeof placeholderValue !== 'number' && typeof placeholderValue !== 'string') {
+          return '';
+        }
+        if (typeof placeholderValue === 'number') {
+          return formatter ? formatter.format(placeholderValue) : `${placeholderValue}`;
+        }
+        return placeholderValue;
+      }
+      throw new Error(`i18n: no data found to replace ${placeholderWithBraces} placeholder in string`);
+    });
+  }
+  hasIntlPluralRulesSupport() {
+    return Boolean('PluralRules' in window.Intl && Intl.PluralRules.supportedLocalesOf(this.locale).length);
+  }
+  getPluralSuffix(lookupKey, count) {
+    count = Number(count);
+    if (!isFinite(count)) {
+      return 'other';
+    }
+    const translation = this.translations[lookupKey];
+    const preferredForm = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(count) : this.selectPluralFormUsingFallbackRules(count);
+    if (typeof translation === 'object') {
+      if (preferredForm in translation) {
+        return preferredForm;
+      } else if ('other' in translation) {
+        console.warn(`i18n: Missing plural form ".${preferredForm}" for "${this.locale}" locale. Falling back to ".other".`);
+        return 'other';
+      }
+    }
+    throw new Error(`i18n: Plural form ".other" is required for "${this.locale}" locale`);
+  }
+  selectPluralFormUsingFallbackRules(count) {
+    count = Math.abs(Math.floor(count));
+    const ruleset = this.getPluralRulesForLocale();
+    if (ruleset) {
+      return I18n.pluralRules[ruleset](count);
+    }
+    return 'other';
+  }
+  getPluralRulesForLocale() {
+    const localeShort = this.locale.split('-')[0];
+    for (const pluralRule in I18n.pluralRulesMap) {
+      const languages = I18n.pluralRulesMap[pluralRule];
+      if (languages.includes(this.locale) || languages.includes(localeShort)) {
+        return pluralRule;
+      }
+    }
+  }
+}
+I18n.pluralRulesMap = {
+  arabic: ['ar'],
+  chinese: ['my', 'zh', 'id', 'ja', 'jv', 'ko', 'ms', 'th', 'vi'],
+  french: ['hy', 'bn', 'fr', 'gu', 'hi', 'fa', 'pa', 'zu'],
+  german: ['af', 'sq', 'az', 'eu', 'bg', 'ca', 'da', 'nl', 'en', 'et', 'fi', 'ka', 'de', 'el', 'hu', 'lb', 'no', 'so', 'sw', 'sv', 'ta', 'te', 'tr', 'ur'],
+  irish: ['ga'],
+  russian: ['ru', 'uk'],
+  scottish: ['gd'],
+  spanish: ['pt-PT', 'it', 'es'],
+  welsh: ['cy']
+};
+I18n.pluralRules = {
+  arabic(n) {
+    if (n === 0) {
+      return 'zero';
+    }
+    if (n === 1) {
+      return 'one';
+    }
+    if (n === 2) {
+      return 'two';
+    }
+    if (n % 100 >= 3 && n % 100 <= 10) {
+      return 'few';
+    }
+    if (n % 100 >= 11 && n % 100 <= 99) {
+      return 'many';
+    }
+    return 'other';
+  },
+  chinese() {
+    return 'other';
+  },
+  french(n) {
+    return n === 0 || n === 1 ? 'one' : 'other';
+  },
+  german(n) {
+    return n === 1 ? 'one' : 'other';
+  },
+  irish(n) {
+    if (n === 1) {
+      return 'one';
+    }
+    if (n === 2) {
+      return 'two';
+    }
+    if (n >= 3 && n <= 6) {
+      return 'few';
+    }
+    if (n >= 7 && n <= 10) {
+      return 'many';
+    }
+    return 'other';
+  },
+  russian(n) {
+    const lastTwo = n % 100;
+    const last = lastTwo % 10;
+    if (last === 1 && lastTwo !== 11) {
+      return 'one';
+    }
+    if (last >= 2 && last <= 4 && !(lastTwo >= 12 && lastTwo <= 14)) {
+      return 'few';
+    }
+    if (last === 0 || last >= 5 && last <= 9 || lastTwo >= 11 && lastTwo <= 14) {
+      return 'many';
+    }
+    return 'other';
+  },
+  scottish(n) {
+    if (n === 1 || n === 11) {
+      return 'one';
+    }
+    if (n === 2 || n === 12) {
+      return 'two';
+    }
+    if (n >= 3 && n <= 10 || n >= 13 && n <= 19) {
+      return 'few';
+    }
+    return 'other';
+  },
+  spanish(n) {
+    if (n === 1) {
+      return 'one';
+    }
+    if (n % 1000000 === 0 && n !== 0) {
+      return 'many';
+    }
+    return 'other';
+  },
+  welsh(n) {
+    if (n === 0) {
+      return 'zero';
+    }
+    if (n === 1) {
+      return 'one';
+    }
+    if (n === 2) {
+      return 'two';
+    }
+    if (n === 3) {
+      return 'few';
+    }
+    if (n === 6) {
+      return 'many';
+    }
+    return 'other';
+  }
+};
+
+const DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
+
+/**
+ * JavaScript enhancements for the Button component
+ *
+ * @preserve
+ */
+class Button extends GOVUKFrontendComponent {
+  /**
+   * @param {Element | null} $module - HTML element to use for button
+   * @param {ButtonConfig} [config] - Button config
+   */
+  constructor($module, config = {}) {
+    super();
+    this.$module = void 0;
+    this.config = void 0;
+    this.debounceFormSubmitTimer = null;
+    if (!($module instanceof HTMLElement)) {
+      throw new ElementError({
+        componentName: 'Button',
+        element: $module,
+        identifier: 'Root element (`$module`)'
+      });
+    }
+    this.$module = $module;
+    this.config = mergeConfigs(Button.defaults, config, normaliseDataset(Button, $module.dataset));
+    this.$module.addEventListener('keydown', event => this.handleKeyDown(event));
+    this.$module.addEventListener('click', event => this.debounce(event));
+  }
+  handleKeyDown(event) {
+    const $target = event.target;
+    if (event.key !== ' ') {
+      return;
+    }
+    if ($target instanceof HTMLElement && $target.getAttribute('role') === 'button') {
+      event.preventDefault();
+      $target.click();
+    }
+  }
+  debounce(event) {
+    if (!this.config.preventDoubleClick) {
+      return;
+    }
+    if (this.debounceFormSubmitTimer) {
+      event.preventDefault();
+      return false;
+    }
+    this.debounceFormSubmitTimer = window.setTimeout(() => {
+      this.debounceFormSubmitTimer = null;
+    }, DEBOUNCE_TIMEOUT_IN_SECONDS * 1000);
+  }
+}
+
+/**
+ * Button config
+ *
+ * @typedef {object} ButtonConfig
+ * @property {boolean} [preventDoubleClick=false] - Prevent accidental double
+ *   clicks on submit buttons from submitting forms multiple times.
+ */
+
+/**
+ * @typedef {import('../../common/index.mjs').Schema} Schema
+ */
+Button.moduleName = 'govuk-button';
+Button.defaults = Object.freeze({
+  preventDoubleClick: false
+});
+Button.schema = Object.freeze({
+  properties: {
+    preventDoubleClick: {
+      type: 'boolean'
+    }
+  }
+});
+
+function closestAttributeValue($element, attributeName) {
+  const $closestElementWithAttribute = $element.closest(`[${attributeName}]`);
+  return $closestElementWithAttribute ? $closestElementWithAttribute.getAttribute(attributeName) : null;
+}
+
+/**
+ * Character count component
+ *
+ * Tracks the number of characters or words in the `.govuk-js-character-count`
+ * `<textarea>` inside the element. Displays a message with the remaining number
+ * of characters/words available, or the number of characters/words in excess.
+ *
+ * You can configure the message to only appear after a certain percentage
+ * of the available characters/words has been entered.
+ *
+ * @preserve
+ */
+class CharacterCount extends GOVUKFrontendComponent {
+  /**
+   * @param {Element | null} $module - HTML element to use for character count
+   * @param {CharacterCountConfig} [config] - Character count config
+   */
+  constructor($module, config = {}) {
+    var _ref, _this$config$maxwords;
+    super();
+    this.$module = void 0;
+    this.$textarea = void 0;
+    this.$visibleCountMessage = void 0;
+    this.$screenReaderCountMessage = void 0;
+    this.lastInputTimestamp = null;
+    this.lastInputValue = '';
+    this.valueChecker = null;
+    this.config = void 0;
+    this.i18n = void 0;
+    this.maxLength = void 0;
+    if (!($module instanceof HTMLElement)) {
+      throw new ElementError({
+        componentName: 'Character count',
+        element: $module,
+        identifier: 'Root element (`$module`)'
+      });
+    }
+    const $textarea = $module.querySelector('.govuk-js-character-count');
+    if (!($textarea instanceof HTMLTextAreaElement || $textarea instanceof HTMLInputElement)) {
+      throw new ElementError({
+        componentName: 'Character count',
+        element: $textarea,
+        expectedType: 'HTMLTextareaElement or HTMLInputElement',
+        identifier: 'Form field (`.govuk-js-character-count`)'
+      });
+    }
+    const datasetConfig = normaliseDataset(CharacterCount, $module.dataset);
+    let configOverrides = {};
+    if ('maxwords' in datasetConfig || 'maxlength' in datasetConfig) {
+      configOverrides = {
+        maxlength: undefined,
+        maxwords: undefined
+      };
+    }
+    this.config = mergeConfigs(CharacterCount.defaults, config, configOverrides, datasetConfig);
+    const errors = validateConfig(CharacterCount.schema, this.config);
+    if (errors[0]) {
+      throw new ConfigError(`Character count: ${errors[0]}`);
+    }
+    this.i18n = new I18n(this.config.i18n, {
+      locale: closestAttributeValue($module, 'lang')
+    });
+    this.maxLength = (_ref = (_this$config$maxwords = this.config.maxwords) != null ? _this$config$maxwords : this.config.maxlength) != null ? _ref : Infinity;
+    this.$module = $module;
+    this.$textarea = $textarea;
+    const textareaDescriptionId = `${this.$textarea.id}-info`;
+    const $textareaDescription = document.getElementById(textareaDescriptionId);
+    if (!$textareaDescription) {
+      throw new ElementError({
+        componentName: 'Character count',
+        element: $textareaDescription,
+        identifier: `Count message (\`id="${textareaDescriptionId}"\`)`
+      });
+    }
+    if (`${$textareaDescription.textContent}`.match(/^\s*$/)) {
+      $textareaDescription.textContent = this.i18n.t('textareaDescription', {
+        count: this.maxLength
+      });
+    }
+    this.$textarea.insertAdjacentElement('afterend', $textareaDescription);
+    const $screenReaderCountMessage = document.createElement('div');
+    $screenReaderCountMessage.className = 'govuk-character-count__sr-status govuk-visually-hidden';
+    $screenReaderCountMessage.setAttribute('aria-live', 'polite');
+    this.$screenReaderCountMessage = $screenReaderCountMessage;
+    $textareaDescription.insertAdjacentElement('afterend', $screenReaderCountMessage);
+    const $visibleCountMessage = document.createElement('div');
+    $visibleCountMessage.className = $textareaDescription.className;
+    $visibleCountMessage.classList.add('govuk-character-count__status');
+    $visibleCountMessage.setAttribute('aria-hidden', 'true');
+    this.$visibleCountMessage = $visibleCountMessage;
+    $textareaDescription.insertAdjacentElement('afterend', $visibleCountMessage);
+    $textareaDescription.classList.add('govuk-visually-hidden');
+    this.$textarea.removeAttribute('maxlength');
+    this.bindChangeEvents();
+    window.addEventListener('pageshow', () => this.updateCountMessage());
+    this.updateCountMessage();
+  }
+  bindChangeEvents() {
+    this.$textarea.addEventListener('keyup', () => this.handleKeyUp());
+    this.$textarea.addEventListener('focus', () => this.handleFocus());
+    this.$textarea.addEventListener('blur', () => this.handleBlur());
+  }
+  handleKeyUp() {
+    this.updateVisibleCountMessage();
+    this.lastInputTimestamp = Date.now();
+  }
+  handleFocus() {
+    this.valueChecker = window.setInterval(() => {
+      if (!this.lastInputTimestamp || Date.now() - 500 >= this.lastInputTimestamp) {
+        this.updateIfValueChanged();
+      }
+    }, 1000);
+  }
+  handleBlur() {
+    if (this.valueChecker) {
+      window.clearInterval(this.valueChecker);
+    }
+  }
+  updateIfValueChanged() {
+    if (this.$textarea.value !== this.lastInputValue) {
+      this.lastInputValue = this.$textarea.value;
+      this.updateCountMessage();
+    }
+  }
+  updateCountMessage() {
+    this.updateVisibleCountMessage();
+    this.updateScreenReaderCountMessage();
+  }
+  updateVisibleCountMessage() {
+    const remainingNumber = this.maxLength - this.count(this.$textarea.value);
+    const isError = remainingNumber < 0;
+    this.$visibleCountMessage.classList.toggle('govuk-character-count__message--disabled', !this.isOverThreshold());
+    this.$textarea.classList.toggle('govuk-textarea--error', isError);
+    this.$visibleCountMessage.classList.toggle('govuk-error-message', isError);
+    this.$visibleCountMessage.classList.toggle('govuk-hint', !isError);
+    this.$visibleCountMessage.textContent = this.getCountMessage();
+  }
+  updateScreenReaderCountMessage() {
+    if (this.isOverThreshold()) {
+      this.$screenReaderCountMessage.removeAttribute('aria-hidden');
+    } else {
+      this.$screenReaderCountMessage.setAttribute('aria-hidden', 'true');
+    }
+    this.$screenReaderCountMessage.textContent = this.getCountMessage();
+  }
+  count(text) {
+    if (this.config.maxwords) {
+      var _text$match;
+      const tokens = (_text$match = text.match(/\S+/g)) != null ? _text$match : [];
+      return tokens.length;
+    }
+    return text.length;
+  }
+  getCountMessage() {
+    const remainingNumber = this.maxLength - this.count(this.$textarea.value);
+    const countType = this.config.maxwords ? 'words' : 'characters';
+    return this.formatCountMessage(remainingNumber, countType);
+  }
+  formatCountMessage(remainingNumber, countType) {
+    if (remainingNumber === 0) {
+      return this.i18n.t(`${countType}AtLimit`);
+    }
+    const translationKeySuffix = remainingNumber < 0 ? 'OverLimit' : 'UnderLimit';
+    return this.i18n.t(`${countType}${translationKeySuffix}`, {
+      count: Math.abs(remainingNumber)
+    });
+  }
+  isOverThreshold() {
+    if (!this.config.threshold) {
+      return true;
+    }
+    const currentLength = this.count(this.$textarea.value);
+    const maxLength = this.maxLength;
+    const thresholdValue = maxLength * this.config.threshold / 100;
+    return thresholdValue <= currentLength;
+  }
+}
+
+/**
+ * Character count config
+ *
+ * @see {@link CharacterCount.defaults}
+ * @typedef {object} CharacterCountConfig
+ * @property {number} [maxlength] - The maximum number of characters.
+ *   If maxwords is provided, the maxlength option will be ignored.
+ * @property {number} [maxwords] - The maximum number of words. If maxwords is
+ *   provided, the maxlength option will be ignored.
+ * @property {number} [threshold=0] - The percentage value of the limit at
+ *   which point the count message is displayed. If this attribute is set, the
+ *   count message will be hidden by default.
+ * @property {CharacterCountTranslations} [i18n=CharacterCount.defaults.i18n] - Character count translations
+ */
+
+/**
+ * Character count translations
+ *
+ * @see {@link CharacterCount.defaults.i18n}
+ * @typedef {object} CharacterCountTranslations
+ *
+ * Messages shown to users as they type. It provides feedback on how many words
+ * or characters they have remaining or if they are over the limit. This also
+ * includes a message used as an accessible description for the textarea.
+ * @property {TranslationPluralForms} [charactersUnderLimit] - Message displayed
+ *   when the number of characters is under the configured maximum, `maxlength`.
+ *   This message is displayed visually and through assistive technologies. The
+ *   component will replace the `%{count}` placeholder with the number of
+ *   remaining characters. This is a [pluralised list of
+ *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).
+ * @property {string} [charactersAtLimit] - Message displayed when the number of
+ *   characters reaches the configured maximum, `maxlength`. This message is
+ *   displayed visually and through assistive technologies.
+ * @property {TranslationPluralForms} [charactersOverLimit] - Message displayed
+ *   when the number of characters is over the configured maximum, `maxlength`.
+ *   This message is displayed visually and through assistive technologies. The
+ *   component will replace the `%{count}` placeholder with the number of
+ *   remaining characters. This is a [pluralised list of
+ *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).
+ * @property {TranslationPluralForms} [wordsUnderLimit] - Message displayed when
+ *   the number of words is under the configured maximum, `maxlength`. This
+ *   message is displayed visually and through assistive technologies. The
+ *   component will replace the `%{count}` placeholder with the number of
+ *   remaining words. This is a [pluralised list of
+ *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).
+ * @property {string} [wordsAtLimit] - Message displayed when the number of
+ *   words reaches the configured maximum, `maxlength`. This message is
+ *   displayed visually and through assistive technologies.
+ * @property {TranslationPluralForms} [wordsOverLimit] - Message displayed when
+ *   the number of words is over the configured maximum, `maxlength`. This
+ *   message is displayed visually and through assistive technologies. The
+ *   component will replace the `%{count}` placeholder with the number of
+ *   remaining words. This is a [pluralised list of
+ *   messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).
+ * @property {TranslationPluralForms} [textareaDescription] - Message made
+ *   available to assistive technologies, if none is already present in the
+ *   HTML, to describe that the component accepts only a limited amount of
+ *   content. It is visible on the page when JavaScript is unavailable. The
+ *   component will replace the `%{count}` placeholder with the value of the
+ *   `maxlength` or `maxwords` parameter.
+ */
+
+/**
+ * @typedef {import('../../common/index.mjs').Schema} Schema
+ * @typedef {import('../../i18n.mjs').TranslationPluralForms} TranslationPluralForms
+ */
+CharacterCount.moduleName = 'govuk-character-count';
+CharacterCount.defaults = Object.freeze({
+  threshold: 0,
+  i18n: {
+    charactersUnderLimit: {
+      one: 'You have %{count} character remaining',
+      other: 'You have %{count} characters remaining'
+    },
+    charactersAtLimit: 'You have 0 characters remaining',
+    charactersOverLimit: {
+      one: 'You have %{count} character too many',
+      other: 'You have %{count} characters too many'
+    },
+    wordsUnderLimit: {
+      one: 'You have %{count} word remaining',
+      other: 'You have %{count} words remaining'
+    },
+    wordsAtLimit: 'You have 0 words remaining',
+    wordsOverLimit: {
+      one: 'You have %{count} word too many',
+      other: 'You have %{count} words too many'
+    },
+    textareaDescription: {
+      other: ''
+    }
+  }
+});
+CharacterCount.schema = Object.freeze({
+  properties: {
+    i18n: {
+      type: 'object'
+    },
+    maxwords: {
+      type: 'number'
+    },
+    maxlength: {
+      type: 'number'
+    },
+    threshold: {
+      type: 'number'
+    }
+  },
+  anyOf: [{
+    required: ['maxwords'],
+    errorMessage: 'Either "maxlength" or "maxwords" must be provided'
+  }, {
+    required: ['maxlength'],
+    errorMessage: 'Either "maxlength" or "maxwords" must be provided'
+  }]
+});
+
+/**
+ * Checkboxes component
+ *
+ * @preserve
+ */
+class Checkboxes extends GOVUKFrontendComponent {
+  /**
+   * Checkboxes can be associated with a 'conditionally revealed' content block
+   * – for example, a checkbox for 'Phone' could reveal an additional form field
+   * for the user to enter their phone number.
+   *
+   * These associations are made using a `data-aria-controls` attribute, which
+   * is promoted to an aria-controls attribute during initialisation.
+   *
+   * We also need to restore the state of any conditional reveals on the page
+   * (for example if the user has navigated back), and set up event handlers to
+   * keep the reveal in sync with the checkbox state.
+   *
+   * @param {Element | null} $module - HTML element to use for checkboxes
+   */
+  constructor($module) {
+    super();
+    this.$module = void 0;
+    this.$inputs = void 0;
+    if (!($module instanceof HTMLElement)) {
+      throw new ElementError({
+        componentName: 'Checkboxes',
+        element: $module,
+        identifier: 'Root element (`$module`)'
+      });
+    }
+    const $inputs = $module.querySelectorAll('input[type="checkbox"]');
+    if (!$inputs.length) {
+      throw new ElementError({
+        componentName: 'Checkboxes',
+        identifier: 'Form inputs (`<input type="checkbox">`)'
+      });
+    }
+    this.$module = $module;
+    this.$inputs = $inputs;
+    this.$inputs.forEach($input => {
+      const targetId = $input.getAttribute('data-aria-controls');
+      if (!targetId) {
+        return;
+      }
+      if (!document.getElementById(targetId)) {
+        throw new ElementError({
+          componentName: 'Checkboxes',
+          identifier: `Conditional reveal (\`id="${targetId}"\`)`
+        });
+      }
+      $input.setAttribute('aria-controls', targetId);
+      $input.removeAttribute('data-aria-controls');
+    });
+    window.addEventListener('pageshow', () => this.syncAllConditionalReveals());
+    this.syncAllConditionalReveals();
+    this.$module.addEventListener('click', event => this.handleClick(event));
+  }
+  syncAllConditionalReveals() {
+    this.$inputs.forEach($input => this.syncConditionalRevealWithInputState($input));
+  }
+  syncConditionalRevealWithInputState($input) {
+    const targetId = $input.getAttribute('aria-controls');
+    if (!targetId) {
+      return;
+    }
+    const $target = document.getElementById(targetId);
+    if ($target != null && $target.classList.contains('govuk-checkboxes__conditional')) {
+      const inputIsChecked = $input.checked;
+      $input.setAttribute('aria-expanded', inputIsChecked.toString());
+      $target.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked);
+    }
+  }
+  unCheckAllInputsExcept($input) {
+    const allInputsWithSameName = document.querySelectorAll(`input[type="checkbox"][name="${$input.name}"]`);
+    allInputsWithSameName.forEach($inputWithSameName => {
+      const hasSameFormOwner = $input.form === $inputWithSameName.form;
+      if (hasSameFormOwner && $inputWithSameName !== $input) {
+        $inputWithSameName.checked = false;
+        this.syncConditionalRevealWithInputState($inputWithSameName);
+      }
+    });
+  }
+  unCheckExclusiveInputs($input) {
+    const allInputsWithSameNameAndExclusiveBehaviour = document.querySelectorAll(`input[data-behaviour="exclusive"][type="checkbox"][name="${$input.name}"]`);
+    allInputsWithSameNameAndExclusiveBehaviour.forEach($exclusiveInput => {
+      const hasSameFormOwner = $input.form === $exclusiveInput.form;
+      if (hasSameFormOwner) {
+        $exclusiveInput.checked = false;
+        this.syncConditionalRevealWithInputState($exclusiveInput);
+      }
+    });
+  }
+  handleClick(event) {
+    const $clickedInput = event.target;
+    if (!($clickedInput instanceof HTMLInputElement) || $clickedInput.type !== 'checkbox') {
+      return;
+    }
+    const hasAriaControls = $clickedInput.getAttribute('aria-controls');
+    if (hasAriaControls) {
+      this.syncConditionalRevealWithInputState($clickedInput);
+    }
+    if (!$clickedInput.checked) {
+      return;
+    }
+    const hasBehaviourExclusive = $clickedInput.getAttribute('data-behaviour') === 'exclusive';
+    if (hasBehaviourExclusive) {
+      this.unCheckAllInputsExcept($clickedInput);
+    } else {
+      this.unCheckExclusiveInputs($clickedInput);
+    }
+  }
+}
+Checkboxes.moduleName = 'govuk-checkboxes';
+
+/**
+ * Error summary component
+ *
+ * Takes focus on initialisation for accessible announcement, unless disabled in
+ * configuration.
+ *
+ * @preserve
+ */
+class ErrorSummary extends GOVUKFrontendComponent {
+  /**
+   * @param {Element | null} $module - HTML element to use for error summary
+   * @param {ErrorSummaryConfig} [config] - Error summary config
+   */
+  constructor($module, config = {}) {
+    super();
+    this.$module = void 0;
+    this.config = void 0;
+    if (!($module instanceof HTMLElement)) {
+      throw new ElementError({
+        componentName: 'Error summary',
+        element: $module,
+        identifier: 'Root element (`$module`)'
+      });
+    }
+    this.$module = $module;
+    this.config = mergeConfigs(ErrorSummary.defaults, config, normaliseDataset(ErrorSummary, $module.dataset));
+    if (!this.config.disableAutoFocus) {
+      setFocus(this.$module);
+    }
+    this.$module.addEventListener('click', event => this.handleClick(event));
+  }
+  handleClick(event) {
+    const $target = event.target;
+    if ($target && this.focusTarget($target)) {
+      event.preventDefault();
+    }
+  }
+  focusTarget($target) {
+    if (!($target instanceof HTMLAnchorElement)) {
+      return false;
+    }
+    const inputId = getFragmentFromUrl($target.href);
+    if (!inputId) {
+      return false;
+    }
+    const $input = document.getElementById(inputId);
+    if (!$input) {
+      return false;
+    }
+    const $legendOrLabel = this.getAssociatedLegendOrLabel($input);
+    if (!$legendOrLabel) {
+      return false;
+    }
+    $legendOrLabel.scrollIntoView();
+    $input.focus({
+      preventScroll: true
+    });
+    return true;
+  }
+  getAssociatedLegendOrLabel($input) {
+    var _document$querySelect;
+    const $fieldset = $input.closest('fieldset');
+    if ($fieldset) {
+      const $legends = $fieldset.getElementsByTagName('legend');
+      if ($legends.length) {
+        const $candidateLegend = $legends[0];
+        if ($input instanceof HTMLInputElement && ($input.type === 'checkbox' || $input.type === 'radio')) {
+          return $candidateLegend;
+        }
+        const legendTop = $candidateLegend.getBoundingClientRect().top;
+        const inputRect = $input.getBoundingClientRect();
+        if (inputRect.height && window.innerHeight) {
+          const inputBottom = inputRect.top + inputRect.height;
+          if (inputBottom - legendTop < window.innerHeight / 2) {
+            return $candidateLegend;
+          }
+        }
+      }
+    }
+    return (_document$querySelect = document.querySelector(`label[for='${$input.getAttribute('id')}']`)) != null ? _document$querySelect : $input.closest('label');
+  }
+}
+
+/**
+ * Error summary config
+ *
+ * @typedef {object} ErrorSummaryConfig
+ * @property {boolean} [disableAutoFocus=false] - If set to `true` the error
+ *   summary will not be focussed when the page loads.
+ */
+
+/**
+ * @typedef {import('../../common/index.mjs').Schema} Schema
+ */
+ErrorSummary.moduleName = 'govuk-error-summary';
+ErrorSummary.defaults = Object.freeze({
+  disableAutoFocus: false
+});
+ErrorSummary.schema = Object.freeze({
+  properties: {
+    disableAutoFocus: {
+      type: 'boolean'
+    }
+  }
+});
+
+/**
+ * Password input component
+ *
+ * @preserve
+ */
+class PasswordInput extends GOVUKFrontendComponent {
+  /**
+   * @param {Element | null} $module - HTML element to use for password input
+   * @param {PasswordInputConfig} [config] - Password input config
+   */
+  constructor($module, config = {}) {
+    super();
+    this.$module = void 0;
+    this.config = void 0;
+    this.i18n = void 0;
+    this.$input = void 0;
+    this.$showHideButton = void 0;
+    this.$screenReaderStatusMessage = void 0;
+    if (!($module instanceof HTMLElement)) {
+      throw new ElementError({
+        componentName: 'Password input',
+        element: $module,
+        identifier: 'Root element (`$module`)'
+      });
+    }
+    const $input = $module.querySelector('.govuk-js-password-input-input');
+    if (!($input instanceof HTMLInputElement)) {
+      throw new ElementError({
+        componentName: 'Password input',
+        element: $input,
+        expectedType: 'HTMLInputElement',
+        identifier: 'Form field (`.govuk-js-password-input-input`)'
+      });
+    }
+    if ($input.type !== 'password') {
+      throw new ElementError('Password input: Form field (`.govuk-js-password-input-input`) must be of type `password`.');
+    }
+    const $showHideButton = $module.querySelector('.govuk-js-password-input-toggle');
+    if (!($showHideButton instanceof HTMLButtonElement)) {
+      throw new ElementError({
+        componentName: 'Password input',
+        element: $showHideButton,
+        expectedType: 'HTMLButtonElement',
+        identifier: 'Button (`.govuk-js-password-input-toggle`)'
+      });
+    }
+    if ($showHideButton.type !== 'button') {
+      throw new ElementError('Password input: Button (`.govuk-js-password-input-toggle`) must be of type `button`.');
+    }
+    this.$module = $module;
+    this.$input = $input;
+    this.$showHideButton = $showHideButton;
+    this.config = mergeConfigs(PasswordInput.defaults, config, normaliseDataset(PasswordInput, $module.dataset));
+    this.i18n = new I18n(this.config.i18n, {
+      locale: closestAttributeValue($module, 'lang')
+    });
+    this.$showHideButton.removeAttribute('hidden');
+    const $screenReaderStatusMessage = document.createElement('div');
+    $screenReaderStatusMessage.className = 'govuk-password-input__sr-status govuk-visually-hidden';
+    $screenReaderStatusMessage.setAttribute('aria-live', 'polite');
+    this.$screenReaderStatusMessage = $screenReaderStatusMessage;
+    this.$input.insertAdjacentElement('afterend', $screenReaderStatusMessage);
+    this.$showHideButton.addEventListener('click', this.toggle.bind(this));
+    if (this.$input.form) {
+      this.$input.form.addEventListener('submit', () => this.hide());
+    }
+    window.addEventListener('pageshow', event => {
+      if (event.persisted && this.$input.type !== 'password') {
+        this.hide();
+      }
+    });
+    this.hide();
+  }
+  toggle(event) {
+    event.preventDefault();
+    if (this.$input.type === 'password') {
+      this.show();
+      return;
+    }
+    this.hide();
+  }
+  show() {
+    this.setType('text');
+  }
+  hide() {
+    this.setType('password');
+  }
+  setType(type) {
+    if (type === this.$input.type) {
+      return;
+    }
+    this.$input.setAttribute('type', type);
+    const isHidden = type === 'password';
+    const prefixButton = isHidden ? 'show' : 'hide';
+    const prefixStatus = isHidden ? 'passwordHidden' : 'passwordShown';
+    this.$showHideButton.innerText = this.i18n.t(`${prefixButton}Password`);
+    this.$showHideButton.setAttribute('aria-label', this.i18n.t(`${prefixButton}PasswordAriaLabel`));
+    this.$screenReaderStatusMessage.innerText = this.i18n.t(`${prefixStatus}Announcement`);
+  }
+}
+
+/**
+ * Password input config
+ *
+ * @typedef {object} PasswordInputConfig
+ * @property {PasswordInputTranslations} [i18n=PasswordInput.defaults.i18n] - Password input translations
+ */
+
+/**
+ * Password input translations
+ *
+ * @see {@link PasswordInput.defaults.i18n}
+ * @typedef {object} PasswordInputTranslations
+ *
+ * Messages displayed to the user indicating the state of the show/hide toggle.
+ * @property {string} [showPassword] - Visible text of the button when the
+ *   password is currently hidden. Plain text only.
+ * @property {string} [hidePassword] - Visible text of the button when the
+ *   password is currently visible. Plain text only.
+ * @property {string} [showPasswordAriaLabel] - aria-label of the button when
+ *   the password is currently hidden. Plain text only.
+ * @property {string} [hidePasswordAriaLabel] - aria-label of the button when
+ *   the password is currently visible. Plain text only.
+ * @property {string} [passwordShownAnnouncement] - Screen reader
+ *   announcement to make when the password has just become visible.
+ *   Plain text only.
+ * @property {string} [passwordHiddenAnnouncement] - Screen reader
+ *   announcement to make when the password has just been hidden.
+ *   Plain text only.
+ */
+
+/**
+ * @typedef {import('../../common/index.mjs').Schema} Schema
+ * @typedef {import('../../i18n.mjs').TranslationPluralForms} TranslationPluralForms
+ */
+PasswordInput.moduleName = 'govuk-password-input';
+PasswordInput.defaults = Object.freeze({
+  i18n: {
+    showPassword: 'Show',
+    hidePassword: 'Hide',
+    showPasswordAriaLabel: 'Show password',
+    hidePasswordAriaLabel: 'Hide password',
+    passwordShownAnnouncement: 'Your password is visible',
+    passwordHiddenAnnouncement: 'Your password is hidden'
+  }
+});
+PasswordInput.schema = Object.freeze({
+  properties: {
+    i18n: {
+      type: 'object'
+    }
+  }
+});
+
+/**
+ * Radios component
+ *
+ * @preserve
+ */
+class Radios extends GOVUKFrontendComponent {
+  /**
+   * Radios can be associated with a 'conditionally revealed' content block –
+   * for example, a radio for 'Phone' could reveal an additional form field for
+   * the user to enter their phone number.
+   *
+   * These associations are made using a `data-aria-controls` attribute, which
+   * is promoted to an aria-controls attribute during initialisation.
+   *
+   * We also need to restore the state of any conditional reveals on the page
+   * (for example if the user has navigated back), and set up event handlers to
+   * keep the reveal in sync with the radio state.
+   *
+   * @param {Element | null} $module - HTML element to use for radios
+   */
+  constructor($module) {
+    super();
+    this.$module = void 0;
+    this.$inputs = void 0;
+    if (!($module instanceof HTMLElement)) {
+      throw new ElementError({
+        componentName: 'Radios',
+        element: $module,
+        identifier: 'Root element (`$module`)'
+      });
+    }
+    const $inputs = $module.querySelectorAll('input[type="radio"]');
+    if (!$inputs.length) {
+      throw new ElementError({
+        componentName: 'Radios',
+        identifier: 'Form inputs (`<input type="radio">`)'
+      });
+    }
+    this.$module = $module;
+    this.$inputs = $inputs;
+    this.$inputs.forEach($input => {
+      const targetId = $input.getAttribute('data-aria-controls');
+      if (!targetId) {
+        return;
+      }
+      if (!document.getElementById(targetId)) {
+        throw new ElementError({
+          componentName: 'Radios',
+          identifier: `Conditional reveal (\`id="${targetId}"\`)`
+        });
+      }
+      $input.setAttribute('aria-controls', targetId);
+      $input.removeAttribute('data-aria-controls');
+    });
+    window.addEventListener('pageshow', () => this.syncAllConditionalReveals());
+    this.syncAllConditionalReveals();
+    this.$module.addEventListener('click', event => this.handleClick(event));
+  }
+  syncAllConditionalReveals() {
+    this.$inputs.forEach($input => this.syncConditionalRevealWithInputState($input));
+  }
+  syncConditionalRevealWithInputState($input) {
+    const targetId = $input.getAttribute('aria-controls');
+    if (!targetId) {
+      return;
+    }
+    const $target = document.getElementById(targetId);
+    if ($target != null && $target.classList.contains('govuk-radios__conditional')) {
+      const inputIsChecked = $input.checked;
+      $input.setAttribute('aria-expanded', inputIsChecked.toString());
+      $target.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
+    }
+  }
+  handleClick(event) {
+    const $clickedInput = event.target;
+    if (!($clickedInput instanceof HTMLInputElement) || $clickedInput.type !== 'radio') {
+      return;
+    }
+    const $allInputs = document.querySelectorAll('input[type="radio"][aria-controls]');
+    const $clickedInputForm = $clickedInput.form;
+    const $clickedInputName = $clickedInput.name;
+    $allInputs.forEach($input => {
+      const hasSameFormOwner = $input.form === $clickedInputForm;
+      const hasSameName = $input.name === $clickedInputName;
+      if (hasSameName && hasSameFormOwner) {
+        this.syncConditionalRevealWithInputState($input);
+      }
+    });
+  }
+}
+Radios.moduleName = 'govuk-radios';
+
+function initAll(config) {
+  let _config$scope;
+  config = typeof config !== 'undefined' ? config : {};
+  if (!isSupported()) {
+    console.log(new SupportError());
+    return;
+  }
+  const components = [[Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [Radios], [PasswordInput, config.passwordInput]];
+  const $scope = (_config$scope = config.scope) != null ? _config$scope : document;
+  components.forEach(([Component, config]) => {
+    const $elements = $scope.querySelectorAll(`[data-module="${Component.moduleName}"]`);
+    $elements.forEach($element => {
+      try {
+        'defaults' in Component ? new Component($element, config) : new Component($element);
+      } catch (error) {
+        console.log(error);
+      }
+    });
+  });
+}
+
+export { Button, CharacterCount, Checkboxes, ErrorSummary, PasswordInput, Radios, initAll };