@mattilsynet/design 3.3.10 → 3.4.1

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 {\n\tattachStyle,\n\tattr,\n\tdebounce,\n\tdefineElement,\n\tisBrowser,\n\tMTDSElement,\n\toff,\n\ton,\n\tonMutation,\n\ttag,\n} 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\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"mtds-chart\": MTDSChartElement;\n\t}\n}\n\nconst EVENTS = \"click keydown mousemove mouseout\";\nconst TOOLTIP_ID = \"mtds-chart-tooltip\";\nconst TOOLTIP = isBrowser()\n\t? document.getElementById(TOOLTIP_ID) ||\n\t\ttag(\"div\", {\n\t\t\t\"aria-hidden\": \"true\",\n\t\t\tclass: styles._tooltip,\n\t\t\thidden: \"\",\n\t\t\tid: TOOLTIP_ID,\n\t\t})\n\t: null;\n\nexport class MTDSChartElement extends MTDSElement {\n\t#unmutate?: () => void;\n\t#unresize?: () => void;\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\tconst render = debounce(() => this.attributeChangedCallback(), 100);\n\t\tconst resize = new ResizeObserver(() => this.handleResize());\n\t\tresize.observe(this);\n\t\tthis.#unresize = () => resize.disconnect();\n\t\tthis.#unmutate = onMutation(this, render, {\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\trequestAnimationFrame(() => this.attributeChangedCallback()); // Initial setup when children is mounted\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.#unresize?.();\n\t\tthis.#unmutate?.();\n\t\tthis.#unmutate = this.#unresize = undefined;\n\t}\n\tattributeChangedCallback() {\n\t\tconst data = toData(this.querySelector(\"table\"));\n\t\tif (!data[0]) return; // We require at least one row\n\n\t\tArray.from(this.shadowRoot?.children || []).map((el) => el.remove()); // Clear shadowRoot\n\t\tconst [variant, type] = (attr(this, \"data-variant\") || \"column\").split(\"-\");\n\t\tconst aspect = attr(this, \"data-aspect\") || undefined;\n\t\tconst legend = tag(\"div\", {\n\t\t\t\"aria-hidden\": \"hidden\",\n\t\t\tclass: \"legends\",\n\t\t\trole: \"group\",\n\t\t});\n\t\tdata.slice(1).forEach(([{ value, color }]) => {\n\t\t\tconst el = tag(\"div\", { class: \"legend\" }, value);\n\t\t\tlegend.appendChild(el).style.setProperty(\"--color\", color);\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); // Axis must be first\n\t\tattachStyle(this, css);\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(${Math.min(event.clientX, window.innerWidth)}px, ${event.clientY}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 || []).map((row, rowIndex, { length }) =>\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 value = text(cell);\n\t\t\tconst tooltip =\n\t\t\t\tlength === 2 // If only header and one row, use simple tooltip only showing value\n\t\t\t\t\t? `${colHeading}: ${value}`\n\t\t\t\t\t: `${rowHeading}: ${value}${colHeading ? ` (${colHeading})` : \"\"}`;\n\t\t\tattr(cell, \"tabindex\", \"-1\");\n\n\t\t\treturn {\n\t\t\t\tnumber: (cellIndex && rowIndex && Number.parseFloat(value)) || 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\tcolor: `var(--mtdsc-chart-color-${rowIndex}-${cellIndex}, var(--mtdsc-chart-color-${rowIndex}, var(--mtdsc-chart-color-base)))`,\n\t\t\t\tvalue,\n\t\t\t\ttooltip: attr(cell, \"data-tooltip\") || tooltip,\n\t\t\t};\n\t\t}),\n\t);\n\ndefineElement(\"mtds-chart\", MTDSChartElement);\n"],"names":["EVENTS","TOOLTIP_ID","TOOLTIP","isBrowser","tag","styles","MTDSChartElement","MTDSElement","#unmutate","#unresize","render","debounce","resize","onMutation","on","off","data","toData","el","variant","type","attr","aspect","legend","value","color","axis","groups","total","toAxis","toBars","toLines","toPies","attachStyle","css","onClick","steps","event","self","table","tr","td","TOOLTIP_TEXT","onMoveTooltip","tip","text","row","rowIndex","length","cell","cellIndex","rowHeading","colHeading","tooltip","defineElement"],"mappings":"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"}
+{"version":3,"file":"chart-element.js","names":["#unresize","#unmutate"],"sources":["../../designsystem/chart/chart-element.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n\tattachStyle,\n\tattr,\n\tdebounce,\n\tdefineElement,\n\tisBrowser,\n\tMTDSElement,\n\toff,\n\ton,\n\tonMutation,\n\ttag,\n} 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\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"mtds-chart\": MTDSChartElement;\n\t}\n}\n\nconst EVENTS = \"click keydown mousemove mouseout\";\nconst TOOLTIP_ID = \"mtds-chart-tooltip\";\nconst TOOLTIP = isBrowser()\n\t? document.getElementById(TOOLTIP_ID) ||\n\t\ttag(\"div\", {\n\t\t\t\"aria-hidden\": \"true\",\n\t\t\tclass: styles._tooltip,\n\t\t\thidden: \"\",\n\t\t\tid: TOOLTIP_ID,\n\t\t})\n\t: null;\n\nexport class MTDSChartElement extends MTDSElement {\n\t#unmutate?: () => void;\n\t#unresize?: () => void;\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\tconst render = debounce(() => this.attributeChangedCallback(), 100);\n\t\tconst resize = new ResizeObserver(() => this.handleResize());\n\t\tresize.observe(this);\n\t\tthis.#unresize = () => resize.disconnect();\n\t\tthis.#unmutate = onMutation(this, render, {\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\trequestAnimationFrame(() => this.attributeChangedCallback()); // Initial setup when children is mounted\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.#unresize?.();\n\t\tthis.#unmutate?.();\n\t\tthis.#unmutate = this.#unresize = undefined;\n\t}\n\tattributeChangedCallback() {\n\t\tconst data = toData(this.querySelector(\"table\"));\n\t\tif (!data[0]) return; // We require at least one row\n\n\t\tArray.from(this.shadowRoot?.children || []).map((el) => el.remove()); // Clear shadowRoot\n\t\tconst [variant, type] = (attr(this, \"data-variant\") || \"column\").split(\"-\");\n\t\tconst aspect = attr(this, \"data-aspect\") || undefined;\n\t\tconst legend = tag(\"div\", {\n\t\t\t\"aria-hidden\": \"hidden\",\n\t\t\tclass: \"legends\",\n\t\t\trole: \"group\",\n\t\t});\n\t\tdata.slice(1).forEach(([{ value, color }]) => {\n\t\t\tconst el = tag(\"div\", { class: \"legend\" }, value);\n\t\t\tlegend.appendChild(el).style.setProperty(\"--color\", color);\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); // Axis must be first\n\t\tattachStyle(this, css);\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(${Math.min(event.clientX, window.innerWidth)}px, ${event.clientY}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 || []).map((row, rowIndex, { length }) =>\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 value = text(cell);\n\t\t\tconst tooltip =\n\t\t\t\tlength === 2 // If only header and one row, use simple tooltip only showing value\n\t\t\t\t\t? `${colHeading}: ${value}`\n\t\t\t\t\t: `${rowHeading}: ${value}${colHeading ? ` (${colHeading})` : \"\"}`;\n\t\t\tattr(cell, \"tabindex\", \"-1\");\n\n\t\t\treturn {\n\t\t\t\tnumber: (cellIndex && rowIndex && Number.parseFloat(value)) || 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\tcolor: `var(--mtdsc-chart-color-${rowIndex}-${cellIndex}, var(--mtdsc-chart-color-${rowIndex}, var(--mtdsc-chart-color-base)))`,\n\t\t\t\tvalue,\n\t\t\t\ttooltip: attr(cell, \"data-tooltip\") || tooltip,\n\t\t\t};\n\t\t}),\n\t);\n\ndefineElement(\"mtds-chart\", MTDSChartElement);\n"],"mappings":"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"}

package/mtds/chart/chart-lines.js

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

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, 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\", { class: `lineContainer`, role: \"list\" });\n\t\tlineContainer.style.setProperty(\"--color\", values[0].color); // Use color of first column as default for line\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 }, index) => {\n\t\t\tconst col = tag(\"div\", { role: \"listitem\" });\n\t\t\tconst point = tag(\"div\", {\n\t\t\t\t\"aria-label\": tooltip,\n\t\t\t\t\"data-event\": event,\n\t\t\t\ttabindex: \"0\",\n\t\t\t\tclass: \"linePoint\",\n\t\t\t\trole: \"img\",\n\t\t\t});\n\n\t\t\tattr(col, \"data-label\", data[0][index + 1]?.value);\n\t\t\tpoint.style.setProperty(\"--value\", `${number}`); // Use color of first column as default for point\n\t\t\tcol.appendChild(point);\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","point","points","s","x","y","i","a","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","names":[],"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\", { class: `lineContainer`, role: \"list\" });\n\t\tlineContainer.style.setProperty(\"--color\", values[0].color); // Use color of first column as default for line\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 }, index) => {\n\t\t\tconst col = tag(\"div\", { role: \"listitem\" });\n\t\t\tconst point = tag(\"div\", {\n\t\t\t\t\"aria-label\": tooltip,\n\t\t\t\t\"data-event\": event,\n\t\t\t\ttabindex: \"0\",\n\t\t\t\tclass: \"linePoint\",\n\t\t\t\trole: \"img\",\n\t\t\t});\n\n\t\t\tattr(col, \"data-label\", data[0][index + 1]?.value);\n\t\t\tpoint.style.setProperty(\"--value\", `${number}`); // Use color of first column as default for point\n\t\t\tcol.appendChild(point);\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"],"mappings":";;AASA,SAAgB,EAAQ,GAAiB,EAAE,UAAO,SAAM,cAAmB;CAC1E,IAAM,IAAY,OAAO,WAAW,KAAQ,GAAG,KAAK,GAC9C,IAAQ,EAAI,OAAO,EAAE,OAAO,YAAY,CAAC;CAkD/C,OAjDA,EAAK,MAAM,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,OAAY;EACxC,IAAM,IAAgB,EAAI,OAAO;GAAE,OAAO;GAAiB,MAAM;EAAO,CAAC;EACzE,EAAc,MAAM,YAAY,WAAW,EAAO,EAAE,CAAC,KAAK;EAE1D,IAAM,IAAgB,EACrB,EAAO,KAAK,EAAE,aAAU,GAAO,EAAE,gBAAa,CAC5C,OAAO,IAAS,KAAM,GACvB,MAAO,IAAS,IAAS,GAC1B,CAAC,GACD,IAAY,GACb,GAEM,IAAO,SAAS,gBAAgB,8BAA8B,KAAK;EAGzE,AAFA,EAAK,GAAM,eAAe,MAAM,GAChC,EAAK,GAAM,uBAAuB,MAAM,GACxC,EAAK,GAAM,WAAW,aAAa;EAEnC,IAAM,IAAO,SAAS,gBAAgB,8BAA8B,MAAM;EAM1E,IALA,EAAK,GAAM,SAAS,MAAM,GAC1B,EAAK,GAAM,KAAK,CAAa,GAC7B,EAAK,GAAM,QAAQ,MAAM,GACzB,EAAK,GAAM,UAAU,cAAc,GAE/B,MAAY,QAAQ;GACvB,IAAM,IAAY,EAAK,UAAU,EAAI;GAGrC,AAFA,EAAK,GAAW,KAAK,cAAc,EAAc,MAAM,CAAC,EAAE,SAAS,GACnE,EAAK,GAAW,SAAS,WAAW,GACpC,EAAK,OAAO,CAAS;EACtB;EAmBA,AAjBA,EAAO,SAAS,EAAE,WAAQ,YAAS,YAAS,MAAU;GACrD,IAAM,IAAM,EAAI,OAAO,EAAE,MAAM,WAAW,CAAC,GACrC,IAAQ,EAAI,OAAO;IACxB,cAAc;IACd,cAAc;IACd,UAAU;IACV,OAAO;IACP,MAAM;GACP,CAAC;GAKD,AAHA,EAAK,GAAK,cAAc,EAAK,EAAE,CAAC,IAAQ,EAAE,EAAE,KAAK,GACjD,EAAM,MAAM,YAAY,WAAW,GAAG,GAAQ,GAC9C,EAAI,YAAY,CAAK,GACrB,EAAc,OAAO,CAAG;EACzB,CAAC,GAED,EAAc,YAAY,CAAI,CAAC,CAAC,OAAO,CAAI,GAC3C,EAAM,OAAO,CAAa;CAC3B,CAAC,GACM;AACR;AAGA,IAAM,KAAU,GAAoB,MACnC,EAAO,KAAK,CAAC,GAAG,IAAI,GAAG,MAAO,IAAI,EAAO,GAAG,GAAG,CAAC,IAAI,IAAI,EAAE,GAAG,GAAI,CAAC,CAAC,KAAK,GAAG,GACtE,KAAO,CAAC,GAAI,IAAe,CAAC,GAAI,OAAkB,CAAC,IAAK,GAAI,IAAK,CAAE,GACnE,KAAO,CAAC,GAAI,IAAe,CAAC,GAAI,OAAkB,CAAC,IAAK,GAAI,IAAK,CAAE,GACnE,KAAS,GAAW,CAAC,GAAG,OAAiB,CAAC,IAAI,GAAG,IAAI,CAAC,GACtD,KAAU,GAAW,GAAiB,MAAmB;CAC9D,IAAM,IAAQ,EAAI,IAAI,IAChB,IAAM,EAAI,IACV,CAAC,GAAK,KAAO,EAAI,GAAO,EAAM,GAAQ,EAAI,GAAK,EAAI,IAAI,MAAM,CAAK,CAAC,CAAC,GACpE,CAAC,GAAK,KAAO,EAAI,GAAK,EAAM,GAAQ,EAAI,GAAO,EAAI,IAAI,MAAM,CAAG,CAAC,CAAC;CACxE,OAAO,KAAK,EAAI,GAAG,EAAI,GAAG,EAAI,GAAG,EAAI,GAAG,EAAI,GAAG,GAAG,EAAI;AACvD"}

package/mtds/chart/chart-pies.js

@@ -1,18 +1,18 @@
-import { attr as s } from "../utils.js";
-function E(h, { aspect: l, variant: y }) {
-  const n = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  l && n.style.setProperty("--mtdsc-chart-aspect", l), s(n, "class", "pie"), s(n, "viewBox", "0 0 100 100");
-  let r = 0;
-  const t = 50, e = y === "doughnut" ? 25 : 0, d = h.slice(1).reduce((a, [, c]) => a + c.number, 0);
-  return h.slice(1).forEach(([, { tooltip: a, number: c, event: v, color: x }]) => {
-    if (!c) return;
-    const o = document.createElementNS("http://www.w3.org/2000/svg", "path"), p = r / d;
-    r += c;
-    const m = Math.min(r / d, 0.99999), u = m - p > 0.5 ? 1 : 0, w = 2 * Math.PI * (p - 0.25), g = 2 * Math.PI * (m - 0.25), i = Math.cos(w), $ = Math.sin(w), M = Math.cos(g), f = Math.sin(g), P = `M ${t + e * i} ${t + e * $} L ${t + t * i} ${t + t * $} A ${t} ${t} 0 ${u} 1 ${t + t * M} ${t + t * f} L ${t + e * M} ${t + e * f} A ${e} ${e} 0 ${u} 0 ${t + e * i} ${t + e * $}`;
-    o.style.setProperty("--color", x), s(o, "aria-label", a), s(o, "data-event", v), s(o, "d", P), s(o, "role", "img"), s(o, "tabindex", "0"), n.appendChild(o);
-  }), n;
+import { attr as e } from "../utils.js";
+//#region designsystem/chart/chart-pies.ts
+function t(t, { aspect: n, variant: r }) {
+	let i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	n && i.style.setProperty("--mtdsc-chart-aspect", n), e(i, "class", "pie"), e(i, "viewBox", "0 0 100 100");
+	let a = 0, o = r === "doughnut" ? 25 : 0, s = t.slice(1).reduce((e, [, t]) => e + t.number, 0);
+	return t.slice(1).forEach(([, { tooltip: t, number: n, event: r, color: c }]) => {
+		if (!n) return;
+		let l = document.createElementNS("http://www.w3.org/2000/svg", "path"), u = a / s;
+		a += n;
+		let d = Math.min(a / s, .99999), f = +(d - u > .5), p = 2 * Math.PI * (u - .25), m = 2 * Math.PI * (d - .25), h = Math.cos(p), g = Math.sin(p), _ = Math.cos(m), v = Math.sin(m), y = `M ${50 + o * h} ${50 + o * g} L ${50 + 50 * h} ${50 + 50 * g} A 50 50 0 ${f} 1 ${50 + 50 * _} ${50 + 50 * v} L ${50 + o * _} ${50 + o * v} A ${o} ${o} 0 ${f} 0 ${50 + o * h} ${50 + o * g}`;
+		l.style.setProperty("--color", c), e(l, "aria-label", t), e(l, "data-event", r), e(l, "d", y), e(l, "role", "img"), e(l, "tabindex", "0"), i.appendChild(l);
+	}), i;
 }
-export {
-  E as toPies
-};
-//# sourceMappingURL=chart-pies.js.map
+//#endregion
+export { t as toPies };
+
+//# sourceMappingURL=chart-pies.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"chart-pies.js","sources":["../../designsystem/chart/chart-pies.ts"],"sourcesContent":["import { attr } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Options = { aspect?: string; variant: string };\n\nexport function toPies(data: ChartData, { aspect, variant }: Options) {\n\tconst pie = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n\tif (aspect) pie.style.setProperty(\"--mtdsc-chart-aspect\", aspect);\n\tattr(pie, \"class\", \"pie\");\n\tattr(pie, \"viewBox\", \"0 0 100 100\");\n\n\tlet offset = 0;\n\tconst radius = 50;\n\tconst inner = variant === \"doughnut\" ? 25 : 0;\n\tconst total = data.slice(1).reduce((tot, [, td]) => tot + td.number, 0);\n\n\tdata.slice(1).forEach(([, { tooltip, number, event, color }]) => {\n\t\tif (!number) return; // Skip empty\n\t\tconst path = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n\t\tconst start = offset / total;\n\t\toffset += number;\n\t\tconst end = Math.min(offset / total, 0.99999); // Ensure full circle works\n\t\tconst largeArc = end - start > 0.5 ? 1 : 0;\n\t\tconst a0 = 2 * Math.PI * (start - 0.25);\n\t\tconst a1 = 2 * Math.PI * (end - 0.25);\n\t\tconst x0 = Math.cos(a0);\n\t\tconst y0 = Math.sin(a0);\n\t\tconst x1 = Math.cos(a1);\n\t\tconst y1 = Math.sin(a1);\n\t\tconst d = `M ${radius + inner * x0} ${radius + inner * y0} L ${radius + radius * x0} ${radius + radius * y0} A ${radius} ${radius} 0 ${largeArc} 1 ${radius + radius * x1} ${radius + radius * y1} L ${radius + inner * x1} ${radius + inner * y1} A ${inner} ${inner} 0 ${largeArc} 0 ${radius + inner * x0} ${radius + inner * y0}`;\n\n\t\tpath.style.setProperty(\"--color\", color);\n\t\tattr(path, \"aria-label\", tooltip);\n\t\tattr(path, \"data-event\", event);\n\t\tattr(path, \"d\", d);\n\t\tattr(path, \"role\", \"img\");\n\t\tattr(path, \"tabindex\", \"0\");\n\t\tpie.appendChild(path);\n\t});\n\treturn pie;\n}\n"],"names":["toPies","data","aspect","variant","pie","attr","offset","radius","inner","total","tot","td","tooltip","number","event","color","path","start","end","largeArc","a0","a1","x0","y0","x1","y1","d"],"mappings":";AAKO,SAASA,EAAOC,GAAiB,EAAE,QAAAC,GAAQ,SAAAC,KAAoB;AACrE,QAAMC,IAAM,SAAS,gBAAgB,8BAA8B,KAAK;AACxE,EAAIF,KAAQE,EAAI,MAAM,YAAY,wBAAwBF,CAAM,GAChEG,EAAKD,GAAK,SAAS,KAAK,GACxBC,EAAKD,GAAK,WAAW,aAAa;AAElC,MAAIE,IAAS;AACb,QAAMC,IAAS,IACTC,IAAQL,MAAY,aAAa,KAAK,GACtCM,IAAQR,EAAK,MAAM,CAAC,EAAE,OAAO,CAACS,GAAK,CAAA,EAAGC,CAAE,MAAMD,IAAMC,EAAG,QAAQ,CAAC;AAEtE,SAAAV,EAAK,MAAM,CAAC,EAAE,QAAQ,CAAC,GAAG,EAAE,SAAAW,GAAS,QAAAC,GAAQ,OAAAC,GAAO,OAAAC,EAAA,CAAO,MAAM;AAChE,QAAI,CAACF,EAAQ;AACb,UAAMG,IAAO,SAAS,gBAAgB,8BAA8B,MAAM,GACpEC,IAAQX,IAASG;AACvB,IAAAH,KAAUO;AACV,UAAMK,IAAM,KAAK,IAAIZ,IAASG,GAAO,OAAO,GACtCU,IAAWD,IAAMD,IAAQ,MAAM,IAAI,GACnCG,IAAK,IAAI,KAAK,MAAMH,IAAQ,OAC5BI,IAAK,IAAI,KAAK,MAAMH,IAAM,OAC1BI,IAAK,KAAK,IAAIF,CAAE,GAChBG,IAAK,KAAK,IAAIH,CAAE,GAChBI,IAAK,KAAK,IAAIH,CAAE,GAChBI,IAAK,KAAK,IAAIJ,CAAE,GAChBK,IAAI,KAAKnB,IAASC,IAAQc,CAAE,IAAIf,IAASC,IAAQe,CAAE,MAAMhB,IAASA,IAASe,CAAE,IAAIf,IAASA,IAASgB,CAAE,MAAMhB,CAAM,IAAIA,CAAM,MAAMY,CAAQ,MAAMZ,IAASA,IAASiB,CAAE,IAAIjB,IAASA,IAASkB,CAAE,MAAMlB,IAASC,IAAQgB,CAAE,IAAIjB,IAASC,IAAQiB,CAAE,MAAMjB,CAAK,IAAIA,CAAK,MAAMW,CAAQ,MAAMZ,IAASC,IAAQc,CAAE,IAAIf,IAASC,IAAQe,CAAE;AAEnU,IAAAP,EAAK,MAAM,YAAY,WAAWD,CAAK,GACvCV,EAAKW,GAAM,cAAcJ,CAAO,GAChCP,EAAKW,GAAM,cAAcF,CAAK,GAC9BT,EAAKW,GAAM,KAAKU,CAAC,GACjBrB,EAAKW,GAAM,QAAQ,KAAK,GACxBX,EAAKW,GAAM,YAAY,GAAG,GAC1BZ,EAAI,YAAYY,CAAI;AAAA,EACrB,CAAC,GACMZ;AACR;"}
+{"version":3,"file":"chart-pies.js","names":[],"sources":["../../designsystem/chart/chart-pies.ts"],"sourcesContent":["import { attr } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Options = { aspect?: string; variant: string };\n\nexport function toPies(data: ChartData, { aspect, variant }: Options) {\n\tconst pie = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n\tif (aspect) pie.style.setProperty(\"--mtdsc-chart-aspect\", aspect);\n\tattr(pie, \"class\", \"pie\");\n\tattr(pie, \"viewBox\", \"0 0 100 100\");\n\n\tlet offset = 0;\n\tconst radius = 50;\n\tconst inner = variant === \"doughnut\" ? 25 : 0;\n\tconst total = data.slice(1).reduce((tot, [, td]) => tot + td.number, 0);\n\n\tdata.slice(1).forEach(([, { tooltip, number, event, color }]) => {\n\t\tif (!number) return; // Skip empty\n\t\tconst path = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n\t\tconst start = offset / total;\n\t\toffset += number;\n\t\tconst end = Math.min(offset / total, 0.99999); // Ensure full circle works\n\t\tconst largeArc = end - start > 0.5 ? 1 : 0;\n\t\tconst a0 = 2 * Math.PI * (start - 0.25);\n\t\tconst a1 = 2 * Math.PI * (end - 0.25);\n\t\tconst x0 = Math.cos(a0);\n\t\tconst y0 = Math.sin(a0);\n\t\tconst x1 = Math.cos(a1);\n\t\tconst y1 = Math.sin(a1);\n\t\tconst d = `M ${radius + inner * x0} ${radius + inner * y0} L ${radius + radius * x0} ${radius + radius * y0} A ${radius} ${radius} 0 ${largeArc} 1 ${radius + radius * x1} ${radius + radius * y1} L ${radius + inner * x1} ${radius + inner * y1} A ${inner} ${inner} 0 ${largeArc} 0 ${radius + inner * x0} ${radius + inner * y0}`;\n\n\t\tpath.style.setProperty(\"--color\", color);\n\t\tattr(path, \"aria-label\", tooltip);\n\t\tattr(path, \"data-event\", event);\n\t\tattr(path, \"d\", d);\n\t\tattr(path, \"role\", \"img\");\n\t\tattr(path, \"tabindex\", \"0\");\n\t\tpie.appendChild(path);\n\t});\n\treturn pie;\n}\n"],"mappings":";;AAKA,SAAgB,EAAO,GAAiB,EAAE,WAAQ,cAAoB;CACrE,IAAM,IAAM,SAAS,gBAAgB,8BAA8B,KAAK;CAGxE,AAFI,KAAQ,EAAI,MAAM,YAAY,wBAAwB,CAAM,GAChE,EAAK,GAAK,SAAS,KAAK,GACxB,EAAK,GAAK,WAAW,aAAa;CAElC,IAAI,IAAS,GAEP,IAAQ,MAAY,aAAa,KAAK,GACtC,IAAQ,EAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,GAAK,GAAG,OAAQ,IAAM,EAAG,QAAQ,CAAC;CAyBtE,OAvBA,EAAK,MAAM,CAAC,CAAC,CAAC,SAAS,GAAG,EAAE,YAAS,WAAQ,UAAO,gBAAa;EAChE,IAAI,CAAC,GAAQ;EACb,IAAM,IAAO,SAAS,gBAAgB,8BAA8B,MAAM,GACpE,IAAQ,IAAS;EACvB,KAAU;EACV,IAAM,IAAM,KAAK,IAAI,IAAS,GAAO,MAAO,GACtC,IAAW,MAAM,IAAQ,KACzB,IAAK,IAAI,KAAK,MAAM,IAAQ,MAC5B,IAAK,IAAI,KAAK,MAAM,IAAM,MAC1B,IAAK,KAAK,IAAI,CAAE,GAChB,IAAK,KAAK,IAAI,CAAE,GAChB,IAAK,KAAK,IAAI,CAAE,GAChB,IAAK,KAAK,IAAI,CAAE,GAChB,IAAI,KAAK,KAAS,IAAQ,EAAG,GAAG,KAAS,IAAQ,EAAG,KAAK,KAAS,KAAS,EAAG,GAAG,KAAS,KAAS,EAAG,aAA2B,EAAS,KAAK,KAAS,KAAS,EAAG,GAAG,KAAS,KAAS,EAAG,KAAK,KAAS,IAAQ,EAAG,GAAG,KAAS,IAAQ,EAAG,KAAK,EAAM,GAAG,EAAM,KAAK,EAAS,KAAK,KAAS,IAAQ,EAAG,GAAG,KAAS,IAAQ;EAQjU,AANA,EAAK,MAAM,YAAY,WAAW,CAAK,GACvC,EAAK,GAAM,cAAc,CAAO,GAChC,EAAK,GAAM,cAAc,CAAK,GAC9B,EAAK,GAAM,KAAK,CAAC,GACjB,EAAK,GAAM,QAAQ,KAAK,GACxB,EAAK,GAAM,YAAY,GAAG,GAC1B,EAAI,YAAY,CAAI;CACrB,CAAC,GACM;AACR"}

package/mtds/chart/chart.js

@@ -1,52 +1,6 @@
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { toCustomElementProps as s } from "../utils.js";
-import "./chart-element.js";
-import "../alert/alert.js";
-import "../app/app.js";
-import "../avatar/avatar.js";
-import "../badge/badge.js";
-import "../breadcrumbs/breadcrumbs.js";
-import "../button/button.js";
-import "../card/card.js";
-import "../chip/chip.js";
-import "../details/details.js";
-import "../dialog/dialog.js";
-import "../divider/divider.js";
-import "../errorsummary/errorsummary.js";
-import "../field/field.js";
-import "../fieldset/fieldset.js";
-import "../fileupload/fileupload.js";
-import "../helptext/helptext.js";
-import "../input/input.js";
-import "../law/law.js";
-import "../layout/layout.js";
-import "../link/link.js";
-import "../logo/logo.js";
-import "../pagination/pagination.js";
-import "../popover/popover.js";
-import "../print/print.js";
-import "../progress/progress.js";
-import "../skeleton/skeleton.js";
-import "../spinner/spinner.js";
-import "../steps/steps.js";
-import { Table as i } from "../table/table.js";
-import "../tabs/tabs.js";
-import "../tag/tag.js";
-import "../toast/toast.js";
-import "../togglegroup/togglegroup.js";
-import "../typography/typography.js";
-import "../validation/validation.js";
-let o = 0;
-const Z = d(function({ data: m, children: e, ...n }, h) {
-  return /* @__PURE__ */ r("mtds-chart", { ref: h, ...s(n), children: m ? /* @__PURE__ */ c(i, { children: [
-    /* @__PURE__ */ r(i.Thead, { children: m.slice(0, 1).map((p) => /* @__PURE__ */ r(i.Tr, { children: p.map((t) => /* @__PURE__ */ r(i.Th, { suppressHydrationWarning: !0, children: t }, `${++o}`)) }, `${++o}`)) }),
-    /* @__PURE__ */ r(i.Tbody, { children: m.slice(1).map((p) => /* @__PURE__ */ r(i.Tr, { children: p.map(
-      (t, l) => l ? /* @__PURE__ */ r(i.Td, { children: t }, `${++o}`) : /* @__PURE__ */ r(i.Th, { children: t }, `${++o}`)
-    ) }, `${++o}`)) })
-  ] }, `table_${++o}`) : e });
-});
-export {
-  Z as Chart
-};
-//# sourceMappingURL=chart.js.map
+//#region designsystem/chart/chart.css?raw
+var e = "/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */\n:host(:not([hidden])) { display: grid; gap: var(--mtds-6) }\n[data-event] { cursor: pointer } /* Used to forward clicks from Chart ShaowDOM to relevant cell in child table */\n\n.pie { overflow: visible; aspect-ratio: var(--mtdsc-chart-aspect) }\n.pie > path {\n	fill: var(--color);\n	outline: none;\n	stroke-width: var(--mtdsc-chart-border-width);\n	stroke: var(--mtdsc-chart-border-color);\n	transform-origin: center;\n	transition: scale 0.2s;\n	vector-effect: non-scaling-stroke;\n}\n.pie > path:focus-visible,\n.pie > path:hover { scale: 1.05 }\n:host([data-steps=\"false\"]) .axisStep::before,\n:host([data-variant=\"doughnut\"]) .axis,\n:host([data-variant=\"pie\"]) .axis { display: none }\n:host([data-labels=\"false\"]) .axisGroup::before { position: absolute; pointer-events: none; opacity: 0 } /* Keep available for screen readers */\n:host([data-labels=\"false\"]) .lineContainer > div::before,\n:host([data-labels=\"false\"]) .lineContainer > div::after { display: none }\n\n.axis {\n	display: grid;\n	font-size: var(--mtds-body-sm-font-size);\n	gap: var(--mtdsc-chart-axis-gap);\n	grid-template-columns: fit-content(7em) 1fr;\n	grid-template-rows: 1fr auto;\n	grid-template-areas:\n		\"y-axis chart\"\n		\"y-axis x-axis\";\n}\n\n.axis::before {\n	border-bottom-left-radius: var(--mtdsc-chart-axis-edge-radius);\n	border-color: var(--mtdsc-chart-axis-edge-color);\n	border-style: solid;\n	border-width: 0 0 var(--mtdsc-chart-axis-edge-width) var(--mtdsc-chart-axis-edge-width);\n	content: \"\";\n	grid-area: chart;\n	pointer-events: none;\n	z-index: 2;\n}\n\n.axisSteps,\n.axisStep,\n.axisGroups,\n.axisGroup { box-sizing: border-box; display: grid; position: relative } /* Help .lineContainer positioning */\n.axisGroups {\n	--gap: max(1px, clamp(.5%, calc(10% / var(--bars) * var(--groups)), var(--mtdsc-chart-axis-gap)));\n	gap: var(--mtdsc-chart-axis-gap) var(--gap);\n	grid-area: chart / chart / x-axis / chart;\n	grid-auto-columns: 1fr;\n	grid-template-rows: subgrid;\n	padding: 0 var(--mtdsc-chart-axis-gap);\n	text-align: center;\n}\n.axisGroup { grid-row: inherit; grid-template: inherit }\n.axisGroup::before { order: 1; content: attr(data-label); direction: ltr; min-width: 0 } /* Allow word-wrapping */\n:host(:not([data-variant|=\"bar\"])) { .axisGroup::before { justify-self: center; text-align: start; writing-mode: vertical-rl } }\n\n.axisSteps { align-items: end; aspect-ratio: var(--mtdsc-chart-aspect); grid-area: chart / y-axis / chart / chart; grid-auto-rows: 1fr; grid-template: 1px / subgrid }\n.axisStep { align-items: start; grid-column: inherit; grid-template-columns: inherit; height: 1px; text-align: right }\n.axisStep::after { border-bottom: var(--mtdsc-chart-axis-border); content: \"\" }\n.axisStep::before { content: attr(data-label) / \"\"; translate: 0 -50% }  /* Hide form screen readers */\n.axisStep[data-label=\"0\"]::after { opacity: 0 } /* Hide 0 line as it overlapps with .axis::before */\n\n/* Reduce amount of steps if small space */\n:host(:not([data-variant|=\"bar\"])) .axisStepsYHalf .axisStep:nth-last-child(even) { display: none }\n:host(:not([data-variant|=\"bar\"])) .axisStepsYHalf .axisSteps:has(.axisStep:nth-last-child(even):first-child) { grid-template-rows: 0.5fr }\n:host([data-variant|=\"bar\"]) .axisStepsXHalf .axisStep:nth-last-child(even) { display: none }\n:host([data-variant|=\"bar\"]) .axisStepsXHalf .axisSteps:has(.axisStep:nth-last-child(even):first-child) { grid-template-columns: 0.5fr }\n\n:host([data-variant|=\"bar\"]) .axisSteps,\n:host([data-variant|=\"bar\"]) .axisGroup { direction: rtl }\n:host([data-variant|=\"bar\"]) .axisSteps > *,\n:host([data-variant|=\"bar\"]) .axisGroup > * { direction: ltr }\n:host([data-variant|=\"bar\"]) .axisGroups {\n	aspect-ratio: var(--mtdsc-chart-aspect);\n	gap: 1% var(--mtdsc-chart-axis-gap);\n	grid-area: chart / y-axis / chart / chart;\n	grid-template: none / subgrid;\n	padding: var(--mtdsc-chart-axis-gap) 0;\n	row-gap: var(--mtdsc-chart-axis-gap);\n	text-align: right;\n}\n:host([data-variant|=\"bar\"]) .axisGroup::before { align-self: center }\n:host([data-variant|=\"bar\"]) .axisGroup { grid-column: inherit; grid-row: auto }\n:host([data-variant|=\"bar\"]) .axisSteps { align-items: stretch; aspect-ratio: auto; grid-area: chart / chart / x-axis / chart; grid-auto-columns: 1fr; grid-template: subgrid / 1px }\n:host([data-variant|=\"bar\"]) .axisStep { align-items: stretch; grid-row: inherit; grid-column: auto; grid-template-rows: inherit; grid-template-columns: none; text-align: center }\n:host([data-variant|=\"bar\"]) .axisStep::after { order: -1; border-left: var(--mtdsc-chart-axis-border); border-bottom: 0 }\n:host([data-variant|=\"bar\"]) .axisStep::before { translate: -50% 0 }\n\n.axisGroupContent { display: flex }\n:host([data-variant=\"column-stacked\"]) .axisGroupContent { flex-direction: column-reverse }\n:host([data-variant=\"bar\"]) .axisGroupContent { flex-direction: column }\n:host([data-variant=\"bar-stacked\"]) .axisGroupContent { flex-direction: row }\n\n.bar {\n	--size: calc(var(--value) / var(--total, 1) * 100%);\n	align-self: end;\n	background: var(--color);\n	border: var(--mtdsc-chart-border-color) solid var(--mtdsc-chart-border-width);\n	border-radius: var(--mtds-border-radius-sm) var(--mtds-border-radius-sm) 0 0;\n	box-sizing: border-box;\n	height: var(--size);\n	width: 100%;\n}\n.bar:focus-visible,\n.linePoint:focus-visible { box-shadow: var(--mtdsc-focus-boxShadow); outline: var(--mtdsc-focus-outline); outline-offset: var(--mtds-border-width-focus); z-index: 2 }\n:host([data-variant|=\"bar\"]) .bar { border-radius: 0 var(--mtds-border-radius-sm) var(--mtds-border-radius-sm) 0; width: var(--size); height: 100%; align-self: start }\n\n/* Prevent double border - using margin to see border around bars */\n/* Prevent double border - using border to avoid affecting size */\n:host(:not([data-variant])) .bar + .bar,\n:host([data-variant=\"column\"]) .bar + .bar { margin-left: -1px }\n:host([data-variant=\"column-stacked\"]) .bar:not(:last-child) { border-radius: 0 }\n:host([data-variant=\"column-stacked\"]) .bar + .bar { border-bottom: none }\n:host([data-variant=\"bar\"]) .bar + .bar { margin-top: -1px }\n:host([data-variant=\"bar-stacked\"]) .bar:not(:last-child) { border-radius: 0 }\n:host([data-variant=\"bar-stacked\"]) .bar + .bar { border-left: none }\n\n.lineContainer { align-items: flex-start; display: flex; justify-content: space-between; pointer-events: none; grid-row: chart }\n.lineContainer > svg, .lineContainer { position: absolute; width: 100%; height: 100% }\n.lineContainer > svg { overflow: clip visible }\n.lineContainer > div { position: relative; height: 100% }\n.lineContainer > div + div::before {\n	border-left: var(--mtdsc-chart-axis-border);\n	content: '';\n	inset: 0 auto 0 0;\n	position: absolute;\n}\n\n.lineContainer > div::after {\n	content: attr(data-label) / '';\n	position: absolute;\n	top: 100%;\n	translate: -50%;\n}\n\n:host([data-variant|=\"line\"]) .axisGroups,\n:host([data-variant|=\"area\"]) .axisGroups { padding: 0 }\n.lineShade, .line { fill: none; stroke: var(--color); stroke-linejoin: round; stroke-linecap: round; stroke-width: 1.5; vector-effect: non-scaling-stroke }\n.lineShade { stroke: none; fill: var(--color); opacity: 0.3; mask: linear-gradient(to bottom, black, transparent) }\n\n.linePoint, .line, :host:has(.linePoint) .legend::before { filter: var(--_mtdsc-chart-line-filter) } /* Ensure more contrast for line colors */\n.linePoint {\n	--size: var(--mtds-2);\n	background: var(--color);\n	border-radius: var(--mtds-border-radius-full);\n	border: var(--mtdsc-chart-border-width) solid var(--mtdsc-chart-border-color);\n	box-sizing: border-box;\n	height: var(--size);\n	margin: calc(var(--size) / -2);\n	padding: 0;\n	pointer-events: all;\n	position: relative;\n	top: calc(100% - var(--value) / var(--total, 1) * 100%);\n	transition: scale 0.2s;\n	width: var(--size);\n	z-index: 2;\n}\n.linePoint:focus-visible,\n.linePoint:hover { scale: 1.3 }\n.linePoint::before { content: \"\"; position: absolute; inset: calc(var(--mtds-3) * -1); /* Increase click surface */ }\n:host([data-dots=\"false\"]) .linePoint { background: none; border: none }\n\n:host([data-legend=\"false\"]) .legends { display: none }\n.legends { align-items: center; display: flex; flex-wrap: wrap; gap: var(--mtds-2) var(--mtds-5); justify-content: center }\n.legend { display: flex; align-items: center; gap: var(--mtds-2) }\n.legend::before {\n	background: var(--color);\n	border-radius: var(--mtds-border-radius-full);\n	border: var(--mtdsc-chart-border-color) solid var(--mtdsc-chart-border-width);\n	box-sizing: border-box;\n	content: \"\";\n	display: inline-block;\n	height: var(--mtds-5);\n	vertical-align: middle;\n	width: var(--mtds-5);\n}\n";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=chart.js.map

package/mtds/chart/chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart.js","sources":["../../designsystem/chart/chart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { toCustomElementProps } from \"../utils\";\nimport \"./chart-element\";\nimport { Table } from \"../react\";\nimport type { CustomReactElementProps } from \"../react-types\";\nimport type { MTDSChartElement } from \"./chart-element\";\n\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t\"mtds-chart\": ChartProps;\n\t\t}\n\t}\n}\n\nexport type ChartProps = CustomReactElementProps<MTDSChartElement> & {\n\tdata?: (number | string)[][];\n\t\"data-legend\"?: \"none\" | \"hidden\" | \"false\" | \"true\" | boolean;\n\t\"data-axis\"?: \"none\" | \"hidden\" | \"false\" | \"true\" | boolean;\n\t\"data-variant\"?:\n\t\t| \"area\"\n\t\t| \"bar\"\n\t\t| \"bar-stacked\"\n\t\t| \"column\"\n\t\t| \"column-stacked\"\n\t\t| \"doughnut\"\n\t\t| \"line\"\n\t\t| \"pie\";\n};\n\nlet RENDER = 0; // Ensure re-render on data change\nexport const Chart = forwardRef<MTDSChartElement, ChartProps>(function Chart(\n\t{ data, children, ...rest },\n\tref,\n) {\n\treturn (\n\t\t<mtds-chart ref={ref} {...toCustomElementProps(rest)}>\n\t\t\t{data ? (\n\t\t\t\t<Table key={`table_${++RENDER}`}>\n\t\t\t\t\t<Table.Thead>\n\t\t\t\t\t\t{data.slice(0, 1).map((tr) => (\n\t\t\t\t\t\t\t<Table.Tr key={`${++RENDER}`}>\n\t\t\t\t\t\t\t\t{tr.map((td) => (\n\t\t\t\t\t\t\t\t\t<Table.Th suppressHydrationWarning key={`${++RENDER}`}>\n\t\t\t\t\t\t\t\t\t\t{td}\n\t\t\t\t\t\t\t\t\t</Table.Th>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</Table.Tr>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Table.Thead>\n\t\t\t\t\t<Table.Tbody>\n\t\t\t\t\t\t{data.slice(1).map((tr) => (\n\t\t\t\t\t\t\t<Table.Tr key={`${++RENDER}`}>\n\t\t\t\t\t\t\t\t{tr.map((td, i) =>\n\t\t\t\t\t\t\t\t\ti ? (\n\t\t\t\t\t\t\t\t\t\t<Table.Td key={`${++RENDER}`}>{td}</Table.Td>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<Table.Th key={`${++RENDER}`}>{td}</Table.Th>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Table.Tr>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Table.Tbody>\n\t\t\t\t</Table>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</mtds-chart>\n\t);\n});\n"],"names":["RENDER","Chart","forwardRef","data","children","rest","ref","jsx","toCustomElementProps","jsxs","Table","tr","td","i"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAIA,IAAS;AACN,MAAMC,IAAQC,EAAyC,SAC7D,EAAE,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GACrBC,GACC;AACD,SACC,gBAAAC,EAAC,gBAAW,KAAAD,GAAW,GAAGE,EAAqBH,CAAI,GACjD,UAAAF,IACA,gBAAAM,EAACC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAH,EAACG,EAAM,OAAN,EACC,UAAAP,EAAK,MAAM,GAAG,CAAC,EAAE,IAAI,CAACQ,MACtB,gBAAAJ,EAACG,EAAM,IAAN,EACC,YAAG,IAAI,CAACE,MACR,gBAAAL,EAACG,EAAM,IAAN,EAAS,0BAAwB,IAChC,eADsC,GAAG,EAAEV,CAAM,EAEnD,CACA,KALa,GAAG,EAAEA,CAAM,EAM1B,CACA,GACF;AAAA,IACA,gBAAAO,EAACG,EAAM,OAAN,EACC,YAAK,MAAM,CAAC,EAAE,IAAI,CAACC,MACnB,gBAAAJ,EAACG,EAAM,IAAN,EACC,UAAAC,EAAG;AAAA,MAAI,CAACC,GAAIC,MACZA,sBACEH,EAAM,IAAN,EAA8B,UAAAE,EAAA,GAAhB,GAAG,EAAEZ,CAAM,EAAQ,sBAEjCU,EAAM,IAAN,EAA8B,UAAAE,KAAhB,GAAG,EAAEZ,CAAM,EAAQ;AAAA,IAAA,KALtB,GAAG,EAAEA,CAAM,EAQ1B,CACA,EAAA,CACF;AAAA,EAAA,EAAA,GAxBW,SAAS,EAAEA,CAAM,EAyB7B,IAEAI,GAEF;AAEF,CAAC;"}
+{"version":3,"file":"chart.js","names":[],"sources":[],"mappings":""}

package/mtds/chart/chart2.js

@@ -0,0 +1,21 @@
+import { toCustomElementProps as e } from "../utils.js";
+import "./chart-element.js";
+import { Table as t } from "../table/table.js";
+import "../react.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region designsystem/chart/chart.tsx
+var a = 0, o = n(function({ data: n, children: o, ...s }, c) {
+	return /* @__PURE__ */ r("mtds-chart", {
+		ref: c,
+		...e(s),
+		children: n ? /* @__PURE__ */ i(t, { children: [/* @__PURE__ */ r(t.Thead, { children: n.slice(0, 1).map((e) => /* @__PURE__ */ r(t.Tr, { children: e.map((e) => /* @__PURE__ */ r(t.Th, {
+			suppressHydrationWarning: !0,
+			children: e
+		}, `${++a}`)) }, `${++a}`)) }), /* @__PURE__ */ r(t.Tbody, { children: n.slice(1).map((e) => /* @__PURE__ */ r(t.Tr, { children: e.map((e, n) => r(n ? t.Td : t.Th, { children: e }, `${++a}`)) }, `${++a}`)) })] }, `table_${++a}`) : o
+	});
+});
+//#endregion
+export { o as Chart };
+
+//# sourceMappingURL=chart2.js.map

package/mtds/chart/chart2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart2.js","names":[],"sources":["../../designsystem/chart/chart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { toCustomElementProps } from \"../utils\";\nimport \"./chart-element\";\nimport { Table } from \"../react\";\nimport type { CustomReactElementProps } from \"../react-types\";\nimport type { MTDSChartElement } from \"./chart-element\";\n\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t\"mtds-chart\": ChartProps;\n\t\t}\n\t}\n}\n\nexport type ChartProps = CustomReactElementProps<MTDSChartElement> & {\n\tdata?: (number | string)[][];\n\t\"data-legend\"?: \"none\" | \"hidden\" | \"false\" | \"true\" | boolean;\n\t\"data-axis\"?: \"none\" | \"hidden\" | \"false\" | \"true\" | boolean;\n\t\"data-variant\"?:\n\t\t| \"area\"\n\t\t| \"bar\"\n\t\t| \"bar-stacked\"\n\t\t| \"column\"\n\t\t| \"column-stacked\"\n\t\t| \"doughnut\"\n\t\t| \"line\"\n\t\t| \"pie\";\n};\n\nlet RENDER = 0; // Ensure re-render on data change\nexport const Chart = forwardRef<MTDSChartElement, ChartProps>(function Chart(\n\t{ data, children, ...rest },\n\tref,\n) {\n\treturn (\n\t\t<mtds-chart ref={ref} {...toCustomElementProps(rest)}>\n\t\t\t{data ? (\n\t\t\t\t<Table key={`table_${++RENDER}`}>\n\t\t\t\t\t<Table.Thead>\n\t\t\t\t\t\t{data.slice(0, 1).map((tr) => (\n\t\t\t\t\t\t\t<Table.Tr key={`${++RENDER}`}>\n\t\t\t\t\t\t\t\t{tr.map((td) => (\n\t\t\t\t\t\t\t\t\t<Table.Th suppressHydrationWarning key={`${++RENDER}`}>\n\t\t\t\t\t\t\t\t\t\t{td}\n\t\t\t\t\t\t\t\t\t</Table.Th>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</Table.Tr>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Table.Thead>\n\t\t\t\t\t<Table.Tbody>\n\t\t\t\t\t\t{data.slice(1).map((tr) => (\n\t\t\t\t\t\t\t<Table.Tr key={`${++RENDER}`}>\n\t\t\t\t\t\t\t\t{tr.map((td, i) =>\n\t\t\t\t\t\t\t\t\ti ? (\n\t\t\t\t\t\t\t\t\t\t<Table.Td key={`${++RENDER}`}>{td}</Table.Td>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<Table.Th key={`${++RENDER}`}>{td}</Table.Th>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Table.Tr>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Table.Tbody>\n\t\t\t\t</Table>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</mtds-chart>\n\t);\n});\n"],"mappings":";;;;;;;AA8BA,IAAI,IAAS,GACA,IAAQ,EAAyC,SAC7D,EAAE,SAAM,aAAU,GAAG,KACrB,GACC;CACD,OACC,kBAAC,cAAD;EAAiB;EAAK,GAAI,EAAqB,CAAI;YACjD,IACA,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,EAAM,OAAP,EAAA,UACE,EAAK,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,MACtB,kBAAC,EAAM,IAAP,EAAA,UACE,EAAG,KAAK,MACR,kBAAC,EAAM,IAAP;GAAU,0BAAA;aACR;EACQ,GAF8B,GAAG,EAAE,GAEnC,CACV,EACQ,GANK,GAAG,EAAE,GAMV,CACV,EACW,CAAA,GACb,kBAAC,EAAM,OAAP,EAAA,UACE,EAAK,MAAM,CAAC,CAAC,CAAC,KAAK,MACnB,kBAAC,EAAM,IAAP,EAAA,UACE,EAAG,KAAK,GAAI,MAEX,EADD,IACE,EAAM,KAEN,EAAM,IAFP,EAAA,UAA+B,EAAa,GAA7B,GAAG,EAAE,GAEwB,CAE9C,EACS,GARK,GAAG,EAAE,GAQV,CACV,EACW,CAAA,CACP,EAAA,GAzBK,SAAS,EAAE,GAyBhB,IAEP;CAEU,CAAA;AAEd,CAAC"}

package/mtds/chip/chip.js

@@ -1,12 +1,16 @@
-import { jsx as i } from "react/jsx-runtime";
-import p from "clsx";
-import { forwardRef as e } from "react";
-import f from "../styles.module.css.js";
-const h = e(function({ as: r, className: t, ...o }, m) {
-  const a = r || (o["data-removable"] ? "button" : "label");
-  return /* @__PURE__ */ i(a, { className: p(f.chip, t), ref: m, ...o });
+import e from "../styles.module.js";
+import t from "clsx";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region designsystem/chip/chip.tsx
+var i = n(function({ as: n, className: i, ...a }, o) {
+	return /* @__PURE__ */ r(n || (a["data-removable"] ? "button" : "label"), {
+		className: t(e.chip, i),
+		ref: o,
+		...a
+	});
 });
-export {
-  h as Chip
-};
-//# sourceMappingURL=chip.js.map
+//#endregion
+export { i as Chip };
+
+//# sourceMappingURL=chip.js.map

package/mtds/chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../designsystem/chip/chip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype ChipBaseProps<Removable> = {\n\thref?: Removable;\n\t\"data-removable\"?: boolean;\n};\n\nexport type ChipProps<\n\tRemovable,\n\tAs extends React.ElementType = Removable extends true ? \"button\" : \"label\",\n> = PolymorphicComponentPropWithRef<As, ChipBaseProps<Removable>>;\n\ntype ChipComponent = <\n\tRemovable,\n\tAs extends React.ElementType = Removable extends true ? \"button\" : \"label\",\n>(\n\tprops: ChipProps<Removable, As>,\n) => JSX.Element;\n\nexport const Chip: ChipComponent = forwardRef<null>(function Chip<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>({ as, className, ...rest }: ChipProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest[\"data-removable\"] ? \"button\" : \"label\");\n\n\treturn <Tag className={clsx(styles.chip, className)} ref={ref} {...rest} />;\n}) as ChipComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Chip","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles"],"mappings":";;;;AAyBO,MAAMA,IAAsBC,EAAiB,SAGlD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAA6BC,GAA0B;AAC5E,QAAMC,IAAMJ,MAAOE,EAAK,gBAAgB,IAAI,WAAW;AAEvD,SAAO,gBAAAG,EAACD,GAAA,EAAI,WAAWE,EAAKC,EAAO,MAAMN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC1E,CAAC;"}
+{"version":3,"file":"chip.js","names":[],"sources":["../../designsystem/chip/chip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype ChipBaseProps<Removable> = {\n\thref?: Removable;\n\t\"data-removable\"?: boolean;\n};\n\nexport type ChipProps<\n\tRemovable,\n\tAs extends React.ElementType = Removable extends true ? \"button\" : \"label\",\n> = PolymorphicComponentPropWithRef<As, ChipBaseProps<Removable>>;\n\ntype ChipComponent = <\n\tRemovable,\n\tAs extends React.ElementType = Removable extends true ? \"button\" : \"label\",\n>(\n\tprops: ChipProps<Removable, As>,\n) => JSX.Element;\n\nexport const Chip: ChipComponent = forwardRef<null>(function Chip<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>({ as, className, ...rest }: ChipProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest[\"data-removable\"] ? \"button\" : \"label\");\n\n\treturn <Tag className={clsx(styles.chip, className)} ref={ref} {...rest} />;\n}) as ChipComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"mappings":";;;;;AAyBA,IAAa,IAAsB,EAAiB,SAGlD,EAAE,OAAI,cAAW,GAAG,KAA6B,GAA0B;CAG5E,OAAO,kBAFK,MAAO,EAAK,oBAAoB,WAAW,UAEhD;EAAK,WAAW,EAAK,EAAO,MAAM,CAAS;EAAQ;EAAK,GAAI;CAAO,CAAA;AAC3E,CAAC"}