npm - @duetds/components - Versions diffs - 4.30.0 → 4.33.0 - Mend

@duetds/components 4.30.0 → 4.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (424) hide show

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

@@ -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/xhr.helpers.js CHANGED Viewed

@@ -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/utils/fixture-utils.js CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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(/&quot;/g, '"').replace(/&apos;/g, '"');
+  }
+  return string;
+};

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

@@ -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 CHANGED Viewed

@@ -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;