@ministryofjustice/frontend 4.0.0 → 5.0.0

package/moj/components/multi-file-upload/multi-file-upload.mjs

@@ -1,220 +1,204 @@
 import { dragAndDropSupported, formDataSupported, fileApiSupported } from '../../helpers.mjs';
 
-function MultiFileUpload(params) {
-  if (!(dragAndDropSupported() && formDataSupported() && fileApiSupported())) {
-    return
+/* eslint-disable @typescript-eslint/no-empty-function */
+
+class MultiFileUpload {
+  /**
+   * @param {MultiFileUploadConfig} [params] - Multi file upload config
+   */
+  constructor(params = {}) {
+    const {
+      container
+    } = params;
+    if (!container || !(container instanceof HTMLElement) || !(dragAndDropSupported() && formDataSupported() && fileApiSupported())) {
+      return this;
+    }
+    this.container = container;
+    this.container.classList.add('moj-multi-file-upload--enhanced');
+    this.defaultParams = {
+      uploadFileEntryHook: () => {},
+      uploadFileExitHook: () => {},
+      uploadFileErrorHook: () => {},
+      fileDeleteHook: () => {},
+      uploadStatusText: 'Uploading files, please wait',
+      dropzoneHintText: 'Drag and drop files here or',
+      dropzoneButtonText: 'Choose files'
+    };
+    this.params = Object.assign({}, this.defaultParams, params);
+    this.feedbackContainer = /** @type {HTMLDivElement} */
+    this.container.querySelector('.moj-multi-file__uploaded-files');
+    this.setupFileInput();
+    this.setupDropzone();
+    this.setupLabel();
+    this.setupStatusBox();
+    this.container.addEventListener('click', this.onFileDeleteClick.bind(this));
   }
-
-  this.defaultParams = {
-    uploadFileEntryHook: $.noop,
-    uploadFileExitHook: $.noop,
-    uploadFileErrorHook: $.noop,
-    fileDeleteHook: $.noop,
-    uploadStatusText: 'Uploading files, please wait',
-    dropzoneHintText: 'Drag and drop files here or',
-    dropzoneButtonText: 'Choose files'
-  };
-
-  this.params = $.extend({}, this.defaultParams, params);
-  this.container = $(this.params.container);
-
-  this.container.addClass('moj-multi-file-upload--enhanced');
-
-  this.feedbackContainer = this.container.find(
-    '.moj-multi-file__uploaded-files'
-  );
-  this.setupFileInput();
-  this.setupDropzone();
-  this.setupLabel();
-  this.setupStatusBox();
-  this.container.on(
-    'click',
-    '.moj-multi-file-upload__delete',
-    $.proxy(this, 'onFileDeleteClick')
-  );
-}
-
-MultiFileUpload.prototype.setupDropzone = function () {
-  this.fileInput.wrap('<div class="moj-multi-file-upload__dropzone" />');
-  this.dropzone = this.container.find('.moj-multi-file-upload__dropzone');
-  this.dropzone.on('dragover', $.proxy(this, 'onDragOver'));
-  this.dropzone.on('dragleave', $.proxy(this, 'onDragLeave'));
-  this.dropzone.on('drop', $.proxy(this, 'onDrop'));
-};
-
-MultiFileUpload.prototype.setupLabel = function () {
-  this.label = $(
-    `<label for="${this.fileInput[0].id}" class="govuk-button govuk-button--secondary">${this.params.dropzoneButtonText}</label>`
-  );
-  this.dropzone.append(
-    `<p class="govuk-body">${this.params.dropzoneHintText}</p>`
-  );
-  this.dropzone.append(this.label);
-};
-
-MultiFileUpload.prototype.setupFileInput = function () {
-  this.fileInput = this.container.find('.moj-multi-file-upload__input');
-  this.fileInput.on('change', $.proxy(this, 'onFileChange'));
-  this.fileInput.on('focus', $.proxy(this, 'onFileFocus'));
-  this.fileInput.on('blur', $.proxy(this, 'onFileBlur'));
-};
-
-MultiFileUpload.prototype.setupStatusBox = function () {
-  this.status = $(
-    '<div aria-live="polite" role="status" class="govuk-visually-hidden" />'
-  );
-  this.dropzone.append(this.status);
-};
-
-MultiFileUpload.prototype.onDragOver = function (e) {
-  e.preventDefault();
-  this.dropzone.addClass('moj-multi-file-upload--dragover');
-};
-
-MultiFileUpload.prototype.onDragLeave = function () {
-  this.dropzone.removeClass('moj-multi-file-upload--dragover');
-};
-
-MultiFileUpload.prototype.onDrop = function (e) {
-  e.preventDefault();
-  this.dropzone.removeClass('moj-multi-file-upload--dragover');
-  this.feedbackContainer.removeClass('moj-hidden');
-  this.status.html(this.params.uploadStatusText);
-  this.uploadFiles(e.originalEvent.dataTransfer.files);
-};
-
-MultiFileUpload.prototype.uploadFiles = function (files) {
-  for (let i = 0; i < files.length; i++) {
-    this.uploadFile(files[i]);
+  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);
   }
-};
-
-MultiFileUpload.prototype.onFileChange = function (e) {
-  this.feedbackContainer.removeClass('moj-hidden');
-  this.status.html(this.params.uploadStatusText);
-  this.uploadFiles(e.currentTarget.files);
-  this.fileInput.replaceWith($(e.currentTarget).val('').clone(true));
-  this.setupFileInput();
-  this.fileInput.get(0).focus();
-};
-
-MultiFileUpload.prototype.onFileFocus = function (e) {
-  this.label.addClass('moj-multi-file-upload--focused');
-};
-
-MultiFileUpload.prototype.onFileBlur = function (e) {
-  this.label.removeClass('moj-multi-file-upload--focused');
-};
-
-MultiFileUpload.prototype.getSuccessHtml = function (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>`
-};
-
-MultiFileUpload.prototype.getErrorHtml = function (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>`
-};
-
-MultiFileUpload.prototype.getFileRowHtml = function (file) {
-  const html = `
-    <div class="govuk-summary-list__row moj-multi-file-upload__row">
-      <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>
-    </div>`;
-  return html
-};
-
-MultiFileUpload.prototype.getDeleteButtonHtml = function (file) {
-  return `<button class="moj-multi-file-upload__delete govuk-button govuk-button--secondary govuk-!-margin-bottom-0" type="button" name="delete" value="${file.filename}">
-      Delete <span class="govuk-visually-hidden">${file.originalname}</span>
-    </button>`
-};
-
-MultiFileUpload.prototype.uploadFile = function (file) {
-  this.params.uploadFileEntryHook(this, file);
-  const item = $(this.getFileRowHtml(file));
-  const formData = new FormData();
-  formData.append('documents', file);
-  this.feedbackContainer.find('.moj-multi-file-upload__list').append(item);
-
-  $.ajax({
-    url: this.params.uploadUrl,
-    type: 'post',
-    data: formData,
-    processData: false,
-    contentType: false,
-    success: $.proxy(function (response) {
-      if (response.error) {
-        item
-          .find('.moj-multi-file-upload__message')
-          .html(this.getErrorHtml(response.error));
-        this.status.html(response.error.message);
-      } else {
-        item
-          .find('.moj-multi-file-upload__message')
-          .html(this.getSuccessHtml(response.success));
-        this.status.html(response.success.messageText);
+  setupLabel() {
+    const label = document.createElement('label');
+    label.setAttribute('for', this.fileInput.id);
+    label.classList.add('govuk-button', 'govuk-button--secondary');
+    label.textContent = this.params.dropzoneButtonText;
+    const hint = document.createElement('p');
+    hint.classList.add('govuk-body');
+    hint.textContent = this.params.dropzoneHintText;
+    this.label = label;
+    this.dropzone.append(hint);
+    this.dropzone.append(label);
+  }
+  setupFileInput() {
+    this.fileInput = /** @type {HTMLInputElement} */
+    this.container.querySelector('.moj-multi-file-upload__input');
+    this.fileInput.addEventListener('change', this.onFileChange.bind(this));
+    this.fileInput.addEventListener('focus', this.onFileFocus.bind(this));
+    this.fileInput.addEventListener('blur', this.onFileBlur.bind(this));
+  }
+  setupStatusBox() {
+    this.status = document.createElement('div');
+    this.status.classList.add('govuk-visually-hidden');
+    this.status.setAttribute('aria-live', 'polite');
+    this.status.setAttribute('role', 'status');
+    this.dropzone.append(this.status);
+  }
+  onDragOver(event) {
+    event.preventDefault();
+    this.dropzone.classList.add('moj-multi-file-upload--dragover');
+  }
+  onDragLeave() {
+    this.dropzone.classList.remove('moj-multi-file-upload--dragover');
+  }
+  onDrop(event) {
+    event.preventDefault();
+    this.dropzone.classList.remove('moj-multi-file-upload--dragover');
+    this.feedbackContainer.classList.remove('moj-hidden');
+    this.status.textContent = this.params.uploadStatusText;
+    this.uploadFiles(event.dataTransfer.files);
+  }
+  uploadFiles(files) {
+    for (const file of Array.from(files)) {
+      this.uploadFile(file);
+    }
+  }
+  onFileChange() {
+    this.feedbackContainer.classList.remove('moj-hidden');
+    this.status.textContent = this.params.uploadStatusText;
+    this.uploadFiles(this.fileInput.files);
+    const fileInput = this.fileInput.cloneNode(true);
+    if (!fileInput || !(fileInput instanceof HTMLInputElement)) {
+      return;
+    }
+    fileInput.value = '';
+    this.fileInput.replaceWith(fileInput);
+    this.setupFileInput();
+    this.fileInput.focus();
+  }
+  onFileFocus() {
+    this.label.classList.add('moj-multi-file-upload--focused');
+  }
+  onFileBlur() {
+    this.label.classList.remove('moj-multi-file-upload--focused');
+  }
+  getSuccessHtml(success) {
+    return `<span class="moj-multi-file-upload__success"> <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"/></svg>${success.messageHtml}</span>`;
+  }
+  getErrorHtml(error) {
+    return `<span class="moj-multi-file-upload__error"> <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z"/></svg>${error.message}</span>`;
+  }
+  getFileRow(file) {
+    const row = document.createElement('div');
+    row.classList.add('govuk-summary-list__row', 'moj-multi-file-upload__row');
+    row.innerHTML = `
+    <div class="govuk-summary-list__value moj-multi-file-upload__message">
+      <span class="moj-multi-file-upload__filename">${file.name}</span>
+      <span class="moj-multi-file-upload__progress">0%</span>
+    </div>
+    <div class="govuk-summary-list__actions moj-multi-file-upload__actions"></div>
+  `;
+    return row;
+  }
+  getDeleteButton(file) {
+    const button = document.createElement('button');
+    button.setAttribute('type', 'button');
+    button.setAttribute('name', 'delete');
+    button.setAttribute('value', file.filename);
+    button.classList.add('moj-multi-file-upload__delete', 'govuk-button', 'govuk-button--secondary', 'govuk-!-margin-bottom-0');
+    button.innerHTML = `Delete <span class="govuk-visually-hidden">${file.originalname}</span>`;
+    return button;
+  }
+  uploadFile(file) {
+    this.params.uploadFileEntryHook(this, file);
+    const item = this.getFileRow(file);
+    const message = item.querySelector('.moj-multi-file-upload__message');
+    const actions = item.querySelector('.moj-multi-file-upload__actions');
+    const progress = item.querySelector('.moj-multi-file-upload__progress');
+    const formData = new FormData();
+    formData.append('documents', file);
+    this.feedbackContainer.querySelector('.moj-multi-file-upload__list').append(item);
+    const xhr = new XMLHttpRequest();
+    const onLoad = () => {
+      if (xhr.status < 200 || xhr.status >= 300 || !('success' in xhr.response)) {
+        return onError();
       }
-      item
-        .find('.moj-multi-file-upload__actions')
-        .append(this.getDeleteButtonHtml(response.file));
-      this.params.uploadFileExitHook(this, file, response);
-    }, this),
-    error: $.proxy(function (jqXHR, textStatus, errorThrown) {
-      this.params.uploadFileErrorHook(
-        this,
-        file,
-        jqXHR,
-        textStatus,
-        errorThrown
-      );
-    }, this),
-    xhr: function () {
-      const xhr = new XMLHttpRequest();
-      xhr.upload.addEventListener(
-        'progress',
-        function (e) {
-          if (e.lengthComputable) {
-            let percentComplete = e.loaded / e.total;
-            percentComplete = parseInt(percentComplete * 100, 10);
-            item
-              .find('.moj-multi-file-upload__progress')
-              .text(` ${percentComplete}%`);
-          }
-        },
-        false
-      );
-      return xhr
+      message.innerHTML = this.getSuccessHtml(xhr.response.success);
+      this.status.textContent = xhr.response.success.messageText;
+      actions.append(this.getDeleteButton(xhr.response.file));
+      this.params.uploadFileExitHook(this, file, xhr, xhr.responseText);
+    };
+    const onError = () => {
+      const error = new Error(xhr.response && 'error' in xhr.response ? xhr.response.error.message : xhr.statusText || 'Upload failed');
+      message.innerHTML = this.getErrorHtml(error);
+      this.status.textContent = error.message;
+      this.params.uploadFileErrorHook(this, file, xhr, xhr.responseText, error);
+    };
+    xhr.addEventListener('load', onLoad);
+    xhr.addEventListener('error', onError);
+    xhr.upload.addEventListener('progress', event => {
+      if (!event.lengthComputable) {
+        return;
+      }
+      const percentComplete = Math.round(event.loaded / event.total * 100);
+      progress.textContent = ` ${percentComplete}%`;
+    });
+    xhr.open('POST', this.params.uploadUrl);
+    xhr.responseType = 'json';
+    xhr.send(formData);
+  }
+  onFileDeleteClick(event) {
+    const button = event.target;
+    if (!button || !(button instanceof HTMLButtonElement) || !button.classList.contains('moj-multi-file-upload__delete')) {
+      return;
     }
-  });
-};
+    event.preventDefault(); // if user refreshes page and then deletes
 
-MultiFileUpload.prototype.onFileDeleteClick = function (e) {
-  e.preventDefault(); // if user refreshes page and then deletes
-  const button = $(e.currentTarget);
-  const data = {};
-  data[button[0].name] = button[0].value;
-  $.ajax({
-    url: this.params.deleteUrl,
-    type: 'post',
-    dataType: 'json',
-    data,
-    success: $.proxy(function (response) {
-      if (response.error) ; else {
-        button.parents('.moj-multi-file-upload__row').remove();
-        if (
-          this.feedbackContainer.find('.moj-multi-file-upload__row').length ===
-          0
-        ) {
-          this.feedbackContainer.addClass('moj-hidden');
-        }
+    const xhr = new XMLHttpRequest();
+    xhr.addEventListener('load', () => {
+      if (xhr.status < 200 || xhr.status >= 300) {
+        return;
+      }
+      const rows = Array.from(this.feedbackContainer.querySelectorAll('.moj-multi-file-upload__row'));
+      if (rows.length === 1) {
+        this.feedbackContainer.classList.add('moj-hidden');
       }
-      this.params.fileDeleteHook(this, response);
-    }, this)
-  });
-};
+      const row = rows.find(row => row.contains(button));
+      if (row) row.remove();
+      this.params.fileDeleteHook(this, undefined, xhr, xhr.responseText);
+    });
+    xhr.open('POST', this.params.deleteUrl);
+    xhr.setRequestHeader('Content-Type', 'application/json');
+    xhr.responseType = 'json';
+    xhr.send(JSON.stringify({
+      [button.name]: button.value
+    }));
+  }
+}
 
 export { MultiFileUpload };
 //# sourceMappingURL=multi-file-upload.mjs.map

package/moj/components/multi-file-upload/multi-file-upload.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"multi-file-upload.mjs","sources":["../../../../src/moj/components/multi-file-upload/multi-file-upload.mjs"],"sourcesContent":["import $ from 'jquery'\n\nimport {\n  dragAndDropSupported,\n  fileApiSupported,\n  formDataSupported\n} from '../../helpers.mjs'\n\nexport function MultiFileUpload(params) {\n  if (!(dragAndDropSupported() && formDataSupported() && fileApiSupported())) {\n    return\n  }\n\n  this.defaultParams = {\n    uploadFileEntryHook: $.noop,\n    uploadFileExitHook: $.noop,\n    uploadFileErrorHook: $.noop,\n    fileDeleteHook: $.noop,\n    uploadStatusText: 'Uploading files, please wait',\n    dropzoneHintText: 'Drag and drop files here or',\n    dropzoneButtonText: 'Choose files'\n  }\n\n  this.params = $.extend({}, this.defaultParams, params)\n  this.container = $(this.params.container)\n\n  this.container.addClass('moj-multi-file-upload--enhanced')\n\n  this.feedbackContainer = this.container.find(\n    '.moj-multi-file__uploaded-files'\n  )\n  this.setupFileInput()\n  this.setupDropzone()\n  this.setupLabel()\n  this.setupStatusBox()\n  this.container.on(\n    'click',\n    '.moj-multi-file-upload__delete',\n    $.proxy(this, 'onFileDeleteClick')\n  )\n}\n\nMultiFileUpload.prototype.setupDropzone = function () {\n  this.fileInput.wrap('<div class=\"moj-multi-file-upload__dropzone\" />')\n  this.dropzone = this.container.find('.moj-multi-file-upload__dropzone')\n  this.dropzone.on('dragover', $.proxy(this, 'onDragOver'))\n  this.dropzone.on('dragleave', $.proxy(this, 'onDragLeave'))\n  this.dropzone.on('drop', $.proxy(this, 'onDrop'))\n}\n\nMultiFileUpload.prototype.setupLabel = function () {\n  this.label = $(\n    `<label for=\"${this.fileInput[0].id}\" class=\"govuk-button govuk-button--secondary\">${this.params.dropzoneButtonText}</label>`\n  )\n  this.dropzone.append(\n    `<p class=\"govuk-body\">${this.params.dropzoneHintText}</p>`\n  )\n  this.dropzone.append(this.label)\n}\n\nMultiFileUpload.prototype.setupFileInput = function () {\n  this.fileInput = this.container.find('.moj-multi-file-upload__input')\n  this.fileInput.on('change', $.proxy(this, 'onFileChange'))\n  this.fileInput.on('focus', $.proxy(this, 'onFileFocus'))\n  this.fileInput.on('blur', $.proxy(this, 'onFileBlur'))\n}\n\nMultiFileUpload.prototype.setupStatusBox = function () {\n  this.status = $(\n    '<div aria-live=\"polite\" role=\"status\" class=\"govuk-visually-hidden\" />'\n  )\n  this.dropzone.append(this.status)\n}\n\nMultiFileUpload.prototype.onDragOver = function (e) {\n  e.preventDefault()\n  this.dropzone.addClass('moj-multi-file-upload--dragover')\n}\n\nMultiFileUpload.prototype.onDragLeave = function () {\n  this.dropzone.removeClass('moj-multi-file-upload--dragover')\n}\n\nMultiFileUpload.prototype.onDrop = function (e) {\n  e.preventDefault()\n  this.dropzone.removeClass('moj-multi-file-upload--dragover')\n  this.feedbackContainer.removeClass('moj-hidden')\n  this.status.html(this.params.uploadStatusText)\n  this.uploadFiles(e.originalEvent.dataTransfer.files)\n}\n\nMultiFileUpload.prototype.uploadFiles = function (files) {\n  for (let i = 0; i < files.length; i++) {\n    this.uploadFile(files[i])\n  }\n}\n\nMultiFileUpload.prototype.onFileChange = function (e) {\n  this.feedbackContainer.removeClass('moj-hidden')\n  this.status.html(this.params.uploadStatusText)\n  this.uploadFiles(e.currentTarget.files)\n  this.fileInput.replaceWith($(e.currentTarget).val('').clone(true))\n  this.setupFileInput()\n  this.fileInput.get(0).focus()\n}\n\nMultiFileUpload.prototype.onFileFocus = function (e) {\n  this.label.addClass('moj-multi-file-upload--focused')\n}\n\nMultiFileUpload.prototype.onFileBlur = function (e) {\n  this.label.removeClass('moj-multi-file-upload--focused')\n}\n\nMultiFileUpload.prototype.getSuccessHtml = function (success) {\n  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>`\n}\n\nMultiFileUpload.prototype.getErrorHtml = function (error) {\n  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>`\n}\n\nMultiFileUpload.prototype.getFileRowHtml = function (file) {\n  const html = `\n    <div class=\"govuk-summary-list__row moj-multi-file-upload__row\">\n      <div class=\"govuk-summary-list__value moj-multi-file-upload__message\">\n        <span class=\"moj-multi-file-upload__filename\">${file.name}</span>\n        <span class=\"moj-multi-file-upload__progress\">0%</span>\n      </div>\n      <div class=\"govuk-summary-list__actions moj-multi-file-upload__actions\"></div>\n    </div>`\n  return html\n}\n\nMultiFileUpload.prototype.getDeleteButtonHtml = function (file) {\n  return `<button class=\"moj-multi-file-upload__delete govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" type=\"button\" name=\"delete\" value=\"${file.filename}\">\n      Delete <span class=\"govuk-visually-hidden\">${file.originalname}</span>\n    </button>`\n}\n\nMultiFileUpload.prototype.uploadFile = function (file) {\n  this.params.uploadFileEntryHook(this, file)\n  const item = $(this.getFileRowHtml(file))\n  const formData = new FormData()\n  formData.append('documents', file)\n  this.feedbackContainer.find('.moj-multi-file-upload__list').append(item)\n\n  $.ajax({\n    url: this.params.uploadUrl,\n    type: 'post',\n    data: formData,\n    processData: false,\n    contentType: false,\n    success: $.proxy(function (response) {\n      if (response.error) {\n        item\n          .find('.moj-multi-file-upload__message')\n          .html(this.getErrorHtml(response.error))\n        this.status.html(response.error.message)\n      } else {\n        item\n          .find('.moj-multi-file-upload__message')\n          .html(this.getSuccessHtml(response.success))\n        this.status.html(response.success.messageText)\n      }\n      item\n        .find('.moj-multi-file-upload__actions')\n        .append(this.getDeleteButtonHtml(response.file))\n      this.params.uploadFileExitHook(this, file, response)\n    }, this),\n    error: $.proxy(function (jqXHR, textStatus, errorThrown) {\n      this.params.uploadFileErrorHook(\n        this,\n        file,\n        jqXHR,\n        textStatus,\n        errorThrown\n      )\n    }, this),\n    xhr: function () {\n      const xhr = new XMLHttpRequest()\n      xhr.upload.addEventListener(\n        'progress',\n        function (e) {\n          if (e.lengthComputable) {\n            let percentComplete = e.loaded / e.total\n            percentComplete = parseInt(percentComplete * 100, 10)\n            item\n              .find('.moj-multi-file-upload__progress')\n              .text(` ${percentComplete}%`)\n          }\n        },\n        false\n      )\n      return xhr\n    }\n  })\n}\n\nMultiFileUpload.prototype.onFileDeleteClick = function (e) {\n  e.preventDefault() // if user refreshes page and then deletes\n  const button = $(e.currentTarget)\n  const data = {}\n  data[button[0].name] = button[0].value\n  $.ajax({\n    url: this.params.deleteUrl,\n    type: 'post',\n    dataType: 'json',\n    data,\n    success: $.proxy(function (response) {\n      if (response.error) {\n        // handle error\n      } else {\n        button.parents('.moj-multi-file-upload__row').remove()\n        if (\n          this.feedbackContainer.find('.moj-multi-file-upload__row').length ===\n          0\n        ) {\n          this.feedbackContainer.addClass('moj-hidden')\n        }\n      }\n      this.params.fileDeleteHook(this, response)\n    }, this)\n  })\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"multi-file-upload.mjs","sources":["../../../../src/moj/components/multi-file-upload/multi-file-upload.mjs"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n\nimport {\n  dragAndDropSupported,\n  fileApiSupported,\n  formDataSupported\n} from '../../helpers.mjs'\n\nexport class MultiFileUpload {\n  /**\n   * @param {MultiFileUploadConfig} [params] - Multi file upload config\n   */\n  constructor(params = {}) {\n    const { container } = params\n\n    if (\n      !container ||\n      !(container instanceof HTMLElement) ||\n      !(dragAndDropSupported() && formDataSupported() && fileApiSupported())\n    ) {\n      return this\n    }\n\n    this.container = container\n    this.container.classList.add('moj-multi-file-upload--enhanced')\n\n    this.defaultParams = {\n      uploadFileEntryHook: () => {},\n      uploadFileExitHook: () => {},\n      uploadFileErrorHook: () => {},\n      fileDeleteHook: () => {},\n      uploadStatusText: 'Uploading files, please wait',\n      dropzoneHintText: 'Drag and drop files here or',\n      dropzoneButtonText: 'Choose files'\n    }\n\n    this.params = Object.assign({}, this.defaultParams, params)\n\n    this.feedbackContainer = /** @type {HTMLDivElement} */ (\n      this.container.querySelector('.moj-multi-file__uploaded-files')\n    )\n\n    this.setupFileInput()\n    this.setupDropzone()\n    this.setupLabel()\n    this.setupStatusBox()\n\n    this.container.addEventListener('click', this.onFileDeleteClick.bind(this))\n  }\n\n  setupDropzone() {\n    this.dropzone = document.createElement('div')\n    this.dropzone.classList.add('moj-multi-file-upload__dropzone')\n\n    this.dropzone.addEventListener('dragover', this.onDragOver.bind(this))\n    this.dropzone.addEventListener('dragleave', this.onDragLeave.bind(this))\n    this.dropzone.addEventListener('drop', this.onDrop.bind(this))\n\n    this.fileInput.replaceWith(this.dropzone)\n    this.dropzone.appendChild(this.fileInput)\n  }\n\n  setupLabel() {\n    const label = document.createElement('label')\n    label.setAttribute('for', this.fileInput.id)\n    label.classList.add('govuk-button', 'govuk-button--secondary')\n    label.textContent = this.params.dropzoneButtonText\n\n    const hint = document.createElement('p')\n    hint.classList.add('govuk-body')\n    hint.textContent = this.params.dropzoneHintText\n\n    this.label = label\n    this.dropzone.append(hint)\n    this.dropzone.append(label)\n  }\n\n  setupFileInput() {\n    this.fileInput = /** @type {HTMLInputElement} */ (\n      this.container.querySelector('.moj-multi-file-upload__input')\n    )\n    this.fileInput.addEventListener('change', this.onFileChange.bind(this))\n    this.fileInput.addEventListener('focus', this.onFileFocus.bind(this))\n    this.fileInput.addEventListener('blur', this.onFileBlur.bind(this))\n  }\n\n  setupStatusBox() {\n    this.status = document.createElement('div')\n    this.status.classList.add('govuk-visually-hidden')\n    this.status.setAttribute('aria-live', 'polite')\n    this.status.setAttribute('role', 'status')\n    this.dropzone.append(this.status)\n  }\n\n  onDragOver(event) {\n    event.preventDefault()\n    this.dropzone.classList.add('moj-multi-file-upload--dragover')\n  }\n\n  onDragLeave() {\n    this.dropzone.classList.remove('moj-multi-file-upload--dragover')\n  }\n\n  onDrop(event) {\n    event.preventDefault()\n    this.dropzone.classList.remove('moj-multi-file-upload--dragover')\n    this.feedbackContainer.classList.remove('moj-hidden')\n    this.status.textContent = this.params.uploadStatusText\n    this.uploadFiles(event.dataTransfer.files)\n  }\n\n  uploadFiles(files) {\n    for (const file of Array.from(files)) {\n      this.uploadFile(file)\n    }\n  }\n\n  onFileChange() {\n    this.feedbackContainer.classList.remove('moj-hidden')\n    this.status.textContent = this.params.uploadStatusText\n    this.uploadFiles(this.fileInput.files)\n\n    const fileInput = this.fileInput.cloneNode(true)\n    if (!fileInput || !(fileInput instanceof HTMLInputElement)) {\n      return\n    }\n\n    fileInput.value = ''\n    this.fileInput.replaceWith(fileInput)\n\n    this.setupFileInput()\n    this.fileInput.focus()\n  }\n\n  onFileFocus() {\n    this.label.classList.add('moj-multi-file-upload--focused')\n  }\n\n  onFileBlur() {\n    this.label.classList.remove('moj-multi-file-upload--focused')\n  }\n\n  getSuccessHtml(success) {\n    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>`\n  }\n\n  getErrorHtml(error) {\n    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>`\n  }\n\n  getFileRow(file) {\n    const row = document.createElement('div')\n\n    row.classList.add('govuk-summary-list__row', 'moj-multi-file-upload__row')\n\n    row.innerHTML = `\n    <div class=\"govuk-summary-list__value moj-multi-file-upload__message\">\n      <span class=\"moj-multi-file-upload__filename\">${file.name}</span>\n      <span class=\"moj-multi-file-upload__progress\">0%</span>\n    </div>\n    <div class=\"govuk-summary-list__actions moj-multi-file-upload__actions\"></div>\n  `\n\n    return row\n  }\n\n  getDeleteButton(file) {\n    const button = document.createElement('button')\n\n    button.setAttribute('type', 'button')\n    button.setAttribute('name', 'delete')\n    button.setAttribute('value', file.filename)\n\n    button.classList.add(\n      'moj-multi-file-upload__delete',\n      'govuk-button',\n      'govuk-button--secondary',\n      'govuk-!-margin-bottom-0'\n    )\n\n    button.innerHTML = `Delete <span class=\"govuk-visually-hidden\">${file.originalname}</span>`\n\n    return button\n  }\n\n  uploadFile(file) {\n    this.params.uploadFileEntryHook(this, file)\n\n    const item = this.getFileRow(file)\n    const message = item.querySelector('.moj-multi-file-upload__message')\n    const actions = item.querySelector('.moj-multi-file-upload__actions')\n    const progress = item.querySelector('.moj-multi-file-upload__progress')\n\n    const formData = new FormData()\n    formData.append('documents', file)\n\n    this.feedbackContainer\n      .querySelector('.moj-multi-file-upload__list')\n      .append(item)\n\n    const xhr = new XMLHttpRequest()\n\n    const onLoad = () => {\n      if (\n        xhr.status < 200 ||\n        xhr.status >= 300 ||\n        !('success' in xhr.response)\n      ) {\n        return onError()\n      }\n\n      message.innerHTML = this.getSuccessHtml(xhr.response.success)\n      this.status.textContent = xhr.response.success.messageText\n\n      actions.append(this.getDeleteButton(xhr.response.file))\n      this.params.uploadFileExitHook(this, file, xhr, xhr.responseText)\n    }\n\n    const onError = () => {\n      const error = new Error(\n        xhr.response && 'error' in xhr.response\n          ? xhr.response.error.message\n          : xhr.statusText || 'Upload failed'\n      )\n\n      message.innerHTML = this.getErrorHtml(error)\n      this.status.textContent = error.message\n\n      this.params.uploadFileErrorHook(this, file, xhr, xhr.responseText, error)\n    }\n\n    xhr.addEventListener('load', onLoad)\n    xhr.addEventListener('error', onError)\n\n    xhr.upload.addEventListener('progress', (event) => {\n      if (!event.lengthComputable) {\n        return\n      }\n\n      const percentComplete = Math.round((event.loaded / event.total) * 100)\n      progress.textContent = ` ${percentComplete}%`\n    })\n\n    xhr.open('POST', this.params.uploadUrl)\n    xhr.responseType = 'json'\n\n    xhr.send(formData)\n  }\n\n  onFileDeleteClick(event) {\n    const button = event.target\n\n    if (\n      !button ||\n      !(button instanceof HTMLButtonElement) ||\n      !button.classList.contains('moj-multi-file-upload__delete')\n    ) {\n      return\n    }\n\n    event.preventDefault() // if user refreshes page and then deletes\n\n    const xhr = new XMLHttpRequest()\n\n    xhr.addEventListener('load', () => {\n      if (xhr.status < 200 || xhr.status >= 300) {\n        return\n      }\n\n      const rows = Array.from(\n        this.feedbackContainer.querySelectorAll('.moj-multi-file-upload__row')\n      )\n\n      if (rows.length === 1) {\n        this.feedbackContainer.classList.add('moj-hidden')\n      }\n\n      const row = rows.find((row) => row.contains(button))\n      if (row) row.remove()\n\n      this.params.fileDeleteHook(this, undefined, xhr, xhr.responseText)\n    })\n\n    xhr.open('POST', this.params.deleteUrl)\n    xhr.setRequestHeader('Content-Type', 'application/json')\n    xhr.responseType = 'json'\n\n    xhr.send(\n      JSON.stringify({\n        [button.name]: button.value\n      })\n    )\n  }\n}\n"],"names":["MultiFileUpload","constructor","params","container","HTMLElement","dragAndDropSupported","formDataSupported","fileApiSupported","classList","add","defaultParams","uploadFileEntryHook","uploadFileExitHook","uploadFileErrorHook","fileDeleteHook","uploadStatusText","dropzoneHintText","dropzoneButtonText","Object","assign","feedbackContainer","querySelector","setupFileInput","setupDropzone","setupLabel","setupStatusBox","addEventListener","onFileDeleteClick","bind","dropzone","document","createElement","onDragOver","onDragLeave","onDrop","fileInput","replaceWith","appendChild","label","setAttribute","id","textContent","hint","append","onFileChange","onFileFocus","onFileBlur","status","event","preventDefault","remove","uploadFiles","dataTransfer","files","file","Array","from","uploadFile","cloneNode","HTMLInputElement","value","focus","getSuccessHtml","success","messageHtml","getErrorHtml","error","message","getFileRow","row","innerHTML","name","getDeleteButton","button","filename","originalname","item","actions","progress","formData","FormData","xhr","XMLHttpRequest","onLoad","response","onError","messageText","responseText","Error","statusText","upload","lengthComputable","percentComplete","Math","round","loaded","total","open","uploadUrl","responseType","send","target","HTMLButtonElement","contains","rows","querySelectorAll","length","find","undefined","deleteUrl","setRequestHeader","JSON","stringify"],"mappings":"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"}

package/moj/components/multi-select/_multi-select.scss

@@ -13,3 +13,5 @@
   // stylelint-disable-next-line declaration-no-important
   padding: 0 !important;
 }
+
+/*# sourceMappingURL=_multi-select.scss.map */

package/moj/components/multi-select/_multi-select.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/moj/components/multi-select/_multi-select.scss"],"names":[],"mappings":"AAAA;;+EAE+E;;AAE/E;EACE,qBAAqB;EACrB,eAAe;AACjB;;AAEA;EACE,sDAAsD;EACtD,oBAAoB;EACpB,sDAAsD;EACtD,qBAAqB;AACvB","file":"_multi-select.scss","sourcesContent":["/* ==========================================================================\n   # MULTI-SELECT\n   ========================================================================== */\n\n.moj-multi-select__checkbox {\n  display: inline-block;\n  padding-left: 0;\n}\n\n.moj-multi-select__toggle-label {\n  // stylelint-disable-next-line declaration-no-important\n  margin: 0 !important;\n  // stylelint-disable-next-line declaration-no-important\n  padding: 0 !important;\n}\n"]}

package/moj/components/multi-select/multi-select.bundle.js

@@ -0,0 +1,78 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MOJFrontend = global.MOJFrontend || {}));
+})(this, (function (exports) { 'use strict';
+
+  class MultiSelect {
+    constructor(options) {
+      this.container = options.container;
+      if (this.container.hasAttribute('data-moj-multi-select-init')) {
+        return this;
+      }
+      this.container.setAttribute('data-moj-multi-select-init', '');
+      const idPrefix = options.id_prefix;
+      this.setupToggle(idPrefix);
+      this.toggleButton = this.toggle.querySelector('input');
+      this.toggleButton.addEventListener('click', this.onButtonClick.bind(this));
+      this.container.append(this.toggle);
+      this.checkboxes = Array.from(options.checkboxes);
+      this.checkboxes.forEach(el => el.addEventListener('click', this.onCheckboxClick.bind(this)));
+      this.checked = options.checked || false;
+    }
+    setupToggle(idPrefix = '') {
+      const id = `${idPrefix}checkboxes-all`;
+      const toggle = document.createElement('div');
+      const label = document.createElement('label');
+      const input = document.createElement('input');
+      const span = document.createElement('span');
+      toggle.classList.add('govuk-checkboxes__item', 'govuk-checkboxes--small', 'moj-multi-select__checkbox');
+      input.id = id;
+      input.type = 'checkbox';
+      input.classList.add('govuk-checkboxes__input');
+      label.setAttribute('for', id);
+      label.classList.add('govuk-label', 'govuk-checkboxes__label', 'moj-multi-select__toggle-label');
+      span.classList.add('govuk-visually-hidden');
+      span.textContent = 'Select all';
+      label.append(span);
+      toggle.append(input, label);
+      this.toggle = toggle;
+    }
+    onButtonClick() {
+      if (this.checked) {
+        this.uncheckAll();
+        this.toggleButton.checked = false;
+      } else {
+        this.checkAll();
+        this.toggleButton.checked = true;
+      }
+    }
+    checkAll() {
+      this.checkboxes.forEach(el => {
+        el.checked = true;
+      });
+      this.checked = true;
+    }
+    uncheckAll() {
+      this.checkboxes.forEach(el => {
+        el.checked = false;
+      });
+      this.checked = false;
+    }
+    onCheckboxClick(event) {
+      if (!event.target.checked) {
+        this.toggleButton.checked = false;
+        this.checked = false;
+      } else {
+        if (this.checkboxes.filter(el => el.checked).length === this.checkboxes.length) {
+          this.toggleButton.checked = true;
+          this.checked = true;
+        }
+      }
+    }
+  }
+
+  exports.MultiSelect = MultiSelect;
+
+}));
+//# sourceMappingURL=multi-select.bundle.js.map

package/moj/components/multi-select/multi-select.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.bundle.js","sources":["../../../../src/moj/components/multi-select/multi-select.mjs"],"sourcesContent":["export class MultiSelect {\n  constructor(options) {\n    this.container = options.container\n\n    if (this.container.hasAttribute('data-moj-multi-select-init')) {\n      return this\n    }\n\n    this.container.setAttribute('data-moj-multi-select-init', '')\n\n    const idPrefix = options.id_prefix\n    this.setupToggle(idPrefix)\n\n    this.toggleButton = this.toggle.querySelector('input')\n    this.toggleButton.addEventListener('click', this.onButtonClick.bind(this))\n    this.container.append(this.toggle)\n\n    this.checkboxes = Array.from(options.checkboxes)\n    this.checkboxes.forEach((el) =>\n      el.addEventListener('click', this.onCheckboxClick.bind(this))\n    )\n\n    this.checked = options.checked || false\n  }\n\n  setupToggle(idPrefix = '') {\n    const id = `${idPrefix}checkboxes-all`\n\n    const toggle = document.createElement('div')\n    const label = document.createElement('label')\n    const input = document.createElement('input')\n    const span = document.createElement('span')\n\n    toggle.classList.add(\n      'govuk-checkboxes__item',\n      'govuk-checkboxes--small',\n      'moj-multi-select__checkbox'\n    )\n\n    input.id = id\n    input.type = 'checkbox'\n    input.classList.add('govuk-checkboxes__input')\n\n    label.setAttribute('for', id)\n    label.classList.add(\n      'govuk-label',\n      'govuk-checkboxes__label',\n      'moj-multi-select__toggle-label'\n    )\n\n    span.classList.add('govuk-visually-hidden')\n    span.textContent = 'Select all'\n\n    label.append(span)\n    toggle.append(input, label)\n\n    this.toggle = toggle\n  }\n\n  onButtonClick() {\n    if (this.checked) {\n      this.uncheckAll()\n      this.toggleButton.checked = false\n    } else {\n      this.checkAll()\n      this.toggleButton.checked = true\n    }\n  }\n\n  checkAll() {\n    this.checkboxes.forEach((el) => {\n      el.checked = true\n    })\n    this.checked = true\n  }\n\n  uncheckAll() {\n    this.checkboxes.forEach((el) => {\n      el.checked = false\n    })\n    this.checked = false\n  }\n\n  onCheckboxClick(event) {\n    if (!event.target.checked) {\n      this.toggleButton.checked = false\n      this.checked = false\n    } else {\n      if (\n        this.checkboxes.filter((el) => el.checked).length ===\n        this.checkboxes.length\n      ) {\n        this.toggleButton.checked = true\n        this.checked = true\n      }\n    }\n  }\n}\n"],"names":["MultiSelect","constructor","options","container","hasAttribute","setAttribute","idPrefix","id_prefix","setupToggle","toggleButton","toggle","querySelector","addEventListener","onButtonClick","bind","append","checkboxes","Array","from","forEach","el","onCheckboxClick","checked","id","document","createElement","label","input","span","classList","add","type","textContent","uncheckAll","checkAll","event","target","filter","length"],"mappings":"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"}