@dso-toolkit/core 38.0.0 → 38.1.0

package/dist/cjs/dso-dropdown-menu.cjs.entry.js

@@ -68,14 +68,6 @@ let DropdownMenu = class {
   get tabbables() {
     return index_esm.tabbable(this.host).filter((e) => e !== this.button);
   }
-  openWatch(open) {
-    if (open) {
-      this.openPopup();
-    }
-    else {
-      this.closePopup();
-    }
-  }
   connectedCallback() {
     this.button.setAttribute("aria-haspopup", "menu");
     this.button.setAttribute("aria-expanded", "false");
@@ -97,9 +89,6 @@ let DropdownMenu = class {
         li.setAttribute("role", "none");
       }
     }
-    if (this.open) {
-      this.openPopup();
-    }
   }
   componentDidRender() {
     for (const li of Array.from(this.host.getElementsByTagName("li"))) {
@@ -113,20 +102,17 @@ let DropdownMenu = class {
         }
       }
     }
-  }
-  openPopup() {
-    this.host.setAttribute("tabindex", "-1");
-    this.host.addEventListener("keydown", this.keyDownListener);
-    this.host.addEventListener("focusout", this.focusOutListener);
-    this.button.setAttribute("aria-expanded", "true");
-    this.tabbables.forEach((tabbable) => tabbable.addEventListener("click", this.escape));
-  }
-  closePopup() {
     this.host.removeEventListener("keydown", this.keyDownListener);
-    this.host.removeEventListener("focusout", this.focusOutListener);
-    this.button.setAttribute("aria-expanded", "false");
-    this.host.removeAttribute("tabindex");
-    this.tabbables.forEach((tabbable) => tabbable.removeEventListener("click", this.escape));
+    this.button.setAttribute("aria-expanded", this.open ? "true" : "false");
+    if (this.open) {
+      this.host.addEventListener("keydown", this.keyDownListener);
+    }
+    this.tabbables.forEach((tabbable) => {
+      tabbable.removeEventListener("click", this.escape);
+      if (this.open) {
+        tabbable.addEventListener("click", this.escape);
+      }
+    });
   }
   getActiveElement(root = document) {
     const activeEl = root.activeElement;
@@ -153,12 +139,9 @@ let DropdownMenu = class {
     tabs[nextIndex].focus();
   }
   render() {
-    return (index.h(index.Fragment, null, index.h("slot", { name: "toggle" }), index.h("div", { hidden: !this.open }, index.h("slot", null))));
+    return (index.h(index.Host, { onFocusout: this.focusOutListener, tabindex: this.open ? "-1" : undefined }, index.h("slot", { name: "toggle" }), index.h("div", { hidden: !this.open }, index.h("slot", null))));
   }
   get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "open": ["openWatch"]
-  }; }
 };
 DropdownMenu.style = dropdownMenuCss;
 

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0a7c679a.js');
+const index_esm = require('./index.esm-3520a2a6.js');
 
 function getNodeName(node) {
   if (node instanceof Element) {
@@ -352,12 +353,13 @@ class Mapper {
   }
 }
 
-const ozonContentCss = ".sc-dso-ozon-content-h:not([inline]){display:block}[inline].sc-dso-ozon-content-h{display:inline}[deleted].sc-dso-ozon-content-h *.sc-dso-ozon-content{text-decoration:line-through !important}.deleted-start.sc-dso-ozon-content,.deleted-end.sc-dso-ozon-content{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button.toggle-note.sc-dso-ozon-content{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;border:0;color:#39870c;line-height:1;padding:0;background-color:transparent}button.toggle-note.sc-dso-ozon-content:focus,button.toggle-note.sc-dso-ozon-content:focus-visible{outline-offset:2px}button.toggle-note.sc-dso-ozon-content:active{outline:0}button.toggle-note.extern.sc-dso-ozon-content::after,button.toggle-note.download.sc-dso-ozon-content::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}button.toggle-note[disabled].sc-dso-ozon-content{color:#afcf9d}button.toggle-note.sc-dso-ozon-content:not([disabled]):hover{color:#676cb0;text-decoration:underline}button.toggle-note.sc-dso-ozon-content:not([disabled]):active{color:#676cb0}button.toggle-note.btn-align.sc-dso-ozon-content{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}button.toggle-note.extern.sc-dso-ozon-content::after,button.toggle-note.download.sc-dso-ozon-content::after{position:relative;top:-2px}button.toggle-note.download.sc-dso-ozon-content::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}button.toggle-note.download[disabled].sc-dso-ozon-content::after{--dso-icon:var(--di-download-grasgroen-40)}button.toggle-note.download.sc-dso-ozon-content:not([disabled]):hover::after,button.toggle-note.download.sc-dso-ozon-content:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}button.toggle-note.extern.sc-dso-ozon-content::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}button.toggle-note.extern[disabled].sc-dso-ozon-content::after{--dso-icon:var(--di-external-link-grasgroen-40)}button.toggle-note.extern.sc-dso-ozon-content:not([disabled]):hover::after,button.toggle-note.extern.sc-dso-ozon-content:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}button.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{margin-left:8px}button.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{vertical-align:middle}span[role=section].sc-dso-ozon-content,span[role=paragraph].sc-dso-ozon-content{display:block}.fallback.sc-dso-ozon-content{display:block}.od-Term.sc-dso-ozon-content{font-weight:700}.od-Definitie.sc-dso-ozon-content,.od-Tussenkop.sc-dso-ozon-content{font-style:italic}.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{display:inline}.od-Al.sc-dso-ozon-content,.od-Lijstaanhef.sc-dso-ozon-content{margin-bottom:0.75em}.od-IntIoRef.sc-dso-ozon-content{border-bottom:1px dotted}.od-LiNummer.sc-dso-ozon-content{float:left;min-width:0.7em;padding-right:0.3em;text-align:right}.od-Figuur.sc-dso-ozon-content img.sc-dso-ozon-content{margin-left:25px;max-width:100%;height:auto}.od-Figuur.sc-dso-ozon-content .od-Bijschrift.sc-dso-ozon-content{font-size:0.75rem;margin-left:25px;padding-bottom:2.5rem}.od-Tabel.sc-dso-ozon-content thead.sc-dso-ozon-content{font-weight:600}.od-Kadertekst.sc-dso-ozon-content{border:1px solid #e5e5e5;margin-bottom:1rem;padding:1rem}";
+const ozonContentCss = ".sc-dso-ozon-content-h:not([inline]){display:block}[inline].sc-dso-ozon-content-h{display:inline}[deleted].sc-dso-ozon-content-h *.sc-dso-ozon-content{text-decoration:line-through !important}[interactive].sc-dso-ozon-content-h{background-color:transparent;color:#39870c;text-decoration:underline;cursor:pointer}[interactive].sc-dso-ozon-content-h:hover,[interactive].sc-dso-ozon-content-h:focus{color:#676cb0;text-decoration:underline}[interactive].sc-dso-ozon-content-h:active{text-decoration:none}.deleted-start.sc-dso-ozon-content,.deleted-end.sc-dso-ozon-content{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button.toggle-note.sc-dso-ozon-content{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;border:0;color:#39870c;line-height:1;padding:0;background-color:transparent}button.toggle-note.sc-dso-ozon-content:focus,button.toggle-note.sc-dso-ozon-content:focus-visible{outline-offset:2px}button.toggle-note.sc-dso-ozon-content:active{outline:0}button.toggle-note.extern.sc-dso-ozon-content::after,button.toggle-note.download.sc-dso-ozon-content::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}button.toggle-note[disabled].sc-dso-ozon-content{color:#afcf9d}button.toggle-note.sc-dso-ozon-content:not([disabled]):hover{color:#676cb0;text-decoration:underline}button.toggle-note.sc-dso-ozon-content:not([disabled]):active{color:#676cb0}button.toggle-note.btn-align.sc-dso-ozon-content{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}button.toggle-note.extern.sc-dso-ozon-content::after,button.toggle-note.download.sc-dso-ozon-content::after{position:relative;top:-2px}button.toggle-note.download.sc-dso-ozon-content::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}button.toggle-note.download[disabled].sc-dso-ozon-content::after{--dso-icon:var(--di-download-grasgroen-40)}button.toggle-note.download.sc-dso-ozon-content:not([disabled]):hover::after,button.toggle-note.download.sc-dso-ozon-content:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}button.toggle-note.extern.sc-dso-ozon-content::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}button.toggle-note.extern[disabled].sc-dso-ozon-content::after{--dso-icon:var(--di-external-link-grasgroen-40)}button.toggle-note.extern.sc-dso-ozon-content:not([disabled]):hover::after,button.toggle-note.extern.sc-dso-ozon-content:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}button.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{margin-left:8px}button.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{vertical-align:middle}span[role=section].sc-dso-ozon-content,span[role=paragraph].sc-dso-ozon-content{display:block}.fallback.sc-dso-ozon-content{display:block}.od-Term.sc-dso-ozon-content{font-weight:700}.od-Definitie.sc-dso-ozon-content,.od-Tussenkop.sc-dso-ozon-content{font-style:italic}.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{display:inline}.od-Al.sc-dso-ozon-content,.od-Lijstaanhef.sc-dso-ozon-content{margin-bottom:0.75em}.od-IntIoRef.sc-dso-ozon-content{border-bottom:1px dotted}.od-LiNummer.sc-dso-ozon-content{float:left;min-width:0.7em;padding-right:0.3em;text-align:right}.od-Figuur.sc-dso-ozon-content img.sc-dso-ozon-content{margin-left:25px;max-width:100%;height:auto}.od-Figuur.sc-dso-ozon-content .od-Bijschrift.sc-dso-ozon-content{font-size:0.75rem;margin-left:25px;padding-bottom:2.5rem}.od-Tabel.sc-dso-ozon-content thead.sc-dso-ozon-content{font-weight:600}.od-Kadertekst.sc-dso-ozon-content{border:1px solid #e5e5e5;margin-bottom:1rem;padding:1rem}";
 
 let OzonContent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.anchorClick = index.createEvent(this, "anchorClick", 7);
+    this.dsoClick = index.createEvent(this, "dsoClick", 7);
     /**
      * Setting this property creates dso-ozon-content as inline element instead of a block element.
      */
@@ -366,9 +368,25 @@ let OzonContent = class {
      * Marks content as deleted using visual and accessible clues.
      */
     this.deleted = false;
+    /**
+     * Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.
+     *
+     * **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.
+     */
+    this.interactive = false;
     this.state = {};
     this.mapper = new Mapper();
   }
+  handleHostOnClick(e) {
+    if (!this.interactive) {
+      return;
+    }
+    const doIt = e.composedPath().find(e => e === this.host || (e instanceof HTMLElement && index_esm.isTabbable(e))) === this.host;
+    if (doIt) {
+      this.dsoClick.emit({ originalEvent: e });
+    }
+  }
   render() {
     var _a;
     const context = {
@@ -380,8 +398,9 @@ let OzonContent = class {
     if (this.deleted) {
       return (index.h("section", null, index.h("span", { class: "deleted-start" }, "Begin verwijderd element"), transformed, index.h("span", { class: "deleted-end" }, "Einde verwijderd element")));
     }
-    return transformed;
+    return (index.h(index.Host, { onClick: (e) => this.handleHostOnClick(e) }, transformed));
   }
+  get host() { return index.getElement(this); }
 };
 OzonContent.style = ozonContentCss;
 

package/dist/cjs/dso-toolkit.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(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-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["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],"visible":[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-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],"inline":[516],"deleted":[516],"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-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["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);
+  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-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["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],"visible":[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"],"initialMainSize":[1,"initial-main-size"],"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-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],"inline":[516],"deleted":[516],"interactive":[516],"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-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["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/cjs/dso-viewer-grid.cjs.entry.js

@@ -25,7 +25,11 @@ let ViewerGrid = class {
     this.mainSizeChange = index.createEvent(this, "mainSizeChange", 7);
     this.filterpanelOpen = false;
     this.overlayOpen = false;
-    this.mainSize = "large";
+    /**
+     * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.
+     */
+    this.initialMainSize = "large";
+    this.mainSize = this.initialMainSize;
     this.filterpanelSlot = null;
     this.overlaySlot = null;
     this.shrinkMain = () => {

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-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["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],"visible":[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-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],"inline":[516],"deleted":[516],"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-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["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);
+  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-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["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],"visible":[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"],"initialMainSize":[1,"initial-main-size"],"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-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],"inline":[516],"deleted":[516],"interactive":[516],"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-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["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/components/dropdown-menu/dropdown-menu.js

@@ -1,4 +1,4 @@
-import { Component, h, Prop, Watch, Element, Fragment } from "@stencil/core";
+import { Component, h, Prop, Element, Host } from "@stencil/core";
 import { tabbable } from "tabbable";
 import { v4 as uuidv4 } from "uuid";
 export class DropdownMenu {
@@ -60,14 +60,6 @@ export class DropdownMenu {
   get tabbables() {
     return tabbable(this.host).filter((e) => e !== this.button);
   }
-  openWatch(open) {
-    if (open) {
-      this.openPopup();
-    }
-    else {
-      this.closePopup();
-    }
-  }
   connectedCallback() {
     this.button.setAttribute("aria-haspopup", "menu");
     this.button.setAttribute("aria-expanded", "false");
@@ -89,9 +81,6 @@ export class DropdownMenu {
         li.setAttribute("role", "none");
       }
     }
-    if (this.open) {
-      this.openPopup();
-    }
   }
   componentDidRender() {
     for (const li of Array.from(this.host.getElementsByTagName("li"))) {
@@ -105,20 +94,17 @@ export class DropdownMenu {
         }
       }
     }
-  }
-  openPopup() {
-    this.host.setAttribute("tabindex", "-1");
-    this.host.addEventListener("keydown", this.keyDownListener);
-    this.host.addEventListener("focusout", this.focusOutListener);
-    this.button.setAttribute("aria-expanded", "true");
-    this.tabbables.forEach((tabbable) => tabbable.addEventListener("click", this.escape));
-  }
-  closePopup() {
     this.host.removeEventListener("keydown", this.keyDownListener);
-    this.host.removeEventListener("focusout", this.focusOutListener);
-    this.button.setAttribute("aria-expanded", "false");
-    this.host.removeAttribute("tabindex");
-    this.tabbables.forEach((tabbable) => tabbable.removeEventListener("click", this.escape));
+    this.button.setAttribute("aria-expanded", this.open ? "true" : "false");
+    if (this.open) {
+      this.host.addEventListener("keydown", this.keyDownListener);
+    }
+    this.tabbables.forEach((tabbable) => {
+      tabbable.removeEventListener("click", this.escape);
+      if (this.open) {
+        tabbable.addEventListener("click", this.escape);
+      }
+    });
   }
   getActiveElement(root = document) {
     const activeEl = root.activeElement;
@@ -145,7 +131,7 @@ export class DropdownMenu {
     tabs[nextIndex].focus();
   }
   render() {
-    return (h(Fragment, null,
+    return (h(Host, { onFocusout: this.focusOutListener, tabindex: this.open ? "-1" : undefined },
       h("slot", { name: "toggle" }),
       h("div", { hidden: !this.open },
         h("slot", null))));
@@ -215,8 +201,4 @@ export class DropdownMenu {
     }
   }; }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "open",
-      "methodName": "openWatch"
-    }]; }
 }

package/dist/collection/components/ozon-content/ozon-content.css

@@ -10,6 +10,20 @@
   text-decoration: line-through !important;
 }
 
+:host([interactive]) {
+  background-color: transparent;
+  color: #39870c;
+  text-decoration: underline;
+  cursor: pointer;
+}
+:host([interactive]):hover, :host([interactive]):focus {
+  color: #676cb0;
+  text-decoration: underline;
+}
+:host([interactive]):active {
+  text-decoration: none;
+}
+
 .deleted-start,
 .deleted-end {
   position: absolute;

package/dist/collection/components/ozon-content/ozon-content.js

@@ -1,4 +1,5 @@
-import { h, Component, Event, Prop, State } from '@stencil/core';
+import { h, Component, Element, Event, Prop, State, Host } from '@stencil/core';
+import { isTabbable } from 'tabbable';
 import { Mapper } from './ozon-content-mapper';
 export class OzonContent {
   constructor() {
@@ -10,9 +11,25 @@ export class OzonContent {
      * Marks content as deleted using visual and accessible clues.
      */
     this.deleted = false;
+    /**
+     * Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.
+     *
+     * **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.
+     */
+    this.interactive = false;
     this.state = {};
     this.mapper = new Mapper();
   }
+  handleHostOnClick(e) {
+    if (!this.interactive) {
+      return;
+    }
+    const doIt = e.composedPath().find(e => e === this.host || (e instanceof HTMLElement && isTabbable(e))) === this.host;
+    if (doIt) {
+      this.dsoClick.emit({ originalEvent: e });
+    }
+  }
   render() {
     var _a;
     const context = {
@@ -27,7 +44,7 @@ export class OzonContent {
         transformed,
         h("span", { class: "deleted-end" }, "Einde verwijderd element")));
     }
-    return transformed;
+    return (h(Host, { onClick: (e) => this.handleHostOnClick(e) }, transformed));
   }
   static get is() { return "dso-ozon-content"; }
   static get encapsulation() { return "scoped"; }
@@ -90,6 +107,24 @@ export class OzonContent {
       "attribute": "deleted",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "interactive": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.\n\n**Do not** use this without an accessible companion element! `interactive` is only\nmeant to ease the use of the companion element for mouse/touch users."
+      },
+      "attribute": "interactive",
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
@@ -115,5 +150,26 @@ export class OzonContent {
           }
         }
       }
+    }, {
+      "method": "dsoClick",
+      "name": "dsoClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "These events are only emitted when the component is `interactive`."
+      },
+      "complexType": {
+        "original": "OzonContentClick",
+        "resolved": "OzonContentClick",
+        "references": {
+          "OzonContentClick": {
+            "location": "import",
+            "path": "./ozon-content.interfaces"
+          }
+        }
+      }
     }]; }
+  static get elementRef() { return "host"; }
 }

package/dist/collection/components/ozon-content/ozon-content.template.js

@@ -1,11 +1,14 @@
 import { html } from 'lit-html';
-export function ozonContentTemplate({ content, inline, deleted, onAnchorClick }) {
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+export function ozonContentTemplate({ content, inline, interactive, deleted, onAnchorClick, onClick }) {
   return html `
     <dso-ozon-content
       .content=${content}
       ?inline=${inline}
+      ?interactive=${interactive}
       ?deleted=${deleted}
       @anchorClick=${onAnchorClick}
+      @dsoClick=${ifDefined(interactive ? onClick : undefined)}
     ></dso-ozon-content>
   `;
 }

package/dist/collection/components/selectable/selectable.template.js

@@ -15,7 +15,7 @@ export function selectableTemplate({ type, id, name, label, value, required, inv
       ?checked=${checked}
       ?indeterminate=${indeterminate}
       ?info-fixed=${info === null || info === void 0 ? void 0 : info.fixed}
-      @dsoChange=${(e) => onChange(e.detail)}
+      @dsoChange=${(e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.detail)}
     >
       ${label}
       ${(_a = info === null || info === void 0 ? void 0 : info.richContent) !== null && _a !== void 0 ? _a : nothing}

package/dist/collection/components/viewer-grid/viewer-grid.js

@@ -6,7 +6,11 @@ export class ViewerGrid {
   constructor() {
     this.filterpanelOpen = false;
     this.overlayOpen = false;
-    this.mainSize = "large";
+    /**
+     * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.
+     */
+    this.initialMainSize = "large";
+    this.mainSize = this.initialMainSize;
     this.filterpanelSlot = null;
     this.overlaySlot = null;
     this.shrinkMain = () => {
@@ -163,6 +167,28 @@ export class ViewerGrid {
       "attribute": "overlay-open",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "initialMainSize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "MainSize",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {
+          "MainSize": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Size of the main content panel when component loads. Changing this attribute afterwards has no effect."
+      },
+      "attribute": "initial-main-size",
+      "reflect": false,
+      "defaultValue": "\"large\""
     }
   }; }
   static get states() { return {

package/dist/collection/components/viewer-grid/viewer-grid.template.js

@@ -1,9 +1,11 @@
 import { html } from "lit-html";
-export function viewerGridTemplate({ filterpanel, main, map, overlay, noOverlay, filterpanelOpen, overlayOpen, mainSizeChange, filterpanelApply, filterpanelCancel, closeOverlay, }) {
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+export function viewerGridTemplate({ filterpanel, main, map, overlay, noOverlay, filterpanelOpen, overlayOpen, initialMainSize, mainSizeChange, filterpanelApply, filterpanelCancel, closeOverlay, }) {
   return noOverlay
     ? html `
         <dso-viewer-grid
           ?overlay-open=${overlayOpen}
+          initial-main-size=${ifDefined(initialMainSize)}
           @closeOverlay=${closeOverlay}
         >
           <div slot="main">${main}</div>
@@ -14,6 +16,7 @@ export function viewerGridTemplate({ filterpanel, main, map, overlay, noOverlay,
         <dso-viewer-grid
           ?filterpanel-open=${filterpanelOpen}
           ?overlay-open=${overlayOpen}
+          initial-main-size=${ifDefined(initialMainSize)}
           @mainSizeChange=${mainSizeChange}
           @closeOverlay=${closeOverlay}
           @filterpanelApply=${filterpanelApply}