@dso-toolkit/core 77.0.0 → 78.0.0

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

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-DHO_Za64.js';
-import { d as defineCustomElement$3 } from './p-DM1_b6nQ.js';
-import { d as defineCustomElement$2 } from './p-9zjtdLN6.js';
+import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-Dm38fPV4.js';
+import { d as defineCustomElement$3 } from './p-lE-KxpG-.js';
+import { d as defineCustomElement$2 } from './p-BQF5fCSD.js';
 
 const surveyRatingCss = "@charset \"UTF-8\";\n/* Genereert een `transition` met vaste easing en optionele duur en delay per property.\n**\n** @param {ArgList} $transitions...\n**   - \"property\": gebruikt standaard duur (260ms) en delay (0ms)\n**   - (\"property\", duur): eigen duur, geen delay\n**   - (\"property\", duur, delay): eigen duur én delay\n**\n** @example\n**   @include transition(opacity, (\"transform\", 300ms), (\"color\", 500ms, 200ms));\n**\n** @output\n**   transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];\n**\n*/\n:host {\n  display: block;\n  position: fixed;\n  inset-block-end: 16px;\n  inset-inline-start: 16px;\n  inline-size: 370px;\n  background-color: #fff;\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\n  border-radius: 4px;\n  z-index: 1000;\n}\n@media screen and (max-width: 480px) {\n  :host {\n    inline-size: 320px;\n    inset-block-end: 0;\n    inset-inline-start: 0;\n    --panel-heading-padding-inline-start: 8px;\n    --panel-body-padding-inline: 8px;\n  }\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.visual-rating-labels {\n  display: flex;\n  justify-content: space-between;\n  margin-block: 8px;\n}\n\ninput[type=radio] {\n  appearance: none;\n  cursor: pointer;\n  position: absolute;\n  margin-inline: 0;\n  margin-block: 0;\n  inset-block: 8px 0;\n  inset-inline: 0;\n  z-index: 1;\n}\n\nlabel {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 48px;\n  block-size: 48px;\n  border: 1px solid #ccc;\n  border-inline-end-width: 0;\n  padding-block-start: 8px;\n}\n@media screen and (max-width: 480px) {\n  label {\n    inline-size: 43px;\n    block-size: 43px;\n  }\n}\nlabel:hover {\n  background-color: #f2f2f2;\n}\nlabel:active {\n  background-color: #e5e5e5;\n}\nlabel:first-of-type {\n  border-radius: 4px 0 0 4px;\n}\nlabel:first-of-type::before {\n  border-radius: 3px 0 0;\n}\nlabel:last-of-type {\n  border-inline-end-width: 1px;\n  border-radius: 0 4px 4px 0;\n}\nlabel:last-of-type::before {\n  border-radius: 0 3px 0 0;\n}\nlabel::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset-block-start: 0;\n  block-size: 8px;\n  inline-size: 100%;\n  border-block-end: 1px solid #ccc;\n}\nlabel:has(input:checked) {\n  font-weight: bold;\n}\nlabel.survey-rating-1::before, label.survey-rating-1:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #b62f41;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-2::before, label.survey-rating-2:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #ce3f51;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-3::before, label.survey-rating-3:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #e17000;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-4::before, label.survey-rating-4:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #dcd400;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-5::before, label.survey-rating-5:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #79b929;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-6::before, label.survey-rating-6:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #39870c;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-7::before, label.survey-rating-7:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #275937;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.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) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  margin-block-start: 16px;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\nbutton.dso-secondary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\nbutton.dso-secondary:focus, button.dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\nbutton.dso-secondary:active {\n  outline: 0;\n}\nbutton.dso-secondary.extern::after, button.dso-secondary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary {\n  background-color: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-color, #39870c);\n}\nbutton.dso-secondary {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\nbutton.dso-secondary:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n  color: var(--_dso-button-secondary-hover-color, #275937);\n}\nbutton.dso-secondary:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #275937);\n  border-color: var(--_dso-button-secondary-active-border-color, #275937);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\nbutton.dso-secondary[disabled], button.dso-secondary[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\nbutton.dso-secondary.dso-small {\n  line-height: 1rem;\n}\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-secondary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\nbutton.dso-secondary span:not(.sr-only) + dso-icon,\nbutton.dso-secondary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\nbutton.dso-secondary dso-icon + span:not(.sr-only),\nbutton.dso-secondary svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\nbutton.dso-secondary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}";
 
@@ -36,7 +36,7 @@ const SurveyRating = /*@__PURE__*/ proxyCustomElement(class SurveyRating extends
         })), h("button", { key: '46aa917170f7a02185c118d1ca4dfe8db7c4a8ab', type: "submit", class: "dso-secondary" }, h("span", { key: '955d1cde7295127ce3328c56e42cf5b1c1e9a77a' }, "Antwoord verzenden")))));
     }
     static get style() { return surveyRatingCss; }
-}, [1, "dso-survey-rating"]);
+}, [257, "dso-survey-rating"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/bundle/dso-tab.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, e as createEvent, h } from './p-DHO_Za64.js';
+import { p as proxyCustomElement, H, e as createEvent, h } from './p-Dm38fPV4.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
 
 const tabCss = "@charset \"UTF-8\";*,*::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}}";
@@ -41,7 +41,7 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends H {
     }
     get host() { return this; }
     static get style() { return tabCss; }
-}, [1, "dso-tab", {
+}, [257, "dso-tab", {
         "active": [516],
         "disabled": [516],
         "href": [1],

package/dist/bundle/dso-table.js

@@ -1,4 +1,4 @@
-import { T as Table, d as defineCustomElement$1 } from './p-DpoKLKOQ.js';
+import { T as Table, d as defineCustomElement$1 } from './p-D3I3eS2K.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, d as Host } from './p-DHO_Za64.js';
+import { p as proxyCustomElement, H, f as forceUpdate, h, d as Host } from './p-Dm38fPV4.js';
 
 const tabsCss = "@charset \"UTF-8\";*,*::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}}";
 
@@ -70,7 +70,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends H {
     }
     get host() { return this; }
     static get style() { return tabsCss; }
-}, [1, "dso-tabs"]);
+}, [257, "dso-tabs"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/bundle/dso-toggletip.js

@@ -1,4 +1,4 @@
-import { T as Toggletip, d as defineCustomElement$1 } from './p-DwVf2qDM.js';
+import { T as Toggletip, d as defineCustomElement$1 } from './p-BLPc0VWK.js';
 
 const DsoToggletip = Toggletip;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-tooltip.js

@@ -1,4 +1,4 @@
-import { T as Tooltip, d as defineCustomElement$1 } from './p-DNO4kzq4.js';
+import { T as Tooltip, d as defineCustomElement$1 } from './p-DNULhBX2.js';
 
 const DsoTooltip = Tooltip;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,7 +1,7 @@
-import { h, F as Fragment, p as proxyCustomElement, H, e as createEvent } from './p-DHO_Za64.js';
+import { h, F as Fragment, p as proxyCustomElement, H, e as createEvent } from './p-Dm38fPV4.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { d as defineCustomElement$3 } from './p-DM1_b6nQ.js';
-import { d as defineCustomElement$2 } from './p-BBxSnuWP.js';
+import { d as defineCustomElement$3 } from './p-lE-KxpG-.js';
+import { d as defineCustomElement$2 } from './p-WmD5BfeO.js';
 
 const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize, }) => {
     var _a, _b, _c, _d;
@@ -200,7 +200,7 @@ const TreeView = /*@__PURE__*/ proxyCustomElement(class TreeView extends H {
         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" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.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", {
+}, [257, "dso-tree-view", {
         "collection": [16],
         "focusItem": [64]
     }]);

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

@@ -1,4 +1,4 @@
-import { h, p as proxyCustomElement, H, e as createEvent, F as Fragment } from './p-DHO_Za64.js';
+import { h, p as proxyCustomElement, H, e as createEvent, F as Fragment } from './p-Dm38fPV4.js';
 import { c as clsx } from './p-ChV9xqsO.js';
 import { d as debounce } from './p-BxvZeNWe.js';
 
@@ -103,7 +103,6 @@ const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class ViewerGrid extends H {
         this.dsoMainSizeChangeAnimationEnd = createEvent(this, "dsoMainSizeChangeAnimationEnd", 7);
         this.dsoDocumentPanelSizeChange = createEvent(this, "dsoDocumentPanelSizeChange", 7);
         this.dsoDocumentPanelSizeChangeAnimationEnd = createEvent(this, "dsoDocumentPanelSizeChangeAnimationEnd", 7);
-        this.dsoMainPanelExpand = createEvent(this, "dsoMainPanelExpand", 7);
         this.dsoMainPanelToggle = createEvent(this, "dsoMainPanelToggle", 7);
         this.mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;
         /**
@@ -238,7 +237,7 @@ const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class ViewerGrid extends H {
         }
     }
     render() {
-        return (h(Fragment, null, h("slot", { key: 'ca4516792c9b0298a17e20249ba5871d88aad4d0', name: "top-bar" }), h("div", { key: '2932e07ae6ee1cf2db5a1806b43e1e31a646a1e3', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '3a59eff7c4f22d4c43d14aa5144e874197b4f04d', class: "dso-navbar" }, h("ul", { key: '54a9240c809a88475599bf1e9eca4fcd4a217f1f', 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: '6aaea88275b0cde9bfe01734695c231d4a115684', 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: 'a95d1917347f22221d6380c13c4dbc38ddd5a23f', 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: '674be4a8408429a6e07307f05b63efc5ff37f2a2', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'f82407205dc1c572fda5c99edc15462703d9045b', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: 'a4a8b5af45c1ed4d57dedbf96d4b63f5d48e1d64', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'b17b5ecfba160494bfb82d7cc9c1f43593447a8e', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
+        return (h(Fragment, null, h("slot", { key: '4868f367922b80e7a2a3092823a2d9c42a5fb258', name: "top-bar" }), h("div", { key: '50799816c0d5e6f1c08df7b007aa96c0dc4c59b4', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: 'cab657aa54352e9bbb7fe04ce778fc32bbba17b3', class: "dso-navbar" }, h("ul", { key: 'dcbb8067da17c53deff1d80fb8ec69416654ab3a', 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: '6da04458c9379be5b3b17a384b06b55820971f79', 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: '7313ab492851fe551712f6bb856316cbf06cc2a7', 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: '8d524c067be71cb48d9133ce1ca473066f725e6e', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '956a83c6a4a3679cef160fdbed9267c66bb2eb08', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '8995cd103d7c74615c130bf6243314aee5761768', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'e861a7e0b09b23eaf12704c578882f4218f73384', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -247,7 +246,7 @@ const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class ViewerGrid extends H {
         "overlayOpen": ["overlayOpenWatcher"]
     }; }
     static get style() { return viewerGridCss; }
-}, [1, "dso-viewer-grid", {
+}, [257, "dso-viewer-grid", {
         "filterPanelTitle": [513, "filter-panel-title"],
         "filterPanelOpen": [516, "filter-panel-open"],
         "overlayOpen": [516, "overlay-open"],

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

@@ -1 +1 @@
-{"file":"dso-viewer-grid.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/viewer-grid/viewer-grid.interfaces.ts","src/components/viewer-grid/components/sizing-buttons.tsx","src/components/viewer-grid/components/document-panel.tsx","src/components/viewer-grid/components/filter-panel.tsx","src/components/viewer-grid/components/main-panel.tsx","src/components/viewer-grid/components/overlay.tsx","src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n  currentSize: ViewerGridPanelSize;\r\n  nextSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridChangeSizeAnimationEndEvent {\r\n  currentSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridCloseFilterPanelEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridActiveTabSwitchEvent {\r\n  tab: ViewerGridTab;\r\n}\r\n\r\nexport interface ViewerGridMainExpandEvent {\r\n  expand: boolean;\r\n}\r\n\r\nexport interface ViewerGridMainToggleEvent {\r\n  hide: boolean;\r\n}\r\n\r\nexport type ViewerGridPanelSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type ViewerGridLabelSizeMap = { [key in ViewerGridPanelSize]: string };\r\n\r\nexport const viewerGridTabs = [\"search\", \"map\", \"document\"] as const;\r\nexport type ViewerGridTab = (typeof viewerGridTabs)[number];\r\n\r\nexport type ViewerGridTabLabelMap = { [key in ViewerGridTab]: string };\r\n\r\nexport const viewerGridTabLabelMap: ViewerGridTabLabelMap = {\r\n  map: \"Kaart\",\r\n  document: \"Document\",\r\n  search: \"Zoeken\",\r\n};\r\n\r\nexport const viewerGridSizeLabelMap: ViewerGridLabelSizeMap = {\r\n  small: \"smal\",\r\n  medium: \"middel\",\r\n  large: \"breed\",\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridPanelSize, viewerGridSizeLabelMap } from \"../viewer-grid.interfaces\";\r\n\r\ninterface SizingButtonProp {\r\n  className: string;\r\n  onClick: any;\r\n  label: string;\r\n  icon: \"chevron-left\" | \"chevron-right\";\r\n}\r\n\r\nconst SizingButton: FunctionalComponent<SizingButtonProp> = ({ className, onClick, label, icon }) => (\r\n  <button type=\"button\" class={className} onClick={onClick}>\r\n    <span class=\"sr-only\">{label}</span>\r\n    <dso-icon icon={icon}></dso-icon>\r\n  </button>\r\n);\r\n\r\ninterface SizingButtonProps {\r\n  panelLabel: string;\r\n  size: ViewerGridPanelSize;\r\n  expand: () => void;\r\n  shrink: () => void;\r\n  placement: \"left\" | \"right\";\r\n}\r\n\r\nexport const SizingButtons: FunctionalComponent<SizingButtonProps> = ({\r\n  shrink,\r\n  expand,\r\n  size,\r\n  panelLabel,\r\n  placement,\r\n}) => {\r\n  const buttons = [];\r\n\r\n  if (size !== \"small\") {\r\n    buttons.push(\r\n      <SizingButton\r\n        onClick={shrink}\r\n        label={`${panelLabel} smaller maken`}\r\n        icon={placement === \"right\" ? \"chevron-right\" : \"chevron-left\"}\r\n        className=\"shrink\"\r\n      />,\r\n    );\r\n  }\r\n\r\n  if (size !== \"large\") {\r\n    buttons.push(\r\n      <SizingButton\r\n        onClick={expand}\r\n        label={`${panelLabel} breder maken`}\r\n        icon={placement === \"right\" ? \"chevron-left\" : \"chevron-right\"}\r\n        className=\"expand\"\r\n      />,\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div class=\"sizing-buttons\">\r\n      <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n        Breedte {panelLabel.toLocaleLowerCase()}: {viewerGridSizeLabelMap[size]}\r\n      </span>\r\n      {buttons}\r\n    </div>\r\n  );\r\n};\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridChangeSizeAnimationEndEvent, ViewerGridPanelSize } from \"../viewer-grid.interfaces\";\r\n\r\nimport { SizingButtons } from \"./sizing-buttons\";\r\n\r\nexport interface ViewerGridDocumentPanelProps {\r\n  tabView: boolean;\r\n  panelSize: ViewerGridPanelSize;\r\n  shrinkDocumentPanel: () => void;\r\n  expandDocumentPanel: () => void;\r\n  dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const DocumentPanel: FunctionalComponent<ViewerGridDocumentPanelProps> = ({\r\n  tabView,\r\n  panelSize,\r\n  shrinkDocumentPanel,\r\n  expandDocumentPanel,\r\n  dsoDocumentPanelSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class=\"dso-document-panel\"\r\n    onTransitionEnd={(e) => {\r\n      if (e.propertyName === \"flex-basis\") {\r\n        dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });\r\n      }\r\n    }}\r\n  >\r\n    {!tabView && (\r\n      <SizingButtons\r\n        panelLabel=\"Documentpaneel\"\r\n        size={panelSize}\r\n        expand={expandDocumentPanel}\r\n        shrink={shrinkDocumentPanel}\r\n        placement=\"right\"\r\n      />\r\n    )}\r\n    <div class=\"content\">\r\n      <slot name=\"document-panel\" />\r\n    </div>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterPanelProps {\r\n  title?: string;\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  dsoCloseFilterPanel: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const FilterPanel: FunctionalComponent<ViewerGridFilterPanelProps> = ({ title, ref, dsoCloseFilterPanel }) => (\r\n  <dialog class=\"filter-panel\" ref={ref}>\r\n    {title && <h3>{title}</h3>}\r\n    <button type=\"button\" class=\"dso-close\" onClick={dsoCloseFilterPanel}>\r\n      <dso-icon icon=\"times\"></dso-icon>\r\n      <span class=\"sr-only\">Sluiten</span>\r\n    </button>\r\n    <slot name=\"filter-panel\" />\r\n  </dialog>\r\n);\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridChangeSizeAnimationEndEvent, ViewerGridPanelSize } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n  tabView: boolean;\r\n  mainSize: ViewerGridPanelSize;\r\n  documentPanelOpen: boolean;\r\n  mainPanelExpanded: boolean;\r\n  mainPanelHidden: boolean;\r\n  toggleMainPanel: () => void;\r\n  dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n  tabView,\r\n  mainSize,\r\n  documentPanelOpen,\r\n  mainPanelExpanded,\r\n  mainPanelHidden,\r\n  toggleMainPanel,\r\n  dsoMainSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class={clsx(\"dso-main-panel\", {\r\n      compact: !tabView && documentPanelOpen && !mainPanelExpanded,\r\n      contracted: !tabView && !documentPanelOpen && !mainPanelExpanded,\r\n      expanded: !tabView && documentPanelOpen && mainPanelExpanded,\r\n      collapsed: mainPanelHidden,\r\n    })}\r\n    onTransitionEnd={(e) => {\r\n      if (e.propertyName === \"flex-basis\") {\r\n        dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });\r\n      }\r\n    }}\r\n  >\r\n    {!tabView && documentPanelOpen && (\r\n      <div class=\"toggle-button\">\r\n        <button type=\"button\" onClick={toggleMainPanel}>\r\n          <span class=\"sr-only\">Zoeken paneel {mainPanelHidden ? \"tonen\" : \"verbergen\"}</span>\r\n          <dso-icon icon={mainPanelHidden ? \"chevron-right\" : \"chevron-left\"}></dso-icon>\r\n        </button>\r\n      </div>\r\n    )}\r\n    <div class={clsx(\"content\", { invisible: mainPanelHidden })}>\r\n      <slot name=\"main\" />\r\n    </div>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridOverlayProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  dsoCloseOverlay: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Overlay: FunctionalComponent<ViewerGridOverlayProps> = ({ ref, dsoCloseOverlay }) => (\r\n  <dialog\r\n    class=\"overlay\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      dsoCloseOverlay(e);\r\n    }}\r\n  >\r\n    <button type=\"button\" class=\"overlay-close-button\" onClick={dsoCloseOverlay}>\r\n      <dso-icon icon=\"times\"></dso-icon>\r\n      <span class=\"sr-only\">sluiten</span>\r\n    </button>\r\n    <slot name=\"overlay\" />\r\n  </dialog>\r\n);\r\n","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/navbar\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  .overlay {\r\n    block-size: calc(100% - units.$u4);\r\n    margin-block: units.$u2;\r\n    margin-inline: auto units.$u2;\r\n  }\r\n\r\n  .dso-main-panel {\r\n    transition:\r\n      min-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n      margin-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n\r\n.overlay-close-button {\r\n  position: absolute;\r\n  inset-block-start: units.$u1;\r\n  inset-inline-end: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.content.invisible {\r\n  visibility: hidden;\r\n}\r\n\r\n.viewer-grid-columns {\r\n  position: relative;\r\n}\r\n\r\n.dso-main-panel,\r\n.dso-document-panel {\r\n  .content {\r\n    block-size: 100%;\r\n    padding-block: 0;\r\n    padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n  }\r\n}\r\n\r\n.dso-main-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition:\r\n    flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n    min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  &.compact,\r\n  &.expanded {\r\n    &.collapsed {\r\n      inset-inline-start: -432px;\r\n    }\r\n  }\r\n\r\n  &.compact,\r\n  &.contracted {\r\n    flex-shrink: unset;\r\n    flex-grow: unset;\r\n    position: absolute;\r\n    transition: none;\r\n  }\r\n\r\n  &.expanded.collapsed {\r\n    position: absolute;\r\n    block-size: 100%;\r\n  }\r\n\r\n  .sizing-buttons,\r\n  .toggle-button {\r\n    inset-inline-start: calc(100% + 1px);\r\n    transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n    padding-block: 0 units.$u1;\r\n    padding-inline: 0 units.$u1 * 0.5;\r\n\r\n    button {\r\n      border-end-end-radius: 4px;\r\n      border-start-end-radius: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-document-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition:\r\n    flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n    min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  .sizing-buttons {\r\n    inset-block-start: auto;\r\n    inset-block-end: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n    inset-inline-end: calc(100% + 1px);\r\n    transition: inset-inline-end core-viewer-grid-variables.$transition-time ease-in;\r\n    padding-block: 0 units.$u1;\r\n    padding-inline: units.$u1 * 0.5 0;\r\n\r\n    button {\r\n      border-end-start-radius: 4px;\r\n      border-start-start-radius: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n.sizing-buttons,\r\n.toggle-button {\r\n  overflow-x: hidden;\r\n  position: absolute;\r\n  inset-block-start: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n  inline-size: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n  z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n    & {\r\n      border: 0;\r\n      padding: 8px;\r\n      border-radius: 0;\r\n      box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n      flex: 0 0 100%;\r\n      block-size: core-viewer-grid-variables.$resize-button-size;\r\n      min-inline-size: auto;\r\n      inline-size: core-viewer-grid-variables.$resize-button-size;\r\n    }\r\n\r\n    &:hover {\r\n      dso-icon {\r\n        color: colors.$wit;\r\n      }\r\n    }\r\n\r\n    &:focus-visible {\r\n      outline-offset: -1px;\r\n    }\r\n  }\r\n}\r\n\r\n.map {\r\n  block-size: 100%;\r\n  inline-size: 100%;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n.filter-panel,\r\n.overlay {\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  block-size: 100%;\r\n  margin-block: 0;\r\n  max-block-size: 100vh;\r\n  overflow-y: auto;\r\n  z-index: zindex.$viewer-grid-main-panel + 1;\r\n}\r\n\r\n.filter-panel {\r\n  display: block;\r\n  position: absolute;\r\n  padding-block: units.$u1;\r\n  padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n  inset-block-start: 0;\r\n  block-size: 100%;\r\n  inset-inline-start: calc(core-viewer-grid-variables.$filter-panel-max-inline-size * -1);\r\n  inline-size: 100%;\r\n  transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$filter-panel-inline-size) {\r\n    inline-size: 100vw;\r\n\r\n    &::before {\r\n      display: none !important;\r\n    }\r\n  }\r\n\r\n  @media screen and (min-width: #{media-query-breakpoints.$screen-md-min}) {\r\n    max-inline-size: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n  }\r\n\r\n  &[open] {\r\n    inset-inline-start: 0;\r\n    box-shadow: none;\r\n    border-inline-end: 1px solid core-viewer-grid-variables.$filter-panel-border-color;\r\n  }\r\n\r\n  h3 {\r\n    color: colors.$bosgroen;\r\n  }\r\n\r\n  .dso-close {\r\n    @include button.element();\r\n\r\n    position: absolute;\r\n    inset-block-start: units.$u2;\r\n    inset-inline-end: units.$u2;\r\n\r\n    block-size: units.$u4;\r\n    inline-size: units.$u4;\r\n\r\n    padding: 0;\r\n\r\n    background-color: transparent;\r\n\r\n    border: 0;\r\n    text-align: center;\r\n  }\r\n}\r\n\r\n.overlay {\r\n  padding-block: units.$u5 units.$u1;\r\n  padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n  inset-inline-end: 0;\r\n  inline-size: core-viewer-grid-variables.$overlay-inline-size;\r\n\r\n  &::backdrop {\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n  }\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$overlay-inline-size) {\r\n    inline-size: 100vw;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-sm-min + units.$u5}) {\r\n  :host([main-size=\"small\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"small\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$small;\r\n    min-inline-size: 0;\r\n    max-inline-size: core-viewer-grid-variables.$small;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n      flex-basis: 100vw;\r\n      max-inline-size: 100vw;\r\n      min-inline-size: 0;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host([main-size=\"medium\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"medium\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$medium;\r\n    min-inline-size: core-viewer-grid-variables.$small;\r\n    max-inline-size: core-viewer-grid-variables.$medium;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n      flex-basis: 100vw;\r\n      max-inline-size: 100vw;\r\n      min-inline-size: core-viewer-grid-variables.$small;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host([main-size=\"large\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"large\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$large;\r\n    min-inline-size: core-viewer-grid-variables.$large-min;\r\n    max-inline-size: core-viewer-grid-variables.$large-max;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n      flex-basis: 100vw;\r\n      max-inline-size: 100vw;\r\n      min-inline-size: core-viewer-grid-variables.$large-min;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host {\r\n    display: flex;\r\n    flex-direction: column;\r\n    block-size: 100vh;\r\n    overflow: clip;\r\n    position: relative;\r\n\r\n    .dso-main-panel.compact,\r\n    .dso-main-panel.expanded {\r\n      flex-basis: unset;\r\n      min-inline-size: unset;\r\n      max-inline-size: unset;\r\n      inline-size: 440px;\r\n    }\r\n\r\n    .viewer-grid-columns {\r\n      display: flex;\r\n      overflow: hidden;\r\n      flex-grow: 1;\r\n    }\r\n  }\r\n\r\n  .dso-main-panel,\r\n  .dso-document-panel {\r\n    box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n\r\n    .content {\r\n      overflow-y: auto;\r\n    }\r\n  }\r\n\r\n  .filter-panel {\r\n    margin-inline: 0 auto;\r\n    inline-size: calc(100vw - 40px);\r\n\r\n    &[open] {\r\n      border-inline-end: 1px solid core-viewer-grid-variables.$filter-panel-border-color;\r\n    }\r\n  }\r\n\r\n  .overlay {\r\n    box-shadow: -2px 0 5px colors.$grijs-60;\r\n    margin-inline: auto 0;\r\n  }\r\n\r\n  @media screen and (max-width: #{media-query-breakpoints.$screen-sm-max + units.$u5 + 0.99}) {\r\n    :host([filter-panel-open]) {\r\n      .dso-main-panel {\r\n        margin-inline-start: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n        max-inline-size: calc(100vw - #{core-viewer-grid-variables.$filter-panel-max-inline-size});\r\n      }\r\n    }\r\n\r\n    .filter-panel {\r\n      inline-size: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n      inset-inline-start: -(core-viewer-grid-variables.$filter-panel-max-inline-size);\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (max-width: #{media-query-breakpoints.$screen-xs-max + units.$u5 + 0.99}) {\r\n  @include navbar.root();\r\n\r\n  .dso-navbar {\r\n    padding-inline: units.$u2;\r\n  }\r\n\r\n  .dso-nav {\r\n    @include navbar.nav-border();\r\n\r\n    display: flex;\r\n    gap: units.$u2;\r\n    margin-block-start: 0;\r\n    inline-size: calc(100vw - units.$u4);\r\n  }\r\n\r\n  .dso-tertiary {\r\n    @include button.tertiary($modifiers: false);\r\n\r\n    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n    & {\r\n      font-weight: 300;\r\n    }\r\n  }\r\n\r\n  .filter-panel,\r\n  .overlay {\r\n    margin-inline: 0;\r\n    max-inline-size: 100vw;\r\n    inset-block-start: 0;\r\n    inline-size: 100vw;\r\n  }\r\n\r\n  .filter-panel {\r\n    inset-inline-start: -100vw;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-md-min}) {\r\n  :host([filter-panel-open]) {\r\n    .dso-main-panel {\r\n      margin-inline-start: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DocumentPanel, FilterPanel, MainPanel, Overlay } from \"./components\";\r\nimport {\r\n  ViewerGridActiveTabSwitchEvent,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  ViewerGridChangeSizeEvent,\r\n  ViewerGridCloseFilterPanelEvent,\r\n  ViewerGridCloseOverlayEvent,\r\n  ViewerGridMainExpandEvent,\r\n  ViewerGridMainToggleEvent,\r\n  ViewerGridPanelSize,\r\n  ViewerGridTab,\r\n  viewerGridTabLabelMap,\r\n  viewerGridTabs,\r\n} from \"./viewer-grid.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(([entry]) => {\r\n    const shadowRoot = entry?.target.getRootNode();\r\n    if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {\r\n      shadowRoot.host._checkMainPanelVisibility();\r\n    }\r\n  }, 50),\r\n);\r\n\r\nfunction isDsoViewerGridComponent(element: Element): element is HTMLDsoViewerGridElement {\r\n  return element.tagName === \"DSO-VIEWER-GRID\";\r\n}\r\n\r\nconst buttonWidth = 40;\r\n\r\nconst tabViewBreakpoint = 768 + buttonWidth;\r\n\r\nconst minMapElementWidth = 440;\r\n\r\n/**\r\n * @slot top-bar - Een slot die bovenaan de viewer over de hele breedte kan worden gevuld met bijv een banner.\r\n * @slot main\r\n * @slot map\r\n * @slot filter-panel\r\n * @slot overlay\r\n * @slot document-panel\r\n */\r\n@Component({\r\n  tag: \"dso-viewer-grid\",\r\n  styleUrl: \"viewer-grid.scss\",\r\n  shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n  private mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;\r\n\r\n  private mapElement?: HTMLDivElement;\r\n\r\n  /**\r\n   * The title of the filter panel\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterPanelTitle?: string;\r\n\r\n  /**\r\n   * Set to true when filter panel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterPanelOpen = false;\r\n\r\n  /**\r\n   * Set to true when overlay should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  overlayOpen = false;\r\n\r\n  /**\r\n   * Set to true when document panel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  documentPanelOpen = false;\r\n\r\n  /**\r\n   * Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  mainSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * Set active tab in tab view.\r\n   */\r\n  @Prop()\r\n  activeTab?: ViewerGridTab;\r\n\r\n  /**\r\n   * Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  documentPanelSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * Set to show main panel expanded.\r\n   */\r\n  @Prop()\r\n  mainPanelExpanded = false;\r\n\r\n  /**\r\n   * Set to hide the main panel.\r\n   */\r\n  @Prop()\r\n  mainPanelHidden = false;\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n  /**\r\n   * Emitted when user wants to close the filter panel.\r\n   */\r\n  @Event()\r\n  dsoCloseFilterPanel!: EventEmitter<ViewerGridCloseFilterPanelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filter panel options.\r\n   */\r\n  @Event()\r\n  dsoActiveTabSwitch!: EventEmitter<ViewerGridActiveTabSwitchEvent>;\r\n\r\n  /**\r\n   * Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * Emitted on interaction with sizing buttons.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  /**\r\n   * Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * Emitted when the user wants to expand the main panel.\r\n   */\r\n  @Event()\r\n  dsoMainPanelExpand!: EventEmitter<ViewerGridMainExpandEvent>;\r\n\r\n  /**\r\n   * Emitted when the user toggles the visibility of the main panel.\r\n   *\r\n   * Also emitted by scripting when the panels do not fit anymore.\r\n   */\r\n  @Event()\r\n  dsoMainPanelToggle!: EventEmitter<ViewerGridMainToggleEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoViewerGridElement;\r\n\r\n  @State()\r\n  tabView = window.innerWidth < tabViewBreakpoint;\r\n\r\n  private filterPanel: HTMLDialogElement | undefined;\r\n\r\n  private get filterPanelSlot() {\r\n    return this.host.querySelector(\"[slot='filter-panel']\");\r\n  }\r\n\r\n  private get overlaySlot() {\r\n    return this.host.querySelector(\"[slot='overlay']\");\r\n  }\r\n\r\n  private overlay: HTMLDialogElement | undefined;\r\n\r\n  @Watch(\"documentPanelOpen\")\r\n  documentPanelOpenWatcher(open: boolean) {\r\n    if (open) {\r\n      this._checkMainPanelVisibility();\r\n    }\r\n  }\r\n\r\n  @Watch(\"filterPanelOpen\")\r\n  filterPanelOpenWatcher(open: boolean) {\r\n    if (!this.filterPanelSlot) {\r\n      console.warn(\"slot 'filter-panel' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.filterPanel?.show();\r\n    } else {\r\n      this.filterPanel?.close();\r\n    }\r\n  }\r\n\r\n  @Watch(\"overlayOpen\")\r\n  overlayOpenWatcher(open: boolean) {\r\n    if (!this.overlaySlot) {\r\n      console.warn(\"slot 'overlay' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.overlay?.showModal();\r\n    } else {\r\n      this.overlay?.close();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _checkMainPanelVisibility() {\r\n    if (\r\n      this.documentPanelOpen &&\r\n      !this.mainPanelHidden &&\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) ||\r\n        (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))\r\n    ) {\r\n      this.dsoMainPanelToggle.emit({\r\n        hide: true,\r\n      });\r\n    }\r\n  }\r\n\r\n  private switchActiveTab = (tab: ViewerGridTab) => {\r\n    this.dsoActiveTabSwitch.emit({\r\n      tab,\r\n    });\r\n  };\r\n\r\n  private shrinkDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: this.documentPanelSize === \"large\" ? \"medium\" : \"small\",\r\n    });\r\n  };\r\n\r\n  private expandDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: this.documentPanelSize === \"small\" ? \"medium\" : \"large\",\r\n    });\r\n  };\r\n\r\n  private toggleMainPanel = () => {\r\n    if (\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth\r\n    ) {\r\n      this.mainSize = \"small\";\r\n    }\r\n\r\n    this.dsoMainPanelToggle.emit({\r\n      hide: !this.mainPanelHidden,\r\n    });\r\n  };\r\n\r\n  private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n  connectedCallback() {\r\n    window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.filterPanelOpen && this.filterPanelSlot) {\r\n      this.filterPanel?.show();\r\n    }\r\n\r\n    if (this.overlayOpen && this.overlaySlot) {\r\n      this.overlay?.showModal();\r\n    }\r\n\r\n    if (this.mapElement instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.mapElement);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n\r\n    if (this.mapElement) {\r\n      resizeObserver.unobserve(this.mapElement);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <slot name=\"top-bar\" />\r\n        <div class=\"viewer-grid-columns\">\r\n          {this.tabView && (\r\n            <nav class=\"dso-navbar\">\r\n              <ul class=\"dso-nav dso-nav-sub\">\r\n                {viewerGridTabs.map((tab) => (\r\n                  <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n                    <button type=\"button\" class=\"dso-tertiary\" onClick={() => this.switchActiveTab(tab)}>\r\n                      {viewerGridTabLabelMap[tab]}\r\n                    </button>\r\n                  </li>\r\n                ))}\r\n              </ul>\r\n            </nav>\r\n          )}\r\n          {(!this.tabView || (this.tabView && this.activeTab === \"search\")) && (\r\n            <MainPanel\r\n              tabView={this.tabView}\r\n              mainSize={this.mainSize}\r\n              documentPanelOpen={this.documentPanelOpen}\r\n              mainPanelExpanded={this.mainPanelExpanded}\r\n              mainPanelHidden={this.mainPanelHidden}\r\n              toggleMainPanel={this.toggleMainPanel}\r\n              dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n            ></MainPanel>\r\n          )}\r\n          {(!this.tabView || (this.tabView && this.activeTab === \"search\")) && (\r\n            <FilterPanel\r\n              title={this.filterPanelTitle}\r\n              ref={(element) => (this.filterPanel = element)}\r\n              dsoCloseFilterPanel={(e) => this.dsoCloseFilterPanel.emit({ originalEvent: e })}\r\n            ></FilterPanel>\r\n          )}\r\n          {(!this.tabView || (this.tabView && this.activeTab === \"map\")) && (\r\n            <div class=\"map\" ref={(element) => (this.mapElement = element)}>\r\n              <slot name=\"map\" />\r\n            </div>\r\n          )}\r\n          {((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === \"document\")) && (\r\n            <DocumentPanel\r\n              tabView={this.tabView}\r\n              panelSize={this.documentPanelSize}\r\n              shrinkDocumentPanel={this.shrinkDocumentPanel}\r\n              expandDocumentPanel={this.expandDocumentPanel}\r\n              dsoDocumentPanelSizeChangeAnimationEnd={this.dsoDocumentPanelSizeChangeAnimationEnd}\r\n            ></DocumentPanel>\r\n          )}\r\n          <Overlay\r\n            ref={(element) => (this.overlay = element)}\r\n            dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n          ></Overlay>\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-viewer-grid.js","mappings":";;;;AA6BO,MAAM,cAAc,GAAG,CAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAU;AAK7D,MAAM,qBAAqB,GAA0B;AAC1D,IAAA,GAAG,EAAE,OAAO;AACZ,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,MAAM,EAAE,QAAQ;CACjB;AAEM,MAAM,sBAAsB,GAA2B;AAC5D,IAAA,KAAK,EAAE,MAAM;AACb,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,OAAO;CACf;;ACjCD,MAAM,YAAY,GAA0C,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAC9F,CAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAA;AACtD,IAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EAAE,KAAK,CAAQ;AACpC,IAAA,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAE,IAAI,EAAa,CAAA,CAC1B,CACV;AAUM,MAAM,aAAa,GAA2C,CAAC,EACpE,MAAM,EACN,MAAM,EACN,IAAI,EACJ,UAAU,EACV,SAAS,GACV,KAAI;IACH,MAAM,OAAO,GAAG,EAAE;AAElB,IAAA,IAAI,IAAI,KAAK,OAAO,EAAE;AACpB,QAAA,OAAO,CAAC,IAAI,CACV,CAAA,CAAC,YAAY,EACX,EAAA,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,CAAG,EAAA,UAAU,gBAAgB,EACpC,IAAI,EAAE,SAAS,KAAK,OAAO,GAAG,eAAe,GAAG,cAAc,EAC9D,SAAS,EAAC,QAAQ,EAAA,CAClB,CACH;;AAGH,IAAA,IAAI,IAAI,KAAK,OAAO,EAAE;AACpB,QAAA,OAAO,CAAC,IAAI,CACV,CAAA,CAAC,YAAY,EACX,EAAA,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,CAAG,EAAA,UAAU,eAAe,EACnC,IAAI,EAAE,SAAS,KAAK,OAAO,GAAG,cAAc,GAAG,eAAe,EAC9D,SAAS,EAAC,QAAQ,EAAA,CAClB,CACH;;AAGH,IAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA;AACzB,QAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,SAAS,EAAW,WAAA,EAAA,QAAQ,iBAAa,MAAM,EAAA;;YAChD,UAAU,CAAC,iBAAiB,EAAE;;YAAI,sBAAsB,CAAC,IAAI,CAAC,CAClE;QACN,OAAO,CACJ;AAEV,CAAC;;ACnDM,MAAM,aAAa,GAAsD,CAAC,EAC/E,OAAO,EACP,SAAS,EACT,mBAAmB,EACnB,mBAAmB,EACnB,sCAAsC,GACvC,MACC,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,oBAAoB,EAC1B,eAAe,EAAE,CAAC,CAAC,KAAI;AACrB,QAAA,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,EAAE;YACnC,sCAAsC,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;;KAE1E,EAAA;IAEA,CAAC,OAAO,KACP,CAAC,CAAA,aAAa,EACZ,EAAA,UAAU,EAAC,gBAAgB,EAC3B,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,mBAAmB,EAC3B,MAAM,EAAE,mBAAmB,EAC3B,SAAS,EAAC,OAAO,EAAA,CACjB,CACH;IACD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA;AAClB,QAAA,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,gBAAgB,GAAG,CAC1B,CACF,CACP;;AClCM,MAAM,WAAW,GAAoD,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,mBAAmB,EAAE,MAC9G,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,GAAG,EAAA;IAClC,KAAK,IAAI,CAAK,CAAA,IAAA,EAAA,IAAA,EAAA,KAAK,CAAM;IAC1B,CAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,mBAAmB,EAAA;QAClE,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAY,CAAA;AAClC,QAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EAAA,SAAA,CAAe,CAC7B;AACT,IAAA,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,cAAc,EAAG,CAAA,CACrB,CACV;;ACFM,MAAM,SAAS,GAAkD,CAAC,EACvE,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,6BAA6B,GAC9B,MACC,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE;AAC5B,QAAA,OAAO,EAAE,CAAC,OAAO,IAAI,iBAAiB,IAAI,CAAC,iBAAiB;QAC5D,UAAU,EAAE,CAAC,OAAO,IAAI,CAAC,iBAAiB,IAAI,CAAC,iBAAiB;AAChE,QAAA,QAAQ,EAAE,CAAC,OAAO,IAAI,iBAAiB,IAAI,iBAAiB;AAC5D,QAAA,SAAS,EAAE,eAAe;AAC3B,KAAA,CAAC,EACF,eAAe,EAAE,CAAC,CAAC,KAAI;AACrB,QAAA,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,EAAE;YACnC,6BAA6B,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC;;KAEhE,EAAA;IAEA,CAAC,OAAO,IAAI,iBAAiB,KAC5B,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAA;AACxB,QAAA,CAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,eAAe,EAAA;YAC5C,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA;;gBAAgB,eAAe,GAAG,OAAO,GAAG,WAAW,CAAQ;AACpF,YAAA,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAE,eAAe,GAAG,eAAe,GAAG,cAAc,EAAa,CAAA,CACxE,CACL,CACP;IACD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC,EAAA;AACzD,QAAA,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,CACP;;AC1CM,MAAM,OAAO,GAAgD,CAAC,EAAE,GAAG,EAAE,eAAe,EAAE,MAC3F,CACE,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,CAAC,KAAI;QACd,CAAC,CAAC,cAAc,EAAE;QAElB,eAAe,CAAC,CAAC,CAAC;KACnB,EAAA;IAED,CAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,eAAe,EAAA;QACzE,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAY,CAAA;AAClC,QAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EAAA,SAAA,CAAe,CAC7B;AACT,IAAA,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,SAAS,EAAG,CAAA,CAChB,CACV;;ACvBD,MAAM,aAAa,GAAG,un9BAAun9B;;ACkB7o9B,MAAM,cAAc,GAAG,IAAI,cAAc,CACvC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAI;IACnB,MAAM,UAAU,GAAG,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,MAAM,CAAC,WAAW,EAAE;IAC9C,IAAI,UAAU,YAAY,UAAU,IAAI,wBAAwB,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;AACjF,QAAA,UAAU,CAAC,IAAI,CAAC,yBAAyB,EAAE;;AAE/C,CAAC,EAAE,EAAE,CAAC,CACP;AAED,SAAS,wBAAwB,CAAC,OAAgB,EAAA;AAChD,IAAA,OAAO,OAAO,CAAC,OAAO,KAAK,iBAAiB;AAC9C;AAEA,MAAM,WAAW,GAAG,EAAE;AAEtB,MAAM,iBAAiB,GAAG,GAAG,GAAG,WAAW;AAE3C,MAAM,kBAAkB,GAAG,GAAG;MAejB,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;;;;;;;;;AAMU,QAAA,IAAA,CAAA,cAAc,GAAG,CAAe,YAAA,EAAA,iBAAiB,KAAK;AAU9D;;AAEG;AAEH,QAAA,IAAe,CAAA,eAAA,GAAG,KAAK;AAEvB;;AAEG;AAEH,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAEnB;;AAEG;AAEH,QAAA,IAAiB,CAAA,iBAAA,GAAG,KAAK;AAEzB;;;;AAIG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAwB,OAAO;AAQvC;;;;AAIG;AAEH,QAAA,IAAiB,CAAA,iBAAA,GAAwB,OAAO;AAEhD;;AAEG;AAEH,QAAA,IAAiB,CAAA,iBAAA,GAAG,KAAK;AAEzB;;AAEG;AAEH,QAAA,IAAe,CAAA,eAAA,GAAG,KAAK;QAkDvB,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,UAAU,GAAG,iBAAiB;AAiEvC,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,GAAkB,KAAI;AAC/C,YAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;gBAC3B,GAAG;AACJ,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAmB,CAAA,mBAAA,GAAG,MAAK;AACjC,YAAA,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC;gBACnC,WAAW,EAAE,IAAI,CAAC,iBAAiB;AACnC,gBAAA,QAAQ,EAAE,IAAI,CAAC,iBAAiB,KAAK,OAAO,GAAG,QAAQ,GAAG,OAAO;AAClE,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAmB,CAAA,mBAAA,GAAG,MAAK;AACjC,YAAA,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC;gBACnC,WAAW,EAAE,IAAI,CAAC,iBAAiB;AACnC,gBAAA,QAAQ,EAAE,IAAI,CAAC,iBAAiB,KAAK,OAAO,GAAG,QAAQ,GAAG,OAAO;AAClE,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAe,CAAA,eAAA,GAAG,MAAK;AAC7B,YAAA,IACE,IAAI,CAAC,UAAU,YAAY,cAAc;gBACzC,IAAI,CAAC,UAAU,CAAC,WAAW,IAAI,kBAAkB,GAAG,WAAW,GAAG,WAAW,EAC7E;AACA,gBAAA,IAAI,CAAC,QAAQ,GAAG,OAAO;;AAGzB,YAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;AAC3B,gBAAA,IAAI,EAAE,CAAC,IAAI,CAAC,eAAe;AAC5B,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,WAAgC,MAAM,IAAI,CAAC,OAAO,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC;AAsFrG;AApLC,IAAA,IAAY,eAAe,GAAA;QACzB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC;;AAGzD,IAAA,IAAY,WAAW,GAAA;QACrB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC;;AAMpD,IAAA,wBAAwB,CAAC,IAAa,EAAA;QACpC,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,yBAAyB,EAAE;;;AAKpC,IAAA,sBAAsB,CAAC,IAAa,EAAA;;AAClC,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;AACzB,YAAA,OAAO,CAAC,IAAI,CAAC,sCAAsC,CAAC;;QAGtD,IAAI,IAAI,EAAE;YACR,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,EAAE;;aACnB;YACL,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;;AAK7B,IAAA,kBAAkB,CAAC,IAAa,EAAA;;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACrB,YAAA,OAAO,CAAC,IAAI,CAAC,iCAAiC,CAAC;;QAGjD,IAAI,IAAI,EAAE;YACR,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,SAAS,EAAE;;aACpB;YACL,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;;AAIzB;;AAEG;AAEH,IAAA,MAAM,yBAAyB,GAAA;QAC7B,IACE,IAAI,CAAC,iBAAiB;YACtB,CAAC,IAAI,CAAC,eAAe;YACrB,IAAI,CAAC,UAAU,YAAY,cAAc;AACzC,aAAC,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,IAAI,kBAAkB,GAAG,WAAW,GAAG,WAAW,IAAI,CAAC,IAAI,CAAC,iBAAiB;AACxG,iBAAC,IAAI,CAAC,UAAU,CAAC,WAAW,IAAI,WAAW,GAAG,WAAW,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,EACvF;AACA,YAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;AAC3B,gBAAA,IAAI,EAAE,IAAI;AACX,aAAA,CAAC;;;IAuCN,iBAAiB,GAAA;AACf,QAAA,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC;;IAGxF,gBAAgB,GAAA;;QACd,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,EAAE;YAChD,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,EAAE;;QAG1B,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE;YACxC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,SAAS,EAAE;;AAG3B,QAAA,IAAI,IAAI,CAAC,UAAU,YAAY,cAAc,EAAE;AAC7C,YAAA,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;;;IAI3C,oBAAoB,GAAA;AAClB,QAAA,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC;AAEzF,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;;;IAI7C,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAG,CAAA,EACvB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC7B,IAAI,CAAC,OAAO,KACX,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,qBAAqB,EAAA,EAC5B,cAAc,CAAC,GAAG,CAAC,CAAC,GAAG,MACtB,CAAI,CAAA,IAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,KAAK,GAAG,EAAE,CAAC,EAAA,EACjE,CAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,EAChF,EAAA,qBAAqB,CAAC,GAAG,CAAC,CACpB,CACN,CACN,CAAC,CACC,CACD,CACP,EACA,CAAC,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,MAC9D,CAAC,CAAA,SAAS,EACR,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,6BAA6B,EAAE,IAAI,CAAC,6BAA6B,GACtD,CACd,EACA,CAAC,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,MAC9D,CAAA,CAAC,WAAW,EAAA,EAAA,GAAA,EAAA,0CAAA,EACV,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAC5B,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,EAC9C,mBAAmB,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,GAClE,CAChB,EACA,CAAC,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,MAC3D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,KAAK,EAAC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAAA,EAC5D,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,KAAK,EAAA,CAAG,CACf,CACP,EACA,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,iBAAiB,MAAM,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,KAAK,UAAU,CAAC,MAC5F,CAAC,CAAA,aAAa,EACZ,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,iBAAiB,EACjC,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAC7C,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAC7C,sCAAsC,EAAE,IAAI,CAAC,sCAAsC,EAAA,CACpE,CAClB,EACD,CAAA,CAAC,OAAO,EACN,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,EAC1C,eAAe,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,GAC9D,CACP,CACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/viewer-grid/viewer-grid.interfaces.ts","src/components/viewer-grid/components/sizing-buttons.tsx","src/components/viewer-grid/components/document-panel.tsx","src/components/viewer-grid/components/filter-panel.tsx","src/components/viewer-grid/components/main-panel.tsx","src/components/viewer-grid/components/overlay.tsx","src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n  currentSize: ViewerGridPanelSize;\r\n  nextSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridChangeSizeAnimationEndEvent {\r\n  currentSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridCloseFilterPanelEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridActiveTabSwitchEvent {\r\n  tab: ViewerGridTab;\r\n}\r\n\r\nexport interface ViewerGridMainToggleEvent {\r\n  hide: boolean;\r\n}\r\n\r\nexport type ViewerGridPanelSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type ViewerGridLabelSizeMap = { [key in ViewerGridPanelSize]: string };\r\n\r\nexport const viewerGridTabs = [\"search\", \"map\", \"document\"] as const;\r\nexport type ViewerGridTab = (typeof viewerGridTabs)[number];\r\n\r\nexport type ViewerGridTabLabelMap = { [key in ViewerGridTab]: string };\r\n\r\nexport const viewerGridTabLabelMap: ViewerGridTabLabelMap = {\r\n  map: \"Kaart\",\r\n  document: \"Document\",\r\n  search: \"Zoeken\",\r\n};\r\n\r\nexport const viewerGridSizeLabelMap: ViewerGridLabelSizeMap = {\r\n  small: \"smal\",\r\n  medium: \"middel\",\r\n  large: \"breed\",\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridPanelSize, viewerGridSizeLabelMap } from \"../viewer-grid.interfaces\";\r\n\r\ninterface SizingButtonProp {\r\n  className: string;\r\n  onClick: any;\r\n  label: string;\r\n  icon: \"chevron-left\" | \"chevron-right\";\r\n}\r\n\r\nconst SizingButton: FunctionalComponent<SizingButtonProp> = ({ className, onClick, label, icon }) => (\r\n  <button type=\"button\" class={className} onClick={onClick}>\r\n    <span class=\"sr-only\">{label}</span>\r\n    <dso-icon icon={icon}></dso-icon>\r\n  </button>\r\n);\r\n\r\ninterface SizingButtonProps {\r\n  panelLabel: string;\r\n  size: ViewerGridPanelSize;\r\n  expand: () => void;\r\n  shrink: () => void;\r\n  placement: \"left\" | \"right\";\r\n}\r\n\r\nexport const SizingButtons: FunctionalComponent<SizingButtonProps> = ({\r\n  shrink,\r\n  expand,\r\n  size,\r\n  panelLabel,\r\n  placement,\r\n}) => {\r\n  const buttons = [];\r\n\r\n  if (size !== \"small\") {\r\n    buttons.push(\r\n      <SizingButton\r\n        onClick={shrink}\r\n        label={`${panelLabel} smaller maken`}\r\n        icon={placement === \"right\" ? \"chevron-right\" : \"chevron-left\"}\r\n        className=\"shrink\"\r\n      />,\r\n    );\r\n  }\r\n\r\n  if (size !== \"large\") {\r\n    buttons.push(\r\n      <SizingButton\r\n        onClick={expand}\r\n        label={`${panelLabel} breder maken`}\r\n        icon={placement === \"right\" ? \"chevron-left\" : \"chevron-right\"}\r\n        className=\"expand\"\r\n      />,\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div class=\"sizing-buttons\">\r\n      <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n        Breedte {panelLabel.toLocaleLowerCase()}: {viewerGridSizeLabelMap[size]}\r\n      </span>\r\n      {buttons}\r\n    </div>\r\n  );\r\n};\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridChangeSizeAnimationEndEvent, ViewerGridPanelSize } from \"../viewer-grid.interfaces\";\r\n\r\nimport { SizingButtons } from \"./sizing-buttons\";\r\n\r\nexport interface ViewerGridDocumentPanelProps {\r\n  tabView: boolean;\r\n  panelSize: ViewerGridPanelSize;\r\n  shrinkDocumentPanel: () => void;\r\n  expandDocumentPanel: () => void;\r\n  dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const DocumentPanel: FunctionalComponent<ViewerGridDocumentPanelProps> = ({\r\n  tabView,\r\n  panelSize,\r\n  shrinkDocumentPanel,\r\n  expandDocumentPanel,\r\n  dsoDocumentPanelSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class=\"dso-document-panel\"\r\n    onTransitionEnd={(e) => {\r\n      if (e.propertyName === \"flex-basis\") {\r\n        dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });\r\n      }\r\n    }}\r\n  >\r\n    {!tabView && (\r\n      <SizingButtons\r\n        panelLabel=\"Documentpaneel\"\r\n        size={panelSize}\r\n        expand={expandDocumentPanel}\r\n        shrink={shrinkDocumentPanel}\r\n        placement=\"right\"\r\n      />\r\n    )}\r\n    <div class=\"content\">\r\n      <slot name=\"document-panel\" />\r\n    </div>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterPanelProps {\r\n  title?: string;\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  dsoCloseFilterPanel: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const FilterPanel: FunctionalComponent<ViewerGridFilterPanelProps> = ({ title, ref, dsoCloseFilterPanel }) => (\r\n  <dialog class=\"filter-panel\" ref={ref}>\r\n    {title && <h3>{title}</h3>}\r\n    <button type=\"button\" class=\"dso-close\" onClick={dsoCloseFilterPanel}>\r\n      <dso-icon icon=\"times\"></dso-icon>\r\n      <span class=\"sr-only\">Sluiten</span>\r\n    </button>\r\n    <slot name=\"filter-panel\" />\r\n  </dialog>\r\n);\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridChangeSizeAnimationEndEvent, ViewerGridPanelSize } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n  tabView: boolean;\r\n  mainSize: ViewerGridPanelSize;\r\n  documentPanelOpen: boolean;\r\n  mainPanelExpanded: boolean;\r\n  mainPanelHidden: boolean;\r\n  toggleMainPanel: () => void;\r\n  dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n  tabView,\r\n  mainSize,\r\n  documentPanelOpen,\r\n  mainPanelExpanded,\r\n  mainPanelHidden,\r\n  toggleMainPanel,\r\n  dsoMainSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class={clsx(\"dso-main-panel\", {\r\n      compact: !tabView && documentPanelOpen && !mainPanelExpanded,\r\n      contracted: !tabView && !documentPanelOpen && !mainPanelExpanded,\r\n      expanded: !tabView && documentPanelOpen && mainPanelExpanded,\r\n      collapsed: mainPanelHidden,\r\n    })}\r\n    onTransitionEnd={(e) => {\r\n      if (e.propertyName === \"flex-basis\") {\r\n        dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });\r\n      }\r\n    }}\r\n  >\r\n    {!tabView && documentPanelOpen && (\r\n      <div class=\"toggle-button\">\r\n        <button type=\"button\" onClick={toggleMainPanel}>\r\n          <span class=\"sr-only\">Zoeken paneel {mainPanelHidden ? \"tonen\" : \"verbergen\"}</span>\r\n          <dso-icon icon={mainPanelHidden ? \"chevron-right\" : \"chevron-left\"}></dso-icon>\r\n        </button>\r\n      </div>\r\n    )}\r\n    <div class={clsx(\"content\", { invisible: mainPanelHidden })}>\r\n      <slot name=\"main\" />\r\n    </div>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridOverlayProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  dsoCloseOverlay: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Overlay: FunctionalComponent<ViewerGridOverlayProps> = ({ ref, dsoCloseOverlay }) => (\r\n  <dialog\r\n    class=\"overlay\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      dsoCloseOverlay(e);\r\n    }}\r\n  >\r\n    <button type=\"button\" class=\"overlay-close-button\" onClick={dsoCloseOverlay}>\r\n      <dso-icon icon=\"times\"></dso-icon>\r\n      <span class=\"sr-only\">sluiten</span>\r\n    </button>\r\n    <slot name=\"overlay\" />\r\n  </dialog>\r\n);\r\n","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/navbar\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  .overlay {\r\n    block-size: calc(100% - units.$u4);\r\n    margin-block: units.$u2;\r\n    margin-inline: auto units.$u2;\r\n  }\r\n\r\n  .dso-main-panel {\r\n    transition:\r\n      min-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n      margin-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n\r\n.overlay-close-button {\r\n  position: absolute;\r\n  inset-block-start: units.$u1;\r\n  inset-inline-end: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.content.invisible {\r\n  visibility: hidden;\r\n}\r\n\r\n.viewer-grid-columns {\r\n  position: relative;\r\n}\r\n\r\n.dso-main-panel,\r\n.dso-document-panel {\r\n  .content {\r\n    block-size: 100%;\r\n    padding-block: 0;\r\n    padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n  }\r\n}\r\n\r\n.dso-main-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition:\r\n    flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n    min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  &.compact,\r\n  &.expanded {\r\n    &.collapsed {\r\n      inset-inline-start: -432px;\r\n    }\r\n  }\r\n\r\n  &.compact,\r\n  &.contracted {\r\n    flex-shrink: unset;\r\n    flex-grow: unset;\r\n    position: absolute;\r\n    transition: none;\r\n  }\r\n\r\n  &.expanded.collapsed {\r\n    position: absolute;\r\n    block-size: 100%;\r\n  }\r\n\r\n  .sizing-buttons,\r\n  .toggle-button {\r\n    inset-inline-start: calc(100% + 1px);\r\n    transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n    padding-block: 0 units.$u1;\r\n    padding-inline: 0 units.$u1 * 0.5;\r\n\r\n    button {\r\n      border-end-end-radius: 4px;\r\n      border-start-end-radius: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-document-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition:\r\n    flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n    min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  .sizing-buttons {\r\n    inset-block-start: auto;\r\n    inset-block-end: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n    inset-inline-end: calc(100% + 1px);\r\n    transition: inset-inline-end core-viewer-grid-variables.$transition-time ease-in;\r\n    padding-block: 0 units.$u1;\r\n    padding-inline: units.$u1 * 0.5 0;\r\n\r\n    button {\r\n      border-end-start-radius: 4px;\r\n      border-start-start-radius: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n.sizing-buttons,\r\n.toggle-button {\r\n  overflow-x: hidden;\r\n  position: absolute;\r\n  inset-block-start: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n  inline-size: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n  z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n    & {\r\n      border: 0;\r\n      padding: 8px;\r\n      border-radius: 0;\r\n      box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n      flex: 0 0 100%;\r\n      block-size: core-viewer-grid-variables.$resize-button-size;\r\n      min-inline-size: auto;\r\n      inline-size: core-viewer-grid-variables.$resize-button-size;\r\n    }\r\n\r\n    &:hover {\r\n      dso-icon {\r\n        color: colors.$wit;\r\n      }\r\n    }\r\n\r\n    &:focus-visible {\r\n      outline-offset: -1px;\r\n    }\r\n  }\r\n}\r\n\r\n.map {\r\n  block-size: 100%;\r\n  inline-size: 100%;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n.filter-panel,\r\n.overlay {\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  block-size: 100%;\r\n  margin-block: 0;\r\n  max-block-size: 100vh;\r\n  overflow-y: auto;\r\n  z-index: zindex.$viewer-grid-main-panel + 1;\r\n}\r\n\r\n.filter-panel {\r\n  display: block;\r\n  position: absolute;\r\n  padding-block: units.$u1;\r\n  padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n  inset-block-start: 0;\r\n  block-size: 100%;\r\n  inset-inline-start: calc(core-viewer-grid-variables.$filter-panel-max-inline-size * -1);\r\n  inline-size: 100%;\r\n  transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$filter-panel-inline-size) {\r\n    inline-size: 100vw;\r\n\r\n    &::before {\r\n      display: none !important;\r\n    }\r\n  }\r\n\r\n  @media screen and (min-width: #{media-query-breakpoints.$screen-md-min}) {\r\n    max-inline-size: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n  }\r\n\r\n  &[open] {\r\n    inset-inline-start: 0;\r\n    box-shadow: none;\r\n    border-inline-end: 1px solid core-viewer-grid-variables.$filter-panel-border-color;\r\n  }\r\n\r\n  h3 {\r\n    color: colors.$bosgroen;\r\n  }\r\n\r\n  .dso-close {\r\n    @include button.element();\r\n\r\n    position: absolute;\r\n    inset-block-start: units.$u2;\r\n    inset-inline-end: units.$u2;\r\n\r\n    block-size: units.$u4;\r\n    inline-size: units.$u4;\r\n\r\n    padding: 0;\r\n\r\n    background-color: transparent;\r\n\r\n    border: 0;\r\n    text-align: center;\r\n  }\r\n}\r\n\r\n.overlay {\r\n  padding-block: units.$u5 units.$u1;\r\n  padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n  inset-inline-end: 0;\r\n  inline-size: core-viewer-grid-variables.$overlay-inline-size;\r\n\r\n  &::backdrop {\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n  }\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$overlay-inline-size) {\r\n    inline-size: 100vw;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-sm-min + units.$u5}) {\r\n  :host([main-size=\"small\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"small\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$small;\r\n    min-inline-size: 0;\r\n    max-inline-size: core-viewer-grid-variables.$small;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n      flex-basis: 100vw;\r\n      max-inline-size: 100vw;\r\n      min-inline-size: 0;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host([main-size=\"medium\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"medium\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$medium;\r\n    min-inline-size: core-viewer-grid-variables.$small;\r\n    max-inline-size: core-viewer-grid-variables.$medium;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n      flex-basis: 100vw;\r\n      max-inline-size: 100vw;\r\n      min-inline-size: core-viewer-grid-variables.$small;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host([main-size=\"large\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"large\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$large;\r\n    min-inline-size: core-viewer-grid-variables.$large-min;\r\n    max-inline-size: core-viewer-grid-variables.$large-max;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n      flex-basis: 100vw;\r\n      max-inline-size: 100vw;\r\n      min-inline-size: core-viewer-grid-variables.$large-min;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host {\r\n    display: flex;\r\n    flex-direction: column;\r\n    block-size: 100vh;\r\n    overflow: clip;\r\n    position: relative;\r\n\r\n    .dso-main-panel.compact,\r\n    .dso-main-panel.expanded {\r\n      flex-basis: unset;\r\n      min-inline-size: unset;\r\n      max-inline-size: unset;\r\n      inline-size: 440px;\r\n    }\r\n\r\n    .viewer-grid-columns {\r\n      display: flex;\r\n      overflow: hidden;\r\n      flex-grow: 1;\r\n    }\r\n  }\r\n\r\n  .dso-main-panel,\r\n  .dso-document-panel {\r\n    box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n\r\n    .content {\r\n      overflow-y: auto;\r\n    }\r\n  }\r\n\r\n  .filter-panel {\r\n    margin-inline: 0 auto;\r\n    inline-size: calc(100vw - 40px);\r\n\r\n    &[open] {\r\n      border-inline-end: 1px solid core-viewer-grid-variables.$filter-panel-border-color;\r\n    }\r\n  }\r\n\r\n  .overlay {\r\n    box-shadow: -2px 0 5px colors.$grijs-60;\r\n    margin-inline: auto 0;\r\n  }\r\n\r\n  @media screen and (max-width: #{media-query-breakpoints.$screen-sm-max + units.$u5 + 0.99}) {\r\n    :host([filter-panel-open]) {\r\n      .dso-main-panel {\r\n        margin-inline-start: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n        max-inline-size: calc(100vw - #{core-viewer-grid-variables.$filter-panel-max-inline-size});\r\n      }\r\n    }\r\n\r\n    .filter-panel {\r\n      inline-size: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n      inset-inline-start: -(core-viewer-grid-variables.$filter-panel-max-inline-size);\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (max-width: #{media-query-breakpoints.$screen-xs-max + units.$u5 + 0.99}) {\r\n  @include navbar.root();\r\n\r\n  .dso-navbar {\r\n    padding-inline: units.$u2;\r\n  }\r\n\r\n  .dso-nav {\r\n    @include navbar.nav-border();\r\n\r\n    display: flex;\r\n    gap: units.$u2;\r\n    margin-block-start: 0;\r\n    inline-size: calc(100vw - units.$u4);\r\n  }\r\n\r\n  .dso-tertiary {\r\n    @include button.tertiary($modifiers: false);\r\n\r\n    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n    & {\r\n      font-weight: 300;\r\n    }\r\n  }\r\n\r\n  .filter-panel,\r\n  .overlay {\r\n    margin-inline: 0;\r\n    max-inline-size: 100vw;\r\n    inset-block-start: 0;\r\n    inline-size: 100vw;\r\n  }\r\n\r\n  .filter-panel {\r\n    inset-inline-start: -100vw;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-md-min}) {\r\n  :host([filter-panel-open]) {\r\n    .dso-main-panel {\r\n      margin-inline-start: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DocumentPanel, FilterPanel, MainPanel, Overlay } from \"./components\";\r\nimport {\r\n  ViewerGridActiveTabSwitchEvent,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  ViewerGridChangeSizeEvent,\r\n  ViewerGridCloseFilterPanelEvent,\r\n  ViewerGridCloseOverlayEvent,\r\n  ViewerGridMainToggleEvent,\r\n  ViewerGridPanelSize,\r\n  ViewerGridTab,\r\n  viewerGridTabLabelMap,\r\n  viewerGridTabs,\r\n} from \"./viewer-grid.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(([entry]) => {\r\n    const shadowRoot = entry?.target.getRootNode();\r\n    if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {\r\n      shadowRoot.host._checkMainPanelVisibility();\r\n    }\r\n  }, 50),\r\n);\r\n\r\nfunction isDsoViewerGridComponent(element: Element): element is HTMLDsoViewerGridElement {\r\n  return element.tagName === \"DSO-VIEWER-GRID\";\r\n}\r\n\r\nconst buttonWidth = 40;\r\n\r\nconst tabViewBreakpoint = 768 + buttonWidth;\r\n\r\nconst minMapElementWidth = 440;\r\n\r\n/**\r\n * @slot top-bar - Een slot die bovenaan de viewer over de hele breedte kan worden gevuld met bijv een banner.\r\n * @slot main\r\n * @slot map\r\n * @slot filter-panel\r\n * @slot overlay\r\n * @slot document-panel\r\n */\r\n@Component({\r\n  tag: \"dso-viewer-grid\",\r\n  styleUrl: \"viewer-grid.scss\",\r\n  shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n  private mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;\r\n\r\n  private mapElement?: HTMLDivElement;\r\n\r\n  /**\r\n   * The title of the filter panel\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterPanelTitle?: string;\r\n\r\n  /**\r\n   * Set to true when filter panel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterPanelOpen = false;\r\n\r\n  /**\r\n   * Set to true when overlay should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  overlayOpen = false;\r\n\r\n  /**\r\n   * Set to true when document panel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  documentPanelOpen = false;\r\n\r\n  /**\r\n   * Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  mainSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * Set active tab in tab view.\r\n   */\r\n  @Prop()\r\n  activeTab?: ViewerGridTab;\r\n\r\n  /**\r\n   * Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  documentPanelSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * Set to show main panel expanded.\r\n   */\r\n  @Prop()\r\n  mainPanelExpanded = false;\r\n\r\n  /**\r\n   * Set to hide the main panel.\r\n   */\r\n  @Prop()\r\n  mainPanelHidden = false;\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n  /**\r\n   * Emitted when user wants to close the filter panel.\r\n   */\r\n  @Event()\r\n  dsoCloseFilterPanel!: EventEmitter<ViewerGridCloseFilterPanelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filter panel options.\r\n   */\r\n  @Event()\r\n  dsoActiveTabSwitch!: EventEmitter<ViewerGridActiveTabSwitchEvent>;\r\n\r\n  /**\r\n   * Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * Emitted on interaction with sizing buttons.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  /**\r\n   * Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * Emitted when the user toggles the visibility of the main panel.\r\n   *\r\n   * Also emitted by scripting when the panels do not fit anymore.\r\n   */\r\n  @Event()\r\n  dsoMainPanelToggle!: EventEmitter<ViewerGridMainToggleEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoViewerGridElement;\r\n\r\n  @State()\r\n  tabView = window.innerWidth < tabViewBreakpoint;\r\n\r\n  private filterPanel: HTMLDialogElement | undefined;\r\n\r\n  private get filterPanelSlot() {\r\n    return this.host.querySelector(\"[slot='filter-panel']\");\r\n  }\r\n\r\n  private get overlaySlot() {\r\n    return this.host.querySelector(\"[slot='overlay']\");\r\n  }\r\n\r\n  private overlay: HTMLDialogElement | undefined;\r\n\r\n  @Watch(\"documentPanelOpen\")\r\n  documentPanelOpenWatcher(open: boolean) {\r\n    if (open) {\r\n      this._checkMainPanelVisibility();\r\n    }\r\n  }\r\n\r\n  @Watch(\"filterPanelOpen\")\r\n  filterPanelOpenWatcher(open: boolean) {\r\n    if (!this.filterPanelSlot) {\r\n      console.warn(\"slot 'filter-panel' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.filterPanel?.show();\r\n    } else {\r\n      this.filterPanel?.close();\r\n    }\r\n  }\r\n\r\n  @Watch(\"overlayOpen\")\r\n  overlayOpenWatcher(open: boolean) {\r\n    if (!this.overlaySlot) {\r\n      console.warn(\"slot 'overlay' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.overlay?.showModal();\r\n    } else {\r\n      this.overlay?.close();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _checkMainPanelVisibility() {\r\n    if (\r\n      this.documentPanelOpen &&\r\n      !this.mainPanelHidden &&\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) ||\r\n        (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))\r\n    ) {\r\n      this.dsoMainPanelToggle.emit({\r\n        hide: true,\r\n      });\r\n    }\r\n  }\r\n\r\n  private switchActiveTab = (tab: ViewerGridTab) => {\r\n    this.dsoActiveTabSwitch.emit({\r\n      tab,\r\n    });\r\n  };\r\n\r\n  private shrinkDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: this.documentPanelSize === \"large\" ? \"medium\" : \"small\",\r\n    });\r\n  };\r\n\r\n  private expandDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: this.documentPanelSize === \"small\" ? \"medium\" : \"large\",\r\n    });\r\n  };\r\n\r\n  private toggleMainPanel = () => {\r\n    if (\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth\r\n    ) {\r\n      this.mainSize = \"small\";\r\n    }\r\n\r\n    this.dsoMainPanelToggle.emit({\r\n      hide: !this.mainPanelHidden,\r\n    });\r\n  };\r\n\r\n  private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n  connectedCallback() {\r\n    window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.filterPanelOpen && this.filterPanelSlot) {\r\n      this.filterPanel?.show();\r\n    }\r\n\r\n    if (this.overlayOpen && this.overlaySlot) {\r\n      this.overlay?.showModal();\r\n    }\r\n\r\n    if (this.mapElement instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.mapElement);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n\r\n    if (this.mapElement) {\r\n      resizeObserver.unobserve(this.mapElement);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <slot name=\"top-bar\" />\r\n        <div class=\"viewer-grid-columns\">\r\n          {this.tabView && (\r\n            <nav class=\"dso-navbar\">\r\n              <ul class=\"dso-nav dso-nav-sub\">\r\n                {viewerGridTabs.map((tab) => (\r\n                  <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n                    <button type=\"button\" class=\"dso-tertiary\" onClick={() => this.switchActiveTab(tab)}>\r\n                      {viewerGridTabLabelMap[tab]}\r\n                    </button>\r\n                  </li>\r\n                ))}\r\n              </ul>\r\n            </nav>\r\n          )}\r\n          {(!this.tabView || (this.tabView && this.activeTab === \"search\")) && (\r\n            <MainPanel\r\n              tabView={this.tabView}\r\n              mainSize={this.mainSize}\r\n              documentPanelOpen={this.documentPanelOpen}\r\n              mainPanelExpanded={this.mainPanelExpanded}\r\n              mainPanelHidden={this.mainPanelHidden}\r\n              toggleMainPanel={this.toggleMainPanel}\r\n              dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n            ></MainPanel>\r\n          )}\r\n          {(!this.tabView || (this.tabView && this.activeTab === \"search\")) && (\r\n            <FilterPanel\r\n              title={this.filterPanelTitle}\r\n              ref={(element) => (this.filterPanel = element)}\r\n              dsoCloseFilterPanel={(e) => this.dsoCloseFilterPanel.emit({ originalEvent: e })}\r\n            ></FilterPanel>\r\n          )}\r\n          {(!this.tabView || (this.tabView && this.activeTab === \"map\")) && (\r\n            <div class=\"map\" ref={(element) => (this.mapElement = element)}>\r\n              <slot name=\"map\" />\r\n            </div>\r\n          )}\r\n          {((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === \"document\")) && (\r\n            <DocumentPanel\r\n              tabView={this.tabView}\r\n              panelSize={this.documentPanelSize}\r\n              shrinkDocumentPanel={this.shrinkDocumentPanel}\r\n              expandDocumentPanel={this.expandDocumentPanel}\r\n              dsoDocumentPanelSizeChangeAnimationEnd={this.dsoDocumentPanelSizeChangeAnimationEnd}\r\n            ></DocumentPanel>\r\n          )}\r\n          <Overlay\r\n            ref={(element) => (this.overlay = element)}\r\n            dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n          ></Overlay>\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1,19 +1,19 @@
-import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-DHO_Za64.js';
+import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-Dm38fPV4.js';
 import { g as getDefaultExportFromCjs, c as commonjsGlobal } from './p-BxvZeNWe.js';
-import { d as defineCustomElement$f } from './p-DZ8OX1GG.js';
-import { d as defineCustomElement$e } from './p-DyzZdG1l.js';
-import { d as defineCustomElement$d } from './p-0OxrSmuX.js';
-import { d as defineCustomElement$c } from './p-BP2p2tL5.js';
-import { d as defineCustomElement$b } from './p-DM1_b6nQ.js';
-import { d as defineCustomElement$a } from './p-DJ7nyiIt.js';
-import { d as defineCustomElement$9 } from './p-DSdjKKyW.js';
-import { d as defineCustomElement$8 } from './p-BlvELqv3.js';
-import { d as defineCustomElement$7 } from './p-9zjtdLN6.js';
-import { d as defineCustomElement$6 } from './p-Dxegur3q.js';
-import { d as defineCustomElement$5 } from './p-BLcgQKpu.js';
-import { d as defineCustomElement$4 } from './p-BzRDrr-_.js';
-import { d as defineCustomElement$3 } from './p-DpoKLKOQ.js';
-import { d as defineCustomElement$2 } from './p-DNO4kzq4.js';
+import { d as defineCustomElement$f } from './p-CYNNmESE.js';
+import { d as defineCustomElement$e } from './p-CH8BjCNJ.js';
+import { d as defineCustomElement$d } from './p-C_-6M4mA.js';
+import { d as defineCustomElement$c } from './p-BnSdv9VD.js';
+import { d as defineCustomElement$b } from './p-lE-KxpG-.js';
+import { d as defineCustomElement$a } from './p-CXEXoC_s.js';
+import { d as defineCustomElement$9 } from './p-CUZmPl-a.js';
+import { d as defineCustomElement$8 } from './p-DcxEm1dI.js';
+import { d as defineCustomElement$7 } from './p-BQF5fCSD.js';
+import { d as defineCustomElement$6 } from './p-B3BAWGAx.js';
+import { d as defineCustomElement$5 } from './p-Dt1j98T1.js';
+import { d as defineCustomElement$4 } from './p-D92MZVkr.js';
+import { d as defineCustomElement$3 } from './p-D3I3eS2K.js';
+import { d as defineCustomElement$2 } from './p-DNULhBX2.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -1847,7 +1847,7 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
         "openDefault": ["openDefaultWatcher"]
     }; }
     static get style() { return documentComponentDemoCss; }
-}, [2, "dsot-document-component-demo", {
+}, [258, "dsot-document-component-demo", {
         "showCanvas": [516, "show-canvas"],
         "jsonFile": [1, "json-file"],
         "openDefault": [4, "open-default"],

package/dist/bundle/index.js

@@ -62,7 +62,7 @@ import { DsoTooltip } from './dso-tooltip.js';
 import { DsoTreeView } from './dso-tree-view.js';
 import { DsoViewerGrid } from './dso-viewer-grid.js';
 import { DsotDocumentComponentDemo } from './dsot-document-component-demo.js';
-export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-DHO_Za64.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-Dm38fPV4.js';
 
 const defineCustomElements = (opts) => {
     if (typeof customElements !== 'undefined') {

package/dist/bundle/{p-Hd6HHp3Q.js → p--iZjxqv3.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-DHO_Za64.js';
-import { d as defineCustomElement$1 } from './p-DM1_b6nQ.js';
+import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-Dm38fPV4.js';
+import { d as defineCustomElement$1 } from './p-lE-KxpG-.js';
 
 const infoCss = "@charset \"UTF-8\";:host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative}:host{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f2f2f2;border-color:#f2f2f2;color:#191919}: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-zwart\"))}: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-zwart\"))}: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-zwart\"))}: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#email-zwart\"))}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;inset-inline-end:8px;inset-block-start:8px}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}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}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 
@@ -14,7 +14,7 @@ const Info = /*@__PURE__*/ proxyCustomElement(class Info extends H {
         return (h(Fragment, { key: '7c3f9fed7a8ab8dbabe817e1b978e940f26f27f8' }, h("slot", { key: '74dbbbdf2d445f448a7de100196ef0df2305734f' }), !this.fixed && (h("button", { key: '5e702078b32a2d57fafb0758941c57548d7a5851', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: '494887a2f0fa4ab19a2d2b448d9821a001cd9cfb', icon: "times" }), h("span", { key: '052dde259dd0f396097b3c3ead102bb10edda4ff', class: "sr-only" }, "Sluiten")))));
     }
     static get style() { return infoCss; }
-}, [1, "dso-info", {
+}, [257, "dso-info", {
         "fixed": [516],
         "active": [516]
     }]);
@@ -38,6 +38,6 @@ function defineCustomElement() {
 }
 
 export { Info as I, defineCustomElement as d };
-//# sourceMappingURL=p-Hd6HHp3Q.js.map
+//# sourceMappingURL=p--iZjxqv3.js.map
 
-//# sourceMappingURL=p-Hd6HHp3Q.js.map
+//# sourceMappingURL=p--iZjxqv3.js.map

package/dist/bundle/{p-Hd6HHp3Q.js.map → p--iZjxqv3.js.map}

@@ -1 +1 @@
-{"file":"p-Hd6HHp3Q.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,6sDAA6sD;;MCOhtD,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;;;;;;;IAmBf,MAAM,GAAA;QACJ,QACE,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACZ,CAAC,IAAI,CAAC,KAAK,KACV,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAA,EACzD,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAY,CAAA,EAClC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAAA,SAAA,CAAe,CAC7B,CACV,CACQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n  display: block;\r\n\r\n  @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n  display: none;\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n","import { Component, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-info\",\r\n  styleUrl: \"./info.scss\",\r\n  shadow: true,\r\n})\r\nexport class Info {\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fixed?: boolean;\r\n\r\n  /**\r\n   * Whether the Info is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the close button.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <slot></slot>\r\n        {!this.fixed && (\r\n          <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Sluiten</span>\r\n          </button>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p--iZjxqv3.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,6sDAA6sD;;MCOhtD,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;;;;;;;IAmBf,MAAM,GAAA;QACJ,QACE,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACZ,CAAC,IAAI,CAAC,KAAK,KACV,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAA,EACzD,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAY,CAAA,EAClC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAAA,SAAA,CAAe,CAC7B,CACV,CACQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n  display: block;\r\n\r\n  @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n  display: none;\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n","import { Component, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-info\",\r\n  styleUrl: \"./info.scss\",\r\n  shadow: true,\r\n})\r\nexport class Info {\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fixed?: boolean;\r\n\r\n  /**\r\n   * Whether the Info is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the close button.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <slot></slot>\r\n        {!this.fixed && (\r\n          <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Sluiten</span>\r\n          </button>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/{p-Dxegur3q.js → p-B3BAWGAx.js}

@@ -1,4 +1,4 @@
-import { h, F as Fragment, p as proxyCustomElement, H, e as createEvent } from './p-DHO_Za64.js';
+import { h, F as Fragment, p as proxyCustomElement, H, e as createEvent } from './p-Dm38fPV4.js';
 
 const RenvooiRenderText = ({ text, mark, onMarkItemHighlight }) => {
     if (!mark) {
@@ -59,7 +59,7 @@ const Renvooi = /*@__PURE__*/ proxyCustomElement(class Renvooi extends H {
         return (h(Fragment, null, this.values.map((v) => (h(RenvooiRender, { value: v, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, v, this.values); }), onMarkItemHighlight: this.handleMarkItemHighlight })))));
     }
     static get style() { return renvooiCss; }
-}, [1, "dso-renvooi", {
+}, [257, "dso-renvooi", {
         "value": [1],
         "mark": [16]
     }]);
@@ -78,6 +78,6 @@ function defineCustomElement() {
 }
 
 export { Renvooi as R, defineCustomElement as d };
-//# sourceMappingURL=p-Dxegur3q.js.map
+//# sourceMappingURL=p-B3BAWGAx.js.map
 
-//# sourceMappingURL=p-Dxegur3q.js.map
+//# sourceMappingURL=p-B3BAWGAx.js.map

package/dist/bundle/{p-Dxegur3q.js.map → p-B3BAWGAx.js.map}

@@ -1 +1 @@
-{"file":"p-Dxegur3q.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/renvooi/renvooi-render-text.tsx","src/components/renvooi/renvooi-render.tsx","src/components/renvooi/renvooi.scss?tag=dso-renvooi&encapsulation=shadow","src/components/renvooi/renvooi.tsx"],"sourcesContent":["import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRenderMarkFunction } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderTextProps {\r\n  text: string;\r\n  mark: RenvooiRenderMarkFunction | undefined;\r\n  onMarkItemHighlight: (text: string, ref: HTMLElement) => void | undefined;\r\n}\r\n\r\nexport const RenvooiRenderText: FunctionalComponent<RenvooiRenderTextProps> = ({ text, mark, onMarkItemHighlight }) => {\r\n  if (!mark) {\r\n    return <>{text}</>;\r\n  }\r\n\r\n  const result = mark(text);\r\n\r\n  if (!result) {\r\n    return <>{text}</>;\r\n  }\r\n\r\n  return (\r\n    <>\r\n      {result.map((renvooiText) => {\r\n        if (typeof renvooiText === \"string\") {\r\n          return <>{renvooiText}</>;\r\n        }\r\n\r\n        return (\r\n          <mark\r\n            class={renvooiText.highlight ? \"dso-highlight\" : undefined}\r\n            ref={(ref) => renvooiText.highlight && ref && onMarkItemHighlight(renvooiText.text, ref)}\r\n          >\r\n            {renvooiText.text}\r\n          </mark>\r\n        );\r\n      })}\r\n    </>\r\n  );\r\n};\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRenderText } from \"./renvooi-render-text\";\r\nimport { RenvooiRenderMarkFunction, RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderProps {\r\n  value: RenvooiValue;\r\n  mark: RenvooiRenderMarkFunction | undefined;\r\n  onMarkItemHighlight: (text: string, elementRef: HTMLElement) => void | undefined;\r\n}\r\n\r\nexport const RenvooiRender: FunctionalComponent<RenvooiRenderProps> = ({ value, mark, onMarkItemHighlight }) => {\r\n  if (typeof value === \"string\" || !value) {\r\n    // This element is used for --_dso-renvooi-text-decoration\r\n    return (\r\n      <span class=\"text\">\r\n        <RenvooiRenderText text={value} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </span>\r\n    );\r\n  }\r\n\r\n  if (\"toegevoegd\" in value) {\r\n    return (\r\n      <ins>\r\n        <RenvooiRenderText text={value.toegevoegd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </ins>\r\n    );\r\n  }\r\n\r\n  if (\"verwijderd\" in value) {\r\n    return (\r\n      <del>\r\n        <RenvooiRenderText text={value.verwijderd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </del>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <del>\r\n        <RenvooiRenderText text={value.was} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </del>\r\n      <ins>\r\n        <RenvooiRenderText text={value.wordt} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </ins>\r\n    </>\r\n  );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n@use \"~dso-toolkit/src/components/mark/mark\";\r\n\r\n:host {\r\n  display: inline;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.text {\r\n  text-decoration: var(--_dso-renvooi-text-decoration);\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRender } from \"./renvooi-render\";\r\nimport { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\n/**\r\n * Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n */\r\n@Component({\r\n  tag: \"dso-renvooi\",\r\n  styleUrl: \"renvooi.scss\",\r\n  shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n  /**\r\n   * The renvooi value to render.\r\n   */\r\n  @Prop()\r\n  value?: RenvooiValue | RenvooiValue[];\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: RenvooiMarkFunction;\r\n\r\n  /**\r\n   * Emitted when a marked item is highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRenvooiMarkItemHighlight!: EventEmitter<RenvooiMarkItemHighlightEvent>;\r\n\r\n  get values(): RenvooiValue[] {\r\n    if (!this.value) {\r\n      return [];\r\n    }\r\n\r\n    return Array.isArray(this.value) ? this.value : [this.value];\r\n  }\r\n\r\n  private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n    this.dsoRenvooiMarkItemHighlight.emit({ text, elementRef });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.values.map((v) => (\r\n          <RenvooiRender\r\n            value={v}\r\n            mark={this.mark && ((text) => this.mark?.(text, v, this.values))}\r\n            onMarkItemHighlight={this.handleMarkItemHighlight}\r\n          />\r\n        ))}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-B3BAWGAx.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/renvooi/renvooi-render-text.tsx","src/components/renvooi/renvooi-render.tsx","src/components/renvooi/renvooi.scss?tag=dso-renvooi&encapsulation=shadow","src/components/renvooi/renvooi.tsx"],"sourcesContent":["import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRenderMarkFunction } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderTextProps {\r\n  text: string;\r\n  mark: RenvooiRenderMarkFunction | undefined;\r\n  onMarkItemHighlight: (text: string, ref: HTMLElement) => void | undefined;\r\n}\r\n\r\nexport const RenvooiRenderText: FunctionalComponent<RenvooiRenderTextProps> = ({ text, mark, onMarkItemHighlight }) => {\r\n  if (!mark) {\r\n    return <>{text}</>;\r\n  }\r\n\r\n  const result = mark(text);\r\n\r\n  if (!result) {\r\n    return <>{text}</>;\r\n  }\r\n\r\n  return (\r\n    <>\r\n      {result.map((renvooiText) => {\r\n        if (typeof renvooiText === \"string\") {\r\n          return <>{renvooiText}</>;\r\n        }\r\n\r\n        return (\r\n          <mark\r\n            class={renvooiText.highlight ? \"dso-highlight\" : undefined}\r\n            ref={(ref) => renvooiText.highlight && ref && onMarkItemHighlight(renvooiText.text, ref)}\r\n          >\r\n            {renvooiText.text}\r\n          </mark>\r\n        );\r\n      })}\r\n    </>\r\n  );\r\n};\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRenderText } from \"./renvooi-render-text\";\r\nimport { RenvooiRenderMarkFunction, RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderProps {\r\n  value: RenvooiValue;\r\n  mark: RenvooiRenderMarkFunction | undefined;\r\n  onMarkItemHighlight: (text: string, elementRef: HTMLElement) => void | undefined;\r\n}\r\n\r\nexport const RenvooiRender: FunctionalComponent<RenvooiRenderProps> = ({ value, mark, onMarkItemHighlight }) => {\r\n  if (typeof value === \"string\" || !value) {\r\n    // This element is used for --_dso-renvooi-text-decoration\r\n    return (\r\n      <span class=\"text\">\r\n        <RenvooiRenderText text={value} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </span>\r\n    );\r\n  }\r\n\r\n  if (\"toegevoegd\" in value) {\r\n    return (\r\n      <ins>\r\n        <RenvooiRenderText text={value.toegevoegd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </ins>\r\n    );\r\n  }\r\n\r\n  if (\"verwijderd\" in value) {\r\n    return (\r\n      <del>\r\n        <RenvooiRenderText text={value.verwijderd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </del>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <del>\r\n        <RenvooiRenderText text={value.was} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </del>\r\n      <ins>\r\n        <RenvooiRenderText text={value.wordt} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </ins>\r\n    </>\r\n  );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n@use \"~dso-toolkit/src/components/mark/mark\";\r\n\r\n:host {\r\n  display: inline;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.text {\r\n  text-decoration: var(--_dso-renvooi-text-decoration);\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRender } from \"./renvooi-render\";\r\nimport { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\n/**\r\n * Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n */\r\n@Component({\r\n  tag: \"dso-renvooi\",\r\n  styleUrl: \"renvooi.scss\",\r\n  shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n  /**\r\n   * The renvooi value to render.\r\n   */\r\n  @Prop()\r\n  value?: RenvooiValue | RenvooiValue[];\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: RenvooiMarkFunction;\r\n\r\n  /**\r\n   * Emitted when a marked item is highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRenvooiMarkItemHighlight!: EventEmitter<RenvooiMarkItemHighlightEvent>;\r\n\r\n  get values(): RenvooiValue[] {\r\n    if (!this.value) {\r\n      return [];\r\n    }\r\n\r\n    return Array.isArray(this.value) ? this.value : [this.value];\r\n  }\r\n\r\n  private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n    this.dsoRenvooiMarkItemHighlight.emit({ text, elementRef });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.values.map((v) => (\r\n          <RenvooiRender\r\n            value={v}\r\n            mark={this.mark && ((text) => this.mark?.(text, v, this.values))}\r\n            onMarkItemHighlight={this.handleMarkItemHighlight}\r\n          />\r\n        ))}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/{p-DDDh2Izf.js → p-B9a249cd.js}

@@ -1,4 +1,4 @@
-import { h, F as Fragment } from './p-DHO_Za64.js';
+import { h, F as Fragment } from './p-Dm38fPV4.js';
 
 const AnnotationListRenvooiValues = ({ values }) => {
     return (h(Fragment, null, values === null || values === void 0 ? void 0 : values.map((v, i) => (h(Fragment, null,
@@ -7,6 +7,6 @@ const AnnotationListRenvooiValues = ({ values }) => {
 };
 
 export { AnnotationListRenvooiValues as A };
-//# sourceMappingURL=p-DDDh2Izf.js.map
+//# sourceMappingURL=p-B9a249cd.js.map
 
-//# sourceMappingURL=p-DDDh2Izf.js.map
+//# sourceMappingURL=p-B9a249cd.js.map

package/dist/bundle/{p-DDDh2Izf.js.map → p-B9a249cd.js.map}

@@ -1 +1 @@
-{"file":"p-DDDh2Izf.js","mappings":";;MAQa,2BAA2B,GAAqD,CAAC,EAAE,MAAM,EAAE,KAAI;AAC1G,IAAA,QACE,CACG,CAAA,QAAA,EAAA,IAAA,EAAA,MAAM,KAAN,IAAA,IAAA,MAAM,uBAAN,MAAM,CAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAChB,CAAA,CAAA,QAAA,EAAA,IAAA;QACG,CAAC,GAAG,CAAC,IAAI,IAAI;QACd,CAAa,CAAA,aAAA,EAAA,EAAA,KAAK,EAAE,CAAC,EAAA,CAAI,CACxB,CACJ,CAAC,CACD;AAEP;;;;","names":[],"sources":["src/components/annotation/annotation-list-renvooi-values.tsx"],"sourcesContent":["import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../renvooi/renvooi.interfaces\";\r\n\r\ninterface AnnotationListRenvooiValues {\r\n  values: RenvooiValue[] | undefined;\r\n}\r\n\r\nexport const AnnotationListRenvooiValues: FunctionalComponent<AnnotationListRenvooiValues> = ({ values }) => {\r\n  return (\r\n    <>\r\n      {values?.map((v, i) => (\r\n        <>\r\n          {i > 0 && \", \"}\r\n          <dso-renvooi value={v} />\r\n        </>\r\n      ))}\r\n    </>\r\n  );\r\n};\r\n"],"version":3}
+{"file":"p-B9a249cd.js","mappings":";;MAQa,2BAA2B,GAAqD,CAAC,EAAE,MAAM,EAAE,KAAI;AAC1G,IAAA,QACE,CACG,CAAA,QAAA,EAAA,IAAA,EAAA,MAAM,KAAN,IAAA,IAAA,MAAM,uBAAN,MAAM,CAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAChB,CAAA,CAAA,QAAA,EAAA,IAAA;QACG,CAAC,GAAG,CAAC,IAAI,IAAI;QACd,CAAa,CAAA,aAAA,EAAA,EAAA,KAAK,EAAE,CAAC,EAAA,CAAI,CACxB,CACJ,CAAC,CACD;AAEP;;;;","names":[],"sources":["src/components/annotation/annotation-list-renvooi-values.tsx"],"sourcesContent":["import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../renvooi/renvooi.interfaces\";\r\n\r\ninterface AnnotationListRenvooiValues {\r\n  values: RenvooiValue[] | undefined;\r\n}\r\n\r\nexport const AnnotationListRenvooiValues: FunctionalComponent<AnnotationListRenvooiValues> = ({ values }) => {\r\n  return (\r\n    <>\r\n      {values?.map((v, i) => (\r\n        <>\r\n          {i > 0 && \", \"}\r\n          <dso-renvooi value={v} />\r\n        </>\r\n      ))}\r\n    </>\r\n  );\r\n};\r\n"],"version":3}