@dso-toolkit/core 43.0.0 → 44.0.0

package/dist/esm/dso-ozon-content.entry.js

@@ -44,23 +44,31 @@ class OzonContentExtRefNode {
     ];
   }
   render(node, { mapNodeToJsx }) {
-    var _a;
-    return (h("a", { target: "_blank", rel: "noopener noreferrer", href: (_a = node.getAttribute('ref')) !== null && _a !== void 0 ? _a : undefined },
+    const href = node.tagName === 'ExtIoRef' ? node.getAttribute('href') : node.getAttribute('ref');
+    return (h("a", { target: "_blank", rel: "noopener noreferrer", href: href !== null && href !== void 0 ? href : undefined },
       h("span", { class: "sr-only" }, "opent in nieuw venster"),
       mapNodeToJsx(node.childNodes)));
   }
 }
 
-class OzonContentIllustratieNode {
+class OzonContentFiguurNode {
   constructor() {
     this.name = [
-      'Illustratie',
-      'InlineTekstAfbeelding'
+      'Figuur',
     ];
   }
   render(node) {
-    var _a, _b, _c, _d;
-    return (h("img", { src: (_a = node.getAttribute('naam')) !== null && _a !== void 0 ? _a : undefined, alt: (_b = node.getAttribute('naam')) !== null && _b !== void 0 ? _b : undefined, height: (_c = node.getAttribute('hoogte')) !== null && _c !== void 0 ? _c : undefined, width: (_d = node.getAttribute('breedte')) !== null && _d !== void 0 ? _d : undefined }));
+    var _a, _b, _c, _d, _e;
+    const childNodes = Array.from(node.childNodes);
+    const titel = (_a = childNodes.find(n => getNodeName(n) === 'Titel')) === null || _a === void 0 ? void 0 : _a.textContent;
+    const bijschrift = (_b = childNodes.find(n => getNodeName(n) === 'Bijschrift')) === null || _b === void 0 ? void 0 : _b.textContent;
+    const illustratieNode = childNodes.find(n => getNodeName(n) === 'Illustratie');
+    if (illustratieNode instanceof Element) {
+      return (h("div", { class: "dso-ozon-figuur" },
+        h("dso-image-overlay", null,
+          h("img", { src: (_c = illustratieNode.getAttribute('naam')) !== null && _c !== void 0 ? _c : undefined, alt: (_e = (_d = titel !== null && titel !== void 0 ? titel : illustratieNode.getAttribute('alt')) !== null && _d !== void 0 ? _d : illustratieNode.getAttribute('naam')) !== null && _e !== void 0 ? _e : undefined })),
+        bijschrift && (h("span", { class: "figuur-bijschrift" }, bijschrift))));
+    }
   }
 }
 
@@ -77,6 +85,19 @@ class OzonContentInhoudNode {
   }
 }
 
+class OzonContentInlineTekstAfbeeldingNode {
+  constructor() {
+    this.name = [
+      'InlineTekstAfbeelding',
+      'Illustratie',
+    ];
+  }
+  render(node) {
+    var _a, _b, _c, _d;
+    return (h("img", { src: (_a = node.getAttribute('naam')) !== null && _a !== void 0 ? _a : undefined, alt: (_b = node.getAttribute('naam')) !== null && _b !== void 0 ? _b : undefined, height: (_c = node.getAttribute('hoogte')) !== null && _c !== void 0 ? _c : undefined, width: (_d = node.getAttribute('breedte')) !== null && _d !== void 0 ? _d : undefined }));
+  }
+}
+
 class OzonContentOpschriftNode {
   constructor() {
     this.name = 'Opschrift';
@@ -107,6 +128,33 @@ class OzonContentInlineNodes {
   }
 }
 
+class OzonContentIntIoRefNode {
+  constructor() {
+    this.name = 'IntIoRef';
+  }
+  render(node, { mapNodeToJsx, emitAnchorClick }) {
+    const ref = node.getAttribute('ref');
+    if (!ref) {
+      return mapNodeToJsx(node.childNodes);
+    }
+    const intRefOnClick = (event) => {
+      event.preventDefault();
+      const target = event.currentTarget;
+      if (!(target instanceof HTMLAnchorElement)) {
+        return;
+      }
+      const { href } = target;
+      emitAnchorClick({
+        node: this.name,
+        href,
+        documentComponent: ref,
+        originalEvent: event
+      });
+    };
+    return (h("a", { href: `#${ref}`, onClick: intRefOnClick }, mapNodeToJsx(node.childNodes)));
+  }
+}
+
 class OzonContentIntRefNode {
   constructor() {
     this.name = 'IntRef';
@@ -281,33 +329,6 @@ class OzonContentFallbackNode {
   }
 }
 
-class OzonContentIntIoRefNode {
-  constructor() {
-    this.name = 'IntIoRef';
-  }
-  render(node, { mapNodeToJsx, emitAnchorClick }) {
-    const ref = node.getAttribute('ref');
-    if (!ref) {
-      return mapNodeToJsx(node.childNodes);
-    }
-    const intRefOnClick = (event) => {
-      event.preventDefault();
-      const target = event.currentTarget;
-      if (!(target instanceof HTMLAnchorElement)) {
-        return;
-      }
-      const { href } = target;
-      emitAnchorClick({
-        node: this.name,
-        href,
-        documentComponent: ref,
-        originalEvent: event
-      });
-    };
-    return (h("a", { href: `#${ref}`, onClick: intRefOnClick }, mapNodeToJsx(node.childNodes)));
-  }
-}
-
 class Mapper {
   constructor() {
     this.mappers = [
@@ -319,10 +340,11 @@ class Mapper {
       new OzonContentExtRefNode(),
       new OzonContentAlNode(),
       new OzonContentInlineNodes(),
-      new OzonContentIllustratieNode(),
+      new OzonContentInlineTekstAfbeeldingNode(),
       new OzonContentNootNode(),
       new OzonContentTableNode(),
       new OzonContentIntIoRefNode(),
+      new OzonContentFiguurNode(),
     ];
     this.skip = this.mappers.reduce((t, m) => {
       if (m.handles) {
@@ -378,7 +400,7 @@ class Mapper {
   }
 }
 
-const ozonContentCss = ".sc-dso-ozon-content-h:not([inline]) {\n  display: block;\n}\n\n[inline].sc-dso-ozon-content-h {\n  display: inline;\n}\n\n[deleted].sc-dso-ozon-content-h *.sc-dso-ozon-content {\n  text-decoration: line-through !important;\n}\n\n[interactive].sc-dso-ozon-content-h {\n  background-color: transparent;\n  color: #39870c;\n  text-decoration: underline;\n  cursor: pointer;\n}\n[interactive].sc-dso-ozon-content-h:hover, [interactive].sc-dso-ozon-content-h:focus {\n  color: #676cb0;\n  text-decoration: underline;\n}\n[interactive].sc-dso-ozon-content-h:active {\n  text-decoration: none;\n}\n\n.deleted-start.sc-dso-ozon-content, .deleted-end.sc-dso-ozon-content {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\nbutton.toggle-note.sc-dso-ozon-content {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\nbutton.toggle-note.sc-dso-ozon-content:focus, button.toggle-note.sc-dso-ozon-content:focus-visible {\n  outline-offset: 2px;\n}\nbutton.toggle-note.sc-dso-ozon-content:active {\n  outline: 0;\n}\nbutton.toggle-note.extern.sc-dso-ozon-content::after, button.toggle-note.download.sc-dso-ozon-content::after {\n  content: \"\";\n  display: inline-block;\n  height: 1.5em;\n  margin-left: 8px;\n  vertical-align: top;\n  width: 1.5em;\n}\nbutton.toggle-note[disabled].sc-dso-ozon-content {\n  color: #afcf9d;\n}\nbutton.toggle-note[disabled].dso-spinner-left.sc-dso-ozon-content, button.toggle-note[disabled].dso-spinner-right.sc-dso-ozon-content {\n  color: #39870c;\n}\nbutton.toggle-note.sc-dso-ozon-content:not([disabled]):hover {\n  color: #676cb0;\n  text-decoration: underline;\n}\nbutton.toggle-note.sc-dso-ozon-content:not([disabled]):active {\n  color: #676cb0;\n}\nbutton.toggle-note.btn-align.sc-dso-ozon-content {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\nbutton.toggle-note.extern.sc-dso-ozon-content::after, button.toggle-note.download.sc-dso-ozon-content::after {\n  position: relative;\n  top: -2px;\n}\nbutton.toggle-note.download.sc-dso-ozon-content::after {\n  background: var(--dso-icon, var(--di-download)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\nbutton.toggle-note.download[disabled].sc-dso-ozon-content::after {\n  --dso-icon: var(--di-download-grasgroen-40);\n}\nbutton.toggle-note.download.sc-dso-ozon-content:not([disabled]):hover::after, button.toggle-note.download.sc-dso-ozon-content:not([disabled]):active::after {\n  --dso-icon: var(--di-download-scampi);\n}\nbutton.toggle-note.extern.sc-dso-ozon-content::after {\n  background: var(--dso-icon, var(--di-external-link)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\nbutton.toggle-note.extern[disabled].sc-dso-ozon-content::after {\n  --dso-icon: var(--di-external-link-grasgroen-40);\n}\nbutton.toggle-note.extern.sc-dso-ozon-content:not([disabled]):hover::after, button.toggle-note.extern.sc-dso-ozon-content:not([disabled]):active::after {\n  --dso-icon: var(--di-external-link-scampi);\n}\nbutton.toggle-note.dso-spinner-left.sc-dso-ozon-content::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\nbutton.toggle-note.dso-spinner-right.sc-dso-ozon-content::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + dso-icon.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.sc-dso-ozon-content {\n  margin-left: 8px;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content svg.di.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content {\n  vertical-align: middle;\n}\n\nspan[role=section].sc-dso-ozon-content, span[role=paragraph].sc-dso-ozon-content {\n  display: block;\n}\n\n.fallback.sc-dso-ozon-content {\n  display: block;\n}\n\n.od-Term.sc-dso-ozon-content {\n  font-weight: 700;\n}\n\n.od-Definitie.sc-dso-ozon-content, .od-Tussenkop.sc-dso-ozon-content {\n  font-style: italic;\n}\n\n.od-Inhoud.sc-dso-ozon-content, .od-Inhoud.sc-dso-ozon-content > .od-Lijst.sc-dso-ozon-content, .od-IntIoRef.sc-dso-ozon-content, .od-Lidnr.sc-dso-ozon-content, .od-LiNr.sc-dso-ozon-content, .od-Opschrift.sc-dso-ozon-content, .od-Tussenkop.sc-dso-ozon-content {\n  display: inline;\n}\n\n.od-Al.sc-dso-ozon-content, .od-Lijstaanhef.sc-dso-ozon-content {\n  margin-bottom: 0.75em;\n}\n\n.od-IntIoRef.sc-dso-ozon-content {\n  border-bottom: 1px dotted;\n}\n\n.od-LiNummer.sc-dso-ozon-content {\n  float: left;\n  min-width: 0.7em;\n  padding-right: 0.3em;\n  text-align: right;\n}\n\n.od-Figuur.sc-dso-ozon-content img.sc-dso-ozon-content {\n  margin-left: 25px;\n  max-width: 100%;\n  height: auto;\n}\n\n.od-Figuur.sc-dso-ozon-content .od-Bijschrift.sc-dso-ozon-content {\n  font-size: 0.75rem;\n  margin-left: 25px;\n  padding-bottom: 2.5rem;\n}\n\n.od-Tabel.sc-dso-ozon-content thead.sc-dso-ozon-content {\n  font-weight: 600;\n}\n\n.od-Kadertekst.sc-dso-ozon-content {\n  border: 1px solid #e5e5e5;\n  margin-bottom: 1rem;\n  padding: 1rem;\n}";
+const ozonContentCss = ".sc-dso-ozon-content-h:not([inline]) {\n  display: block;\n}\n\n[inline].sc-dso-ozon-content-h {\n  display: inline;\n}\n\n[deleted].sc-dso-ozon-content-h *.sc-dso-ozon-content {\n  text-decoration: line-through !important;\n}\n\n[interactive].sc-dso-ozon-content-h {\n  background-color: transparent;\n  color: #39870c;\n  text-decoration: underline;\n  cursor: pointer;\n  color: #275937;\n  font-weight: 600;\n  text-decoration: none;\n}\n[interactive].sc-dso-ozon-content-h:hover, [interactive].sc-dso-ozon-content-h:focus {\n  color: #676cb0;\n  text-decoration: underline;\n}\n[interactive].sc-dso-ozon-content-h:active {\n  text-decoration: none;\n}\n\n[interactive=sub].sc-dso-ozon-content-h {\n  color: #191919;\n}\n\n.deleted-start.sc-dso-ozon-content, .deleted-end.sc-dso-ozon-content {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\nbutton.toggle-note.sc-dso-ozon-content {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\nbutton.toggle-note.sc-dso-ozon-content:focus, button.toggle-note.sc-dso-ozon-content:focus-visible {\n  outline-offset: 2px;\n}\nbutton.toggle-note.sc-dso-ozon-content:active {\n  outline: 0;\n}\nbutton.toggle-note.extern.sc-dso-ozon-content::after, button.toggle-note.download.sc-dso-ozon-content::after {\n  content: \"\";\n  display: inline-block;\n  height: 1.5em;\n  margin-left: 8px;\n  vertical-align: top;\n  width: 1.5em;\n}\nbutton.toggle-note[disabled].sc-dso-ozon-content {\n  color: #afcf9d;\n}\nbutton.toggle-note[disabled].dso-spinner-left.sc-dso-ozon-content, button.toggle-note[disabled].dso-spinner-right.sc-dso-ozon-content {\n  color: #39870c;\n}\nbutton.toggle-note.sc-dso-ozon-content:not([disabled]):hover {\n  color: #676cb0;\n  text-decoration: underline;\n}\nbutton.toggle-note.sc-dso-ozon-content:not([disabled]):active {\n  color: #676cb0;\n}\nbutton.toggle-note.btn-align.sc-dso-ozon-content {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\nbutton.toggle-note.extern.sc-dso-ozon-content::after, button.toggle-note.download.sc-dso-ozon-content::after {\n  position: relative;\n  top: -2px;\n}\nbutton.toggle-note.download.sc-dso-ozon-content::after {\n  background: var(--dso-icon, var(--di-download)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\nbutton.toggle-note.download[disabled].sc-dso-ozon-content::after {\n  --dso-icon: var(--di-download-grasgroen-40);\n}\nbutton.toggle-note.download.sc-dso-ozon-content:not([disabled]):hover::after, button.toggle-note.download.sc-dso-ozon-content:not([disabled]):active::after {\n  --dso-icon: var(--di-download-scampi);\n}\nbutton.toggle-note.extern.sc-dso-ozon-content::after {\n  background: var(--dso-icon, var(--di-external-link)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\nbutton.toggle-note.extern[disabled].sc-dso-ozon-content::after {\n  --dso-icon: var(--di-external-link-grasgroen-40);\n}\nbutton.toggle-note.extern.sc-dso-ozon-content:not([disabled]):hover::after, button.toggle-note.extern.sc-dso-ozon-content:not([disabled]):active::after {\n  --dso-icon: var(--di-external-link-scampi);\n}\nbutton.toggle-note.dso-spinner-left.sc-dso-ozon-content::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\nbutton.toggle-note.dso-spinner-right.sc-dso-ozon-content::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + dso-icon.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.sc-dso-ozon-content {\n  margin-left: 8px;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content svg.di.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content {\n  vertical-align: middle;\n}\n\nspan[role=section].sc-dso-ozon-content, span[role=paragraph].sc-dso-ozon-content {\n  display: block;\n}\n\n.fallback.sc-dso-ozon-content {\n  display: block;\n}\n\n.od-Term.sc-dso-ozon-content {\n  font-weight: 700;\n}\n\n.od-Definitie.sc-dso-ozon-content, .od-Tussenkop.sc-dso-ozon-content {\n  font-style: italic;\n}\n\n.od-Inhoud.sc-dso-ozon-content, .od-Inhoud.sc-dso-ozon-content > .od-Lijst.sc-dso-ozon-content, .od-IntIoRef.sc-dso-ozon-content, .od-Lidnr.sc-dso-ozon-content, .od-LiNr.sc-dso-ozon-content, .od-Opschrift.sc-dso-ozon-content, .od-Tussenkop.sc-dso-ozon-content {\n  display: inline;\n}\n\n.od-Al.sc-dso-ozon-content, .od-Lijstaanhef.sc-dso-ozon-content {\n  margin-bottom: 0.75em;\n}\n\n.od-IntIoRef.sc-dso-ozon-content {\n  border-bottom: 1px dotted;\n}\n\n.od-LiNummer.sc-dso-ozon-content {\n  float: left;\n  min-width: 0.7em;\n  padding-right: 0.3em;\n  text-align: right;\n}\n\n.dso-ozon-figuur.sc-dso-ozon-content .figuur-bijschrift.sc-dso-ozon-content {\n  display: block;\n  font-size: 0.75rem;\n  padding-bottom: 2.5rem;\n}\n\n.od-Tabel.sc-dso-ozon-content thead.sc-dso-ozon-content {\n  font-weight: 600;\n}\n\n.od-Kadertekst.sc-dso-ozon-content {\n  border: 1px solid #e5e5e5;\n  margin-bottom: 1rem;\n  padding: 1rem;\n}";
 
 let OzonContent = class {
   constructor(hostRef) {
@@ -398,13 +420,18 @@ let OzonContent = class {
      *
      * **Do not** use this without an accessible companion element! `interactive` is only
      * meant to ease the use of the companion element for mouse/touch users.
+     *
+     * * `true`: Interactive anchor-look-alike
+     * * `"sub"`: Interactive anchor-look-alike for sub navigation
+     * * `false | undefined`: Disabled
      */
     this.interactive = false;
     this.state = {};
     this.mapper = new Mapper();
   }
   handleHostOnClick(e) {
-    if (!this.interactive) {
+    // '' is `true`: <dso-ozon-content interactive>
+    if (this.interactive !== '' && !this.interactive) {
       return;
     }
     const doIt = e.composedPath().find(e => e === this.host || (e instanceof HTMLElement && isTabbable(e))) === this.host;

package/dist/esm/dso-pagination.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-1602fde1.js';
 
-const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:28px;text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:32px;justify-content:center;position:relative;width:32px}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:50%}.pagination>li a{line-height:32px;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:\"\";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}";
+const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:2rem;justify-content:center;position:relative;width:2rem}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:50%}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:\"\";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}";
 
 let Pagination = class {
   constructor(hostRef) {

package/dist/esm/dso-progress-bar.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-1602fde1.js';
 
-const progressBarCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.progress{background-color:#fff;border:1px solid #39870c;height:16px;margin-bottom:calc(16px + 1em);position:relative}.progress .progress-bar{background-color:#39870c;color:#fff;float:left;font-size:14px;height:100%;line-height:16px;text-align:center;width:0%}.progress .progress-bar>span:not(.sr-only){color:#191919;left:0;position:absolute;top:calc(100% + 8px)}";
+const progressBarCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.progress{background-color:#fff;border:1px solid #39870c;height:16px;margin-bottom:calc(16px + 1em);position:relative}.progress .progress-bar{background-color:#39870c;color:#fff;float:left;font-size:0.875rem;height:100%;line-height:16px;text-align:center;width:0%}.progress .progress-bar>span:not(.sr-only){color:#191919;left:0;position:absolute;top:calc(100% + 8px)}";
 
 let ProgressBar = class {
   constructor(hostRef) {

package/dist/esm/dso-toggletip.entry.js

@@ -27,29 +27,17 @@ let Toggletip = class {
       }
     };
     this.keyDownListener = (event) => {
+      var _a;
       if (!event.defaultPrevented && event.key == "Escape") {
         this.close();
-        this.button.focus();
+        (_a = this.infoButton) === null || _a === void 0 ? void 0 : _a.setFocus();
         event.preventDefault();
       }
       return;
     };
   }
-  componentDidRender() {
-    var _a, _b, _c;
-    const infoButton = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("dso-info-button");
-    if (!infoButton) {
-      throw Error("dso-info-button not found");
-    }
-    this.infoButton = infoButton;
-    const button = (_c = (_b = this.infoButton) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector("button");
-    if (!button) {
-      throw Error("button not found");
-    }
-    this.button = button;
-  }
   render() {
-    return (h(Fragment, null, h("dso-info-button", { id: "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary }), h("dso-tooltip", { stateless: true, descriptive: true, for: "toggle", active: this.active, position: this.position, small: this.small }, h("slot", null))));
+    return (h(Fragment, null, h("dso-info-button", { id: "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: element => this.infoButton = element }), h("dso-tooltip", { stateless: true, descriptive: true, for: "toggle", active: this.active, position: this.position, small: this.small }, h("slot", null))));
   }
   get host() { return getElement(this); }
 };

package/dist/esm/dso-toolkit.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-header",[[1,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-image-overlay",[[1,"dso-image-overlay",{"active":[32],"focused":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-badge",[[1,"dso-badge",{"status":[1]}]]],["dso-banner",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[516],"state":[32]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon",[[1,"dso-icon",{"icon":[1]}]]]], options);
+  return bootstrapLazy([["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-header",[[1,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32],"labelText":[32]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-image-overlay",[[1,"dso-image-overlay",{"active":[32],"focused":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-badge",[[1,"dso-badge",{"status":[1]}]]],["dso-banner",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"setFocus":[64]}]]],["dso-info_2",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon",[[1,"dso-icon",{"icon":[1]}]]]], options);
 });

package/dist/esm/dso-tooltip.entry.js

@@ -1822,7 +1822,7 @@ var maxSize = {
   }
 };
 
-const tooltipCss = ":host(.hidden){visibility:hidden}:host-context(dso-toggletip){color:red !important}:host-context(dso-toggletip) *[data-popper-placement=top] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=right] .tooltip-arrow{margin-top:0}:host-context(dso-toggletip) *[data-popper-placement=bottom] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=left]{margin-right:-8px !important}:host-context(dso-toggletip) *[data-popper-placement=left] .tooltip-arrow{margin-top:0}*,*::after,*::before{box-sizing:border-box}.tooltip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:410}.tooltip.in{opacity:1}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:16px;max-width:640px;padding:8px 16px;position:relative}.tooltip .tooltip-inner.dso-small{max-width:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;height:0;width:0}.tooltip[data-popper-placement=top]{margin-top:-3px;padding:6px 0}.tooltip[data-popper-placement=top] .tooltip-arrow{border-top-color:#fff;border-width:6px 6px 0;bottom:0}.tooltip[data-popper-placement=top] .tooltip-arrow{margin-left:-3px}.tooltip[data-popper-placement=right]{margin-left:3px;padding:0 6px}.tooltip[data-popper-placement=right] .tooltip-arrow{border-right-color:#fff;border-width:6px 6px 6px 0;left:0}.tooltip[data-popper-placement=right] .tooltip-arrow{margin-top:-3px}.tooltip[data-popper-placement=bottom]{margin-top:3px;padding:6px 0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{border-bottom-color:#fff;border-width:0 6px 6px;top:0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{margin-left:-3px}.tooltip[data-popper-placement=left]{margin-left:-3px;padding:0 6px}.tooltip[data-popper-placement=left] .tooltip-arrow{border-left-color:#fff;border-width:6px 0 6px 6px;right:0}.tooltip[data-popper-placement=left] .tooltip-arrow{margin-top:-3px}";
+const tooltipCss = ":host(.hidden){visibility:hidden}:host-context(dso-toggletip){color:red !important}:host-context(dso-toggletip) *[data-popper-placement=top] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=right] .tooltip-arrow{margin-top:0}:host-context(dso-toggletip) *[data-popper-placement=bottom] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=left]{margin-right:-8px !important}:host-context(dso-toggletip) *[data-popper-placement=left] .tooltip-arrow{margin-top:0}*,*::after,*::before{box-sizing:border-box}.tooltip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:410}.tooltip.in{opacity:1}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:1rem;max-width:640px;padding:8px 16px;position:relative}.tooltip .tooltip-inner.dso-small{max-width:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;height:0;width:0}.tooltip[data-popper-placement=top]{margin-top:-3px;padding:6px 0}.tooltip[data-popper-placement=top] .tooltip-arrow{border-top-color:#fff;border-width:6px 6px 0;bottom:0}.tooltip[data-popper-placement=top] .tooltip-arrow{margin-left:-3px}.tooltip[data-popper-placement=right]{margin-left:3px;padding:0 6px}.tooltip[data-popper-placement=right] .tooltip-arrow{border-right-color:#fff;border-width:6px 6px 6px 0;left:0}.tooltip[data-popper-placement=right] .tooltip-arrow{margin-top:-3px}.tooltip[data-popper-placement=bottom]{margin-top:3px;padding:6px 0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{border-bottom-color:#fff;border-width:0 6px 6px;top:0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{margin-left:-3px}.tooltip[data-popper-placement=left]{margin-left:-3px;padding:0 6px}.tooltip[data-popper-placement=left] .tooltip-arrow{border-left-color:#fff;border-width:6px 0 6px 6px;right:0}.tooltip[data-popper-placement=left] .tooltip-arrow{margin-top:-3px}";
 
 // Keep const in sync with $tooltip-transition-duration in @dso-toolkit/sources/tooltip.scss tooltip_root() mixin
 const transitionDuration = 150;

package/dist/esm/dso-viewer-grid.entry.js

@@ -9,7 +9,7 @@ const ViewerGridFilterpanelButtons = ({ onApply, onCancel }) => (h("div", { clas
     h("span", null, "Toepassen"),
     h("dso-icon", { icon: "chevron-right" }))));
 
-const viewerGridCss = "button {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\nh1,\n.h1,\nh2,\n.h2,\nh3,\n.h3 {\n  margin-bottom: 16px;\n  margin-top: 24px;\n}\n\nh1,\n.h1 {\n  line-height: 1.25;\n}\n\nh1 {\n  color: #275937;\n  font-size: 2rem;\n  font-weight: 700;\n}\n\nh2,\n.h2 {\n  line-height: 1.33;\n}\n\nh2 {\n  color: #275937;\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n\nh3,\n.h3 {\n  line-height: 1.2;\n}\n\nh3 {\n  color: #275937;\n  font-size: 1.25rem;\n  font-weight: 600;\n}\n\nh4,\n.h4,\nh5,\n.h5,\nh6,\n.h6 {\n  margin-bottom: 16px;\n  margin-top: 12px;\n}\n\nh4,\n.h4 {\n  line-height: 1.5;\n}\n\nh4 {\n  color: #275937;\n  font-size: 1rem;\n  font-weight: 600;\n}\n\nh5,\n.h5 {\n  line-height: 1.5;\n}\n\nh5 {\n  color: #191919;\n  font-size: 1rem;\n  font-weight: 600;\n}\n\nh6,\n.h6 {\n  line-height: 1.5;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  height: 100vh;\n  overflow: hidden;\n  position: relative;\n}\n\n:host([small]) .dso-map-panel {\n  flex-basis: 375px;\n  min-width: 0;\n  max-width: 375px;\n}\n@media screen and (max-width: 375px) {\n  :host([small]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 0;\n    transition: none;\n  }\n}\n\n:host([medium]) .dso-map-panel {\n  flex-basis: 624px;\n  min-width: 375px;\n  max-width: 624px;\n}\n@media screen and (max-width: 624px) {\n  :host([medium]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 375px;\n    transition: none;\n  }\n}\n\n:host([large]) .dso-map-panel {\n  flex-basis: 60%;\n  min-width: 768px;\n  max-width: 1024px;\n}\n@media screen and (max-width: 768px) {\n  :host([large]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 768px;\n    transition: none;\n  }\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n  outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n  outline: 0;\n}\n.shrink.extern::after, .shrink.download::after,\n.expand.extern::after,\n.expand.download::after,\n.overlay-close-button.extern::after,\n.overlay-close-button.download::after {\n  content: \"\";\n  display: inline-block;\n  height: 1.5em;\n  margin-left: 8px;\n  vertical-align: top;\n  width: 1.5em;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n  color: #676cb0;\n  text-decoration: underline;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n  color: #676cb0;\n}\n.shrink.btn-align,\n.expand.btn-align,\n.overlay-close-button.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.shrink.extern::after, .shrink.download::after,\n.expand.extern::after,\n.expand.download::after,\n.overlay-close-button.extern::after,\n.overlay-close-button.download::after {\n  position: relative;\n  top: -2px;\n}\n.shrink.download::after,\n.expand.download::after,\n.overlay-close-button.download::after {\n  background: var(--dso-icon, var(--di-download)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\n.shrink.download[disabled]::after,\n.expand.download[disabled]::after,\n.overlay-close-button.download[disabled]::after {\n  --dso-icon: var(--di-download-grasgroen-40);\n}\n.shrink.download:not([disabled]):hover::after, .shrink.download:not([disabled]):active::after,\n.expand.download:not([disabled]):hover::after,\n.expand.download:not([disabled]):active::after,\n.overlay-close-button.download:not([disabled]):hover::after,\n.overlay-close-button.download:not([disabled]):active::after {\n  --dso-icon: var(--di-download-scampi);\n}\n.shrink.extern::after,\n.expand.extern::after,\n.overlay-close-button.extern::after {\n  background: var(--dso-icon, var(--di-external-link)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\n.shrink.extern[disabled]::after,\n.expand.extern[disabled]::after,\n.overlay-close-button.extern[disabled]::after {\n  --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.shrink.extern:not([disabled]):hover::after, .shrink.extern:not([disabled]):active::after,\n.expand.extern:not([disabled]):hover::after,\n.expand.extern:not([disabled]):active::after,\n.overlay-close-button.extern:not([disabled]):hover::after,\n.overlay-close-button.extern:not([disabled]):active::after {\n  --dso-icon: var(--di-external-link-scampi);\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n  vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n  cursor: pointer;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  display: none;\n}\n\n.overlay-close-button {\n  position: absolute;\n  top: 8px;\n  right: 16px;\n}\n.overlay-close-button .sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-map-panel {\n  background-color: #fff;\n  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  flex-shrink: 0;\n  flex-grow: 0;\n  padding-right: 8px;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;\n  z-index: 100;\n}\n.dso-map-panel .dso-filterblok-address {\n  font-weight: bold;\n  margin: 8px 0;\n}\n.dso-map-panel .main {\n  height: 100%;\n  overflow-y: scroll;\n  padding: 8px 16px;\n}\n\n.sizing-buttons {\n  left: calc(100% + 1px);\n  overflow-x: hidden;\n  padding: 0 4px 4px 0;\n  position: absolute;\n  top: 16px;\n  transition: left 200ms ease-in;\n  width: 44px;\n  z-index: -1;\n}\n.sizing-buttons button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-bottom-right-radius: 4px;\n  border-top-right-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.sizing-buttons button:active {\n  outline: 0;\n}\n.sizing-buttons button.extern::after, .sizing-buttons button.download::after {\n  content: \"\";\n  display: inline-block;\n  height: 1.5em;\n  margin-left: 8px;\n  vertical-align: top;\n  width: 1.5em;\n}\n.sizing-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.sizing-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.sizing-buttons button.btn-sm {\n  line-height: 16px;\n}\n.sizing-buttons button.btn-sm dso-icon,\n.sizing-buttons button.btn-sm svg.di, .sizing-buttons button.btn-sm.extern::after, .sizing-buttons button.btn-sm.download::after, .sizing-buttons button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.download::after {\n  background: var(--dso-icon, var(--di-download)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\n.sizing-buttons button.download:hover::after {\n  --dso-icon: var(--di-download-wit);\n}\n.sizing-buttons button.download[disabled]::after {\n  --dso-icon: var(--di-download-grasgroen-40);\n}\n.sizing-buttons button.extern::after {\n  background: var(--dso-icon, var(--di-external-link)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\n.sizing-buttons button.extern:hover::after {\n  --dso-icon: var(--di-external-link-wit);\n}\n.sizing-buttons button.extern[disabled]::after {\n  --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.sizing-buttons button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.sizing-buttons button:hover dso-icon {\n  color: #fff;\n}\n\n.map {\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n#filterpanel,\n.overlay {\n  background-color: #fff;\n  height: 100%;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 101;\n}\n\n#filterpanel {\n  box-shadow: 2px 0 5px #666;\n  padding: 40px 16px 8px;\n  left: 0;\n  max-width: 896px;\n  width: calc(100vw - 40px);\n}\n@media screen and (max-width: 768px) {\n  #filterpanel {\n    width: 100vw;\n  }\n  #filterpanel::before {\n    display: none !important;\n  }\n}\n#filterpanel::before {\n  content: \"\";\n  display: block;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 896px;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 936px) {\n  #filterpanel::before {\n    left: auto;\n    width: 40px;\n  }\n}\n\n.overlay {\n  box-shadow: -2px 0 5px #666;\n  padding: 40px 16px 8px;\n  right: 0;\n  width: 624px;\n}\n@media screen and (max-width: 624px) {\n  .overlay {\n    width: 100vw;\n  }\n}\n.overlay::before {\n  content: \"\";\n  display: block;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 624px;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n\n.filterpanel-buttons {\n  text-align: right;\n}\n.filterpanel-buttons .cancel-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  line-height: 16px;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after {\n  content: \"\";\n  display: inline-block;\n  height: 1.5em;\n  margin-left: 8px;\n  vertical-align: top;\n  width: 1.5em;\n}\n.filterpanel-buttons .cancel-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.btn-sm {\n  line-height: 16px;\n}\n.filterpanel-buttons .cancel-button.btn-sm dso-icon,\n.filterpanel-buttons .cancel-button.btn-sm svg.di, .filterpanel-buttons .cancel-button.btn-sm.extern::after, .filterpanel-buttons .cancel-button.btn-sm.download::after, .filterpanel-buttons .cancel-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.download::after {\n  background: var(--dso-icon, var(--di-download)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\n.filterpanel-buttons .cancel-button.download:hover::after {\n  --dso-icon: var(--di-download-wit);\n}\n.filterpanel-buttons .cancel-button.download[disabled]::after {\n  --dso-icon: var(--di-download-grasgroen-40);\n}\n.filterpanel-buttons .cancel-button.extern::after {\n  background: var(--dso-icon, var(--di-external-link)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\n.filterpanel-buttons .cancel-button.extern:hover::after {\n  --dso-icon: var(--di-external-link-wit);\n}\n.filterpanel-buttons .cancel-button.extern[disabled]::after {\n  --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  line-height: 16px;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after {\n  content: \"\";\n  display: inline-block;\n  height: 1.5em;\n  margin-left: 8px;\n  vertical-align: top;\n  width: 1.5em;\n}\n.filterpanel-buttons .apply-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n  background-color: #15301e;\n  border-color: #15301e;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.btn-sm {\n  line-height: 16px;\n}\n.filterpanel-buttons .apply-button.btn-sm dso-icon,\n.filterpanel-buttons .apply-button.btn-sm svg.di, .filterpanel-buttons .apply-button.btn-sm.extern::after, .filterpanel-buttons .apply-button.btn-sm.download::after, .filterpanel-buttons .apply-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.download::after {\n  background: var(--dso-icon, var(--di-download-wit)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\n.filterpanel-buttons .apply-button.extern::after {\n  background: var(--dso-icon, var(--di-external-link-wit)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n  margin-left: 16px;\n}";
+const viewerGridCss = "button {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\nh1,\n.h1,\nh2,\n.h2,\nh3,\n.h3 {\n  margin-bottom: 16px;\n  margin-top: 24px;\n}\n\nh1,\n.h1 {\n  line-height: 1.25;\n}\n\nh1 {\n  color: #275937;\n  font-size: 2rem;\n  font-weight: 700;\n}\n\nh2,\n.h2 {\n  line-height: 1.33;\n}\n\nh2 {\n  color: #275937;\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n\nh3,\n.h3 {\n  line-height: 1.2;\n}\n\nh3 {\n  color: #275937;\n  font-size: 1.25rem;\n  font-weight: 600;\n}\n\nh4,\n.h4,\nh5,\n.h5,\nh6,\n.h6 {\n  margin-bottom: 16px;\n  margin-top: 12px;\n}\n\nh4,\n.h4 {\n  line-height: 1.5;\n}\n\nh4 {\n  color: #275937;\n  font-size: 1rem;\n  font-weight: 600;\n}\n\nh5,\n.h5 {\n  line-height: 1.5;\n}\n\nh5 {\n  color: #191919;\n  font-size: 1rem;\n  font-weight: 600;\n}\n\nh6,\n.h6 {\n  line-height: 1.5;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  height: 100vh;\n  overflow: hidden;\n  position: relative;\n}\n\n:host([small]) .dso-map-panel {\n  flex-basis: 375px;\n  min-width: 0;\n  max-width: 375px;\n}\n@media screen and (max-width: 375px) {\n  :host([small]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 0;\n    transition: none;\n  }\n}\n\n:host([medium]) .dso-map-panel {\n  flex-basis: 624px;\n  min-width: 375px;\n  max-width: 624px;\n}\n@media screen and (max-width: 624px) {\n  :host([medium]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 375px;\n    transition: none;\n  }\n}\n\n:host([large]) .dso-map-panel {\n  flex-basis: 60%;\n  min-width: 768px;\n  max-width: 1024px;\n}\n@media screen and (max-width: 768px) {\n  :host([large]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 768px;\n    transition: none;\n  }\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n  outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n  outline: 0;\n}\n.shrink.extern::after, .shrink.download::after,\n.expand.extern::after,\n.expand.download::after,\n.overlay-close-button.extern::after,\n.overlay-close-button.download::after {\n  content: \"\";\n  display: inline-block;\n  height: 1.5em;\n  margin-left: 8px;\n  vertical-align: top;\n  width: 1.5em;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n  color: #676cb0;\n  text-decoration: underline;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n  color: #676cb0;\n}\n.shrink.btn-align,\n.expand.btn-align,\n.overlay-close-button.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.shrink.extern::after, .shrink.download::after,\n.expand.extern::after,\n.expand.download::after,\n.overlay-close-button.extern::after,\n.overlay-close-button.download::after {\n  position: relative;\n  top: -2px;\n}\n.shrink.download::after,\n.expand.download::after,\n.overlay-close-button.download::after {\n  background: var(--dso-icon, var(--di-download)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\n.shrink.download[disabled]::after,\n.expand.download[disabled]::after,\n.overlay-close-button.download[disabled]::after {\n  --dso-icon: var(--di-download-grasgroen-40);\n}\n.shrink.download:not([disabled]):hover::after, .shrink.download:not([disabled]):active::after,\n.expand.download:not([disabled]):hover::after,\n.expand.download:not([disabled]):active::after,\n.overlay-close-button.download:not([disabled]):hover::after,\n.overlay-close-button.download:not([disabled]):active::after {\n  --dso-icon: var(--di-download-scampi);\n}\n.shrink.extern::after,\n.expand.extern::after,\n.overlay-close-button.extern::after {\n  background: var(--dso-icon, var(--di-external-link)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\n.shrink.extern[disabled]::after,\n.expand.extern[disabled]::after,\n.overlay-close-button.extern[disabled]::after {\n  --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.shrink.extern:not([disabled]):hover::after, .shrink.extern:not([disabled]):active::after,\n.expand.extern:not([disabled]):hover::after,\n.expand.extern:not([disabled]):active::after,\n.overlay-close-button.extern:not([disabled]):hover::after,\n.overlay-close-button.extern:not([disabled]):active::after {\n  --dso-icon: var(--di-external-link-scampi);\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n  vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n  cursor: pointer;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  display: none;\n}\n\n.overlay-close-button {\n  position: absolute;\n  top: 8px;\n  right: 16px;\n}\n\n.dso-map-panel {\n  background-color: #fff;\n  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  flex-shrink: 0;\n  flex-grow: 0;\n  padding-right: 8px;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;\n  z-index: 100;\n}\n.dso-map-panel .dso-filterblok-address {\n  font-weight: bold;\n  margin: 8px 0;\n}\n.dso-map-panel .main {\n  height: 100%;\n  overflow-y: scroll;\n  padding: 8px 16px;\n}\n\n.sizing-buttons {\n  left: calc(100% + 1px);\n  overflow-x: hidden;\n  padding: 0 4px 4px 0;\n  position: absolute;\n  top: 16px;\n  transition: left 200ms ease-in;\n  width: 44px;\n  z-index: -1;\n}\n.sizing-buttons button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-bottom-right-radius: 4px;\n  border-top-right-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.sizing-buttons button:active {\n  outline: 0;\n}\n.sizing-buttons button.extern::after, .sizing-buttons button.download::after {\n  content: \"\";\n  display: inline-block;\n  height: 1.5em;\n  margin-left: 8px;\n  vertical-align: top;\n  width: 1.5em;\n}\n.sizing-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.sizing-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.sizing-buttons button.btn-sm {\n  line-height: 1rem;\n}\n.sizing-buttons button.btn-sm dso-icon,\n.sizing-buttons button.btn-sm svg.di, .sizing-buttons button.btn-sm.extern::after, .sizing-buttons button.btn-sm.download::after, .sizing-buttons button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.download::after {\n  background: var(--dso-icon, var(--di-download)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\n.sizing-buttons button.download:hover::after {\n  --dso-icon: var(--di-download-wit);\n}\n.sizing-buttons button.download[disabled]::after {\n  --dso-icon: var(--di-download-grasgroen-40);\n}\n.sizing-buttons button.extern::after {\n  background: var(--dso-icon, var(--di-external-link)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\n.sizing-buttons button.extern:hover::after {\n  --dso-icon: var(--di-external-link-wit);\n}\n.sizing-buttons button.extern[disabled]::after {\n  --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.sizing-buttons button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.sizing-buttons button:hover dso-icon {\n  color: #fff;\n}\n\n.map {\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n#filterpanel,\n.overlay {\n  background-color: #fff;\n  height: 100%;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 101;\n}\n\n#filterpanel {\n  box-shadow: 2px 0 5px #666;\n  padding: 40px 16px 8px;\n  left: 0;\n  max-width: 896px;\n  width: calc(100vw - 40px);\n}\n@media screen and (max-width: 768px) {\n  #filterpanel {\n    width: 100vw;\n  }\n  #filterpanel::before {\n    display: none !important;\n  }\n}\n#filterpanel::before {\n  content: \"\";\n  display: block;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 896px;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 936px) {\n  #filterpanel::before {\n    left: auto;\n    width: 40px;\n  }\n}\n\n.overlay {\n  box-shadow: -2px 0 5px #666;\n  padding: 40px 16px 8px;\n  right: 0;\n  width: 624px;\n}\n@media screen and (max-width: 624px) {\n  .overlay {\n    width: 100vw;\n  }\n}\n.overlay::before {\n  content: \"\";\n  display: block;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 624px;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n\n.filterpanel-buttons {\n  text-align: right;\n}\n.filterpanel-buttons .cancel-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after {\n  content: \"\";\n  display: inline-block;\n  height: 1.5em;\n  margin-left: 8px;\n  vertical-align: top;\n  width: 1.5em;\n}\n.filterpanel-buttons .cancel-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.btn-sm {\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.btn-sm dso-icon,\n.filterpanel-buttons .cancel-button.btn-sm svg.di, .filterpanel-buttons .cancel-button.btn-sm.extern::after, .filterpanel-buttons .cancel-button.btn-sm.download::after, .filterpanel-buttons .cancel-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.download::after {\n  background: var(--dso-icon, var(--di-download)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\n.filterpanel-buttons .cancel-button.download:hover::after {\n  --dso-icon: var(--di-download-wit);\n}\n.filterpanel-buttons .cancel-button.download[disabled]::after {\n  --dso-icon: var(--di-download-grasgroen-40);\n}\n.filterpanel-buttons .cancel-button.extern::after {\n  background: var(--dso-icon, var(--di-external-link)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\n.filterpanel-buttons .cancel-button.extern:hover::after {\n  --dso-icon: var(--di-external-link-wit);\n}\n.filterpanel-buttons .cancel-button.extern[disabled]::after {\n  --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after {\n  content: \"\";\n  display: inline-block;\n  height: 1.5em;\n  margin-left: 8px;\n  vertical-align: top;\n  width: 1.5em;\n}\n.filterpanel-buttons .apply-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n  background-color: #15301e;\n  border-color: #15301e;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.btn-sm {\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.btn-sm dso-icon,\n.filterpanel-buttons .apply-button.btn-sm svg.di, .filterpanel-buttons .apply-button.btn-sm.extern::after, .filterpanel-buttons .apply-button.btn-sm.download::after, .filterpanel-buttons .apply-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.download::after {\n  background: var(--dso-icon, var(--di-download-wit)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\n.filterpanel-buttons .apply-button.extern::after {\n  background: var(--dso-icon, var(--di-external-link-wit)) no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n  margin-left: 16px;\n}";
 
 const TRANSITION_TIME = 200; // Keep in sync with dso-viewer-grid.variables.scss:$dso-viewer-grid-transition-time;
 let ViewerGrid = class {
@@ -19,6 +19,11 @@ let ViewerGrid = class {
     this.filterpanelCancel = createEvent(this, "filterpanelCancel", 7);
     this.filterpanelApply = createEvent(this, "filterpanelApply", 7);
     this.mainSizeChange = createEvent(this, "mainSizeChange", 7);
+    this.sizeLabelMap = {
+      small: 'smal',
+      medium: 'middel',
+      large: 'breed',
+    };
     this.filterpanelOpen = false;
     this.overlayOpen = false;
     /**
@@ -29,10 +34,10 @@ let ViewerGrid = class {
     this.filterpanelSlot = null;
     this.overlaySlot = null;
     this.shrinkMain = () => {
-      this.mainSize = this.mainSize == "large" ? "medium" : "small";
+      this.mainSize = this.mainSize === 'large' ? 'medium' : 'small';
     };
     this.expandMain = () => {
-      this.mainSize = this.mainSize == "small" ? "medium" : "large";
+      this.mainSize = this.mainSize === 'small' ? 'medium' : 'large';
     };
     this.keyDownListener = (event) => {
       if (event.key != "Escape") {
@@ -116,7 +121,7 @@ let ViewerGrid = class {
     this.filterpanelCancel.emit({ originalEvent: mouseEvent });
   }
   render() {
-    return (h(Host, Object.assign({}, { [this.mainSize]: true }), h("div", { class: "dso-map-panel" }, h("div", { class: "sizing-buttons" }, h("button", { type: "button", class: "shrink", disabled: this.mainSize == "small", onClick: this.shrinkMain }, h("dso-icon", { icon: "chevron-left" })), h("button", { type: "button", class: "expand", disabled: this.mainSize == "large", onClick: this.expandMain }, h("dso-icon", { icon: "chevron-right" }))), h("div", { class: "main" }, h("slot", { name: "main" }))), h("div", { id: "filterpanel", hidden: !this.filterpanelOpen || !this.filterpanelSlot, ref: (element) => this.filterpanel = element }, h("h2", null, "Uw keuzes"), h(ViewerGridFilterpanelButtons, { onApply: e => this.handleFilterpanelApply(e), onCancel: e => this.handleFilterpanelCancel(e) }), h("slot", { name: "filterpanel" }), h(ViewerGridFilterpanelButtons, { onApply: e => this.handleFilterpanelApply(e), onCancel: e => this.handleFilterpanelCancel(e) })), h("div", { class: "map" }, h("slot", { name: "map" })), h("div", { class: "overlay", hidden: !this.overlayOpen || !this.overlaySlot, ref: (element) => (this.overlay = element) }, h("button", { type: "button", class: "overlay-close-button", onClick: (e) => this.closeOverlay.emit(e) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")), h("slot", { name: "overlay" }))));
+    return (h(Host, Object.assign({}, { [this.mainSize]: true }), h("div", { class: "dso-map-panel" }, h("div", { class: "sizing-buttons" }, h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "breedte tekstpaneel: ", this.sizeLabelMap[this.mainSize]), h("button", { type: "button", class: "shrink", disabled: this.mainSize == "small", onClick: this.shrinkMain }, h("dso-icon", { icon: "chevron-left" })), h("button", { type: "button", class: "expand", disabled: this.mainSize == "large", onClick: this.expandMain }, h("dso-icon", { icon: "chevron-right" }))), h("div", { class: "main" }, h("slot", { name: "main" }))), h("div", { id: "filterpanel", hidden: !this.filterpanelOpen || !this.filterpanelSlot, ref: (element) => this.filterpanel = element }, h("h2", null, "Uw keuzes"), h(ViewerGridFilterpanelButtons, { onApply: e => this.handleFilterpanelApply(e), onCancel: e => this.handleFilterpanelCancel(e) }), h("slot", { name: "filterpanel" }), h(ViewerGridFilterpanelButtons, { onApply: e => this.handleFilterpanelApply(e), onCancel: e => this.handleFilterpanelCancel(e) })), h("div", { class: "map" }, h("slot", { name: "map" })), h("div", { class: "overlay", hidden: !this.overlayOpen || !this.overlaySlot, ref: (element) => (this.overlay = element) }, h("button", { type: "button", class: "overlay-close-button", onClick: (e) => this.closeOverlay.emit(e) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")), h("slot", { name: "overlay" }))));
   }
   get host() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-header",[[1,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-image-overlay",[[1,"dso-image-overlay",{"active":[32],"focused":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-badge",[[1,"dso-badge",{"status":[1]}]]],["dso-banner",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[516],"state":[32]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon",[[1,"dso-icon",{"icon":[1]}]]]], options);
+  return bootstrapLazy([["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-header",[[1,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32],"labelText":[32]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-image-overlay",[[1,"dso-image-overlay",{"active":[32],"focused":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-badge",[[1,"dso-badge",{"status":[1]}]]],["dso-banner",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"setFocus":[64]}]]],["dso-info_2",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon",[[1,"dso-icon",{"icon":[1]}]]]], options);
   });
 };
 

package/dist/types/components/alert/alert.template.d.ts

@@ -1,4 +1,3 @@
-import { Alert, AlertWithHeadingsContent } from '@dso-toolkit/sources';
+import { Alert } from '@dso-toolkit/sources';
 import { TemplateResult } from 'lit-html';
 export declare function alertTemplate({ status, message, onClick, withRoleAlert }: Alert<TemplateResult>): TemplateResult<1>;
-export declare function alertWithHeadingsTemplate({ h2, h3, h4, h5, h6, content }: AlertWithHeadingsContent): TemplateResult<1>;

package/dist/types/components/autosuggest/autosuggest.d.ts

@@ -30,6 +30,10 @@ export declare class Autosuggest {
    * To override progress indicator's default loading label.
    */
   loadingLabel?: string;
+  /**
+   * To delay progress indicator showing (in ms).
+   */
+  loadingDelayed?: number;
   /**
    * To show text when no results are found.
    */
@@ -56,13 +60,19 @@ export declare class Autosuggest {
   showSuggestions: boolean;
   selectedSuggestion: Suggestion | undefined;
   notFound: boolean;
+  showLoading: boolean;
   suggestionsWatcher(): void;
   input: HTMLInputElement;
   listbox: HTMLUListElement | undefined;
   listboxId: string;
   inputId: string;
   labelId: string;
-  debouncedEmitValue: ((value: string) => CustomEvent<string>) & {
+  debouncedEmitValue: ((value: string) => void) & {
+    clear(): void;
+  } & {
+    flush(): void;
+  };
+  debouncedShowLoading: (() => void) & {
     clear(): void;
   } & {
     flush(): void;

package/dist/types/components/autosuggest/autosuggest.template.d.ts

@@ -1,3 +1,3 @@
 import { Autosuggest } from '@dso-toolkit/sources';
 import { TemplateResult } from 'lit-html';
-export declare function autosuggestTemplate({ suggestions, onSelect, onChange, onSearch, suggestOnFocus, loading, loadingLabel, notFoundLabel }: Autosuggest, children: TemplateResult): TemplateResult<1>;
+export declare function autosuggestTemplate({ suggestions, onSelect, onChange, onSearch, suggestOnFocus, loading, loadingLabel, loadingDelayed, notFoundLabel }: Autosuggest, children: TemplateResult): TemplateResult<1>;

package/dist/types/components/date-picker/date-picker.template.d.ts

@@ -1,5 +1,2 @@
 import { DatePicker } from '@dso-toolkit/sources';
-import { TemplateResult } from 'lit-html';
-export declare function datePickerTemplate({ id, onDateChange, value, min, max, disabled, autofocus, direction }: DatePicker): TemplateResult<1>;
-export declare function datePickerWithLabelTemplate(datePicker: TemplateResult, id: string, label: string): TemplateResult<1>;
-export declare function datePickerShowByScriptingTemplate(datePicker: TemplateResult, id: string): TemplateResult<1>;
+export declare function datePickerTemplate({ id, onDateChange, value, min, max, disabled, autofocus, direction }: DatePicker): import("lit-html").TemplateResult<1>;

package/dist/types/components/dropdown-menu/dropdown-menu.template.d.ts

@@ -1,3 +1,2 @@
 import { DropdownMenu } from "@dso-toolkit/sources";
-import { TemplateResult } from "lit-html";
-export declare function dropdownMenuTemplate({ id, button, dropdownAlign, isCheckable, children }: DropdownMenu<TemplateResult>): TemplateResult<1>;
+export declare function dropdownMenuTemplate({ id, button, dropdownAlign, isCheckable, groups }: DropdownMenu): import("lit-html").TemplateResult<1>;