@dso-toolkit/core 63.0.0 → 65.0.0

package/dist/dso-toolkit/p-1a824699.entry.js

@@ -0,0 +1,2 @@
+import{r as n,h as e,F as o}from"./p-b623c74b.js";import{c as t}from"./p-808a98bc.js";import"./p-1dbcaeef.js";const i=":host {\n  display: block;\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.wrapper {\n  block-size: 100%;\n  inset-inline-start: 0;\n  position: fixed;\n  inset-block-start: 0;\n  visibility: hidden;\n  inline-size: 100%;\n}\n.wrapper.visible {\n  visibility: visible;\n}\n\n.dimscreen {\n  background-color: #000;\n  block-size: 100%;\n  opacity: 0.4;\n  inline-size: 100%;\n}\n\n.open-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  border: 0;\n  inset-block-end: 16px;\n  font-family: Asap, sans-serif;\n  position: fixed;\n  inset-inline-end: 16px;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n.open-button:focus, .open-button:focus-visible {\n  outline-offset: 2px;\n}\n.open-button:active {\n  outline: 0;\n}\n.open-button {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.open-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.open-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.open-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.open-button[disabled], .open-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.open-button.dso-small {\n  line-height: 1rem;\n}\n.open-button.dso-small dso-icon,\n.open-button.dso-small svg.di, .open-button.dso-small.extern::after, .open-button.dso-small.download::after, .open-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.open-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.open-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.open-button dso-icon,\n.open-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.open-button span + dso-icon,\n.open-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.open-button.dso-spinner-left[disabled], .open-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.open-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.open-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.open-button:hover {\n  cursor: pointer;\n}\n.open-button.open {\n  display: none;\n}\n\n.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  border-inline-end: 0;\n  border-block-start: 0;\n  border-radius: 0 0 0 8px;\n  block-size: 40px;\n  min-inline-size: 40px;\n  padding: 0;\n  position: fixed;\n  inset-inline-end: 0;\n  inline-size: 40px;\n  inset-block-start: 0;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close-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.close-button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close-button:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.close-button[disabled], .close-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.close-button.dso-small {\n  line-height: 1rem;\n}\n.close-button.dso-small dso-icon,\n.close-button.dso-small svg.di, .close-button.dso-small.extern::after, .close-button.dso-small.download::after, .close-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.close-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button dso-icon,\n.close-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.close-button span + dso-icon,\n.close-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.close-button.dso-spinner-left[disabled], .close-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.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: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.close-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.close-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.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: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.close-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.close-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button dso-icon {\n  margin-inline-start: 0;\n  margin-inline-end: 0;\n  position: absolute;\n  inset-inline-start: 50%;\n  inset-block-start: 50%;\n  transform: translate(-50%, -50%);\n}\n.close-button:hover, .close-button:active, .close-button:focus {\n  cursor: pointer;\n}\n.close-button.close {\n  display: none;\n}\n\n.iframe-container {\n  background-color: #fff;\n  border: 0;\n  border-inline-start: 1px solid #ccc;\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\n  block-size: 100%;\n  position: absolute;\n  inset-block-start: 0;\n  transition: inset-inline-end 0.5s;\n}\n@media screen and (max-width: 480px) {\n  .iframe-container {\n    inset-inline-end: -320px;\n    inline-size: 320px;\n  }\n}\n@media screen and (min-width: 481px) and (max-width: 767px) {\n  .iframe-container {\n    inset-inline-end: -480px;\n    inline-size: 480px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .iframe-container {\n    inset-inline-end: -640px;\n    inline-size: 640px;\n  }\n}\n.iframe-container.open {\n  inset-inline-end: 0;\n}\n\niframe {\n  border: 0;\n  block-size: 100%;\n  inline-size: 100%;\n}";const s=i;const r=500;const a=class{constructor(e){n(this,e);this.iframeLoaded=false;this.openClick=()=>{this.visibility="visible";this.slideState="open";setTimeout((()=>{this.isOpen="open"}));if(!this.loadIframe){setTimeout((()=>{this.loadIframe=true}),r)}};this.closeClick=()=>{this.isOpen="close";this.slideState="close";setTimeout((()=>{this.visibility="hidden"}),r)};this.label="Hulp nodig";this.url=undefined;this.visibility="hidden";this.isOpen="close";this.slideState="close";this.loadIframe=false}watchUrl(n){if(this.isOpen==="open"&&this.iframeUrl!==n){this.iframeUrl=n}}watchIsOpen(n){const e=document.querySelector("body");if(n==="open"){e===null||e===void 0?void 0:e.style.setProperty("overflow","hidden");if(this.iframeUrl!==this.url){this.iframeUrl=this.url}}else{e===null||e===void 0?void 0:e.style.removeProperty("overflow")}}keyDownListener(n){if(n.key==="Escape"&&this.isOpen==="open"){this.closeClick()}}createTrap(){var n,e;if(!this.panelWrapperElement){return}this.trap=t(this.panelWrapperElement,{allowOutsideClick:true,tabbableOptions:{getShadowRoot:true},setReturnFocus:(n=this.openButtonElement)!==null&&n!==void 0?n:false,initialFocus:(e=this.closeButtonElement)!==null&&e!==void 0?e:false}).activate()}componentDidRender(){var n;if(this.isOpen==="open"&&this.iframeLoaded&&!this.trap){this.createTrap()}else if(this.isOpen==="close"&&this.trap){(n=this.trap)===null||n===void 0?void 0:n.deactivate();delete this.trap}}render(){return e(o,null,e("button",{key:"7ebc1495b2933c451a256a4006cc8282e8f2325e",type:"button",onClick:this.openClick,class:`open-button ${this.isOpen}`,"aria-expanded":this.isOpen==="open"?"true":"false","aria-haspopup":"dialog","aria-controls":"dso-panel-wrapper",ref:n=>this.openButtonElement=n},e("dso-icon",{key:"119fcbef430ef1808b1a7890dafae7a989ac84d8",icon:"help"}),e("span",{key:"2d92f7abc9c01f217e59f3560ff6ebfb7cc1161b"},this.label)),e("div",{key:"f57b69556a038441adc316cce74c5e29b455ff4c",id:"dso-panel-wrapper",class:`wrapper ${this.visibility}`,"aria-label":"helpcentrum",role:"dialog",ref:n=>this.panelWrapperElement=n},e("div",{key:"4ca3979f6e933c0b102d8443f494d52a51629605",class:"dimscreen",onClick:this.closeClick}),e("div",{key:"da51b5c07f9bca49f35c0894997634ab736ab44d",class:`iframe-container ${this.slideState}`,"aria-live":"polite"},this.loadIframe?e("iframe",{src:this.iframeUrl,tabindex:"0",onLoad:()=>{this.createTrap();this.iframeLoaded=true}}):e("div",null)),e("button",{key:"bf2c1b8eee6509c14ea3710e60c83c2fbc949517",type:"button",class:`close-button ${this.isOpen}`,onClick:this.closeClick,"aria-expanded":this.isOpen==="open"?"true":"false","aria-controls":"dso-panel-wrapper",ref:n=>this.closeButtonElement=n},e("dso-icon",{key:"3ece8241d7f302a9471ce232e763955a8ffb3094",icon:"times"}),e("span",{key:"284e9eadf0404f45c34b128ff833f0e0e5e81642",class:"sr-only"},"sluiten"))))}static get watchers(){return{url:["watchUrl"],isOpen:["watchIsOpen"]}}};a.style=s;export{a as dso_helpcenter_panel};
+//# sourceMappingURL=p-1a824699.entry.js.map

package/dist/dso-toolkit/{p-289c49f5.entry.js.map → p-1a824699.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["helpcenterPanelCss","DsoHelpcenterPanelStyle0","maxCssTransitionMilliseconds","HelpcenterPanel","this","iframeLoaded","openClick","visibility","slideState","setTimeout","isOpen","loadIframe","closeClick","watchUrl","url","iframeUrl","watchIsOpen","body","document","querySelector","style","setProperty","removeProperty","keyDownListener","event","key","createTrap","panelWrapperElement","trap","createFocusTrap","allowOutsideClick","tabbableOptions","getShadowRoot","setReturnFocus","_a","openButtonElement","initialFocus","_b","closeButtonElement","activate","componentDidRender","deactivate","render","h","Fragment","type","onClick","class","ref","element","icon","label","id","role","src","tabindex","onLoad"],"sources":["src/components/helpcenter-panel/helpcenter-panel.scss?tag=dso-helpcenter-panel&encapsulation=shadow","src/components/helpcenter-panel/helpcenter-panel.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.wrapper {\r\n  block-size: 100%;\r\n  inset-inline-start: 0;\r\n  position: fixed;\r\n  inset-block-start: 0;\r\n  visibility: hidden;\r\n  inline-size: 100%;\r\n\r\n  &.visible {\r\n    visibility: visible;\r\n  }\r\n}\r\n\r\n.dimscreen {\r\n  background-color: colors.$zwart;\r\n  block-size: 100%;\r\n  opacity: 0.4;\r\n  inline-size: 100%;\r\n}\r\n\r\n.open-button {\r\n  @include button.primary($modifiers: false);\r\n\r\n  border: 0;\r\n  inset-block-end: units.$u2;\r\n  font-family: typography.$font-family-base;\r\n  position: fixed;\r\n  inset-inline-end: units.$u2;\r\n  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &.open {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.close-button {\r\n  @include button.secondary($modifiers: false);\r\n\r\n  border-inline-end: 0;\r\n  border-block-start: 0;\r\n  border-radius: 0 0 0 units.$u1;\r\n  block-size: units.$u5;\r\n  min-inline-size: units.$u5;\r\n  padding: 0;\r\n  position: fixed;\r\n  inset-inline-end: 0;\r\n  inline-size: units.$u5;\r\n  inset-block-start: 0;\r\n\r\n  dso-icon {\r\n    margin-inline-start: 0;\r\n    margin-inline-end: 0;\r\n    position: absolute;\r\n    inset-inline-start: 50%;\r\n    inset-block-start: 50%;\r\n    transform: translate(-50%, -50%);\r\n  }\r\n\r\n  &:hover,\r\n  &:active,\r\n  &:focus {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &.close {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.iframe-container {\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  border-inline-start: 1px solid colors.$grijs-20;\r\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\r\n  block-size: 100%;\r\n  position: absolute;\r\n  inset-block-start: 0;\r\n  transition: inset-inline-end 0.5s;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inset-inline-end: -320px;\r\n    inline-size: 320px;\r\n  }\r\n\r\n  @media screen and (min-width: (media-query-breakpoints.$screen-xs-min + 1)) and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    inset-inline-end: -480px;\r\n    inline-size: 480px;\r\n  }\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    inset-inline-end: -640px;\r\n    inline-size: 640px;\r\n  }\r\n\r\n  &.open {\r\n    inset-inline-end: 0;\r\n  }\r\n}\r\n\r\niframe {\r\n  border: 0;\r\n  block-size: 100%;\r\n  inline-size: 100%;\r\n}\r\n","import { h, Component, Fragment, Prop, State, Watch, Listen } from \"@stencil/core\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\nconst maxCssTransitionMilliseconds = 500;\r\n\r\n@Component({\r\n  tag: \"dso-helpcenter-panel\",\r\n  styleUrl: \"helpcenter-panel.scss\",\r\n  shadow: true,\r\n})\r\nexport class HelpcenterPanel {\r\n  private iframeUrl?: string;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private panelWrapperElement?: HTMLDivElement;\r\n\r\n  private openButtonElement?: HTMLButtonElement;\r\n\r\n  private closeButtonElement?: HTMLButtonElement;\r\n\r\n  private iframeLoaded = false;\r\n\r\n  /**\r\n   * The label on the help button that activates the Helpcenter.\r\n   */\r\n  @Prop()\r\n  label = \"Hulp nodig\";\r\n\r\n  /**\r\n   * The URL that's loaded when the Helpcenter opens.\r\n   */\r\n  @Prop()\r\n  url!: string;\r\n\r\n  @State()\r\n  visibility: \"visible\" | \"hidden\" = \"hidden\";\r\n\r\n  @State()\r\n  isOpen: \"open\" | \"close\" = \"close\";\r\n\r\n  @State()\r\n  slideState: \"open\" | \"close\" = \"close\";\r\n\r\n  @State()\r\n  loadIframe = false;\r\n\r\n  @Watch(\"url\")\r\n  watchUrl(url: string) {\r\n    if (this.isOpen === \"open\" && this.iframeUrl !== url) {\r\n      this.iframeUrl = url;\r\n    }\r\n  }\r\n\r\n  @Watch(\"isOpen\")\r\n  watchIsOpen(isOpen: \"open\" | \"close\") {\r\n    const body = document.querySelector(\"body\");\r\n\r\n    if (isOpen === \"open\") {\r\n      body?.style.setProperty(\"overflow\", \"hidden\");\r\n\r\n      if (this.iframeUrl !== this.url) {\r\n        this.iframeUrl = this.url;\r\n      }\r\n    } else {\r\n      body?.style.removeProperty(\"overflow\");\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.key === \"Escape\" && this.isOpen === \"open\") {\r\n      this.closeClick();\r\n    }\r\n  }\r\n\r\n  private createTrap() {\r\n    if (!this.panelWrapperElement) {\r\n      return;\r\n    }\r\n\r\n    this.trap = createFocusTrap(this.panelWrapperElement, {\r\n      allowOutsideClick: true,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      setReturnFocus: this.openButtonElement ?? false,\r\n      initialFocus: this.closeButtonElement ?? false,\r\n    }).activate();\r\n  }\r\n\r\n  private openClick = () => {\r\n    this.visibility = \"visible\";\r\n    this.slideState = \"open\";\r\n    setTimeout(() => {\r\n      this.isOpen = \"open\";\r\n    });\r\n    if (!this.loadIframe) {\r\n      setTimeout(() => {\r\n        this.loadIframe = true;\r\n      }, maxCssTransitionMilliseconds);\r\n    }\r\n  };\r\n\r\n  private closeClick = () => {\r\n    this.isOpen = \"close\";\r\n    this.slideState = \"close\";\r\n    setTimeout(() => {\r\n      this.visibility = \"hidden\";\r\n    }, maxCssTransitionMilliseconds);\r\n  };\r\n\r\n  componentDidRender() {\r\n    if (this.isOpen === \"open\" && this.iframeLoaded && !this.trap) {\r\n      this.createTrap();\r\n    } else if (this.isOpen === \"close\" && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          type=\"button\"\r\n          onClick={this.openClick}\r\n          class={`open-button ${this.isOpen}`}\r\n          aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n          aria-haspopup=\"dialog\"\r\n          aria-controls=\"dso-panel-wrapper\"\r\n          ref={(element) => (this.openButtonElement = element)}\r\n        >\r\n          <dso-icon icon=\"help\"></dso-icon>\r\n          <span>{this.label}</span>\r\n        </button>\r\n        <div\r\n          id=\"dso-panel-wrapper\"\r\n          class={`wrapper ${this.visibility}`}\r\n          aria-label=\"helpcentrum\"\r\n          role=\"dialog\"\r\n          ref={(element) => (this.panelWrapperElement = element)}\r\n        >\r\n          <div class=\"dimscreen\" onClick={this.closeClick} />\r\n          <div class={`iframe-container ${this.slideState}`} aria-live=\"polite\">\r\n            {this.loadIframe ? (\r\n              <iframe\r\n                src={this.iframeUrl}\r\n                tabindex=\"0\"\r\n                onLoad={() => {\r\n                  this.createTrap();\r\n                  this.iframeLoaded = true;\r\n                }}\r\n              />\r\n            ) : (\r\n              <div />\r\n            )}\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            class={`close-button ${this.isOpen}`}\r\n            onClick={this.closeClick}\r\n            aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n            aria-controls=\"dso-panel-wrapper\"\r\n            ref={(element) => (this.closeButtonElement = element)}\r\n          >\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">sluiten</span>\r\n          </button>\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["helpcenterPanelCss","DsoHelpcenterPanelStyle0","maxCssTransitionMilliseconds","HelpcenterPanel","this","iframeLoaded","openClick","visibility","slideState","setTimeout","isOpen","loadIframe","closeClick","watchUrl","url","iframeUrl","watchIsOpen","body","document","querySelector","style","setProperty","removeProperty","keyDownListener","event","key","createTrap","panelWrapperElement","trap","createFocusTrap","allowOutsideClick","tabbableOptions","getShadowRoot","setReturnFocus","_a","openButtonElement","initialFocus","_b","closeButtonElement","activate","componentDidRender","deactivate","render","h","Fragment","type","onClick","class","ref","element","icon","label","id","role","src","tabindex","onLoad"],"sources":["src/components/helpcenter-panel/helpcenter-panel.scss?tag=dso-helpcenter-panel&encapsulation=shadow","src/components/helpcenter-panel/helpcenter-panel.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.wrapper {\r\n  block-size: 100%;\r\n  inset-inline-start: 0;\r\n  position: fixed;\r\n  inset-block-start: 0;\r\n  visibility: hidden;\r\n  inline-size: 100%;\r\n\r\n  &.visible {\r\n    visibility: visible;\r\n  }\r\n}\r\n\r\n.dimscreen {\r\n  background-color: colors.$zwart;\r\n  block-size: 100%;\r\n  opacity: 0.4;\r\n  inline-size: 100%;\r\n}\r\n\r\n.open-button {\r\n  @include button.primary($modifiers: false);\r\n\r\n  border: 0;\r\n  inset-block-end: units.$u2;\r\n  font-family: typography.$font-family-base;\r\n  position: fixed;\r\n  inset-inline-end: units.$u2;\r\n  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &.open {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.close-button {\r\n  @include button.secondary($modifiers: false);\r\n\r\n  border-inline-end: 0;\r\n  border-block-start: 0;\r\n  border-radius: 0 0 0 units.$u1;\r\n  block-size: units.$u5;\r\n  min-inline-size: units.$u5;\r\n  padding: 0;\r\n  position: fixed;\r\n  inset-inline-end: 0;\r\n  inline-size: units.$u5;\r\n  inset-block-start: 0;\r\n\r\n  dso-icon {\r\n    margin-inline-start: 0;\r\n    margin-inline-end: 0;\r\n    position: absolute;\r\n    inset-inline-start: 50%;\r\n    inset-block-start: 50%;\r\n    transform: translate(-50%, -50%);\r\n  }\r\n\r\n  &:hover,\r\n  &:active,\r\n  &:focus {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &.close {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.iframe-container {\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  border-inline-start: 1px solid colors.$grijs-20;\r\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\r\n  block-size: 100%;\r\n  position: absolute;\r\n  inset-block-start: 0;\r\n  transition: inset-inline-end 0.5s;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inset-inline-end: -320px;\r\n    inline-size: 320px;\r\n  }\r\n\r\n  @media screen and (min-width: (media-query-breakpoints.$screen-xs-min + 1)) and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    inset-inline-end: -480px;\r\n    inline-size: 480px;\r\n  }\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    inset-inline-end: -640px;\r\n    inline-size: 640px;\r\n  }\r\n\r\n  &.open {\r\n    inset-inline-end: 0;\r\n  }\r\n}\r\n\r\niframe {\r\n  border: 0;\r\n  block-size: 100%;\r\n  inline-size: 100%;\r\n}\r\n","import { h, Component, Fragment, Prop, State, Watch, Listen } from \"@stencil/core\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\nconst maxCssTransitionMilliseconds = 500;\r\n\r\n@Component({\r\n  tag: \"dso-helpcenter-panel\",\r\n  styleUrl: \"helpcenter-panel.scss\",\r\n  shadow: true,\r\n})\r\nexport class HelpcenterPanel {\r\n  private iframeUrl?: string;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private panelWrapperElement?: HTMLDivElement;\r\n\r\n  private openButtonElement?: HTMLButtonElement;\r\n\r\n  private closeButtonElement?: HTMLButtonElement;\r\n\r\n  private iframeLoaded = false;\r\n\r\n  /**\r\n   * The label on the help button that activates the Helpcenter.\r\n   */\r\n  @Prop()\r\n  label = \"Hulp nodig\";\r\n\r\n  /**\r\n   * The URL that's loaded when the Helpcenter opens.\r\n   */\r\n  @Prop()\r\n  url!: string;\r\n\r\n  @State()\r\n  visibility: \"visible\" | \"hidden\" = \"hidden\";\r\n\r\n  @State()\r\n  isOpen: \"open\" | \"close\" = \"close\";\r\n\r\n  @State()\r\n  slideState: \"open\" | \"close\" = \"close\";\r\n\r\n  @State()\r\n  loadIframe = false;\r\n\r\n  @Watch(\"url\")\r\n  watchUrl(url: string) {\r\n    if (this.isOpen === \"open\" && this.iframeUrl !== url) {\r\n      this.iframeUrl = url;\r\n    }\r\n  }\r\n\r\n  @Watch(\"isOpen\")\r\n  watchIsOpen(isOpen: \"open\" | \"close\") {\r\n    const body = document.querySelector(\"body\");\r\n\r\n    if (isOpen === \"open\") {\r\n      body?.style.setProperty(\"overflow\", \"hidden\");\r\n\r\n      if (this.iframeUrl !== this.url) {\r\n        this.iframeUrl = this.url;\r\n      }\r\n    } else {\r\n      body?.style.removeProperty(\"overflow\");\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.key === \"Escape\" && this.isOpen === \"open\") {\r\n      this.closeClick();\r\n    }\r\n  }\r\n\r\n  private createTrap() {\r\n    if (!this.panelWrapperElement) {\r\n      return;\r\n    }\r\n\r\n    this.trap = createFocusTrap(this.panelWrapperElement, {\r\n      allowOutsideClick: true,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      setReturnFocus: this.openButtonElement ?? false,\r\n      initialFocus: this.closeButtonElement ?? false,\r\n    }).activate();\r\n  }\r\n\r\n  private openClick = () => {\r\n    this.visibility = \"visible\";\r\n    this.slideState = \"open\";\r\n    setTimeout(() => {\r\n      this.isOpen = \"open\";\r\n    });\r\n    if (!this.loadIframe) {\r\n      setTimeout(() => {\r\n        this.loadIframe = true;\r\n      }, maxCssTransitionMilliseconds);\r\n    }\r\n  };\r\n\r\n  private closeClick = () => {\r\n    this.isOpen = \"close\";\r\n    this.slideState = \"close\";\r\n    setTimeout(() => {\r\n      this.visibility = \"hidden\";\r\n    }, maxCssTransitionMilliseconds);\r\n  };\r\n\r\n  componentDidRender() {\r\n    if (this.isOpen === \"open\" && this.iframeLoaded && !this.trap) {\r\n      this.createTrap();\r\n    } else if (this.isOpen === \"close\" && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          type=\"button\"\r\n          onClick={this.openClick}\r\n          class={`open-button ${this.isOpen}`}\r\n          aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n          aria-haspopup=\"dialog\"\r\n          aria-controls=\"dso-panel-wrapper\"\r\n          ref={(element) => (this.openButtonElement = element)}\r\n        >\r\n          <dso-icon icon=\"help\"></dso-icon>\r\n          <span>{this.label}</span>\r\n        </button>\r\n        <div\r\n          id=\"dso-panel-wrapper\"\r\n          class={`wrapper ${this.visibility}`}\r\n          aria-label=\"helpcentrum\"\r\n          role=\"dialog\"\r\n          ref={(element) => (this.panelWrapperElement = element)}\r\n        >\r\n          <div class=\"dimscreen\" onClick={this.closeClick} />\r\n          <div class={`iframe-container ${this.slideState}`} aria-live=\"polite\">\r\n            {this.loadIframe ? (\r\n              <iframe\r\n                src={this.iframeUrl}\r\n                tabindex=\"0\"\r\n                onLoad={() => {\r\n                  this.createTrap();\r\n                  this.iframeLoaded = true;\r\n                }}\r\n              />\r\n            ) : (\r\n              <div />\r\n            )}\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            class={`close-button ${this.isOpen}`}\r\n            onClick={this.closeClick}\r\n            aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n            aria-controls=\"dso-panel-wrapper\"\r\n            ref={(element) => (this.closeButtonElement = element)}\r\n          >\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">sluiten</span>\r\n          </button>\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/p-2dc8e61f.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as e,h as r,F as i,a}from"./p-b623c74b.js";import{A as t}from"./p-ae8b8810.js";import{w as n,A as s,a as d}from"./p-00caab3b.js";const l='a{background-color:transparent;color:var(--link-color);text-decoration:underline}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:1.5em;background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:url("./dso-icons.svg#img-download")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:url("./dso-icons.svg#img-download-scampi")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:1.5em;background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:url("./dso-icons.svg#img-external-link")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:url("./dso-icons.svg#img-external-link-scampi")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:1.5em;background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-image:url("./dso-icons.svg#img-call-grasgroen")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:url("./dso-icons.svg#img-call-scampi")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:1.5em;background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-image:url("./dso-icons.svg#img-email-grasgroen")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:url("./dso-icons.svg#img-email-scampi")}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}:host([wijzigactie=voegtoe]) a:is(.download,.download:hover,.download:focus-visible){background-image:url("./dso-icons.svg#img-download-zwart")}:host([wijzigactie=voegtoe]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url("./dso-icons.svg#img-external-link-zwart")}:host([wijzigactie=voegtoe]) a:is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:url("./dso-icons.svg#img-call-zwart")}:host([wijzigactie=voegtoe]) a:is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:url("./dso-icons.svg#img-email-zwart")}:host([wijzigactie=voegtoe]){box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}:host([wijzigactie=verwijder]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host([wijzigactie=verwijder]) a:is(.download,.download:hover,.download:focus-visible){background-image:url("./dso-icons.svg#img-download-zwart")}:host([wijzigactie=verwijder]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url("./dso-icons.svg#img-external-link-zwart")}:host([wijzigactie=verwijder]) a:is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:url("./dso-icons.svg#img-call-zwart")}:host([wijzigactie=verwijder]) a:is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:url("./dso-icons.svg#img-email-zwart")}:host([wijzigactie=verwijder]){text-decoration:line-through}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}';const c=l;const g=class{constructor(r){o(this,r);this.dsoActiveChange=e(this,"dsoActiveChange",7);this.watcher=n(this.host);this.wijzigactie=undefined;this.active=undefined;this.gewijzigdeLocatie=undefined;this.naam=undefined;this.regelKwalificatie=undefined;this.locatieNoemers=undefined;this.regelKwalificatieVoorzetsel=undefined}connectedCallback(){this.watcher.watch()}disconnectedCallback(){this.watcher.unwatch()}render(){const o=this.watcher.hasSymbool();return r(t,{key:"f58785b25b3c7092ef2fae4201949bd9b12b6fb5",symbol:o?r(s,null):undefined,active:this.active,dsoActiveChange:this.dsoActiveChange,title:r("dso-renvooi",{value:this.naam}),data:r(i,null,r("span",{class:"content"},this.regelKwalificatie&&r(i,null,r("dso-renvooi",{value:this.regelKwalificatie})," "),this.regelKwalificatieVoorzetsel&&`${this.regelKwalificatieVoorzetsel}: `,r("dso-renvooi",{value:this.locatieNoemers})),this.gewijzigdeLocatie&&r(d,null))})}get host(){return a(this)}};g.style=c;export{g as dso_annotation_activiteit};
+//# sourceMappingURL=p-2dc8e61f.entry.js.map

package/dist/dso-toolkit/{p-55f6a27c.entry.js.map → p-2dc8e61f.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["annotationCss","DsoAnnotationActiviteitStyle0","AnnotationActiviteit","this","watcher","host","connectedCallback","watch","disconnectedCallback","unwatch","render","hasSymbool","h","AnnotationBody","key","symbol","AnnotationSymbolSlot","undefined","active","dsoActiveChange","title","value","naam","data","Fragment","class","regelKwalificatie","regelKwalificatieVoorzetsel","locatieNoemers","gewijzigdeLocatie","AnnotationGewijzigdeLocatie"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-activiteit&encapsulation=shadow","src/components/annotation/annotation-activiteit/annotation-activiteit.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor/anchor\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Prop, Event, h, Fragment, EventEmitter, Element } from \"@stencil/core\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n  tag: \"dso-annotation-activiteit\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationActiviteit implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de annotatie actief is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  gewijzigdeLocatie?: boolean;\r\n\r\n  /**\r\n   * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n  /**\r\n   * De naam van de activiteit.\r\n   */\r\n  @Prop()\r\n  naam?: RenvooiValue | string;\r\n\r\n  /**\r\n   * De activiteit regel kwalificatie.\r\n   */\r\n  @Prop()\r\n  regelKwalificatie?: RenvooiValue | string;\r\n\r\n  /**\r\n   * De noemer van de locatie.\r\n   */\r\n  @Prop()\r\n  locatieNoemers?: Array<RenvooiValue | string>;\r\n\r\n  /**\r\n   * Voorzetsel van de regelKwalificatie. Exclusief dubbele punt.\r\n   */\r\n  @Prop()\r\n  regelKwalificatieVoorzetsel?: string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationActiviteitElement;\r\n\r\n  private watcher = watcher(this.host);\r\n\r\n  connectedCallback(): void {\r\n    this.watcher.watch();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.watcher.unwatch();\r\n  }\r\n\r\n  render() {\r\n    const hasSymbool = this.watcher.hasSymbool();\r\n\r\n    return (\r\n      <AnnotationBody\r\n        symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n        active={this.active}\r\n        dsoActiveChange={this.dsoActiveChange}\r\n        title={<dso-renvooi value={this.naam} />}\r\n        data={\r\n          <>\r\n            <span class=\"content\">\r\n              {this.regelKwalificatie && (\r\n                <>\r\n                  <dso-renvooi value={this.regelKwalificatie} />{\" \"}\r\n                </>\r\n              )}\r\n              {this.regelKwalificatieVoorzetsel && `${this.regelKwalificatieVoorzetsel}: `}\r\n              <dso-renvooi value={this.locatieNoemers} />\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"mappings":"iJAAA,MAAMA,EAAgB,6kIACtB,MAAAC,EAAeD,E,MCeFE,EAAoB,M,0EAoDvBC,KAAAC,QAAUA,EAAQD,KAAKE,M,gNAE/B,iBAAAC,GACEH,KAAKC,QAAQG,O,CAGf,oBAAAC,GACEL,KAAKC,QAAQK,S,CAGf,MAAAC,GACE,MAAMC,EAAaR,KAAKC,QAAQO,aAEhC,OACEC,EAACC,EAAc,CAAAC,IAAA,2CACbC,OAAQJ,EAAaC,EAACI,EAAoB,MAAMC,UAChDC,OAAQf,KAAKe,OACbC,gBAAiBhB,KAAKgB,gBACtBC,MAAOR,EAAA,eAAaS,MAAOlB,KAAKmB,OAChCC,KACEX,EAAAY,EAAA,KACEZ,EAAA,QAAMa,MAAM,WACTtB,KAAKuB,mBACJd,EAAAY,EAAA,KACEZ,EAAA,eAAaS,MAAOlB,KAAKuB,oBAAsB,KAGlDvB,KAAKwB,6BAA+B,GAAGxB,KAAKwB,gCAC7Cf,EAAA,eAAaS,MAAOlB,KAAKyB,kBAE1BzB,KAAK0B,mBAAqBjB,EAACkB,EAA2B,Q","ignoreList":[]}
+{"version":3,"names":["annotationCss","DsoAnnotationActiviteitStyle0","AnnotationActiviteit","this","watcher","host","connectedCallback","watch","disconnectedCallback","unwatch","render","hasSymbool","h","AnnotationBody","key","symbol","AnnotationSymbolSlot","undefined","active","dsoActiveChange","title","value","naam","data","Fragment","class","regelKwalificatie","regelKwalificatieVoorzetsel","locatieNoemers","gewijzigdeLocatie","AnnotationGewijzigdeLocatie"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-activiteit&encapsulation=shadow","src/components/annotation/annotation-activiteit/annotation-activiteit.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor/anchor\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Prop, Event, h, Fragment, EventEmitter, Element } from \"@stencil/core\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n  tag: \"dso-annotation-activiteit\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationActiviteit implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de annotatie actief is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  gewijzigdeLocatie?: boolean;\r\n\r\n  /**\r\n   * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n  /**\r\n   * De naam van de activiteit.\r\n   */\r\n  @Prop()\r\n  naam?: RenvooiValue | string;\r\n\r\n  /**\r\n   * De activiteit regel kwalificatie.\r\n   */\r\n  @Prop()\r\n  regelKwalificatie?: RenvooiValue | string;\r\n\r\n  /**\r\n   * De noemer van de locatie.\r\n   */\r\n  @Prop()\r\n  locatieNoemers?: Array<RenvooiValue | string>;\r\n\r\n  /**\r\n   * Voorzetsel van de regelKwalificatie. Exclusief dubbele punt.\r\n   */\r\n  @Prop()\r\n  regelKwalificatieVoorzetsel?: string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationActiviteitElement;\r\n\r\n  private watcher = watcher(this.host);\r\n\r\n  connectedCallback(): void {\r\n    this.watcher.watch();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.watcher.unwatch();\r\n  }\r\n\r\n  render() {\r\n    const hasSymbool = this.watcher.hasSymbool();\r\n\r\n    return (\r\n      <AnnotationBody\r\n        symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n        active={this.active}\r\n        dsoActiveChange={this.dsoActiveChange}\r\n        title={<dso-renvooi value={this.naam} />}\r\n        data={\r\n          <>\r\n            <span class=\"content\">\r\n              {this.regelKwalificatie && (\r\n                <>\r\n                  <dso-renvooi value={this.regelKwalificatie} />{\" \"}\r\n                </>\r\n              )}\r\n              {this.regelKwalificatieVoorzetsel && `${this.regelKwalificatieVoorzetsel}: `}\r\n              <dso-renvooi value={this.locatieNoemers} />\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"mappings":"iJAAA,MAAMA,EAAgB,45IACtB,MAAAC,EAAeD,E,MCeFE,EAAoB,M,0EAoDvBC,KAAAC,QAAUA,EAAQD,KAAKE,M,gNAE/B,iBAAAC,GACEH,KAAKC,QAAQG,O,CAGf,oBAAAC,GACEL,KAAKC,QAAQK,S,CAGf,MAAAC,GACE,MAAMC,EAAaR,KAAKC,QAAQO,aAEhC,OACEC,EAACC,EAAc,CAAAC,IAAA,2CACbC,OAAQJ,EAAaC,EAACI,EAAoB,MAAMC,UAChDC,OAAQf,KAAKe,OACbC,gBAAiBhB,KAAKgB,gBACtBC,MAAOR,EAAA,eAAaS,MAAOlB,KAAKmB,OAChCC,KACEX,EAAAY,EAAA,KACEZ,EAAA,QAAMa,MAAM,WACTtB,KAAKuB,mBACJd,EAAAY,EAAA,KACEZ,EAAA,eAAaS,MAAOlB,KAAKuB,oBAAsB,KAGlDvB,KAAKwB,6BAA+B,GAAGxB,KAAKwB,gCAC7Cf,EAAA,eAAaS,MAAOlB,KAAKyB,kBAE1BzB,KAAK0B,mBAAqBjB,EAACkB,EAA2B,Q","ignoreList":[]}

package/dist/dso-toolkit/p-2e413e3d.entry.js

@@ -0,0 +1,2 @@
+import{r as s,c as t,h as e,H as i,a}from"./p-b623c74b.js";const o=":host{display:block}";const r=o;const d=[{width:624,alias:"large"},{width:375,alias:"medium"},{width:0,alias:"small"}];const l=class{constructor(e){s(this,e);this.dsoSizeChange=t(this,"dsoSizeChange",7);this.observer=new ResizeObserver((([s])=>{var t,e;if(!s){throw new Error("No entry found")}const i=(e=(t=d.find((t=>s.contentRect.width>=t.width)))===null||t===void 0?void 0:t.alias)!==null&&e!==void 0?e:d[0].alias;this.sizeAlias=i;this.dsoSizeChange.emit(i)}));this.sizeAlias=d[0].alias;this.sizeWidth=0}async getSize(){return this.sizeAlias}componentWillLoad(){this.observer.observe(this.host)}disconnectedCallback(){this.observer.unobserve(this.host)}render(){return e(i,{key:"da7d53fadbf366d94af9b81a7fbe82d5b841fae6",small:this.sizeAlias==="small",medium:this.sizeAlias==="medium",large:this.sizeAlias==="large"},e("slot",{key:"7f5760e962121bb49d6df0bbec7480f8cdca2e0b"}))}get host(){return a(this)}};l.style=r;export{l as dso_responsive_element};
+//# sourceMappingURL=p-2e413e3d.entry.js.map

package/dist/dso-toolkit/{p-0b390a43.entry.js → p-33629822.entry.js}

@@ -1,2 +1,2 @@
-import{h as e,r as t,c as s,H as i,a}from"./p-d638c2b0.js";import{c as d}from"./p-97f788d4.js";var o;(function(e){e[e["Sunday"]=0]="Sunday";e[e["Monday"]=1]="Monday";e[e["Tuesday"]=2]="Tuesday";e[e["Wednesday"]=3]="Wednesday";e[e["Thursday"]=4]="Thursday";e[e["Friday"]=5]="Friday";e[e["Saturday"]=6]="Saturday"})(o||(o={}));function n(e,t,s){const i=parseInt(s,10);const a=parseInt(t,10);const d=parseInt(e,10);const o=Number.isInteger(d)&&Number.isInteger(a)&&Number.isInteger(i)&&a>0&&a<=12&&i>0&&i<=31&&d>0;if(o){return new Date(d,a-1,i)}}function c(e){if(!e){return}const t=e.split("-");if(t.length===3&&typeof t[0]==="string"&&typeof t[1]==="string"&&typeof t[2]==="string"&&t[2].length===4){return n(t[2],t[1],t[0])}}function r(e){if(!e){return""}const t=e.getDate().toString(10).padStart(2,"0");const s=(e.getMonth()+1).toString(10).padStart(2,"0");const i=e.getFullYear().toString(10).padStart(2,"0");return`${t}-${s}-${i}`}function l(e,t){if(!e||!t){return false}return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function p(e,t){const s=new Date(e);s.setDate(s.getDate()+t);return s}function h(e,t=o.Monday){const s=new Date(e);const i=s.getDay();const a=(i<t?7:0)+i-t;s.setDate(s.getDate()-a);return s}function f(e,t=o.Monday){const s=new Date(e);const i=s.getDay();const a=(i<t?-7:0)+6-(i-t);s.setDate(s.getDate()+a);return s}function b(e){return new Date(e.getFullYear(),e.getMonth(),1)}function u(e){return new Date(e.getFullYear(),e.getMonth()+1,0)}function y(e,t){const s=new Date(e);s.setMonth(t);return s}function g(e,t){const s=new Date(e);s.setFullYear(t);return s}function k(e,t,s){return _(e,t,s)===e}function _(e,t,s){const i=e.getTime();if(t&&t instanceof Date&&i<t.getTime()){return t}if(s&&s instanceof Date&&i>s.getTime()){return s}return e}function m(e,t){const s=[];let i=e;while(!l(i,t)){s.push(i);i=p(i,1)}s.push(i);return s}function x(e,t=o.Monday){const s=h(b(e),t);const i=f(u(e),t);return m(s,i)}const v=({focusedDay:t,today:s,day:i,onDaySelect:a,onKeyboardNavigation:d,focusedDayRef:o,inRange:n})=>{const c=l(i,s);const p=l(i,t);const h=i.getMonth()!==t.getMonth();const f=!n;function b(e){a(e,i)}return e("button",{class:{"dso-date__day":true,"is-today":c},tabIndex:p?0:-1,onClick:b,onKeyDown:d,disabled:f||h,type:"button",ref:e=>{if(p&&e&&o){o(e)}}},e("span",{"aria-hidden":"true"},i.getDate()),e("span",{class:"dso-date__vhidden"},r(i)))};function w(e,t){const s=[];for(let i=0;i<e.length;i+=t){s.push(e.slice(i,i+t))}return s}function z(e,t,s){return e.map(((i,a)=>{const d=(a+t)%e.length;const o=e[d];if(!o){throw new Error("No item found")}return s(o)}))}const D=({selectedDate:t,focusedDate:s,labelledById:i,localization:a,firstDayOfWeek:d,min:o,max:n,onDateSelect:c,onKeyboardNavigation:r,focusedDayRef:p,onMouseDown:h,onFocusIn:f})=>{const b=new Date;const u=x(s,d);return e("table",{class:"dso-date__table",role:"grid","aria-labelledby":i,onFocusin:f,onMouseDown:h},e("thead",null,e("tr",null,z(a.dayNames,d,(t=>e("th",{class:"dso-date__table-header",scope:"col"},e("span",{"aria-hidden":"true"},t.substr(0,2)),e("span",{class:"dso-date__vhidden"},t)))))),e("tbody",null,w(u,7).map((i=>e("tr",{class:"dso-date__row"},i.map((i=>e("td",{class:"dso-date__cell",role:"gridcell","aria-selected":l(i,t)?"true":undefined,"aria-current":l(i,b)?"date":undefined},e(v,{day:i,today:b,focusedDay:s,inRange:k(i,o,n),onDaySelect:c,onKeyboardNavigation:r,focusedDayRef:p})))))))))};const M={buttonLabel:"Kies datum",placeholder:"dd-mm-jjjj",selectedDateMessage:"Geselecteerde datum is",prevMonthLabel:"Vorige maand",nextMonthLabel:"Volgende maand",monthSelectLabel:"Maand",yearSelectLabel:"Jaar",closeLabel:"Sluiten",keyboardInstruction:"Gebruik de pijltjestoetsen om een dag te kiezen",calendarHeading:"Kies een datum",dayNames:["Zondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag"],monthNames:["Januari","Februari","Maart","April","Mei","Juni","Juli","Augustus","September","Oktober","November","December"],monthNamesShort:["Jan","Feb","Mrt","Apr","Mei","Jun","Jul","Aug","Sep","Okt","Nov","Dec"]};function N(e,t,s,i){if(s&&i){const{minYear:a,minMonth:d}={minYear:s.getFullYear(),minMonth:s.getMonth()};const{maxYear:o,maxMonth:n}={maxYear:i.getFullYear(),maxMonth:i.getMonth()};return e.monthNames.filter(((e,s)=>{if(a===t&&o===t){return s>=d&&s>=n}if(a===t){return s>=d}if(o===t){return s<=n}return true}))}if(s){const{minYear:i,minMonth:a}={minYear:s.getFullYear(),minMonth:s.getMonth()};return e.monthNames.filter(((e,s)=>i===t&&s>=a))}if(i){const{maxYear:s,maxMonth:a}={maxYear:i.getFullYear(),maxMonth:i.getMonth()};return e.monthNames.filter(((e,i)=>s===t&&i<=a))}return e.monthNames}function S(e,t){const s=[];for(let i=e;i<=t;i++){s.push(i)}return s}const T='.sc-dso-date-picker-legacy-h{display:block}[invalid].sc-dso-date-picker-legacy-h:not([invalid=false]) .dso-date__input.sc-dso-date-picker-legacy{border-color:#ce3f51}.dso-date.sc-dso-date-picker-legacy *.sc-dso-date-picker-legacy,.dso-date.sc-dso-date-picker-legacy *.sc-dso-date-picker-legacy::before,.dso-date.sc-dso-date-picker-legacy *.sc-dso-date-picker-legacy::after{box-sizing:border-box}.dso-date.sc-dso-date-picker-legacy{box-sizing:border-box;color:#191919;display:block;font-family:"Asap", sans-serif;margin:0;position:relative;text-align:start;inline-size:100%}.dso-date.sc-dso-date-picker-legacy:not(.dso-visible) .dso-date__dialog.sc-dso-date-picker-legacy{display:none}.dso-date__input.sc-dso-date-picker-legacy{display:block;inline-size:100%;block-size:40px;padding-block:6px;padding-inline:14px;font-size:1rem;line-height:1.5;color:#191919;background-color:#fff;background-image:none;border:1px solid #275937;border-radius:4px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s}.dso-date__input.sc-dso-date-picker-legacy::-moz-placeholder{color:#666;opacity:1}.dso-date__input.sc-dso-date-picker-legacy:-ms-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker-legacy::-webkit-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker-legacy::-ms-expand{background-color:transparent;border:0}.dso-date__input.sc-dso-date-picker-legacy:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled].sc-dso-date-picker-legacy,.dso-date__input[readonly].sc-dso-date-picker-legacy,fieldset[disabled].sc-dso-date-picker-legacy .dso-date__input.sc-dso-date-picker-legacy{background-color:#fff;opacity:1}.dso-date__input[disabled].sc-dso-date-picker-legacy,fieldset[disabled].sc-dso-date-picker-legacy .dso-date__input.sc-dso-date-picker-legacy{cursor:default}.dso-date__input[disabled].sc-dso-date-picker-legacy{border-color:#e5e5e5;color:#999}.dso-date__input[readonly].sc-dso-date-picker-legacy{border-width:1px}.dso-date__input[type=text].sc-dso-date-picker-legacy{line-height:40px}.dso-date__input[size].sc-dso-date-picker-legacy{inline-size:auto}.dso-date__toggle.sc-dso-date-picker-legacy{-moz-appearance:none;-webkit-appearance:none;-webkit-user-select:none;align-items:center;appearance:none;background:transparent;border:0;border-radius:0;border-end-end-radius:4px;border-start-end-radius:4px;color:#39870c;cursor:pointer;display:flex;block-size:38px;justify-content:center;padding:0;position:absolute;inset-inline-end:0;transform:translateY(-50%);inset-block-start:50%;user-select:none;inline-size:38px;z-index:101}.dso-date__toggle.sc-dso-date-picker-legacy:disabled{color:#afcf9d;cursor:default}.dso-date__dialog.sc-dso-date-picker-legacy{border-width:1px;display:flex;inset-inline-end:0;min-inline-size:320px;opacity:0;position:absolute;inset-block-start:100%;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;visibility:hidden;will-change:transform, opacity, visibility;z-index:210}@media (max-width: 35.9375em){.dso-date__dialog.sc-dso-date-picker-legacy{background:rgba(25, 25, 25, 0.5);inset-block-end:0;position:fixed;inset-inline-start:0;inset-inline-end:0;inset-block-start:0;transform:translateZ(0);transform-origin:bottom center}}.dso-date__dialog.is-left.sc-dso-date-picker-legacy{inset-inline-start:-11px;inset-inline-end:auto;inline-size:auto}.dso-date__dialog.is-active.sc-dso-date-picker-legacy{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.dso-date__dialog-content.sc-dso-date-picker-legacy{background:#fff;border:1px solid rgba(0, 0, 0, 0.1);border-radius:4px;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);margin-inline-start:auto;margin-inline-end:-1px;margin-block-start:8px;max-inline-size:310px;min-inline-size:290px;padding:16px;position:relative;transform:none;inline-size:100%;z-index:210}@media (max-width: 35.9375em){.dso-date__dialog-content.sc-dso-date-picker-legacy{border:0;border-radius:0;border-start-start-radius:4px;border-start-end-radius:4px;inset-block-end:0;inset-inline-start:0;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding-block:0 20px;padding-inline:8%;position:absolute;transform:translateZ(0) translateY(100%);transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;visibility:hidden;will-change:transform, opacity, visibility}.is-active.sc-dso-date-picker-legacy .dso-date__dialog-content.sc-dso-date-picker-legacy{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}}.dso-date__table.sc-dso-date-picker-legacy{border-collapse:collapse;border-spacing:0;color:#191919;font-size:1rem;font-weight:400;line-height:1.25;min-inline-size:280px;table-layout:fixed;text-align:center;inline-size:100%}.dso-date__table-header.sc-dso-date-picker-legacy{font-size:0.875em;font-weight:600;block-size:36px;line-height:36px;text-align:center;text-decoration:none;text-transform:uppercase}.dso-date__cell.sc-dso-date-picker-legacy{block-size:40px;padding:1px;text-align:center;inline-size:40px}.dso-date__day.sc-dso-date-picker-legacy{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;box-shadow:0 0 0 1px transparent;color:#191919;cursor:pointer;display:inline-block;font-family:"Asap", sans-serif;font-variant-numeric:tabular-nums;font-weight:400;block-size:38px;line-height:0;padding:0;position:relative;text-align:center;vertical-align:middle;inline-size:38px;z-index:100}.dso-date__day.is-today.sc-dso-date-picker-legacy{background:transparent;block-size:36px;box-shadow:0 0 0 1px #39870c;inline-size:36px}.dso-date__day.sc-dso-date-picker-legacy:hover,.dso-date__day.sc-dso-date-picker-legacy:active{background:#39870c;color:#fff}.dso-date__day.sc-dso-date-picker-legacy:focus{background:transparent;box-shadow:0 0 0 2px #275937;color:#191919;block-size:34px;outline:0;inline-size:34px}[aria-selected=true].sc-dso-date-picker-legacy .dso-date__day.sc-dso-date-picker-legacy{background:#39870c;color:#fff}[aria-selected=true].sc-dso-date-picker-legacy .dso-date__day.sc-dso-date-picker-legacy:focus{background:transparent}[aria-selected=true].sc-dso-date-picker-legacy .dso-date__day.sc-dso-date-picker-legacy:focus span[aria-hidden=true].sc-dso-date-picker-legacy{background:#39870c;border:1px solid #fff;line-height:32px}.dso-date__day.sc-dso-date-picker-legacy:disabled{background:#fff;color:#ccc;cursor:default}.dso-date__day.sc-dso-date-picker-legacy span[aria-hidden=true].sc-dso-date-picker-legacy{border-radius:50%;display:inline-block;block-size:34px;line-height:34px;inline-size:34px}.dso-date__header.sc-dso-date-picker-legacy{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.dso-date__header.sc-dso-date-picker-legacy span.sc-dso-date-picker-legacy{font-size:0.875rem}.dso-date__nav.sc-dso-date-picker-legacy{white-space:nowrap}.dso-date__prev.sc-dso-date-picker-legacy,.dso-date__next.sc-dso-date-picker-legacy{-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:transparent;border:1px solid #39870c;border-radius:4px;box-sizing:border-box;color:#39870c;cursor:pointer;display:inline-flex;font-size:1em;block-size:32px;justify-content:center;margin-inline-start:8px;padding:0;inline-size:32px}@media (max-width: 35.9375em){.dso-date__prev.sc-dso-date-picker-legacy,.dso-date__next.sc-dso-date-picker-legacy{block-size:40px;inline-size:40px}}.dso-date__prev.sc-dso-date-picker-legacy:hover,.dso-date__prev.sc-dso-date-picker-legacy:active,.dso-date__next.sc-dso-date-picker-legacy:hover,.dso-date__next.sc-dso-date-picker-legacy:active{background-color:#39870c;color:#fff}.dso-date__prev.sc-dso-date-picker-legacy:focus,.dso-date__next.sc-dso-date-picker-legacy:focus{background:transparent;color:#39870c}.dso-date__prev.sc-dso-date-picker-legacy:disabled,.dso-date__prev.sc-dso-date-picker-legacy:disabled:hover,.dso-date__next.sc-dso-date-picker-legacy:disabled,.dso-date__next.sc-dso-date-picker-legacy:disabled:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d;opacity:1}.dso-date__prev.sc-dso-date-picker-legacy svg.sc-dso-date-picker-legacy,.dso-date__next.sc-dso-date-picker-legacy svg.sc-dso-date-picker-legacy{margin-block:0;margin-inline:auto}.dso-date__select.sc-dso-date-picker-legacy{display:inline-flex;block-size:28px;line-height:28px;position:relative}.dso-date__select.sc-dso-date-picker-legacy span.sc-dso-date-picker-legacy{margin-inline-end:4px}.dso-date__select.sc-dso-date-picker-legacy select.sc-dso-date-picker-legacy{color:#275937;cursor:pointer;font-size:1rem;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:101}.dso-date__select.sc-dso-date-picker-legacy select.sc-dso-date-picker-legacy:focus+.dso-date__select-label.sc-dso-date-picker-legacy{box-shadow:0 0 0 2px #275937}.dso-date__select.sc-dso-date-picker-legacy select.sc-dso-date-picker-legacy:disabled{color:#afcf9d}.dso-date__select-label.sc-dso-date-picker-legacy{align-items:center;border-radius:4px;color:#39870c;display:flex;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:100}.dso-date__select-label.sc-dso-date-picker-legacy span.sc-dso-date-picker-legacy{font-size:1.25rem;font-weight:600;line-height:1.25}.dso-date__select-label.sc-dso-date-picker-legacy svg.sc-dso-date-picker-legacy{inline-size:16px;block-size:16px}.dso-date__mobile.sc-dso-date-picker-legacy{align-items:center;border-block-end:1px solid rgba(0, 0, 0, 0.12);display:flex;font-size:1em;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding-block:12px;padding-inline:20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width: 36em){.dso-date__mobile.sc-dso-date-picker-legacy{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-16px;inset-block-start:-16px;inline-size:auto}}.dso-date__mobile-heading.sc-dso-date-picker-legacy{display:inline-block;font-weight:600;max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.dso-date__mobile-heading.sc-dso-date-picker-legacy{display:none}}.dso-date__close.sc-dso-date-picker-legacy{-webkit-appearance:none;align-items:center;appearance:none;background-color:#fff;border:0;border-radius:50%;color:#39870c;cursor:pointer;display:flex;font-size:1em;block-size:32px;justify-content:center;margin-inline-end:-4px;padding:0;inline-size:32px}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker-legacy{margin-inline-end:0;opacity:0}}.dso-date__close.sc-dso-date-picker-legacy:focus{box-shadow:0 0 0 2px #275937;outline:none}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker-legacy:focus{opacity:1}}.dso-date__vhidden.sc-dso-date-picker-legacy{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}';const Y=T;const E={TAB:9,ESC:27,SPACE:32,PAGE_UP:33,PAGE_DOWN:34,END:35,HOME:36,LEFT:37,UP:38,RIGHT:39,DOWN:40};const j=/[^0-9-]+/g;const F=300;function K(e,t){const s=e.value;const i=e.selectionStart;if(!i){return s}const a=s.slice(0,i);const d=s.slice(i,s.length);const o=a.replace(t,"");const n=d.replace(t,"");const c=o+n;const r=o.length;e.value=c;e.selectionStart=e.selectionEnd=r;return c}const C=class{constructor(e){t(this,e);this.dsoDateChange=s(this,"dsoDateChange",7);this.dsoBlur=s(this,"dsoBlur",7);this.dsoKeyUp=s(this,"dsoKeyUp",7);this.dsoKeyDown=s(this,"dsoKeyDown",7);this.dsoFocus=s(this,"dsoFocus",7);this.monthSelectId=d("DsoDateMonth");this.yearSelectId=d("DsoDateYear");this.dialogLabelId=d("DsoDateLabel");this.localization=M;this.firstDayOfWeek=o.Monday;this.enableActiveFocus=()=>{this.activeFocus=true};this.disableActiveFocus=()=>{this.activeFocus=false};this.toggleOpen=e=>{e.preventDefault();if(this.open){this.hide(false)}else{this.show()}};this.handleEscKey=e=>{if(e.keyCode===E.ESC){this.hide()}};this.handleBlur=e=>{e.stopPropagation();this.dsoBlur.emit({component:"dso-date-picker-legacy"})};this.handleKeyUp=e=>{e.stopPropagation();this.dsoKeyUp.emit({component:"dso-date-picker-legacy",originalEvent:e})};this.handleKeyDown=e=>{e.stopPropagation();this.dsoKeyDown.emit({component:"dso-date-picker-legacy",originalEvent:e})};this.handleFocus=e=>{e.stopPropagation();this.dsoFocus.emit({component:"dso-date-picker-legacy"})};this.handleTouchStart=e=>{const t=e.changedTouches[0];if(!t){throw new Error("No touch found")}this.initialTouchX=t.pageX;this.initialTouchY=t.pageY};this.handleTouchMove=e=>{e.preventDefault()};this.handleTouchEnd=e=>{var t,s;const i=e.changedTouches[0];if(!i){throw new Error("No touch found")}const a=i.pageX-((t=this.initialTouchX)!==null&&t!==void 0?t:0);const d=i.pageY-((s=this.initialTouchY)!==null&&s!==void 0?s:0);const o=70;const n=Math.abs(a)>=o&&Math.abs(d)<=o;const c=Math.abs(d)>=o&&Math.abs(a)<=o&&d>0;if(n){this.addMonths(a<0?1:-1)}else if(c){this.hide(false);e.preventDefault()}this.initialTouchY=undefined;this.initialTouchX=undefined};this.handleNextMonthClick=e=>{e.preventDefault();this.addMonths(1)};this.handlePreviousMonthClick=e=>{e.preventDefault();this.addMonths(-1)};this.handleFirstFocusableKeydown=e=>{var t;if(e.keyCode===E.TAB&&e.shiftKey){(t=this.focusedDayNode)===null||t===void 0?void 0:t.focus();e.preventDefault()}};this.handleKeyboardNavigation=e=>{var t;if(e.keyCode===E.TAB&&!e.shiftKey){e.preventDefault();(t=this.firstFocusableElement)===null||t===void 0?void 0:t.focus();return}let s=true;switch(e.keyCode){case E.RIGHT:this.addDays(1);break;case E.LEFT:this.addDays(-1);break;case E.DOWN:this.addDays(7);break;case E.UP:this.addDays(-7);break;case E.PAGE_UP:if(e.shiftKey){this.addYears(-1)}else{this.addMonths(-1)}break;case E.PAGE_DOWN:if(e.shiftKey){this.addYears(1)}else{this.addMonths(1)}break;case E.HOME:this.startOfWeek();break;case E.END:this.endOfWeek();break;default:s=false}if(s){e.preventDefault();this.enableActiveFocus()}};this.handleDaySelect=(e,t)=>{if(!k(t,c(this.min),c(this.max))){return}if(t.getMonth()===this.focusedDay.getMonth()){this.setValue(t);this.hide()}else{this.setFocusedDay(t)}};this.handleMonthSelect=e=>{if(e.target instanceof HTMLSelectElement){this.setMonth(parseInt(e.target.value,10))}};this.handleYearSelect=e=>{if(e.target instanceof HTMLSelectElement){this.setYear(parseInt(e.target.value,10))}};this.handleInputChange=e=>{const t=e.target;const s=K(t,j);this.setValue(s)};this.prepareEvent=e=>{const t={component:"dso-date-picker-legacy",value:"",valueAsDate:undefined};if(e instanceof Date){t.valueAsDate=e}else{t.value=e;t.valueAsDate=c(e)}if(t.valueAsDate){t.value=r(t.valueAsDate)}if(!t.valueAsDate&&this.required){t.error="required"}if(t.value&&!t.valueAsDate){t.error="invalid"}if(t.valueAsDate&&(this.min||this.max)){const e=c(this.min);const s=c(this.max);const i=_(t.valueAsDate,e,s);if(i!==t.valueAsDate&&i===e){t.valueAsDate=undefined;t.error="min-range"}else if(i!==t.valueAsDate&&i===s){t.valueAsDate=undefined;t.error="max-range"}}return t};this.processFocusedDayNode=e=>{this.focusedDayNode=e;if(this.activeFocus&&this.open){setTimeout((()=>e.focus()),0)}};this.activeFocus=false;this.focusedDay=new Date;this.open=false;this.visible=false;this.name="date";this.identifier=undefined;this.disabled=false;this.role=null;this.direction="right";this.required=false;this.invalid=undefined;this.describedBy=undefined;this.dsoAutofocus=false;this.value="";this.min=undefined;this.max=undefined}handleDocumentClick(e){if(!this.open){return}const t=e.composedPath();for(const e of t){if(e instanceof Node&&this.element.contains(e)){return}}this.hide(false)}async setFocus(){var e;return(e=this.datePickerLegacyInput)===null||e===void 0?void 0:e.focus()}async show(){if(typeof this.hideTimeoutId!=="undefined"){clearTimeout(this.hideTimeoutId)}this.visible=true;setTimeout((()=>{this.open=true;this.setFocusedDay(c(this.value)||new Date);if(typeof this.focusTimeoutId!=="undefined"){clearTimeout(this.focusTimeoutId)}this.focusTimeoutId=setTimeout((()=>{var e;return(e=this.monthSelectNode)===null||e===void 0?void 0:e.focus()}),F)}))}async hide(e=true){this.open=false;if(typeof this.focusTimeoutId!=="undefined"){clearTimeout(this.focusTimeoutId)}this.hideTimeoutId=setTimeout((()=>{if(e&&this.datePickerLegacyButton){this.datePickerLegacyButton.focus()}this.visible=false}),F+200)}addDays(e){this.setFocusedDay(p(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(h(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(f(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const t=y(b(this.focusedDay),e);const s=u(t);const i=y(this.focusedDay,e);this.setFocusedDay(_(i,t,s))}setYear(e){const t=g(b(this.focusedDay),e);const s=u(t);const i=g(this.focusedDay,e);this.setFocusedDay(_(i,t,s))}setFocusedDay(e){this.focusedDay=_(e,c(this.min),c(this.max))}setValue(e){const t=this.prepareEvent(e);this.value=typeof e==="string"?e:t.value;if(this.value!==this.previousValue){this.dsoDateChange.emit(t);this.previousValue=this.value}}componentWillLoad(){const e=c(this.min);const t=c(this.max);if(e&&e>this.focusedDay){this.focusedDay=e}if(t&&t<this.focusedDay){this.focusedDay=t}}componentDidLoad(){const e=c(this.value);if(e){this.previousValue=this.value=r(e)}if(this.dsoAutofocus){this.setFocus()}}render(){var t,s;const a=c(this.value);const d=a&&r(a);const o=(a||this.focusedDay).getFullYear();const n=this.focusedDay.getMonth();const l=this.focusedDay.getFullYear();const p=c(this.min);const h=c(this.max);const f=p&&p.getMonth()===n&&p.getFullYear()===l;const b=h&&h.getMonth()===n&&h.getFullYear()===l;let u=o-10;let y=o+10;if(p){u=Math.max(u,p.getFullYear())}if(h){y=Math.min(y,h.getFullYear())}return e(i,{key:"2923901f9bdbccbd5ef5903d629412f5fd83d638"},e("div",{key:"dab6969a1692b0d79d1b39f624470cb92ef6978c",class:{"dso-date":true,"dso-visible":this.visible}},e("div",{key:"dceb33fc1b6b03f17338ac1eb93055ffc01dfeed",class:"dso-date__input-wrapper"},e("input",{key:"a69e06e7a3ffad161363e23289e1a430208c8f60",class:"dso-date__input",value:this.value,placeholder:this.localization.placeholder,id:this.identifier,disabled:this.disabled,role:(t=this.role)!==null&&t!==void 0?t:undefined,required:this.required?true:undefined,"aria-autocomplete":"none","aria-invalid":(s=this.invalid)===null||s===void 0?void 0:s.toString(),"aria-describedby":this.describedBy,onInput:this.handleInputChange,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyUp:this.handleKeyUp,onKeyDown:this.handleKeyDown,autoComplete:"off",ref:e=>this.datePickerLegacyInput=e}),e("button",{key:"e5512a64cd0d9f2e0867e6665d2e2fa1288b4d72",type:"button",class:"dso-date__toggle",onClick:this.toggleOpen,disabled:this.disabled,ref:e=>this.datePickerLegacyButton=e},e("span",{key:"b06a7695d80f8e26e20227ce55da2e5099da9799",class:"dso-date__toggle-icon"},e("dso-icon",{key:"ace62b7cf13b2b0ae2d2798e1f4363d251b7b4c5",icon:"calendar"})),e("span",{key:"46b9b7c9e37b1eb378620df1c66201677f0ab4dd",class:"dso-date__vhidden"},this.localization.buttonLabel,d&&e("span",{key:"157db057463d015ae84f892e2fd73ddd67a6ffaf"},", ",this.localization.selectedDateMessage," ",d)))),e("div",{key:"83da0014367c9bdbe64e93ef1dd4ea4cab7bee7b",class:{"dso-date__dialog":true,"is-left":this.direction==="left","is-active":this.open},role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-labelledby":this.dialogLabelId,onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},e("div",{key:"42bd9a53e0cb0eb90a6469064964af8552f272e4",class:"dso-date__dialog-content",onKeyDown:this.handleEscKey},e("div",{key:"91c1b6eec67012c493f54eab7c52d7e653d4d9a1",class:"dso-date__vhidden dso-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),e("div",{key:"f4fd5892e4b42f1da1cf9581c6543b705b43d557",class:"dso-date__mobile",onFocusin:this.disableActiveFocus},e("label",{key:"c912fa9fdb19ed6915b7c01b8710cefb8957e2d2",class:"dso-date__mobile-heading"},this.localization.calendarHeading),e("button",{key:"83c6aedf8ea8715654bcbd4a2546f0c8d75df0b9",class:"dso-date__close",ref:e=>this.firstFocusableElement=e,onKeyDown:this.handleFirstFocusableKeydown,onClick:()=>this.hide(),type:"button"},e("dso-icon",{key:"5403e2ed31318fdb9014c18492db444c8b83c51a",icon:"times"}),e("span",{key:"90f8f264d4dfb8b7f365124d91af8b5474810a06",class:"dso-date__vhidden"},this.localization.closeLabel))),e("div",{key:"463f744fb48c7912cbb6522a82f0435ba7d99351",class:"dso-date__header",onFocusin:this.disableActiveFocus},e("div",{key:"cd45d2b6302d593fc73f5a42fecadd8f6599c18a"},e("h2",{key:"2ccbb5082c9311feb81fc91e93bfbd6c2c34d640",id:this.dialogLabelId,class:"dso-date__vhidden","aria-live":"polite"},this.localization.monthNames[n]," ",this.focusedDay.getFullYear()),e("label",{key:"48b8bc9d4321ab70c997385fe119bcc64663434d",htmlFor:this.monthSelectId,class:"dso-date__vhidden"},this.localization.monthSelectLabel),e("div",{key:"9df2297e9c3b7218923f50ed719e4957dbdc55d4",class:"dso-date__select"},e("select",{key:"022dc27bcda66e7f877a2061fdf83db5f0c8d5a5",id:this.monthSelectId,class:"dso-date__select--month",ref:e=>this.monthSelectNode=e,onChange:this.handleMonthSelect},N(this.localization,o,p,h).map((t=>{const s=this.localization.monthNames.indexOf(t);return e("option",{key:t,value:s,selected:s===n},t)}))),e("div",{key:"7c47642e0c754395d1c0a2d1640d92cf727533cf",class:"dso-date__select-label","aria-hidden":"true"},e("span",{key:"b72e0ad1bef955c73aeac34344224d036199c2c3"},this.localization.monthNamesShort[n]),e("dso-icon",{key:"55fd550d1573262f24e8e23013be73f8b697775a",icon:"chevron-down"}))),e("label",{key:"8fd80561dd849ee6b4a599e7ca96f1a26acd8582",htmlFor:this.yearSelectId,class:"dso-date__vhidden"},this.localization.yearSelectLabel),e("div",{key:"176ef978e8e325abd4c3136afe969ced69e68910",class:"dso-date__select"},e("select",{key:"0a03aef1d277e895b3788ed755e0e77198b9e795",id:this.yearSelectId,class:"dso-date__select--year",onChange:this.handleYearSelect},S(u,y).map((t=>e("option",{key:t,selected:t===l},t)))),e("div",{key:"d9a24296905e9d0909ce6df6e7c80dd1a9453b55",class:"dso-date__select-label","aria-hidden":"true"},e("span",{key:"de2c0d294f86d2d4fddb506eca8253ddb5951c66"},this.focusedDay.getFullYear()),e("dso-icon",{key:"7e94e19543b7235d4d58287cc4b2b53fa17993ce",icon:"chevron-down"})))),e("div",{key:"2b3e3042ab9d90bf809ba051b76b5c1ce01ae54c",class:"dso-date__nav"},e("button",{key:"4aaa04b7fa451f802c4ec94f08375064ace4c88d",class:"dso-date__prev",onClick:this.handlePreviousMonthClick,disabled:f,type:"button"},e("dso-icon",{key:"a99c430d48a0ed22c100cd1205db4e32192ce3b1",icon:"chevron-left"}),e("span",{key:"9908b1c22f3fcbfc65a68233d1b14f916401280e",class:"dso-date__vhidden"},this.localization.prevMonthLabel)),e("button",{key:"d469f09d74a85481b689eebc93497ba4bb8d4a68",class:"dso-date__next",onClick:this.handleNextMonthClick,disabled:b,type:"button"},e("dso-icon",{key:"4d13b57208116ae603ed46e38c04025643ac4b8b",icon:"chevron-right"}),e("span",{key:"e54bb9b92ef06d69b6bca8faef002b37e729d910",class:"dso-date__vhidden"},this.localization.nextMonthLabel)))),e(D,{key:"5674295fcc06f2d5887d17c52b998e1887d6bb37",selectedDate:a,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:p,max:h})))))}get element(){return a(this)}};C.style=Y;export{C as dso_date_picker_legacy};
-//# sourceMappingURL=p-0b390a43.entry.js.map
+import{h as e,r as t,c as s,H as i,a}from"./p-b623c74b.js";import{c as d}from"./p-97f788d4.js";var o;(function(e){e[e["Sunday"]=0]="Sunday";e[e["Monday"]=1]="Monday";e[e["Tuesday"]=2]="Tuesday";e[e["Wednesday"]=3]="Wednesday";e[e["Thursday"]=4]="Thursday";e[e["Friday"]=5]="Friday";e[e["Saturday"]=6]="Saturday"})(o||(o={}));function n(e,t,s){const i=parseInt(s,10);const a=parseInt(t,10);const d=parseInt(e,10);const o=Number.isInteger(d)&&Number.isInteger(a)&&Number.isInteger(i)&&a>0&&a<=12&&i>0&&i<=31&&d>0;if(o){return new Date(d,a-1,i)}}function c(e){if(!e){return}const t=e.split("-");if(t.length===3&&typeof t[0]==="string"&&typeof t[1]==="string"&&typeof t[2]==="string"&&t[2].length===4){return n(t[2],t[1],t[0])}}function r(e){if(!e){return""}const t=e.getDate().toString(10).padStart(2,"0");const s=(e.getMonth()+1).toString(10).padStart(2,"0");const i=e.getFullYear().toString(10).padStart(2,"0");return`${t}-${s}-${i}`}function l(e,t){if(!e||!t){return false}return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function p(e,t){const s=new Date(e);s.setDate(s.getDate()+t);return s}function h(e,t=o.Monday){const s=new Date(e);const i=s.getDay();const a=(i<t?7:0)+i-t;s.setDate(s.getDate()-a);return s}function f(e,t=o.Monday){const s=new Date(e);const i=s.getDay();const a=(i<t?-7:0)+6-(i-t);s.setDate(s.getDate()+a);return s}function b(e){return new Date(e.getFullYear(),e.getMonth(),1)}function u(e){return new Date(e.getFullYear(),e.getMonth()+1,0)}function y(e,t){const s=new Date(e);s.setMonth(t);return s}function g(e,t){const s=new Date(e);s.setFullYear(t);return s}function k(e,t,s){return _(e,t,s)===e}function _(e,t,s){const i=e.getTime();if(t&&t instanceof Date&&i<t.getTime()){return t}if(s&&s instanceof Date&&i>s.getTime()){return s}return e}function m(e,t){const s=[];let i=e;while(!l(i,t)){s.push(i);i=p(i,1)}s.push(i);return s}function x(e,t=o.Monday){const s=h(b(e),t);const i=f(u(e),t);return m(s,i)}const v=({focusedDay:t,today:s,day:i,onDaySelect:a,onKeyboardNavigation:d,focusedDayRef:o,inRange:n})=>{const c=l(i,s);const p=l(i,t);const h=i.getMonth()!==t.getMonth();const f=!n;function b(e){a(e,i)}return e("button",{class:{"dso-date__day":true,"is-today":c},tabIndex:p?0:-1,onClick:b,onKeyDown:d,disabled:f||h,type:"button",ref:e=>{if(p&&e&&o){o(e)}}},e("span",{"aria-hidden":"true"},i.getDate()),e("span",{class:"dso-date__vhidden"},r(i)))};function w(e,t){const s=[];for(let i=0;i<e.length;i+=t){s.push(e.slice(i,i+t))}return s}function z(e,t,s){return e.map(((i,a)=>{const d=(a+t)%e.length;const o=e[d];if(!o){throw new Error("No item found")}return s(o)}))}const D=({selectedDate:t,focusedDate:s,labelledById:i,localization:a,firstDayOfWeek:d,min:o,max:n,onDateSelect:c,onKeyboardNavigation:r,focusedDayRef:p,onMouseDown:h,onFocusIn:f})=>{const b=new Date;const u=x(s,d);return e("table",{class:"dso-date__table",role:"grid","aria-labelledby":i,onFocusin:f,onMouseDown:h},e("thead",null,e("tr",null,z(a.dayNames,d,(t=>e("th",{class:"dso-date__table-header",scope:"col"},e("span",{"aria-hidden":"true"},t.substr(0,2)),e("span",{class:"dso-date__vhidden"},t)))))),e("tbody",null,w(u,7).map((i=>e("tr",{class:"dso-date__row"},i.map((i=>e("td",{class:"dso-date__cell",role:"gridcell","aria-selected":l(i,t)?"true":undefined,"aria-current":l(i,b)?"date":undefined},e(v,{day:i,today:b,focusedDay:s,inRange:k(i,o,n),onDaySelect:c,onKeyboardNavigation:r,focusedDayRef:p})))))))))};const M={buttonLabel:"Kies datum",placeholder:"dd-mm-jjjj",selectedDateMessage:"Geselecteerde datum is",prevMonthLabel:"Vorige maand",nextMonthLabel:"Volgende maand",monthSelectLabel:"Maand",yearSelectLabel:"Jaar",closeLabel:"Sluiten",keyboardInstruction:"Gebruik de pijltjestoetsen om een dag te kiezen",calendarHeading:"Kies een datum",dayNames:["Zondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag"],monthNames:["Januari","Februari","Maart","April","Mei","Juni","Juli","Augustus","September","Oktober","November","December"],monthNamesShort:["Jan","Feb","Mrt","Apr","Mei","Jun","Jul","Aug","Sep","Okt","Nov","Dec"]};function N(e,t,s,i){if(s&&i){const{minYear:a,minMonth:d}={minYear:s.getFullYear(),minMonth:s.getMonth()};const{maxYear:o,maxMonth:n}={maxYear:i.getFullYear(),maxMonth:i.getMonth()};return e.monthNames.filter(((e,s)=>{if(a===t&&o===t){return s>=d&&s>=n}if(a===t){return s>=d}if(o===t){return s<=n}return true}))}if(s){const{minYear:i,minMonth:a}={minYear:s.getFullYear(),minMonth:s.getMonth()};return e.monthNames.filter(((e,s)=>i===t&&s>=a))}if(i){const{maxYear:s,maxMonth:a}={maxYear:i.getFullYear(),maxMonth:i.getMonth()};return e.monthNames.filter(((e,i)=>s===t&&i<=a))}return e.monthNames}function S(e,t){const s=[];for(let i=e;i<=t;i++){s.push(i)}return s}const T='.sc-dso-date-picker-legacy-h{display:block}[invalid].sc-dso-date-picker-legacy-h:not([invalid=false]) .dso-date__input.sc-dso-date-picker-legacy{border-color:#ce3f51}.dso-date.sc-dso-date-picker-legacy *.sc-dso-date-picker-legacy,.dso-date.sc-dso-date-picker-legacy *.sc-dso-date-picker-legacy::before,.dso-date.sc-dso-date-picker-legacy *.sc-dso-date-picker-legacy::after{box-sizing:border-box}.dso-date.sc-dso-date-picker-legacy{box-sizing:border-box;color:#191919;display:block;font-family:"Asap", sans-serif;margin:0;position:relative;text-align:start;inline-size:100%}.dso-date.sc-dso-date-picker-legacy:not(.dso-visible) .dso-date__dialog.sc-dso-date-picker-legacy{display:none}.dso-date__input.sc-dso-date-picker-legacy{display:block;inline-size:100%;block-size:40px;padding-block:6px;padding-inline:14px;font-size:1rem;line-height:1.5;color:#191919;background-color:#fff;background-image:none;border:1px solid #275937;border-radius:4px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s}.dso-date__input.sc-dso-date-picker-legacy::-moz-placeholder{color:#666;opacity:1}.dso-date__input.sc-dso-date-picker-legacy:-ms-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker-legacy::-webkit-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker-legacy::-ms-expand{background-color:transparent;border:0}.dso-date__input.sc-dso-date-picker-legacy:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled].sc-dso-date-picker-legacy,.dso-date__input[readonly].sc-dso-date-picker-legacy,fieldset[disabled].sc-dso-date-picker-legacy .dso-date__input.sc-dso-date-picker-legacy{background-color:#fff;opacity:1}.dso-date__input[disabled].sc-dso-date-picker-legacy,fieldset[disabled].sc-dso-date-picker-legacy .dso-date__input.sc-dso-date-picker-legacy{cursor:default}.dso-date__input[disabled].sc-dso-date-picker-legacy{border-color:#e5e5e5;color:#999}.dso-date__input[readonly].sc-dso-date-picker-legacy{border-width:1px}.dso-date__input[type=text].sc-dso-date-picker-legacy{line-height:40px}.dso-date__input[size].sc-dso-date-picker-legacy{inline-size:auto}.dso-date__toggle.sc-dso-date-picker-legacy{-moz-appearance:none;-webkit-appearance:none;-webkit-user-select:none;align-items:center;appearance:none;background:transparent;border:0;border-radius:0;border-end-end-radius:4px;border-start-end-radius:4px;color:#39870c;cursor:pointer;display:flex;block-size:38px;justify-content:center;padding:0;position:absolute;inset-inline-end:0;transform:translateY(-50%);inset-block-start:50%;user-select:none;inline-size:38px;z-index:101}.dso-date__toggle.sc-dso-date-picker-legacy:disabled{color:#afcf9d;cursor:default}.dso-date__dialog.sc-dso-date-picker-legacy{border-width:1px;display:flex;inset-inline-end:0;min-inline-size:320px;opacity:0;position:absolute;inset-block-start:100%;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;visibility:hidden;will-change:transform, opacity, visibility;z-index:210}@media (max-width: 35.9375em){.dso-date__dialog.sc-dso-date-picker-legacy{background:rgba(25, 25, 25, 0.5);inset-block-end:0;position:fixed;inset-inline-start:0;inset-inline-end:0;inset-block-start:0;transform:translateZ(0);transform-origin:bottom center}}.dso-date__dialog.is-left.sc-dso-date-picker-legacy{inset-inline-start:-11px;inset-inline-end:auto;inline-size:auto}.dso-date__dialog.is-active.sc-dso-date-picker-legacy{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.dso-date__dialog-content.sc-dso-date-picker-legacy{background:#fff;border:1px solid rgba(0, 0, 0, 0.1);border-radius:4px;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);margin-inline-start:auto;margin-inline-end:-1px;margin-block-start:8px;max-inline-size:310px;min-inline-size:290px;padding:16px;position:relative;transform:none;inline-size:100%;z-index:210}@media (max-width: 35.9375em){.dso-date__dialog-content.sc-dso-date-picker-legacy{border:0;border-radius:0;border-start-start-radius:4px;border-start-end-radius:4px;inset-block-end:0;inset-inline-start:0;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding-block:0 20px;padding-inline:8%;position:absolute;transform:translateZ(0) translateY(100%);transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;visibility:hidden;will-change:transform, opacity, visibility}.is-active.sc-dso-date-picker-legacy .dso-date__dialog-content.sc-dso-date-picker-legacy{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}}.dso-date__table.sc-dso-date-picker-legacy{border-collapse:collapse;border-spacing:0;color:#191919;font-size:1rem;font-weight:400;line-height:1.25;min-inline-size:280px;table-layout:fixed;text-align:center;inline-size:100%}.dso-date__table-header.sc-dso-date-picker-legacy{font-size:0.875em;font-weight:600;block-size:36px;line-height:36px;text-align:center;text-decoration:none;text-transform:uppercase}.dso-date__cell.sc-dso-date-picker-legacy{block-size:40px;padding:1px;text-align:center;inline-size:40px}.dso-date__day.sc-dso-date-picker-legacy{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;box-shadow:0 0 0 1px transparent;color:#191919;cursor:pointer;display:inline-block;font-family:"Asap", sans-serif;font-variant-numeric:tabular-nums;font-weight:400;block-size:38px;line-height:0;padding:0;position:relative;text-align:center;vertical-align:middle;inline-size:38px;z-index:100}.dso-date__day.is-today.sc-dso-date-picker-legacy{background:transparent;block-size:36px;box-shadow:0 0 0 1px #39870c;inline-size:36px}.dso-date__day.sc-dso-date-picker-legacy:hover,.dso-date__day.sc-dso-date-picker-legacy:active{background:#39870c;color:#fff}.dso-date__day.sc-dso-date-picker-legacy:focus{background:transparent;box-shadow:0 0 0 2px #275937;color:#191919;block-size:34px;outline:0;inline-size:34px}[aria-selected=true].sc-dso-date-picker-legacy .dso-date__day.sc-dso-date-picker-legacy{background:#39870c;color:#fff}[aria-selected=true].sc-dso-date-picker-legacy .dso-date__day.sc-dso-date-picker-legacy:focus{background:transparent}[aria-selected=true].sc-dso-date-picker-legacy .dso-date__day.sc-dso-date-picker-legacy:focus span[aria-hidden=true].sc-dso-date-picker-legacy{background:#39870c;border:1px solid #fff;line-height:32px}.dso-date__day.sc-dso-date-picker-legacy:disabled{background:#fff;color:#ccc;cursor:default}.dso-date__day.sc-dso-date-picker-legacy span[aria-hidden=true].sc-dso-date-picker-legacy{border-radius:50%;display:inline-block;block-size:34px;line-height:34px;inline-size:34px}.dso-date__header.sc-dso-date-picker-legacy{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.dso-date__header.sc-dso-date-picker-legacy span.sc-dso-date-picker-legacy{font-size:0.875rem}.dso-date__nav.sc-dso-date-picker-legacy{white-space:nowrap}.dso-date__prev.sc-dso-date-picker-legacy,.dso-date__next.sc-dso-date-picker-legacy{-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:transparent;border:1px solid #39870c;border-radius:4px;box-sizing:border-box;color:#39870c;cursor:pointer;display:inline-flex;font-size:1em;block-size:32px;justify-content:center;margin-inline-start:8px;padding:0;inline-size:32px}@media (max-width: 35.9375em){.dso-date__prev.sc-dso-date-picker-legacy,.dso-date__next.sc-dso-date-picker-legacy{block-size:40px;inline-size:40px}}.dso-date__prev.sc-dso-date-picker-legacy:hover,.dso-date__prev.sc-dso-date-picker-legacy:active,.dso-date__next.sc-dso-date-picker-legacy:hover,.dso-date__next.sc-dso-date-picker-legacy:active{background-color:#39870c;color:#fff}.dso-date__prev.sc-dso-date-picker-legacy:focus,.dso-date__next.sc-dso-date-picker-legacy:focus{background:transparent;color:#39870c}.dso-date__prev.sc-dso-date-picker-legacy:disabled,.dso-date__prev.sc-dso-date-picker-legacy:disabled:hover,.dso-date__next.sc-dso-date-picker-legacy:disabled,.dso-date__next.sc-dso-date-picker-legacy:disabled:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d;opacity:1}.dso-date__prev.sc-dso-date-picker-legacy svg.sc-dso-date-picker-legacy,.dso-date__next.sc-dso-date-picker-legacy svg.sc-dso-date-picker-legacy{margin-block:0;margin-inline:auto}.dso-date__select.sc-dso-date-picker-legacy{display:inline-flex;block-size:28px;line-height:28px;position:relative}.dso-date__select.sc-dso-date-picker-legacy span.sc-dso-date-picker-legacy{margin-inline-end:4px}.dso-date__select.sc-dso-date-picker-legacy select.sc-dso-date-picker-legacy{color:#275937;cursor:pointer;font-size:1rem;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:101}.dso-date__select.sc-dso-date-picker-legacy select.sc-dso-date-picker-legacy:focus+.dso-date__select-label.sc-dso-date-picker-legacy{box-shadow:0 0 0 2px #275937}.dso-date__select.sc-dso-date-picker-legacy select.sc-dso-date-picker-legacy:disabled{color:#afcf9d}.dso-date__select-label.sc-dso-date-picker-legacy{align-items:center;border-radius:4px;color:#39870c;display:flex;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:100}.dso-date__select-label.sc-dso-date-picker-legacy span.sc-dso-date-picker-legacy{font-size:1.25rem;font-weight:600;line-height:1.25}.dso-date__select-label.sc-dso-date-picker-legacy svg.sc-dso-date-picker-legacy{inline-size:16px;block-size:16px}.dso-date__mobile.sc-dso-date-picker-legacy{align-items:center;border-block-end:1px solid rgba(0, 0, 0, 0.12);display:flex;font-size:1em;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding-block:12px;padding-inline:20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width: 36em){.dso-date__mobile.sc-dso-date-picker-legacy{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-16px;inset-block-start:-16px;inline-size:auto}}.dso-date__mobile-heading.sc-dso-date-picker-legacy{display:inline-block;font-weight:600;max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.dso-date__mobile-heading.sc-dso-date-picker-legacy{display:none}}.dso-date__close.sc-dso-date-picker-legacy{-webkit-appearance:none;align-items:center;appearance:none;background-color:#fff;border:0;border-radius:50%;color:#39870c;cursor:pointer;display:flex;font-size:1em;block-size:32px;justify-content:center;margin-inline-end:-4px;padding:0;inline-size:32px}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker-legacy{margin-inline-end:0;opacity:0}}.dso-date__close.sc-dso-date-picker-legacy:focus{box-shadow:0 0 0 2px #275937;outline:none}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker-legacy:focus{opacity:1}}.dso-date__vhidden.sc-dso-date-picker-legacy{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}';const Y=T;const E={TAB:9,ESC:27,SPACE:32,PAGE_UP:33,PAGE_DOWN:34,END:35,HOME:36,LEFT:37,UP:38,RIGHT:39,DOWN:40};const j=/[^0-9-]+/g;const F=300;function K(e,t){const s=e.value;const i=e.selectionStart;if(!i){return s}const a=s.slice(0,i);const d=s.slice(i,s.length);const o=a.replace(t,"");const n=d.replace(t,"");const c=o+n;const r=o.length;e.value=c;e.selectionStart=e.selectionEnd=r;return c}const C=class{constructor(e){t(this,e);this.dsoDateChange=s(this,"dsoDateChange",7);this.dsoBlur=s(this,"dsoBlur",7);this.dsoKeyUp=s(this,"dsoKeyUp",7);this.dsoKeyDown=s(this,"dsoKeyDown",7);this.dsoFocus=s(this,"dsoFocus",7);this.monthSelectId=d("DsoDateMonth");this.yearSelectId=d("DsoDateYear");this.dialogLabelId=d("DsoDateLabel");this.localization=M;this.firstDayOfWeek=o.Monday;this.enableActiveFocus=()=>{this.activeFocus=true};this.disableActiveFocus=()=>{this.activeFocus=false};this.toggleOpen=e=>{e.preventDefault();if(this.open){this.hide(false)}else{this.show()}};this.handleEscKey=e=>{if(e.keyCode===E.ESC){this.hide()}};this.handleBlur=e=>{e.stopPropagation();this.dsoBlur.emit({component:"dso-date-picker-legacy"})};this.handleKeyUp=e=>{e.stopPropagation();this.dsoKeyUp.emit({component:"dso-date-picker-legacy",originalEvent:e})};this.handleKeyDown=e=>{e.stopPropagation();this.dsoKeyDown.emit({component:"dso-date-picker-legacy",originalEvent:e})};this.handleFocus=e=>{e.stopPropagation();this.dsoFocus.emit({component:"dso-date-picker-legacy"})};this.handleTouchStart=e=>{const t=e.changedTouches[0];if(!t){throw new Error("No touch found")}this.initialTouchX=t.pageX;this.initialTouchY=t.pageY};this.handleTouchMove=e=>{e.preventDefault()};this.handleTouchEnd=e=>{var t,s;const i=e.changedTouches[0];if(!i){throw new Error("No touch found")}const a=i.pageX-((t=this.initialTouchX)!==null&&t!==void 0?t:0);const d=i.pageY-((s=this.initialTouchY)!==null&&s!==void 0?s:0);const o=70;const n=Math.abs(a)>=o&&Math.abs(d)<=o;const c=Math.abs(d)>=o&&Math.abs(a)<=o&&d>0;if(n){this.addMonths(a<0?1:-1)}else if(c){this.hide(false);e.preventDefault()}this.initialTouchY=undefined;this.initialTouchX=undefined};this.handleNextMonthClick=e=>{e.preventDefault();this.addMonths(1)};this.handlePreviousMonthClick=e=>{e.preventDefault();this.addMonths(-1)};this.handleFirstFocusableKeydown=e=>{var t;if(e.keyCode===E.TAB&&e.shiftKey){(t=this.focusedDayNode)===null||t===void 0?void 0:t.focus();e.preventDefault()}};this.handleKeyboardNavigation=e=>{var t;if(e.keyCode===E.TAB&&!e.shiftKey){e.preventDefault();(t=this.firstFocusableElement)===null||t===void 0?void 0:t.focus();return}let s=true;switch(e.keyCode){case E.RIGHT:this.addDays(1);break;case E.LEFT:this.addDays(-1);break;case E.DOWN:this.addDays(7);break;case E.UP:this.addDays(-7);break;case E.PAGE_UP:if(e.shiftKey){this.addYears(-1)}else{this.addMonths(-1)}break;case E.PAGE_DOWN:if(e.shiftKey){this.addYears(1)}else{this.addMonths(1)}break;case E.HOME:this.startOfWeek();break;case E.END:this.endOfWeek();break;default:s=false}if(s){e.preventDefault();this.enableActiveFocus()}};this.handleDaySelect=(e,t)=>{if(!k(t,c(this.min),c(this.max))){return}if(t.getMonth()===this.focusedDay.getMonth()){this.setValue(t);this.hide()}else{this.setFocusedDay(t)}};this.handleMonthSelect=e=>{if(e.target instanceof HTMLSelectElement){this.setMonth(parseInt(e.target.value,10))}};this.handleYearSelect=e=>{if(e.target instanceof HTMLSelectElement){this.setYear(parseInt(e.target.value,10))}};this.handleInputChange=e=>{const t=e.target;const s=K(t,j);this.setValue(s)};this.prepareEvent=e=>{const t={component:"dso-date-picker-legacy",value:"",valueAsDate:undefined};if(e instanceof Date){t.valueAsDate=e}else{t.value=e;t.valueAsDate=c(e)}if(t.valueAsDate){t.value=r(t.valueAsDate)}if(!t.valueAsDate&&this.required){t.error="required"}if(t.value&&!t.valueAsDate){t.error="invalid"}if(t.valueAsDate&&(this.min||this.max)){const e=c(this.min);const s=c(this.max);const i=_(t.valueAsDate,e,s);if(i!==t.valueAsDate&&i===e){t.valueAsDate=undefined;t.error="min-range"}else if(i!==t.valueAsDate&&i===s){t.valueAsDate=undefined;t.error="max-range"}}return t};this.processFocusedDayNode=e=>{this.focusedDayNode=e;if(this.activeFocus&&this.open){setTimeout((()=>e.focus()),0)}};this.activeFocus=false;this.focusedDay=new Date;this.open=false;this.visible=false;this.name="date";this.identifier=undefined;this.disabled=false;this.role=null;this.direction="right";this.required=false;this.invalid=undefined;this.describedBy=undefined;this.dsoAutofocus=false;this.value="";this.min=undefined;this.max=undefined}handleDocumentClick(e){if(!this.open){return}const t=e.composedPath();for(const e of t){if(e instanceof Node&&this.element.contains(e)){return}}this.hide(false)}async setFocus(){var e;return(e=this.datePickerLegacyInput)===null||e===void 0?void 0:e.focus()}async show(){if(typeof this.hideTimeoutId!=="undefined"){clearTimeout(this.hideTimeoutId)}this.visible=true;setTimeout((()=>{this.open=true;this.setFocusedDay(c(this.value)||new Date);if(typeof this.focusTimeoutId!=="undefined"){clearTimeout(this.focusTimeoutId)}this.focusTimeoutId=setTimeout((()=>{var e;return(e=this.monthSelectNode)===null||e===void 0?void 0:e.focus()}),F)}))}async hide(e=true){this.open=false;if(typeof this.focusTimeoutId!=="undefined"){clearTimeout(this.focusTimeoutId)}this.hideTimeoutId=setTimeout((()=>{if(e&&this.datePickerLegacyButton){this.datePickerLegacyButton.focus()}this.visible=false}),F+200)}addDays(e){this.setFocusedDay(p(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(h(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(f(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const t=y(b(this.focusedDay),e);const s=u(t);const i=y(this.focusedDay,e);this.setFocusedDay(_(i,t,s))}setYear(e){const t=g(b(this.focusedDay),e);const s=u(t);const i=g(this.focusedDay,e);this.setFocusedDay(_(i,t,s))}setFocusedDay(e){this.focusedDay=_(e,c(this.min),c(this.max))}setValue(e){const t=this.prepareEvent(e);this.value=typeof e==="string"?e:t.value;if(this.value!==this.previousValue){this.dsoDateChange.emit(t);this.previousValue=this.value}}componentWillLoad(){const e=c(this.min);const t=c(this.max);if(e&&e>this.focusedDay){this.focusedDay=e}if(t&&t<this.focusedDay){this.focusedDay=t}}componentDidLoad(){const e=c(this.value);if(e){this.previousValue=this.value=r(e)}if(this.dsoAutofocus){this.setFocus()}}render(){var t,s;const a=c(this.value);const d=a&&r(a);const o=(a||this.focusedDay).getFullYear();const n=this.focusedDay.getMonth();const l=this.focusedDay.getFullYear();const p=c(this.min);const h=c(this.max);const f=p&&p.getMonth()===n&&p.getFullYear()===l;const b=h&&h.getMonth()===n&&h.getFullYear()===l;let u=o-10;let y=o+10;if(p){u=Math.max(u,p.getFullYear())}if(h){y=Math.min(y,h.getFullYear())}return e(i,{key:"2923901f9bdbccbd5ef5903d629412f5fd83d638"},e("div",{key:"dab6969a1692b0d79d1b39f624470cb92ef6978c",class:{"dso-date":true,"dso-visible":this.visible}},e("div",{key:"dceb33fc1b6b03f17338ac1eb93055ffc01dfeed",class:"dso-date__input-wrapper"},e("input",{key:"a69e06e7a3ffad161363e23289e1a430208c8f60",class:"dso-date__input",value:this.value,placeholder:this.localization.placeholder,id:this.identifier,disabled:this.disabled,role:(t=this.role)!==null&&t!==void 0?t:undefined,required:this.required?true:undefined,"aria-autocomplete":"none","aria-invalid":(s=this.invalid)===null||s===void 0?void 0:s.toString(),"aria-describedby":this.describedBy,onInput:this.handleInputChange,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyUp:this.handleKeyUp,onKeyDown:this.handleKeyDown,autoComplete:"off",ref:e=>this.datePickerLegacyInput=e}),e("button",{key:"e5512a64cd0d9f2e0867e6665d2e2fa1288b4d72",type:"button",class:"dso-date__toggle",onClick:this.toggleOpen,disabled:this.disabled,ref:e=>this.datePickerLegacyButton=e},e("span",{key:"b06a7695d80f8e26e20227ce55da2e5099da9799",class:"dso-date__toggle-icon"},e("dso-icon",{key:"ace62b7cf13b2b0ae2d2798e1f4363d251b7b4c5",icon:"calendar"})),e("span",{key:"46b9b7c9e37b1eb378620df1c66201677f0ab4dd",class:"dso-date__vhidden"},this.localization.buttonLabel,d&&e("span",{key:"157db057463d015ae84f892e2fd73ddd67a6ffaf"},", ",this.localization.selectedDateMessage," ",d)))),e("div",{key:"83da0014367c9bdbe64e93ef1dd4ea4cab7bee7b",class:{"dso-date__dialog":true,"is-left":this.direction==="left","is-active":this.open},role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-labelledby":this.dialogLabelId,onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},e("div",{key:"42bd9a53e0cb0eb90a6469064964af8552f272e4",class:"dso-date__dialog-content",onKeyDown:this.handleEscKey},e("div",{key:"91c1b6eec67012c493f54eab7c52d7e653d4d9a1",class:"dso-date__vhidden dso-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),e("div",{key:"f4fd5892e4b42f1da1cf9581c6543b705b43d557",class:"dso-date__mobile",onFocusin:this.disableActiveFocus},e("label",{key:"c912fa9fdb19ed6915b7c01b8710cefb8957e2d2",class:"dso-date__mobile-heading"},this.localization.calendarHeading),e("button",{key:"83c6aedf8ea8715654bcbd4a2546f0c8d75df0b9",class:"dso-date__close",ref:e=>this.firstFocusableElement=e,onKeyDown:this.handleFirstFocusableKeydown,onClick:()=>this.hide(),type:"button"},e("dso-icon",{key:"5403e2ed31318fdb9014c18492db444c8b83c51a",icon:"times"}),e("span",{key:"90f8f264d4dfb8b7f365124d91af8b5474810a06",class:"dso-date__vhidden"},this.localization.closeLabel))),e("div",{key:"463f744fb48c7912cbb6522a82f0435ba7d99351",class:"dso-date__header",onFocusin:this.disableActiveFocus},e("div",{key:"cd45d2b6302d593fc73f5a42fecadd8f6599c18a"},e("h2",{key:"2ccbb5082c9311feb81fc91e93bfbd6c2c34d640",id:this.dialogLabelId,class:"dso-date__vhidden","aria-live":"polite"},this.localization.monthNames[n]," ",this.focusedDay.getFullYear()),e("label",{key:"48b8bc9d4321ab70c997385fe119bcc64663434d",htmlFor:this.monthSelectId,class:"dso-date__vhidden"},this.localization.monthSelectLabel),e("div",{key:"9df2297e9c3b7218923f50ed719e4957dbdc55d4",class:"dso-date__select"},e("select",{key:"022dc27bcda66e7f877a2061fdf83db5f0c8d5a5",id:this.monthSelectId,class:"dso-date__select--month",ref:e=>this.monthSelectNode=e,onChange:this.handleMonthSelect},N(this.localization,o,p,h).map((t=>{const s=this.localization.monthNames.indexOf(t);return e("option",{key:t,value:s,selected:s===n},t)}))),e("div",{key:"7c47642e0c754395d1c0a2d1640d92cf727533cf",class:"dso-date__select-label","aria-hidden":"true"},e("span",{key:"b72e0ad1bef955c73aeac34344224d036199c2c3"},this.localization.monthNamesShort[n]),e("dso-icon",{key:"55fd550d1573262f24e8e23013be73f8b697775a",icon:"chevron-down"}))),e("label",{key:"8fd80561dd849ee6b4a599e7ca96f1a26acd8582",htmlFor:this.yearSelectId,class:"dso-date__vhidden"},this.localization.yearSelectLabel),e("div",{key:"176ef978e8e325abd4c3136afe969ced69e68910",class:"dso-date__select"},e("select",{key:"0a03aef1d277e895b3788ed755e0e77198b9e795",id:this.yearSelectId,class:"dso-date__select--year",onChange:this.handleYearSelect},S(u,y).map((t=>e("option",{key:t,selected:t===l},t)))),e("div",{key:"d9a24296905e9d0909ce6df6e7c80dd1a9453b55",class:"dso-date__select-label","aria-hidden":"true"},e("span",{key:"de2c0d294f86d2d4fddb506eca8253ddb5951c66"},this.focusedDay.getFullYear()),e("dso-icon",{key:"7e94e19543b7235d4d58287cc4b2b53fa17993ce",icon:"chevron-down"})))),e("div",{key:"2b3e3042ab9d90bf809ba051b76b5c1ce01ae54c",class:"dso-date__nav"},e("button",{key:"4aaa04b7fa451f802c4ec94f08375064ace4c88d",class:"dso-date__prev",onClick:this.handlePreviousMonthClick,disabled:f,type:"button"},e("dso-icon",{key:"a99c430d48a0ed22c100cd1205db4e32192ce3b1",icon:"chevron-left"}),e("span",{key:"9908b1c22f3fcbfc65a68233d1b14f916401280e",class:"dso-date__vhidden"},this.localization.prevMonthLabel)),e("button",{key:"d469f09d74a85481b689eebc93497ba4bb8d4a68",class:"dso-date__next",onClick:this.handleNextMonthClick,disabled:b,type:"button"},e("dso-icon",{key:"4d13b57208116ae603ed46e38c04025643ac4b8b",icon:"chevron-right"}),e("span",{key:"e54bb9b92ef06d69b6bca8faef002b37e729d910",class:"dso-date__vhidden"},this.localization.nextMonthLabel)))),e(D,{key:"5674295fcc06f2d5887d17c52b998e1887d6bb37",selectedDate:a,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:p,max:h})))))}get element(){return a(this)}};C.style=Y;export{C as dso_date_picker_legacy};
+//# sourceMappingURL=p-33629822.entry.js.map

package/dist/dso-toolkit/p-34c19fc1.entry.js

@@ -0,0 +1,2 @@
+import{r as e,f as t,h as s,H as a,a as r}from"./p-b623c74b.js";const i="*,*::after,*::before{box-sizing:border-box}.tabs{border-block-end:1px solid #39870c;display:flex;gap:2px;flex-wrap:wrap;margin-block-end:24px;padding-inline-start:0}@media screen and (max-width: 767px){.tabs{border:0;display:block}}";const o=i;const c=class{constructor(t){e(this,t);this.keyUpHandler=e=>{if(!(e.target instanceof HTMLElement)){return}switch(e.key){case"ArrowRight":case"ArrowDown":this.moveFocusToNextTab(e.target);break;case"ArrowLeft":case"ArrowUp":this.moveFocusToPreviousTab(e.target);break;default:return}}}get enabledTabs(){return Array.from(this.host.querySelectorAll(":scope > dso-tab")).reduce(((e,t)=>{if(!t.disabled){e.push(t)}return e}),[])}get firstTab(){return this.enabledTabs[0]}get lastTab(){return this.enabledTabs[this.enabledTabs.length-1]}moveFocusToTab(e){e===null||e===void 0?void 0:e._dsoFocus()}moveFocusToPreviousTab(e){var t;const s=this.enabledTabs.findIndex((t=>t===e));const a=(t=this.enabledTabs[s-1])!==null&&t!==void 0?t:this.lastTab;this.moveFocusToTab(a)}moveFocusToNextTab(e){var t;const s=this.enabledTabs.findIndex((t=>t===e));const a=(t=this.enabledTabs[s+1])!==null&&t!==void 0?t:this.firstTab;this.moveFocusToTab(a)}connectedCallback(){var e;(e=this.mutationObserver)!==null&&e!==void 0?e:this.mutationObserver=new MutationObserver((()=>t(this.host)));this.mutationObserver.observe(this.host,{childList:true})}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}render(){return s(a,{key:"ce49553d33f63de258e8ff3466fa37d539e4734f"},s("div",{key:"22a863b05306509b718237a071a072a52c3cfd73",class:"tabs",role:"tablist",onKeyUp:this.keyUpHandler},s("slot",{key:"75d01af59d70f79e059948d9239c7c9ccdef297b"})),s("div",{key:"2304bbce1b0c27566ae04f7c1c5dd13cd9e588eb",role:"tabpanel",tabindex:"0"},s("slot",{key:"bc1a82a606d37dd50beb5f5acd575cc57b41182e",name:"panel"})))}get host(){return r(this)}};c.style=o;export{c as dso_tabs};
+//# sourceMappingURL=p-34c19fc1.entry.js.map

package/dist/dso-toolkit/p-34c19fc1.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tabsCss","DsoTabsStyle0","Tabs","constructor","hostRef","this","keyUpHandler","e","target","HTMLElement","key","moveFocusToNextTab","moveFocusToPreviousTab","enabledTabs","Array","from","host","querySelectorAll","reduce","tabs","tab","disabled","push","firstTab","lastTab","length","moveFocusToTab","_dsoFocus","focussedTab","index","findIndex","next","_a","connectedCallback","mutationObserver","MutationObserver","forceUpdate","observe","childList","disconnectedCallback","disconnect","render","h","Host","class","role","onKeyUp","tabindex","name"],"sources":["src/components/tabs/tabs.scss?tag=dso-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"~dso-toolkit/src/components/tabs/tabs.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n.tabs {\r\n  border-block-end: 1px solid colors.$grasgroen;\r\n  display: flex;\r\n  gap: 2px;\r\n  flex-wrap: wrap;\r\n  margin-block-end: tab-variables.$margin-block-end;\r\n  padding-inline-start: 0;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border: 0;\r\n    display: block;\r\n  }\r\n}\r\n","import { Element, Component, h, Host, forceUpdate } from \"@stencil/core\";\r\n\r\n/**\r\n * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n  tag: \"dso-tabs\",\r\n  styleUrl: \"tabs.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tabs {\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  host!: HTMLDsoTabsElement;\r\n\r\n  private get enabledTabs() {\r\n    // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n    return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n      (tabs, tab) => {\r\n        if (!tab.disabled) {\r\n          tabs.push(tab);\r\n        }\r\n\r\n        return tabs;\r\n      },\r\n      [],\r\n    );\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.enabledTabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.enabledTabs[this.enabledTabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLDsoTabElement | undefined) {\r\n    tab?._dsoFocus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index - 1] ?? this.lastTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (!(e.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        this.moveFocusToNextTab(e.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n          <slot />\r\n        </div>\r\n        <div role=\"tabpanel\" tabindex=\"0\">\r\n          <slot name=\"panel\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"gEAAA,MAAMA,EAAU,2OAChB,MAAAC,EAAeD,E,MCUFE,EAAI,MALjB,WAAAC,CAAAC,G,UAoDUC,KAAAC,aAAgBC,IACtB,KAAMA,EAAEC,kBAAkBC,aAAc,CACtC,M,CAGF,OAAQF,EAAEG,KACR,IAAK,aACL,IAAK,YACHL,KAAKM,mBAAmBJ,EAAEC,QAC1B,MACF,IAAK,YACL,IAAK,UACHH,KAAKO,uBAAuBL,EAAEC,QAC9B,MACF,QACE,O,EAxDN,eAAYK,GAEV,OAAOC,MAAMC,KAAKV,KAAKW,KAAKC,iBAAoC,qBAAqBC,QACnF,CAACC,EAAMC,KACL,IAAKA,EAAIC,SAAU,CACjBF,EAAKG,KAAKF,E,CAGZ,OAAOD,CAAI,GAEb,G,CAIJ,YAAYI,GACV,OAAOlB,KAAKQ,YAAY,E,CAG1B,WAAYW,GACV,OAAOnB,KAAKQ,YAAYR,KAAKQ,YAAYY,OAAS,E,CAG5C,cAAAC,CAAeN,GACrBA,IAAG,MAAHA,SAAG,SAAHA,EAAKO,W,CAGC,sBAAAf,CAAuBgB,G,MAC7B,MAAMC,EAAQxB,KAAKQ,YAAYiB,WAAWV,GAAQA,IAAQQ,IAC1D,MAAMG,GAAOC,EAAA3B,KAAKQ,YAAYgB,EAAQ,MAAE,MAAAG,SAAA,EAAAA,EAAI3B,KAAKmB,QAEjDnB,KAAKqB,eAAeK,E,CAGd,kBAAApB,CAAmBiB,G,MACzB,MAAMC,EAAQxB,KAAKQ,YAAYiB,WAAWV,GAAQA,IAAQQ,IAC1D,MAAMG,GAAOC,EAAA3B,KAAKQ,YAAYgB,EAAQ,MAAE,MAAAG,SAAA,EAAAA,EAAI3B,KAAKkB,SAEjDlB,KAAKqB,eAAeK,E,CAuBtB,iBAAAE,G,OACED,EAAA3B,KAAK6B,oBAAgB,MAAAF,SAAA,EAAAA,EAArB3B,KAAK6B,iBAAqB,IAAIC,kBAAiB,IAAMC,EAAY/B,KAAKW,QAEtEX,KAAK6B,iBAAiBG,QAAQhC,KAAKW,KAAM,CAAEsB,UAAW,M,CAGxD,oBAAAC,G,OACEP,EAAA3B,KAAK6B,oBAAgB,MAAAF,SAAA,SAAAA,EAAEQ,Y,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAjC,IAAA,4CACHgC,EAAA,OAAAhC,IAAA,2CAAKkC,MAAM,OAAOC,KAAK,UAAUC,QAASzC,KAAKC,cAC7CoC,EAAA,QAAAhC,IAAA,8CAEFgC,EAAA,OAAAhC,IAAA,2CAAKmC,KAAK,WAAWE,SAAS,KAC5BL,EAAA,QAAAhC,IAAA,2CAAMsC,KAAK,W","ignoreList":[]}

package/dist/dso-toolkit/p-3735286c.entry.js

@@ -0,0 +1,2 @@
+import{h as n,r as e,c as t,F as o,a as i}from"./p-b623c74b.js";import{c as s}from"./p-8a1a6e56.js";import{d as a}from"./p-9438a55c.js";const r=["main","map"];const l=["search","map","document"];const d={main:"Hoofdpaneel",map:"Kaart",document:"Document",search:"Zoeken"};const c={small:"smal",medium:"middel",large:"breed"};const p=({className:e,onClick:t,label:o,icon:i})=>n("button",{type:"button",class:e,onClick:t},n("span",{class:"sr-only"},o),n("dso-icon",{icon:i}));const b=({shrink:e,expand:t,size:o,panelLabel:i,placement:s})=>{const a=[];if(o!=="small"){a.push(n(p,{onClick:e,label:`${i} smaller maken`,icon:s==="right"?"chevron-right":"chevron-left",className:"shrink"}))}if(o!=="large"){a.push(n(p,{onClick:t,label:`${i} breder maken`,icon:s==="right"?"chevron-left":"chevron-right",className:"expand"}))}return n("div",{class:"sizing-buttons"},n("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte ",i.toLocaleLowerCase(),": ",c[o]),a)};const f=({tabView:e,panelSize:t,shrinkDocumentPanel:o,expandDocumentPanel:i,dsoDocumentPanelSizeChangeAnimationEnd:s})=>n("div",{class:"dso-document-panel",onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){s.emit({currentSize:t})}}},!e&&n(b,{panelLabel:"Documentpaneel",size:t,expand:i,shrink:o,placement:"right"}),n("div",{class:"content"},n("slot",{name:"document-panel"})));const g=({onApply:e,onCancel:t})=>n("div",{class:"filterpanel-buttons"},n("button",{type:"button",class:"cancel-button",onClick:t},n("span",null,"Annuleren")),n("button",{type:"button",class:"apply-button",onClick:e},n("span",null,"Toepassen"),n("dso-icon",{icon:"chevron-right"})));const u=({ref:e,onApply:t,onCancel:o})=>n("dialog",{id:"filterpanel",class:"filterpanel",ref:e,onCancel:n=>{n.preventDefault();o(n)}},n("h1",null,"Uw keuzes"),n(g,{onApply:t,onCancel:o}),n("slot",{name:"filterpanel"}),n(g,{onApply:t,onCancel:o}));const h=({mode:e,tabView:t,mainSize:o,documentPanelOpen:i,mainPanelExpanded:a,mainPanelHidden:r,shrinkMain:l,expandMain:d,toggleMainPanel:c,dsoMainSizeChangeAnimationEnd:p})=>n("div",{class:s("dso-main-panel",{compact:!t&&i&&!a,contracted:!t&&!i&&!a&&e==="vdk",expanded:!t&&i&&a,collapsed:r}),onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){p.emit({currentSize:o})}}},!t&&(e==="vrk"&&n(b,{panelLabel:"Hoofdpaneel",size:o,expand:d,shrink:l,placement:"left"})||e==="vdk"&&i&&n("div",{class:"toggle-button"},n("button",{type:"button",onClick:c},n("span",{class:"sr-only"},"Zoeken paneel ",r?"tonen":"verbergen"),n("dso-icon",{icon:r?"chevron-right":"chevron-left"})))),n("div",{class:s("content",{invisible:r})},n("slot",{name:"main"})));const m=({ref:e,dsoCloseOverlay:t})=>n("dialog",{class:"overlay",ref:e,onCancel:n=>{n.preventDefault();t(n)}},n("button",{type:"button",class:"overlay-close-button",onClick:t},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"sluiten")),n("slot",{name:"overlay"}));const v="*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([mode=vdk]) .overlay {\n  block-size: calc(100% - 32px);\n  margin-block: 16px;\n  margin-inline: auto 16px;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n  outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n  outline: 0;\n}\n.shrink,\n.expand,\n.overlay-close-button {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n  color: #173521;\n}\n.shrink.dso-align,\n.expand.dso-align,\n.overlay-close-button.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.shrink.dso-truncate,\n.expand.dso-truncate,\n.overlay-close-button.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\n.shrink svg.di.di-chevron-down + span:not(.sr-only),\n.shrink svg.di.di-chevron-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-chevron-down,\n.shrink span:not(.sr-only) + svg.di.di-chevron-up,\n.expand svg.di.di-chevron-down + span:not(.sr-only),\n.expand svg.di.di-chevron-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-chevron-down,\n.expand span:not(.sr-only) + svg.di.di-chevron-up,\n.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\n.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),\n.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),\n.shrink svg.di.di-angle-down + span:not(.sr-only),\n.shrink svg.di.di-angle-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-angle-down,\n.shrink span:not(.sr-only) + svg.di.di-angle-up,\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],\n.expand dso-icon[icon=chevron-left] + span:not(.sr-only),\n.expand dso-icon[icon=chevron-right] + span:not(.sr-only),\n.expand svg.di.di-angle-down + span:not(.sr-only),\n.expand svg.di.di-angle-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-angle-down,\n.expand span:not(.sr-only) + svg.di.di-angle-up,\n.expand span:not(.sr-only) + dso-icon[icon=chevron-left],\n.expand span:not(.sr-only) + dso-icon[icon=chevron-right],\n.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),\n.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n  vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n  cursor: pointer;\n}\n\n.overlay-close-button {\n  position: absolute;\n  inset-block-start: 8px;\n  inset-inline-end: 16px;\n}\n\n.content.invisible {\n  visibility: hidden;\n}\n\n.dso-main-panel .content,\n.dso-document-panel .content {\n  block-size: 100%;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n\n.dso-main-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n  z-index: 100;\n}\n.dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {\n  inset-inline-start: -432px;\n}\n.dso-main-panel.compact, .dso-main-panel.contracted {\n  flex-shrink: unset;\n  flex-grow: unset;\n  position: absolute;\n  transition: none;\n}\n.dso-main-panel.expanded.collapsed {\n  position: absolute;\n  block-size: 100%;\n}\n.dso-main-panel .dso-filterblok-address {\n  font-weight: bold;\n  margin-block: 8px;\n  margin-inline: 0;\n}\n.dso-main-panel .sizing-buttons,\n.dso-main-panel .toggle-button {\n  inset-inline-start: calc(100% + 1px);\n  transition: inset-inline-start 200ms ease-in;\n  padding-block: 0 8px;\n  padding-inline: 0 4px;\n}\n.dso-main-panel .sizing-buttons button,\n.dso-main-panel .toggle-button button {\n  border-end-end-radius: 4px;\n  border-start-end-radius: 4px;\n}\n\n.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  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:focus, .sizing-buttons button:focus-visible,\n.toggle-button button:focus,\n.toggle-button button:focus-visible {\n  outline-offset: 2px;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n  outline: 0;\n}\n.sizing-buttons button,\n.toggle-button button {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button,\n.toggle-button button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.sizing-buttons button:hover,\n.toggle-button button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover,\n.toggle-button button[disabled],\n.toggle-button button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.sizing-buttons button.dso-small,\n.toggle-button button.dso-small {\n  line-height: 1rem;\n}\n.sizing-buttons button.dso-small dso-icon,\n.sizing-buttons button.dso-small svg.di, .sizing-buttons button.dso-small.extern::after, .sizing-buttons button.dso-small.download::after, .sizing-buttons button.dso-small.dso-spinner::before,\n.toggle-button button.dso-small dso-icon,\n.toggle-button button.dso-small svg.di,\n.toggle-button button.dso-small.extern::after,\n.toggle-button button.dso-small.download::after,\n.toggle-button button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.sizing-buttons button.dso-small.dso-spinner-left::before,\n.toggle-button button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button.dso-small.dso-spinner-right::after,\n.toggle-button button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button > span,\n.toggle-button button > span {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled],\n.toggle-button button.dso-spinner-left[disabled],\n.toggle-button button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before,\n.toggle-button button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after,\n.toggle-button button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button:focus-visible,\n.toggle-button button:focus-visible {\n  background-color: #d7e7ce;\n  border-color: #d7e7ce;\n  color: #fff;\n  outline: none;\n}\n.sizing-buttons button:hover dso-icon,\n.toggle-button button:hover dso-icon {\n  color: #fff;\n}\n\n.map {\n  block-size: 100%;\n  inline-size: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.filterpanel,\n.overlay {\n  background-color: #fff;\n  border: 0;\n  block-size: 100%;\n  margin-block: 0;\n  max-block-size: 100vh;\n  overflow-y: auto;\n  z-index: 101;\n}\n\n.filterpanel {\n  padding-block: 8px;\n  padding-inline: 16px;\n  inset-inline-start: 0;\n}\n@media screen and (max-width: 768px) {\n  .filterpanel {\n    inline-size: 100vw;\n  }\n  .filterpanel::before {\n    display: none !important;\n  }\n}\n.filterpanel h1 {\n  color: #275937;\n  margin-block-end: 16px;\n  margin-block-start: 24px;\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n@media screen and (min-width: 480px) {\n  .filterpanel h1 {\n    font-size: 2rem;\n  }\n}\n\n.overlay {\n  padding-block: 40px 8px;\n  padding-inline: 16px;\n  inset-inline-end: 0;\n  inline-size: 624px;\n}\n.overlay::backdrop {\n  background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 624px) {\n  .overlay {\n    inline-size: 100vw;\n  }\n}\n\n.filterpanel-buttons {\n  text-align: end;\n}\n.filterpanel-buttons .cancel-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .cancel-button {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.filterpanel-buttons .cancel-button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.dso-small {\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.dso-small dso-icon,\n.filterpanel-buttons .cancel-button.dso-small svg.di, .filterpanel-buttons .cancel-button.dso-small.extern::after, .filterpanel-buttons .cancel-button.dso-small.download::after, .filterpanel-buttons .cancel-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .apply-button {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.filterpanel-buttons .apply-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-small {\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.dso-small dso-icon,\n.filterpanel-buttons .apply-button.dso-small svg.di, .filterpanel-buttons .apply-button.dso-small.extern::after, .filterpanel-buttons .apply-button.dso-small.download::after, .filterpanel-buttons .apply-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n  margin-inline-start: 16px;\n}\n\n@media screen and (min-width: 808px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 375px;\n    min-inline-size: 0;\n    max-inline-size: 375px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 375px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 0;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 624px;\n    min-inline-size: 375px;\n    max-inline-size: 624px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 624px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 375px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 60%;\n    min-inline-size: 768px;\n    max-inline-size: 1024px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 768px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 768px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host {\n    display: flex;\n    block-size: 100vh;\n    overflow: hidden;\n    position: relative;\n  }\n  :host .dso-main-panel.compact,\n  :host .dso-main-panel.expanded {\n    flex-basis: unset;\n    min-inline-size: unset;\n    max-inline-size: unset;\n    inline-size: 440px;\n  }\n  :host .dso-main-panel.compact .content,\n  :host .dso-main-panel.expanded .content {\n    block-size: auto;\n    overflow-y: auto;\n  }\n}\n@media screen and (min-width: 808px) {\n  .dso-main-panel,\n  .dso-document-panel {\n    box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  }\n  .dso-main-panel .content,\n  .dso-document-panel .content {\n    overflow-y: auto;\n  }\n}\n@media screen and (min-width: 808px) {\n  .filterpanel {\n    box-shadow: 2px 0 5px #666;\n    margin-inline: 0 auto;\n    max-inline-size: 896px;\n    inline-size: calc(100vw - 40px);\n  }\n  .filterpanel::before {\n    content: \"\";\n    display: block;\n    position: fixed;\n    inset-block-start: 0;\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    inset-inline-start: 896px;\n    background-color: rgba(0, 0, 0, 0.5);\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 936px) {\n  .filterpanel::before {\n    inset-inline-start: auto;\n    inline-size: 40px;\n  }\n}\n@media screen and (min-width: 808px) {\n  .overlay {\n    box-shadow: -2px 0 5px #666;\n    margin-inline: auto 0;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar {\n    min-block-size: 32px;\n  }\n  .dso-navbar .dso-navbar-header {\n    float: inline-start;\n  }\n  .dso-navbar .dso-navbar-toggle {\n    border-radius: 4px;\n    min-inline-size: auto;\n    padding-block: 5px;\n    padding-inline: 0;\n  }\n  .dso-navbar .dso-navbar-toggle dso-icon,\n  .dso-navbar .dso-navbar-toggle svg.di {\n    margin-inline-start: 8px;\n    margin-inline-end: 8px;\n  }\n}\n@media screen and (max-width: 807.99px) and (min-width: 992px) {\n  .dso-navbar .dso-navbar-toggle {\n    display: none;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {\n    margin-inline-end: 8rem;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-nav {\n    list-style: none;\n    margin-block-end: 0;\n    padding-inline-start: 0;\n  }\n  .dso-nav > li > button {\n    border: 0;\n    background-color: transparent;\n  }\n  .dso-nav > li > a,\n  .dso-nav > li > button {\n    display: block;\n  }\n  .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,\n  .dso-nav > li > button,\n  .dso-nav > li > button:hover,\n  .dso-nav > li > button:focus,\n  .dso-nav > li > button:visited {\n    color: #275937;\n  }\n  .dso-nav > li.dso-active > a,\n  .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,\n  .dso-nav > li.is-active > button {\n    border-block-end: 4px solid #8b4a6a;\n    font-weight: bold;\n  }\n  .dso-nav.dso-nav-main > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    text-decoration: none;\n  }\n  .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,\n  .dso-nav.dso-nav-main > li > button:hover,\n  .dso-nav.dso-nav-main > li > button:focus-visible,\n  .dso-nav.dso-nav-main > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    font-size: 1.25em;\n    line-height: 1;\n    margin-block-start: 8px;\n    padding-block: 8px 7px;\n    padding-inline: 16px;\n  }\n  .dso-nav.dso-nav-sub > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    text-decoration: none;\n  }\n  .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,\n  .dso-nav.dso-nav-sub > li > button:hover,\n  .dso-nav.dso-nav-sub > li > button:focus-visible,\n  .dso-nav.dso-nav-sub > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    font-size: 1rem;\n    margin-block-start: 4px;\n    padding-block: 4px 3px;\n    padding-inline: 8px;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar {\n    padding-inline: 16px;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-nav {\n    border-block-end: 1px solid #ccc;\n    display: flex;\n    gap: 16px;\n    margin-block-start: 0;\n    inline-size: calc(100vw - 32px);\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-tertiary {\n    display: inline-block;\n    font-size: 1em;\n    font-weight: 500;\n    margin-block-end: 0;\n    text-decoration: none;\n    touch-action: manipulation;\n    text-align: start;\n    user-select: none;\n    vertical-align: middle;\n    font-weight: 300;\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}\n@media screen and (max-width: 807.99px) {\n  .filterpanel,\n  .overlay {\n    margin-inline: 0;\n    max-inline-size: 100vw;\n    inset-block-start: 0;\n    inline-size: 100vw;\n  }\n}";const x=v;const k=new ResizeObserver(a((([n])=>{const e=n===null||n===void 0?void 0:n.target.getRootNode();if(e instanceof ShadowRoot&&y(e.host)){e.host._checkMainPanelVisibility()}}),50));function y(n){return n.tagName==="DSO-VIEWER-GRID"}const w=40;const z=768+w;const B=440;const D=class{constructor(n){e(this,n);this.dsoCloseOverlay=t(this,"dsoCloseOverlay",7);this.dsoFilterpanelCancel=t(this,"dsoFilterpanelCancel",7);this.dsoFilterpanelApply=t(this,"dsoFilterpanelApply",7);this.dsoActiveTabSwitch=t(this,"dsoActiveTabSwitch",7);this.dsoMainSizeChange=t(this,"dsoMainSizeChange",7);this.dsoMainSizeChangeAnimationEnd=t(this,"dsoMainSizeChangeAnimationEnd",7);this.dsoDocumentPanelSizeChange=t(this,"dsoDocumentPanelSizeChange",7);this.dsoDocumentPanelSizeChangeAnimationEnd=t(this,"dsoDocumentPanelSizeChangeAnimationEnd",7);this.dsoMainPanelExpand=t(this,"dsoMainPanelExpand",7);this.dsoMainPanelToggle=t(this,"dsoMainPanelToggle",7);this.mediaCondition=`(min-width: ${z}px)`;this.switchActiveTab=n=>{this.dsoActiveTabSwitch.emit({tab:n})};this.emitShrinkMain=()=>{this.dsoMainSizeChange.emit({currentSize:this.mainSize,nextSize:this.mainSize==="large"?"medium":"small"})};this.emitExpandMain=()=>{this.dsoMainSizeChange.emit({currentSize:this.mainSize,nextSize:this.mainSize==="small"?"medium":"large"})};this.shrinkDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="large"?"medium":"small"})};this.expandDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="small"?"medium":"large"})};this.toggleMainPanel=()=>{if(this.mapElement instanceof HTMLDivElement&&this.mapElement.clientWidth<=B+w+w){this.mainSize="small"}this.dsoMainPanelToggle.emit({hide:!this.mainPanelHidden})};this.changeListener=n=>this.tabView=!n.matches;this.handleFilterpanelApply=n=>{this.dsoFilterpanelApply.emit({originalEvent:n})};this.handleFilterpanelCancel=n=>{this.dsoFilterpanelCancel.emit({originalEvent:n})};this.mode="vrk";this.filterpanelOpen=false;this.overlayOpen=false;this.documentPanelOpen=false;this.mainSize="large";this.activeTab=undefined;this.documentPanelSize="large";this.mainPanelExpanded=false;this.mainPanelHidden=false;this.tabView=window.innerWidth<z}get filterpanelSlot(){return this.host.querySelector("[slot='filterpanel']")}get overlaySlot(){return this.host.querySelector("[slot='overlay']")}documentPanelOpenWatcher(n){if(n){this._checkMainPanelVisibility()}}filterpanelOpenWatcher(n){var e,t;if(!this.filterpanelSlot){console.warn("slot 'filterpanel' has not been set")}if(n){(e=this.filterpanel)===null||e===void 0?void 0:e.showModal()}else{(t=this.filterpanel)===null||t===void 0?void 0:t.close()}}overlayOpenWatcher(n){var e,t;if(!this.overlaySlot){console.warn("slot 'overlay' has not been set")}if(n){(e=this.overlay)===null||e===void 0?void 0:e.showModal()}else{(t=this.overlay)===null||t===void 0?void 0:t.close()}}async _checkMainPanelVisibility(){if(this.mode==="vdk"&&this.documentPanelOpen&&!this.mainPanelHidden&&this.mapElement instanceof HTMLDivElement&&(this.mapElement.clientWidth<=B+w+w&&!this.mainPanelExpanded||this.mapElement.clientWidth<=w+w&&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.showModal()}if(this.overlayOpen&&this.overlaySlot){(e=this.overlay)===null||e===void 0?void 0:e.showModal()}if(this.mode==="vdk"&&this.mapElement instanceof HTMLDivElement){k.observe(this.mapElement)}}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener);if(this.mode==="vdk"&&this.mapElement){k.unobserve(this.mapElement)}}render(){const e=this.mode==="vdk"?l:r;return n(o,null,this.tabView&&n("nav",{key:"8ca85b7872476a2afdcb8d41d9d7d3d8fd9d130c",class:"dso-navbar"},n("ul",{key:"83195a76dbb5770f6a38fe8feec3c1f85a70f102",class:"dso-nav dso-nav-sub"},e.map((e=>n("li",{key:e,class:s({"dso-active":this.activeTab===e})},n("button",{type:"button",class:"dso-tertiary",onClick:()=>this.switchActiveTab(e)},d[e])))))),(!this.tabView||this.tabView&&(this.activeTab==="main"||this.activeTab==="search"))&&n(h,{key:"2b13de9e342ee70f4b6f225742f19f4a48387f49",mode:this.mode,tabView:this.tabView,mainSize:this.mainSize,documentPanelOpen:this.documentPanelOpen,mainPanelExpanded:this.mainPanelExpanded,mainPanelHidden:this.mainPanelHidden,shrinkMain:this.emitShrinkMain,expandMain:this.emitExpandMain,toggleMainPanel:this.toggleMainPanel,dsoMainSizeChangeAnimationEnd:this.dsoMainSizeChangeAnimationEnd}),n(u,{key:"c31ce856aacd1c762e4988187e71533c09a554f6",ref:n=>this.filterpanel=n,onApply:this.handleFilterpanelApply,onCancel:this.handleFilterpanelCancel}),(!this.tabView||this.tabView&&this.activeTab==="map")&&n("div",{key:"31e87407557de7024832b5cc57b8e4d0cd882e6f",class:"map",ref:n=>this.mapElement=n},n("slot",{key:"6ed2d2a928d67f175293c4b16dffc5f836a1beba",name:"map"})),(!this.tabView&&this.documentPanelOpen||this.tabView&&this.activeTab==="document")&&n(f,{key:"32d6858043486f36421a73ab0431cf49db6d0d8b",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),n(m,{key:"3e947e34d6693ecfef90f1606d5e8af37fd28efc",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"]}}};D.style=x;export{D as dso_viewer_grid};
+//# sourceMappingURL=p-3735286c.entry.js.map

package/dist/dso-toolkit/p-3735286c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["viewerGridVrkTabs","viewerGridVdkTabs","viewerGridTabLabelMap","main","map","document","search","viewerGridSizeLabelMap","small","medium","large","SizingButton","className","onClick","label","icon","h","type","class","SizingButtons","shrink","expand","size","panelLabel","placement","buttons","push","toLocaleLowerCase","DocumentPanel","tabView","panelSize","shrinkDocumentPanel","expandDocumentPanel","dsoDocumentPanelSizeChangeAnimationEnd","onTransitionEnd","e","propertyName","emit","currentSize","name","ViewerGridFilterpanelButtons","onApply","onCancel","Filterpanel","ref","id","preventDefault","MainPanel","mode","mainSize","documentPanelOpen","mainPanelExpanded","mainPanelHidden","shrinkMain","expandMain","toggleMainPanel","dsoMainSizeChangeAnimationEnd","clsx","compact","contracted","expanded","collapsed","invisible","Overlay","dsoCloseOverlay","viewerGridCss","DsoViewerGridStyle0","resizeObserver","ResizeObserver","debounce","entry","shadowRoot","target","getRootNode","ShadowRoot","isDsoViewerGridComponent","host","_checkMainPanelVisibility","element","tagName","buttonWidth","tabViewBreakpoint","minMapElementWidth","ViewerGrid","this","mediaCondition","switchActiveTab","tab","dsoActiveTabSwitch","emitShrinkMain","dsoMainSizeChange","nextSize","emitExpandMain","dsoDocumentPanelSizeChange","documentPanelSize","mapElement","HTMLDivElement","clientWidth","dsoMainPanelToggle","hide","changeListener","largeScreen","matches","handleFilterpanelApply","mouseEvent","dsoFilterpanelApply","originalEvent","handleFilterpanelCancel","dsoFilterpanelCancel","window","innerWidth","filterpanelSlot","querySelector","overlaySlot","documentPanelOpenWatcher","open","filterpanelOpenWatcher","console","warn","_a","filterpanel","showModal","_b","close","overlayOpenWatcher","overlay","connectedCallback","matchMedia","addEventListener","componentDidLoad","filterpanelOpen","overlayOpen","observe","disconnectedCallback","removeEventListener","unobserve","render","tabLabels","Fragment","key","activeTab"],"sources":["src/components/viewer-grid/viewer-grid.interfaces.ts","src/components/viewer-grid/components/sizing-buttons.tsx","src/components/viewer-grid/components/document-panel.tsx","src/components/viewer-grid/components/viewer-grid-filterpanel-buttons.tsx","src/components/viewer-grid/components/filterpanel.tsx","src/components/viewer-grid/components/main-panel.tsx","src/components/viewer-grid/components/overlay.tsx","src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n  currentSize: ViewerGridPanelSize;\r\n  nextSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridChangeSizeAnimationEndEvent {\r\n  currentSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelCancelEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelApplyEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridActiveTabSwitchEvent {\r\n  tab: ViewerGridTab;\r\n}\r\n\r\nexport interface ViewerGridMainExpandEvent {\r\n  expand: boolean;\r\n}\r\n\r\nexport interface ViewerGridMainToggleEvent {\r\n  hide: boolean;\r\n}\r\n\r\nexport type ViewerGridMode = \"vdk\" | \"vrk\";\r\n\r\nexport type ViewerGridPanelSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type ViewerGridLabelSizeMap = { [key in ViewerGridPanelSize]: string };\r\n\r\nexport const viewerGridVrkTabs = [\"main\", \"map\"] as const;\r\nexport type ViewerGridVrkTab = (typeof viewerGridVrkTabs)[number];\r\n\r\nexport const viewerGridVdkTabs = [\"search\", \"map\", \"document\"] as const;\r\nexport type ViewerGridVdkTab = (typeof viewerGridVdkTabs)[number];\r\n\r\nexport type ViewerGridTab = ViewerGridVrkTab | ViewerGridVdkTab;\r\n\r\nexport type ViewerGridTabLabelMap = { [key in ViewerGridTab]: string };\r\n\r\nexport const viewerGridTabLabelMap: ViewerGridTabLabelMap = {\r\n  main: \"Hoofdpaneel\",\r\n  map: \"Kaart\",\r\n  document: \"Document\",\r\n  search: \"Zoeken\",\r\n};\r\n\r\nexport const viewerGridSizeLabelMap: ViewerGridLabelSizeMap = {\r\n  small: \"smal\",\r\n  medium: \"middel\",\r\n  large: \"breed\",\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { ViewerGridPanelSize, viewerGridSizeLabelMap } from \"../viewer-grid.interfaces\";\r\n\r\ninterface SizingButtonProp {\r\n  className: string;\r\n  onClick: any;\r\n  label: string;\r\n  icon: \"chevron-left\" | \"chevron-right\";\r\n}\r\n\r\nconst SizingButton: FunctionalComponent<SizingButtonProp> = ({ className, onClick, label, icon }) => (\r\n  <button type=\"button\" class={className} onClick={onClick}>\r\n    <span class=\"sr-only\">{label}</span>\r\n    <dso-icon icon={icon}></dso-icon>\r\n  </button>\r\n);\r\n\r\ninterface SizingButtonProps {\r\n  panelLabel: string;\r\n  size: ViewerGridPanelSize;\r\n  expand: () => void;\r\n  shrink: () => void;\r\n  placement: \"left\" | \"right\";\r\n}\r\n\r\nexport const SizingButtons: FunctionalComponent<SizingButtonProps> = ({\r\n  shrink,\r\n  expand,\r\n  size,\r\n  panelLabel,\r\n  placement,\r\n}) => {\r\n  const buttons = [];\r\n\r\n  if (size !== \"small\") {\r\n    buttons.push(\r\n      <SizingButton\r\n        onClick={shrink}\r\n        label={`${panelLabel} smaller maken`}\r\n        icon={placement === \"right\" ? \"chevron-right\" : \"chevron-left\"}\r\n        className=\"shrink\"\r\n      />,\r\n    );\r\n  }\r\n\r\n  if (size !== \"large\") {\r\n    buttons.push(\r\n      <SizingButton\r\n        onClick={expand}\r\n        label={`${panelLabel} breder maken`}\r\n        icon={placement === \"right\" ? \"chevron-left\" : \"chevron-right\"}\r\n        className=\"expand\"\r\n      />,\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div class=\"sizing-buttons\">\r\n      <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n        Breedte {panelLabel.toLocaleLowerCase()}: {viewerGridSizeLabelMap[size]}\r\n      </span>\r\n      {buttons}\r\n    </div>\r\n  );\r\n};\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent } from \"../viewer-grid.interfaces\";\r\nimport { SizingButtons } from \"./sizing-buttons\";\r\n\r\nexport interface ViewerGridDocumentPanelProps {\r\n  tabView: boolean;\r\n  panelSize: ViewerGridPanelSize;\r\n  shrinkDocumentPanel: () => void;\r\n  expandDocumentPanel: () => void;\r\n  dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const DocumentPanel: FunctionalComponent<ViewerGridDocumentPanelProps> = ({\r\n  tabView,\r\n  panelSize,\r\n  shrinkDocumentPanel,\r\n  expandDocumentPanel,\r\n  dsoDocumentPanelSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class=\"dso-document-panel\"\r\n    onTransitionEnd={(e) => {\r\n      if (e.propertyName === \"flex-basis\") {\r\n        dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });\r\n      }\r\n    }}\r\n  >\r\n    {!tabView && (\r\n      <SizingButtons\r\n        panelLabel=\"Documentpaneel\"\r\n        size={panelSize}\r\n        expand={expandDocumentPanel}\r\n        shrink={shrinkDocumentPanel}\r\n        placement=\"right\"\r\n      />\r\n    )}\r\n    <div class=\"content\">\r\n      <slot name=\"document-panel\" />\r\n    </div>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelButtonsProps {\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelButtonsProps> = ({\r\n  onApply,\r\n  onCancel,\r\n}) => (\r\n  <div class=\"filterpanel-buttons\">\r\n    <button type=\"button\" class=\"cancel-button\" onClick={onCancel}>\r\n      <span>Annuleren</span>\r\n    </button>\r\n    <button type=\"button\" class=\"apply-button\" onClick={onApply}>\r\n      <span>Toepassen</span>\r\n      <dso-icon icon=\"chevron-right\"></dso-icon>\r\n    </button>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Filterpanel: FunctionalComponent<ViewerGridFilterpanelProps> = ({ ref, onApply, onCancel }) => (\r\n  <dialog\r\n    id=\"filterpanel\"\r\n    class=\"filterpanel\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      onCancel(e);\r\n    }}\r\n  >\r\n    <h1>Uw keuzes</h1>\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n    <slot name=\"filterpanel\" />\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n  </dialog>\r\n);\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent, ViewerGridMode } from \"../viewer-grid.interfaces\";\r\nimport { SizingButtons } from \"./sizing-buttons\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n  mode: ViewerGridMode;\r\n  tabView: boolean;\r\n  mainSize: ViewerGridPanelSize;\r\n  documentPanelOpen: boolean;\r\n  mainPanelExpanded: boolean;\r\n  mainPanelHidden: boolean;\r\n  shrinkMain: () => void;\r\n  expandMain: () => void;\r\n  toggleMainPanel: () => void;\r\n  dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n  mode,\r\n  tabView,\r\n  mainSize,\r\n  documentPanelOpen,\r\n  mainPanelExpanded,\r\n  mainPanelHidden,\r\n  shrinkMain,\r\n  expandMain,\r\n  toggleMainPanel,\r\n  dsoMainSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class={clsx(\"dso-main-panel\", {\r\n      compact: !tabView && documentPanelOpen && !mainPanelExpanded,\r\n      contracted: !tabView && !documentPanelOpen && !mainPanelExpanded && mode === \"vdk\",\r\n      expanded: !tabView && documentPanelOpen && mainPanelExpanded,\r\n      collapsed: mainPanelHidden,\r\n    })}\r\n    onTransitionEnd={(e) => {\r\n      if (e.propertyName === \"flex-basis\") {\r\n        dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });\r\n      }\r\n    }}\r\n  >\r\n    {!tabView &&\r\n      ((mode === \"vrk\" && (\r\n        <SizingButtons\r\n          panelLabel=\"Hoofdpaneel\"\r\n          size={mainSize}\r\n          expand={expandMain}\r\n          shrink={shrinkMain}\r\n          placement=\"left\"\r\n        />\r\n      )) ||\r\n        (mode === \"vdk\" && documentPanelOpen && (\r\n          <div class=\"toggle-button\">\r\n            <button type=\"button\" onClick={toggleMainPanel}>\r\n              <span class=\"sr-only\">Zoeken paneel {mainPanelHidden ? \"tonen\" : \"verbergen\"}</span>\r\n              <dso-icon icon={mainPanelHidden ? \"chevron-right\" : \"chevron-left\"}></dso-icon>\r\n            </button>\r\n          </div>\r\n        )))}\r\n    <div class={clsx(\"content\", { invisible: mainPanelHidden })}>\r\n      <slot name=\"main\" />\r\n    </div>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridOverlayProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  dsoCloseOverlay: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Overlay: FunctionalComponent<ViewerGridOverlayProps> = ({ ref, dsoCloseOverlay }) => (\r\n  <dialog\r\n    class=\"overlay\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      dsoCloseOverlay(e);\r\n    }}\r\n  >\r\n    <button type=\"button\" class=\"overlay-close-button\" onClick={dsoCloseOverlay}>\r\n      <dso-icon icon=\"times\"></dso-icon>\r\n      <span class=\"sr-only\">sluiten</span>\r\n    </button>\r\n    <slot name=\"overlay\" />\r\n  </dialog>\r\n);\r\n","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/navbar\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([mode=\"vdk\"]) {\r\n  .overlay {\r\n    block-size: calc(100% - units.$u4);\r\n    margin-block: units.$u2;\r\n    margin-inline: auto units.$u2;\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n\r\n.overlay-close-button {\r\n  position: absolute;\r\n  inset-block-start: units.$u1;\r\n  inset-inline-end: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.content.invisible {\r\n  visibility: hidden;\r\n}\r\n\r\n.dso-main-panel,\r\n.dso-document-panel {\r\n  .content {\r\n    block-size: 100%;\r\n    padding-block: 0;\r\n    padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n  }\r\n}\r\n\r\n.dso-main-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition:\r\n    flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n    min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  &.compact,\r\n  &.expanded {\r\n    &.collapsed {\r\n      inset-inline-start: -432px;\r\n    }\r\n  }\r\n\r\n  &.compact,\r\n  &.contracted {\r\n    flex-shrink: unset;\r\n    flex-grow: unset;\r\n    position: absolute;\r\n    transition: none;\r\n  }\r\n\r\n  &.expanded.collapsed {\r\n    position: absolute;\r\n    block-size: 100%;\r\n  }\r\n\r\n  .dso-filterblok-address {\r\n    font-weight: bold;\r\n    margin-block: units.$u1;\r\n    margin-inline: 0;\r\n  }\r\n\r\n  .sizing-buttons,\r\n  .toggle-button {\r\n    inset-inline-start: calc(100% + 1px);\r\n    transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n    padding-block: 0 units.$u1;\r\n    padding-inline: 0 units.$u1 * 0.5;\r\n\r\n    button {\r\n      border-end-end-radius: 4px;\r\n      border-start-end-radius: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-document-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition:\r\n    flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n    min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  .sizing-buttons {\r\n    inset-block-start: auto;\r\n    inset-block-end: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n    inset-inline-end: calc(100% + 1px);\r\n    transition: inset-inline-end core-viewer-grid-variables.$transition-time ease-in;\r\n    padding-block: 0 units.$u1;\r\n    padding-inline: units.$u1 * 0.5 0;\r\n\r\n    button {\r\n      border-end-start-radius: 4px;\r\n      border-start-start-radius: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n.sizing-buttons,\r\n.toggle-button {\r\n  overflow-x: hidden;\r\n  position: absolute;\r\n  inset-block-start: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n  inline-size: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n  z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n    @include button.map-focus();\r\n\r\n    border: 0;\r\n    padding: 8px;\r\n    border-radius: 0;\r\n    box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n    flex: 0 0 100%;\r\n    block-size: core-viewer-grid-variables.$resize-button-size;\r\n    min-inline-size: auto;\r\n    inline-size: core-viewer-grid-variables.$resize-button-size;\r\n\r\n    &:hover {\r\n      dso-icon {\r\n        color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.map {\r\n  block-size: 100%;\r\n  inline-size: 100%;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n.filterpanel,\r\n.overlay {\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  block-size: 100%;\r\n  margin-block: 0;\r\n  max-block-size: 100vh;\r\n  overflow-y: auto;\r\n  z-index: zindex.$viewer-grid-main-panel + 1;\r\n}\r\n\r\n.filterpanel {\r\n  padding-block: units.$u1;\r\n  padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n  inset-inline-start: 0;\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$filterpanel-inline-size) {\r\n    inline-size: 100vw;\r\n\r\n    &::before {\r\n      display: none !important;\r\n    }\r\n  }\r\n\r\n  h1 {\r\n    @include heading.base();\r\n    @include heading.margin-large();\r\n    @include heading.h1();\r\n  }\r\n}\r\n\r\n.overlay {\r\n  padding-block: units.$u5 units.$u1;\r\n  padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n  inset-inline-end: 0;\r\n  inline-size: core-viewer-grid-variables.$overlay-inline-size;\r\n\r\n  &::backdrop {\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n  }\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$overlay-inline-size) {\r\n    inline-size: 100vw;\r\n  }\r\n}\r\n\r\n.filterpanel-buttons {\r\n  text-align: end;\r\n\r\n  .cancel-button {\r\n    @include button.secondary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .apply-button {\r\n    @include button.primary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .cancel-button + .apply-button {\r\n    margin-inline-start: units.$u2;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-sm-min + units.$u5}) {\r\n  :host([main-size=\"small\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"small\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$small;\r\n    min-inline-size: 0;\r\n    max-inline-size: core-viewer-grid-variables.$small;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n      flex-basis: 100vw;\r\n      max-inline-size: 100vw;\r\n      min-inline-size: 0;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host([main-size=\"medium\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"medium\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$medium;\r\n    min-inline-size: core-viewer-grid-variables.$small;\r\n    max-inline-size: core-viewer-grid-variables.$medium;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n      flex-basis: 100vw;\r\n      max-inline-size: 100vw;\r\n      min-inline-size: core-viewer-grid-variables.$small;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host([main-size=\"large\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"large\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$large;\r\n    min-inline-size: core-viewer-grid-variables.$large-min;\r\n    max-inline-size: core-viewer-grid-variables.$large-max;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n      flex-basis: 100vw;\r\n      max-inline-size: 100vw;\r\n      min-inline-size: core-viewer-grid-variables.$large-min;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host {\r\n    display: flex;\r\n    block-size: 100vh;\r\n    overflow: hidden;\r\n    position: relative;\r\n\r\n    .dso-main-panel.compact,\r\n    .dso-main-panel.expanded {\r\n      flex-basis: unset;\r\n      min-inline-size: unset;\r\n      max-inline-size: unset;\r\n      inline-size: 440px;\r\n\r\n      .content {\r\n        block-size: auto;\r\n        overflow-y: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  .dso-main-panel,\r\n  .dso-document-panel {\r\n    box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n\r\n    .content {\r\n      overflow-y: auto;\r\n    }\r\n  }\r\n\r\n  .filterpanel {\r\n    box-shadow: 2px 0 5px colors.$grijs-60;\r\n    margin-inline: 0 auto;\r\n    max-inline-size: core-viewer-grid-variables.$filterpanel-max-inline-size;\r\n    inline-size: calc(100vw - 40px);\r\n\r\n    &::before {\r\n      content: \"\";\r\n      display: block;\r\n      position: fixed;\r\n      inset-block-start: 0;\r\n      inset-block-end: 0;\r\n      inset-inline-end: 0;\r\n      inset-inline-start: core-viewer-grid-variables.$filterpanel-max-inline-size;\r\n      background-color: rgba(0, 0, 0, 0.5);\r\n\r\n      @media screen and (max-width: #{core-viewer-grid-variables.$filterpanel-max-inline-size + 40px}) {\r\n        inset-inline-start: auto;\r\n        inline-size: 40px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .overlay {\r\n    box-shadow: -2px 0 5px colors.$grijs-60;\r\n    margin-inline: auto 0;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: #{media-query-breakpoints.$screen-xs-max + units.$u5 + 0.99}) {\r\n  @include navbar.root();\r\n\r\n  .dso-navbar {\r\n    padding-inline: units.$u2;\r\n  }\r\n\r\n  .dso-nav {\r\n    @include navbar.nav-border();\r\n\r\n    display: flex;\r\n    gap: units.$u2;\r\n    margin-block-start: 0;\r\n    inline-size: calc(100vw - units.$u4);\r\n  }\r\n\r\n  .dso-tertiary {\r\n    @include button.tertiary($modifiers: false);\r\n\r\n    font-weight: 300;\r\n  }\r\n\r\n  .filterpanel,\r\n  .overlay {\r\n    margin-inline: 0;\r\n    max-inline-size: 100vw;\r\n    inset-block-start: 0;\r\n    inline-size: 100vw;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DocumentPanel, Filterpanel, MainPanel, Overlay } from \"./components\";\r\nimport {\r\n  ViewerGridPanelSize,\r\n  ViewerGridVdkTab,\r\n  ViewerGridVrkTab,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  ViewerGridChangeSizeEvent,\r\n  ViewerGridCloseOverlayEvent,\r\n  ViewerGridFilterpanelApplyEvent,\r\n  ViewerGridFilterpanelCancelEvent,\r\n  ViewerGridMainExpandEvent,\r\n  ViewerGridMainToggleEvent,\r\n  ViewerGridActiveTabSwitchEvent,\r\n  ViewerGridMode,\r\n  viewerGridTabLabelMap,\r\n  viewerGridVdkTabs,\r\n  viewerGridVrkTabs,\r\n  ViewerGridTab,\r\n} from \"./viewer-grid.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(([entry]) => {\r\n    const shadowRoot = entry?.target.getRootNode();\r\n    if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {\r\n      shadowRoot.host._checkMainPanelVisibility();\r\n    }\r\n  }, 50),\r\n);\r\n\r\nfunction isDsoViewerGridComponent(element: Element): element is HTMLDsoViewerGridElement {\r\n  return element.tagName === \"DSO-VIEWER-GRID\";\r\n}\r\n\r\nconst buttonWidth = 40;\r\n\r\nconst tabViewBreakpoint = 768 + buttonWidth;\r\n\r\nconst minMapElementWidth = 440;\r\n\r\n/**\r\n * @slot main\r\n * @slot map\r\n * @slot filterpanel\r\n * @slot overlay\r\n * @slot document-panel - VDK only\r\n */\r\n@Component({\r\n  tag: \"dso-viewer-grid\",\r\n  styleUrl: \"viewer-grid.scss\",\r\n  shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n  private mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;\r\n\r\n  private mapElement?: HTMLDivElement;\r\n\r\n  /**\r\n   * VRK or VDK implementation.\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode: ViewerGridMode = \"vrk\";\r\n\r\n  /**\r\n   * Set to true when filterpanel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterpanelOpen = false;\r\n\r\n  /**\r\n   * Set to true when overlay should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  overlayOpen = false;\r\n\r\n  /**\r\n   * **VDK only.** Set to true when document panel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  documentPanelOpen = false;\r\n\r\n  /**\r\n   * Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  mainSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * Set active tab in tab view.\r\n   */\r\n  @Prop()\r\n  activeTab?: ViewerGridVdkTab | ViewerGridVrkTab;\r\n\r\n  /**\r\n   * **VDK only.** Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  documentPanelSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * **VDK only.** Set to show main panel expanded.\r\n   */\r\n  @Prop()\r\n  mainPanelExpanded = false;\r\n\r\n  /**\r\n   * **VDK only.** Set to hide the main panel.\r\n   */\r\n  @Prop()\r\n  mainPanelHidden = false;\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n  /**\r\n   * Emitted when user cancels filterpanel.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelCancel!: EventEmitter<ViewerGridFilterpanelCancelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelApply!: EventEmitter<ViewerGridFilterpanelApplyEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoActiveTabSwitch!: EventEmitter<ViewerGridActiveTabSwitchEvent>;\r\n\r\n  /**\r\n   * Emitted on interaction with sizing buttons.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  /**\r\n   * Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted on interaction with sizing buttons.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted when the user wants to expand the main panel.\r\n   */\r\n  @Event()\r\n  dsoMainPanelExpand!: EventEmitter<ViewerGridMainExpandEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted when the user toggles the visibility of the main panel.\r\n   *\r\n   * Also emitted by scripting when the panels do not fit anymore.\r\n   */\r\n  @Event()\r\n  dsoMainPanelToggle!: EventEmitter<ViewerGridMainToggleEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoViewerGridElement;\r\n\r\n  @State()\r\n  tabView = window.innerWidth < tabViewBreakpoint;\r\n\r\n  private filterpanel: HTMLDialogElement | undefined;\r\n\r\n  private get filterpanelSlot() {\r\n    return this.host.querySelector(\"[slot='filterpanel']\");\r\n  }\r\n\r\n  private get overlaySlot() {\r\n    return this.host.querySelector(\"[slot='overlay']\");\r\n  }\r\n\r\n  private overlay: HTMLDialogElement | undefined;\r\n\r\n  @Watch(\"documentPanelOpen\")\r\n  documentPanelOpenWatcher(open: boolean) {\r\n    if (open) {\r\n      this._checkMainPanelVisibility();\r\n    }\r\n  }\r\n\r\n  @Watch(\"filterpanelOpen\")\r\n  filterpanelOpenWatcher(open: boolean) {\r\n    if (!this.filterpanelSlot) {\r\n      console.warn(\"slot 'filterpanel' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.filterpanel?.showModal();\r\n    } else {\r\n      this.filterpanel?.close();\r\n    }\r\n  }\r\n\r\n  @Watch(\"overlayOpen\")\r\n  overlayOpenWatcher(open: boolean) {\r\n    if (!this.overlaySlot) {\r\n      console.warn(\"slot 'overlay' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.overlay?.showModal();\r\n    } else {\r\n      this.overlay?.close();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _checkMainPanelVisibility() {\r\n    if (\r\n      this.mode === \"vdk\" &&\r\n      this.documentPanelOpen &&\r\n      !this.mainPanelHidden &&\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) ||\r\n        (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))\r\n    ) {\r\n      this.dsoMainPanelToggle.emit({\r\n        hide: true,\r\n      });\r\n    }\r\n  }\r\n\r\n  private switchActiveTab = (tab: ViewerGridTab) => {\r\n    this.dsoActiveTabSwitch.emit({\r\n      tab,\r\n    });\r\n  };\r\n\r\n  private emitShrinkMain = () => {\r\n    this.dsoMainSizeChange.emit({\r\n      currentSize: this.mainSize,\r\n      nextSize: this.mainSize === \"large\" ? \"medium\" : \"small\",\r\n    });\r\n  };\r\n\r\n  private emitExpandMain = () => {\r\n    this.dsoMainSizeChange.emit({\r\n      currentSize: this.mainSize,\r\n      nextSize: this.mainSize === \"small\" ? \"medium\" : \"large\",\r\n    });\r\n  };\r\n\r\n  private shrinkDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: this.documentPanelSize === \"large\" ? \"medium\" : \"small\",\r\n    });\r\n  };\r\n\r\n  private expandDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: this.documentPanelSize === \"small\" ? \"medium\" : \"large\",\r\n    });\r\n  };\r\n\r\n  private toggleMainPanel = () => {\r\n    if (\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth\r\n    ) {\r\n      this.mainSize = \"small\";\r\n    }\r\n\r\n    this.dsoMainPanelToggle.emit({\r\n      hide: !this.mainPanelHidden,\r\n    });\r\n  };\r\n\r\n  private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n  private handleFilterpanelApply = (mouseEvent: MouseEvent | Event) => {\r\n    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n  };\r\n\r\n  private handleFilterpanelCancel = (mouseEvent: MouseEvent | Event) => {\r\n    this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n  };\r\n\r\n  connectedCallback() {\r\n    window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.filterpanelOpen && this.filterpanelSlot) {\r\n      this.filterpanel?.showModal();\r\n    }\r\n\r\n    if (this.overlayOpen && this.overlaySlot) {\r\n      this.overlay?.showModal();\r\n    }\r\n\r\n    if (this.mode === \"vdk\" && this.mapElement instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.mapElement);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n\r\n    if (this.mode === \"vdk\" && this.mapElement) {\r\n      resizeObserver.unobserve(this.mapElement);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const tabLabels = this.mode === \"vdk\" ? viewerGridVdkTabs : viewerGridVrkTabs;\r\n\r\n    return (\r\n      <>\r\n        {this.tabView && (\r\n          <nav class=\"dso-navbar\">\r\n            <ul class=\"dso-nav dso-nav-sub\">\r\n              {tabLabels.map((tab) => (\r\n                <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n                  <button type=\"button\" class=\"dso-tertiary\" onClick={() => this.switchActiveTab(tab)}>\r\n                    {viewerGridTabLabelMap[tab]}\r\n                  </button>\r\n                </li>\r\n              ))}\r\n            </ul>\r\n          </nav>\r\n        )}\r\n        {(!this.tabView || (this.tabView && (this.activeTab === \"main\" || this.activeTab === \"search\"))) && (\r\n          <MainPanel\r\n            mode={this.mode}\r\n            tabView={this.tabView}\r\n            mainSize={this.mainSize}\r\n            documentPanelOpen={this.documentPanelOpen}\r\n            mainPanelExpanded={this.mainPanelExpanded}\r\n            mainPanelHidden={this.mainPanelHidden}\r\n            shrinkMain={this.emitShrinkMain}\r\n            expandMain={this.emitExpandMain}\r\n            toggleMainPanel={this.toggleMainPanel}\r\n            dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n          ></MainPanel>\r\n        )}\r\n        <Filterpanel\r\n          ref={(element) => (this.filterpanel = element)}\r\n          onApply={this.handleFilterpanelApply}\r\n          onCancel={this.handleFilterpanelCancel}\r\n        ></Filterpanel>\r\n        {(!this.tabView || (this.tabView && this.activeTab === \"map\")) && (\r\n          <div class=\"map\" ref={(element) => (this.mapElement = element)}>\r\n            <slot name=\"map\" />\r\n          </div>\r\n        )}\r\n        {((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === \"document\")) && (\r\n          <DocumentPanel\r\n            tabView={this.tabView}\r\n            panelSize={this.documentPanelSize}\r\n            shrinkDocumentPanel={this.shrinkDocumentPanel}\r\n            expandDocumentPanel={this.expandDocumentPanel}\r\n            dsoDocumentPanelSizeChangeAnimationEnd={this.dsoDocumentPanelSizeChangeAnimationEnd}\r\n          ></DocumentPanel>\r\n        )}\r\n        <Overlay\r\n          ref={(element) => (this.overlay = element)}\r\n          dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n        ></Overlay>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}