@mattilsynet/design 2.2.9 → 2.2.12

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

@@ -0,0 +1,18 @@
+import { MTDSElement } from '../utils';
+import type * as ReactTypes from "react";
+type JSXMapAttrs = ReactTypes.HTMLAttributes<MTDLovvelgerElement>;
+type JSXMapProps = ReactTypes.DetailedHTMLProps<JSXMapAttrs, MTDLovvelgerElement>;
+declare global {
+    namespace React.JSX {
+        interface IntrinsicElements {
+            "mtds-lovvelger": JSXMapProps & {
+                class?: string;
+            };
+        }
+    }
+}
+export declare class MTDLovvelgerElement extends MTDSElement {
+    constructor();
+    connectedCallback(): void;
+}
+export {};

package/mtds/lawpicker/lawpicker.stories.d.ts

@@ -0,0 +1,10 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/mtds/logo/logo-observer.js

@@ -1,20 +1,19 @@
 import a from "../styles.module.css.js";
-import { onLoaded as c, onMutation as d, tag as g } from "../utils.js";
-const h = a.logo.split(" ")[0];
-function m([t]) {
-  if (t?.isConnected && t?.firstElementChild instanceof SVGSVGElement) {
-    for (const s of document.head.querySelectorAll("link[rel~='icon']"))
-      s.setAttribute("rel", "disabled");
-    const e = t.firstElementChild, o = t?.hasAttribute("data-env"), n = window.getComputedStyle(e), i = n.getPropertyValue("color"), r = n.getPropertyValue("--mtds-logo-color"), l = e.outerHTML.replace(/\n+/g, " ").replace(/(fill|width|height|xmlns)="[^"]+"/gi, "").replace("<svg", `<svg width="40" height="40" fill="${i}"`);
+import { IS_BROWSER as c, onLoaded as d, onMutation as g, tag as h } from "../utils.js";
+const m = a.logo.split(" ")[0], p = c ? document.getElementsByClassName(m) : [];
+function u() {
+  const e = p[0], t = e?.firstElementChild;
+  if (t instanceof SVGSVGElement) {
+    for (const i of document.head.querySelectorAll("link[rel~='icon']"))
+      i.setAttribute("rel", "disabled");
+    const o = e?.hasAttribute("data-env"), n = window.getComputedStyle(t), s = n.getPropertyValue("color"), l = n.getPropertyValue("--mtds-logo-color"), r = t.outerHTML.replace(/\n+/g, " ").replace(/(fill|width|height|xmlns)="[^"]+"/gi, "").replace("<svg", `<svg width="40" height="40" fill="${s}"`);
     document.head.appendChild(
-      g("link", {
-        href: `data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 55'><rect fill='${o ? "none" : r}' width='51' height='51' x='2' y='2' stroke='${i}' stroke-dasharray='0.09 6.38' stroke-linecap='round' stroke-opacity='${o ? 0.6 : 0}' stroke-width='2.3' rx='25.5'/><g transform="translate(7.5 7.5)">${l}</g></svg>`)}`,
+      h("link", {
+        href: `data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 55'><rect fill='${o ? "none" : l}' width='51' height='51' x='2' y='2' stroke='${s}' stroke-dasharray='0.09 6.38' stroke-linecap='round' stroke-opacity='${o ? 0.6 : 0}' stroke-width='2.3' rx='25.5'/><g transform="translate(7.5 7.5)">${r}</g></svg>`)}`,
         rel: "icon"
       })
     );
   }
 }
-c(
-  () => d(document.documentElement, h, m)
-);
+d(() => [g(u, "class")]);
 //# sourceMappingURL=logo-observer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"logo-observer.js","sources":["../../designsystem/logo/logo-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { onLoaded, onMutation, tag } from \"../utils\";\n\nconst CSS_LOGO = styles.logo.split(\" \")[0];\n\nfunction handleLogoMutation([logo]: HTMLCollectionOf<HTMLElement>) {\n\tif (logo?.isConnected && logo?.firstElementChild instanceof SVGSVGElement) {\n\t\tfor (const icon of document.head.querySelectorAll(\"link[rel~='icon']\"))\n\t\t\ticon.setAttribute(\"rel\", \"disabled\"); // Disable previous icon (but not remove is as this makes Next.js sad)\n\n\t\tconst svg = logo.firstElementChild;\n\t\tconst isDot = logo?.hasAttribute(\"data-env\");\n\t\tconst style = window.getComputedStyle(svg);\n\t\tconst text = style.getPropertyValue(\"color\");\n\t\tconst back = style.getPropertyValue(\"--mtds-logo-color\");\n\t\tconst icon = svg.outerHTML\n\t\t\t.replace(/\\n+/g, \" \") // Prevent line breaks\n\t\t\t.replace(/(fill|width|height|xmlns)=\"[^\"]+\"/gi, \"\")\n\t\t\t.replace(\"<svg\", `<svg width=\"40\" height=\"40\" fill=\"${text}\"`);\n\n\t\tdocument.head.appendChild(\n\t\t\ttag(\"link\", {\n\t\t\t\thref: `data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 55'><rect fill='${isDot ? \"none\" : back}' width='51' height='51' x='2' y='2' stroke='${text}' stroke-dasharray='0.09 6.38' stroke-linecap='round' stroke-opacity='${isDot ? 0.6 : 0}' stroke-width='2.3' rx='25.5'/><g transform=\"translate(7.5 7.5)\">${icon}</g></svg>`)}`,\n\t\t\t\trel: \"icon\",\n\t\t\t}),\n\t\t);\n\t}\n}\n\nonLoaded(() =>\n\tonMutation(document.documentElement, CSS_LOGO, handleLogoMutation),\n);\n"],"names":["CSS_LOGO","styles","handleLogoMutation","logo","icon","svg","isDot","style","text","back","tag","onLoaded","onMutation"],"mappings":";;AAGA,MAAMA,IAAWC,EAAO,KAAK,MAAM,GAAG,EAAE,CAAC;AAEzC,SAASC,EAAmB,CAACC,CAAI,GAAkC;AAClE,MAAIA,GAAM,eAAeA,GAAM,6BAA6B,eAAe;AAC1E,eAAWC,KAAQ,SAAS,KAAK,iBAAiB,mBAAmB;AACpEA,MAAAA,EAAK,aAAa,OAAO,UAAU;AAEpC,UAAMC,IAAMF,EAAK,mBACXG,IAAQH,GAAM,aAAa,UAAU,GACrCI,IAAQ,OAAO,iBAAiBF,CAAG,GACnCG,IAAOD,EAAM,iBAAiB,OAAO,GACrCE,IAAOF,EAAM,iBAAiB,mBAAmB,GACjDH,IAAOC,EAAI,UACf,QAAQ,QAAQ,GAAG,EACnB,QAAQ,uCAAuC,EAAE,EACjD,QAAQ,QAAQ,qCAAqCG,CAAI,GAAG;AAE9D,aAAS,KAAK;AAAA,MACbE,EAAI,QAAQ;AAAA,QACX,MAAM,sBAAsB,mBAAmB,2EAA2EJ,IAAQ,SAASG,CAAI,gDAAgDD,CAAI,yEAAyEF,IAAQ,MAAM,CAAC,qEAAqEF,CAAI,YAAY,CAAC;AAAA,QACjX,KAAK;AAAA,MAAA,CACL;AAAA,IAAA;AAAA,EAEH;AACD;AAEAO;AAAA,EAAS,MACRC,EAAW,SAAS,iBAAiBZ,GAAUE,CAAkB;AAClE;"}
+{"version":3,"file":"logo-observer.js","sources":["../../designsystem/logo/logo-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { IS_BROWSER, onLoaded, onMutation, tag } from \"../utils\";\n\nconst CSS_LOGO = styles.logo.split(\" \")[0];\nconst LOGOS = IS_BROWSER ? document.getElementsByClassName(CSS_LOGO) : [];\n\nfunction handleLogoMutation() {\n\tconst logo = LOGOS[0];\n\tconst svg = logo?.firstElementChild;\n\n\tif (svg instanceof SVGSVGElement) {\n\t\tfor (const icon of document.head.querySelectorAll(\"link[rel~='icon']\"))\n\t\t\ticon.setAttribute(\"rel\", \"disabled\"); // Disable previous icon (but not remove is as this makes Next.js sad)\n\n\t\tconst isDot = logo?.hasAttribute(\"data-env\");\n\t\tconst style = window.getComputedStyle(svg);\n\t\tconst text = style.getPropertyValue(\"color\");\n\t\tconst back = style.getPropertyValue(\"--mtds-logo-color\");\n\t\tconst icon = svg.outerHTML\n\t\t\t.replace(/\\n+/g, \" \") // Prevent line breaks\n\t\t\t.replace(/(fill|width|height|xmlns)=\"[^\"]+\"/gi, \"\")\n\t\t\t.replace(\"<svg\", `<svg width=\"40\" height=\"40\" fill=\"${text}\"`);\n\n\t\tdocument.head.appendChild(\n\t\t\ttag(\"link\", {\n\t\t\t\thref: `data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 55'><rect fill='${isDot ? \"none\" : back}' width='51' height='51' x='2' y='2' stroke='${text}' stroke-dasharray='0.09 6.38' stroke-linecap='round' stroke-opacity='${isDot ? 0.6 : 0}' stroke-width='2.3' rx='25.5'/><g transform=\"translate(7.5 7.5)\">${icon}</g></svg>`)}`,\n\t\t\t\trel: \"icon\",\n\t\t\t}),\n\t\t);\n\t}\n}\n\nonLoaded(() => [onMutation(handleLogoMutation, \"class\")]);\n"],"names":["CSS_LOGO","styles","LOGOS","IS_BROWSER","handleLogoMutation","logo","svg","icon","isDot","style","text","back","tag","onLoaded","onMutation"],"mappings":";;AAGA,MAAMA,IAAWC,EAAO,KAAK,MAAM,GAAG,EAAE,CAAC,GACnCC,IAAQC,IAAa,SAAS,uBAAuBH,CAAQ,IAAI,CAAA;AAEvE,SAASI,IAAqB;AAC7B,QAAMC,IAAOH,EAAM,CAAC,GACdI,IAAMD,GAAM;AAElB,MAAIC,aAAe,eAAe;AACjC,eAAWC,KAAQ,SAAS,KAAK,iBAAiB,mBAAmB;AACpEA,MAAAA,EAAK,aAAa,OAAO,UAAU;AAEpC,UAAMC,IAAQH,GAAM,aAAa,UAAU,GACrCI,IAAQ,OAAO,iBAAiBH,CAAG,GACnCI,IAAOD,EAAM,iBAAiB,OAAO,GACrCE,IAAOF,EAAM,iBAAiB,mBAAmB,GACjDF,IAAOD,EAAI,UACf,QAAQ,QAAQ,GAAG,EACnB,QAAQ,uCAAuC,EAAE,EACjD,QAAQ,QAAQ,qCAAqCI,CAAI,GAAG;AAE9D,aAAS,KAAK;AAAA,MACbE,EAAI,QAAQ;AAAA,QACX,MAAM,sBAAsB,mBAAmB,2EAA2EJ,IAAQ,SAASG,CAAI,gDAAgDD,CAAI,yEAAyEF,IAAQ,MAAM,CAAC,qEAAqED,CAAI,YAAY,CAAC;AAAA,QACjX,KAAK;AAAA,MAAA,CACL;AAAA,IAAA;AAAA,EAEH;AACD;AAEAM,EAAS,MAAM,CAACC,EAAWV,GAAoB,OAAO,CAAC,CAAC;"}

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

@@ -18,7 +18,7 @@ export declare class MTDSMapElement extends MTDSElement {
     cluster: L.MarkerClusterGroup;
     constructor();
     connectedCallback(): void;
-    addMarker(point: L.LatLngExpression): L.Marker<any>;
+    addMarker(latlng: L.LatLngExpression, options: L.MarkerOptions): L.Marker<any>;
     disconnectedCallback(): void;
 }
 export type Adresse = {

package/mtds/map/map-element.js

@@ -1,76 +1,82 @@
-import * as o from "leaflet";
-import m from "leaflet/dist/leaflet.css?raw";
-import a from "leaflet.markercluster/dist/MarkerCluster.css?raw";
+import * as n from "leaflet";
+import p from "leaflet/dist/leaflet.css?raw";
+import i from "leaflet.markercluster/dist/MarkerCluster.css?raw";
 import "leaflet.markercluster";
-import { IS_BROWSER as p, MTDSElement as u, tag as s } from "../utils.js";
-import i from "./map.css.js";
-o.Marker.prototype.options.icon = o.divIcon({
+import { IS_BROWSER as l, MTDSElement as u, tag as r, attr as c } from "../utils.js";
+import h from "./map.css.js";
+n.Marker.prototype.options.icon = n.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>',
   iconAnchor: [15, 30],
   iconSize: [30, 30]
 });
-const l = "https://cache.kartverket.no/v1/wmts/1.0.0/topograatone/default/webmercator/{z}/{y}/{x}.png";
-class c extends u {
+const d = "https://cache.kartverket.no/v1/wmts/1.0.0/topograatone/default/webmercator/{z}/{y}/{x}.png";
+class k extends u {
   map;
   cluster;
   constructor() {
     super();
-    const t = new CSSStyleSheet();
-    t.replaceSync(`${m}
-${a}
-${i}`), this.attachShadow({ mode: "open" }).adoptedStyleSheets = [t], this.shadowRoot?.append(s("slot"), s("div")), this.cluster = o.markerClusterGroup({
-      showCoverageOnHover: !1
+    const o = new CSSStyleSheet();
+    o.replaceSync(`${p}
+${i}
+${h}`), this.attachShadow({ mode: "open" }).adoptedStyleSheets = [o], this.shadowRoot?.append(r("slot"), r("div")), this.cluster = n.markerClusterGroup({
+      showCoverageOnHover: !1,
+      disableClusteringAtZoom: 1
     });
   }
   connectedCallback() {
-    this.map = o.map(this.shadowRoot?.lastElementChild, {
+    const o = `[${c(this, "data-view") || "57.95, 4.73, 71.19, 31.44, 15"}]`, e = JSON.parse(o);
+    if (this.map = n.map(this.shadowRoot?.lastElementChild, {
+      layers: [n.tileLayer(d, { maxZoom: 18 }), this.cluster],
       attributionControl: !1,
-      center: [63.43067801397488, 10.402166438219403],
-      zoom: 13,
-      layers: [o.tileLayer(l, { maxZoom: 18 }), this.cluster]
-    });
+      wheelPxPerZoomLevel: 10,
+      zoomControl: !1,
+      zoomSnap: 0
+    }), this.map.addControl(n.control.zoom({ position: "bottomright" })), e.length === 3 && this.map.setView([e[0], e[1]], e[2]), e.length >= 4) {
+      const t = [e[0], e[1]], m = [e[2], e[3]], a = [e[4] ?? 0, e[5] ?? e[4] ?? 0];
+      this.map.fitBounds([t, m], { padding: a });
+    }
   }
-  addMarker(t) {
-    return o.marker(t).addTo(this.cluster);
+  addMarker(o, e) {
+    return n.marker(o, e).addTo(this.cluster);
   }
   disconnectedCallback() {
     this.map?.remove();
   }
 }
-p && !window.customElements.get("mtds-map") && window.customElements.define("mtds-map", c);
-async function S(r) {
+l && !window.customElements.get("mtds-map") && window.customElements.define("mtds-map", k);
+async function b(s) {
   try {
-    const n = await (await fetch(
-      `https://ws.geonorge.no/adresser/v1/sok?sok=${r}&fuzzy=false&utkoordsys=3857&treffPerSide=100&asciiKompatibel=true`
+    const e = await (await fetch(
+      `https://ws.geonorge.no/adresser/v1/sok?sok=${s}&fuzzy=false&utkoordsys=3857&treffPerSide=100&asciiKompatibel=true`
     )).json();
-    return n.adresser.length > 0 ? n.adresser.map((e) => ({
-      adressekode: e.adressekode,
-      adressetekst: e.adressetekst,
-      bokstav: e.bokstav,
-      bruksenhetsnummer: e.bruksenhetsnummer,
-      bruksnummer: e.bruksnummer,
-      festenummer: e.festenummer,
-      gardsnummer: e.gardsnummer,
-      kommunenavn: e.kommunenavn,
-      kommunenummer: e.kommunenummer,
-      nummer: e.nummer,
-      objtype: e.objtype,
-      oppdateringsdato: e.oppdateringsdato,
-      postnummer: e.postnummer,
-      poststed: e.poststed,
+    return e.adresser.length > 0 ? e.adresser.map((t) => ({
+      adressekode: t.adressekode,
+      adressetekst: t.adressetekst,
+      bokstav: t.bokstav,
+      bruksenhetsnummer: t.bruksenhetsnummer,
+      bruksnummer: t.bruksnummer,
+      festenummer: t.festenummer,
+      gardsnummer: t.gardsnummer,
+      kommunenavn: t.kommunenavn,
+      kommunenummer: t.kommunenummer,
+      nummer: t.nummer,
+      objtype: t.objtype,
+      oppdateringsdato: t.oppdateringsdato,
+      postnummer: t.postnummer,
+      poststed: t.poststed,
       representasjonspunkt: {
-        epsg: e.representasjonspunkt.epsg,
-        lat: e.representasjonspunkt.lat,
-        lon: e.representasjonspunkt.lon
+        epsg: t.representasjonspunkt.epsg,
+        lat: t.representasjonspunkt.lat,
+        lon: t.representasjonspunkt.lon
       }
     })) : [];
-  } catch (t) {
-    return console.log(`Feilet i å hente adresse fra punkt: ${t}`), [];
+  } catch (o) {
+    return console.log(`Feilet i å hente adresse fra punkt: ${o}`), [];
   }
 }
 export {
-  o as L,
-  c as MTDSMapElement,
-  S as getPunktFraAdresse
+  n as L,
+  k as MTDSMapElement,
+  b as getPunktFraAdresse
 };
 //# sourceMappingURL=map-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"map-element.js","sources":["../../designsystem/map/map-element.ts"],"sourcesContent":["import * as L from \"leaflet\";\nimport LeafletCSS from \"leaflet/dist/leaflet.css?raw\";\nimport LeafletClusterCSS from \"leaflet.markercluster/dist/MarkerCluster.css?raw\";\nimport \"leaflet.markercluster\";\nimport type * as ReactTypes from \"react\";\nimport { IS_BROWSER, MTDSElement, tag } from \"../utils\";\nimport MapCss from \"./map.css?raw\";\n\ntype JSXMapAttrs = ReactTypes.HTMLAttributes<MTDSMapElement>;\ntype JSXMapProps = ReactTypes.DetailedHTMLProps<JSXMapAttrs, MTDSMapElement>;\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t\"mtds-map\": JSXMapProps & { class?: string };\n\t\t}\n\t}\n}\n\nL.Marker.prototype.options.icon = L.divIcon({\n\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\ticonAnchor: [15, 30],\n\ticonSize: [30, 30],\n});\n\nconst KARTVERKET_GRAY =\n\t\"https://cache.kartverket.no/v1/wmts/1.0.0/topograatone/default/webmercator/{z}/{y}/{x}.png\";\n\nexport { L };\nexport class MTDSMapElement extends MTDSElement {\n\tmap?: L.Map;\n\tcluster: L.MarkerClusterGroup;\n\n\tconstructor() {\n\t\tsuper();\n\t\tconst sheet = new CSSStyleSheet();\n\t\tsheet.replaceSync(`${LeafletCSS}\\n${LeafletClusterCSS}\\n${MapCss}`);\n\t\tthis.attachShadow({ mode: \"open\" }).adoptedStyleSheets = [sheet];\n\t\tthis.shadowRoot?.append(tag(\"slot\"), tag(\"div\"));\n\t\tthis.cluster = L.markerClusterGroup({\n\t\t\tshowCoverageOnHover: false,\n\t\t});\n\t}\n\tconnectedCallback() {\n\t\tthis.map = L.map(this.shadowRoot?.lastElementChild as HTMLElement, {\n\t\t\tattributionControl: false,\n\t\t\tcenter: [63.43067801397488, 10.402166438219403],\n\t\t\tzoom: 13,\n\t\t\tlayers: [L.tileLayer(KARTVERKET_GRAY, { maxZoom: 18 }), this.cluster],\n\t\t});\n\t}\n\taddMarker(point: L.LatLngExpression) {\n\t\treturn L.marker(point).addTo(this.cluster);\n\t}\n\tdisconnectedCallback() {\n\t\tthis.map?.remove();\n\t}\n}\n\nif (IS_BROWSER && !window.customElements.get(\"mtds-map\"))\n\twindow.customElements.define(\"mtds-map\", MTDSMapElement);\n\nexport 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\nexport 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":["L","KARTVERKET_GRAY","MTDSMapElement","MTDSElement","sheet","LeafletCSS","LeafletClusterCSS","MapCss","tag","point","IS_BROWSER","getPunktFraAdresse","adresseSoek","jsonresponse","adresse","error"],"mappings":";;;;;;AAkBAA,EAAE,OAAO,UAAU,QAAQ,OAAOA,EAAE,QAAQ;AAAA,EAC3C,MAAM;AAAA,EACN,YAAY,CAAC,IAAI,EAAE;AAAA,EACnB,UAAU,CAAC,IAAI,EAAE;AAClB,CAAC;AAED,MAAMC,IACL;AAGM,MAAMC,UAAuBC,EAAY;AAAA,EAC/C;AAAA,EACA;AAAA,EAEA,cAAc;AACb,UAAA;AACA,UAAMC,IAAQ,IAAI,cAAA;AAClB,IAAAA,EAAM,YAAY,GAAGC,CAAU;AAAA,EAAKC,CAAiB;AAAA,EAAKC,CAAM,EAAE,GAClE,KAAK,aAAa,EAAE,MAAM,OAAA,CAAQ,EAAE,qBAAqB,CAACH,CAAK,GAC/D,KAAK,YAAY,OAAOI,EAAI,MAAM,GAAGA,EAAI,KAAK,CAAC,GAC/C,KAAK,UAAUR,EAAE,mBAAmB;AAAA,MACnC,qBAAqB;AAAA,IAAA,CACrB;AAAA,EACF;AAAA,EACA,oBAAoB;AACnB,SAAK,MAAMA,EAAE,IAAI,KAAK,YAAY,kBAAiC;AAAA,MAClE,oBAAoB;AAAA,MACpB,QAAQ,CAAC,mBAAmB,kBAAkB;AAAA,MAC9C,MAAM;AAAA,MACN,QAAQ,CAACA,EAAE,UAAUC,GAAiB,EAAE,SAAS,GAAA,CAAI,GAAG,KAAK,OAAO;AAAA,IAAA,CACpE;AAAA,EACF;AAAA,EACA,UAAUQ,GAA2B;AACpC,WAAOT,EAAE,OAAOS,CAAK,EAAE,MAAM,KAAK,OAAO;AAAA,EAC1C;AAAA,EACA,uBAAuB;AACtB,SAAK,KAAK,OAAA;AAAA,EACX;AACD;AAEIC,KAAc,CAAC,OAAO,eAAe,IAAI,UAAU,KACtD,OAAO,eAAe,OAAO,YAAYR,CAAc;AA2BxD,eAAsBS,EACrBC,GACqB;AACrB,MAAI;AAIH,UAAMC,IAAe,OAHJ,MAAM;AAAA,MACtB,8CAA8CD,CAAW;AAAA,IAAA,GAEtB,KAAA;AACpC,WAAIC,EAAa,SAAS,SAAS,IAC3BA,EAAa,SAAS,IAAI,CAACC,OAAsB;AAAA,MACvD,aAAaA,EAAQ;AAAA,MACrB,cAAcA,EAAQ;AAAA,MACtB,SAASA,EAAQ;AAAA,MACjB,mBAAmBA,EAAQ;AAAA,MAC3B,aAAaA,EAAQ;AAAA,MACrB,aAAaA,EAAQ;AAAA,MACrB,aAAaA,EAAQ;AAAA,MACrB,aAAaA,EAAQ;AAAA,MACrB,eAAeA,EAAQ;AAAA,MACvB,QAAQA,EAAQ;AAAA,MAChB,SAASA,EAAQ;AAAA,MACjB,kBAAkBA,EAAQ;AAAA,MAC1B,YAAYA,EAAQ;AAAA,MACpB,UAAUA,EAAQ;AAAA,MAClB,sBAAsB;AAAA,QACrB,MAAMA,EAAQ,qBAAqB;AAAA,QACnC,KAAKA,EAAQ,qBAAqB;AAAA,QAClC,KAAKA,EAAQ,qBAAqB;AAAA,MAAA;AAAA,IACnC,EACC,IAEK,CAAA;AAAA,EAET,SAASC,GAAO;AACf,mBAAQ,IAAI,uCAAuCA,CAAK,EAAE,GACnD,CAAA;AAAA,EACR;AACD;"}
+{"version":3,"file":"map-element.js","sources":["../../designsystem/map/map-element.ts"],"sourcesContent":["import * as L from \"leaflet\";\nimport LeafletCSS from \"leaflet/dist/leaflet.css?raw\";\nimport LeafletClusterCSS from \"leaflet.markercluster/dist/MarkerCluster.css?raw\";\nimport \"leaflet.markercluster\";\nimport type * as ReactTypes from \"react\";\nimport { attr, IS_BROWSER, MTDSElement, tag } from \"../utils\";\nimport MapCss from \"./map.css?raw\";\n\ntype JSXMapAttrs = ReactTypes.HTMLAttributes<MTDSMapElement>;\ntype JSXMapProps = ReactTypes.DetailedHTMLProps<JSXMapAttrs, MTDSMapElement>;\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t\"mtds-map\": JSXMapProps & { class?: string };\n\t\t}\n\t}\n}\n\nL.Marker.prototype.options.icon = L.divIcon({\n\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\ticonAnchor: [15, 30],\n\ticonSize: [30, 30],\n});\n\n// const strToLatLng = (str?: string | null) =>\n// \t[0, 0, ...(str || \"\").split(\",\").map(parseFloat)].slice(-2) as L.LatLngTuple;\n\nconst KARTVERKET_GRAY =\n\t\"https://cache.kartverket.no/v1/wmts/1.0.0/topograatone/default/webmercator/{z}/{y}/{x}.png\";\n\nexport { L };\nexport class MTDSMapElement extends MTDSElement {\n\tmap?: L.Map;\n\tcluster: L.MarkerClusterGroup;\n\n\tconstructor() {\n\t\tsuper();\n\t\tconst sheet = new CSSStyleSheet();\n\t\tsheet.replaceSync(`${LeafletCSS}\\n${LeafletClusterCSS}\\n${MapCss}`);\n\t\tthis.attachShadow({ mode: \"open\" }).adoptedStyleSheets = [sheet];\n\t\tthis.shadowRoot?.append(tag(\"slot\"), tag(\"div\"));\n\t\tthis.cluster = L.markerClusterGroup({\n\t\t\tshowCoverageOnHover: false,\n\t\t\tdisableClusteringAtZoom: 1,\n\t\t});\n\t}\n\tconnectedCallback() {\n\t\tconst json = `[${attr(this, \"data-view\") || \"57.95, 4.73, 71.19, 31.44, 15\"}]`;\n\t\tconst view = JSON.parse(json);\n\n\t\tthis.map = L.map(this.shadowRoot?.lastElementChild as HTMLElement, {\n\t\t\tlayers: [L.tileLayer(KARTVERKET_GRAY, { maxZoom: 18 }), this.cluster],\n\t\t\tattributionControl: false,\n\t\t\twheelPxPerZoomLevel: 10,\n\t\t\tzoomControl: false,\n\t\t\tzoomSnap: 0,\n\t\t});\n\t\tthis.map.addControl(L.control.zoom({ position: \"bottomright\" }));\n\n\t\t// If no view is set, use Norway as default bounding box\n\t\tif (view.length === 3) this.map.setView([view[0], view[1]], view[2]);\n\t\tif (view.length >= 4) {\n\t\t\tconst nw = [view[0], view[1]] as L.LatLngTuple;\n\t\t\tconst se = [view[2], view[3]] as L.LatLngTuple;\n\t\t\tconst padding = [view[4] ?? 0, view[5] ?? view[4] ?? 0] as L.PointTuple;\n\t\t\tthis.map.fitBounds([nw, se], { padding });\n\t\t}\n\t}\n\taddMarker(latlng: L.LatLngExpression, options: L.MarkerOptions) {\n\t\treturn L.marker(latlng, options).addTo(this.cluster);\n\t}\n\tdisconnectedCallback() {\n\t\tthis.map?.remove();\n\t}\n}\n\nif (IS_BROWSER && !window.customElements.get(\"mtds-map\"))\n\twindow.customElements.define(\"mtds-map\", MTDSMapElement);\n\nexport 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\nexport 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":["L","KARTVERKET_GRAY","MTDSMapElement","MTDSElement","sheet","LeafletCSS","LeafletClusterCSS","MapCss","tag","json","attr","view","nw","se","padding","latlng","options","IS_BROWSER","getPunktFraAdresse","adresseSoek","jsonresponse","adresse","error"],"mappings":"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"}

package/mtds/map/map.css.js

@@ -1,5 +1,5 @@
 const n = `:host {
-	aspect-ratio: 2;
+	aspect-ratio: 2; /* TODO: make possible to overwrite */
 	background: var(--mtds-color-neutral-surface-tinted);
 	border-radius: var(--mtds-border-radius-md);
 	overflow: clip;

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

@@ -1 +1 @@
-{"version":3,"file":"map.css.js","sources":["../../designsystem/map/map.css?raw"],"sourcesContent":["export default \":host {\\n\\taspect-ratio: 2;\\n\\tbackground: var(--ds-color-neutral-surface-tinted);\\n\\tborder-radius: var(--ds-border-radius-md);\\n\\toverflow: clip;\\n\\tposition: relative;\\n\\tuser-select: none;\\n}\\n:host(:not([hidden])) {\\n\\tdisplay: grid;\\n}\\nslot {\\n\\tdisplay: grid;\\n\\tinset: var(--mtds-3);\\n\\tpointer-events: none;\\n\\tposition: absolute;\\n\\tz-index: 2;\\n}\\n::slotted(*) {\\n\\tpointer-events: all;\\n}\\n.leaflet-div-icon {\\n\\tbackground: none;\\n\\tborder: 0;\\n}\\n.leaflet-container {\\n\\tbackground: var(--ds-color-neutral-surface-tinted);\\n}\\n.leaflet-container {\\n\\toutline: 0;\\n}\\n.leaflet-tile-container {\\n\\tfilter: contrast(0.75) brightness(1.15);\\n}\\n\\n.map-pin rect {\\n\\tfill: var(--ds-color-surface-default);\\n}\\n.map-pin path {\\n\\tfill: var(--ds-color-text-default);\\n}\\n\""],"names":["MapCss"],"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;"}
+{"version":3,"file":"map.css.js","sources":["../../designsystem/map/map.css?raw"],"sourcesContent":["export default \":host {\\n\\taspect-ratio: 2; /* TODO: make possible to overwrite */\\n\\tbackground: var(--ds-color-neutral-surface-tinted);\\n\\tborder-radius: var(--ds-border-radius-md);\\n\\toverflow: clip;\\n\\tposition: relative;\\n\\tuser-select: none;\\n}\\n:host(:not([hidden])) {\\n\\tdisplay: grid;\\n}\\nslot {\\n\\tdisplay: grid;\\n\\tinset: var(--mtds-3);\\n\\tpointer-events: none;\\n\\tposition: absolute;\\n\\tz-index: 2;\\n}\\n::slotted(*) {\\n\\tpointer-events: all;\\n}\\n.leaflet-div-icon {\\n\\tbackground: none;\\n\\tborder: 0;\\n}\\n.leaflet-container {\\n\\tbackground: var(--ds-color-neutral-surface-tinted);\\n}\\n.leaflet-container {\\n\\toutline: 0;\\n}\\n.leaflet-tile-container {\\n\\tfilter: contrast(0.75) brightness(1.15);\\n}\\n\\n.map-pin rect {\\n\\tfill: var(--ds-color-surface-default);\\n}\\n.map-pin path {\\n\\tfill: var(--ds-color-text-default);\\n}\\n\""],"names":["MapCss"],"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;"}