@mattilsynet/design 1.3.6 → 1.3.7
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/app/app-observer.js +23 -28
- package/mtds/app/app-observer.js.map +1 -1
- package/mtds/app/app-toggle.js +10 -26
- package/mtds/app/app-toggle.js.map +1 -1
- package/mtds/app/app-toggle2.js +26 -14
- package/mtds/app/app-toggle2.js.map +1 -1
- package/mtds/app/app.js +1 -1
- package/mtds/dialog/dialog-observer.js +14 -15
- package/mtds/dialog/dialog-observer.js.map +1 -1
- package/mtds/errorsummary/errorsummary-observer.js +7 -8
- package/mtds/errorsummary/errorsummary-observer.js.map +1 -1
- package/mtds/external/@u-elements/u-combobox/dist/u-combobox.js +146 -132
- package/mtds/external/@u-elements/u-combobox/dist/u-combobox.js.map +1 -1
- package/mtds/external/@u-elements/u-datalist/dist/u-datalist.js +80 -79
- package/mtds/external/@u-elements/u-datalist/dist/u-datalist.js.map +1 -1
- package/mtds/external/@u-elements/u-details/dist/u-details.js +1 -1
- package/mtds/external/@u-elements/u-details/dist/u-details.js.map +1 -1
- package/mtds/external/@u-elements/u-progress/dist/u-progress.js +2 -2
- package/mtds/external/@u-elements/u-progress/dist/u-progress.js.map +1 -1
- package/mtds/external/@u-elements/u-tabs/dist/u-tabs.js +3 -3
- package/mtds/external/@u-elements/u-tabs/dist/u-tabs.js.map +1 -1
- package/mtds/field/field-observer.js +29 -34
- package/mtds/field/field-observer.js.map +1 -1
- package/mtds/field/field.d.ts +3 -0
- package/mtds/field/field.js +45 -45
- package/mtds/field/field.js.map +1 -1
- package/mtds/field/field.stories.d.ts +2 -1
- package/mtds/fieldset/fieldset-observer.js +10 -11
- package/mtds/fieldset/fieldset-observer.js.map +1 -1
- package/mtds/illustrations/index.json +17 -0
- package/mtds/illustrations/person-alert.svg +1 -0
- package/mtds/index.iife.js +7 -7
- package/mtds/logo/logo-observer.js +9 -9
- package/mtds/logo/logo-observer.js.map +1 -1
- package/mtds/package.json.js +1 -1
- package/mtds/popover/popover-observer.js +15 -17
- package/mtds/popover/popover-observer.js.map +1 -1
- package/mtds/popover/popover.d.ts +2 -1
- package/mtds/popover/popover.js.map +1 -1
- package/mtds/styles.css +1 -1
- package/mtds/styles.json +20 -20
- package/mtds/styles.module.css.js +88 -86
- package/mtds/styles.module.css.js.map +1 -1
- package/mtds/togglegroup/togglegroup-observer.js +9 -10
- package/mtds/togglegroup/togglegroup-observer.js.map +1 -1
- package/mtds/tooltip/tooltip-observer.js +20 -21
- package/mtds/tooltip/tooltip-observer.js.map +1 -1
- package/mtds/utils.d.ts +13 -0
- package/mtds/utils.js +68 -64
- package/mtds/utils.js.map +1 -1
- package/package.json +17 -15
- package/mtds/helptext/helptext-observer.d.ts +0 -1
- package/mtds/steps/steps-observer.d.ts +0 -1
package/mtds/app/app-observer.js
CHANGED
|
@@ -1,42 +1,37 @@
|
|
|
1
1
|
import m from "../styles.module.css.js";
|
|
2
|
-
import { onLoaded as
|
|
3
|
-
import "./app-
|
|
4
|
-
const f = m.app.split(" ")[0],
|
|
5
|
-
document.startViewTransition ? document.startViewTransition(
|
|
6
|
-
},
|
|
2
|
+
import { onLoaded as T, onMutation as w, on as r, QUICK_EVENT as p, debounce as _ } from "../utils.js";
|
|
3
|
+
import "./app-toggle.js";
|
|
4
|
+
const f = m.app.split(" ")[0], P = m.sticky.split(" ")[0], E = '[data-command="toggle-app-expanded"]', g = `.${f} > dialog,.${f} dialog ~ main`, S = (e) => {
|
|
5
|
+
document.startViewTransition ? document.startViewTransition(e) : e();
|
|
6
|
+
}, h = (e) => (
|
|
7
7
|
// @ts-expect-error window.mtdsAppToggle comes from app-toggle.js
|
|
8
|
-
S(() =>
|
|
9
|
-
var i;
|
|
10
|
-
return (i = window.mtdsToggleAppExpanded) == null ? void 0 : i.call(window, t);
|
|
11
|
-
})
|
|
8
|
+
S(() => window.mtdsToggleAppExpanded?.(e))
|
|
12
9
|
);
|
|
13
|
-
function
|
|
14
|
-
if (!(
|
|
15
|
-
if (getComputedStyle(
|
|
10
|
+
function I({ target: e, defaultPrevented: s }) {
|
|
11
|
+
if (!(s || !(e instanceof HTMLButtonElement) || !e.matches(E))) {
|
|
12
|
+
if (getComputedStyle(e).position === "sticky") return h();
|
|
16
13
|
S(() => {
|
|
17
|
-
const
|
|
18
|
-
|
|
14
|
+
const y = document.querySelector(g);
|
|
15
|
+
y?.setAttribute("data-closedby", "any"), y?.showModal();
|
|
19
16
|
});
|
|
20
17
|
}
|
|
21
18
|
}
|
|
22
|
-
function
|
|
23
|
-
|
|
24
|
-
(t = document.querySelector(g)) == null || t.close();
|
|
19
|
+
function x() {
|
|
20
|
+
document.querySelector(g)?.close();
|
|
25
21
|
}
|
|
26
|
-
let d = 0,
|
|
27
|
-
function H([
|
|
28
|
-
|
|
22
|
+
let d = 0, i, o = 0, t, c = 0, l = 0, a = !1, u = 0, n = 0;
|
|
23
|
+
function H([e]) {
|
|
24
|
+
t = e, C();
|
|
29
25
|
}
|
|
30
|
-
function
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
s = t, i !== l && (d = (((o = e.parentElement) == null ? void 0 : o.getBoundingClientRect().top) || 0) + s, l = i, a = e.offsetHeight, r = e.getBoundingClientRect().top + s, u = e.offsetHeight <= window.innerHeight, y = window.innerHeight), !(n === -1 && u) && (n !== -1 && (u || l && s <= r) ? (e.style.setProperty("--pos", "sticky"), e.style.setProperty("--top", "0px"), n = -1) : n === -1 && !l ? (e.style.setProperty("--pos", "relative"), e.style.setProperty("--top", `${Math.max(0, s - d)}px`), n = 0) : n !== 1 && !l && s + y >= r + a ? (e.style.setProperty("--pos", "sticky"), e.style.setProperty("--top", `${y - a}px`), n = 1) : n === 1 && l && (e.style.setProperty("--pos", "relative"), e.style.setProperty("--top", `${r - d}px`), n = 0));
|
|
26
|
+
function C() {
|
|
27
|
+
if (!t?.isConnected) return;
|
|
28
|
+
const e = window.scrollY, s = e < n;
|
|
29
|
+
n = e, s !== i && (d = (t.parentElement?.getBoundingClientRect().top || 0) + n, i = s, c = t.offsetHeight, l = t.getBoundingClientRect().top + n, a = t.offsetHeight <= window.innerHeight, u = window.innerHeight), !(o === -1 && a) && (o !== -1 && (a || i && n <= l) ? (t.style.setProperty("--pos", "sticky"), t.style.setProperty("--top", "0px"), o = -1) : o === -1 && !i ? (t.style.setProperty("--pos", "relative"), t.style.setProperty("--top", `${Math.max(0, n - d)}px`), o = 0) : o !== 1 && !i && n + u >= l + c ? (t.style.setProperty("--pos", "sticky"), t.style.setProperty("--top", `${u - c}px`), o = 1) : o === 1 && i && (t.style.setProperty("--pos", "relative"), t.style.setProperty("--top", `${l - d}px`), o = 0));
|
|
35
30
|
}
|
|
36
|
-
|
|
37
|
-
|
|
31
|
+
T(() => {
|
|
32
|
+
w(document.documentElement, P, H), r(document, "click", I, p), r(window, "resize", _(x, 100), p), r(window, "scroll", C, p);
|
|
38
33
|
});
|
|
39
34
|
export {
|
|
40
|
-
|
|
35
|
+
h as toggleAppExpanded
|
|
41
36
|
};
|
|
42
37
|
//# sourceMappingURL=app-observer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-observer.js","sources":["../../designsystem/app/app-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {
|
|
1
|
+
{"version":3,"file":"app-observer.js","sources":["../../designsystem/app/app-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { debounce, on, onLoaded, onMutation, QUICK_EVENT } from \"../utils\";\nimport \"./app-toggle\";\n\nconst CSS_APP = styles.app.split(\" \")[0];\nconst CSS_STICKY = styles.sticky.split(\" \")[0];\nconst CSS_TOGGLE = '[data-command=\"toggle-app-expanded\"]';\nconst CSS_SIDEBAR = `.${CSS_APP} > dialog,.${CSS_APP} dialog ~ main`;\n\nconst useTransition = (callback: () => void) => {\n\tif (!document.startViewTransition) callback();\n\telse document.startViewTransition(callback);\n};\n\nexport const toggleAppExpanded = (force?: boolean) =>\n\t// @ts-expect-error window.mtdsAppToggle comes from app-toggle.js\n\tuseTransition(() => window.mtdsToggleAppExpanded?.(force));\n\nfunction handleToggleClick({ target: el, defaultPrevented: stop }: Event) {\n\tif (stop || !(el instanceof HTMLButtonElement) || !el.matches(CSS_TOGGLE))\n\t\treturn;\n\tif (getComputedStyle(el).position === \"sticky\") return toggleAppExpanded();\n\tuseTransition(() => {\n\t\tconst sidebar = document.querySelector<HTMLDialogElement>(CSS_SIDEBAR);\n\t\tsidebar?.setAttribute(\"data-closedby\", \"any\"); // Allow closing by clicking outside\n\t\tsidebar?.showModal();\n\t});\n}\n\nfunction handleResize() {\n\tdocument.querySelector<HTMLDialogElement>(CSS_SIDEBAR)?.close();\n}\n\n// Scroll state\nlet MIN_Y = 0; // Offset to avoid scroll jump when sticky is set to relative\nlet SCROLL_UP: boolean;\nlet STICK = 0; // -1 = stick top, 0 = relative, 1 = stick bottom\nlet STICK_EL: HTMLElement;\nlet STICK_H = 0;\nlet STICK_Y = 0;\nlet STUCK = false; // Used to figure if nav is larger than viewport\nlet WIN_H = 0;\nlet WIN_Y = 0;\n\nfunction handleMutation([sticky]: HTMLCollectionOf<HTMLElement>) {\n\tSTICK_EL = sticky;\n\thandleScroll(); // Run on connect\n}\n\nfunction handleScroll() {\n\tif (!STICK_EL?.isConnected) return;\n\tconst NEXT_Y = window.scrollY;\n\tconst NEXT_UP = NEXT_Y < WIN_Y;\n\tWIN_Y = NEXT_Y;\n\n\t// Only calculate if scroll direction has changed\n\tif (NEXT_UP !== SCROLL_UP) {\n\t\tMIN_Y = (STICK_EL.parentElement?.getBoundingClientRect().top || 0) + WIN_Y;\n\t\tSCROLL_UP = NEXT_UP;\n\t\tSTICK_H = STICK_EL.offsetHeight;\n\t\tSTICK_Y = STICK_EL.getBoundingClientRect().top + WIN_Y;\n\t\tSTUCK = STICK_EL.offsetHeight <= window.innerHeight;\n\t\tWIN_H = window.innerHeight;\n\t}\n\n\tif (STICK === -1 && STUCK) return; // Allways sticky when sidebar is smaller than viewport\n\tif (STICK !== -1 && (STUCK || (SCROLL_UP && WIN_Y <= STICK_Y))) {\n\t\tSTICK_EL.style.setProperty(\"--pos\", \"sticky\");\n\t\tSTICK_EL.style.setProperty(\"--top\", \"0px\");\n\t\tSTICK = -1; // Not sticking to top and sidebar is smaller than viewport or scrolling up\n\t} else if (STICK === -1 && !SCROLL_UP) {\n\t\tSTICK_EL.style.setProperty(\"--pos\", \"relative\");\n\t\tSTICK_EL.style.setProperty(\"--top\", `${Math.max(0, WIN_Y - MIN_Y)}px`);\n\t\tSTICK = 0; // Sticking to top and scrolling down\n\t} else if (STICK !== 1 && !SCROLL_UP && WIN_Y + WIN_H >= STICK_Y + STICK_H) {\n\t\tSTICK_EL.style.setProperty(\"--pos\", \"sticky\");\n\t\tSTICK_EL.style.setProperty(\"--top\", `${WIN_H - STICK_H}px`);\n\t\tSTICK = 1; // Not sticking to bottom and scrolling down\n\t} else if (STICK === 1 && SCROLL_UP) {\n\t\tSTICK_EL.style.setProperty(\"--pos\", \"relative\");\n\t\tSTICK_EL.style.setProperty(\"--top\", `${STICK_Y - MIN_Y}px`);\n\t\tSTICK = 0; // Sticking to bottom and scrolling up\n\t}\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_STICKY, handleMutation);\n\ton(document, \"click\", handleToggleClick, QUICK_EVENT);\n\ton(window, \"resize\", debounce(handleResize, 100), QUICK_EVENT);\n\ton(window, \"scroll\", handleScroll, QUICK_EVENT);\n});\n"],"names":["CSS_APP","styles","CSS_STICKY","CSS_TOGGLE","CSS_SIDEBAR","useTransition","callback","toggleAppExpanded","force","handleToggleClick","el","stop","sidebar","handleResize","MIN_Y","SCROLL_UP","STICK","STICK_EL","STICK_H","STICK_Y","STUCK","WIN_H","WIN_Y","handleMutation","sticky","handleScroll","NEXT_Y","NEXT_UP","onLoaded","onMutation","on","QUICK_EVENT","debounce"],"mappings":";;;AAIA,MAAMA,IAAUC,EAAO,IAAI,MAAM,GAAG,EAAE,CAAC,GACjCC,IAAaD,EAAO,OAAO,MAAM,GAAG,EAAE,CAAC,GACvCE,IAAa,wCACbC,IAAc,IAAIJ,CAAO,cAAcA,CAAO,kBAE9CK,IAAgB,CAACC,MAAyB;AAC3C,EAAC,SAAS,sBACT,SAAS,oBAAoBA,CAAQ,IADEA,EAAA;AAE7C,GAEaC,IAAoB,CAACC;AAAA;AAAA,EAEjCH,EAAc,MAAM,OAAO,wBAAwBG,CAAK,CAAC;AAAA;AAE1D,SAASC,EAAkB,EAAE,QAAQC,GAAI,kBAAkBC,KAAe;AACzE,MAAI,EAAAA,KAAQ,EAAED,aAAc,sBAAsB,CAACA,EAAG,QAAQP,CAAU,IAExE;AAAA,QAAI,iBAAiBO,CAAE,EAAE,aAAa,iBAAiBH,EAAkB;AACzE,IAAAF,EAAc,MAAM;AACb,YAAAO,IAAU,SAAS,cAAiCR,CAAW;AAC5D,MAAAQ,GAAA,aAAa,iBAAiB,KAAK,GAC5CA,GAAS,UAAU;AAAA,IAAA,CACnB;AAAA;AACF;AAEA,SAASC,IAAe;AACd,WAAA,cAAiCT,CAAW,GAAG,MAAM;AAC/D;AAGA,IAAIU,IAAQ,GACRC,GACAC,IAAQ,GACRC,GACAC,IAAU,GACVC,IAAU,GACVC,IAAQ,IACRC,IAAQ,GACRC,IAAQ;AAEZ,SAASC,EAAe,CAACC,CAAM,GAAkC;AACrD,EAAAP,IAAAO,GACEC,EAAA;AACd;AAEA,SAASA,IAAe;AACnB,MAAA,CAACR,GAAU,YAAa;AAC5B,QAAMS,IAAS,OAAO,SAChBC,IAAUD,IAASJ;AAarB,EAZIA,IAAAI,GAGJC,MAAYZ,MACfD,KAASG,EAAS,eAAe,sBAAsB,EAAE,OAAO,KAAKK,GACzDP,IAAAY,GACZT,IAAUD,EAAS,cACTE,IAAAF,EAAS,sBAAsB,EAAE,MAAMK,GACzCF,IAAAH,EAAS,gBAAgB,OAAO,aACxCI,IAAQ,OAAO,cAGZ,EAAAL,MAAU,MAAMI,OAChBJ,MAAU,OAAOI,KAAUL,KAAaO,KAASH,MAC3CF,EAAA,MAAM,YAAY,SAAS,QAAQ,GACnCA,EAAA,MAAM,YAAY,SAAS,KAAK,GACjCD,IAAA,MACEA,MAAU,MAAM,CAACD,KAClBE,EAAA,MAAM,YAAY,SAAS,UAAU,GACrCA,EAAA,MAAM,YAAY,SAAS,GAAG,KAAK,IAAI,GAAGK,IAAQR,CAAK,CAAC,IAAI,GAC7DE,IAAA,KACEA,MAAU,KAAK,CAACD,KAAaO,IAAQD,KAASF,IAAUD,KACzDD,EAAA,MAAM,YAAY,SAAS,QAAQ,GAC5CA,EAAS,MAAM,YAAY,SAAS,GAAGI,IAAQH,CAAO,IAAI,GAClDF,IAAA,KACEA,MAAU,KAAKD,MAChBE,EAAA,MAAM,YAAY,SAAS,UAAU,GAC9CA,EAAS,MAAM,YAAY,SAAS,GAAGE,IAAUL,CAAK,IAAI,GAClDE,IAAA;AAEV;AAEAY,EAAS,MAAM;AACH,EAAAC,EAAA,SAAS,iBAAiB3B,GAAYqB,CAAc,GAC5DO,EAAA,UAAU,SAASrB,GAAmBsB,CAAW,GACpDD,EAAG,QAAQ,UAAUE,EAASnB,GAAc,GAAG,GAAGkB,CAAW,GAC1DD,EAAA,QAAQ,UAAUL,GAAcM,CAAW;AAC/C,CAAC;"}
|
package/mtds/app/app-toggle.js
CHANGED
|
@@ -1,27 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
)
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
document.adoptedStyleSheets.push(sheet);
|
|
12
|
-
window.mtdsToggleAppExpanded = (force) => {
|
|
13
|
-
try {
|
|
14
|
-
const next = force ?? !prev();
|
|
15
|
-
sheet.replaceSync?.(\`:root { \${key}: var(\${key}--\${next})}\`);
|
|
16
|
-
window.localStorage.setItem(key, next);
|
|
17
|
-
} catch (err) {} // localStorage is full or replaceSync is not supported
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
// Set and store initial state
|
|
21
|
-
window.mtdsToggleAppExpanded(prev());
|
|
22
|
-
})();
|
|
23
|
-
`;
|
|
24
|
-
export {
|
|
25
|
-
t as default
|
|
26
|
-
};
|
|
1
|
+
typeof window < "u" && window.CSSStyleSheet && document.adoptedStyleSheets && (() => {
|
|
2
|
+
const e = "--mtds-app-expanded", d = new CSSStyleSheet(), o = () => !window.localStorage.getItem(e)?.includes("false");
|
|
3
|
+
document.adoptedStyleSheets.push(d), window.mtdsToggleAppExpanded = (n) => {
|
|
4
|
+
try {
|
|
5
|
+
const t = n ?? !o();
|
|
6
|
+
d.replaceSync?.(`:root { ${e}: var(${e}--${t})}`), window.localStorage.setItem(e, t);
|
|
7
|
+
} catch {
|
|
8
|
+
}
|
|
9
|
+
}, window.mtdsToggleAppExpanded(o());
|
|
10
|
+
})();
|
|
27
11
|
//# sourceMappingURL=app-toggle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-toggle.js","sources":["../../designsystem/app/app-toggle.js
|
|
1
|
+
{"version":3,"file":"app-toggle.js","sources":["../../designsystem/app/app-toggle.js"],"sourcesContent":["if (\n\ttypeof window !== \"undefined\" &&\n\twindow.CSSStyleSheet &&\n\tdocument.adoptedStyleSheets\n)\n\t(() => {\n\t\tconst key = \"--mtds-app-expanded\";\n\t\tconst sheet = new CSSStyleSheet();\n\t\tconst prev = () => !window.localStorage.getItem(key)?.includes(\"false\");\n\n\t\tdocument.adoptedStyleSheets.push(sheet);\n\t\twindow.mtdsToggleAppExpanded = (force) => {\n\t\t\ttry {\n\t\t\t\tconst next = force ?? !prev();\n\t\t\t\tsheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\n\t\t\t\twindow.localStorage.setItem(key, next);\n\t\t\t} catch (_err) {} // localStorage is full or replaceSync is not supported\n\t\t};\n\n\t\t// Set and store initial state\n\t\twindow.mtdsToggleAppExpanded(prev());\n\t})();\n"],"names":["key","sheet","prev","force","next"],"mappings":"AACC,OAAO,SAAW,OAClB,OAAO,iBACP,SAAS,uBAER,MAAM;AACN,QAAMA,IAAM,uBACNC,IAAQ,IAAI,cAAe,GAC3BC,IAAO,MAAM,CAAC,OAAO,aAAa,QAAQF,CAAG,GAAG,SAAS,OAAO;AAEtE,WAAS,mBAAmB,KAAKC,CAAK,GACtC,OAAO,wBAAwB,CAACE,MAAU;AACzC,QAAI;AACH,YAAMC,IAAOD,KAAS,CAACD,EAAM;AAC7B,MAAAD,EAAM,cAAc,WAAWD,CAAG,SAASA,CAAG,KAAKI,CAAI,IAAI,GAC3D,OAAO,aAAa,QAAQJ,GAAKI,CAAI;AAAA,IACzC,QAAkB;AAAA,IAAE;AAAA,EACjB,GAGD,OAAO,sBAAsBF,GAAM;AACrC,GAAK;"}
|
package/mtds/app/app-toggle2.js
CHANGED
|
@@ -1,15 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
const t = `if (
|
|
2
|
+
typeof window !== "undefined" &&
|
|
3
|
+
window.CSSStyleSheet &&
|
|
4
|
+
document.adoptedStyleSheets
|
|
5
|
+
)
|
|
6
|
+
(() => {
|
|
7
|
+
const key = "--mtds-app-expanded";
|
|
8
|
+
const sheet = new CSSStyleSheet();
|
|
9
|
+
const prev = () => !window.localStorage.getItem(key)?.includes("false");
|
|
10
|
+
|
|
11
|
+
document.adoptedStyleSheets.push(sheet);
|
|
12
|
+
window.mtdsToggleAppExpanded = (force) => {
|
|
13
|
+
try {
|
|
14
|
+
const next = force ?? !prev();
|
|
15
|
+
sheet.replaceSync?.(\`:root { \${key}: var(\${key}--\${next})}\`);
|
|
16
|
+
window.localStorage.setItem(key, next);
|
|
17
|
+
} catch (_err) {} // localStorage is full or replaceSync is not supported
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
// Set and store initial state
|
|
21
|
+
window.mtdsToggleAppExpanded(prev());
|
|
22
|
+
})();
|
|
23
|
+
`;
|
|
24
|
+
export {
|
|
25
|
+
t as default
|
|
26
|
+
};
|
|
15
27
|
//# sourceMappingURL=app-toggle2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-toggle2.js","sources":["../../designsystem/app/app-toggle.js"],"sourcesContent":["if (
|
|
1
|
+
{"version":3,"file":"app-toggle2.js","sources":["../../designsystem/app/app-toggle.js?raw"],"sourcesContent":["export default \"if (\\n\\ttypeof window !== \\\"undefined\\\" &&\\n\\twindow.CSSStyleSheet &&\\n\\tdocument.adoptedStyleSheets\\n)\\n\\t(() => {\\n\\t\\tconst key = \\\"--mtds-app-expanded\\\";\\n\\t\\tconst sheet = new CSSStyleSheet();\\n\\t\\tconst prev = () => !window.localStorage.getItem(key)?.includes(\\\"false\\\");\\n\\n\\t\\tdocument.adoptedStyleSheets.push(sheet);\\n\\t\\twindow.mtdsToggleAppExpanded = (force) => {\\n\\t\\t\\ttry {\\n\\t\\t\\t\\tconst next = force ?? !prev();\\n\\t\\t\\t\\tsheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\\n\\t\\t\\t\\twindow.localStorage.setItem(key, next);\\n\\t\\t\\t} catch (_err) {} // localStorage is full or replaceSync is not supported\\n\\t\\t};\\n\\n\\t\\t// Set and store initial state\\n\\t\\twindow.mtdsToggleAppExpanded(prev());\\n\\t})();\\n\""],"names":["script"],"mappings":"AAAA,MAAeA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
|
package/mtds/app/app.js
CHANGED
|
@@ -32,7 +32,7 @@ import "../togglegroup/togglegroup.js";
|
|
|
32
32
|
import "../typography/typography.js";
|
|
33
33
|
import "../validation/validation.js";
|
|
34
34
|
import a from "../styles.module.css.js";
|
|
35
|
-
import d from "./app-
|
|
35
|
+
import d from "./app-toggle2.js";
|
|
36
36
|
const f = p(function({ as: t, className: r, ...m }, n) {
|
|
37
37
|
return /* @__PURE__ */ o(t || "div", { className: e(a.app, r), ref: n, ...m });
|
|
38
38
|
}), u = p(function({ as: t, className: r, ...m }, n) {
|
|
@@ -1,19 +1,18 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { IS_BROWSER as
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
) : [],
|
|
6
|
-
for (const t of
|
|
7
|
-
t.isConnected && t.showModal && t.close && (t.matches('[open]:not([data-modal="false"]):not(:modal)') ? (
|
|
8
|
-
},
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
} else o instanceof Element && o.closest('button[data-command="close"]') && ((s = o == null ? void 0 : o.closest("dialog")) == null || s.close());
|
|
1
|
+
import c from "../styles.module.css.js";
|
|
2
|
+
import { IS_BROWSER as d, onLoaded as m, on as r, QUICK_EVENT as f, createOptimizedMutationObserver as u, attr as o } from "../utils.js";
|
|
3
|
+
const p = c.dialog.split(" ")[0], g = d ? document.getElementsByClassName(
|
|
4
|
+
p
|
|
5
|
+
) : [], b = () => {
|
|
6
|
+
for (const t of g)
|
|
7
|
+
t.isConnected && t.showModal && t.close && (t.matches('[open]:not([data-modal="false"]):not(:modal)') ? (o(t, "open", null), t.showModal()) : t.matches(":modal:not([open])") && (o(t, "open", ""), t.close()));
|
|
8
|
+
}, h = ({ clientX: t, clientY: n, target: e }) => {
|
|
9
|
+
if (e instanceof HTMLDialogElement && o(e, "data-closedby") === "any") {
|
|
10
|
+
const { top: s, right: i, bottom: a, left: l } = e.getBoundingClientRect();
|
|
11
|
+
s <= n && n <= a && l <= t && t <= i || e.close();
|
|
12
|
+
} else e instanceof Element && e.closest('button[data-command="close"]') && e?.closest("dialog")?.close();
|
|
14
13
|
};
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
m(() => {
|
|
15
|
+
r(document, "click", h, f), u(b).observe(
|
|
17
16
|
document.documentElement,
|
|
18
17
|
{
|
|
19
18
|
attributeFilter: ["open"],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog-observer.js","sources":["../../designsystem/dialog/dialog-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n\
|
|
1
|
+
{"version":3,"file":"dialog-observer.js","sources":["../../designsystem/dialog/dialog-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n\tattr,\n\tcreateOptimizedMutationObserver,\n\tIS_BROWSER,\n\ton,\n\tonLoaded,\n\tQUICK_EVENT,\n} from \"../utils\";\n\nconst CSS_DIALOG = styles.dialog.split(\" \")[0];\nconst DIALOGS = IS_BROWSER\n\t? (document.getElementsByClassName(\n\t\t\tCSS_DIALOG,\n\t\t) as HTMLCollectionOf<HTMLDialogElement>)\n\t: [];\n\nconst handleModal = () => {\n\tfor (const dialog of DIALOGS)\n\t\tif (dialog.isConnected && dialog.showModal && dialog.close) {\n\t\t\tif (dialog.matches('[open]:not([data-modal=\"false\"]):not(:modal)')) {\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 correclty can call .close, removing <dialog> from #top-layer\n\t\t\t}\n\t\t}\n};\n\nconst handleClick = ({ clientX: x, clientY: y, target: el }: MouseEvent) => {\n\tif (el instanceof HTMLDialogElement && attr(el, \"data-closedby\") === \"any\") {\n\t\tconst { top, right, bottom, left } = el.getBoundingClientRect();\n\t\tconst isInside = top <= y && y <= bottom && left <= x && x <= right;\n\n\t\tif (!isInside) el.close();\n\t} else if (\n\t\tel instanceof Element &&\n\t\tel.closest('button[data-command=\"close\"]')\n\t) {\n\t\tel?.closest(\"dialog\")?.close();\n\t}\n};\n\nonLoaded(() => {\n\ton(document, \"click\", handleClick as EventListener, QUICK_EVENT);\n\tcreateOptimizedMutationObserver(handleModal).observe(\n\t\tdocument.documentElement,\n\t\t{\n\t\t\tattributeFilter: [\"open\"],\n\t\t\tattributes: true,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t},\n\t);\n});\n"],"names":["CSS_DIALOG","styles","DIALOGS","IS_BROWSER","handleModal","dialog","attr","handleClick","x","y","el","top","right","bottom","left","onLoaded","on","QUICK_EVENT","createOptimizedMutationObserver"],"mappings":";;AAUA,MAAMA,IAAaC,EAAO,OAAO,MAAM,GAAG,EAAE,CAAC,GACvCC,IAAUC,IACZ,SAAS;AAAA,EACVH;AACD,IACC,CAAC,GAEEI,IAAc,MAAM;AACzB,aAAWC,KAAUH;AACpB,IAAIG,EAAO,eAAeA,EAAO,aAAaA,EAAO,UAChDA,EAAO,QAAQ,8CAA8C,KAC3DC,EAAAD,GAAQ,QAAQ,IAAI,GACzBA,EAAO,UAAU,KACPA,EAAO,QAAQ,oBAAoB,MACxCC,EAAAD,GAAQ,QAAQ,EAAE,GACvBA,EAAO,MAAM;AAGjB,GAEME,IAAc,CAAC,EAAE,SAASC,GAAG,SAASC,GAAG,QAAQC,QAAqB;AAC3E,MAAIA,aAAc,qBAAqBJ,EAAKI,GAAI,eAAe,MAAM,OAAO;AAC3E,UAAM,EAAE,KAAAC,GAAK,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,EAAK,IAAIJ,EAAG,sBAAsB;AAG1D,IAFaC,KAAOF,KAAKA,KAAKI,KAAUC,KAAQN,KAAKA,KAAKI,KAE/CF,EAAG,MAAM;AAAA,EAAA,OAExBA,aAAc,WACdA,EAAG,QAAQ,8BAA8B,KAErCA,GAAA,QAAQ,QAAQ,GAAG,MAAM;AAE/B;AAEAK,EAAS,MAAM;AACX,EAAAC,EAAA,UAAU,SAAST,GAA8BU,CAAW,GAC/DC,EAAgCd,CAAW,EAAE;AAAA,IAC5C,SAAS;AAAA,IACT;AAAA,MACC,iBAAiB,CAAC,MAAM;AAAA,MACxB,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEX;AACD,CAAC;"}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { onLoaded as
|
|
3
|
-
function
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
n instanceof HTMLHeadingElement && (m(n, "tabindex", "-1"), n.focus());
|
|
1
|
+
import e from "../styles.module.css.js";
|
|
2
|
+
import { onLoaded as i, on as o, QUICK_EVENT as r, attr as a } from "../utils.js";
|
|
3
|
+
function m(t) {
|
|
4
|
+
if (t.animationName !== e._errorsummary) return;
|
|
5
|
+
const n = t.target?.firstElementChild;
|
|
6
|
+
n instanceof HTMLHeadingElement && (a(n, "tabindex", "-1"), n.focus());
|
|
8
7
|
}
|
|
9
|
-
|
|
8
|
+
i(() => o(document, "animationend", m, r));
|
|
10
9
|
//# sourceMappingURL=errorsummary-observer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"errorsummary-observer.js","sources":["../../designsystem/errorsummary/errorsummary-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {
|
|
1
|
+
{"version":3,"file":"errorsummary-observer.js","sources":["../../designsystem/errorsummary/errorsummary-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, on, onLoaded, QUICK_EVENT } from \"../utils\";\n\nfunction handleInject(event: Event & { animationName?: string }) {\n\tif (event.animationName !== styles._errorsummary) return;\n\tconst first = (event.target as Element)?.firstElementChild;\n\n\tif (first instanceof HTMLHeadingElement) {\n\t\tattr(first, \"tabindex\", \"-1\");\n\t\tfirst.focus(); // Autofocus first heading\n\t}\n}\n\nonLoaded(() => on(document, \"animationend\", handleInject, QUICK_EVENT));\n"],"names":["handleInject","event","styles","first","attr","onLoaded","on","QUICK_EVENT"],"mappings":";;AAGA,SAASA,EAAaC,GAA2C;AAC5D,MAAAA,EAAM,kBAAkBC,EAAO,cAAe;AAC5C,QAAAC,IAASF,EAAM,QAAoB;AAEzC,EAAIE,aAAiB,uBACfC,EAAAD,GAAO,YAAY,IAAI,GAC5BA,EAAM,MAAM;AAEd;AAEAE,EAAS,MAAMC,EAAG,UAAU,gBAAgBN,GAAcO,CAAW,CAAC;"}
|