@mattilsynet/design 2.2.25 → 2.2.26

package/mtds/analytics/analytics.js

@@ -8,6 +8,7 @@ const CSS_PAGINATION = `.${styles.pagination.split(" ")[0]}`;
 const CLICKS = `summary,u-summary,a,button,[role="tab"],[role="button"]`;
 const EVENTS = "click,toggle,submit,change";
 const MATOMO = "mattilsynet.matomo.cloud";
+const MATOMO_STRINGS = ["setCustomUrl", "setDocumentTitle", "setReferrerUrl"];
 const BANNER = "mtds-analytics-banner";
 const BANNER_URL = "https://www.mattilsynet.no/om-mattilsynet/personvernerklaering/informasjonskapsler";
 function analytics(action, args = {}) {
@@ -65,7 +66,8 @@ function analytics(action, args = {}) {
     window._paq.push(["trackSiteSearch", query, category, results]);
   } else if (action === "matomo") {
     const props = args;
-    if (props?.[0] === "setReferrerUrl" && !props[1]) props[1] = "";
+    const needStr = MATOMO_STRINGS.includes(props?.[0]);
+    if (needStr && typeof props[1] !== "string") props[1] = `${props[1] ?? ""}`;
     window._paq.push(props);
   }
 }

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 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\tif (props?.[0] === \"setReferrerUrl\" && !props[1]) props[1] = \"\"; // Matomo dies if referrer is undefined\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":["action","type"],"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\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":["action","type"],"mappings":"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"}

package/mtds/atlas/atlas-element.d.ts

@@ -3,6 +3,7 @@ import { MTDSElement } from '../utils';
 export { L };
 export { MTDSAtlasMarkerElement } from './atlas-marker';
 export { MTDSAtlasMatgeoElement } from './atlas-matgeo';
+export { MTDSAtlasWMSElement } from './atlas-wms';
 declare global {
     interface HTMLElementTagNameMap {
         "mtds-atlas": MTDSAtlasElement;

package/mtds/atlas/atlas-element.js

@@ -1,10 +1,11 @@
 import L from "../external/leaflet/dist/leaflet-src.js";
 import LeafletCSS from "../external/leaflet/dist/leaflet.css.js";
 import "./cluster.js";
-import { defineElement, MTDSElement, tag, attr, on, off } from "../utils.js";
+import { defineElement, isBrowser, MTDSElement, tag, attr, on, off } from "../utils.js";
 import css from "./atlas.css.js";
 import { MTDSAtlasMarkerElement } from "./atlas-marker.js";
 import { MTDSAtlasMatgeoElement } from "./atlas-matgeo.js";
+import { MTDSAtlasWMSElement } from "./atlas-wms.js";
 let SKIP_CLICK = 0;
 const KARTVERKET_MAX_ZOOM = 18;
 const KARTVERKET_TILES_URL = "https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png";
@@ -23,9 +24,9 @@ class MTDSAtlasElement extends MTDSElement {
     this.attachShadow({ mode: "open" }).append(
       tag(
         "style",
-        {},
+        null,
         `@layer leaflet{${LeafletCSS}}
-@layer mt.v2-2-25design{${css}`
+@layer mt.v2-2-26design{${css}`
       ),
       tag("figure")
     );
@@ -35,6 +36,7 @@ class MTDSAtlasElement extends MTDSElement {
     const cluster = attr(this, "data-cluster") ?? "false";
     const tiles = new L.TileLayer(KARTVERKET_TILES_URL, {
       attribution: "© Kartverket",
+      className: "leaflet-kartverket-tiles",
       maxZoom: KARTVERKET_MAX_ZOOM
     });
     this.map = new L.Map(container, {
@@ -43,7 +45,7 @@ class MTDSAtlasElement extends MTDSElement {
       // Prevent popup fades
       layers: [tiles],
       zoomControl: false,
-      zoomSnap: 0.2
+      zoomSnap: 0
     });
     on(this, "pointerup,click", this.#skipClick);
     this.map.addControl(new L.Control.Attribution({ prefix: "" }));
@@ -92,7 +94,7 @@ class MTDSAtlasElement extends MTDSElement {
     const id = cont?.textContent?.match(/^#(\S+)/)?.[1] || "";
     const el = document.getElementById(slot?.name || id);
     if (!el) return open && id && popup.close();
-    L.Util.setOptions(popup, { maxWidth: 9999 });
+    L.Util.setOptions(popup, { maxWidth: this.offsetWidth - 40 });
     attr(el, "data-popover", open ? attr(el, "popover") : null);
     attr(el, "popover", open ? null : attr(el, "data-popover"));
     attr(el, "slot", open ? el.id : null);
@@ -107,10 +109,16 @@ class MTDSAtlasElement extends MTDSElement {
   }
 }
 defineElement("mtds-atlas", MTDSAtlasElement);
+if (isBrowser())
+  L.Marker.prototype.options.icon = new L.DivIcon({
+    html: '<div class="leaflet-marker-generated-slot"><div class="leaflet-marker-generated-icon"></div></div>',
+    iconSize: [0, 0]
+  });
 export {
   L,
   MTDSAtlasElement,
   MTDSAtlasMarkerElement,
-  MTDSAtlasMatgeoElement
+  MTDSAtlasMatgeoElement,
+  MTDSAtlasWMSElement
 };
 //# sourceMappingURL=atlas-element.js.map

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 { attr, defineElement, MTDSElement, off, on, tag } from \"../utils\";\nimport css from \"./atlas.css?raw\";\nexport { L };\nexport { MTDSAtlasMarkerElement } from \"./atlas-marker\";\nexport { MTDSAtlasMatgeoElement } from \"./atlas-matgeo\";\n\n// TODO: Add minimum zoom level for adding markers (minimum 17 som standard?)\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"mtds-atlas\": MTDSAtlasElement;\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\";\nconst BOUNDS_NORWAY: L.LatLngBoundsLiteral = [\n\t[57.5, 4.73],\n\t[71.5, 31.44],\n];\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\t{},\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\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\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: 9999 });\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"],"names":["cluster"],"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\n// TODO: Show matgeo-loading?\n// TODO: matgeo-autoload popover info\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"mtds-atlas\": MTDSAtlasElement;\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\";\nconst BOUNDS_NORWAY: L.LatLngBoundsLiteral = [\n\t[57.5, 4.73],\n\t[71.5, 31.44],\n];\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,\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\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":["cluster"],"mappings":";;;;;;;;AA8BA,IAAI,aAAsC;AAC1C,MAAM,sBAAsB;AAC5B,MAAM,uBACL;AACD,MAAM,gBAAuC;AAAA,EAC5C,CAAC,MAAM,IAAI;AAAA,EACX,CAAC,MAAM,KAAK;AACb;AAEO,MAAM,yBAAyB,YAAY;AAAA,EACjD;AAAA,EACA;AAAA,EAEA,WAAW,qBAAqB;AAC/B,WAAO,CAAC,aAAa,iBAAiB;AAAA,EACvC;AAAA,EACA,cAAc;AACb,UAAA;AACA,SAAK,aAAa,EAAE,MAAM,OAAA,CAAQ,EAAE;AAAA,MACnC;AAAA,QACC;AAAA,QACA;AAAA,QACA,kBAAkB,UAAU;AAAA,0BAA0B,GAAA;AAAA,MAAA;AAAA,MAEvD,IAAI,QAAQ;AAAA,IAAA;AAAA,EAEd;AAAA,EACA,oBAAoB;AACnB,UAAM,YAAY,KAAK,YAAY;AACnC,UAAM,UAAU,KAAK,MAAM,cAAc,KAAK;AAC9C,UAAM,QAAQ,IAAI,EAAE,UAAU,sBAAsB;AAAA,MACnD,aAAa;AAAA,MACb,WAAW;AAAA,MACX,SAAS;AAAA,IAAA,CACT;AAED,SAAK,MAAM,IAAI,EAAE,IAAI,WAAW;AAAA,MAC/B,oBAAoB;AAAA,MACpB,eAAe;AAAA;AAAA,MACf,QAAQ,CAAC,KAAK;AAAA,MACd,aAAa;AAAA,MACb,UAAU;AAAA,IAAA,CACV;AAED,OAAG,MAAM,mBAAmB,KAAK,UAAU;AAC3C,SAAK,IAAI,WAAW,IAAI,EAAE,QAAQ,YAAY,EAAE,QAAQ,GAAA,CAAI,CAAC;AAC7D,SAAK,IAAI,WAAW,IAAI,EAAE,QAAQ,KAAK,EAAE,UAAU,cAAA,CAAe,CAAC;AACnE,SAAK,IAAI,GAAG,wBAAwB,KAAK,cAAc,IAAI;AAC3D,SAAK,UAAU,IAAI,EAAE,mBAAmB;AAAA,MACvC,qBAAqB;AAAA,MACrB,qBAAqB;AAAA,MACrB,yBACC,YAAY,UAAU,IAAI,OAAO,OAAO,KAAK,sBAAsB;AAAA,MACpE,oBAAoB,CAACA,aACpB,IAAI,EAAE,QAAQ;AAAA,QACb,MAAM,GAAGA,SAAQ,cAAA,CAAe;AAAA,QAChC,WAAW;AAAA,QACX,UAAU,CAAC,IAAI,EAAE;AAAA,MAAA,CACjB;AAAA,IAAA,CACF,EAAE,MAAM,KAAK,GAAG;AAGjB,eAAW,QAAQ,iBAAiB;AACnC,WAAK,yBAAyB,MAAM,MAAM,KAAK,MAAM,IAAI,CAAC;AAAA,EAC5D;AAAA,EACA,yBAAyB,MAAc,OAAc,MAAsB;AAC1E,QAAI,SAAS,YAAa,MAAK,QAAQ,QAAQ,EAAE;AACjD,QAAI,SAAS;AACZ,WAAK,KAAK,gBAAgB,SAAS,UAAU,YAAY,QAAQ,EAAA;AAAA,EACnE;AAAA,EACA,QAAQ,MAAyB,MAA2B;AAC3D,UAAM,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,EAAE,IAAI,UAAU,EAAE,OAAO,OAAO,QAAQ;AACrE,UAAM,IAAI,KAAK,SAAS,UAAA;AAExB,QAAI,EAAE,WAAW,UAAU,KAAK,KAAK,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI;AACrE,QAAI,SAAS,MAAO,QAAO,KAAK,KAAK,UAAU,eAAe,IAAI;AAClE,QAAI,GAAG,UAAW,QAAO,KAAK,KAAK,UAAU,EAAE,IAAI,GAAG,GAAG,IAAI;AAC7D,SAAK,SAAS,KAAK,YAAY,MAAM;AACpC,iBAAW,MAAM,KAAK,QAAQ,KAAK,GAAG,EAAE;AAAA,IACzC,CAAC;AAAA,EACF;AAAA,EACA,gBAAgB,GAAW,GAAW;AAErC,WAAO,KAAK,KAAK,qBAAqB,EAAE,SAAS,GAAG,SAAS,GAAG;AAAA,EACjE;AAAA,EACA,uBAAuB;AACtB,QAAI,MAAM,mBAAmB,KAAK,UAAU;AAC5C,SAAK,KAAK,OAAA;AACV,SAAK,MAAM,KAAK,UAAU;AAAA,EAC3B;AAAA,EACA,aAAa,EAAE,MAAM,SAA2C;AAC/D,UAAM,OAAO,SAAS;AACtB,UAAM,OAAO,MAAM,WAAA,GAAc,cAAc,wBAAwB;AACvE,UAAM,OAAO,MAAM,cAA+B,eAAe;AACjE,UAAM,KAAK,MAAM,aAAa,MAAM,SAAS,IAAI,CAAC,KAAK;AACvD,UAAM,KAAK,SAAS,eAAe,MAAM,QAAQ,EAAE;AAEnD,QAAI,CAAC,GAAI,QAAO,QAAQ,MAAM,MAAM,MAAA;AACpC,MAAE,KAAK,WAAW,OAAO,EAAE,UAAU,KAAK,cAAc,IAAI;AAC5D,SAAK,IAAI,gBAAgB,OAAO,KAAK,IAAI,SAAS,IAAI,IAAI;AAC1D,SAAK,IAAI,WAAW,OAAO,OAAO,KAAK,IAAI,cAAc,CAAC;AAC1D,SAAK,IAAI,QAAQ,OAAO,GAAG,KAAK,IAAI;AACpC,QAAI,KAAM,OAAM,WAAW,IAAI,QAAQ,EAAE,MAAM,GAAG,GAAA,CAAI,CAAC;AAAA,EACxD;AAAA,EACA,WAAW,OAA4B;AACtC,QAAI,MAAM,SAAS,QAAS,eAAc,MAAM,kBAAA;AAAA,aACvC,SAAS,KAAK,UAAU,SAAS,kBAAkB;AAC3D,mBAAa,WAAW,MAAM;AAC7B,qBAAa;AAAA,MACd,GAAG,EAAE;AAAA,EACP;AACD;AAEA,cAAc,cAAc,gBAAgB;AAE5C,IAAI,UAAA;AACH,IAAE,OAAO,UAAU,QAAQ,OAAO,IAAI,EAAE,QAAQ;AAAA,IAC/C,MAAM;AAAA,IACN,UAAU,CAAC,GAAG,CAAC;AAAA,EAAA,CACf;"}

package/mtds/atlas/atlas-marker.js

@@ -5,7 +5,7 @@ class MTDSAtlasMarkerElement extends MTDSElement {
   atlas;
   marker;
   static get observedAttributes() {
-    return ["draggable", "data-latlng", "popovertarget"];
+    return ["hidden", "draggable", "data-latlng", "popovertarget"];
   }
   connectedCallback() {
     queueMicrotask(() => {
@@ -23,17 +23,21 @@ class MTDSAtlasMarkerElement extends MTDSElement {
       attr(this, "slot", `${SLOT}`);
       attr(this, "role", "button");
       attr(this, "tabindex", "0");
-      this.atlas?.cluster?.addLayer(this.marker);
+      this.attributeChangedCallback("hidden");
     });
   }
   attributeChangedCallback(name) {
-    if (name === "popovertarget") this.marker?.getPopup()?.update();
+    const mark = this.marker;
+    const cluster = this.atlas?.cluster;
+    if (name === "popovertarget") mark?.getPopup()?.update();
     if (name === "data-latlng") {
       const latlng = this.#parseLatLng();
-      this.marker?.getLatLng().equals(latlng) || this.marker?.setLatLng(latlng);
+      mark?.getLatLng().equals(latlng) || mark?.setLatLng(latlng);
     }
     if (name === "draggable")
-      this.marker?.dragging?.[this.draggable ? "enable" : "disable"]();
+      mark?.dragging?.[this.draggable ? "enable" : "disable"]();
+    if (name === "hidden" && mark && cluster)
+      cluster[this.hidden ? "removeLayer" : "addLayer"](mark);
   }
   disconnectedCallback() {
     off(this, "click,keydown", this);

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

@@ -1 +1 @@
-{"version":3,"file":"atlas-marker.js","sources":["../../designsystem/atlas/atlas-marker.ts"],"sourcesContent":["import L from \"leaflet\";\nimport { attr, defineElement, MTDSElement, off, on, tag } from \"../utils\";\nimport type { MTDSAtlasElement } from \"./atlas-element\";\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"mtds-atlas-marker\": MTDSAtlasMarkerElement;\n\t}\n}\n\nlet SLOT = 0;\nexport class MTDSAtlasMarkerElement extends MTDSElement {\n\tatlas?: MTDSAtlasElement;\n\tmarker?: L.Marker;\n\n\tstatic get observedAttributes() {\n\t\treturn [\"draggable\", \"data-latlng\", \"popovertarget\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\tconnectedCallback() {\n\t\tqueueMicrotask(() => {\n\t\t\tconst html = tag(\"slot\", { name: `${++SLOT}` });\n\t\t\tconst icon = new L.DivIcon({ html, iconSize: [0, 0] });\n\t\t\tthis.atlas = this.closest<MTDSAtlasElement>(\"mtds-atlas\") || undefined;\n\t\t\tthis.marker = new L.Marker(this.#parseLatLng(), {\n\t\t\t\tdraggable: this.draggable,\n\t\t\t\tkeyboard: false,\n\t\t\t\ticon,\n\t\t\t});\n\t\t\tthis.marker.bindPopup(() => `#${attr(this, \"popovertarget\")}`);\n\t\t\tthis.marker.on(\"dragend\", this.#handleDragEnd);\n\n\t\t\ton(this, \"click,keydown\", this); // Listen for clicks to toggle popup\n\t\t\tattr(this, \"slot\", `${SLOT}`); // Link slot to marker icon\n\t\t\tattr(this, \"role\", \"button\");\n\t\t\tattr(this, \"tabindex\", \"0\");\n\t\t\tthis.atlas?.cluster?.addLayer(this.marker);\n\t\t}); // Let the atlas parent initialize first\n\t}\n\tattributeChangedCallback(name: string) {\n\t\tif (name === \"popovertarget\") this.marker?.getPopup()?.update();\n\t\tif (name === \"data-latlng\") {\n\t\t\tconst latlng = this.#parseLatLng();\n\t\t\tthis.marker?.getLatLng().equals(latlng) || this.marker?.setLatLng(latlng);\n\t\t}\n\t\tif (name === \"draggable\")\n\t\t\tthis.marker?.dragging?.[this.draggable ? \"enable\" : \"disable\"]();\n\t}\n\tdisconnectedCallback() {\n\t\toff(this, \"click,keydown\", this);\n\t\tthis.marker?.unbindPopup().off(\"dragend\", this.#handleDragEnd).remove();\n\t\tthis.marker = this.atlas = undefined;\n\t}\n\thandleEvent(event: KeyboardEvent) {\n\t\tif (event.type === \"click\") return this.marker?.fire(\"click\"); //this.atlas?.togglePopup(this.marker, this);\n\t\tif (event.key === \" \") event.preventDefault(); // Prevent page scroll on space key\n\t\tif (event.key === \" \" || event.key === \"Enter\") this.click(); // Forward keyvoard to click for accessibility\n\t}\n\tget latlng() {\n\t\treturn attr(this, \"data-latlng\") || \"\";\n\t}\n\tset latlng(latlng: string) {\n\t\tattr(this, \"data-latlng\", latlng);\n\t}\n\t#parseLatLng() {\n\t\treturn this.latlng?.split(\",\").map(parseFloat) as L.LatLngTuple;\n\t}\n\t#handleDragEnd(detail: L.LeafletEvent) {\n\t\tconst slot = detail.target._icon\n\t\t\t?.firstElementChild as HTMLSlotElement | null;\n\t\tconst self =\n\t\t\tslot?.assignedElements?.()?.[0] as MTDSAtlasMarkerElement | null;\n\t\tconst { lat, lng } = detail.target.getLatLng(); // Using L.Marker.getLatLng() to get position also when in spiderified cluster\n\t\tif (self) self.latlng = `${lat},${lng}`;\n\t\tself?.dispatchEvent(new CustomEvent(\"dragend\", { detail, bubbles: true }));\n\t}\n}\n\ndefineElement(\"mtds-atlas-marker\", MTDSAtlasMarkerElement);\n"],"names":[],"mappings":";;AAUA,IAAI,OAAO;AACJ,MAAM,+BAA+B,YAAY;AAAA,EACvD;AAAA,EACA;AAAA,EAEA,WAAW,qBAAqB;AAC/B,WAAO,CAAC,aAAa,eAAe,eAAe;AAAA,EACpD;AAAA,EACA,oBAAoB;AACnB,mBAAe,MAAM;AACpB,YAAM,OAAO,IAAI,QAAQ,EAAE,MAAM,GAAG,EAAE,IAAI,IAAI;AAC9C,YAAM,OAAO,IAAI,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC,GAAG,CAAC,GAAG;AACrD,WAAK,QAAQ,KAAK,QAA0B,YAAY,KAAK;AAC7D,WAAK,SAAS,IAAI,EAAE,OAAO,KAAK,gBAAgB;AAAA,QAC/C,WAAW,KAAK;AAAA,QAChB,UAAU;AAAA,QACV;AAAA,MAAA,CACA;AACD,WAAK,OAAO,UAAU,MAAM,IAAI,KAAK,MAAM,eAAe,CAAC,EAAE;AAC7D,WAAK,OAAO,GAAG,WAAW,KAAK,cAAc;AAE7C,SAAG,MAAM,iBAAiB,IAAI;AAC9B,WAAK,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC5B,WAAK,MAAM,QAAQ,QAAQ;AAC3B,WAAK,MAAM,YAAY,GAAG;AAC1B,WAAK,OAAO,SAAS,SAAS,KAAK,MAAM;AAAA,IAC1C,CAAC;AAAA,EACF;AAAA,EACA,yBAAyB,MAAc;AACtC,QAAI,SAAS,gBAAiB,MAAK,QAAQ,SAAA,GAAY,OAAA;AACvD,QAAI,SAAS,eAAe;AAC3B,YAAM,SAAS,KAAK,aAAA;AACpB,WAAK,QAAQ,YAAY,OAAO,MAAM,KAAK,KAAK,QAAQ,UAAU,MAAM;AAAA,IACzE;AACA,QAAI,SAAS;AACZ,WAAK,QAAQ,WAAW,KAAK,YAAY,WAAW,SAAS,EAAA;AAAA,EAC/D;AAAA,EACA,uBAAuB;AACtB,QAAI,MAAM,iBAAiB,IAAI;AAC/B,SAAK,QAAQ,cAAc,IAAI,WAAW,KAAK,cAAc,EAAE,OAAA;AAC/D,SAAK,SAAS,KAAK,QAAQ;AAAA,EAC5B;AAAA,EACA,YAAY,OAAsB;AACjC,QAAI,MAAM,SAAS,gBAAgB,KAAK,QAAQ,KAAK,OAAO;AAC5D,QAAI,MAAM,QAAQ,IAAK,OAAM,eAAA;AAC7B,QAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ,cAAc,MAAA;AAAA,EACtD;AAAA,EACA,IAAI,SAAS;AACZ,WAAO,KAAK,MAAM,aAAa,KAAK;AAAA,EACrC;AAAA,EACA,IAAI,OAAO,QAAgB;AAC1B,SAAK,MAAM,eAAe,MAAM;AAAA,EACjC;AAAA,EACA,eAAe;AACd,WAAO,KAAK,QAAQ,MAAM,GAAG,EAAE,IAAI,UAAU;AAAA,EAC9C;AAAA,EACA,eAAe,QAAwB;AACtC,UAAM,OAAO,OAAO,OAAO,OACxB;AACH,UAAM,OACL,MAAM,mBAAA,IAAuB,CAAC;AAC/B,UAAM,EAAE,KAAK,IAAA,IAAQ,OAAO,OAAO,UAAA;AACnC,QAAI,KAAM,MAAK,SAAS,GAAG,GAAG,IAAI,GAAG;AACrC,UAAM,cAAc,IAAI,YAAY,WAAW,EAAE,QAAQ,SAAS,KAAA,CAAM,CAAC;AAAA,EAC1E;AACD;AAEA,cAAc,qBAAqB,sBAAsB;"}
+{"version":3,"file":"atlas-marker.js","sources":["../../designsystem/atlas/atlas-marker.ts"],"sourcesContent":["import L from \"leaflet\";\nimport { attr, defineElement, MTDSElement, off, on, tag } from \"../utils\";\nimport type { MTDSAtlasElement } from \"./atlas-element\";\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"mtds-atlas-marker\": MTDSAtlasMarkerElement;\n\t}\n}\n\nlet SLOT = 0;\nexport class MTDSAtlasMarkerElement extends MTDSElement {\n\tatlas?: MTDSAtlasElement;\n\tmarker?: L.Marker;\n\n\tstatic get observedAttributes() {\n\t\treturn [\"hidden\", \"draggable\", \"data-latlng\", \"popovertarget\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\tconnectedCallback() {\n\t\tqueueMicrotask(() => {\n\t\t\tconst html = tag(\"slot\", { name: `${++SLOT}` });\n\t\t\tconst icon = new L.DivIcon({ html, iconSize: [0, 0] });\n\t\t\tthis.atlas = this.closest<MTDSAtlasElement>(\"mtds-atlas\") || undefined;\n\t\t\tthis.marker = new L.Marker(this.#parseLatLng(), {\n\t\t\t\tdraggable: this.draggable,\n\t\t\t\tkeyboard: false,\n\t\t\t\ticon,\n\t\t\t});\n\t\t\tthis.marker.bindPopup(() => `#${attr(this, \"popovertarget\")}`);\n\t\t\tthis.marker.on(\"dragend\", this.#handleDragEnd);\n\n\t\t\ton(this, \"click,keydown\", this); // Listen for clicks to toggle popup\n\t\t\tattr(this, \"slot\", `${SLOT}`); // Link slot to marker icon\n\t\t\tattr(this, \"role\", \"button\");\n\t\t\tattr(this, \"tabindex\", \"0\");\n\t\t\tthis.attributeChangedCallback(\"hidden\"); // Maybe add to map\n\t\t}); // Let the atlas parent initialize first\n\t}\n\tattributeChangedCallback(name: string) {\n\t\tconst mark = this.marker;\n\t\tconst cluster = this.atlas?.cluster;\n\t\tif (name === \"popovertarget\") mark?.getPopup()?.update();\n\t\tif (name === \"data-latlng\") {\n\t\t\tconst latlng = this.#parseLatLng();\n\t\t\tmark?.getLatLng().equals(latlng) || mark?.setLatLng(latlng);\n\t\t}\n\t\tif (name === \"draggable\")\n\t\t\tmark?.dragging?.[this.draggable ? \"enable\" : \"disable\"]();\n\t\tif (name === \"hidden\" && mark && cluster)\n\t\t\tcluster[this.hidden ? \"removeLayer\" : \"addLayer\"](mark);\n\t}\n\tdisconnectedCallback() {\n\t\toff(this, \"click,keydown\", this);\n\t\tthis.marker?.unbindPopup().off(\"dragend\", this.#handleDragEnd).remove();\n\t\tthis.marker = this.atlas = undefined;\n\t}\n\thandleEvent(event: KeyboardEvent) {\n\t\tif (event.type === \"click\") return this.marker?.fire(\"click\"); //this.atlas?.togglePopup(this.marker, this);\n\t\tif (event.key === \" \") event.preventDefault(); // Prevent page scroll on space key\n\t\tif (event.key === \" \" || event.key === \"Enter\") this.click(); // Forward keyvoard to click for accessibility\n\t}\n\tget latlng() {\n\t\treturn attr(this, \"data-latlng\") || \"\";\n\t}\n\tset latlng(latlng: string) {\n\t\tattr(this, \"data-latlng\", latlng);\n\t}\n\t#parseLatLng() {\n\t\treturn this.latlng?.split(\",\").map(parseFloat) as L.LatLngTuple;\n\t}\n\t#handleDragEnd(detail: L.LeafletEvent) {\n\t\tconst slot = detail.target._icon\n\t\t\t?.firstElementChild as HTMLSlotElement | null;\n\t\tconst self =\n\t\t\tslot?.assignedElements?.()?.[0] as MTDSAtlasMarkerElement | null;\n\t\tconst { lat, lng } = detail.target.getLatLng(); // Using L.Marker.getLatLng() to get position also when in spiderified cluster\n\t\tif (self) self.latlng = `${lat},${lng}`;\n\t\tself?.dispatchEvent(new CustomEvent(\"dragend\", { detail, bubbles: true }));\n\t}\n}\n\ndefineElement(\"mtds-atlas-marker\", MTDSAtlasMarkerElement);\n"],"names":[],"mappings":";;AAUA,IAAI,OAAO;AACJ,MAAM,+BAA+B,YAAY;AAAA,EACvD;AAAA,EACA;AAAA,EAEA,WAAW,qBAAqB;AAC/B,WAAO,CAAC,UAAU,aAAa,eAAe,eAAe;AAAA,EAC9D;AAAA,EACA,oBAAoB;AACnB,mBAAe,MAAM;AACpB,YAAM,OAAO,IAAI,QAAQ,EAAE,MAAM,GAAG,EAAE,IAAI,IAAI;AAC9C,YAAM,OAAO,IAAI,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC,GAAG,CAAC,GAAG;AACrD,WAAK,QAAQ,KAAK,QAA0B,YAAY,KAAK;AAC7D,WAAK,SAAS,IAAI,EAAE,OAAO,KAAK,gBAAgB;AAAA,QAC/C,WAAW,KAAK;AAAA,QAChB,UAAU;AAAA,QACV;AAAA,MAAA,CACA;AACD,WAAK,OAAO,UAAU,MAAM,IAAI,KAAK,MAAM,eAAe,CAAC,EAAE;AAC7D,WAAK,OAAO,GAAG,WAAW,KAAK,cAAc;AAE7C,SAAG,MAAM,iBAAiB,IAAI;AAC9B,WAAK,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC5B,WAAK,MAAM,QAAQ,QAAQ;AAC3B,WAAK,MAAM,YAAY,GAAG;AAC1B,WAAK,yBAAyB,QAAQ;AAAA,IACvC,CAAC;AAAA,EACF;AAAA,EACA,yBAAyB,MAAc;AACtC,UAAM,OAAO,KAAK;AAClB,UAAM,UAAU,KAAK,OAAO;AAC5B,QAAI,SAAS,gBAAiB,OAAM,SAAA,GAAY,OAAA;AAChD,QAAI,SAAS,eAAe;AAC3B,YAAM,SAAS,KAAK,aAAA;AACpB,YAAM,YAAY,OAAO,MAAM,KAAK,MAAM,UAAU,MAAM;AAAA,IAC3D;AACA,QAAI,SAAS;AACZ,YAAM,WAAW,KAAK,YAAY,WAAW,SAAS,EAAA;AACvD,QAAI,SAAS,YAAY,QAAQ;AAChC,cAAQ,KAAK,SAAS,gBAAgB,UAAU,EAAE,IAAI;AAAA,EACxD;AAAA,EACA,uBAAuB;AACtB,QAAI,MAAM,iBAAiB,IAAI;AAC/B,SAAK,QAAQ,cAAc,IAAI,WAAW,KAAK,cAAc,EAAE,OAAA;AAC/D,SAAK,SAAS,KAAK,QAAQ;AAAA,EAC5B;AAAA,EACA,YAAY,OAAsB;AACjC,QAAI,MAAM,SAAS,gBAAgB,KAAK,QAAQ,KAAK,OAAO;AAC5D,QAAI,MAAM,QAAQ,IAAK,OAAM,eAAA;AAC7B,QAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ,cAAc,MAAA;AAAA,EACtD;AAAA,EACA,IAAI,SAAS;AACZ,WAAO,KAAK,MAAM,aAAa,KAAK;AAAA,EACrC;AAAA,EACA,IAAI,OAAO,QAAgB;AAC1B,SAAK,MAAM,eAAe,MAAM;AAAA,EACjC;AAAA,EACA,eAAe;AACd,WAAO,KAAK,QAAQ,MAAM,GAAG,EAAE,IAAI,UAAU;AAAA,EAC9C;AAAA,EACA,eAAe,QAAwB;AACtC,UAAM,OAAO,OAAO,OAAO,OACxB;AACH,UAAM,OACL,MAAM,mBAAA,IAAuB,CAAC;AAC/B,UAAM,EAAE,KAAK,IAAA,IAAQ,OAAO,OAAO,UAAA;AACnC,QAAI,KAAM,MAAK,SAAS,GAAG,GAAG,IAAI,GAAG;AACrC,UAAM,cAAc,IAAI,YAAY,WAAW,EAAE,QAAQ,SAAS,KAAA,CAAM,CAAC;AAAA,EAC1E;AACD;AAEA,cAAc,qBAAqB,sBAAsB;"}

package/mtds/atlas/atlas-matgeo.d.ts

@@ -1,18 +1,24 @@
 import { default as L } from 'leaflet';
 import { MTDSElement } from '../utils';
 import { MTDSAtlasElement } from './atlas-element';
+type Feature = L.Polygon["feature"];
+type Collection = Record<string, unknown>;
+type Collections = Map<string, Collection>;
+type LayerWithFeature = L.Layer & {
+    feature?: Feature;
+};
 declare global {
     interface HTMLElementTagNameMap {
         "mtds-atlas-matgeo": MTDSAtlasMatgeoElement;
     }
     interface GlobalEventHandlersEventMap {
         atlasfeatureclick: CustomEvent<Omit<L.LeafletMouseEvent, "target"> & {
-            feature: L.Polygon["feature"];
-            target: L.Layer;
+            targets: LayerWithFeature[];
+            collections: Collections;
         }>;
     }
     interface Window {
-        _matgeoCollections?: Promise<string[]>;
+        _matgeoCollections?: Promise<Collections>;
     }
 }
 export declare class MTDSAtlasMatgeoElement extends MTDSElement {
@@ -26,4 +32,6 @@ export declare class MTDSAtlasMatgeoElement extends MTDSElement {
     disconnectedCallback(): void;
     refresh(nocache?: boolean | L.LeafletEvent): void;
     handleEvent(event: L.LeafletMouseEvent): void;
+    getCollection(): Promise<any>;
 }
+export {};

package/mtds/atlas/atlas-matgeo.js

@@ -1,14 +1,16 @@
+import { booleanPointInPolygon } from "../external/@turf/boolean-point-in-polygon/dist/esm/index.js";
+import { point } from "../external/@turf/helpers/dist/esm/index.js";
 import L from "../external/leaflet/dist/leaflet-src.js";
 import { isBrowser, defineElement, MTDSElement, debounce, attr } from "../utils.js";
 const MATGEO_EVENTS = "moveend zoomend refresh";
 const MATGEO_URL = "https://matgeoservice-256616427209.europe-north1.run.app/ogc/features/collections";
 if (isBrowser() && !window._matgeoCollections)
-  window._matgeoCollections = fetch(MATGEO_URL).then((res) => res.json()).then((d) => d.collections?.map(({ id }) => id));
+  window._matgeoCollections = fetch(MATGEO_URL).then((res) => res.json()).then((d) => new Map(d.collections?.map((c) => [c.id, c])));
 class MTDSAtlasMatgeoElement extends MTDSElement {
   atlas;
   geojson;
   static get observedAttributes() {
-    return ["data-collection", "popovertarget"];
+    return ["hidden", "data-collection", "data-color", "popovertarget"];
   }
   constructor() {
     super();
@@ -17,20 +19,23 @@ class MTDSAtlasMatgeoElement extends MTDSElement {
   connectedCallback() {
     queueMicrotask(() => {
       this.atlas = this.closest("mtds-atlas") || void 0;
+      this.atlas?.map?.on(MATGEO_EVENTS, this.refresh, this);
       this.geojson = new L.GeoJSON(null, {
         style: this.#getStyle(),
         onEachFeature: (_, layer) => layer.on("click", this.handleEvent, this)
-      });
-      this.geojson.bindPopup(() => `#${attr(this, "popovertarget")}`);
-      this.atlas?.map?.on(MATGEO_EVENTS, this.refresh, this);
-      this.atlas?.map?.addLayer(this.geojson);
+      }).bindPopup(() => `#${attr(this, "popovertarget")}`);
       this.refresh();
+      this.attributeChangedCallback("hidden");
     });
   }
   attributeChangedCallback(name) {
-    if (name === "popovertarget") this.geojson?.getPopup()?.update();
-    if (name === "data-color") this.geojson?.setStyle(this.#getStyle());
+    const geojson = this.geojson;
+    const map = this.atlas?.map;
+    if (name === "popovertarget") geojson?.getPopup()?.update();
+    if (name === "data-color") geojson?.setStyle(this.#getStyle());
     if (name === "data-collection") this.refresh();
+    if (name === "hidden" && geojson && map)
+      map[this.hidden ? "removeLayer" : "addLayer"](geojson);
   }
   disconnectedCallback() {
     this.atlas?.map?.off(MATGEO_EVENTS, this.refresh, this);
@@ -38,13 +43,14 @@ class MTDSAtlasMatgeoElement extends MTDSElement {
     this.geojson = this.atlas = void 0;
   }
   refresh(nocache) {
-    window._matgeoCollections?.then((collections) => {
+    if (!this.geojson || !this.atlas?.map?.hasLayer(this.geojson)) return;
+    getCollections().then((collections) => {
       const collection = attr(this, "data-collection") || "";
       const cache = nocache === true ? `&nocache=${Date.now()}` : "";
       const bbox = this.atlas?.map?.getBounds().toBBoxString();
-      if (!collections.includes(collection))
+      if (!collections.has(collection))
         console.warn(
-          `mtds-atlas-matgeo: Please set a vaild \x1B[103mdata-collection="${collections.join(" | ")}"\x1B[m`
+          `mtds-atlas-matgeo: Please set a vaild \x1B[103mdata-collection="${Array.from(collections.keys()).join(" | ")}"\x1B[m`
         );
       else
         fetch(`${MATGEO_URL}/${collection}/items?bbox=${bbox}${cache}`).then((res) => res.json()).then((data) => this.geojson?.clearLayers().addData(data));
@@ -52,11 +58,24 @@ class MTDSAtlasMatgeoElement extends MTDSElement {
   }
   handleEvent(event) {
     event.originalEvent.stopPropagation();
-    const detail = { ...event, feature: event.target.feature };
-    this.dispatchEvent(new MouseEvent("click", event.originalEvent));
-    this.dispatchEvent(
-      new CustomEvent("atlasfeatureclick", { detail, bubbles: true })
-    );
+    getCollections().then((collections) => {
+      const targets = [event.target];
+      const detail = { ...event, targets, collections };
+      const point$1 = point([event.latlng.lng, event.latlng.lat]);
+      this.atlas?.map?.eachLayer((layer) => {
+        if (layer === event.target) return;
+        const inside = layer.feature?.geometry && booleanPointInPolygon(point$1, layer.feature.geometry) || layer instanceof L.Marker && layer.getLatLng().equals(event.latlng);
+        if (inside) targets.push(layer);
+      });
+      this.dispatchEvent(new MouseEvent("click", event.originalEvent));
+      this.dispatchEvent(
+        new CustomEvent("atlasfeatureclick", { detail, bubbles: true })
+      );
+    });
+  }
+  async getCollection() {
+    const id = attr(this, "data-collection") || "";
+    return getCollections().then((col) => col.get(id));
   }
   #getStyle() {
     return {
@@ -65,6 +84,9 @@ class MTDSAtlasMatgeoElement extends MTDSElement {
   }
 }
 defineElement("mtds-atlas-matgeo", MTDSAtlasMatgeoElement);
+function getCollections() {
+  return window._matgeoCollections || Promise.resolve(/* @__PURE__ */ new Map());
+}
 export {
   MTDSAtlasMatgeoElement
 };

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

@@ -1 +1 @@
-{"version":3,"file":"atlas-matgeo.js","sources":["../../designsystem/atlas/atlas-matgeo.ts"],"sourcesContent":["import L from \"leaflet\";\nimport {\n\tattr,\n\tdebounce,\n\tdefineElement,\n\tisBrowser,\n\tMTDSElement,\n} from \"../utils\";\nimport type { MTDSAtlasElement } from \"./atlas-element\";\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"mtds-atlas-matgeo\": MTDSAtlasMatgeoElement;\n\t}\n\tinterface GlobalEventHandlersEventMap {\n\t\tatlasfeatureclick: CustomEvent<\n\t\t\tOmit<L.LeafletMouseEvent, \"target\"> & {\n\t\t\t\tfeature: L.Polygon[\"feature\"];\n\t\t\t\ttarget: L.Layer;\n\t\t\t}\n\t\t>;\n\t}\n\tinterface Window {\n\t\t_matgeoCollections?: Promise<string[]>;\n\t}\n}\n\n// TODO: Warn if invalid collection, and tell what collections is available\n// TODO: Show loading?\n\nconst MATGEO_EVENTS = \"moveend zoomend refresh\";\nconst MATGEO_URL =\n\t\"https://matgeoservice-256616427209.europe-north1.run.app/ogc/features/collections\";\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(({ id }: { id: string }) => id));\n\nexport class MTDSAtlasMatgeoElement extends MTDSElement {\n\tatlas?: MTDSAtlasElement;\n\tgeojson?: L.GeoJSON;\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-collection\", \"popovertarget\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\tconstructor() {\n\t\tsuper();\n\t\tthis.refresh = debounce(this.refresh, 300); // Debounce to avoid too many requests\n\t}\n\tconnectedCallback() {\n\t\tqueueMicrotask(() => {\n\t\t\tthis.atlas = this.closest<MTDSAtlasElement>(\"mtds-atlas\") || undefined;\n\t\t\tthis.geojson = new L.GeoJSON(null, {\n\t\t\t\tstyle: this.#getStyle(),\n\t\t\t\tonEachFeature: (_, layer) => layer.on(\"click\", this.handleEvent, this),\n\t\t\t});\n\t\t\tthis.geojson.bindPopup(() => `#${attr(this, \"popovertarget\")}`);\n\t\t\tthis.atlas?.map?.on(MATGEO_EVENTS, this.refresh, this);\n\t\t\tthis.atlas?.map?.addLayer(this.geojson);\n\t\t\tthis.refresh();\n\t\t}); // Let the atlas parent initialize first\n\t}\n\tattributeChangedCallback(name?: string) {\n\t\tif (name === \"popovertarget\") this.geojson?.getPopup()?.update();\n\t\tif (name === \"data-color\") this.geojson?.setStyle(this.#getStyle());\n\t\tif (name === \"data-collection\") this.refresh();\n\t}\n\tdisconnectedCallback() {\n\t\tthis.atlas?.map?.off(MATGEO_EVENTS, this.refresh, this);\n\t\tthis.geojson?.unbindPopup().remove();\n\t\tthis.geojson = this.atlas = undefined;\n\t}\n\trefresh(nocache?: boolean | L.LeafletEvent) {\n\t\twindow._matgeoCollections?.then((collections) => {\n\t\t\tconst collection = attr(this, \"data-collection\") || \"\";\n\t\t\tconst cache = nocache === true ? `&nocache=${Date.now()}` : \"\";\n\t\t\tconst bbox = this.atlas?.map?.getBounds().toBBoxString();\n\t\t\tif (!collections.includes(collection))\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`mtds-atlas-matgeo: Please set a vaild \\x1B[103mdata-collection=\"${collections.join(\" | \")}\"\\x1B[m`,\n\t\t\t\t);\n\t\t\telse\n\t\t\t\tfetch(`${MATGEO_URL}/${collection}/items?bbox=${bbox}${cache}`)\n\t\t\t\t\t.then((res) => res.json())\n\t\t\t\t\t.then((data) => this.geojson?.clearLayers().addData(data));\n\t\t});\n\t}\n\thandleEvent(event: L.LeafletMouseEvent) {\n\t\tevent.originalEvent.stopPropagation(); // Prevent clicks from bubbling from ShadowDOM\n\t\tconst detail = { ...event, feature: event.target.feature };\n\t\t// this.atlas?.togglePopup(detail.target, this);\n\t\tthis.dispatchEvent(new MouseEvent(\"click\", event.originalEvent)); // Forward click, but from <mtds-atlas-matgeo> element\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent(\"atlasfeatureclick\", { detail, bubbles: true }),\n\t\t);\n\t}\n\t#getStyle() {\n\t\treturn {\n\t\t\tcolor: `var(--mtds-color-${attr(this, \"data-color\") || \"main\"}-base-default)`,\n\t\t};\n\t}\n}\n\ndefineElement(\"mtds-atlas-matgeo\", MTDSAtlasMatgeoElement);\n"],"names":[],"mappings":";;AA8BA,MAAM,gBAAgB;AACtB,MAAM,aACL;AAED,IAAI,UAAA,KAAe,CAAC,OAAO;AAC1B,SAAO,qBAAqB,MAAM,UAAU,EAC1C,KAAK,CAAC,QAAQ,IAAI,KAAA,CAAM,EACxB,KAAK,CAAC,MAAM,EAAE,aAAa,IAAI,CAAC,EAAE,SAAyB,EAAE,CAAC;AAE1D,MAAM,+BAA+B,YAAY;AAAA,EACvD;AAAA,EACA;AAAA,EAEA,WAAW,qBAAqB;AAC/B,WAAO,CAAC,mBAAmB,eAAe;AAAA,EAC3C;AAAA,EACA,cAAc;AACb,UAAA;AACA,SAAK,UAAU,SAAS,KAAK,SAAS,GAAG;AAAA,EAC1C;AAAA,EACA,oBAAoB;AACnB,mBAAe,MAAM;AACpB,WAAK,QAAQ,KAAK,QAA0B,YAAY,KAAK;AAC7D,WAAK,UAAU,IAAI,EAAE,QAAQ,MAAM;AAAA,QAClC,OAAO,KAAK,UAAA;AAAA,QACZ,eAAe,CAAC,GAAG,UAAU,MAAM,GAAG,SAAS,KAAK,aAAa,IAAI;AAAA,MAAA,CACrE;AACD,WAAK,QAAQ,UAAU,MAAM,IAAI,KAAK,MAAM,eAAe,CAAC,EAAE;AAC9D,WAAK,OAAO,KAAK,GAAG,eAAe,KAAK,SAAS,IAAI;AACrD,WAAK,OAAO,KAAK,SAAS,KAAK,OAAO;AACtC,WAAK,QAAA;AAAA,IACN,CAAC;AAAA,EACF;AAAA,EACA,yBAAyB,MAAe;AACvC,QAAI,SAAS,gBAAiB,MAAK,SAAS,SAAA,GAAY,OAAA;AACxD,QAAI,SAAS,aAAc,MAAK,SAAS,SAAS,KAAK,WAAW;AAClE,QAAI,SAAS,kBAAmB,MAAK,QAAA;AAAA,EACtC;AAAA,EACA,uBAAuB;AACtB,SAAK,OAAO,KAAK,IAAI,eAAe,KAAK,SAAS,IAAI;AACtD,SAAK,SAAS,YAAA,EAAc,OAAA;AAC5B,SAAK,UAAU,KAAK,QAAQ;AAAA,EAC7B;AAAA,EACA,QAAQ,SAAoC;AAC3C,WAAO,oBAAoB,KAAK,CAAC,gBAAgB;AAChD,YAAM,aAAa,KAAK,MAAM,iBAAiB,KAAK;AACpD,YAAM,QAAQ,YAAY,OAAO,YAAY,KAAK,KAAK,KAAK;AAC5D,YAAM,OAAO,KAAK,OAAO,KAAK,UAAA,EAAY,aAAA;AAC1C,UAAI,CAAC,YAAY,SAAS,UAAU;AACnC,gBAAQ;AAAA,UACP,mEAAmE,YAAY,KAAK,KAAK,CAAC;AAAA,QAAA;AAAA;AAG3F,cAAM,GAAG,UAAU,IAAI,UAAU,eAAe,IAAI,GAAG,KAAK,EAAE,EAC5D,KAAK,CAAC,QAAQ,IAAI,KAAA,CAAM,EACxB,KAAK,CAAC,SAAS,KAAK,SAAS,YAAA,EAAc,QAAQ,IAAI,CAAC;AAAA,IAC5D,CAAC;AAAA,EACF;AAAA,EACA,YAAY,OAA4B;AACvC,UAAM,cAAc,gBAAA;AACpB,UAAM,SAAS,EAAE,GAAG,OAAO,SAAS,MAAM,OAAO,QAAA;AAEjD,SAAK,cAAc,IAAI,WAAW,SAAS,MAAM,aAAa,CAAC;AAC/D,SAAK;AAAA,MACJ,IAAI,YAAY,qBAAqB,EAAE,QAAQ,SAAS,MAAM;AAAA,IAAA;AAAA,EAEhE;AAAA,EACA,YAAY;AACX,WAAO;AAAA,MACN,OAAO,oBAAoB,KAAK,MAAM,YAAY,KAAK,MAAM;AAAA,IAAA;AAAA,EAE/D;AACD;AAEA,cAAc,qBAAqB,sBAAsB;"}
+{"version":3,"file":"atlas-matgeo.js","sources":["../../designsystem/atlas/atlas-matgeo.ts"],"sourcesContent":["import { booleanPointInPolygon as inGeo } from \"@turf/boolean-point-in-polygon\";\nimport { point as turfPoint } from \"@turf/helpers\";\n\nimport L from \"leaflet\";\nimport {\n\tattr,\n\tdebounce,\n\tdefineElement,\n\tisBrowser,\n\tMTDSElement,\n} from \"../utils\";\nimport type { MTDSAtlasElement } from \"./atlas-element\";\n\ntype Feature = L.Polygon[\"feature\"];\ntype Collection = Record<string, unknown>;\ntype Collections = Map<string, Collection>;\ntype LayerWithFeature = L.Layer & { feature?: Feature };\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"mtds-atlas-matgeo\": MTDSAtlasMatgeoElement;\n\t}\n\tinterface GlobalEventHandlersEventMap {\n\t\tatlasfeatureclick: CustomEvent<\n\t\t\tOmit<L.LeafletMouseEvent, \"target\"> & {\n\t\t\t\ttargets: LayerWithFeature[];\n\t\t\t\tcollections: Collections;\n\t\t\t}\n\t\t>;\n\t}\n\tinterface Window {\n\t\t_matgeoCollections?: Promise<Collections>;\n\t}\n}\n\nconst MATGEO_EVENTS = \"moveend zoomend refresh\";\nconst MATGEO_URL =\n\t\"https://matgeoservice-256616427209.europe-north1.run.app/ogc/features/collections\";\n\nif (isBrowser() && !window._matgeoCollections)\n\twindow._matgeoCollections = fetch(MATGEO_URL)\n\t\t.then((res) => res.json())\n\t\t.then((d) => new Map(d.collections?.map((c: Collection) => [c.id, c])));\n\nexport class MTDSAtlasMatgeoElement extends MTDSElement {\n\tatlas?: MTDSAtlasElement;\n\tgeojson?: L.GeoJSON;\n\n\tstatic get observedAttributes() {\n\t\treturn [\"hidden\", \"data-collection\", \"data-color\", \"popovertarget\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\tconstructor() {\n\t\tsuper();\n\t\tthis.refresh = debounce(this.refresh, 300); // Debounce to avoid too many requests\n\t}\n\tconnectedCallback() {\n\t\tqueueMicrotask(() => {\n\t\t\tthis.atlas = this.closest<MTDSAtlasElement>(\"mtds-atlas\") || undefined;\n\t\t\tthis.atlas?.map?.on(MATGEO_EVENTS, this.refresh, this);\n\t\t\tthis.geojson = new L.GeoJSON(null, {\n\t\t\t\tstyle: this.#getStyle(),\n\t\t\t\tonEachFeature: (_, layer) => layer.on(\"click\", this.handleEvent, this),\n\t\t\t}).bindPopup(() => `#${attr(this, \"popovertarget\")}`);\n\t\t\tthis.refresh();\n\t\t\tthis.attributeChangedCallback(\"hidden\"); // Maybe add to map\n\t\t}); // Let the atlas parent initialize first\n\t}\n\tattributeChangedCallback(name?: string) {\n\t\tconst geojson = this.geojson;\n\t\tconst map = this.atlas?.map;\n\t\tif (name === \"popovertarget\") geojson?.getPopup()?.update();\n\t\tif (name === \"data-color\") geojson?.setStyle(this.#getStyle());\n\t\tif (name === \"data-collection\") this.refresh();\n\t\tif (name === \"hidden\" && geojson && map)\n\t\t\tmap[this.hidden ? \"removeLayer\" : \"addLayer\"](geojson);\n\t}\n\tdisconnectedCallback() {\n\t\tthis.atlas?.map?.off(MATGEO_EVENTS, this.refresh, this);\n\t\tthis.geojson?.unbindPopup().remove();\n\t\tthis.geojson = this.atlas = undefined;\n\t}\n\trefresh(nocache?: boolean | L.LeafletEvent) {\n\t\tif (!this.geojson || !this.atlas?.map?.hasLayer(this.geojson)) return;\n\t\tgetCollections().then((collections) => {\n\t\t\tconst collection = attr(this, \"data-collection\") || \"\";\n\t\t\tconst cache = nocache === true ? `&nocache=${Date.now()}` : \"\";\n\t\t\tconst bbox = this.atlas?.map?.getBounds().toBBoxString();\n\t\t\tif (!collections.has(collection))\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`mtds-atlas-matgeo: Please set a vaild \\x1B[103mdata-collection=\"${Array.from(collections.keys()).join(\" | \")}\"\\x1B[m`,\n\t\t\t\t);\n\t\t\telse\n\t\t\t\tfetch(`${MATGEO_URL}/${collection}/items?bbox=${bbox}${cache}`)\n\t\t\t\t\t.then((res) => res.json())\n\t\t\t\t\t.then((data) => this.geojson?.clearLayers().addData(data));\n\t\t});\n\t}\n\thandleEvent(event: L.LeafletMouseEvent) {\n\t\tevent.originalEvent.stopPropagation(); // Prevent clicks from bubbling from ShadowDOM\n\t\tgetCollections().then((collections) => {\n\t\t\tconst targets: LayerWithFeature[] = [event.target]; // Leaflet does not list all clicked layers, so we find them manually\n\t\t\tconst detail = { ...event, targets, collections };\n\t\t\tconst point = turfPoint([event.latlng.lng, event.latlng.lat]);\n\n\t\t\tthis.atlas?.map?.eachLayer((layer: LayerWithFeature) => {\n\t\t\t\tif (layer === event.target) return; // Already added\n\t\t\t\tconst inside =\n\t\t\t\t\t(layer.feature?.geometry && inGeo(point, layer.feature.geometry)) ||\n\t\t\t\t\t(layer instanceof L.Marker && layer.getLatLng().equals(event.latlng));\n\t\t\t\tif (inside) targets.push(layer);\n\t\t\t});\n\n\t\t\tthis.dispatchEvent(new MouseEvent(\"click\", event.originalEvent)); // Forward click, but from <mtds-atlas-matgeo> element\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent(\"atlasfeatureclick\", { detail, bubbles: true }),\n\t\t\t);\n\t\t});\n\t}\n\tasync getCollection() {\n\t\tconst id = attr(this, \"data-collection\") || \"\";\n\t\treturn getCollections().then((col) => col.get(id));\n\t}\n\t#getStyle() {\n\t\treturn {\n\t\t\tcolor: `var(--mtds-color-${attr(this, \"data-color\") || \"main\"}-base-default)`,\n\t\t};\n\t}\n}\n\ndefineElement(\"mtds-atlas-matgeo\", MTDSAtlasMatgeoElement);\n\nfunction getCollections() {\n\treturn window._matgeoCollections || Promise.resolve(new Map());\n}\n"],"names":["point","turfPoint","inGeo"],"mappings":"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"}

package/mtds/atlas/atlas-wms.d.ts

@@ -0,0 +1,17 @@
+import { default as L } from 'leaflet';
+import { MTDSElement } from '../utils';
+import { MTDSAtlasElement } from './atlas-element';
+declare global {
+    interface HTMLElementTagNameMap {
+        "mtds-atlas-wms": MTDSAtlasWMSElement;
+    }
+}
+export declare class MTDSAtlasWMSElement extends MTDSElement {
+    atlas?: MTDSAtlasElement;
+    wms?: L.TileLayer.WMS;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name?: string): void;
+    refresh(): void;
+    disconnectedCallback(): void;
+}

package/mtds/atlas/atlas-wms.js

@@ -0,0 +1,39 @@
+import L from "../external/leaflet/dist/leaflet-src.js";
+import { defineElement, MTDSElement, attr } from "../utils.js";
+class MTDSAtlasWMSElement extends MTDSElement {
+  atlas;
+  wms;
+  static get observedAttributes() {
+    return ["hidden", "data-url", "popovertarget"];
+  }
+  connectedCallback() {
+    queueMicrotask(() => {
+      this.atlas = this.closest("mtds-atlas") || void 0;
+      this.refresh();
+    });
+  }
+  attributeChangedCallback(name) {
+    if (name === "data-url") this.refresh();
+    if (name === "popovertarget") this.wms?.getPopup()?.update();
+    if (name === "hidden" && this.wms) {
+      this.atlas?.map?.[this.hidden ? "removeLayer" : "addLayer"](this.wms);
+      this.wms.bringToFront();
+    }
+  }
+  refresh() {
+    const url = new URL(attr(this, "data-url") || "");
+    const params = Object.fromEntries(url.searchParams.entries());
+    this.wms?.unbindPopup().remove();
+    this.wms = new L.TileLayer.WMS(`${url.origin}${url.pathname}`, params);
+    this.attributeChangedCallback("hidden");
+  }
+  disconnectedCallback() {
+    this.wms?.unbindPopup().remove();
+    this.wms = this.atlas = void 0;
+  }
+}
+defineElement("mtds-atlas-wms", MTDSAtlasWMSElement);
+export {
+  MTDSAtlasWMSElement
+};
+//# sourceMappingURL=atlas-wms.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"atlas-wms.js","sources":["../../designsystem/atlas/atlas-wms.ts"],"sourcesContent":["import L from \"leaflet\";\nimport { attr, defineElement, MTDSElement } from \"../utils\";\nimport type { MTDSAtlasElement } from \"./atlas-element\";\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"mtds-atlas-wms\": MTDSAtlasWMSElement;\n\t}\n}\n\nexport class MTDSAtlasWMSElement extends MTDSElement {\n\tatlas?: MTDSAtlasElement;\n\twms?: L.TileLayer.WMS;\n\n\tstatic get observedAttributes() {\n\t\treturn [\"hidden\", \"data-url\", \"popovertarget\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\tconnectedCallback() {\n\t\tqueueMicrotask(() => {\n\t\t\tthis.atlas = this.closest<MTDSAtlasElement>(\"mtds-atlas\") || undefined;\n\t\t\tthis.refresh();\n\t\t}); // Let the atlas parent initialize first\n\t}\n\tattributeChangedCallback(name?: string) {\n\t\tif (name === \"data-url\") this.refresh();\n\t\tif (name === \"popovertarget\") this.wms?.getPopup()?.update();\n\t\tif (name === \"hidden\" && this.wms) {\n\t\t\tthis.atlas?.map?.[this.hidden ? \"removeLayer\" : \"addLayer\"](this.wms);\n\t\t\tthis.wms.bringToFront();\n\t\t}\n\t}\n\trefresh() {\n\t\tconst url = new URL(attr(this, \"data-url\") || \"\");\n\t\tconst params = Object.fromEntries(url.searchParams.entries());\n\t\tthis.wms?.unbindPopup().remove();\n\t\tthis.wms = new L.TileLayer.WMS(`${url.origin}${url.pathname}`, params);\n\t\tthis.attributeChangedCallback(\"hidden\"); // Maybe add to map\n\t}\n\tdisconnectedCallback() {\n\t\tthis.wms?.unbindPopup().remove();\n\t\tthis.wms = this.atlas = undefined;\n\t}\n}\n\ndefineElement(\"mtds-atlas-wms\", MTDSAtlasWMSElement);\n"],"names":[],"mappings":";;AAUO,MAAM,4BAA4B,YAAY;AAAA,EACpD;AAAA,EACA;AAAA,EAEA,WAAW,qBAAqB;AAC/B,WAAO,CAAC,UAAU,YAAY,eAAe;AAAA,EAC9C;AAAA,EACA,oBAAoB;AACnB,mBAAe,MAAM;AACpB,WAAK,QAAQ,KAAK,QAA0B,YAAY,KAAK;AAC7D,WAAK,QAAA;AAAA,IACN,CAAC;AAAA,EACF;AAAA,EACA,yBAAyB,MAAe;AACvC,QAAI,SAAS,WAAY,MAAK,QAAA;AAC9B,QAAI,SAAS,gBAAiB,MAAK,KAAK,SAAA,GAAY,OAAA;AACpD,QAAI,SAAS,YAAY,KAAK,KAAK;AAClC,WAAK,OAAO,MAAM,KAAK,SAAS,gBAAgB,UAAU,EAAE,KAAK,GAAG;AACpE,WAAK,IAAI,aAAA;AAAA,IACV;AAAA,EACD;AAAA,EACA,UAAU;AACT,UAAM,MAAM,IAAI,IAAI,KAAK,MAAM,UAAU,KAAK,EAAE;AAChD,UAAM,SAAS,OAAO,YAAY,IAAI,aAAa,SAAS;AAC5D,SAAK,KAAK,YAAA,EAAc,OAAA;AACxB,SAAK,MAAM,IAAI,EAAE,UAAU,IAAI,GAAG,IAAI,MAAM,GAAG,IAAI,QAAQ,IAAI,MAAM;AACrE,SAAK,yBAAyB,QAAQ;AAAA,EACvC;AAAA,EACA,uBAAuB;AACtB,SAAK,KAAK,YAAA,EAAc,OAAA;AACxB,SAAK,MAAM,KAAK,QAAQ;AAAA,EACzB;AACD;AAEA,cAAc,kBAAkB,mBAAmB;"}

package/mtds/atlas/atlas.css.js

@@ -29,7 +29,7 @@ const css = `/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */
 }
 
 /* Tiles */
-.leaflet-tile-container { filter: var(--mtdsc-atlas-tile-filter); transition: filter 0.5s }
+.leaflet-kartverket-tiles { filter: var(--mtdsc-atlas-tile-filter); transition: filter 0.5s }
 .leaflet-container {
 	background: var(--mtdsc-atlas-tile-background);
 	border-radius: inherit;
@@ -57,6 +57,7 @@ const css = `/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */
 .leaflet-control-zoom a:active { background: var(--mtds-color-surface-active) }
 
 /* Markers */
+.leaflet-marker-generated-icon,
 ::slotted(mtds-atlas-marker) {
 	all: unset;
 	color: var(--mtdsc-atlas-marker-color);
@@ -74,10 +75,7 @@ const css = `/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */
 	margin-bottom: calc(var(--mtdsc-atlas-marker-size) * .25 + var(--mtdsc-atlas-marker-inset))!important;
 	width: var(--mtdsc-atlas-marker-size);
 }
-::slotted(mtds-atlas-marker[data-color]) {
-	--mtdsc-atlas-marker-background: var(--mtds-color-base-default); /* Ensure data-color is respected */
-	--mtdsc-atlas-marker-color: var(--mtds-color-base-contrast-default);
-}
+.leaflet-marker-generated-icon::after,
 ::slotted(mtds-atlas-marker)::after {
 	box-shadow: 2px 2px 2px var(--mtdsc-atlas-marker-shadow);
 	aspect-ratio: 1;
@@ -92,9 +90,17 @@ const css = `/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */
 	inset: calc(var(--mtdsc-atlas-marker-inset) * -1);
 	z-index: -1;
 }
+::slotted(mtds-atlas-marker[data-color]) {
+	--mtdsc-atlas-marker-background: var(--mtds-color-base-default); /* Ensure data-color is respected */
+	--mtdsc-atlas-marker-color: var(--mtds-color-base-contrast-default);
+}
+::slotted(mtds-atlas-marker.leaflet-drag-target) {
+	cursor: grabbing;
+}
 
-.leaflet-marker-icon { background: none; border: 0 }
+.leaflet-marker-generated-slot,
 .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);

package/mtds/atlas/atlas.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"atlas.css.js","sources":["../../designsystem/atlas/atlas.css?raw"],"sourcesContent":["export default \"/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */\\n:host {\\n\\t--mtdsc-atlas-border: 1px solid var(--mtds-color-border-subtle);\\n\\t--mtdsc-atlas-cluster-border: 1px solid;\\n\\t--mtdsc-atlas-marker-background: var(--mtds-color-base-default);\\n\\t--mtdsc-atlas-marker-border: 1px solid;\\n\\t--mtdsc-atlas-marker-color: var(--mtds-color-base-contrast-default);\\n\\t--mtdsc-atlas-marker-inset: 3px;\\n\\t--mtdsc-atlas-marker-shadow: rgba(0,0,0,.2);\\n\\t--mtdsc-atlas-marker-size: var(--mtds-6);\\n\\t--mtdsc-atlas-tile-background: #fbfbfb;\\n\\t--mtdsc-atlas-tile-filter: grayscale(1) contrast(0.75) brightness(1.15);\\n\\n\\tborder-radius: var(--mtds-border-radius-md);\\n\\taspect-ratio: 2;\\n\\toverflow: clip;\\n\\tposition: relative;\\n}\\n:host(:not([hidden])) { display: block }\\n:host([data-cursor=\\\"pointer\\\"]) .leaflet-grab { cursor: pointer }\\n\\n/* Focus */\\n.leaflet-control-zoom a:focus-visible,\\n:host:has(.leaflet-container:focus-visible),\\n::slotted(mtds-atlas-marker:focus-visible) {\\n\\tbox-shadow: var(--mtdsc-focus-boxShadow);\\n\\toutline: var(--mtdsc-focus-outline);\\n\\toutline-offset: var(--mtds-border-width-focus);\\n}\\n\\n/* Tiles */\\n.leaflet-tile-container { filter: var(--mtdsc-atlas-tile-filter); transition: filter 0.5s }\\n.leaflet-container {\\n\\tbackground: var(--mtdsc-atlas-tile-background);\\n\\tborder-radius: inherit;\\n\\tborder: var(--mtdsc-atlas-border);\\n\\tbox-sizing: border-box;\\n\\tfont: inherit;\\n\\theight: 100%;\\n\\tmargin: 0;\\n\\toutline: 0;\\n\\tposition: relative;\\n\\tz-index: 1; /* Ensure <slot> is always on top */\\n}\\n:host([data-tiles=\\\"color\\\"]) {\\n\\t--mtdsc-atlas-tile-background: #e5fcfd;\\n\\t--mtdsc-atlas-tile-filter: grayscale(0.2);\\n}\\n\\n/* Controls */\\n.leaflet-control-attribution { font-size: 12px; border-top-left-radius: var(--mtds-border-radius-md) }\\n.leaflet-control-zoom { border-radius: var(--mtds-border-radius-md); border: 1px solid var(--mtds-color-border-default) }\\n.leaflet-control-zoom a { background: var(--mtds-color-surface-default); border-color: inherit; color: var(--mtds-color-text-default); height: var(--mtds-10); line-height: var(--mtds-10); transition: 0.2s; width: var(--mtds-10) }\\n.leaflet-control-zoom a:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit }\\n.leaflet-control-zoom a:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit }\\n.leaflet-control-zoom a:hover { background: var(--mtds-color-surface-hover) }\\n.leaflet-control-zoom a:active { background: var(--mtds-color-surface-active) }\\n\\n/* Markers */\\n::slotted(mtds-atlas-marker) {\\n\\tall: unset;\\n\\tcolor: var(--mtdsc-atlas-marker-color);\\n\\tbackground: var(--mtdsc-atlas-marker-background);\\n\\tborder-radius: 100%;\\n\\tbox-sizing: border-box;\\n\\tcursor: pointer;\\n\\tdisplay: grid;\\n\\tplace-items: center;\\n\\tplace-content: center;\\n\\tfont-size: var(--mtds-body-sm-font-size);\\n\\tfont-weight: var(--mtds-font-weight-bold);\\n\\theight: var(--mtdsc-atlas-marker-size);\\n\\t/* biome-ignore lint/complexity/noImportantStyles: Overwrite Tailwind */\\n\\tmargin-bottom: calc(var(--mtdsc-atlas-marker-size) * .25 + var(--mtdsc-atlas-marker-inset))!important;\\n\\twidth: var(--mtdsc-atlas-marker-size);\\n}\\n::slotted(mtds-atlas-marker[data-color]) {\\n\\t--mtdsc-atlas-marker-background: var(--mtds-color-base-default); /* Ensure data-color is respected */\\n\\t--mtdsc-atlas-marker-color: var(--mtds-color-base-contrast-default);\\n}\\n::slotted(mtds-atlas-marker)::after {\\n\\tbox-shadow: 2px 2px 2px var(--mtdsc-atlas-marker-shadow);\\n\\taspect-ratio: 1;\\n\\tbackground: var(--mtdsc-atlas-marker-color);\\n\\tcolor: var(--mtdsc-atlas-marker-background);\\n\\tborder-radius: 50% 50% 0 50%;\\n\\t/* biome-ignore lint/complexity/noImportantStyles: Overwrite Tailwind */\\n\\tborder: var(--mtdsc-atlas-marker-border)!important;\\n\\tcontent: \\\"\\\";\\n\\trotate: 45deg;\\n\\tposition: absolute;\\n\\tinset: calc(var(--mtdsc-atlas-marker-inset) * -1);\\n\\tz-index: -1;\\n}\\n\\n.leaflet-marker-icon { background: none; border: 0 }\\n.leaflet-marker-icon slot { display: block; position: absolute; left: 0; top: 0; translate: -50% -100% }\\n.leaflet-cluster-icon {\\n\\tbox-shadow: 0 3px 3px var(--mtdsc-atlas-marker-shadow);\\n\\tbackground-color: var(--mtds-color-base-default);\\n\\tborder-radius: 100%;\\n\\tborder: var(--mtdsc-atlas-cluster-border);\\n\\tbox-sizing: border-box;\\n\\toutline: 1px solid var(--mtds-color-base-default);\\n\\tcolor: var(--mtds-color-base-contrast-default);\\n\\tdisplay: flex;\\n\\tfont-size: var(--mtds-body-xs-font-size);\\n\\tfont-weight: var(--mtds-font-weight-bold);\\n\\tplace-content: center;\\n\\tplace-items: center;\\n}\\n\\n/* Popover */\\n.leaflet-popup:has(slot) .leaflet-popup-tip { background: var(--mtds-color-surface-default) }\\n.leaflet-popup:has(slot) .leaflet-popup-close-button { display: none } /* Popup closes on clicking marker anyway */\\n.leaflet-popup:has(slot) .leaflet-popup-content-wrapper { display: contents } /* No need for styling this element */\\n.leaflet-popup:has(slot) .leaflet-popup-content { margin: 0; font: inherit }\\n\""],"names":[],"mappings":"AAAA,MAAA,MAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"atlas.css.js","sources":["../../designsystem/atlas/atlas.css?raw"],"sourcesContent":["export default \"/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */\\n:host {\\n\\t--mtdsc-atlas-border: 1px solid var(--mtds-color-border-subtle);\\n\\t--mtdsc-atlas-cluster-border: 1px solid;\\n\\t--mtdsc-atlas-marker-background: var(--mtds-color-base-default);\\n\\t--mtdsc-atlas-marker-border: 1px solid;\\n\\t--mtdsc-atlas-marker-color: var(--mtds-color-base-contrast-default);\\n\\t--mtdsc-atlas-marker-inset: 3px;\\n\\t--mtdsc-atlas-marker-shadow: rgba(0,0,0,.2);\\n\\t--mtdsc-atlas-marker-size: var(--mtds-6);\\n\\t--mtdsc-atlas-tile-background: #fbfbfb;\\n\\t--mtdsc-atlas-tile-filter: grayscale(1) contrast(0.75) brightness(1.15);\\n\\n\\tborder-radius: var(--mtds-border-radius-md);\\n\\taspect-ratio: 2;\\n\\toverflow: clip;\\n\\tposition: relative;\\n}\\n:host(:not([hidden])) { display: block }\\n:host([data-cursor=\\\"pointer\\\"]) .leaflet-grab { cursor: pointer }\\n\\n/* Focus */\\n.leaflet-control-zoom a:focus-visible,\\n:host:has(.leaflet-container:focus-visible),\\n::slotted(mtds-atlas-marker:focus-visible) {\\n\\tbox-shadow: var(--mtdsc-focus-boxShadow);\\n\\toutline: var(--mtdsc-focus-outline);\\n\\toutline-offset: var(--mtds-border-width-focus);\\n}\\n\\n/* Tiles */\\n.leaflet-kartverket-tiles { filter: var(--mtdsc-atlas-tile-filter); transition: filter 0.5s }\\n.leaflet-container {\\n\\tbackground: var(--mtdsc-atlas-tile-background);\\n\\tborder-radius: inherit;\\n\\tborder: var(--mtdsc-atlas-border);\\n\\tbox-sizing: border-box;\\n\\tfont: inherit;\\n\\theight: 100%;\\n\\tmargin: 0;\\n\\toutline: 0;\\n\\tposition: relative;\\n\\tz-index: 1; /* Ensure <slot> is always on top */\\n}\\n:host([data-tiles=\\\"color\\\"]) {\\n\\t--mtdsc-atlas-tile-background: #e5fcfd;\\n\\t--mtdsc-atlas-tile-filter: grayscale(0.2);\\n}\\n\\n/* Controls */\\n.leaflet-control-attribution { font-size: 12px; border-top-left-radius: var(--mtds-border-radius-md) }\\n.leaflet-control-zoom { border-radius: var(--mtds-border-radius-md); border: 1px solid var(--mtds-color-border-default) }\\n.leaflet-control-zoom a { background: var(--mtds-color-surface-default); border-color: inherit; color: var(--mtds-color-text-default); height: var(--mtds-10); line-height: var(--mtds-10); transition: 0.2s; width: var(--mtds-10) }\\n.leaflet-control-zoom a:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit }\\n.leaflet-control-zoom a:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit }\\n.leaflet-control-zoom a:hover { background: var(--mtds-color-surface-hover) }\\n.leaflet-control-zoom a:active { background: var(--mtds-color-surface-active) }\\n\\n/* Markers */\\n.leaflet-marker-generated-icon,\\n::slotted(mtds-atlas-marker) {\\n\\tall: unset;\\n\\tcolor: var(--mtdsc-atlas-marker-color);\\n\\tbackground: var(--mtdsc-atlas-marker-background);\\n\\tborder-radius: 100%;\\n\\tbox-sizing: border-box;\\n\\tcursor: pointer;\\n\\tdisplay: grid;\\n\\tplace-items: center;\\n\\tplace-content: center;\\n\\tfont-size: var(--mtds-body-sm-font-size);\\n\\tfont-weight: var(--mtds-font-weight-bold);\\n\\theight: var(--mtdsc-atlas-marker-size);\\n\\t/* biome-ignore lint/complexity/noImportantStyles: Overwrite Tailwind */\\n\\tmargin-bottom: calc(var(--mtdsc-atlas-marker-size) * .25 + var(--mtdsc-atlas-marker-inset))!important;\\n\\twidth: var(--mtdsc-atlas-marker-size);\\n}\\n.leaflet-marker-generated-icon::after,\\n::slotted(mtds-atlas-marker)::after {\\n\\tbox-shadow: 2px 2px 2px var(--mtdsc-atlas-marker-shadow);\\n\\taspect-ratio: 1;\\n\\tbackground: var(--mtdsc-atlas-marker-color);\\n\\tcolor: var(--mtdsc-atlas-marker-background);\\n\\tborder-radius: 50% 50% 0 50%;\\n\\t/* biome-ignore lint/complexity/noImportantStyles: Overwrite Tailwind */\\n\\tborder: var(--mtdsc-atlas-marker-border)!important;\\n\\tcontent: \\\"\\\";\\n\\trotate: 45deg;\\n\\tposition: absolute;\\n\\tinset: calc(var(--mtdsc-atlas-marker-inset) * -1);\\n\\tz-index: -1;\\n}\\n::slotted(mtds-atlas-marker[data-color]) {\\n\\t--mtdsc-atlas-marker-background: var(--mtds-color-base-default); /* Ensure data-color is respected */\\n\\t--mtdsc-atlas-marker-color: var(--mtds-color-base-contrast-default);\\n}\\n::slotted(mtds-atlas-marker.leaflet-drag-target) {\\n\\tcursor: grabbing;\\n}\\n\\n.leaflet-marker-generated-slot,\\n.leaflet-marker-icon slot { display: block; position: absolute; left: 0; top: 0; translate: -50% -100% }\\n.leaflet-marker-icon { background: none; border: 0 }\\n.leaflet-cluster-icon {\\n\\tbox-shadow: 0 3px 3px var(--mtdsc-atlas-marker-shadow);\\n\\tbackground-color: var(--mtds-color-base-default);\\n\\tborder-radius: 100%;\\n\\tborder: var(--mtdsc-atlas-cluster-border);\\n\\tbox-sizing: border-box;\\n\\toutline: 1px solid var(--mtds-color-base-default);\\n\\tcolor: var(--mtds-color-base-contrast-default);\\n\\tdisplay: flex;\\n\\tfont-size: var(--mtds-body-xs-font-size);\\n\\tfont-weight: var(--mtds-font-weight-bold);\\n\\tplace-content: center;\\n\\tplace-items: center;\\n}\\n\\n/* Popover */\\n.leaflet-popup:has(slot) .leaflet-popup-tip { background: var(--mtds-color-surface-default) }\\n.leaflet-popup:has(slot) .leaflet-popup-close-button { display: none } /* Popup closes on clicking marker anyway */\\n.leaflet-popup:has(slot) .leaflet-popup-content-wrapper { display: contents } /* No need for styling this element */\\n.leaflet-popup:has(slot) .leaflet-popup-content { margin: 0; font: inherit }\\n\""],"names":[],"mappings":"AAAA,MAAA,MAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}