@dso-toolkit/core 85.0.0 → 86.0.0

package/dist/bundle/dso-map-base-layers.js

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-DBWrx_3r.js';
 import { i as i18n } from './p-pxiVAmq4.js';
-import { d as defineCustomElement$6 } from './p-DAPEW-cK.js';
-import { d as defineCustomElement$5 } from './p-BheZWHUU.js';
-import { d as defineCustomElement$4 } from './p-DQhNV0Ly.js';
-import { d as defineCustomElement$3 } from './p-B4kCTpCL.js';
-import { d as defineCustomElement$2 } from './p-DYajyH7D.js';
+import { d as defineCustomElement$6 } from './p-C0EnGYRN.js';
+import { d as defineCustomElement$5 } from './p-BGRoDyj6.js';
+import { d as defineCustomElement$4 } from './p-CAGq_ycS.js';
+import { d as defineCustomElement$3 } from './p-CPgqc4eE.js';
+import { d as defineCustomElement$2 } from './p-DnF8nNXV.js';
 import { v as v4 } from './p-C_akviUd.js';
 
 const translations = {
@@ -53,7 +53,7 @@ const MapBaseLayers = /*@__PURE__*/ proxyCustomElement(class MapBaseLayers exten
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'b4e11afffa1cfeda374e2298e0a127c51733fb9d', class: "form-group dso-radios" }, h("legend", { key: '5d5d9deaa63fd457eca1503f460925ca4e51ba25', class: "sr-only" }, "Achtergrond"), h("div", { key: 'd804f723a44d4085a7e983d2587da5bde72b4fec', class: "dso-label-container" }, h("span", { key: 'da3e550984bbe1b3a055d09100cf3d37cab9fe25', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '419aebdce0570fba7d194c285858c2ced4e416ed', 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, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: 'fbe66fa981184f6797ff8ee67dd4fa32152e0659', class: "form-group dso-radios" }, h("legend", { key: 'fe7c6025c6d6917f10e7d3b90db8791f398d01a2', class: "sr-only" }, "Achtergrond"), h("div", { key: '320f575fe9d8d0826af5dbd72259558c6f036a28', class: "dso-label-container" }, h("span", { key: '19e9dc173d434f9456de8104a29ac572c774f438', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '4b908dfb1e7d4cb6757456c6b5c658740bc99379', 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, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     get host() { return this; }
     static get style() { return mapBaseLayersCss(); }

package/dist/bundle/dso-map-controls.js

@@ -1,8 +1,9 @@
 import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-DBWrx_3r.js';
 import { i as i18n } from './p-pxiVAmq4.js';
-import { d as defineCustomElement$4 } from './p-pLR5tmBg.js';
-import { d as defineCustomElement$3 } from './p-DAPEW-cK.js';
-import { d as defineCustomElement$2 } from './p-F64yBavo.js';
+import { d as defineCustomElement$5 } from './p-r5BYffta.js';
+import { d as defineCustomElement$4 } from './p-C0EnGYRN.js';
+import { d as defineCustomElement$3 } from './p-BGRoDyj6.js';
+import { d as defineCustomElement$2 } from './p-DP6XV8DY.js';
 
 const translations = {
     en: {
@@ -980,28 +981,22 @@ a.dso-tertiary, a.dso-tertiary:visited {
   box-sizing: border-box;
 }
 
-.sr-only {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  border: 0;
-  overflow: hidden;
-  clip-path: rect(0 0 0 0);
-}
-
 :host([open]) {
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
   transform: translateX(-100%);
 }
-:host([open]) .toggle-visibility-button {
+:host([open]) .toggle-visibility-button,
+:host([open]) .toggle-visibility-icon-button {
   display: none;
 }
 :host([open]) .zoom-buttons {
   inset-block-start: 16px;
 }
 
+.toggle-visibility-icon-button {
+  display: none;
+}
+
 .toggle-visibility-button {
   position: absolute;
   inset-inline-end: calc(100% + 56px);
@@ -1046,24 +1041,13 @@ header h2 {
 
 @media screen and (max-width: 767px) {
   button.toggle-visibility-button {
-    block-size: 40px;
-    margin-inline-end: 0;
-    min-inline-size: auto;
-    inset-inline-end: calc(100% + 16px);
-    inline-size: 40px;
-  }
-  button.toggle-visibility-button dso-icon {
-    margin-inline-end: 0;
+    display: none;
   }
-  button.toggle-visibility-button span {
+  .toggle-visibility-icon-button {
+    display: inline-block;
     position: absolute;
-    inline-size: 1px;
-    block-size: 1px;
-    padding: 0;
-    margin: -1px;
-    border: 0;
-    overflow: hidden;
-    clip-path: rect(0 0 0 0);
+    inset-block-start: 16px;
+    inset-inline-end: calc(100% + 16px);
   }
   .zoom-buttons {
     inset-block-start: 72px;
@@ -1086,7 +1070,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _MapControls_closeButtonElement, _MapControls_toggleButtonElement;
+var _MapControls_closeButtonElement, _MapControls_toggleButtonElement, _MapControls_toggleIconButtonElement;
 // Sync with $transition-duration in ./map-controls.scss and map-controls.cy.ts
 const transitionDuration = 300;
 const MapControls = /*@__PURE__*/ proxyCustomElement(class MapControls extends H {
@@ -1107,6 +1091,7 @@ const MapControls = /*@__PURE__*/ proxyCustomElement(class MapControls extends H
         this.text = i18n(() => this.host, translations);
         _MapControls_closeButtonElement.set(this, void 0);
         _MapControls_toggleButtonElement.set(this, void 0);
+        _MapControls_toggleIconButtonElement.set(this, void 0);
     }
     watchOpen(open) {
         if (open) {
@@ -1115,9 +1100,14 @@ const MapControls = /*@__PURE__*/ proxyCustomElement(class MapControls extends H
         }
         else {
             setTimeout(() => {
-                var _a;
+                var _a, _b, _c;
                 this.hideContent = true;
-                (_a = __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")) === null || _a === void 0 ? void 0 : _a.focus();
+                if ((_a = __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")) === null || _a === void 0 ? void 0 : _a.checkVisibility()) {
+                    (_b = __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+                if ((_c = __classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")) === null || _c === void 0 ? void 0 : _c.checkVisibility()) {
+                    __classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f").focus();
+                }
             }, transitionDuration);
         }
     }
@@ -1135,7 +1125,7 @@ const MapControls = /*@__PURE__*/ proxyCustomElement(class MapControls extends H
         });
     }
     render() {
-        return (h(Fragment, { key: '524335d692fdfbaaf7060919b018350cfb02227a' }, h("button", { key: '73236dc19d7a737a433c63c12bc78c74429346c4', type: "button", id: "toggle-visibility-button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '13048c13b65e68b8c9b4f06720997d5464a93c08', icon: "layers" }), h("span", { key: '5b530075e4c3424ab712ebf3eb2676e8529282f8' }, this.text("layersButton"))), h("dso-button-group", { key: '6410b36883686d32a44257e49aa0335371513c14', class: "zoom-buttons", direction: "column" }, h("button", { key: '555763ec8a3f18e25f154e96cd2f0e798e5cf9fd', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'c64e310a910b8152a5db1380931663efe14e0f40', class: "sr-only" }, this.text("zoomIn")), h("dso-icon", { key: 'bd16af8e69a17ea43c99acc806ec5849334c6fdf', icon: "plus" })), h("button", { key: '8b7250ddd0dda081989ac4ee999482cd53fc472f', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: 'c3eb515a6ceee241639e7d4be170d7a624ad7cdc', class: "sr-only" }, this.text("zoomOut")), h("dso-icon", { key: '2c9b0796853d8acdf69037bcc0f27c1a6553cdbc', icon: "minus" }))), h("section", { key: '1b673eb2e40686c4760cbb8a71327e8e52151478', hidden: this.hideContent }, h("header", { key: '6419f5fe83c202e1110fae27339b8c1fbd31b116' }, h("h2", { key: 'cd7186cae05c68a8ef4340ef10ac0ef4010039d4' }, this.text("title")), h("button", { key: '422c6d0b671b8b9618d5a44b144a16bedf243d8f', type: "button", class: "dso-tertiary close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '5ad7d9a46c1b6e92c518a6579c256b3bf5bc500a', class: "sr-only" }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '690f0dff0598dad4a293a789fc1a0169467c8c43', icon: "times" }))), h("dso-scrollable", { key: '47eaf3c3a078bd6a986a760674ec436450f9737f' }, h("div", { key: '41b06e6b50c1e8f09c6ac3ae322c709bf2f8dc10', class: "content" }, h("slot", { key: 'ed5514912e3aea637b67a2caf4b96d955dc75ab9' }))))));
+        return (h(Fragment, { key: '01911c8dc014aaa6f941329c571d1c76b9c1ffee' }, h("dso-icon-button", { key: '64be9ccb531e2aa703b392e86ed5bb510a27fec9', label: this.text("layersButton"), icon: "layers", variant: "map", tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), h("button", { key: '8d48b75032378995d6e30eb3655ad6f6a2a67722', type: "button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '5ab20edbb0ecb20d469282e4e68ff5f3f651152c', icon: "layers" }), h("span", { key: '97ec028d9dbecf0d1457b22c4f4cb12c25ae552d' }, this.text("layersButton"))), h("dso-button-group", { key: '881f8f66b9bc2738bbd3390877e1bde6a22f00c5', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: '18d5f9f00dbd8f07c44911812bf65df3a3c763b1', label: this.text("zoomIn"), icon: "plus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomIn.emit(e.detail.originalEvent), disabled: this.disableZoom === "in" || this.disableZoom === "both" }), h("dso-icon-button", { key: '2e3b7b0981af3629943628f5520d12cc13ae20de', label: this.text("zoomOut"), icon: "minus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomOut.emit(e.detail.originalEvent), disabled: this.disableZoom === "out" || this.disableZoom === "both" })), h("section", { key: '30e38d9be05cd9a13d8700ba8d3ae7abb40ff43c', hidden: this.hideContent }, h("header", { key: 'ad89e7561ebbb63d3d96f2698d39b742593e1411' }, h("h2", { key: '595b97288aa443385d6bff2af57e8334dab6fb3b' }, this.text("title")), h("dso-icon-button", { key: '0d08846e6c4d339715a9ba44a11b4b4f049aa18b', class: "close-button", label: this.text("hidePanel", { title: this.text("title") }), icon: "times", variant: "tertiary", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) })), h("dso-scrollable", { key: '8b58ee957121f17e453b03bdd4a4cd22476f3148' }, h("div", { key: '95240b301aaf18d7586a016306d7dc5891a0eb2f', class: "content" }, h("slot", { key: '18e6a37a46075604f942cbf20fe80536e91fda43' }))))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -1150,12 +1140,12 @@ const MapControls = /*@__PURE__*/ proxyCustomElement(class MapControls extends H
     }, undefined, {
         "open": ["watchOpen"]
     }]);
-_MapControls_closeButtonElement = new WeakMap(), _MapControls_toggleButtonElement = new WeakMap();
+_MapControls_closeButtonElement = new WeakMap(), _MapControls_toggleButtonElement = new WeakMap(), _MapControls_toggleIconButtonElement = new WeakMap();
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["dso-map-controls", "dso-button-group", "dso-icon", "dso-scrollable"];
+    const components = ["dso-map-controls", "dso-button-group", "dso-icon", "dso-icon-button", "dso-scrollable"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-map-controls":
             if (!customElements.get(transformTag(tagName))) {
@@ -1164,10 +1154,15 @@ function defineCustomElement$1() {
             break;
         case "dso-button-group":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "dso-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "dso-icon-button":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }

package/dist/bundle/dso-map-controls.js.map

@@ -1 +1 @@
-{"file":"dso-map-controls.js","mappings":";;;;;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,kBAAkB,EAAE;AAClB,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,YAAY,EAAE,YAAY;AAC1B,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,SAAS,EAAE,sBAAsB;AAClC,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,kBAAkB,EAAE;AAClB,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,YAAY,EAAE,YAAY;AAC1B,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,SAAS,EAAE,0BAA0B;AACtC,SAAA;AACF,KAAA;CACF;;ACrBD,MAAM,cAAc,GAAG,MAAM,CAAC;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC;;;;;;;;;;;;;;;;;;;AChgCF;AACA,MAAM,kBAAkB,GAAG,GAAG;MAOjB,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;;AASE;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAkCZ,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,IAAI,CAAC,IAAI;AAiChB,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;QAElD,+BAAmD,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QACnD,gC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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/map-controls/map-controls.i18n.ts","src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","src/components/map-controls/map-controls.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-map-controls\": {\r\n      title: \"Map layers\",\r\n      layersButton: \"Map layers\",\r\n      zoomIn: \"Zoom in\",\r\n      zoomOut: \"Zoom out\",\r\n      hidePanel: \"Hide panel {{title}}\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-map-controls\": {\r\n      title: \"Kaartlagen\",\r\n      layersButton: \"Kaartlagen\",\r\n      zoomIn: \"Zoom in\",\r\n      zoomOut: \"Zoom uit\",\r\n      hidePanel: \"Verberg paneel {{title}}\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n@use \"~dso-toolkit/src/components/button/button.variables\" as button-variables;\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n  background-color: colors.$wit;\r\n  border: 1px solid colors.$grijs-20;\r\n  inset-block-end: 0;\r\n  display: block;\r\n  font-family: typography.$font-family-base;\r\n  position: absolute;\r\n  inset-block-start: 0;\r\n  inset-inline-start: 100%;\r\n  transition: transform core-map-controls-variables.$transition-duration ease;\r\n  inline-size: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: #2315 this will be redundant when the icon only buttons are replaced with Icon Button\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n:host([open]) {\r\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n  transform: translateX(-100%);\r\n\r\n  .toggle-visibility-button {\r\n    display: none;\r\n  }\r\n\r\n  .zoom-buttons {\r\n    inset-block-start: units.$u2;\r\n  }\r\n}\r\n\r\n.toggle-visibility-button {\r\n  position: absolute;\r\n  inset-inline-end: calc(100% + #{core-map-controls-variables.$controls-margin + button-variables.$map-size});\r\n  inset-block-start: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\n.zoom-buttons {\r\n  position: absolute;\r\n  inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n  inset-block-start: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\n.close-button {\r\n  padding: 0;\r\n  position: absolute;\r\n  inset-inline-end: core-map-controls-variables.$controls-margin;\r\n  inset-block-start: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\nsection:not([hidden]) {\r\n  display: flex;\r\n  flex-direction: column;\r\n  block-size: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n  padding: units.$u2;\r\n}\r\n\r\nheader {\r\n  border-block-end: 1px solid colors.$grijs-20;\r\n  flex-grow: 0;\r\n  position: relative;\r\n\r\n  h2 {\r\n    color: colors.$bosgroen;\r\n    font-family: typography.$headings-font-family;\r\n    line-height: 1;\r\n    margin: 0;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  button.toggle-visibility-button {\r\n    block-size: units.$u5;\r\n    margin-inline-end: 0;\r\n    min-inline-size: auto;\r\n    inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n    inline-size: units.$u5;\r\n\r\n    dso-icon {\r\n      margin-inline-end: 0;\r\n    }\r\n\r\n    span {\r\n      @include utilities.sr-only();\r\n    }\r\n  }\r\n\r\n  .zoom-buttons {\r\n    inset-block-start: units.$u9;\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./map-controls.i18n\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss and map-controls.cy.ts\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n  tag: \"dso-map-controls\",\r\n  styleUrl: \"./map-controls.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapControls implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoMapControlsElement;\r\n\r\n  /**\r\n   * To show and hide the Map Controls.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * To disable the zoom controls:\r\n   *\r\n   * * `in`: Disable zoom in button.\r\n   * * `out`: Disable zoom out button.\r\n   * * `both`: Disable zoom in and zoom out.\r\n   */\r\n  @Prop()\r\n  disableZoom?: \"in\" | \"out\" | \"both\";\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom in button.\r\n   */\r\n  @Event()\r\n  dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom out button.\r\n   */\r\n  @Event()\r\n  dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * emits when the panel opens or closes.\r\n   *\r\n   * - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n   * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n  @State()\r\n  hideContent = !this.open;\r\n\r\n  @Watch(\"open\")\r\n  watchOpen(open: boolean) {\r\n    if (open) {\r\n      this.hideContent = false;\r\n\r\n      setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n    } else {\r\n      setTimeout(() => {\r\n        this.hideContent = true;\r\n\r\n        this.#toggleButtonElement?.focus();\r\n      }, transitionDuration);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted when the visibility is toggled.\r\n   *\r\n   * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n   * @param e\r\n   */\r\n  @Method()\r\n  async toggleVisibility(e: MouseEvent | KeyboardEvent) {\r\n    this.open = !this.open;\r\n\r\n    this.dsoToggle.emit({\r\n      originalEvent: e,\r\n      open: this.open,\r\n    });\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  #closeButtonElement: HTMLButtonElement | undefined;\r\n  #toggleButtonElement: HTMLButtonElement | undefined;\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <button\r\n          type=\"button\"\r\n          id=\"toggle-visibility-button\"\r\n          class=\"dso-map toggle-visibility-button\"\r\n          onClick={(e) => this.toggleVisibility(e)}\r\n          ref={(element) => (this.#toggleButtonElement = element)}\r\n        >\r\n          <dso-icon icon=\"layers\"></dso-icon>\r\n          <span>{this.text(\"layersButton\")}</span>\r\n        </button>\r\n        <dso-button-group class=\"zoom-buttons\" direction=\"column\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"dso-map\"\r\n            onClick={(e) => this.dsoZoomIn.emit(e)}\r\n            disabled={this.disableZoom === \"in\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span class=\"sr-only\">{this.text(\"zoomIn\")}</span>\r\n            <dso-icon icon=\"plus\"></dso-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"dso-map\"\r\n            onClick={(e) => this.dsoZoomOut.emit(e)}\r\n            disabled={this.disableZoom === \"out\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span class=\"sr-only\">{this.text(\"zoomOut\")}</span>\r\n            <dso-icon icon=\"minus\"></dso-icon>\r\n          </button>\r\n        </dso-button-group>\r\n        <section hidden={this.hideContent}>\r\n          <header>\r\n            <h2>{this.text(\"title\")}</h2>\r\n            <button\r\n              type=\"button\"\r\n              class=\"dso-tertiary close-button\"\r\n              onClick={(e) => this.toggleVisibility(e)}\r\n              ref={(element) => (this.#closeButtonElement = element)}\r\n            >\r\n              <span class=\"sr-only\">{this.text(\"hidePanel\", { title: this.text(\"title\") })}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          </header>\r\n          <dso-scrollable>\r\n            <div class=\"content\">\r\n              <slot></slot>\r\n            </div>\r\n          </dso-scrollable>\r\n        </section>\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-map-controls.js","mappings":";;;;;;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,kBAAkB,EAAE;AAClB,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,YAAY,EAAE,YAAY;AAC1B,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,SAAS,EAAE,sBAAsB;AAClC,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,kBAAkB,EAAE;AAClB,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,YAAY,EAAE,YAAY;AAC1B,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,SAAS,EAAE,0BAA0B;AACtC,SAAA;AACF,KAAA;CACF;;ACrBD,MAAM,cAAc,GAAG,MAAM,CAAC;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC;;;;;;;;;;;;;;;;;;;AC/+BF;AACA,MAAM,kBAAkB,GAAG,GAAG;MAOjB,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;;AASE;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAkCZ,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,IAAI,CAAC,IAAI;AAuChB,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;QAElD,+BAA0D,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QAC1D,gCAAoD,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QACpD,oCAA+D,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,C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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/map-controls/map-controls.i18n.ts","src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","src/components/map-controls/map-controls.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-map-controls\": {\r\n      title: \"Map layers\",\r\n      layersButton: \"Map layers\",\r\n      zoomIn: \"Zoom in\",\r\n      zoomOut: \"Zoom out\",\r\n      hidePanel: \"Hide panel {{title}}\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-map-controls\": {\r\n      title: \"Kaartlagen\",\r\n      layersButton: \"Kaartlagen\",\r\n      zoomIn: \"Zoom in\",\r\n      zoomOut: \"Zoom uit\",\r\n      hidePanel: \"Verberg paneel {{title}}\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n@use \"~dso-toolkit/src/components/button/button.variables\" as button-variables;\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n  background-color: colors.$wit;\r\n  border: 1px solid colors.$grijs-20;\r\n  inset-block-end: 0;\r\n  display: block;\r\n  font-family: typography.$font-family-base;\r\n  position: absolute;\r\n  inset-block-start: 0;\r\n  inset-inline-start: 100%;\r\n  transition: transform core-map-controls-variables.$transition-duration ease;\r\n  inline-size: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([open]) {\r\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n  transform: translateX(-100%);\r\n\r\n  .toggle-visibility-button,\r\n  .toggle-visibility-icon-button {\r\n    display: none;\r\n  }\r\n\r\n  .zoom-buttons {\r\n    inset-block-start: units.$u2;\r\n  }\r\n}\r\n\r\n.toggle-visibility-icon-button {\r\n  display: none;\r\n}\r\n\r\n.toggle-visibility-button {\r\n  position: absolute;\r\n  inset-inline-end: calc(100% + #{core-map-controls-variables.$controls-inset + button-variables.$map-size});\r\n  inset-block-start: core-map-controls-variables.$controls-inset;\r\n}\r\n\r\n.zoom-buttons {\r\n  position: absolute;\r\n  inset-inline-end: calc(100% + core-map-controls-variables.$controls-inset);\r\n  inset-block-start: core-map-controls-variables.$controls-inset;\r\n}\r\n\r\n.close-button {\r\n  padding: 0;\r\n  position: absolute;\r\n  inset-inline-end: core-map-controls-variables.$controls-inset;\r\n  inset-block-start: core-map-controls-variables.$controls-inset;\r\n}\r\n\r\nsection:not([hidden]) {\r\n  display: flex;\r\n  flex-direction: column;\r\n  block-size: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n  padding: units.$u2;\r\n}\r\n\r\nheader {\r\n  border-block-end: 1px solid colors.$grijs-20;\r\n  flex-grow: 0;\r\n  position: relative;\r\n\r\n  h2 {\r\n    color: colors.$bosgroen;\r\n    font-family: typography.$headings-font-family;\r\n    line-height: 1;\r\n    margin: 0;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  button.toggle-visibility-button {\r\n    display: none;\r\n  }\r\n\r\n  .toggle-visibility-icon-button {\r\n    display: inline-block;\r\n    position: absolute;\r\n    inset-block-start: units.$u2;\r\n    inset-inline-end: calc(100% + core-map-controls-variables.$controls-inset);\r\n  }\r\n\r\n  .zoom-buttons {\r\n    inset-block-start: units.$u9;\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./map-controls.i18n\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss and map-controls.cy.ts\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n  tag: \"dso-map-controls\",\r\n  styleUrl: \"./map-controls.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapControls implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoMapControlsElement;\r\n\r\n  /**\r\n   * To show and hide the Map Controls.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * To disable the zoom controls:\r\n   *\r\n   * * `in`: Disable zoom in button.\r\n   * * `out`: Disable zoom out button.\r\n   * * `both`: Disable zoom in and zoom out.\r\n   */\r\n  @Prop()\r\n  disableZoom?: \"in\" | \"out\" | \"both\";\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom in button.\r\n   */\r\n  @Event()\r\n  dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom out button.\r\n   */\r\n  @Event()\r\n  dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * emits when the panel opens or closes.\r\n   *\r\n   * - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n   * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n  @State()\r\n  hideContent = !this.open;\r\n\r\n  @Watch(\"open\")\r\n  watchOpen(open: boolean) {\r\n    if (open) {\r\n      this.hideContent = false;\r\n\r\n      setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n    } else {\r\n      setTimeout(() => {\r\n        this.hideContent = true;\r\n\r\n        if (this.#toggleButtonElement?.checkVisibility()) {\r\n          this.#toggleButtonElement?.focus();\r\n        }\r\n\r\n        if (this.#toggleIconButtonElement?.checkVisibility()) {\r\n          this.#toggleIconButtonElement.focus();\r\n        }\r\n      }, transitionDuration);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted when the visibility is toggled.\r\n   *\r\n   * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n   * @param e\r\n   */\r\n  @Method()\r\n  async toggleVisibility(e: MouseEvent | KeyboardEvent) {\r\n    this.open = !this.open;\r\n\r\n    this.dsoToggle.emit({\r\n      originalEvent: e,\r\n      open: this.open,\r\n    });\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  #closeButtonElement: HTMLDsoIconButtonElement | undefined;\r\n  #toggleButtonElement: HTMLButtonElement | undefined;\r\n  #toggleIconButtonElement: HTMLDsoIconButtonElement | undefined;\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <dso-icon-button\r\n          label={this.text(\"layersButton\")}\r\n          icon=\"layers\"\r\n          variant=\"map\"\r\n          tooltipPlacement=\"left\"\r\n          class=\"toggle-visibility-icon-button\"\r\n          onDsoClick={(e) => this.toggleVisibility(e.detail.originalEvent)}\r\n          ref={(element) => (this.#toggleIconButtonElement = element)}\r\n        />\r\n        <button\r\n          type=\"button\"\r\n          class=\"dso-map toggle-visibility-button\"\r\n          onClick={(e) => this.toggleVisibility(e)}\r\n          ref={(element) => (this.#toggleButtonElement = element)}\r\n        >\r\n          <dso-icon icon=\"layers\"></dso-icon>\r\n          <span>{this.text(\"layersButton\")}</span>\r\n        </button>\r\n        <dso-button-group class=\"zoom-buttons\" direction=\"column\">\r\n          <dso-icon-button\r\n            label={this.text(\"zoomIn\")}\r\n            icon=\"plus\"\r\n            variant=\"map\"\r\n            tooltipPlacement=\"left\"\r\n            onDsoClick={(e) => this.dsoZoomIn.emit(e.detail.originalEvent)}\r\n            disabled={this.disableZoom === \"in\" || this.disableZoom === \"both\"}\r\n          />\r\n          <dso-icon-button\r\n            label={this.text(\"zoomOut\")}\r\n            icon=\"minus\"\r\n            variant=\"map\"\r\n            tooltipPlacement=\"left\"\r\n            onDsoClick={(e) => this.dsoZoomOut.emit(e.detail.originalEvent)}\r\n            disabled={this.disableZoom === \"out\" || this.disableZoom === \"both\"}\r\n          />\r\n        </dso-button-group>\r\n        <section hidden={this.hideContent}>\r\n          <header>\r\n            <h2>{this.text(\"title\")}</h2>\r\n            <dso-icon-button\r\n              class=\"close-button\"\r\n              label={this.text(\"hidePanel\", { title: this.text(\"title\") })}\r\n              icon=\"times\"\r\n              variant=\"tertiary\"\r\n              onDsoClick={(e) => this.toggleVisibility(e.detail.originalEvent)}\r\n              ref={(element) => (this.#closeButtonElement = element)}\r\n            />\r\n          </header>\r\n          <dso-scrollable>\r\n            <div class=\"content\">\r\n              <slot></slot>\r\n            </div>\r\n          </dso-scrollable>\r\n        </section>\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-map-layer-object.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-DBWrx_3r.js';
-import { d as defineCustomElement$2 } from './p-CVAPkfaq.js';
+import { d as defineCustomElement$2 } from './p-BFOCXUdD.js';
 
 const mapLayerObjectCss = () => `:host{display:block}*,*::after,*::before{box-sizing:border-box}::slotted(span[slot=symbol]){background-color:#fff;display:block;float:inline-start;block-size:26px;margin-block-start:0;margin-inline-end:8px;inline-size:30px;overflow:hidden;position:relative}.map-layer-object{display:flex;justify-content:space-between;min-block-size:32px}.slide-toggle-container{margin-inline-start:auto}.slide-toggle-container dso-slide-toggle{display:flex;padding-block-start:0}`;
 
@@ -22,7 +22,7 @@ const MapLayerObject = /*@__PURE__*/ proxyCustomElement(class MapLayerObject ext
         };
     }
     render() {
-        return (h(Host, { key: '30bafb9fba2e324b90973e201b777ed1e4c2edb7', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'e16b36b39faa9eef52d42ae4e2ea10ef6e447b85', class: "map-layer-object" }, h("div", { key: 'd1b45348875bc6168c49c1dcb0c0a9586b2a854c' }, h("slot", { key: 'aa1363f10e2755e130866834cb2d90ce40247f28', name: "symbol" })), h("div", { key: '159fa97b818465cf269654ccaf420621bae2ef65' }, h("slot", { key: 'd0aba82b3df09e78a2fdb8a90f11eb128651dd10' })), h("div", { key: '703dc4b02c42de955850fd473b0e72db7b6df84e', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'c957e6475e55e583ab609c44c8850043f5cc99e6', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))));
+        return (h(Host, { key: '5c90002aefb7e8d2909bcd9f186e245dd6f49a66', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '2fcd20641e4cb8315d8bc2be32274931a10980fc', class: "map-layer-object" }, h("div", { key: '9c405ad65801cc50636dd51cf073ea5371d94ecc' }, h("slot", { key: '772b7519bea83446c13c98b41998284903e98e95', name: "symbol" })), h("div", { key: '74f073d85af8ab9584563fdb9497556e36d43461' }, h("slot", { key: '9bc8dcd77172661daa1f98c7744002be4f638fb7' })), h("div", { key: '6634f4a1af4a24751e5c7e13ecd96f4510e74b1e', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '1e055de4b973ef732e86975f749dc766513868fa', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))));
     }
     static get style() { return mapLayerObjectCss(); }
 }, [257, "dso-map-layer-object", {

package/dist/bundle/dso-map-layer.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-DBWrx_3r.js';
-import { d as defineCustomElement$2 } from './p-CVAPkfaq.js';
+import { d as defineCustomElement$2 } from './p-BFOCXUdD.js';
 
 const mapLayerCss = () => `:host{display:block}*,*::after,*::before{box-sizing:border-box}.map-layer{display:flex;justify-content:space-between;min-block-size:32px}.map-layer-label{font-weight:600;line-height:1.375em;margin:0;position:relative}.slide-toggle-container dso-slide-toggle{display:flex;padding-block-start:0}`;
 
@@ -25,7 +25,7 @@ const MapLayer = /*@__PURE__*/ proxyCustomElement(class MapLayer extends H {
         };
     }
     render() {
-        return (h(Fragment, { key: '4355e5b07cda338b718214642054803ac24daf84' }, h("div", { key: '4a21ae78c755bf65d33a441a847cb1fe38e714a2', class: "map-layer" }, h("span", { key: '074f5708e406e28a7b8223c15c11e292ec56cefe', class: "map-layer-label" }, this.label), this.activatable && (h("div", { key: 'cb3b8004e02c452e76f71e667e9a34dcee2c9f86', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '158a228b06dd32f5f7097aec8b3e5a1403f299b7', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: 'b265537514ffd9feaed3edd18f5864bd4a7f4c64' })));
+        return (h(Fragment, { key: 'f276fa73a747d32b661eace9d507750806d326f4' }, h("div", { key: 'c2ba53849e4d7cff6bd77af155b6aea50239cd80', class: "map-layer" }, h("span", { key: '83ead9191fc01f511de50b16a2f7723accb5fa90', class: "map-layer-label" }, this.label), this.activatable && (h("div", { key: '7f04d01ae09df068365a110b03fca7ed2aa5a438', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '294d0aca0e8699794ba66b873a7d65cbaefec7af', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: '4e80145bdea752cf4002b68b5a6a0544d8be15f2' })));
     }
     static get style() { return mapLayerCss(); }
 }, [257, "dso-map-layer", {

package/dist/bundle/dso-map-overlays.js

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-DBWrx_3r.js';
 import { i as i18n } from './p-pxiVAmq4.js';
-import { d as defineCustomElement$6 } from './p-DAPEW-cK.js';
-import { d as defineCustomElement$5 } from './p-BheZWHUU.js';
-import { d as defineCustomElement$4 } from './p-DQhNV0Ly.js';
-import { d as defineCustomElement$3 } from './p-B4kCTpCL.js';
-import { d as defineCustomElement$2 } from './p-DYajyH7D.js';
+import { d as defineCustomElement$6 } from './p-C0EnGYRN.js';
+import { d as defineCustomElement$5 } from './p-BGRoDyj6.js';
+import { d as defineCustomElement$4 } from './p-CAGq_ycS.js';
+import { d as defineCustomElement$3 } from './p-CPgqc4eE.js';
+import { d as defineCustomElement$2 } from './p-DnF8nNXV.js';
 import { v as v4 } from './p-C_akviUd.js';
 
 const translations = {
@@ -54,7 +54,7 @@ const MapOverlays = /*@__PURE__*/ proxyCustomElement(class MapOverlays extends H
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '5677296e800c2c88ea5a6673303561405112ae8c', class: "form-group dso-checkboxes" }, h("legend", { key: '79422ea4c05439d17589479b04ed8e006f1ca6c2', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'a06f69b1ffe8a3708a2cf464329db67e4a6ae271', class: "dso-label-container" }, h("span", { key: '700705da846f5cdbf271a5ee350e3ce28b51d60b', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '24ca7eacbf9efe9bd89b721c611f2081e05aa2c5', 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, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: '7d5393569bd4c33d22696aaee3dbb4308a9e7fbe', class: "form-group dso-checkboxes" }, h("legend", { key: '01bbd08d45ea56bcc02f6059e69bade5c298b83b', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'd62f0086427b450d9ad2d3ca362847c77d908ad4', class: "dso-label-container" }, h("span", { key: '99c58b18fbed22423969314f372370f4eb6661dd', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '59f3a885d12e6b482b6b6940b173ac0ac8a42eba', 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, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     get host() { return this; }
     static get style() { return mapOverlaysCss(); }

package/dist/bundle/dso-mark-bar.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-DBWrx_3r.js';
-import { d as defineCustomElement$3 } from './p-DAPEW-cK.js';
-import { d as defineCustomElement$2 } from './p-BheZWHUU.js';
+import { d as defineCustomElement$3 } from './p-C0EnGYRN.js';
+import { d as defineCustomElement$2 } from './p-BGRoDyj6.js';
 
 const markBarCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block;background-color:#fff}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.dso-mark-bar{display:flex;flex-grow:1}.dso-mark-bar .dso-mark-bar-input{display:flex;position:relative;inline-size:100%}.dso-mark-bar .dso-mark-bar-input input{background-color:transparent;background-image:none;border:1px solid #275937;border-radius:4px;box-shadow:none;display:block;font-size:1rem;block-size:2.5rem;line-height:2.5rem;padding-inline:2.5rem;padding-block:6px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;inline-size:100%;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}.dso-mark-bar .dso-mark-bar-input input:focus{border-color:#275937;box-shadow:inset 0 0 0 1px #275937;outline:0}.dso-mark-bar .dso-mark-bar-input input::-ms-clear{display:none}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label{inline-size:2.5rem;padding-inline-end:8px}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label .label-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.dso-mark-bar .dso-mark-bar-input label{inset-block-end:8px;block-size:2.5rem;inset-inline-start:0;inset-inline-end:40px;padding-block:8px;padding-inline-start:8px;cursor:text;position:absolute;inset-block-start:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.dso-mark-bar .dso-mark-bar-input label dso-icon{color:#39870c;cursor:default;margin:-8px;padding:8px;inline-size:2.5rem;block-size:2.5rem}.dso-mark-bar .dso-mark-bar-input label .label-text{margin-inline-start:8px;color:#666}.dso-mark-bar .dso-mark-bar-input dso-icon-button{position:absolute;inset-inline-end:8px;inset-block-start:8px}.dso-button-container{position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;padding-inline:8px;border:1px solid #275937;border-inline-start:0;border-start-end-radius:4px;border-end-end-radius:4px}.dso-button-container dso-icon-button{--dso-icon-button-tertiary-border:0;cursor:pointer}.dso-button-container dso-icon-button:disabled{color:#ccc;cursor:default}.dso-button-container .divider{position:absolute;inset-inline-start:0;inset-block-start:8px;inset-block-end:8px;inline-size:1px;background-color:#ccc}`;
 
@@ -56,7 +56,7 @@ const MarkBar = /*@__PURE__*/ proxyCustomElement(class MarkBar extends H {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '479f935010eaa312fb947a2bc86f4120156f72b7', class: "dso-mark-bar" }, h("div", { key: '6f800ec39af642b5947ea302440756826c32468e', class: "dso-mark-bar-input" }, h("input", { key: '39a5a73bab3522acdbe6e8d18727c453bb1ffb73', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'de1aa601a7d49e90a707002c6554ef12970d354c', htmlFor: "search-input" }, h("dso-icon", { key: 'ed3c5a20769c9cb5137300b6c7bf83bd02e33bb0', class: "dso-search-icon", icon: "search" }), h("span", { key: '6cbbfbfece06520c7f7ca7148f92227d76489c6e', class: "label-text" }, this.label)), h("dso-icon-button", { key: '0e2b0f00578e857ee292e2c276516efcebcbba98', icon: "times", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '753c2a3ae343240ba4234631b8ea93318e22632e', class: "dso-button-container" }, h("span", { key: '9ec607afe4347550280631389368f2847bb53fe6', class: "divider" }), h("dso-icon-button", { key: 'ea6c03677bfd7a89b34d0a4416e8d5f38dab2124', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: 'b5fbeba0936fd222057f7ec38fc90e2c0c4c0cbe' }, current, "/", totalCount), h("dso-icon-button", { key: '01ee5a34b52a660705b451ecf9b72ba738c7fe1d', icon: "chevron-down", variant: "tertiary", label: "Volgend zoekresultaat", onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
+        return (h("div", { key: 'c910390a280323410612690ce9b9b61897013549', class: "dso-mark-bar" }, h("div", { key: 'cdd42f831f7db8f84bcc84062ad66092402727ec', class: "dso-mark-bar-input" }, h("input", { key: 'a65c2109c929c69d318479c0e5bf212e01e3ccc8', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'a25f67483fbfe90274cb0ab43c90662f4d428fc9', htmlFor: "search-input" }, h("dso-icon", { key: '0a3ab8c86897b675d410ce45df8899e2e3b12f26', class: "dso-search-icon", icon: "search" }), h("span", { key: '0dcc1fd40b22ab8f1b0545641b2c64e16ecb1d8b', class: "label-text" }, this.label)), h("dso-icon-button", { key: '533ae60b2ce99d7cdd6a8eb0c68f6f2fdc348ebe', icon: "times", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '662c8f5823140f82256cae102dfaa64c142626f5', class: "dso-button-container" }, h("span", { key: '362a212a8b3d20f2e6083e11bc26a5e4746e5afc', class: "divider" }), h("dso-icon-button", { key: 'c44c43677f071df7e4cad780152feec507203556', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '43195674b0b1370e93d920645894ed32680d14cf' }, current, "/", totalCount), h("dso-icon-button", { key: 'e235186b6f80d4c0305b6a7b60a5ba17b066db10', icon: "chevron-down", variant: "tertiary", label: "Volgend zoekresultaat", onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
     }
     static get style() { return markBarCss(); }
 }, [257, "dso-mark-bar", {

package/dist/bundle/dso-modal.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-DBWrx_3r.js';
 import { g as getActiveElement } from './p-CodDyi2J.js';
 import { i as i18n } from './p-pxiVAmq4.js';
-import { d as defineCustomElement$4 } from './p-DAPEW-cK.js';
-import { d as defineCustomElement$3 } from './p-BheZWHUU.js';
-import { d as defineCustomElement$2 } from './p-F64yBavo.js';
+import { d as defineCustomElement$4 } from './p-C0EnGYRN.js';
+import { d as defineCustomElement$3 } from './p-BGRoDyj6.js';
+import { d as defineCustomElement$2 } from './p-DP6XV8DY.js';
 import { v as v4 } from './p-C_akviUd.js';
 
 const translations = {
@@ -91,7 +91,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends H {
     }
     render() {
         var _a;
-        return (h("dialog", { key: '8160801bfd3f476ae7d62fd6b0473a50eb98b83d', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '05ce0361e4a8d0dd3f382990650beef517b1efc5', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "times", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '2078683c54e36bfdcbf519cdb735c1c311ffbd9e' }, h("div", { key: '155f55ed093e9dfbe3fba7866bfa3da07ef2fe06', class: "dso-body", tabIndex: 0 }, h("slot", { key: 'ef2d5cce45c436c08a982b26a79810f0f542d3ba', name: "body" }))), this.hasFooter && (h("div", { key: 'f7c67dcc310923290d1589601c472c365c359a48', class: "dso-footer" }, h("slot", { key: 'ad642cfe380238b4a7266e5a0029216576901efc', name: "footer" }))))));
+        return (h("dialog", { key: 'ee7a1036ab1dfe13a9cde99c938b2ac17676e52d', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '14656bc85a2d0891fd68b162a96a2827bc6672ed', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "times", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '712c6de66982b6dfa2494e0440a85d652a4edaa7' }, h("div", { key: 'c91004b645f00dc94166665cb960c4352702ae51', class: "dso-body", tabIndex: 0 }, h("slot", { key: 'ac362abcac247ec40d0bdf86fafb657d0ffa75af', name: "body" }))), this.hasFooter && (h("div", { key: '9484d993a10c134304663efa3c16f7a51eef1b74', class: "dso-footer" }, h("slot", { key: 'cdddbb8a63bea8c8857ff4fe0e2016a620accff1', name: "footer" }))))));
     }
     get host() { return this; }
     static get style() { return modalCss(); }

package/dist/bundle/dso-onboarding-tip.js

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-DBWrx_3r.js';
+import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, c as Host, t as transformTag } from './p-DBWrx_3r.js';
 import { p as positionTooltip } from './p-kKdt-6mr.js';
-import { d as defineCustomElement$3 } from './p-DAPEW-cK.js';
-import { d as defineCustomElement$2 } from './p-BheZWHUU.js';
+import { d as defineCustomElement$3 } from './p-C0EnGYRN.js';
+import { d as defineCustomElement$2 } from './p-BGRoDyj6.js';
 
 const onboardingTipCss = () => `*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}::slotted([slot=heading]){display:flex !important;align-items:center !important;margin-block-end:0 !important;margin-block-start:0 !important;color:#fff !important;line-height:1.375 !important}:host{--_dso-button-primary-background-color:#fff;--_dso-button-primary-border-color:#fff;--_dso-button-primary-color:#000;--_dso-button-primary-hover-background-color:#ccc;--_dso-button-primary-hover-border-color:#ccc;--_dso-button-primary-hover-color:#000;--_dso-button-primary-active-background-color:#999;--_dso-button-primary-active-border-color:#999;--_dso-button-primary-active-color:#000;--_dso-button-primary-disabled-background-color:#fff;--_dso-button-primary-disabled-border-color:#fff;--_dso-button-primary-disabled-color:#b2b2b2;--_dso-button-secondary-background-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-color:#000;--_dso-button-secondary-hover-background-color:#ccc;--_dso-button-secondary-hover-border-color:#ccc;--_dso-button-secondary-hover-color:#000;--_dso-button-secondary-active-background-color:#999;--_dso-button-secondary-active-border-color:#999;--_dso-button-secondary-active-color:#000;--_dso-button-secondary-disabled-background-color:#fff;--_dso-button-secondary-disabled-border-color:#fff;--_dso-button-secondary-disabled-color:#b2b2b2;display:block;filter:drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4));transition:visibility 400ms, opacity 400ms}:host(:not([ready])){opacity:1;animation:400ms ease-in 1 normal both fadeInOpacity}:host([popover]){margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset}.onboarding-tip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;overflow-wrap:normal;word-spacing:normal;white-space:normal;font-size:14px;inset-block-start:0;inset-inline-start:0;z-index:410}@media screen and (max-width: 360px){.onboarding-tip{padding-inline-start:8px !important}}.dso-close{position:absolute;inset-block-start:4px;inset-inline-end:4px}.onboarding-tip-inner{--link-color:#fff;--link-hover-color:#b2b2b2;--link-visited-color:#7f7f7f;max-inline-size:min(360px, 100vw - 2 * 8px);max-block-size:calc(100vh - 10px);overflow:auto;padding-block:32px 8px;padding-inline:8px;border-radius:4px;display:block;font-size:1rem;position:relative;z-index:2;--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.onboarding-tip-inner a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}.onboarding-tip-inner a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}.onboarding-tip-inner a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}.onboarding-tip-inner a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-wit"))}.onboarding-tip-inner{--_dso-icon-button-tertiary-color:#fff;background-color:#2b5780;color:#fff}@media screen and (max-width: 991px){.onboarding-tip-inner{max-block-size:unset}}.onboarding-tip-arrow{border-start-start-radius:4px;position:absolute;block-size:20px;inline-size:20px;background:#2b5780;z-index:1;pointer-events:none}.onboarding-tip-content-wrapper{padding-inline:16px;padding-block-end:16px}.onboarding-tip-content-heading{display:flex}.onboarding-tip-content-heading dso-icon{margin-inline-end:8px}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}`;
 
@@ -19,14 +19,29 @@ const OnboardingTip = /*@__PURE__*/ proxyCustomElement(class OnboardingTip exten
         this.placement = "right";
         this.ready = false;
         this.popoverOpen = false;
+        this.blockEscapeKey = (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                this.dsoClose.emit({ originalEvent: e });
+            }
+        };
+    }
+    connectedCallback() {
+        this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
+        this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true, characterData: true });
     }
     componentDidRender() {
+        var _a;
         if (!this.host.isConnected) {
             return;
         }
         if (!this.popoverOpen) {
             this.host.showPopover();
             this.popoverOpen = true;
+            const onboardingTipElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".onboarding-tip");
+            if (this.hasOnboardingTipElement(onboardingTipElement)) {
+                OnboardingTip.setFocus(onboardingTipElement);
+            }
         }
         if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof H) {
             this.cleanUp = positionTooltip({
@@ -40,16 +55,31 @@ const OnboardingTip = /*@__PURE__*/ proxyCustomElement(class OnboardingTip exten
         }
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        delete this.mutationObserver;
         if (this.popoverOpen) {
             this.host.hidePopover();
             this.popoverOpen = false;
         }
-        (_a = this.cleanUp) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.cleanUp) === null || _b === void 0 ? void 0 : _b.call(this);
         this.cleanUp = undefined;
     }
+    /**
+     * Set focus on the onboarding tip element and reset tabIndex for accessibility.
+     */
+    static setFocus(target) {
+        if (target) {
+            target.focus();
+        }
+    }
+    hasOnboardingTipElement(element) {
+        return element instanceof H;
+    }
     render() {
-        return (h(Host, { key: 'd60e322e9eb46e0271a0172db57e82b1e170e193', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: 'f463fe476aaa88b2e1de6506c97d2a8c32b82e09', class: "onboarding-tip", role: "tooltip" }, h("div", { key: 'b3d99d6b2c7bb5029409fd9d2e131c5aff5cf328', class: "onboarding-tip-inner" }, h("div", { key: '658a012c2e7358c317b76571b8f13270ad5d0960', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'dfa159ff194062122bf9760233ff09a579f79b69', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '45d18025a2918ffee7defff889b807989157c939', icon: "light-bulb" }), h("slot", { key: '6708d1880a299184800721b43111e695bbd60b21', name: "heading" }))), h("dso-icon-button", { key: 'f946318abace8994e4686ee363765e90c962701a', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: 'b15cbc5b14e9ba3156161e4886708de46ee28a33' }))), h("div", { key: '1d6f4ff0a16e4b50b7cbdec2d42ff558093a8f21', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        var _a;
+        const ariaLabel = (_a = this.headingSlottedElement) === null || _a === void 0 ? void 0 : _a.textContent;
+        return (h(Host, { key: 'd819fe1ae171a8db0594ebc594024d4648bf006d', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: 'de196244db29891f948ab77f4f66dbb6568fe84b', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: '299416de5f0f8fbf1dbb1833c93cae7bce386ea7', class: "onboarding-tip-inner" }, h("div", { key: '2ca611a1029242013c3d4d64fdec99e4942aa56e', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '80a2f51a5a4f6972e7949f37e3aeee8f7a904a40', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: 'c3da42b106b11ca6b30b435f9d609a69cbf06fd5', icon: "light-bulb" }), h("slot", { key: '104787777d28b84b9d9f44bd836148c067eb97aa', name: "heading" }))), h("dso-icon-button", { key: '343d6dfefd5253acd8b767a3d6f9cc9d07d05155', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: '3acb3a6dd64f6ba0ae9051a751b436a4ef4cf9fc' }))), h("div", { key: 'b0107b1b4a640c324e7ca720f857ded0aec1f1f0', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");

package/dist/bundle/dso-onboarding-tip.js.map

@@ -1 +1 @@
-{"file":"dso-onboarding-tip.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,yoIAAyoI,CAAC;;MCY7pI,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AASE;;AAEG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAqB,OAAO;AASrC,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAGb,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AA8FpB;IA5FC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YAC1B;;AAGF,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACrB,YAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACvB,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI;;AAGzB,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,WAAW,YAAYA,CAAW,EAAE;AACrF,YAAA,IAAI,CAAC,OAAO,GAAG,eAAe,CAAC;gBAC7B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;gBACvC,MAAM,EAAE,IAAI,CAAC,IAAI;gBACjB,WAAW,EAAE,IAAI,CAAC,WAAW;AAC7B,gBAAA,YAAY,EAAE,CAAA,EAAG,IAAI,CAAC,SAAS,CAAQ,MAAA,CAAA;AACvC,gBAAA,wBAAwB,EAAE,IAAI;AAC9B,gBAAA,kBAAkB,EAAE,IAAI;AACzB,aAAA,CAAC;;;IAIN,oBAAoB,GAAA;;AAClB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,YAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACvB,YAAA,IAAI,CAAC,WAAW,GAAG,KAAK;;QAE1B,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAI;AAChB,QAAA,IAAI,CAAC,OAAO,GAAG,SAAS;;IAG1B,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,cAAc,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAA,EACjF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,EAAA,EACxC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gCAAgC,EAAA,EACxC,IAAI,CAAC,qBAAqB,KAAK,IAAI,KAClC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gCAAgC,EAAA,EACzC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAY,CAAA,EACvC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,CACP,EACD,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,WAAW,EACjB,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAC3D,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAC,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,EAAQ,CAAA,CAC5E,CACD;;AAMX,IAAA,IAAY,qBAAqB,GAAA;QAC/B,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC;;AAKpD,IAAA,IAAY,gBAAgB,GAAA;AAC1B,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE;QAEvB,IAAI,CAAC,EAAE,EAAE;AACP,YAAA,OAAO,CAAC,IAAI,CAAC,iEAAiE,CAAC;YAE/E;;QAGF,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACxC,IAAI,EAAE,QAAQ,YAAY,QAAQ,IAAI,QAAQ,YAAY,UAAU,CAAC,EAAE;AACrE,YAAA,OAAO,CAAC,IAAI,CAAC,CAAA,kDAAA,CAAoD,CAAC;YAElE;;QAGF,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAc,CAAsB,mBAAA,EAAA,EAAE,CAAI,EAAA,CAAA,CAAC;QACnF,IAAI,CAAC,SAAS,EAAE;AACd,YAAA,OAAO,CAAC,IAAI,CAAC,0DAA0D,EAAE,CAAA,CAAE,CAAC;YAE5E;;AAGF,QAAA,OAAO,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/onboarding-tip/onboarding-tip.scss?tag=dso-onboarding-tip&encapsulation=shadow","src/components/onboarding-tip/onboarding-tip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@use \"onboarding-tip.variables\" as onboarding-tip-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n  display: flex !important;\r\n  align-items: center !important;\r\n\r\n  margin-block-end: 0 !important;\r\n  margin-block-start: 0 !important;\r\n\r\n  color: colors.$wit !important;\r\n  line-height: 1.375 !important;\r\n}\r\n\r\n:host {\r\n  --_dso-button-primary-background-color: #{colors.$wit};\r\n  --_dso-button-primary-border-color: #{colors.$wit};\r\n  --_dso-button-primary-color: #{colors.$zwart};\r\n  --_dso-button-primary-hover-background-color: #{colors.$grijs-20};\r\n  --_dso-button-primary-hover-border-color: #{colors.$grijs-20};\r\n  --_dso-button-primary-hover-color: #{colors.$zwart};\r\n  --_dso-button-primary-active-background-color: #{colors.$grijs-40};\r\n  --_dso-button-primary-active-border-color: #{colors.$grijs-40};\r\n  --_dso-button-primary-active-color: #{colors.$zwart};\r\n  --_dso-button-primary-disabled-background-color: #{colors.$wit};\r\n  --_dso-button-primary-disabled-border-color: #{colors.$wit};\r\n  --_dso-button-primary-disabled-color: #{colors.$grijs-30};\r\n\r\n  --_dso-button-secondary-background-color: #{colors.$wit};\r\n  --_dso-button-secondary-border-color: #{colors.$wit};\r\n  --_dso-button-secondary-color: #{colors.$zwart};\r\n  --_dso-button-secondary-hover-background-color: #{colors.$grijs-20};\r\n  --_dso-button-secondary-hover-border-color: #{colors.$grijs-20};\r\n  --_dso-button-secondary-hover-color: #{colors.$zwart};\r\n  --_dso-button-secondary-active-background-color: #{colors.$grijs-40};\r\n  --_dso-button-secondary-active-border-color: #{colors.$grijs-40};\r\n  --_dso-button-secondary-active-color: #{colors.$zwart};\r\n  --_dso-button-secondary-disabled-background-color: #{colors.$wit};\r\n  --_dso-button-secondary-disabled-border-color: #{colors.$wit};\r\n  --_dso-button-secondary-disabled-color: #{colors.$grijs-30};\r\n\r\n  display: block;\r\n  filter: drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4));\r\n\r\n  // Visibility & opacity are updated using Floating-UI\r\n  transition:\r\n    visibility onboarding-tip-variables.$transition-time,\r\n    opacity onboarding-tip-variables.$transition-time;\r\n}\r\n\r\n// Startup fade-in transition\r\n:host(:not([ready])) {\r\n  opacity: 1;\r\n  animation: onboarding-tip-variables.$transition-time ease-in 1 normal both fadeInOpacity;\r\n}\r\n\r\n:host([popover]) {\r\n  margin: 0 !important;\r\n  border: 0;\r\n  padding: 0;\r\n  background-color: transparent;\r\n  overflow: unset;\r\n}\r\n\r\n.onboarding-tip {\r\n  font-family: typography.$font-family-base;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: typography.$line-height-base;\r\n  line-break: auto;\r\n  text-align: start;\r\n  text-decoration: none;\r\n  text-shadow: none;\r\n  text-transform: none;\r\n  letter-spacing: normal;\r\n  overflow-wrap: normal;\r\n  word-spacing: normal;\r\n  white-space: normal;\r\n  font-size: typography.$font-size-small;\r\n  inset-block-start: 0;\r\n  inset-inline-start: 0;\r\n  z-index: zindex.$onboarding-tip;\r\n\r\n  @media screen and (max-width: onboarding-tip-variables.$max-inline-size) {\r\n    padding-inline-start: units.$u1 !important;\r\n  }\r\n}\r\n\r\n.dso-close {\r\n  position: absolute;\r\n  inset-block-start: 4px;\r\n  inset-inline-end: 4px;\r\n}\r\n\r\n.onboarding-tip-inner {\r\n  --link-color: #{colors.$wit};\r\n  --link-hover-color: #{colors.$grijs-30};\r\n  --link-visited-color: #{colors.$grijs-50};\r\n\r\n  max-inline-size: min(#{onboarding-tip-variables.$max-inline-size}, calc(100vw - 2 * #{units.$u1}));\r\n  max-block-size: calc(100vh - 10px); // 10px is the padding given to floating-ui\r\n  overflow: auto;\r\n  padding-block: onboarding-tip-variables.$padding-block;\r\n  padding-inline: onboarding-tip-variables.$padding-inline;\r\n  border-radius: onboarding-tip-variables.$border-radius;\r\n  display: block;\r\n  font-size: typography.$root-font-size-base;\r\n  position: relative;\r\n  z-index: 2; // z-index higher than the arrow\r\n\r\n  @include set-colors.apply(onboarding-tip-variables.$background-color, \"onboarding-tip\");\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n    max-block-size: unset;\r\n  }\r\n}\r\n\r\n.onboarding-tip-arrow {\r\n  border-start-start-radius: onboarding-tip-variables.$border-radius;\r\n  position: absolute;\r\n  block-size: onboarding-tip-variables.$arrow-block-size;\r\n  inline-size: onboarding-tip-variables.$arrow-inline-size;\r\n  background: onboarding-tip-variables.$background-color;\r\n  z-index: 1;\r\n  pointer-events: none;\r\n}\r\n\r\n.onboarding-tip-content-wrapper {\r\n  padding-inline: units.$u2;\r\n  padding-block-end: units.$u2;\r\n}\r\n\r\n.onboarding-tip-content-heading {\r\n  display: flex;\r\n\r\n  dso-icon {\r\n    margin-inline-end: units.$u1;\r\n  }\r\n}\r\n\r\n@keyframes fadeInOpacity {\r\n  0% {\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { OnboardingTipCloseEvent } from \"./onboarding-tip.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-onboarding-tip\",\r\n  styleUrl: \"onboarding-tip.scss\",\r\n  shadow: true,\r\n})\r\nexport class OnboardingTip implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoOnboardingTipElement;\r\n\r\n  /**\r\n   * Where to place the Onboarding Tip relative to its reference element.\r\n   */\r\n  @Prop()\r\n  placement: TooltipPlacement = \"right\";\r\n\r\n  /**\r\n   * Emitted when the user closes the Onboarding Tip.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<OnboardingTipCloseEvent>;\r\n\r\n  @State()\r\n  ready = false;\r\n\r\n  @State()\r\n  popoverOpen = false;\r\n\r\n  componentDidRender() {\r\n    if (!this.host.isConnected) {\r\n      return;\r\n    }\r\n\r\n    if (!this.popoverOpen) {\r\n      this.host.showPopover();\r\n      this.popoverOpen = true;\r\n    }\r\n\r\n    if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {\r\n      this.cleanUp = positionTooltip({\r\n        referenceElement: this.referenceElement,\r\n        tipRef: this.host,\r\n        tipArrowRef: this.tipArrowRef,\r\n        placementTip: `${this.placement}-start`,\r\n        topPositionSmallViewPort: true,\r\n        halfMainAxisOffset: true,\r\n      });\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.popoverOpen) {\r\n      this.host.hidePopover();\r\n      this.popoverOpen = false;\r\n    }\r\n    this.cleanUp?.();\r\n    this.cleanUp = undefined;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host popover=\"manual\" ready={this.ready} onAnimationend={() => (this.ready = true)}>\r\n        <div class=\"onboarding-tip\" role=\"tooltip\">\r\n          <div class=\"onboarding-tip-inner\">\r\n            <div class=\"onboarding-tip-content-wrapper\">\r\n              {this.headingSlottedElement !== null && (\r\n                <div class=\"onboarding-tip-content-heading\">\r\n                  <dso-icon icon=\"light-bulb\"></dso-icon>\r\n                  <slot name=\"heading\" />\r\n                </div>\r\n              )}\r\n              <dso-icon-button\r\n                class=\"dso-close\"\r\n                label=\"Sluiten\"\r\n                variant=\"tertiary\"\r\n                icon=\"times\"\r\n                onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n              />\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n          <div class=\"onboarding-tip-arrow\" ref={(ref) => (this.tipArrowRef = ref)}></div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private tipArrowRef: HTMLDivElement | undefined;\r\n\r\n  private get headingSlottedElement() {\r\n    return this.host.querySelector(\"[slot='heading']\");\r\n  }\r\n\r\n  private cleanUp: TooltipClean | undefined;\r\n\r\n  private get referenceElement(): HTMLElement | undefined {\r\n    const id = this.host.id;\r\n\r\n    if (!id) {\r\n      console.warn(\"Unable to find reference. Onboarding Tip has no [id] attribute.\");\r\n\r\n      return;\r\n    }\r\n\r\n    const rootNode = this.host.getRootNode();\r\n    if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {\r\n      console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n      return;\r\n    }\r\n\r\n    const reference = rootNode.querySelector<HTMLElement>(`[aria-describedby=\"${id}\"]`);\r\n    if (!reference) {\r\n      console.warn(`Unable to find reference element with aria-describedby ${id}`);\r\n\r\n      return;\r\n    }\r\n\r\n    return reference;\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-onboarding-tip.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/onboarding-tip/onboarding-tip.scss?tag=dso-onboarding-tip&encapsulation=shadow","src/components/onboarding-tip/onboarding-tip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@use \"onboarding-tip.variables\" as onboarding-tip-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n  display: flex !important;\r\n  align-items: center !important;\r\n\r\n  margin-block-end: 0 !important;\r\n  margin-block-start: 0 !important;\r\n\r\n  color: colors.$wit !important;\r\n  line-height: 1.375 !important;\r\n}\r\n\r\n:host {\r\n  --_dso-button-primary-background-color: #{colors.$wit};\r\n  --_dso-button-primary-border-color: #{colors.$wit};\r\n  --_dso-button-primary-color: #{colors.$zwart};\r\n  --_dso-button-primary-hover-background-color: #{colors.$grijs-20};\r\n  --_dso-button-primary-hover-border-color: #{colors.$grijs-20};\r\n  --_dso-button-primary-hover-color: #{colors.$zwart};\r\n  --_dso-button-primary-active-background-color: #{colors.$grijs-40};\r\n  --_dso-button-primary-active-border-color: #{colors.$grijs-40};\r\n  --_dso-button-primary-active-color: #{colors.$zwart};\r\n  --_dso-button-primary-disabled-background-color: #{colors.$wit};\r\n  --_dso-button-primary-disabled-border-color: #{colors.$wit};\r\n  --_dso-button-primary-disabled-color: #{colors.$grijs-30};\r\n\r\n  --_dso-button-secondary-background-color: #{colors.$wit};\r\n  --_dso-button-secondary-border-color: #{colors.$wit};\r\n  --_dso-button-secondary-color: #{colors.$zwart};\r\n  --_dso-button-secondary-hover-background-color: #{colors.$grijs-20};\r\n  --_dso-button-secondary-hover-border-color: #{colors.$grijs-20};\r\n  --_dso-button-secondary-hover-color: #{colors.$zwart};\r\n  --_dso-button-secondary-active-background-color: #{colors.$grijs-40};\r\n  --_dso-button-secondary-active-border-color: #{colors.$grijs-40};\r\n  --_dso-button-secondary-active-color: #{colors.$zwart};\r\n  --_dso-button-secondary-disabled-background-color: #{colors.$wit};\r\n  --_dso-button-secondary-disabled-border-color: #{colors.$wit};\r\n  --_dso-button-secondary-disabled-color: #{colors.$grijs-30};\r\n\r\n  display: block;\r\n  filter: drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4));\r\n\r\n  // Visibility & opacity are updated using Floating-UI\r\n  transition:\r\n    visibility onboarding-tip-variables.$transition-time,\r\n    opacity onboarding-tip-variables.$transition-time;\r\n}\r\n\r\n// Startup fade-in transition\r\n:host(:not([ready])) {\r\n  opacity: 1;\r\n  animation: onboarding-tip-variables.$transition-time ease-in 1 normal both fadeInOpacity;\r\n}\r\n\r\n:host([popover]) {\r\n  margin: 0 !important;\r\n  border: 0;\r\n  padding: 0;\r\n  background-color: transparent;\r\n  overflow: unset;\r\n}\r\n\r\n.onboarding-tip {\r\n  font-family: typography.$font-family-base;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: typography.$line-height-base;\r\n  line-break: auto;\r\n  text-align: start;\r\n  text-decoration: none;\r\n  text-shadow: none;\r\n  text-transform: none;\r\n  letter-spacing: normal;\r\n  overflow-wrap: normal;\r\n  word-spacing: normal;\r\n  white-space: normal;\r\n  font-size: typography.$font-size-small;\r\n  inset-block-start: 0;\r\n  inset-inline-start: 0;\r\n  z-index: zindex.$onboarding-tip;\r\n\r\n  @media screen and (max-width: onboarding-tip-variables.$max-inline-size) {\r\n    padding-inline-start: units.$u1 !important;\r\n  }\r\n}\r\n\r\n.dso-close {\r\n  position: absolute;\r\n  inset-block-start: 4px;\r\n  inset-inline-end: 4px;\r\n}\r\n\r\n.onboarding-tip-inner {\r\n  --link-color: #{colors.$wit};\r\n  --link-hover-color: #{colors.$grijs-30};\r\n  --link-visited-color: #{colors.$grijs-50};\r\n\r\n  max-inline-size: min(#{onboarding-tip-variables.$max-inline-size}, calc(100vw - 2 * #{units.$u1}));\r\n  max-block-size: calc(100vh - 10px); // 10px is the padding given to floating-ui\r\n  overflow: auto;\r\n  padding-block: onboarding-tip-variables.$padding-block;\r\n  padding-inline: onboarding-tip-variables.$padding-inline;\r\n  border-radius: onboarding-tip-variables.$border-radius;\r\n  display: block;\r\n  font-size: typography.$root-font-size-base;\r\n  position: relative;\r\n  z-index: 2; // z-index higher than the arrow\r\n\r\n  @include set-colors.apply(onboarding-tip-variables.$background-color, \"onboarding-tip\");\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n    max-block-size: unset;\r\n  }\r\n}\r\n\r\n.onboarding-tip-arrow {\r\n  border-start-start-radius: onboarding-tip-variables.$border-radius;\r\n  position: absolute;\r\n  block-size: onboarding-tip-variables.$arrow-block-size;\r\n  inline-size: onboarding-tip-variables.$arrow-inline-size;\r\n  background: onboarding-tip-variables.$background-color;\r\n  z-index: 1;\r\n  pointer-events: none;\r\n}\r\n\r\n.onboarding-tip-content-wrapper {\r\n  padding-inline: units.$u2;\r\n  padding-block-end: units.$u2;\r\n}\r\n\r\n.onboarding-tip-content-heading {\r\n  display: flex;\r\n\r\n  dso-icon {\r\n    margin-inline-end: units.$u1;\r\n  }\r\n}\r\n\r\n@keyframes fadeInOpacity {\r\n  0% {\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { OnboardingTipCloseEvent } from \"./onboarding-tip.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-onboarding-tip\",\r\n  styleUrl: \"onboarding-tip.scss\",\r\n  shadow: true,\r\n})\r\nexport class OnboardingTip implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoOnboardingTipElement;\r\n\r\n  /**\r\n   * Where to place the Onboarding Tip relative to its reference element.\r\n   */\r\n  @Prop()\r\n  placement: TooltipPlacement = \"right\";\r\n\r\n  /**\r\n   * Emitted when the user closes the Onboarding Tip.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<OnboardingTipCloseEvent>;\r\n\r\n  @State()\r\n  ready = false;\r\n\r\n  @State()\r\n  popoverOpen = false;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true, characterData: true });\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (!this.host.isConnected) {\r\n      return;\r\n    }\r\n\r\n    if (!this.popoverOpen) {\r\n      this.host.showPopover();\r\n      this.popoverOpen = true;\r\n\r\n      const onboardingTipElement = this.host.shadowRoot?.querySelector(\".onboarding-tip\");\r\n      if (this.hasOnboardingTipElement(onboardingTipElement)) {\r\n        OnboardingTip.setFocus(onboardingTipElement);\r\n      }\r\n    }\r\n\r\n    if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {\r\n      this.cleanUp = positionTooltip({\r\n        referenceElement: this.referenceElement,\r\n        tipRef: this.host,\r\n        tipArrowRef: this.tipArrowRef,\r\n        placementTip: `${this.placement}-start`,\r\n        topPositionSmallViewPort: true,\r\n        halfMainAxisOffset: true,\r\n      });\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n    delete this.mutationObserver;\r\n    if (this.popoverOpen) {\r\n      this.host.hidePopover();\r\n      this.popoverOpen = false;\r\n    }\r\n    this.cleanUp?.();\r\n    this.cleanUp = undefined;\r\n  }\r\n\r\n  /**\r\n   * Set focus on the onboarding tip element and reset tabIndex for accessibility.\r\n   */\r\n  private static setFocus(target: HTMLElement) {\r\n    if (target) {\r\n      target.focus();\r\n    }\r\n  }\r\n\r\n  private hasOnboardingTipElement(element: Element | null | undefined): element is HTMLElement {\r\n    return element instanceof HTMLElement;\r\n  }\r\n\r\n  private blockEscapeKey = (e: KeyboardEvent) => {\r\n    if (e.key === \"Escape\") {\r\n      e.preventDefault();\r\n\r\n      this.dsoClose.emit({ originalEvent: e });\r\n    }\r\n  };\r\n\r\n  render() {\r\n    const ariaLabel = this.headingSlottedElement?.textContent;\r\n    return (\r\n      <Host popover=\"manual\" ready={this.ready} onAnimationend={() => (this.ready = true)}>\r\n        <div role=\"dialog\" class=\"onboarding-tip\" aria-label={ariaLabel} onKeyDown={this.blockEscapeKey} tabindex={-1}>\r\n          <div class=\"onboarding-tip-inner\">\r\n            <div class=\"onboarding-tip-content-wrapper\">\r\n              {this.headingSlottedElement !== null && (\r\n                <div class=\"onboarding-tip-content-heading\">\r\n                  <dso-icon icon=\"light-bulb\"></dso-icon>\r\n                  <slot name=\"heading\" />\r\n                </div>\r\n              )}\r\n              <dso-icon-button\r\n                class=\"dso-close\"\r\n                label=\"Sluiten\"\r\n                variant=\"tertiary\"\r\n                icon=\"times\"\r\n                onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n              />\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n          <div class=\"onboarding-tip-arrow\" ref={(ref) => (this.tipArrowRef = ref)}></div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private tipArrowRef: HTMLDivElement | undefined;\r\n\r\n  private get headingSlottedElement() {\r\n    return this.host.querySelector(\"[slot='heading']\");\r\n  }\r\n\r\n  private cleanUp: TooltipClean | undefined;\r\n\r\n  private get referenceElement(): HTMLElement | undefined {\r\n    const id = this.host.id;\r\n\r\n    if (!id) {\r\n      console.warn(\"Unable to find reference. Onboarding Tip has no [id] attribute.\");\r\n\r\n      return;\r\n    }\r\n\r\n    const rootNode = this.host.getRootNode();\r\n    if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {\r\n      console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n      return;\r\n    }\r\n\r\n    const reference = rootNode.querySelector<HTMLElement>(`[aria-describedby=\"${id}\"]`);\r\n    if (!reference) {\r\n      console.warn(`Unable to find reference element with aria-describedby ${id}`);\r\n\r\n      return;\r\n    }\r\n\r\n    return reference;\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-ozon-content-toggletip.js

@@ -1,4 +1,4 @@
-import { o as ozonContentToggletip, d as defineCustomElement$1 } from './p-J6EVaTGZ.js';
+import { o as ozonContentToggletip, d as defineCustomElement$1 } from './p-B5jOW6NE.js';
 
 const DsoOzonContentToggletip = ozonContentToggletip;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-ozon-content.js

@@ -1,4 +1,4 @@
-import { O as OzonContent, d as defineCustomElement$1 } from './p-Dxf0wJyw.js';
+import { O as OzonContent, d as defineCustomElement$1 } from './p-Br8TuC3x.js';
 
 const DsoOzonContent = OzonContent;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-pagination.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-DBWrx_3r.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$3 } from './p-DAPEW-cK.js';
-import { d as defineCustomElement$2 } from './p-BCQXZLJD.js';
+import { d as defineCustomElement$3 } from './p-C0EnGYRN.js';
+import { d as defineCustomElement$2 } from './p-D0TTjh52.js';
 
 const paginationCss = () => `:host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination ul{padding-inline-start:initial;text-align:center}.pagination ul>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination ul>li>a,.pagination ul>li>span{align-items:center;color:#39870c;display:flex;block-size:2rem;justify-content:center;position:relative;min-inline-size:2rem;padding:2px;padding-block:2px;padding-inline:2px}.pagination ul>li>a:active{background-color:#ebf3e6}.pagination ul>li>span{border:2px solid transparent;border-radius:1rem}.pagination ul>li a{line-height:2rem;text-decoration:none}.pagination ul>li a:hover,.pagination ul>li a:focus{text-decoration:none}.pagination ul>li a:hover::after,.pagination ul>li a:focus::after{border-block-end-color:#39870c}.pagination ul>li a::after{border-block-end:3px solid transparent;inset-block-end:0;content:"";display:inline-block;inset-inline-start:0;position:absolute;inline-size:100%}.pagination ul>li.active span{background-color:#39870c;color:#fff}.pagination ul>li+li{margin-inline-start:8px}.dso-page-hidden{visibility:hidden}.sr-only.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}`;
 

package/dist/bundle/dso-panel.js

@@ -1,4 +1,4 @@
-import { P as Panel, d as defineCustomElement$1 } from './p-D3mPJFiY.js';
+import { P as Panel, d as defineCustomElement$1 } from './p-DlXn_7gE.js';
 
 const DsoPanel = Panel;
 const defineCustomElement = defineCustomElement$1;