@dso-toolkit/core 33.2.0 → 33.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/dist/cjs/dso-autosuggest.cjs.entry.js +2 -70
  2. package/dist/cjs/dso-date-picker.cjs.entry.js +2 -3
  3. package/dist/cjs/dso-dropdown-menu.cjs.entry.js +15 -4
  4. package/dist/cjs/dso-header.cjs.entry.js +101 -0
  5. package/dist/cjs/dso-info-button.cjs.entry.js +1 -1
  6. package/dist/cjs/dso-map-base-layers.cjs.entry.js +3 -4
  7. package/dist/cjs/dso-map-controls.cjs.entry.js +2 -2
  8. package/dist/cjs/dso-map-overlays.cjs.entry.js +5 -8
  9. package/dist/cjs/dso-toolkit.cjs.js +1 -1
  10. package/dist/cjs/dso-tooltip.cjs.entry.js +168 -75
  11. package/dist/cjs/index-794ad37a.js +72 -0
  12. package/dist/cjs/loader.cjs.js +1 -1
  13. package/dist/collection/collection-manifest.json +1 -0
  14. package/dist/collection/components/date-picker/date-picker.js +2 -3
  15. package/dist/collection/components/dropdown-menu/dropdown-menu.js +15 -4
  16. package/dist/collection/components/header/header.css +439 -0
  17. package/dist/collection/components/header/header.js +294 -0
  18. package/dist/collection/components/header/header.template.js +32 -0
  19. package/dist/collection/components/info-button/info-button.css +1 -0
  20. package/dist/collection/components/map-base-layers/map-base-layers.js +6 -27
  21. package/dist/collection/components/map-controls/map-controls.css +18 -8
  22. package/dist/collection/components/map-controls/map-controls.js +10 -11
  23. package/dist/collection/components/map-controls/map-controls.template.js +5 -8
  24. package/dist/collection/components/map-overlays/map-overlays.js +9 -35
  25. package/dist/collection/components/tooltip/tooltip.css +34 -12
  26. package/dist/collection/components/tooltip/tooltip.js +19 -4
  27. package/dist/collection/components/tooltip/tooltip.template.js +3 -5
  28. package/dist/custom-elements/index.d.ts +6 -0
  29. package/dist/custom-elements/index.js +296 -102
  30. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  31. package/dist/dso-toolkit/p-1805f5b0.js +1 -0
  32. package/dist/dso-toolkit/p-22bc904d.entry.js +1 -0
  33. package/dist/dso-toolkit/{p-5665f1ee.entry.js → p-4a78a31b.entry.js} +1 -1
  34. package/dist/dso-toolkit/p-72e4484a.entry.js +1 -0
  35. package/dist/dso-toolkit/p-7a043467.entry.js +1 -0
  36. package/dist/dso-toolkit/p-99b93d2e.entry.js +5 -0
  37. package/dist/dso-toolkit/p-b3e6d377.entry.js +1 -0
  38. package/dist/dso-toolkit/p-da3be034.entry.js +1 -0
  39. package/dist/dso-toolkit/p-ec8b74f7.entry.js +1 -0
  40. package/dist/dso-toolkit/p-ff767c21.entry.js +1 -0
  41. package/dist/esm/dso-autosuggest.entry.js +1 -69
  42. package/dist/esm/dso-date-picker.entry.js +2 -3
  43. package/dist/esm/dso-dropdown-menu.entry.js +15 -4
  44. package/dist/esm/dso-header.entry.js +97 -0
  45. package/dist/esm/dso-info-button.entry.js +1 -1
  46. package/dist/esm/dso-map-base-layers.entry.js +3 -4
  47. package/dist/esm/dso-map-controls.entry.js +2 -2
  48. package/dist/esm/dso-map-overlays.entry.js +5 -8
  49. package/dist/esm/dso-toolkit.js +1 -1
  50. package/dist/esm/dso-tooltip.entry.js +168 -75
  51. package/dist/esm/index-f2bf58ce.js +70 -0
  52. package/dist/esm/loader.js +1 -1
  53. package/dist/types/components/dropdown-menu/dropdown-menu.d.ts +1 -1
  54. package/dist/types/components/header/header.d.ts +36 -0
  55. package/dist/types/components/header/header.template.d.ts +2 -0
  56. package/dist/types/components/map-base-layers/map-base-layers.d.ts +3 -4
  57. package/dist/types/components/map-base-layers/map-base-layers.interfaces.d.ts +5 -1
  58. package/dist/types/components/map-controls/map-controls.template.d.ts +1 -1
  59. package/dist/types/components/map-overlays/map-overlays.d.ts +4 -4
  60. package/dist/types/components/map-overlays/map-overlays.interfaces.d.ts +6 -1
  61. package/dist/types/components/tooltip/tooltip.d.ts +1 -0
  62. package/dist/types/components.d.ts +34 -8
  63. package/package.json +3 -2
  64. package/dist/dso-toolkit/p-08427682.entry.js +0 -1
  65. package/dist/dso-toolkit/p-731a9631.entry.js +0 -1
  66. package/dist/dso-toolkit/p-741e96de.entry.js +0 -5
  67. package/dist/dso-toolkit/p-759920d0.entry.js +0 -1
  68. package/dist/dso-toolkit/p-e4269e02.entry.js +0 -1
  69. package/dist/dso-toolkit/p-e7700d9e.entry.js +0 -1
  70. package/dist/dso-toolkit/p-fd5e24c9.entry.js +0 -1
@@ -745,7 +745,7 @@ const localization = {
745
745
  ]
746
746
  };
747
747
 
748
- const datePickerCss = ":host{display:block}.dso-date *,.dso-date *::before,.dso-date *::after{box-sizing:border-box}.dso-date{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{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::-moz-placeholder{color:#666;opacity:1}.dso-date__input:-ms-input-placeholder{color:#666}.dso-date__input::-webkit-input-placeholder{color:#666}.dso-date__input::-ms-expand{background-color:transparent;border:0}.dso-date__input:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled],.dso-date__input[readonly],fieldset[disabled] .dso-date__input{background-color:#fff;opacity:1}.dso-date__input[disabled],fieldset[disabled] .dso-date__input{cursor:default}.dso-date__input[disabled]{border-color:#e5e5e5;color:#999}.dso-date__input[readonly]{border-width:1px}.dso-date__input[type=text]{line-height:40px}.dso-date__input[size]{width:auto}.dso-date__toggle{-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:disabled{color:#afcf9d;cursor:pointer}.dso-date__dialog{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{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{left:auto;right:0;width:auto}.dso-date__dialog.is-active{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.dso-date__dialog-content{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{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 .dso-date__dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}}.dso-date__table{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{font-size:0.875em;font-weight:600;height:36px;line-height:36px;text-decoration:none;text-transform:uppercase}.dso-date__cell{height:40px;padding:1px;text-align:center;width:40px}.dso-date__day{-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{background:transparent;height:36px;box-shadow:0 0 0 1px #39870c;width:36px}.dso-date__day:hover,.dso-date__day:active{background:#39870c;color:#fff}.dso-date__day:focus{background:transparent;box-shadow:0 0 0 2px #275937;color:#191919;height:34px;outline:0;width:34px}[aria-selected=true] .dso-date__day{background:#39870c;color:#fff}[aria-selected=true] .dso-date__day:focus{background:transparent}[aria-selected=true] .dso-date__day:focus span[aria-hidden=true]{background:#39870c;border:1px solid #fff;line-height:32px}.dso-date__day.is-outside{background:#f2f2f2;box-shadow:none;color:#666;cursor:default;pointer-events:none}.dso-date__day.is-disabled{background:#fff;cursor:default}.dso-date__day.is-disabled:hover{color:#666}.dso-date__day span[aria-hidden=true]{border-radius:50%;display:inline-block;height:34px;line-height:34px;width:34px}.dso-date__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px;width:100%}.dso-date__header span{font-size:0.875rem}.dso-date__nav{white-space:nowrap}.dso-date__prev,.dso-date__next{-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,.dso-date__next{height:40px;width:40px}}.dso-date__prev:hover,.dso-date__prev:active,.dso-date__next:hover,.dso-date__next:active{background-color:#39870c;color:#fff}.dso-date__prev:focus,.dso-date__next:focus{background:transparent;color:#39870c}.dso-date__prev:disabled,.dso-date__prev:disabled:hover,.dso-date__next:disabled,.dso-date__next:disabled:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d;opacity:1}.dso-date__prev svg,.dso-date__next svg{margin:0 auto}.dso-date__select{display:inline-flex;height:28px;line-height:28px;position:relative}.dso-date__select span{margin-right:4px}.dso-date__select select{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 select:focus+.dso-date__select-label{box-shadow:0 0 0 2px #275937}.dso-date__select select:disabled{color:#afcf9d}.dso-date__select-label{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 span{font-size:1.25rem;font-weight:600;line-height:1.25}.dso-date__select-label svg{width:16px;height:16px}.dso-date__mobile{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{border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-16px;top:-16px;width:auto}}.dso-date__mobile-heading{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{display:none}}.dso-date__close{-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{margin-right:0;opacity:0}}.dso-date__close:focus{box-shadow:0 0 0 2px #275937;outline:none}@media (min-width: 36em){.dso-date__close:focus{opacity:1}}.dso-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}";
748
+ 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}";
749
749
 
750
750
  function range(from, to) {
751
751
  var result = [];
@@ -773,7 +773,6 @@ let DsoDatePicker$1 = class extends HTMLElement {
773
773
  constructor() {
774
774
  super();
775
775
  this.__registerHost();
776
- attachShadow(this);
777
776
  this.dateChange = createEvent(this, "dateChange", 7);
778
777
  this.dsoBlur = createEvent(this, "dsoBlur", 7);
779
778
  this.dsoKeyUp = createEvent(this, "dsoKeyUp", 7);
@@ -994,13 +993,12 @@ let DsoDatePicker$1 = class extends HTMLElement {
994
993
  * Component event handling.
995
994
  */
996
995
  handleDocumentClick(e) {
997
- var _a;
998
996
  if (!this.open) {
999
997
  return;
1000
998
  }
1001
999
  const path = e.composedPath();
1002
1000
  for (const target of path) {
1003
- if (target instanceof Node && ((_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(target))) {
1001
+ if (target instanceof Node && this.element.contains(target)) {
1004
1002
  return;
1005
1003
  }
1006
1004
  }
@@ -1461,9 +1459,6 @@ let DropdownMenu = class extends HTMLElement {
1461
1459
  this.openPopup();
1462
1460
  }
1463
1461
  }
1464
- componentDidRender() {
1465
- this.host.setAttribute("tabindex", "-1");
1466
- }
1467
1462
  componentWillRender() {
1468
1463
  for (const li of Array.from(this.host.getElementsByTagName("li"))) {
1469
1464
  for (const tab of tabbable(li)) {
@@ -1478,6 +1473,7 @@ let DropdownMenu = class extends HTMLElement {
1478
1473
  }
1479
1474
  }
1480
1475
  openPopup() {
1476
+ this.host.setAttribute("tabindex", "-1");
1481
1477
  this.host.addEventListener("keydown", this.keyDownListener);
1482
1478
  this.host.addEventListener("focusout", this.focusOutListener);
1483
1479
  this.button.setAttribute("aria-expanded", "true");
@@ -1487,11 +1483,24 @@ let DropdownMenu = class extends HTMLElement {
1487
1483
  this.host.removeEventListener("keydown", this.keyDownListener);
1488
1484
  this.host.removeEventListener("focusout", this.focusOutListener);
1489
1485
  this.button.setAttribute("aria-expanded", "false");
1486
+ this.host.removeAttribute("tabindex");
1490
1487
  this.tabbables.forEach((tabbable) => tabbable.removeEventListener("click", this.escape));
1491
1488
  }
1489
+ getActiveElement(root = document) {
1490
+ const activeEl = root.activeElement;
1491
+ if (!activeEl) {
1492
+ return null;
1493
+ }
1494
+ if (activeEl.shadowRoot) {
1495
+ return this.getActiveElement(activeEl.shadowRoot);
1496
+ }
1497
+ else {
1498
+ return activeEl;
1499
+ }
1500
+ }
1492
1501
  tabInPopup(direction) {
1493
1502
  const tabs = this.tabbables;
1494
- const currentIndex = tabs.findIndex((e) => e === document.activeElement);
1503
+ const currentIndex = tabs.findIndex((e) => e === this.getActiveElement());
1495
1504
  let nextIndex = currentIndex + direction;
1496
1505
  if (nextIndex >= tabs.length) {
1497
1506
  nextIndex = 0;
@@ -1511,6 +1520,100 @@ let DropdownMenu = class extends HTMLElement {
1511
1520
  static get style() { return dropdownMenuCss; }
1512
1521
  };
1513
1522
 
1523
+ 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}";
1524
+
1525
+ const minDesktopViewportWidth = 992;
1526
+ let Header = class extends HTMLElement {
1527
+ constructor() {
1528
+ super();
1529
+ this.__registerHost();
1530
+ attachShadow(this);
1531
+ this.useDropDownMenu = "auto";
1532
+ this.showDropDown = false;
1533
+ this.isLoggedIn = false;
1534
+ this.hasSubLogo = false;
1535
+ this.overflowMenuItems = 0;
1536
+ this.onWindowResize = debounce_1(() => {
1537
+ this.setDropDownMenu();
1538
+ this.setOverflowMenu();
1539
+ }, 100);
1540
+ }
1541
+ watchUseDropDownMenu(value) {
1542
+ if (value === "auto") {
1543
+ this.setDropDownMenu();
1544
+ return;
1545
+ }
1546
+ this.showDropDown = value === "always";
1547
+ }
1548
+ componentWillLoad() {
1549
+ this.hasSubLogo = this.host.querySelector("*[slot = 'sub-logo']") !== null;
1550
+ }
1551
+ shrinkMenuToFit() {
1552
+ if (!this.wrapper || !this.nav) {
1553
+ return;
1554
+ }
1555
+ if (this.wrapper.clientWidth >= this.nav.clientWidth) {
1556
+ return;
1557
+ }
1558
+ if (this.overflowMenuItems >= this.mainMenu.length) {
1559
+ return;
1560
+ }
1561
+ this.overflowMenuItems++;
1562
+ }
1563
+ componentDidRender() {
1564
+ if (this.showDropDown) {
1565
+ return;
1566
+ }
1567
+ window.setTimeout(() => this.shrinkMenuToFit(), 0);
1568
+ }
1569
+ setOverflowMenu() {
1570
+ if (this.showDropDown) {
1571
+ return;
1572
+ }
1573
+ if (this.overflowMenuItems != 0) {
1574
+ this.overflowMenuItems = 0;
1575
+ return;
1576
+ }
1577
+ this.shrinkMenuToFit();
1578
+ }
1579
+ setDropDownMenu() {
1580
+ if (this.useDropDownMenu !== "auto") {
1581
+ return;
1582
+ }
1583
+ this.showDropDown = window.innerWidth < minDesktopViewportWidth;
1584
+ }
1585
+ connectedCallback() {
1586
+ window.addEventListener("resize", this.onWindowResize);
1587
+ }
1588
+ disconnectedCallback() {
1589
+ window.removeEventListener("resize", this.onWindowResize);
1590
+ }
1591
+ MenuItem(item) {
1592
+ return (h("li", { class: item.active ? "dso-active" : undefined }, h("a", { href: item.url, "aria-current": item.active ? "page" : undefined }, item.label)));
1593
+ }
1594
+ render() {
1595
+ return (h(Fragment, null, h("div", { class: clsx("dso-header", {
1596
+ ["use-drop-down"]: this.showDropDown,
1597
+ ["has-sub-logo"]: this.hasSubLogo,
1598
+ }), ref: (element) => (this.wrapper = element) }, h("div", { class: "logo-container" }, h("div", { class: "logo" }, h("slot", { name: "logo" })), h("div", { class: "sub-logo" }, h("slot", { name: "sub-logo" }))), this.showDropDown && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right" }, h("button", { type: "button", class: "tertiary", slot: "toggle" }, h("span", null, "Menu")), h("div", { class: "dso-dropdown-options" }, h("dso-dropdown-options", null, h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl }, "Mijn Omgevingsloket"))), this.loginUrl && !this.isLoggedIn && (h("li", null, h("a", { href: this.loginUrl }, "Inloggen"))), this.userProfileUrl &&
1599
+ this.userProfileName &&
1600
+ this.isLoggedIn && (h("li", null, h("a", { href: this.userProfileUrl }, this.userProfileName, h("span", { class: "profile-label" }, "- Mijn profiel")))), this.logoutUrl && this.isLoggedIn && (h("li", null, h("a", { href: this.logoutUrl }, "Uitloggen"))))))))), !this.showDropDown && (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl &&
1601
+ this.userProfileName &&
1602
+ this.isLoggedIn && (h("div", { class: "profile" }, h("span", { class: "profile-label" }, "Welkom:"), h("a", { href: this.userProfileUrl }, this.userProfileName))), this.loginUrl && !this.isLoggedIn && (h("div", { class: "login" }, h("a", { href: this.loginUrl }, "Inloggen"))), this.logoutUrl && this.isLoggedIn && (h("div", { class: "logout" }, h("a", { href: this.logoutUrl }, "Uitloggen")))), h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu
1603
+ .filter((_, index) => index < this.mainMenu.length - this.overflowMenuItems)
1604
+ .map(this.MenuItem), this.overflowMenuItems > 0 && (h("li", null, h("dso-dropdown-menu", { "dropdown-align": "left" }, h("button", { type: "button", class: "tertiary", slot: "toggle" }, h("span", null, "Meer")), h("div", { class: "dso-dropdown-options" }, h("dso-dropdown-options", null, h("ul", null, this.mainMenu
1605
+ .filter((_, index) => index >=
1606
+ this.mainMenu.length -
1607
+ this.overflowMenuItems)
1608
+ .map(this.MenuItem))))))), this.userHomeUrl && (h("li", { class: "menu-user-home" }, h("a", { href: this.userHomeUrl }, h("dso-icon", { icon: "user-line" }), "Mijn Omgevingsloket"))))))))));
1609
+ }
1610
+ get host() { return this; }
1611
+ static get watchers() { return {
1612
+ "useDropDownMenu": ["watchUseDropDownMenu"]
1613
+ }; }
1614
+ static get style() { return headerCss; }
1615
+ };
1616
+
1514
1617
  const helpcenterPanelCss = ":host{display:block;--di-times:url(\"data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%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\");--di-times-wit:url(\"data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%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\")}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.wrapper{height:100%;left:0;position:fixed;top:0;visibility:hidden;width:100%}.wrapper.visible{visibility:visible}.dimscreen{background-color:#000;height:100%;opacity:0.4;width:100%}.open-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;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;border:0;bottom:16px;font-family:Asap, sans-serif;position:fixed;right:16px}.open-button:focus,.open-button:focus-visible{outline-offset:2px}.open-button:active{outline:0}.open-button.extern::after,.open-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.open-button:focus,.open-button:focus-visible{outline-offset:2px}.open-button:active{outline:0}.open-button.extern::after,.open-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.open-button:hover{background-color:#275937;border-color:#275937;color:#fff}.open-button:active{background-color:#15301e;border-color:#15301e;color:#fff}.open-button[disabled],.open-button[disabled]:hover{background-color:#afcf9d;border-color:#afcf9d;color:#fff}.open-button.btn-sm{line-height:16px}.open-button.btn-sm dso-icon,.open-button.btn-sm svg.di,.open-button.btn-sm.extern::after,.open-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.open-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}.open-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}.open-button dso-icon,.open-button svg.di{margin-left:-8px;margin-right:8px}.open-button span+dso-icon,.open-button span+svg.di{margin-left:8px;margin-right:-8px}.open-button:hover{cursor:pointer}.open-button.open{display:none}.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;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-right:0;border-top:0;border-radius:0 0 0 8px;height:40px;min-width:40px;padding:0;position:fixed;right:0;width:40px;top:0}.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:hover{background-color:#39870c;border-color:#39870c;color:#fff}.close-button:active{background-color:#275937;border-color:#275937;color:#fff}.close-button[disabled],.close-button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.close-button.btn-sm{line-height:16px}.close-button.btn-sm dso-icon,.close-button.btn-sm svg.di,.close-button.btn-sm.extern::after,.close-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.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:hover::after{--dso-icon:var(--di-download-wit)}.close-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.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:hover::after{--dso-icon:var(--di-external-link-wit)}.close-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.close-button dso-icon,.close-button svg.di{margin-left:-8px;margin-right:8px}.close-button span+dso-icon,.close-button span+svg.di{margin-left:8px;margin-right:-8px}.close-button::before{background:var(--dso-icon, var(--di-times)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em;content:\"\";display:inline-block;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.close-button:hover,.close-button:active,.close-button:focus{cursor:pointer}.close-button:hover::before,.close-button:active::before,.close-button:focus::before{background:var(--dso-icon, var(--di-times-wit)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.close-button.close{display:none}.iframe-container{background-color:#fff;border:0;border-left:1px solid #ccc;box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.4);height:100%;position:absolute;right:-640px;top:0;transition:right 0.5s;width:640px}.iframe-container.open{right:0}iframe{border:0;height:100%;width:100%}";
1515
1618
 
1516
1619
  const maxCssTransitionMilliseconds = 500;
@@ -2184,7 +2287,7 @@ let Info = class extends HTMLElement {
2184
2287
  static get style() { return infoCss; }
2185
2288
  };
2186
2289
 
2187
- const infoButtonCss = ":host{display:inline-block;--di-info:url(\"data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e\");--di-info-active:url(\"data:image/svg+xml,%3csvg id='info-active' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M23%2c12A11%2c11%2c0%2c1%2c1%2c12%2c1%2c11%2c11%2c0%2c0%2c1%2c23%2c12ZM12%2c9a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e\");--di-info-secondary:url(\"data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e\");--di-info-active-secondary:url(\"data:image/svg+xml,%3csvg id='info-active' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M23%2c12A11%2c11%2c0%2c1%2c1%2c12%2c1%2c11%2c11%2c0%2c0%2c1%2c23%2c12ZM12%2c9a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e\")}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{background:var(--dso-icon, var(--di-info)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;border:1px solid transparent;margin-left:8px;padding:0}button.dso-open,button:hover,button:active{--dso-icon:var(--di-info-active)}button.dso-info-secondary{--dso-icon:var(--di-info-secondary)}button.dso-info-secondary.dso-open,button.dso-info-secondary:hover,button.dso-info-secondary:active{--dso-icon:var(--di-info-active-secondary)}";
2290
+ const infoButtonCss = ":host{display:inline-block;--di-info:url(\"data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e\");--di-info-active:url(\"data:image/svg+xml,%3csvg id='info-active' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M23%2c12A11%2c11%2c0%2c1%2c1%2c12%2c1%2c11%2c11%2c0%2c0%2c1%2c23%2c12ZM12%2c9a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e\");--di-info-secondary:url(\"data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e\");--di-info-active-secondary:url(\"data:image/svg+xml,%3csvg id='info-active' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M23%2c12A11%2c11%2c0%2c1%2c1%2c12%2c1%2c11%2c11%2c0%2c0%2c1%2c23%2c12ZM12%2c9a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e\")}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{background:var(--dso-icon, var(--di-info)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;border:1px solid transparent;margin-left:8px;padding:0;cursor:pointer}button.dso-open,button:hover,button:active{--dso-icon:var(--di-info-active)}button.dso-info-secondary{--dso-icon:var(--di-info-secondary)}button.dso-info-secondary.dso-open,button.dso-info-secondary:hover,button.dso-info-secondary:active{--dso-icon:var(--di-info-active-secondary)}";
2188
2291
 
2189
2292
  let InfoButton = class extends HTMLElement {
2190
2293
  constructor() {
@@ -2235,17 +2338,16 @@ let MapBaseLayers = class extends HTMLElement {
2235
2338
  attachShadow(this);
2236
2339
  this.baseLayerChange = createEvent(this, "baseLayerChange", 7);
2237
2340
  }
2238
- selectBaseLayer(baseLayer) {
2239
- this.selectedBaseLayer = baseLayer;
2240
- this.baseLayerChange.emit(baseLayer);
2341
+ baseLayerChangeHandler(baseLayer) {
2342
+ this.baseLayerChange.emit({ activeBaseLayer: baseLayer });
2241
2343
  }
2242
2344
  render() {
2243
- return (h("fieldset", { class: "form-group dso-radios" }, h("legend", { class: "sr-only" }, "Achtergrond"), h("div", { class: "dso-label-container" }, h("span", { class: "control-label", "aria-hidden": "true" }, "Achtergrond")), h("div", { class: "dso-field-container" }, this.baseLayers.map((baseLayer, i) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: !this.selectedBaseLayer && i === 0 || this.selectedBaseLayer === baseLayer, onDsoChange: () => this.selectBaseLayer(baseLayer) }, baseLayer.name))))));
2345
+ return (h("fieldset", { class: "form-group dso-radios" }, h("legend", { class: "sr-only" }, "Achtergrond"), h("div", { class: "dso-label-container" }, h("span", { class: "control-label", "aria-hidden": "true" }, "Achtergrond")), h("div", { class: "dso-field-container" }, this.baseLayers.map(baseLayer => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name))))));
2244
2346
  }
2245
2347
  static get style() { return mapBaseLayersCss; }
2246
2348
  };
2247
2349
 
2248
- 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}#controls{align-items:start;display:flex;position:absolute;right:calc(100% + 16px);top:16px}#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}#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}#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}#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+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}";
2350
+ 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}";
2249
2351
 
2250
2352
  var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, privateMap) {
2251
2353
  if (!privateMap.has(receiver)) {
@@ -2287,7 +2389,7 @@ let MapControls = class extends HTMLElement {
2287
2389
  }
2288
2390
  }
2289
2391
  render() {
2290
- return (h(Host, null, h("div", { id: "controls" }, h("button", { type: "button", id: "toggle-visibility-button", onClick: () => this.open = !this.open, ref: element => __classPrivateFieldSet(this, _toggleButtonElement, element) }, h("dso-icon", { icon: "layers" }), h("span", null, "Kaartlagen")), h("div", { id: "zoom-buttons" }, h("button", { type: "button", onClick: e => this.zoomIn.emit(e), disabled: this.disableZoom === 'in' || this.disableZoom === 'both' }, h("span", null, "Zoom in"), h("dso-icon", { icon: "plus" })), h("button", { type: "button", onClick: e => this.zoomOut.emit(e), disabled: this.disableZoom === 'out' || this.disableZoom === 'both' }, h("span", null, "Zoom uit"), h("dso-icon", { icon: "minus" })))), h("section", { hidden: this.hideContent }, h("header", null, h("h2", null, "Kaartlagen"), h("button", { type: "button", id: "close-button", onClick: () => this.open = false, ref: element => __classPrivateFieldSet(this, _closeButtonElement, element) }, h("span", null, "Sluit dialoog"), h("dso-icon", { icon: "times" }))), h("div", { class: "content" }, h("slot", null)))));
2392
+ return (h(Host, null, h("button", { type: "button", id: "toggle-visibility-button", onClick: () => this.open = !this.open, ref: element => __classPrivateFieldSet(this, _toggleButtonElement, element) }, h("dso-icon", { icon: "layers" }), h("span", null, "Kaartlagen")), h("div", { id: "zoom-buttons" }, h("button", { type: "button", onClick: e => this.zoomIn.emit(e), disabled: this.disableZoom === 'in' || this.disableZoom === 'both' }, h("span", null, "Zoom in"), h("dso-icon", { icon: "plus" })), h("button", { type: "button", onClick: e => this.zoomOut.emit(e), disabled: this.disableZoom === 'out' || this.disableZoom === 'both' }, h("span", null, "Zoom uit"), h("dso-icon", { icon: "minus" }))), h("section", { hidden: this.hideContent }, h("header", null, h("h2", null, "Kaartlagen"), h("button", { type: "button", id: "close-button", onClick: () => this.open = false, ref: element => __classPrivateFieldSet(this, _closeButtonElement, element) }, h("span", null, "Sluit dialoog"), h("dso-icon", { icon: "times" }))), h("div", { class: "content" }, h("slot", null)))));
2291
2393
  }
2292
2394
  static get watchers() { return {
2293
2395
  "open": ["watchOpen"]
@@ -2303,17 +2405,14 @@ let MapOverlays = class extends HTMLElement {
2303
2405
  super();
2304
2406
  this.__registerHost();
2305
2407
  attachShadow(this);
2306
- this.checkedOverlaysChange = createEvent(this, "checkedOverlaysChange", 7);
2307
- this.checkedOverlays = [];
2408
+ this.toggleOverlay = createEvent(this, "toggleOverlay", 7);
2308
2409
  }
2309
- toggleOverlay(overlay, checked) {
2310
- this.checkedOverlays = checked
2311
- ? [...this.checkedOverlays, overlay]
2312
- : this.checkedOverlays.filter(o => o !== overlay);
2313
- this.checkedOverlaysChange.emit(this.checkedOverlays);
2410
+ overlayChangeHandler(overlay, e) {
2411
+ const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;
2412
+ this.toggleOverlay.emit({ overlay, checked });
2314
2413
  }
2315
2414
  render() {
2316
- return (h("fieldset", { class: "form-group dso-checkboxes" }, h("legend", { class: "sr-only" }, "Kaartlagen"), h("div", { class: "dso-label-container" }, h("span", { class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), h("div", { class: "dso-field-container" }, this.overlays.map(overlay => (h("dso-selectable", { type: "checkbox", value: overlay.name, checked: this.checkedOverlays.includes(overlay), onDsoChange: () => this.toggleOverlay(overlay, !this.checkedOverlays.includes(overlay)) }, overlay.name))))));
2415
+ return (h("fieldset", { class: "form-group dso-checkboxes" }, h("legend", { class: "sr-only" }, "Kaartlagen"), h("div", { class: "dso-label-container" }, h("span", { class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), h("div", { class: "dso-field-container" }, this.overlays.map(overlay => (h("dso-selectable", { type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, onDsoChange: e => this.overlayChangeHandler(overlay, e) }, overlay.name))))));
2317
2416
  }
2318
2417
  static get style() { return mapOverlaysCss; }
2319
2418
  };
@@ -3105,29 +3204,32 @@ function getBasePlacement(placement) {
3105
3204
  return placement.split('-')[0];
3106
3205
  }
3107
3206
 
3108
- // import { isHTMLElement } from './instanceOf';
3109
- function getBoundingClientRect(element, // eslint-disable-next-line unused-imports/no-unused-vars
3110
- includeScale) {
3207
+ var max = Math.max;
3208
+ var min = Math.min;
3209
+ var round = Math.round;
3210
+
3211
+ function getBoundingClientRect(element, includeScale) {
3212
+ if (includeScale === void 0) {
3213
+ includeScale = false;
3214
+ }
3111
3215
 
3112
3216
  var rect = element.getBoundingClientRect();
3113
3217
  var scaleX = 1;
3114
- var scaleY = 1; // FIXME:
3115
- // `offsetWidth` returns an integer while `getBoundingClientRect`
3116
- // returns a float. This results in `scaleX` or `scaleY` being
3117
- // non-1 when it should be for elements that aren't a full pixel in
3118
- // width or height.
3119
- // if (isHTMLElement(element) && includeScale) {
3120
- // const offsetHeight = element.offsetHeight;
3121
- // const offsetWidth = element.offsetWidth;
3122
- // // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
3123
- // // Fallback to 1 in case both values are `0`
3124
- // if (offsetWidth > 0) {
3125
- // scaleX = rect.width / offsetWidth || 1;
3126
- // }
3127
- // if (offsetHeight > 0) {
3128
- // scaleY = rect.height / offsetHeight || 1;
3129
- // }
3130
- // }
3218
+ var scaleY = 1;
3219
+
3220
+ if (isHTMLElement(element) && includeScale) {
3221
+ var offsetHeight = element.offsetHeight;
3222
+ var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
3223
+ // Fallback to 1 in case both values are `0`
3224
+
3225
+ if (offsetWidth > 0) {
3226
+ scaleX = round(rect.width) / offsetWidth || 1;
3227
+ }
3228
+
3229
+ if (offsetHeight > 0) {
3230
+ scaleY = round(rect.height) / offsetHeight || 1;
3231
+ }
3232
+ }
3131
3233
 
3132
3234
  return {
3133
3235
  width: rect.width / scaleX,
@@ -3282,13 +3384,13 @@ function getMainAxisFromPlacement(placement) {
3282
3384
  return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
3283
3385
  }
3284
3386
 
3285
- var max = Math.max;
3286
- var min = Math.min;
3287
- var round = Math.round;
3288
-
3289
3387
  function within(min$1, value, max$1) {
3290
3388
  return max(min$1, min(value, max$1));
3291
3389
  }
3390
+ function withinMaxClamp(min, value, max) {
3391
+ var v = within(min, value, max);
3392
+ return v > max ? max : v;
3393
+ }
3292
3394
 
3293
3395
  function getFreshSideObject() {
3294
3396
  return {
@@ -3411,8 +3513,8 @@ function roundOffsetsByDPR(_ref) {
3411
3513
  var win = window;
3412
3514
  var dpr = win.devicePixelRatio || 1;
3413
3515
  return {
3414
- x: round(round(x * dpr) / dpr) || 0,
3415
- y: round(round(y * dpr) / dpr) || 0
3516
+ x: round(x * dpr) / dpr || 0,
3517
+ y: round(y * dpr) / dpr || 0
3416
3518
  };
3417
3519
  }
3418
3520
 
@@ -3427,14 +3529,23 @@ function mapToStyles(_ref2) {
3427
3529
  position = _ref2.position,
3428
3530
  gpuAcceleration = _ref2.gpuAcceleration,
3429
3531
  adaptive = _ref2.adaptive,
3430
- roundOffsets = _ref2.roundOffsets;
3431
-
3432
- var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
3433
- _ref3$x = _ref3.x,
3434
- x = _ref3$x === void 0 ? 0 : _ref3$x,
3435
- _ref3$y = _ref3.y,
3436
- y = _ref3$y === void 0 ? 0 : _ref3$y;
3532
+ roundOffsets = _ref2.roundOffsets,
3533
+ isFixed = _ref2.isFixed;
3534
+ var _offsets$x = offsets.x,
3535
+ x = _offsets$x === void 0 ? 0 : _offsets$x,
3536
+ _offsets$y = offsets.y,
3537
+ y = _offsets$y === void 0 ? 0 : _offsets$y;
3538
+
3539
+ var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
3540
+ x: x,
3541
+ y: y
3542
+ }) : {
3543
+ x: x,
3544
+ y: y
3545
+ };
3437
3546
 
3547
+ x = _ref3.x;
3548
+ y = _ref3.y;
3438
3549
  var hasX = offsets.hasOwnProperty('x');
3439
3550
  var hasY = offsets.hasOwnProperty('y');
3440
3551
  var sideX = left;
@@ -3459,16 +3570,18 @@ function mapToStyles(_ref2) {
3459
3570
  offsetParent = offsetParent;
3460
3571
 
3461
3572
  if (placement === top || (placement === left || placement === right) && variation === end) {
3462
- sideY = bottom; // $FlowFixMe[prop-missing]
3463
-
3464
- y -= offsetParent[heightProp] - popperRect.height;
3573
+ sideY = bottom;
3574
+ var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
3575
+ offsetParent[heightProp];
3576
+ y -= offsetY - popperRect.height;
3465
3577
  y *= gpuAcceleration ? 1 : -1;
3466
3578
  }
3467
3579
 
3468
3580
  if (placement === left || (placement === top || placement === bottom) && variation === end) {
3469
- sideX = right; // $FlowFixMe[prop-missing]
3470
-
3471
- x -= offsetParent[widthProp] - popperRect.width;
3581
+ sideX = right;
3582
+ var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
3583
+ offsetParent[widthProp];
3584
+ x -= offsetX - popperRect.width;
3472
3585
  x *= gpuAcceleration ? 1 : -1;
3473
3586
  }
3474
3587
  }
@@ -3477,6 +3590,17 @@ function mapToStyles(_ref2) {
3477
3590
  position: position
3478
3591
  }, adaptive && unsetSides);
3479
3592
 
3593
+ var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
3594
+ x: x,
3595
+ y: y
3596
+ }) : {
3597
+ x: x,
3598
+ y: y
3599
+ };
3600
+
3601
+ x = _ref4.x;
3602
+ y = _ref4.y;
3603
+
3480
3604
  if (gpuAcceleration) {
3481
3605
  var _Object$assign;
3482
3606
 
@@ -3486,9 +3610,9 @@ function mapToStyles(_ref2) {
3486
3610
  return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
3487
3611
  }
3488
3612
 
3489
- function computeStyles(_ref4) {
3490
- var state = _ref4.state,
3491
- options = _ref4.options;
3613
+ function computeStyles(_ref5) {
3614
+ var state = _ref5.state,
3615
+ options = _ref5.options;
3492
3616
  var _options$gpuAccelerat = options.gpuAcceleration,
3493
3617
  gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
3494
3618
  _options$adaptive = options.adaptive,
@@ -3501,7 +3625,8 @@ function computeStyles(_ref4) {
3501
3625
  variation: getVariation(state.placement),
3502
3626
  popper: state.elements.popper,
3503
3627
  popperRect: state.rects.popper,
3504
- gpuAcceleration: gpuAcceleration
3628
+ gpuAcceleration: gpuAcceleration,
3629
+ isFixed: state.options.strategy === 'fixed'
3505
3630
  };
3506
3631
 
3507
3632
  if (state.modifiersData.popperOffsets != null) {
@@ -3759,7 +3884,7 @@ function getInnerBoundingClientRect(element) {
3759
3884
  }
3760
3885
 
3761
3886
  function getClientRectFromMixedType(element, clippingParent) {
3762
- return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
3887
+ return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
3763
3888
  } // A "clipping parent" is an overflowable container with the characteristic of
3764
3889
  // clipping (or hiding) overflowing elements with a position different from
3765
3890
  // `initial`
@@ -4272,6 +4397,14 @@ function preventOverflow(_ref) {
4272
4397
  var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
4273
4398
  placement: state.placement
4274
4399
  })) : tetherOffset;
4400
+ var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
4401
+ mainAxis: tetherOffsetValue,
4402
+ altAxis: tetherOffsetValue
4403
+ } : Object.assign({
4404
+ mainAxis: 0,
4405
+ altAxis: 0
4406
+ }, tetherOffsetValue);
4407
+ var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
4275
4408
  var data = {
4276
4409
  x: 0,
4277
4410
  y: 0
@@ -4281,13 +4414,15 @@ function preventOverflow(_ref) {
4281
4414
  return;
4282
4415
  }
4283
4416
 
4284
- if (checkMainAxis || checkAltAxis) {
4417
+ if (checkMainAxis) {
4418
+ var _offsetModifierState$;
4419
+
4285
4420
  var mainSide = mainAxis === 'y' ? top : left;
4286
4421
  var altSide = mainAxis === 'y' ? bottom : right;
4287
4422
  var len = mainAxis === 'y' ? 'height' : 'width';
4288
4423
  var offset = popperOffsets[mainAxis];
4289
- var min$1 = popperOffsets[mainAxis] + overflow[mainSide];
4290
- var max$1 = popperOffsets[mainAxis] - overflow[altSide];
4424
+ var min$1 = offset + overflow[mainSide];
4425
+ var max$1 = offset - overflow[altSide];
4291
4426
  var additive = tether ? -popperRect[len] / 2 : 0;
4292
4427
  var minLen = variation === start ? referenceRect[len] : popperRect[len];
4293
4428
  var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
@@ -4307,36 +4442,45 @@ function preventOverflow(_ref) {
4307
4442
  // width or height)
4308
4443
 
4309
4444
  var arrowLen = within(0, referenceRect[len], arrowRect[len]);
4310
- var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - tetherOffsetValue : minLen - arrowLen - arrowPaddingMin - tetherOffsetValue;
4311
- var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + tetherOffsetValue : maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue;
4445
+ var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
4446
+ var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
4312
4447
  var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
4313
4448
  var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
4314
- var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0;
4315
- var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset;
4316
- var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue;
4449
+ var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
4450
+ var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
4451
+ var tetherMax = offset + maxOffset - offsetModifierValue;
4452
+ var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
4453
+ popperOffsets[mainAxis] = preventedOffset;
4454
+ data[mainAxis] = preventedOffset - offset;
4455
+ }
4317
4456
 
4318
- if (checkMainAxis) {
4319
- var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
4320
- popperOffsets[mainAxis] = preventedOffset;
4321
- data[mainAxis] = preventedOffset - offset;
4322
- }
4457
+ if (checkAltAxis) {
4458
+ var _offsetModifierState$2;
4323
4459
 
4324
- if (checkAltAxis) {
4325
- var _mainSide = mainAxis === 'x' ? top : left;
4460
+ var _mainSide = mainAxis === 'x' ? top : left;
4326
4461
 
4327
- var _altSide = mainAxis === 'x' ? bottom : right;
4462
+ var _altSide = mainAxis === 'x' ? bottom : right;
4328
4463
 
4329
- var _offset = popperOffsets[altAxis];
4464
+ var _offset = popperOffsets[altAxis];
4330
4465
 
4331
- var _min = _offset + overflow[_mainSide];
4466
+ var _len = altAxis === 'y' ? 'height' : 'width';
4332
4467
 
4333
- var _max = _offset - overflow[_altSide];
4468
+ var _min = _offset + overflow[_mainSide];
4334
4469
 
4335
- var _preventedOffset = within(tether ? min(_min, tetherMin) : _min, _offset, tether ? max(_max, tetherMax) : _max);
4470
+ var _max = _offset - overflow[_altSide];
4336
4471
 
4337
- popperOffsets[altAxis] = _preventedOffset;
4338
- data[altAxis] = _preventedOffset - _offset;
4339
- }
4472
+ var isOriginSide = [top, left].indexOf(basePlacement) !== -1;
4473
+
4474
+ var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
4475
+
4476
+ var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
4477
+
4478
+ var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
4479
+
4480
+ var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
4481
+
4482
+ popperOffsets[altAxis] = _preventedOffset;
4483
+ data[altAxis] = _preventedOffset - _offset;
4340
4484
  }
4341
4485
 
4342
4486
  state.modifiersData[name] = data;
@@ -4368,8 +4512,8 @@ function getNodeScroll(node) {
4368
4512
 
4369
4513
  function isElementScaled(element) {
4370
4514
  var rect = element.getBoundingClientRect();
4371
- var scaleX = rect.width / element.offsetWidth || 1;
4372
- var scaleY = rect.height / element.offsetHeight || 1;
4515
+ var scaleX = round(rect.width) / element.offsetWidth || 1;
4516
+ var scaleY = round(rect.height) / element.offsetHeight || 1;
4373
4517
  return scaleX !== 1 || scaleY !== 1;
4374
4518
  } // Returns the composite rect of an element relative to its offsetParent.
4375
4519
  // Composite means it takes into account transforms as well as layout.
@@ -4381,9 +4525,9 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
4381
4525
  }
4382
4526
 
4383
4527
  var isOffsetParentAnElement = isHTMLElement(offsetParent);
4384
- isHTMLElement(offsetParent) && isElementScaled(offsetParent);
4528
+ var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
4385
4529
  var documentElement = getDocumentElement(offsetParent);
4386
- var rect = getBoundingClientRect(elementOrVirtualElement);
4530
+ var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
4387
4531
  var scroll = {
4388
4532
  scrollLeft: 0,
4389
4533
  scrollTop: 0
@@ -4400,7 +4544,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
4400
4544
  }
4401
4545
 
4402
4546
  if (isHTMLElement(offsetParent)) {
4403
- offsets = getBoundingClientRect(offsetParent);
4547
+ offsets = getBoundingClientRect(offsetParent, true);
4404
4548
  offsets.x += offsetParent.clientLeft;
4405
4549
  offsets.y += offsetParent.clientTop;
4406
4550
  } else if (documentElement) {
@@ -4687,7 +4831,41 @@ var createPopper = /*#__PURE__*/popperGenerator({
4687
4831
  defaultModifiers: defaultModifiers
4688
4832
  }); // eslint-disable-next-line import/no-unused-modules
4689
4833
 
4690
- const tooltipCss = ":host(:not([hidden])){display:inline-block}*,*::after,*::before{box-sizing:border-box}.tooltip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:1070}.tooltip.in{opacity:0.9}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:16px;max-width:640px;padding:8px 16px;position:relative}.tooltip .tooltip-inner.dso-small{max-width:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;height:0;position:absolute;width:0}.tooltip[data-popper-placement=top]{margin-top:-3px;padding:6px 0}.tooltip[data-popper-placement=top] .tooltip-arrow{border-top-color:#fff;border-width:6px 6px 0;bottom:0;left:50%;margin-left:-6px}.tooltip[data-popper-placement=right]{margin-left:3px;padding:0 6px}.tooltip[data-popper-placement=right] .tooltip-arrow{border-right-color:#fff;border-width:6px 6px 6px 0;left:0;margin-top:-6px;top:50%}.tooltip[data-popper-placement=bottom]{margin-top:3px;padding:6px 0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{border-bottom-color:#fff;border-width:0 6px 6px;left:50%;margin-left:-6px;top:0}.tooltip[data-popper-placement=left]{margin-left:-3px;padding:0 6px}.tooltip[data-popper-placement=left] .tooltip-arrow{border-left-color:#fff;border-width:6px 0 6px 6px;margin-top:-6px;right:0;top:50%}";
4834
+ var maxSize = {
4835
+ name: 'maxSize',
4836
+ enabled: true,
4837
+ phase: 'main',
4838
+ requiresIfExists: ['offset', 'preventOverflow', 'flip'],
4839
+ fn: function fn(_ref) {
4840
+ var state = _ref.state,
4841
+ name = _ref.name,
4842
+ options = _ref.options;
4843
+ var overflow = detectOverflow(state, options);
4844
+
4845
+ var _ref2 = state.modifiersData.preventOverflow || {
4846
+ x: 0,
4847
+ y: 0
4848
+ },
4849
+ x = _ref2.x,
4850
+ y = _ref2.y;
4851
+
4852
+ var _state$rects$popper = state.rects.popper,
4853
+ width = _state$rects$popper.width,
4854
+ height = _state$rects$popper.height;
4855
+
4856
+ var _state$placement$spli = state.placement.split('-'),
4857
+ basePlacement = _state$placement$spli[0];
4858
+
4859
+ var widthProp = basePlacement === 'left' ? 'left' : 'right';
4860
+ var heightProp = basePlacement === 'top' ? 'top' : 'bottom';
4861
+ state.modifiersData[name] = {
4862
+ width: width - overflow[widthProp] - x,
4863
+ height: height - overflow[heightProp] - y
4864
+ };
4865
+ }
4866
+ };
4867
+
4868
+ const tooltipCss = ":host(.hidden){visibility:hidden}:host-context(dso-toggletip){color:red !important}:host-context(dso-toggletip) *[data-popper-placement=top] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=right] .tooltip-arrow{margin-top:0}:host-context(dso-toggletip) *[data-popper-placement=bottom] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=left]{margin-right:-8px !important}:host-context(dso-toggletip) *[data-popper-placement=left] .tooltip-arrow{margin-top:0}*,*::after,*::before{box-sizing:border-box}.tooltip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:1070}.tooltip.in{opacity:1}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:16px;max-width:640px;padding:8px 16px;position:relative}.tooltip .tooltip-inner.dso-small{max-width:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;height:0;width:0}.tooltip[data-popper-placement=top]{margin-top:-3px;padding:6px 0}.tooltip[data-popper-placement=top] .tooltip-arrow{border-top-color:#fff;border-width:6px 6px 0;bottom:0}.tooltip[data-popper-placement=top] .tooltip-arrow{margin-left:-3px}.tooltip[data-popper-placement=right]{margin-left:3px;padding:0 6px}.tooltip[data-popper-placement=right] .tooltip-arrow{border-right-color:#fff;border-width:6px 6px 6px 0;left:0}.tooltip[data-popper-placement=right] .tooltip-arrow{margin-top:-3px}.tooltip[data-popper-placement=bottom]{margin-top:3px;padding:6px 0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{border-bottom-color:#fff;border-width:0 6px 6px;top:0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{margin-left:-3px}.tooltip[data-popper-placement=left]{margin-left:-3px;padding:0 6px}.tooltip[data-popper-placement=left] .tooltip-arrow{border-left-color:#fff;border-width:6px 0 6px 6px;right:0}.tooltip[data-popper-placement=left] .tooltip-arrow{margin-top:-3px}";
4691
4869
 
4692
4870
  // Keep const in sync with $tooltip-transition-duration in @dso-toolkit/sources/tooltip.scss tooltip_root() mixin
4693
4871
  const transitionDuration = 150;
@@ -4709,6 +4887,19 @@ let Tooltip = class extends HTMLElement {
4709
4887
  */
4710
4888
  this.active = false;
4711
4889
  this.hidden = true;
4890
+ this.applyMaxSize = {
4891
+ name: 'applyMaxSize',
4892
+ enabled: true,
4893
+ phase: beforeWrite,
4894
+ requires: ['maxSize'],
4895
+ fn({ state }) {
4896
+ let { width } = state.modifiersData.maxSize;
4897
+ if (width < 160) {
4898
+ width = 160;
4899
+ }
4900
+ state.styles.popper = Object.assign(Object.assign({}, state.styles.popper), { maxWidth: `${width}px` });
4901
+ },
4902
+ };
4712
4903
  }
4713
4904
  /**
4714
4905
  * Activate the tooltip (Sets the `active` attribute)
@@ -4766,7 +4957,8 @@ let Tooltip = class extends HTMLElement {
4766
4957
  }
4767
4958
  this.target = this.getTarget();
4768
4959
  this.popper = createPopper(this.target, tooltip, {
4769
- placement: this.position
4960
+ placement: this.position,
4961
+ modifiers: [maxSize, this.applyMaxSize],
4770
4962
  });
4771
4963
  this.callbacks = {
4772
4964
  activate: () => (this.active = true),
@@ -4798,7 +4990,7 @@ let Tooltip = class extends HTMLElement {
4798
4990
  }
4799
4991
  }
4800
4992
  render() {
4801
- return (h(Host, { hidden: this.hidden }, h("div", { class: clsx('tooltip', { in: this.active }), role: "tooltip" }, !this.noArrow && h("div", { class: "tooltip-arrow" }), h("div", { class: clsx('tooltip-inner', { 'dso-small': this.small }) }, h("slot", null)))));
4993
+ return (h(Host, { class: { 'hidden': this.hidden } }, h("div", { class: clsx('tooltip', { in: this.active }), role: "tooltip" }, !this.noArrow && h("div", { "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { class: clsx('tooltip-inner', { 'dso-small': this.small }) }, h("slot", null)))));
4802
4994
  }
4803
4995
  getTarget() {
4804
4996
  if (this.for instanceof HTMLElement) {
@@ -5009,17 +5201,18 @@ const DsoAttachmentsCounter = /*@__PURE__*/proxyCustomElement(AttachmentsCounter
5009
5201
  const DsoAutosuggest = /*@__PURE__*/proxyCustomElement(Autosuggest, [6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]);
5010
5202
  const DsoBadge = /*@__PURE__*/proxyCustomElement(Badge, [1,"dso-badge",{"status":[1]}]);
5011
5203
  const DsoBanner = /*@__PURE__*/proxyCustomElement(Banner, [1,"dso-banner",{"status":[1]}]);
5012
- const DsoDatePicker = /*@__PURE__*/proxyCustomElement(DsoDatePicker$1, [1,"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]},[[6,"click","handleDocumentClick"]]]);
5204
+ const DsoDatePicker = /*@__PURE__*/proxyCustomElement(DsoDatePicker$1, [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]},[[6,"click","handleDocumentClick"]]]);
5013
5205
  const DsoDropdownMenu = /*@__PURE__*/proxyCustomElement(DropdownMenu, [1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]);
5206
+ const DsoHeader = /*@__PURE__*/proxyCustomElement(Header, [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]}]);
5014
5207
  const DsoHelpcenterPanel = /*@__PURE__*/proxyCustomElement(HelpcenterPanel, [1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]);
5015
5208
  const DsoHighlightBox = /*@__PURE__*/proxyCustomElement(HighlightBox, [1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]);
5016
5209
  const DsoIcon = /*@__PURE__*/proxyCustomElement(Icon, [1,"dso-icon",{"icon":[1]}]);
5017
5210
  const DsoInfo = /*@__PURE__*/proxyCustomElement(Info, [1,"dso-info",{"fixed":[516],"active":[516]}]);
5018
5211
  const DsoInfoButton = /*@__PURE__*/proxyCustomElement(InfoButton, [1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]);
5019
5212
  const DsoLabel = /*@__PURE__*/proxyCustomElement(Label, [1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]);
5020
- const DsoMapBaseLayers = /*@__PURE__*/proxyCustomElement(MapBaseLayers, [1,"dso-map-base-layers",{"baseLayers":[16],"selectedBaseLayer":[1040]}]);
5213
+ const DsoMapBaseLayers = /*@__PURE__*/proxyCustomElement(MapBaseLayers, [1,"dso-map-base-layers",{"baseLayers":[16]}]);
5021
5214
  const DsoMapControls = /*@__PURE__*/proxyCustomElement(MapControls, [1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]);
5022
- const DsoMapOverlays = /*@__PURE__*/proxyCustomElement(MapOverlays, [1,"dso-map-overlays",{"overlays":[16],"checkedOverlays":[1040]}]);
5215
+ const DsoMapOverlays = /*@__PURE__*/proxyCustomElement(MapOverlays, [1,"dso-map-overlays",{"overlays":[16]}]);
5023
5216
  const DsoOzonContent = /*@__PURE__*/proxyCustomElement(OzonContent, [0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]);
5024
5217
  const DsoProgressBar = /*@__PURE__*/proxyCustomElement(ProgressBar, [1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]);
5025
5218
  const DsoProgressIndicator = /*@__PURE__*/proxyCustomElement(Progressindicator, [1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]);
@@ -5037,6 +5230,7 @@ const defineCustomElements = (opts) => {
5037
5230
  DsoBanner,
5038
5231
  DsoDatePicker,
5039
5232
  DsoDropdownMenu,
5233
+ DsoHeader,
5040
5234
  DsoHelpcenterPanel,
5041
5235
  DsoHighlightBox,
5042
5236
  DsoIcon,
@@ -5061,4 +5255,4 @@ const defineCustomElements = (opts) => {
5061
5255
  }
5062
5256
  };
5063
5257
 
5064
- export { DsoAlert, DsoAttachmentsCounter, DsoAutosuggest, DsoBadge, DsoBanner, DsoDatePicker, DsoDropdownMenu, DsoHelpcenterPanel, DsoHighlightBox, DsoIcon, DsoInfo, DsoInfoButton, DsoLabel, DsoMapBaseLayers, DsoMapControls, DsoMapOverlays, DsoOzonContent, DsoProgressBar, DsoProgressIndicator, DsoSelectable, DsoToggletip, DsoTooltip, DsoTreeView, defineCustomElements };
5258
+ export { DsoAlert, DsoAttachmentsCounter, DsoAutosuggest, DsoBadge, DsoBanner, DsoDatePicker, DsoDropdownMenu, DsoHeader, DsoHelpcenterPanel, DsoHighlightBox, DsoIcon, DsoInfo, DsoInfoButton, DsoLabel, DsoMapBaseLayers, DsoMapControls, DsoMapOverlays, DsoOzonContent, DsoProgressBar, DsoProgressIndicator, DsoSelectable, DsoToggletip, DsoTooltip, DsoTreeView, defineCustomElements };