@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

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

@@ -1,1444 +0,0 @@
-/*!
- * 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-d77db171.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.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-35375593.js';
-import { p as parsePossibleJSON } from './p-9c3c64b9.js';
-import { g as getError, a as getI18nError, d as defineCustomElement$3 } from './p-3ce1f7b8.js';
-import { h } from './p-993aea39.js';
-import { d as defineCustomElement$j } from './p-df2042f8.js';
-import { d as defineCustomElement$i } from './p-330bcf1d.js';
-import { d as defineCustomElement$h } from './p-e176f419.js';
-import { d as defineCustomElement$g } from './p-b0925e24.js';
-import { d as defineCustomElement$f } from './p-d2a5148f.js';
-import { d as defineCustomElement$e } from './p-1296f851.js';
-import { d as defineCustomElement$d } from './p-9fa4eb51.js';
-import { d as defineCustomElement$c } from './p-1ccd7c39.js';
-import { d as defineCustomElement$b } from './p-4da43fbc.js';
-import { d as defineCustomElement$a } from './p-de4ee016.js';
-import { d as defineCustomElement$9 } from './p-174a9d1d.js';
-import { d as defineCustomElement$8 } from './p-430f3778.js';
-import { d as defineCustomElement$7 } from './p-b8de9a9c.js';
-import { d as defineCustomElement$6 } from './p-9f9423c6.js';
-import { d as defineCustomElement$5 } from './p-41dca9e4.js';
-import { d as defineCustomElement$4 } from './p-956e3bce.js';
-import { d as defineCustomElement$2 } from './p-02f97b91.js';
-
-const errorCodes = [
-	{
-		type: "default",
-		system_message: "unknown error",
-		message: {
-			fi: "Tapahtui tuntematon virhe, ole hyvä ja yritä uudelleen.",
-			sv: "Ett okänt fel uppstod, försök igen.",
-			en: "An unknown error occured, please try again."
-		}
-	},
-	{
-		type: "400",
-		system_message: "Bad Request: The server could not understand the request due to invalid syntax.",
-		message: {
-			fi: "Tiedostoa ei hyväksytty.",
-			sv: "Servern avvisade din fil.",
-			en: "The server rejected your file."
-		}
-	},
-	{
-		type: "401",
-		system_message: "Not Authenticated: The client must authenticate itself to get the requested response...",
-		message: {
-			fi: "Vain kirjautunut käyttäjä voi lähettää tiedostoja.",
-			sv: "Du måste vara inloggad för att ladda upp filer.",
-			en: "You need to be logged in to upload files."
-		}
-	},
-	{
-		type: "403",
-		system_message: "No Access: The client does not have access rights to the content.",
-		message: {
-			fi: "Ei oikeuksia lähettää tiedostoja.",
-			sv: "Du har inte rätt åtkomsträttigheter för att ladda upp filer.",
-			en: "You do not have the correct access rights to upload files."
-		}
-	},
-	{
-		type: "413",
-		system_message: "Payload too large",
-		message: {
-			fi: "Tiedosto oli liian vastaanotettavaksi.",
-			sv: "Filen var för stor för servern att hantera.",
-			en: "The file was to large for the server to handle."
-		}
-	},
-	{
-		type: "415",
-		system_message: "Unsupported media type",
-		message: {
-			fi: "Tiedoston tyyppi oli väärä.",
-			sv: "Servern avvisade filen eftersom den hade fel typ.",
-			en: "The server rejected the file because it had the wrong type."
-		}
-	},
-	{
-		type: "429",
-		system_message: "Too many request from same address",
-		message: {
-			fi: "Liian monta yritystä, ole hyvä ja yritä myöhemmin uudelleen.",
-			sv: "Servern har fått många förfrågningar från dig, försök igen senare.",
-			en: "The server has received to many request from you, please try again later."
-		}
-	},
-	{
-		type: "500",
-		system_message: "Internal Server Error",
-		message: {
-			fi: "Palvelin ilmoitti tuntemattomasta virheestä ja lataus epäonnistui.",
-			sv: "Servern rapporterade ett okänt fel och uppladdningen misslyckades.",
-			en: "The server reported an unknown error and the upload failed."
-		}
-	},
-	{
-		type: "duet-upload-100",
-		system_message: "File extension not allowed",
-		message: {
-			fi: "Tiedoston tyyppi ei ole sallittu.",
-			sv: "Du kan inte ladda upp filer av den type.",
-			en: "You cannot upload files with that extension."
-		}
-	},
-	{
-		type: "duet-upload-001",
-		system_message: "File transfer failed",
-		message: {
-			fi: "Tiedoston lähetys keskeytyi, ole hyvä ja yritä uudelleen.",
-			sv: "Din anslutning till servern avbröts, försök igen.",
-			en: "Your connection to the server was interrupted, try again."
-		}
-	},
-	{
-		type: "duet-upload-101",
-		system_message: "File mimetype not allowed",
-		message: {
-			fi: "Tiedoston tyyppi ei ole sallittu.",
-			sv: "Du kan inte ladda upp filer av den typ.",
-			en: "You cannot upload files of that type."
-		}
-	},
-	{
-		type: "duet-upload-201",
-		system_message: "File is too large",
-		message: {
-			fi: "Tiedosto on liian iso.",
-			sv: "Filen är större än tillåtet.",
-			en: "The file is larger than permitted."
-		}
-	},
-	{
-		type: "duet-upload-202",
-		system_message: "The combined size of all files is too large",
-		message: {
-			fi: "Tiedostojen yhteenlaskettu koko on liian iso.",
-			sv: "Du har nått den maximala kombinerade filstorleken.",
-			en: "You have reached the maximum combined filesize."
-		}
-	},
-	{
-		type: "duet-upload-203",
-		system_message: "Files to upload exceed total byte size limit",
-		message: {
-			fi: "Yritit lisätä tiedostoja, jotka ylittäisivät suurimman sallitun yhteenlasketun koon.",
-			sv: "Du försökte lägga till filer som skulle överskrida den maximala kombinerade storleken.",
-			en: "You tried to add files that would exceed the maximum combined size."
-		}
-	},
-	{
-		type: "duet-upload-301",
-		system_message: "The maximum file limit has been reached",
-		message: {
-			fi: "Liitteiden maksimimäärä saavutettu.",
-			sv: "Maximalt antal bilagor har uppnåtts.",
-			en: "Maximum number of attachments reached."
-		}
-	},
-	{
-		type: "duet-upload-302",
-		system_message: "Files to upload exceeds limits",
-		message: {
-			fi: "Et voi lähettää enempää kuin enimmäismäärän liitteitä.",
-			sv: "Du kan inte ladda upp fler än det maximala antalet bilagor.",
-			en: "You can't upload more than maximum number of attachments."
-		}
-	}
-];
-
-const headerAriaLabel = {
-    fi: "Liiteluettelo",
-    sv: "Lista över bilagor",
-    en: "Attachments list",
-};
-const UploadItemHeader = ({ label, categoryLabel }) => {
-    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);
-};
-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;
-        }
-    });
-    return valid;
-};
-const validateFileSize = (size, maxBytes) => {
-    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);
-        }
-        if (!bytes) {
-            errorMessage = getError("duet-upload-201", errorCodes);
-        }
-        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,
-    };
-};
-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;
-        }
-    }
-    return false;
-};
-const validateTotalAmountIsAboveMax = (filelist, maxFiles) => {
-    let total = 0;
-    if (maxFiles) {
-        filelist.forEach(item => {
-            if (item.valid) {
-                total++;
-            }
-        });
-        if (total >= maxFiles) {
-            return true;
-        }
-    }
-    return false;
-};
-const filesToUploadCountAboveMax = (currentFilesCount, filesToUploadCount, maxFiles) => {
-    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;
-        }
-    }
-    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;
-};
-
-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(212, 223, 229)}@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 DuetUploadStyle0 = duetUploadCss;
-
-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",
-        };
-        /**
-         * 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, buttonTitles: this.processedButtonTitles, 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, buttonTitles: this.processedButtonTitles, 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, buttonTitles: this.processedButtonTitles, 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, buttonTitles: this.processedButtonTitles, 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.actionButtonTitles = {
-            cancel: false,
-            delete: false,
-        };
-        this.renameDuplicates = false;
-        this.groups = [
-            {
-                id: this.DefaultGroups.success,
-                label: {
-                    fi: "Valmiit tiedostot",
-                    sv: "Files success",
-                    en: "Files success",
-                },
-            },
-            {
-                id: this.DefaultGroups.failure,
-                label: {
-                    fi: "Tiedostot, joissa on virheitä",
-                    sv: "Filer med fel",
-                    en: "Files with errors",
-                },
-            },
-            {
-                id: this.DefaultGroups.inprogress,
-                label: {
-                    fi: "Kesken olevat tiedostot",
-                    sv: "Filer inprogress",
-                    en: "Files inprogress",
-                },
-            },
-            {
-                id: this.DefaultGroups.pending,
-                label: {
-                    en: "Files to upload",
-                    sv: "Filer att ladda",
-                    fi: "Ladattavat tiedostot",
-                },
-            },
-        ];
-    }
-    watchValidHandler(newValue, oldValue) {
-        if (newValue !== oldValue) {
-            this.kick();
-        }
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        if (typeof this.statusMessageLabel === "string") {
-            this.internalStatusMessageLabel = sanitizeString(this.groups);
-        }
-        else {
-            this.internalStatusMessageLabel = this.statusMessageLabel;
-        }
-        inheritGlobalTheme(this);
-        this.listenForActionEvents();
-        this.onReady();
-        this.externalUploadButton = document.querySelector(`#${this.externalUploadButtonId}`);
-        this.processedButtonTitles = parsePossibleJSON(this.actionButtonTitles);
-    }
-    componentWillRender() {
-        // listen to the events from the component
-        this.verifyValidity();
-    }
-    /**
-     * Sets focus on the specified `duet-input`. Use this method instead of the global
-     * `input.focus()`.
-     */
-    async setFocus(options) {
-        if (this.nativeInput) {
-            this.nativeInput.focus(options);
-        }
-        return;
-    }
-    /**
-     * Method for invoking the upload sequence
-     */
-    async upload(metaData = undefined) {
-        // validate that we haven't hit any maxfiles or maxbytes limits before we upload
-        const { bytesMaxReached, fileMaxReached } = this.validateTotals();
-        if (bytesMaxReached || fileMaxReached) {
-            this.handleExternalUploadButton(bytesMaxReached, fileMaxReached);
-            this.kick();
-            return;
-        }
-        this.metaData = metaData;
-        this.nativeInput.click();
-        return;
-    }
-    /**
-     * Method for uploading pending files
-     */
-    async uploadPending() {
-        this.uploadPendingFiles();
-    }
-    /**
-     * Method for forcing a render of the upload list, element.files can be changed externally
-     * But it will only rerender on a new Map or a top Level change - this can be used to update
-     * the tabular data if the automatic re-render is no sufficient
-     */
-    async refresh() {
-        this.kick();
-        await this.setFocus();
-    }
-    /**
-     * Get list of files, divided in errors and valid sections
-     */
-    async getFiles() {
-        if (!this.files || this.files.size === 0) {
-            return false;
-        }
-        return this.getFilesAsArray();
-    }
-    /**
-     * Convenience method for updating the value of a key:value inside an item in the files attribute
-     */
-    async updateValue(item, key, value) {
-        this.updateValueInMap(item, key, value);
-    }
-    /**
-     * focusActionButton.
-     */
-    async focusActionButton(uid) {
-        var _a;
-        await ((_a = this.itemRefs.get(uid)) === null || _a === void 0 ? void 0 : _a.focusActionButton());
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const identifier = this.identifier || this.uploadId;
-        const maxMegaBytesTotal = Math.round((this.maxBytesTotal ? this.maxBytesTotal : this.maxBytes * this.maxFiles) / 1024 / 1024);
-        const maxMegaBytesPrFile = Math.round(this.maxBytes / 1024 / 1024);
-        let caption = this.description.replace(/{maxfiles}/g, this.maxFiles.toString());
-        caption = caption.replace(/{maxbytes}/g, `${maxMegaBytesPrFile.toString()} MB`);
-        caption = caption.replace(/{maxbytestotal}/g, `${maxMegaBytesTotal.toString()} MB`);
-        caption = caption.replace(/{filetypes}/g, this.allowedExtensions.split(",").join(", "));
-        if (this.externalUploadButton) {
-            this.externalUploadButton.accessibleLabel = `${this.externalUploadButton.innerText}. ${caption}`;
-        }
-        // @ts-ignore
-        return (h$1(Host, { key: 'f22b72ae72f670b1d3b96699cc22b916e44805bb', class: { "duet-m-0": this.margin === "none" } }, h$1("duet-fieldset", { key: 'd9062ebd9b108b426984ea6336014d707816be6a', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h$1("slot", { key: 'f05cf1d0a76d07a12e0169d4554344860fe8d5e9', name: "header" }), !this.files.size && (h$1("duet-empty-state", { key: '5f6ea952dccd0579fa97ae6e751c727bb2b72383', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h$1("duet-paragraph", { key: 'b99e0d6949b2377b83a5b8e3ba4fab263685e427', margin: "none" }, this.fileListEmpty))), !!this.files.size && h$1("slot", { key: '0de37444dc62aac38f4ce95cb488cbd9c6485814', name: "fileheader" }), !!this.files.size && (h$1("duet-upload-aria-status", { key: '0d169ad657e0ae9af98769dd2c7b007899826afe', 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", { key: 'a957b0255feb705762d39f4615bd9a49a4569017', name: "filefooter" }), h$1("slot", { key: 'f76b8605d58a7659c2dd0aa29c48a1f34e4a18a9', name: "uploadfooter" }), this.captionOnBottom && (h$1("duet-caption", { key: '3c3b2d1cc4929a960035feb0055c41d435a2cfba', margin: "none", size: "small" }, h$1("div", { key: 'e5f8bd26ec72800dd78794620d3d1dcfb4c55ad8', class: "upload-bottom-caption" }, caption))), h$1("slot", { key: 'c3d1e3f1725fdddfaad3eec7fdc9ed7cb3ef8b5b', name: "afterfooter" }), !this.hideButton && (h$1(Fragment, { key: '25b1dfcfeb51ed4dce30e9dc0dfd4bf3e5adb41e' }, h$1("duet-spacer", { key: 'd19f3991e372c617a6b9509adbc062a03f390090', size: "large" }), h$1("duet-button", { key: '8536bf08e8becf2c50e0fff041facbe975f18ad5', id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel || `${this.buttonLabel}. ${caption}`, "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, { key: '970bfa230702ba75dc8f8ac9e71f4183c4c3c0d7' }, h$1("duet-spacer", { key: '72b8c0c087760db99ce3fdda33e33471b9606d61', size: "medium" }), h$1("duet-alert", { key: '0769bcb8f099a5094dba69584d27909b915a1b18', 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", { key: 'fba8af1631c5f83e159c7070c9680fb36e5e2d80', "aria-hidden": "true" }, h$1("input", { key: '0c7c75a5a7328dfde2317095e37b363108c6423f', ref: input => {
-                this.nativeInput = input;
-            }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
-                "duet-upload": true,
-            }, disabled: this.disabled, "aria-hidden": "true", required: this.required, name: this.name, id: this.identifier, multiple: this.multiple, tabIndex: -1 })))));
-    }
-    /**
-     * XHR request utilities
-     */
-    makeXHRPostRequest(data) {
-        const xhr = new XMLHttpRequest();
-        const name = data.get("name");
-        xhr.upload.addEventListener("progress", ev => {
-            this.updateProgress(ev, name);
-        });
-        xhr.upload.addEventListener("load", () => {
-            this.transferComplete(name);
-        });
-        xhr.upload.addEventListener("error", () => {
-            this.transferFailed(name);
-        });
-        xhr.upload.addEventListener("abort", () => {
-            this.transferCanceled(name);
-        });
-        let options = {
-            payload: { data, name },
-            options: { type: "POST", uri: this.uri, xhr, argument: null, headers: undefined },
-            onFailure: this.transferDoneWithFailure,
-            onSuccess: this.transferDone,
-            onProgress: this.trackProgress,
-        };
-        if (this.middleware) {
-            options = this.middleware(options);
-        }
-        return makeXhrRequest(options);
-    }
-    makeXHRDeleteRequest(data) {
-        const { uid, item } = data;
-        const xhr = new XMLHttpRequest();
-        const headers = {
-            "x-fileuid": uid,
-            "x-filename": item.name,
-        };
-        let options = {
-            payload: { data: null, name },
-            options: {
-                type: "DELETE",
-                xhr,
-                uri: this.uri,
-                argument: `?key=${uid}&name=${item.name}`,
-                headers,
-            },
-            onFailure: this.transferDoneWithFailure,
-            onSuccess: this.transferDone,
-            onProgress: this.trackProgress,
-        };
-        if (this.middleware) {
-            options = this.middleware(options);
-        }
-        // don't present server issues to user on deletes, just remove them from the visible list
-        return makeXhrRequest(options);
-    }
-    escapeSpecialCharacters(str) {
-        return (str + "").replace(/[\\"'(){}\[\]*?$^+]/g, "\\$&").replace(/\u0000/g, "\\0");
-    }
-    getRenamedFileName(newFileName, extension) {
-        const re = new RegExp(`${this.escapeSpecialCharacters(newFileName)} \\(\\d+\\\).${extension}`);
-        const lastFileName = Array.from(this.files.entries())
-            .map(entry => {
-            const [key, _] = entry;
-            return key;
-        })
-            .filter(existingFileName => {
-            return re.test(existingFileName) || existingFileName === `${newFileName}.${extension}`;
-        })
-            .sort((fileOne, fileTwo) => {
-            //needs to be sorted using file names without extension
-            return fileOne.split(".").slice(0, -1).join(".") > fileTwo.split(".").slice(0, -1).join(".") ? 1 : -1;
-        })
-            .pop()
-            .split(".")
-            .slice(0, -1)
-            .join(".");
-        if (lastFileName === newFileName) {
-            return `${newFileName} (1).${extension}`;
-        }
-        const lastFileNumber = parseInt(lastFileName.split("(").pop().slice(0, -1));
-        return `${newFileName} (${lastFileNumber + 1}).${extension}`;
-    }
-    renameFiles(files) {
-        return files.map(file => {
-            if (this.files.get(file.name)) {
-                const splitName = file.name.split(".");
-                const extension = splitName.pop();
-                const nameWithoutExtension = splitName.join(".");
-                const newName = this.getRenamedFileName(nameWithoutExtension, extension);
-                return new File([file], newName, {
-                    type: file.type,
-                    lastModified: file.lastModified,
-                });
-            }
-            else {
-                return file;
-            }
-        });
-    }
-    /**
-     * Component event handling.
-     */
-    async onChange(ev) {
-        var _a;
-        let selectedFiles = Array.from((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.files);
-        // FileList is a nice array like structure but
-        // to ensure uniqueness of files we use a mapping structure and
-        // key to the name (makes it easier to delete as well)
-        this.filesToUploadExceedsLimit = false;
-        if (filesToUploadCountAboveMax(this.files.size, selectedFiles.length, this.maxFiles)) {
-            this.filesToUploadExceedsLimit = true;
-            this.kick();
-            return;
-        }
-        this.filesToUploadTotalSizeIsAboveMax = false;
-        if (filesToUploadTotalSizeIsAboveMax(this.files, selectedFiles, this.maxBytesTotal)) {
-            this.filesToUploadTotalSizeIsAboveMax = true;
-            this.kick();
-            return;
-        }
-        if (selectedFiles) {
-            if (this.renameDuplicates) {
-                selectedFiles = this.renameFiles(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();
-            }
-        }
-        // 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 DuetUploadStyle0; }
-}, [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"],
-        "actionButtonTitles": [1, "action-button-titles"],
-        "renameDuplicates": [4, "rename-duplicates"],
-        "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-show-more", "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$j();
-            }
-            break;
-        case "duet-alert":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$i();
-            }
-            break;
-        case "duet-badge":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$h();
-            }
-            break;
-        case "duet-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$g();
-            }
-            break;
-        case "duet-caption":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$f();
-            }
-            break;
-        case "duet-empty-state":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$e();
-            }
-            break;
-        case "duet-fieldset":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$d();
-            }
-            break;
-        case "duet-heading":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "duet-link":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "duet-paragraph":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "duet-progress":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "duet-show-more":
-            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;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetUpload, defineCustomElement };