@dso-toolkit/core 47.0.1 → 49.0.0

package/dist/components/dso-info-button.js

@@ -0,0 +1,6 @@
+import { I as InfoButton, d as defineCustomElement$1 } from './info-button.js';
+
+const DsoInfoButton = InfoButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoInfoButton, defineCustomElement };

package/dist/components/dso-info.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoInfo extends Components.DsoInfo, HTMLElement {}
+export const DsoInfo: {
+  prototype: DsoInfo;
+  new (): DsoInfo;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/dso-info.js

@@ -0,0 +1,6 @@
+import { I as Info, d as defineCustomElement$1 } from './info.js';
+
+const DsoInfo = Info;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoInfo, defineCustomElement };

package/dist/components/dso-label.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoLabel extends Components.DsoLabel, HTMLElement {}
+export const DsoLabel: {
+  prototype: DsoLabel;
+  new (): DsoLabel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/dso-label.js

@@ -0,0 +1,156 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const labelCss = ":host{display:inline-block;max-width:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{background-color:#f2f2f2;border-radius:4px;color:#191919;display:inline-block;line-height:1.5;max-width:100%}.dso-label:not(.dso-label-bright){padding:4px 8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:right;font-size:1rem;margin-bottom:-4px;margin-left:8px;margin-right:-4px;margin-top:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label.dso-compact{border:0;padding:0 8px}.dso-label.dso-label-info{background-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{background-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;color:#191919}.dso-label.dso-label-danger{background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;color:#191919;border:1px solid #ccc;padding:3px 7px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-width:calc(100% - 28px)}";
+
+function hasEllipses(el) {
+  return el.scrollWidth > el.clientWidth;
+}
+const Label = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dsoRemoveClick = createEvent(this, "dsoRemoveClick", 7);
+    this.mutationObserver = new MutationObserver(() => {
+      this.labelText = this.host.innerText;
+      if (this.truncate) {
+        this.truncateLabel();
+      }
+    });
+    this.resizeObserver = new ResizeObserver(() => this.truncateLabel());
+    this.keydownListenerActive = false;
+    this.keyDownListener = (event) => {
+      if (event.key === "Escape") {
+        this.textHover = false;
+        this.textFocus = false;
+      }
+    };
+    this.compact = undefined;
+    this.removable = undefined;
+    this.status = undefined;
+    this.removeHover = undefined;
+    this.removeFocus = undefined;
+    this.truncate = undefined;
+    this.textHover = undefined;
+    this.textFocus = undefined;
+    this.truncatedContent = undefined;
+    this.labelText = undefined;
+  }
+  watchTruncate(truncate) {
+    if (truncate) {
+      this.startTruncate();
+    }
+    else {
+      this.stopTruncate();
+    }
+  }
+  watchTooltipActive() {
+    if (!this.keydownListenerActive && (this.textHover || this.textFocus)) {
+      document.addEventListener("keydown", this.keyDownListener);
+      this.keydownListenerActive = true;
+    }
+    if (!this.textHover && !this.textFocus) {
+      document.removeEventListener("keydown", this.keyDownListener);
+      this.keydownListenerActive = false;
+    }
+  }
+  truncateLabel() {
+    setTimeout(() => {
+      if (this.labelContent) {
+        this.truncatedContent = hasEllipses(this.labelContent) ? this.host.innerText : undefined;
+      }
+    });
+  }
+  componentDidLoad() {
+    this.labelText = this.host.innerText;
+    this.mutationObserver.observe(this.host, {
+      attributes: true,
+      subtree: true,
+    });
+    if (this.truncate) {
+      this.startTruncate();
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.stopTruncate();
+  }
+  startTruncate() {
+    this.resizeObserver.observe(this.host);
+    this.truncateLabel();
+  }
+  stopTruncate() {
+    document.removeEventListener("keydown", this.keyDownListener);
+    this.resizeObserver.unobserve(this.host);
+    this.truncatedContent = undefined;
+    this.keydownListenerActive = false;
+  }
+  render() {
+    const status = this.status && Label.statusMap.get(this.status);
+    return (h(Host, { "aria-roledescription": this.truncate && this.truncatedContent
+        ? "Deze tekst is visueel afgekapt en wordt volledig zichtbaar bij focus."
+        : undefined }, h("span", { "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
+        [`dso-label-${this.status}`]: this.status,
+        "dso-compact": this.compact && !this.removable,
+        "dso-hover": this.removeHover || this.removeFocus,
+      }) }, h("slot", { name: "symbol" }), status && h("span", { class: "sr-only" }, status, ": "), h("span", { class: clsx("dso-label-content", {
+        "dso-truncate": !!this.truncate,
+      }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.truncatedContent ? 0 : -1, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", null)), this.removable && (h("button", { type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { icon: "times" })))), h("dso-tooltip", { stateless: true, id: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top", strategy: "absolute" }, this.truncatedContent)));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "truncate": ["watchTruncate"],
+    "textHover": ["watchTooltipActive"],
+    "textFocus": ["watchTooltipActive"]
+  }; }
+  static get style() { return labelCss; }
+}, [1, "dso-label", {
+    "compact": [4],
+    "removable": [4],
+    "status": [1],
+    "truncate": [4],
+    "removeHover": [32],
+    "removeFocus": [32],
+    "textHover": [32],
+    "textFocus": [32],
+    "truncatedContent": [32],
+    "labelText": [32]
+  }]);
+Label.statusMap = new Map([
+  ["info", "Opmerking"],
+  ["success", "Gelukt"],
+  ["warning", "Waarschuwing"],
+  ["danger", "Fout"],
+]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-label", "dso-icon", "dso-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-label":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Label);
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "dso-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DsoLabel = Label;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoLabel, defineCustomElement };

package/dist/components/dso-map-base-layers.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoMapBaseLayers extends Components.DsoMapBaseLayers, HTMLElement {}
+export const DsoMapBaseLayers: {
+  prototype: DsoMapBaseLayers;
+  new (): DsoMapBaseLayers;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,80 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './info.js';
+import { d as defineCustomElement$3 } from './info-button.js';
+import { d as defineCustomElement$2 } from './selectable.js';
+import { v as v4 } from './v4.js';
+
+const mapBaseLayersCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}p[slot=info]{margin:0}";
+
+const MapBaseLayers = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dsoBaseLayerChange = createEvent(this, "dsoBaseLayerChange", 7);
+    this.selectableRefs = {};
+    this.group = v4();
+    this.baseLayers = undefined;
+  }
+  baseLayerChangeHandler(baseLayer) {
+    this.dsoBaseLayerChange.emit({ activeBaseLayer: baseLayer });
+  }
+  componentDidRender() {
+    this.baseLayers
+      .filter((l) => { var _a, _b; return !l.disabled && ((_b = (_a = this.previousBaselayers) === null || _a === void 0 ? void 0 : _a.find((p) => p.id === l.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
+      .forEach((o) => {
+      var _a;
+      (_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
+    });
+    this.previousBaselayers = this.baseLayers;
+  }
+  render() {
+    for (const ref in this.selectableRefs) {
+      delete this.selectableRefs[ref];
+    }
+    return (h("fieldset", { class: "form-group dso-radios" }, h("legend", { class: "sr-only" }, "Achtergrond"), h("div", { class: "dso-label-container" }, h("span", { class: "control-label", "aria-hidden": "true" }, "Achtergrond")), h("div", { class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, 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))))));
+  }
+  static get style() { return mapBaseLayersCss; }
+}, [1, "dso-map-base-layers", {
+    "group": [1],
+    "baseLayers": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-map-base-layers", "dso-icon", "dso-info", "dso-info-button", "dso-selectable"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-map-base-layers":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MapBaseLayers);
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "dso-info":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "dso-info-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "dso-selectable":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DsoMapBaseLayers = MapBaseLayers;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoMapBaseLayers, defineCustomElement };

package/dist/components/dso-map-controls.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoMapControls extends Components.DsoMapControls, HTMLElement {}
+export const DsoMapControls: {
+  prototype: DsoMapControls;
+  new (): DsoMapControls;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,86 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const mapControlsCss = ":host {\n  background-color: #fff;\n  border: 1px solid #ccc;\n  bottom: 0;\n  display: block;\n  font-family: Asap, sans-serif;\n  position: absolute;\n  top: 0;\n  left: 100%;\n  transition: transform 300ms ease;\n  width: 300px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([open]) {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n  transform: translateX(-100%);\n}\n:host([open]) #toggle-visibility-button {\n  display: none;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n#toggle-visibility-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  font-weight: 600;\n  margin-right: 16px;\n  padding: 8px 16px;\n  white-space: nowrap;\n  position: absolute;\n  right: calc(100% + 56px);\n  top: 16px;\n}\n#toggle-visibility-button:focus, #toggle-visibility-button:focus-visible {\n  outline-offset: 2px;\n}\n#toggle-visibility-button:active {\n  outline: 0;\n}\n#toggle-visibility-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n#toggle-visibility-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n#toggle-visibility-button[disabled], #toggle-visibility-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n#toggle-visibility-button.btn-sm {\n  line-height: 1rem;\n}\n#toggle-visibility-button.btn-sm dso-icon,\n#toggle-visibility-button.btn-sm svg.di, #toggle-visibility-button.btn-sm.extern::after, #toggle-visibility-button.btn-sm.download::after, #toggle-visibility-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n#toggle-visibility-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n#toggle-visibility-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n#toggle-visibility-button dso-icon,\n#toggle-visibility-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n#toggle-visibility-button span + dso-icon,\n#toggle-visibility-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n#toggle-visibility-button.dso-spinner-left[disabled], #toggle-visibility-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n#toggle-visibility-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n#toggle-visibility-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n#toggle-visibility-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n#toggle-visibility-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n#toggle-visibility-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n#toggle-visibility-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n#toggle-visibility-button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n\n#zoom-buttons {\n  border-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  display: flex;\n  flex-wrap: wrap;\n  flex: 0 0;\n  position: absolute;\n  right: calc(100% + 16px);\n  top: 16px;\n}\n#zoom-buttons button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n#zoom-buttons button:focus, #zoom-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n#zoom-buttons button:active {\n  outline: 0;\n}\n#zoom-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n#zoom-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n#zoom-buttons button[disabled], #zoom-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n#zoom-buttons button.btn-sm {\n  line-height: 1rem;\n}\n#zoom-buttons button.btn-sm dso-icon,\n#zoom-buttons button.btn-sm svg.di, #zoom-buttons button.btn-sm.extern::after, #zoom-buttons button.btn-sm.download::after, #zoom-buttons button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n#zoom-buttons button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n#zoom-buttons button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n#zoom-buttons button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n#zoom-buttons button.dso-spinner-left[disabled], #zoom-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n#zoom-buttons button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n#zoom-buttons button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n#zoom-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n#zoom-buttons button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n#zoom-buttons button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n#zoom-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n#zoom-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n#zoom-buttons button + button {\n  border-radius: 0;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-top: 1px solid #ccc;\n}\n\n#close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  padding: 0;\n  position: absolute;\n  right: 16px;\n  top: 16px;\n}\n#close-button:focus, #close-button:focus-visible {\n  outline-offset: 2px;\n}\n#close-button:active {\n  outline: 0;\n}\n#close-button[disabled] {\n  color: #afcf9d;\n}\n#close-button[disabled].dso-spinner-left, #close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n#close-button:not([disabled]):hover {\n  color: #676cb0;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n#close-button:not([disabled]):active {\n  color: #676cb0;\n}\n#close-button.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n#close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n#close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n#close-button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\nsection:not([hidden]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\nheader,\n.content {\n  padding: 16px;\n}\n\nheader {\n  border-bottom: 1px solid #ccc;\n  flex-grow: 0;\n  position: relative;\n}\nheader h2 {\n  color: #275937;\n  font-family: \"Asap\", sans-serif;\n  line-height: 1;\n  margin: 0;\n}\n\n.content {\n  flex-grow: 1;\n  overflow-y: auto;\n}";
+
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m")
+    throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    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;
+const transitionDuration = 300; // Sync with $transition-duration in ./map-controls.scss
+const MapControls = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dsoZoomIn = createEvent(this, "dsoZoomIn", 7);
+    this.dsoZoomOut = createEvent(this, "dsoZoomOut", 7);
+    this.panelTitle = "Kaartlagen";
+    _MapControls_closeButtonElement.set(this, void 0);
+    _MapControls_toggleButtonElement.set(this, void 0);
+    this.open = false;
+    this.disableZoom = undefined;
+    this.hideContent = !this.open;
+  }
+  watchOpen(open) {
+    if (open) {
+      this.hideContent = false;
+      setTimeout(() => { var _a; return (_a = __classPrivateFieldGet(this, _MapControls_closeButtonElement, "f")) === null || _a === void 0 ? void 0 : _a.focus(); }, transitionDuration);
+    }
+    else {
+      setTimeout(() => {
+        var _a;
+        this.hideContent = true;
+        (_a = __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")) === null || _a === void 0 ? void 0 : _a.focus();
+      }, transitionDuration);
+    }
+  }
+  render() {
+    return (h(Host, null, h("button", { type: "button", id: "toggle-visibility-button", onClick: () => (this.open = !this.open), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { icon: "layers" }), h("span", null, "Kaartlagen")), h("div", { id: "zoom-buttons" }, h("button", { type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", null, "Zoom in"), h("dso-icon", { icon: "plus" })), h("button", { type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", null, "Zoom uit"), h("dso-icon", { icon: "minus" }))), h("section", { hidden: this.hideContent }, h("header", null, h("h2", null, this.panelTitle), h("button", { type: "button", id: "close-button", onClick: () => (this.open = false), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", null, "Verberg paneel ", this.panelTitle), h("dso-icon", { icon: "times" }))), h("div", { class: "content" }, h("slot", null)))));
+  }
+  static get watchers() { return {
+    "open": ["watchOpen"]
+  }; }
+  static get style() { return mapControlsCss; }
+}, [1, "dso-map-controls", {
+    "open": [1540],
+    "disableZoom": [1, "disable-zoom"],
+    "hideContent": [32]
+  }]);
+_MapControls_closeButtonElement = new WeakMap(), _MapControls_toggleButtonElement = new WeakMap();
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-map-controls", "dso-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-map-controls":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MapControls);
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DsoMapControls = MapControls;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoMapControls, defineCustomElement };

package/dist/components/dso-map-overlays.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoMapOverlays extends Components.DsoMapOverlays, HTMLElement {}
+export const DsoMapOverlays: {
+  prototype: DsoMapOverlays;
+  new (): DsoMapOverlays;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,81 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './info.js';
+import { d as defineCustomElement$3 } from './info-button.js';
+import { d as defineCustomElement$2 } from './selectable.js';
+import { v as v4 } from './v4.js';
+
+const mapOverlaysCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}p[slot=info]{margin:0}";
+
+const MapOverlays = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dsoToggleOverlay = createEvent(this, "dsoToggleOverlay", 7);
+    this.selectableRefs = {};
+    this.group = v4();
+    this.overlays = undefined;
+  }
+  overlayChangeHandler(overlay, e) {
+    const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;
+    this.dsoToggleOverlay.emit({ overlay, checked });
+  }
+  componentDidRender() {
+    this.overlays
+      .filter((o) => { var _a, _b; return !o.disabled && ((_b = (_a = this.previousOverlays) === null || _a === void 0 ? void 0 : _a.find((p) => p.id === o.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
+      .forEach((o) => {
+      var _a;
+      (_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
+    });
+    this.previousOverlays = this.overlays;
+  }
+  render() {
+    for (const ref in this.selectableRefs) {
+      delete this.selectableRefs[ref];
+    }
+    return (h("fieldset", { class: "form-group dso-checkboxes" }, h("legend", { class: "sr-only" }, "Kaartlagen"), h("div", { class: "dso-label-container" }, h("span", { class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), h("div", { class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { 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))))));
+  }
+  static get style() { return mapOverlaysCss; }
+}, [1, "dso-map-overlays", {
+    "group": [1],
+    "overlays": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-map-overlays", "dso-icon", "dso-info", "dso-info-button", "dso-selectable"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-map-overlays":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MapOverlays);
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "dso-info":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "dso-info-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "dso-selectable":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DsoMapOverlays = MapOverlays;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoMapOverlays, defineCustomElement };

package/dist/components/dso-modal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoModal extends Components.DsoModal, HTMLElement {}
+export const DsoModal: {
+  prototype: DsoModal;
+  new (): DsoModal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/dso-modal.js

@@ -0,0 +1,85 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { c as createFocusTrap } from './focus-trap.esm.js';
+import { d as defineCustomElement$2 } from './icon.js';
+import { v as v4 } from './v4.js';
+
+const modalCss = "@keyframes slideInFromTop{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}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{bottom:0;height:100%;left:0;position:fixed;right:0;top:0;z-index:530}.dso-modal .dso-dialog{animation:1s ease-out 0s 1 slideInFromTop;margin-top:15vh;margin-left:auto;margin-right:auto;max-width:640px;opacity:1;background-color:#fff;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4)}.dso-modal .dso-header{border-bottom:1px solid #ccc;padding:16px;position:relative}.dso-modal .dso-header h2{color:#275937;margin:0;max-width:calc(100% - 24px)}.dso-modal .dso-header .dso-close{background-color:transparent;border:0;height:32px;padding:0;position:absolute;right:13px;text-align:center;top:16px;width:32px}.dso-modal .dso-body{height:calc(100% - 96px - 1.5rem);max-height:calc(70vh - 144px - 1.5em);min-height:1.5rem;overflow-x:auto;padding:32px}.dso-modal .dso-body p{margin:0 0 16px}.dso-modal .dso-body ul,.dso-modal .dso-body ol{margin-bottom:16px}.dso-modal .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal .dso-body pre{margin:0 0 16px}.dso-modal .dso-body blockquote{padding:16px 24px}.dso-modal .dso-body dso-highlight-box,.dso-modal .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal .dso-body img{height:auto;max-width:100%}.dso-modal .dso-footer{min-height:80px;padding:0 32px 32px;text-align:right}@media screen and (max-width: 767px){.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.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+.btn,.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+.btn,.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-left:0}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.btn-default,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.btn-default,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.btn-default,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.btn-default{margin-left:16px}.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .btn+.btn-link,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn-link,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn-link,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn-link{margin-left:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-width:100%;margin-top:0}.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.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+.btn,.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+.btn,.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-left:0}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}.dso-modal-overlay{background-color:rgba(255, 255, 255, 0.8);bottom:0;display:block;left:0;position:fixed;right:0;top:0;z-index:529}.dso-close dso-icon{color:#39870c}";
+
+const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dsoClose = createEvent(this, "dsoClose", 7);
+    this.ariaId = v4();
+    this.hasFooter = undefined;
+    this.modalTitle = undefined;
+    this.role = "dialog";
+    this.showCloseButton = true;
+  }
+  componentWillLoad() {
+    this.hasFooter = this.host.querySelector("*[slot = 'footer']") !== null;
+  }
+  componentDidLoad() {
+    this.setFocusTrap();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+  }
+  render() {
+    return (h(Fragment, null, h("div", { class: "dso-modal-overlay" }), h("div", { class: "dso-modal", role: this.role, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.modalElement = element) }, h("div", { class: "dso-dialog", role: "document", ref: (element) => (this.dialogElement = element) }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("div", { class: "dso-body" }, h("slot", { name: "body" })), this.hasFooter && (h("div", { class: "dso-footer" }, h("slot", { name: "footer" })))))));
+  }
+  setFocusTrap() {
+    if (this.dialogElement && !this.trap) {
+      this.trap = createFocusTrap(this.dialogElement, {
+        allowOutsideClick: true,
+        escapeDeactivates: true,
+        tabbableOptions: {
+          getShadowRoot: true,
+        },
+        clickOutsideDeactivates: (e) => {
+          if (e instanceof MouseEvent && e.composedPath()[0] === this.modalElement) {
+            return true;
+          }
+          return false;
+        },
+        onDeactivate: () => {
+          delete this.trap;
+          this.dsoClose.emit({ originalEvent: undefined });
+        },
+      }).activate();
+    }
+  }
+  get host() { return this; }
+  static get style() { return modalCss; }
+}, [1, "dso-modal", {
+    "modalTitle": [1, "modal-title"],
+    "role": [1],
+    "showCloseButton": [4, "show-close-button"],
+    "ariaId": [32],
+    "hasFooter": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-modal", "dso-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Modal);
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DsoModal = Modal;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoModal, defineCustomElement };

package/dist/components/dso-ozon-content.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoOzonContent extends Components.DsoOzonContent, HTMLElement {}
+export const DsoOzonContent: {
+  prototype: DsoOzonContent;
+  new (): DsoOzonContent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;