@mattilsynet/design 2.2.10 → 2.11.0-canary
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.
|
@@ -5,7 +5,12 @@ import { toAxis as S } from "./chart-axis.js";
|
|
|
5
5
|
import { toBars as T } from "./chart-bars.js";
|
|
6
6
|
import { toLines as O } from "./chart-lines.js";
|
|
7
7
|
import { toPies as R } from "./chart-pies.js";
|
|
8
|
-
const u = "click,keydown,mousemove,mouseout", f = "mtds-chart-tooltip", a = v ? document.getElementById(f) || l("div", {
|
|
8
|
+
const u = "click,keydown,mousemove,mouseout", f = "mtds-chart-tooltip", a = v ? document.getElementById(f) || l("div", {
|
|
9
|
+
"aria-hidden": "true",
|
|
10
|
+
class: E._tooltip,
|
|
11
|
+
hidden: "",
|
|
12
|
+
id: f
|
|
13
|
+
}) : null;
|
|
9
14
|
class $ extends C {
|
|
10
15
|
_observer;
|
|
11
16
|
// Using underscore instead of # for backwards compatibility
|
|
@@ -32,12 +37,16 @@ class $ extends C {
|
|
|
32
37
|
}
|
|
33
38
|
attributeChangedCallback() {
|
|
34
39
|
Array.from(this.shadowRoot?.children || []).map((p) => p.remove());
|
|
35
|
-
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", {
|
|
36
|
-
|
|
37
|
-
|
|
40
|
+
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", {
|
|
41
|
+
"aria-hidden": "hidden",
|
|
42
|
+
class: "legends",
|
|
43
|
+
role: "group"
|
|
38
44
|
});
|
|
39
|
-
|
|
40
|
-
|
|
45
|
+
o.slice(1).forEach(([{ value: p, style: y }]) => {
|
|
46
|
+
n.appendChild(l("div", { class: "legend", style: y }, p));
|
|
47
|
+
});
|
|
48
|
+
const { axis: h, groups: m, total: g } = S(o, { aspect: i, type: e });
|
|
49
|
+
(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);
|
|
41
50
|
}
|
|
42
51
|
handleEvent(t) {
|
|
43
52
|
t.type === "click" || t.type === "keydown" ? x(t, this) : z(t);
|
|
@@ -1 +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\", {
|
|
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.bind(this),\n\t\t);\n\t\tthis._observer.observe(this, {\n\t\t\tattributeFilter: [\"data-tooltip\"],\n\t\t\tattributes: true,\n\t\t\tcharacterData: true,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t});\n\t\tthis.attributeChangedCallback(); // Initial setup\n\t\ton(this, EVENTS, this);\n\t}\n\tdisconnectedCallback() {\n\t\tif (TOOLTIP) TOOLTIP.hidden = true;\n\t\toff(this, EVENTS, this);\n\t\tthis._resize?.disconnect();\n\t\tthis._observer?.disconnect();\n\t\tthis._observer = this._resize = undefined;\n\t}\n\tattributeChangedCallback() {\n\t\tArray.from(this.shadowRoot?.children || []).map((el) => el.remove()); // Clear shadowRoot\n\n\t\tconst [variant, type] = (attr(this, \"data-variant\") || \"column\").split(\"-\");\n\t\tconst aspect = attr(this, \"data-aspect\") || undefined;\n\t\tconst data = toData(this.querySelector(\"table\"));\n\t\tconst style = tag(\"style\", {}, css);\n\t\tconst legend = tag(\"div\", {\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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"}
|
package/mtds/chart/chart.css.js
CHANGED
|
@@ -1 +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\\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;"}
|
|
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;"}
|