@duetds/components 4.30.1 → 4.31.0

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

@@ -1,862 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-f70ddc7f.js';
-import { c as createID } from './create-id-981107da.js';
-import { g as getLocaleString } from './language-utils-ab9c3afc.js';
-import { i as inheritGlobalTheme } from './themeable-component-572685dd.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 = [
-	{
-		type: "default",
-		system_message: "unknown error",
-		message: {
-			fi: "",
-			sv: "",
-			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"
-		}
-	},
-	{
-		type: "401",
-		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"
-		}
-	},
-	{
-		type: "403",
-		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"
-		}
-	},
-	{
-		type: "413",
-		system_message: "Payload too large",
-		message: {
-			fi: "",
-			sv: "",
-			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"
-		}
-	},
-	{
-		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"
-		}
-	},
-	{
-		type: "500",
-		system_message: "Internal Server Error",
-		message: {
-			fi: "",
-			sv: "",
-			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"
-		}
-	},
-	{
-		type: "duet-upload-001",
-		system_message: "File transfer failed",
-		message: {
-			fi: "",
-			sv: "",
-			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"
-		}
-	},
-	{
-		type: "duet-upload-201",
-		system_message: "File is too large",
-		message: {
-			fi: "",
-			sv: "",
-			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"
-		}
-	},
-	{
-		type: "duet-upload-301",
-		system_message: "The maximum file limit has been reached",
-		message: {
-			fi: "Liitteiden maksimimäärä saavutettu.",
-			sv: "",
-			en: "Maximum number of attachments reached."
-		}
-	}
-];
-
-const getError = (code) => {
-  let error = {
-    type: undefined,
-    system_message: undefined,
-    message: undefined,
-  };
-  error = errorcodes.filter(errorItem => {
-    return errorItem.type === code;
-  })[0];
-  if (!error) {
-    error = errorcodes.filter(errorItem => {
-      return errorItem.type === "default";
-    })[0];
-  }
-  return error;
-};
-
-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) => {
-  const { allowedMimetypes, allowedExtensions, maxBytes } = validators;
-  let valid = false;
-  let errorMessage = getError("default");
-  if (item) {
-    const { name, type, size } = item;
-    const mime = validateFileMime(type, allowedMimetypes);
-    const ext = validateFileExtension(name, allowedExtensions);
-    const bytes = validateFileSize(size, maxBytes);
-    if (!mime) {
-      errorMessage = getError("duet-upload-101");
-    }
-    if (!ext) {
-      errorMessage = getError("duet-upload-100");
-    }
-    if (!bytes) {
-      errorMessage = getError("duet-upload-201");
-    }
-    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) => {
-  const { type, xhr, uri, argument, headers } = Object.assign({
-    type: "POST",
-    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}: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}";
-
-let DuetUpload = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.duetChange = createEvent(this, "duetChange", 3);
-    this.duetBlur = createEvent(this, "duetBlur", 7);
-    this.duetFocus = createEvent(this, "duetFocus", 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);
-    /**
-     * Own Properties
-     */
-    this.buttonId = createID("DuetButton");
-    this.labelId = createID("DuetLabel");
-    this.uploadId = createID("DuetUpload");
-    this.filesInProgress = new Map();
-    this.fileMaxReached = false;
-    this.bytesMaxReached = false;
-    /**
-     * 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;
-    /**
-     * Property to change descriptionDefaults defaults on the component.
-     * normally you would handle these strings on an application level and override @label when needed
-     */
-    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 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;
-    /**
-     * Map of string that contain list of uploaded files.
-     */
-    this.files = new Map();
-    /**
-     * Property to read if filelist 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
-     */
-    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.
-     * normally you would handle these strings on an application level and override @label when needed
-     */
-    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.",
-      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.",
-    };
-    /**
-     * Description for the upload component.
-     * @default ...
-     */
-    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"}
-     */
-    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 = "";
-    /**
-     * 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.
-     */
-    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;
-    /**
-     * Private functions
-     */
-    this.kick = () => (this.tick = Date.now()); // 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);
-      fileItem[key] = value;
-      this.files.set(item, fileItem);
-      if (kick) {
-        this.kick();
-      }
-    };
-    this.updateProgress = (ev, name) => {
-      if (ev.lengthComputable) {
-        const percentComplete = (ev.loaded / ev.total) * 100;
-        this.updateValueInMap(name, "progress", percentComplete);
-        this.onProgress(name, percentComplete, ev);
-      }
-      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)
-       */
-      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;
-      }
-    };
-    /**
-     * 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);
-      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 });
-      }
-      catch (e) {
-        console.error("Server did not respond with expected response error:{message: string, type: int}");
-        this.updateValueInMap(name, "error", { type: status });
-      }
-    };
-    this.transferFailed = name => {
-      this.updateValueInMap(name, "error", getError("duet-upload-001"));
-    };
-    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", getError("duet-upload-202"), false);
-      }
-      if (isTotalFileAmountAboveMax && name) {
-        this.updateValueInMap(name, "error", getError("duet-upload-301"), false);
-      }
-      this.bytesMaxReached = isTotalSizeOverMaxSize;
-      this.fileMaxReached = isTotalFileAmountAboveMax;
-      return {
-        bytesMaxReached: isTotalSizeOverMaxSize,
-        fileMaxReached: isTotalFileAmountAboveMax,
-      };
-    };
-    this.onDelete = (key, ev) => {
-      const deletedItem = this.files.get(key);
-      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",
-      });
-    };
-    this.onCancel = (key, ev) => {
-      const cancelledItem = this.files.get(key);
-      this.files.delete(key);
-      if (!this.external) {
-        const { xhr } = cancelledItem;
-        xhr.abort();
-      }
-      else {
-        this.kick();
-      }
-      this.resetFormFields();
-      this.duetCancel.emit({
-        originalEvent: ev,
-        data: { cancelled: cancelledItem },
-        component: "duet-upload",
-      });
-    };
-    this.onUpload = (ev) => {
-      this.duetUpload.emit({
-        originalEvent: ev,
-        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.onDone = () => {
-      this.duetDone.emit({
-        component: "duet-upload",
-        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();
-    }
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-  }
-  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",
-      });
-    }
-  }
-  /**
-   * 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);
-    });
-    return makeXhrRequest({ data, name }, { type: "POST", uri: this.uri, xhr, argument: null, headers: null }, this.transferDoneWithFailure, this.transferDone, 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,
-      },
-    }, this.transferDoneWithFailure, this.transferDone, this.trackProgress);
-  }
-  /**
-   * 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)
-    if (selectedFiles) {
-      for (const item of selectedFiles) {
-        const { valid, errorMessage, errorType, errorSystem } = validateFile(item, {
-          maxBytes: this.maxBytes,
-          allowedExtensions: this.allowedExtensions,
-          allowedMimetypes: this.allowedMimetypes,
-        });
-        const uid = this.genHashName();
-        const fileListItem = {
-          uid,
-          item: item,
-          size: item.size,
-          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) {
-          // if all is well AND external file upload handling has not been set, start upload
-          const data = new FormData();
-          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);
-        }
-        // 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();
-    this.duetChange.emit({
-      originalEvent: ev,
-      data: { files: this.files },
-      component: "duet-upload",
-    });
-  }
-  /**
-   * 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;
-  }
-  /**
-   * Get list of files, divided in errors and valid sections
-   */
-  async getFiles() {
-    if (!this.files || this.files.size === 0) {
-      return false;
-    }
-    return this.getFilesAsArray();
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const identifier = this.identifier || this.uploadId;
-    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: {
-        "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 => {
-        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" })))));
-  }
-  get element() { return getElement(this); }
-  static get watchers() { return {
-    "valid": ["watchValidHandler"]
-  }; }
-};
-DuetUpload.style = duetUploadCss;
-
-export { DuetUpload as duet_upload };