@mattilsynet/design 2.2.3 → 2.2.4

package/mtds/app/app.js

@@ -7,6 +7,7 @@ import "../badge/badge.js";
 import "../breadcrumbs/breadcrumbs.js";
 import { Button as s } from "../button/button.js";
 import "../card/card.js";
+import "../chart/chart.js";
 import "../chip/chip.js";
 import "../details/details.js";
 import "../dialog/dialog.js";
@@ -38,7 +39,7 @@ const f = p(function({ as: t, className: r, ...m }, n) {
   return /* @__PURE__ */ o(t || "div", { className: e(a.app, r), ref: n, ...m });
 }), u = p(function({ as: t, className: r, ...m }, n) {
   return /* @__PURE__ */ o(t || "div", { className: e(a.sticky, r), ref: n, ...m });
-}), Y = Object.assign(f, {
+}), Z = Object.assign(f, {
   Header: p(
     function(t, r) {
       return /* @__PURE__ */ o("header", { ref: r, ...t });
@@ -76,6 +77,6 @@ const f = p(function({ as: t, className: r, ...m }, n) {
   Script: () => /* @__PURE__ */ o("script", { id: "mtds-app-script", children: d })
 });
 export {
-  Y as App
+  Z as App
 };
 //# sourceMappingURL=app.js.map

package/mtds/app/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sources":["../../designsystem/app/app.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport { Button, type ButtonProps } from \"../react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport script from \"./app-toggle.js?raw\";\n\nexport type AppHeaderProps = React.ComponentPropsWithoutRef<\"header\">;\nexport type AppSidebarProps = React.ComponentPropsWithoutRef<\"dialog\">;\nexport type AppStickyProps = React.ComponentPropsWithoutRef<\"div\">;\nexport type AppMainProps = React.ComponentPropsWithoutRef<\"main\">;\nexport type AppFooterProps = React.ComponentPropsWithoutRef<\"footer\">;\nexport type AppProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype AppComponent = <As extends React.ElementType = \"div\">(\n\tprops: AppProps<As>,\n) => JSX.Element;\n\nconst AppComp = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.app, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nconst AppSticky = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.sticky, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport const App = Object.assign(AppComp, {\n\tHeader: forwardRef<HTMLElement, AppHeaderProps>(\n\t\tfunction AppHeader(rest, ref) {\n\t\t\treturn <header ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSidebar: forwardRef<HTMLDialogElement, AppSidebarProps>(\n\t\tfunction AppSidebar(rest, ref) {\n\t\t\treturn <dialog role=\"navigation\" ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSticky: AppSticky,\n\tToggle: forwardRef<HTMLButtonElement, ButtonProps<\"button\">>(\n\t\tfunction AppToggle({ children, ...rest }: ButtonProps<\"button\">, ref) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\tdata-command=\"toggle-app-expanded\"\n\t\t\t\t\tdata-tooltip=\"Vis meny\"\n\t\t\t\t\tref={ref as React.Ref<HTMLAnchorElement>}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t{children ?? \"Skjul meny\"}\n\t\t\t\t</Button>\n\t\t\t);\n\t\t},\n\t),\n\tMain: forwardRef<HTMLElement, AppMainProps>(function AppMain(rest, ref) {\n\t\treturn <main ref={ref} {...rest} />;\n\t}),\n\tFooter: forwardRef<HTMLElement, AppFooterProps>(\n\t\tfunction AppFooter(rest, ref) {\n\t\t\treturn <footer ref={ref} {...rest} />;\n\t\t},\n\t),\n\t// Needed to avoid flash of unstyled content and still be Next.js hydration compatible\n\tScript: () => <script id=\"mtds-app-script\">{script}</script>,\n});\n"],"names":["AppComp","forwardRef","as","className","rest","ref","jsx","clsx","styles","AppSticky","App","children","Button","script"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAMA,IAAUC,EAAiB,SAE/B,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAsBC,GAA0B;AAGrE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,KAAKL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AACzE,CAAC,GAEKK,IAAYR,EAAiB,SAEjC,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAsBC,GAA0B;AAGrE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,QAAQL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC5E,CAAC,GAEYM,IAAM,OAAO,OAAOV,GAAS;AAAA,EACzC,QAAQC;AAAA,IACP,SAAmBG,GAAMC,GAAK;AAC7B,aAAO,gBAAAC,EAAC,UAAA,EAAO,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,IACpC;AAAA,EAAA;AAAA,EAED,SAASH;AAAA,IACR,SAAoBG,GAAMC,GAAK;AAC9B,+BAAQ,UAAA,EAAO,MAAK,cAAa,KAAAA,GAAW,GAAGD,GAAM;AAAA,IACtD;AAAA,EAAA;AAAA,EAED,QAAQK;AAAA,EACR,QAAQR;AAAA,IACP,SAAmB,EAAE,UAAAU,GAAU,GAAGP,EAAA,GAA+BC,GAAK;AACrE,aACC,gBAAAC;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,gBAAa;AAAA,UACb,gBAAa;AAAA,UACb,KAAAP;AAAA,UACC,GAAGD;AAAA,UAEH,UAAAO,KAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAGhB;AAAA,EAAA;AAAA,EAED,MAAMV,EAAsC,SAAiBG,GAAMC,GAAK;AACvE,WAAO,gBAAAC,EAAC,QAAA,EAAK,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,EAClC,CAAC;AAAA,EACD,QAAQH;AAAA,IACP,SAAmBG,GAAMC,GAAK;AAC7B,aAAO,gBAAAC,EAAC,UAAA,EAAO,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,IACpC;AAAA,EAAA;AAAA;AAAA,EAGD,QAAQ,MAAM,gBAAAE,EAAC,UAAA,EAAO,IAAG,mBAAmB,UAAAO,EAAA,CAAO;AACpD,CAAC;"}
+{"version":3,"file":"app.js","sources":["../../designsystem/app/app.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport { Button, type ButtonProps } from \"../react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport script from \"./app-toggle.js?raw\";\n\nexport type AppHeaderProps = React.ComponentPropsWithoutRef<\"header\">;\nexport type AppSidebarProps = React.ComponentPropsWithoutRef<\"dialog\">;\nexport type AppStickyProps = React.ComponentPropsWithoutRef<\"div\">;\nexport type AppMainProps = React.ComponentPropsWithoutRef<\"main\">;\nexport type AppFooterProps = React.ComponentPropsWithoutRef<\"footer\">;\nexport type AppProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype AppComponent = <As extends React.ElementType = \"div\">(\n\tprops: AppProps<As>,\n) => JSX.Element;\n\nconst AppComp = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.app, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nconst AppSticky = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.sticky, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport const App = Object.assign(AppComp, {\n\tHeader: forwardRef<HTMLElement, AppHeaderProps>(\n\t\tfunction AppHeader(rest, ref) {\n\t\t\treturn <header ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSidebar: forwardRef<HTMLDialogElement, AppSidebarProps>(\n\t\tfunction AppSidebar(rest, ref) {\n\t\t\treturn <dialog role=\"navigation\" ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSticky: AppSticky,\n\tToggle: forwardRef<HTMLButtonElement, ButtonProps<\"button\">>(\n\t\tfunction AppToggle({ children, ...rest }: ButtonProps<\"button\">, ref) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\tdata-command=\"toggle-app-expanded\"\n\t\t\t\t\tdata-tooltip=\"Vis meny\"\n\t\t\t\t\tref={ref as React.Ref<HTMLAnchorElement>}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t{children ?? \"Skjul meny\"}\n\t\t\t\t</Button>\n\t\t\t);\n\t\t},\n\t),\n\tMain: forwardRef<HTMLElement, AppMainProps>(function AppMain(rest, ref) {\n\t\treturn <main ref={ref} {...rest} />;\n\t}),\n\tFooter: forwardRef<HTMLElement, AppFooterProps>(\n\t\tfunction AppFooter(rest, ref) {\n\t\t\treturn <footer ref={ref} {...rest} />;\n\t\t},\n\t),\n\t// Needed to avoid flash of unstyled content and still be Next.js hydration compatible\n\tScript: () => <script id=\"mtds-app-script\">{script}</script>,\n});\n"],"names":["AppComp","forwardRef","as","className","rest","ref","jsx","clsx","styles","AppSticky","App","children","Button","script"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAMA,IAAUC,EAAiB,SAE/B,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAsBC,GAA0B;AAGrE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,KAAKL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AACzE,CAAC,GAEKK,IAAYR,EAAiB,SAEjC,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAsBC,GAA0B;AAGrE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,QAAQL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC5E,CAAC,GAEYM,IAAM,OAAO,OAAOV,GAAS;AAAA,EACzC,QAAQC;AAAA,IACP,SAAmBG,GAAMC,GAAK;AAC7B,aAAO,gBAAAC,EAAC,UAAA,EAAO,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,IACpC;AAAA,EAAA;AAAA,EAED,SAASH;AAAA,IACR,SAAoBG,GAAMC,GAAK;AAC9B,+BAAQ,UAAA,EAAO,MAAK,cAAa,KAAAA,GAAW,GAAGD,GAAM;AAAA,IACtD;AAAA,EAAA;AAAA,EAED,QAAQK;AAAA,EACR,QAAQR;AAAA,IACP,SAAmB,EAAE,UAAAU,GAAU,GAAGP,EAAA,GAA+BC,GAAK;AACrE,aACC,gBAAAC;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,gBAAa;AAAA,UACb,gBAAa;AAAA,UACb,KAAAP;AAAA,UACC,GAAGD;AAAA,UAEH,UAAAO,KAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAGhB;AAAA,EAAA;AAAA,EAED,MAAMV,EAAsC,SAAiBG,GAAMC,GAAK;AACvE,WAAO,gBAAAC,EAAC,QAAA,EAAK,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,EAClC,CAAC;AAAA,EACD,QAAQH;AAAA,IACP,SAAmBG,GAAMC,GAAK;AAC7B,aAAO,gBAAAC,EAAC,UAAA,EAAO,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,IACpC;AAAA,EAAA;AAAA;AAAA,EAGD,QAAQ,MAAM,gBAAAE,EAAC,UAAA,EAAO,IAAG,mBAAmB,UAAAO,EAAA,CAAO;AACpD,CAAC;"}

package/mtds/chart/chart-element.js

@@ -1,12 +1,12 @@
-import C from "../styles.module.css.js";
-import { IS_BROWSER as b, tag as c, MTDSElement as E, on as g, off as k, attr as d } from "../utils.js";
+import g from "../styles.module.css.js";
+import { IS_BROWSER as b, tag as c, MTDSElement as C, on as E, 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", r = b ? document.getElementById(p) || c("div", { class: C._tooltip, id: p, hidden: "" }) : null;
-class $ extends E {
+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 C {
   _observer;
   // Using underscore instead of # for backwards compatibility
   static get observedAttributes() {
@@ -24,19 +24,19 @@ class $ extends E {
       characterData: !0,
       childList: !0,
       subtree: !0
-    }), this.attributeChangedCallback(), g(this, h, this);
+    }), this.attributeChangedCallback(), E(this, h, this);
   }
   disconnectedCallback() {
-    r && (r.hidden = !0), k(this, h, this), this._observer?.disconnect(), this._observer = void 0;
+    a && (a.hidden = !0), k(this, h, this), this._observer?.disconnect(), this._observer = 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("-"), a = c("style", {}, T), n = c("div", { class: "legends" });
+    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));
     });
     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, type: s })), (t === "doughnut" || t === "pie") && this.shadowRoot?.append(O(e, { variant: t })), this.shadowRoot?.append(a, f, n);
+    (t === "bar" || t === "column") && m.append(...S(e)), (t === "line" || t === "area") && m.append(_(e, { total: y, variant: t, type: s })), (t === "doughnut" || t === "pie") && this.shadowRoot?.append(O(e, { variant: t })), this.shadowRoot?.append(r, f, n);
   }
   handleEvent(e) {
     e.type === "click" || e.type === "keydown" ? A(e, this) : P(e);
@@ -44,26 +44,26 @@ class $ extends E {
 }
 function A(o, e) {
   if (o instanceof KeyboardEvent && o.key !== "Enter") return;
-  const t = o.composedPath()[0], s = e.querySelector("table"), [a, n] = t instanceof Element && d(t, "data-event")?.split("-").map(Number) || [];
-  s?.rows[a]?.cells[n]?.querySelector("a,button")?.click?.();
+  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?.();
 }
 let u = "";
 function P(o) {
-  if (!r) return;
-  r?.isConnected || document.body.append(r);
+  if (!a) return;
+  a?.isConnected || document.body.append(a);
   const e = o.composedPath()[0], t = e instanceof Element && e.getAttribute("aria-label") || "";
-  t && (r.style.transform = `translate(${o.clientX}px, ${o.clientY}px)`), t !== u && (t && (r.textContent = t), u = t, r.hidden = !t);
+  t && (a.style.transform = `translate(${o.pageX}px, ${o.pageY}px)`), t !== u && (t && (a.textContent = t), u = t, a.hidden = !t);
 }
 const i = (o) => o?.textContent?.trim() || "", x = (o) => Array.from(
   o?.rows || [],
-  (e, t) => Array.from(e.cells, (s, a) => ({
-    number: a && t && Number.parseFloat(i(s)) || 0,
+  (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}-${a}`,
+    event: s.querySelector("a,button") && `${t}-${r}`,
     // Reference to proxy events
-    style: `--color: var(--mtdsc-chart-color-${t}, var(--mtdsc-chart-color))`,
+    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[a])})`
+    tooltip: d(s, "data-tooltip") || `${i(e.cells[0])}: ${i(s)} (${i(o?.rows[0].cells[r])})`
   }))
 );
 b && !window.customElements.get("mtds-chart") && window.customElements.define("mtds-chart", $);

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;\nexport class MTDSChart 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: MTDSChart) {\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.clientX}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 || [], (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))`,\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\", MTDSChart);\n"],"names":["EVENTS","TOOLTIP_ID","TOOLTIP","IS_BROWSER","tag","styles","MTDSChart","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;\nexport class MTDSChart 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: MTDSChart) {\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\", MTDSChart);\n"],"names":["EVENTS","TOOLTIP_ID","TOOLTIP","IS_BROWSER","tag","styles","MTDSChart","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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"}

package/mtds/chart/chart.css.js

@@ -1,20 +1,6 @@
 const t = `:host(:not([hidden])) {
 	display: grid;
 	gap: var(--mtds-6);
-
-	--mtdsc-chart-aspect: 16 / 9;
-	--mtdsc-chart-axis-border: var(--mtds-border-width-default) solid
-		var(--mtds-color-border-subtle);
-	--mtdsc-chart-axis-gap: var(--mtds-4);
-	--mtdsc-chart-border-width: var(--mtds-border-width-default);
-	--mtdsc-chart-border-color: #054449; /*var(--mtds-color-border-default);*/
-	--mtdsc-chart-color: var(--mtds-color-surface-tinted);
-	--mtdsc-chart-color-1: #116e6b; /* var(--mtds-color-base-default); */
-	--mtdsc-chart-color-2: #cae8ca; /*var(--mtds-color-surface-active); */
-	--mtdsc-chart-color-3: #b6d9f2;
-	--mtdsc-chart-color-4: #feecbe; /*var(--mtds-color-warning-surface-hover);*/
-	--mtdsc-chart-color-5: #fdd2c9; /*var(--mtds-color-danger-surface-active);*/
-	--mtdsc-chart-color-6: var(--mtds-color-neutral-surface-tinted);
 }
 
 [data-event-proxy] {
@@ -77,7 +63,8 @@ const t = `:host(:not([hidden])) {
 .axisGroups {
 	gap: var(--mtdsc-chart-axis-gap);
 	grid-area: chart / chart / x-axis / chart;
-	grid-template: subgrid / none;
+	grid-template-rows: subgrid;
+	grid-auto-columns: minmax(0, 1fr);
 	padding: 0 var(--mtdsc-chart-axis-gap);
 	text-align: center;
 }
@@ -107,6 +94,9 @@ const t = `:host(:not([hidden])) {
 	content: attr(data-label);
 	translate: 0 50%;
 }
+.axisStep[data-label="0"]::after {
+	opacity: 0; /* Hide 0 line as it overlapps with .axis::before */
+}
 
 :host([data-variant|="column"]) .axisSteps,
 :host([data-variant|="column"]) .axisGroup {
@@ -129,7 +119,6 @@ const t = `:host(:not([hidden])) {
 :host([data-variant|="column"]) .axisGroup {
 	grid-column: inherit;
 	grid-row: auto;
-	grid-template: inherit;
 }
 :host([data-variant|="column"]) .axisSteps {
 	grid-auto-columns: 1fr;

package/mtds/chart/chart.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart.css.js","sources":["../../designsystem/chart/chart.css?raw"],"sourcesContent":["export default \":host(:not([hidden])) {\\n\\tdisplay: grid;\\n\\tgap: var(--ds-size-6);\\n\\n\\t--mtdsc-chart-aspect: 16 / 9;\\n\\t--mtdsc-chart-axis-border: var(--ds-border-width-default) solid\\n\\t\\tvar(--ds-color-border-subtle);\\n\\t--mtdsc-chart-axis-gap: var(--ds-size-4);\\n\\t--mtdsc-chart-border-width: var(--ds-border-width-default);\\n\\t--mtdsc-chart-border-color: #054449; /*var(--ds-color-border-default);*/\\n\\t--mtdsc-chart-color: var(--ds-color-surface-tinted);\\n\\t--mtdsc-chart-color-1: #116e6b; /* var(--ds-color-base-default); */\\n\\t--mtdsc-chart-color-2: #cae8ca; /*var(--ds-color-surface-active); */\\n\\t--mtdsc-chart-color-3: #b6d9f2;\\n\\t--mtdsc-chart-color-4: #feecbe; /*var(--ds-color-warning-surface-hover);*/\\n\\t--mtdsc-chart-color-5: #fdd2c9; /*var(--ds-color-danger-surface-active);*/\\n\\t--mtdsc-chart-color-6: var(--ds-color-neutral-surface-tinted);\\n}\\n\\n[data-event-proxy] {\\n\\tcursor: pointer;\\n}\\n\\n.pie {\\n\\toverflow: visible;\\n\\taspect-ratio: var(--mtdsc-chart-aspect);\\n}\\n.pie > path {\\n\\tfill: var(--color);\\n\\toutline: none;\\n\\tstroke-width: var(--mtdsc-chart-border-width);\\n\\tstroke: var(--mtdsc-chart-border-color);\\n\\ttransform-origin: center;\\n\\ttransition: scale 0.2s;\\n\\tvector-effect: non-scaling-stroke;\\n}\\n.pie > path:focus-visible,\\n.pie > path:hover {\\n\\tscale: 1.05;\\n}\\n\\n:host([data-variant=\\\"doughnut\\\"]) .axis,\\n:host([data-variant=\\\"pie\\\"]) .axis {\\n\\tdisplay: none;\\n}\\n\\n.axis {\\n\\tfont-size: var(--ds-body-sm-font-size);\\n\\taspect-ratio: var(--mtdsc-chart-aspect);\\n\\tdisplay: grid;\\n\\tgap: var(--mtdsc-chart-axis-gap);\\n\\tgrid-template-columns: fit-content(7em) 1fr;\\n\\tgrid-template-rows: 1fr auto;\\n\\tgrid-template-areas:\\n\\t\\t\\\"y-axis chart\\\"\\n\\t\\t\\\"y-axis x-axis\\\";\\n}\\n\\n.axis::before {\\n\\tcontent: \\\"\\\";\\n\\tgrid-area: chart;\\n\\tborder-style: solid;\\n\\tborder-width: 0 0 var(--ds-border-width-default)\\n\\t\\tvar(--ds-border-width-default);\\n\\tborder-bottom-left-radius: var(--ds-border-radius-lg);\\n}\\n\\n.axisSteps,\\n.axisStep,\\n.axisGroups,\\n.axisGroup {\\n\\tbox-sizing: border-box;\\n\\tdisplay: grid;\\n\\tposition: relative; /* Help .lineContainer positioning */\\n}\\n\\n.axisGroups {\\n\\tgap: var(--mtdsc-chart-axis-gap);\\n\\tgrid-area: chart / chart / x-axis / chart;\\n\\tgrid-template: subgrid / none;\\n\\tpadding: 0 var(--mtdsc-chart-axis-gap);\\n\\ttext-align: center;\\n}\\n.axisGroup {\\n\\tgrid-row: inherit;\\n\\tgrid-template: inherit;\\n}\\n.axisGroup::after {\\n\\tcontent: attr(data-label);\\n}\\n.axisSteps {\\n\\tgrid-auto-rows: 1fr;\\n\\tgrid-area: chart / y-axis / chart / chart;\\n\\tgrid-template: 1px / subgrid;\\n}\\n.axisStep {\\n\\tgrid-column: inherit;\\n\\tgrid-template-columns: inherit;\\n\\tplace-content: end start;\\n\\ttext-align: right;\\n}\\n.axisStep::after {\\n\\tborder-bottom: var(--mtdsc-chart-axis-border);\\n\\tcontent: \\\"\\\";\\n}\\n.axisStep::before {\\n\\tcontent: attr(data-label);\\n\\ttranslate: 0 50%;\\n}\\n\\n:host([data-variant|=\\\"column\\\"]) .axisSteps,\\n:host([data-variant|=\\\"column\\\"]) .axisGroup {\\n\\tdirection: rtl; /* Reverse orders */\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisSteps > *,\\n:host([data-variant|=\\\"column\\\"]) .axisGroup > * {\\n\\tdirection: ltr;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisGroups {\\n\\tgrid-area: chart / y-axis / chart / chart;\\n\\tgrid-template: none / subgrid;\\n\\tpadding: var(--mtdsc-chart-axis-gap) 0;\\n\\trow-gap: var(--mtdsc-chart-axis-gap);\\n\\ttext-align: right;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisGroup::after {\\n\\talign-self: center; /* Since text-align does not work vertically */\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisGroup {\\n\\tgrid-column: inherit;\\n\\tgrid-row: auto;\\n\\tgrid-template: inherit;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisSteps {\\n\\tgrid-auto-columns: 1fr;\\n\\tgrid-area: chart / chart / x-axis / chart;\\n\\tgrid-template: subgrid / 1px;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisStep {\\n\\tgrid-row: inherit;\\n\\tgrid-column: auto;\\n\\tgrid-template-rows: inherit;\\n\\tgrid-template-columns: none;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisStep::after {\\n\\torder: -1;\\n\\tborder-left: var(--mtdsc-chart-axis-border);\\n\\tborder-bottom: 0;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisStep::before {\\n\\ttranslate: -50% 0;\\n}\\n\\n.axisGroupContent {\\n\\tdisplay: flex;\\n}\\n:host([data-variant=\\\"bar-stacked\\\"]) .axisGroupContent {\\n\\tflex-direction: column-reverse;\\n}\\n:host([data-variant=\\\"column\\\"]) .axisGroupContent {\\n\\tflex-direction: column;\\n}\\n:host([data-variant=\\\"column-stacked\\\"]) .axisGroupContent {\\n\\tflex-direction: row;\\n}\\n\\n.bar {\\n\\t--size: calc(var(--value) / var(--total, 1) * 100%);\\n\\talign-self: end;\\n\\tbackground: var(--color);\\n\\tborder: var(--mtdsc-chart-border-color) solid var(--mtdsc-chart-border-width);\\n\\tborder-radius: var(--ds-border-radius-sm) var(--ds-border-radius-sm) 0 0;\\n\\tbox-sizing: border-box;\\n\\theight: var(--size);\\n\\twidth: 100%;\\n}\\n.bar:focus-visible,\\n.linePoint:focus-visible {\\n\\tbox-shadow: var(--dsc-focus-boxShadow);\\n\\toutline: var(--dsc-focus-outline);\\n\\toutline-offset: var(--ds-border-width-focus);\\n\\tz-index: 2; /* z-index to place on top when outlined */\\n}\\n\\n:host([data-variant|=\\\"column\\\"]) .bar {\\n\\tborder-radius: 0 var(--ds-border-radius-sm) var(--ds-border-radius-sm) 0;\\n\\twidth: var(--size);\\n\\theight: 100%;\\n\\talign-self: start;\\n}\\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=\\\"bar\\\"]) .bar + .bar {\\n\\tmargin-left: -1px;\\n}\\n:host([data-variant=\\\"bar-stacked\\\"]) .bar:not(:last-child) {\\n\\tborder-radius: 0;\\n}\\n:host([data-variant=\\\"bar-stacked\\\"]) .bar + .bar {\\n\\tborder-bottom: none;\\n}\\n:host([data-variant=\\\"column\\\"]) .bar + .bar {\\n\\tmargin-top: -1px;\\n}\\n:host([data-variant=\\\"column-stacked\\\"]) .bar:not(:last-child) {\\n\\tborder-radius: 0;\\n}\\n:host([data-variant=\\\"column-stacked\\\"]) .bar + .bar {\\n\\tborder-left: none;\\n}\\n\\n.lineContainer {\\n\\talign-items: flex-start;\\n\\tdisplay: flex;\\n\\tjustify-content: space-between;\\n\\tpointer-events: none;\\n\\tgrid-row: chart;\\n}\\n.lineContainer > svg,\\n.lineContainer {\\n\\tposition: absolute;\\n\\twidth: 100%;\\n\\theight: 100%;\\n}\\n.lineContainer > svg {\\n\\toverflow: clip visible;\\n}\\n.lineContainer > div[role=\\\"listitem\\\"] {\\n\\tdisplay: contents;\\n}\\n\\n:host([data-variant|=\\\"line\\\"]) .axisGroups,\\n:host([data-variant|=\\\"area\\\"]) .axisGroups {\\n\\tpadding: 0;\\n}\\n\\n.line,\\n.lineShade {\\n\\tfill: none;\\n\\tstroke: var(--color);\\n\\tstroke-linejoin: round;\\n\\tstroke-linecap: round;\\n\\tstroke-width: 3;\\n\\tvector-effect: non-scaling-stroke;\\n}\\n.line {\\n\\tfilter: brightness(0.8) saturate(2); /* Ensure more contrast for line colors */\\n}\\n.lineShade {\\n\\tstroke: none;\\n\\tfill: var(--color);\\n\\topacity: 0.3;\\n\\tmask: linear-gradient(to bottom, black, transparent);\\n}\\n.linePoint {\\n\\t--size: var(--ds-size-3);\\n\\tbackground-color: var(--color);\\n\\tborder-radius: var(--ds-border-radius-full);\\n\\tborder: var(--mtdsc-chart-border-width) solid var(--mtdsc-chart-border-color);\\n\\tbox-sizing: border-box;\\n\\theight: var(--size);\\n\\tmargin: calc(var(--size) / -2);\\n\\tpadding: 0;\\n\\tpointer-events: all;\\n\\tposition: relative;\\n\\ttop: calc(100% - var(--value) / var(--total, 1) * 100%);\\n\\ttransition: scale 0.2s;\\n\\twidth: var(--size);\\n\\tz-index: 2;\\n}\\n.linePoint:focus-visible,\\n.linePoint:hover {\\n\\tscale: 1.3;\\n}\\n.linePoint::before {\\n\\tcontent: \\\"\\\";\\n\\tinset: calc(var(--ds-size-2) * -1); /* Increase click surface */\\n\\tposition: absolute;\\n}\\n\\n.legends {\\n\\talign-items: center;\\n\\tdisplay: flex;\\n\\tflex-wrap: wrap;\\n\\tgap: var(--ds-size-2) var(--ds-size-5);\\n\\tjustify-content: center;\\n}\\n.legend {\\n\\tdisplay: flex;\\n\\talign-items: center;\\n\\tgap: var(--ds-size-2);\\n}\\n.legend::before {\\n\\tbackground: var(--color);\\n\\tborder-radius: var(--ds-border-radius-full);\\n\\tborder: var(--mtdsc-chart-border-color) solid var(--mtdsc-chart-border-width);\\n\\tbox-sizing: border-box;\\n\\tcontent: \\\"\\\";\\n\\tdisplay: inline-block;\\n\\theight: var(--ds-size-5);\\n\\tvertical-align: middle;\\n\\twidth: var(--ds-size-5);\\n}\\n\""],"names":["css"],"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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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":"chart.css.js","sources":["../../designsystem/chart/chart.css?raw"],"sourcesContent":["export default \":host(:not([hidden])) {\\n\\tdisplay: grid;\\n\\tgap: var(--ds-size-6);\\n}\\n\\n[data-event-proxy] {\\n\\tcursor: pointer;\\n}\\n\\n.pie {\\n\\toverflow: visible;\\n\\taspect-ratio: var(--mtdsc-chart-aspect);\\n}\\n.pie > path {\\n\\tfill: var(--color);\\n\\toutline: none;\\n\\tstroke-width: var(--mtdsc-chart-border-width);\\n\\tstroke: var(--mtdsc-chart-border-color);\\n\\ttransform-origin: center;\\n\\ttransition: scale 0.2s;\\n\\tvector-effect: non-scaling-stroke;\\n}\\n.pie > path:focus-visible,\\n.pie > path:hover {\\n\\tscale: 1.05;\\n}\\n\\n:host([data-variant=\\\"doughnut\\\"]) .axis,\\n:host([data-variant=\\\"pie\\\"]) .axis {\\n\\tdisplay: none;\\n}\\n\\n.axis {\\n\\tfont-size: var(--ds-body-sm-font-size);\\n\\taspect-ratio: var(--mtdsc-chart-aspect);\\n\\tdisplay: grid;\\n\\tgap: var(--mtdsc-chart-axis-gap);\\n\\tgrid-template-columns: fit-content(7em) 1fr;\\n\\tgrid-template-rows: 1fr auto;\\n\\tgrid-template-areas:\\n\\t\\t\\\"y-axis chart\\\"\\n\\t\\t\\\"y-axis x-axis\\\";\\n}\\n\\n.axis::before {\\n\\tcontent: \\\"\\\";\\n\\tgrid-area: chart;\\n\\tborder-style: solid;\\n\\tborder-width: 0 0 var(--ds-border-width-default)\\n\\t\\tvar(--ds-border-width-default);\\n\\tborder-bottom-left-radius: var(--ds-border-radius-lg);\\n}\\n\\n.axisSteps,\\n.axisStep,\\n.axisGroups,\\n.axisGroup {\\n\\tbox-sizing: border-box;\\n\\tdisplay: grid;\\n\\tposition: relative; /* Help .lineContainer positioning */\\n}\\n\\n.axisGroups {\\n\\tgap: var(--mtdsc-chart-axis-gap);\\n\\tgrid-area: chart / chart / x-axis / chart;\\n\\tgrid-template-rows: subgrid;\\n\\tgrid-auto-columns: minmax(0, 1fr);\\n\\tpadding: 0 var(--mtdsc-chart-axis-gap);\\n\\ttext-align: center;\\n}\\n.axisGroup {\\n\\tgrid-row: inherit;\\n\\tgrid-template: inherit;\\n}\\n.axisGroup::after {\\n\\tcontent: attr(data-label);\\n}\\n.axisSteps {\\n\\tgrid-auto-rows: 1fr;\\n\\tgrid-area: chart / y-axis / chart / chart;\\n\\tgrid-template: 1px / subgrid;\\n}\\n.axisStep {\\n\\tgrid-column: inherit;\\n\\tgrid-template-columns: inherit;\\n\\tplace-content: end start;\\n\\ttext-align: right;\\n}\\n.axisStep::after {\\n\\tborder-bottom: var(--mtdsc-chart-axis-border);\\n\\tcontent: \\\"\\\";\\n}\\n.axisStep::before {\\n\\tcontent: attr(data-label);\\n\\ttranslate: 0 50%;\\n}\\n.axisStep[data-label=\\\"0\\\"]::after {\\n\\topacity: 0; /* Hide 0 line as it overlapps with .axis::before */\\n}\\n\\n:host([data-variant|=\\\"column\\\"]) .axisSteps,\\n:host([data-variant|=\\\"column\\\"]) .axisGroup {\\n\\tdirection: rtl; /* Reverse orders */\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisSteps > *,\\n:host([data-variant|=\\\"column\\\"]) .axisGroup > * {\\n\\tdirection: ltr;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisGroups {\\n\\tgrid-area: chart / y-axis / chart / chart;\\n\\tgrid-template: none / subgrid;\\n\\tpadding: var(--mtdsc-chart-axis-gap) 0;\\n\\trow-gap: var(--mtdsc-chart-axis-gap);\\n\\ttext-align: right;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisGroup::after {\\n\\talign-self: center; /* Since text-align does not work vertically */\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisGroup {\\n\\tgrid-column: inherit;\\n\\tgrid-row: auto;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisSteps {\\n\\tgrid-auto-columns: 1fr;\\n\\tgrid-area: chart / chart / x-axis / chart;\\n\\tgrid-template: subgrid / 1px;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisStep {\\n\\tgrid-row: inherit;\\n\\tgrid-column: auto;\\n\\tgrid-template-rows: inherit;\\n\\tgrid-template-columns: none;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisStep::after {\\n\\torder: -1;\\n\\tborder-left: var(--mtdsc-chart-axis-border);\\n\\tborder-bottom: 0;\\n}\\n:host([data-variant|=\\\"column\\\"]) .axisStep::before {\\n\\ttranslate: -50% 0;\\n}\\n\\n.axisGroupContent {\\n\\tdisplay: flex;\\n}\\n:host([data-variant=\\\"bar-stacked\\\"]) .axisGroupContent {\\n\\tflex-direction: column-reverse;\\n}\\n:host([data-variant=\\\"column\\\"]) .axisGroupContent {\\n\\tflex-direction: column;\\n}\\n:host([data-variant=\\\"column-stacked\\\"]) .axisGroupContent {\\n\\tflex-direction: row;\\n}\\n\\n.bar {\\n\\t--size: calc(var(--value) / var(--total, 1) * 100%);\\n\\talign-self: end;\\n\\tbackground: var(--color);\\n\\tborder: var(--mtdsc-chart-border-color) solid var(--mtdsc-chart-border-width);\\n\\tborder-radius: var(--ds-border-radius-sm) var(--ds-border-radius-sm) 0 0;\\n\\tbox-sizing: border-box;\\n\\theight: var(--size);\\n\\twidth: 100%;\\n}\\n.bar:focus-visible,\\n.linePoint:focus-visible {\\n\\tbox-shadow: var(--dsc-focus-boxShadow);\\n\\toutline: var(--dsc-focus-outline);\\n\\toutline-offset: var(--ds-border-width-focus);\\n\\tz-index: 2; /* z-index to place on top when outlined */\\n}\\n\\n:host([data-variant|=\\\"column\\\"]) .bar {\\n\\tborder-radius: 0 var(--ds-border-radius-sm) var(--ds-border-radius-sm) 0;\\n\\twidth: var(--size);\\n\\theight: 100%;\\n\\talign-self: start;\\n}\\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=\\\"bar\\\"]) .bar + .bar {\\n\\tmargin-left: -1px;\\n}\\n:host([data-variant=\\\"bar-stacked\\\"]) .bar:not(:last-child) {\\n\\tborder-radius: 0;\\n}\\n:host([data-variant=\\\"bar-stacked\\\"]) .bar + .bar {\\n\\tborder-bottom: none;\\n}\\n:host([data-variant=\\\"column\\\"]) .bar + .bar {\\n\\tmargin-top: -1px;\\n}\\n:host([data-variant=\\\"column-stacked\\\"]) .bar:not(:last-child) {\\n\\tborder-radius: 0;\\n}\\n:host([data-variant=\\\"column-stacked\\\"]) .bar + .bar {\\n\\tborder-left: none;\\n}\\n\\n.lineContainer {\\n\\talign-items: flex-start;\\n\\tdisplay: flex;\\n\\tjustify-content: space-between;\\n\\tpointer-events: none;\\n\\tgrid-row: chart;\\n}\\n.lineContainer > svg,\\n.lineContainer {\\n\\tposition: absolute;\\n\\twidth: 100%;\\n\\theight: 100%;\\n}\\n.lineContainer > svg {\\n\\toverflow: clip visible;\\n}\\n.lineContainer > div[role=\\\"listitem\\\"] {\\n\\tdisplay: contents;\\n}\\n\\n:host([data-variant|=\\\"line\\\"]) .axisGroups,\\n:host([data-variant|=\\\"area\\\"]) .axisGroups {\\n\\tpadding: 0;\\n}\\n\\n.line,\\n.lineShade {\\n\\tfill: none;\\n\\tstroke: var(--color);\\n\\tstroke-linejoin: round;\\n\\tstroke-linecap: round;\\n\\tstroke-width: 3;\\n\\tvector-effect: non-scaling-stroke;\\n}\\n.line {\\n\\tfilter: brightness(0.8) saturate(2); /* Ensure more contrast for line colors */\\n}\\n.lineShade {\\n\\tstroke: none;\\n\\tfill: var(--color);\\n\\topacity: 0.3;\\n\\tmask: linear-gradient(to bottom, black, transparent);\\n}\\n.linePoint {\\n\\t--size: var(--ds-size-3);\\n\\tbackground-color: var(--color);\\n\\tborder-radius: var(--ds-border-radius-full);\\n\\tborder: var(--mtdsc-chart-border-width) solid var(--mtdsc-chart-border-color);\\n\\tbox-sizing: border-box;\\n\\theight: var(--size);\\n\\tmargin: calc(var(--size) / -2);\\n\\tpadding: 0;\\n\\tpointer-events: all;\\n\\tposition: relative;\\n\\ttop: calc(100% - var(--value) / var(--total, 1) * 100%);\\n\\ttransition: scale 0.2s;\\n\\twidth: var(--size);\\n\\tz-index: 2;\\n}\\n.linePoint:focus-visible,\\n.linePoint:hover {\\n\\tscale: 1.3;\\n}\\n.linePoint::before {\\n\\tcontent: \\\"\\\";\\n\\tinset: calc(var(--ds-size-2) * -1); /* Increase click surface */\\n\\tposition: absolute;\\n}\\n\\n.legends {\\n\\talign-items: center;\\n\\tdisplay: flex;\\n\\tflex-wrap: wrap;\\n\\tgap: var(--ds-size-2) var(--ds-size-5);\\n\\tjustify-content: center;\\n}\\n.legend {\\n\\tdisplay: flex;\\n\\talign-items: center;\\n\\tgap: var(--ds-size-2);\\n}\\n.legend::before {\\n\\tbackground: var(--color);\\n\\tborder-radius: var(--ds-border-radius-full);\\n\\tborder: var(--mtdsc-chart-border-color) solid var(--mtdsc-chart-border-width);\\n\\tbox-sizing: border-box;\\n\\tcontent: \\\"\\\";\\n\\tdisplay: inline-block;\\n\\theight: var(--ds-size-5);\\n\\tvertical-align: middle;\\n\\twidth: var(--ds-size-5);\\n}\\n\""],"names":["css"],"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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/mtds/chart/chart.d.ts

@@ -9,8 +9,10 @@ declare global {
     }
 }
 export type ChartProps = React.ComponentPropsWithoutRef<"div"> & {
+    data?: (number | string)[][];
     "data-variant"?: "area" | "bar" | "bar-stacked" | "column" | "column-stacked" | "doughnut" | "line" | "pie" | `area-${number}` | `line-${number}`;
 };
 export declare const Chart: ReactTypes.ForwardRefExoticComponent<Omit<ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    data?: (number | string)[][];
     "data-variant"?: "area" | "bar" | "bar-stacked" | "column" | "column-stacked" | "doughnut" | "line" | "pie" | `area-${number}` | `line-${number}`;
 } & ReactTypes.RefAttributes<HTMLDivElement>>;

package/mtds/chart/chart.js

@@ -0,0 +1,11 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { toCustomElementProps as d } from "../utils.js";
+import "./chart-element.js";
+const C = h(function({ data: t, children: o, ...m }, e) {
+  return /* @__PURE__ */ r("mtds-chart", { ref: e, ...d(m), children: t ? /* @__PURE__ */ r("table", { children: t.map((i, n) => /* @__PURE__ */ r("tr", { children: i.map((p, c) => /* @__PURE__ */ r("td", { children: p }, `${c + 1}`)) }, `${n + 1}`)) }) : o });
+});
+export {
+  C as Chart
+};
+//# sourceMappingURL=chart.js.map

package/mtds/chart/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","sources":["../../designsystem/chart/chart.tsx"],"sourcesContent":["import type * as ReactTypes from \"react\";\nimport { forwardRef } from \"react\";\nimport { toCustomElementProps } from \"../utils\";\nimport \"./chart-element\";\n\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t\"mtds-chart\": ReactTypes.JSX.IntrinsicElements[\"div\"] & {\n\t\t\t\tclass?: string;\n\t\t\t};\n\t\t}\n\t}\n}\n\nexport type ChartProps = React.ComponentPropsWithoutRef<\"div\"> & {\n\tdata?: (number | string)[][];\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\t\t| `area-${number}`\n\t\t| `line-${number}`;\n};\n\nexport const Chart = forwardRef<HTMLDivElement, 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>\n\t\t\t\t\t{data.map((row, rowIndex) => (\n\t\t\t\t\t\t<tr key={`${rowIndex + 1}`}>\n\t\t\t\t\t\t\t{row.map((cell, cellIndex) => (\n\t\t\t\t\t\t\t\t<td key={`${cellIndex + 1}`}>{cell}</td>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t))}\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":["Chart","forwardRef","data","children","rest","ref","toCustomElementProps","jsx","row","rowIndex","cell","cellIndex"],"mappings":";;;;AA8BO,MAAMA,IAAQC,EAAuC,SAC3D,EAAE,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GACrBC,GACC;AACD,2BACE,cAAA,EAAW,KAAAA,GAAW,GAAGC,EAAqBF,CAAI,GACjD,UAAAF,IACA,gBAAAK,EAAC,SAAA,EACC,YAAK,IAAI,CAACC,GAAKC,MACf,gBAAAF,EAAC,QACC,UAAAC,EAAI,IAAI,CAACE,GAAMC,MACf,gBAAAJ,EAAC,MAAA,EAA6B,UAAAG,KAArB,GAAGC,IAAY,CAAC,EAAU,CACnC,KAHO,GAAGF,IAAW,CAAC,EAIxB,CACA,EAAA,CACF,IAEAN,GAEF;AAEF,CAAC;"}

package/mtds/field/field.js

@@ -8,6 +8,7 @@ import "../badge/badge.js";
 import "../breadcrumbs/breadcrumbs.js";
 import "../button/button.js";
 import "../card/card.js";
+import "../chart/chart.js";
 import "../chip/chip.js";
 import "../details/details.js";
 import "../dialog/dialog.js";
@@ -50,7 +51,7 @@ const P = (i) => typeof i == "string" ? { label: i, value: i } : i, V = m(functi
   validation: C,
   ...r
 }, v) {
-  const l = o || "div", E = !!h || !!b, W = C || F, O = {
+  const p = o || "div", E = !!h || !!b, W = C || F, O = {
     "data-size": e,
     className: k(g.field, a),
     style: D
@@ -58,7 +59,7 @@ const P = (i) => typeof i == "string" ? { label: i, value: i } : i, V = m(functi
   return o === "select" && !r.children && Object.assign(r, {
     options: void 0,
     // Ensure options is not passed to DOM
-    children: /* @__PURE__ */ t(I, { children: r.options?.map(P).map(({ label: x, value: p }) => /* @__PURE__ */ t("option", { value: p, children: x }, p)) })
+    children: /* @__PURE__ */ t(I, { children: r.options?.map(P).map(({ label: x, value: l }) => /* @__PURE__ */ t("option", { value: l, children: x }, l)) })
   }), o ? /* @__PURE__ */ j("div", { ...O, children: [
     !!f && /* @__PURE__ */ t("label", { suppressHydrationWarning: !0, children: f }),
     !!y && /* @__PURE__ */ t(Q, { "aria-label": H, children: y }),
@@ -66,7 +67,7 @@ const P = (i) => typeof i == "string" ? { label: i, value: i } : i, V = m(functi
     E ? /* @__PURE__ */ j(S, { children: [
       !!b && /* @__PURE__ */ t("span", { children: b }),
       /* @__PURE__ */ t(
-        l,
+        p,
         {
           className: g.input,
           suppressHydrationWarning: !0,
@@ -76,7 +77,7 @@ const P = (i) => typeof i == "string" ? { label: i, value: i } : i, V = m(functi
       ),
       !!h && /* @__PURE__ */ t("span", { children: h })
     ] }) : /* @__PURE__ */ t(
-      l,
+      p,
       {
         className: typeof o == "string" ? g.input : void 0,
         suppressHydrationWarning: !0,
@@ -123,25 +124,25 @@ const P = (i) => typeof i == "string" ? { label: i, value: i } : i, V = m(functi
     options: C,
     placeholder: r,
     readOnly: v,
-    selected: l,
+    selected: p,
     type: E,
     ...W
   }, O) {
-    const x = z(null), p = z(f);
-    return p.current = f, c && (u = c, console.warn(
+    const x = z(null), l = z(f);
+    return l.current = f, c && (u = c, console.warn(
       "Combobox onAfterChange is deprecated, use onAfterSelect instead."
     )), F && (H = F, console.warn(
       "Combobox onBeforeChange is deprecated, use onBeforeSelect instead."
     )), K(O, () => x.current), M(() => {
       const d = x.current, s = (n) => {
-        const L = p.current;
-        if (!p) return;
+        const L = l.current;
+        if (!l) return;
         n.preventDefault();
-        const { isConnected: B, textContent: G, value: w } = n.detail, A = G?.trim() || "", R = l || [];
+        const { isConnected: B, textContent: G, value: w } = n.detail, A = G?.trim() || "", R = p || [];
         L?.(B ? R.filter((J) => J.value !== w) : e ? [...R, { value: w, label: A }] : [{ value: w, label: A }]);
       };
       return d?.addEventListener("comboboxbeforeselect", s), () => d?.removeEventListener("comboboxbeforeselect", s);
-    }, [e, l]), /* @__PURE__ */ j(
+    }, [e, p]), /* @__PURE__ */ j(
       "u-combobox",
       {
         "data-multiple": e || void 0,
@@ -153,7 +154,7 @@ const P = (i) => typeof i == "string" ? { label: i, value: i } : i, V = m(functi
           ...W
         }),
         children: [
-          l?.map(({ children: d, label: s, value: n }) => /* @__PURE__ */ t("data", { value: n, suppressHydrationWarning: !0, children: d ?? s }, n)),
+          p?.map(({ children: d, label: s, value: n }) => /* @__PURE__ */ t("data", { value: n, suppressHydrationWarning: !0, children: d ?? s }, n)),
           b || /* @__PURE__ */ j(I, { children: [
             /* @__PURE__ */ t(
               U,
@@ -172,7 +173,7 @@ const P = (i) => typeof i == "string" ? { label: i, value: i } : i, V = m(functi
       }
     );
   }
-), At = Object.assign(V, {
+), Rt = Object.assign(V, {
   Affixes: S,
   Combobox: X,
   Datalist: T,
@@ -184,7 +185,7 @@ const P = (i) => typeof i == "string" ? { label: i, value: i } : i, V = m(functi
   )
 });
 export {
-  At as Field,
+  Rt as Field,
   V as FieldComp
 };
 //# sourceMappingURL=field.js.map

package/mtds/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["import type { Placement } from \"@floating-ui/dom\";\nimport type {\n\tReactUcombobox,\n\tUHTMLComboboxElement,\n} from \"@u-elements/u-combobox\";\nimport clsx from \"clsx\";\nimport type { JSX } from \"react\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport { HelpText, Input, type InputProps } from \"../react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\n\ntype FieldBaseProps = {\n\tcount?: number;\n\tdescription?: React.ReactNode;\n\terror?: React.ReactNode; // Kept for backwards compatibility\n\thelpText?: React.ReactNode;\n\thelpTextLabel?: string;\n\tlabel?: React.ReactNode;\n\toptions?: string[] | FieldComboboxSelected;\n\tprefix?: string;\n\treadOnly?: boolean; // Allow readoOnly also on <select>\n\tsuffix?: string;\n\tvalidation?: React.ReactNode;\n\tvalue?: React.ComponentPropsWithRef<\"input\">[\"value\"];\n\tonInput?: (\n\t\te: React.ChangeEvent<\n\t\t\tHTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n\t\t>,\n\t) => void;\n};\n\nexport type FieldProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, FieldBaseProps>;\n\ntype FieldComponent = <As extends React.ElementType = \"div\">(\n\tprops: FieldProps<As>,\n) => JSX.Element;\n\nconst toOption = (\n\to: FieldComboboxSelected[number] | string,\n): FieldComboboxSelected[number] =>\n\ttypeof o === \"string\" ? { label: o, value: o } : o;\n\nexport const FieldComp: FieldComponent = forwardRef<null>(function Field<\n\tAs extends React.ElementType = \"div\",\n>(\n\t{\n\t\t\"data-size\": size,\n\t\tas,\n\t\tclassName,\n\t\tcount,\n\t\tdescription,\n\t\terror,\n\t\thelpText,\n\t\thelpTextLabel,\n\t\tlabel,\n\t\tprefix,\n\t\tstyle,\n\t\tsuffix,\n\t\tvalidation,\n\t\t...rest\n\t}: FieldProps<As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || \"div\";\n\tconst affixes = !!suffix || !!prefix;\n\tconst valid = validation || error; // error kept for backwards compatibility\n\tconst shared = {\n\t\t\"data-size\": size,\n\t\tclassName: clsx(styles.field, className),\n\t\tstyle,\n\t};\n\n\t// Render options if select\n\tif (as === \"select\" && !rest.children)\n\t\tObject.assign(rest, {\n\t\t\toptions: undefined, // Ensure options is not passed to DOM\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t{(rest.options as FieldBaseProps[\"options\"])\n\t\t\t\t\t\t?.map(toOption)\n\t\t\t\t\t\t.map(({ label, value }) => (\n\t\t\t\t\t\t\t<option key={value} value={value}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t),\n\t\t});\n\n\t// Using suppressHydrationWarning to avoid Next.js vs field-observer.ts hydration conflict\n\treturn as ? (\n\t\t<div {...shared}>\n\t\t\t{!!label && <label suppressHydrationWarning>{label}</label>}\n\t\t\t{!!helpText && <HelpText aria-label={helpTextLabel}>{helpText}</HelpText>}\n\t\t\t{!!description && <p suppressHydrationWarning>{description}</p>}\n\t\t\t{affixes ? (\n\t\t\t\t<FieldAffixes>\n\t\t\t\t\t{!!prefix && <span>{prefix}</span>}\n\t\t\t\t\t<Tag\n\t\t\t\t\t\tclassName={styles.input}\n\t\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t{...rest}\n\t\t\t\t\t/>\n\t\t\t\t\t{!!suffix && <span>{suffix}</span>}\n\t\t\t\t</FieldAffixes>\n\t\t\t) : (\n\t\t\t\t<Tag\n\t\t\t\t\tclassName={typeof as === \"string\" ? styles.input : undefined}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{!!valid && (\n\t\t\t\t<div suppressHydrationWarning className={styles.validation}>\n\t\t\t\t\t{valid}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{!!count && <p suppressHydrationWarning data-count={count} />}\n\t\t</div>\n\t) : (\n\t\t<div ref={ref} {...shared} {...rest} />\n\t);\n}) as FieldComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type FieldAffixProps = React.ComponentPropsWithoutRef<\"div\">;\nconst FieldAffixes = forwardRef<HTMLDivElement, FieldAffixProps>(\n\tfunction FieldAffixes({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<div className={clsx(styles.affixes, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n\nexport type FieldDatalistProps = React.ComponentPropsWithoutRef<\"datalist\"> & {\n\t\"data-nofilter\"?: boolean;\n\t\"data-position\"?: Placement;\n};\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist({ \"data-nofilter\": filter, ...rest }, ref) {\n\t\treturn (\n\t\t\t<u-datalist\n\t\t\t\tdata-nofilter={!!filter || undefined} // Ensure data-nofilter is set correctly\n\t\t\t\tref={ref}\n\t\t\t\t{...toCustomElementProps(rest)}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nexport type FieldOptionProps = React.ComponentPropsWithoutRef<\"option\">;\nconst FieldOption = forwardRef<HTMLOptionElement, FieldOptionProps>(\n\tfunction FieldOption(props, ref) {\n\t\treturn <u-option ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldComboboxSelected = {\n\tlabel: string;\n\tvalue: string;\n\tchildren?: React.ReactNode;\n}[];\nexport type FieldComboboxProps = ReactUcombobox & {\n\t\"data-creatable\"?: boolean;\n\t\"data-multiple\"?: boolean;\n\tonAfterChange?: (e: CustomEvent<HTMLDataElement>) => void; // deprecated\n\tonAfterSelect?: (e: CustomEvent<HTMLDataElement>) => void; // Custom event to handle before change\n\tonBeforeChange?: (e: CustomEvent<HTMLDataElement>) => void; // deprecated\n\tonBeforeMatch?: (e: CustomEvent<HTMLOptionElement>) => void; // Custom event to handle before change\n\tonBeforeSelect?: (e: CustomEvent<HTMLDataElement>) => void; // Custom event to handle before change\n\tonSelectedChange?: (selected: FieldComboboxSelected) => void; // Allow onChange to be a function that returns void\n\toptions?: FieldComboboxSelected;\n\tselected?: FieldComboboxSelected; // Allow value to be a string or an array of strings for multiple select\n} & Pick<\n\t\tInputProps,\n\t\t\"disabled\" | \"readOnly\" | \"placeholder\" | \"type\" | \"name\"\n\t> & // Allow input props to be passed down\n\tPick<FieldDatalistProps, \"data-position\" | \"data-nofilter\">; // Allow datalist props to be passed down\n\nconst FieldCombobox = forwardRef<UHTMLComboboxElement, FieldComboboxProps>(\n\tfunction FieldCombobox(\n\t\t{\n\t\t\t\"data-multiple\": multiple,\n\t\t\t\"data-nofilter\": nofilter,\n\t\t\t\"data-position\": position,\n\t\t\tonAfterChange,\n\t\t\tonAfterSelect,\n\t\t\tonBeforeChange,\n\t\t\tonBeforeMatch,\n\t\t\tonBeforeSelect,\n\t\t\tonSelectedChange,\n\t\t\tchildren,\n\t\t\tdisabled,\n\t\t\tname,\n\t\t\toptions,\n\t\t\tplaceholder,\n\t\t\treadOnly,\n\t\t\tselected,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) {\n\t\tconst innerRef = useRef<UHTMLComboboxElement>(null);\n\t\tconst onSelected = useRef(onSelectedChange);\n\t\tonSelected.current = onSelectedChange; // Sync the latest onSelectedChange function\n\n\t\t// Deprecated props\n\t\tif (onAfterChange) {\n\t\t\tonAfterSelect = onAfterChange;\n\t\t\tconsole.warn(\n\t\t\t\t`Combobox onAfterChange is deprecated, use onAfterSelect instead.`,\n\t\t\t);\n\t\t}\n\t\tif (onBeforeChange) {\n\t\t\tonBeforeSelect = onBeforeChange;\n\t\t\tconsole.warn(\n\t\t\t\t`Combobox onBeforeChange is deprecated, use onBeforeSelect instead.`,\n\t\t\t);\n\t\t}\n\n\t\t// Using useEffect for React 18 and lower compatibility\n\t\tuseImperativeHandle(ref, () => innerRef.current as UHTMLComboboxElement); // Forward innerRef\n\t\tuseEffect(() => {\n\t\t\tconst self = innerRef.current;\n\t\t\tconst handleChange = (event: CustomEvent<HTMLDataElement>) => {\n\t\t\t\tconst handleSelected = onSelected.current;\n\t\t\t\tif (!onSelected) return; // No onSelectedChange function provided, let u-combobox handle it\n\t\t\t\tevent.preventDefault();\n\t\t\t\tconst { isConnected: remove, textContent, value } = event.detail;\n\t\t\t\tconst label = textContent?.trim() || \"\";\n\t\t\t\tconst prev = selected || [];\n\n\t\t\t\tif (remove) handleSelected?.(prev.filter((i) => i.value !== value));\n\t\t\t\telse if (multiple) handleSelected?.([...prev, { value, label }]);\n\t\t\t\telse handleSelected?.([{ value, label }]);\n\t\t\t};\n\n\t\t\tself?.addEventListener(\"comboboxbeforeselect\", handleChange);\n\t\t\treturn () =>\n\t\t\t\tself?.removeEventListener(\"comboboxbeforeselect\", handleChange);\n\t\t}, [multiple, selected]);\n\n\t\treturn (\n\t\t\t<u-combobox\n\t\t\t\tdata-multiple={multiple || undefined}\n\t\t\t\t{...toCustomElementProps({\n\t\t\t\t\toncomboboxbeforeselect: onBeforeSelect,\n\t\t\t\t\toncomboboxbeforematch: onBeforeMatch,\n\t\t\t\t\toncomboboxafterselect: onAfterSelect,\n\t\t\t\t\tref: innerRef,\n\t\t\t\t\t...props,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{selected?.map(({ children, label, value }) => (\n\t\t\t\t\t<data key={value} value={value} suppressHydrationWarning>\n\t\t\t\t\t\t{children ?? label}\n\t\t\t\t\t</data>\n\t\t\t\t))}\n\t\t\t\t{children || (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tname={name}\n\t\t\t\t\t\t\ttype={type}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<del {...toCustomElementProps({ \"aria-label\": \"Fjern tekst\" })} />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{!!options && (\n\t\t\t\t\t<FieldDatalist data-nofilter={nofilter} data-position={position}>\n\t\t\t\t\t\t{options.map(toOption).map(({ children, label, value }) => (\n\t\t\t\t\t\t\t<FieldOption key={value} value={value} label={label}>\n\t\t\t\t\t\t\t\t{children ?? label}\n\t\t\t\t\t\t\t</FieldOption>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</FieldDatalist>\n\t\t\t\t)}\n\t\t\t</u-combobox>\n\t\t);\n\t},\n);\n\nexport type FieldLabelProps = React.ComponentPropsWithoutRef<\"label\">;\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\tCombobox: FieldCombobox,\n\tDatalist: FieldDatalist,\n\tOption: FieldOption,\n\tLabel: forwardRef<HTMLLabelElement, FieldLabelProps>(\n\t\tfunction FieldLabel(rest, ref) {\n\t\t\treturn <label suppressHydrationWarning ref={ref} {...rest} />;\n\t\t},\n\t),\n});\n"],"names":["toOption","o","FieldComp","forwardRef","size","as","className","count","description","error","helpText","helpTextLabel","label","prefix","style","suffix","validation","rest","ref","Tag","affixes","valid","shared","clsx","styles","value","jsx","jsxs","HelpText","FieldAffixes","FieldDatalist","filter","toCustomElementProps","FieldOption","props","FieldCombobox","multiple","nofilter","position","onAfterChange","onAfterSelect","onBeforeChange","onBeforeMatch","onBeforeSelect","onSelectedChange","children","disabled","name","options","placeholder","readOnly","selected","type","innerRef","useRef","onSelected","useImperativeHandle","useEffect","self","handleChange","event","handleSelected","remove","textContent","prev","i","Fragment","Input","Field"],"mappings":"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"}
+{"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["import type { Placement } from \"@floating-ui/dom\";\nimport type {\n\tReactUcombobox,\n\tUHTMLComboboxElement,\n} from \"@u-elements/u-combobox\";\nimport clsx from \"clsx\";\nimport type { JSX } from \"react\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport { HelpText, Input, type InputProps } from \"../react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\n\ntype FieldBaseProps = {\n\tcount?: number;\n\tdescription?: React.ReactNode;\n\terror?: React.ReactNode; // Kept for backwards compatibility\n\thelpText?: React.ReactNode;\n\thelpTextLabel?: string;\n\tlabel?: React.ReactNode;\n\toptions?: string[] | FieldComboboxSelected;\n\tprefix?: string;\n\treadOnly?: boolean; // Allow readoOnly also on <select>\n\tsuffix?: string;\n\tvalidation?: React.ReactNode;\n\tvalue?: React.ComponentPropsWithRef<\"input\">[\"value\"];\n\tonInput?: (\n\t\te: React.ChangeEvent<\n\t\t\tHTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n\t\t>,\n\t) => void;\n};\n\nexport type FieldProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, FieldBaseProps>;\n\ntype FieldComponent = <As extends React.ElementType = \"div\">(\n\tprops: FieldProps<As>,\n) => JSX.Element;\n\nconst toOption = (\n\to: FieldComboboxSelected[number] | string,\n): FieldComboboxSelected[number] =>\n\ttypeof o === \"string\" ? { label: o, value: o } : o;\n\nexport const FieldComp: FieldComponent = forwardRef<null>(function Field<\n\tAs extends React.ElementType = \"div\",\n>(\n\t{\n\t\t\"data-size\": size,\n\t\tas,\n\t\tclassName,\n\t\tcount,\n\t\tdescription,\n\t\terror,\n\t\thelpText,\n\t\thelpTextLabel,\n\t\tlabel,\n\t\tprefix,\n\t\tstyle,\n\t\tsuffix,\n\t\tvalidation,\n\t\t...rest\n\t}: FieldProps<As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || \"div\";\n\tconst affixes = !!suffix || !!prefix;\n\tconst valid = validation || error; // error kept for backwards compatibility\n\tconst shared = {\n\t\t\"data-size\": size,\n\t\tclassName: clsx(styles.field, className),\n\t\tstyle,\n\t};\n\n\t// Render options if select\n\tif (as === \"select\" && !rest.children)\n\t\tObject.assign(rest, {\n\t\t\toptions: undefined, // Ensure options is not passed to DOM\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t{(rest.options as FieldBaseProps[\"options\"])\n\t\t\t\t\t\t?.map(toOption)\n\t\t\t\t\t\t.map(({ label, value }) => (\n\t\t\t\t\t\t\t<option key={value} value={value}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t),\n\t\t});\n\n\t// Using suppressHydrationWarning to avoid Next.js vs field-observer.ts hydration conflict\n\treturn as ? (\n\t\t<div {...shared}>\n\t\t\t{!!label && <label suppressHydrationWarning>{label}</label>}\n\t\t\t{!!helpText && <HelpText aria-label={helpTextLabel}>{helpText}</HelpText>}\n\t\t\t{!!description && <p suppressHydrationWarning>{description}</p>}\n\t\t\t{affixes ? (\n\t\t\t\t<FieldAffixes>\n\t\t\t\t\t{!!prefix && <span>{prefix}</span>}\n\t\t\t\t\t<Tag\n\t\t\t\t\t\tclassName={styles.input}\n\t\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t{...rest}\n\t\t\t\t\t/>\n\t\t\t\t\t{!!suffix && <span>{suffix}</span>}\n\t\t\t\t</FieldAffixes>\n\t\t\t) : (\n\t\t\t\t<Tag\n\t\t\t\t\tclassName={typeof as === \"string\" ? styles.input : undefined}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{!!valid && (\n\t\t\t\t<div suppressHydrationWarning className={styles.validation}>\n\t\t\t\t\t{valid}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{!!count && <p suppressHydrationWarning data-count={count} />}\n\t\t</div>\n\t) : (\n\t\t<div ref={ref} {...shared} {...rest} />\n\t);\n}) as FieldComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type FieldAffixProps = React.ComponentPropsWithoutRef<\"div\">;\nconst FieldAffixes = forwardRef<HTMLDivElement, FieldAffixProps>(\n\tfunction FieldAffixes({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<div className={clsx(styles.affixes, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n\nexport type FieldDatalistProps = React.ComponentPropsWithoutRef<\"datalist\"> & {\n\t\"data-nofilter\"?: boolean;\n\t\"data-position\"?: Placement;\n};\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist({ \"data-nofilter\": filter, ...rest }, ref) {\n\t\treturn (\n\t\t\t<u-datalist\n\t\t\t\tdata-nofilter={!!filter || undefined} // Ensure data-nofilter is set correctly\n\t\t\t\tref={ref}\n\t\t\t\t{...toCustomElementProps(rest)}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nexport type FieldOptionProps = React.ComponentPropsWithoutRef<\"option\">;\nconst FieldOption = forwardRef<HTMLOptionElement, FieldOptionProps>(\n\tfunction FieldOption(props, ref) {\n\t\treturn <u-option ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldComboboxSelected = {\n\tlabel: string;\n\tvalue: string;\n\tchildren?: React.ReactNode;\n}[];\nexport type FieldComboboxProps = ReactUcombobox & {\n\t\"data-creatable\"?: boolean;\n\t\"data-multiple\"?: boolean;\n\tonAfterChange?: (e: CustomEvent<HTMLDataElement>) => void; // deprecated\n\tonAfterSelect?: (e: CustomEvent<HTMLDataElement>) => void; // Custom event to handle before change\n\tonBeforeChange?: (e: CustomEvent<HTMLDataElement>) => void; // deprecated\n\tonBeforeMatch?: (e: CustomEvent<HTMLOptionElement>) => void; // Custom event to handle before change\n\tonBeforeSelect?: (e: CustomEvent<HTMLDataElement>) => void; // Custom event to handle before change\n\tonSelectedChange?: (selected: FieldComboboxSelected) => void; // Allow onChange to be a function that returns void\n\toptions?: FieldComboboxSelected;\n\tselected?: FieldComboboxSelected; // Allow value to be a string or an array of strings for multiple select\n} & Pick<\n\t\tInputProps,\n\t\t\"disabled\" | \"readOnly\" | \"placeholder\" | \"type\" | \"name\"\n\t> & // Allow input props to be passed down\n\tPick<FieldDatalistProps, \"data-position\" | \"data-nofilter\">; // Allow datalist props to be passed down\n\nconst FieldCombobox = forwardRef<UHTMLComboboxElement, FieldComboboxProps>(\n\tfunction FieldCombobox(\n\t\t{\n\t\t\t\"data-multiple\": multiple,\n\t\t\t\"data-nofilter\": nofilter,\n\t\t\t\"data-position\": position,\n\t\t\tonAfterChange,\n\t\t\tonAfterSelect,\n\t\t\tonBeforeChange,\n\t\t\tonBeforeMatch,\n\t\t\tonBeforeSelect,\n\t\t\tonSelectedChange,\n\t\t\tchildren,\n\t\t\tdisabled,\n\t\t\tname,\n\t\t\toptions,\n\t\t\tplaceholder,\n\t\t\treadOnly,\n\t\t\tselected,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) {\n\t\tconst innerRef = useRef<UHTMLComboboxElement>(null);\n\t\tconst onSelected = useRef(onSelectedChange);\n\t\tonSelected.current = onSelectedChange; // Sync the latest onSelectedChange function\n\n\t\t// Deprecated props\n\t\tif (onAfterChange) {\n\t\t\tonAfterSelect = onAfterChange;\n\t\t\tconsole.warn(\n\t\t\t\t`Combobox onAfterChange is deprecated, use onAfterSelect instead.`,\n\t\t\t);\n\t\t}\n\t\tif (onBeforeChange) {\n\t\t\tonBeforeSelect = onBeforeChange;\n\t\t\tconsole.warn(\n\t\t\t\t`Combobox onBeforeChange is deprecated, use onBeforeSelect instead.`,\n\t\t\t);\n\t\t}\n\n\t\t// Using useEffect for React 18 and lower compatibility\n\t\tuseImperativeHandle(ref, () => innerRef.current as UHTMLComboboxElement); // Forward innerRef\n\t\tuseEffect(() => {\n\t\t\tconst self = innerRef.current;\n\t\t\tconst handleChange = (event: CustomEvent<HTMLDataElement>) => {\n\t\t\t\tconst handleSelected = onSelected.current;\n\t\t\t\tif (!onSelected) return; // No onSelectedChange function provided, let u-combobox handle it\n\t\t\t\tevent.preventDefault();\n\t\t\t\tconst { isConnected: remove, textContent, value } = event.detail;\n\t\t\t\tconst label = textContent?.trim() || \"\";\n\t\t\t\tconst prev = selected || [];\n\n\t\t\t\tif (remove) handleSelected?.(prev.filter((i) => i.value !== value));\n\t\t\t\telse if (multiple) handleSelected?.([...prev, { value, label }]);\n\t\t\t\telse handleSelected?.([{ value, label }]);\n\t\t\t};\n\n\t\t\tself?.addEventListener(\"comboboxbeforeselect\", handleChange);\n\t\t\treturn () =>\n\t\t\t\tself?.removeEventListener(\"comboboxbeforeselect\", handleChange);\n\t\t}, [multiple, selected]);\n\n\t\treturn (\n\t\t\t<u-combobox\n\t\t\t\tdata-multiple={multiple || undefined}\n\t\t\t\t{...toCustomElementProps({\n\t\t\t\t\toncomboboxbeforeselect: onBeforeSelect,\n\t\t\t\t\toncomboboxbeforematch: onBeforeMatch,\n\t\t\t\t\toncomboboxafterselect: onAfterSelect,\n\t\t\t\t\tref: innerRef,\n\t\t\t\t\t...props,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{selected?.map(({ children, label, value }) => (\n\t\t\t\t\t<data key={value} value={value} suppressHydrationWarning>\n\t\t\t\t\t\t{children ?? label}\n\t\t\t\t\t</data>\n\t\t\t\t))}\n\t\t\t\t{children || (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tname={name}\n\t\t\t\t\t\t\ttype={type}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<del {...toCustomElementProps({ \"aria-label\": \"Fjern tekst\" })} />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{!!options && (\n\t\t\t\t\t<FieldDatalist data-nofilter={nofilter} data-position={position}>\n\t\t\t\t\t\t{options.map(toOption).map(({ children, label, value }) => (\n\t\t\t\t\t\t\t<FieldOption key={value} value={value} label={label}>\n\t\t\t\t\t\t\t\t{children ?? label}\n\t\t\t\t\t\t\t</FieldOption>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</FieldDatalist>\n\t\t\t\t)}\n\t\t\t</u-combobox>\n\t\t);\n\t},\n);\n\nexport type FieldLabelProps = React.ComponentPropsWithoutRef<\"label\">;\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\tCombobox: FieldCombobox,\n\tDatalist: FieldDatalist,\n\tOption: FieldOption,\n\tLabel: forwardRef<HTMLLabelElement, FieldLabelProps>(\n\t\tfunction FieldLabel(rest, ref) {\n\t\t\treturn <label suppressHydrationWarning ref={ref} {...rest} />;\n\t\t},\n\t),\n});\n"],"names":["toOption","o","FieldComp","forwardRef","size","as","className","count","description","error","helpText","helpTextLabel","label","prefix","style","suffix","validation","rest","ref","Tag","affixes","valid","shared","clsx","styles","value","jsx","jsxs","HelpText","FieldAffixes","FieldDatalist","filter","toCustomElementProps","FieldOption","props","FieldCombobox","multiple","nofilter","position","onAfterChange","onAfterSelect","onBeforeChange","onBeforeMatch","onBeforeSelect","onSelectedChange","children","disabled","name","options","placeholder","readOnly","selected","type","innerRef","useRef","onSelected","useImperativeHandle","useEffect","self","handleChange","event","handleSelected","remove","textContent","prev","i","Fragment","Input","Field"],"mappings":"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"}