@dso-toolkit/core 95.2.0 → 97.0.0-ghi-3769.0

package/dist/bundle/dso-survey-rating.js

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-DBi6XQa8.js';
-import { d as defineCustomElement$4 } from './p-DQ4k80p_.js';
-import { d as defineCustomElement$3 } from './p-D6mShNSe.js';
-import { d as defineCustomElement$2 } from './p-DZGMkIzK.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-BIShp3sw.js';
+import { d as defineCustomElement$4 } from './p-D1ciWwSo.js';
+import { d as defineCustomElement$3 } from './p-zYhsKlIm.js';
+import { d as defineCustomElement$2 } from './p-B2ZlmdWO.js';
 
-const surveyRatingCss = () => `:host {   display: block;   position: fixed;   inset-block-end: 16px;   inset-inline-start: 16px;   inline-size: 370px;   background-color: #fff;   box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);   border-radius: 4px;   z-index: 1000; } @media screen and (max-width: 480px) {   :host {     inline-size: 320px;     inset-block-end: 0;     inset-inline-start: 0;     --panel-heading-padding-inline-start: 8px;     --panel-body-padding-inline: 8px;   } }  *, *::after, *::before {   box-sizing: border-box; }  .sr-only {   position: absolute;   inline-size: 1px;   block-size: 1px;   padding: 0;   margin: -1px;   border: 0;   overflow: hidden;   clip-path: rect(0 0 0 0); }  .visual-rating-labels {   display: flex;   justify-content: space-between;   margin-block: 8px; }  input[type=radio] {   appearance: none;   cursor: pointer;   position: absolute;   margin-inline: 0;   margin-block: 0;   inset-block: 8px 0;   inset-inline: 0;   z-index: 1; }  label {   position: relative;   display: inline-flex;   align-items: center;   justify-content: center;   inline-size: 48px;   block-size: 48px;   border: 1px solid #ccc;   border-inline-end-width: 0;   padding-block-start: 8px; } @media screen and (max-width: 480px) {   label {     inline-size: 43px;     block-size: 43px;   } } label:hover {   background-color: #f2f2f2; } label:active {   background-color: #e5e5e5; } label:first-of-type {   border-radius: 4px 0 0 4px; } label:first-of-type::before {   border-radius: 3px 0 0; } label:last-of-type {   border-inline-end-width: 1px;   border-radius: 0 4px 4px 0; } label:last-of-type::before {   border-radius: 0 3px 0 0; } label::before {   content: "";   display: block;   position: absolute;   inset-block-start: 0;   block-size: 8px;   inline-size: 100%;   border-block-end: 1px solid #ccc; } label:has(input:checked) {   font-weight: bold; } label.survey-rating-1::before, label.survey-rating-1:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --link-color: currentColor;   --link-hover-color: currentColor;   --link-visited-color: currentColor; } label.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#download-wit")); } label.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit")); } label.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit")); } label.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit")); } label.survey-rating-1::before, label.survey-rating-1:has(input:checked) {   --_dso-icon-button-tertiary-color: #fff;   --_dso-icon-button-tertiary-hover-color: #e5e5e5;   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;   --_dso-button-primary-background-color: #fff;   --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-background-color: #f2f2f2;   --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-border-color: #fff;   --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-border-color: #f2f2f2;   --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-color: #191919;   --_dso-button-primary-hover-color: #191919;   --_dso-button-primary-active-color: #191919;   --_dso-button-primary-disabled-color: #666;   --_dso-button-secondary-background-color: none;   --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);   --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-background-color: none;   --_dso-button-secondary-border-color: #fff;   --_dso-button-secondary-hover-border-color: #fff;   --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);   --_dso-button-secondary-color: #fff;   --_dso-button-secondary-hover-color: #fff;   --_dso-button-secondary-active-color: #fff;   --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);   --_dso-button-tertiary-color: #fff;   --_dso-button-tertiary-hover-color: #fff;   --_dso-button-tertiary-active-color: #fff;   --_dso-button-tertiary-disabled-color: #b2b2b2;   background-color: #b62f41;   color: #fff;   border-color: #ccc; } label.survey-rating-2::before, label.survey-rating-2:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --link-color: currentColor;   --link-hover-color: currentColor;   --link-visited-color: currentColor; } label.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#download-wit")); } label.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit")); } label.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit")); } label.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit")); } label.survey-rating-2::before, label.survey-rating-2:has(input:checked) {   --_dso-icon-button-tertiary-color: #fff;   --_dso-icon-button-tertiary-hover-color: #e5e5e5;   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;   --_dso-button-primary-background-color: #fff;   --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-background-color: #f2f2f2;   --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-border-color: #fff;   --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-border-color: #f2f2f2;   --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-color: #191919;   --_dso-button-primary-hover-color: #191919;   --_dso-button-primary-active-color: #191919;   --_dso-button-primary-disabled-color: #666;   --_dso-button-secondary-background-color: none;   --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);   --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-background-color: none;   --_dso-button-secondary-border-color: #fff;   --_dso-button-secondary-hover-border-color: #fff;   --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);   --_dso-button-secondary-color: #fff;   --_dso-button-secondary-hover-color: #fff;   --_dso-button-secondary-active-color: #fff;   --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);   --_dso-button-tertiary-color: #fff;   --_dso-button-tertiary-hover-color: #fff;   --_dso-button-tertiary-active-color: #fff;   --_dso-button-tertiary-disabled-color: #b2b2b2;   background-color: #ce3f51;   color: #fff;   border-color: #ccc; } label.survey-rating-3::before, label.survey-rating-3:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --link-color: currentColor;   --link-hover-color: currentColor;   --link-visited-color: currentColor; } label.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart")); } label.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart")); } label.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart")); } label.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart")); } label.survey-rating-3::before, label.survey-rating-3:has(input:checked) {   --_dso-icon-button-tertiary-color: #191919;   --_dso-icon-button-tertiary-hover-color: #4c4c4c;   --_dso-icon-button-tertiary-active-color: #173521;   --_dso-icon-button-tertiary-disabled-color: #999;   --_dso-button-tertiary-color: #191919;   --_dso-button-tertiary-hover-color: #4c4c4c;   --_dso-button-tertiary-active-color: #173521;   --_dso-button-tertiary-disabled-color: #999;   background-color: #e17000;   color: #191919;   border-color: #ccc; } label.survey-rating-4::before, label.survey-rating-4:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --link-color: currentColor;   --link-hover-color: currentColor;   --link-visited-color: currentColor; } label.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart")); } label.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart")); } label.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart")); } label.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart")); } label.survey-rating-4::before, label.survey-rating-4:has(input:checked) {   --_dso-icon-button-tertiary-color: #191919;   --_dso-icon-button-tertiary-hover-color: #4c4c4c;   --_dso-icon-button-tertiary-active-color: #173521;   --_dso-icon-button-tertiary-disabled-color: #999;   --_dso-button-tertiary-color: #191919;   --_dso-button-tertiary-hover-color: #4c4c4c;   --_dso-button-tertiary-active-color: #173521;   --_dso-button-tertiary-disabled-color: #999;   background-color: #dcd400;   color: #191919;   border-color: #ccc; } label.survey-rating-5::before, label.survey-rating-5:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --link-color: currentColor;   --link-hover-color: currentColor;   --link-visited-color: currentColor; } label.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart")); } label.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart")); } label.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart")); } label.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart")); } label.survey-rating-5::before, label.survey-rating-5:has(input:checked) {   --_dso-icon-button-tertiary-color: #191919;   --_dso-icon-button-tertiary-hover-color: #4c4c4c;   --_dso-icon-button-tertiary-active-color: #173521;   --_dso-icon-button-tertiary-disabled-color: #999;   --_dso-button-tertiary-color: #191919;   --_dso-button-tertiary-hover-color: #4c4c4c;   --_dso-button-tertiary-active-color: #173521;   --_dso-button-tertiary-disabled-color: #999;   background-color: #79b929;   color: #191919;   border-color: #ccc; } label.survey-rating-6::before, label.survey-rating-6:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --link-color: currentColor;   --link-hover-color: currentColor;   --link-visited-color: currentColor; } label.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#download-wit")); } label.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit")); } label.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit")); } label.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit")); } label.survey-rating-6::before, label.survey-rating-6:has(input:checked) {   --_dso-icon-button-tertiary-color: #fff;   --_dso-icon-button-tertiary-hover-color: #e5e5e5;   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;   --_dso-button-primary-background-color: #fff;   --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-background-color: #f2f2f2;   --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-border-color: #fff;   --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-border-color: #f2f2f2;   --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-color: #191919;   --_dso-button-primary-hover-color: #191919;   --_dso-button-primary-active-color: #191919;   --_dso-button-primary-disabled-color: #666;   --_dso-button-secondary-background-color: none;   --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);   --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-background-color: none;   --_dso-button-secondary-border-color: #fff;   --_dso-button-secondary-hover-border-color: #fff;   --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);   --_dso-button-secondary-color: #fff;   --_dso-button-secondary-hover-color: #fff;   --_dso-button-secondary-active-color: #fff;   --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);   --_dso-button-tertiary-color: #fff;   --_dso-button-tertiary-hover-color: #fff;   --_dso-button-tertiary-active-color: #fff;   --_dso-button-tertiary-disabled-color: #b2b2b2;   background-color: #39870c;   color: #fff;   border-color: #ccc; } label.survey-rating-7::before, label.survey-rating-7:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --link-color: currentColor;   --link-hover-color: currentColor;   --link-visited-color: currentColor; } label.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#download-wit")); } label.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit")); } label.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit")); } label.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit")); } label.survey-rating-7::before, label.survey-rating-7:has(input:checked) {   --_dso-icon-button-tertiary-color: #fff;   --_dso-icon-button-tertiary-hover-color: #e5e5e5;   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;   --_dso-button-primary-background-color: #fff;   --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-background-color: #f2f2f2;   --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-border-color: #fff;   --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-border-color: #f2f2f2;   --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-color: #191919;   --_dso-button-primary-hover-color: #191919;   --_dso-button-primary-active-color: #191919;   --_dso-button-primary-disabled-color: #666;   --_dso-button-secondary-background-color: none;   --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);   --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-background-color: none;   --_dso-button-secondary-border-color: #fff;   --_dso-button-secondary-hover-border-color: #fff;   --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);   --_dso-button-secondary-color: #fff;   --_dso-button-secondary-hover-color: #fff;   --_dso-button-secondary-active-color: #fff;   --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);   --_dso-button-tertiary-color: #fff;   --_dso-button-tertiary-hover-color: #fff;   --_dso-button-tertiary-active-color: #fff;   --_dso-button-tertiary-disabled-color: #b2b2b2;   background-color: #275937;   color: #fff;   border-color: #ccc; }  button {   -webkit-appearance: button;   color: inherit;   cursor: pointer;   font: inherit;   font-family: inherit;   font-size: inherit;   line-height: inherit;   margin: 0;   overflow: visible;   text-transform: none; } button[disabled] {   cursor: default; } button::-moz-focus-inner {   border: 0;   padding: 0; } button.dso-secondary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dt-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } button.dso-secondary:focus, button.dso-secondary:focus-visible {   outline-offset: 2px; } button.dso-secondary:active {   outline: 0; } button.dso-secondary.extern::after, button.dso-secondary.download::after {   content: "";   display: inline-block; } button.dso-secondary {   background-color: var(--_dso-button-secondary-background-color, #fff);   border-color: var(--_dso-button-secondary-border-color, #39870c);   color: var(--_dso-button-secondary-color, #39870c);   float: var(--_dt-button-float-secondary, none);   border-width: 1px;   border-style: solid;   border-radius: 4px;   line-height: 1.5;   min-inline-size: 56px;   inline-size: var(--_dt-button-inline-size, auto);   padding-block: 11px;   padding-inline: 15px; } button.dso-secondary:hover {   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);   border-color: var(--_dso-button-secondary-hover-border-color, #275937);   color: var(--_dso-button-secondary-hover-color, #275937);   float: var(--_dt-button-float-secondary, none); } button.dso-secondary:active {   background-color: var(--_dso-button-secondary-active-background-color, #275937);   border-color: var(--_dso-button-secondary-active-border-color, #275937);   color: var(--_dso-button-secondary-active-color, #fff);   float: var(--_dt-button-float-secondary, none); } button.dso-secondary[disabled], button.dso-secondary[disabled]:hover {   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);   color: var(--_dso-button-secondary-disabled-color, #afcf9d);   float: var(--_dt-button-float-secondary, none); } button.dso-secondary.dso-small {   line-height: 1rem; } button.dso-secondary.dso-small dso-icon, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-secondary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-extra-small {   line-height: 1rem; } button.dso-secondary.dso-extra-small dso-icon, button.dso-secondary.dso-extra-small.extern::after, button.dso-secondary.dso-extra-small.download::after, button.dso-secondary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-secondary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-extra-small {   padding-block: 9px; } button.dso-secondary dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } button.dso-secondary span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } button.dso-secondary dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } button.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {   background-color: #fff;   border-color: #39870c;   color: #39870c; } button.dso-secondary.dso-spinner-left::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } button.dso-secondary.dso-spinner-left:not([disabled]):hover::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-spinner-right::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } button.dso-secondary.dso-spinner-right:not([disabled]):hover::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {   block-size: 16px;   inline-size: 16px; } button {   margin-block-start: 16px; }`;
+const surveyRatingCss = () => `:host {   display: block;   position: fixed;   inset-block-end: 16px;   inset-inline-start: 16px;   inline-size: 370px;   background-color: #fff;   box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);   border-radius: 4px;   z-index: 1000; } @media screen and (max-width: 480px) {   :host {     inline-size: 320px;     inset-block-end: 0;     inset-inline-start: 0;     --panel-heading-padding-inline-start: 8px;     --panel-body-padding-inline: 8px;   } }  *, *::after, *::before {   box-sizing: border-box; }  .sr-only {   position: absolute;   inline-size: 1px;   block-size: 1px;   padding: 0;   margin: -1px;   border: 0;   overflow: hidden;   clip-path: rect(0 0 0 0); }  .visual-rating-labels {   display: flex;   justify-content: space-between;   margin-block: 8px; }  input[type=radio] {   appearance: none;   cursor: pointer;   position: absolute;   margin-inline: 0;   margin-block: 0;   inset-block: 8px 0;   inset-inline: 0;   z-index: 1; }  label {   position: relative;   display: inline-flex;   align-items: center;   justify-content: center;   inline-size: 48px;   block-size: 48px;   border: 1px solid #ccc;   border-inline-end-width: 0;   padding-block-start: 8px; } @media screen and (max-width: 480px) {   label {     inline-size: 43px;     block-size: 43px;   } } label:hover {   background-color: #f2f2f2; } label:active {   background-color: #e5e5e5; } label:first-of-type {   border-radius: 4px 0 0 4px; } label:first-of-type::before {   border-radius: 3px 0 0; } label:last-of-type {   border-inline-end-width: 1px;   border-radius: 0 4px 4px 0; } label:last-of-type::before {   border-radius: 0 3px 0 0; } label::before {   content: "";   display: block;   position: absolute;   inset-block-start: 0;   block-size: 8px;   inline-size: 100%;   border-block-end: 1px solid #ccc; } label:has(input:checked) {   font-weight: bold; } label.survey-rating-1::before, label.survey-rating-1:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --link-color: currentColor;   --link-hover-color: currentColor;   --link-visited-color: currentColor; } label.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#download-wit")); } label.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit")); } label.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit")); } label.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit")); } label.survey-rating-1::before, label.survey-rating-1:has(input:checked) {   --_dso-icon-button-secondary-active-color: #fff;   --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-secondary-toggled-color: #fff;   --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2);   --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-color: #f2f2f2;   --_dso-icon-button-tertiary-hover-color: #fff;   --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-tertiary-toggled-color: #fff;   --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;   --_dso-button-primary-background-color: #fff;   --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-background-color: #f2f2f2;   --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-border-color: #fff;   --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-border-color: #f2f2f2;   --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-color: #191919;   --_dso-button-primary-hover-color: #191919;   --_dso-button-primary-active-color: #191919;   --_dso-button-primary-disabled-color: #666;   --_dso-button-secondary-background-color: none;   --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);   --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-background-color: none;   --_dso-button-secondary-border-color: #fff;   --_dso-button-secondary-hover-border-color: #fff;   --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);   --_dso-button-secondary-color: #fff;   --_dso-button-secondary-hover-color: #fff;   --_dso-button-secondary-active-color: #fff;   --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);   --_dso-button-tertiary-color: #fff;   --_dso-button-tertiary-hover-color: #fff;   --_dso-button-tertiary-active-color: #fff;   --_dso-button-tertiary-disabled-color: #b2b2b2;   background-color: #b62f41;   color: #fff;   border-color: #ccc; } label.survey-rating-2::before, label.survey-rating-2:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --link-color: currentColor;   --link-hover-color: currentColor;   --link-visited-color: currentColor; } label.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#download-wit")); } label.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit")); } label.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit")); } label.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit")); } label.survey-rating-2::before, label.survey-rating-2:has(input:checked) {   --_dso-icon-button-secondary-active-color: #fff;   --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-secondary-toggled-color: #fff;   --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2);   --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-color: #f2f2f2;   --_dso-icon-button-tertiary-hover-color: #fff;   --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-tertiary-toggled-color: #fff;   --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;   --_dso-button-primary-background-color: #fff;   --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-background-color: #f2f2f2;   --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-border-color: #fff;   --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-border-color: #f2f2f2;   --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-color: #191919;   --_dso-button-primary-hover-color: #191919;   --_dso-button-primary-active-color: #191919;   --_dso-button-primary-disabled-color: #666;   --_dso-button-secondary-background-color: none;   --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);   --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-background-color: none;   --_dso-button-secondary-border-color: #fff;   --_dso-button-secondary-hover-border-color: #fff;   --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);   --_dso-button-secondary-color: #fff;   --_dso-button-secondary-hover-color: #fff;   --_dso-button-secondary-active-color: #fff;   --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);   --_dso-button-tertiary-color: #fff;   --_dso-button-tertiary-hover-color: #fff;   --_dso-button-tertiary-active-color: #fff;   --_dso-button-tertiary-disabled-color: #b2b2b2;   background-color: #ce3f51;   color: #fff;   border-color: #ccc; } label.survey-rating-3::before, label.survey-rating-3:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --link-color: currentColor;   --link-hover-color: currentColor;   --link-visited-color: currentColor; } label.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart")); } label.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart")); } label.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart")); } label.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart")); } label.survey-rating-3::before, label.survey-rating-3:has(input:checked) {   --_dso-icon-button-secondary-active-color: #fff;   --_dso-icon-button-secondary-active-background-color: #1f472c;   --_dso-icon-button-secondary-toggled-color: #fff;   --_dso-icon-button-secondary-toggled-background-color: #275937;   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;   --_dso-icon-button-tertiary-color: #191919;   --_dso-icon-button-tertiary-hover-color: #4c4c4c;   --_dso-icon-button-tertiary-active-color: #1f472c;   --_dso-icon-button-tertiary-toggled-color: #275937;   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;   --_dso-icon-button-tertiary-disabled-color: #999;   --_dso-button-tertiary-color: #191919;   --_dso-button-tertiary-hover-color: #4c4c4c;   --_dso-button-tertiary-active-color: #173521;   --_dso-button-tertiary-disabled-color: #999;   background-color: #e17000;   color: #191919;   border-color: #ccc; } label.survey-rating-4::before, label.survey-rating-4:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --link-color: currentColor;   --link-hover-color: currentColor;   --link-visited-color: currentColor; } label.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart")); } label.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart")); } label.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart")); } label.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart")); } label.survey-rating-4::before, label.survey-rating-4:has(input:checked) {   --_dso-icon-button-secondary-active-color: #fff;   --_dso-icon-button-secondary-active-background-color: #1f472c;   --_dso-icon-button-secondary-toggled-color: #fff;   --_dso-icon-button-secondary-toggled-background-color: #275937;   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;   --_dso-icon-button-tertiary-color: #191919;   --_dso-icon-button-tertiary-hover-color: #4c4c4c;   --_dso-icon-button-tertiary-active-color: #1f472c;   --_dso-icon-button-tertiary-toggled-color: #275937;   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;   --_dso-icon-button-tertiary-disabled-color: #999;   --_dso-button-tertiary-color: #191919;   --_dso-button-tertiary-hover-color: #4c4c4c;   --_dso-button-tertiary-active-color: #173521;   --_dso-button-tertiary-disabled-color: #999;   background-color: #dcd400;   color: #191919;   border-color: #ccc; } label.survey-rating-5::before, label.survey-rating-5:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --link-color: currentColor;   --link-hover-color: currentColor;   --link-visited-color: currentColor; } label.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart")); } label.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart")); } label.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart")); } label.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart")); } label.survey-rating-5::before, label.survey-rating-5:has(input:checked) {   --_dso-icon-button-secondary-active-color: #fff;   --_dso-icon-button-secondary-active-background-color: #1f472c;   --_dso-icon-button-secondary-toggled-color: #fff;   --_dso-icon-button-secondary-toggled-background-color: #275937;   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;   --_dso-icon-button-tertiary-color: #191919;   --_dso-icon-button-tertiary-hover-color: #4c4c4c;   --_dso-icon-button-tertiary-active-color: #1f472c;   --_dso-icon-button-tertiary-toggled-color: #275937;   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;   --_dso-icon-button-tertiary-disabled-color: #999;   --_dso-button-tertiary-color: #191919;   --_dso-button-tertiary-hover-color: #4c4c4c;   --_dso-button-tertiary-active-color: #173521;   --_dso-button-tertiary-disabled-color: #999;   background-color: #79b929;   color: #191919;   border-color: #ccc; } label.survey-rating-6::before, label.survey-rating-6:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --link-color: currentColor;   --link-hover-color: currentColor;   --link-visited-color: currentColor; } label.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#download-wit")); } label.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit")); } label.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit")); } label.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit")); } label.survey-rating-6::before, label.survey-rating-6:has(input:checked) {   --_dso-icon-button-secondary-active-color: #fff;   --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-secondary-toggled-color: #fff;   --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2);   --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-color: #f2f2f2;   --_dso-icon-button-tertiary-hover-color: #fff;   --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-tertiary-toggled-color: #fff;   --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;   --_dso-button-primary-background-color: #fff;   --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-background-color: #f2f2f2;   --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-border-color: #fff;   --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-border-color: #f2f2f2;   --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-color: #191919;   --_dso-button-primary-hover-color: #191919;   --_dso-button-primary-active-color: #191919;   --_dso-button-primary-disabled-color: #666;   --_dso-button-secondary-background-color: none;   --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);   --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-background-color: none;   --_dso-button-secondary-border-color: #fff;   --_dso-button-secondary-hover-border-color: #fff;   --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);   --_dso-button-secondary-color: #fff;   --_dso-button-secondary-hover-color: #fff;   --_dso-button-secondary-active-color: #fff;   --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);   --_dso-button-tertiary-color: #fff;   --_dso-button-tertiary-hover-color: #fff;   --_dso-button-tertiary-active-color: #fff;   --_dso-button-tertiary-disabled-color: #b2b2b2;   background-color: #39870c;   color: #fff;   border-color: #ccc; } label.survey-rating-7::before, label.survey-rating-7:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --link-color: currentColor;   --link-hover-color: currentColor;   --link-visited-color: currentColor; } label.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#download-wit")); } label.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit")); } label.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit")); } label.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit")); } label.survey-rating-7::before, label.survey-rating-7:has(input:checked) {   --_dso-icon-button-secondary-active-color: #fff;   --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-secondary-toggled-color: #fff;   --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2);   --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-color: #f2f2f2;   --_dso-icon-button-tertiary-hover-color: #fff;   --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-tertiary-toggled-color: #fff;   --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;   --_dso-button-primary-background-color: #fff;   --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-background-color: #f2f2f2;   --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-border-color: #fff;   --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-border-color: #f2f2f2;   --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-color: #191919;   --_dso-button-primary-hover-color: #191919;   --_dso-button-primary-active-color: #191919;   --_dso-button-primary-disabled-color: #666;   --_dso-button-secondary-background-color: none;   --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);   --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-background-color: none;   --_dso-button-secondary-border-color: #fff;   --_dso-button-secondary-hover-border-color: #fff;   --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);   --_dso-button-secondary-color: #fff;   --_dso-button-secondary-hover-color: #fff;   --_dso-button-secondary-active-color: #fff;   --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);   --_dso-button-tertiary-color: #fff;   --_dso-button-tertiary-hover-color: #fff;   --_dso-button-tertiary-active-color: #fff;   --_dso-button-tertiary-disabled-color: #b2b2b2;   background-color: #275937;   color: #fff;   border-color: #ccc; }  button {   -webkit-appearance: button;   color: inherit;   cursor: pointer;   font: inherit;   font-family: inherit;   font-size: inherit;   line-height: inherit;   margin: 0;   overflow: visible;   text-transform: none; } button[disabled] {   cursor: default; } button::-moz-focus-inner {   border: 0;   padding: 0; } button.dso-secondary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dt-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } button.dso-secondary:focus, button.dso-secondary:focus-visible {   outline-offset: 2px; } button.dso-secondary:active {   outline: 0; } button.dso-secondary.extern::after, button.dso-secondary.download::after {   content: "";   display: inline-block; } button.dso-secondary {   background-color: var(--_dso-button-secondary-background-color, #fff);   border-color: var(--_dso-button-secondary-border-color, #39870c);   color: var(--_dso-button-secondary-color, #39870c);   float: var(--_dt-button-float-secondary, none);   border-width: 1px;   border-style: solid;   border-radius: 4px;   line-height: 1.5;   min-inline-size: 56px;   inline-size: var(--_dt-button-inline-size, auto);   padding-block: 11px;   padding-inline: 15px; } button.dso-secondary:hover {   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);   border-color: var(--_dso-button-secondary-hover-border-color, #275937);   color: var(--_dso-button-secondary-hover-color, #275937);   float: var(--_dt-button-float-secondary, none); } button.dso-secondary:active {   background-color: var(--_dso-button-secondary-active-background-color, #275937);   border-color: var(--_dso-button-secondary-active-border-color, #275937);   color: var(--_dso-button-secondary-active-color, #fff);   float: var(--_dt-button-float-secondary, none); } button.dso-secondary[disabled], button.dso-secondary[disabled]:hover {   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);   color: var(--_dso-button-secondary-disabled-color, #afcf9d);   float: var(--_dt-button-float-secondary, none); } button.dso-secondary.dso-small {   line-height: 1rem; } button.dso-secondary.dso-small dso-icon, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-secondary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-extra-small {   line-height: 1rem; } button.dso-secondary.dso-extra-small dso-icon, button.dso-secondary.dso-extra-small.extern::after, button.dso-secondary.dso-extra-small.download::after, button.dso-secondary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-secondary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-extra-small {   padding-block: 9px; } button.dso-secondary dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } button.dso-secondary span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } button.dso-secondary dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } button.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {   background-color: #fff;   border-color: #39870c;   color: #39870c; } button.dso-secondary.dso-spinner-left::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } button.dso-secondary.dso-spinner-left:not([disabled]):hover::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-spinner-right::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } button.dso-secondary.dso-spinner-right:not([disabled]):hover::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {   block-size: 16px;   inline-size: 16px; } button {   margin-block-start: 16px; }`;
 
 const SurveyRating = /*@__PURE__*/ proxyCustomElement(class SurveyRating extends H {
     constructor(registerHost) {
@@ -33,10 +33,10 @@ const SurveyRating = /*@__PURE__*/ proxyCustomElement(class SurveyRating extends
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: '886a7873e55563734f1f92bbc16acda7444c3fd5', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '1322fbf91f68d407b780874718426bce6f85a84f', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '8476d2c687efb7e123fa68647a36816a890c1d6d' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '2d19c6840a218db161201403d416f308823a95e1', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '89ae14ee04ca0180e4491030cf2cae5d0e128c65', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '1a97088de2e8e5b124e1a034e173ef23aeed3395' }, "Heel moeilijk"), h("span", { key: '53c3a2d92e833254faa16955b835d29417309fe7' }, "Heel makkelijk")), h("div", { key: 'c5b5b9bc780ddcfde1349a8cf92dd3fc72bdd37f', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '1677870899bb965a52c65231446680da2bd1bcd2', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'f7c31ea7cef21dad9c1cfa58a382e730ccc9447e', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '4040f276b4f74426f712068e17bcac8973d24655' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '1ba28f0e44795ce41b86d510f0c04c59e693e487', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '6d9b4a7ab6a468117bb2efa88494b3553862fa9e', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '4fed647d59637e56d3f8ee5ecfa8b0ca7fe79b8e' }, "Heel moeilijk"), h("span", { key: '7bf78ac6e98558e6a7f6e48620f3fff910af83e1' }, "Heel makkelijk")), h("div", { key: '76b0ad0bf0d91a200410cc0a28660cf65d175043', role: "radiogroup" }, ratings.map((rating, index) => {
             const ratingNumber = index + 1;
             return (h(Fragment, null, h("label", { class: `survey-rating-${ratingNumber}` }, ratingNumber, h("span", { class: "sr-only" }, rating), h("input", { type: "radio", name: "rating", value: ratingNumber, checked: ratingNumber === this.rating, onChange: (e) => this.handleChange(e) }))));
-        })), h("button", { key: 'b5d82b6b382a2c7bc376aabc460e9b9d83e0de0c', type: "submit", class: "dso-secondary" }, h("span", { key: '7bceeca13f9a7f589b32ae456cb1671b30d3e1c0' }, "Antwoord verzenden")))));
+        })), h("button", { key: '0faabc7920e2b36079dc259a59456013a752bfb0', type: "submit", class: "dso-secondary" }, h("span", { key: 'a72c193c90971b95cfdecc2d61ceb5f480f688a1' }, "Antwoord verzenden")))));
     }
     static get style() { return surveyRatingCss(); }
 }, [1, "dso-survey-rating"]);

package/dist/bundle/dso-tab.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-DBi6XQa8.js';
+import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-BIShp3sw.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.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/bundle/dso-table.js

@@ -1,4 +1,4 @@
-import { T as Table, d as defineCustomElement$1 } from './p-ClIxAe6b.js';
+import { T as Table, d as defineCustomElement$1 } from './p-C332B2dN.js';
 
 const DsoTable = Table;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-tabs.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, f as forceUpdate, h, c as Host, t as transformTag } from './p-DBi6XQa8.js';
+import { p as proxyCustomElement, H, f as forceUpdate, h, c as Host, t as transformTag } from './p-BIShp3sw.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}}`;
 
@@ -64,7 +64,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends H {
         this.mutationObserver?.disconnect();
     }
     render() {
-        return (h(Host, { key: 'eda4f3cabd4f4a373ebf5e5b2fce9c5a336f4680' }, h("div", { key: '445a0b6a745a1f45eca44ca59def6f4557904748', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: 'd344d2c68cc0bd6d0abbea591a7ffa22b17dbdf7' })), h("div", { key: 'c17a1774b3cf81c30e07c0c8446f05d8a6e86b95', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'c32d940c2e5fe01b67919d7253bb5d2666146f6f', name: "panel" }))));
+        return (h(Host, { key: 'b9568d7dc32c55b0b54c37b28756274bb57cbacf' }, h("div", { key: '314522c3eba0fb007ce5d214d309ab20a4a9e53c', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '0ea47d9bd541ee8657b5c9be2f24b6f641051c17' })), h("div", { key: 'd7a531a6ee574d7deb3455c3f43d16f40a0faf1b', role: "tabpanel", tabindex: "0" }, h("slot", { key: '65e458b46fcf351079f225fb49336ffcc5dd7982', name: "panel" }))));
     }
     get host() { return this; }
     static get style() { return tabsCss(); }

package/dist/bundle/dso-tijdreis-banner.js

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h, F as Fragment, t as transformTag } from './p-DBi6XQa8.js';
-import { d as defineCustomElement$2 } from './p-DQ4k80p_.js';
+import { p as proxyCustomElement, H, h, F as Fragment, t as transformTag } from './p-BIShp3sw.js';
+import { d as defineCustomElement$2 } from './p-D1ciWwSo.js';
 
-const tijdreisBannerCss = () => `*,*::after,*::before{box-sizing:border-box}:host{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"))}:host{--_dso-icon-button-tertiary-color:#fff;--_dso-icon-button-tertiary-hover-color:#e5e5e5;--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:#8b4a6a;color:#fff;display:grid;block-size:100%;padding-block:8px;padding-inline:24px}@media screen and (min-width: 768px){:host{align-items:center;justify-content:center;gap:8px;grid-template-columns:auto auto auto;grid-template-areas:"icon slot button"}}@media screen and (max-width: 767px){:host{align-items:start;grid-template-columns:max-content auto;grid-template-areas:"icon slot" ". button";padding-block:16px;gap:16px 8px}}:host dso-icon{grid-area:icon}:host slot:not([name]){grid-area:slot;margin-inline-end:10px}:host ::slotted([slot=button]){--_dso-button-secondary-background-color:transparent;--_dso-button-secondary-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-background-color:rgba(235, 225, 235, 0.2);--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-background-color:rgba(235, 225, 235, 0.4);--_dso-button-secondary-active-border-color:rgba(235, 225, 235, 0.3);--_dso-button-secondary-disabled-background-color:transparent;--_dso-button-secondary-disabled-color:rgba(235, 225, 235, 0.7);--_dso-button-secondary-disabled-border-color:rgba(235, 225, 235, 0.7)}@media screen and (min-width: 768px){:host ::slotted([slot=button]){margin-inline-start:32px !important;}}@media screen and (max-width: 767px){:host ::slotted([slot=button]){grid-area:button;justify-self:start}}`;
+const tijdreisBannerCss = () => `*,*::after,*::before{box-sizing:border-box}:host{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"))}:host{--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:rgba(255, 255, 255, 0.2);--_dso-icon-button-secondary-toggled-hover-background-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-color:#f2f2f2;--_dso-icon-button-tertiary-hover-color:#fff;--_dso-icon-button-tertiary-active-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-tertiary-toggled-color:#fff;--_dso-icon-button-tertiary-toggled-hover-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:#8b4a6a;color:#fff;display:grid;block-size:100%;padding-block:8px;padding-inline:24px}@media screen and (min-width: 768px){:host{align-items:center;justify-content:center;gap:8px;grid-template-columns:auto auto auto;grid-template-areas:"icon slot button"}}@media screen and (max-width: 767px){:host{align-items:start;grid-template-columns:max-content auto;grid-template-areas:"icon slot" ". button";padding-block:16px;gap:16px 8px}}:host dso-icon{grid-area:icon}:host slot:not([name]){grid-area:slot;margin-inline-end:10px}:host ::slotted([slot=button]){--_dso-button-secondary-background-color:transparent;--_dso-button-secondary-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-background-color:rgba(235, 225, 235, 0.2);--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-background-color:rgba(235, 225, 235, 0.4);--_dso-button-secondary-active-border-color:rgba(235, 225, 235, 0.3);--_dso-button-secondary-disabled-background-color:transparent;--_dso-button-secondary-disabled-color:rgba(235, 225, 235, 0.7);--_dso-button-secondary-disabled-border-color:rgba(235, 225, 235, 0.7)}@media screen and (min-width: 768px){:host ::slotted([slot=button]){margin-inline-start:32px !important;}}@media screen and (max-width: 767px){:host ::slotted([slot=button]){grid-area:button;justify-self:start}}`;
 
 const TijdreisBanner = /*@__PURE__*/ proxyCustomElement(class TijdreisBanner extends H {
     constructor(registerHost) {
@@ -12,7 +12,7 @@ const TijdreisBanner = /*@__PURE__*/ proxyCustomElement(class TijdreisBanner ext
         this.__attachShadow();
     }
     render() {
-        return (h(Fragment, { key: 'b65c1136049ad6b7918279ca9fa86a121a3a7229' }, h("dso-icon", { key: 'd43d86fe908ab5e18cb8a0c9f0250581df87cd69', icon: "clock-outline" }), h("slot", { key: 'cec5c61d9cb0607709a4c91ff4002096b2b5beca' }), h("slot", { key: '7593a8ee780a5223cfd95e94b89a515e64a96596', name: "button" })));
+        return (h(Fragment, { key: '66e8423f1014107ccb518d0dc3c81930997a65d7' }, h("dso-icon", { key: '39b66a7b7f7ab1f75d3b31793ba1bd40a732ea66', icon: "clock-outline" }), h("slot", { key: '2d0cc6f630dd371fd3f81a8372c38b79bde279ff' }), h("slot", { key: '5044fee1b5aa973c5fda7bbb99679acf44a946bb', name: "button" })));
     }
     static get style() { return tijdreisBannerCss(); }
 }, [257, "dso-tijdreis-banner"]);

package/dist/bundle/dso-tooltip.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-DBi6XQa8.js';
+import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-BIShp3sw.js';
 import { c as clsx } from './p-ChV9xqsO.js';
 import { d as debounce$1 } from './p-baWVwd8J.js';
 
@@ -2022,7 +2022,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends H {
         }
     }
     render() {
-        return (h(Host, { key: '9a75836090377cb7879137ee38c035fa26cc80bb', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '052ac3644a784807e9ae1f4cdff9768c2c963ea5', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '7fe84463e825db6555683ec5ec67cb3379c5e597', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'f6d16f4d5f3a8cb1bd32df5f1648e70e286210c7', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '75b902c9d43ca01c48973c5043cb55a387c292f6' })))));
+        return (h(Host, { key: '5d392cd8db6f4fcb40ff59caa691a7d5d934a131', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '780a52b475cb6e70de39d0b8504838a12ebec54c', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '563bbf50ff151581d813b9733eabfe399600b6bd', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'a9aef05954ee275aaa14d72ff98aedc4c914127c', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: 'ffdfb31efc7f3006f9c42c0fe0e45d18698641c6' })))));
     }
     activatePopper() {
         this.hidden = false;

package/dist/bundle/dso-tree-view.js

@@ -1,7 +1,7 @@
-import { h, F as Fragment, p as proxyCustomElement, H, d as createEvent, t as transformTag } from './p-DBi6XQa8.js';
+import { h, F as Fragment, p as proxyCustomElement, H, d as createEvent, t as transformTag } from './p-BIShp3sw.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { d as defineCustomElement$3 } from './p-DQ4k80p_.js';
-import { d as defineCustomElement$2 } from './p-C_yE-yT4.js';
+import { d as defineCustomElement$3 } from './p-D1ciWwSo.js';
+import { d as defineCustomElement$2 } from './p-ChO20JhC.js';
 
 const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize, }) => (h("li", { key: item.id, class: clsx("tree-item", { "has-child": item.hasItems, "is-expanded": !!item.open && !!item.items?.length }), role: "none" }, h("div", { class: "tree-branch-control" }, item.hasItems ? (h("div", { onClick: (e) => owner.itemClick(e, ancestors, item) }, h("dso-icon", { icon: item.open ? "minus-square-outline" : "plus-square-outline" }))) : (h("dso-icon", null))), h("p", { class: clsx("tree-content", { active: item.active }, { selected: item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? "" + (!!item.open && !!item.items?.length) : undefined, "aria-current": item.active ? "true" : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? "true" : undefined, "data-item-id": item.id, onClick: (e) => owner.itemClick(e, ancestors, item) }, item.selected && h("span", { class: "sr-only" }, "Resultaat: "), item.href ? (h("a", { href: item.href, tabindex: "-1" }, item.label)) : (h("span", null, item.label)), item.icons?.map((icon) => (h("dso-icon", { icon: icon.icon, title: icon.label })))), item.open && (h(Fragment, null, item.hasItems && !item.items && item.loading ? (h("dso-progress-indicator", { size: "small", label: "Resultaten laden: een moment geduld alstublieft." })) : (h("ul", { role: "group" }, item.items?.map((childItem, childIndex, org) => (h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: childIndex, level: level + 1, setSize: org.length })))))))));
 
@@ -185,7 +185,7 @@ const TreeView = /*@__PURE__*/ proxyCustomElement(class TreeView extends H {
         return false;
     }
     render() {
-        return (h("div", { key: 'e90b2994f145f8ac781f67f53e1f65859dce9ef4', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '1f84ee285eb80bbb485c147bbd3f32de2e324e9c', role: "tree", "aria-label": "Objectenboom" }, this.collection?.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
+        return (h("div", { key: '8fa6eac8e8c49987f8d84e3eb5d6a36cca0aa4fc', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '7e985edbbd740375b87cdc4de51acf898ce1a653', role: "tree", "aria-label": "Objectenboom" }, this.collection?.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
     }
     static get style() { return treeViewCss(); }
 }, [1, "dso-tree-view", {

package/dist/bundle/dso-viewer-grid.js

@@ -1,4 +1,4 @@
-import { h, F as Fragment, p as proxyCustomElement, H, d as createEvent, t as transformTag } from './p-DBi6XQa8.js';
+import { h, F as Fragment, p as proxyCustomElement, H, d as createEvent, t as transformTag } from './p-BIShp3sw.js';
 import { c as clsx } from './p-ChV9xqsO.js';
 import { d as debounce } from './p-baWVwd8J.js';
 
@@ -37,7 +37,7 @@ const FilterPanel = ({ open, title, ref, dsoCloseFilterPanel, }) => {
     return (h("dialog", { class: "filter-panel", ref: ref, inert: !open, "aria-label": label }, open && (h(Fragment, null, h("h3", { class: { "sr-only": !title } }, label), h("dso-icon-button", { class: "dso-close", icon: "cross", variant: "tertiary", label: "Sluiten", onDsoClick: dsoCloseFilterPanel }), h("slot", { name: "filter-panel" })))));
 };
 
-const MainPanel = ({ tabView, mainSize, documentPanelOpen, mainPanelExpanded, mainPanelHidden, toggleMainPanel, dsoMainSizeChangeAnimationEnd, }) => (h("div", { class: clsx("dso-main-panel", {
+const MainPanel = ({ tabView, mainSize, documentPanelOpen, mainPanelExpanded, mainPanelHidden, toggleMainPanel, dsoMainSizeChangeAnimationEnd, printFilterPanel, }) => (h("div", { class: clsx("dso-main-panel", {
         compact: !tabView && documentPanelOpen && !mainPanelExpanded,
         contracted: !tabView && !documentPanelOpen && !mainPanelExpanded,
         expanded: !tabView && documentPanelOpen && mainPanelExpanded,
@@ -46,14 +46,14 @@ const MainPanel = ({ tabView, mainSize, documentPanelOpen, mainPanelExpanded, ma
         if (e.propertyName === "flex-basis") {
             dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });
         }
-    } }, !tabView && documentPanelOpen && (h("div", { class: "toggle-button" }, h("dso-icon-button", { variant: "map", label: `Zoeken paneel ${mainPanelHidden ? "tonen" : "verbergen"}`, icon: mainPanelHidden ? "chevron-right" : "chevron-left", onDsoClick: toggleMainPanel }))), h("div", { class: clsx("content", { invisible: mainPanelHidden }) }, h("slot", { name: "main" }))));
+    } }, !tabView && documentPanelOpen && (h("div", { class: "toggle-button" }, h("dso-icon-button", { variant: "map", label: `Zoeken paneel ${mainPanelHidden ? "tonen" : "verbergen"}`, icon: mainPanelHidden ? "chevron-right" : "chevron-left", onDsoClick: toggleMainPanel }))), h("div", { class: clsx("content", { invisible: mainPanelHidden }) }, printFilterPanel, h("slot", { name: "main" }))));
 
 const Overlay = ({ ref, dsoCloseOverlay }) => (h("dialog", { class: "overlay", ref: ref, onCancel: (e) => {
         e.preventDefault();
         dsoCloseOverlay(e);
     } }, h("dso-icon-button", { class: "overlay-close-button", icon: "cross", variant: "tertiary", label: "Sluiten", onDsoClick: dsoCloseOverlay }), h("slot", { name: "overlay" })));
 
-const viewerGridCss = () => `*, *::after, *::before {   box-sizing: border-box; }  :host .overlay {   block-size: calc(100% - 32px);   margin-block: 16px;   margin-inline: auto 16px; } :host .dso-main-panel {   transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in; }  button {   -webkit-appearance: button;   color: inherit;   cursor: pointer;   font: inherit;   font-family: inherit;   font-size: inherit;   line-height: inherit;   margin: 0;   overflow: visible;   text-transform: none; } button[disabled] {   cursor: default; } button::-moz-focus-inner {   border: 0;   padding: 0; }  .sr-only {   position: absolute;   inline-size: 1px;   block-size: 1px;   padding: 0;   margin: -1px;   border: 0;   overflow: hidden;   clip-path: rect(0 0 0 0); }  .overlay-close-button {   position: absolute;   line-height: 1;   inset-block-start: 8px;   inset-inline-end: 16px; }  .content.invisible {   visibility: hidden; }  .viewer-grid-columns {   position: relative; }  .dso-main-panel .content, .dso-document-panel .content {   block-size: 100%;   padding-block: 0;   padding-inline: 16px; }  .dso-main-panel {   background-color: #fff;   flex-shrink: 0;   flex-grow: 0;   position: relative;   transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;   z-index: 100; } .dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {   inset-inline-start: -432px; } .dso-main-panel.compact, .dso-main-panel.contracted {   flex-shrink: unset;   flex-grow: unset;   position: absolute;   transition: none; } .dso-main-panel.expanded.collapsed {   position: absolute;   block-size: 100%; } .dso-main-panel .sizing-buttons, .dso-main-panel .toggle-button {   inset-inline-start: calc(100% + 1px);   transition: inset-inline-start 200ms ease-in;   padding-block: 0 8px;   padding-inline: 0 4px; } .dso-main-panel .toggle-button {   --_dt-icon-button-border-start-start-radius: 0;   --_dt-icon-button-border-end-start-radius: 0; }  .dso-document-panel {   background-color: #fff;   flex-shrink: 0;   flex-grow: 0;   position: relative;   transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;   z-index: 100; } .dso-document-panel .sizing-buttons {   inset-block-start: auto;   inset-block-end: 16px;   inset-inline-end: calc(100% + 1px);   transition: inset-inline-end 200ms ease-in;   padding-block: 0 8px;   padding-inline: 4px 0; } .dso-document-panel .sizing-buttons .shrink, .dso-document-panel .sizing-buttons .expand {   --_dt-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px;   --_dt-icon-button-border-start-end-radius: 0;   --_dt-icon-button-border-end-end-radius: 0; }  .sizing-buttons, .toggle-button {   overflow-x: hidden;   position: absolute;   inset-block-start: 16px;   inline-size: 44px;   z-index: -1; }  .map {   block-size: 100%;   inline-size: 100%;   overflow: hidden;   position: relative; }  .filter-panel, .overlay {   background-color: #fff;   border: 0;   block-size: 100%;   margin-block: 0;   max-block-size: 100vh;   overflow-y: auto;   z-index: 101; }  .filter-panel {   display: block;   position: absolute;   padding-block: 8px;   padding-inline: 16px;   inset-block-start: 0;   block-size: 100%;   inset-inline-start: -380px;   inline-size: 100%;   transition: inset-inline-start 200ms ease-in; } @media screen and (max-width: 768px) {   .filter-panel {     inline-size: 100vw;   }   .filter-panel::before {     display: none !important;   } } @media screen and (min-width: 992px) {   .filter-panel {     max-inline-size: 380px;   } } .filter-panel[open] {   inset-inline-start: 0;   box-shadow: none;   border-inline-end: 1px solid #e5e5e5; } .filter-panel h3 {   color: #275937; } .filter-panel .dso-close {   --_dso-icon-button-tertiary-color: #191919;   position: absolute;   inset-block-start: 20px;   inset-inline-end: 20px; }  .overlay {   padding-block: 40px 8px;   padding-inline: 16px;   inset-inline-end: 0;   inline-size: 624px; } .overlay::backdrop {   background-color: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 624px) {   .overlay {     inline-size: 100vw;   } }  @media screen and (min-width: 1032px) {   :host([main-size=small]) .dso-main-panel,   :host([document-panel-size=small]) .dso-document-panel {     flex-basis: 375px;     min-inline-size: 0;     max-inline-size: 375px;   } } @media screen and (min-width: 1032px) and (max-width: 375px) {   :host([main-size=small]) .dso-main-panel,   :host([document-panel-size=small]) .dso-document-panel {     flex-basis: 100vw;     max-inline-size: 100vw;     min-inline-size: 0;     transition: none;   } } @media screen and (min-width: 1032px) {   :host([main-size=medium]) .dso-main-panel,   :host([document-panel-size=medium]) .dso-document-panel {     flex-basis: 624px;     min-inline-size: 375px;     max-inline-size: 624px;   } } @media screen and (min-width: 1032px) and (max-width: 624px) {   :host([main-size=medium]) .dso-main-panel,   :host([document-panel-size=medium]) .dso-document-panel {     flex-basis: 100vw;     max-inline-size: 100vw;     min-inline-size: 375px;     transition: none;   } } @media screen and (min-width: 1032px) {   :host([main-size=large]) .dso-main-panel,   :host([document-panel-size=large]) .dso-document-panel {     flex-basis: 60%;     min-inline-size: 768px;     max-inline-size: 1024px;   } } @media screen and (min-width: 1032px) and (max-width: 768px) {   :host([main-size=large]) .dso-main-panel,   :host([document-panel-size=large]) .dso-document-panel {     flex-basis: 100vw;     max-inline-size: 100vw;     min-inline-size: 768px;     transition: none;   } } @media screen and (min-width: 1032px) {   :host {     display: flex;     flex-direction: column;     block-size: 100vh;     overflow: clip;     position: relative;   }   :host .dso-main-panel.compact,   :host .dso-main-panel.expanded {     flex-basis: unset;     min-inline-size: unset;     max-inline-size: unset;     inline-size: 440px;   }   :host .viewer-grid-columns {     display: flex;     overflow: hidden;     flex-grow: 1;   }   .dso-main-panel,   .dso-document-panel {     box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);   }   .dso-main-panel .content,   .dso-document-panel .content {     overflow-y: auto;   }   .filter-panel {     margin-inline: 0 auto;     inline-size: calc(100vw - 40px);   }   .filter-panel[open] {     border-inline-end: 1px solid #e5e5e5;   }   .overlay {     box-shadow: -2px 0 5px #666;     margin-inline: auto 0;   } } @media screen and (min-width: 1032px) and (max-width: 1031.99px) {   :host([filter-panel-open]) .dso-main-panel {     margin-inline-start: 380px;     max-inline-size: calc(100vw - 380px);   }   .filter-panel {     inline-size: 380px;     inset-inline-start: -380px;   } } @media screen and (max-width: 1031.99px) {   .dso-navbar {     min-block-size: 32px;   }   .dso-navbar .dso-navbar-header {     float: inline-start;   }   .dso-navbar .dso-navbar-toggle {     border-radius: 4px;     min-inline-size: auto;     padding-block: 5px;     padding-inline: 0;   }   .dso-navbar .dso-navbar-toggle dso-icon {     margin-inline-start: 8px;     margin-inline-end: 8px;   } } @media screen and (max-width: 1031.99px) and (min-width: 992px) {   .dso-navbar .dso-navbar-toggle {     display: none;   } } @media screen and (max-width: 1031.99px) {   .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {     margin-inline-end: 8rem;   }   .dso-nav {     list-style: none;     margin-block-end: 0;     padding-inline-start: 0;   }   .dso-nav > li > button {     border: 0;     background-color: transparent;   }   .dso-nav > li > a,   .dso-nav > li > button {     display: block;   }   .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,   .dso-nav > li > button,   .dso-nav > li > button:hover,   .dso-nav > li > button:focus,   .dso-nav > li > button:visited {     color: #275937;   }   .dso-nav > li.dso-active > a,   .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,   .dso-nav > li.is-active > button {     border-block-end: 4px solid #8b4a6a;     font-weight: bold;   }   .dso-nav.dso-nav-main > li {     display: inline-block;   }   .dso-nav.dso-nav-main > li > a,   .dso-nav.dso-nav-main > li > button {     text-decoration: none;   }   .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,   .dso-nav.dso-nav-main > li > button:hover,   .dso-nav.dso-nav-main > li > button:focus-visible,   .dso-nav.dso-nav-main > li > button:active {     text-decoration: underline;   }   .dso-nav.dso-nav-main > li > a,   .dso-nav.dso-nav-main > li > button {     font-size: 1.25em;     line-height: 1;     margin-block-start: 8px;     padding-block: 8px 7px;     padding-inline: 16px;   }   .dso-nav.dso-nav-sub > li {     display: inline-block;   }   .dso-nav.dso-nav-sub > li > a,   .dso-nav.dso-nav-sub > li > button {     text-decoration: none;   }   .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,   .dso-nav.dso-nav-sub > li > button:hover,   .dso-nav.dso-nav-sub > li > button:focus-visible,   .dso-nav.dso-nav-sub > li > button:active {     text-decoration: underline;   }   .dso-nav.dso-nav-sub > li > a,   .dso-nav.dso-nav-sub > li > button {     font-size: 1rem;     margin-block-start: 4px;     padding-block: 4px 3px;     padding-inline: 8px;   }   .dso-navbar {     padding-inline: 16px;   }   .dso-nav {     border-block-end: 1px solid #ccc;     display: flex;     gap: 16px;     margin-block-start: 0;     inline-size: calc(100vw - 32px);   }   .dso-tertiary {     display: inline-block;     font-size: 1em;     font-weight: 500;     margin-block-end: 0;     text-decoration: none;     touch-action: manipulation;     text-align: var(--_dt-button-text-align, start);     user-select: none;     vertical-align: middle;     background-clip: padding-box;   }   .dso-tertiary:focus, .dso-tertiary:focus-visible {     outline-offset: 2px;   }   .dso-tertiary:active {     outline: 0;   }   .dso-tertiary {     display: inline-block;     font-size: 1em;     font-weight: 500;     margin-block-end: 0;     text-decoration: none;     touch-action: manipulation;     text-align: var(--_dt-button-text-align, start);     user-select: none;     vertical-align: middle;     background-clip: padding-box;   }   .dso-tertiary:focus, .dso-tertiary:focus-visible {     outline-offset: 2px;   }   .dso-tertiary:active {     outline: 0;   }   .dso-tertiary {     background-color: var(--_dso-button-tertiary-background-color, );     border-color: var(--_dso-button-tertiary-border-color, );     color: var(--_dso-button-tertiary-color, #39870c);     float: var(--_dt-button-float-tertiary, none);     border-width: 1px;     border-style: solid;     border-radius: 4px;     line-height: 1.5;     min-inline-size: auto;     inline-size: var(--_dt-button-inline-size, auto);     padding-block: 11px;     padding-inline: 15px;   }   .dso-tertiary:hover {     background-color: var(--_dso-button-tertiary-hover-background-color, );     border-color: var(--_dso-button-tertiary-hover-border-color, );     color: var(--_dso-button-tertiary-hover-color, #275937);     float: var(--_dt-button-float-tertiary, none);   }   .dso-tertiary:active {     background-color: var(--_dso-button-tertiary-active-background-color, );     border-color: var(--_dso-button-tertiary-active-border-color, );     color: var(--_dso-button-tertiary-active-color, #173521);     float: var(--_dt-button-float-tertiary, none);   }   .dso-tertiary[disabled], .dso-tertiary[disabled]:hover {     background-color: var(--_dso-button-tertiary-disabled-background-color, );     border-color: var(--_dso-button-tertiary-disabled-border-color, );     color: var(--_dso-button-tertiary-disabled-color, #afcf9d);     float: var(--_dt-button-float-tertiary, none);   }   .dso-tertiary.dso-small {     line-height: 1rem;   }   .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before {     margin-block-end: -4px;     margin-block-start: -4px;   }   .dso-tertiary.dso-small.dso-spinner-left::before {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-small.dso-spinner-right::after {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-extra-small {     line-height: 1rem;   }   .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before {     margin-block-end: -4px;     margin-block-start: -4px;   }   .dso-tertiary.dso-extra-small.dso-spinner-left::before {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-extra-small.dso-spinner-right::after {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-extra-small {     padding-block: 9px;   }   .dso-tertiary {     border: 0;     line-height: 1;     padding-inline: 0;     padding-block: var(--_dt-button-padding-block-tertiary, 0);     background-color: transparent;   }   .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {     color: #39870c;   }   .dso-tertiary:not([disabled]):hover {     text-decoration: underline;     text-underline-position: under;   }   .dso-tertiary.dso-align {     line-height: calc(1.5em - 1px);     padding-block: 11px;     padding-inline: 0;     position: relative;   }   .dso-tertiary.dso-truncate {     max-inline-size: 100%;     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap;   }   .dso-tertiary.dso-spinner-left::before {     background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");     background-repeat: no-repeat;     content: "";     display: inline-block;     block-size: 24px;     vertical-align: middle;     inline-size: 24px;     margin-inline-end: 8px;   }   .dso-tertiary.dso-spinner-right::after {     background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");     background-repeat: no-repeat;     content: "";     display: inline-block;     block-size: 24px;     vertical-align: middle;     inline-size: 24px;     margin-inline-start: 8px;   }   .dso-tertiary dso-icon + span:not(.sr-only),   .dso-tertiary span:not(.sr-only) + dso-icon {     margin-inline-start: 8px;   }   .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),   .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),   .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],   .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {     margin-inline-start: 0;   }   .dso-tertiary dso-icon,   .dso-tertiary span {     vertical-align: middle;   }   .dso-tertiary {     font-weight: 300;   }   .overlay {     inline-size: calc(100vw - 32px);   }   .filter-panel,   .overlay {     margin-inline: 0;     max-inline-size: 100vw;     inset-block-start: 0;   }   .filter-panel {     inset-inline-start: -100vw;     inline-size: 100vw;   } } @media screen and (min-width: 992px) {   :host([filter-panel-open]) .dso-main-panel {     margin-inline-start: 380px;   } }`;
+const viewerGridCss = () => `*, *::after, *::before {   box-sizing: border-box; }  :host .overlay {   block-size: calc(100% - 32px);   margin-block: 16px;   margin-inline: auto 16px; } :host .dso-main-panel {   transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in; }  button {   -webkit-appearance: button;   color: inherit;   cursor: pointer;   font: inherit;   font-family: inherit;   font-size: inherit;   line-height: inherit;   margin: 0;   overflow: visible;   text-transform: none; } button[disabled] {   cursor: default; } button::-moz-focus-inner {   border: 0;   padding: 0; }  .sr-only {   position: absolute;   inline-size: 1px;   block-size: 1px;   padding: 0;   margin: -1px;   border: 0;   overflow: hidden;   clip-path: rect(0 0 0 0); }  .overlay-close-button {   position: absolute;   line-height: 1;   inset-block-start: 8px;   inset-inline-end: 16px; }  .content.invisible {   visibility: hidden; }  .viewer-grid-columns {   position: relative; }  .dso-main-panel .content, .dso-document-panel .content {   block-size: 100%;   padding-block: 0;   padding-inline: 16px; }  .dso-main-panel {   background-color: #fff;   flex-shrink: 0;   flex-grow: 0;   position: relative;   transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;   z-index: 100; } .dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {   inset-inline-start: -432px; } .dso-main-panel.compact, .dso-main-panel.contracted {   flex-shrink: unset;   flex-grow: unset;   position: absolute;   transition: none; } .dso-main-panel.expanded.collapsed {   position: absolute;   block-size: 100%; } .dso-main-panel .sizing-buttons, .dso-main-panel .toggle-button {   inset-inline-start: calc(100% + 1px);   transition: inset-inline-start 200ms ease-in;   padding-block: 0 8px;   padding-inline: 0 4px; } .dso-main-panel .toggle-button {   --_dt-icon-button-border-start-start-radius: 0;   --_dt-icon-button-border-end-start-radius: 0; }  .dso-document-panel {   background-color: #fff;   flex-shrink: 0;   flex-grow: 0;   position: relative;   transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;   z-index: 100; } .dso-document-panel .sizing-buttons {   inset-block-start: auto;   inset-block-end: 16px;   inset-inline-end: calc(100% + 1px);   transition: inset-inline-end 200ms ease-in;   padding-block: 0 8px;   padding-inline: 4px 0; } .dso-document-panel .sizing-buttons .shrink, .dso-document-panel .sizing-buttons .expand {   --_dt-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px;   --_dt-icon-button-border-start-end-radius: 0;   --_dt-icon-button-border-end-end-radius: 0; }  .sizing-buttons, .toggle-button {   overflow-x: hidden;   position: absolute;   inset-block-start: 16px;   inline-size: 44px;   z-index: -1; }  .map-area {   block-size: 100%;   inline-size: 100%;   overflow: hidden;   position: relative; }  .map {   position: absolute;   inset: 0;   overflow: hidden; }  .legend {   position: absolute;   inset-block-end: 16px;   inset-inline-start: 16px;   z-index: 1; }  .filter-panel, .overlay {   background-color: #fff;   border: 0;   block-size: 100%;   margin-block: 0;   max-block-size: 100vh;   overflow-y: auto;   z-index: 101; }  .filter-panel {   display: block;   position: absolute;   padding-block: 8px;   padding-inline: 16px;   inset-block-start: 0;   block-size: 100%;   inset-inline-start: -380px;   inline-size: 100%;   transition: inset-inline-start 200ms ease-in; } @media (max-width: 768px) {   .filter-panel {     inline-size: 100vw;   }   .filter-panel::before {     display: none !important;   } } @media (min-width: 992px) {   .filter-panel {     max-inline-size: 380px;   } } .filter-panel[open] {   inset-inline-start: 0;   box-shadow: none;   border-inline-end: 1px solid #e5e5e5; } .filter-panel h3 {   color: #275937; } .filter-panel .dso-close {   --_dso-icon-button-tertiary-color: #191919;   position: absolute;   inset-block-start: 20px;   inset-inline-end: 20px; }  .overlay {   padding-block: 40px 8px;   padding-inline: 16px;   inset-inline-end: 0;   inline-size: 624px; } .overlay::backdrop {   background-color: rgba(0, 0, 0, 0.5); } @media (max-width: 624px) {   .overlay {     inline-size: 100vw;   } }  @media (min-width: 1032px) {   :host([main-size=small]) .dso-main-panel,   :host([document-panel-size=small]) .dso-document-panel {     flex-basis: 375px;     min-inline-size: 0;     max-inline-size: 375px;   } } @media (min-width: 1032px) and (max-width: 375px) {   :host([main-size=small]) .dso-main-panel,   :host([document-panel-size=small]) .dso-document-panel {     flex-basis: 100vw;     max-inline-size: 100vw;     min-inline-size: 0;     transition: none;   } } @media (min-width: 1032px) {   :host([main-size=medium]) .dso-main-panel,   :host([document-panel-size=medium]) .dso-document-panel {     flex-basis: 624px;     min-inline-size: 375px;     max-inline-size: 624px;   } } @media (min-width: 1032px) and (max-width: 624px) {   :host([main-size=medium]) .dso-main-panel,   :host([document-panel-size=medium]) .dso-document-panel {     flex-basis: 100vw;     max-inline-size: 100vw;     min-inline-size: 375px;     transition: none;   } } @media (min-width: 1032px) {   :host([main-size=large]) .dso-main-panel,   :host([document-panel-size=large]) .dso-document-panel {     flex-basis: 60%;     min-inline-size: 768px;     max-inline-size: 1024px;   } } @media (min-width: 1032px) and (max-width: 768px) {   :host([main-size=large]) .dso-main-panel,   :host([document-panel-size=large]) .dso-document-panel {     flex-basis: 100vw;     max-inline-size: 100vw;     min-inline-size: 768px;     transition: none;   } } @media (min-width: 1032px) {   :host {     display: flex;     flex-direction: column;     block-size: 100vh;     overflow: clip;     position: relative;   }   :host .dso-main-panel.compact,   :host .dso-main-panel.expanded {     flex-basis: unset;     min-inline-size: unset;     max-inline-size: unset;     inline-size: 440px;   }   :host .viewer-grid-columns {     display: flex;     overflow: hidden;     flex-grow: 1;   }   .dso-main-panel,   .dso-document-panel {     box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);   }   .dso-main-panel .content,   .dso-document-panel .content {     overflow-y: auto;   }   .filter-panel {     margin-inline: 0 auto;     inline-size: calc(100vw - 40px);   }   .filter-panel[open] {     border-inline-end: 1px solid #e5e5e5;   }   .overlay {     box-shadow: -2px 0 5px #666;     margin-inline: auto 0;   } } @media (min-width: 1032px) and (max-width: 1031.99px) {   :host([filter-panel-open]) .dso-main-panel {     margin-inline-start: 380px;     max-inline-size: calc(100vw - 380px);   }   .filter-panel {     inline-size: 380px;     inset-inline-start: -380px;   } } @media (max-width: 1031.99px) {   .dso-navbar {     min-block-size: 32px;   }   .dso-navbar .dso-navbar-header {     float: inline-start;   }   .dso-navbar .dso-navbar-toggle {     border-radius: 4px;     min-inline-size: auto;     padding-block: 5px;     padding-inline: 0;   }   .dso-navbar .dso-navbar-toggle dso-icon {     margin-inline-start: 8px;     margin-inline-end: 8px;   } } @media screen and (max-width: 1031.99px) and (min-width: 992px) {   .dso-navbar .dso-navbar-toggle {     display: none;   } } @media (max-width: 1031.99px) {   .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {     margin-inline-end: 8rem;   }   .dso-nav {     list-style: none;     margin-block-end: 0;     padding-inline-start: 0;   }   .dso-nav > li > button {     border: 0;     background-color: transparent;   }   .dso-nav > li > a,   .dso-nav > li > button {     display: block;   }   .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,   .dso-nav > li > button,   .dso-nav > li > button:hover,   .dso-nav > li > button:focus,   .dso-nav > li > button:visited {     color: #275937;   }   .dso-nav > li.dso-active > a,   .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,   .dso-nav > li.is-active > button {     border-block-end: 4px solid #8b4a6a;     font-weight: bold;   }   .dso-nav.dso-nav-main > li {     display: inline-block;   }   .dso-nav.dso-nav-main > li > a,   .dso-nav.dso-nav-main > li > button {     text-decoration: none;   }   .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,   .dso-nav.dso-nav-main > li > button:hover,   .dso-nav.dso-nav-main > li > button:focus-visible,   .dso-nav.dso-nav-main > li > button:active {     text-decoration: underline;   }   .dso-nav.dso-nav-main > li > a,   .dso-nav.dso-nav-main > li > button {     font-size: 1.25em;     line-height: 1;     margin-block-start: 8px;     padding-block: 8px 7px;     padding-inline: 16px;   }   .dso-nav.dso-nav-sub > li {     display: inline-block;   }   .dso-nav.dso-nav-sub > li > a,   .dso-nav.dso-nav-sub > li > button {     text-decoration: none;   }   .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,   .dso-nav.dso-nav-sub > li > button:hover,   .dso-nav.dso-nav-sub > li > button:focus-visible,   .dso-nav.dso-nav-sub > li > button:active {     text-decoration: underline;   }   .dso-nav.dso-nav-sub > li > a,   .dso-nav.dso-nav-sub > li > button {     font-size: 1rem;     margin-block-start: 4px;     padding-block: 4px 3px;     padding-inline: 8px;   }   .dso-navbar {     padding-inline: 16px;   }   .dso-nav {     border-block-end: 1px solid #ccc;     display: flex;     gap: 16px;     margin-block-start: 0;     inline-size: calc(100vw - 32px);   }   .dso-tertiary {     display: inline-block;     font-size: 1em;     font-weight: 500;     margin-block-end: 0;     text-decoration: none;     touch-action: manipulation;     text-align: var(--_dt-button-text-align, start);     user-select: none;     vertical-align: middle;     background-clip: padding-box;   }   .dso-tertiary:focus, .dso-tertiary:focus-visible {     outline-offset: 2px;   }   .dso-tertiary:active {     outline: 0;   }   .dso-tertiary {     display: inline-block;     font-size: 1em;     font-weight: 500;     margin-block-end: 0;     text-decoration: none;     touch-action: manipulation;     text-align: var(--_dt-button-text-align, start);     user-select: none;     vertical-align: middle;     background-clip: padding-box;   }   .dso-tertiary:focus, .dso-tertiary:focus-visible {     outline-offset: 2px;   }   .dso-tertiary:active {     outline: 0;   }   .dso-tertiary {     background-color: var(--_dso-button-tertiary-background-color, );     border-color: var(--_dso-button-tertiary-border-color, );     color: var(--_dso-button-tertiary-color, #39870c);     float: var(--_dt-button-float-tertiary, none);     border-width: 1px;     border-style: solid;     border-radius: 4px;     line-height: 1.5;     min-inline-size: auto;     inline-size: var(--_dt-button-inline-size, auto);     padding-block: 11px;     padding-inline: 15px;   }   .dso-tertiary:hover {     background-color: var(--_dso-button-tertiary-hover-background-color, );     border-color: var(--_dso-button-tertiary-hover-border-color, );     color: var(--_dso-button-tertiary-hover-color, #275937);     float: var(--_dt-button-float-tertiary, none);   }   .dso-tertiary:active {     background-color: var(--_dso-button-tertiary-active-background-color, );     border-color: var(--_dso-button-tertiary-active-border-color, );     color: var(--_dso-button-tertiary-active-color, #173521);     float: var(--_dt-button-float-tertiary, none);   }   .dso-tertiary[disabled], .dso-tertiary[disabled]:hover {     background-color: var(--_dso-button-tertiary-disabled-background-color, );     border-color: var(--_dso-button-tertiary-disabled-border-color, );     color: var(--_dso-button-tertiary-disabled-color, #afcf9d);     float: var(--_dt-button-float-tertiary, none);   }   .dso-tertiary.dso-small {     line-height: 1rem;   }   .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before {     margin-block-end: -4px;     margin-block-start: -4px;   }   .dso-tertiary.dso-small.dso-spinner-left::before {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-small.dso-spinner-right::after {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-extra-small {     line-height: 1rem;   }   .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before {     margin-block-end: -4px;     margin-block-start: -4px;   }   .dso-tertiary.dso-extra-small.dso-spinner-left::before {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-extra-small.dso-spinner-right::after {     block-size: 16px;     inline-size: 16px;   }   .dso-tertiary.dso-extra-small {     padding-block: 9px;   }   .dso-tertiary {     border: 0;     line-height: 1;     padding-inline: 0;     padding-block: var(--_dt-button-padding-block-tertiary, 0);     background-color: transparent;   }   .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {     color: #39870c;   }   .dso-tertiary:not([disabled]):hover {     text-decoration: underline;     text-underline-position: under;   }   .dso-tertiary.dso-align {     line-height: calc(1.5em - 1px);     padding-block: 11px;     padding-inline: 0;     position: relative;   }   .dso-tertiary.dso-truncate {     max-inline-size: 100%;     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap;   }   .dso-tertiary.dso-spinner-left::before {     background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");     background-repeat: no-repeat;     content: "";     display: inline-block;     block-size: 24px;     vertical-align: middle;     inline-size: 24px;     margin-inline-end: 8px;   }   .dso-tertiary.dso-spinner-right::after {     background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");     background-repeat: no-repeat;     content: "";     display: inline-block;     block-size: 24px;     vertical-align: middle;     inline-size: 24px;     margin-inline-start: 8px;   }   .dso-tertiary dso-icon + span:not(.sr-only),   .dso-tertiary span:not(.sr-only) + dso-icon {     margin-inline-start: 8px;   }   .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),   .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),   .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],   .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {     margin-inline-start: 0;   }   .dso-tertiary dso-icon,   .dso-tertiary span {     vertical-align: middle;   }   .dso-tertiary {     font-weight: 300;   }   .overlay {     inline-size: calc(100vw - 32px);   }   .filter-panel,   .overlay {     margin-inline: 0;     max-inline-size: 100vw;     inset-block-start: 0;   }   .filter-panel {     inset-inline-start: -100vw;     inline-size: 100vw;   } } @media (min-width: 992px) {   :host([filter-panel-open]) .dso-main-panel {     margin-inline-start: 380px;   } } :host([print]) {   block-size: auto;   overflow: visible; } :host([print]) .viewer-grid-columns {   flex-direction: column;   overflow: visible; } :host([print]) .map-area {   display: flex;   flex-direction: row;   align-items: flex-start;   block-size: auto;   overflow: visible;   flex-shrink: 0;   order: -1; } :host([print]) .map {   flex: 1;   min-inline-size: 0;   align-self: stretch;   min-block-size: 400px;   position: relative;   inset: auto; } :host([print]) .legend {   position: relative;   inset: auto;   flex-shrink: 0;   --_dso-legend-content-max-block-size: none; } :host([print]) .dso-main-panel {   block-size: auto;   box-shadow: none;   inline-size: 100% !important;   max-inline-size: none !important;   min-inline-size: 0 !important;   position: relative;   margin-inline-start: 0px; } :host([print]) .dso-main-panel .content {   align-items: flex-start;   block-size: auto;   display: flex;   flex-direction: row;   gap: 32px;   overflow-y: visible; } :host([print]) .dso-main-panel .content slot[name=main] {   display: block;   flex: 1;   min-inline-size: 0; } :host([print]) .filter-panel {   block-size: auto;   box-shadow: none;   flex-shrink: 0;   inline-size: 380px !important;   margin-inline: 0;   max-inline-size: none !important;   min-inline-size: 0 !important;   position: relative;   transition: none; } :host([print]) .dso-document-panel {   block-size: auto;   box-shadow: none;   inline-size: 100% !important;   max-inline-size: none !important;   min-inline-size: 0 !important;   position: static; } :host([print]) .dso-document-panel .content {   block-size: auto;   overflow-y: visible; }`;
 
 const resizeObserver = new ResizeObserver(debounce(([entry]) => {
     const shadowRoot = entry?.target.getRootNode();
@@ -94,6 +94,10 @@ const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class ViewerGrid extends H {
          * Set to true when document panel should show.
          */
         this.documentPanelOpen = false;
+        /**
+         * Set to true to apply print layout programmatically, e.g. for print preview.
+         */
+        this.print = false;
         /**
          * Size of the panel when component loads.
          *
@@ -211,7 +215,9 @@ const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class ViewerGrid extends H {
         }
     }
     render() {
-        return (h(Fragment, { key: '107327f469c7793fd1fc1c90b0367936ded7c88a' }, h("slot", { key: 'a6139fd224901aefc82e551f30f38f237168a29d', name: "top-bar" }), h("div", { key: '5c92640e25e5ef42f86bcef3e00b1b521cbd4293', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '9172291d20e7e758fb4e53b054617169602c36e0', class: "dso-navbar" }, h("ul", { key: '40f1a4bdee9491b38799d010053482bd7b48ab99', class: "dso-nav dso-nav-sub" }, viewerGridTabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(MainPanel, { key: '306084b98dc9ed3e4400cfd9f6ab30b7cef2a374', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(FilterPanel, { key: '425c35dd78e48924d9f61308ac10744d206a9074', open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: 'c9a9d4d612b592bfe5d8d3aa8266a89771a1b4cc', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '162a97b0413668dfe6020a427c0523f8fae87fd6', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '678ac7f6c01a58c157c8e9337d2740e00590f0b8', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'c7adca136159a2810210f51c7a09381b38452b29', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
+        return (h(Fragment, { key: 'f291587822e81c2106ab5e36089ce42d0f9833f5' }, h("slot", { key: '00e527296e700f9ce46f8429e5f2426461c4d83a', name: "top-bar" }), h("div", { key: '5e56932a8ad0ef86dc783a866f9c1d70ffafb386', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '0aa6869170bd5fbea948f986f0684869a5bb9319', class: "dso-navbar" }, h("ul", { key: 'c43b64696dc610265dc1d9a14d331a516a0b733e', class: "dso-nav dso-nav-sub" }, viewerGridTabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search") || this.print) && (h(MainPanel, { key: '059d82c2c2f7c285644d2a03e3dfbe090a0f3033', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd, printFilterPanel: !this.tabView && this.filterPanelOpen && this.print ? (h(FilterPanel, { open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) })) : undefined })), (!this.tabView || (this.tabView && this.activeTab === "search")) && !this.print && (h(FilterPanel, { key: '4f2dd3da03203f0d5640ad21731478fa01f2a547', open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map") || this.print) && (h("div", { key: 'c1ded5defe7683febd8612b9eaf0bec4b3b054e3', class: "map-area" }, h("div", { key: '119acd44416483f19a2153c151f39086c6ebd365', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '94df8c9c9de2a7367c246ee88609af366a745865', name: "map" })), h("div", { key: 'ac15769c7a405059399885ab852074c3f912b536', class: "legend" }, h("slot", { key: 'ae24218f8a14e8fb93b53ae22635ddeaa2f18e90', name: "legend" })))), ((!this.tabView && this.documentPanelOpen) ||
+            (this.tabView && this.activeTab === "document") ||
+            this.print) && (h(DocumentPanel, { key: 'f5e6beaab079ff790e3248267797abc1659f38bc', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'bf93377744c7855707d8f0fea887eeceeaacc187', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -231,6 +237,7 @@ const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class ViewerGrid extends H {
         "filterPanelOpen": [516, "filter-panel-open"],
         "overlayOpen": [516, "overlay-open"],
         "documentPanelOpen": [516, "document-panel-open"],
+        "print": [516],
         "mainSize": [513, "main-size"],
         "activeTab": [1, "active-tab"],
         "documentPanelSize": [513, "document-panel-size"],

package/dist/bundle/dsot-document-component-demo.js

@@ -1,21 +1,21 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-DBi6XQa8.js';
-import { g as getDefaultExportFromCjs, c as commonjsGlobal, d as defineCustomElement$9 } from './p-DInlGNus.js';
-import { d as defineCustomElement$i } from './p-CF5u2saq.js';
-import { d as defineCustomElement$h } from './p-CjrG2WYI.js';
-import { d as defineCustomElement$g } from './p-C3TYRjeb.js';
-import { d as defineCustomElement$f } from './p-B5uIYOPn.js';
-import { d as defineCustomElement$e } from './p-DQ4k80p_.js';
-import { d as defineCustomElement$d } from './p-D6mShNSe.js';
-import { d as defineCustomElement$c } from './p-B9XEou_S.js';
-import { d as defineCustomElement$b } from './p-DQAO2E8R.js';
-import { d as defineCustomElement$a } from './p-B-VMnSMl.js';
-import { d as defineCustomElement$8 } from './p-CbZsDFSf.js';
-import { d as defineCustomElement$7 } from './p-DZGMkIzK.js';
-import { d as defineCustomElement$6 } from './p-Bh6sbzpT.js';
-import { d as defineCustomElement$5 } from './p-DIM0fY1S.js';
-import { d as defineCustomElement$4 } from './p-CuGyp3WQ.js';
-import { d as defineCustomElement$3 } from './p-CpHN9nNa.js';
-import { d as defineCustomElement$2 } from './p-ClIxAe6b.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-BIShp3sw.js';
+import { g as getDefaultExportFromCjs, c as commonjsGlobal, d as defineCustomElement$9 } from './p-HXung-P3.js';
+import { d as defineCustomElement$i } from './p-z2uKmX1Q.js';
+import { d as defineCustomElement$h } from './p-C-8vTVVo.js';
+import { d as defineCustomElement$g } from './p-BnDZHxeO.js';
+import { d as defineCustomElement$f } from './p-B41mHKWC.js';
+import { d as defineCustomElement$e } from './p-D1ciWwSo.js';
+import { d as defineCustomElement$d } from './p-zYhsKlIm.js';
+import { d as defineCustomElement$c } from './p-CKnJRPZn.js';
+import { d as defineCustomElement$b } from './p-6-0kKG2F.js';
+import { d as defineCustomElement$a } from './p-D33HZm70.js';
+import { d as defineCustomElement$8 } from './p-DtNjY6f6.js';
+import { d as defineCustomElement$7 } from './p-B2ZlmdWO.js';
+import { d as defineCustomElement$6 } from './p-BNEJjrr8.js';
+import { d as defineCustomElement$5 } from './p-jon8ZgCu.js';
+import { d as defineCustomElement$4 } from './p-CcFEBE0l.js';
+import { d as defineCustomElement$3 } from './p-DYFOhFhk.js';
+import { d as defineCustomElement$2 } from './p-C332B2dN.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -1871,7 +1871,7 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
     }
     render() {
         const { DocumentComponent, MenuButton } = this;
-        return (h("dso-responsive-element", { key: '058599f9650f815afa87f970232d8ed44b2663d1', class: "dso-document-components" }, h("div", { key: 'dc467ffba434c8fa8cc067e030b58a0b8ca50f89', class: "dso-navbar" }, h("ul", { key: '55ddfb08d2fec8e08c59e049c8c89c438d7b6091', class: "dso-nav dso-nav-sub" }, this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: '36d612b47417ca9942463efd45f5e52fc6dfe198', path: [this.document] })));
+        return (h("dso-responsive-element", { key: '3da23565a2101bbe52be56b25878ffec369aff05', class: "dso-document-components" }, h("div", { key: 'a849bcbabe22f43376d7b0e1a0c7ce967e4f24af', class: "dso-navbar" }, h("ul", { key: 'eff0e1a6e8db844b52d54c18b10c4217b73f1465', class: "dso-nav dso-nav-sub" }, this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: 'd687e63404d61a6527fe45405e29ad288dd622c5', path: [this.document] })));
     }
     static get watchers() { return {
         "jsonFile": [{

package/dist/bundle/index.js

@@ -1,5 +1,5 @@
-import { t as transformTag } from './p-DBi6XQa8.js';
-export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-DBi6XQa8.js';
+import { t as transformTag } from './p-BIShp3sw.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-BIShp3sw.js';
 import { DsoAccordion } from './dso-accordion.js';
 import { DsoAccordionSection } from './dso-accordion-section.js';
 import { DsoActionList } from './dso-action-list.js';

package/dist/bundle/{p-RkXc1mJn.js → p-0h9cOnX9.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, F as Fragment, t as transformTag } from './p-DBi6XQa8.js';
-import { d as defineCustomElement$5 } from './p-DQ4k80p_.js';
-import { d as defineCustomElement$4 } from './p-D6mShNSe.js';
-import { d as defineCustomElement$3 } from './p-DAF7EsKp.js';
-import { d as defineCustomElement$2 } from './p-BLZJxjte.js';
-import { d as defineCustomElement$1 } from './p-CuGyp3WQ.js';
+import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, F as Fragment, t as transformTag } from './p-BIShp3sw.js';
+import { d as defineCustomElement$5 } from './p-D1ciWwSo.js';
+import { d as defineCustomElement$4 } from './p-zYhsKlIm.js';
+import { d as defineCustomElement$3 } from './p-CFPWVcsY.js';
+import { d as defineCustomElement$2 } from './p-Bh_AjQ7z.js';
+import { d as defineCustomElement$1 } from './p-CcFEBE0l.js';
 
 /**
  * Form random hash
@@ -69,7 +69,7 @@ const Selectable = /*@__PURE__*/ proxyCustomElement(class Selectable extends H {
     }
     render() {
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: '3d98b23e1aff2b9d87f491373a236c4d3c4d6506' }, h("div", { key: '8b2c1a74048ebae12bde50719593f4dfbdcae3dd', class: "dso-selectable-container" }, h("div", { key: '43098a94f1b95ccc8f69b4e8f2c60f99eb283229', class: "dso-selectable-input-wrapper" }, h("input", { key: '7c0a0d708184b5aeda327e52ffa03872b1c248d9', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '53e497962ec33ded495671181f858baada63b3b3', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '0ad6f2f0c18725cd84c42879c5fa9fd0a38f0000', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'b70e5c5e7682a0face7d7f8225af88d32285dd6f' }, h("slot", { key: '4b66be88a0dcef32606a12707ac4dd3ae16d53ee', name: "info" })))), h("slot", { key: '3c3e9d3b63d567be2d000732ab7f8bc826466ec6', name: "options" })));
+        return (h(Fragment, { key: 'f8cd51d0562d5718bfb2846a1a1f001d067d88c2' }, h("div", { key: '0334a8b7aa939eac065292c34ad37bf4e757be56', class: "dso-selectable-container" }, h("div", { key: 'a7fb59205e16eb3797ed1acaaa7acb3934583507', class: "dso-selectable-input-wrapper" }, h("input", { key: 'bb7f49b38b56e5ba6bb690292646343bbfe0f2eb', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '45a00a047487be4f1426d83a3366ffce52dc941e', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'ab533add5946fe56c6362ae99a6bc89aebe82b6c', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '832279eb9a49a7b16374f00218ea5e8c3841aeed' }, h("slot", { key: '9d93816bcc8c6d9a91da08001d889feec5fc5d64', name: "info" })))), h("slot", { key: '8aee73d7bc3fb2a634b8c9a445cd20318f436765', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {