@duetds/components 4.30.1 → 4.33.1

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

@@ -1,20 +1,32 @@
 /*!
  * Built with Duet Design System
  */
-import errorcodes from "./errorcodes.json";
+import { getLocaleString } from "../../utils/language-utils";
+import errorCodes from "./errorcodes.json";
 export const getError = (code) => {
   let error = {
     type: undefined,
     system_message: undefined,
     message: undefined,
   };
-  error = errorcodes.filter(errorItem => {
-    return errorItem.type === code;
+  error = errorCodes.filter(errorItem => {
+    // the == is intentional we may be comparing numbers to strings - and that is ok here
+    return errorItem.type == code;
   })[0];
   if (!error) {
-    error = errorcodes.filter(errorItem => {
+    error = errorCodes.filter(errorItem => {
       return errorItem.type === "default";
     })[0];
   }
   return error;
 };
+export const getI18nError = (errorCode) => {
+  const errorFromJson = getError(errorCode);
+  const i18String = getLocaleString(errorFromJson.message);
+  if (i18String === "" || !i18String) {
+    return errorFromJson.system_message;
+  }
+  else {
+    return i18String;
+  }
+};

package/lib/collection/components/duet-upload/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/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/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));
+};

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

@@ -1,12 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-export const makeXhrRequest = (payload, options, onFailure, onSuccess, onProgress) => {
-  const { type, xhr, uri, argument, headers } = Object.assign({
-    type: "POST",
-    argument: null,
-    headers: null,
-  }, options);
+export const makeXhrRequest = ({ payload, options, onFailure, onSuccess, onProgress }) => {
+  const { type = "POST", xhr, uri, argument = null, headers = null } = options;
   xhr.open(type, `${uri}${argument || ""}`, true);
   const { data, name } = payload;
   // headers must be added after open

package/lib/collection/components/duet-upload-aria-status/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;
+    /**
+     * Status labels used in the component
+     */
+    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;
+    /**
+     * Private functions
+     */
+    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": "Status labels used in the component"
+      },
+      "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/utils/fixture-utils.js

@@ -1,6 +1,8 @@
 /*!
  * Built with Duet Design System
  */
+require("dotenv").config();
+const port = process.env.KOA_PROXY_PORT ? parseInt(process.env.KOA_PROXY_PORT) : 3334;
 import * as fs from "fs";
 import * as path from "path";
 import { createPage } from "./test-utils";
@@ -37,7 +39,7 @@ function getAllFixturesFiles(dirPath, fixPath = "fixtures", skipFixture = []) {
 /**
  * Generate automatic fixture testing for jest
  */
-const htmlFragment = (fixtureHtml, theme = "", minHeight = "0px") => {
+const htmlFragment = (fixtureHtml, theme = "", minHeight = "0px", lang = "fi") => {
   let fontFile = "localtapiola";
   let className = "";
   if (theme === "turva") {
@@ -45,7 +47,7 @@ const htmlFragment = (fixtureHtml, theme = "", minHeight = "0px") => {
     className = "duet-theme-turva";
   }
   return `
-<html class="${className}" lang="fi" style="min-height: auto">
+<html class="${className}" lang="${lang}" style="min-height: auto">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -70,9 +72,9 @@ const htmlFragment = (fixtureHtml, theme = "", minHeight = "0px") => {
       }
 
     </style>
-    <link rel="stylesheet" href="http://localhost:3334/fonts/lib/${fontFile}.css" />
-    <link rel="stylesheet" href="http://localhost:3334/tokens/lib/tokens.custom-properties.css" />
-    <link rel="stylesheet" href="http://localhost:3334/css/lib/duet.css" />
+    <link rel="stylesheet" href="http://0.0.0.0:${port}/fonts/lib/${fontFile}.css" />
+    <link rel="stylesheet" href="http://0.0.0.0:${port}/tokens/lib/tokens.custom-properties.css" />
+    <link rel="stylesheet" href="http://0.0.0.0:${port}/css/lib/duet.css" />
   </head>
   <body style="min-height: ${minHeight} !important; margin: 8px">
     ${fixtureHtml}

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

@@ -0,0 +1,12 @@
+/*!
+ * Built with Duet Design System
+ */
+export const debounce = (func, timeout = 50) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(this, args);
+    }, timeout);
+  };
+};

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

@@ -1,6 +1,7 @@
 /*!
  * Built with Duet Design System
  */
+import { convertHtmlQuotes } from "./string-utils";
 const localeLookUpTable = {
   fi: "fi-FI",
   en: "en-GB",
@@ -15,13 +16,13 @@ const localeMonetarySignifierLookUpTable = {
 };
 const defLanguageArray = ["fi", "en", "sv"];
 const defaultLanguage = "fi";
-const currentLanguage = document.documentElement.lang
-  ? document.documentElement.lang.toLowerCase()
-  : defaultLanguage;
+export const getCurrentLanguage = () => {
+  return document.documentElement.lang ? document.documentElement.lang.toLowerCase() : defaultLanguage;
+};
 export const isOfTypeLanguage = (keyInput) => {
   return defLanguageArray.includes(keyInput);
 };
-const checkForLanguage = (languageString = currentLanguage) => {
+const checkForLanguage = (languageString = getCurrentLanguage()) => {
   if (isOfTypeLanguage(languageString)) {
     return languageString;
   }
@@ -35,7 +36,7 @@ const checkForLanguage = (languageString = currentLanguage) => {
  * @param {string} lang=fi - "fi" | "sv" | "en"
  * @default {string} "fi"
  */
-export const getLanguage = (languageString = currentLanguage) => checkForLanguage(languageString);
+export const getLanguage = (languageString = getCurrentLanguage()) => checkForLanguage(languageString);
 /**
  * Returns the current language and locale
  * If language is not fi|sv|en it will default to "fi"
@@ -53,20 +54,36 @@ export const getLocale = (lang) => {
   }
   throw new Error(`Locale for "${lang}" not found`);
 };
+/**
+ * Takes any json object that is passed and/or htmlencoded and converts it to proper json
+ */
+export const sanitizeString = (string) => {
+  const argIsString = typeof string === "string";
+  if (argIsString) {
+    try {
+      return JSON.parse(convertHtmlQuotes(string));
+    }
+    catch (e) {
+      console.log("sanitizeString received a string, that didnt parse to json object", string, e);
+    }
+  }
+  return string;
+};
 /**
  * Returns the current string / object from a given translation object
  * If language is not fi|sv|en it will default to "fi"
  * special case where lang can be ALSO be "us" in addition to other types - if user decides to override local language
- * @param {object} langObject - {fi: "finnish", sv: "swedish", en: "english"}
+ * @param {object} langObject - {fi: "finnish", sv: "swedish", en: "english"} | string will get JSON.parsed
  * @param {boolean} languageOverride = false - in case you want to override the actual language set in html tag
  * @default {object} {locale: "fi-FI", money: "€"}
- * @returns {(string|Object)} given example contains {fi:"something"} and langua===fi this will return "something"
+ * @returns {(string|Object)} given example contains {fi:"something"} and language===fi this will return "something"
  */
 export const getLocaleString = (langObject, languageOverride) => {
+  const obj = sanitizeString(langObject);
   if (languageOverride) {
-    return langObject[checkForLanguage(languageOverride)];
+    return obj[checkForLanguage(languageOverride)];
   }
   else {
-    return langObject[getLanguage()];
+    return obj[getLanguage()];
   }
 };

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

@@ -39,3 +39,9 @@ const MATCH_DISALLOWED_CHARS = /[^a-z0-9áéíóúñüöäå \.,_-]/gim;
 export function sanitizeString(string) {
   return string.replace(MATCH_DISALLOWED_CHARS, "").trim();
 }
+export const convertHtmlQuotes = string => {
+  if (typeof string === "string") {
+    return string.replace(/"/g, '"').replace(/'/g, '"');
+  }
+  return string;
+};

package/lib/collection/utils/watch-options.js

@@ -1,19 +1,41 @@
 /*!
  * Built with Duet Design System
  */
-export const watchForOptions = (containerEl, tagName, onChange) => {
+const watchFor = (containerEl, tagName, onChange, changeHandler, options = {
+  childList: true,
+  subtree: true,
+}) => {
   let mutation;
   if (typeof MutationObserver !== "undefined") {
     mutation = new MutationObserver(mutationList => {
-      onChange(getSelectedOption(mutationList, tagName));
-    });
-    mutation.observe(containerEl, {
-      childList: true,
-      subtree: true,
+      onChange(changeHandler(mutationList, tagName));
     });
+    mutation.observe(containerEl, options);
   }
   return mutation;
 };
+export const watchForOptions = (containerEl, tagName, onChange) => {
+  return watchFor(containerEl, tagName, onChange, getSelectedOption);
+};
+export const watchForElement = (containerEl, tagName, onChange) => {
+  return watchFor(containerEl, tagName, onChange, getElementItem, {
+    childList: true,
+    subtree: true,
+  });
+};
+const getElementItem = (mutationList) => {
+  let addedNode = false;
+  let removedNode = false;
+  mutationList.forEach(mut => {
+    if (mut.addedNodes.length) {
+      addedNode = true;
+    }
+    if (mut.removedNodes.length) {
+      removedNode = true;
+    }
+  });
+  return { addedNode, removedNode, mutationList };
+};
 const getSelectedOption = (mutationList, tagName) => {
   let newOption;
   mutationList.forEach(mut => {
@@ -31,3 +53,10 @@ export const findCheckedOption = (el, tagName) => {
   const options = el.tagName === tagName.toUpperCase() ? [el] : Array.from(el.querySelectorAll(tagName));
   return options.find((o) => o.checked === true);
 };
+export const findErrorItems = (el, tagName) => {
+  if (el.nodeType !== 1) {
+    return undefined;
+  }
+  const options = el.tagName === tagName.toUpperCase() ? [el] : Array.from(el.querySelectorAll(tagName));
+  return options.find((o) => o.checked === true);
+};

package/lib/custom-elements-bundle/index.d.ts

@@ -74,6 +74,24 @@ export const DuetDivider: {
   new (): DuetDivider;
 };
 
+interface DuetEditableTable extends Components.DuetEditableTable, HTMLElement {}
+export const DuetEditableTable: {
+  prototype: DuetEditableTable;
+  new (): DuetEditableTable;
+};
+
+interface DuetEditableTableButton extends Components.DuetEditableTableButton, HTMLElement {}
+export const DuetEditableTableButton: {
+  prototype: DuetEditableTableButton;
+  new (): DuetEditableTableButton;
+};
+
+interface DuetEditableTableItem extends Components.DuetEditableTableItem, HTMLElement {}
+export const DuetEditableTableItem: {
+  prototype: DuetEditableTableItem;
+  new (): DuetEditableTableItem;
+};
+
 interface DuetEmptyState extends Components.DuetEmptyState, HTMLElement {}
 export const DuetEmptyState: {
   prototype: DuetEmptyState;
@@ -200,6 +218,12 @@ export const DuetParagraph: {
   new (): DuetParagraph;
 };
 
+interface DuetProgress extends Components.DuetProgress, HTMLElement {}
+export const DuetProgress: {
+  prototype: DuetProgress;
+  new (): DuetProgress;
+};
+
 interface DuetRadio extends Components.DuetRadio, HTMLElement {}
 export const DuetRadio: {
   prototype: DuetRadio;
@@ -296,6 +320,12 @@ export const DuetUpload: {
   new (): DuetUpload;
 };
 
+interface DuetUploadAriaStatus extends Components.DuetUploadAriaStatus, HTMLElement {}
+export const DuetUploadAriaStatus: {
+  prototype: DuetUploadAriaStatus;
+  new (): DuetUploadAriaStatus;
+};
+
 interface DuetVisuallyHidden extends Components.DuetVisuallyHidden, HTMLElement {}
 export const DuetVisuallyHidden: {
   prototype: DuetVisuallyHidden;