katalyst-govuk-formbuilder 1.30.1 → 2.0.1

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

@@ -1,4 +1,6 @@
-import { Controller } from "@hotwired/stimulus";
+import { Controller, Application } from "@hotwired/stimulus";
+
+import { DirectUploadController } from "@rails/activestorage";
 
 function setFocus($element, options = {}) {
   var _options$onBeforeFocu;
@@ -940,7 +942,7 @@ ErrorSummary.schema = Object.freeze({
   }
   canDrop(dataTransfer) {
     if (dataTransfer.items.length) {
-      return this.matchesInputCapacity(countFileItems(dataTransfer.items));
+      return this.matchesInputCapacity(countFileItems$1(dataTransfer.items));
     }
     if (dataTransfer.types.length) {
       return dataTransfer.types.includes("Files");
@@ -1024,7 +1026,7 @@ FileUpload.schema = Object.freeze({
   }
 });
 
-function countFileItems(list) {
+function countFileItems$1(list) {
   let result = 0;
   for (let i = 0; i < list.length; i++) {
     if (list[i].kind === "file") {
@@ -1210,6 +1212,240 @@ PasswordInput.schema = Object.freeze({
 
 Radios.moduleName = "govuk-radios";
 
+const config = {
+  brand: "govuk"
+};
+
+const uploadButtonSelector = "[type='button']:has(+ input[type='file'])";
+
+const Attachment = {
+  moduleName: "govuk-attachment",
+  defaults: {
+    i18n: {
+      ...FileUpload.defaults.i18n,
+      uploadSucceeded: "Uploaded successfully",
+      uploadFailed: "Upload failed — try again",
+      retryButton: "Try again",
+      fileRemoved: "%{filename} removed",
+      removeButton: "Remove %{filename}",
+      removeButtonContent: "Remove"
+    }
+  },
+  schema: {
+    properties: {
+      i18n: {
+        type: "object"
+      }
+    }
+  }
+};
+
+function attachmentConfig(wrapper) {
+  return mergeConfigs(Attachment.defaults, normaliseDataset(Attachment, wrapper?.dataset ?? {}));
+}
+
+class AttachmentUploadController extends DirectUploadController {
+  async start(option) {
+    this.dispatch("start");
+    try {
+      const attributes = await new Promise((resolve, reject) => {
+        this.directUpload.create((error, attributes) => error ? reject(error) : resolve(attributes));
+      });
+      option.value = attributes.signed_id;
+    } catch (error) {
+      this.dispatch("error", {
+        error: error
+      });
+      throw error;
+    } finally {
+      this.dispatch("end");
+    }
+  }
+}
+
+class AttachmentController extends Controller {
+  connect() {
+    this.config = attachmentConfig(this.element.closest(`.${config.brand}-file-upload-wrapper`));
+    this.i18n = new I18n(this.config.i18n, {
+      locale: closestAttributeValue(this.element, "lang")
+    });
+    this.select.addEventListener("change", this.change);
+    this.previewPendingFile();
+    this.uploadPendingFile();
+  }
+  disconnect() {
+    this.select?.removeEventListener("change", this.change);
+  }
+  previewPendingFile() {
+    const file = this.element.file;
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      this.imageTag?.remove();
+      return;
+    }
+    const preview = new FileReader;
+    preview.onload = this.onPreviewReady;
+    preview.readAsDataURL(file);
+  }
+  uploadPendingFile() {
+    const file = this.element.file;
+    if (!file) return;
+    if (!this.input?.dataset.directUploadUrl) return;
+    delete this.element.file;
+    this.input.dispatchEvent(new CustomEvent("govuk:upload", {
+      detail: {
+        file: file
+      }
+    }));
+    this.performUpload(file);
+  }
+  async performUpload(file) {
+    this.uploader = new AttachmentUploadController(this.input, file);
+    this.element.dataset.state = "uploading";
+    this.statusText = "";
+    this.retryButton?.remove();
+    const progressTag = createProgressTag(this.filenameTag.id);
+    this.captionTag.appendChild(progressTag);
+    this.input.addEventListener("direct-upload:progress", this.progress);
+    try {
+      await this.uploader.start(this.inputOption);
+      this.element.dataset.state = "upload-successful";
+      this.statusText = this.i18n.t("uploadSucceeded");
+    } catch (error) {
+      console.warn(error);
+      this.element.dataset.state = "upload-failed";
+      this.statusText = this.i18n.t("uploadFailed");
+      this.actionsTag?.prepend(createRetryButton(file.name, this.i18n));
+    } finally {
+      this.input.removeEventListener("direct-upload:progress", this.progress);
+      progressTag.remove();
+    }
+  }
+  onPreviewReady=e => {
+    this.imageTag.src = e.target.result;
+  };
+  change=() => {
+    if (this.select.value === "") this.destroy();
+  };
+  retry() {
+    this.performUpload(this.directUpload.file);
+    this.removeButton?.focus();
+  }
+  progress=({detail: detail}) => {
+    if (detail.id !== this.id) return;
+    if (this.progressTag) this.progressTag.value = detail.progress;
+  };
+  destroy() {
+    const focusTarget = this.uploadButton;
+    const remove = new CustomEvent("govuk:remove", {
+      detail: {
+        name: this.element.querySelector(".filename")?.textContent,
+        file: this.element.file
+      },
+      cancelable: true
+    });
+    if (!this.input.dispatchEvent(remove)) return;
+    this.element.remove();
+    focusTarget?.focus();
+  }
+  get id() {
+    return this.directUpload?.id ?? this.select.id;
+  }
+  get directUpload() {
+    return this.uploader?.directUpload;
+  }
+  get input() {
+    return this.element.closest(`.${config.brand}-file-upload-wrapper`)?.querySelector("input[type=file]");
+  }
+  get uploadButton() {
+    return this.element.closest(`.${config.brand}-file-upload-wrapper`)?.querySelector(uploadButtonSelector);
+  }
+  set statusText(message) {
+    const tag = this.element.querySelector("figcaption .status");
+    if (tag) tag.textContent = message;
+  }
+  get captionTag() {
+    return this.element.querySelector("figcaption");
+  }
+  get filenameTag() {
+    return this.element.querySelector("figcaption .filename");
+  }
+  get actionsTag() {
+    return this.element.querySelector(".actions");
+  }
+  get select() {
+    return this.element.querySelector("select");
+  }
+  get inputOption() {
+    return this.element.querySelector("option");
+  }
+  get imageTag() {
+    return this.element.querySelector("img");
+  }
+  get progressTag() {
+    return this.element.querySelector("progress");
+  }
+  get retryButton() {
+    return this.element.querySelector(".actions button[data-action*='retry']");
+  }
+  get removeButton() {
+    return this.element.querySelector(".actions button[data-action*='destroy']");
+  }
+}
+
+let nextAttachmentId = 0;
+
+function createAttachment(input, file, i18n) {
+  const template = document.createElement("TEMPLATE");
+  const id = ++nextAttachmentId;
+  template.innerHTML = `\n    <figure class="${config.brand}-attachment" data-controller="govuk-attachment" aria-labelledby="attachment-${id}-filename">\n      <img alt="" class="preview" src="">\n      <figcaption class="caption" aria-atomic="true" aria-live="polite">\n        <span id="attachment-${id}-filename" class="filename"></span>\n        <span class="size"></span>\n        <span class="status"></span>\n      </figcaption>\n      <div class="actions">\n        <select id="attachment-${id}-input" name="${input.name}" aria-labelledby="attachment-${id}-filename">\n          <option selected="selected" value=""></option>\n          <option value=""></option>\n        </select>\n        <button type="button" class="${config.brand}-button ${config.brand}-button--secondary ${config.brand}-attachment__remove" data-action="govuk-attachment#destroy" data-module="govuk-button"></button>\n      </div>\n    </figure>\n  `;
+  const figure = template.content.firstElementChild;
+  figure.querySelector(".filename").textContent = file.name;
+  figure.querySelector(".size").textContent = humanSize(file.size);
+  const [keep, remove] = figure.querySelectorAll("option");
+  keep.textContent = file.name;
+  remove.textContent = i18n.t("removeButton", {
+    filename: file.name
+  });
+  const removeButton = figure.querySelector("button");
+  removeButton.textContent = i18n.t("removeButtonContent");
+  removeButton.setAttribute("aria-label", i18n.t("removeButton", {
+    filename: file.name
+  }));
+  figure.file = file;
+  return figure;
+}
+
+const UNITS = [ "Bytes", "KB", "MB", "GB", "TB", "PB" ];
+
+function humanSize(bytes) {
+  if (bytes === 1) return "1 Byte";
+  if (bytes < 1024) return `${bytes} Bytes`;
+  const exp = Math.min(Math.floor(Math.log2(bytes) / 10), UNITS.length - 1);
+  const value = Number((bytes / 1024 ** exp).toPrecision(3));
+  return `${value} ${UNITS[exp]}`;
+}
+
+function createRetryButton(filename, i18n) {
+  const button = document.createElement("BUTTON");
+  button.type = "button";
+  button.className = `${config.brand}-button ${config.brand}-button--secondary ${config.brand}-attachment__retry`;
+  button.textContent = i18n.t("retryButton");
+  button.setAttribute("aria-label", `${i18n.t("retryButton")} ${filename}`);
+  button.dataset.action = "govuk-attachment#retry";
+  button.dataset.module = "govuk-button";
+  return button;
+}
+
+function createProgressTag(labelId) {
+  const progress = document.createElement("PROGRESS");
+  progress.className = `${config.brand}-attachment-progress`;
+  if (labelId) progress.setAttribute("aria-labelledby", labelId);
+  progress.value = 0;
+  progress.max = 100;
+  return progress;
+}
+
 class FileFieldController extends Controller {
   static targets=[ "preview", "destroy" ];
   static values={
@@ -1343,6 +1579,250 @@ class DocumentFieldController extends FileFieldController {
   }
 }
 
+class FileUploadController extends Controller {
+  connect() {
+    if (!this.fileInput) {
+      throw new Error(`Missing file input for ${this.element}`);
+    }
+    this.config = attachmentConfig(this.element);
+    this.i18n = new I18n(this.config.i18n, {
+      locale: closestAttributeValue(this.element, "lang")
+    });
+    this.id = this.uploadButton?.id ?? this.fileInput.id;
+    document.addEventListener("dragenter", this.onDragenter);
+    document.addEventListener("dragleave", this.onDragleave);
+    this.element.addEventListener("dragover", this.onDragover);
+    this.element.addEventListener("drop", this.onDrop);
+    this.enhance();
+    this.morphObserver = new MutationObserver(this.onMorph);
+    this.morphObserver.observe(this.element, {
+      childList: true
+    });
+  }
+  disconnect() {
+    this.morphObserver?.disconnect();
+    this.disabledObserver?.disconnect();
+    this.uploadButton?.removeEventListener("click", this.onClick);
+    this.element.removeEventListener("dragover", this.onDragover);
+    this.element.removeEventListener("drop", this.onDrop);
+    this.unbindInput();
+    document.removeEventListener("dragenter", this.onDragenter);
+    document.removeEventListener("dragleave", this.onDragleave);
+    this.announcements?.remove();
+  }
+  enhance() {
+    const fileInput = this.fileInput;
+    let uploadButton = this.uploadButton;
+    if (!uploadButton) {
+      this.ensureLabelId();
+      fileInput.id = `${this.id}-input`;
+      fileInput.setAttribute("hidden", "hidden");
+      uploadButton = createUploadButton(this.id, this.i18n, fileInput);
+      fileInput.insertAdjacentElement("beforebegin", uploadButton);
+      uploadButton.addEventListener("click", this.onClick);
+    }
+    if (!this.announcements) this.element.appendChild(createAnnouncements());
+    this.unbindInput();
+    fileInput.addEventListener("change", this.onChange);
+    fileInput.addEventListener("govuk:upload", this.onUpload);
+    fileInput.addEventListener("govuk:remove", this.onRemove);
+    this.updateDisabledState();
+    this.observeDisabledState();
+    this.updateCount();
+  }
+  unbindInput() {
+    this.fileInput?.removeEventListener("change", this.onChange);
+    this.fileInput?.removeEventListener("govuk:upload", this.onUpload);
+    this.fileInput?.removeEventListener("govuk:remove", this.onRemove);
+  }
+  onMorph=() => {
+    if (this.uploadButton) return;
+    this.fileInput.value = "";
+    this.element.querySelectorAll("figure").forEach(figure => {
+      delete figure.file;
+    });
+    this.enhance();
+  };
+  ensureLabelId() {
+    const label = document.querySelector(`label[for="${this.id}"]`);
+    if (label && !label.id) label.id = `${this.id}-label`;
+  }
+  updateDisabledState() {
+    if (!this.uploadButton) return;
+    const disabled = this.fileInput.disabled;
+    this.uploadButton.disabled = disabled;
+    this.element.classList.toggle(`${config.brand}-file-upload-wrapper--disabled`, disabled);
+  }
+  observeDisabledState() {
+    this.disabledObserver?.disconnect();
+    this.disabledObserver = new MutationObserver(mutations => {
+      for (const mutation of mutations) {
+        if (mutation.attributeName === "disabled") this.updateDisabledState();
+      }
+    });
+    this.disabledObserver.observe(this.fileInput, {
+      attributes: true
+    });
+  }
+  onClick=event => {
+    this.fileInput.click();
+  };
+  onDragover=event => {
+    if (this.fileInput.disabled) return;
+    event.preventDefault();
+  };
+  onDragenter=event => {
+    this.updateDropzoneVisibility(event);
+    this.enteredAnotherElement = true;
+  };
+  onDragleave=() => {
+    if (!this.enteredAnotherElement && !this.uploadButton.disabled) {
+      this.hideDraggingState();
+      this.announce(this.i18n.t("leftDropZone"));
+    }
+    this.enteredAnotherElement = false;
+  };
+  onDrop=event => {
+    if (this.fileInput.disabled) return;
+    event.preventDefault();
+    if (event.dataTransfer && this.canFillInput(event.dataTransfer)) {
+      this.fileInput.files = event.dataTransfer.files;
+      this.fileInput.dispatchEvent(new CustomEvent("change"));
+      this.hideDraggingState();
+    }
+  };
+  updateDropzoneVisibility(event) {
+    if (this.uploadButton.disabled) return;
+    if (!(event.target instanceof Node)) return;
+    if (this.element.contains(event.target)) {
+      if (event.dataTransfer && this.canDrop(event.dataTransfer)) {
+        if (!this.isDragging) {
+          this.showDraggingState();
+          this.announce(this.i18n.t("enteredDropZone"));
+        }
+      }
+    } else if (this.isDragging) {
+      this.hideDraggingState();
+      this.announce(this.i18n.t("leftDropZone"));
+    }
+  }
+  showDraggingState() {
+    this.uploadButton.classList.add(`${config.brand}-file-upload-button--dragging`);
+  }
+  hideDraggingState() {
+    this.uploadButton.classList.remove(`${config.brand}-file-upload-button--dragging`);
+  }
+  announce(message) {
+    if (this.announcements) this.announcements.textContent = message;
+  }
+  get announcements() {
+    return this.element.querySelector(`.${config.brand}-file-upload-announcements`);
+  }
+  matchesInputCapacity(numberOfFiles) {
+    if (this.fileInput.multiple) return numberOfFiles > 0;
+    return numberOfFiles === 1;
+  }
+  canDrop(dataTransfer) {
+    if (dataTransfer.items.length) {
+      return this.matchesInputCapacity(countFileItems(dataTransfer.items));
+    }
+    if (dataTransfer.types.length) {
+      return dataTransfer.types.includes("Files");
+    }
+    return true;
+  }
+  canFillInput(dataTransfer) {
+    return this.matchesInputCapacity(dataTransfer.files.length);
+  }
+  onChange=() => {
+    const files = Array.from(this.fileInput.files);
+    const figures = Array.from(this.element.querySelectorAll("figure"));
+    figures.forEach(figure => {
+      if (figure.file && !files.includes(figure.file)) figure.remove();
+    });
+    files.forEach(file => {
+      if (figures.some(figure => figure.file === file)) return;
+      const attachment = createAttachment(this.fileInput, file, this.i18n);
+      this.uploadButton.insertAdjacentElement("beforebegin", attachment);
+    });
+    this.updateCount();
+  };
+  onUpload=({detail: {file: file}}) => {
+    this.releaseFile(file);
+    this.updateCount();
+  };
+  releaseFile(file) {
+    const remaining = new DataTransfer;
+    for (const held of this.fileInput.files) {
+      if (held !== file) remaining.items.add(held);
+    }
+    this.fileInput.files = remaining.files;
+  }
+  onRemove=async event => {
+    await Promise.resolve();
+    if (event.defaultPrevented) return;
+    const {name: name, file: file} = event.detail;
+    if (file) this.releaseFile(file);
+    this.announce(this.i18n.t("fileRemoved", {
+      filename: name
+    }));
+    this.updateCount();
+  };
+  updateCount() {
+    const count = this.fileCount;
+    if (count === 0) {
+      this.statusTag.innerText = this.i18n.t("noFileChosen");
+      this.uploadButton.classList.add(`${config.brand}-file-upload-button--empty`);
+    } else {
+      this.statusTag.innerText = this.i18n.t("multipleFilesChosen", {
+        count: count
+      });
+      this.uploadButton.classList.remove(`${config.brand}-file-upload-button--empty`);
+    }
+  }
+  get fileInput() {
+    return this.element.querySelector("input[type='file']");
+  }
+  get uploadButton() {
+    return this.element.querySelector(uploadButtonSelector);
+  }
+  get isDragging() {
+    return this.uploadButton.classList.contains(`${config.brand}-file-upload-button--dragging`);
+  }
+  get statusTag() {
+    return this.element.querySelector("button [aria-live]");
+  }
+  get fileCount() {
+    let count = this.fileInput.files.length;
+    this.element.querySelectorAll(`select[name='${this.fileInput.name}']`).forEach(select => {
+      if (!select.closest("figure")?.file) count += 1;
+    });
+    if (!this.fileInput.multiple) count = Math.min(count, 1);
+    return count;
+  }
+}
+
+function countFileItems(items) {
+  return Array.from(items).filter(item => item.kind === "file").length;
+}
+
+function createAnnouncements() {
+  const region = document.createElement("span");
+  region.className = `${config.brand}-file-upload-announcements ${config.brand}-visually-hidden`;
+  region.setAttribute("aria-live", "assertive");
+  return region;
+}
+
+function createUploadButton(id, i18n, fileInput) {
+  const brand = config.brand;
+  const template = document.createElement("TEMPLATE");
+  template.innerHTML = `\n    <button\n        class="${brand}-file-upload-button ${brand}-file-upload-button--empty"\n        type="button"\n        id="${id}"\n        aria-labelledby="${id}-label ${id}-comma ${id}"\n      >\n      <span class="${brand}-body ${brand}-file-upload-button__status"\n            aria-live="polite">${i18n.t("noFileChosen")}</span>\n      <span class="${brand}-visually-hidden" id="${id}-comma">, </span>\n      <span class="${brand}-file-upload-button__pseudo-button-container">\n        <span class="${brand}-button\n                     ${brand}-button--secondary\n                     ${brand}-file-upload-button__pseudo-button">${i18n.t("chooseFilesButton")}</span>\n        <span class="${brand}-body ${brand}-file-upload-button__instruction">${i18n.t("dropInstruction")}</span>\n      </span>\n    </button>\n  `;
+  const button = template.content.firstElementChild;
+  const describedBy = fileInput.getAttribute("aria-describedby");
+  if (describedBy) button.setAttribute("aria-describedby", describedBy);
+  return button;
+}
+
 class ImageFieldController extends FileFieldController {
   connect() {
     super.connect();
@@ -1364,25 +1844,32 @@ class ImageFieldController extends FileFieldController {
 }
 
 const Definitions = [ {
+  identifier: "govuk-attachment",
+  controllerConstructor: AttachmentController
+}, {
   identifier: "govuk-document-field",
   controllerConstructor: DocumentFieldController
+}, {
+  identifier: "govuk-file-upload",
+  controllerConstructor: FileUploadController
 }, {
   identifier: "govuk-image-field",
   controllerConstructor: ImageFieldController
 } ];
 
-function initAll(config) {
-  let _config$scope;
-  config = typeof config !== "undefined" ? config : {};
+let options = {};
+
+function enhance($scope = document) {
   if (!isSupported()) {
     console.log(new SupportError);
     return;
   }
-  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;
+  const components = [ [ Button, options.button ], [ CharacterCount, options.characterCount ], [ Checkboxes ], [ ErrorSummary, options.errorSummary ], [ FileUpload, options.fileUpload ], [ Radios ], [ PasswordInput, options.passwordInput ] ];
   components.forEach(([Component, config]) => {
-    const $elements = $scope.querySelectorAll(`[data-module="${Component.moduleName}"]`);
+    const selector = `[data-module="${Component.moduleName}"]`;
+    const $elements = [ ...$scope instanceof Element && $scope.matches(selector) ? [ $scope ] : [], ...$scope.querySelectorAll(selector) ];
     $elements.forEach($element => {
+      if (isInitialised($element, Component.moduleName)) return;
       try {
         "defaults" in Component ? new Component($element, config) : new Component($element);
       } catch (error) {
@@ -1392,4 +1879,80 @@ function initAll(config) {
   });
 }
 
-export { Button, CharacterCount, Checkboxes, ErrorSummary, PasswordInput, Radios, Definitions as default, initAll };
+function markSupport(body) {
+  body.classList.toggle("js-enabled", true);
+  body.classList.toggle("govuk-frontend-supported", "noModule" in HTMLScriptElement.prototype);
+}
+
+function supportMarked(body) {
+  const supported = "noModule" in HTMLScriptElement.prototype;
+  return body.classList.contains("js-enabled") && body.classList.contains("govuk-frontend-supported") === supported;
+}
+
+function observe(body) {
+  new MutationObserver(() => {
+    if (supportMarked(body)) return;
+    markSupport(body);
+    enhance();
+  }).observe(body, {
+    attributes: true,
+    attributeFilter: [ "class" ]
+  });
+  new MutationObserver(mutations => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        if (node instanceof Element) enhance(node);
+      }
+    }
+  }).observe(body, {
+    childList: true,
+    subtree: true
+  });
+}
+
+function setup(body) {
+  if (!body || body.__govukFormbuilderInit) return;
+  body.__govukFormbuilderInit = true;
+  markSupport(body);
+  enhance();
+  observe(body);
+}
+
+let registered = false;
+
+function register(application = undefined) {
+  if (registered) return;
+  registered = true;
+  (application ?? Application.start()).load(Definitions);
+}
+
+function applyConfig(config$1) {
+  if (config$1.brand) config.brand = config$1.brand;
+  options = config$1;
+}
+
+function initAll(config = {}) {
+  applyConfig(config);
+  register();
+  setup(document.body);
+}
+
+let watching = false;
+
+function start(application = undefined, config = {}) {
+  applyConfig(config);
+  register(application);
+  if (!watching) {
+    watching = true;
+    new MutationObserver(() => setup(document.body)).observe(document.documentElement, {
+      childList: true
+    });
+  }
+  setup(document.body);
+}
+
+var formbuilder = {
+  start: start
+};
+
+export { Button, CharacterCount, Checkboxes, ErrorSummary, PasswordInput, Radios, formbuilder as default, initAll };