@duetds/components 4.30.0 → 4.33.0

package/lib/esm/duet-upload.entry.js

@@ -1,183 +1,129 @@
 /*!
  * Built with Duet Design System
  */
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-f70ddc7f.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-84d97bd1.js';
 import { c as createID } from './create-id-981107da.js';
-import { g as getLocaleString } from './language-utils-ab9c3afc.js';
+import { d as debounce } from './js-utils-b69f17df.js';
+import { g as getLocaleString } from './language-utils-344d894c.js';
 import { i as inheritGlobalTheme } from './themeable-component-572685dd.js';
+import './string-utils-2f1793b8.js';
 
-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 DuetUploadFileList = ({ data, onDelete, onCancel, getError }) => {
-  if (data.invalid.length === 0 && data.valid.length === 0) {
-    return;
-  }
-  return (h("ol", { class: "duet-upload-filelist" },
-    data.valid.length !== 0 && (h("li", null,
-      h("duet-visually-hidden", null, "Files"),
-      h("ul", null, data.valid.length !== 0 &&
-        data.valid.map(e => (h("li", { class: "duet-upload-file" },
-          h("div", { class: "duet-upload-file-container" },
-            h("div", { class: "duet-upload-file-link" }, e.url ? (h("duet-button", { variation: "plain", icon: "messaging-attachment", url: e.url },
-              e.item.name,
-              " (",
-              formatBytes(e.item.size),
-              ")")) : (`${e.item.name} (${formatBytes(e.item.size)})`)),
-            h("ul", { class: "duet-upload-file-actions", role: "menubar", "aria-label": "file actions" },
-              e.progress < 100 && (h("li", { role: "none" },
-                h("duet-button", { role: "menuitem", variation: "plain", icon: "messaging-declined", "icon-only": true, "icon-size": "large", margin: "none", onClick: ev => onCancel(e.item.name, ev) }))),
-              e.progress === 100 && (h("li", { role: "none" },
-                h("duet-button", { role: "menuitem", variation: "destructive", icon: "action-delete", "icon-only": true, "icon-size": "large", margin: "none", onClick: ev => onDelete(e.item.name, ev) }))))),
-          e.progress < 100 && (h("div", { class: "duet-upload-file-progress" },
-            h("progress", { value: e.progress, max: "100" },
-              h("div", { class: "progress-bar" },
-                h("span", { style: { width: `${e.progress}%;` } },
-                  "Progress: ",
-                  e.progress,
-                  "%"))))))))))),
-    data.invalid.length !== 0 && (h("li", null,
-      h("duet-visually-hidden", null, "Files with Errors"),
-      h("ul", null, data.invalid.map(e => {
-        return (h("li", { class: "duet-upload-file duet-upload-file-errors" },
-          h("div", { class: "duet-upload-file-container" },
-            h("div", { class: "duet-upload-file-link duet-upload-file-link-error" },
-              h("div", null,
-                e.item.name,
-                " (",
-                formatBytes(e.item.size),
-                ")"),
-              h("div", { "data-error-type": e.error.type, "data-error-message": e.error.system_message }, getError(e.error.type))),
-            h("ul", { class: "duet-upload-file-actions", role: "menubar", "aria-label": "file actions" },
-              h("li", { role: "none" },
-                h("duet-button", { role: "menuitem", variation: "destructive", icon: "action-delete", "icon-only": true, "icon-size": "large", margin: "none", onClick: ev => onDelete(e.item.name, ev) }))))));
-      }))))));
-};
-
-const errorcodes = [
+const errorCodes = [
 	{
 		type: "default",
 		system_message: "unknown error",
 		message: {
-			fi: "",
-			sv: "",
-			en: "An unknown error occured, please try again"
+			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: "",
-			sv: "",
-			en: "The server rejected your file"
+			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..",
+		system_message: "Not Authenticated: The client must authenticate itself to get the requested response...",
 		message: {
-			fi: "",
-			sv: "",
-			en: "You need to be logged in to upload files"
+			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;",
+		system_message: "No Access: The client does not have access rights to the content.",
 		message: {
-			fi: "",
-			sv: "",
-			en: "You do not have the correct access rights to upload files"
+			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: "",
-			sv: "",
-			en: "The file was to large for the server to handle"
+			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: "",
-			sv: "",
-			en: "The server rejected the file because it had the wrong type"
+			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: "",
-			sv: "",
-			en: "The server has received to many request from you, please try again later"
+			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: "",
-			sv: "",
-			en: "The server reported an unknown error and the upload failed"
+			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: "",
-			sv: "",
-			en: "You cannot upload files with that extension"
+			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: "",
-			sv: "",
-			en: "Your connection to the server was interrupted, try again"
+			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: "",
-			sv: "",
-			en: "You cannot upload files of that type"
+			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: "",
-			sv: "",
-			en: "The file is larger than permitted"
+			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: "",
-			sv: "",
-			en: "You have reached the maximum combined filesize"
+			fi: "Tiedostojen yhteenlaskettu koko on liian iso.",
+			sv: "Du har nått den maximala kombinerade filstorleken.",
+			en: "You have reached the maximum combined filesize."
 		}
 	},
 	{
@@ -185,7 +131,7 @@ const errorcodes = [
 		system_message: "The maximum file limit has been reached",
 		message: {
 			fi: "Liitteiden maksimimäärä saavutettu.",
-			sv: "",
+			sv: "Maximalt antal bilagor har uppnåtts.",
 			en: "Maximum number of attachments reached."
 		}
 	}
@@ -197,16 +143,81 @@ const getError = (code) => {
     system_message: undefined,
     message: undefined,
   };
-  error = errorcodes.filter(errorItem => {
-    return errorItem.type === code;
+  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 => {
+    error = errorCodes.filter(errorItem => {
       return errorItem.type === "default";
     })[0];
   }
   return error;
 };
+const getI18nError = (errorCode) => {
+  const errorFromJson = getError(errorCode);
+  const i18String = getLocaleString(errorFromJson.message);
+  if (i18String === "" || !i18String) {
+    return errorFromJson.system_message;
+  }
+  else {
+    return i18String;
+  }
+};
+
+const ErrorItem = ({ data }) => {
+  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: "xx-small", name: "messaging-attachment" }),
+      " ",
+      name),
+    h("duet-paragraph", { class: "duet-upload-item-error-label", size: "small", margin: "none", color: "danger" }, getI18nError(type))));
+};
+
+const ProgressItem = ({ progress, name }) => (h("span", null,
+  h("duet-paragraph", { color: "secondary", margin: "none", size: "small" }, name),
+  h("duet-spacer", { size: "xx-small" }),
+  h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
+
+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: "xx-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) {
@@ -297,12 +308,8 @@ const validateTotalAmountIsAboveMax = (filelist, maxFiles) => {
   return false;
 };
 
-const makeXhrRequest = (payload, options, onFailure, onSuccess, onProgress) => {
-  const { type, xhr, uri, argument, headers } = Object.assign({
-    type: "POST",
-    argument: null,
-    headers: null,
-  }, options);
+const makeXhrRequest = ({ payload, options, onFailure, onSuccess, onProgress }) => {
+  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
@@ -329,7 +336,7 @@ const makeXhrRequest = (payload, options, onFailure, onSuccess, onProgress) => {
   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}:host li{list-style:none}.duet-upload{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-upload li{list-style:none}.duet-upload-file-errors{padding:20px 0;color:#de2362}.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;background-color:#f3f9fc}.duet-upload-file{display:flex;flex-flow:column;justify-content:center;min-height:50px;border-bottom:1px solid #e1e3e6}.duet-upload-file:first-of-type:not(.duet-upload-file-errors){border-top:1px solid #e1e3e6}.duet-upload-file-container{display:flex;place-items:center;width:100%}.duet-upload-file-link{display:flex;flex-grow:2;place-items:center}.duet-upload-file-link-error{flex-direction:column;place-items:flex-start}.duet-upload-file-link duet-button{position:relative;top:6px}.duet-upload-file-actions{display:flex;transform:scale(0.8)}.duet-upload-file-progress{}.duet-upload-file-progress .progress-bar{position:relative;display:block;width:100%;height:15px;background-color:#f3f9fc;border-radius:0;box-shadow:none}.duet-upload-file-progress .progress-bar>span{display:block;text-indent:-9999px;background-color:#0077b3;border-radius:0}.duet-upload-file-progress progress[value]{display:flex;width:100%;height:15px;color:#0077b3;border:0 none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.duet-upload-file-progress progress[value]::-webkit-progress-bar{background-color:#f3f9fc;border-radius:0}.duet-upload-file-progress progress[value]::-webkit-progress-value{background-color:#0077b3;background-size:35px 20px, 100% 100%, 100% 100%;border-radius:0;-webkit-animation:animate-stripes 5s linear infinite;animation:animate-stripes 5s linear infinite}.duet-upload-file-progress progress[value] ::-moz-progress-bar{background-color:#f3f9fc}";
+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}";
 
 let DuetUpload = class {
   constructor(hostRef) {
@@ -349,9 +356,19 @@ let DuetUpload = class {
     this.buttonId = createID("DuetButton");
     this.labelId = createID("DuetLabel");
     this.uploadId = createID("DuetUpload");
+    this.editableTableId = createID("DuetEditableTable");
     this.filesInProgress = new Map();
     this.fileMaxReached = false;
     this.bytesMaxReached = false;
+    //region Internally exposed properties
+    /**
+     * Properties
+     */
+    this.DefaultGroups = {
+      inprogress: "inprogress",
+      success: "success",
+      failure: "failure",
+    };
     /**
      * State() variables
      */
@@ -361,9 +378,91 @@ let DuetUpload = class {
      * it will be up to you to handle the upload and return progress information to the upload-component
      */
     this.external = false;
+    /**
+     * If set the upload component will not display an upload button, you will have to create on yourself
+     * and call the exposed methods startUpload
+     */
+    this.hideButton = false;
+    /**
+     * Default actions added to all files
+     */
+    this.actions = [
+      {
+        icon: "action-delete",
+        color: "color-danger",
+        color_hover: "category-home",
+        id: "delete",
+        map: ["success", "failure"],
+        label: {
+          fi: "Poista tiedosto",
+          en: "Poista tiedosto",
+          sv: "Ta bort filen",
+        },
+      },
+      {
+        icon: "navigation-close",
+        color: "primary",
+        color_hover: "category-home",
+        id: "cancel",
+        map: ["inprogress"],
+        label: {
+          fi: "Keskeytä lähetys",
+          en: "Cancel the upload",
+          sv: "Stop överföringen",
+        },
+      },
+    ];
+    /**
+     * If enabled the filelist will create links on successfully uploaded items,
+     * this requires the server can respond with link URIs in the correct format
+     */
+    this.showLinks = false;
+    /**
+     * Property to change the aria upload progress text read aloud by screenreaders
+     * @default {
+        fi: "Lisää liite",
+        sv: "Lägg till en bilaga",
+        en: "Choose files",
+      }
+     */
+    this.statusLabelDefaults = {
+      fi: {
+        inProgress: "Lähetetään {filesUploaded} lähetettävästä {filesTotal} tiedostosta",
+        inProgressWithErrors: "Lähetetään {filesInProgress} tiedostoa, lähetetty {filesUploaded} lähetettävästä {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheitä",
+        done: "Kaikki {filesTotal} tiedostoa lähetetty onnistuneesti",
+        doneWithErrors: "Lähetys valmis, {filesUploaded} tiedostoa on lähetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheitä",
+        files: "tiedostot",
+        file: "tiedosto",
+      },
+      sv: {
+        inProgress: "Adding {filesUploaded} of {filesTotal}",
+        inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
+        done: "Alla {filesTotal} har lagts till",
+        doneWithErrors: "Handling slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
+        files: "filer",
+        file: "fil",
+      },
+      en: {
+        inProgress: "Adding {filesUploaded} of {filesTotal}",
+        inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
+        done: "All {filesTotal} added successfully",
+        doneWithErrors: "Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors",
+        files: "tiedostoa",
+        file: "tiedosto",
+      },
+    };
+    /**
+     * Strings used for the status aria-label
+     */
+    this.statusMessageLabel = getLocaleString(this.statusLabelDefaults);
     /**
      * Property to change descriptionDefaults defaults on the component.
      * normally you would handle these strings on an application level and override @label when needed
+     * @default {
+        fi: "Lisää liite",
+        sv: "Lägg till en bilaga",
+        en: "Add an attachment",
+      }
      */
     this.buttonLabelDefaults = {
       fi: "Lisää liite",
@@ -399,6 +498,10 @@ let DuetUpload = class {
      * browser from displaying its own validation errors.
      */
     this.required = false;
+    /**
+     * Visually hides the groups labels in the editable table list used to display the list of files
+     */
+    this.hideGroups = false;
     /**
      * Map of string that contain list of uploaded files.
      */
@@ -410,6 +513,7 @@ let DuetUpload = class {
     /**
      * 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",
@@ -424,6 +528,11 @@ let DuetUpload = class {
     /**
      * Property to change descriptionDefaults defaults on the component.
      * normally you would handle these strings on an application level and override @label when needed
+     * @default {
+        fi: "Voit liittää {filetypes}-muotoisia tiedostoja sekä yleisimpiä videotiedostoja. Voit lähettää {maxbytes} verran tiedostoja yhdellä kertaa, ja lisätä enintään {maxfiles} liitettä kerrallaan.",
+        sv: "Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer åt gången och lägga till upp till {maxfiles} bilagor åt gången.",
+        en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.",
+      }
      */
     this.descriptionDefaults = {
       fi: "Voit liittää {filetypes}-muotoisia tiedostoja sekä yleisimpiä videotiedostoja. Voit lähettää {maxbytes} verran tiedostoja yhdellä kertaa, ja lisätä enintään {maxfiles} liitettä kerrallaan.",
@@ -432,12 +541,20 @@ let DuetUpload = class {
     };
     /**
      * Description for the upload component.
-     * @default ...
+     * @default {
+        fi: "Voit liittää {filetypes}-muotoisia tiedostoja sekä yleisimpiä videotiedostoja. Voit lähettää {maxbytes} verran tiedostoja yhdellä kertaa, ja lisätä enintään {maxfiles} liitettä kerrallaan.",
+        sv: "Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer åt gången och lägga till upp till {maxfiles} bilagor åt gången.",
+        en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.",
+      }
      */
     this.description = getLocaleString(this.descriptionDefaults);
     /**
      * Defaults for the filelist's empty state.
-     * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
+     * @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.",
@@ -453,21 +570,6 @@ let DuetUpload = class {
      * Display the input in error state along with an error message.
      */
     this.error = "";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * if set, allows capture of media from user camera / microphone
-     * The capture attribute value is a string that specifies which camera to use for capture
-     * of image or video data, if the accept attribute indicates that the input should be of
-     * one of those types. A value of user indicates that the user-facing camera and/or
-     * microphone should be used. A value of environment specifies that the outward-facing
-     * camera and/or microphone should be used. If this attribute is missing, the user agent
-     * is free to decide on its own what to do. If the requested facing mode isn't available,
-     * the user agent may fall back to its preferred default mode.
-     */
-    this.capture = undefined;
     /**
      * Use maxBytes to specify the maximum size in Bytes of a file that can be uploaded.
      */
@@ -499,10 +601,94 @@ let DuetUpload = class {
      * by default this is off, setting this to true will limit the users choices to what has been explicitly set
      */
     this.limitSelection = false;
+    //region Private functions
     /**
      * Private functions
      */
-    this.kick = () => (this.tick = Date.now()); // will trigger re-render
+    this.listenForActionEvents = () => {
+      this.element.addEventListener("duetEditableItemAction", (e) => {
+        const detail = e.detail;
+        const { action, keyName, originalEvent } = detail;
+        switch (action) {
+          case "delete":
+            this.onDelete(keyName, originalEvent);
+            break;
+          case "cancel":
+            this.onCancel(keyName, originalEvent);
+            break;
+          // code block
+        }
+      });
+    };
+    this.verifyValidity = () => {
+      const { invalid, valid } = this.getFilesAsArray();
+      const oldValid = this.valid;
+      this.valid = invalid.length === 0 && valid.length !== 0;
+      if (this.valid !== oldValid) {
+        this.duetState.emit({
+          originalEvent: undefined,
+          data: { valid: this.valid, from: "componentWillRender" },
+          component: "duet-upload",
+        });
+      }
+    };
+    this.getGroupFromItemData = (item) => {
+      if (item.valid && item.progress === 100) {
+        // if the item has a group, move the file to that group instead
+        // of into the standard success group
+        if (item.group) {
+          return item.group;
+        }
+        return this.DefaultGroups.success;
+      }
+      else if (item.progress > 0 && item.progress !== 100) {
+        return this.DefaultGroups.inprogress;
+      }
+      else if (!item.valid) {
+        return this.DefaultGroups.failure;
+      }
+      else if (item.group) {
+        return item.group;
+      }
+      else {
+        return "none";
+      }
+    };
+    this.getItemHTMLFromItemData = (data, group) => {
+      if (group === this.DefaultGroups.success) {
+        return h(SuccessItem, { data: data, showLinks: this.showLinks });
+      }
+      else if (group === this.DefaultGroups.inprogress) {
+        return h(ProgressItem, { progress: data.progress, name: data.item.name });
+      }
+      else if (group === this.DefaultGroups.failure) {
+        return h(ErrorItem, { data: data });
+      }
+      else if (data.group) {
+        return data.html;
+      }
+      else {
+        return "none";
+      }
+    };
+    this.convertToDuetEditableTableItems = () => {
+      // we're always recreating the map - in order to force an update down stream.
+      const itemData = new Map();
+      //walk the files Map and convert to DuetEditableTableItemData
+      this.files.forEach((data, key, _originalMap) => {
+        const group = this.getGroupFromItemData(data);
+        const item = this.getItemHTMLFromItemData(data, group);
+        itemData.set(key, {
+          uid: data.uid,
+          item,
+          group,
+        });
+      });
+      return itemData;
+    };
+    this.kick = debounce(() => {
+      this.tick = Date.now();
+    }, 30); // will trigger re-render
     this.genHashName = () => Date.now().toString(36) + Math.random();
     this.updateValueInMap = (item, key, value, kick = true) => {
       const fileItem = this.files.get(item);
@@ -513,10 +699,14 @@ let DuetUpload = class {
       }
     };
     this.updateProgress = (ev, name) => {
-      if (ev.lengthComputable) {
-        const percentComplete = (ev.loaded / ev.total) * 100;
+      console.log(this.filesInProgress.size);
+      const updateProgressHelper = percentComplete => {
         this.updateValueInMap(name, "progress", percentComplete);
         this.onProgress(name, percentComplete, ev);
+      };
+      if (ev.lengthComputable) {
+        const percentComplete = (ev.loaded / ev.total) * 100;
+        updateProgressHelper(percentComplete);
       }
       else {
         console.log("cant read progress");
@@ -555,16 +745,17 @@ let DuetUpload = class {
        */
       this.nativeInput.value = "";
     };
-    this.getI18nError = (errorCode) => {
-      const errorFromJson = getError(errorCode);
-      const i18String = getLocaleString(errorFromJson.message);
-      if (i18String === "" || !i18String) {
-        return errorFromJson.system_message;
-      }
-      else {
-        return i18String;
-      }
+    this.startUpload = async (ev, metaData = undefined) => {
+      await this.setFocus();
+      this.metaData = metaData;
+      this.nativeInput.click();
+      this.onUpload(ev, metaData);
+      ev.stopPropagation();
+      ev.preventDefault();
+      return;
     };
+    //endregion
+    //region Eventlisteners for the XHR requests
     /**
      * Eventlisteners for the XHR requests
      */
@@ -574,6 +765,7 @@ let DuetUpload = class {
     };
     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);
@@ -587,12 +779,13 @@ let DuetUpload = class {
     this.transferDoneWithFailure = (xhr, name, status) => {
       try {
         const { error } = JSON.parse(xhr.response);
-        this.updateValueInMap(name, "error", { message: error.message, type: error.type });
+        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 });
+        this.updateValueInMap(name, "error", { type: status }, false);
       }
+      this.updateValueInMap(name, "valid", false, true);
     };
     this.transferFailed = name => {
       this.updateValueInMap(name, "error", getError("duet-upload-001"));
@@ -623,15 +816,15 @@ let DuetUpload = class {
       this.files.delete(key);
       this.validateTotals();
       this.kick();
-      if (!this.external) {
-        this.makeXHRDeleteRequest(deletedItem);
-      }
-      this.resetFormFields();
       this.duetDelete.emit({
         originalEvent: ev,
         data: { deletion: deletedItem },
         component: "duet-upload",
       });
+      if (!this.external) {
+        this.makeXHRDeleteRequest(deletedItem);
+      }
+      this.resetFormFields();
     };
     this.onCancel = (key, ev) => {
       const cancelledItem = this.files.get(key);
@@ -650,9 +843,10 @@ let DuetUpload = class {
         component: "duet-upload",
       });
     };
-    this.onUpload = (ev) => {
+    this.onUpload = (ev, metaData) => {
       this.duetUpload.emit({
         originalEvent: ev,
+        metaData,
         component: "duet-upload",
       });
     };
@@ -684,37 +878,26 @@ let DuetUpload = class {
         data: { files: this.files },
       });
     };
-    this.startUpload = async (ev) => {
-      await this.setFocus();
-      this.nativeInput.click();
-      this.onUpload(ev);
-      ev.stopPropagation();
-      ev.preventDefault();
-    };
   }
   watchValidHandler(newValue, oldValue) {
     if (newValue !== oldValue) {
       this.kick();
     }
   }
+  //endregion
   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
+    this.listenForActionEvents();
   }
   componentWillRender() {
-    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",
-      });
-    }
+    // listen to the events from the component
+    this.verifyValidity();
   }
+  //endregion
+  //region XHR requests
   /**
    * XHR request utilities
    */
@@ -733,23 +916,37 @@ let DuetUpload = class {
     xhr.upload.addEventListener("abort", () => {
       this.transferCanceled(name);
     });
-    return makeXhrRequest({ data, name }, { type: "POST", uri: this.uri, xhr, argument: null, headers: null }, this.transferDoneWithFailure, this.transferDone, this.trackProgress);
+    return makeXhrRequest({
+      payload: { data, name },
+      options: { type: "POST", uri: this.uri, xhr, argument: null, headers: null },
+      onFailure: this.transferDoneWithFailure,
+      onSuccess: this.transferDone,
+      onProgress: this.trackProgress,
+    });
   }
   makeXHRDeleteRequest(data) {
     const { uid, item } = data;
     const xhr = new XMLHttpRequest();
     // don't present server issues to user on deletes, just remove them from the visible list
-    return makeXhrRequest({ data: null, name }, {
-      type: "DELETE",
-      xhr,
-      uri: this.uri,
-      arguments: `?key=${uid}&name=${item.name}`,
-      headers: {
-        "x-fileuid": uid,
-        "x-filename": item.name,
+    return makeXhrRequest({
+      payload: { data: null, name },
+      options: {
+        type: "DELETE",
+        xhr,
+        uri: this.uri,
+        arguments: `?key=${uid}&name=${item.name}`,
+        headers: {
+          "x-fileuid": uid,
+          "x-filename": item.name,
+        },
       },
-    }, this.transferDoneWithFailure, this.transferDone, this.trackProgress);
+      onFailure: this.transferDoneWithFailure,
+      onSuccess: this.transferDone,
+      onProgress: this.trackProgress,
+    });
   }
+  //endregion
+  //region EventHandlers
   /**
    * Component event handling.
    */
@@ -758,7 +955,7 @@ let DuetUpload = class {
     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)
+    // 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, {
@@ -771,6 +968,8 @@ let DuetUpload = class {
           uid,
           item: item,
           size: item.size,
+          meta: this.metaData,
+          uploaded: false,
           valid,
           error: {
             type: valid ? undefined : errorType,
@@ -799,8 +998,14 @@ let DuetUpload = class {
           data.append("file", item);
           data.append("uid", uid);
           data.append("name", item.name);
-          data.append("metadata", JSON.stringify({ uid, url: this.uri, size: item.size }));
-          fileListItem.xhr = await this.makeXHRPostRequest(data);
+          data.append("metadata", JSON.stringify({ uid, url: this.uri, size: item.size, meta: fileListItem.meta }));
+          try {
+            fileListItem.xhr = await this.makeXHRPostRequest(data);
+          }
+          catch (e) {
+            // in case one of the global maxes have been reached, invalidate the file
+            this.updateValueInMap(item.name, "valid", false, false);
+          }
         }
         // kick the stat to force update
         this.kick();
@@ -808,12 +1013,15 @@ let DuetUpload = class {
     }
     // reset the form, so that a user may upload a file again (with the same name)
     this.resetFormFields();
+    // reset the internal metaData state
+    this.metaData = undefined;
     this.duetChange.emit({
       originalEvent: ev,
       data: { files: this.files },
       component: "duet-upload",
     });
   }
+  //endregion
   /**
    * Sets focus on the specified `duet-input`. Use this method instead of the global
    * `input.focus()`.
@@ -824,6 +1032,15 @@ let DuetUpload = class {
     }
     return;
   }
+  /**
+   * Method for invoking the upload sequence
+   */
+  async upload(metaData = undefined) {
+    await this.setFocus();
+    this.metaData = metaData;
+    this.nativeInput.click();
+    return;
+  }
   /**
    * Get list of files, divided in errors and valid sections
    */
@@ -833,6 +1050,12 @@ let DuetUpload = class {
     }
     return this.getFilesAsArray();
   }
+  /**
+   * Convenience method for updating a of an item in the files attribute
+   */
+  async updateValue(item, key, value) {
+    this.updateValueInMap(item, key, value);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -842,13 +1065,13 @@ let DuetUpload = class {
     let caption = this.description.replace(/{maxfiles}/g, this.maxFiles.toString());
     caption = caption.replace(/{maxbytes}/g, `${Math.floor(this.maxBytes / 1024 / 1024)} MB`);
     caption = caption.replace(/{filetypes}/g, this.allowedExtensions.split(",").join(", "));
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { label: this.label, caption: caption }, h("slot", { name: "header" }), h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", size: "small", class: {
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { label: this.label, caption: caption }, h("slot", { name: "header" }), !this.files.size && (h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", size: "small", class: {
         "duet-upload-filelist-empty": !this.files.size,
         "duet-upload-filelist": true,
         "duet-upload-filelist-filled": this.files.size,
-      }, id: this.labelId, for: identifier }, !this.files.size && this.fileListEmpty), !!this.files.size && h("slot", { name: "fileheader" }), h(DuetUploadFileList, { data: this.getFilesAsArray(), onDelete: this.onDelete, onCancel: this.onCancel, getError: this.getI18nError }, h("li", null, "testing something")), !!this.files.size && h("slot", { name: "filefooter" }), h("duet-spacer", { size: "large" }), h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle" }, this.buttonLabel), h("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (h("duet-alert", null, this.fileMaxReached && this.getI18nError("duet-upload-301"), this.bytesMaxReached && this.getI18nError("duet-upload-202"))), h("duet-spacer", { size: "medium" }), h("duet-visually-hidden", null, h("input", { ref: input => {
+      }, id: this.labelId, for: identifier }, this.fileListEmpty)), !!this.files.size && h("slot", { name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.statusMessageLabel })), !!this.files.size && (h("duet-editable-table", { "aria-live": "polite", "aria-relevant": "removals", accessibleRole: "log", id: this.editableTableId, groups: this.groups, actions: this.actions, hideGroups: this.hideGroups, items: this.convertToDuetEditableTableItems() })), !!this.files.size && h("slot", { name: "filefooter" }), h("duet-spacer", { size: "large" }), !this.hideButton && (h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle" }, this.buttonLabel)), h("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (h("duet-alert", null, this.fileMaxReached && getI18nError("duet-upload-301"), this.bytesMaxReached && getI18nError("duet-upload-202"))), h("duet-spacer", { size: "medium" }), h("duet-visually-hidden", null, h("input", { ref: input => {
         this.nativeInput = input;
-      }, accept: this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
+      }, 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" })))));
   }