@mattilsynet/design 2.2.24 → 2.2.25

package/mtds/atlas/atlas-matgeo.js

@@ -0,0 +1,71 @@
+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));
+class MTDSAtlasMatgeoElement extends MTDSElement {
+  atlas;
+  geojson;
+  static get observedAttributes() {
+    return ["data-collection", "popovertarget"];
+  }
+  constructor() {
+    super();
+    this.refresh = debounce(this.refresh, 300);
+  }
+  connectedCallback() {
+    queueMicrotask(() => {
+      this.atlas = this.closest("mtds-atlas") || void 0;
+      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);
+      this.refresh();
+    });
+  }
+  attributeChangedCallback(name) {
+    if (name === "popovertarget") this.geojson?.getPopup()?.update();
+    if (name === "data-color") this.geojson?.setStyle(this.#getStyle());
+    if (name === "data-collection") this.refresh();
+  }
+  disconnectedCallback() {
+    this.atlas?.map?.off(MATGEO_EVENTS, this.refresh, this);
+    this.geojson?.unbindPopup().remove();
+    this.geojson = this.atlas = void 0;
+  }
+  refresh(nocache) {
+    window._matgeoCollections?.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))
+        console.warn(
+          `mtds-atlas-matgeo: Please set a vaild \x1B[103mdata-collection="${collections.join(" | ")}"\x1B[m`
+        );
+      else
+        fetch(`${MATGEO_URL}/${collection}/items?bbox=${bbox}${cache}`).then((res) => res.json()).then((data) => this.geojson?.clearLayers().addData(data));
+    });
+  }
+  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 })
+    );
+  }
+  #getStyle() {
+    return {
+      color: `var(--mtds-color-${attr(this, "data-color") || "main"}-base-default)`
+    };
+  }
+}
+defineElement("mtds-atlas-matgeo", MTDSAtlasMatgeoElement);
+export {
+  MTDSAtlasMatgeoElement
+};
+//# sourceMappingURL=atlas-matgeo.js.map

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

@@ -0,0 +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;"}

package/mtds/atlas/atlas.css.js

@@ -1,142 +1,122 @@
-const t = `/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */
+const css = `/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */
 :host {
-	--mtdsc-atlas-background: #fbfbfb;
-	--mtdsc-atlas-border: var(--mtds-border-width-default) solid
-		var(--mtds-color-border-subtle);
+	--mtdsc-atlas-border: 1px solid var(--mtds-color-border-subtle);
+	--mtdsc-atlas-cluster-border: 1px solid;
+	--mtdsc-atlas-marker-background: var(--mtds-color-base-default);
+	--mtdsc-atlas-marker-border: 1px solid;
+	--mtdsc-atlas-marker-color: var(--mtds-color-base-contrast-default);
+	--mtdsc-atlas-marker-inset: 3px;
+	--mtdsc-atlas-marker-shadow: rgba(0,0,0,.2);
+	--mtdsc-atlas-marker-size: var(--mtds-6);
+	--mtdsc-atlas-tile-background: #fbfbfb;
+	--mtdsc-atlas-tile-filter: grayscale(1) contrast(0.75) brightness(1.15);
 
 	border-radius: var(--mtds-border-radius-md);
 	aspect-ratio: 2;
 	overflow: clip;
 	position: relative;
 }
-:host(:not([hidden])) {
-	display: block;
-}
-:host([data-cursor="pointer"]) .leaflet-grab {
-	cursor: pointer;
-}
-slot {
-	display: block;
-	inset: 0;
-	pointer-events: none; /* Ensure slot does not stop pointer from reaching leaflet */
-	position: absolute;
-	z-index: 2;
-}
-::slotted(*) {
-	pointer-events: all; /* But let children of slot stop pointer from reaching leaflet */
-}
+:host(:not([hidden])) { display: block }
+:host([data-cursor="pointer"]) .leaflet-grab { cursor: pointer }
 
 /* Focus */
 .leaflet-control-zoom a:focus-visible,
-:host:has(.leaflet-container:focus-visible) {
+:host:has(.leaflet-container:focus-visible),
+::slotted(mtds-atlas-marker:focus-visible) {
 	box-shadow: var(--mtdsc-focus-boxShadow);
 	outline: var(--mtdsc-focus-outline);
 	outline-offset: var(--mtds-border-width-focus);
 }
 
-/* Map and tiles */
+/* Tiles */
+.leaflet-tile-container { filter: var(--mtdsc-atlas-tile-filter); transition: filter 0.5s }
 .leaflet-container {
-	background: var(--mtdsc-atlas-background);
+	background: var(--mtdsc-atlas-tile-background);
 	border-radius: inherit;
 	border: var(--mtdsc-atlas-border);
 	box-sizing: border-box;
 	font: inherit;
 	height: 100%;
+	margin: 0;
 	outline: 0;
 	position: relative;
 	z-index: 1; /* Ensure <slot> is always on top */
 }
-.leaflet-tile-container {
-	filter: grayscale(1) contrast(0.75) brightness(1.15);
-	transition: filter 0.5s;
-}
 :host([data-tiles="color"]) {
-	--mtdsc-atlas-background: #e5fcfd;
-}
-:host([data-tiles="color"]) .leaflet-tile-container {
-	filter: grayscale(0.2);
+	--mtdsc-atlas-tile-background: #e5fcfd;
+	--mtdsc-atlas-tile-filter: grayscale(0.2);
 }
 
 /* Controls */
-.leaflet-control-attribution {
-	font-size: 12px;
-	border-top-left-radius: var(--mtds-border-radius-md);
-}
-.leaflet-control-zoom {
-	border-radius: var(--mtds-border-radius-md);
-	border: 1px solid var(--mtds-color-border-default);
-}
-.leaflet-control-zoom a {
-	border-color: inherit;
-	background: var(--mtds-color-surface-default);
-	color: var(--mtds-color-text-default);
-	display: flex;
-	height: var(--mtds-10);
-	outline: 0;
-	place-content: center;
-	place-items: center;
-	transition: 0.2s;
-	width: var(--mtds-10);
-}
-.leaflet-control-zoom a:first-child {
-	border-top-left-radius: inherit;
-	border-top-right-radius: inherit;
-}
-.leaflet-control-zoom a:last-child {
-	border-bottom-left-radius: inherit;
-	border-bottom-right-radius: inherit;
-}
-.leaflet-control-zoom a:hover {
-	background: var(--mtds-color-surface-hover);
-}
-.leaflet-control-zoom a:active {
-	background: var(--mtds-color-surface-active);
-}
+.leaflet-control-attribution { font-size: 12px; border-top-left-radius: var(--mtds-border-radius-md) }
+.leaflet-control-zoom { border-radius: var(--mtds-border-radius-md); border: 1px solid var(--mtds-color-border-default) }
+.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) }
+.leaflet-control-zoom a:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit }
+.leaflet-control-zoom a:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit }
+.leaflet-control-zoom a:hover { background: var(--mtds-color-surface-hover) }
+.leaflet-control-zoom a:active { background: var(--mtds-color-surface-active) }
 
 /* Markers */
-.leaflet-tooltip {
-	background: var(--mtds-color-surface-default);
-	border-radius: var(--mtds-border-radius-md);
-	box-shadow: var(--mtds-box-shadow-sm);
-	color: var(--mtds-color-text-default);
-	padding: var(--mtds-1) var(--mtds-2);
-}
-.leaflet-marker-icon {
-	background: none;
-	border: 0;
-}
-.leaflet-marker-icon rect {
-	fill: var(--mtds-color-base-contrast-default);
-}
-.leaflet-marker-icon path {
-	fill: var(--mtds-color-base-default);
-	stroke: var(--mtds-color-base-contrast-default);
-	vector-effect: non-scaling-stroke;
+::slotted(mtds-atlas-marker) {
+	all: unset;
+	color: var(--mtdsc-atlas-marker-color);
+	background: var(--mtdsc-atlas-marker-background);
+	border-radius: 100%;
+	box-sizing: border-box;
+	cursor: pointer;
+	display: grid;
+	place-items: center;
+	place-content: center;
+	font-size: var(--mtds-body-sm-font-size);
+	font-weight: var(--mtds-font-weight-bold);
+	height: var(--mtdsc-atlas-marker-size);
+	/* biome-ignore lint/complexity/noImportantStyles: Overwrite Tailwind */
+	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);
+}
+::slotted(mtds-atlas-marker)::after {
+	box-shadow: 2px 2px 2px var(--mtdsc-atlas-marker-shadow);
+	aspect-ratio: 1;
+	background: var(--mtdsc-atlas-marker-color);
+	color: var(--mtdsc-atlas-marker-background);
+	border-radius: 50% 50% 0 50%;
+	/* biome-ignore lint/complexity/noImportantStyles: Overwrite Tailwind */
+	border: var(--mtdsc-atlas-marker-border)!important;
+	content: "";
+	rotate: 45deg;
+	position: absolute;
+	inset: calc(var(--mtdsc-atlas-marker-inset) * -1);
+	z-index: -1;
 }
+
+.leaflet-marker-icon { background: none; border: 0 }
+.leaflet-marker-icon slot { display: block; position: absolute; left: 0; top: 0; translate: -50% -100% }
 .leaflet-cluster-icon {
+	box-shadow: 0 3px 3px var(--mtdsc-atlas-marker-shadow);
 	background-color: var(--mtds-color-base-default);
 	border-radius: 100%;
-	border: 1px solid;
+	border: var(--mtdsc-atlas-cluster-border);
 	box-sizing: border-box;
+	outline: 1px solid var(--mtds-color-base-default);
 	color: var(--mtds-color-base-contrast-default);
 	display: flex;
 	font-size: var(--mtds-body-xs-font-size);
-	font-weight: 500;
+	font-weight: var(--mtds-font-weight-bold);
 	place-content: center;
 	place-items: center;
 }
-/* .leaflet-marker-icon::after {
-	aspect-ratio: 1;
-	background: #fff;
-	border-radius: 50% 50% 0 50%;
-	border: 1px solid red;
-	content: "";
-	inset: 0 0 auto;
-	position: absolute;
-	rotate: 45deg;
-} */
+
+/* Popover */
+.leaflet-popup:has(slot) .leaflet-popup-tip { background: var(--mtds-color-surface-default) }
+.leaflet-popup:has(slot) .leaflet-popup-close-button { display: none } /* Popup closes on clicking marker anyway */
+.leaflet-popup:has(slot) .leaflet-popup-content-wrapper { display: contents } /* No need for styling this element */
+.leaflet-popup:has(slot) .leaflet-popup-content { margin: 0; font: inherit }
 `;
 export {
-  t as default
+  css as default
 };
 //# sourceMappingURL=atlas.css.js.map

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-background: #fbfbfb;\\n\\t--mtdsc-atlas-border: var(--mtds-border-width-default) solid\\n\\t\\tvar(--mtds-color-border-subtle);\\n\\n\\tborder-radius: var(--mtds-border-radius-md);\\n\\taspect-ratio: 2;\\n\\toverflow: clip;\\n\\tposition: relative;\\n}\\n:host(:not([hidden])) {\\n\\tdisplay: block;\\n}\\n:host([data-cursor=\\\"pointer\\\"]) .leaflet-grab {\\n\\tcursor: pointer;\\n}\\nslot {\\n\\tdisplay: block;\\n\\tinset: 0;\\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\\n/* Focus */\\n.leaflet-control-zoom a:focus-visible,\\n:host:has(.leaflet-container:focus-visible) {\\n\\tbox-shadow: var(--dsc-focus-boxShadow);\\n\\toutline: var(--dsc-focus-outline);\\n\\toutline-offset: var(--mtds-border-width-focus);\\n}\\n\\n/* Map and tiles */\\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\\theight: 100%;\\n\\toutline: 0;\\n\\tposition: relative;\\n\\tz-index: 1; /* Ensure <slot> is always on top */\\n}\\n.leaflet-tile-container {\\n\\tfilter: grayscale(1) contrast(0.75) brightness(1.15);\\n\\ttransition: filter 0.5s;\\n}\\n:host([data-tiles=\\\"color\\\"]) {\\n\\t--mtdsc-atlas-background: #e5fcfd;\\n}\\n:host([data-tiles=\\\"color\\\"]) .leaflet-tile-container {\\n\\tfilter: grayscale(0.2);\\n}\\n\\n/* Controls */\\n.leaflet-control-attribution {\\n\\tfont-size: 12px;\\n\\tborder-top-left-radius: var(--mtds-border-radius-md);\\n}\\n.leaflet-control-zoom {\\n\\tborder-radius: var(--mtds-border-radius-md);\\n\\tborder: 1px solid var(--mtds-color-border-default);\\n}\\n.leaflet-control-zoom a {\\n\\tborder-color: inherit;\\n\\tbackground: var(--mtds-color-surface-default);\\n\\tcolor: var(--mtds-color-text-default);\\n\\tdisplay: flex;\\n\\theight: var(--mtds-10);\\n\\toutline: 0;\\n\\tplace-content: center;\\n\\tplace-items: center;\\n\\ttransition: 0.2s;\\n\\twidth: var(--mtds-10);\\n}\\n.leaflet-control-zoom a:first-child {\\n\\tborder-top-left-radius: inherit;\\n\\tborder-top-right-radius: inherit;\\n}\\n.leaflet-control-zoom a:last-child {\\n\\tborder-bottom-left-radius: inherit;\\n\\tborder-bottom-right-radius: inherit;\\n}\\n.leaflet-control-zoom a:hover {\\n\\tbackground: var(--mtds-color-surface-hover);\\n}\\n.leaflet-control-zoom a:active {\\n\\tbackground: var(--mtds-color-surface-active);\\n}\\n\\n/* Markers */\\n.leaflet-tooltip {\\n\\tbackground: var(--mtds-color-surface-default);\\n\\tborder-radius: var(--mtds-border-radius-md);\\n\\tbox-shadow: var(--mtds-box-shadow-sm);\\n\\tcolor: var(--mtds-color-text-default);\\n\\tpadding: var(--mtds-1) var(--mtds-2);\\n}\\n.leaflet-marker-icon {\\n\\tbackground: none;\\n\\tborder: 0;\\n}\\n.leaflet-marker-icon rect {\\n\\tfill: var(--mtds-color-base-contrast-default);\\n}\\n.leaflet-marker-icon path {\\n\\tfill: var(--mtds-color-base-default);\\n\\tstroke: var(--mtds-color-base-contrast-default);\\n\\tvector-effect: non-scaling-stroke;\\n}\\n.leaflet-cluster-icon {\\n\\tbackground-color: var(--mtds-color-base-default);\\n\\tborder-radius: 100%;\\n\\tborder: 1px solid;\\n\\tbox-sizing: border-box;\\n\\tcolor: var(--mtds-color-base-contrast-default);\\n\\tdisplay: flex;\\n\\tfont-size: var(--mtds-body-xs-font-size);\\n\\tfont-weight: 500;\\n\\tplace-content: center;\\n\\tplace-items: center;\\n}\\n/* .leaflet-marker-icon::after {\\n\\taspect-ratio: 1;\\n\\tbackground: #fff;\\n\\tborder-radius: 50% 50% 0 50%;\\n\\tborder: 1px solid red;\\n\\tcontent: \\\"\\\";\\n\\tinset: 0 0 auto;\\n\\tposition: absolute;\\n\\trotate: 45deg;\\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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-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;"}

package/mtds/atlas/atlas.d.ts

@@ -0,0 +1,42 @@
+import { CustomReactElementProps } from '../react-types';
+import { MTDSAtlasElement, MTDSAtlasMarkerElement, MTDSAtlasMatgeoElement } from './atlas-element';
+export * from './atlas-element';
+declare global {
+    namespace React.JSX {
+        interface IntrinsicElements {
+            "mtds-atlas": CustomReactElementProps<MTDSAtlasElement> & {
+                "data-cluster"?: number | `${number}` | boolean | "true" | "false";
+                "data-scrollzoom"?: boolean | "true" | "false";
+                "data-tiles"?: "color" | "gray";
+                "data-view"?: string | number[];
+            };
+            "mtds-atlas-marker": CustomReactElementProps<MTDSAtlasMarkerElement> & {
+                "data-latlng": string;
+            };
+            "mtds-atlas-matgeo": CustomReactElementProps<MTDSAtlasMatgeoElement> & {
+                "data-collection": string;
+                onatlasfeatureclick?: (event: GlobalEventHandlersEventMap["atlasfeatureclick"]) => void;
+            };
+        }
+    }
+}
+export type AtlasProps = React.JSX.IntrinsicElements["mtds-atlas"];
+export type AtlasMarkerProps = React.JSX.IntrinsicElements["mtds-atlas-marker"];
+export type AtlasMatgeoProps = React.JSX.IntrinsicElements["mtds-atlas-matgeo"] & {
+    onFeatureClick?: React.JSX.IntrinsicElements["mtds-atlas-matgeo"]["onatlasfeatureclick"];
+};
+export declare const Atlas: import('react').ForwardRefExoticComponent<Omit<{
+    class?: string;
+} & import('react').ClassAttributes<MTDSAtlasElement> & import('react').HTMLAttributes<MTDSAtlasElement> & {
+    "data-cluster"?: number | `${number}` | boolean | "true" | "false";
+    "data-scrollzoom"?: boolean | "true" | "false";
+    "data-tiles"?: "color" | "gray";
+    "data-view"?: string | number[];
+}, "ref"> & import('react').RefAttributes<MTDSAtlasElement>> & {
+    Marker: import('react').ForwardRefExoticComponent<Omit<{
+        class?: string;
+    } & import('react').ClassAttributes<MTDSAtlasMarkerElement> & import('react').HTMLAttributes<MTDSAtlasMarkerElement> & {
+        "data-latlng": string;
+    }, "ref"> & import('react').RefAttributes<MTDSAtlasMarkerElement>>;
+    Matgeo: import('react').ForwardRefExoticComponent<Omit<AtlasMatgeoProps, "ref"> & import('react').RefAttributes<MTDSAtlasMatgeoElement>>;
+};

package/mtds/atlas/atlas.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { toCustomElementProps } from "../utils.js";
+import { MTDSAtlasElement } from "./atlas-element.js";
+const AtlasComp = forwardRef(
+  function Atlas2(props, ref) {
+    return /* @__PURE__ */ jsx("mtds-atlas", { ref, ...toCustomElementProps(props) });
+  }
+);
+const Atlas = Object.assign(AtlasComp, {
+  Marker: forwardRef(
+    function AtlasMarker(props, ref) {
+      return /* @__PURE__ */ jsx("mtds-atlas-marker", { ref, ...toCustomElementProps(props) });
+    }
+  ),
+  Matgeo: forwardRef(
+    function AtlasMatgeo({ onFeatureClick, ...rest }, ref) {
+      return /* @__PURE__ */ jsx(
+        "mtds-atlas-matgeo",
+        {
+          ref,
+          onatlasfeatureclick: onFeatureClick,
+          ...toCustomElementProps(rest)
+        }
+      );
+    }
+  )
+});
+export {
+  Atlas,
+  MTDSAtlasElement
+};
+//# sourceMappingURL=atlas.js.map

package/mtds/atlas/atlas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"atlas.js","sources":["../../designsystem/atlas/atlas.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { CustomReactElementProps } from \"../react-types\";\nimport { toCustomElementProps } from \"../utils\";\nimport type {\n\tMTDSAtlasElement,\n\tMTDSAtlasMarkerElement,\n\tMTDSAtlasMatgeoElement,\n} from \"./atlas-element\";\n\nexport * from \"./atlas-element\"; // Expose { L } for Leaflet import\n\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t\"mtds-atlas\": CustomReactElementProps<MTDSAtlasElement> & {\n\t\t\t\t\"data-cluster\"?: number | `${number}` | boolean | \"true\" | \"false\";\n\t\t\t\t\"data-scrollzoom\"?: boolean | \"true\" | \"false\";\n\t\t\t\t\"data-tiles\"?: \"color\" | \"gray\";\n\t\t\t\t\"data-view\"?: string | number[];\n\t\t\t};\n\t\t\t\"mtds-atlas-marker\": CustomReactElementProps<MTDSAtlasMarkerElement> & {\n\t\t\t\t\"data-latlng\": string;\n\t\t\t};\n\t\t\t\"mtds-atlas-matgeo\": CustomReactElementProps<MTDSAtlasMatgeoElement> & {\n\t\t\t\t\"data-collection\": string;\n\t\t\t\tonatlasfeatureclick?: (\n\t\t\t\t\tevent: GlobalEventHandlersEventMap[\"atlasfeatureclick\"],\n\t\t\t\t) => void;\n\t\t\t};\n\t\t}\n\t}\n}\n\nexport type AtlasProps = React.JSX.IntrinsicElements[\"mtds-atlas\"];\nexport type AtlasMarkerProps = React.JSX.IntrinsicElements[\"mtds-atlas-marker\"];\nexport type AtlasMatgeoProps =\n\tReact.JSX.IntrinsicElements[\"mtds-atlas-matgeo\"] & {\n\t\tonFeatureClick?: React.JSX.IntrinsicElements[\"mtds-atlas-matgeo\"][\"onatlasfeatureclick\"];\n\t};\n\nconst AtlasComp = forwardRef<MTDSAtlasElement, AtlasProps>(\n\tfunction Atlas(props, ref) {\n\t\treturn <mtds-atlas ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport const Atlas = Object.assign(AtlasComp, {\n\tMarker: forwardRef<MTDSAtlasMarkerElement, AtlasMarkerProps>(\n\t\tfunction AtlasMarker(props, ref) {\n\t\t\treturn <mtds-atlas-marker ref={ref} {...toCustomElementProps(props)} />;\n\t\t},\n\t),\n\tMatgeo: forwardRef<MTDSAtlasMatgeoElement, AtlasMatgeoProps>(\n\t\tfunction AtlasMatgeo({ onFeatureClick, ...rest }, ref) {\n\t\t\treturn (\n\t\t\t\t<mtds-atlas-matgeo\n\t\t\t\t\tref={ref}\n\t\t\t\t\tonatlasfeatureclick={onFeatureClick}\n\t\t\t\t\t{...toCustomElementProps(rest)}\n\t\t\t\t/>\n\t\t\t);\n\t\t},\n\t),\n});\n"],"names":["Atlas"],"mappings":";;;;AAwCA,MAAM,YAAY;AAAA,EACjB,SAASA,OAAM,OAAO,KAAK;AAC1B,+BAAQ,cAAA,EAAW,KAAW,GAAG,qBAAqB,KAAK,GAAG;AAAA,EAC/D;AACD;AAEO,MAAM,QAAQ,OAAO,OAAO,WAAW;AAAA,EAC7C,QAAQ;AAAA,IACP,SAAS,YAAY,OAAO,KAAK;AAChC,iCAAQ,qBAAA,EAAkB,KAAW,GAAG,qBAAqB,KAAK,GAAG;AAAA,IACtE;AAAA,EAAA;AAAA,EAED,QAAQ;AAAA,IACP,SAAS,YAAY,EAAE,gBAAgB,GAAG,KAAA,GAAQ,KAAK;AACtD,aACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACA;AAAA,UACA,qBAAqB;AAAA,UACpB,GAAG,qBAAqB,IAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAGhC;AAAA,EAAA;AAEF,CAAC;"}

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

@@ -8,13 +8,17 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const React: Story;
 export declare const WithView: Story;
 export declare const WithViewAdvanced: Story;
 export declare const WithColor: Story;
 export declare const WithCustomSize: Story;
 export declare const WithMarker: Story;
-export declare const WithClickToAddMarker: Story;
+export declare const WithMarkerStyling: Story;
 export declare const WithClustering: Story;
 export declare const WithPopover: Story;
+export declare const WithPopoverDynamic: Story;
+export declare const WithMatgeo: Story;
 export declare const WithTooltip: Story;
+export declare const WithClickToAddMarker: Story;
 export declare const WithoutScrollZoom: Story;