npm - @dso-toolkit/core - Versions diffs - 58.1.0 → 58.2.0 - Mend

@dso-toolkit/core 58.1.0 → 58.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (481) hide show

package/dist/dso-toolkit/{p-918bcdbe.entry.js → p-f08a5a06.entry.js} RENAMED Viewed

@@ -1,2 +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
+import{h as n,r as t,c as o,H as e,a as s}from"./p-3ca5b6f4.js";import{c as i}from"./p-c87b4d11.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-f08a5a06.entry.js.map

package/dist/dso-toolkit/p-f08a5a06.entry.js.map ADDED Viewed

@@ -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,CAsClB,eAAAc,CAAgBC,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,CAKZ,sBAAAC,CAAuBC,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,EAKtB,kBAAAC,CAAmBP,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,EAclB,iBAAAG,GACEvB,OAAOwB,WAAWlC,KAAKC,gBAAgBmB,iBAAiB,SAAUpB,KAAKO,gBAEvEP,KAAKK,gBAAkBL,KAAKmC,KAAKC,cAA8B,2BAE/DpC,KAAKM,YAAcN,KAAKmC,KAAKC,cAA8B,sB,CAG7D,gBAAAC,G,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,EAIlB,iBAAAY,GACE,GAAIxC,KAAKyC,gBAAiB,CACxBzC,KAAKb,SAAWa,KAAKyC,e,EAIzB,oBAAAC,GACEhC,OAAOwB,WAAWlC,KAAKC,gBAAgB0C,oBAAoB,SAAU3C,KAAKO,e,CAGpE,sBAAAqC,CAAuBC,GAC7B7C,KAAK8C,oBAAoB9B,KAAK,CAAE+B,cAAeF,G,CAGzC,uBAAAG,CAAwBH,GAC9B7C,KAAKiD,qBAAqBjC,KAAK,CAAE+B,cAAeF,G,CAGlD,MAAAK,GACE,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-a1060560.entry.js → p-f0bc4a9d.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-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
+import{r as s,h as t,F as d}from"./p-3ca5b6f4.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-f0bc4a9d.entry.js.map

package/dist/dso-toolkit/p-f0bc4a9d.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["cardContainerCss","CardContainer","render","h","Fragment","this","mode","class"],"sources":["src/components/card-container/card-container.scss?tag=dso-card-container&encapsulation=shadow","src/components/card-container/card-container.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/card-container\";\r\n@use \"~dso-toolkit/src/components/list\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@use \"~dso-toolkit/src/components/grid/grid.variables\" as grid-variables;\r\n\r\n:host {\r\n .dso-card-list {\r\n @include list.unstyled();\r\n\r\n border-bottom: card-container.$border-width solid card-container.$border-color;\r\n margin-top: card-container.$border-width * -1;\r\n }\r\n\r\n .dso-card-grid {\r\n display: grid;\r\n gap: grid-variables.$grid-gutter-width;\r\n grid-auto-rows: 1fr;\r\n\r\n @media (max-width: media-query-breakpoints.$screen-sm-max) {\r\n grid-template-columns: repeat(1, 1fr);\r\n }\r\n\r\n @media (min-width: media-query-breakpoints.$screen-md-min) and (max-width: media-query-breakpoints.$screen-md-max) {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n @media (min-width: media-query-breakpoints.$screen-lg-min) {\r\n grid-template-columns: repeat(3, 1fr);\r\n }\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Fragment, Prop } from \"@stencil/core\";\r\nimport { CardContainerMode } from \"./card-container.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-card-container\",\r\n styleUrl: \"card-container.scss\",\r\n shadow: true,\r\n})\r\nexport class CardContainer implements ComponentInterface {\r\n /**\r\n * The mode of the Card Container.\r\n */\r\n @Prop({ reflect: true })\r\n mode: CardContainerMode = \"list\";\r\n\r\n render() {\r\n return (\r\n <>\r\n {this.mode === \"list\" && (\r\n <ul class=\"dso-card-list\">\r\n <slot />\r\n </ul>\r\n )}\r\n {this.mode === \"grid\" && (\r\n <div class=\"dso-card-grid\">\r\n <slot />\r\n </div>\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAmB,0b,MCQZC,EAAa,M,mCAKE,M,CAE1B,MAAAC,GACE,OACEC,EAAAC,EAAA,KACGC,KAAKC,OAAS,QACbH,EAAA,MAAII,MAAM,iBACRJ,EAAA,cAGHE,KAAKC,OAAS,QACbH,EAAA,OAAKI,MAAM,iBACTJ,EAAA,c"}

package/dist/dso-toolkit/p-fbb63820.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as s,c as t,h as e,H as i,a}from"./p-3ca5b6f4.js";import{c as n}from"./p-c87b4d11.js";import{i as o}from"./p-9747c291.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 c=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(i,{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 a(this)}};c.style=r;export{c as dso_card};
2	+ //# sourceMappingURL=p-fbb63820.entry.js.map

package/dist/dso-toolkit/p-fbb63820.entry.js.map ADDED Viewed

@@ -0,0 +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,CAQjB,iBAAAC,CAAkBC,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,CAGvF,iBAAAa,GACEV,KAAKW,aAAeX,KAAKE,KAAKU,cAAc,4BAA8B,KAC1EZ,KAAKa,SAAWb,KAAKE,KAAKU,cAAc,uBAAyB,I,CAGnE,MAAAE,GACE,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-871bfdf9.js → p-fd7891ef.js} RENAMED Viewed

@@ -1,2 +1,2 @@
 var r="top";var t="bottom";var n="right";var e="left";var a="auto";var i=[r,t,n,e];var o="start";var v="end";var f="clippingParents";var u="viewport";var c="popper";var s="reference";var l=i.reduce((function(r,t){return r.concat([t+"-"+o,t+"-"+v])}),[]);var d=[].concat(i,[a]).reduce((function(r,t){return r.concat([t,t+"-"+o,t+"-"+v])}),[]);var p="beforeRead";var b="read";var h="afterRead";var y="beforeMain";var m="main";var x="afterMain";var w="beforeWrite";var O="write";var g="afterWrite";var j=[p,b,h,y,m,x,w,O,g];function M(r){return r?(r.nodeName||"").toLowerCase():null}function k(r){if(r==null){return window}if(r.toString()!=="[object Window]"){var t=r.ownerDocument;return t?t.defaultView||window:window}return r}function A(r){var t=k(r).Element;return r instanceof t||r instanceof Element}function E(r){var t=k(r).HTMLElement;return r instanceof t||r instanceof HTMLElement}function q(r){if(typeof ShadowRoot==="undefined"){return false}var t=k(r).ShadowRoot;return r instanceof t||r instanceof ShadowRoot}function B(r){var t=r.state;Object.keys(t.elements).forEach((function(r){var n=t.styles[r]||{};var e=t.attributes[r]||{};var a=t.elements[r];if(!E(a)||!M(a)){return}Object.assign(a.style,n);Object.keys(e).forEach((function(r){var t=e[r];if(t===false){a.removeAttribute(r)}else{a.setAttribute(r,t===true?"":t)}}))}))}function P(r){var t=r.state;var n={popper:{position:t.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};Object.assign(t.elements.popper.style,n.popper);t.styles=n;if(t.elements.arrow){Object.assign(t.elements.arrow.style,n.arrow)}return function(){Object.keys(t.elements).forEach((function(r){var e=t.elements[r];var a=t.attributes[r]||{};var i=Object.keys(t.styles.hasOwnProperty(r)?t.styles[r]:n[r]);var o=i.reduce((function(r,t){r[t]="";return r}),{});if(!E(e)||!M(e)){return}Object.assign(e.style,o);Object.keys(a).forEach((function(r){e.removeAttribute(r)}))}))}}const R={name:"applyStyles",enabled:true,phase:"write",fn:B,effect:P,requires:["computeStyles"]};function S(r){return r.split("-")[0]}var W=Math.max;var L=Math.min;var T=Math.round;function H(){var r=navigator.userAgentData;if(r!=null&&r.brands&&Array.isArray(r.brands)){return r.brands.map((function(r){return r.brand+"/"+r.version})).join(" ")}return navigator.userAgent}function I(){return!/^((?!chrome|android).)*safari/i.test(H())}function z(r,t,n){if(t===void 0){t=false}if(n===void 0){n=false}var e=r.getBoundingClientRect();var a=1;var i=1;if(t&&E(r)){a=r.offsetWidth>0?T(e.width)/r.offsetWidth||1:1;i=r.offsetHeight>0?T(e.height)/r.offsetHeight||1:1}var o=A(r)?k(r):window,v=o.visualViewport;var f=!I()&&n;var u=(e.left+(f&&v?v.offsetLeft:0))/a;var c=(e.top+(f&&v?v.offsetTop:0))/i;var s=e.width/a;var l=e.height/i;return{width:s,height:l,top:c,right:u+s,bottom:c+l,left:u,x:u,y:c}}function C(r){var t=z(r);var n=r.offsetWidth;var e=r.offsetHeight;if(Math.abs(t.width-n)<=1){n=t.width}if(Math.abs(t.height-e)<=1){e=t.height}return{x:r.offsetLeft,y:r.offsetTop,width:n,height:e}}function D(r,t){var n=t.getRootNode&&t.getRootNode();if(r.contains(t)){return true}else if(n&&q(n)){var e=t;do{if(e&&r.isSameNode(e)){return true}e=e.parentNode||e.host}while(e)}return false}function F(r){return k(r).getComputedStyle(r)}function U(r){return["table","td","th"].indexOf(M(r))>=0}function V(r){return((A(r)?r.ownerDocument:r.document)||window.document).documentElement}function _(r){if(M(r)==="html"){return r}return r.assignedSlot||r.parentNode||(q(r)?r.host:null)||V(r)}function G(r){if(!E(r)||F(r).position==="fixed"){return null}return r.offsetParent}function J(r){var t=/firefox/i.test(H());var n=/Trident/i.test(H());if(n&&E(r)){var e=F(r);if(e.position==="fixed"){return null}}var a=_(r);if(q(a)){a=a.host}while(E(a)&&["html","body"].indexOf(M(a))<0){var i=F(a);if(i.transform!=="none"||i.perspective!=="none"||i.contain==="paint"||["transform","perspective"].indexOf(i.willChange)!==-1||t&&i.willChange==="filter"||t&&i.filter&&i.filter!=="none"){return a}else{a=a.parentNode}}return null}function K(r){var t=k(r);var n=G(r);while(n&&U(n)&&F(n).position==="static"){n=G(n)}if(n&&(M(n)==="html"||M(n)==="body"&&F(n).position==="static")){return t}return n||J(r)||t}function N(r){return["top","bottom"].indexOf(r)>=0?"x":"y"}function Q(r,t,n){return W(r,L(t,n))}function X(r,t,n){var e=Q(r,t,n);return e>n?n:e}function Y(){return{top:0,right:0,bottom:0,left:0}}function Z(r){return Object.assign({},Y(),r)}function $(r,t){return t.reduce((function(t,n){t[n]=r;return t}),{})}var rr=function r(t,n){t=typeof t==="function"?t(Object.assign({},n.rects,{placement:n.placement})):t;return Z(typeof t!=="number"?t:$(t,i))};function tr(a){var i;var o=a.state,v=a.name,f=a.options;var u=o.elements.arrow;var c=o.modifiersData.popperOffsets;var s=S(o.placement);var l=N(s);var d=[e,n].indexOf(s)>=0;var p=d?"height":"width";if(!u||!c){return}var b=rr(f.padding,o);var h=C(u);var y=l==="y"?r:e;var m=l==="y"?t:n;var x=o.rects.reference[p]+o.rects.reference[l]-c[l]-o.rects.popper[p];var w=c[l]-o.rects.reference[l];var O=K(u);var g=O?l==="y"?O.clientHeight||0:O.clientWidth||0:0;var j=x/2-w/2;var M=b[y];var k=g-h[p]-b[m];var A=g/2-h[p]/2+j;var E=Q(M,A,k);var q=l;o.modifiersData[v]=(i={},i[q]=E,i.centerOffset=E-A,i)}function nr(r){var t=r.state,n=r.options;var e=n.element,a=e===void 0?"[data-popper-arrow]":e;if(a==null){return}if(typeof a==="string"){a=t.elements.popper.querySelector(a);if(!a){return}}if(!D(t.elements.popper,a)){return}t.elements.arrow=a}const er={name:"arrow",enabled:true,phase:"main",fn:tr,effect:nr,requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function ar(r){return r.split("-")[1]}var ir={top:"auto",right:"auto",bottom:"auto",left:"auto"};function or(r,t){var n=r.x,e=r.y;var a=t.devicePixelRatio||1;return{x:T(n*a)/a||0,y:T(e*a)/a||0}}function vr(a){var i;var o=a.popper,f=a.popperRect,u=a.placement,c=a.variation,s=a.offsets,l=a.position,d=a.gpuAcceleration,p=a.adaptive,b=a.roundOffsets,h=a.isFixed;var y=s.x,m=y===void 0?0:y,x=s.y,w=x===void 0?0:x;var O=typeof b==="function"?b({x:m,y:w}):{x:m,y:w};m=O.x;w=O.y;var g=s.hasOwnProperty("x");var j=s.hasOwnProperty("y");var M=e;var A=r;var E=window;if(p){var q=K(o);var B="clientHeight";var P="clientWidth";if(q===k(o)){q=V(o);if(F(q).position!=="static"&&l==="absolute"){B="scrollHeight";P="scrollWidth"}}q=q;if(u===r||(u===e||u===n)&&c===v){A=t;var R=h&&q===E&&E.visualViewport?E.visualViewport.height:q[B];w-=R-f.height;w*=d?1:-1}if(u===e||(u===r||u===t)&&c===v){M=n;var S=h&&q===E&&E.visualViewport?E.visualViewport.width:q[P];m-=S-f.width;m*=d?1:-1}}var W=Object.assign({position:l},p&&ir);var L=b===true?or({x:m,y:w},k(o)):{x:m,y:w};m=L.x;w=L.y;if(d){var T;return Object.assign({},W,(T={},T[A]=j?"0":"",T[M]=g?"0":"",T.transform=(E.devicePixelRatio||1)<=1?"translate("+m+"px, "+w+"px)":"translate3d("+m+"px, "+w+"px, 0)",T))}return Object.assign({},W,(i={},i[A]=j?w+"px":"",i[M]=g?m+"px":"",i.transform="",i))}function fr(r){var t=r.state,n=r.options;var e=n.gpuAcceleration,a=e===void 0?true:e,i=n.adaptive,o=i===void 0?true:i,v=n.roundOffsets,f=v===void 0?true:v;var u={placement:S(t.placement),variation:ar(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:a,isFixed:t.options.strategy==="fixed"};if(t.modifiersData.popperOffsets!=null){t.styles.popper=Object.assign({},t.styles.popper,vr(Object.assign({},u,{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:o,roundOffsets:f})))}if(t.modifiersData.arrow!=null){t.styles.arrow=Object.assign({},t.styles.arrow,vr(Object.assign({},u,{offsets:t.modifiersData.arrow,position:"absolute",adaptive:false,roundOffsets:f})))}t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-placement":t.placement})}const ur={name:"computeStyles",enabled:true,phase:"beforeWrite",fn:fr,data:{}};var cr={passive:true};function sr(r){var t=r.state,n=r.instance,e=r.options;var a=e.scroll,i=a===void 0?true:a,o=e.resize,v=o===void 0?true:o;var f=k(t.elements.popper);var u=[].concat(t.scrollParents.reference,t.scrollParents.popper);if(i){u.forEach((function(r){r.addEventListener("scroll",n.update,cr)}))}if(v){f.addEventListener("resize",n.update,cr)}return function(){if(i){u.forEach((function(r){r.removeEventListener("scroll",n.update,cr)}))}if(v){f.removeEventListener("resize",n.update,cr)}}}const lr={name:"eventListeners",enabled:true,phase:"write",fn:function r(){},effect:sr,data:{}};var dr={left:"right",right:"left",bottom:"top",top:"bottom"};function pr(r){return r.replace(/left|right|bottom|top/g,(function(r){return dr[r]}))}var br={start:"end",end:"start"};function hr(r){return r.replace(/start|end/g,(function(r){return br[r]}))}function yr(r){var t=k(r);var n=t.pageXOffset;var e=t.pageYOffset;return{scrollLeft:n,scrollTop:e}}function mr(r){return z(V(r)).left+yr(r).scrollLeft}function xr(r,t){var n=k(r);var e=V(r);var a=n.visualViewport;var i=e.clientWidth;var o=e.clientHeight;var v=0;var f=0;if(a){i=a.width;o=a.height;var u=I();if(u||!u&&t==="fixed"){v=a.offsetLeft;f=a.offsetTop}}return{width:i,height:o,x:v+mr(r),y:f}}function wr(r){var t;var n=V(r);var e=yr(r);var a=(t=r.ownerDocument)==null?void 0:t.body;var i=W(n.scrollWidth,n.clientWidth,a?a.scrollWidth:0,a?a.clientWidth:0);var o=W(n.scrollHeight,n.clientHeight,a?a.scrollHeight:0,a?a.clientHeight:0);var v=-e.scrollLeft+mr(r);var f=-e.scrollTop;if(F(a||n).direction==="rtl"){v+=W(n.clientWidth,a?a.clientWidth:0)-i}return{width:i,height:o,x:v,y:f}}function Or(r){var t=F(r),n=t.overflow,e=t.overflowX,a=t.overflowY;return/auto|scroll|overlay|hidden/.test(n+a+e)}function gr(r){if(["html","body","#document"].indexOf(M(r))>=0){return r.ownerDocument.body}if(E(r)&&Or(r)){return r}return gr(_(r))}function jr(r,t){var n;if(t===void 0){t=[]}var e=gr(r);var a=e===((n=r.ownerDocument)==null?void 0:n.body);var i=k(e);var o=a?[i].concat(i.visualViewport||[],Or(e)?e:[]):e;var v=t.concat(o);return a?v:v.concat(jr(_(o)))}function Mr(r){return Object.assign({},r,{left:r.x,top:r.y,right:r.x+r.width,bottom:r.y+r.height})}function kr(r,t){var n=z(r,false,t==="fixed");n.top=n.top+r.clientTop;n.left=n.left+r.clientLeft;n.bottom=n.top+r.clientHeight;n.right=n.left+r.clientWidth;n.width=r.clientWidth;n.height=r.clientHeight;n.x=n.left;n.y=n.top;return n}function Ar(r,t,n){return t===u?Mr(xr(r,n)):A(t)?kr(t,n):Mr(wr(V(r)))}function Er(r){var t=jr(_(r));var n=["absolute","fixed"].indexOf(F(r).position)>=0;var e=n&&E(r)?K(r):r;if(!A(e)){return[]}return t.filter((function(r){return A(r)&&D(r,e)&&M(r)!=="body"}))}function qr(r,t,n,e){var a=t==="clippingParents"?Er(r):[].concat(t);var i=[].concat(a,[n]);var o=i[0];var v=i.reduce((function(t,n){var a=Ar(r,n,e);t.top=W(a.top,t.top);t.right=L(a.right,t.right);t.bottom=L(a.bottom,t.bottom);t.left=W(a.left,t.left);return t}),Ar(r,o,e));v.width=v.right-v.left;v.height=v.bottom-v.top;v.x=v.left;v.y=v.top;return v}function Br(a){var i=a.reference,f=a.element,u=a.placement;var c=u?S(u):null;var s=u?ar(u):null;var l=i.x+i.width/2-f.width/2;var d=i.y+i.height/2-f.height/2;var p;switch(c){case r:p={x:l,y:i.y-f.height};break;case t:p={x:l,y:i.y+i.height};break;case n:p={x:i.x+i.width,y:d};break;case e:p={x:i.x-f.width,y:d};break;default:p={x:i.x,y:i.y}}var b=c?N(c):null;if(b!=null){var h=b==="y"?"height":"width";switch(s){case o:p[b]=p[b]-(i[h]/2-f[h]/2);break;case v:p[b]=p[b]+(i[h]/2-f[h]/2);break}}return p}function Pr(e,a){if(a===void 0){a={}}var o=a,v=o.placement,l=v===void 0?e.placement:v,d=o.strategy,p=d===void 0?e.strategy:d,b=o.boundary,h=b===void 0?f:b,y=o.rootBoundary,m=y===void 0?u:y,x=o.elementContext,w=x===void 0?c:x,O=o.altBoundary,g=O===void 0?false:O,j=o.padding,M=j===void 0?0:j;var k=Z(typeof M!=="number"?M:$(M,i));var E=w===c?s:c;var q=e.rects.popper;var B=e.elements[g?E:w];var P=qr(A(B)?B:B.contextElement||V(e.elements.popper),h,m,p);var R=z(e.elements.reference);var S=Br({reference:R,element:q,strategy:"absolute",placement:l});var W=Mr(Object.assign({},q,S));var L=w===c?W:R;var T={top:P.top-L.top+k.top,bottom:L.bottom-P.bottom+k.bottom,left:P.left-L.left+k.left,right:L.right-P.right+k.right};var H=e.modifiersData.offset;if(w===c&&H){var I=H[l];Object.keys(T).forEach((function(e){var a=[n,t].indexOf(e)>=0?1:-1;var i=[r,t].indexOf(e)>=0?"y":"x";T[e]+=I[i]*a}))}return T}function Rr(r,t){if(t===void 0){t={}}var n=t,e=n.placement,a=n.boundary,o=n.rootBoundary,v=n.padding,f=n.flipVariations,u=n.allowedAutoPlacements,c=u===void 0?d:u;var s=ar(e);var p=s?f?l:l.filter((function(r){return ar(r)===s})):i;var b=p.filter((function(r){return c.indexOf(r)>=0}));if(b.length===0){b=p}var h=b.reduce((function(t,n){t[n]=Pr(r,{placement:n,boundary:a,rootBoundary:o,padding:v})[S(n)];return t}),{});return Object.keys(h).sort((function(r,t){return h[r]-h[t]}))}function Sr(r){if(S(r)===a){return[]}var t=pr(r);return[hr(r),t,hr(t)]}function Wr(i){var v=i.state,f=i.options,u=i.name;if(v.modifiersData[u]._skip){return}var c=f.mainAxis,s=c===void 0?true:c,l=f.altAxis,d=l===void 0?true:l,p=f.fallbackPlacements,b=f.padding,h=f.boundary,y=f.rootBoundary,m=f.altBoundary,x=f.flipVariations,w=x===void 0?true:x,O=f.allowedAutoPlacements;var g=v.options.placement;var j=S(g);var M=j===g;var k=p||(M||!w?[pr(g)]:Sr(g));var A=[g].concat(k).reduce((function(r,t){return r.concat(S(t)===a?Rr(v,{placement:t,boundary:h,rootBoundary:y,padding:b,flipVariations:w,allowedAutoPlacements:O}):t)}),[]);var E=v.rects.reference;var q=v.rects.popper;var B=new Map;var P=true;var R=A[0];for(var W=0;W<A.length;W++){var L=A[W];var T=S(L);var H=ar(L)===o;var I=[r,t].indexOf(T)>=0;var z=I?"width":"height";var C=Pr(v,{placement:L,boundary:h,rootBoundary:y,altBoundary:m,padding:b});var D=I?H?n:e:H?t:r;if(E[z]>q[z]){D=pr(D)}var F=pr(D);var U=[];if(s){U.push(C[T]<=0)}if(d){U.push(C[D]<=0,C[F]<=0)}if(U.every((function(r){return r}))){R=L;P=false;break}B.set(L,U)}if(P){var V=w?3:1;var _=function r(t){var n=A.find((function(r){var n=B.get(r);if(n){return n.slice(0,t).every((function(r){return r}))}}));if(n){R=n;return"break"}};for(var G=V;G>0;G--){var J=_(G);if(J==="break")break}}if(v.placement!==R){v.modifiersData[u]._skip=true;v.placement=R;v.reset=true}}const Lr={name:"flip",enabled:true,phase:"main",fn:Wr,requiresIfExists:["offset"],data:{_skip:false}};function Tr(r,t,n){if(n===void 0){n={x:0,y:0}}return{top:r.top-t.height-n.y,right:r.right-t.width+n.x,bottom:r.bottom-t.height+n.y,left:r.left-t.width-n.x}}function Hr(a){return[r,n,t,e].some((function(r){return a[r]>=0}))}function Ir(r){var t=r.state,n=r.name;var e=t.rects.reference;var a=t.rects.popper;var i=t.modifiersData.preventOverflow;var o=Pr(t,{elementContext:"reference"});var v=Pr(t,{altBoundary:true});var f=Tr(o,e);var u=Tr(v,a,i);var c=Hr(f);var s=Hr(u);t.modifiersData[n]={referenceClippingOffsets:f,popperEscapeOffsets:u,isReferenceHidden:c,hasPopperEscaped:s};t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-reference-hidden":c,"data-popper-escaped":s})}const zr={name:"hide",enabled:true,phase:"main",requiresIfExists:["preventOverflow"],fn:Ir};function Cr(t,a,i){var o=S(t);var v=[e,r].indexOf(o)>=0?-1:1;var f=typeof i==="function"?i(Object.assign({},a,{placement:t})):i,u=f[0],c=f[1];u=u||0;c=(c||0)*v;return[e,n].indexOf(o)>=0?{x:c,y:u}:{x:u,y:c}}function Dr(r){var t=r.state,n=r.options,e=r.name;var a=n.offset,i=a===void 0?[0,0]:a;var o=d.reduce((function(r,n){r[n]=Cr(n,t.rects,i);return r}),{});var v=o[t.placement],f=v.x,u=v.y;if(t.modifiersData.popperOffsets!=null){t.modifiersData.popperOffsets.x+=f;t.modifiersData.popperOffsets.y+=u}t.modifiersData[e]=o}const Fr={name:"offset",enabled:true,phase:"main",requires:["popperOffsets"],fn:Dr};function Ur(r){var t=r.state,n=r.name;t.modifiersData[n]=Br({reference:t.rects.reference,element:t.rects.popper,strategy:"absolute",placement:t.placement})}const Vr={name:"popperOffsets",enabled:true,phase:"read",fn:Ur,data:{}};function _r(r){return r==="x"?"y":"x"}function Gr(a){var i=a.state,v=a.options,f=a.name;var u=v.mainAxis,c=u===void 0?true:u,s=v.altAxis,l=s===void 0?false:s,d=v.boundary,p=v.rootBoundary,b=v.altBoundary,h=v.padding,y=v.tether,m=y===void 0?true:y,x=v.tetherOffset,w=x===void 0?0:x;var O=Pr(i,{boundary:d,rootBoundary:p,padding:h,altBoundary:b});var g=S(i.placement);var j=ar(i.placement);var M=!j;var k=N(g);var A=_r(k);var E=i.modifiersData.popperOffsets;var q=i.rects.reference;var B=i.rects.popper;var P=typeof w==="function"?w(Object.assign({},i.rects,{placement:i.placement})):w;var R=typeof P==="number"?{mainAxis:P,altAxis:P}:Object.assign({mainAxis:0,altAxis:0},P);var T=i.modifiersData.offset?i.modifiersData.offset[i.placement]:null;var H={x:0,y:0};if(!E){return}if(c){var I;var z=k==="y"?r:e;var D=k==="y"?t:n;var F=k==="y"?"height":"width";var U=E[k];var V=U+O[z];var _=U-O[D];var G=m?-B[F]/2:0;var J=j===o?q[F]:B[F];var Z=j===o?-B[F]:-q[F];var $=i.elements.arrow;var rr=m&&$?C($):{width:0,height:0};var tr=i.modifiersData["arrow#persistent"]?i.modifiersData["arrow#persistent"].padding:Y();var nr=tr[z];var er=tr[D];var ir=Q(0,q[F],rr[F]);var or=M?q[F]/2-G-ir-nr-R.mainAxis:J-ir-nr-R.mainAxis;var vr=M?-q[F]/2+G+ir+er+R.mainAxis:Z+ir+er+R.mainAxis;var fr=i.elements.arrow&&K(i.elements.arrow);var ur=fr?k==="y"?fr.clientTop||0:fr.clientLeft||0:0;var cr=(I=T==null?void 0:T[k])!=null?I:0;var sr=U+or-cr-ur;var lr=U+vr-cr;var dr=Q(m?L(V,sr):V,U,m?W(_,lr):_);E[k]=dr;H[k]=dr-U}if(l){var pr;var br=k==="x"?r:e;var hr=k==="x"?t:n;var yr=E[A];var mr=A==="y"?"height":"width";var xr=yr+O[br];var wr=yr-O[hr];var Or=[r,e].indexOf(g)!==-1;var gr=(pr=T==null?void 0:T[A])!=null?pr:0;var jr=Or?xr:yr-q[mr]-B[mr]-gr+R.altAxis;var Mr=Or?yr+q[mr]+B[mr]-gr-R.altAxis:wr;var kr=m&&Or?X(jr,yr,Mr):Q(m?jr:xr,yr,m?Mr:wr);E[A]=kr;H[A]=kr-yr}i.modifiersData[f]=H}const Jr={name:"preventOverflow",enabled:true,phase:"main",fn:Gr,requiresIfExists:["offset"]};function Kr(r){return{scrollLeft:r.scrollLeft,scrollTop:r.scrollTop}}function Nr(r){if(r===k(r)||!E(r)){return yr(r)}else{return Kr(r)}}function Qr(r){var t=r.getBoundingClientRect();var n=T(t.width)/r.offsetWidth||1;var e=T(t.height)/r.offsetHeight||1;return n!==1||e!==1}function Xr(r,t,n){if(n===void 0){n=false}var e=E(t);var a=E(t)&&Qr(t);var i=V(t);var o=z(r,a,n);var v={scrollLeft:0,scrollTop:0};var f={x:0,y:0};if(e||!e&&!n){if(M(t)!=="body"||Or(i)){v=Nr(t)}if(E(t)){f=z(t,true);f.x+=t.clientLeft;f.y+=t.clientTop}else if(i){f.x=mr(i)}}return{x:o.left+v.scrollLeft-f.x,y:o.top+v.scrollTop-f.y,width:o.width,height:o.height}}function Yr(r){var t=new Map;var n=new Set;var e=[];r.forEach((function(r){t.set(r.name,r)}));function a(r){n.add(r.name);var i=[].concat(r.requires||[],r.requiresIfExists||[]);i.forEach((function(r){if(!n.has(r)){var e=t.get(r);if(e){a(e)}}}));e.push(r)}r.forEach((function(r){if(!n.has(r.name)){a(r)}}));return e}function Zr(r){var t=Yr(r);return j.reduce((function(r,n){return r.concat(t.filter((function(r){return r.phase===n})))}),[])}function $r(r){var t;return function(){if(!t){t=new Promise((function(n){Promise.resolve().then((function(){t=undefined;n(r())}))}))}return t}}function rt(r){var t=r.reduce((function(r,t){var n=r[t.name];r[t.name]=n?Object.assign({},n,t,{options:Object.assign({},n.options,t.options),data:Object.assign({},n.data,t.data)}):t;return r}),{});return Object.keys(t).map((function(r){return t[r]}))}var tt={placement:"bottom",modifiers:[],strategy:"absolute"};function nt(){for(var r=arguments.length,t=new Array(r),n=0;n<r;n++){t[n]=arguments[n]}return!t.some((function(r){return!(r&&typeof r.getBoundingClientRect==="function")}))}function et(r){if(r===void 0){r={}}var t=r,n=t.defaultModifiers,e=n===void 0?[]:n,a=t.defaultOptions,i=a===void 0?tt:a;return function r(t,n,a){if(a===void 0){a=i}var o={placement:"bottom",orderedModifiers:[],options:Object.assign({},tt,i),modifiersData:{},elements:{reference:t,popper:n},attributes:{},styles:{}};var v=[];var f=false;var u={state:o,setOptions:function r(a){var v=typeof a==="function"?a(o.options):a;s();o.options=Object.assign({},i,o.options,v);o.scrollParents={reference:A(t)?jr(t):t.contextElement?jr(t.contextElement):[],popper:jr(n)};var f=Zr(rt([].concat(e,o.options.modifiers)));o.orderedModifiers=f.filter((function(r){return r.enabled}));c();return u.update()},forceUpdate:function r(){if(f){return}var t=o.elements,n=t.reference,e=t.popper;if(!nt(n,e)){return}o.rects={reference:Xr(n,K(e),o.options.strategy==="fixed"),popper:C(e)};o.reset=false;o.placement=o.options.placement;o.orderedModifiers.forEach((function(r){return o.modifiersData[r.name]=Object.assign({},r.data)}));for(var a=0;a<o.orderedModifiers.length;a++){if(o.reset===true){o.reset=false;a=-1;continue}var i=o.orderedModifiers[a],v=i.fn,c=i.options,s=c===void 0?{}:c,l=i.name;if(typeof v==="function"){o=v({state:o,options:s,name:l,instance:u})||o}}},update:$r((function(){return new Promise((function(r){u.forceUpdate();r(o)}))})),destroy:function r(){s();f=true}};if(!nt(t,n)){return u}u.setOptions(a).then((function(r){if(!f&&a.onFirstUpdate){a.onFirstUpdate(r)}}));function c(){o.orderedModifiers.forEach((function(r){var t=r.name,n=r.options,e=n===void 0?{}:n,a=r.effect;if(typeof a==="function"){var i=a({state:o,name:t,instance:u,options:e});var f=function r(){};v.push(i||f)}}))}function s(){v.forEach((function(r){return r()}));v=[]}return u}}var at=[lr,Vr,ur,R,Fr,Lr,Jr,er,zr];var it=et({defaultModifiers:at});function ot(r){const t=window.getComputedStyle(r);const n=t.getPropertyValue("overflow-x");const e=t.getPropertyValue("overflow-y");const a=["hidden","clip"];return a.indexOf(n)!==-1||a.indexOf(e)!==-1}export{w as b,it as c,Pr as d,ot as h};
-//# sourceMappingURL=p-871bfdf9.js.map
+//# sourceMappingURL=p-fd7891ef.js.map