@mattilsynet/design 2.2.6 → 2.2.8

package/mtds/index.js

@@ -1,5 +1,5 @@
-import { UHTMLComboboxElement as M } from "./external/@u-elements/u-combobox/dist/u-combobox.js";
-import { UHTMLTabElement as d, UHTMLTabListElement as g, UHTMLTabPanelElement as y, UHTMLTabsElement as c } from "./external/@u-elements/u-tabs/dist/u-tabs.js";
+import { UHTMLComboboxElement as M } from "@u-elements/u-combobox";
+import { UHTMLTabElement as d, UHTMLTabListElement as g, UHTMLTabPanelElement as y, UHTMLTabsElement as c } from "@u-elements/u-tabs";
 import { version as v } from "./package.json.js";
 import { analytics as C } from "./analytics/analytics.js";
 import { toggleAppExpanded as _ } from "./app/app-observer.js";
@@ -18,9 +18,9 @@ import "./table/table-observer.js";
 import "./toast/toast-observer.js";
 import "./togglegroup/togglegroup-observer.js";
 import "./tooltip/tooltip-observer.js";
-import "./external/@u-elements/u-datalist/dist/u-datalist.js";
-import "./external/@u-elements/u-details/dist/u-details.js";
-import "./external/@u-elements/u-progress/dist/u-progress.js";
+import "@u-elements/u-datalist";
+import "@u-elements/u-details";
+import "@u-elements/u-progress";
 export {
   M as UHTMLComboboxElement,
   d as UHTMLTabElement,

package/mtds/input/input.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { clsx as o } from "../external/clsx/dist/clsx.js";
+import o from "clsx";
 import { forwardRef as s } from "react";
 import a from "../styles.module.css.js";
 const l = s(function({ className: t, type: e = "text", ...r }, c) {

package/mtds/layout/layout.js

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import { clsx as e } from "../external/clsx/dist/clsx.js";
+import e from "clsx";
 import { forwardRef as m } from "react";
 import n from "../styles.module.css.js";
 const g = m(function({ as: r, className: o, ...t }, s) {

package/mtds/link/link.js

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import { clsx as n } from "../external/clsx/dist/clsx.js";
+import n from "clsx";
 import { forwardRef as s } from "react";
 import f from "../styles.module.css.js";
 const x = s(function({ as: o, className: r, ...t }, m) {

package/mtds/logo/logo.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { clsx as a } from "../external/clsx/dist/clsx.js";
+import a from "clsx";
 import { forwardRef as n } from "react";
 import p from "../styles.module.css.js";
 const x = n(function({ as: r, className: m, ...o }, t) {

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

@@ -0,0 +1,47 @@
+import { MTDSElement } from '../utils';
+import * as L from "leaflet";
+import type * as ReactTypes from "react";
+type JSXMapAttrs = ReactTypes.HTMLAttributes<MTDSMapElement>;
+type JSXMapProps = ReactTypes.DetailedHTMLProps<JSXMapAttrs, MTDSMapElement>;
+declare global {
+    namespace React.JSX {
+        interface IntrinsicElements {
+            "mtds-map": JSXMapProps & {
+                class?: string;
+            };
+        }
+    }
+}
+export { L };
+export declare class MTDSMapElement extends MTDSElement {
+    map?: L.Map;
+    markers: L.MarkerClusterGroup;
+    constructor();
+    connectedCallback(): void;
+    addMarker(point: L.LatLngExpression): L.Marker<any>;
+    disconnectedCallback(): void;
+}
+export type Adresse = {
+    adressekode: number;
+    adressetekst: string;
+    bokstav: string;
+    bruksenhetsnummer: string[];
+    bruksnummer: number;
+    festenummer: number;
+    gardsnummer: number;
+    kommunenavn: string;
+    kommunenummer: string;
+    nummer: number;
+    objtype: string;
+    oppdateringsdato: string;
+    postnummer: string;
+    poststed: string;
+    representasjonspunkt: {
+        epsg: string;
+        lat: number;
+        lon: number;
+    };
+    stedfestingverifisert: boolean;
+    undernummer: string | null;
+};
+export declare function getPunktFraAdresse(adresseSoek: string): Promise<Adresse[]>;

package/mtds/map/map-element.js

@@ -0,0 +1,74 @@
+import * as o from "leaflet";
+import m from "leaflet/dist/leaflet.css?raw";
+import a from "leaflet.markercluster/dist/MarkerCluster.css?raw";
+import "leaflet.markercluster";
+import { IS_BROWSER as p, MTDSElement as i, tag as s } from "../utils.js";
+import u from "./map.css.js";
+o.Marker.prototype.options.icon = o.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 i {
+  map;
+  markers;
+  constructor() {
+    super();
+    const t = new CSSStyleSheet();
+    t.replaceSync(`${m}
+${a}
+${u}`), this.attachShadow({ mode: "open" }).adoptedStyleSheets = [t], this.shadowRoot?.append(s("slot"), s("div")), this.markers = o.markerClusterGroup();
+  }
+  connectedCallback() {
+    this.map = o.map(this.shadowRoot?.lastElementChild, {
+      attributionControl: !1,
+      center: [63.43067801397488, 10.402166438219403],
+      zoom: 13,
+      layers: [o.tileLayer(l, { maxZoom: 18 }), this.markers]
+    });
+  }
+  addMarker(t) {
+    return o.marker(t).addTo(this.markers);
+  }
+  disconnectedCallback() {
+    this.map?.remove();
+  }
+}
+p && !window.customElements.get("mtds-map") && window.customElements.define("mtds-map", c);
+async function S(r) {
+  try {
+    const n = await (await fetch(
+      `https://ws.geonorge.no/adresser/v1/sok?sok=${r}&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,
+      representasjonspunkt: {
+        epsg: e.representasjonspunkt.epsg,
+        lat: e.representasjonspunkt.lat,
+        lon: e.representasjonspunkt.lon
+      }
+    })) : [];
+  } catch (t) {
+    return console.log(`Feilet i å hente adresse fra punkt: ${t}`), [];
+  }
+}
+export {
+  o as L,
+  c as MTDSMapElement,
+  S as getPunktFraAdresse
+};
+//# sourceMappingURL=map-element.js.map

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

@@ -0,0 +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\tmarkers: 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.markers = L.markerClusterGroup();\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.markers],\n\t\t});\n\t}\n\taddMarker(point: L.LatLngExpression) {\n\t\treturn L.marker(point).addTo(this.markers);\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,mBAAA;AAAA,EAClB;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;"}

package/mtds/map/map.css.js

@@ -0,0 +1,46 @@
+const n = `:host {
+	aspect-ratio: 2;
+	background: var(--mtds-color-neutral-surface-tinted);
+	border-radius: var(--mtds-border-radius-md);
+	overflow: clip;
+	position: relative;
+	user-select: none;
+}
+:host(:not([hidden])) {
+	display: grid;
+}
+slot {
+	display: grid;
+	inset: var(--mtds-3);
+	pointer-events: none;
+	position: absolute;
+	z-index: 2;
+}
+::slotted(*) {
+	pointer-events: all;
+}
+.leaflet-div-icon {
+	background: none;
+	border: 0;
+}
+.leaflet-container {
+	background: var(--mtds-color-neutral-surface-tinted);
+}
+.leaflet-container {
+	outline: 0;
+}
+.leaflet-tile-container {
+	filter: contrast(0.75) brightness(1.15);
+}
+
+.map-pin rect {
+	fill: var(--mtds-color-surface-default);
+}
+.map-pin path {
+	fill: var(--mtds-color-text-default);
+}
+`;
+export {
+  n as default
+};
+//# sourceMappingURL=map.css.js.map

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

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

package/mtds/map.d.ts

@@ -0,0 +1 @@
+export * from './map/map-element';