@mattilsynet/design 2.3.1 → 2.3.3
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/atlas-element.js +1 -1
- package/mtds/chart/chart-element.js +26 -24
- package/mtds/chart/chart-element.js.map +1 -1
- package/mtds/dialog/dialog-observer.js +11 -7
- package/mtds/dialog/dialog-observer.js.map +1 -1
- package/mtds/field/field-observer.js +1 -1
- package/mtds/field/field-observer.js.map +1 -1
- package/mtds/index.iife.js +10 -10
- package/mtds/index.js +15 -15
- package/mtds/index.js.map +1 -1
- package/mtds/package.json.js +1 -1
- package/mtds/styles.css +1 -1
- package/mtds/table/table-observer.d.ts +1 -1
- package/mtds/table/table-observer.js +37 -16
- package/mtds/table/table-observer.js.map +1 -1
- package/package.json +3 -3
|
@@ -5,7 +5,7 @@ import { toAxis as R } from "./chart-axis.js";
|
|
|
5
5
|
import { toBars as A } from "./chart-bars.js";
|
|
6
6
|
import { toLines as L } from "./chart-lines.js";
|
|
7
7
|
import { toPies as O } from "./chart-pies.js";
|
|
8
|
-
const u = "click,keydown,mousemove,mouseout", f = "mtds-chart-tooltip",
|
|
8
|
+
const u = "click,keydown,mousemove,mouseout", f = "mtds-chart-tooltip", i = v() ? document.getElementById(f) || c("div", {
|
|
9
9
|
"aria-hidden": "true",
|
|
10
10
|
class: C._tooltip,
|
|
11
11
|
hidden: "",
|
|
@@ -27,53 +27,55 @@ class P extends k {
|
|
|
27
27
|
}), this.attributeChangedCallback(), S(this, u, this);
|
|
28
28
|
}
|
|
29
29
|
disconnectedCallback() {
|
|
30
|
-
|
|
30
|
+
i && (i.hidden = !0), $(this, u, this), this.#e?.(), this.#t?.(), this.#t = this.#e = void 0;
|
|
31
31
|
}
|
|
32
32
|
attributeChangedCallback() {
|
|
33
|
+
const e = q(this.querySelector("table"));
|
|
34
|
+
if (!e[0]) return;
|
|
33
35
|
Array.from(this.shadowRoot?.children || []).map((p) => p.remove());
|
|
34
|
-
const [t,
|
|
36
|
+
const [t, s] = (d(this, "data-variant") || "column").split("-"), a = d(this, "data-aspect") || void 0, n = c("style", {}, x), r = c("div", {
|
|
35
37
|
"aria-hidden": "hidden",
|
|
36
38
|
class: "legends",
|
|
37
39
|
role: "group"
|
|
38
40
|
});
|
|
39
|
-
|
|
41
|
+
e.slice(1).forEach(([{ value: p, style: g }]) => {
|
|
40
42
|
r.appendChild(c("div", { class: "legend", style: g }, p));
|
|
41
43
|
});
|
|
42
|
-
const { axis: h, groups: m, total: y } = R(
|
|
43
|
-
(t === "column" || t === "bar") && m.append(...A(
|
|
44
|
+
const { axis: h, groups: m, total: y } = R(e, { aspect: a, type: s });
|
|
45
|
+
(t === "column" || t === "bar") && m.append(...A(e)), (t === "line" || t === "area") && m.append(L(e, { total: y, variant: t, type: s })), (t === "doughnut" || t === "pie") && this.shadowRoot?.append(O(e, { aspect: a, variant: t })), this.shadowRoot?.append(h, r, n);
|
|
44
46
|
}
|
|
45
|
-
handleEvent(
|
|
46
|
-
|
|
47
|
+
handleEvent(e) {
|
|
48
|
+
e.type === "click" || e.type === "keydown" ? H(e, this) : M(e);
|
|
47
49
|
}
|
|
48
50
|
handleResize() {
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
+
const e = this.shadowRoot?.firstElementChild, t = e?.firstElementChild;
|
|
52
|
+
e?.classList.toggle("axisStepsYHalf", (t?.offsetHeight || 0) < 400), e?.classList.toggle("axisStepsXHalf", (t?.offsetWidth || 0) < 500);
|
|
51
53
|
}
|
|
52
54
|
}
|
|
53
|
-
function H(o,
|
|
55
|
+
function H(o, e) {
|
|
54
56
|
if (o instanceof KeyboardEvent && o.key !== "Enter") return;
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
+
const t = o.composedPath()[0], s = e.querySelector("table"), [a, n] = t instanceof Element && d(t, "data-event")?.split("-").map(Number) || [];
|
|
58
|
+
s?.rows[a]?.cells[n]?.querySelector("a,button")?.click?.();
|
|
57
59
|
}
|
|
58
60
|
let b = "";
|
|
59
61
|
function M(o) {
|
|
60
|
-
if (!
|
|
61
|
-
|
|
62
|
-
const
|
|
63
|
-
|
|
62
|
+
if (!i) return;
|
|
63
|
+
i?.isConnected || document.body.append(i);
|
|
64
|
+
const e = o.composedPath()[0], t = e instanceof Element && e.getAttribute("aria-label") || "";
|
|
65
|
+
t && (i.style.transform = `translate(${Math.min(o.clientX, window.innerWidth - i.clientWidth - 10)}px, ${o.clientY}px)`), t !== b && (t && (i.textContent = t), b = t, i.hidden = !t);
|
|
64
66
|
}
|
|
65
67
|
const l = (o) => o?.textContent?.trim() || "", q = (o) => Array.from(
|
|
66
68
|
o?.rows || [],
|
|
67
|
-
(
|
|
68
|
-
const n = l(
|
|
69
|
+
(e, t) => Array.from(e.cells, (s, a) => {
|
|
70
|
+
const n = l(e.cells[0]), r = l(o?.rows[0].cells[a]), h = `${n}: ${l(s)}${r ? ` (${r})` : ""}`;
|
|
69
71
|
return {
|
|
70
|
-
number:
|
|
72
|
+
number: a && t && Number.parseFloat(l(s)) || 0,
|
|
71
73
|
// First row and column is not a number
|
|
72
|
-
event:
|
|
74
|
+
event: s.querySelector("a,button") && `${t}-${a}`,
|
|
73
75
|
// Reference to proxy events
|
|
74
|
-
style: `--color: var(--mtdsc-chart-color-${
|
|
75
|
-
value: l(
|
|
76
|
-
tooltip: d(
|
|
76
|
+
style: `--color: var(--mtdsc-chart-color-${t}, var(--mtdsc-chart-color-base))`,
|
|
77
|
+
value: l(s),
|
|
78
|
+
tooltip: d(s, "data-tooltip") || h
|
|
77
79
|
};
|
|
78
80
|
})
|
|
79
81
|
);
|
|
@@ -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\tdefineElement,\n\tisBrowser,\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\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\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\
|
|
1
|
+
{"version":3,"file":"chart-element.js","sources":["../../designsystem/chart/chart-element.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n\tattr,\n\tdefineElement,\n\tisBrowser,\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\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\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\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 - TOOLTIP.clientWidth - 10)}px, ${event.clientY}px)`;\n\tif (tip !== TOOLTIP_TEXT) {\n\t\tif (tip) TOOLTIP.textContent = tip;\n\t\tTOOLTIP_TEXT = tip;\n\t\tTOOLTIP.hidden = !tip;\n\t}\n}\n\nconst text = (el?: Element | null) => el?.textContent?.trim() || \"\"; // Helper to get trimmed text\nconst toData = (table?: HTMLTableElement | null) =>\n\tArray.from(table?.rows || [], (row, rowIndex) =>\n\t\tArray.from(row.cells, (cell, cellIndex) => {\n\t\t\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\ndefineElement(\"mtds-chart\", MTDSChartElement);\n"],"names":["EVENTS","TOOLTIP_ID","TOOLTIP","isBrowser","tag","styles","MTDSChartElement","MTDSElement","#unmutate","#unresize","onResize","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","cell","cellIndex","rowHeading","colHeading","tooltip","defineElement"],"mappings":"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"}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import l from "../styles.module.css.js";
|
|
2
|
-
import { isBrowser as m, onLoaded as s, on as i, onMutation as
|
|
2
|
+
import { isBrowser as m, onLoaded as s, on as i, onMutation as d, QUICK_EVENT as r, deprecate as e, attr as t } from "../utils.js";
|
|
3
3
|
const f = l.dialog.split(" ")[0], c = m() ? document.getElementsByClassName(
|
|
4
4
|
f
|
|
5
5
|
) : [];
|
|
6
6
|
function p() {
|
|
7
7
|
for (const o of c)
|
|
8
|
-
if (o.getAttribute("data-variant") === "drawer" &&
|
|
8
|
+
if (o.getAttribute("data-variant") === "drawer" && e(
|
|
9
9
|
'<dialog data-variant="drawer">',
|
|
10
10
|
'<dialog data-placement="center|left|right|top|bottom">',
|
|
11
11
|
o
|
|
12
12
|
), o.isConnected && o.showModal && o.close) {
|
|
13
13
|
const a = t(o, "data-closedby");
|
|
14
|
-
a && (t(o, "closedby", a),
|
|
14
|
+
a && (t(o, "closedby", a), e(
|
|
15
15
|
`<dialog data-closedby="${a}">`,
|
|
16
16
|
`<dialog closedby="${a}">`,
|
|
17
17
|
o
|
|
18
|
-
)), o.matches('[open]:not([data-modal="false"]):not(:modal)') ? (
|
|
18
|
+
)), o.matches('[open]:not([data-modal="false"]):not(:modal)') ? (e(
|
|
19
19
|
'<dialog data-modal="true">',
|
|
20
20
|
'.showModal() or <button command="show-modal" commandfor="DIALOG-ID"></button>'
|
|
21
21
|
), t(o, "open", null), o.showModal()) : o.matches(":modal:not([open])") && (t(o, "open", ""), o.close());
|
|
@@ -30,7 +30,11 @@ function u() {
|
|
|
30
30
|
document.querySelectorAll("[data-command").forEach((o) => {
|
|
31
31
|
if (n.has(o)) return;
|
|
32
32
|
const a = t(o, "data-command");
|
|
33
|
-
n.add(o),
|
|
33
|
+
n.add(o), a === "row" ? e(
|
|
34
|
+
`<${o.nodeName.toLowerCase()} data-command="${a}">`,
|
|
35
|
+
`<tr data-clickdelegatefor="${o.nodeName}-ID">`,
|
|
36
|
+
o
|
|
37
|
+
) : e(
|
|
34
38
|
`<button data-command="${a}">`,
|
|
35
39
|
`<button command="${a?.replace("toggle-app-expanded", "show-modal")}" commandfor="TARGET-ID">`,
|
|
36
40
|
o
|
|
@@ -39,7 +43,7 @@ function u() {
|
|
|
39
43
|
}
|
|
40
44
|
s(() => [
|
|
41
45
|
i(document, "click", g, r),
|
|
42
|
-
|
|
43
|
-
|
|
46
|
+
d(p, ["open", "data-drawer"]),
|
|
47
|
+
d(u, "data-command")
|
|
44
48
|
]);
|
|
45
49
|
//# sourceMappingURL=dialog-observer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog-observer.js","sources":["../../designsystem/dialog/dialog-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n\tattr,\n\tdeprecate,\n\tisBrowser,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tQUICK_EVENT,\n} from \"../utils\";\n\nconst CSS_DIALOG = styles.dialog.split(\" \")[0];\nconst DIALOGS = isBrowser()\n\t? (document.getElementsByClassName(\n\t\t\tCSS_DIALOG,\n\t\t) as HTMLCollectionOf<HTMLDialogElement>)\n\t: [];\n\nfunction handleDialogModal() {\n\tfor (const dialog of DIALOGS) {\n\t\tif (dialog.getAttribute(\"data-variant\") === \"drawer\")\n\t\t\tdeprecate(\n\t\t\t\t'<dialog data-variant=\"drawer\">',\n\t\t\t\t'<dialog data-placement=\"center|left|right|top|bottom\">',\n\t\t\t\tdialog,\n\t\t\t);\n\t\tif (dialog.isConnected && dialog.showModal && dialog.close) {\n\t\t\tconst closedby = attr(dialog, \"data-closedby\");\n\t\t\tif (closedby) {\n\t\t\t\tattr(dialog, \"closedby\", closedby);\n\t\t\t\tdeprecate(\n\t\t\t\t\t`<dialog data-closedby=\"${closedby}\">`,\n\t\t\t\t\t`<dialog closedby=\"${closedby}\">`,\n\t\t\t\t\tdialog,\n\t\t\t\t);\n\t\t\t}\n\t\t\tif (dialog.matches('[open]:not([data-modal=\"false\"]):not(:modal)')) {\n\t\t\t\tdeprecate(\n\t\t\t\t\t'<dialog data-modal=\"true\">',\n\t\t\t\t\t'.showModal() or <button command=\"show-modal\" commandfor=\"DIALOG-ID\"></button>',\n\t\t\t\t);\n\t\t\t\tattr(dialog, \"open\", null); // Using attribute instead of .close to avoid `close` event\n\t\t\t\tdialog.showModal();\n\t\t\t} else if (dialog.matches(\":modal:not([open])\")) {\n\t\t\t\tattr(dialog, \"open\", \"\"); // Set as open\n\t\t\t\tdialog.close(); // So we correctly can call .close, removing <dialog> from #top-layer\n\t\t\t}\n\t\t}\n\t}\n}\n\nfunction handleDialogCloseClick({ target: el }: Event) {\n\tfor (const dialog of DIALOGS)\n\t\tif (dialog.open && dialog.contains(el as Node)) {\n\t\t\tif ((el as Element)?.closest?.('[data-command=\"close\"]')) dialog.close();\n\t\t}\n}\n\nconst deprecations = new WeakSet();\nfunction handleCommandDepreactions() {\n\tdocument.querySelectorAll(\"[data-command\").forEach((el) => {\n\t\tif (deprecations.has(el)) return;\n\t\tconst command = attr(el, \"data-command\");\n\t\tdeprecations.add(el);\n\t\tdeprecate(\n\t\t\t`<button data-command=\"${command}\">`,\n\t\t\t`<button command=\"${command?.replace(\"toggle-app-expanded\", \"show-modal\")}\" commandfor=\"TARGET-ID\">`,\n\t\t\tel,\n\t\t);\n\t});\n}\n\nonLoaded(() => [\n\ton(document, \"click\", handleDialogCloseClick, QUICK_EVENT),\n\tonMutation(handleDialogModal, [\"open\", \"data-drawer\"]),\n\tonMutation(handleCommandDepreactions, \"data-command\"),\n]);\n"],"names":["CSS_DIALOG","styles","DIALOGS","isBrowser","handleDialogModal","dialog","deprecate","closedby","attr","handleDialogCloseClick","el","deprecations","handleCommandDepreactions","command","onLoaded","on","QUICK_EVENT","onMutation"],"mappings":";;AAWA,MAAMA,IAAaC,EAAO,OAAO,MAAM,GAAG,EAAE,CAAC,GACvCC,IAAUC,MACZ,SAAS;AAAA,EACVH;AACD,IACC,CAAA;AAEH,SAASI,IAAoB;AAC5B,aAAWC,KAAUH;AAOpB,QANIG,EAAO,aAAa,cAAc,MAAM,YAC3CC;AAAA,MACC;AAAA,MACA;AAAA,MACAD;AAAA,IAAA,GAEEA,EAAO,eAAeA,EAAO,aAAaA,EAAO,OAAO;AAC3D,YAAME,IAAWC,EAAKH,GAAQ,eAAe;AAC7C,MAAIE,MACHC,EAAKH,GAAQ,YAAYE,CAAQ,GACjCD;AAAA,QACC,0BAA0BC,CAAQ;AAAA,QAClC,qBAAqBA,CAAQ;AAAA,QAC7BF;AAAA,MAAA,IAGEA,EAAO,QAAQ,8CAA8C,KAChEC;AAAA,QACC;AAAA,QACA;AAAA,MAAA,GAEDE,EAAKH,GAAQ,QAAQ,IAAI,GACzBA,EAAO,UAAA,KACGA,EAAO,QAAQ,oBAAoB,MAC7CG,EAAKH,GAAQ,QAAQ,EAAE,GACvBA,EAAO,MAAA;AAAA,IAET;AAEF;AAEA,SAASI,EAAuB,EAAE,QAAQC,KAAa;AACtD,aAAWL,KAAUH;AACpB,IAAIG,EAAO,QAAQA,EAAO,SAASK,CAAU,KACvCA,GAAgB,UAAU,wBAAwB,OAAU,MAAA;AAEpE;AAEA,MAAMC,wBAAmB,QAAA;AACzB,SAASC,IAA4B;AACpC,WAAS,iBAAiB,eAAe,EAAE,QAAQ,CAACF,MAAO;AAC1D,QAAIC,EAAa,IAAID,CAAE,EAAG;AAC1B,UAAMG,IAAUL,EAAKE,GAAI,cAAc;AACvC,IAAAC,EAAa,IAAID,CAAE,
|
|
1
|
+
{"version":3,"file":"dialog-observer.js","sources":["../../designsystem/dialog/dialog-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n\tattr,\n\tdeprecate,\n\tisBrowser,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tQUICK_EVENT,\n} from \"../utils\";\n\nconst CSS_DIALOG = styles.dialog.split(\" \")[0];\nconst DIALOGS = isBrowser()\n\t? (document.getElementsByClassName(\n\t\t\tCSS_DIALOG,\n\t\t) as HTMLCollectionOf<HTMLDialogElement>)\n\t: [];\n\nfunction handleDialogModal() {\n\tfor (const dialog of DIALOGS) {\n\t\tif (dialog.getAttribute(\"data-variant\") === \"drawer\")\n\t\t\tdeprecate(\n\t\t\t\t'<dialog data-variant=\"drawer\">',\n\t\t\t\t'<dialog data-placement=\"center|left|right|top|bottom\">',\n\t\t\t\tdialog,\n\t\t\t);\n\t\tif (dialog.isConnected && dialog.showModal && dialog.close) {\n\t\t\tconst closedby = attr(dialog, \"data-closedby\");\n\t\t\tif (closedby) {\n\t\t\t\tattr(dialog, \"closedby\", closedby);\n\t\t\t\tdeprecate(\n\t\t\t\t\t`<dialog data-closedby=\"${closedby}\">`,\n\t\t\t\t\t`<dialog closedby=\"${closedby}\">`,\n\t\t\t\t\tdialog,\n\t\t\t\t);\n\t\t\t}\n\t\t\tif (dialog.matches('[open]:not([data-modal=\"false\"]):not(:modal)')) {\n\t\t\t\tdeprecate(\n\t\t\t\t\t'<dialog data-modal=\"true\">',\n\t\t\t\t\t'.showModal() or <button command=\"show-modal\" commandfor=\"DIALOG-ID\"></button>',\n\t\t\t\t);\n\t\t\t\tattr(dialog, \"open\", null); // Using attribute instead of .close to avoid `close` event\n\t\t\t\tdialog.showModal();\n\t\t\t} else if (dialog.matches(\":modal:not([open])\")) {\n\t\t\t\tattr(dialog, \"open\", \"\"); // Set as open\n\t\t\t\tdialog.close(); // So we correctly can call .close, removing <dialog> from #top-layer\n\t\t\t}\n\t\t}\n\t}\n}\n\nfunction handleDialogCloseClick({ target: el }: Event) {\n\tfor (const dialog of DIALOGS)\n\t\tif (dialog.open && dialog.contains(el as Node)) {\n\t\t\tif ((el as Element)?.closest?.('[data-command=\"close\"]')) dialog.close();\n\t\t}\n}\n\nconst deprecations = new WeakSet();\nfunction handleCommandDepreactions() {\n\tdocument.querySelectorAll(\"[data-command\").forEach((el) => {\n\t\tif (deprecations.has(el)) return;\n\t\tconst command = attr(el, \"data-command\");\n\t\tdeprecations.add(el);\n\n\t\tif (command === \"row\")\n\t\t\tdeprecate(\n\t\t\t\t`<${el.nodeName.toLowerCase()} data-command=\"${command}\">`,\n\t\t\t\t`<tr data-clickdelegatefor=\"${el.nodeName}-ID\">`,\n\t\t\t\tel,\n\t\t\t);\n\t\telse\n\t\t\tdeprecate(\n\t\t\t\t`<button data-command=\"${command}\">`,\n\t\t\t\t`<button command=\"${command?.replace(\"toggle-app-expanded\", \"show-modal\")}\" commandfor=\"TARGET-ID\">`,\n\t\t\t\tel,\n\t\t\t);\n\t});\n}\n\nonLoaded(() => [\n\ton(document, \"click\", handleDialogCloseClick, QUICK_EVENT),\n\tonMutation(handleDialogModal, [\"open\", \"data-drawer\"]),\n\tonMutation(handleCommandDepreactions, \"data-command\"),\n]);\n"],"names":["CSS_DIALOG","styles","DIALOGS","isBrowser","handleDialogModal","dialog","deprecate","closedby","attr","handleDialogCloseClick","el","deprecations","handleCommandDepreactions","command","onLoaded","on","QUICK_EVENT","onMutation"],"mappings":";;AAWA,MAAMA,IAAaC,EAAO,OAAO,MAAM,GAAG,EAAE,CAAC,GACvCC,IAAUC,MACZ,SAAS;AAAA,EACVH;AACD,IACC,CAAA;AAEH,SAASI,IAAoB;AAC5B,aAAWC,KAAUH;AAOpB,QANIG,EAAO,aAAa,cAAc,MAAM,YAC3CC;AAAA,MACC;AAAA,MACA;AAAA,MACAD;AAAA,IAAA,GAEEA,EAAO,eAAeA,EAAO,aAAaA,EAAO,OAAO;AAC3D,YAAME,IAAWC,EAAKH,GAAQ,eAAe;AAC7C,MAAIE,MACHC,EAAKH,GAAQ,YAAYE,CAAQ,GACjCD;AAAA,QACC,0BAA0BC,CAAQ;AAAA,QAClC,qBAAqBA,CAAQ;AAAA,QAC7BF;AAAA,MAAA,IAGEA,EAAO,QAAQ,8CAA8C,KAChEC;AAAA,QACC;AAAA,QACA;AAAA,MAAA,GAEDE,EAAKH,GAAQ,QAAQ,IAAI,GACzBA,EAAO,UAAA,KACGA,EAAO,QAAQ,oBAAoB,MAC7CG,EAAKH,GAAQ,QAAQ,EAAE,GACvBA,EAAO,MAAA;AAAA,IAET;AAEF;AAEA,SAASI,EAAuB,EAAE,QAAQC,KAAa;AACtD,aAAWL,KAAUH;AACpB,IAAIG,EAAO,QAAQA,EAAO,SAASK,CAAU,KACvCA,GAAgB,UAAU,wBAAwB,OAAU,MAAA;AAEpE;AAEA,MAAMC,wBAAmB,QAAA;AACzB,SAASC,IAA4B;AACpC,WAAS,iBAAiB,eAAe,EAAE,QAAQ,CAACF,MAAO;AAC1D,QAAIC,EAAa,IAAID,CAAE,EAAG;AAC1B,UAAMG,IAAUL,EAAKE,GAAI,cAAc;AACvC,IAAAC,EAAa,IAAID,CAAE,GAEfG,MAAY,QACfP;AAAA,MACC,IAAII,EAAG,SAAS,YAAA,CAAa,kBAAkBG,CAAO;AAAA,MACtD,8BAA8BH,EAAG,QAAQ;AAAA,MACzCA;AAAA,IAAA,IAGDJ;AAAA,MACC,yBAAyBO,CAAO;AAAA,MAChC,oBAAoBA,GAAS,QAAQ,uBAAuB,YAAY,CAAC;AAAA,MACzEH;AAAA,IAAA;AAAA,EAEH,CAAC;AACF;AAEAI,EAAS,MAAM;AAAA,EACdC,EAAG,UAAU,SAASN,GAAwBO,CAAW;AAAA,EACzDC,EAAWb,GAAmB,CAAC,QAAQ,aAAa,CAAC;AAAA,EACrDa,EAAWL,GAA2B,cAAc;AACrD,CAAC;"}
|
|
@@ -9,7 +9,7 @@ function H() {
|
|
|
9
9
|
const n = [], i = [];
|
|
10
10
|
let e = null, s = null, l = !0;
|
|
11
11
|
for (const o of t.getElementsByTagName("*"))
|
|
12
|
-
o instanceof HTMLLabelElement ? n.push(o) : o instanceof L ? e = o : b(o) && !o.hidden ? s = o : o.hasAttribute("data-description") ? i.push(o) : o.classList.contains(M) ? (l = a(o, "data-color") === "success" || !o.clientHeight, i.unshift(o)) : o instanceof HTMLParagraphElement && (i.some((d) => d.contains(o)) || i.push(o));
|
|
12
|
+
o instanceof HTMLLabelElement ? n.push(o) : o instanceof L ? e = o : b(o) && !o.hidden ? s = o : o.hasAttribute("data-description") ? i.push(o) : o.classList.contains(M) ? (l = a(o, "data-color") === "success" || !o.clientHeight, i.unshift(o)) : o instanceof HTMLParagraphElement && !o.closest("[popover]") && (i.some((d) => d.contains(o)) || i.push(o));
|
|
13
13
|
if (s) {
|
|
14
14
|
for (const o of n) o.htmlFor = f(s);
|
|
15
15
|
F(e), h(s), a(s, "aria-describedby", i.map(f).join(" ")), a(s, "aria-invalid", `${!l}`);
|
|
@@ -1 +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\tisBrowser,\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 = isBrowser() ? document.getElementsByClassName(CSS_FIELD) : [];\n\nfunction handleFieldMutation() {\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 (
|
|
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\tisBrowser,\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 = isBrowser() ? document.getElementsByClassName(CSS_FIELD) : [];\n\nfunction handleFieldMutation() {\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 (\n\t\t\t\t\tel instanceof HTMLParagraphElement &&\n\t\t\t\t\t!el.closest(\"[popover]\")\n\t\t\t\t)\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\trenderCombobox(combobox);\n\t\t\t\trenderCounter(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}\n\n// iOS does not support field-sizing: content, so we need to manually resize\nfunction handleTextareaFieldSizingIOS({ target: el }: Event) {\n\tif (el instanceof HTMLTextAreaElement) {\n\t\tel.style.setProperty(\"--_mtds-field-sizing\", \"auto\");\n\t\tel.style.setProperty(\"--_mtds-field-sizing\", `${el.scrollHeight}px`);\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\t\tconst label = `${(nextInvalid ? over : under).replace(\"%d\", `${Math.abs(remainder)}`)}`;\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\tattr(el, \"aria-label\", label);\n\t}\n}\n\nfunction handleFieldComboboxToggle({\n\ttarget: el,\n\tnewState,\n}: 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)) renderCounter(event.target);\n}\n\nonLoaded(() => [\n\tonMutation(handleFieldMutation, \"class\"),\n\ton(document, \"input\", handleFieldInput, QUICK_EVENT),\n\ton(document, \"toggle\", handleFieldComboboxToggle, QUICK_EVENT), // Use capture since toggle does not bubble\n\ton(document, \"input\", handleTextareaFieldSizingIOS, QUICK_EVENT),\n]);\n"],"names":["CSS_FIELD","styles","CSS_VALIDATIONS","CSS_VALIDATION","FIELDS","isBrowser","handleFieldMutation","field","labels","descriptions","combobox","input","valid","el","UHTMLComboboxElement","isInputLike","attr","desc","label","useId","renderCombobox","renderCounter","handleTextareaFieldSizingIOS","getText","style","key","control","list","limit","remainder","nextInvalid","prevInvalid","over","under","css","handleFieldComboboxToggle","newState","UHTMLDataListElement","anchor","anchorPosition","availableHeight","handleFieldInput","event","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}
|