@duetds/components 6.11.1 → 7.0.0

package/lib/collection/components/duet-tooltip/duet-tooltip.css

@@ -20,7 +20,6 @@
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
-  position: relative;
   z-index: 200;
   display: inline-flex;
   width: auto;
@@ -29,66 +28,10 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-.duet-tooltip-button {
-  z-index: 100;
-  display: inline-block;
-  align-items: center;
-  justify-content: center;
-  min-width: 48px;
-  height: 48px;
-  padding: 0 !important;
-  margin-right: -12px;
-  line-height: normal !important;
-  color: rgb(0, 119, 179);
-  white-space: nowrap;
-  cursor: pointer;
-  background: transparent !important;
-  border-radius: 4px;
-}
-.duet-tooltip-button.duet-theme-turva {
-  color: rgb(198, 12, 48);
-}
-.duet-tooltip-button:hover {
-  color: rgb(0, 77, 128);
-}
-.duet-tooltip-button:hover.duet-theme-turva {
-  color: rgb(148, 9, 37);
-}
-.duet-tooltip-button:focus {
-  background: transparent !important;
-  outline: 0;
-}
-:host(.user-is-tabbing) .duet-tooltip-button:focus {
-  background: transparent !important;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179) !important;
-}
-:host(.user-is-tabbing) .duet-tooltip-button.duet-theme-turva:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58) !important;
-}
-.duet-tooltip-button svg {
-  width: 20px;
-  height: 20px;
-  pointer-events: none;
-}
-
-.duet-tooltip-button-has-label {
-  margin-right: 0;
-}
-
-.duet-tooltip-label {
+duet-tooltip-button {
   position: relative;
-  z-index: 100;
-  display: inline-block;
-  max-width: calc(100% - 30px);
-  margin-left: 12px !important;
-  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: 600;
-  line-height: 1.25;
-  text-align: left;
-  white-space: normal;
-  vertical-align: top;
 }
-.duet-theme-turva .duet-tooltip-label {
-  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+duet-tooltip-popup {
+  position: absolute;
 }

package/lib/collection/components/duet-tooltip/duet-tooltip.js

@@ -6,7 +6,9 @@ import { arrow, computePosition, flip, shift } from "@floating-ui/dom";
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
+import { isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { Teleport } from "../../utils/teleport";
 export class DuetTooltip {
   constructor() {
     /**
@@ -21,42 +23,23 @@ export class DuetTooltip {
      * Local methods
      */
     this.openTooltip = () => {
-      this.focusTarget = "tooltip";
       this.active = true;
+      this.focusTarget = "tooltip";
+      this.teleport.go();
     };
     this.closeTooltip = (moveFocusToButton = false) => {
+      this.active = false;
       if (moveFocusToButton) {
         this.focusTarget = "trigger";
       }
-      this.active = false;
+      setTimeout(() => {
+        this.teleport.resume();
+        this.updatePlacement();
+      }, 200);
     };
     this.toggleOpen = () => {
       this.active ? this.closeTooltip() : this.openTooltip();
     };
-    this.handleFocusOut = (e) => {
-      if (!this.active) {
-        return;
-      }
-      const relatedTarget = e.relatedTarget;
-      if (
-      // if we don't know where focus went
-      relatedTarget == null ||
-        // if focus is within the tooltip itself
-        this.element.shadowRoot.contains(relatedTarget) ||
-        // if focus is within the tooltip light DOM
-        this.element.contains(relatedTarget)) {
-        // then we can skip closing
-        return;
-      }
-      this.closeTooltip();
-    };
-    this.handleKeyDown = (e) => {
-      const isEscapeKey = e.keyCode === 27;
-      const isTabbingOut = e.target === this.popupElement && e.shiftKey && e.keyCode === 9;
-      if (isEscapeKey || isTabbingOut) {
-        this.closeTooltip(true);
-      }
-    };
     this.updatePlacement = async () => {
       var _a, _b;
       let preferRight = true;
@@ -77,7 +60,6 @@ export class DuetTooltip {
         placement,
         middleware: [flip(), shift({ padding: 5 }), arrow({ element: this.arrowEl })],
       });
-      // magic number adjustment for the tooltip position to cater for the arrow
       this.tooltipY = position.y;
       this.tooltipX = position.x;
       this.placement = position.placement;
@@ -128,24 +110,25 @@ export class DuetTooltip {
   async componentDidLoad() {
     this.arrowEl = await this.popupElement.getArrowElement();
     this.contentEl = await this.popupElement.getContentElement();
+    this.teleport = new Teleport(this.popupElement);
     if (!Build.isServer) {
       this.updatePlacement();
     }
+    if (this.active) {
+      this.openTooltip();
+    }
+    this.intersectionObserver = new IntersectionObserver(this.updatePlacement, { root: document.body });
+    this.intersectionObserver.observe(this.element);
   }
   componentDidUpdate() {
     switch (this.focusTarget) {
       case "tooltip":
-        this.contentEl.focus({ preventScroll: true });
-        // workaround for "user-is-tabbing" class not being applied inside shadow DOM
-        if (this.element.classList.contains("user-is-tabbing")) {
-          this.popupElement.classList.add("user-is-tabbing");
-        }
-        else {
-          this.popupElement.classList.remove("user-is-tabbing");
-        }
+        // delay focus so button is correctly announced as "expanded"
+        setTimeout(() => this.contentEl.focus({ preventScroll: true }));
         break;
       case "trigger":
-        this.buttonEl.focus({ preventScroll: true });
+        // delay focus so button is correctly announced as "collapsed"
+        setTimeout(() => this.buttonEl.setFocus({ preventScroll: true }));
         break;
     }
     this.focusTarget = null;
@@ -178,13 +161,20 @@ export class DuetTooltip {
       return;
     }
     const path = e.composedPath();
-    const isClickOutside = path.every(el => el !== this.element);
+    const isClickOutside = path.every(el => el !== this.element && el !== this.contentEl);
     if (isClickOutside) {
       this.closeTooltip();
     }
   }
+  handleKeyDown(e) {
+    if (this.active && isEscapeKey(e)) {
+      this.closeTooltip(true);
+    }
+  }
   handlePopupClose() {
-    this.closeTooltip(true);
+    if (this.active) {
+      this.closeTooltip(true);
+    }
   }
   async handleActiveChange(newActiveValue) {
     if (newActiveValue) {
@@ -209,21 +199,16 @@ export class DuetTooltip {
       top: `${this.tooltipY}px`,
       left: `${this.tooltipX}px`,
       display: "block",
+      "pointer-events": this.active ? "auto" : "none",
     };
     const arrowStyles = {
       top: this.arrowY ? `${this.arrowY}px` : undefined,
       left: this.arrowX ? `${this.arrowX}px` : undefined,
     };
-    return (h(Host, { style: tooltipStyles }, h("button", { ref: element => (this.buttonEl = element), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", onClick: this.toggleOpen, type: "button", class: {
-        "duet-tooltip-button": true,
-        "duet-tooltip-button-has-label": !!this.label,
-        "duet-theme-turva": this.theme === "turva",
-      } }, h("svg", { "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z" }), h("circle", { cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { d: "m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" })), this.label ? (h("span", { class: "duet-tooltip-label" }, this.label)) : (h("duet-visually-hidden", null, this.accessibleInputLabel
-      ? `${this.accessibleInputLabel}, ${this.accessibleLabel}`
-      : this.accessibleLabel))), h("duet-tooltip-popup", { ref: element => (this.popupElement = element), active: this.active, tooltipId: this.tooltipId, arrowStyles: arrowStyles, style: positionStyles, placement: this.placement, accessibleCloseLabel: this.accessibleCloseLabel, onKeyDown: this.handleKeyDown, onFocusout: this.handleFocusOut }, h("slot", null))));
+    return (h(Host, { style: tooltipStyles }, h("duet-tooltip-button", { ref: element => (this.buttonEl = element), active: this.active, tooltipId: this.tooltipId, label: this.label, accessibleLabel: this.accessibleInputLabel ? `${this.accessibleInputLabel}, ${this.accessibleLabel}` : this.accessibleLabel, onClick: this.toggleOpen }), h("duet-tooltip-popup", { ref: element => (this.popupElement = element), active: this.active, tooltipId: this.tooltipId, arrowStyles: arrowStyles, style: positionStyles, placement: this.placement, accessibleCloseLabel: this.accessibleCloseLabel }, h("slot", null))));
   }
   static get is() { return "duet-tooltip"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["duet-tooltip.scss"]
@@ -429,7 +414,7 @@ export class DuetTooltip {
           "references": {
             "DuetTooltipBreakpoint": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tooltip/duet-tooltip.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tooltip/duet-tooltip.tsx"
             }
           }
         },
@@ -560,10 +545,16 @@ export class DuetTooltip {
         "target": "document",
         "capture": false,
         "passive": false
+      }, {
+        "name": "keydown",
+        "method": "handleKeyDown",
+        "target": "document",
+        "capture": false,
+        "passive": false
       }, {
         "name": "tooltipPopupClosed",
         "method": "handlePopupClose",
-        "target": undefined,
+        "target": "document",
         "capture": false,
         "passive": false
       }];

package/lib/collection/components/duet-upload/duet-upload.js

@@ -9,7 +9,7 @@ import { getLocaleString, sanitizeString } from "../../utils/language-utils";
 import errorCodes from "./errorcodes.json";
 import { getI18nError } from "./errorcodes.utils";
 import { UploadItemHeader } from "./upload-item-header";
-import { filesToUploadCountAboveMax, validateFile, validateTotalAmountIsAboveMax, validateTotalSizeIsAboveMax, } from "./upload-validators";
+import { filesToUploadCountAboveMax, filesToUploadTotalSizeIsAboveMax, validateFile, validateTotalAmountIsAboveMax, validateTotalSizeIsAboveMax, } from "./upload-validators";
 import { makeXhrRequest, } from "./xhr.helpers";
 /**
  * @slot header  - named slot - to place content after description / caption (if caption is on top)
@@ -33,6 +33,7 @@ export class DuetUpload {
     this.fileMaxReached = false;
     this.bytesMaxReached = false;
     this.filesToUploadExceedsLimit = false;
+    this.filesToUploadTotalSizeIsAboveMax = false;
     this.internalStatusMessageLabel = undefined;
     this.itemRefs = new Map();
     /**
@@ -523,27 +524,27 @@ export class DuetUpload {
     this.caption = undefined;
     this.statusLabelDefaults = {
       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: "Lataus valmis, {filesUploaded} tiedostoa ladattu onnistuneesti, {filesWithErrors} tiedostossa oli virheitä",
-        files: "tiedostot",
+        inProgress: "Lähetetään {filesUploaded}, yhteensä lähetettävänä {filesTotal}.",
+        inProgressWithErrors: "Lähetetään {filesInProgress}, lähetetty {filesUploaded}, yhteensä lähetettävänä {filesTotal}, {filesWithErrors} epäonnistui",
+        done: "Lähetys valmis, {filesTotal} lisätty onnistuneesti",
+        doneWithErrors: "Lähetys valmis, {filesUploaded} lisätty onnistuneesti, {filesWithErrors} epäonnistui",
+        files: "tiedostoa",
         file: "tiedosto",
       },
       sv: {
-        inProgress: "Adding {filesUploaded} of {filesTotal}",
+        inProgress: "Laddar upp {filesUploaded} av {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",
+        done: "Uppladdningen slutförd, {filesTotal} har lagts till",
+        doneWithErrors: "Uppladdningen slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
         files: "filer",
         file: "fil",
       },
       en: {
-        inProgress: "Adding {filesUploaded} of {filesTotal}",
+        inProgress: "Uploading {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: "File",
+        done: "Upload completed, {filesTotal} added successfully",
+        doneWithErrors: "Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.",
+        files: "files",
         file: "file",
       },
     };
@@ -589,7 +590,7 @@ export class DuetUpload {
     this.maxBytesTotal = undefined;
     this.maxFiles = 99;
     this.allowedExtensions = "all";
-    this.allowedMimetypes = "*";
+    this.allowedMimetypes = "";
     this.multiple = true;
     this.limitSelection = false;
     this.value = undefined;
@@ -601,6 +602,7 @@ export class DuetUpload {
       sv: "Lägg till en bilaga",
       en: "Uploaded file",
     };
+    this.headerHeadingLevel = "h3";
     this.hideHeader = false;
     this.emitEvent = false;
     this.groups = [
@@ -737,7 +739,10 @@ export class DuetUpload {
       this.externalUploadButton.ariaLabel = caption;
     }
     // @ts-ignore
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h("slot", { name: "header" }), !this.files.size && (h("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { name: "filefooter" }), h("slot", { name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { margin: "none", size: "small" }, h("div", { class: "upload-bottom-caption" }, caption))), h("slot", { name: "afterfooter" }), !this.hideButton && (h(Fragment, null, h("duet-spacer", { size: "large" }), h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached || this.bytesMaxReached || this.filesToUploadExceedsLimit) && (h(Fragment, null, h("duet-spacer", { size: "medium" }), h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes)))), h("duet-visually-hidden", { "aria-hidden": "true" }, h("input", { ref: input => {
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h("slot", { name: "header" }), !this.files.size && (h("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { name: "filefooter" }), h("slot", { name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { margin: "none", size: "small" }, h("div", { class: "upload-bottom-caption" }, caption))), h("slot", { name: "afterfooter" }), !this.hideButton && (h(Fragment, null, h("duet-spacer", { size: "large" }), h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached ||
+      this.bytesMaxReached ||
+      this.filesToUploadExceedsLimit ||
+      this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, null, h("duet-spacer", { size: "medium" }), h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h("duet-visually-hidden", { "aria-hidden": "true" }, h("input", { ref: input => {
         this.nativeInput = input;
       }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
         "duet-upload": true,
@@ -814,6 +819,12 @@ export class DuetUpload {
       this.kick();
       return;
     }
+    this.filesToUploadTotalSizeIsAboveMax = false;
+    if (filesToUploadTotalSizeIsAboveMax(this.files, selectedFiles, this.maxBytesTotal)) {
+      this.filesToUploadTotalSizeIsAboveMax = true;
+      this.kick();
+      return;
+    }
     if (selectedFiles) {
       for (const item of selectedFiles) {
         const { valid, errorMessage, errorType, errorSystem } = validateFile(item, {
@@ -973,7 +984,7 @@ export class DuetUpload {
           "references": {
             "XHRInternalMiddleWare": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         },
@@ -1112,13 +1123,13 @@ export class DuetUpload {
         "docs": {
           "tags": [{
               "name": "default",
-              "text": "{\nfi: {\ninProgress: \"L\u00E4hetet\u00E4\u00E4n {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta\",\ninProgressWithErrors:\n\"L\u00E4hetet\u00E4\u00E4n {filesInProgress} tiedostoa, l\u00E4hetetty {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheit\u00E4\",\ndone: \"Kaikki {filesTotal} tiedostoa l\u00E4hetetty onnistuneesti\",\ndoneWithErrors:\n\"Lataus valmis, {filesUploaded} tiedostoa ladattu onnistuneesti, {filesWithErrors} tiedostossa oli virheit\u00E4\",\nfiles: \"tiedostot\",\nfile: \"tiedosto\",\n},\nsv: {\ninProgress: \"Adding {filesUploaded} of {filesTotal}\",\ninProgressWithErrors:\n\"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\ndone: \"Alla {filesTotal} har lagts till\",\ndoneWithErrors: \"Handling slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\nfiles: \"filer\",\nfile: \"fil\",\n},\nen: {\ninProgress: \"Adding {filesUploaded} of {filesTotal}\",\ninProgressWithErrors:\n\"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\ndone: \"All {filesTotal} added successfully\",\ndoneWithErrors: \"Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors\",\nfiles: \"tiedostoa\",\nfile: \"tiedosto\",\n},\n}"
+              "text": "{\nfi: {\ninProgress: \"L\u00E4hetet\u00E4\u00E4n {filesUploaded}, yhteens\u00E4 l\u00E4hetett\u00E4v\u00E4n\u00E4 {filesTotal}.\",\ninProgressWithErrors:\n\"L\u00E4hetet\u00E4\u00E4n {filesInProgress}, l\u00E4hetetty {filesUploaded}, yhteens\u00E4 l\u00E4hetett\u00E4v\u00E4n\u00E4 {filesTotal}, {filesWithErrors} ep\u00E4onnistui\",\ndone: \"L\u00E4hetys valmis, {filesTotal} lis\u00E4tty onnistuneesti\",\ndoneWithErrors: \"L\u00E4hetys valmis, {filesUploaded} lis\u00E4tty onnistuneesti, {filesWithErrors} ep\u00E4onnistui\",\nfiles: \"tiedostoa\",\nfile: \"tiedosto\",\n},\nsv: {\ninProgress: \"Laddar upp {filesUploaded} av {filesTotal}\",\ninProgressWithErrors:\n\"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\ndone: \"Uppladdningen slutf\u00F6rd, {filesTotal} har lagts till\",\ndoneWithErrors: \"Uppladdningen slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\nfiles: \"filer\",\nfile: \"fil\",\n},\nen: {\ninProgress: \"Uploading {filesUploaded} of {filesTotal}\",\ninProgressWithErrors:\n\"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\ndone: \"Upload completed, {filesTotal} added successfully\",\ndoneWithErrors: \"Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.\",\nfiles: \"files\",\nfile: \"file\",\n},\n}"
             }],
           "text": "Property to change the aria upload progress text read aloud by screenreaders"
         },
         "attribute": "status-label-default",
         "reflect": false,
-        "defaultValue": "{\n    fi: {\n      inProgress: \"L\u00E4hetet\u00E4\u00E4n {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta\",\n      inProgressWithErrors:\n        \"L\u00E4hetet\u00E4\u00E4n {filesInProgress} tiedostoa, l\u00E4hetetty {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheit\u00E4\",\n      done: \"Kaikki {filesTotal} tiedostoa l\u00E4hetetty onnistuneesti\",\n      doneWithErrors:\n        \"Lataus valmis, {filesUploaded} tiedostoa ladattu onnistuneesti, {filesWithErrors} tiedostossa oli virheit\u00E4\",\n      files: \"tiedostot\",\n      file: \"tiedosto\",\n    },\n    sv: {\n      inProgress: \"Adding {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\n      done: \"Alla {filesTotal} har lagts till\",\n      doneWithErrors: \"Handling slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\n      files: \"filer\",\n      file: \"fil\",\n    },\n    en: {\n      inProgress: \"Adding {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\n      done: \"All {filesTotal} added successfully\",\n      doneWithErrors: \"Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors\",\n      files: \"File\",\n      file: \"file\",\n    },\n  }"
+        "defaultValue": "{\n    fi: {\n      inProgress: \"L\u00E4hetet\u00E4\u00E4n {filesUploaded}, yhteens\u00E4 l\u00E4hetett\u00E4v\u00E4n\u00E4 {filesTotal}.\",\n      inProgressWithErrors:\n        \"L\u00E4hetet\u00E4\u00E4n {filesInProgress}, l\u00E4hetetty {filesUploaded}, yhteens\u00E4 l\u00E4hetett\u00E4v\u00E4n\u00E4 {filesTotal}, {filesWithErrors} ep\u00E4onnistui\",\n      done: \"L\u00E4hetys valmis, {filesTotal} lis\u00E4tty onnistuneesti\",\n      doneWithErrors: \"L\u00E4hetys valmis, {filesUploaded} lis\u00E4tty onnistuneesti, {filesWithErrors} ep\u00E4onnistui\",\n      files: \"tiedostoa\",\n      file: \"tiedosto\",\n    },\n    sv: {\n      inProgress: \"Laddar upp {filesUploaded} av {filesTotal}\",\n      inProgressWithErrors:\n        \"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\n      done: \"Uppladdningen slutf\u00F6rd, {filesTotal} har lagts till\",\n      doneWithErrors: \"Uppladdningen slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\n      files: \"filer\",\n      file: \"fil\",\n    },\n    en: {\n      inProgress: \"Uploading {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\n      done: \"Upload completed, {filesTotal} added successfully\",\n      doneWithErrors: \"Upload completed, {filesUploaded} added successfully, {filesWithErrors} failed.\",\n      files: \"files\",\n      file: \"file\",\n    },\n  }"
       },
       "statusMessageLabel": {
         "type": "string",
@@ -1352,7 +1363,7 @@ export class DuetUpload {
           "references": {
             "StringMap": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         },
@@ -1673,7 +1684,7 @@ export class DuetUpload {
         },
         "attribute": "allowed-mimetypes",
         "reflect": false,
-        "defaultValue": "\"*\""
+        "defaultValue": "\"\""
       },
       "multiple": {
         "type": "boolean",
@@ -1805,6 +1816,29 @@ export class DuetUpload {
         },
         "defaultValue": "{\n    fi: \"Ladattu tiedosto\",\n    sv: \"L\u00E4gg till en bilaga\",\n    en: \"Uploaded file\",\n  }"
       },
+      "headerHeadingLevel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetHeadingLevel",
+          "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+          "references": {
+            "DuetHeadingLevel": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading level for the label in the legend element. This is only used to give screen readers better logical structure.\nThis does not affect visual appearance."
+        },
+        "attribute": "header-heading-level",
+        "reflect": false,
+        "defaultValue": "\"h3\""
+      },
       "hideHeader": {
         "type": "boolean",
         "mutable": false,
@@ -1850,7 +1884,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadTableGroupName": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         },
@@ -1892,7 +1926,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1912,7 +1946,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1932,7 +1966,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1952,7 +1986,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1972,7 +2006,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1992,7 +2026,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -2012,7 +2046,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -2032,7 +2066,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -2052,7 +2086,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -2072,7 +2106,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -2092,7 +2126,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }

package/lib/collection/components/duet-upload/upload-item-header.js

@@ -3,6 +3,11 @@
  */
 import { h } from "@stencil/core";
 import { getLocaleString } from "../../utils/language-utils";
+const headerAriaLabel = {
+  fi: "Liiteluettelo",
+  sv: "Lista över bilagor",
+  en: "Attachments list",
+};
 export 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", margin: "none" }, getLocaleString(categoryLabel))), h("duet-heading", { class: { "filename-header": true, "no-category": !categoryLabel }, border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none" }, getLocaleString(label))));
+  return (h("div", { class: "items-header", tabindex: "0", "aria-label": getLocaleString(headerAriaLabel) }, categoryLabel && (h("duet-heading", { class: "category-header", border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none", "aria-hidden": "true" }, getLocaleString(categoryLabel))), h("duet-heading", { class: { "filename-header": true, "no-category": !categoryLabel }, border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold", margin: "none", "aria-hidden": "true" }, getLocaleString(label))));
 };

package/lib/collection/components/duet-upload/upload-validators.js

@@ -102,3 +102,22 @@ export const filesToUploadCountAboveMax = (currentFilesCount, filesToUploadCount
   }
   return false;
 };
+export const filesToUploadTotalSizeIsAboveMax = (currentFiles, filesToUpload, maxTotalBytes) => {
+  let total = 0;
+  if (maxTotalBytes) {
+    currentFiles.forEach(item => {
+      if (item.valid && item.size) {
+        total += item.size;
+      }
+    });
+    filesToUpload.forEach(item => {
+      if (item.size) {
+        total += item.size;
+      }
+    });
+    if (total >= maxTotalBytes) {
+      return true;
+    }
+  }
+  return false;
+};

package/lib/collection/components/duet-upload-item/duet-upload-item.js

@@ -42,7 +42,8 @@ export class DuetUploadItem {
   }
   async focusActionButton() {
     if (this.actionButton) {
-      await this.actionButton.setFocus();
+      await this.actionButton.setFocus({ preventScroll: true });
+      this.actionButton.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
     }
   }
   getFileNameLine() {
@@ -62,9 +63,9 @@ export class DuetUploadItem {
     }
   }
   render() {
-    const { uid, meta } = this.data;
+    const { uid, meta, item } = this.data;
     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}`;
+    const actionDescription = `${meta && meta.badges ? meta.badges.join(",") : ""} ${item.name}`;
     return (h("div", { class: {
         "upload-item-row": true,
       } }, this.showCategory && (h("div", { class: "item-categories" }, h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { class: "item-actions" }, this.actions.map(actionItem => {
@@ -126,7 +127,7 @@ export class DuetUploadItem {
           "references": {
             "ItemType": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload-item/duet-upload-item.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload-item/duet-upload-item.tsx"
             }
           }
         },

package/lib/collection/utils/math.utils.js

@@ -11,6 +11,9 @@
 export function SafeParseFloat(value, locale) {
   let results;
   if (typeof value === "string") {
+    if (value === "") {
+      return null;
+    }
     //the minuses are NOT the same characters, they differ in unicode for some languages
     // "‐", "−", "–", and "—"
     let convertedMinus = value.replace("−", "-").replace("‐", "-").replace("−", "-").replace("–", "-").replace("—", "-");