@duetds/components 4.28.0 → 4.31.0

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

@@ -1,7 +1,10 @@
-import { Component, Prop, Element, Host, Listen, State, h, Watch } from "@stencil/core";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
 import { createID } from "../../utils/create-id";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetTooltip {
   constructor() {
     /**
@@ -21,26 +24,40 @@ export class DuetTooltip {
     /**
      * The currently active language. This setting changes the accessible labels to match the
      * chosen language.
+     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+     * @default "fi"
      */
     this.language = getLanguage();
+    /**
+     * Default language strings for the accessibleLabel
+     * @default {fi: "Näytä lisätietoja", en: "See more information", sv: "Se mer information"}
+     */
+    this.accessibleLabelDefault = {
+      fi: "Näytä lisätietoja",
+      en: "Show more information",
+      sv: "Visa mer tilläggsuppgifter",
+    };
     /**
      * 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({
-      fi: "Näytä lisätietoja",
-      en: "See more information",
-      sv: "Se mer information",
-    }, this.language);
+    this.accessibleLabel = getLocaleString(this.accessibleLabelDefault, 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 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 detaljer",
-    }, this.language);
+      sv: "Stäng tilläggsuppgifter",
+    };
+    /**
+     * 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.
      */
@@ -262,13 +279,45 @@ export class DuetTooltip {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "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"
+          }, {
+            "text": "\"fi\"",
+            "name": "default"
+          }],
         "text": "The currently active language. This setting changes the accessible labels to match the\nchosen language."
       },
       "attribute": "language",
       "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": [{
+            "text": "{fi: \"N\u00E4yt\u00E4 lis\u00E4tietoja\", en: \"See more information\", sv: \"Se mer information\"}",
+            "name": "default"
+          }],
+        "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,
@@ -280,12 +329,15 @@ export class DuetTooltip {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "{fi: \"N\u00E4yt\u00E4 lis\u00E4tietoja\", en: \"See more information\", sv: \"Se mer information\"}",
+            "name": "default"
+          }],
         "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: \"See more information\",\n      sv: \"Se mer information\",\n    },\n    this.language\n  )"
+      "defaultValue": "getLocaleString(this.accessibleLabelDefault, this.language)"
     },
     "accessibleInputLabel": {
       "type": "string",
@@ -307,6 +359,32 @@ export class DuetTooltip {
       "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": [{
+            "text": "{fi: \"Sulje lis\u00E4tiedot\", en: \"Close details\", sv: \"St\u00E4ng detaljer\"}",
+            "name": "default"
+          }],
+        "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,
@@ -318,12 +396,15 @@ export class DuetTooltip {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "{fi: \"Sulje lis\u00E4tiedot\", en: \"Close details\", sv: \"St\u00E4ng detaljer\"}",
+            "name": "default"
+          }],
         "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 detaljer\",\n    },\n    this.language\n  )"
+      "defaultValue": "getLocaleString(this.accessibleCloseLabelDefault, this.language)"
     },
     "label": {
       "type": "string",

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

@@ -1,8 +1,11 @@
-import { Component, Element, Prop, State, Listen, h, Fragment } from "@stencil/core";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+/*!
+ * Built with Duet Design System
+ */
 import { sizeHeader } from "@duetds/tokens";
+import { Component, Element, Fragment, h, Listen, Prop, State } from "@stencil/core";
 import { createID } from "../../utils/create-id";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
 const topOffset = parseFloat(sizeHeader) * 2 * 16; // convert rem -> px
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
@@ -23,26 +26,40 @@ export class DuetTray {
     /**
      * The currently active language. This setting changes the accessible labels to match the
      * chosen language.
+     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+     * @default "fi"
      */
     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änga",
-    }, this.language);
+      sv: "Stäng",
+    };
     /**
      * 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: "Öppen",
-    }, this.language);
+      sv: "Öppna",
+    };
+    /**
+     * 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.
      */
@@ -143,13 +160,45 @@ export class DuetTray {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "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"
+          }, {
+            "text": "\"fi\"",
+            "name": "default"
+          }],
         "text": "The currently active language. This setting changes the accessible labels to match the\nchosen language."
       },
       "attribute": "language",
       "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": [{
+            "text": "{fi: \"Sulje\", en: \"Close\", sv: \"St\u00E4nga\"}",
+            "name": "default"
+          }],
+        "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,
@@ -161,12 +210,41 @@ export class DuetTray {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "{fi: \"Sulje\", en: \"Close\", sv: \"St\u00E4nga\"}",
+            "name": "default"
+          }],
         "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\u00E4nga\",\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": [{
+            "text": "{fi: \"Avaa\", en: \"Open\", sv: \"\u00D6ppen\"}",
+            "name": "default"
+          }],
+        "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",
@@ -179,12 +257,15 @@ export class DuetTray {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "{fi: \"Avaa\", en: \"Open\", sv: \"\u00D6ppen\"}",
+            "name": "default"
+          }],
         "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: \"\u00D6ppen\",\n    },\n    this.language\n  )"
+      "defaultValue": "getLocaleString(this.accessibleOpenLabelDefaults, this.language)"
     },
     "theme": {
       "type": "string",

package/lib/collection/components/duet-visually-hidden/duet-visually-hidden.js

@@ -1,4 +1,7 @@
-import { Component, Host, h } from "@stencil/core";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, h, Host } from "@stencil/core";
 export class DuetVisuallyHidden {
   /**
    * render() function

package/lib/collection/global/duet-global.js

@@ -1,3 +1,6 @@
+/*!
+ * Built with Duet Design System
+ */
 const TAB_KEY = 9;
 export default () => {
   function listenKeys(event) {

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

@@ -1,3 +1,6 @@
+/*!
+ * Built with Duet Design System
+ */
 export function chr4() {
   return Math.random().toString(16).slice(-4);
 }

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

@@ -1,3 +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";
@@ -34,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") {
@@ -42,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" />
@@ -67,14 +72,15 @@ const htmlFragment = (fixtureHtml, theme = "", minHeight = "0px") => {
       }
 
     </style>
-    <link rel="stylesheet" href="http://localhost:5678/fonts/lib/${fontFile}.css" />
-    <link rel="stylesheet" href="http://localhost:5678/tokens/lib/tokens.custom-properties.css" />
-    <link rel="stylesheet" href="http://localhost:5678/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}
   </body>
 </html>
+
 `;
 };
 // getFixturesAndTest returns fixtures object and creates synthetic tests
@@ -93,10 +99,14 @@ export const fixtureTests = (componentFixtures, minHeight) => {
       const html = componentFixtures.fixtures[fixtureName];
       it(`${fixtureName} renders correctly with Turva theme`, async () => {
         const page = await createPage(htmlFragment(html, "turva", minHeight));
+        // Configure the navigation timeout
+        await page.setDefaultNavigationTimeout(0);
         expect(await page.screenshot()).toMatchImageSnapshot();
       });
       it(`${fixtureName} renders correctly with Lahitapiola theme`, async () => {
         const page = await createPage(htmlFragment(html, "default", minHeight));
+        // Configure the navigation timeout
+        await page.setDefaultNavigationTimeout(0);
         expect(await page.screenshot()).toMatchImageSnapshot();
       });
     });

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

@@ -1,3 +1,6 @@
+/*!
+ * Built with Duet Design System
+ */
 import { h } from "@stencil/core";
 export const focusElement = (element) => {
   if ("setFocus" in element) {

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

@@ -1 +1,4 @@
+/*!
+ * Built with Duet Design System
+ */
 export {};

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

@@ -1,3 +1,6 @@
+/*!
+ * Built with Duet Design System
+ */
 export default function groupBy(prop, items) {
   const result = {};
   items.forEach(item => {

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

@@ -1,3 +1,30 @@
+/*!
+ * Built with Duet Design System
+ */
+/**
+ * This function restores cursor position after changing input
+ *
+ * @example
+ * const resetCursor = storeAndResetCursor(this.input.selectionStart,this.input.selectionEnd)
+ * this.input.changeValueAndForceUpdateOfCursoPosition()
+ * resetCursor()
+ */
+export function resetCursor(domElement) {
+  if (domElement && domElement.selectionStart) {
+    const start = domElement.selectionStart;
+    const end = domElement.selectionEnd;
+    return function () {
+      if (start === end) {
+        domElement.selectionStart = start;
+        domElement.selectionEnd = end;
+      }
+      else {
+        domElement.setSelectionRange(start, end);
+      }
+    };
+  }
+  return () => console.log("domElement not valid");
+}
 /**
  * Given an input and a regex, remove any characters from the input's value
  * which match the regex, *whilst* maintaining cursor position.

package/lib/collection/utils/is-internet-explorer.js

@@ -1,3 +1,6 @@
+/*!
+ * Built with Duet Design System
+ */
 export default function isInternetExplorer() {
   const ua = navigator.userAgent || navigator.vendor;
   return "documentMode" in document || /Edge/.test(ua);

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

@@ -1,3 +1,6 @@
+/*!
+ * Built with Duet Design System
+ */
 export const isArrowLeftKey = (e) => e.keyCode === 37;
 export const isArrowUpKey = (e) => e.keyCode === 38;
 export const isArrowRightKey = (e) => e.keyCode === 39;

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

@@ -1,3 +1,7 @@
+/*!
+ * Built with Duet Design System
+ */
+import { convertHtmlQuotes } from "./string-utils";
 const localeLookUpTable = {
   fi: "fi-FI",
   en: "en-GB",
@@ -12,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;
   }
@@ -26,8 +30,20 @@ const checkForLanguage = (languageString = currentLanguage) => {
     return defaultLanguage;
   }
 };
-export const getLanguage = (lang) => checkForLanguage(lang);
-// special case where lang can be ALSO be "us" in addition to other types - if user decides to override local language
+/**
+ * Returns the current language as a string representation (taken from html lang attribute)
+ * If language is not fi|sv|en it will default to "fi"
+ * @param {string} lang=fi - "fi" | "sv" | "en"
+ * @default {string} "fi"
+ */
+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"
+ * special case where lang can be ALSO be "us" in addition to other types - if user decides to override local language
+ * @param {string} lang="fi" - "fi" | "sv" | "en" | "us"
+ * @default {object} {locale: "fi-FI", money: "€"}
+ */
 export const getLocale = (lang) => {
   const returnObj = {
     locale: localeLookUpTable[lang],
@@ -38,11 +54,33 @@ export const getLocale = (lang) => {
   }
   throw new Error(`Locale for "${lang}" not found`);
 };
+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);
+    }
+  }
+  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"} | 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"
+ */
 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

@@ -1,3 +1,6 @@
+/*!
+ * Built with Duet Design System
+ */
 function isObject(maybeObj) {
   return Object.prototype.toString.call(maybeObj) === "[object Object]";
 }
@@ -17,7 +20,28 @@ export const parsePossibleJSON = (maybeJSON) => {
   // so we use it here to signal invalid input
   return undefined;
 };
+/**
+ * Format string, via simplistic sprintf equivalent
+ * @example String.format('{0} is super, but {1} is best! {{0}}', 'Duet', 'Coffee'); -> "Duet is super, but Coffee ist best! {0}"
+ *
+ */
+// @ts-ignore
+if (!String.format) {
+  // @ts-ignore
+  String.format = function (format) {
+    var args = Array.prototype.slice.call(arguments, 1);
+    return format.replace(/\{\{|\}\}|\{(\d+)\}/g, function (curlyBrack, index) {
+      return curlyBrack == "{{" ? "{" : curlyBrack == "}}" ? "}" : args[index];
+    });
+  };
+}
 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/test-utils.js

@@ -1,3 +1,6 @@
+/*!
+ * Built with Duet Design System
+ */
 import { newE2EPage } from "@stencil/core/testing";
 export async function createPage(optionsOrHtml) {
   const options = typeof optionsOrHtml === "string" ? { html: optionsOrHtml, viewportWidth: 600 } : optionsOrHtml;

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

@@ -1,3 +1,6 @@
+/*!
+ * Built with Duet Design System
+ */
 export const inheritGlobalTheme = (component) => {
   if (component.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
     component.theme = "turva";

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

@@ -1,3 +1,6 @@
+/*!
+ * Built with Duet Design System
+ */
 import * as tokens from "@duetds/tokens";
 const MATCH_DASH_CASE = /-([a-z])/g;
 function replaceDashCase(g) {

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

@@ -1,3 +1,6 @@
+/*!
+ * Built with Duet Design System
+ */
 export const watchForOptions = (containerEl, tagName, onChange) => {
   let mutation;
   if (typeof MutationObserver !== "undefined") {