@duetds/components 6.9.5 → 6.9.7

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

@@ -31,10 +31,8 @@
 
 .duet-tooltip {
   position: absolute;
-  right: -141px;
-  bottom: 100%;
   z-index: 950;
-  display: block;
+  display: none;
   width: 282px;
   min-height: 48px;
   max-height: 340px;
@@ -50,7 +48,6 @@
   box-shadow: 0 2px 10px 0 rgba(0, 41, 77, 0.07);
   opacity: 0;
   transition: 300ms ease;
-  transform: scale(0.9) translateZ(0) translateY(20px);
   transform-origin: 100% 100%;
 }
 .duet-tooltip.duet-theme-turva {
@@ -59,78 +56,66 @@
   border-color: rgb(228, 228, 230);
   box-shadow: 0 2px 10px 0 rgba(117, 117, 117, 0.13);
 }
-.duet-tooltip::after {
+.duet-tooltip .arrow {
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  pointer-events: none;
+}
+.duet-tooltip .arrow.bottom, .duet-tooltip .arrow.bottom-start, .duet-tooltip .arrow.bottom-end {
+  top: -21px;
+}
+.duet-tooltip .arrow-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.duet-tooltip .arrow-container::after {
   position: absolute;
-  right: 142px;
-  bottom: -20px;
   z-index: 200;
   width: 0;
   height: 0;
+  pointer-events: none;
   content: "";
-  border: 10px solid transparent;
-  border-top: 10px solid rgb(255, 255, 255);
 }
-.duet-tooltip::before {
+.duet-tooltip .arrow-container::before {
   position: absolute;
-  right: 141px;
-  bottom: -22px;
   z-index: 100;
   width: 0;
   height: 0;
+  pointer-events: none;
   content: "";
+}
+.duet-tooltip .arrow-container.top::after, .duet-tooltip .arrow-container.top-start::after, .duet-tooltip .arrow-container.top-end::after {
+  bottom: 2px;
+  left: 2px;
+  border: 10px solid transparent;
+  border-top: 10px solid rgb(255, 255, 255);
+}
+.duet-tooltip .arrow-container.top::before, .duet-tooltip .arrow-container.top-start::before, .duet-tooltip .arrow-container.top-end::before {
+  bottom: -1px;
+  left: 1px;
   border: 11px solid transparent;
   border-top: 11px solid rgb(225, 227, 230);
 }
-.duet-theme-turva .duet-tooltip::before {
+.duet-theme-turva .duet-tooltip .arrow-container.top::before, .duet-theme-turva .duet-tooltip .arrow-container.top-start::before, .duet-theme-turva .duet-tooltip .arrow-container.top-end::before {
   border-top: 11px solid rgb(228, 228, 230);
 }
-.duet-tooltip.duet-tooltip-down {
-  top: 100%;
-  bottom: auto;
-  transform: scale(0.9) translateZ(0) translateY(-20px);
-  transform-origin: 100% 0;
-}
-.duet-tooltip.duet-tooltip-down::after {
-  top: -20px;
-  bottom: auto;
+.duet-tooltip .arrow-container.bottom::after, .duet-tooltip .arrow-container.bottom-start::after, .duet-tooltip .arrow-container.bottom-end::after {
+  bottom: 1px;
+  left: 2px;
   border: 10px solid transparent;
   border-bottom: 10px solid rgb(255, 255, 255);
 }
-.duet-tooltip.duet-tooltip-down::before {
-  top: -22px;
-  bottom: auto;
+.duet-tooltip .arrow-container.bottom::before, .duet-tooltip .arrow-container.bottom-start::before, .duet-tooltip .arrow-container.bottom-end::before {
+  bottom: 1px;
+  left: 1px;
   border: 11px solid transparent;
   border-bottom: 11px solid rgb(225, 227, 230);
 }
-.duet-theme-turva .duet-tooltip.duet-tooltip-down::before {
-  border-bottom: 11px solid rgb(228, 228, 230);
-}
-.duet-tooltip.duet-tooltip-left {
-  right: -21px !important;
-  transform-origin: 100% 100% !important;
-}
-.duet-tooltip.duet-tooltip-left::after {
-  right: 22px !important;
-  transform: none !important;
-}
-.duet-tooltip.duet-tooltip-left::before {
-  right: 21px !important;
-  transform: none !important;
-}
-.duet-tooltip.duet-tooltip-right {
-  right: auto !important;
-  left: -9px !important;
-  transform-origin: 100% 100% !important;
-}
-.duet-tooltip.duet-tooltip-right::after {
-  right: auto !important;
-  left: 22px !important;
-  transform: none !important;
-}
-.duet-tooltip.duet-tooltip-right::before {
-  right: auto !important;
-  left: 21px !important;
-  transform: none !important;
+.duet-theme-turva .duet-tooltip .arrow-container.bottom::before, .duet-theme-turva .duet-tooltip .arrow-container.bottom-start::before, .duet-theme-turva .duet-tooltip .arrow-container.bottom-end::before {
+  border-top: 11px solid rgb(228, 228, 230);
 }
 .duet-tooltip.duet-tooltip-has-label {
   right: auto !important;
@@ -138,24 +123,10 @@
   width: 282px !important;
   transform-origin: 0 0 !important;
 }
-.duet-tooltip.duet-tooltip-has-label::after {
-  right: auto !important;
-  left: 1px !important;
-  transform: none !important;
-}
-.duet-tooltip.duet-tooltip-has-label::before {
-  right: auto !important;
-  left: 0 !important;
-  transform: none !important;
-}
 .duet-tooltip.duet-tooltip-active {
   visibility: visible;
   opacity: 1;
   transition-property: transform, opacity;
-  transform: scale(1.0001) translateZ(0) translateY(-8px);
-}
-.duet-tooltip.duet-tooltip-active.duet-tooltip-down {
-  transform: scale(1.0001) translateZ(0) translateY(8px);
 }
 
 .duet-tooltip-button {
@@ -283,42 +254,4 @@
 .duet-theme-turva .duet-tooltip-close:focus {
   color: rgb(23, 28, 58);
   box-shadow: 0 0 0 2px rgb(23, 28, 58);
-}
-
-@media (min-width: 48em) {
-  .duet-tooltip.duet-mq-medium {
-    right: -148px;
-    width: 320px;
-    transform-origin: 50% 100%;
-  }
-  .duet-tooltip.duet-mq-medium::after {
-    right: 50%;
-    transform: translateX(50%);
-  }
-  .duet-tooltip.duet-mq-medium::before {
-    right: 50%;
-    transform: translateX(50%);
-  }
-  .duet-tooltip.duet-mq-medium.duet-tooltip-down {
-    transform-origin: 50% 0;
-  }
-}
-
-@media (min-width: 62em) {
-  .duet-tooltip.duet-mq-large {
-    right: -148px;
-    width: 320px;
-    transform-origin: 50% 100%;
-  }
-  .duet-tooltip.duet-mq-large::after {
-    right: 50%;
-    transform: translateX(50%);
-  }
-  .duet-tooltip.duet-mq-large::before {
-    right: 50%;
-    transform: translateX(50%);
-  }
-  .duet-tooltip.duet-mq-large.duet-tooltip-down {
-    transform-origin: 50% 0;
-  }
 }

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

@@ -1,6 +1,8 @@
 /*!
  * Built with Duet Design System
  */
+import { media_query_large, media_query_medium } from "@duetds/tokens/lib/tokens.json";
+import { arrow, computePosition, flip, shift } from "@floating-ui/dom";
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
@@ -10,8 +12,11 @@ export class DuetTooltip {
     /**
      * Own Properties.
      */
+    this.mql = [
+      window.matchMedia(media_query_medium.replace(/'/g, "")),
+      window.matchMedia(media_query_large.replace(/'/g, "")),
+    ];
     this.tooltipId = createID("DuetTooltip");
-    this.lastScrollTop = 0;
     /**
      * Local methods
      */
@@ -55,42 +60,37 @@ export class DuetTooltip {
     this.handleCloseClick = () => {
       this.closeTooltip(true);
     };
-    this.isElementInViewportVertically = () => {
-      if (!this.tooltipEl) {
-        return false;
+    this.updatePlacement = async () => {
+      var _a, _b;
+      let preferRight = true;
+      if (this.breakpoint === "large" && !this.mql[1].matches) {
+        preferRight = false;
       }
-      var rect = this.tooltipEl.getBoundingClientRect();
-      return (
-      // This takes the possible Nav component into account
-      rect.top >= 100 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight));
-    };
-    this.handleVerticalVisibility = () => {
-      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-      if (!this.isElementInViewportVertically()) {
-        this.openDown = scrollTop > this.lastScrollTop;
-      }
-      this.lastScrollTop = Math.max(0, scrollTop);
-    };
-    this.handleHorizontalVisibility = () => {
-      var rect = this.tooltipEl.getBoundingClientRect();
-      const isLeftSideVisible = rect.left >= 0;
-      const isRightSideVisible = rect.right < (window.innerWidth || document.documentElement.clientWidth);
-      if (!isLeftSideVisible || (this.direction !== "right" && this.openRight)) {
-        this.openRight = true;
+      else if (this.breakpoint === "medium" && !this.mql[0].matches) {
+        preferRight = false;
       }
-      else {
-        this.openRight = this.direction === "right";
+      let placement = preferRight ? "top-start" : "top-end";
+      if (this.direction === "left") {
+        placement = "top-end";
       }
-      if (!isRightSideVisible || (this.direction !== "left" && this.openLeft)) {
-        this.openLeft = true;
-      }
-      else {
-        this.openLeft = this.direction === "left";
+      else if (this.direction === "right") {
+        placement = "top-start";
       }
+      const position = await computePosition(this.buttonEl, this.tooltipEl, {
+        placement,
+        middleware: [flip(), shift({ padding: 5 }), arrow({ element: this.arrowEl })],
+      });
+      this.tooltipY = position.y;
+      this.tooltipX = position.x;
+      this.placement = position.placement;
+      this.arrowY = (_a = position.middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.y;
+      this.arrowX = (_b = position.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x;
     };
-    this.openDown = false;
-    this.openLeft = false;
-    this.openRight = false;
+    this.placement = "bottom";
+    this.tooltipY = undefined;
+    this.tooltipX = undefined;
+    this.arrowX = undefined;
+    this.arrowY = undefined;
     this.theme = "";
     this.language = getLanguage();
     this.accessibleLabelDefault = {
@@ -128,7 +128,7 @@ export class DuetTooltip {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
-    this.handleHorizontalVisibility();
+    this.updatePlacement();
   }
   componentDidUpdate() {
     switch (this.focusTarget) {
@@ -154,15 +154,14 @@ export class DuetTooltip {
     clearTimeout(this.scrollTimer);
     this.scrollTimer = setTimeout(() => {
       if (this.active) {
-        this.handleHorizontalVisibility();
-        this.handleVerticalVisibility();
+        this.updatePlacement();
       }
     }, 100);
   }
   handleWindowResize() {
     clearTimeout(this.resizeTimer);
     this.resizeTimer = setTimeout(() => {
-      this.handleHorizontalVisibility();
+      this.updatePlacement();
     }, 100);
   }
   handleDocumentClick(e) {
@@ -177,11 +176,10 @@ export class DuetTooltip {
   }
   async handleActiveChange(newActiveValue) {
     if (newActiveValue) {
-      this.handleHorizontalVisibility();
-      this.openDown = !this.isElementInViewportVertically();
+      this.updatePlacement();
     }
     else {
-      setTimeout(() => (this.openDown = false), 300);
+      setTimeout(() => this.updatePlacement(), 300);
     }
   }
   /**
@@ -195,23 +193,27 @@ export class DuetTooltip {
       // top of other tooltips and the header.
       zIndex: this.active ? "201" : "",
     };
+    const positionStyles = {
+      top: `${this.tooltipY}px`,
+      left: `${this.tooltipX}px`,
+      display: "block",
+    };
+    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("div", { ref: element => (this.tooltipEl = element), class: {
+      : this.accessibleLabel))), h("div", { ref: element => (this.tooltipEl = element), style: positionStyles, class: {
         "duet-tooltip": true,
-        "duet-mq-large": this.breakpoint === "large",
-        "duet-mq-medium": this.breakpoint === "medium",
         "duet-theme-turva": this.theme === "turva",
-        "duet-tooltip-down": this.openDown,
         "duet-tooltip-has-label": !!this.label,
-        "duet-tooltip-left": this.openLeft,
-        "duet-tooltip-right": this.openRight,
         "duet-tooltip-active": this.active === true,
-      }, onClick: e => e.stopPropagation(), onKeyDown: this.handleKeyDown, onFocusout: this.handleFocusOut }, h("div", { ref: element => (this.scrollableEl = element), class: "duet-tooltip-scrollable", tabindex: "0", id: this.tooltipId }, h("slot", null)), h("button", { type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick }, h("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", null, this.accessibleCloseLabel)))));
+      }, onClick: e => e.stopPropagation(), onKeyDown: this.handleKeyDown, onFocusout: this.handleFocusOut }, h("div", { ref: element => (this.scrollableEl = element), class: "duet-tooltip-scrollable", tabindex: "0", id: this.tooltipId }, h("slot", null)), h("div", { ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: arrowStyles }, h("div", { class: { "arrow-container": true, [this.placement]: true } })), h("button", { type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick }, h("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", null, this.accessibleCloseLabel)))));
   }
   static get is() { return "duet-tooltip"; }
   static get encapsulation() { return "shadow"; }
@@ -515,9 +517,11 @@ export class DuetTooltip {
   }
   static get states() {
     return {
-      "openDown": {},
-      "openLeft": {},
-      "openRight": {}
+      "placement": {},
+      "tooltipY": {},
+      "tooltipX": {},
+      "arrowX": {},
+      "arrowY": {}
     };
   }
   static get elementRef() { return "element"; }

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

@@ -130,6 +130,9 @@ export class DuetUpload {
         const fileItem = this.files.get(item);
         fileItem[key] = value;
         this.files.set(item, fileItem);
+        if (this.external && key !== "url") {
+          this.trackProgress(item, key === "uploaded");
+        }
       }
       catch (e) {
         // if a users tries to update entries on a file that doesn't exist,
@@ -496,7 +499,7 @@ export class DuetUpload {
         inProgress: "Lähetetään {filesUploaded} lähetettävästä {filesTotal} tiedostosta",
         inProgressWithErrors: "Lähetetään {filesInProgress} tiedostoa, lähetetty {filesUploaded} lähetettävästä {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheitä",
         done: "Kaikki {filesTotal} tiedostoa lähetetty onnistuneesti",
-        doneWithErrors: "Lähetys valmis, {filesUploaded} tiedostoa on lähetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheitä",
+        doneWithErrors: "Lataus valmis, {filesUploaded} tiedostoa ladattu onnistuneesti, {filesWithErrors} tiedostossa oli virheitä",
         files: "tiedostot",
         file: "tiedosto",
       },
@@ -1075,13 +1078,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\"L\u00E4hetys valmis, {filesUploaded} tiedostoa on l\u00E4hetetty 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} 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": "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        \"L\u00E4hetys valmis, {filesUploaded} tiedostoa on l\u00E4hetetty 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} 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  }"
       },
       "statusMessageLabel": {
         "type": "string",

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

@@ -5,13 +5,19 @@ import { h } from "@stencil/core";
 import { getLocaleString } from "../../utils/language-utils";
 import { getI18nError } from "./errorcodes.utils";
 import { formatBytes } from "./upload.helpers";
+//tiedosto latautuu
+const fileUploadingInfo = {
+  fi: "Tiedosto latautuu",
+  sv: "Filen laddas upp",
+  en: "File is uploading",
+};
 export 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 })));
+        return (h("span", { class: "duet-upload-item-name", role: "status" }, 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("visually-hidden", null, h("duet-paragraph", null, getLocaleString(fileUploadingInfo))), 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":
@@ -27,6 +33,6 @@ export const UploadItem = ({ data, showLinks, type, actions, errorCodes, theme,
   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)} ` }));
+    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)} `, accessibleTitle: false }));
   }))));
 };

package/lib/collection/utils/token-utils.js

@@ -103,6 +103,14 @@ export function getFontSizeByName(name) {
 export function getFontWeightByName(name) {
   return getTokenByName("fontWeight", name);
 }
+export function rgbaColorFromRgb(color, opacity) {
+  if (!color || (opacity !== 0 && !opacity)) {
+    return undefined;
+  }
+  const f = color.split(",");
+  const R = parseInt(f[0].slice(4)), G = parseInt(f[1]), B = parseInt(f[2]);
+  return `rgba(${R},${G},${B},${opacity})`;
+}
 export function shadeRGBColor(color, percent) {
   const f = color.split(","), t = percent < 0 ? 0 : 255, p = percent < 0 ? percent * -1 : percent;
   let R = parseInt(f[0].slice(4)), G = parseInt(f[1]), B = parseInt(f[2]);

package/lib/dist-custom-elements/duet-action-button.js

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

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-57b9edb8.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-5119f1dc.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

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

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

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

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-2ff017a8.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-efa5255b.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$2 } from './p-a6f793fc.js';
+import { d as defineCustomElement$2 } from './p-67365843.js';
 
 const duetBreadcrumbCss = "*,*::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-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;font-weight:inherit;color:inherit;text-decoration:none}.duet-breadcrumb:focus{outline:0}:host(.user-is-tabbing) .duet-breadcrumb: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-breadcrumb.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58)}";
 

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

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-2ff017a8.js';
+import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-efa5255b.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { a as getLocaleString } from './p-076452be.js';
-import { d as defineCustomElement$2 } from './p-a6f793fc.js';
+import { d as defineCustomElement$2 } from './p-67365843.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
 

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

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

package/lib/dist-custom-elements/duet-callout.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DuetCallout extends Components.DuetCallout, HTMLElement {}
+export const DuetCallout: {
+  prototype: DuetCallout;
+  new (): DuetCallout;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,75 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, d as Host } from './p-efa5255b.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { d as defineCustomElement$3 } from './p-67365843.js';
+import { d as defineCustomElement$2 } from './p-5183d2cf.js';
+
+const duetCalloutCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}blockquote,figure{margin:0}.duet-callout{margin-bottom:28px !important;display:flex;align-items:center;justify-content:center;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-callout .container{display:flex;flex-direction:column;gap:8px;align-items:center;max-width:688px;text-align:center}.duet-callout .callout-icon{width:50px;padding-bottom:8px}.duet-callout .author{color:rgb(0, 41, 77)}.duet-callout.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\"}.duet-callout.duet-theme-turva .author{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}";
+
+const DuetCallout$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.hasAuthorSlot = false;
+    this.theme = "";
+    this.margin = "auto";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.hasAuthorSlot = !!this.element.querySelector('[slot="author"]');
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const icon = `<svg viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.6591 0.557547L9.2031 2.33355C7.0911 5.21355 6.1311 7.18155 5.8431 8.90955C7.4751 9.34155 8.7231 10.5415 8.7231 12.6535C8.7231 15.2935 6.9471 16.9255 4.6431 16.9255C2.0511 16.9255 0.227096 15.1975 0.227096 12.2695C0.227096 8.28555 2.3871 4.34955 6.6591 0.557547ZM17.9871 8.95755C19.6191 9.34155 20.8671 10.5415 20.8671 12.6535C20.8671 15.2935 19.1391 16.9255 16.8351 16.9255C14.2431 16.9255 12.4191 15.1975 12.4191 12.2695C12.4191 8.28555 14.5791 4.34955 18.8511 0.557547L21.3951 2.33355C19.2351 5.21355 18.3231 7.18155 17.9871 8.95755Z"/>
+    </svg>
+    `;
+    return (h(Host, null, h("div", { class: {
+        "duet-callout": true,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-m-0": this.margin === "none",
+      } }, h("figure", { class: "container" }, h("duet-icon", { class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", null, h("duet-paragraph", { variation: "intro", weight: "semi-bold", margin: "none", theme: this.theme }, h("slot", null))), this.hasAuthorSlot && (h("figcaption", { class: "author" }, h("span", null, "\u2014 "), h("span", null, h("slot", { name: "author" }))))))));
+  }
+  get element() { return this; }
+  static get style() { return duetCalloutCss; }
+}, [1, "duet-callout", {
+    "theme": [1025],
+    "margin": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-callout", "duet-icon", "duet-paragraph"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-callout":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetCallout$1);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-paragraph":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetCallout = DuetCallout$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetCallout, defineCustomElement };

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

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