npm - @mattilsynet/design - Versions diffs - 2.2.20 → 2.2.21 - Mend

@mattilsynet/design 2.2.20 → 2.2.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/mtds/atlas/atlas-element.js +47 -32
package/mtds/atlas/atlas-element.js.map +1 -1
package/mtds/atlas/atlas.css.js +2 -0
package/mtds/atlas/atlas.css.js.map +1 -1
package/mtds/atlas/atlas.stories.d.ts +1 -0
package/mtds/atlas.iife.js +6 -4
package/mtds/index.iife.js +12 -12
package/mtds/package.json.js +1 -1
package/mtds/styles.css +1 -1
package/mtds/styles.json +43 -43
package/mtds/styles.module.css.js +53 -53
package/package.json +1 -1

package/mtds/atlas/atlas-element.js CHANGED Viewed

@@ -1,13 +1,13 @@
-import s from "../external/leaflet/dist/leaflet-src.js";
-import d from "../external/leaflet/dist/leaflet.css.js";
-import { IS_BROWSER as c, MTDSElement as m, tag as a, attr as l, debounce as h } from "../utils.js";
-import p from "./atlas.css.js";
+import i from "../external/leaflet/dist/leaflet-src.js";
+import C from "../external/leaflet/dist/leaflet.css.js";
+import k from "./atlas.css.js";
 import "./cluster.js";
-const u = [
+import { IS_BROWSER as y, MTDSElement as E, tag as c, attr as s, debounce as S, on as x, off as z } from "../utils.js";
+const d = [30, 30], A = [
   [57.5, 4.73],
   [71.5, 31.44]
-], f = "https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png";
-class r extends m {
+], B = "https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png";
+class p extends E {
   cluster;
   map;
   // Private properties
@@ -17,40 +17,40 @@ class r extends m {
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" }).append(
-      a("style", {}, `${d}
-${p}`),
-      a("slot"),
-      a("div")
+      c("style", {}, `${C}
+${k}`),
+      c("slot"),
+      c("div")
     );
   }
   connectedCallback() {
-    const t = this.shadowRoot?.lastElementChild, o = Number(l(this, "data-cluster")) || 1, e = new s.TileLayer(f, {
+    const e = this.shadowRoot?.lastElementChild, o = Number(s(this, "data-cluster")) || 1, t = new i.TileLayer(B, {
       attribution: "&copy; Kartverket",
       maxZoom: 18
     });
-    this.map = new s.Map(t, {
+    this.map = new i.Map(e, {
       attributionControl: !1,
       wheelPxPerZoomLevel: 20,
       zoomControl: !1,
       zoomSnap: 0,
-      layers: [e]
-    }), this.cluster = new s.MarkerClusterGroup({
+      layers: [t]
+    }), this.cluster = new i.MarkerClusterGroup({
       disableClusteringAtZoom: o,
       showCoverageOnHover: !1,
       zoomToBoundsOnClick: !0
-    }).addTo(this.map), this.map.addControl(new s.Control.Attribution({ prefix: "" })), this.map.addControl(new s.Control.Zoom({ position: "bottomright" })), r.observedAttributes.forEach((i) => {
-      this.attributeChangedCallback(i, null, l(this, i));
+    }).addTo(this.map), this.map.addControl(new i.Control.Attribution({ prefix: "" })), this.map.addControl(new i.Control.Zoom({ position: "bottomright" })), this.map.on("popupopen", L), p.observedAttributes.forEach((n) => {
+      this.attributeChangedCallback(n, null, s(this, n));
     });
   }
-  attributeChangedCallback(t, o = null, e = null) {
-    this.map && (t === "data-view" && this.setView(e || ""), t === "data-scrollzoom" && this.map.scrollWheelZoom[e === "false" ? "disable" : "enable"]());
+  attributeChangedCallback(e, o = null, t = null) {
+    this.map && (e === "data-view" && this.setView(t || ""), e === "data-scrollzoom" && this.map.scrollWheelZoom[t === "false" ? "disable" : "enable"]());
   }
-  setView(t, o) {
-    const e = `${t}`.split(",").map(parseFloat).filter(Number.isFinite), i = this.cluster?.getBounds();
-    e.length === 3 ? this.map?.setView([e[0], e[1]], e[2], o) : t !== "fit" ? this.map?.fitBounds(u, o) : i?.isValid() ? this.map?.fitBounds(i, o || { padding: [40, 40] }) : this.cluster?.on("layeradd", n, this);
+  setView(e, o) {
+    const t = `${e}`.split(",").map(parseFloat).filter(Number.isFinite), n = this.cluster?.getBounds();
+    t.length === 3 ? this.map?.setView([t[0], t[1]], t[2], o) : e !== "fit" ? this.map?.fitBounds(A, o) : n?.isValid() ? this.map?.fitBounds(n, o || { padding: [40, 40] }) : this.cluster?.on("layeradd", g, this);
   }
-  addMarker(t, o) {
-    return new s.Marker(t, o).addTo(
+  addMarker(e, o) {
+    return new i.Marker(e, o).addTo(
       this.cluster
     );
   }
@@ -58,17 +58,32 @@ ${p}`),
     this.map?.remove();
   }
 }
-c && !window.customElements.get("mtds-atlas") && (s.Marker.prototype.options.icon = new s.DivIcon({
+y && !window.customElements.get("mtds-atlas") && (i.Marker.prototype.options.icon = new i.DivIcon({
   html: '<svg class="map-pin" viewBox="0 0 256 256"><rect x="78" y="50" width="100" height="100" /><path fill="var(--mtds-)" d="M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z"/></svg>',
-  iconSize: [30, 30],
+  iconSize: d,
   iconAnchor: [15, 30],
   popupAnchor: [0, -15]
-}), window.customElements.define("mtds-atlas", r));
-const n = h(function() {
-  this.cluster?.off("layeradd", n), this.cluster?.getBounds().isValid() && this.setView("fit");
-}, 100);
+}), window.customElements.define("mtds-atlas", p));
+const g = S(function() {
+  this.cluster?.off("layeradd", g), this.cluster?.getBounds().isValid() && this.setView("fit");
+}, 100), f = "popupclose move resize zoomanim viewreset", L = ({ target: l, popup: e }) => {
+  const o = e.getContent(), t = String(o)[0] === "#" && document.getElementById(o.slice(1));
+  if (t && t.closest("mtds-atlas")) {
+    const n = e.getLatLng(), v = s(t, "popover");
+    s(e.getElement(), "hidden", ""), s(t, "data-popover", "open"), s(t, "popover", "manual");
+    const m = new ResizeObserver(() => a()), a = (r) => {
+      if (r?.type === "popupclose" && r?.popup === e)
+        m.disconnect(), l.off(f, a), s(e.getElement(), "hidden", null), s(t, "data-popover", null), s(t, "popover", v), z(t, "click", h);
+      else {
+        const u = l.latLngToContainerPoint(n), w = u.x - t.offsetWidth / 2 - d[0] / 2, b = u.y - t.offsetHeight - d[1];
+        t.style.translate = `${w}px ${b}px`;
+      }
+    }, h = ({ target: r }) => r?.closest?.('[popovertargetaction="hide"]') && e.close();
+    l.on(f, a), x(t, "click", h), m.observe(t), a();
+  }
+};
 export {
-  s as L,
-  r as MTDSAtlasElement
+  i as L,
+  p as MTDSAtlasElement
 };
 //# sourceMappingURL=atlas-element.js.map

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

	@@ -1 +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\";\nimport type * as ReactTypes from \"react\";\nimport { attr, debounce, IS_BROWSER, MTDSElement, tag } from \"../utils\";\nimport css from \"./atlas.css?raw\";\nimport \"./cluster.js\";\nexport { L };\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t\"mtds-atlas\": ReactTypes.DetailedHTMLProps<\n\t\t\t\tReactTypes.HTMLAttributes<MTDSAtlasElement>,\n\t\t\t\tMTDSAtlasElement\n\t\t\t> & {\n\t\t\t\tclass?: string;\n\t\t\t\t\"data-view\"?: string \| number[];\n\t\t\t};\n\t\t}\n\t}\n}\n\n// const EVENTS = \"popupopen popupclose move zoom resize\";\nconst BOUNDS_NORWAY: L.LatLngBoundsLiteral = [\n\t[57.5, 4.73],\n\t[71.5, 31.44],\n];\n\n// Turns out Kartverket's color tiles are better in grayscale than their grayscale tiles\n// const TILES_GRAY = \"https://cache.kartverket.no/v1/wmts/1.0.0/topograatone/default/webmercator/{z}/{y}/{x}.png\";\nconst TILES_COLOR =\n\t\"https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png\";\n\nexport class MTDSAtlasElement extends MTDSElement {\n\tcluster?: L.MarkerClusterGroup;\n\tmap?: L.Map;\n\n\t// Private properties\n\t_popup?: [HTMLElement, L.Popup];\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-view\", \"data-scrollzoom\"]; //TODO: \"data-layers\" // Using ES2015 syntax for backwards compatibility\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: \"open\" }).append(\n\t\t\ttag(\"style\", {}, `${LeafletCSS}\\n${css}`),\n\t\t\ttag(\"slot\"),\n\t\t\ttag(\"div\"),\n\t\t);\n\t}\n\tconnectedCallback() {\n\t\tconst div = this.shadowRoot?.lastElementChild;\n\t\tconst cluster = Number(attr(this, \"data-cluster\")) \|\| 1;\n\t\tconst tiles = new L.TileLayer(TILES_COLOR, {\n\t\t\tattribution: \"© Kartverket\",\n\t\t\tmaxZoom: 18,\n\t\t});\n\n\t\tthis.map = new L.Map(div as HTMLElement, {\n\t\t\tattributionControl: false,\n\t\t\twheelPxPerZoomLevel: 20,\n\t\t\tzoomControl: false,\n\t\t\tzoomSnap: 0,\n\t\t\tlayers: [tiles],\n\t\t});\n\n\t\tthis.cluster = new L.MarkerClusterGroup({\n\t\t\tdisableClusteringAtZoom: cluster,\n\t\t\tshowCoverageOnHover: false,\n\t\t\tzoomToBoundsOnClick: true,\n\t\t}).addTo(this.map);\n\n\t\tthis.map.addControl(new L.Control.Attribution({ prefix: \"\" }));\n\t\tthis.map.addControl(new L.Control.Zoom({ position: \"bottomright\" }));\n\t\t// this.map.on(EVENTS, handleEvents);\n\n\t\t// Initial setup when map is connected\n\t\tMTDSAtlasElement.observedAttributes.forEach((name) => {\n\t\t\tthis.attributeChangedCallback(name, null, attr(this, name));\n\t\t});\n\t}\n\tattributeChangedCallback(\n\t\tname: string,\n\t\t_prev: string \| null = null,\n\t\tnext: string \| null = null,\n\t) {\n\t\tif (!this.map) return; // No map yet\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[], options?: L.ZoomPanOptions) {\n\t\tconst pos = `${view}`.split(\",\").map(parseFloat).filter(Number.isFinite);\n\t\tconst bounds = this.cluster?.getBounds();\n\n\t\tif (pos.length === 3) this.map?.setView([pos[0], pos[1]], pos[2], options);\n\t\telse if (view !== \"fit\") this.map?.fitBounds(BOUNDS_NORWAY, options);\n\t\telse if (!bounds?.isValid())\n\t\t\tthis.cluster?.on(\"layeradd\", fitWhenMarkers, this);\n\t\telse this.map?.fitBounds(bounds, options \|\| { padding: [40, 40] });\n\t}\n\taddMarker(latlng: L.LatLngExpression, options?: L.MarkerOptions) {\n\t\treturn new L.Marker(latlng, options).addTo(\n\t\t\tthis.cluster as L.MarkerClusterGroup,\n\t\t);\n\t}\n\tdisconnectedCallback() {\n\t\tthis.map?.remove();\n\t\t// this.map?.off(EVENTS, handleEvents);\n\t}\n}\n\n// Set default marker icon and define custom element\nif (IS_BROWSER && !window.customElements.get(\"mtds-atlas\")) {\n\tL.Marker.prototype.options.icon = new L.DivIcon({\n\t\thtml: '<svg class=\"map-pin\" viewBox=\"0 0 256 256\"><rect x=\"78\" y=\"50\" width=\"100\" height=\"100\" /><path fill=\"var(--mtds-)\" d=\"M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z\"/></svg>',\n\t\ticonSize: [30, 30],\n\t\ticonAnchor: [15, 30],\n\t\tpopupAnchor: [0, -15],\n\t});\n\twindow.customElements.define(\"mtds-atlas\", MTDSAtlasElement);\n}\n\nconst fitWhenMarkers = debounce(function (this: MTDSAtlasElement) {\n\tthis.cluster?.off(\"layeradd\", fitWhenMarkers);\n\tif (this.cluster?.getBounds().isValid()) this.setView(\"fit\");\n}, 100);\n\n// const handleEvents: L.LeafletEventHandlerFn = ({ type, target, popup }) => {\n// \tconst self = target.getContainer();\n\n// \tif (type === \"popupopen\" \|\| type === \"popupclose\") {\n// \t\tif (self._popup) {\n// \t\t\tconst [el] = self._popup;\n// \t\t\tself._popup = el.hidePopover();\n// \t\t\tself._popup = undefined;\n// \t\t}\n// \t\tconst id = type === \"popupopen\" && popup.getContent();\n// \t\tconst el = String(id)[0] === \"#\" && document.getElementById(id.slice(1));\n\n// \t\tif (el) {\n// \t\t\tattr(el, \"popover\", \"manual\");\n// \t\t\tattr(popup.getElement(), \"data-atlas-popup\", id);\n// \t\t\tel.showPopover();\n// \t\t\tself._popup = [el, popup];\n// \t\t\tanchorPopover(target, popup, el);\n// \t\t}\n// \t} else if (self._popup) {\n// \t\tanchorPopover(target, self._popup[1], self._popup[0]);\n// \t}\n// };\n\n// const anchorPopover = (map: L.Map, popup: L.Popup, popover: HTMLElement) => {\n// \tconst point = map.latLngToContainerPoint(popup.getLatLng() as L.LatLng);\n// \tconst rect = map.getContainer().getBoundingClientRect();\n// \tpopover.style.translate = `${rect.x + point.x + window.scrollX}px ${rect.y + point.y + window.scrollY}px`;\n// };\n\n// .on(\"click\", ({ target: marker, originalEvent: event }) => {\n// \tconst id = (marker.options as Record<string, string>)?.popoverTarget;\n// \tconst el = document.getElementById(id \|\| \"\");\n\n// \tif (el) {\n// \t\tconsole.log(el, this);\n// \t\tevent.stopPropagation();\n// \t\tel.showPopover();\n// \t\tthis.popup = el;\n// \t\tthis.map?.fire(\"move\"); // Trigger position update\n\n// \t\t// \tconst updatePosition = () => {\n// \t\t// \t\tconst point = this.map?.latLngToContainerPoint(marker.getLatLng());\n// \t\t// \t\tconst rect = this.getBoundingClientRect();\n// \t\t// \t\tconsole.dir(rect);\n// \t\t// \t\t// console.log(point, this.map?.getBounds().getCenter().lat);\n// \t\t// \t\tif (point)\n// \t\t// \t\t\tel.style.translate = `${rect.x + point.x + window.scrollX}px ${rect.y + point.y + window.scrollY}px`;\n// \t\t// \t};\n\n// \t\t// \tupdatePosition();\n// \t}\n// })\n\n// export type Adresse = {\n// \tadressekode: number;\n// \tadressetekst: string;\n// \tbokstav: string;\n// \tbruksenhetsnummer: string[];\n// \tbruksnummer: number;\n// \tfestenummer: number;\n// \tgardsnummer: number;\n// \tkommunenavn: string;\n// \tkommunenummer: string;\n// \tnummer: number;\n// \tobjtype: string;\n// \toppdateringsdato: string;\n// \tpostnummer: string;\n// \tpoststed: string;\n// \trepresentasjonspunkt: {\n// \t\tepsg: string;\n// \t\tlat: number;\n// \t\tlon: number;\n// \t};\n// \tstedfestingverifisert: boolean;\n// \tundernummer: string \| null;\n// };\n\n// // Hent punkt for adresse fra GeoNorge\n// export async function getPunktFraAdresse(\n// \tadresseSoek: string,\n// ): Promise<Adresse[]> {\n// \ttry {\n// \t\tconst response = await fetch(\n// \t\t\t`https://ws.geonorge.no/adresser/v1/sok?sok=${adresseSoek}&fuzzy=false&utkoordsys=3857&treffPerSide=100&asciiKompatibel=true`,\n// \t\t);\n// \t\tconst jsonresponse = await response.json();\n// \t\tif (jsonresponse.adresser.length > 0) {\n// \t\t\treturn jsonresponse.adresser.map((adresse: Adresse) => ({\n// \t\t\t\tadressekode: adresse.adressekode,\n// \t\t\t\tadressetekst: adresse.adressetekst,\n// \t\t\t\tbokstav: adresse.bokstav,\n// \t\t\t\tbruksenhetsnummer: adresse.bruksenhetsnummer,\n// \t\t\t\tbruksnummer: adresse.bruksnummer,\n// \t\t\t\tfestenummer: adresse.festenummer,\n// \t\t\t\tgardsnummer: adresse.gardsnummer,\n// \t\t\t\tkommunenavn: adresse.kommunenavn,\n// \t\t\t\tkommunenummer: adresse.kommunenummer,\n// \t\t\t\tnummer: adresse.nummer,\n// \t\t\t\tobjtype: adresse.objtype,\n// \t\t\t\toppdateringsdato: adresse.oppdateringsdato,\n// \t\t\t\tpostnummer: adresse.postnummer,\n// \t\t\t\tpoststed: adresse.poststed,\n// \t\t\t\trepresentasjonspunkt: {\n// \t\t\t\t\tepsg: adresse.representasjonspunkt.epsg,\n// \t\t\t\t\tlat: adresse.representasjonspunkt.lat,\n// \t\t\t\t\tlon: adresse.representasjonspunkt.lon,\n// \t\t\t\t},\n// \t\t\t}));\n// \t\t} else {\n// \t\t\treturn [];\n// \t\t}\n// \t} catch (error) {\n// \t\tconsole.log(`Feilet i å hente adresse fra punkt: ${error}`);\n// \t\treturn [];\n// \t}\n// }\n"],"names":["BOUNDS_NORWAY","TILES_COLOR","MTDSAtlasElement","MTDSElement","tag","LeafletCSS","css","div","cluster","attr","tiles","L","name","_prev","next","view","options","pos","bounds","fitWhenMarkers","latlng","IS_BROWSER","debounce"],"mappings":"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"}
1	+ {"version":3,"file":"atlas-element.js","sources":["../../designsystem/atlas/atlas-element.ts"],"sourcesContent":["import L, { type PointExpression } from \"leaflet\";\nimport LeafletCSS from \"leaflet/dist/leaflet.css?raw\";\nimport type {} from \"leaflet.markercluster\";\nimport type * as ReactTypes from \"react\";\nimport css from \"./atlas.css?raw\";\nimport \"./cluster.js\";\nimport {\n\tattr,\n\tdebounce,\n\tIS_BROWSER,\n\tMTDSElement,\n\toff,\n\ton,\n\ttag,\n} from \"../utils\";\nexport { L };\n\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t\"mtds-atlas\": ReactTypes.DetailedHTMLProps<\n\t\t\t\tReactTypes.HTMLAttributes<MTDSAtlasElement>,\n\t\t\t\tMTDSAtlasElement\n\t\t\t> & {\n\t\t\t\tclass?: string;\n\t\t\t\t\"data-view\"?: string \| number[];\n\t\t\t};\n\t\t}\n\t}\n}\n\nconst MARKER_SIZE = [30, 30];\nconst BOUNDS_NORWAY: L.LatLngBoundsLiteral = [\n\t[57.5, 4.73],\n\t[71.5, 31.44],\n];\n\n// Turns out Kartverket's color tiles are better in grayscale than their grayscale tiles\nconst TILES_COLOR =\n\t\"https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png\";\n\nexport class MTDSAtlasElement extends MTDSElement {\n\tcluster?: L.MarkerClusterGroup;\n\tmap?: L.Map;\n\n\t// Private properties\n\t_popup?: [HTMLElement, L.Popup];\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-view\", \"data-scrollzoom\"]; //TODO: \"data-layers\" // Using ES2015 syntax for backwards compatibility\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: \"open\" }).append(\n\t\t\ttag(\"style\", {}, `${LeafletCSS}\\n${css}`),\n\t\t\ttag(\"slot\"),\n\t\t\ttag(\"div\"),\n\t\t);\n\t}\n\tconnectedCallback() {\n\t\tconst div = this.shadowRoot?.lastElementChild;\n\t\tconst cluster = Number(attr(this, \"data-cluster\")) \|\| 1;\n\t\tconst tiles = new L.TileLayer(TILES_COLOR, {\n\t\t\tattribution: \"© Kartverket\",\n\t\t\tmaxZoom: 18,\n\t\t});\n\n\t\tthis.map = new L.Map(div as HTMLElement, {\n\t\t\tattributionControl: false,\n\t\t\twheelPxPerZoomLevel: 20,\n\t\t\tzoomControl: false,\n\t\t\tzoomSnap: 0,\n\t\t\tlayers: [tiles],\n\t\t});\n\n\t\tthis.cluster = new L.MarkerClusterGroup({\n\t\t\tdisableClusteringAtZoom: cluster,\n\t\t\tshowCoverageOnHover: false,\n\t\t\tzoomToBoundsOnClick: true,\n\t\t}).addTo(this.map);\n\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\", handlePopupById);\n\n\t\t// Initial setup when map is connected\n\t\tMTDSAtlasElement.observedAttributes.forEach((name) => {\n\t\t\tthis.attributeChangedCallback(name, null, attr(this, name));\n\t\t});\n\t}\n\tattributeChangedCallback(\n\t\tname: string,\n\t\t_prev: string \| null = null,\n\t\tnext: string \| null = null,\n\t) {\n\t\tif (!this.map) return; // No map yet\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[], options?: L.ZoomPanOptions) {\n\t\tconst pos = `${view}`.split(\",\").map(parseFloat).filter(Number.isFinite);\n\t\tconst bounds = this.cluster?.getBounds();\n\n\t\tif (pos.length === 3) this.map?.setView([pos[0], pos[1]], pos[2], options);\n\t\telse if (view !== \"fit\") this.map?.fitBounds(BOUNDS_NORWAY, options);\n\t\telse if (!bounds?.isValid())\n\t\t\tthis.cluster?.on(\"layeradd\", fitWhenMarkers, this);\n\t\telse this.map?.fitBounds(bounds, options \|\| { padding: [40, 40] });\n\t}\n\taddMarker(latlng: L.LatLngExpression, options?: L.MarkerOptions) {\n\t\treturn new L.Marker(latlng, options).addTo(\n\t\t\tthis.cluster as L.MarkerClusterGroup,\n\t\t);\n\t}\n\tdisconnectedCallback() {\n\t\tthis.map?.remove();\n\t}\n}\n\n// Set default marker icon and define custom element\nif (IS_BROWSER && !window.customElements.get(\"mtds-atlas\")) {\n\tL.Marker.prototype.options.icon = new L.DivIcon({\n\t\thtml: '<svg class=\"map-pin\" viewBox=\"0 0 256 256\"><rect x=\"78\" y=\"50\" width=\"100\" height=\"100\" /><path fill=\"var(--mtds-)\" d=\"M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z\"/></svg>',\n\t\ticonSize: MARKER_SIZE as PointExpression,\n\t\ticonAnchor: [15, 30],\n\t\tpopupAnchor: [0, -15],\n\t});\n\twindow.customElements.define(\"mtds-atlas\", MTDSAtlasElement);\n}\n\n// TODO: Style markers\n// TODO: Synlig label til marker\n\nconst fitWhenMarkers = debounce(function (this: MTDSAtlasElement) {\n\tthis.cluster?.off(\"layeradd\", fitWhenMarkers);\n\tif (this.cluster?.getBounds().isValid()) this.setView(\"fit\");\n}, 100);\n\nconst HANDLE_POPUP_EVENTS = \"popupclose move resize zoomanim viewreset\";\nconst handlePopupById = ({ target: map, popup }: L.LeafletEvent) => {\n\tconst id = popup.getContent();\n\tconst popover = String(id)[0] === \"#\" && document.getElementById(id.slice(1));\n\n\tif (!!popover && popover.closest(\"mtds-atlas\")) {\n\t\tconst latlng = popup.getLatLng();\n\t\tconst mode = attr(popover, \"popover\"); // Save current popover mode\n\t\tattr(popup.getElement(), \"hidden\", \"\"); // Hide Leaflet popup element\n\t\tattr(popover, \"data-popover\", \"open\"); // Show popover\n\t\tattr(popover, \"popover\", \"manual\"); // Disable Popover API to show and ensure overflow: clip on mtds-atlas works\n\n\t\tconst resize = new ResizeObserver(() => update());\n\t\tconst update = (event?: L.LeafletEvent) => {\n\t\t\tif (event?.type === \"popupclose\" && event?.popup === popup) {\n\t\t\t\tresize.disconnect();\n\t\t\t\tmap.off(HANDLE_POPUP_EVENTS, update);\n\t\t\t\tattr(popup.getElement(), \"hidden\", null); // Un-hide Leaflet popup element\n\t\t\t\tattr(popover, \"data-popover\", null); // Hide popover\n\t\t\t\tattr(popover, \"popover\", mode); // Re-enable Popover API\n\t\t\t\toff(popover, \"click\", click);\n\t\t\t} else {\n\t\t\t\tconst point = map.latLngToContainerPoint(latlng);\n\t\t\t\tconst x = point.x - popover.offsetWidth / 2 - MARKER_SIZE[0] / 2;\n\t\t\t\tconst y = point.y - popover.offsetHeight - MARKER_SIZE[1];\n\t\t\t\tpopover.style.translate = `${x}px ${y}px`;\n\t\t\t}\n\t\t};\n\t\tconst click = ({ target: el }: Event) =>\n\t\t\t(el as Element)?.closest?.('[popovertargetaction=\"hide\"]') &&\n\t\t\tpopup.close();\n\n\t\tmap.on(HANDLE_POPUP_EVENTS, update);\n\t\ton(popover, \"click\", click); // Listen for close actions inside popover since we are not using actual Popover API\n\t\tresize.observe(popover); // Listen for changes of popover size\n\t\tupdate(); // Initial position\n\t}\n};\n\n// export type Adresse = {\n// \tadressekode: number;\n// \tadressetekst: string;\n// \tbokstav: string;\n// \tbruksenhetsnummer: string[];\n// \tbruksnummer: number;\n// \tfestenummer: number;\n// \tgardsnummer: number;\n// \tkommunenavn: string;\n// \tkommunenummer: string;\n// \tnummer: number;\n// \tobjtype: string;\n// \toppdateringsdato: string;\n// \tpostnummer: string;\n// \tpoststed: string;\n// \trepresentasjonspunkt: {\n// \t\tepsg: string;\n// \t\tlat: number;\n// \t\tlon: number;\n// \t};\n// \tstedfestingverifisert: boolean;\n// \tundernummer: string \| null;\n// };\n\n// // Hent punkt for adresse fra GeoNorge\n// export async function getPunktFraAdresse(\n// \tadresseSoek: string,\n// ): Promise<Adresse[]> {\n// \ttry {\n// \t\tconst response = await fetch(\n// \t\t\t`https://ws.geonorge.no/adresser/v1/sok?sok=${adresseSoek}&fuzzy=false&utkoordsys=3857&treffPerSide=100&asciiKompatibel=true`,\n// \t\t);\n// \t\tconst jsonresponse = await response.json();\n// \t\tif (jsonresponse.adresser.length > 0) {\n// \t\t\treturn jsonresponse.adresser.map((adresse: Adresse) => ({\n// \t\t\t\tadressekode: adresse.adressekode,\n// \t\t\t\tadressetekst: adresse.adressetekst,\n// \t\t\t\tbokstav: adresse.bokstav,\n// \t\t\t\tbruksenhetsnummer: adresse.bruksenhetsnummer,\n// \t\t\t\tbruksnummer: adresse.bruksnummer,\n// \t\t\t\tfestenummer: adresse.festenummer,\n// \t\t\t\tgardsnummer: adresse.gardsnummer,\n// \t\t\t\tkommunenavn: adresse.kommunenavn,\n// \t\t\t\tkommunenummer: adresse.kommunenummer,\n// \t\t\t\tnummer: adresse.nummer,\n// \t\t\t\tobjtype: adresse.objtype,\n// \t\t\t\toppdateringsdato: adresse.oppdateringsdato,\n// \t\t\t\tpostnummer: adresse.postnummer,\n// \t\t\t\tpoststed: adresse.poststed,\n// \t\t\t\trepresentasjonspunkt: {\n// \t\t\t\t\tepsg: adresse.representasjonspunkt.epsg,\n// \t\t\t\t\tlat: adresse.representasjonspunkt.lat,\n// \t\t\t\t\tlon: adresse.representasjonspunkt.lon,\n// \t\t\t\t},\n// \t\t\t}));\n// \t\t} else {\n// \t\t\treturn [];\n// \t\t}\n// \t} catch (error) {\n// \t\tconsole.log(`Feilet i å hente adresse fra punkt: ${error}`);\n// \t\treturn [];\n// \t}\n// }\n"],"names":["MARKER_SIZE","BOUNDS_NORWAY","TILES_COLOR","MTDSAtlasElement","MTDSElement","tag","LeafletCSS","css","div","cluster","attr","tiles","L","handlePopupById","name","_prev","next","view","options","pos","bounds","fitWhenMarkers","latlng","IS_BROWSER","debounce","HANDLE_POPUP_EVENTS","map","popup","id","popover","mode","resize","update","event","off","click","point","x","y","el","on"],"mappings":"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"}

package/mtds/atlas/atlas.css.js CHANGED Viewed

@@ -52,6 +52,8 @@ slot {
 	box-sizing: border-box;
 	font: inherit;
 	outline: 0;
+	position: relative;
+	z-index: 1; /* Ensure <slot> is always on top */
 }
 .leaflet-control-attribution {
 	font-size: 12px;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"atlas.css.js","sources":["../../designsystem/atlas/atlas.css?raw"],"sourcesContent":["export default \":host {\\n\\t--mtdsc-atlas-cluster-size: var(--mtds-8);\\n\\t--mtdsc-atlas-background: #fbfbfb;\\n\\t--mtdsc-atlas-border-color: var(--ds-color-border-subtle);\\n\\t--mtdsc-atlas-border: var(--ds-border-width-default) solid\\n\\t\\tvar(--mtdsc-atlas-border-color);\\n\\n\\tborder-radius: var(--ds-border-radius-md);\\n\\taspect-ratio: 2;\\n\\toverflow: clip;\\n\\tposition: relative;\\n\\tuser-select: none;\\n}\\n:host(:not([hidden])) {\\n\\tdisplay: grid;\\n}\\n:host([data-cursor=\\\"pointer\\\"]) .leaflet-grab {\\n\\tcursor: pointer;\\n}\\n.leaflet-tile-container {\\n\\tfilter: grayscale(1) contrast(0.75) brightness(1.15);\\n}\\n:host([data-tiles=\\\"color\\\"]) .leaflet-tile-container {\\n\\tfilter: grayscale(0.2);\\n}\\n:host([data-tiles=\\\"color\\\"]) {\\n\\t--mtdsc-atlas-background: #e5fcfd;\\n}\\n:host:has(.leaflet-container:focus-visible) {\\n\\tbox-shadow: var(--dsc-focus-boxShadow);\\n\\toutline: var(--dsc-focus-outline);\\n\\toutline-offset: var(--ds-border-width-focus);\\n}\\nslot {\\n\\tdisplay: grid;\\n\\tinset: var(--mtds-3);\\n\\tpointer-events: none; /* Ensure slot does not stop pointer from reaching leaflet /\\n\\tposition: absolute;\\n\\tz-index: 2;\\n}\\n::slotted() {\\n\\tpointer-events: all; /* But let children of slot stop pointer from reaching leaflet /\\n}\\n.leaflet-div-icon {\\n\\tbackground: none;\\n\\tborder: 0;\\n}\\n.leaflet-container {\\n\\tbackground: var(--mtdsc-atlas-background);\\n\\tborder-radius: inherit;\\n\\tborder: var(--mtdsc-atlas-border);\\n\\tbox-sizing: border-box;\\n\\tfont: inherit;\\n\\toutline: 0;\\n}\\n.leaflet-control-attribution {\\n\\tfont-size: 12px;\\n\\tborder-top-left-radius: var(--ds-border-radius-md);\\n}\\n\\n.map-pin rect {\\n\\tfill: var(--ds-color-base-contrast-default);\\n}\\n.map-pin path {\\n\\tfill: var(--ds-color-base-default);\\n}\\n\\n.marker-cluster {\\n\\tbackground-color: var(--mtds-color-base-default);\\n\\tborder-radius: 100%;\\n\\tcolor: var(--mtds-color-base-contrast-default);\\n\\tfont-weight: 500;\\n\\tfont-size: var(--ds-body-xs-font-size);\\n\\tline-height: var(--mtdsc-atlas-cluster-size);\\n\\ttext-align: center;\\n\\n\\t/ biome-ignore lint/complexity/noImportantStyles: need to overwrite style attribute /\\n\\twidth: var(--mtdsc-atlas-cluster-size) !important;\\n\\t/ biome-ignore lint/complexity/noImportantStyles: need to overwrite style attribute /\\n\\theight: var(--mtdsc-atlas-cluster-size) !important;\\n\\t/ biome-ignore lint/complexity/noImportantStyles: need to overwrite style attribute */\\n\\tmargin: calc(var(--mtdsc-atlas-cluster-size) / -2) !important;\\n}\\n\""],"names":["css"],"mappings":"AAAA,MAAAA,IAAe;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;"}
1	+ {"version":3,"file":"atlas.css.js","sources":["../../designsystem/atlas/atlas.css?raw"],"sourcesContent":["export default \":host {\\n\\t--mtdsc-atlas-cluster-size: var(--mtds-8);\\n\\t--mtdsc-atlas-background: #fbfbfb;\\n\\t--mtdsc-atlas-border-color: var(--ds-color-border-subtle);\\n\\t--mtdsc-atlas-border: var(--ds-border-width-default) solid\\n\\t\\tvar(--mtdsc-atlas-border-color);\\n\\n\\tborder-radius: var(--ds-border-radius-md);\\n\\taspect-ratio: 2;\\n\\toverflow: clip;\\n\\tposition: relative;\\n\\tuser-select: none;\\n}\\n:host(:not([hidden])) {\\n\\tdisplay: grid;\\n}\\n:host([data-cursor=\\\"pointer\\\"]) .leaflet-grab {\\n\\tcursor: pointer;\\n}\\n.leaflet-tile-container {\\n\\tfilter: grayscale(1) contrast(0.75) brightness(1.15);\\n}\\n:host([data-tiles=\\\"color\\\"]) .leaflet-tile-container {\\n\\tfilter: grayscale(0.2);\\n}\\n:host([data-tiles=\\\"color\\\"]) {\\n\\t--mtdsc-atlas-background: #e5fcfd;\\n}\\n:host:has(.leaflet-container:focus-visible) {\\n\\tbox-shadow: var(--dsc-focus-boxShadow);\\n\\toutline: var(--dsc-focus-outline);\\n\\toutline-offset: var(--ds-border-width-focus);\\n}\\nslot {\\n\\tdisplay: grid;\\n\\tinset: var(--mtds-3);\\n\\tpointer-events: none; /* Ensure slot does not stop pointer from reaching leaflet /\\n\\tposition: absolute;\\n\\tz-index: 2;\\n}\\n::slotted() {\\n\\tpointer-events: all; /* But let children of slot stop pointer from reaching leaflet /\\n}\\n.leaflet-div-icon {\\n\\tbackground: none;\\n\\tborder: 0;\\n}\\n.leaflet-container {\\n\\tbackground: var(--mtdsc-atlas-background);\\n\\tborder-radius: inherit;\\n\\tborder: var(--mtdsc-atlas-border);\\n\\tbox-sizing: border-box;\\n\\tfont: inherit;\\n\\toutline: 0;\\n\\tposition: relative;\\n\\tz-index: 1; / Ensure <slot> is always on top /\\n}\\n.leaflet-control-attribution {\\n\\tfont-size: 12px;\\n\\tborder-top-left-radius: var(--ds-border-radius-md);\\n}\\n\\n.map-pin rect {\\n\\tfill: var(--ds-color-base-contrast-default);\\n}\\n.map-pin path {\\n\\tfill: var(--ds-color-base-default);\\n}\\n\\n.marker-cluster {\\n\\tbackground-color: var(--mtds-color-base-default);\\n\\tborder-radius: 100%;\\n\\tcolor: var(--mtds-color-base-contrast-default);\\n\\tfont-weight: 500;\\n\\tfont-size: var(--ds-body-xs-font-size);\\n\\tline-height: var(--mtdsc-atlas-cluster-size);\\n\\ttext-align: center;\\n\\n\\t/ biome-ignore lint/complexity/noImportantStyles: need to overwrite style attribute /\\n\\twidth: var(--mtdsc-atlas-cluster-size) !important;\\n\\t/ biome-ignore lint/complexity/noImportantStyles: need to overwrite style attribute /\\n\\theight: var(--mtdsc-atlas-cluster-size) !important;\\n\\t/ biome-ignore lint/complexity/noImportantStyles: need to overwrite style attribute */\\n\\tmargin: calc(var(--mtdsc-atlas-cluster-size) / -2) !important;\\n}\\n\""],"names":["css"],"mappings":"AAAA,MAAAA,IAAe;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;"}

package/mtds/atlas/atlas.stories.d.ts CHANGED Viewed

@@ -15,4 +15,5 @@ export declare const WithCustomSize: Story;
 export declare const WithMarker: Story;
 export declare const WithClickToAddMarker: Story;
 export declare const WithClustering: Story;
+export declare const WithPopover: Story;
 export declare const WithoutScrollZoom: Story;