@duetds/components 8.0.6 → 8.1.0

package/lib/esm/duet-editable-table_3.entry.js

@@ -1,301 +1,301 @@
 /*!
  * Built with Duet Design System
  */
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, F as Fragment } from './index-b3bf9761.js';
-import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
-import { f as fieldSorter, d as debounce } from './js-utils-a35dcc8c.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, F as Fragment } from './index-d4489a2e.js';
+import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.js';
+import { f as fieldSorter, d as debounce } from './js-utils-9b9e0039.js';
 import { i as isKeyboardClick } from './keyboard-utils-5746e126.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString, s as sanitizeString } from './language-utils-9ff76444.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString, s as sanitizeString } from './language-utils-00ca4c55.js';
 import { p as sizeNavigation, s as sizeHeader } from './tokens.module-c7944140.js';
-import { b as breakpointTokensUpTo, a as breakpointToToken } from './token-utils-46c8fe31.js';
-import { c as createID } from './create-id-2b0cd46d.js';
-import { g as getError, a as getI18nError } from './errorcodes.utils-424b1197.js';
-import './string-utils-59ad4cb2.js';
+import { b as breakpointTokensUpTo, a as breakpointToToken } from './token-utils-b4bd3ec7.js';
+import { c as createID } from './create-id-149a1b6d.js';
+import { g as getError, a as getI18nError } from './errorcodes.utils-e681347c.js';
+import './string-utils-ca039233.js';
 
 //simple functional component that renders the data in the table
 const TableData = ({ data, groupId, alignment }, _children) => {
-  const classNames = `duet-editable-table duet-editable-table-content-${groupId}`;
-  if (typeof data === "string") {
-    return h("td", { innerHTML: data, class: classNames, part: `${groupId}content`, style: { verticalAlign: alignment } });
-  }
-  else {
-    return (h("td", { class: classNames, part: `${groupId}content`, style: { verticalAlign: alignment } }, data));
-  }
+    const classNames = `duet-editable-table duet-editable-table-content-${groupId}`;
+    if (typeof data === "string") {
+        return h("td", { innerHTML: data, class: classNames, part: `${groupId}content`, style: { verticalAlign: alignment } });
+    }
+    else {
+        return (h("td", { class: classNames, part: `${groupId}content`, style: { verticalAlign: alignment } }, data));
+    }
 };
 
 const duetEditableTableCss = ".sc-duet-editable-table-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-editable-table-actions-menu.sc-duet-editable-table{position:relative;padding:0 !important;margin:0}.duet-editable-table-actions-menu-button.sc-duet-editable-table{position:relative;right:-16px;float:right;padding:0}.duet-editable-table-actions-menu-icon.sc-duet-editable-table .duet-icon.sc-duet-editable-table{max-width:16px;max-height:16px}.duet-editable-table-row.duet-table-action-row.sc-duet-editable-table .duet-text-right.sc-duet-editable-table{text-align:right}.duet-editable-table-header.sc-duet-editable-table tr.sc-duet-editable-table .duet-editable-table-header-hidden.sc-duet-editable-table{padding:0 !important;font-size:0;border-bottom:0}";
 
 const DuetEditableTable = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.duetTableToggle = createEvent(this, "duetTableToggle", 7);
-    this.duetMenuClick = createEvent(this, "duetMenuClick", 7);
-    this.hasHeadSlotFirst = false;
-    this.hasHeadSlotLast = false;
-    this.hasFootSlot = false;
-    this.sortableDefaultLabel = {
-      fi: "Järjestä",
-      en: "Click to sort",
-      sv: "Klicka för att sortera",
-    };
-    this.actionColumnLabel = {
-      en: "Actions for rows",
-      fi: "Toiminnot rivillä",
-      sv: "Åtgärder för rader",
-    };
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.duetTableToggle = createEvent(this, "duetTableToggle", 7);
+        this.duetMenuClick = createEvent(this, "duetMenuClick", 7);
+        this.hasHeadSlotFirst = false;
+        this.hasHeadSlotLast = false;
+        this.hasFootSlot = false;
+        this.sortableDefaultLabel = {
+            fi: "Järjestä",
+            en: "Click to sort",
+            sv: "Klicka för att sortera",
+        };
+        this.actionColumnLabel = {
+            en: "Actions for rows",
+            fi: "Toiminnot rivillä",
+            sv: "Åtgärder för rader",
+        };
+        /**
+         * Private methods.
+         */
+        this.toggleColumn = (column, e) => {
+            e.preventDefault();
+            const { sort_order, direction, index, key } = column;
+            this.duetTableToggle.emit({
+                sort_order,
+                index,
+                direction,
+                key,
+                component: "duet-editable-table",
+                originalEvent: e,
+            });
+        };
+        this.handleKeyDown = (column, e) => {
+            if (isKeyboardClick(e)) {
+                this.toggleColumn(column, e);
+            }
+        };
+        this.language = getLanguage();
+        this.margin = "auto";
+        this.variation = "striped";
+        this.sticky = false;
+        this.stickyDistance = "with-links";
+        this.breakpoint = "small";
+        this.actions = undefined;
+        this.columns = undefined;
+        this.rows = undefined;
+        this.sortable = false;
+        this.groupId = "";
+        this.theme = "";
+        this.accessibleRole = undefined;
+        this.hideHeadVisually = false;
+    }
     /**
-     * Private methods.
+     * Component lifecycle events.
      */
-    this.toggleColumn = (column, e) => {
-      e.preventDefault();
-      const { sort_order, direction, index, key } = column;
-      this.duetTableToggle.emit({
-        sort_order,
-        index,
-        direction,
-        key,
-        component: "duet-editable-table",
-        originalEvent: e,
-      });
-    };
-    this.handleKeyDown = (column, e) => {
-      if (isKeyboardClick(e)) {
-        this.toggleColumn(column, e);
-      }
-    };
-    this.language = getLanguage();
-    this.margin = "auto";
-    this.variation = "striped";
-    this.sticky = false;
-    this.stickyDistance = "with-links";
-    this.breakpoint = "small";
-    this.actions = undefined;
-    this.columns = undefined;
-    this.rows = undefined;
-    this.sortable = false;
-    this.groupId = "";
-    this.theme = "";
-    this.accessibleRole = undefined;
-    this.hideHeadVisually = false;
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-    this.hasHeadSlotFirst = !!this.element.querySelector("[slot='thead-first']");
-    this.hasHeadSlotLast = !!this.element.querySelector("[slot='thead-last']");
-    this.hasFootSlot = !!this.element.querySelector("[slot='tfoot']");
-  }
-  connectedCallback() {
-    connectLanguageChangeObserver(this);
-  }
-  disconnectedCallback() {
-    disconnectLanguageChangeObserver(this);
-  }
-  createLabel(column) {
-    const { sort_order, direction, index, label } = column;
-    const i18nLabel = getLocaleString(label);
-    if (!this.sortable) {
-      return i18nLabel;
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        this.hasHeadSlotFirst = !!this.element.querySelector("[slot='thead-first']");
+        this.hasHeadSlotLast = !!this.element.querySelector("[slot='thead-last']");
+        this.hasFootSlot = !!this.element.querySelector("[slot='tfoot']");
     }
-    const getButtonIcon = () => {
-      // "action-subtract-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-subtract-small.svg
-      // "action-arrow-down-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-arrow-down-small.svg
-      // "action-arrow-up-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-arrow-up-small.svg
-      if (!!sort_order && direction === 1) {
-        return "action-arrow-down-small";
-      }
-      else if (!!sort_order && direction === -1) {
-        return "action-arrow-up-small";
-      }
-      return "action-subtract-small";
-    };
-    return (h("span", { class: "duet-table-label", "data-index": index }, h("duet-button", { size: "small", icon: getButtonIcon(), "icon-size": "medium-small", "accessible-label": this.sortableDefaultLabel[this.language], variation: "plain", margin: "none", "icon-right": true, onClick: event => this.toggleColumn(column, event), onKeyDown: event => this.handleKeyDown(column, event) }, i18nLabel)));
-  }
-  getSortedColumns() {
-    //create a new array from sort instead of mutating original
-    return [...this.columns].sort(fieldSorter(["index"]));
-  }
-  getRowSortOrder() {
-    //create a new array from sort instead of mutating original
-    const fields = [...this.columns].sort(fieldSorter(["sort_order"]));
-    //return only key from objects that have sort_order
-    return fields
-      .filter(column => column.sort_order)
-      .map(column => {
-      // add - in-front of descending direction (required by field-sorter)
-      return column.direction === -1 ? `-${column.key}` : column.key;
-    });
-  }
-  renderTableHeader() {
-    if (!this.columns) {
-      return;
+    connectedCallback() {
+        connectLanguageChangeObserver(this);
     }
-    const sortedColumns = this.getSortedColumns();
-    return (h("tr", { class: {
-        "duet-table-action-header": !!this.actions,
-      } }, sortedColumns.map(column => {
-      if (column.display !== false) {
-        const label = this.createLabel(column);
-        return label !== "" ? h("th", { scope: "col" }, label) : h("td", null);
-      }
-    }), this.actions && (h("th", { scope: "col", class: "duet-table-action-header-heading" }, this.actions && h("duet-visually-hidden", null, this.actionColumnLabel[this.language])))));
-  }
-  renderActions(rowItem, index) {
-    // escape early
-    if (!this.actions) {
-      return;
+    disconnectedCallback() {
+        disconnectLanguageChangeObserver(this);
+    }
+    createLabel(column) {
+        const { sort_order, direction, index, label } = column;
+        const i18nLabel = getLocaleString(label);
+        if (!this.sortable) {
+            return i18nLabel;
+        }
+        const getButtonIcon = () => {
+            // "action-subtract-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-subtract-small.svg
+            // "action-arrow-down-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-arrow-down-small.svg
+            // "action-arrow-up-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-arrow-up-small.svg
+            if (!!sort_order && direction === 1) {
+                return "action-arrow-down-small";
+            }
+            else if (!!sort_order && direction === -1) {
+                return "action-arrow-up-small";
+            }
+            return "action-subtract-small";
+        };
+        return (h("span", { class: "duet-table-label", "data-index": index }, h("duet-button", { size: "small", icon: getButtonIcon(), "icon-size": "medium-small", "accessible-label": this.sortableDefaultLabel[this.language], variation: "plain", margin: "none", "icon-right": true, onClick: event => this.toggleColumn(column, event), onKeyDown: event => this.handleKeyDown(column, event) }, i18nLabel)));
+    }
+    getSortedColumns() {
+        //create a new array from sort instead of mutating original
+        return [...this.columns].sort(fieldSorter(["index"]));
+    }
+    getRowSortOrder() {
+        //create a new array from sort instead of mutating original
+        const fields = [...this.columns].sort(fieldSorter(["sort_order"]));
+        //return only key from objects that have sort_order
+        return fields
+            .filter(column => column.sort_order)
+            .map(column => {
+            // add - in-front of descending direction (required by field-sorter)
+            return column.direction === -1 ? `-${column.key}` : column.key;
+        });
+    }
+    renderTableHeader() {
+        if (!this.columns) {
+            return;
+        }
+        const sortedColumns = this.getSortedColumns();
+        return (h("tr", { class: {
+                "duet-table-action-header": !!this.actions,
+            } }, sortedColumns.map(column => {
+            if (column.display !== false) {
+                const label = this.createLabel(column);
+                return label !== "" ? h("th", { scope: "col" }, label) : h("td", null);
+            }
+        }), this.actions && (h("th", { scope: "col", class: "duet-table-action-header-heading" }, this.actions && h("duet-visually-hidden", null, this.actionColumnLabel[this.language])))));
+    }
+    renderActions(rowItem, index) {
+        // escape early
+        if (!this.actions) {
+            return;
+        }
+        // iterate through actions and add them in the sidebar
+        return (h("td", { class: "duet-text-right" }, this.actions.map(actionItem => {
+            return (h("duet-action-button", { actionMeta: Object.assign({}, (rowItem === null || rowItem === void 0 ? void 0 : rowItem.meta) || {}, { index }), actionId: (rowItem === null || rowItem === void 0 ? void 0 : rowItem.uid) || (rowItem === null || rowItem === void 0 ? void 0 : rowItem.id) || null, actionName: actionItem.name, theme: this.theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${rowItem.actionDescription || ""} ${getLocaleString(actionItem.label)} ` }));
+        })));
+    }
+    renderTableBody() {
+        const columns = this.getSortedColumns();
+        const rowSortOrder = this.getRowSortOrder();
+        const sortedRows = [...this.rows].sort(fieldSorter(rowSortOrder));
+        // return a tbody with rows for each item in sortedRows
+        return sortedRows.map((row, index) => (h("tr", { class: {
+                "duet-table-action-row": !!this.actions,
+                "duet-editable-table-row": true,
+                [`duet-editable-table-row-${this.groupId}`]: true,
+            }, "data-meta": JSON.stringify(row.meta) }, columns.map(column => {
+            //if we don't have any data for this column, try getting an item instead (for backwards compatibility
+            const value = row[column.key] ? row[column.key] : row.item;
+            if (column.display !== false) {
+                return h(TableData, { data: value, groupId: this.groupId });
+            }
+        }), this.actions && this.renderActions(row, index))));
+    }
+    /**
+     * Render Methods
+     */
+    render() {
+        return (h(Host, { class: {
+                [`duet-editable-table-${this.variation}`]: true,
+                "duet-editable-table": true,
+                [`duet-editable-table-${this.theme}`]: true,
+                // sticky only valid when in regular table layout
+                "duet-editable-table-scrollable": this.breakpoint === "none-scrollable",
+                "duet-editable-table-sortable": this.sortable,
+                "duet-editable-table-actions": !!this.actions,
+                "duet-m-0": this.margin === "none",
+                "duet-theme-turva": this.theme === "turva",
+            } }, h("duet-table", { class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { role: this.accessibleRole }, h("caption", null, h("slot", { name: "tcaption" })), h("thead", null, this.hasHeadSlotFirst && (h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-last" }))))), h("tbody", null, this.renderTableBody()), this.hasFootSlot && (h("tfoot", null, h("tr", null, h("td", { class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { name: "tfoot" })))))))));
     }
-    // iterate through actions and add them in the sidebar
-    return (h("td", { class: "duet-text-right" }, this.actions.map(actionItem => {
-      return (h("duet-action-button", { actionMeta: Object.assign({}, (rowItem === null || rowItem === void 0 ? void 0 : rowItem.meta) || {}, { index }), actionId: (rowItem === null || rowItem === void 0 ? void 0 : rowItem.uid) || (rowItem === null || rowItem === void 0 ? void 0 : rowItem.id) || null, actionName: actionItem.name, theme: this.theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${rowItem.actionDescription || ""} ${getLocaleString(actionItem.label)} ` }));
-    })));
-  }
-  renderTableBody() {
-    const columns = this.getSortedColumns();
-    const rowSortOrder = this.getRowSortOrder();
-    const sortedRows = [...this.rows].sort(fieldSorter(rowSortOrder));
-    // return a tbody with rows for each item in sortedRows
-    return sortedRows.map((row, index) => (h("tr", { class: {
-        "duet-table-action-row": !!this.actions,
-        "duet-editable-table-row": true,
-        [`duet-editable-table-row-${this.groupId}`]: true,
-      }, "data-meta": JSON.stringify(row.meta) }, columns.map(column => {
-      //if we don't have any data for this column, try getting an item instead (for backwards compatibility
-      const value = row[column.key] ? row[column.key] : row.item;
-      if (column.display !== false) {
-        return h(TableData, { data: value, groupId: this.groupId });
-      }
-    }), this.actions && this.renderActions(row, index))));
-  }
-  /**
-   * Render Methods
-   */
-  render() {
-    return (h(Host, { class: {
-        [`duet-editable-table-${this.variation}`]: true,
-        "duet-editable-table": true,
-        [`duet-editable-table-${this.theme}`]: true,
-        // sticky only valid when in regular table layout
-        "duet-editable-table-scrollable": this.breakpoint === "none-scrollable",
-        "duet-editable-table-sortable": this.sortable,
-        "duet-editable-table-actions": !!this.actions,
-        "duet-m-0": this.margin === "none",
-        "duet-theme-turva": this.theme === "turva",
-      } }, h("duet-table", { class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { role: this.accessibleRole }, h("caption", null, h("slot", { name: "tcaption" })), h("thead", null, this.hasHeadSlotFirst && (h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-last" }))))), h("tbody", null, this.renderTableBody()), this.hasFootSlot && (h("tfoot", null, h("tr", null, h("td", { class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { name: "tfoot" })))))))));
-  }
-  get element() { return getElement(this); }
+    get element() { return getElement(this); }
 };
 DuetEditableTable.style = duetEditableTableCss;
 
 const duetTableCss = "duet-table{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:20px !important;display:block;font-variant-numeric:tabular-nums}duet-table table,duet-table thead,duet-table tbody,duet-table tfoot,duet-table th,duet-table td,duet-table tr{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}duet-table.duet-m-0{margin:0 !important}duet-table table{width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;text-align:left;border-spacing:0;border-collapse:separate}duet-table.duet-table-hide-head-visually.duet-table-hide-head-visually thead,duet-table.duet-table-hide-head-visually.duet-table-hide-head-visually thead *{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}duet-table.duet-theme-turva table{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}duet-table td{-webkit-hyphens:auto;hyphens:auto;color:rgb(0, 41, 77)}duet-table.duet-theme-turva td{color:rgb(23, 28, 58)}duet-table th{font-weight:600;line-height:1.25;color:rgb(101, 119, 135);text-align:left}duet-table.duet-theme-turva th{color:rgb(116, 116, 117)}duet-table tbody th{font-weight:600;color:rgb(0, 41, 77)}duet-table.duet-theme-turva tbody th{color:rgb(23, 28, 58)}duet-table .duet-table-action-row td:last-child{justify-self:end;padding-right:20px !important;white-space:nowrap}duet-table span.duet-table-cell-heading{display:none}.duet-table-flattened table,.duet-table-flattened thead,.duet-table-flattened tbody,.duet-table-flattened tfoot,.duet-table-flattened th,.duet-table-flattened td,.duet-table-flattened tr{display:block}.duet-table-flattened thead tr{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-table-flattened td{line-height:1.25}.duet-table-flattened td:not(:last-child){margin-bottom:16px !important}.duet-table-flattened td span.duet-table-cell-heading{margin-bottom:4px !important;display:block;font-size:1rem;font-weight:600;color:rgb(0, 41, 77)}.duet-table-flattened.duet-theme-turva td span.duet-table-cell-heading{color:rgb(23, 28, 58)}.duet-table-flattened tbody td,.duet-table-flattened tbody th,.duet-table-flattened tfoot td{padding:0 !important;text-align:left !important}.duet-table-flattened tbody th{font-weight:600;line-height:1.25;color:rgb(101, 119, 135);text-align:left}.duet-table-sticky thead th{position:sticky;top:0;background:rgb(255, 255, 255)}.duet-table-striped td,.duet-table-striped th{padding:20px !important}@media (max-width: 35.9375em){.duet-table-striped td,.duet-table-striped th{padding:20px 12px !important}}.duet-table-striped tbody th{background:rgb(255, 255, 255)}.duet-table-striped.duet-table-sticky thead th{border-bottom:1px solid rgb(225, 227, 230)}.duet-table-striped.duet-table-sticky.duet-theme-turva thead th{border-bottom-color:rgb(228, 228, 230)}.duet-table-striped tbody:not(:first-of-type) th{padding-top:40px !important}.duet-table-striped tbody:only-of-type tr:nth-of-type(odd){background:rgba(0, 80, 128, 0.04)}.duet-table-striped.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd){background:rgba(23, 28, 58, 0.04)}.duet-table-striped tbody:not(:only-of-type) tr:nth-of-type(even){background:rgba(0, 80, 128, 0.04)}.duet-table-striped.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even){background:rgba(23, 28, 58, 0.04)}.duet-table-striped tfoot td{border-top:1px solid rgb(225, 227, 230)}.duet-table-striped.duet-theme-turva tfoot td{border-top-color:rgb(228, 228, 230)}.duet-table-striped.duet-table-flattened tbody:not(:first-of-type) th{padding-top:20px !important}.duet-table-striped.duet-table-flattened tr{padding:20px !important}.duet-table-striped.duet-table-flattened tfoot td{border-top:0}.duet-table-striped.duet-table-flattened tfoot tr{border-top:1px solid rgb(225, 227, 230)}.duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr{border-top-color:rgb(228, 228, 230)}.duet-table-fixed th,.duet-table-minimal th,.duet-table-plain th{padding:16px !important;border-bottom:1px solid rgb(101, 119, 135)}.duet-table-fixed th:first-child,.duet-table-minimal th:first-child,.duet-table-plain th:first-child{padding-left:0 !important}.duet-table-fixed th:last-child,.duet-table-minimal th:last-child,.duet-table-plain th:last-child{padding-right:0 !important}.duet-theme-turva.duet-table-fixed th,.duet-theme-turva.duet-table-minimal th,.duet-theme-turva.duet-table-plain th{border-bottom-color:rgb(68, 68, 69)}.duet-table-fixed tbody th,.duet-table-minimal tbody th,.duet-table-plain tbody th{padding-top:40px !important;border-bottom-color:rgb(225, 227, 230)}.duet-theme-turva.duet-table-fixed tbody th,.duet-theme-turva.duet-table-minimal tbody th,.duet-theme-turva.duet-table-plain tbody th{border-bottom-color:rgb(228, 228, 230)}.duet-table-fixed td,.duet-table-minimal td,.duet-table-plain td{padding:16px !important}.duet-table-fixed td:first-child,.duet-table-minimal td:first-child,.duet-table-plain td:first-child{padding-left:0 !important}.duet-table-fixed td:last-child,.duet-table-minimal td:last-child,.duet-table-plain td:last-child{padding-right:0 !important}.duet-table-fixed tbody td,.duet-table-minimal tbody td,.duet-table-plain tbody td{border-bottom:1px solid rgb(225, 227, 230)}.duet-theme-turva.duet-table-fixed tbody td,.duet-theme-turva.duet-table-minimal tbody td,.duet-theme-turva.duet-table-plain tbody td{border-bottom-color:rgb(228, 228, 230)}.duet-table-flattened.duet-table-fixed tbody:first-of-type th,.duet-table-flattened.duet-table-minimal tbody:first-of-type th,.duet-table-flattened.duet-table-plain tbody:first-of-type th{padding-top:0 !important}.duet-table-flattened.duet-table-fixed td,.duet-table-flattened.duet-table-minimal td,.duet-table-flattened.duet-table-plain td,.duet-table-flattened.duet-table-fixed tbody th,.duet-table-flattened.duet-table-minimal tbody th,.duet-table-flattened.duet-table-plain tbody th{border-bottom:0}.duet-table-flattened.duet-table-fixed tr,.duet-table-flattened.duet-table-minimal tr,.duet-table-flattened.duet-table-plain tr{padding:20px 0 !important}.duet-table-flattened.duet-table-fixed tbody th,.duet-table-flattened.duet-table-minimal tbody th,.duet-table-flattened.duet-table-plain tbody th{padding-top:20px !important}.duet-table-flattened.duet-table-fixed tfoot td,.duet-table-flattened.duet-table-minimal tfoot td,.duet-table-flattened.duet-table-plain tfoot td{margin-bottom:4px !important}.duet-table-flattened.duet-table-fixed tbody:not(:only-of-type) tr:first-child,.duet-table-flattened.duet-table-minimal tbody:not(:only-of-type) tr:first-child,.duet-table-flattened.duet-table-plain tbody:not(:only-of-type) tr:first-child{border-bottom:0}.duet-table-plain.duet-table-flattened tbody tr{border-bottom:1px solid rgb(225, 227, 230)}.duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr{border-bottom-color:rgb(228, 228, 230)}.duet-table-minimal tbody tr,.duet-table-minimal tbody tr td{vertical-align:top;border-bottom:0 none}.duet-table-minimal tbody tr:last-of-type,.duet-table-minimal tbody tr:last-of-type td{border-bottom:1px solid rgb(225, 227, 230)}.duet-table-minimal.duet-table-flattened tbody tr,.duet-table-minimal.duet-table-flattened tbody tr td{border-bottom:0 none}.duet-table-minimal.duet-table-flattened tbody tr td[data-heading]::before{display:none}.duet-table-minimal.duet-table-flattened tfoot{border-top:1px solid rgb(225, 227, 230)}.duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot{border-top-color:rgb(228, 228, 230)}.duet-table-fixed table{table-layout:fixed}.duet-table-fixed tbody tr,.duet-table-fixed tbody tr td,.duet-table-fixed tbody tr td:first-child{padding:4px !important;vertical-align:text-bottom;border-bottom:0 none}.duet-table-fixed thead{display:none}.duet-table-fixed tbody tr,.duet-table-fixed tbody tr td{border-bottom:0 none}.duet-table-fixed:not(.duet-table-flattened) tfoot{border-top:1px solid rgb(225, 227, 230)}.duet-table-fixed:not(.duet-table-flattened).duet-theme-turva tfoot{border-top-color:rgb(228, 228, 230)}.duet-table-scrollable{position:relative;width:100%;overflow-x:auto;background:linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0)), linear-gradient(-90deg, #fff 0%, rgba(255, 255, 255, 0)) 100% 0, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) 100% 0%;background-repeat:no-repeat;background-attachment:local, local, scroll, scroll;background-size:100px 100%, 100px 100%, 12px 100%, 12px 100%}.duet-table-selected-column{background:rgba(0, 119, 179, 0.08)}.duet-theme-turva .duet-table-selected-column{background:rgba(68, 68, 69, 0.08)}.duet-table-sortable tbody tr td:first-child,.duet-table-sortable thead tr th:first-child{padding:20px}.duet-table-sortable:not(.duet-table-flattened) tfoot{border-top:1px solid rgb(225, 227, 230)}.duet-table-sortable:not(.duet-table-flattened).duet-theme-turva tfoot{border-top-color:rgb(228, 228, 230)}.duet-table-actions table{table-layout:auto}.duet-table-actions thead th:last-child{width:1px;white-space:nowrap}.duet-editable-table-table.duet-table-flattened tr{display:grid;grid-template-columns:repeat(2, 1fr);grid-auto-rows:auto;gap:10px}.duet-editable-table-table.duet-table-flattened tr.duet-table-action-row td:last-child::before{padding:0;content:\"\"}.duet-editable-table-table.duet-table-flattened td{grid-column:1/2}.duet-editable-table-table.duet-table-flattened td:first-child{grid-row:1;grid-column:1}.duet-editable-table-table.duet-table-flattened td:last-child{grid-row:1;grid-column:2}";
 
 const stickyTopValues = {
-  none: 0,
-  "with-links": parseFloat(sizeNavigation) * 16,
-  "without-links": parseFloat(sizeHeader) * 16,
+    none: 0,
+    "with-links": parseFloat(sizeNavigation) * 16, // convert rem -> px
+    "without-links": parseFloat(sizeHeader) * 16,
 };
 const DuetTable = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.headingSelector = "thead tr > :not(*.duet-editable-table-actions-menu)";
-    this.handleMediaQueryChange = (mq) => {
-      this.matchesBreakpoint = breakpointTokensUpTo.includes(this.breakpoint) ? !mq.matches : mq.matches;
-    };
-    this.matchesBreakpoint = true;
-    this.language = getLanguage();
-    this.theme = undefined;
-    this.margin = "auto";
-    this.variation = "striped";
-    this.sticky = false;
-    this.stickyDistance = "with-links";
-    this.breakpoint = "small";
-    this.hideHeadVisually = false;
-  }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue) {
-      setTimeout(() => this.copyHeadingsToCells(), 50);
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.headingSelector = "thead tr > :not(*.duet-editable-table-actions-menu)";
+        this.handleMediaQueryChange = (mq) => {
+            this.matchesBreakpoint = breakpointTokensUpTo.includes(this.breakpoint) ? !mq.matches : mq.matches;
+        };
+        this.matchesBreakpoint = true;
+        this.language = getLanguage();
+        this.theme = undefined;
+        this.margin = "auto";
+        this.variation = "striped";
+        this.sticky = false;
+        this.stickyDistance = "with-links";
+        this.breakpoint = "small";
+        this.hideHeadVisually = false;
     }
-  }
-  connectedCallback() {
-    const token = this.breakpoint === "none" || this.breakpoint === "none-scrollable" ? "all" : breakpointToToken[this.breakpoint];
-    this.mq = matchMedia(token);
-    this.mq.addEventListener("change", debounce(this.handleMediaQueryChange, 50));
-    this.handleMediaQueryChange(this.mq);
-    this.observer = new MutationObserver(() => debounce(this.copyHeadingsToCells(), 50));
-    this.observer.observe(this.element, {
-      childList: true,
-      subtree: true,
-    });
-  }
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-    this.copyHeadingsToCells();
-    if (this.sticky && this.breakpoint === "none-scrollable") {
-      console.warn(`[DUET WARNING]: sticky and breakpoint="none-scrollable" are incompatible. Scrollable takes precedence`);
+    watchLanguageStateHandler(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setTimeout(() => this.copyHeadingsToCells(), 50);
+        }
     }
-    if (this.sticky) {
-      const stickyTop = stickyTopValues[this.stickyDistance];
-      const headingElements = this.element.querySelectorAll(this.headingSelector);
-      headingElements.forEach(th => (th.style.top = `${stickyTop}px`));
+    connectedCallback() {
+        const token = this.breakpoint === "none" || this.breakpoint === "none-scrollable" ? "all" : breakpointToToken[this.breakpoint];
+        this.mq = matchMedia(token);
+        this.mq.addEventListener("change", debounce(this.handleMediaQueryChange, 50));
+        this.handleMediaQueryChange(this.mq);
+        this.observer = new MutationObserver(() => debounce(this.copyHeadingsToCells(), 50));
+        this.observer.observe(this.element, {
+            childList: true,
+            subtree: true,
+        });
     }
-  }
-  componentDidLoad() {
-    // this clears all pending mutations,
-    // that way we avoid dealing with any initial changes
-    // and only get genuine mutations as rows are added/removed
-    this.observer ? this.observer.takeRecords() : null;
-    connectLanguageChangeObserver(this);
-  }
-  disconnectedCallback() {
-    this.observer.disconnect();
-    this.observer = null;
-    this.mq.removeListener(this.handleMediaQueryChange);
-    this.mq = null;
-    this.matchesBreakpoint = true;
-    disconnectLanguageChangeObserver(this);
-  }
-  /**
-   * Local methods.
-   */
-  copyHeadingsToCells() {
-    const headingElements = this.element.querySelectorAll(this.headingSelector);
-    const rowElements = this.element.querySelectorAll("tbody tr");
-    const headings = Array.from(headingElements).map(th => th.textContent.trim());
-    rowElements.forEach(tr => {
-      tr.querySelectorAll("td").forEach((td, i) => {
-        if (headings[i]) {
-          const previousSpan = td.querySelector(".duet-table-cell-heading");
-          if (!previousSpan || previousSpan.textContent !== headings[i]) {
-            previousSpan === null || previousSpan === void 0 ? void 0 : previousSpan.remove();
-            const span = document.createElement("span");
-            span.textContent = headings[i];
-            span.classList.add("duet-table-cell-heading");
-            span.setAttribute("aria-hidden", "true");
-            span.inert = true;
-            td.prepend(span);
-          }
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        this.copyHeadingsToCells();
+        if (this.sticky && this.breakpoint === "none-scrollable") {
+            console.warn(`[DUET WARNING]: sticky and breakpoint="none-scrollable" are incompatible. Scrollable takes precedence`);
         }
-      });
-    });
-  }
-  render() {
-    return (h(Host, { class: {
-        [`duet-table-${this.variation}`]: true,
-        "duet-table-flattened": !this.matchesBreakpoint,
-        // sticky only valid when in regular table layout
-        "duet-table-sticky": this.matchesBreakpoint && this.sticky,
-        "duet-table-scrollable": this.breakpoint === "none-scrollable",
-        "duet-m-0": this.margin === "none",
-        "duet-theme-turva": this.theme === "turva",
-        "duet-table-hide-head-visually": this.hideHeadVisually,
-      } }, h("slot", null)));
-  }
-  get element() { return getElement(this); }
-  static get watchers() { return {
-    "language": ["watchLanguageStateHandler"]
-  }; }
+        if (this.sticky) {
+            const stickyTop = stickyTopValues[this.stickyDistance];
+            const headingElements = this.element.querySelectorAll(this.headingSelector);
+            headingElements.forEach(th => (th.style.top = `${stickyTop}px`));
+        }
+    }
+    componentDidLoad() {
+        // this clears all pending mutations,
+        // that way we avoid dealing with any initial changes
+        // and only get genuine mutations as rows are added/removed
+        this.observer ? this.observer.takeRecords() : null;
+        connectLanguageChangeObserver(this);
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+        this.observer = null;
+        this.mq.removeListener(this.handleMediaQueryChange);
+        this.mq = null;
+        this.matchesBreakpoint = true;
+        disconnectLanguageChangeObserver(this);
+    }
+    /**
+     * Local methods.
+     */
+    copyHeadingsToCells() {
+        const headingElements = this.element.querySelectorAll(this.headingSelector);
+        const rowElements = this.element.querySelectorAll("tbody tr");
+        const headings = Array.from(headingElements).map(th => th.textContent.trim());
+        rowElements.forEach(tr => {
+            tr.querySelectorAll("td").forEach((td, i) => {
+                if (headings[i]) {
+                    const previousSpan = td.querySelector(".duet-table-cell-heading");
+                    if (!previousSpan || previousSpan.textContent !== headings[i]) {
+                        previousSpan === null || previousSpan === void 0 ? void 0 : previousSpan.remove();
+                        const span = document.createElement("span");
+                        span.textContent = headings[i];
+                        span.classList.add("duet-table-cell-heading");
+                        span.setAttribute("aria-hidden", "true");
+                        span.inert = true;
+                        td.prepend(span);
+                    }
+                }
+            });
+        });
+    }
+    render() {
+        return (h(Host, { class: {
+                [`duet-table-${this.variation}`]: true,
+                "duet-table-flattened": !this.matchesBreakpoint,
+                // sticky only valid when in regular table layout
+                "duet-table-sticky": this.matchesBreakpoint && this.sticky,
+                "duet-table-scrollable": this.breakpoint === "none-scrollable",
+                "duet-m-0": this.margin === "none",
+                "duet-theme-turva": this.theme === "turva",
+                "duet-table-hide-head-visually": this.hideHeadVisually,
+            } }, h("slot", null)));
+    }
+    get element() { return getElement(this); }
+    static get watchers() { return {
+        "language": ["watchLanguageStateHandler"]
+    }; }
 };
 DuetTable.style = duetTableCss;
 
@@ -447,1042 +447,1042 @@ const errorCodes = [
 ];
 
 const headerAriaLabel = {
-  fi: "Liiteluettelo",
-  sv: "Lista över bilagor",
-  en: "Attachments list",
+    fi: "Liiteluettelo",
+    sv: "Lista över bilagor",
+    en: "Attachments list",
 };
 const UploadItemHeader = ({ label, categoryLabel }) => {
-  return (h("div", { class: "items-header", tabindex: "0", "aria-label": getLocaleString(headerAriaLabel) },
-    categoryLabel && (h("duet-heading", { class: "category-header", border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none", "aria-hidden": "true" }, getLocaleString(categoryLabel))),
-    h("duet-heading", { class: { "filename-header": true, "no-category": !categoryLabel }, border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none", "aria-hidden": "true" }, getLocaleString(label))));
+    return (h("div", { class: "items-header", tabindex: "-1", "aria-label": getLocaleString(headerAriaLabel) },
+        categoryLabel && (h("duet-heading", { class: "category-header", border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none", "aria-hidden": "true" }, getLocaleString(categoryLabel))),
+        h("duet-heading", { class: { "filename-header": true, "no-category": !categoryLabel }, border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none", "aria-hidden": "true" }, getLocaleString(label))));
 };
 
 const validateFileExtension = (name, allowedExtensions) => {
-  if (!allowedExtensions) {
-    return true;
-  }
-  const ext = name.split(".");
-  const validExtension = allowedExtensions.split(",");
-  const extension = ext[ext.length - 1];
-  return validExtension.includes(extension);
+    if (!allowedExtensions) {
+        return true;
+    }
+    const ext = name.split(".");
+    const validExtension = allowedExtensions.split(",");
+    const extension = ext[ext.length - 1];
+    return validExtension.includes(extension);
 };
 const validateFileMime = (type, allowedMimetypes) => {
-  if (!allowedMimetypes || !type) {
-    return true;
-  }
-  const validMimeTypes = allowedMimetypes.split(",");
-  let valid = false;
-  validMimeTypes.forEach(mimeType => {
-    const allowedTypes = mimeType.split("/");
-    const fileType = type.split("/");
-    if (allowedTypes[0] === fileType[0] && (allowedTypes[1] === fileType[1] || allowedTypes[1] === "*")) {
-      valid = true;
+    if (!allowedMimetypes || !type) {
+        return true;
     }
-  });
-  return valid;
+    const validMimeTypes = allowedMimetypes.split(",");
+    let valid = false;
+    validMimeTypes.forEach(mimeType => {
+        const allowedTypes = mimeType.split("/");
+        const fileType = type.split("/");
+        if (allowedTypes[0] === fileType[0] && (allowedTypes[1] === fileType[1] || allowedTypes[1] === "*")) {
+            valid = true;
+        }
+    });
+    return valid;
 };
 const validateFileSize = (size, maxBytes) => {
-  if (!maxBytes || !size) {
-    return true;
-  }
-  return maxBytes >= size;
+    if (!maxBytes || !size) {
+        return true;
+    }
+    return maxBytes >= size;
 };
 const validateFile = (item, validators, errorCodes) => {
-  const { allowedMimetypes, allowedExtensions, maxBytes } = validators;
-  let valid = false;
-  let errorMessage = getError("default", errorCodes);
-  if (item) {
-    const { name, type, size } = item;
-    const mime = validateFileMime(type, allowedMimetypes);
-    const ext = allowedExtensions === "all" ||
-      allowedExtensions === "" ||
-      allowedExtensions === " " ||
-      allowedExtensions === undefined
-      ? true
-      : validateFileExtension(name.toLowerCase(), allowedExtensions);
-    const bytes = validateFileSize(size, maxBytes);
-    if (!mime) {
-      errorMessage = getError("duet-upload-101", errorCodes);
-    }
-    if (!ext) {
-      errorMessage = getError("duet-upload-100", errorCodes);
+    const { allowedMimetypes, allowedExtensions, maxBytes } = validators;
+    let valid = false;
+    let errorMessage = getError("default", errorCodes);
+    if (item) {
+        const { name, type, size } = item;
+        const mime = validateFileMime(type, allowedMimetypes);
+        const ext = allowedExtensions === "all" ||
+            allowedExtensions === "" ||
+            allowedExtensions === " " ||
+            allowedExtensions === undefined
+            ? true
+            : validateFileExtension(name.toLowerCase(), allowedExtensions);
+        const bytes = validateFileSize(size, maxBytes);
+        if (!mime) {
+            errorMessage = getError("duet-upload-101", errorCodes);
+        }
+        if (!ext) {
+            errorMessage = getError("duet-upload-100", errorCodes);
+        }
+        if (!bytes) {
+            errorMessage = getError("duet-upload-201", errorCodes);
+        }
+        valid = mime && ext && bytes;
     }
-    if (!bytes) {
-      errorMessage = getError("duet-upload-201", errorCodes);
+    else {
+        valid = false;
     }
-    valid = mime && ext && bytes;
-  }
-  else {
-    valid = false;
-  }
-  return {
-    valid,
-    errorMessage: valid ? undefined : getLocaleString(errorMessage.message),
-    errorSystem: valid ? undefined : errorMessage.system_message,
-    errorType: valid ? undefined : errorMessage.type,
-  };
+    return {
+        valid,
+        errorMessage: valid ? undefined : getLocaleString(errorMessage.message),
+        errorSystem: valid ? undefined : errorMessage.system_message,
+        errorType: valid ? undefined : errorMessage.type,
+    };
 };
 const validateTotalSizeIsAboveMax = (filelist, maxTotalBytes) => {
-  let total = 0;
-  if (maxTotalBytes) {
-    filelist.forEach(item => {
-      if (item.valid && item.size) {
-        total += item.size;
-      }
-    });
-    if (total >= maxTotalBytes) {
-      return true;
+    let total = 0;
+    if (maxTotalBytes) {
+        filelist.forEach(item => {
+            if (item.valid && item.size) {
+                total += item.size;
+            }
+        });
+        if (total >= maxTotalBytes) {
+            return true;
+        }
     }
-  }
-  return false;
+    return false;
 };
 const validateTotalAmountIsAboveMax = (filelist, maxFiles) => {
-  let total = 0;
-  if (maxFiles) {
-    filelist.forEach(item => {
-      if (item.valid) {
-        total++;
-      }
-    });
-    if (total >= maxFiles) {
-      return true;
+    let total = 0;
+    if (maxFiles) {
+        filelist.forEach(item => {
+            if (item.valid) {
+                total++;
+            }
+        });
+        if (total >= maxFiles) {
+            return true;
+        }
     }
-  }
-  return false;
+    return false;
 };
 const filesToUploadCountAboveMax = (currentFilesCount, filesToUploadCount, maxFiles) => {
-  if (currentFilesCount + filesToUploadCount > maxFiles) {
-    return true;
-  }
-  return false;
+    if (currentFilesCount + filesToUploadCount > maxFiles) {
+        return true;
+    }
+    return false;
 };
 const filesToUploadTotalSizeIsAboveMax = (currentFiles, filesToUpload, maxTotalBytes) => {
-  let total = 0;
-  if (maxTotalBytes) {
-    currentFiles.forEach(item => {
-      if (item.valid && item.size) {
-        total += item.size;
-      }
-    });
-    filesToUpload.forEach(item => {
-      if (item.size) {
-        total += item.size;
-      }
-    });
-    if (total >= maxTotalBytes) {
-      return true;
+    let total = 0;
+    if (maxTotalBytes) {
+        currentFiles.forEach(item => {
+            if (item.valid && item.size) {
+                total += item.size;
+            }
+        });
+        filesToUpload.forEach(item => {
+            if (item.size) {
+                total += item.size;
+            }
+        });
+        if (total >= maxTotalBytes) {
+            return true;
+        }
     }
-  }
-  return false;
+    return false;
 };
 
 const makeXhrRequest = ({ payload, options, onFailure, onSuccess, onProgress }) => {
-  // @ts-ignore
-  const { type = "POST", xhr, uri, argument = null, headers = null } = options;
-  xhr.open(type, `${uri}${argument || ""}`, true);
-  const { data, name } = payload;
-  // headers must be added after open
-  if (headers) {
-    Object.keys(headers).forEach(key => {
-      xhr.setRequestHeader(key, headers[key]);
-    });
-  }
-  if (type === "POST") {
-    xhr.onreadystatechange = () => {
-      // Call a function when the state changes.
-      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status >= 200 && xhr.status < 300) {
-        // Request finished without errors
-        onSuccess(xhr, name, xhr.status);
-      }
-      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status >= 300 && xhr.status < 999) {
-        // Request finished with errors
-        onFailure(xhr, name, xhr.status);
-      }
-    };
-    onProgress(name);
-  }
-  xhr.send(data);
-  return xhr;
+    // @ts-ignore
+    const { type = "POST", xhr, uri, argument = null, headers = null } = options;
+    xhr.open(type, `${uri}${argument || ""}`, true);
+    const { data, name } = payload;
+    // headers must be added after open
+    if (headers) {
+        Object.keys(headers).forEach(key => {
+            xhr.setRequestHeader(key, headers[key]);
+        });
+    }
+    if (type === "POST") {
+        xhr.onreadystatechange = () => {
+            // Call a function when the state changes.
+            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status >= 200 && xhr.status < 300) {
+                // Request finished without errors
+                onSuccess(xhr, name, xhr.status);
+            }
+            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status >= 300 && xhr.status < 999) {
+                // Request finished with errors
+                onFailure(xhr, name, xhr.status);
+            }
+        };
+        onProgress(name);
+    }
+    xhr.send(data);
+    return xhr;
 };
 
 const duetUploadCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=header]){margin-bottom:16px}::slotted([slot=fileheader]){margin:16px 0 0 0}::slotted([slot=filefooter]){margin-top:16px}::slotted([slot=uploadfooter]){margin-top:20px}.duet-upload{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-upload-item-size{font-size:0.75rem;font-weight:400}.duet-upload-filelist{margin-bottom:25px}.duet-upload-filelist-empty{display:flex;align-items:center;justify-content:center;width:100%;height:75px;margin:0 auto;font-size:1rem;font-weight:400;background-color:rgb(245, 248, 250)}.duet-upload-filelist-empty-label{font-size:1rem;font-weight:400}.duet-upload-editable-table-header-hidden{display:none}.duet-upload-editable-table tbody .duet-upload-editable-table-data{padding:0 !important;border:0}.duet-upload-editable-table duet-editable-table tfoot,.duet-upload-editable-table duet-editable-table thead{display:none}.duet-upload-editable-table duet-editable-table .duet-editable-table-content{padding-right:0 !important;padding-left:0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td{padding:1rem 0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td:last-child{padding-right:0 !important}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress,.duet-upload-editable-table duet-editable-table .duet-editable-table-row-pending{position:relative}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-progress,.duet-upload-editable-table duet-editable-table .duet-editable-table-row-pending duet-progress{position:absolute;bottom:0;width:100%}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-action-button::part(button),.duet-upload-editable-table duet-editable-table .duet-editable-table-row-pending duet-action-button::part(button){border:0}duet-paragraph::part(duet-paragraph){word-break:break-word}duet-editable-table tfoot{display:none}.upload-bottom-caption{margin-top:12px;margin-bottom:16px;line-height:1.4rem}.items-header{display:none;flex-direction:row;margin-bottom:0}@media (min-width: 36em){.items-header{display:flex}}.items-header:not(:last-child),.items-header:not(:first-child){margin-top:12px}.items-header .category-header{width:35%}.items-header .filename-header{width:65%}.items-header .filename-header.no-category{width:100%}.upload-item-row{display:flex;flex-direction:column;gap:16px;align-content:center;align-items:center;padding:16px 0 16px 0;border-bottom:1px solid rgb(225, 227, 230)}@media (min-width: 36em){.upload-item-row{flex-direction:row;gap:10px}}.upload-item-row .item-categories{width:100%}@media (min-width: 36em){.upload-item-row .item-categories{width:35%}}.upload-item-row .item-name{position:relative;bottom:2px;width:100%;text-align:left}@media (min-width: 36em){.upload-item-row .item-name{width:50%}.upload-item-row .item-name.no-category{width:85%}}.upload-item-row .item-categories .heading,.upload-item-row .item-name .heading{display:block}@media (min-width: 36em){.upload-item-row .item-categories .heading,.upload-item-row .item-name .heading{display:none}}.upload-item-row .item-actions{width:100%;margin-left:-8px;text-align:left}@media (min-width: 36em){.upload-item-row .item-actions{width:15%;padding-top:0;margin-left:auto;text-align:right}}.upload-item-row .duet-upload-item-name duet-icon{position:relative;top:4px}.upload-item-row .duet-upload-item-name duet-progress{display:block;margin-top:16px}";
 
 const DuetUpload = 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.duetReady = createEvent(this, "duetReady", 7);
-    this.duetDone = createEvent(this, "duetDone", 3);
-    this.duetState = createEvent(this, "duetState", 3);
-    this.duetDelete = createEvent(this, "duetDelete", 3);
-    this.duetCancel = createEvent(this, "duetCancel", 3);
-    this.duetProgress = createEvent(this, "duetProgress", 3);
-    this.duetUpload = createEvent(this, "duetUpload", 3);
-    this.linkClick = createEvent(this, "linkClick", 3);
-    /**
-     * Own Properties
-     */
-    this.buttonId = createID("DuetButton");
-    this.labelId = createID("DuetLabel");
-    this.uploadId = createID("DuetUpload");
-    this.filesInProgress = new Map();
-    this.fileMaxReached = false;
-    this.bytesMaxReached = false;
-    this.filesToUploadExceedsLimit = false;
-    this.filesToUploadTotalSizeIsAboveMax = false;
-    this.internalStatusMessageLabel = undefined;
-    this.itemRefs = new Map();
-    /**
-     * Properties
-     */
-    this.DefaultGroups = {
-      inprogress: "inprogress",
-      success: "success",
-      pending: "pending",
-      failure: "failure",
-    };
-    this.kick = debounce(() => {
-      this.tick = Date.now();
-    }, 30); // will trigger re-render
-    this.categoryLabel = {
-      en: "Category",
-      sv: "Filtyp",
-      fi: "Tiedostotyyppi",
-    };
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.duetChange = createEvent(this, "duetChange", 3);
+        this.duetBlur = createEvent(this, "duetBlur", 7);
+        this.duetFocus = createEvent(this, "duetFocus", 7);
+        this.duetReady = createEvent(this, "duetReady", 7);
+        this.duetDone = createEvent(this, "duetDone", 3);
+        this.duetState = createEvent(this, "duetState", 3);
+        this.duetDelete = createEvent(this, "duetDelete", 3);
+        this.duetCancel = createEvent(this, "duetCancel", 3);
+        this.duetProgress = createEvent(this, "duetProgress", 3);
+        this.duetUpload = createEvent(this, "duetUpload", 3);
+        this.linkClick = createEvent(this, "linkClick", 3);
+        /**
+         * Own Properties
+         */
+        this.buttonId = createID("DuetButton");
+        this.labelId = createID("DuetLabel");
+        this.uploadId = createID("DuetUpload");
+        this.filesInProgress = new Map();
+        this.fileMaxReached = false;
+        this.bytesMaxReached = false;
+        this.filesToUploadExceedsLimit = false;
+        this.filesToUploadTotalSizeIsAboveMax = false;
+        this.internalStatusMessageLabel = undefined;
+        this.itemRefs = new Map();
+        /**
+         * Properties
+         */
+        this.DefaultGroups = {
+            inprogress: "inprogress",
+            success: "success",
+            pending: "pending",
+            failure: "failure",
+        };
+        this.kick = debounce(() => {
+            this.tick = Date.now();
+        }, 30); // will trigger re-render
+        this.categoryLabel = {
+            en: "Category",
+            sv: "Filtyp",
+            fi: "Tiedostotyyppi",
+        };
+        /**
+         * Private functions
+         */
+        this.listenForActionEvents = () => {
+            this.element.addEventListener("duetActionEvent", (e) => {
+                const detail = e.detail;
+                const { action, id, originalEvent } = detail;
+                switch (action) {
+                    case "delete":
+                        this.onDelete(id, originalEvent);
+                        break;
+                    case "cancel":
+                        this.onCancel(id, originalEvent);
+                        break;
+                    // code block
+                }
+            });
+        };
+        this.verifyValidity = () => {
+            const { invalid, valid } = this.getFilesAsArray();
+            const oldValid = this.valid;
+            this.valid = invalid.length === 0 && valid.length !== 0;
+            if (this.valid !== oldValid) {
+                this.duetState.emit({
+                    originalEvent: undefined,
+                    data: { valid: this.valid, from: "componentWillRender" },
+                    component: "duet-upload",
+                });
+            }
+        };
+        this.getGroupFromItemData = (item) => {
+            if (item.valid && item.progress === 100) {
+                // if the item has a group, move the file to that group instead
+                // of into the standard success group
+                return this.DefaultGroups.success;
+            }
+            else if (item.progress > 0 && item.progress !== 100) {
+                return this.DefaultGroups.inprogress;
+            }
+            else if (!item.valid) {
+                return this.DefaultGroups.failure;
+            }
+            else if (item.pending) {
+                return this.DefaultGroups.pending;
+            }
+            else if (item.group) {
+                return item.group;
+            }
+            else {
+                return "none";
+            }
+        };
+        this.mapFilesToUploadItems = (data, group, showCategory, filteredActions) => {
+            if (group === this.DefaultGroups.success) {
+                return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "success", data: data, showLinks: this.showLinks, linkClickEvent: this.emitEvent ? this.linkClick : undefined, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
+                        this.itemRefs.set(data.uid, item);
+                    } }));
+            }
+            else if (group === this.DefaultGroups.inprogress) {
+                return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "inprogress", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
+                        this.itemRefs.set(data.uid, item);
+                    } }));
+            }
+            else if (group === this.DefaultGroups.pending) {
+                return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "pending", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
+                        this.itemRefs.set(data.uid, item);
+                    } }));
+            }
+            else if (group === this.DefaultGroups.failure) {
+                return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "failure", data: data, showLinks: this.showLinks, errorCodes: this.errorCodes, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
+                        this.itemRefs.set(data.uid, item);
+                    } }));
+            }
+            else if (data.group) {
+                return data.html;
+            }
+            else {
+                return "none";
+            }
+        };
+        this.genHashName = () => Date.now().toString(36) + Math.random();
+        this.updateValueInMap = (item, key, value, kick = true) => {
+            try {
+                const fileItem = this.files.get(item);
+                fileItem[key] = value;
+                this.files.set(item, fileItem);
+                if (this.external && key !== "url") {
+                    this.trackProgress(item, key === "uploaded");
+                }
+            }
+            catch (e) {
+                // if a users tries to update entries on a file that doesn't exist,
+                // this will blow up - so we're swallowing the errors here on purpose
+                // console.warn("operation on missing items")
+            }
+            if (kick) {
+                this.kick();
+            }
+        };
+        this.updateProgress = (ev, name) => {
+            const updateProgressHelper = percentComplete => {
+                this.updateValueInMap(name, "progress", percentComplete);
+                this.onProgress(name, percentComplete, ev);
+            };
+            if (ev.lengthComputable) {
+                const percentComplete = (ev.loaded / ev.total) * 100;
+                updateProgressHelper(percentComplete);
+            }
+            else {
+                console.log("cant read progress");
+            }
+        };
+        this.trackProgress = (name, remove = false) => {
+            if (remove) {
+                this.filesInProgress.delete(name);
+            }
+            else {
+                this.filesInProgress.set(name, "inprogress");
+            }
+            if (this.filesInProgress.size === 0) {
+                this.onDone();
+            }
+        };
+        this.getFilesAsArray = () => {
+            const filesInQueue = [];
+            const filesInError = [];
+            this.files.forEach(value => {
+                if (value.valid && !value.deleted) {
+                    filesInQueue.push(value);
+                }
+                else if (!value.valid && !value.deleted) {
+                    filesInError.push(value);
+                }
+            });
+            return { valid: filesInQueue, invalid: filesInError };
+        };
+        this.resetFormFields = () => {
+            /**
+             * You cannot modify a FileList, nor remove single items from it
+             * This completely removes all items in the FileList
+             * We reset the form fields to always be able to re-upload files
+             * and because we handle all uploads and states internally in the component (not relying on native form elements)
+             */
+            /* TODO: it may be a good idea to just update the list so that this always matches what is in the files map,
+             * TODO: this would remove the capability of Re-uploading, unless we can catch and remove the user file from the form filelist before the upload is canceled by the browser
+             * TODO: but for now we'll just reset the form fields
+             */
+            this.nativeInput.value = "";
+        };
+        this.startUpload = async (ev, metaData = undefined) => {
+            // validate that we haven't hit any maxfiles or maxbytes limits before we upload
+            const { bytesMaxReached, fileMaxReached } = this.validateTotals();
+            if (bytesMaxReached || fileMaxReached) {
+                this.kick();
+                return;
+            }
+            this.metaData = metaData;
+            this.nativeInput.click();
+            this.onUpload(ev, metaData);
+            ev.stopPropagation();
+            ev.preventDefault();
+            return;
+        };
+        /**
+         * Eventlisteners for the XHR requests
+         */
+        this.transferComplete = name => {
+            this.updateValueInMap(name, "progress", 100, false);
+            this.trackProgress(name, true);
+        };
+        this.transferDone = (xhr, name, status) => {
+            this.updateValueInMap(name, "status", status, false);
+            this.updateValueInMap(name, "uploaded", true, false);
+            try {
+                const response = JSON.parse(xhr.response);
+                this.updateValueInMap(name, "url", response.url);
+            }
+            catch (e) {
+                this.updateValueInMap(name, "url", null);
+                console.error("Server did not respond with expected response {url: string}");
+            }
+            return;
+        };
+        this.transferDoneWithFailure = (xhr, name, status) => {
+            try {
+                const { error } = JSON.parse(xhr.response);
+                this.updateValueInMap(name, "error", { message: error.message, type: error.type }, false);
+            }
+            catch (e) {
+                console.error("Server did not respond with expected response error:{message: string, type: int}");
+                this.updateValueInMap(name, "error", { type: status }, false);
+            }
+            this.updateValueInMap(name, "valid", false, true);
+        };
+        this.transferFailed = name => {
+            this.updateValueInMap(name, "error", getI18nError("duet-upload-001", this.errorCodes));
+        };
+        this.transferCanceled = name => {
+            this.files.delete(name);
+            this.validateTotals(name);
+            this.kick();
+        };
+        this.validateTotals = (name) => {
+            const isTotalSizeOverMaxSize = validateTotalSizeIsAboveMax(this.files, this.maxBytesTotal);
+            const isTotalFileAmountAboveMax = validateTotalAmountIsAboveMax(this.files, this.maxFiles);
+            if (isTotalSizeOverMaxSize && name) {
+                this.updateValueInMap(name, "error", getI18nError("duet-upload-202", this.errorCodes), false);
+            }
+            if (isTotalFileAmountAboveMax && name) {
+                this.updateValueInMap(name, "error", getI18nError("duet-upload-301", this.errorCodes), false);
+            }
+            this.bytesMaxReached = isTotalSizeOverMaxSize;
+            this.fileMaxReached = isTotalFileAmountAboveMax;
+            return {
+                bytesMaxReached: isTotalSizeOverMaxSize,
+                fileMaxReached: isTotalFileAmountAboveMax,
+            };
+        };
+        this.uploadFile = async (fileListItem, force = false, key) => {
+            if (!force && this.deferUpload) {
+                this.updateValueInMap(fileListItem.item.name, "pending", true, false);
+                this.updateValueInMap(fileListItem.item.name, "group", "pending", true);
+            }
+            else if (force) {
+                this.updateValueInMap(fileListItem.item.name, "pending", false, false);
+                this.updateValueInMap(fileListItem.item.name, "group", undefined, true);
+            }
+            try {
+                if (!this.deferUpload || force) {
+                    // if all is well AND external file upload handling has not been set, start upload
+                    const data = new FormData();
+                    data.append("file", fileListItem.item);
+                    if (key) {
+                        data.append("key", key);
+                    }
+                    data.append("uid", fileListItem.uid);
+                    data.append("name", fileListItem.item.name);
+                    data.append("metadata", JSON.stringify({
+                        uid: fileListItem.uid,
+                        url: this.uri,
+                        size: fileListItem.item.size,
+                        meta: fileListItem.meta,
+                    }));
+                    fileListItem.xhr = await this.makeXHRPostRequest(data);
+                }
+            }
+            catch (e) {
+                // in case one of the global maxes have been reached, invalidate the file
+                this.updateValueInMap(fileListItem.item.name, "valid", false, false);
+            }
+        };
+        this.uploadPendingFiles = () => {
+            for (const [key, value] of Array.from(this.files.entries())) {
+                if (value.group === "pending" && value.pending === true) {
+                    this.uploadFile(value, true, key);
+                }
+            }
+        };
+        this.getItemFromUID = (uid) => {
+            for (const [key, value] of Array.from(this.files.entries())) {
+                if (value.uid === uid) {
+                    return { value, key };
+                }
+            }
+            return null;
+        };
+        this.handleExternalUploadButton = (bytesMaxReached, fileMaxReached) => {
+            if (this.externalUploadButton) {
+                if (bytesMaxReached || fileMaxReached) {
+                    this.externalUploadButton.disabled = true;
+                }
+                else {
+                    this.externalUploadButton.disabled = false;
+                }
+            }
+        };
+        this.onDelete = (key, ev) => {
+            const item = this.getItemFromUID(key);
+            const retrievedKey = item.key;
+            const deletedItem = this.files.get(retrievedKey);
+            this.files.delete(retrievedKey);
+            const { bytesMaxReached, fileMaxReached } = this.validateTotals();
+            this.handleExternalUploadButton(bytesMaxReached, fileMaxReached);
+            this.kick();
+            this.duetDelete.emit({
+                originalEvent: ev,
+                data: { deletion: deletedItem },
+                component: "duet-upload",
+            });
+            // don't send a xhr request if the item was pending, just remove it from the list
+            if (!this.external && !deletedItem.pending) {
+                this.makeXHRDeleteRequest(deletedItem);
+            }
+            this.resetFormFields();
+        };
+        this.onCancel = (key, ev) => {
+            const retrievedKey = this.getItemFromUID(key).key;
+            const cancelledItem = this.files.get(retrievedKey);
+            this.files.delete(retrievedKey);
+            const { bytesMaxReached, fileMaxReached } = this.validateTotals();
+            this.handleExternalUploadButton(bytesMaxReached, fileMaxReached);
+            if (!this.external) {
+                const { xhr } = cancelledItem;
+                if (xhr) {
+                    xhr.abort();
+                }
+            }
+            this.kick();
+            this.resetFormFields();
+            this.duetCancel.emit({
+                originalEvent: ev,
+                data: { cancelled: cancelledItem },
+                component: "duet-upload",
+            });
+        };
+        this.onUpload = (ev, metaData) => {
+            this.duetUpload.emit({
+                originalEvent: ev,
+                metaData,
+                component: "duet-upload",
+            });
+        };
+        this.onBlur = (ev) => {
+            this.duetBlur.emit({
+                originalEvent: ev,
+                component: "duet-upload",
+            });
+        };
+        this.onProgress = (key, percentComplete, ev) => {
+            this.duetChange.emit({
+                originalEvent: ev,
+                data: {
+                    key,
+                    percentComplete,
+                },
+                component: "duet-upload",
+            });
+        };
+        this.onFocus = (ev) => {
+            this.duetFocus.emit({
+                originalEvent: ev,
+                component: "duet-upload",
+            });
+        };
+        this.onReady = () => {
+            this.duetReady.emit({
+                component: "duet-upload",
+            });
+        };
+        this.onDone = () => {
+            this.duetDone.emit({
+                component: "duet-upload",
+                data: { files: this.files },
+            });
+        };
+        /**
+         * @description This functions return sorted map items byg condition which are:
+         */
+        this.filterMap = () => {
+            const all = Array.from(this.files.values());
+            const inprogress = [];
+            const failure = [];
+            const pending = [];
+            const success = [];
+            let hasCategory = false;
+            all.forEach(data => {
+                const group = this.getGroupFromItemData(data);
+                // const item = mapFn(data, group)
+                // const category = <UploadCategory meta={data.meta} />
+                // const categories = data.meta?.badges?.join(",")
+                if (data.meta && !!data.meta.badges) {
+                    hasCategory = true;
+                }
+                if (group === this.DefaultGroups.success) {
+                    success.push({
+                        uid: data.uid,
+                        data,
+                    });
+                }
+                else if (group === this.DefaultGroups.inprogress) {
+                    inprogress.push({
+                        uid: data.uid,
+                        data,
+                    });
+                }
+                else if (group === this.DefaultGroups.pending) {
+                    pending.push({
+                        uid: data.uid,
+                        data,
+                    });
+                }
+                else if (group === this.DefaultGroups.failure) {
+                    failure.push({
+                        uid: data.uid,
+                        data,
+                    });
+                }
+                else if (data.group) {
+                    inprogress.push({
+                        uid: data.uid,
+                        data,
+                    });
+                }
+            });
+            return {
+                pending,
+                failure,
+                success,
+                inprogress,
+                hasCategory,
+            };
+        };
+        this.getActions = (id, actions) => {
+            return actions.filter(item => item.map.includes(id));
+        };
+        this.renderUploadedItems = () => {
+            this.itemRefs.clear();
+            const filteredItems = this.filterMap();
+            const hasCategory = filteredItems.hasCategory;
+            const filteredActions = this.hideCancelButton
+                ? this.actions.filter(action => action.name !== "cancel")
+                : this.actions;
+            const ItemRows = this.groups.map(group => {
+                const currentItems = filteredItems[group.id];
+                if (!(currentItems === null || currentItems === void 0 ? void 0 : currentItems.length)) {
+                    return;
+                }
+                return (h(Fragment, null, !this.hideGroups && (h(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: group.label })), currentItems.map(item => this.mapFilesToUploadItems(item.data, group.id, hasCategory, filteredActions))));
+            });
+            return (h(Fragment, null, this.showUploadedItemsHeader && (h(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: this.uploadedItemsHeaderLabel })), ItemRows));
+        };
+        this.tick = Date.now();
+        this.accessibleActiveDescendant = undefined;
+        this.accessibleDescribedBy = undefined;
+        this.accessibleControls = undefined;
+        this.accessibleOwns = undefined;
+        this.external = false;
+        this.middleware = null;
+        this.deferUpload = false;
+        this.hideButton = false;
+        this.actions = [
+            {
+                icon: "action-delete",
+                color: "color-danger",
+                size: "x-small",
+                background: "gray-lightest",
+                name: "delete",
+                map: ["success", "failure"],
+                label: {
+                    fi: "Poista tiedosto",
+                    en: "Delete the file",
+                    sv: "Ta bort filen",
+                },
+            },
+            {
+                icon: "navigation-close",
+                color: "primary",
+                size: "x-small",
+                background: "gray-lightest",
+                name: "cancel",
+                map: ["inprogress", "pending"],
+                label: {
+                    fi: "Keskeytä lähetys",
+                    en: "Cancel the upload",
+                    sv: "Stop överföringen",
+                },
+            },
+        ];
+        this.uri = undefined;
+        this.showLinks = false;
+        this.caption = undefined;
+        this.statusLabelDefaults = {
+            fi: {
+                inProgress: "Lähetetään {filesUploaded}, yhteensä lähetettävänä {filesTotal}.",
+                inProgressWithErrors: "Lähetetään {filesInProgress}, lähetetty {filesUploaded}, yhteensä lähetettävänä {filesTotal}, {filesWithErrors} epäonnistui",
+                done: "Lähetys valmis, {filesTotal} lisätty onnistuneesti",
+                doneWithErrors: "Lähetys valmis, {filesUploaded} lisätty onnistuneesti, {filesWithErrors} epäonnistui",
+                files: "tiedostoa",
+                file: "tiedosto",
+            },
+            sv: {
+                inProgress: "Laddar upp {filesUploaded} av {filesTotal}",
+                inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
+                done: "Uppladdningen slutförd, {filesTotal} har lagts till",
+                doneWithErrors: "Uppladdningen slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
+                files: "filer",
+                file: "fil",
+            },
+            en: {
+                inProgress: "Uploading {filesUploaded} of {filesTotal}",
+                inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
+                done: "Upload completed, {filesTotal} added successfully",
+                doneWithErrors: "Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.",
+                files: "files",
+                file: "file",
+            },
+        };
+        this.statusMessageLabel = getLocaleString(this.statusLabelDefaults);
+        this.buttonLabelDefaults = {
+            fi: "Lisää liite",
+            sv: "Lägg till en bilaga",
+            en: "Add an attachment",
+        };
+        this.buttonLabel = getLocaleString(this.buttonLabelDefaults);
+        this.accessibleButtonLabel = undefined;
+        this.theme = "";
+        this.disabled = false;
+        this.identifier = undefined;
+        this.margin = "auto";
+        this.required = false;
+        this.alignment = "middle";
+        this.hideGroups = false;
+        this.files = new Map();
+        this.valid = !this.required;
+        this.labelDefaults = {
+            fi: "Lisää liite",
+            sv: "Lägg till en bilaga",
+            en: "Add attachments",
+        };
+        this.label = getLocaleString(this.labelDefaults);
+        this.descriptionDefaults = {
+            en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.",
+            sv: "Du kan bifoga följande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer åt gången, och lägga till upp till {maxfiles} bilagor åt gången varje inte större än {maxbytes}.",
+            fi: "Voit liittää seuraavat tiedostotyypit: {filetypes} - sekä yleisimmät videotiedostot. Voit lähettää {maxbytestotal} tiedostoa kerrallaan, ja lisätä enintään {maxfiles} liitettä kerrallaan, jokainen enintään {maxbytes} kokoisena.",
+        };
+        this.description = getLocaleString(this.descriptionDefaults);
+        this.fileListEmptyDefaults = {
+            fi: "Ei vielä lisättyjä tiedostoja.",
+            sv: "Inga filer har lagts till ännu.",
+            en: "No files added yet.",
+        };
+        this.fileListEmpty = getLocaleString(this.fileListEmptyDefaults);
+        this.error = "";
+        this.errorCodes = errorCodes;
+        this.name = undefined;
+        this.maxBytes = 200000000;
+        this.maxBytesTotal = undefined;
+        this.maxFiles = 99;
+        this.allowedExtensions = "all";
+        this.allowedMimetypes = "";
+        this.multiple = true;
+        this.limitSelection = false;
+        this.hideCancelButton = false;
+        this.value = undefined;
+        this.externalUploadButtonId = undefined;
+        this.captionOnBottom = false;
+        this.showUploadedItemsHeader = false;
+        this.uploadedItemsHeaderLabel = {
+            fi: "Ladattu tiedosto",
+            sv: "Lägg till en bilaga",
+            en: "Uploaded file",
+        };
+        this.headerHeadingLevel = "h3";
+        this.hideHeader = false;
+        this.emitEvent = false;
+        this.groups = [
+            {
+                id: this.DefaultGroups.success,
+                label: {
+                    fi: "Valmiit tiedostot",
+                    sv: "Files success",
+                    en: "Files success",
+                },
+            },
+            {
+                id: this.DefaultGroups.failure,
+                label: {
+                    fi: "Tiedostot, joissa on virheitä",
+                    sv: "Filer med fel",
+                    en: "Files with errors",
+                },
+            },
+            {
+                id: this.DefaultGroups.inprogress,
+                label: {
+                    fi: "Kesken olevat tiedostot",
+                    sv: "Filer inprogress",
+                    en: "Files inprogress",
+                },
+            },
+            {
+                id: this.DefaultGroups.pending,
+                label: {
+                    en: "Files to upload",
+                    sv: "Filer att ladda",
+                    fi: "Ladattavat tiedostot",
+                },
+            },
+        ];
+    }
+    watchValidHandler(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.kick();
+        }
+    }
     /**
-     * Private functions
+     * Component lifecycle events.
      */
-    this.listenForActionEvents = () => {
-      this.element.addEventListener("duetActionEvent", (e) => {
-        const detail = e.detail;
-        const { action, id, originalEvent } = detail;
-        switch (action) {
-          case "delete":
-            this.onDelete(id, originalEvent);
-            break;
-          case "cancel":
-            this.onCancel(id, originalEvent);
-            break;
-          // code block
-        }
-      });
-    };
-    this.verifyValidity = () => {
-      const { invalid, valid } = this.getFilesAsArray();
-      const oldValid = this.valid;
-      this.valid = invalid.length === 0 && valid.length !== 0;
-      if (this.valid !== oldValid) {
-        this.duetState.emit({
-          originalEvent: undefined,
-          data: { valid: this.valid, from: "componentWillRender" },
-          component: "duet-upload",
-        });
-      }
-    };
-    this.getGroupFromItemData = (item) => {
-      if (item.valid && item.progress === 100) {
-        // if the item has a group, move the file to that group instead
-        // of into the standard success group
-        return this.DefaultGroups.success;
-      }
-      else if (item.progress > 0 && item.progress !== 100) {
-        return this.DefaultGroups.inprogress;
-      }
-      else if (!item.valid) {
-        return this.DefaultGroups.failure;
-      }
-      else if (item.pending) {
-        return this.DefaultGroups.pending;
-      }
-      else if (item.group) {
-        return item.group;
-      }
-      else {
-        return "none";
-      }
-    };
-    this.mapFilesToUploadItems = (data, group, showCategory, filteredActions) => {
-      if (group === this.DefaultGroups.success) {
-        return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "success", data: data, showLinks: this.showLinks, linkClickEvent: this.emitEvent ? this.linkClick : undefined, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
-            this.itemRefs.set(data.uid, item);
-          } }));
-      }
-      else if (group === this.DefaultGroups.inprogress) {
-        return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "inprogress", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
-            this.itemRefs.set(data.uid, item);
-          } }));
-      }
-      else if (group === this.DefaultGroups.pending) {
-        return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "pending", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
-            this.itemRefs.set(data.uid, item);
-          } }));
-      }
-      else if (group === this.DefaultGroups.failure) {
-        return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "failure", data: data, showLinks: this.showLinks, errorCodes: this.errorCodes, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
-            this.itemRefs.set(data.uid, item);
-          } }));
-      }
-      else if (data.group) {
-        return data.html;
-      }
-      else {
-        return "none";
-      }
-    };
-    this.genHashName = () => Date.now().toString(36) + Math.random();
-    this.updateValueInMap = (item, key, value, kick = true) => {
-      try {
-        const fileItem = this.files.get(item);
-        fileItem[key] = value;
-        this.files.set(item, fileItem);
-        if (this.external && key !== "url") {
-          this.trackProgress(item, key === "uploaded");
+    componentWillLoad() {
+        if (typeof this.statusMessageLabel === "string") {
+            this.internalStatusMessageLabel = sanitizeString(this.groups);
         }
-      }
-      catch (e) {
-        // if a users tries to update entries on a file that doesn't exist,
-        // this will blow up - so we're swallowing the errors here on purpose
-        // console.warn("operation on missing items")
-      }
-      if (kick) {
-        this.kick();
-      }
-    };
-    this.updateProgress = (ev, name) => {
-      const updateProgressHelper = percentComplete => {
-        this.updateValueInMap(name, "progress", percentComplete);
-        this.onProgress(name, percentComplete, ev);
-      };
-      if (ev.lengthComputable) {
-        const percentComplete = (ev.loaded / ev.total) * 100;
-        updateProgressHelper(percentComplete);
-      }
-      else {
-        console.log("cant read progress");
-      }
-    };
-    this.trackProgress = (name, remove = false) => {
-      if (remove) {
-        this.filesInProgress.delete(name);
-      }
-      else {
-        this.filesInProgress.set(name, "inprogress");
-      }
-      if (this.filesInProgress.size === 0) {
-        this.onDone();
-      }
-    };
-    this.getFilesAsArray = () => {
-      const filesInQueue = [];
-      const filesInError = [];
-      this.files.forEach(value => {
-        if (value.valid && !value.deleted) {
-          filesInQueue.push(value);
+        else {
+            this.internalStatusMessageLabel = this.statusMessageLabel;
         }
-        else if (!value.valid && !value.deleted) {
-          filesInError.push(value);
+        inheritGlobalTheme(this);
+        this.listenForActionEvents();
+        this.onReady();
+        this.externalUploadButton = document.querySelector(`#${this.externalUploadButtonId}`);
+    }
+    componentWillRender() {
+        // listen to the events from the component
+        this.verifyValidity();
+    }
+    /**
+     * Sets focus on the specified `duet-input`. Use this method instead of the global
+     * `input.focus()`.
+     */
+    async setFocus(options) {
+        if (this.nativeInput) {
+            this.nativeInput.focus(options);
         }
-      });
-      return { valid: filesInQueue, invalid: filesInError };
-    };
-    this.resetFormFields = () => {
-      /**
-       * You cannot modify a FileList, nor remove single items from it
-       * This completely removes all items in the FileList
-       * We reset the form fields to always be able to re-upload files
-       * and because we handle all uploads and states internally in the component (not relying on native form elements)
-       */
-      /* TODO: it may be a good idea to just update the list so that this always matches what is in the files map,
-       * TODO: this would remove the capability of Re-uploading, unless we can catch and remove the user file from the form filelist before the upload is canceled by the browser
-       * TODO: but for now we'll just reset the form fields
-       */
-      this.nativeInput.value = "";
-    };
-    this.startUpload = async (ev, metaData = undefined) => {
-      // validate that we haven't hit any maxfiles or maxbytes limits before we upload
-      const { bytesMaxReached, fileMaxReached } = this.validateTotals();
-      if (bytesMaxReached || fileMaxReached) {
-        this.kick();
         return;
-      }
-      this.metaData = metaData;
-      this.nativeInput.click();
-      this.onUpload(ev, metaData);
-      ev.stopPropagation();
-      ev.preventDefault();
-      return;
-    };
+    }
     /**
-     * Eventlisteners for the XHR requests
+     * Method for invoking the upload sequence
      */
-    this.transferComplete = name => {
-      this.updateValueInMap(name, "progress", 100, false);
-      this.trackProgress(name, true);
-    };
-    this.transferDone = (xhr, name, status) => {
-      this.updateValueInMap(name, "status", status, false);
-      this.updateValueInMap(name, "uploaded", true, false);
-      try {
-        const response = JSON.parse(xhr.response);
-        this.updateValueInMap(name, "url", response.url);
-      }
-      catch (e) {
-        this.updateValueInMap(name, "url", null);
-        console.error("Server did not respond with expected response {url: string}");
-      }
-      return;
-    };
-    this.transferDoneWithFailure = (xhr, name, status) => {
-      try {
-        const { error } = JSON.parse(xhr.response);
-        this.updateValueInMap(name, "error", { message: error.message, type: error.type }, false);
-      }
-      catch (e) {
-        console.error("Server did not respond with expected response error:{message: string, type: int}");
-        this.updateValueInMap(name, "error", { type: status }, false);
-      }
-      this.updateValueInMap(name, "valid", false, true);
-    };
-    this.transferFailed = name => {
-      this.updateValueInMap(name, "error", getI18nError("duet-upload-001", this.errorCodes));
-    };
-    this.transferCanceled = name => {
-      this.files.delete(name);
-      this.validateTotals(name);
-      this.kick();
-    };
-    this.validateTotals = (name) => {
-      const isTotalSizeOverMaxSize = validateTotalSizeIsAboveMax(this.files, this.maxBytesTotal);
-      const isTotalFileAmountAboveMax = validateTotalAmountIsAboveMax(this.files, this.maxFiles);
-      if (isTotalSizeOverMaxSize && name) {
-        this.updateValueInMap(name, "error", getI18nError("duet-upload-202", this.errorCodes), false);
-      }
-      if (isTotalFileAmountAboveMax && name) {
-        this.updateValueInMap(name, "error", getI18nError("duet-upload-301", this.errorCodes), false);
-      }
-      this.bytesMaxReached = isTotalSizeOverMaxSize;
-      this.fileMaxReached = isTotalFileAmountAboveMax;
-      return {
-        bytesMaxReached: isTotalSizeOverMaxSize,
-        fileMaxReached: isTotalFileAmountAboveMax,
-      };
-    };
-    this.uploadFile = async (fileListItem, force = false, key) => {
-      if (!force && this.deferUpload) {
-        this.updateValueInMap(fileListItem.item.name, "pending", true, false);
-        this.updateValueInMap(fileListItem.item.name, "group", "pending", true);
-      }
-      else if (force) {
-        this.updateValueInMap(fileListItem.item.name, "pending", false, false);
-        this.updateValueInMap(fileListItem.item.name, "group", undefined, true);
-      }
-      try {
-        if (!this.deferUpload || force) {
-          // if all is well AND external file upload handling has not been set, start upload
-          const data = new FormData();
-          data.append("file", fileListItem.item);
-          if (key) {
-            data.append("key", key);
-          }
-          data.append("uid", fileListItem.uid);
-          data.append("name", fileListItem.item.name);
-          data.append("metadata", JSON.stringify({
-            uid: fileListItem.uid,
-            url: this.uri,
-            size: fileListItem.item.size,
-            meta: fileListItem.meta,
-          }));
-          fileListItem.xhr = await this.makeXHRPostRequest(data);
-        }
-      }
-      catch (e) {
-        // in case one of the global maxes have been reached, invalidate the file
-        this.updateValueInMap(fileListItem.item.name, "valid", false, false);
-      }
-    };
-    this.uploadPendingFiles = () => {
-      for (const [key, value] of Array.from(this.files.entries())) {
-        if (value.group === "pending" && value.pending === true) {
-          this.uploadFile(value, true, key);
-        }
-      }
-    };
-    this.getItemFromUID = (uid) => {
-      for (const [key, value] of Array.from(this.files.entries())) {
-        if (value.uid === uid) {
-          return { value, key };
-        }
-      }
-      return null;
-    };
-    this.handleExternalUploadButton = (bytesMaxReached, fileMaxReached) => {
-      if (this.externalUploadButton) {
+    async upload(metaData = undefined) {
+        // validate that we haven't hit any maxfiles or maxbytes limits before we upload
+        const { bytesMaxReached, fileMaxReached } = this.validateTotals();
         if (bytesMaxReached || fileMaxReached) {
-          this.externalUploadButton.disabled = true;
-        }
-        else {
-          this.externalUploadButton.disabled = false;
+            this.handleExternalUploadButton(bytesMaxReached, fileMaxReached);
+            this.kick();
+            return;
         }
-      }
-    };
-    this.onDelete = (key, ev) => {
-      const item = this.getItemFromUID(key);
-      const retrievedKey = item.key;
-      const deletedItem = this.files.get(retrievedKey);
-      this.files.delete(retrievedKey);
-      const { bytesMaxReached, fileMaxReached } = this.validateTotals();
-      this.handleExternalUploadButton(bytesMaxReached, fileMaxReached);
-      this.kick();
-      this.duetDelete.emit({
-        originalEvent: ev,
-        data: { deletion: deletedItem },
-        component: "duet-upload",
-      });
-      // don't send a xhr request if the item was pending, just remove it from the list
-      if (!this.external && !deletedItem.pending) {
-        this.makeXHRDeleteRequest(deletedItem);
-      }
-      this.resetFormFields();
-    };
-    this.onCancel = (key, ev) => {
-      const retrievedKey = this.getItemFromUID(key).key;
-      const cancelledItem = this.files.get(retrievedKey);
-      this.files.delete(retrievedKey);
-      const { bytesMaxReached, fileMaxReached } = this.validateTotals();
-      this.handleExternalUploadButton(bytesMaxReached, fileMaxReached);
-      if (!this.external) {
-        const { xhr } = cancelledItem;
-        if (xhr) {
-          xhr.abort();
-        }
-      }
-      this.kick();
-      this.resetFormFields();
-      this.duetCancel.emit({
-        originalEvent: ev,
-        data: { cancelled: cancelledItem },
-        component: "duet-upload",
-      });
-    };
-    this.onUpload = (ev, metaData) => {
-      this.duetUpload.emit({
-        originalEvent: ev,
-        metaData,
-        component: "duet-upload",
-      });
-    };
-    this.onBlur = (ev) => {
-      this.duetBlur.emit({
-        originalEvent: ev,
-        component: "duet-upload",
-      });
-    };
-    this.onProgress = (key, percentComplete, ev) => {
-      this.duetChange.emit({
-        originalEvent: ev,
-        data: {
-          key,
-          percentComplete,
-        },
-        component: "duet-upload",
-      });
-    };
-    this.onFocus = (ev) => {
-      this.duetFocus.emit({
-        originalEvent: ev,
-        component: "duet-upload",
-      });
-    };
-    this.onReady = () => {
-      this.duetReady.emit({
-        component: "duet-upload",
-      });
-    };
-    this.onDone = () => {
-      this.duetDone.emit({
-        component: "duet-upload",
-        data: { files: this.files },
-      });
-    };
+        this.metaData = metaData;
+        this.nativeInput.click();
+        return;
+    }
     /**
-     * @description This functions return sorted map items byg condition which are:
+     * Method for uploading pending files
      */
-    this.filterMap = () => {
-      const all = Array.from(this.files.values());
-      const inprogress = [];
-      const failure = [];
-      const pending = [];
-      const success = [];
-      let hasCategory = false;
-      all.forEach(data => {
-        const group = this.getGroupFromItemData(data);
-        // const item = mapFn(data, group)
-        // const category = <UploadCategory meta={data.meta} />
-        // const categories = data.meta?.badges?.join(",")
-        if (data.meta && !!data.meta.badges) {
-          hasCategory = true;
-        }
-        if (group === this.DefaultGroups.success) {
-          success.push({
-            uid: data.uid,
-            data,
-          });
-        }
-        else if (group === this.DefaultGroups.inprogress) {
-          inprogress.push({
-            uid: data.uid,
-            data,
-          });
-        }
-        else if (group === this.DefaultGroups.pending) {
-          pending.push({
-            uid: data.uid,
-            data,
-          });
-        }
-        else if (group === this.DefaultGroups.failure) {
-          failure.push({
-            uid: data.uid,
-            data,
-          });
-        }
-        else if (data.group) {
-          inprogress.push({
-            uid: data.uid,
-            data,
-          });
-        }
-      });
-      return {
-        pending,
-        failure,
-        success,
-        inprogress,
-        hasCategory,
-      };
-    };
-    this.getActions = (id, actions) => {
-      return actions.filter(item => item.map.includes(id));
-    };
-    this.renderUploadedItems = () => {
-      this.itemRefs.clear();
-      const filteredItems = this.filterMap();
-      const hasCategory = filteredItems.hasCategory;
-      const filteredActions = this.hideCancelButton
-        ? this.actions.filter(action => action.name !== "cancel")
-        : this.actions;
-      const ItemRows = this.groups.map(group => {
-        const currentItems = filteredItems[group.id];
-        if (!(currentItems === null || currentItems === void 0 ? void 0 : currentItems.length)) {
-          return;
-        }
-        return (h(Fragment, null, !this.hideGroups && (h(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: group.label })), currentItems.map(item => this.mapFilesToUploadItems(item.data, group.id, hasCategory, filteredActions))));
-      });
-      return (h(Fragment, null, this.showUploadedItemsHeader && (h(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: this.uploadedItemsHeaderLabel })), ItemRows));
-    };
-    this.tick = Date.now();
-    this.accessibleActiveDescendant = undefined;
-    this.accessibleDescribedBy = undefined;
-    this.accessibleControls = undefined;
-    this.accessibleOwns = undefined;
-    this.external = false;
-    this.middleware = null;
-    this.deferUpload = false;
-    this.hideButton = false;
-    this.actions = [
-      {
-        icon: "action-delete",
-        color: "color-danger",
-        size: "x-small",
-        background: "gray-lightest",
-        name: "delete",
-        map: ["success", "failure"],
-        label: {
-          fi: "Poista tiedosto",
-          en: "Delete the file",
-          sv: "Ta bort filen",
-        },
-      },
-      {
-        icon: "navigation-close",
-        color: "primary",
-        size: "x-small",
-        background: "gray-lightest",
-        name: "cancel",
-        map: ["inprogress", "pending"],
-        label: {
-          fi: "Keskeytä lähetys",
-          en: "Cancel the upload",
-          sv: "Stop överföringen",
-        },
-      },
-    ];
-    this.uri = undefined;
-    this.showLinks = false;
-    this.caption = undefined;
-    this.statusLabelDefaults = {
-      fi: {
-        inProgress: "Lähetetään {filesUploaded}, yhteensä lähetettävänä {filesTotal}.",
-        inProgressWithErrors: "Lähetetään {filesInProgress}, lähetetty {filesUploaded}, yhteensä lähetettävänä {filesTotal}, {filesWithErrors} epäonnistui",
-        done: "Lähetys valmis, {filesTotal} lisätty onnistuneesti",
-        doneWithErrors: "Lähetys valmis, {filesUploaded} lisätty onnistuneesti, {filesWithErrors} epäonnistui",
-        files: "tiedostoa",
-        file: "tiedosto",
-      },
-      sv: {
-        inProgress: "Laddar upp {filesUploaded} av {filesTotal}",
-        inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
-        done: "Uppladdningen slutförd, {filesTotal} har lagts till",
-        doneWithErrors: "Uppladdningen slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
-        files: "filer",
-        file: "fil",
-      },
-      en: {
-        inProgress: "Uploading {filesUploaded} of {filesTotal}",
-        inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
-        done: "Upload completed, {filesTotal} added successfully",
-        doneWithErrors: "Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.",
-        files: "files",
-        file: "file",
-      },
-    };
-    this.statusMessageLabel = getLocaleString(this.statusLabelDefaults);
-    this.buttonLabelDefaults = {
-      fi: "Lisää liite",
-      sv: "Lägg till en bilaga",
-      en: "Add an attachment",
-    };
-    this.buttonLabel = getLocaleString(this.buttonLabelDefaults);
-    this.accessibleButtonLabel = undefined;
-    this.theme = "";
-    this.disabled = false;
-    this.identifier = undefined;
-    this.margin = "auto";
-    this.required = false;
-    this.alignment = "middle";
-    this.hideGroups = false;
-    this.files = new Map();
-    this.valid = !this.required;
-    this.labelDefaults = {
-      fi: "Lisää liite",
-      sv: "Lägg till en bilaga",
-      en: "Add attachments",
-    };
-    this.label = getLocaleString(this.labelDefaults);
-    this.descriptionDefaults = {
-      en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytestotal} of files at a time, and add up to {maxfiles} attachments at a time each no larger than {maxbytes}.",
-      sv: "Du kan bifoga följande filtyper: {filetypes} - samt de vanligaste videofilerna. Du kan ladda upp {maxbytestotal} av filer åt gången, och lägga till upp till {maxfiles} bilagor åt gången varje inte större än {maxbytes}.",
-      fi: "Voit liittää seuraavat tiedostotyypit: {filetypes} - sekä yleisimmät videotiedostot. Voit lähettää {maxbytestotal} tiedostoa kerrallaan, ja lisätä enintään {maxfiles} liitettä kerrallaan, jokainen enintään {maxbytes} kokoisena.",
-    };
-    this.description = getLocaleString(this.descriptionDefaults);
-    this.fileListEmptyDefaults = {
-      fi: "Ei vielä lisättyjä tiedostoja.",
-      sv: "Inga filer har lagts till ännu.",
-      en: "No files added yet.",
-    };
-    this.fileListEmpty = getLocaleString(this.fileListEmptyDefaults);
-    this.error = "";
-    this.errorCodes = errorCodes;
-    this.name = undefined;
-    this.maxBytes = 200000000;
-    this.maxBytesTotal = undefined;
-    this.maxFiles = 99;
-    this.allowedExtensions = "all";
-    this.allowedMimetypes = "";
-    this.multiple = true;
-    this.limitSelection = false;
-    this.hideCancelButton = false;
-    this.value = undefined;
-    this.externalUploadButtonId = undefined;
-    this.captionOnBottom = false;
-    this.showUploadedItemsHeader = false;
-    this.uploadedItemsHeaderLabel = {
-      fi: "Ladattu tiedosto",
-      sv: "Lägg till en bilaga",
-      en: "Uploaded file",
-    };
-    this.headerHeadingLevel = "h3";
-    this.hideHeader = false;
-    this.emitEvent = false;
-    this.groups = [
-      {
-        id: this.DefaultGroups.success,
-        label: {
-          fi: "Valmiit tiedostot",
-          sv: "Files success",
-          en: "Files success",
-        },
-      },
-      {
-        id: this.DefaultGroups.failure,
-        label: {
-          fi: "Tiedostot, joissa on virheitä",
-          sv: "Filer med fel",
-          en: "Files with errors",
-        },
-      },
-      {
-        id: this.DefaultGroups.inprogress,
-        label: {
-          fi: "Kesken olevat tiedostot",
-          sv: "Filer inprogress",
-          en: "Files inprogress",
-        },
-      },
-      {
-        id: this.DefaultGroups.pending,
-        label: {
-          en: "Files to upload",
-          sv: "Filer att ladda",
-          fi: "Ladattavat tiedostot",
-        },
-      },
-    ];
-  }
-  watchValidHandler(newValue, oldValue) {
-    if (newValue !== oldValue) {
-      this.kick();
+    async uploadPending() {
+        this.uploadPendingFiles();
     }
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    if (typeof this.statusMessageLabel === "string") {
-      this.internalStatusMessageLabel = sanitizeString(this.groups);
-    }
-    else {
-      this.internalStatusMessageLabel = this.statusMessageLabel;
-    }
-    inheritGlobalTheme(this);
-    this.listenForActionEvents();
-    this.onReady();
-    this.externalUploadButton = document.querySelector(`#${this.externalUploadButtonId}`);
-  }
-  componentWillRender() {
-    // listen to the events from the component
-    this.verifyValidity();
-  }
-  /**
-   * Sets focus on the specified `duet-input`. Use this method instead of the global
-   * `input.focus()`.
-   */
-  async setFocus(options) {
-    if (this.nativeInput) {
-      this.nativeInput.focus(options);
-    }
-    return;
-  }
-  /**
-   * Method for invoking the upload sequence
-   */
-  async upload(metaData = undefined) {
-    // validate that we haven't hit any maxfiles or maxbytes limits before we upload
-    const { bytesMaxReached, fileMaxReached } = this.validateTotals();
-    if (bytesMaxReached || fileMaxReached) {
-      this.handleExternalUploadButton(bytesMaxReached, fileMaxReached);
-      this.kick();
-      return;
-    }
-    this.metaData = metaData;
-    this.nativeInput.click();
-    return;
-  }
-  /**
-   * Method for uploading pending files
-   */
-  async uploadPending() {
-    this.uploadPendingFiles();
-  }
-  /**
-   * Method for forcing a render of the upload list, element.files can be changed externally
-   * But it will only rerender on a new Map or a top Level change - this can be used to update
-   * the tabular data if the automatic re-render is no sufficient
-   */
-  async refresh() {
-    this.kick();
-    await this.setFocus();
-  }
-  /**
-   * Get list of files, divided in errors and valid sections
-   */
-  async getFiles() {
-    if (!this.files || this.files.size === 0) {
-      return false;
+    /**
+     * Method for forcing a render of the upload list, element.files can be changed externally
+     * But it will only rerender on a new Map or a top Level change - this can be used to update
+     * the tabular data if the automatic re-render is no sufficient
+     */
+    async refresh() {
+        this.kick();
+        await this.setFocus();
     }
-    return this.getFilesAsArray();
-  }
-  /**
-   * Convenience method for updating the value of a key:value inside an item in the files attribute
-   */
-  async updateValue(item, key, value) {
-    this.updateValueInMap(item, key, value);
-  }
-  /**
-   * focusActionButton.
-   */
-  async focusActionButton(uid) {
-    var _a;
-    await ((_a = this.itemRefs.get(uid)) === null || _a === void 0 ? void 0 : _a.focusActionButton());
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const identifier = this.identifier || this.uploadId;
-    const maxMegaBytesTotal = Math.round((this.maxBytesTotal ? this.maxBytesTotal : this.maxBytes * this.maxFiles) / 1024 / 1024);
-    const maxMegaBytesPrFile = Math.round(this.maxBytes / 1024 / 1024);
-    let caption = this.description.replace(/{maxfiles}/g, this.maxFiles.toString());
-    caption = caption.replace(/{maxbytes}/g, `${maxMegaBytesPrFile.toString()} MB`);
-    caption = caption.replace(/{maxbytestotal}/g, `${maxMegaBytesTotal.toString()} MB`);
-    caption = caption.replace(/{filetypes}/g, this.allowedExtensions.split(",").join(", "));
-    if (this.externalUploadButton) {
-      this.externalUploadButton.ariaLabel = caption;
+    /**
+     * Get list of files, divided in errors and valid sections
+     */
+    async getFiles() {
+        if (!this.files || this.files.size === 0) {
+            return false;
+        }
+        return this.getFilesAsArray();
     }
-    // @ts-ignore
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h("slot", { name: "header" }), !this.files.size && (h("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { margin: "none" }, 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.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { name: "filefooter" }), h("slot", { name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { margin: "none", size: "small" }, h("div", { class: "upload-bottom-caption" }, caption))), h("slot", { name: "afterfooter" }), !this.hideButton && (h(Fragment, null, 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", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached ||
-      this.bytesMaxReached ||
-      this.filesToUploadExceedsLimit ||
-      this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, null, h("duet-spacer", { size: "medium" }), h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h("duet-visually-hidden", { "aria-hidden": "true" }, 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, tabIndex: -1 })))));
-  }
-  /**
-   * XHR request utilities
-   */
-  makeXHRPostRequest(data) {
-    const xhr = new XMLHttpRequest();
-    const name = data.get("name");
-    xhr.upload.addEventListener("progress", ev => {
-      this.updateProgress(ev, name);
-    });
-    xhr.upload.addEventListener("load", () => {
-      this.transferComplete(name);
-    });
-    xhr.upload.addEventListener("error", () => {
-      this.transferFailed(name);
-    });
-    xhr.upload.addEventListener("abort", () => {
-      this.transferCanceled(name);
-    });
-    let options = {
-      payload: { data, name },
-      options: { type: "POST", uri: this.uri, xhr, argument: null, headers: undefined },
-      onFailure: this.transferDoneWithFailure,
-      onSuccess: this.transferDone,
-      onProgress: this.trackProgress,
-    };
-    if (this.middleware) {
-      options = this.middleware(options);
+    /**
+     * Convenience method for updating the value of a key:value inside an item in the files attribute
+     */
+    async updateValue(item, key, value) {
+        this.updateValueInMap(item, key, value);
     }
-    return makeXhrRequest(options);
-  }
-  makeXHRDeleteRequest(data) {
-    const { uid, item } = data;
-    const xhr = new XMLHttpRequest();
-    const headers = {
-      "x-fileuid": uid,
-      "x-filename": item.name,
-    };
-    let options = {
-      payload: { data: null, name },
-      options: {
-        type: "DELETE",
-        xhr,
-        uri: this.uri,
-        argument: `?key=${uid}&name=${item.name}`,
-        headers,
-      },
-      onFailure: this.transferDoneWithFailure,
-      onSuccess: this.transferDone,
-      onProgress: this.trackProgress,
-    };
-    if (this.middleware) {
-      options = this.middleware(options);
+    /**
+     * focusActionButton.
+     */
+    async focusActionButton(uid) {
+        var _a;
+        await ((_a = this.itemRefs.get(uid)) === null || _a === void 0 ? void 0 : _a.focusActionButton());
     }
-    // don't present server issues to user on deletes, just remove them from the visible list
-    return makeXhrRequest(options);
-  }
-  /**
-   * Component event handling.
-   */
-  async onChange(ev) {
-    var _a;
-    const selectedFiles = Array.from((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.files);
-    // FileList is a nice array like structure but
-    // to ensure uniqueness of files we use a mapping structure and
-    // key to the name (makes it easier to delete as well)
-    this.filesToUploadExceedsLimit = false;
-    if (filesToUploadCountAboveMax(this.files.size, selectedFiles.length, this.maxFiles)) {
-      this.filesToUploadExceedsLimit = true;
-      this.kick();
-      return;
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        const identifier = this.identifier || this.uploadId;
+        const maxMegaBytesTotal = Math.round((this.maxBytesTotal ? this.maxBytesTotal : this.maxBytes * this.maxFiles) / 1024 / 1024);
+        const maxMegaBytesPrFile = Math.round(this.maxBytes / 1024 / 1024);
+        let caption = this.description.replace(/{maxfiles}/g, this.maxFiles.toString());
+        caption = caption.replace(/{maxbytes}/g, `${maxMegaBytesPrFile.toString()} MB`);
+        caption = caption.replace(/{maxbytestotal}/g, `${maxMegaBytesTotal.toString()} MB`);
+        caption = caption.replace(/{filetypes}/g, this.allowedExtensions.split(",").join(", "));
+        if (this.externalUploadButton) {
+            this.externalUploadButton.accessibleLabel = caption;
+        }
+        // @ts-ignore
+        return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h("slot", { name: "header" }), !this.files.size && (h("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { margin: "none" }, 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.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { name: "filefooter" }), h("slot", { name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { margin: "none", size: "small" }, h("div", { class: "upload-bottom-caption" }, caption))), h("slot", { name: "afterfooter" }), !this.hideButton && (h(Fragment, null, 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", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached ||
+            this.bytesMaxReached ||
+            this.filesToUploadExceedsLimit ||
+            this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, null, h("duet-spacer", { size: "medium" }), h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h("duet-visually-hidden", { "aria-hidden": "true" }, 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, tabIndex: -1 })))));
     }
-    this.filesToUploadTotalSizeIsAboveMax = false;
-    if (filesToUploadTotalSizeIsAboveMax(this.files, selectedFiles, this.maxBytesTotal)) {
-      this.filesToUploadTotalSizeIsAboveMax = true;
-      this.kick();
-      return;
+    /**
+     * XHR request utilities
+     */
+    makeXHRPostRequest(data) {
+        const xhr = new XMLHttpRequest();
+        const name = data.get("name");
+        xhr.upload.addEventListener("progress", ev => {
+            this.updateProgress(ev, name);
+        });
+        xhr.upload.addEventListener("load", () => {
+            this.transferComplete(name);
+        });
+        xhr.upload.addEventListener("error", () => {
+            this.transferFailed(name);
+        });
+        xhr.upload.addEventListener("abort", () => {
+            this.transferCanceled(name);
+        });
+        let options = {
+            payload: { data, name },
+            options: { type: "POST", uri: this.uri, xhr, argument: null, headers: undefined },
+            onFailure: this.transferDoneWithFailure,
+            onSuccess: this.transferDone,
+            onProgress: this.trackProgress,
+        };
+        if (this.middleware) {
+            options = this.middleware(options);
+        }
+        return makeXhrRequest(options);
     }
-    if (selectedFiles) {
-      for (const item of selectedFiles) {
-        const { valid, errorMessage, errorType, errorSystem } = validateFile(item, {
-          maxBytes: this.maxBytes,
-          allowedExtensions: this.allowedExtensions,
-          allowedMimetypes: this.allowedMimetypes,
-        }, this.errorCodes);
-        const uid = this.genHashName();
-        const fileListItem = {
-          uid,
-          item: item,
-          size: item.size,
-          meta: this.metaData,
-          uploaded: false,
-          valid,
-          error: {
-            type: valid ? undefined : errorType,
-            message: valid ? undefined : errorMessage,
-            system_message: valid ? undefined : errorSystem,
-          },
-          progress: 0,
-          deleted: false,
-          xhr: false,
-          url: false,
+    makeXHRDeleteRequest(data) {
+        const { uid, item } = data;
+        const xhr = new XMLHttpRequest();
+        const headers = {
+            "x-fileuid": uid,
+            "x-filename": item.name,
+        };
+        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,
         };
-        this.files.set(item.name, fileListItem);
-        if (valid && !this.external) {
-          await this.uploadFile(fileListItem);
+        if (this.middleware) {
+            options = this.middleware(options);
         }
-        else if (valid && this.external) {
-          this.updateValueInMap(fileListItem.item.name, "pending", true, false);
-          this.updateValueInMap(fileListItem.item.name, "group", "pending", true);
+        // don't present server issues to user on deletes, just remove them from the visible list
+        return makeXhrRequest(options);
+    }
+    /**
+     * Component event handling.
+     */
+    async onChange(ev) {
+        var _a;
+        const selectedFiles = Array.from((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.files);
+        // FileList is a nice array like structure but
+        // to ensure uniqueness of files we use a mapping structure and
+        // key to the name (makes it easier to delete as well)
+        this.filesToUploadExceedsLimit = false;
+        if (filesToUploadCountAboveMax(this.files.size, selectedFiles.length, this.maxFiles)) {
+            this.filesToUploadExceedsLimit = true;
+            this.kick();
+            return;
         }
-        else if (!valid) {
-          this.updateValueInMap(item.name, "valid", false, true);
+        this.filesToUploadTotalSizeIsAboveMax = false;
+        if (filesToUploadTotalSizeIsAboveMax(this.files, selectedFiles, this.maxBytesTotal)) {
+            this.filesToUploadTotalSizeIsAboveMax = true;
+            this.kick();
+            return;
         }
-        // kick the stat to force update
-        this.kick();
-      }
+        if (selectedFiles) {
+            for (const item of selectedFiles) {
+                const { valid, errorMessage, errorType, errorSystem } = validateFile(item, {
+                    maxBytes: this.maxBytes,
+                    allowedExtensions: this.allowedExtensions,
+                    allowedMimetypes: this.allowedMimetypes,
+                }, this.errorCodes);
+                const uid = this.genHashName();
+                const fileListItem = {
+                    uid,
+                    item: item,
+                    size: item.size,
+                    meta: this.metaData,
+                    uploaded: false,
+                    valid,
+                    error: {
+                        type: valid ? undefined : errorType,
+                        message: valid ? undefined : errorMessage,
+                        system_message: valid ? undefined : errorSystem,
+                    },
+                    progress: 0,
+                    deleted: false,
+                    xhr: false,
+                    url: false,
+                };
+                this.files.set(item.name, fileListItem);
+                if (valid && !this.external) {
+                    await this.uploadFile(fileListItem);
+                }
+                else if (valid && this.external) {
+                    this.updateValueInMap(fileListItem.item.name, "pending", true, false);
+                    this.updateValueInMap(fileListItem.item.name, "group", "pending", true);
+                }
+                else if (!valid) {
+                    this.updateValueInMap(item.name, "valid", false, true);
+                }
+                // kick the stat to force update
+                this.kick();
+            }
+        }
+        // reset the form, so that a user may upload a file again (with the same name)
+        this.resetFormFields();
+        // reset the internal metaData state
+        this.metaData = undefined;
+        this.duetChange.emit({
+            originalEvent: ev,
+            data: { files: this.files },
+            component: "duet-upload",
+        });
     }
-    // reset the form, so that a user may upload a file again (with the same name)
-    this.resetFormFields();
-    // reset the internal metaData state
-    this.metaData = undefined;
-    this.duetChange.emit({
-      originalEvent: ev,
-      data: { files: this.files },
-      component: "duet-upload",
-    });
-  }
-  get element() { return getElement(this); }
-  static get watchers() { return {
-    "valid": ["watchValidHandler"]
-  }; }
+    get element() { return getElement(this); }
+    static get watchers() { return {
+        "valid": ["watchValidHandler"]
+    }; }
 };
 DuetUpload.style = duetUploadCss;