@duetds/components 4.32.0 → 4.33.0

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

@@ -0,0 +1,1838 @@
+/*!
+ * 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 { debounce } from "../../utils/js-utils";
+import { getLocaleString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { ErrorItem } from "./duet-upload-editable-item-error";
+import { ProgressItem } from "./duet-upload-editable-item-inprogres";
+import { SuccessItem } from "./duet-upload-editable-item-success";
+import { validateFile, validateTotalAmountIsAboveMax, validateTotalSizeIsAboveMax } from "./duet-upload-validators";
+import { getError, getI18nError } 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 filelist - named slot - should always contain a configurable duet-editable-table or a component that exposes the same functionality
+ * @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.editableTableId = createID("DuetEditableTable");
+    this.filesInProgress = new Map();
+    this.fileMaxReached = false;
+    this.bytesMaxReached = false;
+    //region Internally exposed properties
+    /**
+     * Properties
+     */
+    this.DefaultGroups = {
+      inprogress: "inprogress",
+      success: "success",
+      failure: "failure",
+    };
+    /**
+     * 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;
+    /**
+     * If set the upload component will not display an upload button, you will have to create on yourself
+     * and call the exposed methods startUpload
+     */
+    this.hideButton = false;
+    /**
+     * Default actions added to all files
+     */
+    this.actions = [
+      {
+        icon: "action-delete",
+        color: "color-danger",
+        color_hover: "category-home",
+        id: "delete",
+        map: ["success", "failure"],
+        label: {
+          fi: "Poista tiedosto",
+          en: "Poista tiedosto",
+          sv: "Ta bort filen",
+        },
+      },
+      {
+        icon: "navigation-close",
+        color: "primary",
+        color_hover: "category-home",
+        id: "cancel",
+        map: ["inprogress"],
+        label: {
+          fi: "Keskeytä lähetys",
+          en: "Cancel the upload",
+          sv: "Stop överföringen",
+        },
+      },
+    ];
+    /**
+     * If enabled the filelist will create links on successfully uploaded items,
+     * this requires the server can respond with link URIs in the correct format
+     */
+    this.showLinks = false;
+    /**
+     * Property to change the aria upload progress text read aloud by screenreaders
+     * @default {
+        fi: "Lisää liite",
+        sv: "Lägg till en bilaga",
+        en: "Choose files",
+      }
+     */
+    this.statusLabelDefaults = {
+      fi: {
+        inProgress: "Lähetetään {filesUploaded} lähetettävästä {filesTotal} tiedostosta",
+        inProgressWithErrors: "Lähetetään {filesInProgress} tiedostoa, lähetetty {filesUploaded} lähetettävästä {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheitä",
+        done: "Kaikki {filesTotal} tiedostoa lähetetty onnistuneesti",
+        doneWithErrors: "Lähetys valmis, {filesUploaded} tiedostoa on lähetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheitä",
+        files: "tiedostot",
+        file: "tiedosto",
+      },
+      sv: {
+        inProgress: "Adding {filesUploaded} of {filesTotal}",
+        inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
+        done: "Alla {filesTotal} har lagts till",
+        doneWithErrors: "Handling slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
+        files: "filer",
+        file: "fil",
+      },
+      en: {
+        inProgress: "Adding {filesUploaded} of {filesTotal}",
+        inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
+        done: "All {filesTotal} added successfully",
+        doneWithErrors: "Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors",
+        files: "tiedostoa",
+        file: "tiedosto",
+      },
+    };
+    /**
+     * Strings used for the status aria-label
+     */
+    this.statusMessageLabel = getLocaleString(this.statusLabelDefaults);
+    /**
+     * Property to change descriptionDefaults defaults on the component.
+     * normally you would handle these strings on an application level and override @label when needed
+     * @default {
+        fi: "Lisää liite",
+        sv: "Lägg till en bilaga",
+        en: "Add an attachment",
+      }
+     */
+    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;
+    /**
+     * Visually hides the groups labels in the editable table list used to display the list of files
+     */
+    this.hideGroups = 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
+     * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
+     */
+    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
+     * @default {
+        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.",
+      }
+     */
+    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 {
+        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.",
+      }
+     */
+    this.description = getLocaleString(this.descriptionDefaults);
+    /**
+     * Defaults 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.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 = "";
+    /**
+     * 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;
+    //region Private functions
+    /**
+     * Private functions
+     */
+    this.listenForActionEvents = () => {
+      this.element.addEventListener("duetEditableItemAction", (e) => {
+        const detail = e.detail;
+        const { action, keyName, originalEvent } = detail;
+        switch (action) {
+          case "delete":
+            this.onDelete(keyName, originalEvent);
+            break;
+          case "cancel":
+            this.onCancel(keyName, originalEvent);
+            break;
+          default:
+          // code block
+        }
+      });
+    };
+    this.verifyValidity = () => {
+      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",
+        });
+      }
+    };
+    this.getGroupFromItemData = (item) => {
+      if (item.valid && item.progress === 100) {
+        // if the item has a group, move the file to that group instead
+        // of into the standard success group
+        if (item.group) {
+          return item.group;
+        }
+        return this.DefaultGroups.success;
+      }
+      else if (item.progress > 0 && item.progress !== 100) {
+        return this.DefaultGroups.inprogress;
+      }
+      else if (!item.valid) {
+        return this.DefaultGroups.failure;
+      }
+      else if (item.group) {
+        return item.group;
+      }
+      else {
+        return "none";
+      }
+    };
+    this.getItemHTMLFromItemData = (data, group) => {
+      if (group === this.DefaultGroups.success) {
+        return h(SuccessItem, { data: data, showLinks: this.showLinks });
+      }
+      else if (group === this.DefaultGroups.inprogress) {
+        return h(ProgressItem, { progress: data.progress, name: data.item.name });
+      }
+      else if (group === this.DefaultGroups.failure) {
+        return h(ErrorItem, { data: data });
+      }
+      else if (data.group) {
+        return data.html;
+      }
+      else {
+        return "none";
+      }
+    };
+    this.convertToDuetEditableTableItems = () => {
+      // we're always recreating the map - in order to force an update down stream.
+      const itemData = new Map();
+      //walk the files Map and convert to DuetEditableTableItemData
+      this.files.forEach((data, key, _originalMap) => {
+        const group = this.getGroupFromItemData(data);
+        const item = this.getItemHTMLFromItemData(data, group);
+        itemData.set(key, {
+          uid: data.uid,
+          item,
+          group,
+        });
+      });
+      return itemData;
+    };
+    this.kick = debounce(() => {
+      this.tick = Date.now();
+    }, 30); // 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) => {
+      console.log(this.filesInProgress.size);
+      const updateProgressHelper = percentComplete => {
+        this.updateValueInMap(name, "progress", percentComplete);
+        this.onProgress(name, percentComplete, ev);
+      };
+      if (ev.lengthComputable) {
+        const percentComplete = (ev.loaded / ev.total) * 100;
+        updateProgressHelper(percentComplete);
+      }
+      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.startUpload = async (ev, metaData = undefined) => {
+      await this.setFocus();
+      this.metaData = metaData;
+      this.nativeInput.click();
+      this.onUpload(ev, metaData);
+      ev.stopPropagation();
+      ev.preventDefault();
+      return;
+    };
+    //endregion
+    //region Eventlisteners for the XHR requests
+    /**
+     * 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);
+      this.updateValueInMap(name, "uploaded", true, 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 }, false);
+      }
+      catch (e) {
+        console.error("Server did not respond with expected response error:{message: string, type: int}");
+        this.updateValueInMap(name, "error", { type: status }, false);
+      }
+      this.updateValueInMap(name, "valid", false, true);
+    };
+    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();
+      this.duetDelete.emit({
+        originalEvent: ev,
+        data: { deletion: deletedItem },
+        component: "duet-upload",
+      });
+      if (!this.external) {
+        this.makeXHRDeleteRequest(deletedItem);
+      }
+      this.resetFormFields();
+    };
+    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, metaData) => {
+      this.duetUpload.emit({
+        originalEvent: ev,
+        metaData,
+        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 },
+      });
+    };
+  }
+  watchValidHandler(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this.kick();
+    }
+  }
+  //endregion
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.listenForActionEvents();
+  }
+  componentWillRender() {
+    // listen to the events from the component
+    this.verifyValidity();
+  }
+  //endregion
+  //region XHR requests
+  /**
+   * 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({
+      payload: { data, name },
+      options: { type: "POST", uri: this.uri, xhr, argument: null, headers: null },
+      onFailure: this.transferDoneWithFailure,
+      onSuccess: this.transferDone,
+      onProgress: 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({
+      payload: { data: null, name },
+      options: {
+        type: "DELETE",
+        xhr,
+        uri: this.uri,
+        arguments: `?key=${uid}&name=${item.name}`,
+        headers: {
+          "x-fileuid": uid,
+          "x-filename": item.name,
+        },
+      },
+      onFailure: this.transferDoneWithFailure,
+      onSuccess: this.transferDone,
+      onProgress: this.trackProgress,
+    });
+  }
+  //endregion
+  //region EventHandlers
+  /**
+   * 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 as well)
+    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,
+          meta: this.metaData,
+          uploaded: false,
+          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, meta: fileListItem.meta }));
+          try {
+            fileListItem.xhr = await this.makeXHRPostRequest(data);
+          }
+          catch (e) {
+            // in case one of the global maxes have been reached, invalidate the file
+            this.updateValueInMap(item.name, "valid", false, false);
+          }
+        }
+        // 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();
+    // reset the internal metaData state
+    this.metaData = undefined;
+    this.duetChange.emit({
+      originalEvent: ev,
+      data: { files: this.files },
+      component: "duet-upload",
+    });
+  }
+  //endregion
+  /**
+   * 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;
+  }
+  /**
+   * Method for invoking the upload sequence
+   */
+  async upload(metaData = undefined) {
+    await this.setFocus();
+    this.metaData = metaData;
+    this.nativeInput.click();
+    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();
+  }
+  /**
+   * Convenience method for updating a of an item in the files attribute
+   */
+  async updateValue(item, key, value) {
+    this.updateValueInMap(item, key, value);
+  }
+  /**
+   * 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" }),
+        !this.files.size && (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.fileListEmpty)),
+        !!this.files.size && h("slot", { name: "fileheader" }),
+        !!this.files.size && (h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.statusMessageLabel })),
+        !!this.files.size && (h("duet-editable-table", { "aria-live": "polite", "aria-relevant": "removals", accessibleRole: "log", id: this.editableTableId, groups: this.groups, actions: this.actions, hideGroups: this.hideGroups, items: this.convertToDuetEditableTableItems() })),
+        !!this.files.size && h("slot", { name: "filefooter" }),
+        h("duet-spacer", { size: "large" }),
+        !this.hideButton && (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 && getI18nError("duet-upload-301"),
+          this.bytesMaxReached && 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"
+    },
+    "hideButton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If set the upload component will not display an upload button, you will have to create on yourself\nand call the exposed methods startUpload"
+      },
+      "attribute": "hide-upload-button",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "actions": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetEditableTableActions | string",
+        "resolved": "string | { icon: string; color: string; color_hover: string; id: string; map?: string[]; label?: DuetLangObject; }[]",
+        "references": {
+          "DuetEditableTableActions": {
+            "location": "import",
+            "path": "../duet-editable-table/duet-editable-table-item"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Default actions added to all files"
+      },
+      "attribute": "actions",
+      "reflect": false,
+      "defaultValue": "[\n    {\n      icon: \"action-delete\",\n      color: \"color-danger\",\n      color_hover: \"category-home\",\n      id: \"delete\",\n      map: [\"success\", \"failure\"],\n      label: {\n        fi: \"Poista tiedosto\",\n        en: \"Poista tiedosto\",\n        sv: \"Ta bort filen\",\n      },\n    },\n    {\n      icon: \"navigation-close\",\n      color: \"primary\",\n      color_hover: \"category-home\",\n      id: \"cancel\",\n      map: [\"inprogress\"],\n      label: {\n        fi: \"Keskeyt\u00E4 l\u00E4hetys\",\n        en: \"Cancel the upload\",\n        sv: \"Stop \u00F6verf\u00F6ringen\",\n      },\n    },\n  ]"
+    },
+    "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
+    },
+    "showLinks": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If enabled the filelist will create links on successfully uploaded items,\nthis requires the server can respond with link URIs in the correct format"
+      },
+      "attribute": "show-links",
+      "reflect": false,
+      "defaultValue": "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
+    },
+    "statusLabelDefaults": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{\nfi: \"Lis\u00E4\u00E4 liite\",\nsv: \"L\u00E4gg till en bilaga\",\nen: \"Choose files\",\n}"
+          }],
+        "text": "Property to change the aria upload progress text read aloud by screenreaders"
+      },
+      "attribute": "status-label-default",
+      "reflect": false,
+      "defaultValue": "{\n    fi: {\n      inProgress: \"L\u00E4hetet\u00E4\u00E4n {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta\",\n      inProgressWithErrors:\n        \"L\u00E4hetet\u00E4\u00E4n {filesInProgress} tiedostoa, l\u00E4hetetty {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheit\u00E4\",\n      done: \"Kaikki {filesTotal} tiedostoa l\u00E4hetetty onnistuneesti\",\n      doneWithErrors:\n        \"L\u00E4hetys valmis, {filesUploaded} tiedostoa on l\u00E4hetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheit\u00E4\",\n      files: \"tiedostot\",\n      file: \"tiedosto\",\n    },\n    sv: {\n      inProgress: \"Adding {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\n      done: \"Alla {filesTotal} har lagts till\",\n      doneWithErrors: \"Handling slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\n      files: \"filer\",\n      file: \"fil\",\n    },\n    en: {\n      inProgress: \"Adding {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\n      done: \"All {filesTotal} added successfully\",\n      doneWithErrors: \"Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors\",\n      files: \"tiedostoa\",\n      file: \"tiedosto\",\n    },\n  }"
+    },
+    "statusMessageLabel": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "StatusMessage",
+        "resolved": "{ inProgress: string; inProgressWithErrors: string; done: string; doneWithErrors: string; file: string; files: string; }",
+        "references": {
+          "StatusMessage": {
+            "location": "import",
+            "path": "./duet-upload-aria-status"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Strings used for the status aria-label"
+      },
+      "defaultValue": "getLocaleString(this.statusLabelDefaults)"
+    },
+    "buttonLabelDefaults": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{\nfi: \"Lis\u00E4\u00E4 liite\",\nsv: \"L\u00E4gg till en bilaga\",\nen: \"Add an attachment\",\n}"
+          }],
+        "text": "Property to change descriptionDefaults defaults on the component.\nnormally you would handle these strings on an application level and override @label when needed"
+      },
+      "attribute": "button-label-default",
+      "reflect": false,
+      "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": [{
+            "name": "default",
+            "text": "{ fi: \"Lis\u00E4\u00E4 liite\", sv: \"L\u00E4gg till en bilaga\", en: \"Add an attachment\" }"
+          }],
+        "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"
+    },
+    "groups": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetEditableTableGroupNames | string",
+        "resolved": "string | { id: string; label: DuetLangObject; actionLabel?: DuetLangObject; }[]",
+        "references": {
+          "DuetEditableTableGroupNames": {
+            "location": "import",
+            "path": "../duet-editable-table/duet-editable-table"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "required",
+            "text": undefined
+          }, {
+            "name": "example",
+            "text": "[{ id: \"success\", label: {fi: \"Onnistunut\", en: \"Success\", sv: \"Alt klart\", }}]"
+          }],
+        "text": "Array of group names that you want the editable table used to display files to display"
+      },
+      "attribute": "groups",
+      "reflect": false
+    },
+    "hideGroups": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Visually hides the groups labels in the editable table list used to display the list of files"
+      },
+      "attribute": "hide-table-labels",
+      "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": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{ fi: \"Lis\u00E4\u00E4 liite\",sv: \"L\u00E4gg till en bilaga\",en: \"Add attachments\"}"
+          }],
+        "text": "Property to change labelDefaults defaults on the component.\nnormally you would handle these strings on an application level and override @label when needed"
+      },
+      "attribute": "label-default",
+      "reflect": false,
+      "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": [{
+            "name": "default",
+            "text": "{ fi: \"Lis\u00E4\u00E4 liite\",sv: \"L\u00E4gg till en bilaga\",en: \"Add attachments\"}"
+          }],
+        "text": "Label for the input."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "getLocaleString(this.labelDefaults)"
+    },
+    "descriptionDefaults": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{\nfi: \"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.\",\nsv: \"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.\",\nen: \"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}"
+          }],
+        "text": "Property to change descriptionDefaults defaults on the component.\nnormally you would handle these strings on an application level and override @label when needed"
+      },
+      "attribute": "description-default",
+      "reflect": false,
+      "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": [{
+            "name": "default",
+            "text": "{\nfi: \"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.\",\nsv: \"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.\",\nen: \"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}"
+          }],
+        "text": "Description for the upload component."
+      },
+      "attribute": "description",
+      "reflect": false,
+      "defaultValue": "getLocaleString(this.descriptionDefaults)"
+    },
+    "fileListEmptyDefaults": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{\nfi: \"Ei viel\u00E4 lis\u00E4ttyj\u00E4 tiedostoja.\",\nsv: \"Inga filer har lagts till \u00E4nnu.\",\nen: \"No files added yet.\",\n}"
+          }],
+        "text": "Defaults for the filelist's empty state."
+      },
+      "attribute": "list-empty-default",
+      "reflect": false,
+      "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": [{
+            "name": "default",
+            "text": "{ fi: \"Ei viel\u00E4 lis\u00E4ttyj\u00E4 tiedostoja.\",sv: \"Inga filer har lagts till \u00E4nnu.\",en: \"No files added yet.\"}"
+          }],
+        "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": "\"\""
+    },
+    "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
+    },
+    "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": [{
+            "name": "example",
+            "text": ": .pdf,.doc,.docx"
+          }],
+        "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": [{
+            "name": "example",
+            "text": ": image/*,application/msword,"
+          }],
+        "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>; metaData?: 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>; metaData?: 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>; metaData?: 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>; metaData?: 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>; metaData?: 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>; metaData?: 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>; metaData?: 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>; metaData?: 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>; metaData?: 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": []
+      }
+    },
+    "upload": {
+      "complexType": {
+        "signature": "(metaData?: any | undefined) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Method for invoking the upload sequence",
+        "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": []
+      }
+    },
+    "updateValue": {
+      "complexType": {
+        "signature": "(item: string, key: string, value: any) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Convenience method for updating a of an item in the files attribute",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "valid",
+      "methodName": "watchValidHandler"
+    }]; }
+}