@duetds/components 8.0.6 → 8.1.0

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

@@ -22,2317 +22,2323 @@ import { makeXhrRequest, } from "./xhr.helpers";
  * @part ${this.identifier}-error-notification : duet-upload-error-notification - named part - can be used to style any error notifications occurring internally
  */
 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;
-    this.filesToUploadExceedsLimit = false;
-    this.filesToUploadTotalSizeIsAboveMax = false;
-    this.internalStatusMessageLabel = undefined;
-    this.itemRefs = new Map();
-    /**
-     * Properties
-     */
-    this.DefaultGroups = {
-      inprogress: "inprogress",
-      success: "success",
-      pending: "pending",
-      failure: "failure",
-    };
-    this.kick = debounce(() => {
-      this.tick = Date.now();
-    }, 30); // will trigger re-render
-    this.categoryLabel = {
-      en: "Category",
-      sv: "Filtyp",
-      fi: "Tiedostotyyppi",
-    };
-    /**
-     * Private functions
-     */
-    this.listenForActionEvents = () => {
-      this.element.addEventListener("duetActionEvent", (e) => {
-        const detail = e.detail;
-        const { action, id, originalEvent } = detail;
-        switch (action) {
-          case "delete":
-            this.onDelete(id, originalEvent);
-            break;
-          case "cancel":
-            this.onCancel(id, 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
-        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.pending) {
-        return this.DefaultGroups.pending;
-      }
-      else if (item.group) {
-        return item.group;
-      }
-      else {
-        return "none";
-      }
-    };
-    this.mapFilesToUploadItems = (data, group, showCategory, filteredActions) => {
-      if (group === this.DefaultGroups.success) {
-        return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "success", data: data, showLinks: this.showLinks, linkClickEvent: this.emitEvent ? this.linkClick : undefined, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
-            this.itemRefs.set(data.uid, item);
-          } }));
-      }
-      else if (group === this.DefaultGroups.inprogress) {
-        return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "inprogress", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
-            this.itemRefs.set(data.uid, item);
-          } }));
-      }
-      else if (group === this.DefaultGroups.pending) {
-        return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "pending", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
-            this.itemRefs.set(data.uid, item);
-          } }));
-      }
-      else if (group === this.DefaultGroups.failure) {
-        return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "failure", data: data, showLinks: this.showLinks, errorCodes: this.errorCodes, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
-            this.itemRefs.set(data.uid, item);
-          } }));
-      }
-      else if (data.group) {
-        return data.html;
-      }
-      else {
-        return "none";
-      }
-    };
-    this.genHashName = () => Date.now().toString(36) + Math.random();
-    this.updateValueInMap = (item, key, value, kick = true) => {
-      try {
-        const fileItem = this.files.get(item);
-        fileItem[key] = value;
-        this.files.set(item, fileItem);
-        if (this.external && key !== "url") {
-          this.trackProgress(item, key === "uploaded");
-        }
-      }
-      catch (e) {
-        // if a users tries to update entries on a file that doesn't exist,
-        // this will blow up - so we're swallowing the errors here on purpose
-        // console.warn("operation on missing items")
-      }
-      if (kick) {
-        this.kick();
-      }
-    };
-    this.updateProgress = (ev, name) => {
-      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)
-       */
-      /* TODO: it may be a good idea to just update the list so that this always matches what is in the files map,
-       * TODO: this would remove the capability of Re-uploading, unless we can catch and remove the user file from the form filelist before the upload is canceled by the browser
-       * TODO: but for now we'll just reset the form fields
-       */
-      this.nativeInput.value = "";
-    };
-    this.startUpload = async (ev, metaData = undefined) => {
-      // validate that we haven't hit any maxfiles or maxbytes limits before we upload
-      const { bytesMaxReached, fileMaxReached } = this.validateTotals();
-      if (bytesMaxReached || fileMaxReached) {
-        this.kick();
-        return;
-      }
-      this.metaData = metaData;
-      this.nativeInput.click();
-      this.onUpload(ev, metaData);
-      ev.stopPropagation();
-      ev.preventDefault();
-      return;
-    };
-    /**
-     * 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", getI18nError("duet-upload-001", this.errorCodes));
-    };
-    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", getI18nError("duet-upload-202", this.errorCodes), false);
-      }
-      if (isTotalFileAmountAboveMax && name) {
-        this.updateValueInMap(name, "error", getI18nError("duet-upload-301", this.errorCodes), false);
-      }
-      this.bytesMaxReached = isTotalSizeOverMaxSize;
-      this.fileMaxReached = isTotalFileAmountAboveMax;
-      return {
-        bytesMaxReached: isTotalSizeOverMaxSize,
-        fileMaxReached: isTotalFileAmountAboveMax,
-      };
-    };
-    this.uploadFile = async (fileListItem, force = false, key) => {
-      if (!force && this.deferUpload) {
-        this.updateValueInMap(fileListItem.item.name, "pending", true, false);
-        this.updateValueInMap(fileListItem.item.name, "group", "pending", true);
-      }
-      else if (force) {
-        this.updateValueInMap(fileListItem.item.name, "pending", false, false);
-        this.updateValueInMap(fileListItem.item.name, "group", undefined, true);
-      }
-      try {
-        if (!this.deferUpload || force) {
-          // if all is well AND external file upload handling has not been set, start upload
-          const data = new FormData();
-          data.append("file", fileListItem.item);
-          if (key) {
-            data.append("key", key);
-          }
-          data.append("uid", fileListItem.uid);
-          data.append("name", fileListItem.item.name);
-          data.append("metadata", JSON.stringify({
-            uid: fileListItem.uid,
-            url: this.uri,
-            size: fileListItem.item.size,
-            meta: fileListItem.meta,
-          }));
-          fileListItem.xhr = await this.makeXHRPostRequest(data);
-        }
-      }
-      catch (e) {
-        // in case one of the global maxes have been reached, invalidate the file
-        this.updateValueInMap(fileListItem.item.name, "valid", false, false);
-      }
-    };
-    this.uploadPendingFiles = () => {
-      for (const [key, value] of Array.from(this.files.entries())) {
-        if (value.group === "pending" && value.pending === true) {
-          this.uploadFile(value, true, key);
-        }
-      }
-    };
-    this.getItemFromUID = (uid) => {
-      for (const [key, value] of Array.from(this.files.entries())) {
-        if (value.uid === uid) {
-          return { value, key };
-        }
-      }
-      return null;
-    };
-    this.handleExternalUploadButton = (bytesMaxReached, fileMaxReached) => {
-      if (this.externalUploadButton) {
-        if (bytesMaxReached || fileMaxReached) {
-          this.externalUploadButton.disabled = true;
-        }
-        else {
-          this.externalUploadButton.disabled = false;
-        }
-      }
-    };
-    this.onDelete = (key, ev) => {
-      const item = this.getItemFromUID(key);
-      const retrievedKey = item.key;
-      const deletedItem = this.files.get(retrievedKey);
-      this.files.delete(retrievedKey);
-      const { bytesMaxReached, fileMaxReached } = this.validateTotals();
-      this.handleExternalUploadButton(bytesMaxReached, fileMaxReached);
-      this.kick();
-      this.duetDelete.emit({
-        originalEvent: ev,
-        data: { deletion: deletedItem },
-        component: "duet-upload",
-      });
-      // don't send a xhr request if the item was pending, just remove it from the list
-      if (!this.external && !deletedItem.pending) {
-        this.makeXHRDeleteRequest(deletedItem);
-      }
-      this.resetFormFields();
-    };
-    this.onCancel = (key, ev) => {
-      const retrievedKey = this.getItemFromUID(key).key;
-      const cancelledItem = this.files.get(retrievedKey);
-      this.files.delete(retrievedKey);
-      const { bytesMaxReached, fileMaxReached } = this.validateTotals();
-      this.handleExternalUploadButton(bytesMaxReached, fileMaxReached);
-      if (!this.external) {
-        const { xhr } = cancelledItem;
-        if (xhr) {
-          xhr.abort();
-        }
-      }
-      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.onReady = () => {
-      this.duetReady.emit({
-        component: "duet-upload",
-      });
-    };
-    this.onDone = () => {
-      this.duetDone.emit({
-        component: "duet-upload",
-        data: { files: this.files },
-      });
-    };
-    /**
-     * @description This functions return sorted map items byg condition which are:
-     */
-    this.filterMap = () => {
-      const all = Array.from(this.files.values());
-      const inprogress = [];
-      const failure = [];
-      const pending = [];
-      const success = [];
-      let hasCategory = false;
-      all.forEach(data => {
-        const group = this.getGroupFromItemData(data);
-        // const item = mapFn(data, group)
-        // const category = <UploadCategory meta={data.meta} />
-        // const categories = data.meta?.badges?.join(",")
-        if (data.meta && !!data.meta.badges) {
-          hasCategory = true;
-        }
-        if (group === this.DefaultGroups.success) {
-          success.push({
-            uid: data.uid,
-            data,
-          });
-        }
-        else if (group === this.DefaultGroups.inprogress) {
-          inprogress.push({
-            uid: data.uid,
-            data,
-          });
-        }
-        else if (group === this.DefaultGroups.pending) {
-          pending.push({
-            uid: data.uid,
-            data,
-          });
-        }
-        else if (group === this.DefaultGroups.failure) {
-          failure.push({
-            uid: data.uid,
-            data,
-          });
-        }
-        else if (data.group) {
-          inprogress.push({
-            uid: data.uid,
-            data,
-          });
-        }
-      });
-      return {
-        pending,
-        failure,
-        success,
-        inprogress,
-        hasCategory,
-      };
-    };
-    this.getActions = (id, actions) => {
-      return actions.filter(item => item.map.includes(id));
-    };
-    this.renderUploadedItems = () => {
-      this.itemRefs.clear();
-      const filteredItems = this.filterMap();
-      const hasCategory = filteredItems.hasCategory;
-      const filteredActions = this.hideCancelButton
-        ? this.actions.filter(action => action.name !== "cancel")
-        : this.actions;
-      const ItemRows = this.groups.map(group => {
-        const currentItems = filteredItems[group.id];
-        if (!(currentItems === null || currentItems === void 0 ? void 0 : currentItems.length)) {
-          return;
-        }
-        return (h(Fragment, null, !this.hideGroups && (h(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: group.label })), currentItems.map(item => this.mapFilesToUploadItems(item.data, group.id, hasCategory, filteredActions))));
-      });
-      return (h(Fragment, null, this.showUploadedItemsHeader && (h(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: this.uploadedItemsHeaderLabel })), ItemRows));
-    };
-    this.tick = Date.now();
-    this.accessibleActiveDescendant = undefined;
-    this.accessibleDescribedBy = undefined;
-    this.accessibleControls = undefined;
-    this.accessibleOwns = undefined;
-    this.external = false;
-    this.middleware = null;
-    this.deferUpload = false;
-    this.hideButton = false;
-    this.actions = [
-      {
-        icon: "action-delete",
-        color: "color-danger",
-        size: "x-small",
-        background: "gray-lightest",
-        name: "delete",
-        map: ["success", "failure"],
-        label: {
-          fi: "Poista tiedosto",
-          en: "Delete the file",
-          sv: "Ta bort filen",
-        },
-      },
-      {
-        icon: "navigation-close",
-        color: "primary",
-        size: "x-small",
-        background: "gray-lightest",
-        name: "cancel",
-        map: ["inprogress", "pending"],
-        label: {
-          fi: "Keskeytä lähetys",
-          en: "Cancel the upload",
-          sv: "Stop överföringen",
-        },
-      },
-    ];
-    this.uri = undefined;
-    this.showLinks = false;
-    this.caption = undefined;
-    this.statusLabelDefaults = {
-      fi: {
-        inProgress: "Lähetetään {filesUploaded}, yhteensä lähetettävänä {filesTotal}.",
-        inProgressWithErrors: "Lähetetään {filesInProgress}, lähetetty {filesUploaded}, yhteensä lähetettävänä {filesTotal}, {filesWithErrors} epäonnistui",
-        done: "Lähetys valmis, {filesTotal} lisätty onnistuneesti",
-        doneWithErrors: "Lähetys valmis, {filesUploaded} lisätty onnistuneesti, {filesWithErrors} epäonnistui",
-        files: "tiedostoa",
-        file: "tiedosto",
-      },
-      sv: {
-        inProgress: "Laddar upp {filesUploaded} av {filesTotal}",
-        inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
-        done: "Uppladdningen slutförd, {filesTotal} har lagts till",
-        doneWithErrors: "Uppladdningen slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
-        files: "filer",
-        file: "fil",
-      },
-      en: {
-        inProgress: "Uploading {filesUploaded} of {filesTotal}",
-        inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
-        done: "Upload completed, {filesTotal} added successfully",
-        doneWithErrors: "Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.",
-        files: "files",
-        file: "file",
-      },
-    };
-    this.statusMessageLabel = getLocaleString(this.statusLabelDefaults);
-    this.buttonLabelDefaults = {
-      fi: "Lisää liite",
-      sv: "Lägg till en bilaga",
-      en: "Add an attachment",
-    };
-    this.buttonLabel = getLocaleString(this.buttonLabelDefaults);
-    this.accessibleButtonLabel = undefined;
-    this.theme = "";
-    this.disabled = false;
-    this.identifier = undefined;
-    this.margin = "auto";
-    this.required = false;
-    this.alignment = "middle";
-    this.hideGroups = false;
-    this.files = new Map();
-    this.valid = !this.required;
-    this.labelDefaults = {
-      fi: "Lisää liite",
-      sv: "Lägg till en bilaga",
-      en: "Add attachments",
-    };
-    this.label = getLocaleString(this.labelDefaults);
-    this.descriptionDefaults = {
-      en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.",
-      sv: "Du kan bifoga följande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer åt gången, och lägga till upp till {maxfiles} bilagor åt gången varje inte större än {maxbytes}.",
-      fi: "Voit liittää seuraavat tiedostotyypit: {filetypes} - sekä yleisimmät videotiedostot. Voit lähettää {maxbytestotal} tiedostoa kerrallaan, ja lisätä enintään {maxfiles} liitettä kerrallaan, jokainen enintään {maxbytes} kokoisena.",
-    };
-    this.description = getLocaleString(this.descriptionDefaults);
-    this.fileListEmptyDefaults = {
-      fi: "Ei vielä lisättyjä tiedostoja.",
-      sv: "Inga filer har lagts till ännu.",
-      en: "No files added yet.",
-    };
-    this.fileListEmpty = getLocaleString(this.fileListEmptyDefaults);
-    this.error = "";
-    this.errorCodes = errorCodes;
-    this.name = undefined;
-    this.maxBytes = 200000000;
-    this.maxBytesTotal = undefined;
-    this.maxFiles = 99;
-    this.allowedExtensions = "all";
-    this.allowedMimetypes = "";
-    this.multiple = true;
-    this.limitSelection = false;
-    this.hideCancelButton = false;
-    this.value = undefined;
-    this.externalUploadButtonId = undefined;
-    this.captionOnBottom = false;
-    this.showUploadedItemsHeader = false;
-    this.uploadedItemsHeaderLabel = {
-      fi: "Ladattu tiedosto",
-      sv: "Lägg till en bilaga",
-      en: "Uploaded file",
-    };
-    this.headerHeadingLevel = "h3";
-    this.hideHeader = false;
-    this.emitEvent = false;
-    this.groups = [
-      {
-        id: this.DefaultGroups.success,
-        label: {
-          fi: "Valmiit tiedostot",
-          sv: "Files success",
-          en: "Files success",
-        },
-      },
-      {
-        id: this.DefaultGroups.failure,
-        label: {
-          fi: "Tiedostot, joissa on virheitä",
-          sv: "Filer med fel",
-          en: "Files with errors",
-        },
-      },
-      {
-        id: this.DefaultGroups.inprogress,
-        label: {
-          fi: "Kesken olevat tiedostot",
-          sv: "Filer inprogress",
-          en: "Files inprogress",
-        },
-      },
-      {
-        id: this.DefaultGroups.pending,
-        label: {
-          en: "Files to upload",
-          sv: "Filer att ladda",
-          fi: "Ladattavat tiedostot",
-        },
-      },
-    ];
-  }
-  watchValidHandler(newValue, oldValue) {
-    if (newValue !== oldValue) {
-      this.kick();
-    }
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    if (typeof this.statusMessageLabel === "string") {
-      this.internalStatusMessageLabel = sanitizeString(this.groups);
-    }
-    else {
-      this.internalStatusMessageLabel = this.statusMessageLabel;
-    }
-    inheritGlobalTheme(this);
-    this.listenForActionEvents();
-    this.onReady();
-    this.externalUploadButton = document.querySelector(`#${this.externalUploadButtonId}`);
-  }
-  componentWillRender() {
-    // listen to the events from the component
-    this.verifyValidity();
-  }
-  /**
-   * 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) {
-    // validate that we haven't hit any maxfiles or maxbytes limits before we upload
-    const { bytesMaxReached, fileMaxReached } = this.validateTotals();
-    if (bytesMaxReached || fileMaxReached) {
-      this.handleExternalUploadButton(bytesMaxReached, fileMaxReached);
-      this.kick();
-      return;
-    }
-    this.metaData = metaData;
-    this.nativeInput.click();
-    return;
-  }
-  /**
-   * Method for uploading pending files
-   */
-  async uploadPending() {
-    this.uploadPendingFiles();
-  }
-  /**
-   * Method for forcing a render of the upload list, element.files can be changed externally
-   * But it will only rerender on a new Map or a top Level change - this can be used to update
-   * the tabular data if the automatic re-render is no sufficient
-   */
-  async refresh() {
-    this.kick();
-    await this.setFocus();
-  }
-  /**
-   * 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 the value of a key:value inside an item in the files attribute
-   */
-  async updateValue(item, key, value) {
-    this.updateValueInMap(item, key, value);
-  }
-  /**
-   * focusActionButton.
-   */
-  async focusActionButton(uid) {
-    var _a;
-    await ((_a = this.itemRefs.get(uid)) === null || _a === void 0 ? void 0 : _a.focusActionButton());
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const identifier = this.identifier || this.uploadId;
-    const maxMegaBytesTotal = Math.round((this.maxBytesTotal ? this.maxBytesTotal : this.maxBytes * this.maxFiles) / 1024 / 1024);
-    const maxMegaBytesPrFile = Math.round(this.maxBytes / 1024 / 1024);
-    let caption = this.description.replace(/{maxfiles}/g, this.maxFiles.toString());
-    caption = caption.replace(/{maxbytes}/g, `${maxMegaBytesPrFile.toString()} MB`);
-    caption = caption.replace(/{maxbytestotal}/g, `${maxMegaBytesTotal.toString()} MB`);
-    caption = caption.replace(/{filetypes}/g, this.allowedExtensions.split(",").join(", "));
-    if (this.externalUploadButton) {
-      this.externalUploadButton.ariaLabel = caption;
-    }
-    // @ts-ignore
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h("slot", { name: "header" }), !this.files.size && (h("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { margin: "none" }, 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.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { name: "filefooter" }), h("slot", { name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { margin: "none", size: "small" }, h("div", { class: "upload-bottom-caption" }, caption))), h("slot", { name: "afterfooter" }), !this.hideButton && (h(Fragment, null, 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", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached ||
-      this.bytesMaxReached ||
-      this.filesToUploadExceedsLimit ||
-      this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, null, h("duet-spacer", { size: "medium" }), h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h("duet-visually-hidden", { "aria-hidden": "true" }, 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, tabIndex: -1 })))));
-  }
-  /**
-   * 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);
-    });
-    let options = {
-      payload: { data, name },
-      options: { type: "POST", uri: this.uri, xhr, argument: null, headers: undefined },
-      onFailure: this.transferDoneWithFailure,
-      onSuccess: this.transferDone,
-      onProgress: this.trackProgress,
-    };
-    if (this.middleware) {
-      options = this.middleware(options);
-    }
-    return makeXhrRequest(options);
-  }
-  makeXHRDeleteRequest(data) {
-    const { uid, item } = data;
-    const xhr = new XMLHttpRequest();
-    const headers = {
-      "x-fileuid": uid,
-      "x-filename": item.name,
-    };
-    let options = {
-      payload: { data: null, name },
-      options: {
-        type: "DELETE",
-        xhr,
-        uri: this.uri,
-        argument: `?key=${uid}&name=${item.name}`,
-        headers,
-      },
-      onFailure: this.transferDoneWithFailure,
-      onSuccess: this.transferDone,
-      onProgress: this.trackProgress,
-    };
-    if (this.middleware) {
-      options = this.middleware(options);
-    }
-    // don't present server issues to user on deletes, just remove them from the visible list
-    return makeXhrRequest(options);
-  }
-  /**
-   * 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)
-    this.filesToUploadExceedsLimit = false;
-    if (filesToUploadCountAboveMax(this.files.size, selectedFiles.length, this.maxFiles)) {
-      this.filesToUploadExceedsLimit = true;
-      this.kick();
-      return;
-    }
-    this.filesToUploadTotalSizeIsAboveMax = false;
-    if (filesToUploadTotalSizeIsAboveMax(this.files, selectedFiles, this.maxBytesTotal)) {
-      this.filesToUploadTotalSizeIsAboveMax = true;
-      this.kick();
-      return;
-    }
-    if (selectedFiles) {
-      for (const item of selectedFiles) {
-        const { valid, errorMessage, errorType, errorSystem } = validateFile(item, {
-          maxBytes: this.maxBytes,
-          allowedExtensions: this.allowedExtensions,
-          allowedMimetypes: this.allowedMimetypes,
-        }, this.errorCodes);
-        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,
+    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;
+        this.filesToUploadExceedsLimit = false;
+        this.filesToUploadTotalSizeIsAboveMax = false;
+        this.internalStatusMessageLabel = undefined;
+        this.itemRefs = new Map();
+        /**
+         * Properties
+         */
+        this.DefaultGroups = {
+            inprogress: "inprogress",
+            success: "success",
+            pending: "pending",
+            failure: "failure",
         };
-        this.files.set(item.name, fileListItem);
-        if (valid && !this.external) {
-          await this.uploadFile(fileListItem);
-        }
-        else if (valid && this.external) {
-          this.updateValueInMap(fileListItem.item.name, "pending", true, false);
-          this.updateValueInMap(fileListItem.item.name, "group", "pending", true);
-        }
-        else if (!valid) {
-          this.updateValueInMap(item.name, "valid", false, true);
-        }
-        // 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",
-    });
-  }
-  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"
-      },
-      "middleware": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "XHRInternalMiddleWare",
-          "resolved": "(XHRMiddlewareOptions: any) => XHRMiddlewareOptions",
-          "references": {
-            "XHRInternalMiddleWare": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
-              "id": "src/components/duet-upload/duet-upload.tsx::XHRInternalMiddleWare"
+        this.kick = debounce(() => {
+            this.tick = Date.now();
+        }, 30); // will trigger re-render
+        this.categoryLabel = {
+            en: "Category",
+            sv: "Filtyp",
+            fi: "Tiedostotyyppi",
+        };
+        /**
+         * Private functions
+         */
+        this.listenForActionEvents = () => {
+            this.element.addEventListener("duetActionEvent", (e) => {
+                const detail = e.detail;
+                const { action, id, originalEvent } = detail;
+                switch (action) {
+                    case "delete":
+                        this.onDelete(id, originalEvent);
+                        break;
+                    case "cancel":
+                        this.onCancel(id, 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",
+                });
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If internal upload method is used, and this has been set to a function - it will be called with the XHR options before the reqeust is sent, return an updated XHR options object in order to manipulate the request"
-        },
-        "defaultValue": "null"
-      },
-      "deferUpload": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If defer-upload is true, duet-upload will not (as recommended) instantly upload files but await a call to uploadPending()"
-        },
-        "attribute": "defer-upload",
-        "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 one yourself\nand call the exposed method startUpload to open the upload dialog"
-        },
-        "attribute": "hide-upload-button",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "actions": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetEditableTableActions",
-          "resolved": "{ icon: string; color: string; background: string; size: DuetActionButtonIconSize; name: string; map?: string[]; label?: DuetLangObject; }[]",
-          "references": {
-            "DuetEditableTableActions": {
-              "location": "import",
-              "path": "../duet-editable-table/duet-editable-table",
-              "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetEditableTableActions"
+        };
+        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
+                return this.DefaultGroups.success;
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Default actions added to the internally used duet-editable-table"
-        },
-        "defaultValue": "[\n    {\n      icon: \"action-delete\",\n      color: \"color-danger\",\n      size: \"x-small\",\n      background: \"gray-lightest\",\n      name: \"delete\",\n      map: [\"success\", \"failure\"],\n      label: {\n        fi: \"Poista tiedosto\",\n        en: \"Delete the file\",\n        sv: \"Ta bort filen\",\n      },\n    },\n    {\n      icon: \"navigation-close\",\n      color: \"primary\",\n      size: \"x-small\",\n      background: \"gray-lightest\",\n      name: \"cancel\",\n      map: [\"inprogress\", \"pending\"],\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 editable-table will display links on successfully uploaded items,\nthis requires the server can respond with link URIs in the correct format\nand that the files are accessible to the user"
-        },
-        "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",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
+            else if (item.progress > 0 && item.progress !== 100) {
+                return this.DefaultGroups.inprogress;
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{\nfi: {\ninProgress: \"L\u00E4hetet\u00E4\u00E4n {filesUploaded}, yhteens\u00E4 l\u00E4hetett\u00E4v\u00E4n\u00E4 {filesTotal}.\",\ninProgressWithErrors:\n\"L\u00E4hetet\u00E4\u00E4n {filesInProgress}, l\u00E4hetetty {filesUploaded}, yhteens\u00E4 l\u00E4hetett\u00E4v\u00E4n\u00E4 {filesTotal}, {filesWithErrors} ep\u00E4onnistui\",\ndone: \"L\u00E4hetys valmis, {filesTotal} lis\u00E4tty onnistuneesti\",\ndoneWithErrors: \"L\u00E4hetys valmis, {filesUploaded} lis\u00E4tty onnistuneesti, {filesWithErrors} ep\u00E4onnistui\",\nfiles: \"tiedostoa\",\nfile: \"tiedosto\",\n},\nsv: {\ninProgress: \"Laddar upp {filesUploaded} av {filesTotal}\",\ninProgressWithErrors:\n\"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\ndone: \"Uppladdningen slutf\u00F6rd, {filesTotal} har lagts till\",\ndoneWithErrors: \"Uppladdningen slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\nfiles: \"filer\",\nfile: \"fil\",\n},\nen: {\ninProgress: \"Uploading {filesUploaded} of {filesTotal}\",\ninProgressWithErrors:\n\"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\ndone: \"Upload completed, {filesTotal} added successfully\",\ndoneWithErrors: \"Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.\",\nfiles: \"files\",\nfile: \"file\",\n},\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}, yhteens\u00E4 l\u00E4hetett\u00E4v\u00E4n\u00E4 {filesTotal}.\",\n      inProgressWithErrors:\n        \"L\u00E4hetet\u00E4\u00E4n {filesInProgress}, l\u00E4hetetty {filesUploaded}, yhteens\u00E4 l\u00E4hetett\u00E4v\u00E4n\u00E4 {filesTotal}, {filesWithErrors} ep\u00E4onnistui\",\n      done: \"L\u00E4hetys valmis, {filesTotal} lis\u00E4tty onnistuneesti\",\n      doneWithErrors: \"L\u00E4hetys valmis, {filesUploaded} lis\u00E4tty onnistuneesti, {filesWithErrors} ep\u00E4onnistui\",\n      files: \"tiedostoa\",\n      file: \"tiedosto\",\n    },\n    sv: {\n      inProgress: \"Laddar upp {filesUploaded} av {filesTotal}\",\n      inProgressWithErrors:\n        \"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\n      done: \"Uppladdningen slutf\u00F6rd, {filesTotal} har lagts till\",\n      doneWithErrors: \"Uppladdningen slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\n      files: \"filer\",\n      file: \"fil\",\n    },\n    en: {\n      inProgress: \"Uploading {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\n      done: \"Upload completed, {filesTotal} added successfully\",\n      doneWithErrors: \"Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.\",\n      files: \"files\",\n      file: \"file\",\n    },\n  }"
-      },
-      "statusMessageLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "StatusMessage | string",
-          "resolved": "string | { inProgress: string; inProgressWithErrors: string; done: string; doneWithErrors: string; file: string; files: string; }",
-          "references": {
-            "StatusMessage": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::StatusMessage"
+            else if (!item.valid) {
+                return this.DefaultGroups.failure;
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Strings used for the status aria-label"
-        },
-        "attribute": "status-message-label",
-        "reflect": false,
-        "defaultValue": "getLocaleString(\n    this.statusLabelDefaults\n  )"
-      },
-      "buttonLabelDefaults": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetLangObject | string",
-          "resolved": "DuetLangObject | string",
-          "references": {
-            "DuetLangObject": {
-              "location": "import",
-              "path": "../../utils/language-utils",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
+            else if (item.pending) {
+                return this.DefaultGroups.pending;
             }
-          }
-        },
-        "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 button label defaults on the component."
-        },
-        "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 aria-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",
-              "id": "src/common-types.d.ts::DuetTheme"
+            else if (item.group) {
+                return item.group;
             }
-          }
-        },
-        "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",
-              "id": "src/common-types.d.ts::DuetMargin"
+            else {
+                return "none";
             }
-          }
-        },
-        "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"
-      },
-      "alignment": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Key used to set vertical alignment of action buttons"
-        },
-        "attribute": "alignment",
-        "reflect": false,
-        "defaultValue": "\"middle\""
-      },
-      "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
-              "id": "src/components/duet-upload/duet-upload.tsx::StringMap"
+        };
+        this.mapFilesToUploadItems = (data, group, showCategory, filteredActions) => {
+            if (group === this.DefaultGroups.success) {
+                return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "success", data: data, showLinks: this.showLinks, linkClickEvent: this.emitEvent ? this.linkClick : undefined, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
+                        this.itemRefs.set(data.uid, item);
+                    } }));
             }
-          }
-        },
-        "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 the internally used editable-table 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",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
+            else if (group === this.DefaultGroups.inprogress) {
+                return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "inprogress", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
+                        this.itemRefs.set(data.uid, item);
+                    } }));
             }
-          }
-        },
-        "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",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
+            else if (group === this.DefaultGroups.pending) {
+                return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "pending", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
+                        this.itemRefs.set(data.uid, item);
+                    } }));
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{\nen: \"You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.\",\nsv: \"Du kan bifoga f\u00F6ljande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer \u00E5t g\u00E5ngen, och l\u00E4gga till upp till {maxfiles} bilagor \u00E5t g\u00E5ngen varje inte st\u00F6rre \u00E4n {maxbytes}.\",\nfi: \"Voit liitt\u00E4\u00E4 seuraavat tiedostotyypit: {filetypes} - sek\u00E4 yleisimm\u00E4t videotiedostot. Voit l\u00E4hett\u00E4\u00E4 {maxbytestotal} tiedostoa kerrallaan, ja lis\u00E4t\u00E4 enint\u00E4\u00E4n {maxfiles} liitett\u00E4 kerrallaan, jokainen enint\u00E4\u00E4n {maxbytes} kokoisena.\",\n}"
-            }],
-          "text": "Property to change descriptionDefaults defaults on the component."
-        },
-        "attribute": "description-default",
-        "reflect": false,
-        "defaultValue": "{\n    en: \"You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.\",\n    sv: \"Du kan bifoga f\u00F6ljande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer \u00E5t g\u00E5ngen, och l\u00E4gga till upp till {maxfiles} bilagor \u00E5t g\u00E5ngen varje inte st\u00F6rre \u00E4n {maxbytes}.\",\n    fi: \"Voit liitt\u00E4\u00E4 seuraavat tiedostotyypit: {filetypes} - sek\u00E4 yleisimm\u00E4t videotiedostot. Voit l\u00E4hett\u00E4\u00E4 {maxbytestotal} tiedostoa kerrallaan, ja lis\u00E4t\u00E4 enint\u00E4\u00E4n {maxfiles} liitett\u00E4 kerrallaan, jokainen enint\u00E4\u00E4n {maxbytes} kokoisena.\",\n  }"
-      },
-      "description": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{\nen: \"You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.\",\nsv: \"Du kan bifoga f\u00F6ljande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer \u00E5t g\u00E5ngen, och l\u00E4gga till upp till {maxfiles} bilagor \u00E5t g\u00E5ngen varje inte st\u00F6rre \u00E4n {maxbytes}.\",\nfi: \"Voit liitt\u00E4\u00E4 seuraavat tiedostotyypit: {filetypes} - sek\u00E4 yleisimm\u00E4t videotiedostot. Voit l\u00E4hett\u00E4\u00E4 {maxbytestotal} tiedostoa kerrallaan, ja lis\u00E4t\u00E4 enint\u00E4\u00E4n {maxfiles} liitett\u00E4 kerrallaan, jokainen enint\u00E4\u00E4n {maxbytes} kokoisena.\",\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",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
+            else if (group === this.DefaultGroups.failure) {
+                return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "failure", data: data, showLinks: this.showLinks, errorCodes: this.errorCodes, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
+                        this.itemRefs.set(data.uid, item);
+                    } }));
             }
-          }
-        },
-        "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": "\"\""
-      },
-      "errorCodes": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetUploadErrorCode[]",
-          "resolved": "DuetUploadErrorCode[]",
-          "references": {
-            "DuetUploadErrorCode": {
-              "location": "import",
-              "path": "./errorcodes.utils",
-              "id": "src/components/duet-upload/errorcodes.utils.ts::DuetUploadErrorCode"
+            else if (data.group) {
+                return data.html;
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Default errorcodes used by the component, modifiable via javascript"
-        },
-        "defaultValue": "errorCodes"
-      },
-      "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"
-      },
-      "hideCancelButton": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Use hideCancelButton to hide cancel button for pending and in progress uploads"
-        },
-        "attribute": "hide-cancel-button",
-        "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
-      },
-      "externalUploadButtonId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Id of external uploadButton of the input used for setting accessibility attributes."
-        },
-        "attribute": "external-upload-button-id",
-        "reflect": false
-      },
-      "captionOnBottom": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If true the input caption will be placed below file list and footer"
-        },
-        "attribute": "caption-on-bottom",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "showUploadedItemsHeader": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Use show-uploaded-items-header to show single, generic, header for uploaded items"
-        },
-        "attribute": "show-uploaded-items-header",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "uploadedItemsHeaderLabel": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetLangObject",
-          "resolved": "DuetLangObject",
-          "references": {
-            "DuetLangObject": {
-              "location": "import",
-              "path": "../../utils/language-utils",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
+            else {
+                return "none";
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{\nfi: \"Ladattu tiedosto.\",\nsv: \"Nedladdad fil.\",\nen: \"Uploaded file.\",\n}"
-            }],
-          "text": "Property to change single uploaded items header label"
-        },
-        "defaultValue": "{\n    fi: \"Ladattu tiedosto\",\n    sv: \"L\u00E4gg till en bilaga\",\n    en: \"Uploaded file\",\n  }"
-      },
-      "headerHeadingLevel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetHeadingLevel",
-          "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
-          "references": {
-            "DuetHeadingLevel": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetHeadingLevel"
+        };
+        this.genHashName = () => Date.now().toString(36) + Math.random();
+        this.updateValueInMap = (item, key, value, kick = true) => {
+            try {
+                const fileItem = this.files.get(item);
+                fileItem[key] = value;
+                this.files.set(item, fileItem);
+                if (this.external && key !== "url") {
+                    this.trackProgress(item, key === "uploaded");
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Heading level for the label in the legend element. This is only used to give screen readers better logical structure.\nThis does not affect visual appearance."
-        },
-        "attribute": "header-heading-level",
-        "reflect": false,
-        "defaultValue": "\"h3\""
-      },
-      "hideHeader": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Use hide-header to hide upload component header and caption (if caption is not on bottom)"
-        },
-        "attribute": "hide-header",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "emitEvent": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If link-click-event is set to true then upload component\nwill emit an event on uploaded file link click (check linkClick event)."
-        },
-        "attribute": "link-click-event",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "groups": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetUploadTableGroupName[]",
-          "resolved": "DuetUploadTableGroupName[]",
-          "references": {
-            "DuetUploadTableGroupName": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
-              "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadTableGroupName"
+            catch (e) {
+                // if a users tries to update entries on a file that doesn't exist,
+                // this will blow up - so we're swallowing the errors here on purpose
+                // console.warn("operation on missing items")
             }
-          }
-        },
-        "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 to use to display files"
-        },
-        "defaultValue": "[\n    {\n      id: this.DefaultGroups.success,\n      label: {\n        fi: \"Valmiit tiedostot\",\n        sv: \"Files success\",\n        en: \"Files success\",\n      },\n    },\n    {\n      id: this.DefaultGroups.failure,\n      label: {\n        fi: \"Tiedostot, joissa on virheit\u00E4\",\n        sv: \"Filer med fel\",\n        en: \"Files with errors\",\n      },\n    },\n    {\n      id: this.DefaultGroups.inprogress,\n      label: {\n        fi: \"Kesken olevat tiedostot\",\n        sv: \"Filer inprogress\",\n        en: \"Files inprogress\",\n      },\n    },\n    {\n      id: this.DefaultGroups.pending,\n      label: {\n        en: \"Files to upload\",\n        sv: \"Filer att ladda\",\n        fi: \"Ladattavat tiedostot\",\n      },\n    },\n  ]"
-      }
-    };
-  }
-  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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
-              "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+            if (kick) {
+                this.kick();
             }
-          }
-        }
-      }, {
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
-              "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+        };
+        this.updateProgress = (ev, name) => {
+            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);
             }
-          }
-        }
-      }, {
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
-              "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+            else {
+                console.log("cant read progress");
             }
-          }
-        }
-      }, {
-        "method": "duetReady",
-        "name": "duetReady",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the component is finished initializing"
-        },
-        "complexType": {
-          "original": "DuetUploadEvent",
-          "resolved": "{ originalEvent?: Event; data?: Record<string, any>; metaData?: Record<string, any>; component: \"duet-upload\"; }",
-          "references": {
-            "DuetUploadEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
-              "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+        };
+        this.trackProgress = (name, remove = false) => {
+            if (remove) {
+                this.filesInProgress.delete(name);
             }
-          }
-        }
-      }, {
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
-              "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+            else {
+                this.filesInProgress.set(name, "inprogress");
             }
-          }
-        }
-      }, {
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
-              "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+            if (this.filesInProgress.size === 0) {
+                this.onDone();
             }
-          }
-        }
-      }, {
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
-              "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+        };
+        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)
+             */
+            /* TODO: it may be a good idea to just update the list so that this always matches what is in the files map,
+             * TODO: this would remove the capability of Re-uploading, unless we can catch and remove the user file from the form filelist before the upload is canceled by the browser
+             * TODO: but for now we'll just reset the form fields
+             */
+            this.nativeInput.value = "";
+        };
+        this.startUpload = async (ev, metaData = undefined) => {
+            // validate that we haven't hit any maxfiles or maxbytes limits before we upload
+            const { bytesMaxReached, fileMaxReached } = this.validateTotals();
+            if (bytesMaxReached || fileMaxReached) {
+                this.kick();
+                return;
             }
-          }
-        }
-      }, {
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
-              "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+            this.metaData = metaData;
+            this.nativeInput.click();
+            this.onUpload(ev, metaData);
+            ev.stopPropagation();
+            ev.preventDefault();
+            return;
+        };
+        /**
+         * 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);
             }
-          }
-        }
-      }, {
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
-              "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+            catch (e) {
+                this.updateValueInMap(name, "url", null);
+                console.error("Server did not respond with expected response {url: string}");
             }
-          }
-        }
-      }, {
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
-              "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+            return;
+        };
+        this.transferDoneWithFailure = (xhr, name, status) => {
+            try {
+                const { error } = JSON.parse(xhr.response);
+                this.updateValueInMap(name, "error", { message: error.message, type: error.type }, false);
             }
-          }
-        }
-      }, {
-        "method": "linkClick",
-        "name": "linkClick",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the user clicks the uploaded file link and link-click-event prop is set to true"
-        },
-        "complexType": {
-          "original": "DuetUploadEvent",
-          "resolved": "{ originalEvent?: Event; data?: Record<string, any>; metaData?: Record<string, any>; component: \"duet-upload\"; }",
-          "references": {
-            "DuetUploadEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
-              "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+            catch (e) {
+                console.error("Server did not respond with expected response error:{message: string, type: int}");
+                this.updateValueInMap(name, "error", { type: status }, false);
             }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
+            this.updateValueInMap(name, "valid", false, true);
+        };
+        this.transferFailed = name => {
+            this.updateValueInMap(name, "error", getI18nError("duet-upload-001", this.errorCodes));
+        };
+        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", getI18nError("duet-upload-202", this.errorCodes), false);
             }
-          },
-          "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",
-              "id": "global::Promise"
+            if (isTotalFileAmountAboveMax && name) {
+                this.updateValueInMap(name, "error", getI18nError("duet-upload-301", this.errorCodes), false);
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Method for invoking the upload sequence",
-          "tags": []
-        }
-      },
-      "uploadPending": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            this.bytesMaxReached = isTotalSizeOverMaxSize;
+            this.fileMaxReached = isTotalFileAmountAboveMax;
+            return {
+                bytesMaxReached: isTotalSizeOverMaxSize,
+                fileMaxReached: isTotalFileAmountAboveMax,
+            };
+        };
+        this.uploadFile = async (fileListItem, force = false, key) => {
+            if (!force && this.deferUpload) {
+                this.updateValueInMap(fileListItem.item.name, "pending", true, false);
+                this.updateValueInMap(fileListItem.item.name, "group", "pending", true);
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Method for uploading pending files",
-          "tags": []
-        }
-      },
-      "refresh": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            else if (force) {
+                this.updateValueInMap(fileListItem.item.name, "pending", false, false);
+                this.updateValueInMap(fileListItem.item.name, "group", undefined, true);
+            }
+            try {
+                if (!this.deferUpload || force) {
+                    // if all is well AND external file upload handling has not been set, start upload
+                    const data = new FormData();
+                    data.append("file", fileListItem.item);
+                    if (key) {
+                        data.append("key", key);
+                    }
+                    data.append("uid", fileListItem.uid);
+                    data.append("name", fileListItem.item.name);
+                    data.append("metadata", JSON.stringify({
+                        uid: fileListItem.uid,
+                        url: this.uri,
+                        size: fileListItem.item.size,
+                        meta: fileListItem.meta,
+                    }));
+                    fileListItem.xhr = await this.makeXHRPostRequest(data);
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Method for forcing a render of the upload list, element.files can be changed externally\nBut it will only rerender on a new Map or a top Level change - this can be used to update\nthe tabular data if the automatic re-render is no sufficient",
-          "tags": []
+            catch (e) {
+                // in case one of the global maxes have been reached, invalidate the file
+                this.updateValueInMap(fileListItem.item.name, "valid", false, false);
+            }
+        };
+        this.uploadPendingFiles = () => {
+            for (const [key, value] of Array.from(this.files.entries())) {
+                if (value.group === "pending" && value.pending === true) {
+                    this.uploadFile(value, true, key);
+                }
+            }
+        };
+        this.getItemFromUID = (uid) => {
+            for (const [key, value] of Array.from(this.files.entries())) {
+                if (value.uid === uid) {
+                    return { value, key };
+                }
+            }
+            return null;
+        };
+        this.handleExternalUploadButton = (bytesMaxReached, fileMaxReached) => {
+            if (this.externalUploadButton) {
+                if (bytesMaxReached || fileMaxReached) {
+                    this.externalUploadButton.disabled = true;
+                }
+                else {
+                    this.externalUploadButton.disabled = false;
+                }
+            }
+        };
+        this.onDelete = (key, ev) => {
+            const item = this.getItemFromUID(key);
+            const retrievedKey = item.key;
+            const deletedItem = this.files.get(retrievedKey);
+            this.files.delete(retrievedKey);
+            const { bytesMaxReached, fileMaxReached } = this.validateTotals();
+            this.handleExternalUploadButton(bytesMaxReached, fileMaxReached);
+            this.kick();
+            this.duetDelete.emit({
+                originalEvent: ev,
+                data: { deletion: deletedItem },
+                component: "duet-upload",
+            });
+            // don't send a xhr request if the item was pending, just remove it from the list
+            if (!this.external && !deletedItem.pending) {
+                this.makeXHRDeleteRequest(deletedItem);
+            }
+            this.resetFormFields();
+        };
+        this.onCancel = (key, ev) => {
+            const retrievedKey = this.getItemFromUID(key).key;
+            const cancelledItem = this.files.get(retrievedKey);
+            this.files.delete(retrievedKey);
+            const { bytesMaxReached, fileMaxReached } = this.validateTotals();
+            this.handleExternalUploadButton(bytesMaxReached, fileMaxReached);
+            if (!this.external) {
+                const { xhr } = cancelledItem;
+                if (xhr) {
+                    xhr.abort();
+                }
+            }
+            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.onReady = () => {
+            this.duetReady.emit({
+                component: "duet-upload",
+            });
+        };
+        this.onDone = () => {
+            this.duetDone.emit({
+                component: "duet-upload",
+                data: { files: this.files },
+            });
+        };
+        /**
+         * @description This functions return sorted map items byg condition which are:
+         */
+        this.filterMap = () => {
+            const all = Array.from(this.files.values());
+            const inprogress = [];
+            const failure = [];
+            const pending = [];
+            const success = [];
+            let hasCategory = false;
+            all.forEach(data => {
+                const group = this.getGroupFromItemData(data);
+                // const item = mapFn(data, group)
+                // const category = <UploadCategory meta={data.meta} />
+                // const categories = data.meta?.badges?.join(",")
+                if (data.meta && !!data.meta.badges) {
+                    hasCategory = true;
+                }
+                if (group === this.DefaultGroups.success) {
+                    success.push({
+                        uid: data.uid,
+                        data,
+                    });
+                }
+                else if (group === this.DefaultGroups.inprogress) {
+                    inprogress.push({
+                        uid: data.uid,
+                        data,
+                    });
+                }
+                else if (group === this.DefaultGroups.pending) {
+                    pending.push({
+                        uid: data.uid,
+                        data,
+                    });
+                }
+                else if (group === this.DefaultGroups.failure) {
+                    failure.push({
+                        uid: data.uid,
+                        data,
+                    });
+                }
+                else if (data.group) {
+                    inprogress.push({
+                        uid: data.uid,
+                        data,
+                    });
+                }
+            });
+            return {
+                pending,
+                failure,
+                success,
+                inprogress,
+                hasCategory,
+            };
+        };
+        this.getActions = (id, actions) => {
+            return actions.filter(item => item.map.includes(id));
+        };
+        this.renderUploadedItems = () => {
+            this.itemRefs.clear();
+            const filteredItems = this.filterMap();
+            const hasCategory = filteredItems.hasCategory;
+            const filteredActions = this.hideCancelButton
+                ? this.actions.filter(action => action.name !== "cancel")
+                : this.actions;
+            const ItemRows = this.groups.map(group => {
+                const currentItems = filteredItems[group.id];
+                if (!(currentItems === null || currentItems === void 0 ? void 0 : currentItems.length)) {
+                    return;
+                }
+                return (h(Fragment, null, !this.hideGroups && (h(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: group.label })), currentItems.map(item => this.mapFilesToUploadItems(item.data, group.id, hasCategory, filteredActions))));
+            });
+            return (h(Fragment, null, this.showUploadedItemsHeader && (h(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: this.uploadedItemsHeaderLabel })), ItemRows));
+        };
+        this.tick = Date.now();
+        this.accessibleActiveDescendant = undefined;
+        this.accessibleDescribedBy = undefined;
+        this.accessibleControls = undefined;
+        this.accessibleOwns = undefined;
+        this.external = false;
+        this.middleware = null;
+        this.deferUpload = false;
+        this.hideButton = false;
+        this.actions = [
+            {
+                icon: "action-delete",
+                color: "color-danger",
+                size: "x-small",
+                background: "gray-lightest",
+                name: "delete",
+                map: ["success", "failure"],
+                label: {
+                    fi: "Poista tiedosto",
+                    en: "Delete the file",
+                    sv: "Ta bort filen",
+                },
+            },
+            {
+                icon: "navigation-close",
+                color: "primary",
+                size: "x-small",
+                background: "gray-lightest",
+                name: "cancel",
+                map: ["inprogress", "pending"],
+                label: {
+                    fi: "Keskeytä lähetys",
+                    en: "Cancel the upload",
+                    sv: "Stop överföringen",
+                },
+            },
+        ];
+        this.uri = undefined;
+        this.showLinks = false;
+        this.caption = undefined;
+        this.statusLabelDefaults = {
+            fi: {
+                inProgress: "Lähetetään {filesUploaded}, yhteensä lähetettävänä {filesTotal}.",
+                inProgressWithErrors: "Lähetetään {filesInProgress}, lähetetty {filesUploaded}, yhteensä lähetettävänä {filesTotal}, {filesWithErrors} epäonnistui",
+                done: "Lähetys valmis, {filesTotal} lisätty onnistuneesti",
+                doneWithErrors: "Lähetys valmis, {filesUploaded} lisätty onnistuneesti, {filesWithErrors} epäonnistui",
+                files: "tiedostoa",
+                file: "tiedosto",
+            },
+            sv: {
+                inProgress: "Laddar upp {filesUploaded} av {filesTotal}",
+                inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
+                done: "Uppladdningen slutförd, {filesTotal} har lagts till",
+                doneWithErrors: "Uppladdningen slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
+                files: "filer",
+                file: "fil",
+            },
+            en: {
+                inProgress: "Uploading {filesUploaded} of {filesTotal}",
+                inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
+                done: "Upload completed, {filesTotal} added successfully",
+                doneWithErrors: "Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.",
+                files: "files",
+                file: "file",
+            },
+        };
+        this.statusMessageLabel = getLocaleString(this.statusLabelDefaults);
+        this.buttonLabelDefaults = {
+            fi: "Lisää liite",
+            sv: "Lägg till en bilaga",
+            en: "Add an attachment",
+        };
+        this.buttonLabel = getLocaleString(this.buttonLabelDefaults);
+        this.accessibleButtonLabel = undefined;
+        this.theme = "";
+        this.disabled = false;
+        this.identifier = undefined;
+        this.margin = "auto";
+        this.required = false;
+        this.alignment = "middle";
+        this.hideGroups = false;
+        this.files = new Map();
+        this.valid = !this.required;
+        this.labelDefaults = {
+            fi: "Lisää liite",
+            sv: "Lägg till en bilaga",
+            en: "Add attachments",
+        };
+        this.label = getLocaleString(this.labelDefaults);
+        this.descriptionDefaults = {
+            en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.",
+            sv: "Du kan bifoga följande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer åt gången, och lägga till upp till {maxfiles} bilagor åt gången varje inte större än {maxbytes}.",
+            fi: "Voit liittää seuraavat tiedostotyypit: {filetypes} - sekä yleisimmät videotiedostot. Voit lähettää {maxbytestotal} tiedostoa kerrallaan, ja lisätä enintään {maxfiles} liitettä kerrallaan, jokainen enintään {maxbytes} kokoisena.",
+        };
+        this.description = getLocaleString(this.descriptionDefaults);
+        this.fileListEmptyDefaults = {
+            fi: "Ei vielä lisättyjä tiedostoja.",
+            sv: "Inga filer har lagts till ännu.",
+            en: "No files added yet.",
+        };
+        this.fileListEmpty = getLocaleString(this.fileListEmptyDefaults);
+        this.error = "";
+        this.errorCodes = errorCodes;
+        this.name = undefined;
+        this.maxBytes = 200000000;
+        this.maxBytesTotal = undefined;
+        this.maxFiles = 99;
+        this.allowedExtensions = "all";
+        this.allowedMimetypes = "";
+        this.multiple = true;
+        this.limitSelection = false;
+        this.hideCancelButton = false;
+        this.value = undefined;
+        this.externalUploadButtonId = undefined;
+        this.captionOnBottom = false;
+        this.showUploadedItemsHeader = false;
+        this.uploadedItemsHeaderLabel = {
+            fi: "Ladattu tiedosto",
+            sv: "Lägg till en bilaga",
+            en: "Uploaded file",
+        };
+        this.headerHeadingLevel = "h3";
+        this.hideHeader = false;
+        this.emitEvent = false;
+        this.groups = [
+            {
+                id: this.DefaultGroups.success,
+                label: {
+                    fi: "Valmiit tiedostot",
+                    sv: "Files success",
+                    en: "Files success",
+                },
+            },
+            {
+                id: this.DefaultGroups.failure,
+                label: {
+                    fi: "Tiedostot, joissa on virheitä",
+                    sv: "Filer med fel",
+                    en: "Files with errors",
+                },
+            },
+            {
+                id: this.DefaultGroups.inprogress,
+                label: {
+                    fi: "Kesken olevat tiedostot",
+                    sv: "Filer inprogress",
+                    en: "Files inprogress",
+                },
+            },
+            {
+                id: this.DefaultGroups.pending,
+                label: {
+                    en: "Files to upload",
+                    sv: "Filer att ladda",
+                    fi: "Ladattavat tiedostot",
+                },
+            },
+        ];
+    }
+    watchValidHandler(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.kick();
+        }
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        if (typeof this.statusMessageLabel === "string") {
+            this.internalStatusMessageLabel = sanitizeString(this.groups);
+        }
+        else {
+            this.internalStatusMessageLabel = this.statusMessageLabel;
+        }
+        inheritGlobalTheme(this);
+        this.listenForActionEvents();
+        this.onReady();
+        this.externalUploadButton = document.querySelector(`#${this.externalUploadButtonId}`);
+    }
+    componentWillRender() {
+        // listen to the events from the component
+        this.verifyValidity();
+    }
+    /**
+     * 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);
         }
-      },
-      "getFiles": {
-        "complexType": {
-          "signature": "() => Promise<false | { valid: any[]; invalid: any[]; }>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        return;
+    }
+    /**
+     * Method for invoking the upload sequence
+     */
+    async upload(metaData = undefined) {
+        // validate that we haven't hit any maxfiles or maxbytes limits before we upload
+        const { bytesMaxReached, fileMaxReached } = this.validateTotals();
+        if (bytesMaxReached || fileMaxReached) {
+            this.handleExternalUploadButton(bytesMaxReached, fileMaxReached);
+            this.kick();
+            return;
+        }
+        this.metaData = metaData;
+        this.nativeInput.click();
+        return;
+    }
+    /**
+     * Method for uploading pending files
+     */
+    async uploadPending() {
+        this.uploadPendingFiles();
+    }
+    /**
+     * Method for forcing a render of the upload list, element.files can be changed externally
+     * But it will only rerender on a new Map or a top Level change - this can be used to update
+     * the tabular data if the automatic re-render is no sufficient
+     */
+    async refresh() {
+        this.kick();
+        await this.setFocus();
+    }
+    /**
+     * 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 the value of a key:value inside an item in the files attribute
+     */
+    async updateValue(item, key, value) {
+        this.updateValueInMap(item, key, value);
+    }
+    /**
+     * focusActionButton.
+     */
+    async focusActionButton(uid) {
+        var _a;
+        await ((_a = this.itemRefs.get(uid)) === null || _a === void 0 ? void 0 : _a.focusActionButton());
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        const identifier = this.identifier || this.uploadId;
+        const maxMegaBytesTotal = Math.round((this.maxBytesTotal ? this.maxBytesTotal : this.maxBytes * this.maxFiles) / 1024 / 1024);
+        const maxMegaBytesPrFile = Math.round(this.maxBytes / 1024 / 1024);
+        let caption = this.description.replace(/{maxfiles}/g, this.maxFiles.toString());
+        caption = caption.replace(/{maxbytes}/g, `${maxMegaBytesPrFile.toString()} MB`);
+        caption = caption.replace(/{maxbytestotal}/g, `${maxMegaBytesTotal.toString()} MB`);
+        caption = caption.replace(/{filetypes}/g, this.allowedExtensions.split(",").join(", "));
+        if (this.externalUploadButton) {
+            this.externalUploadButton.accessibleLabel = caption;
+        }
+        // @ts-ignore
+        return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h("slot", { name: "header" }), !this.files.size && (h("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { margin: "none" }, 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.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { name: "filefooter" }), h("slot", { name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { margin: "none", size: "small" }, h("div", { class: "upload-bottom-caption" }, caption))), h("slot", { name: "afterfooter" }), !this.hideButton && (h(Fragment, null, 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", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached ||
+            this.bytesMaxReached ||
+            this.filesToUploadExceedsLimit ||
+            this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, null, h("duet-spacer", { size: "medium" }), h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h("duet-visually-hidden", { "aria-hidden": "true" }, 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, tabIndex: -1 })))));
+    }
+    /**
+     * 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);
+        });
+        let options = {
+            payload: { data, name },
+            options: { type: "POST", uri: this.uri, xhr, argument: null, headers: undefined },
+            onFailure: this.transferDoneWithFailure,
+            onSuccess: this.transferDone,
+            onProgress: this.trackProgress,
+        };
+        if (this.middleware) {
+            options = this.middleware(options);
+        }
+        return makeXhrRequest(options);
+    }
+    makeXHRDeleteRequest(data) {
+        const { uid, item } = data;
+        const xhr = new XMLHttpRequest();
+        const headers = {
+            "x-fileuid": uid,
+            "x-filename": item.name,
+        };
+        let options = {
+            payload: { data: null, name },
+            options: {
+                type: "DELETE",
+                xhr,
+                uri: this.uri,
+                argument: `?key=${uid}&name=${item.name}`,
+                headers,
+            },
+            onFailure: this.transferDoneWithFailure,
+            onSuccess: this.transferDone,
+            onProgress: this.trackProgress,
+        };
+        if (this.middleware) {
+            options = this.middleware(options);
+        }
+        // don't present server issues to user on deletes, just remove them from the visible list
+        return makeXhrRequest(options);
+    }
+    /**
+     * 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)
+        this.filesToUploadExceedsLimit = false;
+        if (filesToUploadCountAboveMax(this.files.size, selectedFiles.length, this.maxFiles)) {
+            this.filesToUploadExceedsLimit = true;
+            this.kick();
+            return;
+        }
+        this.filesToUploadTotalSizeIsAboveMax = false;
+        if (filesToUploadTotalSizeIsAboveMax(this.files, selectedFiles, this.maxBytesTotal)) {
+            this.filesToUploadTotalSizeIsAboveMax = true;
+            this.kick();
+            return;
+        }
+        if (selectedFiles) {
+            for (const item of selectedFiles) {
+                const { valid, errorMessage, errorType, errorSystem } = validateFile(item, {
+                    maxBytes: this.maxBytes,
+                    allowedExtensions: this.allowedExtensions,
+                    allowedMimetypes: this.allowedMimetypes,
+                }, this.errorCodes);
+                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);
+                if (valid && !this.external) {
+                    await this.uploadFile(fileListItem);
+                }
+                else if (valid && this.external) {
+                    this.updateValueInMap(fileListItem.item.name, "pending", true, false);
+                    this.updateValueInMap(fileListItem.item.name, "group", "pending", true);
+                }
+                else if (!valid) {
+                    this.updateValueInMap(item.name, "valid", false, true);
+                }
+                // kick the stat to force update
+                this.kick();
             }
-          },
-          "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": ""
+        // 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",
+        });
+    }
+    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"
+            },
+            "middleware": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "XHRInternalMiddleWare",
+                    "resolved": "(XHRMiddlewareOptions: any) => XHRMiddlewareOptions",
+                    "references": {
+                        "XHRInternalMiddleWare": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "id": "src/components/duet-upload/duet-upload.tsx::XHRInternalMiddleWare"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If internal upload method is used, and this has been set to a function - it will be called with the XHR options before the reqeust is sent, return an updated XHR options object in order to manipulate the request"
+                },
+                "defaultValue": "null"
+            },
+            "deferUpload": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If defer-upload is true, duet-upload will not (as recommended) instantly upload files but await a call to uploadPending()"
+                },
+                "attribute": "defer-upload",
+                "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 one yourself\nand call the exposed method startUpload to open the upload dialog"
+                },
+                "attribute": "hide-upload-button",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "actions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetEditableTableActions",
+                    "resolved": "{ icon: string; color: string; background: string; size: DuetActionButtonIconSize; name: string; map?: string[]; label?: DuetLangObject; }[]",
+                    "references": {
+                        "DuetEditableTableActions": {
+                            "location": "import",
+                            "path": "../duet-editable-table/duet-editable-table",
+                            "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetEditableTableActions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default actions added to the internally used duet-editable-table"
+                },
+                "defaultValue": "[\n    {\n      icon: \"action-delete\",\n      color: \"color-danger\",\n      size: \"x-small\",\n      background: \"gray-lightest\",\n      name: \"delete\",\n      map: [\"success\", \"failure\"],\n      label: {\n        fi: \"Poista tiedosto\",\n        en: \"Delete the file\",\n        sv: \"Ta bort filen\",\n      },\n    },\n    {\n      icon: \"navigation-close\",\n      color: \"primary\",\n      size: \"x-small\",\n      background: \"gray-lightest\",\n      name: \"cancel\",\n      map: [\"inprogress\", \"pending\"],\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 editable-table will display links on successfully uploaded items,\nthis requires the server can respond with link URIs in the correct format\nand that the files are accessible to the user"
+                },
+                "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",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{\nfi: {\ninProgress: \"L\u00E4hetet\u00E4\u00E4n {filesUploaded}, yhteens\u00E4 l\u00E4hetett\u00E4v\u00E4n\u00E4 {filesTotal}.\",\ninProgressWithErrors:\n\"L\u00E4hetet\u00E4\u00E4n {filesInProgress}, l\u00E4hetetty {filesUploaded}, yhteens\u00E4 l\u00E4hetett\u00E4v\u00E4n\u00E4 {filesTotal}, {filesWithErrors} ep\u00E4onnistui\",\ndone: \"L\u00E4hetys valmis, {filesTotal} lis\u00E4tty onnistuneesti\",\ndoneWithErrors: \"L\u00E4hetys valmis, {filesUploaded} lis\u00E4tty onnistuneesti, {filesWithErrors} ep\u00E4onnistui\",\nfiles: \"tiedostoa\",\nfile: \"tiedosto\",\n},\nsv: {\ninProgress: \"Laddar upp {filesUploaded} av {filesTotal}\",\ninProgressWithErrors:\n\"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\ndone: \"Uppladdningen slutf\u00F6rd, {filesTotal} har lagts till\",\ndoneWithErrors: \"Uppladdningen slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\nfiles: \"filer\",\nfile: \"fil\",\n},\nen: {\ninProgress: \"Uploading {filesUploaded} of {filesTotal}\",\ninProgressWithErrors:\n\"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\ndone: \"Upload completed, {filesTotal} added successfully\",\ndoneWithErrors: \"Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.\",\nfiles: \"files\",\nfile: \"file\",\n},\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}, yhteens\u00E4 l\u00E4hetett\u00E4v\u00E4n\u00E4 {filesTotal}.\",\n      inProgressWithErrors:\n        \"L\u00E4hetet\u00E4\u00E4n {filesInProgress}, l\u00E4hetetty {filesUploaded}, yhteens\u00E4 l\u00E4hetett\u00E4v\u00E4n\u00E4 {filesTotal}, {filesWithErrors} ep\u00E4onnistui\",\n      done: \"L\u00E4hetys valmis, {filesTotal} lis\u00E4tty onnistuneesti\",\n      doneWithErrors: \"L\u00E4hetys valmis, {filesUploaded} lis\u00E4tty onnistuneesti, {filesWithErrors} ep\u00E4onnistui\",\n      files: \"tiedostoa\",\n      file: \"tiedosto\",\n    },\n    sv: {\n      inProgress: \"Laddar upp {filesUploaded} av {filesTotal}\",\n      inProgressWithErrors:\n        \"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\n      done: \"Uppladdningen slutf\u00F6rd, {filesTotal} har lagts till\",\n      doneWithErrors: \"Uppladdningen slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\n      files: \"filer\",\n      file: \"fil\",\n    },\n    en: {\n      inProgress: \"Uploading {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\n      done: \"Upload completed, {filesTotal} added successfully\",\n      doneWithErrors: \"Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.\",\n      files: \"files\",\n      file: \"file\",\n    },\n  }"
+            },
+            "statusMessageLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusMessage | string",
+                    "resolved": "string | { inProgress: string; inProgressWithErrors: string; done: string; doneWithErrors: string; file: string; files: string; }",
+                    "references": {
+                        "StatusMessage": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::StatusMessage"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Strings used for the status aria-label"
+                },
+                "attribute": "status-message-label",
+                "reflect": false,
+                "defaultValue": "getLocaleString(\n    this.statusLabelDefaults\n  )"
+            },
+            "buttonLabelDefaults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject | string",
+                    "resolved": "DuetLangObject | string",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "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 button label defaults on the component."
+                },
+                "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 aria-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",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/common-types.d.ts::DuetMargin"
+                        }
+                    }
+                },
+                "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"
+            },
+            "alignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Key used to set vertical alignment of action buttons"
+                },
+                "attribute": "alignment",
+                "reflect": false,
+                "defaultValue": "\"middle\""
+            },
+            "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "id": "src/components/duet-upload/duet-upload.tsx::StringMap"
+                        }
+                    }
+                },
+                "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 the internally used editable-table 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",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{\nen: \"You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.\",\nsv: \"Du kan bifoga f\u00F6ljande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer \u00E5t g\u00E5ngen, och l\u00E4gga till upp till {maxfiles} bilagor \u00E5t g\u00E5ngen varje inte st\u00F6rre \u00E4n {maxbytes}.\",\nfi: \"Voit liitt\u00E4\u00E4 seuraavat tiedostotyypit: {filetypes} - sek\u00E4 yleisimm\u00E4t videotiedostot. Voit l\u00E4hett\u00E4\u00E4 {maxbytestotal} tiedostoa kerrallaan, ja lis\u00E4t\u00E4 enint\u00E4\u00E4n {maxfiles} liitett\u00E4 kerrallaan, jokainen enint\u00E4\u00E4n {maxbytes} kokoisena.\",\n}"
+                        }],
+                    "text": "Property to change descriptionDefaults defaults on the component."
+                },
+                "attribute": "description-default",
+                "reflect": false,
+                "defaultValue": "{\n    en: \"You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.\",\n    sv: \"Du kan bifoga f\u00F6ljande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer \u00E5t g\u00E5ngen, och l\u00E4gga till upp till {maxfiles} bilagor \u00E5t g\u00E5ngen varje inte st\u00F6rre \u00E4n {maxbytes}.\",\n    fi: \"Voit liitt\u00E4\u00E4 seuraavat tiedostotyypit: {filetypes} - sek\u00E4 yleisimm\u00E4t videotiedostot. Voit l\u00E4hett\u00E4\u00E4 {maxbytestotal} tiedostoa kerrallaan, ja lis\u00E4t\u00E4 enint\u00E4\u00E4n {maxfiles} liitett\u00E4 kerrallaan, jokainen enint\u00E4\u00E4n {maxbytes} kokoisena.\",\n  }"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{\nen: \"You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.\",\nsv: \"Du kan bifoga f\u00F6ljande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer \u00E5t g\u00E5ngen, och l\u00E4gga till upp till {maxfiles} bilagor \u00E5t g\u00E5ngen varje inte st\u00F6rre \u00E4n {maxbytes}.\",\nfi: \"Voit liitt\u00E4\u00E4 seuraavat tiedostotyypit: {filetypes} - sek\u00E4 yleisimm\u00E4t videotiedostot. Voit l\u00E4hett\u00E4\u00E4 {maxbytestotal} tiedostoa kerrallaan, ja lis\u00E4t\u00E4 enint\u00E4\u00E4n {maxfiles} liitett\u00E4 kerrallaan, jokainen enint\u00E4\u00E4n {maxbytes} kokoisena.\",\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",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "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": "\"\""
+            },
+            "errorCodes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetUploadErrorCode[]",
+                    "resolved": "DuetUploadErrorCode[]",
+                    "references": {
+                        "DuetUploadErrorCode": {
+                            "location": "import",
+                            "path": "./errorcodes.utils",
+                            "id": "src/components/duet-upload/errorcodes.utils.ts::DuetUploadErrorCode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default errorcodes used by the component, modifiable via javascript"
+                },
+                "defaultValue": "errorCodes"
+            },
+            "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"
+            },
+            "hideCancelButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use hideCancelButton to hide cancel button for pending and in progress uploads"
+                },
+                "attribute": "hide-cancel-button",
+                "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
+            },
+            "externalUploadButtonId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Id of external uploadButton of the input used for setting accessibility attributes."
+                },
+                "attribute": "external-upload-button-id",
+                "reflect": false
+            },
+            "captionOnBottom": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true the input caption will be placed below file list and footer"
+                },
+                "attribute": "caption-on-bottom",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showUploadedItemsHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use show-uploaded-items-header to show single, generic, header for uploaded items"
+                },
+                "attribute": "show-uploaded-items-header",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "uploadedItemsHeaderLabel": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject",
+                    "resolved": "DuetLangObject",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{\nfi: \"Ladattu tiedosto.\",\nsv: \"Nedladdad fil.\",\nen: \"Uploaded file.\",\n}"
+                        }],
+                    "text": "Property to change single uploaded items header label"
+                },
+                "defaultValue": "{\n    fi: \"Ladattu tiedosto\",\n    sv: \"L\u00E4gg till en bilaga\",\n    en: \"Uploaded file\",\n  }"
+            },
+            "headerHeadingLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetHeadingLevel",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {
+                        "DuetHeadingLevel": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetHeadingLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading level for the label in the legend element. This is only used to give screen readers better logical structure.\nThis does not affect visual appearance."
+                },
+                "attribute": "header-heading-level",
+                "reflect": false,
+                "defaultValue": "\"h3\""
+            },
+            "hideHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use hide-header to hide upload component header and caption (if caption is not on bottom)"
+                },
+                "attribute": "hide-header",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "emitEvent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If link-click-event is set to true then upload component\nwill emit an event on uploaded file link click (check linkClick event)."
+                },
+                "attribute": "link-click-event",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "groups": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetUploadTableGroupName[]",
+                    "resolved": "DuetUploadTableGroupName[]",
+                    "references": {
+                        "DuetUploadTableGroupName": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadTableGroupName"
+                        }
+                    }
+                },
+                "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 to use to display files"
+                },
+                "defaultValue": "[\n    {\n      id: this.DefaultGroups.success,\n      label: {\n        fi: \"Valmiit tiedostot\",\n        sv: \"Files success\",\n        en: \"Files success\",\n      },\n    },\n    {\n      id: this.DefaultGroups.failure,\n      label: {\n        fi: \"Tiedostot, joissa on virheit\u00E4\",\n        sv: \"Filer med fel\",\n        en: \"Files with errors\",\n      },\n    },\n    {\n      id: this.DefaultGroups.inprogress,\n      label: {\n        fi: \"Kesken olevat tiedostot\",\n        sv: \"Filer inprogress\",\n        en: \"Files inprogress\",\n      },\n    },\n    {\n      id: this.DefaultGroups.pending,\n      label: {\n        en: \"Files to upload\",\n        sv: \"Filer att ladda\",\n        fi: \"Ladattavat tiedostot\",\n      },\n    },\n  ]"
+            }
+        };
+    }
+    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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+                        }
+                    }
+                }
             }, {
-              "tags": [],
-              "text": ""
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+                        }
+                    }
+                }
             }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Convenience method for updating the value of a key:value inside an item in the files attribute",
-          "tags": []
-        }
-      },
-      "focusActionButton": {
-        "complexType": {
-          "signature": "(uid: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetReady",
+                "name": "duetReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the component is finished initializing"
+                },
+                "complexType": {
+                    "original": "DuetUploadEvent",
+                    "resolved": "{ originalEvent?: Event; data?: Record<string, any>; metaData?: Record<string, any>; component: \"duet-upload\"; }",
+                    "references": {
+                        "DuetUploadEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "linkClick",
+                "name": "linkClick",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user clicks the uploaded file link and link-click-event prop is set to true"
+                },
+                "complexType": {
+                    "original": "DuetUploadEvent",
+                    "resolved": "{ originalEvent?: Event; data?: Record<string, any>; metaData?: Record<string, any>; component: \"duet-upload\"; }",
+                    "references": {
+                        "DuetUploadEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "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": [{
+                            "name": "metaData",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method for invoking the upload sequence",
+                    "tags": []
+                }
+            },
+            "uploadPending": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method for uploading pending files",
+                    "tags": []
+                }
+            },
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method for forcing a render of the upload list, element.files can be changed externally\nBut it will only rerender on a new Map or a top Level change - this can be used to update\nthe tabular data if the automatic re-render is no sufficient",
+                    "tags": []
+                }
+            },
+            "getFiles": {
+                "complexType": {
+                    "signature": "() => Promise<false | { valid: any[]; invalid: any[]; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "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": [{
+                            "name": "item",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "key",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "value",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Convenience method for updating the value of a key:value inside an item in the files attribute",
+                    "tags": []
+                }
+            },
+            "focusActionButton": {
+                "complexType": {
+                    "signature": "(uid: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "uid",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "focusActionButton.",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "focusActionButton.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "valid",
-        "methodName": "watchValidHandler"
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "valid",
+                "methodName": "watchValidHandler"
+            }];
+    }
 }