@mattilsynet/design 2.2.28 → 2.2.30
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/alert/alert.js +8 -9
- package/mtds/alert/alert.js.map +1 -1
- package/mtds/analytics/analytics.js +104 -165
- package/mtds/analytics/analytics.js.map +1 -1
- package/mtds/app/app-observer.js +28 -74
- package/mtds/app/app-observer.js.map +1 -1
- package/mtds/app/app-toggle.js +26 -16
- package/mtds/app/app-toggle.js.map +1 -1
- package/mtds/app/app-toggle2.js +10 -4
- package/mtds/app/app-toggle2.js.map +1 -1
- package/mtds/app/app.js +32 -36
- package/mtds/app/app.js.map +1 -1
- package/mtds/atlas/atlas-element.d.ts +27 -0
- package/mtds/atlas/atlas-element.js +63 -84
- package/mtds/atlas/atlas-element.js.map +1 -1
- package/mtds/atlas/atlas-marker.js +28 -48
- package/mtds/atlas/atlas-marker.js.map +1 -1
- package/mtds/atlas/atlas-matgeo.d.ts +3 -8
- package/mtds/atlas/atlas-matgeo.js +36 -66
- package/mtds/atlas/atlas-matgeo.js.map +1 -1
- package/mtds/atlas/atlas-wms.js +11 -21
- package/mtds/atlas/atlas-wms.js.map +1 -1
- package/mtds/atlas/atlas.css.js +2 -2
- package/mtds/atlas/atlas.css.js.map +1 -1
- package/mtds/atlas/atlas.js +23 -23
- package/mtds/atlas/atlas.js.map +1 -1
- package/mtds/atlas/atlas.stories.d.ts +1 -0
- package/mtds/atlas/cluster.js +697 -1576
- package/mtds/atlas/cluster.js.map +1 -1
- package/mtds/atlas.iife.js +4 -4
- package/mtds/atlas.js +11 -10
- package/mtds/avatar/avatar.js +8 -8
- package/mtds/avatar/avatar.js.map +1 -1
- package/mtds/badge/badge.js +7 -7
- package/mtds/badge/badge.js.map +1 -1
- package/mtds/breadcrumbs/breadcrumbs-observer.js +9 -10
- package/mtds/breadcrumbs/breadcrumbs-observer.js.map +1 -1
- package/mtds/breadcrumbs/breadcrumbs.js +13 -14
- package/mtds/breadcrumbs/breadcrumbs.js.map +1 -1
- package/mtds/button/button.js +14 -16
- package/mtds/button/button.js.map +1 -1
- package/mtds/card/card.js +12 -14
- package/mtds/card/card.js.map +1 -1
- package/mtds/chart/chart-axis.js +15 -27
- package/mtds/chart/chart-axis.js.map +1 -1
- package/mtds/chart/chart-bars.js +13 -15
- package/mtds/chart/chart-bars.js.map +1 -1
- package/mtds/chart/chart-element.js +48 -83
- package/mtds/chart/chart-element.js.map +1 -1
- package/mtds/chart/chart-lines.js +32 -54
- package/mtds/chart/chart-lines.js.map +1 -1
- package/mtds/chart/chart-pies.js +14 -34
- package/mtds/chart/chart-pies.js.map +1 -1
- package/mtds/chart/chart.css.js +2 -2
- package/mtds/chart/chart.css.js.map +1 -1
- package/mtds/chart/chart.js +12 -12
- package/mtds/chart/chart.js.map +1 -1
- package/mtds/chip/chip.js +8 -8
- package/mtds/chip/chip.js.map +1 -1
- package/mtds/chip/chip.stories.d.ts +1 -0
- package/mtds/details/details.js +12 -14
- package/mtds/details/details.js.map +1 -1
- package/mtds/dialog/dialog-observer.js +22 -35
- package/mtds/dialog/dialog-observer.js.map +1 -1
- package/mtds/dialog/dialog.js +12 -12
- package/mtds/dialog/dialog.js.map +1 -1
- package/mtds/divider/divider.js +10 -10
- package/mtds/divider/divider.js.map +1 -1
- package/mtds/errorsummary/errorsummary-observer.js +8 -11
- package/mtds/errorsummary/errorsummary-observer.js.map +1 -1
- package/mtds/errorsummary/errorsummary.js +11 -11
- package/mtds/errorsummary/errorsummary.js.map +1 -1
- package/mtds/external/@turf/boolean-point-in-polygon/dist/esm/index.js +19 -27
- package/mtds/external/@turf/boolean-point-in-polygon/dist/esm/index.js.map +1 -1
- package/mtds/external/@turf/helpers/dist/esm/index.js +16 -29
- package/mtds/external/@turf/helpers/dist/esm/index.js.map +1 -1
- package/mtds/external/@turf/invariant/dist/esm/index.js +13 -20
- package/mtds/external/@turf/invariant/dist/esm/index.js.map +1 -1
- package/mtds/external/leaflet/dist/leaflet-src.js +3096 -6004
- package/mtds/external/leaflet/dist/leaflet-src.js.map +1 -1
- package/mtds/external/leaflet/dist/leaflet.css.js +2 -2
- package/mtds/external/leaflet/dist/leaflet.css.js.map +1 -1
- package/mtds/external/point-in-polygon-hao/dist/esm/index.js +16 -46
- package/mtds/external/point-in-polygon-hao/dist/esm/index.js.map +1 -1
- package/mtds/external/robust-predicates/esm/orient2d.js +19 -163
- package/mtds/external/robust-predicates/esm/orient2d.js.map +1 -1
- package/mtds/external/robust-predicates/esm/util.js +25 -85
- package/mtds/external/robust-predicates/esm/util.js.map +1 -1
- package/mtds/field/field-observer.js +53 -119
- package/mtds/field/field-observer.js.map +1 -1
- package/mtds/field/field.d.ts +0 -1
- package/mtds/field/field.js +145 -177
- package/mtds/field/field.js.map +1 -1
- package/mtds/fieldset/fieldset-observer.js +14 -24
- package/mtds/fieldset/fieldset-observer.js.map +1 -1
- package/mtds/fieldset/fieldset.d.ts +3 -9
- package/mtds/fieldset/fieldset.js +20 -23
- package/mtds/fieldset/fieldset.js.map +1 -1
- package/mtds/fileupload/fileupload.js +8 -9
- package/mtds/fileupload/fileupload.js.map +1 -1
- package/mtds/fileupload/fileupload.stories.d.ts +1 -0
- package/mtds/helptext/helptext.js +15 -15
- package/mtds/helptext/helptext.js.map +1 -1
- package/mtds/illustrations/index.json +2 -2
- package/mtds/index.iife.js +15 -15
- package/mtds/index.js +27 -26
- package/mtds/index.js.map +1 -1
- package/mtds/input/input.js +28 -30
- package/mtds/input/input.js.map +1 -1
- package/mtds/law/law-helper.js +77 -143
- package/mtds/law/law-helper.js.map +1 -1
- package/mtds/law/law.js +6 -6
- package/mtds/law/law.js.map +1 -1
- package/mtds/layout/layout.js +10 -13
- package/mtds/layout/layout.js.map +1 -1
- package/mtds/link/link.js +7 -8
- package/mtds/link/link.js.map +1 -1
- package/mtds/logo/logo-observer.js +12 -18
- package/mtds/logo/logo-observer.js.map +1 -1
- package/mtds/logo/logo.js +8 -8
- package/mtds/logo/logo.js.map +1 -1
- package/mtds/package.json.js +2 -2
- package/mtds/pagination/pagination-helper.js +11 -17
- package/mtds/pagination/pagination-helper.js.map +1 -1
- package/mtds/pagination/pagination.js +30 -30
- package/mtds/pagination/pagination.js.map +1 -1
- package/mtds/popover/popover-observer.js +33 -45
- package/mtds/popover/popover-observer.js.map +1 -1
- package/mtds/popover/popover.js +12 -13
- package/mtds/popover/popover.js.map +1 -1
- package/mtds/progress/progress.js +8 -8
- package/mtds/progress/progress.js.map +1 -1
- package/mtds/react-atlas.js +13 -12
- package/mtds/react-types.d.ts +1 -0
- package/mtds/react.js +80 -80
- package/mtds/skeleton/skeleton.js +8 -8
- package/mtds/skeleton/skeleton.js.map +1 -1
- package/mtds/spinner/spinner.js +8 -8
- package/mtds/spinner/spinner.js.map +1 -1
- package/mtds/steps/steps.js +7 -7
- package/mtds/steps/steps.js.map +1 -1
- package/mtds/styles.css +1 -4591
- package/mtds/styles.json +43 -43
- package/mtds/styles.module.css.js +112 -167
- package/mtds/styles.module.css.js.map +1 -1
- package/mtds/table/table-observer.js +19 -22
- package/mtds/table/table-observer.js.map +1 -1
- package/mtds/table/table.d.ts +7 -0
- package/mtds/table/table.js +43 -18
- package/mtds/table/table.js.map +1 -1
- package/mtds/tabs/tabs.js +21 -25
- package/mtds/tabs/tabs.js.map +1 -1
- package/mtds/tag/tag.js +8 -8
- package/mtds/tag/tag.js.map +1 -1
- package/mtds/tailwind.css +6 -25
- package/mtds/toast/toast-helper.js +20 -35
- package/mtds/toast/toast-helper.js.map +1 -1
- package/mtds/toast/toast-observer.js +15 -30
- package/mtds/toast/toast-observer.js.map +1 -1
- package/mtds/toast/toast.js +37 -45
- package/mtds/toast/toast.js.map +1 -1
- package/mtds/togglegroup/togglegroup-observer.js +10 -15
- package/mtds/togglegroup/togglegroup-observer.js.map +1 -1
- package/mtds/togglegroup/togglegroup.js +24 -21
- package/mtds/togglegroup/togglegroup.js.map +1 -1
- package/mtds/tooltip/tooltip-observer.js +32 -48
- package/mtds/tooltip/tooltip-observer.js.map +1 -1
- package/mtds/typography/typography.js +19 -28
- package/mtds/typography/typography.js.map +1 -1
- package/mtds/utils.js +89 -129
- package/mtds/utils.js.map +1 -1
- package/mtds/validation/validation-observer.d.ts +1 -0
- package/mtds/validation/validation-observer.js +31 -0
- package/mtds/validation/validation-observer.js.map +1 -0
- package/mtds/validation/validation.js +12 -12
- package/mtds/validation/validation.js.map +1 -1
- package/package.json +8 -6
package/mtds/alert/alert.js
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { forwardRef } from "react";
|
|
4
|
-
import
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
return /* @__PURE__ */ jsx(Tag, { className: clsx(styles.alert, className), ref, ...rest });
|
|
1
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import f from "clsx";
|
|
3
|
+
import { forwardRef as s } from "react";
|
|
4
|
+
import a from "../styles.module.css.js";
|
|
5
|
+
const x = s(function({ as: t, className: e, ...o }, l) {
|
|
6
|
+
const r = t || "output";
|
|
7
|
+
return !o.role && r !== "output" && Object.assign(o, { role: "alert" }), /* @__PURE__ */ m(r, { className: f(a.alert, e), ref: l, ...o });
|
|
9
8
|
});
|
|
10
9
|
export {
|
|
11
|
-
Alert
|
|
10
|
+
x as Alert
|
|
12
11
|
};
|
|
13
12
|
//# sourceMappingURL=alert.js.map
|
package/mtds/alert/alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.js","sources":["../../designsystem/alert/alert.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type AlertProps<As extends React.ElementType = \"output\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{ \"data-color\"?: \"info\" | \"success\" | \"warning\" | \"danger\" | \"neutral\" }\n\t>;\n\ntype AlertComponent = <As extends React.ElementType = \"output\">(\n\tprops: AlertProps<As>,\n) => JSX.Element;\n\nexport const Alert: AlertComponent = forwardRef<null>(function Alert<\n\tAs extends React.ElementType = \"output\",\n>({ as, className, ...rest }: AlertProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"output\";\n\n\tif (!rest.role && Tag !== \"output\") Object.assign(rest, { role: \"alert\" }); // Ensure role is set to 'alert' if not <output>\n\n\treturn <Tag className={clsx(styles.alert, className)} ref={ref} {...rest} />;\n}) as AlertComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Alert"],"mappings":";;;;AAkBO,
|
|
1
|
+
{"version":3,"file":"alert.js","sources":["../../designsystem/alert/alert.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type AlertProps<As extends React.ElementType = \"output\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{ \"data-color\"?: \"info\" | \"success\" | \"warning\" | \"danger\" | \"neutral\" }\n\t>;\n\ntype AlertComponent = <As extends React.ElementType = \"output\">(\n\tprops: AlertProps<As>,\n) => JSX.Element;\n\nexport const Alert: AlertComponent = forwardRef<null>(function Alert<\n\tAs extends React.ElementType = \"output\",\n>({ as, className, ...rest }: AlertProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"output\";\n\n\tif (!rest.role && Tag !== \"output\") Object.assign(rest, { role: \"alert\" }); // Ensure role is set to 'alert' if not <output>\n\n\treturn <Tag className={clsx(styles.alert, className)} ref={ref} {...rest} />;\n}) as AlertComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Alert","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles"],"mappings":";;;;AAkBO,MAAMA,IAAwBC,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAwBC,GAA0B;AACvE,QAAMC,IAAMJ,KAAM;AAElB,SAAI,CAACE,EAAK,QAAQE,MAAQ,YAAU,OAAO,OAAOF,GAAM,EAAE,MAAM,QAAA,CAAS,GAElE,gBAAAG,EAACD,GAAA,EAAI,WAAWE,EAAKC,EAAO,OAAON,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC3E,CAAC;"}
|
|
@@ -1,184 +1,123 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { onLoaded, isBrowser, tag, on, QUICK_EVENT, attr } from "../utils.js";
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
window._paq.push(["HeatmapSessionRecording::disable"]);
|
|
19
|
-
window._paq.push(["enableLinkTracking"]);
|
|
20
|
-
window._paq.push(["setTrackerUrl", `https://${MATOMO}/matomo.php`]);
|
|
21
|
-
}
|
|
22
|
-
if (!window._mtm) {
|
|
23
|
-
window._mtm = window._mtm || [];
|
|
24
|
-
window._mtm.push({ "mtm.startTime": Date.now(), event: "mtm.Start" });
|
|
25
|
-
}
|
|
26
|
-
if (action === "init") {
|
|
27
|
-
window._mtdsTracking = {
|
|
28
|
-
enabled: window.location.hostname !== "localhost",
|
|
29
|
-
...window._mtdsTracking,
|
|
30
|
-
...args
|
|
31
|
-
};
|
|
32
|
-
const { consent, enabled, matomoId, matomoTagManagerId } = window._mtdsTracking;
|
|
33
|
-
if (matomoId) window._paq.push(["setSiteId", matomoId]);
|
|
34
|
-
if (enabled) {
|
|
35
|
-
if (consent !== "custom") renderBanner();
|
|
36
|
-
const src = matomoTagManagerId ? `https://cdn.matomo.cloud/${MATOMO}/container_${matomoTagManagerId}.js` : `https://cdn.matomo.cloud/${MATOMO}/matomo.js`;
|
|
37
|
-
document.querySelector(`script[src="${src}"]`) || document.head.append(tag("script", { async: "", src }));
|
|
1
|
+
import m from "../styles.module.css.js";
|
|
2
|
+
import { onLoaded as w, isBrowser as g, tag as b, on as y, QUICK_EVENT as _, attr as i } from "../utils.js";
|
|
3
|
+
const S = `.${m.breadcrumbs.split(" ")[0]}`, k = `.${m.card.split(" ")[0]}`, u = `.${m.chip.split(" ")[0]}`, T = `.${m.helptext.split(" ")[0]}`, v = `.${m.pagination.split(" ")[0]}`, x = 'summary,u-summary,a,button,[role="tab"],[role="button"]', C = "click,toggle,submit,change", p = "mattilsynet.matomo.cloud", $ = ["setCustomUrl", "setDocumentTitle", "setReferrerUrl"], s = "mtds-analytics-banner", q = "https://www.mattilsynet.no/om-mattilsynet/personvernerklaering/informasjonskapsler";
|
|
4
|
+
function E(o, a = {}) {
|
|
5
|
+
if (g()) {
|
|
6
|
+
if (window._paq || (window._paq = [], window._paq.push(["HeatmapSessionRecording::disable"]), window._paq.push(["enableLinkTracking"]), window._paq.push(["setTrackerUrl", `https://${p}/matomo.php`])), window._mtm || (window._mtm = window._mtm || [], window._mtm.push({ "mtm.startTime": Date.now(), event: "mtm.Start" })), o === "init") {
|
|
7
|
+
window._mtdsTracking = {
|
|
8
|
+
enabled: window.location.hostname !== "localhost",
|
|
9
|
+
...window._mtdsTracking,
|
|
10
|
+
...a
|
|
11
|
+
};
|
|
12
|
+
const { consent: e, enabled: t, matomoId: n, matomoTagManagerId: r } = window._mtdsTracking;
|
|
13
|
+
if (n && window._paq.push(["setSiteId", n]), t) {
|
|
14
|
+
e !== "custom" && A();
|
|
15
|
+
const l = r ? `https://cdn.matomo.cloud/${p}/container_${r}.js` : `https://cdn.matomo.cloud/${p}/matomo.js`;
|
|
16
|
+
document.querySelector(`script[src="${l}"]`) || document.head.append(b("script", { async: "", src: l }));
|
|
17
|
+
}
|
|
38
18
|
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
19
|
+
if (window._mtdsTracking?.enabled !== !1) {
|
|
20
|
+
if (window._mtdsTracking?.enabled === "debug")
|
|
21
|
+
return console.info(`analytics ${o}:`, a);
|
|
22
|
+
if (o === "pageview") {
|
|
23
|
+
const { url: e, title: t } = a;
|
|
24
|
+
window._paq.push(["setCustomUrl", e || location.href]), window._paq.push(["setDocumentTitle", t || document.title]), window._paq.push(["trackPageView"]);
|
|
25
|
+
} else if (o === "event") {
|
|
26
|
+
const { category: e, action: t, name: n, value: r } = a, l = ["trackEvent", e, t, n, r];
|
|
27
|
+
let c = location.href;
|
|
28
|
+
window._paq.push([
|
|
29
|
+
function() {
|
|
30
|
+
c = this.getCurrentUrl();
|
|
31
|
+
}
|
|
32
|
+
]), window._paq.push(["setCustomUrl", c.split("#")[0]]), window._paq.push(l.filter((h) => h !== void 0)), window._paq.push(["setCustomUrl", c]);
|
|
33
|
+
} else if (o === "search") {
|
|
34
|
+
const {
|
|
35
|
+
query: e,
|
|
36
|
+
category: t = !1,
|
|
37
|
+
results: n = !1
|
|
38
|
+
} = a;
|
|
39
|
+
window._paq.push(["trackSiteSearch", e, t, n]);
|
|
40
|
+
} else if (o === "matomo") {
|
|
41
|
+
const e = a;
|
|
42
|
+
$.includes(e?.[0]) && typeof e[1] != "string" && (e[1] = `${e[1] ?? ""}`), window._paq.push(e);
|
|
55
43
|
}
|
|
56
|
-
|
|
57
|
-
window._paq.push(["setCustomUrl", url.split("#")[0]]);
|
|
58
|
-
window._paq.push(event.filter((v) => v !== void 0));
|
|
59
|
-
window._paq.push(["setCustomUrl", url]);
|
|
60
|
-
} else if (action === "search") {
|
|
61
|
-
const {
|
|
62
|
-
query,
|
|
63
|
-
category = false,
|
|
64
|
-
results = false
|
|
65
|
-
} = args;
|
|
66
|
-
window._paq.push(["trackSiteSearch", query, category, results]);
|
|
67
|
-
} else if (action === "matomo") {
|
|
68
|
-
const props = args;
|
|
69
|
-
const needStr = MATOMO_STRINGS.includes(props?.[0]);
|
|
70
|
-
if (needStr && typeof props[1] !== "string") props[1] = `${props[1] ?? ""}`;
|
|
71
|
-
window._paq.push(props);
|
|
44
|
+
}
|
|
72
45
|
}
|
|
73
46
|
}
|
|
74
|
-
function
|
|
75
|
-
|
|
76
|
-
if (hasSeenBanner) return;
|
|
47
|
+
function A() {
|
|
48
|
+
if (document.getElementById(s) || window.localStorage.getItem(s)) return;
|
|
77
49
|
document.body.insertAdjacentHTML(
|
|
78
50
|
"afterbegin",
|
|
79
|
-
`<dialog id="${
|
|
80
|
-
#${
|
|
81
|
-
#${
|
|
82
|
-
#${
|
|
83
|
-
#${
|
|
84
|
-
#${
|
|
85
|
-
#${
|
|
51
|
+
`<dialog id="${s}" data-analytics="ignore"><style>
|
|
52
|
+
#${s}[open] { box-sizing: border-box; display: flex; align-items: center; background: #116e6b; border-radius: .5em; border: 0; box-shadow: 0 .25em .5em rgba(0,0,0,.3); color: #fff; font-size: .875em; inset: auto auto 1em 1em; max-width: calc(100vw - 2em); outline: 0; padding: .5em; position: fixed; z-index: 99999 }
|
|
53
|
+
#${s} button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; width: 1.5em; height: 1.5em; font: 300 1.5em/1.35 sans-serif; border-radius: .25em; place-content: center; transition: .2s; transition-property: background, scale }
|
|
54
|
+
#${s} button:focus-visible { outline: 2px solid }
|
|
55
|
+
#${s} button:hover { background: #0a4e4f }
|
|
56
|
+
#${s} button:active { background: #054449; scale: .9 }
|
|
57
|
+
#${s} p { margin: 0 .25em }
|
|
86
58
|
</style>
|
|
87
|
-
<p>Vi bruker <a href="${
|
|
59
|
+
<p>Vi bruker <a href="${q}" target="_blank">informasjonskapsler</a> for å forbedre brukeropplevelsen.</p>
|
|
88
60
|
<form method="dialog" data-analytics="ignore"><button type="submit" aria-label="OK">×</button></form>
|
|
89
61
|
</dialog>`
|
|
90
62
|
);
|
|
91
|
-
const
|
|
92
|
-
|
|
93
|
-
banner.addEventListener("close", onClose, { once: true });
|
|
94
|
-
banner.show();
|
|
63
|
+
const a = document.getElementById(s), e = () => window.localStorage.setItem(s, "seen");
|
|
64
|
+
a.addEventListener("close", e, { once: !0 }), a.show();
|
|
95
65
|
}
|
|
96
|
-
function
|
|
97
|
-
|
|
66
|
+
function I(o) {
|
|
67
|
+
window._mtdsTracking?.enabled && setTimeout(M, 0, o);
|
|
98
68
|
}
|
|
99
|
-
function
|
|
100
|
-
const
|
|
101
|
-
if (!(
|
|
69
|
+
function M({ type: o, target: a }) {
|
|
70
|
+
const e = o === "click" ? a?.closest?.(x) : a;
|
|
71
|
+
if (!(e instanceof Element) || e.closest('[data-analytics="ignore"]'))
|
|
102
72
|
return;
|
|
103
|
-
let
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
if (
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
} else if (
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
} else if (
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
category
|
|
141
|
-
action
|
|
142
|
-
|
|
143
|
-
category = "Card";
|
|
144
|
-
action = el instanceof HTMLAnchorElement ? "navigate" : "click";
|
|
145
|
-
} else if (el.closest(CSS_CHIP)) {
|
|
146
|
-
category = "Chip";
|
|
147
|
-
action = el.hasAttribute("data-removable") ? "remove" : "click";
|
|
148
|
-
} else if (el.closest("th[aria-sort]")) {
|
|
149
|
-
category = "Table";
|
|
150
|
-
action = "sort";
|
|
151
|
-
} else if (el instanceof HTMLAnchorElement) {
|
|
152
|
-
category = "Link";
|
|
153
|
-
action = el.protocol === "mailto:" ? "email" : "navigate";
|
|
154
|
-
if (el.hasAttribute("download")) action = "download";
|
|
155
|
-
else if (el.hash && el.href.startsWith(location.href.split("#")[0]))
|
|
156
|
-
action = "anchor";
|
|
157
|
-
} else if (el.hasAttribute("aria-expanded")) {
|
|
158
|
-
if (attr(el, "aria-expanded") !== "true") return;
|
|
159
|
-
category = "Expand";
|
|
160
|
-
action = "open";
|
|
161
|
-
} else if (el.nodeName.startsWith("MTDS-ATLAS-")) {
|
|
162
|
-
category = "Map Marker";
|
|
163
|
-
action = "open";
|
|
164
|
-
}
|
|
165
|
-
analytics("event", {
|
|
166
|
-
category: attr(el, "data-analytics-category") ?? category,
|
|
167
|
-
action: attr(el, "data-analytics-action") ?? action,
|
|
168
|
-
name: attr(el, "data-analytics-name") ?? name
|
|
73
|
+
let t = "click", n = "Button", r = f(e) || N(e) || i(e, "data-tooltip") || "";
|
|
74
|
+
if (o === "submit")
|
|
75
|
+
n = "Form", t = "submit", r = r || document.title;
|
|
76
|
+
else if (o === "toggle") {
|
|
77
|
+
if (!e.matches("dialog:modal")) return;
|
|
78
|
+
n = "Dialog", t = "open";
|
|
79
|
+
} else if (o === "change") {
|
|
80
|
+
const l = i(e, "type"), c = l === "checkbox" || l === "radio" ? e.closest("fieldset") : null;
|
|
81
|
+
n = e.closest(u) ? "Chip" : "Form", t = "change", r = f(c || e) || d(c?.querySelector("legend")) || d(e?.labels?.[0]);
|
|
82
|
+
} else if (i(e, "role") === "tab")
|
|
83
|
+
n = "Tab", t = "navigate";
|
|
84
|
+
else if (i(e, "popovertarget")) {
|
|
85
|
+
if (!B(e)?.matches(":popover-open")) return;
|
|
86
|
+
n = e.closest(T) ? "HelpText" : "Popover", t = "open";
|
|
87
|
+
} else if (e.nodeName.endsWith("SUMMARY")) {
|
|
88
|
+
if (!e.parentElement.open) return;
|
|
89
|
+
n = "Details", t = "open";
|
|
90
|
+
} else if (i(e, "data-command") === "toggle-app-expanded") {
|
|
91
|
+
const l = L(e, "--mtds-tooltip-position") === "none";
|
|
92
|
+
n = "Sidebar", t = l ? "expand" : "minimize", r = l && i(e, "data-tooltip") || d(e);
|
|
93
|
+
} else if (e.closest(S))
|
|
94
|
+
n = "Breadcrumbs", t = "navigate";
|
|
95
|
+
else if (e.closest(v))
|
|
96
|
+
n = "Pagintation", t = "navigate";
|
|
97
|
+
else if (e.closest(k))
|
|
98
|
+
n = "Card", t = e instanceof HTMLAnchorElement ? "navigate" : "click";
|
|
99
|
+
else if (e.closest(u))
|
|
100
|
+
n = "Chip", t = e.hasAttribute("data-removable") ? "remove" : "click";
|
|
101
|
+
else if (e.closest("th[aria-sort]"))
|
|
102
|
+
n = "Table", t = "sort";
|
|
103
|
+
else if (e instanceof HTMLAnchorElement)
|
|
104
|
+
n = "Link", t = e.protocol === "mailto:" ? "email" : "navigate", e.hasAttribute("download") ? t = "download" : e.hash && e.href.startsWith(location.href.split("#")[0]) && (t = "anchor");
|
|
105
|
+
else if (e.hasAttribute("aria-expanded")) {
|
|
106
|
+
if (i(e, "aria-expanded") !== "true") return;
|
|
107
|
+
n = "Expand", t = "open";
|
|
108
|
+
} else e.nodeName.startsWith("MTDS-ATLAS-") && (n = "Map Marker", t = "open");
|
|
109
|
+
E("event", {
|
|
110
|
+
category: i(e, "data-analytics-category") ?? n,
|
|
111
|
+
action: i(e, "data-analytics-action") ?? t,
|
|
112
|
+
name: i(e, "data-analytics-name") ?? r
|
|
169
113
|
});
|
|
170
114
|
}
|
|
171
|
-
const
|
|
172
|
-
const
|
|
173
|
-
|
|
174
|
-
const style = (el, key) => window.getComputedStyle(el).getPropertyValue(key)?.trim();
|
|
175
|
-
const heading = (el) => {
|
|
176
|
-
const body = text(el);
|
|
177
|
-
const head = text(el.querySelector("h1,h2,h3,h4,h5,h6"));
|
|
178
|
-
return body.startsWith(head) && head || body.slice(0, 100).trim();
|
|
115
|
+
const d = (o) => o?.textContent?.trim() || "", f = (o) => o && i(o, "aria-label") || "", B = (o) => document.getElementById(i(o, "popovertarget") || ""), L = (o, a) => window.getComputedStyle(o).getPropertyValue(a)?.trim(), N = (o) => {
|
|
116
|
+
const a = d(o), e = d(o.querySelector("h1,h2,h3,h4,h5,h6"));
|
|
117
|
+
return a.startsWith(e) && e || a.slice(0, 100).trim();
|
|
179
118
|
};
|
|
180
|
-
|
|
119
|
+
w(() => [y(document, C, I, _)]);
|
|
181
120
|
export {
|
|
182
|
-
analytics
|
|
121
|
+
E as analytics
|
|
183
122
|
};
|
|
184
123
|
//# sourceMappingURL=analytics.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"analytics.js","sources":["../../designsystem/analytics/analytics.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, isBrowser, on, onLoaded, QUICK_EVENT, tag } from \"../utils\";\n\nconst CSS_BREADCRUMBS = `.${styles.breadcrumbs.split(\" \")[0]}`;\nconst CSS_CARD = `.${styles.card.split(\" \")[0]}`;\nconst CSS_CHIP = `.${styles.chip.split(\" \")[0]}`;\nconst CSS_HELPTEXT = `.${styles.helptext.split(\" \")[0]}`;\nconst CSS_PAGINATION = `.${styles.pagination.split(\" \")[0]}`;\nconst CLICKS = `summary,u-summary,a,button,[role=\"tab\"],[role=\"button\"]`;\nconst EVENTS = \"click,toggle,submit,change\";\nconst MATOMO = \"mattilsynet.matomo.cloud\";\nconst MATOMO_STRINGS = [\"setCustomUrl\", \"setDocumentTitle\", \"setReferrerUrl\"];\nconst BANNER = \"mtds-analytics-banner\"; // Dialog to show Matomo script loading\nconst BANNER_URL =\n\t\"https://www.mattilsynet.no/om-mattilsynet/personvernerklaering/informasjonskapsler\";\n\ntype Matomo = (\n\t| string\n\t| number\n\t| boolean\n\t| Document\n\t| Element\n\t| ((this: Record<string, <T>() => T>) => void)\n)[];\ndeclare global {\n\tinterface Window {\n\t\t_paq?: Matomo[];\n\t\t_mtm?: Record<string, string | number>[];\n\t\t_mtdsTracking?: AnalyticsActions[\"init\"];\n\t\t_mtdsUntrack?: () => void;\n\t}\n}\n\nexport type AnalyticsActions = {\n\tinit: {\n\t\tenabled?: boolean | \"debug\";\n\t\tconsent?: \"custom\" | true;\n\t} & (\n\t\t| {\n\t\t\t\tmatomoId: number | string;\n\t\t\t\tmatomoTagManagerId?: never;\n\t\t }\n\t\t| {\n\t\t\t\tmatomoId?: number | string;\n\t\t\t\tmatomoTagManagerId: string;\n\t\t }\n\t);\n\tpageview: {\n\t\turl?: string;\n\t\ttitle?: string;\n\t};\n\tevent: {\n\t\tcategory: string;\n\t\taction: string;\n\t\tname?: string;\n\t\tvalue?: number;\n\t};\n\tsearch: {\n\t\tquery: string;\n\t\tcategory?: string;\n\t\tresults?: number;\n\t};\n\tmatomo: Matomo;\n};\n\nexport function analytics<Action extends keyof AnalyticsActions>(\n\taction: Action,\n\targs = {} as AnalyticsActions[Action],\n) {\n\tif (!isBrowser()) return;\n\tif (!window._paq) {\n\t\twindow._paq = [];\n\t\twindow._paq.push([\"HeatmapSessionRecording::disable\"]); // Disable heatmaps by default as this require cookies\n\t\twindow._paq.push([\"enableLinkTracking\"]);\n\t\twindow._paq.push([\"setTrackerUrl\", `https://${MATOMO}/matomo.php`]);\n\t}\n\tif (!window._mtm) {\n\t\twindow._mtm = window._mtm || []; // Prepare Matomo Tag Manager\n\t\twindow._mtm.push({ \"mtm.startTime\": Date.now(), event: \"mtm.Start\" });\n\t}\n\n\tif (action === \"init\") {\n\t\twindow._mtdsTracking = {\n\t\t\tenabled: window.location.hostname !== \"localhost\",\n\t\t\t...window._mtdsTracking,\n\t\t\t...args,\n\t\t} as AnalyticsActions[\"init\"];\n\t\tconst { consent, enabled, matomoId, matomoTagManagerId } =\n\t\t\twindow._mtdsTracking;\n\n\t\tif (matomoId) window._paq.push([\"setSiteId\", matomoId]);\n\t\tif (enabled) {\n\t\t\tif (consent !== \"custom\") renderBanner();\n\t\t\tconst src = matomoTagManagerId\n\t\t\t\t? `https://cdn.matomo.cloud/${MATOMO}/container_${matomoTagManagerId}.js`\n\t\t\t\t: `https://cdn.matomo.cloud/${MATOMO}/matomo.js`;\n\n\t\t\tdocument.querySelector(`script[src=\"${src}\"]`) ||\n\t\t\t\tdocument.head.append(tag(\"script\", { async: \"\", src }));\n\t\t}\n\t}\n\n\tif (window._mtdsTracking?.enabled === false) return;\n\tif (window._mtdsTracking?.enabled === \"debug\")\n\t\treturn console.info(`analytics ${action}:`, args);\n\n\tif (action === \"pageview\") {\n\t\tconst { url, title } = args as AnalyticsActions[\"pageview\"];\n\t\twindow._paq.push([\"setCustomUrl\", url || location.href]);\n\t\twindow._paq.push([\"setDocumentTitle\", title || document.title]);\n\t\twindow._paq.push([\"trackPageView\"]);\n\t} else if (action === \"event\") {\n\t\tconst { category, action, name, value } = args as AnalyticsActions[\"event\"];\n\t\tconst event = [\"trackEvent\", category, action, name, value];\n\n\t\t// We do not want to track events with hash in URL as this causes hard-to-read data,\n\t\t// so temporarily remove the hash part, and add it back after the event is pushed\n\t\tlet url = location.href;\n\t\twindow._paq.push([\n\t\t\tfunction () {\n\t\t\t\turl = this.getCurrentUrl<string>();\n\t\t\t},\n\t\t]);\n\t\twindow._paq.push([\"setCustomUrl\", url.split(\"#\")[0]]); // Skip hash part of URL\n\t\twindow._paq.push(event.filter((v) => v !== undefined)); // Push event\n\t\twindow._paq.push([\"setCustomUrl\", url]); // Reverrt to original URL with hash\n\t} else if (action === \"search\") {\n\t\tconst {\n\t\t\tquery,\n\t\t\tcategory = false,\n\t\t\tresults = false,\n\t\t} = args as AnalyticsActions[\"search\"];\n\t\twindow._paq.push([\"trackSiteSearch\", query, category, results]);\n\t} else if (action === \"matomo\") {\n\t\tconst props = args as AnalyticsActions[\"matomo\"];\n\t\tconst needStr = MATOMO_STRINGS.includes(props?.[0] as string);\n\t\tif (needStr && typeof props[1] !== \"string\") props[1] = `${props[1] ?? \"\"}`; // Matomo dies if not string\n\t\twindow._paq.push(props);\n\t}\n}\n\nfunction renderBanner() {\n\tconst hasSeenBanner =\n\t\tdocument.getElementById(BANNER) || window.localStorage.getItem(BANNER);\n\n\tif (hasSeenBanner) return;\n\n\tdocument.body.insertAdjacentHTML(\n\t\t\"afterbegin\",\n\t\t`<dialog id=\"${BANNER}\" data-analytics=\"ignore\"><style>\n\t\t\t\t#${BANNER}[open] { box-sizing: border-box; display: flex; align-items: center; background: #116e6b; border-radius: .5em; border: 0; box-shadow: 0 .25em .5em rgba(0,0,0,.3); color: #fff; font-size: .875em; inset: auto auto 1em 1em; max-width: calc(100vw - 2em); outline: 0; padding: .5em; position: fixed; z-index: 99999 }\n\t\t\t\t#${BANNER} button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; width: 1.5em; height: 1.5em; font: 300 1.5em/1.35 sans-serif; border-radius: .25em; place-content: center; transition: .2s; transition-property: background, scale }\n\t\t\t\t#${BANNER} button:focus-visible { outline: 2px solid }\n\t\t\t\t#${BANNER} button:hover { background: #0a4e4f }\n\t\t\t\t#${BANNER} button:active { background: #054449; scale: .9 }\n\t\t\t\t#${BANNER} p { margin: 0 .25em }\n\t\t\t</style>\n\t\t\t<p>Vi bruker <a href=\"${BANNER_URL}\" target=\"_blank\">informasjonskapsler</a> for å forbedre brukeropplevelsen.</p>\n\t\t\t<form method=\"dialog\" data-analytics=\"ignore\"><button type=\"submit\" aria-label=\"OK\">×</button></form>\n\t\t</dialog>`,\n\t);\n\tconst banner = document.getElementById(BANNER) as HTMLDialogElement;\n\tconst onClose = () => window.localStorage.setItem(BANNER, \"seen\");\n\tbanner.addEventListener(\"close\", onClose, { once: true });\n\tbanner.show();\n}\n\nfunction handleAnalyticsTrack(event: Event) {\n\tif (window._mtdsTracking?.enabled) setTimeout(processTrack, 0, event); // Let other events process first\n}\n\nfunction processTrack({ type, target }: Event) {\n\tconst el = type === \"click\" ? (target as Element)?.closest?.(CLICKS) : target;\n\tif (!(el instanceof Element) || el.closest('[data-analytics=\"ignore\"]'))\n\t\treturn;\n\n\tlet action = \"click\";\n\tlet category = \"Button\";\n\tlet name = label(el) || heading(el) || attr(el, \"data-tooltip\") || \"\";\n\n\tif (type === \"submit\") {\n\t\tcategory = \"Form\";\n\t\taction = \"submit\";\n\t\tname = name || document.title;\n\t} else if (type === \"toggle\") {\n\t\tif (!el.matches(\"dialog:modal\")) return; // Skip non-modal dialogs\n\t\tcategory = \"Dialog\";\n\t\taction = \"open\";\n\t} else if (type === \"change\") {\n\t\tconst type = attr(el, \"type\");\n\t\tconst group =\n\t\t\ttype === \"checkbox\" || type === \"radio\" ? el.closest(\"fieldset\") : null;\n\n\t\tcategory = el.closest(CSS_CHIP) ? \"Chip\" : \"Form\";\n\t\taction = \"change\";\n\t\tname =\n\t\t\tlabel(group || el) ||\n\t\t\ttext(group?.querySelector(\"legend\")) ||\n\t\t\ttext((el as HTMLInputElement)?.labels?.[0]);\n\t} else if (attr(el, \"role\") === \"tab\") {\n\t\tcategory = \"Tab\";\n\t\taction = \"navigate\";\n\t} else if (attr(el, \"popovertarget\")) {\n\t\tif (!popover(el)?.matches(\":popover-open\")) return; // Skip if not open\n\t\tcategory = el.closest(CSS_HELPTEXT) ? \"HelpText\" : \"Popover\";\n\t\taction = \"open\";\n\t} else if (el.nodeName.endsWith(\"SUMMARY\")) {\n\t\tif (!(el.parentElement as HTMLDetailsElement).open) return; // Skip if not open\n\t\tcategory = \"Details\";\n\t\taction = \"open\";\n\t} else if (attr(el, \"data-command\") === \"toggle-app-expanded\") {\n\t\tconst open = style(el, \"--mtds-tooltip-position\") === \"none\";\n\t\tcategory = \"Sidebar\";\n\t\taction = open ? \"expand\" : \"minimize\";\n\t\tname = (open && attr(el, \"data-tooltip\")) || text(el);\n\t} else if (el.closest(CSS_BREADCRUMBS)) {\n\t\tcategory = \"Breadcrumbs\";\n\t\taction = \"navigate\";\n\t} else if (el.closest(CSS_PAGINATION)) {\n\t\tcategory = \"Pagintation\";\n\t\taction = \"navigate\";\n\t} else if (el.closest(CSS_CARD)) {\n\t\tcategory = \"Card\";\n\t\taction = el instanceof HTMLAnchorElement ? \"navigate\" : \"click\";\n\t} else if (el.closest(CSS_CHIP)) {\n\t\tcategory = \"Chip\";\n\t\taction = el.hasAttribute(\"data-removable\") ? \"remove\" : \"click\";\n\t} else if (el.closest(\"th[aria-sort]\")) {\n\t\tcategory = \"Table\";\n\t\taction = \"sort\";\n\t} else if (el instanceof HTMLAnchorElement) {\n\t\tcategory = \"Link\";\n\t\taction = el.protocol === \"mailto:\" ? \"email\" : \"navigate\";\n\t\tif (el.hasAttribute(\"download\")) action = \"download\";\n\t\telse if (el.hash && el.href.startsWith(location.href.split(\"#\")[0]))\n\t\t\taction = \"anchor\"; // Only track as anchor if same page\n\t} else if (el.hasAttribute(\"aria-expanded\")) {\n\t\tif (attr(el, \"aria-expanded\") !== \"true\") return; // Skip if not open\n\t\tcategory = \"Expand\";\n\t\taction = \"open\";\n\t} else if (el.nodeName.startsWith(\"MTDS-ATLAS-\")) {\n\t\tcategory = \"Map Marker\";\n\t\taction = \"open\";\n\t}\n\n\t// Respect attributes and send\n\tanalytics(\"event\", {\n\t\tcategory: attr(el, \"data-analytics-category\") ?? category,\n\t\taction: attr(el, \"data-analytics-action\") ?? action,\n\t\tname: attr(el, \"data-analytics-name\") ?? name,\n\t});\n}\n\n// Utilities\nconst text = (el?: Element | null) => el?.textContent?.trim() || \"\";\nconst label = (el?: Element | null) => (el && attr(el, \"aria-label\")) || \"\";\nconst popover = (el: Element) =>\n\tdocument.getElementById(attr(el, \"popovertarget\") || \"\");\nconst style = (el: Element, key: string) =>\n\twindow.getComputedStyle(el).getPropertyValue(key)?.trim();\nconst heading = (el: Element) => {\n\tconst body = text(el);\n\tconst head = text(el.querySelector(\"h1,h2,h3,h4,h5,h6\")); // Note: head might be empty string ''\n\treturn (body.startsWith(head) && head) || body.slice(0, 100).trim(); // Limit to 100 characters\n};\n\nonLoaded(() => [on(document, EVENTS, handleAnalyticsTrack, QUICK_EVENT)]);\n"],"names":["action","type"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"analytics.js","sources":["../../designsystem/analytics/analytics.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, isBrowser, on, onLoaded, QUICK_EVENT, tag } from \"../utils\";\n\nconst CSS_BREADCRUMBS = `.${styles.breadcrumbs.split(\" \")[0]}`;\nconst CSS_CARD = `.${styles.card.split(\" \")[0]}`;\nconst CSS_CHIP = `.${styles.chip.split(\" \")[0]}`;\nconst CSS_HELPTEXT = `.${styles.helptext.split(\" \")[0]}`;\nconst CSS_PAGINATION = `.${styles.pagination.split(\" \")[0]}`;\nconst CLICKS = `summary,u-summary,a,button,[role=\"tab\"],[role=\"button\"]`;\nconst EVENTS = \"click,toggle,submit,change\";\nconst MATOMO = \"mattilsynet.matomo.cloud\";\nconst MATOMO_STRINGS = [\"setCustomUrl\", \"setDocumentTitle\", \"setReferrerUrl\"];\nconst BANNER = \"mtds-analytics-banner\"; // Dialog to show Matomo script loading\nconst BANNER_URL =\n\t\"https://www.mattilsynet.no/om-mattilsynet/personvernerklaering/informasjonskapsler\";\n\ntype Matomo = (\n\t| string\n\t| number\n\t| boolean\n\t| Document\n\t| Element\n\t| ((this: Record<string, <T>() => T>) => void)\n)[];\ndeclare global {\n\tinterface Window {\n\t\t_paq?: Matomo[];\n\t\t_mtm?: Record<string, string | number>[];\n\t\t_mtdsTracking?: AnalyticsActions[\"init\"];\n\t\t_mtdsUntrack?: () => void;\n\t}\n}\n\nexport type AnalyticsActions = {\n\tinit: {\n\t\tenabled?: boolean | \"debug\";\n\t\tconsent?: \"custom\" | true;\n\t} & (\n\t\t| {\n\t\t\t\tmatomoId: number | string;\n\t\t\t\tmatomoTagManagerId?: never;\n\t\t }\n\t\t| {\n\t\t\t\tmatomoId?: number | string;\n\t\t\t\tmatomoTagManagerId: string;\n\t\t }\n\t);\n\tpageview: {\n\t\turl?: string;\n\t\ttitle?: string;\n\t};\n\tevent: {\n\t\tcategory: string;\n\t\taction: string;\n\t\tname?: string;\n\t\tvalue?: number;\n\t};\n\tsearch: {\n\t\tquery: string;\n\t\tcategory?: string;\n\t\tresults?: number;\n\t};\n\tmatomo: Matomo;\n};\n\nexport function analytics<Action extends keyof AnalyticsActions>(\n\taction: Action,\n\targs = {} as AnalyticsActions[Action],\n) {\n\tif (!isBrowser()) return;\n\tif (!window._paq) {\n\t\twindow._paq = [];\n\t\twindow._paq.push([\"HeatmapSessionRecording::disable\"]); // Disable heatmaps by default as this require cookies\n\t\twindow._paq.push([\"enableLinkTracking\"]);\n\t\twindow._paq.push([\"setTrackerUrl\", `https://${MATOMO}/matomo.php`]);\n\t}\n\tif (!window._mtm) {\n\t\twindow._mtm = window._mtm || []; // Prepare Matomo Tag Manager\n\t\twindow._mtm.push({ \"mtm.startTime\": Date.now(), event: \"mtm.Start\" });\n\t}\n\n\tif (action === \"init\") {\n\t\twindow._mtdsTracking = {\n\t\t\tenabled: window.location.hostname !== \"localhost\",\n\t\t\t...window._mtdsTracking,\n\t\t\t...args,\n\t\t} as AnalyticsActions[\"init\"];\n\t\tconst { consent, enabled, matomoId, matomoTagManagerId } =\n\t\t\twindow._mtdsTracking;\n\n\t\tif (matomoId) window._paq.push([\"setSiteId\", matomoId]);\n\t\tif (enabled) {\n\t\t\tif (consent !== \"custom\") renderBanner();\n\t\t\tconst src = matomoTagManagerId\n\t\t\t\t? `https://cdn.matomo.cloud/${MATOMO}/container_${matomoTagManagerId}.js`\n\t\t\t\t: `https://cdn.matomo.cloud/${MATOMO}/matomo.js`;\n\n\t\t\tdocument.querySelector(`script[src=\"${src}\"]`) ||\n\t\t\t\tdocument.head.append(tag(\"script\", { async: \"\", src }));\n\t\t}\n\t}\n\n\tif (window._mtdsTracking?.enabled === false) return;\n\tif (window._mtdsTracking?.enabled === \"debug\")\n\t\treturn console.info(`analytics ${action}:`, args);\n\n\tif (action === \"pageview\") {\n\t\tconst { url, title } = args as AnalyticsActions[\"pageview\"];\n\t\twindow._paq.push([\"setCustomUrl\", url || location.href]);\n\t\twindow._paq.push([\"setDocumentTitle\", title || document.title]);\n\t\twindow._paq.push([\"trackPageView\"]);\n\t} else if (action === \"event\") {\n\t\tconst { category, action, name, value } = args as AnalyticsActions[\"event\"];\n\t\tconst event = [\"trackEvent\", category, action, name, value];\n\n\t\t// We do not want to track events with hash in URL as this causes hard-to-read data,\n\t\t// so temporarily remove the hash part, and add it back after the event is pushed\n\t\tlet url = location.href;\n\t\twindow._paq.push([\n\t\t\tfunction () {\n\t\t\t\turl = this.getCurrentUrl<string>();\n\t\t\t},\n\t\t]);\n\t\twindow._paq.push([\"setCustomUrl\", url.split(\"#\")[0]]); // Skip hash part of URL\n\t\twindow._paq.push(event.filter((v) => v !== undefined)); // Push event\n\t\twindow._paq.push([\"setCustomUrl\", url]); // Reverrt to original URL with hash\n\t} else if (action === \"search\") {\n\t\tconst {\n\t\t\tquery,\n\t\t\tcategory = false,\n\t\t\tresults = false,\n\t\t} = args as AnalyticsActions[\"search\"];\n\t\twindow._paq.push([\"trackSiteSearch\", query, category, results]);\n\t} else if (action === \"matomo\") {\n\t\tconst props = args as AnalyticsActions[\"matomo\"];\n\t\tconst needStr = MATOMO_STRINGS.includes(props?.[0] as string);\n\t\tif (needStr && typeof props[1] !== \"string\") props[1] = `${props[1] ?? \"\"}`; // Matomo dies if not string\n\t\twindow._paq.push(props);\n\t}\n}\n\nfunction renderBanner() {\n\tconst hasSeenBanner =\n\t\tdocument.getElementById(BANNER) || window.localStorage.getItem(BANNER);\n\n\tif (hasSeenBanner) return;\n\n\tdocument.body.insertAdjacentHTML(\n\t\t\"afterbegin\",\n\t\t`<dialog id=\"${BANNER}\" data-analytics=\"ignore\"><style>\n\t\t\t\t#${BANNER}[open] { box-sizing: border-box; display: flex; align-items: center; background: #116e6b; border-radius: .5em; border: 0; box-shadow: 0 .25em .5em rgba(0,0,0,.3); color: #fff; font-size: .875em; inset: auto auto 1em 1em; max-width: calc(100vw - 2em); outline: 0; padding: .5em; position: fixed; z-index: 99999 }\n\t\t\t\t#${BANNER} button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; width: 1.5em; height: 1.5em; font: 300 1.5em/1.35 sans-serif; border-radius: .25em; place-content: center; transition: .2s; transition-property: background, scale }\n\t\t\t\t#${BANNER} button:focus-visible { outline: 2px solid }\n\t\t\t\t#${BANNER} button:hover { background: #0a4e4f }\n\t\t\t\t#${BANNER} button:active { background: #054449; scale: .9 }\n\t\t\t\t#${BANNER} p { margin: 0 .25em }\n\t\t\t</style>\n\t\t\t<p>Vi bruker <a href=\"${BANNER_URL}\" target=\"_blank\">informasjonskapsler</a> for å forbedre brukeropplevelsen.</p>\n\t\t\t<form method=\"dialog\" data-analytics=\"ignore\"><button type=\"submit\" aria-label=\"OK\">×</button></form>\n\t\t</dialog>`,\n\t);\n\tconst banner = document.getElementById(BANNER) as HTMLDialogElement;\n\tconst onClose = () => window.localStorage.setItem(BANNER, \"seen\");\n\tbanner.addEventListener(\"close\", onClose, { once: true });\n\tbanner.show();\n}\n\nfunction handleAnalyticsTrack(event: Event) {\n\tif (window._mtdsTracking?.enabled) setTimeout(processTrack, 0, event); // Let other events process first\n}\n\nfunction processTrack({ type, target }: Event) {\n\tconst el = type === \"click\" ? (target as Element)?.closest?.(CLICKS) : target;\n\tif (!(el instanceof Element) || el.closest('[data-analytics=\"ignore\"]'))\n\t\treturn;\n\n\tlet action = \"click\";\n\tlet category = \"Button\";\n\tlet name = label(el) || heading(el) || attr(el, \"data-tooltip\") || \"\";\n\n\tif (type === \"submit\") {\n\t\tcategory = \"Form\";\n\t\taction = \"submit\";\n\t\tname = name || document.title;\n\t} else if (type === \"toggle\") {\n\t\tif (!el.matches(\"dialog:modal\")) return; // Skip non-modal dialogs\n\t\tcategory = \"Dialog\";\n\t\taction = \"open\";\n\t} else if (type === \"change\") {\n\t\tconst type = attr(el, \"type\");\n\t\tconst group =\n\t\t\ttype === \"checkbox\" || type === \"radio\" ? el.closest(\"fieldset\") : null;\n\n\t\tcategory = el.closest(CSS_CHIP) ? \"Chip\" : \"Form\";\n\t\taction = \"change\";\n\t\tname =\n\t\t\tlabel(group || el) ||\n\t\t\ttext(group?.querySelector(\"legend\")) ||\n\t\t\ttext((el as HTMLInputElement)?.labels?.[0]);\n\t} else if (attr(el, \"role\") === \"tab\") {\n\t\tcategory = \"Tab\";\n\t\taction = \"navigate\";\n\t} else if (attr(el, \"popovertarget\")) {\n\t\tif (!popover(el)?.matches(\":popover-open\")) return; // Skip if not open\n\t\tcategory = el.closest(CSS_HELPTEXT) ? \"HelpText\" : \"Popover\";\n\t\taction = \"open\";\n\t} else if (el.nodeName.endsWith(\"SUMMARY\")) {\n\t\tif (!(el.parentElement as HTMLDetailsElement).open) return; // Skip if not open\n\t\tcategory = \"Details\";\n\t\taction = \"open\";\n\t} else if (attr(el, \"data-command\") === \"toggle-app-expanded\") {\n\t\tconst open = style(el, \"--mtds-tooltip-position\") === \"none\";\n\t\tcategory = \"Sidebar\";\n\t\taction = open ? \"expand\" : \"minimize\";\n\t\tname = (open && attr(el, \"data-tooltip\")) || text(el);\n\t} else if (el.closest(CSS_BREADCRUMBS)) {\n\t\tcategory = \"Breadcrumbs\";\n\t\taction = \"navigate\";\n\t} else if (el.closest(CSS_PAGINATION)) {\n\t\tcategory = \"Pagintation\";\n\t\taction = \"navigate\";\n\t} else if (el.closest(CSS_CARD)) {\n\t\tcategory = \"Card\";\n\t\taction = el instanceof HTMLAnchorElement ? \"navigate\" : \"click\";\n\t} else if (el.closest(CSS_CHIP)) {\n\t\tcategory = \"Chip\";\n\t\taction = el.hasAttribute(\"data-removable\") ? \"remove\" : \"click\";\n\t} else if (el.closest(\"th[aria-sort]\")) {\n\t\tcategory = \"Table\";\n\t\taction = \"sort\";\n\t} else if (el instanceof HTMLAnchorElement) {\n\t\tcategory = \"Link\";\n\t\taction = el.protocol === \"mailto:\" ? \"email\" : \"navigate\";\n\t\tif (el.hasAttribute(\"download\")) action = \"download\";\n\t\telse if (el.hash && el.href.startsWith(location.href.split(\"#\")[0]))\n\t\t\taction = \"anchor\"; // Only track as anchor if same page\n\t} else if (el.hasAttribute(\"aria-expanded\")) {\n\t\tif (attr(el, \"aria-expanded\") !== \"true\") return; // Skip if not open\n\t\tcategory = \"Expand\";\n\t\taction = \"open\";\n\t} else if (el.nodeName.startsWith(\"MTDS-ATLAS-\")) {\n\t\tcategory = \"Map Marker\";\n\t\taction = \"open\";\n\t}\n\n\t// Respect attributes and send\n\tanalytics(\"event\", {\n\t\tcategory: attr(el, \"data-analytics-category\") ?? category,\n\t\taction: attr(el, \"data-analytics-action\") ?? action,\n\t\tname: attr(el, \"data-analytics-name\") ?? name,\n\t});\n}\n\n// Utilities\nconst text = (el?: Element | null) => el?.textContent?.trim() || \"\";\nconst label = (el?: Element | null) => (el && attr(el, \"aria-label\")) || \"\";\nconst popover = (el: Element) =>\n\tdocument.getElementById(attr(el, \"popovertarget\") || \"\");\nconst style = (el: Element, key: string) =>\n\twindow.getComputedStyle(el).getPropertyValue(key)?.trim();\nconst heading = (el: Element) => {\n\tconst body = text(el);\n\tconst head = text(el.querySelector(\"h1,h2,h3,h4,h5,h6\")); // Note: head might be empty string ''\n\treturn (body.startsWith(head) && head) || body.slice(0, 100).trim(); // Limit to 100 characters\n};\n\nonLoaded(() => [on(document, EVENTS, handleAnalyticsTrack, QUICK_EVENT)]);\n"],"names":["CSS_BREADCRUMBS","styles","CSS_CARD","CSS_CHIP","CSS_HELPTEXT","CSS_PAGINATION","CLICKS","EVENTS","MATOMO","MATOMO_STRINGS","BANNER","BANNER_URL","analytics","action","args","isBrowser","consent","enabled","matomoId","matomoTagManagerId","renderBanner","src","tag","url","title","category","name","value","event","v","query","results","props","banner","onClose","handleAnalyticsTrack","processTrack","type","target","el","label","heading","attr","group","text","popover","open","style","key","body","head","onLoaded","on","QUICK_EVENT"],"mappings":"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"}
|
package/mtds/app/app-observer.js
CHANGED
|
@@ -1,84 +1,38 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { isBrowser, onLoaded, on, QUICK_EVENT, debounce } from "../utils.js";
|
|
3
|
-
import "./app-
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const CSS_SIDEBAR = `.${CSS_APP} > dialog,.${CSS_APP} dialog ~ main`;
|
|
8
|
-
const STICKIES = isBrowser() ? document.getElementsByClassName(CSS_STICKY) : [];
|
|
9
|
-
const useTransition = (callback) => {
|
|
10
|
-
if (!document.startViewTransition) callback();
|
|
11
|
-
else document.startViewTransition(callback);
|
|
12
|
-
};
|
|
13
|
-
const toggleAppExpanded = (force) => (
|
|
1
|
+
import S from "../styles.module.css.js";
|
|
2
|
+
import { isBrowser as T, onLoaded as P, on as r, QUICK_EVENT as p, debounce as _ } from "../utils.js";
|
|
3
|
+
import "./app-toggle2.js";
|
|
4
|
+
const u = S.app.split(" ")[0], E = S.sticky.split(" ")[0], I = '[data-command="toggle-app-expanded"]', f = `.${u} > dialog,.${u} dialog ~ main`, m = T() ? document.getElementsByClassName(E) : [], C = (t) => {
|
|
5
|
+
document.startViewTransition ? document.startViewTransition(t) : t();
|
|
6
|
+
}, h = (t) => (
|
|
14
7
|
// @ts-expect-error window.mtdsAppToggle comes from app-toggle.js
|
|
15
|
-
|
|
8
|
+
C(() => window.mtdsToggleAppExpanded?.(t))
|
|
16
9
|
);
|
|
17
|
-
function
|
|
18
|
-
const
|
|
19
|
-
if (
|
|
20
|
-
return
|
|
21
|
-
if (
|
|
10
|
+
function x({ target: t, defaultPrevented: i }) {
|
|
11
|
+
const n = t?.closest?.("a");
|
|
12
|
+
if (n?.closest("dialog") && n?.closest(f))
|
|
13
|
+
return w();
|
|
14
|
+
if (i || !(t instanceof HTMLButtonElement) || !t.matches(I))
|
|
22
15
|
return;
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
const sidebar = document.querySelector(CSS_SIDEBAR);
|
|
28
|
-
sidebar?.setAttribute("data-closedby", "any");
|
|
29
|
-
sidebar?.showModal();
|
|
30
|
-
});
|
|
16
|
+
getComputedStyle(t).position === "sticky" ? h() : C(() => {
|
|
17
|
+
const g = document.querySelector(f);
|
|
18
|
+
g?.setAttribute("data-closedby", "any"), g?.showModal();
|
|
19
|
+
});
|
|
31
20
|
}
|
|
32
|
-
function
|
|
33
|
-
document.querySelector(
|
|
21
|
+
function w() {
|
|
22
|
+
document.querySelector(f)?.close();
|
|
34
23
|
}
|
|
35
|
-
let
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
let STUCK = false;
|
|
41
|
-
let WIN_H = 0;
|
|
42
|
-
let WIN_Y = 0;
|
|
43
|
-
function handleAppScroll() {
|
|
44
|
-
if (!STICKIES?.length) return;
|
|
45
|
-
const el = STICKIES[0];
|
|
46
|
-
const NEXT_Y = window.scrollY;
|
|
47
|
-
const NEXT_UP = NEXT_Y < WIN_Y;
|
|
48
|
-
WIN_Y = NEXT_Y;
|
|
49
|
-
if (NEXT_UP !== SCROLL_UP) {
|
|
50
|
-
MIN_Y = (el.parentElement?.getBoundingClientRect().top || 0) + WIN_Y;
|
|
51
|
-
SCROLL_UP = NEXT_UP;
|
|
52
|
-
STICK_H = el.offsetHeight;
|
|
53
|
-
STICK_Y = el.getBoundingClientRect().top + WIN_Y;
|
|
54
|
-
STUCK = el.offsetHeight <= window.innerHeight;
|
|
55
|
-
WIN_H = window.innerHeight;
|
|
56
|
-
}
|
|
57
|
-
if (STICK === -1 && STUCK) return;
|
|
58
|
-
if (STICK !== -1 && (STUCK || SCROLL_UP && WIN_Y <= STICK_Y)) {
|
|
59
|
-
el.style.setProperty("--pos", "sticky");
|
|
60
|
-
el.style.setProperty("--top", "0px");
|
|
61
|
-
STICK = -1;
|
|
62
|
-
} else if (STICK === -1 && !SCROLL_UP) {
|
|
63
|
-
el.style.setProperty("--pos", "relative");
|
|
64
|
-
el.style.setProperty("--top", `${Math.max(0, WIN_Y - MIN_Y)}px`);
|
|
65
|
-
STICK = 0;
|
|
66
|
-
} else if (STICK !== 1 && !SCROLL_UP && WIN_Y + WIN_H >= STICK_Y + STICK_H) {
|
|
67
|
-
el.style.setProperty("--pos", "sticky");
|
|
68
|
-
el.style.setProperty("--top", `${WIN_H - STICK_H}px`);
|
|
69
|
-
STICK = 1;
|
|
70
|
-
} else if (STICK === 1 && SCROLL_UP) {
|
|
71
|
-
el.style.setProperty("--pos", "relative");
|
|
72
|
-
el.style.setProperty("--top", `${STICK_Y - MIN_Y}px`);
|
|
73
|
-
STICK = 0;
|
|
74
|
-
}
|
|
24
|
+
let c = 0, s, e = 0, d = 0, l = 0, a = !1, y = 0, o = 0;
|
|
25
|
+
function k() {
|
|
26
|
+
if (!m?.length) return;
|
|
27
|
+
const t = m[0], i = window.scrollY, n = i < o;
|
|
28
|
+
o = i, n !== s && (c = (t.parentElement?.getBoundingClientRect().top || 0) + o, s = n, d = t.offsetHeight, l = t.getBoundingClientRect().top + o, a = t.offsetHeight <= window.innerHeight, y = window.innerHeight), !(e === -1 && a) && (e !== -1 && (a || s && o <= l) ? (t.style.setProperty("--pos", "sticky"), t.style.setProperty("--top", "0px"), e = -1) : e === -1 && !s ? (t.style.setProperty("--pos", "relative"), t.style.setProperty("--top", `${Math.max(0, o - c)}px`), e = 0) : e !== 1 && !s && o + y >= l + d ? (t.style.setProperty("--pos", "sticky"), t.style.setProperty("--top", `${y - d}px`), e = 1) : e === 1 && s && (t.style.setProperty("--pos", "relative"), t.style.setProperty("--top", `${l - c}px`), e = 0));
|
|
75
29
|
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
30
|
+
P(() => [
|
|
31
|
+
r(document, "click", x, p),
|
|
32
|
+
r(window, "resize", _(w, 100), p),
|
|
33
|
+
r(window, "scroll", k, p)
|
|
80
34
|
]);
|
|
81
35
|
export {
|
|
82
|
-
toggleAppExpanded
|
|
36
|
+
h as toggleAppExpanded
|
|
83
37
|
};
|
|
84
38
|
//# 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 { debounce, isBrowser, on, onLoaded, 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`;\nconst STICKIES = isBrowser() ? document.getElementsByClassName(CSS_STICKY) : [];\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 handleAppToggleClick({ target: el, defaultPrevented: stop }: Event) {\n\tconst link = (el as Element)?.closest?.(\"a\");\n\tif (link?.closest(\"dialog\") && link?.closest(CSS_SIDEBAR))\n\t\treturn closeSidebar(); // Close sidebar if link is clicked inside sidebar\n\n\tif (stop || !(el instanceof HTMLButtonElement) || !el.matches(CSS_TOGGLE))\n\t\treturn;\n\tconst isDesktop = getComputedStyle(el).position === \"sticky\";\n\n\tif (isDesktop) toggleAppExpanded();\n\telse\n\t\tuseTransition(() => {\n\t\t\tconst sidebar = document.querySelector<HTMLDialogElement>(CSS_SIDEBAR);\n\t\t\tsidebar?.setAttribute(\"data-closedby\", \"any\"); // Allow closing by clicking outside\n\t\t\tsidebar?.showModal();\n\t\t});\n}\n\nfunction closeSidebar() {\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_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 handleAppScroll() {\n\tif (!STICKIES?.length) return;\n\tconst el = STICKIES[0] as HTMLElement;\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 = (el.parentElement?.getBoundingClientRect().top || 0) + WIN_Y;\n\t\tSCROLL_UP = NEXT_UP;\n\t\tSTICK_H = el.offsetHeight;\n\t\tSTICK_Y = el.getBoundingClientRect().top + WIN_Y;\n\t\tSTUCK = 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\tel.style.setProperty(\"--pos\", \"sticky\");\n\t\tel.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\tel.style.setProperty(\"--pos\", \"relative\");\n\t\tel.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\tel.style.setProperty(\"--pos\", \"sticky\");\n\t\tel.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\tel.style.setProperty(\"--pos\", \"relative\");\n\t\tel.style.setProperty(\"--top\", `${STICK_Y - MIN_Y}px`);\n\t\tSTICK = 0; // Sticking to bottom and scrolling up\n\t}\n}\n\nonLoaded(() => [\n\ton(document, \"click\", handleAppToggleClick, QUICK_EVENT),\n\ton(window, \"resize\", debounce(closeSidebar, 100), QUICK_EVENT),\n\ton(window, \"scroll\", handleAppScroll, QUICK_EVENT),\n]);\n"],"names":[],"mappings":";;;AAIA,
|
|
1
|
+
{"version":3,"file":"app-observer.js","sources":["../../designsystem/app/app-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { debounce, isBrowser, on, onLoaded, 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`;\nconst STICKIES = isBrowser() ? document.getElementsByClassName(CSS_STICKY) : [];\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 handleAppToggleClick({ target: el, defaultPrevented: stop }: Event) {\n\tconst link = (el as Element)?.closest?.(\"a\");\n\tif (link?.closest(\"dialog\") && link?.closest(CSS_SIDEBAR))\n\t\treturn closeSidebar(); // Close sidebar if link is clicked inside sidebar\n\n\tif (stop || !(el instanceof HTMLButtonElement) || !el.matches(CSS_TOGGLE))\n\t\treturn;\n\tconst isDesktop = getComputedStyle(el).position === \"sticky\";\n\n\tif (isDesktop) toggleAppExpanded();\n\telse\n\t\tuseTransition(() => {\n\t\t\tconst sidebar = document.querySelector<HTMLDialogElement>(CSS_SIDEBAR);\n\t\t\tsidebar?.setAttribute(\"data-closedby\", \"any\"); // Allow closing by clicking outside\n\t\t\tsidebar?.showModal();\n\t\t});\n}\n\nfunction closeSidebar() {\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_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 handleAppScroll() {\n\tif (!STICKIES?.length) return;\n\tconst el = STICKIES[0] as HTMLElement;\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 = (el.parentElement?.getBoundingClientRect().top || 0) + WIN_Y;\n\t\tSCROLL_UP = NEXT_UP;\n\t\tSTICK_H = el.offsetHeight;\n\t\tSTICK_Y = el.getBoundingClientRect().top + WIN_Y;\n\t\tSTUCK = 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\tel.style.setProperty(\"--pos\", \"sticky\");\n\t\tel.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\tel.style.setProperty(\"--pos\", \"relative\");\n\t\tel.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\tel.style.setProperty(\"--pos\", \"sticky\");\n\t\tel.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\tel.style.setProperty(\"--pos\", \"relative\");\n\t\tel.style.setProperty(\"--top\", `${STICK_Y - MIN_Y}px`);\n\t\tSTICK = 0; // Sticking to bottom and scrolling up\n\t}\n}\n\nonLoaded(() => [\n\ton(document, \"click\", handleAppToggleClick, QUICK_EVENT),\n\ton(window, \"resize\", debounce(closeSidebar, 100), QUICK_EVENT),\n\ton(window, \"scroll\", handleAppScroll, QUICK_EVENT),\n]);\n"],"names":["CSS_APP","styles","CSS_STICKY","CSS_TOGGLE","CSS_SIDEBAR","STICKIES","isBrowser","useTransition","callback","toggleAppExpanded","force","handleAppToggleClick","el","stop","link","closeSidebar","sidebar","MIN_Y","SCROLL_UP","STICK","STICK_H","STICK_Y","STUCK","WIN_H","WIN_Y","handleAppScroll","NEXT_Y","NEXT_UP","onLoaded","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,kBAC9CK,IAAWC,EAAA,IAAc,SAAS,uBAAuBJ,CAAU,IAAI,CAAA,GAEvEK,IAAgB,CAACC,MAAyB;AAC/C,EAAK,SAAS,sBACT,SAAS,oBAAoBA,CAAQ,IADPA,EAAA;AAEpC,GAEaC,IAAoB,CAACC;AAAA;AAAA,EAEjCH,EAAc,MAAM,OAAO,wBAAwBG,CAAK,CAAC;AAAA;AAE1D,SAASC,EAAqB,EAAE,QAAQC,GAAI,kBAAkBC,KAAe;AAC5E,QAAMC,IAAQF,GAAgB,UAAU,GAAG;AAC3C,MAAIE,GAAM,QAAQ,QAAQ,KAAKA,GAAM,QAAQV,CAAW;AACvD,WAAOW,EAAA;AAER,MAAIF,KAAQ,EAAED,aAAc,sBAAsB,CAACA,EAAG,QAAQT,CAAU;AACvE;AAGD,EAFkB,iBAAiBS,CAAE,EAAE,aAAa,WAErCH,EAAA,IAEdF,EAAc,MAAM;AACnB,UAAMS,IAAU,SAAS,cAAiCZ,CAAW;AACrE,IAAAY,GAAS,aAAa,iBAAiB,KAAK,GAC5CA,GAAS,UAAA;AAAA,EACV,CAAC;AACH;AAEA,SAASD,IAAe;AACvB,WAAS,cAAiCX,CAAW,GAAG,MAAA;AACzD;AAGA,IAAIa,IAAQ,GACRC,GACAC,IAAQ,GACRC,IAAU,GACVC,IAAU,GACVC,IAAQ,IACRC,IAAQ,GACRC,IAAQ;AAEZ,SAASC,IAAkB;AAC1B,MAAI,CAACpB,GAAU,OAAQ;AACvB,QAAMO,IAAKP,EAAS,CAAC,GACfqB,IAAS,OAAO,SAChBC,IAAUD,IAASF;AAazB,EAZAA,IAAQE,GAGJC,MAAYT,MACfD,KAASL,EAAG,eAAe,sBAAA,EAAwB,OAAO,KAAKY,GAC/DN,IAAYS,GACZP,IAAUR,EAAG,cACbS,IAAUT,EAAG,sBAAA,EAAwB,MAAMY,GAC3CF,IAAQV,EAAG,gBAAgB,OAAO,aAClCW,IAAQ,OAAO,cAGZ,EAAAJ,MAAU,MAAMG,OAChBH,MAAU,OAAOG,KAAUJ,KAAaM,KAASH,MACpDT,EAAG,MAAM,YAAY,SAAS,QAAQ,GACtCA,EAAG,MAAM,YAAY,SAAS,KAAK,GACnCO,IAAQ,MACEA,MAAU,MAAM,CAACD,KAC3BN,EAAG,MAAM,YAAY,SAAS,UAAU,GACxCA,EAAG,MAAM,YAAY,SAAS,GAAG,KAAK,IAAI,GAAGY,IAAQP,CAAK,CAAC,IAAI,GAC/DE,IAAQ,KACEA,MAAU,KAAK,CAACD,KAAaM,IAAQD,KAASF,IAAUD,KAClER,EAAG,MAAM,YAAY,SAAS,QAAQ,GACtCA,EAAG,MAAM,YAAY,SAAS,GAAGW,IAAQH,CAAO,IAAI,GACpDD,IAAQ,KACEA,MAAU,KAAKD,MACzBN,EAAG,MAAM,YAAY,SAAS,UAAU,GACxCA,EAAG,MAAM,YAAY,SAAS,GAAGS,IAAUJ,CAAK,IAAI,GACpDE,IAAQ;AAEV;AAEAS,EAAS,MAAM;AAAA,EACdC,EAAG,UAAU,SAASlB,GAAsBmB,CAAW;AAAA,EACvDD,EAAG,QAAQ,UAAUE,EAAShB,GAAc,GAAG,GAAGe,CAAW;AAAA,EAC7DD,EAAG,QAAQ,UAAUJ,GAAiBK,CAAW;AAClD,CAAC;"}
|