@mattilsynet/design 2.2.24 → 2.2.25

package/mtds/app/app-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-toggle.js","sources":["../../designsystem/app/app-toggle.js?raw"],"sourcesContent":["export default \"if (\\n\\ttypeof window !== \\\"undefined\\\" &&\\n\\twindow.CSSStyleSheet &&\\n\\tdocument.adoptedStyleSheets\\n)\\n\\t(() => {\\n\\t\\tconst key = \\\"--mtds-app-expanded\\\";\\n\\t\\tconst sheet = new CSSStyleSheet();\\n\\t\\tconst prev = () => !window.localStorage.getItem(key)?.includes(\\\"false\\\");\\n\\n\\t\\tdocument.adoptedStyleSheets.push(sheet);\\n\\t\\twindow.mtdsToggleAppExpanded = (force) => {\\n\\t\\t\\ttry {\\n\\t\\t\\t\\tconst next = force ?? !prev();\\n\\t\\t\\t\\tsheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\\n\\t\\t\\t\\twindow.localStorage.setItem(key, next);\\n\\t\\t\\t} catch (_err) {} // localStorage is full or replaceSync is not supported\\n\\t\\t};\\n\\n\\t\\t// Set and store initial state\\n\\t\\twindow.mtdsToggleAppExpanded(prev());\\n\\t})();\\n\""],"names":["script"],"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;"}
+{"version":3,"file":"app-toggle.js","sources":["../../designsystem/app/app-toggle.js?raw"],"sourcesContent":["export default \"if (\\n\\ttypeof window !== \\\"undefined\\\" &&\\n\\twindow.CSSStyleSheet &&\\n\\tdocument.adoptedStyleSheets\\n)\\n\\t(() => {\\n\\t\\tconst key = \\\"--mtds-app-expanded\\\";\\n\\t\\tconst sheet = new CSSStyleSheet();\\n\\t\\tconst prev = () => !window.localStorage.getItem(key)?.includes(\\\"false\\\");\\n\\n\\t\\tdocument.adoptedStyleSheets.push(sheet);\\n\\t\\twindow.mtdsToggleAppExpanded = (force) => {\\n\\t\\t\\ttry {\\n\\t\\t\\t\\tconst next = force ?? !prev();\\n\\t\\t\\t\\tsheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\\n\\t\\t\\t\\twindow.localStorage.setItem(key, next);\\n\\t\\t\\t} catch (_err) {} // localStorage is full or replaceSync is not supported\\n\\t\\t};\\n\\n\\t\\t// Set and store initial state\\n\\t\\twindow.mtdsToggleAppExpanded(prev());\\n\\t})();\\n\""],"names":[],"mappings":"AAAA,MAAA,SAAe;"}

package/mtds/app/app-toggle2.js

@@ -1,11 +1,17 @@
-typeof window < "u" && window.CSSStyleSheet && document.adoptedStyleSheets && (() => {
-  const e = "--mtds-app-expanded", d = new CSSStyleSheet(), o = () => !window.localStorage.getItem(e)?.includes("false");
-  document.adoptedStyleSheets.push(d), window.mtdsToggleAppExpanded = (n) => {
-    try {
-      const t = n ?? !o();
-      d.replaceSync?.(`:root { ${e}: var(${e}--${t})}`), window.localStorage.setItem(e, t);
-    } catch {
-    }
-  }, window.mtdsToggleAppExpanded(o());
-})();
+if (typeof window !== "undefined" && window.CSSStyleSheet && document.adoptedStyleSheets)
+  (() => {
+    const key = "--mtds-app-expanded";
+    const sheet = new CSSStyleSheet();
+    const prev = () => !window.localStorage.getItem(key)?.includes("false");
+    document.adoptedStyleSheets.push(sheet);
+    window.mtdsToggleAppExpanded = (force) => {
+      try {
+        const next = force ?? !prev();
+        sheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);
+        window.localStorage.setItem(key, next);
+      } catch (_err) {
+      }
+    };
+    window.mtdsToggleAppExpanded(prev());
+  })();
 //# sourceMappingURL=app-toggle2.js.map

package/mtds/app/app-toggle2.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-toggle2.js","sources":["../../designsystem/app/app-toggle.js"],"sourcesContent":["if (\n\ttypeof window !== \"undefined\" &&\n\twindow.CSSStyleSheet &&\n\tdocument.adoptedStyleSheets\n)\n\t(() => {\n\t\tconst key = \"--mtds-app-expanded\";\n\t\tconst sheet = new CSSStyleSheet();\n\t\tconst prev = () => !window.localStorage.getItem(key)?.includes(\"false\");\n\n\t\tdocument.adoptedStyleSheets.push(sheet);\n\t\twindow.mtdsToggleAppExpanded = (force) => {\n\t\t\ttry {\n\t\t\t\tconst next = force ?? !prev();\n\t\t\t\tsheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\n\t\t\t\twindow.localStorage.setItem(key, next);\n\t\t\t} catch (_err) {} // localStorage is full or replaceSync is not supported\n\t\t};\n\n\t\t// Set and store initial state\n\t\twindow.mtdsToggleAppExpanded(prev());\n\t})();\n"],"names":["key","sheet","prev","force","next"],"mappings":"AACC,OAAO,SAAW,OAClB,OAAO,iBACP,SAAS,uBAER,MAAM;AACN,QAAMA,IAAM,uBACNC,IAAQ,IAAI,cAAa,GACzBC,IAAO,MAAM,CAAC,OAAO,aAAa,QAAQF,CAAG,GAAG,SAAS,OAAO;AAEtE,WAAS,mBAAmB,KAAKC,CAAK,GACtC,OAAO,wBAAwB,CAACE,MAAU;AACzC,QAAI;AACH,YAAMC,IAAOD,KAAS,CAACD,EAAI;AAC3B,MAAAD,EAAM,cAAc,WAAWD,CAAG,SAASA,CAAG,KAAKI,CAAI,IAAI,GAC3D,OAAO,aAAa,QAAQJ,GAAKI,CAAI;AAAA,IACtC,QAAe;AAAA,IAAC;AAAA,EACjB,GAGA,OAAO,sBAAsBF,GAAM;AACpC,GAAC;"}
+{"version":3,"file":"app-toggle2.js","sources":["../../designsystem/app/app-toggle.js"],"sourcesContent":["if (\n\ttypeof window !== \"undefined\" &&\n\twindow.CSSStyleSheet &&\n\tdocument.adoptedStyleSheets\n)\n\t(() => {\n\t\tconst key = \"--mtds-app-expanded\";\n\t\tconst sheet = new CSSStyleSheet();\n\t\tconst prev = () => !window.localStorage.getItem(key)?.includes(\"false\");\n\n\t\tdocument.adoptedStyleSheets.push(sheet);\n\t\twindow.mtdsToggleAppExpanded = (force) => {\n\t\t\ttry {\n\t\t\t\tconst next = force ?? !prev();\n\t\t\t\tsheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\n\t\t\t\twindow.localStorage.setItem(key, next);\n\t\t\t} catch (_err) {} // localStorage is full or replaceSync is not supported\n\t\t};\n\n\t\t// Set and store initial state\n\t\twindow.mtdsToggleAppExpanded(prev());\n\t})();\n"],"names":[],"mappings":"AAAA,IACC,OAAO,WAAW,eAClB,OAAO,iBACP,SAAS;AAET,GAAC,MAAM;AACN,UAAM,MAAM;AACZ,UAAM,QAAQ,IAAI,cAAa;AAC/B,UAAM,OAAO,MAAM,CAAC,OAAO,aAAa,QAAQ,GAAG,GAAG,SAAS,OAAO;AAEtE,aAAS,mBAAmB,KAAK,KAAK;AACtC,WAAO,wBAAwB,CAAC,UAAU;AACzC,UAAI;AACH,cAAM,OAAO,SAAS,CAAC,KAAI;AAC3B,cAAM,cAAc,WAAW,GAAG,SAAS,GAAG,KAAK,IAAI,IAAI;AAC3D,eAAO,aAAa,QAAQ,KAAK,IAAI;AAAA,MACtC,SAAS,MAAM;AAAA,MAAC;AAAA,IACjB;AAGA,WAAO,sBAAsB,MAAM;AAAA,EACpC,GAAC;"}

package/mtds/app/app.d.ts

@@ -9,12 +9,12 @@ export type AppFooterProps = React.ComponentPropsWithoutRef<"footer">;
 export type AppProps<As extends React.ElementType = "div"> = PolymorphicComponentPropWithRef<As>;
 type AppComponent = <As extends React.ElementType = "div">(props: AppProps<As>) => JSX.Element;
 export declare const App: AppComponent & {
-    Header: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
-    Sidebar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, "ref"> & React.RefAttributes<HTMLDialogElement>>;
+    Header: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    Sidebar: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, "ref"> & import('react').RefAttributes<HTMLDialogElement>>;
     Sticky: AppComponent;
-    Toggle: React.ForwardRefExoticComponent<Omit<ButtonProps<"button">, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    Main: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
-    Footer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+    Toggle: import('react').ForwardRefExoticComponent<Omit<ButtonProps<"button">, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+    Main: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    Footer: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
     Script: () => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/mtds/app/app.js

@@ -1,51 +1,55 @@
-import { jsx as o } from "react/jsx-runtime";
-import a from "clsx";
-import { forwardRef as p } from "react";
-import { Button as s } from "../button/button.js";
-import c from "../styles.module.css.js";
-import d from "./app-toggle.js";
-const f = p(function({ as: t, className: r, ...i }, e) {
-  return /* @__PURE__ */ o(t || "div", { className: a(c.app, r), ref: e, ...i });
-}), u = p(function({ as: t, className: r, ...i }, e) {
-  return /* @__PURE__ */ o(t || "div", { className: a(c.sticky, r), ref: e, ...i });
-}), k = Object.assign(f, {
-  Header: p(
-    function(t, r) {
-      return /* @__PURE__ */ o("header", { ref: r, ...t });
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { Button } from "../button/button.js";
+import styles from "../styles.module.css.js";
+import script from "./app-toggle.js";
+const AppComp = forwardRef(function App2({ as, className, ...rest }, ref) {
+  const Tag = as || "div";
+  return /* @__PURE__ */ jsx(Tag, { className: clsx(styles.app, className), ref, ...rest });
+});
+const AppSticky = forwardRef(function App3({ as, className, ...rest }, ref) {
+  const Tag = as || "div";
+  return /* @__PURE__ */ jsx(Tag, { className: clsx(styles.sticky, className), ref, ...rest });
+});
+const App = Object.assign(AppComp, {
+  Header: forwardRef(
+    function AppHeader(rest, ref) {
+      return /* @__PURE__ */ jsx("header", { ref, ...rest });
     }
   ),
-  Sidebar: p(
-    function(t, r) {
-      return /* @__PURE__ */ o("dialog", { role: "navigation", ref: r, ...t });
+  Sidebar: forwardRef(
+    function AppSidebar(rest, ref) {
+      return /* @__PURE__ */ jsx("dialog", { role: "navigation", ref, ...rest });
     }
   ),
-  Sticky: u,
-  Toggle: p(
-    function({ children: t, ...r }, i) {
-      return /* @__PURE__ */ o(
-        s,
+  Sticky: AppSticky,
+  Toggle: forwardRef(
+    function AppToggle({ children, ...rest }, ref) {
+      return /* @__PURE__ */ jsx(
+        Button,
         {
           "data-command": "toggle-app-expanded",
           "data-tooltip": "Vis meny",
-          ref: i,
-          ...r,
-          children: t ?? "Skjul meny"
+          ref,
+          ...rest,
+          children: children ?? "Skjul meny"
         }
       );
     }
   ),
-  Main: p(function(t, r) {
-    return /* @__PURE__ */ o("main", { ref: r, ...t });
+  Main: forwardRef(function AppMain(rest, ref) {
+    return /* @__PURE__ */ jsx("main", { ref, ...rest });
   }),
-  Footer: p(
-    function(t, r) {
-      return /* @__PURE__ */ o("footer", { ref: r, ...t });
+  Footer: forwardRef(
+    function AppFooter(rest, ref) {
+      return /* @__PURE__ */ jsx("footer", { ref, ...rest });
     }
   ),
   // Needed to avoid flash of unstyled content and still be Next.js hydration compatible
-  Script: () => /* @__PURE__ */ o("script", { id: "mtds-app-script", children: d })
+  Script: () => /* @__PURE__ */ jsx("script", { id: "mtds-app-script", children: script })
 });
 export {
-  k as App
+  App
 };
 //# sourceMappingURL=app.js.map

package/mtds/app/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sources":["../../designsystem/app/app.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport { Button, type ButtonProps } from \"../button/button\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport script from \"./app-toggle.js?raw\";\n\nexport type AppHeaderProps = React.ComponentPropsWithoutRef<\"header\">;\nexport type AppSidebarProps = React.ComponentPropsWithoutRef<\"dialog\">;\nexport type AppStickyProps = React.ComponentPropsWithoutRef<\"div\">;\nexport type AppMainProps = React.ComponentPropsWithoutRef<\"main\">;\nexport type AppFooterProps = React.ComponentPropsWithoutRef<\"footer\">;\nexport type AppProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype AppComponent = <As extends React.ElementType = \"div\">(\n\tprops: AppProps<As>,\n) => JSX.Element;\n\nconst AppComp = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.app, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nconst AppSticky = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.sticky, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport const App = Object.assign(AppComp, {\n\tHeader: forwardRef<HTMLElement, AppHeaderProps>(\n\t\tfunction AppHeader(rest, ref) {\n\t\t\treturn <header ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSidebar: forwardRef<HTMLDialogElement, AppSidebarProps>(\n\t\tfunction AppSidebar(rest, ref) {\n\t\t\treturn <dialog role=\"navigation\" ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSticky: AppSticky,\n\tToggle: forwardRef<HTMLButtonElement, ButtonProps<\"button\">>(\n\t\tfunction AppToggle({ children, ...rest }: ButtonProps<\"button\">, ref) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\tdata-command=\"toggle-app-expanded\"\n\t\t\t\t\tdata-tooltip=\"Vis meny\"\n\t\t\t\t\tref={ref as React.Ref<HTMLAnchorElement>}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t{children ?? \"Skjul meny\"}\n\t\t\t\t</Button>\n\t\t\t);\n\t\t},\n\t),\n\tMain: forwardRef<HTMLElement, AppMainProps>(function AppMain(rest, ref) {\n\t\treturn <main ref={ref} {...rest} />;\n\t}),\n\tFooter: forwardRef<HTMLElement, AppFooterProps>(\n\t\tfunction AppFooter(rest, ref) {\n\t\t\treturn <footer ref={ref} {...rest} />;\n\t\t},\n\t),\n\t// Needed to avoid flash of unstyled content and still be Next.js hydration compatible\n\tScript: () => <script id=\"mtds-app-script\">{script}</script>,\n});\n"],"names":["AppComp","forwardRef","as","className","rest","ref","jsx","clsx","styles","AppSticky","App","children","Button","script"],"mappings":";;;;;;AAsBA,MAAMA,IAAUC,EAAiB,SAE/B,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAsBC,GAA0B;AAGrE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,KAAKL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AACzE,CAAC,GAEKK,IAAYR,EAAiB,SAEjC,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAsBC,GAA0B;AAGrE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,QAAQL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC5E,CAAC,GAEYM,IAAM,OAAO,OAAOV,GAAS;AAAA,EACzC,QAAQC;AAAA,IACP,SAAmBG,GAAMC,GAAK;AAC7B,aAAO,gBAAAC,EAAC,UAAA,EAAO,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,IACpC;AAAA,EAAA;AAAA,EAED,SAASH;AAAA,IACR,SAAoBG,GAAMC,GAAK;AAC9B,+BAAQ,UAAA,EAAO,MAAK,cAAa,KAAAA,GAAW,GAAGD,GAAM;AAAA,IACtD;AAAA,EAAA;AAAA,EAED,QAAQK;AAAA,EACR,QAAQR;AAAA,IACP,SAAmB,EAAE,UAAAU,GAAU,GAAGP,EAAA,GAA+BC,GAAK;AACrE,aACC,gBAAAC;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,gBAAa;AAAA,UACb,gBAAa;AAAA,UACb,KAAAP;AAAA,UACC,GAAGD;AAAA,UAEH,UAAAO,KAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAGhB;AAAA,EAAA;AAAA,EAED,MAAMV,EAAsC,SAAiBG,GAAMC,GAAK;AACvE,WAAO,gBAAAC,EAAC,QAAA,EAAK,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,EAClC,CAAC;AAAA,EACD,QAAQH;AAAA,IACP,SAAmBG,GAAMC,GAAK;AAC7B,aAAO,gBAAAC,EAAC,UAAA,EAAO,KAAAD,GAAW,GAAGD,EAAA,CAAM;AAAA,IACpC;AAAA,EAAA;AAAA;AAAA,EAGD,QAAQ,MAAM,gBAAAE,EAAC,UAAA,EAAO,IAAG,mBAAmB,UAAAO,EAAA,CAAO;AACpD,CAAC;"}
+{"version":3,"file":"app.js","sources":["../../designsystem/app/app.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport { Button, type ButtonProps } from \"../button/button\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport script from \"./app-toggle.js?raw\";\n\nexport type AppHeaderProps = React.ComponentPropsWithoutRef<\"header\">;\nexport type AppSidebarProps = React.ComponentPropsWithoutRef<\"dialog\">;\nexport type AppStickyProps = React.ComponentPropsWithoutRef<\"div\">;\nexport type AppMainProps = React.ComponentPropsWithoutRef<\"main\">;\nexport type AppFooterProps = React.ComponentPropsWithoutRef<\"footer\">;\nexport type AppProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype AppComponent = <As extends React.ElementType = \"div\">(\n\tprops: AppProps<As>,\n) => JSX.Element;\n\nconst AppComp = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.app, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nconst AppSticky = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.sticky, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport const App = Object.assign(AppComp, {\n\tHeader: forwardRef<HTMLElement, AppHeaderProps>(\n\t\tfunction AppHeader(rest, ref) {\n\t\t\treturn <header ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSidebar: forwardRef<HTMLDialogElement, AppSidebarProps>(\n\t\tfunction AppSidebar(rest, ref) {\n\t\t\treturn <dialog role=\"navigation\" ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSticky: AppSticky,\n\tToggle: forwardRef<HTMLButtonElement, ButtonProps<\"button\">>(\n\t\tfunction AppToggle({ children, ...rest }: ButtonProps<\"button\">, ref) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\tdata-command=\"toggle-app-expanded\"\n\t\t\t\t\tdata-tooltip=\"Vis meny\"\n\t\t\t\t\tref={ref as React.Ref<HTMLAnchorElement>}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t{children ?? \"Skjul meny\"}\n\t\t\t\t</Button>\n\t\t\t);\n\t\t},\n\t),\n\tMain: forwardRef<HTMLElement, AppMainProps>(function AppMain(rest, ref) {\n\t\treturn <main ref={ref} {...rest} />;\n\t}),\n\tFooter: forwardRef<HTMLElement, AppFooterProps>(\n\t\tfunction AppFooter(rest, ref) {\n\t\t\treturn <footer ref={ref} {...rest} />;\n\t\t},\n\t),\n\t// Needed to avoid flash of unstyled content and still be Next.js hydration compatible\n\tScript: () => <script id=\"mtds-app-script\">{script}</script>,\n});\n"],"names":["App"],"mappings":";;;;;;AAsBA,MAAM,UAAU,WAAiB,SAASA,KAExC,EAAE,IAAI,WAAW,GAAG,KAAA,GAAsB,KAA0B;AACrE,QAAM,MAAM,MAAM;AAElB,SAAO,oBAAC,KAAA,EAAI,WAAW,KAAK,OAAO,KAAK,SAAS,GAAG,KAAW,GAAG,KAAA,CAAM;AACzE,CAAC;AAED,MAAM,YAAY,WAAiB,SAASA,KAE1C,EAAE,IAAI,WAAW,GAAG,KAAA,GAAsB,KAA0B;AACrE,QAAM,MAAM,MAAM;AAElB,SAAO,oBAAC,KAAA,EAAI,WAAW,KAAK,OAAO,QAAQ,SAAS,GAAG,KAAW,GAAG,KAAA,CAAM;AAC5E,CAAC;AAEM,MAAM,MAAM,OAAO,OAAO,SAAS;AAAA,EACzC,QAAQ;AAAA,IACP,SAAS,UAAU,MAAM,KAAK;AAC7B,aAAO,oBAAC,UAAA,EAAO,KAAW,GAAG,KAAA,CAAM;AAAA,IACpC;AAAA,EAAA;AAAA,EAED,SAAS;AAAA,IACR,SAAS,WAAW,MAAM,KAAK;AAC9B,iCAAQ,UAAA,EAAO,MAAK,cAAa,KAAW,GAAG,MAAM;AAAA,IACtD;AAAA,EAAA;AAAA,EAED,QAAQ;AAAA,EACR,QAAQ;AAAA,IACP,SAAS,UAAU,EAAE,UAAU,GAAG,KAAA,GAA+B,KAAK;AACrE,aACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,gBAAa;AAAA,UACb,gBAAa;AAAA,UACb;AAAA,UACC,GAAG;AAAA,UAEH,UAAA,YAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAGhB;AAAA,EAAA;AAAA,EAED,MAAM,WAAsC,SAAS,QAAQ,MAAM,KAAK;AACvE,WAAO,oBAAC,QAAA,EAAK,KAAW,GAAG,KAAA,CAAM;AAAA,EAClC,CAAC;AAAA,EACD,QAAQ;AAAA,IACP,SAAS,UAAU,MAAM,KAAK;AAC7B,aAAO,oBAAC,UAAA,EAAO,KAAW,GAAG,KAAA,CAAM;AAAA,IACpC;AAAA,EAAA;AAAA;AAAA,EAGD,QAAQ,MAAM,oBAAC,UAAA,EAAO,IAAG,mBAAmB,UAAA,OAAA,CAAO;AACpD,CAAC;"}

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

@@ -1,28 +1,22 @@
 import { default as L } from 'leaflet';
 import { MTDSElement } from '../utils';
-import type * as ReactTypes from "react";
 export { L };
+export { MTDSAtlasMarkerElement } from './atlas-marker';
+export { MTDSAtlasMatgeoElement } from './atlas-matgeo';
 declare global {
-    namespace React.JSX {
-        interface IntrinsicElements {
-            "mtds-atlas": ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<MTDSAtlasElement>, MTDSAtlasElement> & {
-                class?: string;
-                "data-cluster"?: number | `${number}` | boolean | "true" | "false";
-                "data-scrollzoom"?: boolean | "true" | "false";
-                "data-tiles"?: "color" | "gray";
-                "data-view"?: string | number[];
-            };
-        }
+    interface HTMLElementTagNameMap {
+        "mtds-atlas": MTDSAtlasElement;
     }
 }
 export declare class MTDSAtlasElement extends MTDSElement {
+    #private;
     cluster?: L.MarkerClusterGroup;
     map?: L.Map;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
-    attributeChangedCallback(name: string, _prev?: string | null, next?: string | null): void;
-    setView(view: string | number[], options?: L.ZoomPanOptions): void;
-    addMarker(latlng: L.LatLngExpression, options?: L.MarkerOptions): L.Marker<any>;
+    attributeChangedCallback(name: string, _prev?: null, next?: string | null): void;
+    setView(view: string | number[], opts?: L.FitBoundsOptions): L.Map | undefined;
+    latLngFromPoint(x: number, y: number): any;
     disconnectedCallback(): void;
 }

package/mtds/atlas/atlas-element.js

@@ -1,102 +1,116 @@
-import s from "../external/leaflet/dist/leaflet-src.js";
-import k from "../external/leaflet/dist/leaflet.css.js";
-import A from "./atlas.css.js";
+import L from "../external/leaflet/dist/leaflet-src.js";
+import LeafletCSS from "../external/leaflet/dist/leaflet.css.js";
 import "./cluster.js";
-import { IS_BROWSER as E, attr as i, MTDSElement as M, tag as d, debounce as S, onResize as z, on as x } from "../utils.js";
-const c = [30, 30], m = 18, O = [
+import { defineElement, MTDSElement, tag, attr, on, off } from "../utils.js";
+import css from "./atlas.css.js";
+import { MTDSAtlasMarkerElement } from "./atlas-marker.js";
+import { MTDSAtlasMatgeoElement } from "./atlas-matgeo.js";
+let SKIP_CLICK = 0;
+const KARTVERKET_MAX_ZOOM = 18;
+const KARTVERKET_TILES_URL = "https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png";
+const BOUNDS_NORWAY = [
   [57.5, 4.73],
   [71.5, 31.44]
-], L = "https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png";
-class p extends M {
+];
+class MTDSAtlasElement extends MTDSElement {
   cluster;
   map;
   static get observedAttributes() {
     return ["data-view", "data-scrollzoom"];
   }
   constructor() {
-    super(), this.attachShadow({ mode: "open" }).append(
-      d("style", {}, `@layer leaflet{${k}}
-${A}`),
-      d("slot"),
-      d("div")
+    super();
+    this.attachShadow({ mode: "open" }).append(
+      tag(
+        "style",
+        {},
+        `@layer leaflet{${LeafletCSS}}
+@layer mt.v2-2-25design{${css}`
+      ),
+      tag("figure")
     );
   }
   connectedCallback() {
-    const e = this.shadowRoot?.lastElementChild, o = i(this, "data-cluster") ?? "false", t = new s.TileLayer(L, {
+    const container = this.shadowRoot?.lastElementChild;
+    const cluster = attr(this, "data-cluster") ?? "false";
+    const tiles = new L.TileLayer(KARTVERKET_TILES_URL, {
       attribution: "© Kartverket",
-      maxZoom: m
+      maxZoom: KARTVERKET_MAX_ZOOM
     });
-    this.map = new s.Map(e, {
-      attributionControl: !1,
-      wheelPxPerZoomLevel: 20,
-      zoomControl: !1,
-      zoomSnap: 0,
-      layers: [t]
-    }), this.cluster = new s.MarkerClusterGroup({
-      zoomToBoundsOnClick: !0,
-      showCoverageOnHover: !1,
-      disableClusteringAtZoom: o === "false" ? 1 : Number(o) || m,
-      iconCreateFunction: (n) => new s.DivIcon({
+    this.map = new L.Map(container, {
+      attributionControl: false,
+      fadeAnimation: false,
+      // Prevent popup fades
+      layers: [tiles],
+      zoomControl: false,
+      zoomSnap: 0.2
+    });
+    on(this, "pointerup,click", this.#skipClick);
+    this.map.addControl(new L.Control.Attribution({ prefix: "" }));
+    this.map.addControl(new L.Control.Zoom({ position: "bottomright" }));
+    this.map.on("popupopen popupclose", this.#handlePopup, this);
+    this.cluster = new L.MarkerClusterGroup({
+      zoomToBoundsOnClick: true,
+      showCoverageOnHover: false,
+      disableClusteringAtZoom: cluster === "false" ? 1 : Number(cluster) || KARTVERKET_MAX_ZOOM + 1,
+      iconCreateFunction: (cluster2) => new L.DivIcon({
+        html: `${cluster2.getChildCount()}`,
         className: "leaflet-cluster-icon",
-        html: `${n.getAllChildMarkers().length}`,
-        iconSize: c
+        iconSize: [30, 30]
       })
-    }).addTo(this.map), this.map.addControl(new s.Control.Attribution({ prefix: "" })), this.map.addControl(new s.Control.Zoom({ position: "bottomright" })), this.map.on("popupopen", f), p.observedAttributes.forEach((n) => {
-      this.attributeChangedCallback(n, null, i(this, n));
-    });
+    }).addTo(this.map);
+    for (const name of MTDSAtlasElement.observedAttributes)
+      this.attributeChangedCallback(name, null, attr(this, name));
   }
-  attributeChangedCallback(e, o = null, t = null) {
-    this.map && (e === "data-view" && this.setView(t || ""), e === "data-scrollzoom" && this.map.scrollWheelZoom[t === "false" ? "disable" : "enable"]());
+  attributeChangedCallback(name, _prev, next) {
+    if (name === "data-view") this.setView(next || "");
+    if (name === "data-scrollzoom")
+      this.map?.scrollWheelZoom[next === "false" ? "disable" : "enable"]();
   }
-  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(O, o) : n?.isValid() ? this.map?.fitBounds(n, o || { padding: c }) : this.cluster?.on("layeradd", g, this);
+  setView(view, opts) {
+    const p = `${view}`.split(",").map(parseFloat).filter(Number.isFinite);
+    const b = this.cluster?.getBounds();
+    if (p.length === 3) return this.map?.setView([p[0], p[1]], p[2], opts);
+    if (view !== "fit") return this.map?.fitBounds(BOUNDS_NORWAY, opts);
+    if (b?.isValid()) return this.map?.fitBounds(b.pad(0.1), opts);
+    this.cluster?.once("layeradd", () => {
+      setTimeout(() => this.setView("fit"), 50);
+    });
   }
-  addMarker(e, o) {
-    return new s.Marker(e, o).addTo(
-      this.cluster
-    );
+  latLngFromPoint(x, y) {
+    return this.map?.pointerEventToLatLng({ clientX: x, clientY: y });
   }
   disconnectedCallback() {
-    this.map?.off("popupopen", f), this.map?.remove();
+    off(this, "pointerup,click", this.#skipClick);
+    this.map?.remove();
+    this.map = this.cluster = void 0;
   }
-}
-if (E && !window.customElements.get("mtds-atlas")) {
-  const l = s.Marker.prototype.onAdd;
-  s.Marker.prototype.onAdd = function(...e) {
-    l.apply(this, e);
-    const o = this.getElement();
-    return o && i(o, "aria-label", this.options.title || null), o && i(o, "title", null), this;
-  }, s.Tooltip.prototype.options.direction = "top", s.Marker.prototype.options.icon = new s.DivIcon({
-    html: '<svg viewBox="0 0 256 256"><rect x="78" y="50" width="100" height="100" /><path 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: c,
-    iconAnchor: [15, 30],
-    popupAnchor: [0, -15],
-    tooltipAnchor: [0, -30]
-  }), window.customElements.define("mtds-atlas", p);
-}
-const g = S(function() {
-  this.cluster?.off("layeradd", g, this), this.cluster?.getBounds().isValid() && this.setView("fit");
-}, 100), u = "popupclose move resize zoom viewreset", f = ({ 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(), w = i(t, "popover");
-    i(e.getElement(), "hidden", ""), i(t, "popover", null);
-    const a = (r) => {
-      if (r?.type === "popupclose" && r?.popup === e)
-        l.off(u, a), i(e.getElement(), "hidden", null), i(t, "data-popover", null), i(t, "popover", w), v(), C();
-      else {
-        const h = l.latLngToContainerPoint(n), b = h.x - t.offsetWidth / 2, y = h.y - t.offsetHeight - c[1];
-        t.style.translate = `${b}px ${y}px`;
-      }
-    }, v = z(() => a(), t), C = x(t, "click", (r) => {
-      r.target?.closest?.('[popovertargetaction="hide"]') && e.close();
-    });
-    l.on(u, a), a();
+  #handlePopup({ type, popup }) {
+    const open = type === "popupopen";
+    const cont = popup.getElement()?.querySelector(".leaflet-popup-content");
+    const slot = cont?.querySelector(":scope > slot");
+    const id = cont?.textContent?.match(/^#(\S+)/)?.[1] || "";
+    const el = document.getElementById(slot?.name || id);
+    if (!el) return open && id && popup.close();
+    L.Util.setOptions(popup, { maxWidth: 9999 });
+    attr(el, "data-popover", open ? attr(el, "popover") : null);
+    attr(el, "popover", open ? null : attr(el, "data-popover"));
+    attr(el, "slot", open ? el.id : null);
+    if (open) popup.setContent(tag("slot", { name: el.id }));
   }
-};
+  #skipClick(event) {
+    if (event.type === "click") SKIP_CLICK && event.stopPropagation?.();
+    else if (document.body.classList.contains("leaflet-dragging"))
+      SKIP_CLICK = setTimeout(() => {
+        SKIP_CLICK = 0;
+      }, 50);
+  }
+}
+defineElement("mtds-atlas", MTDSAtlasElement);
 export {
-  s as L,
-  p as MTDSAtlasElement
+  L,
+  MTDSAtlasElement,
+  MTDSAtlasMarkerElement,
+  MTDSAtlasMatgeoElement
 };
 //# sourceMappingURL=atlas-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"atlas-element.js","sources":["../../designsystem/atlas/atlas-element.ts"],"sourcesContent":["import L from \"leaflet\";\nimport LeafletCSS from \"leaflet/dist/leaflet.css?raw\";\nimport type {} from \"leaflet.markercluster\";\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\ton,\n\tonResize,\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-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}\n\t}\n}\n\nconst ICON_SIZE = [30, 30] as L.PointTuple;\nconst MAX_ZOOM = 18; // Kartverket does not support more than zoom level 18\nconst 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\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\", {}, `@layer leaflet{${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 = attr(this, \"data-cluster\") ?? \"false\";\n\t\tconst tiles = new L.TileLayer(TILES_COLOR, {\n\t\t\tattribution: \"&copy; Kartverket\",\n\t\t\tmaxZoom: MAX_ZOOM,\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\tzoomToBoundsOnClick: true,\n\t\t\tshowCoverageOnHover: false,\n\t\t\tdisableClusteringAtZoom:\n\t\t\t\tcluster === \"false\" ? 1 : Number(cluster) || MAX_ZOOM,\n\t\t\ticonCreateFunction: (cluster) =>\n\t\t\t\tnew L.DivIcon({\n\t\t\t\t\tclassName: \"leaflet-cluster-icon\",\n\t\t\t\t\thtml: `${cluster.getAllChildMarkers().length}`,\n\t\t\t\t\ticonSize: ICON_SIZE,\n\t\t\t\t}),\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(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: ICON_SIZE });\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?.off(\"popupopen\", handlePopupById);\n\t\tthis.map?.remove();\n\t}\n}\n\nif (IS_BROWSER && !window.customElements.get(\"mtds-atlas\")) {\n\t// Fix accessibility\n\tconst onAddOriginal = L.Marker.prototype.onAdd;\n\tL.Marker.prototype.onAdd = function (...args) {\n\t\tonAddOriginal.apply(this, args);\n\t\tconst el = this.getElement();\n\t\tif (el) attr(el, \"aria-label\", this.options.title || null);\n\t\tif (el) attr(el, \"title\", null);\n\t\treturn this;\n\t};\n\n\t// Set defaults\n\tL.Tooltip.prototype.options.direction = \"top\";\n\tL.Marker.prototype.options.icon = new L.DivIcon({\n\t\thtml: '<svg viewBox=\"0 0 256 256\"><rect x=\"78\" y=\"50\" width=\"100\" height=\"100\" /><path 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: ICON_SIZE,\n\t\ticonAnchor: [15, 30],\n\t\tpopupAnchor: [0, -15],\n\t\ttooltipAnchor: [0, -30],\n\t});\n\n\t// Define custom element\n\twindow.customElements.define(\"mtds-atlas\", MTDSAtlasElement);\n}\n\n// TODO: Style markers\n// TODO: Synlig label til marker\n// TODO: Add minimum zoom level for adding markers (minimum 17 som standard?)\n// TODO: data-layers: https://matgeoservice-256616427209.europe-north1.run.app/ogc/features/collections\n\nconst fitWhenMarkers = debounce(function (this: MTDSAtlasElement) {\n\tthis.cluster?.off(\"layeradd\", fitWhenMarkers, this);\n\tif (this.cluster?.getBounds().isValid()) this.setView(\"fit\");\n}, 100);\n\nconst HANDLE_POPUP_EVENTS = \"popupclose move resize zoom 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, \"popover\", null); // Disable Popover API to show and ensure overflow: clip on mtds-atlas works\n\n\t\tconst update = (event?: L.LeafletEvent) => {\n\t\t\tif (event?.type === \"popupclose\" && event?.popup === popup) {\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\tunresize();\n\t\t\t\tunclick();\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;\n\t\t\t\tconst y = point.y - popover.offsetHeight - ICON_SIZE[1];\n\t\t\t\tpopover.style.translate = `${x}px ${y}px`;\n\t\t\t}\n\t\t};\n\n\t\tconst unresize = onResize(() => update(), popover);\n\t\tconst unclick = on(popover, \"click\", (e: Event) => {\n\t\t\tif ((e.target as Element)?.closest?.('[popovertargetaction=\"hide\"]'))\n\t\t\t\tpopup.close(); // Listen for close actions inside popover since we are not using actual Popover API\n\t\t});\n\n\t\tmap.on(HANDLE_POPUP_EVENTS, update);\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// type GeoNorgeAdresser = {\n// \tmetadata: {\n// \t\tside: number;\n// \t\tviserFra: number;\n// \t\ttotaltAntallTreff: number;\n// \t\tasciiKompatibel: boolean;\n// \t\ttreffPerSide: number;\n// \t\tviserTil: number;\n// \t\tsokeStreng: string;\n// \t};\n// \tadresser: {\n// \t\tadressenavn: string;\n// \t\tadressetekst: string;\n// \t\tadressetilleggsnavn: string | null;\n// \t\tadressekode: number;\n// \t\tnummer: number;\n// \t\tbokstav: string;\n// \t\tkommunenummer: string;\n// \t\tkommunenavn: string;\n// \t\tgardsnummer: number;\n// \t\tbruksnummer: number;\n// \t\tfestenummer: number;\n// \t\tundernummer: string | null;\n// \t\tbruksenhetsnummer: (string | null)[];\n// \t\tobjtype: string;\n// \t\tpoststed: string;\n// \t\tpostnummer: string;\n// \t\tadressetekstutenadressetilleggsnavn: string;\n// \t\tstedfestingverifisert: boolean;\n// \t\toppdateringsdato: string;\n// \t\trepresentasjonspunkt: {\n// \t\t\tepsg: string;\n// \t\t\tlat: number;\n// \t\t\tlon: number;\n// \t\t};\n// \t}[];\n// };\n\n// // Hent punkt for adresse fra GeoNorge\n// const toUrlQuery = (obj: Record<string, unknown>) =>\n// \tnew URLSearchParams(\n// \t\tObject.fromEntries(Object.entries(obj).map(([k, v]) => [k, `${v}`])),\n// \t).toString();\n\n// export const getGeoNorgeAdresser = async (params: {\n// \tadressekode?: number;\n// \tadressenavn?: string;\n// \tadressetekst?: string;\n// \tadressetilleggsnavn?: string;\n// \tasciiKompatibel?: boolean;\n// \tbokstav?: string;\n// \tbruksenhetsnummer?: string;\n// \tbruksnummer?: number;\n// \tfestenummer?: number;\n// \tfiltrer?: string;\n// \tfuzzy?: boolean;\n// \tgardsnummer?: number;\n// \tkommunenavn?: string;\n// \tkommunenummer?: number;\n// \tnummer?: number;\n// \tobjtype?: \"Vegadresse\" | \"Matrikkeladresse\";\n// \tpostnummer?: string;\n// \tpoststed?: string;\n// \tside?: number;\n// \tsok?: string;\n// \tsokemodus?: \"AND\" | \"OR\";\n// \ttreffPerSide?: number;\n// \tundernummer?: string;\n// \tutkoordsys?: number;\n// }): Promise<GeoNorgeAdresser | undefined> =>\n// \tfetch(\n// \t\t`https://ws.geonorge.no/adresser/v1/sok?${toUrlQuery({\n// \t\t\tasciiKompatibel: true,\n// \t\t\tfuzzy: true,\n// \t\t\tside: 0,\n// \t\t\ttreffPerSide: 10,\n// \t\t\tutkoordsys: 4326,\n// \t\t\t...params,\n// \t\t})}`,\n// \t)\n// \t\t.then((res) => res.json())\n// \t\t.catch((error) =>\n// \t\t\tconsole.log(`Feilet i å hente adresse fra punkt: ${error}`),\n// \t\t);\n"],"names":["ICON_SIZE","MAX_ZOOM","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","onAddOriginal","args","el","debounce","HANDLE_POPUP_EVENTS","map","popup","id","popover","mode","update","event","unresize","unclick","point","x","onResize","on","e"],"mappings":"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"}
+{"version":3,"file":"atlas-element.js","sources":["../../designsystem/atlas/atlas-element.ts"],"sourcesContent":["import L from \"leaflet\";\nimport LeafletCSS from \"leaflet/dist/leaflet.css?raw\";\nimport type {} from \"leaflet.markercluster\"; // Extend L namespace\nimport \"./cluster.js\";\nimport { attr, defineElement, MTDSElement, off, on, tag } from \"../utils\";\nimport css from \"./atlas.css?raw\";\nexport { L };\nexport { MTDSAtlasMarkerElement } from \"./atlas-marker\";\nexport { MTDSAtlasMatgeoElement } from \"./atlas-matgeo\";\n\n// TODO: Add minimum zoom level for adding markers (minimum 17 som standard?)\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"mtds-atlas\": MTDSAtlasElement;\n\t}\n}\n\nlet SKIP_CLICK: number | NodeJS.Timeout = 0;\nconst KARTVERKET_MAX_ZOOM = 18; // Kartverket does not support more than zoom level 18\nconst KARTVERKET_TILES_URL =\n\t\"https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png\";\nconst BOUNDS_NORWAY: L.LatLngBoundsLiteral = [\n\t[57.5, 4.73],\n\t[71.5, 31.44],\n];\n\nexport class MTDSAtlasElement extends MTDSElement {\n\tcluster?: L.MarkerClusterGroup;\n\tmap?: L.Map;\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-view\", \"data-scrollzoom\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: \"open\" }).append(\n\t\t\ttag(\n\t\t\t\t\"style\",\n\t\t\t\t{},\n\t\t\t\t`@layer leaflet{${LeafletCSS}}\\n@layer mt.design{${css}`,\n\t\t\t),\n\t\t\ttag(\"figure\"),\n\t\t);\n\t}\n\tconnectedCallback() {\n\t\tconst container = this.shadowRoot?.lastElementChild as HTMLElement;\n\t\tconst cluster = attr(this, \"data-cluster\") ?? \"false\";\n\t\tconst tiles = new L.TileLayer(KARTVERKET_TILES_URL, {\n\t\t\tattribution: \"&copy; Kartverket\",\n\t\t\tmaxZoom: KARTVERKET_MAX_ZOOM,\n\t\t});\n\n\t\tthis.map = new L.Map(container, {\n\t\t\tattributionControl: false,\n\t\t\tfadeAnimation: false, // Prevent popup fades\n\t\t\tlayers: [tiles],\n\t\t\tzoomControl: false,\n\t\t\tzoomSnap: 0.2,\n\t\t});\n\n\t\ton(this, \"pointerup,click\", this.#skipClick); // Prevent clicks from bubbling up unless sent from Leaflet\n\t\tthis.map.addControl(new L.Control.Attribution({ prefix: \"\" }));\n\t\tthis.map.addControl(new L.Control.Zoom({ position: \"bottomright\" }));\n\t\tthis.map.on(\"popupopen popupclose\", this.#handlePopup, this);\n\t\tthis.cluster = new L.MarkerClusterGroup({\n\t\t\tzoomToBoundsOnClick: true,\n\t\t\tshowCoverageOnHover: false,\n\t\t\tdisableClusteringAtZoom:\n\t\t\t\tcluster === \"false\" ? 1 : Number(cluster) || KARTVERKET_MAX_ZOOM + 1,\n\t\t\ticonCreateFunction: (cluster: L.MarkerCluster) =>\n\t\t\t\tnew L.DivIcon({\n\t\t\t\t\thtml: `${cluster.getChildCount()}`,\n\t\t\t\t\tclassName: \"leaflet-cluster-icon\",\n\t\t\t\t\ticonSize: [30, 30],\n\t\t\t\t}),\n\t\t}).addTo(this.map);\n\n\t\t// Initial setup attributes\n\t\tfor (const name of MTDSAtlasElement.observedAttributes)\n\t\t\tthis.attributeChangedCallback(name, null, attr(this, name));\n\t}\n\tattributeChangedCallback(name: string, _prev?: null, next?: string | null) {\n\t\tif (name === \"data-view\") this.setView(next || \"\");\n\t\tif (name === \"data-scrollzoom\")\n\t\t\tthis.map?.scrollWheelZoom[next === \"false\" ? \"disable\" : \"enable\"]();\n\t}\n\tsetView(view: string | number[], opts?: L.FitBoundsOptions) {\n\t\tconst p = `${view}`.split(\",\").map(parseFloat).filter(Number.isFinite);\n\t\tconst b = this.cluster?.getBounds();\n\n\t\tif (p.length === 3) return this.map?.setView([p[0], p[1]], p[2], opts);\n\t\tif (view !== \"fit\") return this.map?.fitBounds(BOUNDS_NORWAY, opts);\n\t\tif (b?.isValid()) return this.map?.fitBounds(b.pad(0.1), opts);\n\t\tthis.cluster?.once(\"layeradd\", () => {\n\t\t\tsetTimeout(() => this.setView(\"fit\"), 50); // Add all markers before fitting\n\t\t});\n\t}\n\tlatLngFromPoint(x: number, y: number) {\n\t\t// @ts-expect-error -- Missing from Leaflet@2.0.0-alpha.1 types\n\t\treturn this.map?.pointerEventToLatLng({ clientX: x, clientY: y });\n\t}\n\tdisconnectedCallback() {\n\t\toff(this, \"pointerup,click\", this.#skipClick);\n\t\tthis.map?.remove();\n\t\tthis.map = this.cluster = undefined;\n\t}\n\t#handlePopup({ type, popup }: { type: string; popup: L.Popup }) {\n\t\tconst open = type === \"popupopen\";\n\t\tconst cont = popup.getElement()?.querySelector(\".leaflet-popup-content\");\n\t\tconst slot = cont?.querySelector<HTMLSlotElement>(\":scope > slot\");\n\t\tconst id = cont?.textContent?.match(/^#(\\S+)/)?.[1] || \"\";\n\t\tconst el = document.getElementById(slot?.name || id); // If content of popup is #id, replace with <slot>\n\n\t\tif (!el) return open && id && popup.close(); // Close popup if target element not found\n\t\tL.Util.setOptions(popup, { maxWidth: 9999 });\n\t\tattr(el, \"data-popover\", open ? attr(el, \"popover\") : null); // Store previous popover mode\n\t\tattr(el, \"popover\", open ? null : attr(el, \"data-popover\")); // But temporarily remove it so popover renders\n\t\tattr(el, \"slot\", open ? el.id : null); // Render popover in slot\n\t\tif (open) popup.setContent(tag(\"slot\", { name: el.id }));\n\t}\n\t#skipClick(event: Partial<MouseEvent>) {\n\t\tif (event.type === \"click\") SKIP_CLICK && event.stopPropagation?.();\n\t\telse if (document.body.classList.contains(\"leaflet-dragging\"))\n\t\t\tSKIP_CLICK = setTimeout(() => {\n\t\t\t\tSKIP_CLICK = 0;\n\t\t\t}, 50); // Was dragging, so skip succeeding click\n\t}\n}\n\ndefineElement(\"mtds-atlas\", MTDSAtlasElement);\n"],"names":["cluster"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import { default as L } from 'leaflet';
+import { MTDSElement } from '../utils';
+import { MTDSAtlasElement } from './atlas-element';
+declare global {
+    interface HTMLElementTagNameMap {
+        "mtds-atlas-marker": MTDSAtlasMarkerElement;
+    }
+}
+export declare class MTDSAtlasMarkerElement extends MTDSElement {
+    #private;
+    atlas?: MTDSAtlasElement;
+    marker?: L.Marker;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    disconnectedCallback(): void;
+    handleEvent(event: KeyboardEvent): L.Marker<any> | undefined;
+    get latlng(): string;
+    set latlng(latlng: string);
+}

package/mtds/atlas/atlas-marker.js

@@ -0,0 +1,69 @@
+import L from "../external/leaflet/dist/leaflet-src.js";
+import { defineElement, MTDSElement, tag, attr, on, off } from "../utils.js";
+let SLOT = 0;
+class MTDSAtlasMarkerElement extends MTDSElement {
+  atlas;
+  marker;
+  static get observedAttributes() {
+    return ["draggable", "data-latlng", "popovertarget"];
+  }
+  connectedCallback() {
+    queueMicrotask(() => {
+      const html = tag("slot", { name: `${++SLOT}` });
+      const icon = new L.DivIcon({ html, iconSize: [0, 0] });
+      this.atlas = this.closest("mtds-atlas") || void 0;
+      this.marker = new L.Marker(this.#parseLatLng(), {
+        draggable: this.draggable,
+        keyboard: false,
+        icon
+      });
+      this.marker.bindPopup(() => `#${attr(this, "popovertarget")}`);
+      this.marker.on("dragend", this.#handleDragEnd);
+      on(this, "click,keydown", this);
+      attr(this, "slot", `${SLOT}`);
+      attr(this, "role", "button");
+      attr(this, "tabindex", "0");
+      this.atlas?.cluster?.addLayer(this.marker);
+    });
+  }
+  attributeChangedCallback(name) {
+    if (name === "popovertarget") this.marker?.getPopup()?.update();
+    if (name === "data-latlng") {
+      const latlng = this.#parseLatLng();
+      this.marker?.getLatLng().equals(latlng) || this.marker?.setLatLng(latlng);
+    }
+    if (name === "draggable")
+      this.marker?.dragging?.[this.draggable ? "enable" : "disable"]();
+  }
+  disconnectedCallback() {
+    off(this, "click,keydown", this);
+    this.marker?.unbindPopup().off("dragend", this.#handleDragEnd).remove();
+    this.marker = this.atlas = void 0;
+  }
+  handleEvent(event) {
+    if (event.type === "click") return this.marker?.fire("click");
+    if (event.key === " ") event.preventDefault();
+    if (event.key === " " || event.key === "Enter") this.click();
+  }
+  get latlng() {
+    return attr(this, "data-latlng") || "";
+  }
+  set latlng(latlng) {
+    attr(this, "data-latlng", latlng);
+  }
+  #parseLatLng() {
+    return this.latlng?.split(",").map(parseFloat);
+  }
+  #handleDragEnd(detail) {
+    const slot = detail.target._icon?.firstElementChild;
+    const self = slot?.assignedElements?.()?.[0];
+    const { lat, lng } = detail.target.getLatLng();
+    if (self) self.latlng = `${lat},${lng}`;
+    self?.dispatchEvent(new CustomEvent("dragend", { detail, bubbles: true }));
+  }
+}
+defineElement("mtds-atlas-marker", MTDSAtlasMarkerElement);
+export {
+  MTDSAtlasMarkerElement
+};
+//# sourceMappingURL=atlas-marker.js.map

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

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

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

@@ -0,0 +1,29 @@
+import { default as L } from 'leaflet';
+import { MTDSElement } from '../utils';
+import { MTDSAtlasElement } from './atlas-element';
+declare global {
+    interface HTMLElementTagNameMap {
+        "mtds-atlas-matgeo": MTDSAtlasMatgeoElement;
+    }
+    interface GlobalEventHandlersEventMap {
+        atlasfeatureclick: CustomEvent<Omit<L.LeafletMouseEvent, "target"> & {
+            feature: L.Polygon["feature"];
+            target: L.Layer;
+        }>;
+    }
+    interface Window {
+        _matgeoCollections?: Promise<string[]>;
+    }
+}
+export declare class MTDSAtlasMatgeoElement extends MTDSElement {
+    #private;
+    atlas?: MTDSAtlasElement;
+    geojson?: L.GeoJSON;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name?: string): void;
+    disconnectedCallback(): void;
+    refresh(nocache?: boolean | L.LeafletEvent): void;
+    handleEvent(event: L.LeafletMouseEvent): void;
+}