@duetds/components 4.31.0 → 4.33.2

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

@@ -0,0 +1,32 @@
+/*!
+ * Built with Duet Design System
+ */
+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 => {
+    // 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 => {
+      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/mock.helpers.js

@@ -0,0 +1,91 @@
+/*!
+ * Built with Duet Design System
+ */
+/** list of mock File elements to pass the duet-upload component */
+//mock functions to show uploaded file state
+export function getBrowsedFiles() {
+  return fileListFromArray([
+    mockFileCreator({
+      name: "action-add-circle.svg",
+      type: "image/svg",
+      size: 234 * 1000,
+      lastModified: new Date(),
+      error: "400",
+    }),
+    mockFileCreator({
+      name: "action-arrow-down.svg",
+      type: "image/svg",
+      size: 56 * 10000,
+      lastModified: new Date(),
+      error: "401",
+    }),
+    mockFileCreator({
+      name: "action-car-transfer.svg",
+      type: "image/svg",
+      size: 56 * 100,
+      lastModified: new Date(),
+      error: "403",
+    }),
+    mockFileCreator({
+      name: "action-car-enable.svg",
+      type: "image/svg",
+      size: 12 * 100000,
+      lastModified: new Date(),
+      error: "413",
+    }),
+    mockFileCreator({ name: "action-car-disable.svg", type: "image/svg", size: 23 * 1000, lastModified: new Date() }),
+    mockFileCreator({
+      name: "action-buy-insurance.svg",
+      type: "image/svg",
+      size: 11 * 1000,
+      lastModified: new Date(),
+      error: "duet-upload-101",
+    }),
+    mockFileCreator({
+      name: "category-detached-house.svg",
+      type: "image/svg",
+      size: 78 * 1000,
+      lastModified: new Date(),
+    }),
+  ]);
+}
+function mockFileCreator({ name, size, type, lastModified, error = undefined }) {
+  var file;
+  try {
+    const blob = new Blob(["a".repeat(size)], { type });
+    blob["lastModifiedDate"] = lastModified;
+    var file = new File([blob], name, { type });
+  }
+  catch (e) {
+    try {
+      var file = new File(["foo"], name, { type });
+    }
+    catch (e) {
+      var file = { name, size };
+    }
+  }
+  return { file, error };
+}
+function fileListFromArray(files) {
+  const fileMap = new Map();
+  files.forEach(obj => {
+    const isValid = !obj.error;
+    const fileItem = {
+      uid: `${Date.now()}-${Math.random()}`,
+      item: obj.file,
+      size: obj.file.size,
+      valid: isValid,
+      error: {
+        type: isValid ? undefined : obj.error,
+        message: isValid ? undefined : "Random error message",
+        system_message: isValid ? undefined : "Random system error message",
+      },
+      progress: 100,
+      deleted: false,
+      xhr: false,
+      url: `https://cdn.duetds.com/api/icons/2.1.12/lib/assets/${obj.file.name}`,
+    };
+    fileMap.set(obj.file.name, fileItem);
+  });
+  return fileMap;
+}

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/upload-validators.js

@@ -0,0 +1,93 @@
+/*!
+ * Built with Duet Design System
+ */
+import { getLocaleString } from "../../utils/language-utils";
+import { getError } from "./errorcodes.utils";
+export const validateFileExtension = (name, allowedExtensions) => {
+  if (!allowedExtensions) {
+    return true;
+  }
+  const ext = name.split(".");
+  const validExtension = allowedExtensions.split(",");
+  const extension = ext[ext.length - 1];
+  return validExtension.includes(extension);
+};
+export const validateFileMime = (type, allowedMimetypes) => {
+  if (!allowedMimetypes || !type) {
+    return true;
+  }
+  const validMimeTypes = allowedMimetypes.split(",");
+  let valid = false;
+  validMimeTypes.forEach(mimeType => {
+    const allowedTypes = mimeType.split("/");
+    const fileType = type.split("/");
+    if (allowedTypes[0] === fileType[0] && (allowedTypes[1] === fileType[1] || allowedTypes[1] === "*")) {
+      valid = true;
+    }
+  });
+  return valid;
+};
+export const validateFileSize = (size, maxBytes) => {
+  if (!maxBytes || !size) {
+    return true;
+  }
+  return maxBytes >= size;
+};
+export const validateFile = (item, validators) => {
+  const { allowedMimetypes, allowedExtensions, maxBytes } = validators;
+  let valid = false;
+  let errorMessage = getError("default");
+  if (item) {
+    const { name, type, size } = item;
+    const mime = validateFileMime(type, allowedMimetypes);
+    const ext = validateFileExtension(name, allowedExtensions);
+    const bytes = validateFileSize(size, maxBytes);
+    if (!mime) {
+      errorMessage = getError("duet-upload-101");
+    }
+    if (!ext) {
+      errorMessage = getError("duet-upload-100");
+    }
+    if (!bytes) {
+      errorMessage = getError("duet-upload-201");
+    }
+    valid = mime && ext && bytes;
+  }
+  else {
+    valid = false;
+  }
+  return {
+    valid,
+    errorMessage: valid ? undefined : getLocaleString(errorMessage.message),
+    errorSystem: valid ? undefined : errorMessage.system_message,
+    errorType: valid ? undefined : errorMessage.type,
+  };
+};
+export const validateTotalSizeIsAboveMax = (filelist, maxTotalBytes) => {
+  let total = 0;
+  if (maxTotalBytes) {
+    filelist.forEach(item => {
+      if (item.valid && item.size) {
+        total += item.size;
+      }
+    });
+    if (total < maxTotalBytes) {
+      return true;
+    }
+  }
+  return false;
+};
+export const validateTotalAmountIsAboveMax = (filelist, maxFiles) => {
+  let total = 0;
+  if (maxFiles) {
+    filelist.forEach(item => {
+      if (item.valid) {
+        total++;
+      }
+    });
+    if (total > maxFiles) {
+      return true;
+    }
+  }
+  return false;
+};

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

@@ -0,0 +1,13 @@
+/*!
+ * Built with Duet Design System
+ */
+export const formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) {
+    return "0 Bytes";
+  }
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+};

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

@@ -0,0 +1,30 @@
+/*!
+ * Built with Duet Design System
+ */
+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
+  if (headers) {
+    Object.keys(headers).forEach(key => {
+      xhr.setRequestHeader(key, headers[key]);
+    });
+  }
+  if (type === "POST") {
+    xhr.onreadystatechange = () => {
+      // Call a function when the state changes.
+      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status >= 200 && xhr.status < 300) {
+        // Request finished without errors
+        onSuccess(xhr, name, xhr.status);
+      }
+      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status >= 300 && xhr.status < 999) {
+        // Request finished with errors
+        onFailure(xhr, name, xhr.status);
+      }
+    };
+    onProgress(name);
+  }
+  xhr.send(data);
+  return xhr;
+};

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/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

@@ -54,14 +54,17 @@ export const getLocale = (lang) => {
   }
   throw new Error(`Locale for "${lang}" not found`);
 };
-const sanitizeString = (string) => {
+/**
+ * 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("getLocaleString received a string, that didnt parse to json object", string, e);
+      console.log("sanitizeString received a string, that didnt parse to json object", string, e);
     }
   }
   return string;
@@ -73,7 +76,7 @@ const sanitizeString = (string) => {
  * @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);

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);
+};