RubyGems - katalyst-govuk-formbuilder - Versions diffs - 1.19.0 → 1.21.0 - Mend

katalyst-govuk-formbuilder 1.19.0 → 1.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

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

@@ -1,17 +1,20 @@
+import { Controller } from "@hotwired/stimulus";
 function getFragmentFromUrl(url) {
-  if (!url.includes('#')) {
+  if (!url.includes("#")) {
     return undefined;
   }
-  return url.split('#').pop();
+  return url.split("#").pop();
 }
 function setFocus($element, options = {}) {
   var _options$onBeforeFocu;
-  const isFocusable = $element.getAttribute('tabindex');
+  const isFocusable = $element.getAttribute("tabindex");
   if (!isFocusable) {
-    $element.setAttribute('tabindex', '-1');
+    $element.setAttribute("tabindex", "-1");
   }
   function onFocus() {
-    $element.addEventListener('blur', onBlur, {
+    $element.addEventListener("blur", onBlur, {
       once: true
     });
   }
@@ -19,40 +22,35 @@ function setFocus($element, options = {}) {
     var _options$onBlur;
     (_options$onBlur = options.onBlur) == null || _options$onBlur.call($element);
     if (!isFocusable) {
-      $element.removeAttribute('tabindex');
+      $element.removeAttribute("tabindex");
     }
   }
-  $element.addEventListener('focus', onFocus, {
+  $element.addEventListener("focus", onFocus, {
     once: true
   });
   (_options$onBeforeFocu = options.onBeforeFocus) == null || _options$onBeforeFocu.call($element);
   $element.focus();
 }
 function isInitialised($root, moduleName) {
   return $root instanceof HTMLElement && $root.hasAttribute(`data-${moduleName}-init`);
 }
-/**
- * Checks if GOV.UK Frontend is supported on this page
- *
- * Some browsers will load and run our JavaScript but GOV.UK Frontend
- * won't be supported.
- *
- * @param {HTMLElement | null} [$scope] - (internal) `<body>` HTML element checked for browser support
- * @returns {boolean} Whether GOV.UK Frontend is supported on this page
- */
 function isSupported($scope = document.body) {
   if (!$scope) {
     return false;
   }
-  return $scope.classList.contains('govuk-frontend-supported');
+  return $scope.classList.contains("govuk-frontend-supported");
 }
 function isArray(option) {
   return Array.isArray(option);
 }
 function isObject(option) {
-  return !!option && typeof option === 'object' && !isArray(option);
+  return !!option && typeof option === "object" && !isArray(option);
 }
 function formatErrorMessage(Component, message) {
   return `${Component.moduleName}: ${message}`;
 }
@@ -60,74 +58,62 @@ function formatErrorMessage(Component, message) {
 class GOVUKFrontendError extends Error {
   constructor(...args) {
     super(...args);
-    this.name = 'GOVUKFrontendError';
+    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';
+    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';
+    this.name = "SupportError";
   }
 }
 class ConfigError extends GOVUKFrontendError {
   constructor(...args) {
     super(...args);
-    this.name = 'ConfigError';
+    this.name = "ConfigError";
   }
 }
 class ElementError extends GOVUKFrontendError {
   constructor(messageOrOptions) {
-    let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
-    if (typeof messageOrOptions === 'object') {
-      const {
-        component,
-        identifier,
-        element,
-        expectedType
-      } = messageOrOptions;
+    let message = typeof messageOrOptions === "string" ? messageOrOptions : "";
+    if (typeof messageOrOptions === "object") {
+      const {component: component, identifier: identifier, element: element, expectedType: expectedType} = messageOrOptions;
       message = identifier;
-      message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
+      message += element ? ` is not of type ${expectedType != null ? expectedType : "HTMLElement"}` : " not found";
       message = formatErrorMessage(component, message);
     }
     super(message);
-    this.name = 'ElementError';
+    this.name = "ElementError";
   }
 }
 class InitError extends GOVUKFrontendError {
   constructor(componentOrMessage) {
-    const message = typeof componentOrMessage === 'string' ? componentOrMessage : formatErrorMessage(componentOrMessage, `Root element (\`$root\`) already initialised`);
+    const message = typeof componentOrMessage === "string" ? componentOrMessage : formatErrorMessage(componentOrMessage, `Root element (\`$root\`) already initialised`);
     super(message);
-    this.name = 'InitError';
+    this.name = "InitError";
   }
 }
 class Component {
-  /**
-   * Returns the root element of the component
-   *
-   * @protected
-   * @returns {RootElementType} - the root element of component
-   */
   get $root() {
     return this._$root;
   }
   constructor($root) {
     this._$root = void 0;
     const childConstructor = this.constructor;
-    if (typeof childConstructor.moduleName !== 'string') {
+    if (typeof childConstructor.moduleName !== "string") {
       throw new InitError(`\`moduleName\` not defined in component`);
     }
     if (!($root instanceof childConstructor.elementType)) {
       throw new ElementError({
         element: $root,
         component: childConstructor,
-        identifier: 'Root element (`$root`)',
+        identifier: "Root element (`$root`)",
         expectedType: childConstructor.elementType.name
       });
     } else {
@@ -136,7 +122,7 @@ class Component {
     childConstructor.checkSupport();
     this.checkInitialised();
     const moduleName = childConstructor.moduleName;
-    this.$root.setAttribute(`data-${moduleName}-init`, '');
+    this.$root.setAttribute(`data-${moduleName}-init`, "");
   }
   checkInitialised() {
     const constructor = this.constructor;
@@ -147,33 +133,19 @@ class Component {
   }
   static checkSupport() {
     if (!isSupported()) {
-      throw new SupportError();
+      throw new SupportError;
     }
   }
 }
-/**
- * @typedef ChildClass
- * @property {string} moduleName - The module name that'll be looked for in the DOM when initialising the component
- */
-/**
- * @typedef {typeof Component & ChildClass} ChildClassConstructor
- */
 Component.elementType = HTMLElement;
-const configOverride = Symbol.for('configOverride');
+const configOverride = Symbol.for("configOverride");
 class ConfigurableComponent extends Component {
   [configOverride](param) {
     return {};
   }
-  /**
-   * Returns the root element of the component
-   *
-   * @protected
-   * @returns {ConfigurationType} - the root element of component
-   */
   get config() {
     return this._config;
   }
@@ -182,39 +154,43 @@ class ConfigurableComponent extends Component {
     this._config = void 0;
     const childConstructor = this.constructor;
     if (!isObject(childConstructor.defaults)) {
-      throw new ConfigError(formatErrorMessage(childConstructor, 'Config passed as parameter into constructor but no defaults defined'));
+      throw new ConfigError(formatErrorMessage(childConstructor, "Config passed as parameter into constructor but no defaults defined"));
     }
     const datasetConfig = normaliseDataset(childConstructor, this._$root.dataset);
     this._config = mergeConfigs(childConstructor.defaults, config != null ? config : {}, this[configOverride](datasetConfig), datasetConfig);
   }
 }
 function normaliseString(value, property) {
-  const trimmedValue = value ? value.trim() : '';
+  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 ([ "true", "false" ].includes(trimmedValue)) {
+      outputType = "boolean";
     }
     if (trimmedValue.length > 0 && isFinite(Number(trimmedValue))) {
-      outputType = 'number';
+      outputType = "number";
     }
   }
   switch (outputType) {
-    case 'boolean':
-      output = trimmedValue === 'true';
-      break;
-    case 'number':
-      output = Number(trimmedValue);
-      break;
-    default:
-      output = value;
+   case "boolean":
+    output = trimmedValue === "true";
+    break;
+   case "number":
+    output = Number(trimmedValue);
+    break;
+   default:
+    output = value;
   }
   return output;
 }
 function normaliseDataset(Component, dataset) {
   if (!isObject(Component.schema)) {
-    throw new ConfigError(formatErrorMessage(Component, 'Config passed as parameter into constructor but no schema defined'));
+    throw new ConfigError(formatErrorMessage(Component, "Config passed as parameter into constructor but no schema defined"));
   }
   const out = {};
   const entries = Object.entries(Component.schema.properties);
@@ -224,12 +200,13 @@ function normaliseDataset(Component, dataset) {
     if (field in dataset) {
       out[field] = normaliseString(dataset[field], property);
     }
-    if ((property == null ? void 0 : property.type) === 'object') {
+    if ((property == null ? void 0 : property.type) === "object") {
       out[field] = extractConfigByNamespace(Component.schema, dataset, namespace);
     }
   }
   return out;
 }
 function mergeConfigs(...configObjects) {
   const formattedConfigObject = {};
   for (const configObject of configObjects) {
@@ -245,29 +222,28 @@ function mergeConfigs(...configObjects) {
   }
   return formattedConfigObject;
 }
 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) {
+      for (const {required: required, errorMessage: errorMessage} of conditions) {
         if (!required.every(key => !!config[key])) {
           errors.push(errorMessage);
         }
       }
-      if (name === 'anyOf' && !(conditions.length - errors.length >= 1)) {
+      if (name === "anyOf" && !(conditions.length - errors.length >= 1)) {
         validationErrors.push(...errors);
       }
     }
   }
   return validationErrors;
 }
 function extractConfigByNamespace(schema, dataset, namespace) {
   const property = schema.properties[namespace];
-  if ((property == null ? void 0 : property.type) !== 'object') {
+  if ((property == null ? void 0 : property.type) !== "object") {
     return;
   }
   const newObject = {
@@ -275,7 +251,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
   };
   for (const [key, value] of Object.entries(dataset)) {
     let current = newObject;
-    const keyParts = key.split('.');
+    const keyParts = key.split(".");
     for (const [index, name] of keyParts.entries()) {
       if (isObject(current)) {
         if (index < keyParts.length - 1) {
@@ -298,23 +274,23 @@ class I18n {
     this.translations = void 0;
     this.locale = void 0;
     this.translations = translations;
-    this.locale = (_config$locale = config.locale) != null ? _config$locale : document.documentElement.lang || 'en';
+    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');
+      throw new Error("i18n: lookup key missing");
     }
     let translation = this.translations[lookupKey];
-    if (typeof (options == null ? void 0 : options.count) === 'number' && typeof translation === 'object') {
+    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 (typeof translation === "string") {
       if (translation.match(/%{(.\S+)}/)) {
         if (!options) {
-          throw new Error('i18n: cannot replace placeholders in string if no option data provided');
+          throw new Error("i18n: cannot replace placeholders in string if no option data provided");
         }
         return this.replacePlaceholders(translation, options);
       }
@@ -324,13 +300,13 @@ class I18n {
   }
   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) {
+    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 (placeholderValue === false || typeof placeholderValue !== "number" && typeof placeholderValue !== "string") {
+          return "";
         }
-        if (typeof placeholderValue === 'number') {
+        if (typeof placeholderValue === "number") {
           return formatter ? formatter.format(placeholderValue) : `${placeholderValue}`;
         }
         return placeholderValue;
@@ -339,21 +315,21 @@ class I18n {
     });
   }
   hasIntlPluralRulesSupport() {
-    return Boolean('PluralRules' in window.Intl && Intl.PluralRules.supportedLocalesOf(this.locale).length);
+    return Boolean("PluralRules" in window.Intl && Intl.PluralRules.supportedLocalesOf(this.locale).length);
   }
   getPluralSuffix(lookupKey, count) {
     count = Number(count);
     if (!isFinite(count)) {
-      return 'other';
+      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 (typeof translation === "object") {
       if (preferredForm in translation) {
         return preferredForm;
-      } else if ('other' in translation) {
+      } else if ("other" in translation) {
         console.warn(`i18n: Missing plural form ".${preferredForm}" for "${this.locale}" locale. Falling back to ".other".`);
-        return 'other';
+        return "other";
       }
     }
     throw new Error(`i18n: Plural form ".other" is required for "${this.locale}" locale`);
@@ -364,10 +340,10 @@ class I18n {
     if (ruleset) {
       return I18n.pluralRules[ruleset](count);
     }
-    return 'other';
+    return "other";
   }
   getPluralRulesForLocale() {
-    const localeShort = this.locale.split('-')[0];
+    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)) {
@@ -376,112 +352,114 @@ class I18n {
     }
   }
 }
 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']
+  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';
+      return "zero";
     }
     if (n === 1) {
-      return 'one';
+      return "one";
     }
     if (n === 2) {
-      return 'two';
+      return "two";
     }
     if (n % 100 >= 3 && n % 100 <= 10) {
-      return 'few';
+      return "few";
     }
     if (n % 100 >= 11 && n % 100 <= 99) {
-      return 'many';
+      return "many";
     }
-    return 'other';
+    return "other";
   },
   chinese() {
-    return 'other';
+    return "other";
   },
   french(n) {
-    return n === 0 || n === 1 ? 'one' : 'other';
+    return n === 0 || n === 1 ? "one" : "other";
   },
   german(n) {
-    return n === 1 ? 'one' : 'other';
+    return n === 1 ? "one" : "other";
   },
   irish(n) {
     if (n === 1) {
-      return 'one';
+      return "one";
     }
     if (n === 2) {
-      return 'two';
+      return "two";
     }
     if (n >= 3 && n <= 6) {
-      return 'few';
+      return "few";
     }
     if (n >= 7 && n <= 10) {
-      return 'many';
+      return "many";
     }
-    return 'other';
+    return "other";
   },
   russian(n) {
     const lastTwo = n % 100;
     const last = lastTwo % 10;
     if (last === 1 && lastTwo !== 11) {
-      return 'one';
+      return "one";
     }
     if (last >= 2 && last <= 4 && !(lastTwo >= 12 && lastTwo <= 14)) {
-      return 'few';
+      return "few";
     }
     if (last === 0 || last >= 5 && last <= 9 || lastTwo >= 11 && lastTwo <= 14) {
-      return 'many';
+      return "many";
     }
-    return 'other';
+    return "other";
   },
   scottish(n) {
     if (n === 1 || n === 11) {
-      return 'one';
+      return "one";
     }
     if (n === 2 || n === 12) {
-      return 'two';
+      return "two";
     }
     if (n >= 3 && n <= 10 || n >= 13 && n <= 19) {
-      return 'few';
+      return "few";
     }
-    return 'other';
+    return "other";
   },
   spanish(n) {
     if (n === 1) {
-      return 'one';
+      return "one";
     }
-    if (n % 1000000 === 0 && n !== 0) {
-      return 'many';
+    if (n % 1e6 === 0 && n !== 0) {
+      return "many";
     }
-    return 'other';
+    return "other";
   },
   welsh(n) {
     if (n === 0) {
-      return 'zero';
+      return "zero";
     }
     if (n === 1) {
-      return 'one';
+      return "one";
     }
     if (n === 2) {
-      return 'two';
+      return "two";
     }
     if (n === 3) {
-      return 'few';
+      return "few";
     }
     if (n === 6) {
-      return 'many';
+      return "many";
     }
-    return 'other';
+    return "other";
   }
 };
@@ -492,24 +470,19 @@ const DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
  *
  * @preserve
  * @augments ConfigurableComponent<ButtonConfig>
- */
-class Button extends ConfigurableComponent {
-  /**
-   * @param {Element | null} $root - HTML element to use for button
-   * @param {ButtonConfig} [config] - Button config
-   */
+ */ class Button extends ConfigurableComponent {
   constructor($root, config = {}) {
     super($root, config);
     this.debounceFormSubmitTimer = null;
-    this.$root.addEventListener('keydown', event => this.handleKeyDown(event));
-    this.$root.addEventListener('click', event => this.debounce(event));
+    this.$root.addEventListener("keydown", event => this.handleKeyDown(event));
+    this.$root.addEventListener("click", event => this.debounce(event));
   }
   handleKeyDown(event) {
     const $target = event.target;
-    if (event.key !== ' ') {
+    if (event.key !== " ") {
       return;
     }
-    if ($target instanceof HTMLElement && $target.getAttribute('role') === 'button') {
+    if ($target instanceof HTMLElement && $target.getAttribute("role") === "button") {
       event.preventDefault();
       $target.click();
     }
@@ -524,29 +497,20 @@ class Button extends ConfigurableComponent {
     }
     this.debounceFormSubmitTimer = window.setTimeout(() => {
       this.debounceFormSubmitTimer = null;
-    }, DEBOUNCE_TIMEOUT_IN_SECONDS * 1000);
+    }, DEBOUNCE_TIMEOUT_IN_SECONDS * 1e3);
   }
 }
-/**
- * Button config
- *
- * @typedef {object} ButtonConfig
- * @property {boolean} [preventDoubleClick=false] - Prevent accidental double
- *   clicks on submit buttons from submitting forms multiple times.
- */
+Button.moduleName = "govuk-button";
-/**
- * @import { Schema } from '../../common/configuration.mjs'
- */
-Button.moduleName = 'govuk-button';
 Button.defaults = Object.freeze({
   preventDoubleClick: false
 });
 Button.schema = Object.freeze({
   properties: {
     preventDoubleClick: {
-      type: 'boolean'
+      type: "boolean"
     }
   }
 });
@@ -568,11 +532,10 @@ function closestAttributeValue($element, attributeName) {
  *
  * @preserve
  * @augments ConfigurableComponent<CharacterCountConfig>
- */
-class CharacterCount extends ConfigurableComponent {
+ */ class CharacterCount extends ConfigurableComponent {
   [configOverride](datasetConfig) {
     let configOverrides = {};
-    if ('maxwords' in datasetConfig || 'maxlength' in datasetConfig) {
+    if ("maxwords" in datasetConfig || "maxlength" in datasetConfig) {
       configOverrides = {
         maxlength: undefined,
         maxwords: undefined
@@ -580,11 +543,6 @@ class CharacterCount extends ConfigurableComponent {
     }
     return configOverrides;
   }
-  /**
-   * @param {Element | null} $root - HTML element to use for character count
-   * @param {CharacterCountConfig} [config] - Character count config
-   */
   constructor($root, config = {}) {
     var _ref, _this$config$maxwords;
     super($root, config);
@@ -592,17 +550,17 @@ class CharacterCount extends ConfigurableComponent {
     this.$visibleCountMessage = void 0;
     this.$screenReaderCountMessage = void 0;
     this.lastInputTimestamp = null;
-    this.lastInputValue = '';
+    this.lastInputValue = "";
     this.valueChecker = null;
     this.i18n = void 0;
     this.maxLength = void 0;
-    const $textarea = this.$root.querySelector('.govuk-js-character-count');
+    const $textarea = this.$root.querySelector(".govuk-js-character-count");
     if (!($textarea instanceof HTMLTextAreaElement || $textarea instanceof HTMLInputElement)) {
       throw new ElementError({
         component: CharacterCount,
         element: $textarea,
-        expectedType: 'HTMLTextareaElement or HTMLInputElement',
-        identifier: 'Form field (`.govuk-js-character-count`)'
+        expectedType: "HTMLTextareaElement or HTMLInputElement",
+        identifier: "Form field (`.govuk-js-character-count`)"
       });
     }
     const errors = validateConfig(CharacterCount.schema, this.config);
@@ -610,7 +568,7 @@ class CharacterCount extends ConfigurableComponent {
       throw new ConfigError(formatErrorMessage(CharacterCount, errors[0]));
     }
     this.i18n = new I18n(this.config.i18n, {
-      locale: closestAttributeValue(this.$root, 'lang')
+      locale: closestAttributeValue(this.$root, "lang")
     });
     this.maxLength = (_ref = (_this$config$maxwords = this.config.maxwords) != null ? _this$config$maxwords : this.config.maxlength) != null ? _ref : Infinity;
     this.$textarea = $textarea;
@@ -623,34 +581,34 @@ class CharacterCount extends ConfigurableComponent {
         identifier: `Count message (\`id="${textareaDescriptionId}"\`)`
       });
     }
-    this.$errorMessage = this.$root.querySelector('.govuk-error-message');
+    this.$errorMessage = this.$root.querySelector(".govuk-error-message");
     if (`${$textareaDescription.textContent}`.match(/^\s*$/)) {
-      $textareaDescription.textContent = this.i18n.t('textareaDescription', {
+      $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.$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');
+    $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');
+    $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');
+    $textareaDescription.insertAdjacentElement("afterend", $visibleCountMessage);
+    $textareaDescription.classList.add("govuk-visually-hidden");
+    this.$textarea.removeAttribute("maxlength");
     this.bindChangeEvents();
-    window.addEventListener('pageshow', () => this.updateCountMessage());
+    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());
+    this.$textarea.addEventListener("keyup", () => this.handleKeyUp());
+    this.$textarea.addEventListener("focus", () => this.handleFocus());
+    this.$textarea.addEventListener("blur", () => this.handleBlur());
   }
   handleKeyUp() {
     this.updateVisibleCountMessage();
@@ -661,7 +619,7 @@ class CharacterCount extends ConfigurableComponent {
       if (!this.lastInputTimestamp || Date.now() - 500 >= this.lastInputTimestamp) {
         this.updateIfValueChanged();
       }
-    }, 1000);
+    }, 1e3);
   }
   handleBlur() {
     if (this.valueChecker) {
@@ -681,19 +639,19 @@ class CharacterCount extends ConfigurableComponent {
   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.$visibleCountMessage.classList.toggle("govuk-character-count__message--disabled", !this.isOverThreshold());
     if (!this.$errorMessage) {
-      this.$textarea.classList.toggle('govuk-textarea--error', isError);
+      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.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');
+      this.$screenReaderCountMessage.removeAttribute("aria-hidden");
     } else {
-      this.$screenReaderCountMessage.setAttribute('aria-hidden', 'true');
+      this.$screenReaderCountMessage.setAttribute("aria-hidden", "true");
     }
     this.$screenReaderCountMessage.textContent = this.getCountMessage();
   }
@@ -707,14 +665,14 @@ class CharacterCount extends ConfigurableComponent {
   }
   getCountMessage() {
     const remainingNumber = this.maxLength - this.count(this.$textarea.value);
-    const countType = this.config.maxwords ? 'words' : 'characters';
+    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';
+    const translationKeySuffix = remainingNumber < 0 ? "OverLimit" : "UnderLimit";
     return this.i18n.t(`${countType}${translationKeySuffix}`, {
       count: Math.abs(remainingNumber)
     });
@@ -730,143 +688,64 @@ class CharacterCount extends ConfigurableComponent {
   }
 }
-/**
- * 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.
- */
+CharacterCount.moduleName = "govuk-character-count";
-/**
- * @import { Schema } from '../../common/configuration.mjs'
- * @import { TranslationPluralForms } from '../../i18n.mjs'
- */
-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'
+      one: "You have %{count} character remaining",
+      other: "You have %{count} characters remaining"
     },
-    charactersAtLimit: 'You have 0 characters remaining',
+    charactersAtLimit: "You have 0 characters remaining",
     charactersOverLimit: {
-      one: 'You have %{count} character too many',
-      other: 'You have %{count} characters too many'
+      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'
+      one: "You have %{count} word remaining",
+      other: "You have %{count} words remaining"
     },
-    wordsAtLimit: 'You have 0 words remaining',
+    wordsAtLimit: "You have 0 words remaining",
     wordsOverLimit: {
-      one: 'You have %{count} word too many',
-      other: 'You have %{count} words too many'
+      one: "You have %{count} word too many",
+      other: "You have %{count} words too many"
     },
     textareaDescription: {
-      other: ''
+      other: ""
     }
   }
 });
 CharacterCount.schema = Object.freeze({
   properties: {
     i18n: {
-      type: 'object'
+      type: "object"
     },
     maxwords: {
-      type: 'number'
+      type: "number"
     },
     maxlength: {
-      type: 'number'
+      type: "number"
     },
     threshold: {
-      type: 'number'
+      type: "number"
     }
   },
-  anyOf: [{
-    required: ['maxwords'],
+  anyOf: [ {
+    required: [ "maxwords" ],
     errorMessage: 'Either "maxlength" or "maxwords" must be provided'
   }, {
-    required: ['maxlength'],
+    required: [ "maxlength" ],
     errorMessage: 'Either "maxlength" or "maxwords" must be provided'
-  }]
+  } ]
 });
 /**
  * Checkboxes component
  *
  * @preserve
- */
-class Checkboxes extends Component {
-  /**
-   * 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} $root - HTML element to use for checkboxes
-   */
+ */ class Checkboxes extends Component {
   constructor($root) {
     super($root);
     this.$inputs = void 0;
@@ -879,7 +758,7 @@ class Checkboxes extends Component {
     }
     this.$inputs = $inputs;
     this.$inputs.forEach($input => {
-      const targetId = $input.getAttribute('data-aria-controls');
+      const targetId = $input.getAttribute("data-aria-controls");
       if (!targetId) {
         return;
       }
@@ -889,26 +768,26 @@ class Checkboxes extends Component {
           identifier: `Conditional reveal (\`id="${targetId}"\`)`
         });
       }
-      $input.setAttribute('aria-controls', targetId);
-      $input.removeAttribute('data-aria-controls');
+      $input.setAttribute("aria-controls", targetId);
+      $input.removeAttribute("data-aria-controls");
     });
-    window.addEventListener('pageshow', () => this.syncAllConditionalReveals());
+    window.addEventListener("pageshow", () => this.syncAllConditionalReveals());
     this.syncAllConditionalReveals();
-    this.$root.addEventListener('click', event => this.handleClick(event));
+    this.$root.addEventListener("click", event => this.handleClick(event));
   }
   syncAllConditionalReveals() {
     this.$inputs.forEach($input => this.syncConditionalRevealWithInputState($input));
   }
   syncConditionalRevealWithInputState($input) {
-    const targetId = $input.getAttribute('aria-controls');
+    const targetId = $input.getAttribute("aria-controls");
     if (!targetId) {
       return;
     }
     const $target = document.getElementById(targetId);
-    if ($target != null && $target.classList.contains('govuk-checkboxes__conditional')) {
+    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);
+      $input.setAttribute("aria-expanded", inputIsChecked.toString());
+      $target.classList.toggle("govuk-checkboxes__conditional--hidden", !inputIsChecked);
     }
   }
   unCheckAllInputsExcept($input) {
@@ -933,17 +812,17 @@ class Checkboxes extends Component {
   }
   handleClick(event) {
     const $clickedInput = event.target;
-    if (!($clickedInput instanceof HTMLInputElement) || $clickedInput.type !== 'checkbox') {
+    if (!($clickedInput instanceof HTMLInputElement) || $clickedInput.type !== "checkbox") {
       return;
     }
-    const hasAriaControls = $clickedInput.getAttribute('aria-controls');
+    const hasAriaControls = $clickedInput.getAttribute("aria-controls");
     if (hasAriaControls) {
       this.syncConditionalRevealWithInputState($clickedInput);
     }
     if (!$clickedInput.checked) {
       return;
     }
-    const hasBehaviourExclusive = $clickedInput.getAttribute('data-behaviour') === 'exclusive';
+    const hasBehaviourExclusive = $clickedInput.getAttribute("data-behaviour") === "exclusive";
     if (hasBehaviourExclusive) {
       this.unCheckAllInputsExcept($clickedInput);
     } else {
@@ -951,7 +830,8 @@ class Checkboxes extends Component {
     }
   }
 }
-Checkboxes.moduleName = 'govuk-checkboxes';
+Checkboxes.moduleName = "govuk-checkboxes";
 /**
  * Error summary component
@@ -961,18 +841,13 @@ Checkboxes.moduleName = 'govuk-checkboxes';
  *
  * @preserve
  * @augments ConfigurableComponent<ErrorSummaryConfig>
- */
-class ErrorSummary extends ConfigurableComponent {
-  /**
-   * @param {Element | null} $root - HTML element to use for error summary
-   * @param {ErrorSummaryConfig} [config] - Error summary config
-   */
+ */ class ErrorSummary extends ConfigurableComponent {
   constructor($root, config = {}) {
     super($root, config);
     if (!this.config.disableAutoFocus) {
       setFocus(this.$root);
     }
-    this.$root.addEventListener('click', event => this.handleClick(event));
+    this.$root.addEventListener("click", event => this.handleClick(event));
   }
   handleClick(event) {
     const $target = event.target;
@@ -1004,12 +879,12 @@ class ErrorSummary extends ConfigurableComponent {
   }
   getAssociatedLegendOrLabel($input) {
     var _document$querySelect;
-    const $fieldset = $input.closest('fieldset');
+    const $fieldset = $input.closest("fieldset");
     if ($fieldset) {
-      const $legends = $fieldset.getElementsByTagName('legend');
+      const $legends = $fieldset.getElementsByTagName("legend");
       if ($legends.length) {
         const $candidateLegend = $legends[0];
-        if ($input instanceof HTMLInputElement && ($input.type === 'checkbox' || $input.type === 'radio')) {
+        if ($input instanceof HTMLInputElement && ($input.type === "checkbox" || $input.type === "radio")) {
           return $candidateLegend;
         }
         const legendTop = $candidateLegend.getBoundingClientRect().top;
@@ -1022,91 +897,290 @@ class ErrorSummary extends ConfigurableComponent {
         }
       }
     }
-    return (_document$querySelect = document.querySelector(`label[for='${$input.getAttribute('id')}']`)) != null ? _document$querySelect : $input.closest('label');
+    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.
- */
+ErrorSummary.moduleName = "govuk-error-summary";
-/**
- * @import { Schema } from '../../common/configuration.mjs'
- */
-ErrorSummary.moduleName = 'govuk-error-summary';
 ErrorSummary.defaults = Object.freeze({
   disableAutoFocus: false
 });
 ErrorSummary.schema = Object.freeze({
   properties: {
     disableAutoFocus: {
-      type: 'boolean'
+      type: "boolean"
     }
   }
 });
+/**
+ * File upload component
+ *
+ * @preserve
+ * @augments ConfigurableComponent<FileUploadConfig>
+ */ class FileUpload extends ConfigurableComponent {
+  constructor($root, config = {}) {
+    super($root, config);
+    this.$input = void 0;
+    this.$button = void 0;
+    this.$status = void 0;
+    this.i18n = void 0;
+    this.id = void 0;
+    this.$announcements = void 0;
+    this.enteredAnotherElement = void 0;
+    const $input = this.$root.querySelector("input");
+    if ($input === null) {
+      throw new ElementError({
+        component: FileUpload,
+        identifier: 'File inputs (`<input type="file">`)'
+      });
+    }
+    if ($input.type !== "file") {
+      throw new ElementError(formatErrorMessage(FileUpload, 'File input (`<input type="file">`) attribute (`type`) is not `file`'));
+    }
+    this.$input = $input;
+    this.$input.setAttribute("hidden", "true");
+    if (!this.$input.id) {
+      throw new ElementError({
+        component: FileUpload,
+        identifier: 'File input (`<input type="file">`) attribute (`id`)'
+      });
+    }
+    this.id = this.$input.id;
+    this.i18n = new I18n(this.config.i18n, {
+      locale: closestAttributeValue(this.$root, "lang")
+    });
+    const $label = this.findLabel();
+    if (!$label.id) {
+      $label.id = `${this.id}-label`;
+    }
+    this.$input.id = `${this.id}-input`;
+    const $button = document.createElement("button");
+    $button.classList.add("govuk-file-upload-button");
+    $button.type = "button";
+    $button.id = this.id;
+    $button.classList.add("govuk-file-upload-button--empty");
+    const ariaDescribedBy = this.$input.getAttribute("aria-describedby");
+    if (ariaDescribedBy) {
+      $button.setAttribute("aria-describedby", ariaDescribedBy);
+    }
+    const $status = document.createElement("span");
+    $status.className = "govuk-body govuk-file-upload-button__status";
+    $status.setAttribute("aria-live", "polite");
+    $status.innerText = this.i18n.t("noFileChosen");
+    $button.appendChild($status);
+    const commaSpan = document.createElement("span");
+    commaSpan.className = "govuk-visually-hidden";
+    commaSpan.innerText = ", ";
+    commaSpan.id = `${this.id}-comma`;
+    $button.appendChild(commaSpan);
+    const containerSpan = document.createElement("span");
+    containerSpan.className = "govuk-file-upload-button__pseudo-button-container";
+    const buttonSpan = document.createElement("span");
+    buttonSpan.className = "govuk-button govuk-button--secondary govuk-file-upload-button__pseudo-button";
+    buttonSpan.innerText = this.i18n.t("chooseFilesButton");
+    containerSpan.appendChild(buttonSpan);
+    containerSpan.insertAdjacentText("beforeend", " ");
+    const instructionSpan = document.createElement("span");
+    instructionSpan.className = "govuk-body govuk-file-upload-button__instruction";
+    instructionSpan.innerText = this.i18n.t("dropInstruction");
+    containerSpan.appendChild(instructionSpan);
+    $button.appendChild(containerSpan);
+    $button.setAttribute("aria-labelledby", `${$label.id} ${commaSpan.id} ${$button.id}`);
+    $button.addEventListener("click", this.onClick.bind(this));
+    $button.addEventListener("dragover", event => {
+      event.preventDefault();
+    });
+    this.$root.insertAdjacentElement("afterbegin", $button);
+    this.$input.setAttribute("tabindex", "-1");
+    this.$input.setAttribute("aria-hidden", "true");
+    this.$button = $button;
+    this.$status = $status;
+    this.$input.addEventListener("change", this.onChange.bind(this));
+    this.updateDisabledState();
+    this.observeDisabledState();
+    this.$announcements = document.createElement("span");
+    this.$announcements.classList.add("govuk-file-upload-announcements");
+    this.$announcements.classList.add("govuk-visually-hidden");
+    this.$announcements.setAttribute("aria-live", "assertive");
+    this.$root.insertAdjacentElement("afterend", this.$announcements);
+    this.$button.addEventListener("drop", this.onDrop.bind(this));
+    document.addEventListener("dragenter", this.updateDropzoneVisibility.bind(this));
+    document.addEventListener("dragenter", () => {
+      this.enteredAnotherElement = true;
+    });
+    document.addEventListener("dragleave", () => {
+      if (!this.enteredAnotherElement && !this.$button.disabled) {
+        this.hideDraggingState();
+        this.$announcements.innerText = this.i18n.t("leftDropZone");
+      }
+      this.enteredAnotherElement = false;
+    });
+  }
+  updateDropzoneVisibility(event) {
+    if (this.$button.disabled) return;
+    if (event.target instanceof Node) {
+      if (this.$root.contains(event.target)) {
+        if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {
+          if (!this.$button.classList.contains("govuk-file-upload-button--dragging")) {
+            this.showDraggingState();
+            this.$announcements.innerText = this.i18n.t("enteredDropZone");
+          }
+        }
+      } else {
+        if (this.$button.classList.contains("govuk-file-upload-button--dragging")) {
+          this.hideDraggingState();
+          this.$announcements.innerText = this.i18n.t("leftDropZone");
+        }
+      }
+    }
+  }
+  showDraggingState() {
+    this.$button.classList.add("govuk-file-upload-button--dragging");
+  }
+  hideDraggingState() {
+    this.$button.classList.remove("govuk-file-upload-button--dragging");
+  }
+  onDrop(event) {
+    event.preventDefault();
+    if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {
+      this.$input.files = event.dataTransfer.files;
+      this.$input.dispatchEvent(new CustomEvent("change"));
+      this.hideDraggingState();
+    }
+  }
+  onChange() {
+    const fileCount = this.$input.files.length;
+    if (fileCount === 0) {
+      this.$status.innerText = this.i18n.t("noFileChosen");
+      this.$button.classList.add("govuk-file-upload-button--empty");
+    } else {
+      if (fileCount === 1) {
+        this.$status.innerText = this.$input.files[0].name;
+      } else {
+        this.$status.innerText = this.i18n.t("multipleFilesChosen", {
+          count: fileCount
+        });
+      }
+      this.$button.classList.remove("govuk-file-upload-button--empty");
+    }
+  }
+  findLabel() {
+    const $label = document.querySelector(`label[for="${this.$input.id}"]`);
+    if (!$label) {
+      throw new ElementError({
+        component: FileUpload,
+        identifier: `Field label (\`<label for=${this.$input.id}>\`)`
+      });
+    }
+    return $label;
+  }
+  onClick() {
+    this.$input.click();
+  }
+  observeDisabledState() {
+    const observer = new MutationObserver(mutationList => {
+      for (const mutation of mutationList) {
+        if (mutation.type === "attributes" && mutation.attributeName === "disabled") {
+          this.updateDisabledState();
+        }
+      }
+    });
+    observer.observe(this.$input, {
+      attributes: true
+    });
+  }
+  updateDisabledState() {
+    this.$button.disabled = this.$input.disabled;
+    this.$root.classList.toggle("govuk-drop-zone--disabled", this.$button.disabled);
+  }
+}
+FileUpload.moduleName = "govuk-file-upload";
+FileUpload.defaults = Object.freeze({
+  i18n: {
+    chooseFilesButton: "Choose file",
+    dropInstruction: "or drop file",
+    noFileChosen: "No file chosen",
+    multipleFilesChosen: {
+      one: "%{count} file chosen",
+      other: "%{count} files chosen"
+    },
+    enteredDropZone: "Entered drop zone",
+    leftDropZone: "Left drop zone"
+  }
+});
+FileUpload.schema = Object.freeze({
+  properties: {
+    i18n: {
+      type: "object"
+    }
+  }
+});
+function isContainingFiles(dataTransfer) {
+  const hasNoTypesInfo = dataTransfer.types.length === 0;
+  const isDraggingFiles = dataTransfer.types.some(type => type === "Files");
+  return hasNoTypesInfo || isDraggingFiles;
+}
 /**
  * Password input component
  *
  * @preserve
  * @augments ConfigurableComponent<PasswordInputConfig>
- */
-class PasswordInput extends ConfigurableComponent {
-  /**
-   * @param {Element | null} $root - HTML element to use for password input
-   * @param {PasswordInputConfig} [config] - Password input config
-   */
+ */ class PasswordInput extends ConfigurableComponent {
   constructor($root, config = {}) {
     super($root, config);
     this.i18n = void 0;
     this.$input = void 0;
     this.$showHideButton = void 0;
     this.$screenReaderStatusMessage = void 0;
-    const $input = this.$root.querySelector('.govuk-js-password-input-input');
+    const $input = this.$root.querySelector(".govuk-js-password-input-input");
     if (!($input instanceof HTMLInputElement)) {
       throw new ElementError({
         component: PasswordInput,
         element: $input,
-        expectedType: 'HTMLInputElement',
-        identifier: 'Form field (`.govuk-js-password-input-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`.');
+    if ($input.type !== "password") {
+      throw new ElementError("Password input: Form field (`.govuk-js-password-input-input`) must be of type `password`.");
     }
-    const $showHideButton = this.$root.querySelector('.govuk-js-password-input-toggle');
+    const $showHideButton = this.$root.querySelector(".govuk-js-password-input-toggle");
     if (!($showHideButton instanceof HTMLButtonElement)) {
       throw new ElementError({
         component: PasswordInput,
         element: $showHideButton,
-        expectedType: 'HTMLButtonElement',
-        identifier: 'Button (`.govuk-js-password-input-toggle`)'
+        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`.');
+    if ($showHideButton.type !== "button") {
+      throw new ElementError("Password input: Button (`.govuk-js-password-input-toggle`) must be of type `button`.");
     }
     this.$input = $input;
     this.$showHideButton = $showHideButton;
     this.i18n = new I18n(this.config.i18n, {
-      locale: closestAttributeValue(this.$root, 'lang')
+      locale: closestAttributeValue(this.$root, "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.$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));
+    this.$input.insertAdjacentElement("afterend", $screenReaderStatusMessage);
+    this.$showHideButton.addEventListener("click", this.toggle.bind(this));
     if (this.$input.form) {
-      this.$input.form.addEventListener('submit', () => this.hide());
+      this.$input.form.addEventListener("submit", () => this.hide());
     }
-    window.addEventListener('pageshow', event => {
-      if (event.persisted && this.$input.type !== 'password') {
+    window.addEventListener("pageshow", event => {
+      if (event.persisted && this.$input.type !== "password") {
         this.hide();
       }
     });
@@ -1114,80 +1188,49 @@ class PasswordInput extends ConfigurableComponent {
   }
   toggle(event) {
     event.preventDefault();
-    if (this.$input.type === 'password') {
+    if (this.$input.type === "password") {
       this.show();
       return;
     }
     this.hide();
   }
   show() {
-    this.setType('text');
+    this.setType("text");
   }
   hide() {
-    this.setType('password');
+    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.$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.$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
- */
+PasswordInput.moduleName = "govuk-password-input";
-/**
- * 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.
- */
-/**
- * @import { Schema } from '../../common/configuration.mjs'
- */
-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'
+    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'
+      type: "object"
     }
   }
 });
@@ -1196,22 +1239,7 @@ PasswordInput.schema = Object.freeze({
  * Radios component
  *
  * @preserve
- */
-class Radios extends Component {
-  /**
-   * 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} $root - HTML element to use for radios
-   */
+ */ class Radios extends Component {
   constructor($root) {
     super($root);
     this.$inputs = void 0;
@@ -1224,7 +1252,7 @@ class Radios extends Component {
     }
     this.$inputs = $inputs;
     this.$inputs.forEach($input => {
-      const targetId = $input.getAttribute('data-aria-controls');
+      const targetId = $input.getAttribute("data-aria-controls");
       if (!targetId) {
         return;
       }
@@ -1234,31 +1262,31 @@ class Radios extends Component {
           identifier: `Conditional reveal (\`id="${targetId}"\`)`
         });
       }
-      $input.setAttribute('aria-controls', targetId);
-      $input.removeAttribute('data-aria-controls');
+      $input.setAttribute("aria-controls", targetId);
+      $input.removeAttribute("data-aria-controls");
     });
-    window.addEventListener('pageshow', () => this.syncAllConditionalReveals());
+    window.addEventListener("pageshow", () => this.syncAllConditionalReveals());
     this.syncAllConditionalReveals();
-    this.$root.addEventListener('click', event => this.handleClick(event));
+    this.$root.addEventListener("click", event => this.handleClick(event));
   }
   syncAllConditionalReveals() {
     this.$inputs.forEach($input => this.syncConditionalRevealWithInputState($input));
   }
   syncConditionalRevealWithInputState($input) {
-    const targetId = $input.getAttribute('aria-controls');
+    const targetId = $input.getAttribute("aria-controls");
     if (!targetId) {
       return;
     }
     const $target = document.getElementById(targetId);
-    if ($target != null && $target.classList.contains('govuk-radios__conditional')) {
+    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);
+      $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') {
+    if (!($clickedInput instanceof HTMLInputElement) || $clickedInput.type !== "radio") {
       return;
     }
     const $allInputs = document.querySelectorAll('input[type="radio"][aria-controls]');
@@ -1273,22 +1301,184 @@ class Radios extends Component {
     });
   }
 }
-Radios.moduleName = 'govuk-radios';
+Radios.moduleName = "govuk-radios";
+class FileFieldController extends Controller {
+  static targets=[ "preview", "destroy" ];
+  static values={
+    mimeTypes: Array
+  };
+  connect() {
+    this.counter = 0;
+    this.initialPreviewContent = null;
+    this.onUploadFlag = false;
+  }
+  onUpload(event) {
+    this.onUploadFlag = true;
+    if (this.hasDestroyTarget) {
+      this.destroyTarget.value = false;
+    }
+    this.previewTarget.removeAttribute("hidden");
+    if (this.hasPreviewTarget) {
+      if (event.currentTarget.files.length > 0) {
+        this.showPreview(event.currentTarget.files[0]);
+      } else {
+        this.setPreviewContent(this.initialPreviewContent);
+      }
+    }
+  }
+  setDestroy(event) {
+    event.preventDefault();
+    if (this.initialPreviewContent && this.onUploadFlag) {
+      this.onUploadFlag = false;
+      this.setPreviewContent(this.initialPreviewContent);
+    } else {
+      if (this.hasDestroyTarget) {
+        this.destroyTarget.value = true;
+      }
+      if (this.hasPreviewTarget) {
+        this.previewTarget.setAttribute("hidden", "");
+        this.setPreviewContent("");
+      }
+      if (this.previousInput) {
+        this.previousInput.toggleAttribute("disabled", true);
+      }
+    }
+    this.fileInput.value = "";
+  }
+  setPreviewContent(content) {
+    if (this.filenameTag) {
+      this.filenameTag.innerText = text;
+    }
+  }
+  drop(event) {
+    event.preventDefault();
+    const file = this.fileForEvent(event, this.mimeTypesValue);
+    if (file) {
+      const dT = new DataTransfer;
+      dT.items.add(file);
+      this.fileInput.files = dT.files;
+      this.fileInput.dispatchEvent(new Event("change"));
+    }
+    this.counter = 0;
+    this.element.classList.remove("droppable");
+  }
+  dragover(event) {
+    event.preventDefault();
+  }
+  dragenter(event) {
+    event.preventDefault();
+    if (this.counter === 0) {
+      this.element.classList.add("droppable");
+    }
+    this.counter++;
+  }
+  dragleave(event) {
+    event.preventDefault();
+    this.counter--;
+    if (this.counter === 0) {
+      this.element.classList.remove("droppable");
+    }
+  }
+  get fileInput() {
+    return this.element.querySelector("input[type='file']");
+  }
+  get previousInput() {
+    return this.element.querySelector(`input[type='hidden'][name='${this.fileInput.name}']`);
+  }
+  get filenameTag() {
+    if (!this.hasPreviewTarget) return null;
+    return this.previewTarget.querySelector("p.preview-filename");
+  }
+  showPreview(file) {
+    const reader = new FileReader;
+    reader.onload = e => {
+      if (this.filenameTag) {
+        this.filenameTag.innerText = file.name;
+      }
+    };
+    reader.readAsDataURL(file);
+  }
+  fileForEvent(event, mimeTypes) {
+    const accept = file => mimeTypes.indexOf(file.type) > -1;
+    let file;
+    if (event.dataTransfer.items) {
+      const item = [ ...event.dataTransfer.items ].find(accept);
+      if (item) {
+        file = item.getAsFile();
+      }
+    } else {
+      file = [ ...event.dataTransfer.files ].find(accept);
+    }
+    return file;
+  }
+}
+class DocumentFieldController extends FileFieldController {
+  connect() {
+    super.connect();
+    this.initialPreviewContent = this.filenameTag.text;
+  }
+  setPreviewContent(content) {
+    this.filenameTag.innerText = content;
+  }
+  showPreview(file) {
+    const reader = new FileReader;
+    reader.onload = e => {
+      if (this.filenameTag) {
+        this.filenameTag.innerText = file.name;
+      }
+    };
+    reader.readAsDataURL(file);
+  }
+  get filenameTag() {
+    return this.previewTarget.querySelector("p.preview-filename");
+  }
+}
+class ImageFieldController extends FileFieldController {
+  connect() {
+    super.connect();
+    this.initialPreviewContent = this.imageTag.getAttribute("src");
+  }
+  setPreviewContent(content) {
+    this.imageTag.src = content;
+  }
+  showPreview(file) {
+    const reader = new FileReader;
+    reader.onload = e => {
+      this.imageTag.src = e.target.result;
+    };
+    reader.readAsDataURL(file);
+  }
+  get imageTag() {
+    return this.previewTarget.querySelector("img");
+  }
+}
+const Definitions = [ {
+  identifier: "govuk-document-field",
+  controllerConstructor: DocumentFieldController
+}, {
+  identifier: "govuk-image-field",
+  controllerConstructor: ImageFieldController
+} ];
 function initAll(config) {
   let _config$scope;
-  config = typeof config !== 'undefined' ? config : {};
+  config = typeof config !== "undefined" ? config : {};
   if (!isSupported()) {
-    console.log(new SupportError());
+    console.log(new SupportError);
     return;
   }
-  const components = [[Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [Radios], [PasswordInput, config.passwordInput]];
+  const components = [ [ Button, config.button ], [ CharacterCount, config.characterCount ], [ Checkboxes ], [ ErrorSummary, config.errorSummary ], [ FileUpload, config.fileUpload ], [ 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);
+        "defaults" in Component ? new Component($element, config) : new Component($element);
       } catch (error) {
         console.log(error);
       }
@@ -1296,4 +1486,4 @@ function initAll(config) {
   });
 }
-export { Button, CharacterCount, Checkboxes, ErrorSummary, PasswordInput, Radios, initAll };
+export { Button, CharacterCount, Checkboxes, ErrorSummary, PasswordInput, Radios, Definitions as default, initAll };