@duetds/components 4.30.1 → 4.31.0

package/lib/collection/components/duet-upload/duet-upload.js

@@ -1,1440 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
-import { createID } from "../../utils/create-id";
-import { getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
-import { DuetUploadFileList } from "./duet-upload-file-list";
-import { validateFile, validateTotalAmountIsAboveMax, validateTotalSizeIsAboveMax } from "./duet-upload-validators";
-import { getError } from "./errorcodes.utils";
-import { makeXhrRequest } from "./xhr.helpers";
-/**
- * @slot header  - named slot - to place content after description / caption
- * @slot fileheader - named slot - to place content above filelist (only displayed when filelist contains items)
- * @slot filefooter - named slot - to place content below filelist (only displayed when filelist contains items)
- */
-export class DuetUpload {
-  constructor() {
-    /**
-     * Own Properties
-     */
-    this.buttonId = createID("DuetButton");
-    this.labelId = createID("DuetLabel");
-    this.uploadId = createID("DuetUpload");
-    this.filesInProgress = new Map();
-    this.fileMaxReached = false;
-    this.bytesMaxReached = false;
-    /**
-     * State() variables
-     */
-    this.tick = Date.now();
-    /**
-     * If external is set to true, the upload component will not actually upload the files, but only keep states
-     * it will be up to you to handle the upload and return progress information to the upload-component
-     */
-    this.external = false;
-    /**
-     * Property to change descriptionDefaults defaults on the component.
-     * normally you would handle these strings on an application level and override @label when needed
-     */
-    this.buttonLabelDefaults = {
-      fi: "Lisää liite",
-      sv: "Lägg till en bilaga",
-      en: "Add an attachment",
-    };
-    /**
-     * Label of button
-     * @default { fi: "Lisää liite", sv: "Lägg till en bilaga", en: "Add an attachment" }
-     */
-    this.buttonLabel = getLocaleString(this.buttonLabelDefaults);
-    /**
-     * accessible Label of button
-     */
-    this.accessibleButtonLabel = undefined;
-    /**
-     * Theme of the input.
-     */
-    this.theme = "";
-    /**
-     * Makes the input component disabled. This prevents users from being able to
-     * interact with the upload component, and conveys its inactive state to assistive technologies.
-     */
-    this.disabled = false;
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Set whether the input is required or not. Please note that this is necessary for
-     * accessible inputs when the user is required to fill them. When using this property
-     * you need to also set “novalidate” attribute to your form element to prevent
-     * browser from displaying its own validation errors.
-     */
-    this.required = false;
-    /**
-     * Map of string that contain list of uploaded files.
-     */
-    this.files = new Map();
-    /**
-     * Property to read if filelist contains errors or not
-     */
-    this.valid = !this.required;
-    /**
-     * Property to change labelDefaults defaults on the component.
-     * normally you would handle these strings on an application level and override @label when needed
-     */
-    this.labelDefaults = {
-      fi: "Lisää liite",
-      sv: "Lägg till en bilaga",
-      en: "Add attachments",
-    };
-    /**
-     * Label for the input.
-     * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
-     */
-    this.label = getLocaleString(this.labelDefaults);
-    /**
-     * Property to change descriptionDefaults defaults on the component.
-     * normally you would handle these strings on an application level and override @label when needed
-     */
-    this.descriptionDefaults = {
-      fi: "Voit liittää {filetypes}-muotoisia tiedostoja sekä yleisimpiä videotiedostoja. Voit lähettää {maxbytes} verran tiedostoja yhdellä kertaa, ja lisätä enintään {maxfiles} liitettä kerrallaan.",
-      sv: "Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer åt gången och lägga till upp till {maxfiles} bilagor åt gången.",
-      en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.",
-    };
-    /**
-     * Description for the upload component.
-     * @default ...
-     */
-    this.description = getLocaleString(this.descriptionDefaults);
-    /**
-     * Defaults for the filelist's empty state.
-     * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
-     */
-    this.fileListEmptyDefaults = {
-      fi: "Ei vielä lisättyjä tiedostoja.",
-      sv: "Inga filer har lagts till ännu.",
-      en: "No files added yet.",
-    };
-    /**
-     * Label for the filelist's empty state.
-     * @default { fi: "Ei vielä lisättyjä tiedostoja.",sv: "Inga filer har lagts till ännu.",en: "No files added yet."}
-     */
-    this.fileListEmpty = getLocaleString(this.fileListEmptyDefaults);
-    /**
-     * Display the input in error state along with an error message.
-     */
-    this.error = "";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * if set, allows capture of media from user camera / microphone
-     * The capture attribute value is a string that specifies which camera to use for capture
-     * of image or video data, if the accept attribute indicates that the input should be of
-     * one of those types. A value of user indicates that the user-facing camera and/or
-     * microphone should be used. A value of environment specifies that the outward-facing
-     * camera and/or microphone should be used. If this attribute is missing, the user agent
-     * is free to decide on its own what to do. If the requested facing mode isn't available,
-     * the user agent may fall back to its preferred default mode.
-     */
-    this.capture = undefined;
-    /**
-     * Use maxBytes to specify the maximum size in Bytes of a file that can be uploaded.
-     */
-    this.maxBytes = 200000000;
-    /**
-     * Use maxBytesTotal to specify the maximum size in Bytes of All files combined that can be uploaded.
-     */
-    this.maxBytesTotal = undefined;
-    /**
-     * Use maxFiles to specify the maximum amount of files that can be uploaded
-     */
-    this.maxFiles = 99;
-    /**
-     * A string of commaseperated file type values that are allowed
-     * @example: .pdf,.doc,.docx
-     */
-    this.allowedExtensions = "all";
-    /**
-     * A string of commaseperated mime type values that are allowed
-     * @example: image/*,application/msword,
-     */
-    this.allowedMimetypes = "*";
-    /**
-     * Use multiple to allow the user to select multiple files when uploading
-     */
-    this.multiple = true;
-    /**
-     * Use limitSelection to enforce the value in allowedExtension & allowedMimetypes when selecting files,
-     * by default this is off, setting this to true will limit the users choices to what has been explicitly set
-     */
-    this.limitSelection = false;
-    /**
-     * Private functions
-     */
-    this.kick = () => (this.tick = Date.now()); // will trigger re-render
-    this.genHashName = () => Date.now().toString(36) + Math.random();
-    this.updateValueInMap = (item, key, value, kick = true) => {
-      const fileItem = this.files.get(item);
-      fileItem[key] = value;
-      this.files.set(item, fileItem);
-      if (kick) {
-        this.kick();
-      }
-    };
-    this.updateProgress = (ev, name) => {
-      if (ev.lengthComputable) {
-        const percentComplete = (ev.loaded / ev.total) * 100;
-        this.updateValueInMap(name, "progress", percentComplete);
-        this.onProgress(name, percentComplete, ev);
-      }
-      else {
-        console.log("cant read progress");
-      }
-    };
-    this.trackProgress = (name, remove = false) => {
-      if (remove) {
-        this.filesInProgress.delete(name);
-      }
-      else {
-        this.filesInProgress.set(name, "inprogress");
-      }
-      if (this.filesInProgress.size === 0) {
-        this.onDone();
-      }
-    };
-    this.getFilesAsArray = () => {
-      const filesInQueue = [];
-      const filesInError = [];
-      this.files.forEach(value => {
-        if (value.valid && !value.deleted) {
-          filesInQueue.push(value);
-        }
-        else if (!value.valid && !value.deleted) {
-          filesInError.push(value);
-        }
-      });
-      return { valid: filesInQueue, invalid: filesInError };
-    };
-    this.resetFormFields = () => {
-      /**
-       * You cannot modify a FileList, nor remove single items from it
-       * This completely removes all items in the FileList
-       * We reset the form fields to always be able to re-upload files
-       * and because we handle all uploads and states internally in the component (not relying on native form elements)
-       */
-      this.nativeInput.value = "";
-    };
-    this.getI18nError = (errorCode) => {
-      const errorFromJson = getError(errorCode);
-      const i18String = getLocaleString(errorFromJson.message);
-      if (i18String === "" || !i18String) {
-        return errorFromJson.system_message;
-      }
-      else {
-        return i18String;
-      }
-    };
-    /**
-     * Eventlisteners for the XHR requests
-     */
-    this.transferComplete = name => {
-      this.updateValueInMap(name, "progress", 100, false);
-      this.trackProgress(name, true);
-    };
-    this.transferDone = (xhr, name, status) => {
-      this.updateValueInMap(name, "status", status, false);
-      try {
-        const response = JSON.parse(xhr.response);
-        this.updateValueInMap(name, "url", response.url);
-      }
-      catch (e) {
-        this.updateValueInMap(name, "url", null);
-        console.error("Server did not respond with expected response {url: string}");
-      }
-      return;
-    };
-    this.transferDoneWithFailure = (xhr, name, status) => {
-      try {
-        const { error } = JSON.parse(xhr.response);
-        this.updateValueInMap(name, "error", { message: error.message, type: error.type });
-      }
-      catch (e) {
-        console.error("Server did not respond with expected response error:{message: string, type: int}");
-        this.updateValueInMap(name, "error", { type: status });
-      }
-    };
-    this.transferFailed = name => {
-      this.updateValueInMap(name, "error", getError("duet-upload-001"));
-    };
-    this.transferCanceled = name => {
-      this.files.delete(name);
-      this.validateTotals(name);
-      this.kick();
-    };
-    this.validateTotals = (name) => {
-      const isTotalSizeOverMaxSize = validateTotalSizeIsAboveMax(this.files, this.maxBytesTotal);
-      const isTotalFileAmountAboveMax = validateTotalAmountIsAboveMax(this.files, this.maxFiles);
-      if (isTotalSizeOverMaxSize && name) {
-        this.updateValueInMap(name, "error", getError("duet-upload-202"), false);
-      }
-      if (isTotalFileAmountAboveMax && name) {
-        this.updateValueInMap(name, "error", getError("duet-upload-301"), false);
-      }
-      this.bytesMaxReached = isTotalSizeOverMaxSize;
-      this.fileMaxReached = isTotalFileAmountAboveMax;
-      return {
-        bytesMaxReached: isTotalSizeOverMaxSize,
-        fileMaxReached: isTotalFileAmountAboveMax,
-      };
-    };
-    this.onDelete = (key, ev) => {
-      const deletedItem = this.files.get(key);
-      this.files.delete(key);
-      this.validateTotals();
-      this.kick();
-      if (!this.external) {
-        this.makeXHRDeleteRequest(deletedItem);
-      }
-      this.resetFormFields();
-      this.duetDelete.emit({
-        originalEvent: ev,
-        data: { deletion: deletedItem },
-        component: "duet-upload",
-      });
-    };
-    this.onCancel = (key, ev) => {
-      const cancelledItem = this.files.get(key);
-      this.files.delete(key);
-      if (!this.external) {
-        const { xhr } = cancelledItem;
-        xhr.abort();
-      }
-      else {
-        this.kick();
-      }
-      this.resetFormFields();
-      this.duetCancel.emit({
-        originalEvent: ev,
-        data: { cancelled: cancelledItem },
-        component: "duet-upload",
-      });
-    };
-    this.onUpload = (ev) => {
-      this.duetUpload.emit({
-        originalEvent: ev,
-        component: "duet-upload",
-      });
-    };
-    this.onBlur = (ev) => {
-      this.duetBlur.emit({
-        originalEvent: ev,
-        component: "duet-upload",
-      });
-    };
-    this.onProgress = (key, percentComplete, ev) => {
-      this.duetChange.emit({
-        originalEvent: ev,
-        data: {
-          key,
-          percentComplete,
-        },
-        component: "duet-upload",
-      });
-    };
-    this.onFocus = (ev) => {
-      this.duetFocus.emit({
-        originalEvent: ev,
-        component: "duet-upload",
-      });
-    };
-    this.onDone = () => {
-      this.duetDone.emit({
-        component: "duet-upload",
-        data: { files: this.files },
-      });
-    };
-    this.startUpload = async (ev) => {
-      await this.setFocus();
-      this.nativeInput.click();
-      this.onUpload(ev);
-      ev.stopPropagation();
-      ev.preventDefault();
-    };
-  }
-  watchValidHandler(newValue, oldValue) {
-    if (newValue !== oldValue) {
-      this.kick();
-    }
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-  }
-  componentWillRender() {
-    const { invalid, valid } = this.getFilesAsArray();
-    const oldValid = this.valid;
-    this.valid = invalid.length === 0 && valid.length !== 0;
-    if (this.valid !== oldValid) {
-      this.duetState.emit({
-        originalEvent: undefined,
-        data: { valid: this.valid, from: "componentWillRender" },
-        component: "duet-upload",
-      });
-    }
-  }
-  /**
-   * XHR request utilities
-   */
-  makeXHRPostRequest(data) {
-    const xhr = new XMLHttpRequest();
-    const name = data.get("name");
-    xhr.upload.addEventListener("progress", ev => {
-      this.updateProgress(ev, name);
-    });
-    xhr.upload.addEventListener("load", () => {
-      this.transferComplete(name);
-    });
-    xhr.upload.addEventListener("error", () => {
-      this.transferFailed(name);
-    });
-    xhr.upload.addEventListener("abort", () => {
-      this.transferCanceled(name);
-    });
-    return makeXhrRequest({ data, name }, { type: "POST", uri: this.uri, xhr, argument: null, headers: null }, this.transferDoneWithFailure, this.transferDone, this.trackProgress);
-  }
-  makeXHRDeleteRequest(data) {
-    const { uid, item } = data;
-    const xhr = new XMLHttpRequest();
-    // don't present server issues to user on deletes, just remove them from the visible list
-    return makeXhrRequest({ data: null, name }, {
-      type: "DELETE",
-      xhr,
-      uri: this.uri,
-      arguments: `?key=${uid}&name=${item.name}`,
-      headers: {
-        "x-fileuid": uid,
-        "x-filename": item.name,
-      },
-    }, this.transferDoneWithFailure, this.transferDone, this.trackProgress);
-  }
-  /**
-   * Component event handling.
-   */
-  async onChange(ev) {
-    var _a;
-    const selectedFiles = Array.from((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.files);
-    // FileList is a nice array like structure but
-    // to ensure uniqueness of files we use a mapping structure and
-    // key to the name (makes it easier to delete)
-    if (selectedFiles) {
-      for (const item of selectedFiles) {
-        const { valid, errorMessage, errorType, errorSystem } = validateFile(item, {
-          maxBytes: this.maxBytes,
-          allowedExtensions: this.allowedExtensions,
-          allowedMimetypes: this.allowedMimetypes,
-        });
-        const uid = this.genHashName();
-        const fileListItem = {
-          uid,
-          item: item,
-          size: item.size,
-          valid,
-          error: {
-            type: valid ? undefined : errorType,
-            message: valid ? undefined : errorMessage,
-            system_message: valid ? undefined : errorSystem,
-          },
-          progress: 0,
-          deleted: false,
-          xhr: false,
-          url: false,
-        };
-        this.files.set(item.name, fileListItem);
-        // validate that we haven't hit any maxfiles or maxbytes limits before we upload
-        const { bytesMaxReached, fileMaxReached } = this.validateTotals(item.name);
-        if (bytesMaxReached) {
-          // in case one of the global maxes have been reached, invalidate the file
-          this.updateValueInMap(item.name, "valid", false, false);
-        }
-        else if (fileMaxReached) {
-          // in case one of the global maxes have been reached, invalidate the file
-          this.updateValueInMap(item.name, "valid", false, false);
-        }
-        else if (valid && !this.external) {
-          // if all is well AND external file upload handling has not been set, start upload
-          const data = new FormData();
-          data.append("file", item);
-          data.append("uid", uid);
-          data.append("name", item.name);
-          data.append("metadata", JSON.stringify({ uid, url: this.uri, size: item.size }));
-          fileListItem.xhr = await this.makeXHRPostRequest(data);
-        }
-        // kick the stat to force update
-        this.kick();
-      }
-    }
-    // reset the form, so that a user may upload a file again (with the same name)
-    this.resetFormFields();
-    this.duetChange.emit({
-      originalEvent: ev,
-      data: { files: this.files },
-      component: "duet-upload",
-    });
-  }
-  /**
-   * Sets focus on the specified `duet-input`. Use this method instead of the global
-   * `input.focus()`.
-   */
-  async setFocus(options) {
-    if (this.nativeInput) {
-      this.nativeInput.focus(options);
-    }
-    return;
-  }
-  /**
-   * Get list of files, divided in errors and valid sections
-   */
-  async getFiles() {
-    if (!this.files || this.files.size === 0) {
-      return false;
-    }
-    return this.getFilesAsArray();
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const identifier = this.identifier || this.uploadId;
-    let caption = this.description.replace(/{maxfiles}/g, this.maxFiles.toString());
-    caption = caption.replace(/{maxbytes}/g, `${Math.floor(this.maxBytes / 1024 / 1024)} MB`);
-    caption = caption.replace(/{filetypes}/g, this.allowedExtensions.split(",").join(", "));
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } },
-      h("duet-fieldset", { label: this.label, caption: caption },
-        h("slot", { name: "header" }),
-        h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", size: "small", class: {
-            "duet-upload-filelist-empty": !this.files.size,
-            "duet-upload-filelist": true,
-            "duet-upload-filelist-filled": this.files.size,
-          }, id: this.labelId, for: identifier }, !this.files.size && this.fileListEmpty),
-        !!this.files.size && h("slot", { name: "fileheader" }),
-        h(DuetUploadFileList, { data: this.getFilesAsArray(), onDelete: this.onDelete, onCancel: this.onCancel, getError: this.getI18nError },
-          h("li", null, "testing something")),
-        !!this.files.size && h("slot", { name: "filefooter" }),
-        h("duet-spacer", { size: "large" }),
-        h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle" }, this.buttonLabel),
-        h("duet-spacer", { size: "medium" }),
-        (this.fileMaxReached || this.bytesMaxReached) && (h("duet-alert", null,
-          this.fileMaxReached && this.getI18nError("duet-upload-301"),
-          this.bytesMaxReached && this.getI18nError("duet-upload-202"))),
-        h("duet-spacer", { size: "medium" }),
-        h("duet-visually-hidden", null,
-          h("input", { ref: input => {
-              this.nativeInput = input;
-            }, accept: this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
-              "duet-upload": true,
-            }, disabled: this.disabled, "aria-hidden": "true", required: this.required, name: this.name, id: this.identifier, multiple: this.multiple, capture: "user" })))));
-  }
-  static get is() { return "duet-upload"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["duet-upload.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["duet-upload.css"]
-  }; }
-  static get properties() { return {
-    "accessibleActiveDescendant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates the id of a related component\u2019s visually focused element."
-      },
-      "attribute": "accessible-active-descendant",
-      "reflect": false
-    },
-    "accessibleDescribedBy": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates the id of a component that describes the upload component."
-      },
-      "attribute": "accessible-described-by",
-      "reflect": false
-    },
-    "accessibleControls": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use this prop to add an aria-controls attribute. Use the attribute to\nindicate the id of a component controlled by this component."
-      },
-      "attribute": "accessible-controls",
-      "reflect": false
-    },
-    "accessibleOwns": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates the id of a component owned by the input."
-      },
-      "attribute": "accessible-owns",
-      "reflect": false
-    },
-    "external": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If external is set to true, the upload component will not actually upload the files, but only keep states\nit will be up to you to handle the upload and return progress information to the upload-component"
-      },
-      "attribute": "external",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "uri": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Endpoint URI that is capable of receiving the files"
-      },
-      "attribute": "uri",
-      "reflect": false
-    },
-    "caption": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Caption (underneath label) that can be set as a way of adding extra information"
-      },
-      "attribute": "caption",
-      "reflect": false
-    },
-    "buttonLabelDefaults": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
-        "references": {
-          "DuetLangObject": {
-            "location": "import",
-            "path": "../../utils/language-utils"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Property to change descriptionDefaults defaults on the component.\nnormally you would handle these strings on an application level and override @label when needed"
-      },
-      "defaultValue": "{\n    fi: \"Lis\u00E4\u00E4 liite\",\n    sv: \"L\u00E4gg till en bilaga\",\n    en: \"Add an attachment\",\n  }"
-    },
-    "buttonLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "{ fi: \"Lis\u00E4\u00E4 liite\", sv: \"L\u00E4gg till en bilaga\", en: \"Add an attachment\" }",
-            "name": "default"
-          }],
-        "text": "Label of button"
-      },
-      "attribute": "button-label",
-      "reflect": false,
-      "defaultValue": "getLocaleString(this.buttonLabelDefaults)"
-    },
-    "accessibleButtonLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "accessible Label of button"
-      },
-      "attribute": "accessible-button-label",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "theme": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "DuetTheme",
-        "resolved": "\"\" | \"default\" | \"turva\"",
-        "references": {
-          "DuetTheme": {
-            "location": "import",
-            "path": "../../common-types"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Theme of the input."
-      },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Makes the input component disabled. This prevents users from being able to\ninteract with the upload component, and conveys its inactive state to assistive technologies."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "identifier": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Adds a unique identifier for the upload component."
-      },
-      "attribute": "identifier",
-      "reflect": false
-    },
-    "margin": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetMargin",
-        "resolved": "\"auto\" | \"none\"",
-        "references": {
-          "DuetMargin": {
-            "location": "import",
-            "path": "../../common-types"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Controls the margin of the component."
-      },
-      "attribute": "margin",
-      "reflect": false,
-      "defaultValue": "\"auto\""
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set whether the input is required or not. Please note that this is necessary for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set \u201Cnovalidate\u201D attribute to your form element to prevent\nbrowser from displaying its own validation errors."
-      },
-      "attribute": "required",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "files": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "StringMap",
-        "resolved": "StringMap",
-        "references": {
-          "StringMap": {
-            "location": "local"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Map of string that contain list of uploaded files."
-      },
-      "defaultValue": "new Map()"
-    },
-    "valid": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Property to read if filelist contains errors or not"
-      },
-      "attribute": "valid",
-      "reflect": true,
-      "defaultValue": "!this.required"
-    },
-    "labelDefaults": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
-        "references": {
-          "DuetLangObject": {
-            "location": "import",
-            "path": "../../utils/language-utils"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Property to change labelDefaults defaults on the component.\nnormally you would handle these strings on an application level and override @label when needed"
-      },
-      "defaultValue": "{\n    fi: \"Lis\u00E4\u00E4 liite\",\n    sv: \"L\u00E4gg till en bilaga\",\n    en: \"Add attachments\",\n  }"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "{ fi: \"Lis\u00E4\u00E4 liite\",sv: \"L\u00E4gg till en bilaga\",en: \"Add attachments\"}",
-            "name": "default"
-          }],
-        "text": "Label for the input."
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "getLocaleString(this.labelDefaults)"
-    },
-    "descriptionDefaults": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
-        "references": {
-          "DuetLangObject": {
-            "location": "import",
-            "path": "../../utils/language-utils"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Property to change descriptionDefaults defaults on the component.\nnormally you would handle these strings on an application level and override @label when needed"
-      },
-      "defaultValue": "{\n    fi: \"Voit liitt\u00E4\u00E4 {filetypes}-muotoisia tiedostoja sek\u00E4 yleisimpi\u00E4 videotiedostoja. Voit l\u00E4hett\u00E4\u00E4 {maxbytes} verran tiedostoja yhdell\u00E4 kertaa, ja lis\u00E4t\u00E4 enint\u00E4\u00E4n {maxfiles} liitett\u00E4 kerrallaan.\",\n    sv: \"Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer \u00E5t g\u00E5ngen och l\u00E4gga till upp till {maxfiles} bilagor \u00E5t g\u00E5ngen.\",\n    en: \"You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.\",\n  }"
-    },
-    "description": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "...",
-            "name": "default"
-          }],
-        "text": "Description for the upload component."
-      },
-      "attribute": "description",
-      "reflect": false,
-      "defaultValue": "getLocaleString(this.descriptionDefaults)"
-    },
-    "fileListEmptyDefaults": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
-        "references": {
-          "DuetLangObject": {
-            "location": "import",
-            "path": "../../utils/language-utils"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "{ fi: \"Lis\u00E4\u00E4 liite\",sv: \"L\u00E4gg till en bilaga\",en: \"Add attachments\"}",
-            "name": "default"
-          }],
-        "text": "Defaults for the filelist's empty state."
-      },
-      "defaultValue": "{\n    fi: \"Ei viel\u00E4 lis\u00E4ttyj\u00E4 tiedostoja.\",\n    sv: \"Inga filer har lagts till \u00E4nnu.\",\n    en: \"No files added yet.\",\n  }"
-    },
-    "fileListEmpty": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "{ fi: \"Ei viel\u00E4 lis\u00E4ttyj\u00E4 tiedostoja.\",sv: \"Inga filer har lagts till \u00E4nnu.\",en: \"No files added yet.\"}",
-            "name": "default"
-          }],
-        "text": "Label for the filelist's empty state."
-      },
-      "attribute": "file-list-empty",
-      "reflect": false,
-      "defaultValue": "getLocaleString(this.fileListEmptyDefaults)"
-    },
-    "error": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Display the input in error state along with an error message."
-      },
-      "attribute": "error",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "labelHidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Visually hide the label, but still show it to screen readers."
-      },
-      "attribute": "label-hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Name of the upload component."
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "capture": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "string | boolean",
-        "resolved": "boolean | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "if set, allows capture of media from user camera / microphone\nThe capture attribute value is a string that specifies which camera to use for capture\nof image or video data, if the accept attribute indicates that the input should be of\none of those types. A value of user indicates that the user-facing camera and/or\nmicrophone should be used. A value of environment specifies that the outward-facing\ncamera and/or microphone should be used. If this attribute is missing, the user agent\nis free to decide on its own what to do. If the requested facing mode isn't available,\nthe user agent may fall back to its preferred default mode."
-      },
-      "attribute": "capture",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "maxBytes": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use maxBytes to specify the maximum size in Bytes of a file that can be uploaded."
-      },
-      "attribute": "max-bytes",
-      "reflect": false,
-      "defaultValue": "200000000"
-    },
-    "maxBytesTotal": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use maxBytesTotal to specify the maximum size in Bytes of All files combined that can be uploaded."
-      },
-      "attribute": "max-bytes-total",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "maxFiles": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use maxFiles to specify the maximum amount of files that can be uploaded"
-      },
-      "attribute": "max-files",
-      "reflect": false,
-      "defaultValue": "99"
-    },
-    "allowedExtensions": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": ": .pdf,.doc,.docx",
-            "name": "example"
-          }],
-        "text": "A string of commaseperated file type values that are allowed"
-      },
-      "attribute": "allowed-extensions",
-      "reflect": false,
-      "defaultValue": "\"all\""
-    },
-    "allowedMimetypes": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": ": image/*,application/msword,",
-            "name": "example"
-          }],
-        "text": "A string of commaseperated mime type values that are allowed"
-      },
-      "attribute": "allowed-mimetypes",
-      "reflect": false,
-      "defaultValue": "\"*\""
-    },
-    "multiple": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use multiple to allow the user to select multiple files when uploading"
-      },
-      "attribute": "multiple",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "limitSelection": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use limitSelection to enforce the value in allowedExtension & allowedMimetypes when selecting files,\nby default this is off, setting this to true will limit the users choices to what has been explicitly set"
-      },
-      "attribute": "limit-selection",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Value of the input."
-      },
-      "attribute": "value",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "tick": {}
-  }; }
-  static get events() { return [{
-      "method": "duetChange",
-      "name": "duetChange",
-      "bubbles": false,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the value has changed."
-      },
-      "complexType": {
-        "original": "DuetUploadEvent",
-        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-upload\"; }",
-        "references": {
-          "DuetUploadEvent": {
-            "location": "local"
-          }
-        }
-      }
-    }, {
-      "method": "duetBlur",
-      "name": "duetBlur",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the input loses focus."
-      },
-      "complexType": {
-        "original": "DuetUploadEvent",
-        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-upload\"; }",
-        "references": {
-          "DuetUploadEvent": {
-            "location": "local"
-          }
-        }
-      }
-    }, {
-      "method": "duetFocus",
-      "name": "duetFocus",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the input has focus."
-      },
-      "complexType": {
-        "original": "DuetUploadEvent",
-        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-upload\"; }",
-        "references": {
-          "DuetUploadEvent": {
-            "location": "local"
-          }
-        }
-      }
-    }, {
-      "method": "duetDone",
-      "name": "duetDone",
-      "bubbles": false,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the current upload batch finishes"
-      },
-      "complexType": {
-        "original": "DuetUploadEvent",
-        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-upload\"; }",
-        "references": {
-          "DuetUploadEvent": {
-            "location": "local"
-          }
-        }
-      }
-    }, {
-      "method": "duetState",
-      "name": "duetState",
-      "bubbles": false,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the current validation state changes internally"
-      },
-      "complexType": {
-        "original": "DuetUploadEvent",
-        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-upload\"; }",
-        "references": {
-          "DuetUploadEvent": {
-            "location": "local"
-          }
-        }
-      }
-    }, {
-      "method": "duetDelete",
-      "name": "duetDelete",
-      "bubbles": false,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when a user clicks delete to delete an uploaded file, or a file entry with error"
-      },
-      "complexType": {
-        "original": "DuetUploadEvent",
-        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-upload\"; }",
-        "references": {
-          "DuetUploadEvent": {
-            "location": "local"
-          }
-        }
-      }
-    }, {
-      "method": "duetCancel",
-      "name": "duetCancel",
-      "bubbles": false,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when a user clicks cancel on an upload in progress"
-      },
-      "complexType": {
-        "original": "DuetUploadEvent",
-        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-upload\"; }",
-        "references": {
-          "DuetUploadEvent": {
-            "location": "local"
-          }
-        }
-      }
-    }, {
-      "method": "duetProgress",
-      "name": "duetProgress",
-      "bubbles": false,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the file progress is updated."
-      },
-      "complexType": {
-        "original": "DuetUploadEvent",
-        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-upload\"; }",
-        "references": {
-          "DuetUploadEvent": {
-            "location": "local"
-          }
-        }
-      }
-    }, {
-      "method": "duetUpload",
-      "name": "duetUpload",
-      "bubbles": false,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the user clicks the upload button"
-      },
-      "complexType": {
-        "original": "DuetUploadEvent",
-        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-upload\"; }",
-        "references": {
-          "DuetUploadEvent": {
-            "location": "local"
-          }
-        }
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "(options?: FocusOptions) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "FocusOptions": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the specified `duet-input`. Use this method instead of the global\n`input.focus()`.",
-        "tags": []
-      }
-    },
-    "getFiles": {
-      "complexType": {
-        "signature": "() => Promise<false | { valid: any[]; invalid: any[]; }>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<false | { valid: any[]; invalid: any[]; }>"
-      },
-      "docs": {
-        "text": "Get list of files, divided in errors and valid sections",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "valid",
-      "methodName": "watchValidHandler"
-    }]; }
-}