npm - @dso-toolkit/core - Versions diffs - 68.1.0 → 68.3.0 - Mend

@dso-toolkit/core 68.1.0 → 68.3.0

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

Files changed (319) hide show

package/dist/cjs/dso-tab.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-52cc9a2a.js');
+const index = require('./index-57504611.js');
 const isModifiedEvent = require('./is-modified-event-f643edb2.js');
 const tabCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block;border-color:#39870c;margin-block-end:-1px}@media screen and (max-width: 767px){:host{margin-block:10px}:host(:first-child){margin-block-start:0}}:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{background-color:#fff;border:1px solid #39870c;border-block-end-color:#fff;color:#39870c;cursor:default}@media screen and (max-width: 767px){:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{border-block-end-color:#39870c}}:host([disabled]:not([disabled=false])) [role=tab]{color:#999}:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{color:#999;text-decoration:none;cursor:default;background-color:transparent}@media screen and (max-width: 767px){:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{border-block-end-color:#fff}}a{text-decoration:none}a:hover,a:focus-visible{text-decoration:none}a:active{text-decoration:underline}a:visited{color:#666}button{font-family:inherit;font-size:inherit;background-color:transparent}[role=tab]{font-weight:bold;cursor:pointer;display:block;min-block-size:56px;border:1px solid transparent;border-radius:4px 4px 0 0;color:#666;line-height:1.5;padding-block:15px;padding-inline:23px}[role=tab]:hover{border-color:#e5e5e5 #e5e5e5 #e5e5e5}[role=tab]:hover,[role=tab]:focus{text-decoration:none;background-color:#e5e5e5}[role=tab]:active,[role=tab]:focus,[role=tab]:hover{background-color:#f2f2f2;border:1px solid transparent;border-block-end-color:#39870c;text-decoration:none}@media screen and (max-width: 767px){[role=tab]:active,[role=tab]:focus,[role=tab]:hover{border-block-end-color:#fff}}@media screen and (max-width: 767px){[role=tab]{border-color:#fff;border-radius:8px;padding-block:18px;padding-inline:20px;inline-size:100%;text-align:start}}";

package/dist/cjs/dso-tabs.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-52cc9a2a.js');
+const index = require('./index-57504611.js');
 const tabsCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block}.tabs{border-block-end:1px solid #39870c;display:flex;gap:2px;flex-wrap:wrap;margin-block-end:24px;padding-inline-start:0}@media screen and (max-width: 767px){.tabs{border:0;display:block}}";
 const DsoTabsStyle0 = tabsCss;

package/dist/cjs/dso-toggletip.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-52cc9a2a.js');
+const index = require('./index-57504611.js');
 const toggletipCss = "*,*::after,*::before{box-sizing:border-box}:host{display:inline-block;--tooltip-margin-block-start:0;--tooltip-margin-inline-start:3px;--tooltip-margin-inline-end:units.$u1 * -1 !important}:host(:focus){outline:none;z-index:410}";
 const DsoToggletipStyle0 = toggletipCss;

package/dist/cjs/dso-toolkit.cjs.js CHANGED Viewed

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-52cc9a2a.js');
+const index = require('./index-57504611.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 /*
- Stencil Client Patch Browser v4.23.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.25.1 | MIT Licensed | https://stenciljs.com
  */
 var patchBrowser = () => {
   const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('dso-toolkit.cjs.js', document.baseURI).href));
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy(JSON.parse("[[\"dso-icon.cjs\",[[1,\"dso-icon\",{\"icon\":[1]}]]],[\"dsot-document-component-demo.cjs\",[[2,\"dsot-document-component-demo\",{\"showCanvas\":[516,\"show-canvas\"],\"jsonFile\":[1,\"json-file\"],\"openDefault\":[4,\"open-default\"],\"mode\":[513],\"response\":[32],\"document\":[32],\"openOrClosed\":[32],\"openedAnnotation\":[32],\"filtered\":[32],\"notApplicable\":[32],\"activeAnnotationSelectables\":[32]},null,{\"jsonFile\":[\"jsonFileWatcher\"],\"openDefault\":[\"openDefaultWatcher\"]}]]],[\"dso-accordion-section.cjs\",[[1,\"dso-accordion-section\",{\"handleTitle\":[1,\"handle-title\"],\"wijzigactie\":[1],\"heading\":[1],\"handleUrl\":[1,\"handle-url\"],\"status\":[1],\"attachmentCount\":[2,\"attachment-count\"],\"icon\":[1],\"statusDescription\":[1,\"status-description\"],\"open\":[516],\"hasNestedAccordion\":[516,\"has-nested-accordion\"],\"label\":[1],\"labelStatus\":[1,\"label-status\"],\"hover\":[32],\"focusHandle\":[64]}]]],[\"dso-annotation-activiteit.cjs\",[[1,\"dso-annotation-activiteit\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"regelKwalificatie\":[1,\"regel-kwalificatie\"],\"locatieNoemers\":[16],\"regelKwalificatieVoorzetsel\":[1,\"regel-kwalificatie-voorzetsel\"]}]]],[\"dso-annotation-gebiedsaanwijzing.cjs\",[[1,\"dso-annotation-gebiedsaanwijzing\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1]}]]],[\"dso-annotation-omgevingsnormwaarde.cjs\",[[1,\"dso-annotation-omgevingsnormwaarde\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"toelichting\":[1],\"waardes\":[16],\"eenheid\":[1]}]]],[\"dso-advanced-select.cjs\",[[1,\"dso-advanced-select\",{\"options\":[16],\"active\":[16],\"activeHint\":[1,\"active-hint\"],\"open\":[32]},[[8,\"keydown\",\"keyDownListener\"]]]]],[\"dso-legend-item.cjs\",[[1,\"dso-legend-item\",{\"disabled\":[516],\"disabledMessage\":[1,\"disabled-message\"],\"removable\":[4],\"showBody\":[32]}]]],[\"dso-map-base-layers.cjs\",[[1,\"dso-map-base-layers\",{\"group\":[1],\"baseLayers\":[16]}]]],[\"dso-map-overlays.cjs\",[[1,\"dso-map-overlays\",{\"group\":[1],\"overlays\":[16]}]]],[\"dso-annotation-kaart.cjs\",[[1,\"dso-annotation-kaart\",{\"wijzigactie\":[513],\"naam\":[1],\"href\":[513]}]]],[\"dso-autosuggest.cjs\",[[6,\"dso-autosuggest\",{\"suggestions\":[16],\"loading\":[4],\"loadingLabel\":[1,\"loading-label\"],\"loadingDelayed\":[2,\"loading-delayed\"],\"notFoundLabel\":[1,\"not-found-label\"],\"suggestOnFocus\":[4,\"suggest-on-focus\"],\"mark\":[16],\"showSuggestions\":[32],\"selectedSuggestion\":[32],\"notFound\":[32],\"showLoading\":[32],\"listItemBlockSize\":[32],\"listboxContainerMaxBlockSize\":[32]},[[4,\"click\",\"onDocumentClick\"]],{\"suggestions\":[\"suggestionsWatcher\"]}]]],[\"dso-project-item.cjs\",[[1,\"dso-project-item\",{\"label\":[1]}]]],[\"dso-header.cjs\",[[1,\"dso-header\",{\"mainMenu\":[16],\"useDropDownMenu\":[1,\"use-drop-down-menu\"],\"authStatus\":[1,\"auth-status\"],\"loginUrl\":[1,\"login-url\"],\"logoutUrl\":[1,\"logout-url\"],\"showHelp\":[4,\"show-help\"],\"helpUrl\":[1,\"help-url\"],\"userProfileName\":[1,\"user-profile-name\"],\"userProfileUrl\":[1,\"user-profile-url\"],\"userHomeUrl\":[1,\"user-home-url\"],\"userHomeActive\":[4,\"user-home-active\"],\"showDropDown\":[32],\"overflowMenuItems\":[32],\"dropdownOptionsOffset\":[32]},null,{\"useDropDownMenu\":[\"setShowDropDown\"]}]]],[\"dso-map-controls.cjs\",[[1,\"dso-map-controls\",{\"open\":[1540],\"disableZoom\":[1,\"disable-zoom\"],\"hideContent\":[32],\"toggleVisibility\":[64]},null,{\"open\":[\"watchOpen\"]}]]],[\"dso-modal.cjs\",[[1,\"dso-modal\",{\"fullscreen\":[516],\"modalTitle\":[1,\"modal-title\"],\"dialogRole\":[1,\"dialog-role\"],\"returnFocus\":[4,\"return-focus\"],\"showCloseButton\":[4,\"show-close-button\"],\"ariaId\":[32]}]]],[\"dso-pagination.cjs\",[[1,\"dso-pagination\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[2,\"current-page\"],\"formatHref\":[16],\"availablePositions\":[32]},[[0,\"dsoSizeChange\",\"sizeChangeHandler\"]]]]],[\"dso-tree-view.cjs\",[[1,\"dso-tree-view\",{\"collection\":[16],\"focusItem\":[64]}]]],[\"dso-action-list-item.cjs\",[[1,\"dso-action-list-item\",{\"step\":[2],\"itemTitle\":[1,\"item-title\"],\"flowLine\":[4,\"flow-line\"],\"warning\":[4],\"divider\":[4]}]]],[\"dso-card.cjs\",[[1,\"dso-card\",{\"href\":[513],\"mode\":[513],\"active\":[516]}]]],[\"dso-date-picker-legacy.cjs\",[[2,\"dso-date-picker-legacy\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"role\":[1],\"direction\":[1],\"required\":[4],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[1537],\"min\":[1],\"max\":[1],\"activeFocus\":[32],\"focusedDay\":[32],\"open\":[32],\"visible\":[32],\"setFocus\":[64],\"show\":[64],\"hide\":[64]},[[6,\"click\",\"handleDocumentClick\"]]]]],[\"dso-document-card.cjs\",[[1,\"dso-document-card\",{\"href\":[513],\"active\":[516]}]]],[\"dso-helpcenter-panel.cjs\",[[1,\"dso-helpcenter-panel\",{\"label\":[1],\"url\":[1],\"visibility\":[32],\"isOpen\":[32],\"slideState\":[32],\"loadIframe\":[32]},[[8,\"keydown\",\"keyDownListener\"]],{\"url\":[\"watchUrl\"],\"isOpen\":[\"watchIsOpen\"]}]]],[\"dso-list-button.cjs\",[[1,\"dso-list-button\",{\"label\":[1],\"sublabel\":[1],\"count\":[2],\"min\":[8],\"max\":[8],\"checked\":[516],\"disabled\":[516],\"subcontentPrefix\":[1,\"subcontent-prefix\"]}]]],[\"dso-mark-bar.cjs\",[[1,\"dso-mark-bar\",{\"value\":[1],\"label\":[1],\"current\":[2],\"totalCount\":[2,\"total-count\"],\"dsoFocus\":[64]}]]],[\"dso-plekinfo-card.cjs\",[[1,\"dso-plekinfo-card\",{\"wijzigactie\":[513],\"href\":[513],\"targetBlank\":[4,\"target-blank\"],\"active\":[516]}]]],[\"dso-skiplink.cjs\",[[1,\"dso-skiplink\",{\"to\":[513],\"label\":[513]}]]],[\"dso-accordion.cjs\",[[1,\"dso-accordion\",{\"variant\":[513],\"reverseAlign\":[516,\"reverse-align\"],\"_getState\":[64]},null,{\"variant\":[\"updateVariant\"],\"reverseAlign\":[\"updateReverseAlign\"]}]]],[\"dso-action-list.cjs\",[[1,\"dso-action-list\",{\"listTitle\":[1,\"list-title\"]}]]],[\"dso-banner.cjs\",[[1,\"dso-banner\",{\"status\":[513],\"compact\":[4],\"noIcon\":[4,\"no-icon\"]}]]],[\"dso-card-container.cjs\",[[1,\"dso-card-container\",{\"mode\":[513]}]]],[\"dso-contact-information.cjs\",[[1,\"dso-contact-information\"]]],[\"dso-date-picker.cjs\",[[2,\"dso-date-picker\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"required\":[516],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[513],\"min\":[1],\"max\":[1]}]]],[\"dso-highlight-box.cjs\",[[1,\"dso-highlight-box\",{\"yellow\":[516],\"border\":[516],\"white\":[516],\"dropShadow\":[516,\"drop-shadow\"],\"step\":[514]}]]],[\"dso-input-range.cjs\",[[1,\"dso-input-range\",{\"min\":[2],\"max\":[2],\"value\":[2],\"step\":[2],\"label\":[1],\"unit\":[1],\"description\":[1]}]]],[\"dso-logo.cjs\",[[1,\"dso-logo\",{\"name\":[513],\"logoUrl\":[513,\"logo-url\"],\"label\":[513],\"labelUrl\":[513,\"label-url\"],\"ribbon\":[513]}]]],[\"dso-progress-bar.cjs\",[[1,\"dso-progress-bar\",{\"progress\":[2],\"min\":[2],\"max\":[2]}]]],[\"dso-tab.cjs\",[[1,\"dso-tab\",{\"active\":[516],\"disabled\":[516],\"href\":[1],\"_dsoFocus\":[64]}]]],[\"dso-tabs.cjs\",[[1,\"dso-tabs\"]]],[\"dso-viewer-grid.cjs\",[[1,\"dso-viewer-grid\",{\"mode\":[513],\"filterpanelOpen\":[516,\"filterpanel-open\"],\"overlayOpen\":[516,\"overlay-open\"],\"documentPanelOpen\":[516,\"document-panel-open\"],\"mainSize\":[513,\"main-size\"],\"activeTab\":[1,\"active-tab\"],\"documentPanelSize\":[513,\"document-panel-size\"],\"mainPanelExpanded\":[4,\"main-panel-expanded\"],\"mainPanelHidden\":[4,\"main-panel-hidden\"],\"tabView\":[32],\"_checkMainPanelVisibility\":[64]},null,{\"documentPanelOpen\":[\"documentPanelOpenWatcher\"],\"filterpanelOpen\":[\"filterpanelOpenWatcher\"],\"overlayOpen\":[\"overlayOpenWatcher\"]}]]],[\"dso-info-button.cjs\",[[1,\"dso-info-button\",{\"active\":[1540],\"secondary\":[4],\"label\":[1],\"hover\":[32],\"setFocus\":[64]}]]],[\"dso-toggletip.cjs\",[[1,\"dso-toggletip\",{\"label\":[1],\"position\":[1],\"small\":[4],\"secondary\":[4],\"active\":[32]}]]],[\"dso-dropdown-menu.cjs\",[[1,\"dso-dropdown-menu\",{\"open\":[1540],\"dropdownAlign\":[1,\"dropdown-align\"],\"dropdownOptionsOffset\":[2,\"dropdown-options-offset\"],\"checkable\":[4],\"boundary\":[1],\"placement\":[1],\"strategy\":[1]},[[8,\"click\",\"onClick\"],[8,\"keydown\",\"keyDownListener\"]],{\"placement\":[\"watchPosition\"],\"dropdownAlign\":[\"watchPosition\"],\"dropdownOptionsOffset\":[\"watchOptionsOffset\"],\"strategy\":[\"watchStrategy\"]}]]],[\"dso-scrollable.cjs\",[[1,\"dso-scrollable\",{\"scrollPosition\":[32],\"_setScrollState\":[64]}]]],[\"dso-info_2.cjs\",[[6,\"dso-selectable\",{\"type\":[1],\"identifier\":[1],\"name\":[1],\"value\":[1],\"invalid\":[4],\"describedById\":[1,\"described-by-id\"],\"labelledById\":[1,\"labelled-by-id\"],\"disabled\":[4],\"required\":[4],\"checked\":[516],\"indeterminate\":[4],\"infoFixed\":[4,\"info-fixed\"],\"infoActive\":[32],\"keyboardFocus\":[32],\"toggleInfo\":[64]},null,{\"indeterminate\":[\"setIndeterminate\"]}],[1,\"dso-info\",{\"fixed\":[516],\"active\":[516]}]]],[\"dso-label_2.cjs\",[[1,\"dso-label\",{\"compact\":[4],\"removable\":[516],\"status\":[1],\"truncate\":[4],\"removeHover\":[32],\"removeFocus\":[32],\"textHover\":[32],\"textFocus\":[32],\"isTruncated\":[32],\"labelText\":[32],\"_truncateLabel\":[64]},[[4,\"keydown\",\"keyDownListener\"]],{\"removable\":[\"watchRemovable\"],\"truncate\":[\"watchTruncate\"]}],[1,\"dso-tooltip\",{\"descriptive\":[516],\"position\":[1],\"strategy\":[1],\"noArrow\":[4,\"no-arrow\"],\"stateless\":[4],\"small\":[4],\"active\":[1540],\"hidden\":[32],\"activate\":[64],\"deactivate\":[64]},null,{\"position\":[\"watchPosition\"],\"strategy\":[\"watchStrategy\"],\"active\":[\"watchActive\"]}]]],[\"dso-alert_6.cjs\",[[1,\"dso-ozon-content\",{\"content\":[1],\"inline\":[516],\"mark\":[16],\"state\":[32]},null,{\"content\":[\"contentWatcher\"]}],[1,\"dso-alert\",{\"status\":[513],\"roleAlert\":[4,\"role-alert\"],\"compact\":[516],\"closable\":[4]}],[1,\"dso-panel\",{\"closeButtonLabel\":[1,\"close-button-label\"]}],[1,\"dso-image-overlay\",{\"wijzigactie\":[1],\"active\":[32],\"zoomable\":[32]},[[2,\"load\",\"loadListener\"]]],[1,\"dso-table\",{\"noModal\":[516,\"no-modal\"],\"isResponsive\":[516,\"is-responsive\"],\"modalActive\":[32],\"placeholderHeight\":[32]}],[1,\"dso-badge\",{\"status\":[1]}]]],[\"dso-annotation-locatie_2.cjs\",[[1,\"dso-document-component\",{\"heading\":[1],\"label\":[1],\"nummer\":[1],\"opschrift\":[1],\"inhoud\":[1],\"open\":[516],\"filtered\":[516],\"notApplicable\":[516,\"not-applicable\"],\"genesteOntwerpInformatie\":[516,\"geneste-ontwerp-informatie\"],\"bevatOntwerpInformatie\":[516,\"bevat-ontwerp-informatie\"],\"annotated\":[516],\"gereserveerd\":[4],\"vervallen\":[4],\"openAnnotation\":[516,\"open-annotation\"],\"alternativeTitle\":[1,\"alternative-title\"],\"type\":[513],\"wijzigactie\":[513],\"annotationsWijzigactie\":[513,\"annotations-wijzigactie\"],\"mark\":[16],\"recursiveToggle\":[8,\"recursive-toggle\"],\"mode\":[513],\"href\":[513]}],[1,\"dso-annotation-locatie\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"locatieNoemer\":[1,\"locatie-noemer\"]}]]],[\"dso-attachments-counter_2.cjs\",[[1,\"dso-attachments-counter\",{\"count\":[2]}],[1,\"dso-expandable\",{\"open\":[516],\"enableAnimation\":[516,\"enable-animation\"],\"minimumHeight\":[2,\"minimum-height\"],\"isClosed\":[32]},[[0,\"transitionstart\",\"transitionstartHandler\"],[0,\"transitionend\",\"transitionendHandler\"]],{\"open\":[\"toggleOpen\"]}]]],[\"dso-progress-indicator.cjs\",[[1,\"dso-progress-indicator\",{\"label\":[1],\"size\":[513],\"block\":[516]}]]],[\"dso-responsive-element.cjs\",[[1,\"dso-responsive-element\",{\"sizeAlias\":[32],\"sizeWidth\":[32],\"getSize\":[64]}]]],[\"dso-renvooi_2.cjs\",[[4,\"dso-slide-toggle\",{\"checked\":[4],\"disabled\":[4],\"accessibleLabel\":[1,\"accessible-label\"],\"labelledbyId\":[1,\"labelledby-id\"],\"identifier\":[1],\"hasVisibleLabel\":[32]}],[1,\"dso-renvooi\",{\"value\":[1]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"dso-icon.cjs\",[[1,\"dso-icon\",{\"icon\":[1]}]]],[\"dsot-document-component-demo.cjs\",[[2,\"dsot-document-component-demo\",{\"showCanvas\":[516,\"show-canvas\"],\"jsonFile\":[1,\"json-file\"],\"openDefault\":[4,\"open-default\"],\"mode\":[513],\"response\":[32],\"document\":[32],\"openOrClosed\":[32],\"openedAnnotation\":[32],\"filtered\":[32],\"notApplicable\":[32],\"activeAnnotationSelectables\":[32]},null,{\"jsonFile\":[\"jsonFileWatcher\"],\"openDefault\":[\"openDefaultWatcher\"]}]]],[\"dso-accordion-section.cjs\",[[1,\"dso-accordion-section\",{\"handleTitle\":[1,\"handle-title\"],\"wijzigactie\":[1],\"heading\":[1],\"handleUrl\":[1,\"handle-url\"],\"status\":[1],\"attachmentCount\":[2,\"attachment-count\"],\"icon\":[1],\"statusDescription\":[1,\"status-description\"],\"open\":[516],\"hasNestedAccordion\":[516,\"has-nested-accordion\"],\"label\":[1],\"labelStatus\":[1,\"label-status\"],\"hover\":[32],\"focusHandle\":[64]}]]],[\"dso-annotation-activiteit.cjs\",[[1,\"dso-annotation-activiteit\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"regelKwalificatie\":[1,\"regel-kwalificatie\"],\"locatieNoemers\":[16],\"regelKwalificatieVoorzetsel\":[1,\"regel-kwalificatie-voorzetsel\"]}]]],[\"dso-annotation-gebiedsaanwijzing.cjs\",[[1,\"dso-annotation-gebiedsaanwijzing\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1]}]]],[\"dso-annotation-omgevingsnormwaarde.cjs\",[[1,\"dso-annotation-omgevingsnormwaarde\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"toelichting\":[1],\"waardes\":[16],\"eenheid\":[1]}]]],[\"dso-advanced-select.cjs\",[[1,\"dso-advanced-select\",{\"options\":[16],\"active\":[16],\"activeHint\":[1,\"active-hint\"],\"open\":[32]},[[8,\"keydown\",\"keyDownListener\"]]]]],[\"dso-legend-item.cjs\",[[1,\"dso-legend-item\",{\"disabled\":[516],\"disabledMessage\":[1,\"disabled-message\"],\"removable\":[4],\"showBody\":[32]}]]],[\"dso-map-base-layers.cjs\",[[1,\"dso-map-base-layers\",{\"group\":[1],\"baseLayers\":[16]}]]],[\"dso-map-overlays.cjs\",[[1,\"dso-map-overlays\",{\"group\":[1],\"overlays\":[16]}]]],[\"dso-annotation-kaart.cjs\",[[1,\"dso-annotation-kaart\",{\"wijzigactie\":[513],\"naam\":[1],\"href\":[513]}]]],[\"dso-autosuggest.cjs\",[[6,\"dso-autosuggest\",{\"suggestions\":[16],\"loading\":[4],\"loadingLabel\":[1,\"loading-label\"],\"loadingDelayed\":[2,\"loading-delayed\"],\"notFoundLabel\":[1,\"not-found-label\"],\"suggestOnFocus\":[4,\"suggest-on-focus\"],\"mark\":[16],\"showSuggestions\":[32],\"selectedSuggestion\":[32],\"notFound\":[32],\"showLoading\":[32],\"listItemBlockSize\":[32],\"listboxContainerMaxBlockSize\":[32]},[[4,\"click\",\"onDocumentClick\"]],{\"suggestions\":[\"suggestionsWatcher\"]}]]],[\"dso-project-item.cjs\",[[1,\"dso-project-item\",{\"label\":[1]}]]],[\"dso-header.cjs\",[[1,\"dso-header\",{\"mainMenu\":[16],\"useDropDownMenu\":[1,\"use-drop-down-menu\"],\"authStatus\":[1,\"auth-status\"],\"loginUrl\":[1,\"login-url\"],\"logoutUrl\":[1,\"logout-url\"],\"showHelp\":[4,\"show-help\"],\"helpUrl\":[1,\"help-url\"],\"userProfileName\":[1,\"user-profile-name\"],\"userProfileUrl\":[1,\"user-profile-url\"],\"userHomeUrl\":[1,\"user-home-url\"],\"userHomeActive\":[4,\"user-home-active\"],\"showDropDown\":[32],\"overflowMenuItems\":[32],\"dropdownOptionsOffset\":[32]},null,{\"useDropDownMenu\":[\"setShowDropDown\"]}]]],[\"dso-map-controls.cjs\",[[1,\"dso-map-controls\",{\"open\":[1540],\"disableZoom\":[1,\"disable-zoom\"],\"hideContent\":[32],\"toggleVisibility\":[64]},null,{\"open\":[\"watchOpen\"]}]]],[\"dso-modal.cjs\",[[1,\"dso-modal\",{\"fullscreen\":[516],\"modalTitle\":[1,\"modal-title\"],\"dialogRole\":[1,\"dialog-role\"],\"returnFocus\":[4,\"return-focus\"],\"showCloseButton\":[4,\"show-close-button\"],\"ariaId\":[32]}]]],[\"dso-pagination.cjs\",[[1,\"dso-pagination\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[2,\"current-page\"],\"formatHref\":[16],\"availablePositions\":[32]},[[0,\"dsoSizeChange\",\"sizeChangeHandler\"]]]]],[\"dso-tree-view.cjs\",[[1,\"dso-tree-view\",{\"collection\":[16],\"focusItem\":[64]}]]],[\"dso-action-list-item.cjs\",[[1,\"dso-action-list-item\",{\"step\":[2],\"itemTitle\":[1,\"item-title\"],\"flowLine\":[4,\"flow-line\"],\"warning\":[4],\"divider\":[4]}]]],[\"dso-card.cjs\",[[1,\"dso-card\",{\"href\":[513],\"mode\":[513],\"active\":[516]}]]],[\"dso-date-picker-legacy.cjs\",[[2,\"dso-date-picker-legacy\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"role\":[1],\"direction\":[1],\"required\":[4],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[1537],\"min\":[1],\"max\":[1],\"activeFocus\":[32],\"focusedDay\":[32],\"open\":[32],\"visible\":[32],\"setFocus\":[64],\"show\":[64],\"hide\":[64]},[[6,\"click\",\"handleDocumentClick\"]]]]],[\"dso-document-card.cjs\",[[1,\"dso-document-card\",{\"href\":[513],\"active\":[516]}]]],[\"dso-helpcenter-panel.cjs\",[[1,\"dso-helpcenter-panel\",{\"label\":[1],\"url\":[1],\"visibility\":[32],\"isOpen\":[32],\"slideState\":[32],\"loadIframe\":[32]},[[8,\"keydown\",\"keyDownListener\"]],{\"url\":[\"watchUrl\"],\"isOpen\":[\"watchIsOpen\"]}]]],[\"dso-list-button.cjs\",[[1,\"dso-list-button\",{\"label\":[1],\"sublabel\":[1],\"count\":[2],\"min\":[8],\"max\":[8],\"checked\":[516],\"disabled\":[516],\"subcontentPrefix\":[1,\"subcontent-prefix\"]}]]],[\"dso-mark-bar.cjs\",[[1,\"dso-mark-bar\",{\"value\":[1],\"label\":[1],\"current\":[2],\"totalCount\":[2,\"total-count\"],\"dsoFocus\":[64]}]]],[\"dso-plekinfo-card.cjs\",[[1,\"dso-plekinfo-card\",{\"wijzigactie\":[513],\"href\":[513],\"targetBlank\":[4,\"target-blank\"],\"active\":[516]}]]],[\"dso-skiplink.cjs\",[[1,\"dso-skiplink\",{\"to\":[513],\"label\":[513]}]]],[\"dso-accordion.cjs\",[[1,\"dso-accordion\",{\"variant\":[6145],\"reverseAlign\":[6148,\"reverse-align\"],\"_getState\":[64]}]]],[\"dso-action-list.cjs\",[[1,\"dso-action-list\",{\"listTitle\":[1,\"list-title\"]}]]],[\"dso-banner.cjs\",[[1,\"dso-banner\",{\"status\":[513],\"compact\":[4],\"noIcon\":[4,\"no-icon\"]}]]],[\"dso-card-container.cjs\",[[1,\"dso-card-container\",{\"mode\":[513]}]]],[\"dso-contact-information.cjs\",[[1,\"dso-contact-information\"]]],[\"dso-date-picker.cjs\",[[2,\"dso-date-picker\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"required\":[516],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[513],\"min\":[1],\"max\":[1]}]]],[\"dso-highlight-box.cjs\",[[1,\"dso-highlight-box\",{\"yellow\":[516],\"border\":[516],\"white\":[516],\"dropShadow\":[516,\"drop-shadow\"],\"step\":[514]}]]],[\"dso-input-range.cjs\",[[1,\"dso-input-range\",{\"min\":[2],\"max\":[2],\"value\":[2],\"step\":[2],\"label\":[1],\"unit\":[1],\"description\":[1]}]]],[\"dso-logo.cjs\",[[1,\"dso-logo\",{\"name\":[513],\"logoUrl\":[513,\"logo-url\"],\"label\":[513],\"labelUrl\":[513,\"label-url\"],\"ribbon\":[513]}]]],[\"dso-progress-bar.cjs\",[[1,\"dso-progress-bar\",{\"progress\":[2],\"min\":[2],\"max\":[2]}]]],[\"dso-tab.cjs\",[[1,\"dso-tab\",{\"active\":[516],\"disabled\":[516],\"href\":[1],\"_dsoFocus\":[64]}]]],[\"dso-tabs.cjs\",[[1,\"dso-tabs\"]]],[\"dso-viewer-grid.cjs\",[[1,\"dso-viewer-grid\",{\"mode\":[513],\"filterpanelTitle\":[513,\"filterpanel-title\"],\"filterpanelOpen\":[516,\"filterpanel-open\"],\"overlayOpen\":[516,\"overlay-open\"],\"documentPanelOpen\":[516,\"document-panel-open\"],\"mainSize\":[513,\"main-size\"],\"activeTab\":[1,\"active-tab\"],\"documentPanelSize\":[513,\"document-panel-size\"],\"mainPanelExpanded\":[4,\"main-panel-expanded\"],\"mainPanelHidden\":[4,\"main-panel-hidden\"],\"tabView\":[32],\"_checkMainPanelVisibility\":[64]},null,{\"documentPanelOpen\":[\"documentPanelOpenWatcher\"],\"filterpanelOpen\":[\"filterpanelOpenWatcher\"],\"overlayOpen\":[\"overlayOpenWatcher\"]}]]],[\"dso-info-button.cjs\",[[1,\"dso-info-button\",{\"active\":[1540],\"secondary\":[4],\"label\":[1],\"hover\":[32],\"setFocus\":[64]}]]],[\"dso-toggletip.cjs\",[[1,\"dso-toggletip\",{\"label\":[1],\"position\":[1],\"small\":[4],\"secondary\":[4],\"active\":[32]}]]],[\"dso-dropdown-menu.cjs\",[[1,\"dso-dropdown-menu\",{\"open\":[1540],\"dropdownAlign\":[1,\"dropdown-align\"],\"dropdownOptionsOffset\":[2,\"dropdown-options-offset\"],\"checkable\":[4],\"boundary\":[1],\"placement\":[1],\"strategy\":[1]},[[8,\"click\",\"onClick\"],[8,\"keydown\",\"keyDownListener\"]],{\"placement\":[\"watchPosition\"],\"dropdownAlign\":[\"watchPosition\"],\"dropdownOptionsOffset\":[\"watchOptionsOffset\"],\"strategy\":[\"watchStrategy\"]}]]],[\"dso-scrollable.cjs\",[[1,\"dso-scrollable\",{\"scrollPosition\":[32],\"_setScrollState\":[64]}]]],[\"dso-info_2.cjs\",[[6,\"dso-selectable\",{\"type\":[1],\"identifier\":[1],\"name\":[1],\"value\":[1],\"invalid\":[4],\"describedById\":[1,\"described-by-id\"],\"labelledById\":[1,\"labelled-by-id\"],\"disabled\":[4],\"required\":[4],\"checked\":[516],\"indeterminate\":[4],\"infoFixed\":[4,\"info-fixed\"],\"infoActive\":[32],\"keyboardFocus\":[32],\"toggleInfo\":[64]},null,{\"indeterminate\":[\"setIndeterminate\"]}],[1,\"dso-info\",{\"fixed\":[516],\"active\":[516]}]]],[\"dso-label_2.cjs\",[[1,\"dso-label\",{\"compact\":[4],\"removable\":[516],\"status\":[1],\"truncate\":[4],\"removeHover\":[32],\"removeFocus\":[32],\"textHover\":[32],\"textFocus\":[32],\"isTruncated\":[32],\"labelText\":[32],\"_truncateLabel\":[64]},[[4,\"keydown\",\"keyDownListener\"]],{\"removable\":[\"watchRemovable\"],\"truncate\":[\"watchTruncate\"]}],[1,\"dso-tooltip\",{\"descriptive\":[516],\"position\":[1],\"strategy\":[1],\"noArrow\":[4,\"no-arrow\"],\"stateless\":[4],\"small\":[4],\"active\":[1540],\"hidden\":[32],\"activate\":[64],\"deactivate\":[64]},null,{\"position\":[\"watchPosition\"],\"strategy\":[\"watchStrategy\"],\"active\":[\"watchActive\"]}]]],[\"dso-alert_6.cjs\",[[1,\"dso-ozon-content\",{\"content\":[1],\"inline\":[516],\"mark\":[16],\"state\":[32]},null,{\"content\":[\"contentWatcher\"]}],[1,\"dso-alert\",{\"status\":[513],\"roleAlert\":[4,\"role-alert\"],\"compact\":[516],\"closable\":[4]}],[1,\"dso-panel\",{\"closeButtonLabel\":[1,\"close-button-label\"],\"emphasized\":[4]}],[1,\"dso-image-overlay\",{\"wijzigactie\":[1],\"active\":[32],\"zoomable\":[32]},[[2,\"load\",\"loadListener\"]]],[1,\"dso-table\",{\"noModal\":[516,\"no-modal\"],\"isResponsive\":[516,\"is-responsive\"],\"modalActive\":[32],\"placeholderHeight\":[32]}],[1,\"dso-badge\",{\"status\":[1]}]]],[\"dso-annotation-locatie_2.cjs\",[[1,\"dso-document-component\",{\"heading\":[1],\"label\":[1],\"nummer\":[1],\"opschrift\":[1],\"inhoud\":[1],\"open\":[516],\"filtered\":[516],\"notApplicable\":[516,\"not-applicable\"],\"genesteOntwerpInformatie\":[516,\"geneste-ontwerp-informatie\"],\"bevatOntwerpInformatie\":[516,\"bevat-ontwerp-informatie\"],\"annotated\":[516],\"gereserveerd\":[4],\"vervallen\":[4],\"openAnnotation\":[516,\"open-annotation\"],\"alternativeTitle\":[1,\"alternative-title\"],\"type\":[513],\"wijzigactie\":[513],\"annotationsWijzigactie\":[513,\"annotations-wijzigactie\"],\"mark\":[16],\"recursiveToggle\":[8,\"recursive-toggle\"],\"mode\":[513],\"href\":[513]}],[1,\"dso-annotation-locatie\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"locatieNoemer\":[1,\"locatie-noemer\"]}]]],[\"dso-attachments-counter_2.cjs\",[[1,\"dso-attachments-counter\",{\"count\":[2]}],[1,\"dso-expandable\",{\"open\":[516],\"enableAnimation\":[516,\"enable-animation\"],\"minimumHeight\":[2,\"minimum-height\"],\"isClosed\":[32]},[[0,\"transitionstart\",\"transitionstartHandler\"],[0,\"transitionend\",\"transitionendHandler\"]],{\"open\":[\"toggleOpen\"]}]]],[\"dso-progress-indicator.cjs\",[[1,\"dso-progress-indicator\",{\"label\":[1],\"size\":[513],\"block\":[516]}]]],[\"dso-responsive-element.cjs\",[[1,\"dso-responsive-element\",{\"sizeAlias\":[32],\"sizeWidth\":[32],\"getSize\":[64]}]]],[\"dso-renvooi_2.cjs\",[[4,\"dso-slide-toggle\",{\"checked\":[4],\"disabled\":[4],\"accessibleLabel\":[1,\"accessible-label\"],\"labelledbyId\":[1,\"labelledby-id\"],\"identifier\":[1],\"hasVisibleLabel\":[32]}],[1,\"dso-renvooi\",{\"value\":[1]}]]]]"), options);
 });
 exports.setNonce = index.setNonce;

package/dist/cjs/dso-toolkit.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-toolkit.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,6MAAe,CAAC;AACrC,EAAE,MAAM,IAAI,GAAiE,EAAE,CAAC;AAChF,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AACtD,GAAG;AACH,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/\n Stencil Client Patch Browser v4.23.2 \| MIT Licensed \| https://stenciljs.com\n /\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($\|\\\\?\|#)`).test(s.src) \|\| s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm \|\| {})[\"data-opts\"] \|\| {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/!__STENCIL_LAZY_DATA__/], options);\n});\n"],"version":3}
1	+ {"file":"dso-toolkit.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,6MAAe,CAAC;AACrC,EAAE,MAAM,IAAI,GAAiE,EAAE,CAAC;AAChF,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AACtD,GAAG;AACH,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/\n Stencil Client Patch Browser v4.25.1 \| MIT Licensed \| https://stenciljs.com\n /\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($\|\\\\?\|#)`).test(s.src) \|\| s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm \|\| {})[\"data-opts\"] \|\| {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/!__STENCIL_LAZY_DATA__/], options);\n});\n"],"version":3}

package/dist/cjs/dso-tree-view.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-52cc9a2a.js');
+const index = require('./index-57504611.js');
 const clsx = require('./clsx-fc789adc.js');
 const DsoTreeItem = ({ owner, ancestors, item, index: index$1, level, setSize, }) => {

package/dist/cjs/dso-viewer-grid.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-52cc9a2a.js');
+const index = require('./index-57504611.js');
 const clsx = require('./clsx-fc789adc.js');
 const index$1 = require('./index-a49786b9.js');
@@ -56,14 +56,24 @@ const ViewerGridFilterpanelButtons = ({ onApply, onCancel, }) => (index.h("div",
         index.h("span", null, "Toepassen"),
         index.h("dso-icon", { icon: "chevron-right" }))));
-const Filterpanel = ({ ref, onApply, onCancel }) => (index.h("dialog", { id: "filterpanel", class: "filterpanel", ref: ref, onCancel: (e) => {
+const Filterpanel = ({ title, mode, ref, onApply, onCancel, dsoCloseFilterpanel, }) => (index.h("dialog", { id: "filterpanel", class: clsx.clsx(`filterpanel-${mode}`, "filterpanel"), ref: ref, onCancel: (e) => {
         e.preventDefault();
-        onCancel(e);
-    } },
+        if (mode === "vrk") {
+            onCancel(e);
+        }
+        else {
+            dsoCloseFilterpanel(e);
+        }
+    } }, mode === "vrk" ? (index.h(index.Fragment, null,
     index.h("h1", null, "Uw keuzes"),
     index.h(ViewerGridFilterpanelButtons, { onApply: onApply, onCancel: onCancel }),
     index.h("slot", { name: "filterpanel" }),
-    index.h(ViewerGridFilterpanelButtons, { onApply: onApply, onCancel: onCancel })));
+    index.h(ViewerGridFilterpanelButtons, { onApply: onApply, onCancel: onCancel }))) : (index.h(index.Fragment, null,
+    title && index.h("h3", null, title),
+    index.h("button", { type: "button", class: "dso-close", onClick: dsoCloseFilterpanel },
+        index.h("dso-icon", { icon: "times" }),
+        index.h("span", { class: "sr-only" }, "Sluiten")),
+    index.h("slot", { name: "filterpanel" })))));
 const MainPanel = ({ mode, tabView, mainSize, documentPanelOpen, mainPanelExpanded, mainPanelHidden, shrinkMain, expandMain, toggleMainPanel, dsoMainSizeChangeAnimationEnd, }) => (index.h("div", { class: clsx.clsx("dso-main-panel", {
         compact: !tabView && documentPanelOpen && !mainPanelExpanded,
@@ -95,7 +105,7 @@ const Overlay = ({ ref, dsoCloseOverlay }) => (index.h("dialog", { class: "overl
         index.h("span", { class: "sr-only" }, "sluiten")),
     index.h("slot", { name: "overlay" })));
-const viewerGridCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([mode=vdk]) .overlay {\n  block-size: calc(100% - 32px);\n  margin-block: 16px;\n  margin-inline: auto 16px;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n  outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n  outline: 0;\n}\n.shrink,\n.expand,\n.overlay-close-button {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n  color: #173521;\n}\n.shrink.dso-align,\n.expand.dso-align,\n.overlay-close-button.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.shrink.dso-truncate,\n.expand.dso-truncate,\n.overlay-close-button.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\n.shrink svg.di.di-chevron-down + span:not(.sr-only),\n.shrink svg.di.di-chevron-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-chevron-down,\n.shrink span:not(.sr-only) + svg.di.di-chevron-up,\n.expand svg.di.di-chevron-down + span:not(.sr-only),\n.expand svg.di.di-chevron-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-chevron-down,\n.expand span:not(.sr-only) + svg.di.di-chevron-up,\n.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\n.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),\n.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),\n.shrink svg.di.di-angle-down + span:not(.sr-only),\n.shrink svg.di.di-angle-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-angle-down,\n.shrink span:not(.sr-only) + svg.di.di-angle-up,\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],\n.expand dso-icon[icon=chevron-left] + span:not(.sr-only),\n.expand dso-icon[icon=chevron-right] + span:not(.sr-only),\n.expand svg.di.di-angle-down + span:not(.sr-only),\n.expand svg.di.di-angle-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-angle-down,\n.expand span:not(.sr-only) + svg.di.di-angle-up,\n.expand span:not(.sr-only) + dso-icon[icon=chevron-left],\n.expand span:not(.sr-only) + dso-icon[icon=chevron-right],\n.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),\n.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n  vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n  cursor: pointer;\n}\n\n.overlay-close-button {\n  position: absolute;\n  inset-block-start: 8px;\n  inset-inline-end: 16px;\n}\n\n.content.invisible {\n  visibility: hidden;\n}\n\n.dso-main-panel .content,\n.dso-document-panel .content {\n  block-size: 100%;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n\n.dso-main-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n  z-index: 100;\n}\n.dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {\n  inset-inline-start: -432px;\n}\n.dso-main-panel.compact, .dso-main-panel.contracted {\n  flex-shrink: unset;\n  flex-grow: unset;\n  position: absolute;\n  transition: none;\n}\n.dso-main-panel.expanded.collapsed {\n  position: absolute;\n  block-size: 100%;\n}\n.dso-main-panel .dso-filterblok-address {\n  font-weight: bold;\n  margin-block: 8px;\n  margin-inline: 0;\n}\n.dso-main-panel .sizing-buttons,\n.dso-main-panel .toggle-button {\n  inset-inline-start: calc(100% + 1px);\n  transition: inset-inline-start 200ms ease-in;\n  padding-block: 0 8px;\n  padding-inline: 0 4px;\n}\n.dso-main-panel .sizing-buttons button,\n.dso-main-panel .toggle-button button {\n  border-end-end-radius: 4px;\n  border-start-end-radius: 4px;\n}\n\n.dso-document-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n  z-index: 100;\n}\n.dso-document-panel .sizing-buttons {\n  inset-block-start: auto;\n  inset-block-end: 16px;\n  inset-inline-end: calc(100% + 1px);\n  transition: inset-inline-end 200ms ease-in;\n  padding-block: 0 8px;\n  padding-inline: 4px 0;\n}\n.dso-document-panel .sizing-buttons button {\n  border-end-start-radius: 4px;\n  border-start-start-radius: 4px;\n}\n\n.sizing-buttons,\n.toggle-button {\n  overflow-x: hidden;\n  position: absolute;\n  inset-block-start: 16px;\n  inline-size: 44px;\n  z-index: -1;\n}\n.sizing-buttons button,\n.toggle-button button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible,\n.toggle-button button:focus,\n.toggle-button button:focus-visible {\n  outline-offset: 2px;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n  outline: 0;\n}\n.sizing-buttons button,\n.toggle-button button {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button,\n.toggle-button button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.sizing-buttons button:hover,\n.toggle-button button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover,\n.toggle-button button[disabled],\n.toggle-button button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.sizing-buttons button.dso-small,\n.toggle-button button.dso-small {\n  line-height: 1rem;\n}\n.sizing-buttons button.dso-small dso-icon,\n.sizing-buttons button.dso-small svg.di, .sizing-buttons button.dso-small.extern::after, .sizing-buttons button.dso-small.download::after, .sizing-buttons button.dso-small.dso-spinner::before,\n.toggle-button button.dso-small dso-icon,\n.toggle-button button.dso-small svg.di,\n.toggle-button button.dso-small.extern::after,\n.toggle-button button.dso-small.download::after,\n.toggle-button button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.sizing-buttons button.dso-small.dso-spinner-left::before,\n.toggle-button button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button.dso-small.dso-spinner-right::after,\n.toggle-button button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button > span,\n.toggle-button button > span {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled],\n.toggle-button button.dso-spinner-left[disabled],\n.toggle-button button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before,\n.toggle-button button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after,\n.toggle-button button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button,\n.toggle-button button {\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n  flex: 0 0 100%;\n  block-size: 40px;\n  min-inline-size: auto;\n  inline-size: 40px;\n}\n.sizing-buttons button:hover dso-icon,\n.toggle-button button:hover dso-icon {\n  color: #fff;\n}\n.sizing-buttons button:focus-visible,\n.toggle-button button:focus-visible {\n  outline-offset: -1px;\n}\n\n.map {\n  block-size: 100%;\n  inline-size: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.filterpanel,\n.overlay {\n  background-color: #fff;\n  border: 0;\n  block-size: 100%;\n  margin-block: 0;\n  max-block-size: 100vh;\n  overflow-y: auto;\n  z-index: 101;\n}\n\n.filterpanel {\n  padding-block: 8px;\n  padding-inline: 16px;\n  inset-inline-start: 0;\n}\n@media screen and (max-width: 768px) {\n  .filterpanel {\n    inline-size: 100vw;\n  }\n  .filterpanel::before {\n    display: none !important;\n  }\n}\n.filterpanel h1 {\n  color: #275937;\n  margin-block-end: 16px;\n  margin-block-start: 24px;\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n@media screen and (min-width: 480px) {\n  .filterpanel h1 {\n    font-size: 2rem;\n  }\n}\n\n.overlay {\n  padding-block: 40px 8px;\n  padding-inline: 16px;\n  inset-inline-end: 0;\n  inline-size: 624px;\n}\n.overlay::backdrop {\n  background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 624px) {\n  .overlay {\n    inline-size: 100vw;\n  }\n}\n\n.filterpanel-buttons {\n  text-align: end;\n}\n.filterpanel-buttons .cancel-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .cancel-button {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.filterpanel-buttons .cancel-button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.dso-small {\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.dso-small dso-icon,\n.filterpanel-buttons .cancel-button.dso-small svg.di, .filterpanel-buttons .cancel-button.dso-small.extern::after, .filterpanel-buttons .cancel-button.dso-small.download::after, .filterpanel-buttons .cancel-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .apply-button {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.filterpanel-buttons .apply-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-small {\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.dso-small dso-icon,\n.filterpanel-buttons .apply-button.dso-small svg.di, .filterpanel-buttons .apply-button.dso-small.extern::after, .filterpanel-buttons .apply-button.dso-small.download::after, .filterpanel-buttons .apply-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n  margin-inline-start: 16px;\n}\n\n@media screen and (min-width: 808px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 375px;\n    min-inline-size: 0;\n    max-inline-size: 375px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 375px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 0;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 624px;\n    min-inline-size: 375px;\n    max-inline-size: 624px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 624px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 375px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 60%;\n    min-inline-size: 768px;\n    max-inline-size: 1024px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 768px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 768px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host {\n    display: flex;\n    block-size: 100vh;\n    overflow: hidden;\n    position: relative;\n  }\n  :host .dso-main-panel.compact,\n  :host .dso-main-panel.expanded {\n    flex-basis: unset;\n    min-inline-size: unset;\n    max-inline-size: unset;\n    inline-size: 440px;\n  }\n  :host .dso-main-panel.compact .content,\n  :host .dso-main-panel.expanded .content {\n    block-size: auto;\n    overflow-y: auto;\n  }\n}\n@media screen and (min-width: 808px) {\n  .dso-main-panel,\n  .dso-document-panel {\n    box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  }\n  .dso-main-panel .content,\n  .dso-document-panel .content {\n    overflow-y: auto;\n  }\n}\n@media screen and (min-width: 808px) {\n  .filterpanel {\n    box-shadow: 2px 0 5px #666;\n    margin-inline: 0 auto;\n    max-inline-size: 896px;\n    inline-size: calc(100vw - 40px);\n  }\n  .filterpanel::before {\n    content: \"\";\n    display: block;\n    position: fixed;\n    inset-block-start: 0;\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    inset-inline-start: 896px;\n    background-color: rgba(0, 0, 0, 0.5);\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 936px) {\n  .filterpanel::before {\n    inset-inline-start: auto;\n    inline-size: 40px;\n  }\n}\n@media screen and (min-width: 808px) {\n  .overlay {\n    box-shadow: -2px 0 5px #666;\n    margin-inline: auto 0;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar {\n    min-block-size: 32px;\n  }\n  .dso-navbar .dso-navbar-header {\n    float: inline-start;\n  }\n  .dso-navbar .dso-navbar-toggle {\n    border-radius: 4px;\n    min-inline-size: auto;\n    padding-block: 5px;\n    padding-inline: 0;\n  }\n  .dso-navbar .dso-navbar-toggle dso-icon,\n  .dso-navbar .dso-navbar-toggle svg.di {\n    margin-inline-start: 8px;\n    margin-inline-end: 8px;\n  }\n}\n@media screen and (max-width: 807.99px) and (min-width: 992px) {\n  .dso-navbar .dso-navbar-toggle {\n    display: none;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {\n    margin-inline-end: 8rem;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-nav {\n    list-style: none;\n    margin-block-end: 0;\n    padding-inline-start: 0;\n  }\n  .dso-nav > li > button {\n    border: 0;\n    background-color: transparent;\n  }\n  .dso-nav > li > a,\n  .dso-nav > li > button {\n    display: block;\n  }\n  .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,\n  .dso-nav > li > button,\n  .dso-nav > li > button:hover,\n  .dso-nav > li > button:focus,\n  .dso-nav > li > button:visited {\n    color: #275937;\n  }\n  .dso-nav > li.dso-active > a,\n  .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,\n  .dso-nav > li.is-active > button {\n    border-block-end: 4px solid #8b4a6a;\n    font-weight: bold;\n  }\n  .dso-nav.dso-nav-main > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    text-decoration: none;\n  }\n  .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,\n  .dso-nav.dso-nav-main > li > button:hover,\n  .dso-nav.dso-nav-main > li > button:focus-visible,\n  .dso-nav.dso-nav-main > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    font-size: 1.25em;\n    line-height: 1;\n    margin-block-start: 8px;\n    padding-block: 8px 7px;\n    padding-inline: 16px;\n  }\n  .dso-nav.dso-nav-sub > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    text-decoration: none;\n  }\n  .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,\n  .dso-nav.dso-nav-sub > li > button:hover,\n  .dso-nav.dso-nav-sub > li > button:focus-visible,\n  .dso-nav.dso-nav-sub > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    font-size: 1rem;\n    margin-block-start: 4px;\n    padding-block: 4px 3px;\n    padding-inline: 8px;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar {\n    padding-inline: 16px;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-nav {\n    border-block-end: 1px solid #ccc;\n    display: flex;\n    gap: 16px;\n    margin-block-start: 0;\n    inline-size: calc(100vw - 32px);\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-tertiary {\n    display: inline-block;\n    font-size: 1em;\n    font-weight: 500;\n    margin-block-end: 0;\n    text-decoration: none;\n    touch-action: manipulation;\n    text-align: start;\n    user-select: none;\n    vertical-align: middle;\n  }\n  .dso-tertiary:focus, .dso-tertiary:focus-visible {\n    outline-offset: 2px;\n  }\n  .dso-tertiary:active {\n    outline: 0;\n  }\n  .dso-tertiary {\n    border: 0;\n    color: #39870c;\n    line-height: 1;\n    padding: 0;\n    background-color: transparent;\n  }\n  .dso-tertiary[disabled] {\n    color: #afcf9d;\n  }\n  .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n    color: #39870c;\n  }\n  .dso-tertiary:not([disabled]):hover {\n    color: #275937;\n    text-decoration: underline;\n    text-underline-position: under;\n  }\n  .dso-tertiary:not([disabled]):active {\n    color: #173521;\n  }\n  .dso-tertiary.dso-align {\n    line-height: calc(1.5em - 1px);\n    padding-block: 11px;\n    padding-inline: 0;\n    position: relative;\n  }\n  .dso-tertiary.dso-truncate {\n    max-inline-size: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .dso-tertiary.dso-spinner-left::before {\n    background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    content: \"\";\n    display: inline-block;\n    block-size: 24px;\n    vertical-align: middle;\n    inline-size: 24px;\n    margin-inline-end: 8px;\n  }\n  .dso-tertiary.dso-spinner-right::after {\n    background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    content: \"\";\n    display: inline-block;\n    block-size: 24px;\n    vertical-align: middle;\n    inline-size: 24px;\n    margin-inline-start: 8px;\n  }\n  .dso-tertiary dso-icon + span:not(.sr-only),\n  .dso-tertiary svg.di + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + dso-icon,\n  .dso-tertiary span:not(.sr-only) + svg.di {\n    margin-inline-start: 8px;\n  }\n  .dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n    margin-inline-start: 4px;\n  }\n  .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n  .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n    margin-inline-start: 0;\n  }\n  .dso-tertiary dso-icon,\n  .dso-tertiary svg.di,\n  .dso-tertiary span {\n    vertical-align: middle;\n  }\n  .dso-tertiary {\n    font-weight: 300;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .filterpanel,\n  .overlay {\n    margin-inline: 0;\n    max-inline-size: 100vw;\n    inset-block-start: 0;\n    inline-size: 100vw;\n  }\n}";
+const viewerGridCss = "*,\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: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button,\n.toggle-button button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.sizing-buttons button:hover,\n.toggle-button button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover,\n.toggle-button button[disabled],\n.toggle-button button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.sizing-buttons button.dso-small,\n.toggle-button button.dso-small {\n  line-height: 1rem;\n}\n.sizing-buttons button.dso-small dso-icon,\n.sizing-buttons button.dso-small svg.di, .sizing-buttons button.dso-small.extern::after, .sizing-buttons button.dso-small.download::after, .sizing-buttons button.dso-small.dso-spinner::before,\n.toggle-button button.dso-small dso-icon,\n.toggle-button button.dso-small svg.di,\n.toggle-button button.dso-small.extern::after,\n.toggle-button button.dso-small.download::after,\n.toggle-button button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.sizing-buttons button.dso-small.dso-spinner-left::before,\n.toggle-button button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button.dso-small.dso-spinner-right::after,\n.toggle-button button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button > span,\n.toggle-button button > span {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled],\n.toggle-button button.dso-spinner-left[disabled],\n.toggle-button button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before,\n.toggle-button button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after,\n.toggle-button button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button,\n.toggle-button button {\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n  flex: 0 0 100%;\n  block-size: 40px;\n  min-inline-size: auto;\n  inline-size: 40px;\n}\n.sizing-buttons button:hover dso-icon,\n.toggle-button button:hover dso-icon {\n  color: #fff;\n}\n.sizing-buttons button:focus-visible,\n.toggle-button button:focus-visible {\n  outline-offset: -1px;\n}\n\n.map {\n  block-size: 100%;\n  inline-size: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.filterpanel,\n.overlay {\n  background-color: #fff;\n  border: 0;\n  block-size: 100%;\n  margin-block: 0;\n  max-block-size: 100vh;\n  overflow-y: auto;\n  z-index: 101;\n}\n\n.filterpanel {\n  padding-block: 8px;\n  padding-inline: 16px;\n  inset-inline-start: 0;\n}\n@media screen and (max-width: 768px) {\n  .filterpanel {\n    inline-size: 100vw;\n  }\n  .filterpanel::before {\n    display: none !important;\n  }\n}\n.filterpanel h1 {\n  color: #275937;\n  margin-block-end: 16px;\n  margin-block-start: 24px;\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n@media screen and (min-width: 480px) {\n  .filterpanel h1 {\n    font-size: 2rem;\n  }\n}\n\n.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  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .cancel-button {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.filterpanel-buttons .cancel-button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.dso-small {\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.dso-small dso-icon,\n.filterpanel-buttons .cancel-button.dso-small svg.di, .filterpanel-buttons .cancel-button.dso-small.extern::after, .filterpanel-buttons .cancel-button.dso-small.download::after, .filterpanel-buttons .cancel-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .apply-button {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.filterpanel-buttons .apply-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-small {\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.dso-small dso-icon,\n.filterpanel-buttons .apply-button.dso-small svg.di, .filterpanel-buttons .apply-button.dso-small.extern::after, .filterpanel-buttons .apply-button.dso-small.download::after, .filterpanel-buttons .apply-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n  margin-inline-start: 16px;\n}\n\n@media screen and (min-width: 808px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 375px;\n    min-inline-size: 0;\n    max-inline-size: 375px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 375px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 0;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 624px;\n    min-inline-size: 375px;\n    max-inline-size: 624px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 624px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 375px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 60%;\n    min-inline-size: 768px;\n    max-inline-size: 1024px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 768px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 768px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host {\n    display: flex;\n    block-size: 100vh;\n    overflow: hidden;\n    position: relative;\n  }\n  :host .dso-main-panel.compact,\n  :host .dso-main-panel.expanded {\n    flex-basis: unset;\n    min-inline-size: unset;\n    max-inline-size: unset;\n    inline-size: 440px;\n  }\n  :host .dso-main-panel.compact .content,\n  :host .dso-main-panel.expanded .content {\n    block-size: auto;\n    overflow-y: auto;\n  }\n}\n@media screen and (min-width: 808px) {\n  .dso-main-panel,\n  .dso-document-panel {\n    box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  }\n  .dso-main-panel .content,\n  .dso-document-panel .content {\n    overflow-y: auto;\n  }\n}\n@media screen and (min-width: 808px) {\n  .filterpanel {\n    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}\n@media screen and (min-width: 808px) {\n  .overlay {\n    box-shadow: -2px 0 5px #666;\n    margin-inline: auto 0;\n  }\n}\n@media screen and (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}\n@media screen and (max-width: 807.99px) {\n  .dso-nav {\n    list-style: none;\n    margin-block-end: 0;\n    padding-inline-start: 0;\n  }\n  .dso-nav > li > button {\n    border: 0;\n    background-color: transparent;\n  }\n  .dso-nav > li > a,\n  .dso-nav > li > button {\n    display: block;\n  }\n  .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,\n  .dso-nav > li > button,\n  .dso-nav > li > button:hover,\n  .dso-nav > li > button:focus,\n  .dso-nav > li > button:visited {\n    color: #275937;\n  }\n  .dso-nav > li.dso-active > a,\n  .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,\n  .dso-nav > li.is-active > button {\n    border-block-end: 4px solid #8b4a6a;\n    font-weight: bold;\n  }\n  .dso-nav.dso-nav-main > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    text-decoration: none;\n  }\n  .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,\n  .dso-nav.dso-nav-main > li > button:hover,\n  .dso-nav.dso-nav-main > li > button:focus-visible,\n  .dso-nav.dso-nav-main > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    font-size: 1.25em;\n    line-height: 1;\n    margin-block-start: 8px;\n    padding-block: 8px 7px;\n    padding-inline: 16px;\n  }\n  .dso-nav.dso-nav-sub > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    text-decoration: none;\n  }\n  .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,\n  .dso-nav.dso-nav-sub > li > button:hover,\n  .dso-nav.dso-nav-sub > li > button:focus-visible,\n  .dso-nav.dso-nav-sub > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    font-size: 1rem;\n    margin-block-start: 4px;\n    padding-block: 4px 3px;\n    padding-inline: 8px;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar {\n    padding-inline: 16px;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-nav {\n    border-block-end: 1px solid #ccc;\n    display: flex;\n    gap: 16px;\n    margin-block-start: 0;\n    inline-size: calc(100vw - 32px);\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-tertiary {\n    display: inline-block;\n    font-size: 1em;\n    font-weight: 500;\n    margin-block-end: 0;\n    text-decoration: none;\n    touch-action: manipulation;\n    text-align: start;\n    user-select: none;\n    vertical-align: middle;\n  }\n  .dso-tertiary:focus, .dso-tertiary:focus-visible {\n    outline-offset: 2px;\n  }\n  .dso-tertiary:active {\n    outline: 0;\n  }\n  .dso-tertiary {\n    border: 0;\n    color: #39870c;\n    line-height: 1;\n    padding: 0;\n    background-color: transparent;\n  }\n  .dso-tertiary[disabled] {\n    color: #afcf9d;\n  }\n  .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n    color: #39870c;\n  }\n  .dso-tertiary:not([disabled]):hover {\n    color: #275937;\n    text-decoration: underline;\n    text-underline-position: under;\n  }\n  .dso-tertiary:not([disabled]):active {\n    color: #173521;\n  }\n  .dso-tertiary.dso-align {\n    line-height: calc(1.5em - 1px);\n    padding-block: 11px;\n    padding-inline: 0;\n    position: relative;\n  }\n  .dso-tertiary.dso-truncate {\n    max-inline-size: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .dso-tertiary.dso-spinner-left::before {\n    background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    content: \"\";\n    display: inline-block;\n    block-size: 24px;\n    vertical-align: middle;\n    inline-size: 24px;\n    margin-inline-end: 8px;\n  }\n  .dso-tertiary.dso-spinner-right::after {\n    background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    content: \"\";\n    display: inline-block;\n    block-size: 24px;\n    vertical-align: middle;\n    inline-size: 24px;\n    margin-inline-start: 8px;\n  }\n  .dso-tertiary dso-icon + span:not(.sr-only),\n  .dso-tertiary svg.di + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + dso-icon,\n  .dso-tertiary span:not(.sr-only) + svg.di {\n    margin-inline-start: 8px;\n  }\n  .dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n    margin-inline-start: 4px;\n  }\n  .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n  .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n    margin-inline-start: 0;\n  }\n  .dso-tertiary dso-icon,\n  .dso-tertiary svg.di,\n  .dso-tertiary span {\n    vertical-align: middle;\n  }\n  .dso-tertiary {\n    font-weight: 300;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .filterpanel,\n  .overlay {\n    margin-inline: 0;\n    max-inline-size: 100vw;\n    inset-block-start: 0;\n    inline-size: 100vw;\n  }\n}\n@media screen and (max-width: 807.99px) {\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 DsoViewerGridStyle0 = viewerGridCss;
 const resizeObserver = new ResizeObserver(index$1.debounce(([entry]) => {
@@ -114,6 +124,7 @@ const ViewerGrid = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.dsoCloseOverlay = index.createEvent(this, "dsoCloseOverlay", 7);
+        this.dsoCloseFilterpanel = index.createEvent(this, "dsoCloseFilterpanel", 7);
         this.dsoFilterpanelCancel = index.createEvent(this, "dsoFilterpanelCancel", 7);
         this.dsoFilterpanelApply = index.createEvent(this, "dsoFilterpanelApply", 7);
         this.dsoActiveTabSwitch = index.createEvent(this, "dsoActiveTabSwitch", 7);
@@ -206,6 +217,18 @@ const ViewerGrid = class {
         this.handleFilterpanelCancel = (mouseEvent) => {
             this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });
         };
+        this.showFilterpanel = (mode) => {
+            var _a, _b;
+            if (mode === "vdk") {
+                // 'vdk' mode displays the filterpanel modelessly, i.e. still allowing interaction with content outside it.
+                (_a = this.filterpanel) === null || _a === void 0 ? void 0 : _a.show();
+            }
+            else {
+                // 'vrk' mode displays the filterpanel as a modal; interaction outside the dialog is blocked and the content
+                // outside it is rendered inert
+                (_b = this.filterpanel) === null || _b === void 0 ? void 0 : _b.showModal();
+            }
+        };
     }
     get filterpanelSlot() {
         return this.host.querySelector("[slot='filterpanel']");
@@ -219,15 +242,15 @@ const ViewerGrid = class {
         }
     }
     filterpanelOpenWatcher(open) {
-        var _a, _b;
+        var _a;
         if (!this.filterpanelSlot) {
             console.warn("slot 'filterpanel' has not been set");
         }
         if (open) {
-            (_a = this.filterpanel) === null || _a === void 0 ? void 0 : _a.showModal();
+            this.showFilterpanel(this.mode);
         }
         else {
-            (_b = this.filterpanel) === null || _b === void 0 ? void 0 : _b.close();
+            (_a = this.filterpanel) === null || _a === void 0 ? void 0 : _a.close();
         }
     }
     overlayOpenWatcher(open) {
@@ -261,12 +284,12 @@ const ViewerGrid = class {
         window.matchMedia(this.mediaCondition).addEventListener("change", this.changeListener);
     }
     componentDidLoad() {
-        var _a, _b;
+        var _a;
         if (this.filterpanelOpen && this.filterpanelSlot) {
-            (_a = this.filterpanel) === null || _a === void 0 ? void 0 : _a.showModal();
+            this.showFilterpanel(this.mode);
         }
         if (this.overlayOpen && this.overlaySlot) {
-            (_b = this.overlay) === null || _b === void 0 ? void 0 : _b.showModal();
+            (_a = this.overlay) === null || _a === void 0 ? void 0 : _a.showModal();
         }
         if (this.mode === "vdk" && this.mapElement instanceof HTMLDivElement) {
             resizeObserver.observe(this.mapElement);
@@ -280,7 +303,8 @@ const ViewerGrid = class {
     }
     render() {
         const tabLabels = this.mode === "vdk" ? viewerGridVdkTabs : viewerGridVrkTabs;
-        return (index.h(index.Fragment, null, this.tabView && (index.h("nav", { key: '4685452d9d8300115e48477db5adedb1d21f7856', class: "dso-navbar" }, index.h("ul", { key: '8b011fabf713a7d4c7b1b24a766617204a36a968', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (index.h("li", { key: tab, class: clsx.clsx({ "dso-active": this.activeTab === tab }) }, index.h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (index.h(MainPanel, { key: '29d464007da2d5fa4bf798ceab8ec6a8533a0cd4', 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 })), index.h(Filterpanel, { key: 'b3ae44d60ab458a19653ea82e516490d5d88422e', ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel }), (!this.tabView || (this.tabView && this.activeTab === "map")) && (index.h("div", { key: 'ce69794078b4df7b2c6476a6e0e4355027eaffc8', class: "map", ref: (element) => (this.mapElement = element) }, index.h("slot", { key: '00427952c67565a419442b722e222bdd83948cde', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (index.h(DocumentPanel, { key: '1c3bde45c75629339eb9153cb9c522a80150e17a', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), index.h(Overlay, { key: '01563fb4c677ee18c39d2498ce378b1ac85b1e87', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
+        return (index.h(index.Fragment, null, this.tabView && (index.h("nav", { key: 'b4a570fca218e0dc90e7d1e614e4423510d2b80d', class: "dso-navbar" }, index.h("ul", { key: 'a7d0b8eb852eb3b8e2deb4b5f843f27d841d09a2', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (index.h("li", { key: tab, class: clsx.clsx({ "dso-active": this.activeTab === tab }) }, index.h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (index.h(MainPanel, { key: '77d23e1a1280f18321c93e7913396a895f07ae6b', 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"))) && (index.h(Filterpanel, { key: '54a0c9df27dce99457a8554c9beda4a519a874d2', title: this.filterpanelTitle, mode: this.mode, ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel, dsoCloseFilterpanel: (e) => this.dsoCloseFilterpanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (index.h("div", { key: '04316795f2dbf17e56b4ada3fec56ebed221ddfa', class: "map", ref: (element) => (this.mapElement = element) }, index.h("slot", { key: 'ac81ce5768878de9ebbcb43c308b78e0c6a32723', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (index.h(DocumentPanel, { key: '62e3fe731443d77ff460872f6fe5a7b79ea84c48', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), index.h(Overlay, { key: 'a012c61f124356e06fd18c22a4230c555751c067', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {