@dso-toolkit/core 57.0.0 → 58.0.0

package/dist/dso-toolkit/p-918bcdbe.entry.js

@@ -0,0 +1,2 @@
+import{h as n,r as t,c as o,H as e,a as s}from"./p-1a1a43fd.js";import{c as i}from"./p-6a1980b4.js";const a=["main","map"];const r=({onApply:t,onCancel:o})=>n("div",{class:"filterpanel-buttons"},n("button",{type:"button",class:"cancel-button",onClick:o},n("span",null,"Annuleren")),n("button",{type:"button",class:"apply-button",onClick:t},n("span",null,"Toepassen"),n("dso-icon",{icon:"chevron-right"})));const l=({ref:t,onApply:o,onCancel:e})=>n("dialog",{id:"filterpanel",class:"filterpanel",ref:t,onCancel:n=>{n.preventDefault();e(n)}},n("h1",null,"Uw keuzes"),n(r,{onApply:o,onCancel:e}),n("slot",{name:"filterpanel"}),n(r,{onApply:o,onCancel:e}));const d=({ref:t,tabView:o,mainSize:e,shrinkMain:s,expandMain:i})=>{const a={small:"smal",medium:"middel",large:"breed"};return n("div",{class:"dso-main-panel",ref:t},!o&&n("div",{class:"sizing-buttons"},n("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte hoofdpaneel: ",a[e]),n("button",{type:"button",class:"shrink",disabled:e==="small",onClick:s},n("span",{class:"sr-only"},"Hoofdpaneel smaller maken"),n("dso-icon",{icon:"chevron-left"})),n("button",{type:"button",class:"expand",disabled:e==="large",onClick:i},n("span",{class:"sr-only"},"Hoofdpaneel breder maken"),n("dso-icon",{icon:"chevron-right"}))),n("div",{class:"main"},n("slot",{name:"main"})))};const p=({ref:t,dsoCloseOverlay:o})=>n("dialog",{class:"overlay",ref:t,onCancel:n=>{n.preventDefault();o(n)}},n("button",{type:"button",class:"overlay-close-button",onClick:o},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"sluiten")),n("slot",{name:"overlay"}));const c="*,\n*::after,\n*::before {\n  box-sizing: border-box;\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-main-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\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-main-panel .dso-filterblok-address {\n  font-weight: bold;\n  margin: 8px 0;\n}\n.dso-main-panel .main {\n  height: 100%;\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  position: relative;\n}\n\n.filterpanel,\n.overlay {\n  background-color: #fff;\n  border: 0;\n  height: 100%;\n  margin-block: 0;\n  max-height: 100vh;\n  overflow-y: auto;\n  z-index: 101;\n}\n\n.filterpanel {\n  padding: 8px 16px;\n  left: 0;\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\n.overlay {\n  padding: 40px 16px 8px;\n  right: 0;\n  width: 624px;\n}\n.overlay::backdrop {\n  background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 624px) {\n  .overlay {\n    width: 100vw;\n  }\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}\n\n@media screen and (min-width: 808px) {\n  :host {\n    display: flex;\n    height: 100vh;\n    overflow: hidden;\n    position: relative;\n  }\n  :host([small]) .dso-main-panel {\n    flex-basis: 375px;\n    min-width: 0;\n    max-width: 375px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 375px) {\n  :host([small]) .dso-main-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 0;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([medium]) .dso-main-panel {\n    flex-basis: 624px;\n    min-width: 375px;\n    max-width: 624px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 624px) {\n  :host([medium]) .dso-main-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 375px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([large]) .dso-main-panel {\n    flex-basis: 60%;\n    min-width: 768px;\n    max-width: 1024px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 768px) {\n  :host([large]) .dso-main-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 768px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  .dso-main-panel {\n    box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n    padding-right: 8px;\n  }\n  .dso-main-panel .main {\n    overflow-y: scroll;\n  }\n}\n@media screen and (min-width: 808px) {\n  .filterpanel {\n    box-shadow: 2px 0 5px #666;\n    margin-inline: 0 auto;\n    max-width: 896px;\n    width: calc(100vw - 40px);\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}\n@media screen and (min-width: 808px) and (max-width: 936px) {\n  .filterpanel::before {\n    left: auto;\n    width: 40px;\n  }\n}\n@media screen and (min-width: 808px) {\n  .overlay {\n    box-shadow: -2px 0 5px #666;\n    margin-inline: auto 0;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar {\n    min-height: 32px;\n  }\n  .dso-navbar .dso-navbar-header {\n    float: left;\n  }\n  .dso-navbar .dso-navbar-toggle {\n    border-radius: 4px;\n    min-width: auto;\n    padding: 5px 0;\n  }\n  .dso-navbar .dso-navbar-toggle dso-icon,\n  .dso-navbar .dso-navbar-toggle svg.di {\n    margin-left: 8px;\n    margin-right: 8px;\n  }\n}\n@media screen and (max-width: 807.99px) and (min-width: 992px) {\n  .dso-navbar .dso-navbar-toggle {\n    display: none;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-nav {\n    list-style: none;\n    margin-bottom: 0;\n    padding-left: 0;\n  }\n  .dso-nav > li > a,\n  .dso-nav > li > button {\n    display: block;\n  }\n  .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,\n  .dso-nav > li > button,\n  .dso-nav > li > button:hover,\n  .dso-nav > li > button:focus,\n  .dso-nav > li > button:visited {\n    color: #275937;\n  }\n  .dso-nav > li.dso-active > a,\n  .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,\n  .dso-nav > li.is-active > button {\n    border-bottom: 4px solid #8b4a6a;\n    font-weight: bold;\n  }\n  .dso-nav.dso-nav-main > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    text-decoration: none;\n    font-size: 1.25em;\n    line-height: 1;\n    margin-top: 8px;\n    padding: 8px 16px 7px;\n  }\n  .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus, .dso-nav.dso-nav-main > li > a:active,\n  .dso-nav.dso-nav-main > li > button:hover,\n  .dso-nav.dso-nav-main > li > button:focus,\n  .dso-nav.dso-nav-main > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-sub > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    text-decoration: none;\n    font-size: 1rem;\n    margin-top: 4px;\n    padding: 4px 8px 3px;\n  }\n  .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus, .dso-nav.dso-nav-sub > li > a:active,\n  .dso-nav.dso-nav-sub > li > button:hover,\n  .dso-nav.dso-nav-sub > li > button:focus,\n  .dso-nav.dso-nav-sub > li > button:active {\n    text-decoration: underline;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar {\n    padding-inline: 16px;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-nav {\n    border-bottom: 1px solid #ccc;\n    display: flex;\n    gap: 16px;\n    margin-block-start: 0;\n    width: calc(100vw - 32px);\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-tertiary {\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    font-weight: 300;\n  }\n  .dso-tertiary:focus, .dso-tertiary:focus-visible {\n    outline-offset: 2px;\n  }\n  .dso-tertiary:active {\n    outline: 0;\n  }\n  .dso-tertiary[disabled] {\n    color: #afcf9d;\n  }\n  .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n    color: #39870c;\n  }\n  .dso-tertiary:not([disabled]):hover {\n    color: #275937;\n    text-decoration: underline;\n    text-underline-position: under;\n  }\n  .dso-tertiary:not([disabled]):active {\n    color: #173521;\n  }\n  .dso-tertiary.dso-align {\n    line-height: calc(1.5em - 1px);\n    padding: 11px 0;\n    position: relative;\n  }\n  .dso-tertiary.dso-truncate {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .dso-tertiary.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  .dso-tertiary.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  .dso-tertiary dso-icon + span:not(.sr-only),\n  .dso-tertiary svg.di + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + dso-icon,\n  .dso-tertiary span:not(.sr-only) + svg.di {\n    margin-left: 8px;\n  }\n  .dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n    margin-left: 4px;\n  }\n  .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n  .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n    margin-left: 0;\n  }\n  .dso-tertiary dso-icon,\n  .dso-tertiary svg.di,\n  .dso-tertiary span {\n    vertical-align: middle;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .filterpanel,\n  .overlay {\n    margin-inline: 0;\n    max-width: 100vw;\n    top: 0;\n    width: 100vw;\n  }\n}";const f=768+40;const h=class{constructor(n){t(this,n);this.dsoCloseOverlay=o(this,"dsoCloseOverlay",7);this.dsoFilterpanelCancel=o(this,"dsoFilterpanelCancel",7);this.dsoFilterpanelApply=o(this,"dsoFilterpanelApply",7);this.dsoMainSizeChange=o(this,"dsoMainSizeChange",7);this.mediaCondition=`(min-width: ${f}px)`;this.tabLabelMap={main:"Hoofdpaneel",map:"Kaart"};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.changeListener=n=>this.tabView=!n.matches;this.filterpanelOpen=false;this.overlayOpen=false;this.initialMainSize=undefined;this.mainSize="large";this.tabView=window.innerWidth<f;this.activeTab="main"}mainSizeWatcher(n,t){var o;this.dsoMainSizeChange.emit({stage:"start",previousSize:t,currentSize:n});(o=this.mainPanel)===null||o===void 0?void 0:o.addEventListener("transitionend",(o=>{if(o.propertyName==="flex-basis"){this.dsoMainSizeChange.emit({stage:"end",previousSize:t,currentSize:n})}}),{once:true})}filterpanelOpenWatcher(n){var t,o;if(!this.filterpanelSlot){console.warn("slot 'filterpanel' has not been set")}if(n){(t=this.filterpanel)===null||t===void 0?void 0:t.showModal()}else{(o=this.filterpanel)===null||o===void 0?void 0:o.close()}}overlayOpenWatcher(n){var t,o;if(!this.overlaySlot){console.warn("slot 'overlay' has not been set")}if(n){(t=this.overlay)===null||t===void 0?void 0:t.showModal()}else{(o=this.overlay)===null||o===void 0?void 0:o.close()}}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener);this.filterpanelSlot=this.host.querySelector("div[slot='filterpanel']");this.overlaySlot=this.host.querySelector("div[slot='overlay']")}componentDidLoad(){var n,t;if(this.filterpanelOpen&&this.filterpanelSlot){(n=this.filterpanel)===null||n===void 0?void 0:n.showModal()}if(this.overlayOpen&&this.overlaySlot){(t=this.overlay)===null||t===void 0?void 0:t.showModal()}}componentWillLoad(){if(this.initialMainSize){this.mainSize=this.initialMainSize}}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener)}handleFilterpanelApply(n){this.dsoFilterpanelApply.emit({originalEvent:n})}handleFilterpanelCancel(n){this.dsoFilterpanelCancel.emit({originalEvent:n})}render(){return n(e,Object.assign({},{[this.mainSize]:true}),this.tabView&&n("nav",{class:"dso-navbar"},n("ul",{class:"dso-nav dso-nav-sub"},a.map((t=>n("li",{key:t,class:i({"dso-active":this.activeTab===t})},n("button",{type:"button",class:"dso-tertiary",onClick:()=>this.activeTab=t},this.tabLabelMap[t])))))),(!this.tabView||this.tabView&&this.activeTab==="main")&&n(d,{ref:n=>this.mainPanel=n,tabView:this.tabView,mainSize:this.mainSize,shrinkMain:this.shrinkMain,expandMain:this.expandMain}),n(l,{ref:n=>this.filterpanel=n,onApply:n=>this.handleFilterpanelApply(n),onCancel:n=>this.handleFilterpanelCancel(n)}),(!this.tabView||this.tabView&&this.activeTab==="map")&&n("div",{class:"map"},n("slot",{name:"map"})),n(p,{ref:n=>this.overlay=n,dsoCloseOverlay:n=>this.dsoCloseOverlay.emit({originalEvent:n})}))}get host(){return s(this)}static get watchers(){return{mainSize:["mainSizeWatcher"],filterpanelOpen:["filterpanelOpenWatcher"],overlayOpen:["overlayOpenWatcher"]}}};h.style=c;export{h as dso_viewer_grid};
+//# sourceMappingURL=p-918bcdbe.entry.js.map

package/dist/dso-toolkit/p-918bcdbe.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tabs","ViewerGridFilterpanelButtons","onApply","onCancel","h","class","type","onClick","icon","Filterpanel","ref","id","e","preventDefault","name","MainPanel","tabView","mainSize","shrinkMain","expandMain","sizeLabelMap","small","medium","large","disabled","Overlay","dsoCloseOverlay","viewerGridCss","tabViewWidth","ViewerGrid","this","mediaCondition","tabLabelMap","main","map","filterpanelSlot","overlaySlot","changeListener","largeScreen","matches","window","innerWidth","mainSizeWatcher","currentSize","previousSize","dsoMainSizeChange","emit","stage","_a","mainPanel","addEventListener","propertyName","once","filterpanelOpenWatcher","open","console","warn","filterpanel","showModal","_b","close","overlayOpenWatcher","overlay","connectedCallback","matchMedia","host","querySelector","componentDidLoad","filterpanelOpen","overlayOpen","componentWillLoad","initialMainSize","disconnectedCallback","removeEventListener","handleFilterpanelApply","mouseEvent","dsoFilterpanelApply","originalEvent","handleFilterpanelCancel","dsoFilterpanelCancel","render","Host","Object","assign","tab","key","clsx","activeTab","element"],"sources":["./src/components/viewer-grid/viewer-grid.interfaces.ts","./src/components/viewer-grid/components/viewer-grid-filterpanel-buttons.tsx","./src/components/viewer-grid/components/filterpanel.tsx","./src/components/viewer-grid/components/main-panel.tsx","./src/components/viewer-grid/components/overlay.tsx","./src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","./src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n  /**\r\n   * Indicates whether it's before or after the animation\r\n   */\r\n  stage: \"start\" | \"end\";\r\n  previousSize: MainSize;\r\n  currentSize: MainSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelCancelEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelApplyEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport type MainSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type LabelSizeMap = { [key in MainSize]: string };\r\n\r\nexport const tabs = [\"main\", \"map\"] as const;\r\n\r\nexport type Tabs = (typeof tabs)[number];\r\n\r\nexport type TabLabelMap = { [key in Tabs]: string };\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelButtonsProps {\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelButtonsProps> = ({\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","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Filterpanel: FunctionalComponent<ViewerGridFilterpanelProps> = ({ ref, onApply, onCancel }) => (\r\n  <dialog\r\n    id=\"filterpanel\"\r\n    class=\"filterpanel\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      onCancel(e);\r\n    }}\r\n  >\r\n    <h1>Uw keuzes</h1>\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n    <slot name=\"filterpanel\" />\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n  </dialog>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { LabelSizeMap, MainSize } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n  ref: ((element: HTMLDivElement | undefined) => void) | undefined;\r\n  tabView: boolean;\r\n  mainSize: MainSize;\r\n  shrinkMain: () => void;\r\n  expandMain: () => void;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n  ref,\r\n  tabView,\r\n  mainSize,\r\n  shrinkMain,\r\n  expandMain,\r\n}) => {\r\n  const sizeLabelMap: LabelSizeMap = {\r\n    small: \"smal\",\r\n    medium: \"middel\",\r\n    large: \"breed\",\r\n  };\r\n\r\n  return (\r\n    <div class=\"dso-main-panel\" ref={ref}>\r\n      {!tabView && (\r\n        <div class=\"sizing-buttons\">\r\n          <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n            Breedte hoofdpaneel: {sizeLabelMap[mainSize]}\r\n          </span>\r\n          <button type=\"button\" class=\"shrink\" disabled={mainSize === \"small\"} onClick={shrinkMain}>\r\n            <span class=\"sr-only\">Hoofdpaneel smaller maken</span>\r\n            <dso-icon icon=\"chevron-left\"></dso-icon>\r\n          </button>\r\n          <button type=\"button\" class=\"expand\" disabled={mainSize === \"large\"} onClick={expandMain}>\r\n            <span class=\"sr-only\">Hoofdpaneel breder maken</span>\r\n            <dso-icon icon=\"chevron-right\"></dso-icon>\r\n          </button>\r\n        </div>\r\n      )}\r\n      <div class=\"main\">\r\n        <slot name=\"main\" />\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridOverlayProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  dsoCloseOverlay: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Overlay: FunctionalComponent<ViewerGridOverlayProps> = ({ ref, dsoCloseOverlay }) => (\r\n  <dialog\r\n    class=\"overlay\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      dsoCloseOverlay(e);\r\n    }}\r\n  >\r\n    <button type=\"button\" class=\"overlay-close-button\" onClick={dsoCloseOverlay}>\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  </dialog>\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/media-query-breakpoints\";\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@use \"~dso-toolkit/src/components/navbar\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\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-main-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\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-main-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    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  position: relative;\r\n}\r\n\r\n.filterpanel,\r\n.overlay {\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  height: 100%;\r\n  margin-block: 0;\r\n  max-height: 100vh;\r\n  overflow-y: auto;\r\n  z-index: zindex.$viewer-grid-main-panel + 1;\r\n}\r\n\r\n.filterpanel {\r\n  padding: units.$u1 css-grid.$grid-gutter-width * 0.5;\r\n  left: 0;\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\r\n.overlay {\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  &::backdrop {\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n  }\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.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\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-sm-min + units.$u5}) {\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-main-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-main-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-main-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\n  .dso-main-panel {\r\n    box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n    padding-right: units.$u1;\r\n\r\n    .main {\r\n      overflow-y: scroll;\r\n    }\r\n  }\r\n\r\n  .filterpanel {\r\n    box-shadow: 2px 0 5px colors.$grijs-60;\r\n    margin-inline: 0 auto;\r\n    max-width: core-viewer-grid-variables.$filterpanel-max-width;\r\n    width: calc(100vw - 40px);\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    margin-inline: auto 0;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: #{media-query-breakpoints.$screen-xs-max + units.$u5 + 0.99}) {\r\n  @include navbar.root();\r\n\r\n  .dso-navbar {\r\n    padding-inline: units.$u2;\r\n  }\r\n\r\n  .dso-nav {\r\n    @include navbar.nav-border();\r\n\r\n    display: flex;\r\n    gap: units.$u2;\r\n    margin-block-start: 0;\r\n    width: calc(100vw - units.$u4);\r\n  }\r\n\r\n  .dso-tertiary {\r\n    @include button.tertiary($modifiers: false);\r\n\r\n    font-weight: 300;\r\n  }\r\n\r\n  .filterpanel,\r\n  .overlay {\r\n    margin-inline: 0;\r\n    max-width: 100vw;\r\n    top: 0;\r\n    width: 100vw;\r\n  }\r\n}\r\n","import { h, Component, Prop, State, Host, Element, Event, EventEmitter, Watch } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport {\r\n  MainSize,\r\n  TabLabelMap,\r\n  Tabs,\r\n  ViewerGridChangeSizeEvent,\r\n  ViewerGridCloseOverlayEvent,\r\n  ViewerGridFilterpanelApplyEvent,\r\n  ViewerGridFilterpanelCancelEvent,\r\n  tabs,\r\n} from \"./viewer-grid.interfaces\";\r\nimport { Filterpanel, MainPanel, Overlay } from \"./components\";\r\n\r\nconst tabViewWidth = 768 + 40;\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 mediaCondition = `(min-width: ${tabViewWidth}px)`;\r\n\r\n  private tabLabelMap: TabLabelMap = {\r\n    main: \"Hoofdpaneel\",\r\n    map: \"Kaart\",\r\n  };\r\n\r\n  private mainPanel?: 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  @State()\r\n  tabView = window.innerWidth < tabViewWidth;\r\n\r\n  @State()\r\n  activeTab: Tabs = \"main\";\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n  /**\r\n   * Emitted when user cancels filterpanel.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelCancel!: EventEmitter<ViewerGridFilterpanelCancelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelApply!: EventEmitter<ViewerGridFilterpanelApplyEvent>;\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: HTMLDialogElement | undefined;\r\n\r\n  private filterpanelSlot: HTMLElement | null = null;\r\n\r\n  private overlay: HTMLDialogElement | undefined;\r\n\r\n  private overlaySlot: HTMLDivElement | null = null;\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.mainPanel?.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  @Watch(\"filterpanelOpen\")\r\n  filterpanelOpenWatcher(open: boolean) {\r\n    if (!this.filterpanelSlot) {\r\n      console.warn(\"slot 'filterpanel' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.filterpanel?.showModal();\r\n    } else {\r\n      this.filterpanel?.close();\r\n    }\r\n  }\r\n\r\n  @Watch(\"overlayOpen\")\r\n  overlayOpenWatcher(open: boolean) {\r\n    if (!this.overlaySlot) {\r\n      console.warn(\"slot 'overlay' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.overlay?.showModal();\r\n    } else {\r\n      this.overlay?.close();\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 changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n  connectedCallback() {\r\n    window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n\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.filterpanelOpen && this.filterpanelSlot) {\r\n      this.filterpanel?.showModal();\r\n    }\r\n\r\n    if (this.overlayOpen && this.overlaySlot) {\r\n      this.overlay?.showModal();\r\n    }\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  disconnectedCallback() {\r\n    window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n  }\r\n\r\n  private handleFilterpanelApply(mouseEvent: MouseEvent | Event) {\r\n    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n  }\r\n\r\n  private handleFilterpanelCancel(mouseEvent: MouseEvent | Event) {\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        {this.tabView && (\r\n          <nav class=\"dso-navbar\">\r\n            <ul class=\"dso-nav dso-nav-sub\">\r\n              {tabs.map((tab) => (\r\n                <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n                  <button type=\"button\" class=\"dso-tertiary\" onClick={() => (this.activeTab = tab)}>\r\n                    {this.tabLabelMap[tab]}\r\n                  </button>\r\n                </li>\r\n              ))}\r\n            </ul>\r\n          </nav>\r\n        )}\r\n        {(!this.tabView || (this.tabView && this.activeTab === \"main\")) && (\r\n          <MainPanel\r\n            ref={(element: HTMLDivElement | undefined) => (this.mainPanel = element)}\r\n            tabView={this.tabView}\r\n            mainSize={this.mainSize}\r\n            shrinkMain={this.shrinkMain}\r\n            expandMain={this.expandMain}\r\n          ></MainPanel>\r\n        )}\r\n        <Filterpanel\r\n          ref={(element) => (this.filterpanel = element)}\r\n          onApply={(e) => this.handleFilterpanelApply(e)}\r\n          onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n        ></Filterpanel>\r\n        {(!this.tabView || (this.tabView && this.activeTab === \"map\")) && (\r\n          <div class=\"map\">\r\n            <slot name=\"map\" />\r\n          </div>\r\n        )}\r\n        <Overlay\r\n          ref={(element) => (this.overlay = element)}\r\n          dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n        ></Overlay>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"oGAyBO,MAAMA,EAAO,CAAC,OAAQ,OClBtB,MAAMC,EAAuF,EAClGC,UACAC,cAEAC,EAAA,OAAKC,MAAM,uBACTD,EAAA,UAAQE,KAAK,SAASD,MAAM,gBAAgBE,QAASJ,GACnDC,EAAA,0BAEFA,EAAA,UAAQE,KAAK,SAASD,MAAM,eAAeE,QAASL,GAClDE,EAAA,yBACAA,EAAA,YAAUI,KAAK,oBCPd,MAAMC,EAA+D,EAAGC,MAAKR,UAASC,cAC3FC,EAAA,UACEO,GAAG,cACHN,MAAM,cACNK,IAAKA,EACLP,SAAWS,IACTA,EAAEC,iBAEFV,EAASS,EAAE,GAGbR,EAAA,uBACAA,EAACH,EAA4B,CAACC,QAASA,EAASC,SAAUA,IAC1DC,EAAA,QAAMU,KAAK,gBACXV,EAACH,EAA4B,CAACC,QAASA,EAASC,SAAUA,KCbvD,MAAMY,EAA2D,EACtEL,MACAM,UACAC,WACAC,aACAC,iBAEA,MAAMC,EAA6B,CACjCC,MAAO,OACPC,OAAQ,SACRC,MAAO,SAGT,OACEnB,EAAA,OAAKC,MAAM,iBAAiBK,IAAKA,IAC7BM,GACAZ,EAAA,OAAKC,MAAM,kBACTD,EAAA,QAAMC,MAAM,UAAS,YAAW,SAAQ,cAAa,Q,wBAC7Be,EAAaH,IAErCb,EAAA,UAAQE,KAAK,SAASD,MAAM,SAASmB,SAAUP,IAAa,QAASV,QAASW,GAC5Ed,EAAA,QAAMC,MAAM,WAAS,6BACrBD,EAAA,YAAUI,KAAK,kBAEjBJ,EAAA,UAAQE,KAAK,SAASD,MAAM,SAASmB,SAAUP,IAAa,QAASV,QAASY,GAC5Ef,EAAA,QAAMC,MAAM,WAAS,4BACrBD,EAAA,YAAUI,KAAK,oBAIrBJ,EAAA,OAAKC,MAAM,QACTD,EAAA,QAAMU,KAAK,UAET,ECrCH,MAAMW,EAAuD,EAAGf,MAAKgB,qBAC1EtB,EAAA,UACEC,MAAM,UACNK,IAAKA,EACLP,SAAWS,IACTA,EAAEC,iBAEFa,EAAgBd,EAAE,GAGpBR,EAAA,UAAQE,KAAK,SAASD,MAAM,uBAAuBE,QAASmB,GAC1DtB,EAAA,YAAUI,KAAK,UACfJ,EAAA,QAAMC,MAAM,WAAS,YAEvBD,EAAA,QAAMU,KAAK,aCrBf,MAAMa,EAAgB,g4nCCetB,MAAMC,EAAe,IAAM,G,MAOdC,EAAU,M,mPACbC,KAAAC,eAAiB,eAAeH,OAEhCE,KAAAE,YAA2B,CACjCC,KAAM,cACNC,IAAK,SA+DCJ,KAAAK,gBAAsC,KAItCL,KAAAM,YAAqC,KAmDrCN,KAAAZ,WAAa,KACnBY,KAAKb,SAAWa,KAAKb,WAAa,QAAU,SAAW,OAAO,EAGxDa,KAAAX,WAAa,KACnBW,KAAKb,SAAWa,KAAKb,WAAa,QAAU,SAAW,OAAO,EAGxDa,KAAAO,eAAkBC,GAAsCR,KAAKd,SAAWsB,EAAYC,Q,qBArH1E,M,iBAMJ,M,6CAWO,Q,aAGXC,OAAOC,WAAab,E,eAGZ,M,CAsClBc,gBAAgBC,EAAuBC,G,MACrCd,KAAKe,kBAAkBC,KAAK,CAC1BC,MAAO,QACPH,eACAD,iBAGFK,EAAAlB,KAAKmB,aAAS,MAAAD,SAAA,SAAAA,EAAEE,iBACd,iBACCtC,IACC,GAAIA,EAAEuC,eAAiB,aAAc,CACnCrB,KAAKe,kBAAkBC,KAAK,CAC1BC,MAAO,MACPH,eACAD,e,IAIN,CAAES,KAAM,M,CAKZC,uBAAuBC,G,QACrB,IAAKxB,KAAKK,gBAAiB,CACzBoB,QAAQC,KAAK,sC,CAGf,GAAIF,EAAM,EACRN,EAAAlB,KAAK2B,eAAW,MAAAT,SAAA,SAAAA,EAAEU,W,KACb,EACLC,EAAA7B,KAAK2B,eAAW,MAAAE,SAAA,SAAAA,EAAEC,O,EAKtBC,mBAAmBP,G,QACjB,IAAKxB,KAAKM,YAAa,CACrBmB,QAAQC,KAAK,kC,CAGf,GAAIF,EAAM,EACRN,EAAAlB,KAAKgC,WAAO,MAAAd,SAAA,SAAAA,EAAEU,W,KACT,EACLC,EAAA7B,KAAKgC,WAAO,MAAAH,SAAA,SAAAA,EAAEC,O,EAclBG,oBACEvB,OAAOwB,WAAWlC,KAAKC,gBAAgBmB,iBAAiB,SAAUpB,KAAKO,gBAEvEP,KAAKK,gBAAkBL,KAAKmC,KAAKC,cAA8B,2BAE/DpC,KAAKM,YAAcN,KAAKmC,KAAKC,cAA8B,sB,CAG7DC,mB,QACE,GAAIrC,KAAKsC,iBAAmBtC,KAAKK,gBAAiB,EAChDa,EAAAlB,KAAK2B,eAAW,MAAAT,SAAA,SAAAA,EAAEU,W,CAGpB,GAAI5B,KAAKuC,aAAevC,KAAKM,YAAa,EACxCuB,EAAA7B,KAAKgC,WAAO,MAAAH,SAAA,SAAAA,EAAED,W,EAIlBY,oBACE,GAAIxC,KAAKyC,gBAAiB,CACxBzC,KAAKb,SAAWa,KAAKyC,e,EAIzBC,uBACEhC,OAAOwB,WAAWlC,KAAKC,gBAAgB0C,oBAAoB,SAAU3C,KAAKO,e,CAGpEqC,uBAAuBC,GAC7B7C,KAAK8C,oBAAoB9B,KAAK,CAAE+B,cAAeF,G,CAGzCG,wBAAwBH,GAC9B7C,KAAKiD,qBAAqBjC,KAAK,CAAE+B,cAAeF,G,CAGlDK,SACE,OACE5E,EAAC6E,EAAIC,OAAAC,OAAA,GAAK,CAAE,CAACrD,KAAKb,UAAW,OAC1Ba,KAAKd,SACJZ,EAAA,OAAKC,MAAM,cACTD,EAAA,MAAIC,MAAM,uBACPL,EAAKkC,KAAKkD,GACThF,EAAA,MAAIiF,IAAKD,EAAK/E,MAAOiF,EAAK,CAAE,aAAcxD,KAAKyD,YAAcH,KAC3DhF,EAAA,UAAQE,KAAK,SAASD,MAAM,eAAeE,QAAS,IAAOuB,KAAKyD,UAAYH,GACzEtD,KAAKE,YAAYoD,WAO3BtD,KAAKd,SAAYc,KAAKd,SAAWc,KAAKyD,YAAc,SACrDnF,EAACW,EAAS,CACRL,IAAM8E,GAAyC1D,KAAKmB,UAAYuC,EAChExE,QAASc,KAAKd,QACdC,SAAUa,KAAKb,SACfC,WAAYY,KAAKZ,WACjBC,WAAYW,KAAKX,aAGrBf,EAACK,EAAW,CACVC,IAAM8E,GAAa1D,KAAK2B,YAAc+B,EACtCtF,QAAUU,GAAMkB,KAAK4C,uBAAuB9D,GAC5CT,SAAWS,GAAMkB,KAAKgD,wBAAwBlE,OAE7CkB,KAAKd,SAAYc,KAAKd,SAAWc,KAAKyD,YAAc,QACrDnF,EAAA,OAAKC,MAAM,OACTD,EAAA,QAAMU,KAAK,SAGfV,EAACqB,EAAO,CACNf,IAAM8E,GAAa1D,KAAKgC,QAAU0B,EAClC9D,gBAAkBd,GAAMkB,KAAKJ,gBAAgBoB,KAAK,CAAE+B,cAAejE,M"}

package/dist/dso-toolkit/{p-e26974ee.entry.js → p-98f7ede6.entry.js}

@@ -1,2 +1,2 @@
-import{r as n,c as t,h as o}from"./p-ce928197.js";import{c as e}from"./p-91963e3d.js";import{c as s}from"./p-6a1980b4.js";import"./p-5950644a.js";const i="*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\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.dso-manual-input-button {\n  cursor: text;\n}\n\n.dso-tertiary {\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  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dso-tertiary.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.dso-tertiary.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.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.dso-input-number:not(.form-group) {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.dso-input-number label {\n  width: 100%;\n}\n.dso-input-number .dso-input-step-counter {\n  align-self: center;\n  background-color: transparent;\n  border: 0;\n  display: inline-block;\n  height: 1.5rem;\n  text-align: center;\n  width: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n  outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n  -moz-appearance: textfield;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-left-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding: 0 16px;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-button-group .dso-list-button {\n  padding-right: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  padding: 0 0 0 32px;\n}\n.dso-selectable .dso-selectable-options {\n  list-style: none;\n  margin-top: 8px;\n  padding-left: 0;\n}\n.dso-selectable .dso-selectable-options li + li {\n  margin-top: 8px;\n}\n.dso-selectable label {\n  font-weight: 400;\n  line-height: 24px;\n  margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n  background-color: #fff;\n  box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n  height: 24px;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  width: 24px;\n  z-index: 100;\n  zoom: 1;\n}\n@media (prefers-contrast: more) {\n  .dso-selectable input[type=checkbox],\n  .dso-selectable input[type=radio] {\n    opacity: 1;\n  }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n  cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n  display: inline;\n  font-style: normal;\n  padding-left: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n  background: #fff;\n  border: 0;\n  box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n  content: \"\";\n  height: 20px;\n  left: 2px;\n  position: absolute;\n  top: 2px;\n  width: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n  outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n  box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n  height: 18px;\n  left: 3px;\n  top: 3px;\n  width: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n  background-color: #ebf3e6;\n  box-shadow: 0 0 0 1px #275937;\n  height: 22px;\n  left: 1px;\n  top: 1px;\n  width: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n  border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n  background: transparent;\n  content: \"\";\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n  opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n  border: solid;\n  border-color: var(--dso-selectable-color, #39870c);\n  border-top-color: transparent;\n  border-width: 0 0 3px 3px;\n  height: 8px;\n  transform: rotate(-45deg);\n  width: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  height: 12px;\n  width: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n  border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n  background-color: transparent;\n  border-radius: 50%;\n  content: \"\";\n  height: 12px;\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  width: 12px;\n  zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  opacity: 1;\n}\n.dso-selectable > dso-info {\n  float: none;\n  margin: 8px 16px 0 0;\n  width: 100%;\n}\n.dso-selectable label {\n  font-weight: 700;\n}\n\n.dso-list-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: #ccc;\n  color: #191919;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding: 15px 47px 15px 15px;\n  position: relative;\n  text-align: left;\n  white-space: normal;\n  width: 100%;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-right: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel {\n  font-weight: 400;\n  width: 100%;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di,\n.dso-list-button .dso-count {\n  height: 24px;\n  position: absolute;\n  right: 15px;\n  top: 15px;\n  width: 24px;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di {\n  color: #39870c;\n  page-break-before: always;\n}\n.dso-list-button .dso-count {\n  font-weight: 700;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    width: 0;\n  }\n}\n.dso-list-button .dso-sublabel {\n  padding-left: 32px;\n}\n\n.dso-list-button + .dso-list-button,\n.dso-list-button + .dso-button-group,\n.dso-button-group + .dso-list-button,\n.dso-button-group + .dso-button-group {\n  margin-top: 4px;\n}\n\n.dso-input-wrapper {\n  position: relative;\n}\n.dso-input-wrapper .form-control {\n  width: 9ch;\n}\n\n.form-control {\n  display: block;\n  width: 100%;\n  height: 40px;\n  padding: 6px 14px;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: #191919;\n  background-color: #fff;\n  background-image: none;\n  border: 1px solid #275937;\n  border-radius: 4px;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n  color: #666;\n  opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n  color: #666;\n}\n.form-control::-webkit-input-placeholder {\n  color: #666;\n}\n.form-control::-ms-expand {\n  background-color: transparent;\n  border: 0;\n}\n.form-control:focus {\n  border-color: #275937;\n  outline: 0;\n  box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n  background-color: #fff;\n  opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n  cursor: default;\n}\n.form-control[disabled] {\n  border-color: #e5e5e5;\n  color: #999;\n}\n.form-control[readonly] {\n  border-width: 1px;\n}\n.form-control[type=text] {\n  line-height: 40px;\n}\n.form-control[size] {\n  width: auto;\n}\n\n.dso-manual-input-button[type=button] {\n  background-color: transparent;\n  border: 0;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hidden {\n  display: none !important;\n}";const r=class{constructor(o){n(this,o);this.dsoCountChange=t(this,"dsoCountChange",7);this.dsoSelectedChange=t(this,"dsoSelectedChange",7);this.manualInputWrapperElement=undefined;this.manualCount=undefined;this.label=undefined;this.sublabel=undefined;this.count=undefined;this.min=undefined;this.max=undefined;this.checked=false;this.disabled=false;this.manual=true}watchManualCallback(){if(!this.manual&&this.manualCount){this.stopManualCountInput()}}componentDidRender(){var n;if(this.manualCount!==undefined&&this.manualInputWrapperElement&&!this.trap){this.trap=e(this.manualInputWrapperElement,{escapeDeactivates:true,setReturnFocus:false,clickOutsideDeactivates:n=>{this.setCount(n);return true},onDeactivate:()=>this.stopManualCountInput(),onPostDeactivate:()=>{var n;return(n=this.manualInputButtonElement)===null||n===void 0?void 0:n.focus()}}).activate()}else if(this.manualCount===undefined&&this.trap){(n=this.trap)===null||n===void 0?void 0:n.deactivate();delete this.trap}}disconnectedCallback(){var n;(n=this.trap)===null||n===void 0?void 0:n.deactivate()}handleOnChange({target:n}){if(n instanceof HTMLInputElement){this.manualCount=n.valueAsNumber}}stepValue(n,t){if(typeof this.count==="number"){const o=t==="increment"?this.count+1:this.count-1;if(this.isNewCountValid(o)===false){return}this.dsoCountChange.emit({originalEvent:n,count:o})}}setCount(n){n.preventDefault();if(typeof this.manualCount==="number"&&this.isNewCountValid(this.manualCount)){this.dsoCountChange.emit({originalEvent:n,count:this.manualCount});this.stopManualCountInput()}}handleSelectClick(n){n.preventDefault();if(this.count!==undefined){this.dsoCountChange.emit({originalEvent:n,count:this.count>0?0:1});return}this.dsoSelectedChange.emit({originalEvent:n,checked:!this.checked})}startManualCountInput(){this.manualCount=this.count}stopManualCountInput(){this.manualCount=undefined}isNewCountValid(n){if(this.min!==undefined&&this.max!==undefined&&(n<Number(this.min)||n>Number(this.max))){return false}return true}render(){const n=this.manualCount===undefined;const t=this.checked||this.count!==undefined&&this.count>0;return o("div",{class:s(["dso-button-group",{"dso-disabled":this.disabled}])},o("div",{class:s(["dso-list-button",{"dso-selected":t,"dso-single-count":this.count===1}]),onClick:n=>this.handleSelectClick(n)},o("div",{class:"dso-selectable"},o("input",{id:"dso-list-button-checkbox",type:"checkbox",value:"list-button",name:"naam",checked:t,disabled:this.disabled,"aria-label":this.label}),o("label",{htmlFor:"dso-list-button-checkbox"},this.label)),this.sublabel&&o("span",{class:"dso-sublabel"},this.sublabel),o("slot",{name:"subcontent"})),this.count!==undefined&&this.count>0&&o("div",{class:"dso-input-number"},this.manualCount===undefined&&this.count>1&&o("button",{type:"button",class:"dso-tertiary",disabled:this.count===Number(this.min)||this.disabled,onClick:n=>this.stepValue(n,"decrement")},o("dso-icon",{icon:"minus-circle"}),o("span",{class:"sr-only"},"Aantal verlagen")),o("div",{class:"dso-input-wrapper"},this.manualCount===undefined&&this.count>1&&o("input",{class:"dso-input-step-counter",type:"number",tabIndex:-1,"aria-label":"Aantal",value:this.count,readOnly:true}),o("form",{onSubmit:n=>this.setCount(n)},o("div",{ref:n=>this.manualInputWrapperElement=n},o("input",{class:s("form-control",{hidden:n}),type:"number","aria-label":"Aantal",value:this.manualCount,min:this.min,max:this.max,onInput:n=>this.handleOnChange(n)})),this.manual===true&&o("button",{class:s("dso-manual-input-button",{"sr-only":!n}),type:!n?"submit":"button",disabled:this.disabled,onClick:()=>n&&this.startManualCountInput()},n?o("span",{class:"sr-only"},"Handmatig aantal invullen"):o("span",{class:"sr-only"},"Zet waarde")))),n&&o("button",{type:"button",class:"dso-tertiary",disabled:this.count===Number(this.max)||this.disabled,onClick:n=>this.stepValue(n,"increment")},o("dso-icon",{icon:"plus-circle"}),o("span",{class:"sr-only"},"Aantal verhogen"))))}static get watchers(){return{manual:["watchManualCallback"]}}};r.style=i;export{r as dso_list_button};
-//# sourceMappingURL=p-e26974ee.entry.js.map
+import{r as n,c as t,h as o}from"./p-1a1a43fd.js";import{c as e}from"./p-91963e3d.js";import{c as s}from"./p-6a1980b4.js";import"./p-5950644a.js";const i="*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\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.dso-manual-input-button {\n  cursor: text;\n}\n\n.dso-tertiary {\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  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dso-tertiary.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.dso-tertiary.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.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.dso-input-number:not(.form-group) {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.dso-input-number label {\n  width: 100%;\n}\n.dso-input-number .dso-input-step-counter {\n  align-self: center;\n  background-color: transparent;\n  border: 0;\n  display: inline-block;\n  height: 1.5rem;\n  text-align: center;\n  width: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n  outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n  -moz-appearance: textfield;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-left-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding: 0 16px;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-button-group .dso-list-button {\n  padding-right: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  padding: 0 0 0 32px;\n}\n.dso-selectable .dso-selectable-options {\n  list-style: none;\n  margin-top: 8px;\n  padding-left: 0;\n}\n.dso-selectable .dso-selectable-options li + li {\n  margin-top: 8px;\n}\n.dso-selectable label {\n  font-weight: 400;\n  line-height: 24px;\n  margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n  background-color: #fff;\n  box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n  height: 24px;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  width: 24px;\n  z-index: 100;\n  zoom: 1;\n}\n@media (prefers-contrast: more) {\n  .dso-selectable input[type=checkbox],\n  .dso-selectable input[type=radio] {\n    opacity: 1;\n  }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n  cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n  display: inline;\n  font-style: normal;\n  padding-left: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n  background: #fff;\n  border: 0;\n  box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n  content: \"\";\n  height: 20px;\n  left: 2px;\n  position: absolute;\n  top: 2px;\n  width: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n  outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n  box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n  height: 18px;\n  left: 3px;\n  top: 3px;\n  width: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n  background-color: #ebf3e6;\n  box-shadow: 0 0 0 1px #275937;\n  height: 22px;\n  left: 1px;\n  top: 1px;\n  width: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n  border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n  background: transparent;\n  content: \"\";\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n  opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n  border: solid;\n  border-color: var(--dso-selectable-color, #39870c);\n  border-top-color: transparent;\n  border-width: 0 0 3px 3px;\n  height: 8px;\n  transform: rotate(-45deg);\n  width: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  height: 12px;\n  width: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n  border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n  background-color: transparent;\n  border-radius: 50%;\n  content: \"\";\n  height: 12px;\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  width: 12px;\n  zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  opacity: 1;\n}\n.dso-selectable > dso-info {\n  float: none;\n  margin: 8px 16px 0 0;\n  width: 100%;\n}\n.dso-selectable label {\n  font-weight: 700;\n}\n\n.dso-list-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: #ccc;\n  color: #191919;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding: 15px 47px 15px 15px;\n  position: relative;\n  text-align: left;\n  white-space: normal;\n  width: 100%;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-right: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel {\n  font-weight: 400;\n  width: 100%;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di,\n.dso-list-button .dso-count {\n  height: 24px;\n  position: absolute;\n  right: 15px;\n  top: 15px;\n  width: 24px;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di {\n  color: #39870c;\n  page-break-before: always;\n}\n.dso-list-button .dso-count {\n  font-weight: 700;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    width: 0;\n  }\n}\n.dso-list-button .dso-sublabel {\n  padding-left: 32px;\n}\n\n.dso-list-button + .dso-list-button,\n.dso-list-button + .dso-button-group,\n.dso-button-group + .dso-list-button,\n.dso-button-group + .dso-button-group {\n  margin-top: 4px;\n}\n\n.dso-input-wrapper {\n  position: relative;\n}\n.dso-input-wrapper .form-control {\n  width: 9ch;\n}\n\n.form-control {\n  display: block;\n  width: 100%;\n  height: 40px;\n  padding: 6px 14px;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: #191919;\n  background-color: #fff;\n  background-image: none;\n  border: 1px solid #275937;\n  border-radius: 4px;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n  color: #666;\n  opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n  color: #666;\n}\n.form-control::-webkit-input-placeholder {\n  color: #666;\n}\n.form-control::-ms-expand {\n  background-color: transparent;\n  border: 0;\n}\n.form-control:focus {\n  border-color: #275937;\n  outline: 0;\n  box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n  background-color: #fff;\n  opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n  cursor: default;\n}\n.form-control[disabled] {\n  border-color: #e5e5e5;\n  color: #999;\n}\n.form-control[readonly] {\n  border-width: 1px;\n}\n.form-control[type=text] {\n  line-height: 40px;\n}\n.form-control[size] {\n  width: auto;\n}\n\n.dso-manual-input-button[type=button] {\n  background-color: transparent;\n  border: 0;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hidden {\n  display: none !important;\n}";const r=class{constructor(o){n(this,o);this.dsoCountChange=t(this,"dsoCountChange",7);this.dsoSelectedChange=t(this,"dsoSelectedChange",7);this.manualInputWrapperElement=undefined;this.manualCount=undefined;this.label=undefined;this.sublabel=undefined;this.count=undefined;this.min=undefined;this.max=undefined;this.checked=false;this.disabled=false;this.manual=true}watchManualCallback(){if(!this.manual&&this.manualCount){this.stopManualCountInput()}}componentDidRender(){var n;if(this.manualCount!==undefined&&this.manualInputWrapperElement&&!this.trap){this.trap=e(this.manualInputWrapperElement,{escapeDeactivates:true,setReturnFocus:false,clickOutsideDeactivates:n=>{this.setCount(n);return true},onDeactivate:()=>this.stopManualCountInput(),onPostDeactivate:()=>{var n;return(n=this.manualInputButtonElement)===null||n===void 0?void 0:n.focus()}}).activate()}else if(this.manualCount===undefined&&this.trap){(n=this.trap)===null||n===void 0?void 0:n.deactivate();delete this.trap}}disconnectedCallback(){var n;(n=this.trap)===null||n===void 0?void 0:n.deactivate()}handleOnChange({target:n}){if(n instanceof HTMLInputElement){this.manualCount=n.valueAsNumber}}stepValue(n,t){if(typeof this.count==="number"){const o=t==="increment"?this.count+1:this.count-1;if(this.isNewCountValid(o)===false){return}this.dsoCountChange.emit({originalEvent:n,count:o})}}setCount(n){n.preventDefault();if(typeof this.manualCount==="number"&&this.isNewCountValid(this.manualCount)){this.dsoCountChange.emit({originalEvent:n,count:this.manualCount});this.stopManualCountInput()}}handleSelectClick(n){n.preventDefault();if(this.count!==undefined){this.dsoCountChange.emit({originalEvent:n,count:this.count>0?0:1});return}this.dsoSelectedChange.emit({originalEvent:n,checked:!this.checked})}startManualCountInput(){this.manualCount=this.count}stopManualCountInput(){this.manualCount=undefined}isNewCountValid(n){if(this.min!==undefined&&this.max!==undefined&&(n<Number(this.min)||n>Number(this.max))){return false}return true}render(){const n=this.manualCount===undefined;const t=this.checked||this.count!==undefined&&this.count>0;return o("div",{class:s(["dso-button-group",{"dso-disabled":this.disabled}])},o("div",{class:s(["dso-list-button",{"dso-selected":t,"dso-single-count":this.count===1}]),onClick:n=>this.handleSelectClick(n)},o("div",{class:"dso-selectable"},o("input",{id:"dso-list-button-checkbox",type:"checkbox",value:"list-button",name:"naam",checked:t,disabled:this.disabled,"aria-label":this.label}),o("label",{htmlFor:"dso-list-button-checkbox"},this.label)),this.sublabel&&o("span",{class:"dso-sublabel"},this.sublabel),o("slot",{name:"subcontent"})),this.count!==undefined&&this.count>0&&o("div",{class:"dso-input-number"},this.manualCount===undefined&&this.count>1&&o("button",{type:"button",class:"dso-tertiary",disabled:this.count===Number(this.min)||this.disabled,onClick:n=>this.stepValue(n,"decrement")},o("dso-icon",{icon:"minus-circle"}),o("span",{class:"sr-only"},"Aantal verlagen")),o("div",{class:"dso-input-wrapper"},this.manualCount===undefined&&this.count>1&&o("input",{class:"dso-input-step-counter",type:"number",tabIndex:-1,"aria-label":"Aantal",value:this.count,readOnly:true}),o("form",{onSubmit:n=>this.setCount(n)},o("div",{ref:n=>this.manualInputWrapperElement=n},o("input",{class:s("form-control",{hidden:n}),type:"number","aria-label":"Aantal",value:this.manualCount,min:this.min,max:this.max,onInput:n=>this.handleOnChange(n)})),this.manual===true&&o("button",{class:s("dso-manual-input-button",{"sr-only":!n}),type:!n?"submit":"button",disabled:this.disabled,onClick:()=>n&&this.startManualCountInput()},n?o("span",{class:"sr-only"},"Handmatig aantal invullen"):o("span",{class:"sr-only"},"Zet waarde")))),n&&o("button",{type:"button",class:"dso-tertiary",disabled:this.count===Number(this.max)||this.disabled,onClick:n=>this.stepValue(n,"increment")},o("dso-icon",{icon:"plus-circle"}),o("span",{class:"sr-only"},"Aantal verhogen"))))}static get watchers(){return{manual:["watchManualCallback"]}}};r.style=i;export{r as dso_list_button};
+//# sourceMappingURL=p-98f7ede6.entry.js.map

package/dist/dso-toolkit/{p-fafa5ea1.entry.js → p-a00c4003.entry.js}

@@ -1,2 +1,2 @@
-import{g as t,f as e,r as s,h as n,H as r,a as o}from"./p-ce928197.js";const c=(t,e,s)=>{const n=t.get(e);if(!n){t.set(e,[s])}else if(!n.includes(s)){n.push(s)}};const i=(t,e)=>{let s;return(...n)=>{if(s){clearTimeout(s)}s=setTimeout((()=>{s=0;t(...n)}),e)}};const a=t=>!("isConnected"in t)||t.isConnected;const u=i((t=>{for(let e of t.keys()){t.set(e,t.get(e).filter(a))}}),2e3);const f=()=>{if(typeof t!=="function"){return{}}const s=new Map;return{dispose:()=>s.clear(),get:e=>{const n=t();if(n){c(s,e,n)}},set:t=>{const n=s.get(t);if(n){s.set(t,n.filter(e))}u(s)},reset:()=>{s.forEach((t=>t.forEach(e)));u(s)}}};const l=t=>typeof t==="function"?t():t;const d=(t,e=((t,e)=>t!==e))=>{const s=l(t);let n=new Map(Object.entries(s!==null&&s!==void 0?s:{}));const r={dispose:[],get:[],set:[],reset:[]};const o=()=>{var e;n=new Map(Object.entries((e=l(t))!==null&&e!==void 0?e:{}));r.reset.forEach((t=>t()))};const c=()=>{r.dispose.forEach((t=>t()));o()};const i=t=>{r.get.forEach((e=>e(t)));return n.get(t)};const a=(t,s)=>{const o=n.get(t);if(e(s,o,t)){n.set(t,s);r.set.forEach((e=>e(t,s,o)))}};const u=typeof Proxy==="undefined"?{}:new Proxy(s,{get(t,e){return i(e)},ownKeys(t){return Array.from(n.keys())},getOwnPropertyDescriptor(){return{enumerable:true,configurable:true}},has(t,e){return n.has(e)},set(t,e,s){a(e,s);return true}});const f=(t,e)=>{r[t].push(e);return()=>{p(r[t],e)}};const d=(e,s)=>{const n=f("set",((t,n)=>{if(t===e){s(n)}}));const r=f("reset",(()=>s(l(t)[e])));return()=>{n();r()}};const h=(...t)=>{const e=t.reduce(((t,e)=>{if(e.set){t.push(f("set",e.set))}if(e.get){t.push(f("get",e.get))}if(e.reset){t.push(f("reset",e.reset))}if(e.dispose){t.push(f("dispose",e.dispose))}return t}),[]);return()=>e.forEach((t=>t()))};const g=t=>{const e=n.get(t);r.set.forEach((s=>s(t,e,e)))};return{state:u,get:i,set:a,on:f,onChange:d,use:h,dispose:c,reset:o,forceUpdate:g}};const p=(t,e)=>{const s=t.indexOf(e);if(s>=0){t[s]=t[t.length-1];t.length--}};const h=(t,e)=>{const s=d(t,e);s.use(f());return s};const g=":host{display:block}*,*::after,*::before{box-sizing:border-box}";const y=class{updateVariant(t="default"){this.accordionState.variant=t}updateReverseAlign(t){this.accordionState.reverseAlign=t}async _getState(){return this.accordionState}componentWillLoad(){this.accordionState.variant=this.variant;this.accordionState.reverseAlign=this.reverseAlign}constructor(t){s(this,t);this.variant="default";this.reverseAlign=false;const{state:e}=h({});this.accordionState=e}render(){return n(r,{class:"dso-accordion"},n("slot",null))}get host(){return o(this)}static get watchers(){return{variant:["updateVariant"],reverseAlign:["updateReverseAlign"]}}};y.style=g;export{y as dso_accordion};
-//# sourceMappingURL=p-fafa5ea1.entry.js.map
+import{g as t,f as e,r as s,h as n,H as r,a as o}from"./p-1a1a43fd.js";const c=(t,e,s)=>{const n=t.get(e);if(!n){t.set(e,[s])}else if(!n.includes(s)){n.push(s)}};const i=(t,e)=>{let s;return(...n)=>{if(s){clearTimeout(s)}s=setTimeout((()=>{s=0;t(...n)}),e)}};const a=t=>!("isConnected"in t)||t.isConnected;const u=i((t=>{for(let e of t.keys()){t.set(e,t.get(e).filter(a))}}),2e3);const f=()=>{if(typeof t!=="function"){return{}}const s=new Map;return{dispose:()=>s.clear(),get:e=>{const n=t();if(n){c(s,e,n)}},set:t=>{const n=s.get(t);if(n){s.set(t,n.filter(e))}u(s)},reset:()=>{s.forEach((t=>t.forEach(e)));u(s)}}};const l=t=>typeof t==="function"?t():t;const d=(t,e=((t,e)=>t!==e))=>{const s=l(t);let n=new Map(Object.entries(s!==null&&s!==void 0?s:{}));const r={dispose:[],get:[],set:[],reset:[]};const o=()=>{var e;n=new Map(Object.entries((e=l(t))!==null&&e!==void 0?e:{}));r.reset.forEach((t=>t()))};const c=()=>{r.dispose.forEach((t=>t()));o()};const i=t=>{r.get.forEach((e=>e(t)));return n.get(t)};const a=(t,s)=>{const o=n.get(t);if(e(s,o,t)){n.set(t,s);r.set.forEach((e=>e(t,s,o)))}};const u=typeof Proxy==="undefined"?{}:new Proxy(s,{get(t,e){return i(e)},ownKeys(t){return Array.from(n.keys())},getOwnPropertyDescriptor(){return{enumerable:true,configurable:true}},has(t,e){return n.has(e)},set(t,e,s){a(e,s);return true}});const f=(t,e)=>{r[t].push(e);return()=>{p(r[t],e)}};const d=(e,s)=>{const n=f("set",((t,n)=>{if(t===e){s(n)}}));const r=f("reset",(()=>s(l(t)[e])));return()=>{n();r()}};const h=(...t)=>{const e=t.reduce(((t,e)=>{if(e.set){t.push(f("set",e.set))}if(e.get){t.push(f("get",e.get))}if(e.reset){t.push(f("reset",e.reset))}if(e.dispose){t.push(f("dispose",e.dispose))}return t}),[]);return()=>e.forEach((t=>t()))};const g=t=>{const e=n.get(t);r.set.forEach((s=>s(t,e,e)))};return{state:u,get:i,set:a,on:f,onChange:d,use:h,dispose:c,reset:o,forceUpdate:g}};const p=(t,e)=>{const s=t.indexOf(e);if(s>=0){t[s]=t[t.length-1];t.length--}};const h=(t,e)=>{const s=d(t,e);s.use(f());return s};const g=":host{display:block}*,*::after,*::before{box-sizing:border-box}";const y=class{updateVariant(t="default"){this.accordionState.variant=t}updateReverseAlign(t){this.accordionState.reverseAlign=t}async _getState(){return this.accordionState}componentWillLoad(){this.accordionState.variant=this.variant;this.accordionState.reverseAlign=this.reverseAlign}constructor(t){s(this,t);this.variant="default";this.reverseAlign=false;const{state:e}=h({});this.accordionState=e}render(){return n(r,{class:"dso-accordion"},n("slot",null))}get host(){return o(this)}static get watchers(){return{variant:["updateVariant"],reverseAlign:["updateReverseAlign"]}}};y.style=g;export{y as dso_accordion};
+//# sourceMappingURL=p-a00c4003.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as s,c as t,h as e,H as a,a as i}from"./p-1a1a43fd.js";import{c as n}from"./p-6a1980b4.js";import{i as o}from"./p-33df9903.js";const l=s=>s instanceof HTMLButtonElement||s instanceof HTMLAnchorElement||s instanceof HTMLInputElement||s.tagName.startsWith("DSO-TOGGLETIP");const r=":host .dso-card-selectable,:host .dso-card-image{grid-row:span 2}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host .dso-card-heading{align-items:center;display:flex;margin-bottom:8px}@media screen and (max-width: 480px){:host .dso-card-heading{flex-wrap:wrap}}:host .dso-card-image{margin-right:8px}";const d=class{constructor(e){s(this,e);this.dsoCardClicked=t(this,"dsoCardClicked",7);this.isSelectable=false;this.hasImage=false;this.clickable=true;this.imageShape="normal"}clickEventHandler(s){if(!(s.target instanceof HTMLElement)||!this.clickable){return}let t=s.target;while(t!==this.host&&t!==null){if(l(t)||t===null){return}if(t.parentNode instanceof ShadowRoot&&t.parentNode.host instanceof HTMLElement){t=t.parentNode.host}else{t=t.parentElement}}return this.dsoCardClicked.emit({originalEvent:s,isModifiedEvent:o(s)})}componentWillLoad(){this.isSelectable=this.host.querySelector("*[slot = 'selectable']")!==null;this.hasImage=this.host.querySelector("*[slot = 'image']")!==null}render(){return e(a,{class:n({"dso-not-clickable":!this.clickable}),onClick:s=>this.clickEventHandler(s)},e("div",{class:"dso-card-selectable",hidden:!this.isSelectable},e("slot",{name:"selectable"})),e("div",{class:"dso-card-image",hidden:!this.hasImage},e("slot",{name:"image"})),e("div",{class:"dso-card-heading"},e("slot",{name:"heading"}),e("slot",{name:"interactions"})),e("div",{class:"dso-card-content"},e("slot",{name:"content"})))}get host(){return i(this)}};d.style=r;export{d as dso_card};
+//# sourceMappingURL=p-a0798096.entry.js.map

package/dist/dso-toolkit/{p-42d3c595.entry.js.map → p-a0798096.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["isInteractiveElement","element","HTMLButtonElement","HTMLAnchorElement","HTMLInputElement","tagName","startsWith","cardCss","Card","clickEventHandler","e","target","HTMLElement","this","clickable","host","parentNode","ShadowRoot","parentElement","dsoCardClicked","emit","originalEvent","isModifiedEvent","componentWillLoad","isSelectable","querySelector","hasImage","render","h","Host","class","clsx","onClick","hidden","name"],"sources":["./src/utils/is-interactive-element.ts","./src/components/card/card.scss?tag=dso-card&encapsulation=shadow","./src/components/card/card.tsx"],"sourcesContent":["export const isInteractiveElement = (element: HTMLElement): boolean => {\r\n  return (\r\n    element instanceof HTMLButtonElement ||\r\n    element instanceof HTMLAnchorElement ||\r\n    element instanceof HTMLInputElement ||\r\n    element.tagName.startsWith(\"DSO-TOGGLETIP\")\r\n  );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/card\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include card.root();\r\n\r\n  display: block;\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { isInteractiveElement } from \"../../utils/is-interactive-element\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DsoCardClickedEvent, ImageShape } from \"./card.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-card\",\r\n  styleUrl: \"card.scss\",\r\n  shadow: true,\r\n})\r\nexport class Card implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoCardElement;\r\n\r\n  /**\r\n   * Do not use, this is set programmatically by the component.\r\n   */\r\n  @Prop({ reflect: true })\r\n  isSelectable = false;\r\n\r\n  /**\r\n   * Do not use, this is set programmatically by the component.\r\n   */\r\n  @Prop({ reflect: true })\r\n  hasImage = false;\r\n\r\n  /**\r\n   * Whether or not the Card is clickable.\r\n   */\r\n  @Prop()\r\n  clickable = true;\r\n\r\n  /**\r\n   * Presentation of image in header.\r\n   *  - \"normal\" (\"24 x 24\").\r\n   *  - \"wide\" (\"30 x 26\")\r\n   */\r\n  @Prop({ reflect: true })\r\n  imageShape: ImageShape = \"normal\";\r\n\r\n  /**\r\n   * Emitted when the Card is clickable and the user clicked the Card.\r\n   */\r\n  @Event()\r\n  dsoCardClicked!: EventEmitter<DsoCardClickedEvent>;\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.clickable) {\r\n      return;\r\n    }\r\n\r\n    let element: HTMLElement | null = e.target;\r\n\r\n    while (element !== this.host && element !== null) {\r\n      if (isInteractiveElement(element) || element === null) {\r\n        return;\r\n      }\r\n\r\n      if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {\r\n        element = element.parentNode.host;\r\n      } else {\r\n        element = element.parentElement;\r\n      }\r\n    }\r\n\r\n    return this.dsoCardClicked.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.isSelectable = this.host.querySelector(\"*[slot = 'selectable']\") !== null;\r\n    this.hasImage = this.host.querySelector(\"*[slot = 'image']\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={clsx({ \"dso-not-clickable\": !this.clickable })}\r\n        onClick={(e: MouseEvent) => this.clickEventHandler(e)}\r\n      >\r\n        <div class=\"dso-card-selectable\" hidden={!this.isSelectable}>\r\n          <slot name=\"selectable\" />\r\n        </div>\r\n        <div class=\"dso-card-image\" hidden={!this.hasImage}>\r\n          <slot name=\"image\" />\r\n        </div>\r\n        <div class=\"dso-card-heading\">\r\n          <slot name=\"heading\" />\r\n          <slot name=\"interactions\" />\r\n        </div>\r\n        <div class=\"dso-card-content\">\r\n          <slot name=\"content\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"mIAAO,MAAMA,EAAwBC,GAEjCA,aAAmBC,mBACnBD,aAAmBE,mBACnBF,aAAmBG,kBACnBH,EAAQI,QAAQC,WAAW,iBCL/B,MAAMC,EAAU,iU,MCaHC,EAAI,M,0FAQA,M,cAMJ,M,eAMC,K,gBAQa,Q,CAQjBC,kBAAkBC,GACxB,KAAMA,EAAEC,kBAAkBC,eAAiBC,KAAKC,UAAW,CACzD,M,CAGF,IAAIb,EAA8BS,EAAEC,OAEpC,MAAOV,IAAYY,KAAKE,MAAQd,IAAY,KAAM,CAChD,GAAID,EAAqBC,IAAYA,IAAY,KAAM,CACrD,M,CAGF,GAAIA,EAAQe,sBAAsBC,YAAchB,EAAQe,WAAWD,gBAAgBH,YAAa,CAC9FX,EAAUA,EAAQe,WAAWD,I,KACxB,CACLd,EAAUA,EAAQiB,a,EAItB,OAAOL,KAAKM,eAAeC,KAAK,CAAEC,cAAeX,EAAGY,gBAAiBA,EAAgBZ,I,CAGvFa,oBACEV,KAAKW,aAAeX,KAAKE,KAAKU,cAAc,4BAA8B,KAC1EZ,KAAKa,SAAWb,KAAKE,KAAKU,cAAc,uBAAyB,I,CAGnEE,SACE,OACEC,EAACC,EAAI,CACHC,MAAOC,EAAK,CAAE,qBAAsBlB,KAAKC,YACzCkB,QAAUtB,GAAkBG,KAAKJ,kBAAkBC,IAEnDkB,EAAA,OAAKE,MAAM,sBAAsBG,QAASpB,KAAKW,cAC7CI,EAAA,QAAMM,KAAK,gBAEbN,EAAA,OAAKE,MAAM,iBAAiBG,QAASpB,KAAKa,UACxCE,EAAA,QAAMM,KAAK,WAEbN,EAAA,OAAKE,MAAM,oBACTF,EAAA,QAAMM,KAAK,YACXN,EAAA,QAAMM,KAAK,kBAEbN,EAAA,OAAKE,MAAM,oBACTF,EAAA,QAAMM,KAAK,a"}
+{"version":3,"names":["isInteractiveElement","element","HTMLButtonElement","HTMLAnchorElement","HTMLInputElement","tagName","startsWith","cardCss","Card","clickEventHandler","e","target","HTMLElement","this","clickable","host","parentNode","ShadowRoot","parentElement","dsoCardClicked","emit","originalEvent","isModifiedEvent","componentWillLoad","isSelectable","querySelector","hasImage","render","h","Host","class","clsx","onClick","hidden","name"],"sources":["./src/utils/is-interactive-element.ts","./src/components/card/card.scss?tag=dso-card&encapsulation=shadow","./src/components/card/card.tsx"],"sourcesContent":["export const isInteractiveElement = (element: HTMLElement): boolean => {\r\n  return (\r\n    element instanceof HTMLButtonElement ||\r\n    element instanceof HTMLAnchorElement ||\r\n    element instanceof HTMLInputElement ||\r\n    element.tagName.startsWith(\"DSO-TOGGLETIP\")\r\n  );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/card\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include card.root();\r\n\r\n  display: block;\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { isInteractiveElement } from \"../../utils/is-interactive-element\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DsoCardClickedEvent, ImageShape } from \"./card.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-card\",\r\n  styleUrl: \"card.scss\",\r\n  shadow: true,\r\n})\r\nexport class Card implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoCardElement;\r\n\r\n  /**\r\n   * Do not use, this is set programmatically by the component.\r\n   */\r\n  @Prop({ reflect: true })\r\n  isSelectable = false;\r\n\r\n  /**\r\n   * Do not use, this is set programmatically by the component.\r\n   */\r\n  @Prop({ reflect: true })\r\n  hasImage = false;\r\n\r\n  /**\r\n   * Whether or not the Card is clickable.\r\n   */\r\n  @Prop()\r\n  clickable = true;\r\n\r\n  /**\r\n   * Presentation of image in header.\r\n   *  - \"normal\" (\"24 x 24\").\r\n   *  - \"wide\" (\"30 x 26\")\r\n   */\r\n  @Prop({ reflect: true })\r\n  imageShape: ImageShape = \"normal\";\r\n\r\n  /**\r\n   * Emitted when the Card is clickable and the user clicked the Card.\r\n   */\r\n  @Event()\r\n  dsoCardClicked!: EventEmitter<DsoCardClickedEvent>;\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.clickable) {\r\n      return;\r\n    }\r\n\r\n    let element: HTMLElement | null = e.target;\r\n\r\n    while (element !== this.host && element !== null) {\r\n      if (isInteractiveElement(element) || element === null) {\r\n        return;\r\n      }\r\n\r\n      if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {\r\n        element = element.parentNode.host;\r\n      } else {\r\n        element = element.parentElement;\r\n      }\r\n    }\r\n\r\n    return this.dsoCardClicked.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.isSelectable = this.host.querySelector(\"*[slot = 'selectable']\") !== null;\r\n    this.hasImage = this.host.querySelector(\"*[slot = 'image']\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={clsx({ \"dso-not-clickable\": !this.clickable })}\r\n        onClick={(e: MouseEvent) => this.clickEventHandler(e)}\r\n      >\r\n        <div class=\"dso-card-selectable\" hidden={!this.isSelectable}>\r\n          <slot name=\"selectable\" />\r\n        </div>\r\n        <div class=\"dso-card-image\" hidden={!this.hasImage}>\r\n          <slot name=\"image\" />\r\n        </div>\r\n        <div class=\"dso-card-heading\">\r\n          <slot name=\"heading\" />\r\n          <slot name=\"interactions\" />\r\n        </div>\r\n        <div class=\"dso-card-content\">\r\n          <slot name=\"content\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"wIAAO,MAAMA,EAAwBC,GAEjCA,aAAmBC,mBACnBD,aAAmBE,mBACnBF,aAAmBG,kBACnBH,EAAQI,QAAQC,WAAW,iBCL/B,MAAMC,EAAU,iU,MCaHC,EAAI,M,0FAQA,M,cAMJ,M,eAMC,K,gBAQa,Q,CAQjBC,kBAAkBC,GACxB,KAAMA,EAAEC,kBAAkBC,eAAiBC,KAAKC,UAAW,CACzD,M,CAGF,IAAIb,EAA8BS,EAAEC,OAEpC,MAAOV,IAAYY,KAAKE,MAAQd,IAAY,KAAM,CAChD,GAAID,EAAqBC,IAAYA,IAAY,KAAM,CACrD,M,CAGF,GAAIA,EAAQe,sBAAsBC,YAAchB,EAAQe,WAAWD,gBAAgBH,YAAa,CAC9FX,EAAUA,EAAQe,WAAWD,I,KACxB,CACLd,EAAUA,EAAQiB,a,EAItB,OAAOL,KAAKM,eAAeC,KAAK,CAAEC,cAAeX,EAAGY,gBAAiBA,EAAgBZ,I,CAGvFa,oBACEV,KAAKW,aAAeX,KAAKE,KAAKU,cAAc,4BAA8B,KAC1EZ,KAAKa,SAAWb,KAAKE,KAAKU,cAAc,uBAAyB,I,CAGnEE,SACE,OACEC,EAACC,EAAI,CACHC,MAAOC,EAAK,CAAE,qBAAsBlB,KAAKC,YACzCkB,QAAUtB,GAAkBG,KAAKJ,kBAAkBC,IAEnDkB,EAAA,OAAKE,MAAM,sBAAsBG,QAASpB,KAAKW,cAC7CI,EAAA,QAAMM,KAAK,gBAEbN,EAAA,OAAKE,MAAM,iBAAiBG,QAASpB,KAAKa,UACxCE,EAAA,QAAMM,KAAK,WAEbN,EAAA,OAAKE,MAAM,oBACTF,EAAA,QAAMM,KAAK,YACXN,EAAA,QAAMM,KAAK,kBAEbN,EAAA,OAAKE,MAAM,oBACTF,EAAA,QAAMM,KAAK,a"}

package/dist/dso-toolkit/{p-9fee52e5.entry.js → p-a1060560.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,h as t,F as d}from"./p-ce928197.js";const r=":host .dso-card-list{padding-left:0;list-style:none;border-bottom:1px solid #ccc;margin-top:-1px}:host .dso-card-grid{display:grid;gap:32px;grid-auto-rows:1fr}@media (max-width: 991px){:host .dso-card-grid{grid-template-columns:repeat(1, 1fr)}}@media (min-width: 992px) and (max-width: 1199px){:host .dso-card-grid{grid-template-columns:repeat(2, 1fr)}}@media (min-width: 1200px){:host .dso-card-grid{grid-template-columns:repeat(3, 1fr)}}";const i=class{constructor(t){s(this,t);this.mode="list"}render(){return t(d,null,this.mode==="list"&&t("ul",{class:"dso-card-list"},t("slot",null)),this.mode==="grid"&&t("div",{class:"dso-card-grid"},t("slot",null)))}};i.style=r;export{i as dso_card_container};
-//# sourceMappingURL=p-9fee52e5.entry.js.map
+import{r as s,h as d,F as t}from"./p-1a1a43fd.js";const r=":host .dso-card-list{padding-left:0;list-style:none;border-bottom:1px solid #ccc;margin-top:-1px}:host .dso-card-grid{display:grid;gap:32px;grid-auto-rows:1fr}@media (max-width: 991px){:host .dso-card-grid{grid-template-columns:repeat(1, 1fr)}}@media (min-width: 992px) and (max-width: 1199px){:host .dso-card-grid{grid-template-columns:repeat(2, 1fr)}}@media (min-width: 1200px){:host .dso-card-grid{grid-template-columns:repeat(3, 1fr)}}";const i=class{constructor(d){s(this,d);this.mode="list"}render(){return d(t,null,this.mode==="list"&&d("ul",{class:"dso-card-list"},d("slot",null)),this.mode==="grid"&&d("div",{class:"dso-card-grid"},d("slot",null)))}};i.style=r;export{i as dso_card_container};
+//# sourceMappingURL=p-a1060560.entry.js.map

package/dist/dso-toolkit/{p-6050e8e6.entry.js → p-b34f24b4.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,h as t,a as i}from"./p-ce928197.js";import{c as h}from"./p-6a1980b4.js";const s=":host{display:block}:host-context(.row.dso-equal-heights){height:100%;min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box{min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box.dso-has-counter{height:calc(100% - 48px)}:host-context(.row.dso-equal-heights)>.dso-highlight-box:not(.dso-has-counter){height:calc(100% - 16px)}*,*::after,*::before{box-sizing:border-box}.dso-highlight-box{background-color:#f2f2f2;color:#000;margin-top:16px;padding:16px;margin-bottom:24px}.dso-highlight-box.dso-white{background-color:#fff}.dso-highlight-box.dso-yellow{background-color:#f8f6cc}.dso-highlight-box.dso-drop-shadow{box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}.dso-highlight-box.dso-border{background-color:#fff;border:1px solid #ccc;padding:15px}.dso-highlight-box.dso-has-counter{margin-top:48px}.dso-highlight-box.dso-has-counter{padding-top:2.5rem;position:relative}.dso-highlight-box .dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;height:2rem;left:16px;line-height:2rem;position:absolute;text-align:center;top:-1.5rem;width:2rem}.dso-highlight-box .dso-step-counter svg.di{height:1.5rem;margin-top:0.25rem;width:1.5rem}.dso-highlight-box>dso-icon{vertical-align:text-top}";const e=class{constructor(t){o(this,t);this.yellow=undefined;this.border=undefined;this.white=undefined;this.dropShadow=undefined;this.step=undefined}render(){var o;const i=this.step||!!this.element.querySelector("[slot=icon]");const s=h("dso-highlight-box",{"dso-yellow":this.yellow,"dso-border":this.border,"dso-white":this.white,"dso-drop-shadow":this.dropShadow,"dso-has-counter":i});return t("div",{class:s},i&&t("div",{class:"dso-step-counter"},(o=this.step)!==null&&o!==void 0?o:t("slot",{name:"icon"})),t("slot",null))}get element(){return i(this)}};e.style=s;export{e as dso_highlight_box};
-//# sourceMappingURL=p-6050e8e6.entry.js.map
+import{r as o,h as t,a as i}from"./p-1a1a43fd.js";import{c as h}from"./p-6a1980b4.js";const s=":host{display:block}:host-context(.row.dso-equal-heights){height:100%;min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box{min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box.dso-has-counter{height:calc(100% - 48px)}:host-context(.row.dso-equal-heights)>.dso-highlight-box:not(.dso-has-counter){height:calc(100% - 16px)}*,*::after,*::before{box-sizing:border-box}.dso-highlight-box{background-color:#f2f2f2;color:#000;margin-top:16px;padding:16px;margin-bottom:24px}.dso-highlight-box.dso-white{background-color:#fff}.dso-highlight-box.dso-yellow{background-color:#f8f6cc}.dso-highlight-box.dso-drop-shadow{box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}.dso-highlight-box.dso-border{background-color:#fff;border:1px solid #ccc;padding:15px}.dso-highlight-box.dso-has-counter{margin-top:48px}.dso-highlight-box.dso-has-counter{padding-top:2.5rem;position:relative}.dso-highlight-box .dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;height:2rem;left:16px;line-height:2rem;position:absolute;text-align:center;top:-1.5rem;width:2rem}.dso-highlight-box .dso-step-counter svg.di{height:1.5rem;margin-top:0.25rem;width:1.5rem}.dso-highlight-box>dso-icon{vertical-align:text-top}";const e=class{constructor(t){o(this,t);this.yellow=undefined;this.border=undefined;this.white=undefined;this.dropShadow=undefined;this.step=undefined}render(){var o;const i=this.step||!!this.element.querySelector("[slot=icon]");const s=h("dso-highlight-box",{"dso-yellow":this.yellow,"dso-border":this.border,"dso-white":this.white,"dso-drop-shadow":this.dropShadow,"dso-has-counter":i});return t("div",{class:s},i&&t("div",{class:"dso-step-counter"},(o=this.step)!==null&&o!==void 0?o:t("slot",{name:"icon"})),t("slot",null))}get element(){return i(this)}};e.style=s;export{e as dso_highlight_box};
+//# sourceMappingURL=p-b34f24b4.entry.js.map

package/dist/dso-toolkit/{p-168750a2.entry.js → p-b76768a5.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,c as t,h as i,F as e,a as h}from"./p-ce928197.js";import{d as o}from"./p-1805f5b0.js";import{v as n}from"./p-5d7f4ff2.js";function a(s){if(typeof s!=="string"){throw new TypeError("Expected a string")}return s.replace(/[|\\{}()[\]^$+*?.]/g,"\\$&").replace(/-/g,"\\x2d")}const r=".sc-dso-autosuggest-h{display:block;position:relative}ul.sc-dso-autosuggest,.autosuggest-progress-box.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-top:2px;padding:4px 0;position:absolute;left:0;right:0;top:100%;z-index:200}.autosuggest-progress-box.sc-dso-autosuggest{padding:12px 8px}ul.sc-dso-autosuggest{padding:8px 0}ul.sc-dso-autosuggest li.sc-dso-autosuggest{display:flex;justify-content:space-between;padding:4px 16px}li[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#39870c}li[aria-selected=true].sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .type.sc-dso-autosuggest{color:#fff}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest{color:#666}";const l=class{constructor(i){s(this,i);this.dsoSelect=t(this,"dsoSelect",7);this.dsoChange=t(this,"dsoChange",7);this.dsoSearch=t(this,"dsoSearch",7);this.listboxId=n();this.inputId=n();this.labelId=n();this.debouncedEmitValue=o((s=>{this.dsoChange.emit(s);this.debouncedShowLoading()}),200);this.debouncedShowLoading=o((()=>{if(this.inputValue){this.showLoading=true}}),this.loadingDelayed);this.inputValue="";this.onInput=s=>{if(!(s.target instanceof HTMLInputElement)){throw new Error("event.target is not instanceof HTMLInputElement")}this.showLoading=!this.loadingDelayed;this.inputValue=s.target.value;this.debouncedEmitValue(s.target.value.match(/(\S+)/g)?s.target.value:"")};this.onFocusIn=()=>{if(this.suggestOnFocus){this.openSuggestions()}};this.onKeyDown=s=>{if(s.defaultPrevented||this.loading){return}switch(s.key){case"ArrowDown":if(!this.showSuggestions){this.openSuggestions("first")}else{this.selectNextSuggestion()}break;case"ArrowUp":if(!this.showSuggestions){this.openSuggestions("last")}else{this.selectPreviousSuggestion()}break;case"Tab":this.closeSuggestions();return;case"Escape":this.closeSuggestions();break;case"Enter":this.pickSelectedValue();break;default:return}s.preventDefault()};this.suggestions=null;this.loading=false;this.loadingLabel="Een moment geduld.";this.loadingDelayed=undefined;this.notFoundLabel=undefined;this.suggestOnFocus=false;this.showSuggestions=false;this.selectedSuggestion=undefined;this.notFound=false;this.showLoading=false}suggestionsWatcher(){this.resetSelectedSuggestion();if((!this.showSuggestions||!this.notFound)&&this.inputValue){this.openSuggestions()}else if((this.showSuggestions||this.notFound)&&!this.inputValue){this.closeSuggestions()}}onDocumentClick(s){if((this.showSuggestions||this.notFound)&&this.listbox&&s.target instanceof Node&&!this.listbox.contains(s.target)&&this.input!==s.target){this.closeSuggestions()}}connectedCallback(){setTimeout((()=>{const s=this.host.querySelector('input[type="text"]');if(!(s instanceof HTMLInputElement)){throw new ReferenceError("Mandatory text input not found")}this.input=s;if(s.id){this.inputId=s.id}else{s.id=this.inputId}if(!this.input.labels||this.input.labels.length<1){throw new ReferenceError("Mandatory label for text input not found")}const t=this.input.labels[0];if(t===null||t===void 0?void 0:t.id){this.labelId=t.id}else if(t){t.id=this.labelId}this.input.setAttribute("role","combobox");this.input.setAttribute("aria-haspopup","listbox");this.input.setAttribute("aria-controls",this.listboxId);this.input.setAttribute("aria-expanded","false");this.input.setAttribute("autocomplete","off");this.input.setAttribute("aria-autocomplete","list");this.input.setAttribute("aria-activedescendant","");this.input.addEventListener("input",this.onInput);this.input.addEventListener("keydown",this.onKeyDown);this.input.addEventListener("focusin",this.onFocusIn)}))}disconnectedCallback(){var s,t,i;(s=this.input)===null||s===void 0?void 0:s.removeEventListener("input",this.onInput);(t=this.input)===null||t===void 0?void 0:t.removeEventListener("keydown",this.onKeyDown);(i=this.input)===null||i===void 0?void 0:i.removeEventListener("focusin",this.onFocusIn)}markTerms(s,t){if(!s||!t||t.length===0||t[0]===undefined){return[""]}const e=new RegExp(`(${a(t[0])})`,"gi");return s.split(e).map((s=>{if(!s){return""}if(e.test(s)){return i("mark",null,s)}if(t.length===1){return i("span",null,s)}return this.markTerms(s,t.slice(1))}))}selectSuggestion(s){var t;this.selectedSuggestion=s;(t=this.input)===null||t===void 0?void 0:t.setAttribute("aria-activedescendant",this.listboxItemId(s))}selectFirstSuggestion(){var s;if(!this.suggestions){return}this.selectedSuggestion=this.suggestions[0];if(this.selectedSuggestion){(s=this.input)===null||s===void 0?void 0:s.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}}selectLastSuggestion(){var s;if(!this.suggestions){return}this.selectedSuggestion=this.suggestions[this.suggestions.length-1];if(this.selectedSuggestion){(s=this.input)===null||s===void 0?void 0:s.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}}selectNextSuggestion(){var s,t;if(!this.suggestions){return}const i=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):-1;this.selectedSuggestion=(s=this.suggestions[i+1])!==null&&s!==void 0?s:this.suggestions[0];if(this.selectedSuggestion){(t=this.input)===null||t===void 0?void 0:t.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}}selectPreviousSuggestion(){var s,t;if(!this.suggestions){return}const i=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):0;this.selectedSuggestion=(s=this.suggestions[i-1])!==null&&s!==void 0?s:this.suggestions[this.suggestions.length-1];if(this.selectedSuggestion){(t=this.input)===null||t===void 0?void 0:t.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}}resetSelectedSuggestion(){var s;this.showLoading=!this.loadingDelayed;this.notFound=false;this.selectedSuggestion=undefined;(s=this.input)===null||s===void 0?void 0:s.setAttribute("aria-activedescendant","")}openSuggestions(s){var t,i,e,h;this.showSuggestions=(t=this.suggestions&&this.suggestions.length>0)!==null&&t!==void 0?t:false;this.notFound=(e=((i=this.suggestions)===null||i===void 0?void 0:i.length)===0)!==null&&e!==void 0?e:false;(h=this.input)===null||h===void 0?void 0:h.setAttribute("aria-expanded",(this.showSuggestions||this.notFound).toString());if(this.showSuggestions&&s==="first"){this.selectFirstSuggestion()}else if(this.showSuggestions&&s==="last"){this.selectLastSuggestion()}}closeSuggestions(){var s;this.showSuggestions=false;this.notFound=false;(s=this.input)===null||s===void 0?void 0:s.setAttribute("aria-expanded","false");this.selectFirstSuggestion()}pickSelectedValue(){var s;if(this.selectedSuggestion&&this.showSuggestions){this.dsoSelect.emit(this.selectedSuggestion)}else{this.dsoSearch.emit((s=this.input)===null||s===void 0?void 0:s.value)}this.closeSuggestions()}listboxItemId(s){if(!this.suggestions){return""}return`${this.inputId}-${this.suggestions.indexOf(s)+1}`}render(){var s,t;const h=(t=(s=this.input)===null||s===void 0?void 0:s.value.split(" ").filter((s=>s)))!==null&&t!==void 0?t:[];return i(e,null,i("slot",null),this.loading&&this.showLoading?i("div",{class:"autosuggest-progress-box"},i("dso-progress-indicator",{label:this.loadingLabel})):i("ul",{role:"listbox",id:this.listboxId,"aria-labelledby":this.labelId,ref:s=>this.listbox=s,hidden:!this.showSuggestions&&!this.notFound},this.showSuggestions&&this.suggestions&&this.suggestions.map((s=>i("li",{role:"option",id:this.listboxItemId(s),key:s.value,onMouseEnter:()=>this.selectSuggestion(s),onMouseLeave:()=>this.resetSelectedSuggestion(),onClick:()=>this.pickSelectedValue(),"aria-selected":(s===this.selectedSuggestion).toString(),"aria-label":s.value},i("span",{class:"value"},this.markTerms(s.value,h)),s.type?i("span",{class:"type"},s.type):undefined)))||this.notFound&&i("li",null,i("span",{class:"value"},!this.notFoundLabel?this.markTerms(`${this.inputValue} is niet gevonden.`,h):i("span",null,this.notFoundLabel)))))}get host(){return h(this)}static get watchers(){return{suggestions:["suggestionsWatcher"]}}};l.style=r;export{l as dso_autosuggest};
-//# sourceMappingURL=p-168750a2.entry.js.map
+import{r as s,c as t,h as i,F as e,a as h}from"./p-1a1a43fd.js";import{d as o}from"./p-1805f5b0.js";import{v as n}from"./p-5d7f4ff2.js";function a(s){if(typeof s!=="string"){throw new TypeError("Expected a string")}return s.replace(/[|\\{}()[\]^$+*?.]/g,"\\$&").replace(/-/g,"\\x2d")}const r=".sc-dso-autosuggest-h{display:block;position:relative}ul.sc-dso-autosuggest,.autosuggest-progress-box.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-top:2px;padding:4px 0;position:absolute;left:0;right:0;top:100%;z-index:200}.autosuggest-progress-box.sc-dso-autosuggest{padding:12px 8px}ul.sc-dso-autosuggest{padding:8px 0}ul.sc-dso-autosuggest li.sc-dso-autosuggest{display:flex;justify-content:space-between;padding:4px 16px}li[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#39870c}li[aria-selected=true].sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .type.sc-dso-autosuggest{color:#fff}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest{color:#666}";const l=class{constructor(i){s(this,i);this.dsoSelect=t(this,"dsoSelect",7);this.dsoChange=t(this,"dsoChange",7);this.dsoSearch=t(this,"dsoSearch",7);this.listboxId=n();this.inputId=n();this.labelId=n();this.debouncedEmitValue=o((s=>{this.dsoChange.emit(s);this.debouncedShowLoading()}),200);this.debouncedShowLoading=o((()=>{if(this.inputValue){this.showLoading=true}}),this.loadingDelayed);this.inputValue="";this.onInput=s=>{if(!(s.target instanceof HTMLInputElement)){throw new Error("event.target is not instanceof HTMLInputElement")}this.showLoading=!this.loadingDelayed;this.inputValue=s.target.value;this.debouncedEmitValue(s.target.value.match(/(\S+)/g)?s.target.value:"")};this.onFocusIn=()=>{if(this.suggestOnFocus){this.openSuggestions()}};this.onKeyDown=s=>{if(s.defaultPrevented||this.loading){return}switch(s.key){case"ArrowDown":if(!this.showSuggestions){this.openSuggestions("first")}else{this.selectNextSuggestion()}break;case"ArrowUp":if(!this.showSuggestions){this.openSuggestions("last")}else{this.selectPreviousSuggestion()}break;case"Tab":this.closeSuggestions();return;case"Escape":this.closeSuggestions();break;case"Enter":this.pickSelectedValue();break;default:return}s.preventDefault()};this.suggestions=null;this.loading=false;this.loadingLabel="Een moment geduld.";this.loadingDelayed=undefined;this.notFoundLabel=undefined;this.suggestOnFocus=false;this.showSuggestions=false;this.selectedSuggestion=undefined;this.notFound=false;this.showLoading=false}suggestionsWatcher(){this.resetSelectedSuggestion();if((!this.showSuggestions||!this.notFound)&&this.inputValue){this.openSuggestions()}else if((this.showSuggestions||this.notFound)&&!this.inputValue){this.closeSuggestions()}}onDocumentClick(s){if((this.showSuggestions||this.notFound)&&this.listbox&&s.target instanceof Node&&!this.listbox.contains(s.target)&&this.input!==s.target){this.closeSuggestions()}}connectedCallback(){setTimeout((()=>{const s=this.host.querySelector('input[type="text"]');if(!(s instanceof HTMLInputElement)){throw new ReferenceError("Mandatory text input not found")}this.input=s;if(s.id){this.inputId=s.id}else{s.id=this.inputId}if(!this.input.labels||this.input.labels.length<1){throw new ReferenceError("Mandatory label for text input not found")}const t=this.input.labels[0];if(t===null||t===void 0?void 0:t.id){this.labelId=t.id}else if(t){t.id=this.labelId}this.input.setAttribute("role","combobox");this.input.setAttribute("aria-haspopup","listbox");this.input.setAttribute("aria-controls",this.listboxId);this.input.setAttribute("aria-expanded","false");this.input.setAttribute("autocomplete","off");this.input.setAttribute("aria-autocomplete","list");this.input.setAttribute("aria-activedescendant","");this.input.addEventListener("input",this.onInput);this.input.addEventListener("keydown",this.onKeyDown);this.input.addEventListener("focusin",this.onFocusIn)}))}disconnectedCallback(){var s,t,i;(s=this.input)===null||s===void 0?void 0:s.removeEventListener("input",this.onInput);(t=this.input)===null||t===void 0?void 0:t.removeEventListener("keydown",this.onKeyDown);(i=this.input)===null||i===void 0?void 0:i.removeEventListener("focusin",this.onFocusIn)}markTerms(s,t){if(!s||!t||t.length===0||t[0]===undefined){return[""]}const e=new RegExp(`(${a(t[0])})`,"gi");return s.split(e).map((s=>{if(!s){return""}if(e.test(s)){return i("mark",null,s)}if(t.length===1){return i("span",null,s)}return this.markTerms(s,t.slice(1))}))}selectSuggestion(s){var t;this.selectedSuggestion=s;(t=this.input)===null||t===void 0?void 0:t.setAttribute("aria-activedescendant",this.listboxItemId(s))}selectFirstSuggestion(){var s;if(!this.suggestions){return}this.selectedSuggestion=this.suggestions[0];if(this.selectedSuggestion){(s=this.input)===null||s===void 0?void 0:s.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}}selectLastSuggestion(){var s;if(!this.suggestions){return}this.selectedSuggestion=this.suggestions[this.suggestions.length-1];if(this.selectedSuggestion){(s=this.input)===null||s===void 0?void 0:s.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}}selectNextSuggestion(){var s,t;if(!this.suggestions){return}const i=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):-1;this.selectedSuggestion=(s=this.suggestions[i+1])!==null&&s!==void 0?s:this.suggestions[0];if(this.selectedSuggestion){(t=this.input)===null||t===void 0?void 0:t.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}}selectPreviousSuggestion(){var s,t;if(!this.suggestions){return}const i=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):0;this.selectedSuggestion=(s=this.suggestions[i-1])!==null&&s!==void 0?s:this.suggestions[this.suggestions.length-1];if(this.selectedSuggestion){(t=this.input)===null||t===void 0?void 0:t.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}}resetSelectedSuggestion(){var s;this.showLoading=!this.loadingDelayed;this.notFound=false;this.selectedSuggestion=undefined;(s=this.input)===null||s===void 0?void 0:s.setAttribute("aria-activedescendant","")}openSuggestions(s){var t,i,e,h;this.showSuggestions=(t=this.suggestions&&this.suggestions.length>0)!==null&&t!==void 0?t:false;this.notFound=(e=((i=this.suggestions)===null||i===void 0?void 0:i.length)===0)!==null&&e!==void 0?e:false;(h=this.input)===null||h===void 0?void 0:h.setAttribute("aria-expanded",(this.showSuggestions||this.notFound).toString());if(this.showSuggestions&&s==="first"){this.selectFirstSuggestion()}else if(this.showSuggestions&&s==="last"){this.selectLastSuggestion()}}closeSuggestions(){var s;this.showSuggestions=false;this.notFound=false;(s=this.input)===null||s===void 0?void 0:s.setAttribute("aria-expanded","false");this.selectFirstSuggestion()}pickSelectedValue(){var s;if(this.selectedSuggestion&&this.showSuggestions){this.dsoSelect.emit(this.selectedSuggestion)}else{this.dsoSearch.emit((s=this.input)===null||s===void 0?void 0:s.value)}this.closeSuggestions()}listboxItemId(s){if(!this.suggestions){return""}return`${this.inputId}-${this.suggestions.indexOf(s)+1}`}render(){var s,t;const h=(t=(s=this.input)===null||s===void 0?void 0:s.value.split(" ").filter((s=>s)))!==null&&t!==void 0?t:[];return i(e,null,i("slot",null),this.loading&&this.showLoading?i("div",{class:"autosuggest-progress-box"},i("dso-progress-indicator",{label:this.loadingLabel})):i("ul",{role:"listbox",id:this.listboxId,"aria-labelledby":this.labelId,ref:s=>this.listbox=s,hidden:!this.showSuggestions&&!this.notFound},this.showSuggestions&&this.suggestions&&this.suggestions.map((s=>i("li",{role:"option",id:this.listboxItemId(s),key:s.value,onMouseEnter:()=>this.selectSuggestion(s),onMouseLeave:()=>this.resetSelectedSuggestion(),onClick:()=>this.pickSelectedValue(),"aria-selected":(s===this.selectedSuggestion).toString(),"aria-label":s.value},i("span",{class:"value"},this.markTerms(s.value,h)),s.type?i("span",{class:"type"},s.type):undefined)))||this.notFound&&i("li",null,i("span",{class:"value"},!this.notFoundLabel?this.markTerms(`${this.inputValue} is niet gevonden.`,h):i("span",null,this.notFoundLabel)))))}get host(){return h(this)}static get watchers(){return{suggestions:["suggestionsWatcher"]}}};l.style=r;export{l as dso_autosuggest};
+//# sourceMappingURL=p-b76768a5.entry.js.map

package/dist/dso-toolkit/{p-e86e0fce.entry.js → p-b9d441d5.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,c as o,h as e,F as d,a as r}from"./p-ce928197.js";import{c as i}from"./p-6a1980b4.js";import{d as a}from"./p-1805f5b0.js";import{i as t}from"./p-33df9903.js";const n=".sc-dso-header-h{display:block}.dso-header.sc-dso-header{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}@media screen and (min-width: 768px){.dso-header.sc-dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down.sc-dso-header{flex-wrap:nowrap}}.dso-header.sc-dso-header .dso-nav.sc-dso-header{border:0}.logo-container.sc-dso-header{display:flex;flex-wrap:wrap;gap:0 24px;padding-bottom:16px;padding-top:16px}.login.sc-dso-header .dso-tertiary.sc-dso-header,.logout.sc-dso-header .dso-tertiary.sc-dso-header{cursor:pointer;font-family:Asap, sans-serif;font-weight:600;vertical-align:text-bottom}.profile.sc-dso-header a.sc-dso-header,.logout.sc-dso-header a.sc-dso-header,.login.sc-dso-header a.sc-dso-header{text-decoration:none;color:#39870c;font-weight:600}.profile.sc-dso-header a.sc-dso-header:hover,.profile.sc-dso-header a.sc-dso-header:focus,.logout.sc-dso-header a.sc-dso-header:hover,.logout.sc-dso-header a.sc-dso-header:focus,.login.sc-dso-header a.sc-dso-header:hover,.login.sc-dso-header a.sc-dso-header:focus{text-decoration:none}.profile.sc-dso-header a.sc-dso-header:active,.logout.sc-dso-header a.sc-dso-header:active,.login.sc-dso-header a.sc-dso-header:active{text-decoration:underline}.profile.sc-dso-header a.sc-dso-header:focus,.logout.sc-dso-header a.sc-dso-header:focus,.login.sc-dso-header a.sc-dso-header:focus{color:#fff}.dso-header-session.sc-dso-header{display:flex;margin-left:auto}.dso-header-session.sc-dso-header .profile.sc-dso-header a.sc-dso-header{margin-left:8px}.dso-header-session.sc-dso-header .profile.sc-dso-header+.logout.sc-dso-header{border-left:3px solid #ccc;margin-left:16px;padding-left:16px}.dso-navbar.sc-dso-header{flex-basis:100%}.dso-navbar.sc-dso-header .dso-dropdown-options.sc-dso-header{border-top:1px solid #ccc}dso-dropdown-menu.sc-dso-header button.sc-dso-header{align-items:flex-end;background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;padding-right:32px}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{border:0;border-radius:0}@media screen and (min-width: 768px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:375px}}@media screen and (max-width: 767px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:100%}}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.sc-dso-header{color:#275937;font-size:1.25rem;padding:16px;white-space:pre-wrap}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:focus,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.sc-dso-header:focus{color:#fff}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:hover,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.sc-dso-header:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.dso-active.sc-dso-header a.sc-dso-header{font-weight:600}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header+li.sc-dso-header{border-top:1px solid #ccc}.dropdown.sc-dso-header{margin-left:auto}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{position:static}@media screen and (max-width: 767px){.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{margin-top:28px}}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{right:0;top:100%}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header{color:#39870c;font-size:16px;font-weight:600;line-height:normal;position:relative}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:50%;transform:translateY(-50%)}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header:hover,.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.sc-dso-header{align-items:end;column-gap:32px;display:flex;list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.dso-nav.sc-dso-header>li.sc-dso-header{margin-bottom:4px}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header{display:block}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:visited{color:#275937}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header{margin-bottom:0}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header>a.sc-dso-header{border-bottom:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main.sc-dso-header{display:flex !important}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header{text-decoration:none;font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;white-space:nowrap}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:active{text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{left:-1rem !important;top:3px !important}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;align-items:center;color:#275937;padding-right:32px}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:auto;transform:none}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header{margin-left:auto}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header dso-icon.sc-dso-header{height:1em;margin-right:8px;position:relative;top:-2px;width:1.2em}";const h=992;const c=class{constructor(d){s(this,d);this.dsoHeaderClick=o(this,"dsoHeaderClick",7);this.onWindowResize=a((()=>{var s,o;(s=this.dropdownElement)===null||s===void 0?void 0:s.removeAttribute("open");(o=this.dropdownElement)===null||o===void 0?void 0:o.removeAttribute("tabindex");this.setDropDownMenu();this.setOverflowMenu();if(this.showDropDown){this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset()}}),100);this.MenuItem=s=>e("li",{class:s.active?"dso-active":undefined},e("a",{href:s.url,"aria-current":s.active?"page":undefined,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:s})},s.label));this.mainMenu=[];this.useDropDownMenu="auto";this.authStatus="none";this.loginUrl=undefined;this.logoutUrl=undefined;this.userProfileName=undefined;this.userProfileUrl=undefined;this.userHomeUrl=undefined;this.userHomeActive=undefined;this.showDropDown=undefined;this.hasSubLogo=false;this.overflowMenuItems=0;this.dropdownOptionsOffset=0}clickHandler(s,o,e){var d,r;this.dsoHeaderClick.emit({originalEvent:s,isModifiedEvent:t(s),type:o,menuItem:e===null||e===void 0?void 0:e.menuItem,url:(d=e===null||e===void 0?void 0:e.url)!==null&&d!==void 0?d:(r=e===null||e===void 0?void 0:e.menuItem)===null||r===void 0?void 0:r.url})}setShowDropDown(s){if(s==="auto"){this.setDropDownMenu();return}this.showDropDown=s==="always"}componentWillLoad(){this.hasSubLogo=this.host.querySelector("*[slot = 'sub-logo']")!==null}shrinkMenuToFit(){if(!this.wrapper||!this.nav){return}if(this.wrapper.clientWidth>=this.nav.clientWidth){return}if(this.mainMenu&&this.overflowMenuItems>=this.mainMenu.length){return}this.overflowMenuItems++}componentDidRender(){if(this.showDropDown){this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset();return}window.setTimeout((()=>this.shrinkMenuToFit()),0)}componentDidLoad(){this.setShowDropDown(this.useDropDownMenu);if(this.showDropDown){this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset()}}setOverflowMenu(){if(this.showDropDown){return}if(this.overflowMenuItems!==0){this.overflowMenuItems=0;return}this.shrinkMenuToFit()}setDropDownMenu(){if(this.useDropDownMenu!=="auto"){return}this.showDropDown=window.innerWidth<h}calculateDropdownOptionsOffset(){var s;if(!this.dropdownElement){return 0}return this.host.clientHeight-(((s=this.dropdownElement)===null||s===void 0?void 0:s.getBoundingClientRect().bottom)-this.host.getBoundingClientRect().top)}connectedCallback(){window.addEventListener("resize",this.onWindowResize)}disconnectedCallback(){window.removeEventListener("resize",this.onWindowResize)}render(){if(this.showDropDown===undefined){return}return e(d,null,e("div",{class:i("dso-header",{["use-drop-down"]:this.showDropDown,["has-sub-logo"]:this.hasSubLogo}),ref:s=>this.wrapper=s},e("div",{class:"logo-container"},e("div",{class:"logo"},e("slot",{name:"logo"})),e("div",{class:"sub-logo"},e("slot",{name:"sub-logo"}))),this.showDropDown&&this.mainMenu&&(this.mainMenu.length>0||this.userHomeUrl||this.authStatus!=="none")&&e("div",{class:"dropdown"},e("dso-dropdown-menu",{"dropdown-align":"right",strategy:"absolute",dropdownOptionsOffset:this.dropdownOptionsOffset,ref:s=>this.dropdownElement=s},e("button",{type:"button",slot:"toggle"},e("span",null,"Menu")),e("div",{class:"dso-dropdown-options"},e("ul",null,this.mainMenu.map(this.MenuItem),this.userHomeUrl&&e("li",null,e("a",{href:this.userHomeUrl,onClick:s=>this.clickHandler(s,"userHome",{url:this.userHomeUrl})},"Mijn Omgevingsloket")),this.userProfileUrl&&this.userProfileName&&this.authStatus==="loggedIn"&&e("li",null,e("a",{href:this.userProfileUrl,onClick:s=>this.clickHandler(s,"profile",{url:this.userProfileUrl})},this.userProfileName,e("span",{class:"profile-label"}," - Mijn profiel"))),this.authStatus==="loggedOut"&&e("li",null,this.loginUrl?e("a",{href:this.loginUrl,onClick:s=>this.clickHandler(s,"login",{url:this.loginUrl})},"Inloggen"):e("button",{type:"button",onClick:s=>this.clickHandler(s,"login")},"Inloggen")),this.authStatus==="loggedIn"&&e("li",null,this.logoutUrl?e("a",{href:this.logoutUrl,onClick:s=>this.clickHandler(s,"logout",{url:this.logoutUrl})},"Uitloggen"):e("button",{type:"button",onClick:s=>this.clickHandler(s,"logout")},"Uitloggen")))))),!this.showDropDown&&e(d,null,e("div",{class:"dso-header-session"},this.userProfileUrl&&this.userProfileName&&this.authStatus==="loggedIn"&&e("div",{class:"profile"},e("span",{class:"profile-label"},"Welkom:"),e("a",{href:this.userProfileUrl,onClick:s=>this.clickHandler(s,"profile",{url:this.userProfileUrl})},this.userProfileName)),this.authStatus==="loggedOut"&&e("div",{class:"login"},this.loginUrl?e("a",{href:this.loginUrl,onClick:s=>this.clickHandler(s,"login",{url:this.loginUrl})},"Inloggen"):e("button",{class:"dso-tertiary",type:"button",onClick:s=>this.clickHandler(s,"login")},"Inloggen")),this.authStatus==="loggedIn"&&e("div",{class:"logout"},this.logoutUrl?e("a",{href:this.logoutUrl,onClick:s=>this.clickHandler(s,"logout",{url:this.logoutUrl})},"Uitloggen"):e("button",{class:"dso-tertiary",type:"button",onClick:s=>this.clickHandler(s,"logout")},"Uitloggen"))),(this.mainMenu&&this.mainMenu.length>0||this.userHomeUrl)&&e("nav",{class:"dso-navbar"},e("ul",{class:"dso-nav dso-nav-main",ref:s=>this.nav=s},this.mainMenu&&this.mainMenu.filter(((s,o)=>this.mainMenu&&o<this.mainMenu.length-this.overflowMenuItems)).map(this.MenuItem),this.overflowMenuItems>0&&e("li",null,e("dso-dropdown-menu",{"dropdown-align":"left"},e("button",{type:"button",slot:"toggle"},e("span",null,"Meer")),e("div",{class:"dso-dropdown-options"},e("ul",null,this.mainMenu&&this.mainMenu.filter(((s,o)=>this.mainMenu&&o>=this.mainMenu.length-this.overflowMenuItems)).map(this.MenuItem))))),this.userHomeUrl&&e("li",{class:i("menu-user-home",{"dso-active":this.userHomeActive})},e("a",{href:this.userHomeUrl,"aria-current":this.userHomeActive?"page":undefined,onClick:s=>this.clickHandler(s,"userHome",{url:this.userHomeUrl})},e("dso-icon",{icon:"user-line"}),"Mijn Omgevingsloket")))))))}get host(){return r(this)}static get watchers(){return{useDropDownMenu:["setShowDropDown"]}}};c.style=n;export{c as dso_header};
-//# sourceMappingURL=p-e86e0fce.entry.js.map
+import{r as s,c as o,h as e,F as d,a as r}from"./p-1a1a43fd.js";import{c as i}from"./p-6a1980b4.js";import{d as a}from"./p-1805f5b0.js";import{i as t}from"./p-33df9903.js";const n=".sc-dso-header-h{display:block}.dso-header.sc-dso-header{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}@media screen and (min-width: 768px){.dso-header.sc-dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down.sc-dso-header{flex-wrap:nowrap}}.dso-header.sc-dso-header .dso-nav.sc-dso-header{border:0}.logo-container.sc-dso-header{display:flex;flex-wrap:wrap;gap:0 24px;padding-bottom:16px;padding-top:16px}.login.sc-dso-header .dso-tertiary.sc-dso-header,.logout.sc-dso-header .dso-tertiary.sc-dso-header{cursor:pointer;font-family:Asap, sans-serif;font-weight:600;vertical-align:text-bottom}.profile.sc-dso-header a.sc-dso-header,.logout.sc-dso-header a.sc-dso-header,.login.sc-dso-header a.sc-dso-header{text-decoration:none;color:#39870c;font-weight:600}.profile.sc-dso-header a.sc-dso-header:hover,.profile.sc-dso-header a.sc-dso-header:focus,.logout.sc-dso-header a.sc-dso-header:hover,.logout.sc-dso-header a.sc-dso-header:focus,.login.sc-dso-header a.sc-dso-header:hover,.login.sc-dso-header a.sc-dso-header:focus{text-decoration:none}.profile.sc-dso-header a.sc-dso-header:active,.logout.sc-dso-header a.sc-dso-header:active,.login.sc-dso-header a.sc-dso-header:active{text-decoration:underline}.profile.sc-dso-header a.sc-dso-header:focus,.logout.sc-dso-header a.sc-dso-header:focus,.login.sc-dso-header a.sc-dso-header:focus{color:#fff}.dso-header-session.sc-dso-header{display:flex;margin-left:auto}.dso-header-session.sc-dso-header .profile.sc-dso-header a.sc-dso-header{margin-left:8px}.dso-header-session.sc-dso-header .profile.sc-dso-header+.logout.sc-dso-header{border-left:3px solid #ccc;margin-left:16px;padding-left:16px}.dso-navbar.sc-dso-header{flex-basis:100%}.dso-navbar.sc-dso-header .dso-dropdown-options.sc-dso-header{border-top:1px solid #ccc}dso-dropdown-menu.sc-dso-header button.sc-dso-header{align-items:flex-end;background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;padding-right:32px}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{border:0;border-radius:0}@media screen and (min-width: 768px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:375px}}@media screen and (max-width: 767px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:100%}}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.sc-dso-header{color:#275937;font-size:1.25rem;padding:16px;white-space:pre-wrap}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:focus,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.sc-dso-header:focus{color:#fff}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:hover,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.sc-dso-header:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.dso-active.sc-dso-header a.sc-dso-header{font-weight:600}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header+li.sc-dso-header{border-top:1px solid #ccc}.dropdown.sc-dso-header{margin-left:auto}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{position:static}@media screen and (max-width: 767px){.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{margin-top:28px}}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{right:0;top:100%}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header{color:#39870c;font-size:16px;font-weight:600;line-height:normal;position:relative}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:50%;transform:translateY(-50%)}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header:hover,.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.sc-dso-header{align-items:end;column-gap:32px;display:flex;list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.dso-nav.sc-dso-header>li.sc-dso-header{margin-bottom:4px}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header{display:block}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:visited{color:#275937}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header{margin-bottom:0}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header>a.sc-dso-header{border-bottom:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main.sc-dso-header{display:flex !important}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header{text-decoration:none;font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;white-space:nowrap}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:active{text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{left:-1rem !important;top:3px !important}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;align-items:center;color:#275937;padding-right:32px}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:auto;transform:none}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header{margin-left:auto}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header dso-icon.sc-dso-header{height:1em;margin-right:8px;position:relative;top:-2px;width:1.2em}";const h=992;const c=class{constructor(d){s(this,d);this.dsoHeaderClick=o(this,"dsoHeaderClick",7);this.onWindowResize=a((()=>{var s,o;(s=this.dropdownElement)===null||s===void 0?void 0:s.removeAttribute("open");(o=this.dropdownElement)===null||o===void 0?void 0:o.removeAttribute("tabindex");this.setDropDownMenu();this.setOverflowMenu();if(this.showDropDown){this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset()}}),100);this.MenuItem=s=>e("li",{class:s.active?"dso-active":undefined},e("a",{href:s.url,"aria-current":s.active?"page":undefined,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:s})},s.label));this.mainMenu=[];this.useDropDownMenu="auto";this.authStatus="none";this.loginUrl=undefined;this.logoutUrl=undefined;this.userProfileName=undefined;this.userProfileUrl=undefined;this.userHomeUrl=undefined;this.userHomeActive=undefined;this.showDropDown=undefined;this.hasSubLogo=false;this.overflowMenuItems=0;this.dropdownOptionsOffset=0}clickHandler(s,o,e){var d,r;this.dsoHeaderClick.emit({originalEvent:s,isModifiedEvent:t(s),type:o,menuItem:e===null||e===void 0?void 0:e.menuItem,url:(d=e===null||e===void 0?void 0:e.url)!==null&&d!==void 0?d:(r=e===null||e===void 0?void 0:e.menuItem)===null||r===void 0?void 0:r.url})}setShowDropDown(s){if(s==="auto"){this.setDropDownMenu();return}this.showDropDown=s==="always"}componentWillLoad(){this.hasSubLogo=this.host.querySelector("*[slot = 'sub-logo']")!==null}shrinkMenuToFit(){if(!this.wrapper||!this.nav){return}if(this.wrapper.clientWidth>=this.nav.clientWidth){return}if(this.mainMenu&&this.overflowMenuItems>=this.mainMenu.length){return}this.overflowMenuItems++}componentDidRender(){if(this.showDropDown){this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset();return}window.setTimeout((()=>this.shrinkMenuToFit()),0)}componentDidLoad(){this.setShowDropDown(this.useDropDownMenu);if(this.showDropDown){this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset()}}setOverflowMenu(){if(this.showDropDown){return}if(this.overflowMenuItems!==0){this.overflowMenuItems=0;return}this.shrinkMenuToFit()}setDropDownMenu(){if(this.useDropDownMenu!=="auto"){return}this.showDropDown=window.innerWidth<h}calculateDropdownOptionsOffset(){var s;if(!this.dropdownElement){return 0}return this.host.clientHeight-(((s=this.dropdownElement)===null||s===void 0?void 0:s.getBoundingClientRect().bottom)-this.host.getBoundingClientRect().top)}connectedCallback(){window.addEventListener("resize",this.onWindowResize)}disconnectedCallback(){window.removeEventListener("resize",this.onWindowResize)}render(){if(this.showDropDown===undefined){return}return e(d,null,e("div",{class:i("dso-header",{["use-drop-down"]:this.showDropDown,["has-sub-logo"]:this.hasSubLogo}),ref:s=>this.wrapper=s},e("div",{class:"logo-container"},e("div",{class:"logo"},e("slot",{name:"logo"})),e("div",{class:"sub-logo"},e("slot",{name:"sub-logo"}))),this.showDropDown&&this.mainMenu&&(this.mainMenu.length>0||this.userHomeUrl||this.authStatus!=="none")&&e("div",{class:"dropdown"},e("dso-dropdown-menu",{"dropdown-align":"right",strategy:"absolute",dropdownOptionsOffset:this.dropdownOptionsOffset,ref:s=>this.dropdownElement=s},e("button",{type:"button",slot:"toggle"},e("span",null,"Menu")),e("div",{class:"dso-dropdown-options"},e("ul",null,this.mainMenu.map(this.MenuItem),this.userHomeUrl&&e("li",null,e("a",{href:this.userHomeUrl,onClick:s=>this.clickHandler(s,"userHome",{url:this.userHomeUrl})},"Mijn Omgevingsloket")),this.userProfileUrl&&this.userProfileName&&this.authStatus==="loggedIn"&&e("li",null,e("a",{href:this.userProfileUrl,onClick:s=>this.clickHandler(s,"profile",{url:this.userProfileUrl})},this.userProfileName,e("span",{class:"profile-label"}," - Mijn profiel"))),this.authStatus==="loggedOut"&&e("li",null,this.loginUrl?e("a",{href:this.loginUrl,onClick:s=>this.clickHandler(s,"login",{url:this.loginUrl})},"Inloggen"):e("button",{type:"button",onClick:s=>this.clickHandler(s,"login")},"Inloggen")),this.authStatus==="loggedIn"&&e("li",null,this.logoutUrl?e("a",{href:this.logoutUrl,onClick:s=>this.clickHandler(s,"logout",{url:this.logoutUrl})},"Uitloggen"):e("button",{type:"button",onClick:s=>this.clickHandler(s,"logout")},"Uitloggen")))))),!this.showDropDown&&e(d,null,e("div",{class:"dso-header-session"},this.userProfileUrl&&this.userProfileName&&this.authStatus==="loggedIn"&&e("div",{class:"profile"},e("span",{class:"profile-label"},"Welkom:"),e("a",{href:this.userProfileUrl,onClick:s=>this.clickHandler(s,"profile",{url:this.userProfileUrl})},this.userProfileName)),this.authStatus==="loggedOut"&&e("div",{class:"login"},this.loginUrl?e("a",{href:this.loginUrl,onClick:s=>this.clickHandler(s,"login",{url:this.loginUrl})},"Inloggen"):e("button",{class:"dso-tertiary",type:"button",onClick:s=>this.clickHandler(s,"login")},"Inloggen")),this.authStatus==="loggedIn"&&e("div",{class:"logout"},this.logoutUrl?e("a",{href:this.logoutUrl,onClick:s=>this.clickHandler(s,"logout",{url:this.logoutUrl})},"Uitloggen"):e("button",{class:"dso-tertiary",type:"button",onClick:s=>this.clickHandler(s,"logout")},"Uitloggen"))),(this.mainMenu&&this.mainMenu.length>0||this.userHomeUrl)&&e("nav",{class:"dso-navbar"},e("ul",{class:"dso-nav dso-nav-main",ref:s=>this.nav=s},this.mainMenu&&this.mainMenu.filter(((s,o)=>this.mainMenu&&o<this.mainMenu.length-this.overflowMenuItems)).map(this.MenuItem),this.overflowMenuItems>0&&e("li",null,e("dso-dropdown-menu",{"dropdown-align":"left"},e("button",{type:"button",slot:"toggle"},e("span",null,"Meer")),e("div",{class:"dso-dropdown-options"},e("ul",null,this.mainMenu&&this.mainMenu.filter(((s,o)=>this.mainMenu&&o>=this.mainMenu.length-this.overflowMenuItems)).map(this.MenuItem))))),this.userHomeUrl&&e("li",{class:i("menu-user-home",{"dso-active":this.userHomeActive})},e("a",{href:this.userHomeUrl,"aria-current":this.userHomeActive?"page":undefined,onClick:s=>this.clickHandler(s,"userHome",{url:this.userHomeUrl})},e("dso-icon",{icon:"user-line"}),"Mijn Omgevingsloket")))))))}get host(){return r(this)}static get watchers(){return{useDropDownMenu:["setShowDropDown"]}}};c.style=n;export{c as dso_header};
+//# sourceMappingURL=p-b9d441d5.entry.js.map