@mattilsynet/design 2.2.21 → 2.2.22

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

@@ -1,8 +1,7 @@
 import { MTDSElement } from '../utils';
 export type ChartData = ReturnType<typeof toData>;
 export declare class MTDSChartElement extends MTDSElement {
-    _observer?: MutationObserver;
-    _resize?: ResizeObserver;
+    #private;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;

package/mtds/chart/chart-element.js

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

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

package/mtds/chart/chart.css.js

@@ -1,4 +1,5 @@
-const t = `:host(:not([hidden])) {
+const t = `/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */
+:host(:not([hidden])) {
 	display: grid;
 	gap: var(--mtds-6);
 }

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\\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\\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\\tborder-bottom-left-radius: var(--mtdsc-chart-axis-edge-radius);\\n\\tborder-color: var(--mtdsc-chart-axis-edge-color);\\n\\tborder-style: solid;\\n\\tborder-width: 0 0 var(--mtdsc-chart-axis-edge-width)\\n\\t\\tvar(--mtdsc-chart-axis-edge-width);\\n\\tcontent: \\\"\\\";\\n\\tgrid-area: chart;\\n\\tpointer-events: none;\\n\\tz-index: 2;\\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.axisGroups {\\n\\t--gap: max(\\n\\t\\t1px,\\n\\t\\tclamp(\\n\\t\\t\\t.5%,\\n\\t\\t\\tcalc(10% / var(--bars) * var(--groups)),\\n\\t\\t\\tvar(--mtdsc-chart-axis-gap)\\n\\t\\t)\\n\\t);\\n\\tgap: var(--mtdsc-chart-axis-gap) var(--gap);\\n\\tgrid-area: chart / chart / x-axis / chart;\\n\\tgrid-auto-columns: 1fr;\\n\\tgrid-template-rows: subgrid;\\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\\tdirection: ltr; /* Prevent inherited rtl */\\n\\tmin-width: 0; /* Allow word-wrapping */\\n}\\n:host(:not([data-variant|=\\\"bar\\\"])) {\\n\\t.axisGroup::after {\\n\\t\\tjustify-self: center;\\n\\t\\ttext-align: start;\\n\\t\\twriting-mode: vertical-rl;\\n\\t\\t/* If wanting 45deg text: */\\n\\t\\t/* justify-self: center;\\n\\t\\trotate: 45deg;\\n\\t\\ttext-align: end;\\n\\t\\twriting-mode: sideways-lr;\\n\\t\\ttransform-origin: 50% 0; */\\n\\t}\\n}\\n.axisSteps {\\n\\talign-items: end;\\n\\taspect-ratio: var(--mtdsc-chart-aspect);\\n\\tgrid-area: chart / y-axis / chart / chart;\\n\\tgrid-auto-rows: 1fr;\\n\\tgrid-template: 1px / subgrid;\\n}\\n.axisStep {\\n\\talign-items: start;\\n\\tgrid-column: inherit;\\n\\tgrid-template-columns: inherit;\\n\\theight: 1px;\\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/* Reduce amount of steps if small space */\\n:host(:not([data-variant|=\\\"bar\\\"]))\\n\\t.axisStepsYHalf\\n\\t.axisStep:nth-last-child(even) {\\n\\tdisplay: none;\\n}\\n:host(:not([data-variant|=\\\"bar\\\"]))\\n\\t.axisStepsYHalf\\n\\t.axisSteps:has(.axisStep:nth-last-child(even):first-child) {\\n\\tgrid-template-rows: 0.5fr;\\n}\\n\\n:host([data-variant|=\\\"bar\\\"]) .axisStepsXHalf .axisStep:nth-last-child(even) {\\n\\tdisplay: none;\\n}\\n:host([data-variant|=\\\"bar\\\"])\\n\\t.axisStepsXHalf\\n\\t.axisSteps:has(.axisStep:nth-last-child(even):first-child) {\\n\\tgrid-template-columns: 0.5fr;\\n}\\n\\n:host([data-variant|=\\\"bar\\\"]) .axisSteps,\\n:host([data-variant|=\\\"bar\\\"]) .axisGroup {\\n\\tdirection: rtl; /* Reverse orders */\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisSteps > *,\\n:host([data-variant|=\\\"bar\\\"]) .axisGroup > * {\\n\\tdirection: ltr;\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisGroups {\\n\\taspect-ratio: var(--mtdsc-chart-aspect);\\n\\tgap: 1% var(--mtdsc-chart-axis-gap);\\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|=\\\"bar\\\"]) .axisGroup::after {\\n\\talign-self: center; /* Since text-align does not work vertically */\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisGroup {\\n\\tgrid-column: inherit;\\n\\tgrid-row: auto;\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisSteps {\\n\\talign-items: stretch;\\n\\taspect-ratio: auto;\\n\\tgrid-area: chart / chart / x-axis / chart;\\n\\tgrid-auto-columns: 1fr;\\n\\tgrid-template: subgrid / 1px;\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisStep {\\n\\talign-items: stretch;\\n\\tgrid-row: inherit;\\n\\tgrid-column: auto;\\n\\tgrid-template-rows: inherit;\\n\\tgrid-template-columns: none;\\n\\ttext-align: center;\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisStep::after {\\n\\torder: -1;\\n\\tborder-left: var(--mtdsc-chart-axis-border);\\n\\tborder-bottom: 0;\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisStep::before {\\n\\ttranslate: -50% 0;\\n}\\n\\n.axisGroupContent {\\n\\tdisplay: flex;\\n}\\n:host([data-variant=\\\"column-stacked\\\"]) .axisGroupContent {\\n\\tflex-direction: column-reverse;\\n}\\n:host([data-variant=\\\"bar\\\"]) .axisGroupContent {\\n\\tflex-direction: column;\\n}\\n:host([data-variant=\\\"bar-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|=\\\"bar\\\"]) .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=\\\"column\\\"]) .bar + .bar {\\n\\tmargin-left: -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-bottom: none;\\n}\\n:host([data-variant=\\\"bar\\\"]) .bar + .bar {\\n\\tmargin-top: -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-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: 1.5;\\n\\tvector-effect: non-scaling-stroke;\\n}\\n\\n.lineShade {\\n\\tstroke: none;\\n\\tfill: var(--color);\\n\\topacity: 0.3;\\n\\tmask: linear-gradient(to bottom, black, transparent);\\n}\\n\\n/* Ensure more contrast for line colors */\\n.line,\\n.linePoint,\\n:host:has(.linePoint) .legend::before {\\n\\tfilter: var(--_mtdsc-chart-line-filter);\\n}\\n\\n.linePoint {\\n\\t--size: var(--ds-size-2);\\n\\tbackground: 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-3) * -1); /* Increase click surface */\\n\\tposition: absolute;\\n}\\n\\n:host([data-dots=\\\"false\\\"]) .linePoint,\\n:host([data-dots=\\\"hidden\\\"]) .linePoint,\\n:host([data-dots=\\\"none\\\"]) .linePoint {\\n\\tbackground: none;\\n\\tborder: none;\\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\\n:host([data-legend=\\\"false\\\"]) .legends,\\n:host([data-legend=\\\"hidden\\\"]) .legends,\\n:host([data-legend=\\\"none\\\"]) .legends {\\n\\tdisplay: none;\\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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 \"/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */\\n:host(:not([hidden])) {\\n\\tdisplay: grid;\\n\\tgap: var(--mtds-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(--mtds-body-sm-font-size);\\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\\tborder-bottom-left-radius: var(--mtdsc-chart-axis-edge-radius);\\n\\tborder-color: var(--mtdsc-chart-axis-edge-color);\\n\\tborder-style: solid;\\n\\tborder-width: 0 0 var(--mtdsc-chart-axis-edge-width)\\n\\t\\tvar(--mtdsc-chart-axis-edge-width);\\n\\tcontent: \\\"\\\";\\n\\tgrid-area: chart;\\n\\tpointer-events: none;\\n\\tz-index: 2;\\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.axisGroups {\\n\\t--gap: max(\\n\\t\\t1px,\\n\\t\\tclamp(\\n\\t\\t\\t.5%,\\n\\t\\t\\tcalc(10% / var(--bars) * var(--groups)),\\n\\t\\t\\tvar(--mtdsc-chart-axis-gap)\\n\\t\\t)\\n\\t);\\n\\tgap: var(--mtdsc-chart-axis-gap) var(--gap);\\n\\tgrid-area: chart / chart / x-axis / chart;\\n\\tgrid-auto-columns: 1fr;\\n\\tgrid-template-rows: subgrid;\\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\\tdirection: ltr; /* Prevent inherited rtl */\\n\\tmin-width: 0; /* Allow word-wrapping */\\n}\\n:host(:not([data-variant|=\\\"bar\\\"])) {\\n\\t.axisGroup::after {\\n\\t\\tjustify-self: center;\\n\\t\\ttext-align: start;\\n\\t\\twriting-mode: vertical-rl;\\n\\t\\t/* If wanting 45deg text: */\\n\\t\\t/* justify-self: center;\\n\\t\\trotate: 45deg;\\n\\t\\ttext-align: end;\\n\\t\\twriting-mode: sideways-lr;\\n\\t\\ttransform-origin: 50% 0; */\\n\\t}\\n}\\n.axisSteps {\\n\\talign-items: end;\\n\\taspect-ratio: var(--mtdsc-chart-aspect);\\n\\tgrid-area: chart / y-axis / chart / chart;\\n\\tgrid-auto-rows: 1fr;\\n\\tgrid-template: 1px / subgrid;\\n}\\n.axisStep {\\n\\talign-items: start;\\n\\tgrid-column: inherit;\\n\\tgrid-template-columns: inherit;\\n\\theight: 1px;\\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/* Reduce amount of steps if small space */\\n:host(:not([data-variant|=\\\"bar\\\"]))\\n\\t.axisStepsYHalf\\n\\t.axisStep:nth-last-child(even) {\\n\\tdisplay: none;\\n}\\n:host(:not([data-variant|=\\\"bar\\\"]))\\n\\t.axisStepsYHalf\\n\\t.axisSteps:has(.axisStep:nth-last-child(even):first-child) {\\n\\tgrid-template-rows: 0.5fr;\\n}\\n\\n:host([data-variant|=\\\"bar\\\"]) .axisStepsXHalf .axisStep:nth-last-child(even) {\\n\\tdisplay: none;\\n}\\n:host([data-variant|=\\\"bar\\\"])\\n\\t.axisStepsXHalf\\n\\t.axisSteps:has(.axisStep:nth-last-child(even):first-child) {\\n\\tgrid-template-columns: 0.5fr;\\n}\\n\\n:host([data-variant|=\\\"bar\\\"]) .axisSteps,\\n:host([data-variant|=\\\"bar\\\"]) .axisGroup {\\n\\tdirection: rtl; /* Reverse orders */\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisSteps > *,\\n:host([data-variant|=\\\"bar\\\"]) .axisGroup > * {\\n\\tdirection: ltr;\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisGroups {\\n\\taspect-ratio: var(--mtdsc-chart-aspect);\\n\\tgap: 1% var(--mtdsc-chart-axis-gap);\\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|=\\\"bar\\\"]) .axisGroup::after {\\n\\talign-self: center; /* Since text-align does not work vertically */\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisGroup {\\n\\tgrid-column: inherit;\\n\\tgrid-row: auto;\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisSteps {\\n\\talign-items: stretch;\\n\\taspect-ratio: auto;\\n\\tgrid-area: chart / chart / x-axis / chart;\\n\\tgrid-auto-columns: 1fr;\\n\\tgrid-template: subgrid / 1px;\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisStep {\\n\\talign-items: stretch;\\n\\tgrid-row: inherit;\\n\\tgrid-column: auto;\\n\\tgrid-template-rows: inherit;\\n\\tgrid-template-columns: none;\\n\\ttext-align: center;\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisStep::after {\\n\\torder: -1;\\n\\tborder-left: var(--mtdsc-chart-axis-border);\\n\\tborder-bottom: 0;\\n}\\n:host([data-variant|=\\\"bar\\\"]) .axisStep::before {\\n\\ttranslate: -50% 0;\\n}\\n\\n.axisGroupContent {\\n\\tdisplay: flex;\\n}\\n:host([data-variant=\\\"column-stacked\\\"]) .axisGroupContent {\\n\\tflex-direction: column-reverse;\\n}\\n:host([data-variant=\\\"bar\\\"]) .axisGroupContent {\\n\\tflex-direction: column;\\n}\\n:host([data-variant=\\\"bar-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(--mtds-border-radius-sm) var(--mtds-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(--mtds-border-width-focus);\\n\\tz-index: 2; /* z-index to place on top when outlined */\\n}\\n\\n:host([data-variant|=\\\"bar\\\"]) .bar {\\n\\tborder-radius: 0 var(--mtds-border-radius-sm) var(--mtds-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=\\\"column\\\"]) .bar + .bar {\\n\\tmargin-left: -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-bottom: none;\\n}\\n:host([data-variant=\\\"bar\\\"]) .bar + .bar {\\n\\tmargin-top: -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-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: 1.5;\\n\\tvector-effect: non-scaling-stroke;\\n}\\n\\n.lineShade {\\n\\tstroke: none;\\n\\tfill: var(--color);\\n\\topacity: 0.3;\\n\\tmask: linear-gradient(to bottom, black, transparent);\\n}\\n\\n/* Ensure more contrast for line colors */\\n.line,\\n.linePoint,\\n:host:has(.linePoint) .legend::before {\\n\\tfilter: var(--_mtdsc-chart-line-filter);\\n}\\n\\n.linePoint {\\n\\t--size: var(--mtds-2);\\n\\tbackground: var(--color);\\n\\tborder-radius: var(--mtds-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(--mtds-3) * -1); /* Increase click surface */\\n\\tposition: absolute;\\n}\\n\\n:host([data-dots=\\\"false\\\"]) .linePoint,\\n:host([data-dots=\\\"hidden\\\"]) .linePoint,\\n:host([data-dots=\\\"none\\\"]) .linePoint {\\n\\tbackground: none;\\n\\tborder: none;\\n}\\n\\n.legends {\\n\\talign-items: center;\\n\\tdisplay: flex;\\n\\tflex-wrap: wrap;\\n\\tgap: var(--mtds-2) var(--mtds-5);\\n\\tjustify-content: center;\\n}\\n.legend {\\n\\tdisplay: flex;\\n\\talign-items: center;\\n\\tgap: var(--mtds-2);\\n}\\n.legend::before {\\n\\tbackground: var(--color);\\n\\tborder-radius: var(--mtds-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(--mtds-5);\\n\\tvertical-align: middle;\\n\\twidth: var(--mtds-5);\\n}\\n\\n:host([data-legend=\\\"false\\\"]) .legends,\\n:host([data-legend=\\\"hidden\\\"]) .legends,\\n:host([data-legend=\\\"none\\\"]) .legends {\\n\\tdisplay: none;\\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/field/field-observer.js

@@ -1,81 +1,83 @@
 import { UHTMLComboboxElement as E } from "@u-elements/u-combobox";
-import { UHTMLDataListElement as T } from "@u-elements/u-datalist";
+import { UHTMLDataListElement as C } from "@u-elements/u-datalist";
 import g from "../styles.module.css.js";
-import { IS_BROWSER as C, onLoaded as M, onMutation as A, on as m, QUICK_EVENT as p, isInputLike as h, attr as i, useId as u, anchorPosition as b } from "../utils.js";
-const v = g.field.split(" ")[0], x = g.validation.split(" "), H = x[0], $ = C ? document.getElementsByClassName(v) : [], l = (t, e) => t.getPropertyValue(`--mtds-text-${e}`)?.slice(1, -1) || "";
-function y(t) {
+import { IS_BROWSER as T, onLoaded as M, onMutation as A, on as u, QUICK_EVENT as p, isInputLike as h, attr as n, useId as m, anchorPosition as b } from "../utils.js";
+const v = g.field.split(" ")[0], y = g.validation.split(" "), H = y[0], $ = T ? document.getElementsByClassName(v) : [];
+function x(t) {
   let e = null;
   for (const a of $)
     if (a.isConnected) {
-      const n = [], s = [], f = [];
-      let c = null, r = null, d = !0;
+      const i = [], s = [], f = [];
+      let d = null, r = null, c = !0;
       for (const o of a.getElementsByTagName("*"))
-        o instanceof HTMLLabelElement ? n.push(o) : o instanceof E ? c = o : h(o) && !o.hidden ? r = o : o.hasAttribute("data-description") ? s.push(o) : o.classList.contains(H) ? (d = i(o, "data-color") === "success" || !o.clientHeight, f.push(o), s.unshift(o)) : o instanceof HTMLParagraphElement && (s.some((I) => I.contains(o)) || s.push(o));
+        o instanceof HTMLLabelElement ? i.push(o) : o instanceof E ? d = o : h(o) && !o.hidden ? r = o : o.hasAttribute("data-description") ? s.push(o) : o.classList.contains(H) ? (c = n(o, "data-color") === "success" || !o.clientHeight, f.push(o), s.unshift(o)) : o instanceof HTMLParagraphElement && (s.some((S) => S.contains(o)) || s.push(o));
       if (r) {
-        for (const o of n) o.htmlFor = u(r);
-        if (t && i(a, "data-validation") === "form") {
-          d = r.matches(":valid"), !e && !d && (e = r);
-          for (const o of f)
-            i(o, "hidden", d ? "" : null);
+        for (const o of i) o.htmlFor = m(r);
+        if ((t || d?.control?.validity.customError) && // Live re-evaluate combobox if invalid to correct validity before form sumbit
+        n(a, "data-validation") === "form") {
+          c = d?.hasAttribute("data-required") ? !!d?.items.length : r.validity.valid, !e && !c && (e = r);
+          for (const o of f) n(o, "hidden", c ? "" : null);
+          d?.control?.setCustomValidity(c ? "" : "Invalid");
         }
-        F(c), S(r), L(r), i(r, "aria-describedby", s.map(u).join(" ")), i(r, "aria-invalid", `${!d}`);
+        D(d), L(r), I(r), n(r, "aria-describedby", s.map(m).join(" ")), n(r, "aria-invalid", `${!c}`);
       }
     }
-  e?.focus();
+  return e?.focus(), e;
 }
-function L(t) {
+function I(t) {
   t instanceof HTMLTextAreaElement && (t.style.setProperty("--mtds-textarea-height", "auto"), t.style.setProperty(
     "--mtds-textarea-height",
     `${t.scrollHeight}px`
   ));
 }
-function F(t) {
+const l = (t, e) => t.getPropertyValue(`--mtds-text-${e}`)?.slice(1, -1) || "";
+function D(t) {
   const { control: e, list: a } = t || {};
   if (t && a && !t.hasAttribute("data-sr-added")) {
-    const n = window.getComputedStyle(t);
-    i(t, "data-sr-added", l(n, "combobox-added")), i(t, "data-sr-empty", l(n, "combobox-empty")), i(t, "data-sr-found", l(n, "combobox-found")), i(t, "data-sr-invalid", l(n, "combobox-invalid")), i(t, "data-sr-of", l(n, "combobox-of")), i(t, "data-sr-remove", l(n, "combobox-remove")), i(t, "data-sr-removed", l(n, "combobox-removed")), i(a, "data-sr-plural", l(n, "datalist-plural")), i(a, "data-sr-singular", l(n, "datalist-singular"));
+    const i = window.getComputedStyle(t);
+    n(t, "data-sr-added", l(i, "combobox-added")), n(t, "data-sr-empty", l(i, "combobox-empty")), n(t, "data-sr-found", l(i, "combobox-found")), n(t, "data-sr-invalid", l(i, "combobox-invalid")), n(t, "data-sr-of", l(i, "combobox-of")), n(t, "data-sr-remove", l(i, "combobox-remove")), n(t, "data-sr-removed", l(i, "combobox-removed")), n(a, "data-sr-plural", l(i, "datalist-plural")), n(a, "data-sr-singular", l(i, "datalist-singular"));
   }
-  a && e && !a.hasAttribute("popover") && (i(a, "popover", "manual"), i(e, "popovertarget", u(a)));
+  a && e && !a.hasAttribute("popover") && (n(a, "popover", "manual"), n(e, "popovertarget", m(a)));
 }
-function S(t) {
-  const e = t?.nextElementSibling, a = e && i(e, "data-count");
+function L(t) {
+  const e = t?.nextElementSibling, a = e && n(e, "data-count");
   if (e && a) {
-    const n = Number(a) - t.value.length, s = n < 0, f = i(e, "aria-live") === "polite", c = window.getComputedStyle(e || t), r = l(c, "count-over"), d = l(c, "count-under");
+    const i = Number(a) - t.value.length, s = i < 0, f = n(e, "aria-live") === "polite", d = window.getComputedStyle(e || t), r = l(d, "count-over"), c = l(d, "count-under");
     if (f !== s) {
-      i(e, "aria-live", s ? "polite" : "off");
-      for (const o of x) e.classList.toggle(o, s);
+      n(e, "aria-live", s ? "polite" : "off");
+      for (const o of y) e.classList.toggle(o, s);
     }
-    e.textContent = (s ? r : d).replace(
+    e.textContent = (s ? r : c).replace(
       "%d",
-      `${Math.abs(n)}`
+      `${Math.abs(i)}`
     );
   }
 }
-function N({ target: t, newState: e }) {
-  if (t instanceof T) {
-    const n = t.getRootNode()?.querySelector(
+function F({ target: t, newState: e }) {
+  if (t instanceof C) {
+    const i = t.getRootNode()?.querySelector(
       `[popovertarget="${t.id}"]`
     );
-    e === "closed" ? b(t, !1) : n && b(t, n, {
+    e === "closed" ? b(t, !1) : i && b(t, i, {
       contain({ availableHeight: s }) {
-        t.style.width = `${n.clientWidth}px`, t.style.maxHeight = `${Math.max(50, s)}px`;
+        t.style.width = `${i.clientWidth}px`, t.style.maxHeight = `${Math.max(50, s)}px`;
       }
     });
   }
 }
-function D(t) {
-  h(t.target) && (S(t.target), L(t.target));
+function N(t) {
+  h(t.target) && (L(t.target), I(t.target));
 }
-function w(t) {
+function V(t) {
   const e = t.target?.closest?.(`.${v}`);
-  t.type === "invalid" && e && t.preventDefault(), y(!0);
+  t.type === "invalid" && e && t.preventDefault(), x(!0) && t.preventDefault();
 }
 M(() => [
-  A(() => y()),
-  m(document, "input", D, p),
-  m(document, "toggle", N, p),
+  A(() => x(), "class"),
+  u(document, "input", N, p),
+  u(document, "toggle", F, p),
   // Use capture since toggle does not bubble
-  m(document, "invalid,submit", w, !0)
+  u(document, "invalid,submit", V, !0)
   // Use capture as invalid and submit does not bubble
 ]);
 //# sourceMappingURL=field-observer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"field-observer.js","sources":["../../designsystem/field/field-observer.ts"],"sourcesContent":["import { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { UHTMLDataListElement } from \"@u-elements/u-datalist\";\nimport styles from \"../styles.module.css\";\nimport {\n\tanchorPosition,\n\tattr,\n\tIS_BROWSER,\n\tisInputLike,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tQUICK_EVENT,\n\tuseId,\n} from \"../utils\";\n\nconst CSS_FIELD = styles.field.split(\" \")[0];\nconst CSS_VALIDATIONS = styles.validation.split(\" \");\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\nconst FIELDS = IS_BROWSER ? document.getElementsByClassName(CSS_FIELD) : [];\n\nconst getText = (style: CSSStyleDeclaration, key: string) =>\n\tstyle.getPropertyValue(`--mtds-text-${key}`)?.slice(1, -1) || \"\"; // slice to trim quotes\n\nfunction handleFieldMutation(validate?: boolean) {\n\tlet firstInvalid: HTMLInputElement | null = null;\n\tfor (const field of FIELDS)\n\t\tif (field.isConnected) {\n\t\t\tconst labels: HTMLLabelElement[] = [];\n\t\t\tconst descriptions: Element[] = [];\n\t\t\tconst validationMessages: Element[] = [];\n\t\t\tlet combobox: UHTMLComboboxElement | null = null;\n\t\t\tlet input: HTMLInputElement | null = null;\n\t\t\tlet valid = true;\n\n\t\t\tfor (const el of field.getElementsByTagName(\"*\")) {\n\t\t\t\tif (el instanceof HTMLLabelElement) labels.push(el);\n\t\t\t\telse if (el instanceof UHTMLComboboxElement) combobox = el;\n\t\t\t\telse if (isInputLike(el) && !el.hidden) input = el;\n\t\t\t\telse if (el.hasAttribute(\"data-description\")) descriptions.push(el);\n\t\t\t\telse if (el.classList.contains(CSS_VALIDATION)) {\n\t\t\t\t\tvalid = attr(el, \"data-color\") === \"success\" || !el.clientHeight; // Only set invalid if Validation is visible\n\t\t\t\t\tvalidationMessages.push(el);\n\t\t\t\t\tdescriptions.unshift(el);\n\t\t\t\t} else if (el instanceof HTMLParagraphElement)\n\t\t\t\t\tdescriptions.some((desc) => desc.contains(el)) ||\n\t\t\t\t\t\tdescriptions.push(el); // Only add if not already inside description\n\t\t\t}\n\n\t\t\tif (input) {\n\t\t\t\tfor (const label of labels) label.htmlFor = useId(input);\n\t\t\t\tif (validate && attr(field, \"data-validation\") === \"form\") {\n\t\t\t\t\tvalid = input.matches(\":valid\");\n\t\t\t\t\tif (!firstInvalid && !valid) firstInvalid = input;\n\t\t\t\t\tfor (const el of validationMessages)\n\t\t\t\t\t\tattr(el, \"hidden\", valid ? \"\" : null);\n\t\t\t\t}\n\t\t\t\trenderCombobox(combobox);\n\t\t\t\trenderCounter(input);\n\t\t\t\trenderTextareaSize(input);\n\t\t\t\tattr(input, \"aria-describedby\", descriptions.map(useId).join(\" \"));\n\t\t\t\tattr(input, \"aria-invalid\", `${!valid}`);\n\t\t\t}\n\t\t}\n\tfirstInvalid?.focus(); // Move focus to first invalid field if doing validation\n}\n\n// iOS does not support field-sizing: content, so we need to manually resize\nfunction renderTextareaSize(textarea: Element) {\n\tif (textarea instanceof HTMLTextAreaElement) {\n\t\ttextarea.style.setProperty(\"--mtds-textarea-height\", \"auto\");\n\t\ttextarea.style.setProperty(\n\t\t\t\"--mtds-textarea-height\",\n\t\t\t`${textarea.scrollHeight}px`,\n\t\t);\n\t}\n}\n\n// Setup translations from CSS custom properties\nfunction renderCombobox(el: UHTMLComboboxElement | null) {\n\tconst { control, list } = el || {};\n\n\tif (el && list && !el.hasAttribute(\"data-sr-added\")) {\n\t\tconst style = window.getComputedStyle(el);\n\t\tattr(el, \"data-sr-added\", getText(style, \"combobox-added\"));\n\t\tattr(el, \"data-sr-empty\", getText(style, \"combobox-empty\"));\n\t\tattr(el, \"data-sr-found\", getText(style, \"combobox-found\"));\n\t\tattr(el, \"data-sr-invalid\", getText(style, \"combobox-invalid\"));\n\t\tattr(el, \"data-sr-of\", getText(style, \"combobox-of\"));\n\t\tattr(el, \"data-sr-remove\", getText(style, \"combobox-remove\"));\n\t\tattr(el, \"data-sr-removed\", getText(style, \"combobox-removed\"));\n\t\tattr(list, \"data-sr-plural\", getText(style, \"datalist-plural\"));\n\t\tattr(list, \"data-sr-singular\", getText(style, \"datalist-singular\"));\n\t}\n\tif (list && control && !list.hasAttribute(\"popover\")) {\n\t\tattr(list, \"popover\", \"manual\");\n\t\tattr(control, \"popovertarget\", useId(list));\n\t}\n}\n\nfunction renderCounter(input: HTMLInputElement) {\n\tconst el = input?.nextElementSibling;\n\tconst limit = el && attr(el, \"data-count\");\n\n\tif (el && limit) {\n\t\tconst remainder = Number(limit) - input.value.length;\n\t\tconst nextInvalid = remainder < 0;\n\t\tconst prevInvalid = attr(el, \"aria-live\") === \"polite\";\n\t\tconst style = window.getComputedStyle(el || input);\n\t\tconst over = getText(style, \"count-over\");\n\t\tconst under = getText(style, \"count-under\");\n\n\t\tif (prevInvalid !== nextInvalid) {\n\t\t\tattr(el, \"aria-live\", nextInvalid ? \"polite\" : \"off\");\n\t\t\tfor (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);\n\t\t}\n\t\tel.textContent = (nextInvalid ? over : under).replace(\n\t\t\t\"%d\",\n\t\t\t`${Math.abs(remainder)}`,\n\t\t);\n\t}\n}\n\nfunction handleFieldToggle({ target: el, newState }: Partial<ToggleEvent>) {\n\tif (el instanceof UHTMLDataListElement) {\n\t\tconst root = el.getRootNode() as ShadowRoot | null;\n\t\tconst anchor = root?.querySelector<HTMLElement>(\n\t\t\t`[popovertarget=\"${el.id}\"]`,\n\t\t);\n\n\t\tif (newState === \"closed\") anchorPosition(el, false);\n\t\telse if (anchor)\n\t\t\tanchorPosition(el, anchor, {\n\t\t\t\tcontain({ availableHeight }) {\n\t\t\t\t\tel.style.width = `${anchor.clientWidth}px`;\n\t\t\t\t\tel.style.maxHeight = `${Math.max(50, availableHeight)}px`;\n\t\t\t\t},\n\t\t\t});\n\t}\n}\n// Update when typing\nfunction handleFieldInput(event: Event) {\n\tif (isInputLike(event.target)) {\n\t\trenderCounter(event.target);\n\t\trenderTextareaSize(event.target);\n\t}\n}\n\nfunction handleFieldValdiation(event: Event) {\n\tconst field = (event.target as Element)?.closest?.(`.${CSS_FIELD}`);\n\tif (event.type === \"invalid\" && field) event.preventDefault(); // Prevent browsers from showing default validation bubbles\n\thandleFieldMutation(true); // Update state\n}\n\nonLoaded(() => [\n\tonMutation(() => handleFieldMutation()),\n\ton(document, \"input\", handleFieldInput, QUICK_EVENT),\n\ton(document, \"toggle\", handleFieldToggle, QUICK_EVENT), // Use capture since toggle does not bubble\n\ton(document, \"invalid,submit\", handleFieldValdiation, true), // Use capture as invalid and submit does not bubble\n]);\n"],"names":["CSS_FIELD","styles","CSS_VALIDATIONS","CSS_VALIDATION","FIELDS","IS_BROWSER","getText","style","key","handleFieldMutation","validate","firstInvalid","field","labels","descriptions","validationMessages","combobox","input","valid","el","UHTMLComboboxElement","isInputLike","attr","desc","label","useId","renderCombobox","renderCounter","renderTextareaSize","textarea","control","list","limit","remainder","nextInvalid","prevInvalid","over","under","css","handleFieldToggle","newState","UHTMLDataListElement","anchor","anchorPosition","availableHeight","handleFieldInput","event","handleFieldValdiation","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}
+{"version":3,"file":"field-observer.js","sources":["../../designsystem/field/field-observer.ts"],"sourcesContent":["import { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { UHTMLDataListElement } from \"@u-elements/u-datalist\";\nimport styles from \"../styles.module.css\";\nimport {\n\tanchorPosition,\n\tattr,\n\tIS_BROWSER,\n\tisInputLike,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tQUICK_EVENT,\n\tuseId,\n} from \"../utils\";\n\nconst CSS_FIELD = styles.field.split(\" \")[0];\nconst CSS_VALIDATIONS = styles.validation.split(\" \");\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\nconst FIELDS = IS_BROWSER ? document.getElementsByClassName(CSS_FIELD) : [];\n\nfunction handleFieldMutation(validate?: boolean) {\n\tlet firstInvalid: HTMLInputElement | null = null;\n\tfor (const field of FIELDS)\n\t\tif (field.isConnected) {\n\t\t\tconst labels: HTMLLabelElement[] = [];\n\t\t\tconst descriptions: Element[] = [];\n\t\t\tconst validationMsg: Element[] = [];\n\t\t\tlet combobox: UHTMLComboboxElement | null = null;\n\t\t\tlet input: HTMLInputElement | null = null;\n\t\t\tlet valid = true;\n\n\t\t\tfor (const el of field.getElementsByTagName(\"*\")) {\n\t\t\t\tif (el instanceof HTMLLabelElement) labels.push(el);\n\t\t\t\telse if (el instanceof UHTMLComboboxElement) combobox = el;\n\t\t\t\telse if (isInputLike(el) && !el.hidden) input = el;\n\t\t\t\telse if (el.hasAttribute(\"data-description\")) descriptions.push(el);\n\t\t\t\telse if (el.classList.contains(CSS_VALIDATION)) {\n\t\t\t\t\tvalid = attr(el, \"data-color\") === \"success\" || !el.clientHeight; // Only set invalid if Validation is visible\n\t\t\t\t\tvalidationMsg.push(el);\n\t\t\t\t\tdescriptions.unshift(el);\n\t\t\t\t} else if (el instanceof HTMLParagraphElement)\n\t\t\t\t\tdescriptions.some((desc) => desc.contains(el)) ||\n\t\t\t\t\t\tdescriptions.push(el); // Only add if not already inside description\n\t\t\t}\n\n\t\t\tif (input) {\n\t\t\t\tfor (const label of labels) label.htmlFor = useId(input);\n\t\t\t\tif (\n\t\t\t\t\t(validate || combobox?.control?.validity.customError) && // Live re-evaluate combobox if invalid to correct validity before form sumbit\n\t\t\t\t\tattr(field, \"data-validation\") === \"form\"\n\t\t\t\t) {\n\t\t\t\t\tvalid = combobox?.hasAttribute(\"data-required\")\n\t\t\t\t\t\t? !!combobox?.items.length\n\t\t\t\t\t\t: input.validity.valid;\n\n\t\t\t\t\tif (!firstInvalid && !valid) firstInvalid = input;\n\t\t\t\t\tfor (const el of validationMsg) attr(el, \"hidden\", valid ? \"\" : null);\n\t\t\t\t\tcombobox?.control?.setCustomValidity(valid ? \"\" : \"Invalid\"); // Combobox does not have native validation\n\t\t\t\t}\n\t\t\t\trenderCombobox(combobox);\n\t\t\t\trenderCounter(input);\n\t\t\t\trenderTextareaSize(input);\n\t\t\t\tattr(input, \"aria-describedby\", descriptions.map(useId).join(\" \"));\n\t\t\t\tattr(input, \"aria-invalid\", `${!valid}`);\n\t\t\t}\n\t\t}\n\tfirstInvalid?.focus(); // Move focus to first invalid field if doing validation\n\treturn firstInvalid;\n}\n\n// iOS does not support field-sizing: content, so we need to manually resize\nfunction renderTextareaSize(textarea: Element) {\n\tif (textarea instanceof HTMLTextAreaElement) {\n\t\ttextarea.style.setProperty(\"--mtds-textarea-height\", \"auto\");\n\t\ttextarea.style.setProperty(\n\t\t\t\"--mtds-textarea-height\",\n\t\t\t`${textarea.scrollHeight}px`,\n\t\t);\n\t}\n}\n\nconst getText = (style: CSSStyleDeclaration, key: string) =>\n\tstyle.getPropertyValue(`--mtds-text-${key}`)?.slice(1, -1) || \"\"; // slice to trim quotes\n\n// Setup translations from CSS custom properties\nfunction renderCombobox(el: UHTMLComboboxElement | null) {\n\tconst { control, list } = el || {};\n\n\tif (el && list && !el.hasAttribute(\"data-sr-added\")) {\n\t\tconst style = window.getComputedStyle(el);\n\t\tattr(el, \"data-sr-added\", getText(style, \"combobox-added\"));\n\t\tattr(el, \"data-sr-empty\", getText(style, \"combobox-empty\"));\n\t\tattr(el, \"data-sr-found\", getText(style, \"combobox-found\"));\n\t\tattr(el, \"data-sr-invalid\", getText(style, \"combobox-invalid\"));\n\t\tattr(el, \"data-sr-of\", getText(style, \"combobox-of\"));\n\t\tattr(el, \"data-sr-remove\", getText(style, \"combobox-remove\"));\n\t\tattr(el, \"data-sr-removed\", getText(style, \"combobox-removed\"));\n\t\tattr(list, \"data-sr-plural\", getText(style, \"datalist-plural\"));\n\t\tattr(list, \"data-sr-singular\", getText(style, \"datalist-singular\"));\n\t}\n\tif (list && control && !list.hasAttribute(\"popover\")) {\n\t\tattr(list, \"popover\", \"manual\");\n\t\tattr(control, \"popovertarget\", useId(list));\n\t}\n}\n\nfunction renderCounter(input: HTMLInputElement) {\n\tconst el = input?.nextElementSibling;\n\tconst limit = el && attr(el, \"data-count\");\n\n\tif (el && limit) {\n\t\tconst remainder = Number(limit) - input.value.length;\n\t\tconst nextInvalid = remainder < 0;\n\t\tconst prevInvalid = attr(el, \"aria-live\") === \"polite\";\n\t\tconst style = window.getComputedStyle(el || input);\n\t\tconst over = getText(style, \"count-over\");\n\t\tconst under = getText(style, \"count-under\");\n\n\t\tif (prevInvalid !== nextInvalid) {\n\t\t\tattr(el, \"aria-live\", nextInvalid ? \"polite\" : \"off\");\n\t\t\tfor (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);\n\t\t}\n\t\tel.textContent = (nextInvalid ? over : under).replace(\n\t\t\t\"%d\",\n\t\t\t`${Math.abs(remainder)}`,\n\t\t);\n\t}\n}\n\nfunction handleFieldToggle({ target: el, newState }: Partial<ToggleEvent>) {\n\tif (el instanceof UHTMLDataListElement) {\n\t\tconst root = el.getRootNode() as ShadowRoot | null;\n\t\tconst anchor = root?.querySelector<HTMLElement>(\n\t\t\t`[popovertarget=\"${el.id}\"]`,\n\t\t);\n\n\t\tif (newState === \"closed\") anchorPosition(el, false);\n\t\telse if (anchor)\n\t\t\tanchorPosition(el, anchor, {\n\t\t\t\tcontain({ availableHeight }) {\n\t\t\t\t\tel.style.width = `${anchor.clientWidth}px`;\n\t\t\t\t\tel.style.maxHeight = `${Math.max(50, availableHeight)}px`;\n\t\t\t\t},\n\t\t\t});\n\t}\n}\n// Update when typing\nfunction handleFieldInput(event: Event) {\n\tif (isInputLike(event.target)) {\n\t\trenderCounter(event.target);\n\t\trenderTextareaSize(event.target);\n\t}\n}\n\nfunction handleFieldValdiation(event: Event) {\n\tconst field = (event.target as Element)?.closest?.(`.${CSS_FIELD}`);\n\tif (event.type === \"invalid\" && field) event.preventDefault(); // Prevent browsers from showing default validation bubbles\n\tif (handleFieldMutation(true)) event.preventDefault(); // Prevent submit if invalid fields found\n}\n\nonLoaded(() => [\n\tonMutation(() => handleFieldMutation(), \"class\"),\n\ton(document, \"input\", handleFieldInput, QUICK_EVENT),\n\ton(document, \"toggle\", handleFieldToggle, QUICK_EVENT), // Use capture since toggle does not bubble\n\ton(document, \"invalid,submit\", handleFieldValdiation, true), // Use capture as invalid and submit does not bubble\n]);\n"],"names":["CSS_FIELD","styles","CSS_VALIDATIONS","CSS_VALIDATION","FIELDS","IS_BROWSER","handleFieldMutation","validate","firstInvalid","field","labels","descriptions","validationMsg","combobox","input","valid","el","UHTMLComboboxElement","isInputLike","attr","desc","label","useId","renderCombobox","renderCounter","renderTextareaSize","textarea","getText","style","key","control","list","limit","remainder","nextInvalid","prevInvalid","over","under","css","handleFieldToggle","newState","UHTMLDataListElement","anchor","anchorPosition","availableHeight","handleFieldInput","event","handleFieldValdiation","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}