@duetds/components 4.32.0 → 4.33.0

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

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;
@@ -290,6 +314,18 @@ export const DuetTray: {
   new (): DuetTray;
 };
 
+interface DuetUpload extends Components.DuetUpload, HTMLElement {}
+export const DuetUpload: {
+  prototype: 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;