@dso-toolkit/core 34.1.0 → 35.0.0

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header.cjs",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker.cjs",[[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],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"overlayOpen":[4,"overlay-open"],"mainSize":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"position":[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.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[1,"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]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]]], options);
+  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header.cjs",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker.cjs",[[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],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"focused":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"mainSize":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[2,"dso-ozon-content",{"content":[1],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"position":[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.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[1,"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.cjs",[[1,"dso-icon",{"icon":[1]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -5,6 +5,7 @@
     "./components/header/header.js",
     "./components/info-button/info-button.js",
     "./components/selectable/selectable.js",
+    "./components/viewer-grid/viewer-grid.js",
     "./components/alert/alert.js",
     "./components/attachments-counter/attachments-counter.js",
     "./components/badge/badge.js",
@@ -13,6 +14,7 @@
     "./components/helpcenter-panel/helpcenter-panel.js",
     "./components/highlight-box/highlight-box.js",
     "./components/icon/icon.js",
+    "./components/image-overlay/image-overlay.js",
     "./components/info/info.js",
     "./components/label/label.js",
     "./components/map-base-layers/map-base-layers.js",
@@ -23,8 +25,7 @@
     "./components/progress-indicator/progress-indicator.js",
     "./components/toggletip/toggletip.js",
     "./components/tooltip/tooltip.js",
-    "./components/tree-view/tree-view.js",
-    "./components/viewer-grid/viewer-grid.js"
+    "./components/tree-view/tree-view.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/autosuggest/autosuggest.js

@@ -5,7 +5,11 @@ import escapeStringRegexp from "escape-string-regexp";
 export class Autosuggest {
   constructor() {
     /**
-     * The suggestions for the value of the slotted input element
+     * The suggestions for the value of the slotted input element. Optionally a
+     * Suggestion can have a `type` and `item`.
+     *
+     * The `type` is used to style the suggestion. `item` can be use to reference
+     * the original object that was used to create the suggestion.
      */
     this.suggestions = [];
     /**
@@ -238,7 +242,7 @@ export class Autosuggest {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The suggestions for the value of the slotted input element"
+        "text": "The suggestions for the value of the slotted input element. Optionally a\nSuggestion can have a `type` and `item`.\n\nThe `type` is used to style the suggestion. `item` can be use to reference\nthe original object that was used to create the suggestion."
       },
       "defaultValue": "[]"
     },

package/dist/collection/components/header/header.css

@@ -8,6 +8,8 @@
   border-bottom: 1px solid #ccc;
   display: flex;
   flex-wrap: wrap;
+  padding: 0 16px;
+  position: relative;
 }
 @media screen and (min-width: 768px) {
   .dso-header {
@@ -26,6 +28,14 @@
   padding-bottom: 16px;
   padding-top: 16px;
 }
+@media screen and (max-width: 767px) {
+  .logo-container {
+    max-width: 200px;
+  }
+}
+.logo-container + .dropdown dso-dropdown-menu {
+  position: static;
+}
 
 @media screen and (min-width: 768px) {
   .sub-logo {
@@ -277,11 +287,6 @@ dso-dropdown-menu button::after {
   top: 50%;
   transform: translateY(-50%);
 }
-@media screen and (max-width: 991px) {
-  dso-dropdown-menu[dropdown-align=right] .dso-dropdown-options {
-    right: -16px;
-  }
-}
 @media screen and (max-width: 767px) {
   dso-dropdown-menu {
     top: 12px;
@@ -296,7 +301,7 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul {
 }
 @media screen and (max-width: 991px) {
   dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul {
-    width: 100vw;
+    width: 100%;
   }
 }
 dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a {
@@ -304,6 +309,11 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a {
   font-size: 1.25rem;
   padding: 16px;
 }
+dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a:hover {
+  background-color: #fff;
+  color: #275937;
+  text-decoration: underline;
+}
 dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li.dso-active a {
   font-weight: 600;
 }
@@ -316,16 +326,13 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {
 }
 @media screen and (max-width: 767px) {
   .dropdown dso-dropdown-menu {
-    top: 28px;
+    margin-top: 28px;
   }
 }
 .dropdown dso-dropdown-menu .dso-dropdown-options {
-  top: calc(100% + 29px);
-}
-@media screen and (max-width: 767px) {
-  .dropdown dso-dropdown-menu .dso-dropdown-options {
-    top: 72px;
-  }
+  left: 0;
+  right: 0;
+  top: 100%;
 }
 .dropdown dso-dropdown-menu[open] button::after {
   background: var(--dso-icon, var(--di-chevron-up)) no-repeat;
@@ -339,6 +346,7 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {
   color: #39870c;
   font-size: 16px;
   font-weight: 600;
+  position: relative;
 }
 .dropdown dso-dropdown-menu button:hover, .dropdown dso-dropdown-menu button:active {
   cursor: pointer;

package/dist/collection/components/highlight-box/highlight-box.template.js

@@ -1,5 +1,6 @@
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import { iconTemplate } from '../icon/icon.template';
 export function highlightBoxTemplate({ yellow, white, dropShadow, border, step, icon, richContent }) {
   return html `
@@ -11,7 +12,9 @@ export function highlightBoxTemplate({ yellow, white, dropShadow, border, step,
       ?border=${border}
     >
       ${icon && iconTemplate({ icon }, 'icon')}
-      ${richContent}
+      <div class="dso-rich-content">
+        ${typeof richContent === 'string' ? unsafeHTML(richContent) : richContent}
+      </div>
     </dso-highlight-box>
   `;
 }

package/dist/collection/components/image-overlay/image-overlay.css

@@ -0,0 +1,263 @@
+button {
+  -webkit-appearance: button;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+}
+button[disabled] {
+  cursor: default;
+}
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+:host {
+  display: inline-block;
+  position: relative;
+}
+
+:host(:hover) .open,
+.open:focus {
+  opacity: 1;
+}
+
+.open {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-width: 56px;
+  padding: 11px 15px;
+  border: 0;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+  min-width: auto;
+  padding: 8px;
+  opacity: 0;
+  position: absolute;
+  right: 16px;
+  top: 16px;
+}
+.open:focus, .open:focus-visible {
+  outline-offset: 2px;
+}
+.open:active {
+  outline: 0;
+}
+.open.extern::after, .open.download::after {
+  content: "";
+  display: inline-block;
+  height: 1.5em;
+  margin-left: 8px;
+  vertical-align: top;
+  width: 1.5em;
+}
+.open:hover {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+.open:active {
+  background-color: #275937;
+  border-color: #275937;
+  color: #fff;
+}
+.open[disabled], .open[disabled]:hover {
+  background-color: #fff;
+  border-color: #afcf9d;
+  color: #afcf9d;
+}
+.open.btn-sm {
+  line-height: 16px;
+}
+.open.btn-sm dso-icon,
+.open.btn-sm svg.di, .open.btn-sm.extern::after, .open.btn-sm.download::after {
+  margin-bottom: -4px;
+  margin-top: -4px;
+}
+.open.download::after {
+  background: var(--dso-icon, var(--di-download)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.open.download:hover::after {
+  --dso-icon: var(--di-download-wit);
+}
+.open.download[disabled]::after {
+  --dso-icon: var(--di-download-grasgroen-40);
+}
+.open.extern::after {
+  background: var(--dso-icon, var(--di-external-link)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.open.extern:hover::after {
+  --dso-icon: var(--di-external-link-wit);
+}
+.open.extern[disabled]::after {
+  --dso-icon: var(--di-external-link-grasgroen-40);
+}
+.open > span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.dimmer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  padding: 32px;
+  background-color: rgba(255, 255, 255, 0.8);
+  justify-content: center;
+}
+
+.wrapper {
+  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
+  position: relative;
+  z-index: 20;
+  align-self: center;
+  line-height: 0;
+}
+.wrapper img {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: calc(100vh - 64px);
+}
+
+.close {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-width: 56px;
+  padding: 11px 15px;
+  border: 0;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+  min-width: auto;
+  padding: 8px;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+}
+.close:focus, .close:focus-visible {
+  outline-offset: 2px;
+}
+.close:active {
+  outline: 0;
+}
+.close.extern::after, .close.download::after {
+  content: "";
+  display: inline-block;
+  height: 1.5em;
+  margin-left: 8px;
+  vertical-align: top;
+  width: 1.5em;
+}
+.close:hover {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+.close:active {
+  background-color: #275937;
+  border-color: #275937;
+  color: #fff;
+}
+.close[disabled], .close[disabled]:hover {
+  background-color: #fff;
+  border-color: #afcf9d;
+  color: #afcf9d;
+}
+.close.btn-sm {
+  line-height: 16px;
+}
+.close.btn-sm dso-icon,
+.close.btn-sm svg.di, .close.btn-sm.extern::after, .close.btn-sm.download::after {
+  margin-bottom: -4px;
+  margin-top: -4px;
+}
+.close.download::after {
+  background: var(--dso-icon, var(--di-download)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.close.download:hover::after {
+  --dso-icon: var(--di-download-wit);
+}
+.close.download[disabled]::after {
+  --dso-icon: var(--di-download-grasgroen-40);
+}
+.close.extern::after {
+  background: var(--dso-icon, var(--di-external-link)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.close.extern:hover::after {
+  --dso-icon: var(--di-external-link-wit);
+}
+.close.extern[disabled]::after {
+  --dso-icon: var(--di-external-link-grasgroen-40);
+}
+.close > span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}

package/dist/collection/components/image-overlay/image-overlay.js

@@ -0,0 +1,72 @@
+import { Component, Element, forceUpdate, h, Host, State } from "@stencil/core";
+import { createFocusTrap } from 'focus-trap';
+export class ImageOverlay {
+  constructor() {
+    this.active = false;
+    this.focused = false;
+  }
+  componentDidLoad() {
+    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
+    this.mutationObserver.observe(this.host, {
+      attributes: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+    (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+  }
+  render() {
+    var _a;
+    const { src, alt } = (_a = this.host.querySelector('img')) !== null && _a !== void 0 ? _a : {};
+    return (h(Host, { tabindex: this.focused ? -1 : 0, onFocus: () => {
+        var _a;
+        (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus();
+      } },
+      this.active && src && alt && (h("div", { class: "dimmer", ref: element => this.wrapperElement = element },
+        h("div", { class: "wrapper" },
+          h("img", { src: src, alt: alt }),
+          h("button", { type: "button", class: "close", onClick: () => this.active = false },
+            h("dso-icon", { icon: "times" }),
+            h("span", null, "Sluiten"))))),
+      h("slot", null),
+      h("button", { type: "button", class: "open", ref: element => this.buttonElement = element, onClick: () => this.active = true, onFocus: () => this.focused = true, onBlur: () => this.focused = false },
+        h("dso-icon", { icon: "external-link" }),
+        h("span", null, "Afbeelding vergroot weergeven"))));
+  }
+  componentDidRender() {
+    var _a, _b;
+    if (this.active && this.wrapperElement && !this.trap) {
+      this.trap = createFocusTrap(this.wrapperElement, {
+        escapeDeactivates: true,
+        clickOutsideDeactivates: (e) => {
+          if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {
+            this.active = false;
+            return false;
+          }
+          return true;
+        },
+        setReturnFocus: (_a = this.buttonElement) !== null && _a !== void 0 ? _a : false,
+        onDeactivate: () => this.active = false
+      }).activate();
+    }
+    else if (!this.active && this.trap) {
+      (_b = this.trap) === null || _b === void 0 ? void 0 : _b.deactivate();
+      delete this.trap;
+    }
+  }
+  static get is() { return "dso-image-overlay"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["./image-overlay.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["image-overlay.css"]
+  }; }
+  static get states() { return {
+    "active": {},
+    "focused": {}
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/image-overlay/image-overlay.template.js

@@ -0,0 +1,7 @@
+import { html } from "lit-html";
+import { imageTemplate } from '@dso-toolkit/css/src/components/image/image.template';
+export function imageOverlayTemplate({ image }) {
+  return html `
+    <dso-image-overlay>${imageTemplate(image)}</dso-image-overlay>
+  `;
+}

package/dist/collection/components/info/info.css

@@ -1,3 +1,23 @@
+button {
+  -webkit-appearance: button;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+}
+button[disabled] {
+  cursor: default;
+}
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
 :host {
   --di-times-grijs90: url("data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e");
   display: block;

package/dist/collection/components/map-base-layers/map-base-layers.js

@@ -1,14 +1,29 @@
 import { Component, h, Prop, Event } from '@stencil/core';
 export class MapBaseLayers {
+  constructor() {
+    this.selectableRefs = {};
+  }
   baseLayerChangeHandler(baseLayer) {
     this.baseLayerChange.emit({ activeBaseLayer: baseLayer });
   }
+  componentDidRender() {
+    this.baseLayers
+      .filter(l => { var _a, _b; return !l.disabled && ((_b = (_a = this.previousBaselayers) === null || _a === void 0 ? void 0 : _a.find(p => p.id === l.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
+      .forEach(o => {
+      var _a;
+      (_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
+    });
+    this.previousBaselayers = this.baseLayers;
+  }
   render() {
+    for (const ref in this.selectableRefs) {
+      delete this.selectableRefs[ref];
+    }
     return (h("fieldset", { class: "form-group dso-radios" },
       h("legend", { class: "sr-only" }, "Achtergrond"),
       h("div", { class: "dso-label-container" },
         h("span", { class: "control-label", "aria-hidden": "true" }, "Achtergrond")),
-      h("div", { class: "dso-field-container" }, this.baseLayers.map(baseLayer => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, onDsoChange: () => this.baseLayerChangeHandler(baseLayer) },
+      h("div", { class: "dso-field-container" }, this.baseLayers.map(baseLayer => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, ref: ref => this.selectableRefs[baseLayer.id] = ref, onDsoChange: () => this.baseLayerChangeHandler(baseLayer) },
         baseLayer.name,
         baseLayer.info
           ? h("p", { slot: "info" }, baseLayer.info)

package/dist/collection/components/map-overlays/map-overlays.js

@@ -1,15 +1,30 @@
 import { Component, Event, Prop, h } from '@stencil/core';
 export class MapOverlays {
+  constructor() {
+    this.selectableRefs = {};
+  }
   overlayChangeHandler(overlay, e) {
     const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;
     this.toggleOverlay.emit({ overlay, checked });
   }
+  componentDidRender() {
+    this.overlays
+      .filter(o => { var _a, _b; return !o.disabled && ((_b = (_a = this.previousOverlays) === null || _a === void 0 ? void 0 : _a.find(p => p.id === o.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
+      .forEach(o => {
+      var _a;
+      (_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
+    });
+    this.previousOverlays = this.overlays;
+  }
   render() {
+    for (const ref in this.selectableRefs) {
+      delete this.selectableRefs[ref];
+    }
     return (h("fieldset", { class: "form-group dso-checkboxes" },
       h("legend", { class: "sr-only" }, "Kaartlagen"),
       h("div", { class: "dso-label-container" },
         h("span", { class: "control-label", "aria-hidden": "true" }, "Kaartlagen")),
-      h("div", { class: "dso-field-container" }, this.overlays.map(overlay => (h("dso-selectable", { type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, onDsoChange: e => this.overlayChangeHandler(overlay, e) },
+      h("div", { class: "dso-field-container" }, this.overlays.map(overlay => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, ref: ref => this.selectableRefs[overlay.id] = ref, onDsoChange: e => this.overlayChangeHandler(overlay, e) },
         overlay.name,
         overlay.info
           ? h("p", { slot: "info" }, overlay.info)

package/dist/collection/components/ozon-content/nodes/al.node.js

@@ -0,0 +1,13 @@
+import { h } from '@stencil/core';
+export class OzonContentAlNode {
+  constructor() {
+    this.name = 'Al';
+  }
+  render(node, { mapNodeToJsx, path }) {
+    const nestedAl = path.some(node => node.nodeName === 'Al');
+    const content = mapNodeToJsx(node.childNodes);
+    return nestedAl
+      ? h("span", { role: "paragraph" }, content)
+      : h("p", null, content);
+  }
+}

package/dist/collection/components/ozon-content/nodes/document.node.js

@@ -0,0 +1,9 @@
+import { Fragment, h } from '@stencil/core';
+export class OzonContentDocumentNode {
+  constructor() {
+    this.name = '#document';
+  }
+  render(node, { mapNodeToJsx }) {
+    return h(Fragment, null, mapNodeToJsx(node.childNodes));
+  }
+}

package/dist/collection/components/ozon-content/nodes/ext-ref.node.js

@@ -0,0 +1,15 @@
+import { h } from '@stencil/core';
+export class OzonContentExtRefNode {
+  constructor() {
+    this.name = [
+      'ExtRef',
+      'ExtIoRef'
+    ];
+  }
+  render(node, { mapNodeToJsx }) {
+    var _a;
+    return (h("a", { target: "_blank", rel: "noopener noreferrer", href: (_a = node.getAttribute('ref')) !== null && _a !== void 0 ? _a : undefined },
+      h("span", { class: "sr-only" }, "opent in nieuw venster"),
+      mapNodeToJsx(node.childNodes)));
+  }
+}

package/dist/collection/components/ozon-content/nodes/fallback.node.js

@@ -0,0 +1,10 @@
+import { h } from '@stencil/core';
+export class OzonContentFallbackNode {
+  constructor() {
+    // This name does not match any elements
+    this.name = ['<fallback>'];
+  }
+  render(node, { mapNodeToJsx }) {
+    return (h("span", { class: `fallback od-${node instanceof Element ? node.localName : node.nodeName}` }, mapNodeToJsx(node.childNodes)));
+  }
+}

package/dist/collection/components/ozon-content/nodes/illustratie.node.js

@@ -0,0 +1,13 @@
+import { h } from '@stencil/core';
+export class OzonContentIllustratieNode {
+  constructor() {
+    this.name = [
+      'Illustratie',
+      'InlineTekstAfbeelding'
+    ];
+  }
+  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 }));
+  }
+}