@duetds/components 4.33.1 → 4.33.2

package/hydrate/index.js

@@ -4700,19 +4700,8 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
   /*hydrateAppClosure start*/
 
 
-var process = require('process');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var process__default = /*#__PURE__*/_interopDefaultLegacy(process);
-
-var global$1 = (typeof global !== "undefined" ? global :
-  typeof self !== "undefined" ? self :
-  typeof window !== "undefined" ? window : {});
-
 const NAMESPACE = 'duet';
 const BUILD = /* duet */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, cssVarShim: false, devTools: false, disconnectedCallback: true, dynamicImportShim: false, element: false, event: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, safari10: false, scoped: true, scriptDataOpts: false, shadowDelegatesFocus: true, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
-const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"2.2.4"};
 
 const TAB_KEY = 9;
 var appGlobalScript = () => {
@@ -4753,7 +4742,7 @@ function forceUpdate() {}
 
 function hydrateApp(e, t, o, n, s) {
  function l() {
-  if (global$1.clearTimeout(p), i.clear(), r.clear(), !h) {
+  if (global.clearTimeout(p), i.clear(), r.clear(), !h) {
    h = !0;
    try {
     t.clientHydrateAnnotations && insertVdomAnnotations(e.document, t.staticComponents), 
@@ -4848,7 +4837,7 @@ function hydrateApp(e, t, o, n, s) {
   }, e.document.createElementNS = function t(o, n) {
    const s = $.call(e.document, o, n);
    return f(s), s;
-  }, p = global$1.setTimeout((function L() {
+  }, p = global.setTimeout((function L() {
    a(`Hydrate exceeded timeout${function e(t) {
     return Array.from(t).map(waitingOnElementMsg);
    }(d)}`);
@@ -5516,7 +5505,7 @@ const cmpModules = new Map, getModule = e => {
   });
  }
 }, win = window, doc = win.document, writeTask = e => {
- process__default['default'].nextTick((() => {
+ process.nextTick((() => {
   try {
    e();
   } catch (e) {
@@ -9534,6 +9523,11 @@ function isGridItem(element) {
 class DuetGrid {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.mql = [
+      window.matchMedia(media_query_large.replace(/'/g, "")),
+      window.matchMedia(media_query_medium.replace(/'/g, "")),
+      window.matchMedia(media_query_small.replace(/'/g, "")),
+    ];
     this.distributeFormElement = false;
     /**
      * Enable or disable the automatic responsive behaviour of the grid component.
@@ -9588,10 +9582,15 @@ class DuetGrid {
     this.mutationO = watchForOptions(el, "duet-grid-item", () => {
       this.updateGridItems();
     });
+    // the next two functions are used to watch for changes in the grid items, and are process intensive - so only run when needed
     if (this.distributeFormElement) {
       this.mutation1 = watchForElement(el, "duet-input", () => {
         this.updateGridItemsWithInputFields();
       });
+      // listen for potential mediaquery changes and reset layout
+      for (let i = 0; i < this.mql.length; i++) {
+        this.mql[i].addEventListener("change", this.updateGridItemsWithInputFields.bind(this));
+      }
     }
     this.updateGridItems();
   }
@@ -9604,6 +9603,10 @@ class DuetGrid {
       this.mutation1.disconnect();
       this.mutation1 = undefined;
     }
+    // listen for potential mediaquery changes and reset layout
+    for (let i = 0; i < this.mql.length; i++) {
+      this.mql[i].removeEventListener("change", this.updateGridItemsWithInputFields.bind(this));
+    }
   }
   /**
    * Local methods
@@ -9617,6 +9620,8 @@ class DuetGrid {
   }
   async updateGridItemsWithInputFields() {
     const items = Array.from(this.element.children).filter(isGridItem);
+    // if layout changes to columns instead of row, remove all padding
+    const hasColumnLayout = window ? window.getComputedStyle(this.element).flexDirection === "column" : false;
     let maxHeight = 0;
     const sizes = [];
     items.forEach(item => {
@@ -9628,10 +9633,10 @@ class DuetGrid {
     items.forEach(item => {
       const inputErrorDom = item.querySelector("span.duet-input-error");
       const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
-      if (height < maxHeight) {
+      if (height < maxHeight && !hasColumnLayout) {
         item.setAttribute("style", `padding-bottom: ${maxHeight - height}px;`);
       }
-      else if (height === maxHeight) {
+      else if (height === maxHeight || hasColumnLayout) {
         item.setAttribute("style", `padding-bottom: 0px;`);
       }
     });
@@ -10734,86 +10739,6 @@ class DuetHero {
   }; }
 }
 
-const cleanupSvg = (svgContent) => {
-  if (typeof document === "undefined" || !svgContent) {
-    return;
-  }
-  const div = document.createElement("div");
-  div.innerHTML = svgContent;
-  // setup this way to ensure it works on our buddy IE
-  for (let i = div.childNodes.length - 1; i >= 0; i--) {
-    const child = div.childNodes[i];
-    if (child.nodeName.toLowerCase() !== "svg") {
-      div.removeChild(div.childNodes[i]);
-    }
-  }
-  return div.firstElementChild;
-};
-const isValid = (elm) => {
-  if (elm.nodeName.toLowerCase() === "script") {
-    return false;
-  }
-  for (let i = 0; i < elm.attributes.length; i++) {
-    const attribute = elm.attributes[i];
-    if (attribute.name.toLowerCase().indexOf("on") === 0) {
-      return false;
-    }
-  }
-  if (elm.children) {
-    for (let i = 0; i < elm.children.length; i++) {
-      if (!isValid(elm.children[i])) {
-        return false;
-      }
-    }
-  }
-  return true;
-};
-const buildIconUrl = (iconName) => {
-  // under normal operations the Icons should always be loaded from the CDN
-  {
-    return `${Env.cdnURIProd}/icons/${Env.duetIconVersion}/lib/assets/${iconName}.svg`;
-  }
-};
-const iconCache = {};
-function fetchIconByUrl(url, isServer = Build.isServer) {
-  if (iconCache[url]) {
-    return iconCache[url];
-  }
-  // we create a function that covers all the fetching, cleanup, validation etc,
-  // this way we can perform that work just once, and then return the same promise in future.
-  async function doFetch() {
-    let responseText = "";
-    if (isServer) {
-      const fs = require("fs");
-      const path = require("path");
-      const iconsPath = `${path.resolve(path.dirname(require.resolve("@duetds/icons")), "..")}/lib/assets`;
-      const filenameFromUrl = url.split("/").pop().split("#")[0].split("?")[0];
-      responseText = fs.readFileSync(`${iconsPath}/${filenameFromUrl}`, "utf-8");
-    }
-    else {
-      const res = await fetch(url);
-      if (!res.ok) {
-        throw new Error(`SVG request failed: ${res.status} ${res.statusText}`);
-      }
-      responseText = await res.text();
-    }
-    const svgElement = cleanupSvg(responseText);
-    if (!isValid(svgElement)) {
-      throw new Error("SVG validation failed");
-    }
-    // OuterHTML does not unfortunately work here with IE11
-    // was previously: resolve(svgElement.outerHTML)
-    const div = document.createElement("div");
-    div.appendChild(svgElement);
-    return div.innerHTML;
-  }
-  // we do not `await` the fetch, as we only care about initiating the work,
-  // it's the responsibility of the calling code to wait for the response.
-  const req = doFetch();
-  // cache for the repeat requests
-  return (iconCache[url] = req);
-}
-
 const duetIconCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-icon,*.sc-duet-icon::after,*.sc-duet-icon::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-icon-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;display:inline-block;width:auto;max-width:100%;color:inherit;-webkit-tap-highlight-color:transparent}@media (max-width: 35.9375em){/*!@:host(.duet-icon-has-outline)*/.duet-icon-has-outline.sc-duet-icon-h{margin-bottom:0 !important}}@media (max-width: 35.9375em){/*!@:host(.duet-icon-has-background)*/.duet-icon-has-background.sc-duet-icon-h{margin-bottom:0 !important}}/*!@:host(.duet-m-0)*/.duet-m-0.sc-duet-icon-h{margin:0 !important}@media (max-width: 35.9375em){/*!@:host(.duet-m-0)*/.duet-m-0.sc-duet-icon-h{margin:0 !important}}/*!@.duet-icon*/.duet-icon.sc-duet-icon{-webkit-user-select:none;user-select:none;width:100%;height:100%;transform-origin:top center}/*!@.duet-icon.duet-icon-has-outline*/.duet-icon.duet-icon-has-outline.sc-duet-icon{padding:12px;border-style:solid;border-width:1px;border-radius:50%}@media (max-width: 35.9375em){/*!@.duet-icon.duet-icon-has-outline*/.duet-icon.duet-icon-has-outline.sc-duet-icon{outline:1px solid transparent;transform:scale(0.8)}}/*!@.duet-icon.duet-icon-has-background*/.duet-icon.duet-icon-has-background.sc-duet-icon{padding:16px;color:white;border-radius:50%}@media (max-width: 35.9375em){/*!@.duet-icon.duet-icon-has-background*/.duet-icon.duet-icon-has-background.sc-duet-icon{outline:1px solid transparent;transform:scale(0.8)}}/*!@.duet-icon.duet-icon-has-background.duet-theme-turva, .duet-icon.duet-icon-has-background.duet-theme-default*/.duet-icon.duet-icon-has-background.duet-theme-turva.sc-duet-icon,.duet-icon.duet-icon-has-background.duet-theme-default.sc-duet-icon{color:white}/*!@.duet-icon.duet-icon-has-background.xxx-small .duet-icon-svg, .duet-icon.duet-icon-has-outline.xxx-small .duet-icon-svg*/.duet-icon.duet-icon-has-background.xxx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon,.duet-icon.duet-icon-has-outline.xxx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:10px;height:10px}/*!@.duet-icon.duet-icon-has-background.xx-small .duet-icon-svg, .duet-icon.duet-icon-has-outline.xx-small .duet-icon-svg*/.duet-icon.duet-icon-has-background.xx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon,.duet-icon.duet-icon-has-outline.xx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:16px;height:16px}@media (max-width: 35.9375em){/*!@.duet-icon.duet-icon-not-responsive*/.duet-icon.duet-icon-not-responsive.sc-duet-icon{transform:scale(1) !important}}/*!@.duet-icon.duet-theme-default*/.duet-icon.duet-theme-default.sc-duet-icon{color:#0077b3}/*!@.duet-icon.duet-theme-turva*/.duet-icon.duet-theme-turva.sc-duet-icon{color:#c60c30}/*!@.duet-icon.auto .duet-icon-svg*/.duet-icon.auto.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:100%;height:100%}/*!@.duet-icon.xxx-small .duet-icon-svg*/.duet-icon.xxx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:7px;height:7px}/*!@.duet-icon.duet-icon-has-background.xxx-small*/.duet-icon.duet-icon-has-background.xxx-small.sc-duet-icon{padding:6px}/*!@.duet-icon.duet-icon-has-outline.xxx-small*/.duet-icon.duet-icon-has-outline.xxx-small.sc-duet-icon{padding:4px}/*!@.duet-icon.xx-small .duet-icon-svg*/.duet-icon.xx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:10px;height:10px}/*!@.duet-icon.duet-icon-has-background.xx-small*/.duet-icon.duet-icon-has-background.xx-small.sc-duet-icon{padding:8px}/*!@.duet-icon.duet-icon-has-outline.xx-small*/.duet-icon.duet-icon-has-outline.xx-small.sc-duet-icon{padding:7px}/*!@.duet-icon.x-small .duet-icon-svg*/.duet-icon.x-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:16px;height:16px}/*!@.duet-icon.duet-icon-has-outline.x-small*/.duet-icon.duet-icon-has-outline.x-small.sc-duet-icon{padding:10px}/*!@.duet-icon.duet-icon-has-background.x-small*/.duet-icon.duet-icon-has-background.x-small.sc-duet-icon{padding:12px}/*!@.duet-icon.small .duet-icon-svg*/.duet-icon.small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:20px;height:20px}/*!@.duet-icon.duet-icon-has-background.small*/.duet-icon.duet-icon-has-background.small.sc-duet-icon{padding:14px}/*!@.duet-icon.large .duet-icon-svg*/.duet-icon.large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:30px;height:30px}/*!@.duet-icon.x-large .duet-icon-svg*/.duet-icon.x-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:36px;height:36px}/*!@.duet-icon.xx-large .duet-icon-svg*/.duet-icon.xx-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:48px;height:48px}/*!@.duet-icon.xxx-large .duet-icon-svg*/.duet-icon.xxx-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:48px;height:48px}@media (min-width: 48em){/*!@.duet-icon.xxx-large .duet-icon-svg*/.duet-icon.xxx-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:72px;height:72px}}/*!@.duet-icon .duet-icon-svg*/.duet-icon.sc-duet-icon .duet-icon-svg.sc-duet-icon{display:block;width:24px;min-width:100%;height:24px;font-size:0}/*!@.duet-icon svg*/.duet-icon.sc-duet-icon svg.sc-duet-icon{width:100%;min-width:100%;fill:currentColor}";
 
 class DuetIcon {
@@ -10870,7 +10795,7 @@ class DuetIcon {
     if (this.src && this.icon) {
       console.warn("[DUET COMPONENTS]: <duet-icon> should have either have src or icon attributes, but not both. icon attribute will take precedence", "icon:", this.icon, "src:", this.src);
     }
-    return this.loadIcon();
+    this.loadIcon();
   }
   async loadIcon() {
     // static icon known at build-time, so we can set it synchronously
@@ -10878,13 +10803,9 @@ class DuetIcon {
       this.svgContent = this.icon;
       return;
     }
-    // dynamically load icon from url
-    const src = this.src ? this.src : buildIconUrl(this.name);
-    try {
-      this.svgContent = await fetchIconByUrl(src);
-    }
-    catch (e) {
-      console.warn(`[DUET COMPONENTS]: <duet-icon> could not load SVG from URL: ${src}.`, e);
+    // on server, don't make requests
+    {
+      return;
     }
   }
   /**

package/lib/cjs/duet-alert.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9a57d969.js');
+const index = require('./index-18b0f43a.js');
 const languageUtils = require('./language-utils-aa282901.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 require('./string-utils-267e3dbb.js');

package/lib/cjs/duet-badge.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9a57d969.js');
+const index = require('./index-18b0f43a.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 
 const duetBadgeCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:4px !important;margin-bottom:2px !important;display:inline-block;width:auto;vertical-align:middle}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-badge{width:100%;padding:4.4444444444px 12px 5.4444444444px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.75rem;font-style:normal;font-weight:600;line-height:1.25;color:#00294d;text-align:center;word-break:break-word;vertical-align:middle;background:#e6f1f7;border-radius:20rem}.duet-badge.duet-p-0{padding:0 !important}.duet-badge.duet-m-0{margin:0 !important}.duet-badge.duet-theme-turva{padding:5.4444444444px 12px 4.4444444444px;font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:700;color:#171c3a;background:#e8e8eb}.duet-badge.warning{background:#fef3df}.duet-badge.warning.duet-theme-turva{background:#fef1db}.duet-badge.danger{background:#fce9ef}.duet-badge.danger.duet-theme-turva{background:#fceae7}.duet-badge.success{background:#e6f3ef}.duet-badge.success.duet-theme-turva{background:#e6f3ed}";

package/lib/cjs/duet-button_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9a57d969.js');
+const index = require('./index-18b0f43a.js');
 const commonStrings = require('./common-strings-de17f887.js');
 const languageUtils = require('./language-utils-aa282901.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');

package/lib/cjs/duet-caption_4.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9a57d969.js');
+const index = require('./index-18b0f43a.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 const stringUtils = require('./string-utils-267e3dbb.js');
 const tokenUtils = require('./token-utils-63a9c8dc.js');

package/lib/cjs/duet-card.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9a57d969.js');
+const index = require('./index-18b0f43a.js');
 const createId = require('./create-id-c3b984b1.js');
 const keyboardUtils = require('./keyboard-utils-b4e3d1d3.js');
 const stringUtils = require('./string-utils-267e3dbb.js');

package/lib/cjs/duet-checkbox.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9a57d969.js');
+const index = require('./index-18b0f43a.js');
 const createId = require('./create-id-c3b984b1.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 

package/lib/cjs/duet-choice_2.cjs.entry.js

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9a57d969.js');
+const index = require('./index-18b0f43a.js');
 const commonStrings = require('./common-strings-de17f887.js');
 const createId = require('./create-id-c3b984b1.js');
-const focusUtils = require('./focus-utils-b609a7a5.js');
+const focusUtils = require('./focus-utils-27c696bb.js');
 const keyboardUtils = require('./keyboard-utils-b4e3d1d3.js');
 const languageUtils = require('./language-utils-aa282901.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');