@dso-toolkit/core 34.0.0 → 34.2.1

package/dist/cjs/dso-date-picker.cjs.entry.js

@@ -244,7 +244,7 @@ const localization = {
   ]
 };
 
-const datePickerCss = ".sc-dso-date-picker-h{display:block}.dso-date.sc-dso-date-picker *.sc-dso-date-picker,.dso-date.sc-dso-date-picker *.sc-dso-date-picker::before,.dso-date.sc-dso-date-picker *.sc-dso-date-picker::after{box-sizing:border-box}.dso-date.sc-dso-date-picker{box-sizing:border-box;color:#191919;display:block;font-family:\"Asap\", sans-serif;margin:0;position:relative;text-align:left;width:100%}.dso-date__input.sc-dso-date-picker{display:block;width:100%;height:40px;padding:6px 14px;font-size:16px;line-height:1.5;color:#191919;background-color:#fff;background-image:none;border:1px solid #275937;border-radius:4px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s}.dso-date__input.sc-dso-date-picker::-moz-placeholder{color:#666;opacity:1}.dso-date__input.sc-dso-date-picker:-ms-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-webkit-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-ms-expand{background-color:transparent;border:0}.dso-date__input.sc-dso-date-picker:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled].sc-dso-date-picker,.dso-date__input[readonly].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{background-color:#fff;opacity:1}.dso-date__input[disabled].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{cursor:default}.dso-date__input[disabled].sc-dso-date-picker{border-color:#e5e5e5;color:#999}.dso-date__input[readonly].sc-dso-date-picker{border-width:1px}.dso-date__input[type=text].sc-dso-date-picker{line-height:40px}.dso-date__input[size].sc-dso-date-picker{width:auto}.dso-date__toggle.sc-dso-date-picker{-moz-appearance:none;-webkit-appearance:none;-webkit-user-select:none;align-items:center;appearance:none;background:transparent;border:0;border-radius:0;border-bottom-right-radius:4px;border-top-right-radius:4px;color:#39870c;cursor:pointer;display:flex;height:38px;justify-content:center;padding:0;position:absolute;right:0;transform:translateY(-50%);top:50%;user-select:none;width:38px;z-index:2}.dso-date__toggle.sc-dso-date-picker:disabled{color:#afcf9d;cursor:pointer}.dso-date__dialog.sc-dso-date-picker{display:flex;right:0;min-width:320px;opacity:0;position:absolute;top:100%;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;visibility:hidden;will-change:transform, opacity, visibility;z-index:600}@media (max-width: 35.9375em){.dso-date__dialog.sc-dso-date-picker{background:rgba(25, 25, 25, 0.5);bottom:0;position:fixed;left:0;right:0;top:0;transform:translateZ(0);transform-origin:bottom center}}.dso-date__dialog.is-left.sc-dso-date-picker{left:auto;right:0;width:auto}.dso-date__dialog.is-active.sc-dso-date-picker{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.dso-date__dialog-content.sc-dso-date-picker{background:#fff;border:1px solid rgba(0, 0, 0, 0.1);border-radius:4px;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);margin-left:auto;margin-right:-1px;margin-top:8px;max-width:310px;min-width:290px;padding:16px;position:relative;transform:none;width:100%;z-index:600}@media (max-width: 35.9375em){.dso-date__dialog-content.sc-dso-date-picker{border:0;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;bottom:0;left:0;margin:0;max-width:none;min-height:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;visibility:hidden;will-change:transform, opacity, visibility}.is-active.sc-dso-date-picker .dso-date__dialog-content.sc-dso-date-picker{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}}.dso-date__table.sc-dso-date-picker{border-collapse:collapse;border-spacing:0;color:#191919;font-size:1rem;font-weight:400;line-height:1.25;min-width:280px;table-layout:fixed;text-align:center;width:100%}.dso-date__table-header.sc-dso-date-picker{font-size:0.875em;font-weight:600;height:36px;line-height:36px;text-decoration:none;text-transform:uppercase}.dso-date__cell.sc-dso-date-picker{height:40px;padding:1px;text-align:center;width:40px}.dso-date__day.sc-dso-date-picker{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;box-shadow:0 0 0 1px transparent;color:#191919;cursor:pointer;display:inline-block;font-family:\"Asap\", sans-serif;font-variant-numeric:tabular-nums;font-weight:400;height:38px;line-height:0;padding:0;position:relative;text-align:center;vertical-align:middle;width:38px;z-index:1}.dso-date__day.is-today.sc-dso-date-picker{background:transparent;height:36px;box-shadow:0 0 0 1px #39870c;width:36px}.dso-date__day.sc-dso-date-picker:hover,.dso-date__day.sc-dso-date-picker:active{background:#39870c;color:#fff}.dso-date__day.sc-dso-date-picker:focus{background:transparent;box-shadow:0 0 0 2px #275937;color:#191919;height:34px;outline:0;width:34px}[aria-selected=true].sc-dso-date-picker .dso-date__day.sc-dso-date-picker{background:#39870c;color:#fff}[aria-selected=true].sc-dso-date-picker .dso-date__day.sc-dso-date-picker:focus{background:transparent}[aria-selected=true].sc-dso-date-picker .dso-date__day.sc-dso-date-picker:focus span[aria-hidden=true].sc-dso-date-picker{background:#39870c;border:1px solid #fff;line-height:32px}.dso-date__day.is-outside.sc-dso-date-picker{background:#f2f2f2;box-shadow:none;color:#666;cursor:default;pointer-events:none}.dso-date__day.is-disabled.sc-dso-date-picker{background:#fff;cursor:default}.dso-date__day.is-disabled.sc-dso-date-picker:hover{color:#666}.dso-date__day.sc-dso-date-picker span[aria-hidden=true].sc-dso-date-picker{border-radius:50%;display:inline-block;height:34px;line-height:34px;width:34px}.dso-date__header.sc-dso-date-picker{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px;width:100%}.dso-date__header.sc-dso-date-picker span.sc-dso-date-picker{font-size:0.875rem}.dso-date__nav.sc-dso-date-picker{white-space:nowrap}.dso-date__prev.sc-dso-date-picker,.dso-date__next.sc-dso-date-picker{-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:transparent;border:1px solid #39870c;border-radius:4px;box-sizing:border-box;color:#39870c;cursor:pointer;display:inline-flex;font-size:1em;height:32px;justify-content:center;margin-left:8px;padding:0;width:32px}@media (max-width: 35.9375em){.dso-date__prev.sc-dso-date-picker,.dso-date__next.sc-dso-date-picker{height:40px;width:40px}}.dso-date__prev.sc-dso-date-picker:hover,.dso-date__prev.sc-dso-date-picker:active,.dso-date__next.sc-dso-date-picker:hover,.dso-date__next.sc-dso-date-picker:active{background-color:#39870c;color:#fff}.dso-date__prev.sc-dso-date-picker:focus,.dso-date__next.sc-dso-date-picker:focus{background:transparent;color:#39870c}.dso-date__prev.sc-dso-date-picker:disabled,.dso-date__prev.sc-dso-date-picker:disabled:hover,.dso-date__next.sc-dso-date-picker:disabled,.dso-date__next.sc-dso-date-picker:disabled:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d;opacity:1}.dso-date__prev.sc-dso-date-picker svg.sc-dso-date-picker,.dso-date__next.sc-dso-date-picker svg.sc-dso-date-picker{margin:0 auto}.dso-date__select.sc-dso-date-picker{display:inline-flex;height:28px;line-height:28px;position:relative}.dso-date__select.sc-dso-date-picker span.sc-dso-date-picker{margin-right:4px}.dso-date__select.sc-dso-date-picker select.sc-dso-date-picker{color:#275937;cursor:pointer;font-size:1rem;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.dso-date__select.sc-dso-date-picker select.sc-dso-date-picker:focus+.dso-date__select-label.sc-dso-date-picker{box-shadow:0 0 0 2px #275937}.dso-date__select.sc-dso-date-picker select.sc-dso-date-picker:disabled{color:#afcf9d}.dso-date__select-label.sc-dso-date-picker{align-items:center;border-radius:4px;color:#39870c;display:flex;padding:0 4px 0 8px;pointer-events:none;position:relative;width:100%;z-index:1}.dso-date__select-label.sc-dso-date-picker span.sc-dso-date-picker{font-size:1.25rem;font-weight:600;line-height:1.25}.dso-date__select-label.sc-dso-date-picker svg.sc-dso-date-picker{width:16px;height:16px}.dso-date__mobile.sc-dso-date-picker{align-items:center;border-bottom:1px solid rgba(0, 0, 0, 0.12);display:flex;font-size:1em;justify-content:space-between;margin-bottom:20px;margin-left:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;width:120%}@media (min-width: 36em){.dso-date__mobile.sc-dso-date-picker{border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-16px;top:-16px;width:auto}}.dso-date__mobile-heading.sc-dso-date-picker{display:inline-block;font-weight:600;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.dso-date__mobile-heading.sc-dso-date-picker{display:none}}.dso-date__close.sc-dso-date-picker{-webkit-appearance:none;align-items:center;appearance:none;background-color:#fff;border:0;border-radius:50%;color:#39870c;cursor:pointer;display:flex;font-size:1em;height:32px;justify-content:center;margin-right:-4px;padding:0;width:32px}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker{margin-right:0;opacity:0}}.dso-date__close.sc-dso-date-picker:focus{box-shadow:0 0 0 2px #275937;outline:none}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker:focus{opacity:1}}.dso-date__vhidden.sc-dso-date-picker{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}";
+const datePickerCss = ".sc-dso-date-picker-h{display:block}.dso-date.sc-dso-date-picker *.sc-dso-date-picker,.dso-date.sc-dso-date-picker *.sc-dso-date-picker::before,.dso-date.sc-dso-date-picker *.sc-dso-date-picker::after{box-sizing:border-box}.dso-date.sc-dso-date-picker{box-sizing:border-box;color:#191919;display:block;font-family:\"Asap\", sans-serif;margin:0;position:relative;text-align:left;width:100%}.dso-date__input.sc-dso-date-picker{display:block;width:100%;height:40px;padding:6px 14px;font-size:16px;line-height:1.5;color:#191919;background-color:#fff;background-image:none;border:1px solid #275937;border-radius:4px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s}.dso-date__input.sc-dso-date-picker::-moz-placeholder{color:#666;opacity:1}.dso-date__input.sc-dso-date-picker:-ms-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-webkit-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-ms-expand{background-color:transparent;border:0}.dso-date__input.sc-dso-date-picker:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled].sc-dso-date-picker,.dso-date__input[readonly].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{background-color:#fff;opacity:1}.dso-date__input[disabled].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{cursor:default}.dso-date__input[disabled].sc-dso-date-picker{border-color:#e5e5e5;color:#999}.dso-date__input[readonly].sc-dso-date-picker{border-width:1px}.dso-date__input[type=text].sc-dso-date-picker{line-height:40px}.dso-date__input[size].sc-dso-date-picker{width:auto}.dso-date__toggle.sc-dso-date-picker{-moz-appearance:none;-webkit-appearance:none;-webkit-user-select:none;align-items:center;appearance:none;background:transparent;border:0;border-radius:0;border-bottom-right-radius:4px;border-top-right-radius:4px;color:#39870c;cursor:pointer;display:flex;height:38px;justify-content:center;padding:0;position:absolute;right:0;transform:translateY(-50%);top:50%;user-select:none;width:38px;z-index:2}.dso-date__toggle.sc-dso-date-picker:disabled{color:#afcf9d;cursor:pointer}.dso-date__dialog.sc-dso-date-picker{border-width:1px;display:flex;right:0;min-width:320px;opacity:0;position:absolute;top:100%;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;visibility:hidden;will-change:transform, opacity, visibility;z-index:600}@media (max-width: 35.9375em){.dso-date__dialog.sc-dso-date-picker{background:rgba(25, 25, 25, 0.5);bottom:0;position:fixed;left:0;right:0;top:0;transform:translateZ(0);transform-origin:bottom center}}.dso-date__dialog.is-left.sc-dso-date-picker{left:-11px;right:auto;width:auto}.dso-date__dialog.is-active.sc-dso-date-picker{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.dso-date__dialog-content.sc-dso-date-picker{background:#fff;border:1px solid rgba(0, 0, 0, 0.1);border-radius:4px;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);margin-left:auto;margin-right:-1px;margin-top:8px;max-width:310px;min-width:290px;padding:16px;position:relative;transform:none;width:100%;z-index:600}@media (max-width: 35.9375em){.dso-date__dialog-content.sc-dso-date-picker{border:0;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;bottom:0;left:0;margin:0;max-width:none;min-height:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;visibility:hidden;will-change:transform, opacity, visibility}.is-active.sc-dso-date-picker .dso-date__dialog-content.sc-dso-date-picker{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}}.dso-date__table.sc-dso-date-picker{border-collapse:collapse;border-spacing:0;color:#191919;font-size:1rem;font-weight:400;line-height:1.25;min-width:280px;table-layout:fixed;text-align:center;width:100%}.dso-date__table-header.sc-dso-date-picker{font-size:0.875em;font-weight:600;height:36px;line-height:36px;text-decoration:none;text-transform:uppercase}.dso-date__cell.sc-dso-date-picker{height:40px;padding:1px;text-align:center;width:40px}.dso-date__day.sc-dso-date-picker{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;box-shadow:0 0 0 1px transparent;color:#191919;cursor:pointer;display:inline-block;font-family:\"Asap\", sans-serif;font-variant-numeric:tabular-nums;font-weight:400;height:38px;line-height:0;padding:0;position:relative;text-align:center;vertical-align:middle;width:38px;z-index:1}.dso-date__day.is-today.sc-dso-date-picker{background:transparent;height:36px;box-shadow:0 0 0 1px #39870c;width:36px}.dso-date__day.sc-dso-date-picker:hover,.dso-date__day.sc-dso-date-picker:active{background:#39870c;color:#fff}.dso-date__day.sc-dso-date-picker:focus{background:transparent;box-shadow:0 0 0 2px #275937;color:#191919;height:34px;outline:0;width:34px}[aria-selected=true].sc-dso-date-picker .dso-date__day.sc-dso-date-picker{background:#39870c;color:#fff}[aria-selected=true].sc-dso-date-picker .dso-date__day.sc-dso-date-picker:focus{background:transparent}[aria-selected=true].sc-dso-date-picker .dso-date__day.sc-dso-date-picker:focus span[aria-hidden=true].sc-dso-date-picker{background:#39870c;border:1px solid #fff;line-height:32px}.dso-date__day.is-outside.sc-dso-date-picker{background:#f2f2f2;box-shadow:none;color:#666;cursor:default;pointer-events:none}.dso-date__day.is-disabled.sc-dso-date-picker{background:#fff;cursor:default}.dso-date__day.is-disabled.sc-dso-date-picker:hover{color:#666}.dso-date__day.sc-dso-date-picker span[aria-hidden=true].sc-dso-date-picker{border-radius:50%;display:inline-block;height:34px;line-height:34px;width:34px}.dso-date__header.sc-dso-date-picker{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px;width:100%}.dso-date__header.sc-dso-date-picker span.sc-dso-date-picker{font-size:0.875rem}.dso-date__nav.sc-dso-date-picker{white-space:nowrap}.dso-date__prev.sc-dso-date-picker,.dso-date__next.sc-dso-date-picker{-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:transparent;border:1px solid #39870c;border-radius:4px;box-sizing:border-box;color:#39870c;cursor:pointer;display:inline-flex;font-size:1em;height:32px;justify-content:center;margin-left:8px;padding:0;width:32px}@media (max-width: 35.9375em){.dso-date__prev.sc-dso-date-picker,.dso-date__next.sc-dso-date-picker{height:40px;width:40px}}.dso-date__prev.sc-dso-date-picker:hover,.dso-date__prev.sc-dso-date-picker:active,.dso-date__next.sc-dso-date-picker:hover,.dso-date__next.sc-dso-date-picker:active{background-color:#39870c;color:#fff}.dso-date__prev.sc-dso-date-picker:focus,.dso-date__next.sc-dso-date-picker:focus{background:transparent;color:#39870c}.dso-date__prev.sc-dso-date-picker:disabled,.dso-date__prev.sc-dso-date-picker:disabled:hover,.dso-date__next.sc-dso-date-picker:disabled,.dso-date__next.sc-dso-date-picker:disabled:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d;opacity:1}.dso-date__prev.sc-dso-date-picker svg.sc-dso-date-picker,.dso-date__next.sc-dso-date-picker svg.sc-dso-date-picker{margin:0 auto}.dso-date__select.sc-dso-date-picker{display:inline-flex;height:28px;line-height:28px;position:relative}.dso-date__select.sc-dso-date-picker span.sc-dso-date-picker{margin-right:4px}.dso-date__select.sc-dso-date-picker select.sc-dso-date-picker{color:#275937;cursor:pointer;font-size:1rem;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.dso-date__select.sc-dso-date-picker select.sc-dso-date-picker:focus+.dso-date__select-label.sc-dso-date-picker{box-shadow:0 0 0 2px #275937}.dso-date__select.sc-dso-date-picker select.sc-dso-date-picker:disabled{color:#afcf9d}.dso-date__select-label.sc-dso-date-picker{align-items:center;border-radius:4px;color:#39870c;display:flex;padding:0 4px 0 8px;pointer-events:none;position:relative;width:100%;z-index:1}.dso-date__select-label.sc-dso-date-picker span.sc-dso-date-picker{font-size:1.25rem;font-weight:600;line-height:1.25}.dso-date__select-label.sc-dso-date-picker svg.sc-dso-date-picker{width:16px;height:16px}.dso-date__mobile.sc-dso-date-picker{align-items:center;border-bottom:1px solid rgba(0, 0, 0, 0.12);display:flex;font-size:1em;justify-content:space-between;margin-bottom:20px;margin-left:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;width:120%}@media (min-width: 36em){.dso-date__mobile.sc-dso-date-picker{border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-16px;top:-16px;width:auto}}.dso-date__mobile-heading.sc-dso-date-picker{display:inline-block;font-weight:600;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.dso-date__mobile-heading.sc-dso-date-picker{display:none}}.dso-date__close.sc-dso-date-picker{-webkit-appearance:none;align-items:center;appearance:none;background-color:#fff;border:0;border-radius:50%;color:#39870c;cursor:pointer;display:flex;font-size:1em;height:32px;justify-content:center;margin-right:-4px;padding:0;width:32px}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker{margin-right:0;opacity:0}}.dso-date__close.sc-dso-date-picker:focus{box-shadow:0 0 0 2px #275937;outline:none}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker:focus{opacity:1}}.dso-date__vhidden.sc-dso-date-picker{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}";
 
 function range(from, to) {
   var result = [];
@@ -266,7 +266,7 @@ const keyCode = {
   RIGHT: 39,
   DOWN: 40,
 };
-const DISALLOWED_CHARACTERS = /[^0-9\.\/\-]+/g;
+const DISALLOWED_CHARACTERS = /[^0-9\-]+/g;
 const TRANSITION_MS = 300;
 let DsoDatePicker = class {
   constructor(hostRef) {
@@ -478,7 +478,49 @@ let DsoDatePicker = class {
     };
     this.handleInputChange = (e) => {
       const target = e.target;
-      this.setValue(target.value.replace(DISALLOWED_CHARACTERS, ""));
+      this.setValue(target.value);
+    };
+    this.handleKeyPress = (e) => {
+      if (e.key.search(DISALLOWED_CHARACTERS) > -1) {
+        e.preventDefault();
+      }
+    };
+    this.prepareEvent = (value) => {
+      var event = {
+        component: "dso-date-picker",
+        value: "",
+        valueAsDate: undefined
+      };
+      if (value instanceof Date) {
+        event.valueAsDate = value;
+      }
+      else {
+        event.value = value;
+        event.valueAsDate = parseDutchDate(value);
+      }
+      if (event.valueAsDate) {
+        event.value = printDutchDate(event.valueAsDate);
+      }
+      if (!event.valueAsDate && this.required) {
+        event.error = "required";
+      }
+      if (event.value && !event.valueAsDate) {
+        event.error = "invalid";
+      }
+      if (event.valueAsDate && (this.min || this.max)) {
+        const min = parseDutchDate(this.min);
+        const max = parseDutchDate(this.max);
+        const clampValue = clamp(event.valueAsDate, min, max);
+        if (clampValue !== event.valueAsDate && clampValue === min) {
+          event.valueAsDate = undefined;
+          event.error = "min-range";
+        }
+        else if (clampValue !== event.valueAsDate && clampValue === max) {
+          event.valueAsDate = undefined;
+          event.error = "max-range";
+        }
+      }
+      return event;
     };
     this.processFocusedDayNode = (element) => {
       this.focusedDayNode = element;
@@ -570,27 +612,7 @@ let DsoDatePicker = class {
     this.focusedDay = clamp(day, parseDutchDate(this.min), parseDutchDate(this.max));
   }
   setValue(value) {
-    var event = {
-      component: "dso-date-picker",
-      value: "",
-      valueAsDate: undefined
-    };
-    if (value instanceof Date) {
-      event.valueAsDate = value;
-    }
-    else {
-      event.value = value;
-      event.valueAsDate = parseDutchDate(value);
-    }
-    if (event.valueAsDate) {
-      event.value = printDutchDate(event.valueAsDate);
-    }
-    if (!event.valueAsDate && this.required) {
-      event.error = "required";
-    }
-    if (event.value && !event.valueAsDate) {
-      event.error = "invalid";
-    }
+    const event = this.prepareEvent(value);
     this.value = event.value;
     this.dateChange.emit(event);
   }
@@ -625,7 +647,7 @@ let DsoDatePicker = class {
     if (maxDate) {
       maxYear = Math.min(maxYear, maxDate.getFullYear());
     }
-    return (index.h(index.Host, null, index.h("div", { class: "dso-date" }, index.h("div", { class: "dso-date__input-wrapper" }, index.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) }), index.h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) }, index.h("span", { class: "dso-date__toggle-icon" }, index.h("dso-icon", { icon: "calendar" })), index.h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (index.h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), index.h("div", { class: {
+    return (index.h(index.Host, null, index.h("div", { class: "dso-date" }, index.h("div", { class: "dso-date__input-wrapper" }, index.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) }), index.h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) }, index.h("span", { class: "dso-date__toggle-icon" }, index.h("dso-icon", { icon: "calendar" })), index.h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (index.h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), index.h("div", { class: {
         "dso-date__dialog": true,
         "is-left": this.direction === "left",
         "is-active": this.open,

package/dist/cjs/dso-header.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-5ea63531.js');
 const clsx_m = require('./clsx.m-b00fa5e1.js');
 const index$1 = require('./index-794ad37a.js');
 
-const headerCss = ":host{--di-chevron-down-bosgroen:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-up-bosgroen:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");display:block}.dso-header{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap}@media screen and (min-width: 768px){.dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down{flex-wrap:nowrap}}.logo-container{display:flex;flex-wrap:wrap;padding-bottom:16px;padding-top:16px}@media screen and (min-width: 768px){.sub-logo{margin-left:24px}}@media screen and (max-width: 767px){.sub-logo{flex-basis:100%}}.login,.logout{margin-right:16px}.profile a,.logout a,.login a{text-decoration:none;color:#39870c;font-weight:600}.profile a:hover,.profile a:focus,.logout a:hover,.logout a:focus,.login a:hover,.login a:focus{text-decoration:none}.profile a:active,.logout a:active,.login a:active{text-decoration:underline}.dso-header-session{display:flex;margin-left:auto}.dso-header-session .profile a{margin-left:8px}.dso-header-session .profile+.logout{border-left:3px solid #ccc;margin-left:16px;padding-left:16px}.dso-navbar{flex-basis:100%}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:1.5em;vertical-align:top;width:1.5em}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:1.5em;vertical-align:top;width:1.5em}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:1.5em;vertical-align:top;width:1.5em;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:1000}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[open] button::after{background:var(--dso-icon, var(--di-chevron-up-bosgroen)) no-repeat;background-position:center;background-size:cover;height:1.2em;vertical-align:top;width:1.2em}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-dropdown-menu button{align-items:flex-end;background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;padding-right:32px}dso-dropdown-menu button::after{background:var(--dso-icon, var(--di-chevron-down-bosgroen)) no-repeat;background-position:center;background-size:cover;height:1.2em;vertical-align:top;width:1.2em;content:\"\";display:inline-block;margin-left:8px;position:absolute;right:0;top:50%;transform:translateY(-50%)}@media screen and (max-width: 991px){dso-dropdown-menu[dropdown-align=right] .dso-dropdown-options{right:-16px}}@media screen and (max-width: 767px){dso-dropdown-menu{top:12px}}dso-dropdown-menu .dso-dropdown-options{border:0;border-radius:0}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul{width:320px}@media screen and (max-width: 991px){dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul{width:100vw}}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a{color:#275937;font-size:1.25rem;padding:16px}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li.dso-active a{font-weight:600}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li+li{border-top:1px solid #ccc}.dropdown{margin-left:auto}@media screen and (max-width: 767px){.dropdown dso-dropdown-menu{top:28px}}.dropdown dso-dropdown-menu .dso-dropdown-options{top:calc(100% + 29px)}@media screen and (max-width: 767px){.dropdown dso-dropdown-menu .dso-dropdown-options{top:72px}}.dropdown dso-dropdown-menu[open] button::after{background:var(--dso-icon, var(--di-chevron-up)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.dropdown dso-dropdown-menu button{color:#39870c;font-size:16px;font-weight:600}.dropdown dso-dropdown-menu button:hover,.dropdown dso-dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dropdown dso-dropdown-menu button::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.dso-nav{align-items:end;column-gap:32px;display:flex;list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.dso-nav>li{margin-bottom:4px}.dso-nav>li>a{display:block}.dso-nav>li>a,.dso-nav>li>a:hover,.dso-nav>li>a:focus,.dso-nav>li>a:visited{color:#275937}.dso-nav>li.dso-active,.dso-nav>li.is-active{margin-bottom:0}.dso-nav>li.dso-active>a,.dso-nav>li.is-active>a{border-bottom:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main>li>a{text-decoration:none;font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;white-space:nowrap}.dso-nav.dso-nav-main>li>a:hover,.dso-nav.dso-nav-main>li>a:focus,.dso-nav.dso-nav-main>li>a:active{text-decoration:underline}.dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options{top:calc(100% + 3px)}.dso-nav.dso-nav-main dso-dropdown-menu button{font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;align-items:center;color:#275937;padding-right:32px}.dso-nav.dso-nav-main dso-dropdown-menu button:hover,.dso-nav.dso-nav-main dso-dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main dso-dropdown-menu button::after{top:auto;transform:none}.dso-nav.dso-nav-sub>li{display:inline-block}.dso-nav.dso-nav-sub>li>a{text-decoration:none;font-size:16px;margin-top:4px;padding:4px 8px 3px}.dso-nav.dso-nav-sub>li>a:hover,.dso-nav.dso-nav-sub>li>a:focus,.dso-nav.dso-nav-sub>li>a:active{text-decoration:underline}.dso-nav .menu-user-home{margin-left:auto}.dso-nav .menu-user-home dso-icon{height:1em;margin-right:8px;position:relative;top:-2px;width:1.2em}";
+const headerCss = ":host{--di-chevron-down-bosgroen:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-up-bosgroen:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");display:block}.dso-header{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;padding:0 16px;position:relative}@media screen and (min-width: 768px){.dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down{flex-wrap:nowrap}}.logo-container{display:flex;flex-wrap:wrap;padding-bottom:16px;padding-top:16px}@media screen and (max-width: 767px){.logo-container{max-width:200px}}.logo-container+.dropdown dso-dropdown-menu{position:static}@media screen and (min-width: 768px){.sub-logo{margin-left:24px}}@media screen and (max-width: 767px){.sub-logo{flex-basis:100%}}.login,.logout{margin-right:16px}.profile a,.logout a,.login a{text-decoration:none;color:#39870c;font-weight:600}.profile a:hover,.profile a:focus,.logout a:hover,.logout a:focus,.login a:hover,.login a:focus{text-decoration:none}.profile a:active,.logout a:active,.login a:active{text-decoration:underline}.dso-header-session{display:flex;margin-left:auto}.dso-header-session .profile a{margin-left:8px}.dso-header-session .profile+.logout{border-left:3px solid #ccc;margin-left:16px;padding-left:16px}.dso-navbar{flex-basis:100%}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:1.5em;vertical-align:top;width:1.5em}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:1.5em;vertical-align:top;width:1.5em}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:1.5em;vertical-align:top;width:1.5em;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:1000}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[open] button::after{background:var(--dso-icon, var(--di-chevron-up-bosgroen)) no-repeat;background-position:center;background-size:cover;height:1.2em;vertical-align:top;width:1.2em}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-dropdown-menu button{align-items:flex-end;background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;padding-right:32px}dso-dropdown-menu button::after{background:var(--dso-icon, var(--di-chevron-down-bosgroen)) no-repeat;background-position:center;background-size:cover;height:1.2em;vertical-align:top;width:1.2em;content:\"\";display:inline-block;margin-left:8px;position:absolute;right:0;top:50%;transform:translateY(-50%)}@media screen and (max-width: 767px){dso-dropdown-menu{top:12px}}dso-dropdown-menu .dso-dropdown-options{border:0;border-radius:0}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul{width:320px}@media screen and (max-width: 991px){dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul{width:100%}}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a{color:#275937;font-size:1.25rem;padding:16px}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li.dso-active a{font-weight:600}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li+li{border-top:1px solid #ccc}.dropdown{margin-left:auto}@media screen and (max-width: 767px){.dropdown dso-dropdown-menu{margin-top:28px}}.dropdown dso-dropdown-menu .dso-dropdown-options{left:0;right:0;top:100%}.dropdown dso-dropdown-menu[open] button::after{background:var(--dso-icon, var(--di-chevron-up)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.dropdown dso-dropdown-menu button{color:#39870c;font-size:16px;font-weight:600;position:relative}.dropdown dso-dropdown-menu button:hover,.dropdown dso-dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dropdown dso-dropdown-menu button::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.dso-nav{align-items:end;column-gap:32px;display:flex;list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.dso-nav>li{margin-bottom:4px}.dso-nav>li>a{display:block}.dso-nav>li>a,.dso-nav>li>a:hover,.dso-nav>li>a:focus,.dso-nav>li>a:visited{color:#275937}.dso-nav>li.dso-active,.dso-nav>li.is-active{margin-bottom:0}.dso-nav>li.dso-active>a,.dso-nav>li.is-active>a{border-bottom:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main>li>a{text-decoration:none;font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;white-space:nowrap}.dso-nav.dso-nav-main>li>a:hover,.dso-nav.dso-nav-main>li>a:focus,.dso-nav.dso-nav-main>li>a:active{text-decoration:underline}.dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options{top:calc(100% + 3px)}.dso-nav.dso-nav-main dso-dropdown-menu button{font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;align-items:center;color:#275937;padding-right:32px}.dso-nav.dso-nav-main dso-dropdown-menu button:hover,.dso-nav.dso-nav-main dso-dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main dso-dropdown-menu button::after{top:auto;transform:none}.dso-nav.dso-nav-sub>li{display:inline-block}.dso-nav.dso-nav-sub>li>a{text-decoration:none;font-size:16px;margin-top:4px;padding:4px 8px 3px}.dso-nav.dso-nav-sub>li>a:hover,.dso-nav.dso-nav-sub>li>a:focus,.dso-nav.dso-nav-sub>li>a:active{text-decoration:underline}.dso-nav .menu-user-home{margin-left:auto}.dso-nav .menu-user-home dso-icon{height:1em;margin-right:8px;position:relative;top:-2px;width:1.2em}";
 
 const minDesktopViewportWidth = 992;
 let Header = class {

package/dist/cjs/dso-info_2.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5ea63531.js');
 const createIdentifier = require('./create-identifier-fa070b11.js');
 
-const infoCss = ":host{--di-times-grijs90:url(\"data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e\");display:block;background-color:#f2f2f2;padding:16px 32px 16px 16px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;right:8px;top:8px}:host>button::before{background:var(--dso-icon, var(--di-times-grijs90)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em;content:\"\";display:inline-block}:host(:not([active]):not([fixed])){display:none}*,*::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}";
+const infoCss = "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{--di-times-grijs90:url(\"data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e\");display:block;background-color:#f2f2f2;padding:16px 32px 16px 16px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;right:8px;top:8px}:host>button::before{background:var(--dso-icon, var(--di-times-grijs90)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em;content:\"\";display:inline-block}:host(:not([active]):not([fixed])){display:none}*,*::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}";
 
 let Info = class {
   constructor(hostRef) {
@@ -27,6 +27,9 @@ let Selectable = class {
     this.infoActive = false;
     this.fallbackIdentifier = createIdentifier.createIdentifier('DsoSelectable');
   }
+  async toggleInfo(active) {
+    this.infoActive = active !== null && active !== void 0 ? active : !this.infoActive;
+  }
   componentDidLoad() {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();

package/dist/cjs/dso-map-base-layers.cjs.entry.js

@@ -10,12 +10,25 @@ let MapBaseLayers = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.baseLayerChange = index.createEvent(this, "baseLayerChange", 7);
+    this.selectableRefs = {};
   }
   baseLayerChangeHandler(baseLayer) {
     this.baseLayerChange.emit({ activeBaseLayer: baseLayer });
   }
+  componentDidRender() {
+    this.baseLayers
+      .filter(l => { var _a, _b; return !l.disabled && ((_b = (_a = this.previousBaselayers) === null || _a === void 0 ? void 0 : _a.find(p => p.id === l.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
+      .forEach(o => {
+      var _a;
+      (_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
+    });
+    this.previousBaselayers = this.baseLayers;
+  }
   render() {
-    return (index.h("fieldset", { class: "form-group dso-radios" }, index.h("legend", { class: "sr-only" }, "Achtergrond"), index.h("div", { class: "dso-label-container" }, index.h("span", { class: "control-label", "aria-hidden": "true" }, "Achtergrond")), index.h("div", { class: "dso-field-container" }, this.baseLayers.map(baseLayer => (index.h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info
+    for (const ref in this.selectableRefs) {
+      delete this.selectableRefs[ref];
+    }
+    return (index.h("fieldset", { class: "form-group dso-radios" }, index.h("legend", { class: "sr-only" }, "Achtergrond"), index.h("div", { class: "dso-label-container" }, index.h("span", { class: "control-label", "aria-hidden": "true" }, "Achtergrond")), index.h("div", { class: "dso-field-container" }, this.baseLayers.map(baseLayer => (index.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
       ? index.h("p", { slot: "info" }, baseLayer.info)
       : null))))));
   }

package/dist/cjs/dso-map-controls.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5ea63531.js');
 
-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:1.5em;vertical-align:top;width:1.5em}#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:1.5em;vertical-align:top;width:1.5em}#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:1.5em;vertical-align:top;width:1.5em}#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:1.5em;vertical-align:top;width:1.5em}#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:1.5em;vertical-align:top;width:1.5em}#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:1.5em;vertical-align:top;width:1.5em}#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}header,.content{padding:16px}header{border-bottom:1px solid #ccc;position:relative}header h2{color:#275937;font-family:\"Asap\", sans-serif;line-height:1;margin:0}";
+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:1.5em;vertical-align:top;width:1.5em}#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:1.5em;vertical-align:top;width:1.5em}#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:1.5em;vertical-align:top;width:1.5em}#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:1.5em;vertical-align:top;width:1.5em}#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:1.5em;vertical-align:top;width:1.5em}#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:1.5em;vertical-align:top;width:1.5em}#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}";
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, privateMap) {
   if (!privateMap.has(receiver)) {

package/dist/cjs/dso-map-overlays.cjs.entry.js

@@ -10,13 +10,26 @@ let MapOverlays = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.toggleOverlay = index.createEvent(this, "toggleOverlay", 7);
+    this.selectableRefs = {};
   }
   overlayChangeHandler(overlay, e) {
     const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;
     this.toggleOverlay.emit({ overlay, checked });
   }
+  componentDidRender() {
+    this.overlays
+      .filter(o => { var _a, _b; return !o.disabled && ((_b = (_a = this.previousOverlays) === null || _a === void 0 ? void 0 : _a.find(p => p.id === o.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
+      .forEach(o => {
+      var _a;
+      (_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
+    });
+    this.previousOverlays = this.overlays;
+  }
   render() {
-    return (index.h("fieldset", { class: "form-group dso-checkboxes" }, index.h("legend", { class: "sr-only" }, "Kaartlagen"), index.h("div", { class: "dso-label-container" }, index.h("span", { class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), index.h("div", { class: "dso-field-container" }, this.overlays.map(overlay => (index.h("dso-selectable", { type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, onDsoChange: e => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info
+    for (const ref in this.selectableRefs) {
+      delete this.selectableRefs[ref];
+    }
+    return (index.h("fieldset", { class: "form-group dso-checkboxes" }, index.h("legend", { class: "sr-only" }, "Kaartlagen"), index.h("div", { class: "dso-label-container" }, index.h("span", { class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), index.h("div", { class: "dso-field-container" }, this.overlays.map(overlay => (index.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
       ? index.h("p", { slot: "info" }, overlay.info)
       : null))))));
   }

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

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header.cjs",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"overlayOpen":[4,"overlay-open"],"mainSize":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]]], options);
+  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header.cjs",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"mainSize":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]]], options);
 });

package/dist/cjs/dso-viewer-grid.cjs.entry.js

@@ -712,14 +712,26 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   return trap;
 };
 
-const viewerGridCss = "*,*::after,*::before{box-sizing:border-box}:host{display:flex;height:100vh;overflow:hidden;position:relative}:host([small]) .main{flex-basis:375px}@media screen and (max-width: 375px){:host([small]) .main{transition:none;flex-basis:100vw}}:host([medium]) .main{flex-basis:624px}@media screen and (max-width: 624px){:host([medium]) .main{transition:none;flex-basis:100vw}}:host([large]) .main{flex-basis:60%;min-width:768px;max-width:1024px}@media screen and (max-width: 768px){:host([large]) .main{transition:none;flex-basis:100vw;min-width:auto;max-width:auto}}.shrink,.expand,.overlay-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}.shrink:focus,.shrink:focus-visible,.expand:focus,.expand:focus-visible,.overlay-close-button:focus,.overlay-close-button:focus-visible{outline-offset:2px}.shrink:active,.expand:active,.overlay-close-button:active{outline:0}.shrink.extern::after,.shrink.download::after,.expand.extern::after,.expand.download::after,.overlay-close-button.extern::after,.overlay-close-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.shrink[disabled],.expand[disabled],.overlay-close-button[disabled]{color:#afcf9d}.shrink:not([disabled]):hover,.expand:not([disabled]):hover,.overlay-close-button:not([disabled]):hover{color:#676cb0;text-decoration:underline}.shrink:not([disabled]):active,.expand:not([disabled]):active,.overlay-close-button:not([disabled]):active{color:#676cb0}.shrink.btn-align,.expand.btn-align,.overlay-close-button.btn-align{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}.shrink.extern::after,.shrink.download::after,.expand.extern::after,.expand.download::after,.overlay-close-button.extern::after,.overlay-close-button.download::after{position:relative;top:-2px}.shrink.download::after,.expand.download::after,.overlay-close-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.shrink.download[disabled]::after,.expand.download[disabled]::after,.overlay-close-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.shrink.download:not([disabled]):hover::after,.shrink.download:not([disabled]):active::after,.expand.download:not([disabled]):hover::after,.expand.download:not([disabled]):active::after,.overlay-close-button.download:not([disabled]):hover::after,.overlay-close-button.download:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}.shrink.extern::after,.expand.extern::after,.overlay-close-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.shrink.extern[disabled]::after,.expand.extern[disabled]::after,.overlay-close-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.shrink.extern:not([disabled]):hover::after,.shrink.extern:not([disabled]):active::after,.expand.extern:not([disabled]):hover::after,.expand.extern:not([disabled]):active::after,.overlay-close-button.extern:not([disabled]):hover::after,.overlay-close-button.extern:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}.shrink dso-icon+span:not(.sr-only),.shrink svg.di+span:not(.sr-only),.shrink span:not(.sr-only)+dso-icon,.shrink span:not(.sr-only)+svg.di,.expand dso-icon+span:not(.sr-only),.expand svg.di+span:not(.sr-only),.expand span:not(.sr-only)+dso-icon,.expand span:not(.sr-only)+svg.di,.overlay-close-button dso-icon+span:not(.sr-only),.overlay-close-button svg.di+span:not(.sr-only),.overlay-close-button span:not(.sr-only)+dso-icon,.overlay-close-button span:not(.sr-only)+svg.di{margin-left:8px}.shrink dso-icon,.shrink svg.di,.shrink span,.expand dso-icon,.expand svg.di,.expand span,.overlay-close-button dso-icon,.overlay-close-button svg.di,.overlay-close-button span{vertical-align:middle}.shrink:hover,.expand:hover,.overlay-close-button:hover{cursor:pointer}.shrink[disabled],.expand[disabled],.overlay-close-button[disabled]{display:none}.overlay-close-button{position:absolute;top:8px;right:16px}.overlay-close-button .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sizing-buttons{display:flex;justify-content:flex-end;margin-bottom:8px}.main{background-color:#fff;box-shadow:2px 0 5px #666;flex-shrink:0;flex-grow:0;height:100%;transition:flex-basis 0.2s ease-in, max-width 0.2s ease-in, min-width 0.2s ease-in;padding:8px 16px;overflow-y:auto;z-index:1}.map{height:100%;width:100%;overflow:hidden}.overlay{background-color:#fff;box-shadow:-2px 0 5px #666;height:100%;overflow-y:auto;padding:40px 16px 8px;position:absolute;right:0;width:624px;z-index:2}";
+const ViewerGridFilterpanelButtons = ({ onApply, onCancel }) => (index.h("div", { class: "filterpanel-buttons" },
+  index.h("button", { type: "button", class: "cancel-button", onClick: onCancel },
+    index.h("span", null, "Annuleren")),
+  index.h("button", { type: "button", class: "apply-button", onClick: onApply },
+    index.h("span", null, "Toepassen"),
+    index.h("dso-icon", { icon: "chevron-right" }))));
+
+const viewerGridCss = "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}h1,.h1,h2,.h2,h3,.h3{margin-top:24px}h1{color:#275937;font-size:2rem;font-weight:700}h2{color:#275937;font-size:1.5rem;font-weight:700}h3{color:#275937;font-size:1.25rem;font-weight:600}h4,.h4,h5,.h5,h6,.h6{margin-top:12px}h4{color:#275937;font-size:1rem;font-weight:600}h5{color:#191919;font-size:1rem;font-weight:600}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin-bottom:12px}*,*::after,*::before{box-sizing:border-box}:host{display:flex;height:100vh;overflow:hidden;position:relative}:host([small]) .dso-map-panel{flex-basis:375px;min-width:0;max-width:375px}@media screen and (max-width: 375px){:host([small]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:0;transition:none}}:host([medium]) .dso-map-panel{flex-basis:624px;min-width:375px;max-width:624px}@media screen and (max-width: 624px){:host([medium]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:375px;transition:none}}:host([large]) .dso-map-panel{flex-basis:60%;min-width:768px;max-width:1024px}@media screen and (max-width: 768px){:host([large]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:768px;transition:none}}.shrink,.expand,.overlay-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}.shrink:focus,.shrink:focus-visible,.expand:focus,.expand:focus-visible,.overlay-close-button:focus,.overlay-close-button:focus-visible{outline-offset:2px}.shrink:active,.expand:active,.overlay-close-button:active{outline:0}.shrink.extern::after,.shrink.download::after,.expand.extern::after,.expand.download::after,.overlay-close-button.extern::after,.overlay-close-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.shrink[disabled],.expand[disabled],.overlay-close-button[disabled]{color:#afcf9d}.shrink:not([disabled]):hover,.expand:not([disabled]):hover,.overlay-close-button:not([disabled]):hover{color:#676cb0;text-decoration:underline}.shrink:not([disabled]):active,.expand:not([disabled]):active,.overlay-close-button:not([disabled]):active{color:#676cb0}.shrink.btn-align,.expand.btn-align,.overlay-close-button.btn-align{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}.shrink.extern::after,.shrink.download::after,.expand.extern::after,.expand.download::after,.overlay-close-button.extern::after,.overlay-close-button.download::after{position:relative;top:-2px}.shrink.download::after,.expand.download::after,.overlay-close-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.shrink.download[disabled]::after,.expand.download[disabled]::after,.overlay-close-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.shrink.download:not([disabled]):hover::after,.shrink.download:not([disabled]):active::after,.expand.download:not([disabled]):hover::after,.expand.download:not([disabled]):active::after,.overlay-close-button.download:not([disabled]):hover::after,.overlay-close-button.download:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}.shrink.extern::after,.expand.extern::after,.overlay-close-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.shrink.extern[disabled]::after,.expand.extern[disabled]::after,.overlay-close-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.shrink.extern:not([disabled]):hover::after,.shrink.extern:not([disabled]):active::after,.expand.extern:not([disabled]):hover::after,.expand.extern:not([disabled]):active::after,.overlay-close-button.extern:not([disabled]):hover::after,.overlay-close-button.extern:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}.shrink dso-icon+span:not(.sr-only),.shrink svg.di+span:not(.sr-only),.shrink span:not(.sr-only)+dso-icon,.shrink span:not(.sr-only)+svg.di,.expand dso-icon+span:not(.sr-only),.expand svg.di+span:not(.sr-only),.expand span:not(.sr-only)+dso-icon,.expand span:not(.sr-only)+svg.di,.overlay-close-button dso-icon+span:not(.sr-only),.overlay-close-button svg.di+span:not(.sr-only),.overlay-close-button span:not(.sr-only)+dso-icon,.overlay-close-button span:not(.sr-only)+svg.di{margin-left:8px}.shrink dso-icon,.shrink svg.di,.shrink span,.expand dso-icon,.expand svg.di,.expand span,.overlay-close-button dso-icon,.overlay-close-button svg.di,.overlay-close-button span{vertical-align:middle}.shrink:hover,.expand:hover,.overlay-close-button:hover{cursor:pointer}.shrink[disabled],.expand[disabled],.overlay-close-button[disabled]{display:none}.overlay-close-button{position:absolute;top:8px;right:16px}.overlay-close-button .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-map-panel{background-color:#fff;box-shadow:2px 0 8px 0 rgba(0, 0, 0, 0.4);flex-shrink:0;flex-grow:0;padding-right:8px;position:relative;transition:flex-basis 0.2s ease-in, max-width 0.2s ease-in, min-width 0.2s ease-in;z-index:1}.dso-map-panel .dso-filterblok-address{font-weight:bold;margin:8px 0}.dso-map-panel .main{height:100%;overflow-y:scroll;padding:8px 16px}.sizing-buttons{left:calc(100% + 1px);overflow-x:hidden;padding:0 4px 4px 0;position:absolute;top:16px;transition:left 0.2s ease-in;width:44px;z-index:-1}.sizing-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-bottom-right-radius:4px;border-top-right-radius:4px;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.4);flex:0 0 100%;height:40px;min-width:auto;width:40px}.sizing-buttons button:focus,.sizing-buttons button:focus-visible{outline-offset:2px}.sizing-buttons button:active{outline:0}.sizing-buttons button.extern::after,.sizing-buttons button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.sizing-buttons button:hover{background-color:#39870c;border-color:#39870c;color:#fff}.sizing-buttons button:active{background-color:#275937;border-color:#275937;color:#fff}.sizing-buttons button[disabled],.sizing-buttons button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.sizing-buttons button.btn-sm{line-height:16px}.sizing-buttons button.btn-sm dso-icon,.sizing-buttons button.btn-sm svg.di,.sizing-buttons button.btn-sm.extern::after,.sizing-buttons button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.sizing-buttons button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.sizing-buttons button.download:hover::after{--dso-icon:var(--di-download-wit)}.sizing-buttons button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.sizing-buttons button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.sizing-buttons button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.sizing-buttons button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.sizing-buttons button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sizing-buttons button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}.sizing-buttons button:hover dso-icon{color:#fff}.map{height:100%;width:100%;overflow:hidden}#filterpanel,.overlay{background-color:#fff;height:100%;overflow-y:auto;position:absolute;z-index:2}#filterpanel{box-shadow:2px 0 5px #666;padding:40px 16px 8px;left:0;max-width:896px;width:calc(100vw - 40px)}@media screen and (max-width: 768px){#filterpanel{width:100vw}#filterpanel::before{display:none !important}}#filterpanel::before{content:\"\";display:block;position:fixed;top:0;bottom:0;right:0;left:896px;background-color:rgba(0, 0, 0, 0.5)}@media screen and (max-width: 936px){#filterpanel::before{left:auto;width:40px}}.overlay{box-shadow:-2px 0 5px #666;padding:40px 16px 8px;right:0;width:624px}@media screen and (max-width: 624px){.overlay{width:100vw}}.overlay::before{content:\"\";display:block;position:fixed;top:0;bottom:0;left:0;right:624px;background-color:rgba(0, 0, 0, 0.5)}.filterpanel-buttons{text-align:right}.filterpanel-buttons .cancel-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;line-height:16px}.filterpanel-buttons .cancel-button:focus,.filterpanel-buttons .cancel-button:focus-visible{outline-offset:2px}.filterpanel-buttons .cancel-button:active{outline:0}.filterpanel-buttons .cancel-button.extern::after,.filterpanel-buttons .cancel-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.filterpanel-buttons .cancel-button:hover{background-color:#39870c;border-color:#39870c;color:#fff}.filterpanel-buttons .cancel-button:active{background-color:#275937;border-color:#275937;color:#fff}.filterpanel-buttons .cancel-button[disabled],.filterpanel-buttons .cancel-button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.filterpanel-buttons .cancel-button.btn-sm{line-height:16px}.filterpanel-buttons .cancel-button.btn-sm dso-icon,.filterpanel-buttons .cancel-button.btn-sm svg.di,.filterpanel-buttons .cancel-button.btn-sm.extern::after,.filterpanel-buttons .cancel-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .cancel-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.filterpanel-buttons .cancel-button.download:hover::after{--dso-icon:var(--di-download-wit)}.filterpanel-buttons .cancel-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.filterpanel-buttons .cancel-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.filterpanel-buttons .cancel-button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.filterpanel-buttons .cancel-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.filterpanel-buttons .cancel-button dso-icon,.filterpanel-buttons .cancel-button svg.di{margin-left:-8px;margin-right:8px}.filterpanel-buttons .cancel-button span+dso-icon,.filterpanel-buttons .cancel-button span+svg.di{margin-left:8px;margin-right:-8px}.filterpanel-buttons .cancel-button dso-icon,.filterpanel-buttons .cancel-button svg.di,.filterpanel-buttons .cancel-button.extern::after,.filterpanel-buttons .cancel-button.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .apply-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:#39870c;border-color:#39870c;color:#fff;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;line-height:16px}.filterpanel-buttons .apply-button:focus,.filterpanel-buttons .apply-button:focus-visible{outline-offset:2px}.filterpanel-buttons .apply-button:active{outline:0}.filterpanel-buttons .apply-button.extern::after,.filterpanel-buttons .apply-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.filterpanel-buttons .apply-button:hover{background-color:#275937;border-color:#275937;color:#fff}.filterpanel-buttons .apply-button:active{background-color:#15301e;border-color:#15301e;color:#fff}.filterpanel-buttons .apply-button[disabled],.filterpanel-buttons .apply-button[disabled]:hover{background-color:#afcf9d;border-color:#afcf9d;color:#fff}.filterpanel-buttons .apply-button.btn-sm{line-height:16px}.filterpanel-buttons .apply-button.btn-sm dso-icon,.filterpanel-buttons .apply-button.btn-sm svg.di,.filterpanel-buttons .apply-button.btn-sm.extern::after,.filterpanel-buttons .apply-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .apply-button.download::after{background:var(--dso-icon, var(--di-download-wit)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.filterpanel-buttons .apply-button.extern::after{background:var(--dso-icon, var(--di-external-link-wit)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.filterpanel-buttons .apply-button dso-icon,.filterpanel-buttons .apply-button svg.di{margin-left:-8px;margin-right:8px}.filterpanel-buttons .apply-button span+dso-icon,.filterpanel-buttons .apply-button span+svg.di{margin-left:8px;margin-right:-8px}.filterpanel-buttons .apply-button dso-icon,.filterpanel-buttons .apply-button svg.di,.filterpanel-buttons .apply-button.extern::after,.filterpanel-buttons .apply-button.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .cancel-button+.apply-button{margin-left:16px}";
 
 let ViewerGrid = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.closeOverlay = index.createEvent(this, "closeOverlay", 7);
+    this.filterpanelCancel = index.createEvent(this, "filterpanelCancel", 7);
+    this.filterpanelApply = index.createEvent(this, "filterpanelApply", 7);
+    this.filterpanelOpen = false;
     this.overlayOpen = false;
     this.mainSize = "large";
+    this.filterpanelSlot = null;
+    this.overlaySlot = null;
     this.shrinkMain = () => {
       this.mainSize = this.mainSize == "large" ? "medium" : "small";
     };
@@ -734,42 +746,67 @@ let ViewerGrid = class {
     };
   }
   updateFocusTrap() {
-    if (!this.trap) {
+    var _a, _b;
+    if (this.filterpanelOpen && this.overlayOpen) {
       return;
     }
-    if (this.overlayOpen) {
-      this.trap.activate();
-      this.host.addEventListener("keydown", this.keyDownListener);
+    if (this.filterpanelFocustrap) {
+      if (this.filterpanelOpen && !((_a = this.filterpanel) === null || _a === void 0 ? void 0 : _a.hidden)) {
+        this.filterpanelFocustrap.activate();
+        this.host.addEventListener("keydown", this.keyDownListener);
+      }
+      else {
+        this.filterpanelFocustrap.deactivate();
+        this.host.removeEventListener("keydown", this.keyDownListener);
+      }
     }
-    else {
-      this.trap.deactivate();
-      this.host.removeEventListener("keydown", this.keyDownListener);
+    if (this.overlayFocustrap) {
+      if (this.overlayOpen && !((_b = this.overlay) === null || _b === void 0 ? void 0 : _b.hidden)) {
+        this.overlayFocustrap.activate();
+        this.host.addEventListener("keydown", this.keyDownListener);
+      }
+      else {
+        this.overlayFocustrap.deactivate();
+        this.host.removeEventListener("keydown", this.keyDownListener);
+      }
     }
   }
   connectedCallback() {
-    this.overlaySlot = this.host.querySelector("div[slot = 'overlay']");
+    this.filterpanelSlot = this.host.querySelector("div[slot='filterpanel']");
+    this.overlaySlot = this.host.querySelector("div[slot='overlay']");
   }
   componentDidLoad() {
-    if (!this.overlay || !this.overlaySlot) {
-      return;
+    if (this.filterpanel && this.filterpanelSlot) {
+      this.filterpanelFocustrap = createFocusTrap([this.filterpanel, this.filterpanelSlot], {
+        escapeDeactivates: false,
+        allowOutsideClick: true,
+      });
+    }
+    if (this.overlay && this.overlaySlot) {
+      this.overlayFocustrap = createFocusTrap([this.overlay, this.overlaySlot], {
+        escapeDeactivates: false,
+        allowOutsideClick: true,
+      });
     }
-    this.trap = createFocusTrap([this.overlay, this.overlaySlot], {
-      escapeDeactivates: false,
-      allowOutsideClick: true,
-    });
     this.updateFocusTrap();
   }
   componentDidUpdate() {
     this.updateFocusTrap();
   }
   disconnectedCallback() {
-    if (this.trap) {
-      this.trap.deactivate();
-    }
+    var _a, _b;
+    (_a = this.overlayFocustrap) === null || _a === void 0 ? void 0 : _a.deactivate();
+    (_b = this.filterpanelFocustrap) === null || _b === void 0 ? void 0 : _b.deactivate();
     this.host.removeEventListener("keydown", this.keyDownListener);
   }
+  handleFilterpanelApply(mouseEvent) {
+    this.filterpanelApply.emit({ originalEvent: mouseEvent });
+  }
+  handleFilterpanelCancel(mouseEvent) {
+    this.filterpanelCancel.emit({ originalEvent: mouseEvent });
+  }
   render() {
-    return (index.h(index.Host, Object.assign({}, { [this.mainSize]: true }), index.h("div", { class: "main" }, index.h("div", { class: "sizing-buttons" }, index.h("button", { type: "button", class: "shrink", disabled: this.mainSize == "small", onClick: this.shrinkMain }, index.h("dso-icon", { icon: "chevron-left" })), index.h("button", { type: "button", class: "expand", disabled: this.mainSize == "large", onClick: this.expandMain }, index.h("dso-icon", { icon: "chevron-right" }))), index.h("slot", { name: "main" })), index.h("div", { class: "map" }, index.h("slot", { name: "map" })), index.h("div", { class: "overlay", hidden: !this.overlayOpen || !this.overlaySlot, ref: (element) => (this.overlay = element) }, index.h("button", { type: "button", class: "overlay-close-button", onClick: (e) => this.closeOverlay.emit(e) }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "sluiten")), index.h("slot", { name: "overlay" }))));
+    return (index.h(index.Host, Object.assign({}, { [this.mainSize]: true }), index.h("div", { class: "dso-map-panel" }, index.h("div", { class: "sizing-buttons" }, index.h("button", { type: "button", class: "shrink", disabled: this.mainSize == "small", onClick: this.shrinkMain }, index.h("dso-icon", { icon: "chevron-left" })), index.h("button", { type: "button", class: "expand", disabled: this.mainSize == "large", onClick: this.expandMain }, index.h("dso-icon", { icon: "chevron-right" }))), index.h("div", { class: "main" }, index.h("slot", { name: "main" }))), index.h("div", { id: "filterpanel", hidden: !this.filterpanelOpen || !this.filterpanelSlot, ref: (element) => this.filterpanel = element }, index.h("h2", null, "Uw keuzes"), index.h(ViewerGridFilterpanelButtons, { onApply: e => this.handleFilterpanelApply(e), onCancel: e => this.handleFilterpanelCancel(e) }), index.h("slot", { name: "filterpanel" }), index.h(ViewerGridFilterpanelButtons, { onApply: e => this.handleFilterpanelApply(e), onCancel: e => this.handleFilterpanelCancel(e) })), index.h("div", { class: "map" }, index.h("slot", { name: "map" })), index.h("div", { class: "overlay", hidden: !this.overlayOpen || !this.overlaySlot, ref: (element) => (this.overlay = element) }, index.h("button", { type: "button", class: "overlay-close-button", onClick: (e) => this.closeOverlay.emit(e) }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "sluiten")), index.h("slot", { name: "overlay" }))));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header.cjs",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"overlayOpen":[4,"overlay-open"],"mainSize":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]]], options);
+  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header.cjs",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"mainSize":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -5,6 +5,7 @@
     "./components/header/header.js",
     "./components/info-button/info-button.js",
     "./components/selectable/selectable.js",
+    "./components/viewer-grid/viewer-grid.js",
     "./components/alert/alert.js",
     "./components/attachments-counter/attachments-counter.js",
     "./components/badge/badge.js",
@@ -23,8 +24,7 @@
     "./components/progress-indicator/progress-indicator.js",
     "./components/toggletip/toggletip.js",
     "./components/tooltip/tooltip.js",
-    "./components/tree-view/tree-view.js",
-    "./components/viewer-grid/viewer-grid.js"
+    "./components/tree-view/tree-view.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/date-picker/date-picker.css

@@ -104,6 +104,7 @@
 }
 
 .dso-date__dialog {
+  border-width: 1px;
   display: flex;
   right: 0;
   min-width: 320px;
@@ -130,8 +131,8 @@
   }
 }
 .dso-date__dialog.is-left {
-  left: auto;
-  right: 0;
+  left: -11px;
+  right: auto;
   width: auto;
 }
 .dso-date__dialog.is-active {