npm - @ministryofjustice/frontend - Versions diffs - 5.0.0 → 5.1.0 - Mend

@ministryofjustice/frontend 5.0.0 → 5.1.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 (112) hide show

package/moj/all.bundle.js +1549 -1062
package/moj/all.bundle.js.map +1 -1
package/moj/all.bundle.mjs +1845 -1054
package/moj/all.bundle.mjs.map +1 -1
package/moj/all.mjs +7 -90
package/moj/all.mjs.map +1 -1
package/moj/all.scss +1 -0
package/moj/all.scss.map +1 -1
package/moj/common/index.mjs +57 -0
package/moj/common/index.mjs.map +1 -0
package/moj/common/moj-frontend-version.mjs +14 -0
package/moj/common/moj-frontend-version.mjs.map +1 -0
package/moj/components/add-another/add-another.bundle.js +105 -76
package/moj/components/add-another/add-another.bundle.js.map +1 -1
package/moj/components/add-another/add-another.bundle.mjs +222 -71
package/moj/components/add-another/add-another.bundle.mjs.map +1 -1
package/moj/components/add-another/add-another.mjs +103 -72
package/moj/components/add-another/add-another.mjs.map +1 -1
package/moj/components/alert/alert.bundle.js +115 -191
package/moj/components/alert/alert.bundle.js.map +1 -1
package/moj/components/alert/alert.bundle.mjs +354 -186
package/moj/components/alert/alert.bundle.mjs.map +1 -1
package/moj/components/alert/alert.mjs +55 -140
package/moj/components/alert/alert.mjs.map +1 -1
package/moj/components/button-menu/README.md +3 -1
package/moj/components/button-menu/button-menu.bundle.js +91 -120
package/moj/components/button-menu/button-menu.bundle.js.map +1 -1
package/moj/components/button-menu/button-menu.bundle.mjs +329 -114
package/moj/components/button-menu/button-menu.bundle.mjs.map +1 -1
package/moj/components/button-menu/button-menu.mjs +89 -116
package/moj/components/button-menu/button-menu.mjs.map +1 -1
package/moj/components/date-picker/date-picker.bundle.js +174 -154
package/moj/components/date-picker/date-picker.bundle.js.map +1 -1
package/moj/components/date-picker/date-picker.bundle.mjs +411 -147
package/moj/components/date-picker/date-picker.bundle.mjs.map +1 -1
package/moj/components/date-picker/date-picker.mjs +172 -150
package/moj/components/date-picker/date-picker.mjs.map +1 -1
package/moj/components/filter/template.njk +1 -1
package/moj/components/filter-toggle-button/filter-toggle-button.bundle.js +133 -44
package/moj/components/filter-toggle-button/filter-toggle-button.bundle.js.map +1 -1
package/moj/components/filter-toggle-button/filter-toggle-button.bundle.mjs +374 -41
package/moj/components/filter-toggle-button/filter-toggle-button.bundle.mjs.map +1 -1
package/moj/components/filter-toggle-button/filter-toggle-button.mjs +131 -40
package/moj/components/filter-toggle-button/filter-toggle-button.mjs.map +1 -1
package/moj/components/form-validator/form-validator.bundle.js +159 -69
package/moj/components/form-validator/form-validator.bundle.js.map +1 -1
package/moj/components/form-validator/form-validator.bundle.mjs +399 -65
package/moj/components/form-validator/form-validator.bundle.mjs.map +1 -1
package/moj/components/form-validator/form-validator.mjs +134 -54
package/moj/components/form-validator/form-validator.mjs.map +1 -1
package/moj/components/multi-file-upload/multi-file-upload.bundle.js +291 -117
package/moj/components/multi-file-upload/multi-file-upload.bundle.js.map +1 -1
package/moj/components/multi-file-upload/multi-file-upload.bundle.mjs +527 -109
package/moj/components/multi-file-upload/multi-file-upload.bundle.mjs.map +1 -1
package/moj/components/multi-file-upload/multi-file-upload.mjs +288 -101
package/moj/components/multi-file-upload/multi-file-upload.mjs.map +1 -1
package/moj/components/multi-file-upload/template.njk +1 -1
package/moj/components/multi-select/multi-select.bundle.js +106 -41
package/moj/components/multi-select/multi-select.bundle.js.map +1 -1
package/moj/components/multi-select/multi-select.bundle.mjs +346 -37
package/moj/components/multi-select/multi-select.bundle.mjs.map +1 -1
package/moj/components/multi-select/multi-select.mjs +104 -37
package/moj/components/multi-select/multi-select.mjs.map +1 -1
package/moj/components/password-reveal/_password-reveal.scss +3 -1
package/moj/components/password-reveal/_password-reveal.scss.map +1 -1
package/moj/components/password-reveal/password-reveal.bundle.js +32 -29
package/moj/components/password-reveal/password-reveal.bundle.js.map +1 -1
package/moj/components/password-reveal/password-reveal.bundle.mjs +149 -24
package/moj/components/password-reveal/password-reveal.bundle.mjs.map +1 -1
package/moj/components/password-reveal/password-reveal.mjs +30 -25
package/moj/components/password-reveal/password-reveal.mjs.map +1 -1
package/moj/components/rich-text-editor/README.md +4 -3
package/moj/components/rich-text-editor/rich-text-editor.bundle.js +127 -62
package/moj/components/rich-text-editor/rich-text-editor.bundle.js.map +1 -1
package/moj/components/rich-text-editor/rich-text-editor.bundle.mjs +367 -58
package/moj/components/rich-text-editor/rich-text-editor.bundle.mjs.map +1 -1
package/moj/components/rich-text-editor/rich-text-editor.mjs +125 -58
package/moj/components/rich-text-editor/rich-text-editor.mjs.map +1 -1
package/moj/components/search-toggle/search-toggle.bundle.js +94 -26
package/moj/components/search-toggle/search-toggle.bundle.js.map +1 -1
package/moj/components/search-toggle/search-toggle.bundle.mjs +334 -22
package/moj/components/search-toggle/search-toggle.bundle.mjs.map +1 -1
package/moj/components/search-toggle/search-toggle.mjs +92 -22
package/moj/components/search-toggle/search-toggle.mjs.map +1 -1
package/moj/components/sortable-table/sortable-table.bundle.js +151 -83
package/moj/components/sortable-table/sortable-table.bundle.js.map +1 -1
package/moj/components/sortable-table/sortable-table.bundle.mjs +390 -78
package/moj/components/sortable-table/sortable-table.bundle.mjs.map +1 -1
package/moj/components/sortable-table/sortable-table.mjs +149 -79
package/moj/components/sortable-table/sortable-table.mjs.map +1 -1
package/moj/core/_all.scss +3 -0
package/moj/core/_all.scss.map +1 -0
package/moj/core/_moj-frontend-properties.scss +7 -0
package/moj/core/_moj-frontend-properties.scss.map +1 -0
package/moj/filters/prototype-kit-13-filters.js +4 -3
package/moj/helpers.bundle.js +22 -77
package/moj/helpers.bundle.js.map +1 -1
package/moj/helpers.bundle.mjs +23 -74
package/moj/helpers.bundle.mjs.map +1 -1
package/moj/helpers.mjs +23 -74
package/moj/helpers.mjs.map +1 -1
package/moj/moj-frontend.min.css +1 -1
package/moj/moj-frontend.min.css.map +1 -1
package/moj/moj-frontend.min.js +1 -1
package/moj/moj-frontend.min.js.map +1 -1
package/package.json +1 -1
package/moj/version.bundle.js +0 -12
package/moj/version.bundle.js.map +0 -1
package/moj/version.bundle.mjs +0 -4
package/moj/version.bundle.mjs.map +0 -1
package/moj/version.mjs +0 -4
package/moj/version.mjs.map +0 -1

package/moj/components/multi-file-upload/multi-file-upload.bundle.mjs CHANGED Viewed

@@ -1,173 +1,432 @@
-function dragAndDropSupported() {
-  const div = document.createElement('div');
-  return typeof div.ondrop !== 'undefined';
+function isInitialised($root, moduleName) {
+  return $root instanceof HTMLElement && $root.hasAttribute(`data-${moduleName}-init`);
 }
-function formDataSupported() {
-  return typeof FormData === 'function';
+/**
+ * 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');
+}
+function isArray(option) {
+  return Array.isArray(option);
+}
+function isObject(option) {
+  return !!option && typeof option === 'object' && !isArray(option);
+}
+function formatErrorMessage(Component, message) {
+  return `${Component.moduleName}: ${message}`;
+}
+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';
+  }
 }
-function fileApiSupported() {
-  const input = document.createElement('input');
-  input.type = 'file';
-  return typeof input.files !== 'undefined';
+class ElementError extends GOVUKFrontendError {
+  constructor(messageOrOptions) {
+    let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
+    if (typeof messageOrOptions === 'object') {
+      const {
+        component,
+        identifier,
+        element,
+        expectedType
+      } = messageOrOptions;
+      message = identifier;
+      message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
+      message = formatErrorMessage(component, message);
+    }
+    super(message);
+    this.name = 'ElementError';
+  }
+}
+class InitError extends GOVUKFrontendError {
+  constructor(componentOrMessage) {
+    const message = typeof componentOrMessage === 'string' ? componentOrMessage : formatErrorMessage(componentOrMessage, `Root element (\`$root\`) already initialised`);
+    super(message);
+    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') {
+      throw new InitError(`\`moduleName\` not defined in component`);
+    }
+    if (!($root instanceof childConstructor.elementType)) {
+      throw new ElementError({
+        element: $root,
+        component: childConstructor,
+        identifier: 'Root element (`$root`)',
+        expectedType: childConstructor.elementType.name
+      });
+    } else {
+      this._$root = $root;
+    }
+    childConstructor.checkSupport();
+    this.checkInitialised();
+    const moduleName = childConstructor.moduleName;
+    this.$root.setAttribute(`data-${moduleName}-init`, '');
+  }
+  checkInitialised() {
+    const constructor = this.constructor;
+    const moduleName = constructor.moduleName;
+    if (moduleName && isInitialised(this.$root, moduleName)) {
+      throw new InitError(constructor);
+    }
+  }
+  static checkSupport() {
+    if (!isSupported()) {
+      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');
+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;
+  }
+  constructor($root, config) {
+    super($root);
+    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'));
+    }
+    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() : '';
+  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 normaliseDataset(Component, dataset) {
+  if (!isObject(Component.schema)) {
+    throw new ConfigError(formatErrorMessage(Component, 'Config passed as parameter into constructor but no schema defined'));
+  }
+  const out = {};
+  const entries = Object.entries(Component.schema.properties);
+  for (const entry of entries) {
+    const [namespace, property] = entry;
+    const field = namespace.toString();
+    if (field in dataset) {
+      out[field] = normaliseString(dataset[field], property);
+    }
+    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) {
+    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(schema, dataset, namespace) {
+  const property = 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 (isObject(current)) {
+        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];
 }
 /* eslint-disable @typescript-eslint/no-empty-function */
-class MultiFileUpload {
+/**
+ * @augments {ConfigurableComponent<MultiFileUploadConfig>}
+ */
+class MultiFileUpload extends ConfigurableComponent {
   /**
-   * @param {MultiFileUploadConfig} [params] - Multi file upload config
+   * @param {Element | null} $root - HTML element to use for multi file upload
+   * @param {MultiFileUploadConfig} [config] - Multi file upload config
    */
-  constructor(params = {}) {
-    const {
-      container
-    } = params;
-    if (!container || !(container instanceof HTMLElement) || !(dragAndDropSupported() && formDataSupported() && fileApiSupported())) {
+  constructor($root, config = {}) {
+    var _this$config$feedback;
+    super($root, config);
+    if (!MultiFileUpload.isSupported()) {
       return this;
     }
-    this.container = container;
-    this.container.classList.add('moj-multi-file-upload--enhanced');
-    this.defaultParams = {
-      uploadFileEntryHook: () => {},
-      uploadFileExitHook: () => {},
-      uploadFileErrorHook: () => {},
-      fileDeleteHook: () => {},
-      uploadStatusText: 'Uploading files, please wait',
-      dropzoneHintText: 'Drag and drop files here or',
-      dropzoneButtonText: 'Choose files'
-    };
-    this.params = Object.assign({}, this.defaultParams, params);
-    this.feedbackContainer = /** @type {HTMLDivElement} */
-    this.container.querySelector('.moj-multi-file__uploaded-files');
+    const $feedbackContainer = (_this$config$feedback = this.config.feedbackContainer.element) != null ? _this$config$feedback : this.$root.querySelector(this.config.feedbackContainer.selector);
+    if (!$feedbackContainer || !($feedbackContainer instanceof HTMLElement)) {
+      return this;
+    }
+    this.$feedbackContainer = $feedbackContainer;
     this.setupFileInput();
     this.setupDropzone();
     this.setupLabel();
     this.setupStatusBox();
-    this.container.addEventListener('click', this.onFileDeleteClick.bind(this));
+    this.$root.addEventListener('click', this.onFileDeleteClick.bind(this));
+    this.$root.classList.add('moj-multi-file-upload--enhanced');
   }
   setupDropzone() {
-    this.dropzone = document.createElement('div');
-    this.dropzone.classList.add('moj-multi-file-upload__dropzone');
-    this.dropzone.addEventListener('dragover', this.onDragOver.bind(this));
-    this.dropzone.addEventListener('dragleave', this.onDragLeave.bind(this));
-    this.dropzone.addEventListener('drop', this.onDrop.bind(this));
-    this.fileInput.replaceWith(this.dropzone);
-    this.dropzone.appendChild(this.fileInput);
+    this.$dropzone = document.createElement('div');
+    this.$dropzone.classList.add('moj-multi-file-upload__dropzone');
+    this.$dropzone.addEventListener('dragover', this.onDragOver.bind(this));
+    this.$dropzone.addEventListener('dragleave', this.onDragLeave.bind(this));
+    this.$dropzone.addEventListener('drop', this.onDrop.bind(this));
+    this.$fileInput.replaceWith(this.$dropzone);
+    this.$dropzone.appendChild(this.$fileInput);
   }
   setupLabel() {
-    const label = document.createElement('label');
-    label.setAttribute('for', this.fileInput.id);
-    label.classList.add('govuk-button', 'govuk-button--secondary');
-    label.textContent = this.params.dropzoneButtonText;
-    const hint = document.createElement('p');
-    hint.classList.add('govuk-body');
-    hint.textContent = this.params.dropzoneHintText;
-    this.label = label;
-    this.dropzone.append(hint);
-    this.dropzone.append(label);
+    const $label = document.createElement('label');
+    $label.setAttribute('for', this.$fileInput.id);
+    $label.classList.add('govuk-button', 'govuk-button--secondary');
+    $label.textContent = this.config.dropzoneButtonText;
+    const $hint = document.createElement('p');
+    $hint.classList.add('govuk-body');
+    $hint.textContent = this.config.dropzoneHintText;
+    this.$label = $label;
+    this.$dropzone.append($hint);
+    this.$dropzone.append($label);
   }
   setupFileInput() {
-    this.fileInput = /** @type {HTMLInputElement} */
-    this.container.querySelector('.moj-multi-file-upload__input');
-    this.fileInput.addEventListener('change', this.onFileChange.bind(this));
-    this.fileInput.addEventListener('focus', this.onFileFocus.bind(this));
-    this.fileInput.addEventListener('blur', this.onFileBlur.bind(this));
+    this.$fileInput = /** @type {HTMLInputElement} */
+    this.$root.querySelector('.moj-multi-file-upload__input');
+    this.$fileInput.addEventListener('change', this.onFileChange.bind(this));
+    this.$fileInput.addEventListener('focus', this.onFileFocus.bind(this));
+    this.$fileInput.addEventListener('blur', this.onFileBlur.bind(this));
   }
   setupStatusBox() {
-    this.status = document.createElement('div');
-    this.status.classList.add('govuk-visually-hidden');
-    this.status.setAttribute('aria-live', 'polite');
-    this.status.setAttribute('role', 'status');
-    this.dropzone.append(this.status);
+    this.$status = document.createElement('div');
+    this.$status.classList.add('govuk-visually-hidden');
+    this.$status.setAttribute('aria-live', 'polite');
+    this.$status.setAttribute('role', 'status');
+    this.$dropzone.append(this.$status);
   }
+  /**
+   * @param {DragEvent} event - Drag event
+   */
   onDragOver(event) {
     event.preventDefault();
-    this.dropzone.classList.add('moj-multi-file-upload--dragover');
+    this.$dropzone.classList.add('moj-multi-file-upload--dragover');
   }
   onDragLeave() {
-    this.dropzone.classList.remove('moj-multi-file-upload--dragover');
+    this.$dropzone.classList.remove('moj-multi-file-upload--dragover');
   }
+  /**
+   * @param {DragEvent} event - Drag event
+   */
   onDrop(event) {
     event.preventDefault();
-    this.dropzone.classList.remove('moj-multi-file-upload--dragover');
-    this.feedbackContainer.classList.remove('moj-hidden');
-    this.status.textContent = this.params.uploadStatusText;
+    this.$dropzone.classList.remove('moj-multi-file-upload--dragover');
+    this.$feedbackContainer.classList.remove('moj-hidden');
+    this.$status.textContent = this.config.uploadStatusText;
     this.uploadFiles(event.dataTransfer.files);
   }
+  /**
+   * @param {FileList} files - File list
+   */
   uploadFiles(files) {
     for (const file of Array.from(files)) {
       this.uploadFile(file);
     }
   }
   onFileChange() {
-    this.feedbackContainer.classList.remove('moj-hidden');
-    this.status.textContent = this.params.uploadStatusText;
-    this.uploadFiles(this.fileInput.files);
-    const fileInput = this.fileInput.cloneNode(true);
-    if (!fileInput || !(fileInput instanceof HTMLInputElement)) {
+    this.$feedbackContainer.classList.remove('moj-hidden');
+    this.$status.textContent = this.config.uploadStatusText;
+    this.uploadFiles(this.$fileInput.files);
+    const $fileInput = this.$fileInput.cloneNode(true);
+    if (!$fileInput || !($fileInput instanceof HTMLInputElement)) {
       return;
     }
-    fileInput.value = '';
-    this.fileInput.replaceWith(fileInput);
+    $fileInput.value = '';
+    this.$fileInput.replaceWith($fileInput);
     this.setupFileInput();
-    this.fileInput.focus();
+    this.$fileInput.focus();
   }
   onFileFocus() {
-    this.label.classList.add('moj-multi-file-upload--focused');
+    this.$label.classList.add('moj-multi-file-upload--focused');
   }
   onFileBlur() {
-    this.label.classList.remove('moj-multi-file-upload--focused');
+    this.$label.classList.remove('moj-multi-file-upload--focused');
   }
+  /**
+   * @param {UploadResponseSuccess['success']} success
+   */
   getSuccessHtml(success) {
     return `<span class="moj-multi-file-upload__success"> <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"/></svg>${success.messageHtml}</span>`;
   }
+  /**
+   * @param {UploadResponseError['error']} error
+   */
   getErrorHtml(error) {
     return `<span class="moj-multi-file-upload__error"> <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z"/></svg>${error.message}</span>`;
   }
+  /**
+   * @param {File} file
+   */
   getFileRow(file) {
-    const row = document.createElement('div');
-    row.classList.add('govuk-summary-list__row', 'moj-multi-file-upload__row');
-    row.innerHTML = `
+    const $row = document.createElement('div');
+    $row.classList.add('govuk-summary-list__row', 'moj-multi-file-upload__row');
+    $row.innerHTML = `
     <div class="govuk-summary-list__value moj-multi-file-upload__message">
       <span class="moj-multi-file-upload__filename">${file.name}</span>
       <span class="moj-multi-file-upload__progress">0%</span>
     </div>
     <div class="govuk-summary-list__actions moj-multi-file-upload__actions"></div>
   `;
-    return row;
+    return $row;
   }
+  /**
+   * @param {UploadResponseFile} file
+   */
   getDeleteButton(file) {
-    const button = document.createElement('button');
-    button.setAttribute('type', 'button');
-    button.setAttribute('name', 'delete');
-    button.setAttribute('value', file.filename);
-    button.classList.add('moj-multi-file-upload__delete', 'govuk-button', 'govuk-button--secondary', 'govuk-!-margin-bottom-0');
-    button.innerHTML = `Delete <span class="govuk-visually-hidden">${file.originalname}</span>`;
-    return button;
+    const $button = document.createElement('button');
+    $button.setAttribute('type', 'button');
+    $button.setAttribute('name', 'delete');
+    $button.setAttribute('value', file.filename);
+    $button.classList.add('moj-multi-file-upload__delete', 'govuk-button', 'govuk-button--secondary', 'govuk-!-margin-bottom-0');
+    $button.innerHTML = `Delete <span class="govuk-visually-hidden">${file.originalname}</span>`;
+    return $button;
   }
+  /**
+   * @param {File} file
+   */
   uploadFile(file) {
-    this.params.uploadFileEntryHook(this, file);
-    const item = this.getFileRow(file);
-    const message = item.querySelector('.moj-multi-file-upload__message');
-    const actions = item.querySelector('.moj-multi-file-upload__actions');
-    const progress = item.querySelector('.moj-multi-file-upload__progress');
+    this.config.hooks.entryHook(this, file);
+    const $item = this.getFileRow(file);
+    const $message = $item.querySelector('.moj-multi-file-upload__message');
+    const $actions = $item.querySelector('.moj-multi-file-upload__actions');
+    const $progress = $item.querySelector('.moj-multi-file-upload__progress');
     const formData = new FormData();
     formData.append('documents', file);
-    this.feedbackContainer.querySelector('.moj-multi-file-upload__list').append(item);
+    this.$feedbackContainer.querySelector('.moj-multi-file-upload__list').append($item);
     const xhr = new XMLHttpRequest();
     const onLoad = () => {
       if (xhr.status < 200 || xhr.status >= 300 || !('success' in xhr.response)) {
         return onError();
       }
-      message.innerHTML = this.getSuccessHtml(xhr.response.success);
-      this.status.textContent = xhr.response.success.messageText;
-      actions.append(this.getDeleteButton(xhr.response.file));
-      this.params.uploadFileExitHook(this, file, xhr, xhr.responseText);
+      $message.innerHTML = this.getSuccessHtml(xhr.response.success);
+      this.$status.textContent = xhr.response.success.messageText;
+      $actions.append(this.getDeleteButton(xhr.response.file));
+      this.config.hooks.exitHook(this, file, xhr, xhr.responseText);
     };
     const onError = () => {
       const error = new Error(xhr.response && 'error' in xhr.response ? xhr.response.error.message : xhr.statusText || 'Upload failed');
-      message.innerHTML = this.getErrorHtml(error);
-      this.status.textContent = error.message;
-      this.params.uploadFileErrorHook(this, file, xhr, xhr.responseText, error);
+      $message.innerHTML = this.getErrorHtml(error);
+      this.$status.textContent = error.message;
+      this.config.hooks.errorHook(this, file, xhr, xhr.responseText, error);
     };
     xhr.addEventListener('load', onLoad);
     xhr.addEventListener('error', onError);
@@ -176,15 +435,19 @@ class MultiFileUpload {
         return;
       }
       const percentComplete = Math.round(event.loaded / event.total * 100);
-      progress.textContent = ` ${percentComplete}%`;
+      $progress.textContent = ` ${percentComplete}%`;
     });
-    xhr.open('POST', this.params.uploadUrl);
+    xhr.open('POST', this.config.uploadUrl);
     xhr.responseType = 'json';
     xhr.send(formData);
   }
+  /**
+   * @param {MouseEvent} event - Click event
+   */
   onFileDeleteClick(event) {
-    const button = event.target;
-    if (!button || !(button instanceof HTMLButtonElement) || !button.classList.contains('moj-multi-file-upload__delete')) {
+    const $button = event.target;
+    if (!$button || !($button instanceof HTMLButtonElement) || !$button.classList.contains('moj-multi-file-upload__delete')) {
       return;
     }
     event.preventDefault(); // if user refreshes page and then deletes
@@ -194,22 +457,177 @@ class MultiFileUpload {
       if (xhr.status < 200 || xhr.status >= 300) {
         return;
       }
-      const rows = Array.from(this.feedbackContainer.querySelectorAll('.moj-multi-file-upload__row'));
-      if (rows.length === 1) {
-        this.feedbackContainer.classList.add('moj-hidden');
+      const $rows = Array.from(this.$feedbackContainer.querySelectorAll('.moj-multi-file-upload__row'));
+      if ($rows.length === 1) {
+        this.$feedbackContainer.classList.add('moj-hidden');
       }
-      const row = rows.find(row => row.contains(button));
-      if (row) row.remove();
-      this.params.fileDeleteHook(this, undefined, xhr, xhr.responseText);
+      const $rowDelete = $rows.find($row => $row.contains($button));
+      if ($rowDelete) $rowDelete.remove();
+      this.config.hooks.deleteHook(this, undefined, xhr, xhr.responseText);
     });
-    xhr.open('POST', this.params.deleteUrl);
+    xhr.open('POST', this.config.deleteUrl);
     xhr.setRequestHeader('Content-Type', 'application/json');
     xhr.responseType = 'json';
     xhr.send(JSON.stringify({
-      [button.name]: button.value
+      [$button.name]: $button.value
     }));
   }
+  static isSupported() {
+    return this.isDragAndDropSupported() && this.isFormDataSupported() && this.isFileApiSupported();
+  }
+  static isDragAndDropSupported() {
+    const div = document.createElement('div');
+    return typeof div.ondrop !== 'undefined';
+  }
+  static isFormDataSupported() {
+    return typeof FormData === 'function';
+  }
+  static isFileApiSupported() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    return typeof input.files !== 'undefined';
+  }
+  /**
+   * Name for the component used when initialising using data-module attributes.
+   */
 }
+/**
+ * Multi file upload config
+ *
+ * @typedef {object} MultiFileUploadConfig
+ * @property {string} [uploadUrl] - File upload URL
+ * @property {string} [deleteUrl] - File delete URL
+ * @property {string} [uploadStatusText] - Upload status text
+ * @property {string} [dropzoneHintText] - Dropzone hint text
+ * @property {string} [dropzoneButtonText] - Dropzone button text
+ * @property {object} [feedbackContainer] - Feedback container config
+ * @property {string} [feedbackContainer.selector] - Selector for feedback container
+ * @property {Element | null} [feedbackContainer.element] - HTML element for feedback container
+ * @property {MultiFileUploadHooks} [hooks] - Upload hooks
+ */
+/**
+ * Multi file upload hooks
+ *
+ * @typedef {object} MultiFileUploadHooks
+ * @property {OnUploadFileEntryHook} [entryHook] - File upload entry hook
+ * @property {OnUploadFileExitHook} [exitHook] - File upload exit hook
+ * @property {OnUploadFileErrorHook} [errorHook] - File upload error hook
+ * @property {OnUploadFileDeleteHook} [deleteHook] - File delete hook
+ */
+/**
+ * Upload hook: File entry
+ *
+ * @callback OnUploadFileEntryHook
+ * @param {InstanceType<typeof MultiFileUpload>} upload - Multi file upload
+ * @param {File} file - File upload
+ */
+/**
+ * Upload hook: File exit
+ *
+ * @callback OnUploadFileExitHook
+ * @param {InstanceType<typeof MultiFileUpload>} upload - Multi file upload
+ * @param {File} file - File upload
+ * @param {XMLHttpRequest} xhr - XMLHttpRequest
+ * @param {string} textStatus - Text status
+ */
+/**
+ * Upload hook: File error
+ *
+ * @callback OnUploadFileErrorHook
+ * @param {InstanceType<typeof MultiFileUpload>} upload - Multi file upload
+ * @param {File} file - File upload
+ * @param {XMLHttpRequest} xhr - XMLHttpRequest
+ * @param {string} textStatus - Text status
+ * @param {Error} errorThrown - Error thrown
+ */
+/**
+ * Upload hook: File delete
+ *
+ * @callback OnUploadFileDeleteHook
+ * @param {InstanceType<typeof MultiFileUpload>} upload - Multi file upload
+ * @param {File} [file] - File upload
+ * @param {XMLHttpRequest} xhr - XMLHttpRequest
+ * @param {string} textStatus - Text status
+ */
+/**
+ * @typedef {object} UploadResponseSuccess
+ * @property {{ messageText: string, messageHtml: string }} success - Response success
+ * @property {UploadResponseFile} file - Response file
+ */
+/**
+ * @typedef {object} UploadResponseError
+ * @property {{ message: string }} error - Response error
+ * @property {UploadResponseFile} file - Response file
+ */
+/**
+ * @typedef {object} UploadResponseFile
+ * @property {string} filename - File name
+ * @property {string} originalname - Original file name
+ */
+/**
+ * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
+ */
+MultiFileUpload.moduleName = 'moj-multi-file-upload';
+/**
+ * Multi file upload default config
+ *
+ * @type {MultiFileUploadConfig}
+ */
+MultiFileUpload.defaults = Object.freeze({
+  uploadStatusText: 'Uploading files, please wait',
+  dropzoneHintText: 'Drag and drop files here or',
+  dropzoneButtonText: 'Choose files',
+  feedbackContainer: {
+    selector: '.moj-multi-file__uploaded-files'
+  },
+  hooks: {
+    entryHook: () => {},
+    exitHook: () => {},
+    errorHook: () => {},
+    deleteHook: () => {}
+  }
+});
+/**
+ * Multi file upload config schema
+ *
+ * @satisfies {Schema<MultiFileUploadConfig>}
+ */
+MultiFileUpload.schema = Object.freeze(/** @type {const} */{
+  properties: {
+    uploadUrl: {
+      type: 'string'
+    },
+    deleteUrl: {
+      type: 'string'
+    },
+    uploadStatusText: {
+      type: 'string'
+    },
+    dropzoneHintText: {
+      type: 'string'
+    },
+    dropzoneButtonText: {
+      type: 'string'
+    },
+    feedbackContainer: {
+      type: 'object'
+    },
+    hooks: {
+      type: 'object'
+    }
+  }
+});
 export { MultiFileUpload };
 //# sourceMappingURL=multi-file-upload.bundle.mjs.map