@mattilsynet/design 1.1.0 → 1.1.2

package/mtds/layout/app-observer.js

@@ -1,36 +1,34 @@
-import v from "../styles.module.css.js";
-import { IS_BROWSER as w, onLoaded as I, onMutation as A, on as g, QUICK_EVENT as O } from "../utils.js";
-const i = w ? new CSSStyleSheet() : null, S = v.app.split(" ")[0], N = `.${S} > nav, .${S} nav:has(+ main)`, V = '[data-command="toggle-app-expanded"]', p = "--mtdsc-app-expanded", Y = 960;
+import I from "../styles.module.css.js";
+import { IS_BROWSER as E, onLoaded as A, onMutation as v, on as w, QUICK_EVENT as O } from "../utils.js";
+const l = E ? new CSSStyleSheet() : null, S = I.app.split(" ")[0], T = `.${S} > nav, .${S} nav:has(+ main)`, V = '[data-command="toggle-app-expanded"]', a = "--mtdsc-app-expanded", Y = 960;
 function x(e) {
-  e.target instanceof Element && (e.target.closest(V) && (e.preventDefault(), document.startViewTransition ? document.startViewTransition(u) : u()), window.innerWidth <= Y && e.target.matches(N) && console.log(e.target));
+  e.target instanceof Element && (e.target.closest(V) && (e.preventDefault(), document.startViewTransition ? document.startViewTransition(u) : u()), window.innerWidth <= Y && e.target.matches(T) && console.log(e.target));
 }
-let t, T;
+let t, h;
 function C(e) {
-  for (const s of e) {
-    const c = s.querySelector(N), h = s.querySelector("main");
-    t = c, T = h;
-  }
+  for (const o of e)
+    o.isConnected && (t = o.querySelector(T), h = o.querySelector("main"));
 }
 function u(e = !0) {
-  const s = window.localStorage.getItem(p) !== "false", c = e ? !s : s;
-  i == null || i.replaceSync(
-    `:root { ${p}: var(${p}--${c}) }`
-  ), window.localStorage.setItem(p, `${c}`);
+  const o = window.localStorage.getItem(a) !== "false", g = e ? !o : o;
+  l == null || l.replaceSync(
+    `:root { ${a}: var(${a}--${g}) }`
+  ), window.localStorage.setItem(a, `${g}`);
 }
-var E;
-i && ((E = document.adoptedStyleSheets) == null || E.push(i));
-w && u(!1);
-let l = 0, y = 0, d = 0, n, o = 0, a = 0, r = 0;
-const m = "--mtdsc-app-nav-align", f = "--mtdsc-app-nav-bottom", _ = "--mtdsc-app-nav-position", P = "--mtdsc-app-nav-top";
+var N;
+l && ((N = document.adoptedStyleSheets) == null || N.push(l));
+E && u(!1);
+let m = 0, i = 0, c = 0, n, s = 0, _ = 0, r = 0, P = !1;
+const p = "--mtdsc-app-nav-align", y = "--mtdsc-app-nav-bottom", d = "--mtdsc-app-nav-position", f = "--mtdsc-app-nav-top";
 function K() {
   if (!(t != null && t.isConnected)) return;
-  const e = window.scrollY, s = e < r;
-  r = e, s !== n && (l = t.offsetHeight, y = t.offsetTop, d = T.offsetTop, n = s, a = window.innerHeight), !(o === -1 && l <= a) && (o !== -1 && (l <= a || n && r <= y) ? (t.style.setProperty(_, "sticky"), t.style.setProperty(P, "0px"), t.style.removeProperty(f), t.style.setProperty(m, "start"), o = -1) : o === -1 && !n ? (t.style.setProperty(_, "relative"), t.style.setProperty(P, `${Math.max(0, r - d)}px`), t.style.removeProperty(f), t.style.setProperty(m, "start"), o = 0) : o !== 1 && !n && r + a >= y + l ? (t.style.setProperty(_, "sticky"), t.style.removeProperty(P), t.style.setProperty(f, "0px"), t.style.setProperty(m, "end"), o = 1) : o === 1 && n && (t.style.setProperty(_, "relative"), t.style.setProperty(
-    P,
-    `${Math.min(y - d, r + a - l - d)}px`
-  ), t.style.removeProperty(f), t.style.setProperty(m, "start"), o = 0));
+  const e = window.scrollY, o = e < r;
+  r = e, o !== n && (m = t.offsetHeight, P = t.offsetHeight <= window.innerHeight, i = t.offsetTop, c = h.offsetTop, n = o, _ = window.innerHeight), !(s === -1 && P) && (s !== -1 && (P || n && r <= i) ? (t.style.setProperty(d, "sticky"), t.style.setProperty(f, "0px"), t.style.removeProperty(y), t.style.setProperty(p, "start"), s = -1) : s === -1 && !n ? (t.style.setProperty(d, "relative"), t.style.setProperty(f, `${Math.max(0, r - c)}px`), t.style.removeProperty(y), t.style.setProperty(p, "start"), s = 0) : s !== 1 && !n && r + _ >= i + m ? (t.style.setProperty(d, "sticky"), t.style.removeProperty(f), t.style.setProperty(y, "0px"), t.style.setProperty(p, "end"), s = 1) : s === 1 && n && (t.style.setProperty(d, "relative"), t.style.setProperty(
+    f,
+    `${Math.min(i - c, r + _ - m - c)}px`
+  ), t.style.removeProperty(y), t.style.setProperty(p, "start"), s = 0));
 }
-I(() => {
-  A(document.documentElement, S, C), g(window, "scroll", K, O), g(document, "click", x);
+A(() => {
+  v(document.documentElement, S, C), w(window, "scroll", K, O), w(document, "click", x);
 });
 //# sourceMappingURL=app-observer.js.map

package/mtds/layout/app-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-observer.js","sources":["../../designsystem/layout/app-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { IS_BROWSER, QUICK_EVENT, on, onLoaded, onMutation } from \"../utils\";\n\n// Setting app-expanded as CSS custom property of constructed style sheet to\n// avoid flash of unstyled content and still be Next.js hydration compatible\nconst CSS_SHEET = IS_BROWSER ? new CSSStyleSheet() : null;\nconst CSS_APP = styles.app.split(\" \")[0];\nconst CSS_NAV = `.${CSS_APP} > nav, .${CSS_APP} nav:has(+ main)`;\nconst CSS_TOGGLE = '[data-command=\"toggle-app-expanded\"]';\nconst KEY_TOGGLE = \"--mtdsc-app-expanded\";\nconst MOBILE_NAV_BREAKPOINT = 960;\n\nfunction handleToggleClick(event: Event) {\n\tif (event.target instanceof Element) {\n\t\tif (event.target.closest(CSS_TOGGLE)) {\n\t\t\tevent.preventDefault(); // Ensure button does not cause submit even without `type=\"button\"`\n\t\t\tif (!document.startViewTransition) toggleExpanded();\n\t\t\telse document.startViewTransition(toggleExpanded);\n\t\t}\n\t\tif (\n\t\t\twindow.innerWidth <= MOBILE_NAV_BREAKPOINT &&\n\t\t\tevent.target.matches(CSS_NAV)\n\t\t) {\n\t\t\tconsole.log(event.target);\n\t\t}\n\t}\n}\n\n// TODO Better handle for when app is not in DOM\nlet NAV: HTMLElement;\nlet MAIN: HTMLElement;\nfunction handleMutation(apps: HTMLCollectionOf<HTMLElement>) {\n\tfor (const app of apps) {\n\t\tconst nav = app.querySelector<HTMLElement>(CSS_NAV);\n\t\tconst main = app.querySelector<HTMLElement>(\"main\");\n\n\t\tNAV = nav as HTMLElement;\n\t\tMAIN = main as HTMLElement;\n\t}\n}\n\nfunction toggleExpanded(toggle = true) {\n\tconst prev = window.localStorage.getItem(KEY_TOGGLE) !== \"false\";\n\tconst next = toggle ? !prev : prev;\n\tCSS_SHEET?.replaceSync(\n\t\t`:root { ${KEY_TOGGLE}: var(${KEY_TOGGLE}--${next}) }`,\n\t);\n\twindow.localStorage.setItem(KEY_TOGGLE, `${next}`);\n}\n\n// Run instantly to avoid flash of unstyled content\n// Using adoptedStyleSheets to avoid Next.js hydration conflict\nif (CSS_SHEET) document.adoptedStyleSheets?.push(CSS_SHEET);\nif (IS_BROWSER) toggleExpanded(false); // Sync UI with store\n\nlet NAV_H = 0;\nlet NAV_Y = 0;\nlet OFFSET_Y = 0; // Used to figure min top of the sidebar\nlet SCROLL_UP: boolean;\nlet STICK_DIR = 0; // -1 = stick top, 0 = relative, 1 = stick bottom\nlet WIN_H = 0;\nlet WIN_Y = 0;\nconst KEY_NAV_ALIGN = \"--mtdsc-app-nav-align\";\nconst KEY_NAV_BOTTOM = \"--mtdsc-app-nav-bottom\";\nconst KEY_NAV_POS = \"--mtdsc-app-nav-position\";\nconst KEY_NAV_TOP = \"--mtdsc-app-nav-top\";\n\nfunction handleScroll() {\n\tif (!NAV?.isConnected) return;\n\tconst NEXT_Y = window.scrollY;\n\tconst NEXT_UP = NEXT_Y < WIN_Y;\n\tWIN_Y = NEXT_Y;\n\n\t// Only calculate if scroll direction has changed\n\tif (NEXT_UP !== SCROLL_UP) {\n\t\tNAV_H = NAV.offsetHeight;\n\t\tNAV_Y = NAV.offsetTop;\n\t\tOFFSET_Y = MAIN.offsetTop;\n\t\tSCROLL_UP = NEXT_UP;\n\t\tWIN_H = window.innerHeight;\n\t}\n\n\tif (STICK_DIR === -1 && NAV_H <= WIN_H) return; // Allways sticky when sidebar is smaller than viewport\n\tif (STICK_DIR !== -1 && (NAV_H <= WIN_H || (SCROLL_UP && WIN_Y <= NAV_Y))) {\n\t\t// Not sticking to top and scrolling down or sidebar is smaller than viewport\n\t\tNAV.style.setProperty(KEY_NAV_POS, \"sticky\");\n\t\tNAV.style.setProperty(KEY_NAV_TOP, \"0px\");\n\t\tNAV.style.removeProperty(KEY_NAV_BOTTOM);\n\t\tNAV.style.setProperty(KEY_NAV_ALIGN, \"start\");\n\t\tSTICK_DIR = -1;\n\t\tconsole;\n\t} else if (STICK_DIR === -1 && !SCROLL_UP) {\n\t\t// Sticking to top and scrolling down\n\t\tNAV.style.setProperty(KEY_NAV_POS, \"relative\");\n\t\tNAV.style.setProperty(KEY_NAV_TOP, `${Math.max(0, WIN_Y - OFFSET_Y)}px`);\n\t\tNAV.style.removeProperty(KEY_NAV_BOTTOM);\n\t\tNAV.style.setProperty(KEY_NAV_ALIGN, \"start\");\n\t\tSTICK_DIR = 0;\n\t} else if (STICK_DIR !== 1 && !SCROLL_UP && WIN_Y + WIN_H >= NAV_Y + NAV_H) {\n\t\t// Not sticking to bottom and scrolling down\n\t\tNAV.style.setProperty(KEY_NAV_POS, \"sticky\");\n\t\tNAV.style.removeProperty(KEY_NAV_TOP);\n\t\tNAV.style.setProperty(KEY_NAV_BOTTOM, \"0px\");\n\t\tNAV.style.setProperty(KEY_NAV_ALIGN, \"end\");\n\t\tSTICK_DIR = 1;\n\t} else if (STICK_DIR === 1 && SCROLL_UP) {\n\t\tNAV.style.setProperty(KEY_NAV_POS, \"relative\");\n\t\tNAV.style.setProperty(\n\t\t\tKEY_NAV_TOP,\n\t\t\t`${Math.min(NAV_Y - OFFSET_Y, WIN_Y + WIN_H - NAV_H - OFFSET_Y)}px`,\n\t\t);\n\t\tNAV.style.removeProperty(KEY_NAV_BOTTOM);\n\t\tNAV.style.setProperty(KEY_NAV_ALIGN, \"start\");\n\t\tSTICK_DIR = 0;\n\t}\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_APP, handleMutation);\n\ton(window, \"scroll\", handleScroll, QUICK_EVENT);\n\ton(document, \"click\", handleToggleClick);\n});\n"],"names":["CSS_SHEET","IS_BROWSER","CSS_APP","styles","CSS_NAV","CSS_TOGGLE","KEY_TOGGLE","MOBILE_NAV_BREAKPOINT","handleToggleClick","event","toggleExpanded","NAV","MAIN","handleMutation","apps","app","nav","main","toggle","prev","next","_a","NAV_H","NAV_Y","OFFSET_Y","SCROLL_UP","STICK_DIR","WIN_H","WIN_Y","KEY_NAV_ALIGN","KEY_NAV_BOTTOM","KEY_NAV_POS","KEY_NAV_TOP","handleScroll","NEXT_Y","NEXT_UP","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}
+{"version":3,"file":"app-observer.js","sources":["../../designsystem/layout/app-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { IS_BROWSER, QUICK_EVENT, on, onLoaded, onMutation } from \"../utils\";\n\n// Setting app-expanded as CSS custom property of constructed style sheet to\n// avoid flash of unstyled content and still be Next.js hydration compatible\nconst CSS_SHEET = IS_BROWSER ? new CSSStyleSheet() : null;\nconst CSS_APP = styles.app.split(\" \")[0];\nconst CSS_NAV = `.${CSS_APP} > nav, .${CSS_APP} nav:has(+ main)`;\nconst CSS_TOGGLE = '[data-command=\"toggle-app-expanded\"]';\nconst KEY_TOGGLE = \"--mtdsc-app-expanded\";\nconst MOBILE_NAV_BREAKPOINT = 960;\n\nfunction handleToggleClick(event: Event) {\n\tif (event.target instanceof Element) {\n\t\tif (event.target.closest(CSS_TOGGLE)) {\n\t\t\tevent.preventDefault(); // Ensure button does not cause submit even without `type=\"button\"`\n\t\t\tif (!document.startViewTransition) toggleExpanded();\n\t\t\telse document.startViewTransition(toggleExpanded);\n\t\t}\n\t\tif (\n\t\t\twindow.innerWidth <= MOBILE_NAV_BREAKPOINT &&\n\t\t\tevent.target.matches(CSS_NAV)\n\t\t) {\n\t\t\tconsole.log(event.target);\n\t\t}\n\t}\n}\n\n// TODO Better handle for when app is not in DOM\nlet NAV: HTMLElement;\nlet MAIN: HTMLElement;\nfunction handleMutation(apps: HTMLCollectionOf<HTMLElement>) {\n\tfor (const app of apps)\n\t\tif (app.isConnected) {\n\t\t\tNAV = app.querySelector<HTMLElement>(CSS_NAV) as HTMLElement;\n\t\t\tMAIN = app.querySelector<HTMLElement>(\"main\") as HTMLElement;\n\t\t}\n}\n\nfunction toggleExpanded(toggle = true) {\n\tconst prev = window.localStorage.getItem(KEY_TOGGLE) !== \"false\";\n\tconst next = toggle ? !prev : prev;\n\tCSS_SHEET?.replaceSync(\n\t\t`:root { ${KEY_TOGGLE}: var(${KEY_TOGGLE}--${next}) }`,\n\t);\n\t// document.querySelector(`.${CSS_APP} aside`)?.toggleAttribute(\"hidden\"); // Just for testing\n\twindow.localStorage.setItem(KEY_TOGGLE, `${next}`);\n}\n\n// Run instantly to avoid flash of unstyled content\n// Using adoptedStyleSheets to avoid Next.js hydration conflict\nif (CSS_SHEET) document.adoptedStyleSheets?.push(CSS_SHEET);\nif (IS_BROWSER) toggleExpanded(false); // Sync UI with store\n\nlet NAV_H = 0;\nlet NAV_Y = 0;\nlet OFFSET_Y = 0; // Used to figure min top of the sidebar\nlet SCROLL_UP: boolean;\nlet STICK_DIR = 0; // -1 = stick top, 0 = relative, 1 = stick bottom\nlet WIN_H = 0;\nlet WIN_Y = 0;\nlet NAV_LT_WIN = false; // Used to figure if nav is larger than viewport\nconst KEY_NAV_ALIGN = \"--mtdsc-app-nav-align\";\nconst KEY_NAV_BOTTOM = \"--mtdsc-app-nav-bottom\";\nconst KEY_NAV_POS = \"--mtdsc-app-nav-position\";\nconst KEY_NAV_TOP = \"--mtdsc-app-nav-top\";\n\nfunction handleScroll() {\n\tif (!NAV?.isConnected) return;\n\tconst NEXT_Y = window.scrollY;\n\tconst NEXT_UP = NEXT_Y < WIN_Y;\n\tWIN_Y = NEXT_Y;\n\n\t// Only calculate if scroll direction has changed\n\tif (NEXT_UP !== SCROLL_UP) {\n\t\tNAV_H = NAV.offsetHeight;\n\t\tNAV_LT_WIN = NAV.offsetHeight <= window.innerHeight;\n\t\tNAV_Y = NAV.offsetTop;\n\t\tOFFSET_Y = MAIN.offsetTop;\n\t\tSCROLL_UP = NEXT_UP;\n\t\tWIN_H = window.innerHeight;\n\t}\n\n\tif (STICK_DIR === -1 && NAV_LT_WIN) return; // Allways sticky when sidebar is smaller than viewport\n\tif (STICK_DIR !== -1 && (NAV_LT_WIN || (SCROLL_UP && WIN_Y <= NAV_Y))) {\n\t\t// Not sticking to top and scrolling up or sidebar is smaller than viewport\n\t\tNAV.style.setProperty(KEY_NAV_POS, \"sticky\");\n\t\tNAV.style.setProperty(KEY_NAV_TOP, \"0px\");\n\t\tNAV.style.removeProperty(KEY_NAV_BOTTOM);\n\t\tNAV.style.setProperty(KEY_NAV_ALIGN, \"start\");\n\t\tSTICK_DIR = -1;\n\t\t// console.log(\"a\");\n\t} else if (STICK_DIR === -1 && !SCROLL_UP) {\n\t\t// Sticking to top and scrolling down\n\t\tNAV.style.setProperty(KEY_NAV_POS, \"relative\");\n\t\tNAV.style.setProperty(KEY_NAV_TOP, `${Math.max(0, WIN_Y - OFFSET_Y)}px`);\n\t\tNAV.style.removeProperty(KEY_NAV_BOTTOM);\n\t\tNAV.style.setProperty(KEY_NAV_ALIGN, \"start\");\n\t\tSTICK_DIR = 0;\n\t\t// console.log(\"b\");\n\t} else if (STICK_DIR !== 1 && !SCROLL_UP && WIN_Y + WIN_H >= NAV_Y + NAV_H) {\n\t\t// Not sticking to bottom and scrolling down\n\t\tNAV.style.setProperty(KEY_NAV_POS, \"sticky\");\n\t\tNAV.style.removeProperty(KEY_NAV_TOP);\n\t\tNAV.style.setProperty(KEY_NAV_BOTTOM, \"0px\");\n\t\tNAV.style.setProperty(KEY_NAV_ALIGN, \"end\");\n\t\tSTICK_DIR = 1;\n\t\t// console.log(\"c\");\n\t} else if (STICK_DIR === 1 && SCROLL_UP) {\n\t\tNAV.style.setProperty(KEY_NAV_POS, \"relative\");\n\t\tNAV.style.setProperty(\n\t\t\tKEY_NAV_TOP,\n\t\t\t`${Math.min(NAV_Y - OFFSET_Y, WIN_Y + WIN_H - NAV_H - OFFSET_Y)}px`,\n\t\t);\n\t\tNAV.style.removeProperty(KEY_NAV_BOTTOM);\n\t\tNAV.style.setProperty(KEY_NAV_ALIGN, \"start\");\n\t\tSTICK_DIR = 0;\n\t\t// console.log(\"d\");\n\t}\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_APP, handleMutation);\n\ton(window, \"scroll\", handleScroll, QUICK_EVENT);\n\ton(document, \"click\", handleToggleClick);\n});\n"],"names":["CSS_SHEET","IS_BROWSER","CSS_APP","styles","CSS_NAV","CSS_TOGGLE","KEY_TOGGLE","MOBILE_NAV_BREAKPOINT","handleToggleClick","event","toggleExpanded","NAV","MAIN","handleMutation","apps","app","toggle","prev","next","_a","NAV_H","NAV_Y","OFFSET_Y","SCROLL_UP","STICK_DIR","WIN_H","WIN_Y","NAV_LT_WIN","KEY_NAV_ALIGN","KEY_NAV_BOTTOM","KEY_NAV_POS","KEY_NAV_TOP","handleScroll","NEXT_Y","NEXT_UP","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}

package/mtds/layout/layout.stories.d.ts

@@ -16,6 +16,7 @@ export declare const React: Story;
 export declare const Gap: Story;
 export declare const Center: Story;
 export declare const ItemSizes: Story;
+export declare const ItemFixed: Story;
 export declare const Align: Story;
 export declare const Justify: Story;
 export declare const AlignContent: Story;

package/mtds/logo/logo-observer.js

@@ -1,20 +1,18 @@
 import a from "../styles.module.css.js";
-import { onLoaded as c, onMutation as l } from "../utils.js";
-const d = a.logo.split(" ")[0];
+import { onLoaded as o, onMutation as d } from "../utils.js";
+const l = a.logo.split(" ")[0];
 function m([t]) {
-  if ((t == null ? void 0 : t.firstElementChild) instanceof SVGSVGElement) {
-    for (const s of document.head.querySelectorAll("link[rel~='icon']"))
-      s.remove();
-    const e = t.firstElementChild, n = t == null ? void 0 : t.hasAttribute("data-env"), o = window.getComputedStyle(e), r = o.getPropertyValue("color"), i = o.getPropertyValue("--mtds-logo-color");
+  if (t != null && t.isConnected && (t == null ? void 0 : t.firstElementChild) instanceof SVGSVGElement) {
+    for (const c of document.head.querySelectorAll("link[rel~='icon']"))
+      c.remove();
+    const e = t.firstElementChild, n = t == null ? void 0 : t.hasAttribute("data-env"), i = window.getComputedStyle(e), r = i.getPropertyValue("color"), s = i.getPropertyValue("--mtds-logo-color");
     document.head.appendChild(
       Object.assign(document.createElement("link"), {
-        href: `data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 55'><rect fill='${n ? "none" : i}' width='51' height='51' x='2' y='2' stroke='${r}' stroke-dasharray='0.09 6.38' stroke-linecap='round' stroke-opacity='${n ? 0.6 : 0}' stroke-width='2.3' rx='25.5'/><g transform="translate(7.5 7.5)">${e.outerHTML.replace(/(fill|width|height|xmlns)=\S+/gi, "").replace("<svg", `<svg width="40" height="40" fill="${r}"`)}</g></svg>`)}`,
+        href: `data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 55'><rect fill='${n ? "none" : s}' width='51' height='51' x='2' y='2' stroke='${r}' stroke-dasharray='0.09 6.38' stroke-linecap='round' stroke-opacity='${n ? 0.6 : 0}' stroke-width='2.3' rx='25.5'/><g transform="translate(7.5 7.5)">${e.outerHTML.replace(/(fill|width|height|xmlns)=\S+/gi, "").replace("<svg", `<svg width="40" height="40" fill="${r}"`)}</g></svg>`)}`,
         rel: "icon"
       })
     );
   }
 }
-c(() => {
-  l(document.documentElement, d, m);
-});
+o(() => d(document.documentElement, l, m));
 //# sourceMappingURL=logo-observer.js.map

package/mtds/logo/logo-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"logo-observer.js","sources":["../../designsystem/logo/logo-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { onLoaded, onMutation } from \"../utils\";\n\nconst CSS_LOGO = styles.logo.split(\" \")[0];\n\nfunction handleMutation([logo]: HTMLCollectionOf<HTMLElement>) {\n\tif (logo?.firstElementChild instanceof SVGSVGElement) {\n\t\tfor (const icon of document.head.querySelectorAll(\"link[rel~='icon']\"))\n\t\t\ticon.remove();\n\n\t\tconst svg = logo.firstElementChild;\n\t\tconst isDot = logo?.hasAttribute(\"data-env\");\n\t\tconst style = window.getComputedStyle(svg);\n\t\tconst text = style.getPropertyValue(\"color\");\n\t\tconst back = style.getPropertyValue(\"--mtds-logo-color\");\n\n\t\tdocument.head.appendChild(\n\t\t\tObject.assign(document.createElement(\"link\"), {\n\t\t\t\thref: `data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 55'><rect fill='${isDot ? \"none\" : back}' width='51' height='51' x='2' y='2' stroke='${text}' stroke-dasharray='0.09 6.38' stroke-linecap='round' stroke-opacity='${isDot ? 0.6 : 0}' stroke-width='2.3' rx='25.5'/><g transform=\"translate(7.5 7.5)\">${svg.outerHTML.replace(/(fill|width|height|xmlns)=\\S+/gi, \"\").replace(\"<svg\", `<svg width=\"40\" height=\"40\" fill=\"${text}\"`)}</g></svg>`)}`,\n\t\t\t\trel: \"icon\",\n\t\t\t}),\n\t\t);\n\t}\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_LOGO, handleMutation);\n});\n"],"names":["CSS_LOGO","styles","handleMutation","logo","icon","svg","isDot","style","text","back","onLoaded","onMutation"],"mappings":";;AAGA,MAAMA,IAAWC,EAAO,KAAK,MAAM,GAAG,EAAE,CAAC;AAEzC,SAASC,EAAe,CAACC,CAAI,GAAkC;AAC1D,OAAAA,KAAA,gBAAAA,EAAM,8BAA6B,eAAe;AACrD,eAAWC,KAAQ,SAAS,KAAK,iBAAiB,mBAAmB;AACpE,MAAAA,EAAK,OAAO;AAEb,UAAMC,IAAMF,EAAK,mBACXG,IAAQH,KAAA,gBAAAA,EAAM,aAAa,aAC3BI,IAAQ,OAAO,iBAAiBF,CAAG,GACnCG,IAAOD,EAAM,iBAAiB,OAAO,GACrCE,IAAOF,EAAM,iBAAiB,mBAAmB;AAEvD,aAAS,KAAK;AAAA,MACb,OAAO,OAAO,SAAS,cAAc,MAAM,GAAG;AAAA,QAC7C,MAAM,sBAAsB,mBAAmB,2EAA2ED,IAAQ,SAASG,CAAI,gDAAgDD,CAAI,yEAAyEF,IAAQ,MAAM,CAAC,qEAAqED,EAAI,UAAU,QAAQ,mCAAmC,EAAE,EAAE,QAAQ,QAAQ,qCAAqCG,CAAI,GAAG,CAAC,YAAY,CAAC;AAAA,QACve,KAAK;AAAA,MACL,CAAA;AAAA,IACF;AAAA,EAAA;AAEF;AAEAE,EAAS,MAAM;AACH,EAAAC,EAAA,SAAS,iBAAiBX,GAAUE,CAAc;AAC9D,CAAC;"}
+{"version":3,"file":"logo-observer.js","sources":["../../designsystem/logo/logo-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { onLoaded, onMutation } from \"../utils\";\n\nconst CSS_LOGO = styles.logo.split(\" \")[0];\n\nfunction handleMutation([logo]: HTMLCollectionOf<HTMLElement>) {\n\tif (logo?.isConnected && logo?.firstElementChild instanceof SVGSVGElement) {\n\t\tfor (const icon of document.head.querySelectorAll(\"link[rel~='icon']\"))\n\t\t\ticon.remove();\n\n\t\tconst svg = logo.firstElementChild;\n\t\tconst isDot = logo?.hasAttribute(\"data-env\");\n\t\tconst style = window.getComputedStyle(svg);\n\t\tconst text = style.getPropertyValue(\"color\");\n\t\tconst back = style.getPropertyValue(\"--mtds-logo-color\");\n\n\t\tdocument.head.appendChild(\n\t\t\tObject.assign(document.createElement(\"link\"), {\n\t\t\t\thref: `data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 55'><rect fill='${isDot ? \"none\" : back}' width='51' height='51' x='2' y='2' stroke='${text}' stroke-dasharray='0.09 6.38' stroke-linecap='round' stroke-opacity='${isDot ? 0.6 : 0}' stroke-width='2.3' rx='25.5'/><g transform=\"translate(7.5 7.5)\">${svg.outerHTML.replace(/(fill|width|height|xmlns)=\\S+/gi, \"\").replace(\"<svg\", `<svg width=\"40\" height=\"40\" fill=\"${text}\"`)}</g></svg>`)}`,\n\t\t\t\trel: \"icon\",\n\t\t\t}),\n\t\t);\n\t}\n}\n\nonLoaded(() => onMutation(document.documentElement, CSS_LOGO, handleMutation));\n"],"names":["CSS_LOGO","styles","handleMutation","logo","icon","svg","isDot","style","text","back","onLoaded","onMutation"],"mappings":";;AAGA,MAAMA,IAAWC,EAAO,KAAK,MAAM,GAAG,EAAE,CAAC;AAEzC,SAASC,EAAe,CAACC,CAAI,GAAkC;AAC9D,MAAIA,KAAA,QAAAA,EAAM,gBAAeA,KAAA,gBAAAA,EAAM,8BAA6B,eAAe;AAC1E,eAAWC,KAAQ,SAAS,KAAK,iBAAiB,mBAAmB;AACpE,MAAAA,EAAK,OAAO;AAEb,UAAMC,IAAMF,EAAK,mBACXG,IAAQH,KAAA,gBAAAA,EAAM,aAAa,aAC3BI,IAAQ,OAAO,iBAAiBF,CAAG,GACnCG,IAAOD,EAAM,iBAAiB,OAAO,GACrCE,IAAOF,EAAM,iBAAiB,mBAAmB;AAEvD,aAAS,KAAK;AAAA,MACb,OAAO,OAAO,SAAS,cAAc,MAAM,GAAG;AAAA,QAC7C,MAAM,sBAAsB,mBAAmB,2EAA2ED,IAAQ,SAASG,CAAI,gDAAgDD,CAAI,yEAAyEF,IAAQ,MAAM,CAAC,qEAAqED,EAAI,UAAU,QAAQ,mCAAmC,EAAE,EAAE,QAAQ,QAAQ,qCAAqCG,CAAI,GAAG,CAAC,YAAY,CAAC;AAAA,QACve,KAAK;AAAA,MACL,CAAA;AAAA,IACF;AAAA,EAAA;AAEF;AAEAE,EAAS,MAAMC,EAAW,SAAS,iBAAiBX,GAAUE,CAAc,CAAC;"}

package/mtds/popover/popover-observer.js

@@ -1,25 +1,25 @@
-import r from "../styles.module.css.js";
-import { onLoaded as m, on as p, QUICK_EVENT as v, anchorPosition as d, attr as s } from "../utils.js";
-const a = r.popover.split(" ")[0];
+import d from "../styles.module.css.js";
+import { onLoaded as f, on as l, QUICK_EVENT as g, anchorPosition as a, attr as s } from "../utils.js";
+const p = d.popover.split(" ")[0];
 let i = 0;
-function E({ target: o, newState: n }) {
-  var t;
-  if (o instanceof HTMLElement && o.classList.contains(a)) {
-    const e = (t = o.getRootNode()) == null ? void 0 : t.querySelector(
+function m({ target: o, newState: t }) {
+  var e;
+  if (o instanceof HTMLElement && o.classList.contains(p)) {
+    const n = (e = o.getRootNode()) == null ? void 0 : e.querySelector(
       `[popovertarget="${o.id}"]`
     );
-    n === "closed" ? (i -= 1, d(o, !1)) : e && (i += 1, d(o, e, s(o, "data-position") || "bottom"));
+    t === "closed" ? (i -= 1, a(o, !1)) : n && (i += 1, a(o, n, s(o, "data-position") || "bottom"));
   }
 }
 function P({ target: o }) {
-  var t, e;
-  const n = i && ((t = o == null ? void 0 : o.closest) == null ? void 0 : t.call(o, "a,[popovertargetaction]"));
-  if (n) {
-    const l = s(n, "popovertargetaction") || "toggle", f = l === "show" || (l === "hide" ? !1 : void 0), c = ((e = document.getElementById) == null ? void 0 : e.call(document, s(n, "popovertarget") || "")) || n.closest(`.${a}`);
-    c == null || c.togglePopover(f);
+  var e;
+  const t = i && ((e = o == null ? void 0 : o.closest) == null ? void 0 : e.call(o, "a,[popovertargetaction]"));
+  if (t) {
+    const n = s(t, "popovertargetaction") || "toggle", r = n === "show" || (n === "hide" ? !1 : void 0), c = (document.getElementById(s(t, "popovertarget") || "") || t).closest(`.${p}`);
+    c != null && c.togglePopover && c.togglePopover(r);
   }
 }
-m(() => {
-  p(document, "beforetoggle", E, v), p(document, "click", P);
+f(() => {
+  l(document, "beforetoggle", m, g), l(document, "click", P);
 });
 //# sourceMappingURL=popover-observer.js.map

package/mtds/popover/popover-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-observer.js","sources":["../../designsystem/popover/popover-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { QUICK_EVENT, anchorPosition, attr, on, onLoaded } from \"../utils\";\n\nconst CSS_POPOVER = styles.popover.split(\" \")[0];\nlet OPEN_POPOVERS = 0; // Speed up by only checking clicks if we have open popovers\n\nfunction handleToggle({ target: el, newState }: Event & { newState?: string }) {\n\tif (el instanceof HTMLElement && el.classList.contains(CSS_POPOVER)) {\n\t\tconst anchor = (el.getRootNode() as ShadowRoot)?.querySelector<HTMLElement>(\n\t\t\t`[popovertarget=\"${el.id}\"]`,\n\t\t);\n\n\t\tif (newState === \"closed\") {\n\t\t\tOPEN_POPOVERS -= 1;\n\t\t\tanchorPosition(el, false);\n\t\t} else if (anchor) {\n\t\t\tOPEN_POPOVERS += 1;\n\t\t\tanchorPosition(el, anchor, attr(el, \"data-position\") || \"bottom\");\n\t\t}\n\t}\n}\n\n// Polyfill popovertarget for <a> (not supported by native)\n// and automatically assume popovertarget is the closest parent popover\n// but respect the popovertarget and popovertargetaction attribute\nfunction handleLinkClick({ target }: Event) {\n\tconst close =\n\t\tOPEN_POPOVERS && (target as Element)?.closest?.(\"a,[popovertargetaction]\");\n\n\tif (close) {\n\t\tconst action = attr(close, \"popovertargetaction\") || \"toggle\";\n\t\tconst open = action === \"show\" || (action === \"hide\" ? false : undefined);\n\t\tconst target =\n\t\t\tdocument.getElementById?.(attr(close, \"popovertarget\") || \"\") ||\n\t\t\tclose.closest(`.${CSS_POPOVER}`);\n\n\t\ttarget?.togglePopover(open);\n\t}\n}\n\nonLoaded(() => {\n\ton(document, \"beforetoggle\", handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n\ton(document, \"click\", handleLinkClick); // Allow `<a>` to use `popovertarget` as well\n});\n"],"names":["CSS_POPOVER","styles","OPEN_POPOVERS","handleToggle","el","newState","anchor","_a","anchorPosition","attr","handleLinkClick","target","close","action","open","_b","onLoaded","on","QUICK_EVENT"],"mappings":";;AAGA,MAAMA,IAAcC,EAAO,QAAQ,MAAM,GAAG,EAAE,CAAC;AAC/C,IAAIC,IAAgB;AAEpB,SAASC,EAAa,EAAE,QAAQC,GAAI,UAAAC,KAA2C;;AAC9E,MAAID,aAAc,eAAeA,EAAG,UAAU,SAASJ,CAAW,GAAG;AAC9D,UAAAM,KAAUC,IAAAH,EAAG,YAAA,MAAH,gBAAAG,EAAiC;AAAA,MAChD,mBAAmBH,EAAG,EAAE;AAAA;AAGzB,IAAIC,MAAa,YACCH,KAAA,GACjBM,EAAeJ,GAAI,EAAK,KACdE,MACOJ,KAAA,GACjBM,EAAeJ,GAAIE,GAAQG,EAAKL,GAAI,eAAe,KAAK,QAAQ;AAAA,EACjE;AAEF;AAKA,SAASM,EAAgB,EAAE,QAAAC,KAAiB;;AAC3C,QAAMC,IACLV,OAAkBK,IAAAI,KAAA,gBAAAA,EAAoB,YAApB,gBAAAJ,EAAA,KAAAI,GAA8B;AAEjD,MAAIC,GAAO;AACV,UAAMC,IAASJ,EAAKG,GAAO,qBAAqB,KAAK,UAC/CE,IAAOD,MAAW,WAAWA,MAAW,SAAS,KAAQ,SACzDF,MACLI,IAAA,SAAS,mBAAT,gBAAAA,EAAA,eAA0BN,EAAKG,GAAO,eAAe,KAAK,QAC1DA,EAAM,QAAQ,IAAIZ,CAAW,EAAE;AAEhCW,IAAAA,KAAAA,QAAAA,EAAQ,cAAcG;AAAA,EAAI;AAE5B;AAEAE,EAAS,MAAM;AACX,EAAAC,EAAA,UAAU,gBAAgBd,GAAce,CAAW,GACnDD,EAAA,UAAU,SAASP,CAAe;AACtC,CAAC;"}
+{"version":3,"file":"popover-observer.js","sources":["../../designsystem/popover/popover-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { QUICK_EVENT, anchorPosition, attr, on, onLoaded } from \"../utils\";\n\nconst CSS_POPOVER = styles.popover.split(\" \")[0];\nlet OPEN_POPOVERS = 0; // Speed up by only checking clicks if we have open popovers\n\nfunction handleToggle({ target: el, newState }: Event & { newState?: string }) {\n\tif (el instanceof HTMLElement && el.classList.contains(CSS_POPOVER)) {\n\t\tconst anchor = (el.getRootNode() as ShadowRoot)?.querySelector<HTMLElement>(\n\t\t\t`[popovertarget=\"${el.id}\"]`,\n\t\t);\n\n\t\tif (newState === \"closed\") {\n\t\t\tOPEN_POPOVERS -= 1;\n\t\t\tanchorPosition(el, false);\n\t\t} else if (anchor) {\n\t\t\tOPEN_POPOVERS += 1;\n\t\t\tanchorPosition(el, anchor, attr(el, \"data-position\") || \"bottom\");\n\t\t}\n\t}\n}\n\n// Polyfill popovertarget for <a> (not supported by native)\n// and automatically assume popovertarget is the closest parent popover\n// but respect the popovertarget and popovertargetaction attribute\nfunction handleLinkClick({ target }: Event) {\n\tconst close =\n\t\tOPEN_POPOVERS && (target as Element)?.closest?.(\"a,[popovertargetaction]\");\n\n\tif (close) {\n\t\tconst action = attr(close, \"popovertargetaction\") || \"toggle\";\n\t\tconst open = action === \"show\" || (action === \"hide\" ? false : undefined);\n\t\tconst target = document.getElementById(attr(close, \"popovertarget\") || \"\");\n\t\tconst popover = (target || close).closest<HTMLElement>(`.${CSS_POPOVER}`);\n\n\t\tif (popover?.togglePopover) popover.togglePopover(open);\n\t}\n}\n\nonLoaded(() => {\n\ton(document, \"beforetoggle\", handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n\ton(document, \"click\", handleLinkClick); // Allow `<a>` to use `popovertarget` as well\n});\n"],"names":["CSS_POPOVER","styles","OPEN_POPOVERS","handleToggle","el","newState","anchor","_a","anchorPosition","attr","handleLinkClick","target","close","action","open","popover","onLoaded","on","QUICK_EVENT"],"mappings":";;AAGA,MAAMA,IAAcC,EAAO,QAAQ,MAAM,GAAG,EAAE,CAAC;AAC/C,IAAIC,IAAgB;AAEpB,SAASC,EAAa,EAAE,QAAQC,GAAI,UAAAC,KAA2C;;AAC9E,MAAID,aAAc,eAAeA,EAAG,UAAU,SAASJ,CAAW,GAAG;AAC9D,UAAAM,KAAUC,IAAAH,EAAG,YAAA,MAAH,gBAAAG,EAAiC;AAAA,MAChD,mBAAmBH,EAAG,EAAE;AAAA;AAGzB,IAAIC,MAAa,YACCH,KAAA,GACjBM,EAAeJ,GAAI,EAAK,KACdE,MACOJ,KAAA,GACjBM,EAAeJ,GAAIE,GAAQG,EAAKL,GAAI,eAAe,KAAK,QAAQ;AAAA,EACjE;AAEF;AAKA,SAASM,EAAgB,EAAE,QAAAC,KAAiB;;AAC3C,QAAMC,IACLV,OAAkBK,IAAAI,KAAA,gBAAAA,EAAoB,YAApB,gBAAAJ,EAAA,KAAAI,GAA8B;AAEjD,MAAIC,GAAO;AACV,UAAMC,IAASJ,EAAKG,GAAO,qBAAqB,KAAK,UAC/CE,IAAOD,MAAW,WAAWA,MAAW,SAAS,KAAQ,SAEzDE,KADS,SAAS,eAAeN,EAAKG,GAAO,eAAe,KAAK,EAAE,KAC9CA,GAAO,QAAqB,IAAIZ,CAAW,EAAE;AAExE,IAAIe,KAAA,QAAAA,EAAS,iBAAuBA,EAAA,cAAcD,CAAI;AAAA,EAAA;AAExD;AAEAE,EAAS,MAAM;AACX,EAAAC,EAAA,UAAU,gBAAgBd,GAAce,CAAW,GACnDD,EAAA,UAAU,SAASP,CAAe;AACtC,CAAC;"}

package/mtds/progress/progress.js

@@ -1,20 +1,13 @@
-import { jsx as t } from "react/jsx-runtime";
-import { clsx as e } from "../external/clsx/dist/clsx.js";
-import { forwardRef as m } from "react";
-import f from "../styles.module.css.js";
-const l = m(
-  function({ className: r, ...o }, s) {
-    return /* @__PURE__ */ t(
-      "u-progress",
-      {
-        class: e(f.progress, r),
-        ref: s,
-        ...o
-      }
-    );
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import e from "../styles.module.css.js";
+import { toCustomElementProps as m } from "../utils.js";
+const u = t(
+  function(r, o) {
+    return /* @__PURE__ */ s("u-progress", { ref: o, ...m(r, e.progress) });
   }
 );
 export {
-  l as Progress
+  u as Progress
 };
 //# sourceMappingURL=progress.js.map

package/mtds/progress/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","sources":["../../designsystem/progress/progress.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type ProgressProps = React.ComponentPropsWithoutRef<\"progress\">;\nexport const Progress = forwardRef<HTMLProgressElement, ProgressProps>(\n\tfunction Progress({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<u-progress\n\t\t\t\tclass={clsx(styles.progress, className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\n"],"names":["Progress","forwardRef","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAKO,MAAMA,IAAWC;AAAA,EACvB,SAAkB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AAE7C,WAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,OAAOC,EAAKC,EAAO,UAAUL,CAAS;AAAA,QACtC,KAAAE;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;"}
+{"version":3,"file":"progress.js","sources":["../../designsystem/progress/progress.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\n\nexport type ProgressProps = React.ComponentPropsWithoutRef<\"progress\">;\nexport const Progress = forwardRef<HTMLProgressElement, ProgressProps>(\n\tfunction Progress(props, ref) {\n\t\treturn (\n\t\t\t<u-progress ref={ref} {...toCustomElementProps(props, styles.progress)} />\n\t\t);\n\t},\n);\n"],"names":["Progress","forwardRef","props","ref","jsx","toCustomElementProps","styles"],"mappings":";;;;AAKO,MAAMA,IAAWC;AAAA,EACvB,SAAkBC,GAAOC,GAAK;AAE5B,WAAA,gBAAAC,EAAC,gBAAW,KAAAD,GAAW,GAAGE,EAAqBH,GAAOI,EAAO,QAAQ,GAAG;AAAA,EAAA;AAG3E;"}