@duetds/components 4.33.0 → 4.34.1

package/lib/cjs/{duet-upload.cjs.entry.js → duet-editable-table_4.cjs.entry.js}

@@ -5,13 +5,413 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b724d698.js');
-const createId = require('./create-id-c3b984b1.js');
-const jsUtils = require('./js-utils-33a9dbe3.js');
+const index = require('./index-1c10bbfb.js');
 const languageUtils = require('./language-utils-aa282901.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
+const tokens_module = require('./tokens.module-6b2df1c2.js');
+const createId = require('./create-id-c3b984b1.js');
 require('./string-utils-267e3dbb.js');
 
+const debounce = (func, timeout = 50) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(undefined, args);
+    }, timeout);
+  };
+};
+
+/**
+ * Produces a function which uses template strings to do simple interpolation from objects.
+ *
+ * Usage:
+ *    var makeMeKing = generateTemplateFn('${name} is now the king of ${country}!');
+ *
+ *    console.log(makeMeKing({ name: 'Bryan', country: 'Scotland'}));
+ *    // Logs 'Bryan is now the king of Scotland!'
+ */
+const generateTemplateFn = (function () {
+  const cache = {};
+  function generateTemplate(template) {
+    if (typeof template !== "string") {
+      template = template.outerHTML;
+    }
+    let fn = cache[template];
+    if (!fn) {
+      // Replace ${expressions} (etc) with ${map.expressions}.
+      const sanitized = template
+        .replace(/\$\{([\s]*[^;\s\{]+[\s]*)\}/g, function (_, match) {
+        return `\$\{map.${match.trim()}\}`;
+      })
+        // Afterwards, replace anything that's not ${map.expressions}' (etc) with a blank string.
+        .replace(/(\$\{(?!map\.)[^}]+\})/g, "");
+      fn = Function("map", `return \`${sanitized}\``);
+    }
+    return fn;
+  }
+  return generateTemplate;
+})();
+
+const duetEditableTableCss = "duet-editable-table{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-editable-table-header tr .duet-editable-table-header-hidden{padding:0 !important;font-size:0;border-bottom:0}";
+
+let DuetEditableTable = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.template = undefined;
+    /**
+     * State() variables
+     * @internal
+     */
+    this.tick = Date.now();
+    /**
+     * Map of items that contain list of things.
+     */
+    this.items = new Map();
+    /**
+     * Key used to set vertical alignment of action buttons
+     */
+    this.alignment = "middle";
+    /**
+     * Array of internationalized defaults for the default groups labels.
+     */
+    this.groupsLabelDefaults = {
+      fi: "Kaikki",
+      en: "All items",
+      sv: "Alla objekt",
+    };
+    /**
+     * Array of internationalized defaults for the default action labels.
+     */
+    this.actionLabelDefaults = {
+      fi: "Toiminnot",
+      en: "Actions",
+      sv: "Handlingar",
+    };
+    /**
+     * Array of group names that you want the editable table to display (can be used to hide or show groups depending on conditions).
+     * @default { id: "all", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults }.
+     * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}].
+     */
+    this.groups = [
+      { id: "all", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults },
+    ];
+    /**
+     * Array of actions that are mapped via the map variable to the various groups defined in group.
+     * @default undefined
+     * @example [{
+                variation: "default",
+                icon: "action-edit-2",
+                id: "edit",
+                map: ["success"],
+                label: {
+                  fi: " Label",
+                  en: " Label",
+                  sv: " Label",
+                }
+              }]
+     */
+    this.actions = undefined;
+    /**
+     * Shows or hides the table labels.
+     */
+    this.hideGroups = false;
+    /**
+     * Exposes the aria role for optimizing accessibility.
+     */
+    this.accessibleRole = undefined;
+    /**
+     * Theme of the table.
+     */
+    this.theme = "";
+    /**
+     * Private methods.
+     */
+    this.kick = debounce(() => {
+      this.tick = Date.now();
+    }, 100); // will trigger re-render
+    /**
+     * If a user defines a template section within editable table, try to read an use it.
+     */
+    this.getTemplate = () => {
+      const templateDom = this.element.getElementsByTagName("template");
+      if (templateDom === null || templateDom === void 0 ? void 0 : templateDom.length) {
+        const templateString = templateDom[0].content.firstElementChild.outerHTML;
+        return generateTemplateFn(templateString);
+      }
+      else {
+        return false;
+      }
+    };
+    this.getItemData = (data) => {
+      const { item, group, uid } = data;
+      if (this.template) {
+        return {
+          group,
+          uid,
+          item: this.template(item),
+        };
+      }
+      return { item, group, uid };
+    };
+    this.filterMap = needle => {
+      if (needle === "all") {
+        return Array.from(this.items);
+      }
+      return Array.from(this.items).filter(item => needle === item[1].group);
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    // look for a <template> region in the duet-editable-table
+    this.template = this.getTemplate();
+    // take care of the case where groups and actions are defined as html properties instead of javascript objects
+    if (typeof this.groups === "string") {
+      this.internalGroupArray = languageUtils.sanitizeString(this.groups);
+    }
+    else {
+      this.internalGroupArray = this.groups;
+    }
+    if (typeof this.actions === "string") {
+      this.internalActionsArray = languageUtils.sanitizeString(this.actions);
+    }
+    else {
+      this.internalActionsArray = this.actions;
+    }
+    themeableComponent.inheritGlobalTheme(this);
+  }
+  /**
+   * Method to force an update of a tabular data array.
+   * when called the method will rerender the entire tabular structure.
+   */
+  async updateTable(passedItems = undefined) {
+    this.items = new Map(passedItems || this.items);
+    this.kick();
+  }
+  render() {
+    return (index.h(index.Host, { class: {
+        "duet-theme-turva": this.theme === "turva",
+      } }, this.internalGroupArray.map(group => {
+      const currentGroup = this.filterMap(group.id);
+      if (!currentGroup.length) {
+        return;
+      }
+      return (index.h("duet-table", { variation: "plain", breakpoint: "none", role: "", margin: this.hideGroups ? "none" : "auto" }, index.h("table", { class: "duet-editable-table", "aria-role": this.accessibleRole }, index.h("thead", { class: "duet-editable-table-header" }, index.h("tr", null, index.h("th", { class: {
+          "duet-editable-table-header-hidden": this.hideGroups,
+        } }, !this.hideGroups ? (languageUtils.getLocaleString(group.label)) : (index.h("duet-visually-hidden", null, languageUtils.getLocaleString(group.label)))), index.h("th", { class: {
+          "duet-editable-table-header-hidden": this.hideGroups,
+        } }, index.h("duet-visually-hidden", null, group.actionLabel
+        ? languageUtils.getLocaleString(group.actionLabel)
+        : languageUtils.getLocaleString(this.actionLabelDefaults))))), index.h("tbody", null, currentGroup.map(dataAsArray => {
+        const [key, value] = dataAsArray;
+        return (index.h("duet-editable-table-item", { theme: this.theme, keyName: key, data: this.getItemData(value), groupId: group.id, part: group.id, alignment: this.alignment, actions: this.internalActionsArray }));
+      })))));
+    })));
+  }
+  get element() { return index.getElement(this); }
+};
+DuetEditableTable.style = duetEditableTableCss;
+
+//simple functional component that renders the data in the table
+const TableData = ({ data, groupId, alignment }, _children) => {
+  if (typeof data === "string") {
+    return (index.h("td", { innerHTML: data, class: "duet-editable-table-content", part: `${groupId}content`, style: { verticalAlign: alignment } }));
+  }
+  else {
+    return (index.h("td", { class: "duet-editable-table-content", part: `${groupId}content`, style: { verticalAlign: alignment } }, data));
+  }
+};
+
+const duetEditableTableItemCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{display:table-row;height:32px}.duet-editable-table-content,.duet-editable-table-actions{height:32px;padding:12px 0;vertical-align:middle;break-word:break-all;border-bottom:1px solid #e1e3e6}.duet-editable-table-actions-items{display:flex;justify-content:flex-end}.duet-editable-table-actions-items duet-editable-table-button{padding-left:8px}.duet-editable-table .editable-item-small{font-size:0.75rem;font-weight:400}";
+
+let DuetEditableTableItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.duetEditableItemAction = index.createEvent(this, "duetEditableItemAction", 7);
+    this.isHovering = false;
+    /**
+     * Theme of the empty state component.
+     */
+    this.theme = "";
+    /**
+     * Actions that can be performed on the element
+     */
+    this.actions = undefined;
+    /**
+     * GroupId used to pierce the shadowdom - gets concatenated with "content & actions" and used as part="groupIDcontent/actions" to pierce the content/Action item
+     * @internal
+     */
+    this.groupId = "";
+    /**
+     * Key used to set vertical alignment of action buttons
+     */
+    this.alignment = "middle";
+    /**
+     * Key used to identify item, when running actions
+     */
+    this.keyName = "";
+    /**
+     * Object of data itemsused to render the entire row
+     */
+    this.data = undefined;
+  }
+  watchPropHandler(_newValue, _oldValue) {
+    // console.log("The new value of activated is: ", _newValue)
+  }
+  /**
+   /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    themeableComponent.inheritGlobalTheme(this);
+  }
+  /**
+   /**
+   * private functions
+   */
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (index.h(index.Host, { role: "row" }, index.h(TableData, { data: this.data.item, alignment: this.alignment, groupId: this.groupId }), index.h("td", { class: "duet-editable-table-actions", style: { verticalAlign: this.alignment } }, index.h("div", { class: "duet-editable-table-actions-items", part: `${this.groupId}actions` }, this.actions.map(result => {
+      const { map = undefined } = result;
+      // if map has been specified, only show the current action if groupID matches the map array
+      if (map && !map.includes(this.groupId)) {
+        return;
+      }
+      return (index.h("duet-editable-table-button", { keyName: this.keyName, group: this.data.group, uid: this.data.uid, actions: result, theme: this.theme }));
+    })))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "data": ["watchPropHandler"]
+  }; }
+};
+DuetEditableTableItem.style = duetEditableTableItemCss;
+
+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-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:#00294d}duet-table.duet-theme-turva td{color:#171c3a}duet-table th{font-weight:600;line-height:1.25;color:#657787;text-align:left}duet-table.duet-theme-turva th{color:#747475}duet-table tbody th{font-weight:600;color:#00294d}duet-table.duet-theme-turva tbody th{color:#171c3a}.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 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:#657787;text-align:left}.duet-table-flattened td[data-heading]::before{margin-bottom:4px !important;display:block;font-size:1rem;font-weight:600;color:#00294d;content:attr(data-heading)}.duet-table-flattened.duet-theme-turva td[data-heading]::before{color:#171c3a}.duet-table-sticky thead th{position:sticky;top:0;background:white}.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:white}.duet-table-striped.duet-table-sticky thead th{border-bottom:1px solid #e1e3e6}.duet-table-striped.duet-table-sticky.duet-theme-turva thead th{border-bottom-color:#e4e4e6}.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 #e1e3e6}.duet-table-striped.duet-theme-turva tfoot td{border-top-color:#e4e4e6}.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 #e1e3e6}.duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr{border-top-color:#e4e4e6}.duet-table-fixed th,.duet-table-minimal th,.duet-table-plain th{padding:16px !important;border-bottom:1px solid #657787}.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:#444445}.duet-table-fixed tbody th,.duet-table-minimal tbody th,.duet-table-plain tbody th{padding-top:40px !important;border-bottom-color:#e1e3e6}.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:#e4e4e6}.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 #e1e3e6}.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:#e4e4e6}.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 #e1e3e6}.duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr{border-bottom-color:#e4e4e6}.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 #e1e3e6}.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 #e1e3e6}.duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot{border-top-color:#e4e4e6}.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 #e1e3e6}.duet-table-fixed:not(.duet-table-flattened).duet-theme-turva tfoot{border-top-color:#e4e4e6}.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)}";
+
+// remove wrapping speech marks.
+// media query tokens are wrapped in speech marks,
+// which need to be removed before use with matchMedia.
+const unwrap = (str) => str.substring(1, str.length - 1);
+const breakpointToToken = {
+  none: "all",
+  "none-scrollable": "all",
+  small: unwrap(tokens_module.mediaQuerySmall),
+  medium: unwrap(tokens_module.mediaQueryMedium),
+  large: unwrap(tokens_module.mediaQueryLarge),
+  "x-large": unwrap(tokens_module.mediaQueryXLarge),
+  "xx-large": unwrap(tokens_module.mediaQueryXxLarge),
+  "xxx-large": unwrap(tokens_module.mediaQueryXxxLarge),
+};
+const stickyTopValues = {
+  none: 0,
+  "with-links": parseFloat(tokens_module.sizeNavigation) * 16,
+  "without-links": parseFloat(tokens_module.sizeHeader) * 16,
+};
+let DuetTable = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Tracks whether the breakpoint is matched. This is set to true by default so that JavaScript disabled in SSR mode we get accessible table data first.
+     */
+    this.matchesBreakpoint = true;
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Style variation of the table.
+     */
+    this.variation = "striped";
+    /**
+     * Controls whether the table has a sticky header.
+     * Sticky headers are not compatible with breakpoint="none-scrollable".
+     */
+    this.sticky = false;
+    /**
+     * Adjust the distance from top of the viewport (in pixels) when the
+     * table header becomes sticky.
+     */
+    this.stickyDistance = "with-links";
+    /**
+     * By default the table is responsive - it will be flattened at narrow viewport widths.
+     * This prop controls the breakpoint at which the table should be rendered as a _regular_ table.
+     * Set to "none" to disable the responsive functionality.
+     * Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling -
+     * this is useful for comparison tables where it's important to maintain column and row layout.
+     */
+    this.breakpoint = "small";
+    this.handleMediaQueryChange = (mq) => {
+      this.matchesBreakpoint = mq.matches;
+    };
+  }
+  connectedCallback() {
+    this.mq = matchMedia(breakpointToToken[this.breakpoint]);
+    this.mq.addEventListener("change", this.handleMediaQueryChange);
+    this.handleMediaQueryChange(this.mq);
+    this.observer = new MutationObserver(() => this.copyHeadingsToCells());
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true,
+    });
+  }
+  componentWillLoad() {
+    themeableComponent.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`);
+    }
+    if (this.sticky) {
+      const stickyTop = stickyTopValues[this.stickyDistance];
+      const headingElements = this.element.querySelectorAll("thead th");
+      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.takeRecords();
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+    this.observer = null;
+    this.mq.removeListener(this.handleMediaQueryChange);
+    this.mq = null;
+    this.matchesBreakpoint = true;
+  }
+  copyHeadingsToCells() {
+    const headingElements = this.element.querySelectorAll("thead th");
+    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]) {
+          td.dataset.heading = headings[i];
+        }
+      });
+    });
+  }
+  render() {
+    return (index.h(index.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",
+      } }, index.h("slot", null)));
+  }
+  get element() { return index.getElement(this); }
+};
+DuetTable.style = duetTableCss;
+
 const errorCodes = [
 	{
 		type: "default",
@@ -364,7 +764,7 @@ let DuetUpload = class {
     this.filesInProgress = new Map();
     this.fileMaxReached = false;
     this.bytesMaxReached = false;
-    //region Internally exposed properties
+    this.internalStatusMessageLabel = undefined;
     /**
      * Properties
      */
@@ -383,18 +783,18 @@ let DuetUpload = class {
      */
     this.external = false;
     /**
-     * If set the upload component will not display an upload button, you will have to create on yourself
-     * and call the exposed methods startUpload
+     * If set the upload component will not display an upload button, you will have to create one yourself
+     * and call the exposed method startUpload
      */
     this.hideButton = false;
     /**
-     * Default actions added to all files
+     * Default actions added to the internally used duet-editable-table
      */
     this.actions = [
       {
         icon: "action-delete",
         color: "color-danger",
-        color_hover: "category-home",
+        color_hover: "primary-dark",
         id: "delete",
         map: ["success", "failure"],
         label: {
@@ -406,7 +806,7 @@ let DuetUpload = class {
       {
         icon: "navigation-close",
         color: "primary",
-        color_hover: "category-home",
+        color_hover: "primary-dark",
         id: "cancel",
         map: ["inprogress"],
         label: {
@@ -417,17 +817,43 @@ let DuetUpload = class {
       },
     ];
     /**
-     * If enabled the filelist will create links on successfully uploaded items,
+     * If enabled the editable-table will display links on successfully uploaded items,
      * this requires the server can respond with link URIs in the correct format
+     * and that the files are accessible to the user
      */
     this.showLinks = false;
     /**
      * Property to change the aria upload progress text read aloud by screenreaders
      * @default {
-        fi: "Lisää liite",
-        sv: "Lägg till en bilaga",
-        en: "Choose files",
-      }
+     *     fi: {
+     *       inProgress: "Lähetetään {filesUploaded} lähetettävästä {filesTotal} tiedostosta",
+     *       inProgressWithErrors:
+     *         "Lähetetään {filesInProgress} tiedostoa, lähetetty {filesUploaded} lähetettävästä {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheitä",
+     *       done: "Kaikki {filesTotal} tiedostoa lähetetty onnistuneesti",
+     *       doneWithErrors:
+     *         "Lähetys valmis, {filesUploaded} tiedostoa on lähetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheitä",
+     *       files: "tiedostot",
+     *       file: "tiedosto",
+     *     },
+     *     sv: {
+     *       inProgress: "Adding {filesUploaded} of {filesTotal}",
+     *       inProgressWithErrors:
+     *         "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
+     *       done: "Alla {filesTotal} har lagts till",
+     *       doneWithErrors: "Handling slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
+     *       files: "filer",
+     *       file: "fil",
+     *     },
+     *     en: {
+     *       inProgress: "Adding {filesUploaded} of {filesTotal}",
+     *       inProgressWithErrors:
+     *         "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
+     *       done: "All {filesTotal} added successfully",
+     *       doneWithErrors: "Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors",
+     *       files: "tiedostoa",
+     *       file: "tiedosto",
+     *     },
+     *   }
      */
     this.statusLabelDefaults = {
       fi: {
@@ -460,8 +886,7 @@ let DuetUpload = class {
      */
     this.statusMessageLabel = languageUtils.getLocaleString(this.statusLabelDefaults);
     /**
-     * Property to change descriptionDefaults defaults on the component.
-     * normally you would handle these strings on an application level and override @label when needed
+     * Property to change button label defaults on the component.
      * @default {
         fi: "Lisää liite",
         sv: "Lägg till en bilaga",
@@ -479,7 +904,7 @@ let DuetUpload = class {
      */
     this.buttonLabel = languageUtils.getLocaleString(this.buttonLabelDefaults);
     /**
-     * accessible Label of button
+     * accessible aria-Label of button
      */
     this.accessibleButtonLabel = undefined;
     /**
@@ -502,6 +927,10 @@ let DuetUpload = class {
      * browser from displaying its own validation errors.
      */
     this.required = false;
+    /**
+     * Key used to set vertical alignment of action buttons
+     */
+    this.alignment = "middle";
     /**
      * Visually hides the groups labels in the editable table list used to display the list of files
      */
@@ -511,7 +940,7 @@ let DuetUpload = class {
      */
     this.files = new Map();
     /**
-     * Property to read if filelist contains errors or not
+     * Property to read if the internally used editable-table contains errors or not
      */
     this.valid = !this.required;
     /**
@@ -531,7 +960,6 @@ let DuetUpload = class {
     this.label = languageUtils.getLocaleString(this.labelDefaults);
     /**
      * Property to change descriptionDefaults defaults on the component.
-     * normally you would handle these strings on an application level and override @label when needed
      * @default {
         fi: "Voit liittää {filetypes}-muotoisia tiedostoja sekä yleisimpiä videotiedostoja. Voit lähettää {maxbytes} verran tiedostoja yhdellä kertaa, ja lisätä enintään {maxfiles} liitettä kerrallaan.",
         sv: "Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer åt gången och lägga till upp till {maxfiles} bilagor åt gången.",
@@ -605,7 +1033,6 @@ let DuetUpload = class {
      * by default this is off, setting this to true will limit the users choices to what has been explicitly set
      */
     this.limitSelection = false;
-    //region Private functions
     /**
      * Private functions
      */
@@ -690,7 +1117,7 @@ let DuetUpload = class {
       });
       return itemData;
     };
-    this.kick = jsUtils.debounce(() => {
+    this.kick = debounce(() => {
       this.tick = Date.now();
     }, 30); // will trigger re-render
     this.genHashName = () => Date.now().toString(36) + Math.random();
@@ -703,7 +1130,6 @@ let DuetUpload = class {
       }
     };
     this.updateProgress = (ev, name) => {
-      console.log(this.filesInProgress.size);
       const updateProgressHelper = percentComplete => {
         this.updateValueInMap(name, "progress", percentComplete);
         this.onProgress(name, percentComplete, ev);
@@ -747,6 +1173,10 @@ let DuetUpload = class {
        * 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) => {
@@ -758,8 +1188,6 @@ let DuetUpload = class {
       ev.preventDefault();
       return;
     };
-    //endregion
-    //region Eventlisteners for the XHR requests
     /**
      * Eventlisteners for the XHR requests
      */
@@ -888,11 +1316,16 @@ let DuetUpload = class {
       this.kick();
     }
   }
-  //endregion
   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
+    if (typeof this.statusMessageLabel === "string") {
+      this.internalStatusMessageLabel = languageUtils.sanitizeString(this.groups);
+    }
+    else {
+      this.internalStatusMessageLabel = this.statusMessageLabel;
+    }
     themeableComponent.inheritGlobalTheme(this);
     this.listenForActionEvents();
   }
@@ -900,8 +1333,6 @@ let DuetUpload = class {
     // listen to the events from the component
     this.verifyValidity();
   }
-  //endregion
-  //region XHR requests
   /**
    * XHR request utilities
    */
@@ -949,8 +1380,6 @@ let DuetUpload = class {
       onProgress: this.trackProgress,
     });
   }
-  //endregion
-  //region EventHandlers
   /**
    * Component event handling.
    */
@@ -1025,7 +1454,6 @@ let DuetUpload = class {
       component: "duet-upload",
     });
   }
-  //endregion
   /**
    * Sets focus on the specified `duet-input`. Use this method instead of the global
    * `input.focus()`.
@@ -1055,7 +1483,7 @@ let DuetUpload = class {
     return this.getFilesAsArray();
   }
   /**
-   * Convenience method for updating a of an item in the files attribute
+   * 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);
@@ -1073,7 +1501,7 @@ let DuetUpload = class {
         "duet-upload-filelist-empty": !this.files.size,
         "duet-upload-filelist": true,
         "duet-upload-filelist-filled": this.files.size,
-      }, id: this.labelId, for: identifier }, this.fileListEmpty)), !!this.files.size && index.h("slot", { name: "fileheader" }), !!this.files.size && (index.h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.statusMessageLabel })), !!this.files.size && (index.h("duet-editable-table", { "aria-live": "polite", "aria-relevant": "removals", accessibleRole: "log", id: this.editableTableId, groups: this.groups, actions: this.actions, hideGroups: this.hideGroups, items: this.convertToDuetEditableTableItems() })), !!this.files.size && index.h("slot", { name: "filefooter" }), index.h("duet-spacer", { size: "large" }), !this.hideButton && (index.h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle" }, this.buttonLabel)), index.h("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (index.h("duet-alert", null, this.fileMaxReached && getI18nError("duet-upload-301"), this.bytesMaxReached && getI18nError("duet-upload-202"))), index.h("duet-spacer", { size: "medium" }), index.h("duet-visually-hidden", null, index.h("input", { ref: input => {
+      }, id: this.labelId, for: identifier }, this.fileListEmpty)), !!this.files.size && index.h("slot", { name: "fileheader" }), !!this.files.size && (index.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 && (index.h("duet-editable-table", { "aria-live": "polite", "aria-relevant": "removals", accessibleRole: "log", id: this.editableTableId, groups: this.groups, actions: this.actions, hideGroups: this.hideGroups, alignment: this.alignment, items: this.convertToDuetEditableTableItems() })), !!this.files.size && index.h("slot", { name: "filefooter" }), index.h("duet-spacer", { size: "large" }), !this.hideButton && (index.h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle" }, this.buttonLabel)), index.h("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (index.h("duet-alert", null, this.fileMaxReached && getI18nError("duet-upload-301"), this.bytesMaxReached && getI18nError("duet-upload-202"))), index.h("duet-spacer", { size: "medium" }), index.h("duet-visually-hidden", null, index.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,
@@ -1086,4 +1514,7 @@ let DuetUpload = class {
 };
 DuetUpload.style = duetUploadCss;
 
+exports.duet_editable_table = DuetEditableTable;
+exports.duet_editable_table_item = DuetEditableTableItem;
+exports.duet_table = DuetTable;
 exports.duet_upload = DuetUpload;