@duetds/components 4.30.0 → 4.33.0

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

@@ -29,25 +29,35 @@ export class DuetTooltip {
      */
     this.language = getLanguage();
     /**
-     * Adds accessible label for the info icon that is only shown for screen
-     * readers. This property is always required to create an accessible interface!
+     * Default language strings for the accessibleLabel
      * @default {fi: "Näytä lisätietoja", en: "See more information", sv: "Se mer information"}
      */
-    this.accessibleLabel = getLocaleString({
+    this.accessibleLabelDefault = {
       fi: "Näytä lisätietoja",
       en: "Show more information",
       sv: "Visa mer tilläggsuppgifter",
-    }, this.language);
+    };
     /**
-     * Adds accessible label for the close icon that is only shown for screen
-     * readers. This property is always required to create an accessibly interface!
+     * Adds accessible label for the info icon that is only shown for screen
+     * readers. This property is always required to create an accessible interface!
+     * @default {fi: "Näytä lisätietoja", en: "See more information", sv: "Se mer information"}
+     */
+    this.accessibleLabel = getLocaleString(this.accessibleLabelDefault, this.language);
+    /**
+     * Default language strings for the accessibleCloseLabel
      * @default {fi: "Sulje lisätiedot", en: "Close details", sv: "Stäng detaljer"}
      */
-    this.accessibleCloseLabel = getLocaleString({
+    this.accessibleCloseLabelDefault = {
       fi: "Sulje lisätiedot",
       en: "Close details",
       sv: "Stäng tilläggsuppgifter",
-    }, this.language);
+    };
+    /**
+     * Adds accessible label for the close icon that is only shown for screen
+     * readers. This property is always required to create an accessibly interface!
+     * @default {fi: "Sulje lisätiedot", en: "Close details", sv: "Stäng detaljer"}
+     */
+    this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefault, this.language);
     /**
      * Label of the tooltip. If used, replaces the accessibleLabel option.
      */
@@ -270,11 +280,11 @@ export class DuetTooltip {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
           }, {
-            "text": "\"fi\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"fi\""
           }],
         "text": "The currently active language. This setting changes the accessible labels to match the\nchosen language."
       },
@@ -282,6 +292,32 @@ export class DuetTooltip {
       "reflect": false,
       "defaultValue": "getLanguage()"
     },
+    "accessibleLabelDefault": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{fi: \"N\u00E4yt\u00E4 lis\u00E4tietoja\", en: \"See more information\", sv: \"Se mer information\"}"
+          }],
+        "text": "Default language strings for the accessibleLabel"
+      },
+      "attribute": "accessible-label-default",
+      "reflect": false,
+      "defaultValue": "{\n    fi: \"N\u00E4yt\u00E4 lis\u00E4tietoja\",\n    en: \"Show more information\",\n    sv: \"Visa mer till\u00E4ggsuppgifter\",\n  }"
+    },
     "accessibleLabel": {
       "type": "string",
       "mutable": false,
@@ -294,14 +330,14 @@ export class DuetTooltip {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"N\u00E4yt\u00E4 lis\u00E4tietoja\", en: \"See more information\", sv: \"Se mer information\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"N\u00E4yt\u00E4 lis\u00E4tietoja\", en: \"See more information\", sv: \"Se mer information\"}"
           }],
         "text": "Adds accessible label for the info icon that is only shown for screen\nreaders. This property is always required to create an accessible interface!"
       },
       "attribute": "accessible-label",
       "reflect": false,
-      "defaultValue": "getLocaleString(\n    {\n      fi: \"N\u00E4yt\u00E4 lis\u00E4tietoja\",\n      en: \"Show more information\",\n      sv: \"Visa mer till\u00E4ggsuppgifter\",\n    },\n    this.language\n  )"
+      "defaultValue": "getLocaleString(this.accessibleLabelDefault, this.language)"
     },
     "accessibleInputLabel": {
       "type": "string",
@@ -315,14 +351,40 @@ export class DuetTooltip {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Adds a prefix to the accessible label.\nUsed internally by input components to add more context to the tooltip.",
-            "name": "internal"
+            "name": "internal",
+            "text": "Adds a prefix to the accessible label.\nUsed internally by input components to add more context to the tooltip."
           }],
         "text": ""
       },
       "attribute": "accessible-input-label",
       "reflect": false
     },
+    "accessibleCloseLabelDefault": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{fi: \"Sulje lis\u00E4tiedot\", en: \"Close details\", sv: \"St\u00E4ng detaljer\"}"
+          }],
+        "text": "Default language strings for the accessibleCloseLabel"
+      },
+      "attribute": "accessible-close-label-default",
+      "reflect": false,
+      "defaultValue": "{\n    fi: \"Sulje lis\u00E4tiedot\",\n    en: \"Close details\",\n    sv: \"St\u00E4ng till\u00E4ggsuppgifter\",\n  }"
+    },
     "accessibleCloseLabel": {
       "type": "string",
       "mutable": false,
@@ -335,14 +397,14 @@ export class DuetTooltip {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Sulje lis\u00E4tiedot\", en: \"Close details\", sv: \"St\u00E4ng detaljer\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Sulje lis\u00E4tiedot\", en: \"Close details\", sv: \"St\u00E4ng detaljer\"}"
           }],
         "text": "Adds accessible label for the close icon that is only shown for screen\nreaders. This property is always required to create an accessibly interface!"
       },
       "attribute": "accessible-close-label",
       "reflect": false,
-      "defaultValue": "getLocaleString(\n    {\n      fi: \"Sulje lis\u00E4tiedot\",\n      en: \"Close details\",\n      sv: \"St\u00E4ng till\u00E4ggsuppgifter\",\n    },\n    this.language\n  )"
+      "defaultValue": "getLocaleString(this.accessibleCloseLabelDefault, this.language)"
     },
     "label": {
       "type": "string",

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

@@ -31,25 +31,35 @@ export class DuetTray {
      */
     this.language = getLanguage();
     /**
-     * Accessible label that is shown for screen reader users in the expandable
-     * close toggle. Not visible for normal users.
+     * Defaults for accessibleCloseLabel
      * @default {fi: "Sulje", en: "Close", sv: "Stänga"}
      */
-    this.accessibleCloseLabel = getLocaleString({
+    this.accessibleCloseLabelDefaults = {
       fi: "Sulje",
       en: "Close",
       sv: "Stäng",
-    }, this.language);
+    };
     /**
      * Accessible label that is shown for screen reader users in the expandable
-     * open toggle. Not visible for normal users.
+     * close toggle. Not visible for normal users.
+     * @default {fi: "Sulje", en: "Close", sv: "Stänga"}
+     */
+    this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, this.language);
+    /**
+     * Defaults for accessibleOpenLabel
      * @default {fi: "Avaa", en: "Open", sv: "Öppen"}
      */
-    this.accessibleOpenLabel = getLocaleString({
+    this.accessibleOpenLabelDefaults = {
       fi: "Avaa",
       en: "Open",
       sv: "Öppna",
-    }, this.language);
+    };
+    /**
+     * Accessible label that is shown for screen reader users in the expandable
+     * open toggle. Not visible for normal users.
+     * @default {fi: "Avaa", en: "Open", sv: "Öppen"}
+     */
+    this.accessibleOpenLabel = getLocaleString(this.accessibleOpenLabelDefaults, this.language);
     /**
      * Theme of the info panel.
      */
@@ -151,11 +161,11 @@ export class DuetTray {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
           }, {
-            "text": "\"fi\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"fi\""
           }],
         "text": "The currently active language. This setting changes the accessible labels to match the\nchosen language."
       },
@@ -163,6 +173,32 @@ export class DuetTray {
       "reflect": false,
       "defaultValue": "getLanguage()"
     },
+    "accessibleCloseLabelDefaults": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{fi: \"Sulje\", en: \"Close\", sv: \"St\u00E4nga\"}"
+          }],
+        "text": "Defaults for accessibleCloseLabel"
+      },
+      "attribute": "accessible-close-label-default",
+      "reflect": false,
+      "defaultValue": "{\n    fi: \"Sulje\",\n    en: \"Close\",\n    sv: \"St\u00E4ng\",\n  }"
+    },
     "accessibleCloseLabel": {
       "type": "string",
       "mutable": false,
@@ -175,14 +211,40 @@ export class DuetTray {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Sulje\", en: \"Close\", sv: \"St\u00E4nga\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Sulje\", en: \"Close\", sv: \"St\u00E4nga\"}"
           }],
         "text": "Accessible label that is shown for screen reader users in the expandable\nclose toggle. Not visible for normal users."
       },
       "attribute": "accessible-close-label",
       "reflect": false,
-      "defaultValue": "getLocaleString(\n    {\n      fi: \"Sulje\",\n      en: \"Close\",\n      sv: \"St\u00E4ng\",\n    },\n    this.language\n  )"
+      "defaultValue": "getLocaleString(this.accessibleCloseLabelDefaults, this.language)"
+    },
+    "accessibleOpenLabelDefaults": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{fi: \"Avaa\", en: \"Open\", sv: \"\u00D6ppen\"}"
+          }],
+        "text": "Defaults for accessibleOpenLabel"
+      },
+      "attribute": "accessible-open-label-default",
+      "reflect": false,
+      "defaultValue": "{\n    fi: \"Avaa\",\n    en: \"Open\",\n    sv: \"\u00D6ppna\",\n  }"
     },
     "accessibleOpenLabel": {
       "type": "string",
@@ -196,14 +258,14 @@ export class DuetTray {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Avaa\", en: \"Open\", sv: \"\u00D6ppen\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Avaa\", en: \"Open\", sv: \"\u00D6ppen\"}"
           }],
         "text": "Accessible label that is shown for screen reader users in the expandable\nopen toggle. Not visible for normal users."
       },
       "attribute": "accessible-open-label",
       "reflect": false,
-      "defaultValue": "getLocaleString(\n    {\n      fi: \"Avaa\",\n      en: \"Open\",\n      sv: \"\u00D6ppna\",\n    },\n    this.language\n  )"
+      "defaultValue": "getLocaleString(this.accessibleOpenLabelDefaults, this.language)"
     },
     "theme": {
       "type": "string",

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

@@ -0,0 +1,217 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, h, Host, Prop, State, Watch } from "@stencil/core";
+export class DuetUploadAriaStatus {
+  constructor() {
+    /**
+     * State() variables
+     */
+    this.statusMessage = null;
+    /**
+     * State() variables
+     */
+    this.statusMessageLabel = null;
+    /**
+     * Adds accessible label that is read aloud
+     */
+    this.accessibleAriaLive = "polite";
+    /**
+     * valid file amount
+     */
+    this.valid = undefined;
+    /**
+     * total files
+     */
+    this.total = undefined;
+    /**
+     * invalid file amount
+     */
+    this.invalid = undefined;
+    /**
+     * valid file amount
+     */
+    this.inprogress = undefined;
+    /**
+     * Component lifecycle events.
+     */
+    this.replacePlaceHolders = (statusString) => {
+      const addFiles = (amount) => {
+        return amount > 1 ? `${amount} ${this.statusMessageLabel.files}` : `${amount} ${this.statusMessageLabel.file}`;
+      };
+      return statusString
+        .replace("{filesUploaded}", addFiles(this.valid))
+        .replace("{filesInProgress}", addFiles(this.inprogress))
+        .replace("{filesTotal}", addFiles(this.total))
+        .replace("{filesWithErrors}", addFiles(this.invalid));
+    };
+    this.getStatusMessage = () => {
+      const { done, inProgress, doneWithErrors, inProgressWithErrors } = this.statusMessageLabel;
+      const hasErrors = this.invalid > 0;
+      const isInProgress = this.inprogress > 0;
+      const isInProgressWithErrors = this.inprogress > 0 && hasErrors;
+      const isDone = this.valid === this.total && !isInProgress && !hasErrors;
+      const isDoneWithErrors = this.valid + this.invalid === this.total && !isInProgress;
+      if (isDone) {
+        this.statusMessage = this.replacePlaceHolders(done);
+        return;
+      }
+      else if (isInProgressWithErrors) {
+        this.statusMessage = this.replacePlaceHolders(inProgressWithErrors);
+        return;
+      }
+      else if (isInProgress) {
+        this.statusMessage = this.replacePlaceHolders(inProgress);
+        return;
+      }
+      else if (isDoneWithErrors) {
+        this.statusMessage = this.replacePlaceHolders(doneWithErrors);
+        return;
+      }
+      return;
+    };
+  }
+  watchHandler(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this.getStatusMessage();
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" },
+      h("duet-visually-hidden", null, this.statusMessage)));
+  }
+  static get is() { return "duet-upload-aria-status"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "statusMessageLabel": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "StatusMessage",
+        "resolved": "{ inProgress: string; inProgressWithErrors: string; done: string; doneWithErrors: string; file: string; files: string; }",
+        "references": {
+          "StatusMessage": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "State() variables"
+      },
+      "defaultValue": "null"
+    },
+    "accessibleAriaLive": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"off\" | \"polite\" | \"assertive\"",
+        "resolved": "\"assertive\" | \"off\" | \"polite\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Adds accessible label that is read aloud"
+      },
+      "attribute": "accessible-aria-live",
+      "reflect": false,
+      "defaultValue": "\"polite\""
+    },
+    "valid": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "valid file amount"
+      },
+      "attribute": "valid",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "total": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "total files"
+      },
+      "attribute": "total",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "invalid": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "invalid file amount"
+      },
+      "attribute": "invalid",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "inprogress": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "valid file amount"
+      },
+      "attribute": "inprogress",
+      "reflect": false,
+      "defaultValue": "undefined"
+    }
+  }; }
+  static get states() { return {
+    "statusMessage": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "valid",
+      "methodName": "watchHandler"
+    }, {
+      "propName": "invalid",
+      "methodName": "watchHandler"
+    }, {
+      "propName": "inprogress",
+      "methodName": "watchHandler"
+    }, {
+      "propName": "total",
+      "methodName": "watchHandler"
+    }]; }
+}

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

@@ -0,0 +1,16 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h } from "@stencil/core";
+import { getI18nError } from "./errorcodes.utils";
+export const ErrorItem = ({ data }) => {
+  const { item, error } = data;
+  const { name } = item;
+  const { type } = error;
+  return (h("span", { class: "duet-upload-item-error", role: "status" },
+    h("duet-paragraph", { class: "duet-upload-item-name", color: "danger", margin: "none", weight: "semi-bold" },
+      h("duet-icon", { margin: "none", size: "xx-small", name: "messaging-attachment" }),
+      " ",
+      name),
+    h("duet-paragraph", { class: "duet-upload-item-error-label", size: "small", margin: "none", color: "danger" }, getI18nError(type))));
+};

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

@@ -0,0 +1,8 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h } from "@stencil/core";
+export const ProgressItem = ({ progress, name }) => (h("span", null,
+  h("duet-paragraph", { color: "secondary", margin: "none", size: "small" }, name),
+  h("duet-spacer", { size: "xx-small" }),
+  h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));

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

@@ -0,0 +1,30 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h } from "@stencil/core";
+import { formatBytes } from "./upload.helpers";
+export const SuccessItem = ({ data, showLinks }) => {
+  const { item, size, uploaded, url, meta } = data;
+  const { name } = item;
+  const ContentName = (h("span", { class: "duet-upload-item-name" },
+    h("duet-icon", { margin: "none", size: "xx-small", name: "messaging-attachment" }),
+    h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+    name));
+  const SizeText = (h("span", { class: "duet-upload-item-size", style: { fontSize: "14px", fontWeight: "400" } },
+    "(",
+    formatBytes(size),
+    ")"));
+  const FilenameLine = uploaded && url && showLinks ? (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
+    h("duet-link", { url: url, external: true }, ContentName),
+    h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+    SizeText)) : (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
+    ContentName,
+    h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+    SizeText));
+  const Badges = meta && meta.badges ? (h("span", null,
+    h("duet-spacer", { size: "xx-small" }),
+    meta.badges.map(badgeText => (h("duet-badge", { color: "primary" }, badgeText))))) : undefined;
+  return (h("span", { class: "duet-upload-item-success" },
+    h("div", null, FilenameLine),
+    Badges));
+};