@mattilsynet/design 2.2.8 → 2.2.10

package/mtds/app/app-observer.js

@@ -1,6 +1,6 @@
 import S from "../styles.module.css.js";
 import { onLoaded as _, onMutation as P, on as r, QUICK_EVENT as p, debounce as E } from "../utils.js";
-import "./app-toggle.js";
+import "./app-toggle2.js";
 const g = S.app.split(" ")[0], h = S.sticky.split(" ")[0], I = '[data-command="toggle-app-expanded"]', y = `.${g} > dialog,.${g} dialog ~ main`, C = (t) => {
   document.startViewTransition ? document.startViewTransition(t) : t();
 }, x = (t) => (

package/mtds/app/app-toggle.js

@@ -1,11 +1,27 @@
-typeof window < "u" && window.CSSStyleSheet && document.adoptedStyleSheets && (() => {
-  const e = "--mtds-app-expanded", d = new CSSStyleSheet(), o = () => !window.localStorage.getItem(e)?.includes("false");
-  document.adoptedStyleSheets.push(d), window.mtdsToggleAppExpanded = (n) => {
-    try {
-      const t = n ?? !o();
-      d.replaceSync?.(`:root { ${e}: var(${e}--${t})}`), window.localStorage.setItem(e, t);
-    } catch {
-    }
-  }, window.mtdsToggleAppExpanded(o());
-})();
+const t = `if (
+	typeof window !== "undefined" &&
+	window.CSSStyleSheet &&
+	document.adoptedStyleSheets
+)
+	(() => {
+		const key = "--mtds-app-expanded";
+		const sheet = new CSSStyleSheet();
+		const prev = () => !window.localStorage.getItem(key)?.includes("false");
+
+		document.adoptedStyleSheets.push(sheet);
+		window.mtdsToggleAppExpanded = (force) => {
+			try {
+				const next = force ?? !prev();
+				sheet.replaceSync?.(\`:root { \${key}: var(\${key}--\${next})}\`);
+				window.localStorage.setItem(key, next);
+			} catch (_err) {} // localStorage is full or replaceSync is not supported
+		};
+
+		// Set and store initial state
+		window.mtdsToggleAppExpanded(prev());
+	})();
+`;
+export {
+  t as default
+};
 //# sourceMappingURL=app-toggle.js.map

package/mtds/app/app-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-toggle.js","sources":["../../designsystem/app/app-toggle.js"],"sourcesContent":["if (\n\ttypeof window !== \"undefined\" &&\n\twindow.CSSStyleSheet &&\n\tdocument.adoptedStyleSheets\n)\n\t(() => {\n\t\tconst key = \"--mtds-app-expanded\";\n\t\tconst sheet = new CSSStyleSheet();\n\t\tconst prev = () => !window.localStorage.getItem(key)?.includes(\"false\");\n\n\t\tdocument.adoptedStyleSheets.push(sheet);\n\t\twindow.mtdsToggleAppExpanded = (force) => {\n\t\t\ttry {\n\t\t\t\tconst next = force ?? !prev();\n\t\t\t\tsheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\n\t\t\t\twindow.localStorage.setItem(key, next);\n\t\t\t} catch (_err) {} // localStorage is full or replaceSync is not supported\n\t\t};\n\n\t\t// Set and store initial state\n\t\twindow.mtdsToggleAppExpanded(prev());\n\t})();\n"],"names":["key","sheet","prev","force","next"],"mappings":"AACC,OAAO,SAAW,OAClB,OAAO,iBACP,SAAS,uBAER,MAAM;AACN,QAAMA,IAAM,uBACNC,IAAQ,IAAI,cAAa,GACzBC,IAAO,MAAM,CAAC,OAAO,aAAa,QAAQF,CAAG,GAAG,SAAS,OAAO;AAEtE,WAAS,mBAAmB,KAAKC,CAAK,GACtC,OAAO,wBAAwB,CAACE,MAAU;AACzC,QAAI;AACH,YAAMC,IAAOD,KAAS,CAACD,EAAI;AAC3B,MAAAD,EAAM,cAAc,WAAWD,CAAG,SAASA,CAAG,KAAKI,CAAI,IAAI,GAC3D,OAAO,aAAa,QAAQJ,GAAKI,CAAI;AAAA,IACtC,QAAe;AAAA,IAAC;AAAA,EACjB,GAGA,OAAO,sBAAsBF,GAAM;AACpC,GAAC;"}
+{"version":3,"file":"app-toggle.js","sources":["../../designsystem/app/app-toggle.js?raw"],"sourcesContent":["export default \"if (\\n\\ttypeof window !== \\\"undefined\\\" &&\\n\\twindow.CSSStyleSheet &&\\n\\tdocument.adoptedStyleSheets\\n)\\n\\t(() => {\\n\\t\\tconst key = \\\"--mtds-app-expanded\\\";\\n\\t\\tconst sheet = new CSSStyleSheet();\\n\\t\\tconst prev = () => !window.localStorage.getItem(key)?.includes(\\\"false\\\");\\n\\n\\t\\tdocument.adoptedStyleSheets.push(sheet);\\n\\t\\twindow.mtdsToggleAppExpanded = (force) => {\\n\\t\\t\\ttry {\\n\\t\\t\\t\\tconst next = force ?? !prev();\\n\\t\\t\\t\\tsheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\\n\\t\\t\\t\\twindow.localStorage.setItem(key, next);\\n\\t\\t\\t} catch (_err) {} // localStorage is full or replaceSync is not supported\\n\\t\\t};\\n\\n\\t\\t// Set and store initial state\\n\\t\\twindow.mtdsToggleAppExpanded(prev());\\n\\t})();\\n\""],"names":["script"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/mtds/app/app-toggle2.js

@@ -1,27 +1,11 @@
-const t = `if (
-	typeof window !== "undefined" &&
-	window.CSSStyleSheet &&
-	document.adoptedStyleSheets
-)
-	(() => {
-		const key = "--mtds-app-expanded";
-		const sheet = new CSSStyleSheet();
-		const prev = () => !window.localStorage.getItem(key)?.includes("false");
-
-		document.adoptedStyleSheets.push(sheet);
-		window.mtdsToggleAppExpanded = (force) => {
-			try {
-				const next = force ?? !prev();
-				sheet.replaceSync?.(\`:root { \${key}: var(\${key}--\${next})}\`);
-				window.localStorage.setItem(key, next);
-			} catch (_err) {} // localStorage is full or replaceSync is not supported
-		};
-
-		// Set and store initial state
-		window.mtdsToggleAppExpanded(prev());
-	})();
-`;
-export {
-  t as default
-};
+typeof window < "u" && window.CSSStyleSheet && document.adoptedStyleSheets && (() => {
+  const e = "--mtds-app-expanded", d = new CSSStyleSheet(), o = () => !window.localStorage.getItem(e)?.includes("false");
+  document.adoptedStyleSheets.push(d), window.mtdsToggleAppExpanded = (n) => {
+    try {
+      const t = n ?? !o();
+      d.replaceSync?.(`:root { ${e}: var(${e}--${t})}`), window.localStorage.setItem(e, t);
+    } catch {
+    }
+  }, window.mtdsToggleAppExpanded(o());
+})();
 //# sourceMappingURL=app-toggle2.js.map

package/mtds/app/app-toggle2.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-toggle2.js","sources":["../../designsystem/app/app-toggle.js?raw"],"sourcesContent":["export default \"if (\\n\\ttypeof window !== \\\"undefined\\\" &&\\n\\twindow.CSSStyleSheet &&\\n\\tdocument.adoptedStyleSheets\\n)\\n\\t(() => {\\n\\t\\tconst key = \\\"--mtds-app-expanded\\\";\\n\\t\\tconst sheet = new CSSStyleSheet();\\n\\t\\tconst prev = () => !window.localStorage.getItem(key)?.includes(\\\"false\\\");\\n\\n\\t\\tdocument.adoptedStyleSheets.push(sheet);\\n\\t\\twindow.mtdsToggleAppExpanded = (force) => {\\n\\t\\t\\ttry {\\n\\t\\t\\t\\tconst next = force ?? !prev();\\n\\t\\t\\t\\tsheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\\n\\t\\t\\t\\twindow.localStorage.setItem(key, next);\\n\\t\\t\\t} catch (_err) {} // localStorage is full or replaceSync is not supported\\n\\t\\t};\\n\\n\\t\\t// Set and store initial state\\n\\t\\twindow.mtdsToggleAppExpanded(prev());\\n\\t})();\\n\""],"names":["script"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"app-toggle2.js","sources":["../../designsystem/app/app-toggle.js"],"sourcesContent":["if (\n\ttypeof window !== \"undefined\" &&\n\twindow.CSSStyleSheet &&\n\tdocument.adoptedStyleSheets\n)\n\t(() => {\n\t\tconst key = \"--mtds-app-expanded\";\n\t\tconst sheet = new CSSStyleSheet();\n\t\tconst prev = () => !window.localStorage.getItem(key)?.includes(\"false\");\n\n\t\tdocument.adoptedStyleSheets.push(sheet);\n\t\twindow.mtdsToggleAppExpanded = (force) => {\n\t\t\ttry {\n\t\t\t\tconst next = force ?? !prev();\n\t\t\t\tsheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\n\t\t\t\twindow.localStorage.setItem(key, next);\n\t\t\t} catch (_err) {} // localStorage is full or replaceSync is not supported\n\t\t};\n\n\t\t// Set and store initial state\n\t\twindow.mtdsToggleAppExpanded(prev());\n\t})();\n"],"names":["key","sheet","prev","force","next"],"mappings":"AACC,OAAO,SAAW,OAClB,OAAO,iBACP,SAAS,uBAER,MAAM;AACN,QAAMA,IAAM,uBACNC,IAAQ,IAAI,cAAa,GACzBC,IAAO,MAAM,CAAC,OAAO,aAAa,QAAQF,CAAG,GAAG,SAAS,OAAO;AAEtE,WAAS,mBAAmB,KAAKC,CAAK,GACtC,OAAO,wBAAwB,CAACE,MAAU;AACzC,QAAI;AACH,YAAMC,IAAOD,KAAS,CAACD,EAAI;AAC3B,MAAAD,EAAM,cAAc,WAAWD,CAAG,SAASA,CAAG,KAAKI,CAAI,IAAI,GAC3D,OAAO,aAAa,QAAQJ,GAAKI,CAAI;AAAA,IACtC,QAAe;AAAA,IAAC;AAAA,EACjB,GAGA,OAAO,sBAAsBF,GAAM;AACpC,GAAC;"}

package/mtds/app/app.js

@@ -3,7 +3,7 @@ import a from "clsx";
 import { forwardRef as p } from "react";
 import { Button as s } from "../button/button.js";
 import c from "../styles.module.css.js";
-import d from "./app-toggle2.js";
+import d from "./app-toggle.js";
 const f = p(function({ as: t, className: r, ...i }, e) {
   return /* @__PURE__ */ o(t || "div", { className: a(c.app, r), ref: e, ...i });
 }), u = p(function({ as: t, className: r, ...i }, e) {

package/mtds/card/card.js

@@ -1,12 +1,13 @@
 import { jsx as c } from "react/jsx-runtime";
-import m from "clsx";
-import { forwardRef as n } from "react";
-import f from "../styles.module.css.js";
-const g = n(function({ as: o, className: t, ...r }, a) {
-  const s = o || (r.href ? "a" : "div");
-  return /* @__PURE__ */ c(s, { className: m(f.card, t), ref: a, ...r });
-}), l = n(function({ as: o, className: t, ...r }, a) {
-  return /* @__PURE__ */ c(o || "div", { className: m(f.group, t), ref: a, ...r });
+import s from "clsx";
+import { forwardRef as f } from "react";
+import i from "../styles.module.css.js";
+const g = f(function({ as: t, className: n, ...o }, a) {
+  const r = t || (o.href ? "a" : "div");
+  return /* @__PURE__ */ c(r, { className: s(i.card, n), ref: a, ...o });
+}), l = f(function({ as: t, className: n, ...o }, a) {
+  const r = t || "div";
+  return r === "button" && !o.type && Object.assign(o, { type: "button" }), /* @__PURE__ */ c(r, { className: s(i.group, n), ref: a, ...o });
 });
 export {
   g as Card,

package/mtds/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../designsystem/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n\tSizes,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype CardBaseProps<Href> = {\n\t\"data-pad\"?: Sizes;\n\thref?: Href;\n};\n\nexport type CardProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n> = PolymorphicComponentPropWithRef<As, CardBaseProps<Href>>;\n\ntype CardComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>(\n\tprops: CardProps<Href, As>,\n) => JSX.Element;\n\nexport const Card: CardComponent = forwardRef<null>(function Card<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>({ as, className, ...rest }: CardProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest.href ? \"a\" : \"div\");\n\n\treturn <Tag className={clsx(styles.card, className)} ref={ref} {...rest} />;\n}) as CardComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type GroupProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, { \"data-pad\"?: Sizes }>;\n\ntype GroupComponent = <As extends React.ElementType = \"div\">(\n\tprops: GroupProps<As>,\n) => JSX.Element;\n\nexport const Group: GroupComponent = forwardRef<null>(function Group<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: GroupProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.group, className)} ref={ref} {...rest} />;\n}) as GroupComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Card","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles","Group"],"mappings":";;;;AA0BO,MAAMA,IAAsBC,EAAiB,SAGlD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAA6BC,GAA0B;AAC5E,QAAMC,IAAMJ,MAAOE,EAAK,OAAO,MAAM;AAErC,SAAO,gBAAAG,EAACD,GAAA,EAAI,WAAWE,EAAKC,EAAO,MAAMN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC1E,CAAC,GASYM,IAAwBT,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAwBC,GAA0B;AAGvE,SAAO,gBAAAE,EAFKL,KAAM,OAEV,EAAI,WAAWM,EAAKC,EAAO,OAAON,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC3E,CAAC;"}
+{"version":3,"file":"card.js","sources":["../../designsystem/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n\tSizes,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype CardBaseProps<Href> = {\n\t\"data-pad\"?: Sizes;\n\thref?: Href;\n};\n\nexport type CardProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n> = PolymorphicComponentPropWithRef<As, CardBaseProps<Href>>;\n\ntype CardComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>(\n\tprops: CardProps<Href, As>,\n) => JSX.Element;\n\nexport const Card: CardComponent = forwardRef<null>(function Card<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>({ as, className, ...rest }: CardProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest.href ? \"a\" : \"div\");\n\n\treturn <Tag className={clsx(styles.card, className)} ref={ref} {...rest} />;\n}) as CardComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type GroupProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, { \"data-pad\"?: Sizes }>;\n\ntype GroupComponent = <As extends React.ElementType = \"div\">(\n\tprops: GroupProps<As>,\n) => JSX.Element;\n\nexport const Group: GroupComponent = forwardRef<null>(function Group<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: GroupProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\tif (Tag === \"button\" && !rest.type) Object.assign(rest, { type: \"button\" }); // Default type for button to avoid accidental submits\n\treturn <Tag className={clsx(styles.group, className)} ref={ref} {...rest} />;\n}) as GroupComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Card","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles","Group"],"mappings":";;;;AA0BO,MAAMA,IAAsBC,EAAiB,SAGlD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAA6BC,GAA0B;AAC5E,QAAMC,IAAMJ,MAAOE,EAAK,OAAO,MAAM;AAErC,SAAO,gBAAAG,EAACD,GAAA,EAAI,WAAWE,EAAKC,EAAO,MAAMN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC1E,CAAC,GASYM,IAAwBT,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAwBC,GAA0B;AACvE,QAAMC,IAAMJ,KAAM;AAClB,SAAII,MAAQ,YAAY,CAACF,EAAK,QAAM,OAAO,OAAOA,GAAM,EAAE,MAAM,SAAA,CAAU,GACnE,gBAAAG,EAACD,GAAA,EAAI,WAAWE,EAAKC,EAAO,OAAON,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC3E,CAAC;"}

package/mtds/chart/chart-axis.d.ts

@@ -1,8 +1,9 @@
 import { ChartData } from './chart-element';
 type Config = {
     type: string;
+    aspect?: string;
 };
-export declare function toAxis(data: ChartData, { type }: Config): {
+export declare function toAxis(data: ChartData, { aspect, type }: Config): {
     total: number;
     groups: HTMLDivElement;
     axis: HTMLDivElement;

package/mtds/chart/chart-axis.js

@@ -1,21 +1,21 @@
-import { tag as r } from "../utils.js";
-function b(t, { type: d }) {
-  const g = d === "stacked", o = t[0].reduce((a, u, x) => {
-    const m = t.map((i) => i[x].number), v = m.reduce((i, f) => i + f, 0);
-    return Math.max(a, ...g ? [v] : m);
-  }, 0), n = 10 ** (`${~~o}`.length - 1), s = o / n < 5 ? n / 2 : n, l = Math.ceil(o / s) * s, p = r("div", { class: "axisGroups" }), c = r("div");
-  c.classList.add("axisSteps"), c.append(
-    ...Array.from({ length: l / s + 1 }, (a, u) => h(s * u)).reverse().map((a) => r("div", { class: "axisStep", "data-label": a }))
-  );
-  const e = r("div", {
-    "aria-label": t[0][0].value || null,
+import { tag as n } from "../utils.js";
+const $ = [0.1, 0.2, 0.25, 0.5, 1];
+function y(s, { aspect: i, type: d }) {
+  const g = d === "stacked", l = s[0].reduce((t, u, f) => {
+    const m = s.map((o) => o[f].number), v = m.reduce((o, S) => o + S, 0);
+    return Math.max(t, ...g ? [v] : m);
+  }, 0), r = l / 10, p = 10 ** `${Math.round(r)}`.length, h = r / p, e = ($.find((t) => t > h) || 1) * p, a = Math.ceil(l / e) * e, c = n("div", {
+    "aria-label": s[0][0].value || null,
     class: "axis",
-    role: "figure"
-  });
-  return e.style.setProperty("--groups", `${t.length - 1}`), e.style.setProperty("--total", `${l}`), e.append(c, p), { total: l, groups: p, axis: e };
+    role: "figure",
+    style: `${i ? `--mtdsc-chart-aspect: ${i};` : ""} --bars: ${s[0]?.length - 1}; --groups: ${s.length - 1}; --total: ${a}`
+  }), x = c.appendChild(n("div", { class: "axisSteps" })), k = c.appendChild(n("div", { class: "axisGroups" }));
+  return Array.from({ length: a / e + 1 }, (t, u) => b(e * u)).reverse().map(
+    (t) => x.append(n("div", { class: "axisStep", "data-label": t }))
+  ), { total: a, groups: k, axis: c };
 }
-const h = new Intl.NumberFormat().format;
+const b = new Intl.NumberFormat().format;
 export {
-  b as toAxis
+  y as toAxis
 };
 //# sourceMappingURL=chart-axis.js.map

package/mtds/chart/chart-axis.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-axis.js","sources":["../../designsystem/chart/chart-axis.ts"],"sourcesContent":["import { tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Config = { type: string };\n\nexport function toAxis(data: ChartData, { type }: Config) {\n\tconst isStacked = type === \"stacked\";\n\tconst max = data[0].reduce((acc, _, index) => {\n\t\tconst all = data.map((row) => row[index].number);\n\t\tconst sum = all.reduce((acc, num) => acc + num, 0);\n\t\treturn Math.max(acc, ...(isStacked ? [sum] : all));\n\t}, 0);\n\n\tconst digits = 10 ** (`${~~max}`.length - 1); // Get amount of digits in total number\n\tconst step = max / digits < 5 ? digits / 2 : digits; // If we get less than 5 steps, make smaller steps\n\tconst total = Math.ceil(max / step) * step;\n\tconst groups = tag(\"div\", { class: \"axisGroups\" });\n\tconst steps = tag(\"div\");\n\n\tsteps.classList.add(\"axisSteps\");\n\tsteps.append(\n\t\t...Array.from({ length: total / step + 1 }, (_, i) => getNum(step * i))\n\t\t\t.reverse()\n\t\t\t.map((num) => tag(\"div\", { class: \"axisStep\", \"data-label\": num })),\n\t);\n\n\tconst axis = tag(\"div\", {\n\t\t\"aria-label\": data[0][0].value || null,\n\t\tclass: \"axis\",\n\t\trole: \"figure\",\n\t});\n\taxis.style.setProperty(\"--groups\", `${data.length - 1}`);\n\taxis.style.setProperty(\"--total\", `${total}`);\n\taxis.append(steps, groups);\n\n\treturn { total, groups, axis };\n}\n\nconst getNum = new Intl.NumberFormat().format;\n"],"names":["toAxis","data","type","isStacked","max","acc","_","index","all","row","sum","num","digits","step","total","groups","tag","steps","i","getNum","axis"],"mappings":";AAKO,SAASA,EAAOC,GAAiB,EAAE,MAAAC,KAAgB;AACzD,QAAMC,IAAYD,MAAS,WACrBE,IAAMH,EAAK,CAAC,EAAE,OAAO,CAACI,GAAKC,GAAGC,MAAU;AAC7C,UAAMC,IAAMP,EAAK,IAAI,CAACQ,MAAQA,EAAIF,CAAK,EAAE,MAAM,GACzCG,IAAMF,EAAI,OAAO,CAACH,GAAKM,MAAQN,IAAMM,GAAK,CAAC;AACjD,WAAO,KAAK,IAAIN,GAAK,GAAIF,IAAY,CAACO,CAAG,IAAIF,CAAI;AAAA,EAClD,GAAG,CAAC,GAEEI,IAAS,OAAO,GAAG,CAAC,CAACR,CAAG,GAAG,SAAS,IACpCS,IAAOT,IAAMQ,IAAS,IAAIA,IAAS,IAAIA,GACvCE,IAAQ,KAAK,KAAKV,IAAMS,CAAI,IAAIA,GAChCE,IAASC,EAAI,OAAO,EAAE,OAAO,cAAc,GAC3CC,IAAQD,EAAI,KAAK;AAEvB,EAAAC,EAAM,UAAU,IAAI,WAAW,GAC/BA,EAAM;AAAA,IACL,GAAG,MAAM,KAAK,EAAE,QAAQH,IAAQD,IAAO,EAAA,GAAK,CAACP,GAAGY,MAAMC,EAAON,IAAOK,CAAC,CAAC,EACpE,QAAA,EACA,IAAI,CAACP,MAAQK,EAAI,OAAO,EAAE,OAAO,YAAY,cAAcL,EAAA,CAAK,CAAC;AAAA,EAAA;AAGpE,QAAMS,IAAOJ,EAAI,OAAO;AAAA,IACvB,cAAcf,EAAK,CAAC,EAAE,CAAC,EAAE,SAAS;AAAA,IAClC,OAAO;AAAA,IACP,MAAM;AAAA,EAAA,CACN;AACD,SAAAmB,EAAK,MAAM,YAAY,YAAY,GAAGnB,EAAK,SAAS,CAAC,EAAE,GACvDmB,EAAK,MAAM,YAAY,WAAW,GAAGN,CAAK,EAAE,GAC5CM,EAAK,OAAOH,GAAOF,CAAM,GAElB,EAAE,OAAAD,GAAO,QAAAC,GAAQ,MAAAK,EAAA;AACzB;AAEA,MAAMD,IAAS,IAAI,KAAK,aAAA,EAAe;"}
+{"version":3,"file":"chart-axis.js","sources":["../../designsystem/chart/chart-axis.ts"],"sourcesContent":["import { tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Config = { type: string; aspect?: string };\n\nconst STEPS = [0.1, 0.2, 0.25, 0.5, 1];\n\nexport function toAxis(data: ChartData, { aspect, type }: Config) {\n\tconst totalTicks = 10;\n\tconst isStacked = type === \"stacked\";\n\tconst max = data[0].reduce((acc, _, index) => {\n\t\tconst all = data.map((row) => row[index].number);\n\t\tconst sum = all.reduce((acc, num) => acc + num, 0);\n\t\treturn Math.max(acc, ...(isStacked ? [sum] : all));\n\t}, 0);\n\n\tconst tickRange = max / totalTicks;\n\tconst tickDigits = 10 ** `${Math.round(tickRange)}`.length; // Get amount of digits in total number and use as exponent for 10x\n\tconst tickSize = tickRange / tickDigits; // Get amount of digits in total number and use as exponent for 10\n\tconst step = (STEPS.find((current) => current > tickSize) || 1) * tickDigits; // Find closest step larger than tick\n\tconst total = Math.ceil(max / step) * step;\n\tconst axis = tag(\"div\", {\n\t\t\"aria-label\": data[0][0].value || null,\n\t\tclass: \"axis\",\n\t\trole: \"figure\",\n\t\tstyle: `${aspect ? `--mtdsc-chart-aspect: ${aspect};` : \"\"} --bars: ${data[0]?.length - 1}; --groups: ${data.length - 1}; --total: ${total}`,\n\t});\n\tconst steps = axis.appendChild(tag(\"div\", { class: \"axisSteps\" }));\n\tconst groups = axis.appendChild(tag(\"div\", { class: \"axisGroups\" }));\n\n\tArray.from({ length: total / step + 1 }, (_, i) => getNum(step * i))\n\t\t.reverse()\n\t\t.map((num) =>\n\t\t\tsteps.append(tag(\"div\", { class: \"axisStep\", \"data-label\": num })),\n\t\t);\n\n\treturn { total, groups, axis };\n}\n\nconst getNum = new Intl.NumberFormat().format;\n"],"names":["STEPS","toAxis","data","aspect","type","isStacked","max","acc","_","index","all","row","sum","num","tickRange","tickDigits","tickSize","step","current","total","axis","tag","steps","groups","i","getNum"],"mappings":";AAKA,MAAMA,IAAQ,CAAC,KAAK,KAAK,MAAM,KAAK,CAAC;AAE9B,SAASC,EAAOC,GAAiB,EAAE,QAAAC,GAAQ,MAAAC,KAAgB;AAEjE,QAAMC,IAAYD,MAAS,WACrBE,IAAMJ,EAAK,CAAC,EAAE,OAAO,CAACK,GAAKC,GAAGC,MAAU;AAC7C,UAAMC,IAAMR,EAAK,IAAI,CAACS,MAAQA,EAAIF,CAAK,EAAE,MAAM,GACzCG,IAAMF,EAAI,OAAO,CAACH,GAAKM,MAAQN,IAAMM,GAAK,CAAC;AACjD,WAAO,KAAK,IAAIN,GAAK,GAAIF,IAAY,CAACO,CAAG,IAAIF,CAAI;AAAA,EAClD,GAAG,CAAC,GAEEI,IAAYR,IAAM,IAClBS,IAAa,MAAM,GAAG,KAAK,MAAMD,CAAS,CAAC,GAAG,QAC9CE,IAAWF,IAAYC,GACvBE,KAAQjB,EAAM,KAAK,CAACkB,MAAYA,IAAUF,CAAQ,KAAK,KAAKD,GAC5DI,IAAQ,KAAK,KAAKb,IAAMW,CAAI,IAAIA,GAChCG,IAAOC,EAAI,OAAO;AAAA,IACvB,cAAcnB,EAAK,CAAC,EAAE,CAAC,EAAE,SAAS;AAAA,IAClC,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO,GAAGC,IAAS,yBAAyBA,CAAM,MAAM,EAAE,YAAYD,EAAK,CAAC,GAAG,SAAS,CAAC,eAAeA,EAAK,SAAS,CAAC,cAAciB,CAAK;AAAA,EAAA,CAC1I,GACKG,IAAQF,EAAK,YAAYC,EAAI,OAAO,EAAE,OAAO,YAAA,CAAa,CAAC,GAC3DE,IAASH,EAAK,YAAYC,EAAI,OAAO,EAAE,OAAO,aAAA,CAAc,CAAC;AAEnE,eAAM,KAAK,EAAE,QAAQF,IAAQF,IAAO,KAAK,CAACT,GAAGgB,MAAMC,EAAOR,IAAOO,CAAC,CAAC,EACjE,UACA;AAAA,IAAI,CAACX,MACLS,EAAM,OAAOD,EAAI,OAAO,EAAE,OAAO,YAAY,cAAcR,GAAK,CAAC;AAAA,EAAA,GAG5D,EAAE,OAAAM,GAAO,QAAAI,GAAQ,MAAAH,EAAA;AACzB;AAEA,MAAMK,IAAS,IAAI,KAAK,aAAA,EAAe;"}

package/mtds/chart/chart-element.d.ts

@@ -2,12 +2,14 @@ import { MTDSElement } from '../utils';
 export type ChartData = ReturnType<typeof toData>;
 export declare class MTDSChartElement extends MTDSElement {
     _observer?: MutationObserver;
+    _resize?: ResizeObserver;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
     handleEvent(e: Event): void;
+    handleResize(): void;
 }
 declare const toData: (table?: HTMLTableElement | null) => {
     number: number;

package/mtds/chart/chart-element.js

@@ -1,22 +1,23 @@
-import g from "../styles.module.css.js";
-import { IS_BROWSER as b, tag as c, MTDSElement as E, on as C, off as k, attr as d } from "../utils.js";
-import T from "./chart.css.js";
-import { toAxis as w } from "./chart-axis.js";
-import { toBars as S } from "./chart-bars.js";
-import { toLines as _ } from "./chart-lines.js";
-import { toPies as O } from "./chart-pies.js";
-const h = "click,keydown,mousemove,mouseout", p = "mtds-chart-tooltip", a = b ? document.getElementById(p) || c("div", { class: g._tooltip, id: p, hidden: "" }) : null;
-class $ extends E {
+import E from "../styles.module.css.js";
+import { IS_BROWSER as v, tag as l, MTDSElement as C, on as w, off as _, attr as d } from "../utils.js";
+import k from "./chart.css.js";
+import { toAxis as S } from "./chart-axis.js";
+import { toBars as T } from "./chart-bars.js";
+import { toLines as O } from "./chart-lines.js";
+import { toPies as R } from "./chart-pies.js";
+const u = "click,keydown,mousemove,mouseout", f = "mtds-chart-tooltip", a = v ? document.getElementById(f) || l("div", { class: E._tooltip, id: f, hidden: "" }) : null;
+class $ extends C {
   _observer;
   // Using underscore instead of # for backwards compatibility
+  _resize;
   static get observedAttributes() {
-    return ["data-variant"];
+    return ["data-variant", "data-aspect"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this._observer = new MutationObserver(
+    this._resize = new ResizeObserver(this.handleResize.bind(this)), this._resize.observe(this), this._observer = new MutationObserver(
       this.attributeChangedCallback.bind(this)
     ), this._observer.observe(this, {
       attributeFilter: ["data-tooltip"],
@@ -24,49 +25,56 @@ class $ extends E {
       characterData: !0,
       childList: !0,
       subtree: !0
-    }), this.attributeChangedCallback(), C(this, h, this);
+    }), this.attributeChangedCallback(), w(this, u, this);
   }
   disconnectedCallback() {
-    a && (a.hidden = !0), k(this, h, this), this._observer?.disconnect(), this._observer = void 0;
+    a && (a.hidden = !0), _(this, u, this), this._resize?.disconnect(), this._observer?.disconnect(), this._observer = this._resize = void 0;
   }
   attributeChangedCallback() {
-    Array.from(this.shadowRoot?.children || []).map((l) => l.remove());
-    const e = x(this.querySelector("table")), [t, s] = (d(this, "data-variant") || "bar").split("-"), r = c("style", {}, T), n = c("div", { class: "legends" });
-    e.slice(1).forEach(([{ value: l, style: v }]) => {
-      n.appendChild(c("div", { class: "legend", style: v }, l));
+    Array.from(this.shadowRoot?.children || []).map((p) => p.remove());
+    const [t, e] = (d(this, "data-variant") || "column").split("-"), i = d(this, "data-aspect") || void 0, o = L(this.querySelector("table")), r = l("style", {}, k), n = l("div", { class: "legends" });
+    o.slice(1).forEach(([{ value: p, style: g }]) => {
+      n.appendChild(l("div", { class: "legend", style: g }, p));
     });
-    const { axis: f, groups: m, total: y } = w(e, { type: s });
-    (t === "bar" || t === "column") && m.append(...S(e)), (t === "line" || t === "area") && m.append(_(e, { total: y, variant: t })), (t === "doughnut" || t === "pie") && this.shadowRoot?.append(O(e, { variant: t })), this.shadowRoot?.append(r, f, n);
+    const { axis: h, groups: m, total: y } = S(o, { aspect: i, type: e });
+    (t === "column" || t === "bar") && m.append(...T(o)), (t === "line" || t === "area") && m.append(O(o, { total: y, variant: t, type: e })), (t === "doughnut" || t === "pie") && this.shadowRoot?.append(R(o, { aspect: i, variant: t })), this.shadowRoot?.append(h, n, r);
   }
-  handleEvent(e) {
-    e.type === "click" || e.type === "keydown" ? A(e, this) : P(e);
+  handleEvent(t) {
+    t.type === "click" || t.type === "keydown" ? x(t, this) : z(t);
+  }
+  handleResize() {
+    const t = this.shadowRoot?.firstElementChild, e = t?.firstElementChild;
+    t?.classList.toggle("axisStepsYHalf", (e?.offsetHeight || 0) < 400), t?.classList.toggle("axisStepsXHalf", (e?.offsetWidth || 0) < 500);
   }
 }
-function A(o, e) {
-  if (o instanceof KeyboardEvent && o.key !== "Enter") return;
-  const t = o.composedPath()[0], s = e.querySelector("table"), [r, n] = t instanceof Element && d(t, "data-event")?.split("-").map(Number) || [];
-  s?.rows[r]?.cells[n]?.querySelector("a,button")?.click?.();
+function x(s, t) {
+  if (s instanceof KeyboardEvent && s.key !== "Enter") return;
+  const e = s.composedPath()[0], i = t.querySelector("table"), [o, r] = e instanceof Element && d(e, "data-event")?.split("-").map(Number) || [];
+  i?.rows[o]?.cells[r]?.querySelector("a,button")?.click?.();
 }
-let u = "";
-function P(o) {
+let b = "";
+function z(s) {
   if (!a) return;
   a?.isConnected || document.body.append(a);
-  const e = o.composedPath()[0], t = e instanceof Element && e.getAttribute("aria-label") || "";
-  t && (a.style.transform = `translate(${o.pageX}px, ${o.pageY}px)`), t !== u && (t && (a.textContent = t), u = t, a.hidden = !t);
+  const t = s.composedPath()[0], e = t instanceof Element && t.getAttribute("aria-label") || "";
+  e && (a.style.transform = `translate(${s.pageX}px, ${s.pageY}px)`), e !== b && (e && (a.textContent = e), b = e, a.hidden = !e);
 }
-const i = (o) => o?.textContent?.trim() || "", x = (o) => Array.from(
-  o?.rows || [],
-  (e, t) => Array.from(e.cells, (s, r) => ({
-    number: r && t && Number.parseFloat(i(s)) || 0,
-    // First row and column is not a number
-    event: s.querySelector("a,button") && `${t}-${r}`,
-    // Reference to proxy events
-    style: `--color: var(--mtdsc-chart-color-${t}, var(--mtdsc-chart-color-base))`,
-    value: i(s),
-    tooltip: d(s, "data-tooltip") || `${i(e.cells[0])}: ${i(s)} (${i(o?.rows[0].cells[r])})`
-  }))
+const c = (s) => s?.textContent?.trim() || "", L = (s) => Array.from(
+  s?.rows || [],
+  (t, e) => Array.from(t.cells, (i, o) => {
+    const r = c(t.cells[0]), n = c(s?.rows[0].cells[o]), h = `${r}: ${c(i)}${n ? ` (${n})` : ""}`;
+    return {
+      number: o && e && Number.parseFloat(c(i)) || 0,
+      // First row and column is not a number
+      event: i.querySelector("a,button") && `${e}-${o}`,
+      // Reference to proxy events
+      style: `--color: var(--mtdsc-chart-color-${e}, var(--mtdsc-chart-color-base))`,
+      value: c(i),
+      tooltip: d(i, "data-tooltip") || h
+    };
+  })
 );
-b && !window.customElements.get("mtds-chart") && window.customElements.define("mtds-chart", $);
+v && !window.customElements.get("mtds-chart") && window.customElements.define("mtds-chart", $);
 export {
   $ as MTDSChartElement
 };

package/mtds/chart/chart-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-element.js","sources":["../../designsystem/chart/chart-element.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, IS_BROWSER, MTDSElement, off, on, tag } from \"../utils\";\nimport css from \"./chart.css?raw\";\nimport { toAxis } from \"./chart-axis\";\nimport { toBars } from \"./chart-bars\";\nimport { toLines } from \"./chart-lines\";\nimport { toPies } from \"./chart-pies\";\n\nexport type ChartData = ReturnType<typeof toData>;\n\nconst EVENTS = \"click,keydown,mousemove,mouseout\";\nconst TOOLTIP_ID = \"mtds-chart-tooltip\";\nconst TOOLTIP = IS_BROWSER\n\t? document.getElementById(TOOLTIP_ID) ||\n\t\ttag(\"div\", { class: styles._tooltip, id: TOOLTIP_ID, hidden: \"\" })\n\t: null;\n\nexport class MTDSChartElement extends MTDSElement {\n\t_observer?: MutationObserver; // Using underscore instead of # for backwards compatibility\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-variant\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: \"open\" });\n\t}\n\tconnectedCallback() {\n\t\tthis._observer = new MutationObserver(\n\t\t\tthis.attributeChangedCallback.bind(this),\n\t\t);\n\t\tthis._observer.observe(this, {\n\t\t\tattributeFilter: [\"data-tooltip\"],\n\t\t\tattributes: true,\n\t\t\tcharacterData: true,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t});\n\t\tthis.attributeChangedCallback(); // Initial setup\n\t\ton(this, EVENTS, this);\n\t}\n\tdisconnectedCallback() {\n\t\tif (TOOLTIP) TOOLTIP.hidden = true;\n\t\toff(this, EVENTS, this);\n\t\tthis._observer?.disconnect();\n\t\tthis._observer = undefined;\n\t}\n\tattributeChangedCallback() {\n\t\tArray.from(this.shadowRoot?.children || []).map((el) => el.remove()); // Clear shadowRoot\n\n\t\tconst data = toData(this.querySelector(\"table\"));\n\t\tconst [variant, type] = (attr(this, \"data-variant\") || \"bar\").split(\"-\");\n\t\tconst style = tag(\"style\", {}, css);\n\t\tconst legend = tag(\"div\", { class: \"legends\" });\n\t\tdata.slice(1).forEach(([{ value, style }]) => {\n\t\t\tlegend.appendChild(tag(\"div\", { class: \"legend\", style }, value));\n\t\t});\n\n\t\tconst { axis, groups, total } = toAxis(data, { type });\n\t\tif (variant === \"bar\" || variant === \"column\")\n\t\t\tgroups.append(...toBars(data));\n\t\tif (variant === \"line\" || variant === \"area\")\n\t\t\tgroups.append(toLines(data, { total, variant, type }));\n\t\tif (variant === \"doughnut\" || variant === \"pie\")\n\t\t\tthis.shadowRoot?.append(toPies(data, { variant }));\n\n\t\tthis.shadowRoot?.append(style, axis, legend);\n\t}\n\thandleEvent(e: Event) {\n\t\tif (e.type === \"click\" || e.type === \"keydown\") onClick(e, this);\n\t\telse onMoveTooltip(e as MouseEvent);\n\t}\n}\n\nfunction onClick(event: Event, self: MTDSChartElement) {\n\tif (event instanceof KeyboardEvent && event.key !== \"Enter\") return; // Only handle enter key\n\tconst el = event.composedPath()[0];\n\tconst table = self.querySelector(\"table\");\n\tconst [tr, td] =\n\t\t(el instanceof Element && attr(el, \"data-event\")?.split(\"-\").map(Number)) ||\n\t\t[];\n\n\ttable?.rows[tr]?.cells[td]?.querySelector<HTMLElement>(\"a,button\")?.click?.();\n}\n\nlet TOOLTIP_TEXT = \"\";\nfunction onMoveTooltip(event: MouseEvent) {\n\tif (!TOOLTIP) return;\n\tif (!TOOLTIP?.isConnected) document.body.append(TOOLTIP); // Ensure connected\n\n\tconst el = event.composedPath()[0];\n\tconst tip = (el instanceof Element && el.getAttribute(\"aria-label\")) || \"\";\n\n\tif (tip)\n\t\tTOOLTIP.style.transform = `translate(${event.pageX}px, ${event.pageY}px)`;\n\tif (tip !== TOOLTIP_TEXT) {\n\t\tif (tip) TOOLTIP.textContent = tip;\n\t\tTOOLTIP_TEXT = tip;\n\t\tTOOLTIP.hidden = !tip;\n\t}\n}\n\nconst text = (el?: Element | null) => el?.textContent?.trim() || \"\"; // Helper to get trimmed text\nconst toData = (table?: HTMLTableElement | null) =>\n\tArray.from(table?.rows || [], (row, rowIndex) =>\n\t\tArray.from(row.cells, (cell, cellIndex) => ({\n\t\t\tnumber: (cellIndex && rowIndex && Number.parseFloat(text(cell))) || 0, // First row and column is not a number\n\t\t\tevent: cell.querySelector(\"a,button\") && `${rowIndex}-${cellIndex}`, // Reference to proxy events\n\t\t\tstyle: `--color: var(--mtdsc-chart-color-${rowIndex}, var(--mtdsc-chart-color-base))`,\n\t\t\tvalue: text(cell),\n\t\t\ttooltip:\n\t\t\t\tattr(cell, \"data-tooltip\") ||\n\t\t\t\t`${text(row.cells[0])}: ${text(cell)} (${text(table?.rows[0].cells[cellIndex])})`,\n\t\t})),\n\t);\n\nif (IS_BROWSER && !window.customElements.get(\"mtds-chart\"))\n\twindow.customElements.define(\"mtds-chart\", MTDSChartElement);\n"],"names":["EVENTS","TOOLTIP_ID","TOOLTIP","IS_BROWSER","tag","styles","MTDSChartElement","MTDSElement","on","off","el","data","toData","variant","type","attr","style","css","legend","value","axis","groups","total","toAxis","toBars","toLines","toPies","onClick","event","self","table","tr","td","TOOLTIP_TEXT","onMoveTooltip","tip","text","row","rowIndex","cell","cellIndex"],"mappings":"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"}
+{"version":3,"file":"chart-element.js","sources":["../../designsystem/chart/chart-element.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, IS_BROWSER, MTDSElement, off, on, tag } from \"../utils\";\nimport css from \"./chart.css?raw\";\nimport { toAxis } from \"./chart-axis\";\nimport { toBars } from \"./chart-bars\";\nimport { toLines } from \"./chart-lines\";\nimport { toPies } from \"./chart-pies\";\n\nexport type ChartData = ReturnType<typeof toData>;\n\nconst EVENTS = \"click,keydown,mousemove,mouseout\";\nconst TOOLTIP_ID = \"mtds-chart-tooltip\";\nconst TOOLTIP = IS_BROWSER\n\t? document.getElementById(TOOLTIP_ID) ||\n\t\ttag(\"div\", { class: styles._tooltip, id: TOOLTIP_ID, hidden: \"\" })\n\t: null;\n\nexport class MTDSChartElement extends MTDSElement {\n\t_observer?: MutationObserver; // Using underscore instead of # for backwards compatibility\n\t_resize?: ResizeObserver;\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-variant\", \"data-aspect\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: \"open\" });\n\t}\n\tconnectedCallback() {\n\t\tthis._resize = new ResizeObserver(this.handleResize.bind(this));\n\t\tthis._resize.observe(this);\n\t\tthis._observer = new MutationObserver(\n\t\t\tthis.attributeChangedCallback.bind(this),\n\t\t);\n\t\tthis._observer.observe(this, {\n\t\t\tattributeFilter: [\"data-tooltip\"],\n\t\t\tattributes: true,\n\t\t\tcharacterData: true,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t});\n\t\tthis.attributeChangedCallback(); // Initial setup\n\t\ton(this, EVENTS, this);\n\t}\n\tdisconnectedCallback() {\n\t\tif (TOOLTIP) TOOLTIP.hidden = true;\n\t\toff(this, EVENTS, this);\n\t\tthis._resize?.disconnect();\n\t\tthis._observer?.disconnect();\n\t\tthis._observer = this._resize = undefined;\n\t}\n\tattributeChangedCallback() {\n\t\tArray.from(this.shadowRoot?.children || []).map((el) => el.remove()); // Clear shadowRoot\n\n\t\tconst [variant, type] = (attr(this, \"data-variant\") || \"column\").split(\"-\");\n\t\tconst aspect = attr(this, \"data-aspect\") || undefined;\n\t\tconst data = toData(this.querySelector(\"table\"));\n\t\tconst style = tag(\"style\", {}, css);\n\t\tconst legend = tag(\"div\", { class: \"legends\" });\n\t\tdata.slice(1).forEach(([{ value, style }]) => {\n\t\t\tlegend.appendChild(tag(\"div\", { class: \"legend\", style }, value));\n\t\t});\n\n\t\tconst { axis, groups, total } = toAxis(data, { aspect, type });\n\t\tif (variant === \"column\" || variant === \"bar\")\n\t\t\tgroups.append(...toBars(data));\n\t\tif (variant === \"line\" || variant === \"area\")\n\t\t\tgroups.append(toLines(data, { total, variant, type }));\n\t\tif (variant === \"doughnut\" || variant === \"pie\")\n\t\t\tthis.shadowRoot?.append(toPies(data, { aspect, variant }));\n\n\t\tthis.shadowRoot?.append(axis, legend, style); // Axis must be first\n\t}\n\thandleEvent(e: Event) {\n\t\tif (e.type === \"click\" || e.type === \"keydown\") onClick(e, this);\n\t\telse onMoveTooltip(e as MouseEvent);\n\t}\n\thandleResize() {\n\t\tconst axis = this.shadowRoot?.firstElementChild as HTMLElement | null;\n\t\tconst steps = axis?.firstElementChild as HTMLElement | null;\n\t\taxis?.classList.toggle(\"axisStepsYHalf\", (steps?.offsetHeight || 0) < 400);\n\t\taxis?.classList.toggle(\"axisStepsXHalf\", (steps?.offsetWidth || 0) < 500);\n\t}\n}\n\nfunction onClick(event: Event, self: MTDSChartElement) {\n\tif (event instanceof KeyboardEvent && event.key !== \"Enter\") return; // Only handle enter key\n\tconst el = event.composedPath()[0];\n\tconst table = self.querySelector(\"table\");\n\tconst [tr, td] =\n\t\t(el instanceof Element && attr(el, \"data-event\")?.split(\"-\").map(Number)) ||\n\t\t[];\n\n\ttable?.rows[tr]?.cells[td]?.querySelector<HTMLElement>(\"a,button\")?.click?.();\n}\n\nlet TOOLTIP_TEXT = \"\";\nfunction onMoveTooltip(event: MouseEvent) {\n\tif (!TOOLTIP) return;\n\tif (!TOOLTIP?.isConnected) document.body.append(TOOLTIP); // Ensure connected\n\n\tconst el = event.composedPath()[0];\n\tconst tip = (el instanceof Element && el.getAttribute(\"aria-label\")) || \"\";\n\n\tif (tip)\n\t\tTOOLTIP.style.transform = `translate(${event.pageX}px, ${event.pageY}px)`;\n\tif (tip !== TOOLTIP_TEXT) {\n\t\tif (tip) TOOLTIP.textContent = tip;\n\t\tTOOLTIP_TEXT = tip;\n\t\tTOOLTIP.hidden = !tip;\n\t}\n}\n\nconst text = (el?: Element | null) => el?.textContent?.trim() || \"\"; // Helper to get trimmed text\nconst toData = (table?: HTMLTableElement | null) =>\n\tArray.from(table?.rows || [], (row, rowIndex) =>\n\t\tArray.from(row.cells, (cell, cellIndex) => {\n\t\t\tconst rowHeading = text(row.cells[0]);\n\t\t\tconst colHeading = text(table?.rows[0].cells[cellIndex]);\n\t\t\tconst tooltip = `${rowHeading}: ${text(cell)}${colHeading ? ` (${colHeading})` : \"\"}`;\n\n\t\t\treturn {\n\t\t\t\tnumber: (cellIndex && rowIndex && Number.parseFloat(text(cell))) || 0, // First row and column is not a number\n\t\t\t\tevent: cell.querySelector(\"a,button\") && `${rowIndex}-${cellIndex}`, // Reference to proxy events\n\t\t\t\tstyle: `--color: var(--mtdsc-chart-color-${rowIndex}, var(--mtdsc-chart-color-base))`,\n\t\t\t\tvalue: text(cell),\n\t\t\t\ttooltip: attr(cell, \"data-tooltip\") || tooltip,\n\t\t\t};\n\t\t}),\n\t);\n\nif (IS_BROWSER && !window.customElements.get(\"mtds-chart\"))\n\twindow.customElements.define(\"mtds-chart\", MTDSChartElement);\n"],"names":["EVENTS","TOOLTIP_ID","TOOLTIP","IS_BROWSER","tag","styles","MTDSChartElement","MTDSElement","on","off","el","variant","type","attr","aspect","data","toData","style","css","legend","value","axis","groups","total","toAxis","toBars","toLines","toPies","e","onClick","steps","event","self","table","tr","td","TOOLTIP_TEXT","onMoveTooltip","tip","text","row","rowIndex","cell","cellIndex","rowHeading","colHeading","tooltip"],"mappings":"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"}

package/mtds/chart/chart-lines.d.ts

@@ -4,5 +4,5 @@ type Config = {
     type: string;
     variant: string;
 };
-export declare function toLines(data: ChartData, { total, variant }: Config): HTMLDivElement;
+export declare function toLines(data: ChartData, { total, type, variant }: Config): HTMLDivElement;
 export {};

package/mtds/chart/chart-lines.js

@@ -1,42 +1,42 @@
-import { tag as h, attr as c } from "../utils.js";
-function E(t, { total: e, variant: n }) {
-  const o = h("div", { class: "axisGroup" });
-  return t.slice(1).forEach(([, ...a]) => {
-    const d = h("div", {
+import { tag as m, attr as a } from "../utils.js";
+function E(e, { total: t, type: n, variant: o }) {
+  const s = Number.parseFloat(n || "0") || 0, r = m("div", { class: "axisGroup" });
+  return e.slice(1).forEach(([, ...l]) => {
+    const d = m("div", {
       class: "lineContainer",
       role: "list",
-      style: a[0].style
-    }), p = f(
-      a.map(({ number: r }, m, { length: g }) => [
-        100 / (g - 1) * m,
-        100 - r / e * 100
+      style: l[0].style
+    }), h = C(
+      l.map(({ number: c }, u, { length: $ }) => [
+        100 / ($ - 1) * u,
+        100 - c / t * 100
       ]),
-      0 / 100
-    ), i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    c(i, "aria-hidden", "true"), c(i, "preserveAspectRatio", "none"), c(i, "viewBox", "0 0 100 100");
-    const l = document.createElementNS("http://www.w3.org/2000/svg", "path");
-    if (c(l, "class", "line"), c(l, "d", p), c(l, "fill", "none"), c(l, "stroke", "currentColor"), n === "area") {
-      const r = l.cloneNode(!0);
-      c(r, "d", `M-100,100 L${p.slice(1)}L200,100`), c(r, "class", "lineShade"), i.append(r);
+      s / 100
+    ), p = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    a(p, "aria-hidden", "true"), a(p, "preserveAspectRatio", "none"), a(p, "viewBox", "0 0 100 100");
+    const i = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    if (a(i, "class", "line"), a(i, "d", h), a(i, "fill", "none"), a(i, "stroke", "currentColor"), o === "area") {
+      const c = i.cloneNode(!0);
+      a(c, "d", `M-100,100 L${h.slice(1)}L200,100`), a(c, "class", "lineShade"), p.append(c);
     }
-    a.forEach(({ number: r, tooltip: m, event: g }) => {
-      const u = h("div", { role: "listitem" });
-      u.appendChild(
-        h("div", {
-          "aria-label": m,
-          "data-event": g,
+    l.forEach(({ number: c, tooltip: u, event: $ }) => {
+      const g = m("div", { role: "listitem" });
+      g.appendChild(
+        m("div", {
+          "aria-label": u,
+          "data-event": $,
           tabindex: "0",
           class: "linePoint",
           role: "img",
-          style: `--value: ${r}`
+          style: `--value: ${c}`
         })
-      ), d.append(u);
-    }), d.appendChild(i).append(l), o.append(d);
-  }), o;
+      ), d.append(g);
+    }), d.appendChild(p).append(i), r.append(d);
+  }), r;
 }
-const f = (t, e) => t.map(([n, s], o, a) => o ? C(o, a, e) : `M${n},${s}`).join(" "), $ = ([t, e], [n, s]) => [t + n, e + s], v = ([t, e], [n, s]) => [t - n, e - s], w = (t, [e, n]) => [t * e, t * n], C = (t, e, n) => {
-  const s = e[t - 1], o = e[t], [a, d] = $(s, w(n, v(o, e[t - 2] || s))), [p, i] = $(o, w(n, v(s, e[t + 1] || o)));
-  return `C ${a},${d} ${p},${i} ${o[0]},${o[1]}`;
+const C = (e, t) => e.map(([n, o], s, r) => s ? b(s, r, t) : `M${n},${o}`).join(" "), v = ([e, t], [n, o]) => [e + n, t + o], w = ([e, t], [n, o]) => [e - n, t - o], f = (e, [t, n]) => [e * t, e * n], b = (e, t, n) => {
+  const o = t[e - 1], s = t[e], [r, l] = v(o, f(n, w(s, t[e - 2] || o))), [d, h] = v(s, f(n, w(o, t[e + 1] || s)));
+  return `C ${r},${l} ${d},${h} ${s[0]},${s[1]}`;
 };
 export {
   E as toLines

package/mtds/chart/chart-lines.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-lines.js","sources":["../../designsystem/chart/chart-lines.ts"],"sourcesContent":["import { attr, tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Config = {\n\ttotal: number;\n\ttype: string;\n\tvariant: string;\n};\n\nexport function toLines(data: ChartData, { total, variant }: Config) {\n\tconst smoothing = 0; // Number.parseFloat(type || \"10\") || 0;\n\tconst group = tag(\"div\", { class: \"axisGroup\" });\n\tdata.slice(1).forEach(([, ...values]) => {\n\t\tconst lineContainer = tag(\"div\", {\n\t\t\tclass: `lineContainer`,\n\t\t\trole: \"list\",\n\t\t\tstyle: values[0].style,\n\t\t});\n\n\t\tconst pathDefintion = toPath(\n\t\t\tvalues.map(({ number }, index, { length }) => [\n\t\t\t\t(100 / (length - 1)) * index,\n\t\t\t\t100 - (number / total) * 100,\n\t\t\t]),\n\t\t\tsmoothing / 100,\n\t\t);\n\n\t\tconst line = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n\t\tattr(line, \"aria-hidden\", \"true\");\n\t\tattr(line, \"preserveAspectRatio\", \"none\");\n\t\tattr(line, \"viewBox\", \"0 0 100 100\");\n\n\t\tconst path = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n\t\tattr(path, \"class\", \"line\");\n\t\tattr(path, \"d\", pathDefintion);\n\t\tattr(path, \"fill\", \"none\");\n\t\tattr(path, \"stroke\", \"currentColor\");\n\n\t\tif (variant === \"area\") {\n\t\t\tconst lineShade = path.cloneNode(true) as SVGPathElement;\n\t\t\tattr(lineShade, \"d\", `M-100,100 L${pathDefintion.slice(1)}L200,100`);\n\t\t\tattr(lineShade, \"class\", \"lineShade\");\n\t\t\tline.append(lineShade);\n\t\t}\n\n\t\tvalues.forEach(({ number, tooltip, event }) => {\n\t\t\tconst col = tag(\"div\", { role: \"listitem\" });\n\t\t\tcol.appendChild(\n\t\t\t\ttag(\"div\", {\n\t\t\t\t\t\"aria-label\": tooltip,\n\t\t\t\t\t\"data-event\": event,\n\t\t\t\t\ttabindex: \"0\",\n\t\t\t\t\tclass: \"linePoint\",\n\t\t\t\t\trole: \"img\",\n\t\t\t\t\tstyle: `--value: ${number}`,\n\t\t\t\t}),\n\t\t\t);\n\t\t\tlineContainer.append(col);\n\t\t});\n\n\t\tlineContainer.appendChild(line).append(path);\n\t\tgroup.append(lineContainer);\n\t});\n\treturn group;\n}\n\n// Based on https://observablehq.com/@ndry/smooth-a-svg-path-with-cubic-bezier-curves\nconst toPath = (points: number[][], s: number) =>\n\tpoints.map(([x, y], i, a) => (i ? smooth(i, a, s) : `M${x},${y}`)).join(\" \");\nconst add = ([ax, ay]: number[], [bx, by]: number[]) => [ax + bx, ay + by];\nconst sub = ([ax, ay]: number[], [bx, by]: number[]) => [ax - bx, ay - by];\nconst scale = (s: number, [x, y]: number[]) => [s * x, s * y];\nconst smooth = (i: number, all: number[][], smooth: number) => {\n\tconst start = all[i - 1];\n\tconst end = all[i];\n\tconst [csX, csY] = add(start, scale(smooth, sub(end, all[i - 2] || start))); // start control point\n\tconst [ceX, ceY] = add(end, scale(smooth, sub(start, all[i + 1] || end))); // end control point\n\treturn `C ${csX},${csY} ${ceX},${ceY} ${end[0]},${end[1]}`;\n};\n"],"names":["toLines","data","total","variant","group","tag","lineContainer","values","pathDefintion","toPath","number","index","length","line","attr","path","lineShade","tooltip","event","col","points","s","x","y","i","smooth","add","ax","ay","bx","by","sub","scale","all","start","end","csX","csY","ceX","ceY"],"mappings":"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"}
+{"version":3,"file":"chart-lines.js","sources":["../../designsystem/chart/chart-lines.ts"],"sourcesContent":["import { attr, tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Config = {\n\ttotal: number;\n\ttype: string;\n\tvariant: string;\n};\n\nexport function toLines(data: ChartData, { total, type, variant }: Config) {\n\tconst smoothing = Number.parseFloat(type || \"0\") || 0;\n\tconst group = tag(\"div\", { class: \"axisGroup\" });\n\tdata.slice(1).forEach(([, ...values]) => {\n\t\tconst lineContainer = tag(\"div\", {\n\t\t\tclass: `lineContainer`,\n\t\t\trole: \"list\",\n\t\t\tstyle: values[0].style,\n\t\t});\n\n\t\tconst pathDefintion = toPath(\n\t\t\tvalues.map(({ number }, index, { length }) => [\n\t\t\t\t(100 / (length - 1)) * index,\n\t\t\t\t100 - (number / total) * 100,\n\t\t\t]),\n\t\t\tsmoothing / 100,\n\t\t);\n\n\t\tconst line = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n\t\tattr(line, \"aria-hidden\", \"true\");\n\t\tattr(line, \"preserveAspectRatio\", \"none\");\n\t\tattr(line, \"viewBox\", \"0 0 100 100\");\n\n\t\tconst path = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n\t\tattr(path, \"class\", \"line\");\n\t\tattr(path, \"d\", pathDefintion);\n\t\tattr(path, \"fill\", \"none\");\n\t\tattr(path, \"stroke\", \"currentColor\");\n\n\t\tif (variant === \"area\") {\n\t\t\tconst lineShade = path.cloneNode(true) as SVGPathElement;\n\t\t\tattr(lineShade, \"d\", `M-100,100 L${pathDefintion.slice(1)}L200,100`);\n\t\t\tattr(lineShade, \"class\", \"lineShade\");\n\t\t\tline.append(lineShade);\n\t\t}\n\n\t\tvalues.forEach(({ number, tooltip, event }) => {\n\t\t\tconst col = tag(\"div\", { role: \"listitem\" });\n\t\t\tcol.appendChild(\n\t\t\t\ttag(\"div\", {\n\t\t\t\t\t\"aria-label\": tooltip,\n\t\t\t\t\t\"data-event\": event,\n\t\t\t\t\ttabindex: \"0\",\n\t\t\t\t\tclass: \"linePoint\",\n\t\t\t\t\trole: \"img\",\n\t\t\t\t\tstyle: `--value: ${number}`,\n\t\t\t\t}),\n\t\t\t);\n\t\t\tlineContainer.append(col);\n\t\t});\n\n\t\tlineContainer.appendChild(line).append(path);\n\t\tgroup.append(lineContainer);\n\t});\n\treturn group;\n}\n\n// Based on https://observablehq.com/@ndry/smooth-a-svg-path-with-cubic-bezier-curves\nconst toPath = (points: number[][], s: number) =>\n\tpoints.map(([x, y], i, a) => (i ? smooth(i, a, s) : `M${x},${y}`)).join(\" \");\nconst add = ([ax, ay]: number[], [bx, by]: number[]) => [ax + bx, ay + by];\nconst sub = ([ax, ay]: number[], [bx, by]: number[]) => [ax - bx, ay - by];\nconst scale = (s: number, [x, y]: number[]) => [s * x, s * y];\nconst smooth = (i: number, all: number[][], smooth: number) => {\n\tconst start = all[i - 1];\n\tconst end = all[i];\n\tconst [csX, csY] = add(start, scale(smooth, sub(end, all[i - 2] || start))); // start control point\n\tconst [ceX, ceY] = add(end, scale(smooth, sub(start, all[i + 1] || end))); // end control point\n\treturn `C ${csX},${csY} ${ceX},${ceY} ${end[0]},${end[1]}`;\n};\n"],"names":["toLines","data","total","type","variant","smoothing","group","tag","lineContainer","values","pathDefintion","toPath","number","index","length","line","attr","path","lineShade","tooltip","event","col","points","s","x","y","i","a","smooth","add","ax","ay","bx","by","sub","scale","all","start","end","csX","csY","ceX","ceY"],"mappings":";AASO,SAASA,EAAQC,GAAiB,EAAE,OAAAC,GAAO,MAAAC,GAAM,SAAAC,KAAmB;AAC1E,QAAMC,IAAY,OAAO,WAAWF,KAAQ,GAAG,KAAK,GAC9CG,IAAQC,EAAI,OAAO,EAAE,OAAO,aAAa;AAC/C,SAAAN,EAAK,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAA,MAAY,MAAM;AACxC,UAAMO,IAAgBD,EAAI,OAAO;AAAA,MAChC,OAAO;AAAA,MACP,MAAM;AAAA,MACN,OAAOE,EAAO,CAAC,EAAE;AAAA,IAAA,CACjB,GAEKC,IAAgBC;AAAA,MACrBF,EAAO,IAAI,CAAC,EAAE,QAAAG,KAAUC,GAAO,EAAE,QAAAC,QAAa;AAAA,QAC5C,OAAOA,IAAS,KAAMD;AAAA,QACvB,MAAOD,IAASV,IAAS;AAAA,MAAA,CACzB;AAAA,MACDG,IAAY;AAAA,IAAA,GAGPU,IAAO,SAAS,gBAAgB,8BAA8B,KAAK;AACzE,IAAAC,EAAKD,GAAM,eAAe,MAAM,GAChCC,EAAKD,GAAM,uBAAuB,MAAM,GACxCC,EAAKD,GAAM,WAAW,aAAa;AAEnC,UAAME,IAAO,SAAS,gBAAgB,8BAA8B,MAAM;AAM1E,QALAD,EAAKC,GAAM,SAAS,MAAM,GAC1BD,EAAKC,GAAM,KAAKP,CAAa,GAC7BM,EAAKC,GAAM,QAAQ,MAAM,GACzBD,EAAKC,GAAM,UAAU,cAAc,GAE/Bb,MAAY,QAAQ;AACvB,YAAMc,IAAYD,EAAK,UAAU,EAAI;AACrC,MAAAD,EAAKE,GAAW,KAAK,cAAcR,EAAc,MAAM,CAAC,CAAC,UAAU,GACnEM,EAAKE,GAAW,SAAS,WAAW,GACpCH,EAAK,OAAOG,CAAS;AAAA,IACtB;AAEA,IAAAT,EAAO,QAAQ,CAAC,EAAE,QAAAG,GAAQ,SAAAO,GAAS,OAAAC,QAAY;AAC9C,YAAMC,IAAMd,EAAI,OAAO,EAAE,MAAM,YAAY;AAC3C,MAAAc,EAAI;AAAA,QACHd,EAAI,OAAO;AAAA,UACV,cAAcY;AAAA,UACd,cAAcC;AAAA,UACd,UAAU;AAAA,UACV,OAAO;AAAA,UACP,MAAM;AAAA,UACN,OAAO,YAAYR,CAAM;AAAA,QAAA,CACzB;AAAA,MAAA,GAEFJ,EAAc,OAAOa,CAAG;AAAA,IACzB,CAAC,GAEDb,EAAc,YAAYO,CAAI,EAAE,OAAOE,CAAI,GAC3CX,EAAM,OAAOE,CAAa;AAAA,EAC3B,CAAC,GACMF;AACR;AAGA,MAAMK,IAAS,CAACW,GAAoBC,MACnCD,EAAO,IAAI,CAAC,CAACE,GAAGC,CAAC,GAAGC,GAAGC,MAAOD,IAAIE,EAAOF,GAAGC,GAAGJ,CAAC,IAAI,IAAIC,CAAC,IAAIC,CAAC,EAAG,EAAE,KAAK,GAAG,GACtEI,IAAM,CAAC,CAACC,GAAIC,CAAE,GAAa,CAACC,GAAIC,CAAE,MAAgB,CAACH,IAAKE,GAAID,IAAKE,CAAE,GACnEC,IAAM,CAAC,CAACJ,GAAIC,CAAE,GAAa,CAACC,GAAIC,CAAE,MAAgB,CAACH,IAAKE,GAAID,IAAKE,CAAE,GACnEE,IAAQ,CAACZ,GAAW,CAACC,GAAGC,CAAC,MAAgB,CAACF,IAAIC,GAAGD,IAAIE,CAAC,GACtDG,IAAS,CAACF,GAAWU,GAAiBR,MAAmB;AAC9D,QAAMS,IAAQD,EAAIV,IAAI,CAAC,GACjBY,IAAMF,EAAIV,CAAC,GACX,CAACa,GAAKC,CAAG,IAAIX,EAAIQ,GAAOF,EAAMP,GAAQM,EAAII,GAAKF,EAAIV,IAAI,CAAC,KAAKW,CAAK,CAAC,CAAC,GACpE,CAACI,GAAKC,CAAG,IAAIb,EAAIS,GAAKH,EAAMP,GAAQM,EAAIG,GAAOD,EAAIV,IAAI,CAAC,KAAKY,CAAG,CAAC,CAAC;AACxE,SAAO,KAAKC,CAAG,IAAIC,CAAG,IAAIC,CAAG,IAAIC,CAAG,IAAIJ,EAAI,CAAC,CAAC,IAAIA,EAAI,CAAC,CAAC;AACzD;"}

package/mtds/chart/chart-pies.d.ts

@@ -1,4 +1,7 @@
 import { ChartData } from './chart-element';
-export declare function toPies(data: ChartData, { variant }: {
+type Options = {
+    aspect?: string;
     variant: string;
-}): SVGSVGElement;
+};
+export declare function toPies(data: ChartData, { aspect, variant }: Options): SVGSVGElement;
+export {};