@duetds/components 6.8.9 → 6.9.1

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

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, F as Fragment } from './p-0f07edcd.js';
-import { i as sizeHeader } from './p-33e00967.js';
+import { p as proxyCustomElement, H, h, F as Fragment } from './p-11fbe397.js';
+import { i as sizeHeader } from './p-505389ac.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
-import { a as getLanguage, g as getLocaleString } from './p-6c05e879.js';
-import { d as defineCustomElement$3 } from './p-cefc1697.js';
-import { d as defineCustomElement$2 } from './p-eabaa24d.js';
+import { g as getLanguage, a as getLocaleString } from './p-076452be.js';
+import { d as defineCustomElement$3 } from './p-51307fda.js';
+import { d as defineCustomElement$2 } from './p-f1b800f0.js';
 
 const duetTrayCss = "*,*::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;display:block;width:100%}.duet-tray{position:fixed;top:4rem;right:0;left:0;z-index:399;display:flex;flex-direction:column;max-height:calc(100% - 8rem);padding:16px 20px 16px 24px;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;font-weight:400;line-height:1.5;color:rgb(0, 41, 77);visibility:hidden;background:rgb(243, 249, 252);border-bottom:1px solid rgb(225, 227, 230);box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07);opacity:0;transition:opacity 600ms ease, visibility 600ms ease, transform 600ms ease;transform:translateY(-4rem)}@media (min-width: 62em){.duet-tray{padding:16px 36px}}@media (min-width: 106.25em){.duet-tray{padding:16px 52px 16px 60px}}.duet-tray:focus{outline:0}:host(.user-is-tabbing) .duet-tray:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179)}:host(.user-is-tabbing) .duet-tray.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58)}.duet-tray.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58);background:rgb(245, 245, 247);border-color:rgb(228, 228, 230)}.duet-tray.duet-tray-is-active{visibility:visible;opacity:1;transform:translateY(0)}.duet-tray.duet-tray-is-hidden{visibility:hidden;opacity:0;transform:translateY(-4rem)}@media (min-width: 62em){.duet-tray.duet-tray-is-responsive{display:none !important}}.duet-tray.duet-tray-is-expandable{padding-right:66px}@media (min-width: 62em){.duet-tray.duet-tray-is-expandable{padding-right:78px}}@media (min-width: 106.25em){.duet-tray.duet-tray-is-expandable{padding-right:94px}}.duet-tray-expandable{position:relative;z-index:100;width:calc(100% + 46px);max-height:0;overflow-y:auto;visibility:hidden;opacity:0;transition:opacity 600ms ease, visibility 600ms ease, max-height 600ms ease;scrollbar-width:none}.duet-tray-expandable::-webkit-scrollbar{display:none}.duet-tray-expandable.active{max-height:500px;visibility:visible;opacity:1}.duet-tray-expandable-content{width:100%;margin-top:16px;border-top:1px solid rgb(225, 227, 230)}.duet-theme-turva .duet-tray-expandable-content{border-color:rgb(228, 228, 230)}.duet-tray-button{-webkit-user-select:none;user-select:none;padding:20px !important;position:absolute;top:-2px;right:0;z-index:200;color:rgb(0, 41, 77);text-align:center;cursor:pointer;border-radius:4px;transition:transform 300ms ease;-webkit-tap-highlight-color:transparent}@media (min-width: 62em){.duet-tray-button{margin-right:16px}}@media (min-width: 106.25em){.duet-tray-button{margin-right:36px}}.duet-theme-turva .duet-tray-button{color:rgb(23, 28, 58)}.duet-tray-button.duet-tray-is-expanded{transform:rotate(-180deg)}.duet-tray-button:focus{outline:0}:host(.user-is-tabbing) .duet-tray-button:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179)}:host(.user-is-tabbing) .duet-theme-turva .duet-tray-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58)}.duet-tray-button:active{box-shadow:none;opacity:0.75}";
 

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetUploadAriaStatus$1, d as defineCustomElement$1 } from './p-3dca144f.js';
+import { D as DuetUploadAriaStatus$1, d as defineCustomElement$1 } from './p-7392a942.js';
 
 const DuetUploadAriaStatus = DuetUploadAriaStatus$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,30 +1,29 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h as h$1, d as Host } from './p-0f07edcd.js';
+import { p as proxyCustomElement, H, c as createEvent, h as h$1, F as Fragment, d as Host } from './p-11fbe397.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { d as debounce } from './p-0b3f675e.js';
-import { g as getLocaleString, s as sanitizeString } from './p-6c05e879.js';
+import { a as getLocaleString, s as sanitizeString } from './p-076452be.js';
 import { p as parsePossibleJSON } from './p-5a9d75e1.js';
 import { h } from './p-152ee893.js';
-import { d as defineCustomElement$i } from './p-0853da89.js';
-import { d as defineCustomElement$h } from './p-35c660bf.js';
-import { d as defineCustomElement$g } from './p-799100e3.js';
-import { d as defineCustomElement$f } from './p-23e46e22.js';
-import { d as defineCustomElement$e } from './p-03367341.js';
-import { d as defineCustomElement$d } from './p-00635432.js';
-import { d as defineCustomElement$c } from './p-48ee4427.js';
-import { d as defineCustomElement$b } from './p-cefc1697.js';
-import { d as defineCustomElement$a } from './p-297a6774.js';
-import { d as defineCustomElement$9 } from './p-fa582233.js';
-import { d as defineCustomElement$8 } from './p-babace4d.js';
-import { d as defineCustomElement$7 } from './p-8348ca39.js';
-import { d as defineCustomElement$6 } from './p-e95c3a28.js';
-import { d as defineCustomElement$5 } from './p-2697a4f6.js';
-import { d as defineCustomElement$4 } from './p-7cc3a9b6.js';
-import { d as defineCustomElement$3 } from './p-3dca144f.js';
-import { d as defineCustomElement$2 } from './p-eabaa24d.js';
+import { d as defineCustomElement$h } from './p-c57eccd3.js';
+import { d as defineCustomElement$g } from './p-c272c5d5.js';
+import { d as defineCustomElement$f } from './p-94df5d2c.js';
+import { d as defineCustomElement$e } from './p-528cdd3e.js';
+import { d as defineCustomElement$d } from './p-8d12a863.js';
+import { d as defineCustomElement$c } from './p-b51fbd15.js';
+import { d as defineCustomElement$b } from './p-43bbb094.js';
+import { d as defineCustomElement$a } from './p-414fdb0c.js';
+import { d as defineCustomElement$9 } from './p-51307fda.js';
+import { d as defineCustomElement$8 } from './p-84d75d9d.js';
+import { d as defineCustomElement$7 } from './p-6f661b09.js';
+import { d as defineCustomElement$6 } from './p-9175529e.js';
+import { d as defineCustomElement$5 } from './p-bbf48894.js';
+import { d as defineCustomElement$4 } from './p-b7b7c63b.js';
+import { d as defineCustomElement$3 } from './p-7392a942.js';
+import { d as defineCustomElement$2 } from './p-f1b800f0.js';
 
 const errorCodes = [
 	{
@@ -184,31 +183,6 @@ const getI18nError = (errorCode, errorCodes) => {
   }
 };
 
-const ErrorItem = ({ data, errorCodes }) => {
-  const { item, error } = data;
-  const { name } = item;
-  const { type } = error;
-  return (h("span", { class: "duet-upload-item-error", role: "status" },
-    h("duet-paragraph", { class: "duet-upload-item-name", color: "danger", margin: "none", weight: "semi-bold" },
-      h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
-      h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-      name),
-    h("duet-paragraph", { class: "duet-upload-item-error-label", size: "small", margin: "none", color: "danger" }, getI18nError(type, errorCodes))));
-};
-
-const ProgressItem = ({ progress, name }) => (h("span", { class: "duet-upload-item-name" },
-  h("duet-paragraph", { class: "duet-upload-item-name", color: "gray-darker", margin: "none", weight: "semi-bold" },
-    h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
-    h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-    name),
-  h("br", null),
-  h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
-
-const PendingItem = ({ name }) => (h("span", { class: "duet-upload-item-name" },
-  h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
-  h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-  name));
-
 const formatBytes = (bytes, decimals = 2) => {
   if (bytes === 0) {
     return "0 Bytes";
@@ -220,9 +194,40 @@ const formatBytes = (bytes, decimals = 2) => {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
 };
 
-const SuccessItem = ({ data, showLinks }) => {
-  const { item, size, uploaded, url } = data;
+const UploadItem = ({ data, showLinks, type, actions, errorCodes, theme, label, categoryLabel, showCategory, }) => {
+  const { uid, item, size, uploaded, url, meta, progress, error } = data;
   const { name } = item;
+  const getFileNameLine = () => {
+    switch (type) {
+      case "inprogress":
+        return (h("span", { class: "duet-upload-item-name" },
+          h("duet-paragraph", { class: "duet-upload-item-name", color: "gray-darker", margin: "none", weight: "semi-bold" },
+            h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
+            h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+            name),
+          h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
+      case "pending":
+        return (h("span", { class: "duet-upload-item-name" },
+          h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
+          h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+          name));
+      case "failure":
+        return (h("span", { class: "duet-upload-item-error", role: "status" },
+          h("duet-paragraph", { class: "duet-upload-item-name", color: "danger", margin: "none", weight: "semi-bold" },
+            h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
+            h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+            name),
+          h("duet-paragraph", { class: "duet-upload-item-error-label", size: "small", margin: "none", color: "danger" }, getI18nError(error.type, errorCodes))));
+      default:
+        return uploaded && url && showLinks ? (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
+          h("duet-link", { url: url, external: true }, ContentName),
+          h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+          SizeText)) : (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
+          ContentName,
+          h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+          SizeText));
+    }
+  };
   const ContentName = (h("span", { class: "duet-upload-item-name" },
     h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
     h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
@@ -231,31 +236,26 @@ const SuccessItem = ({ data, showLinks }) => {
     "(",
     formatBytes(size),
     ")"));
-  const FilenameLine = uploaded && url && showLinks ? (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
-    h("duet-link", { url: url, external: true }, ContentName),
-    h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-    SizeText)) : (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
-    ContentName,
-    h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-    SizeText));
-  // const Badges =
-  //   meta && meta.badges ? (
-  //     <span>
-  //       <duet-spacer size="xx-small"></duet-spacer>
-  //       {meta.badges.map(badgeText => (
-  //         <duet-badge color="primary">{badgeText}</duet-badge>
-  //       ))}
-  //     </span>
-  //   ) : undefined
-  return (h("span", { class: "duet-upload-item-success" },
-    h("div", null, FilenameLine)));
+  const Badges = meta && meta.badges ? (h("span", null, meta.badges.map(badgeText => (h("duet-badge", { color: "primary" }, badgeText))))) : undefined;
+  const actionDescription = `${meta && meta.badges ? meta.badges.join(",") : ""} ${name}`;
+  return (h("div", { class: {
+      "upload-item-row": true,
+    } },
+    showCategory && (h("div", { class: "item-categories" },
+      h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(categoryLabel)),
+      Badges)),
+    h("div", { class: { "item-name": true, "no-category": !showCategory } },
+      !!label && (h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(label))),
+      getFileNameLine()),
+    h("div", { class: "item-actions" }, actions.map(actionItem => {
+      return (h("duet-action-button", { actionMeta: Object.assign({}, meta || {}), actionId: uid || null, actionName: actionItem.name, theme: theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${actionDescription} ${getLocaleString(actionItem.label)} ` }));
+    }))));
 };
 
-const UploadCategory = ({ meta }) => {
-  const Badges = meta && meta.badges ? (h("span", null,
-    h("duet-spacer", { size: "xx-small" }),
-    meta.badges.map(badgeText => (h("duet-badge", { color: "primary" }, badgeText))))) : (h("span", null));
-  return Badges;
+const UploadItemHeader = ({ label, categoryLabel }) => {
+  return (h("div", { class: "items-header" },
+    categoryLabel && (h("duet-heading", { class: "category-header", border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold" }, getLocaleString(categoryLabel))),
+    h("duet-heading", { class: { "filename-header": true, "no-category": !categoryLabel }, border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold" }, getLocaleString(label))));
 };
 
 const validateFileExtension = (name, allowedExtensions) => {
@@ -381,7 +381,7 @@ const makeXhrRequest = ({ payload, options, onFailure, onSuccess, onProgress })
   return xhr;
 };
 
-const duetUploadCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=header]){margin-bottom:16px}::slotted([slot=fileheader]){margin:16px 0 0 0}::slotted([slot=filefooter]){margin-top:16px}.duet-upload{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-upload-item-size{font-size:0.75rem;font-weight:400}.duet-upload-filelist{margin-bottom:25px}.duet-upload-filelist-empty{display:flex;align-items:center;justify-content:center;width:100%;height:75px;margin:0 auto;font-size:1rem;font-weight:400;background-color: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-upload-editable-table .duet-upload-item-name duet-icon{position:relative;top:2px}duet-paragraph::part(duet-paragraph){word-break:break-word}duet-editable-table tfoot{display:none}.upload-bottom-caption{margin-bottom:12px}.test{display:flex;flex-direction:row}.test .item-categories{flex-grow:1}.test .item-label{flex-grow:2}.test .item-actions{flex-grow:1}";
+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:28px}.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:28px}.items-header{display:none;flex-direction:row}@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:10px;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}}.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%;padding-top:6px;text-align:left}@media (min-width: 36em){.upload-item-row .item-actions{width:15%;padding-top:0;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$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
   constructor() {
@@ -420,6 +420,11 @@ const DuetUpload$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.kick = debounce(() => {
       this.tick = Date.now();
     }, 30); // will trigger re-render
+    this.categoryLabel = {
+      en: "Category",
+      sv: "Filtyp",
+      fi: "Tiedostotyyppi",
+    };
     /**
      * Private functions
      */
@@ -472,18 +477,18 @@ const DuetUpload$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
         return "none";
       }
     };
-    this.getItemHTMLFromItemData = (data, group) => {
+    this.mapFilesToUploadItems = (data, group, showCategory) => {
       if (group === this.DefaultGroups.success) {
-        return h$1(SuccessItem, { data: data, showLinks: this.showLinks });
+        return (h$1(UploadItem, { theme: this.theme, actions: this.getActions(group), type: "success", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory }));
       }
       else if (group === this.DefaultGroups.inprogress) {
-        return h$1(ProgressItem, { progress: data.progress, name: data.item.name });
+        return (h$1(UploadItem, { theme: this.theme, actions: this.getActions(group), type: "inprogress", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory }));
       }
       else if (group === this.DefaultGroups.pending) {
-        return h$1(PendingItem, { name: data.item.name });
+        return (h$1(UploadItem, { theme: this.theme, actions: this.getActions(group), type: "pending", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory }));
       }
       else if (group === this.DefaultGroups.failure) {
-        return h$1(ErrorItem, { data: data, errorCodes: this.errorCodes });
+        return (h$1(UploadItem, { theme: this.theme, actions: this.getActions(group), type: "failure", data: data, showLinks: this.showLinks, errorCodes: this.errorCodes, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory }));
       }
       else if (data.group) {
         return data.html;
@@ -756,60 +761,43 @@ const DuetUpload$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
       const failure = [];
       const pending = [];
       const success = [];
+      let hasCategory = false;
       all.forEach(data => {
-        var _a, _b;
         const group = this.getGroupFromItemData(data);
-        const item = this.getItemHTMLFromItemData(data, group);
-        const category = h$1(UploadCategory, { meta: data.meta });
-        const categories = (_b = (_a = data.meta) === null || _a === void 0 ? void 0 : _a.badges) === null || _b === void 0 ? void 0 : _b.join(",");
+        // 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,
-            item,
-            hasCategory: data.meta && !!data.meta.badges,
-            category,
-            group,
-            actionDescription: `${categories || ""} ${data.item.name}`,
+            data,
           });
         }
         else if (group === this.DefaultGroups.inprogress) {
           inprogress.push({
             uid: data.uid,
-            item,
-            hasCategory: data.meta && !!data.meta.badges,
-            category,
-            group,
-            actionDescription: `category ${data.item.name}`,
+            data,
           });
         }
         else if (group === this.DefaultGroups.pending) {
           pending.push({
             uid: data.uid,
-            item,
-            hasCategory: data.meta && !!data.meta.badges,
-            category,
-            group,
-            actionDescription: `category ${data.item.name}`,
+            data,
           });
         }
         else if (group === this.DefaultGroups.failure) {
           failure.push({
             uid: data.uid,
-            item,
-            hasCategory: data.meta && !!data.meta.badges,
-            category,
-            group,
-            actionDescription: `category ${data.item.name}`,
+            data,
           });
         }
         else if (data.group) {
           inprogress.push({
             uid: data.uid,
-            item,
-            hasCategory: data.meta && !!data.meta.badges,
-            category,
-            group: data.group,
-            actionDescription: `category ${data.item.name}`,
+            data,
           });
         }
       });
@@ -818,46 +806,23 @@ const DuetUpload$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
         failure,
         success,
         inprogress,
+        hasCategory,
       };
     };
-    this.getColumns = (group, hasCategory) => {
-      return [
-        {
-          sort_order: 1,
-          direction: -1,
-          index: 0,
-          key: "category",
-          label: {
-            fi: "Kategoria",
-            sv: "Kategori",
-            en: "Category",
-          },
-          display: hasCategory,
-        },
-        {
-          sort_order: 1,
-          direction: -1,
-          index: 1,
-          key: group.id,
-          label: group.label,
-          display: true,
-        },
-      ];
-    };
     this.getActions = (id) => {
       return this.actions.filter(item => item.map.includes(id));
     };
-    this.renderEditableTableGroups = () => {
+    this.renderUploadedItems = () => {
       const filteredItems = this.filterMap();
-      const EditableTables = this.groups.map(group => {
+      const hasCategory = filteredItems.hasCategory;
+      const ItemRows = this.groups.map(group => {
         const currentItems = filteredItems[group.id];
         if (!(currentItems === null || currentItems === void 0 ? void 0 : currentItems.length)) {
           return;
         }
-        const hasCategory = currentItems.some(item => item.hasCategory);
-        return (h$1("duet-editable-table", { variation: "plain", groupId: group.id, columns: this.getColumns(group, hasCategory), actions: this.getActions(group.id), margin: "none", rows: currentItems, "hide-head-visually": this.hideGroups || group.id !== this.DefaultGroups.success }));
+        return (h$1(Fragment, null, !this.hideGroups && (h$1(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: group.label })), currentItems.map(item => this.mapFilesToUploadItems(item.data, group.id, hasCategory))));
       });
-      return EditableTables;
+      return (h$1(Fragment, null, this.showUploadedItemsHeader && (h$1(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: this.uploadedItemsHeaderLabel })), ItemRows));
     };
     this.tick = Date.now();
     this.accessibleActiveDescendant = undefined;
@@ -973,6 +938,13 @@ const DuetUpload$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     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.hideHeader = false;
     this.groups = [
       {
         id: this.DefaultGroups.success,
@@ -1097,13 +1069,7 @@ const DuetUpload$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
       this.externalUploadButton.ariaLabel = caption;
     }
     // @ts-ignore
-    return (h$1(Host, { class: { "duet-m-0": this.margin === "none" } }, h$1("duet-fieldset", { label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h$1("slot", { name: "header" }), !this.files.size && (h$1("duet-label", { part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", theme: this.theme === "turva" ? "turva" : "default", size: "small", class: {
-        "duet-upload-filelist-empty": !this.files.size,
-        "duet-upload-filelist": true,
-        "duet-upload-filelist-filled": this.files.size,
-      }, id: this.labelId, for: identifier }, h$1("span", { class: {
-        "duet-upload-filelist-empty-label": !this.files.size,
-      } }, this.fileListEmpty))), !!this.files.size && h$1("slot", { name: "fileheader" }), !!this.files.size && (h$1("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderEditableTableGroups(), !!this.files.size && h$1("slot", { name: "filefooter" }), h$1("slot", { name: "footer" }), this.captionOnBottom && (h$1("duet-caption", { size: "small" }, h$1("div", { class: "upload-bottom-caption" }, caption))), h$1("slot", { name: "afterfooter" }), h$1("duet-spacer", { size: "large" }), !this.hideButton && (h$1("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel)), h$1("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (h$1("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes))), h$1("duet-spacer", { size: "medium" }), h$1("duet-visually-hidden", { "aria-hidden": "true" }, h$1("input", { ref: input => {
+    return (h$1(Host, { class: { "duet-m-0": this.margin === "none" } }, h$1("duet-fieldset", { "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h$1("slot", { name: "header" }), !this.files.size && (h$1("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h$1("duet-paragraph", { margin: "none" }, this.fileListEmpty))), !!this.files.size && h$1("slot", { name: "fileheader" }), !!this.files.size && (h$1("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h$1("slot", { name: "filefooter" }), h$1("slot", { name: "uploadfooter" }), this.captionOnBottom && (h$1("duet-caption", { size: "small" }, h$1("div", { class: "upload-bottom-caption" }, caption))), h$1("slot", { name: "afterfooter" }), !this.hideButton && (h$1(Fragment, null, h$1("duet-spacer", { size: "large" }), h$1("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached || this.bytesMaxReached) && (h$1(Fragment, null, h$1("duet-spacer", { size: "medium" }), h$1("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes)))), h$1("duet-visually-hidden", { "aria-hidden": "true" }, h$1("input", { ref: input => {
         this.nativeInput = input;
       }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
         "duet-upload": true,
@@ -1285,6 +1251,9 @@ const DuetUpload$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     "value": [1025],
     "externalUploadButtonId": [1, "external-upload-button-id"],
     "captionOnBottom": [4, "caption-on-bottom"],
+    "showUploadedItemsHeader": [4, "show-uploaded-items-header"],
+    "uploadedItemsHeaderLabel": [16],
+    "hideHeader": [4, "hide-header"],
     "groups": [16],
     "tick": [32],
     "setFocus": [64],
@@ -1298,7 +1267,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["duet-upload", "duet-action-button", "duet-alert", "duet-badge", "duet-button", "duet-caption", "duet-editable-table", "duet-fieldset", "duet-icon", "duet-label", "duet-link", "duet-paragraph", "duet-progress", "duet-spacer", "duet-spinner", "duet-table", "duet-upload-aria-status", "duet-visually-hidden"];
+  const components = ["duet-upload", "duet-action-button", "duet-alert", "duet-badge", "duet-button", "duet-caption", "duet-empty-state", "duet-fieldset", "duet-heading", "duet-icon", "duet-link", "duet-paragraph", "duet-progress", "duet-spacer", "duet-spinner", "duet-upload-aria-status", "duet-visually-hidden"];
   components.forEach(tagName => { switch (tagName) {
     case "duet-upload":
       if (!customElements.get(tagName)) {
@@ -1306,76 +1275,71 @@ function defineCustomElement$1() {
       }
       break;
     case "duet-action-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$i();
-      }
-      break;
-    case "duet-alert":
       if (!customElements.get(tagName)) {
         defineCustomElement$h();
       }
       break;
-    case "duet-badge":
+    case "duet-alert":
       if (!customElements.get(tagName)) {
         defineCustomElement$g();
       }
       break;
-    case "duet-button":
+    case "duet-badge":
       if (!customElements.get(tagName)) {
         defineCustomElement$f();
       }
       break;
-    case "duet-caption":
+    case "duet-button":
       if (!customElements.get(tagName)) {
         defineCustomElement$e();
       }
       break;
-    case "duet-editable-table":
+    case "duet-caption":
       if (!customElements.get(tagName)) {
         defineCustomElement$d();
       }
       break;
-    case "duet-fieldset":
+    case "duet-empty-state":
       if (!customElements.get(tagName)) {
         defineCustomElement$c();
       }
       break;
-    case "duet-icon":
+    case "duet-fieldset":
       if (!customElements.get(tagName)) {
         defineCustomElement$b();
       }
       break;
-    case "duet-label":
+    case "duet-heading":
       if (!customElements.get(tagName)) {
         defineCustomElement$a();
       }
       break;
-    case "duet-link":
+    case "duet-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$9();
       }
       break;
-    case "duet-paragraph":
+    case "duet-link":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }
       break;
-    case "duet-progress":
+    case "duet-paragraph":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }
       break;
-    case "duet-spacer":
+    case "duet-progress":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }
       break;
-    case "duet-spinner":
+    case "duet-spacer":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }
       break;
-    case "duet-table":
+    case "duet-spinner":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }

package/lib/dist-custom-elements/duet-visually-hidden.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetVisuallyHidden$1, d as defineCustomElement$1 } from './p-eabaa24d.js';
+import { D as DuetVisuallyHidden$1, d as defineCustomElement$1 } from './p-f1b800f0.js';
 
 const DuetVisuallyHidden = DuetVisuallyHidden$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/index.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-export { s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-0f07edcd.js';
+export { s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-11fbe397.js';
 
 const setupLoggers = () => {
   {

package/lib/dist-custom-elements/{p-35d1520f.js → p-00afad07.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-0f07edcd.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-11fbe397.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 

package/lib/dist-custom-elements/{p-6c05e879.js → p-076452be.js}

@@ -123,4 +123,4 @@ const disconnectLanguageChangeObserver = (component) => {
   languageChangeSubscribers.delete(component);
 };
 
-export { getLanguage as a, getLocale as b, connectLanguageChangeObserver as c, disconnectLanguageChangeObserver as d, getLocaleString as g, sanitizeString as s };
+export { getLocaleString as a, getLocale as b, connectLanguageChangeObserver as c, disconnectLanguageChangeObserver as d, getLanguage as g, sanitizeString as s };

package/lib/dist-custom-elements/{p-aa453ca9.js → p-117109e4.js}

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h } from './p-0f07edcd.js';
+import { p as proxyCustomElement, H, h } from './p-11fbe397.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { g as getColorByName } from './p-9ed347f9.js';
+import { g as getColorByName } from './p-68024252.js';
 
 const duetDividerCss = "*,*::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;display:block;width:100%}.duet-divider{-webkit-user-select:none;user-select:none;display:block;width:100%;height:1px;margin-top:36px !important;margin-bottom:28px;background:rgb(225, 227, 230)}.duet-divider.duet-p-0{padding:0 !important}.duet-divider.duet-m-0{margin:0 !important}.duet-divider.duet-m-s{margin-bottom:16px !important;margin-top:0 !important}.duet-divider.duet-theme-turva{background:rgb(228, 228, 230)}";
 

package/lib/dist-custom-elements/{p-0f07edcd.js → p-11fbe397.js}

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 const NAMESPACE = 'duet';
-const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"3.0.46"};
+const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"3.0.48"};
 
 /**
  * Virtual DOM patching algorithm based on Snabbdom by