@mattilsynet/design 2.2.30 → 2.3.0

package/mtds/analytics/analytics.js

@@ -1,7 +1,7 @@
-import m from "../styles.module.css.js";
-import { onLoaded as w, isBrowser as g, tag as b, on as y, QUICK_EVENT as _, attr as i } from "../utils.js";
-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";
-function E(o, a = {}) {
+import d from "../styles.module.css.js";
+import { onLoaded as w, isBrowser as g, tag as b, on as y, QUICK_EVENT as _, attr as s } from "../utils.js";
+const S = `[data-command="toggle-app-expanded"],.${d.app.split(" ")[0]} > [command="show-modal"]`, k = `.${d.breadcrumbs.split(" ")[0]}`, T = `.${d.card.split(" ")[0]}`, u = `.${d.chip.split(" ")[0]}`, v = `.${d.helptext.split(" ")[0]}`, C = `.${d.pagination.split(" ")[0]}`, x = 'summary,u-summary,a,button,[role="tab"],[role="button"]', $ = "click,toggle,submit,change", p = "mattilsynet.matomo.cloud", E = ["setCustomUrl", "setDocumentTitle", "setReferrerUrl"], i = "mtds-analytics-banner", q = "https://www.mattilsynet.no/om-mattilsynet/personvernerklaering/informasjonskapsler";
+function A(o, a = {}) {
   if (g()) {
     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") {
       window._mtdsTracking = {
@@ -11,7 +11,7 @@ function E(o, a = {}) {
       };
       const { consent: e, enabled: t, matomoId: n, matomoTagManagerId: r } = window._mtdsTracking;
       if (n && window._paq.push(["setSiteId", n]), t) {
-        e !== "custom" && A();
+        e !== "custom" && I();
         const l = r ? `https://cdn.matomo.cloud/${p}/container_${r}.js` : `https://cdn.matomo.cloud/${p}/matomo.js`;
         document.querySelector(`script[src="${l}"]`) || document.head.append(b("script", { async: "", src: l }));
       }
@@ -39,62 +39,62 @@ function E(o, a = {}) {
         window._paq.push(["trackSiteSearch", e, t, n]);
       } else if (o === "matomo") {
         const e = a;
-        $.includes(e?.[0]) && typeof e[1] != "string" && (e[1] = `${e[1] ?? ""}`), window._paq.push(e);
+        E.includes(e?.[0]) && typeof e[1] != "string" && (e[1] = `${e[1] ?? ""}`), window._paq.push(e);
       }
     }
   }
 }
-function A() {
-  if (document.getElementById(s) || window.localStorage.getItem(s)) return;
+function I() {
+  if (document.getElementById(i) || window.localStorage.getItem(i)) return;
   document.body.insertAdjacentHTML(
     "afterbegin",
-    `<dialog id="${s}" data-analytics="ignore"><style>
-				#${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 }
-				#${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 }
-				#${s} button:focus-visible { outline: 2px solid }
-				#${s} button:hover { background: #0a4e4f }
-				#${s} button:active { background: #054449; scale: .9 }
-				#${s} p { margin: 0 .25em }
+    `<dialog id="${i}" data-analytics="ignore"><style>
+				#${i}[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 }
+				#${i} 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 }
+				#${i} button:focus-visible { outline: 2px solid }
+				#${i} button:hover { background: #0a4e4f }
+				#${i} button:active { background: #054449; scale: .9 }
+				#${i} p { margin: 0 .25em }
 			</style>
 			<p>Vi bruker <a href="${q}" target="_blank">informasjonskapsler</a> for å forbedre brukeropplevelsen.</p>
 			<form method="dialog" data-analytics="ignore"><button type="submit" aria-label="OK">&times;</button></form>
 		</dialog>`
   );
-  const a = document.getElementById(s), e = () => window.localStorage.setItem(s, "seen");
+  const a = document.getElementById(i), e = () => window.localStorage.setItem(i, "seen");
   a.addEventListener("close", e, { once: !0 }), a.show();
 }
-function I(o) {
-  window._mtdsTracking?.enabled && setTimeout(M, 0, o);
+function M(o) {
+  window._mtdsTracking?.enabled && setTimeout(B, 0, o);
 }
-function M({ type: o, target: a }) {
+function B({ type: o, target: a }) {
   const e = o === "click" ? a?.closest?.(x) : a;
   if (!(e instanceof Element) || e.closest('[data-analytics="ignore"]'))
     return;
-  let t = "click", n = "Button", r = f(e) || N(e) || i(e, "data-tooltip") || "";
+  let t = "click", n = "Button", r = f(e) || U(e) || s(e, "data-tooltip") || "";
   if (o === "submit")
     n = "Form", t = "submit", r = r || document.title;
   else if (o === "toggle") {
     if (!e.matches("dialog:modal")) return;
     n = "Dialog", t = "open";
   } else if (o === "change") {
-    const l = i(e, "type"), c = l === "checkbox" || l === "radio" ? e.closest("fieldset") : null;
-    n = e.closest(u) ? "Chip" : "Form", t = "change", r = f(c || e) || d(c?.querySelector("legend")) || d(e?.labels?.[0]);
-  } else if (i(e, "role") === "tab")
+    const l = s(e, "type"), c = l === "checkbox" || l === "radio" ? e.closest("fieldset") : null;
+    n = e.closest(u) ? "Chip" : "Form", t = "change", r = f(c || e) || m(c?.querySelector("legend")) || m(e?.labels?.[0]);
+  } else if (s(e, "role") === "tab")
     n = "Tab", t = "navigate";
-  else if (i(e, "popovertarget")) {
-    if (!B(e)?.matches(":popover-open")) return;
-    n = e.closest(T) ? "HelpText" : "Popover", t = "open";
+  else if (s(e, "popovertarget")) {
+    if (!L(e)?.matches(":popover-open")) return;
+    n = e.closest(v) ? "HelpText" : "Popover", t = "open";
   } else if (e.nodeName.endsWith("SUMMARY")) {
     if (!e.parentElement.open) return;
     n = "Details", t = "open";
-  } else if (i(e, "data-command") === "toggle-app-expanded") {
-    const l = L(e, "--mtds-tooltip-position") === "none";
-    n = "Sidebar", t = l ? "expand" : "minimize", r = l && i(e, "data-tooltip") || d(e);
-  } else if (e.closest(S))
+  } else if (e.matches(S)) {
+    const l = N(e, "--mtds-tooltip-position") === "none";
+    n = "Sidebar", t = l ? "expand" : "minimize", r = l && s(e, "data-tooltip") || m(e);
+  } else if (e.closest(k))
     n = "Breadcrumbs", t = "navigate";
-  else if (e.closest(v))
+  else if (e.closest(C))
     n = "Pagintation", t = "navigate";
-  else if (e.closest(k))
+  else if (e.closest(T))
     n = "Card", t = e instanceof HTMLAnchorElement ? "navigate" : "click";
   else if (e.closest(u))
     n = "Chip", t = e.hasAttribute("data-removable") ? "remove" : "click";
@@ -103,21 +103,21 @@ function M({ type: o, target: a }) {
   else if (e instanceof HTMLAnchorElement)
     n = "Link", t = e.protocol === "mailto:" ? "email" : "navigate", e.hasAttribute("download") ? t = "download" : e.hash && e.href.startsWith(location.href.split("#")[0]) && (t = "anchor");
   else if (e.hasAttribute("aria-expanded")) {
-    if (i(e, "aria-expanded") !== "true") return;
+    if (s(e, "aria-expanded") !== "true") return;
     n = "Expand", t = "open";
   } else e.nodeName.startsWith("MTDS-ATLAS-") && (n = "Map Marker", t = "open");
-  E("event", {
-    category: i(e, "data-analytics-category") ?? n,
-    action: i(e, "data-analytics-action") ?? t,
-    name: i(e, "data-analytics-name") ?? r
+  A("event", {
+    category: s(e, "data-analytics-category") ?? n,
+    action: s(e, "data-analytics-action") ?? t,
+    name: s(e, "data-analytics-name") ?? r
   });
 }
-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) => {
-  const a = d(o), e = d(o.querySelector("h1,h2,h3,h4,h5,h6"));
+const m = (o) => o?.textContent?.trim() || "", f = (o) => o && s(o, "aria-label") || "", L = (o) => document.getElementById(s(o, "popovertarget") || ""), N = (o, a) => window.getComputedStyle(o).getPropertyValue(a)?.trim(), U = (o) => {
+  const a = m(o), e = m(o.querySelector("h1,h2,h3,h4,h5,h6"));
   return a.startsWith(e) && e || a.slice(0, 100).trim();
 };
-w(() => [y(document, C, I, _)]);
+w(() => [y(document, $, M, _)]);
 export {
-  E as analytics
+  A as analytics
 };
 //# sourceMappingURL=analytics.js.map

package/mtds/analytics/analytics.js.map

@@ -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\">&times;</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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"}
+{"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\n/*\n * IMPORTANT: [data-command=\"toggle-app-expanded\"] is deprecated but kept for backward compatibility.\n * Please use [command=\"show-modal\"] instead.\n */\nconst CSS_APP_TOGGLE = `[data-command=\"toggle-app-expanded\"],.${styles.app.split(\" \")[0]} > [command=\"show-modal\"]`;\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\">&times;</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 (el.matches(CSS_APP_TOGGLE)) {\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_APP_TOGGLE","styles","CSS_BREADCRUMBS","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

@@ -1,38 +1,40 @@
-import S from "../styles.module.css.js";
-import { isBrowser as T, onLoaded as P, on as r, QUICK_EVENT as p, debounce as _ } from "../utils.js";
+import w from "../styles.module.css.js";
+import { isBrowser as _, onLoaded as E, on as r, QUICK_EVENT as g, debounce as h } from "../utils.js";
 import "./app-toggle2.js";
-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) => {
-  document.startViewTransition ? document.startViewTransition(t) : t();
-}, h = (t) => (
+const y = w.app.split(" ")[0], I = w.sticky.split(" ")[0], x = `[data-command="toggle-app-expanded"],.${y} > [command="show-modal"]`, m = `.${y} > dialog,.${y} dialog ~ main`, S = _() ? document.getElementsByClassName(I) : [], C = (e) => {
+  document.startViewTransition ? document.startViewTransition(e) : e();
+}, k = (e) => (
   // @ts-expect-error window.mtdsAppToggle comes from app-toggle.js
-  C(() => window.mtdsToggleAppExpanded?.(t))
+  C(() => window.mtdsToggleAppExpanded?.(e))
 );
-function x({ target: t, defaultPrevented: i }) {
-  const n = t?.closest?.("a");
-  if (n?.closest("dialog") && n?.closest(f))
-    return w();
-  if (i || !(t instanceof HTMLButtonElement) || !t.matches(I))
+function A(e) {
+  const { target: o, defaultPrevented: i } = e, u = o?.closest?.("a");
+  if (u?.closest("dialog") && u?.closest(m))
+    return T();
+  if (i || !(o instanceof HTMLButtonElement) || !o.matches(x))
     return;
-  getComputedStyle(t).position === "sticky" ? h() : C(() => {
-    const g = document.querySelector(f);
-    g?.setAttribute("data-closedby", "any"), g?.showModal();
+  const P = getComputedStyle(o).position === "sticky";
+  e.preventDefault(), P ? k() : C(() => {
+    const f = document.querySelector(m);
+    f?.setAttribute("closedby", "any"), f?.showModal();
   });
 }
-function w() {
-  document.querySelector(f)?.close();
+function T() {
+  document.querySelector(m)?.close();
 }
-let c = 0, s, e = 0, d = 0, l = 0, a = !1, y = 0, o = 0;
-function k() {
-  if (!m?.length) return;
-  const t = m[0], i = window.scrollY, n = i < o;
-  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));
+let p = 0, n, t = 0, c = 0, l = 0, d = !1, a = 0, s = 0;
+function H() {
+  if (!S?.length) return;
+  const e = S[0], o = window.scrollY, i = o < s;
+  s = o, i !== n && (p = (e.parentElement?.getBoundingClientRect().top || 0) + s, n = i, c = e.offsetHeight, l = e.getBoundingClientRect().top + s, d = e.offsetHeight <= window.innerHeight, a = window.innerHeight), !(t === -1 && d) && (t !== -1 && (d || n && s <= l) ? (e.style.setProperty("--pos", "sticky"), e.style.setProperty("--top", "0px"), t = -1) : t === -1 && !n ? (e.style.setProperty("--pos", "relative"), e.style.setProperty("--top", `${Math.max(0, s - p)}px`), t = 0) : t !== 1 && !n && s + a >= l + c ? (e.style.setProperty("--pos", "sticky"), e.style.setProperty("--top", `${a - c}px`), t = 1) : t === 1 && n && (e.style.setProperty("--pos", "relative"), e.style.setProperty("--top", `${l - p}px`), t = 0));
 }
-P(() => [
-  r(document, "click", x, p),
-  r(window, "resize", _(w, 100), p),
-  r(window, "scroll", k, p)
+E(() => [
+  r(document, "click", A, !0),
+  // Use capture to run before other click handlers
+  r(window, "resize", h(T, 100), g),
+  r(window, "scroll", H, g)
 ]);
 export {
-  h as toggleAppExpanded
+  k as toggleAppExpanded
 };
 //# sourceMappingURL=app-observer.js.map

package/mtds/app/app-observer.js.map

@@ -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":["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;"}
+{"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\"],.${CSS_APP} > [command=\"show-modal\"]`;\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(event: Event) {\n\tconst { 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\tevent.preventDefault(); // Prevent default Invoker Command action so we can animate\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(\"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, true), // Use capture to run before other click handlers\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","event","el","stop","link","closeSidebar","isDesktop","sidebar","MIN_Y","SCROLL_UP","STICK","STICK_H","STICK_Y","STUCK","WIN_H","WIN_Y","handleAppScroll","NEXT_Y","NEXT_UP","onLoaded","on","debounce","QUICK_EVENT"],"mappings":";;;AAIA,MAAMA,IAAUC,EAAO,IAAI,MAAM,GAAG,EAAE,CAAC,GACjCC,IAAaD,EAAO,OAAO,MAAM,GAAG,EAAE,CAAC,GACvCE,IAAa,yCAAyCH,CAAO,6BAC7DI,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,EAAqBC,GAAc;AAC3C,QAAM,EAAE,QAAQC,GAAI,kBAAkBC,MAASF,GACzCG,IAAQF,GAAgB,UAAU,GAAG;AAC3C,MAAIE,GAAM,QAAQ,QAAQ,KAAKA,GAAM,QAAQX,CAAW;AACvD,WAAOY,EAAA;AAER,MAAIF,KAAQ,EAAED,aAAc,sBAAsB,CAACA,EAAG,QAAQV,CAAU;AACvE;AACD,QAAMc,IAAY,iBAAiBJ,CAAE,EAAE,aAAa;AACpD,EAAAD,EAAM,eAAA,GAEFK,IAAWR,EAAA,IAEdF,EAAc,MAAM;AACnB,UAAMW,IAAU,SAAS,cAAiCd,CAAW;AACrE,IAAAc,GAAS,aAAa,YAAY,KAAK,GACvCA,GAAS,UAAA;AAAA,EACV,CAAC;AACH;AAEA,SAASF,IAAe;AACvB,WAAS,cAAiCZ,CAAW,GAAG,MAAA;AACzD;AAGA,IAAIe,IAAQ,GACRC,GACAC,IAAQ,GACRC,IAAU,GACVC,IAAU,GACVC,IAAQ,IACRC,IAAQ,GACRC,IAAQ;AAEZ,SAASC,IAAkB;AAC1B,MAAI,CAACtB,GAAU,OAAQ;AACvB,QAAMQ,IAAKR,EAAS,CAAC,GACfuB,IAAS,OAAO,SAChBC,IAAUD,IAASF;AAazB,EAZAA,IAAQE,GAGJC,MAAYT,MACfD,KAASN,EAAG,eAAe,sBAAA,EAAwB,OAAO,KAAKa,GAC/DN,IAAYS,GACZP,IAAUT,EAAG,cACbU,IAAUV,EAAG,sBAAA,EAAwB,MAAMa,GAC3CF,IAAQX,EAAG,gBAAgB,OAAO,aAClCY,IAAQ,OAAO,cAGZ,EAAAJ,MAAU,MAAMG,OAChBH,MAAU,OAAOG,KAAUJ,KAAaM,KAASH,MACpDV,EAAG,MAAM,YAAY,SAAS,QAAQ,GACtCA,EAAG,MAAM,YAAY,SAAS,KAAK,GACnCQ,IAAQ,MACEA,MAAU,MAAM,CAACD,KAC3BP,EAAG,MAAM,YAAY,SAAS,UAAU,GACxCA,EAAG,MAAM,YAAY,SAAS,GAAG,KAAK,IAAI,GAAGa,IAAQP,CAAK,CAAC,IAAI,GAC/DE,IAAQ,KACEA,MAAU,KAAK,CAACD,KAAaM,IAAQD,KAASF,IAAUD,KAClET,EAAG,MAAM,YAAY,SAAS,QAAQ,GACtCA,EAAG,MAAM,YAAY,SAAS,GAAGY,IAAQH,CAAO,IAAI,GACpDD,IAAQ,KACEA,MAAU,KAAKD,MACzBP,EAAG,MAAM,YAAY,SAAS,UAAU,GACxCA,EAAG,MAAM,YAAY,SAAS,GAAGU,IAAUJ,CAAK,IAAI,GACpDE,IAAQ;AAEV;AAEAS,EAAS,MAAM;AAAA,EACdC,EAAG,UAAU,SAASpB,GAAsB,EAAI;AAAA;AAAA,EAChDoB,EAAG,QAAQ,UAAUC,EAAShB,GAAc,GAAG,GAAGiB,CAAW;AAAA,EAC7DF,EAAG,QAAQ,UAAUJ,GAAiBM,CAAW;AAClD,CAAC;"}

package/mtds/app/app.js

@@ -1,31 +1,32 @@
 import { jsx as o } from "react/jsx-runtime";
 import a from "clsx";
-import { forwardRef as p } from "react";
+import { forwardRef as n } from "react";
 import { Button as s } from "../button/button.js";
 import c from "../styles.module.css.js";
 import d from "./app-toggle.js";
-const f = p(function({ as: t, className: r, ...i }, e) {
+const f = n(function({ as: t, className: r, ...i }, e) {
   return /* @__PURE__ */ o(t || "div", { className: a(c.app, r), ref: e, ...i });
-}), u = p(function({ as: t, className: r, ...i }, e) {
+}), u = n(function({ as: t, className: r, ...i }, e) {
   return /* @__PURE__ */ o(t || "div", { className: a(c.sticky, r), ref: e, ...i });
-}), k = Object.assign(f, {
-  Header: p(
+}), b = Object.assign(f, {
+  Header: n(
     function(t, r) {
       return /* @__PURE__ */ o("header", { ref: r, ...t });
     }
   ),
-  Sidebar: p(
+  Sidebar: n(
     function(t, r) {
-      return /* @__PURE__ */ o("dialog", { role: "navigation", ref: r, ...t });
+      return /* @__PURE__ */ o("dialog", { role: "navigation", id: "mtds-sidebar", ref: r, ...t });
     }
   ),
   Sticky: u,
-  Toggle: p(
+  Toggle: n(
     function({ children: t, ...r }, i) {
       return /* @__PURE__ */ o(
         s,
         {
-          "data-command": "toggle-app-expanded",
+          command: "toggle-app-expanded",
+          commandfor: "mtds-sidebar",
           "data-tooltip": "Vis meny",
           ref: i,
           ...r,
@@ -34,10 +35,10 @@ const f = p(function({ as: t, className: r, ...i }, e) {
       );
     }
   ),
-  Main: p(function(t, r) {
+  Main: n(function(t, r) {
     return /* @__PURE__ */ o("main", { ref: r, ...t });
   }),
-  Footer: p(
+  Footer: n(
     function(t, r) {
       return /* @__PURE__ */ o("footer", { ref: r, ...t });
     }
@@ -46,6 +47,6 @@ const f = p(function({ as: t, className: r, ...i }, e) {
   Script: () => /* @__PURE__ */ o("script", { id: "mtds-app-script", children: d })
 });
 export {
-  k as App
+  b as App
 };
 //# sourceMappingURL=app.js.map

package/mtds/app/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sources":["../../designsystem/app/app.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport { Button, type ButtonProps } from \"../button/button\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport script from \"./app-toggle.js?raw\";\n\nexport type AppHeaderProps = React.ComponentPropsWithoutRef<\"header\">;\nexport type AppSidebarProps = React.ComponentPropsWithoutRef<\"dialog\">;\nexport type AppStickyProps = React.ComponentPropsWithoutRef<\"div\">;\nexport type AppMainProps = React.ComponentPropsWithoutRef<\"main\">;\nexport type AppFooterProps = React.ComponentPropsWithoutRef<\"footer\">;\nexport type AppProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype AppComponent = <As extends React.ElementType = \"div\">(\n\tprops: AppProps<As>,\n) => JSX.Element;\n\nconst AppComp = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.app, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nconst AppSticky = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.sticky, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport const App = Object.assign(AppComp, {\n\tHeader: forwardRef<HTMLElement, AppHeaderProps>(\n\t\tfunction AppHeader(rest, ref) {\n\t\t\treturn <header ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSidebar: forwardRef<HTMLDialogElement, AppSidebarProps>(\n\t\tfunction AppSidebar(rest, ref) {\n\t\t\treturn <dialog role=\"navigation\" ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSticky: AppSticky,\n\tToggle: forwardRef<HTMLButtonElement, ButtonProps<\"button\">>(\n\t\tfunction AppToggle({ children, ...rest }: ButtonProps<\"button\">, ref) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\tdata-command=\"toggle-app-expanded\"\n\t\t\t\t\tdata-tooltip=\"Vis meny\"\n\t\t\t\t\tref={ref as React.Ref<HTMLAnchorElement>}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t{children ?? \"Skjul meny\"}\n\t\t\t\t</Button>\n\t\t\t);\n\t\t},\n\t),\n\tMain: forwardRef<HTMLElement, AppMainProps>(function AppMain(rest, ref) {\n\t\treturn <main ref={ref} {...rest} />;\n\t}),\n\tFooter: forwardRef<HTMLElement, AppFooterProps>(\n\t\tfunction AppFooter(rest, ref) {\n\t\t\treturn <footer ref={ref} {...rest} />;\n\t\t},\n\t),\n\t// Needed to avoid flash of unstyled content and still be Next.js hydration compatible\n\tScript: () => <script id=\"mtds-app-script\">{script}</script>,\n});\n"],"names":["AppComp","forwardRef","as","className","rest","ref","jsx","clsx","styles","AppSticky","App","children","Button","script"],"mappings":";;;;;;AAsBA,MAAMA,IAAUC,EAAiB,SAE/B,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAsBC,GAA0B;AAGrE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,KAAKL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AACzE,CAAC,GAEKK,IAAYR,EAAiB,SAEjC,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAsBC,GAA0B;AAGrE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,QAAQL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC5E,CAAC,GAEYM,IAAM,OAAO,OAAOV,GAAS;AAAA,EACzC,QAAQC;AAAA,IACP,SAAmBG,GAAMC,GAAK;AAC7B,aAAO,gBAAAC,EAAC,UAAA,EAAO,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,IACpC;AAAA,EAAA;AAAA,EAED,SAASH;AAAA,IACR,SAAoBG,GAAMC,GAAK;AAC9B,+BAAQ,UAAA,EAAO,MAAK,cAAa,KAAAA,GAAW,GAAGD,GAAM;AAAA,IACtD;AAAA,EAAA;AAAA,EAED,QAAQK;AAAA,EACR,QAAQR;AAAA,IACP,SAAmB,EAAE,UAAAU,GAAU,GAAGP,EAAA,GAA+BC,GAAK;AACrE,aACC,gBAAAC;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,gBAAa;AAAA,UACb,gBAAa;AAAA,UACb,KAAAP;AAAA,UACC,GAAGD;AAAA,UAEH,UAAAO,KAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAGhB;AAAA,EAAA;AAAA,EAED,MAAMV,EAAsC,SAAiBG,GAAMC,GAAK;AACvE,WAAO,gBAAAC,EAAC,QAAA,EAAK,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,EAClC,CAAC;AAAA,EACD,QAAQH;AAAA,IACP,SAAmBG,GAAMC,GAAK;AAC7B,aAAO,gBAAAC,EAAC,UAAA,EAAO,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,IACpC;AAAA,EAAA;AAAA;AAAA,EAGD,QAAQ,MAAM,gBAAAE,EAAC,UAAA,EAAO,IAAG,mBAAmB,UAAAO,EAAA,CAAO;AACpD,CAAC;"}
+{"version":3,"file":"app.js","sources":["../../designsystem/app/app.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport { Button, type ButtonProps } from \"../button/button\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport script from \"./app-toggle.js?raw\";\n\nexport type AppHeaderProps = React.ComponentPropsWithoutRef<\"header\">;\nexport type AppSidebarProps = React.ComponentPropsWithoutRef<\"dialog\">;\nexport type AppStickyProps = React.ComponentPropsWithoutRef<\"div\">;\nexport type AppMainProps = React.ComponentPropsWithoutRef<\"main\">;\nexport type AppFooterProps = React.ComponentPropsWithoutRef<\"footer\">;\nexport type AppProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype AppComponent = <As extends React.ElementType = \"div\">(\n\tprops: AppProps<As>,\n) => JSX.Element;\n\nconst AppComp = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.app, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nconst AppSticky = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.sticky, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport const App = Object.assign(AppComp, {\n\tHeader: forwardRef<HTMLElement, AppHeaderProps>(\n\t\tfunction AppHeader(rest, ref) {\n\t\t\treturn <header ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSidebar: forwardRef<HTMLDialogElement, AppSidebarProps>(\n\t\tfunction AppSidebar(rest, ref) {\n\t\t\treturn <dialog role=\"navigation\" id=\"mtds-sidebar\" ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSticky: AppSticky,\n\tToggle: forwardRef<HTMLButtonElement, ButtonProps<\"button\">>(\n\t\tfunction AppToggle({ children, ...rest }: ButtonProps<\"button\">, ref) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\tcommand=\"toggle-app-expanded\"\n\t\t\t\t\tcommandfor=\"mtds-sidebar\"\n\t\t\t\t\tdata-tooltip=\"Vis meny\"\n\t\t\t\t\tref={ref as React.Ref<HTMLAnchorElement>}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t{children ?? \"Skjul meny\"}\n\t\t\t\t</Button>\n\t\t\t);\n\t\t},\n\t),\n\tMain: forwardRef<HTMLElement, AppMainProps>(function AppMain(rest, ref) {\n\t\treturn <main ref={ref} {...rest} />;\n\t}),\n\tFooter: forwardRef<HTMLElement, AppFooterProps>(\n\t\tfunction AppFooter(rest, ref) {\n\t\t\treturn <footer ref={ref} {...rest} />;\n\t\t},\n\t),\n\t// Needed to avoid flash of unstyled content and still be Next.js hydration compatible\n\tScript: () => <script id=\"mtds-app-script\">{script}</script>,\n});\n"],"names":["AppComp","forwardRef","as","className","rest","ref","jsx","clsx","styles","AppSticky","App","children","Button","script"],"mappings":";;;;;;AAsBA,MAAMA,IAAUC,EAAiB,SAE/B,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAsBC,GAA0B;AAGrE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,KAAKL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AACzE,CAAC,GAEKK,IAAYR,EAAiB,SAEjC,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAsBC,GAA0B;AAGrE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,QAAQL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC5E,CAAC,GAEYM,IAAM,OAAO,OAAOV,GAAS;AAAA,EACzC,QAAQC;AAAA,IACP,SAAmBG,GAAMC,GAAK;AAC7B,aAAO,gBAAAC,EAAC,UAAA,EAAO,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,IACpC;AAAA,EAAA;AAAA,EAED,SAASH;AAAA,IACR,SAAoBG,GAAMC,GAAK;AAC9B,aAAO,gBAAAC,EAAC,YAAO,MAAK,cAAa,IAAG,gBAAe,KAAAD,GAAW,GAAGD,GAAM;AAAA,IACxE;AAAA,EAAA;AAAA,EAED,QAAQK;AAAA,EACR,QAAQR;AAAA,IACP,SAAmB,EAAE,UAAAU,GAAU,GAAGP,EAAA,GAA+BC,GAAK;AACrE,aACC,gBAAAC;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,SAAQ;AAAA,UACR,YAAW;AAAA,UACX,gBAAa;AAAA,UACb,KAAAP;AAAA,UACC,GAAGD;AAAA,UAEH,UAAAO,KAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAGhB;AAAA,EAAA;AAAA,EAED,MAAMV,EAAsC,SAAiBG,GAAMC,GAAK;AACvE,WAAO,gBAAAC,EAAC,QAAA,EAAK,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,EAClC,CAAC;AAAA,EACD,QAAQH;AAAA,IACP,SAAmBG,GAAMC,GAAK;AAC7B,aAAO,gBAAAC,EAAC,UAAA,EAAO,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,IACpC;AAAA,EAAA;AAAA;AAAA,EAGD,QAAQ,MAAM,gBAAAE,EAAC,UAAA,EAAO,IAAG,mBAAmB,UAAAO,EAAA,CAAO;AACpD,CAAC;"}

package/mtds/app/app.stories.d.ts

@@ -16,3 +16,4 @@ export declare const WithFooter: Story;
 export declare const WithComplexContent: Story;
 export declare const WithCustomToggle: Story;
 export declare const WithMobileBar: Story;
+export declare const DeprecatedDefault: Story;

package/mtds/atlas/atlas-element.js

@@ -24,7 +24,7 @@ class m extends C {
         "style",
         null,
         `@layer leaflet{${f}}
-@layer mt.v2-2-30design{${b}`
+@layer mt.v2-3-0design{${b}`
       ),
       r("figure")
     );

package/mtds/atlas/atlas-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"atlas-element.js","sources":["../../designsystem/atlas/atlas-element.ts"],"sourcesContent":["import L from \"leaflet\";\nimport LeafletCSS from \"leaflet/dist/leaflet.css?raw\";\nimport type {} from \"leaflet.markercluster\"; // Extend L namespace\nimport \"./cluster.js\";\nimport {\n\tattr,\n\tdefineElement,\n\tisBrowser,\n\tMTDSElement,\n\toff,\n\ton,\n\ttag,\n} from \"../utils\";\nimport css from \"./atlas.css?raw\";\nexport { L };\nexport { MTDSAtlasMarkerElement } from \"./atlas-marker\";\nexport { MTDSAtlasMatgeoElement } from \"./atlas-matgeo\";\nexport { MTDSAtlasWMSElement } from \"./atlas-wms\";\n\n// TODO: Add minimum zoom level for adding markers (minimum 17 som standard?)\n// TODO: Add search helper (https://ws.geonorge.no/adresser/v1/openapi.json + https://ws.geonorge.no/adresser/v1/#/default/get_sok)\n// TODO: matgeo-autoload popover info\n\ntype Link = { href: string; rel: string; type: string; title: string };\ntype BBox = [number, number, number, number];\nexport type MTDSAtlasCollections = Record<string, MTDSAtlasCollection>;\nexport type MTDSAtlasCollection = {\n\tcrs: string[];\n\tdescription: string;\n\textent: { spatial: { bbox: BBox[] } };\n\tgeometry: string;\n\tid: string;\n\titemType: string;\n\tlinks: Link[];\n\ttitle: string;\n};\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"mtds-atlas\": MTDSAtlasElement;\n\t}\n\n\tinterface Window {\n\t\t_matgeoCollections?: Promise<MTDSAtlasCollections>;\n\t}\n}\n\nlet SKIP_CLICK: number | NodeJS.Timeout = 0;\nconst KARTVERKET_MAX_ZOOM = 18; // Kartverket does not support more than zoom level 18\nconst KARTVERKET_TILES_URL =\n\t\"https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png\";\nexport const MATGEO_URL =\n\t\"https://matgeoservice-256616427209.europe-north1.run.app/ogc/features/collections\";\nconst BOUNDS_NORWAY: L.LatLngBoundsLiteral = [\n\t[57.5, 4.73],\n\t[71.5, 31.44],\n];\n\nif (isBrowser() && !window._matgeoCollections)\n\twindow._matgeoCollections = fetch(MATGEO_URL)\n\t\t.then((res) => res.json())\n\t\t.then((d) => d.collections.map((c: MTDSAtlasCollection) => [c.id, c]))\n\t\t.then(Object.fromEntries);\n\nexport class MTDSAtlasElement extends MTDSElement {\n\tcluster?: L.MarkerClusterGroup;\n\tmap?: L.Map;\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-view\", \"data-scrollzoom\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: \"open\" }).append(\n\t\t\ttag(\n\t\t\t\t\"style\",\n\t\t\t\tnull,\n\t\t\t\t`@layer leaflet{${LeafletCSS}}\\n@layer mt.design{${css}`,\n\t\t\t),\n\t\t\ttag(\"figure\"),\n\t\t);\n\t}\n\tconnectedCallback() {\n\t\tconst container = this.shadowRoot?.lastElementChild as HTMLElement;\n\t\tconst cluster = attr(this, \"data-cluster\") ?? \"false\";\n\t\tconst tiles = new L.TileLayer(KARTVERKET_TILES_URL, {\n\t\t\tattribution: \"&copy; Kartverket\",\n\t\t\tclassName: \"leaflet-kartverket-tiles\",\n\t\t\tmaxZoom: KARTVERKET_MAX_ZOOM,\n\t\t});\n\n\t\tthis.map = new L.Map(container, {\n\t\t\tattributionControl: false,\n\t\t\tfadeAnimation: false, // Prevent popup fades\n\t\t\tlayers: [tiles],\n\t\t\tzoomControl: false,\n\t\t\tzoomSnap: 0.2,\n\t\t});\n\n\t\ton(this, \"pointerup,click\", this.#skipClick); // Prevent clicks from bubbling up unless sent from Leaflet\n\t\tthis.map.addControl(new L.Control.Attribution({ prefix: \"\" }));\n\t\tthis.map.addControl(new L.Control.Zoom({ position: \"bottomright\" }));\n\t\tthis.map.on(\"popupopen popupclose\", this.#handlePopup, this);\n\t\tthis.cluster = new L.MarkerClusterGroup({\n\t\t\tzoomToBoundsOnClick: true,\n\t\t\tshowCoverageOnHover: false,\n\t\t\tdisableClusteringAtZoom:\n\t\t\t\tcluster === \"false\" ? 1 : Number(cluster) || KARTVERKET_MAX_ZOOM + 1,\n\t\t\ticonCreateFunction: (cluster: L.MarkerCluster) =>\n\t\t\t\tnew L.DivIcon({\n\t\t\t\t\thtml: `${cluster.getChildCount()}`,\n\t\t\t\t\tclassName: \"leaflet-cluster-icon\",\n\t\t\t\t\ticonSize: [30, 30],\n\t\t\t\t}),\n\t\t}).addTo(this.map);\n\n\t\t// Initial setup attributes\n\t\tfor (const name of MTDSAtlasElement.observedAttributes)\n\t\t\tthis.attributeChangedCallback(name, null, attr(this, name));\n\t}\n\tattributeChangedCallback(name: string, _prev?: null, next?: string | null) {\n\t\tif (name === \"data-view\") this.setView(next || \"\");\n\t\tif (name === \"data-scrollzoom\")\n\t\t\tthis.map?.scrollWheelZoom[next === \"false\" ? \"disable\" : \"enable\"]();\n\t}\n\tsetView(view: string | number[], opts?: L.FitBoundsOptions) {\n\t\tconst p = `${view}`.split(\",\").map(parseFloat).filter(Number.isFinite);\n\t\tconst b = this.cluster?.getBounds();\n\n\t\tif (p.length === 3) return this.map?.setView([p[0], p[1]], p[2], opts);\n\t\tif (view !== \"fit\") return this.map?.fitBounds(BOUNDS_NORWAY, opts);\n\t\tif (b?.isValid()) return this.map?.fitBounds(b.pad(0.1), opts);\n\t\tthis.cluster?.once(\"layeradd\", () => {\n\t\t\tsetTimeout(() => this.setView(\"fit\"), 50); // Add all markers before fitting\n\t\t});\n\t}\n\tlatLngFromPoint(x: number, y: number) {\n\t\t// @ts-expect-error -- Missing from Leaflet@2.0.0-alpha.1 types\n\t\treturn this.map?.pointerEventToLatLng({ clientX: x, clientY: y });\n\t}\n\tdisconnectedCallback() {\n\t\toff(this, \"pointerup,click\", this.#skipClick);\n\t\tthis.map?.remove();\n\t\tthis.map = this.cluster = undefined;\n\t}\n\tasync getCollections() {\n\t\treturn (\n\t\t\twindow._matgeoCollections || Promise.resolve({} as MTDSAtlasCollections)\n\t\t);\n\t}\n\t#handlePopup({ type, popup }: { type: string; popup: L.Popup }) {\n\t\tconst open = type === \"popupopen\";\n\t\tconst cont = popup.getElement()?.querySelector(\".leaflet-popup-content\");\n\t\tconst slot = cont?.querySelector<HTMLSlotElement>(\":scope > slot\");\n\t\tconst id = cont?.textContent?.match(/^#(\\S+)/)?.[1] || \"\";\n\t\tconst el = document.getElementById(slot?.name || id); // If content of popup is #id, replace with <slot>\n\n\t\tif (!el) return open && id && popup.close(); // Close popup if target element not found\n\t\tL.Util.setOptions(popup, { maxWidth: this.offsetWidth - 40 });\n\t\tattr(el, \"data-popover\", open ? attr(el, \"popover\") : null); // Store previous popover mode\n\t\tattr(el, \"popover\", open ? null : attr(el, \"data-popover\")); // But temporarily remove it so popover renders\n\t\tattr(el, \"slot\", open ? el.id : null); // Render popover in slot\n\t\tif (open) popup.setContent(tag(\"slot\", { name: el.id }));\n\t}\n\t#skipClick(event: Partial<MouseEvent>) {\n\t\tif (event.type === \"click\") SKIP_CLICK && event.stopPropagation?.();\n\t\telse if (document.body.classList.contains(\"leaflet-dragging\"))\n\t\t\tSKIP_CLICK = setTimeout(() => {\n\t\t\t\tSKIP_CLICK = 0;\n\t\t\t}, 50); // Was dragging, so skip succeeding click\n\t}\n}\n\ndefineElement(\"mtds-atlas\", MTDSAtlasElement);\n\nif (isBrowser())\n\tL.Marker.prototype.options.icon = new L.DivIcon({\n\t\thtml: '<div class=\"leaflet-marker-generated-slot\"><div class=\"leaflet-marker-generated-icon\"></div></div>',\n\t\ticonSize: [0, 0],\n\t});\n"],"names":["SKIP_CLICK","KARTVERKET_MAX_ZOOM","KARTVERKET_TILES_URL","MATGEO_URL","BOUNDS_NORWAY","isBrowser","res","d","c","MTDSAtlasElement","MTDSElement","tag","LeafletCSS","css","container","cluster","attr","tiles","L","on","#skipClick","#handlePopup","name","_prev","next","view","opts","p","b","x","y","off","type","popup","open","cont","slot","id","el","event","defineElement"],"mappings":"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"}
+{"version":3,"file":"atlas-element.js","sources":["../../designsystem/atlas/atlas-element.ts"],"sourcesContent":["import L from \"leaflet\";\nimport LeafletCSS from \"leaflet/dist/leaflet.css?raw\";\nimport type {} from \"leaflet.markercluster\"; // Extend L namespace\nimport \"./cluster.js\";\nimport {\n\tattr,\n\tdefineElement,\n\tisBrowser,\n\tMTDSElement,\n\toff,\n\ton,\n\ttag,\n} from \"../utils\";\nimport css from \"./atlas.css?raw\";\nexport { L };\nexport { MTDSAtlasMarkerElement } from \"./atlas-marker\";\nexport { MTDSAtlasMatgeoElement } from \"./atlas-matgeo\";\nexport { MTDSAtlasWMSElement } from \"./atlas-wms\";\n\n// TODO: Add minimum zoom level for adding markers (minimum 17 som standard?)\n// TODO: Add search helper (https://ws.geonorge.no/adresser/v1/openapi.json + https://ws.geonorge.no/adresser/v1/#/default/get_sok)\n// TODO: matgeo-autoload popover info\n\ntype Link = { href: string; rel: string; type: string; title: string };\ntype BBox = [number, number, number, number];\nexport type MTDSAtlasCollections = Record<string, MTDSAtlasCollection>;\nexport type MTDSAtlasCollection = {\n\tcrs: string[];\n\tdescription: string;\n\textent: { spatial: { bbox: BBox[] } };\n\tgeometry: string;\n\tid: string;\n\titemType: string;\n\tlinks: Link[];\n\ttitle: string;\n};\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"mtds-atlas\": MTDSAtlasElement;\n\t}\n\n\tinterface Window {\n\t\t_matgeoCollections?: Promise<MTDSAtlasCollections>;\n\t}\n}\n\nlet SKIP_CLICK: number | NodeJS.Timeout = 0;\nconst KARTVERKET_MAX_ZOOM = 18; // Kartverket does not support more than zoom level 18\nconst KARTVERKET_TILES_URL =\n\t\"https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png\";\nexport const MATGEO_URL =\n\t\"https://matgeoservice-256616427209.europe-north1.run.app/ogc/features/collections\";\nconst BOUNDS_NORWAY: L.LatLngBoundsLiteral = [\n\t[57.5, 4.73],\n\t[71.5, 31.44],\n];\n\nif (isBrowser() && !window._matgeoCollections)\n\twindow._matgeoCollections = fetch(MATGEO_URL)\n\t\t.then((res) => res.json())\n\t\t.then((d) => d.collections.map((c: MTDSAtlasCollection) => [c.id, c]))\n\t\t.then(Object.fromEntries);\n\nexport class MTDSAtlasElement extends MTDSElement {\n\tcluster?: L.MarkerClusterGroup;\n\tmap?: L.Map;\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-view\", \"data-scrollzoom\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: \"open\" }).append(\n\t\t\ttag(\n\t\t\t\t\"style\",\n\t\t\t\tnull,\n\t\t\t\t`@layer leaflet{${LeafletCSS}}\\n@layer mt.design{${css}`,\n\t\t\t),\n\t\t\ttag(\"figure\"),\n\t\t);\n\t}\n\tconnectedCallback() {\n\t\tconst container = this.shadowRoot?.lastElementChild as HTMLElement;\n\t\tconst cluster = attr(this, \"data-cluster\") ?? \"false\";\n\t\tconst tiles = new L.TileLayer(KARTVERKET_TILES_URL, {\n\t\t\tattribution: \"&copy; Kartverket\",\n\t\t\tclassName: \"leaflet-kartverket-tiles\",\n\t\t\tmaxZoom: KARTVERKET_MAX_ZOOM,\n\t\t});\n\n\t\tthis.map = new L.Map(container, {\n\t\t\tattributionControl: false,\n\t\t\tfadeAnimation: false, // Prevent popup fades\n\t\t\tlayers: [tiles],\n\t\t\tzoomControl: false,\n\t\t\tzoomSnap: 0.2,\n\t\t});\n\n\t\ton(this, \"pointerup,click\", this.#skipClick); // Prevent clicks from bubbling up unless sent from Leaflet\n\t\tthis.map.addControl(new L.Control.Attribution({ prefix: \"\" }));\n\t\tthis.map.addControl(new L.Control.Zoom({ position: \"bottomright\" }));\n\t\tthis.map.on(\"popupopen popupclose\", this.#handlePopup, this);\n\t\tthis.cluster = new L.MarkerClusterGroup({\n\t\t\tzoomToBoundsOnClick: true,\n\t\t\tshowCoverageOnHover: false,\n\t\t\tdisableClusteringAtZoom:\n\t\t\t\tcluster === \"false\" ? 1 : Number(cluster) || KARTVERKET_MAX_ZOOM + 1,\n\t\t\ticonCreateFunction: (cluster: L.MarkerCluster) =>\n\t\t\t\tnew L.DivIcon({\n\t\t\t\t\thtml: `${cluster.getChildCount()}`,\n\t\t\t\t\tclassName: \"leaflet-cluster-icon\",\n\t\t\t\t\ticonSize: [30, 30],\n\t\t\t\t}),\n\t\t}).addTo(this.map);\n\n\t\t// Initial setup attributes\n\t\tfor (const name of MTDSAtlasElement.observedAttributes)\n\t\t\tthis.attributeChangedCallback(name, null, attr(this, name));\n\t}\n\tattributeChangedCallback(name: string, _prev?: null, next?: string | null) {\n\t\tif (name === \"data-view\") this.setView(next || \"\");\n\t\tif (name === \"data-scrollzoom\")\n\t\t\tthis.map?.scrollWheelZoom[next === \"false\" ? \"disable\" : \"enable\"]();\n\t}\n\tsetView(view: string | number[], opts?: L.FitBoundsOptions) {\n\t\tconst p = `${view}`.split(\",\").map(parseFloat).filter(Number.isFinite);\n\t\tconst b = this.cluster?.getBounds();\n\n\t\tif (p.length === 3) return this.map?.setView([p[0], p[1]], p[2], opts);\n\t\tif (view !== \"fit\") return this.map?.fitBounds(BOUNDS_NORWAY, opts);\n\t\tif (b?.isValid()) return this.map?.fitBounds(b.pad(0.1), opts);\n\t\tthis.cluster?.once(\"layeradd\", () => {\n\t\t\tsetTimeout(() => this.setView(\"fit\"), 50); // Add all markers before fitting\n\t\t});\n\t}\n\tlatLngFromPoint(x: number, y: number) {\n\t\t// @ts-expect-error -- Missing from Leaflet@2.0.0-alpha.1 types\n\t\treturn this.map?.pointerEventToLatLng({ clientX: x, clientY: y });\n\t}\n\tdisconnectedCallback() {\n\t\toff(this, \"pointerup,click\", this.#skipClick);\n\t\tthis.map?.remove();\n\t\tthis.map = this.cluster = undefined;\n\t}\n\tasync getCollections() {\n\t\treturn (\n\t\t\twindow._matgeoCollections || Promise.resolve({} as MTDSAtlasCollections)\n\t\t);\n\t}\n\t#handlePopup({ type, popup }: { type: string; popup: L.Popup }) {\n\t\tconst open = type === \"popupopen\";\n\t\tconst cont = popup.getElement()?.querySelector(\".leaflet-popup-content\");\n\t\tconst slot = cont?.querySelector<HTMLSlotElement>(\":scope > slot\");\n\t\tconst id = cont?.textContent?.match(/^#(\\S+)/)?.[1] || \"\";\n\t\tconst el = document.getElementById(slot?.name || id); // If content of popup is #id, replace with <slot>\n\n\t\tif (!el) return open && id && popup.close(); // Close popup if target element not found\n\t\tL.Util.setOptions(popup, { maxWidth: this.offsetWidth - 40 });\n\t\tattr(el, \"data-popover\", open ? attr(el, \"popover\") : null); // Store previous popover mode\n\t\tattr(el, \"popover\", open ? null : attr(el, \"data-popover\")); // But temporarily remove it so popover renders\n\t\tattr(el, \"slot\", open ? el.id : null); // Render popover in slot\n\t\tif (open) popup.setContent(tag(\"slot\", { name: el.id }));\n\t}\n\t#skipClick(event: Partial<MouseEvent>) {\n\t\tif (event.type === \"click\") SKIP_CLICK && event.stopPropagation?.();\n\t\telse if (document.body.classList.contains(\"leaflet-dragging\"))\n\t\t\tSKIP_CLICK = setTimeout(() => {\n\t\t\t\tSKIP_CLICK = 0;\n\t\t\t}, 50); // Was dragging, so skip succeeding click\n\t}\n}\n\ndefineElement(\"mtds-atlas\", MTDSAtlasElement);\n\nif (isBrowser())\n\tL.Marker.prototype.options.icon = new L.DivIcon({\n\t\thtml: '<div class=\"leaflet-marker-generated-slot\"><div class=\"leaflet-marker-generated-icon\"></div></div>',\n\t\ticonSize: [0, 0],\n\t});\n"],"names":["SKIP_CLICK","KARTVERKET_MAX_ZOOM","KARTVERKET_TILES_URL","MATGEO_URL","BOUNDS_NORWAY","isBrowser","res","d","c","MTDSAtlasElement","MTDSElement","tag","LeafletCSS","css","container","cluster","attr","tiles","L","on","#skipClick","#handlePopup","name","_prev","next","view","opts","p","b","x","y","off","type","popup","open","cont","slot","id","el","event","defineElement"],"mappings":"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"}

package/mtds/atlas/atlas.css.js

@@ -1,15 +1,24 @@
-const t = `/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */
+const t = `/**
+ * NOTE:
+ * - Dark mode styles are in styles.module.css to leverage data-color-scheme attribute
+ * - This file is using --mtds- not --mtds- since we're inside shadow dom
+ */	
+ 
 :host {
 	--mtdsc-atlas-border: 1px solid var(--mtds-color-border-subtle);
 	--mtdsc-atlas-cluster-border: 1px solid;
-	--mtdsc-atlas-marker-background: var(--mtds-color-base-default);
-	--mtdsc-atlas-marker-border: 1px solid;
-	--mtdsc-atlas-marker-color: var(--mtds-color-base-contrast-default);
+	--mtdsc-atlas-marker-background: #116e6b;
+	--mtdsc-atlas-cluster-background: var(--mtdsc-atlas-marker-background);
+	--mtdsc-atlas-cluster-color: var(--mtdsc-atlas-marker-color);
+	--mtdsc-atlas-marker-border: none;
+	--mtdsc-atlas-marker-color: #fff;
 	--mtdsc-atlas-marker-inset: 3px;
-	--mtdsc-atlas-marker-shadow: rgba(0,0,0,.2);
+	--mtdsc-atlas-marker-shadow-blur: 4px;
+	--mtdsc-atlas-marker-shadow-color: rgba(0  0 0 / 0.5);
+	--mtdsc-atlas-marker-shadow-offset: 2px;
 	--mtdsc-atlas-marker-size: var(--mtds-6);
-	--mtdsc-atlas-tile-background: #fbfbfb;
-	--mtdsc-atlas-tile-filter: grayscale(1) contrast(0.75) brightness(1.15);
+	--mtdsc-atlas-tile-background: #f7fcfc;
+	--mtdsc-atlas-tile-filter: grayscale(.8) contrast(0.75) brightness(1.15); /* Also in styles.module.css */
 
 	border-radius: var(--mtds-border-radius-md);
 	aspect-ratio: 2;
@@ -77,7 +86,7 @@ const t = `/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */
 }
 .leaflet-marker-generated-icon::after,
 ::slotted(mtds-atlas-marker)::after {
-	box-shadow: 2px 2px 2px var(--mtdsc-atlas-marker-shadow);
+	box-shadow: var(--mtdsc-atlas-marker-shadow-offset) var(--mtdsc-atlas-marker-shadow-offset) var(--mtdsc-atlas-marker-shadow-blur) var(--mtdsc-atlas-marker-shadow-color);
 	aspect-ratio: 1;
 	background: var(--mtdsc-atlas-marker-color);
 	color: var(--mtdsc-atlas-marker-background);
@@ -102,13 +111,13 @@ const t = `/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */
 .leaflet-marker-icon slot { display: block; position: absolute; left: 0; top: 0; translate: -50% -100% }
 .leaflet-marker-icon { background: none; border: 0 }
 .leaflet-cluster-icon {
-	box-shadow: 0 3px 3px var(--mtdsc-atlas-marker-shadow);
-	background-color: var(--mtds-color-base-default);
+	box-shadow: 0 var(--mtdsc-atlas-marker-shadow-offset) var(--mtdsc-atlas-marker-shadow-blur) var(--mtdsc-atlas-marker-shadow-color);
+	background-color: var(--mtdsc-atlas-cluster-background);
 	border-radius: 100%;
 	border: var(--mtdsc-atlas-cluster-border);
 	box-sizing: border-box;
-	outline: 1px solid var(--mtds-color-base-default);
-	color: var(--mtds-color-base-contrast-default);
+	outline: 1px solid var(--mtdsc-atlas-cluster-background);
+	color: var(--mtdsc-atlas-cluster-color);
 	display: flex;
 	font-size: var(--mtds-body-xs-font-size);
 	font-weight: var(--mtds-font-weight-bold);
@@ -121,6 +130,7 @@ const t = `/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */
 .leaflet-popup:has(slot) .leaflet-popup-close-button { display: none } /* Popup closes on clicking marker anyway */
 .leaflet-popup:has(slot) .leaflet-popup-content-wrapper { display: contents } /* No need for styling this element */
 .leaflet-popup:has(slot) .leaflet-popup-content { margin: 0; font: inherit }
+
 `;
 export {
   t as default