@mattilsynet/design 2.2.23 → 2.2.25

package/mtds/toast/toast-helper.js

@@ -1,28 +1,43 @@
-import m from "clsx";
-import l from "../styles.module.css.js";
-import { tag as f, attr as s } from "../utils.js";
-function r(e, o = {}) {
-  const n = document.getElementById(o.id || "") || f("dialog");
-  return s(n, "aria-busy", o.busy ? "true" : null), s(n, "class", m(l.toast, o.className)), s(n, "data-closedby", o.closedby || null), s(n, "data-color", o.color || null), s(n, "data-icon", `${o.icon ?? ""}` || null), s(n, "data-timeout", `${o.timeout ?? ""}` || null), s(n, "id", o.id || `${Date.now()}`), s(n, "open", o.open === !1 ? null : ""), n.innerHTML = e, n.addEventListener("animationend", y, { once: !0 }), document.body.appendChild(n), n.id;
+import clsx from "clsx";
+import styles from "../styles.module.css.js";
+import { tag, attr } from "../utils.js";
+function toast(content, opt = {}) {
+  const dialog = document.getElementById(opt.id || "") || tag("dialog");
+  attr(dialog, "aria-busy", opt.busy ? "true" : null);
+  attr(dialog, "class", clsx(styles.toast, opt.className));
+  attr(dialog, "data-closedby", opt.closedby || null);
+  attr(dialog, "data-color", opt.color || null);
+  attr(dialog, "data-icon", `${opt.icon ?? ""}` || null);
+  attr(dialog, "data-timeout", `${opt.timeout ?? ""}` || null);
+  attr(dialog, "id", opt.id || `${Date.now()}`);
+  attr(dialog, "open", opt.open === false ? null : "");
+  dialog.innerHTML = content;
+  dialog.addEventListener("animationend", handleToastClose, { once: true });
+  document.body.appendChild(dialog);
+  return dialog.id;
 }
-function y({ animationName: e, target: o }) {
-  e === l._toastClose && o.remove();
+function handleToastClose({ animationName, target }) {
+  if (animationName === styles._toastClose)
+    target.remove();
 }
-r.success = (e, o) => r(e, { color: "success", ...o });
-r.danger = (e, o) => r(e, { color: "danger", ...o });
-r.info = (e, o) => r(e, { color: "info", ...o });
-r.warning = (e, o) => r(e, { color: "warning", ...o });
-r.neutral = (e, o) => r(e, { color: "neutral", ...o });
-r.promise = async function(o, n) {
-  const { loading: c, success: i, error: u, ...d } = n, a = r(c, { busy: !0, ...d });
+toast.success = (content, opt) => toast(content, { color: "success", ...opt });
+toast.danger = (content, opt) => toast(content, { color: "danger", ...opt });
+toast.info = (content, opt) => toast(content, { color: "info", ...opt });
+toast.warning = (content, opt) => toast(content, { color: "warning", ...opt });
+toast.neutral = (content, opt) => toast(content, { color: "neutral", ...opt });
+toast.promise = async function promise(action, props) {
+  const { loading, success, error, ...opt } = props;
+  const id = toast(loading, { busy: true, ...opt });
   try {
-    const t = await o();
-    return r.success(i, { id: a, busy: !1 }), t;
-  } catch (t) {
-    throw r.danger(u, { id: a, busy: !1 }), t;
+    const result = await action();
+    toast.success(success, { id, busy: false });
+    return result;
+  } catch (_error) {
+    toast.danger(error, { id, busy: false });
+    throw _error;
   }
 };
 export {
-  r as toast
+  toast
 };
 //# sourceMappingURL=toast-helper.js.map

package/mtds/toast/toast-helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast-helper.js","sources":["../../designsystem/toast/toast-helper.ts"],"sourcesContent":["import clsx from \"clsx\";\nimport styles from \"../styles.module.css\";\nimport { attr, tag } from \"../utils\";\n\nexport type ToastOptions = {\n\tclassName?: string;\n\tclosedby?: \"none\";\n\tcolor?: \"main\" | \"neutral\" | \"success\" | \"danger\" | \"info\" | \"warning\";\n\ticon?: boolean | \"none\";\n\ttimeout?: number | false;\n\tbusy?: boolean;\n\topen?: boolean;\n\tid?: string;\n};\n\nexport function toast(content: string, opt: ToastOptions = {}) {\n\tconst dialog = document.getElementById(opt.id || \"\") || tag(\"dialog\");\n\n\tattr(dialog, \"aria-busy\", opt.busy ? \"true\" : null);\n\tattr(dialog, \"class\", clsx(styles.toast, opt.className));\n\tattr(dialog, \"data-closedby\", opt.closedby || null);\n\tattr(dialog, \"data-color\", opt.color || null);\n\tattr(dialog, \"data-icon\", `${opt.icon ?? \"\"}` || null);\n\tattr(dialog, \"data-timeout\", `${opt.timeout ?? \"\"}` || null);\n\tattr(dialog, \"id\", opt.id || `${Date.now()}`);\n\tattr(dialog, \"open\", opt.open === false ? null : \"\");\n\n\tdialog.innerHTML = content;\n\tdialog.addEventListener(\"animationend\", handleToastClose, { once: true });\n\tdocument.body.appendChild(dialog);\n\treturn dialog.id;\n}\n\nfunction handleToastClose({ animationName, target }: Partial<AnimationEvent>) {\n\tif (animationName === styles._toastClose)\n\t\t(target as HTMLDialogElement).remove();\n}\n\n// Expose toast.danger, toast.info, toast.success etc.\ntoast.success = (content: string, opt?: ToastOptions) =>\n\ttoast(content, { color: \"success\", ...opt });\ntoast.danger = (content: string, opt?: ToastOptions) =>\n\ttoast(content, { color: \"danger\", ...opt });\ntoast.info = (content: string, opt: ToastOptions) =>\n\ttoast(content, { color: \"info\", ...opt });\ntoast.warning = (content: string, opt?: ToastOptions) =>\n\ttoast(content, { color: \"warning\", ...opt });\ntoast.neutral = (content: string, opt?: ToastOptions) =>\n\ttoast(content, { color: \"neutral\", ...opt });\ntoast.promise = async function promise<T>(\n\taction: () => Promise<T>,\n\tprops: ToastOptions & {\n\t\tloading: string;\n\t\tsuccess: string;\n\t\terror: string;\n\t},\n): Promise<T> {\n\tconst { loading, success, error, ...opt } = props;\n\tconst id = toast(loading, { busy: true, ...opt });\n\ttry {\n\t\tconst result = await action();\n\t\ttoast.success(success, { id, busy: false });\n\t\treturn result;\n\t} catch (_error) {\n\t\ttoast.danger(error, { id, busy: false });\n\t\tthrow _error;\n\t}\n};\n"],"names":["toast","content","opt","dialog","tag","attr","clsx","styles","handleToastClose","animationName","target","action","props","loading","success","error","id","result","_error"],"mappings":";;;AAeO,SAASA,EAAMC,GAAiBC,IAAoB,IAAI;AAC9D,QAAMC,IAAS,SAAS,eAAeD,EAAI,MAAM,EAAE,KAAKE,EAAI,QAAQ;AAEpE,SAAAC,EAAKF,GAAQ,aAAaD,EAAI,OAAO,SAAS,IAAI,GAClDG,EAAKF,GAAQ,SAASG,EAAKC,EAAO,OAAOL,EAAI,SAAS,CAAC,GACvDG,EAAKF,GAAQ,iBAAiBD,EAAI,YAAY,IAAI,GAClDG,EAAKF,GAAQ,cAAcD,EAAI,SAAS,IAAI,GAC5CG,EAAKF,GAAQ,aAAa,GAAGD,EAAI,QAAQ,EAAE,MAAM,IAAI,GACrDG,EAAKF,GAAQ,gBAAgB,GAAGD,EAAI,WAAW,EAAE,MAAM,IAAI,GAC3DG,EAAKF,GAAQ,MAAMD,EAAI,MAAM,GAAG,KAAK,IAAA,CAAK,EAAE,GAC5CG,EAAKF,GAAQ,QAAQD,EAAI,SAAS,KAAQ,OAAO,EAAE,GAEnDC,EAAO,YAAYF,GACnBE,EAAO,iBAAiB,gBAAgBK,GAAkB,EAAE,MAAM,IAAM,GACxE,SAAS,KAAK,YAAYL,CAAM,GACzBA,EAAO;AACf;AAEA,SAASK,EAAiB,EAAE,eAAAC,GAAe,QAAAC,KAAmC;AAC7E,EAAID,MAAkBF,EAAO,eAC3BG,EAA6B,OAAA;AAChC;AAGAV,EAAM,UAAU,CAACC,GAAiBC,MACjCF,EAAMC,GAAS,EAAE,OAAO,WAAW,GAAGC,GAAK;AAC5CF,EAAM,SAAS,CAACC,GAAiBC,MAChCF,EAAMC,GAAS,EAAE,OAAO,UAAU,GAAGC,GAAK;AAC3CF,EAAM,OAAO,CAACC,GAAiBC,MAC9BF,EAAMC,GAAS,EAAE,OAAO,QAAQ,GAAGC,GAAK;AACzCF,EAAM,UAAU,CAACC,GAAiBC,MACjCF,EAAMC,GAAS,EAAE,OAAO,WAAW,GAAGC,GAAK;AAC5CF,EAAM,UAAU,CAACC,GAAiBC,MACjCF,EAAMC,GAAS,EAAE,OAAO,WAAW,GAAGC,GAAK;AAC5CF,EAAM,UAAU,eACfW,GACAC,GAKa;AACb,QAAM,EAAE,SAAAC,GAAS,SAAAC,GAAS,OAAAC,GAAO,GAAGb,MAAQU,GACtCI,IAAKhB,EAAMa,GAAS,EAAE,MAAM,IAAM,GAAGX,GAAK;AAChD,MAAI;AACH,UAAMe,IAAS,MAAMN,EAAA;AACrB,WAAAX,EAAM,QAAQc,GAAS,EAAE,IAAAE,GAAI,MAAM,IAAO,GACnCC;AAAA,EACR,SAASC,GAAQ;AAChB,UAAAlB,EAAM,OAAOe,GAAO,EAAE,IAAAC,GAAI,MAAM,IAAO,GACjCE;AAAA,EACP;AACD;"}
+{"version":3,"file":"toast-helper.js","sources":["../../designsystem/toast/toast-helper.ts"],"sourcesContent":["import clsx from \"clsx\";\nimport styles from \"../styles.module.css\";\nimport { attr, tag } from \"../utils\";\n\nexport type ToastOptions = {\n\tclassName?: string;\n\tclosedby?: \"none\";\n\tcolor?: \"main\" | \"neutral\" | \"success\" | \"danger\" | \"info\" | \"warning\";\n\ticon?: boolean | \"none\";\n\ttimeout?: number | false;\n\tbusy?: boolean;\n\topen?: boolean;\n\tid?: string;\n};\n\nexport function toast(content: string, opt: ToastOptions = {}) {\n\tconst dialog = document.getElementById(opt.id || \"\") || tag(\"dialog\");\n\n\tattr(dialog, \"aria-busy\", opt.busy ? \"true\" : null);\n\tattr(dialog, \"class\", clsx(styles.toast, opt.className));\n\tattr(dialog, \"data-closedby\", opt.closedby || null);\n\tattr(dialog, \"data-color\", opt.color || null);\n\tattr(dialog, \"data-icon\", `${opt.icon ?? \"\"}` || null);\n\tattr(dialog, \"data-timeout\", `${opt.timeout ?? \"\"}` || null);\n\tattr(dialog, \"id\", opt.id || `${Date.now()}`);\n\tattr(dialog, \"open\", opt.open === false ? null : \"\");\n\n\tdialog.innerHTML = content;\n\tdialog.addEventListener(\"animationend\", handleToastClose, { once: true });\n\tdocument.body.appendChild(dialog);\n\treturn dialog.id;\n}\n\nfunction handleToastClose({ animationName, target }: Partial<AnimationEvent>) {\n\tif (animationName === styles._toastClose)\n\t\t(target as HTMLDialogElement).remove();\n}\n\n// Expose toast.danger, toast.info, toast.success etc.\ntoast.success = (content: string, opt?: ToastOptions) =>\n\ttoast(content, { color: \"success\", ...opt });\ntoast.danger = (content: string, opt?: ToastOptions) =>\n\ttoast(content, { color: \"danger\", ...opt });\ntoast.info = (content: string, opt: ToastOptions) =>\n\ttoast(content, { color: \"info\", ...opt });\ntoast.warning = (content: string, opt?: ToastOptions) =>\n\ttoast(content, { color: \"warning\", ...opt });\ntoast.neutral = (content: string, opt?: ToastOptions) =>\n\ttoast(content, { color: \"neutral\", ...opt });\ntoast.promise = async function promise<T>(\n\taction: () => Promise<T>,\n\tprops: ToastOptions & {\n\t\tloading: string;\n\t\tsuccess: string;\n\t\terror: string;\n\t},\n): Promise<T> {\n\tconst { loading, success, error, ...opt } = props;\n\tconst id = toast(loading, { busy: true, ...opt });\n\ttry {\n\t\tconst result = await action();\n\t\ttoast.success(success, { id, busy: false });\n\t\treturn result;\n\t} catch (_error) {\n\t\ttoast.danger(error, { id, busy: false });\n\t\tthrow _error;\n\t}\n};\n"],"names":[],"mappings":";;;AAeO,SAAS,MAAM,SAAiB,MAAoB,IAAI;AAC9D,QAAM,SAAS,SAAS,eAAe,IAAI,MAAM,EAAE,KAAK,IAAI,QAAQ;AAEpE,OAAK,QAAQ,aAAa,IAAI,OAAO,SAAS,IAAI;AAClD,OAAK,QAAQ,SAAS,KAAK,OAAO,OAAO,IAAI,SAAS,CAAC;AACvD,OAAK,QAAQ,iBAAiB,IAAI,YAAY,IAAI;AAClD,OAAK,QAAQ,cAAc,IAAI,SAAS,IAAI;AAC5C,OAAK,QAAQ,aAAa,GAAG,IAAI,QAAQ,EAAE,MAAM,IAAI;AACrD,OAAK,QAAQ,gBAAgB,GAAG,IAAI,WAAW,EAAE,MAAM,IAAI;AAC3D,OAAK,QAAQ,MAAM,IAAI,MAAM,GAAG,KAAK,IAAA,CAAK,EAAE;AAC5C,OAAK,QAAQ,QAAQ,IAAI,SAAS,QAAQ,OAAO,EAAE;AAEnD,SAAO,YAAY;AACnB,SAAO,iBAAiB,gBAAgB,kBAAkB,EAAE,MAAM,MAAM;AACxE,WAAS,KAAK,YAAY,MAAM;AAChC,SAAO,OAAO;AACf;AAEA,SAAS,iBAAiB,EAAE,eAAe,UAAmC;AAC7E,MAAI,kBAAkB,OAAO;AAC3B,WAA6B,OAAA;AAChC;AAGA,MAAM,UAAU,CAAC,SAAiB,QACjC,MAAM,SAAS,EAAE,OAAO,WAAW,GAAG,KAAK;AAC5C,MAAM,SAAS,CAAC,SAAiB,QAChC,MAAM,SAAS,EAAE,OAAO,UAAU,GAAG,KAAK;AAC3C,MAAM,OAAO,CAAC,SAAiB,QAC9B,MAAM,SAAS,EAAE,OAAO,QAAQ,GAAG,KAAK;AACzC,MAAM,UAAU,CAAC,SAAiB,QACjC,MAAM,SAAS,EAAE,OAAO,WAAW,GAAG,KAAK;AAC5C,MAAM,UAAU,CAAC,SAAiB,QACjC,MAAM,SAAS,EAAE,OAAO,WAAW,GAAG,KAAK;AAC5C,MAAM,UAAU,eAAe,QAC9B,QACA,OAKa;AACb,QAAM,EAAE,SAAS,SAAS,OAAO,GAAG,QAAQ;AAC5C,QAAM,KAAK,MAAM,SAAS,EAAE,MAAM,MAAM,GAAG,KAAK;AAChD,MAAI;AACH,UAAM,SAAS,MAAM,OAAA;AACrB,UAAM,QAAQ,SAAS,EAAE,IAAI,MAAM,OAAO;AAC1C,WAAO;AAAA,EACR,SAAS,QAAQ;AAChB,UAAM,OAAO,OAAO,EAAE,IAAI,MAAM,OAAO;AACvC,UAAM;AAAA,EACP;AACD;"}

package/mtds/toast/toast-observer.js

@@ -1,20 +1,35 @@
-import r from "../styles.module.css.js";
-import { onLoaded as b, on as u, attr as s } from "../utils.js";
-const m = r.toast.split(" ")[0], l = "data-sort";
-function h({ animationName: t, target: i }) {
-  const o = i;
-  if (t === r._toastTimeout && o.close(), t !== r._toastOpen) return;
-  const c = Number(s(o, "data-timeout"));
-  o.style.setProperty("--mtdsc-toast-timeout", c ? `${c}ms` : null), o.hasAttribute(l) || s(o, l, `${Date.now()}`), s(o, "tabindex", "0"), [...document.querySelectorAll(`.${m}[open]`)].sort((n, e) => Number(s(e, l)) - Number(s(n, l))).reduce((n, e) => (e.style.translate = `0 ${e === i ? 0 : n}px`, n + e.offsetHeight + 5), 0);
+import styles from "../styles.module.css.js";
+import { onLoaded, on, attr } from "../utils.js";
+const CSS_TOAST = styles.toast.split(" ")[0];
+const ATTR_SORT = "data-sort";
+function handleToastState({ animationName, target }) {
+  const dialog = target;
+  if (animationName === styles._toastTimeout) dialog.close();
+  if (animationName !== styles._toastOpen) return;
+  const ms = Number(attr(dialog, "data-timeout"));
+  dialog.style.setProperty("--mtdsc-toast-timeout", ms ? `${ms}ms` : null);
+  dialog.hasAttribute(ATTR_SORT) || attr(dialog, ATTR_SORT, `${Date.now()}`);
+  attr(dialog, "tabindex", "0");
+  [...document.querySelectorAll(`.${CSS_TOAST}[open]`)].sort((a, b) => Number(attr(b, ATTR_SORT)) - Number(attr(a, ATTR_SORT))).reduce((top, toast) => {
+    toast.style.translate = `0 ${toast === target ? 0 : top}px`;
+    return top + toast.offsetHeight + 5;
+  }, 0);
 }
-function T({ target: t, clientX: i, clientY: o }) {
-  if (t instanceof HTMLDialogElement && t.classList.contains(m) && s(t, "data-closedby") !== "none") {
-    const c = t.getBoundingClientRect(), n = window.getComputedStyle(t), e = window.getComputedStyle(t, "::after"), a = c.top + Number.parseInt(n.paddingTop, 10), p = a + Number.parseInt(e.height, 10), d = c.right - Number.parseInt(n.paddingRight, 10), f = d - Number.parseInt(e.width, 10);
-    a <= o && o <= p && f <= i && i <= d && t.close();
+function handleToastClick({ target, clientX: x, clientY: y }) {
+  if (target instanceof HTMLDialogElement && target.classList.contains(CSS_TOAST) && attr(target, "data-closedby") !== "none") {
+    const rect = target.getBoundingClientRect();
+    const toast = window.getComputedStyle(target);
+    const close = window.getComputedStyle(target, "::after");
+    const top = rect.top + Number.parseInt(toast.paddingTop, 10);
+    const bottom = top + Number.parseInt(close.height, 10);
+    const right = rect.right - Number.parseInt(toast.paddingRight, 10);
+    const left = right - Number.parseInt(close.width, 10);
+    const isClose = top <= y && y <= bottom && left <= x && x <= right;
+    if (isClose) target.close();
   }
 }
-b(() => [
-  u(document, "animationstart", h),
-  u(document, "click", T)
+onLoaded(() => [
+  on(document, "animationstart", handleToastState),
+  on(document, "click", handleToastClick)
 ]);
 //# sourceMappingURL=toast-observer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"toast-observer.js","sources":["../../designsystem/toast/toast-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, on, onLoaded } from \"../utils\";\n\nconst CSS_TOAST = styles.toast.split(\" \")[0];\nconst ATTR_SORT = \"data-sort\";\n\nfunction handleToastState({ animationName, target }: Partial<AnimationEvent>) {\n\tconst dialog = target as HTMLDialogElement;\n\tif (animationName === styles._toastTimeout) dialog.close();\n\tif (animationName !== styles._toastOpen) return;\n\n\tconst ms = Number(attr(dialog, \"data-timeout\"));\n\tdialog.style.setProperty(\"--mtdsc-toast-timeout\", ms ? `${ms}ms` : null);\n\tdialog.hasAttribute(ATTR_SORT) || attr(dialog, ATTR_SORT, `${Date.now()}`);\n\tattr(dialog, \"tabindex\", \"0\"); // Make focusable\n\n\t// Setup layout\n\t[...document.querySelectorAll<HTMLDialogElement>(`.${CSS_TOAST}[open]`)]\n\t\t.sort((a, b) => Number(attr(b, ATTR_SORT)) - Number(attr(a, ATTR_SORT)))\n\t\t.reduce((top, toast) => {\n\t\t\ttoast.style.translate = `0 ${toast === target ? 0 : top}px`;\n\t\t\treturn top + toast.offsetHeight + 5;\n\t\t}, 0);\n}\n\nfunction handleToastClick({ target, clientX: x, clientY: y }: MouseEvent) {\n\tif (\n\t\ttarget instanceof HTMLDialogElement &&\n\t\ttarget.classList.contains(CSS_TOAST) &&\n\t\tattr(target, \"data-closedby\") !== \"none\"\n\t) {\n\t\tconst rect = target.getBoundingClientRect();\n\t\tconst toast = window.getComputedStyle(target);\n\t\tconst close = window.getComputedStyle(target, \"::after\");\n\t\tconst top = rect.top + Number.parseInt(toast.paddingTop, 10);\n\t\tconst bottom = top + Number.parseInt(close.height, 10);\n\t\tconst right = rect.right - Number.parseInt(toast.paddingRight, 10);\n\t\tconst left = right - Number.parseInt(close.width, 10);\n\t\tconst isClose = top <= y && y <= bottom && left <= x && x <= right;\n\n\t\tif (isClose) target.close(); // Click is on ::after element\n\t}\n}\n\nonLoaded(() => [\n\ton(document, \"animationstart\", handleToastState),\n\ton(document, \"click\", handleToastClick as EventListener),\n]);\n"],"names":["CSS_TOAST","styles","ATTR_SORT","handleToastState","animationName","target","dialog","ms","attr","a","b","top","toast","handleToastClick","x","y","rect","close","bottom","right","left","onLoaded","on"],"mappings":";;AAGA,MAAMA,IAAYC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC,GACrCC,IAAY;AAElB,SAASC,EAAiB,EAAE,eAAAC,GAAe,QAAAC,KAAmC;AAC7E,QAAMC,IAASD;AAEf,MADID,MAAkBH,EAAO,iBAAeK,EAAO,MAAA,GAC/CF,MAAkBH,EAAO,WAAY;AAEzC,QAAMM,IAAK,OAAOC,EAAKF,GAAQ,cAAc,CAAC;AAC9C,EAAAA,EAAO,MAAM,YAAY,yBAAyBC,IAAK,GAAGA,CAAE,OAAO,IAAI,GACvED,EAAO,aAAaJ,CAAS,KAAKM,EAAKF,GAAQJ,GAAW,GAAG,KAAK,IAAA,CAAK,EAAE,GACzEM,EAAKF,GAAQ,YAAY,GAAG,GAG5B,CAAC,GAAG,SAAS,iBAAoC,IAAIN,CAAS,QAAQ,CAAC,EACrE,KAAK,CAACS,GAAGC,MAAM,OAAOF,EAAKE,GAAGR,CAAS,CAAC,IAAI,OAAOM,EAAKC,GAAGP,CAAS,CAAC,CAAC,EACtE,OAAO,CAACS,GAAKC,OACbA,EAAM,MAAM,YAAY,KAAKA,MAAUP,IAAS,IAAIM,CAAG,MAChDA,IAAMC,EAAM,eAAe,IAChC,CAAC;AACN;AAEA,SAASC,EAAiB,EAAE,QAAAR,GAAQ,SAASS,GAAG,SAASC,KAAiB;AACzE,MACCV,aAAkB,qBAClBA,EAAO,UAAU,SAASL,CAAS,KACnCQ,EAAKH,GAAQ,eAAe,MAAM,QACjC;AACD,UAAMW,IAAOX,EAAO,sBAAA,GACdO,IAAQ,OAAO,iBAAiBP,CAAM,GACtCY,IAAQ,OAAO,iBAAiBZ,GAAQ,SAAS,GACjDM,IAAMK,EAAK,MAAM,OAAO,SAASJ,EAAM,YAAY,EAAE,GACrDM,IAASP,IAAM,OAAO,SAASM,EAAM,QAAQ,EAAE,GAC/CE,IAAQH,EAAK,QAAQ,OAAO,SAASJ,EAAM,cAAc,EAAE,GAC3DQ,IAAOD,IAAQ,OAAO,SAASF,EAAM,OAAO,EAAE;AAGpD,IAFgBN,KAAOI,KAAKA,KAAKG,KAAUE,KAAQN,KAAKA,KAAKK,OAEzC,MAAA;AAAA,EACrB;AACD;AAEAE,EAAS,MAAM;AAAA,EACdC,EAAG,UAAU,kBAAkBnB,CAAgB;AAAA,EAC/CmB,EAAG,UAAU,SAAST,CAAiC;AACxD,CAAC;"}
+{"version":3,"file":"toast-observer.js","sources":["../../designsystem/toast/toast-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, on, onLoaded } from \"../utils\";\n\nconst CSS_TOAST = styles.toast.split(\" \")[0];\nconst ATTR_SORT = \"data-sort\";\n\nfunction handleToastState({ animationName, target }: Partial<AnimationEvent>) {\n\tconst dialog = target as HTMLDialogElement;\n\tif (animationName === styles._toastTimeout) dialog.close();\n\tif (animationName !== styles._toastOpen) return;\n\n\tconst ms = Number(attr(dialog, \"data-timeout\"));\n\tdialog.style.setProperty(\"--mtdsc-toast-timeout\", ms ? `${ms}ms` : null);\n\tdialog.hasAttribute(ATTR_SORT) || attr(dialog, ATTR_SORT, `${Date.now()}`);\n\tattr(dialog, \"tabindex\", \"0\"); // Make focusable\n\n\t// Setup layout\n\t[...document.querySelectorAll<HTMLDialogElement>(`.${CSS_TOAST}[open]`)]\n\t\t.sort((a, b) => Number(attr(b, ATTR_SORT)) - Number(attr(a, ATTR_SORT)))\n\t\t.reduce((top, toast) => {\n\t\t\ttoast.style.translate = `0 ${toast === target ? 0 : top}px`;\n\t\t\treturn top + toast.offsetHeight + 5;\n\t\t}, 0);\n}\n\nfunction handleToastClick({ target, clientX: x, clientY: y }: MouseEvent) {\n\tif (\n\t\ttarget instanceof HTMLDialogElement &&\n\t\ttarget.classList.contains(CSS_TOAST) &&\n\t\tattr(target, \"data-closedby\") !== \"none\"\n\t) {\n\t\tconst rect = target.getBoundingClientRect();\n\t\tconst toast = window.getComputedStyle(target);\n\t\tconst close = window.getComputedStyle(target, \"::after\");\n\t\tconst top = rect.top + Number.parseInt(toast.paddingTop, 10);\n\t\tconst bottom = top + Number.parseInt(close.height, 10);\n\t\tconst right = rect.right - Number.parseInt(toast.paddingRight, 10);\n\t\tconst left = right - Number.parseInt(close.width, 10);\n\t\tconst isClose = top <= y && y <= bottom && left <= x && x <= right;\n\n\t\tif (isClose) target.close(); // Click is on ::after element\n\t}\n}\n\nonLoaded(() => [\n\ton(document, \"animationstart\", handleToastState),\n\ton(document, \"click\", handleToastClick as EventListener),\n]);\n"],"names":[],"mappings":";;AAGA,MAAM,YAAY,OAAO,MAAM,MAAM,GAAG,EAAE,CAAC;AAC3C,MAAM,YAAY;AAElB,SAAS,iBAAiB,EAAE,eAAe,UAAmC;AAC7E,QAAM,SAAS;AACf,MAAI,kBAAkB,OAAO,cAAe,QAAO,MAAA;AACnD,MAAI,kBAAkB,OAAO,WAAY;AAEzC,QAAM,KAAK,OAAO,KAAK,QAAQ,cAAc,CAAC;AAC9C,SAAO,MAAM,YAAY,yBAAyB,KAAK,GAAG,EAAE,OAAO,IAAI;AACvE,SAAO,aAAa,SAAS,KAAK,KAAK,QAAQ,WAAW,GAAG,KAAK,IAAA,CAAK,EAAE;AACzE,OAAK,QAAQ,YAAY,GAAG;AAG5B,GAAC,GAAG,SAAS,iBAAoC,IAAI,SAAS,QAAQ,CAAC,EACrE,KAAK,CAAC,GAAG,MAAM,OAAO,KAAK,GAAG,SAAS,CAAC,IAAI,OAAO,KAAK,GAAG,SAAS,CAAC,CAAC,EACtE,OAAO,CAAC,KAAK,UAAU;AACvB,UAAM,MAAM,YAAY,KAAK,UAAU,SAAS,IAAI,GAAG;AACvD,WAAO,MAAM,MAAM,eAAe;AAAA,EACnC,GAAG,CAAC;AACN;AAEA,SAAS,iBAAiB,EAAE,QAAQ,SAAS,GAAG,SAAS,KAAiB;AACzE,MACC,kBAAkB,qBAClB,OAAO,UAAU,SAAS,SAAS,KACnC,KAAK,QAAQ,eAAe,MAAM,QACjC;AACD,UAAM,OAAO,OAAO,sBAAA;AACpB,UAAM,QAAQ,OAAO,iBAAiB,MAAM;AAC5C,UAAM,QAAQ,OAAO,iBAAiB,QAAQ,SAAS;AACvD,UAAM,MAAM,KAAK,MAAM,OAAO,SAAS,MAAM,YAAY,EAAE;AAC3D,UAAM,SAAS,MAAM,OAAO,SAAS,MAAM,QAAQ,EAAE;AACrD,UAAM,QAAQ,KAAK,QAAQ,OAAO,SAAS,MAAM,cAAc,EAAE;AACjE,UAAM,OAAO,QAAQ,OAAO,SAAS,MAAM,OAAO,EAAE;AACpD,UAAM,UAAU,OAAO,KAAK,KAAK,UAAU,QAAQ,KAAK,KAAK;AAE7D,QAAI,gBAAgB,MAAA;AAAA,EACrB;AACD;AAEA,SAAS,MAAM;AAAA,EACd,GAAG,UAAU,kBAAkB,gBAAgB;AAAA,EAC/C,GAAG,UAAU,SAAS,gBAAiC;AACxD,CAAC;"}

package/mtds/toast/toast.js

@@ -1,54 +1,62 @@
 'use client';
-import { jsx as m } from "react/jsx-runtime";
-import u from "clsx";
-import { createRoot as f } from "react-dom/client";
-import d from "../styles.module.css.js";
-import { IS_BROWSER as w, tag as y } from "../utils.js";
-if (w && !window._mtdsReactToasts) {
-  const t = f(document.body.appendChild(y("div"))), o = /* @__PURE__ */ new Map(), e = () => t.render(Array.from(o.values() || []));
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { createRoot } from "react-dom/client";
+import styles from "../styles.module.css.js";
+import { isBrowser, tag } from "../utils.js";
+if (isBrowser() && !window._mtdsReactToasts) {
+  const root = createRoot(document.body.appendChild(tag("div")));
+  const toasts = /* @__PURE__ */ new Map();
+  const render = () => root.render(Array.from(toasts.values() || []));
   window._mtdsReactToasts = {
-    set: (r, a) => o.set(r, a) && e(),
-    delete: ({ animationName: r, currentTarget: a }) => {
-      r === d._toastClose && (o.delete(a.id), e());
+    set: (id, jsx2) => toasts.set(id, jsx2) && render(),
+    delete: ({ animationName, currentTarget }) => {
+      if (animationName !== styles._toastClose) return;
+      toasts.delete(currentTarget.id);
+      render();
     }
   };
 }
-function s(t, o = {}) {
-  const e = o.id || `${Date.now()}`;
-  return window._mtdsReactToasts?.set(
-    e,
-    /* @__PURE__ */ m(
+function toast(content, opt = {}) {
+  const id = opt.id || `${Date.now()}`;
+  window._mtdsReactToasts?.set(
+    id,
+    /* @__PURE__ */ jsx(
       "dialog",
       {
-        "aria-busy": o.busy,
-        className: u(d.toast, o.className),
-        "data-closedby": o.closedby,
-        "data-color": o.color,
-        "data-timeout": o.timeout,
-        id: e,
+        "aria-busy": opt.busy,
+        className: clsx(styles.toast, opt.className),
+        "data-closedby": opt.closedby,
+        "data-color": opt.color,
+        "data-timeout": opt.timeout,
+        id,
         onAnimationEnd: window._mtdsReactToasts.delete,
-        open: o.open ?? !0,
-        children: t
+        open: opt.open ?? true,
+        children: content
       },
-      e
+      id
     )
-  ), e;
+  );
+  return id;
 }
-s.success = (t, o) => s(t, { color: "success", ...o });
-s.danger = (t, o) => s(t, { color: "danger", ...o });
-s.info = (t, o) => s(t, { color: "info", ...o });
-s.warning = (t, o) => s(t, { color: "warning", ...o });
-s.neutral = (t, o) => s(t, { color: "neutral", ...o });
-s.promise = async function(o, e) {
-  const { loading: r, success: a, error: i, ...l } = e, c = s(r, { busy: !0, ...l });
+toast.success = (content, opt) => toast(content, { color: "success", ...opt });
+toast.danger = (content, opt) => toast(content, { color: "danger", ...opt });
+toast.info = (content, opt) => toast(content, { color: "info", ...opt });
+toast.warning = (content, opt) => toast(content, { color: "warning", ...opt });
+toast.neutral = (content, opt) => toast(content, { color: "neutral", ...opt });
+toast.promise = async function promise(action, props) {
+  const { loading, success, error, ...opt } = props;
+  const id = toast(loading, { busy: true, ...opt });
   try {
-    const n = await o();
-    return s.success(a, { id: c, busy: !1 }), n;
-  } catch (n) {
-    throw s.danger(i, { id: c, busy: !1 }), n;
+    const result = await action();
+    toast.success(success, { id, busy: false });
+    return result;
+  } catch (_error) {
+    toast.danger(error, { id, busy: false });
+    throw _error;
   }
 };
 export {
-  s as toast
+  toast
 };
 //# sourceMappingURL=toast.js.map

package/mtds/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../../designsystem/toast/toast.tsx"],"sourcesContent":["\"use client\";\nimport clsx from \"clsx\";\nimport { createRoot } from \"react-dom/client\";\nimport styles from \"../styles.module.css\";\nimport { IS_BROWSER, tag } from \"../utils\";\nimport type { ToastOptions } from \"./toast-helper\";\n\ndeclare global {\n\tinterface Window {\n\t\t_mtdsReactToasts?: {\n\t\t\tset: (id: string, jsx: React.ReactNode) => void;\n\t\t\tdelete: (event: React.AnimationEvent<HTMLDialogElement>) => void;\n\t\t};\n\t}\n}\n\n// Ensure only a single toast master is created\nif (IS_BROWSER && !window._mtdsReactToasts) {\n\tconst root = createRoot(document.body.appendChild(tag(\"div\")));\n\tconst toasts = new Map<string, React.ReactNode>();\n\tconst render = () => root.render(Array.from(toasts.values() || []));\n\n\t// Expose methods to add/remove toasts from the root container\n\twindow._mtdsReactToasts = {\n\t\tset: (id, jsx) => toasts.set(id, jsx) && render(),\n\t\tdelete: ({ animationName, currentTarget }) => {\n\t\t\tif (animationName !== styles._toastClose) return;\n\t\t\ttoasts.delete(currentTarget.id);\n\t\t\trender();\n\t\t},\n\t};\n}\n\nexport function toast(content: React.ReactNode, opt: ToastOptions = {}) {\n\tconst id = opt.id || `${Date.now()}`;\n\twindow._mtdsReactToasts?.set(\n\t\tid,\n\t\t<dialog\n\t\t\taria-busy={opt.busy}\n\t\t\tclassName={clsx(styles.toast, opt.className)}\n\t\t\tdata-closedby={opt.closedby}\n\t\t\tdata-color={opt.color}\n\t\t\tdata-timeout={opt.timeout}\n\t\t\tid={id}\n\t\t\tkey={id}\n\t\t\tonAnimationEnd={window._mtdsReactToasts.delete}\n\t\t\topen={opt.open ?? true}\n\t\t>\n\t\t\t{content}\n\t\t</dialog>,\n\t);\n\n\treturn id;\n}\n\n// Expose toast.danger, toast.info, toast.success etc.\ntoast.success = (content: React.ReactNode, opt?: ToastOptions) =>\n\ttoast(content, { color: \"success\", ...opt });\ntoast.danger = (content: React.ReactNode, opt?: ToastOptions) =>\n\ttoast(content, { color: \"danger\", ...opt });\ntoast.info = (content: React.ReactNode, opt?: ToastOptions) =>\n\ttoast(content, { color: \"info\", ...opt });\ntoast.warning = (content: React.ReactNode, opt?: ToastOptions) =>\n\ttoast(content, { color: \"warning\", ...opt });\ntoast.neutral = (content: React.ReactNode, opt?: ToastOptions) =>\n\ttoast(content, { color: \"neutral\", ...opt });\ntoast.promise = async function promise<T>(\n\taction: () => Promise<T>,\n\tprops: ToastOptions & {\n\t\tloading: React.ReactNode;\n\t\tsuccess: React.ReactNode;\n\t\terror: React.ReactNode;\n\t},\n): Promise<T> {\n\tconst { loading, success, error, ...opt } = props;\n\tconst id = toast(loading, { busy: true, ...opt });\n\ttry {\n\t\tconst result = await action();\n\t\ttoast.success(success, { id, busy: false });\n\t\treturn result;\n\t} catch (_error) {\n\t\ttoast.danger(error, { id, busy: false });\n\t\tthrow _error;\n\t}\n};\n"],"names":["IS_BROWSER","root","createRoot","tag","toasts","render","id","jsx","animationName","currentTarget","styles","toast","content","opt","clsx","action","props","loading","success","error","result","_error"],"mappings":";;;;;AAiBA,IAAIA,KAAc,CAAC,OAAO,kBAAkB;AAC3C,QAAMC,IAAOC,EAAW,SAAS,KAAK,YAAYC,EAAI,KAAK,CAAC,CAAC,GACvDC,wBAAa,IAAA,GACbC,IAAS,MAAMJ,EAAK,OAAO,MAAM,KAAKG,EAAO,YAAY,CAAA,CAAE,CAAC;AAGlE,SAAO,mBAAmB;AAAA,IACzB,KAAK,CAACE,GAAIC,MAAQH,EAAO,IAAIE,GAAIC,CAAG,KAAKF,EAAA;AAAA,IACzC,QAAQ,CAAC,EAAE,eAAAG,GAAe,eAAAC,QAAoB;AAC7C,MAAID,MAAkBE,EAAO,gBAC7BN,EAAO,OAAOK,EAAc,EAAE,GAC9BJ,EAAA;AAAA,IACD;AAAA,EAAA;AAEF;AAEO,SAASM,EAAMC,GAA0BC,IAAoB,IAAI;AACvE,QAAMP,IAAKO,EAAI,MAAM,GAAG,KAAK,KAAK;AAClC,gBAAO,kBAAkB;AAAA,IACxBP;AAAA,IACA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,aAAWM,EAAI;AAAA,QACf,WAAWC,EAAKJ,EAAO,OAAOG,EAAI,SAAS;AAAA,QAC3C,iBAAeA,EAAI;AAAA,QACnB,cAAYA,EAAI;AAAA,QAChB,gBAAcA,EAAI;AAAA,QAClB,IAAAP;AAAA,QAEA,gBAAgB,OAAO,iBAAiB;AAAA,QACxC,MAAMO,EAAI,QAAQ;AAAA,QAEjB,UAAAD;AAAA,MAAA;AAAA,MAJIN;AAAA,IAAA;AAAA,EAKN,GAGMA;AACR;AAGAK,EAAM,UAAU,CAACC,GAA0BC,MAC1CF,EAAMC,GAAS,EAAE,OAAO,WAAW,GAAGC,GAAK;AAC5CF,EAAM,SAAS,CAACC,GAA0BC,MACzCF,EAAMC,GAAS,EAAE,OAAO,UAAU,GAAGC,GAAK;AAC3CF,EAAM,OAAO,CAACC,GAA0BC,MACvCF,EAAMC,GAAS,EAAE,OAAO,QAAQ,GAAGC,GAAK;AACzCF,EAAM,UAAU,CAACC,GAA0BC,MAC1CF,EAAMC,GAAS,EAAE,OAAO,WAAW,GAAGC,GAAK;AAC5CF,EAAM,UAAU,CAACC,GAA0BC,MAC1CF,EAAMC,GAAS,EAAE,OAAO,WAAW,GAAGC,GAAK;AAC5CF,EAAM,UAAU,eACfI,GACAC,GAKa;AACb,QAAM,EAAE,SAAAC,GAAS,SAAAC,GAAS,OAAAC,GAAO,GAAGN,MAAQG,GACtCV,IAAKK,EAAMM,GAAS,EAAE,MAAM,IAAM,GAAGJ,GAAK;AAChD,MAAI;AACH,UAAMO,IAAS,MAAML,EAAA;AACrB,WAAAJ,EAAM,QAAQO,GAAS,EAAE,IAAAZ,GAAI,MAAM,IAAO,GACnCc;AAAA,EACR,SAASC,GAAQ;AAChB,UAAAV,EAAM,OAAOQ,GAAO,EAAE,IAAAb,GAAI,MAAM,IAAO,GACjCe;AAAA,EACP;AACD;"}
+{"version":3,"file":"toast.js","sources":["../../designsystem/toast/toast.tsx"],"sourcesContent":["\"use client\";\nimport clsx from \"clsx\";\nimport { createRoot } from \"react-dom/client\";\nimport styles from \"../styles.module.css\";\nimport { isBrowser, tag } from \"../utils\";\nimport type { ToastOptions } from \"./toast-helper\";\n\ndeclare global {\n\tinterface Window {\n\t\t_mtdsReactToasts?: {\n\t\t\tset: (id: string, jsx: React.ReactNode) => void;\n\t\t\tdelete: (event: React.AnimationEvent<HTMLDialogElement>) => void;\n\t\t};\n\t}\n}\n\n// Ensure only a single toast master is created\nif (isBrowser() && !window._mtdsReactToasts) {\n\tconst root = createRoot(document.body.appendChild(tag(\"div\")));\n\tconst toasts = new Map<string, React.ReactNode>();\n\tconst render = () => root.render(Array.from(toasts.values() || []));\n\n\t// Expose methods to add/remove toasts from the root container\n\twindow._mtdsReactToasts = {\n\t\tset: (id, jsx) => toasts.set(id, jsx) && render(),\n\t\tdelete: ({ animationName, currentTarget }) => {\n\t\t\tif (animationName !== styles._toastClose) return;\n\t\t\ttoasts.delete(currentTarget.id);\n\t\t\trender();\n\t\t},\n\t};\n}\n\nexport function toast(content: React.ReactNode, opt: ToastOptions = {}) {\n\tconst id = opt.id || `${Date.now()}`;\n\twindow._mtdsReactToasts?.set(\n\t\tid,\n\t\t<dialog\n\t\t\taria-busy={opt.busy}\n\t\t\tclassName={clsx(styles.toast, opt.className)}\n\t\t\tdata-closedby={opt.closedby}\n\t\t\tdata-color={opt.color}\n\t\t\tdata-timeout={opt.timeout}\n\t\t\tid={id}\n\t\t\tkey={id}\n\t\t\tonAnimationEnd={window._mtdsReactToasts.delete}\n\t\t\topen={opt.open ?? true}\n\t\t>\n\t\t\t{content}\n\t\t</dialog>,\n\t);\n\n\treturn id;\n}\n\n// Expose toast.danger, toast.info, toast.success etc.\ntoast.success = (content: React.ReactNode, opt?: ToastOptions) =>\n\ttoast(content, { color: \"success\", ...opt });\ntoast.danger = (content: React.ReactNode, opt?: ToastOptions) =>\n\ttoast(content, { color: \"danger\", ...opt });\ntoast.info = (content: React.ReactNode, opt?: ToastOptions) =>\n\ttoast(content, { color: \"info\", ...opt });\ntoast.warning = (content: React.ReactNode, opt?: ToastOptions) =>\n\ttoast(content, { color: \"warning\", ...opt });\ntoast.neutral = (content: React.ReactNode, opt?: ToastOptions) =>\n\ttoast(content, { color: \"neutral\", ...opt });\ntoast.promise = async function promise<T>(\n\taction: () => Promise<T>,\n\tprops: ToastOptions & {\n\t\tloading: React.ReactNode;\n\t\tsuccess: React.ReactNode;\n\t\terror: React.ReactNode;\n\t},\n): Promise<T> {\n\tconst { loading, success, error, ...opt } = props;\n\tconst id = toast(loading, { busy: true, ...opt });\n\ttry {\n\t\tconst result = await action();\n\t\ttoast.success(success, { id, busy: false });\n\t\treturn result;\n\t} catch (_error) {\n\t\ttoast.danger(error, { id, busy: false });\n\t\tthrow _error;\n\t}\n};\n"],"names":["jsx"],"mappings":";;;;;AAiBA,IAAI,UAAA,KAAe,CAAC,OAAO,kBAAkB;AAC5C,QAAM,OAAO,WAAW,SAAS,KAAK,YAAY,IAAI,KAAK,CAAC,CAAC;AAC7D,QAAM,6BAAa,IAAA;AACnB,QAAM,SAAS,MAAM,KAAK,OAAO,MAAM,KAAK,OAAO,YAAY,CAAA,CAAE,CAAC;AAGlE,SAAO,mBAAmB;AAAA,IACzB,KAAK,CAAC,IAAIA,SAAQ,OAAO,IAAI,IAAIA,IAAG,KAAK,OAAA;AAAA,IACzC,QAAQ,CAAC,EAAE,eAAe,oBAAoB;AAC7C,UAAI,kBAAkB,OAAO,YAAa;AAC1C,aAAO,OAAO,cAAc,EAAE;AAC9B,aAAA;AAAA,IACD;AAAA,EAAA;AAEF;AAEO,SAAS,MAAM,SAA0B,MAAoB,IAAI;AACvE,QAAM,KAAK,IAAI,MAAM,GAAG,KAAK,KAAK;AAClC,SAAO,kBAAkB;AAAA,IACxB;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,aAAW,IAAI;AAAA,QACf,WAAW,KAAK,OAAO,OAAO,IAAI,SAAS;AAAA,QAC3C,iBAAe,IAAI;AAAA,QACnB,cAAY,IAAI;AAAA,QAChB,gBAAc,IAAI;AAAA,QAClB;AAAA,QAEA,gBAAgB,OAAO,iBAAiB;AAAA,QACxC,MAAM,IAAI,QAAQ;AAAA,QAEjB,UAAA;AAAA,MAAA;AAAA,MAJI;AAAA,IAAA;AAAA,EAKN;AAGD,SAAO;AACR;AAGA,MAAM,UAAU,CAAC,SAA0B,QAC1C,MAAM,SAAS,EAAE,OAAO,WAAW,GAAG,KAAK;AAC5C,MAAM,SAAS,CAAC,SAA0B,QACzC,MAAM,SAAS,EAAE,OAAO,UAAU,GAAG,KAAK;AAC3C,MAAM,OAAO,CAAC,SAA0B,QACvC,MAAM,SAAS,EAAE,OAAO,QAAQ,GAAG,KAAK;AACzC,MAAM,UAAU,CAAC,SAA0B,QAC1C,MAAM,SAAS,EAAE,OAAO,WAAW,GAAG,KAAK;AAC5C,MAAM,UAAU,CAAC,SAA0B,QAC1C,MAAM,SAAS,EAAE,OAAO,WAAW,GAAG,KAAK;AAC5C,MAAM,UAAU,eAAe,QAC9B,QACA,OAKa;AACb,QAAM,EAAE,SAAS,SAAS,OAAO,GAAG,QAAQ;AAC5C,QAAM,KAAK,MAAM,SAAS,EAAE,MAAM,MAAM,GAAG,KAAK;AAChD,MAAI;AACH,UAAM,SAAS,MAAM,OAAA;AACrB,UAAM,QAAQ,SAAS,EAAE,IAAI,MAAM,OAAO;AAC1C,WAAO;AAAA,EACR,SAAS,QAAQ;AAChB,UAAM,OAAO,OAAO,EAAE,IAAI,MAAM,OAAO;AACvC,UAAM;AAAA,EACP;AACD;"}

package/mtds/togglegroup/togglegroup-observer.js

@@ -1,13 +1,18 @@
-import c from "../styles.module.css.js";
-import { onLoaded as g, on as l } from "../utils.js";
-const u = `.${c.togglegroup.split(" ")[0]}`;
-function f(e) {
-  const { key: n, target: t } = e, r = t instanceof HTMLInputElement && t.closest(u);
-  if (r && (n === "Enter" && t.click(), n?.startsWith("Arrow"))) {
-    e.preventDefault();
-    const o = r.getElementsByTagName("input"), s = [...o].indexOf(t), i = n.match(/Arrow(Right|Down)/) ? 1 : -1;
-    o[(o.length + s + i) % o.length]?.focus();
+import styles from "../styles.module.css.js";
+import { onLoaded, on } from "../utils.js";
+const CSS_TOGGLEGROUP = `.${styles.togglegroup.split(" ")[0]}`;
+function handleTogglegroupKeydown(event) {
+  const { key, target: el } = event;
+  const group = el instanceof HTMLInputElement && el.closest(CSS_TOGGLEGROUP);
+  if (!group) return;
+  if (key === "Enter") el.click();
+  if (key?.startsWith("Arrow")) {
+    event.preventDefault();
+    const inputs = group.getElementsByTagName("input");
+    const index = [...inputs].indexOf(el);
+    const move = key.match(/Arrow(Right|Down)/) ? 1 : -1;
+    inputs[(inputs.length + index + move) % inputs.length]?.focus();
   }
 }
-g(() => [l(document, "keydown", f)]);
+onLoaded(() => [on(document, "keydown", handleTogglegroupKeydown)]);
 //# sourceMappingURL=togglegroup-observer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"togglegroup-observer.js","sources":["../../designsystem/togglegroup/togglegroup-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { on, onLoaded } from \"../utils\";\n\nconst CSS_TOGGLEGROUP = `.${styles.togglegroup.split(\" \")[0]}`;\n\n// Prevent browsers from showing default validation bubbles\nfunction handleTogglegroupKeydown(event: Event & Partial<KeyboardEvent>) {\n\tconst { key, target: el } = event;\n\tconst group = el instanceof HTMLInputElement && el.closest(CSS_TOGGLEGROUP);\n\n\tif (!group) return;\n\tif (key === \"Enter\") el.click();\n\tif (key?.startsWith(\"Arrow\")) {\n\t\tevent.preventDefault();\n\t\tconst inputs = group.getElementsByTagName(\"input\");\n\t\tconst index = [...inputs].indexOf(el);\n\t\tconst move = key.match(/Arrow(Right|Down)/) ? 1 : -1;\n\t\tinputs[(inputs.length + index + move) % inputs.length]?.focus();\n\t}\n}\n\nonLoaded(() => [on(document, \"keydown\", handleTogglegroupKeydown)]);\n"],"names":["CSS_TOGGLEGROUP","styles","handleTogglegroupKeydown","event","key","el","group","inputs","index","move","onLoaded","on"],"mappings":";;AAGA,MAAMA,IAAkB,IAAIC,EAAO,YAAY,MAAM,GAAG,EAAE,CAAC,CAAC;AAG5D,SAASC,EAAyBC,GAAuC;AACxE,QAAM,EAAE,KAAAC,GAAK,QAAQC,EAAA,IAAOF,GACtBG,IAAQD,aAAc,oBAAoBA,EAAG,QAAQL,CAAe;AAE1E,MAAKM,MACDF,MAAQ,WAASC,EAAG,MAAA,GACpBD,GAAK,WAAW,OAAO,IAAG;AAC7B,IAAAD,EAAM,eAAA;AACN,UAAMI,IAASD,EAAM,qBAAqB,OAAO,GAC3CE,IAAQ,CAAC,GAAGD,CAAM,EAAE,QAAQF,CAAE,GAC9BI,IAAOL,EAAI,MAAM,mBAAmB,IAAI,IAAI;AAClD,IAAAG,GAAQA,EAAO,SAASC,IAAQC,KAAQF,EAAO,MAAM,GAAG,MAAA;AAAA,EACzD;AACD;AAEAG,EAAS,MAAM,CAACC,EAAG,UAAU,WAAWT,CAAwB,CAAC,CAAC;"}
+{"version":3,"file":"togglegroup-observer.js","sources":["../../designsystem/togglegroup/togglegroup-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { on, onLoaded } from \"../utils\";\n\nconst CSS_TOGGLEGROUP = `.${styles.togglegroup.split(\" \")[0]}`;\n\n// Prevent browsers from showing default validation bubbles\nfunction handleTogglegroupKeydown(event: Event & Partial<KeyboardEvent>) {\n\tconst { key, target: el } = event;\n\tconst group = el instanceof HTMLInputElement && el.closest(CSS_TOGGLEGROUP);\n\n\tif (!group) return;\n\tif (key === \"Enter\") el.click();\n\tif (key?.startsWith(\"Arrow\")) {\n\t\tevent.preventDefault();\n\t\tconst inputs = group.getElementsByTagName(\"input\");\n\t\tconst index = [...inputs].indexOf(el);\n\t\tconst move = key.match(/Arrow(Right|Down)/) ? 1 : -1;\n\t\tinputs[(inputs.length + index + move) % inputs.length]?.focus();\n\t}\n}\n\nonLoaded(() => [on(document, \"keydown\", handleTogglegroupKeydown)]);\n"],"names":[],"mappings":";;AAGA,MAAM,kBAAkB,IAAI,OAAO,YAAY,MAAM,GAAG,EAAE,CAAC,CAAC;AAG5D,SAAS,yBAAyB,OAAuC;AACxE,QAAM,EAAE,KAAK,QAAQ,GAAA,IAAO;AAC5B,QAAM,QAAQ,cAAc,oBAAoB,GAAG,QAAQ,eAAe;AAE1E,MAAI,CAAC,MAAO;AACZ,MAAI,QAAQ,QAAS,IAAG,MAAA;AACxB,MAAI,KAAK,WAAW,OAAO,GAAG;AAC7B,UAAM,eAAA;AACN,UAAM,SAAS,MAAM,qBAAqB,OAAO;AACjD,UAAM,QAAQ,CAAC,GAAG,MAAM,EAAE,QAAQ,EAAE;AACpC,UAAM,OAAO,IAAI,MAAM,mBAAmB,IAAI,IAAI;AAClD,YAAQ,OAAO,SAAS,QAAQ,QAAQ,OAAO,MAAM,GAAG,MAAA;AAAA,EACzD;AACD;AAEA,SAAS,MAAM,CAAC,GAAG,UAAU,WAAW,wBAAwB,CAAC,CAAC;"}

package/mtds/togglegroup/togglegroup.d.ts

@@ -3,9 +3,9 @@ export type TogglegroupItemProps = Omit<React.ComponentPropsWithoutRef<"label">,
     name: string;
     value: string;
 };
-export declare const Togglegroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & React.RefAttributes<HTMLFieldSetElement>> & {
-    Item: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, "onChange"> & Pick<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "defaultChecked" | "onChange" | "checked"> & {
+export declare const Togglegroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & import('react').RefAttributes<HTMLFieldSetElement>> & {
+    Item: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, "onChange"> & Pick<Omit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "defaultChecked" | "onChange" | "checked"> & {
         name: string;
         value: string;
-    } & React.RefAttributes<HTMLLabelElement>>;
+    } & import('react').RefAttributes<HTMLLabelElement>>;
 };

package/mtds/togglegroup/togglegroup.js

@@ -1,29 +1,31 @@
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import u from "clsx";
-import { forwardRef as g } from "react";
-import c from "../styles.module.css.js";
-const f = g(
-  function({ className: o, ...r }, e) {
-    return /* @__PURE__ */ t(
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import styles from "../styles.module.css.js";
+const TogglegroupComp = forwardRef(
+  function Togglegroup2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
       "fieldset",
       {
-        className: u(c.togglegroup, o),
-        ref: e,
-        ...r
+        className: clsx(styles.togglegroup, className),
+        ref,
+        ...rest
       }
     );
   }
-), a = g(
-  function({ children: o, checked: r, defaultChecked: e, name: s, onChange: l, ...m }, n) {
-    return /* @__PURE__ */ i("label", { ref: n, ...m, children: [
-      /* @__PURE__ */ t("input", { type: "radio", checked: r, defaultChecked: e, name: s, onChange: l }),
-      o
+);
+const TogglegroupItem = forwardRef(
+  function TogglegroupItem2({ children, checked, defaultChecked, name, onChange, ...rest }, ref) {
+    return /* @__PURE__ */ jsxs("label", { ref, ...rest, children: [
+      /* @__PURE__ */ jsx("input", { type: "radio", ...{ checked, defaultChecked, name, onChange } }),
+      children
     ] });
   }
-), I = Object.assign(f, {
-  Item: a
+);
+const Togglegroup = Object.assign(TogglegroupComp, {
+  Item: TogglegroupItem
 });
 export {
-  I as Togglegroup
+  Togglegroup
 };
 //# sourceMappingURL=togglegroup.js.map

package/mtds/togglegroup/togglegroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"togglegroup.js","sources":["../../designsystem/togglegroup/togglegroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type TogglegroupProps = React.ComponentPropsWithoutRef<\"fieldset\">;\nexport type TogglegroupItemProps = Omit<\n\tReact.ComponentPropsWithoutRef<\"label\">,\n\t\"onChange\"\n> &\n\tPick<\n\t\tReact.ComponentPropsWithoutRef<\"input\">,\n\t\t\"defaultChecked\" | \"checked\" | \"onChange\"\n\t> & { name: string; value: string }; // Make name and value required\n\nconst TogglegroupComp = forwardRef<HTMLFieldSetElement, TogglegroupProps>(\n\tfunction Togglegroup({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<fieldset\n\t\t\t\tclassName={clsx(styles.togglegroup, className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\nconst TogglegroupItem = forwardRef<HTMLLabelElement, TogglegroupItemProps>(\n\tfunction TogglegroupItem(\n\t\t{ children, checked, defaultChecked, name, onChange, ...rest },\n\t\tref,\n\t) {\n\t\treturn (\n\t\t\t<label ref={ref} {...rest}>\n\t\t\t\t<input type=\"radio\" {...{ checked, defaultChecked, name, onChange }} />\n\t\t\t\t{children}\n\t\t\t</label>\n\t\t);\n\t},\n);\n\nexport const Togglegroup = Object.assign(TogglegroupComp, {\n\tItem: TogglegroupItem,\n});\n"],"names":["TogglegroupComp","forwardRef","className","rest","ref","jsx","clsx","styles","TogglegroupItem","children","checked","defaultChecked","name","onChange","jsxs","Togglegroup"],"mappings":";;;;AAcA,MAAMA,IAAkBC;AAAA,EACvB,SAAqB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AACjD,WACC,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAWC,EAAKC,EAAO,aAAaL,CAAS;AAAA,QAC7C,KAAAE;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACD,GACMK,IAAkBP;AAAA,EACvB,SACC,EAAE,UAAAQ,GAAU,SAAAC,GAAS,gBAAAC,GAAgB,MAAAC,GAAM,UAAAC,GAAU,GAAGV,EAAA,GACxDC,GACC;AACD,WACC,gBAAAU,EAAC,SAAA,EAAM,KAAAV,GAAW,GAAGD,GACpB,UAAA;AAAA,MAAA,gBAAAE,EAAC,SAAA,EAAM,MAAK,SAAc,SAAAK,GAAS,gBAAAC,GAAgB,MAAAC,GAAM,UAAAC,GAAY;AAAA,MACpEJ;AAAA,IAAA,GACF;AAAA,EAEF;AACD,GAEaM,IAAc,OAAO,OAAOf,GAAiB;AAAA,EACzD,MAAMQ;AACP,CAAC;"}
+{"version":3,"file":"togglegroup.js","sources":["../../designsystem/togglegroup/togglegroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type TogglegroupProps = React.ComponentPropsWithoutRef<\"fieldset\">;\nexport type TogglegroupItemProps = Omit<\n\tReact.ComponentPropsWithoutRef<\"label\">,\n\t\"onChange\"\n> &\n\tPick<\n\t\tReact.ComponentPropsWithoutRef<\"input\">,\n\t\t\"defaultChecked\" | \"checked\" | \"onChange\"\n\t> & { name: string; value: string }; // Make name and value required\n\nconst TogglegroupComp = forwardRef<HTMLFieldSetElement, TogglegroupProps>(\n\tfunction Togglegroup({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<fieldset\n\t\t\t\tclassName={clsx(styles.togglegroup, className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\nconst TogglegroupItem = forwardRef<HTMLLabelElement, TogglegroupItemProps>(\n\tfunction TogglegroupItem(\n\t\t{ children, checked, defaultChecked, name, onChange, ...rest },\n\t\tref,\n\t) {\n\t\treturn (\n\t\t\t<label ref={ref} {...rest}>\n\t\t\t\t<input type=\"radio\" {...{ checked, defaultChecked, name, onChange }} />\n\t\t\t\t{children}\n\t\t\t</label>\n\t\t);\n\t},\n);\n\nexport const Togglegroup = Object.assign(TogglegroupComp, {\n\tItem: TogglegroupItem,\n});\n"],"names":["Togglegroup","TogglegroupItem"],"mappings":";;;;AAcA,MAAM,kBAAkB;AAAA,EACvB,SAASA,aAAY,EAAE,WAAW,GAAG,KAAA,GAAQ,KAAK;AACjD,WACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAW,KAAK,OAAO,aAAa,SAAS;AAAA,QAC7C;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACD;AACA,MAAM,kBAAkB;AAAA,EACvB,SAASC,iBACR,EAAE,UAAU,SAAS,gBAAgB,MAAM,UAAU,GAAG,KAAA,GACxD,KACC;AACD,WACC,qBAAC,SAAA,EAAM,KAAW,GAAG,MACpB,UAAA;AAAA,MAAA,oBAAC,SAAA,EAAM,MAAK,SAAS,GAAG,EAAE,SAAS,gBAAgB,MAAM,SAAA,GAAY;AAAA,MACpE;AAAA,IAAA,GACF;AAAA,EAEF;AACD;AAEO,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACzD,MAAM;AACP,CAAC;"}

package/mtds/tooltip/tooltip-observer.js

@@ -1,43 +1,59 @@
-import { flip as T, shift as w } from "@floating-ui/dom";
-import E from "../styles.module.css.js";
-import { IS_BROWSER as h, tag as y, onLoaded as I, on as a, onMutation as L, QUICK_EVENT as d, attr as l, anchorPosition as r } from "../utils.js";
-const p = "Escape", g = 300, u = "mtds-tooltip", e = h ? document.getElementById(u) || y("div", {
-  class: E._tooltip,
-  id: u,
+import { flip, shift } from "@floating-ui/dom";
+import styles from "../styles.module.css.js";
+import { isBrowser, tag, onLoaded, on, onMutation, QUICK_EVENT, attr, anchorPosition } from "../utils.js";
+const ESC = "Escape";
+const THROTTLE_DELAY = 300;
+const TOOLTIP_ID = "mtds-tooltip";
+const TOOLTIP = isBrowser() ? document.getElementById(TOOLTIP_ID) || tag("div", {
+  class: styles._tooltip,
+  id: TOOLTIP_ID,
   popover: "manual"
 }) : null;
-let c = null, f = Number.NEGATIVE_INFINITY, m = 0;
-function s({ target: n, type: t, key: o }) {
-  if (t === "keydown" && o !== p) return;
-  const i = f + g - Date.now();
-  clearTimeout(m), m = setTimeout(
-    C,
-    Math.max(i, 0),
-    o === p ? null : n
+let ANCHOR = null;
+let LAST_CALL = Number.NEGATIVE_INFINITY;
+let THROTTLE = 0;
+function handleTipToggle({ target, type, key }) {
+  if (type === "keydown" && key !== ESC) return;
+  const wait = LAST_CALL + THROTTLE_DELAY - Date.now();
+  clearTimeout(THROTTLE);
+  THROTTLE = setTimeout(
+    handleMoveThrottled,
+    Math.max(wait, 0),
+    key === ESC ? null : target
   );
 }
-function C(n) {
-  if (f = Date.now(), !e || n === e) return;
-  e?.isConnected || document.body.append(e);
-  let t = n?.closest?.("[data-tooltip]") || null;
-  if (t === c) return;
-  const o = t && l(t, "data-tooltip") || "", i = t && l(t, "data-tooltip-position") || window.getComputedStyle(t || document.body).getPropertyValue("--mtds-tooltip-position")?.trim() || "top";
-  (!o || o === "false" || o === "true" || i === "none") && (t = null), t && (e.textContent = o), r(e, !1), c = t, e.hidePopover(), e.togglePopover(!!t), r(e, t || !1, {
+function handleMoveThrottled(target) {
+  LAST_CALL = Date.now();
+  if (!TOOLTIP || target === TOOLTIP) return;
+  if (!TOOLTIP?.isConnected) document.body.append(TOOLTIP);
+  let anchor = target?.closest?.("[data-tooltip]") || null;
+  if (anchor === ANCHOR) return;
+  const text = anchor && attr(anchor, "data-tooltip") || "";
+  const position = anchor && attr(anchor, "data-tooltip-position") || window.getComputedStyle(anchor || document.body).getPropertyValue("--mtds-tooltip-position")?.trim() || "top";
+  const isHidden = !text || text === "false" || text === "true" || position === "none";
+  if (isHidden) anchor = null;
+  if (anchor) TOOLTIP.textContent = text;
+  anchorPosition(TOOLTIP, false);
+  ANCHOR = anchor;
+  TOOLTIP.hidePopover();
+  TOOLTIP.togglePopover(!!anchor);
+  anchorPosition(TOOLTIP, anchor || false, {
     strategy: "fixed",
-    placement: i,
-    middleware: [T(), w({ padding: 10 })]
+    placement: position,
+    middleware: [flip(), shift({ padding: 10 })]
   });
 }
-function O() {
-  document.querySelectorAll("[data-tooltip]").forEach((n) => {
-    const t = !n?.textContent?.trim(), o = l(n, "data-tooltip");
-    l(n, `aria-${t ? "label" : "description"}`, o);
+function handleTipLabels() {
+  document.querySelectorAll("[data-tooltip]").forEach((el) => {
+    const empty = !el?.textContent?.trim();
+    const text = attr(el, "data-tooltip");
+    attr(el, `aria-${empty ? "label" : "description"}`, text);
   });
 }
-I(() => [
-  a(document, "blur,focus,mouseout,mouseover", s, d),
-  a(window, "keydown", s, d),
-  a(window, "blur", s, d),
-  L(O, "data-tooltip")
+onLoaded(() => [
+  on(document, "blur,focus,mouseout,mouseover", handleTipToggle, QUICK_EVENT),
+  on(window, "keydown", handleTipToggle, QUICK_EVENT),
+  on(window, "blur", handleTipToggle, QUICK_EVENT),
+  onMutation(handleTipLabels, "data-tooltip")
 ]);
 //# sourceMappingURL=tooltip-observer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip-observer.js","sources":["../../designsystem/tooltip/tooltip-observer.ts"],"sourcesContent":["import { flip, type Placement, shift } from \"@floating-ui/dom\";\nimport styles from \"../styles.module.css\";\nimport {\n\tanchorPosition,\n\tattr,\n\tIS_BROWSER,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tQUICK_EVENT,\n\ttag,\n} from \"../utils\";\n\nconst ESC = \"Escape\";\nconst THROTTLE_DELAY = 300;\nconst TOOLTIP_ID = \"mtds-tooltip\";\nconst TOOLTIP = IS_BROWSER\n\t? document.getElementById(TOOLTIP_ID) ||\n\t\ttag(\"div\", {\n\t\t\tclass: styles._tooltip,\n\t\t\tid: TOOLTIP_ID,\n\t\t\tpopover: \"manual\",\n\t\t})\n\t: null;\n\nlet ANCHOR: Element | null = null;\nlet LAST_CALL = Number.NEGATIVE_INFINITY;\nlet THROTTLE: number | ReturnType<typeof setTimeout> = 0;\n\nfunction handleTipToggle({ target, type, key }: Event & { key?: string }) {\n\tif (type === \"keydown\" && key !== ESC) return; // Allow ESC dismiss to follow https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n\tconst wait = LAST_CALL + THROTTLE_DELAY - Date.now();\n\tclearTimeout(THROTTLE);\n\tTHROTTLE = setTimeout(\n\t\thandleMoveThrottled,\n\t\tMath.max(wait, 0),\n\t\tkey === ESC ? null : target,\n\t);\n}\n\n// Using a throttled function to avoid performance issues\nfunction handleMoveThrottled(target: Element | null) {\n\tLAST_CALL = Date.now();\n\n\t// Build and append tooltip if not existing\n\tif (!TOOLTIP || target === TOOLTIP) return; // Allow tooltip to be hovered, following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\n\tif (!TOOLTIP?.isConnected) document.body.append(TOOLTIP); // Ensure connected\n\tlet anchor = target?.closest?.<Element>(\"[data-tooltip]\") || null;\n\n\t// No need to update\n\tif (anchor === ANCHOR) return;\n\n\tconst text = (anchor && attr(anchor, \"data-tooltip\")) || \"\";\n\tconst position =\n\t\t(anchor && attr(anchor, \"data-tooltip-position\")) ||\n\t\twindow\n\t\t\t.getComputedStyle(anchor || document.body)\n\t\t\t.getPropertyValue(\"--mtds-tooltip-position\")\n\t\t\t?.trim() ||\n\t\t\"top\"; // Position can both be set by attribute or CSS custom property\n\n\tconst isHidden =\n\t\t!text || text === \"false\" || text === \"true\" || position === \"none\";\n\n\tif (isHidden) anchor = null; // Do not show tooltip if boolish value\n\tif (anchor) TOOLTIP.textContent = text; // Only update content if new anchor\n\n\tanchorPosition(TOOLTIP, false); // Reset anchor position\n\n\tANCHOR = anchor; // Store new anchor - might be null if no new anchor\n\tTOOLTIP.hidePopover(); // Hide tooltip so it can be placed on top-layer on next show\n\tTOOLTIP.togglePopover(!!anchor);\n\tanchorPosition(TOOLTIP, anchor || false, {\n\t\tstrategy: \"fixed\",\n\t\tplacement: position as Placement,\n\t\tmiddleware: [flip(), shift({ padding: 10 })],\n\t});\n}\n\nfunction handleTipLabels() {\n\tdocument.querySelectorAll(\"[data-tooltip]\").forEach((el) => {\n\t\tconst empty = !el?.textContent?.trim();\n\t\tconst text = attr(el, \"data-tooltip\");\n\t\tattr(el, `aria-${empty ? \"label\" : \"description\"}`, text);\n\t});\n}\n\nonLoaded(() => [\n\ton(document, \"blur,focus,mouseout,mouseover\", handleTipToggle, QUICK_EVENT),\n\ton(window, \"keydown\", handleTipToggle, QUICK_EVENT),\n\ton(window, \"blur\", handleTipToggle, QUICK_EVENT),\n\tonMutation(handleTipLabels, \"data-tooltip\"),\n]);\n"],"names":["ESC","THROTTLE_DELAY","TOOLTIP_ID","TOOLTIP","IS_BROWSER","tag","styles","ANCHOR","LAST_CALL","THROTTLE","handleTipToggle","target","type","key","wait","handleMoveThrottled","anchor","text","attr","position","anchorPosition","flip","shift","handleTipLabels","el","empty","onLoaded","on","QUICK_EVENT","onMutation"],"mappings":";;;AAaA,MAAMA,IAAM,UACNC,IAAiB,KACjBC,IAAa,gBACbC,IAAUC,IACb,SAAS,eAAeF,CAAU,KACnCG,EAAI,OAAO;AAAA,EACV,OAAOC,EAAO;AAAA,EACd,IAAIJ;AAAA,EACJ,SAAS;AACV,CAAC,IACA;AAEH,IAAIK,IAAyB,MACzBC,IAAY,OAAO,mBACnBC,IAAmD;AAEvD,SAASC,EAAgB,EAAE,QAAAC,GAAQ,MAAAC,GAAM,KAAAC,KAAiC;AACzE,MAAID,MAAS,aAAaC,MAAQb,EAAK;AACvC,QAAMc,IAAON,IAAYP,IAAiB,KAAK,IAAA;AAC/C,eAAaQ,CAAQ,GACrBA,IAAW;AAAA,IACVM;AAAA,IACA,KAAK,IAAID,GAAM,CAAC;AAAA,IAChBD,MAAQb,IAAM,OAAOW;AAAA,EAAA;AAEvB;AAGA,SAASI,EAAoBJ,GAAwB;AAIpD,MAHAH,IAAY,KAAK,IAAA,GAGb,CAACL,KAAWQ,MAAWR,EAAS;AACpC,EAAKA,GAAS,eAAa,SAAS,KAAK,OAAOA,CAAO;AACvD,MAAIa,IAASL,GAAQ,UAAmB,gBAAgB,KAAK;AAG7D,MAAIK,MAAWT,EAAQ;AAEvB,QAAMU,IAAQD,KAAUE,EAAKF,GAAQ,cAAc,KAAM,IACnDG,IACJH,KAAUE,EAAKF,GAAQ,uBAAuB,KAC/C,OACE,iBAAiBA,KAAU,SAAS,IAAI,EACxC,iBAAiB,yBAAyB,GACzC,UACH;AAKD,GAFC,CAACC,KAAQA,MAAS,WAAWA,MAAS,UAAUE,MAAa,YAEhDH,IAAS,OACnBA,QAAgB,cAAcC,IAElCG,EAAejB,GAAS,EAAK,GAE7BI,IAASS,GACTb,EAAQ,YAAA,GACRA,EAAQ,cAAc,CAAC,CAACa,CAAM,GAC9BI,EAAejB,GAASa,KAAU,IAAO;AAAA,IACxC,UAAU;AAAA,IACV,WAAWG;AAAA,IACX,YAAY,CAACE,EAAA,GAAQC,EAAM,EAAE,SAAS,IAAI,CAAC;AAAA,EAAA,CAC3C;AACF;AAEA,SAASC,IAAkB;AAC1B,WAAS,iBAAiB,gBAAgB,EAAE,QAAQ,CAACC,MAAO;AAC3D,UAAMC,IAAQ,CAACD,GAAI,aAAa,KAAA,GAC1BP,IAAOC,EAAKM,GAAI,cAAc;AACpC,IAAAN,EAAKM,GAAI,QAAQC,IAAQ,UAAU,aAAa,IAAIR,CAAI;AAAA,EACzD,CAAC;AACF;AAEAS,EAAS,MAAM;AAAA,EACdC,EAAG,UAAU,iCAAiCjB,GAAiBkB,CAAW;AAAA,EAC1ED,EAAG,QAAQ,WAAWjB,GAAiBkB,CAAW;AAAA,EAClDD,EAAG,QAAQ,QAAQjB,GAAiBkB,CAAW;AAAA,EAC/CC,EAAWN,GAAiB,cAAc;AAC3C,CAAC;"}
+{"version":3,"file":"tooltip-observer.js","sources":["../../designsystem/tooltip/tooltip-observer.ts"],"sourcesContent":["import { flip, type Placement, shift } from \"@floating-ui/dom\";\nimport styles from \"../styles.module.css\";\nimport {\n\tanchorPosition,\n\tattr,\n\tisBrowser,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tQUICK_EVENT,\n\ttag,\n} from \"../utils\";\n\nconst ESC = \"Escape\";\nconst THROTTLE_DELAY = 300;\nconst TOOLTIP_ID = \"mtds-tooltip\";\nconst TOOLTIP = isBrowser()\n\t? document.getElementById(TOOLTIP_ID) ||\n\t\ttag(\"div\", {\n\t\t\tclass: styles._tooltip,\n\t\t\tid: TOOLTIP_ID,\n\t\t\tpopover: \"manual\",\n\t\t})\n\t: null;\n\nlet ANCHOR: Element | null = null;\nlet LAST_CALL = Number.NEGATIVE_INFINITY;\nlet THROTTLE: number | ReturnType<typeof setTimeout> = 0;\n\nfunction handleTipToggle({ target, type, key }: Event & { key?: string }) {\n\tif (type === \"keydown\" && key !== ESC) return; // Allow ESC dismiss to follow https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n\tconst wait = LAST_CALL + THROTTLE_DELAY - Date.now();\n\tclearTimeout(THROTTLE);\n\tTHROTTLE = setTimeout(\n\t\thandleMoveThrottled,\n\t\tMath.max(wait, 0),\n\t\tkey === ESC ? null : target,\n\t);\n}\n\n// Using a throttled function to avoid performance issues\nfunction handleMoveThrottled(target: Element | null) {\n\tLAST_CALL = Date.now();\n\n\t// Build and append tooltip if not existing\n\tif (!TOOLTIP || target === TOOLTIP) return; // Allow tooltip to be hovered, following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\n\tif (!TOOLTIP?.isConnected) document.body.append(TOOLTIP); // Ensure connected\n\tlet anchor = target?.closest?.<Element>(\"[data-tooltip]\") || null;\n\n\t// No need to update\n\tif (anchor === ANCHOR) return;\n\n\tconst text = (anchor && attr(anchor, \"data-tooltip\")) || \"\";\n\tconst position =\n\t\t(anchor && attr(anchor, \"data-tooltip-position\")) ||\n\t\twindow\n\t\t\t.getComputedStyle(anchor || document.body)\n\t\t\t.getPropertyValue(\"--mtds-tooltip-position\")\n\t\t\t?.trim() ||\n\t\t\"top\"; // Position can both be set by attribute or CSS custom property\n\n\tconst isHidden =\n\t\t!text || text === \"false\" || text === \"true\" || position === \"none\";\n\n\tif (isHidden) anchor = null; // Do not show tooltip if boolish value\n\tif (anchor) TOOLTIP.textContent = text; // Only update content if new anchor\n\n\tanchorPosition(TOOLTIP, false); // Reset anchor position\n\n\tANCHOR = anchor; // Store new anchor - might be null if no new anchor\n\tTOOLTIP.hidePopover(); // Hide tooltip so it can be placed on top-layer on next show\n\tTOOLTIP.togglePopover(!!anchor);\n\tanchorPosition(TOOLTIP, anchor || false, {\n\t\tstrategy: \"fixed\",\n\t\tplacement: position as Placement,\n\t\tmiddleware: [flip(), shift({ padding: 10 })],\n\t});\n}\n\nfunction handleTipLabels() {\n\tdocument.querySelectorAll(\"[data-tooltip]\").forEach((el) => {\n\t\tconst empty = !el?.textContent?.trim();\n\t\tconst text = attr(el, \"data-tooltip\");\n\t\tattr(el, `aria-${empty ? \"label\" : \"description\"}`, text);\n\t});\n}\n\nonLoaded(() => [\n\ton(document, \"blur,focus,mouseout,mouseover\", handleTipToggle, QUICK_EVENT),\n\ton(window, \"keydown\", handleTipToggle, QUICK_EVENT),\n\ton(window, \"blur\", handleTipToggle, QUICK_EVENT),\n\tonMutation(handleTipLabels, \"data-tooltip\"),\n]);\n"],"names":[],"mappings":";;;AAaA,MAAM,MAAM;AACZ,MAAM,iBAAiB;AACvB,MAAM,aAAa;AACnB,MAAM,UAAU,cACb,SAAS,eAAe,UAAU,KACnC,IAAI,OAAO;AAAA,EACV,OAAO,OAAO;AAAA,EACd,IAAI;AAAA,EACJ,SAAS;AACV,CAAC,IACA;AAEH,IAAI,SAAyB;AAC7B,IAAI,YAAY,OAAO;AACvB,IAAI,WAAmD;AAEvD,SAAS,gBAAgB,EAAE,QAAQ,MAAM,OAAiC;AACzE,MAAI,SAAS,aAAa,QAAQ,IAAK;AACvC,QAAM,OAAO,YAAY,iBAAiB,KAAK,IAAA;AAC/C,eAAa,QAAQ;AACrB,aAAW;AAAA,IACV;AAAA,IACA,KAAK,IAAI,MAAM,CAAC;AAAA,IAChB,QAAQ,MAAM,OAAO;AAAA,EAAA;AAEvB;AAGA,SAAS,oBAAoB,QAAwB;AACpD,cAAY,KAAK,IAAA;AAGjB,MAAI,CAAC,WAAW,WAAW,QAAS;AACpC,MAAI,CAAC,SAAS,YAAa,UAAS,KAAK,OAAO,OAAO;AACvD,MAAI,SAAS,QAAQ,UAAmB,gBAAgB,KAAK;AAG7D,MAAI,WAAW,OAAQ;AAEvB,QAAM,OAAQ,UAAU,KAAK,QAAQ,cAAc,KAAM;AACzD,QAAM,WACJ,UAAU,KAAK,QAAQ,uBAAuB,KAC/C,OACE,iBAAiB,UAAU,SAAS,IAAI,EACxC,iBAAiB,yBAAyB,GACzC,UACH;AAED,QAAM,WACL,CAAC,QAAQ,SAAS,WAAW,SAAS,UAAU,aAAa;AAE9D,MAAI,SAAU,UAAS;AACvB,MAAI,gBAAgB,cAAc;AAElC,iBAAe,SAAS,KAAK;AAE7B,WAAS;AACT,UAAQ,YAAA;AACR,UAAQ,cAAc,CAAC,CAAC,MAAM;AAC9B,iBAAe,SAAS,UAAU,OAAO;AAAA,IACxC,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY,CAAC,KAAA,GAAQ,MAAM,EAAE,SAAS,IAAI,CAAC;AAAA,EAAA,CAC3C;AACF;AAEA,SAAS,kBAAkB;AAC1B,WAAS,iBAAiB,gBAAgB,EAAE,QAAQ,CAAC,OAAO;AAC3D,UAAM,QAAQ,CAAC,IAAI,aAAa,KAAA;AAChC,UAAM,OAAO,KAAK,IAAI,cAAc;AACpC,SAAK,IAAI,QAAQ,QAAQ,UAAU,aAAa,IAAI,IAAI;AAAA,EACzD,CAAC;AACF;AAEA,SAAS,MAAM;AAAA,EACd,GAAG,UAAU,iCAAiC,iBAAiB,WAAW;AAAA,EAC1E,GAAG,QAAQ,WAAW,iBAAiB,WAAW;AAAA,EAClD,GAAG,QAAQ,QAAQ,iBAAiB,WAAW;AAAA,EAC/C,WAAW,iBAAiB,cAAc;AAC3C,CAAC;"}