@duetds/components 6.8.9 → 6.9.0

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

@@ -5,13 +5,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8a8ba131.js');
+const index = require('./index-92f0a873.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const jsUtils = require('./js-utils-134e0318.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
 const languageUtils = require('./language-utils-44df1d37.js');
-const tokens_module = require('./tokens.module-69170ddd.js');
-const tokenUtils = require('./token-utils-2e10264d.js');
+const tokens_module = require('./tokens.module-d402cfac.js');
+const tokenUtils = require('./token-utils-4bfb15d4.js');
 const createId = require('./create-id-c3b984b1.js');
 const stringUtils = require('./string-utils-5cadd058.js');
 
@@ -195,7 +195,7 @@ const DuetTable = class {
     index.registerInstance(this, hostRef);
     this.headingSelector = "thead tr > :not(*.duet-editable-table-actions-menu)";
     this.handleMediaQueryChange = (mq) => {
-      this.matchesBreakpoint = mq.matches;
+      this.matchesBreakpoint = tokenUtils.breakpointTokensUpTo.includes(this.breakpoint) ? !mq.matches : mq.matches;
     };
     this.matchesBreakpoint = true;
     this.theme = undefined;
@@ -431,31 +431,6 @@ const getI18nError = (errorCode, errorCodes) => {
   }
 };
 
-const ErrorItem = ({ data, errorCodes }) => {
-  const { item, error } = data;
-  const { name } = item;
-  const { type } = error;
-  return (index.h("span", { class: "duet-upload-item-error", role: "status" },
-    index.h("duet-paragraph", { class: "duet-upload-item-name", color: "danger", margin: "none", weight: "semi-bold" },
-      index.h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
-      index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-      name),
-    index.h("duet-paragraph", { class: "duet-upload-item-error-label", size: "small", margin: "none", color: "danger" }, getI18nError(type, errorCodes))));
-};
-
-const ProgressItem = ({ progress, name }) => (index.h("span", { class: "duet-upload-item-name" },
-  index.h("duet-paragraph", { class: "duet-upload-item-name", color: "gray-darker", margin: "none", weight: "semi-bold" },
-    index.h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
-    index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-    name),
-  index.h("br", null),
-  index.h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
-
-const PendingItem = ({ name }) => (index.h("span", { class: "duet-upload-item-name" },
-  index.h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
-  index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-  name));
-
 const formatBytes = (bytes, decimals = 2) => {
   if (bytes === 0) {
     return "0 Bytes";
@@ -467,9 +442,41 @@ 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 (index.h("span", { class: "duet-upload-item-name" },
+          index.h("duet-paragraph", { class: "duet-upload-item-name", color: "gray-darker", margin: "none", weight: "semi-bold" },
+            index.h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
+            index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+            name),
+          index.h("br", null),
+          index.h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
+      case "pending":
+        return (index.h("span", { class: "duet-upload-item-name" },
+          index.h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
+          index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+          name));
+      case "failure":
+        return (index.h("span", { class: "duet-upload-item-error", role: "status" },
+          index.h("duet-paragraph", { class: "duet-upload-item-name", color: "danger", margin: "none", weight: "semi-bold" },
+            index.h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
+            index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+            name),
+          index.h("duet-paragraph", { class: "duet-upload-item-error-label", size: "small", margin: "none", color: "danger" }, getI18nError(error.type, errorCodes))));
+      default:
+        return uploaded && url && showLinks ? (index.h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
+          index.h("duet-link", { url: url, external: true }, ContentName),
+          index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+          SizeText)) : (index.h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
+          ContentName,
+          index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+          SizeText));
+    }
+  };
   const ContentName = (index.h("span", { class: "duet-upload-item-name" },
     index.h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
     index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
@@ -478,31 +485,28 @@ const SuccessItem = ({ data, showLinks }) => {
     "(",
     formatBytes(size),
     ")"));
-  const FilenameLine = uploaded && url && showLinks ? (index.h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
-    index.h("duet-link", { url: url, external: true }, ContentName),
-    index.h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
-    SizeText)) : (index.h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
-    ContentName,
-    index.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 (index.h("span", { class: "duet-upload-item-success" },
-    index.h("div", null, FilenameLine)));
-};
-
-const UploadCategory = ({ meta }) => {
   const Badges = meta && meta.badges ? (index.h("span", null,
     index.h("duet-spacer", { size: "xx-small" }),
-    meta.badges.map(badgeText => (index.h("duet-badge", { color: "primary" }, badgeText))))) : (index.h("span", null));
-  return Badges;
+    meta.badges.map(badgeText => (index.h("duet-badge", { color: "primary" }, badgeText))))) : undefined;
+  const actionDescription = `${meta && meta.badges ? meta.badges.join(",") : ""} ${name}`;
+  return (index.h("div", { class: {
+      "upload-item-row": true,
+    } },
+    showCategory && (index.h("div", { class: "item-categories" },
+      index.h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, languageUtils.getLocaleString(categoryLabel)),
+      Badges)),
+    index.h("div", { class: { "item-label": true, "no-category": !showCategory } },
+      !!label && (index.h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, languageUtils.getLocaleString(label))),
+      getFileNameLine()),
+    index.h("div", { class: "item-actions" }, actions.map(actionItem => {
+      return (index.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} ${languageUtils.getLocaleString(actionItem.label)} ` }));
+    }))));
+};
+
+const UploadItemHeader = ({ label, categoryLabel }) => {
+  return (index.h("div", { class: "items-header" },
+    categoryLabel && (index.h("duet-heading", { class: "category-header", border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold" }, languageUtils.getLocaleString(categoryLabel))),
+    index.h("duet-heading", { class: { "filename-header": true, "no-category": !categoryLabel }, border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold" }, languageUtils.getLocaleString(label))));
 };
 
 const validateFileExtension = (name, allowedExtensions) => {
@@ -628,7 +632,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}.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:8px;margin-bottom:8px}.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%;margin-bottom:8px}@media (min-width: 36em){.upload-item-row .item-categories{width:35%}}.upload-item-row .item-label{width:100%;margin-bottom:8px;text-align:left}@media (min-width: 36em){.upload-item-row .item-label{width:50%}.upload-item-row .item-label.no-category{width:85%}}.upload-item-row .item-categories .heading,.upload-item-row .item-label .heading{display:block}@media (min-width: 36em){.upload-item-row .item-categories .heading,.upload-item-row .item-label .heading{display:none}}.upload-item-row .item-actions{width:100%;text-align:left}@media (min-width: 36em){.upload-item-row .item-actions{width:15%;text-align:right}}.upload-item-row .duet-upload-item-name duet-icon{position:relative;top:4px}";
 
 const DuetUpload = class {
   constructor(hostRef) {
@@ -665,6 +669,11 @@ const DuetUpload = class {
     this.kick = jsUtils.debounce(() => {
       this.tick = Date.now();
     }, 30); // will trigger re-render
+    this.categoryLabel = {
+      en: "Category",
+      sv: "Filtyp",
+      fi: "Tiedostotyyppi",
+    };
     /**
      * Private functions
      */
@@ -717,18 +726,18 @@ const DuetUpload = class {
         return "none";
       }
     };
-    this.getItemHTMLFromItemData = (data, group) => {
+    this.mapFilesToUploadItems = (data, group, showCategory) => {
       if (group === this.DefaultGroups.success) {
-        return index.h(SuccessItem, { data: data, showLinks: this.showLinks });
+        return (index.h(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 index.h(ProgressItem, { progress: data.progress, name: data.item.name });
+        return (index.h(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 index.h(PendingItem, { name: data.item.name });
+        return (index.h(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 index.h(ErrorItem, { data: data, errorCodes: this.errorCodes });
+        return (index.h(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;
@@ -1001,60 +1010,43 @@ const DuetUpload = class {
       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 = index.h(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,
           });
         }
       });
@@ -1063,46 +1055,23 @@ const DuetUpload = class {
         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 (index.h("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 (index.h(index.Fragment, null, !this.hideGroups && (index.h(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: group.label })), currentItems.map(item => this.mapFilesToUploadItems(item.data, group.id, hasCategory))));
       });
-      return EditableTables;
+      return (index.h(index.Fragment, null, this.showUploadedItemsHeader && (index.h(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: this.uploadedItemsHeaderLabel })), ItemRows));
     };
     this.tick = Date.now();
     this.accessibleActiveDescendant = undefined;
@@ -1218,6 +1187,13 @@ const DuetUpload = class {
     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,
@@ -1342,13 +1318,7 @@ const DuetUpload = class {
       this.externalUploadButton.ariaLabel = caption;
     }
     // @ts-ignore
-    return (index.h(index.Host, { class: { "duet-m-0": this.margin === "none" } }, index.h("duet-fieldset", { label: this.label, caption: !this.captionOnBottom ? caption : undefined }, index.h("slot", { name: "header" }), !this.files.size && (index.h("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 }, index.h("span", { class: {
-        "duet-upload-filelist-empty-label": !this.files.size,
-      } }, 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 && this.renderEditableTableGroups(), !!this.files.size && index.h("slot", { name: "filefooter" }), index.h("slot", { name: "footer" }), this.captionOnBottom && (index.h("duet-caption", { size: "small" }, index.h("div", { class: "upload-bottom-caption" }, caption))), index.h("slot", { name: "afterfooter" }), 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", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel)), index.h("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (index.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))), index.h("duet-spacer", { size: "medium" }), index.h("duet-visually-hidden", { "aria-hidden": "true" }, index.h("input", { ref: input => {
+    return (index.h(index.Host, { class: { "duet-m-0": this.margin === "none" } }, index.h("duet-fieldset", { "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, index.h("slot", { name: "header" }), !this.files.size && (index.h("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, index.h("duet-paragraph", { margin: "none" }, 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 && this.renderUploadedItems(), !!this.files.size && index.h("slot", { name: "filefooter" }), index.h("slot", { name: "uploadfooter" }), this.captionOnBottom && (index.h("duet-caption", { size: "small" }, index.h("div", { class: "upload-bottom-caption" }, caption))), index.h("slot", { name: "afterfooter" }), 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", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel)), index.h("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (index.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))), index.h("duet-spacer", { size: "medium" }), index.h("duet-visually-hidden", { "aria-hidden": "true" }, 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,

package/lib/cjs/duet-empty-state.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8a8ba131.js');
+const index = require('./index-92f0a873.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 
 const duetEmptyStateCss = "*,*::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%;height:100%}.duet-empty-state{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%;padding:48px;color:rgb(0, 41, 77);text-align:center;background:rgb(245, 248, 250);border-radius:4px}.duet-empty-state.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 245, 247)}";

package/lib/cjs/duet-fieldset.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8a8ba131.js');
+const index = require('./index-92f0a873.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 

package/lib/cjs/duet-footer.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8a8ba131.js');
+const index = require('./index-92f0a873.js');
 const actionArrowRight = require('./action-arrow-right-24fe06be.js');
 const actionNewWindowSmall = require('./action-new-window-small-fa51dfb9.js');
 const commonStrings = require('./common-strings-de17f887.js');

package/lib/cjs/duet-grid_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8a8ba131.js');
+const index = require('./index-92f0a873.js');
 const tokens = require('./tokens-21b244ee.js');
 const watchOptions = require('./watch-options-d88afac0.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
@@ -94,6 +94,7 @@ const DuetGrid = class {
     items.forEach(item => {
       item.responsive = this.responsive;
       item.breakpoint = this.breakpoint;
+      item.direction = this.direction;
     });
   }
   async updateGridItemsWithInputFields() {
@@ -153,12 +154,13 @@ const DuetGrid = class {
   get element() { return index.getElement(this); }
   static get watchers() { return {
     "responsive": ["updateGridItems"],
-    "breakpoint": ["updateGridItems"]
+    "breakpoint": ["updateGridItems"],
+    "direction": ["updateGridItems"]
   }; }
 };
 DuetGrid.style = duetGridCss;
 
-const duetGridItemCss = ".sc-duet-grid-item-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;min-width:0;max-width:100%;flex:0 0 auto;padding-right:8px;padding-left:8px;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-style:normal;font-weight:400;line-height:1.5;color:rgb(0, 41, 77)}.sc-duet-grid-item-h:first-child,.sc-duet-grid-item-h:first-of-type{padding-left:0}.sc-duet-grid-item-h:last-child,.sc-duet-grid-item-h:last-of-type{padding-right:0}@media (max-width: 35.9375em){.duet-grid-item-responsive.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important;padding-right:0;padding-left:0}}@media screen and (max-width: 47.9375em){.duet-grid-item-br-medium.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important}}@media screen and (max-width: 47.9375em){.duet-grid-item-responsive.duet-grid-item-br-medium.sc-duet-grid-item-h{padding-right:0;padding-left:0}}@media screen and (max-width: 64em){.duet-grid-item-br-x-large.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important}}@media screen and (max-width: 64em){.duet-grid-item-responsive.duet-grid-item-br-x-large.sc-duet-grid-item-h{padding-right:0;padding-left:0}}.duet-grid-item-fill.sc-duet-grid-item-h{flex:1 1 auto;width:100%}.duet-theme-turva.sc-duet-grid-item-h{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)}.duet-m-0.sc-duet-grid-item-h{padding:0 !important;margin:0 !important}";
+const duetGridItemCss = ".sc-duet-grid-item-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;min-width:0;max-width:100%;flex:0 0 auto;padding-right:8px;padding-left:8px;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-style:normal;font-weight:400;line-height:1.5;color:rgb(0, 41, 77)}.duet-grid-direction-horizontal.sc-duet-grid-item-h:first-child,.duet-grid-direction-horizontal.sc-duet-grid-item-h:first-of-type{padding-left:0}.duet-grid-direction-horizontal.sc-duet-grid-item-h:last-child,.duet-grid-direction-horizontal.sc-duet-grid-item-h:last-of-type{padding-right:0}@media (max-width: 35.9375em){.duet-grid-item-responsive.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important;padding-right:0;padding-left:0}}@media screen and (max-width: 47.9375em){.duet-grid-item-br-medium.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important}}@media screen and (max-width: 47.9375em){.duet-grid-item-responsive.duet-grid-item-br-medium.sc-duet-grid-item-h{padding-right:0;padding-left:0}}@media screen and (max-width: 64em){.duet-grid-item-br-x-large.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important}}@media screen and (max-width: 64em){.duet-grid-item-responsive.duet-grid-item-br-x-large.sc-duet-grid-item-h{padding-right:0;padding-left:0}}.duet-grid-item-fill.sc-duet-grid-item-h{flex:1 1 auto;width:100%}.duet-theme-turva.sc-duet-grid-item-h{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)}.duet-m-0.sc-duet-grid-item-h{padding:0 !important;margin:0 !important}";
 
 const DuetGridItem = class {
   constructor(hostRef) {
@@ -169,6 +171,7 @@ const DuetGridItem = class {
     this.theme = "";
     this.margin = "auto";
     this.responsive = false;
+    this.direction = "horizontal";
     this.breakpoint = "small";
   }
   /**
@@ -191,7 +194,12 @@ const DuetGridItem = class {
         "duet-grid-item": true,
         "duet-grid-item-fill": this.fill,
         "duet-grid-item-responsive": this.responsive,
+        "duet-grid-direction-horizontal": this.direction === "horizontal",
+        "duet-grid-direction-vertical": this.direction === "vertical",
+        "duet-grid-item-br-x-small": this.breakpoint === "x-small",
+        "duet-grid-item-br-small": this.breakpoint === "small",
         "duet-grid-item-br-medium": this.breakpoint === "medium",
+        "duet-grid-item-br-large": this.breakpoint === "large",
         "duet-grid-item-br-x-large": this.breakpoint === "x-large",
       } }));
   }

package/lib/cjs/duet-header_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8a8ba131.js');
+const index = require('./index-92f0a873.js');
 const formSearch = require('./form-search-d61b2843.js');
 const tokens = require('./tokens-21b244ee.js');
 const bodyScrollLock_es6 = require('./bodyScrollLock.es6-6ef1142a.js');
@@ -15,7 +15,7 @@ const keyboardUtils = require('./keyboard-utils-bb32119b.js');
 const languageUtils = require('./language-utils-44df1d37.js');
 const stringUtils = require('./string-utils-5cadd058.js');
 const actionArrowDownSmall = require('./action-arrow-down-small-ef77a2d1.js');
-const tokens_module = require('./tokens.module-69170ddd.js');
+const tokens_module = require('./tokens.module-d402cfac.js');
 const createId = require('./create-id-c3b984b1.js');
 
 var navigationContactDropdown={"title":"navigation-contact-dropdown","tags":"navigation contact dropdown speech bubbles","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M20.247 24a.743.743 0 0 1-.53-.22l-4.28-4.28h-.439c-3.308 0-6-2.692-6-6s2.692-6 6-6h3c3.309.001 6 2.692 6 6a5.974 5.974 0 0 1-3 5.179v4.571a.75.75 0 0 1-.751.75zm-5.25-15c-2.481 0-4.5 2.019-4.5 4.5s2.019 4.5 4.5 4.5h.75c.198 0 .391.08.53.22l3.22 3.22v-3.213c0-.289.169-.555.429-.678a4.51 4.51 0 0 0 2.571-4.049 4.504 4.504 0 0 0-4.498-4.499h-3.002z\"/><path d=\"M3.747 16.5a.747.747 0 0 1-.75-.75v-4.57a5.967 5.967 0 0 1-2.65-3.171A5.948 5.948 0 0 1 .57 3.431 6.014 6.014 0 0 1 5.985 0h3.012a6.04 6.04 0 0 1 5.752 4.286.751.751 0 0 1-.718.964.755.755 0 0 1-.719-.536A4.531 4.531 0 0 0 8.997 1.5h-3a4.511 4.511 0 0 0-4.071 2.572c-.512 1.084-.571 2.302-.167 3.431s1.224 2.032 2.308 2.545c.261.123.43.39.43.678v3.214l1.72-1.72a.744.744 0 0 1 1.06 0 .752.752 0 0 1 0 1.061l-3 3a.744.744 0 0 1-.53.219z\"/></svg>"};
@@ -606,7 +606,7 @@ const i18n = {
   },
 };
 const DefaultLogo = ({ inverse, logoId, language }) => {
-  const logoColor = inverse ? tokens_module.colorGrayLightest : tokens_module.colorBrandBlue;
+  const logoColor = inverse ? tokens_module.colorGrayLightest : tokens_module.colorPrimary;
   const { title, path, viewBox } = i18n[language];
   return (index.h("svg", { role: "img", xmlns: "http://www.w3.org/2000/svg", fill: logoColor, "aria-labelledby": logoId, viewBox: viewBox }, index.h("title", { id: logoId }, title), index.h("path", { d: path })));
 };
@@ -623,9 +623,9 @@ const DuetLogo = class {
     this.size = "medium";
     this.href = "/";
     this.accessibleLabelDefaults = {
-      fi: "Siirry LähiTapiolan etusivulle.",
-      sv: "Gå till LokalTapiola förstasidan.",
-      en: "Go to LocalTapiola front page.",
+      fi: "Siirry etusivulle.",
+      sv: "Gå till förstasidan.",
+      en: "Go to front page.",
     };
     this.accessibleLabel = languageUtils.getLocaleString(this.accessibleLabelDefaults);
     this.language = languageUtils.getLanguage();