@dso-toolkit/core 73.0.0 → 73.0.1
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.
- package/dist/cjs/dso-viewer-grid.cjs.entry.js +1 -1
- package/dist/cjs/dso-viewer-grid.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-viewer-grid.entry.cjs.js.map +1 -1
- package/dist/collection/components/viewer-grid/viewer-grid.css +1 -0
- package/dist/components/dso-viewer-grid.js +1 -1
- package/dist/components/dso-viewer-grid.js.map +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/dso-viewer-grid.entry.esm.js.map +1 -1
- package/dist/dso-toolkit/{p-99fcc628.entry.js → p-eebf32bf.entry.js} +2 -2
- package/dist/dso-toolkit/p-eebf32bf.entry.js.map +1 -0
- package/dist/esm/dso-viewer-grid.entry.js +1 -1
- package/dist/esm/dso-viewer-grid.entry.js.map +1 -1
- package/package.json +3 -3
- package/dist/dso-toolkit/p-99fcc628.entry.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{h as n,F as e,r as t,c as o,g as i}from"./p-D2Jo0W7B.js";import{c as s}from"./p-ChV9xqsO.js";import{d as a}from"./p-DDU8nTJS.js";import"./p-BFTU3MAI.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 u=({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 g=({title:t,mode:o,ref:i,onApply:a,onCancel:r,dsoCloseFilterpanel:l})=>n("dialog",{id:"filterpanel",class:s(`filterpanel-${o}`,"filterpanel"),ref:i,onCancel:n=>{n.preventDefault();if(o==="vrk"){r(n)}else{l(n)}}},o==="vrk"?n(e,null,n("h1",null,"Uw keuzes"),n(u,{onApply:a,onCancel:r}),n("slot",{name:"filterpanel"}),n(u,{onApply:a,onCancel:r})):n(e,null,t&&n("h3",null,t),n("button",{type:"button",class:"dso-close",onClick:l},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"Sluiten")),n("slot",{name:"filterpanel"})));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:host[mode=vdk] .dso-main-panel {\n transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in;\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: var(--_dso-button-secondary-background-color, #fff);\n border-color: var(--_dso-button-secondary-border-color, #39870c);\n color: var(--_dso-button-secondary-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: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n border-color: var(--_dso-button-secondary-hover-border-color, #39870c);\n color: var(--_dso-button-secondary-hover-color, #39870c);\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n background-color: var(--_dso-button-secondary-active-background-color, #39870c);\n border-color: var(--_dso-button-secondary-active-border-color, #39870c);\n color: var(--_dso-button-secondary-active-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: var(--_dso-button-secondary-disabled-background-color, #fff);\n border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n color: var(--_dso-button-secondary-disabled-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.filterpanel-vdk {\n display: block;\n position: fixed;\n inset-block-start: 0;\n inset-inline-start: -380px;\n block-size: 100%;\n inline-size: 100%;\n transition: inset-inline-start 200ms ease-in;\n}\n@media screen and (min-width: 992px) {\n .filterpanel-vdk {\n max-inline-size: 380px;\n }\n}\n.filterpanel-vdk[open] {\n inset-inline-start: 0;\n box-shadow: none;\n border-inline-end: 1px solid #e5e5e5;\n}\n.filterpanel-vdk h3 {\n color: #275937;\n}\n.filterpanel-vdk .dso-close {\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 position: absolute;\n inset-block-start: 16px;\n inset-inline-end: 16px;\n block-size: 32px;\n inline-size: 32px;\n padding: 0;\n background-color: transparent;\n border: 0;\n text-align: center;\n}\n.filterpanel-vdk .dso-close[disabled] {\n cursor: default;\n}\n.filterpanel-vdk .dso-close::-moz-focus-inner {\n border: 0;\n padding: 0;\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}\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: var(--_dso-button-secondary-background-color, #fff);\n border-color: var(--_dso-button-secondary-border-color, #39870c);\n color: var(--_dso-button-secondary-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: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n border-color: var(--_dso-button-secondary-hover-border-color, #39870c);\n color: var(--_dso-button-secondary-hover-color, #39870c);\n}\n.filterpanel-buttons .cancel-button:active {\n background-color: var(--_dso-button-secondary-active-background-color, #39870c);\n border-color: var(--_dso-button-secondary-active-border-color, #39870c);\n color: var(--_dso-button-secondary-active-color, #fff);\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n color: var(--_dso-button-secondary-disabled-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:has(+ span:not(.sr-only)),\n.filterpanel-buttons .cancel-button svg.di:has(+ span:not(.sr-only)) {\n margin-inline-start: -8px;\n}\n.filterpanel-buttons .cancel-button span:not(.sr-only) + dso-icon,\n.filterpanel-buttons .cancel-button span:not(.sr-only) + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\n.filterpanel-buttons .cancel-button dso-icon + span:not(.sr-only),\n.filterpanel-buttons .cancel-button svg.di + span:not(.sr-only) {\n margin-inline-start: 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 {\n line-height: 1rem;\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}\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: var(--_dso-button-primary-background-color, #39870c);\n border-color: var(--_dso-button-primary-border-color, #39870c);\n color: var(--_dso-button-primary-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: var(--_dso-button-primary-hover-background-color, #275937);\n border-color: var(--_dso-button-primary-hover-border-color, #275937);\n color: var(--_dso-button-primary-hover-color, #fff);\n}\n.filterpanel-buttons .apply-button:active {\n background-color: var(--_dso-button-primary-active-background-color, #173521);\n border-color: var(--_dso-button-primary-active-border-color, #173521);\n color: var(--_dso-button-primary-active-color, #fff);\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);\n border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);\n color: var(--_dso-button-primary-disabled-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:has(+ span:not(.sr-only)),\n.filterpanel-buttons .apply-button svg.di:has(+ span:not(.sr-only)) {\n margin-inline-start: -8px;\n}\n.filterpanel-buttons .apply-button span:not(.sr-only) + dso-icon,\n.filterpanel-buttons .apply-button span:not(.sr-only) + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\n.filterpanel-buttons .apply-button dso-icon + span:not(.sr-only),\n.filterpanel-buttons .apply-button svg.di + span:not(.sr-only) {\n margin-inline-start: 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 {\n line-height: 1rem;\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 flex-direction: column;\n block-size: 100vh;\n overflow: clip;\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 .viewer-grid-columns {\n display: flex;\n overflow: hidden;\n }\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 .filterpanel {\n margin-inline: 0 auto;\n inline-size: calc(100vw - 40px);\n }\n .filterpanel[open] {\n box-shadow: 2px 0 5px #666;\n }\n .filterpanel.filterpanel-vrk {\n max-inline-size: 896px;\n }\n .filterpanel.filterpanel-vrk::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.filterpanel-vrk::before {\n inset-inline-start: auto;\n inline-size: 40px;\n }\n}\n@media screen and (min-width: 808px) {\n .filterpanel-vdk[open] {\n box-shadow: none;\n border-inline-end: 1px solid #e5e5e5;\n }\n .overlay {\n box-shadow: -2px 0 5px #666;\n margin-inline: auto 0;\n }\n}\n@media screen and (min-width: 808px) and (max-width: 1031.99px) {\n :host([filterpanel-open][mode=vdk]) .dso-main-panel {\n margin-inline-start: 380px;\n max-inline-size: calc(100vw - 380px);\n }\n .filterpanel-vdk {\n inline-size: 380px;\n inset-inline-start: -380px;\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 .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 .dso-navbar {\n padding-inline: 16px;\n }\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 .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 .filterpanel,\n .overlay {\n margin-inline: 0;\n max-inline-size: 100vw;\n inset-block-start: 0;\n inline-size: 100vw;\n }\n .filterpanel-vdk {\n inline-size: 100vw;\n inset-inline-start: -100vw;\n }\n}\n@media screen and (min-width: 992px) {\n :host([filterpanel-open][mode=vdk]) .dso-main-panel {\n margin-inline-start: 380px;\n }\n}";const x=new ResizeObserver(a((([n])=>{const e=n===null||n===void 0?void 0:n.target.getRootNode();if(e instanceof ShadowRoot&&k(e.host)){e.host._checkMainPanelVisibility()}}),50));function k(n){return n.tagName==="DSO-VIEWER-GRID"}const y=40;const z=768+y;const w=440;const B=class{constructor(n){t(this,n);this.dsoCloseOverlay=o(this,"dsoCloseOverlay",7);this.dsoCloseFilterpanel=o(this,"dsoCloseFilterpanel",7);this.dsoFilterpanelCancel=o(this,"dsoFilterpanelCancel",7);this.dsoFilterpanelApply=o(this,"dsoFilterpanelApply",7);this.dsoActiveTabSwitch=o(this,"dsoActiveTabSwitch",7);this.dsoMainSizeChange=o(this,"dsoMainSizeChange",7);this.dsoMainSizeChangeAnimationEnd=o(this,"dsoMainSizeChangeAnimationEnd",7);this.dsoDocumentPanelSizeChange=o(this,"dsoDocumentPanelSizeChange",7);this.dsoDocumentPanelSizeChangeAnimationEnd=o(this,"dsoDocumentPanelSizeChangeAnimationEnd",7);this.dsoMainPanelExpand=o(this,"dsoMainPanelExpand",7);this.dsoMainPanelToggle=o(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<=w+y+y){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.showFilterpanel=n=>{var e,t;if(n==="vdk"){(e=this.filterpanel)===null||e===void 0?void 0:e.show()}else{(t=this.filterpanel)===null||t===void 0?void 0:t.showModal()}}}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;if(!this.filterpanelSlot){console.warn("slot 'filterpanel' has not been set")}if(n){this.showFilterpanel(this.mode)}else{(e=this.filterpanel)===null||e===void 0?void 0:e.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<=w+y+y&&!this.mainPanelExpanded||this.mapElement.clientWidth<=y+y&&this.mainPanelExpanded)){this.dsoMainPanelToggle.emit({hide:true})}}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener)}componentDidLoad(){var n;if(this.filterpanelOpen&&this.filterpanelSlot){this.showFilterpanel(this.mode)}if(this.overlayOpen&&this.overlaySlot){(n=this.overlay)===null||n===void 0?void 0:n.showModal()}if(this.mode==="vdk"&&this.mapElement instanceof HTMLDivElement){x.observe(this.mapElement)}}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener);if(this.mode==="vdk"&&this.mapElement){x.unobserve(this.mapElement)}}render(){const t=this.mode==="vdk"?l:r;return n(e,null,n("slot",{key:"93d2e897018c42ce46a01124d41d3abc2234b032",name:"top-bar"}),n("div",{key:"e1ad8dfdd96916fdcce5675edcfea41edf195acb",class:"viewer-grid-columns"},this.tabView&&n("nav",{key:"a8b293644058fa1afeae8a16cd1c3fa1818857c2",class:"dso-navbar"},n("ul",{key:"ba001770a2f7fc4c837b2f79107174f1fd86884d",class:"dso-nav dso-nav-sub"},t.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:"d809e400990ffa1edcb7e5b289226d652d5882e1",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}),(!this.tabView||this.tabView&&(this.activeTab==="main"&&this.mode==="vrk"||this.activeTab==="search"))&&n(g,{key:"3ba47105c15416669d20d4d5ff02b217a19480b1",title:this.filterpanelTitle,mode:this.mode,ref:n=>this.filterpanel=n,onApply:this.handleFilterpanelApply,onCancel:this.handleFilterpanelCancel,dsoCloseFilterpanel:n=>this.dsoCloseFilterpanel.emit({originalEvent:n})}),(!this.tabView||this.tabView&&this.activeTab==="map")&&n("div",{key:"0835d3c5b03361c1a6b156518acf7bb3937370fc",class:"map",ref:n=>this.mapElement=n},n("slot",{key:"27ea72ce41252c0a1bf43a2b1c45b2003317e107",name:"map"})),(!this.tabView&&this.documentPanelOpen||this.tabView&&this.activeTab==="document")&&n(f,{key:"08a1ffcd221d080c565d3f8060d755188353214c",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),n(m,{key:"783a817c6ed95c6d6015467b14972f06d755b5e9",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"]}}};B.style=v;export{B as dso_viewer_grid};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{h as n,F as e,r as t,c as o,g as i}from"./p-D2Jo0W7B.js";import{c as s}from"./p-ChV9xqsO.js";import{d as a}from"./p-DDU8nTJS.js";import"./p-BFTU3MAI.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 u=({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 g=({title:t,mode:o,ref:i,onApply:a,onCancel:r,dsoCloseFilterpanel:l})=>n("dialog",{id:"filterpanel",class:s(`filterpanel-${o}`,"filterpanel"),ref:i,onCancel:n=>{n.preventDefault();if(o==="vrk"){r(n)}else{l(n)}}},o==="vrk"?n(e,null,n("h1",null,"Uw keuzes"),n(u,{onApply:a,onCancel:r}),n("slot",{name:"filterpanel"}),n(u,{onApply:a,onCancel:r})):n(e,null,t&&n("h3",null,t),n("button",{type:"button",class:"dso-close",onClick:l},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"Sluiten")),n("slot",{name:"filterpanel"})));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:host[mode=vdk] .dso-main-panel {\n transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in;\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: var(--_dso-button-secondary-background-color, #fff);\n border-color: var(--_dso-button-secondary-border-color, #39870c);\n color: var(--_dso-button-secondary-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: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n border-color: var(--_dso-button-secondary-hover-border-color, #39870c);\n color: var(--_dso-button-secondary-hover-color, #39870c);\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n background-color: var(--_dso-button-secondary-active-background-color, #39870c);\n border-color: var(--_dso-button-secondary-active-border-color, #39870c);\n color: var(--_dso-button-secondary-active-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: var(--_dso-button-secondary-disabled-background-color, #fff);\n border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n color: var(--_dso-button-secondary-disabled-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.filterpanel-vdk {\n display: block;\n position: fixed;\n inset-block-start: 0;\n inset-inline-start: -380px;\n block-size: 100%;\n inline-size: 100%;\n transition: inset-inline-start 200ms ease-in;\n}\n@media screen and (min-width: 992px) {\n .filterpanel-vdk {\n max-inline-size: 380px;\n }\n}\n.filterpanel-vdk[open] {\n inset-inline-start: 0;\n box-shadow: none;\n border-inline-end: 1px solid #e5e5e5;\n}\n.filterpanel-vdk h3 {\n color: #275937;\n}\n.filterpanel-vdk .dso-close {\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 position: absolute;\n inset-block-start: 16px;\n inset-inline-end: 16px;\n block-size: 32px;\n inline-size: 32px;\n padding: 0;\n background-color: transparent;\n border: 0;\n text-align: center;\n}\n.filterpanel-vdk .dso-close[disabled] {\n cursor: default;\n}\n.filterpanel-vdk .dso-close::-moz-focus-inner {\n border: 0;\n padding: 0;\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}\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: var(--_dso-button-secondary-background-color, #fff);\n border-color: var(--_dso-button-secondary-border-color, #39870c);\n color: var(--_dso-button-secondary-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: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n border-color: var(--_dso-button-secondary-hover-border-color, #39870c);\n color: var(--_dso-button-secondary-hover-color, #39870c);\n}\n.filterpanel-buttons .cancel-button:active {\n background-color: var(--_dso-button-secondary-active-background-color, #39870c);\n border-color: var(--_dso-button-secondary-active-border-color, #39870c);\n color: var(--_dso-button-secondary-active-color, #fff);\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n color: var(--_dso-button-secondary-disabled-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:has(+ span:not(.sr-only)),\n.filterpanel-buttons .cancel-button svg.di:has(+ span:not(.sr-only)) {\n margin-inline-start: -8px;\n}\n.filterpanel-buttons .cancel-button span:not(.sr-only) + dso-icon,\n.filterpanel-buttons .cancel-button span:not(.sr-only) + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\n.filterpanel-buttons .cancel-button dso-icon + span:not(.sr-only),\n.filterpanel-buttons .cancel-button svg.di + span:not(.sr-only) {\n margin-inline-start: 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 {\n line-height: 1rem;\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}\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: var(--_dso-button-primary-background-color, #39870c);\n border-color: var(--_dso-button-primary-border-color, #39870c);\n color: var(--_dso-button-primary-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: var(--_dso-button-primary-hover-background-color, #275937);\n border-color: var(--_dso-button-primary-hover-border-color, #275937);\n color: var(--_dso-button-primary-hover-color, #fff);\n}\n.filterpanel-buttons .apply-button:active {\n background-color: var(--_dso-button-primary-active-background-color, #173521);\n border-color: var(--_dso-button-primary-active-border-color, #173521);\n color: var(--_dso-button-primary-active-color, #fff);\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);\n border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);\n color: var(--_dso-button-primary-disabled-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:has(+ span:not(.sr-only)),\n.filterpanel-buttons .apply-button svg.di:has(+ span:not(.sr-only)) {\n margin-inline-start: -8px;\n}\n.filterpanel-buttons .apply-button span:not(.sr-only) + dso-icon,\n.filterpanel-buttons .apply-button span:not(.sr-only) + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\n.filterpanel-buttons .apply-button dso-icon + span:not(.sr-only),\n.filterpanel-buttons .apply-button svg.di + span:not(.sr-only) {\n margin-inline-start: 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 {\n line-height: 1rem;\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 flex-direction: column;\n block-size: 100vh;\n overflow: clip;\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 .viewer-grid-columns {\n display: flex;\n overflow: hidden;\n flex-grow: 1;\n }\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 .filterpanel {\n margin-inline: 0 auto;\n inline-size: calc(100vw - 40px);\n }\n .filterpanel[open] {\n box-shadow: 2px 0 5px #666;\n }\n .filterpanel.filterpanel-vrk {\n max-inline-size: 896px;\n }\n .filterpanel.filterpanel-vrk::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.filterpanel-vrk::before {\n inset-inline-start: auto;\n inline-size: 40px;\n }\n}\n@media screen and (min-width: 808px) {\n .filterpanel-vdk[open] {\n box-shadow: none;\n border-inline-end: 1px solid #e5e5e5;\n }\n .overlay {\n box-shadow: -2px 0 5px #666;\n margin-inline: auto 0;\n }\n}\n@media screen and (min-width: 808px) and (max-width: 1031.99px) {\n :host([filterpanel-open][mode=vdk]) .dso-main-panel {\n margin-inline-start: 380px;\n max-inline-size: calc(100vw - 380px);\n }\n .filterpanel-vdk {\n inline-size: 380px;\n inset-inline-start: -380px;\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 .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 .dso-navbar {\n padding-inline: 16px;\n }\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 .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 .filterpanel,\n .overlay {\n margin-inline: 0;\n max-inline-size: 100vw;\n inset-block-start: 0;\n inline-size: 100vw;\n }\n .filterpanel-vdk {\n inline-size: 100vw;\n inset-inline-start: -100vw;\n }\n}\n@media screen and (min-width: 992px) {\n :host([filterpanel-open][mode=vdk]) .dso-main-panel {\n margin-inline-start: 380px;\n }\n}";const x=new ResizeObserver(a((([n])=>{const e=n===null||n===void 0?void 0:n.target.getRootNode();if(e instanceof ShadowRoot&&k(e.host)){e.host._checkMainPanelVisibility()}}),50));function k(n){return n.tagName==="DSO-VIEWER-GRID"}const y=40;const z=768+y;const w=440;const B=class{constructor(n){t(this,n);this.dsoCloseOverlay=o(this,"dsoCloseOverlay",7);this.dsoCloseFilterpanel=o(this,"dsoCloseFilterpanel",7);this.dsoFilterpanelCancel=o(this,"dsoFilterpanelCancel",7);this.dsoFilterpanelApply=o(this,"dsoFilterpanelApply",7);this.dsoActiveTabSwitch=o(this,"dsoActiveTabSwitch",7);this.dsoMainSizeChange=o(this,"dsoMainSizeChange",7);this.dsoMainSizeChangeAnimationEnd=o(this,"dsoMainSizeChangeAnimationEnd",7);this.dsoDocumentPanelSizeChange=o(this,"dsoDocumentPanelSizeChange",7);this.dsoDocumentPanelSizeChangeAnimationEnd=o(this,"dsoDocumentPanelSizeChangeAnimationEnd",7);this.dsoMainPanelExpand=o(this,"dsoMainPanelExpand",7);this.dsoMainPanelToggle=o(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<=w+y+y){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.showFilterpanel=n=>{var e,t;if(n==="vdk"){(e=this.filterpanel)===null||e===void 0?void 0:e.show()}else{(t=this.filterpanel)===null||t===void 0?void 0:t.showModal()}}}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;if(!this.filterpanelSlot){console.warn("slot 'filterpanel' has not been set")}if(n){this.showFilterpanel(this.mode)}else{(e=this.filterpanel)===null||e===void 0?void 0:e.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<=w+y+y&&!this.mainPanelExpanded||this.mapElement.clientWidth<=y+y&&this.mainPanelExpanded)){this.dsoMainPanelToggle.emit({hide:true})}}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener)}componentDidLoad(){var n;if(this.filterpanelOpen&&this.filterpanelSlot){this.showFilterpanel(this.mode)}if(this.overlayOpen&&this.overlaySlot){(n=this.overlay)===null||n===void 0?void 0:n.showModal()}if(this.mode==="vdk"&&this.mapElement instanceof HTMLDivElement){x.observe(this.mapElement)}}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener);if(this.mode==="vdk"&&this.mapElement){x.unobserve(this.mapElement)}}render(){const t=this.mode==="vdk"?l:r;return n(e,null,n("slot",{key:"93d2e897018c42ce46a01124d41d3abc2234b032",name:"top-bar"}),n("div",{key:"e1ad8dfdd96916fdcce5675edcfea41edf195acb",class:"viewer-grid-columns"},this.tabView&&n("nav",{key:"a8b293644058fa1afeae8a16cd1c3fa1818857c2",class:"dso-navbar"},n("ul",{key:"ba001770a2f7fc4c837b2f79107174f1fd86884d",class:"dso-nav dso-nav-sub"},t.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:"d809e400990ffa1edcb7e5b289226d652d5882e1",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}),(!this.tabView||this.tabView&&(this.activeTab==="main"&&this.mode==="vrk"||this.activeTab==="search"))&&n(g,{key:"3ba47105c15416669d20d4d5ff02b217a19480b1",title:this.filterpanelTitle,mode:this.mode,ref:n=>this.filterpanel=n,onApply:this.handleFilterpanelApply,onCancel:this.handleFilterpanelCancel,dsoCloseFilterpanel:n=>this.dsoCloseFilterpanel.emit({originalEvent:n})}),(!this.tabView||this.tabView&&this.activeTab==="map")&&n("div",{key:"0835d3c5b03361c1a6b156518acf7bb3937370fc",class:"map",ref:n=>this.mapElement=n},n("slot",{key:"27ea72ce41252c0a1bf43a2b1c45b2003317e107",name:"map"})),(!this.tabView&&this.documentPanelOpen||this.tabView&&this.activeTab==="document")&&n(f,{key:"08a1ffcd221d080c565d3f8060d755188353214c",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),n(m,{key:"783a817c6ed95c6d6015467b14972f06d755b5e9",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"]}}};B.style=v;export{B as dso_viewer_grid};
|
|
2
|
+
//# sourceMappingURL=p-eebf32bf.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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","title","mode","ref","dsoCloseFilterpanel","id","clsx","preventDefault","Fragment","MainPanel","mainSize","documentPanelOpen","mainPanelExpanded","mainPanelHidden","shrinkMain","expandMain","toggleMainPanel","dsoMainSizeChangeAnimationEnd","compact","contracted","expanded","collapsed","invisible","Overlay","dsoCloseOverlay","viewerGridCss","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","showFilterpanel","_a","filterpanel","show","_b","showModal","filterpanelSlot","querySelector","overlaySlot","documentPanelOpenWatcher","open","filterpanelOpenWatcher","console","warn","close","overlayOpenWatcher","overlay","connectedCallback","matchMedia","addEventListener","componentDidLoad","observe","disconnectedCallback","removeEventListener","unobserve","render","tabLabels","key","activeTab","filterpanelTitle"],"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 ViewerGridCloseFilterpanelEvent {\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 { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\nimport { ViewerGridMode } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n title?: string;\r\n mode: ViewerGridMode;\r\n ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n onApply: (mouseEvent: MouseEvent) => void;\r\n onCancel: (event: MouseEvent | Event) => void;\r\n dsoCloseFilterpanel: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Filterpanel: FunctionalComponent<ViewerGridFilterpanelProps> = ({\r\n title,\r\n mode,\r\n ref,\r\n onApply,\r\n onCancel,\r\n dsoCloseFilterpanel,\r\n}) => (\r\n <dialog\r\n id=\"filterpanel\"\r\n class={clsx(`filterpanel-${mode}`, \"filterpanel\")}\r\n ref={ref}\r\n onCancel={(e) => {\r\n e.preventDefault();\r\n\r\n if (mode === \"vrk\") {\r\n onCancel(e);\r\n } else {\r\n dsoCloseFilterpanel(e);\r\n }\r\n }}\r\n >\r\n {mode === \"vrk\" ? (\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 </>\r\n ) : (\r\n <>\r\n {title && <h3>{title}</h3>}\r\n <button type=\"button\" class=\"dso-close\" onClick={dsoCloseFilterpanel}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n <slot name=\"filterpanel\" />\r\n </>\r\n )}\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:host[mode=\"vdk\"] {\r\n .dso-main-panel {\r\n transition:\r\n min-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n margin-inline-start core-viewer-grid-variables.$transition-time ease-in;\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.filterpanel-vdk {\r\n display: block;\r\n position: fixed;\r\n inset-block-start: 0;\r\n inset-inline-start: calc(core-viewer-grid-variables.$filterpanel-vdk-max-inline-size * -1);\r\n block-size: 100%;\r\n inline-size: 100%;\r\n transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n\r\n @media screen and (min-width: #{media-query-breakpoints.$screen-md-min}) {\r\n max-inline-size: core-viewer-grid-variables.$filterpanel-vdk-max-inline-size;\r\n }\r\n\r\n &[open] {\r\n inset-inline-start: 0;\r\n box-shadow: none;\r\n border-inline-end: 1px solid core-viewer-grid-variables.$filterpanel-vdk-border-color;\r\n }\r\n\r\n h3 {\r\n color: colors.$bosgroen;\r\n }\r\n\r\n .dso-close {\r\n @include button.element();\r\n\r\n position: absolute;\r\n inset-block-start: units.$u2;\r\n inset-inline-end: units.$u2;\r\n\r\n block-size: units.$u4;\r\n inline-size: units.$u4;\r\n\r\n padding: 0;\r\n\r\n background-color: transparent;\r\n\r\n border: 0;\r\n text-align: center;\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 flex-direction: column;\r\n block-size: 100vh;\r\n overflow: clip;\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\r\n .viewer-grid-columns {\r\n display: flex;\r\n overflow: hidden;\r\n flex-grow: 1;\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 margin-inline: 0 auto;\r\n inline-size: calc(100vw - 40px);\r\n\r\n &[open] {\r\n box-shadow: 2px 0 5px colors.$grijs-60;\r\n }\r\n\r\n &.filterpanel-vrk {\r\n max-inline-size: core-viewer-grid-variables.$filterpanel-max-inline-size;\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\r\n .filterpanel-vdk[open] {\r\n box-shadow: none;\r\n border-inline-end: 1px solid core-viewer-grid-variables.$filterpanel-vdk-border-color;\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 @media screen and (max-width: #{media-query-breakpoints.$screen-sm-max + units.$u5 + 0.99}) {\r\n :host([filterpanel-open][mode=\"vdk\"]) {\r\n .dso-main-panel {\r\n margin-inline-start: core-viewer-grid-variables.$filterpanel-vdk-max-inline-size;\r\n max-inline-size: calc(100vw - #{core-viewer-grid-variables.$filterpanel-vdk-max-inline-size});\r\n }\r\n }\r\n\r\n .filterpanel-vdk {\r\n inline-size: core-viewer-grid-variables.$filterpanel-vdk-max-inline-size;\r\n inset-inline-start: -(core-viewer-grid-variables.$filterpanel-vdk-max-inline-size);\r\n }\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 .filterpanel-vdk {\r\n inline-size: 100vw;\r\n inset-inline-start: -100vw;\r\n }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-md-min}) {\r\n :host([filterpanel-open][mode=\"vdk\"]) {\r\n .dso-main-panel {\r\n margin-inline-start: core-viewer-grid-variables.$filterpanel-vdk-max-inline-size;\r\n }\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 ViewerGridCloseFilterpanelEvent,\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 top-bar - Een slot die bovenaan de viewer over de hele breedte kan worden gevuld met bijv een banner.\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 * **VDK only.** The title of the Filterpanel\r\n */\r\n @Prop({ reflect: true })\r\n filterpanelTitle?: string;\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 * **VDK only.** Emitted when user wants to close the filterpanel.\r\n */\r\n @Event()\r\n dsoCloseFilterpanel!: EventEmitter<ViewerGridCloseFilterpanelEvent>;\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.showFilterpanel(this.mode);\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 private showFilterpanel = (mode: ViewerGridMode) => {\r\n if (mode === \"vdk\") {\r\n // 'vdk' mode displays the filterpanel modelessly, i.e. still allowing interaction with content outside it.\r\n this.filterpanel?.show();\r\n } else {\r\n // 'vrk' mode displays the filterpanel as a modal; interaction outside the dialog is blocked and the content\r\n // outside it is rendered inert\r\n this.filterpanel?.showModal();\r\n }\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.showFilterpanel(this.mode);\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 <slot name=\"top-bar\" />\r\n <div class=\"viewer-grid-columns\">\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 {(!this.tabView ||\r\n (this.tabView && ((this.activeTab === \"main\" && this.mode === \"vrk\") || this.activeTab === \"search\"))) && (\r\n <Filterpanel\r\n title={this.filterpanelTitle}\r\n mode={this.mode}\r\n ref={(element) => (this.filterpanel = element)}\r\n onApply={this.handleFilterpanelApply}\r\n onCancel={this.handleFilterpanelCancel}\r\n dsoCloseFilterpanel={(e) => this.dsoCloseFilterpanel.emit({ originalEvent: e })}\r\n ></Filterpanel>\r\n )}\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 </div>\r\n </>\r\n );\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}
|