@duetds/components 6.0.3 → 6.0.4

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

@@ -0,0 +1,1514 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h as h$1, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+import { d as debounce } from './p-0b3f675e.js';
+import { g as getLocaleString, s as sanitizeString } from './p-ede854e1.js';
+import { p as parsePossibleJSON } from './p-5a9d75e1.js';
+import { h } from './p-b9058029.js';
+import { d as defineCustomElement$i } from './p-0a928609.js';
+import { d as defineCustomElement$h } from './p-09ed1ffa.js';
+import { d as defineCustomElement$g } from './p-ef8eff22.js';
+import { d as defineCustomElement$f } from './p-e294c0fb.js';
+import { d as defineCustomElement$e } from './p-e5c8a58f.js';
+import { d as defineCustomElement$d } from './p-d96debb6.js';
+import { d as defineCustomElement$c } from './p-e4d5fbc0.js';
+import { d as defineCustomElement$b } from './p-7739604d.js';
+import { d as defineCustomElement$a } from './p-16d518fd.js';
+import { d as defineCustomElement$9 } from './p-4717744e.js';
+import { d as defineCustomElement$8 } from './p-213ef84c.js';
+import { d as defineCustomElement$7 } from './p-acdba2db.js';
+import { d as defineCustomElement$6 } from './p-81c9b244.js';
+import { d as defineCustomElement$5 } from './p-3d987b87.js';
+import { d as defineCustomElement$4 } from './p-da03a443.js';
+import { d as defineCustomElement$3 } from './p-08cfe544.js';
+import { d as defineCustomElement$2 } from './p-b08e57cf.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-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."
+		}
+	}
+];
+
+const getError = (code, errorCodes) => {
+  let error = {
+    type: undefined,
+    system_message: undefined,
+    message: undefined,
+  };
+  errorCodes = parsePossibleJSON(errorCodes);
+  error = errorCodes.filter(errorItem => {
+    // the == is intentional we may be comparing numbers to strings - and that is ok here
+    return errorItem.type == code;
+  })[0];
+  if (!error) {
+    error = errorCodes.filter(errorItem => {
+      return errorItem.type === "default";
+    })[0];
+  }
+  return error;
+};
+const getI18nError = (errorCode, errorCodes) => {
+  const errorFromJson = getError(errorCode, errorCodes);
+  const i18String = getLocaleString(errorFromJson.message);
+  if (i18String === "" || !i18String) {
+    return errorFromJson.system_message;
+  }
+  else {
+    return i18String;
+  }
+};
+
+const ErrorItem = ({ data, errorCodes }) => {
+  const { item, error } = data;
+  const { name } = item;
+  const { type } = error;
+  return (h("span", { class: "duet-upload-item-error", role: "status" },
+    h("duet-paragraph", { class: "duet-upload-item-name", color: "danger", margin: "none", weight: "semi-bold" },
+      h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
+      h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+      name),
+    h("duet-paragraph", { class: "duet-upload-item-error-label", size: "small", margin: "none", color: "danger" }, getI18nError(type, errorCodes))));
+};
+
+const ProgressItem = ({ progress, name }) => (h("span", { class: "duet-upload-item-name" },
+  h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
+  h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+  name,
+  h("br", null),
+  h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
+
+const PendingItem = ({ name }) => (h("span", { class: "duet-upload-item-name" },
+  h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
+  h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+  name));
+
+const formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) {
+    return "0 Bytes";
+  }
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+};
+
+const SuccessItem = ({ data, showLinks }) => {
+  const { item, size, uploaded, url, meta } = data;
+  const { name } = item;
+  const ContentName = (h("span", { class: "duet-upload-item-name" },
+    h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
+    h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+    name));
+  const SizeText = (h("span", { class: "duet-upload-item-size", style: { fontSize: "14px", fontWeight: "400" } },
+    "(",
+    formatBytes(size),
+    ")"));
+  const FilenameLine = uploaded && url && showLinks ? (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
+    h("duet-link", { url: url, external: true }, ContentName),
+    h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+    SizeText)) : (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
+    ContentName,
+    h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+    SizeText));
+  const Badges = meta && meta.badges ? (h("span", null,
+    h("duet-spacer", { size: "xx-small" }),
+    meta.badges.map(badgeText => (h("duet-badge", { color: "primary" }, badgeText))))) : undefined;
+  return (h("span", { class: "duet-upload-item-success" },
+    h("div", null, FilenameLine),
+    Badges));
+};
+
+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 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}.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:#f5f8fa}.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-upload-editable-table .duet-upload-item-name duet-icon{position:relative;top:2px}duet-paragraph::part(duet-paragraph){word-break:break-word}";
+
+const DuetUpload$1 = /*@__PURE__*/ proxyCustomElement(class 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);
+    /**
+     * State() variables
+     */
+    this.tick = Date.now();
+    /**
+     * If external is set to true, the upload component will not actually upload the files, but only keep states
+     * it will be up to you to handle the upload and return progress information to the upload-component
+     */
+    this.external = false;
+    /**
+     * If internal upload method is used, and this has been set to a function - it will be called with the XHR options before the reqeust is sent, return an updated XHR options object in order to manipulate the request
+     */
+    this.middleware = null;
+    /**
+     * If defer-upload is true, duet-upload will not (as recommended) instantly upload files but await a call to uploadPending()
+     */
+    this.deferUpload = false;
+    /**
+     * If set the upload component will not display an upload button, you will have to create one yourself
+     * and call the exposed method startUpload to open the upload dialog
+     */
+    this.hideButton = false;
+    /**
+     * Default actions added to the internally used duet-editable-table
+     */
+    this.actions = [
+      {
+        icon: "action-delete",
+        color: "color-danger",
+        size: "x-small",
+        background: "gray-lightest",
+        name: "delete",
+        map: ["success", "failure"],
+        label: {
+          fi: "Poista tiedosto",
+          en: "Poista tiedosto",
+          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",
+        },
+      },
+    ];
+    /**
+     * If enabled the editable-table will display links on successfully uploaded items,
+     * this requires the server can respond with link URIs in the correct format
+     * and that the files are accessible to the user
+     */
+    this.showLinks = false;
+    /**
+     * Property to change the aria upload progress text read aloud by screenreaders
+     * @default {
+     *     fi: {
+     *       inProgress: "Lähetetään {filesUploaded} lähetettävästä {filesTotal} tiedostosta",
+     *       inProgressWithErrors:
+     *         "Lähetetään {filesInProgress} tiedostoa, lähetetty {filesUploaded} lähetettävästä {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheitä",
+     *       done: "Kaikki {filesTotal} tiedostoa lähetetty onnistuneesti",
+     *       doneWithErrors:
+     *         "Lähetys valmis, {filesUploaded} tiedostoa on lähetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheitä",
+     *       files: "tiedostot",
+     *       file: "tiedosto",
+     *     },
+     *     sv: {
+     *       inProgress: "Adding {filesUploaded} of {filesTotal}",
+     *       inProgressWithErrors:
+     *         "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
+     *       done: "Alla {filesTotal} har lagts till",
+     *       doneWithErrors: "Handling slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
+     *       files: "filer",
+     *       file: "fil",
+     *     },
+     *     en: {
+     *       inProgress: "Adding {filesUploaded} of {filesTotal}",
+     *       inProgressWithErrors:
+     *         "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
+     *       done: "All {filesTotal} added successfully",
+     *       doneWithErrors: "Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors",
+     *       files: "tiedostoa",
+     *       file: "tiedosto",
+     *     },
+     *   }
+     */
+    this.statusLabelDefaults = {
+      fi: {
+        inProgress: "Lähetetään {filesUploaded} lähetettävästä {filesTotal} tiedostosta",
+        inProgressWithErrors: "Lähetetään {filesInProgress} tiedostoa, lähetetty {filesUploaded} lähetettävästä {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheitä",
+        done: "Kaikki {filesTotal} tiedostoa lähetetty onnistuneesti",
+        doneWithErrors: "Lähetys valmis, {filesUploaded} tiedostoa on lähetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheitä",
+        files: "tiedostot",
+        file: "tiedosto",
+      },
+      sv: {
+        inProgress: "Adding {filesUploaded} of {filesTotal}",
+        inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
+        done: "Alla {filesTotal} har lagts till",
+        doneWithErrors: "Handling slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
+        files: "filer",
+        file: "fil",
+      },
+      en: {
+        inProgress: "Adding {filesUploaded} of {filesTotal}",
+        inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
+        done: "All {filesTotal} added successfully",
+        doneWithErrors: "Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors",
+        files: "File",
+        file: "file",
+      },
+    };
+    /**
+     * Strings used for the status aria-label
+     */
+    this.statusMessageLabel = getLocaleString(this.statusLabelDefaults);
+    /**
+     * Property to change button label defaults on the component.
+     * @default {
+        fi: "Lisää liite",
+        sv: "Lägg till en bilaga",
+        en: "Add an attachment",
+      }
+     */
+    this.buttonLabelDefaults = {
+      fi: "Lisää liite",
+      sv: "Lägg till en bilaga",
+      en: "Add an attachment",
+    };
+    /**
+     * Label of button
+     * @default { fi: "Lisää liite", sv: "Lägg till en bilaga", en: "Add an attachment" }
+     */
+    this.buttonLabel = getLocaleString(this.buttonLabelDefaults);
+    /**
+     * accessible aria-Label of button
+     */
+    this.accessibleButtonLabel = undefined;
+    /**
+     * Theme of the input.
+     */
+    this.theme = "";
+    /**
+     * Makes the input component disabled. This prevents users from being able to
+     * interact with the upload component, and conveys its inactive state to assistive technologies.
+     */
+    this.disabled = false;
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Set whether the input is required or not. Please note that this is necessary for
+     * accessible inputs when the user is required to fill them. When using this property
+     * you need to also set “novalidate” attribute to your form element to prevent
+     * browser from displaying its own validation errors.
+     */
+    this.required = false;
+    /**
+     * Key used to set vertical alignment of action buttons
+     */
+    this.alignment = "middle";
+    /**
+     * Visually hides the groups labels in the editable table list used to display the list of files
+     */
+    this.hideGroups = false;
+    /**
+     * Map of string that contain list of uploaded files.
+     */
+    this.files = new Map();
+    /**
+     * Property to read if the internally used editable-table contains errors or not
+     */
+    this.valid = !this.required;
+    /**
+     * Property to change labelDefaults defaults on the component.
+     * normally you would handle these strings on an application level and override @label when needed
+     * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
+     */
+    this.labelDefaults = {
+      fi: "Lisää liite",
+      sv: "Lägg till en bilaga",
+      en: "Add attachments",
+    };
+    /**
+     * Label for the input.
+     * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
+     */
+    this.label = getLocaleString(this.labelDefaults);
+    /**
+     * Property to change descriptionDefaults defaults on the component.
+     * @default {
+     *     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.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.",
+    };
+    /**
+     * Description for the upload component.
+     * @default {
+     *     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);
+    /**
+     * Defaults for the filelist's empty state.
+     * @default {
+        fi: "Ei vielä lisättyjä tiedostoja.",
+        sv: "Inga filer har lagts till ännu.",
+        en: "No files added yet.",
+       }
+     */
+    this.fileListEmptyDefaults = {
+      fi: "Ei vielä lisättyjä tiedostoja.",
+      sv: "Inga filer har lagts till ännu.",
+      en: "No files added yet.",
+    };
+    /**
+     * Label for the filelist's empty state.
+     * @default { fi: "Ei vielä lisättyjä tiedostoja.",sv: "Inga filer har lagts till ännu.",en: "No files added yet."}
+     */
+    this.fileListEmpty = getLocaleString(this.fileListEmptyDefaults);
+    /**
+     * Display the input in error state along with an error message.
+     */
+    this.error = "";
+    /**
+     * Default errorcodes used by the component, modifiable via javascript
+     */
+    this.errorCodes = errorCodes;
+    /**
+     * Use maxBytes to specify the maximum size in Bytes of a file that can be uploaded.
+     */
+    this.maxBytes = 200000000;
+    /**
+     * Use maxBytesTotal to specify the maximum size in Bytes of All files combined that can be uploaded.
+     */
+    this.maxBytesTotal = undefined;
+    /**
+     * Use maxFiles to specify the maximum amount of files that can be uploaded
+     */
+    this.maxFiles = 99;
+    /**
+     * A string of commaseperated file type values that are allowed
+     * @example: .pdf,.doc,.docx
+     */
+    this.allowedExtensions = "all";
+    /**
+     * A string of commaseperated mime type values that are allowed
+     * @example: image/*,application/msword,
+     */
+    this.allowedMimetypes = "*";
+    /**
+     * Use multiple to allow the user to select multiple files when uploading
+     */
+    this.multiple = true;
+    /**
+     * Use limitSelection to enforce the value in allowedExtension & allowedMimetypes when selecting files,
+     * by default this is off, setting this to true will limit the users choices to what has been explicitly set
+     */
+    this.limitSelection = false;
+    /**
+     * 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.internalStatusMessageLabel = undefined;
+    /**
+     * Properties
+     */
+    this.DefaultGroups = {
+      inprogress: "inprogress",
+      success: "success",
+      pending: "pending",
+      failure: "failure",
+    };
+    /**
+     * Array of group names that you want the editable table to use to display files
+     * @required
+     * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}]
+     */
+    this.groups = [
+      {
+        id: this.DefaultGroups.pending,
+        label: {
+          en: "Files to upload",
+          sv: "Filer att ladda",
+          fi: "Ladattavat tiedostot",
+        },
+      },
+      {
+        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",
+        },
+      },
+    ];
+    this.kick = debounce(() => {
+      this.tick = Date.now();
+    }, 30); // will trigger re-render
+    /**
+     * 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.getItemHTMLFromItemData = (data, group) => {
+      if (group === this.DefaultGroups.success) {
+        return h$1(SuccessItem, { data: data, showLinks: this.showLinks });
+      }
+      else if (group === this.DefaultGroups.inprogress) {
+        return h$1(ProgressItem, { progress: data.progress, name: data.item.name });
+      }
+      else if (group === this.DefaultGroups.pending) {
+        return h$1(PendingItem, { name: data.item.name });
+      }
+      else if (group === this.DefaultGroups.failure) {
+        return h$1(ErrorItem, { data: data, errorCodes: this.errorCodes });
+      }
+      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);
+      }
+      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) => {
+      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 this.files.entries()) {
+        if (value.group === "pending" && value.pending === true) {
+          this.uploadFile(value, true, key);
+        }
+      }
+    };
+    this.getItemFromUID = (uid) => {
+      for (const [key, value] of this.files.entries()) {
+        if (value.uid === uid) {
+          return { value, key };
+        }
+      }
+      return null;
+    };
+    this.onDelete = (key, ev) => {
+      const item = this.getItemFromUID(key);
+      const retrievedKey = item.key;
+      const deletedItem = this.files.get(retrievedKey);
+      this.files.delete(retrievedKey);
+      this.validateTotals();
+      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);
+      if (!this.external) {
+        const { xhr } = cancelledItem;
+        if (xhr) {
+          xhr.abort();
+        }
+      }
+      else {
+        this.kick();
+      }
+      this.resetFormFields();
+      this.duetCancel.emit({
+        originalEvent: ev,
+        data: { cancelled: cancelledItem },
+        component: "duet-upload",
+      });
+    };
+    this.onUpload = (ev, metaData) => {
+      this.duetUpload.emit({
+        originalEvent: ev,
+        metaData,
+        component: "duet-upload",
+      });
+    };
+    this.onBlur = (ev) => {
+      this.duetBlur.emit({
+        originalEvent: ev,
+        component: "duet-upload",
+      });
+    };
+    this.onProgress = (key, percentComplete, ev) => {
+      this.duetChange.emit({
+        originalEvent: ev,
+        data: {
+          key,
+          percentComplete,
+        },
+        component: "duet-upload",
+      });
+    };
+    this.onFocus = (ev) => {
+      this.duetFocus.emit({
+        originalEvent: ev,
+        component: "duet-upload",
+      });
+    };
+    this.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 = [...this.files.values()];
+      const inprogress = [];
+      const failure = [];
+      const pending = [];
+      const success = [];
+      all.forEach(data => {
+        const group = this.getGroupFromItemData(data);
+        const item = this.getItemHTMLFromItemData(data, group);
+        if (group === this.DefaultGroups.success) {
+          success.push({
+            uid: data.uid,
+            item,
+            group,
+          });
+        }
+        else if (group === this.DefaultGroups.inprogress) {
+          inprogress.push({
+            uid: data.uid,
+            item,
+            group,
+          });
+        }
+        else if (group === this.DefaultGroups.pending) {
+          pending.push({
+            uid: data.uid,
+            item,
+            group,
+          });
+        }
+        else if (group === this.DefaultGroups.failure) {
+          failure.push({
+            uid: data.uid,
+            item,
+            group,
+          });
+        }
+        else if (data.group) {
+          inprogress.push({
+            uid: data.uid,
+            item,
+            group: data.group,
+          });
+        }
+      });
+      return {
+        pending,
+        failure,
+        success,
+        inprogress,
+      };
+    };
+    this.getColumns = (group) => {
+      return [
+        {
+          sort_order: 1,
+          direction: -1,
+          index: 0,
+          key: group.id,
+          label: group.label,
+        },
+      ];
+    };
+    this.getActions = (id) => {
+      return this.actions.filter(item => item.map.includes(id));
+    };
+    this.renderEditableTableGroups = () => {
+      const filteredItems = this.filterMap();
+      const EditableTables = this.groups.map(group => {
+        const currentItems = filteredItems[group.id];
+        if (!(currentItems === null || currentItems === void 0 ? void 0 : currentItems.length)) {
+          return;
+        }
+        return (h$1("duet-table", { variation: "plain", breakpoint: "none", role: "log", margin: this.hideGroups ? "none" : "auto" }, h$1("table", { class: "duet-upload-editable-table" }, h$1("thead", { class: "duet-upload-editable-table-header" }, h$1("tr", null, h$1("th", { class: {
+            "duet-upload-editable-table-header-hidden": this.hideGroups,
+          } }, !this.hideGroups ? (getLocaleString(group.label)) : (h$1("duet-visually-hidden", null, getLocaleString(group.label)))))), h$1("tbody", null, h$1("tr", null, h$1("td", { class: "duet-upload-editable-table-data" }, h$1("duet-editable-table", { breakpoint: "none", variation: "plain", groupId: group.id, columns: this.getColumns(group), actions: this.getActions(group.id), margin: "none", rows: currentItems })))))));
+      });
+      return EditableTables;
+    };
+  }
+  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();
+  }
+  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) {
+    await this.setFocus();
+    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);
+  }
+  /**
+   * 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(", "));
+    return (h$1(Host, { class: { "duet-m-0": this.margin === "none" } }, h$1("duet-fieldset", { label: this.label, caption: caption }, h$1("slot", { name: "header" }), !this.files.size && (h$1("duet-label", { part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", theme: this.theme === "turva" ? "turva" : "default", size: "small", class: {
+        "duet-upload-filelist-empty": !this.files.size,
+        "duet-upload-filelist": true,
+        "duet-upload-filelist-filled": this.files.size,
+      }, id: this.labelId, for: identifier }, h$1("span", { class: {
+        "duet-upload-filelist-empty-label": !this.files.size,
+      } }, 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.renderEditableTableGroups(), !!this.files.size && h$1("slot", { name: "filefooter" }), h$1("duet-spacer", { size: "large" }), !this.hideButton && (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)), h$1("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (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))), h$1("duet-spacer", { size: "medium" }), h$1("duet-visually-hidden", null, 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, capture: "user" })))));
+  }
+  /**
+   * XHR request utilities
+   */
+  makeXHRPostRequest(data) {
+    const xhr = new XMLHttpRequest();
+    const name = data.get("name");
+    xhr.upload.addEventListener("progress", ev => {
+      this.updateProgress(ev, name);
+    });
+    xhr.upload.addEventListener("load", () => {
+      this.transferComplete(name);
+    });
+    xhr.upload.addEventListener("error", () => {
+      this.transferFailed(name);
+    });
+    xhr.upload.addEventListener("abort", () => {
+      this.transferCanceled(name);
+    });
+    let options = {
+      payload: { data, name },
+      options: { type: "POST", uri: this.uri, xhr, argument: null, headers: undefined },
+      onFailure: this.transferDoneWithFailure,
+      onSuccess: this.transferDone,
+      onProgress: this.trackProgress,
+    };
+    if (this.middleware) {
+      options = this.middleware(options);
+    }
+    return makeXhrRequest(options);
+  }
+  makeXHRDeleteRequest(data) {
+    const { uid, item } = data;
+    const xhr = new XMLHttpRequest();
+    const headers = {
+      "x-fileuid": uid,
+      "x-filename": item.name,
+    };
+    let options = {
+      payload: { data: null, name },
+      options: {
+        type: "DELETE",
+        xhr,
+        uri: this.uri,
+        argument: `?key=${uid}&name=${item.name}`,
+        headers,
+      },
+      onFailure: this.transferDoneWithFailure,
+      onSuccess: this.transferDone,
+      onProgress: this.trackProgress,
+    };
+    if (this.middleware) {
+      options = this.middleware(options);
+    }
+    // don't present server issues to user on deletes, just remove them from the visible list
+    return makeXhrRequest(options);
+  }
+  /**
+   * Component event handling.
+   */
+  async onChange(ev) {
+    var _a;
+    const selectedFiles = Array.from((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.files);
+    // FileList is a nice array like structure but
+    // to ensure uniqueness of files we use a mapping structure and
+    // key to the name (makes it easier to delete as well)
+    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);
+        // validate that we haven't hit any maxfiles or maxbytes limits before we upload
+        const { bytesMaxReached, fileMaxReached } = this.validateTotals(item.name);
+        if (bytesMaxReached) {
+          // in case one of the global maxes have been reached, invalidate the file
+          this.updateValueInMap(item.name, "valid", false, false);
+        }
+        else if (fileMaxReached) {
+          // in case one of the global maxes have been reached, invalidate the file
+          this.updateValueInMap(item.name, "valid", false, false);
+        }
+        else if (valid && !this.external) {
+          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 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"],
+    "value": [1025],
+    "groups": [16],
+    "tick": [32],
+    "setFocus": [64],
+    "upload": [64],
+    "uploadPending": [64],
+    "refresh": [64],
+    "getFiles": [64],
+    "updateValue": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-upload", "duet-action-button", "duet-alert", "duet-badge", "duet-button", "duet-caption", "duet-editable-table", "duet-fieldset", "duet-icon", "duet-label", "duet-link", "duet-paragraph", "duet-progress", "duet-spacer", "duet-spinner", "duet-table", "duet-upload-aria-status", "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-editable-table":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "duet-fieldset":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "duet-label":
+      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-table":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-upload-aria-status":
+      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 };