@dso-toolkit/core 56.0.0 → 57.0.0

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

@@ -9,7 +9,7 @@ const ViewerGridFilterpanelButtons = ({ onApply, onCancel, }) => (h("div", { cla
     h("span", null, "Toepassen"),
     h("dso-icon", { icon: "chevron-right" }))));
 
-const viewerGridCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  height: 100vh;\n  overflow: hidden;\n  position: relative;\n}\n\n:host([small]) .dso-map-panel {\n  flex-basis: 375px;\n  min-width: 0;\n  max-width: 375px;\n}\n@media screen and (max-width: 375px) {\n  :host([small]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 0;\n    transition: none;\n  }\n}\n\n:host([medium]) .dso-map-panel {\n  flex-basis: 624px;\n  min-width: 375px;\n  max-width: 624px;\n}\n@media screen and (max-width: 624px) {\n  :host([medium]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 375px;\n    transition: none;\n  }\n}\n\n:host([large]) .dso-map-panel {\n  flex-basis: 60%;\n  min-width: 768px;\n  max-width: 1024px;\n}\n@media screen and (max-width: 768px) {\n  :host([large]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 768px;\n    transition: none;\n  }\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n  outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n  outline: 0;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n  color: #173521;\n}\n.shrink.btn-align,\n.expand.btn-align,\n.overlay-close-button.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.shrink svg.di.di-chevron-down + span:not(.sr-only),\n.shrink svg.di.di-chevron-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-chevron-down,\n.shrink span:not(.sr-only) + svg.di.di-chevron-up,\n.expand svg.di.di-chevron-down + span:not(.sr-only),\n.expand svg.di.di-chevron-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-chevron-down,\n.expand span:not(.sr-only) + svg.di.di-chevron-up,\n.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),\n.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),\n.shrink svg.di.di-angle-down + span:not(.sr-only),\n.shrink svg.di.di-angle-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-angle-down,\n.shrink span:not(.sr-only) + svg.di.di-angle-up,\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],\n.expand dso-icon[icon=chevron-left] + span:not(.sr-only),\n.expand dso-icon[icon=chevron-right] + span:not(.sr-only),\n.expand svg.di.di-angle-down + span:not(.sr-only),\n.expand svg.di.di-angle-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-angle-down,\n.expand span:not(.sr-only) + svg.di.di-angle-up,\n.expand span:not(.sr-only) + dso-icon[icon=chevron-left],\n.expand span:not(.sr-only) + dso-icon[icon=chevron-right],\n.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),\n.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n  vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n  cursor: pointer;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  display: none;\n}\n\n.overlay-close-button {\n  position: absolute;\n  top: 8px;\n  right: 16px;\n}\n\n.dso-map-panel {\n  background-color: #fff;\n  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  flex-shrink: 0;\n  flex-grow: 0;\n  padding-right: 8px;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;\n  z-index: 100;\n}\n.dso-map-panel .dso-filterblok-address {\n  font-weight: bold;\n  margin: 8px 0;\n}\n.dso-map-panel .main {\n  height: 100%;\n  overflow-y: scroll;\n  padding: 0 16px 8px;\n}\n\n.sizing-buttons {\n  left: calc(100% + 1px);\n  overflow-x: hidden;\n  padding: 0 4px 4px 0;\n  position: absolute;\n  top: 16px;\n  transition: left 200ms ease-in;\n  width: 44px;\n  z-index: -1;\n}\n.sizing-buttons button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-bottom-right-radius: 4px;\n  border-top-right-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.sizing-buttons button:active {\n  outline: 0;\n}\n.sizing-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.sizing-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.sizing-buttons button.btn-sm {\n  line-height: 1rem;\n}\n.sizing-buttons button.btn-sm dso-icon,\n.sizing-buttons button.btn-sm svg.di, .sizing-buttons button.btn-sm.extern::after, .sizing-buttons button.btn-sm.download::after, .sizing-buttons button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.sizing-buttons button:hover dso-icon {\n  color: #fff;\n}\n\n.map {\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.filterpanel,\n.overlay {\n  background-color: #fff;\n  height: 100%;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 101;\n}\n\n.filterpanel {\n  box-shadow: 2px 0 5px #666;\n  padding: 8px 16px;\n  left: 0;\n  max-width: 896px;\n  width: calc(100vw - 40px);\n}\n@media screen and (max-width: 768px) {\n  .filterpanel {\n    width: 100vw;\n  }\n  .filterpanel::before {\n    display: none !important;\n  }\n}\n.filterpanel h1 {\n  color: #275937;\n  margin-block-end: 16px;\n  margin-block-start: 24px;\n  font-size: 2rem;\n  font-weight: 700;\n}\n.filterpanel::before {\n  content: \"\";\n  display: block;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 896px;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 936px) {\n  .filterpanel::before {\n    left: auto;\n    width: 40px;\n  }\n}\n\n.overlay {\n  box-shadow: -2px 0 5px #666;\n  padding: 40px 16px 8px;\n  right: 0;\n  width: 624px;\n}\n@media screen and (max-width: 624px) {\n  .overlay {\n    width: 100vw;\n  }\n}\n\n.dimscreen {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 624px;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 102;\n}\n\n.filterpanel-buttons {\n  text-align: right;\n}\n.filterpanel-buttons .cancel-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .cancel-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.btn-sm {\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.btn-sm dso-icon,\n.filterpanel-buttons .cancel-button.btn-sm svg.di, .filterpanel-buttons .cancel-button.btn-sm.extern::after, .filterpanel-buttons .cancel-button.btn-sm.download::after, .filterpanel-buttons .cancel-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .apply-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.btn-sm {\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.btn-sm dso-icon,\n.filterpanel-buttons .apply-button.btn-sm svg.di, .filterpanel-buttons .apply-button.btn-sm.extern::after, .filterpanel-buttons .apply-button.btn-sm.download::after, .filterpanel-buttons .apply-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n  margin-left: 16px;\n}";
+const viewerGridCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  height: 100vh;\n  overflow: hidden;\n  position: relative;\n}\n\n:host([small]) .dso-map-panel {\n  flex-basis: 375px;\n  min-width: 0;\n  max-width: 375px;\n}\n@media screen and (max-width: 375px) {\n  :host([small]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 0;\n    transition: none;\n  }\n}\n\n:host([medium]) .dso-map-panel {\n  flex-basis: 624px;\n  min-width: 375px;\n  max-width: 624px;\n}\n@media screen and (max-width: 624px) {\n  :host([medium]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 375px;\n    transition: none;\n  }\n}\n\n:host([large]) .dso-map-panel {\n  flex-basis: 60%;\n  min-width: 768px;\n  max-width: 1024px;\n}\n@media screen and (max-width: 768px) {\n  :host([large]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 768px;\n    transition: none;\n  }\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n  outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n  outline: 0;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n  color: #173521;\n}\n.shrink.dso-align,\n.expand.dso-align,\n.overlay-close-button.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.shrink.dso-truncate,\n.expand.dso-truncate,\n.overlay-close-button.dso-truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.shrink svg.di.di-chevron-down + span:not(.sr-only),\n.shrink svg.di.di-chevron-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-chevron-down,\n.shrink span:not(.sr-only) + svg.di.di-chevron-up,\n.expand svg.di.di-chevron-down + span:not(.sr-only),\n.expand svg.di.di-chevron-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-chevron-down,\n.expand span:not(.sr-only) + svg.di.di-chevron-up,\n.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),\n.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),\n.shrink svg.di.di-angle-down + span:not(.sr-only),\n.shrink svg.di.di-angle-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-angle-down,\n.shrink span:not(.sr-only) + svg.di.di-angle-up,\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],\n.expand dso-icon[icon=chevron-left] + span:not(.sr-only),\n.expand dso-icon[icon=chevron-right] + span:not(.sr-only),\n.expand svg.di.di-angle-down + span:not(.sr-only),\n.expand svg.di.di-angle-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-angle-down,\n.expand span:not(.sr-only) + svg.di.di-angle-up,\n.expand span:not(.sr-only) + dso-icon[icon=chevron-left],\n.expand span:not(.sr-only) + dso-icon[icon=chevron-right],\n.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),\n.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n  vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n  cursor: pointer;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  display: none;\n}\n\n.overlay-close-button {\n  position: absolute;\n  top: 8px;\n  right: 16px;\n}\n\n.dso-map-panel {\n  background-color: #fff;\n  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  flex-shrink: 0;\n  flex-grow: 0;\n  padding-right: 8px;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;\n  z-index: 100;\n}\n.dso-map-panel .dso-filterblok-address {\n  font-weight: bold;\n  margin: 8px 0;\n}\n.dso-map-panel .main {\n  height: 100%;\n  overflow-y: scroll;\n  padding: 0 16px 8px;\n}\n\n.sizing-buttons {\n  left: calc(100% + 1px);\n  overflow-x: hidden;\n  padding: 0 4px 4px 0;\n  position: absolute;\n  top: 16px;\n  transition: left 200ms ease-in;\n  width: 44px;\n  z-index: -1;\n}\n.sizing-buttons button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-bottom-right-radius: 4px;\n  border-top-right-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.sizing-buttons button:active {\n  outline: 0;\n}\n.sizing-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.sizing-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.sizing-buttons button.dso-small {\n  line-height: 1rem;\n}\n.sizing-buttons button.dso-small dso-icon,\n.sizing-buttons button.dso-small svg.di, .sizing-buttons button.dso-small.extern::after, .sizing-buttons button.dso-small.download::after, .sizing-buttons button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.sizing-buttons button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.sizing-buttons button:hover dso-icon {\n  color: #fff;\n}\n\n.map {\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.filterpanel,\n.overlay {\n  background-color: #fff;\n  height: 100%;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 101;\n}\n\n.filterpanel {\n  box-shadow: 2px 0 5px #666;\n  padding: 8px 16px;\n  left: 0;\n  max-width: 896px;\n  width: calc(100vw - 40px);\n}\n@media screen and (max-width: 768px) {\n  .filterpanel {\n    width: 100vw;\n  }\n  .filterpanel::before {\n    display: none !important;\n  }\n}\n.filterpanel h1 {\n  color: #275937;\n  margin-block-end: 16px;\n  margin-block-start: 24px;\n  font-size: 2rem;\n  font-weight: 700;\n}\n.filterpanel::before {\n  content: \"\";\n  display: block;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 896px;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 936px) {\n  .filterpanel::before {\n    left: auto;\n    width: 40px;\n  }\n}\n\n.overlay {\n  box-shadow: -2px 0 5px #666;\n  padding: 40px 16px 8px;\n  right: 0;\n  width: 624px;\n}\n@media screen and (max-width: 624px) {\n  .overlay {\n    width: 100vw;\n  }\n}\n\n.dimscreen {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 624px;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 102;\n}\n\n.filterpanel-buttons {\n  text-align: right;\n}\n.filterpanel-buttons .cancel-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .cancel-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.dso-small {\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.dso-small dso-icon,\n.filterpanel-buttons .cancel-button.dso-small svg.di, .filterpanel-buttons .cancel-button.dso-small.extern::after, .filterpanel-buttons .cancel-button.dso-small.download::after, .filterpanel-buttons .cancel-button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .apply-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-small {\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.dso-small dso-icon,\n.filterpanel-buttons .apply-button.dso-small svg.di, .filterpanel-buttons .apply-button.dso-small.extern::after, .filterpanel-buttons .apply-button.dso-small.download::after, .filterpanel-buttons .apply-button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n  margin-left: 16px;\n}";
 
 const ViewerGrid = class {
   constructor(hostRef) {
@@ -131,7 +131,7 @@ const ViewerGrid = class {
     this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });
   }
   render() {
-    return (h(Host, Object.assign({}, { [this.mainSize]: true }), h("div", { class: "dso-map-panel", ref: (element) => (this.mapPanel = element) }, h("div", { class: "sizing-buttons" }, h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "breedte tekstpaneel: ", this.sizeLabelMap[this.mainSize]), h("button", { type: "button", class: "shrink", disabled: this.mainSize === "small", onClick: this.shrinkMain }, h("span", { class: "sr-only" }, "Kaartpaneel smaller maken"), h("dso-icon", { icon: "chevron-left" })), h("button", { type: "button", class: "expand", disabled: this.mainSize === "large", onClick: this.expandMain }, h("span", { class: "sr-only" }, "Kaartpaneel breder maken"), h("dso-icon", { icon: "chevron-right" }))), h("div", { class: "main" }, h("slot", { name: "main" }))), h("div", { id: "filterpanel", class: "filterpanel", hidden: !this.filterpanelOpen || !this.filterpanelSlot, ref: (element) => (this.filterpanel = element) }, h("h1", null, "Uw keuzes"), h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) }), h("slot", { name: "filterpanel" }), h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) })), h("div", { class: "map" }, h("slot", { name: "map" })), h("div", { hidden: !this.overlayOpen || !this.overlaySlot, class: "dimscreen" }), h("div", { class: "overlay", hidden: !this.overlayOpen || !this.overlaySlot, ref: (element) => (this.overlay = element) }, h("button", { type: "button", class: "overlay-close-button", onClick: (e) => this.dsoCloseOverlay.emit(e) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")), h("slot", { name: "overlay" }), h("button", { "aria-hidden": "true", type: "button", class: "overlay-close-button", style: { zIndex: "-100" } }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")))));
+    return (h(Host, Object.assign({}, { [this.mainSize]: true }), h("div", { class: "dso-map-panel", ref: (element) => (this.mapPanel = element) }, h("div", { class: "sizing-buttons" }, h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "Breedte tekstpaneel: ", this.sizeLabelMap[this.mainSize]), h("button", { type: "button", class: "shrink", disabled: this.mainSize === "small", onClick: this.shrinkMain }, h("span", { class: "sr-only" }, "Tekstpaneel smaller maken"), h("dso-icon", { icon: "chevron-left" })), h("button", { type: "button", class: "expand", disabled: this.mainSize === "large", onClick: this.expandMain }, h("span", { class: "sr-only" }, "Tekstpaneel breder maken"), h("dso-icon", { icon: "chevron-right" }))), h("div", { class: "main" }, h("slot", { name: "main" }))), h("div", { id: "filterpanel", class: "filterpanel", hidden: !this.filterpanelOpen || !this.filterpanelSlot, ref: (element) => (this.filterpanel = element) }, h("h1", null, "Uw keuzes"), h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) }), h("slot", { name: "filterpanel" }), h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) })), h("div", { class: "map" }, h("slot", { name: "map" })), h("div", { hidden: !this.overlayOpen || !this.overlaySlot, class: "dimscreen" }), h("div", { class: "overlay", hidden: !this.overlayOpen || !this.overlaySlot, ref: (element) => (this.overlay = element) }, h("button", { type: "button", class: "overlay-close-button", onClick: (e) => this.dsoCloseOverlay.emit(e) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")), h("slot", { name: "overlay" }), h("button", { "aria-hidden": "true", type: "button", class: "overlay-close-button", style: { zIndex: "-100" } }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")))));
   }
   get host() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/dso-viewer-grid.entry.js.map

@@ -1 +1 @@
-{"file":"dso-viewer-grid.entry.js","mappings":"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","names":[],"sources":["./src/components/viewer-grid/viewer-grid-filterpanel-buttons.tsx","./src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","./src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelProps> = ({\r\n  onApply,\r\n  onCancel,\r\n}) => (\r\n  <div class=\"filterpanel-buttons\">\r\n    <button type=\"button\" class=\"cancel-button\" onClick={onCancel}>\r\n      <span>Annuleren</span>\r\n    </button>\r\n    <button type=\"button\" class=\"apply-button\" onClick={onApply}>\r\n      <span>Toepassen</span>\r\n      <dso-icon icon=\"chevron-right\"></dso-icon>\r\n    </button>\r\n  </div>\r\n);\r\n","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/headings\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: flex;\r\n  height: 100vh;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n:host([small]) {\r\n  .dso-map-panel {\r\n    flex-basis: core-viewer-grid-variables.$small;\r\n    min-width: 0;\r\n    max-width: core-viewer-grid-variables.$small;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: 0;\r\n      transition: none;\r\n    }\r\n  }\r\n}\r\n\r\n:host([medium]) {\r\n  .dso-map-panel {\r\n    flex-basis: core-viewer-grid-variables.$medium;\r\n    min-width: core-viewer-grid-variables.$small;\r\n    max-width: core-viewer-grid-variables.$medium;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: core-viewer-grid-variables.$small;\r\n      transition: none;\r\n    }\r\n  }\r\n}\r\n\r\n:host([large]) {\r\n  .dso-map-panel {\r\n    flex-basis: core-viewer-grid-variables.$large;\r\n    min-width: core-viewer-grid-variables.$large-min;\r\n    max-width: core-viewer-grid-variables.$large-max;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: core-viewer-grid-variables.$large-min;\r\n      transition: none;\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &[disabled] {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.overlay-close-button {\r\n  position: absolute;\r\n  top: units.$u1;\r\n  right: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.dso-map-panel {\r\n  background-color: colors.$wit;\r\n  box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  padding-right: units.$u1;\r\n  position: relative;\r\n  transition: flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-width core-viewer-grid-variables.$transition-time ease-in,\r\n    min-width core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-map-panel;\r\n\r\n  .dso-filterblok-address {\r\n    font-weight: bold;\r\n    margin: units.$u1 0;\r\n  }\r\n\r\n  .main {\r\n    height: 100%;\r\n    overflow-y: scroll;\r\n    padding: 0 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  }\r\n}\r\n\r\n.sizing-buttons {\r\n  left: calc(100% + 1px);\r\n  overflow-x: hidden;\r\n  padding: 0 units.$u1 * 0.5 units.$u1 * 0.5 0;\r\n  position: absolute;\r\n  top: core-viewer-grid-variables.$sizing-buttons-top;\r\n  transition: left core-viewer-grid-variables.$transition-time ease-in;\r\n  width: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n  z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n    @include button.map-focus();\r\n\r\n    border: 0;\r\n    padding: 8px;\r\n    border-radius: 0;\r\n    border-bottom-right-radius: 4px;\r\n    border-top-right-radius: 4px;\r\n    box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n    flex: 0 0 100%;\r\n    height: core-viewer-grid-variables.$resize-button-size;\r\n    min-width: auto;\r\n    width: core-viewer-grid-variables.$resize-button-size;\r\n\r\n    &:hover {\r\n      dso-icon {\r\n        color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.map {\r\n  height: 100%;\r\n  width: 100%;\r\n  overflow: hidden;\r\n}\r\n\r\n.filterpanel,\r\n.overlay {\r\n  background-color: colors.$wit;\r\n  height: 100%;\r\n  overflow-y: auto;\r\n  position: absolute;\r\n  z-index: zindex.$viewer-grid-map-panel + 1;\r\n}\r\n\r\n.filterpanel {\r\n  box-shadow: 2px 0 5px colors.$grijs-60;\r\n  padding: units.$u1 css-grid.$grid-gutter-width * 0.5;\r\n  left: 0;\r\n  max-width: core-viewer-grid-variables.$filterpanel-max-width;\r\n  width: calc(100vw - 40px);\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$filterpanel-width) {\r\n    width: 100vw;\r\n\r\n    &::before {\r\n      display: none !important;\r\n    }\r\n  }\r\n\r\n  h1 {\r\n    @include headings.base();\r\n    @include headings.margin-large();\r\n    @include headings.h1();\r\n  }\r\n\r\n  &::before {\r\n    content: \"\";\r\n    display: block;\r\n    position: fixed;\r\n    top: 0;\r\n    bottom: 0;\r\n    right: 0;\r\n    left: core-viewer-grid-variables.$filterpanel-max-width;\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n\r\n    @media screen and (max-width: #{core-viewer-grid-variables.$filterpanel-max-width + 40px}) {\r\n      left: auto;\r\n      width: 40px;\r\n    }\r\n  }\r\n}\r\n\r\n.overlay {\r\n  box-shadow: -2px 0 5px colors.$grijs-60;\r\n  padding: units.$u5 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  right: 0;\r\n  width: core-viewer-grid-variables.$overlay-width;\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$overlay-width) {\r\n    width: 100vw;\r\n  }\r\n}\r\n\r\n.dimscreen {\r\n  position: fixed;\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: core-viewer-grid-variables.$overlay-width;\r\n  background-color: rgba(0, 0, 0, 0.5);\r\n  z-index: zindex.$viewer-grid-map-panel + 2;\r\n}\r\n\r\n.filterpanel-buttons {\r\n  text-align: right;\r\n\r\n  .cancel-button {\r\n    @include button.secondary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .apply-button {\r\n    @include button.primary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .cancel-button + .apply-button {\r\n    margin-left: units.$u2;\r\n  }\r\n}\r\n","import { h, Component, Prop, State, Host, Element, Event, EventEmitter, Watch } from \"@stencil/core\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\nimport { FilterpanelEvent, LabelSizeMap, MainSize, ViewerGridChangeSizeEvent } from \"./viewer-grid.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-viewer-grid\",\r\n  styleUrl: \"viewer-grid.scss\",\r\n  shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n  private sizeLabelMap: LabelSizeMap = {\r\n    small: \"smal\",\r\n    medium: \"middel\",\r\n    large: \"breed\",\r\n  };\r\n\r\n  private mapPanel?: HTMLDivElement;\r\n\r\n  /**\r\n   * Set to true when filterpanel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterpanelOpen = false;\r\n\r\n  /**\r\n   * Set to true when overlay should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  overlayOpen = false;\r\n\r\n  /**\r\n   * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop()\r\n  initialMainSize?: MainSize;\r\n\r\n  @State()\r\n  mainSize: MainSize = \"large\";\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<MouseEvent | KeyboardEvent>;\r\n\r\n  /**\r\n   * Emitted when user cancels filterpanel.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelCancel!: EventEmitter<FilterpanelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelApply!: EventEmitter<FilterpanelEvent>;\r\n\r\n  /**\r\n   * Emitted before and after main size animation. Inspect `detail` property for more information.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoViewerGridElement;\r\n\r\n  private filterpanel: HTMLElement | undefined;\r\n\r\n  private filterpanelSlot: HTMLElement | null = null;\r\n\r\n  private filterpanelFocustrap: FocusTrap | undefined;\r\n\r\n  private overlay: HTMLDivElement | undefined;\r\n\r\n  private overlaySlot: HTMLDivElement | null = null;\r\n\r\n  private overlayFocustrap: FocusTrap | undefined;\r\n\r\n  @Watch(\"mainSize\")\r\n  mainSizeWatcher(currentSize: MainSize, previousSize: MainSize) {\r\n    this.dsoMainSizeChange.emit({\r\n      stage: \"start\",\r\n      previousSize,\r\n      currentSize,\r\n    });\r\n\r\n    this.mapPanel?.addEventListener(\r\n      \"transitionend\",\r\n      (e) => {\r\n        if (e.propertyName === \"flex-basis\") {\r\n          this.dsoMainSizeChange.emit({\r\n            stage: \"end\",\r\n            previousSize,\r\n            currentSize,\r\n          });\r\n        }\r\n      },\r\n      { once: true }\r\n    );\r\n  }\r\n\r\n  private shrinkMain = () => {\r\n    this.mainSize = this.mainSize === \"large\" ? \"medium\" : \"small\";\r\n  };\r\n\r\n  private expandMain = () => {\r\n    this.mainSize = this.mainSize === \"small\" ? \"medium\" : \"large\";\r\n  };\r\n\r\n  private updateFocusTrap() {\r\n    if (this.filterpanelOpen && this.overlayOpen) {\r\n      return;\r\n    }\r\n\r\n    if (this.filterpanelFocustrap) {\r\n      if (this.filterpanelOpen && !this.filterpanel?.hidden) {\r\n        this.filterpanelFocustrap.activate();\r\n        this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n      } else {\r\n        this.filterpanelFocustrap.deactivate();\r\n        this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n      }\r\n    }\r\n\r\n    if (this.overlayFocustrap) {\r\n      if (this.overlayOpen && !this.overlay?.hidden) {\r\n        this.overlayFocustrap.activate();\r\n        this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n      } else {\r\n        this.overlayFocustrap.deactivate();\r\n        this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n      }\r\n    }\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.key !== \"Escape\") {\r\n      return;\r\n    }\r\n\r\n    this.dsoCloseOverlay.emit(event);\r\n  };\r\n\r\n  connectedCallback() {\r\n    this.filterpanelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='filterpanel']\");\r\n\r\n    this.overlaySlot = this.host.querySelector<HTMLDivElement>(\"div[slot='overlay']\");\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.filterpanel && this.filterpanelSlot) {\r\n      this.filterpanelFocustrap = createFocusTrap([this.filterpanel, this.filterpanelSlot], {\r\n        escapeDeactivates: false,\r\n        allowOutsideClick: true,\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      });\r\n    }\r\n\r\n    if (this.overlay && this.overlaySlot) {\r\n      this.overlayFocustrap = createFocusTrap([this.overlay, this.overlaySlot], {\r\n        escapeDeactivates: false,\r\n        allowOutsideClick: true,\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      });\r\n    }\r\n\r\n    this.updateFocusTrap();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.initialMainSize) {\r\n      this.mainSize = this.initialMainSize;\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.updateFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.overlayFocustrap?.deactivate();\r\n    this.filterpanelFocustrap?.deactivate();\r\n\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n  }\r\n\r\n  private handleFilterpanelApply(mouseEvent: MouseEvent) {\r\n    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n  }\r\n\r\n  private handleFilterpanelCancel(mouseEvent: MouseEvent) {\r\n    this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host {...{ [this.mainSize]: true }}>\r\n        <div class=\"dso-map-panel\" ref={(element) => (this.mapPanel = element)}>\r\n          <div class=\"sizing-buttons\">\r\n            <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n              breedte tekstpaneel: {this.sizeLabelMap[this.mainSize]}\r\n            </span>\r\n            <button type=\"button\" class=\"shrink\" disabled={this.mainSize === \"small\"} onClick={this.shrinkMain}>\r\n              <span class=\"sr-only\">Kaartpaneel smaller maken</span>\r\n              <dso-icon icon=\"chevron-left\"></dso-icon>\r\n            </button>\r\n            <button type=\"button\" class=\"expand\" disabled={this.mainSize === \"large\"} onClick={this.expandMain}>\r\n              <span class=\"sr-only\">Kaartpaneel breder maken</span>\r\n              <dso-icon icon=\"chevron-right\"></dso-icon>\r\n            </button>\r\n          </div>\r\n          <div class=\"main\">\r\n            <slot name=\"main\" />\r\n          </div>\r\n        </div>\r\n        <div\r\n          id=\"filterpanel\"\r\n          class=\"filterpanel\"\r\n          hidden={!this.filterpanelOpen || !this.filterpanelSlot}\r\n          ref={(element) => (this.filterpanel = element)}\r\n        >\r\n          <h1>Uw keuzes</h1>\r\n          <ViewerGridFilterpanelButtons\r\n            onApply={(e) => this.handleFilterpanelApply(e)}\r\n            onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n          />\r\n          <slot name=\"filterpanel\" />\r\n          <ViewerGridFilterpanelButtons\r\n            onApply={(e) => this.handleFilterpanelApply(e)}\r\n            onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n          />\r\n        </div>\r\n        <div class=\"map\">\r\n          <slot name=\"map\" />\r\n        </div>\r\n        <div hidden={!this.overlayOpen || !this.overlaySlot} class=\"dimscreen\"></div>\r\n        <div\r\n          class=\"overlay\"\r\n          hidden={!this.overlayOpen || !this.overlaySlot}\r\n          ref={(element) => (this.overlay = element)}\r\n        >\r\n          <button type=\"button\" class=\"overlay-close-button\" onClick={(e) => this.dsoCloseOverlay.emit(e)}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">sluiten</span>\r\n          </button>\r\n          <slot name=\"overlay\" />\r\n          {/* This button is needed for the `focus-trap` library to function correctly. It is never focused. */}\r\n          <button aria-hidden=\"true\" type=\"button\" class=\"overlay-close-button\" style={{ zIndex: \"-100\" }}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">sluiten</span>\r\n          </button>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-viewer-grid.entry.js","mappings":"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","names":[],"sources":["./src/components/viewer-grid/viewer-grid-filterpanel-buttons.tsx","./src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","./src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelProps> = ({\r\n  onApply,\r\n  onCancel,\r\n}) => (\r\n  <div class=\"filterpanel-buttons\">\r\n    <button type=\"button\" class=\"cancel-button\" onClick={onCancel}>\r\n      <span>Annuleren</span>\r\n    </button>\r\n    <button type=\"button\" class=\"apply-button\" onClick={onApply}>\r\n      <span>Toepassen</span>\r\n      <dso-icon icon=\"chevron-right\"></dso-icon>\r\n    </button>\r\n  </div>\r\n);\r\n","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/headings\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: flex;\r\n  height: 100vh;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n:host([small]) {\r\n  .dso-map-panel {\r\n    flex-basis: core-viewer-grid-variables.$small;\r\n    min-width: 0;\r\n    max-width: core-viewer-grid-variables.$small;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: 0;\r\n      transition: none;\r\n    }\r\n  }\r\n}\r\n\r\n:host([medium]) {\r\n  .dso-map-panel {\r\n    flex-basis: core-viewer-grid-variables.$medium;\r\n    min-width: core-viewer-grid-variables.$small;\r\n    max-width: core-viewer-grid-variables.$medium;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: core-viewer-grid-variables.$small;\r\n      transition: none;\r\n    }\r\n  }\r\n}\r\n\r\n:host([large]) {\r\n  .dso-map-panel {\r\n    flex-basis: core-viewer-grid-variables.$large;\r\n    min-width: core-viewer-grid-variables.$large-min;\r\n    max-width: core-viewer-grid-variables.$large-max;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: core-viewer-grid-variables.$large-min;\r\n      transition: none;\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &[disabled] {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.overlay-close-button {\r\n  position: absolute;\r\n  top: units.$u1;\r\n  right: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.dso-map-panel {\r\n  background-color: colors.$wit;\r\n  box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  padding-right: units.$u1;\r\n  position: relative;\r\n  transition: flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-width core-viewer-grid-variables.$transition-time ease-in,\r\n    min-width core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-map-panel;\r\n\r\n  .dso-filterblok-address {\r\n    font-weight: bold;\r\n    margin: units.$u1 0;\r\n  }\r\n\r\n  .main {\r\n    height: 100%;\r\n    overflow-y: scroll;\r\n    padding: 0 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  }\r\n}\r\n\r\n.sizing-buttons {\r\n  left: calc(100% + 1px);\r\n  overflow-x: hidden;\r\n  padding: 0 units.$u1 * 0.5 units.$u1 * 0.5 0;\r\n  position: absolute;\r\n  top: core-viewer-grid-variables.$sizing-buttons-top;\r\n  transition: left core-viewer-grid-variables.$transition-time ease-in;\r\n  width: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n  z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n    @include button.map-focus();\r\n\r\n    border: 0;\r\n    padding: 8px;\r\n    border-radius: 0;\r\n    border-bottom-right-radius: 4px;\r\n    border-top-right-radius: 4px;\r\n    box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n    flex: 0 0 100%;\r\n    height: core-viewer-grid-variables.$resize-button-size;\r\n    min-width: auto;\r\n    width: core-viewer-grid-variables.$resize-button-size;\r\n\r\n    &:hover {\r\n      dso-icon {\r\n        color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.map {\r\n  height: 100%;\r\n  width: 100%;\r\n  overflow: hidden;\r\n}\r\n\r\n.filterpanel,\r\n.overlay {\r\n  background-color: colors.$wit;\r\n  height: 100%;\r\n  overflow-y: auto;\r\n  position: absolute;\r\n  z-index: zindex.$viewer-grid-map-panel + 1;\r\n}\r\n\r\n.filterpanel {\r\n  box-shadow: 2px 0 5px colors.$grijs-60;\r\n  padding: units.$u1 css-grid.$grid-gutter-width * 0.5;\r\n  left: 0;\r\n  max-width: core-viewer-grid-variables.$filterpanel-max-width;\r\n  width: calc(100vw - 40px);\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$filterpanel-width) {\r\n    width: 100vw;\r\n\r\n    &::before {\r\n      display: none !important;\r\n    }\r\n  }\r\n\r\n  h1 {\r\n    @include headings.base();\r\n    @include headings.margin-large();\r\n    @include headings.h1();\r\n  }\r\n\r\n  &::before {\r\n    content: \"\";\r\n    display: block;\r\n    position: fixed;\r\n    top: 0;\r\n    bottom: 0;\r\n    right: 0;\r\n    left: core-viewer-grid-variables.$filterpanel-max-width;\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n\r\n    @media screen and (max-width: #{core-viewer-grid-variables.$filterpanel-max-width + 40px}) {\r\n      left: auto;\r\n      width: 40px;\r\n    }\r\n  }\r\n}\r\n\r\n.overlay {\r\n  box-shadow: -2px 0 5px colors.$grijs-60;\r\n  padding: units.$u5 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  right: 0;\r\n  width: core-viewer-grid-variables.$overlay-width;\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$overlay-width) {\r\n    width: 100vw;\r\n  }\r\n}\r\n\r\n.dimscreen {\r\n  position: fixed;\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: core-viewer-grid-variables.$overlay-width;\r\n  background-color: rgba(0, 0, 0, 0.5);\r\n  z-index: zindex.$viewer-grid-map-panel + 2;\r\n}\r\n\r\n.filterpanel-buttons {\r\n  text-align: right;\r\n\r\n  .cancel-button {\r\n    @include button.secondary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .apply-button {\r\n    @include button.primary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .cancel-button + .apply-button {\r\n    margin-left: units.$u2;\r\n  }\r\n}\r\n","import { h, Component, Prop, State, Host, Element, Event, EventEmitter, Watch } from \"@stencil/core\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\nimport { FilterpanelEvent, LabelSizeMap, MainSize, ViewerGridChangeSizeEvent } from \"./viewer-grid.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-viewer-grid\",\r\n  styleUrl: \"viewer-grid.scss\",\r\n  shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n  private sizeLabelMap: LabelSizeMap = {\r\n    small: \"smal\",\r\n    medium: \"middel\",\r\n    large: \"breed\",\r\n  };\r\n\r\n  private mapPanel?: HTMLDivElement;\r\n\r\n  /**\r\n   * Set to true when filterpanel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterpanelOpen = false;\r\n\r\n  /**\r\n   * Set to true when overlay should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  overlayOpen = false;\r\n\r\n  /**\r\n   * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop()\r\n  initialMainSize?: MainSize;\r\n\r\n  @State()\r\n  mainSize: MainSize = \"large\";\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<MouseEvent | KeyboardEvent>;\r\n\r\n  /**\r\n   * Emitted when user cancels filterpanel.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelCancel!: EventEmitter<FilterpanelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelApply!: EventEmitter<FilterpanelEvent>;\r\n\r\n  /**\r\n   * Emitted before and after main size animation. Inspect `detail` property for more information.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoViewerGridElement;\r\n\r\n  private filterpanel: HTMLElement | undefined;\r\n\r\n  private filterpanelSlot: HTMLElement | null = null;\r\n\r\n  private filterpanelFocustrap: FocusTrap | undefined;\r\n\r\n  private overlay: HTMLDivElement | undefined;\r\n\r\n  private overlaySlot: HTMLDivElement | null = null;\r\n\r\n  private overlayFocustrap: FocusTrap | undefined;\r\n\r\n  @Watch(\"mainSize\")\r\n  mainSizeWatcher(currentSize: MainSize, previousSize: MainSize) {\r\n    this.dsoMainSizeChange.emit({\r\n      stage: \"start\",\r\n      previousSize,\r\n      currentSize,\r\n    });\r\n\r\n    this.mapPanel?.addEventListener(\r\n      \"transitionend\",\r\n      (e) => {\r\n        if (e.propertyName === \"flex-basis\") {\r\n          this.dsoMainSizeChange.emit({\r\n            stage: \"end\",\r\n            previousSize,\r\n            currentSize,\r\n          });\r\n        }\r\n      },\r\n      { once: true }\r\n    );\r\n  }\r\n\r\n  private shrinkMain = () => {\r\n    this.mainSize = this.mainSize === \"large\" ? \"medium\" : \"small\";\r\n  };\r\n\r\n  private expandMain = () => {\r\n    this.mainSize = this.mainSize === \"small\" ? \"medium\" : \"large\";\r\n  };\r\n\r\n  private updateFocusTrap() {\r\n    if (this.filterpanelOpen && this.overlayOpen) {\r\n      return;\r\n    }\r\n\r\n    if (this.filterpanelFocustrap) {\r\n      if (this.filterpanelOpen && !this.filterpanel?.hidden) {\r\n        this.filterpanelFocustrap.activate();\r\n        this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n      } else {\r\n        this.filterpanelFocustrap.deactivate();\r\n        this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n      }\r\n    }\r\n\r\n    if (this.overlayFocustrap) {\r\n      if (this.overlayOpen && !this.overlay?.hidden) {\r\n        this.overlayFocustrap.activate();\r\n        this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n      } else {\r\n        this.overlayFocustrap.deactivate();\r\n        this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n      }\r\n    }\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.key !== \"Escape\") {\r\n      return;\r\n    }\r\n\r\n    this.dsoCloseOverlay.emit(event);\r\n  };\r\n\r\n  connectedCallback() {\r\n    this.filterpanelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='filterpanel']\");\r\n\r\n    this.overlaySlot = this.host.querySelector<HTMLDivElement>(\"div[slot='overlay']\");\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.filterpanel && this.filterpanelSlot) {\r\n      this.filterpanelFocustrap = createFocusTrap([this.filterpanel, this.filterpanelSlot], {\r\n        escapeDeactivates: false,\r\n        allowOutsideClick: true,\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      });\r\n    }\r\n\r\n    if (this.overlay && this.overlaySlot) {\r\n      this.overlayFocustrap = createFocusTrap([this.overlay, this.overlaySlot], {\r\n        escapeDeactivates: false,\r\n        allowOutsideClick: true,\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      });\r\n    }\r\n\r\n    this.updateFocusTrap();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.initialMainSize) {\r\n      this.mainSize = this.initialMainSize;\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.updateFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.overlayFocustrap?.deactivate();\r\n    this.filterpanelFocustrap?.deactivate();\r\n\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n  }\r\n\r\n  private handleFilterpanelApply(mouseEvent: MouseEvent) {\r\n    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n  }\r\n\r\n  private handleFilterpanelCancel(mouseEvent: MouseEvent) {\r\n    this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host {...{ [this.mainSize]: true }}>\r\n        <div class=\"dso-map-panel\" ref={(element) => (this.mapPanel = element)}>\r\n          <div class=\"sizing-buttons\">\r\n            <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n              Breedte tekstpaneel: {this.sizeLabelMap[this.mainSize]}\r\n            </span>\r\n            <button type=\"button\" class=\"shrink\" disabled={this.mainSize === \"small\"} onClick={this.shrinkMain}>\r\n              <span class=\"sr-only\">Tekstpaneel smaller maken</span>\r\n              <dso-icon icon=\"chevron-left\"></dso-icon>\r\n            </button>\r\n            <button type=\"button\" class=\"expand\" disabled={this.mainSize === \"large\"} onClick={this.expandMain}>\r\n              <span class=\"sr-only\">Tekstpaneel breder maken</span>\r\n              <dso-icon icon=\"chevron-right\"></dso-icon>\r\n            </button>\r\n          </div>\r\n          <div class=\"main\">\r\n            <slot name=\"main\" />\r\n          </div>\r\n        </div>\r\n        <div\r\n          id=\"filterpanel\"\r\n          class=\"filterpanel\"\r\n          hidden={!this.filterpanelOpen || !this.filterpanelSlot}\r\n          ref={(element) => (this.filterpanel = element)}\r\n        >\r\n          <h1>Uw keuzes</h1>\r\n          <ViewerGridFilterpanelButtons\r\n            onApply={(e) => this.handleFilterpanelApply(e)}\r\n            onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n          />\r\n          <slot name=\"filterpanel\" />\r\n          <ViewerGridFilterpanelButtons\r\n            onApply={(e) => this.handleFilterpanelApply(e)}\r\n            onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n          />\r\n        </div>\r\n        <div class=\"map\">\r\n          <slot name=\"map\" />\r\n        </div>\r\n        <div hidden={!this.overlayOpen || !this.overlaySlot} class=\"dimscreen\"></div>\r\n        <div\r\n          class=\"overlay\"\r\n          hidden={!this.overlayOpen || !this.overlaySlot}\r\n          ref={(element) => (this.overlay = element)}\r\n        >\r\n          <button type=\"button\" class=\"overlay-close-button\" onClick={(e) => this.dsoCloseOverlay.emit(e)}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">sluiten</span>\r\n          </button>\r\n          <slot name=\"overlay\" />\r\n          {/* This button is needed for the `focus-trap` library to function correctly. It is never focused. */}\r\n          <button aria-hidden=\"true\" type=\"button\" class=\"overlay-close-button\" style={{ zIndex: \"-100\" }}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">sluiten</span>\r\n          </button>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/loader.js

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["dso-icon",[[1,"dso-icon",{"icon":[1]}]]],["dsot-document-component-demo",[[0,"dsot-document-component-demo",{"response":[32],"open":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[32],"hover":[32]}]]],["dso-header",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"returnFocus":[16],"ariaId":[32],"hasFooter":[32]}]]],["dso-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-table",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner",[[1,"dso-banner",{"status":[513]}]]],["dso-card",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-scrollable",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-tooltip",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]}]]],["dso-info_2",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-alert_5",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]}],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-annotation-output_3",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]], options);
+  return bootstrapLazy([["dso-icon",[[1,"dso-icon",{"icon":[1]}]]],["dsot-document-component-demo",[[0,"dsot-document-component-demo",{"response":[32],"open":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[32],"hover":[32]}]]],["dso-header",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"returnFocus":[16],"ariaId":[32],"hasFooter":[32]}]]],["dso-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-table",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner",[[1,"dso-banner",{"status":[513]}]]],["dso-card",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-scrollable",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-tooltip",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]}]]],["dso-info_2",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-alert_5",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]},[[4,"keydown","keyDownListener"]]],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-annotation-output_3",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]], options);
   });
 };
 

package/dist/types/components/accordion/accordion.interfaces.d.ts

@@ -1,27 +1,5 @@
-export type AccordionVariant = "default" | "compact" | "conclusion" | "neutral";
+export type AccordionVariant = "default" | "compact" | "conclusion" | "neutral" | "compact-black";
 export interface AccordionInternalState {
   variant?: AccordionVariant;
   reverseAlign?: boolean;
 }
-export interface AccordionSectionToggleClickEvent {
-  /**
-   * The original MouseEvent that triggered the click.
-   *
-   * In case the Section Handle is an <a> this event can be used to preventDefault() so the framework router is reponsible for navigating the user.
-   */
-  originalEvent?: MouseEvent;
-  /**
-   * The requested state. If the Accordion Section is closed, `open = true`.
-   */
-  open: boolean;
-}
-export interface AccordionSectionAnimationEndEvent {
-  /**
-   * Helper function to scroll the Accordion Section into view.
-   */
-  scrollIntoView(): void;
-  /**
-   * The state of the Accordion Section after animation.
-   */
-  open: boolean;
-}

package/dist/types/components/accordion/components/accordion-section.d.ts

@@ -1,6 +1,5 @@
 import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
-import { AccordionSectionAnimationEndEvent, AccordionSectionToggleClickEvent } from "../accordion.interfaces";
-import { AccordionHeading, AccordionSectionState } from "./accordion-section.interfaces";
+import { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./accordion-section.interfaces";
 export declare class AccordionSection implements ComponentInterface {
   private accordionState?;
   private sectionBody?;

package/dist/types/components/accordion/components/accordion-section.interfaces.d.ts

@@ -1,3 +1,25 @@
 export type AccordionSectionState = "success" | "info" | "warning" | "danger" | "error";
 export type AccordionHeading = "h2" | "h3" | "h4" | "h5";
 export declare const stateMap: Record<AccordionSectionState, string>;
+export interface AccordionSectionToggleClickEvent {
+  /**
+   * The original MouseEvent that triggered the click.
+   *
+   * In case the Section Handle is an <a> this event can be used to preventDefault() so the framework router is reponsible for navigating the user.
+   */
+  originalEvent?: MouseEvent;
+  /**
+   * The requested state. If the Accordion Section is closed, `open = true`.
+   */
+  open: boolean;
+}
+export interface AccordionSectionAnimationEndEvent {
+  /**
+   * Helper function to scroll the Accordion Section into view.
+   */
+  scrollIntoView(): void;
+  /**
+   * The state of the Accordion Section after animation.
+   */
+  open: boolean;
+}

package/dist/types/components/label/label.d.ts

@@ -1,7 +1,6 @@
 import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 export declare class Label implements ComponentInterface {
   private labelContent;
-  private keydownListenerActive;
   private mutationObserver?;
   private host;
   /**
@@ -16,6 +15,10 @@ export declare class Label implements ComponentInterface {
    * The status of this Label.
    */
   status?: "primary" | "info" | "success" | "warning" | "danger" | "error" | "bright" | "attention";
+  /**
+   * Emitted when the user activates the remove button.
+   */
+  dsoRemoveClick: EventEmitter<MouseEvent>;
   removeHover?: boolean;
   removeFocus?: boolean;
   /**
@@ -24,14 +27,11 @@ export declare class Label implements ComponentInterface {
   truncate?: boolean;
   textHover?: boolean;
   textFocus?: boolean;
-  isTruncated?: boolean;
-  labelText: string | null;
-  /**
-   * Emitted when the user activates the remove button.
-   */
-  dsoRemoveClick: EventEmitter<MouseEvent>;
+  isTruncated: boolean;
+  labelText: string;
+  watchRemovable(removable: boolean): void;
   watchTruncate(truncate: boolean): void;
-  watchTooltipActive(): void;
+  keyDownListener(event: KeyboardEvent): void;
   /**
    * @internal
    */
@@ -41,8 +41,8 @@ export declare class Label implements ComponentInterface {
   disconnectedCallback(): void;
   /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */
   private startMutationObserver;
+  private stopMutationObserver;
   private startTruncate;
   private stopTruncate;
-  private keyDownListener;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -5,8 +5,8 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AccordionInternalState, AccordionSectionAnimationEndEvent, AccordionSectionToggleClickEvent, AccordionVariant } from "./components/accordion/accordion.interfaces";
-import { AccordionHeading, AccordionSectionState } from "./components/accordion/components/accordion-section.interfaces";
+import { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
+import { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
 import { AnnotationButtonClickEvent } from "./components/annotation-button/annotation-button";
 import { AnnotationOutputCloseEvent } from "./components/annotation-output/annotation-output";
 import { Suggestion } from "./components/autosuggest/autosuggest.interfaces";
@@ -31,8 +31,8 @@ import { SelectableChangeEvent } from "./components/selectable/selectable.interf
 import { SlideToggleActiveEvent } from "./components/slide-toggle/slide-toggle.interfaces";
 import { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
 import { FilterpanelEvent, MainSize, ViewerGridChangeSizeEvent } from "./components/viewer-grid/viewer-grid.interfaces";
-export { AccordionInternalState, AccordionSectionAnimationEndEvent, AccordionSectionToggleClickEvent, AccordionVariant } from "./components/accordion/accordion.interfaces";
-export { AccordionHeading, AccordionSectionState } from "./components/accordion/components/accordion-section.interfaces";
+export { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
+export { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
 export { AnnotationButtonClickEvent } from "./components/annotation-button/annotation-button";
 export { AnnotationOutputCloseEvent } from "./components/annotation-output/annotation-output";
 export { Suggestion } from "./components/autosuggest/autosuggest.interfaces";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "56.0.0",
+  "version": "57.0.0",
   "description": "DSO Toolkit Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/components/index.js",
@@ -25,7 +25,7 @@
     "@types/animejs": "^3.1.7",
     "animejs": "3.2.1",
     "clsx": "^1.2.1",
-    "dso-toolkit": "^56.0.0",
+    "dso-toolkit": "^57.0.0",
     "escape-string-regexp": "^5.0.0",
     "focus-trap": "^7.4.3",
     "popper-max-size-modifier": "^0.2.0",

package/dist/dso-toolkit/p-1cc75e0b.entry.js

@@ -1,2 +0,0 @@
-import{h as n,r as t,c as e,H as o,a as s}from"./p-ce928197.js";import{c as i}from"./p-91963e3d.js";import"./p-5950644a.js";const r=({onApply:t,onCancel:e})=>n("div",{class:"filterpanel-buttons"},n("button",{type:"button",class:"cancel-button",onClick:e},n("span",null,"Annuleren")),n("button",{type:"button",class:"apply-button",onClick:t},n("span",null,"Toepassen"),n("dso-icon",{icon:"chevron-right"})));const a="*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  height: 100vh;\n  overflow: hidden;\n  position: relative;\n}\n\n:host([small]) .dso-map-panel {\n  flex-basis: 375px;\n  min-width: 0;\n  max-width: 375px;\n}\n@media screen and (max-width: 375px) {\n  :host([small]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 0;\n    transition: none;\n  }\n}\n\n:host([medium]) .dso-map-panel {\n  flex-basis: 624px;\n  min-width: 375px;\n  max-width: 624px;\n}\n@media screen and (max-width: 624px) {\n  :host([medium]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 375px;\n    transition: none;\n  }\n}\n\n:host([large]) .dso-map-panel {\n  flex-basis: 60%;\n  min-width: 768px;\n  max-width: 1024px;\n}\n@media screen and (max-width: 768px) {\n  :host([large]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 768px;\n    transition: none;\n  }\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n  outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n  outline: 0;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n  color: #173521;\n}\n.shrink.btn-align,\n.expand.btn-align,\n.overlay-close-button.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.shrink svg.di.di-chevron-down + span:not(.sr-only),\n.shrink svg.di.di-chevron-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-chevron-down,\n.shrink span:not(.sr-only) + svg.di.di-chevron-up,\n.expand svg.di.di-chevron-down + span:not(.sr-only),\n.expand svg.di.di-chevron-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-chevron-down,\n.expand span:not(.sr-only) + svg.di.di-chevron-up,\n.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),\n.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),\n.shrink svg.di.di-angle-down + span:not(.sr-only),\n.shrink svg.di.di-angle-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-angle-down,\n.shrink span:not(.sr-only) + svg.di.di-angle-up,\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],\n.expand dso-icon[icon=chevron-left] + span:not(.sr-only),\n.expand dso-icon[icon=chevron-right] + span:not(.sr-only),\n.expand svg.di.di-angle-down + span:not(.sr-only),\n.expand svg.di.di-angle-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-angle-down,\n.expand span:not(.sr-only) + svg.di.di-angle-up,\n.expand span:not(.sr-only) + dso-icon[icon=chevron-left],\n.expand span:not(.sr-only) + dso-icon[icon=chevron-right],\n.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),\n.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n  vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n  cursor: pointer;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  display: none;\n}\n\n.overlay-close-button {\n  position: absolute;\n  top: 8px;\n  right: 16px;\n}\n\n.dso-map-panel {\n  background-color: #fff;\n  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  flex-shrink: 0;\n  flex-grow: 0;\n  padding-right: 8px;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;\n  z-index: 100;\n}\n.dso-map-panel .dso-filterblok-address {\n  font-weight: bold;\n  margin: 8px 0;\n}\n.dso-map-panel .main {\n  height: 100%;\n  overflow-y: scroll;\n  padding: 0 16px 8px;\n}\n\n.sizing-buttons {\n  left: calc(100% + 1px);\n  overflow-x: hidden;\n  padding: 0 4px 4px 0;\n  position: absolute;\n  top: 16px;\n  transition: left 200ms ease-in;\n  width: 44px;\n  z-index: -1;\n}\n.sizing-buttons button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-bottom-right-radius: 4px;\n  border-top-right-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.sizing-buttons button:active {\n  outline: 0;\n}\n.sizing-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.sizing-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.sizing-buttons button.btn-sm {\n  line-height: 1rem;\n}\n.sizing-buttons button.btn-sm dso-icon,\n.sizing-buttons button.btn-sm svg.di, .sizing-buttons button.btn-sm.extern::after, .sizing-buttons button.btn-sm.download::after, .sizing-buttons button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.sizing-buttons button:hover dso-icon {\n  color: #fff;\n}\n\n.map {\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.filterpanel,\n.overlay {\n  background-color: #fff;\n  height: 100%;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 101;\n}\n\n.filterpanel {\n  box-shadow: 2px 0 5px #666;\n  padding: 8px 16px;\n  left: 0;\n  max-width: 896px;\n  width: calc(100vw - 40px);\n}\n@media screen and (max-width: 768px) {\n  .filterpanel {\n    width: 100vw;\n  }\n  .filterpanel::before {\n    display: none !important;\n  }\n}\n.filterpanel h1 {\n  color: #275937;\n  margin-block-end: 16px;\n  margin-block-start: 24px;\n  font-size: 2rem;\n  font-weight: 700;\n}\n.filterpanel::before {\n  content: \"\";\n  display: block;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 896px;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 936px) {\n  .filterpanel::before {\n    left: auto;\n    width: 40px;\n  }\n}\n\n.overlay {\n  box-shadow: -2px 0 5px #666;\n  padding: 40px 16px 8px;\n  right: 0;\n  width: 624px;\n}\n@media screen and (max-width: 624px) {\n  .overlay {\n    width: 100vw;\n  }\n}\n\n.dimscreen {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 624px;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 102;\n}\n\n.filterpanel-buttons {\n  text-align: right;\n}\n.filterpanel-buttons .cancel-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .cancel-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.btn-sm {\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.btn-sm dso-icon,\n.filterpanel-buttons .cancel-button.btn-sm svg.di, .filterpanel-buttons .cancel-button.btn-sm.extern::after, .filterpanel-buttons .cancel-button.btn-sm.download::after, .filterpanel-buttons .cancel-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .apply-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.btn-sm {\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.btn-sm dso-icon,\n.filterpanel-buttons .apply-button.btn-sm svg.di, .filterpanel-buttons .apply-button.btn-sm.extern::after, .filterpanel-buttons .apply-button.btn-sm.download::after, .filterpanel-buttons .apply-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n  margin-left: 16px;\n}";const l=class{constructor(n){t(this,n);this.dsoCloseOverlay=e(this,"dsoCloseOverlay",7);this.dsoFilterpanelCancel=e(this,"dsoFilterpanelCancel",7);this.dsoFilterpanelApply=e(this,"dsoFilterpanelApply",7);this.dsoMainSizeChange=e(this,"dsoMainSizeChange",7);this.sizeLabelMap={small:"smal",medium:"middel",large:"breed"};this.filterpanelSlot=null;this.overlaySlot=null;this.shrinkMain=()=>{this.mainSize=this.mainSize==="large"?"medium":"small"};this.expandMain=()=>{this.mainSize=this.mainSize==="small"?"medium":"large"};this.keyDownListener=n=>{if(n.key!=="Escape"){return}this.dsoCloseOverlay.emit(n)};this.filterpanelOpen=false;this.overlayOpen=false;this.initialMainSize=undefined;this.mainSize="large"}mainSizeWatcher(n,t){var e;this.dsoMainSizeChange.emit({stage:"start",previousSize:t,currentSize:n});(e=this.mapPanel)===null||e===void 0?void 0:e.addEventListener("transitionend",(e=>{if(e.propertyName==="flex-basis"){this.dsoMainSizeChange.emit({stage:"end",previousSize:t,currentSize:n})}}),{once:true})}updateFocusTrap(){var n,t;if(this.filterpanelOpen&&this.overlayOpen){return}if(this.filterpanelFocustrap){if(this.filterpanelOpen&&!((n=this.filterpanel)===null||n===void 0?void 0:n.hidden)){this.filterpanelFocustrap.activate();this.host.addEventListener("keydown",this.keyDownListener)}else{this.filterpanelFocustrap.deactivate();this.host.removeEventListener("keydown",this.keyDownListener)}}if(this.overlayFocustrap){if(this.overlayOpen&&!((t=this.overlay)===null||t===void 0?void 0:t.hidden)){this.overlayFocustrap.activate();this.host.addEventListener("keydown",this.keyDownListener)}else{this.overlayFocustrap.deactivate();this.host.removeEventListener("keydown",this.keyDownListener)}}}connectedCallback(){this.filterpanelSlot=this.host.querySelector("div[slot='filterpanel']");this.overlaySlot=this.host.querySelector("div[slot='overlay']")}componentDidLoad(){if(this.filterpanel&&this.filterpanelSlot){this.filterpanelFocustrap=i([this.filterpanel,this.filterpanelSlot],{escapeDeactivates:false,allowOutsideClick:true,tabbableOptions:{getShadowRoot:true}})}if(this.overlay&&this.overlaySlot){this.overlayFocustrap=i([this.overlay,this.overlaySlot],{escapeDeactivates:false,allowOutsideClick:true,tabbableOptions:{getShadowRoot:true}})}this.updateFocusTrap()}componentWillLoad(){if(this.initialMainSize){this.mainSize=this.initialMainSize}}componentDidUpdate(){this.updateFocusTrap()}disconnectedCallback(){var n,t;(n=this.overlayFocustrap)===null||n===void 0?void 0:n.deactivate();(t=this.filterpanelFocustrap)===null||t===void 0?void 0:t.deactivate();this.host.removeEventListener("keydown",this.keyDownListener)}handleFilterpanelApply(n){this.dsoFilterpanelApply.emit({originalEvent:n})}handleFilterpanelCancel(n){this.dsoFilterpanelCancel.emit({originalEvent:n})}render(){return n(o,Object.assign({},{[this.mainSize]:true}),n("div",{class:"dso-map-panel",ref:n=>this.mapPanel=n},n("div",{class:"sizing-buttons"},n("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"breedte tekstpaneel: ",this.sizeLabelMap[this.mainSize]),n("button",{type:"button",class:"shrink",disabled:this.mainSize==="small",onClick:this.shrinkMain},n("span",{class:"sr-only"},"Kaartpaneel smaller maken"),n("dso-icon",{icon:"chevron-left"})),n("button",{type:"button",class:"expand",disabled:this.mainSize==="large",onClick:this.expandMain},n("span",{class:"sr-only"},"Kaartpaneel breder maken"),n("dso-icon",{icon:"chevron-right"}))),n("div",{class:"main"},n("slot",{name:"main"}))),n("div",{id:"filterpanel",class:"filterpanel",hidden:!this.filterpanelOpen||!this.filterpanelSlot,ref:n=>this.filterpanel=n},n("h1",null,"Uw keuzes"),n(r,{onApply:n=>this.handleFilterpanelApply(n),onCancel:n=>this.handleFilterpanelCancel(n)}),n("slot",{name:"filterpanel"}),n(r,{onApply:n=>this.handleFilterpanelApply(n),onCancel:n=>this.handleFilterpanelCancel(n)})),n("div",{class:"map"},n("slot",{name:"map"})),n("div",{hidden:!this.overlayOpen||!this.overlaySlot,class:"dimscreen"}),n("div",{class:"overlay",hidden:!this.overlayOpen||!this.overlaySlot,ref:n=>this.overlay=n},n("button",{type:"button",class:"overlay-close-button",onClick:n=>this.dsoCloseOverlay.emit(n)},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"sluiten")),n("slot",{name:"overlay"}),n("button",{"aria-hidden":"true",type:"button",class:"overlay-close-button",style:{zIndex:"-100"}},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"sluiten"))))}get host(){return s(this)}static get watchers(){return{mainSize:["mainSizeWatcher"]}}};l.style=a;export{l as dso_viewer_grid};
-//# sourceMappingURL=p-1cc75e0b.entry.js.map