@dso-toolkit/core 38.1.1 → 40.1.0

package/dist/custom-elements/index.d.ts

@@ -116,6 +116,12 @@ export const DsoOzonContent: {
   new (): DsoOzonContent;
 };
 
+interface DsoPagination extends Components.DsoPagination, HTMLElement {}
+export const DsoPagination: {
+  prototype: DsoPagination;
+  new (): DsoPagination;
+};
+
 interface DsoProgressBar extends Components.DsoProgressBar, HTMLElement {}
 export const DsoProgressBar: {
   prototype: DsoProgressBar;
@@ -128,6 +134,12 @@ export const DsoProgressIndicator: {
   new (): DsoProgressIndicator;
 };
 
+interface DsoResponsiveElement extends Components.DsoResponsiveElement, HTMLElement {}
+export const DsoResponsiveElement: {
+  prototype: DsoResponsiveElement;
+  new (): DsoResponsiveElement;
+};
+
 interface DsoSelectable extends Components.DsoSelectable, HTMLElement {}
 export const DsoSelectable: {
   prototype: DsoSelectable;

package/dist/custom-elements/index.js

@@ -470,7 +470,7 @@ let Autosuggest = class extends HTMLElement {
   static get style() { return autosuggestCss; }
 };
 
-const badgeCss = ":host{display:inline-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}.dso-badge{background-color:#666;border-radius:1em;color:#fff;display:inline-block;font-size:0.875em;line-height:1em;padding:4px 8px}.dso-badge.badge-info{background-color:#6ca4d9;color:#191919}.dso-badge.badge-primary{background-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;color:#191919}.dso-badge.badge-danger{background-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;border:1px solid #191919;color:#191919}";
+const badgeCss = ":host{display:inline-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}.dso-badge{background-color:#666;border-radius:1em;color:#fff;display:inline-block;font-size:0.875em;line-height:1em;padding:4px 8px}.dso-badge.badge-info{background-color:#6ca4d9;color:#191919}.dso-badge.badge-primary{background-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;color:#191919}.dso-badge.badge-danger{background-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;color:#191919;outline:1px solid #191919}";
 
 let Badge = class extends HTMLElement {
   constructor() {
@@ -777,6 +777,22 @@ const keyCode = {
 };
 const DISALLOWED_CHARACTERS = /[^0-9\-]+/g;
 const TRANSITION_MS = 300;
+function cleanValue(input, regex) {
+  const value = input.value;
+  const cursor = input.selectionStart;
+  if (!cursor) {
+    return value;
+  }
+  const beforeCursor = value.slice(0, cursor);
+  const afterCursor = value.slice(cursor, value.length);
+  const filteredBeforeCursor = beforeCursor.replace(regex, "");
+  const filterAfterCursor = afterCursor.replace(regex, "");
+  const newValue = filteredBeforeCursor + filterAfterCursor;
+  const newCursor = filteredBeforeCursor.length;
+  input.value = newValue;
+  input.selectionStart = input.selectionEnd = newCursor;
+  return newValue;
+}
 let DsoDatePicker$1 = class extends HTMLElement {
   constructor() {
     super();
@@ -989,12 +1005,8 @@ let DsoDatePicker$1 = class extends HTMLElement {
     };
     this.handleInputChange = (e) => {
       const target = e.target;
-      this.setValue(target.value);
-    };
-    this.handleKeyPress = (e) => {
-      if (e.key.search(DISALLOWED_CHARACTERS) > -1) {
-        e.preventDefault();
-      }
+      const cleanedValue = cleanValue(target, DISALLOWED_CHARACTERS);
+      this.setValue(cleanedValue);
     };
     this.prepareEvent = (value) => {
       var event = {
@@ -1132,13 +1144,16 @@ let DsoDatePicker$1 = class extends HTMLElement {
   }
   setValue(value) {
     const event = this.prepareEvent(value);
-    this.value = event.value;
-    this.dateChange.emit(event);
+    this.value = typeof value === 'string' ? value : event.value;
+    if (this.value !== this.previousValue) {
+      this.dateChange.emit(event);
+      this.previousValue = this.value;
+    }
   }
   componentDidLoad() {
     const valueAsDate = parseDutchDate(this.value);
     if (valueAsDate) {
-      this.value = printDutchDate(valueAsDate);
+      this.previousValue = this.value = printDutchDate(valueAsDate);
     }
     if (this.dsoAutofocus) {
       this.setFocus();
@@ -1166,7 +1181,7 @@ let DsoDatePicker$1 = class extends HTMLElement {
     if (maxDate) {
       maxYear = Math.min(maxYear, maxDate.getFullYear());
     }
-    return (h(Host, null, h("div", { class: ({ 'dso-date': true, 'dso-visible': this.visible }) }, h("div", { class: "dso-date__input-wrapper" }, h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onKeyPress: this.handleKeyPress, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }), h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) }, h("span", { class: "dso-date__toggle-icon" }, h("dso-icon", { icon: "calendar" })), h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { class: {
+    return (h(Host, null, h("div", { class: ({ 'dso-date': true, 'dso-visible': this.visible }) }, h("div", { class: "dso-date__input-wrapper" }, h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }), h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) }, h("span", { class: "dso-date__toggle-icon" }, h("dso-icon", { icon: "calendar" })), h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { class: {
         "dso-date__dialog": true,
         "is-left": this.direction === "left",
         "is-active": this.open,
@@ -1747,6 +1762,7 @@ let Header = class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.menuItemClick = createEvent(this, "menuItemClick", 7);
+    this.logoutClick = createEvent(this, "logoutClick", 7);
     this.mainMenu = [];
     this.useDropDownMenu = "auto";
     this.showDropDown = false;
@@ -1824,9 +1840,9 @@ let Header = class extends HTMLElement {
         ["has-sub-logo"]: this.hasSubLogo,
       }), ref: (element) => (this.wrapper = element) }, h("div", { class: "logo-container" }, h("div", { class: "logo" }, h("slot", { name: "logo" })), h("div", { class: "sub-logo" }, h("slot", { name: "sub-logo" }))), this.showDropDown && this.mainMenu.length > 0 && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right" }, h("button", { type: "button", class: "tertiary", slot: "toggle" }, h("span", null, "Menu")), h("div", { class: "dso-dropdown-options" }, h("dso-dropdown-options", null, h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl }, "Mijn Omgevingsloket"))), this.loginUrl && !this.isLoggedIn && (h("li", null, h("a", { href: this.loginUrl }, "Inloggen"))), this.userProfileUrl &&
       this.userProfileName &&
-      this.isLoggedIn && (h("li", null, h("a", { href: this.userProfileUrl }, this.userProfileName, h("span", { class: "profile-label" }, "- Mijn profiel")))), this.logoutUrl && this.isLoggedIn && (h("li", null, h("a", { href: this.logoutUrl }, "Uitloggen"))))))))), !this.showDropDown && this.mainMenu.length > 0 && (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl &&
+      this.isLoggedIn && (h("li", null, h("a", { href: this.userProfileUrl }, this.userProfileName, h("span", { class: "profile-label" }, "- Mijn profiel")))), this.logoutUrl && this.isLoggedIn && (h("li", null, h("a", { href: this.logoutUrl, onClick: e => this.logoutClick.emit({ originalEvent: e }) }, "Uitloggen"))))))))), !this.showDropDown && this.mainMenu.length > 0 && (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl &&
       this.userProfileName &&
-      this.isLoggedIn && (h("div", { class: "profile" }, h("span", { class: "profile-label" }, "Welkom:"), h("a", { href: this.userProfileUrl }, this.userProfileName))), this.loginUrl && !this.isLoggedIn && (h("div", { class: "login" }, h("a", { href: this.loginUrl }, "Inloggen"))), this.logoutUrl && this.isLoggedIn && (h("div", { class: "logout" }, h("a", { href: this.logoutUrl }, "Uitloggen")))), h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu
+      this.isLoggedIn && (h("div", { class: "profile" }, h("span", { class: "profile-label" }, "Welkom:"), h("a", { href: this.userProfileUrl }, this.userProfileName))), this.loginUrl && !this.isLoggedIn && (h("div", { class: "login" }, h("a", { href: this.loginUrl }, "Inloggen"))), this.logoutUrl && this.isLoggedIn && (h("div", { class: "logout" }, h("a", { href: this.logoutUrl, onClick: e => this.logoutClick.emit({ originalEvent: e }) }, "Uitloggen")))), h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu
       .filter((_, index) => index < this.mainMenu.length - this.overflowMenuItems)
       .map(this.MenuItem), this.overflowMenuItems > 0 && (h("li", null, h("dso-dropdown-menu", { "dropdown-align": "left" }, h("button", { type: "button", class: "tertiary", slot: "toggle" }, h("span", null, "Meer")), h("div", { class: "dso-dropdown-options" }, h("dso-dropdown-options", null, h("ul", null, this.mainMenu
       .filter((_, index) => index >=
@@ -3361,6 +3377,7 @@ let MapBaseLayers = class extends HTMLElement {
     this.__attachShadow();
     this.baseLayerChange = createEvent(this, "baseLayerChange", 7);
     this.selectableRefs = {};
+    this.group = v4();
   }
   baseLayerChangeHandler(baseLayer) {
     this.baseLayerChange.emit({ activeBaseLayer: baseLayer });
@@ -3378,14 +3395,14 @@ let MapBaseLayers = class extends HTMLElement {
     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, ref: ref => this.selectableRefs[baseLayer.id] = ref, onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info
+    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 => 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; }
 };
 
-const mapControlsCss = "button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}:host{background-color:#fff;border:1px solid #ccc;bottom:0;display:block;font-family:Asap, sans-serif;position:absolute;top:0;left:100%;transition:transform 300ms ease;width:300px}*,*::after,*::before{box-sizing:border-box}:host([open]){box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.3);transform:translateX(-100%)}:host([open]) #toggle-visibility-button{display:none}#toggle-visibility-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);font-weight:600;margin-right:16px;padding:8px 16px;white-space:nowrap;position:absolute;right:calc(100% + 56px);top:16px}#toggle-visibility-button:focus,#toggle-visibility-button:focus-visible{outline-offset:2px}#toggle-visibility-button:active{outline:0}#toggle-visibility-button.extern::after,#toggle-visibility-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}#toggle-visibility-button:hover{background-color:#39870c;border-color:#39870c;color:#fff}#toggle-visibility-button:active{background-color:#275937;border-color:#275937;color:#fff}#toggle-visibility-button[disabled],#toggle-visibility-button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}#toggle-visibility-button.btn-sm{line-height:16px}#toggle-visibility-button.btn-sm dso-icon,#toggle-visibility-button.btn-sm svg.di,#toggle-visibility-button.btn-sm.extern::after,#toggle-visibility-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}#toggle-visibility-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#toggle-visibility-button.download:hover::after{--dso-icon:var(--di-download-wit)}#toggle-visibility-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}#toggle-visibility-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#toggle-visibility-button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}#toggle-visibility-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}#toggle-visibility-button dso-icon,#toggle-visibility-button svg.di{margin-left:-8px;margin-right:8px}#toggle-visibility-button span+dso-icon,#toggle-visibility-button span+svg.di{margin-left:8px;margin-right:-8px}#toggle-visibility-button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}#zoom-buttons{border-radius:4px;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);display:flex;flex-wrap:wrap;flex:0 0;position:absolute;right:calc(100% + 16px);top:16px}#zoom-buttons button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;padding:8px;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;flex:0 0 100%;height:40px;min-width:auto;width:40px}#zoom-buttons button:focus,#zoom-buttons button:focus-visible{outline-offset:2px}#zoom-buttons button:active{outline:0}#zoom-buttons button.extern::after,#zoom-buttons button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}#zoom-buttons button:hover{background-color:#39870c;border-color:#39870c;color:#fff}#zoom-buttons button:active{background-color:#275937;border-color:#275937;color:#fff}#zoom-buttons button[disabled],#zoom-buttons button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}#zoom-buttons button.btn-sm{line-height:16px}#zoom-buttons button.btn-sm dso-icon,#zoom-buttons button.btn-sm svg.di,#zoom-buttons button.btn-sm.extern::after,#zoom-buttons button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}#zoom-buttons button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#zoom-buttons button.download:hover::after{--dso-icon:var(--di-download-wit)}#zoom-buttons button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}#zoom-buttons button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#zoom-buttons button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}#zoom-buttons button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}#zoom-buttons button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}#zoom-buttons button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}#zoom-buttons button+button{border-radius:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:1px solid #ccc}#close-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;border:0;color:#39870c;line-height:1;padding:0;background-color:transparent;padding:0;position:absolute;right:16px;top:16px}#close-button:focus,#close-button:focus-visible{outline-offset:2px}#close-button:active{outline:0}#close-button.extern::after,#close-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}#close-button[disabled]{color:#afcf9d}#close-button:not([disabled]):hover{color:#676cb0;text-decoration:underline}#close-button:not([disabled]):active{color:#676cb0}#close-button.btn-align{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}#close-button.extern::after,#close-button.download::after{position:relative;top:-2px}#close-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#close-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}#close-button.download:not([disabled]):hover::after,#close-button.download:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}#close-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#close-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}#close-button.extern:not([disabled]):hover::after,#close-button.extern:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}#close-button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}section{display:flex;flex-direction:column;height:100%}header,.content{padding:16px}header{border-bottom:1px solid #ccc;flex-grow:0;position:relative}header h2{color:#275937;font-family:\"Asap\", sans-serif;line-height:1;margin:0}.content{flex-grow:1;overflow-y:auto}";
+const mapControlsCss = "button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}:host{background-color:#fff;border:1px solid #ccc;bottom:0;display:block;font-family:Asap, sans-serif;position:absolute;top:0;left:100%;transition:transform 300ms ease;width:300px}*,*::after,*::before{box-sizing:border-box}:host([open]){box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.3);transform:translateX(-100%)}:host([open]) #toggle-visibility-button{display:none}#toggle-visibility-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);font-weight:600;margin-right:16px;padding:8px 16px;white-space:nowrap;position:absolute;right:calc(100% + 56px);top:16px}#toggle-visibility-button:focus,#toggle-visibility-button:focus-visible{outline-offset:2px}#toggle-visibility-button:active{outline:0}#toggle-visibility-button.extern::after,#toggle-visibility-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}#toggle-visibility-button:hover{background-color:#39870c;border-color:#39870c;color:#fff}#toggle-visibility-button:active{background-color:#275937;border-color:#275937;color:#fff}#toggle-visibility-button[disabled],#toggle-visibility-button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}#toggle-visibility-button.btn-sm{line-height:16px}#toggle-visibility-button.btn-sm dso-icon,#toggle-visibility-button.btn-sm svg.di,#toggle-visibility-button.btn-sm.extern::after,#toggle-visibility-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}#toggle-visibility-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#toggle-visibility-button.download:hover::after{--dso-icon:var(--di-download-wit)}#toggle-visibility-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}#toggle-visibility-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#toggle-visibility-button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}#toggle-visibility-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}#toggle-visibility-button dso-icon,#toggle-visibility-button svg.di{margin-left:-8px;margin-right:8px}#toggle-visibility-button span+dso-icon,#toggle-visibility-button span+svg.di{margin-left:8px;margin-right:-8px}#toggle-visibility-button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}#zoom-buttons{border-radius:4px;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);display:flex;flex-wrap:wrap;flex:0 0;position:absolute;right:calc(100% + 16px);top:16px}#zoom-buttons button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;padding:8px;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;flex:0 0 100%;height:40px;min-width:auto;width:40px}#zoom-buttons button:focus,#zoom-buttons button:focus-visible{outline-offset:2px}#zoom-buttons button:active{outline:0}#zoom-buttons button.extern::after,#zoom-buttons button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}#zoom-buttons button:hover{background-color:#39870c;border-color:#39870c;color:#fff}#zoom-buttons button:active{background-color:#275937;border-color:#275937;color:#fff}#zoom-buttons button[disabled],#zoom-buttons button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}#zoom-buttons button.btn-sm{line-height:16px}#zoom-buttons button.btn-sm dso-icon,#zoom-buttons button.btn-sm svg.di,#zoom-buttons button.btn-sm.extern::after,#zoom-buttons button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}#zoom-buttons button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#zoom-buttons button.download:hover::after{--dso-icon:var(--di-download-wit)}#zoom-buttons button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}#zoom-buttons button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#zoom-buttons button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}#zoom-buttons button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}#zoom-buttons button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}#zoom-buttons button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}#zoom-buttons button+button{border-radius:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:1px solid #ccc}#close-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;border:0;color:#39870c;line-height:1;padding:0;background-color:transparent;padding:0;position:absolute;right:16px;top:16px}#close-button:focus,#close-button:focus-visible{outline-offset:2px}#close-button:active{outline:0}#close-button.extern::after,#close-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}#close-button[disabled]{color:#afcf9d}#close-button:not([disabled]):hover{color:#676cb0;text-decoration:underline}#close-button:not([disabled]):active{color:#676cb0}#close-button.btn-align{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}#close-button.extern::after,#close-button.download::after{position:relative;top:-2px}#close-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#close-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}#close-button.download:not([disabled]):hover::after,#close-button.download:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}#close-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#close-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}#close-button.extern:not([disabled]):hover::after,#close-button.extern:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}#close-button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}section:not([hidden]){display:flex;flex-direction:column;height:100%}header,.content{padding:16px}header{border-bottom:1px solid #ccc;flex-grow:0;position:relative}header h2{color:#275937;font-family:\"Asap\", sans-serif;line-height:1;margin:0}.content{flex-grow:1;overflow-y:auto}";
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
   if (kind === "a" && !f)
@@ -3448,6 +3465,7 @@ let MapOverlays = class extends HTMLElement {
     this.__attachShadow();
     this.toggleOverlay = createEvent(this, "toggleOverlay", 7);
     this.selectableRefs = {};
+    this.group = v4();
   }
   overlayChangeHandler(overlay, e) {
     const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;
@@ -3466,7 +3484,7 @@ let MapOverlays = class extends HTMLElement {
     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, ref: ref => this.selectableRefs[overlay.id] = ref, onDsoChange: e => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info
+    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 => this.selectableRefs[overlay.id] = ref, onDsoChange: e => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info
       ? h("p", { slot: "info" }, overlay.info)
       : null))))));
   }
@@ -3867,12 +3885,45 @@ let OzonContent = class extends HTMLElement {
     if (this.deleted) {
       return (h("section", null, h("span", { class: "deleted-start" }, "Begin verwijderd element"), transformed, h("span", { class: "deleted-end" }, "Einde verwijderd element")));
     }
-    return (h(Host, { onClick: (e) => this.handleHostOnClick(e) }, transformed));
+    return (h(Host, { onClick: (e) => this.handleHostOnClick(e) }, h("slot", { name: "prefix" }), transformed, h("slot", { name: "suffix" })));
   }
   get host() { return this; }
   static get style() { return ozonContentCss; }
 };
 
+const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:28px;text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:32px;justify-content:center;position:relative;width:32px}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:50%}.pagination>li a{line-height:32px;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:\"\";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}";
+
+let Pagination = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.selectPage = createEvent(this, "selectPage", 7);
+    /**
+     * This function is called to format the href
+     */
+    this.formatHref = (page) => '#' + page;
+  }
+  clickHandler(e, page) {
+    if (e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey) {
+      return;
+    }
+    e.preventDefault();
+    this.selectPage.emit({ originalEvent: e, page });
+  }
+  ;
+  render() {
+    if (!this.totalPages) {
+      return null;
+    }
+    const pages = Array.from({ length: this.totalPages }, (_value, i) => i + 1);
+    return (h("ul", { class: "pagination" }, h("li", { class: this.currentPage === pages[0] ? 'dso-page-hidden' : undefined }, h("a", { href: this.formatHref(pages[0]), "aria-label": "Vorige", onClick: e => this.clickHandler(e, pages[0]) }, h("dso-icon", { icon: "chevron-left" }))), pages.map(page => (h("li", { key: page, class: this.currentPage === page ? 'active' : undefined }, this.currentPage === page
+      ? (h("span", { "aria-current": "page" }, page))
+      : (h("a", { href: this.formatHref(page), onClick: e => this.clickHandler(e, page) }, page))))), h("li", { class: this.currentPage === pages[pages.length - 1] ? 'dso-page-hidden' : undefined }, h("a", { href: this.formatHref(pages[pages.length - 1]), "aria-label": "Volgende", onClick: e => this.clickHandler(e, pages[pages.length - 1]) }, h("dso-icon", { icon: "chevron-right" })))));
+  }
+  static get style() { return paginationCss; }
+};
+
 const progressBarCss = ":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}.progress{background-color:#fff;border:1px solid #39870c;height:16px;margin-bottom:calc(16px + 1em);position:relative}.progress .progress-bar{background-color:#39870c;color:#fff;float:left;font-size:14px;height:100%;line-height:16px;text-align:center;width:0%}.progress .progress-bar>span:not(.sr-only){color:#191919;left:0;position:absolute;top:calc(100% + 8px)}";
 
 let ProgressBar = class extends HTMLElement {
@@ -3912,13 +3963,51 @@ let Progressindicator = class extends HTMLElement {
   static get style() { return progressIndicatorCss; }
 };
 
-const selectableCss = ":host{display:block;padding:0 0 0 32px;position:relative}:host .dso-selectable-options{list-style:none;margin-top:8px;padding-left:0}:host .dso-selectable-options li+li{margin-top:8px}:host label{font-weight:400;line-height:24px;margin:0}:host input[type=checkbox][disabled]+label::before,:host input[type=checkbox][disabled]:active+label::before,:host input[type=checkbox][disabled]:focus+label::before,:host input[type=radio][disabled]+label::before,:host input[type=radio][disabled]:active+label::before,:host input[type=radio][disabled]:focus+label::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}:host input[type=checkbox],:host input[type=radio]{height:24px;left:0;margin:0;opacity:0;position:absolute;top:0;width:24px;z-index:100;zoom:1}@media (prefers-contrast: more){:host input[type=checkbox],:host input[type=radio]{opacity:1}}:host input[type=checkbox]:not([disabled]),:host input[type=radio]:not([disabled]){cursor:pointer}:host input[type=checkbox]+label,:host input[type=radio]+label{display:inline;font-style:normal;padding-left:0}:host input[type=checkbox]+label::before,:host input[type=radio]+label::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:\"\";height:20px;left:2px;position:absolute;top:2px;width:20px}:host input[type=checkbox]:focus,:host input[type=radio]:focus{outline:0}:host input[type=checkbox]:focus+label::before,:host input[type=radio]:focus+label::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);height:18px;left:3px;top:3px;width:18px}:host input[type=checkbox]:active+label::before,:host input[type=checkbox].active+label::before,:host input[type=radio]:active+label::before,:host input[type=radio].active+label::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;height:22px;left:1px;top:1px;width:22px}:host input[type=checkbox]+label::before{border-radius:4px}:host input[type=checkbox]+label::after{background:transparent;content:\"\";left:6px;opacity:0;position:absolute;top:6px;zoom:1}:host input[type=checkbox]:checked+label::after,:host input[type=checkbox]:indeterminate+label::after{opacity:1}:host input[type=checkbox]:checked+label::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-top-color:transparent;border-width:0 0 3px 3px;height:8px;transform:rotate(-45deg);width:13px}:host input[type=checkbox]:indeterminate+label::after{background-color:var(--dso-selectable-color, #39870c);height:12px;width:12px}:host input[type=radio]+label::before{border-radius:50%}:host input[type=radio]+label::after{background-color:transparent;border-radius:50%;content:\"\";height:12px;left:6px;opacity:0;position:absolute;top:6px;width:12px;zoom:1}:host input[type=radio]:checked+label::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}:host>dso-info{float:none;margin:8px 16px 0 -32px;width:calc(100% + 32px)}:host(:not(:last-child)){margin-bottom:8px}*,*::after,*::before{box-sizing:border-box}";
+const responsiveElementCss = ":host{display:block}";
 
-let Selectable = class extends HTMLElement {
+const elementSizes = [
+  {
+    width: 624, alias: 'large'
+  },
+  {
+    width: 375, alias: 'medium'
+  },
+  {
+    width: 0, alias: 'small'
+  }
+];
+let ResponsiveElement = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.sizeAlias = elementSizes[0].alias;
+    this.sizeWidth = 0;
+    this.observer = new ResizeObserver(([entry]) => {
+      var _a, _b;
+      const size = (_b = (_a = elementSizes.find(s => entry.contentRect.width >= s.width)) === null || _a === void 0 ? void 0 : _a.alias) !== null && _b !== void 0 ? _b : elementSizes[0].alias;
+      this.sizeAlias = size;
+    });
+  }
+  componentWillLoad() {
+    this.observer.observe(this.host);
+  }
+  disconnectedCallback() {
+    this.observer.unobserve(this.host);
+  }
+  render() {
+    return (h(Host, { small: this.sizeAlias === 'small', medium: this.sizeAlias === 'medium', large: this.sizeAlias === 'large' }, h("slot", null)));
+  }
+  get host() { return this; }
+  static get style() { return responsiveElementCss; }
+};
+
+const selectableCss = ".sc-dso-selectable-h{display:block;padding:0 0 0 32px;position:relative}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-top:8px;padding-left:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-top:8px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{height:24px;left:0;margin:0;opacity:0;position:absolute;top:0;width:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-left:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:\"\";height:20px;left:2px;position:absolute;top:2px;width:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);height:18px;left:3px;top:3px;width:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;height:22px;left:1px;top:1px;width:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:\"\";left:6px;opacity:0;position:absolute;top:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-top-color:transparent;border-width:0 0 3px 3px;height:8px;transform:rotate(-45deg);width:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);height:12px;width:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:\"\";height:12px;left:6px;opacity:0;position:absolute;top:6px;width:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin:8px 16px 0 -32px;width:calc(100% + 32px)}.sc-dso-selectable-h:not(:last-child){margin-bottom:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}";
+
+let Selectable = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
     this.change = createEvent(this, "dsoChange", 7);
     this.infoActive = false;
     this.fallbackIdentifier = createIdentifier('DsoSelectable');
@@ -3948,7 +4037,7 @@ let Selectable = class extends HTMLElement {
   render() {
     var _a;
     const hasInfo = !!this.host.querySelector('[slot="info"]');
-    return (h(Fragment, null, h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: e => this.change.emit(e), ref: (el) => this.input = el }), h("label", { htmlFor: this.getIdentifier() }, h("slot", null)), hasInfo && (h(Fragment, null, !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onToggle: e => this.infoActive = e.detail.active })), h("dso-info", { fixed: this.infoFixed, active: this.infoActive, onClose: () => this.infoActive = false }, h("slot", { name: "info" }))))));
+    return (h(Fragment, null, h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": (hasInfo && this.infoFixed) ? this.describedById : undefined, disabled: this.disabled, required: this.required, checked: this.checked, onChange: e => this.change.emit(e), ref: (el) => this.input = el }), h("label", { htmlFor: this.getIdentifier() }, h("slot", null)), hasInfo && (h(Fragment, null, !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onToggle: e => this.infoActive = e.detail.active })), h("dso-info", { id: (hasInfo && this.infoFixed) ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onClose: () => this.infoActive = false }, h("div", null, h("slot", { name: "info" })))))));
   }
   getIdentifier() {
     var _a;
@@ -5843,6 +5932,13 @@ const tooltipCss = ":host(.hidden){visibility:hidden}:host-context(dso-toggletip
 
 // Keep const in sync with $tooltip-transition-duration in @dso-toolkit/sources/tooltip.scss tooltip_root() mixin
 const transitionDuration = 150;
+function hasOverflow(el) {
+  const style = window.getComputedStyle(el);
+  const overflowX = style.getPropertyValue('overflow-x');
+  const overflowY = style.getPropertyValue('overflow-y');
+  const overflowValues = ['hidden', 'clip'];
+  return overflowValues.indexOf(overflowX) != -1 || overflowValues.indexOf(overflowY) != -1;
+}
 let Tooltip = class extends HTMLElement {
   constructor() {
     super();
@@ -5856,6 +5952,10 @@ let Tooltip = class extends HTMLElement {
      * Set position of tooltip relative to target
      */
     this.position = 'top';
+    /**
+     * Set position strategy of tooltip
+     */
+    this.strategy = 'auto';
     /**
      * Set attribute `no-arrow` to hide the arrow
      */
@@ -5899,6 +5999,33 @@ let Tooltip = class extends HTMLElement {
       placement: this.position
     });
   }
+  watchStrategy() {
+    this.setStrategy();
+  }
+  setStrategy() {
+    if (!this.popper) {
+      return;
+    }
+    if (this.strategy == 'absolute' || this.strategy == 'fixed') {
+      this.popper.setOptions({
+        strategy: this.strategy,
+      });
+      return;
+    }
+    let element = this.element;
+    while ((element === null || element === void 0 ? void 0 : element.parentNode) != null && element.parentNode != document) {
+      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;
+      if (element != null && hasOverflow(element)) {
+        this.popper.setOptions({
+          strategy: 'fixed',
+        });
+        return;
+      }
+    }
+    this.popper.setOptions({
+      strategy: 'absolute',
+    });
+  }
   watchActive() {
     var _a;
     if (this.active) {
@@ -5963,6 +6090,7 @@ let Tooltip = class extends HTMLElement {
   }
   componentDidRender() {
     var _a;
+    this.setStrategy();
     if (this.active) {
       (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
     }
@@ -5994,6 +6122,7 @@ let Tooltip = class extends HTMLElement {
   get element() { return this; }
   static get watchers() { return {
     "position": ["watchPosition"],
+    "strategy": ["watchStrategy"],
     "active": ["watchActive"]
   }; }
   static get style() { return tooltipCss; }
@@ -6314,15 +6443,17 @@ const DsoImageOverlay = /*@__PURE__*/proxyCustomElement(ImageOverlay, [1,"dso-im
 const DsoInfo = /*@__PURE__*/proxyCustomElement(Info, [1,"dso-info",{"fixed":[516],"active":[516]}]);
 const DsoInfoButton = /*@__PURE__*/proxyCustomElement(InfoButton, [1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]);
 const DsoLabel = /*@__PURE__*/proxyCustomElement(Label, [1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]);
-const DsoMapBaseLayers = /*@__PURE__*/proxyCustomElement(MapBaseLayers, [1,"dso-map-base-layers",{"baseLayers":[16]}]);
+const DsoMapBaseLayers = /*@__PURE__*/proxyCustomElement(MapBaseLayers, [1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]);
 const DsoMapControls = /*@__PURE__*/proxyCustomElement(MapControls, [1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]);
-const DsoMapOverlays = /*@__PURE__*/proxyCustomElement(MapOverlays, [1,"dso-map-overlays",{"overlays":[16]}]);
-const DsoOzonContent = /*@__PURE__*/proxyCustomElement(OzonContent, [2,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[516],"state":[32]}]);
+const DsoMapOverlays = /*@__PURE__*/proxyCustomElement(MapOverlays, [1,"dso-map-overlays",{"group":[1],"overlays":[16]}]);
+const DsoOzonContent = /*@__PURE__*/proxyCustomElement(OzonContent, [6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[516],"state":[32]}]);
+const DsoPagination = /*@__PURE__*/proxyCustomElement(Pagination, [1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16]}]);
 const DsoProgressBar = /*@__PURE__*/proxyCustomElement(ProgressBar, [1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]);
 const DsoProgressIndicator = /*@__PURE__*/proxyCustomElement(Progressindicator, [1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]);
-const DsoSelectable = /*@__PURE__*/proxyCustomElement(Selectable, [1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32]}]);
+const DsoResponsiveElement = /*@__PURE__*/proxyCustomElement(ResponsiveElement, [1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32]}]);
+const DsoSelectable = /*@__PURE__*/proxyCustomElement(Selectable, [6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32]}]);
 const DsoToggletip = /*@__PURE__*/proxyCustomElement(Toggletip, [1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]);
-const DsoTooltip = /*@__PURE__*/proxyCustomElement(Tooltip, [1,"dso-tooltip",{"descriptive":[516],"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32]},[[0,"click","listenClick"]]]);
+const DsoTooltip = /*@__PURE__*/proxyCustomElement(Tooltip, [1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32]},[[0,"click","listenClick"]]]);
 const DsoTreeView = /*@__PURE__*/proxyCustomElement(TreeView, [1,"dso-tree-view",{"collection":[16]}]);
 const DsoViewerGrid = /*@__PURE__*/proxyCustomElement(ViewerGrid, [1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]);
 const defineCustomElements = (opts) => {
@@ -6347,8 +6478,10 @@ const defineCustomElements = (opts) => {
   DsoMapControls,
   DsoMapOverlays,
   DsoOzonContent,
+  DsoPagination,
   DsoProgressBar,
   DsoProgressIndicator,
+  DsoResponsiveElement,
   DsoSelectable,
   DsoToggletip,
   DsoTooltip,
@@ -6362,4 +6495,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { DsoAlert, DsoAttachmentsCounter, DsoAutosuggest, DsoBadge, DsoBanner, DsoDatePicker, DsoDropdownMenu, DsoHeader, DsoHelpcenterPanel, DsoHighlightBox, DsoIcon, DsoImageOverlay, DsoInfo, DsoInfoButton, DsoLabel, DsoMapBaseLayers, DsoMapControls, DsoMapOverlays, DsoOzonContent, DsoProgressBar, DsoProgressIndicator, DsoSelectable, DsoToggletip, DsoTooltip, DsoTreeView, DsoViewerGrid, defineCustomElements };
+export { DsoAlert, DsoAttachmentsCounter, DsoAutosuggest, DsoBadge, DsoBanner, DsoDatePicker, DsoDropdownMenu, DsoHeader, DsoHelpcenterPanel, DsoHighlightBox, DsoIcon, DsoImageOverlay, DsoInfo, DsoInfoButton, DsoLabel, DsoMapBaseLayers, DsoMapControls, DsoMapOverlays, DsoOzonContent, DsoPagination, DsoProgressBar, DsoProgressIndicator, DsoResponsiveElement, DsoSelectable, DsoToggletip, DsoTooltip, DsoTreeView, DsoViewerGrid, defineCustomElements };

package/dist/dso-toolkit/dso-toolkit.css

@@ -1 +1 @@
-@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}dso-alert>.dso-rich-content *:first-child{margin-top:0}dso-alert>.dso-rich-content *:last-child{margin-bottom:0}dso-alert>.dso-rich-content h1,dso-alert>.dso-rich-content h2,dso-alert>.dso-rich-content h3,dso-alert>.dso-rich-content h4,dso-alert>.dso-rich-content h5,dso-alert>.dso-rich-content h6,dso-alert>.dso-rich-content .h1,dso-alert>.dso-rich-content .h2,dso-alert>.dso-rich-content .h3,dso-alert>.dso-rich-content .h4,dso-alert>.dso-rich-content .h5,dso-alert>.dso-rich-content .h6{color:#000;font-size:1em;line-height:1.5;margin-bottom:8px;margin-top:8px}dso-alert>.dso-rich-content .btn,dso-alert>.dso-rich-content .dso-primary,dso-alert>.dso-rich-content .dso-secondary,dso-alert>.dso-rich-content .dso-tertiary{background-color:rgba(25, 25, 25, 0.05);border-radius:4px;border:1px solid transparent;padding:6px 12px}dso-alert>.dso-rich-content .btn:hover,dso-alert>.dso-rich-content .btn:active,dso-alert>.dso-rich-content .dso-primary:hover,dso-alert>.dso-rich-content .dso-primary:active,dso-alert>.dso-rich-content .dso-secondary:hover,dso-alert>.dso-rich-content .dso-secondary:active,dso-alert>.dso-rich-content .dso-tertiary:hover,dso-alert>.dso-rich-content .dso-tertiary:active{background-color:rgba(25, 25, 25, 0.2);color:#000}dso-alert a,dso-alert a:not(.btn):visited{color:#191919}dso-alert a:hover,dso-alert a:focus,dso-alert a:active,dso-alert a:visited{color:#191919}dso-alert a:active{text-decoration:none}dso-alert a.download::after{background:var(--dso-icon, var(--di-download-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-alert a.extern::after{background:var(--dso-icon, var(--di-external-link-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-banner a{text-decoration:underline}dso-banner a,dso-banner a:hover,dso-banner a:focus,dso-banner a:active,dso-banner a:visited{color:#191919}dso-banner a:active{text-decoration:none}dso-banner a.download::after{background:var(--dso-icon, var(--di-download-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-banner a.extern::after{background:var(--dso-icon, var(--di-external-link-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-banner .row>div{line-height:24px;position:relative}dso-banner .row>div button{position:absolute;right:16px;top:0}dso-banner .row>div button dso-icon,dso-banner .row>div button svg.di{color:#000}@media screen and (min-width: 481px){dso-banner .row>div{padding-left:48px}}@media screen and (max-width: 480px){dso-banner .row>div{padding-top:39px}}dso-banner .row>div::before{content:"";display:inline-block;left:16px;position:absolute;top:0}dso-banner .row>div>.dso-rich-content{padding-right:24px}dso-banner .row>div>.dso-rich-content h1,dso-banner .row>div>.dso-rich-content h2,dso-banner .row>div>.dso-rich-content h3,dso-banner .row>div>.dso-rich-content h4,dso-banner .row>div>.dso-rich-content h5,dso-banner .row>div>.dso-rich-content h6{color:#000;font-size:1rem;line-height:1.5;margin-bottom:0}dso-banner .row>div>.dso-rich-content h1+p,dso-banner .row>div>.dso-rich-content h2+p,dso-banner .row>div>.dso-rich-content h3+p,dso-banner .row>div>.dso-rich-content h4+p,dso-banner .row>div>.dso-rich-content h5+p,dso-banner .row>div>.dso-rich-content h6+p{display:inline}dso-banner .row>div>.dso-rich-content h1+p+*,dso-banner .row>div>.dso-rich-content h2+p+*,dso-banner .row>div>.dso-rich-content h3+p+*,dso-banner .row>div>.dso-rich-content h4+p+*,dso-banner .row>div>.dso-rich-content h5+p+*,dso-banner .row>div>.dso-rich-content h6+p+*{margin-top:16px}dso-banner .row>div>.dso-rich-content>h2:first-child{float:left;margin-right:8px}dso-banner .row>div>.dso-rich-content *:first-child{margin-top:0}dso-banner .row>div>.dso-rich-content *:last-child{margin-bottom:0}@media screen and (max-width: 480px){dso-banner .row>div>.dso-rich-content{padding-right:0}}dso-banner[status=danger]{color:#191919;background-color:#f5d8dc;border-color:#f5d8dc}dso-banner[status=danger] .row>div::before{background:var(--dso-icon, var(--di-status-danger)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-banner[status=warning]{color:#191919;background-color:#f8f6cc;border-color:#f8f6cc}dso-banner[status=warning] .row>div::before{background:var(--dso-icon, var(--di-status-warning)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.dso-tertiary::after,dso-dropdown-menu>.btn::after{content:"";display:inline-block;margin-left:8px}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.btn-primary::after{background:var(--dso-icon, var(--di-chevron-down-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.btn-default::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-dropdown-menu>.dso-secondary:hover::after,dso-dropdown-menu>.btn-default:hover::after{--dso-icon:var(--di-chevron-down-wit)}dso-dropdown-menu>.dso-tertiary::after,dso-dropdown-menu>.btn-link::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;position:relative;top:-2px}dso-dropdown-menu>.dso-tertiary:hover::after,dso-dropdown-menu>.btn-link:hover::after{--dso-icon:var(--di-chevron-down-scampi)}dso-dropdown-menu .dso-group-label{color:#999;font-size:0.875em;font-weight:400;margin:0;padding:4px 20px 2px;text-transform:uppercase}dso-dropdown-menu ul{margin:0;padding:0}dso-dropdown-menu ul:not(:last-child){border-bottom:1px solid #e5e5e5;margin-bottom:11px;padding-bottom:11px}dso-dropdown-menu .dso-dropdown-options{background-clip:padding-box;background-color:#fff;border-radius:4px;border:1px solid rgba(0, 0, 0, 0.15);box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);font-size:16px;margin:2px 0 0;min-width:160px;padding:5px 0;position:absolute;text-align:left;top:100%;z-index:220}dso-dropdown-menu .dso-dropdown-options li{list-style:none}dso-dropdown-menu .dso-dropdown-options li a:visited{color:#191919}dso-dropdown-menu .dso-dropdown-options li a,dso-dropdown-menu .dso-dropdown-options li button{text-decoration:none;clear:both;color:#191919;display:block;font-weight:400;line-height:1.5;padding:3px 20px;text-decoration:none;white-space:nowrap}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus,dso-dropdown-menu .dso-dropdown-options li a:active,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus,dso-dropdown-menu .dso-dropdown-options li button:active{text-decoration:underline}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}dso-dropdown-menu .dso-dropdown-options li button{background-color:transparent;border:0;border-radius:0;text-align:inherit;width:100%}dso-dropdown-menu[dropdown-align=right] .dso-dropdown-options{right:0}dso-dropdown-menu[open]>.dso-primary::after,dso-dropdown-menu[open]>.btn-primary::after{--dso-icon:var(--di-chevron-up-wit)}dso-dropdown-menu[open]>.dso-secondary::after,dso-dropdown-menu[open]>.btn-default::after{--dso-icon:var(--di-chevron-up)}dso-dropdown-menu[open]>.dso-secondary:hover::after,dso-dropdown-menu[open]>.btn-default:hover::after{--dso-icon:var(--di-chevron-up-wit)}dso-dropdown-menu[open]>.dso-tertiary::after,dso-dropdown-menu[open]>.btn-link::after{--dso-icon:var(--di-chevron-up)}dso-dropdown-menu[open]>.dso-tertiary:hover::after,dso-dropdown-menu[open]>.btn-link:hover::after{--dso-icon:var(--di-chevron-up-scampi)}dso-dropdown-menu[checkable] .dso-group-label{padding-left:40px}dso-dropdown-menu[checkable] li a,dso-dropdown-menu[checkable] li button{padding-left:40px}dso-dropdown-menu[checkable] li.dso-checked a:not(:focus),dso-dropdown-menu[checkable] li.dso-checked button:not(:focus){background-color:#39870c;border-color:#39870c;color:#fff}dso-dropdown-menu[checkable] li.dso-checked a::before,dso-dropdown-menu[checkable] li.dso-checked button::before{background:var(--dso-icon, var(--di-check-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;content:"";display:block;float:left;margin-left:-32px;margin-right:8px}dso-highlight-box>.dso-rich-content *:first-child{margin-top:0}dso-highlight-box>*:last-child{margin-bottom:0}dso-highlight-box .dso-tertiary:not([disabled]):hover,dso-highlight-box .dso-tertiary:not([disabled]):hover dso-icon,dso-highlight-box .dso-tertiary:not([disabled]):hover svg.di,dso-highlight-box .btn-link:not([disabled]):hover,dso-highlight-box .btn-link:not([disabled]):hover dso-icon,dso-highlight-box .btn-link:not([disabled]):hover svg.di{text-decoration:underline}dso-highlight-box.dso-has-counter{padding-top:40px;position:relative}dso-highlight-box .dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25em;font-weight:500;height:32px;left:16px;line-height:32px;position:absolute;text-align:center;top:-24px;width:32px}dso-highlight-box dso-icon{vertical-align:text-top}dso-highlight-box[yellow],dso-highlight-box:not([border]):not([white]){--di-chevron-right-grijs90:url("data:image/svg+xml,%3csvg id='chevron-right' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M9%2c19a.93.93%2c0%2c0%2c1-.67-.29%2c1%2c1%2c0%2c0%2c1%2c0-1.42l5-5.29-5-5.29a1%2c1%2c0%2c0%2c1%2c0-1.42.93.93%2c0%2c0%2c1%2c1.35%2c0L16%2c12%2c9.62%2c18.71A.93.93%2c0%2c0%2c1%2c9%2c19Z'/%3e %3c/svg%3e")}dso-highlight-box[yellow] .dso-tertiary:not([disabled]),dso-highlight-box[yellow] .btn-link:not([disabled]),dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]),dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]){color:#191919}dso-highlight-box[yellow] .dso-tertiary:not([disabled]):hover,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):hover dso-icon,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):hover svg.di,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):focus,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):focus dso-icon,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):focus svg.di,dso-highlight-box[yellow] .btn-link:not([disabled]):hover,dso-highlight-box[yellow] .btn-link:not([disabled]):hover dso-icon,dso-highlight-box[yellow] .btn-link:not([disabled]):hover svg.di,dso-highlight-box[yellow] .btn-link:not([disabled]):focus,dso-highlight-box[yellow] .btn-link:not([disabled]):focus dso-icon,dso-highlight-box[yellow] .btn-link:not([disabled]):focus svg.di,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):hover,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):hover dso-icon,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):hover svg.di,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):focus,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):focus dso-icon,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):focus svg.di,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):hover,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):hover dso-icon,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):hover svg.di,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):focus,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):focus dso-icon,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):focus svg.di{color:#666}dso-highlight-box[yellow] a:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-highlight-box[yellow] a:visited:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-highlight-box:not([border]):not([white]) a:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-highlight-box:not([border]):not([white]) a:visited:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary){color:#191919}dso-highlight-box:not([border]):not([white]) .dso-link-list li{margin-bottom:16px}dso-highlight-box:not([border]):not([white]) .dso-link-list li:last-child{margin-bottom:0}dso-highlight-box:not([border]):not([white]) .dso-link-list a{text-decoration:none;color:#191919}dso-highlight-box:not([border]):not([white]) .dso-link-list a:hover,dso-highlight-box:not([border]):not([white]) .dso-link-list a:focus,dso-highlight-box:not([border]):not([white]) .dso-link-list a:active{text-decoration:underline}dso-highlight-box:not([border]):not([white]) .dso-link-list a::before,dso-highlight-box:not([border]):not([white]) .dso-link-list a:active::before,dso-highlight-box:not([border]):not([white]) .dso-link-list a:focus::before,dso-highlight-box:not([border]):not([white]) .dso-link-list a:hover::before{background:var(--dso-icon, var(--di-chevron-right-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-highlight-box:not([border]):not([white]) .dso-link-list a:active{color:#191919;text-decoration:none}dso-highlight-box:not([border]):not([white]) .dso-link-list a.download::after{background:var(--dso-icon, var(--di-download-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-highlight-box:not([border]):not([white]) .dso-link-list a.extern::after{background:var(--dso-icon, var(--di-external-link-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-info .dso-rich-content *:first-child{margin-top:0}dso-info .dso-rich-content img{display:block;margin:8px auto;max-width:100%}dso-info .dso-rich-content a:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-info .dso-rich-content a:hover,dso-info .dso-rich-content a:focus,dso-info .dso-rich-content a:active,dso-info .dso-rich-content a:visited{color:#191919}dso-info .dso-rich-content a:active{text-decoration:none}dso-info .dso-rich-content .dso-tertiary:not([disabled]),dso-info .dso-rich-content .btn-link:not([disabled]){color:#000}dso-info .dso-rich-content .dso-tertiary:not([disabled]):hover,dso-info .dso-rich-content .dso-tertiary:not([disabled]):hover dso-icon,dso-info .dso-rich-content .dso-tertiary:not([disabled]):hover svg.di,dso-info .dso-rich-content .dso-tertiary:not([disabled]):focus,dso-info .dso-rich-content .dso-tertiary:not([disabled]):focus dso-icon,dso-info .dso-rich-content .dso-tertiary:not([disabled]):focus svg.di,dso-info .dso-rich-content .btn-link:not([disabled]):hover,dso-info .dso-rich-content .btn-link:not([disabled]):hover dso-icon,dso-info .dso-rich-content .btn-link:not([disabled]):hover svg.di,dso-info .dso-rich-content .btn-link:not([disabled]):focus,dso-info .dso-rich-content .btn-link:not([disabled]):focus dso-icon,dso-info .dso-rich-content .btn-link:not([disabled]):focus svg.di{color:#666;text-decoration:underline}dso-label span[slot=symbol]{background-color:#fff;display:block;float:left;height:20px;margin-top:2px;margin-right:8px;width:24px;overflow:hidden;position:relative}dso-label span[slot=symbol]>span{display:block;position:absolute;top:0;bottom:0;left:0;right:0}dso-map-controls>*+*{margin-top:32px}dso-selectable .dso-rich-content[slot=info] *:first-child{margin-top:0}dso-selectable .dso-rich-content[slot=info] img{display:block;margin:8px auto;max-width:100%}dso-selectable .dso-rich-content[slot=info] a:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-selectable .dso-rich-content[slot=info] a:hover,dso-selectable .dso-rich-content[slot=info] a:focus,dso-selectable .dso-rich-content[slot=info] a:active,dso-selectable .dso-rich-content[slot=info] a:visited{color:#191919}dso-selectable .dso-rich-content[slot=info] a:active{text-decoration:none}dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]),dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]){color:#000}dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):hover,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):hover dso-icon,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):hover svg.di,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus dso-icon,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus svg.di,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):hover,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):hover dso-icon,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):hover svg.di,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):focus,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):focus dso-icon,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):focus svg.di{color:#666;text-decoration:underline}dso-viewer-grid .dso-filterblok{margin-left:-16px;margin-right:-16px}dso-viewer-grid .dso-filterblok .dso-filterblok-address{font-weight:bold;margin:8px 0}@media screen and (max-width: 480px){dso-viewer-grid .dso-filterblok .dso-context-wrapper .dso-context-container{flex-basis:auto}}dso-viewer-grid .dso-document-header{background-color:#f2f2f2;padding:16px;margin-left:-16px;margin-right:-16px}dso-viewer-grid .dso-document-header a{color:#000}dso-viewer-grid .dso-document-header>:first-child{margin:0}dso-viewer-grid[small] .dso-tile-grid{grid-template-columns:repeat(2, 1fr)}dso-viewer-grid[small] dl.dso-document-header-features dt{clear:initial;float:none;width:auto;word-wrap:initial}dso-viewer-grid[small] dl.dso-document-header-features dd{margin-left:0;padding-left:0}dso-viewer-grid[small] .dso-document-list-item-container::before,dso-viewer-grid[small] .dso-document-list-item-container::after,dso-viewer-grid[small] .dso-document-header-container::before,dso-viewer-grid[small] .dso-document-header-container::after{display:table;content:" "}dso-viewer-grid[small] .dso-document-list-item-container::after,dso-viewer-grid[small] .dso-document-header-container::after{clear:both}dso-viewer-grid[small] .dso-document-list-item-open-document,dso-viewer-grid[small] .dso-document-header-toggle-features{float:right}dso-viewer-grid[small] .dso-document-header-type,dso-viewer-grid[small] .dso-document-header-owner{display:block}dso-viewer-grid[small] .dso-document-header-type{margin-right:32px}dso-viewer-grid[small] .dso-document-header-status,dso-viewer-grid[small] .dso-document-list-item-status{margin:0 0 8px 0}dso-viewer-grid[medium] .dso-tile-grid{grid-template-columns:repeat(4, 1fr)}dso-viewer-grid[large] .dso-tile-grid{grid-template-columns:repeat(5, 1fr)}dso-viewer-grid:not([small]) .dso-document-header-status,dso-viewer-grid:not([small]) .dso-document-list-item-status{margin:0}dso-viewer-grid:not([small]) .dso-document-header-container{padding-right:32px}dso-viewer-grid:not([small]) .dso-document-header-type{margin-right:8px}dso-viewer-grid:not([small]) dl.dso-document-header-features dt{width:20%}dso-viewer-grid:not([small]) dl.dso-document-header-features dd{margin-left:20%}dso-viewer-grid:not([small]) .dso-document-list-item-open-document,dso-viewer-grid:not([small]) .dso-document-header-toggle-features{position:absolute;right:0;bottom:0}dso-viewer-grid .dso-document-list{padding-left:0;list-style:none;margin:0 -16px 0 -16px}dso-viewer-grid .dso-document-list-item{background-color:#f2f2f2;padding:16px}dso-viewer-grid .dso-document-list-item a{color:#000}dso-viewer-grid .dso-document-list-item>:first-child{margin:0}dso-viewer-grid .dso-document-list-item-container,dso-viewer-grid .dso-document-header-container{position:relative}dso-viewer-grid .dso-document-list-item-type,dso-viewer-grid .dso-document-list-item-owner,dso-viewer-grid .dso-document-header-type,dso-viewer-grid .dso-document-header-owner{margin:0 0 8px 0;display:inline-block}dso-viewer-grid .dso-document-list-item-status dso-badge,dso-viewer-grid .dso-document-list-item-status .dso-badge,dso-viewer-grid .dso-document-header-status dso-badge,dso-viewer-grid .dso-document-header-status .dso-badge{margin-right:8px}dso-viewer-grid .dso-document-header-map-action,dso-viewer-grid .dso-document-header-toggle-features{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;border:0;color:#39870c;line-height:1;padding:0;background-color:transparent;color:#000;font-weight:normal}dso-viewer-grid .dso-document-header-map-action:focus,dso-viewer-grid .dso-document-header-map-action:focus-visible,dso-viewer-grid .dso-document-header-toggle-features:focus,dso-viewer-grid .dso-document-header-toggle-features:focus-visible{outline-offset:2px}dso-viewer-grid .dso-document-header-map-action:active,dso-viewer-grid .dso-document-header-toggle-features:active{outline:0}dso-viewer-grid .dso-document-header-map-action.extern::after,dso-viewer-grid .dso-document-header-map-action.download::after,dso-viewer-grid .dso-document-header-toggle-features.extern::after,dso-viewer-grid .dso-document-header-toggle-features.download::after{content:"";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}dso-viewer-grid .dso-document-header-map-action[disabled],dso-viewer-grid .dso-document-header-toggle-features[disabled]{color:#afcf9d}dso-viewer-grid .dso-document-header-map-action:not([disabled]):hover,dso-viewer-grid .dso-document-header-toggle-features:not([disabled]):hover{color:#676cb0;text-decoration:underline}dso-viewer-grid .dso-document-header-map-action:not([disabled]):active,dso-viewer-grid .dso-document-header-toggle-features:not([disabled]):active{color:#676cb0}dso-viewer-grid .dso-document-header-map-action.btn-align,dso-viewer-grid .dso-document-header-toggle-features.btn-align{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}dso-viewer-grid .dso-document-header-map-action.extern::after,dso-viewer-grid .dso-document-header-map-action.download::after,dso-viewer-grid .dso-document-header-toggle-features.extern::after,dso-viewer-grid .dso-document-header-toggle-features.download::after{position:relative;top:-2px}dso-viewer-grid .dso-document-header-map-action.download::after,dso-viewer-grid .dso-document-header-toggle-features.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-viewer-grid .dso-document-header-map-action.download[disabled]::after,dso-viewer-grid .dso-document-header-toggle-features.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}dso-viewer-grid .dso-document-header-map-action.download:not([disabled]):hover::after,dso-viewer-grid .dso-document-header-map-action.download:not([disabled]):active::after,dso-viewer-grid .dso-document-header-toggle-features.download:not([disabled]):hover::after,dso-viewer-grid .dso-document-header-toggle-features.download:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}dso-viewer-grid .dso-document-header-map-action.extern::after,dso-viewer-grid .dso-document-header-toggle-features.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-viewer-grid .dso-document-header-map-action.extern[disabled]::after,dso-viewer-grid .dso-document-header-toggle-features.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}dso-viewer-grid .dso-document-header-map-action.extern:not([disabled]):hover::after,dso-viewer-grid .dso-document-header-map-action.extern:not([disabled]):active::after,dso-viewer-grid .dso-document-header-toggle-features.extern:not([disabled]):hover::after,dso-viewer-grid .dso-document-header-toggle-features.extern:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}dso-viewer-grid .dso-document-header-map-action dso-icon+span:not(.sr-only),dso-viewer-grid .dso-document-header-map-action svg.di+span:not(.sr-only),dso-viewer-grid .dso-document-header-map-action span:not(.sr-only)+dso-icon,dso-viewer-grid .dso-document-header-map-action span:not(.sr-only)+svg.di,dso-viewer-grid .dso-document-header-toggle-features dso-icon+span:not(.sr-only),dso-viewer-grid .dso-document-header-toggle-features svg.di+span:not(.sr-only),dso-viewer-grid .dso-document-header-toggle-features span:not(.sr-only)+dso-icon,dso-viewer-grid .dso-document-header-toggle-features span:not(.sr-only)+svg.di{margin-left:8px}dso-viewer-grid .dso-document-header-map-action dso-icon,dso-viewer-grid .dso-document-header-map-action svg.di,dso-viewer-grid .dso-document-header-map-action span,dso-viewer-grid .dso-document-header-toggle-features dso-icon,dso-viewer-grid .dso-document-header-toggle-features svg.di,dso-viewer-grid .dso-document-header-toggle-features span{vertical-align:middle}dso-viewer-grid .dso-document-header-map-action{position:absolute;top:0;right:0}dso-viewer-grid .dso-document-header-features{margin-top:16px;margin-bottom:0;padding-top:16px;border-top:1px solid #ccc}
+@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}dso-alert>.dso-rich-content *:first-child{margin-top:0}dso-alert>.dso-rich-content *:last-child{margin-bottom:0}dso-alert>.dso-rich-content h1,dso-alert>.dso-rich-content h2,dso-alert>.dso-rich-content h3,dso-alert>.dso-rich-content h4,dso-alert>.dso-rich-content h5,dso-alert>.dso-rich-content h6,dso-alert>.dso-rich-content .h1,dso-alert>.dso-rich-content .h2,dso-alert>.dso-rich-content .h3,dso-alert>.dso-rich-content .h4,dso-alert>.dso-rich-content .h5,dso-alert>.dso-rich-content .h6{color:#000;font-size:1em;line-height:1.5;margin-bottom:8px;margin-top:8px}dso-alert>.dso-rich-content .btn,dso-alert>.dso-rich-content .dso-primary,dso-alert>.dso-rich-content .dso-secondary,dso-alert>.dso-rich-content .dso-tertiary{background-color:rgba(25, 25, 25, 0.05);border-radius:4px;border:1px solid transparent;padding:6px 12px}dso-alert>.dso-rich-content .btn:hover,dso-alert>.dso-rich-content .btn:active,dso-alert>.dso-rich-content .dso-primary:hover,dso-alert>.dso-rich-content .dso-primary:active,dso-alert>.dso-rich-content .dso-secondary:hover,dso-alert>.dso-rich-content .dso-secondary:active,dso-alert>.dso-rich-content .dso-tertiary:hover,dso-alert>.dso-rich-content .dso-tertiary:active{background-color:rgba(25, 25, 25, 0.2);color:#000}dso-alert a,dso-alert a:not(.btn):visited{color:#191919}dso-alert a:hover,dso-alert a:focus,dso-alert a:active,dso-alert a:visited{color:#191919}dso-alert a:active{text-decoration:none}dso-alert a.download::after{background:var(--dso-icon, var(--di-download-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-alert a.extern::after{background:var(--dso-icon, var(--di-external-link-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-banner a{text-decoration:underline}dso-banner a,dso-banner a:hover,dso-banner a:focus,dso-banner a:active,dso-banner a:visited{color:#191919}dso-banner a:active{text-decoration:none}dso-banner a.download::after{background:var(--dso-icon, var(--di-download-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-banner a.extern::after{background:var(--dso-icon, var(--di-external-link-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-banner .row>div{line-height:24px;position:relative}dso-banner .row>div button{position:absolute;right:16px;top:0}dso-banner .row>div button dso-icon,dso-banner .row>div button svg.di{color:#000}@media screen and (min-width: 481px){dso-banner .row>div{padding-left:48px}}@media screen and (max-width: 480px){dso-banner .row>div{padding-top:39px}}dso-banner .row>div::before{content:"";display:inline-block;left:16px;position:absolute;top:0}dso-banner .row>div>.dso-rich-content{padding-right:24px}dso-banner .row>div>.dso-rich-content h1,dso-banner .row>div>.dso-rich-content h2,dso-banner .row>div>.dso-rich-content h3,dso-banner .row>div>.dso-rich-content h4,dso-banner .row>div>.dso-rich-content h5,dso-banner .row>div>.dso-rich-content h6{color:#000;font-size:1rem;line-height:1.5;margin-bottom:0}dso-banner .row>div>.dso-rich-content h1+p,dso-banner .row>div>.dso-rich-content h2+p,dso-banner .row>div>.dso-rich-content h3+p,dso-banner .row>div>.dso-rich-content h4+p,dso-banner .row>div>.dso-rich-content h5+p,dso-banner .row>div>.dso-rich-content h6+p{display:inline}dso-banner .row>div>.dso-rich-content h1+p+*,dso-banner .row>div>.dso-rich-content h2+p+*,dso-banner .row>div>.dso-rich-content h3+p+*,dso-banner .row>div>.dso-rich-content h4+p+*,dso-banner .row>div>.dso-rich-content h5+p+*,dso-banner .row>div>.dso-rich-content h6+p+*{margin-top:16px}dso-banner .row>div>.dso-rich-content>h2:first-child{float:left;margin-right:8px}dso-banner .row>div>.dso-rich-content *:first-child{margin-top:0}dso-banner .row>div>.dso-rich-content *:last-child{margin-bottom:0}@media screen and (max-width: 480px){dso-banner .row>div>.dso-rich-content{padding-right:0}}dso-banner[status=danger]{color:#191919;background-color:#f5d8dc;border-color:#f5d8dc}dso-banner[status=danger] .row>div::before{background:var(--dso-icon, var(--di-status-danger)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-banner[status=warning]{color:#191919;background-color:#f8f6cc;border-color:#f8f6cc}dso-banner[status=warning] .row>div::before{background:var(--dso-icon, var(--di-status-warning)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.dso-tertiary::after,dso-dropdown-menu>.btn::after{content:"";display:inline-block;margin-left:8px}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.btn-primary::after{background:var(--dso-icon, var(--di-chevron-down-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.btn-default::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-dropdown-menu>.dso-secondary:hover::after,dso-dropdown-menu>.btn-default:hover::after{--dso-icon:var(--di-chevron-down-wit)}dso-dropdown-menu>.dso-tertiary::after,dso-dropdown-menu>.btn-link::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;position:relative;top:-2px}dso-dropdown-menu>.dso-tertiary:hover::after,dso-dropdown-menu>.btn-link:hover::after{--dso-icon:var(--di-chevron-down-scampi)}dso-dropdown-menu .dso-group-label{color:#999;font-size:0.875em;font-weight:400;margin:0;padding:4px 20px 2px;text-transform:uppercase}dso-dropdown-menu ul{margin:0;padding:0}dso-dropdown-menu ul:not(:last-child){border-bottom:1px solid #e5e5e5;margin-bottom:11px;padding-bottom:11px}dso-dropdown-menu .dso-dropdown-options{background-clip:padding-box;background-color:#fff;border-radius:4px;border:1px solid rgba(0, 0, 0, 0.15);box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);font-size:16px;margin:2px 0 0;min-width:160px;padding:5px 0;position:absolute;text-align:left;top:100%;z-index:220}dso-dropdown-menu .dso-dropdown-options li{list-style:none}dso-dropdown-menu .dso-dropdown-options li a:visited{color:#191919}dso-dropdown-menu .dso-dropdown-options li a,dso-dropdown-menu .dso-dropdown-options li button{text-decoration:none;clear:both;color:#191919;display:block;font-weight:400;line-height:1.5;padding:3px 20px;text-decoration:none;white-space:nowrap}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus,dso-dropdown-menu .dso-dropdown-options li a:active,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus,dso-dropdown-menu .dso-dropdown-options li button:active{text-decoration:underline}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}dso-dropdown-menu .dso-dropdown-options li button{background-color:transparent;border:0;border-radius:0;text-align:inherit;width:100%}dso-dropdown-menu[dropdown-align=right] .dso-dropdown-options{right:0}dso-dropdown-menu[open]>.dso-primary::after,dso-dropdown-menu[open]>.btn-primary::after{--dso-icon:var(--di-chevron-up-wit)}dso-dropdown-menu[open]>.dso-secondary::after,dso-dropdown-menu[open]>.btn-default::after{--dso-icon:var(--di-chevron-up)}dso-dropdown-menu[open]>.dso-secondary:hover::after,dso-dropdown-menu[open]>.btn-default:hover::after{--dso-icon:var(--di-chevron-up-wit)}dso-dropdown-menu[open]>.dso-tertiary::after,dso-dropdown-menu[open]>.btn-link::after{--dso-icon:var(--di-chevron-up)}dso-dropdown-menu[open]>.dso-tertiary:hover::after,dso-dropdown-menu[open]>.btn-link:hover::after{--dso-icon:var(--di-chevron-up-scampi)}dso-dropdown-menu[checkable] .dso-group-label{padding-left:40px}dso-dropdown-menu[checkable] li a,dso-dropdown-menu[checkable] li button{padding-left:40px}dso-dropdown-menu[checkable] li.dso-checked a:not(:focus),dso-dropdown-menu[checkable] li.dso-checked button:not(:focus){background-color:#39870c;border-color:#39870c;color:#fff}dso-dropdown-menu[checkable] li.dso-checked a::before,dso-dropdown-menu[checkable] li.dso-checked button::before{background:var(--dso-icon, var(--di-check-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;content:"";display:block;float:left;margin-left:-32px;margin-right:8px}dso-highlight-box>.dso-rich-content *:first-child{margin-top:0}dso-highlight-box>*:last-child{margin-bottom:0}dso-highlight-box .dso-tertiary:not([disabled]):hover,dso-highlight-box .dso-tertiary:not([disabled]):hover dso-icon,dso-highlight-box .dso-tertiary:not([disabled]):hover svg.di,dso-highlight-box .btn-link:not([disabled]):hover,dso-highlight-box .btn-link:not([disabled]):hover dso-icon,dso-highlight-box .btn-link:not([disabled]):hover svg.di{text-decoration:underline}dso-highlight-box.dso-has-counter{padding-top:40px;position:relative}dso-highlight-box .dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25em;font-weight:500;height:32px;left:16px;line-height:32px;position:absolute;text-align:center;top:-24px;width:32px}dso-highlight-box dso-icon{vertical-align:text-top}dso-highlight-box[yellow],dso-highlight-box:not([border]):not([white]){--di-chevron-right-grijs90:url("data:image/svg+xml,%3csvg id='chevron-right' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M9%2c19a.93.93%2c0%2c0%2c1-.67-.29%2c1%2c1%2c0%2c0%2c1%2c0-1.42l5-5.29-5-5.29a1%2c1%2c0%2c0%2c1%2c0-1.42.93.93%2c0%2c0%2c1%2c1.35%2c0L16%2c12%2c9.62%2c18.71A.93.93%2c0%2c0%2c1%2c9%2c19Z'/%3e %3c/svg%3e")}dso-highlight-box[yellow] .dso-tertiary:not([disabled]),dso-highlight-box[yellow] .btn-link:not([disabled]),dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]),dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]){color:#191919}dso-highlight-box[yellow] .dso-tertiary:not([disabled]):hover,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):hover dso-icon,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):hover svg.di,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):focus,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):focus dso-icon,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):focus svg.di,dso-highlight-box[yellow] .btn-link:not([disabled]):hover,dso-highlight-box[yellow] .btn-link:not([disabled]):hover dso-icon,dso-highlight-box[yellow] .btn-link:not([disabled]):hover svg.di,dso-highlight-box[yellow] .btn-link:not([disabled]):focus,dso-highlight-box[yellow] .btn-link:not([disabled]):focus dso-icon,dso-highlight-box[yellow] .btn-link:not([disabled]):focus svg.di,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):hover,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):hover dso-icon,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):hover svg.di,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):focus,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):focus dso-icon,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):focus svg.di,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):hover,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):hover dso-icon,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):hover svg.di,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):focus,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):focus dso-icon,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):focus svg.di{color:#666}dso-highlight-box[yellow] a:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-highlight-box[yellow] a:visited:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-highlight-box:not([border]):not([white]) a:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-highlight-box:not([border]):not([white]) a:visited:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary){color:#191919}dso-highlight-box:not([border]):not([white]) .dso-link-list li{margin-bottom:16px}dso-highlight-box:not([border]):not([white]) .dso-link-list li:last-child{margin-bottom:0}dso-highlight-box:not([border]):not([white]) .dso-link-list a{text-decoration:none;color:#191919}dso-highlight-box:not([border]):not([white]) .dso-link-list a:hover,dso-highlight-box:not([border]):not([white]) .dso-link-list a:focus,dso-highlight-box:not([border]):not([white]) .dso-link-list a:active{text-decoration:underline}dso-highlight-box:not([border]):not([white]) .dso-link-list a::before,dso-highlight-box:not([border]):not([white]) .dso-link-list a:active::before,dso-highlight-box:not([border]):not([white]) .dso-link-list a:focus::before,dso-highlight-box:not([border]):not([white]) .dso-link-list a:hover::before{background:var(--dso-icon, var(--di-chevron-right-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-highlight-box:not([border]):not([white]) .dso-link-list a:active{color:#191919;text-decoration:none}dso-highlight-box:not([border]):not([white]) .dso-link-list a.download::after{background:var(--dso-icon, var(--di-download-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-highlight-box:not([border]):not([white]) .dso-link-list a.extern::after{background:var(--dso-icon, var(--di-external-link-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-info .dso-rich-content *:first-child{margin-top:0}dso-info .dso-rich-content img{display:block;margin:8px auto;max-width:100%}dso-info .dso-rich-content a:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-info .dso-rich-content a:hover,dso-info .dso-rich-content a:focus,dso-info .dso-rich-content a:active,dso-info .dso-rich-content a:visited{color:#191919}dso-info .dso-rich-content a:active{text-decoration:none}dso-info .dso-rich-content .dso-tertiary:not([disabled]),dso-info .dso-rich-content .btn-link:not([disabled]){color:#000}dso-info .dso-rich-content .dso-tertiary:not([disabled]):hover,dso-info .dso-rich-content .dso-tertiary:not([disabled]):hover dso-icon,dso-info .dso-rich-content .dso-tertiary:not([disabled]):hover svg.di,dso-info .dso-rich-content .dso-tertiary:not([disabled]):focus,dso-info .dso-rich-content .dso-tertiary:not([disabled]):focus dso-icon,dso-info .dso-rich-content .dso-tertiary:not([disabled]):focus svg.di,dso-info .dso-rich-content .btn-link:not([disabled]):hover,dso-info .dso-rich-content .btn-link:not([disabled]):hover dso-icon,dso-info .dso-rich-content .btn-link:not([disabled]):hover svg.di,dso-info .dso-rich-content .btn-link:not([disabled]):focus,dso-info .dso-rich-content .btn-link:not([disabled]):focus dso-icon,dso-info .dso-rich-content .btn-link:not([disabled]):focus svg.di{color:#666;text-decoration:underline}dso-label span[slot=symbol]{background-color:#fff;display:block;float:left;height:20px;margin-top:2px;margin-right:8px;width:24px;overflow:hidden;position:relative}dso-label span[slot=symbol]>span{display:block;position:absolute;top:0;bottom:0;left:0;right:0}dso-map-controls>*+*{margin-top:32px}dso-selectable .dso-rich-content[slot=info] *:first-child{margin-top:0}dso-selectable .dso-rich-content[slot=info] img{display:block;margin:8px auto;max-width:100%}dso-selectable .dso-rich-content[slot=info] a:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-selectable .dso-rich-content[slot=info] a:hover,dso-selectable .dso-rich-content[slot=info] a:focus,dso-selectable .dso-rich-content[slot=info] a:active,dso-selectable .dso-rich-content[slot=info] a:visited{color:#191919}dso-selectable .dso-rich-content[slot=info] a:active{text-decoration:none}dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]),dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]){color:#000}dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):hover,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):hover dso-icon,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):hover svg.di,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus dso-icon,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus svg.di,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):hover,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):hover dso-icon,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):hover svg.di,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):focus,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):focus dso-icon,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):focus svg.di{color:#666;text-decoration:underline}dso-viewer-grid .dso-filterblok{margin-left:-16px;margin-right:-16px}dso-viewer-grid .dso-filterblok .dso-filterblok-address{font-weight:bold;margin:8px 0}@media screen and (max-width: 480px){dso-viewer-grid .dso-filterblok .dso-context-wrapper .dso-context-container{flex-basis:auto}}

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

@@ -1 +1 @@
-import{p as e,b as o}from"./p-c62606a3.js";(()=>{const o=import.meta.url,i={};return""!==o&&(i.resourcesUrl=new URL(".",o).href),e(i)})().then((e=>o([["p-8bb8148f",[[1,"dso-map-base-layers",{baseLayers:[16]}]]],["p-746d70f9",[[1,"dso-map-overlays",{overlays:[16]}]]],["p-d76c1151",[[1,"dso-header",{loginUrl:[1,"login-url"],logoutUrl:[1,"logout-url"],mainMenu:[16],useDropDownMenu:[1,"use-drop-down-menu"],isLoggedIn:[4,"is-logged-in"],userProfileName:[1,"user-profile-name"],userProfileUrl:[1,"user-profile-url"],userHomeUrl:[1,"user-home-url"],showDropDown:[32],hasSubLogo:[32],overflowMenuItems:[32]}]]],["p-14fc5767",[[1,"dso-toggletip",{label:[1],position:[1],small:[4],secondary:[4],active:[32]}]]],["p-e01b1657",[[1,"dso-tree-view",{collection:[16]}]]],["p-2f64bded",[[6,"dso-autosuggest",{suggestions:[16],loading:[4],loadingLabel:[1,"loading-label"],suggestOnFocus:[4,"suggest-on-focus"],showSuggestions:[32],selectedSuggestion:[32]},[[4,"click","onDocumentClick"]]]]],["p-7abe091d",[[2,"dso-date-picker",{name:[1],identifier:[1],disabled:[516],role:[1],direction:[1],required:[4],dsoAutofocus:[4,"dso-autofocus"],value:[1537],min:[1],max:[1],activeFocus:[32],focusedDay:[32],open:[32],visible:[32],setFocus:[64],show:[64],hide:[64]},[[6,"click","handleDocumentClick"]]]]],["p-e1496a15",[[1,"dso-helpcenter-panel",{label:[1],url:[1],visibility:[32],isOpen:[32],slideState:[32],loadIframe:[32]}]]],["p-076400f4",[[1,"dso-image-overlay",{active:[32],focused:[32]}]]],["p-5e614420",[[1,"dso-label",{compact:[4],removable:[4],status:[1],hover:[32]}]]],["p-6ec616ee",[[1,"dso-map-controls",{open:[1540],disableZoom:[1,"disable-zoom"],hideContent:[32]}]]],["p-7f41f2a1",[[1,"dso-viewer-grid",{filterpanelOpen:[516,"filterpanel-open"],overlayOpen:[516,"overlay-open"],initialMainSize:[1,"initial-main-size"],mainSize:[32]}]]],["p-ea14647b",[[1,"dso-alert",{status:[1],roleAlert:[4,"role-alert"]}]]],["p-5a56d726",[[1,"dso-attachments-counter",{count:[2]}]]],["p-1894c7ae",[[1,"dso-badge",{status:[1]}]]],["p-d0d279cc",[[1,"dso-banner",{status:[1]}]]],["p-1e92e29d",[[1,"dso-highlight-box",{yellow:[4],border:[4],white:[4],dropShadow:[4,"drop-shadow"],step:[2]}]]],["p-a8cf15cf",[[2,"dso-ozon-content",{content:[1],inline:[516],deleted:[516],interactive:[516],state:[32]}]]],["p-3cb44a36",[[1,"dso-progress-bar",{progress:[2],min:[2],max:[2]}]]],["p-49938275",[[1,"dso-dropdown-menu",{open:[1540],dropdownAlign:[1,"dropdown-align"],checkable:[4]}]]],["p-150fe323",[[1,"dso-tooltip",{descriptive:[516],position:[1],for:[1],noArrow:[4,"no-arrow"],stateless:[4],small:[4],active:[1540],hidden:[32],activate:[64],deactivate:[64]},[[0,"click","listenClick"]]]]],["p-b86128b3",[[1,"dso-progress-indicator",{label:[1],size:[1],block:[4]}]]],["p-daf049bd",[[1,"dso-info-button",{active:[1540],secondary:[4],label:[1]}]]],["p-c32860a3",[[1,"dso-selectable",{type:[1],identifier:[1],name:[1],value:[1],invalid:[4],describedById:[1,"described-by-id"],disabled:[4],required:[4],checked:[4],indeterminate:[4],infoFixed:[4,"info-fixed"],infoActive:[32],toggleInfo:[64]}],[1,"dso-info",{fixed:[516],active:[516]}]]],["p-c0b7f435",[[1,"dso-icon",{icon:[1]}]]]],e)));
+import{p as e,b as o}from"./p-c62606a3.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((e=>o([["p-202bd676",[[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]]],["p-3ad06d9d",[[1,"dso-map-overlays",{group:[1],overlays:[16]}]]],["p-09b53589",[[1,"dso-header",{loginUrl:[1,"login-url"],logoutUrl:[1,"logout-url"],mainMenu:[16],useDropDownMenu:[1,"use-drop-down-menu"],isLoggedIn:[4,"is-logged-in"],userProfileName:[1,"user-profile-name"],userProfileUrl:[1,"user-profile-url"],userHomeUrl:[1,"user-home-url"],showDropDown:[32],hasSubLogo:[32],overflowMenuItems:[32]}]]],["p-14fc5767",[[1,"dso-toggletip",{label:[1],position:[1],small:[4],secondary:[4],active:[32]}]]],["p-e01b1657",[[1,"dso-tree-view",{collection:[16]}]]],["p-2f64bded",[[6,"dso-autosuggest",{suggestions:[16],loading:[4],loadingLabel:[1,"loading-label"],suggestOnFocus:[4,"suggest-on-focus"],showSuggestions:[32],selectedSuggestion:[32]},[[4,"click","onDocumentClick"]]]]],["p-0777c1c4",[[2,"dso-date-picker",{name:[1],identifier:[1],disabled:[516],role:[1],direction:[1],required:[4],dsoAutofocus:[4,"dso-autofocus"],value:[1537],min:[1],max:[1],activeFocus:[32],focusedDay:[32],open:[32],visible:[32],setFocus:[64],show:[64],hide:[64]},[[6,"click","handleDocumentClick"]]]]],["p-e1496a15",[[1,"dso-helpcenter-panel",{label:[1],url:[1],visibility:[32],isOpen:[32],slideState:[32],loadIframe:[32]}]]],["p-076400f4",[[1,"dso-image-overlay",{active:[32],focused:[32]}]]],["p-5e614420",[[1,"dso-label",{compact:[4],removable:[4],status:[1],hover:[32]}]]],["p-60679db4",[[1,"dso-map-controls",{open:[1540],disableZoom:[1,"disable-zoom"],hideContent:[32]}]]],["p-4a41728e",[[1,"dso-pagination",{totalPages:[2,"total-pages"],currentPage:[2,"current-page"],formatHref:[16]}]]],["p-7f41f2a1",[[1,"dso-viewer-grid",{filterpanelOpen:[516,"filterpanel-open"],overlayOpen:[516,"overlay-open"],initialMainSize:[1,"initial-main-size"],mainSize:[32]}]]],["p-ea14647b",[[1,"dso-alert",{status:[1],roleAlert:[4,"role-alert"]}]]],["p-5a56d726",[[1,"dso-attachments-counter",{count:[2]}]]],["p-7796687c",[[1,"dso-badge",{status:[1]}]]],["p-d0d279cc",[[1,"dso-banner",{status:[1]}]]],["p-1e92e29d",[[1,"dso-highlight-box",{yellow:[4],border:[4],white:[4],dropShadow:[4,"drop-shadow"],step:[2]}]]],["p-f1026921",[[6,"dso-ozon-content",{content:[1],inline:[516],deleted:[516],interactive:[516],state:[32]}]]],["p-3cb44a36",[[1,"dso-progress-bar",{progress:[2],min:[2],max:[2]}]]],["p-02272301",[[1,"dso-responsive-element",{sizeAlias:[32],sizeWidth:[32]}]]],["p-49938275",[[1,"dso-dropdown-menu",{open:[1540],dropdownAlign:[1,"dropdown-align"],checkable:[4]}]]],["p-37e12c3c",[[1,"dso-tooltip",{descriptive:[516],position:[1],strategy:[1],for:[1],noArrow:[4,"no-arrow"],stateless:[4],small:[4],active:[1540],hidden:[32],activate:[64],deactivate:[64]},[[0,"click","listenClick"]]]]],["p-b86128b3",[[1,"dso-progress-indicator",{label:[1],size:[1],block:[4]}]]],["p-daf049bd",[[1,"dso-info-button",{active:[1540],secondary:[4],label:[1]}]]],["p-336bf5b9",[[6,"dso-selectable",{type:[1],identifier:[1],name:[1],value:[1],invalid:[4],describedById:[1,"described-by-id"],disabled:[4],required:[4],checked:[4],indeterminate:[4],infoFixed:[4,"info-fixed"],infoActive:[32],toggleInfo:[64]}],[1,"dso-info",{fixed:[516],active:[516]}]]],["p-c0b7f435",[[1,"dso-icon",{icon:[1]}]]]],e)));

package/dist/dso-toolkit/p-02272301.entry.js

@@ -0,0 +1 @@
+import{r as s,h as t,H as i,g as l}from"./p-c62606a3.js";const e=[{width:624,alias:"large"},{width:375,alias:"medium"},{width:0,alias:"small"}];let a=class{constructor(t){s(this,t),this.sizeAlias=e[0].alias,this.sizeWidth=0,this.observer=new ResizeObserver((([s])=>{var t,i;const l=null!==(i=null===(t=e.find((t=>s.contentRect.width>=t.width)))||void 0===t?void 0:t.alias)&&void 0!==i?i:e[0].alias;this.sizeAlias=l}))}componentWillLoad(){this.observer.observe(this.host)}disconnectedCallback(){this.observer.unobserve(this.host)}render(){return t(i,{small:"small"===this.sizeAlias,medium:"medium"===this.sizeAlias,large:"large"===this.sizeAlias},t("slot",null))}get host(){return l(this)}};a.style=":host{display:block}";export{a as dso_responsive_element}