npm - @dso-toolkit/core - Versions diffs - 67.3.1 → 67.3.2 - Mend

@dso-toolkit/core 67.3.1 → 67.3.2

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 (682) hide show

package/dist/dso-toolkit/{p-17795a3a.entry.js → p-3ca2b395.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{h as n,r as e,c as t,F as o,a as i}from"./p-53096a64.js";import{c as s}from"./p-8a1a6e56.js";import{d as a}from"./p-16e112f1.js";const r=["main","map"];const l=["search","map","document"];const d={main:"Hoofdpaneel",map:"Kaart",document:"Document",search:"Zoeken"};const c={small:"smal",medium:"middel",large:"breed"};const p=({className:e,onClick:t,label:o,icon:i})=>n("button",{type:"button",class:e,onClick:t},n("span",{class:"sr-only"},o),n("dso-icon",{icon:i}));const b=({shrink:e,expand:t,size:o,panelLabel:i,placement:s})=>{const a=[];if(o!=="small"){a.push(n(p,{onClick:e,label:`${i} smaller maken`,icon:s==="right"?"chevron-right":"chevron-left",className:"shrink"}))}if(o!=="large"){a.push(n(p,{onClick:t,label:`${i} breder maken`,icon:s==="right"?"chevron-left":"chevron-right",className:"expand"}))}return n("div",{class:"sizing-buttons"},n("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte ",i.toLocaleLowerCase(),": ",c[o]),a)};const f=({tabView:e,panelSize:t,shrinkDocumentPanel:o,expandDocumentPanel:i,dsoDocumentPanelSizeChangeAnimationEnd:s})=>n("div",{class:"dso-document-panel",onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){s.emit({currentSize:t})}}},!e&&n(b,{panelLabel:"Documentpaneel",size:t,expand:i,shrink:o,placement:"right"}),n("div",{class:"content"},n("slot",{name:"document-panel"})));const g=({onApply:e,onCancel:t})=>n("div",{class:"filterpanel-buttons"},n("button",{type:"button",class:"cancel-button",onClick:t},n("span",null,"Annuleren")),n("button",{type:"button",class:"apply-button",onClick:e},n("span",null,"Toepassen"),n("dso-icon",{icon:"chevron-right"})));const u=({ref:e,onApply:t,onCancel:o})=>n("dialog",{id:"filterpanel",class:"filterpanel",ref:e,onCancel:n=>{n.preventDefault();o(n)}},n("h1",null,"Uw keuzes"),n(g,{onApply:t,onCancel:o}),n("slot",{name:"filterpanel"}),n(g,{onApply:t,onCancel:o}));const h=({mode:e,tabView:t,mainSize:o,documentPanelOpen:i,mainPanelExpanded:a,mainPanelHidden:r,shrinkMain:l,expandMain:d,toggleMainPanel:c,dsoMainSizeChangeAnimationEnd:p})=>n("div",{class:s("dso-main-panel",{compact:!t&&i&&!a,contracted:!t&&!i&&!a&&e==="vdk",expanded:!t&&i&&a,collapsed:r}),onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){p.emit({currentSize:o})}}},!t&&(e==="vrk"&&n(b,{panelLabel:"Hoofdpaneel",size:o,expand:d,shrink:l,placement:"left"})||e==="vdk"&&i&&n("div",{class:"toggle-button"},n("button",{type:"button",onClick:c},n("span",{class:"sr-only"},"Zoeken paneel ",r?"tonen":"verbergen"),n("dso-icon",{icon:r?"chevron-right":"chevron-left"})))),n("div",{class:s("content",{invisible:r})},n("slot",{name:"main"})));const m=({ref:e,dsoCloseOverlay:t})=>n("dialog",{class:"overlay",ref:e,onCancel:n=>{n.preventDefault();t(n)}},n("button",{type:"button",class:"overlay-close-button",onClick:t},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"sluiten")),n("slot",{name:"overlay"}));const v="*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([mode=vdk]) .overlay {\n  block-size: calc(100% - 32px);\n  margin-block: 16px;\n  margin-inline: auto 16px;\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  inline-size: 1px;\n  block-size: 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-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\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,\n.expand,\n.overlay-close-button {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\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-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.shrink.dso-truncate,\n.expand.dso-truncate,\n.overlay-close-button.dso-truncate {\n  max-inline-size: 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  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 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  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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\n.overlay-close-button {\n  position: absolute;\n  inset-block-start: 8px;\n  inset-inline-end: 16px;\n}\n\n.content.invisible {\n  visibility: hidden;\n}\n\n.dso-main-panel .content,\n.dso-document-panel .content {\n  block-size: 100%;\n  padding-block: 0;\n  padding-inline: 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-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n  z-index: 100;\n}\n.dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {\n  inset-inline-start: -432px;\n}\n.dso-main-panel.compact, .dso-main-panel.contracted {\n  flex-shrink: unset;\n  flex-grow: unset;\n  position: absolute;\n  transition: none;\n}\n.dso-main-panel.expanded.collapsed {\n  position: absolute;\n  block-size: 100%;\n}\n.dso-main-panel .dso-filterblok-address {\n  font-weight: bold;\n  margin-block: 8px;\n  margin-inline: 0;\n}\n.dso-main-panel .sizing-buttons,\n.dso-main-panel .toggle-button {\n  inset-inline-start: calc(100% + 1px);\n  transition: inset-inline-start 200ms ease-in;\n  padding-block: 0 8px;\n  padding-inline: 0 4px;\n}\n.dso-main-panel .sizing-buttons button,\n.dso-main-panel .toggle-button button {\n  border-end-end-radius: 4px;\n  border-start-end-radius: 4px;\n}\n\n.dso-document-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n  z-index: 100;\n}\n.dso-document-panel .sizing-buttons {\n  inset-block-start: auto;\n  inset-block-end: 16px;\n  inset-inline-end: calc(100% + 1px);\n  transition: inset-inline-end 200ms ease-in;\n  padding-block: 0 8px;\n  padding-inline: 4px 0;\n}\n.dso-document-panel .sizing-buttons button {\n  border-end-start-radius: 4px;\n  border-start-start-radius: 4px;\n}\n\n.sizing-buttons,\n.toggle-button {\n  overflow-x: hidden;\n  position: absolute;\n  inset-block-start: 16px;\n  inline-size: 44px;\n  z-index: -1;\n}\n.sizing-buttons button,\n.toggle-button button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible,\n.toggle-button button:focus,\n.toggle-button button:focus-visible {\n  outline-offset: 2px;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n  outline: 0;\n}\n.sizing-buttons button,\n.toggle-button button {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button,\n.toggle-button button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.sizing-buttons button:hover,\n.toggle-button button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover,\n.toggle-button button[disabled],\n.toggle-button button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.sizing-buttons button.dso-small,\n.toggle-button 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.toggle-button button.dso-small dso-icon,\n.toggle-button button.dso-small svg.di,\n.toggle-button button.dso-small.extern::after,\n.toggle-button button.dso-small.download::after,\n.toggle-button button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.sizing-buttons button.dso-small.dso-spinner-left::before,\n.toggle-button button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button.dso-small.dso-spinner-right::after,\n.toggle-button button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button > span,\n.toggle-button button > span {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 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.toggle-button button.dso-spinner-left[disabled],\n.toggle-button 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.toggle-button 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before,\n.toggle-button 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after,\n.toggle-button 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after,\n.toggle-button 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button,\n.toggle-button button {\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n  flex: 0 0 100%;\n  block-size: 40px;\n  min-inline-size: auto;\n  inline-size: 40px;\n}\n.sizing-buttons button:hover dso-icon,\n.toggle-button button:hover dso-icon {\n  color: #fff;\n}\n.sizing-buttons button:focus-visible,\n.toggle-button button:focus-visible {\n  outline-offset: -1px;\n}\n\n.map {\n  block-size: 100%;\n  inline-size: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.filterpanel,\n.overlay {\n  background-color: #fff;\n  border: 0;\n  block-size: 100%;\n  margin-block: 0;\n  max-block-size: 100vh;\n  overflow-y: auto;\n  z-index: 101;\n}\n\n.filterpanel {\n  padding-block: 8px;\n  padding-inline: 16px;\n  inset-inline-start: 0;\n}\n@media screen and (max-width: 768px) {\n  .filterpanel {\n    inline-size: 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: 1.5rem;\n  font-weight: 700;\n}\n@media screen and (min-width: 480px) {\n  .filterpanel h1 {\n    font-size: 2rem;\n  }\n}\n\n.overlay {\n  padding-block: 40px 8px;\n  padding-inline: 16px;\n  inset-inline-end: 0;\n  inline-size: 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    inline-size: 100vw;\n  }\n}\n\n.filterpanel-buttons {\n  text-align: end;\n}\n.filterpanel-buttons .cancel-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\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 {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.filterpanel-buttons .cancel-button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button:active {\n  background-color: #39870c;\n  border-color: #39870c;\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-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 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-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\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 {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\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-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 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-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n  margin-inline-start: 16px;\n}\n\n@media screen and (min-width: 808px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 375px;\n    min-inline-size: 0;\n    max-inline-size: 375px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 375px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 0;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 624px;\n    min-inline-size: 375px;\n    max-inline-size: 624px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 624px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 375px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 60%;\n    min-inline-size: 768px;\n    max-inline-size: 1024px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 768px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 768px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host {\n    display: flex;\n    block-size: 100vh;\n    overflow: hidden;\n    position: relative;\n  }\n  :host .dso-main-panel.compact,\n  :host .dso-main-panel.expanded {\n    flex-basis: unset;\n    min-inline-size: unset;\n    max-inline-size: unset;\n    inline-size: 440px;\n  }\n  :host .dso-main-panel.compact .content,\n  :host .dso-main-panel.expanded .content {\n    block-size: auto;\n    overflow-y: auto;\n  }\n}\n@media screen and (min-width: 808px) {\n  .dso-main-panel,\n  .dso-document-panel {\n    box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  }\n  .dso-main-panel .content,\n  .dso-document-panel .content {\n    overflow-y: auto;\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-inline-size: 896px;\n    inline-size: calc(100vw - 40px);\n  }\n  .filterpanel::before {\n    content: \"\";\n    display: block;\n    position: fixed;\n    inset-block-start: 0;\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    inset-inline-start: 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    inset-inline-start: auto;\n    inline-size: 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-block-size: 32px;\n  }\n  .dso-navbar .dso-navbar-header {\n    float: inline-start;\n  }\n  .dso-navbar .dso-navbar-toggle {\n    border-radius: 4px;\n    min-inline-size: auto;\n    padding-block: 5px;\n    padding-inline: 0;\n  }\n  .dso-navbar .dso-navbar-toggle dso-icon,\n  .dso-navbar .dso-navbar-toggle svg.di {\n    margin-inline-start: 8px;\n    margin-inline-end: 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-navbar.dso-has-navbar-extension .dso-nav > li:last-child {\n    margin-inline-end: 8rem;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-nav {\n    list-style: none;\n    margin-block-end: 0;\n    padding-inline-start: 0;\n  }\n  .dso-nav > li > button {\n    border: 0;\n    background-color: transparent;\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-block-end: 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  }\n  .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .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-visible,\n  .dso-nav.dso-nav-main > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    font-size: 1.25em;\n    line-height: 1;\n    margin-block-start: 8px;\n    padding-block: 8px 7px;\n    padding-inline: 16px;\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  }\n  .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .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-visible,\n  .dso-nav.dso-nav-sub > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    font-size: 1rem;\n    margin-block-start: 4px;\n    padding-block: 4px 3px;\n    padding-inline: 8px;\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-block-end: 1px solid #ccc;\n    display: flex;\n    gap: 16px;\n    margin-block-start: 0;\n    inline-size: 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-block-end: 0;\n    text-decoration: none;\n    touch-action: manipulation;\n    text-align: start;\n    user-select: none;\n    vertical-align: middle;\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 {\n    border: 0;\n    color: #39870c;\n    line-height: 1;\n    padding: 0;\n    background-color: transparent;\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-block: 11px;\n    padding-inline: 0;\n    position: relative;\n  }\n  .dso-tertiary.dso-truncate {\n    max-inline-size: 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    block-size: 24px;\n    vertical-align: middle;\n    inline-size: 24px;\n    margin-inline-end: 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    block-size: 24px;\n    vertical-align: middle;\n    inline-size: 24px;\n    margin-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 0;\n  }\n  .dso-tertiary dso-icon,\n  .dso-tertiary svg.di,\n  .dso-tertiary span {\n    vertical-align: middle;\n  }\n  .dso-tertiary {\n    font-weight: 300;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .filterpanel,\n  .overlay {\n    margin-inline: 0;\n    max-inline-size: 100vw;\n    inset-block-start: 0;\n    inline-size: 100vw;\n  }\n}";const x=v;const k=new ResizeObserver(a((([n])=>{const e=n===null||n===void 0?void 0:n.target.getRootNode();if(e instanceof ShadowRoot&&y(e.host)){e.host._checkMainPanelVisibility()}}),50));function y(n){return n.tagName==="DSO-VIEWER-GRID"}const w=40;const z=768+w;const B=440;const D=class{constructor(n){e(this,n);this.dsoCloseOverlay=t(this,"dsoCloseOverlay",7);this.dsoFilterpanelCancel=t(this,"dsoFilterpanelCancel",7);this.dsoFilterpanelApply=t(this,"dsoFilterpanelApply",7);this.dsoActiveTabSwitch=t(this,"dsoActiveTabSwitch",7);this.dsoMainSizeChange=t(this,"dsoMainSizeChange",7);this.dsoMainSizeChangeAnimationEnd=t(this,"dsoMainSizeChangeAnimationEnd",7);this.dsoDocumentPanelSizeChange=t(this,"dsoDocumentPanelSizeChange",7);this.dsoDocumentPanelSizeChangeAnimationEnd=t(this,"dsoDocumentPanelSizeChangeAnimationEnd",7);this.dsoMainPanelExpand=t(this,"dsoMainPanelExpand",7);this.dsoMainPanelToggle=t(this,"dsoMainPanelToggle",7);this.mediaCondition=`(min-width: ${z}px)`;this.switchActiveTab=n=>{this.dsoActiveTabSwitch.emit({tab:n})};this.emitShrinkMain=()=>{this.dsoMainSizeChange.emit({currentSize:this.mainSize,nextSize:this.mainSize==="large"?"medium":"small"})};this.emitExpandMain=()=>{this.dsoMainSizeChange.emit({currentSize:this.mainSize,nextSize:this.mainSize==="small"?"medium":"large"})};this.shrinkDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="large"?"medium":"small"})};this.expandDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="small"?"medium":"large"})};this.toggleMainPanel=()=>{if(this.mapElement instanceof HTMLDivElement&&this.mapElement.clientWidth<=B+w+w){this.mainSize="small"}this.dsoMainPanelToggle.emit({hide:!this.mainPanelHidden})};this.changeListener=n=>this.tabView=!n.matches;this.handleFilterpanelApply=n=>{this.dsoFilterpanelApply.emit({originalEvent:n})};this.handleFilterpanelCancel=n=>{this.dsoFilterpanelCancel.emit({originalEvent:n})};this.mode="vrk";this.filterpanelOpen=false;this.overlayOpen=false;this.documentPanelOpen=false;this.mainSize="large";this.activeTab=undefined;this.documentPanelSize="large";this.mainPanelExpanded=false;this.mainPanelHidden=false;this.tabView=window.innerWidth<z}get filterpanelSlot(){return this.host.querySelector("[slot='filterpanel']")}get overlaySlot(){return this.host.querySelector("[slot='overlay']")}documentPanelOpenWatcher(n){if(n){this._checkMainPanelVisibility()}}filterpanelOpenWatcher(n){var e,t;if(!this.filterpanelSlot){console.warn("slot 'filterpanel' has not been set")}if(n){(e=this.filterpanel)===null||e===void 0?void 0:e.showModal()}else{(t=this.filterpanel)===null||t===void 0?void 0:t.close()}}overlayOpenWatcher(n){var e,t;if(!this.overlaySlot){console.warn("slot 'overlay' has not been set")}if(n){(e=this.overlay)===null||e===void 0?void 0:e.showModal()}else{(t=this.overlay)===null||t===void 0?void 0:t.close()}}async _checkMainPanelVisibility(){if(this.mode==="vdk"&&this.documentPanelOpen&&!this.mainPanelHidden&&this.mapElement instanceof HTMLDivElement&&(this.mapElement.clientWidth<=B+w+w&&!this.mainPanelExpanded||this.mapElement.clientWidth<=w+w&&this.mainPanelExpanded)){this.dsoMainPanelToggle.emit({hide:true})}}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener)}componentDidLoad(){var n,e;if(this.filterpanelOpen&&this.filterpanelSlot){(n=this.filterpanel)===null||n===void 0?void 0:n.showModal()}if(this.overlayOpen&&this.overlaySlot){(e=this.overlay)===null||e===void 0?void 0:e.showModal()}if(this.mode==="vdk"&&this.mapElement instanceof HTMLDivElement){k.observe(this.mapElement)}}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener);if(this.mode==="vdk"&&this.mapElement){k.unobserve(this.mapElement)}}render(){const e=this.mode==="vdk"?l:r;return n(o,null,this.tabView&&n("nav",{key:"5bb28bca2da923349ff553a3e32ad6afc6292189",class:"dso-navbar"},n("ul",{key:"0ec74cb43fb25056ca47b063c94e19deaf12e5a2",class:"dso-nav dso-nav-sub"},e.map((e=>n("li",{key:e,class:s({"dso-active":this.activeTab===e})},n("button",{type:"button",class:"dso-tertiary",onClick:()=>this.switchActiveTab(e)},d[e])))))),(!this.tabView||this.tabView&&(this.activeTab==="main"||this.activeTab==="search"))&&n(h,{key:"92b77fad12d794fe466f0eefb1c077545887970b",mode:this.mode,tabView:this.tabView,mainSize:this.mainSize,documentPanelOpen:this.documentPanelOpen,mainPanelExpanded:this.mainPanelExpanded,mainPanelHidden:this.mainPanelHidden,shrinkMain:this.emitShrinkMain,expandMain:this.emitExpandMain,toggleMainPanel:this.toggleMainPanel,dsoMainSizeChangeAnimationEnd:this.dsoMainSizeChangeAnimationEnd}),n(u,{key:"ecb109bf285a6838c5ec84ef069bd53ba581c5a7",ref:n=>this.filterpanel=n,onApply:this.handleFilterpanelApply,onCancel:this.handleFilterpanelCancel}),(!this.tabView||this.tabView&&this.activeTab==="map")&&n("div",{key:"b4a056be215b05ffb730f82aee8eebb7adf1c7b1",class:"map",ref:n=>this.mapElement=n},n("slot",{key:"26a55ded1adf6f6d12814c4f327538e6cc14dbe8",name:"map"})),(!this.tabView&&this.documentPanelOpen||this.tabView&&this.activeTab==="document")&&n(f,{key:"b2ebd498fa85c639196525cda9f4386613bae869",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),n(m,{key:"718aa0f258d94bad2336b14f13cd0ba26d465205",ref:n=>this.overlay=n,dsoCloseOverlay:n=>this.dsoCloseOverlay.emit({originalEvent:n})}))}get host(){return i(this)}static get watchers(){return{documentPanelOpen:["documentPanelOpenWatcher"],filterpanelOpen:["filterpanelOpenWatcher"],overlayOpen:["overlayOpenWatcher"]}}};D.style=x;export{D as dso_viewer_grid};
-//# sourceMappingURL=p-17795a3a.entry.js.map
+import{h as n,r as e,c as t,F as o,a as i}from"./p-4798d219.js";import{c as s}from"./p-8a1a6e56.js";import{d as a}from"./p-16e112f1.js";const r=["main","map"];const l=["search","map","document"];const d={main:"Hoofdpaneel",map:"Kaart",document:"Document",search:"Zoeken"};const c={small:"smal",medium:"middel",large:"breed"};const p=({className:e,onClick:t,label:o,icon:i})=>n("button",{type:"button",class:e,onClick:t},n("span",{class:"sr-only"},o),n("dso-icon",{icon:i}));const b=({shrink:e,expand:t,size:o,panelLabel:i,placement:s})=>{const a=[];if(o!=="small"){a.push(n(p,{onClick:e,label:`${i} smaller maken`,icon:s==="right"?"chevron-right":"chevron-left",className:"shrink"}))}if(o!=="large"){a.push(n(p,{onClick:t,label:`${i} breder maken`,icon:s==="right"?"chevron-left":"chevron-right",className:"expand"}))}return n("div",{class:"sizing-buttons"},n("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte ",i.toLocaleLowerCase(),": ",c[o]),a)};const f=({tabView:e,panelSize:t,shrinkDocumentPanel:o,expandDocumentPanel:i,dsoDocumentPanelSizeChangeAnimationEnd:s})=>n("div",{class:"dso-document-panel",onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){s.emit({currentSize:t})}}},!e&&n(b,{panelLabel:"Documentpaneel",size:t,expand:i,shrink:o,placement:"right"}),n("div",{class:"content"},n("slot",{name:"document-panel"})));const g=({onApply:e,onCancel:t})=>n("div",{class:"filterpanel-buttons"},n("button",{type:"button",class:"cancel-button",onClick:t},n("span",null,"Annuleren")),n("button",{type:"button",class:"apply-button",onClick:e},n("span",null,"Toepassen"),n("dso-icon",{icon:"chevron-right"})));const u=({ref:e,onApply:t,onCancel:o})=>n("dialog",{id:"filterpanel",class:"filterpanel",ref:e,onCancel:n=>{n.preventDefault();o(n)}},n("h1",null,"Uw keuzes"),n(g,{onApply:t,onCancel:o}),n("slot",{name:"filterpanel"}),n(g,{onApply:t,onCancel:o}));const h=({mode:e,tabView:t,mainSize:o,documentPanelOpen:i,mainPanelExpanded:a,mainPanelHidden:r,shrinkMain:l,expandMain:d,toggleMainPanel:c,dsoMainSizeChangeAnimationEnd:p})=>n("div",{class:s("dso-main-panel",{compact:!t&&i&&!a,contracted:!t&&!i&&!a&&e==="vdk",expanded:!t&&i&&a,collapsed:r}),onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){p.emit({currentSize:o})}}},!t&&(e==="vrk"&&n(b,{panelLabel:"Hoofdpaneel",size:o,expand:d,shrink:l,placement:"left"})||e==="vdk"&&i&&n("div",{class:"toggle-button"},n("button",{type:"button",onClick:c},n("span",{class:"sr-only"},"Zoeken paneel ",r?"tonen":"verbergen"),n("dso-icon",{icon:r?"chevron-right":"chevron-left"})))),n("div",{class:s("content",{invisible:r})},n("slot",{name:"main"})));const m=({ref:e,dsoCloseOverlay:t})=>n("dialog",{class:"overlay",ref:e,onCancel:n=>{n.preventDefault();t(n)}},n("button",{type:"button",class:"overlay-close-button",onClick:t},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"sluiten")),n("slot",{name:"overlay"}));const v="*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([mode=vdk]) .overlay {\n  block-size: calc(100% - 32px);\n  margin-block: 16px;\n  margin-inline: auto 16px;\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  inline-size: 1px;\n  block-size: 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-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\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,\n.expand,\n.overlay-close-button {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\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-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.shrink.dso-truncate,\n.expand.dso-truncate,\n.overlay-close-button.dso-truncate {\n  max-inline-size: 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  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 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  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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\n.overlay-close-button {\n  position: absolute;\n  inset-block-start: 8px;\n  inset-inline-end: 16px;\n}\n\n.content.invisible {\n  visibility: hidden;\n}\n\n.dso-main-panel .content,\n.dso-document-panel .content {\n  block-size: 100%;\n  padding-block: 0;\n  padding-inline: 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-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n  z-index: 100;\n}\n.dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {\n  inset-inline-start: -432px;\n}\n.dso-main-panel.compact, .dso-main-panel.contracted {\n  flex-shrink: unset;\n  flex-grow: unset;\n  position: absolute;\n  transition: none;\n}\n.dso-main-panel.expanded.collapsed {\n  position: absolute;\n  block-size: 100%;\n}\n.dso-main-panel .dso-filterblok-address {\n  font-weight: bold;\n  margin-block: 8px;\n  margin-inline: 0;\n}\n.dso-main-panel .sizing-buttons,\n.dso-main-panel .toggle-button {\n  inset-inline-start: calc(100% + 1px);\n  transition: inset-inline-start 200ms ease-in;\n  padding-block: 0 8px;\n  padding-inline: 0 4px;\n}\n.dso-main-panel .sizing-buttons button,\n.dso-main-panel .toggle-button button {\n  border-end-end-radius: 4px;\n  border-start-end-radius: 4px;\n}\n\n.dso-document-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n  z-index: 100;\n}\n.dso-document-panel .sizing-buttons {\n  inset-block-start: auto;\n  inset-block-end: 16px;\n  inset-inline-end: calc(100% + 1px);\n  transition: inset-inline-end 200ms ease-in;\n  padding-block: 0 8px;\n  padding-inline: 4px 0;\n}\n.dso-document-panel .sizing-buttons button {\n  border-end-start-radius: 4px;\n  border-start-start-radius: 4px;\n}\n\n.sizing-buttons,\n.toggle-button {\n  overflow-x: hidden;\n  position: absolute;\n  inset-block-start: 16px;\n  inline-size: 44px;\n  z-index: -1;\n}\n.sizing-buttons button,\n.toggle-button button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible,\n.toggle-button button:focus,\n.toggle-button button:focus-visible {\n  outline-offset: 2px;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n  outline: 0;\n}\n.sizing-buttons button,\n.toggle-button button {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button,\n.toggle-button button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.sizing-buttons button:hover,\n.toggle-button button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover,\n.toggle-button button[disabled],\n.toggle-button button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.sizing-buttons button.dso-small,\n.toggle-button 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.toggle-button button.dso-small dso-icon,\n.toggle-button button.dso-small svg.di,\n.toggle-button button.dso-small.extern::after,\n.toggle-button button.dso-small.download::after,\n.toggle-button button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.sizing-buttons button.dso-small.dso-spinner-left::before,\n.toggle-button button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button.dso-small.dso-spinner-right::after,\n.toggle-button button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button > span,\n.toggle-button button > span {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 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.toggle-button button.dso-spinner-left[disabled],\n.toggle-button 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.toggle-button 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before,\n.toggle-button 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after,\n.toggle-button 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after,\n.toggle-button 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button,\n.toggle-button button {\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n  flex: 0 0 100%;\n  block-size: 40px;\n  min-inline-size: auto;\n  inline-size: 40px;\n}\n.sizing-buttons button:hover dso-icon,\n.toggle-button button:hover dso-icon {\n  color: #fff;\n}\n.sizing-buttons button:focus-visible,\n.toggle-button button:focus-visible {\n  outline-offset: -1px;\n}\n\n.map {\n  block-size: 100%;\n  inline-size: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.filterpanel,\n.overlay {\n  background-color: #fff;\n  border: 0;\n  block-size: 100%;\n  margin-block: 0;\n  max-block-size: 100vh;\n  overflow-y: auto;\n  z-index: 101;\n}\n\n.filterpanel {\n  padding-block: 8px;\n  padding-inline: 16px;\n  inset-inline-start: 0;\n}\n@media screen and (max-width: 768px) {\n  .filterpanel {\n    inline-size: 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: 1.5rem;\n  font-weight: 700;\n}\n@media screen and (min-width: 480px) {\n  .filterpanel h1 {\n    font-size: 2rem;\n  }\n}\n\n.overlay {\n  padding-block: 40px 8px;\n  padding-inline: 16px;\n  inset-inline-end: 0;\n  inline-size: 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    inline-size: 100vw;\n  }\n}\n\n.filterpanel-buttons {\n  text-align: end;\n}\n.filterpanel-buttons .cancel-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\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 {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.filterpanel-buttons .cancel-button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button:active {\n  background-color: #39870c;\n  border-color: #39870c;\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-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 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-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\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 {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\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-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 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-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n  margin-inline-start: 16px;\n}\n\n@media screen and (min-width: 808px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 375px;\n    min-inline-size: 0;\n    max-inline-size: 375px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 375px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 0;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 624px;\n    min-inline-size: 375px;\n    max-inline-size: 624px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 624px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 375px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 60%;\n    min-inline-size: 768px;\n    max-inline-size: 1024px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 768px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 768px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host {\n    display: flex;\n    block-size: 100vh;\n    overflow: hidden;\n    position: relative;\n  }\n  :host .dso-main-panel.compact,\n  :host .dso-main-panel.expanded {\n    flex-basis: unset;\n    min-inline-size: unset;\n    max-inline-size: unset;\n    inline-size: 440px;\n  }\n  :host .dso-main-panel.compact .content,\n  :host .dso-main-panel.expanded .content {\n    block-size: auto;\n    overflow-y: auto;\n  }\n}\n@media screen and (min-width: 808px) {\n  .dso-main-panel,\n  .dso-document-panel {\n    box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  }\n  .dso-main-panel .content,\n  .dso-document-panel .content {\n    overflow-y: auto;\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-inline-size: 896px;\n    inline-size: calc(100vw - 40px);\n  }\n  .filterpanel::before {\n    content: \"\";\n    display: block;\n    position: fixed;\n    inset-block-start: 0;\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    inset-inline-start: 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    inset-inline-start: auto;\n    inline-size: 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-block-size: 32px;\n  }\n  .dso-navbar .dso-navbar-header {\n    float: inline-start;\n  }\n  .dso-navbar .dso-navbar-toggle {\n    border-radius: 4px;\n    min-inline-size: auto;\n    padding-block: 5px;\n    padding-inline: 0;\n  }\n  .dso-navbar .dso-navbar-toggle dso-icon,\n  .dso-navbar .dso-navbar-toggle svg.di {\n    margin-inline-start: 8px;\n    margin-inline-end: 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-navbar.dso-has-navbar-extension .dso-nav > li:last-child {\n    margin-inline-end: 8rem;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-nav {\n    list-style: none;\n    margin-block-end: 0;\n    padding-inline-start: 0;\n  }\n  .dso-nav > li > button {\n    border: 0;\n    background-color: transparent;\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-block-end: 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  }\n  .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .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-visible,\n  .dso-nav.dso-nav-main > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    font-size: 1.25em;\n    line-height: 1;\n    margin-block-start: 8px;\n    padding-block: 8px 7px;\n    padding-inline: 16px;\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  }\n  .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .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-visible,\n  .dso-nav.dso-nav-sub > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    font-size: 1rem;\n    margin-block-start: 4px;\n    padding-block: 4px 3px;\n    padding-inline: 8px;\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-block-end: 1px solid #ccc;\n    display: flex;\n    gap: 16px;\n    margin-block-start: 0;\n    inline-size: 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-block-end: 0;\n    text-decoration: none;\n    touch-action: manipulation;\n    text-align: start;\n    user-select: none;\n    vertical-align: middle;\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 {\n    border: 0;\n    color: #39870c;\n    line-height: 1;\n    padding: 0;\n    background-color: transparent;\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-block: 11px;\n    padding-inline: 0;\n    position: relative;\n  }\n  .dso-tertiary.dso-truncate {\n    max-inline-size: 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    block-size: 24px;\n    vertical-align: middle;\n    inline-size: 24px;\n    margin-inline-end: 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    block-size: 24px;\n    vertical-align: middle;\n    inline-size: 24px;\n    margin-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 0;\n  }\n  .dso-tertiary dso-icon,\n  .dso-tertiary svg.di,\n  .dso-tertiary span {\n    vertical-align: middle;\n  }\n  .dso-tertiary {\n    font-weight: 300;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .filterpanel,\n  .overlay {\n    margin-inline: 0;\n    max-inline-size: 100vw;\n    inset-block-start: 0;\n    inline-size: 100vw;\n  }\n}";const x=v;const k=new ResizeObserver(a((([n])=>{const e=n===null||n===void 0?void 0:n.target.getRootNode();if(e instanceof ShadowRoot&&y(e.host)){e.host._checkMainPanelVisibility()}}),50));function y(n){return n.tagName==="DSO-VIEWER-GRID"}const w=40;const z=768+w;const B=440;const D=class{constructor(n){e(this,n);this.dsoCloseOverlay=t(this,"dsoCloseOverlay",7);this.dsoFilterpanelCancel=t(this,"dsoFilterpanelCancel",7);this.dsoFilterpanelApply=t(this,"dsoFilterpanelApply",7);this.dsoActiveTabSwitch=t(this,"dsoActiveTabSwitch",7);this.dsoMainSizeChange=t(this,"dsoMainSizeChange",7);this.dsoMainSizeChangeAnimationEnd=t(this,"dsoMainSizeChangeAnimationEnd",7);this.dsoDocumentPanelSizeChange=t(this,"dsoDocumentPanelSizeChange",7);this.dsoDocumentPanelSizeChangeAnimationEnd=t(this,"dsoDocumentPanelSizeChangeAnimationEnd",7);this.dsoMainPanelExpand=t(this,"dsoMainPanelExpand",7);this.dsoMainPanelToggle=t(this,"dsoMainPanelToggle",7);this.mediaCondition=`(min-width: ${z}px)`;this.mode="vrk";this.filterpanelOpen=false;this.overlayOpen=false;this.documentPanelOpen=false;this.mainSize="large";this.documentPanelSize="large";this.mainPanelExpanded=false;this.mainPanelHidden=false;this.tabView=window.innerWidth<z;this.switchActiveTab=n=>{this.dsoActiveTabSwitch.emit({tab:n})};this.emitShrinkMain=()=>{this.dsoMainSizeChange.emit({currentSize:this.mainSize,nextSize:this.mainSize==="large"?"medium":"small"})};this.emitExpandMain=()=>{this.dsoMainSizeChange.emit({currentSize:this.mainSize,nextSize:this.mainSize==="small"?"medium":"large"})};this.shrinkDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="large"?"medium":"small"})};this.expandDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="small"?"medium":"large"})};this.toggleMainPanel=()=>{if(this.mapElement instanceof HTMLDivElement&&this.mapElement.clientWidth<=B+w+w){this.mainSize="small"}this.dsoMainPanelToggle.emit({hide:!this.mainPanelHidden})};this.changeListener=n=>this.tabView=!n.matches;this.handleFilterpanelApply=n=>{this.dsoFilterpanelApply.emit({originalEvent:n})};this.handleFilterpanelCancel=n=>{this.dsoFilterpanelCancel.emit({originalEvent:n})}}get filterpanelSlot(){return this.host.querySelector("[slot='filterpanel']")}get overlaySlot(){return this.host.querySelector("[slot='overlay']")}documentPanelOpenWatcher(n){if(n){this._checkMainPanelVisibility()}}filterpanelOpenWatcher(n){var e,t;if(!this.filterpanelSlot){console.warn("slot 'filterpanel' has not been set")}if(n){(e=this.filterpanel)===null||e===void 0?void 0:e.showModal()}else{(t=this.filterpanel)===null||t===void 0?void 0:t.close()}}overlayOpenWatcher(n){var e,t;if(!this.overlaySlot){console.warn("slot 'overlay' has not been set")}if(n){(e=this.overlay)===null||e===void 0?void 0:e.showModal()}else{(t=this.overlay)===null||t===void 0?void 0:t.close()}}async _checkMainPanelVisibility(){if(this.mode==="vdk"&&this.documentPanelOpen&&!this.mainPanelHidden&&this.mapElement instanceof HTMLDivElement&&(this.mapElement.clientWidth<=B+w+w&&!this.mainPanelExpanded||this.mapElement.clientWidth<=w+w&&this.mainPanelExpanded)){this.dsoMainPanelToggle.emit({hide:true})}}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener)}componentDidLoad(){var n,e;if(this.filterpanelOpen&&this.filterpanelSlot){(n=this.filterpanel)===null||n===void 0?void 0:n.showModal()}if(this.overlayOpen&&this.overlaySlot){(e=this.overlay)===null||e===void 0?void 0:e.showModal()}if(this.mode==="vdk"&&this.mapElement instanceof HTMLDivElement){k.observe(this.mapElement)}}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener);if(this.mode==="vdk"&&this.mapElement){k.unobserve(this.mapElement)}}render(){const e=this.mode==="vdk"?l:r;return n(o,null,this.tabView&&n("nav",{key:"5bb28bca2da923349ff553a3e32ad6afc6292189",class:"dso-navbar"},n("ul",{key:"0ec74cb43fb25056ca47b063c94e19deaf12e5a2",class:"dso-nav dso-nav-sub"},e.map((e=>n("li",{key:e,class:s({"dso-active":this.activeTab===e})},n("button",{type:"button",class:"dso-tertiary",onClick:()=>this.switchActiveTab(e)},d[e])))))),(!this.tabView||this.tabView&&(this.activeTab==="main"||this.activeTab==="search"))&&n(h,{key:"92b77fad12d794fe466f0eefb1c077545887970b",mode:this.mode,tabView:this.tabView,mainSize:this.mainSize,documentPanelOpen:this.documentPanelOpen,mainPanelExpanded:this.mainPanelExpanded,mainPanelHidden:this.mainPanelHidden,shrinkMain:this.emitShrinkMain,expandMain:this.emitExpandMain,toggleMainPanel:this.toggleMainPanel,dsoMainSizeChangeAnimationEnd:this.dsoMainSizeChangeAnimationEnd}),n(u,{key:"ecb109bf285a6838c5ec84ef069bd53ba581c5a7",ref:n=>this.filterpanel=n,onApply:this.handleFilterpanelApply,onCancel:this.handleFilterpanelCancel}),(!this.tabView||this.tabView&&this.activeTab==="map")&&n("div",{key:"b4a056be215b05ffb730f82aee8eebb7adf1c7b1",class:"map",ref:n=>this.mapElement=n},n("slot",{key:"26a55ded1adf6f6d12814c4f327538e6cc14dbe8",name:"map"})),(!this.tabView&&this.documentPanelOpen||this.tabView&&this.activeTab==="document")&&n(f,{key:"b2ebd498fa85c639196525cda9f4386613bae869",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),n(m,{key:"718aa0f258d94bad2336b14f13cd0ba26d465205",ref:n=>this.overlay=n,dsoCloseOverlay:n=>this.dsoCloseOverlay.emit({originalEvent:n})}))}get host(){return i(this)}static get watchers(){return{documentPanelOpen:["documentPanelOpenWatcher"],filterpanelOpen:["filterpanelOpenWatcher"],overlayOpen:["overlayOpenWatcher"]}}};D.style=x;export{D as dso_viewer_grid};
+//# sourceMappingURL=p-3ca2b395.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"names":["viewerGridVrkTabs","viewerGridVdkTabs","viewerGridTabLabelMap","main","map","document","search","viewerGridSizeLabelMap","small","medium","large","SizingButton","className","onClick","label","icon","h","type","class","SizingButtons","shrink","expand","size","panelLabel","placement","buttons","push","toLocaleLowerCase","DocumentPanel","tabView","panelSize","shrinkDocumentPanel","expandDocumentPanel","dsoDocumentPanelSizeChangeAnimationEnd","onTransitionEnd","e","propertyName","emit","currentSize","name","ViewerGridFilterpanelButtons","onApply","onCancel","Filterpanel","ref","id","preventDefault","MainPanel","mode","mainSize","documentPanelOpen","mainPanelExpanded","mainPanelHidden","shrinkMain","expandMain","toggleMainPanel","dsoMainSizeChangeAnimationEnd","clsx","compact","contracted","expanded","collapsed","invisible","Overlay","dsoCloseOverlay","viewerGridCss","DsoViewerGridStyle0","resizeObserver","ResizeObserver","debounce","entry","shadowRoot","target","getRootNode","ShadowRoot","isDsoViewerGridComponent","host","_checkMainPanelVisibility","element","tagName","buttonWidth","tabViewBreakpoint","minMapElementWidth","ViewerGrid","constructor","hostRef","this","mediaCondition","filterpanelOpen","overlayOpen","documentPanelSize","window","innerWidth","switchActiveTab","tab","dsoActiveTabSwitch","emitShrinkMain","dsoMainSizeChange","nextSize","emitExpandMain","dsoDocumentPanelSizeChange","mapElement","HTMLDivElement","clientWidth","dsoMainPanelToggle","hide","changeListener","largeScreen","matches","handleFilterpanelApply","mouseEvent","dsoFilterpanelApply","originalEvent","handleFilterpanelCancel","dsoFilterpanelCancel","filterpanelSlot","querySelector","overlaySlot","documentPanelOpenWatcher","open","filterpanelOpenWatcher","console","warn","_a","filterpanel","showModal","_b","close","overlayOpenWatcher","overlay","connectedCallback","matchMedia","addEventListener","componentDidLoad","observe","disconnectedCallback","removeEventListener","unobserve","render","tabLabels","Fragment","key","activeTab"],"sources":["src/components/viewer-grid/viewer-grid.interfaces.ts","src/components/viewer-grid/components/sizing-buttons.tsx","src/components/viewer-grid/components/document-panel.tsx","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 currentSize: ViewerGridPanelSize;\r\n nextSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridChangeSizeAnimationEndEvent {\r\n currentSize: ViewerGridPanelSize;\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 interface ViewerGridActiveTabSwitchEvent {\r\n tab: ViewerGridTab;\r\n}\r\n\r\nexport interface ViewerGridMainExpandEvent {\r\n expand: boolean;\r\n}\r\n\r\nexport interface ViewerGridMainToggleEvent {\r\n hide: boolean;\r\n}\r\n\r\nexport type ViewerGridMode = \"vdk\" | \"vrk\";\r\n\r\nexport type ViewerGridPanelSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type ViewerGridLabelSizeMap = { [key in ViewerGridPanelSize]: string };\r\n\r\nexport const viewerGridVrkTabs = [\"main\", \"map\"] as const;\r\nexport type ViewerGridVrkTab = (typeof viewerGridVrkTabs)[number];\r\n\r\nexport const viewerGridVdkTabs = [\"search\", \"map\", \"document\"] as const;\r\nexport type ViewerGridVdkTab = (typeof viewerGridVdkTabs)[number];\r\n\r\nexport type ViewerGridTab = ViewerGridVrkTab | ViewerGridVdkTab;\r\n\r\nexport type ViewerGridTabLabelMap = { [key in ViewerGridTab]: string };\r\n\r\nexport const viewerGridTabLabelMap: ViewerGridTabLabelMap = {\r\n main: \"Hoofdpaneel\",\r\n map: \"Kaart\",\r\n document: \"Document\",\r\n search: \"Zoeken\",\r\n};\r\n\r\nexport const viewerGridSizeLabelMap: ViewerGridLabelSizeMap = {\r\n small: \"smal\",\r\n medium: \"middel\",\r\n large: \"breed\",\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { ViewerGridPanelSize, viewerGridSizeLabelMap } from \"../viewer-grid.interfaces\";\r\n\r\ninterface SizingButtonProp {\r\n className: string;\r\n onClick: any;\r\n label: string;\r\n icon: \"chevron-left\" | \"chevron-right\";\r\n}\r\n\r\nconst SizingButton: FunctionalComponent<SizingButtonProp> = ({ className, onClick, label, icon }) => (\r\n <button type=\"button\" class={className} onClick={onClick}>\r\n <span class=\"sr-only\">{label}</span>\r\n <dso-icon icon={icon}></dso-icon>\r\n </button>\r\n);\r\n\r\ninterface SizingButtonProps {\r\n panelLabel: string;\r\n size: ViewerGridPanelSize;\r\n expand: () => void;\r\n shrink: () => void;\r\n placement: \"left\" | \"right\";\r\n}\r\n\r\nexport const SizingButtons: FunctionalComponent<SizingButtonProps> = ({\r\n shrink,\r\n expand,\r\n size,\r\n panelLabel,\r\n placement,\r\n}) => {\r\n const buttons = [];\r\n\r\n if (size !== \"small\") {\r\n buttons.push(\r\n <SizingButton\r\n onClick={shrink}\r\n label={`${panelLabel} smaller maken`}\r\n icon={placement === \"right\" ? \"chevron-right\" : \"chevron-left\"}\r\n className=\"shrink\"\r\n />,\r\n );\r\n }\r\n\r\n if (size !== \"large\") {\r\n buttons.push(\r\n <SizingButton\r\n onClick={expand}\r\n label={`${panelLabel} breder maken`}\r\n icon={placement === \"right\" ? \"chevron-left\" : \"chevron-right\"}\r\n className=\"expand\"\r\n />,\r\n );\r\n }\r\n\r\n return (\r\n <div class=\"sizing-buttons\">\r\n <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n Breedte {panelLabel.toLocaleLowerCase()}: {viewerGridSizeLabelMap[size]}\r\n </span>\r\n {buttons}\r\n </div>\r\n );\r\n};\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent } from \"../viewer-grid.interfaces\";\r\nimport { SizingButtons } from \"./sizing-buttons\";\r\n\r\nexport interface ViewerGridDocumentPanelProps {\r\n tabView: boolean;\r\n panelSize: ViewerGridPanelSize;\r\n shrinkDocumentPanel: () => void;\r\n expandDocumentPanel: () => void;\r\n dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const DocumentPanel: FunctionalComponent<ViewerGridDocumentPanelProps> = ({\r\n tabView,\r\n panelSize,\r\n shrinkDocumentPanel,\r\n expandDocumentPanel,\r\n dsoDocumentPanelSizeChangeAnimationEnd,\r\n}) => (\r\n <div\r\n class=\"dso-document-panel\"\r\n onTransitionEnd={(e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });\r\n }\r\n }}\r\n >\r\n {!tabView && (\r\n <SizingButtons\r\n panelLabel=\"Documentpaneel\"\r\n size={panelSize}\r\n expand={expandDocumentPanel}\r\n shrink={shrinkDocumentPanel}\r\n placement=\"right\"\r\n />\r\n )}\r\n <div class=\"content\">\r\n <slot name=\"document-panel\" />\r\n </div>\r\n </div>\r\n);\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 { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent, ViewerGridMode } from \"../viewer-grid.interfaces\";\r\nimport { SizingButtons } from \"./sizing-buttons\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n mode: ViewerGridMode;\r\n tabView: boolean;\r\n mainSize: ViewerGridPanelSize;\r\n documentPanelOpen: boolean;\r\n mainPanelExpanded: boolean;\r\n mainPanelHidden: boolean;\r\n shrinkMain: () => void;\r\n expandMain: () => void;\r\n toggleMainPanel: () => void;\r\n dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n mode,\r\n tabView,\r\n mainSize,\r\n documentPanelOpen,\r\n mainPanelExpanded,\r\n mainPanelHidden,\r\n shrinkMain,\r\n expandMain,\r\n toggleMainPanel,\r\n dsoMainSizeChangeAnimationEnd,\r\n}) => (\r\n <div\r\n class={clsx(\"dso-main-panel\", {\r\n compact: !tabView && documentPanelOpen && !mainPanelExpanded,\r\n contracted: !tabView && !documentPanelOpen && !mainPanelExpanded && mode === \"vdk\",\r\n expanded: !tabView && documentPanelOpen && mainPanelExpanded,\r\n collapsed: mainPanelHidden,\r\n })}\r\n onTransitionEnd={(e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });\r\n }\r\n }}\r\n >\r\n {!tabView &&\r\n ((mode === \"vrk\" && (\r\n <SizingButtons\r\n panelLabel=\"Hoofdpaneel\"\r\n size={mainSize}\r\n expand={expandMain}\r\n shrink={shrinkMain}\r\n placement=\"left\"\r\n />\r\n )) ||\r\n (mode === \"vdk\" && documentPanelOpen && (\r\n <div class=\"toggle-button\">\r\n <button type=\"button\" onClick={toggleMainPanel}>\r\n <span class=\"sr-only\">Zoeken paneel {mainPanelHidden ? \"tonen\" : \"verbergen\"}</span>\r\n <dso-icon icon={mainPanelHidden ? \"chevron-right\" : \"chevron-left\"}></dso-icon>\r\n </button>\r\n </div>\r\n )))}\r\n <div class={clsx(\"content\", { invisible: mainPanelHidden })}>\r\n <slot name=\"main\" />\r\n </div>\r\n </div>\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/heading\";\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\n:host([mode=\"vdk\"]) {\r\n .overlay {\r\n block-size: calc(100% - units.$u4);\r\n margin-block: units.$u2;\r\n margin-inline: auto units.$u2;\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n @include button.tertiary($modifiers: false);\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n}\r\n\r\n.overlay-close-button {\r\n position: absolute;\r\n inset-block-start: units.$u1;\r\n inset-inline-end: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.content.invisible {\r\n visibility: hidden;\r\n}\r\n\r\n.dso-main-panel,\r\n.dso-document-panel {\r\n .content {\r\n block-size: 100%;\r\n padding-block: 0;\r\n padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n }\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:\r\n flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n z-index: zindex.$viewer-grid-main-panel;\r\n\r\n &.compact,\r\n &.expanded {\r\n &.collapsed {\r\n inset-inline-start: -432px;\r\n }\r\n }\r\n\r\n &.compact,\r\n &.contracted {\r\n flex-shrink: unset;\r\n flex-grow: unset;\r\n position: absolute;\r\n transition: none;\r\n }\r\n\r\n &.expanded.collapsed {\r\n position: absolute;\r\n block-size: 100%;\r\n }\r\n\r\n .dso-filterblok-address {\r\n font-weight: bold;\r\n margin-block: units.$u1;\r\n margin-inline: 0;\r\n }\r\n\r\n .sizing-buttons,\r\n .toggle-button {\r\n inset-inline-start: calc(100% + 1px);\r\n transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n padding-block: 0 units.$u1;\r\n padding-inline: 0 units.$u1 * 0.5;\r\n\r\n button {\r\n border-end-end-radius: 4px;\r\n border-start-end-radius: 4px;\r\n }\r\n }\r\n}\r\n\r\n.dso-document-panel {\r\n background-color: colors.$wit;\r\n flex-shrink: 0;\r\n flex-grow: 0;\r\n position: relative;\r\n transition:\r\n flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n z-index: zindex.$viewer-grid-main-panel;\r\n\r\n .sizing-buttons {\r\n inset-block-start: auto;\r\n inset-block-end: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n inset-inline-end: calc(100% + 1px);\r\n transition: inset-inline-end core-viewer-grid-variables.$transition-time ease-in;\r\n padding-block: 0 units.$u1;\r\n padding-inline: units.$u1 * 0.5 0;\r\n\r\n button {\r\n border-end-start-radius: 4px;\r\n border-start-start-radius: 4px;\r\n }\r\n }\r\n}\r\n\r\n.sizing-buttons,\r\n.toggle-button {\r\n overflow-x: hidden;\r\n position: absolute;\r\n inset-block-start: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n inline-size: 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\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n border: 0;\r\n padding: 8px;\r\n border-radius: 0;\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 block-size: core-viewer-grid-variables.$resize-button-size;\r\n min-inline-size: auto;\r\n inline-size: core-viewer-grid-variables.$resize-button-size;\r\n }\r\n\r\n &:hover {\r\n dso-icon {\r\n color: colors.$wit;\r\n }\r\n }\r\n\r\n &:focus-visible {\r\n outline-offset: -1px;\r\n }\r\n }\r\n}\r\n\r\n.map {\r\n block-size: 100%;\r\n inline-size: 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 block-size: 100%;\r\n margin-block: 0;\r\n max-block-size: 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-block: units.$u1;\r\n padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n inset-inline-start: 0;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$filterpanel-inline-size) {\r\n inline-size: 100vw;\r\n\r\n &::before {\r\n display: none !important;\r\n }\r\n }\r\n\r\n h1 {\r\n @include heading.base();\r\n @include heading.margin-large();\r\n @include heading.h1();\r\n }\r\n}\r\n\r\n.overlay {\r\n padding-block: units.$u5 units.$u1;\r\n padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n inset-inline-end: 0;\r\n inline-size: core-viewer-grid-variables.$overlay-inline-size;\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-inline-size) {\r\n inline-size: 100vw;\r\n }\r\n}\r\n\r\n.filterpanel-buttons {\r\n text-align: end;\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-inline-start: 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([main-size=\"small\"]) .dso-main-panel,\r\n :host([document-panel-size=\"small\"]) .dso-document-panel {\r\n flex-basis: core-viewer-grid-variables.$small;\r\n min-inline-size: 0;\r\n max-inline-size: 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-inline-size: 100vw;\r\n min-inline-size: 0;\r\n transition: none;\r\n }\r\n }\r\n\r\n :host([main-size=\"medium\"]) .dso-main-panel,\r\n :host([document-panel-size=\"medium\"]) .dso-document-panel {\r\n flex-basis: core-viewer-grid-variables.$medium;\r\n min-inline-size: core-viewer-grid-variables.$small;\r\n max-inline-size: 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-inline-size: 100vw;\r\n min-inline-size: core-viewer-grid-variables.$small;\r\n transition: none;\r\n }\r\n }\r\n\r\n :host([main-size=\"large\"]) .dso-main-panel,\r\n :host([document-panel-size=\"large\"]) .dso-document-panel {\r\n flex-basis: core-viewer-grid-variables.$large;\r\n min-inline-size: core-viewer-grid-variables.$large-min;\r\n max-inline-size: 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-inline-size: 100vw;\r\n min-inline-size: core-viewer-grid-variables.$large-min;\r\n transition: none;\r\n }\r\n }\r\n\r\n :host {\r\n display: flex;\r\n block-size: 100vh;\r\n overflow: hidden;\r\n position: relative;\r\n\r\n .dso-main-panel.compact,\r\n .dso-main-panel.expanded {\r\n flex-basis: unset;\r\n min-inline-size: unset;\r\n max-inline-size: unset;\r\n inline-size: 440px;\r\n\r\n .content {\r\n block-size: auto;\r\n overflow-y: auto;\r\n }\r\n }\r\n }\r\n\r\n .dso-main-panel,\r\n .dso-document-panel {\r\n box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n\r\n .content {\r\n overflow-y: auto;\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-inline-size: core-viewer-grid-variables.$filterpanel-max-inline-size;\r\n inline-size: calc(100vw - 40px);\r\n\r\n &::before {\r\n content: \"\";\r\n display: block;\r\n position: fixed;\r\n inset-block-start: 0;\r\n inset-block-end: 0;\r\n inset-inline-end: 0;\r\n inset-inline-start: core-viewer-grid-variables.$filterpanel-max-inline-size;\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-inline-size + 40px}) {\r\n inset-inline-start: auto;\r\n inline-size: 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 inline-size: calc(100vw - units.$u4);\r\n }\r\n\r\n .dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n font-weight: 300;\r\n }\r\n }\r\n\r\n .filterpanel,\r\n .overlay {\r\n margin-inline: 0;\r\n max-inline-size: 100vw;\r\n inset-block-start: 0;\r\n inline-size: 100vw;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DocumentPanel, Filterpanel, MainPanel, Overlay } from \"./components\";\r\nimport {\r\n ViewerGridPanelSize,\r\n ViewerGridVdkTab,\r\n ViewerGridVrkTab,\r\n ViewerGridChangeSizeAnimationEndEvent,\r\n ViewerGridChangeSizeEvent,\r\n ViewerGridCloseOverlayEvent,\r\n ViewerGridFilterpanelApplyEvent,\r\n ViewerGridFilterpanelCancelEvent,\r\n ViewerGridMainExpandEvent,\r\n ViewerGridMainToggleEvent,\r\n ViewerGridActiveTabSwitchEvent,\r\n ViewerGridMode,\r\n viewerGridTabLabelMap,\r\n viewerGridVdkTabs,\r\n viewerGridVrkTabs,\r\n ViewerGridTab,\r\n} from \"./viewer-grid.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(([entry]) => {\r\n const shadowRoot = entry?.target.getRootNode();\r\n if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {\r\n shadowRoot.host._checkMainPanelVisibility();\r\n }\r\n }, 50),\r\n);\r\n\r\nfunction isDsoViewerGridComponent(element: Element): element is HTMLDsoViewerGridElement {\r\n return element.tagName === \"DSO-VIEWER-GRID\";\r\n}\r\n\r\nconst buttonWidth = 40;\r\n\r\nconst tabViewBreakpoint = 768 + buttonWidth;\r\n\r\nconst minMapElementWidth = 440;\r\n\r\n/**\r\n * @slot main\r\n * @slot map\r\n * @slot filterpanel\r\n * @slot overlay\r\n * @slot document-panel - VDK only\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: ${tabViewBreakpoint}px)`;\r\n\r\n private mapElement?: HTMLDivElement;\r\n\r\n /**\r\n * VRK or VDK implementation.\r\n */\r\n @Prop({ reflect: true })\r\n mode: ViewerGridMode = \"vrk\";\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 * **VDK only.** Set to true when document panel should show.\r\n */\r\n @Prop({ reflect: true })\r\n documentPanelOpen = false;\r\n\r\n /**\r\n * Size of the panel when component loads.\r\n *\r\n * Default size is `large`.\r\n */\r\n @Prop({ reflect: true })\r\n mainSize: ViewerGridPanelSize = \"large\";\r\n\r\n /**\r\n * Set active tab in tab view.\r\n */\r\n @Prop()\r\n activeTab?: ViewerGridVdkTab | ViewerGridVrkTab;\r\n\r\n /**\r\n * **VDK only.** Size of the panel when component loads.\r\n *\r\n * Default size is `large`.\r\n */\r\n @Prop({ reflect: true })\r\n documentPanelSize: ViewerGridPanelSize = \"large\";\r\n\r\n /**\r\n * **VDK only.** Set to show main panel expanded.\r\n */\r\n @Prop()\r\n mainPanelExpanded = false;\r\n\r\n /**\r\n * **VDK only.** Set to hide the main panel.\r\n */\r\n @Prop()\r\n mainPanelHidden = false;\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 when user applies filterpanel options.\r\n */\r\n @Event()\r\n dsoActiveTabSwitch!: EventEmitter<ViewerGridActiveTabSwitchEvent>;\r\n\r\n /**\r\n * Emitted on interaction with sizing buttons.\r\n */\r\n @Event()\r\n dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n /**\r\n * Emitted after main size animation.\r\n */\r\n @Event()\r\n dsoMainSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n /**\r\n * **VDK only.** Emitted on interaction with sizing buttons.\r\n */\r\n @Event()\r\n dsoDocumentPanelSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n /**\r\n * **VDK only.** Emitted after main size animation.\r\n */\r\n @Event()\r\n dsoDocumentPanelSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n /**\r\n * **VDK only.** Emitted when the user wants to expand the main panel.\r\n */\r\n @Event()\r\n dsoMainPanelExpand!: EventEmitter<ViewerGridMainExpandEvent>;\r\n\r\n /**\r\n * **VDK only.** Emitted when the user toggles the visibility of the main panel.\r\n *\r\n * Also emitted by scripting when the panels do not fit anymore.\r\n */\r\n @Event()\r\n dsoMainPanelToggle!: EventEmitter<ViewerGridMainToggleEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoViewerGridElement;\r\n\r\n @State()\r\n tabView = window.innerWidth < tabViewBreakpoint;\r\n\r\n private filterpanel: HTMLDialogElement | undefined;\r\n\r\n private get filterpanelSlot() {\r\n return this.host.querySelector(\"[slot='filterpanel']\");\r\n }\r\n\r\n private get overlaySlot() {\r\n return this.host.querySelector(\"[slot='overlay']\");\r\n }\r\n\r\n private overlay: HTMLDialogElement | undefined;\r\n\r\n @Watch(\"documentPanelOpen\")\r\n documentPanelOpenWatcher(open: boolean) {\r\n if (open) {\r\n this._checkMainPanelVisibility();\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 /**\r\n * @internal\r\n */\r\n @Method()\r\n async _checkMainPanelVisibility() {\r\n if (\r\n this.mode === \"vdk\" &&\r\n this.documentPanelOpen &&\r\n !this.mainPanelHidden &&\r\n this.mapElement instanceof HTMLDivElement &&\r\n ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) ||\r\n (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))\r\n ) {\r\n this.dsoMainPanelToggle.emit({\r\n hide: true,\r\n });\r\n }\r\n }\r\n\r\n private switchActiveTab = (tab: ViewerGridTab) => {\r\n this.dsoActiveTabSwitch.emit({\r\n tab,\r\n });\r\n };\r\n\r\n private emitShrinkMain = () => {\r\n this.dsoMainSizeChange.emit({\r\n currentSize: this.mainSize,\r\n nextSize: this.mainSize === \"large\" ? \"medium\" : \"small\",\r\n });\r\n };\r\n\r\n private emitExpandMain = () => {\r\n this.dsoMainSizeChange.emit({\r\n currentSize: this.mainSize,\r\n nextSize: this.mainSize === \"small\" ? \"medium\" : \"large\",\r\n });\r\n };\r\n\r\n private shrinkDocumentPanel = () => {\r\n this.dsoDocumentPanelSizeChange.emit({\r\n currentSize: this.documentPanelSize,\r\n nextSize: this.documentPanelSize === \"large\" ? \"medium\" : \"small\",\r\n });\r\n };\r\n\r\n private expandDocumentPanel = () => {\r\n this.dsoDocumentPanelSizeChange.emit({\r\n currentSize: this.documentPanelSize,\r\n nextSize: this.documentPanelSize === \"small\" ? \"medium\" : \"large\",\r\n });\r\n };\r\n\r\n private toggleMainPanel = () => {\r\n if (\r\n this.mapElement instanceof HTMLDivElement &&\r\n this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth\r\n ) {\r\n this.mainSize = \"small\";\r\n }\r\n\r\n this.dsoMainPanelToggle.emit({\r\n hide: !this.mainPanelHidden,\r\n });\r\n };\r\n\r\n private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\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 connectedCallback() {\r\n window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\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 if (this.mode === \"vdk\" && this.mapElement instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.mapElement);\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n\r\n if (this.mode === \"vdk\" && this.mapElement) {\r\n resizeObserver.unobserve(this.mapElement);\r\n }\r\n }\r\n\r\n render() {\r\n const tabLabels = this.mode === \"vdk\" ? viewerGridVdkTabs : viewerGridVrkTabs;\r\n\r\n return (\r\n <>\r\n {this.tabView && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-sub\">\r\n {tabLabels.map((tab) => (\r\n <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={() => this.switchActiveTab(tab)}>\r\n {viewerGridTabLabelMap[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\" || this.activeTab === \"search\"))) && (\r\n <MainPanel\r\n mode={this.mode}\r\n tabView={this.tabView}\r\n mainSize={this.mainSize}\r\n documentPanelOpen={this.documentPanelOpen}\r\n mainPanelExpanded={this.mainPanelExpanded}\r\n mainPanelHidden={this.mainPanelHidden}\r\n shrinkMain={this.emitShrinkMain}\r\n expandMain={this.emitExpandMain}\r\n toggleMainPanel={this.toggleMainPanel}\r\n dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n ></MainPanel>\r\n )}\r\n <Filterpanel\r\n ref={(element) => (this.filterpanel = element)}\r\n onApply={this.handleFilterpanelApply}\r\n onCancel={this.handleFilterpanelCancel}\r\n ></Filterpanel>\r\n {(!this.tabView || (this.tabView && this.activeTab === \"map\")) && (\r\n <div class=\"map\" ref={(element) => (this.mapElement = element)}>\r\n <slot name=\"map\" />\r\n </div>\r\n )}\r\n {((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === \"document\")) && (\r\n <DocumentPanel\r\n tabView={this.tabView}\r\n panelSize={this.documentPanelSize}\r\n shrinkDocumentPanel={this.shrinkDocumentPanel}\r\n expandDocumentPanel={this.expandDocumentPanel}\r\n dsoDocumentPanelSizeChangeAnimationEnd={this.dsoDocumentPanelSizeChangeAnimationEnd}\r\n ></DocumentPanel>\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 </>\r\n );\r\n }\r\n}\r\n"],"mappings":"wIAuCO,MAAMA,EAAoB,CAAC,OAAQ,OAGnC,MAAMC,EAAoB,CAAC,SAAU,MAAO,YAO5C,MAAMC,EAA+C,CAC1DC,KAAM,cACNC,IAAK,QACLC,SAAU,WACVC,OAAQ,UAGH,MAAMC,EAAiD,CAC5DC,MAAO,OACPC,OAAQ,SACRC,MAAO,SCjDT,MAAMC,EAAsD,EAAGC,YAAWC,UAASC,QAAOC,UACxFC,EAAA,UAAQC,KAAK,SAASC,MAAON,EAAWC,QAASA,GAC/CG,EAAA,QAAME,MAAM,WAAWJ,GACvBE,EAAA,YAAUD,KAAMA,KAYb,MAAMI,EAAwD,EACnEC,SACAC,SACAC,OACAC,aACAC,gBAEA,MAAMC,EAAU,GAEhB,GAAIH,IAAS,QAAS,CACpBG,EAAQC,KACNV,EAACL,EAAY,CACXE,QAASO,EACTN,MAAO,GAAGS,kBACVR,KAAMS,IAAc,QAAU,gBAAkB,eAChDZ,UAAU,W,CAKhB,GAAIU,IAAS,QAAS,CACpBG,EAAQC,KACNV,EAACL,EAAY,CACXE,QAASQ,EACTP,MAAO,GAAGS,iBACVR,KAAMS,IAAc,QAAU,eAAiB,gBAC/CZ,UAAU,W,CAKhB,OACEI,EAAA,OAAKE,MAAM,kBACTF,EAAA,QAAME,MAAM,UAAS,YAAW,SAAQ,cAAa,Q,WAC1CK,EAAWI,oB,KAAuBpB,EAAuBe,IAEnEG,EACG,ECjDH,MAAMG,EAAmE,EAC9EC,UACAC,YACAC,sBACAC,sBACAC,4CAEAjB,EAAA,OACEE,MAAM,qBACNgB,gBAAkBC,IAChB,GAAIA,EAAEC,eAAiB,aAAc,CACnCH,EAAuCI,KAAK,CAAEC,YAAaR,G,KAI7DD,GACAb,EAACG,EAAa,CACZI,WAAW,iBACXD,KAAMQ,EACNT,OAAQW,EACRZ,OAAQW,EACRP,UAAU,UAGdR,EAAA,OAAKE,MAAM,WACTF,EAAA,QAAMuB,KAAK,qBC/BV,MAAMC,EAAuF,EAClGC,UACAC,cAEA1B,EAAA,OAAKE,MAAM,uBACTF,EAAA,UAAQC,KAAK,SAASC,MAAM,gBAAgBL,QAAS6B,GACnD1B,EAAA,0BAEFA,EAAA,UAAQC,KAAK,SAASC,MAAM,eAAeL,QAAS4B,GAClDzB,EAAA,yBACAA,EAAA,YAAUD,KAAK,oBCPd,MAAM4B,EAA+D,EAAGC,MAAKH,UAASC,cAC3F1B,EAAA,UACE6B,GAAG,cACH3B,MAAM,cACN0B,IAAKA,EACLF,SAAWP,IACTA,EAAEW,iBAEFJ,EAASP,EAAE,GAGbnB,EAAA,uBACAA,EAACwB,EAA4B,CAACC,QAASA,EAASC,SAAUA,IAC1D1B,EAAA,QAAMuB,KAAK,gBACXvB,EAACwB,EAA4B,CAACC,QAASA,EAASC,SAAUA,KCLvD,MAAMK,EAA2D,EACtEC,OACAnB,UACAoB,WACAC,oBACAC,oBACAC,kBACAC,aACAC,aACAC,kBACAC,mCAEAxC,EAAA,OACEE,MAAOuC,EAAK,iBAAkB,CAC5BC,SAAU7B,GAAWqB,IAAsBC,EAC3CQ,YAAa9B,IAAYqB,IAAsBC,GAAqBH,IAAS,MAC7EY,UAAW/B,GAAWqB,GAAqBC,EAC3CU,UAAWT,IAEblB,gBAAkBC,IAChB,GAAIA,EAAEC,eAAiB,aAAc,CACnCoB,EAA8BnB,KAAK,CAAEC,YAAaW,G,KAIpDpB,IACEmB,IAAS,OACThC,EAACG,EAAa,CACZI,WAAW,cACXD,KAAM2B,EACN5B,OAAQiC,EACRlC,OAAQiC,EACR7B,UAAU,UAGXwB,IAAS,OAASE,GACjBlC,EAAA,OAAKE,MAAM,iBACTF,EAAA,UAAQC,KAAK,SAASJ,QAAS0C,GAC7BvC,EAAA,QAAME,MAAM,W,iBAAyBkC,EAAkB,QAAU,aACjEpC,EAAA,YAAUD,KAAMqC,EAAkB,gBAAkB,oBAI9DpC,EAAA,OAAKE,MAAOuC,EAAK,UAAW,CAAEK,UAAWV,KACvCpC,EAAA,QAAMuB,KAAK,WCxDV,MAAMwB,EAAuD,EAAGnB,MAAKoB,qBAC1EhD,EAAA,UACEE,MAAM,UACN0B,IAAKA,EACLF,SAAWP,IACTA,EAAEW,iBAEFkB,EAAgB7B,EAAE,GAGpBnB,EAAA,UAAQC,KAAK,SAASC,MAAM,uBAAuBL,QAASmD,GAC1DhD,EAAA,YAAUD,KAAK,UACfC,EAAA,QAAME,MAAM,WAAS,YAEvBF,EAAA,QAAMuB,KAAK,aCrBf,MAAM0B,EAAgB,0wyCACtB,MAAAC,EAAeD,ECuBf,MAAME,EAAiB,IAAIC,eACzBC,GAAS,EAAEC,MACT,MAAMC,EAAaD,IAAK,MAALA,SAAK,SAALA,EAAOE,OAAOC,cACjC,GAAIF,aAAsBG,YAAcC,EAAyBJ,EAAWK,MAAO,CACjFL,EAAWK,KAAKC,2B,IAEjB,KAGL,SAASF,EAAyBG,GAChC,OAAOA,EAAQC,UAAY,iBAC7B,CAEA,MAAMC,EAAc,GAEpB,MAAMC,EAAoB,IAAMD,EAEhC,MAAME,EAAqB,I,MAcdC,EAAU,MALvB,WAAAC,CAAAC,G,4nBAMUC,KAAAC,eAAiB,eAAeN,OAQxCK,KAAAtC,KAAuB,MAMvBsC,KAAAE,gBAAkB,MAMlBF,KAAAG,YAAc,MAMdH,KAAApC,kBAAoB,MAQpBoC,KAAArC,SAAgC,QAchCqC,KAAAI,kBAAyC,QAMzCJ,KAAAnC,kBAAoB,MAMpBmC,KAAAlC,gBAAkB,MAoElBkC,KAAAzD,QAAU8D,OAAOC,WAAaX,EAkEtBK,KAAAO,gBAAmBC,IACzBR,KAAKS,mBAAmB1D,KAAK,CAC3ByD,OACA,EAGIR,KAAAU,eAAiB,KACvBV,KAAKW,kBAAkB5D,KAAK,CAC1BC,YAAagD,KAAKrC,SAClBiD,SAAUZ,KAAKrC,WAAa,QAAU,SAAW,SACjD,EAGIqC,KAAAa,eAAiB,KACvBb,KAAKW,kBAAkB5D,KAAK,CAC1BC,YAAagD,KAAKrC,SAClBiD,SAAUZ,KAAKrC,WAAa,QAAU,SAAW,SACjD,EAGIqC,KAAAvD,oBAAsB,KAC5BuD,KAAKc,2BAA2B/D,KAAK,CACnCC,YAAagD,KAAKI,kBAClBQ,SAAUZ,KAAKI,oBAAsB,QAAU,SAAW,SAC1D,EAGIJ,KAAAtD,oBAAsB,KAC5BsD,KAAKc,2BAA2B/D,KAAK,CACnCC,YAAagD,KAAKI,kBAClBQ,SAAUZ,KAAKI,oBAAsB,QAAU,SAAW,SAC1D,EAGIJ,KAAA/B,gBAAkB,KACxB,GACE+B,KAAKe,sBAAsBC,gBAC3BhB,KAAKe,WAAWE,aAAerB,EAAqBF,EAAcA,EAClE,CACAM,KAAKrC,SAAW,O,CAGlBqC,KAAKkB,mBAAmBnE,KAAK,CAC3BoE,MAAOnB,KAAKlC,iBACZ,EAGIkC,KAAAoB,eAAkBC,GAAsCrB,KAAKzD,SAAW8E,EAAYC,QAEpFtB,KAAAuB,uBAA0BC,IAChCxB,KAAKyB,oBAAoB1E,KAAK,CAAE2E,cAAeF,GAAa,EAGtDxB,KAAA2B,wBAA2BH,IACjCxB,KAAK4B,qBAAqB7E,KAAK,CAAE2E,cAAeF,GAAa,C,CApH/D,mBAAYK,GACV,OAAO7B,KAAKV,KAAKwC,cAAc,uB,CAGjC,eAAYC,GACV,OAAO/B,KAAKV,KAAKwC,cAAc,mB,CAMjC,wBAAAE,CAAyBC,GACvB,GAAIA,EAAM,CACRjC,KAAKT,2B,EAKT,sBAAA2C,CAAuBD,G,QACrB,IAAKjC,KAAK6B,gBAAiB,CACzBM,QAAQC,KAAK,sC,CAGf,GAAIH,EAAM,EACRI,EAAArC,KAAKsC,eAAW,MAAAD,SAAA,SAAAA,EAAEE,W,KACb,EACLC,EAAAxC,KAAKsC,eAAW,MAAAE,SAAA,SAAAA,EAAEC,O,EAKtB,kBAAAC,CAAmBT,G,QACjB,IAAKjC,KAAK+B,YAAa,CACrBI,QAAQC,KAAK,kC,CAGf,GAAIH,EAAM,EACRI,EAAArC,KAAK2C,WAAO,MAAAN,SAAA,SAAAA,EAAEE,W,KACT,EACLC,EAAAxC,KAAK2C,WAAO,MAAAH,SAAA,SAAAA,EAAEC,O,EAQlB,+BAAMlD,GACJ,GACES,KAAKtC,OAAS,OACdsC,KAAKpC,oBACJoC,KAAKlC,iBACNkC,KAAKe,sBAAsBC,iBACzBhB,KAAKe,WAAWE,aAAerB,EAAqBF,EAAcA,IAAgBM,KAAKnC,mBACtFmC,KAAKe,WAAWE,aAAevB,EAAcA,GAAeM,KAAKnC,mBACpE,CACAmC,KAAKkB,mBAAmBnE,KAAK,CAC3BoE,KAAM,M,EA8DZ,iBAAAyB,GACEvC,OAAOwC,WAAW7C,KAAKC,gBAAgB6C,iBAAiB,SAAU9C,KAAKoB,e,CAGzE,gBAAA2B,G,QACE,GAAI/C,KAAKE,iBAAmBF,KAAK6B,gBAAiB,EAChDQ,EAAArC,KAAKsC,eAAW,MAAAD,SAAA,SAAAA,EAAEE,W,CAGpB,GAAIvC,KAAKG,aAAeH,KAAK+B,YAAa,EACxCS,EAAAxC,KAAK2C,WAAO,MAAAH,SAAA,SAAAA,EAAED,W,CAGhB,GAAIvC,KAAKtC,OAAS,OAASsC,KAAKe,sBAAsBC,eAAgB,CACpEnC,EAAemE,QAAQhD,KAAKe,W,EAIhC,oBAAAkC,GACE5C,OAAOwC,WAAW7C,KAAKC,gBAAgBiD,oBAAoB,SAAUlD,KAAKoB,gBAE1E,GAAIpB,KAAKtC,OAAS,OAASsC,KAAKe,WAAY,CAC1ClC,EAAesE,UAAUnD,KAAKe,W,EAIlC,MAAAqC,GACE,MAAMC,EAAYrD,KAAKtC,OAAS,MAAQ/C,EAAoBD,EAE5D,OACEgB,EAAA4H,EAAA,KACGtD,KAAKzD,SACJb,EAAA,OAAA6H,IAAA,2CAAK3H,MAAM,cACTF,EAAA,MAAA6H,IAAA,2CAAI3H,MAAM,uBACPyH,EAAUvI,KAAK0F,GACd9E,EAAA,MAAI6H,IAAK/C,EAAK5E,MAAOuC,EAAK,CAAE,aAAc6B,KAAKwD,YAAchD,KAC3D9E,EAAA,UAAQC,KAAK,SAASC,MAAM,eAAeL,QAAS,IAAMyE,KAAKO,gBAAgBC,IAC5E5F,EAAsB4F,WAOhCR,KAAKzD,SAAYyD,KAAKzD,UAAYyD,KAAKwD,YAAc,QAAUxD,KAAKwD,YAAc,YACnF9H,EAAC+B,EAAS,CAAA8F,IAAA,2CACR7F,KAAMsC,KAAKtC,KACXnB,QAASyD,KAAKzD,QACdoB,SAAUqC,KAAKrC,SACfC,kBAAmBoC,KAAKpC,kBACxBC,kBAAmBmC,KAAKnC,kBACxBC,gBAAiBkC,KAAKlC,gBACtBC,WAAYiC,KAAKU,eACjB1C,WAAYgC,KAAKa,eACjB5C,gBAAiB+B,KAAK/B,gBACtBC,8BAA+B8B,KAAK9B,gCAGxCxC,EAAC2B,EAAW,CAAAkG,IAAA,2CACVjG,IAAMkC,GAAaQ,KAAKsC,YAAc9C,EACtCrC,QAAS6C,KAAKuB,uBACdnE,SAAU4C,KAAK2B,4BAEd3B,KAAKzD,SAAYyD,KAAKzD,SAAWyD,KAAKwD,YAAc,QACrD9H,EAAA,OAAA6H,IAAA,2CAAK3H,MAAM,MAAM0B,IAAMkC,GAAaQ,KAAKe,WAAavB,GACpD9D,EAAA,QAAA6H,IAAA,2CAAMtG,KAAK,WAGX+C,KAAKzD,SAAWyD,KAAKpC,mBAAuBoC,KAAKzD,SAAWyD,KAAKwD,YAAc,aACjF9H,EAACY,EAAa,CAAAiH,IAAA,2CACZhH,QAASyD,KAAKzD,QACdC,UAAWwD,KAAKI,kBAChB3D,oBAAqBuD,KAAKvD,oBAC1BC,oBAAqBsD,KAAKtD,oBAC1BC,uCAAwCqD,KAAKrD,yCAGjDjB,EAAC+C,EAAO,CAAA8E,IAAA,2CACNjG,IAAMkC,GAAaQ,KAAK2C,QAAUnD,EAClCd,gBAAkB7B,GAAMmD,KAAKtB,gBAAgB3B,KAAK,CAAE2E,cAAe7E,M","ignoreList":[]}

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

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as s,h as i,a as o}from"./p-4798d219.js";import{i as a}from"./p-7e930584.js";import{v as t}from"./p-82796232.js";const l={en:{"dso-map-overlays":{title:"Maplayers"}},nl:{"dso-map-overlays":{title:"Kaartlagen"}}};const n=":host{display:block},::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}";const d=n;const r=class{constructor(i){e(this,i);this.dsoToggleOverlay=s(this,"dsoToggleOverlay",7);this.selectableRefs={};this.group=t();this.text=a((()=>this.host),l)}overlayChangeHandler(e,s){const{checked:i}=s.detail;this.dsoToggleOverlay.emit({overlay:e,checked:i})}componentDidRender(){this.overlays.filter((e=>{var s,i;return!e.disabled&&((i=(s=this.previousOverlays)===null\|\|s===void 0?void 0:s.find((s=>s.id===e.id)))===null\|\|i===void 0?void 0:i.disabled)===true})).forEach((e=>{var s;(s=this.selectableRefs[e.id])===null\|\|s===void 0?void 0:s.toggleInfo(false)}));this.previousOverlays=this.overlays}render(){for(const e in this.selectableRefs){delete this.selectableRefs[e]}return i("fieldset",{key:"9892fc514d3605c8532105d7ab3dc7a20841838b",class:"form-group dso-checkboxes"},i("legend",{key:"8fd65bf3a7592e1f89b3133ddcdaa0650e8df2bd",class:"sr-only"},"Kaartlagen"),i("div",{key:"4d42c4b39c33e5c5b2e510a0cccec6703e36ee28",class:"dso-label-container"},i("span",{key:"eccf54c31ae3def04c5af3d43b2d094581b7b311",class:"control-label","aria-hidden":"true"},this.text("title"))),i("div",{key:"f1a0fa892a2e0b7301c57098930fe87218c209bc",class:"dso-field-container"},this.overlays.map((e=>i("dso-selectable",{key:e.id,type:"checkbox",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:s=>this.overlayChangeHandler(e,s)},e.name,e.info?i("p",{slot:"info"},e.info):null)))))}get host(){return o(this)}};r.style=d;export{r as dso_map_overlays};
2	+ //# sourceMappingURL=p-3ea0f211.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"names":["translations","en","title","nl","mapOverlaysCss","DsoMapOverlaysStyle0","MapOverlays","constructor","hostRef","this","selectableRefs","group","uuidv4","text","i18n","host","overlayChangeHandler","overlay","e","checked","detail","dsoToggleOverlay","emit","componentDidRender","overlays","filter","o","_a","_b","disabled","previousOverlays","find","p","id","forEach","toggleInfo","render","ref","h","key","class","map","type","value","name","onDsoChange","info","slot"],"sources":["src/components/map-overlays/map-overlays.i18n.ts","src/components/map-overlays/map-overlays.scss?tag=dso-map-overlays&encapsulation=shadow","src/components/map-overlays/map-overlays.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-map-overlays\": {\r\n title: \"Maplayers\",\r\n },\r\n },\r\n nl: {\r\n \"dso-map-overlays\": {\r\n title: \"Kaartlagen\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n border: 0;\r\n margin: 0;\r\n min-inline-size: 0;\r\n padding: 0;\r\n\r\n .control-label {\r\n display: inline-block;\r\n font-weight: bold;\r\n margin-block-end: units.$u1;\r\n max-inline-size: 100%;\r\n text-align: start;\r\n }\r\n}\r\n\r\np[slot=\"info\"] {\r\n margin: 0;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\nimport { translations } from \"./map-overlays.i18n\";\r\n\r\n@Component({\r\n tag: \"dso-map-overlays\",\r\n styleUrl: \"./map-overlays.scss\",\r\n shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n private previousOverlays: Overlay[] | undefined;\r\n private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n @Element()\r\n host!: HTMLDsoMapOverlaysElement;\r\n\r\n /**\r\n * To group the overlays together. Generally the default value suffices.\r\n */\r\n @Prop()\r\n group = uuidv4();\r\n\r\n /**\r\n * The overlays.\r\n */\r\n @Prop()\r\n overlays!: Overlay[];\r\n\r\n /**\r\n * Emitted when the user selects a different overlay.\r\n */\r\n @Event()\r\n dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n const { checked } = e.detail;\r\n\r\n this.dsoToggleOverlay.emit({ overlay, checked });\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n componentDidRender() {\r\n this.overlays\r\n .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n .forEach((o) => {\r\n this.selectableRefs[o.id]?.toggleInfo(false);\r\n });\r\n\r\n this.previousOverlays = this.overlays;\r\n }\r\n\r\n render() {\r\n for (const ref in this.selectableRefs) {\r\n delete this.selectableRefs[ref];\r\n }\r\n\r\n return (\r\n <fieldset class=\"form-group dso-checkboxes\">\r\n <legend class=\"sr-only\">Kaartlagen</legend>\r\n <div class=\"dso-label-container\">\r\n <span class=\"control-label\" aria-hidden=\"true\">\r\n {this.text(\"title\")}\r\n </span>\r\n </div>\r\n <div class=\"dso-field-container\">\r\n {this.overlays.map((overlay) => (\r\n <dso-selectable\r\n key={overlay.id}\r\n type=\"checkbox\"\r\n value={overlay.name}\r\n checked={overlay.checked}\r\n disabled={overlay.disabled}\r\n name={this.group}\r\n ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n >\r\n {overlay.name}\r\n {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n </dso-selectable>\r\n ))}\r\n </div>\r\n </fieldset>\r\n );\r\n }\r\n}\r\n"],"mappings":"iIAEO,MAAMA,EAAyB,CACpCC,GAAI,CACF,mBAAoB,CAClBC,MAAO,cAGXC,GAAI,CACF,mBAAoB,CAClBD,MAAO,gBCVb,MAAME,EAAiB,uYACvB,MAAAC,EAAeD,E,MCaFE,EAAW,MALxB,WAAAC,CAAAC,G,6DAOUC,KAAAC,eAA6D,GASrED,KAAAE,MAAQC,IAoBAH,KAAAI,KAAOC,GAAK,IAAML,KAAKM,MAAMf,E,CAN7B,oBAAAgB,CAAqBC,EAAkBC,GAC7C,MAAMC,QAAEA,GAAYD,EAAEE,OAEtBX,KAAKY,iBAAiBC,KAAK,CAAEL,UAASE,W,CAKxC,kBAAAI,GACEd,KAAKe,SACFC,QAAQC,IAAC,IAAAC,EAAAC,EAAK,OAACF,EAAEG,YAAYD,GAAAD,EAAAlB,KAAKqB,oBAAgB,MAAAH,SAAA,SAAAA,EAAEI,MAAMC,GAAMA,EAAEC,KAAOP,EAAEO,QAAG,MAAAL,SAAA,SAAAA,EAAEC,YAAa,IAAI,IACjGK,SAASR,I,OACRC,EAAAlB,KAAKC,eAAegB,EAAEO,OAAG,MAAAN,SAAA,SAAAA,EAAEQ,WAAW,MAAM,IAGhD1B,KAAKqB,iBAAmBrB,KAAKe,Q,CAG/B,MAAAY,GACE,IAAK,MAAMC,KAAO5B,KAAKC,eAAgB,QAC9BD,KAAKC,eAAe2B,E,CAG7B,OACEC,EAAA,YAAAC,IAAA,2CAAUC,MAAM,6BACdF,EAAA,UAAAC,IAAA,2CAAQC,MAAM,WAAS,cACvBF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uBACTF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,gBAAe,cAAa,QACrC/B,KAAKI,KAAK,WAGfyB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uBACR/B,KAAKe,SAASiB,KAAKxB,GAClBqB,EAAA,kBACEC,IAAKtB,EAAQgB,GACbS,KAAK,WACLC,MAAO1B,EAAQ2B,KACfzB,QAASF,EAAQE,QACjBU,SAAUZ,EAAQY,SAClBe,KAAMnC,KAAKE,MACX0B,IAAMA,GAAQA,IAAQ5B,KAAKC,eAAeO,EAAQgB,IAAMI,GACxDQ,YAAc3B,GAAMT,KAAKO,qBAAqBC,EAASC,IAEtDD,EAAQ2B,KACR3B,EAAQ6B,KAAOR,EAAA,KAAGS,KAAK,QAAQ9B,EAAQ6B,MAAY,S","ignoreList":[]}

package/dist/dso-toolkit/{p-c2f8f46c.entry.js → p-464b8082.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,f as t,h as s,H as a,a as r}from"./p-53096a64.js";const i="*,*::after,*::before{box-sizing:border-box}.tabs{border-block-end:1px solid #39870c;display:flex;gap:2px;flex-wrap:wrap;margin-block-end:24px;padding-inline-start:0}@media screen and (max-width: 767px){.tabs{border:0;display:block}}";const o=i;const c=class{constructor(t){e(this,t);this.keyUpHandler=e=>{if(!(e.target instanceof HTMLElement)){return}switch(e.key){case"ArrowRight":case"ArrowDown":this.moveFocusToNextTab(e.target);break;case"ArrowLeft":case"ArrowUp":this.moveFocusToPreviousTab(e.target);break;default:return}}}get enabledTabs(){return Array.from(this.host.querySelectorAll(":scope > dso-tab")).reduce(((e,t)=>{if(!t.disabled){e.push(t)}return e}),[])}get firstTab(){return this.enabledTabs[0]}get lastTab(){return this.enabledTabs[this.enabledTabs.length-1]}moveFocusToTab(e){e===null||e===void 0?void 0:e._dsoFocus()}moveFocusToPreviousTab(e){var t;const s=this.enabledTabs.findIndex((t=>t===e));const a=(t=this.enabledTabs[s-1])!==null&&t!==void 0?t:this.lastTab;this.moveFocusToTab(a)}moveFocusToNextTab(e){var t;const s=this.enabledTabs.findIndex((t=>t===e));const a=(t=this.enabledTabs[s+1])!==null&&t!==void 0?t:this.firstTab;this.moveFocusToTab(a)}connectedCallback(){var e;(e=this.mutationObserver)!==null&&e!==void 0?e:this.mutationObserver=new MutationObserver((()=>t(this.host)));this.mutationObserver.observe(this.host,{childList:true})}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}render(){return s(a,{key:"d115f11054298f6f4ba09e97f0e8c1b726aac09c"},s("div",{key:"74e724fc01facb00f7ca14f3420b68172c313927",class:"tabs",role:"tablist",onKeyUp:this.keyUpHandler},s("slot",{key:"7d65307f3dd7372b30eccf57ae2c552451d0920f"})),s("div",{key:"251184652aace25225b69336bf9c0bae0ab98e68",role:"tabpanel",tabindex:"0"},s("slot",{key:"79e95365db5486bd5e54161919f653df5ac525cc",name:"panel"})))}get host(){return r(this)}};c.style=o;export{c as dso_tabs};
-//# sourceMappingURL=p-c2f8f46c.entry.js.map
+import{r as e,f as t,h as s,H as a,a as r}from"./p-4798d219.js";const i="*,*::after,*::before{box-sizing:border-box}.tabs{border-block-end:1px solid #39870c;display:flex;gap:2px;flex-wrap:wrap;margin-block-end:24px;padding-inline-start:0}@media screen and (max-width: 767px){.tabs{border:0;display:block}}";const o=i;const c=class{constructor(t){e(this,t);this.keyUpHandler=e=>{if(!(e.target instanceof HTMLElement)){return}switch(e.key){case"ArrowRight":case"ArrowDown":this.moveFocusToNextTab(e.target);break;case"ArrowLeft":case"ArrowUp":this.moveFocusToPreviousTab(e.target);break;default:return}}}get enabledTabs(){return Array.from(this.host.querySelectorAll(":scope > dso-tab")).reduce(((e,t)=>{if(!t.disabled){e.push(t)}return e}),[])}get firstTab(){return this.enabledTabs[0]}get lastTab(){return this.enabledTabs[this.enabledTabs.length-1]}moveFocusToTab(e){e===null||e===void 0?void 0:e._dsoFocus()}moveFocusToPreviousTab(e){var t;const s=this.enabledTabs.findIndex((t=>t===e));const a=(t=this.enabledTabs[s-1])!==null&&t!==void 0?t:this.lastTab;this.moveFocusToTab(a)}moveFocusToNextTab(e){var t;const s=this.enabledTabs.findIndex((t=>t===e));const a=(t=this.enabledTabs[s+1])!==null&&t!==void 0?t:this.firstTab;this.moveFocusToTab(a)}connectedCallback(){var e;(e=this.mutationObserver)!==null&&e!==void 0?e:this.mutationObserver=new MutationObserver((()=>t(this.host)));this.mutationObserver.observe(this.host,{childList:true})}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}render(){return s(a,{key:"d115f11054298f6f4ba09e97f0e8c1b726aac09c"},s("div",{key:"74e724fc01facb00f7ca14f3420b68172c313927",class:"tabs",role:"tablist",onKeyUp:this.keyUpHandler},s("slot",{key:"7d65307f3dd7372b30eccf57ae2c552451d0920f"})),s("div",{key:"251184652aace25225b69336bf9c0bae0ab98e68",role:"tabpanel",tabindex:"0"},s("slot",{key:"79e95365db5486bd5e54161919f653df5ac525cc",name:"panel"})))}get host(){return r(this)}};c.style=o;export{c as dso_tabs};
+//# sourceMappingURL=p-464b8082.entry.js.map

package/dist/dso-toolkit/p-4798d219.js ADDED Viewed

@@ -0,0 +1,3 @@
+const e="dso-toolkit";const t={allRenderFn:true,appendChildSlotFix:false,asyncLoading:true,asyncQueue:false,attachStyles:true,cloneNodeFix:false,cmpDidLoad:true,cmpDidRender:true,cmpDidUnload:false,cmpDidUpdate:false,cmpShouldUpdate:false,cmpWillLoad:true,cmpWillRender:false,cmpWillUpdate:false,connectedCallback:true,constructableCSS:true,cssAnnotations:true,devTools:false,disconnectedCallback:true,element:false,event:true,experimentalScopedSlotChanges:false,experimentalSlotFixes:false,formAssociated:false,hasRenderFn:true,hostListener:true,hostListenerTarget:true,hostListenerTargetBody:false,hostListenerTargetDocument:true,hostListenerTargetParent:false,hostListenerTargetWindow:true,hotModuleReplacement:false,hydrateClientSide:false,hydrateServerSide:false,hydratedAttribute:false,hydratedClass:true,hydratedSelectorName:"hydrated",initializeNextTick:false,invisiblePrehydration:true,isDebug:false,isDev:false,isTesting:false,lazyLoad:true,lifecycle:true,lifecycleDOMEvents:false,member:true,method:true,mode:false,modernPropertyDecls:false,observeAttribute:true,profile:false,prop:true,propBoolean:true,propMutable:true,propNumber:true,propString:true,reflect:true,scoped:true,scopedSlotTextContentFix:false,scriptDataOpts:false,shadowDelegatesFocus:false,shadowDom:true,slot:true,slotChildNodesFix:false,slotRelocation:true,state:true,style:true,svg:true,taskQueue:true,transformTagName:false,updatable:true,vdomAttribute:true,vdomClass:true,vdomFunctional:true,vdomKey:true,vdomListener:true,vdomPropOrAttr:true,vdomRef:true,vdomRender:true,vdomStyle:true,vdomText:true,vdomXlink:true,watchCallback:true};var r=Object.defineProperty;var n=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:true})};var l="http://www.w3.org/2000/svg";var s="http://www.w3.org/1999/xhtml";var i=new WeakMap;var o=e=>i.get(e);var a=(e,t)=>{i.set(t.t=e,t)};var f=(e,t)=>{const r={l:0,$hostElement$:e,i:t,o:new Map};{r.u=new Promise((e=>r.v=e))}{r.h=new Promise((e=>r.p=e));e["s-p"]=[];e["s-rc"]=[]}const n=i.set(e,r);return n};var c=(e,t)=>t in e;var u=(e,t)=>(0,console.error)(e,t);var v=new Map;var d=(e,t,r)=>{const n=e.m.replace(/-/g,"_");const l=e.S;if(!l){return void 0}const s=v.get(l);if(s){return s[n]}
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/return import(`./${l}.entry.js${""}`).then((e=>{{v.set(l,e)}return e[n]}),u)};var h=new Map;var p="sty-id";var m="{visibility:hidden}.hydrated{visibility:inherit}";var y="slot-fb{display:contents}slot-fb[hidden]{display:none}";var b="http://www.w3.org/1999/xlink";var w=typeof window!=="undefined"?window:{};var g=w.document||{head:{}};var S={l:0,$:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,r,n)=>e.addEventListener(t,r,n),rel:(e,t,r,n)=>e.removeEventListener(t,r,n),ce:(e,t)=>new CustomEvent(e,t)};var $=(()=>{let e=false;try{g.addEventListener("e",null,Object.defineProperty({},"passive",{get(){e=true}}))}catch(e){}return e})();var k=e=>Promise.resolve(e);var O=(()=>{try{new CSSStyleSheet;return typeof(new CSSStyleSheet).replaceSync==="function"}catch(e){}return false})();var j=false;var C=[];var x=[];var T=(e,t)=>r=>{e.push(r);if(!j){j=true;if(t&&S.l&4){E(D)}else{S.raf(D)}}};var L=e=>{for(let t=0;t<e.length;t++){try{e[t](performance.now())}catch(e){u(e)}}e.length=0};var D=()=>{L(C);{L(x);if(j=C.length>0){S.raf(D)}}};var E=e=>k().then(e);var F=T(x,true);var R=e=>e!=null&&e!==void 0;var M=e=>{e=typeof e;return e==="object"||e==="function"};function A(e){var t,r,n;return(n=(r=(t=e.head)==null?void 0:t.querySelector('meta[name="csp-nonce"]'))==null?void 0:r.getAttribute("content"))!=null?n:void 0}var P={};n(P,{err:()=>U,map:()=>W,ok:()=>N,unwrap:()=>B,unwrapErr:()=>H});var N=e=>({isOk:true,isErr:false,value:e});var U=e=>({isOk:false,isErr:true,value:e});function W(e,t){if(e.isOk){const r=t(e.value);if(r instanceof Promise){return r.then((e=>N(e)))}else{return N(r)}}if(e.isErr){const t=e.value;return U(t)}throw"should never get here"}var B=e=>{if(e.isOk){return e.value}else{throw e.value}};var H=e=>{if(e.isErr){return e.value}else{throw e.value}};var z=e=>{const t=e.__childNodes||e.childNodes;if(e.tagName&&e.tagName.includes("-")&&e["s-cr"]&&e.tagName!=="SLOT-FB"){Q(t,e.tagName).forEach((e=>{var t;if(e.nodeType===1&&e.tagName==="SLOT-FB"){if((t=V(e,e["s-sn"],false))==null?void 0:t.length){e.hidden=true}else{e.hidden=false}}}))}for(const e of t){if(e.nodeType===1&&(e.__childNodes||e.childNodes).length){z(e)}}};var Q=(e,t,r)=>{let n=0;let l=[];let s;for(;n<e.length;n++){s=e[n];if(s["s-sr"]&&s["s-hn"]===t&&(!r||s["s-sn"]===r)){l.push(s);if(typeof r!=="undefined")return l}l=[...l,...Q(s.childNodes,t,r)]}return l};var V=(e,t,r=true)=>{const n=[];if(r&&e["s-sr"]||!e["s-sr"])n.push(e);while((e=e.nextSibling)&&e["s-sn"]===t){n.push(e)}return n};var q=(e,t)=>{if(e.nodeType===1){if(e.getAttribute("slot")===null&&t===""){return true}if(e.getAttribute("slot")===t){return true}return false}if(e["s-sn"]===t){return true}return t===""};var G=(e,t,...r)=>{let n=null;let l=null;let s=null;let i=false;let o=false;const a=[];const f=t=>{for(let r=0;r<t.length;r++){n=t[r];if(Array.isArray(n)){f(n)}else if(n!=null&&typeof n!=="boolean"){if(i=typeof e!=="function"&&!M(n)){n=String(n)}if(i&&o){a[a.length-1].k+=n}else{a.push(i?I(null,n):n)}o=i}}};f(r);if(t){if(t.key){l=t.key}if(t.name){s=t.name}{const e=t.className||t.class;if(e){t.class=typeof e!=="object"?e:Object.keys(e).filter((t=>e[t])).join(" ")}}}if(typeof e==="function"){return e(t===null?{}:t,a,_)}const c=I(e,null);c.O=t;if(a.length>0){c.j=a}{c.C=l}{c.T=s}return c};var I=(e,t)=>{const r={l:0,L:e,k:t,D:null,j:null};{r.O=null}{r.C=null}{r.T=null}return r};var K={};var X=e=>e&&e.L===K;var _={forEach:(e,t)=>e.map(J).forEach(t),map:(e,t)=>e.map(J).map(t).map(Y)};var J=e=>({vattrs:e.O,vchildren:e.j,vkey:e.C,vname:e.T,vtag:e.L,vtext:e.k});var Y=e=>{if(typeof e.vtag==="function"){const t={...e.vattrs};if(e.vkey){t.key=e.vkey}if(e.vname){t.name=e.vname}return G(e.vtag,t,...e.vchildren||[])}const t=I(e.vtag,e.vtext);t.O=e.vattrs;t.j=e.vchildren;t.C=e.vkey;t.T=e.vname;return t};var Z=(e,t,r,n,l,s)=>{if(r!==n){let i=c(e,t);let o=t.toLowerCase();if(t==="class"){const t=e.classList;const l=te(r);let s=te(n);if(e["s-si"]){s.push(e["s-si"]);l.forEach((t=>{if(t.startsWith(e["s-si"]))s.push(t)}));s=[...new Set(s)];t.add(...s);delete e["s-si"]}else{t.remove(...l.filter((e=>e&&!s.includes(e))));t.add(...s.filter((e=>e&&!l.includes(e))))}}else if(t==="style"){{for(const t in r){if(!n||n[t]==null){if(t.includes("-")){e.style.removeProperty(t)}else{e.style[t]=""}}}}for(const t in n){if(!r||n[t]!==r[t]){if(t.includes("-")){e.style.setProperty(t,n[t])}else{e.style[t]=n[t]}}}}else if(t==="key");else if(t==="ref"){if(n){n(e)}}else if(!i&&t[0]==="o"&&t[1]==="n"){if(t[2]==="-"){t=t.slice(3)}else if(c(w,o)){t=o.slice(2)}else{t=o[2]+t.slice(3)}if(r||n){const l=t.endsWith(re);t=t.replace(ne,"");if(r){S.rel(e,t,r,l)}if(n){S.ael(e,t,n,l)}}}else{const a=M(n);if((i||a&&n!==null)&&!l){try{if(!e.tagName.includes("-")){const l=n==null?"":n;if(t==="list"){i=false}else if(r==null||e[t]!=l){if(typeof e.__lookupSetter__(t)==="function"){e[t]=l}else{e.setAttribute(t,l)}}}else{e[t]=n}}catch(e){}}let f=false;{if(o!==(o=o.replace(/^xlink\:?/,""))){t=o;f=true}}if(n==null||n===false){if(n!==false||e.getAttribute(t)===""){if(f){e.removeAttributeNS(b,t)}else{e.removeAttribute(t)}}}else if((!i||s&4||l)&&!a){n=n===true?"":n;if(f){e.setAttributeNS(b,t,n)}else{e.setAttribute(t,n)}}}}};var ee=/\s/;var te=e=>{if(typeof e==="object"&&"baseVal"in e){e=e.baseVal}if(!e){return[]}return e.split(ee)};var re="Capture";var ne=new RegExp(re+"$");var le=(e,t,r)=>{const n=t.D.nodeType===11&&t.D.host?t.D.host:t.D;const l=e&&e.O||{};const s=t.O||{};{for(const e of se(Object.keys(l))){if(!(e in s)){Z(n,e,l[e],void 0,r,t.l)}}}for(const e of se(Object.keys(s))){Z(n,e,l[e],s[e],r,t.l)}};function se(e){return e.includes("ref")?[...e.filter((e=>e!=="ref")),"ref"]:e}var ie;var oe;var ae;var fe=false;var ce=false;var ue=false;var ve=false;var de=(e,r,n)=>{var i;const o=r.j[n];let a=0;let f;let c;let u;if(!fe){ue=true;if(o.L==="slot"){o.l|=o.j?2:1}}if(o.k!==null){f=o.D=g.createTextNode(o.k)}else if(o.l&1){f=o.D=g.createTextNode("")}else{if(!ve){ve=o.L==="svg"}f=o.D=g.createElementNS(ve?l:s,!fe&&t.slotRelocation&&o.l&2?"slot-fb":o.L);if(ve&&o.L==="foreignObject"){ve=false}{le(null,o,ve)}if(R(ie)&&f["s-si"]!==ie){f.classList.add(f["s-si"]=ie)}if(o.j){for(a=0;a<o.j.length;++a){c=de(e,o,a);if(c){f.appendChild(c)}}}{if(o.L==="svg"){ve=false}else if(f.tagName==="foreignObject"){ve=true}}}f["s-hn"]=ae;{if(o.l&(2|1)){f["s-sr"]=true;f["s-cr"]=oe;f["s-sn"]=o.T||"";f["s-rf"]=(i=o.O)==null?void 0:i.ref;u=e&&e.j&&e.j[n];if(u&&u.L===o.L&&e.D){{he(e.D,false)}}{je(oe,f,r.D,e==null?void 0:e.D)}}}return f};var he=(e,r)=>{S.l|=1;const n=Array.from(e.__childNodes||e.childNodes);if(e["s-sr"]&&t.experimentalSlotFixes){let t=e;while(t=t.nextSibling){if(t&&t["s-sn"]===e["s-sn"]&&t["s-sh"]===ae){n.push(t)}}}for(let e=n.length-1;e>=0;e--){const t=n[e];if(t["s-hn"]!==ae&&t["s-ol"]){Oe(we(t).parentNode,t,we(t));t["s-ol"].remove();t["s-ol"]=void 0;t["s-sh"]=void 0;ue=true}if(r){he(t,r)}}S.l&=~1};var pe=(e,t,r,n,l,s)=>{let i=e["s-cr"]&&e["s-cr"].parentNode||e;let o;if(i.shadowRoot&&i.tagName===ae){i=i.shadowRoot}for(;l<=s;++l){if(n[l]){o=de(null,r,l);if(o){n[l].D=o;Oe(i,o,we(t))}}}};var me=(e,t,r)=>{for(let n=t;n<=r;++n){const t=e[n];if(t){const e=t.D;ke(t);if(e){{ce=true;if(e["s-ol"]){e["s-ol"].remove()}else{he(e,true)}}e.remove()}}}};var ye=(e,t,r,n,l=false)=>{let s=0;let i=0;let o=0;let a=0;let f=t.length-1;let c=t[0];let u=t[f];let v=n.length-1;let d=n[0];let h=n[v];let p;let m;while(s<=f&&i<=v){if(c==null){c=t[++s]}else if(u==null){u=t[--f]}else if(d==null){d=n[++i]}else if(h==null){h=n[--v]}else if(be(c,d,l)){ge(c,d,l);c=t[++s];d=n[++i]}else if(be(u,h,l)){ge(u,h,l);u=t[--f];h=n[--v]}else if(be(c,h,l)){if(c.L==="slot"||h.L==="slot"){he(c.D.parentNode,false)}ge(c,h,l);Oe(e,c.D,u.D.nextSibling);c=t[++s];h=n[--v]}else if(be(u,d,l)){if(c.L==="slot"||h.L==="slot"){he(u.D.parentNode,false)}ge(u,d,l);Oe(e,u.D,c.D);u=t[--f];d=n[++i]}else{o=-1;{for(a=s;a<=f;++a){if(t[a]&&t[a].C!==null&&t[a].C===d.C){o=a;break}}}if(o>=0){m=t[o];if(m.L!==d.L){p=de(t&&t[i],r,o)}else{ge(m,d,l);t[o]=void 0;p=m.D}d=n[++i]}else{p=de(t&&t[i],r,i);d=n[++i]}if(p){{Oe(we(c.D).parentNode,p,we(c.D))}}}}if(s>f){pe(e,n[v+1]==null?null:n[v+1].D,r,n,i,v)}else if(i>v){me(t,s,f)}};var be=(e,t,r=false)=>{if(e.L===t.L){if(e.L==="slot"){return e.T===t.T}if(!r){return e.C===t.C}if(r&&!e.C&&t.C){e.C=t.C}return true}return false};var we=e=>e&&e["s-ol"]||e;var ge=(e,r,n=false)=>{const l=r.D=e.D;const s=e.j;const i=r.j;const o=r.L;const a=r.k;let f;if(a===null){{ve=o==="svg"?true:o==="foreignObject"?false:ve}{if(o==="slot"&&!fe);else{le(e,r,ve)}}if(s!==null&&i!==null){ye(l,s,r,i,n)}else if(i!==null){if(e.k!==null){l.textContent=""}pe(l,null,r,i,0,i.length-1)}else if(!n&&t.updatable&&s!==null){me(s,0,s.length-1)}if(ve&&o==="svg"){ve=false}}else if(f=l["s-cr"]){f.parentNode.textContent=a}else if(e.k!==a){l.data=a}};var Se=[];var $e=e=>{let r;let n;let l;const s=e.__childNodes||e.childNodes;for(const e of s){if(e["s-sr"]&&(r=e["s-cr"])&&r.parentNode){n=r.parentNode.__childNodes||r.parentNode.childNodes;const s=e["s-sn"];for(l=n.length-1;l>=0;l--){r=n[l];if(!r["s-cn"]&&!r["s-nr"]&&r["s-hn"]!==e["s-hn"]&&!t.experimentalSlotFixes){if(q(r,s)){let t=Se.find((e=>e.F===r));ce=true;r["s-sn"]=r["s-sn"]||s;if(t){t.F["s-sh"]=e["s-hn"];t.R=e}else{r["s-sh"]=e["s-hn"];Se.push({R:e,F:r})}if(r["s-sr"]){Se.map((e=>{if(q(e.F,r["s-sn"])){t=Se.find((e=>e.F===r));if(t&&!e.R){e.R=t.R}}}))}}else if(!Se.some((e=>e.F===r))){Se.push({F:r})}}}}if(e.nodeType===1){$e(e)}}};var ke=e=>{{e.O&&e.O.ref&&e.O.ref(null);e.j&&e.j.map(ke)}};var Oe=(e,t,r)=>{if(typeof t["s-sn"]==="string"&&!!t["s-sr"]&&!!t["s-cr"]){je(t["s-cr"],t,e,t.parentElement)}const n=e==null?void 0:e.insertBefore(t,r);return n};function je(e,t,r,n){var l;let s;if(e&&typeof t["s-sn"]==="string"&&!!t["s-sr"]&&e.parentNode&&e.parentNode["s-sc"]&&(s=t["s-si"]||e.parentNode["s-sc"])){const e=t["s-sn"];const i=t["s-hn"];(l=r.classList)==null?void 0:l.add(s+"-s");if(n&&n.classList.contains(s+"-s")){let t=(n.__childNodes||n.childNodes)[0];let r=false;while(t){if(t["s-sn"]!==e&&t["s-hn"]===i&&!!t["s-sr"]){r=true;break}t=t.nextSibling}if(!r)n.classList.remove(s+"-s")}}}var Ce=(e,t,r=false)=>{var n,l,s,i;const o=e.$hostElement$;const a=e.i;const f=e.M||I(null,null);const c=X(t)?t:G(null,null,t);ae=o.tagName;if(a.A){c.O=c.O||{};a.A.map((([e,t])=>c.O[t]=o[e]))}if(r&&c.O){for(const e of Object.keys(c.O)){if(o.hasAttribute(e)&&!["key","ref","style","class"].includes(e)){c.O[e]=o[e]}}}c.L=null;c.l|=4;e.M=c;c.D=f.D=o.shadowRoot||o;{ie=o["s-sc"]}fe=(a.l&1)!==0;{oe=o["s-cr"];ce=false}ge(f,c,r);{S.l|=1;if(ue){$e(c.D);for(const e of Se){const t=e.F;if(!t["s-ol"]){const e=g.createTextNode("");e["s-nr"]=t;Oe(t.parentNode,t["s-ol"]=e,t)}}for(const e of Se){const t=e.F;const o=e.R;if(o){const e=o.parentNode;let r=o.nextSibling;{let s=(n=t["s-ol"])==null?void 0:n.previousSibling;while(s){let n=(l=s["s-nr"])!=null?l:null;if(n&&n["s-sn"]===t["s-sn"]&&e===n.parentNode){n=n.nextSibling;while(n===t||(n==null?void 0:n["s-sr"])){n=n==null?void 0:n.nextSibling}if(!n||!n["s-nr"]){r=n;break}}s=s.previousSibling}}if(!r&&e!==t.parentNode||t.nextSibling!==r){if(t!==r){if(!t["s-hn"]&&t["s-ol"]){t["s-hn"]=t["s-ol"].parentNode.nodeName}Oe(e,t,r);if(t.nodeType===1&&t.tagName!=="SLOT-FB"){t.hidden=(s=t["s-ih"])!=null?s:false}}}t&&typeof o["s-rf"]==="function"&&o["s-rf"](t)}else{if(t.nodeType===1){if(r){t["s-ih"]=(i=t.hidden)!=null?i:false}t.hidden=true}}}}if(ce){z(c.D)}S.l&=~1;Se.length=0}oe=void 0};var xe=(e,t="")=>{{return()=>{}}};var Te=(e,t)=>{{return()=>{}}};var Le=(e,t)=>{if(e!=null&&!M(e)){if(t&4){return e==="false"?false:e===""||!!e}if(t&2){return parseFloat(e)}if(t&1){return String(e)}return e}return e};var De=e=>o(e).$hostElement$;var Ee=(e,t,r)=>{const n=De(e);return{emit:e=>Fe(n,t,{bubbles:!!(r&4),composed:!!(r&2),cancelable:!!(r&1),detail:e})}};var Fe=(e,t,r)=>{const n=S.ce(t,r);e.dispatchEvent(n);return n};var Re=new WeakMap;var Me=(e,t,r)=>{let n=h.get(e);if(O&&r){n=n||new CSSStyleSheet;if(typeof n==="string"){n=t}else{n.replaceSync(t)}}else{n=t}h.set(e,n)};var Ae=(e,t,r)=>{var n;const l=Ne(t);const s=h.get(l);e=e.nodeType===11?e:g;if(s){if(typeof s==="string"){e=e.head||e;let r=Re.get(e);let i;if(!r){Re.set(e,r=new Set)}if(!r.has(l)){{i=document.querySelector(`[${p}="${l}"]`)||g.createElement("style");i.innerHTML=s;const r=(n=S.P)!=null?n:A(g);if(r!=null){i.setAttribute("nonce",r)}if(!(t.l&1)){if(e.nodeName==="HEAD"){const t=e.querySelectorAll("link[rel=preconnect]");const r=t.length>0?t[t.length-1].nextSibling:e.querySelector("style");e.insertBefore(i,r)}else if("host"in e){if(O){const t=new CSSStyleSheet;t.replaceSync(s);e.adoptedStyleSheets=[t,...e.adoptedStyleSheets]}else{const t=e.querySelector("style");if(t){t.innerHTML=s+t.innerHTML}else{e.prepend(i)}}}else{e.append(i)}}if(t.l&1&&e.nodeName!=="HEAD"){e.insertBefore(i,null)}}if(t.l&4){i.innerHTML+=y}if(r){r.add(l)}}}else if(!e.adoptedStyleSheets.includes(s)){e.adoptedStyleSheets=[...e.adoptedStyleSheets,s]}}return l};var Pe=e=>{const t=e.i;const r=e.$hostElement$;const n=t.l;const l=xe("attachStyles",t.m);const s=Ae(r.shadowRoot?r.shadowRoot:r.getRootNode(),t);if(n&10&&n&2){r["s-sc"]=s;r.classList.add(s+"-h")}l()};var Ne=(e,t)=>"sc-"+e.m;var Ue=(e,t)=>{if(t&&!e.N&&t["s-p"]){t["s-p"].push(new Promise((t=>e.N=t)))}};var We=(e,t)=>{{e.l|=16}if(e.l&4){e.l|=512;return}Ue(e,e.U);const r=()=>Be(e,t);return F(r)};var Be=(e,t)=>{const r=e.$hostElement$;const n=xe("scheduleUpdate",e.i.m);const l=e.t;if(!l){throw new Error(`Can't render component <${r.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`)}let s;if(t){{e.l|=256;if(e.W){e.W.map((([e,t])=>_e(l,e,t)));e.W=void 0}}{s=_e(l,"componentWillLoad")}}n();return He(s,(()=>Qe(e,l,t)))};var He=(e,t)=>ze(e)?e.then(t).catch((e=>{console.error(e);t()})):t();var ze=e=>e instanceof Promise||e&&e.then&&typeof e.then==="function";var Qe=async(e,t,r)=>{var n;const l=e.$hostElement$;const s=xe("update",e.i.m);const i=l["s-rc"];if(r){Pe(e)}const o=xe("render",e.i.m);{qe(e,t,l,r)}if(i){i.map((e=>e()));l["s-rc"]=void 0}o();s();{const t=(n=l["s-p"])!=null?n:[];const r=()=>Ie(e);if(t.length===0){r()}else{Promise.all(t).then(r);e.l|=4;t.length=0}}};var Ve=null;var qe=(e,t,r,n)=>{try{Ve=t;t=t.render();{e.l&=~16}{e.l|=2}{{{Ce(e,t,n)}}}}catch(t){u(t,e.$hostElement$)}Ve=null;return null};var Ge=()=>Ve;var Ie=e=>{const t=e.i.m;const r=e.$hostElement$;const n=xe("postUpdate",t);const l=e.t;const s=e.U;{_e(l,"componentDidRender")}if(!(e.l&64)){e.l|=64;{Je(r)}{_e(l,"componentDidLoad")}n();{e.p(r);if(!s){Xe()}}}else{n()}{e.v(r)}{if(e.N){e.N();e.N=void 0}if(e.l&512){E((()=>We(e,false)))}e.l&=~(4|512)}};var Ke=e=>{{const t=o(e);const r=t.$hostElement$.isConnected;if(r&&(t.l&(2|16))===2){We(t,false)}return r}};var Xe=t=>{{Je(g.documentElement)}E((()=>Fe(w,"appload",{detail:{namespace:e}})))};var _e=(e,t,r)=>{if(e&&e[t]){try{return e[t](r)}catch(e){u(e)}}return void 0};var Je=e=>{var r;return e.classList.add((r=t.hydratedSelectorName)!=null?r:"hydrated")};var Ye=(e,t)=>o(e).o.get(t);var Ze=(e,t,r,n)=>{const l=o(e);if(!l){throw new Error(`Couldn't find host element for "${n.m}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`)}const s=l.$hostElement$;const i=l.o.get(t);const a=l.l;const f=l.t;r=Le(r,n.B[t][0]);const c=Number.isNaN(i)&&Number.isNaN(r);const v=r!==i&&!c;if((!(a&8)||i===void 0)&&v){l.o.set(t,r);if(f){if(n.H&&a&128){const e=n.H[t];if(e){e.map((e=>{try{f[e](r,i,t)}catch(e){u(e,s)}}))}}if((a&(2|16))===2){We(l,false)}}}};var et=(e,r,n)=>{var l,s;const i=e.prototype;if(r.B||(r.H||e.watchers)){if(e.watchers&&!r.H){r.H=e.watchers}const a=Object.entries((l=r.B)!=null?l:{});a.map((([e,[t]])=>{if(t&31||n&2&&t&32){if((t&2048)===0){Object.defineProperty(i,e,{get(){return Ye(this,e)},set(t){Ze(this,e,t,r)},configurable:true,enumerable:true})}else if(n&1&&t&2048){{Object.defineProperty(i,e,{get(){const t=o(this);const r=t?t.t:i;if(!r)return;return r[e]},configurable:true,enumerable:true})}if(t&4096){const t=Object.getOwnPropertyDescriptor(i,e).set;Object.defineProperty(i,e,{set(n){const l=o(this);if(t){const s=l.$hostElement$[e];if(!l.o.get(e)&&s){l.o.set(e,s)}t.apply(this,[Le(n,r.B[e][0])]);Ze(this,e,l.$hostElement$[e],r);return}if(!l)return;const s=()=>{const t=l.t[e];if(!l.o.get(e)&&t){l.o.set(e,t)}l.t[e]=Le(n,r.B[e][0]);Ze(this,e,l.t[e],r)};if(l.t){s()}else{l.h.then((()=>s()))}}})}}}else if(n&1&&t&64){Object.defineProperty(i,e,{value(...t){var r;const n=o(this);return(r=n==null?void 0:n.u)==null?void 0:r.then((()=>{var r;return(r=n.t)==null?void 0:r[e](...t)}))}})}}));if(n&1){const n=new Map;i.attributeChangedCallback=function(e,l,s){S.jmp((()=>{var a;const f=n.get(e);if(this.hasOwnProperty(f)&&t.lazyLoad){s=this[f];delete this[f]}else if(i.hasOwnProperty(f)&&typeof this[f]==="number"&&this[f]==s){return}else if(f==null){const t=o(this);const n=t==null?void 0:t.l;if(n&&!(n&8)&&n&128&&s!==l){const n=t.t;const i=(a=r.H)==null?void 0:a[e];i==null?void 0:i.forEach((t=>{if(n[t]!=null){n[t].call(n,s,l,e)}}))}return}const c=Object.getOwnPropertyDescriptor(i,f);if(!c.get||!!c.set){this[f]=s===null&&typeof this[f]==="boolean"?false:s}}))};e.observedAttributes=Array.from(new Set([...Object.keys((s=r.H)!=null?s:{}),...a.filter((([e,t])=>t[0]&15)).map((([e,t])=>{var l;const s=t[1]||e;n.set(s,e);if(t[0]&512){(l=r.A)==null?void 0:l.push([e,s])}return s}))]))}}return e};var tt=async(e,t,r,n)=>{let l;if((t.l&32)===0){t.l|=32;const n=r.S;if(n){const e=d(r);if(e&&"then"in e){const t=Te();l=await e;t()}else{l=e}if(!l){throw new Error(`Constructor for "${r.m}#${t.V}" was not found`)}if(!l.isProxied){{r.H=l.watchers}et(l,r,2);l.isProxied=true}const n=xe("createInstance",r.m);{t.l|=8}try{new l(t)}catch(e){u(e)}{t.l&=~8}{t.l|=128}n();rt(t.t)}else{l=e.constructor;const r=e.localName;customElements.whenDefined(r).then((()=>t.l|=128))}if(l&&l.style){let e;if(typeof l.style==="string"){e=l.style}const t=Ne(r);if(!h.has(t)){const n=xe("registerStyles",r.m);Me(t,e,!!(r.l&1));n()}}}const s=t.U;const i=()=>We(t,true);if(s&&s["s-rc"]){s["s-rc"].push(i)}else{i()}};var rt=e=>{{_e(e,"connectedCallback")}};var nt=e=>{if((S.l&1)===0){const t=o(e);const r=t.i;const n=xe("connectedCallback",r.m);if(!(t.l&1)){t.l|=1;{if(r.l&(4|8)){lt(e)}}{let r=e;while(r=r.parentNode||r.host){if(r["s-p"]){Ue(t,t.U=r);break}}}if(r.B){Object.entries(r.B).map((([t,[r]])=>{if(r&31&&e.hasOwnProperty(t)){const r=e[t];delete e[t];e[t]=r}}))}{tt(e,t,r)}}else{ft(e,t,r.q);if(t==null?void 0:t.t){rt(t.t)}else if(t==null?void 0:t.h){t.h.then((()=>rt(t.t)))}}n()}};var lt=e=>{const t=e["s-cr"]=g.createComment("");t["s-cn"]=true;Oe(e,t,e.firstChild)};var st=e=>{{_e(e,"disconnectedCallback")}};var it=async e=>{if((S.l&1)===0){const t=o(e);{if(t.G){t.G.map((e=>e()));t.G=void 0}}if(t==null?void 0:t.t){st(t.t)}else if(t==null?void 0:t.h){t.h.then((()=>st(t.t)))}}if(Re.has(e)){Re.delete(e)}if(e.shadowRoot&&Re.has(e.shadowRoot)){Re.delete(e.shadowRoot)}};var ot=(e,t={})=>{var r;const n=xe();const l=[];const s=t.exclude||[];const i=w.customElements;const a=g.head;const c=a.querySelector("meta[charset]");const u=g.createElement("style");const v=[];let d;let h=true;Object.assign(S,t);S.$=new URL(t.resourcesUrl||"./",g.baseURI).href;let p=false;e.map((e=>{e[1].map((t=>{var r;const n={l:t[0],m:t[1],B:t[2],q:t[3]};if(n.l&4){p=true}{n.B=t[2]}{n.q=t[3]}{n.A=[]}{n.H=(r=t[4])!=null?r:{}}const a=n.m;const c=class extends HTMLElement{constructor(e){super(e);this.hasRegisteredEventListeners=false;e=this;f(e,n);if(n.l&1){{if(!e.shadowRoot){{e.attachShadow({mode:"open"})}}else{if(e.shadowRoot.mode!=="open"){throw new Error(`Unable to re-use existing shadow root for ${n.m}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`)}}}}}connectedCallback(){const e=o(this);if(!this.hasRegisteredEventListeners){this.hasRegisteredEventListeners=true;ft(this,e,n.q)}if(d){clearTimeout(d);d=null}if(h){v.push(this)}else{S.jmp((()=>nt(this)))}}disconnectedCallback(){S.jmp((()=>it(this)));S.raf((()=>{var e;const t=o(this);if(((e=t==null?void 0:t.M)==null?void 0:e.D)instanceof Node&&!t.M.D.isConnected){delete t.M.D}}))}componentOnReady(){return o(this).h}};n.S=e[0];if(!s.includes(a)&&!i.get(a)){l.push(a);i.define(a,et(c,n,1))}}))}));if(l.length>0){if(p){u.textContent+=y}{u.textContent+=l.sort()+m}if(u.innerHTML.length){u.setAttribute("data-styles","");const e=(r=S.P)!=null?r:A(g);if(e!=null){u.setAttribute("nonce",e)}a.insertBefore(u,c?c.nextSibling:a.firstChild)}}h=false;if(v.length){v.map((e=>e.connectedCallback()))}else{{S.jmp((()=>d=setTimeout(Xe,30)))}}n()};var at=(e,t)=>t;var ft=(e,t,r,n)=>{if(r){r.map((([r,n,l])=>{const s=ut(e,r);const i=ct(t,l);const o=vt(r);S.ael(s,n,i,o);(t.G=t.G||[]).push((()=>S.rel(s,n,i,o)))}))}};var ct=(e,t)=>r=>{var n;try{{if(e.l&256){(n=e.t)==null?void 0:n[t](r)}else{(e.W=e.W||[]).push([t,r])}}}catch(e){u(e)}};var ut=(e,t)=>{if(t&4)return g;if(t&8)return w;return e};var vt=e=>$?{passive:(e&1)!==0,capture:(e&2)!==0}:(e&2)!==0;var dt=e=>S.P=e;export{at as F,K as H,De as a,ot as b,Ee as c,Ke as f,Ge as g,G as h,k as p,a as r,dt as s};
+//# sourceMappingURL=p-4798d219.js.map