@dso-toolkit/core 79.0.0 → 79.1.0

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

@@ -1,9 +1,10 @@
 import { p as proxyCustomElement, H, e as createEvent, h } from './p-Dm38fPV4.js';
 import { i as i18n } from './p-B_kXuEcW.js';
-import { d as defineCustomElement$5 } from './p-BTM2KYEF.js';
-import { d as defineCustomElement$4 } from './p-ZJRJQtDU.js';
-import { d as defineCustomElement$3 } from './p-DiF7pR4b.js';
-import { d as defineCustomElement$2 } from './p-bHDMgCsa.js';
+import { d as defineCustomElement$6 } from './p-Dwv_hVo9.js';
+import { d as defineCustomElement$5 } from './p--HbwCvQM.js';
+import { d as defineCustomElement$4 } from './p-CF3bHKY3.js';
+import { d as defineCustomElement$3 } from './p-DqxeHQ0G.js';
+import { d as defineCustomElement$2 } from './p-CaZRQPYD.js';
 import { v as v4 } from './p-BF0_OXTe.js';
 
 const translations = {
@@ -51,7 +52,7 @@ const MapOverlays = /*@__PURE__*/ proxyCustomElement(class MapOverlays extends H
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '44cfe19384688ab3cd0c0985f5cf6d64c2ece758', class: "form-group dso-checkboxes" }, h("legend", { key: '4f0d0a8da0ae6f595c5121590f8e344a5bd74ff3', class: "sr-only" }, "Kaartlagen"), h("div", { key: '6810430385441404bce4414809beca83398dde46', class: "dso-label-container" }, h("span", { key: 'f9a29340b209718e53c6f00f03c89b873890df70', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'cc6ef66e93a99fd2bf9508145f30cca3ac25cf23', 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: 'c3b999bcfd600744f885128418dcb69aa9a18133', class: "form-group dso-checkboxes" }, h("legend", { key: 'bf13c49ba66ed5a8f0c8ca8ce3b2f4e41de64032', class: "sr-only" }, "Kaartlagen"), h("div", { key: '639e81cdc4f91ee53da11c8aede39fd5c85fc6e7', class: "dso-label-container" }, h("span", { key: '94172cf1232312e5d39e09f99390119f189109ce', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'bb520e45e6a9c58c5bf7013fdbcf5ed39a635d45', 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; }
@@ -63,7 +64,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["dso-map-overlays", "dso-icon", "dso-info", "dso-info-button", "dso-selectable"];
+    const components = ["dso-map-overlays", "dso-icon", "dso-icon-button", "dso-info", "dso-info-button", "dso-selectable"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-map-overlays":
             if (!customElements.get(tagName)) {
@@ -71,6 +72,11 @@ function defineCustomElement$1() {
             }
             break;
         case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "dso-icon-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

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

@@ -1 +1 @@
-{"file":"dso-map-overlays.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","uuidv4"],"sources":["src/components/map-overlays/map-overlays.i18n.ts","src/components/map-overlays/map-overlays.scss?tag=dso-map-overlays&encapsulation=shadow","src/components/map-overlays/map-overlays.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-map-overlays\": {\r\n      title: \"Maplayers\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-map-overlays\": {\r\n      title: \"Kaartlagen\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n}\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// Todo #1194\r\nfieldset {\r\n  border: 0;\r\n  margin: 0;\r\n  min-inline-size: 0;\r\n  padding: 0;\r\n\r\n  .control-label {\r\n    display: inline-block;\r\n    font-weight: bold;\r\n    margin-block-end: units.$u1;\r\n    max-inline-size: 100%;\r\n    text-align: start;\r\n  }\r\n}\r\n\r\np[slot=\"info\"] {\r\n  margin: 0;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\n\r\nimport { translations } from \"./map-overlays.i18n\";\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-overlays\",\r\n  styleUrl: \"./map-overlays.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n  private previousOverlays: Overlay[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  @Element()\r\n  host!: HTMLDsoMapOverlaysElement;\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The overlays.\r\n   */\r\n  @Prop()\r\n  overlays!: Overlay[];\r\n\r\n  /**\r\n   * Emitted when the user selects a different overlay.\r\n   */\r\n  @Event()\r\n  dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n  private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n    const { checked } = e.detail;\r\n\r\n    this.dsoToggleOverlay.emit({ overlay, checked });\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidRender() {\r\n    this.overlays\r\n      .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousOverlays = this.overlays;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-checkboxes\">\r\n        <legend class=\"sr-only\">Kaartlagen</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            {this.text(\"title\")}\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.overlays.map((overlay) => (\r\n            <dso-selectable\r\n              key={overlay.id}\r\n              type=\"checkbox\"\r\n              value={overlay.name}\r\n              checked={overlay.checked}\r\n              disabled={overlay.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n              onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n            >\r\n              {overlay.name}\r\n              {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-map-overlays.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","uuidv4"],"sources":["src/components/map-overlays/map-overlays.i18n.ts","src/components/map-overlays/map-overlays.scss?tag=dso-map-overlays&encapsulation=shadow","src/components/map-overlays/map-overlays.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-map-overlays\": {\r\n      title: \"Maplayers\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-map-overlays\": {\r\n      title: \"Kaartlagen\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n}\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// Todo #1194\r\nfieldset {\r\n  border: 0;\r\n  margin: 0;\r\n  min-inline-size: 0;\r\n  padding: 0;\r\n\r\n  .control-label {\r\n    display: inline-block;\r\n    font-weight: bold;\r\n    margin-block-end: units.$u1;\r\n    max-inline-size: 100%;\r\n    text-align: start;\r\n  }\r\n}\r\n\r\np[slot=\"info\"] {\r\n  margin: 0;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\n\r\nimport { translations } from \"./map-overlays.i18n\";\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-overlays\",\r\n  styleUrl: \"./map-overlays.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n  private previousOverlays: Overlay[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  @Element()\r\n  host!: HTMLDsoMapOverlaysElement;\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The overlays.\r\n   */\r\n  @Prop()\r\n  overlays!: Overlay[];\r\n\r\n  /**\r\n   * Emitted when the user selects a different overlay.\r\n   */\r\n  @Event()\r\n  dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n  private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n    const { checked } = e.detail;\r\n\r\n    this.dsoToggleOverlay.emit({ overlay, checked });\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidRender() {\r\n    this.overlays\r\n      .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousOverlays = this.overlays;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-checkboxes\">\r\n        <legend class=\"sr-only\">Kaartlagen</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            {this.text(\"title\")}\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.overlays.map((overlay) => (\r\n            <dso-selectable\r\n              key={overlay.id}\r\n              type=\"checkbox\"\r\n              value={overlay.name}\r\n              checked={overlay.checked}\r\n              disabled={overlay.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n              onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n            >\r\n              {overlay.name}\r\n              {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1,7 +1,8 @@
 import { p as proxyCustomElement, H, e as createEvent, h } from './p-Dm38fPV4.js';
-import { d as defineCustomElement$2 } from './p-BTM2KYEF.js';
+import { d as defineCustomElement$3 } from './p-Dwv_hVo9.js';
+import { d as defineCustomElement$2 } from './p--HbwCvQM.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;overflow:hidden;clip:rect(0, 0, 0, 0);border: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;border-width:1px;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;overflow:hidden;clip:rect(0, 0, 0, 0);border: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 button{background-color:transparent;border:0;box-shadow:none;color:#39870c;font-size:0;block-size:2.5rem;padding:8px;position:absolute;inset-inline-end:0;text-align:center;inset-block-start:0;inline-size:2.5rem;cursor:pointer}.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 button{appearance:none;padding:0;border:0;background-color:transparent;color:#39870c;cursor:pointer}.dso-button-container 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}";
+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;overflow:hidden;clip:rect(0, 0, 0, 0);border: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;overflow:hidden;clip:rect(0, 0, 0, 0);border: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}";
 
 const MarkBar = /*@__PURE__*/ proxyCustomElement(class MarkBar extends H {
     constructor() {
@@ -25,14 +26,14 @@ const MarkBar = /*@__PURE__*/ proxyCustomElement(class MarkBar extends H {
                 value: e.target.value,
             });
         };
-        this.handleNext = (e) => {
-            this.dsoNext.emit({ originalEvent: e });
+        this.handleNext = (originalEvent) => {
+            this.dsoNext.emit({ originalEvent });
         };
-        this.handlePrevious = (e) => {
-            this.dsoPrevious.emit({ originalEvent: e });
+        this.handlePrevious = (originalEvent) => {
+            this.dsoPrevious.emit({ originalEvent });
         };
-        this.handleClear = (e) => {
-            this.dsoClear.emit({ originalEvent: e });
+        this.handleClear = (originalEvent) => {
+            this.dsoClear.emit({ originalEvent });
         };
         this.handleKeyDown = (e) => {
             if (e.key === "Enter") {
@@ -53,7 +54,7 @@ const MarkBar = /*@__PURE__*/ proxyCustomElement(class MarkBar extends H {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '2f51683143ed7aa90d6f0044dbf24d596d49e74f', class: "dso-mark-bar" }, h("div", { key: '1b87e93d4ce02bdcae6e815d3cd9bb968faa57be', class: "dso-mark-bar-input" }, h("input", { key: '96356e9e9267ee62d28a36c2340b3958376d682d', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '0da995f04b6511ec4124c9fa057cefcab0a20fe3', htmlFor: "search-input" }, h("dso-icon", { key: 'aa8bc72680f66e606f97adb8226533901bde6754', class: "dso-search-icon", icon: "search" }), h("span", { key: 'ef559fce9b3d6b9d30e5460c6f28f30247afbc74', class: "label-text" }, this.label)), h("button", { key: '101773deeea9de62c7b829ec788b4aa340976be0', type: "button", onClick: this.handleClear }, h("dso-icon", { key: 'b89bdc25831d8120eff3ebbb6ceba176b1af94ba', icon: "times" }), h("span", { key: '1dbdcf998680aa61f577f607404f02e9665c14fd', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '7e5043c8f809bdec3b57b033c1369582d79d7249', class: "dso-button-container" }, h("span", { key: '027b49834f3d580243e23403077840abf9ba6ad4', class: "divider" }), h("button", { key: 'd38ebf15cd7a998505d1df8c0724c65d33e715f6', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: 'eb3411f5cf1007511acbadd112dbb0449eef19da', icon: "chevron-up", class: "hydrated" }), h("span", { key: '2542f599f27907a0ffa4256ae4221e4e0dfc7b44', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: '90ccd55aa3c165c72d270bf93dd78b81a7a262bd' }, current, "/", totalCount), h("button", { key: '3dd64af25d3c4886aea790fb1537bd1e251db5bf', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '9aaaed878d2514e31d454e864082f9e25474cb04', icon: "chevron-down", class: "hydrated" }), h("span", { key: 'a5a142f4bee91e8bbf491801e8b4a54b2340cbc4', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (h("div", { key: '3f2390f17346e0f6e8f5922c8205b7d0dbb68f89', class: "dso-mark-bar" }, h("div", { key: '19da44807b5d7be12bf74f601412e0228ada4a49', class: "dso-mark-bar-input" }, h("input", { key: 'fd26a40b6539bc0ac7638e587776819d9a8e2831', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '6b6599311c0068af1470cf2f04defc603740064f', htmlFor: "search-input" }, h("dso-icon", { key: '61e5cf281785c47181144e6a06fbc4f92f1f4ae9', class: "dso-search-icon", icon: "search" }), h("span", { key: '7a7b144411738a1d804e7c75256adccbf922b864', class: "label-text" }, this.label)), h("dso-icon-button", { key: 'bb929394de046b8a3acaff79bda1a51a0768870a', icon: "times", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '32c06190f96d124d6f2d7ac6fe207aedd4af9638', class: "dso-button-container" }, h("span", { key: '988bd229b69150fcc6107f6e291a00c76b04e8b5', class: "divider" }), h("dso-icon-button", { key: '40ae708d4a8676e617d728d3d326d50767394046', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '973aa6d3df09e3809bbcd4c2b96dee8144cae2d6' }, current, "/", totalCount), h("dso-icon-button", { key: 'a26fc60b7e05fe6725f444476afe85345c9f13b8', 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", {
@@ -67,7 +68,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["dso-mark-bar", "dso-icon"];
+    const components = ["dso-mark-bar", "dso-icon", "dso-icon-button"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-mark-bar":
             if (!customElements.get(tagName)) {
@@ -75,6 +76,11 @@ function defineCustomElement$1() {
             }
             break;
         case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "dso-icon-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

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

@@ -1 +1 @@
-{"file":"dso-mark-bar.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/mark-bar/mark-bar.scss?tag=dso-mark-bar&encapsulation=shadow","src/components/mark-bar/mark-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n  background-color: colors.$wit;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n$block-size: units.$ru5;\r\n$focus-border-width: 1px;\r\n\r\n.dso-mark-bar {\r\n  display: flex;\r\n  flex-grow: 1;\r\n\r\n  .dso-mark-bar-input {\r\n    display: flex;\r\n    position: relative;\r\n    inline-size: 100%;\r\n\r\n    input {\r\n      background-color: transparent;\r\n      background-image: none;\r\n      border: 1px solid form-control.$focus-border-color;\r\n      border-radius: 4px;\r\n      border-width: 1px;\r\n      box-shadow: none;\r\n      display: block;\r\n      font-size: typography.$root-font-size-base;\r\n      block-size: $block-size;\r\n      line-height: $block-size;\r\n      padding-inline: $block-size;\r\n      padding-block: 6px;\r\n      transition:\r\n        border-color ease-in-out 0.15s,\r\n        box-shadow ease-in-out 0.15s;\r\n      inline-size: 100%;\r\n      border-start-end-radius: 0;\r\n      border-end-end-radius: 0;\r\n      border-inline-end: 0;\r\n\r\n      &:focus {\r\n        border-color: form-control.$focus-border-color;\r\n        box-shadow: inset 0 0 0 form-control.$focus-border-width form-control.$focus-border-color;\r\n        outline: 0;\r\n      }\r\n\r\n      &::-ms-clear {\r\n        display: none;\r\n      }\r\n\r\n      &:not(:placeholder-shown) + label {\r\n        inline-size: $block-size;\r\n        padding-inline-end: units.$u1;\r\n\r\n        .label-text {\r\n          @include utilities.sr-only();\r\n        }\r\n      }\r\n    }\r\n\r\n    label {\r\n      inset-block-end: units.$u1;\r\n      block-size: $block-size;\r\n      inset-inline-start: 0;\r\n      inset-inline-end: units.$u5;\r\n      padding-block: units.$u1;\r\n      padding-inline-start: units.$u1;\r\n      cursor: text;\r\n      position: absolute;\r\n      inset-block-start: 0;\r\n      overflow: hidden;\r\n      /* stylelint-disable declaration-property-value-disallowed-list -- The following properties are needed to emulate the browser native placeholder attribute behavior */\r\n      white-space: nowrap;\r\n      text-overflow: ellipsis;\r\n      /* stylelint-enable-next-line declaration-property-value-disallowed-list */\r\n\r\n      dso-icon {\r\n        color: colors.$grasgroen;\r\n        cursor: default;\r\n        margin: -8px;\r\n        padding: 8px;\r\n        inline-size: $block-size;\r\n        block-size: $block-size;\r\n      }\r\n\r\n      .label-text {\r\n        margin-inline-start: units.$u1;\r\n        color: colors.$grijs-60;\r\n      }\r\n    }\r\n\r\n    button {\r\n      background-color: transparent;\r\n      border: 0;\r\n      box-shadow: none;\r\n      color: colors.$grasgroen;\r\n      font-size: 0;\r\n      block-size: $block-size;\r\n      padding: units.$u1;\r\n      position: absolute;\r\n      inset-inline-end: 0;\r\n      text-align: center;\r\n      inset-block-start: 0;\r\n      inline-size: $block-size;\r\n      cursor: pointer;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-button-container {\r\n  position: relative;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  gap: units.$u1;\r\n  flex-shrink: 0;\r\n\r\n  padding-inline: units.$u1;\r\n\r\n  border: 1px solid colors.$bosgroen;\r\n  border-inline-start: 0;\r\n  border-start-end-radius: scaffolding.$border-radius-base;\r\n  border-end-end-radius: scaffolding.$border-radius-base;\r\n\r\n  button {\r\n    appearance: none;\r\n    padding: 0;\r\n    border: 0;\r\n    background-color: transparent;\r\n    color: colors.$grasgroen;\r\n    cursor: pointer;\r\n\r\n    &:disabled {\r\n      color: colors.$grijs-20;\r\n      cursor: default;\r\n    }\r\n  }\r\n\r\n  .divider {\r\n    position: absolute;\r\n    inset-inline-start: 0;\r\n    inset-block-start: units.$u1;\r\n    inset-block-end: units.$u1;\r\n\r\n    inline-size: 1px;\r\n\r\n    background-color: colors.$grijs-20;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport {\r\n  MarkBarClearEvent,\r\n  MarkBarFocusOptions,\r\n  MarkBarInputEvent,\r\n  MarkBarPaginationEvent,\r\n} from \"./mark-bar.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-mark-bar\",\r\n  styleUrl: \"./mark-bar.scss\",\r\n  shadow: true,\r\n})\r\nexport class MarkBar implements ComponentInterface {\r\n  /**\r\n   * The current search value.\r\n   */\r\n  @Prop()\r\n  value?: string;\r\n\r\n  /**\r\n   * The label for the input field.\r\n   */\r\n  @Prop()\r\n  label = \"Zoeken in document\";\r\n\r\n  /**\r\n   * The current (one-based) highlighted search item.\r\n   */\r\n  @Prop()\r\n  current?: number;\r\n\r\n  /**\r\n   * Total number of search results.\r\n   */\r\n  @Prop()\r\n  totalCount?: number;\r\n\r\n  /**\r\n   * Focuses the input field.\r\n   */\r\n  @Method()\r\n  async dsoFocus(options: MarkBarFocusOptions = {}) {\r\n    this.inputElement?.focus();\r\n\r\n    if (options.select) {\r\n      this.inputElement?.select();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted each time the user types in the search field.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoInput!: EventEmitter<MarkBarInputEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"next search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoNext!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"previous search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoPrevious!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"clear search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClear!: EventEmitter<MarkBarClearEvent>;\r\n\r\n  private inputElement?: HTMLInputElement;\r\n\r\n  private handleInput = (e: Event) => {\r\n    if (!(e.target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    this.dsoInput.emit({\r\n      originalEvent: e,\r\n      value: e.target.value,\r\n    });\r\n  };\r\n\r\n  private handleNext = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoNext.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handlePrevious = (e: MouseEvent) => {\r\n    this.dsoPrevious.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handleClear = (e: MouseEvent) => {\r\n    this.dsoClear.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent) => {\r\n    if (e.key === \"Enter\") {\r\n      this.handleNext(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    const current = this.current || 0;\r\n    const totalCount = this.totalCount || 0;\r\n\r\n    return (\r\n      <div class=\"dso-mark-bar\">\r\n        <div class=\"dso-mark-bar-input\">\r\n          <input\r\n            type=\"text\"\r\n            id=\"search-input\"\r\n            value={this.value}\r\n            onInput={this.handleInput}\r\n            onKeyDown={this.handleKeyDown}\r\n            placeholder=\" \"\r\n            ref={(element) => (this.inputElement = element)}\r\n          />\r\n          <label htmlFor=\"search-input\">\r\n            <dso-icon class=\"dso-search-icon\" icon=\"search\"></dso-icon>\r\n            <span class=\"label-text\">{this.label}</span>\r\n          </label>\r\n          <button type=\"button\" onClick={this.handleClear}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Zoekopdracht legen</span>\r\n          </button>\r\n        </div>\r\n        <div class=\"dso-button-container\">\r\n          <span class=\"divider\" />\r\n          <button type=\"button\" onClick={this.handlePrevious} disabled={current <= 1}>\r\n            <dso-icon icon=\"chevron-up\" class=\"hydrated\"></dso-icon>\r\n            <span class=\"sr-only\">Vorig zoekresultaat</span>\r\n          </button>\r\n          <span>\r\n            {current}/{totalCount}\r\n          </span>\r\n          <button type=\"button\" onClick={this.handleNext} disabled={current >= totalCount}>\r\n            <dso-icon icon=\"chevron-down\" class=\"hydrated\"></dso-icon>\r\n            <span class=\"sr-only\">Volgend zoekresultaat</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-mark-bar.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/mark-bar/mark-bar.scss?tag=dso-mark-bar&encapsulation=shadow","src/components/mark-bar/mark-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n  background-color: colors.$wit;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n$block-size: units.$ru5;\r\n$focus-border-width: 1px;\r\n\r\n.dso-mark-bar {\r\n  display: flex;\r\n  flex-grow: 1;\r\n\r\n  .dso-mark-bar-input {\r\n    display: flex;\r\n    position: relative;\r\n    inline-size: 100%;\r\n\r\n    input {\r\n      background-color: transparent;\r\n      background-image: none;\r\n      border: 1px solid form-control.$focus-border-color;\r\n      border-radius: 4px;\r\n      box-shadow: none;\r\n      display: block;\r\n      font-size: typography.$root-font-size-base;\r\n      block-size: $block-size;\r\n      line-height: $block-size;\r\n      padding-inline: $block-size;\r\n      padding-block: 6px;\r\n      transition:\r\n        border-color ease-in-out 0.15s,\r\n        box-shadow ease-in-out 0.15s;\r\n      inline-size: 100%;\r\n      border-start-end-radius: 0;\r\n      border-end-end-radius: 0;\r\n      border-inline-end: 0;\r\n\r\n      &:focus {\r\n        border-color: form-control.$focus-border-color;\r\n        box-shadow: inset 0 0 0 form-control.$focus-border-width form-control.$focus-border-color;\r\n        outline: 0;\r\n      }\r\n\r\n      &::-ms-clear {\r\n        display: none;\r\n      }\r\n\r\n      &:not(:placeholder-shown) + label {\r\n        inline-size: $block-size;\r\n        padding-inline-end: units.$u1;\r\n\r\n        .label-text {\r\n          @include utilities.sr-only();\r\n        }\r\n      }\r\n    }\r\n\r\n    label {\r\n      inset-block-end: units.$u1;\r\n      block-size: $block-size;\r\n      inset-inline-start: 0;\r\n      inset-inline-end: units.$u5;\r\n      padding-block: units.$u1;\r\n      padding-inline-start: units.$u1;\r\n      cursor: text;\r\n      position: absolute;\r\n      inset-block-start: 0;\r\n      overflow: hidden;\r\n      /* stylelint-disable declaration-property-value-disallowed-list -- The following properties are needed to emulate the browser native placeholder attribute behavior */\r\n      white-space: nowrap;\r\n      text-overflow: ellipsis;\r\n      /* stylelint-enable-next-line declaration-property-value-disallowed-list */\r\n\r\n      dso-icon {\r\n        color: colors.$grasgroen;\r\n        cursor: default;\r\n        margin: -8px;\r\n        padding: 8px;\r\n        inline-size: $block-size;\r\n        block-size: $block-size;\r\n      }\r\n\r\n      .label-text {\r\n        margin-inline-start: units.$u1;\r\n        color: colors.$grijs-60;\r\n      }\r\n    }\r\n\r\n    dso-icon-button {\r\n      position: absolute;\r\n      inset-inline-end: units.$u1;\r\n      inset-block-start: units.$u1;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-button-container {\r\n  position: relative;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  gap: units.$u1;\r\n  flex-shrink: 0;\r\n\r\n  padding-inline: units.$u1;\r\n\r\n  border: 1px solid colors.$bosgroen;\r\n  border-inline-start: 0;\r\n  border-start-end-radius: scaffolding.$border-radius-base;\r\n  border-end-end-radius: scaffolding.$border-radius-base;\r\n\r\n  dso-icon-button {\r\n    --dso-icon-button-tertiary-border: 0;\r\n    cursor: pointer;\r\n\r\n    &:disabled {\r\n      color: colors.$grijs-20;\r\n      cursor: default;\r\n    }\r\n  }\r\n\r\n  .divider {\r\n    position: absolute;\r\n    inset-inline-start: 0;\r\n    inset-block-start: units.$u1;\r\n    inset-block-end: units.$u1;\r\n\r\n    inline-size: 1px;\r\n\r\n    background-color: colors.$grijs-20;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport {\r\n  MarkBarClearEvent,\r\n  MarkBarFocusOptions,\r\n  MarkBarInputEvent,\r\n  MarkBarPaginationEvent,\r\n} from \"./mark-bar.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-mark-bar\",\r\n  styleUrl: \"./mark-bar.scss\",\r\n  shadow: true,\r\n})\r\nexport class MarkBar implements ComponentInterface {\r\n  /**\r\n   * The current search value.\r\n   */\r\n  @Prop()\r\n  value?: string;\r\n\r\n  /**\r\n   * The label for the input field.\r\n   */\r\n  @Prop()\r\n  label = \"Zoeken in document\";\r\n\r\n  /**\r\n   * The current (one-based) highlighted search item.\r\n   */\r\n  @Prop()\r\n  current?: number;\r\n\r\n  /**\r\n   * Total number of search results.\r\n   */\r\n  @Prop()\r\n  totalCount?: number;\r\n\r\n  /**\r\n   * Focuses the input field.\r\n   */\r\n  @Method()\r\n  async dsoFocus(options: MarkBarFocusOptions = {}) {\r\n    this.inputElement?.focus();\r\n\r\n    if (options.select) {\r\n      this.inputElement?.select();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted each time the user types in the search field.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoInput!: EventEmitter<MarkBarInputEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"next search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoNext!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"previous search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoPrevious!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"clear search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClear!: EventEmitter<MarkBarClearEvent>;\r\n\r\n  private inputElement?: HTMLInputElement;\r\n\r\n  private handleInput = (e: Event) => {\r\n    if (!(e.target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    this.dsoInput.emit({\r\n      originalEvent: e,\r\n      value: e.target.value,\r\n    });\r\n  };\r\n\r\n  private handleNext = (originalEvent: MouseEvent | KeyboardEvent) => {\r\n    this.dsoNext.emit({ originalEvent });\r\n  };\r\n\r\n  private handlePrevious = (originalEvent: MouseEvent) => {\r\n    this.dsoPrevious.emit({ originalEvent });\r\n  };\r\n\r\n  private handleClear = (originalEvent: MouseEvent) => {\r\n    this.dsoClear.emit({ originalEvent });\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent) => {\r\n    if (e.key === \"Enter\") {\r\n      this.handleNext(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    const current = this.current || 0;\r\n    const totalCount = this.totalCount || 0;\r\n\r\n    return (\r\n      <div class=\"dso-mark-bar\">\r\n        <div class=\"dso-mark-bar-input\">\r\n          <input\r\n            type=\"text\"\r\n            id=\"search-input\"\r\n            value={this.value}\r\n            onInput={this.handleInput}\r\n            onKeyDown={this.handleKeyDown}\r\n            placeholder=\" \"\r\n            ref={(element) => (this.inputElement = element)}\r\n          />\r\n          <label htmlFor=\"search-input\">\r\n            <dso-icon class=\"dso-search-icon\" icon=\"search\"></dso-icon>\r\n            <span class=\"label-text\">{this.label}</span>\r\n          </label>\r\n          <dso-icon-button\r\n            icon=\"times\"\r\n            variant=\"tertiary\"\r\n            label=\"Zoekopdracht legen\"\r\n            onDsoClick={(e) => this.handleClear(e.detail.originalEvent)}\r\n          />\r\n        </div>\r\n        <div class=\"dso-button-container\">\r\n          <span class=\"divider\" />\r\n          <dso-icon-button\r\n            icon=\"chevron-up\"\r\n            variant=\"tertiary\"\r\n            label=\"Vorig zoekresultaat\"\r\n            onDsoClick={(e) => this.handlePrevious(e.detail.originalEvent)}\r\n            disabled={current <= 1}\r\n          />\r\n          <span>\r\n            {current}/{totalCount}\r\n          </span>\r\n          <dso-icon-button\r\n            icon=\"chevron-down\"\r\n            variant=\"tertiary\"\r\n            label=\"Volgend zoekresultaat\"\r\n            onDsoClick={(e) => this.handleNext(e.detail.originalEvent)}\r\n            disabled={current >= totalCount}\r\n          />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-modal.js

@@ -1,8 +1,9 @@
 import { p as proxyCustomElement, H, e as createEvent, h } from './p-Dm38fPV4.js';
 import { g as getActiveElement } from './p-CodDyi2J.js';
 import { i as i18n } from './p-B_kXuEcW.js';
-import { d as defineCustomElement$3 } from './p-BTM2KYEF.js';
-import { d as defineCustomElement$2 } from './p-CTAU8JKT.js';
+import { d as defineCustomElement$4 } from './p-Dwv_hVo9.js';
+import { d as defineCustomElement$3 } from './p--HbwCvQM.js';
+import { d as defineCustomElement$2 } from './p-DZgHugpQ.js';
 import { v as v4 } from './p-BF0_OXTe.js';
 
 const translations = {
@@ -20,7 +21,7 @@ const translations = {
     },
 };
 
-const modalCss = "@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body ul ul,.dso-modal>.dso-dialog>.dso-body ul ol,.dso-modal>.dso-dialog>.dso-body ol ul,.dso-modal>.dso-dialog>.dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>.dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>.dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ol,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal .dso-body:focus-visible{outline:none}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}.dso-modal .dso-footer{min-block-size:80px;padding-block:16px;padding-inline:32px;text-align:end}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding-block:8px;padding-inline:16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding-block:16px;padding-inline:24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding-block:8px;padding-inline:32px}}.dso-close dso-icon{color:#39870c}";
+const modalCss = "@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body ul ul,.dso-modal>.dso-dialog>.dso-body ul ol,.dso-modal>.dso-dialog>.dso-body ol ul,.dso-modal>.dso-dialog>.dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>.dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>.dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ol,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal .dso-body:focus-visible{outline:none}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}.dso-modal .dso-footer{min-block-size:80px;padding-block:16px;padding-inline:32px;text-align:end}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding-block:8px;padding-inline:16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding-block:16px;padding-inline:24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding-block:8px;padding-inline:32px}}.dso-modal .dso-header dso-icon-button{position:absolute;inset-block-start:22px;inset-inline-end:17px}";
 
 const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends H {
     constructor() {
@@ -88,7 +89,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends H {
     }
     render() {
         var _a;
-        return (h("dialog", { key: '5eaf8af4a00b6cea08b9872f996c9a7f0e50e17d', 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: '54dfc35e622941cceeb9b1b1db6e9f61fb1ee54b', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '970b0770174b51254db71bbb4ea22bdade8523b2' }, h("div", { key: 'e8ac2cb14083dbb5d548fa3850d90b1233c5262e', class: "dso-body", tabIndex: 0 }, h("slot", { key: '781818fbf88305b194650eb940ee73022c07ada8', name: "body" }))), this.hasFooter && (h("div", { key: '0ea3d9327df101d07b19f171c8f7ce1cf1b96d3b', class: "dso-footer" }, h("slot", { key: 'c42adf6d3d293ab3bfc3278125bc99932ed3d55b', name: "footer" }))))));
+        return (h("dialog", { key: '0a59daede2da8cea1862697b21a2c0cefe2ad2ba', 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: '1aa3945eefc77e466cf5f5a8176441f3341227c9', 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: '8b4f73119c03e79c411cf2be522a22347d5734ba' }, h("div", { key: 'eaf1dd3795fd7f29f784b19028a29f4adef739b1', class: "dso-body", tabIndex: 0 }, h("slot", { key: '6941bcfc9c5c38fbc1b4a7e54f5f6abf9b83938c', name: "body" }))), this.hasFooter && (h("div", { key: 'f1367f0059cde476a93126459a97e79be952ae4e', class: "dso-footer" }, h("slot", { key: '0ac156c12718075bebb54010cc360c118faa7bfd', name: "footer" }))))));
     }
     get host() { return this; }
     static get style() { return modalCss; }
@@ -104,7 +105,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["dso-modal", "dso-icon", "dso-scrollable"];
+    const components = ["dso-modal", "dso-icon", "dso-icon-button", "dso-scrollable"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-modal":
             if (!customElements.get(tagName)) {
@@ -112,6 +113,11 @@ function defineCustomElement$1() {
             }
             break;
         case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "dso-icon-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

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

@@ -1 +1 @@
-{"file":"dso-modal.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/modal/modal.i18n.ts","src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-modal\": {\r\n      close: \"Close\",\r\n      dialog: \"Dialog\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-modal\": {\r\n      close: \"Sluiten\",\r\n      dialog: \"Dialoog\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n  @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  :host dialog {\r\n    @include modal.fullscreen();\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n  @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n  dso-icon {\r\n    color: modal.$close-icon-color;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, h } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./modal.i18n\";\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  dialogRole: string | null = \"dialog\";\r\n\r\n  /**\r\n   * The element to return focus to after the modal is closed.\r\n   *\r\n   * * `undefined` will return focus to the previously focused element (default).\r\n   * * `false` will not return focus to any element.\r\n   * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n   */\r\n  @Prop()\r\n  returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  closable = false;\r\n\r\n  private returnFocusElement: HTMLElement | undefined;\r\n\r\n  /**\r\n   * Emitted when the user:\r\n   * - clicks the close button\r\n   * - dismisses the Modal with the Escape button\r\n   * - clicks or taps outside the Modal\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  get hasFooter() {\r\n    return this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidLoad(): void {\r\n    if (this.htmlDialogElement?.isConnected) {\r\n      const activeElement = getActiveElement();\r\n      if (activeElement instanceof HTMLElement) {\r\n        this.returnFocusElement = activeElement;\r\n      }\r\n\r\n      this.htmlDialogElement.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.htmlDialogElement?.close();\r\n\r\n    if (this.returnFocus === false) {\r\n      return;\r\n    }\r\n\r\n    (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n  }\r\n\r\n  private handleDialogClick(e: MouseEvent) {\r\n    if (!this.closable) {\r\n      return;\r\n    }\r\n\r\n    if (e.target === this.htmlDialogElement) {\r\n      this.dsoClose.emit({ originalEvent: e });\r\n    }\r\n  }\r\n\r\n  private blockEscapeKey = (e: KeyboardEvent) => {\r\n    if (e.key === \"Escape\") {\r\n      e.preventDefault();\r\n\r\n      if (this.closable) {\r\n        this.dsoClose.emit({ originalEvent: e });\r\n      }\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.dialogRole ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onClick={(e) => this.handleDialogClick(e)}\r\n        onKeyDown={(e) => this.blockEscapeKey(e)}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.closable && (\r\n                <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">{this.text(\"close\")}</span>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              {this.text(\"dialog\")}\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-modal.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/modal/modal.i18n.ts","src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-modal\": {\r\n      close: \"Close\",\r\n      dialog: \"Dialog\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-modal\": {\r\n      close: \"Sluiten\",\r\n      dialog: \"Dialoog\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n  @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  :host dialog {\r\n    @include modal.fullscreen();\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n  @include modal.root();\r\n\r\n  .dso-header {\r\n    dso-icon-button {\r\n      position: absolute;\r\n      inset-block-start: 22px;\r\n      inset-inline-end: 17px;\r\n    }\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, h } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./modal.i18n\";\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  dialogRole: string | null = \"dialog\";\r\n\r\n  /**\r\n   * The element to return focus to after the modal is closed.\r\n   *\r\n   * * `undefined` will return focus to the previously focused element (default).\r\n   * * `false` will not return focus to any element.\r\n   * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n   */\r\n  @Prop()\r\n  returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  closable = false;\r\n\r\n  private returnFocusElement: HTMLElement | undefined;\r\n\r\n  /**\r\n   * Emitted when the user:\r\n   * - clicks the close button\r\n   * - dismisses the Modal with the Escape button\r\n   * - clicks or taps outside the Modal\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  get hasFooter() {\r\n    return this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidLoad(): void {\r\n    if (this.htmlDialogElement?.isConnected) {\r\n      const activeElement = getActiveElement();\r\n      if (activeElement instanceof HTMLElement) {\r\n        this.returnFocusElement = activeElement;\r\n      }\r\n\r\n      this.htmlDialogElement.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.htmlDialogElement?.close();\r\n\r\n    if (this.returnFocus === false) {\r\n      return;\r\n    }\r\n\r\n    (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n  }\r\n\r\n  private handleDialogClick(e: MouseEvent) {\r\n    if (!this.closable) {\r\n      return;\r\n    }\r\n\r\n    if (e.target === this.htmlDialogElement) {\r\n      this.dsoClose.emit({ originalEvent: e });\r\n    }\r\n  }\r\n\r\n  private blockEscapeKey = (e: KeyboardEvent) => {\r\n    if (e.key === \"Escape\") {\r\n      e.preventDefault();\r\n\r\n      if (this.closable) {\r\n        this.dsoClose.emit({ originalEvent: e });\r\n      }\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.dialogRole ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onClick={(e) => this.handleDialogClick(e)}\r\n        onKeyDown={(e) => this.blockEscapeKey(e)}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.closable && (\r\n                <dso-icon-button\r\n                  id=\"close-modal\"\r\n                  icon=\"times\"\r\n                  variant=\"tertiary\"\r\n                  label={this.text(\"close\")}\r\n                  onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n                />\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              {this.text(\"dialog\")}\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-Dm38fPV4.js';
-import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow, h as hide } from './p-gdsca1fx.js';
-import { d as defineCustomElement$2 } from './p-BTM2KYEF.js';
+import { p as positionTooltip, d as defineCustomElement$2 } from './p--HbwCvQM.js';
+import { d as defineCustomElement$3 } from './p-Dwv_hVo9.js';
 
-const onboardingTipCss = "*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border: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:anywhere;word-spacing:normal;word-wrap: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{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none;position:absolute;inset-block-start:0;inset-inline-end:0;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-close[disabled]{cursor:default}.dso-close::-moz-focus-inner{border:0;padding:0}.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}.onboarding-tip-inner{background-color:#2b5780;border-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}}";
+const onboardingTipCss = "*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border: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:anywhere;word-spacing:normal;word-wrap: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}.onboarding-tip-inner{--_dso-icon-button-tertiary-color:#fff;background-color:#2b5780;border-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}}";
 
 const OnboardingTip = /*@__PURE__*/ proxyCustomElement(class OnboardingTip extends H {
     constructor() {
@@ -21,7 +21,14 @@ const OnboardingTip = /*@__PURE__*/ proxyCustomElement(class OnboardingTip exten
             this.host.showPopover();
         }
         if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof H) {
-            this.cleanUp = OnboardingTip.positionTip(this.referenceElement, this.host, this.tipArrowRef, this.placement);
+            this.cleanUp = positionTooltip({
+                referenceElement: this.referenceElement,
+                tipRef: this.host,
+                tipArrowRef: this.tipArrowRef,
+                placementTip: `${this.placement}-start`,
+                topPositionSmallViewPort: true,
+                halfMainAxisOffset: true,
+            });
         }
     }
     disconnectedCallback() {
@@ -32,99 +39,8 @@ const OnboardingTip = /*@__PURE__*/ proxyCustomElement(class OnboardingTip exten
         (_a = this.cleanUp) === null || _a === void 0 ? void 0 : _a.call(this);
         this.cleanUp = undefined;
     }
-    /**
-     * This function positions the Onboarding Tip relative to its reference element. It is static so the position is calculated
-     * only using the passed arguments.
-     */
-    static positionTip(referenceElement, tipRef, tipArrowRef, position) {
-        const padding = 5;
-        return autoUpdate(referenceElement, tipRef, () => {
-            const arrowLength = tipArrowRef.offsetWidth;
-            // Get half the arrow box's hypotenuse length
-            const mainAxisOffset = Math.sqrt(2 * arrowLength ** 2) / 2;
-            // 1.5 times the diagonal of the arrow box
-            const arrowPadding = arrowLength * Math.sqrt(2) * 1.5;
-            // Same as media-query-breakpoints.$screen-md-min
-            const smallViewport = document.body.clientWidth < 992;
-            // Only use top and bottom placement when the viewport is small
-            const placement = smallViewport ? "top" : `${position}-start`;
-            computePosition(referenceElement, tipRef, {
-                strategy: "fixed",
-                middleware: [
-                    offset({
-                        mainAxis: mainAxisOffset,
-                        alignmentAxis: -arrowPadding,
-                    }),
-                    flip({
-                        padding,
-                    }),
-                    shift({
-                        padding,
-                    }),
-                    arrow({
-                        padding: arrowPadding,
-                        element: tipArrowRef,
-                    }),
-                    hide({
-                        padding: arrowPadding + arrowLength + padding,
-                    }),
-                ],
-                placement,
-            }).then(({ x, y, middlewareData, placement: computedPlacement }) => {
-                if (middlewareData.hide) {
-                    // Tooltip needs to be visible at all times on small viewports
-                    const disappear = !smallViewport && middlewareData.hide.referenceHidden;
-                    Object.assign(tipRef.style, {
-                        // Both of these properties have a CSS transition
-                        visibility: disappear ? "hidden" : "visible",
-                        opacity: disappear ? 0 : 1,
-                    });
-                }
-                Object.assign(tipRef.style, {
-                    left: `${x}px`,
-                    top: `${y}px`,
-                });
-                const side = computedPlacement.split("-")[0];
-                const staticSide = side
-                    ? {
-                        top: "bottom",
-                        right: "left",
-                        bottom: "top",
-                        left: "right",
-                    }[side]
-                    : "top";
-                let angle;
-                switch (staticSide) {
-                    default:
-                    case "top":
-                        angle = 45;
-                        break;
-                    case "right":
-                        angle = 135;
-                        break;
-                    case "bottom":
-                        angle = 225;
-                        break;
-                    case "left":
-                        angle = 315;
-                        break;
-                }
-                if (middlewareData.arrow && staticSide) {
-                    const { x: arrowX, y: arrowY } = middlewareData.arrow;
-                    Object.assign(tipArrowRef.style, {
-                        right: "",
-                        bottom: "",
-                        left: arrowX ? `${arrowX}px` : "",
-                        top: arrowY ? `${arrowY}px` : "",
-                        [staticSide]: `${-arrowLength / 2}px`,
-                        transform: `rotate(${angle}deg)`,
-                    });
-                }
-            });
-        });
-    }
     render() {
-        return (h(Host, { key: '9e95f4aac90d260519b2a7ff6a73611425e80029', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: 'f3fae0538f18ba45cf4d3a5900c770bf2fd78b22', class: "onboarding-tip", role: "tooltip" }, h("div", { key: '0da06e61c4e0b4871549495651186a1816ffd32f', class: "onboarding-tip-inner" }, h("div", { key: '808d9c41199361e12d657740a4f90d8b03be0e84', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '7beef1ae7f1b6ce1c65e5a4a6397ddd1737874e3', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: 'b01ba0de8b8763db7f8fce1a8d8d910b904bc267', icon: "light-bulb" }), h("slot", { key: 'cb162bbc40af0eb2f2d4f41a9a68c0a7c42d87c3', name: "heading" }))), h("button", { key: '34b22883f094f6cfcc800f6a821fbdf9244c3eb4', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { key: '123f94baa5049a3eef447b83ec544cf4aa957aa0', icon: "times" }), h("span", { key: 'e61ed7ac4c826b55d562e419bbb2db7d04507f95', class: "sr-only" }, "Sluiten")), h("slot", { key: '96faa01f5381ae5ba3e16cf3af25ec66f45f4ea7' }))), h("div", { key: 'e88ab7543ef36c0a9265848a789cdcf45dff10a5', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: 'bd723d0214e5604c3f99c7cf5ece0e1cbe6607d3', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '16615b7d71fde79e7f399e3ed98e25d869309fca', class: "onboarding-tip", role: "tooltip" }, h("div", { key: '821435d563c0c65647111b8e78fc4ba977409b96', class: "onboarding-tip-inner" }, h("div", { key: 'f4c3a23d25bd18e1ceee8ae18f7619dc14b9e7b7', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'b83c3a2cd62a9f86efff9653a04b7c3d6db73b69', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '3cf10004da4f636ab8d08a1eb7ec6361fb788e36', icon: "light-bulb" }), h("slot", { key: '912bb0c3e062bdc1c1f72bcf1fd4d0e9b4253b67', name: "heading" }))), h("dso-icon-button", { key: '7f8372c8f6677687f2fb372b4015851b326a030b', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: '1b4cd3b10a3d52f60b6592a33c6922d9a2a2b6b1' }))), h("div", { key: '6adcfa3c5ffc54d275fe2d35621f075669ddb254', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");
@@ -140,7 +56,7 @@ const OnboardingTip = /*@__PURE__*/ proxyCustomElement(class OnboardingTip exten
             console.warn(`rootNode is not instance of Document or ShadowRoot`);
             return;
         }
-        const reference = rootNode.querySelector(`[aria-describedby="${id}`);
+        const reference = rootNode.querySelector(`[aria-describedby="${id}"]`);
         if (!reference) {
             console.warn(`Unable to find reference element with aria-describedby ${id}`);
             return;
@@ -157,7 +73,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["dso-onboarding-tip", "dso-icon"];
+    const components = ["dso-onboarding-tip", "dso-icon", "dso-icon-button"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-onboarding-tip":
             if (!customElements.get(tagName)) {
@@ -165,6 +81,11 @@ function defineCustomElement$1() {
             }
             break;
         case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "dso-icon-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }