@dso-toolkit/core 72.2.0 → 73.0.0

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

@@ -0,0 +1,2 @@
+import{r as n,c as o,h as e,F as r,g as a,H as t}from"./p-D2Jo0W7B.js";import{A as s}from"./p-COKRRU_q.js";import{w as i,A as d,a as l}from"./p-D4cSA4l8.js";import{i as c}from"./p-Hgv-pDpy.js";const b='a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a :is(dso-icon,svg.di)+span,a span+:is(dso-icon,svg.di){margin-inline-start:8px}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:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-image:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-image:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-di-background-image, url("./di.svg#email-scampi"))}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=voegtoe]){box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}:host([wijzigactie=verwijder]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=verwijder]){text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){:host([wijzigactie=verwijder]){font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500;word-break:break-word}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}';const g=class{constructor(e){n(this,e);this.dsoActiveChange=o(this,"dsoActiveChange",7);this.watcher=i(this.host)}connectedCallback(){this.watcher.watch()}disconnectedCallback(){this.watcher.unwatch()}render(){const n=this.watcher.hasSymbool();return e(s,{key:"fc08e2a53be97c74718fb33d5acd371186f3dcf7",symbol:n?e(l,null):undefined,active:this.active,dsoActiveChange:this.dsoActiveChange,title:e(r,null,e("span",{class:"content"},e("dso-renvooi",{value:this.locatieNoemer})),this.gewijzigdeLocatie&&e(d,null))})}get host(){return a(this)}};g.style=b;var y=undefined&&undefined.__rest||function(n,o){var e={};for(var r in n)if(Object.prototype.hasOwnProperty.call(n,r)&&o.indexOf(r)<0)e[r]=n[r];if(n!=null&&typeof Object.getOwnPropertySymbols==="function")for(var a=0,r=Object.getOwnPropertySymbols(n);a<r.length;a++){if(o.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(n,r[a]))e[r[a]]=n[r[a]]}return e};const h=(n,o)=>{var{heading:r,mode:a,href:t,onClick:s}=n,i=y(n,["heading","mode","href","onClick"]);let d;switch(r){default:case"h2":d=e("h2",Object.assign({},i,{onClick:a==="document"?s:undefined}),o);break;case"h3":d=e("h3",Object.assign({},i,{onClick:a==="document"?s:undefined}),o);break;case"h4":d=e("h4",Object.assign({},i,{onClick:a==="document"?s:undefined}),o);break;case"h5":d=e("h5",Object.assign({},i,{onClick:a==="document"?s:undefined}),o);break;case"h6":d=e("h6",Object.assign({},i,{onClick:a==="document"?s:undefined}),o)}if(a==="table-of-contents"&&t){return e("a",{href:t,onClick:s,class:"heading-anchor"},d)}return d};const p="button {\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\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\na.dso-primary:focus, a.dso-primary:focus-visible,\nbutton.dso-primary:focus,\nbutton.dso-primary:focus-visible,\nlabel.dso-primary:focus,\nlabel.dso-primary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n  outline: 0;\n}\na.dso-primary.extern::after, a.dso-primary.download::after,\nbutton.dso-primary.extern::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.extern::after,\nlabel.dso-primary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n  background-color: var(--_dso-button-primary-background-color, #39870c);\n  border-color: var(--_dso-button-primary-border-color, #39870c);\n  color: var(--_dso-button-primary-color, #fff);\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\na.dso-primary:hover,\nbutton.dso-primary:hover,\nlabel.dso-primary:hover {\n  background-color: var(--_dso-button-primary-hover-background-color, #275937);\n  border-color: var(--_dso-button-primary-hover-border-color, #275937);\n  color: var(--_dso-button-primary-hover-color, #fff);\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n  background-color: var(--_dso-button-primary-active-background-color, #173521);\n  border-color: var(--_dso-button-primary-active-border-color, #173521);\n  color: var(--_dso-button-primary-active-color, #fff);\n}\na.dso-primary[disabled], a.dso-primary[disabled]:hover,\nbutton.dso-primary[disabled],\nbutton.dso-primary[disabled]:hover,\nlabel.dso-primary[disabled],\nlabel.dso-primary[disabled]:hover {\n  background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);\n  border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-primary-disabled-color, #fff);\n}\na.dso-primary.dso-small,\nbutton.dso-primary.dso-small,\nlabel.dso-primary.dso-small {\n  line-height: 1rem;\n}\na.dso-primary.dso-small dso-icon,\na.dso-primary.dso-small svg.di, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,\nbutton.dso-primary.dso-small dso-icon,\nbutton.dso-primary.dso-small svg.di,\nbutton.dso-primary.dso-small.extern::after,\nbutton.dso-primary.dso-small.download::after,\nbutton.dso-primary.dso-small.dso-spinner::before,\nlabel.dso-primary.dso-small dso-icon,\nlabel.dso-primary.dso-small svg.di,\nlabel.dso-primary.dso-small.extern::after,\nlabel.dso-primary.dso-small.download::after,\nlabel.dso-primary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-primary.dso-small.dso-spinner-left::before,\nbutton.dso-primary.dso-small.dso-spinner-left::before,\nlabel.dso-primary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary.dso-small.dso-spinner-right::after,\nbutton.dso-primary.dso-small.dso-spinner-right::after,\nlabel.dso-primary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary dso-icon:has(+ span:not(.sr-only)),\na.dso-primary svg.di:has(+ span:not(.sr-only)),\nbutton.dso-primary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-primary svg.di:has(+ span:not(.sr-only)),\nlabel.dso-primary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-primary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-primary span:not(.sr-only) + dso-icon,\na.dso-primary span:not(.sr-only) + svg.di,\nbutton.dso-primary span:not(.sr-only) + dso-icon,\nbutton.dso-primary span:not(.sr-only) + svg.di,\nlabel.dso-primary span:not(.sr-only) + dso-icon,\nlabel.dso-primary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-primary dso-icon + span:not(.sr-only),\na.dso-primary svg.di + span:not(.sr-only),\nbutton.dso-primary dso-icon + span:not(.sr-only),\nbutton.dso-primary svg.di + span:not(.sr-only),\nlabel.dso-primary dso-icon + span:not(.sr-only),\nlabel.dso-primary svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\na.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],\nbutton.dso-primary.dso-spinner-left[disabled],\nbutton.dso-primary.dso-spinner-right[disabled],\nlabel.dso-primary.dso-spinner-left[disabled],\nlabel.dso-primary.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\na.dso-primary.dso-spinner-left::before,\nbutton.dso-primary.dso-spinner-left::before,\nlabel.dso-primary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-primary.dso-spinner-right::after,\nbutton.dso-primary.dso-spinner-right::after,\nlabel.dso-primary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-primary.download::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.download::after {\n  background: url(\"./di.svg#download-wit\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-primary.extern::after,\nbutton.dso-primary.extern::after,\nlabel.dso-primary.extern::after {\n  background: url(\"./di.svg#external-link-wit\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\na.dso-secondary:focus, a.dso-secondary:focus-visible,\nbutton.dso-secondary:focus,\nbutton.dso-secondary:focus-visible,\nlabel.dso-secondary:focus,\nlabel.dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n  outline: 0;\n}\na.dso-secondary.extern::after, a.dso-secondary.download::after,\nbutton.dso-secondary.extern::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.extern::after,\nlabel.dso-secondary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n  background-color: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-color, #39870c);\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.dso-secondary:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #39870c);\n  color: var(--_dso-button-secondary-hover-color, #39870c);\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #39870c);\n  border-color: var(--_dso-button-secondary-active-border-color, #39870c);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\na.dso-secondary[disabled], a.dso-secondary[disabled]:hover,\nbutton.dso-secondary[disabled],\nbutton.dso-secondary[disabled]:hover,\nlabel.dso-secondary[disabled],\nlabel.dso-secondary[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\na.dso-secondary.dso-small,\nbutton.dso-secondary.dso-small,\nlabel.dso-secondary.dso-small {\n  line-height: 1rem;\n}\na.dso-secondary.dso-small dso-icon,\na.dso-secondary.dso-small svg.di, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di,\nbutton.dso-secondary.dso-small.extern::after,\nbutton.dso-secondary.dso-small.download::after,\nbutton.dso-secondary.dso-small.dso-spinner::before,\nlabel.dso-secondary.dso-small dso-icon,\nlabel.dso-secondary.dso-small svg.di,\nlabel.dso-secondary.dso-small.extern::after,\nlabel.dso-secondary.dso-small.download::after,\nlabel.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-secondary.dso-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary dso-icon:has(+ span:not(.sr-only)),\na.dso-secondary svg.di:has(+ span:not(.sr-only)),\nbutton.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-secondary svg.di:has(+ span:not(.sr-only)),\nlabel.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-secondary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-secondary span:not(.sr-only) + dso-icon,\na.dso-secondary span:not(.sr-only) + svg.di,\nbutton.dso-secondary span:not(.sr-only) + dso-icon,\nbutton.dso-secondary span:not(.sr-only) + svg.di,\nlabel.dso-secondary span:not(.sr-only) + dso-icon,\nlabel.dso-secondary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-secondary dso-icon + span:not(.sr-only),\na.dso-secondary svg.di + span:not(.sr-only),\nbutton.dso-secondary dso-icon + span:not(.sr-only),\nbutton.dso-secondary svg.di + span:not(.sr-only),\nlabel.dso-secondary dso-icon + span:not(.sr-only),\nlabel.dso-secondary svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],\nbutton.dso-secondary.dso-spinner-left[disabled],\nbutton.dso-secondary.dso-spinner-right[disabled],\nlabel.dso-secondary.dso-spinner-left[disabled],\nlabel.dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\na.dso-secondary.dso-spinner-left::before,\nbutton.dso-secondary.dso-spinner-left::before,\nlabel.dso-secondary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-spinner-right::after,\nbutton.dso-secondary.dso-spinner-right::after,\nlabel.dso-secondary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.download::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.download::after {\n  background: url(\"./di.svg#download\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary.download:hover::after,\nbutton.dso-secondary.download:hover::after,\nlabel.dso-secondary.download:hover::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\na.dso-secondary.download[disabled]::after,\nbutton.dso-secondary.download[disabled]::after,\nlabel.dso-secondary.download[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-grasgroen-40\"));\n}\na.dso-secondary.extern::after,\nbutton.dso-secondary.extern::after,\nlabel.dso-secondary.extern::after {\n  background: url(\"./di.svg#external-link\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary.extern:hover::after,\nbutton.dso-secondary.extern:hover::after,\nlabel.dso-secondary.extern:hover::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\na.dso-secondary.extern[disabled]::after,\nbutton.dso-secondary.extern[disabled]::after,\nlabel.dso-secondary.extern[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-grasgroen-40\"));\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\na.dso-tertiary:focus, a.dso-tertiary:focus-visible,\nbutton.dso-tertiary:focus,\nbutton.dso-tertiary:focus-visible,\nlabel.dso-tertiary:focus,\nlabel.dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-tertiary:active,\nbutton.dso-tertiary:active,\nlabel.dso-tertiary:active {\n  outline: 0;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\na.dso-tertiary[disabled],\nbutton.dso-tertiary[disabled],\nlabel.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\na.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,\nbutton.dso-tertiary[disabled].dso-spinner-left,\nbutton.dso-tertiary[disabled].dso-spinner-right,\nlabel.dso-tertiary[disabled].dso-spinner-left,\nlabel.dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\na.dso-tertiary:not([disabled]):hover,\nbutton.dso-tertiary:not([disabled]):hover,\nlabel.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\na.dso-tertiary:not([disabled]):active,\nbutton.dso-tertiary:not([disabled]):active,\nlabel.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\na.dso-tertiary.dso-align,\nbutton.dso-tertiary.dso-align,\nlabel.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\na.dso-tertiary.dso-truncate,\nbutton.dso-tertiary.dso-truncate,\nlabel.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\na.dso-tertiary.dso-spinner-left::before,\nbutton.dso-tertiary.dso-spinner-left::before,\nlabel.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-tertiary.dso-spinner-right::after,\nbutton.dso-tertiary.dso-spinner-right::after,\nlabel.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-tertiary dso-icon + span:not(.sr-only),\na.dso-tertiary svg.di + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + dso-icon,\na.dso-tertiary span:not(.sr-only) + svg.di,\nbutton.dso-tertiary dso-icon + span:not(.sr-only),\nbutton.dso-tertiary svg.di + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + dso-icon,\nbutton.dso-tertiary span:not(.sr-only) + svg.di,\nlabel.dso-tertiary dso-icon + span:not(.sr-only),\nlabel.dso-tertiary svg.di + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + dso-icon,\nlabel.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\na.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nbutton.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nlabel.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\na.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\na.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nbutton.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nbutton.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nlabel.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nlabel.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\na.dso-tertiary dso-icon,\na.dso-tertiary svg.di,\na.dso-tertiary span,\nbutton.dso-tertiary dso-icon,\nbutton.dso-tertiary svg.di,\nbutton.dso-tertiary span,\nlabel.dso-tertiary dso-icon,\nlabel.dso-tertiary svg.di,\nlabel.dso-tertiary span {\n  vertical-align: middle;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n  position: relative;\n  inset-block-start: -2px;\n}\na.dso-tertiary.download::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.download::after {\n  background: url(\"./di.svg#download\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-tertiary.download[disabled]::after,\nbutton.dso-tertiary.download[disabled]::after,\nlabel.dso-tertiary.download[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-grasgroen-40\"));\n}\na.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,\nbutton.dso-tertiary.download:not([disabled]):hover::after,\nbutton.dso-tertiary.download:not([disabled]):active::after,\nlabel.dso-tertiary.download:not([disabled]):hover::after,\nlabel.dso-tertiary.download:not([disabled]):active::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-bosgroen\"));\n}\na.dso-tertiary.extern::after,\nbutton.dso-tertiary.extern::after,\nlabel.dso-tertiary.extern::after {\n  background: url(\"./di.svg#external-link\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-tertiary.extern[disabled]::after,\nbutton.dso-tertiary.extern[disabled]::after,\nlabel.dso-tertiary.extern[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-grasgroen-40\"));\n}\na.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,\nbutton.dso-tertiary.extern:not([disabled]):hover::after,\nbutton.dso-tertiary.extern:not([disabled]):active::after,\nlabel.dso-tertiary.extern:not([disabled]):hover::after,\nlabel.dso-tertiary.extern:not([disabled]):active::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-bosgroen\"));\n}\n\na.dso-primary {\n  text-decoration: none;\n}\na.dso-primary, a.dso-primary:visited {\n  color: #fff;\n}\na.dso-secondary {\n  text-decoration: none;\n}\na.dso-secondary, a.dso-secondary:visited {\n  color: #39870c;\n}\na.dso-secondary:hover, a.dso-secondary:visited:hover {\n  color: #39870c;\n}\na.dso-tertiary {\n  text-decoration: none;\n}\na.dso-tertiary, a.dso-tertiary:visited {\n  color: #39870c;\n}\n\n.dso-primary + .dso-primary,\n.dso-primary + .dso-secondary,\n.dso-primary + .dso-tertiary,\n.dso-secondary + .dso-primary,\n.dso-secondary + .dso-secondary,\n.dso-secondary + .dso-tertiary,\n.dso-tertiary + .dso-primary,\n.dso-tertiary + .dso-secondary,\n.dso-tertiary + .dso-tertiary {\n  margin-inline-start: 16px;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n:host {\n  display: block;\n  --depth: var(--a, 0);\n}\n\n:host([not-collapsible]:where([wijzigactie=verwijder], [wijzigactie=voegtoe])) {\n  padding-inline-start: 8px;\n  margin-inline-end: 8px;\n}\n\n:host(:where([wijzigactie=verwijder], [wijzigactie=voegtoe])),\n:host(:where([wijzigactie=nieuweContainer], [wijzigactie=verwijderContainer])) .heading-container {\n  padding-block-start: 4px;\n  padding-block-end: 4px;\n}\n\n:host([wijzigactie=verwijderContainer]) .heading-container,\n:host(:where([wijzigactie=verwijder])) {\n  --_dso-document-component-text-decoration: line-through;\n}\n:host([wijzigactie=verwijderContainer]) .heading-container,\n:host(:where([wijzigactie=verwijder])) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #f5d8dc;\n  border-color: #f5d8dc;\n  color: #191919;\n}\n:host([wijzigactie=verwijderContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible),\n:host(:where([wijzigactie=verwijder])) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\n:host([wijzigactie=verwijderContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible),\n:host(:where([wijzigactie=verwijder])) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\n:host([wijzigactie=verwijderContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\n:host(:where([wijzigactie=verwijder])) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\n:host([wijzigactie=verwijderContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\n:host(:where([wijzigactie=verwijder])) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\n\n.heading-element,\n.content {\n  text-decoration: var(--_dso-document-component-text-decoration);\n}\n@media screen and (min--moz-device-pixel-ratio: 0) {\n  .heading-element,\n  .content {\n    font-family: sans-serif;\n  }\n}\n\n:host([wijzigactie=nieuweContainer]) .heading-container,\n:host([wijzigactie=voegtoe]) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #e4f1d4;\n  border-color: #e4f1d4;\n  color: #191919;\n}\n:host([wijzigactie=nieuweContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible),\n:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\n:host([wijzigactie=nieuweContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible),\n:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\n:host([wijzigactie=nieuweContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\n:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\n:host([wijzigactie=nieuweContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\n:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\n:host([wijzigactie=nieuweContainer]) .heading-container,\n:host([wijzigactie=voegtoe]) {\n  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);\n}\n\n:host([filtered]) {\n  position: relative;\n}\n:host([filtered])::before {\n  content: \"\";\n  inset-inline-start: -3px;\n  position: absolute;\n  display: block;\n  inline-size: 3px;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  background-color: #6ca4d9;\n}\n\n:host([open]) .annotation-container,\n:host([open]) .heading-container,\n:host([open-annotation]) .annotation-container,\n:host([open-annotation]) .heading-container {\n  margin-block-end: 8px;\n}\n\n.recursive-toggle,\n.toggle-button {\n  border: 0;\n  padding: 0;\n  background: 0;\n  color: #275937;\n}\n\n.heading-anchor {\n  display: flex;\n  flex-wrap: nowrap;\n  background-color: transparent;\n  color: var(--link-color);\n  text-decoration: underline;\n  text-underline-offset: 15%;\n  text-decoration: none;\n}\n.heading-anchor:hover, .heading-anchor:focus-visible {\n  color: var(--link-hover-color);\n  text-decoration: underline;\n}\n.heading-anchor:active {\n  text-decoration: none;\n}\n.heading-anchor :is(dso-icon, svg.di) + span,\n.heading-anchor span + :is(dso-icon, svg.di) {\n  margin-inline-start: 8px;\n}\n.heading-anchor:visited {\n  color: var(--link-visited-color);\n}\n\n.heading-element {\n  align-items: start;\n  display: flex;\n  font-size: 1rem;\n  color: #275937;\n  margin: 0;\n}\n.heading-element > * {\n  vertical-align: middle;\n}\n\n#heading-title {\n  display: block;\n}\n\n:host([not-collapsible]) .heading-container {\n  margin-block-end: 0;\n}\n:host([not-collapsible]) .editaction-label {\n  margin-inline-start: 0;\n}\n:host([not-collapsible]) .heading-element {\n  color: #000;\n}\n\n:host([mode=document]:not([not-collapsible])) {\n  --link-color: #39870c;\n  --link-hover-color: #676cb0;\n}\n:host([mode=document]:not([not-collapsible])) .heading-element {\n  cursor: pointer;\n}\n:host([mode=document]:not([not-collapsible])) .heading-element:hover, :host([mode=document]:not([not-collapsible])) .heading-element:focus-visible {\n  color: var(--link-hover-color);\n  text-decoration: underline;\n}\n:host([mode=document]:not([not-collapsible])) .heading-element:active {\n  text-decoration: none;\n}\n:host([mode=document]:not([not-collapsible])) .editaction-label {\n  margin-inline-start: 24px;\n}\n\n:host([mode=table-of-contents]) .heading-container {\n  padding-inline-start: 8px;\n}\n:host([mode=table-of-contents]) .heading-element {\n  color: inherit;\n}\n:host([mode=table-of-contents]) .editaction-label {\n  margin-inline-start: 0;\n}\n\n:host([mode=table-of-contents][type=ARTIKEL]) .heading-element {\n  color: inherit;\n}\n\n:host([mode=table-of-contents]:not([type=HOOFDSTUK])) .heading-element {\n  font-weight: normal;\n}\n\n.addons {\n  margin-inline-start: auto;\n  display: flex;\n  gap: 8px;\n}\n\n.heading {\n  display: flex;\n  align-items: start;\n  gap: 8px;\n}\n\n:host([type=ARTIKEL]) .heading-element,\n:host([type=ARTIKEL]) .toggle-button {\n  color: #000;\n}\n\n:host([type=LID][open-annotation]) .annotation-container {\n  margin-block-start: 8px;\n}\n\n.editaction-label {\n  font-style: italic;\n  margin-inline-start: 8px;\n}\n\n.content,\n.heading-container {\n  padding-inline-end: 8px;\n}\n\n.annotation-container {\n  padding-inline-end: 8px;\n}\n.annotation-container dso-panel {\n  --_dso-panel-body-background-color: #fff;\n}\n\n:host(:where([annotations-wijzigactie=verwijder])) .annotation-container dso-panel {\n  --_dso-panel-body-background-color: #faecee;\n  --_dso-renvooi-text-decoration: line-through;\n}\n\n:host([annotations-wijzigactie=voegtoe]) .annotation-container dso-panel {\n  --_dso-panel-body-background-color: #f2f8ea;\n}";const f={nieuweContainer:"Toegevoegd",verwijder:"Verwijderd",verwijderContainer:"Verwijderd",voegtoe:"Toegevoegd"};const m=class{constructor(e){n(this,e);this.dsoRecursiveToggle=o(this,"dsoRecursiveToggle",3);this.dsoOpenToggle=o(this,"dsoOpenToggle",3);this.dsoTableOfContentsClick=o(this,"dsoTableOfContentsClick",3);this.dsoOzonContentAnchorClick=o(this,"dsoOzonContentAnchorClick",3);this.dsoAnnotationToggle=o(this,"dsoAnnotationToggle",3);this.dsoMarkItemHighlight=o(this,"dsoMarkItemHighlight",3);this.heading="h2";this.open=false;this.filtered=false;this.notApplicable=false;this.genesteOntwerpInformatie=false;this.bevatOntwerpInformatie=false;this.annotated=false;this.gereserveerd=false;this.vervallen=false;this.openAnnotation=false;this.mode="document";this.handleHeadingClick=n=>{if(this.mode==="table-of-contents"){this.dsoTableOfContentsClick.emit({originalEvent:n,isModifiedEvent:c(n)})}else if(this.type!=="LID"){this.dsoOpenToggle.emit({originalEvent:n,open:!this.open})}};this.handleOzonContentAnchorClick=n=>{this.dsoOzonContentAnchorClick.emit({originalEvent:n,ozonContentAnchorClick:n.detail})};this.handleRecursiveToggleClick=n=>{this.dsoRecursiveToggle.emit({originalEvent:n,current:this.recursiveToggle,next:this.recursiveToggle!==true})}}get wijzigactieLabel(){return this.wijzigactie&&f[this.wijzigactie]}suffix(){if(this.vervallen){return"vervallen"}if(this.gereserveerd){return"gereserveerd"}return undefined}showOntwerpBadge(){return this.genesteOntwerpInformatie&&!this.bevatOntwerpInformatie&&(!this.open&&this.mode==="document"||this.mode==="table-of-contents")}render(){const n=this.suffix();const o=!!((this.label||this.nummer||this.opschrift||this.kop||this.alternativeTitle)&&this.type!=="LID");const a=!!(this.wijzigactie||o||this.label||this.nummer||this.opschrift||this.kop||this.alternativeTitle||this.bevatOntwerpInformatie||this.annotated);return e(t,{key:"a910b56cbc4b80c74bd9fdbd15189ba11b8c289b","not-collapsible":!o},a&&e("div",{key:"fd0c086debcf1ba7010cdd41c40be2a6e9828cda",class:"heading-container",part:"_heading-container"},this.wijzigactie&&e("span",{key:"24b8d8a6d563df1624712f42e3cdcd2b46f19318",class:"editaction-label"},this.wijzigactieLabel,":"),e("div",{key:"35d9de6af858084e587bf0d5159b25c388601c51",class:"heading"},e(h,{key:"22b1755a009bbebd1c341d94226db0ef4375a8e0",heading:this.heading,class:"heading-element",onClick:this.handleHeadingClick,mode:this.mode,href:this.href},o&&this.mode==="document"&&e("button",{key:"e01e14b3b882e00d6aef31bc5d9ae72dc6ec5534",type:"button",class:"toggle-button","aria-describedby":"heading-title","aria-expanded":this.open.toString()},e("dso-icon",{key:"71878eed98894da8e606ce9d36f73ba87f709d2a",icon:this.open?"chevron-down":"chevron-right"}),e("span",{key:"21c4efc05e84f6a46a1cf2dcba4b6e44cc2d3a75",class:"sr-only"},this.open?"Invouwen":"Uitvouwen")),e("span",{key:"9ea22d3f51e072934143eef8f653179158c23d5d",id:"heading-title"},this.notApplicable&&e("span",{key:"527e26ac3cecaf6edb9f5a436843feb2b007cc83",class:"sr-only"},"Niet van toepassing:"),this.kop&&e("dso-ozon-content",{key:"8eb4393772dcb15f140d5d776c8a83ef4b37a53a",content:this.kop,onDsoAnchorClick:this.handleOzonContentAnchorClick,mark:this.mark&&(n=>{var o;return(o=this.mark)===null||o===void 0?void 0:o.call(this,n,"kop")}),onDsoOzonContentMarkItemHighlight:n=>this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({},n.detail),{source:"kop"})),inline:true,urlResolver:this.ozonContentUrlResolver}),(this.label||this.nummer||this.opschrift)&&!this.kop?e(r,null,this.label&&e(r,null," ",e("dso-ozon-content",{content:this.label,onDsoAnchorClick:this.handleOzonContentAnchorClick,mark:this.mark&&(n=>{var o;return(o=this.mark)===null||o===void 0?void 0:o.call(this,n,"label")}),onDsoOzonContentMarkItemHighlight:n=>this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({},n.detail),{source:"label"})),inline:true})),this.nummer&&e(r,null," ",e("dso-ozon-content",{content:this.nummer,onDsoAnchorClick:this.handleOzonContentAnchorClick,mark:this.mark&&(n=>{var o;return(o=this.mark)===null||o===void 0?void 0:o.call(this,n,"nummer")}),onDsoOzonContentMarkItemHighlight:n=>this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({},n.detail),{source:"nummer"})),inline:true})),this.opschrift&&e(r,null," ",e("dso-ozon-content",{content:this.opschrift,onDsoAnchorClick:this.handleOzonContentAnchorClick,mark:this.mark&&(n=>{var o;return(o=this.mark)===null||o===void 0?void 0:o.call(this,n,"opschrift")}),onDsoOzonContentMarkItemHighlight:n=>this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({},n.detail),{source:"opschrift"})),inline:true}))):this.alternativeTitle,n&&e("span",{key:"2f127dceab35e8872ceef787f32f742773cbf715"}," - [",n,"]"))),this.recursiveToggle!==undefined&&this.open&&this.mode==="document"&&e("button",{key:"613624ebfc628167d15ae06c3aa1b21fc2334c43",type:"button",class:"recursive-toggle",title:this.recursiveToggle===true?"Verberg alles":"Toon alles",onClick:this.handleRecursiveToggleClick},e("dso-icon",{key:"79502bd34fcebd5131fcd7e976cc158ca2539334",icon:this.recursiveToggle===true?"eye":"eye-slash"})),this.showOntwerpBadge()&&e(r,null,e("dso-badge",{key:"623a034a6e0cc6143c80c7d5930931dbc239d7e5",status:"warning","aria-describedby":"nested-draft-description"},"!"),e("dso-tooltip",{key:"3eaffab5ecfd672ee8b518c27208e3826ac04821",id:"nested-draft-description"},"Er zijn onderliggende onderdelen die veranderen binnen dit ontwerp.")),(this.bevatOntwerpInformatie||this.annotated)&&e("div",{key:"572117a35de007dbdd528acf5cde4cefbf550919",class:"addons"},this.bevatOntwerpInformatie&&e("dso-label",{key:"31d293086a53c99955a25b9406b11fe6f9e7c3c1",status:"warning",compact:true},"Ontwerp"),this.annotated&&this.mode==="document"&&e("button",{key:"548f911cd1dd733cc753e0e9016664a8b1272c4e",type:"button",class:"dso-tertiary","aria-controls":this.openAnnotation?"annotations":undefined,"aria-expanded":this.openAnnotation.toString(),onClick:n=>this.dsoAnnotationToggle.emit({originalEvent:n})},e("dso-icon",{key:"a0b37ef5f071049fb6e876f3577895ecc398983a",icon:"label"}),e("span",{key:"38d3a7b989db595e80e79b384a75464012201603",class:"sr-only"},"Kenmerken en kaartgegevens ",this.openAnnotation?"verbergen":"tonen"))))),this.openAnnotation&&e("div",{key:"f5589abb0372db4caed972ebfab402d65f70fe70",class:"annotation-container",part:"_annotation-container"},e("dso-panel",{key:"c8755dd7eea14faf214a769627a0d42a6e716030",id:"annotations",onDsoCloseClick:n=>this.dsoAnnotationToggle.emit({originalEvent:n}),closeButtonLabel:"Kenmerken en kaartgegevens verbergen"},e("h2",{key:"bab7132a590b10f9219147a9a91d8f8de592758b",slot:"heading"},"Kenmerken en kaart"),e("slot",{key:"91cad5e62fa49bb41f4cd05179ec00a069aad7fe",name:"annotations"}))),this.open&&(this.inhoud||this.gereserveerd||this.vervallen)&&this.mode==="document"&&e("div",{key:"e2fa06323911dfce25f969e491669e62a23288c0",class:"content",part:"_content"},this.gereserveerd&&e("dso-alert",{key:"ca3e972605fb36dab220d96ee001b6f1d261b1b8",status:"info"},"Dit onderdeel is gereserveerd voor toekomstige toevoeging."),this.vervallen&&e("dso-alert",{key:"8d9f294e1ba79b1131f1bacdef9b2bc97e73ea66",status:"info"},"Dit onderdeel is vervallen."),this.inhoud&&e("dso-ozon-content",{key:"45ab3b2447add3a2f191af097f269304aca4d545",content:this.inhoud,onDsoAnchorClick:this.handleOzonContentAnchorClick,mark:this.mark&&(n=>{var o;return(o=this.mark)===null||o===void 0?void 0:o.call(this,n,"inhoud")}),onDsoOzonContentMarkItemHighlight:n=>this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({},n.detail),{source:"inhoud"})),urlResolver:this.ozonContentUrlResolver})),e("div",{key:"9af6f8ca49e1b9105e03508a91ae6f6ad8631648",class:"children-container",part:"_children-container"},e("slot",{key:"675c37498278cb6fdb97cc8c097669d85edd6dd4"})))}};m.style=p;export{g as dso_annotation_locatie,m as dso_document_component};
+//# sourceMappingURL=p-2cac4eb4.entry.js.map

package/dist/dso-toolkit/p-2cac4eb4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["annotationCss","AnnotationLocatie","constructor","hostRef","this","watcher","host","connectedCallback","watch","disconnectedCallback","unwatch","render","hasSymbool","h","AnnotationBody","key","symbol","AnnotationSymbolSlot","undefined","active","dsoActiveChange","title","Fragment","class","value","locatieNoemer","gewijzigdeLocatie","AnnotationGewijzigdeLocatie","Heading","_a","children","heading","mode","href","onClick","props","__rest","headingElement","Object","assign","documentComponentCss","wijzigactieLabels","nieuweContainer","verwijder","verwijderContainer","voegtoe","DocumentComponent","open","filtered","notApplicable","genesteOntwerpInformatie","bevatOntwerpInformatie","annotated","gereserveerd","vervallen","openAnnotation","handleHeadingClick","e","dsoTableOfContentsClick","emit","originalEvent","isModifiedEvent","type","dsoOpenToggle","handleOzonContentAnchorClick","dsoOzonContentAnchorClick","ozonContentAnchorClick","detail","handleRecursiveToggleClick","dsoRecursiveToggle","current","recursiveToggle","next","wijzigactieLabel","wijzigactie","suffix","showOntwerpBadge","collapsible","label","nummer","opschrift","kop","alternativeTitle","showHeading","Host","part","toString","icon","id","content","onDsoAnchorClick","mark","text","call","onDsoOzonContentMarkItemHighlight","dsoMarkItemHighlight","source","inline","urlResolver","ozonContentUrlResolver","status","compact","dsoAnnotationToggle","onDsoCloseClick","closeButtonLabel","slot","name","inhoud"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-locatie&encapsulation=shadow","src/components/annotation/annotation-locatie/annotation-locatie.tsx","src/components/document-component/document-component-heading.tsx","src/components/document-component/document-component.scss?tag=dso-document-component&encapsulation=shadow","src/components/document-component/document-component.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n  word-break: break-word;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Prop, Event, h, EventEmitter, Fragment, Element } from \"@stencil/core\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n  tag: \"dso-annotation-locatie\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationLocatie implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de annotatie actief is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  gewijzigdeLocatie?: boolean;\r\n\r\n  /**\r\n   * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n  /**\r\n   * De noemer van de locatie.\r\n   */\r\n  @Prop()\r\n  locatieNoemer?: RenvooiValue | string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationLocatieElement;\r\n\r\n  private watcher = watcher(this.host);\r\n\r\n  connectedCallback(): void {\r\n    this.watcher.watch();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.watcher.unwatch();\r\n  }\r\n\r\n  render() {\r\n    const hasSymbool = this.watcher.hasSymbool();\r\n\r\n    return (\r\n      <AnnotationBody\r\n        symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n        active={this.active}\r\n        dsoActiveChange={this.dsoActiveChange}\r\n        title={\r\n          <>\r\n            <span class=\"content\">\r\n              <dso-renvooi value={this.locatieNoemer} />\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n","import { h, FunctionalComponent, VNode } from \"@stencil/core\";\r\nimport { JSXBase } from \"@stencil/core/internal\";\r\nimport { DocumentComponentMode } from \"./document-component.models\";\r\n\r\ninterface DocumentComponentHeadingProps {\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n  mode: DocumentComponentMode;\r\n  href?: string;\r\n}\r\n\r\nexport const Heading: FunctionalComponent<\r\n  DocumentComponentHeadingProps & JSXBase.HTMLAttributes<HTMLHeadingElement>\r\n> = ({ heading, mode, href, onClick, ...props }, children) => {\r\n  let headingElement: VNode;\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      headingElement = (\r\n        <h2 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h2>\r\n      );\r\n      break;\r\n    case \"h3\":\r\n      headingElement = (\r\n        <h3 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h3>\r\n      );\r\n      break;\r\n    case \"h4\":\r\n      headingElement = (\r\n        <h4 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h4>\r\n      );\r\n      break;\r\n    case \"h5\":\r\n      headingElement = (\r\n        <h5 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h5>\r\n      );\r\n      break;\r\n    case \"h6\":\r\n      headingElement = (\r\n        <h6 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h6>\r\n      );\r\n  }\r\n\r\n  if (mode === \"table-of-contents\" && href) {\r\n    return (\r\n      <a href={href} onClick={onClick} class=\"heading-anchor\">\r\n        {headingElement}\r\n      </a>\r\n    );\r\n  }\r\n\r\n  return headingElement;\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n@use \"~dso-toolkit/src/components/document-component\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n@use \"~dso-toolkit/src/components/insert\";\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n:host {\r\n  display: block;\r\n\r\n  --depth: var(--a, 0);\r\n}\r\n\r\n:host([not-collapsible]:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])) {\r\n  padding-inline-start: units.$u1;\r\n  margin-inline-end: units.$u1;\r\n}\r\n\r\n:host(:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])),\r\n:host(:where([wijzigactie=\"nieuweContainer\"], [wijzigactie=\"verwijderContainer\"])) .heading-container {\r\n  padding-block-start: units.$u1 * 0.5;\r\n  padding-block-end: units.$u1 * 0.5;\r\n}\r\n\r\n:host([wijzigactie=\"verwijderContainer\"]) .heading-container,\r\n:host(:where([wijzigactie=\"verwijder\"])) {\r\n  --_dso-document-component-text-decoration: line-through;\r\n\r\n  @include delete.root($strikethrough: false);\r\n}\r\n\r\n.heading-element,\r\n.content {\r\n  @include delete.strikethrough($_value: var(--_dso-document-component-text-decoration));\r\n}\r\n\r\n:host([wijzigactie=\"nieuweContainer\"]) .heading-container,\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([filtered]) {\r\n  position: relative;\r\n\r\n  &::before {\r\n    content: \"\";\r\n    inset-inline-start: -3px;\r\n    position: absolute;\r\n    display: block;\r\n    inline-size: 3px;\r\n    inset-block-start: 0;\r\n    inset-block-end: 0;\r\n    background-color: colors.$lichtblauw;\r\n  }\r\n}\r\n\r\n:host([open]),\r\n:host([open-annotation]) {\r\n  .annotation-container,\r\n  .heading-container {\r\n    margin-block-end: units.$u1;\r\n  }\r\n}\r\n\r\n.recursive-toggle,\r\n.toggle-button {\r\n  border: 0;\r\n  padding: 0;\r\n  background: 0;\r\n  color: colors.$bosgroen;\r\n}\r\n\r\n.heading-anchor {\r\n  display: flex;\r\n  flex-wrap: nowrap;\r\n\r\n  @include link.root();\r\n\r\n  text-decoration: none;\r\n}\r\n\r\n.heading-element {\r\n  align-items: start;\r\n  display: flex;\r\n  font-size: 1rem;\r\n  color: colors.$bosgroen;\r\n  margin: 0;\r\n\r\n  > * {\r\n    vertical-align: middle;\r\n  }\r\n}\r\n\r\n#heading-title {\r\n  display: block;\r\n}\r\n\r\n:host([not-collapsible]) {\r\n  .heading-container {\r\n    margin-block-end: 0;\r\n  }\r\n\r\n  .editaction-label {\r\n    margin-inline-start: 0;\r\n  }\r\n\r\n  .heading-element {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n:host([mode=\"document\"]:not([not-collapsible])) {\r\n  --link-color: #{document-component.$heading-anchor-color};\r\n  --link-hover-color: #{document-component.$heading-anchor-hover-color};\r\n\r\n  .heading-element {\r\n    cursor: pointer;\r\n    @include link.pseudo();\r\n  }\r\n\r\n  .editaction-label {\r\n    margin-inline-start: document-component.$indent;\r\n  }\r\n}\r\n\r\n:host([mode=\"table-of-contents\"]) {\r\n  .heading-container {\r\n    padding-inline-start: document-component.$indent-table-of-contents;\r\n  }\r\n\r\n  .heading-element {\r\n    color: inherit;\r\n  }\r\n\r\n  .editaction-label {\r\n    margin-inline-start: 0;\r\n  }\r\n}\r\n\r\n:host([mode=\"table-of-contents\"][type=\"ARTIKEL\"]) {\r\n  .heading-element {\r\n    color: inherit;\r\n  }\r\n}\r\n\r\n:host([mode=\"table-of-contents\"]:not([type=\"HOOFDSTUK\"])) {\r\n  .heading-element {\r\n    font-weight: normal;\r\n  }\r\n}\r\n\r\n.addons {\r\n  margin-inline-start: auto;\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.heading {\r\n  display: flex;\r\n  align-items: start;\r\n  gap: units.$u1;\r\n}\r\n\r\n:host([type=\"ARTIKEL\"]) {\r\n  .heading-element,\r\n  .toggle-button {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n:host([type=\"LID\"][open-annotation]) {\r\n  .annotation-container {\r\n    margin-block-start: units.$u1;\r\n  }\r\n}\r\n\r\n.editaction-label {\r\n  font-style: italic;\r\n  margin-inline-start: units.$u1;\r\n}\r\n\r\n.content,\r\n.heading-container {\r\n  padding-inline-end: units.$u1;\r\n}\r\n\r\n.annotation-container {\r\n  padding-inline-end: units.$u1;\r\n\r\n  dso-panel {\r\n    --_dso-panel-body-background-color: #{colors.$wit};\r\n  }\r\n}\r\n\r\n:host(:where([annotations-wijzigactie=\"verwijder\"])) {\r\n  .annotation-container {\r\n    dso-panel {\r\n      --_dso-panel-body-background-color: #{colors.$rood-10};\r\n      --_dso-renvooi-text-decoration: line-through;\r\n    }\r\n  }\r\n}\r\n\r\n:host([annotations-wijzigactie=\"voegtoe\"]) {\r\n  .annotation-container {\r\n    dso-panel {\r\n      --_dso-panel-body-background-color: #{colors.$lime-10};\r\n    }\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, Host } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport {\r\n  DocumentComponentOpenToggleEvent,\r\n  DocumentComponentToggleAnnotationEvent,\r\n  DocumentComponentOzonContentAnchorClickEvent,\r\n  DocumentComponentWijzigactie,\r\n  DocumentComponentAnnotationsWijzigactie,\r\n  DocumentComponentInputType,\r\n  DocumentComponentMarkFunction,\r\n  DocumentComponentMarkItemHighlightEvent,\r\n  DocumentComponentRecursiveToggleEvent,\r\n  DocumentComponentRecursiveToggleState,\r\n  DocumentComponentMode,\r\n  DocumentComponentTableOfContentsClickEvent,\r\n} from \"./document-component.models\";\r\nimport { OzonContentAnchorClickEvent, OzonContentUrlResolver } from \"../ozon-content/ozon-content.interfaces\";\r\nimport { Heading } from \"./document-component-heading\";\r\n\r\nimport { DsoOzonContentCustomEvent } from \"../../components\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in DocumentComponentWijzigactie]: string } = {\r\n  nieuweContainer: \"Toegevoegd\",\r\n  verwijder: \"Verwijderd\",\r\n  verwijderContainer: \"Verwijderd\",\r\n  voegtoe: \"Toegevoegd\",\r\n};\r\n\r\n/**\r\n * @part _annotation-container - private part, do not touch.\r\n * @part _children-container - private part, do not touch.\r\n * @part _content - private part, do not touch.\r\n * @part _heading-container - private part, do not touch.\r\n */\r\n@Component({\r\n  tag: \"dso-document-component\",\r\n  styleUrl: \"document-component.scss\",\r\n  shadow: true,\r\n})\r\nexport class DocumentComponent implements ComponentInterface {\r\n  /**\r\n   * The heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h2\";\r\n\r\n  /**\r\n   * The Label XML.\r\n   * @deprecated Use `kop` instead.\r\n   */\r\n  @Prop()\r\n  label?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Nummer XML.\r\n   * @deprecated Use `kop` instead.\r\n   */\r\n  @Prop()\r\n  nummer?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Opschrift XML.\r\n   * @deprecated Use `kop` instead.\r\n   */\r\n  @Prop()\r\n  opschrift?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Kop XML.\r\n   */\r\n  @Prop()\r\n  kop?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Inhoud XML.\r\n   */\r\n  @Prop()\r\n  inhoud?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * This boolean attribute indicates whether the children are visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Marks this Document Component as belonging to an active filter.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filtered = false;\r\n\r\n  /**\r\n   * Marks this Document Component as not-applicable.\r\n   */\r\n  @Prop({ reflect: true })\r\n  notApplicable = false;\r\n\r\n  /**\r\n   * When a child Document Component has a status \"Draft\".\r\n   */\r\n  @Prop({ reflect: true })\r\n  genesteOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Marks as draft.\r\n   */\r\n  @Prop({ reflect: true })\r\n  bevatOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Enables annotations.\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotated = false;\r\n\r\n  /**\r\n   * Marks Document Component as reserved.\r\n   */\r\n  @Prop()\r\n  gereserveerd = false;\r\n\r\n  /**\r\n   * Marks the Document Component as expired.\r\n   */\r\n  @Prop()\r\n  vervallen = false;\r\n\r\n  /**\r\n   * When the Annotation is opened, set this to true.\r\n   */\r\n  @Prop({ reflect: true })\r\n  openAnnotation = false;\r\n\r\n  /**\r\n   * An alternative title to show when there is nothing to create a title.\r\n   */\r\n  @Prop()\r\n  alternativeTitle?: string;\r\n\r\n  /**\r\n   * Type of Document Component.\r\n   */\r\n  @Prop({ reflect: true })\r\n  type?: string;\r\n\r\n  /**\r\n   * The wijzigactie as in STOP.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: DocumentComponentWijzigactie;\r\n\r\n  /**\r\n   * The wijzigactie for all annotations.\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotationsWijzigactie?: DocumentComponentAnnotationsWijzigactie;\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: DocumentComponentMarkFunction;\r\n\r\n  /**\r\n   * Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted.\r\n   */\r\n  @Prop()\r\n  recursiveToggle: DocumentComponentRecursiveToggleState;\r\n\r\n  /**\r\n   * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.\r\n   */\r\n  @Prop()\r\n  ozonContentUrlResolver?: OzonContentUrlResolver;\r\n\r\n  /**\r\n   * The mode of the Document Component. One of \"document\" or \"table-of-contents\". Defaults to \"document\"\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode: DocumentComponentMode = \"document\";\r\n\r\n  /**\r\n   * The URL to which the Heading links (only in mode=\"table-of-contents\").\r\n   */\r\n  @Prop({ reflect: true })\r\n  href?: string;\r\n\r\n  /**\r\n   * Emitted when the user activates the recursive toggle.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRecursiveToggle!: EventEmitter<DocumentComponentRecursiveToggleEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOpenToggle!: EventEmitter<DocumentComponentOpenToggleEvent>;\r\n\r\n  /**\r\n   * Emitted when the user clicks the heading in mode=\"table-of-contents\".\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoTableOfContentsClick!: EventEmitter<DocumentComponentTableOfContentsClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the user actives intRef or intIoRef anchors in Ozon Content\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOzonContentAnchorClick!: EventEmitter<DocumentComponentOzonContentAnchorClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the annotation button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnnotationToggle!: EventEmitter<DocumentComponentToggleAnnotationEvent>;\r\n\r\n  /**\r\n   * Emitted each time a marked item gets highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoMarkItemHighlight!: EventEmitter<DocumentComponentMarkItemHighlightEvent>;\r\n\r\n  private get wijzigactieLabel(): string | undefined {\r\n    return this.wijzigactie && wijzigactieLabels[this.wijzigactie];\r\n  }\r\n\r\n  private handleHeadingClick = (e: MouseEvent) => {\r\n    if (this.mode === \"table-of-contents\") {\r\n      this.dsoTableOfContentsClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n    } else if (this.type !== \"LID\") {\r\n      this.dsoOpenToggle.emit({ originalEvent: e, open: !this.open });\r\n    }\r\n  };\r\n\r\n  private suffix(): string | undefined {\r\n    if (this.vervallen) {\r\n      return \"vervallen\";\r\n    }\r\n\r\n    if (this.gereserveerd) {\r\n      return \"gereserveerd\";\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  private handleOzonContentAnchorClick = (e: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>) => {\r\n    this.dsoOzonContentAnchorClick.emit({ originalEvent: e, ozonContentAnchorClick: e.detail });\r\n  };\r\n\r\n  private handleRecursiveToggleClick = (e: MouseEvent) => {\r\n    this.dsoRecursiveToggle.emit({\r\n      originalEvent: e,\r\n      current: this.recursiveToggle,\r\n      next: this.recursiveToggle !== true,\r\n    });\r\n  };\r\n\r\n  private showOntwerpBadge(): boolean {\r\n    return (\r\n      this.genesteOntwerpInformatie &&\r\n      !this.bevatOntwerpInformatie &&\r\n      ((!this.open && this.mode === \"document\") || this.mode === \"table-of-contents\")\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const suffix = this.suffix();\r\n    const collapsible = !!(\r\n      (this.label || this.nummer || this.opschrift || this.kop || this.alternativeTitle) &&\r\n      this.type !== \"LID\"\r\n    );\r\n\r\n    const showHeading = !!(\r\n      this.wijzigactie ||\r\n      collapsible ||\r\n      this.label ||\r\n      this.nummer ||\r\n      this.opschrift ||\r\n      this.kop ||\r\n      this.alternativeTitle ||\r\n      this.bevatOntwerpInformatie ||\r\n      this.annotated\r\n    );\r\n\r\n    return (\r\n      <Host not-collapsible={!collapsible}>\r\n        {showHeading && (\r\n          <div class=\"heading-container\" part=\"_heading-container\">\r\n            {this.wijzigactie && <span class=\"editaction-label\">{this.wijzigactieLabel}:</span>}\r\n            <div class=\"heading\">\r\n              <Heading\r\n                heading={this.heading}\r\n                class=\"heading-element\"\r\n                onClick={this.handleHeadingClick}\r\n                mode={this.mode}\r\n                href={this.href}\r\n              >\r\n                {collapsible && this.mode === \"document\" && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"toggle-button\"\r\n                    aria-describedby=\"heading-title\"\r\n                    aria-expanded={this.open.toString()}\r\n                  >\r\n                    <dso-icon icon={this.open ? \"chevron-down\" : \"chevron-right\"}></dso-icon>\r\n                    <span class=\"sr-only\">{this.open ? \"Invouwen\" : \"Uitvouwen\"}</span>\r\n                  </button>\r\n                )}\r\n                <span id=\"heading-title\">\r\n                  {this.notApplicable && <span class=\"sr-only\">Niet van toepassing:</span>}\r\n\r\n                  {this.kop && (\r\n                    <dso-ozon-content\r\n                      content={this.kop}\r\n                      onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                      mark={this.mark && ((text) => this.mark?.(text, \"kop\"))}\r\n                      onDsoOzonContentMarkItemHighlight={(e) =>\r\n                        this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"kop\" })\r\n                      }\r\n                      inline\r\n                      urlResolver={this.ozonContentUrlResolver}\r\n                    />\r\n                  )}\r\n\r\n                  {(this.label || this.nummer || this.opschrift) && !this.kop ? (\r\n                    <>\r\n                      {this.label && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.label}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"label\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"label\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                      {this.nummer && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.nummer}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"nummer\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"nummer\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                      {this.opschrift && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.opschrift}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"opschrift\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"opschrift\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                    </>\r\n                  ) : (\r\n                    this.alternativeTitle\r\n                  )}\r\n                  {suffix && <span> - [{suffix}]</span>}\r\n                </span>\r\n              </Heading>\r\n              {this.recursiveToggle !== undefined && this.open && this.mode === \"document\" && (\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"recursive-toggle\"\r\n                  title={this.recursiveToggle === true ? \"Verberg alles\" : \"Toon alles\"}\r\n                  onClick={this.handleRecursiveToggleClick}\r\n                >\r\n                  <dso-icon icon={this.recursiveToggle === true ? \"eye\" : \"eye-slash\"} />\r\n                </button>\r\n              )}\r\n              {this.showOntwerpBadge() && (\r\n                <>\r\n                  <dso-badge status=\"warning\" aria-describedby=\"nested-draft-description\">\r\n                    !\r\n                  </dso-badge>\r\n                  <dso-tooltip id=\"nested-draft-description\">\r\n                    Er zijn onderliggende onderdelen die veranderen binnen dit ontwerp.\r\n                  </dso-tooltip>\r\n                </>\r\n              )}\r\n              {(this.bevatOntwerpInformatie || this.annotated) && (\r\n                <div class=\"addons\">\r\n                  {this.bevatOntwerpInformatie && (\r\n                    <dso-label status=\"warning\" compact>\r\n                      Ontwerp\r\n                    </dso-label>\r\n                  )}\r\n                  {this.annotated && this.mode === \"document\" && (\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"dso-tertiary\"\r\n                      aria-controls={this.openAnnotation ? \"annotations\" : undefined}\r\n                      aria-expanded={this.openAnnotation.toString()}\r\n                      onClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n                    >\r\n                      <dso-icon icon=\"label\"></dso-icon>\r\n                      <span class=\"sr-only\">\r\n                        Kenmerken en kaartgegevens {this.openAnnotation ? \"verbergen\" : \"tonen\"}\r\n                      </span>\r\n                    </button>\r\n                  )}\r\n                </div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.openAnnotation && (\r\n          <div class=\"annotation-container\" part=\"_annotation-container\">\r\n            <dso-panel\r\n              id=\"annotations\"\r\n              onDsoCloseClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n              closeButtonLabel=\"Kenmerken en kaartgegevens verbergen\"\r\n            >\r\n              <h2 slot=\"heading\">Kenmerken en kaart</h2>\r\n              <slot name=\"annotations\" />\r\n            </dso-panel>\r\n          </div>\r\n        )}\r\n        {this.open && (this.inhoud || this.gereserveerd || this.vervallen) && this.mode === \"document\" && (\r\n          <div class=\"content\" part=\"_content\">\r\n            {this.gereserveerd && (\r\n              <dso-alert status=\"info\">Dit onderdeel is gereserveerd voor toekomstige toevoeging.</dso-alert>\r\n            )}\r\n            {this.vervallen && <dso-alert status=\"info\">Dit onderdeel is vervallen.</dso-alert>}\r\n            {this.inhoud && (\r\n              <dso-ozon-content\r\n                content={this.inhoud}\r\n                onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                mark={this.mark && ((text) => this.mark?.(text, \"inhoud\"))}\r\n                onDsoOzonContentMarkItemHighlight={(e) =>\r\n                  this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"inhoud\" })\r\n                }\r\n                urlResolver={this.ozonContentUrlResolver}\r\n              />\r\n            )}\r\n          </div>\r\n        )}\r\n        <div class=\"children-container\" part=\"_children-container\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/{p-6a2a4141.entry.js → p-2d22eaa5.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as s,h as t,F as o,f as l,g as c}from"./p-D2Jo0W7B.js";import{c as a}from"./p-ChV9xqsO.js";import{c as i}from"./p-DSyv-znO.js";const d=':host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative}:host{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f2f2f2;border-color:#f2f2f2;color:#191919}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;inset-inline-end:8px;inset-block-start:8px}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}';const b=class{constructor(t){e(this,t);this.dsoClose=s(this,"dsoClose",7)}render(){return t(o,{key:"3155979f2b9164ed98c842e27b23ee3960aaadd4"},t("slot",{key:"056134ca144d2b3ab4268d0d12cfaa94b5a46536"}),!this.fixed&&t("button",{key:"7b466d3bf9fde5780a40197c043b86e746d8326c",type:"button",onClick:e=>this.dsoClose.emit(e)},t("dso-icon",{key:"43e42fa9309144981d7bf8e96dfc7dc36a16af8d",icon:"times"}),t("span",{key:"19e315ce3c50e0b0d08607f04ac2c5cef4a114b8",class:"sr-only"},"Sluiten")))}};b.style=d;const n='.sc-dso-selectable-h{padding-inline-start:32px;position:relative;display:var(--dso-selectable-display, block)}.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{block-size:24px;inset-inline-start:0;margin:0;opacity:0;position:absolute;inset-block-start:0;inline-size: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-inline-start: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:"";block-size:20px;inset-inline-start:2px;position:absolute;inset-block-start:2px;inline-size: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);block-size:18px;inset-inline-start:3px;inset-block-start:3px;inline-size: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;block-size:22px;inset-inline-start:1px;inset-block-start:1px;inline-size: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:"";inset-inline-start:6px;opacity:0;position:absolute;inset-block-start: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-block-start-color:transparent;border-width:0 0 3px 3px;block-size:8px;transform:rotate(-45deg);inline-size:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);block-size:12px;inline-size: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:"";block-size:12px;inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;inline-size: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>dso-info.sc-dso-selectable{float:none;margin-block:8px 0;margin-inline:0 16px;inline-size:100%}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-block-start:8px;padding-inline-start:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-block-start:8px}.sc-dso-selectable-h:not(:last-child){margin-block-end: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-block-size: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);block-size:20px;inset-inline-start:2px;inset-block-start:2px;inline-size:20px}';const r=class{constructor(t){e(this,t);this.dsoChange=s(this,"dsoChange",7);this.infoActive=false;this.keyboardFocus=false;this.fallbackIdentifier=i("DsoSelectable");this.handleOnChange=e=>{const{target:s}=e;this.dsoChange.emit({originalEvent:e,checked:s instanceof HTMLInputElement&&s.checked});l(this.host)}}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((()=>l(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(o,{key:"e68ce686f5d6fd57c6acb6a5fe641304d29ed06f"},t("div",{key:"d7b628443f8f2d05201387b7fccf0af23b2e1713",class:"dso-selectable-container"},t("div",{key:"a7abb03469b370fa5e1b91b5169373ec942f7720",class:a("dso-selectable-input-wrapper",{"dso-keyboard-focus":this.keyboardFocus})},t("input",{key:"34b87eb1e4c2240546d3149c5c15afcd041d7fa7",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:"361ef8a8f27e4da5907a5b47c93a8259013c3cff",active:this.infoActive,onDsoToggle:e=>this.infoActive=e.detail.active})),s&&t("dso-info",{key:"c8967fc6ccdc2bc254deb2e2935a09ebbd7b6bcf",id:s&&this.infoFixed?this.describedById:undefined,fixed:this.infoFixed,active:this.infoActive,onDsoClose:()=>this.infoActive=false},t("div",{key:"f50d96b7a1022bb1eb62ab158d5e0c702297288e"},t("slot",{key:"0ada90bcc617aa8b670d316aa796dc01e2763b95",name:"info"}))),t("slot",{key:"e923228d15e24dd1405208ffe352edbfdd332da8",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"]}}};r.style=n;export{b as dso_info,r as dso_selectable};
-//# sourceMappingURL=p-6a2a4141.entry.js.map
+import{r as e,c as s,h as t,F as o,f as l,g as c}from"./p-D2Jo0W7B.js";import{c as a}from"./p-ChV9xqsO.js";import{c as i}from"./p-DSyv-znO.js";const d=':host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative}:host{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f2f2f2;border-color:#f2f2f2;color:#191919}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;inset-inline-end:8px;inset-block-start:8px}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}';const n=class{constructor(t){e(this,t);this.dsoClose=s(this,"dsoClose",7)}render(){return t(o,{key:"3155979f2b9164ed98c842e27b23ee3960aaadd4"},t("slot",{key:"056134ca144d2b3ab4268d0d12cfaa94b5a46536"}),!this.fixed&&t("button",{key:"7b466d3bf9fde5780a40197c043b86e746d8326c",type:"button",onClick:e=>this.dsoClose.emit(e)},t("dso-icon",{key:"43e42fa9309144981d7bf8e96dfc7dc36a16af8d",icon:"times"}),t("span",{key:"19e315ce3c50e0b0d08607f04ac2c5cef4a114b8",class:"sr-only"},"Sluiten")))}};n.style=d;const b='.sc-dso-selectable-h{padding-inline-start:32px;position:relative;display:var(--dso-selectable-display, block)}.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{block-size:24px;inset-inline-start:0;margin:0;opacity:0;position:absolute;inset-block-start:0;inline-size: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-inline-start: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:"";block-size:20px;inset-inline-start:2px;position:absolute;inset-block-start:2px;inline-size: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);block-size:18px;inset-inline-start:3px;inset-block-start:3px;inline-size: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;block-size:22px;inset-inline-start:1px;inset-block-start:1px;inline-size: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:"";inset-inline-start:6px;opacity:0;position:absolute;inset-block-start: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-block-start-color:transparent;border-width:0 0 3px 3px;block-size:8px;transform:rotate(-45deg);inline-size:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);block-size:12px;inline-size: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:"";block-size:12px;inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;inline-size: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>dso-info.sc-dso-selectable{float:none;margin-block:8px 0;margin-inline:0 16px;inline-size:100%}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-block-start:8px;padding-inline-start:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-block-start:8px}.sc-dso-selectable-h:not(:last-child){margin-block-end: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-block-size: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);block-size:20px;inset-inline-start:2px;inset-block-start:2px;inline-size:20px}';const r=class{constructor(t){e(this,t);this.dsoChange=s(this,"dsoChange",7);this.infoActive=false;this.keyboardFocus=false;this.fallbackIdentifier=i("DsoSelectable");this.handleOnChange=e=>{const{target:s}=e;this.dsoChange.emit({originalEvent:e,checked:s instanceof HTMLInputElement&&s.checked});l(this.host)}}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((()=>l(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(o,{key:"3ccfb5fe1b7cc2277408105abfc30f159e67f8aa"},t("div",{key:"3a50d50879e4a913826cc5d51720b47e362219ea",class:"dso-selectable-container"},t("div",{key:"45f837f824cb01d68c6549b21e8c26ede74ec68a",class:a("dso-selectable-input-wrapper",{"dso-keyboard-focus":this.keyboardFocus})},t("input",{key:"50aefa55a69808a25a1f498439c48f1da313dbfb",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:"90f7fc614489e7769224ecf7faa038a66b283479",active:this.infoActive,onDsoToggle:e=>this.infoActive=e.detail.active})),s&&t("dso-info",{key:"c204aafd654b548b7ac2f51918593a2a46f42f20",id:s&&this.infoFixed?this.describedById:undefined,fixed:this.infoFixed,active:this.infoActive,onDsoClose:()=>this.infoActive=false},t("div",{key:"25d4e18df38eedb2a0c979768c778ddd8f7f4459"},t("slot",{key:"a57125559ab66646ac4364fae11387297881054d",name:"info"}))),t("slot",{key:"4bc06cf9c7893571fbaecf183895b0d9b0c6fd7a",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"]}}};r.style=b;export{n as dso_info,r as dso_selectable};
+//# sourceMappingURL=p-2d22eaa5.entry.js.map

package/dist/dso-toolkit/p-33acabc1.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as r,h as e,F as a,g as i}from"./p-D2Jo0W7B.js";import{A as d}from"./p-COKRRU_q.js";import{w as t,A as n,a as s}from"./p-D4cSA4l8.js";import{A as c}from"./p-ChsEPkam.js";const l='a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a :is(dso-icon,svg.di)+span,a span+:is(dso-icon,svg.di){margin-inline-start:8px}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:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-image:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-image:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-di-background-image, url("./di.svg#email-scampi"))}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=voegtoe]){box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}:host([wijzigactie=verwijder]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=verwijder]){text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){:host([wijzigactie=verwijder]){font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500;word-break:break-word}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}';const g=class{constructor(e){o(this,e);this.dsoActiveChange=r(this,"dsoActiveChange",7);this.watcher=t(this.host)}connectedCallback(){this.watcher.watch()}disconnectedCallback(){this.watcher.unwatch()}render(){const o=this.watcher.hasSymbool();return e(d,{key:"004c59bc3cf2700fecabc0df774b820de13d9e06",symbol:o?e(s,null):undefined,active:this.active,dsoActiveChange:this.dsoActiveChange,title:e("dso-renvooi",{value:this.naam}),data:e(a,null,e("span",{class:"content"},this.regelKwalificatie&&e(a,null,e("dso-renvooi",{value:this.regelKwalificatie})," "),this.regelKwalificatieVoorzetsel&&`${this.regelKwalificatieVoorzetsel}: `,e(c,{values:this.locatieNoemers})),this.gewijzigdeLocatie&&e(n,null))})}get host(){return i(this)}};g.style=l;export{g as dso_annotation_activiteit};
+//# sourceMappingURL=p-33acabc1.entry.js.map

package/dist/dso-toolkit/p-33acabc1.entry.js.map

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

package/dist/dso-toolkit/{p-86849be0.entry.js → p-33e435a4.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as i,H as e,g as o}from"./p-D2Jo0W7B.js";import{d as r,h as n,c as a,b as s}from"./p-CsY83cJO.js";import{c as l}from"./p-ChV9xqsO.js";import{d}from"./p-DDU8nTJS.js";import"./p-BFTU3MAI.js";var p={name:"maxSize",enabled:true,phase:"main",requiresIfExists:["offset","preventOverflow","flip"],fn:function t(i){var e=i.state,o=i.name,n=i.options;var a=r(e,n);var s=e.modifiersData.preventOverflow||{x:0,y:0},l=s.x,d=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-a[m]-l,height:c-a[u]-d}}};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:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:break-word;word-spacing:normal;word-wrap:normal;white-space:normal;--link-color:#39870c;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:410}.tooltip.in{opacity:1}.tooltip.in .tooltip-inner{max-block-size:200vh;overflow:auto;visibility:visible;padding-block:8px;padding-inline:16px}.tooltip:not(.in) .tooltip-inner{max-block-size:0;overflow:hidden;visibility:hidden;transition:all 0s linear 0.15s}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:1rem;max-inline-size:640px;position:relative}.tooltip .tooltip-inner.dso-small{max-inline-size:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;block-size:0;inline-size:0}.tooltip[data-popper-placement=top]{margin-block-start:-3px;padding-inline:0}.tooltip[data-popper-placement=top] .tooltip-arrow{inset-block-end:0;border-block-start-color:#fff;border-width:6px;border-block-end-width:0;margin-inline-start:var(--tooltip-margin-inline-start, -3px)}.tooltip[data-popper-placement=right]{margin-inline-start:3px;padding-inline-start:6px}.tooltip[data-popper-placement=right] .tooltip-arrow{inset-inline-start:0;border-inline-end-color:#fff;border-width:6px;border-inline-start-width:0;margin-block-start:var(--tooltip-margin-block-start, -3px)}.tooltip[data-popper-placement=bottom]{margin-block-start:3px;padding-block-start:6px;padding-inline:0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{inset-block-start:0;border-block-end-color:#fff;border-width:6px;border-block-start-width:0;margin-inline-start:var(--tooltip-margin-inline-start, -3px)}.tooltip[data-popper-placement=left]{margin-inline-start:-3px;margin-inline-end:var(--tooltip-margin-inline-end, unset);padding-block:0;padding-inline-end:6px}.tooltip[data-popper-placement=left] .tooltip-arrow{inset-inline-end:0;border-inline-start-color:#fff;border-width:6px;border-inline-end-width:0;margin-block-start:var(--tooltip-margin-block-start, -3px)}";var c=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 f=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 b;const m=150;const u={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 v=class{constructor(i){t(this,i);this.descriptive=false;this.position="top";this.strategy="auto";this.noArrow=false;this.active=false;this.callbacks={activate:()=>this.active=true,deactivate:()=>{setTimeout((()=>{if(this.element.isConnected){this.active=false}}),2)}};this.onMouseLeave=()=>{var t;if(!this.element.matches(":hover")&&!((t=this.target)===null||t===void 0?void 0:t.matches(":hover"))){this.callbacks.deactivate()}};this.hidden=true;this.keyDownListener=t=>{if(t.key==="Escape"){this.deactivate()}};this.deactivatePopper=d((()=>{var t;this.hidden=true;(t=this.popper)===null||t===void 0?void 0:t.destroy();this.popper=undefined}),m);b.set(this,void 0)}async activate(){this.active=true}async deactivate(){this.active=false}watchPosition(){if(!this.popper){return}this.popper.setOptions({placement:this.position})}watchStrategy(){this.setStrategy()}setStrategy(){if(!this.popper){return}if(this.strategy==="absolute"||this.strategy==="fixed"){this.popper.setOptions({strategy:this.strategy});return}let t=this.element;while(t&&t.parentNode!==document){t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement;if(t!==null&&n(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:"bc5eaedc2be16fb8d3ca4d42b80eb9e66315309a",class:{hidden:this.hidden},role:"tooltip",onClick:this.listenClick},i("div",{key:"da0bfa98b1f90755a23d3a41fdc75fd1d7bd3aab",class:l("tooltip",{in:this.active})},!this.noArrow&&i("div",{key:"edd01d28a24600426d5077b5b0332b2385db96fa","data-popper-arrow":true,class:"tooltip-arrow"}),i("div",{key:"b15b8aed681ddc57092d9df49df4cd71902b14f8","aria-hidden":!this.descriptive||undefined,class:l("tooltip-inner",{"dso-small":this.small})},i("slot",{key:"2ec8c909476afe42a71d05c012ba8e0de6b674e0"}))))}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=a(this.target,i,{placement:this.position,modifiers:[p,u,{name:"eventListeners",enabled:false}]});this.setStrategy()}}get target(){var t;return(t=c(this,b,"f"))!==null&&t!==void 0?t:this.initializeTarget()}set target(t){f(this,b,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}f(this,b,e,"f");return e}get element(){return o(this)}static get watchers(){return{position:["watchPosition"],strategy:["watchStrategy"],active:["watchActive"]}}};b=new WeakMap;v.style=h;export{v as dso_tooltip};
-//# sourceMappingURL=p-86849be0.entry.js.map
+import{r as t,h as i,H as e,g as o}from"./p-D2Jo0W7B.js";import{d as r,h as n,c as a,b as s}from"./p-CsY83cJO.js";import{c as l}from"./p-ChV9xqsO.js";import{d}from"./p-DDU8nTJS.js";import"./p-BFTU3MAI.js";var p={name:"maxSize",enabled:true,phase:"main",requiresIfExists:["offset","preventOverflow","flip"],fn:function t(i){var e=i.state,o=i.name,n=i.options;var a=r(e,n);var s=e.modifiersData.preventOverflow||{x:0,y:0},l=s.x,d=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-a[m]-l,height:c-a[u]-d}}};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:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:break-word;word-spacing:normal;word-wrap:normal;white-space:normal;--link-color:#39870c;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:410}.tooltip.in{opacity:1}.tooltip.in .tooltip-inner{max-block-size:200vh;overflow:auto;visibility:visible;padding-block:8px;padding-inline:16px}.tooltip:not(.in) .tooltip-inner{max-block-size:0;overflow:hidden;visibility:hidden;transition:all 0s linear 0.15s}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:1rem;max-inline-size:640px;position:relative}.tooltip .tooltip-inner.dso-small{max-inline-size:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;block-size:0;inline-size:0}.tooltip[data-popper-placement=top]{margin-block-start:-3px;padding-inline:0}.tooltip[data-popper-placement=top] .tooltip-arrow{inset-block-end:0;border-block-start-color:#fff;border-width:6px;border-block-end-width:0;margin-inline-start:var(--tooltip-margin-inline-start, -3px)}.tooltip[data-popper-placement=right]{margin-inline-start:3px;padding-inline-start:6px}.tooltip[data-popper-placement=right] .tooltip-arrow{inset-inline-start:0;border-inline-end-color:#fff;border-width:6px;border-inline-start-width:0;margin-block-start:var(--tooltip-margin-block-start, -3px)}.tooltip[data-popper-placement=bottom]{margin-block-start:3px;padding-block-start:6px;padding-inline:0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{inset-block-start:0;border-block-end-color:#fff;border-width:6px;border-block-start-width:0;margin-inline-start:var(--tooltip-margin-inline-start, -3px)}.tooltip[data-popper-placement=left]{margin-inline-start:-3px;margin-inline-end:var(--tooltip-margin-inline-end, unset);padding-block:0;padding-inline-end:6px}.tooltip[data-popper-placement=left] .tooltip-arrow{inset-inline-end:0;border-inline-start-color:#fff;border-width:6px;border-inline-end-width:0;margin-block-start:var(--tooltip-margin-block-start, -3px)}";var c=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 f=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 b;const m=150;const u={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 v=class{constructor(i){t(this,i);this.descriptive=false;this.position="top";this.strategy="auto";this.noArrow=false;this.active=false;this.callbacks={activate:()=>this.active=true,deactivate:()=>{setTimeout((()=>{if(this.element.isConnected){this.active=false}}),2)}};this.onMouseLeave=()=>{var t;if(!this.element.matches(":hover")&&!((t=this.target)===null||t===void 0?void 0:t.matches(":hover"))){this.callbacks.deactivate()}};this.hidden=true;this.keyDownListener=t=>{if(t.key==="Escape"){this.deactivate()}};this.deactivatePopper=d((()=>{var t;this.hidden=true;(t=this.popper)===null||t===void 0?void 0:t.destroy();this.popper=undefined}),m);b.set(this,void 0)}async activate(){this.active=true}async deactivate(){this.active=false}watchPosition(){if(!this.popper){return}this.popper.setOptions({placement:this.position})}watchStrategy(){this.setStrategy()}setStrategy(){if(!this.popper){return}if(this.strategy==="absolute"||this.strategy==="fixed"){this.popper.setOptions({strategy:this.strategy});return}let t=this.element;while(t&&t.parentNode!==document){t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement;if(t!==null&&n(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:"4e8f8eea0ec4a80895d2c176c3ed2f9d9105742b",class:{hidden:this.hidden},role:"tooltip",onClick:this.listenClick},i("div",{key:"8e615027b936c9e26dc03b2f3dae790385e0b4f2",class:l("tooltip",{in:this.active})},!this.noArrow&&i("div",{key:"cdf7c81ceff86d5467982067d4ef3e347f2d909a","data-popper-arrow":true,class:"tooltip-arrow"}),i("div",{key:"33bf1a7cbccbc81c38292b178edda20ab46b2b53","aria-hidden":!this.descriptive||undefined,class:l("tooltip-inner",{"dso-small":this.small})},i("slot",{key:"1a7855066e3c084eaaf96a5084e10bac2c75aba1"}))))}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=a(this.target,i,{placement:this.position,modifiers:[p,u,{name:"eventListeners",enabled:false}]});this.setStrategy()}}get target(){var t;return(t=c(this,b,"f"))!==null&&t!==void 0?t:this.initializeTarget()}set target(t){f(this,b,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}f(this,b,e,"f");return e}get element(){return o(this)}static get watchers(){return{position:["watchPosition"],strategy:["watchStrategy"],active:["watchActive"]}}};b=new WeakMap;v.style=h;export{v as dso_tooltip};
+//# sourceMappingURL=p-33e435a4.entry.js.map

package/dist/dso-toolkit/p-3ada9fe0.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as r,h as e,F as a,g as i}from"./p-D2Jo0W7B.js";import{A as d}from"./p-COKRRU_q.js";import{w as t,A as n,a as s}from"./p-D4cSA4l8.js";import{A as l}from"./p-ChsEPkam.js";const c='a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a :is(dso-icon,svg.di)+span,a span+:is(dso-icon,svg.di){margin-inline-start:8px}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:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-image:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-image:var(--_dso-di-background-image, url("./di.svg#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:var(--_dso-di-background-image, url("./di.svg#email-scampi"))}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=voegtoe]){box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}:host([wijzigactie=verwijder]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=verwijder]){text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){:host([wijzigactie=verwijder]){font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500;word-break:break-word}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}';const g=class{constructor(e){o(this,e);this.dsoActiveChange=r(this,"dsoActiveChange",7);this.watcher=t(this.host)}connectedCallback(){this.watcher.watch()}disconnectedCallback(){this.watcher.unwatch()}render(){const o=this.watcher.hasSymbool();return e(d,{key:"7b118d1c32131742b38869b59683942e1d6f78e9",symbol:o?e(s,null):undefined,active:this.active||false,dsoActiveChange:this.dsoActiveChange,title:e(a,null,e("dso-renvooi",{value:this.naam}),this.eenheid&&e(a,null," ","(in ",e("dso-renvooi",{value:this.eenheid}),")")),data:e(a,null,e("span",{class:"content"},this.toelichting&&e(a,null,this.toelichting),this.waardes&&this.waardes.length>0&&e(a,null,": ",e(l,{values:this.waardes}))),this.gewijzigdeLocatie&&e(n,null))})}get host(){return i(this)}};g.style=c;export{g as dso_annotation_omgevingsnormwaarde};
+//# sourceMappingURL=p-3ada9fe0.entry.js.map

package/dist/dso-toolkit/p-3ada9fe0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["annotationCss","AnnotationOmgevingsnormwaarde","constructor","hostRef","this","watcher","host","connectedCallback","watch","disconnectedCallback","unwatch","render","hasSymbool","h","AnnotationBody","key","symbol","AnnotationSymbolSlot","undefined","active","dsoActiveChange","title","Fragment","value","naam","eenheid","data","class","toelichting","waardes","length","AnnotationListRenvooiValues","values","gewijzigdeLocatie","AnnotationGewijzigdeLocatie"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-omgevingsnormwaarde&encapsulation=shadow","src/components/annotation/annotation-omgevingsnormwaarde/annotation-omgevingsnormwaarde.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n  word-break: break-word;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Prop, Event, h, EventEmitter, Fragment, Element } from \"@stencil/core\";\r\n\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationListRenvooiValues } from \"../annotation-list-renvooi-values\";\r\n\r\n/**\r\n * Dit component wordt voor een Omgevingsnorm en Omgevingswaarde gebruikt.\r\n *\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n  tag: \"dso-annotation-omgevingsnormwaarde\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationOmgevingsnormwaarde implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de annotatie actief is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  gewijzigdeLocatie?: boolean;\r\n\r\n  /**\r\n   * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n  /**\r\n   * De naam van de omgevingsnorm of omgevingswaarde.\r\n   */\r\n  @Prop()\r\n  naam?: RenvooiValue | string;\r\n\r\n  /**\r\n   * De toelichting van de waardes.\r\n   */\r\n  @Prop()\r\n  toelichting?: string;\r\n\r\n  /**\r\n   * De waardes van de omgevingsnorm of omgevingswaarde.\r\n   */\r\n  @Prop()\r\n  waardes?: Array<RenvooiValue | string>;\r\n\r\n  /**\r\n   * De eenheid van de omgevingsnorm of omgevingswaarde.\r\n   */\r\n  @Prop()\r\n  eenheid?: RenvooiValue | string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationOmgevingsnormwaardeElement;\r\n\r\n  private watcher = watcher(this.host);\r\n\r\n  connectedCallback(): void {\r\n    this.watcher.watch();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.watcher.unwatch();\r\n  }\r\n\r\n  render() {\r\n    const hasSymbool = this.watcher.hasSymbool();\r\n\r\n    return (\r\n      <AnnotationBody\r\n        symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n        active={this.active || false}\r\n        dsoActiveChange={this.dsoActiveChange}\r\n        title={\r\n          <>\r\n            <dso-renvooi value={this.naam} />\r\n            {this.eenheid && (\r\n              <>\r\n                {\" \"}\r\n                (in <dso-renvooi value={this.eenheid} />)\r\n              </>\r\n            )}\r\n          </>\r\n        }\r\n        data={\r\n          <>\r\n            <span class=\"content\">\r\n              {this.toelichting && <>{this.toelichting}</>}\r\n              {this.waardes && this.waardes.length > 0 && (\r\n                <>\r\n                  : <AnnotationListRenvooiValues values={this.waardes} />\r\n                </>\r\n              )}\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"mappings":"0LAAA,MAAMA,EAAgB,0gL,MCoBTC,EAA6B,MAL1C,WAAAC,CAAAC,G,2DAyDUC,KAAAC,QAAUA,EAAQD,KAAKE,KA6ChC,CA3CC,iBAAAC,GACEH,KAAKC,QAAQG,O,CAGf,oBAAAC,GACEL,KAAKC,QAAQK,S,CAGf,MAAAC,GACE,MAAMC,EAAaR,KAAKC,QAAQO,aAEhC,OACEC,EAACC,EAAc,CAAAC,IAAA,2CACbC,OAAQJ,EAAaC,EAACI,EAAoB,MAAMC,UAChDC,OAAQf,KAAKe,QAAU,MACvBC,gBAAiBhB,KAAKgB,gBACtBC,MACER,EAAAS,EAAA,KACET,EAAA,eAAaU,MAAOnB,KAAKoB,OACxBpB,KAAKqB,SACJZ,EAAAS,EAAA,KACG,IAAG,OACAT,EAAA,eAAaU,MAAOnB,KAAKqB,UAAW,MAKhDC,KACEb,EAAAS,EAAA,KACET,EAAM,QAAAc,MAAM,WACTvB,KAAKwB,aAAef,EAAAS,EAAA,KAAGlB,KAAKwB,aAC5BxB,KAAKyB,SAAWzB,KAAKyB,QAAQC,OAAS,GACrCjB,EAAAS,EAAA,UACIT,EAACkB,EAA4B,CAAAC,OAAQ5B,KAAKyB,YAIjDzB,KAAK6B,mBAAqBpB,EAACqB,EAA8B,Q","ignoreList":[]}

package/dist/dso-toolkit/p-3dc6df90.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["translations","en","menu","login","logout","help","overflowMenu","nl","userHome","headerCss","minDesktopViewportWidth","Header","constructor","hostRef","this","mainMenu","useDropDownMenu","authStatus","showHelp","overflowMenuItems","dropdownOptionsOffset","text","i18n","host","onWindowResize","debounce","_a","dropdownElement","removeAttribute","_b","setDropDownMenu","setOverflowMenu","showDropDown","calculateDropdownOptionsOffset","MenuItem","item","h","class","active","undefined","href","url","onClick","e","clickHandler","menuItem","label","type","options","dsoHeaderClick","emit","originalEvent","isModifiedEvent","setShowDropDown","value","shrinkMenuToFit","wrapper","nav","clientWidth","length","componentDidRender","isConnected","window","setTimeout","componentDidLoad","innerWidth","clientHeight","getBoundingClientRect","bottom","top","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","render","Fragment","clsx","ref","element","name","userHomeUrl","strategy","slot","icon","map","userProfileUrl","userProfileName","loginUrl","logoutUrl","helpUrl","filter","_","index","placement","userHomeActive"],"sources":["src/components/header/header.i18n.ts","src/components/header/header.scss?tag=dso-header&encapsulation=shadow","src/components/header/header.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-header\": {\r\n      menu: \"Menu\",\r\n      login: \"Log in\",\r\n      logout: \"Log out\",\r\n      help: \"Help\",\r\n      overflowMenu: \"More\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-header\": {\r\n      menu: \"Menu\",\r\n      login: \"Inloggen\",\r\n      logout: \"Uitloggen\",\r\n      help: \"Help\",\r\n      overflowMenu: \"Meer\",\r\n      userHome: \"Mijn Omgevingsloket\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin nav-item-border($color) {\r\n  border-block-end: 4px solid $color;\r\n}\r\n\r\n@mixin nav-item-main {\r\n  font-size: 1.25em;\r\n  line-height: 1;\r\n  margin-block-start: units.$u1;\r\n  padding-block: units.$u2;\r\n  padding-inline: 0;\r\n}\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.dso-header {\r\n  border-block-end: 1px solid colors.$grijs-20;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  position: relative;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    align-items: center;\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n    &.use-drop-down {\r\n      flex-wrap: nowrap;\r\n    }\r\n  }\r\n\r\n  .dso-nav {\r\n    border: 0;\r\n  }\r\n}\r\n\r\n.logo-container {\r\n  flex: 1 1 12.5rem;\r\n  margin-inline-end: units.$u3;\r\n  padding-block-end: units.$u2;\r\n  padding-block-start: units.$u2;\r\n}\r\n\r\n.dso-header-session {\r\n  display: flex;\r\n  align-items: center;\r\n  margin-inline-start: auto;\r\n\r\n  .profile,\r\n  .login,\r\n  .logout,\r\n  .help {\r\n    .dso-tertiary {\r\n      display: flex;\r\n      gap: 0.5rem;\r\n\r\n      cursor: pointer;\r\n\r\n      border: 0;\r\n\r\n      background-color: transparent;\r\n\r\n      padding-inline-start: 0;\r\n\r\n      outline-offset: 2px;\r\n\r\n      font-family: typography.$font-family-base;\r\n      color: colors.$grasgroen;\r\n      font-size: 1rem;\r\n      font-weight: 600;\r\n      line-height: 1.5;\r\n      text-decoration: none;\r\n\r\n      &:hover {\r\n        text-decoration: underline;\r\n      }\r\n    }\r\n  }\r\n\r\n  .profile {\r\n    margin-inline-start: units.$u1;\r\n\r\n    + .logout,\r\n    ~ .help {\r\n      border-inline-start: 3px solid colors.$grijs-20;\r\n      margin-inline-start: units.$u1;\r\n      padding-inline-start: units.$u1;\r\n    }\r\n  }\r\n\r\n  .help {\r\n    a,\r\n    button {\r\n      display: flex;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-navbar {\r\n  flex-basis: 100%;\r\n}\r\n\r\ndso-dropdown-menu {\r\n  @include dropdown-menu.children();\r\n\r\n  button {\r\n    background-color: transparent;\r\n    border: 0;\r\n    display: flex;\r\n    font-family: typography.$font-family-base;\r\n    align-items: center;\r\n    position: relative;\r\n\r\n    dso-icon {\r\n      inline-size: units.$u3;\r\n      block-size: units.$u3;\r\n      margin-inline-start: units.$u1;\r\n      padding-block-start: units.$u1 * 0.25;\r\n    }\r\n\r\n    &[aria-expanded=\"true\"] {\r\n      dso-icon {\r\n        transform: rotate(180deg);\r\n      }\r\n    }\r\n  }\r\n\r\n  .dso-dropdown-options {\r\n    border: 0;\r\n    border-radius: 0;\r\n    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n\r\n    @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n      inline-size: 375px;\r\n    }\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      inline-size: 100%;\r\n    }\r\n\r\n    ul {\r\n      margin: 0;\r\n      padding: 0;\r\n      list-style: none;\r\n\r\n      li {\r\n        a,\r\n        button {\r\n          display: block;\r\n          padding: units.$u2;\r\n          color: colors.$bosgroen;\r\n          font-size: 1.25rem;\r\n          white-space: pre-wrap;\r\n          text-decoration: none;\r\n\r\n          &:focus-visible {\r\n            background-color: colors.$grasgroen;\r\n            color: colors.$wit;\r\n          }\r\n\r\n          &:hover {\r\n            background-color: colors.$wit;\r\n            color: colors.$bosgroen;\r\n            text-decoration: underline;\r\n          }\r\n\r\n          &:visited {\r\n            color: colors.$bosgroen;\r\n          }\r\n        }\r\n\r\n        button {\r\n          inline-size: 100%;\r\n          text-align: start;\r\n\r\n          dso-icon {\r\n            margin-inline-start: units.$u1;\r\n          }\r\n        }\r\n\r\n        &.dso-active {\r\n          a {\r\n            font-weight: 600;\r\n          }\r\n        }\r\n\r\n        + li {\r\n          border-block-start: 1px solid colors.$grijs-20;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dropdown {\r\n  margin-inline-start: auto;\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  dso-dropdown-menu {\r\n    position: static;\r\n\r\n    .dso-dropdown-options {\r\n      inset-inline-end: 0;\r\n      inset-block-start: 100%;\r\n      box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n    }\r\n\r\n    > button {\r\n      color: colors.$grasgroen;\r\n      font-size: typography.$font-size-base;\r\n      font-weight: 600;\r\n      line-height: normal;\r\n      position: relative;\r\n\r\n      &::after {\r\n        margin-inline-start: units.$u1;\r\n        position: absolute;\r\n        inset-inline-end: 0px;\r\n        inset-block-start: 50%;\r\n        transform: translateY(-50%);\r\n      }\r\n\r\n      &:hover,\r\n      &:active {\r\n        cursor: pointer;\r\n        text-decoration: underline;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dso-nav {\r\n  align-items: end;\r\n  column-gap: units.$u4;\r\n  display: flex;\r\n  list-style: none;\r\n  margin-block-end: 0;\r\n  margin-block-start: 0;\r\n  padding-inline-start: 0;\r\n\r\n  > li {\r\n    margin-block-end: 4px;\r\n\r\n    > a {\r\n      display: block;\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    &.dso-active,\r\n    &.is-active {\r\n      margin-block-end: 0;\r\n\r\n      > a {\r\n        @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n        font-weight: bold;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.dso-nav-main {\r\n    display: flex !important;\r\n\r\n    > li {\r\n      > a {\r\n        @include anchor.reverse();\r\n        @include nav-item-main();\r\n\r\n        // stylelint-disable-next-line declaration-property-value-disallowed-list -- no wrapping wanted because of icon\r\n        white-space: nowrap;\r\n      }\r\n    }\r\n\r\n    dso-dropdown-menu {\r\n      .dso-dropdown-options {\r\n        inset-inline-start: units.$ru2 * -1 !important;\r\n        inset-block-start: 3px !important;\r\n      }\r\n\r\n      button {\r\n        @include nav-item-main();\r\n\r\n        align-items: flex-end;\r\n        color: colors.$bosgroen;\r\n\r\n        &:hover,\r\n        &:active {\r\n          cursor: pointer;\r\n          text-decoration: underline;\r\n        }\r\n\r\n        &::after {\r\n          margin-inline-start: units.$u1;\r\n          position: absolute;\r\n          inset-inline-end: 0px;\r\n          inset-block-start: auto;\r\n          transform: none;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .menu-user-home {\r\n    margin-inline-start: auto;\r\n\r\n    dso-icon {\r\n      block-size: 1em;\r\n      margin-inline-end: units.$u1;\r\n      position: relative;\r\n      inset-block-start: -2px;\r\n      inline-size: 1.2em;\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, h, Prop, State, Watch } from \"@stencil/core\";\r\n\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HeaderEvent, HeaderMenuItem, HeaderNavigationType } from \"./header.interfaces\";\r\nimport { translations } from \"./header.i18n\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\n@Component({\r\n  tag: \"dso-header\",\r\n  styleUrl: \"header.scss\",\r\n  shadow: true,\r\n})\r\nexport class Header {\r\n  private clickHandler(\r\n    e: MouseEvent,\r\n    type: HeaderNavigationType,\r\n    options?: { menuItem?: HeaderMenuItem; url?: string },\r\n  ) {\r\n    this.dsoHeaderClick.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n      type,\r\n      menuItem: options?.menuItem,\r\n      url: options?.url ?? options?.menuItem?.url,\r\n    });\r\n  }\r\n\r\n  private dropdownElement?: HTMLElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoHeaderElement;\r\n\r\n  /**\r\n   * The main menu items.\r\n   */\r\n  @Prop()\r\n  mainMenu?: HeaderMenuItem[] = [];\r\n\r\n  /**\r\n   * Either have the dropdown menu appear automatically or always.\r\n   */\r\n  @Prop()\r\n  useDropDownMenu: \"always\" | \"auto\" = \"auto\";\r\n\r\n  /**\r\n   * Used to show the login/logout option. 'none' renders nothing.\r\n   */\r\n  @Prop()\r\n  authStatus: \"none\" | \"loggedIn\" | \"loggedOut\" = \"none\";\r\n\r\n  /**\r\n   * When the `authStatus` is `loggedOut` a loginUrl can be provided.\r\n   * The login button will then render as an anchor.\r\n   */\r\n  @Prop()\r\n  loginUrl?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"logout\".\r\n   * If no URL is specified, a button element is used instead.\r\n   */\r\n  @Prop()\r\n  logoutUrl?: string;\r\n\r\n  /**\r\n   * Show a help-button or link in the header\r\n   */\r\n  @Prop()\r\n  showHelp? = false;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"help\".\r\n   * If no URL is specified, a button element is used instead.\r\n   */\r\n  @Prop()\r\n  helpUrl?: string;\r\n\r\n  /**\r\n   * The name to show when the user is logged in.\r\n   */\r\n  @Prop()\r\n  userProfileName?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates the profile url.\r\n   */\r\n  @Prop()\r\n  userProfileUrl?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n   */\r\n  @Prop()\r\n  userHomeUrl?: string;\r\n\r\n  /**\r\n   * Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n   */\r\n  @Prop()\r\n  userHomeActive?: boolean;\r\n\r\n  @State()\r\n  showDropDown?: boolean;\r\n\r\n  @State()\r\n  overflowMenuItems = 0;\r\n\r\n  @State()\r\n  dropdownOptionsOffset = 0;\r\n\r\n  /**\r\n   * Emitted when something in the header is selected.\r\n   *\r\n   * `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n   */\r\n  @Event()\r\n  dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n  @Watch(\"useDropDownMenu\")\r\n  setShowDropDown(value: \"always\" | \"auto\") {\r\n    if (value === \"auto\") {\r\n      this.setDropDownMenu();\r\n\r\n      return;\r\n    }\r\n\r\n    this.showDropDown = value === \"always\";\r\n  }\r\n\r\n  private wrapper: HTMLDivElement | undefined;\r\n\r\n  private nav: HTMLUListElement | undefined;\r\n\r\n  private shrinkMenuToFit() {\r\n    if (!this.wrapper || !this.nav) {\r\n      return;\r\n    }\r\n\r\n    if (this.wrapper.clientWidth >= this.nav.clientWidth) {\r\n      return;\r\n    }\r\n\r\n    if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {\r\n      return;\r\n    }\r\n\r\n    this.overflowMenuItems++;\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidRender() {\r\n    if (!this.host.isConnected) {\r\n      return;\r\n    }\r\n\r\n    if (this.showDropDown) {\r\n      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n\r\n      return;\r\n    }\r\n\r\n    window.setTimeout(() => this.shrinkMenuToFit(), 0);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.setShowDropDown(this.useDropDownMenu);\r\n\r\n    if (this.showDropDown) {\r\n      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n    }\r\n  }\r\n\r\n  private setOverflowMenu() {\r\n    if (this.showDropDown) {\r\n      return;\r\n    }\r\n\r\n    if (this.overflowMenuItems !== 0) {\r\n      this.overflowMenuItems = 0;\r\n      return;\r\n    }\r\n\r\n    this.shrinkMenuToFit();\r\n  }\r\n\r\n  private setDropDownMenu() {\r\n    if (this.useDropDownMenu !== \"auto\") {\r\n      return;\r\n    }\r\n\r\n    this.showDropDown = window.innerWidth < minDesktopViewportWidth;\r\n  }\r\n\r\n  private calculateDropdownOptionsOffset() {\r\n    if (!this.dropdownElement) {\r\n      return 0;\r\n    }\r\n\r\n    return (\r\n      this.host.clientHeight -\r\n      (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n    );\r\n  }\r\n\r\n  private onWindowResize = debounce(() => {\r\n    this.dropdownElement?.removeAttribute(\"open\");\r\n    this.dropdownElement?.removeAttribute(\"tabindex\");\r\n\r\n    this.setDropDownMenu();\r\n    this.setOverflowMenu();\r\n\r\n    if (this.showDropDown) {\r\n      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n    }\r\n  }, 100);\r\n\r\n  connectedCallback() {\r\n    window.addEventListener(\"resize\", this.onWindowResize);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.removeEventListener(\"resize\", this.onWindowResize);\r\n  }\r\n\r\n  private MenuItem = (item: HeaderMenuItem) => {\r\n    return (\r\n      <li class={item.active ? \"dso-active\" : undefined}>\r\n        <a\r\n          href={item.url}\r\n          aria-current={item.active ? \"page\" : undefined}\r\n          onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem: item })}\r\n        >\r\n          {item.label}\r\n        </a>\r\n      </li>\r\n    );\r\n  };\r\n\r\n  render() {\r\n    // Prevent 'flickering' when useDropDownMenu = 'always'\r\n    if (this.showDropDown === undefined) {\r\n      return;\r\n    }\r\n\r\n    return (\r\n      <>\r\n        <div\r\n          class={clsx(\"dso-header\", {\r\n            [\"use-drop-down\"]: this.showDropDown,\r\n          })}\r\n          ref={(element) => (this.wrapper = element)}\r\n        >\r\n          <div class=\"logo-container\">\r\n            <slot name=\"logo\" />\r\n          </div>\r\n          {this.showDropDown &&\r\n            this.mainMenu &&\r\n            (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== \"none\") && (\r\n              <div class=\"dropdown\">\r\n                <dso-dropdown-menu\r\n                  dropdown-align=\"right\"\r\n                  strategy=\"absolute\"\r\n                  dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n                  ref={(element) => (this.dropdownElement = element)}\r\n                >\r\n                  <button type=\"button\" slot=\"toggle\">\r\n                    <span>{this.text(\"menu\")}</span>\r\n                    <dso-icon icon=\"chevron-down\"></dso-icon>\r\n                  </button>\r\n                  <div class=\"dso-dropdown-options\">\r\n                    <ul>\r\n                      {this.mainMenu.map(this.MenuItem)}\r\n                      {this.userHomeUrl && (\r\n                        <li>\r\n                          <a\r\n                            href={this.userHomeUrl}\r\n                            onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n                          >\r\n                            {this.text(\"userHome\")}\r\n                          </a>\r\n                        </li>\r\n                      )}\r\n                      {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n                        <li>\r\n                          <a\r\n                            href={this.userProfileUrl}\r\n                            onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n                          >\r\n                            {this.userProfileName}\r\n                            <span class=\"profile-label\"> - Mijn profiel</span>\r\n                          </a>\r\n                        </li>\r\n                      )}\r\n                      {this.authStatus === \"loggedOut\" && (\r\n                        <li>\r\n                          {this.loginUrl ? (\r\n                            <a\r\n                              href={this.loginUrl}\r\n                              onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n                            >\r\n                              {this.text(\"login\")}\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                              {this.text(\"login\")}\r\n                            </button>\r\n                          )}\r\n                        </li>\r\n                      )}\r\n                      {this.authStatus === \"loggedIn\" && (\r\n                        <li>\r\n                          {this.logoutUrl ? (\r\n                            <a\r\n                              href={this.logoutUrl}\r\n                              onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n                            >\r\n                              {this.text(\"logout\")}\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                              {this.text(\"logout\")}\r\n                            </button>\r\n                          )}\r\n                        </li>\r\n                      )}\r\n                      {this.showHelp && (\r\n                        <li>\r\n                          {this.helpUrl ? (\r\n                            <a\r\n                              href={this.helpUrl}\r\n                              class=\"dso-tertiary\"\r\n                              onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n                            >\r\n                              <span>{this.text(\"help\")}</span>\r\n                              <dso-icon icon=\"help\"></dso-icon>\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" class=\"dso-tertiary\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n                              <span>{this.text(\"help\")}</span>\r\n                              <dso-icon icon=\"help\"></dso-icon>\r\n                            </button>\r\n                          )}\r\n                        </li>\r\n                      )}\r\n                    </ul>\r\n                  </div>\r\n                </dso-dropdown-menu>\r\n              </div>\r\n            )}\r\n          {!this.showDropDown && (\r\n            <>\r\n              <div class=\"dso-header-session\">\r\n                {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n                  <div class=\"profile\">\r\n                    <a\r\n                      href={this.userProfileUrl}\r\n                      class=\"dso-tertiary\"\r\n                      onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n                    >\r\n                      {this.userProfileName}\r\n                    </a>\r\n                  </div>\r\n                )}\r\n                {this.authStatus === \"loggedOut\" && (\r\n                  <div class=\"login\">\r\n                    {this.loginUrl ? (\r\n                      <a\r\n                        href={this.loginUrl}\r\n                        class=\"dso-tertiary\"\r\n                        onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n                      >\r\n                        {this.text(\"login\")}\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                        {this.text(\"login\")}\r\n                      </button>\r\n                    )}\r\n                  </div>\r\n                )}\r\n                {this.authStatus === \"loggedIn\" && (\r\n                  <div class=\"logout\">\r\n                    {this.logoutUrl ? (\r\n                      <a\r\n                        href={this.logoutUrl}\r\n                        class=\"dso-tertiary\"\r\n                        onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n                      >\r\n                        {this.text(\"logout\")}\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                        {this.text(\"logout\")}\r\n                      </button>\r\n                    )}\r\n                  </div>\r\n                )}\r\n                {this.showHelp && (\r\n                  <div class=\"help\">\r\n                    {this.helpUrl ? (\r\n                      <a\r\n                        href={this.helpUrl}\r\n                        class=\"dso-tertiary\"\r\n                        onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n                      >\r\n                        <span>{this.text(\"help\")}</span>\r\n                        <dso-icon icon=\"help\"></dso-icon>\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n                        <span>{this.text(\"help\")}</span>\r\n                        <dso-icon icon=\"help\"></dso-icon>\r\n                      </button>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n              {((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (\r\n                <nav class=\"dso-navbar\">\r\n                  <ul class=\"dso-nav dso-nav-main\" ref={(element) => (this.nav = element)}>\r\n                    {this.mainMenu &&\r\n                      this.mainMenu\r\n                        .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)\r\n                        .map(this.MenuItem)}\r\n                    {this.overflowMenuItems > 0 && (\r\n                      <li>\r\n                        <dso-dropdown-menu placement=\"bottom\">\r\n                          <button type=\"button\" slot=\"toggle\">\r\n                            <span>{this.text(\"overflowMenu\")}</span>\r\n                            <dso-icon icon=\"chevron-down\"></dso-icon>\r\n                          </button>\r\n                          <div class=\"dso-dropdown-options\">\r\n                            <ul>\r\n                              {this.mainMenu &&\r\n                                this.mainMenu\r\n                                  .filter(\r\n                                    (_, index) =>\r\n                                      this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems,\r\n                                  )\r\n                                  .map(this.MenuItem)}\r\n                            </ul>\r\n                          </div>\r\n                        </dso-dropdown-menu>\r\n                      </li>\r\n                    )}\r\n                    {this.userHomeUrl && (\r\n                      <li class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}>\r\n                        <a\r\n                          href={this.userHomeUrl}\r\n                          aria-current={this.userHomeActive ? \"page\" : undefined}\r\n                          onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n                        >\r\n                          <dso-icon icon=\"user-line\"></dso-icon>\r\n                          {this.text(\"userHome\")}\r\n                        </a>\r\n                      </li>\r\n                    )}\r\n                  </ul>\r\n                </nav>\r\n              )}\r\n            </>\r\n          )}\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["translations","en","menu","login","logout","help","overflowMenu","nl","userHome","headerCss","minDesktopViewportWidth","Header","constructor","hostRef","this","mainMenu","useDropDownMenu","authStatus","showHelp","overflowMenuItems","dropdownOptionsOffset","text","i18n","host","onWindowResize","debounce","_a","dropdownElement","removeAttribute","_b","setDropDownMenu","setOverflowMenu","showDropDown","calculateDropdownOptionsOffset","MenuItem","item","h","class","active","undefined","href","url","onClick","e","clickHandler","menuItem","label","type","options","dsoHeaderClick","emit","originalEvent","isModifiedEvent","setShowDropDown","value","shrinkMenuToFit","wrapper","nav","clientWidth","length","componentDidRender","isConnected","window","setTimeout","componentDidLoad","innerWidth","clientHeight","getBoundingClientRect","bottom","top","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","render","Fragment","clsx","ref","element","name","userHomeUrl","strategy","slot","icon","map","userProfileUrl","userProfileName","loginUrl","logoutUrl","helpUrl","filter","_","index","placement","userHomeActive"],"sources":["src/components/header/header.i18n.ts","src/components/header/header.scss?tag=dso-header&encapsulation=shadow","src/components/header/header.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-header\": {\r\n      menu: \"Menu\",\r\n      login: \"Log in\",\r\n      logout: \"Log out\",\r\n      help: \"Help\",\r\n      overflowMenu: \"More\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-header\": {\r\n      menu: \"Menu\",\r\n      login: \"Inloggen\",\r\n      logout: \"Uitloggen\",\r\n      help: \"Help\",\r\n      overflowMenu: \"Meer\",\r\n      userHome: \"Mijn Omgevingsloket\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin nav-item-border($color) {\r\n  border-block-end: 4px solid $color;\r\n}\r\n\r\n@mixin nav-item-main {\r\n  font-size: 1.25em;\r\n  line-height: 1;\r\n  margin-block-start: units.$u1;\r\n  padding-block: units.$u2;\r\n  padding-inline: 0;\r\n}\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.dso-header {\r\n  border-block-end: 1px solid colors.$grijs-20;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  position: relative;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    align-items: center;\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n    &.use-drop-down {\r\n      flex-wrap: nowrap;\r\n    }\r\n  }\r\n\r\n  .dso-nav {\r\n    border: 0;\r\n  }\r\n}\r\n\r\n.logo-container {\r\n  flex: 1 1 12.5rem;\r\n  margin-inline-end: units.$u3;\r\n  padding-block-end: units.$u2;\r\n  padding-block-start: units.$u2;\r\n}\r\n\r\n.dso-header-session {\r\n  display: flex;\r\n  align-items: center;\r\n  margin-inline-start: auto;\r\n\r\n  .profile,\r\n  .login,\r\n  .logout,\r\n  .help {\r\n    .dso-tertiary {\r\n      display: flex;\r\n      gap: 0.5rem;\r\n\r\n      cursor: pointer;\r\n\r\n      border: 0;\r\n\r\n      background-color: transparent;\r\n\r\n      padding-inline-start: 0;\r\n\r\n      outline-offset: 2px;\r\n\r\n      font-family: typography.$font-family-base;\r\n      color: colors.$grasgroen;\r\n      font-size: 1rem;\r\n      font-weight: 600;\r\n      line-height: 1.5;\r\n      text-decoration: none;\r\n\r\n      &:hover {\r\n        text-decoration: underline;\r\n      }\r\n    }\r\n  }\r\n\r\n  .profile {\r\n    margin-inline-start: units.$u1;\r\n\r\n    + .logout,\r\n    ~ .help {\r\n      border-inline-start: 3px solid colors.$grijs-20;\r\n      margin-inline-start: units.$u1;\r\n      padding-inline-start: units.$u1;\r\n    }\r\n  }\r\n\r\n  .help {\r\n    a,\r\n    button {\r\n      display: flex;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-navbar {\r\n  flex-basis: 100%;\r\n}\r\n\r\ndso-dropdown-menu {\r\n  @include dropdown-menu.children();\r\n\r\n  button {\r\n    background-color: transparent;\r\n    border: 0;\r\n    display: flex;\r\n    font-family: typography.$font-family-base;\r\n    align-items: center;\r\n    position: relative;\r\n\r\n    dso-icon {\r\n      inline-size: units.$u3;\r\n      block-size: units.$u3;\r\n      margin-inline-start: units.$u1;\r\n      padding-block-start: units.$u1 * 0.25;\r\n    }\r\n\r\n    &[aria-expanded=\"true\"] {\r\n      dso-icon {\r\n        transform: rotate(180deg);\r\n      }\r\n    }\r\n  }\r\n\r\n  .dso-dropdown-options {\r\n    border: 0;\r\n    border-radius: 0;\r\n    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n\r\n    @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n      inline-size: 375px;\r\n    }\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      inline-size: 100%;\r\n    }\r\n\r\n    ul {\r\n      margin: 0;\r\n      padding: 0;\r\n      list-style: none;\r\n\r\n      li {\r\n        a,\r\n        button {\r\n          display: block;\r\n          padding: units.$u2;\r\n          color: colors.$bosgroen;\r\n          font-size: 1.25rem;\r\n          white-space: pre-wrap;\r\n          text-decoration: none;\r\n\r\n          &:focus-visible {\r\n            background-color: colors.$grasgroen;\r\n            color: colors.$wit;\r\n          }\r\n\r\n          &:hover {\r\n            background-color: colors.$wit;\r\n            color: colors.$bosgroen;\r\n            text-decoration: underline;\r\n          }\r\n\r\n          &:visited {\r\n            color: colors.$bosgroen;\r\n          }\r\n        }\r\n\r\n        button {\r\n          inline-size: 100%;\r\n          text-align: start;\r\n\r\n          dso-icon {\r\n            margin-inline-start: units.$u1;\r\n          }\r\n        }\r\n\r\n        &.dso-active {\r\n          a {\r\n            font-weight: 600;\r\n          }\r\n        }\r\n\r\n        + li {\r\n          border-block-start: 1px solid colors.$grijs-20;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dropdown {\r\n  margin-inline-start: auto;\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  dso-dropdown-menu {\r\n    position: static;\r\n\r\n    .dso-dropdown-options {\r\n      inset-inline-end: 0;\r\n      inset-block-start: 100%;\r\n      box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n    }\r\n\r\n    > button {\r\n      color: colors.$grasgroen;\r\n      font-size: typography.$font-size-base;\r\n      font-weight: 600;\r\n      line-height: normal;\r\n      position: relative;\r\n\r\n      &::after {\r\n        margin-inline-start: units.$u1;\r\n        position: absolute;\r\n        inset-inline-end: 0px;\r\n        inset-block-start: 50%;\r\n        transform: translateY(-50%);\r\n      }\r\n\r\n      &:hover,\r\n      &:active {\r\n        cursor: pointer;\r\n        text-decoration: underline;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dso-nav {\r\n  align-items: end;\r\n  column-gap: units.$u4;\r\n  display: flex;\r\n  list-style: none;\r\n  margin-block-end: 0;\r\n  margin-block-start: 0;\r\n  padding-inline-start: 0;\r\n\r\n  > li {\r\n    margin-block-end: 4px;\r\n\r\n    > a {\r\n      display: block;\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    &.dso-active,\r\n    &.is-active {\r\n      margin-block-end: 0;\r\n\r\n      > a {\r\n        @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n        font-weight: bold;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.dso-nav-main {\r\n    display: flex !important;\r\n\r\n    > li {\r\n      > a {\r\n        @include link.reverse();\r\n        @include nav-item-main();\r\n\r\n        // stylelint-disable-next-line declaration-property-value-disallowed-list -- no wrapping wanted because of icon\r\n        white-space: nowrap;\r\n      }\r\n    }\r\n\r\n    dso-dropdown-menu {\r\n      .dso-dropdown-options {\r\n        inset-inline-start: units.$ru2 * -1 !important;\r\n        inset-block-start: 3px !important;\r\n      }\r\n\r\n      button {\r\n        @include nav-item-main();\r\n\r\n        align-items: flex-end;\r\n        color: colors.$bosgroen;\r\n\r\n        &:hover,\r\n        &:active {\r\n          cursor: pointer;\r\n          text-decoration: underline;\r\n        }\r\n\r\n        &::after {\r\n          margin-inline-start: units.$u1;\r\n          position: absolute;\r\n          inset-inline-end: 0px;\r\n          inset-block-start: auto;\r\n          transform: none;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .menu-user-home {\r\n    margin-inline-start: auto;\r\n\r\n    dso-icon {\r\n      block-size: 1em;\r\n      margin-inline-end: units.$u1;\r\n      position: relative;\r\n      inset-block-start: -2px;\r\n      inline-size: 1.2em;\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, h, Prop, State, Watch } from \"@stencil/core\";\r\n\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HeaderEvent, HeaderMenuItem, HeaderNavigationType } from \"./header.interfaces\";\r\nimport { translations } from \"./header.i18n\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\n@Component({\r\n  tag: \"dso-header\",\r\n  styleUrl: \"header.scss\",\r\n  shadow: true,\r\n})\r\nexport class Header {\r\n  private clickHandler(\r\n    e: MouseEvent,\r\n    type: HeaderNavigationType,\r\n    options?: { menuItem?: HeaderMenuItem; url?: string },\r\n  ) {\r\n    this.dsoHeaderClick.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n      type,\r\n      menuItem: options?.menuItem,\r\n      url: options?.url ?? options?.menuItem?.url,\r\n    });\r\n  }\r\n\r\n  private dropdownElement?: HTMLElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoHeaderElement;\r\n\r\n  /**\r\n   * The main menu items.\r\n   */\r\n  @Prop()\r\n  mainMenu?: HeaderMenuItem[] = [];\r\n\r\n  /**\r\n   * Either have the dropdown menu appear automatically or always.\r\n   */\r\n  @Prop()\r\n  useDropDownMenu: \"always\" | \"auto\" = \"auto\";\r\n\r\n  /**\r\n   * Used to show the login/logout option. 'none' renders nothing.\r\n   */\r\n  @Prop()\r\n  authStatus: \"none\" | \"loggedIn\" | \"loggedOut\" = \"none\";\r\n\r\n  /**\r\n   * When the `authStatus` is `loggedOut` a loginUrl can be provided.\r\n   * The login button will then render as an anchor.\r\n   */\r\n  @Prop()\r\n  loginUrl?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"logout\".\r\n   * If no URL is specified, a button element is used instead.\r\n   */\r\n  @Prop()\r\n  logoutUrl?: string;\r\n\r\n  /**\r\n   * Show a help-button or link in the header\r\n   */\r\n  @Prop()\r\n  showHelp? = false;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"help\".\r\n   * If no URL is specified, a button element is used instead.\r\n   */\r\n  @Prop()\r\n  helpUrl?: string;\r\n\r\n  /**\r\n   * The name to show when the user is logged in.\r\n   */\r\n  @Prop()\r\n  userProfileName?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates the profile url.\r\n   */\r\n  @Prop()\r\n  userProfileUrl?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n   */\r\n  @Prop()\r\n  userHomeUrl?: string;\r\n\r\n  /**\r\n   * Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n   */\r\n  @Prop()\r\n  userHomeActive?: boolean;\r\n\r\n  @State()\r\n  showDropDown?: boolean;\r\n\r\n  @State()\r\n  overflowMenuItems = 0;\r\n\r\n  @State()\r\n  dropdownOptionsOffset = 0;\r\n\r\n  /**\r\n   * Emitted when something in the header is selected.\r\n   *\r\n   * `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n   */\r\n  @Event()\r\n  dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n  @Watch(\"useDropDownMenu\")\r\n  setShowDropDown(value: \"always\" | \"auto\") {\r\n    if (value === \"auto\") {\r\n      this.setDropDownMenu();\r\n\r\n      return;\r\n    }\r\n\r\n    this.showDropDown = value === \"always\";\r\n  }\r\n\r\n  private wrapper: HTMLDivElement | undefined;\r\n\r\n  private nav: HTMLUListElement | undefined;\r\n\r\n  private shrinkMenuToFit() {\r\n    if (!this.wrapper || !this.nav) {\r\n      return;\r\n    }\r\n\r\n    if (this.wrapper.clientWidth >= this.nav.clientWidth) {\r\n      return;\r\n    }\r\n\r\n    if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {\r\n      return;\r\n    }\r\n\r\n    this.overflowMenuItems++;\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidRender() {\r\n    if (!this.host.isConnected) {\r\n      return;\r\n    }\r\n\r\n    if (this.showDropDown) {\r\n      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n\r\n      return;\r\n    }\r\n\r\n    window.setTimeout(() => this.shrinkMenuToFit(), 0);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.setShowDropDown(this.useDropDownMenu);\r\n\r\n    if (this.showDropDown) {\r\n      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n    }\r\n  }\r\n\r\n  private setOverflowMenu() {\r\n    if (this.showDropDown) {\r\n      return;\r\n    }\r\n\r\n    if (this.overflowMenuItems !== 0) {\r\n      this.overflowMenuItems = 0;\r\n      return;\r\n    }\r\n\r\n    this.shrinkMenuToFit();\r\n  }\r\n\r\n  private setDropDownMenu() {\r\n    if (this.useDropDownMenu !== \"auto\") {\r\n      return;\r\n    }\r\n\r\n    this.showDropDown = window.innerWidth < minDesktopViewportWidth;\r\n  }\r\n\r\n  private calculateDropdownOptionsOffset() {\r\n    if (!this.dropdownElement) {\r\n      return 0;\r\n    }\r\n\r\n    return (\r\n      this.host.clientHeight -\r\n      (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n    );\r\n  }\r\n\r\n  private onWindowResize = debounce(() => {\r\n    this.dropdownElement?.removeAttribute(\"open\");\r\n    this.dropdownElement?.removeAttribute(\"tabindex\");\r\n\r\n    this.setDropDownMenu();\r\n    this.setOverflowMenu();\r\n\r\n    if (this.showDropDown) {\r\n      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n    }\r\n  }, 100);\r\n\r\n  connectedCallback() {\r\n    window.addEventListener(\"resize\", this.onWindowResize);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.removeEventListener(\"resize\", this.onWindowResize);\r\n  }\r\n\r\n  private MenuItem = (item: HeaderMenuItem) => {\r\n    return (\r\n      <li class={item.active ? \"dso-active\" : undefined}>\r\n        <a\r\n          href={item.url}\r\n          aria-current={item.active ? \"page\" : undefined}\r\n          onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem: item })}\r\n        >\r\n          {item.label}\r\n        </a>\r\n      </li>\r\n    );\r\n  };\r\n\r\n  render() {\r\n    // Prevent 'flickering' when useDropDownMenu = 'always'\r\n    if (this.showDropDown === undefined) {\r\n      return;\r\n    }\r\n\r\n    return (\r\n      <>\r\n        <div\r\n          class={clsx(\"dso-header\", {\r\n            [\"use-drop-down\"]: this.showDropDown,\r\n          })}\r\n          ref={(element) => (this.wrapper = element)}\r\n        >\r\n          <div class=\"logo-container\">\r\n            <slot name=\"logo\" />\r\n          </div>\r\n          {this.showDropDown &&\r\n            this.mainMenu &&\r\n            (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== \"none\") && (\r\n              <div class=\"dropdown\">\r\n                <dso-dropdown-menu\r\n                  dropdown-align=\"right\"\r\n                  strategy=\"absolute\"\r\n                  dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n                  ref={(element) => (this.dropdownElement = element)}\r\n                >\r\n                  <button type=\"button\" slot=\"toggle\">\r\n                    <span>{this.text(\"menu\")}</span>\r\n                    <dso-icon icon=\"chevron-down\"></dso-icon>\r\n                  </button>\r\n                  <div class=\"dso-dropdown-options\">\r\n                    <ul>\r\n                      {this.mainMenu.map(this.MenuItem)}\r\n                      {this.userHomeUrl && (\r\n                        <li>\r\n                          <a\r\n                            href={this.userHomeUrl}\r\n                            onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n                          >\r\n                            {this.text(\"userHome\")}\r\n                          </a>\r\n                        </li>\r\n                      )}\r\n                      {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n                        <li>\r\n                          <a\r\n                            href={this.userProfileUrl}\r\n                            onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n                          >\r\n                            {this.userProfileName}\r\n                            <span class=\"profile-label\"> - Mijn profiel</span>\r\n                          </a>\r\n                        </li>\r\n                      )}\r\n                      {this.authStatus === \"loggedOut\" && (\r\n                        <li>\r\n                          {this.loginUrl ? (\r\n                            <a\r\n                              href={this.loginUrl}\r\n                              onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n                            >\r\n                              {this.text(\"login\")}\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                              {this.text(\"login\")}\r\n                            </button>\r\n                          )}\r\n                        </li>\r\n                      )}\r\n                      {this.authStatus === \"loggedIn\" && (\r\n                        <li>\r\n                          {this.logoutUrl ? (\r\n                            <a\r\n                              href={this.logoutUrl}\r\n                              onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n                            >\r\n                              {this.text(\"logout\")}\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                              {this.text(\"logout\")}\r\n                            </button>\r\n                          )}\r\n                        </li>\r\n                      )}\r\n                      {this.showHelp && (\r\n                        <li>\r\n                          {this.helpUrl ? (\r\n                            <a\r\n                              href={this.helpUrl}\r\n                              class=\"dso-tertiary\"\r\n                              onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n                            >\r\n                              <span>{this.text(\"help\")}</span>\r\n                              <dso-icon icon=\"help\"></dso-icon>\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" class=\"dso-tertiary\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n                              <span>{this.text(\"help\")}</span>\r\n                              <dso-icon icon=\"help\"></dso-icon>\r\n                            </button>\r\n                          )}\r\n                        </li>\r\n                      )}\r\n                    </ul>\r\n                  </div>\r\n                </dso-dropdown-menu>\r\n              </div>\r\n            )}\r\n          {!this.showDropDown && (\r\n            <>\r\n              <div class=\"dso-header-session\">\r\n                {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n                  <div class=\"profile\">\r\n                    <a\r\n                      href={this.userProfileUrl}\r\n                      class=\"dso-tertiary\"\r\n                      onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n                    >\r\n                      {this.userProfileName}\r\n                    </a>\r\n                  </div>\r\n                )}\r\n                {this.authStatus === \"loggedOut\" && (\r\n                  <div class=\"login\">\r\n                    {this.loginUrl ? (\r\n                      <a\r\n                        href={this.loginUrl}\r\n                        class=\"dso-tertiary\"\r\n                        onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n                      >\r\n                        {this.text(\"login\")}\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                        {this.text(\"login\")}\r\n                      </button>\r\n                    )}\r\n                  </div>\r\n                )}\r\n                {this.authStatus === \"loggedIn\" && (\r\n                  <div class=\"logout\">\r\n                    {this.logoutUrl ? (\r\n                      <a\r\n                        href={this.logoutUrl}\r\n                        class=\"dso-tertiary\"\r\n                        onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n                      >\r\n                        {this.text(\"logout\")}\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                        {this.text(\"logout\")}\r\n                      </button>\r\n                    )}\r\n                  </div>\r\n                )}\r\n                {this.showHelp && (\r\n                  <div class=\"help\">\r\n                    {this.helpUrl ? (\r\n                      <a\r\n                        href={this.helpUrl}\r\n                        class=\"dso-tertiary\"\r\n                        onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n                      >\r\n                        <span>{this.text(\"help\")}</span>\r\n                        <dso-icon icon=\"help\"></dso-icon>\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n                        <span>{this.text(\"help\")}</span>\r\n                        <dso-icon icon=\"help\"></dso-icon>\r\n                      </button>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n              {((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (\r\n                <nav class=\"dso-navbar\">\r\n                  <ul class=\"dso-nav dso-nav-main\" ref={(element) => (this.nav = element)}>\r\n                    {this.mainMenu &&\r\n                      this.mainMenu\r\n                        .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)\r\n                        .map(this.MenuItem)}\r\n                    {this.overflowMenuItems > 0 && (\r\n                      <li>\r\n                        <dso-dropdown-menu placement=\"bottom\">\r\n                          <button type=\"button\" slot=\"toggle\">\r\n                            <span>{this.text(\"overflowMenu\")}</span>\r\n                            <dso-icon icon=\"chevron-down\"></dso-icon>\r\n                          </button>\r\n                          <div class=\"dso-dropdown-options\">\r\n                            <ul>\r\n                              {this.mainMenu &&\r\n                                this.mainMenu\r\n                                  .filter(\r\n                                    (_, index) =>\r\n                                      this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems,\r\n                                  )\r\n                                  .map(this.MenuItem)}\r\n                            </ul>\r\n                          </div>\r\n                        </dso-dropdown-menu>\r\n                      </li>\r\n                    )}\r\n                    {this.userHomeUrl && (\r\n                      <li class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}>\r\n                        <a\r\n                          href={this.userHomeUrl}\r\n                          aria-current={this.userHomeActive ? \"page\" : undefined}\r\n                          onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n                        >\r\n                          <dso-icon icon=\"user-line\"></dso-icon>\r\n                          {this.text(\"userHome\")}\r\n                        </a>\r\n                      </li>\r\n                    )}\r\n                  </ul>\r\n                </nav>\r\n              )}\r\n            </>\r\n          )}\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}