@dso-toolkit/core 75.1.0 → 77.0.0

package/dist/dso-toolkit/{p-aeac51e6.entry.js → p-451f3c78.entry.js}

@@ -1,2 +1,2 @@
-import{h as n,r as e,c as o,F as t,g as i}from"./p-C-b4jsbt.js";import{c as s}from"./p-ChV9xqsO.js";import{d as a}from"./p-DDU8nTJS.js";import"./p-BFTU3MAI.js";const r=["search","map","document"];const l={map:"Kaart",document:"Document",search:"Zoeken"};const d={small:"smal",medium:"middel",large:"breed"};const c=({className:e,onClick:o,label:t,icon:i})=>n("button",{type:"button",class:e,onClick:o},n("span",{class:"sr-only"},t),n("dso-icon",{icon:i}));const p=({shrink:e,expand:o,size:t,panelLabel:i,placement:s})=>{const a=[];if(t!=="small"){a.push(n(c,{onClick:e,label:`${i} smaller maken`,icon:s==="right"?"chevron-right":"chevron-left",className:"shrink"}))}if(t!=="large"){a.push(n(c,{onClick:o,label:`${i} breder maken`,icon:s==="right"?"chevron-left":"chevron-right",className:"expand"}))}return n("div",{class:"sizing-buttons"},n("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte ",i.toLocaleLowerCase(),": ",d[t]),a)};const b=({tabView:e,panelSize:o,shrinkDocumentPanel:t,expandDocumentPanel:i,dsoDocumentPanelSizeChangeAnimationEnd:s})=>n("div",{class:"dso-document-panel",onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){s.emit({currentSize:o})}}},!e&&n(p,{panelLabel:"Documentpaneel",size:o,expand:i,shrink:t,placement:"right"}),n("div",{class:"content"},n("slot",{name:"document-panel"})));const g=({title:e,ref:o,dsoCloseFilterPanel:t})=>n("dialog",{class:"filter-panel",ref:o},e&&n("h3",null,e),n("button",{type:"button",class:"dso-close",onClick:t},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"Sluiten")),n("slot",{name:"filter-panel"}));const u=({tabView:e,mainSize:o,documentPanelOpen:t,mainPanelExpanded:i,mainPanelHidden:a,toggleMainPanel:r,dsoMainSizeChangeAnimationEnd:l})=>n("div",{class:s("dso-main-panel",{compact:!e&&t&&!i,contracted:!e&&!t&&!i,expanded:!e&&t&&i,collapsed:a}),onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){l.emit({currentSize:o})}}},!e&&t&&n("div",{class:"toggle-button"},n("button",{type:"button",onClick:r},n("span",{class:"sr-only"},"Zoeken paneel ",a?"tonen":"verbergen"),n("dso-icon",{icon:a?"chevron-right":"chevron-left"}))),n("div",{class:s("content",{invisible:a})},n("slot",{name:"main"})));const h=({ref:e,dsoCloseOverlay:o})=>n("dialog",{class:"overlay",ref:e,onCancel:n=>{n.preventDefault();o(n)}},n("button",{type:"button",class:"overlay-close-button",onClick:o},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"sluiten")),n("slot",{name:"overlay"}));const m="@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*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host .overlay {\n  block-size: calc(100% - 32px);\n  margin-block: 16px;\n  margin-inline: auto 16px;\n}\n:host .dso-main-panel {\n  transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n  outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n  outline: 0;\n}\n.shrink,\n.expand,\n.overlay-close-button {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n  color: #173521;\n}\n.shrink.dso-align,\n.expand.dso-align,\n.overlay-close-button.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.shrink.dso-truncate,\n.expand.dso-truncate,\n.overlay-close-button.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\n.shrink svg.di.di-chevron-down + span:not(.sr-only),\n.shrink svg.di.di-chevron-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-chevron-down,\n.shrink span:not(.sr-only) + svg.di.di-chevron-up,\n.expand svg.di.di-chevron-down + span:not(.sr-only),\n.expand svg.di.di-chevron-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-chevron-down,\n.expand span:not(.sr-only) + svg.di.di-chevron-up,\n.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\n.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),\n.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),\n.shrink svg.di.di-angle-down + span:not(.sr-only),\n.shrink svg.di.di-angle-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-angle-down,\n.shrink span:not(.sr-only) + svg.di.di-angle-up,\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],\n.expand dso-icon[icon=chevron-left] + span:not(.sr-only),\n.expand dso-icon[icon=chevron-right] + span:not(.sr-only),\n.expand svg.di.di-angle-down + span:not(.sr-only),\n.expand svg.di.di-angle-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-angle-down,\n.expand span:not(.sr-only) + svg.di.di-angle-up,\n.expand span:not(.sr-only) + dso-icon[icon=chevron-left],\n.expand span:not(.sr-only) + dso-icon[icon=chevron-right],\n.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),\n.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n  vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n  cursor: pointer;\n}\n\n.overlay-close-button {\n  position: absolute;\n  inset-block-start: 8px;\n  inset-inline-end: 16px;\n}\n\n.content.invisible {\n  visibility: hidden;\n}\n\n.viewer-grid-columns {\n  position: relative;\n}\n\n.dso-main-panel .content,\n.dso-document-panel .content {\n  block-size: 100%;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n\n.dso-main-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n  z-index: 100;\n}\n.dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {\n  inset-inline-start: -432px;\n}\n.dso-main-panel.compact, .dso-main-panel.contracted {\n  flex-shrink: unset;\n  flex-grow: unset;\n  position: absolute;\n  transition: none;\n}\n.dso-main-panel.expanded.collapsed {\n  position: absolute;\n  block-size: 100%;\n}\n.dso-main-panel .sizing-buttons,\n.dso-main-panel .toggle-button {\n  inset-inline-start: calc(100% + 1px);\n  transition: inset-inline-start 200ms ease-in;\n  padding-block: 0 8px;\n  padding-inline: 0 4px;\n}\n.dso-main-panel .sizing-buttons button,\n.dso-main-panel .toggle-button button {\n  border-end-end-radius: 4px;\n  border-start-end-radius: 4px;\n}\n\n.dso-document-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n  z-index: 100;\n}\n.dso-document-panel .sizing-buttons {\n  inset-block-start: auto;\n  inset-block-end: 16px;\n  inset-inline-end: calc(100% + 1px);\n  transition: inset-inline-end 200ms ease-in;\n  padding-block: 0 8px;\n  padding-inline: 4px 0;\n}\n.dso-document-panel .sizing-buttons button {\n  border-end-start-radius: 4px;\n  border-start-start-radius: 4px;\n}\n\n.sizing-buttons,\n.toggle-button {\n  overflow-x: hidden;\n  position: absolute;\n  inset-block-start: 16px;\n  inline-size: 44px;\n  z-index: -1;\n}\n.sizing-buttons button,\n.toggle-button button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible,\n.toggle-button button:focus,\n.toggle-button button:focus-visible {\n  outline-offset: 2px;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n  outline: 0;\n}\n.sizing-buttons button,\n.toggle-button button {\n  background-color: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-color, #39870c);\n}\n.sizing-buttons button,\n.toggle-button button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.sizing-buttons button:hover,\n.toggle-button button:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #39870c);\n  color: var(--_dso-button-secondary-hover-color, #39870c);\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #39870c);\n  border-color: var(--_dso-button-secondary-active-border-color, #39870c);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover,\n.toggle-button button[disabled],\n.toggle-button button[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\n.sizing-buttons button.dso-small,\n.toggle-button button.dso-small {\n  line-height: 1rem;\n}\n.sizing-buttons button.dso-small dso-icon,\n.sizing-buttons button.dso-small svg.di, .sizing-buttons button.dso-small.extern::after, .sizing-buttons button.dso-small.download::after, .sizing-buttons button.dso-small.dso-spinner::before,\n.toggle-button button.dso-small dso-icon,\n.toggle-button button.dso-small svg.di,\n.toggle-button button.dso-small.extern::after,\n.toggle-button button.dso-small.download::after,\n.toggle-button button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.sizing-buttons button.dso-small.dso-spinner-left::before,\n.toggle-button button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button.dso-small.dso-spinner-right::after,\n.toggle-button button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button > span,\n.toggle-button button > span {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled],\n.toggle-button button.dso-spinner-left[disabled],\n.toggle-button button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before,\n.toggle-button button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after,\n.toggle-button button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button,\n.toggle-button button {\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n  flex: 0 0 100%;\n  block-size: 40px;\n  min-inline-size: auto;\n  inline-size: 40px;\n}\n.sizing-buttons button:hover dso-icon,\n.toggle-button button:hover dso-icon {\n  color: #fff;\n}\n.sizing-buttons button:focus-visible,\n.toggle-button button:focus-visible {\n  outline-offset: -1px;\n}\n\n.map {\n  block-size: 100%;\n  inline-size: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.filter-panel,\n.overlay {\n  background-color: #fff;\n  border: 0;\n  block-size: 100%;\n  margin-block: 0;\n  max-block-size: 100vh;\n  overflow-y: auto;\n  z-index: 101;\n}\n\n.filter-panel {\n  display: block;\n  position: absolute;\n  padding-block: 8px;\n  padding-inline: 16px;\n  inset-block-start: 0;\n  block-size: 100%;\n  inset-inline-start: -380px;\n  inline-size: 100%;\n  transition: inset-inline-start 200ms ease-in;\n}\n@media screen and (max-width: 768px) {\n  .filter-panel {\n    inline-size: 100vw;\n  }\n  .filter-panel::before {\n    display: none !important;\n  }\n}\n@media screen and (min-width: 992px) {\n  .filter-panel {\n    max-inline-size: 380px;\n  }\n}\n.filter-panel[open] {\n  inset-inline-start: 0;\n  box-shadow: none;\n  border-inline-end: 1px solid #e5e5e5;\n}\n.filter-panel h3 {\n  color: #275937;\n}\n.filter-panel .dso-close {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  position: absolute;\n  inset-block-start: 16px;\n  inset-inline-end: 16px;\n  block-size: 32px;\n  inline-size: 32px;\n  padding: 0;\n  background-color: transparent;\n  border: 0;\n  text-align: center;\n}\n.filter-panel .dso-close[disabled] {\n  cursor: default;\n}\n.filter-panel .dso-close::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.overlay {\n  padding-block: 40px 8px;\n  padding-inline: 16px;\n  inset-inline-end: 0;\n  inline-size: 624px;\n}\n.overlay::backdrop {\n  background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 624px) {\n  .overlay {\n    inline-size: 100vw;\n  }\n}\n\n@media screen and (min-width: 808px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 375px;\n    min-inline-size: 0;\n    max-inline-size: 375px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 375px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 0;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 624px;\n    min-inline-size: 375px;\n    max-inline-size: 624px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 624px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 375px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 60%;\n    min-inline-size: 768px;\n    max-inline-size: 1024px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 768px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 768px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host {\n    display: flex;\n    flex-direction: column;\n    block-size: 100vh;\n    overflow: clip;\n    position: relative;\n  }\n  :host .dso-main-panel.compact,\n  :host .dso-main-panel.expanded {\n    flex-basis: unset;\n    min-inline-size: unset;\n    max-inline-size: unset;\n    inline-size: 440px;\n  }\n  :host .viewer-grid-columns {\n    display: flex;\n    overflow: hidden;\n    flex-grow: 1;\n  }\n  .dso-main-panel,\n  .dso-document-panel {\n    box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  }\n  .dso-main-panel .content,\n  .dso-document-panel .content {\n    overflow-y: auto;\n  }\n  .filter-panel {\n    margin-inline: 0 auto;\n    inline-size: calc(100vw - 40px);\n  }\n  .filter-panel[open] {\n    border-inline-end: 1px solid #e5e5e5;\n  }\n  .overlay {\n    box-shadow: -2px 0 5px #666;\n    margin-inline: auto 0;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 1031.99px) {\n  :host([filter-panel-open]) .dso-main-panel {\n    margin-inline-start: 380px;\n    max-inline-size: calc(100vw - 380px);\n  }\n  .filter-panel {\n    inline-size: 380px;\n    inset-inline-start: -380px;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar {\n    min-block-size: 32px;\n  }\n  .dso-navbar .dso-navbar-header {\n    float: inline-start;\n  }\n  .dso-navbar .dso-navbar-toggle {\n    border-radius: 4px;\n    min-inline-size: auto;\n    padding-block: 5px;\n    padding-inline: 0;\n  }\n  .dso-navbar .dso-navbar-toggle dso-icon,\n  .dso-navbar .dso-navbar-toggle svg.di {\n    margin-inline-start: 8px;\n    margin-inline-end: 8px;\n  }\n}\n@media screen and (max-width: 807.99px) and (min-width: 992px) {\n  .dso-navbar .dso-navbar-toggle {\n    display: none;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {\n    margin-inline-end: 8rem;\n  }\n  .dso-nav {\n    list-style: none;\n    margin-block-end: 0;\n    padding-inline-start: 0;\n  }\n  .dso-nav > li > button {\n    border: 0;\n    background-color: transparent;\n  }\n  .dso-nav > li > a,\n  .dso-nav > li > button {\n    display: block;\n  }\n  .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,\n  .dso-nav > li > button,\n  .dso-nav > li > button:hover,\n  .dso-nav > li > button:focus,\n  .dso-nav > li > button:visited {\n    color: #275937;\n  }\n  .dso-nav > li.dso-active > a,\n  .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,\n  .dso-nav > li.is-active > button {\n    border-block-end: 4px solid #8b4a6a;\n    font-weight: bold;\n  }\n  .dso-nav.dso-nav-main > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    text-decoration: none;\n  }\n  .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,\n  .dso-nav.dso-nav-main > li > button:hover,\n  .dso-nav.dso-nav-main > li > button:focus-visible,\n  .dso-nav.dso-nav-main > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    font-size: 1.25em;\n    line-height: 1;\n    margin-block-start: 8px;\n    padding-block: 8px 7px;\n    padding-inline: 16px;\n  }\n  .dso-nav.dso-nav-sub > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    text-decoration: none;\n  }\n  .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,\n  .dso-nav.dso-nav-sub > li > button:hover,\n  .dso-nav.dso-nav-sub > li > button:focus-visible,\n  .dso-nav.dso-nav-sub > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    font-size: 1rem;\n    margin-block-start: 4px;\n    padding-block: 4px 3px;\n    padding-inline: 8px;\n  }\n  .dso-navbar {\n    padding-inline: 16px;\n  }\n  .dso-nav {\n    border-block-end: 1px solid #ccc;\n    display: flex;\n    gap: 16px;\n    margin-block-start: 0;\n    inline-size: calc(100vw - 32px);\n  }\n  .dso-tertiary {\n    display: inline-block;\n    font-size: 1em;\n    font-weight: 500;\n    margin-block-end: 0;\n    text-decoration: none;\n    touch-action: manipulation;\n    text-align: start;\n    user-select: none;\n    vertical-align: middle;\n  }\n  .dso-tertiary:focus, .dso-tertiary:focus-visible {\n    outline-offset: 2px;\n  }\n  .dso-tertiary:active {\n    outline: 0;\n  }\n  .dso-tertiary {\n    border: 0;\n    color: #39870c;\n    line-height: 1;\n    padding: 0;\n    background-color: transparent;\n  }\n  .dso-tertiary[disabled] {\n    color: #afcf9d;\n  }\n  .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n    color: #39870c;\n  }\n  .dso-tertiary:not([disabled]):hover {\n    color: #275937;\n    text-decoration: underline;\n    text-underline-position: under;\n  }\n  .dso-tertiary:not([disabled]):active {\n    color: #173521;\n  }\n  .dso-tertiary.dso-align {\n    line-height: calc(1.5em - 1px);\n    padding-block: 11px;\n    padding-inline: 0;\n    position: relative;\n  }\n  .dso-tertiary.dso-truncate {\n    max-inline-size: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .dso-tertiary.dso-spinner-left::before {\n    background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    content: \"\";\n    display: inline-block;\n    block-size: 24px;\n    vertical-align: middle;\n    inline-size: 24px;\n    margin-inline-end: 8px;\n  }\n  .dso-tertiary.dso-spinner-right::after {\n    background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    content: \"\";\n    display: inline-block;\n    block-size: 24px;\n    vertical-align: middle;\n    inline-size: 24px;\n    margin-inline-start: 8px;\n  }\n  .dso-tertiary dso-icon + span:not(.sr-only),\n  .dso-tertiary svg.di + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + dso-icon,\n  .dso-tertiary span:not(.sr-only) + svg.di {\n    margin-inline-start: 8px;\n  }\n  .dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n    margin-inline-start: 4px;\n  }\n  .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n  .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n    margin-inline-start: 0;\n  }\n  .dso-tertiary dso-icon,\n  .dso-tertiary svg.di,\n  .dso-tertiary span {\n    vertical-align: middle;\n  }\n  .dso-tertiary {\n    font-weight: 300;\n  }\n  .filter-panel,\n  .overlay {\n    margin-inline: 0;\n    max-inline-size: 100vw;\n    inset-block-start: 0;\n    inline-size: 100vw;\n  }\n  .filter-panel {\n    inset-inline-start: -100vw;\n  }\n}\n@media screen and (min-width: 992px) {\n  :host([filter-panel-open]) .dso-main-panel {\n    margin-inline-start: 380px;\n  }\n}";const f=new ResizeObserver(a((([n])=>{const e=n===null||n===void 0?void 0:n.target.getRootNode();if(e instanceof ShadowRoot&&v(e.host)){e.host._checkMainPanelVisibility()}}),50));function v(n){return n.tagName==="DSO-VIEWER-GRID"}const x=40;const y=768+x;const k=440;const z=class{constructor(n){e(this,n);this.dsoCloseOverlay=o(this,"dsoCloseOverlay",7);this.dsoCloseFilterPanel=o(this,"dsoCloseFilterPanel",7);this.dsoActiveTabSwitch=o(this,"dsoActiveTabSwitch",7);this.dsoMainSizeChangeAnimationEnd=o(this,"dsoMainSizeChangeAnimationEnd",7);this.dsoDocumentPanelSizeChange=o(this,"dsoDocumentPanelSizeChange",7);this.dsoDocumentPanelSizeChangeAnimationEnd=o(this,"dsoDocumentPanelSizeChangeAnimationEnd",7);this.dsoMainPanelExpand=o(this,"dsoMainPanelExpand",7);this.dsoMainPanelToggle=o(this,"dsoMainPanelToggle",7);this.mediaCondition=`(min-width: ${y}px)`;this.filterPanelOpen=false;this.overlayOpen=false;this.documentPanelOpen=false;this.mainSize="large";this.documentPanelSize="large";this.mainPanelExpanded=false;this.mainPanelHidden=false;this.tabView=window.innerWidth<y;this.switchActiveTab=n=>{this.dsoActiveTabSwitch.emit({tab:n})};this.shrinkDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="large"?"medium":"small"})};this.expandDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="small"?"medium":"large"})};this.toggleMainPanel=()=>{if(this.mapElement instanceof HTMLDivElement&&this.mapElement.clientWidth<=k+x+x){this.mainSize="small"}this.dsoMainPanelToggle.emit({hide:!this.mainPanelHidden})};this.changeListener=n=>this.tabView=!n.matches}get filterPanelSlot(){return this.host.querySelector("[slot='filter-panel']")}get overlaySlot(){return this.host.querySelector("[slot='overlay']")}documentPanelOpenWatcher(n){if(n){this._checkMainPanelVisibility()}}filterPanelOpenWatcher(n){var e,o;if(!this.filterPanelSlot){console.warn("slot 'filter-panel' has not been set")}if(n){(e=this.filterPanel)===null||e===void 0?void 0:e.show()}else{(o=this.filterPanel)===null||o===void 0?void 0:o.close()}}overlayOpenWatcher(n){var e,o;if(!this.overlaySlot){console.warn("slot 'overlay' has not been set")}if(n){(e=this.overlay)===null||e===void 0?void 0:e.showModal()}else{(o=this.overlay)===null||o===void 0?void 0:o.close()}}async _checkMainPanelVisibility(){if(this.documentPanelOpen&&!this.mainPanelHidden&&this.mapElement instanceof HTMLDivElement&&(this.mapElement.clientWidth<=k+x+x&&!this.mainPanelExpanded||this.mapElement.clientWidth<=x+x&&this.mainPanelExpanded)){this.dsoMainPanelToggle.emit({hide:true})}}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener)}componentDidLoad(){var n,e;if(this.filterPanelOpen&&this.filterPanelSlot){(n=this.filterPanel)===null||n===void 0?void 0:n.show()}if(this.overlayOpen&&this.overlaySlot){(e=this.overlay)===null||e===void 0?void 0:e.showModal()}if(this.mapElement instanceof HTMLDivElement){f.observe(this.mapElement)}}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener);if(this.mapElement){f.unobserve(this.mapElement)}}render(){return n(t,null,n("slot",{key:"1762942f6837742694acf5f612274e28c5b8db16",name:"top-bar"}),n("div",{key:"45f11f3985e59cb3c99e22404d864565c7d25d9b",class:"viewer-grid-columns"},this.tabView&&n("nav",{key:"5bc513049a8583b98f89ca1f79df55f1f2454bb2",class:"dso-navbar"},n("ul",{key:"655920b2a69275b460614a31313d1fc1333cb08e",class:"dso-nav dso-nav-sub"},r.map((e=>n("li",{key:e,class:s({"dso-active":this.activeTab===e})},n("button",{type:"button",class:"dso-tertiary",onClick:()=>this.switchActiveTab(e)},l[e])))))),(!this.tabView||this.tabView&&this.activeTab==="search")&&n(u,{key:"8fb75439c8dc08cf9c9b2fd31eedfb635d232bf4",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")&&n(g,{key:"42d05837fc02297c2a7918c1694f9e798441f815",title:this.filterPanelTitle,ref:n=>this.filterPanel=n,dsoCloseFilterPanel:n=>this.dsoCloseFilterPanel.emit({originalEvent:n})}),(!this.tabView||this.tabView&&this.activeTab==="map")&&n("div",{key:"ce5c7b4b31c409353a800e0347f60f38aa9f3d9d",class:"map",ref:n=>this.mapElement=n},n("slot",{key:"1ff73af3fcdd23240030438d8e62578ae19eac65",name:"map"})),(!this.tabView&&this.documentPanelOpen||this.tabView&&this.activeTab==="document")&&n(b,{key:"a17d9d60c2e27ebce816fe96febef5068b6515e5",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),n(h,{key:"b2f7054f93f35cd4008f139fa24cdcc58fa5e66b",ref:n=>this.overlay=n,dsoCloseOverlay:n=>this.dsoCloseOverlay.emit({originalEvent:n})})))}get host(){return i(this)}static get watchers(){return{documentPanelOpen:["documentPanelOpenWatcher"],filterPanelOpen:["filterPanelOpenWatcher"],overlayOpen:["overlayOpenWatcher"]}}};z.style=m;export{z as dso_viewer_grid};
-//# sourceMappingURL=p-aeac51e6.entry.js.map
+import{h as n,r as e,c as o,F as t,g as i}from"./p-C-b4jsbt.js";import{c as s}from"./p-ChV9xqsO.js";import{d as a}from"./p-DDU8nTJS.js";import"./p-BFTU3MAI.js";const r=["search","map","document"];const l={map:"Kaart",document:"Document",search:"Zoeken"};const d={small:"smal",medium:"middel",large:"breed"};const c=({className:e,onClick:o,label:t,icon:i})=>n("button",{type:"button",class:e,onClick:o},n("span",{class:"sr-only"},t),n("dso-icon",{icon:i}));const p=({shrink:e,expand:o,size:t,panelLabel:i,placement:s})=>{const a=[];if(t!=="small"){a.push(n(c,{onClick:e,label:`${i} smaller maken`,icon:s==="right"?"chevron-right":"chevron-left",className:"shrink"}))}if(t!=="large"){a.push(n(c,{onClick:o,label:`${i} breder maken`,icon:s==="right"?"chevron-left":"chevron-right",className:"expand"}))}return n("div",{class:"sizing-buttons"},n("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte ",i.toLocaleLowerCase(),": ",d[t]),a)};const b=({tabView:e,panelSize:o,shrinkDocumentPanel:t,expandDocumentPanel:i,dsoDocumentPanelSizeChangeAnimationEnd:s})=>n("div",{class:"dso-document-panel",onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){s.emit({currentSize:o})}}},!e&&n(p,{panelLabel:"Documentpaneel",size:o,expand:i,shrink:t,placement:"right"}),n("div",{class:"content"},n("slot",{name:"document-panel"})));const g=({title:e,ref:o,dsoCloseFilterPanel:t})=>n("dialog",{class:"filter-panel",ref:o},e&&n("h3",null,e),n("button",{type:"button",class:"dso-close",onClick:t},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"Sluiten")),n("slot",{name:"filter-panel"}));const u=({tabView:e,mainSize:o,documentPanelOpen:t,mainPanelExpanded:i,mainPanelHidden:a,toggleMainPanel:r,dsoMainSizeChangeAnimationEnd:l})=>n("div",{class:s("dso-main-panel",{compact:!e&&t&&!i,contracted:!e&&!t&&!i,expanded:!e&&t&&i,collapsed:a}),onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){l.emit({currentSize:o})}}},!e&&t&&n("div",{class:"toggle-button"},n("button",{type:"button",onClick:r},n("span",{class:"sr-only"},"Zoeken paneel ",a?"tonen":"verbergen"),n("dso-icon",{icon:a?"chevron-right":"chevron-left"}))),n("div",{class:s("content",{invisible:a})},n("slot",{name:"main"})));const h=({ref:e,dsoCloseOverlay:o})=>n("dialog",{class:"overlay",ref:e,onCancel:n=>{n.preventDefault();o(n)}},n("button",{type:"button",class:"overlay-close-button",onClick:o},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"sluiten")),n("slot",{name:"overlay"}));const m="@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*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host .overlay {\n  block-size: calc(100% - 32px);\n  margin-block: 16px;\n  margin-inline: auto 16px;\n}\n:host .dso-main-panel {\n  transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n  outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n  outline: 0;\n}\n.shrink,\n.expand,\n.overlay-close-button {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n  color: #173521;\n}\n.shrink.dso-align,\n.expand.dso-align,\n.overlay-close-button.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.shrink.dso-truncate,\n.expand.dso-truncate,\n.overlay-close-button.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\n.shrink svg.di.di-chevron-down + span:not(.sr-only),\n.shrink svg.di.di-chevron-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-chevron-down,\n.shrink span:not(.sr-only) + svg.di.di-chevron-up,\n.expand svg.di.di-chevron-down + span:not(.sr-only),\n.expand svg.di.di-chevron-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-chevron-down,\n.expand span:not(.sr-only) + svg.di.di-chevron-up,\n.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\n.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),\n.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),\n.shrink svg.di.di-angle-down + span:not(.sr-only),\n.shrink svg.di.di-angle-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-angle-down,\n.shrink span:not(.sr-only) + svg.di.di-angle-up,\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],\n.expand dso-icon[icon=chevron-left] + span:not(.sr-only),\n.expand dso-icon[icon=chevron-right] + span:not(.sr-only),\n.expand svg.di.di-angle-down + span:not(.sr-only),\n.expand svg.di.di-angle-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-angle-down,\n.expand span:not(.sr-only) + svg.di.di-angle-up,\n.expand span:not(.sr-only) + dso-icon[icon=chevron-left],\n.expand span:not(.sr-only) + dso-icon[icon=chevron-right],\n.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),\n.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n  vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n  cursor: pointer;\n}\n\n.overlay-close-button {\n  position: absolute;\n  inset-block-start: 8px;\n  inset-inline-end: 16px;\n}\n\n.content.invisible {\n  visibility: hidden;\n}\n\n.viewer-grid-columns {\n  position: relative;\n}\n\n.dso-main-panel .content,\n.dso-document-panel .content {\n  block-size: 100%;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n\n.dso-main-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n  z-index: 100;\n}\n.dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {\n  inset-inline-start: -432px;\n}\n.dso-main-panel.compact, .dso-main-panel.contracted {\n  flex-shrink: unset;\n  flex-grow: unset;\n  position: absolute;\n  transition: none;\n}\n.dso-main-panel.expanded.collapsed {\n  position: absolute;\n  block-size: 100%;\n}\n.dso-main-panel .sizing-buttons,\n.dso-main-panel .toggle-button {\n  inset-inline-start: calc(100% + 1px);\n  transition: inset-inline-start 200ms ease-in;\n  padding-block: 0 8px;\n  padding-inline: 0 4px;\n}\n.dso-main-panel .sizing-buttons button,\n.dso-main-panel .toggle-button button {\n  border-end-end-radius: 4px;\n  border-start-end-radius: 4px;\n}\n\n.dso-document-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n  z-index: 100;\n}\n.dso-document-panel .sizing-buttons {\n  inset-block-start: auto;\n  inset-block-end: 16px;\n  inset-inline-end: calc(100% + 1px);\n  transition: inset-inline-end 200ms ease-in;\n  padding-block: 0 8px;\n  padding-inline: 4px 0;\n}\n.dso-document-panel .sizing-buttons button {\n  border-end-start-radius: 4px;\n  border-start-start-radius: 4px;\n}\n\n.sizing-buttons,\n.toggle-button {\n  overflow-x: hidden;\n  position: absolute;\n  inset-block-start: 16px;\n  inline-size: 44px;\n  z-index: -1;\n}\n.sizing-buttons button,\n.toggle-button button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible,\n.toggle-button button:focus,\n.toggle-button button:focus-visible {\n  outline-offset: 2px;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n  outline: 0;\n}\n.sizing-buttons button,\n.toggle-button button {\n  background-color: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-color, #39870c);\n}\n.sizing-buttons button,\n.toggle-button button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.sizing-buttons button:hover,\n.toggle-button button:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n  color: var(--_dso-button-secondary-hover-color, #275937);\n}\n.sizing-buttons button:active,\n.toggle-button button: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}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover,\n.toggle-button button[disabled],\n.toggle-button button[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\n.sizing-buttons button.dso-small,\n.toggle-button button.dso-small {\n  line-height: 1rem;\n}\n.sizing-buttons button.dso-small dso-icon,\n.sizing-buttons button.dso-small svg.di, .sizing-buttons button.dso-small.extern::after, .sizing-buttons button.dso-small.download::after, .sizing-buttons button.dso-small.dso-spinner::before,\n.toggle-button button.dso-small dso-icon,\n.toggle-button button.dso-small svg.di,\n.toggle-button button.dso-small.extern::after,\n.toggle-button button.dso-small.download::after,\n.toggle-button button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.sizing-buttons button.dso-small.dso-spinner-left::before,\n.toggle-button button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button.dso-small.dso-spinner-right::after,\n.toggle-button button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button > span,\n.toggle-button button > span {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled],\n.toggle-button button.dso-spinner-left[disabled],\n.toggle-button button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before,\n.toggle-button button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after,\n.toggle-button button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button,\n.toggle-button button {\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n  flex: 0 0 100%;\n  block-size: 40px;\n  min-inline-size: auto;\n  inline-size: 40px;\n}\n.sizing-buttons button:hover dso-icon,\n.toggle-button button:hover dso-icon {\n  color: #fff;\n}\n.sizing-buttons button:focus-visible,\n.toggle-button button:focus-visible {\n  outline-offset: -1px;\n}\n\n.map {\n  block-size: 100%;\n  inline-size: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.filter-panel,\n.overlay {\n  background-color: #fff;\n  border: 0;\n  block-size: 100%;\n  margin-block: 0;\n  max-block-size: 100vh;\n  overflow-y: auto;\n  z-index: 101;\n}\n\n.filter-panel {\n  display: block;\n  position: absolute;\n  padding-block: 8px;\n  padding-inline: 16px;\n  inset-block-start: 0;\n  block-size: 100%;\n  inset-inline-start: -380px;\n  inline-size: 100%;\n  transition: inset-inline-start 200ms ease-in;\n}\n@media screen and (max-width: 768px) {\n  .filter-panel {\n    inline-size: 100vw;\n  }\n  .filter-panel::before {\n    display: none !important;\n  }\n}\n@media screen and (min-width: 992px) {\n  .filter-panel {\n    max-inline-size: 380px;\n  }\n}\n.filter-panel[open] {\n  inset-inline-start: 0;\n  box-shadow: none;\n  border-inline-end: 1px solid #e5e5e5;\n}\n.filter-panel h3 {\n  color: #275937;\n}\n.filter-panel .dso-close {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  position: absolute;\n  inset-block-start: 16px;\n  inset-inline-end: 16px;\n  block-size: 32px;\n  inline-size: 32px;\n  padding: 0;\n  background-color: transparent;\n  border: 0;\n  text-align: center;\n}\n.filter-panel .dso-close[disabled] {\n  cursor: default;\n}\n.filter-panel .dso-close::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.overlay {\n  padding-block: 40px 8px;\n  padding-inline: 16px;\n  inset-inline-end: 0;\n  inline-size: 624px;\n}\n.overlay::backdrop {\n  background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 624px) {\n  .overlay {\n    inline-size: 100vw;\n  }\n}\n\n@media screen and (min-width: 808px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 375px;\n    min-inline-size: 0;\n    max-inline-size: 375px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 375px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 0;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 624px;\n    min-inline-size: 375px;\n    max-inline-size: 624px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 624px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 375px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 60%;\n    min-inline-size: 768px;\n    max-inline-size: 1024px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 768px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 768px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host {\n    display: flex;\n    flex-direction: column;\n    block-size: 100vh;\n    overflow: clip;\n    position: relative;\n  }\n  :host .dso-main-panel.compact,\n  :host .dso-main-panel.expanded {\n    flex-basis: unset;\n    min-inline-size: unset;\n    max-inline-size: unset;\n    inline-size: 440px;\n  }\n  :host .viewer-grid-columns {\n    display: flex;\n    overflow: hidden;\n    flex-grow: 1;\n  }\n  .dso-main-panel,\n  .dso-document-panel {\n    box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  }\n  .dso-main-panel .content,\n  .dso-document-panel .content {\n    overflow-y: auto;\n  }\n  .filter-panel {\n    margin-inline: 0 auto;\n    inline-size: calc(100vw - 40px);\n  }\n  .filter-panel[open] {\n    border-inline-end: 1px solid #e5e5e5;\n  }\n  .overlay {\n    box-shadow: -2px 0 5px #666;\n    margin-inline: auto 0;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 1031.99px) {\n  :host([filter-panel-open]) .dso-main-panel {\n    margin-inline-start: 380px;\n    max-inline-size: calc(100vw - 380px);\n  }\n  .filter-panel {\n    inline-size: 380px;\n    inset-inline-start: -380px;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar {\n    min-block-size: 32px;\n  }\n  .dso-navbar .dso-navbar-header {\n    float: inline-start;\n  }\n  .dso-navbar .dso-navbar-toggle {\n    border-radius: 4px;\n    min-inline-size: auto;\n    padding-block: 5px;\n    padding-inline: 0;\n  }\n  .dso-navbar .dso-navbar-toggle dso-icon,\n  .dso-navbar .dso-navbar-toggle svg.di {\n    margin-inline-start: 8px;\n    margin-inline-end: 8px;\n  }\n}\n@media screen and (max-width: 807.99px) and (min-width: 992px) {\n  .dso-navbar .dso-navbar-toggle {\n    display: none;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {\n    margin-inline-end: 8rem;\n  }\n  .dso-nav {\n    list-style: none;\n    margin-block-end: 0;\n    padding-inline-start: 0;\n  }\n  .dso-nav > li > button {\n    border: 0;\n    background-color: transparent;\n  }\n  .dso-nav > li > a,\n  .dso-nav > li > button {\n    display: block;\n  }\n  .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,\n  .dso-nav > li > button,\n  .dso-nav > li > button:hover,\n  .dso-nav > li > button:focus,\n  .dso-nav > li > button:visited {\n    color: #275937;\n  }\n  .dso-nav > li.dso-active > a,\n  .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,\n  .dso-nav > li.is-active > button {\n    border-block-end: 4px solid #8b4a6a;\n    font-weight: bold;\n  }\n  .dso-nav.dso-nav-main > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    text-decoration: none;\n  }\n  .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,\n  .dso-nav.dso-nav-main > li > button:hover,\n  .dso-nav.dso-nav-main > li > button:focus-visible,\n  .dso-nav.dso-nav-main > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    font-size: 1.25em;\n    line-height: 1;\n    margin-block-start: 8px;\n    padding-block: 8px 7px;\n    padding-inline: 16px;\n  }\n  .dso-nav.dso-nav-sub > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    text-decoration: none;\n  }\n  .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,\n  .dso-nav.dso-nav-sub > li > button:hover,\n  .dso-nav.dso-nav-sub > li > button:focus-visible,\n  .dso-nav.dso-nav-sub > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    font-size: 1rem;\n    margin-block-start: 4px;\n    padding-block: 4px 3px;\n    padding-inline: 8px;\n  }\n  .dso-navbar {\n    padding-inline: 16px;\n  }\n  .dso-nav {\n    border-block-end: 1px solid #ccc;\n    display: flex;\n    gap: 16px;\n    margin-block-start: 0;\n    inline-size: calc(100vw - 32px);\n  }\n  .dso-tertiary {\n    display: inline-block;\n    font-size: 1em;\n    font-weight: 500;\n    margin-block-end: 0;\n    text-decoration: none;\n    touch-action: manipulation;\n    text-align: start;\n    user-select: none;\n    vertical-align: middle;\n  }\n  .dso-tertiary:focus, .dso-tertiary:focus-visible {\n    outline-offset: 2px;\n  }\n  .dso-tertiary:active {\n    outline: 0;\n  }\n  .dso-tertiary {\n    border: 0;\n    color: #39870c;\n    line-height: 1;\n    padding: 0;\n    background-color: transparent;\n  }\n  .dso-tertiary[disabled] {\n    color: #afcf9d;\n  }\n  .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n    color: #39870c;\n  }\n  .dso-tertiary:not([disabled]):hover {\n    color: #275937;\n    text-decoration: underline;\n    text-underline-position: under;\n  }\n  .dso-tertiary:not([disabled]):active {\n    color: #173521;\n  }\n  .dso-tertiary.dso-align {\n    line-height: calc(1.5em - 1px);\n    padding-block: 11px;\n    padding-inline: 0;\n    position: relative;\n  }\n  .dso-tertiary.dso-truncate {\n    max-inline-size: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .dso-tertiary.dso-spinner-left::before {\n    background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    content: \"\";\n    display: inline-block;\n    block-size: 24px;\n    vertical-align: middle;\n    inline-size: 24px;\n    margin-inline-end: 8px;\n  }\n  .dso-tertiary.dso-spinner-right::after {\n    background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    content: \"\";\n    display: inline-block;\n    block-size: 24px;\n    vertical-align: middle;\n    inline-size: 24px;\n    margin-inline-start: 8px;\n  }\n  .dso-tertiary dso-icon + span:not(.sr-only),\n  .dso-tertiary svg.di + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + dso-icon,\n  .dso-tertiary span:not(.sr-only) + svg.di {\n    margin-inline-start: 8px;\n  }\n  .dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n    margin-inline-start: 4px;\n  }\n  .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n  .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n    margin-inline-start: 0;\n  }\n  .dso-tertiary dso-icon,\n  .dso-tertiary svg.di,\n  .dso-tertiary span {\n    vertical-align: middle;\n  }\n  .dso-tertiary {\n    font-weight: 300;\n  }\n  .filter-panel,\n  .overlay {\n    margin-inline: 0;\n    max-inline-size: 100vw;\n    inset-block-start: 0;\n    inline-size: 100vw;\n  }\n  .filter-panel {\n    inset-inline-start: -100vw;\n  }\n}\n@media screen and (min-width: 992px) {\n  :host([filter-panel-open]) .dso-main-panel {\n    margin-inline-start: 380px;\n  }\n}";const v=new ResizeObserver(a((([n])=>{const e=n===null||n===void 0?void 0:n.target.getRootNode();if(e instanceof ShadowRoot&&f(e.host)){e.host._checkMainPanelVisibility()}}),50));function f(n){return n.tagName==="DSO-VIEWER-GRID"}const x=40;const y=768+x;const k=440;const z=class{constructor(n){e(this,n);this.dsoCloseOverlay=o(this,"dsoCloseOverlay",7);this.dsoCloseFilterPanel=o(this,"dsoCloseFilterPanel",7);this.dsoActiveTabSwitch=o(this,"dsoActiveTabSwitch",7);this.dsoMainSizeChangeAnimationEnd=o(this,"dsoMainSizeChangeAnimationEnd",7);this.dsoDocumentPanelSizeChange=o(this,"dsoDocumentPanelSizeChange",7);this.dsoDocumentPanelSizeChangeAnimationEnd=o(this,"dsoDocumentPanelSizeChangeAnimationEnd",7);this.dsoMainPanelExpand=o(this,"dsoMainPanelExpand",7);this.dsoMainPanelToggle=o(this,"dsoMainPanelToggle",7);this.mediaCondition=`(min-width: ${y}px)`;this.filterPanelOpen=false;this.overlayOpen=false;this.documentPanelOpen=false;this.mainSize="large";this.documentPanelSize="large";this.mainPanelExpanded=false;this.mainPanelHidden=false;this.tabView=window.innerWidth<y;this.switchActiveTab=n=>{this.dsoActiveTabSwitch.emit({tab:n})};this.shrinkDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="large"?"medium":"small"})};this.expandDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="small"?"medium":"large"})};this.toggleMainPanel=()=>{if(this.mapElement instanceof HTMLDivElement&&this.mapElement.clientWidth<=k+x+x){this.mainSize="small"}this.dsoMainPanelToggle.emit({hide:!this.mainPanelHidden})};this.changeListener=n=>this.tabView=!n.matches}get filterPanelSlot(){return this.host.querySelector("[slot='filter-panel']")}get overlaySlot(){return this.host.querySelector("[slot='overlay']")}documentPanelOpenWatcher(n){if(n){this._checkMainPanelVisibility()}}filterPanelOpenWatcher(n){var e,o;if(!this.filterPanelSlot){console.warn("slot 'filter-panel' has not been set")}if(n){(e=this.filterPanel)===null||e===void 0?void 0:e.show()}else{(o=this.filterPanel)===null||o===void 0?void 0:o.close()}}overlayOpenWatcher(n){var e,o;if(!this.overlaySlot){console.warn("slot 'overlay' has not been set")}if(n){(e=this.overlay)===null||e===void 0?void 0:e.showModal()}else{(o=this.overlay)===null||o===void 0?void 0:o.close()}}async _checkMainPanelVisibility(){if(this.documentPanelOpen&&!this.mainPanelHidden&&this.mapElement instanceof HTMLDivElement&&(this.mapElement.clientWidth<=k+x+x&&!this.mainPanelExpanded||this.mapElement.clientWidth<=x+x&&this.mainPanelExpanded)){this.dsoMainPanelToggle.emit({hide:true})}}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener)}componentDidLoad(){var n,e;if(this.filterPanelOpen&&this.filterPanelSlot){(n=this.filterPanel)===null||n===void 0?void 0:n.show()}if(this.overlayOpen&&this.overlaySlot){(e=this.overlay)===null||e===void 0?void 0:e.showModal()}if(this.mapElement instanceof HTMLDivElement){v.observe(this.mapElement)}}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener);if(this.mapElement){v.unobserve(this.mapElement)}}render(){return n(t,null,n("slot",{key:"ca4516792c9b0298a17e20249ba5871d88aad4d0",name:"top-bar"}),n("div",{key:"2932e07ae6ee1cf2db5a1806b43e1e31a646a1e3",class:"viewer-grid-columns"},this.tabView&&n("nav",{key:"3a59eff7c4f22d4c43d14aa5144e874197b4f04d",class:"dso-navbar"},n("ul",{key:"54a9240c809a88475599bf1e9eca4fcd4a217f1f",class:"dso-nav dso-nav-sub"},r.map((e=>n("li",{key:e,class:s({"dso-active":this.activeTab===e})},n("button",{type:"button",class:"dso-tertiary",onClick:()=>this.switchActiveTab(e)},l[e])))))),(!this.tabView||this.tabView&&this.activeTab==="search")&&n(u,{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")&&n(g,{key:"a95d1917347f22221d6380c13c4dbc38ddd5a23f",title:this.filterPanelTitle,ref:n=>this.filterPanel=n,dsoCloseFilterPanel:n=>this.dsoCloseFilterPanel.emit({originalEvent:n})}),(!this.tabView||this.tabView&&this.activeTab==="map")&&n("div",{key:"674be4a8408429a6e07307f05b63efc5ff37f2a2",class:"map",ref:n=>this.mapElement=n},n("slot",{key:"f82407205dc1c572fda5c99edc15462703d9045b",name:"map"})),(!this.tabView&&this.documentPanelOpen||this.tabView&&this.activeTab==="document")&&n(b,{key:"a4a8b5af45c1ed4d57dedbf96d4b63f5d48e1d64",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),n(h,{key:"b17b5ecfba160494bfb82d7cc9c1f43593447a8e",ref:n=>this.overlay=n,dsoCloseOverlay:n=>this.dsoCloseOverlay.emit({originalEvent:n})})))}get host(){return i(this)}static get watchers(){return{documentPanelOpen:["documentPanelOpenWatcher"],filterPanelOpen:["filterPanelOpenWatcher"],overlayOpen:["overlayOpenWatcher"]}}};z.style=m;export{z as dso_viewer_grid};
+//# sourceMappingURL=p-451f3c78.entry.js.map

package/dist/dso-toolkit/p-474cc813.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as s,F as t,g as i}from"./p-C-b4jsbt.js";import{c as r}from"./p-ChV9xqsO.js";import{d as l}from"./p-DDU8nTJS.js";import{v as d}from"./p-BF0_OXTe.js";import"./p-BFTU3MAI.js";const a='@charset "UTF-8";:host{display:inline-block;max-inline-size:100%}*,*::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}.dso-label{border-radius:4px;display:inline-block;line-height:1.5;max-inline-size:100%;padding-block:4px;padding-inline:8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:inline-end;font-size:1rem;margin-block-end:-4px;margin-inline-start:8px;margin-inline-end:-4px;margin-block-start:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label{background-color:#f2f2f2;border-color:#f2f2f2;color:#191919}.dso-label.dso-label-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-label.dso-label-error{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;border-color:#fff;color:#191919}.dso-label.dso-label-bright{outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}.dso-label.dso-label-filter{background-color:#e1ecf7;border-color:#e1ecf7;color:#191919}.dso-label.dso-label-filter{border-inline-start:5px solid #2b5780}.dso-label.dso-compact{padding-block:0;padding-inline:8px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-inline-size:calc(100% - 28px)}';const n=new ResizeObserver(l((e=>{e.forEach((({target:e})=>{if(c(e)){e._truncateLabel()}}))}),150));function c(e){return e.tagName==="DSO-LABEL"}function b(e){return e.scrollWidth>e.clientWidth}const h=class{constructor(s){e(this,s);this.dsoRemoveClick=o(this,"dsoRemoveClick",7);this.isTruncated=false;this.labelText=""}watchRemovable(e){if(e){this.startMutationObserver()}else{this.stopMutationObserver()}}watchTruncate(e){if(e){this.startTruncate()}else{this.stopTruncate()}}keyDownListener(e){if(e.key==="Escape"){this.textHover=false;this.textFocus=false}}async _truncateLabel(){setTimeout((()=>{this.isTruncated=!!this.labelContent&&b(this.labelContent)}))}syncLabelText(){var e,o;this.labelText=(o=(e=this.host.textContent)===null||e===void 0?void 0:e.trim())!==null&&o!==void 0?o:""}componentDidLoad(){if(this.truncate){this.startTruncate()}if(this.removable){this.startMutationObserver()}}disconnectedCallback(){this.stopTruncate();this.stopMutationObserver(true)}startMutationObserver(){this.mutationObserver=new MutationObserver((()=>this.syncLabelText()));this.mutationObserver.observe(this.host,{characterData:true,childList:true,subtree:true,attributes:true});this.syncLabelText()}stopMutationObserver(e=false){var o;if(e||!(this.truncate&&this.removable)){(o=this.mutationObserver)===null||o===void 0?void 0:o.disconnect();delete this.mutationObserver}}startTruncate(){n.observe(this.host);this.startMutationObserver();this._truncateLabel()}stopTruncate(){n.unobserve(this.host);this.stopMutationObserver();this.isTruncated=false}render(){return s(t,{key:"7f5b7dff373ee8c80f77bb57f7b0df84a3fc2c26"},s("span",{key:"b2d2ba725922928570ecc4702755853c7adbfd6d","aria-describedby":this.isTruncated?"toggle-anchor":null,class:r("dso-label",{[`dso-label-${this.status}`]:this.status,"dso-compact":this.compact&&!this.removable,"dso-hover":this.removeHover||this.removeFocus})},s("slot",{key:"3386ac158e8cb260583c8248ac942d7eaa2a865c",name:"symbol"}),s("span",{key:"ba633553bc2faef796752d952ccdcc5ed0d786c8",class:r("dso-label-content",{"dso-truncate":!!this.truncate}),ref:e=>this.labelContent=e,tabindex:this.truncate&&this.isTruncated?0:undefined,onMouseEnter:()=>this.textHover=true,onMouseLeave:()=>this.textHover=false,onFocus:()=>this.textFocus=true,onBlur:()=>this.textFocus=false},s("slot",{key:"29a3c0dd5e3c2cc1f6738c0c090e3136b067d054"})),this.removable&&s("button",{key:"5bd9daa44ce5b74dd96b08f80162dcd4dd93a34b",type:"button",onClick:e=>this.dsoRemoveClick.emit(e),onMouseEnter:()=>this.removeHover=true,onMouseLeave:()=>this.removeHover=false,onFocus:()=>this.removeFocus=true,onBlur:()=>this.removeFocus=false},s("span",{key:"1abd5d4c0c1b70dc7b873682e6a025dc071146d6",class:"sr-only"},"Verwijder: ",this.labelText),s("dso-icon",{key:"217b6c9ed632ffceb90a88c2e6bdca2fb5119563",icon:"times"}))),this.isTruncated&&s("dso-tooltip",{key:"5dc1852e817a09ba28ef534e3c474a1b7588bc0d",stateless:true,id:"toggle-anchor",active:this.textHover||this.textFocus,position:"top",strategy:"absolute"},this.labelText))}get host(){return i(this)}static get watchers(){return{removable:["watchRemovable"],truncate:["watchTruncate"]}}};h.style=a;const g=({text:e,mark:o,onMarkItemHighlight:i})=>{if(!o){return s(t,null,e)}const r=o(e);if(!r){return s(t,null,e)}return s(t,null,r.map((e=>{if(typeof e==="string"){return s(t,null,e)}return s("mark",{class:e.highlight?"dso-highlight":undefined,ref:o=>e.highlight&&o&&i(e.text,o)},e.text)})))};const u=({value:e,mark:o,onMarkItemHighlight:i})=>{if(typeof e==="string"||!e){return s("span",{class:"text"},s(g,{text:e,mark:o,onMarkItemHighlight:i}))}if("toegevoegd"in e){return s("ins",null,s(g,{text:e.toegevoegd,mark:o,onMarkItemHighlight:i}))}if("verwijderd"in e){return s("del",null,s(g,{text:e.verwijderd,mark:o,onMarkItemHighlight:i}))}return s(t,null,s("del",null,s(g,{text:e.was,mark:o,onMarkItemHighlight:i})),s("ins",null,s(g,{text:e.wordt,mark:o,onMarkItemHighlight:i})))};const f='@charset "UTF-8";ins{text-decoration:none}ins{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}ins 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"))}ins 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"))}ins 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"))}ins 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"))}ins{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}del{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}del 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"))}del 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"))}del 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"))}del 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"))}del{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){del{font-family:sans-serif}}mark{background-color:var(--_dt-mark-bg-color, #f8f5ce);color:var(--_dt-mark-color, #000);padding-block:var(--_dt-mark-padding-block, 0.2rem);font-weight:var(--_dt-mark-font-weight, normal)}mark.dso-highlight{background-color:#dbd136}:host{display:inline}*,*::after,*::before{box-sizing:border-box}.text{text-decoration:var(--_dso-renvooi-text-decoration)}';const m=class{constructor(s){e(this,s);this.dsoRenvooiMarkItemHighlight=o(this,"dsoRenvooiMarkItemHighlight",3);this.handleMarkItemHighlight=(e,o)=>{this.dsoRenvooiMarkItemHighlight.emit({text:e,elementRef:o})}}get values(){if(!this.value){return[]}return Array.isArray(this.value)?this.value:[this.value]}render(){return s(t,null,this.values.map((e=>s(u,{value:e,mark:this.mark&&(o=>{var s;return(s=this.mark)===null||s===void 0?void 0:s.call(this,o,e,this.values)}),onMarkItemHighlight:this.handleMarkItemHighlight}))))}};m.style=f;const k='@charset "UTF-8";.sc-dso-slide-toggle-h{display:inline-block;padding-block-start:2px}button.dso-slider.sc-dso-slide-toggle{border:0;padding:0}button.dso-slider.sc-dso-slide-toggle:focus-visible{outline:2px solid #323232;outline-offset:1px}button.dso-slider.sc-dso-slide-toggle svg.sc-dso-slide-toggle rect.sc-dso-slide-toggle{fill:#999;transition:fill 0.25s}button.dso-slider.sc-dso-slide-toggle svg.sc-dso-slide-toggle circle.sc-dso-slide-toggle{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transform:translateX(10px);fill:#fff}button.dso-slider[aria-checked=true].sc-dso-slide-toggle svg.sc-dso-slide-toggle rect.sc-dso-slide-toggle{fill:#275937}button.dso-slider[aria-checked=true].sc-dso-slide-toggle svg.sc-dso-slide-toggle circle.sc-dso-slide-toggle{transform:translateX(30px);fill:#fff}button.dso-slider[disabled].sc-dso-slide-toggle svg.sc-dso-slide-toggle rect.sc-dso-slide-toggle{fill:#ccc}button.dso-slider[disabled].sc-dso-slide-toggle svg.sc-dso-slide-toggle circle.sc-dso-slide-toggle{fill:#e5e5e5}button.dso-slider[disabled][aria-checked=true].sc-dso-slide-toggle svg.sc-dso-slide-toggle rect.sc-dso-slide-toggle{fill:#a8bcaf}button.dso-slider[disabled][aria-checked=true].sc-dso-slide-toggle svg.sc-dso-slide-toggle circle.sc-dso-slide-toggle{fill:#e5e5e5}.dso-slider.sc-dso-slide-toggle{border-radius:24px;display:inline-flex}.dso-slider.sc-dso-slide-toggle:hover{cursor:pointer}';const v=class{constructor(s){e(this,s);this.dsoActiveChange=o(this,"dsoActiveChange",5);this.checked=false;this.disabled=false;this.identifier=d()}handleSwitch(e){this.dsoActiveChange.emit({originalEvent:e,checked:!this.checked})}componentWillLoad(){this.hasVisibleLabel=this.host.querySelector("*")!==null}render(){return s(t,null,s("button",Object.assign({key:"2687a8e260347da037c9042e52e77671b67ecb7f",id:this.identifier,role:"switch",class:"dso-slider","aria-checked":""+this.checked,disabled:this.disabled,onClick:e=>this.handleSwitch(e)},this.accessibleLabel?{"aria-label":this.accessibleLabel}:{},this.labelledbyId?{"aria-labelledby":this.labelledbyId}:{}),s("svg",{key:"0274a0de7b39ca3c8d49498e6d9f8f20feedb3d9",xmlns:"http://www.w3.org/2000/svg",width:"40",height:"20",viewBox:"0 0 40 20"},s("g",{key:"29a2cd9081df854eeb432313ede37642f1940d27",fill:"none","fill-rule":"evenodd"},s("rect",{key:"676f0c561f27aae117d52017b0988cc2715f44dd",width:"40",height:"20",fill:"currentColor",rx:"10"}),s("circle",{key:"7e55a33bb6e47a543e6c9f1b0f3c3271b714cba6",cy:"10",r:"8",fill:"currentColor"})))),this.hasVisibleLabel&&s("label",{key:"20928974be6f841a43d41a23a980070d9df81b42",htmlFor:this.identifier},s("slot",{key:"6b00a5c5956eb38d2a05c02e8b44fd38a38c428a"})))}get host(){return i(this)}};v.style=k;export{h as dso_label,m as dso_renvooi,v as dso_slide_toggle};
+//# sourceMappingURL=p-474cc813.entry.js.map

package/dist/dso-toolkit/p-474cc813.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["labelCss","resizeObserver","ResizeObserver","debounce","entries","forEach","target","isDsoLabelComponent","_truncateLabel","element","tagName","hasEllipses","el","scrollWidth","clientWidth","Label","constructor","hostRef","this","isTruncated","labelText","watchRemovable","removable","startMutationObserver","stopMutationObserver","watchTruncate","truncate","startTruncate","stopTruncate","keyDownListener","event","key","textHover","textFocus","setTimeout","labelContent","syncLabelText","_b","_a","host","textContent","trim","componentDidLoad","disconnectedCallback","mutationObserver","MutationObserver","observe","characterData","childList","subtree","attributes","force","disconnect","unobserve","render","h","Fragment","class","clsx","status","compact","removeHover","removeFocus","name","ref","tabindex","undefined","onMouseEnter","onMouseLeave","onFocus","onBlur","type","onClick","e","dsoRemoveClick","emit","icon","stateless","id","active","position","strategy","RenvooiRenderText","text","mark","onMarkItemHighlight","result","map","renvooiText","highlight","RenvooiRender","value","toegevoegd","verwijderd","was","wordt","renvooiCss","Renvooi","handleMarkItemHighlight","elementRef","dsoRenvooiMarkItemHighlight","values","Array","isArray","v","call","slideToggleCss","SlideToggle","checked","disabled","identifier","v4","handleSwitch","dsoActiveChange","originalEvent","componentWillLoad","hasVisibleLabel","querySelector","Object","assign","role","accessibleLabel","labelledbyId","xmlns","width","height","viewBox","fill","rx","cy","r","htmlFor"],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx","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","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle&encapsulation=scoped","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n  display: inline-block;\r\n  max-inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n  @include label.root();\r\n\r\n  &.dso-hover {\r\n    .dso-label-content {\r\n      text-decoration: line-through;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n  display: inline-block;\r\n  max-inline-size: 100%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n  vertical-align: bottom;\r\n  white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n  .dso-truncate.dso-label-content {\r\n    max-inline-size: calc(100% - (units.$u3 + 4px));\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Listen,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { LabelStatus } from \"./label.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce((entries: ResizeObserverEntry[]) => {\r\n    entries.forEach(({ target }) => {\r\n      if (isDsoLabelComponent(target)) {\r\n        target._truncateLabel();\r\n      }\r\n    });\r\n  }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n  return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n  return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-label\",\r\n  styleUrl: \"label.scss\",\r\n  shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n  private labelContent: HTMLSpanElement | undefined;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoLabelElement;\r\n\r\n  /**\r\n   * For compact Label\r\n   */\r\n  @Prop()\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * Shows a button that can be used to remove the Label.\r\n   */\r\n  @Prop({ reflect: true })\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * The status of this Label.\r\n   */\r\n  @Prop()\r\n  status?: LabelStatus;\r\n\r\n  /**\r\n   * Emitted when the user activates the remove button.\r\n   */\r\n  @Event()\r\n  dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n  @State()\r\n  removeHover?: boolean;\r\n\r\n  @State()\r\n  removeFocus?: boolean;\r\n\r\n  /**\r\n   * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n   */\r\n  @Prop()\r\n  truncate?: boolean;\r\n\r\n  @State()\r\n  textHover?: boolean;\r\n\r\n  @State()\r\n  textFocus?: boolean;\r\n\r\n  @State()\r\n  isTruncated = false;\r\n\r\n  @State()\r\n  labelText = \"\";\r\n\r\n  @Watch(\"removable\")\r\n  watchRemovable(removable: boolean) {\r\n    if (removable) {\r\n      this.startMutationObserver();\r\n    } else {\r\n      this.stopMutationObserver();\r\n    }\r\n  }\r\n\r\n  @Watch(\"truncate\")\r\n  watchTruncate(truncate: boolean) {\r\n    if (truncate) {\r\n      this.startTruncate();\r\n    } else {\r\n      this.stopTruncate();\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"document\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.key === \"Escape\") {\r\n      this.textHover = false;\r\n      this.textFocus = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _truncateLabel() {\r\n    setTimeout(() => {\r\n      this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n    });\r\n  }\r\n\r\n  private syncLabelText() {\r\n    this.labelText = this.host.textContent?.trim() ?? \"\";\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.truncate) {\r\n      this.startTruncate();\r\n    }\r\n\r\n    if (this.removable) {\r\n      this.startMutationObserver();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.stopTruncate();\r\n\r\n    this.stopMutationObserver(true);\r\n  }\r\n\r\n  /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n  private startMutationObserver(): void {\r\n    this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n\r\n    this.syncLabelText();\r\n  }\r\n\r\n  private stopMutationObserver(force = false): void {\r\n    if (force || !(this.truncate && this.removable)) {\r\n      this.mutationObserver?.disconnect();\r\n\r\n      delete this.mutationObserver;\r\n    }\r\n  }\r\n\r\n  private startTruncate(): void {\r\n    resizeObserver.observe(this.host);\r\n    this.startMutationObserver();\r\n    this._truncateLabel();\r\n  }\r\n\r\n  private stopTruncate(): void {\r\n    resizeObserver.unobserve(this.host);\r\n    this.stopMutationObserver();\r\n    this.isTruncated = false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <span\r\n          aria-describedby={this.isTruncated ? \"toggle-anchor\" : null}\r\n          class={clsx(\"dso-label\", {\r\n            [`dso-label-${this.status}`]: this.status,\r\n            \"dso-compact\": this.compact && !this.removable,\r\n            \"dso-hover\": this.removeHover || this.removeFocus,\r\n          })}\r\n        >\r\n          <slot name=\"symbol\"></slot>\r\n          <span\r\n            class={clsx(\"dso-label-content\", {\r\n              \"dso-truncate\": !!this.truncate,\r\n            })}\r\n            ref={(element) => (this.labelContent = element)}\r\n            tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n            onMouseEnter={() => (this.textHover = true)}\r\n            onMouseLeave={() => (this.textHover = false)}\r\n            onFocus={() => (this.textFocus = true)}\r\n            onBlur={() => (this.textFocus = false)}\r\n          >\r\n            <slot></slot>\r\n          </span>\r\n          {this.removable && (\r\n            <button\r\n              type=\"button\"\r\n              onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n              onMouseEnter={() => (this.removeHover = true)}\r\n              onMouseLeave={() => (this.removeHover = false)}\r\n              onFocus={() => (this.removeFocus = true)}\r\n              onBlur={() => (this.removeFocus = false)}\r\n            >\r\n              <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          )}\r\n        </span>\r\n        {this.isTruncated && (\r\n          <dso-tooltip\r\n            stateless\r\n            id=\"toggle-anchor\"\r\n            active={this.textHover || this.textFocus}\r\n            position=\"top\"\r\n            strategy=\"absolute\"\r\n          >\r\n            {this.labelText}\r\n          </dso-tooltip>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n","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","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n$slide-toggle-height: 20px;\r\n\r\n:host {\r\n  display: inline-block;\r\n  padding-block-start: (typography.$line-height-base * typography.$font-size-base - $slide-toggle-height) * 0.5;\r\n}\r\n\r\nbutton.dso-slider {\r\n  border: 0;\r\n  padding: 0;\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid colors.$grijs-80;\r\n    outline-offset: 1px;\r\n  }\r\n\r\n  svg {\r\n    rect {\r\n      fill: colors.$grijs-40;\r\n      transition: fill 0.25s;\r\n    }\r\n\r\n    circle {\r\n      @include utilities.transition(transform);\r\n\r\n      transform: translateX(10px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen;\r\n    }\r\n\r\n    circle {\r\n      transform: translateX(30px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[disabled] svg {\r\n    rect {\r\n      fill: colors.$grijs-20;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n\r\n  &[disabled][aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen-40;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-slider {\r\n  border-radius: units.$u3;\r\n  display: inline-flex;\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, State, h } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-slide-toggle\",\r\n  styleUrl: \"slide-toggle.scss\",\r\n  scoped: true,\r\n  shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoSlideToggleElement;\r\n\r\n  /**\r\n   * Set to true if Slide Toggle is checked.\r\n   */\r\n  @Prop()\r\n  checked = false;\r\n\r\n  /**\r\n   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n   */\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  /**\r\n   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n   */\r\n  @Prop()\r\n  accessibleLabel?: string;\r\n\r\n  /**\r\n   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n   */\r\n  @Prop()\r\n  labelledbyId?: string;\r\n\r\n  @State()\r\n  hasVisibleLabel?: boolean;\r\n\r\n  /**\r\n   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n   */\r\n  @Prop()\r\n  identifier = v4();\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event({ composed: false })\r\n  dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n  private handleSwitch(e: Event): void {\r\n    this.dsoActiveChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          id={this.identifier}\r\n          role=\"switch\"\r\n          class=\"dso-slider\"\r\n          aria-checked={\"\" + this.checked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => this.handleSwitch(e)}\r\n          {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n          {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n              <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n              <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n        {this.hasVisibleLabel && (\r\n          <label htmlFor={this.identifier}>\r\n            <slot />\r\n          </label>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"oMAAA,MAAMA,EAAW,m+DCmBjB,MAAMC,EAAiB,IAAIC,eACzBC,GAAUC,IACRA,EAAQC,SAAQ,EAAGC,aACjB,GAAIC,EAAoBD,GAAS,CAC/BA,EAAOE,gB,IAET,GACD,MAGL,SAASD,EAAoBE,GAC3B,OAAOA,EAAQC,UAAY,WAC7B,CAEA,SAASC,EAAYC,GACnB,OAAOA,EAAGC,YAAcD,EAAGE,WAC7B,C,MAOaC,EAAK,MALlB,WAAAC,CAAAC,G,yDAwDEC,KAAWC,YAAG,MAGdD,KAASE,UAAG,EAiJb,CA9IC,cAAAC,CAAeC,GACb,GAAIA,EAAW,CACbJ,KAAKK,uB,KACA,CACLL,KAAKM,sB,EAKT,aAAAC,CAAcC,GACZ,GAAIA,EAAU,CACZR,KAAKS,e,KACA,CACLT,KAAKU,c,EAKT,eAAAC,CAAgBC,GACd,GAAIA,EAAMC,MAAQ,SAAU,CAC1Bb,KAAKc,UAAY,MACjBd,KAAKe,UAAY,K,EAQrB,oBAAMzB,GACJ0B,YAAW,KACThB,KAAKC,cAAgBD,KAAKiB,cAAgBxB,EAAYO,KAAKiB,aAAa,G,CAIpE,aAAAC,G,QACNlB,KAAKE,WAAYiB,GAAAC,EAAApB,KAAKqB,KAAKC,eAAa,MAAAF,SAAA,SAAAA,EAAAG,UAAM,MAAAJ,SAAA,EAAAA,EAAI,E,CAGpD,gBAAAK,GACE,GAAIxB,KAAKQ,SAAU,CACjBR,KAAKS,e,CAGP,GAAIT,KAAKI,UAAW,CAClBJ,KAAKK,uB,EAIT,oBAAAoB,GACEzB,KAAKU,eAELV,KAAKM,qBAAqB,K,CAIpB,qBAAAD,GACNL,KAAK0B,iBAAmB,IAAIC,kBAAiB,IAAM3B,KAAKkB,kBAExDlB,KAAK0B,iBAAiBE,QAAQ5B,KAAKqB,KAAM,CACvCQ,cAAe,KACfC,UAAW,KACXC,QAAS,KACTC,WAAY,OAGdhC,KAAKkB,e,CAGC,oBAAAZ,CAAqB2B,EAAQ,O,MACnC,GAAIA,KAAWjC,KAAKQ,UAAYR,KAAKI,WAAY,EAC/CgB,EAAApB,KAAK0B,oBAAkB,MAAAN,SAAA,SAAAA,EAAAc,oBAEhBlC,KAAK0B,gB,EAIR,aAAAjB,GACN1B,EAAe6C,QAAQ5B,KAAKqB,MAC5BrB,KAAKK,wBACLL,KAAKV,gB,CAGC,YAAAoB,GACN3B,EAAeoD,UAAUnC,KAAKqB,MAC9BrB,KAAKM,uBACLN,KAAKC,YAAc,K,CAGrB,MAAAmC,GACE,OACEC,EAACC,EAAQ,CAAAzB,IAAA,4CACPwB,EAAA,QAAAxB,IAAA,8DACoBb,KAAKC,YAAc,gBAAkB,KACvDsC,MAAOC,EAAK,YAAa,CACvB,CAAC,aAAaxC,KAAKyC,UAAWzC,KAAKyC,OACnC,cAAezC,KAAK0C,UAAY1C,KAAKI,UACrC,YAAaJ,KAAK2C,aAAe3C,KAAK4C,eAGxCP,EAAM,QAAAxB,IAAA,2CAAAgC,KAAK,WACXR,EAAA,QAAAxB,IAAA,2CACE0B,MAAOC,EAAK,oBAAqB,CAC/B,iBAAkBxC,KAAKQ,WAEzBsC,IAAMvD,GAAaS,KAAKiB,aAAe1B,EACvCwD,SAAU/C,KAAKQ,UAAYR,KAAKC,YAAc,EAAI+C,UAClDC,aAAc,IAAOjD,KAAKc,UAAY,KACtCoC,aAAc,IAAOlD,KAAKc,UAAY,MACtCqC,QAAS,IAAOnD,KAAKe,UAAY,KACjCqC,OAAQ,IAAOpD,KAAKe,UAAY,OAEhCsB,EAAA,QAAAxB,IAAA,8CAEDb,KAAKI,WACJiC,EAAA,UAAAxB,IAAA,2CACEwC,KAAK,SACLC,QAAUC,GAAMvD,KAAKwD,eAAeC,KAAKF,GACzCN,aAAc,IAAOjD,KAAK2C,YAAc,KACxCO,aAAc,IAAOlD,KAAK2C,YAAc,MACxCQ,QAAS,IAAOnD,KAAK4C,YAAc,KACnCQ,OAAQ,IAAOpD,KAAK4C,YAAc,OAElCP,EAAM,QAAAxB,IAAA,2CAAA0B,MAAM,WAAS,cAAavC,KAAKE,WACvCmC,EAAA,YAAAxB,IAAA,2CAAU6C,KAAK,YAIpB1D,KAAKC,aACJoC,EAAA,eAAAxB,IAAA,2CACE8C,UACA,KAAAC,GAAG,gBACHC,OAAQ7D,KAAKc,WAAad,KAAKe,UAC/B+C,SAAS,MACTC,SAAS,YAER/D,KAAKE,W,6HCjOX,MAAM8D,EAAiE,EAAGC,OAAMC,OAAMC,0BAC3F,IAAKD,EAAM,CACT,OAAO7B,EAAAC,EAAA,KAAG2B,E,CAGZ,MAAMG,EAASF,EAAKD,GAEpB,IAAKG,EAAQ,CACX,OAAO/B,EAAAC,EAAA,KAAG2B,E,CAGZ,OACE5B,EAAAC,EAAA,KACG8B,EAAOC,KAAKC,IACX,UAAWA,IAAgB,SAAU,CACnC,OAAOjC,EAAAC,EAAA,KAAGgC,E,CAGZ,OACEjC,EACE,QAAAE,MAAO+B,EAAYC,UAAY,gBAAkBvB,UACjDF,IAAMA,GAAQwB,EAAYC,WAAazB,GAAOqB,EAAoBG,EAAYL,KAAMnB,IAEnFwB,EAAYL,KACR,IAGV,EC1BA,MAAMO,EAAyD,EAAGC,QAAOP,OAAMC,0BACpF,UAAWM,IAAU,WAAaA,EAAO,CAEvC,OACEpC,EAAA,QAAME,MAAM,QACVF,EAAC2B,EAAkB,CAAAC,KAAMQ,EAAOP,KAAMA,EAAMC,oBAAqBA,I,CAKvE,GAAI,eAAgBM,EAAO,CACzB,OACEpC,EAAA,WACEA,EAAC2B,EAAkB,CAAAC,KAAMQ,EAAMC,WAAYR,KAAMA,EAAMC,oBAAqBA,I,CAKlF,GAAI,eAAgBM,EAAO,CACzB,OACEpC,EAAA,WACEA,EAAC2B,EAAkB,CAAAC,KAAMQ,EAAME,WAAYT,KAAMA,EAAMC,oBAAqBA,I,CAKlF,OACE9B,EAAAC,EAAA,KACED,EAAA,WACEA,EAAC2B,EAAkB,CAAAC,KAAMQ,EAAMG,IAAKV,KAAMA,EAAMC,oBAAqBA,KAEvE9B,EAAA,WACEA,EAAC2B,EAAkB,CAAAC,KAAMQ,EAAMI,MAAOX,KAAMA,EAAMC,oBAAqBA,KAExE,EC7CP,MAAMW,EAAa,w4E,MCaNC,EAAO,MALpB,WAAAjF,CAAAC,G,mFAgCUC,KAAAgF,wBAA0B,CAACf,EAAcgB,KAC/CjF,KAAKkF,4BAA4BzB,KAAK,CAAEQ,OAAMgB,cAAa,CAgB9D,CAzBC,UAAIE,GACF,IAAKnF,KAAKyE,MAAO,CACf,MAAO,E,CAGT,OAAOW,MAAMC,QAAQrF,KAAKyE,OAASzE,KAAKyE,MAAQ,CAACzE,KAAKyE,M,CAOxD,MAAArC,GACE,OACEC,EAAAC,EAAA,KACGtC,KAAKmF,OAAOd,KAAKiB,GAChBjD,EAACmC,EACC,CAAAC,MAAOa,EACPpB,KAAMlE,KAAKkE,MAAI,CAAMD,IAAS,IAAA7C,EAAA,OAAAA,EAAApB,KAAKkE,QAAO,MAAA9C,SAAA,SAAAA,EAAAmE,KAAAvF,KAAAiE,EAAMqB,EAAGtF,KAAKmF,OAAO,GAC/DhB,oBAAqBnE,KAAKgF,4B,aCnDtC,MAAMQ,EAAiB,s4C,MCWVC,EAAW,MANxB,WAAA3F,CAAAC,G,2DAcEC,KAAO0F,QAAG,MAMV1F,KAAQ2F,SAAG,MAqBX3F,KAAU4F,WAAGC,GA+Cd,CAvCS,YAAAC,CAAavC,GACnBvD,KAAK+F,gBAAgBtC,KAAK,CACxBuC,cAAezC,EACfmC,SAAU1F,KAAK0F,S,CAInB,iBAAAO,GACEjG,KAAKkG,gBAAkBlG,KAAKqB,KAAK8E,cAAc,OAAS,I,CAG1D,MAAA/D,GACE,OACEC,EAAAC,EAAA,KACED,EAAA,SAAA+D,OAAAC,OAAA,CAAAxF,IAAA,2CACE+C,GAAI5D,KAAK4F,WACTU,KAAK,SACL/D,MAAM,aACQ,kBAAKvC,KAAK0F,QACxBC,SAAU3F,KAAK2F,SACfrC,QAAUC,GAAMvD,KAAK8F,aAAavC,IAC7BvD,KAAKuG,gBAAkB,CAAE,aAAcvG,KAAKuG,iBAAoB,GAChEvG,KAAKwG,aAAe,CAAE,kBAAmBxG,KAAKwG,cAAiB,IAEpEnE,EAAA,OAAAxB,IAAA,2CAAK4F,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,aACrEvE,EAAA,KAAAxB,IAAA,2CAAGgG,KAAK,OAAM,YAAW,WACvBxE,EAAA,QAAAxB,IAAA,2CAAM6F,MAAM,KAAKC,OAAO,KAAKE,KAAK,eAAeC,GAAG,OACpDzE,EAAA,UAAAxB,IAAA,2CAAQkG,GAAG,KAAKC,EAAE,IAAIH,KAAK,oBAIhC7G,KAAKkG,iBACJ7D,EAAA,SAAAxB,IAAA,2CAAOoG,QAASjH,KAAK4F,YACnBvD,EAAA,QAAAxB,IAAA,8C","ignoreList":[]}

package/dist/dso-toolkit/{p-a82b3993.entry.js → p-517cbc20.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as s,h as a,g as i}from"./p-C-b4jsbt.js";import{i as o}from"./p-B_kXuEcW.js";import{v as r}from"./p-BF0_OXTe.js";const t={en:{"dso-map-base-layers":{background:"Background"}},nl:{"dso-map-base-layers":{background:"Achtergrond"}}};const d='@charset "UTF-8";:host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}';const n=class{constructor(a){e(this,a);this.dsoBaseLayerChange=s(this,"dsoBaseLayerChange",7);this.selectableRefs={};this.group=r();this.text=o((()=>this.host),t)}baseLayerChangeHandler(e){this.dsoBaseLayerChange.emit({activeBaseLayer:e})}componentDidRender(){this.baseLayers.filter((e=>{var s,a;return!e.disabled&&((a=(s=this.previousBaselayers)===null||s===void 0?void 0:s.find((s=>s.id===e.id)))===null||a===void 0?void 0:a.disabled)===true})).forEach((e=>{var s;(s=this.selectableRefs[e.id])===null||s===void 0?void 0:s.toggleInfo(false)}));this.previousBaselayers=this.baseLayers}render(){for(const e in this.selectableRefs){delete this.selectableRefs[e]}return a("fieldset",{key:"7e13ee00a63cdad0665bc3730387ccac941c8d66",class:"form-group dso-radios"},a("legend",{key:"3ef5163845f93065b87711fd01d78725f227d3ce",class:"sr-only"},"Achtergrond"),a("div",{key:"f0dafaffdc8c13125cd4afb3c98b6384e1312433",class:"dso-label-container"},a("span",{key:"bcf82a98342df39d98832db27823db6e6b2713a2",class:"control-label","aria-hidden":"true"},this.text("background"))),a("div",{key:"2feee1a616600ef226745c101d9a288b25753ac3",class:"dso-field-container"},this.baseLayers.map((e=>a("dso-selectable",{key:e.id,type:"radio",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:()=>this.baseLayerChangeHandler(e)},e.name,e.info?a("p",{slot:"info"},e.info):null)))))}get host(){return i(this)}};n.style=d;export{n as dso_map_base_layers};
-//# sourceMappingURL=p-a82b3993.entry.js.map
+import{r as e,c as s,h as a,g as i}from"./p-C-b4jsbt.js";import{i as o}from"./p-B_kXuEcW.js";import{v as r}from"./p-BF0_OXTe.js";const t={en:{"dso-map-base-layers":{background:"Background"}},nl:{"dso-map-base-layers":{background:"Achtergrond"}}};const d='@charset "UTF-8";:host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}';const n=class{constructor(a){e(this,a);this.dsoBaseLayerChange=s(this,"dsoBaseLayerChange",7);this.selectableRefs={};this.group=r();this.text=o((()=>this.host),t)}baseLayerChangeHandler(e){this.dsoBaseLayerChange.emit({activeBaseLayer:e})}componentDidRender(){this.baseLayers.filter((e=>{var s,a;return!e.disabled&&((a=(s=this.previousBaselayers)===null||s===void 0?void 0:s.find((s=>s.id===e.id)))===null||a===void 0?void 0:a.disabled)===true})).forEach((e=>{var s;(s=this.selectableRefs[e.id])===null||s===void 0?void 0:s.toggleInfo(false)}));this.previousBaselayers=this.baseLayers}render(){for(const e in this.selectableRefs){delete this.selectableRefs[e]}return a("fieldset",{key:"acd8cb9bd22f5021d89e656292650098afb58d3c",class:"form-group dso-radios"},a("legend",{key:"3f6c5f5297323a9d0d1c5195df12b5e162ae3991",class:"sr-only"},"Achtergrond"),a("div",{key:"eea63f4a56b1d01fffaab78202718d667533948f",class:"dso-label-container"},a("span",{key:"c8aba96d494bea90da43c86c4cc28f0f2ae9f737",class:"control-label","aria-hidden":"true"},this.text("background"))),a("div",{key:"e6b5b3718321632fe2b9f794dec1dd74b2876620",class:"dso-field-container"},this.baseLayers.map((e=>a("dso-selectable",{key:e.id,type:"radio",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:()=>this.baseLayerChangeHandler(e)},e.name,e.info?a("p",{slot:"info"},e.info):null)))))}get host(){return i(this)}};n.style=d;export{n as dso_map_base_layers};
+//# sourceMappingURL=p-517cbc20.entry.js.map

package/dist/dso-toolkit/p-54820bbe.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as r,H as e,g as n}from"./p-C-b4jsbt.js";import{c as i}from"./p-ChV9xqsO.js";import{d as a}from"./p-DDU8nTJS.js";import"./p-BFTU3MAI.js";var o="top";var f="bottom";var v="right";var s="left";var u="auto";var c=[o,f,v,s];var l="start";var d="end";var p="clippingParents";var h="viewport";var b="popper";var m="reference";var w=c.reduce((function(t,r){return t.concat([r+"-"+l,r+"-"+d])}),[]);var y=[].concat(c,[u]).reduce((function(t,r){return t.concat([r,r+"-"+l,r+"-"+d])}),[]);var x="beforeRead";var g="read";var O="afterRead";var k="beforeMain";var j="main";var E="afterMain";var T="beforeWrite";var M="write";var z="afterWrite";var S=[x,g,O,k,j,E,T,M,z];function P(t){return t?(t.nodeName||"").toLowerCase():null}function A(t){if(t==null){return window}if(t.toString()!=="[object Window]"){var r=t.ownerDocument;return r?r.defaultView||window:window}return t}function L(t){var r=A(t).Element;return t instanceof r||t instanceof Element}function q(t){var r=A(t).HTMLElement;return t instanceof r||t instanceof HTMLElement}function R(t){if(typeof ShadowRoot==="undefined"){return false}var r=A(t).ShadowRoot;return t instanceof r||t instanceof ShadowRoot}function B(t){var r=t.state;Object.keys(r.elements).forEach((function(t){var e=r.styles[t]||{};var n=r.attributes[t]||{};var i=r.elements[t];if(!q(i)||!P(i)){return}Object.assign(i.style,e);Object.keys(n).forEach((function(t){var r=n[t];if(r===false){i.removeAttribute(t)}else{i.setAttribute(t,r===true?"":r)}}))}))}function C(t){var r=t.state;var e={popper:{position:r.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};Object.assign(r.elements.popper.style,e.popper);r.styles=e;if(r.elements.arrow){Object.assign(r.elements.arrow.style,e.arrow)}return function(){Object.keys(r.elements).forEach((function(t){var n=r.elements[t];var i=r.attributes[t]||{};var a=Object.keys(r.styles.hasOwnProperty(t)?r.styles[t]:e[t]);var o=a.reduce((function(t,r){t[r]="";return t}),{});if(!q(n)||!P(n)){return}Object.assign(n.style,o);Object.keys(i).forEach((function(t){n.removeAttribute(t)}))}))}}var H={name:"applyStyles",enabled:true,phase:"write",fn:B,effect:C,requires:["computeStyles"]};function W(t){return t.split("-")[0]}var D=Math.max;var I=Math.min;var U=Math.round;function F(){var t=navigator.userAgentData;if(t!=null&&t.brands&&Array.isArray(t.brands)){return t.brands.map((function(t){return t.brand+"/"+t.version})).join(" ")}return navigator.userAgent}function $(){return!/^((?!chrome|android).)*safari/i.test(F())}function V(t,r,e){if(r===void 0){r=false}if(e===void 0){e=false}var n=t.getBoundingClientRect();var i=1;var a=1;if(r&&q(t)){i=t.offsetWidth>0?U(n.width)/t.offsetWidth||1:1;a=t.offsetHeight>0?U(n.height)/t.offsetHeight||1:1}var o=L(t)?A(t):window,f=o.visualViewport;var v=!$()&&e;var s=(n.left+(v&&f?f.offsetLeft:0))/i;var u=(n.top+(v&&f?f.offsetTop:0))/a;var c=n.width/i;var l=n.height/a;return{width:c,height:l,top:u,right:s+c,bottom:u+l,left:s,x:s,y:u}}function _(t){var r=V(t);var e=t.offsetWidth;var n=t.offsetHeight;if(Math.abs(r.width-e)<=1){e=r.width}if(Math.abs(r.height-n)<=1){n=r.height}return{x:t.offsetLeft,y:t.offsetTop,width:e,height:n}}function J(t,r){var e=r.getRootNode&&r.getRootNode();if(t.contains(r)){return true}else if(e&&R(e)){var n=r;do{if(n&&t.isSameNode(n)){return true}n=n.parentNode||n.host}while(n)}return false}function N(t){return A(t).getComputedStyle(t)}function G(t){return["table","td","th"].indexOf(P(t))>=0}function K(t){return((L(t)?t.ownerDocument:t.document)||window.document).documentElement}function Q(t){if(P(t)==="html"){return t}return t.assignedSlot||t.parentNode||(R(t)?t.host:null)||K(t)}function X(t){if(!q(t)||N(t).position==="fixed"){return null}return t.offsetParent}function Y(t){var r=/firefox/i.test(F());var e=/Trident/i.test(F());if(e&&q(t)){var n=N(t);if(n.position==="fixed"){return null}}var i=Q(t);if(R(i)){i=i.host}while(q(i)&&["html","body"].indexOf(P(i))<0){var a=N(i);if(a.transform!=="none"||a.perspective!=="none"||a.contain==="paint"||["transform","perspective"].indexOf(a.willChange)!==-1||r&&a.willChange==="filter"||r&&a.filter&&a.filter!=="none"){return i}else{i=i.parentNode}}return null}function Z(t){var r=A(t);var e=X(t);while(e&&G(e)&&N(e).position==="static"){e=X(e)}if(e&&(P(e)==="html"||P(e)==="body"&&N(e).position==="static")){return r}return e||Y(t)||r}function tt(t){return["top","bottom"].indexOf(t)>=0?"x":"y"}function rt(t,r,e){return D(t,I(r,e))}function et(t,r,e){var n=rt(t,r,e);return n>e?e:n}function nt(){return{top:0,right:0,bottom:0,left:0}}function it(t){return Object.assign({},nt(),t)}function at(t,r){return r.reduce((function(r,e){r[e]=t;return r}),{})}var ot=function t(r,e){r=typeof r==="function"?r(Object.assign({},e.rects,{placement:e.placement})):r;return it(typeof r!=="number"?r:at(r,c))};function ft(t){var r;var e=t.state,n=t.name,i=t.options;var a=e.elements.arrow;var u=e.modifiersData.popperOffsets;var c=W(e.placement);var l=tt(c);var d=[s,v].indexOf(c)>=0;var p=d?"height":"width";if(!a||!u){return}var h=ot(i.padding,e);var b=_(a);var m=l==="y"?o:s;var w=l==="y"?f:v;var y=e.rects.reference[p]+e.rects.reference[l]-u[l]-e.rects.popper[p];var x=u[l]-e.rects.reference[l];var g=Z(a);var O=g?l==="y"?g.clientHeight||0:g.clientWidth||0:0;var k=y/2-x/2;var j=h[m];var E=O-b[p]-h[w];var T=O/2-b[p]/2+k;var M=rt(j,T,E);var z=l;e.modifiersData[n]=(r={},r[z]=M,r.centerOffset=M-T,r)}function vt(t){var r=t.state,e=t.options;var n=e.element,i=n===void 0?"[data-popper-arrow]":n;if(i==null){return}if(typeof i==="string"){i=r.elements.popper.querySelector(i);if(!i){return}}if(!J(r.elements.popper,i)){return}r.elements.arrow=i}var st={name:"arrow",enabled:true,phase:"main",fn:ft,effect:vt,requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function ut(t){return t.split("-")[1]}var ct={top:"auto",right:"auto",bottom:"auto",left:"auto"};function lt(t,r){var e=t.x,n=t.y;var i=r.devicePixelRatio||1;return{x:U(e*i)/i||0,y:U(n*i)/i||0}}function dt(t){var r;var e=t.popper,n=t.popperRect,i=t.placement,a=t.variation,u=t.offsets,c=t.position,l=t.gpuAcceleration,p=t.adaptive,h=t.roundOffsets,b=t.isFixed;var m=u.x,w=m===void 0?0:m,y=u.y,x=y===void 0?0:y;var g=typeof h==="function"?h({x:w,y:x}):{x:w,y:x};w=g.x;x=g.y;var O=u.hasOwnProperty("x");var k=u.hasOwnProperty("y");var j=s;var E=o;var T=window;if(p){var M=Z(e);var z="clientHeight";var S="clientWidth";if(M===A(e)){M=K(e);if(N(M).position!=="static"&&c==="absolute"){z="scrollHeight";S="scrollWidth"}}M=M;if(i===o||(i===s||i===v)&&a===d){E=f;var P=b&&M===T&&T.visualViewport?T.visualViewport.height:M[z];x-=P-n.height;x*=l?1:-1}if(i===s||(i===o||i===f)&&a===d){j=v;var L=b&&M===T&&T.visualViewport?T.visualViewport.width:M[S];w-=L-n.width;w*=l?1:-1}}var q=Object.assign({position:c},p&&ct);var R=h===true?lt({x:w,y:x},A(e)):{x:w,y:x};w=R.x;x=R.y;if(l){var B;return Object.assign({},q,(B={},B[E]=k?"0":"",B[j]=O?"0":"",B.transform=(T.devicePixelRatio||1)<=1?"translate("+w+"px, "+x+"px)":"translate3d("+w+"px, "+x+"px, 0)",B))}return Object.assign({},q,(r={},r[E]=k?x+"px":"",r[j]=O?w+"px":"",r.transform="",r))}function pt(t){var r=t.state,e=t.options;var n=e.gpuAcceleration,i=n===void 0?true:n,a=e.adaptive,o=a===void 0?true:a,f=e.roundOffsets,v=f===void 0?true:f;var s={placement:W(r.placement),variation:ut(r.placement),popper:r.elements.popper,popperRect:r.rects.popper,gpuAcceleration:i,isFixed:r.options.strategy==="fixed"};if(r.modifiersData.popperOffsets!=null){r.styles.popper=Object.assign({},r.styles.popper,dt(Object.assign({},s,{offsets:r.modifiersData.popperOffsets,position:r.options.strategy,adaptive:o,roundOffsets:v})))}if(r.modifiersData.arrow!=null){r.styles.arrow=Object.assign({},r.styles.arrow,dt(Object.assign({},s,{offsets:r.modifiersData.arrow,position:"absolute",adaptive:false,roundOffsets:v})))}r.attributes.popper=Object.assign({},r.attributes.popper,{"data-popper-placement":r.placement})}var ht={name:"computeStyles",enabled:true,phase:"beforeWrite",fn:pt,data:{}};var bt={passive:true};function mt(t){var r=t.state,e=t.instance,n=t.options;var i=n.scroll,a=i===void 0?true:i,o=n.resize,f=o===void 0?true:o;var v=A(r.elements.popper);var s=[].concat(r.scrollParents.reference,r.scrollParents.popper);if(a){s.forEach((function(t){t.addEventListener("scroll",e.update,bt)}))}if(f){v.addEventListener("resize",e.update,bt)}return function(){if(a){s.forEach((function(t){t.removeEventListener("scroll",e.update,bt)}))}if(f){v.removeEventListener("resize",e.update,bt)}}}var wt={name:"eventListeners",enabled:true,phase:"write",fn:function t(){},effect:mt,data:{}};var yt={left:"right",right:"left",bottom:"top",top:"bottom"};function xt(t){return t.replace(/left|right|bottom|top/g,(function(t){return yt[t]}))}var gt={start:"end",end:"start"};function Ot(t){return t.replace(/start|end/g,(function(t){return gt[t]}))}function kt(t){var r=A(t);var e=r.pageXOffset;var n=r.pageYOffset;return{scrollLeft:e,scrollTop:n}}function jt(t){return V(K(t)).left+kt(t).scrollLeft}function Et(t,r){var e=A(t);var n=K(t);var i=e.visualViewport;var a=n.clientWidth;var o=n.clientHeight;var f=0;var v=0;if(i){a=i.width;o=i.height;var s=$();if(s||!s&&r==="fixed"){f=i.offsetLeft;v=i.offsetTop}}return{width:a,height:o,x:f+jt(t),y:v}}function Tt(t){var r;var e=K(t);var n=kt(t);var i=(r=t.ownerDocument)==null?void 0:r.body;var a=D(e.scrollWidth,e.clientWidth,i?i.scrollWidth:0,i?i.clientWidth:0);var o=D(e.scrollHeight,e.clientHeight,i?i.scrollHeight:0,i?i.clientHeight:0);var f=-n.scrollLeft+jt(t);var v=-n.scrollTop;if(N(i||e).direction==="rtl"){f+=D(e.clientWidth,i?i.clientWidth:0)-a}return{width:a,height:o,x:f,y:v}}function Mt(t){var r=N(t),e=r.overflow,n=r.overflowX,i=r.overflowY;return/auto|scroll|overlay|hidden/.test(e+i+n)}function zt(t){if(["html","body","#document"].indexOf(P(t))>=0){return t.ownerDocument.body}if(q(t)&&Mt(t)){return t}return zt(Q(t))}function St(t,r){var e;if(r===void 0){r=[]}var n=zt(t);var i=n===((e=t.ownerDocument)==null?void 0:e.body);var a=A(n);var o=i?[a].concat(a.visualViewport||[],Mt(n)?n:[]):n;var f=r.concat(o);return i?f:f.concat(St(Q(o)))}function Pt(t){return Object.assign({},t,{left:t.x,top:t.y,right:t.x+t.width,bottom:t.y+t.height})}function At(t,r){var e=V(t,false,r==="fixed");e.top=e.top+t.clientTop;e.left=e.left+t.clientLeft;e.bottom=e.top+t.clientHeight;e.right=e.left+t.clientWidth;e.width=t.clientWidth;e.height=t.clientHeight;e.x=e.left;e.y=e.top;return e}function Lt(t,r,e){return r===h?Pt(Et(t,e)):L(r)?At(r,e):Pt(Tt(K(t)))}function qt(t){var r=St(Q(t));var e=["absolute","fixed"].indexOf(N(t).position)>=0;var n=e&&q(t)?Z(t):t;if(!L(n)){return[]}return r.filter((function(t){return L(t)&&J(t,n)&&P(t)!=="body"}))}function Rt(t,r,e,n){var i=r==="clippingParents"?qt(t):[].concat(r);var a=[].concat(i,[e]);var o=a[0];var f=a.reduce((function(r,e){var i=Lt(t,e,n);r.top=D(i.top,r.top);r.right=I(i.right,r.right);r.bottom=I(i.bottom,r.bottom);r.left=D(i.left,r.left);return r}),Lt(t,o,n));f.width=f.right-f.left;f.height=f.bottom-f.top;f.x=f.left;f.y=f.top;return f}function Bt(t){var r=t.reference,e=t.element,n=t.placement;var i=n?W(n):null;var a=n?ut(n):null;var u=r.x+r.width/2-e.width/2;var c=r.y+r.height/2-e.height/2;var p;switch(i){case o:p={x:u,y:r.y-e.height};break;case f:p={x:u,y:r.y+r.height};break;case v:p={x:r.x+r.width,y:c};break;case s:p={x:r.x-e.width,y:c};break;default:p={x:r.x,y:r.y}}var h=i?tt(i):null;if(h!=null){var b=h==="y"?"height":"width";switch(a){case l:p[h]=p[h]-(r[b]/2-e[b]/2);break;case d:p[h]=p[h]+(r[b]/2-e[b]/2);break}}return p}function Ct(t,r){if(r===void 0){r={}}var e=r,n=e.placement,i=n===void 0?t.placement:n,a=e.strategy,s=a===void 0?t.strategy:a,u=e.boundary,l=u===void 0?p:u,d=e.rootBoundary,w=d===void 0?h:d,y=e.elementContext,x=y===void 0?b:y,g=e.altBoundary,O=g===void 0?false:g,k=e.padding,j=k===void 0?0:k;var E=it(typeof j!=="number"?j:at(j,c));var T=x===b?m:b;var M=t.rects.popper;var z=t.elements[O?T:x];var S=Rt(L(z)?z:z.contextElement||K(t.elements.popper),l,w,s);var P=V(t.elements.reference);var A=Bt({reference:P,element:M,placement:i});var q=Pt(Object.assign({},M,A));var R=x===b?q:P;var B={top:S.top-R.top+E.top,bottom:R.bottom-S.bottom+E.bottom,left:S.left-R.left+E.left,right:R.right-S.right+E.right};var C=t.modifiersData.offset;if(x===b&&C){var H=C[i];Object.keys(B).forEach((function(t){var r=[v,f].indexOf(t)>=0?1:-1;var e=[o,f].indexOf(t)>=0?"y":"x";B[t]+=H[e]*r}))}return B}function Ht(t,r){if(r===void 0){r={}}var e=r,n=e.placement,i=e.boundary,a=e.rootBoundary,o=e.padding,f=e.flipVariations,v=e.allowedAutoPlacements,s=v===void 0?y:v;var u=ut(n);var l=u?f?w:w.filter((function(t){return ut(t)===u})):c;var d=l.filter((function(t){return s.indexOf(t)>=0}));if(d.length===0){d=l}var p=d.reduce((function(r,e){r[e]=Ct(t,{placement:e,boundary:i,rootBoundary:a,padding:o})[W(e)];return r}),{});return Object.keys(p).sort((function(t,r){return p[t]-p[r]}))}function Wt(t){if(W(t)===u){return[]}var r=xt(t);return[Ot(t),r,Ot(r)]}function Dt(t){var r=t.state,e=t.options,n=t.name;if(r.modifiersData[n]._skip){return}var i=e.mainAxis,a=i===void 0?true:i,c=e.altAxis,d=c===void 0?true:c,p=e.fallbackPlacements,h=e.padding,b=e.boundary,m=e.rootBoundary,w=e.altBoundary,y=e.flipVariations,x=y===void 0?true:y,g=e.allowedAutoPlacements;var O=r.options.placement;var k=W(O);var j=k===O;var E=p||(j||!x?[xt(O)]:Wt(O));var T=[O].concat(E).reduce((function(t,e){return t.concat(W(e)===u?Ht(r,{placement:e,boundary:b,rootBoundary:m,padding:h,flipVariations:x,allowedAutoPlacements:g}):e)}),[]);var M=r.rects.reference;var z=r.rects.popper;var S=new Map;var P=true;var A=T[0];for(var L=0;L<T.length;L++){var q=T[L];var R=W(q);var B=ut(q)===l;var C=[o,f].indexOf(R)>=0;var H=C?"width":"height";var D=Ct(r,{placement:q,boundary:b,rootBoundary:m,altBoundary:w,padding:h});var I=C?B?v:s:B?f:o;if(M[H]>z[H]){I=xt(I)}var U=xt(I);var F=[];if(a){F.push(D[R]<=0)}if(d){F.push(D[I]<=0,D[U]<=0)}if(F.every((function(t){return t}))){A=q;P=false;break}S.set(q,F)}if(P){var $=x?3:1;var V=function t(r){var e=T.find((function(t){var e=S.get(t);if(e){return e.slice(0,r).every((function(t){return t}))}}));if(e){A=e;return"break"}};for(var _=$;_>0;_--){var J=V(_);if(J==="break")break}}if(r.placement!==A){r.modifiersData[n]._skip=true;r.placement=A;r.reset=true}}var It={name:"flip",enabled:true,phase:"main",fn:Dt,requiresIfExists:["offset"],data:{_skip:false}};function Ut(t,r,e){if(e===void 0){e={x:0,y:0}}return{top:t.top-r.height-e.y,right:t.right-r.width+e.x,bottom:t.bottom-r.height+e.y,left:t.left-r.width-e.x}}function Ft(t){return[o,v,f,s].some((function(r){return t[r]>=0}))}function $t(t){var r=t.state,e=t.name;var n=r.rects.reference;var i=r.rects.popper;var a=r.modifiersData.preventOverflow;var o=Ct(r,{elementContext:"reference"});var f=Ct(r,{altBoundary:true});var v=Ut(o,n);var s=Ut(f,i,a);var u=Ft(v);var c=Ft(s);r.modifiersData[e]={referenceClippingOffsets:v,popperEscapeOffsets:s,isReferenceHidden:u,hasPopperEscaped:c};r.attributes.popper=Object.assign({},r.attributes.popper,{"data-popper-reference-hidden":u,"data-popper-escaped":c})}var Vt={name:"hide",enabled:true,phase:"main",requiresIfExists:["preventOverflow"],fn:$t};function _t(t,r,e){var n=W(t);var i=[s,o].indexOf(n)>=0?-1:1;var a=typeof e==="function"?e(Object.assign({},r,{placement:t})):e,f=a[0],u=a[1];f=f||0;u=(u||0)*i;return[s,v].indexOf(n)>=0?{x:u,y:f}:{x:f,y:u}}function Jt(t){var r=t.state,e=t.options,n=t.name;var i=e.offset,a=i===void 0?[0,0]:i;var o=y.reduce((function(t,e){t[e]=_t(e,r.rects,a);return t}),{});var f=o[r.placement],v=f.x,s=f.y;if(r.modifiersData.popperOffsets!=null){r.modifiersData.popperOffsets.x+=v;r.modifiersData.popperOffsets.y+=s}r.modifiersData[n]=o}var Nt={name:"offset",enabled:true,phase:"main",requires:["popperOffsets"],fn:Jt};function Gt(t){var r=t.state,e=t.name;r.modifiersData[e]=Bt({reference:r.rects.reference,element:r.rects.popper,placement:r.placement})}var Kt={name:"popperOffsets",enabled:true,phase:"read",fn:Gt,data:{}};function Qt(t){return t==="x"?"y":"x"}function Xt(t){var r=t.state,e=t.options,n=t.name;var i=e.mainAxis,a=i===void 0?true:i,u=e.altAxis,c=u===void 0?false:u,d=e.boundary,p=e.rootBoundary,h=e.altBoundary,b=e.padding,m=e.tether,w=m===void 0?true:m,y=e.tetherOffset,x=y===void 0?0:y;var g=Ct(r,{boundary:d,rootBoundary:p,padding:b,altBoundary:h});var O=W(r.placement);var k=ut(r.placement);var j=!k;var E=tt(O);var T=Qt(E);var M=r.modifiersData.popperOffsets;var z=r.rects.reference;var S=r.rects.popper;var P=typeof x==="function"?x(Object.assign({},r.rects,{placement:r.placement})):x;var A=typeof P==="number"?{mainAxis:P,altAxis:P}:Object.assign({mainAxis:0,altAxis:0},P);var L=r.modifiersData.offset?r.modifiersData.offset[r.placement]:null;var q={x:0,y:0};if(!M){return}if(a){var R;var B=E==="y"?o:s;var C=E==="y"?f:v;var H=E==="y"?"height":"width";var U=M[E];var F=U+g[B];var $=U-g[C];var V=w?-S[H]/2:0;var J=k===l?z[H]:S[H];var N=k===l?-S[H]:-z[H];var G=r.elements.arrow;var K=w&&G?_(G):{width:0,height:0};var Q=r.modifiersData["arrow#persistent"]?r.modifiersData["arrow#persistent"].padding:nt();var X=Q[B];var Y=Q[C];var it=rt(0,z[H],K[H]);var at=j?z[H]/2-V-it-X-A.mainAxis:J-it-X-A.mainAxis;var ot=j?-z[H]/2+V+it+Y+A.mainAxis:N+it+Y+A.mainAxis;var ft=r.elements.arrow&&Z(r.elements.arrow);var vt=ft?E==="y"?ft.clientTop||0:ft.clientLeft||0:0;var st=(R=L==null?void 0:L[E])!=null?R:0;var ct=U+at-st-vt;var lt=U+ot-st;var dt=rt(w?I(F,ct):F,U,w?D($,lt):$);M[E]=dt;q[E]=dt-U}if(c){var pt;var ht=E==="x"?o:s;var bt=E==="x"?f:v;var mt=M[T];var wt=T==="y"?"height":"width";var yt=mt+g[ht];var xt=mt-g[bt];var gt=[o,s].indexOf(O)!==-1;var Ot=(pt=L==null?void 0:L[T])!=null?pt:0;var kt=gt?yt:mt-z[wt]-S[wt]-Ot+A.altAxis;var jt=gt?mt+z[wt]+S[wt]-Ot-A.altAxis:xt;var Et=w&&gt?et(kt,mt,jt):rt(w?kt:yt,mt,w?jt:xt);M[T]=Et;q[T]=Et-mt}r.modifiersData[n]=q}var Yt={name:"preventOverflow",enabled:true,phase:"main",fn:Xt,requiresIfExists:["offset"]};function Zt(t){return{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function tr(t){if(t===A(t)||!q(t)){return kt(t)}else{return Zt(t)}}function rr(t){var r=t.getBoundingClientRect();var e=U(r.width)/t.offsetWidth||1;var n=U(r.height)/t.offsetHeight||1;return e!==1||n!==1}function er(t,r,e){if(e===void 0){e=false}var n=q(r);var i=q(r)&&rr(r);var a=K(r);var o=V(t,i,e);var f={scrollLeft:0,scrollTop:0};var v={x:0,y:0};if(n||!n&&!e){if(P(r)!=="body"||Mt(a)){f=tr(r)}if(q(r)){v=V(r,true);v.x+=r.clientLeft;v.y+=r.clientTop}else if(a){v.x=jt(a)}}return{x:o.left+f.scrollLeft-v.x,y:o.top+f.scrollTop-v.y,width:o.width,height:o.height}}function nr(t){var r=new Map;var e=new Set;var n=[];t.forEach((function(t){r.set(t.name,t)}));function i(t){e.add(t.name);var a=[].concat(t.requires||[],t.requiresIfExists||[]);a.forEach((function(t){if(!e.has(t)){var n=r.get(t);if(n){i(n)}}}));n.push(t)}t.forEach((function(t){if(!e.has(t.name)){i(t)}}));return n}function ir(t){var r=nr(t);return S.reduce((function(t,e){return t.concat(r.filter((function(t){return t.phase===e})))}),[])}function ar(t){var r;return function(){if(!r){r=new Promise((function(e){Promise.resolve().then((function(){r=undefined;e(t())}))}))}return r}}function or(t){var r=t.reduce((function(t,r){var e=t[r.name];t[r.name]=e?Object.assign({},e,r,{options:Object.assign({},e.options,r.options),data:Object.assign({},e.data,r.data)}):r;return t}),{});return Object.keys(r).map((function(t){return r[t]}))}var fr={placement:"bottom",modifiers:[],strategy:"absolute"};function vr(){for(var t=arguments.length,r=new Array(t),e=0;e<t;e++){r[e]=arguments[e]}return!r.some((function(t){return!(t&&typeof t.getBoundingClientRect==="function")}))}function sr(t){if(t===void 0){t={}}var r=t,e=r.defaultModifiers,n=e===void 0?[]:e,i=r.defaultOptions,a=i===void 0?fr:i;return function t(r,e,i){if(i===void 0){i=a}var o={placement:"bottom",orderedModifiers:[],options:Object.assign({},fr,a),modifiersData:{},elements:{reference:r,popper:e},attributes:{},styles:{}};var f=[];var v=false;var s={state:o,setOptions:function t(i){var f=typeof i==="function"?i(o.options):i;c();o.options=Object.assign({},a,o.options,f);o.scrollParents={reference:L(r)?St(r):r.contextElement?St(r.contextElement):[],popper:St(e)};var v=ir(or([].concat(n,o.options.modifiers)));o.orderedModifiers=v.filter((function(t){return t.enabled}));u();return s.update()},forceUpdate:function t(){if(v){return}var r=o.elements,e=r.reference,n=r.popper;if(!vr(e,n)){return}o.rects={reference:er(e,Z(n),o.options.strategy==="fixed"),popper:_(n)};o.reset=false;o.placement=o.options.placement;o.orderedModifiers.forEach((function(t){return o.modifiersData[t.name]=Object.assign({},t.data)}));for(var i=0;i<o.orderedModifiers.length;i++){if(o.reset===true){o.reset=false;i=-1;continue}var a=o.orderedModifiers[i],f=a.fn,u=a.options,c=u===void 0?{}:u,l=a.name;if(typeof f==="function"){o=f({state:o,options:c,name:l,instance:s})||o}}},update:ar((function(){return new Promise((function(t){s.forceUpdate();t(o)}))})),destroy:function t(){c();v=true}};if(!vr(r,e)){return s}s.setOptions(i).then((function(t){if(!v&&i.onFirstUpdate){i.onFirstUpdate(t)}}));function u(){o.orderedModifiers.forEach((function(t){var r=t.name,e=t.options,n=e===void 0?{}:e,i=t.effect;if(typeof i==="function"){var a=i({state:o,name:r,instance:s,options:n});var v=function t(){};f.push(a||v)}}))}function c(){f.forEach((function(t){return t()}));f=[]}return s}}var ur=[wt,Kt,ht,H,Nt,It,Yt,st,Vt];var cr=sr({defaultModifiers:ur});var lr={name:"maxSize",enabled:true,phase:"main",requiresIfExists:["offset","preventOverflow","flip"],fn:function t(r){var e=r.state,n=r.name,i=r.options;var a=Ct(e,i);var o=e.modifiersData.preventOverflow||{x:0,y:0},f=o.x,v=o.y;var s=e.rects.popper,u=s.width,c=s.height;var l=e.placement.split("-"),d=l[0];var p=d==="left"?"left":"right";var h=d==="top"?"top":"bottom";e.modifiersData[n]={width:u-a[p]-f,height:c-a[h]-v}}};function dr(t){const r=window.getComputedStyle(t);const e=r.getPropertyValue("overflow-x");const n=r.getPropertyValue("overflow-y");const i=["hidden","clip"];return i.indexOf(e)!==-1||i.indexOf(n)!==-1}const pr='@charset "UTF-8";:host(.hidden){visibility:hidden}*,*::after,*::before{box-sizing:border-box}.tooltip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;overflow-wrap:anywhere;word-spacing:normal;word-wrap:normal;white-space:normal;--link-color:#39870c;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:410}.tooltip.in{opacity:1}.tooltip.in .tooltip-inner{max-block-size:200vh;overflow:auto;visibility:visible;padding-block:8px;padding-inline:16px}.tooltip:not(.in) .tooltip-inner{max-block-size:0;overflow:hidden;visibility:hidden;transition:all 0s linear 0.15s}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:1rem;max-inline-size:640px;position:relative}.tooltip .tooltip-inner.dso-small{max-inline-size:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;block-size:0;inline-size:0}.tooltip[data-popper-placement=top]{margin-block-start:-3px;padding-inline:0}.tooltip[data-popper-placement=top] .tooltip-arrow{inset-block-end:0;border-block-start-color:#fff;border-width:6px;border-block-end-width:0;margin-inline-start:var(--tooltip-margin-inline-start, -3px)}.tooltip[data-popper-placement=right]{margin-inline-start:3px;padding-inline-start:6px}.tooltip[data-popper-placement=right] .tooltip-arrow{inset-inline-start:0;border-inline-end-color:#fff;border-width:6px;border-inline-start-width:0;margin-block-start:var(--tooltip-margin-block-start, -3px)}.tooltip[data-popper-placement=bottom]{margin-block-start:3px;padding-block-start:6px;padding-inline:0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{inset-block-start:0;border-block-end-color:#fff;border-width:6px;border-block-start-width:0;margin-inline-start:var(--tooltip-margin-inline-start, -3px)}.tooltip[data-popper-placement=left]{margin-inline-start:-3px;margin-inline-end:var(--tooltip-margin-inline-end, unset);padding-block:0;padding-inline-end:6px}.tooltip[data-popper-placement=left] .tooltip-arrow{inset-inline-end:0;border-inline-start-color:#fff;border-width:6px;border-inline-end-width:0;margin-block-start:var(--tooltip-margin-block-start, -3px)}';var hr=undefined&&undefined.__classPrivateFieldGet||function(t,r,e,n){if(e==="a"&&!n)throw new TypeError("Private accessor was defined without a getter");if(typeof r==="function"?t!==r||!n:!r.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?n:e==="a"?n.call(t):n?n.value:r.get(t)};var br=undefined&&undefined.__classPrivateFieldSet||function(t,r,e,n,i){if(n==="m")throw new TypeError("Private method is not writable");if(n==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof r==="function"?t!==r||!i:!r.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return n==="a"?i.call(t,e):i?i.value=e:r.set(t,e),e};var mr;const wr=150;const yr={name:"applyMaxSize",enabled:true,phase:T,requires:["maxSize"],fn({state:t}){let{width:r}=t.modifiersData.maxSize;if(r<160){r=160}t.styles.popper=Object.assign(Object.assign({},t.styles.popper),{maxWidth:`${r}px`})}};const xr=class{constructor(r){t(this,r);this.descriptive=false;this.position="top";this.strategy="auto";this.noArrow=false;this.active=false;this.callbacks={activate:()=>this.active=true,deactivate:()=>{setTimeout((()=>{if(this.element.isConnected){this.active=false}}),2)}};this.onMouseLeave=()=>{var t;if(!this.element.matches(":hover")&&!((t=this.target)===null||t===void 0?void 0:t.matches(":hover"))){this.callbacks.deactivate()}};this.hidden=true;this.keyDownListener=t=>{if(t.key==="Escape"){this.deactivate()}};this.deactivatePopper=a((()=>{var t;this.hidden=true;(t=this.popper)===null||t===void 0?void 0:t.destroy();this.popper=undefined}),wr);mr.set(this,void 0)}async activate(){this.active=true}async deactivate(){this.active=false}watchPosition(){if(!this.popper){return}this.popper.setOptions({placement:this.position})}watchStrategy(){this.setStrategy()}setStrategy(){if(!this.popper){return}if(this.strategy==="absolute"||this.strategy==="fixed"){this.popper.setOptions({strategy:this.strategy});return}let t=this.element;while(t&&t.parentNode!==document){t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement;if(t!==null&&dr(t)){this.popper.setOptions({strategy:"fixed"});return}}this.popper.setOptions({strategy:"absolute"})}watchActive(){if(this.active){this.activatePopper();if(!this.stateless){setTimeout((()=>{var t;(t=this.popper)===null||t===void 0?void 0:t.setOptions({modifiers:[{name:"eventListeners",enabled:true}]});document.addEventListener("keydown",this.keyDownListener)}))}}else{document.removeEventListener("keydown",this.keyDownListener);this.deactivatePopper()}}listenClick(t){t.stopPropagation()}componentDidLoad(){var t;const r=(t=this.element.shadowRoot)===null||t===void 0?void 0:t.querySelector(".tooltip");if(!(r instanceof HTMLElement)){throw new Error("tooltip element is not instanceof HTMLElement")}if(!this.stateless&&this.target){this.target.addEventListener("mouseenter",this.callbacks.activate);[this.element,this.target].forEach((t=>t.addEventListener("mouseleave",this.onMouseLeave)));this.target.addEventListener("focus",this.callbacks.activate);this.target.addEventListener("blur",this.callbacks.deactivate)}}disconnectedCallback(){var t;(t=this.popper)===null||t===void 0?void 0:t.destroy();if(!this.stateless&&this.target){this.target.removeEventListener("mouseenter",this.callbacks.activate);[this.element,this.target].forEach((t=>t.removeEventListener("mouseleave",this.onMouseLeave)));this.target.removeEventListener("focus",this.callbacks.activate);this.target.removeEventListener("blur",this.callbacks.deactivate)}this.target=undefined}componentDidRender(){var t;if(this.active){(t=this.popper)===null||t===void 0?void 0:t.update()}}render(){return r(e,{key:"eff3b2b70b8a7dcf3a0cf044b455493eb150bb56",class:{hidden:this.hidden},role:"tooltip",onClick:this.listenClick},r("div",{key:"f01664821ef0389bb10e30a5029e9e0d01dd4718",class:i("tooltip",{in:this.active})},!this.noArrow&&r("div",{key:"fd4b1942cf719a4df49049cd07383ae16f485d9f","data-popper-arrow":true,class:"tooltip-arrow"}),r("div",{key:"ad7b70bd41618de9b834cd8259f3485ac1b4670c","aria-hidden":!this.descriptive||undefined,class:i("tooltip-inner",{"dso-small":this.small})},r("slot",{key:"f3a11c6f3fa1c575295d7efeaa0992355245b59c"}))))}activatePopper(){var t;this.hidden=false;if(this.popper){return}const r=(t=this.element.shadowRoot)===null||t===void 0?void 0:t.querySelector(".tooltip");if(this.target&&r instanceof HTMLElement){this.popper=cr(this.target,r,{placement:this.position,modifiers:[lr,yr,{name:"eventListeners",enabled:false}]});this.setStrategy()}}get target(){var t;return(t=hr(this,mr,"f"))!==null&&t!==void 0?t:this.initializeTarget()}set target(t){br(this,mr,t,"f")}initializeTarget(){const t=this.element.id;if(!t){console.warn("Unable to find reference tooltip has no [id] attribute.");return}const r=this.element.getRootNode();if(!(r instanceof Document||r instanceof ShadowRoot)){console.warn(`rootNode is not instance of Document or ShadowRoot`);return}const e=r.querySelector(`[aria-describedBy="${t}`);if(!e){console.warn(`Unable to find reference with aria-describedby ${t}`);return}br(this,mr,e,"f");return e}get element(){return n(this)}static get watchers(){return{position:["watchPosition"],strategy:["watchStrategy"],active:["watchActive"]}}};mr=new WeakMap;xr.style=pr;export{xr as dso_tooltip};
+//# sourceMappingURL=p-54820bbe.entry.js.map