@dso-toolkit/core 62.21.0 → 62.22.0

package/dist/dso-toolkit/{p-64d88436.entry.js → p-551af248.entry.js}

@@ -1,2 +1,2 @@
-import{r as n,c as t,h as o,H as e}from"./p-701648d3.js";const i=":host {\n  background-color: #fff;\n  border: 1px solid #ccc;\n  bottom: 0;\n  display: block;\n  font-family: Asap, sans-serif;\n  position: absolute;\n  top: 0;\n  left: 100%;\n  transition: transform 300ms ease;\n  width: 300px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([open]) {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n  transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n  display: none;\n}\n:host([open]) .zoom-buttons {\n  top: 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.toggle-visibility-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  font-weight: 600;\n  margin-right: 16px;\n  padding: 8px 16px;\n  white-space: nowrap;\n  position: absolute;\n  right: calc(100% + 56px);\n  top: 16px;\n}\n.toggle-visibility-button:focus, .toggle-visibility-button:focus-visible {\n  outline-offset: 2px;\n}\n.toggle-visibility-button:active {\n  outline: 0;\n}\n.toggle-visibility-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.toggle-visibility-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.toggle-visibility-button[disabled], .toggle-visibility-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.toggle-visibility-button.dso-small {\n  line-height: 1rem;\n}\n.toggle-visibility-button.dso-small dso-icon,\n.toggle-visibility-button.dso-small svg.di, .toggle-visibility-button.dso-small.extern::after, .toggle-visibility-button.dso-small.download::after, .toggle-visibility-button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button dso-icon,\n.toggle-visibility-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.toggle-visibility-button span + dso-icon,\n.toggle-visibility-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.toggle-visibility-button.dso-spinner-left[disabled], .toggle-visibility-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.toggle-visibility-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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.toggle-visibility-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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.toggle-visibility-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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n\n.zoom-buttons {\n  border-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  display: flex;\n  flex-wrap: wrap;\n  flex: 0 0;\n  position: absolute;\n  right: calc(100% + 16px);\n  top: 16px;\n}\n.zoom-buttons button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.zoom-buttons button:focus, .zoom-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.zoom-buttons button:active {\n  outline: 0;\n}\n.zoom-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.zoom-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.zoom-buttons button[disabled], .zoom-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.zoom-buttons button.dso-small {\n  line-height: 1rem;\n}\n.zoom-buttons button.dso-small dso-icon,\n.zoom-buttons button.dso-small svg.di, .zoom-buttons button.dso-small.extern::after, .zoom-buttons button.dso-small.download::after, .zoom-buttons button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.zoom-buttons button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.zoom-buttons button.dso-spinner-left[disabled], .zoom-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.zoom-buttons 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.zoom-buttons 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.zoom-buttons 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.zoom-buttons button + button {\n  border-radius: 0;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-top: 1px solid #ccc;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  padding: 0;\n  position: absolute;\n  right: 16px;\n  top: 16px;\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[disabled] {\n  color: #afcf9d;\n}\n.close-button[disabled].dso-spinner-left, .close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.close-button:not([disabled]):active {\n  color: #173521;\n}\n.close-button.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.close-button.dso-truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\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  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\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  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\nsection:not([hidden]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\nheader,\n.content {\n  padding: 16px;\n}\n\nheader {\n  border-bottom: 1px solid #ccc;\n  flex-grow: 0;\n  position: relative;\n}\nheader h2 {\n  color: #275937;\n  font-family: \"Asap\", sans-serif;\n  line-height: 1;\n  margin: 0;\n}\n\n@media screen and (max-width: 767px) {\n  .toggle-visibility-button {\n    height: 40px;\n    margin-right: 0;\n    min-width: auto;\n    right: calc(100% + 16px);\n    width: 40px;\n  }\n  .toggle-visibility-button dso-icon {\n    margin-right: 0;\n  }\n  .toggle-visibility-button span {\n    visibility: hidden;\n  }\n  .zoom-buttons {\n    top: 72px;\n  }\n}";const r=i;var s=undefined&&undefined.__classPrivateFieldGet||function(n,t,o,e){if(o==="a"&&!e)throw new TypeError("Private accessor was defined without a getter");if(typeof t==="function"?n!==t||!e:!t.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return o==="m"?e:o==="a"?e.call(n):e?e.value:t.get(n)};var a=undefined&&undefined.__classPrivateFieldSet||function(n,t,o,e,i){if(e==="m")throw new TypeError("Private method is not writable");if(e==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof t==="function"?n!==t||!i:!t.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return e==="a"?i.call(n,o):i?i.value=o:t.set(n,o),o};var l,d;const f=300;const c=class{constructor(o){n(this,o);this.dsoZoomIn=t(this,"dsoZoomIn",7);this.dsoZoomOut=t(this,"dsoZoomOut",7);this.dsoToggle=t(this,"dsoToggle",7);this.panelTitle="Kaartlagen";l.set(this,void 0);d.set(this,void 0);this.open=false;this.disableZoom=undefined;this.hideContent=!this.open}watchOpen(n){if(n){this.hideContent=false;setTimeout((()=>{var n;return(n=s(this,l,"f"))===null||n===void 0?void 0:n.focus()}),f)}else{setTimeout((()=>{var n;this.hideContent=true;(n=s(this,d,"f"))===null||n===void 0?void 0:n.focus()}),f)}}async toggleVisibility(n){this.open=!this.open;this.dsoToggle.emit({originalEvent:n,open:this.open})}render(){return o(e,{key:"6950f24986448fe7b9ad55e63a27c3435582078f"},o("button",{key:"5b1fd3a10690d47db03b4e80fe30beffc4ab9658",type:"button",id:"toggle-visibility-button",class:"toggle-visibility-button",onClick:n=>this.toggleVisibility(n),ref:n=>a(this,d,n,"f")},o("dso-icon",{key:"364f0679306f247a5c6a589ad0885b014e0be5f5",icon:"layers"}),o("span",{key:"5409d0555edd3e7406b215fb430c9a4d71943460"},"Kaartlagen")),o("div",{key:"0e9db2dca0b5065f86926232138933b402eb73df",class:"zoom-buttons"},o("button",{key:"d8bb302ba4d9a3719c6525cea58da8cc98620e34",type:"button",onClick:n=>this.dsoZoomIn.emit(n),disabled:this.disableZoom==="in"||this.disableZoom==="both"},o("span",{key:"3bdb813abd79cd05a2290068d0bd76410679f293"},"Zoom in"),o("dso-icon",{key:"853a2cf598baf24e6d152611fe9b663a674db6e8",icon:"plus"})),o("button",{key:"909320d8ecd4edb12d0bb33e90300f36a2e49c6c",type:"button",onClick:n=>this.dsoZoomOut.emit(n),disabled:this.disableZoom==="out"||this.disableZoom==="both"},o("span",{key:"2b83cf1a9c8c869684c166f2faa5eaebaef965e4"},"Zoom uit"),o("dso-icon",{key:"03145fbd10e9fa812984e0ec30bc36e015df61d7",icon:"minus"}))),o("section",{key:"3c2ade46c0f4d60f2e8cd983e549206ea8f71a62",hidden:this.hideContent},o("header",{key:"80e7a2df9559af79525e8d5feb128a906c44c102"},o("h2",{key:"1b68c5f1edc27316bd88aecdfb087f4b3d20ef94"},this.panelTitle),o("button",{key:"9b99c5cd792825d6fcf1612394a762a4bb5780d3",type:"button",class:"close-button",onClick:n=>this.toggleVisibility(n),ref:n=>a(this,l,n,"f")},o("span",{key:"218e01f23755c5ced6fc97fdbee6f4c5e53fb993"},"Verberg paneel ",this.panelTitle),o("dso-icon",{key:"9c296759f7088b175c64883fa6dfc489d66b4392",icon:"times"}))),o("dso-scrollable",{key:"9f1426e147a8a9904e55d4280194ae256c842d5d"},o("div",{key:"2f9d201a4e1d20265297de0c7b9431ba368fff0a",class:"content"},o("slot",{key:"6ad26388a3c216ff78395567597ddb93320f1223"})))))}static get watchers(){return{open:["watchOpen"]}}};l=new WeakMap,d=new WeakMap;c.style=r;export{c as dso_map_controls};
-//# sourceMappingURL=p-64d88436.entry.js.map
+import{r as n,c as t,h as o,H as e}from"./p-e1b4d45b.js";const i=":host {\n  background-color: #fff;\n  border: 1px solid #ccc;\n  bottom: 0;\n  display: block;\n  font-family: Asap, sans-serif;\n  position: absolute;\n  top: 0;\n  left: 100%;\n  transition: transform 300ms ease;\n  width: 300px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([open]) {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n  transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n  display: none;\n}\n:host([open]) .zoom-buttons {\n  top: 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.toggle-visibility-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  font-weight: 600;\n  margin-right: 16px;\n  padding: 8px 16px;\n  white-space: nowrap;\n  position: absolute;\n  right: calc(100% + 56px);\n  top: 16px;\n}\n.toggle-visibility-button:focus, .toggle-visibility-button:focus-visible {\n  outline-offset: 2px;\n}\n.toggle-visibility-button:active {\n  outline: 0;\n}\n.toggle-visibility-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.toggle-visibility-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.toggle-visibility-button[disabled], .toggle-visibility-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.toggle-visibility-button.dso-small {\n  line-height: 1rem;\n}\n.toggle-visibility-button.dso-small dso-icon,\n.toggle-visibility-button.dso-small svg.di, .toggle-visibility-button.dso-small.extern::after, .toggle-visibility-button.dso-small.download::after, .toggle-visibility-button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button dso-icon,\n.toggle-visibility-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.toggle-visibility-button span + dso-icon,\n.toggle-visibility-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.toggle-visibility-button.dso-spinner-left[disabled], .toggle-visibility-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.toggle-visibility-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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.toggle-visibility-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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.toggle-visibility-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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n\n.zoom-buttons {\n  border-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  display: flex;\n  flex-wrap: wrap;\n  flex: 0 0;\n  position: absolute;\n  right: calc(100% + 16px);\n  top: 16px;\n}\n.zoom-buttons button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.zoom-buttons button:focus, .zoom-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.zoom-buttons button:active {\n  outline: 0;\n}\n.zoom-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.zoom-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.zoom-buttons button[disabled], .zoom-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.zoom-buttons button.dso-small {\n  line-height: 1rem;\n}\n.zoom-buttons button.dso-small dso-icon,\n.zoom-buttons button.dso-small svg.di, .zoom-buttons button.dso-small.extern::after, .zoom-buttons button.dso-small.download::after, .zoom-buttons button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.zoom-buttons button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.zoom-buttons button.dso-spinner-left[disabled], .zoom-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.zoom-buttons 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.zoom-buttons 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.zoom-buttons 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.zoom-buttons button + button {\n  border-radius: 0;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-top: 1px solid #ccc;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  padding: 0;\n  position: absolute;\n  right: 16px;\n  top: 16px;\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[disabled] {\n  color: #afcf9d;\n}\n.close-button[disabled].dso-spinner-left, .close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.close-button:not([disabled]):active {\n  color: #173521;\n}\n.close-button.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.close-button.dso-truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\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  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\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  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\nsection:not([hidden]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\nheader,\n.content {\n  padding: 16px;\n}\n\nheader {\n  border-bottom: 1px solid #ccc;\n  flex-grow: 0;\n  position: relative;\n}\nheader h2 {\n  color: #275937;\n  font-family: \"Asap\", sans-serif;\n  line-height: 1;\n  margin: 0;\n}\n\n@media screen and (max-width: 767px) {\n  .toggle-visibility-button {\n    height: 40px;\n    margin-right: 0;\n    min-width: auto;\n    right: calc(100% + 16px);\n    width: 40px;\n  }\n  .toggle-visibility-button dso-icon {\n    margin-right: 0;\n  }\n  .toggle-visibility-button span {\n    visibility: hidden;\n  }\n  .zoom-buttons {\n    top: 72px;\n  }\n}";const r=i;var s=undefined&&undefined.__classPrivateFieldGet||function(n,t,o,e){if(o==="a"&&!e)throw new TypeError("Private accessor was defined without a getter");if(typeof t==="function"?n!==t||!e:!t.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return o==="m"?e:o==="a"?e.call(n):e?e.value:t.get(n)};var a=undefined&&undefined.__classPrivateFieldSet||function(n,t,o,e,i){if(e==="m")throw new TypeError("Private method is not writable");if(e==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof t==="function"?n!==t||!i:!t.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return e==="a"?i.call(n,o):i?i.value=o:t.set(n,o),o};var l,d;const c=300;const f=class{constructor(o){n(this,o);this.dsoZoomIn=t(this,"dsoZoomIn",7);this.dsoZoomOut=t(this,"dsoZoomOut",7);this.dsoToggle=t(this,"dsoToggle",7);this.panelTitle="Kaartlagen";l.set(this,void 0);d.set(this,void 0);this.open=false;this.disableZoom=undefined;this.hideContent=!this.open}watchOpen(n){if(n){this.hideContent=false;setTimeout((()=>{var n;return(n=s(this,l,"f"))===null||n===void 0?void 0:n.focus()}),c)}else{setTimeout((()=>{var n;this.hideContent=true;(n=s(this,d,"f"))===null||n===void 0?void 0:n.focus()}),c)}}async toggleVisibility(n){this.open=!this.open;this.dsoToggle.emit({originalEvent:n,open:this.open})}render(){return o(e,{key:"3f7ce2dd7cc11f02be90577764970adf85172967"},o("button",{key:"a1c1a07a05ff312f23ed8b6aa02ec02d8b2d34e2",type:"button",id:"toggle-visibility-button",class:"toggle-visibility-button",onClick:n=>this.toggleVisibility(n),ref:n=>a(this,d,n,"f")},o("dso-icon",{key:"e4da397ae7087125ea14e170813be8865a8348dc",icon:"layers"}),o("span",{key:"2fca94571636536e03a555f757104026efeec391"},"Kaartlagen")),o("div",{key:"71fb31b517376f797914b8de132aac888ec63a23",class:"zoom-buttons"},o("button",{key:"44c2cc9aa939657400638d86d163f26eff6a9d0a",type:"button",onClick:n=>this.dsoZoomIn.emit(n),disabled:this.disableZoom==="in"||this.disableZoom==="both"},o("span",{key:"c5ab82f953c0a432e0a7f57a65abc524534da557"},"Zoom in"),o("dso-icon",{key:"fd575a867cbf47779083c96f5fce23784a18dfc1",icon:"plus"})),o("button",{key:"0dd2fbc677a7c411b64418be261a46cf61e12dcd",type:"button",onClick:n=>this.dsoZoomOut.emit(n),disabled:this.disableZoom==="out"||this.disableZoom==="both"},o("span",{key:"6b5292a0cc6055db0e9ec5cbcbc96c4cdf052be7"},"Zoom uit"),o("dso-icon",{key:"09d6f4b412ac2c2abd8bdcf9f9e41333c383cb5b",icon:"minus"}))),o("section",{key:"1e881bfac904ed3b423111cc6ee38ad448f47226",hidden:this.hideContent},o("header",{key:"6674658c959a06baea1e9a352f3390877e2ecc24"},o("h2",{key:"e69abd4f06d843d46a0315cf0f9af3b06e4b84fc"},this.panelTitle),o("button",{key:"62a73366df821988b470161bab7bd898a93487b7",type:"button",class:"close-button",onClick:n=>this.toggleVisibility(n),ref:n=>a(this,l,n,"f")},o("span",{key:"b38bf7e6d2f44cc94605d177ec69df31650079de"},"Verberg paneel ",this.panelTitle),o("dso-icon",{key:"a272d1b7cace86845713c69186e86066a212998d",icon:"times"}))),o("dso-scrollable",{key:"2eceb3fffae1d00e66ff289ddf7252a289427ed1"},o("div",{key:"dec6be8e301f0ce247086c01f608b240fc56509f",class:"content"},o("slot",{key:"97d929c30fc07e77ce586841a71f0a52e347bcc6"})))))}static get watchers(){return{open:["watchOpen"]}}};l=new WeakMap,d=new WeakMap;f.style=r;export{f as dso_map_controls};
+//# sourceMappingURL=p-551af248.entry.js.map

package/dist/dso-toolkit/{p-bcc19bae.entry.js → p-60ee6373.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,c as i,h as s,H as e}from"./p-701648d3.js";import{c as t}from"./p-8a1a6e56.js";const n=":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{background-color:transparent;color:#39870c;border:0;margin-left:8px;padding:0;cursor:pointer;vertical-align:top}button.dso-info-secondary{color:#666}dso-icon{display:block}";const a=n;const r=class{constructor(s){o(this,s);this.dsoToggle=i(this,"dsoToggle",7);this.active=undefined;this.hover=false;this.secondary=undefined;this.label="Toelichting bij optie"}async setFocus(){var o;(o=this.button)===null||o===void 0?void 0:o.focus()}handleToggle(o){this.active=!this.active;this.dsoToggle.emit({originalEvent:o,active:this.active})}render(){return s(e,{key:"a9cd435470f76f47e46ec94746158b8b94ba151d",onMouseenter:()=>this.hover=true,onMouseleave:()=>this.hover=false},s("button",{key:"84de4a37a8880ec1328a8d176b8a44cf53cd24fe",type:"button",class:t({"dso-open":!!this.active,"dso-info-secondary":!!this.secondary}),"aria-expanded":typeof this.active==="boolean"?this.active.toString():undefined,onClick:o=>this.handleToggle(o),ref:o=>this.button=o},s("dso-icon",{key:"4386441800c5cdebc81fbb55a036231b3322cba3",icon:this.active||this.hover?"info-active":"info"}),s("span",{key:"f7d894eba3425b76d12265eb00cb181f41a221ff",class:"sr-only"},this.label)))}};r.style=a;export{r as dso_info_button};
-//# sourceMappingURL=p-bcc19bae.entry.js.map
+import{r as o,c as e,h as i,H as s}from"./p-e1b4d45b.js";import{c as t}from"./p-8a1a6e56.js";const n=":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{background-color:transparent;color:#39870c;border:0;margin-left:8px;padding:0;cursor:pointer;vertical-align:top}button.dso-info-secondary{color:#666}dso-icon{display:block}";const a=n;const r=class{constructor(i){o(this,i);this.dsoToggle=e(this,"dsoToggle",7);this.active=undefined;this.hover=false;this.secondary=undefined;this.label="Toelichting bij optie"}async setFocus(){var o;(o=this.button)===null||o===void 0?void 0:o.focus()}handleToggle(o){this.active=!this.active;this.dsoToggle.emit({originalEvent:o,active:this.active})}render(){return i(s,{key:"a9cd435470f76f47e46ec94746158b8b94ba151d",onMouseenter:()=>this.hover=true,onMouseleave:()=>this.hover=false},i("button",{key:"84de4a37a8880ec1328a8d176b8a44cf53cd24fe",type:"button",class:t({"dso-open":!!this.active,"dso-info-secondary":!!this.secondary}),"aria-expanded":typeof this.active==="boolean"?this.active.toString():undefined,onClick:o=>this.handleToggle(o),ref:o=>this.button=o},i("dso-icon",{key:"4386441800c5cdebc81fbb55a036231b3322cba3",icon:this.active||this.hover?"info-active":"info"}),i("span",{key:"f7d894eba3425b76d12265eb00cb181f41a221ff",class:"sr-only"},this.label)))}};r.style=a;export{r as dso_info_button};
+//# sourceMappingURL=p-60ee6373.entry.js.map

package/dist/dso-toolkit/{p-6e7dcc0e.entry.js → p-65c71684.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as o,f as a,h as n,H as r,a as t}from"./p-701648d3.js";import{i}from"./p-2d694112.js";const s=e=>e instanceof HTMLButtonElement||e instanceof HTMLAnchorElement||e instanceof HTMLInputElement||e.tagName.startsWith("DSO-TOGGLETIP");const d=':host .dso-card-selectable,:host .dso-card-image{grid-row:span 2}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;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;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;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;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")}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host .dso-card-heading{align-items:center;display:flex;margin-bottom:8px}@media screen and (max-width: 480px){:host .dso-card-heading{flex-wrap:wrap}}:host .dso-card-image{margin-right:8px}:host(:hover) .dso-card-heading a{color:#275937;text-decoration:underline}.dso-card-heading a{text-decoration:none}.heading-anchor{color:#275937;display:flex}.heading-anchor:visited{color:#275937}.heading-anchor dso-icon{flex-shrink:0}.heading-anchor .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}';const c=d;const l=class{constructor(a){e(this,a);this.dsoCardClicked=o(this,"dsoCardClicked",7);this.clickable=true;this.imageShape="normal";this.href=undefined;this.mode=undefined}connectedCallback(){this.mutationObserver=new MutationObserver((()=>a(this.host)));this.mutationObserver.observe(this.host,{attributes:true,childList:true})}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect();delete this.mutationObserver}clickEventHandler(e){if(!(e.target instanceof HTMLElement)||!this.clickable&&!this.href){return}let o=e.target;while(o!==this.host&&o!==null){if(s(o)||o===null){return}if(o.parentNode instanceof ShadowRoot&&o.parentNode.host instanceof HTMLElement){o=o.parentNode.host}else{o=o.parentElement}}return this.dsoCardClicked.emit({originalEvent:e,isModifiedEvent:i(e)})}get selectableSlottedElement(){return this.host.querySelector("[slot='selectable']")}get imageSlottedElement(){return this.host.querySelector("[slot='image']")}get headingSlottedElement(){return this.host.querySelector("[slot='heading']")}get interactionsSlottedElement(){return this.host.querySelector("[slot='interactions']")}render(){const e=this.selectableSlottedElement!==null;const o=this.imageSlottedElement!==null;return n(r,{key:"b9cc1a47bc39e6e2011ba6412436ab855d9819cf",onClick:e=>this.clickEventHandler(e),"is-selectable":e,"has-image":o},n("div",{key:"b8a059c5b2cc2f29392e0311fcbb3a02b1b39580",class:"dso-card-selectable",hidden:!e},n("slot",{key:"304c0dad6a73ebb2ad12f7c4e0a807d53c7ca660",name:"selectable"})),n("div",{key:"3e976d9e8eb0fbc3578a8fc6f32687f97ca6fc69",class:"dso-card-image",hidden:!o},n("slot",{key:"e10f2acff35dcd3316f0cb14575d5d2e4ab86c95",name:"image"})),n("div",{key:"c7d437cc6d54eab8e9d6ad45411230498b243466",class:"dso-card-heading"},this.headingSlottedElement instanceof HTMLAnchorElement||!this.href?n("slot",{name:"heading"}):(!this.mode||!["download","extern"].includes(this.mode))&&n("a",{href:this.href,class:"heading-anchor"},n("slot",{name:"heading"}),n("dso-icon",{icon:"chevron-right"}))||this.mode==="extern"&&n("a",{href:this.href,class:"heading-anchor",target:"_blank",rel:"noopener noreferrer"},n("slot",{name:"heading"}),n("dso-icon",{icon:"external-link"}),n("span",{class:"sr-only"},"(Opent andere website in nieuw tabblad)"))||this.mode==="download"&&n("a",{href:this.href,class:"heading-anchor"},n("slot",{name:"heading"}),n("dso-icon",{icon:"download"})),this.interactionsSlottedElement!==null&&n("slot",{key:"f318d02fe89a6aa2a9377e2f32d72726c848c42f",name:"interactions"})),n("div",{key:"7b725b7edeee93b237352eff09ae2574647b9a3b",class:"dso-card-content"},n("slot",{key:"9f855efe124e2a273b1ecb465b27bc7e01ac10e9",name:"content"})))}get host(){return t(this)}};l.style=c;export{l as dso_card};
-//# sourceMappingURL=p-6e7dcc0e.entry.js.map
+import{r as e,c as o,f as a,h as n,H as r,a as t}from"./p-e1b4d45b.js";import{i}from"./p-2d694112.js";const s=e=>e instanceof HTMLButtonElement||e instanceof HTMLAnchorElement||e instanceof HTMLInputElement||e.tagName.startsWith("DSO-TOGGLETIP");const d=':host .dso-card-selectable,:host .dso-card-image{grid-row:span 2}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;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;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;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;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")}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host .dso-card-heading{align-items:center;display:flex;margin-bottom:8px}@media screen and (max-width: 480px){:host .dso-card-heading{flex-wrap:wrap}}:host .dso-card-image{margin-right:8px}:host(:hover) .dso-card-heading a{color:#275937;text-decoration:underline}.dso-card-heading a{text-decoration:none}.heading-anchor{color:#275937;display:flex}.heading-anchor:visited{color:#275937}.heading-anchor dso-icon{flex-shrink:0}.heading-anchor .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}';const c=d;const l=class{constructor(a){e(this,a);this.dsoCardClicked=o(this,"dsoCardClicked",7);this.clickable=true;this.imageShape="normal";this.href=undefined;this.mode=undefined}connectedCallback(){this.mutationObserver=new MutationObserver((()=>a(this.host)));this.mutationObserver.observe(this.host,{attributes:true,childList:true})}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect();delete this.mutationObserver}clickEventHandler(e){if(!(e.target instanceof HTMLElement)||!this.clickable&&!this.href){return}let o=e.target;while(o!==this.host&&o!==null){if(s(o)||o===null){return}if(o.parentNode instanceof ShadowRoot&&o.parentNode.host instanceof HTMLElement){o=o.parentNode.host}else{o=o.parentElement}}return this.dsoCardClicked.emit({originalEvent:e,isModifiedEvent:i(e)})}get selectableSlottedElement(){return this.host.querySelector("[slot='selectable']")}get imageSlottedElement(){return this.host.querySelector("[slot='image']")}get headingSlottedElement(){return this.host.querySelector("[slot='heading']")}get interactionsSlottedElement(){return this.host.querySelector("[slot='interactions']")}render(){const e=this.selectableSlottedElement!==null;const o=this.imageSlottedElement!==null;return n(r,{key:"b9cc1a47bc39e6e2011ba6412436ab855d9819cf",onClick:e=>this.clickEventHandler(e),"is-selectable":e,"has-image":o},n("div",{key:"b8a059c5b2cc2f29392e0311fcbb3a02b1b39580",class:"dso-card-selectable",hidden:!e},n("slot",{key:"304c0dad6a73ebb2ad12f7c4e0a807d53c7ca660",name:"selectable"})),n("div",{key:"3e976d9e8eb0fbc3578a8fc6f32687f97ca6fc69",class:"dso-card-image",hidden:!o},n("slot",{key:"e10f2acff35dcd3316f0cb14575d5d2e4ab86c95",name:"image"})),n("div",{key:"c7d437cc6d54eab8e9d6ad45411230498b243466",class:"dso-card-heading"},this.headingSlottedElement instanceof HTMLAnchorElement||!this.href?n("slot",{name:"heading"}):(!this.mode||!["download","extern"].includes(this.mode))&&n("a",{href:this.href,class:"heading-anchor"},n("slot",{name:"heading"}),n("dso-icon",{icon:"chevron-right"}))||this.mode==="extern"&&n("a",{href:this.href,class:"heading-anchor",target:"_blank",rel:"noopener noreferrer"},n("slot",{name:"heading"}),n("dso-icon",{icon:"external-link"}),n("span",{class:"sr-only"},"(Opent andere website in nieuw tabblad)"))||this.mode==="download"&&n("a",{href:this.href,class:"heading-anchor"},n("slot",{name:"heading"}),n("dso-icon",{icon:"download"})),this.interactionsSlottedElement!==null&&n("slot",{key:"f318d02fe89a6aa2a9377e2f32d72726c848c42f",name:"interactions"})),n("div",{key:"7b725b7edeee93b237352eff09ae2574647b9a3b",class:"dso-card-content"},n("slot",{key:"9f855efe124e2a273b1ecb465b27bc7e01ac10e9",name:"content"})))}get host(){return t(this)}};l.style=c;export{l as dso_card};
+//# sourceMappingURL=p-65c71684.entry.js.map

package/dist/dso-toolkit/{p-0142294a.entry.js → p-6be9e2eb.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as n,h as t,H as o,a as s}from"./p-701648d3.js";import{c as i}from"./p-8a1a6e56.js";const a=":host {\n  display: block;\n  padding: 4px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n.legend-item {\n  display: flex;\n  position: relative;\n}\n.legend-item.legend-item-symbol + .body {\n  margin-inline-start: 38px;\n}\n.legend-item.legend-item-selectable + .body {\n  margin-inline-start: 32px;\n}\n.legend-item.legend-item-selectable.legend-item-symbol + .body {\n  margin-inline-start: 70px;\n}\n\nbutton {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  position: absolute;\n  inset-inline-end: 0;\n}\nbutton:focus, button:focus-visible {\n  outline-offset: 2px;\n}\nbutton:active {\n  outline: 0;\n}\nbutton[disabled] {\n  color: #afcf9d;\n}\nbutton[disabled].dso-spinner-left, button[disabled].dso-spinner-right {\n  color: #39870c;\n}\nbutton:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\nbutton:not([disabled]):active {\n  color: #173521;\n}\nbutton.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\nbutton.dso-truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\nbutton.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  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\nbutton.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  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\nbutton > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}";const r=a;const d=class{constructor(t){e(this,t);this.dsoRemoveClick=n(this,"dsoRemoveClick",7);this.dsoMouseEnter=n(this,"dsoMouseEnter",7);this.dsoMouseLeave=n(this,"dsoMouseLeave",7);this.disabled=false;this.disabledMessage=undefined;this.removable=undefined;this.showBody=false}get symbolSlottedElement(){return this.host.querySelector("[slot='symbol']")}get selectableSlottedElement(){return this.host.querySelector(":scope > dso-selectable")}get bodySlottedElement(){return this.host.querySelector("[slot='body']")}render(){const e=this.symbolSlottedElement!==null;const n=this.bodySlottedElement!==null;const s=this.selectableSlottedElement!==null;return t(o,{key:"e50f1d84ed48c4fc88ebdf2d473ee0f67bec22fe",onMouseEnter:()=>this.dsoMouseEnter.emit(),onMouseLeave:()=>this.dsoMouseLeave.emit()},t("div",{key:"98ccac5c97c900a0eefe58baa4d69747847b2fbf",class:i("legend-item",{"legend-item-symbol":e,"legend-item-selectable":s})},t("div",{key:"f73cdf97e65e6d50fd8c8e073c2abf902d148511",hidden:!e},t("slot",{key:"d18b7efd00c137f3b9fe96b00eabbafe9f8c8ae1",name:"symbol"})),t("div",{key:"8a0a4212aa989367d869a949bba1984af4e3d2c1"},t("slot",{key:"35285a0f129c3d0e64f5925b5e46e1d1246603fd"})),this.disabled&&this.disabledMessage&&t("dso-toggletip",{key:"93727ab6ba53cd605b1a0df5a5d14b281653cef7",position:"bottom"},this.disabledMessage),this.removable&&t("button",{key:"5d72df7e74cc74cb2e5cdede86bace5129c97906",id:"remove-button",type:"button",onClick:e=>this.dsoRemoveClick.emit({originalEvent:e})},t("span",{key:"6cb45e90d3e30e709f6bed348ae29e2931c34f11",class:"sr-only"},"Legenda item verwijderen"),t("dso-icon",{key:"3ec5613fc71e021bcaca961ab4d858f7aeb408c2",icon:"trash"})),n&&!this.disabled&&t("button",{key:"690784310b84fa49590680db6b7ab42aec5e34e8",id:"edit-button",type:"button",onClick:()=>this.showBody=!this.showBody},t("span",{key:"df9051dcd36487f51cbfb6014e4921ce405db3e3",class:"sr-only"},"Legenda item aanpassen"),t("dso-icon",{key:"8d047e9c90f888a5b3a60c41829845bd1bcd0538",icon:this.showBody?"times":"more"}))),t("div",{key:"8f90acc7de95c518749e0cdbd100f38195911dbb",hidden:!n||this.disabled||!this.showBody,class:"body"},t("slot",{key:"9d743680ea76b8daec3ef131ca244603eba4a996",name:"body"})))}get host(){return s(this)}};d.style=r;export{d as dso_legend_item};
-//# sourceMappingURL=p-0142294a.entry.js.map
+import{r as e,c as n,h as t,H as o,a as s}from"./p-e1b4d45b.js";import{c as i}from"./p-8a1a6e56.js";const a=":host {\n  display: block;\n  padding: 4px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n.legend-item {\n  display: flex;\n  position: relative;\n}\n.legend-item.legend-item-symbol + .body {\n  margin-inline-start: 38px;\n}\n.legend-item.legend-item-selectable + .body {\n  margin-inline-start: 32px;\n}\n.legend-item.legend-item-selectable.legend-item-symbol + .body {\n  margin-inline-start: 70px;\n}\n\nbutton {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  position: absolute;\n  inset-inline-end: 0;\n}\nbutton:focus, button:focus-visible {\n  outline-offset: 2px;\n}\nbutton:active {\n  outline: 0;\n}\nbutton[disabled] {\n  color: #afcf9d;\n}\nbutton[disabled].dso-spinner-left, button[disabled].dso-spinner-right {\n  color: #39870c;\n}\nbutton:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\nbutton:not([disabled]):active {\n  color: #173521;\n}\nbutton.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\nbutton.dso-truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\nbutton.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  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\nbutton.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  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\nbutton > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}";const r=a;const d=class{constructor(t){e(this,t);this.dsoRemoveClick=n(this,"dsoRemoveClick",7);this.dsoMouseEnter=n(this,"dsoMouseEnter",7);this.dsoMouseLeave=n(this,"dsoMouseLeave",7);this.disabled=false;this.disabledMessage=undefined;this.removable=undefined;this.showBody=false}get symbolSlottedElement(){return this.host.querySelector("[slot='symbol']")}get selectableSlottedElement(){return this.host.querySelector(":scope > dso-selectable")}get bodySlottedElement(){return this.host.querySelector("[slot='body']")}render(){const e=this.symbolSlottedElement!==null;const n=this.bodySlottedElement!==null;const s=this.selectableSlottedElement!==null;return t(o,{key:"e50f1d84ed48c4fc88ebdf2d473ee0f67bec22fe",onMouseEnter:()=>this.dsoMouseEnter.emit(),onMouseLeave:()=>this.dsoMouseLeave.emit()},t("div",{key:"98ccac5c97c900a0eefe58baa4d69747847b2fbf",class:i("legend-item",{"legend-item-symbol":e,"legend-item-selectable":s})},t("div",{key:"f73cdf97e65e6d50fd8c8e073c2abf902d148511",hidden:!e},t("slot",{key:"d18b7efd00c137f3b9fe96b00eabbafe9f8c8ae1",name:"symbol"})),t("div",{key:"8a0a4212aa989367d869a949bba1984af4e3d2c1"},t("slot",{key:"35285a0f129c3d0e64f5925b5e46e1d1246603fd"})),this.disabled&&this.disabledMessage&&t("dso-toggletip",{key:"93727ab6ba53cd605b1a0df5a5d14b281653cef7",position:"bottom"},this.disabledMessage),this.removable&&t("button",{key:"5d72df7e74cc74cb2e5cdede86bace5129c97906",id:"remove-button",type:"button",onClick:e=>this.dsoRemoveClick.emit({originalEvent:e})},t("span",{key:"6cb45e90d3e30e709f6bed348ae29e2931c34f11",class:"sr-only"},"Legenda item verwijderen"),t("dso-icon",{key:"3ec5613fc71e021bcaca961ab4d858f7aeb408c2",icon:"trash"})),n&&!this.disabled&&t("button",{key:"690784310b84fa49590680db6b7ab42aec5e34e8",id:"edit-button",type:"button",onClick:()=>this.showBody=!this.showBody},t("span",{key:"df9051dcd36487f51cbfb6014e4921ce405db3e3",class:"sr-only"},"Legenda item aanpassen"),t("dso-icon",{key:"8d047e9c90f888a5b3a60c41829845bd1bcd0538",icon:this.showBody?"times":"more"}))),t("div",{key:"8f90acc7de95c518749e0cdbd100f38195911dbb",hidden:!n||this.disabled||!this.showBody,class:"body"},t("slot",{key:"9d743680ea76b8daec3ef131ca244603eba4a996",name:"body"})))}get host(){return s(this)}};d.style=r;export{d as dso_legend_item};
+//# sourceMappingURL=p-6be9e2eb.entry.js.map

package/dist/dso-toolkit/p-6c9208cb.entry.js

@@ -0,0 +1,2 @@
+import{r as n,c as o,h as l,H as e,F as r}from"./p-e1b4d45b.js";import{i as a}from"./p-2d694112.js";const t=':host {\n  max-block-size: 3rem;\n  block-size: 3rem;\n  display: grid;\n  grid-template-areas: "target wordmark label";\n  grid-template-columns: repeat(3, max-content);\n  grid-template-rows: 100%;\n  gap: 16px;\n  font-size: 1.5625rem;\n  font-weight: 500;\n  align-items: center;\n  container-type: size;\n  container-name: logo;\n}\n:host .logo-url,\n:host .logo-label-url {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  text-decoration: none;\n}\n:host .logo-url:hover, :host .logo-url:focus-visible, :host .logo-url:active,\n:host .logo-label-url:hover,\n:host .logo-label-url:focus-visible,\n:host .logo-label-url:active {\n  text-decoration: underline;\n}\n:host .logo-url, :host .logo-url:hover, :host .logo-url:focus, :host .logo-url:visited,\n:host .logo-label-url,\n:host .logo-label-url:hover,\n:host .logo-label-url:focus,\n:host .logo-label-url:visited {\n  color: #275937;\n}\n\n:host([logo-url][ribbon]) {\n  grid-template-areas: "targetwordmark label";\n}\n:host([logo-url][ribbon]) .logo-url {\n  grid-area: targetwordmark;\n}\n:host([logo-url][ribbon]) .logo-url + .logo-ribbon {\n  grid-area: targetwordmark;\n}\n:host([logo-url][ribbon]) .logo-label-url + .logo-ribbon {\n  grid-area: targetwordmark;\n}\n\n.logo-label-url {\n  grid-area: label;\n}\n\n.logo-target {\n  grid-area: target;\n  max-block-size: 48px;\n  max-inline-size: 48px;\n  inline-size: 100%;\n  display: block;\n  aspect-ratio: 1/1;\n}\n\n.logo-wordmark {\n  grid-area: wordmark;\n  font-size: 1.5625rem;\n}\n\n@container logo (max-height: 47px) {\n  .logo-wordmark,\n  .logo-label {\n    font-size: 50cqb;\n    line-height: 1;\n  }\n}\n.logo-wordmark-omgevings {\n  color: #39870c;\n}\n\n.logo-wordmark-loket {\n  color: #275937;\n}\n\n.logo-label {\n  grid-area: label;\n  color: #275937;\n  margin-inline-start: 1rem;\n}\n\n.logo-ribbon {\n  grid-area: wordmark;\n  place-self: start end;\n  display: flex;\n  place-items: center;\n  background-color: #8b4a6a;\n  border-radius: 3px;\n  transform: rotate(3deg);\n  padding: 0 8px;\n  font-size: 0.75rem;\n  font-weight: normal;\n  text-transform: uppercase;\n  color: #fff;\n}\n@container logo (max-height: 47px) {\n  .logo-ribbon {\n    block-size: 28cqb;\n    font-size: 25cqb;\n  }\n}\n\n.inner {\n  fill: #e17000;\n}\n\n.middle {\n  fill: #275937;\n}\n\n.outer {\n  fill: #80bc00;\n}\n\n@media screen and (max-width: 767px) {\n  .logo-wordmark {\n    font-size: initial;\n  }\n  :host([label]) {\n    grid-template-areas: "target label";\n    grid-template-columns: max-content minmax(130px, max-content);\n  }\n  :host([label]) .logo-wordmark {\n    display: none;\n  }\n  :host([label]) .logo-ribbon {\n    grid-area: label;\n  }\n  :host([label]) .logo-label {\n    margin-inline-start: 0;\n    font-size: initial;\n    text-wrap: balance;\n    overflow-wrap: normal;\n  }\n  :host([logo-url][ribbon]) .logo-label-url + .logo-ribbon {\n    grid-area: label;\n  }\n}\n@media screen and (max-width: 480px) {\n  .logo-ribbon {\n    transform: rotate(3deg) translateY(-7px);\n  }\n}';const i=t;const s=()=>l(r,null,l("svg",{fill:"none",viewBox:"0 0 48 48",height:"100%",class:"logo-target"},l("path",{class:"outer",d:"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z"}),l("path",{class:"middle",d:"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z"}),l("path",{class:"inner",d:"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z"})),l("div",{class:"logo-wordmark"},l("span",{class:"logo-wordmark-omgevings"},"Omgevings"),l("span",{class:"logo-wordmark-loket"},"loket")));const g=class{constructor(l){n(this,l);this.dsoLogoClick=o(this,"dsoLogoClick",7);this.dsoLabelClick=o(this,"dsoLabelClick",7);this.handleLogoClick=n=>{this.dsoLogoClick.emit({originalEvent:n,url:this.logoUrl,isModifiedEvent:a(n)})};this.handleLabelClick=n=>{this.dsoLabelClick.emit({originalEvent:n,url:this.labelUrl,isModifiedEvent:a(n)})};this.logoUrl=undefined;this.label=undefined;this.labelUrl=undefined;this.ribbon=undefined}render(){return l(e,{key:"b04f1170ed654ad0785d65761c0b81665b09befc","aria-label":["Omgevingsloket",this.label,this.ribbon&&`(${this.ribbon})`].filter((n=>!!n)).join(" ")},this.logoUrl?l("a",{class:"logo-url",href:this.logoUrl,onClick:this.handleLogoClick},l(s,null)):l(s,null),this.label&&(!this.labelUrl?l("span",{class:"logo-label"},this.label):l("a",{class:"logo-label-url",href:this.labelUrl,onClick:this.handleLabelClick},l("span",{class:"logo-label"},this.label))),this.ribbon&&l("div",{key:"fb457df019fe2fbaa97276083c6d46e3f6679329",class:"logo-ribbon"},this.ribbon))}};g.style=i;export{g as dso_logo};
+//# sourceMappingURL=p-6c9208cb.entry.js.map

package/dist/dso-toolkit/p-6c9208cb.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["logoCss","DsoLogoStyle0","DsoLogo","h","Fragment","fill","viewBox","height","class","d","Logo","this","handleLogoClick","e","dsoLogoClick","emit","originalEvent","url","logoUrl","isModifiedEvent","handleLabelClick","dsoLabelClick","labelUrl","render","Host","key","label","ribbon","filter","s","join","href","onClick"],"sources":["src/components/logo/logo.scss?tag=dso-logo&encapsulation=shadow","src/components/logo/logo.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n:host {\r\n  max-block-size: units.$ru6;\r\n  block-size: units.$ru6;\r\n  display: grid;\r\n  grid-template-areas: \"target wordmark label\";\r\n  grid-template-columns: repeat(3, max-content);\r\n  grid-template-rows: 100%;\r\n  gap: units.$u2;\r\n  font-size: 1.5625rem;\r\n  font-weight: 500;\r\n  align-items: center;\r\n  container-type: size;\r\n  container-name: logo;\r\n\r\n  .logo-url,\r\n  .logo-label-url {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: units.$u2;\r\n\r\n    @include anchor.reverse();\r\n\r\n    &,\r\n    &:hover,\r\n    &:focus,\r\n    &:visited {\r\n      color: colors.$bosgroen;\r\n    }\r\n  }\r\n}\r\n\r\n:host([logo-url][ribbon]) {\r\n  grid-template-areas: \"targetwordmark label\";\r\n\r\n  .logo-url {\r\n    grid-area: targetwordmark;\r\n    + .logo-ribbon {\r\n      grid-area: targetwordmark;\r\n    }\r\n  }\r\n\r\n  .logo-label-url + .logo-ribbon {\r\n    grid-area: targetwordmark;\r\n  }\r\n}\r\n\r\n.logo-label-url {\r\n  grid-area: label;\r\n}\r\n\r\n.logo-target {\r\n  grid-area: target;\r\n  max-block-size: units.$u6;\r\n  max-inline-size: units.$u6;\r\n  inline-size: 100%;\r\n  display: block;\r\n  aspect-ratio: 1 / 1;\r\n}\r\n\r\n.logo-wordmark {\r\n  grid-area: wordmark;\r\n  font-size: 1.5625rem;\r\n}\r\n\r\n@container logo (max-height: 47px) {\r\n  .logo-wordmark,\r\n  .logo-label {\r\n    font-size: 50cqb;\r\n    line-height: 1;\r\n  }\r\n}\r\n\r\n.logo-wordmark-omgevings {\r\n  color: colors.$grasgroen;\r\n}\r\n\r\n.logo-wordmark-loket {\r\n  color: colors.$bosgroen;\r\n}\r\n\r\n.logo-label {\r\n  grid-area: label;\r\n  color: colors.$bosgroen;\r\n  margin-inline-start: units.$ru2;\r\n}\r\n\r\n.logo-ribbon {\r\n  grid-area: wordmark;\r\n  place-self: start end;\r\n  display: flex;\r\n  place-items: center;\r\n\r\n  background-color: colors.$mauve;\r\n  border-radius: 3px;\r\n  transform: rotate(3deg);\r\n  padding: 0 8px;\r\n\r\n  font-size: 0.75rem;\r\n  font-weight: normal;\r\n  text-transform: uppercase;\r\n  color: colors.$wit;\r\n\r\n  @container logo (max-height: 47px) {\r\n    & {\r\n      block-size: 28cqb;\r\n      font-size: 25cqb;\r\n    }\r\n  }\r\n}\r\n\r\n.inner {\r\n  fill: colors.$oranje;\r\n}\r\n\r\n.middle {\r\n  fill: colors.$bosgroen;\r\n}\r\n\r\n.outer {\r\n  fill: #80bc00;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  .logo-wordmark {\r\n    font-size: initial;\r\n  }\r\n\r\n  // if the logo has a label, hide the wordmark on smaller screens and replace it with the label\r\n  :host([label]) {\r\n    grid-template-areas: \"target label\";\r\n    grid-template-columns: max-content minmax(130px, max-content);\r\n\r\n    .logo-wordmark {\r\n      display: none;\r\n    }\r\n\r\n    .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n\r\n    .logo-label {\r\n      margin-inline-start: 0;\r\n      font-size: initial;\r\n      text-wrap: balance;\r\n      overflow-wrap: normal;\r\n    }\r\n  }\r\n\r\n  :host([logo-url][ribbon]) {\r\n    .logo-label-url + .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  .logo-ribbon {\r\n    transform: rotate(3deg) translateY(-7px);\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Fragment,\r\n  Host,\r\n  Prop,\r\n  h,\r\n  Event,\r\n  EventEmitter,\r\n  FunctionalComponent,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { LogoClickEvent, LogoLabelClickEvent } from \"./logo.interfaces\";\r\n\r\nconst DsoLogo: FunctionalComponent = () => (\r\n  <>\r\n    <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n      <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n      <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n      <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n    </svg>\r\n    <div class=\"logo-wordmark\">\r\n      <span class=\"logo-wordmark-omgevings\">Omgevings</span>\r\n      <span class=\"logo-wordmark-loket\">loket</span>\r\n    </div>\r\n  </>\r\n);\r\n\r\n@Component({\r\n  tag: \"dso-logo\",\r\n  styleUrl: \"logo.scss\",\r\n  shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n  /**\r\n   *  The url the logo is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  logoUrl?: string;\r\n\r\n  /**\r\n   * The label clarifies the service within the Omgevingsloket, shown\r\n   * as a subtitle (and on smaller screens as the main wordmark itself).\r\n   */\r\n  @Prop({ reflect: true })\r\n  label?: string;\r\n\r\n  /**\r\n   *  The url the label is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  labelUrl?: string;\r\n\r\n  /**\r\n   * The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n   * Used to clarify the (non-production) server environment (\"int\", \"kta\", \"pfm\", \"pre\", or \"dmo\")\r\n   */\r\n  @Prop({ reflect: true })\r\n  ribbon?: string;\r\n\r\n  /**\r\n   * Emitted when the logo is clicked (only when logoUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLogoClick!: EventEmitter<LogoClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the label in the logo is clicked (only when labelUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLabelClick!: EventEmitter<LogoLabelClickEvent>;\r\n\r\n  private handleLogoClick = (e: MouseEvent) => {\r\n    this.dsoLogoClick.emit({ originalEvent: e, url: this.logoUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  private handleLabelClick = (e: MouseEvent) => {\r\n    this.dsoLabelClick.emit({ originalEvent: e, url: this.labelUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host aria-label={[\"Omgevingsloket\", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(\" \")}>\r\n        {this.logoUrl ? (\r\n          <a class=\"logo-url\" href={this.logoUrl} onClick={this.handleLogoClick}>\r\n            <DsoLogo />\r\n          </a>\r\n        ) : (\r\n          <DsoLogo />\r\n        )}\r\n\r\n        {this.label &&\r\n          (!this.labelUrl ? (\r\n            <span class=\"logo-label\">{this.label}</span>\r\n          ) : (\r\n            <a class=\"logo-label-url\" href={this.labelUrl} onClick={this.handleLabelClick}>\r\n              <span class=\"logo-label\">{this.label}</span>\r\n            </a>\r\n          ))}\r\n        {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"oGAAA,MAAMA,EAAU,u+FAChB,MAAAC,EAAeD,ECaf,MAAME,EAA+B,IACnCC,EAAAC,EAAA,KACED,EAAA,OAAKE,KAAK,OAAOC,QAAQ,YAAYC,OAAO,OAAOC,MAAM,eACvDL,EAAA,QAAMK,MAAM,QAAQC,EAAE,+CACtBN,EAAA,QAAMK,MAAM,SAASC,EAAE,6CACvBN,EAAA,QAAMK,MAAM,QAAQC,EAAE,2CAExBN,EAAA,OAAKK,MAAM,iBACTL,EAAA,QAAMK,MAAM,2BAAyB,aACrCL,EAAA,QAAMK,MAAM,uBAAqB,W,MAU1BE,EAAI,M,iHAuCPC,KAAAC,gBAAmBC,IACzBF,KAAKG,aAAaC,KAAK,CAAEC,cAAeH,EAAGI,IAAKN,KAAKO,QAAUC,gBAAiBA,EAAgBN,IAAK,EAG/FF,KAAAS,iBAAoBP,IAC1BF,KAAKU,cAAcN,KAAK,CAAEC,cAAeH,EAAGI,IAAKN,KAAKW,SAAWH,gBAAiBA,EAAgBN,IAAK,E,0FAGzG,MAAAU,GACE,OACEpB,EAACqB,EAAI,CAAAC,IAAA,wDAAa,CAAC,iBAAkBd,KAAKe,MAAOf,KAAKgB,QAAU,IAAIhB,KAAKgB,WAAWC,QAAQC,KAAQA,IAAGC,KAAK,MACzGnB,KAAKO,QACJf,EAAA,KAAGK,MAAM,WAAWuB,KAAMpB,KAAKO,QAASc,QAASrB,KAAKC,iBACpDT,EAACD,EAAO,OAGVC,EAACD,EAAO,MAGTS,KAAKe,SACFf,KAAKW,SACLnB,EAAA,QAAMK,MAAM,cAAcG,KAAKe,OAE/BvB,EAAA,KAAGK,MAAM,iBAAiBuB,KAAMpB,KAAKW,SAAUU,QAASrB,KAAKS,kBAC3DjB,EAAA,QAAMK,MAAM,cAAcG,KAAKe,SAGpCf,KAAKgB,QAAUxB,EAAA,OAAAsB,IAAA,2CAAKjB,MAAM,eAAeG,KAAKgB,Q"}

package/dist/dso-toolkit/{p-10d464fa.entry.js → p-6d9c9b93.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as o}from"./p-701648d3.js";const a=":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-attachments{color:var(--dso-attachments-counter-color, #666);display:inline-block;font-weight:400;text-decoration:none;white-space:nowrap}";const t=a;const s=class{constructor(o){e(this,o);this.count=undefined}render(){return o("span",{key:"cd8239d516bd4ea96cdb3d6273d092e1441aa5bb",class:"dso-attachments"},this.count," ",o("span",{key:"b050b4ad32bbab6403b7cff89fe7f2f5c1aa5786",class:"sr-only"},"bijlage",this.count!==1?"n":""),o("dso-icon",{key:"2ad49e0eb4a1f41bee68b5348a25ab1a5fce7b0e",icon:"paperclip"}))}};s.style=t;export{s as dso_attachments_counter};
-//# sourceMappingURL=p-10d464fa.entry.js.map
+import{r as e,h as o}from"./p-e1b4d45b.js";const a=":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-attachments{color:var(--dso-attachments-counter-color, #666);display:inline-block;font-weight:400;text-decoration:none;white-space:nowrap}";const t=a;const s=class{constructor(o){e(this,o);this.count=undefined}render(){return o("span",{key:"cd8239d516bd4ea96cdb3d6273d092e1441aa5bb",class:"dso-attachments"},this.count," ",o("span",{key:"b050b4ad32bbab6403b7cff89fe7f2f5c1aa5786",class:"sr-only"},"bijlage",this.count!==1?"n":""),o("dso-icon",{key:"2ad49e0eb4a1f41bee68b5348a25ab1a5fce7b0e",icon:"paperclip"}))}};s.style=t;export{s as dso_attachments_counter};
+//# sourceMappingURL=p-6d9c9b93.entry.js.map

package/dist/dso-toolkit/p-70c0fffb.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as i,H as e,a as o}from"./p-e1b4d45b.js";import{d as r,h as a,c as n,b as s}from"./p-202d2cdf.js";import{c as d}from"./p-8a1a6e56.js";import{d as l}from"./p-23b5692c.js";var p={name:"maxSize",enabled:true,phase:"main",requiresIfExists:["offset","preventOverflow","flip"],fn:function t(i){var e=i.state,o=i.name,a=i.options;var n=r(e,a);var s=e.modifiersData.preventOverflow||{x:0,y:0},d=s.x,l=s.y;var p=e.rects.popper,h=p.width,c=p.height;var f=e.placement.split("-"),b=f[0];var m=b==="left"?"left":"right";var u=b==="top"?"top":"bottom";e.modifiersData[o]={width:h-n[m]-d,height:c-n[u]-l}}};const h=":host(.hidden){visibility:hidden}*,*::after,*::before{box-sizing:border-box}.tooltip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;--link-color:#39870c;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:410}.tooltip.in{opacity:1}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:1rem;max-width:640px;padding-block:8px;padding-inline:16px;position:relative}.tooltip .tooltip-inner.dso-small{max-width:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;height:0;width:0}.tooltip[data-popper-placement=top]{margin-block-start:-3px;padding-block:6px;padding-inline:0}.tooltip[data-popper-placement=top] .tooltip-arrow{bottom:0;border-block-start-color:#fff;border-width:6px;border-block-end-width:0;margin-inline-start:var(--tooltip-margin-inline-start, -3px)}.tooltip[data-popper-placement=right]{margin-inline-start:3px;padding-block:0;padding-inline:6px}.tooltip[data-popper-placement=right] .tooltip-arrow{left:0;border-inline-end-color:#fff;border-width:6px;border-inline-start-width:0;margin-block-start:var(--tooltip-margin-block-start, -3px)}.tooltip[data-popper-placement=bottom]{margin-block-start:3px;padding-block:6px;padding-inline:0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{top:0;border-block-end-color:#fff;border-width:6px;border-block-start-width:0;margin-inline-start:var(--tooltip-margin-inline-start, -3px)}.tooltip[data-popper-placement=left]{margin-inline-start:-3px;margin-inline-end:var(--tooltip-margin-inline-end, unset);padding-block:0;padding-inline:6px}.tooltip[data-popper-placement=left] .tooltip-arrow{right:0;border-inline-start-color:#fff;border-width:6px;border-inline-end-width:0;margin-block-start:var(--tooltip-margin-block-start, -3px)}";const c=h;var f=undefined&&undefined.__classPrivateFieldGet||function(t,i,e,o){if(e==="a"&&!o)throw new TypeError("Private accessor was defined without a getter");if(typeof i==="function"?t!==i||!o:!i.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?o:e==="a"?o.call(t):o?o.value:i.get(t)};var b=undefined&&undefined.__classPrivateFieldSet||function(t,i,e,o,r){if(o==="m")throw new TypeError("Private method is not writable");if(o==="a"&&!r)throw new TypeError("Private accessor was defined without a setter");if(typeof i==="function"?t!==i||!r:!i.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return o==="a"?r.call(t,e):r?r.value=e:i.set(t,e),e};var m;const u=150;const v={name:"applyMaxSize",enabled:true,phase:s,requires:["maxSize"],fn({state:t}){let{width:i}=t.modifiersData.maxSize;if(i<160){i=160}t.styles.popper=Object.assign(Object.assign({},t.styles.popper),{maxWidth:`${i}px`})}};const w=class{constructor(i){t(this,i);this.callbacks={activate:()=>this.active=true,deactivate:()=>this.active=false};this.onMouseLeave=()=>{var t;if(!this.element.matches(":hover")&&!((t=this.target)===null||t===void 0?void 0:t.matches(":hover"))){this.callbacks.deactivate()}};this.keyDownListener=t=>{if(t.key==="Escape"){this.deactivate()}};this.deactivatePopper=l((()=>{var t;this.hidden=true;(t=this.popper)===null||t===void 0?void 0:t.destroy();this.popper=undefined}),u);m.set(this,void 0);this.descriptive=false;this.position="top";this.strategy="auto";this.noArrow=false;this.stateless=undefined;this.small=undefined;this.active=false;this.hidden=true}async activate(){this.active=true}async deactivate(){this.active=false}watchPosition(){if(!this.popper){return}this.popper.setOptions({placement:this.position})}watchStrategy(){this.setStrategy()}setStrategy(){if(!this.popper){return}if(this.strategy==="absolute"||this.strategy==="fixed"){this.popper.setOptions({strategy:this.strategy});return}let t=this.element;while(t&&t.parentNode!==document){t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement;if(t!==null&&a(t)){this.popper.setOptions({strategy:"fixed"});return}}this.popper.setOptions({strategy:"absolute"})}watchActive(){if(this.active){this.activatePopper();if(!this.stateless){setTimeout((()=>{var t;(t=this.popper)===null||t===void 0?void 0:t.setOptions({modifiers:[{name:"eventListeners",enabled:true}]});document.addEventListener("keydown",this.keyDownListener)}))}}else{document.removeEventListener("keydown",this.keyDownListener);this.deactivatePopper()}}listenClick(t){t.stopPropagation()}componentDidLoad(){var t;const i=(t=this.element.shadowRoot)===null||t===void 0?void 0:t.querySelector(".tooltip");if(!(i instanceof HTMLElement)){throw new Error("tooltip element is not instanceof HTMLElement")}if(!this.stateless&&this.target){this.target.addEventListener("mouseenter",this.callbacks.activate);[this.element,this.target].forEach((t=>t.addEventListener("mouseleave",this.onMouseLeave)));this.target.addEventListener("focus",this.callbacks.activate);this.target.addEventListener("blur",this.callbacks.deactivate)}}disconnectedCallback(){var t;(t=this.popper)===null||t===void 0?void 0:t.destroy();if(!this.stateless&&this.target){this.target.removeEventListener("mouseenter",this.callbacks.activate);[this.element,this.target].forEach((t=>t.removeEventListener("mouseleave",this.onMouseLeave)));this.target.removeEventListener("focus",this.callbacks.activate);this.target.removeEventListener("blur",this.callbacks.deactivate)}this.target=undefined}componentDidRender(){var t;if(this.active){(t=this.popper)===null||t===void 0?void 0:t.update()}}render(){return i(e,{key:"66a3f32c6fdf67da8f7139d077a1b0aad763a73d",class:{hidden:this.hidden},role:"tooltip",onClick:this.listenClick},i("div",{key:"267e5ed9b419c508281c82ddd5ec4574fdfec538",class:d("tooltip",{in:this.active})},!this.noArrow&&i("div",{key:"76605429685029003c414c272bd40b545c3703d1","data-popper-arrow":true,class:"tooltip-arrow"}),i("div",{key:"a7d654c79eba063a19c4ff6e136c37b68fe9b7e3","aria-hidden":!this.descriptive||undefined,class:d("tooltip-inner",{"dso-small":this.small})},i("slot",{key:"193e821c7bb1f407b34478a064bb61d2154303f4"}))))}activatePopper(){var t;this.hidden=false;if(this.popper){return}const i=(t=this.element.shadowRoot)===null||t===void 0?void 0:t.querySelector(".tooltip");if(this.target&&i instanceof HTMLElement){this.popper=n(this.target,i,{placement:this.position,modifiers:[p,v,{name:"eventListeners",enabled:false}]});this.setStrategy()}}get target(){var t;return(t=f(this,m,"f"))!==null&&t!==void 0?t:this.initializeTarget()}set target(t){b(this,m,t,"f")}initializeTarget(){const t=this.element.id;if(!t){console.warn("Unable to find reference tooltip has no [id] attribute.");return}const i=this.element.getRootNode();if(!(i instanceof Document||i instanceof ShadowRoot)){console.warn(`rootNode is not instance of Document or ShadowRoot`);return}const e=i.querySelector(`[aria-describedBy="${t}`);if(!e){console.warn(`Unable to find reference with aria-describedby ${t}`);return}b(this,m,e,"f");return e}get element(){return o(this)}static get watchers(){return{position:["watchPosition"],strategy:["watchStrategy"],active:["watchActive"]}}};m=new WeakMap;w.style=c;export{w as dso_tooltip};
+//# sourceMappingURL=p-70c0fffb.entry.js.map

package/dist/dso-toolkit/{p-0308135a.entry.js.map → p-70c0fffb.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["maxSize","name","enabled","phase","requiresIfExists","fn","_ref","state","options","overflow","detectOverflow","_ref2","modifiersData","preventOverflow","x","y","_state$rects$popper","rects","popper","width","height","_state$placement$spli","placement","split","basePlacement","widthProp","heightProp","tooltipCss","DsoTooltipStyle0","transitionDuration","applyMaxSize","beforeWrite","requires","styles","Object","assign","maxWidth","Tooltip","this","callbacks","activate","active","deactivate","onMouseLeave","element","matches","_a","target","keyDownListener","event","key","deactivatePopper","debounce","hidden","destroy","undefined","_Tooltip_target","set","watchPosition","setOptions","position","watchStrategy","setStrategy","strategy","parentNode","document","ShadowRoot","host","parentElement","hasOverflow","watchActive","activatePopper","stateless","setTimeout","modifiers","addEventListener","removeEventListener","listenClick","e","stopPropagation","componentDidLoad","tooltip","shadowRoot","querySelector","HTMLElement","Error","forEach","disconnectedCallback","componentDidRender","update","render","h","Host","class","role","onClick","clsx","in","noArrow","descriptive","small","createPopper","__classPrivateFieldGet","initializeTarget","__classPrivateFieldSet","id","console","warn","rootNode","getRootNode","Document","reference"],"sources":["../../node_modules/popper-max-size-modifier/dist/popper-max-size-modifier.esm.js","src/components/tooltip/tooltip.scss?tag=dso-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { detectOverflow } from '@popperjs/core';\n\nvar maxSize = {\n  name: 'maxSize',\n  enabled: true,\n  phase: 'main',\n  requiresIfExists: ['offset', 'preventOverflow', 'flip'],\n  fn: function fn(_ref) {\n    var state = _ref.state,\n        name = _ref.name,\n        options = _ref.options;\n    var overflow = detectOverflow(state, options);\n\n    var _ref2 = state.modifiersData.preventOverflow || {\n      x: 0,\n      y: 0\n    },\n        x = _ref2.x,\n        y = _ref2.y;\n\n    var _state$rects$popper = state.rects.popper,\n        width = _state$rects$popper.width,\n        height = _state$rects$popper.height;\n\n    var _state$placement$spli = state.placement.split('-'),\n        basePlacement = _state$placement$spli[0];\n\n    var widthProp = basePlacement === 'left' ? 'left' : 'right';\n    var heightProp = basePlacement === 'top' ? 'top' : 'bottom';\n    state.modifiersData[name] = {\n      width: width - overflow[widthProp] - x,\n      height: height - overflow[heightProp] - y\n    };\n  }\n};\n\nexport default maxSize;\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"tooltip.variables\" as tooltip-variables;\r\n\r\n:host(.hidden) {\r\n  visibility: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.tooltip {\r\n  font-family: typography.$font-family-base;\r\n  // We deliberately do NOT reset font-size.\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: typography.$line-height-base;\r\n  line-break: auto;\r\n  text-align: left; // Fallback for where `start` is not supported\r\n  text-align: start;\r\n  text-decoration: none;\r\n  text-shadow: none;\r\n  text-transform: none;\r\n  letter-spacing: normal;\r\n  word-break: normal;\r\n  word-spacing: normal;\r\n  word-wrap: normal;\r\n  white-space: normal;\r\n\r\n  --link-color: #{colors.$grasgroen};\r\n\r\n  display: block;\r\n  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));\r\n  font-size: typography.$font-size-small;\r\n  opacity: 0;\r\n  position: absolute;\r\n  transition: opacity tooltip-variables.$transition-duration linear;\r\n  z-index: zindex.$tooltip;\r\n\r\n  &.in {\r\n    opacity: tooltip-variables.$opacity;\r\n  }\r\n\r\n  .tooltip-inner {\r\n    background-color: colors.$wit;\r\n    border-radius: tooltip-variables.$border-radius;\r\n    color: colors.$grijs-90;\r\n    display: inline-block;\r\n    font-size: typography.$root-font-size-base;\r\n    max-width: tooltip-variables.$max-width;\r\n    padding-block: tooltip-variables.$padding-vertical;\r\n    padding-inline: tooltip-variables.$padding-horizontal;\r\n    position: relative;\r\n\r\n    &.dso-small {\r\n      max-width: tooltip-variables.$max-width-small;\r\n    }\r\n  }\r\n\r\n  .tooltip-arrow {\r\n    border-color: transparent;\r\n    border-style: solid;\r\n    height: 0;\r\n    width: 0;\r\n  }\r\n\r\n  &[data-popper-placement=\"top\"] {\r\n    margin-block-start: -3px;\r\n    padding-block: tooltip-variables.$arrow-width;\r\n    padding-inline: 0;\r\n\r\n    .tooltip-arrow {\r\n      bottom: 0;\r\n      border-block-start-color: tooltip-variables.$arrow-color;\r\n      border-width: tooltip-variables.$arrow-width;\r\n      border-block-end-width: 0;\r\n      margin-inline-start: var(--tooltip-margin-inline-start, tooltip-variables.$arrow-margin * -1);\r\n    }\r\n  }\r\n\r\n  &[data-popper-placement=\"right\"] {\r\n    margin-inline-start: 3px;\r\n    padding-block: 0;\r\n    padding-inline: tooltip-variables.$arrow-width;\r\n\r\n    .tooltip-arrow {\r\n      left: 0;\r\n      border-inline-end-color: tooltip-variables.$arrow-color;\r\n      border-width: tooltip-variables.$arrow-width;\r\n      border-inline-start-width: 0;\r\n      margin-block-start: var(--tooltip-margin-block-start, tooltip-variables.$arrow-margin * -1);\r\n    }\r\n  }\r\n\r\n  &[data-popper-placement=\"bottom\"] {\r\n    margin-block-start: 3px;\r\n    padding-block: tooltip-variables.$arrow-width;\r\n    padding-inline: 0;\r\n\r\n    .tooltip-arrow {\r\n      top: 0;\r\n      border-block-end-color: tooltip-variables.$arrow-color;\r\n      border-width: tooltip-variables.$arrow-width;\r\n      border-block-start-width: 0;\r\n      margin-inline-start: var(--tooltip-margin-inline-start, tooltip-variables.$arrow-margin * -1);\r\n    }\r\n  }\r\n\r\n  &[data-popper-placement=\"left\"] {\r\n    margin-inline-start: -3px;\r\n    margin-inline-end: var(--tooltip-margin-inline-end, unset);\r\n    padding-block: 0;\r\n    padding-inline: tooltip-variables.$arrow-width;\r\n\r\n    .tooltip-arrow {\r\n      right: 0;\r\n      border-inline-start-color: tooltip-variables.$arrow-color;\r\n      border-width: tooltip-variables.$arrow-width;\r\n      border-inline-end-width: 0;\r\n      margin-block-start: var(--tooltip-margin-block-start, tooltip-variables.$arrow-margin * -1);\r\n    }\r\n  }\r\n}\r\n","import { beforeWrite, createPopper, Instance as PopperInstance, Placement, State as PopperState } from \"@popperjs/core\";\r\nimport maxSize from \"popper-max-size-modifier\";\r\nimport { h, Component, Element, Host, Method, Prop, State, Watch } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport debounce from \"debounce\";\r\n\r\n// Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin\r\nconst transitionDuration = 150;\r\n\r\nconst applyMaxSize = {\r\n  name: \"applyMaxSize\",\r\n  enabled: true,\r\n  phase: beforeWrite,\r\n  requires: [\"maxSize\"],\r\n  fn({ state }: { state: PopperState }) {\r\n    let { width } = state.modifiersData.maxSize;\r\n    if (width < 160) {\r\n      width = 160;\r\n    }\r\n\r\n    state.styles.popper = {\r\n      ...state.styles.popper,\r\n      maxWidth: `${width}px`,\r\n    };\r\n  },\r\n};\r\n\r\n@Component({\r\n  tag: \"dso-tooltip\",\r\n  styleUrl: \"tooltip.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tooltip {\r\n  /**\r\n   * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.\r\n   */\r\n  @Prop({\r\n    reflect: true,\r\n  })\r\n  descriptive = false;\r\n\r\n  /**\r\n   * Set position of tooltip relative to target\r\n   */\r\n  @Prop()\r\n  position: Placement = \"top\";\r\n\r\n  /**\r\n   * Set position strategy of tooltip\r\n   */\r\n  @Prop()\r\n  strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n  /**\r\n   * Set attribute `no-arrow` to hide the arrow\r\n   */\r\n  @Prop()\r\n  noArrow = false;\r\n\r\n  /**\r\n   * Deactivates mouseover behaviour\r\n   */\r\n  @Prop()\r\n  stateless?: boolean;\r\n\r\n  /**\r\n   * Defines if the tooltip has a smaller max-width\r\n   */\r\n  @Prop()\r\n  small?: boolean;\r\n\r\n  /**\r\n   * Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  active = false;\r\n\r\n  /**\r\n   * Activate the tooltip (Sets the `active` attribute)\r\n   */\r\n  @Method()\r\n  async activate(): Promise<void> {\r\n    this.active = true;\r\n  }\r\n\r\n  /**\r\n   * Deactivate the tooltip (Removes the `active` attribute)\r\n   */\r\n  @Method()\r\n  async deactivate(): Promise<void> {\r\n    this.active = false;\r\n  }\r\n\r\n  @Watch(\"position\")\r\n  watchPosition() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      placement: this.position,\r\n    });\r\n  }\r\n\r\n  @Watch(\"strategy\")\r\n  watchStrategy() {\r\n    this.setStrategy();\r\n  }\r\n\r\n  private setStrategy() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n      this.popper.setOptions({\r\n        strategy: this.strategy,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    let element: Element | null = this.element;\r\n    while (element && element.parentNode !== document) {\r\n      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n      if (element !== null && hasOverflow(element)) {\r\n        this.popper.setOptions({\r\n          strategy: \"fixed\",\r\n        });\r\n\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      strategy: \"absolute\",\r\n    });\r\n  }\r\n\r\n  @Watch(\"active\")\r\n  watchActive() {\r\n    if (this.active) {\r\n      this.activatePopper();\r\n\r\n      if (!this.stateless) {\r\n        setTimeout(() => {\r\n          this.popper?.setOptions({\r\n            modifiers: [{ name: \"eventListeners\", enabled: true }],\r\n          });\r\n          document.addEventListener(\"keydown\", this.keyDownListener);\r\n        });\r\n      }\r\n    } else {\r\n      document.removeEventListener(\"keydown\", this.keyDownListener);\r\n      this.deactivatePopper();\r\n    }\r\n  }\r\n\r\n  @Element()\r\n  private element!: HTMLDsoTooltipElement;\r\n\r\n  private popper: PopperInstance | undefined;\r\n\r\n  private callbacks: TooltipCallbacks = {\r\n    activate: () => (this.active = true),\r\n    deactivate: () => (this.active = false),\r\n  };\r\n\r\n  private onMouseLeave = () => {\r\n    if (!this.element.matches(\":hover\") && !this.target?.matches(\":hover\")) {\r\n      this.callbacks.deactivate();\r\n    }\r\n  };\r\n\r\n  @State()\r\n  private hidden = true;\r\n\r\n  private listenClick(e: MouseEvent) {\r\n    e.stopPropagation();\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n    if (!(tooltip instanceof HTMLElement)) {\r\n      throw new Error(\"tooltip element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    if (!this.stateless && this.target) {\r\n      this.target.addEventListener(\"mouseenter\", this.callbacks.activate);\r\n      [this.element, this.target].forEach((element) => element.addEventListener(\"mouseleave\", this.onMouseLeave));\r\n      this.target.addEventListener(\"focus\", this.callbacks.activate);\r\n      this.target.addEventListener(\"blur\", this.callbacks.deactivate);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.popper?.destroy();\r\n\r\n    if (!this.stateless && this.target) {\r\n      this.target.removeEventListener(\"mouseenter\", this.callbacks.activate);\r\n      [this.element, this.target].forEach((element) => element.removeEventListener(\"mouseleave\", this.onMouseLeave));\r\n      this.target.removeEventListener(\"focus\", this.callbacks.activate);\r\n      this.target.removeEventListener(\"blur\", this.callbacks.deactivate);\r\n    }\r\n\r\n    this.target = undefined;\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.active) {\r\n      this.popper?.update();\r\n    }\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.key === \"Escape\") {\r\n      this.deactivate();\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host class={{ hidden: this.hidden }} role=\"tooltip\" onClick={this.listenClick}>\r\n        <div class={clsx(\"tooltip\", { in: this.active })}>\r\n          {!this.noArrow && <div data-popper-arrow class=\"tooltip-arrow\"></div>}\r\n          <div aria-hidden={!this.descriptive || undefined} class={clsx(\"tooltip-inner\", { \"dso-small\": this.small })}>\r\n            <slot></slot>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private deactivatePopper = debounce(() => {\r\n    this.hidden = true;\r\n    this.popper?.destroy();\r\n    this.popper = undefined;\r\n  }, transitionDuration);\r\n\r\n  private activatePopper(): void {\r\n    this.hidden = false;\r\n\r\n    if (this.popper) {\r\n      return;\r\n    }\r\n\r\n    const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n\r\n    if (this.target && tooltip instanceof HTMLElement) {\r\n      this.popper = createPopper(this.target, tooltip, {\r\n        placement: this.position,\r\n        modifiers: [maxSize, applyMaxSize, { name: \"eventListeners\", enabled: false }],\r\n      });\r\n\r\n      this.setStrategy();\r\n    }\r\n  }\r\n\r\n  private get target(): HTMLElement | undefined {\r\n    return this.#target ?? this.initializeTarget();\r\n  }\r\n\r\n  private set target(element: HTMLElement | undefined) {\r\n    this.#target = element;\r\n  }\r\n\r\n  #target?: HTMLElement;\r\n\r\n  private initializeTarget(): HTMLElement | undefined {\r\n    const id = this.element.id;\r\n\r\n    if (!id) {\r\n      console.warn(\"Unable to find reference tooltip has no [id] attribute.\");\r\n\r\n      return;\r\n    }\r\n\r\n    const rootNode = this.element.getRootNode();\r\n    if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {\r\n      console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n      return;\r\n    }\r\n\r\n    const reference = rootNode.querySelector<HTMLElement>(`[aria-describedBy=\"${id}`);\r\n    if (!reference) {\r\n      console.warn(`Unable to find reference with aria-describedby ${id}`);\r\n\r\n      return;\r\n    }\r\n\r\n    this.#target = reference;\r\n    return reference;\r\n  }\r\n}\r\n\r\ninterface TooltipCallbacks {\r\n  activate: () => void;\r\n  deactivate: () => void;\r\n}\r\n"],"mappings":"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"}
+{"version":3,"names":["maxSize","name","enabled","phase","requiresIfExists","fn","_ref","state","options","overflow","detectOverflow","_ref2","modifiersData","preventOverflow","x","y","_state$rects$popper","rects","popper","width","height","_state$placement$spli","placement","split","basePlacement","widthProp","heightProp","tooltipCss","DsoTooltipStyle0","transitionDuration","applyMaxSize","beforeWrite","requires","styles","Object","assign","maxWidth","Tooltip","this","callbacks","activate","active","deactivate","onMouseLeave","element","matches","_a","target","keyDownListener","event","key","deactivatePopper","debounce","hidden","destroy","undefined","_Tooltip_target","set","watchPosition","setOptions","position","watchStrategy","setStrategy","strategy","parentNode","document","ShadowRoot","host","parentElement","hasOverflow","watchActive","activatePopper","stateless","setTimeout","modifiers","addEventListener","removeEventListener","listenClick","e","stopPropagation","componentDidLoad","tooltip","shadowRoot","querySelector","HTMLElement","Error","forEach","disconnectedCallback","componentDidRender","update","render","h","Host","class","role","onClick","clsx","in","noArrow","descriptive","small","createPopper","__classPrivateFieldGet","initializeTarget","__classPrivateFieldSet","id","console","warn","rootNode","getRootNode","Document","reference"],"sources":["../../node_modules/popper-max-size-modifier/dist/popper-max-size-modifier.esm.js","src/components/tooltip/tooltip.scss?tag=dso-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { detectOverflow } from '@popperjs/core';\n\nvar maxSize = {\n  name: 'maxSize',\n  enabled: true,\n  phase: 'main',\n  requiresIfExists: ['offset', 'preventOverflow', 'flip'],\n  fn: function fn(_ref) {\n    var state = _ref.state,\n        name = _ref.name,\n        options = _ref.options;\n    var overflow = detectOverflow(state, options);\n\n    var _ref2 = state.modifiersData.preventOverflow || {\n      x: 0,\n      y: 0\n    },\n        x = _ref2.x,\n        y = _ref2.y;\n\n    var _state$rects$popper = state.rects.popper,\n        width = _state$rects$popper.width,\n        height = _state$rects$popper.height;\n\n    var _state$placement$spli = state.placement.split('-'),\n        basePlacement = _state$placement$spli[0];\n\n    var widthProp = basePlacement === 'left' ? 'left' : 'right';\n    var heightProp = basePlacement === 'top' ? 'top' : 'bottom';\n    state.modifiersData[name] = {\n      width: width - overflow[widthProp] - x,\n      height: height - overflow[heightProp] - y\n    };\n  }\n};\n\nexport default maxSize;\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"tooltip.variables\" as tooltip-variables;\r\n\r\n:host(.hidden) {\r\n  visibility: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.tooltip {\r\n  font-family: typography.$font-family-base;\r\n  // We deliberately do NOT reset font-size.\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: typography.$line-height-base;\r\n  line-break: auto;\r\n  text-align: left; // Fallback for where `start` is not supported\r\n  text-align: start;\r\n  text-decoration: none;\r\n  text-shadow: none;\r\n  text-transform: none;\r\n  letter-spacing: normal;\r\n  word-break: normal;\r\n  word-spacing: normal;\r\n  word-wrap: normal;\r\n  white-space: normal;\r\n\r\n  --link-color: #{colors.$grasgroen};\r\n\r\n  display: block;\r\n  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));\r\n  font-size: typography.$font-size-small;\r\n  opacity: 0;\r\n  position: absolute;\r\n  transition: opacity tooltip-variables.$transition-duration linear;\r\n  z-index: zindex.$tooltip;\r\n\r\n  &.in {\r\n    opacity: tooltip-variables.$opacity;\r\n  }\r\n\r\n  .tooltip-inner {\r\n    background-color: colors.$wit;\r\n    border-radius: tooltip-variables.$border-radius;\r\n    color: colors.$grijs-90;\r\n    display: inline-block;\r\n    font-size: typography.$root-font-size-base;\r\n    max-width: tooltip-variables.$max-width;\r\n    padding-block: tooltip-variables.$padding-vertical;\r\n    padding-inline: tooltip-variables.$padding-horizontal;\r\n    position: relative;\r\n\r\n    &.dso-small {\r\n      max-width: tooltip-variables.$max-width-small;\r\n    }\r\n  }\r\n\r\n  .tooltip-arrow {\r\n    border-color: transparent;\r\n    border-style: solid;\r\n    height: 0;\r\n    width: 0;\r\n  }\r\n\r\n  &[data-popper-placement=\"top\"] {\r\n    margin-block-start: -3px;\r\n    padding-block: tooltip-variables.$arrow-width;\r\n    padding-inline: 0;\r\n\r\n    .tooltip-arrow {\r\n      bottom: 0;\r\n      border-block-start-color: tooltip-variables.$arrow-color;\r\n      border-width: tooltip-variables.$arrow-width;\r\n      border-block-end-width: 0;\r\n      margin-inline-start: var(--tooltip-margin-inline-start, tooltip-variables.$arrow-margin * -1);\r\n    }\r\n  }\r\n\r\n  &[data-popper-placement=\"right\"] {\r\n    margin-inline-start: 3px;\r\n    padding-block: 0;\r\n    padding-inline: tooltip-variables.$arrow-width;\r\n\r\n    .tooltip-arrow {\r\n      left: 0;\r\n      border-inline-end-color: tooltip-variables.$arrow-color;\r\n      border-width: tooltip-variables.$arrow-width;\r\n      border-inline-start-width: 0;\r\n      margin-block-start: var(--tooltip-margin-block-start, tooltip-variables.$arrow-margin * -1);\r\n    }\r\n  }\r\n\r\n  &[data-popper-placement=\"bottom\"] {\r\n    margin-block-start: 3px;\r\n    padding-block: tooltip-variables.$arrow-width;\r\n    padding-inline: 0;\r\n\r\n    .tooltip-arrow {\r\n      top: 0;\r\n      border-block-end-color: tooltip-variables.$arrow-color;\r\n      border-width: tooltip-variables.$arrow-width;\r\n      border-block-start-width: 0;\r\n      margin-inline-start: var(--tooltip-margin-inline-start, tooltip-variables.$arrow-margin * -1);\r\n    }\r\n  }\r\n\r\n  &[data-popper-placement=\"left\"] {\r\n    margin-inline-start: -3px;\r\n    margin-inline-end: var(--tooltip-margin-inline-end, unset);\r\n    padding-block: 0;\r\n    padding-inline: tooltip-variables.$arrow-width;\r\n\r\n    .tooltip-arrow {\r\n      right: 0;\r\n      border-inline-start-color: tooltip-variables.$arrow-color;\r\n      border-width: tooltip-variables.$arrow-width;\r\n      border-inline-end-width: 0;\r\n      margin-block-start: var(--tooltip-margin-block-start, tooltip-variables.$arrow-margin * -1);\r\n    }\r\n  }\r\n}\r\n","import { beforeWrite, createPopper, Instance as PopperInstance, Placement, State as PopperState } from \"@popperjs/core\";\r\nimport maxSize from \"popper-max-size-modifier\";\r\nimport { h, Component, Element, Host, Method, Prop, State, Watch } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport debounce from \"debounce\";\r\n\r\n// Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin\r\nconst transitionDuration = 150;\r\n\r\nconst applyMaxSize = {\r\n  name: \"applyMaxSize\",\r\n  enabled: true,\r\n  phase: beforeWrite,\r\n  requires: [\"maxSize\"],\r\n  fn({ state }: { state: PopperState }) {\r\n    let { width } = state.modifiersData.maxSize;\r\n    if (width < 160) {\r\n      width = 160;\r\n    }\r\n\r\n    state.styles.popper = {\r\n      ...state.styles.popper,\r\n      maxWidth: `${width}px`,\r\n    };\r\n  },\r\n};\r\n\r\n@Component({\r\n  tag: \"dso-tooltip\",\r\n  styleUrl: \"tooltip.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tooltip {\r\n  /**\r\n   * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.\r\n   */\r\n  @Prop({\r\n    reflect: true,\r\n  })\r\n  descriptive = false;\r\n\r\n  /**\r\n   * Set position of tooltip relative to target\r\n   */\r\n  @Prop()\r\n  position: Placement = \"top\";\r\n\r\n  /**\r\n   * Set position strategy of tooltip\r\n   */\r\n  @Prop()\r\n  strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n  /**\r\n   * Set attribute `no-arrow` to hide the arrow\r\n   */\r\n  @Prop()\r\n  noArrow = false;\r\n\r\n  /**\r\n   * Deactivates mouseover behaviour\r\n   */\r\n  @Prop()\r\n  stateless?: boolean;\r\n\r\n  /**\r\n   * Defines if the tooltip has a smaller max-width\r\n   */\r\n  @Prop()\r\n  small?: boolean;\r\n\r\n  /**\r\n   * Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  active = false;\r\n\r\n  /**\r\n   * Activate the tooltip (Sets the `active` attribute)\r\n   */\r\n  @Method()\r\n  async activate(): Promise<void> {\r\n    this.active = true;\r\n  }\r\n\r\n  /**\r\n   * Deactivate the tooltip (Removes the `active` attribute)\r\n   */\r\n  @Method()\r\n  async deactivate(): Promise<void> {\r\n    this.active = false;\r\n  }\r\n\r\n  @Watch(\"position\")\r\n  watchPosition() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      placement: this.position,\r\n    });\r\n  }\r\n\r\n  @Watch(\"strategy\")\r\n  watchStrategy() {\r\n    this.setStrategy();\r\n  }\r\n\r\n  private setStrategy() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n      this.popper.setOptions({\r\n        strategy: this.strategy,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    let element: Element | null = this.element;\r\n    while (element && element.parentNode !== document) {\r\n      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n      if (element !== null && hasOverflow(element)) {\r\n        this.popper.setOptions({\r\n          strategy: \"fixed\",\r\n        });\r\n\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      strategy: \"absolute\",\r\n    });\r\n  }\r\n\r\n  @Watch(\"active\")\r\n  watchActive() {\r\n    if (this.active) {\r\n      this.activatePopper();\r\n\r\n      if (!this.stateless) {\r\n        setTimeout(() => {\r\n          this.popper?.setOptions({\r\n            modifiers: [{ name: \"eventListeners\", enabled: true }],\r\n          });\r\n          document.addEventListener(\"keydown\", this.keyDownListener);\r\n        });\r\n      }\r\n    } else {\r\n      document.removeEventListener(\"keydown\", this.keyDownListener);\r\n      this.deactivatePopper();\r\n    }\r\n  }\r\n\r\n  @Element()\r\n  private element!: HTMLDsoTooltipElement;\r\n\r\n  private popper: PopperInstance | undefined;\r\n\r\n  private callbacks: TooltipCallbacks = {\r\n    activate: () => (this.active = true),\r\n    deactivate: () => (this.active = false),\r\n  };\r\n\r\n  private onMouseLeave = () => {\r\n    if (!this.element.matches(\":hover\") && !this.target?.matches(\":hover\")) {\r\n      this.callbacks.deactivate();\r\n    }\r\n  };\r\n\r\n  @State()\r\n  private hidden = true;\r\n\r\n  private listenClick(e: MouseEvent) {\r\n    e.stopPropagation();\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n    if (!(tooltip instanceof HTMLElement)) {\r\n      throw new Error(\"tooltip element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    if (!this.stateless && this.target) {\r\n      this.target.addEventListener(\"mouseenter\", this.callbacks.activate);\r\n      [this.element, this.target].forEach((element) => element.addEventListener(\"mouseleave\", this.onMouseLeave));\r\n      this.target.addEventListener(\"focus\", this.callbacks.activate);\r\n      this.target.addEventListener(\"blur\", this.callbacks.deactivate);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.popper?.destroy();\r\n\r\n    if (!this.stateless && this.target) {\r\n      this.target.removeEventListener(\"mouseenter\", this.callbacks.activate);\r\n      [this.element, this.target].forEach((element) => element.removeEventListener(\"mouseleave\", this.onMouseLeave));\r\n      this.target.removeEventListener(\"focus\", this.callbacks.activate);\r\n      this.target.removeEventListener(\"blur\", this.callbacks.deactivate);\r\n    }\r\n\r\n    this.target = undefined;\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.active) {\r\n      this.popper?.update();\r\n    }\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.key === \"Escape\") {\r\n      this.deactivate();\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host class={{ hidden: this.hidden }} role=\"tooltip\" onClick={this.listenClick}>\r\n        <div class={clsx(\"tooltip\", { in: this.active })}>\r\n          {!this.noArrow && <div data-popper-arrow class=\"tooltip-arrow\"></div>}\r\n          <div aria-hidden={!this.descriptive || undefined} class={clsx(\"tooltip-inner\", { \"dso-small\": this.small })}>\r\n            <slot></slot>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private deactivatePopper = debounce(() => {\r\n    this.hidden = true;\r\n    this.popper?.destroy();\r\n    this.popper = undefined;\r\n  }, transitionDuration);\r\n\r\n  private activatePopper(): void {\r\n    this.hidden = false;\r\n\r\n    if (this.popper) {\r\n      return;\r\n    }\r\n\r\n    const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n\r\n    if (this.target && tooltip instanceof HTMLElement) {\r\n      this.popper = createPopper(this.target, tooltip, {\r\n        placement: this.position,\r\n        modifiers: [maxSize, applyMaxSize, { name: \"eventListeners\", enabled: false }],\r\n      });\r\n\r\n      this.setStrategy();\r\n    }\r\n  }\r\n\r\n  private get target(): HTMLElement | undefined {\r\n    return this.#target ?? this.initializeTarget();\r\n  }\r\n\r\n  private set target(element: HTMLElement | undefined) {\r\n    this.#target = element;\r\n  }\r\n\r\n  #target?: HTMLElement;\r\n\r\n  private initializeTarget(): HTMLElement | undefined {\r\n    const id = this.element.id;\r\n\r\n    if (!id) {\r\n      console.warn(\"Unable to find reference tooltip has no [id] attribute.\");\r\n\r\n      return;\r\n    }\r\n\r\n    const rootNode = this.element.getRootNode();\r\n    if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {\r\n      console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n      return;\r\n    }\r\n\r\n    const reference = rootNode.querySelector<HTMLElement>(`[aria-describedBy=\"${id}`);\r\n    if (!reference) {\r\n      console.warn(`Unable to find reference with aria-describedby ${id}`);\r\n\r\n      return;\r\n    }\r\n\r\n    this.#target = reference;\r\n    return reference;\r\n  }\r\n}\r\n\r\ninterface TooltipCallbacks {\r\n  activate: () => void;\r\n  deactivate: () => void;\r\n}\r\n"],"mappings":"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"}

package/dist/dso-toolkit/p-77bd63bb.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as s,h as t,F as l,f as o,a as c}from"./p-e1b4d45b.js";import{c as a}from"./p-8a1a6e56.js";import{c as i}from"./p-97f788d4.js";const d=":host{display:block;padding:16px 32px 16px 16px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;right:8px;top:8px}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";const b=d;const n=class{constructor(t){e(this,t);this.dsoClose=s(this,"dsoClose",7);this.fixed=undefined;this.active=undefined}render(){return t(l,{key:"09663182b8699ecc6803337c3b2a61cb939e2cf9"},t("slot",{key:"28d4d320a7d126a4cf23e7822dece8e8594e0d9c"}),!this.fixed&&t("button",{key:"6559c0efe3070bfb14d29bc66c6b4bfdd40f23ae",type:"button",onClick:e=>this.dsoClose.emit(e)},t("dso-icon",{key:"9880632ccab83f3ef7c318c09276b2efa560b170",icon:"times"}),t("span",{key:"f8dbd51bcb3e17ba41a00acc42a76eb8cdebd69a",class:"sr-only"},"Sluiten")))}};n.style=b;const r='.sc-dso-selectable-h{position:relative;display:var(--dso-selectable-display, block);padding-inline-start:32px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{height:24px;left:0;margin:0;opacity:0;position:absolute;top:0;width:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-left:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:"";height:20px;left:2px;position:absolute;top:2px;width:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);height:18px;left:3px;top:3px;width:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;height:22px;left:1px;top:1px;width:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:"";left:6px;opacity:0;position:absolute;top:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-top-color:transparent;border-width:0 0 3px 3px;height:8px;transform:rotate(-45deg);width:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);height:12px;width:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:"";height:12px;left:6px;opacity:0;position:absolute;top:6px;width:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}[invalid].sc-dso-selectable-h:not([invalid=false]){--dso-selectable-color:#ce3f51}.sc-dso-selectable-h:not(:last-child){margin-bottom:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;min-height:24px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable:focus-within.dso-keyboard-focus{position:relative;inset-inline-start:-32px;padding-inline-start:32px;margin-inline-end:-32px;border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);height:20px;left:2px;top:2px;width:20px}';const p=r;const h=class{constructor(t){e(this,t);this.dsoChange=s(this,"dsoChange",7);this.fallbackIdentifier=i("DsoSelectable");this.handleOnChange=e=>{const{target:s}=e;this.dsoChange.emit({originalEvent:e,checked:s instanceof HTMLInputElement&&s.checked});o(this.host)};this.type=undefined;this.identifier=undefined;this.name=undefined;this.value=undefined;this.invalid=undefined;this.describedById=undefined;this.labelledById=undefined;this.disabled=undefined;this.required=undefined;this.checked=undefined;this.indeterminate=undefined;this.infoFixed=undefined;this.infoActive=false;this.keyboardFocus=false}async toggleInfo(e){this.infoActive=e!==null&&e!==void 0?e:!this.infoActive}componentDidLoad(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect();this.mutationObserver=new MutationObserver((()=>o(this.host)));this.mutationObserver.observe(this.host,{childList:true});this.setIndeterminate()}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}setIndeterminate(){if(!(this.input instanceof HTMLInputElement)||this.type!=="checkbox"){return}this.input.indeterminate=!!this.indeterminate}render(){var e;const s=!!this.host.querySelector('[slot="info"]');return t(l,{key:"9b3a5a7eded8a2c4fa778a78506cf3830eeb2158"},t("div",{key:"77eb55ac077f2165af3eeabbc7d905aafa9ac00b",class:"dso-selectable-container"},t("div",{key:"2a76089b151a5bda6f92fc6db37520a36a4c0c8a",class:a("dso-selectable-input-wrapper",{"dso-keyboard-focus":this.keyboardFocus})},t("input",{key:"753871d7f427daac250481c45d53f277ce0e9aaa",type:this.type,id:this.getIdentifier(),value:this.value,name:this.name,"aria-invalid":(e=this.invalid)===null||e===void 0?void 0:e.toString(),"aria-describedby":s&&this.infoFixed?this.describedById:undefined,"aria-labelledBy":this.labelledById,disabled:this.disabled,required:this.required,checked:this.checked,onChange:this.handleOnChange,onBlur:()=>this.keyboardFocus=false,onKeyUp:()=>this.keyboardFocus=true,ref:e=>this.input=e}),!this.labelledById?t("label",{htmlFor:this.getIdentifier()},t("slot",null)):t("label",null,t("slot",null))),s&&!this.infoFixed&&t("dso-info-button",{key:"33b894964ac606b03da670d53dcd4766ed73ce9c",active:this.infoActive,onDsoToggle:e=>this.infoActive=e.detail.active})),s&&t("dso-info",{key:"625d8c5d96d9e40cce6bbe2d06ed27cb51093d05",id:s&&this.infoFixed?this.describedById:undefined,fixed:this.infoFixed,active:this.infoActive,onDsoClose:()=>this.infoActive=false},t("div",{key:"762e207474ba137a6e49c18f4f95012715867768"},t("slot",{key:"4d7c20a761021788cd034fd0b6fc1f1fb9b73045",name:"info"}))),t("slot",{key:"95f6353ece9a423f9e1a6f300ae67f456465199b",name:"options"}))}componentDidRender(){if(this.input&&typeof this.checked==="boolean"&&this.input.checked!==this.checked){this.input.checked=this.checked}}getIdentifier(){var e;return(e=this.identifier)!==null&&e!==void 0?e:this.fallbackIdentifier}get host(){return c(this)}static get watchers(){return{indeterminate:["setIndeterminate"]}}};h.style=p;export{n as dso_info,h as dso_selectable};
+//# sourceMappingURL=p-77bd63bb.entry.js.map

package/dist/dso-toolkit/p-77bd63bb.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["infoCss","DsoInfoStyle0","Info","render","h","Fragment","key","this","fixed","type","onClick","e","dsoClose","emit","icon","class","selectableCss","DsoSelectableStyle0","Selectable","fallbackIdentifier","createIdentifier","handleOnChange","target","dsoChange","originalEvent","checked","HTMLInputElement","forceUpdate","host","toggleInfo","active","infoActive","componentDidLoad","_a","mutationObserver","disconnect","MutationObserver","observe","childList","setIndeterminate","disconnectedCallback","input","indeterminate","hasInfo","querySelector","clsx","keyboardFocus","id","getIdentifier","value","name","invalid","toString","infoFixed","describedById","undefined","labelledById","disabled","required","onChange","onBlur","onKeyUp","ref","el","htmlFor","onDsoToggle","detail","onDsoClose","componentDidRender","identifier"],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx","src/components/selectable/selectable.scss?tag=dso-selectable&encapsulation=scoped","src/components/selectable/selectable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n  display: block;\r\n\r\n  @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n  display: none;\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n","import { h, Component, Event, Prop, EventEmitter, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-info\",\r\n  styleUrl: \"./info.scss\",\r\n  shadow: true,\r\n})\r\nexport class Info {\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fixed?: boolean;\r\n\r\n  /**\r\n   * Whether the Info is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the close button.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <slot></slot>\r\n        {!this.fixed && (\r\n          <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Sluiten</span>\r\n          </button>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  @include selectable.root(false);\r\n\r\n  padding-inline-start: selectable.$symbol-indent;\r\n\r\n  &[invalid]:not([invalid=\"false\"]) {\r\n    @include selectable.invalid();\r\n  }\r\n}\r\n\r\n:host(:not(:last-child)) {\r\n  @include selectable.notLastChild();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-selectable-container {\r\n  display: inline-block;\r\n\r\n  .dso-selectable-input-wrapper {\r\n    display: inline-block;\r\n    min-height: units.$u3;\r\n\r\n    &:focus-within.dso-keyboard-focus {\r\n      position: relative;\r\n      inset-inline-start: -(selectable.$symbol-indent);\r\n\r\n      padding-inline-start: selectable.$symbol-indent;\r\n\r\n      margin-inline-end: -(selectable.$symbol-indent);\r\n\r\n      @include utilities.focus-outline();\r\n    }\r\n\r\n    input[type=\"radio\"],\r\n    input[type=\"checkbox\"] {\r\n      &:focus + label::before {\r\n        @include selectable.selectableBoxShadow(\r\n          selectable.$border-width,\r\n          var(--dso-selectable-color, selectable.$valid-color)\r\n        );\r\n      }\r\n    }\r\n  }\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  Prop,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Element,\r\n  State,\r\n  forceUpdate,\r\n  Watch,\r\n  Method,\r\n  ComponentInterface,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\r\n */\r\n@Component({\r\n  tag: \"dso-selectable\",\r\n  styleUrl: \"selectable.scss\",\r\n  scoped: true,\r\n})\r\nexport class Selectable implements ComponentInterface {\r\n  /**\r\n   * Type of Selectable.\r\n   *\r\n   * `checkbox`: Multiple options\r\n   * `radio`: Single option.\r\n   */\r\n  @Prop()\r\n  type!: \"checkbox\" | \"radio\";\r\n\r\n  /**\r\n   * To set `<input id>` attribute for external references.\r\n   */\r\n  @Prop()\r\n  identifier?: string;\r\n\r\n  /**\r\n   * Name of the Selectable. Can be used to group Selectables.\r\n   */\r\n  @Prop()\r\n  name?: string;\r\n\r\n  /**\r\n   * The value of the Selectable.\r\n   */\r\n  @Prop()\r\n  value!: string;\r\n\r\n  /**\r\n   * Set to true of the current value is not valid.\r\n   */\r\n  @Prop()\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * To link this control to an element that describes it.\r\n   */\r\n  @Prop()\r\n  describedById?: string;\r\n\r\n  /**\r\n   * To link this control to an element that labels it.\r\n   */\r\n  @Prop()\r\n  labelledById?: string;\r\n\r\n  /**\r\n   * To disable the Selectable.\r\n   */\r\n  @Prop()\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * To mark the Selectable as required.\r\n   */\r\n  @Prop()\r\n  required?: boolean;\r\n\r\n  /**\r\n   * Mark the Selectable as checked\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked?: boolean;\r\n\r\n  /**\r\n   * An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n   *\r\n   * Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n   */\r\n  @Prop()\r\n  indeterminate?: boolean;\r\n\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop()\r\n  infoFixed?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks the Selectable.\r\n   */\r\n  @Event()\r\n  dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoSelectableElement;\r\n\r\n  @State()\r\n  infoActive = false;\r\n\r\n  @State()\r\n  keyboardFocus = false;\r\n\r\n  /**\r\n   * Method to toggle the Info. Is set to `active` when passed.\r\n   *\r\n   * If `active` is not passed, Info is toggled to opposite value.\r\n   * @param active\r\n   */\r\n  @Method()\r\n  async toggleInfo(active?: boolean) {\r\n    this.infoActive = active ?? !this.infoActive;\r\n  }\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n  private input: HTMLInputElement | undefined;\r\n\r\n  private handleOnChange = (e: Event) => {\r\n    const { target } = e;\r\n\r\n    this.dsoChange.emit({\r\n      originalEvent: e,\r\n      checked: target instanceof HTMLInputElement && target.checked,\r\n    });\r\n\r\n    forceUpdate(this.host);\r\n  };\r\n\r\n  componentDidLoad() {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n    this.mutationObserver.observe(this.host, {\r\n      childList: true,\r\n    });\r\n\r\n    this.setIndeterminate();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  @Watch(\"indeterminate\")\r\n  setIndeterminate() {\r\n    if (!(this.input instanceof HTMLInputElement) || this.type !== \"checkbox\") {\r\n      return;\r\n    }\r\n\r\n    this.input.indeterminate = !!this.indeterminate;\r\n  }\r\n\r\n  render() {\r\n    const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n    return (\r\n      <Fragment>\r\n        <div class=\"dso-selectable-container\">\r\n          <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n            <input\r\n              type={this.type}\r\n              id={this.getIdentifier()}\r\n              value={this.value}\r\n              name={this.name}\r\n              aria-invalid={this.invalid?.toString()}\r\n              aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n              aria-labelledBy={this.labelledById}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              checked={this.checked}\r\n              onChange={this.handleOnChange}\r\n              onBlur={() => (this.keyboardFocus = false)}\r\n              onKeyUp={() => (this.keyboardFocus = true)}\r\n              ref={(el) => (this.input = el)}\r\n            />\r\n            {!this.labelledById ? (\r\n              <label htmlFor={this.getIdentifier()}>\r\n                <slot />\r\n              </label>\r\n            ) : (\r\n              <label>\r\n                <slot />\r\n              </label>\r\n            )}\r\n          </div>\r\n          {hasInfo && !this.infoFixed && (\r\n            <dso-info-button\r\n              active={this.infoActive}\r\n              onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n            ></dso-info-button>\r\n          )}\r\n        </div>\r\n        {hasInfo && (\r\n          <dso-info\r\n            id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n            fixed={this.infoFixed}\r\n            active={this.infoActive}\r\n            onDsoClose={() => (this.infoActive = false)}\r\n          >\r\n            <div>\r\n              <slot name=\"info\"></slot>\r\n            </div>\r\n          </dso-info>\r\n        )}\r\n        <slot name=\"options\" />\r\n      </Fragment>\r\n    );\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    if (this.input && typeof this.checked === \"boolean\" && this.input.checked !== this.checked) {\r\n      this.input.checked = this.checked;\r\n    }\r\n  }\r\n\r\n  private getIdentifier(): string {\r\n    return this.identifier ?? this.fallbackIdentifier;\r\n  }\r\n}\r\n"],"mappings":"+IAAA,MAAMA,EAAU,+rBAChB,MAAAC,EAAeD,E,MCMFE,EAAI,M,uGAmBf,MAAAC,GACE,OACEC,EAACC,EAAQ,CAAAC,IAAA,4CACPF,EAAA,QAAAE,IAAA,8CACEC,KAAKC,OACLJ,EAAA,UAAAE,IAAA,2CAAQG,KAAK,SAASC,QAAUC,GAAMJ,KAAKK,SAASC,KAAKF,IACvDP,EAAA,YAAAE,IAAA,2CAAUQ,KAAK,UACfV,EAAA,QAAAE,IAAA,2CAAMS,MAAM,WAAS,Y,aCjCjC,MAAMC,EAAgB,y0KACtB,MAAAC,EAAeD,E,MC2BFE,EAAU,M,8DA0GbX,KAAAY,mBAAqBC,EAAiB,iBAItCb,KAAAc,eAAkBV,IACxB,MAAMW,OAAEA,GAAWX,EAEnBJ,KAAKgB,UAAUV,KAAK,CAClBW,cAAeb,EACfc,QAASH,aAAkBI,kBAAoBJ,EAAOG,UAGxDE,EAAYpB,KAAKqB,KAAK,E,oTA9BX,M,mBAGG,K,CAShB,gBAAMC,CAAWC,GACfvB,KAAKwB,WAAaD,IAAM,MAANA,SAAM,EAANA,GAAWvB,KAAKwB,U,CAoBpC,gBAAAC,G,OACEC,EAAA1B,KAAK2B,oBAAgB,MAAAD,SAAA,SAAAA,EAAEE,aAEvB5B,KAAK2B,iBAAmB,IAAIE,kBAAiB,IAAMT,EAAYpB,KAAKqB,QACpErB,KAAK2B,iBAAiBG,QAAQ9B,KAAKqB,KAAM,CACvCU,UAAW,OAGb/B,KAAKgC,kB,CAGP,oBAAAC,G,OACEP,EAAA1B,KAAK2B,oBAAgB,MAAAD,SAAA,SAAAA,EAAEE,Y,CAIzB,gBAAAI,GACE,KAAMhC,KAAKkC,iBAAiBf,mBAAqBnB,KAAKE,OAAS,WAAY,CACzE,M,CAGFF,KAAKkC,MAAMC,gBAAkBnC,KAAKmC,a,CAGpC,MAAAvC,G,MACE,MAAMwC,IAAYpC,KAAKqB,KAAKgB,cAAc,iBAE1C,OACExC,EAACC,EAAQ,CAAAC,IAAA,4CACPF,EAAA,OAAAE,IAAA,2CAAKS,MAAM,4BACTX,EAAA,OAAAE,IAAA,2CAAKS,MAAO8B,EAAK,+BAAgC,CAAE,qBAAsBtC,KAAKuC,iBAC5E1C,EAAA,SAAAE,IAAA,2CACEG,KAAMF,KAAKE,KACXsC,GAAIxC,KAAKyC,gBACTC,MAAO1C,KAAK0C,MACZC,KAAM3C,KAAK2C,KAAI,gBACDjB,EAAA1B,KAAK4C,WAAO,MAAAlB,SAAA,SAAAA,EAAEmB,WAAU,mBACpBT,GAAWpC,KAAK8C,UAAY9C,KAAK+C,cAAgBC,UAAS,kBAC3DhD,KAAKiD,aACtBC,SAAUlD,KAAKkD,SACfC,SAAUnD,KAAKmD,SACfjC,QAASlB,KAAKkB,QACdkC,SAAUpD,KAAKc,eACfuC,OAAQ,IAAOrD,KAAKuC,cAAgB,MACpCe,QAAS,IAAOtD,KAAKuC,cAAgB,KACrCgB,IAAMC,GAAQxD,KAAKkC,MAAQsB,KAE3BxD,KAAKiD,aACLpD,EAAA,SAAO4D,QAASzD,KAAKyC,iBACnB5C,EAAA,cAGFA,EAAA,aACEA,EAAA,eAILuC,IAAYpC,KAAK8C,WAChBjD,EAAA,mBAAAE,IAAA,2CACEwB,OAAQvB,KAAKwB,WACbkC,YAActD,GAAOJ,KAAKwB,WAAapB,EAAEuD,OAAOpC,UAIrDa,GACCvC,EAAA,YAAAE,IAAA,2CACEyC,GAAIJ,GAAWpC,KAAK8C,UAAY9C,KAAK+C,cAAgBC,UACrD/C,MAAOD,KAAK8C,UACZvB,OAAQvB,KAAKwB,WACboC,WAAY,IAAO5D,KAAKwB,WAAa,OAErC3B,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAM4C,KAAK,WAIjB9C,EAAA,QAAAE,IAAA,2CAAM4C,KAAK,Y,CAKjB,kBAAAkB,GACE,GAAI7D,KAAKkC,cAAgBlC,KAAKkB,UAAY,WAAalB,KAAKkC,MAAMhB,UAAYlB,KAAKkB,QAAS,CAC1FlB,KAAKkC,MAAMhB,QAAUlB,KAAKkB,O,EAItB,aAAAuB,G,MACN,OAAOf,EAAA1B,KAAK8D,cAAU,MAAApC,SAAA,EAAAA,EAAI1B,KAAKY,kB"}

package/dist/dso-toolkit/{p-cef2a4da.entry.js → p-8012e14f.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,c as d,h as s,a}from"./p-701648d3.js";import{g as i}from"./p-c8f6f8d9.js";import{v as l}from"./p-14616bce.js";const e="@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>.dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>.dso-body img{height:auto;max-width:100%}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{height:auto;max-width:100%}.dso-modal .dso-body:focus-visible{outline:none}.dso-modal .dso-footer{min-block-size:80px;padding:16px 32px;text-align:end}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding:8px 16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding:16px 24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding:8px 32px}}.dso-close dso-icon{color:#39870c}";const t=e;const r=class{constructor(s){o(this,s);this.dsoClose=d(this,"dsoClose",7);this.ariaId=l();this.fullscreen=undefined;this.modalTitle=undefined;this.role="dialog";this.returnFocus=undefined;this.showCloseButton=true}get hasFooter(){return this.host.querySelector("[slot='footer']")!==null}componentDidLoad(){var o;if((o=this.htmlDialogElement)===null||o===void 0?void 0:o.isConnected){const o=i();if(o instanceof HTMLElement){this.returnFocusElement=o}this.htmlDialogElement.showModal()}}disconnectedCallback(){var o,d,s;(o=this.htmlDialogElement)===null||o===void 0?void 0:o.close();if(this.returnFocus===false){return}(s=(d=this.returnFocus)!==null&&d!==void 0?d:this.returnFocusElement)===null||s===void 0?void 0:s.focus()}render(){var o;return s("dialog",{key:"6072654b30fb1d5d37a85e415cc8238d9737fb62",class:"dso-modal",role:(o=this.role)!==null&&o!==void 0?o:undefined,"aria-modal":"true","aria-labelledby":this.ariaId,ref:o=>this.htmlDialogElement=o,onCancel:o=>{o.preventDefault();this.dsoClose.emit({originalEvent:o})}},s("div",{key:"f1332e303c002cdc221237f69691c339fe6b629f",class:"dso-dialog",role:"document"},this.modalTitle?s("div",{class:"dso-header"},s("h2",{id:this.ariaId},this.modalTitle),this.showCloseButton&&s("button",{type:"button",class:"dso-close",onClick:o=>this.dsoClose.emit({originalEvent:o})},s("dso-icon",{icon:"times"}),s("span",{class:"sr-only"},"Sluiten"))):s("span",{class:"sr-only",id:this.ariaId},"Dialoog"),s("dso-scrollable",{key:"8ada9f86ded3d0b35cfcc2df1edcd2c969864d00"},s("div",{key:"b3845f15bdb227ade9a13ef4e718c6a13b0e21b8",class:"dso-body",tabIndex:0},s("slot",{key:"5b55389b43bcaa09eabef43e16cb2d298e9d47dd",name:"body"}))),this.hasFooter&&s("div",{key:"135742b97efe4617a4ec7f64b86461fa69b5ab4a",class:"dso-footer"},s("slot",{key:"6ddd36972880b56bc98764da436872a38664ad44",name:"footer"}))))}get host(){return a(this)}};r.style=t;export{r as dso_modal};
-//# sourceMappingURL=p-cef2a4da.entry.js.map
+import{r as o,c as d,h as s,a}from"./p-e1b4d45b.js";import{g as i}from"./p-c8f6f8d9.js";import{v as l}from"./p-14616bce.js";const e="@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>.dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>.dso-body img{height:auto;max-width:100%}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{height:auto;max-width:100%}.dso-modal .dso-body:focus-visible{outline:none}.dso-modal .dso-footer{min-block-size:80px;padding:16px 32px;text-align:end}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding:8px 16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding:16px 24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding:8px 32px}}.dso-close dso-icon{color:#39870c}";const t=e;const r=class{constructor(s){o(this,s);this.dsoClose=d(this,"dsoClose",7);this.ariaId=l();this.fullscreen=undefined;this.modalTitle=undefined;this.role="dialog";this.returnFocus=undefined;this.showCloseButton=true}get hasFooter(){return this.host.querySelector("[slot='footer']")!==null}componentDidLoad(){var o;if((o=this.htmlDialogElement)===null||o===void 0?void 0:o.isConnected){const o=i();if(o instanceof HTMLElement){this.returnFocusElement=o}this.htmlDialogElement.showModal()}}disconnectedCallback(){var o,d,s;(o=this.htmlDialogElement)===null||o===void 0?void 0:o.close();if(this.returnFocus===false){return}(s=(d=this.returnFocus)!==null&&d!==void 0?d:this.returnFocusElement)===null||s===void 0?void 0:s.focus()}render(){var o;return s("dialog",{key:"8667722ca1444f173b011507c9c4a06ff3ddeddd",class:"dso-modal",role:(o=this.role)!==null&&o!==void 0?o:undefined,"aria-modal":"true","aria-labelledby":this.ariaId,ref:o=>this.htmlDialogElement=o,onCancel:o=>{o.preventDefault();this.dsoClose.emit({originalEvent:o})}},s("div",{key:"0ebf13e604a159c4bb08c96fd0d87011b09fd6e7",class:"dso-dialog",role:"document"},this.modalTitle?s("div",{class:"dso-header"},s("h2",{id:this.ariaId},this.modalTitle),this.showCloseButton&&s("button",{type:"button",class:"dso-close",onClick:o=>this.dsoClose.emit({originalEvent:o})},s("dso-icon",{icon:"times"}),s("span",{class:"sr-only"},"Sluiten"))):s("span",{class:"sr-only",id:this.ariaId},"Dialoog"),s("dso-scrollable",{key:"434522fd8d1c2d518a7bbb410dafc674f3f72c99"},s("div",{key:"8399490f6dd67d60a30646c1e2727535dae856a6",class:"dso-body",tabIndex:0},s("slot",{key:"6f27377f5311c753944b9f1f3f019c84bd41b15a",name:"body"}))),this.hasFooter&&s("div",{key:"d8d14ec73fc2c2c3fe099d03cf83b992a8f6378a",class:"dso-footer"},s("slot",{key:"1b780ea4a62678c453050e32831ca5c0dc26b36c",name:"footer"}))))}get host(){return a(this)}};r.style=t;export{r as dso_modal};
+//# sourceMappingURL=p-8012e14f.entry.js.map