@duetds/components 8.0.6 → 8.1.0

package/lib/dist-custom-elements/duet-upload.js

@@ -1,29 +1,29 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h as h$1, F as Fragment, d as Host } from './p-7247d0b2.js';
-import { i as inheritGlobalTheme } from './p-d48735b6.js';
-import { c as createID } from './p-45f71a69.js';
-import { d as debounce } from './p-3d8d557b.js';
-import { g as getLocaleString, s as sanitizeString } from './p-4883df66.js';
-import { g as getError, d as defineCustomElement$3, a as getI18nError } from './p-665418f0.js';
+import { p as proxyCustomElement, H, c as createEvent, h as h$1, F as Fragment, d as Host } from './p-6f7dcc4d.js';
+import { i as inheritGlobalTheme } from './p-a58bd561.js';
+import { c as createID } from './p-5e59e970.js';
+import { d as debounce } from './p-9e371678.js';
+import { g as getLocaleString, s as sanitizeString } from './p-2e36d5bf.js';
+import { g as getError, d as defineCustomElement$3, a as getI18nError } from './p-0a7c0d3d.js';
 import { h } from './p-62c7d9d4.js';
-import { d as defineCustomElement$i } from './p-fe8a2205.js';
-import { d as defineCustomElement$h } from './p-1f56e02f.js';
-import { d as defineCustomElement$g } from './p-d0987122.js';
-import { d as defineCustomElement$f } from './p-2b1a35cd.js';
-import { d as defineCustomElement$e } from './p-e77f7fff.js';
-import { d as defineCustomElement$d } from './p-8be301dd.js';
-import { d as defineCustomElement$c } from './p-64cd1abb.js';
-import { d as defineCustomElement$b } from './p-c0af301d.js';
-import { d as defineCustomElement$a } from './p-180c0d2d.js';
-import { d as defineCustomElement$9 } from './p-3049dfd5.js';
-import { d as defineCustomElement$8 } from './p-6c2e13f0.js';
-import { d as defineCustomElement$7 } from './p-5d8d9a52.js';
-import { d as defineCustomElement$6 } from './p-3ccd454b.js';
-import { d as defineCustomElement$5 } from './p-bcfb9e03.js';
-import { d as defineCustomElement$4 } from './p-f46be918.js';
-import { d as defineCustomElement$2 } from './p-62e68de8.js';
+import { d as defineCustomElement$i } from './p-402e81c0.js';
+import { d as defineCustomElement$h } from './p-247a9d01.js';
+import { d as defineCustomElement$g } from './p-a6e6f578.js';
+import { d as defineCustomElement$f } from './p-5fe36e8b.js';
+import { d as defineCustomElement$e } from './p-98746766.js';
+import { d as defineCustomElement$d } from './p-2605a78e.js';
+import { d as defineCustomElement$c } from './p-872a2adb.js';
+import { d as defineCustomElement$b } from './p-ba0f907f.js';
+import { d as defineCustomElement$a } from './p-76b345c8.js';
+import { d as defineCustomElement$9 } from './p-257f2e82.js';
+import { d as defineCustomElement$8 } from './p-a45d0398.js';
+import { d as defineCustomElement$7 } from './p-9b5f8ba4.js';
+import { d as defineCustomElement$6 } from './p-dfd29738.js';
+import { d as defineCustomElement$5 } from './p-d5fc2405.js';
+import { d as defineCustomElement$4 } from './p-598731b0.js';
+import { d as defineCustomElement$2 } from './p-d5f3b174.js';
 
 const errorCodes = [
 	{
@@ -173,1206 +173,1206 @@ const errorCodes = [
 ];
 
 const headerAriaLabel = {
-  fi: "Liiteluettelo",
-  sv: "Lista över bilagor",
-  en: "Attachments list",
+    fi: "Liiteluettelo",
+    sv: "Lista över bilagor",
+    en: "Attachments list",
 };
 const UploadItemHeader = ({ label, categoryLabel }) => {
-  return (h("div", { class: "items-header", tabindex: "0", "aria-label": getLocaleString(headerAriaLabel) },
-    categoryLabel && (h("duet-heading", { class: "category-header", border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none", "aria-hidden": "true" }, getLocaleString(categoryLabel))),
-    h("duet-heading", { class: { "filename-header": true, "no-category": !categoryLabel }, border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none", "aria-hidden": "true" }, getLocaleString(label))));
+    return (h("div", { class: "items-header", tabindex: "-1", "aria-label": getLocaleString(headerAriaLabel) },
+        categoryLabel && (h("duet-heading", { class: "category-header", border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none", "aria-hidden": "true" }, getLocaleString(categoryLabel))),
+        h("duet-heading", { class: { "filename-header": true, "no-category": !categoryLabel }, border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none", "aria-hidden": "true" }, getLocaleString(label))));
 };
 
 const validateFileExtension = (name, allowedExtensions) => {
-  if (!allowedExtensions) {
-    return true;
-  }
-  const ext = name.split(".");
-  const validExtension = allowedExtensions.split(",");
-  const extension = ext[ext.length - 1];
-  return validExtension.includes(extension);
+    if (!allowedExtensions) {
+        return true;
+    }
+    const ext = name.split(".");
+    const validExtension = allowedExtensions.split(",");
+    const extension = ext[ext.length - 1];
+    return validExtension.includes(extension);
 };
 const validateFileMime = (type, allowedMimetypes) => {
-  if (!allowedMimetypes || !type) {
-    return true;
-  }
-  const validMimeTypes = allowedMimetypes.split(",");
-  let valid = false;
-  validMimeTypes.forEach(mimeType => {
-    const allowedTypes = mimeType.split("/");
-    const fileType = type.split("/");
-    if (allowedTypes[0] === fileType[0] && (allowedTypes[1] === fileType[1] || allowedTypes[1] === "*")) {
-      valid = true;
+    if (!allowedMimetypes || !type) {
+        return true;
     }
-  });
-  return valid;
+    const validMimeTypes = allowedMimetypes.split(",");
+    let valid = false;
+    validMimeTypes.forEach(mimeType => {
+        const allowedTypes = mimeType.split("/");
+        const fileType = type.split("/");
+        if (allowedTypes[0] === fileType[0] && (allowedTypes[1] === fileType[1] || allowedTypes[1] === "*")) {
+            valid = true;
+        }
+    });
+    return valid;
 };
 const validateFileSize = (size, maxBytes) => {
-  if (!maxBytes || !size) {
-    return true;
-  }
-  return maxBytes >= size;
+    if (!maxBytes || !size) {
+        return true;
+    }
+    return maxBytes >= size;
 };
 const validateFile = (item, validators, errorCodes) => {
-  const { allowedMimetypes, allowedExtensions, maxBytes } = validators;
-  let valid = false;
-  let errorMessage = getError("default", errorCodes);
-  if (item) {
-    const { name, type, size } = item;
-    const mime = validateFileMime(type, allowedMimetypes);
-    const ext = allowedExtensions === "all" ||
-      allowedExtensions === "" ||
-      allowedExtensions === " " ||
-      allowedExtensions === undefined
-      ? true
-      : validateFileExtension(name.toLowerCase(), allowedExtensions);
-    const bytes = validateFileSize(size, maxBytes);
-    if (!mime) {
-      errorMessage = getError("duet-upload-101", errorCodes);
-    }
-    if (!ext) {
-      errorMessage = getError("duet-upload-100", errorCodes);
+    const { allowedMimetypes, allowedExtensions, maxBytes } = validators;
+    let valid = false;
+    let errorMessage = getError("default", errorCodes);
+    if (item) {
+        const { name, type, size } = item;
+        const mime = validateFileMime(type, allowedMimetypes);
+        const ext = allowedExtensions === "all" ||
+            allowedExtensions === "" ||
+            allowedExtensions === " " ||
+            allowedExtensions === undefined
+            ? true
+            : validateFileExtension(name.toLowerCase(), allowedExtensions);
+        const bytes = validateFileSize(size, maxBytes);
+        if (!mime) {
+            errorMessage = getError("duet-upload-101", errorCodes);
+        }
+        if (!ext) {
+            errorMessage = getError("duet-upload-100", errorCodes);
+        }
+        if (!bytes) {
+            errorMessage = getError("duet-upload-201", errorCodes);
+        }
+        valid = mime && ext && bytes;
     }
-    if (!bytes) {
-      errorMessage = getError("duet-upload-201", errorCodes);
+    else {
+        valid = false;
     }
-    valid = mime && ext && bytes;
-  }
-  else {
-    valid = false;
-  }
-  return {
-    valid,
-    errorMessage: valid ? undefined : getLocaleString(errorMessage.message),
-    errorSystem: valid ? undefined : errorMessage.system_message,
-    errorType: valid ? undefined : errorMessage.type,
-  };
+    return {
+        valid,
+        errorMessage: valid ? undefined : getLocaleString(errorMessage.message),
+        errorSystem: valid ? undefined : errorMessage.system_message,
+        errorType: valid ? undefined : errorMessage.type,
+    };
 };
 const validateTotalSizeIsAboveMax = (filelist, maxTotalBytes) => {
-  let total = 0;
-  if (maxTotalBytes) {
-    filelist.forEach(item => {
-      if (item.valid && item.size) {
-        total += item.size;
-      }
-    });
-    if (total >= maxTotalBytes) {
-      return true;
+    let total = 0;
+    if (maxTotalBytes) {
+        filelist.forEach(item => {
+            if (item.valid && item.size) {
+                total += item.size;
+            }
+        });
+        if (total >= maxTotalBytes) {
+            return true;
+        }
     }
-  }
-  return false;
+    return false;
 };
 const validateTotalAmountIsAboveMax = (filelist, maxFiles) => {
-  let total = 0;
-  if (maxFiles) {
-    filelist.forEach(item => {
-      if (item.valid) {
-        total++;
-      }
-    });
-    if (total >= maxFiles) {
-      return true;
+    let total = 0;
+    if (maxFiles) {
+        filelist.forEach(item => {
+            if (item.valid) {
+                total++;
+            }
+        });
+        if (total >= maxFiles) {
+            return true;
+        }
     }
-  }
-  return false;
+    return false;
 };
 const filesToUploadCountAboveMax = (currentFilesCount, filesToUploadCount, maxFiles) => {
-  if (currentFilesCount + filesToUploadCount > maxFiles) {
-    return true;
-  }
-  return false;
+    if (currentFilesCount + filesToUploadCount > maxFiles) {
+        return true;
+    }
+    return false;
 };
 const filesToUploadTotalSizeIsAboveMax = (currentFiles, filesToUpload, maxTotalBytes) => {
-  let total = 0;
-  if (maxTotalBytes) {
-    currentFiles.forEach(item => {
-      if (item.valid && item.size) {
-        total += item.size;
-      }
-    });
-    filesToUpload.forEach(item => {
-      if (item.size) {
-        total += item.size;
-      }
-    });
-    if (total >= maxTotalBytes) {
-      return true;
+    let total = 0;
+    if (maxTotalBytes) {
+        currentFiles.forEach(item => {
+            if (item.valid && item.size) {
+                total += item.size;
+            }
+        });
+        filesToUpload.forEach(item => {
+            if (item.size) {
+                total += item.size;
+            }
+        });
+        if (total >= maxTotalBytes) {
+            return true;
+        }
     }
-  }
-  return false;
+    return false;
 };
 
 const makeXhrRequest = ({ payload, options, onFailure, onSuccess, onProgress }) => {
-  // @ts-ignore
-  const { type = "POST", xhr, uri, argument = null, headers = null } = options;
-  xhr.open(type, `${uri}${argument || ""}`, true);
-  const { data, name } = payload;
-  // headers must be added after open
-  if (headers) {
-    Object.keys(headers).forEach(key => {
-      xhr.setRequestHeader(key, headers[key]);
-    });
-  }
-  if (type === "POST") {
-    xhr.onreadystatechange = () => {
-      // Call a function when the state changes.
-      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status >= 200 && xhr.status < 300) {
-        // Request finished without errors
-        onSuccess(xhr, name, xhr.status);
-      }
-      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status >= 300 && xhr.status < 999) {
-        // Request finished with errors
-        onFailure(xhr, name, xhr.status);
-      }
-    };
-    onProgress(name);
-  }
-  xhr.send(data);
-  return xhr;
+    // @ts-ignore
+    const { type = "POST", xhr, uri, argument = null, headers = null } = options;
+    xhr.open(type, `${uri}${argument || ""}`, true);
+    const { data, name } = payload;
+    // headers must be added after open
+    if (headers) {
+        Object.keys(headers).forEach(key => {
+            xhr.setRequestHeader(key, headers[key]);
+        });
+    }
+    if (type === "POST") {
+        xhr.onreadystatechange = () => {
+            // Call a function when the state changes.
+            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status >= 200 && xhr.status < 300) {
+                // Request finished without errors
+                onSuccess(xhr, name, xhr.status);
+            }
+            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status >= 300 && xhr.status < 999) {
+                // Request finished with errors
+                onFailure(xhr, name, xhr.status);
+            }
+        };
+        onProgress(name);
+    }
+    xhr.send(data);
+    return xhr;
 };
 
 const duetUploadCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=header]){margin-bottom:16px}::slotted([slot=fileheader]){margin:16px 0 0 0}::slotted([slot=filefooter]){margin-top:16px}::slotted([slot=uploadfooter]){margin-top:20px}.duet-upload{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-upload-item-size{font-size:0.75rem;font-weight:400}.duet-upload-filelist{margin-bottom:25px}.duet-upload-filelist-empty{display:flex;align-items:center;justify-content:center;width:100%;height:75px;margin:0 auto;font-size:1rem;font-weight:400;background-color:rgb(245, 248, 250)}.duet-upload-filelist-empty-label{font-size:1rem;font-weight:400}.duet-upload-editable-table-header-hidden{display:none}.duet-upload-editable-table tbody .duet-upload-editable-table-data{padding:0 !important;border:0}.duet-upload-editable-table duet-editable-table tfoot,.duet-upload-editable-table duet-editable-table thead{display:none}.duet-upload-editable-table duet-editable-table .duet-editable-table-content{padding-right:0 !important;padding-left:0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td{padding:1rem 0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td:last-child{padding-right:0 !important}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress,.duet-upload-editable-table duet-editable-table .duet-editable-table-row-pending{position:relative}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-progress,.duet-upload-editable-table duet-editable-table .duet-editable-table-row-pending duet-progress{position:absolute;bottom:0;width:100%}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-action-button::part(button),.duet-upload-editable-table duet-editable-table .duet-editable-table-row-pending duet-action-button::part(button){border:0}duet-paragraph::part(duet-paragraph){word-break:break-word}duet-editable-table tfoot{display:none}.upload-bottom-caption{margin-top:12px;margin-bottom:16px;line-height:1.4rem}.items-header{display:none;flex-direction:row;margin-bottom:0}@media (min-width: 36em){.items-header{display:flex}}.items-header:not(:last-child),.items-header:not(:first-child){margin-top:12px}.items-header .category-header{width:35%}.items-header .filename-header{width:65%}.items-header .filename-header.no-category{width:100%}.upload-item-row{display:flex;flex-direction:column;gap:16px;align-content:center;align-items:center;padding:16px 0 16px 0;border-bottom:1px solid rgb(225, 227, 230)}@media (min-width: 36em){.upload-item-row{flex-direction:row;gap:10px}}.upload-item-row .item-categories{width:100%}@media (min-width: 36em){.upload-item-row .item-categories{width:35%}}.upload-item-row .item-name{position:relative;bottom:2px;width:100%;text-align:left}@media (min-width: 36em){.upload-item-row .item-name{width:50%}.upload-item-row .item-name.no-category{width:85%}}.upload-item-row .item-categories .heading,.upload-item-row .item-name .heading{display:block}@media (min-width: 36em){.upload-item-row .item-categories .heading,.upload-item-row .item-name .heading{display:none}}.upload-item-row .item-actions{width:100%;margin-left:-8px;text-align:left}@media (min-width: 36em){.upload-item-row .item-actions{width:15%;padding-top:0;margin-left:auto;text-align:right}}.upload-item-row .duet-upload-item-name duet-icon{position:relative;top:4px}.upload-item-row .duet-upload-item-name duet-progress{display:block;margin-top:16px}";
 
 const DuetUpload$1 = /*@__PURE__*/ proxyCustomElement(class DuetUpload extends H {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.duetChange = createEvent(this, "duetChange", 3);
-    this.duetBlur = createEvent(this, "duetBlur", 7);
-    this.duetFocus = createEvent(this, "duetFocus", 7);
-    this.duetReady = createEvent(this, "duetReady", 7);
-    this.duetDone = createEvent(this, "duetDone", 3);
-    this.duetState = createEvent(this, "duetState", 3);
-    this.duetDelete = createEvent(this, "duetDelete", 3);
-    this.duetCancel = createEvent(this, "duetCancel", 3);
-    this.duetProgress = createEvent(this, "duetProgress", 3);
-    this.duetUpload = createEvent(this, "duetUpload", 3);
-    this.linkClick = createEvent(this, "linkClick", 3);
-    /**
-     * 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",
-    };
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.duetChange = createEvent(this, "duetChange", 3);
+        this.duetBlur = createEvent(this, "duetBlur", 7);
+        this.duetFocus = createEvent(this, "duetFocus", 7);
+        this.duetReady = createEvent(this, "duetReady", 7);
+        this.duetDone = createEvent(this, "duetDone", 3);
+        this.duetState = createEvent(this, "duetState", 3);
+        this.duetDelete = createEvent(this, "duetDelete", 3);
+        this.duetCancel = createEvent(this, "duetCancel", 3);
+        this.duetProgress = createEvent(this, "duetProgress", 3);
+        this.duetUpload = createEvent(this, "duetUpload", 3);
+        this.linkClick = createEvent(this, "linkClick", 3);
+        /**
+         * 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;
+                    // 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$1("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$1("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$1("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$1("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$1(Fragment, null, !this.hideGroups && (h$1(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: group.label })), currentItems.map(item => this.mapFilesToUploadItems(item.data, group.id, hasCategory, filteredActions))));
+            });
+            return (h$1(Fragment, null, this.showUploadedItemsHeader && (h$1(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();
+        }
+    }
     /**
-     * Private functions
+     * Component lifecycle events.
      */
-    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;
-          // code block
+    componentWillLoad() {
+        if (typeof this.statusMessageLabel === "string") {
+            this.internalStatusMessageLabel = sanitizeString(this.groups);
         }
-      });
-    };
-    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$1("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$1("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$1("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$1("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 {
+            this.internalStatusMessageLabel = this.statusMessageLabel;
         }
-        else if (!value.valid && !value.deleted) {
-          filesInError.push(value);
+        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 { 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
+     * Method for invoking the upload sequence
      */
-    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) {
+    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.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.handleExternalUploadButton(bytesMaxReached, fileMaxReached);
+            this.kick();
+            return;
         }
-      }
-      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 },
-      });
-    };
+        this.metaData = metaData;
+        this.nativeInput.click();
+        return;
+    }
     /**
-     * @description This functions return sorted map items byg condition which are:
+     * Method for uploading pending files
      */
-    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$1(Fragment, null, !this.hideGroups && (h$1(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: group.label })), currentItems.map(item => this.mapFilesToUploadItems(item.data, group.id, hasCategory, filteredActions))));
-      });
-      return (h$1(Fragment, null, this.showUploadedItemsHeader && (h$1(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();
+    async uploadPending() {
+        this.uploadPendingFiles();
     }
-  }
-  /**
-   * 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;
+    /**
+     * 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();
     }
-    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;
+    /**
+     * Get list of files, divided in errors and valid sections
+     */
+    async getFiles() {
+        if (!this.files || this.files.size === 0) {
+            return false;
+        }
+        return this.getFilesAsArray();
     }
-    // @ts-ignore
-    return (h$1(Host, { class: { "duet-m-0": this.margin === "none" } }, h$1("duet-fieldset", { "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h$1("slot", { name: "header" }), !this.files.size && (h$1("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h$1("duet-paragraph", { margin: "none" }, this.fileListEmpty))), !!this.files.size && h$1("slot", { name: "fileheader" }), !!this.files.size && (h$1("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$1("slot", { name: "filefooter" }), h$1("slot", { name: "uploadfooter" }), this.captionOnBottom && (h$1("duet-caption", { margin: "none", size: "small" }, h$1("div", { class: "upload-bottom-caption" }, caption))), h$1("slot", { name: "afterfooter" }), !this.hideButton && (h$1(Fragment, null, h$1("duet-spacer", { size: "large" }), h$1("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$1(Fragment, null, h$1("duet-spacer", { size: "medium" }), h$1("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$1("duet-visually-hidden", { "aria-hidden": "true" }, h$1("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);
+    /**
+     * 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);
     }
-    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);
+    /**
+     * focusActionButton.
+     */
+    async focusActionButton(uid) {
+        var _a;
+        await ((_a = this.itemRefs.get(uid)) === null || _a === void 0 ? void 0 : _a.focusActionButton());
     }
-    // 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;
+    /**
+     * 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$1(Host, { class: { "duet-m-0": this.margin === "none" } }, h$1("duet-fieldset", { "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h$1("slot", { name: "header" }), !this.files.size && (h$1("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h$1("duet-paragraph", { margin: "none" }, this.fileListEmpty))), !!this.files.size && h$1("slot", { name: "fileheader" }), !!this.files.size && (h$1("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$1("slot", { name: "filefooter" }), h$1("slot", { name: "uploadfooter" }), this.captionOnBottom && (h$1("duet-caption", { margin: "none", size: "small" }, h$1("div", { class: "upload-bottom-caption" }, caption))), h$1("slot", { name: "afterfooter" }), !this.hideButton && (h$1(Fragment, null, h$1("duet-spacer", { size: "large" }), h$1("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$1(Fragment, null, h$1("duet-spacer", { size: "medium" }), h$1("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$1("duet-visually-hidden", { "aria-hidden": "true" }, h$1("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 })))));
     }
-    this.filesToUploadTotalSizeIsAboveMax = false;
-    if (filesToUploadTotalSizeIsAboveMax(this.files, selectedFiles, this.maxBytesTotal)) {
-      this.filesToUploadTotalSizeIsAboveMax = true;
-      this.kick();
-      return;
+    /**
+     * 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);
     }
-    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,
+    makeXHRDeleteRequest(data) {
+        const { uid, item } = data;
+        const xhr = new XMLHttpRequest();
+        const headers = {
+            "x-fileuid": uid,
+            "x-filename": item.name,
         };
-        this.files.set(item.name, fileListItem);
-        if (valid && !this.external) {
-          await this.uploadFile(fileListItem);
+        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;
         }
-        else if (valid && this.external) {
-          this.updateValueInMap(fileListItem.item.name, "pending", true, false);
-          this.updateValueInMap(fileListItem.item.name, "group", "pending", true);
+        this.filesToUploadTotalSizeIsAboveMax = false;
+        if (filesToUploadTotalSizeIsAboveMax(this.files, selectedFiles, this.maxBytesTotal)) {
+            this.filesToUploadTotalSizeIsAboveMax = true;
+            this.kick();
+            return;
         }
-        else if (!valid) {
-          this.updateValueInMap(item.name, "valid", false, true);
+        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();
+            }
         }
-        // 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",
+        });
     }
-    // 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",
-    });
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "valid": ["watchValidHandler"]
-  }; }
-  static get style() { return duetUploadCss; }
+    get element() { return this; }
+    static get watchers() { return {
+        "valid": ["watchValidHandler"]
+    }; }
+    static get style() { return duetUploadCss; }
 }, [1, "duet-upload", {
-    "accessibleActiveDescendant": [1, "accessible-active-descendant"],
-    "accessibleDescribedBy": [1, "accessible-described-by"],
-    "accessibleControls": [1, "accessible-controls"],
-    "accessibleOwns": [1, "accessible-owns"],
-    "external": [4],
-    "middleware": [16],
-    "deferUpload": [4, "defer-upload"],
-    "hideButton": [4, "hide-upload-button"],
-    "actions": [16],
-    "uri": [1],
-    "showLinks": [4, "show-links"],
-    "caption": [1],
-    "statusLabelDefaults": [1, "status-label-default"],
-    "statusMessageLabel": [1, "status-message-label"],
-    "buttonLabelDefaults": [1, "button-label-default"],
-    "buttonLabel": [1, "button-label"],
-    "accessibleButtonLabel": [1, "accessible-button-label"],
-    "theme": [1025],
-    "disabled": [516],
-    "identifier": [1],
-    "margin": [1],
-    "required": [4],
-    "alignment": [1],
-    "hideGroups": [4, "hide-table-labels"],
-    "files": [1040],
-    "valid": [1540],
-    "labelDefaults": [1, "label-default"],
-    "label": [1],
-    "descriptionDefaults": [1, "description-default"],
-    "description": [1],
-    "fileListEmptyDefaults": [1, "list-empty-default"],
-    "fileListEmpty": [1, "file-list-empty"],
-    "error": [1],
-    "errorCodes": [16],
-    "name": [1],
-    "maxBytes": [2, "max-bytes"],
-    "maxBytesTotal": [2, "max-bytes-total"],
-    "maxFiles": [2, "max-files"],
-    "allowedExtensions": [1, "allowed-extensions"],
-    "allowedMimetypes": [1, "allowed-mimetypes"],
-    "multiple": [4],
-    "limitSelection": [4, "limit-selection"],
-    "hideCancelButton": [4, "hide-cancel-button"],
-    "value": [1025],
-    "externalUploadButtonId": [1, "external-upload-button-id"],
-    "captionOnBottom": [4, "caption-on-bottom"],
-    "showUploadedItemsHeader": [4, "show-uploaded-items-header"],
-    "uploadedItemsHeaderLabel": [16],
-    "headerHeadingLevel": [1, "header-heading-level"],
-    "hideHeader": [4, "hide-header"],
-    "emitEvent": [4, "link-click-event"],
-    "groups": [16],
-    "tick": [32],
-    "setFocus": [64],
-    "upload": [64],
-    "uploadPending": [64],
-    "refresh": [64],
-    "getFiles": [64],
-    "updateValue": [64],
-    "focusActionButton": [64]
-  }, undefined, {
-    "valid": ["watchValidHandler"]
-  }]);
+        "accessibleActiveDescendant": [1, "accessible-active-descendant"],
+        "accessibleDescribedBy": [1, "accessible-described-by"],
+        "accessibleControls": [1, "accessible-controls"],
+        "accessibleOwns": [1, "accessible-owns"],
+        "external": [4],
+        "middleware": [16],
+        "deferUpload": [4, "defer-upload"],
+        "hideButton": [4, "hide-upload-button"],
+        "actions": [16],
+        "uri": [1],
+        "showLinks": [4, "show-links"],
+        "caption": [1],
+        "statusLabelDefaults": [1, "status-label-default"],
+        "statusMessageLabel": [1, "status-message-label"],
+        "buttonLabelDefaults": [1, "button-label-default"],
+        "buttonLabel": [1, "button-label"],
+        "accessibleButtonLabel": [1, "accessible-button-label"],
+        "theme": [1025],
+        "disabled": [516],
+        "identifier": [1],
+        "margin": [1],
+        "required": [4],
+        "alignment": [1],
+        "hideGroups": [4, "hide-table-labels"],
+        "files": [1040],
+        "valid": [1540],
+        "labelDefaults": [1, "label-default"],
+        "label": [1],
+        "descriptionDefaults": [1, "description-default"],
+        "description": [1],
+        "fileListEmptyDefaults": [1, "list-empty-default"],
+        "fileListEmpty": [1, "file-list-empty"],
+        "error": [1],
+        "errorCodes": [16],
+        "name": [1],
+        "maxBytes": [2, "max-bytes"],
+        "maxBytesTotal": [2, "max-bytes-total"],
+        "maxFiles": [2, "max-files"],
+        "allowedExtensions": [1, "allowed-extensions"],
+        "allowedMimetypes": [1, "allowed-mimetypes"],
+        "multiple": [4],
+        "limitSelection": [4, "limit-selection"],
+        "hideCancelButton": [4, "hide-cancel-button"],
+        "value": [1025],
+        "externalUploadButtonId": [1, "external-upload-button-id"],
+        "captionOnBottom": [4, "caption-on-bottom"],
+        "showUploadedItemsHeader": [4, "show-uploaded-items-header"],
+        "uploadedItemsHeaderLabel": [16],
+        "headerHeadingLevel": [1, "header-heading-level"],
+        "hideHeader": [4, "hide-header"],
+        "emitEvent": [4, "link-click-event"],
+        "groups": [16],
+        "tick": [32],
+        "setFocus": [64],
+        "upload": [64],
+        "uploadPending": [64],
+        "refresh": [64],
+        "getFiles": [64],
+        "updateValue": [64],
+        "focusActionButton": [64]
+    }, undefined, {
+        "valid": ["watchValidHandler"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["duet-upload", "duet-action-button", "duet-alert", "duet-badge", "duet-button", "duet-caption", "duet-empty-state", "duet-fieldset", "duet-heading", "duet-icon", "duet-link", "duet-paragraph", "duet-progress", "duet-spacer", "duet-spinner", "duet-upload-aria-status", "duet-upload-item", "duet-visually-hidden"];
-  components.forEach(tagName => { switch (tagName) {
-    case "duet-upload":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, DuetUpload$1);
-      }
-      break;
-    case "duet-action-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$i();
-      }
-      break;
-    case "duet-alert":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$h();
-      }
-      break;
-    case "duet-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$g();
-      }
-      break;
-    case "duet-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$f();
-      }
-      break;
-    case "duet-caption":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$e();
-      }
-      break;
-    case "duet-empty-state":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$d();
-      }
-      break;
-    case "duet-fieldset":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$c();
-      }
-      break;
-    case "duet-heading":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$b();
-      }
-      break;
-    case "duet-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "duet-link":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "duet-paragraph":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "duet-progress":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "duet-spacer":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "duet-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "duet-upload-aria-status":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "duet-upload-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "duet-visually-hidden":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["duet-upload", "duet-action-button", "duet-alert", "duet-badge", "duet-button", "duet-caption", "duet-empty-state", "duet-fieldset", "duet-heading", "duet-icon", "duet-link", "duet-paragraph", "duet-progress", "duet-spacer", "duet-spinner", "duet-upload-aria-status", "duet-upload-item", "duet-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "duet-upload":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DuetUpload$1);
+            }
+            break;
+        case "duet-action-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "duet-alert":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "duet-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "duet-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "duet-caption":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "duet-empty-state":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "duet-fieldset":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "duet-heading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "duet-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "duet-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "duet-paragraph":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "duet-progress":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "duet-spacer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "duet-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "duet-upload-aria-status":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "duet-upload-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "duet-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const DuetUpload = DuetUpload$1;