@mattilsynet/design 3.1.10 → 3.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/mtds/atlas.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import { MATGEO_URL as r, MTDSAtlasElement as o } from "./atlas/atlas-element.js";
2
- import { MTDSAtlasMarkerElement as m } from "./atlas/atlas-marker.js";
3
- import { MTDSAtlasMatgeoElement as M } from "./atlas/atlas-matgeo.js";
4
- import { MTDSAtlasWMSElement as p } from "./atlas/atlas-wms.js";
5
- import { default as x } from "./external/leaflet/dist/leaflet-src.js";
2
+ import { default as m } from "./external/leaflet/dist/leaflet-src.js";
3
+ import { MTDSAtlasMarkerElement as M } from "./atlas/atlas-marker.js";
4
+ import { MTDSAtlasMatgeoElement as p } from "./atlas/atlas-matgeo.js";
5
+ import { MTDSAtlasWMSElement as x } from "./atlas/atlas-wms.js";
6
6
  export {
7
- x as L,
7
+ m as L,
8
8
  r as MATGEO_URL,
9
9
  o as MTDSAtlasElement,
10
- m as MTDSAtlasMarkerElement,
11
- M as MTDSAtlasMatgeoElement,
12
- p as MTDSAtlasWMSElement
10
+ M as MTDSAtlasMarkerElement,
11
+ p as MTDSAtlasMatgeoElement,
12
+ x as MTDSAtlasWMSElement
13
13
  };
14
14
  //# sourceMappingURL=atlas.js.map
@@ -1,21 +1,22 @@
1
- import { tag as n } from "../utils.js";
2
- const $ = [0.1, 0.2, 0.25, 0.5, 1];
3
- function y(s, { aspect: i, type: d }) {
4
- const g = d === "stacked", l = s[0].reduce((t, u, f) => {
5
- const m = s.map((o) => o[f].number), v = m.reduce((o, S) => o + S, 0);
6
- return Math.max(t, ...g ? [v] : m);
7
- }, 0), r = l / 10, p = 10 ** `${Math.round(r)}`.length, h = r / p, e = ($.find((t) => t > h) || 1) * p, a = Math.ceil(l / e) * e, c = n("div", {
8
- "aria-label": s[0][0].value || null,
1
+ import { tag as r } from "../utils.js";
2
+ const S = [0.1, 0.2, 0.25, 0.5, 1];
3
+ function M(e, { aspect: c, type: d }) {
4
+ const g = d === "stacked", l = e[0].reduce((s, u, f) => {
5
+ const m = e.map((a) => a[f].number), k = m.reduce((a, v) => a + v, 0);
6
+ return Math.max(s, ...g ? [k] : m);
7
+ }, 0), i = l / 10, p = 10 ** `${Math.round(i)}`.length, h = i / p, o = (S.find((s) => s > h) || 1) * p, n = Math.ceil(l / o) * o, t = r("div", {
8
+ "aria-label": e[0][0].value || null,
9
9
  class: "axis",
10
- role: "figure",
11
- style: `${i ? `--mtdsc-chart-aspect: ${i};` : ""} --bars: ${s[0]?.length - 1}; --groups: ${s.length - 1}; --total: ${a}`
12
- }), x = c.appendChild(n("div", { class: "axisSteps" })), k = c.appendChild(n("div", { class: "axisGroups" }));
13
- return Array.from({ length: a / e + 1 }, (t, u) => b(e * u)).reverse().map(
14
- (t) => x.append(n("div", { class: "axisStep", "data-label": t }))
15
- ), { total: a, groups: k, axis: c };
10
+ role: "figure"
11
+ });
12
+ c && t.style.setProperty("--mtdsc-chart-aspect", c), t.style.setProperty("--bars", `${e[0]?.length - 1}`), t.style.setProperty("--groups", `${e.length - 1}`), t.style.setProperty("--total", `${n}`);
13
+ const x = t.appendChild(r("div", { class: "axisSteps" })), y = t.appendChild(r("div", { class: "axisGroups" }));
14
+ return Array.from({ length: n / o + 1 }, (s, u) => b(o * u)).reverse().map(
15
+ (s) => x.append(r("div", { class: "axisStep", "data-label": s }))
16
+ ), { total: n, groups: y, axis: t };
16
17
  }
17
18
  const b = new Intl.NumberFormat().format;
18
19
  export {
19
- y as toAxis
20
+ M as toAxis
20
21
  };
21
22
  //# sourceMappingURL=chart-axis.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"chart-axis.js","sources":["../../designsystem/chart/chart-axis.ts"],"sourcesContent":["import { tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Config = { type: string; aspect?: string };\n\nconst STEPS = [0.1, 0.2, 0.25, 0.5, 1];\n\nexport function toAxis(data: ChartData, { aspect, type }: Config) {\n\tconst totalTicks = 10;\n\tconst isStacked = type === \"stacked\";\n\tconst max = data[0].reduce((acc, _, index) => {\n\t\tconst all = data.map((row) => row[index].number);\n\t\tconst sum = all.reduce((acc, num) => acc + num, 0);\n\t\treturn Math.max(acc, ...(isStacked ? [sum] : all));\n\t}, 0);\n\n\tconst tickRange = max / totalTicks;\n\tconst tickDigits = 10 ** `${Math.round(tickRange)}`.length; // Get amount of digits in total number and use as exponent for 10x\n\tconst tickSize = tickRange / tickDigits; // Get amount of digits in total number and use as exponent for 10\n\tconst step = (STEPS.find((current) => current > tickSize) || 1) * tickDigits; // Find closest step larger than tick\n\tconst total = Math.ceil(max / step) * step;\n\tconst axis = tag(\"div\", {\n\t\t\"aria-label\": data[0][0].value || null,\n\t\tclass: \"axis\",\n\t\trole: \"figure\",\n\t\tstyle: `${aspect ? `--mtdsc-chart-aspect: ${aspect};` : \"\"} --bars: ${data[0]?.length - 1}; --groups: ${data.length - 1}; --total: ${total}`,\n\t});\n\tconst steps = axis.appendChild(tag(\"div\", { class: \"axisSteps\" }));\n\tconst groups = axis.appendChild(tag(\"div\", { class: \"axisGroups\" }));\n\n\tArray.from({ length: total / step + 1 }, (_, i) => getNum(step * i))\n\t\t.reverse()\n\t\t.map((num) =>\n\t\t\tsteps.append(tag(\"div\", { class: \"axisStep\", \"data-label\": num })),\n\t\t);\n\n\treturn { total, groups, axis };\n}\n\nconst getNum = new Intl.NumberFormat().format;\n"],"names":["STEPS","toAxis","data","aspect","type","isStacked","max","acc","_","index","all","row","sum","num","tickRange","tickDigits","tickSize","step","current","total","axis","tag","steps","groups","i","getNum"],"mappings":";AAKA,MAAMA,IAAQ,CAAC,KAAK,KAAK,MAAM,KAAK,CAAC;AAE9B,SAASC,EAAOC,GAAiB,EAAE,QAAAC,GAAQ,MAAAC,KAAgB;AAEjE,QAAMC,IAAYD,MAAS,WACrBE,IAAMJ,EAAK,CAAC,EAAE,OAAO,CAACK,GAAKC,GAAGC,MAAU;AAC7C,UAAMC,IAAMR,EAAK,IAAI,CAACS,MAAQA,EAAIF,CAAK,EAAE,MAAM,GACzCG,IAAMF,EAAI,OAAO,CAACH,GAAKM,MAAQN,IAAMM,GAAK,CAAC;AACjD,WAAO,KAAK,IAAIN,GAAK,GAAIF,IAAY,CAACO,CAAG,IAAIF,CAAI;AAAA,EAClD,GAAG,CAAC,GAEEI,IAAYR,IAAM,IAClBS,IAAa,MAAM,GAAG,KAAK,MAAMD,CAAS,CAAC,GAAG,QAC9CE,IAAWF,IAAYC,GACvBE,KAAQjB,EAAM,KAAK,CAACkB,MAAYA,IAAUF,CAAQ,KAAK,KAAKD,GAC5DI,IAAQ,KAAK,KAAKb,IAAMW,CAAI,IAAIA,GAChCG,IAAOC,EAAI,OAAO;AAAA,IACvB,cAAcnB,EAAK,CAAC,EAAE,CAAC,EAAE,SAAS;AAAA,IAClC,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO,GAAGC,IAAS,yBAAyBA,CAAM,MAAM,EAAE,YAAYD,EAAK,CAAC,GAAG,SAAS,CAAC,eAAeA,EAAK,SAAS,CAAC,cAAciB,CAAK;AAAA,EAAA,CAC1I,GACKG,IAAQF,EAAK,YAAYC,EAAI,OAAO,EAAE,OAAO,YAAA,CAAa,CAAC,GAC3DE,IAASH,EAAK,YAAYC,EAAI,OAAO,EAAE,OAAO,aAAA,CAAc,CAAC;AAEnE,eAAM,KAAK,EAAE,QAAQF,IAAQF,IAAO,KAAK,CAACT,GAAGgB,MAAMC,EAAOR,IAAOO,CAAC,CAAC,EACjE,UACA;AAAA,IAAI,CAACX,MACLS,EAAM,OAAOD,EAAI,OAAO,EAAE,OAAO,YAAY,cAAcR,GAAK,CAAC;AAAA,EAAA,GAG5D,EAAE,OAAAM,GAAO,QAAAI,GAAQ,MAAAH,EAAA;AACzB;AAEA,MAAMK,IAAS,IAAI,KAAK,aAAA,EAAe;"}
1
+ {"version":3,"file":"chart-axis.js","sources":["../../designsystem/chart/chart-axis.ts"],"sourcesContent":["import { tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Config = { type: string; aspect?: string };\n\nconst STEPS = [0.1, 0.2, 0.25, 0.5, 1];\n\nexport function toAxis(data: ChartData, { aspect, type }: Config) {\n\tconst totalTicks = 10;\n\tconst isStacked = type === \"stacked\";\n\tconst max = data[0].reduce((acc, _, index) => {\n\t\tconst all = data.map((row) => row[index].number);\n\t\tconst sum = all.reduce((acc, num) => acc + num, 0);\n\t\treturn Math.max(acc, ...(isStacked ? [sum] : all));\n\t}, 0);\n\n\tconst tickRange = max / totalTicks;\n\tconst tickDigits = 10 ** `${Math.round(tickRange)}`.length; // Get amount of digits in total number and use as exponent for 10x\n\tconst tickSize = tickRange / tickDigits; // Get amount of digits in total number and use as exponent for 10\n\tconst step = (STEPS.find((current) => current > tickSize) || 1) * tickDigits; // Find closest step larger than tick\n\tconst total = Math.ceil(max / step) * step;\n\tconst axis = tag(\"div\", {\n\t\t\"aria-label\": data[0][0].value || null,\n\t\tclass: \"axis\",\n\t\trole: \"figure\",\n\t});\n\tif (aspect) axis.style.setProperty(\"--mtdsc-chart-aspect\", aspect);\n\taxis.style.setProperty(\"--bars\", `${data[0]?.length - 1}`);\n\taxis.style.setProperty(\"--groups\", `${data.length - 1}`);\n\taxis.style.setProperty(\"--total\", `${total}`);\n\tconst steps = axis.appendChild(tag(\"div\", { class: \"axisSteps\" }));\n\tconst groups = axis.appendChild(tag(\"div\", { class: \"axisGroups\" }));\n\n\tArray.from({ length: total / step + 1 }, (_, i) => getNum(step * i))\n\t\t.reverse()\n\t\t.map((num) =>\n\t\t\tsteps.append(tag(\"div\", { class: \"axisStep\", \"data-label\": num })),\n\t\t);\n\n\treturn { total, groups, axis };\n}\n\nconst getNum = new Intl.NumberFormat().format;\n"],"names":["STEPS","toAxis","data","aspect","type","isStacked","max","acc","_","index","all","row","sum","num","tickRange","tickDigits","tickSize","step","current","total","axis","tag","steps","groups","i","getNum"],"mappings":";AAKA,MAAMA,IAAQ,CAAC,KAAK,KAAK,MAAM,KAAK,CAAC;AAE9B,SAASC,EAAOC,GAAiB,EAAE,QAAAC,GAAQ,MAAAC,KAAgB;AAEjE,QAAMC,IAAYD,MAAS,WACrBE,IAAMJ,EAAK,CAAC,EAAE,OAAO,CAACK,GAAKC,GAAGC,MAAU;AAC7C,UAAMC,IAAMR,EAAK,IAAI,CAACS,MAAQA,EAAIF,CAAK,EAAE,MAAM,GACzCG,IAAMF,EAAI,OAAO,CAACH,GAAKM,MAAQN,IAAMM,GAAK,CAAC;AACjD,WAAO,KAAK,IAAIN,GAAK,GAAIF,IAAY,CAACO,CAAG,IAAIF,CAAI;AAAA,EAClD,GAAG,CAAC,GAEEI,IAAYR,IAAM,IAClBS,IAAa,MAAM,GAAG,KAAK,MAAMD,CAAS,CAAC,GAAG,QAC9CE,IAAWF,IAAYC,GACvBE,KAAQjB,EAAM,KAAK,CAACkB,MAAYA,IAAUF,CAAQ,KAAK,KAAKD,GAC5DI,IAAQ,KAAK,KAAKb,IAAMW,CAAI,IAAIA,GAChCG,IAAOC,EAAI,OAAO;AAAA,IACvB,cAAcnB,EAAK,CAAC,EAAE,CAAC,EAAE,SAAS;AAAA,IAClC,OAAO;AAAA,IACP,MAAM;AAAA,EAAA,CACN;AACD,EAAIC,KAAQiB,EAAK,MAAM,YAAY,wBAAwBjB,CAAM,GACjEiB,EAAK,MAAM,YAAY,UAAU,GAAGlB,EAAK,CAAC,GAAG,SAAS,CAAC,EAAE,GACzDkB,EAAK,MAAM,YAAY,YAAY,GAAGlB,EAAK,SAAS,CAAC,EAAE,GACvDkB,EAAK,MAAM,YAAY,WAAW,GAAGD,CAAK,EAAE;AAC5C,QAAMG,IAAQF,EAAK,YAAYC,EAAI,OAAO,EAAE,OAAO,YAAA,CAAa,CAAC,GAC3DE,IAASH,EAAK,YAAYC,EAAI,OAAO,EAAE,OAAO,aAAA,CAAc,CAAC;AAEnE,eAAM,KAAK,EAAE,QAAQF,IAAQF,IAAO,KAAK,CAACT,GAAGgB,MAAMC,EAAOR,IAAOO,CAAC,CAAC,EACjE,UACA;AAAA,IAAI,CAACX,MACLS,EAAM,OAAOD,EAAI,OAAO,EAAE,OAAO,YAAY,cAAcR,GAAK,CAAC;AAAA,EAAA,GAG5D,EAAE,OAAAM,GAAO,QAAAI,GAAQ,MAAAH,EAAA;AACzB;AAEA,MAAMK,IAAS,IAAI,KAAK,aAAA,EAAe;"}
@@ -1,24 +1,22 @@
1
- import { tag as e } from "../utils.js";
2
- function d(t) {
3
- return t[0].slice(1).map(({ value: l, event: n }, r) => {
4
- const i = e("div", { class: "axisGroup", "data-label": l }), s = i.appendChild(
5
- e("div", { class: "axisGroupContent" })
1
+ import { tag as a } from "../utils.js";
2
+ function u(r) {
3
+ return r[0].slice(1).map(({ value: s, event: l }, n) => {
4
+ const o = a("div", { class: "axisGroup", "data-label": s }), i = o.appendChild(
5
+ a("div", { class: "axisGroupContent" })
6
6
  );
7
- return t.slice(1).map((a) => a[r + 1]).map(
8
- ({ tooltip: a, style: o, number: p }) => s.appendChild(
9
- e("div", {
10
- "aria-label": a,
11
- "data-event": n,
12
- class: "bar",
13
- role: "img",
14
- style: `${o}; --value: ${p}`,
15
- tabindex: "0"
16
- })
17
- )
18
- ), i;
7
+ return r.slice(1).map((e) => e[n + 1]).map(({ tooltip: e, color: p, number: c }) => {
8
+ const t = a("div", {
9
+ "aria-label": e,
10
+ "data-event": l,
11
+ class: "bar",
12
+ role: "img",
13
+ tabindex: "0"
14
+ });
15
+ return t.style.setProperty("--color", p), t.style.setProperty("--value", `${c}`), i.appendChild(t);
16
+ }), o;
19
17
  });
20
18
  }
21
19
  export {
22
- d as toBars
20
+ u as toBars
23
21
  };
24
22
  //# sourceMappingURL=chart-bars.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"chart-bars.js","sources":["../../designsystem/chart/chart-bars.ts"],"sourcesContent":["import { tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\nexport function toBars(data: ChartData) {\n\treturn data[0].slice(1).map(({ value, event }, index) => {\n\t\tconst group = tag(\"div\", { class: \"axisGroup\", \"data-label\": value });\n\t\tconst content = group.appendChild(\n\t\t\ttag(\"div\", { class: \"axisGroupContent\" }),\n\t\t);\n\n\t\tdata\n\t\t\t.slice(1)\n\t\t\t.map((values) => values[index + 1])\n\t\t\t.map(({ tooltip, style, number }) =>\n\t\t\t\tcontent.appendChild(\n\t\t\t\t\ttag(\"div\", {\n\t\t\t\t\t\t\"aria-label\": tooltip,\n\t\t\t\t\t\t\"data-event\": event,\n\t\t\t\t\t\tclass: \"bar\",\n\t\t\t\t\t\trole: \"img\",\n\t\t\t\t\t\tstyle: `${style}; --value: ${number}`,\n\t\t\t\t\t\ttabindex: \"0\",\n\t\t\t\t\t}),\n\t\t\t\t),\n\t\t\t);\n\t\treturn group;\n\t});\n}\n"],"names":["toBars","data","value","event","index","group","tag","content","values","tooltip","style","number"],"mappings":";AAGO,SAASA,EAAOC,GAAiB;AACvC,SAAOA,EAAK,CAAC,EAAE,MAAM,CAAC,EAAE,IAAI,CAAC,EAAE,OAAAC,GAAO,OAAAC,EAAA,GAASC,MAAU;AACxD,UAAMC,IAAQC,EAAI,OAAO,EAAE,OAAO,aAAa,cAAcJ,GAAO,GAC9DK,IAAUF,EAAM;AAAA,MACrBC,EAAI,OAAO,EAAE,OAAO,oBAAoB;AAAA,IAAA;AAGzC,WAAAL,EACE,MAAM,CAAC,EACP,IAAI,CAACO,MAAWA,EAAOJ,IAAQ,CAAC,CAAC,EACjC;AAAA,MAAI,CAAC,EAAE,SAAAK,GAAS,OAAAC,GAAO,QAAAC,EAAA,MACvBJ,EAAQ;AAAA,QACPD,EAAI,OAAO;AAAA,UACV,cAAcG;AAAA,UACd,cAAcN;AAAA,UACd,OAAO;AAAA,UACP,MAAM;AAAA,UACN,OAAO,GAAGO,CAAK,cAAcC,CAAM;AAAA,UACnC,UAAU;AAAA,QAAA,CACV;AAAA,MAAA;AAAA,IACF,GAEKN;AAAA,EACR,CAAC;AACF;"}
1
+ {"version":3,"file":"chart-bars.js","sources":["../../designsystem/chart/chart-bars.ts"],"sourcesContent":["import { tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\nexport function toBars(data: ChartData) {\n\treturn data[0].slice(1).map(({ value, event }, index) => {\n\t\tconst group = tag(\"div\", { class: \"axisGroup\", \"data-label\": value });\n\t\tconst content = group.appendChild(\n\t\t\ttag(\"div\", { class: \"axisGroupContent\" }),\n\t\t);\n\n\t\tdata\n\t\t\t.slice(1)\n\t\t\t.map((values) => values[index + 1])\n\t\t\t.map(({ tooltip, color, number }) => {\n\t\t\t\tconst el = tag(\"div\", {\n\t\t\t\t\t\"aria-label\": tooltip,\n\t\t\t\t\t\"data-event\": event,\n\t\t\t\t\tclass: \"bar\",\n\t\t\t\t\trole: \"img\",\n\t\t\t\t\ttabindex: \"0\",\n\t\t\t\t});\n\t\t\t\tel.style.setProperty(\"--color\", color);\n\t\t\t\tel.style.setProperty(\"--value\", `${number}`);\n\t\t\t\treturn content.appendChild(el);\n\t\t\t});\n\t\treturn group;\n\t});\n}\n"],"names":["toBars","data","value","event","index","group","tag","content","values","tooltip","color","number","el"],"mappings":";AAGO,SAASA,EAAOC,GAAiB;AACvC,SAAOA,EAAK,CAAC,EAAE,MAAM,CAAC,EAAE,IAAI,CAAC,EAAE,OAAAC,GAAO,OAAAC,EAAA,GAASC,MAAU;AACxD,UAAMC,IAAQC,EAAI,OAAO,EAAE,OAAO,aAAa,cAAcJ,GAAO,GAC9DK,IAAUF,EAAM;AAAA,MACrBC,EAAI,OAAO,EAAE,OAAO,oBAAoB;AAAA,IAAA;AAGzC,WAAAL,EACE,MAAM,CAAC,EACP,IAAI,CAACO,MAAWA,EAAOJ,IAAQ,CAAC,CAAC,EACjC,IAAI,CAAC,EAAE,SAAAK,GAAS,OAAAC,GAAO,QAAAC,QAAa;AACpC,YAAMC,IAAKN,EAAI,OAAO;AAAA,QACrB,cAAcG;AAAA,QACd,cAAcN;AAAA,QACd,OAAO;AAAA,QACP,MAAM;AAAA,QACN,UAAU;AAAA,MAAA,CACV;AACD,aAAAS,EAAG,MAAM,YAAY,WAAWF,CAAK,GACrCE,EAAG,MAAM,YAAY,WAAW,GAAGD,CAAM,EAAE,GACpCJ,EAAQ,YAAYK,CAAE;AAAA,IAC9B,CAAC,GACKP;AAAA,EACR,CAAC;AACF;"}
@@ -18,7 +18,7 @@ export declare class MTDSChartElement extends MTDSElement {
18
18
  declare const toData: (table?: HTMLTableElement | null) => {
19
19
  number: number;
20
20
  event: string | null;
21
- style: string;
21
+ color: string;
22
22
  value: string;
23
23
  tooltip: string;
24
24
  }[][];
@@ -1,17 +1,17 @@
1
1
  import v from "../styles.module.css.js";
2
- import { isBrowser as C, tag as h, defineElement as E, MTDSElement as k, onMutation as w, debounce as T, on as $, off as S, attr as l } from "../utils.js";
3
- import x from "./chart.css.js";
4
- import { toAxis as A } from "./chart-axis.js";
5
- import { toBars as L } from "./chart-bars.js";
6
- import { toLines as O } from "./chart-lines.js";
2
+ import { isBrowser as C, tag as p, defineElement as E, MTDSElement as $, onMutation as k, on as T, off as w, attr as d, attachStyle as S, debounce as x } from "../utils.js";
3
+ import A from "./chart.css.js";
4
+ import { toAxis as L } from "./chart-axis.js";
5
+ import { toBars as O } from "./chart-bars.js";
6
+ import { toLines as P } from "./chart-lines.js";
7
7
  import { toPies as R } from "./chart-pies.js";
8
- const f = "click keydown mousemove mouseout", b = "mtds-chart-tooltip", i = C() ? document.getElementById(b) || h("div", {
8
+ const u = "click keydown mousemove mouseout", f = "mtds-chart-tooltip", i = C() ? document.getElementById(f) || p("div", {
9
9
  "aria-hidden": "true",
10
10
  class: v._tooltip,
11
11
  hidden: "",
12
- id: b
12
+ id: f
13
13
  }) : null;
14
- class P extends k {
14
+ class q extends $ {
15
15
  #t;
16
16
  #e;
17
17
  static get observedAttributes() {
@@ -21,69 +21,70 @@ class P extends k {
21
21
  super(), this.attachShadow({ mode: "open" });
22
22
  }
23
23
  connectedCallback() {
24
- const e = T(() => this.attributeChangedCallback(), 100), t = new ResizeObserver(() => this.handleResize());
25
- t.observe(this), this.#e = () => t.disconnect(), this.#t = w(this, e, {
24
+ const e = x(() => this.attributeChangedCallback(), 100), t = new ResizeObserver(() => this.handleResize());
25
+ t.observe(this), this.#e = () => t.disconnect(), this.#t = k(this, e, {
26
26
  attributeFilter: ["data-tooltip"],
27
27
  attributes: !0,
28
28
  characterData: !0,
29
29
  childList: !0,
30
30
  subtree: !0
31
- }), requestAnimationFrame(() => this.attributeChangedCallback()), $(this, f, this);
31
+ }), requestAnimationFrame(() => this.attributeChangedCallback()), T(this, u, this);
32
32
  }
33
33
  disconnectedCallback() {
34
- i && (i.hidden = !0), S(this, f, this), this.#e?.(), this.#t?.(), this.#t = this.#e = void 0;
34
+ i && (i.hidden = !0), w(this, u, this), this.#e?.(), this.#t?.(), this.#t = this.#e = void 0;
35
35
  }
36
36
  attributeChangedCallback() {
37
- const e = D(this.querySelector("table"));
37
+ const e = H(this.querySelector("table"));
38
38
  if (!e[0]) return;
39
- Array.from(this.shadowRoot?.children || []).map((p) => p.remove());
40
- const [t, r] = (l(this, "data-variant") || "column").split("-"), s = l(this, "data-aspect") || void 0, a = h("style", {}, x), d = h("div", {
39
+ Array.from(this.shadowRoot?.children || []).map((l) => l.remove());
40
+ const [t, r] = (d(this, "data-variant") || "column").split("-"), s = d(this, "data-aspect") || void 0, a = p("div", {
41
41
  "aria-hidden": "hidden",
42
42
  class: "legends",
43
43
  role: "group"
44
44
  });
45
- e.slice(1).forEach(([{ value: p, style: g }]) => {
46
- d.appendChild(h("div", { class: "legend", style: g }, p));
45
+ e.slice(1).forEach(([{ value: l, color: y }]) => {
46
+ const g = p("div", { class: "legend" }, l);
47
+ a.appendChild(g).style.setProperty("--color", y);
47
48
  });
48
- const { axis: c, groups: n, total: m } = A(e, { aspect: s, type: r });
49
- (t === "column" || t === "bar") && n.append(...L(e)), (t === "line" || t === "area") && n.append(O(e, { total: m, variant: t, type: r })), (t === "doughnut" || t === "pie") && this.shadowRoot?.append(R(e, { aspect: s, variant: t })), this.shadowRoot?.append(c, d, a);
49
+ const { axis: h, groups: n, total: c } = L(e, { aspect: s, type: r });
50
+ (t === "column" || t === "bar") && n.append(...O(e)), (t === "line" || t === "area") && n.append(P(e, { total: c, variant: t, type: r })), (t === "doughnut" || t === "pie") && this.shadowRoot?.append(R(e, { aspect: s, variant: t })), this.shadowRoot?.append(h, a), S(this, A);
50
51
  }
51
52
  handleEvent(e) {
52
- e.type === "click" || e.type === "keydown" ? q(e, this) : z(e);
53
+ e.type === "click" || e.type === "keydown" ? z(e, this) : D(e);
53
54
  }
54
55
  handleResize() {
55
56
  const e = this.shadowRoot?.firstElementChild, t = e?.firstElementChild;
56
57
  e?.classList.toggle("axisStepsYHalf", (t?.offsetHeight || 0) < 400), e?.classList.toggle("axisStepsXHalf", (t?.offsetWidth || 0) < 500);
57
58
  }
58
59
  }
59
- function q(o, e) {
60
+ function z(o, e) {
60
61
  if (o instanceof KeyboardEvent && o.key !== "Enter") return;
61
- const t = o.composedPath()[0], r = e.querySelector("table"), [s, a] = t instanceof Element && l(t, "data-event")?.split("-").map(Number) || [];
62
+ const t = o.composedPath()[0], r = e.querySelector("table"), [s, a] = t instanceof Element && d(t, "data-event")?.split("-").map(Number) || [];
62
63
  r?.rows[s]?.cells[a]?.querySelector("a,button")?.click?.();
63
64
  }
64
- let y = "";
65
- function z(o) {
65
+ let b = "";
66
+ function D(o) {
66
67
  if (!i) return;
67
68
  i?.isConnected || document.body.append(i);
68
69
  const e = o.composedPath()[0], t = e instanceof Element && e.getAttribute("aria-label") || "";
69
- t && (i.style.transform = `translate(${Math.min(o.clientX, window.innerWidth)}px, ${o.clientY}px)`), t !== y && (t && (i.textContent = t), y = t, i.hidden = !t);
70
+ t && (i.style.transform = `translate(${Math.min(o.clientX, window.innerWidth)}px, ${o.clientY}px)`), t !== b && (t && (i.textContent = t), b = t, i.hidden = !t);
70
71
  }
71
- const u = (o) => o?.textContent?.trim() || "", D = (o) => Array.from(o?.rows || []).map(
72
+ const m = (o) => o?.textContent?.trim() || "", H = (o) => Array.from(o?.rows || []).map(
72
73
  (e, t, { length: r }) => Array.from(e.cells, (s, a) => {
73
- const d = u(e.cells[0]), c = u(o?.rows[0].cells[a]), n = u(s), m = r === 2 ? `${c}: ${n}` : `${d}: ${n}${c ? ` (${c})` : ""}`;
74
- return l(s, "tabindex", "-1"), {
75
- number: a && t && Number.parseFloat(n) || 0,
74
+ const h = m(e.cells[0]), n = m(o?.rows[0].cells[a]), c = m(s), l = r === 2 ? `${n}: ${c}` : `${h}: ${c}${n ? ` (${n})` : ""}`;
75
+ return d(s, "tabindex", "-1"), {
76
+ number: a && t && Number.parseFloat(c) || 0,
76
77
  // First row and column is not a number
77
78
  event: s.querySelector("a,button") && `${t}-${a}`,
78
79
  // Reference to proxy events
79
- style: `--color: var(--mtdsc-chart-color-${t}, var(--mtdsc-chart-color-base))`,
80
- value: n,
81
- tooltip: l(s, "data-tooltip") || m
80
+ color: `var(--mtdsc-chart-color-${t}-${a}, var(--mtdsc-chart-color-${t}, var(--mtdsc-chart-color-base)))`,
81
+ value: c,
82
+ tooltip: d(s, "data-tooltip") || l
82
83
  };
83
84
  })
84
85
  );
85
- E("mtds-chart", P);
86
+ E("mtds-chart", q);
86
87
  export {
87
- P as MTDSChartElement
88
+ q as MTDSChartElement
88
89
  };
89
90
  //# sourceMappingURL=chart-element.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"chart-element.js","sources":["../../designsystem/chart/chart-element.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n\tattr,\n\tdebounce,\n\tdefineElement,\n\tisBrowser,\n\tMTDSElement,\n\toff,\n\ton,\n\tonMutation,\n\ttag,\n} from \"../utils\";\nimport css from \"./chart.css?raw\";\nimport { toAxis } from \"./chart-axis\";\nimport { toBars } from \"./chart-bars\";\nimport { toLines } from \"./chart-lines\";\nimport { toPies } from \"./chart-pies\";\n\nexport type ChartData = ReturnType<typeof toData>;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"mtds-chart\": MTDSChartElement;\n\t}\n}\n\nconst EVENTS = \"click keydown mousemove mouseout\";\nconst TOOLTIP_ID = \"mtds-chart-tooltip\";\nconst TOOLTIP = isBrowser()\n\t? document.getElementById(TOOLTIP_ID) ||\n\t\ttag(\"div\", {\n\t\t\t\"aria-hidden\": \"true\",\n\t\t\tclass: styles._tooltip,\n\t\t\thidden: \"\",\n\t\t\tid: TOOLTIP_ID,\n\t\t})\n\t: null;\n\nexport class MTDSChartElement extends MTDSElement {\n\t#unmutate?: () => void;\n\t#unresize?: () => void;\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-variant\", \"data-aspect\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: \"open\" });\n\t}\n\tconnectedCallback() {\n\t\tconst render = debounce(() => this.attributeChangedCallback(), 100);\n\t\tconst resize = new ResizeObserver(() => this.handleResize());\n\t\tresize.observe(this);\n\t\tthis.#unresize = () => resize.disconnect();\n\t\tthis.#unmutate = onMutation(this, render, {\n\t\t\tattributeFilter: [\"data-tooltip\"],\n\t\t\tattributes: true,\n\t\t\tcharacterData: true,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t});\n\t\trequestAnimationFrame(() => this.attributeChangedCallback()); // Initial setup when children is mounted\n\t\ton(this, EVENTS, this);\n\t}\n\tdisconnectedCallback() {\n\t\tif (TOOLTIP) TOOLTIP.hidden = true;\n\t\toff(this, EVENTS, this);\n\t\tthis.#unresize?.();\n\t\tthis.#unmutate?.();\n\t\tthis.#unmutate = this.#unresize = undefined;\n\t}\n\tattributeChangedCallback() {\n\t\tconst data = toData(this.querySelector(\"table\"));\n\t\tif (!data[0]) return; // We require at least one row\n\n\t\tArray.from(this.shadowRoot?.children || []).map((el) => el.remove()); // Clear shadowRoot\n\t\tconst [variant, type] = (attr(this, \"data-variant\") || \"column\").split(\"-\");\n\t\tconst aspect = attr(this, \"data-aspect\") || undefined;\n\t\tconst 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(${Math.min(event.clientX, window.innerWidth)}px, ${event.clientY}px)`;\n\tif (tip !== TOOLTIP_TEXT) {\n\t\tif (tip) TOOLTIP.textContent = tip;\n\t\tTOOLTIP_TEXT = tip;\n\t\tTOOLTIP.hidden = !tip;\n\t}\n}\n\nconst text = (el?: Element | null) => el?.textContent?.trim() || \"\"; // Helper to get trimmed text\nconst toData = (table?: HTMLTableElement | null) =>\n\tArray.from(table?.rows || []).map((row, rowIndex, { length }) =>\n\t\tArray.from(row.cells, (cell, cellIndex) => {\n\t\t\tconst rowHeading = text(row.cells[0]);\n\t\t\tconst colHeading = text(table?.rows[0].cells[cellIndex]);\n\t\t\tconst value = text(cell);\n\t\t\tconst tooltip =\n\t\t\t\tlength === 2 // If only header and one row, use simple tooltip only showing value\n\t\t\t\t\t? `${colHeading}: ${value}`\n\t\t\t\t\t: `${rowHeading}: ${value}${colHeading ? ` (${colHeading})` : \"\"}`;\n\t\t\tattr(cell, \"tabindex\", \"-1\");\n\n\t\t\treturn {\n\t\t\t\tnumber: (cellIndex && rowIndex && Number.parseFloat(value)) || 0, // First row and column is not a number\n\t\t\t\tevent: cell.querySelector(\"a,button\") && `${rowIndex}-${cellIndex}`, // Reference to proxy events\n\t\t\t\tstyle: `--color: var(--mtdsc-chart-color-${rowIndex}, var(--mtdsc-chart-color-base))`,\n\t\t\t\tvalue,\n\t\t\t\ttooltip: attr(cell, \"data-tooltip\") || tooltip,\n\t\t\t};\n\t\t}),\n\t);\n\ndefineElement(\"mtds-chart\", MTDSChartElement);\n"],"names":["EVENTS","TOOLTIP_ID","TOOLTIP","isBrowser","tag","styles","MTDSChartElement","MTDSElement","#unmutate","#unresize","render","debounce","resize","onMutation","on","off","data","toData","el","variant","type","attr","aspect","style","css","legend","value","axis","groups","total","toAxis","toBars","toLines","toPies","onClick","steps","event","self","table","tr","td","TOOLTIP_TEXT","onMoveTooltip","tip","text","row","rowIndex","length","cell","cellIndex","rowHeading","colHeading","tooltip","defineElement"],"mappings":"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"}
1
+ {"version":3,"file":"chart-element.js","sources":["../../designsystem/chart/chart-element.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n\tattachStyle,\n\tattr,\n\tdebounce,\n\tdefineElement,\n\tisBrowser,\n\tMTDSElement,\n\toff,\n\ton,\n\tonMutation,\n\ttag,\n} from \"../utils\";\nimport css from \"./chart.css?raw\";\nimport { toAxis } from \"./chart-axis\";\nimport { toBars } from \"./chart-bars\";\nimport { toLines } from \"./chart-lines\";\nimport { toPies } from \"./chart-pies\";\n\nexport type ChartData = ReturnType<typeof toData>;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"mtds-chart\": MTDSChartElement;\n\t}\n}\n\nconst EVENTS = \"click keydown mousemove mouseout\";\nconst TOOLTIP_ID = \"mtds-chart-tooltip\";\nconst TOOLTIP = isBrowser()\n\t? document.getElementById(TOOLTIP_ID) ||\n\t\ttag(\"div\", {\n\t\t\t\"aria-hidden\": \"true\",\n\t\t\tclass: styles._tooltip,\n\t\t\thidden: \"\",\n\t\t\tid: TOOLTIP_ID,\n\t\t})\n\t: null;\n\nexport class MTDSChartElement extends MTDSElement {\n\t#unmutate?: () => void;\n\t#unresize?: () => void;\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-variant\", \"data-aspect\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: \"open\" });\n\t}\n\tconnectedCallback() {\n\t\tconst render = debounce(() => this.attributeChangedCallback(), 100);\n\t\tconst resize = new ResizeObserver(() => this.handleResize());\n\t\tresize.observe(this);\n\t\tthis.#unresize = () => resize.disconnect();\n\t\tthis.#unmutate = onMutation(this, render, {\n\t\t\tattributeFilter: [\"data-tooltip\"],\n\t\t\tattributes: true,\n\t\t\tcharacterData: true,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t});\n\t\trequestAnimationFrame(() => this.attributeChangedCallback()); // Initial setup when children is mounted\n\t\ton(this, EVENTS, this);\n\t}\n\tdisconnectedCallback() {\n\t\tif (TOOLTIP) TOOLTIP.hidden = true;\n\t\toff(this, EVENTS, this);\n\t\tthis.#unresize?.();\n\t\tthis.#unmutate?.();\n\t\tthis.#unmutate = this.#unresize = undefined;\n\t}\n\tattributeChangedCallback() {\n\t\tconst data = toData(this.querySelector(\"table\"));\n\t\tif (!data[0]) return; // We require at least one row\n\n\t\tArray.from(this.shadowRoot?.children || []).map((el) => el.remove()); // Clear shadowRoot\n\t\tconst [variant, type] = (attr(this, \"data-variant\") || \"column\").split(\"-\");\n\t\tconst aspect = attr(this, \"data-aspect\") || undefined;\n\t\tconst legend = tag(\"div\", {\n\t\t\t\"aria-hidden\": \"hidden\",\n\t\t\tclass: \"legends\",\n\t\t\trole: \"group\",\n\t\t});\n\t\tdata.slice(1).forEach(([{ value, color }]) => {\n\t\t\tconst el = tag(\"div\", { class: \"legend\" }, value);\n\t\t\tlegend.appendChild(el).style.setProperty(\"--color\", color);\n\t\t});\n\n\t\tconst { axis, groups, total } = toAxis(data, { aspect, type });\n\t\tif (variant === \"column\" || variant === \"bar\")\n\t\t\tgroups.append(...toBars(data));\n\t\tif (variant === \"line\" || variant === \"area\")\n\t\t\tgroups.append(toLines(data, { total, variant, type }));\n\t\tif (variant === \"doughnut\" || variant === \"pie\")\n\t\t\tthis.shadowRoot?.append(toPies(data, { aspect, variant }));\n\n\t\tthis.shadowRoot?.append(axis, legend); // Axis must be first\n\t\tattachStyle(this, css);\n\t}\n\thandleEvent(e: Event) {\n\t\tif (e.type === \"click\" || e.type === \"keydown\") onClick(e, this);\n\t\telse onMoveTooltip(e as MouseEvent);\n\t}\n\thandleResize() {\n\t\tconst axis = this.shadowRoot?.firstElementChild as HTMLElement | null;\n\t\tconst steps = axis?.firstElementChild as HTMLElement | null;\n\t\taxis?.classList.toggle(\"axisStepsYHalf\", (steps?.offsetHeight || 0) < 400);\n\t\taxis?.classList.toggle(\"axisStepsXHalf\", (steps?.offsetWidth || 0) < 500);\n\t}\n}\n\nfunction onClick(event: Event, self: MTDSChartElement) {\n\tif (event instanceof KeyboardEvent && event.key !== \"Enter\") return; // Only handle enter key\n\tconst el = event.composedPath()[0];\n\tconst table = self.querySelector(\"table\");\n\tconst [tr, td] =\n\t\t(el instanceof Element && attr(el, \"data-event\")?.split(\"-\").map(Number)) ||\n\t\t[];\n\n\ttable?.rows[tr]?.cells[td]?.querySelector<HTMLElement>(\"a,button\")?.click?.();\n}\n\nlet TOOLTIP_TEXT = \"\";\nfunction onMoveTooltip(event: MouseEvent) {\n\tif (!TOOLTIP) return;\n\tif (!TOOLTIP?.isConnected) document.body.append(TOOLTIP); // Ensure connected\n\n\tconst el = event.composedPath()[0];\n\tconst tip = (el instanceof Element && el.getAttribute(\"aria-label\")) || \"\";\n\n\tif (tip)\n\t\tTOOLTIP.style.transform = `translate(${Math.min(event.clientX, window.innerWidth)}px, ${event.clientY}px)`;\n\tif (tip !== TOOLTIP_TEXT) {\n\t\tif (tip) TOOLTIP.textContent = tip;\n\t\tTOOLTIP_TEXT = tip;\n\t\tTOOLTIP.hidden = !tip;\n\t}\n}\n\nconst text = (el?: Element | null) => el?.textContent?.trim() || \"\"; // Helper to get trimmed text\nconst toData = (table?: HTMLTableElement | null) =>\n\tArray.from(table?.rows || []).map((row, rowIndex, { length }) =>\n\t\tArray.from(row.cells, (cell, cellIndex) => {\n\t\t\tconst rowHeading = text(row.cells[0]);\n\t\t\tconst colHeading = text(table?.rows[0].cells[cellIndex]);\n\t\t\tconst value = text(cell);\n\t\t\tconst tooltip =\n\t\t\t\tlength === 2 // If only header and one row, use simple tooltip only showing value\n\t\t\t\t\t? `${colHeading}: ${value}`\n\t\t\t\t\t: `${rowHeading}: ${value}${colHeading ? ` (${colHeading})` : \"\"}`;\n\t\t\tattr(cell, \"tabindex\", \"-1\");\n\n\t\t\treturn {\n\t\t\t\tnumber: (cellIndex && rowIndex && Number.parseFloat(value)) || 0, // First row and column is not a number\n\t\t\t\tevent: cell.querySelector(\"a,button\") && `${rowIndex}-${cellIndex}`, // Reference to proxy events\n\t\t\t\tcolor: `var(--mtdsc-chart-color-${rowIndex}-${cellIndex}, var(--mtdsc-chart-color-${rowIndex}, var(--mtdsc-chart-color-base)))`,\n\t\t\t\tvalue,\n\t\t\t\ttooltip: attr(cell, \"data-tooltip\") || tooltip,\n\t\t\t};\n\t\t}),\n\t);\n\ndefineElement(\"mtds-chart\", MTDSChartElement);\n"],"names":["EVENTS","TOOLTIP_ID","TOOLTIP","isBrowser","tag","styles","MTDSChartElement","MTDSElement","#unmutate","#unresize","render","debounce","resize","onMutation","on","off","data","toData","el","variant","type","attr","aspect","legend","value","color","axis","groups","total","toAxis","toBars","toLines","toPies","attachStyle","css","onClick","steps","event","self","table","tr","td","TOOLTIP_TEXT","onMoveTooltip","tip","text","row","rowIndex","length","cell","cellIndex","rowHeading","colHeading","tooltip","defineElement"],"mappings":"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"}
@@ -1,42 +1,37 @@
1
- import { tag as m, attr as a } from "../utils.js";
2
- function E(e, { total: t, type: n, variant: o }) {
3
- const s = Number.parseFloat(n || "0") || 0, r = m("div", { class: "axisGroup" });
4
- return e.slice(1).forEach(([, ...l]) => {
5
- const d = m("div", {
6
- class: "lineContainer",
7
- role: "list",
8
- style: l[0].style
9
- }), h = C(
10
- l.map(({ number: c }, u, { length: $ }) => [
1
+ import { tag as m, attr as c } from "../utils.js";
2
+ function E(t, { total: e, type: n, variant: o }) {
3
+ const s = Number.parseFloat(n || "0") || 0, a = m("div", { class: "axisGroup" });
4
+ return t.slice(1).forEach(([, ...p]) => {
5
+ const i = m("div", { class: "lineContainer", role: "list" });
6
+ i.style.setProperty("--color", p[0].color);
7
+ const h = b(
8
+ p.map(({ number: r }, u, { length: $ }) => [
11
9
  100 / ($ - 1) * u,
12
- 100 - c / t * 100
10
+ 100 - r / e * 100
13
11
  ]),
14
12
  s / 100
15
- ), p = document.createElementNS("http://www.w3.org/2000/svg", "svg");
16
- a(p, "aria-hidden", "true"), a(p, "preserveAspectRatio", "none"), a(p, "viewBox", "0 0 100 100");
17
- const i = document.createElementNS("http://www.w3.org/2000/svg", "path");
18
- if (a(i, "class", "line"), a(i, "d", h), a(i, "fill", "none"), a(i, "stroke", "currentColor"), o === "area") {
19
- const c = i.cloneNode(!0);
20
- a(c, "d", `M-100,100 L${h.slice(1)}L200,100`), a(c, "class", "lineShade"), p.append(c);
13
+ ), d = document.createElementNS("http://www.w3.org/2000/svg", "svg");
14
+ c(d, "aria-hidden", "true"), c(d, "preserveAspectRatio", "none"), c(d, "viewBox", "0 0 100 100");
15
+ const l = document.createElementNS("http://www.w3.org/2000/svg", "path");
16
+ if (c(l, "class", "line"), c(l, "d", h), c(l, "fill", "none"), c(l, "stroke", "currentColor"), o === "area") {
17
+ const r = l.cloneNode(!0);
18
+ c(r, "d", `M-100,100 L${h.slice(1)}L200,100`), c(r, "class", "lineShade"), d.append(r);
21
19
  }
22
- l.forEach(({ number: c, tooltip: u, event: $ }) => {
23
- const g = m("div", { role: "listitem" });
24
- g.appendChild(
25
- m("div", {
26
- "aria-label": u,
27
- "data-event": $,
28
- tabindex: "0",
29
- class: "linePoint",
30
- role: "img",
31
- style: `--value: ${c}`
32
- })
33
- ), d.append(g);
34
- }), d.appendChild(p).append(i), r.append(d);
35
- }), r;
20
+ p.forEach(({ number: r, tooltip: u, event: $ }) => {
21
+ const g = m("div", { role: "listitem" }), v = m("div", {
22
+ "aria-label": u,
23
+ "data-event": $,
24
+ tabindex: "0",
25
+ class: "linePoint",
26
+ role: "img"
27
+ });
28
+ v.style.setProperty("--value", `${r}`), g.appendChild(v), i.append(g);
29
+ }), i.appendChild(d).append(l), a.append(i);
30
+ }), a;
36
31
  }
37
- const C = (e, t) => e.map(([n, o], s, r) => s ? b(s, r, t) : `M${n},${o}`).join(" "), v = ([e, t], [n, o]) => [e + n, t + o], w = ([e, t], [n, o]) => [e - n, t - o], f = (e, [t, n]) => [e * t, e * n], b = (e, t, n) => {
38
- const o = t[e - 1], s = t[e], [r, l] = v(o, f(n, w(s, t[e - 2] || o))), [d, h] = v(s, f(n, w(o, t[e + 1] || s)));
39
- return `C ${r},${l} ${d},${h} ${s[0]},${s[1]}`;
32
+ const b = (t, e) => t.map(([n, o], s, a) => s ? x(s, a, e) : `M${n},${o}`).join(" "), w = ([t, e], [n, o]) => [t + n, e + o], f = ([t, e], [n, o]) => [t - n, e - o], C = (t, [e, n]) => [t * e, t * n], x = (t, e, n) => {
33
+ const o = e[t - 1], s = e[t], [a, p] = w(o, C(n, f(s, e[t - 2] || o))), [i, h] = w(s, C(n, f(o, e[t + 1] || s)));
34
+ return `C ${a},${p} ${i},${h} ${s[0]},${s[1]}`;
40
35
  };
41
36
  export {
42
37
  E as toLines
@@ -1 +1 @@
1
- {"version":3,"file":"chart-lines.js","sources":["../../designsystem/chart/chart-lines.ts"],"sourcesContent":["import { attr, tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Config = {\n\ttotal: number;\n\ttype: string;\n\tvariant: string;\n};\n\nexport function toLines(data: ChartData, { total, type, variant }: Config) {\n\tconst smoothing = Number.parseFloat(type || \"0\") || 0;\n\tconst group = tag(\"div\", { class: \"axisGroup\" });\n\tdata.slice(1).forEach(([, ...values]) => {\n\t\tconst lineContainer = tag(\"div\", {\n\t\t\tclass: `lineContainer`,\n\t\t\trole: \"list\",\n\t\t\tstyle: values[0].style,\n\t\t});\n\n\t\tconst pathDefintion = toPath(\n\t\t\tvalues.map(({ number }, index, { length }) => [\n\t\t\t\t(100 / (length - 1)) * index,\n\t\t\t\t100 - (number / total) * 100,\n\t\t\t]),\n\t\t\tsmoothing / 100,\n\t\t);\n\n\t\tconst line = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n\t\tattr(line, \"aria-hidden\", \"true\");\n\t\tattr(line, \"preserveAspectRatio\", \"none\");\n\t\tattr(line, \"viewBox\", \"0 0 100 100\");\n\n\t\tconst path = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n\t\tattr(path, \"class\", \"line\");\n\t\tattr(path, \"d\", pathDefintion);\n\t\tattr(path, \"fill\", \"none\");\n\t\tattr(path, \"stroke\", \"currentColor\");\n\n\t\tif (variant === \"area\") {\n\t\t\tconst lineShade = path.cloneNode(true) as SVGPathElement;\n\t\t\tattr(lineShade, \"d\", `M-100,100 L${pathDefintion.slice(1)}L200,100`);\n\t\t\tattr(lineShade, \"class\", \"lineShade\");\n\t\t\tline.append(lineShade);\n\t\t}\n\n\t\tvalues.forEach(({ number, tooltip, event }) => {\n\t\t\tconst col = tag(\"div\", { role: \"listitem\" });\n\t\t\tcol.appendChild(\n\t\t\t\ttag(\"div\", {\n\t\t\t\t\t\"aria-label\": tooltip,\n\t\t\t\t\t\"data-event\": event,\n\t\t\t\t\ttabindex: \"0\",\n\t\t\t\t\tclass: \"linePoint\",\n\t\t\t\t\trole: \"img\",\n\t\t\t\t\tstyle: `--value: ${number}`,\n\t\t\t\t}),\n\t\t\t);\n\t\t\tlineContainer.append(col);\n\t\t});\n\n\t\tlineContainer.appendChild(line).append(path);\n\t\tgroup.append(lineContainer);\n\t});\n\treturn group;\n}\n\n// Based on https://observablehq.com/@ndry/smooth-a-svg-path-with-cubic-bezier-curves\nconst toPath = (points: number[][], s: number) =>\n\tpoints.map(([x, y], i, a) => (i ? smooth(i, a, s) : `M${x},${y}`)).join(\" \");\nconst add = ([ax, ay]: number[], [bx, by]: number[]) => [ax + bx, ay + by];\nconst sub = ([ax, ay]: number[], [bx, by]: number[]) => [ax - bx, ay - by];\nconst scale = (s: number, [x, y]: number[]) => [s * x, s * y];\nconst smooth = (i: number, all: number[][], smooth: number) => {\n\tconst start = all[i - 1];\n\tconst end = all[i];\n\tconst [csX, csY] = add(start, scale(smooth, sub(end, all[i - 2] || start))); // start control point\n\tconst [ceX, ceY] = add(end, scale(smooth, sub(start, all[i + 1] || end))); // end control point\n\treturn `C ${csX},${csY} ${ceX},${ceY} ${end[0]},${end[1]}`;\n};\n"],"names":["toLines","data","total","type","variant","smoothing","group","tag","lineContainer","values","pathDefintion","toPath","number","index","length","line","attr","path","lineShade","tooltip","event","col","points","s","x","y","i","a","smooth","add","ax","ay","bx","by","sub","scale","all","start","end","csX","csY","ceX","ceY"],"mappings":"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"}
1
+ {"version":3,"file":"chart-lines.js","sources":["../../designsystem/chart/chart-lines.ts"],"sourcesContent":["import { attr, tag } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Config = {\n\ttotal: number;\n\ttype: string;\n\tvariant: string;\n};\n\nexport function toLines(data: ChartData, { total, type, variant }: Config) {\n\tconst smoothing = Number.parseFloat(type || \"0\") || 0;\n\tconst group = tag(\"div\", { class: \"axisGroup\" });\n\tdata.slice(1).forEach(([, ...values]) => {\n\t\tconst lineContainer = tag(\"div\", { class: `lineContainer`, role: \"list\" });\n\t\tlineContainer.style.setProperty(\"--color\", values[0].color); // Use color of first column as default for line\n\n\t\tconst pathDefintion = toPath(\n\t\t\tvalues.map(({ number }, index, { length }) => [\n\t\t\t\t(100 / (length - 1)) * index,\n\t\t\t\t100 - (number / total) * 100,\n\t\t\t]),\n\t\t\tsmoothing / 100,\n\t\t);\n\n\t\tconst line = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n\t\tattr(line, \"aria-hidden\", \"true\");\n\t\tattr(line, \"preserveAspectRatio\", \"none\");\n\t\tattr(line, \"viewBox\", \"0 0 100 100\");\n\n\t\tconst path = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n\t\tattr(path, \"class\", \"line\");\n\t\tattr(path, \"d\", pathDefintion);\n\t\tattr(path, \"fill\", \"none\");\n\t\tattr(path, \"stroke\", \"currentColor\");\n\n\t\tif (variant === \"area\") {\n\t\t\tconst lineShade = path.cloneNode(true) as SVGPathElement;\n\t\t\tattr(lineShade, \"d\", `M-100,100 L${pathDefintion.slice(1)}L200,100`);\n\t\t\tattr(lineShade, \"class\", \"lineShade\");\n\t\t\tline.append(lineShade);\n\t\t}\n\n\t\tvalues.forEach(({ number, tooltip, event }) => {\n\t\t\tconst col = tag(\"div\", { role: \"listitem\" });\n\t\t\tconst point = tag(\"div\", {\n\t\t\t\t\"aria-label\": tooltip,\n\t\t\t\t\"data-event\": event,\n\t\t\t\ttabindex: \"0\",\n\t\t\t\tclass: \"linePoint\",\n\t\t\t\trole: \"img\",\n\t\t\t});\n\n\t\t\tpoint.style.setProperty(\"--value\", `${number}`); // Use color of first column as default for point\n\t\t\tcol.appendChild(point);\n\t\t\tlineContainer.append(col);\n\t\t});\n\n\t\tlineContainer.appendChild(line).append(path);\n\t\tgroup.append(lineContainer);\n\t});\n\treturn group;\n}\n\n// Based on https://observablehq.com/@ndry/smooth-a-svg-path-with-cubic-bezier-curves\nconst toPath = (points: number[][], s: number) =>\n\tpoints.map(([x, y], i, a) => (i ? smooth(i, a, s) : `M${x},${y}`)).join(\" \");\nconst add = ([ax, ay]: number[], [bx, by]: number[]) => [ax + bx, ay + by];\nconst sub = ([ax, ay]: number[], [bx, by]: number[]) => [ax - bx, ay - by];\nconst scale = (s: number, [x, y]: number[]) => [s * x, s * y];\nconst smooth = (i: number, all: number[][], smooth: number) => {\n\tconst start = all[i - 1];\n\tconst end = all[i];\n\tconst [csX, csY] = add(start, scale(smooth, sub(end, all[i - 2] || start))); // start control point\n\tconst [ceX, ceY] = add(end, scale(smooth, sub(start, all[i + 1] || end))); // end control point\n\treturn `C ${csX},${csY} ${ceX},${ceY} ${end[0]},${end[1]}`;\n};\n"],"names":["toLines","data","total","type","variant","smoothing","group","tag","lineContainer","values","pathDefintion","toPath","number","index","length","line","attr","path","lineShade","tooltip","event","col","point","points","s","x","y","i","smooth","add","ax","ay","bx","by","sub","scale","all","start","end","csX","csY","ceX","ceY"],"mappings":"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"}
@@ -1,16 +1,16 @@
1
1
  import { attr as s } from "../utils.js";
2
- function E(h, { aspect: l, variant: v }) {
3
- const o = document.createElementNS("http://www.w3.org/2000/svg", "svg");
4
- l && o.style.setProperty("--mtdsc-chart-aspect", l), s(o, "class", "pie"), s(o, "viewBox", "0 0 100 100");
5
- let a = 0;
6
- const t = 50, e = v === "doughnut" ? 25 : 0, d = h.slice(1).reduce((r, [, c]) => r + c.number, 0);
7
- return h.slice(1).forEach(([, { tooltip: r, number: c, event: x, style: y }]) => {
2
+ function E(h, { aspect: l, variant: y }) {
3
+ const n = document.createElementNS("http://www.w3.org/2000/svg", "svg");
4
+ l && n.style.setProperty("--mtdsc-chart-aspect", l), s(n, "class", "pie"), s(n, "viewBox", "0 0 100 100");
5
+ let r = 0;
6
+ const t = 50, e = y === "doughnut" ? 25 : 0, d = h.slice(1).reduce((a, [, c]) => a + c.number, 0);
7
+ return h.slice(1).forEach(([, { tooltip: a, number: c, event: v, color: x }]) => {
8
8
  if (!c) return;
9
- const n = document.createElementNS("http://www.w3.org/2000/svg", "path"), p = a / d;
10
- a += c;
11
- const m = Math.min(a / d, 0.99999), u = m - p > 0.5 ? 1 : 0, w = 2 * Math.PI * (p - 0.25), g = 2 * Math.PI * (m - 0.25), i = Math.cos(w), $ = Math.sin(w), M = Math.cos(g), f = Math.sin(g), P = `M ${t + e * i} ${t + e * $} L ${t + t * i} ${t + t * $} A ${t} ${t} 0 ${u} 1 ${t + t * M} ${t + t * f} L ${t + e * M} ${t + e * f} A ${e} ${e} 0 ${u} 0 ${t + e * i} ${t + e * $}`;
12
- s(n, "aria-label", r), s(n, "data-event", x), s(n, "style", y), s(n, "d", P), s(n, "role", "img"), s(n, "tabindex", "0"), o.appendChild(n);
13
- }), o;
9
+ const o = document.createElementNS("http://www.w3.org/2000/svg", "path"), p = r / d;
10
+ r += c;
11
+ const m = Math.min(r / d, 0.99999), u = m - p > 0.5 ? 1 : 0, w = 2 * Math.PI * (p - 0.25), g = 2 * Math.PI * (m - 0.25), i = Math.cos(w), $ = Math.sin(w), M = Math.cos(g), f = Math.sin(g), P = `M ${t + e * i} ${t + e * $} L ${t + t * i} ${t + t * $} A ${t} ${t} 0 ${u} 1 ${t + t * M} ${t + t * f} L ${t + e * M} ${t + e * f} A ${e} ${e} 0 ${u} 0 ${t + e * i} ${t + e * $}`;
12
+ o.style.setProperty("--color", x), s(o, "aria-label", a), s(o, "data-event", v), s(o, "d", P), s(o, "role", "img"), s(o, "tabindex", "0"), n.appendChild(o);
13
+ }), n;
14
14
  }
15
15
  export {
16
16
  E as toPies
@@ -1 +1 @@
1
- {"version":3,"file":"chart-pies.js","sources":["../../designsystem/chart/chart-pies.ts"],"sourcesContent":["import { attr } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Options = { aspect?: string; variant: string };\n\nexport function toPies(data: ChartData, { aspect, variant }: Options) {\n\tconst pie = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n\tif (aspect) pie.style.setProperty(\"--mtdsc-chart-aspect\", aspect);\n\tattr(pie, \"class\", \"pie\");\n\tattr(pie, \"viewBox\", \"0 0 100 100\");\n\n\tlet offset = 0;\n\tconst radius = 50;\n\tconst inner = variant === \"doughnut\" ? 25 : 0;\n\tconst total = data.slice(1).reduce((tot, [, td]) => tot + td.number, 0);\n\n\tdata.slice(1).forEach(([, { tooltip, number, event, style }]) => {\n\t\tif (!number) return; // Skip empty\n\t\tconst path = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n\t\tconst start = offset / total;\n\t\toffset += number;\n\t\tconst end = Math.min(offset / total, 0.99999); // Ensure full circle works\n\t\tconst largeArc = end - start > 0.5 ? 1 : 0;\n\t\tconst a0 = 2 * Math.PI * (start - 0.25);\n\t\tconst a1 = 2 * Math.PI * (end - 0.25);\n\t\tconst x0 = Math.cos(a0);\n\t\tconst y0 = Math.sin(a0);\n\t\tconst x1 = Math.cos(a1);\n\t\tconst y1 = Math.sin(a1);\n\t\tconst d = `M ${radius + inner * x0} ${radius + inner * y0} L ${radius + radius * x0} ${radius + radius * y0} A ${radius} ${radius} 0 ${largeArc} 1 ${radius + radius * x1} ${radius + radius * y1} L ${radius + inner * x1} ${radius + inner * y1} A ${inner} ${inner} 0 ${largeArc} 0 ${radius + inner * x0} ${radius + inner * y0}`;\n\n\t\tattr(path, \"aria-label\", tooltip);\n\t\tattr(path, \"data-event\", event);\n\t\tattr(path, \"style\", style);\n\t\tattr(path, \"d\", d);\n\t\tattr(path, \"role\", \"img\");\n\t\tattr(path, \"tabindex\", \"0\");\n\t\tpie.appendChild(path);\n\t});\n\treturn pie;\n}\n"],"names":["toPies","data","aspect","variant","pie","attr","offset","radius","inner","total","tot","td","tooltip","number","event","style","path","start","end","largeArc","a0","a1","x0","y0","x1","y1","d"],"mappings":";AAKO,SAASA,EAAOC,GAAiB,EAAE,QAAAC,GAAQ,SAAAC,KAAoB;AACrE,QAAMC,IAAM,SAAS,gBAAgB,8BAA8B,KAAK;AACxE,EAAIF,KAAQE,EAAI,MAAM,YAAY,wBAAwBF,CAAM,GAChEG,EAAKD,GAAK,SAAS,KAAK,GACxBC,EAAKD,GAAK,WAAW,aAAa;AAElC,MAAIE,IAAS;AACb,QAAMC,IAAS,IACTC,IAAQL,MAAY,aAAa,KAAK,GACtCM,IAAQR,EAAK,MAAM,CAAC,EAAE,OAAO,CAACS,GAAK,CAAA,EAAGC,CAAE,MAAMD,IAAMC,EAAG,QAAQ,CAAC;AAEtE,SAAAV,EAAK,MAAM,CAAC,EAAE,QAAQ,CAAC,GAAG,EAAE,SAAAW,GAAS,QAAAC,GAAQ,OAAAC,GAAO,OAAAC,EAAA,CAAO,MAAM;AAChE,QAAI,CAACF,EAAQ;AACb,UAAMG,IAAO,SAAS,gBAAgB,8BAA8B,MAAM,GACpEC,IAAQX,IAASG;AACvB,IAAAH,KAAUO;AACV,UAAMK,IAAM,KAAK,IAAIZ,IAASG,GAAO,OAAO,GACtCU,IAAWD,IAAMD,IAAQ,MAAM,IAAI,GACnCG,IAAK,IAAI,KAAK,MAAMH,IAAQ,OAC5BI,IAAK,IAAI,KAAK,MAAMH,IAAM,OAC1BI,IAAK,KAAK,IAAIF,CAAE,GAChBG,IAAK,KAAK,IAAIH,CAAE,GAChBI,IAAK,KAAK,IAAIH,CAAE,GAChBI,IAAK,KAAK,IAAIJ,CAAE,GAChBK,IAAI,KAAKnB,IAASC,IAAQc,CAAE,IAAIf,IAASC,IAAQe,CAAE,MAAMhB,IAASA,IAASe,CAAE,IAAIf,IAASA,IAASgB,CAAE,MAAMhB,CAAM,IAAIA,CAAM,MAAMY,CAAQ,MAAMZ,IAASA,IAASiB,CAAE,IAAIjB,IAASA,IAASkB,CAAE,MAAMlB,IAASC,IAAQgB,CAAE,IAAIjB,IAASC,IAAQiB,CAAE,MAAMjB,CAAK,IAAIA,CAAK,MAAMW,CAAQ,MAAMZ,IAASC,IAAQc,CAAE,IAAIf,IAASC,IAAQe,CAAE;AAEnU,IAAAlB,EAAKW,GAAM,cAAcJ,CAAO,GAChCP,EAAKW,GAAM,cAAcF,CAAK,GAC9BT,EAAKW,GAAM,SAASD,CAAK,GACzBV,EAAKW,GAAM,KAAKU,CAAC,GACjBrB,EAAKW,GAAM,QAAQ,KAAK,GACxBX,EAAKW,GAAM,YAAY,GAAG,GAC1BZ,EAAI,YAAYY,CAAI;AAAA,EACrB,CAAC,GACMZ;AACR;"}
1
+ {"version":3,"file":"chart-pies.js","sources":["../../designsystem/chart/chart-pies.ts"],"sourcesContent":["import { attr } from \"../utils\";\nimport type { ChartData } from \"./chart-element\";\n\ntype Options = { aspect?: string; variant: string };\n\nexport function toPies(data: ChartData, { aspect, variant }: Options) {\n\tconst pie = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n\tif (aspect) pie.style.setProperty(\"--mtdsc-chart-aspect\", aspect);\n\tattr(pie, \"class\", \"pie\");\n\tattr(pie, \"viewBox\", \"0 0 100 100\");\n\n\tlet offset = 0;\n\tconst radius = 50;\n\tconst inner = variant === \"doughnut\" ? 25 : 0;\n\tconst total = data.slice(1).reduce((tot, [, td]) => tot + td.number, 0);\n\n\tdata.slice(1).forEach(([, { tooltip, number, event, color }]) => {\n\t\tif (!number) return; // Skip empty\n\t\tconst path = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n\t\tconst start = offset / total;\n\t\toffset += number;\n\t\tconst end = Math.min(offset / total, 0.99999); // Ensure full circle works\n\t\tconst largeArc = end - start > 0.5 ? 1 : 0;\n\t\tconst a0 = 2 * Math.PI * (start - 0.25);\n\t\tconst a1 = 2 * Math.PI * (end - 0.25);\n\t\tconst x0 = Math.cos(a0);\n\t\tconst y0 = Math.sin(a0);\n\t\tconst x1 = Math.cos(a1);\n\t\tconst y1 = Math.sin(a1);\n\t\tconst d = `M ${radius + inner * x0} ${radius + inner * y0} L ${radius + radius * x0} ${radius + radius * y0} A ${radius} ${radius} 0 ${largeArc} 1 ${radius + radius * x1} ${radius + radius * y1} L ${radius + inner * x1} ${radius + inner * y1} A ${inner} ${inner} 0 ${largeArc} 0 ${radius + inner * x0} ${radius + inner * y0}`;\n\n\t\tpath.style.setProperty(\"--color\", color);\n\t\tattr(path, \"aria-label\", tooltip);\n\t\tattr(path, \"data-event\", event);\n\t\tattr(path, \"d\", d);\n\t\tattr(path, \"role\", \"img\");\n\t\tattr(path, \"tabindex\", \"0\");\n\t\tpie.appendChild(path);\n\t});\n\treturn pie;\n}\n"],"names":["toPies","data","aspect","variant","pie","attr","offset","radius","inner","total","tot","td","tooltip","number","event","color","path","start","end","largeArc","a0","a1","x0","y0","x1","y1","d"],"mappings":";AAKO,SAASA,EAAOC,GAAiB,EAAE,QAAAC,GAAQ,SAAAC,KAAoB;AACrE,QAAMC,IAAM,SAAS,gBAAgB,8BAA8B,KAAK;AACxE,EAAIF,KAAQE,EAAI,MAAM,YAAY,wBAAwBF,CAAM,GAChEG,EAAKD,GAAK,SAAS,KAAK,GACxBC,EAAKD,GAAK,WAAW,aAAa;AAElC,MAAIE,IAAS;AACb,QAAMC,IAAS,IACTC,IAAQL,MAAY,aAAa,KAAK,GACtCM,IAAQR,EAAK,MAAM,CAAC,EAAE,OAAO,CAACS,GAAK,CAAA,EAAGC,CAAE,MAAMD,IAAMC,EAAG,QAAQ,CAAC;AAEtE,SAAAV,EAAK,MAAM,CAAC,EAAE,QAAQ,CAAC,GAAG,EAAE,SAAAW,GAAS,QAAAC,GAAQ,OAAAC,GAAO,OAAAC,EAAA,CAAO,MAAM;AAChE,QAAI,CAACF,EAAQ;AACb,UAAMG,IAAO,SAAS,gBAAgB,8BAA8B,MAAM,GACpEC,IAAQX,IAASG;AACvB,IAAAH,KAAUO;AACV,UAAMK,IAAM,KAAK,IAAIZ,IAASG,GAAO,OAAO,GACtCU,IAAWD,IAAMD,IAAQ,MAAM,IAAI,GACnCG,IAAK,IAAI,KAAK,MAAMH,IAAQ,OAC5BI,IAAK,IAAI,KAAK,MAAMH,IAAM,OAC1BI,IAAK,KAAK,IAAIF,CAAE,GAChBG,IAAK,KAAK,IAAIH,CAAE,GAChBI,IAAK,KAAK,IAAIH,CAAE,GAChBI,IAAK,KAAK,IAAIJ,CAAE,GAChBK,IAAI,KAAKnB,IAASC,IAAQc,CAAE,IAAIf,IAASC,IAAQe,CAAE,MAAMhB,IAASA,IAASe,CAAE,IAAIf,IAASA,IAASgB,CAAE,MAAMhB,CAAM,IAAIA,CAAM,MAAMY,CAAQ,MAAMZ,IAASA,IAASiB,CAAE,IAAIjB,IAASA,IAASkB,CAAE,MAAMlB,IAASC,IAAQgB,CAAE,IAAIjB,IAASC,IAAQiB,CAAE,MAAMjB,CAAK,IAAIA,CAAK,MAAMW,CAAQ,MAAMZ,IAASC,IAAQc,CAAE,IAAIf,IAASC,IAAQe,CAAE;AAEnU,IAAAP,EAAK,MAAM,YAAY,WAAWD,CAAK,GACvCV,EAAKW,GAAM,cAAcJ,CAAO,GAChCP,EAAKW,GAAM,cAAcF,CAAK,GAC9BT,EAAKW,GAAM,KAAKU,CAAC,GACjBrB,EAAKW,GAAM,QAAQ,KAAK,GACxBX,EAAKW,GAAM,YAAY,GAAG,GAC1BZ,EAAI,YAAYY,CAAI;AAAA,EACrB,CAAC,GACMZ;AACR;"}
@@ -14,6 +14,7 @@ export declare const Default: Story;
14
14
  export declare const React: Story;
15
15
  export declare const Column: Story;
16
16
  export declare const ColumnSingleDataset: Story;
17
+ export declare const ColorsSingleDataset: Story;
17
18
  export declare const ColumnStacked: Story;
18
19
  export declare const Bar: Story;
19
20
  export declare const BarStacked: Story;
@@ -1,6 +1,6 @@
1
1
  import { DSFieldElement as p } from "@digdir/designsystemet-web";
2
2
  import n from "./styles.module.css.js";
3
- import { getByCSSModule as l, isBrowser as i, onHotReload as y, on as u, onMutation as S, QUICK_EVENT as E, attr as s, debounce as D } from "./utils.js";
3
+ import { getByCSSModule as l, isBrowser as i, onHotReload as y, on as u, QUICK_EVENT as S, onMutation as E, attr as s, debounce as D } from "./utils.js";
4
4
  const f = /* @__PURE__ */ new WeakSet(), a = (t) => !f.has(t) && f.add(t), o = (t, e, r) => window.dsWarnings === !1 || console.warn(
5
5
  `\x1B[1m@mattilsynet/design:\x1B[m ${t} is deprecated, please use ${e}:`,
6
6
  r
@@ -126,9 +126,9 @@ const f = /* @__PURE__ */ new WeakSet(), a = (t) => !f.has(t) && f.add(t), o = (
126
126
  y("deprecations", () => [
127
127
  G,
128
128
  // Return as cleanup function
129
- u(document, "click", U, E),
129
+ u(document, "click", U, S),
130
130
  u(document, "toggle", b, !0),
131
- S(document, W, {
131
+ E(document, W, {
132
132
  attributeFilter: [
133
133
  "class",
134
134
  "data-command",
@@ -1,4 +1,4 @@
1
- import { epsilon as k, vec as J, estimate as S, resulterrbound as T, splitter as f, sum as K } from "./util.js";
1
+ import { epsilon as k, estimate as S, resulterrbound as T, splitter as f, sum as K, vec as J } from "./util.js";
2
2
  const U = (3 + 16 * k) * k, V = (2 + 12 * k) * k, W = (9 + 64 * k) * k * k, G = J(4), L = J(8), N = J(12), O = J(16), h = J(4);
3
3
  function X(q, z, E, F, j, A, H) {
4
4
  let p, C, m, M, t, n, e, s, r, c, o, i, u, l, a, d, w, b;