npm - @dso-toolkit/core - Versions diffs - 67.0.0-ghi-2365.2 → 67.1.0 - Mend

@dso-toolkit/core 67.0.0-ghi-2365.2 → 67.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (94) hide show

package/dist/dso-toolkit/p-c64628c7.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as n,c as e,h as o,F as t,a as r,H as a}from"./p-7fc1e494.js";import{A as s}from"./p-f11d080a.js";import{w as i,A as d,a as l}from"./p-13396f6d.js";import{i as c}from"./p-2d694112.js";const b='a{background-color:transparent;color:var(--link-color);text-decoration:underline}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:1.5em;background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:url("./dso-icons.svg#img-download")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:url("./dso-icons.svg#img-download-scampi")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:1.5em;background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:url("./dso-icons.svg#img-external-link")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:url("./dso-icons.svg#img-external-link-scampi")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:1.5em;background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-image:url("./dso-icons.svg#img-call-grasgroen")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:url("./dso-icons.svg#img-call-scampi")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:1.5em;background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-image:url("./dso-icons.svg#img-email-grasgroen")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:url("./dso-icons.svg#img-email-scampi")}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}:host([wijzigactie=voegtoe]) a:is(.download,.download:hover,.download:focus-visible){background-image:url("./dso-icons.svg#img-download-zwart")}:host([wijzigactie=voegtoe]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url("./dso-icons.svg#img-external-link-zwart")}:host([wijzigactie=voegtoe]) a:is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:url("./dso-icons.svg#img-call-zwart")}:host([wijzigactie=voegtoe]) a:is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:url("./dso-icons.svg#img-email-zwart")}:host([wijzigactie=voegtoe]){box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}:host([wijzigactie=verwijder]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host([wijzigactie=verwijder]) a:is(.download,.download:hover,.download:focus-visible){background-image:url("./dso-icons.svg#img-download-zwart")}:host([wijzigactie=verwijder]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url("./dso-icons.svg#img-external-link-zwart")}:host([wijzigactie=verwijder]) a:is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:url("./dso-icons.svg#img-call-zwart")}:host([wijzigactie=verwijder]) a:is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:url("./dso-icons.svg#img-email-zwart")}:host([wijzigactie=verwijder]){text-decoration:line-through}@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}.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=b;const h=class{constructor(o){n(this,o);this.dsoActiveChange=e(this,"dsoActiveChange",7);this.watcher=i(this.host);this.wijzigactie=undefined;this.active=undefined;this.gewijzigdeLocatie=undefined;this.locatieNoemer=undefined}connectedCallback(){this.watcher.watch()}disconnectedCallback(){this.watcher.unwatch()}render(){const n=this.watcher.hasSymbool();return o(s,{key:"662684126533447bdee1394221937203261601be",symbol:n?o(d,null):undefined,active:this.active,dsoActiveChange:this.dsoActiveChange,title:o(t,null,o("span",{class:"content"},o("dso-renvooi",{value:this.locatieNoemer})),this.gewijzigdeLocatie&&o(l,null))})}get host(){return r(this)}};h.style=g;var f=undefined&&undefined.__rest\|\|function(n,e){var o={};for(var t in n)if(Object.prototype.hasOwnProperty.call(n,t)&&e.indexOf(t)<0)o[t]=n[t];if(n!=null&&typeof Object.getOwnPropertySymbols==="function")for(var r=0,t=Object.getOwnPropertySymbols(n);r<t.length;r++){if(e.indexOf(t[r])<0&&Object.prototype.propertyIsEnumerable.call(n,t[r]))o[t[r]]=n[t[r]]}return o};const p=(n,e)=>{var{heading:t,mode:r,href:a,onClick:s}=n,i=f(n,["heading","mode","href","onClick"]);let d;switch(t){default:case"h2":d=o("h2",Object.assign({},i,{onClick:r==="document"?s:undefined}),e);break;case"h3":d=o("h3",Object.assign({},i,{onClick:r==="document"?s:undefined}),e);break;case"h4":d=o("h4",Object.assign({},i,{onClick:r==="document"?s:undefined}),e);break;case"h5":d=o("h5",Object.assign({},i,{onClick:r==="document"?s:undefined}),e);break;case"h6":d=o("h6",Object.assign({},i,{onClick:r==="document"?s:undefined}),e)}if(r==="table-of-contents"&&a){return o("a",{href:a,onClick:s,class:"heading-anchor"},d)}return d};const y="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: #39870c;\n border-color: #39870c;\n 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: #275937;\n border-color: #275937;\n color: #fff;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n background-color: #173521;\n border-color: #173521;\n 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: #afcf9d;\n border-color: #afcf9d;\n 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,\na.dso-primary svg.di,\nbutton.dso-primary dso-icon,\nbutton.dso-primary svg.di,\nlabel.dso-primary dso-icon,\nlabel.dso-primary svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\na.dso-primary span + dso-icon,\na.dso-primary span + svg.di,\nbutton.dso-primary span + dso-icon,\nbutton.dso-primary span + svg.di,\nlabel.dso-primary span + dso-icon,\nlabel.dso-primary span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -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(\"./dso-icons.svg#img-download-wit\") no-repeat;\n background-position: 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(\"./dso-icons.svg#img-external-link-wit\") no-repeat;\n background-position: 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: #fff;\n border-color: #39870c;\n 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: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n background-color: #39870c;\n border-color: #39870c;\n 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: #fff;\n border-color: #afcf9d;\n 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,\na.dso-secondary svg.di,\nbutton.dso-secondary dso-icon,\nbutton.dso-secondary svg.di,\nlabel.dso-secondary dso-icon,\nlabel.dso-secondary svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\na.dso-secondary span + dso-icon,\na.dso-secondary span + svg.di,\nbutton.dso-secondary span + dso-icon,\nbutton.dso-secondary span + svg.di,\nlabel.dso-secondary span + dso-icon,\nlabel.dso-secondary span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -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(\"./dso-icons.svg#img-download\") no-repeat;\n background-position: 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: url(\"./dso-icons.svg#img-download-wit\");\n}\na.dso-secondary.download[disabled]::after,\nbutton.dso-secondary.download[disabled]::after,\nlabel.dso-secondary.download[disabled]::after {\n background-image: url(\"./dso-icons.svg#img-download-grasgroen-40\");\n}\na.dso-secondary.extern::after,\nbutton.dso-secondary.extern::after,\nlabel.dso-secondary.extern::after {\n background: url(\"./dso-icons.svg#img-external-link\") no-repeat;\n background-position: 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: url(\"./dso-icons.svg#img-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: url(\"./dso-icons.svg#img-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(\"./dso-icons.svg#img-download\") no-repeat;\n background-position: 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: url(\"./dso-icons.svg#img-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: url(\"./dso-icons.svg#img-download-scampi\");\n}\na.dso-tertiary.extern::after,\nbutton.dso-tertiary.extern::after,\nlabel.dso-tertiary.extern::after {\n background: url(\"./dso-icons.svg#img-external-link\") no-repeat;\n background-position: 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: url(\"./dso-icons.svg#img-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: url(\"./dso-icons.svg#img-external-link-scampi\");\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:is(.download, .download:hover, .download:focus-visible),\n:host(:where([wijzigactie=verwijder])) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-download-zwart\");\n}\n:host([wijzigactie=verwijderContainer]) .heading-container a:is(.extern, .extern:hover, .extern:focus-visible),\n:host(:where([wijzigactie=verwijder])) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-external-link-zwart\");\n}\n:host([wijzigactie=verwijderContainer]) .heading-container a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\n:host(:where([wijzigactie=verwijder])) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-call-zwart\");\n}\n:host([wijzigactie=verwijderContainer]) .heading-container a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\n:host(:where([wijzigactie=verwijder])) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-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:is(.download, .download:hover, .download:focus-visible),\n:host([wijzigactie=voegtoe]) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-download-zwart\");\n}\n:host([wijzigactie=nieuweContainer]) .heading-container a:is(.extern, .extern:hover, .extern:focus-visible),\n:host([wijzigactie=voegtoe]) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-external-link-zwart\");\n}\n:host([wijzigactie=nieuweContainer]) .heading-container a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\n:host([wijzigactie=voegtoe]) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-call-zwart\");\n}\n:host([wijzigactie=nieuweContainer]) .heading-container a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\n:host([wijzigactie=voegtoe]) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-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-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: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: document-component.$heading-anchor-color;\n --link-hover-color: document-component.$heading-anchor-hover-color;\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 m=y;const u={nieuweContainer:"Toegevoegd",verwijder:"Verwijderd",verwijderContainer:"Verwijderd",voegtoe:"Toegevoegd"};const v=class{constructor(o){n(this,o);this.dsoRecursiveToggle=e(this,"dsoRecursiveToggle",3);this.dsoOpenToggle=e(this,"dsoOpenToggle",3);this.dsoTableOfContentsClick=e(this,"dsoTableOfContentsClick",3);this.dsoOzonContentAnchorClick=e(this,"dsoOzonContentAnchorClick",3);this.dsoAnnotationToggle=e(this,"dsoAnnotationToggle",3);this.dsoMarkItemHighlight=e(this,"dsoMarkItemHighlight",3);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})};this.heading="h2";this.label=undefined;this.nummer=undefined;this.opschrift=undefined;this.inhoud=undefined;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.alternativeTitle=undefined;this.type=undefined;this.wijzigactie=undefined;this.annotationsWijzigactie=undefined;this.mark=undefined;this.recursiveToggle=undefined;this.mode="document";this.href=undefined}get wijzigactieLabel(){return this.wijzigactie&&u[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 e=!!((this.label\|\|this.nummer\|\|this.opschrift\|\|this.alternativeTitle)&&this.type!=="LID");const r=!!(this.wijzigactie\|\|e\|\|this.label\|\|this.nummer\|\|this.opschrift\|\|this.alternativeTitle\|\|this.bevatOntwerpInformatie\|\|this.annotated);return o(a,{key:"050711aa3e5227ac9a468b4177cf2408a812c524","not-collapsible":!e},r&&o("div",{key:"bd5484e50d030e424fb3ba4e2d5b86451b00e181",class:"heading-container",part:"_heading-container"},this.wijzigactie&&o("span",{key:"327b9a53addde2ff513a077b28c140b760c35d4b",class:"editaction-label"},this.wijzigactieLabel,":"),o("div",{key:"1bc6de30e0517bbf6d671a34cc0e52281d53b8d0",class:"heading"},o(p,{key:"26a645af827d41e0ce19d1c2b17a7f14e9be299c",heading:this.heading,class:"heading-element",onClick:this.handleHeadingClick,mode:this.mode,href:this.href},e&&this.mode==="document"&&o("button",{key:"477baa2478a912a7e62098ed402680221c607b4e",type:"button",class:"toggle-button","aria-describedby":"heading-title","aria-expanded":this.open.toString()},o("dso-icon",{key:"9a04f2c1dc70deb54d2f7977d7d41740c78df351",icon:this.open?"chevron-down":"chevron-right"}),o("span",{key:"a594823723148ed63fb1774dc446296ae3efc4da",class:"sr-only"},this.open?"Invouwen":"Uitvouwen")),o("span",{key:"909c52529cc65621d7973a2e06f3501d8d8d4216",id:"heading-title"},this.notApplicable&&o("span",{key:"d869da95a5e8d8d49bd7850c0ac4760cfad05801",class:"sr-only"},"Niet van toepassing:"),this.label\|\|this.nummer\|\|this.opschrift?o(t,null,this.label&&o(t,null," ",o("dso-ozon-content",{content:this.label,onDsoAnchorClick:this.handleOzonContentAnchorClick,mark:this.mark&&(n=>{var e;return(e=this.mark)===null\|\|e===void 0?void 0:e.call(this,n,"label")}),onDsoOzonContentMarkItemHighlight:n=>this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({},n.detail),{source:"label"})),inline:true})),this.nummer&&o(t,null," ",o("dso-ozon-content",{content:this.nummer,onDsoAnchorClick:this.handleOzonContentAnchorClick,mark:this.mark&&(n=>{var e;return(e=this.mark)===null\|\|e===void 0?void 0:e.call(this,n,"nummer")}),onDsoOzonContentMarkItemHighlight:n=>this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({},n.detail),{source:"nummer"})),inline:true})),this.opschrift&&o(t,null," ",o("dso-ozon-content",{content:this.opschrift,onDsoAnchorClick:this.handleOzonContentAnchorClick,mark:this.mark&&(n=>{var e;return(e=this.mark)===null\|\|e===void 0?void 0:e.call(this,n,"opschrift")}),onDsoOzonContentMarkItemHighlight:n=>this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({},n.detail),{source:"opschrift"})),inline:true}))):this.alternativeTitle,n&&o("span",{key:"07d4c76b7e1329efb78c41560389b506165de833"}," - [",n,"]"))),this.recursiveToggle!==undefined&&this.open&&this.mode==="document"&&o("button",{key:"941b9f8c4d29897ec2a39bf42904c5b326a475d9",type:"button",class:"recursive-toggle",title:this.recursiveToggle===true?"Verberg alles":"Toon alles",onClick:this.handleRecursiveToggleClick},o("dso-icon",{key:"46337a7625cb46d1161569722d76822c831a872b",icon:this.recursiveToggle===true?"eye":"eye-slash"})),this.showOntwerpBadge()&&o(t,null,o("dso-badge",{key:"ade951add661eefbd7d11c9de029e6b2e0394cba",status:"warning","aria-describedby":"nested-draft-description"},"!"),o("dso-tooltip",{key:"294d694a2f50878bbcac8b7b13476ce5cbdf78e3",id:"nested-draft-description"},"Er is een ontwerp beschikbaar.")),(this.bevatOntwerpInformatie\|\|this.annotated)&&o("div",{key:"18484e4344d0ff694dc67858eaff24ca0d27b0a8",class:"addons"},this.bevatOntwerpInformatie&&o("dso-label",{key:"8bf558ed5dd48df4d23f4957302e147c45651b95",status:"warning",compact:true},"Ontwerp"),this.annotated&&this.mode==="document"&&o("button",{key:"05314fa8305396e460fe95688acb97f94f166a1e",type:"button",class:"dso-tertiary","aria-controls":this.openAnnotation?"annotations":undefined,"aria-expanded":this.openAnnotation.toString(),onClick:n=>this.dsoAnnotationToggle.emit({originalEvent:n})},o("dso-icon",{key:"0a0f62fc38084a2d6c0c916350dba255ee353993",icon:"label"}),o("span",{key:"13ed74cf4e9ce6b812d1a21f1c4f937657eabcaf",class:"sr-only"},"Kenmerken en kaartgegevens ",this.openAnnotation?"verbergen":"tonen"))))),this.openAnnotation&&o("div",{key:"463130f23f107cc2347747bb39fdbbe8a890247b",class:"annotation-container",part:"_annotation-container"},o("dso-panel",{key:"f4d3b73f47d0918b276694de035bb722ec79c57f",id:"annotations",onDsoCloseClick:n=>this.dsoAnnotationToggle.emit({originalEvent:n}),closeButtonLabel:"Kenmerken en kaartgegevens verbergen"},o("h2",{key:"00db47e61722b1b4917210987513edd18758e66a",slot:"heading"},"Kenmerken en kaart"),o("slot",{key:"48b7dc786ed04ec4246c8034ab8bc3d15859b943",name:"annotations"}))),this.open&&(this.inhoud\|\|this.gereserveerd\|\|this.vervallen)&&this.mode==="document"&&o("div",{key:"729087f463134d47897dcf5246d949e8c8d73610",class:"content",part:"_content"},this.gereserveerd&&o("dso-alert",{key:"80333fb2c38651ad98e7bc707c65a60fb4e2bd2d",status:"info"},"Dit onderdeel is gereserveerd voor toekomstige toevoeging."),this.vervallen&&o("dso-alert",{key:"b06d8846e17d9c1b165bef0e38fb31018dddcae3",status:"info"},"Dit onderdeel is vervallen."),this.inhoud&&o("dso-ozon-content",{key:"01529975b3e2526a5540bf96cdf19fe2488fabc3",content:this.inhoud,onDsoAnchorClick:this.handleOzonContentAnchorClick,mark:this.mark&&(n=>{var e;return(e=this.mark)===null\|\|e===void 0?void 0:e.call(this,n,"inhoud")}),onDsoOzonContentMarkItemHighlight:n=>this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({},n.detail),{source:"inhoud"}))})),o("div",{key:"cb741975adcc22246353c06878f1dc6d1b2a8f1b",class:"children-container",part:"_children-container"},o("slot",{key:"fc5cf019d82b45aa6ac5789bc228a639367f18c2"})))}};v.style=m;export{h as dso_annotation_locatie,v as dso_document_component};
2	+ //# sourceMappingURL=p-c64628c7.entry.js.map

package/dist/dso-toolkit/p-c64628c7.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["annotationCss","DsoAnnotationLocatieStyle0","AnnotationLocatie","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","DsoDocumentComponentStyle0","wijzigactieLabels","nieuweContainer","verwijder","verwijderContainer","voegtoe","DocumentComponent","handleHeadingClick","e","dsoTableOfContentsClick","emit","originalEvent","isModifiedEvent","type","dsoOpenToggle","open","handleOzonContentAnchorClick","dsoOzonContentAnchorClick","ozonContentAnchorClick","detail","handleRecursiveToggleClick","dsoRecursiveToggle","current","recursiveToggle","next","wijzigactieLabel","wijzigactie","suffix","vervallen","gereserveerd","showOntwerpBadge","genesteOntwerpInformatie","bevatOntwerpInformatie","collapsible","label","nummer","opschrift","alternativeTitle","showHeading","annotated","Host","part","toString","icon","id","notApplicable","content","onDsoAnchorClick","mark","text","call","onDsoOzonContentMarkItemHighlight","dsoMarkItemHighlight","source","inline","status","compact","openAnnotation","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/anchor/anchor\";\r\n\r\n:host {\r\n display: block;\r\n padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n display: flex;\r\n gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n font-weight: 500;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n margin-block: 0;\r\n\r\n .content:has(+ dso-label) {\r\n margin-inline-end: units.$u1 * 0.5;\r\n }\r\n}\r\n\r\n.annotation-data {\r\n font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Prop, Event, h, 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/anchor\";\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 @include delete.root($strikethrough: false);\r\n\r\n --_dso-document-component-text-decoration: line-through;\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 anchor.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 anchor.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 } 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 */\r\n @Prop()\r\n label?: DocumentComponentInputType;\r\n\r\n /**\r\n * The Nummer XML.\r\n */\r\n @Prop()\r\n nummer?: DocumentComponentInputType;\r\n\r\n /**\r\n * The Opschrift XML.\r\n */\r\n @Prop()\r\n opschrift?: 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 * 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.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.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 {this.label || this.nummer || this.opschrift ? (\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\">Er is een ontwerp beschikbaar.</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 />\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-fbfe9a96.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as s,c as e,h as o,F as d,a as i}from"./p-7fc1e494.js";import{c as n}from"./p-8a1a6e56.js";import{d as t}from"./p-16e112f1.js";import{i as r}from"./p-672b0b80.js";import{i as a}from"./p-2d694112.js";const h={en:{"dso-header":{menu:"Menu",login:"Log in",logout:"Log out",help:"Help",overflowMenu:"More"}},nl:{"dso-header":{menu:"Menu",login:"Inloggen",logout:"Uitloggen",help:"Help",overflowMenu:"Meer",userHome:"Mijn Omgevingsloket"}}};const l=".sc-dso-header-h{display:block}.dso-header.sc-dso-header{border-block-end:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}@media screen and (min-width: 768px){.dso-header.sc-dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down.sc-dso-header{flex-wrap:nowrap}}.dso-header.sc-dso-header .dso-nav.sc-dso-header{border:0}.logo-container.sc-dso-header{flex:1 1 12.5rem;margin-inline-end:24px;padding-block-end:16px;padding-block-start:16px}.dso-header-session.sc-dso-header{display:flex;align-items:center;margin-inline-start:auto}.dso-header-session.sc-dso-header .profile.sc-dso-header .dso-tertiary.sc-dso-header,.dso-header-session.sc-dso-header .login.sc-dso-header .dso-tertiary.sc-dso-header,.dso-header-session.sc-dso-header .logout.sc-dso-header .dso-tertiary.sc-dso-header,.dso-header-session.sc-dso-header .help.sc-dso-header .dso-tertiary.sc-dso-header{cursor:pointer;font-family:Asap, sans-serif;font-weight:600;line-height:1.5}.dso-header-session.sc-dso-header .profile.sc-dso-header{margin-inline-start:8px}.dso-header-session.sc-dso-header .profile.sc-dso-header+.logout.sc-dso-header,.dso-header-session.sc-dso-header .profile.sc-dso-header~.help.sc-dso-header{border-inline-start:3px solid #ccc;margin-inline-start:8px;padding-inline-start:8px}.dso-header-session.sc-dso-header .help.sc-dso-header a.sc-dso-header,.dso-header-session.sc-dso-header .help.sc-dso-header button.sc-dso-header{display:flex}.dso-navbar.sc-dso-header{flex-basis:100%}.dso-navbar.sc-dso-header .dso-dropdown-options.sc-dso-header{border-block-start:1px solid #ccc}dso-dropdown-menu.sc-dso-header button.sc-dso-header{align-items:center;background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;padding-inline-end:32px}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{border:0;border-radius:0}@media screen and (min-width: 768px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{inline-size:375px}}@media screen and (max-width: 767px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{inline-size:100%}}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.sc-dso-header{color:#275937;font-size:1.25rem;padding:16px;white-space:pre-wrap}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:focus,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.sc-dso-header:focus{color:#fff}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:hover,dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header button.sc-dso-header:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.dso-active.sc-dso-header a.sc-dso-header{font-weight:600}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header+li.sc-dso-header{border-block-start:1px solid #ccc}.dropdown.sc-dso-header{margin-inline-start:auto;display:flex;align-items:center}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{position:static}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{inset-inline-end:0;inset-block-start:100%}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header{color:#39870c;font-size:16px;font-weight:600;line-height:normal;position:relative}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header::after{margin-inline-start:8px;position:absolute;inset-inline-end:0px;inset-block-start:50%;transform:translateY(-50%)}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header:hover,.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header>button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.sc-dso-header{align-items:end;column-gap:32px;display:flex;list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.dso-nav.sc-dso-header>li.sc-dso-header{margin-block-end:4px}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header{display:block}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:visited{color:#275937}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header{margin-block-end:0}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header>a.sc-dso-header{border-block-end:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main.sc-dso-header{display:flex !important}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header{text-decoration:none;font-size:1.25em;line-height:1;margin-block-start:8px;padding-block:16px;padding-inline:0;white-space:nowrap}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus-visible,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:active{text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{inset-inline-start:-1rem !important;inset-block-start:3px !important}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{font-size:1.25em;line-height:1;margin-block-start:8px;padding-block:16px;padding-inline:0;align-items:center;color:#275937;padding-inline-end:32px}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-inline-start:8px;position:absolute;inset-inline-end:0px;inset-block-start:auto;transform:none}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header{margin-inline-start:auto}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header dso-icon.sc-dso-header{block-size:1em;margin-inline-end:8px;position:relative;inset-block-start:-2px;inline-size:1.2em}";const c=l;const p=992;const u=class{constructor(d){s(this,d);this.dsoHeaderClick=e(this,"dsoHeaderClick",7);this.text=r((()=>this.host),h);this.onWindowResize=t((()=>{var s,e;(s=this.dropdownElement)===null\|\|s===void 0?void 0:s.removeAttribute("open");(e=this.dropdownElement)===null\|\|e===void 0?void 0:e.removeAttribute("tabindex");this.setDropDownMenu();this.setOverflowMenu();if(this.showDropDown){this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset()}}),100);this.MenuItem=s=>o("li",{class:s.active?"dso-active":undefined},o("a",{href:s.url,"aria-current":s.active?"page":undefined,onClick:e=>this.clickHandler(e,"menuItem",{menuItem:s})},s.label));this.mainMenu=[];this.useDropDownMenu="auto";this.authStatus="none";this.loginUrl=undefined;this.logoutUrl=undefined;this.showHelp=false;this.helpUrl=undefined;this.userProfileName=undefined;this.userProfileUrl=undefined;this.userHomeUrl=undefined;this.userHomeActive=undefined;this.showDropDown=undefined;this.overflowMenuItems=0;this.dropdownOptionsOffset=0}clickHandler(s,e,o){var d,i;this.dsoHeaderClick.emit({originalEvent:s,isModifiedEvent:a(s),type:e,menuItem:o===null\|\|o===void 0?void 0:o.menuItem,url:(d=o===null\|\|o===void 0?void 0:o.url)!==null&&d!==void 0?d:(i=o===null\|\|o===void 0?void 0:o.menuItem)===null\|\|i===void 0?void 0:i.url})}setShowDropDown(s){if(s==="auto"){this.setDropDownMenu();return}this.showDropDown=s==="always"}shrinkMenuToFit(){if(!this.wrapper\|\|!this.nav){return}if(this.wrapper.clientWidth>=this.nav.clientWidth){return}if(this.mainMenu&&this.overflowMenuItems>=this.mainMenu.length){return}this.overflowMenuItems++}componentDidRender(){if(this.showDropDown){this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset();return}window.setTimeout((()=>this.shrinkMenuToFit()),0)}componentDidLoad(){this.setShowDropDown(this.useDropDownMenu);if(this.showDropDown){this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset()}}setOverflowMenu(){if(this.showDropDown){return}if(this.overflowMenuItems!==0){this.overflowMenuItems=0;return}this.shrinkMenuToFit()}setDropDownMenu(){if(this.useDropDownMenu!=="auto"){return}this.showDropDown=window.innerWidth<p}calculateDropdownOptionsOffset(){var s;if(!this.dropdownElement){return 0}return this.host.clientHeight-(((s=this.dropdownElement)===null\|\|s===void 0?void 0:s.getBoundingClientRect().bottom)-this.host.getBoundingClientRect().top)}connectedCallback(){window.addEventListener("resize",this.onWindowResize)}disconnectedCallback(){window.removeEventListener("resize",this.onWindowResize)}render(){if(this.showDropDown===undefined){return}return o(d,null,o("div",{class:n("dso-header",{["use-drop-down"]:this.showDropDown}),ref:s=>this.wrapper=s},o("div",{class:"logo-container"},o("slot",{name:"logo"})),this.showDropDown&&this.mainMenu&&(this.mainMenu.length>0\|\|this.userHomeUrl\|\|this.authStatus!=="none")&&o("div",{class:"dropdown"},o("dso-dropdown-menu",{"dropdown-align":"right",strategy:"absolute",dropdownOptionsOffset:this.dropdownOptionsOffset,ref:s=>this.dropdownElement=s},o("button",{type:"button",slot:"toggle"},o("span",null,this.text("menu"))),o("div",{class:"dso-dropdown-options"},o("ul",null,this.mainMenu.map(this.MenuItem),this.userHomeUrl&&o("li",null,o("a",{href:this.userHomeUrl,onClick:s=>this.clickHandler(s,"userHome",{url:this.userHomeUrl})},this.text("userHome"))),this.userProfileUrl&&this.userProfileName&&this.authStatus==="loggedIn"&&o("li",null,o("a",{href:this.userProfileUrl,onClick:s=>this.clickHandler(s,"profile",{url:this.userProfileUrl})},this.userProfileName,o("span",{class:"profile-label"}," - Mijn profiel"))),this.authStatus==="loggedOut"&&o("li",null,this.loginUrl?o("a",{href:this.loginUrl,onClick:s=>this.clickHandler(s,"login",{url:this.loginUrl})},this.text("login")):o("button",{type:"button",onClick:s=>this.clickHandler(s,"login")},this.text("login"))),this.authStatus==="loggedIn"&&o("li",null,this.logoutUrl?o("a",{href:this.logoutUrl,onClick:s=>this.clickHandler(s,"logout",{url:this.logoutUrl})},this.text("logout")):o("button",{type:"button",onClick:s=>this.clickHandler(s,"logout")},this.text("logout"))),this.showHelp&&o("li",null,this.helpUrl?o("a",{href:this.helpUrl,class:"dso-tertiary",onClick:s=>this.clickHandler(s,"help",{url:this.helpUrl})},o("span",null,this.text("help")),o("dso-icon",{icon:"help"})):o("button",{type:"button",class:"dso-tertiary",onClick:s=>this.clickHandler(s,"help")},o("span",null,this.text("help")),o("dso-icon",{icon:"help"}))))))),!this.showDropDown&&o(d,null,o("div",{class:"dso-header-session"},this.userProfileUrl&&this.userProfileName&&this.authStatus==="loggedIn"&&o("div",{class:"profile"},o("a",{href:this.userProfileUrl,class:"dso-tertiary",onClick:s=>this.clickHandler(s,"profile",{url:this.userProfileUrl})},this.userProfileName)),this.authStatus==="loggedOut"&&o("div",{class:"login"},this.loginUrl?o("a",{href:this.loginUrl,class:"dso-tertiary",onClick:s=>this.clickHandler(s,"login",{url:this.loginUrl})},this.text("login")):o("button",{class:"dso-tertiary",type:"button",onClick:s=>this.clickHandler(s,"login")},this.text("login"))),this.authStatus==="loggedIn"&&o("div",{class:"logout"},this.logoutUrl?o("a",{href:this.logoutUrl,class:"dso-tertiary",onClick:s=>this.clickHandler(s,"logout",{url:this.logoutUrl})},this.text("logout")):o("button",{class:"dso-tertiary",type:"button",onClick:s=>this.clickHandler(s,"logout")},this.text("logout"))),this.showHelp&&o("div",{class:"help"},this.helpUrl?o("a",{href:this.helpUrl,class:"dso-tertiary",onClick:s=>this.clickHandler(s,"help",{url:this.helpUrl})},o("span",null,this.text("help")),o("dso-icon",{icon:"help"})):o("button",{class:"dso-tertiary",type:"button",onClick:s=>this.clickHandler(s,"help")},o("span",null,this.text("help")),o("dso-icon",{icon:"help"})))),(this.mainMenu&&this.mainMenu.length>0\|\|this.userHomeUrl)&&o("nav",{class:"dso-navbar"},o("ul",{class:"dso-nav dso-nav-main",ref:s=>this.nav=s},this.mainMenu&&this.mainMenu.filter(((s,e)=>this.mainMenu&&e<this.mainMenu.length-this.overflowMenuItems)).map(this.MenuItem),this.overflowMenuItems>0&&o("li",null,o("dso-dropdown-menu",{placement:"bottom"},o("button",{type:"button",slot:"toggle"},o("span",null,this.text("overflowMenu"))),o("div",{class:"dso-dropdown-options"},o("ul",null,this.mainMenu&&this.mainMenu.filter(((s,e)=>this.mainMenu&&e>=this.mainMenu.length-this.overflowMenuItems)).map(this.MenuItem))))),this.userHomeUrl&&o("li",{class:n("menu-user-home",{"dso-active":this.userHomeActive})},o("a",{href:this.userHomeUrl,"aria-current":this.userHomeActive?"page":undefined,onClick:s=>this.clickHandler(s,"userHome",{url:this.userHomeUrl})},o("dso-icon",{icon:"user-line"}),this.text("userHome"))))))))}get host(){return i(this)}static get watchers(){return{useDropDownMenu:["setShowDropDown"]}}};u.style=c;export{u as dso_header};
2	+ //# sourceMappingURL=p-fbfe9a96.entry.js.map

package/dist/dso-toolkit/p-fbfe9a96.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["translations","en","menu","login","logout","help","overflowMenu","nl","userHome","headerCss","DsoHeaderStyle0","minDesktopViewportWidth","Header","this","text","i18n","host","onWindowResize","debounce","_a","dropdownElement","removeAttribute","_b","setDropDownMenu","setOverflowMenu","showDropDown","dropdownOptionsOffset","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","mainMenu","overflowMenuItems","length","componentDidRender","window","setTimeout","componentDidLoad","useDropDownMenu","innerWidth","clientHeight","getBoundingClientRect","bottom","top","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","render","Fragment","clsx","ref","element","name","userHomeUrl","authStatus","strategy","slot","map","userProfileUrl","userProfileName","loginUrl","logoutUrl","showHelp","helpUrl","icon","filter","_","index","placement","userHomeActive"],"sources":["src/components/header/header.i18n.ts","src/components/header/header.scss?tag=dso-header&encapsulation=scoped","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/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\r\n@use \"header.variables\" as core-header-variables;\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 cursor: pointer;\r\n font-family: typography.$font-family-base;\r\n font-weight: 600;\r\n line-height: 1.5;\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 .dso-dropdown-options {\r\n border-block-start: 1px solid colors.$grijs-20;\r\n }\r\n}\r\n\r\ndso-dropdown-menu {\r\n button {\r\n align-items: center;\r\n background-color: transparent;\r\n border: 0;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n padding-inline-end: units.$u4;\r\n }\r\n\r\n .dso-dropdown-options {\r\n border: 0;\r\n border-radius: 0;\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 li {\r\n a,\r\n button {\r\n color: colors.$bosgroen;\r\n font-size: 1.25rem;\r\n padding: units.$u2;\r\n white-space: pre-wrap;\r\n\r\n &:focus {\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\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.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 }\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: center;\r\n color: colors.$bosgroen;\r\n padding-inline-end: units.$u4;\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 scoped: 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.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 </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 </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":"gNAEO,MAAMA,EAAyB,CACpCC,GAAI,CACF,aAAc,CACZC,KAAM,OACNC,MAAO,SACPC,OAAQ,UACRC,KAAM,OACNC,aAAc,SAGlBC,GAAI,CACF,aAAc,CACZL,KAAM,OACNC,MAAO,WACPC,OAAQ,YACRC,KAAM,OACNC,aAAc,OACdE,SAAU,yBCnBhB,MAAMC,EAAY,g9MAClB,MAAAC,EAAeD,ECUf,MAAME,EAA0B,I,MAOnBC,EAAM,M,wEAyITC,KAAAC,KAAOC,GAAK,IAAMF,KAAKG,MAAMhB,GAoD7Ba,KAAAI,eAAiBC,GAAS,K,SAChCC,EAAAN,KAAKO,mBAAe,MAAAD,SAAA,SAAAA,EAAEE,gBAAgB,SACtCC,EAAAT,KAAKO,mBAAe,MAAAE,SAAA,SAAAA,EAAED,gBAAgB,YAEtCR,KAAKU,kBACLV,KAAKW,kBAEL,GAAIX,KAAKY,aAAc,CACrBZ,KAAKa,sBAAwBb,KAAKc,gC,IAEnC,KAUKd,KAAAe,SAAYC,GAEhBC,EAAA,MAAIC,MAAOF,EAAKG,OAAS,aAAeC,WACtCH,EAAA,KACEI,KAAML,EAAKM,IAAG,eACAN,EAAKG,OAAS,OAASC,UACrCG,QAAUC,GAAMxB,KAAKyB,aAAaD,EAAG,WAAY,CAAEE,SAAUV,KAE5DA,EAAKW,Q,cAjMgB,G,qBAMO,O,gBAMW,O,+DAoBpC,M,gMAqCQ,E,2BAGI,C,CA/FhB,YAAAF,CACND,EACAI,EACAC,G,QAEA7B,KAAK8B,eAAeC,KAAK,CACvBC,cAAeR,EACfS,gBAAiBA,EAAgBT,GACjCI,OACAF,SAAUG,IAAO,MAAPA,SAAO,SAAPA,EAASH,SACnBJ,KAAKhB,EAAAuB,IAAO,MAAPA,SAAO,SAAPA,EAASP,OAAG,MAAAhB,SAAA,EAAAA,GAAIG,EAAAoB,IAAO,MAAPA,SAAO,SAAPA,EAASH,YAAQ,MAAAjB,SAAA,SAAAA,EAAEa,K,CAgG5C,eAAAY,CAAgBC,GACd,GAAIA,IAAU,OAAQ,CACpBnC,KAAKU,kBAEL,M,CAGFV,KAAKY,aAAeuB,IAAU,Q,CAOxB,eAAAC,GACN,IAAKpC,KAAKqC,UAAYrC,KAAKsC,IAAK,CAC9B,M,CAGF,GAAItC,KAAKqC,QAAQE,aAAevC,KAAKsC,IAAIC,YAAa,CACpD,M,CAGF,GAAIvC,KAAKwC,UAAYxC,KAAKyC,mBAAqBzC,KAAKwC,SAASE,OAAQ,CACnE,M,CAGF1C,KAAKyC,mB,CAKP,kBAAAE,GACE,GAAI3C,KAAKY,aAAc,CACrBZ,KAAKa,sBAAwBb,KAAKc,iCAElC,M,CAGF8B,OAAOC,YAAW,IAAM7C,KAAKoC,mBAAmB,E,CAGlD,gBAAAU,GACE9C,KAAKkC,gBAAgBlC,KAAK+C,iBAE1B,GAAI/C,KAAKY,aAAc,CACrBZ,KAAKa,sBAAwBb,KAAKc,gC,EAI9B,eAAAH,GACN,GAAIX,KAAKY,aAAc,CACrB,M,CAGF,GAAIZ,KAAKyC,oBAAsB,EAAG,CAChCzC,KAAKyC,kBAAoB,EACzB,M,CAGFzC,KAAKoC,iB,CAGC,eAAA1B,GACN,GAAIV,KAAK+C,kBAAoB,OAAQ,CACnC,M,CAGF/C,KAAKY,aAAegC,OAAOI,WAAalD,C,CAGlC,8BAAAgB,G,MACN,IAAKd,KAAKO,gBAAiB,CACzB,OAAO,C,CAGT,OACEP,KAAKG,KAAK8C,gBACT3C,EAAAN,KAAKO,mBAAe,MAAAD,SAAA,SAAAA,EAAE4C,wBAAwBC,QAASnD,KAAKG,KAAK+C,wBAAwBE,I,CAgB9F,iBAAAC,GACET,OAAOU,iBAAiB,SAAUtD,KAAKI,e,CAGzC,oBAAAmD,GACEX,OAAOY,oBAAoB,SAAUxD,KAAKI,e,CAiB5C,MAAAqD,GAEE,GAAIzD,KAAKY,eAAiBQ,UAAW,CACnC,M,CAGF,OACEH,EAAAyC,EAAA,KACEzC,EAAA,OACEC,MAAOyC,EAAK,aAAc,CACxB,CAAC,iBAAkB3D,KAAKY,eAE1BgD,IAAMC,GAAa7D,KAAKqC,QAAUwB,GAElC5C,EAAA,OAAKC,MAAM,kBACTD,EAAA,QAAM6C,KAAK,UAEZ9D,KAAKY,cACJZ,KAAKwC,WACJxC,KAAKwC,SAASE,OAAS,GAAK1C,KAAK+D,aAAe/D,KAAKgE,aAAe,SACnE/C,EAAA,OAAKC,MAAM,YACTD,EAAA,sCACiB,QACfgD,SAAS,WACTpD,sBAAuBb,KAAKa,sBAC5B+C,IAAMC,GAAa7D,KAAKO,gBAAkBsD,GAE1C5C,EAAA,UAAQW,KAAK,SAASsC,KAAK,UACzBjD,EAAA,YAAOjB,KAAKC,KAAK,UAEnBgB,EAAA,OAAKC,MAAM,wBACTD,EAAA,UACGjB,KAAKwC,SAAS2B,IAAInE,KAAKe,UACvBf,KAAK+D,aACJ9C,EAAA,UACEA,EAAA,KACEI,KAAMrB,KAAK+D,YACXxC,QAAUC,GAAMxB,KAAKyB,aAAaD,EAAG,WAAY,CAAEF,IAAKtB,KAAK+D,eAE5D/D,KAAKC,KAAK,cAIhBD,KAAKoE,gBAAkBpE,KAAKqE,iBAAmBrE,KAAKgE,aAAe,YAClE/C,EAAA,UACEA,EAAA,KACEI,KAAMrB,KAAKoE,eACX7C,QAAUC,GAAMxB,KAAKyB,aAAaD,EAAG,UAAW,CAAEF,IAAKtB,KAAKoE,kBAE3DpE,KAAKqE,gBACNpD,EAAA,QAAMC,MAAM,iBAAe,qBAIhClB,KAAKgE,aAAe,aACnB/C,EAAA,UACGjB,KAAKsE,SACJrD,EAAA,KACEI,KAAMrB,KAAKsE,SACX/C,QAAUC,GAAMxB,KAAKyB,aAAaD,EAAG,QAAS,CAAEF,IAAKtB,KAAKsE,YAEzDtE,KAAKC,KAAK,UAGbgB,EAAA,UAAQW,KAAK,SAASL,QAAUC,GAAMxB,KAAKyB,aAAaD,EAAG,UACxDxB,KAAKC,KAAK,WAKlBD,KAAKgE,aAAe,YACnB/C,EAAA,UACGjB,KAAKuE,UACJtD,EAAA,KACEI,KAAMrB,KAAKuE,UACXhD,QAAUC,GAAMxB,KAAKyB,aAAaD,EAAG,SAAU,CAAEF,IAAKtB,KAAKuE,aAE1DvE,KAAKC,KAAK,WAGbgB,EAAA,UAAQW,KAAK,SAASL,QAAUC,GAAMxB,KAAKyB,aAAaD,EAAG,WACxDxB,KAAKC,KAAK,YAKlBD,KAAKwE,UACJvD,EAAA,UACGjB,KAAKyE,QACJxD,EAAA,KACEI,KAAMrB,KAAKyE,QACXvD,MAAM,eACNK,QAAUC,GAAMxB,KAAKyB,aAAaD,EAAG,OAAQ,CAAEF,IAAKtB,KAAKyE,WAEzDxD,EAAA,YAAOjB,KAAKC,KAAK,SACjBgB,EAAA,YAAUyD,KAAK,UAGjBzD,EAAA,UAAQW,KAAK,SAASV,MAAM,eAAeK,QAAUC,GAAMxB,KAAKyB,aAAaD,EAAG,SAC9EP,EAAA,YAAOjB,KAAKC,KAAK,SACjBgB,EAAA,YAAUyD,KAAK,gBAUjC1E,KAAKY,cACLK,EAAAyC,EAAA,KACEzC,EAAA,OAAKC,MAAM,sBACRlB,KAAKoE,gBAAkBpE,KAAKqE,iBAAmBrE,KAAKgE,aAAe,YAClE/C,EAAA,OAAKC,MAAM,WACTD,EAAA,KACEI,KAAMrB,KAAKoE,eACXlD,MAAM,eACNK,QAAUC,GAAMxB,KAAKyB,aAAaD,EAAG,UAAW,CAAEF,IAAKtB,KAAKoE,kBAE3DpE,KAAKqE,kBAIXrE,KAAKgE,aAAe,aACnB/C,EAAA,OAAKC,MAAM,SACRlB,KAAKsE,SACJrD,EAAA,KACEI,KAAMrB,KAAKsE,SACXpD,MAAM,eACNK,QAAUC,GAAMxB,KAAKyB,aAAaD,EAAG,QAAS,CAAEF,IAAKtB,KAAKsE,YAEzDtE,KAAKC,KAAK,UAGbgB,EAAA,UAAQC,MAAM,eAAeU,KAAK,SAASL,QAAUC,GAAMxB,KAAKyB,aAAaD,EAAG,UAC7ExB,KAAKC,KAAK,WAKlBD,KAAKgE,aAAe,YACnB/C,EAAA,OAAKC,MAAM,UACRlB,KAAKuE,UACJtD,EAAA,KACEI,KAAMrB,KAAKuE,UACXrD,MAAM,eACNK,QAAUC,GAAMxB,KAAKyB,aAAaD,EAAG,SAAU,CAAEF,IAAKtB,KAAKuE,aAE1DvE,KAAKC,KAAK,WAGbgB,EAAA,UAAQC,MAAM,eAAeU,KAAK,SAASL,QAAUC,GAAMxB,KAAKyB,aAAaD,EAAG,WAC7ExB,KAAKC,KAAK,YAKlBD,KAAKwE,UACJvD,EAAA,OAAKC,MAAM,QACRlB,KAAKyE,QACJxD,EAAA,KACEI,KAAMrB,KAAKyE,QACXvD,MAAM,eACNK,QAAUC,GAAMxB,KAAKyB,aAAaD,EAAG,OAAQ,CAAEF,IAAKtB,KAAKyE,WAEzDxD,EAAA,YAAOjB,KAAKC,KAAK,SACjBgB,EAAA,YAAUyD,KAAK,UAGjBzD,EAAA,UAAQC,MAAM,eAAeU,KAAK,SAASL,QAAUC,GAAMxB,KAAKyB,aAAaD,EAAG,SAC9EP,EAAA,YAAOjB,KAAKC,KAAK,SACjBgB,EAAA,YAAUyD,KAAK,aAMtB1E,KAAKwC,UAAYxC,KAAKwC,SAASE,OAAS,GAAM1C,KAAK+D,cACpD9C,EAAA,OAAKC,MAAM,cACTD,EAAA,MAAIC,MAAM,uBAAuB0C,IAAMC,GAAa7D,KAAKsC,IAAMuB,GAC5D7D,KAAKwC,UACJxC,KAAKwC,SACFmC,QAAO,CAACC,EAAGC,IAAU7E,KAAKwC,UAAYqC,EAAQ7E,KAAKwC,SAASE,OAAS1C,KAAKyC,oBAC1E0B,IAAInE,KAAKe,UACbf,KAAKyC,kBAAoB,GACxBxB,EAAA,UACEA,EAAA,qBAAmB6D,UAAU,UAC3B7D,EAAA,UAAQW,KAAK,SAASsC,KAAK,UACzBjD,EAAA,YAAOjB,KAAKC,KAAK,kBAEnBgB,EAAA,OAAKC,MAAM,wBACTD,EAAA,UACGjB,KAAKwC,UACJxC,KAAKwC,SACFmC,QACC,CAACC,EAAGC,IACF7E,KAAKwC,UAAYqC,GAAS7E,KAAKwC,SAASE,OAAS1C,KAAKyC,oBAEzD0B,IAAInE,KAAKe,cAMvBf,KAAK+D,aACJ9C,EAAA,MAAIC,MAAOyC,EAAK,iBAAkB,CAAE,aAAc3D,KAAK+E,kBACrD9D,EAAA,KACEI,KAAMrB,KAAK+D,YAAW,eACR/D,KAAK+E,eAAiB,OAAS3D,UAC7CG,QAAUC,GAAMxB,KAAKyB,aAAaD,EAAG,WAAY,CAAEF,IAAKtB,KAAK+D,eAE7D9C,EAAA,YAAUyD,KAAK,cACd1E,KAAKC,KAAK,kB","ignoreList":[]}

package/dist/esm/dso-accordion-section.entry.js CHANGED Viewed

@@ -8,7 +8,7 @@ const stateMap = {
     error: "fout:",
 };
-const accordionSectionCss = "*,*::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}:host{display:block}:host .dso-section-handle{font-size:1em;font-weight:600;line-height:1.375em;margin:0;position:relative}:host .dso-section-handle>a:active{text-decoration:none}:host .dso-section-handle a{text-decoration:none}:host .dso-section-handle a:hover,:host .dso-section-handle a:focus-visible{text-decoration:none}:host .dso-section-handle a:active{text-decoration:underline}:host .dso-section-handle .dso-status{font-weight:400;text-decoration:underline}:host .dso-section-handle>button,:host .dso-section-handle>a{align-items:flex-start;background-color:transparent;border:0;cursor:pointer;display:flex;font-family:Asap, sans-serif;font-size:1em;font-weight:600;line-height:1.375em;margin:0;padding-block:12px;padding-inline:16px;text-align:start;inline-size:100%;word-break:break-word}:host .dso-section-handle>button dso-icon,:host .dso-section-handle>a dso-icon{flex-shrink:0}:host .dso-section-handle>button dso-icon.dso-section-handle-chevron,:host .dso-section-handle>a dso-icon.dso-section-handle-chevron{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:rotate(0)}:host .dso-section-handle>button>.dso-section-handle-addons:first-child,:host .dso-section-handle>button>dso-icon:first-child,:host .dso-section-handle>a>.dso-section-handle-addons:first-child,:host .dso-section-handle>a>dso-icon:first-child{margin-inline-end:8px}:host .dso-section-handle>button>dso-icon:last-child,:host .dso-section-handle>a>dso-icon:last-child{margin-inline-start:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child,:host .dso-section-handle>a>.dso-section-handle-addons:last-child{margin-inline-start:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-icon,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-icon{margin-inline-start:16px}:host .dso-section-handle>button>dso-label,:host .dso-section-handle>a>dso-label{margin-inline-start:auto;padding-inline-start:8px;word-break:normal}:host .dso-section-handle>button>dso-label+dso-icon:last-child,:host .dso-section-handle>button>dso-label+.dso-section-handle-addons:last-child,:host .dso-section-handle>a>dso-label+dso-icon:last-child,:host .dso-section-handle>a>dso-label+.dso-section-handle-addons:last-child{margin-inline-start:8px}:host([open]:not([open=false])) .dso-section-handle>button .dso-section-handle-chevron:first-child,:host([open]:not([open=false])) .dso-section-handle>a .dso-section-handle-chevron:first-child{transform:rotate(90deg)}:host([open]:not([open=false])) .dso-section-handle>button .dso-section-handle-chevron:last-child,:host([open]:not([open=false])) .dso-section-handle>a .dso-section-handle-chevron:last-child{transform:rotate(-180deg)}.dso-section-body{background-color:#fff;border-block-start:0;margin-block-start:-4px}.dso-section-body .dso-section-body-content{padding-block:20px 16px;padding-inline:16px}:host(.dso-accordion-default) .dso-section-handle{background-color:#fff;border:1px solid #8b4a6a;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle a,:host(.dso-accordion-default) .dso-section-handle button{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-handle a:hover,:host(.dso-accordion-default) .dso-section-handle a:active,:host(.dso-accordion-default) .dso-section-handle a.active,:host(.dso-accordion-default) .dso-section-handle button:hover,:host(.dso-accordion-default) .dso-section-handle button:active,:host(.dso-accordion-default) .dso-section-handle button.active{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-body{border:1px solid #8b4a6a;border-radius:0 0 4px 4px}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle{background-color:#8b4a6a;border-radius:0;border-start-start-radius:4px;border-start-end-radius:4px}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle button{color:#fff}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=false])) .dso-section-body{background-color:#e5e5e5}:host(.dso-accordion-compact) .dso-section-handle{border-block-end:1px solid transparent;border-block-start:1px solid #ccc}:host(.dso-accordion-compact) .dso-section-handle a,:host(.dso-accordion-compact) .dso-section-handle button{color:#39870c;padding-block-end:11px;padding-inline-start:0;padding-block-start:11px}:host(.dso-accordion-compact) .dso-section-handle a:hover,:host(.dso-accordion-compact) .dso-section-handle a:active,:host(.dso-accordion-compact) .dso-section-handle a.active,:host(.dso-accordion-compact) .dso-section-handle button:hover,:host(.dso-accordion-compact) .dso-section-handle button:active,:host(.dso-accordion-compact) .dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact) .dso-section-body .dso-section-body-content{padding-inline-start:32px;padding-block-start:0;padding-inline-end:0}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle button{padding-inline-start:16px}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-inline-start:16px;padding-inline-end:0}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button{color:#39870c}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a:hover,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a:active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a.active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button:hover,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button:active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-body{border-block-start:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-block-end:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-block-end:0}:host(.dso-accordion-compact-black) .dso-section-handle{border-block-end:1px solid transparent;border-block-start:1px solid #ccc}:host(.dso-accordion-compact-black) .dso-section-handle a,:host(.dso-accordion-compact-black) .dso-section-handle button{color:#000;padding-block-end:11px;padding-inline-start:0;padding-block-start:11px}:host(.dso-accordion-compact-black) .dso-section-handle a:hover,:host(.dso-accordion-compact-black) .dso-section-handle a:active,:host(.dso-accordion-compact-black) .dso-section-handle a.active,:host(.dso-accordion-compact-black) .dso-section-handle button:hover,:host(.dso-accordion-compact-black) .dso-section-handle button:active,:host(.dso-accordion-compact-black) .dso-section-handle button.active{color:#000}:host(.dso-accordion-compact-black) .dso-section-body .dso-section-body-content{padding-inline-start:32px;padding-block-start:0;padding-inline-end:0}:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-handle button{padding-inline-start:16px}:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-inline-start:16px;padding-inline-end:0}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button{color:#000}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a:hover,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a:active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a.active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button:hover,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button:active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button.active{color:#000}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-body{border-block-start:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-block-end:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-block-end:0}:host(.dso-accordion-conclusion) .dso-section-handle{background-color:#f2f2f2;border:1px solid #f2f2f2}:host(.dso-accordion-conclusion) .dso-section-handle a,:host(.dso-accordion-conclusion) .dso-section-handle button{color:#000}:host(.dso-accordion-conclusion) .dso-section-handle a:hover,:host(.dso-accordion-conclusion) .dso-section-handle a:active,:host(.dso-accordion-conclusion) .dso-section-handle a.active,:host(.dso-accordion-conclusion) .dso-section-handle button:hover,:host(.dso-accordion-conclusion) .dso-section-handle button:active,:host(.dso-accordion-conclusion) .dso-section-handle button.active{background-color:#e5e5e5}:host(.dso-accordion-conclusion) .dso-section-handle a dso-attachments-counter,:host(.dso-accordion-conclusion) .dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#000;--dso-icon:var(--di-paperclip-zwart)}:host(.dso-accordion-conclusion) .dso-section-body{border:2px solid #f2f2f2}:host(.dso-accordion-conclusion[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle{background-color:#f2f2f2}:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=false])){background-color:#fff}:host(.dso-accordion-neutral) .dso-section-handle{background-color:transparent;border:none;border-radius:4px;margin-block-end:2px}:host(.dso-accordion-neutral) .dso-section-handle a,:host(.dso-accordion-neutral) .dso-section-handle button{color:#000;padding-block:5px;padding-inline:0 16px}:host(.dso-accordion-neutral) .dso-section-handle a:hover,:host(.dso-accordion-neutral) .dso-section-handle a:active,:host(.dso-accordion-neutral) .dso-section-handle a.active,:host(.dso-accordion-neutral) .dso-section-handle button:hover,:host(.dso-accordion-neutral) .dso-section-handle button:active,:host(.dso-accordion-neutral) .dso-section-handle button.active{color:#000}:host(.dso-accordion-neutral) .dso-section-handle a .info-icon,:host(.dso-accordion-neutral) .dso-section-handle button .info-icon{color:#39870c;margin-inline-start:8px}:host(.dso-accordion-neutral) .dso-section-handle dso-icon,:host(.dso-accordion-neutral) .dso-section-handle svg.di{vertical-align:top}:host(.dso-accordion-neutral) .dso-section-body[open],:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide){background-color:transparent;border:1px solid #275937;box-shadow:1px 3px 4px rgba(0, 0, 0, 0.5);margin-block:-2px 0}:host(.dso-accordion-neutral) .dso-section-body[open].dso-animate-ready,:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide).dso-animate-ready{transition-property:grid-template-rows, margin-block, border}:host(.dso-accordion-neutral) .dso-section-body[open] .dso-section-body-content,:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide) .dso-section-body-content{padding-block:16px 24px;padding-inline:16px}@media screen and (min-width: 480px){:host(.dso-accordion-neutral) .dso-section-body[open] .dso-section-body-content,:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide) .dso-section-body-content{padding-block:16px 24px;padding-inline:32px}}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle{background-color:transparant;border-radius:0;border-start-start-radius:4px;border-start-end-radius:4px}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle button{color:#000}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-neutral[open]:not([open=false])) .dso-section-body{margin-block-end:16px;margin-block-start:2px}:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=false])) .dso-section-body{background-color:#e5e5e5}";
+const accordionSectionCss = "*,*::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}:host{display:block}:host .dso-section-handle{font-size:1em;font-weight:600;line-height:1.375em;margin:0;position:relative}:host .dso-section-handle>a:active{text-decoration:none}:host .dso-section-handle a{text-decoration:none}:host .dso-section-handle a:hover,:host .dso-section-handle a:focus-visible{text-decoration:none}:host .dso-section-handle a:active{text-decoration:underline}:host .dso-section-handle .dso-status{font-weight:400;text-decoration:underline}:host .dso-section-handle>button,:host .dso-section-handle>a{align-items:flex-start;background-color:transparent;border:0;cursor:pointer;display:flex;font-family:Asap, sans-serif;font-size:1em;font-weight:600;line-height:1.375em;margin:0;padding-block:12px;padding-inline:16px;text-align:start;inline-size:100%;word-break:break-word}:host .dso-section-handle>button dso-icon,:host .dso-section-handle>a dso-icon{flex-shrink:0}:host .dso-section-handle>button dso-icon.dso-section-handle-chevron,:host .dso-section-handle>a dso-icon.dso-section-handle-chevron{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:rotate(0)}:host .dso-section-handle>button>.dso-section-handle-addons:first-child,:host .dso-section-handle>button>dso-icon:first-child,:host .dso-section-handle>a>.dso-section-handle-addons:first-child,:host .dso-section-handle>a>dso-icon:first-child{margin-inline-end:8px}:host .dso-section-handle>button>dso-icon:last-child,:host .dso-section-handle>a>dso-icon:last-child{margin-inline-start:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child,:host .dso-section-handle>a>.dso-section-handle-addons:last-child{margin-inline-start:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-icon,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-icon{margin-inline-start:16px}:host .dso-section-handle>button>dso-label,:host .dso-section-handle>a>dso-label{margin-inline-start:auto;padding-inline-start:8px;word-break:normal}:host .dso-section-handle>button>dso-label+dso-icon:last-child,:host .dso-section-handle>button>dso-label+.dso-section-handle-addons:last-child,:host .dso-section-handle>a>dso-label+dso-icon:last-child,:host .dso-section-handle>a>dso-label+.dso-section-handle-addons:last-child{margin-inline-start:8px}:host([open]:not([open=false])) .dso-section-handle>button .dso-section-handle-chevron:first-child,:host([open]:not([open=false])) .dso-section-handle>a .dso-section-handle-chevron:first-child{transform:rotate(90deg)}:host([open]:not([open=false])) .dso-section-handle>button .dso-section-handle-chevron:last-child,:host([open]:not([open=false])) .dso-section-handle>a .dso-section-handle-chevron:last-child{transform:rotate(-180deg)}.dso-section-body{background-color:#fff;border-block-start:0;margin-block-start:-4px}.dso-section-body .dso-section-body-content{padding-block:20px 16px;padding-inline:16px}:host(.dso-accordion-default) .dso-section-handle{background-color:#fff;border:1px solid #8b4a6a;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle a,:host(.dso-accordion-default) .dso-section-handle button{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-handle a:hover,:host(.dso-accordion-default) .dso-section-handle a:active,:host(.dso-accordion-default) .dso-section-handle a.active,:host(.dso-accordion-default) .dso-section-handle button:hover,:host(.dso-accordion-default) .dso-section-handle button:active,:host(.dso-accordion-default) .dso-section-handle button.active{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-body{border:1px solid #8b4a6a;border-radius:0 0 4px 4px}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle{background-color:#8b4a6a;border-radius:0;border-start-start-radius:4px;border-start-end-radius:4px}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle button{color:#fff}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=false])) .dso-section-body{background-color:#e5e5e5}:host(.dso-accordion-compact) .dso-section-handle{border-block-end:1px solid transparent;border-block-start:1px solid #ccc}:host(.dso-accordion-compact) .dso-section-handle a,:host(.dso-accordion-compact) .dso-section-handle button{color:#39870c;padding-block-end:11px;padding-inline-start:0;padding-block-start:11px}:host(.dso-accordion-compact) .dso-section-handle a:hover,:host(.dso-accordion-compact) .dso-section-handle a:active,:host(.dso-accordion-compact) .dso-section-handle a.active,:host(.dso-accordion-compact) .dso-section-handle button:hover,:host(.dso-accordion-compact) .dso-section-handle button:active,:host(.dso-accordion-compact) .dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact) .dso-section-body .dso-section-body-content{padding-inline-start:32px;padding-block-start:0;padding-inline-end:0}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle button{padding-inline-start:16px}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-inline-start:16px;padding-inline-end:0}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button{color:#39870c}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a:hover,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a:active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a.active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button:hover,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button:active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-body{border-block-start:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-block-end:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-block-end:0}:host(.dso-accordion-compact-black) .dso-section-handle{border-block-end:1px solid transparent;border-block-start:1px solid #ccc}:host(.dso-accordion-compact-black) .dso-section-handle a,:host(.dso-accordion-compact-black) .dso-section-handle button{color:#000;padding-block-end:11px;padding-inline-start:0;padding-block-start:11px}:host(.dso-accordion-compact-black) .dso-section-handle a:hover,:host(.dso-accordion-compact-black) .dso-section-handle a:active,:host(.dso-accordion-compact-black) .dso-section-handle a.active,:host(.dso-accordion-compact-black) .dso-section-handle button:hover,:host(.dso-accordion-compact-black) .dso-section-handle button:active,:host(.dso-accordion-compact-black) .dso-section-handle button.active{color:#000}:host(.dso-accordion-compact-black) .dso-section-body .dso-section-body-content{padding-inline-start:32px;padding-block-start:0;padding-inline-end:0}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-voegtoe){background-color:#ebf3e6}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-voegtoe) .dso-section-body{background-color:#ebf3e6}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder){background-color:#f5d8dc}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) .dso-section-body{background-color:#f5d8dc}:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-handle button{padding-inline-start:16px}:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-inline-start:16px;padding-inline-end:0}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button{color:#000}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a:hover,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a:active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a.active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button:hover,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button:active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button.active{color:#000}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-body{border-block-start:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-block-end:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-block-end:0}:host(.dso-accordion-conclusion) .dso-section-handle{background-color:#f2f2f2;border:1px solid #f2f2f2}:host(.dso-accordion-conclusion) .dso-section-handle a,:host(.dso-accordion-conclusion) .dso-section-handle button{color:#000}:host(.dso-accordion-conclusion) .dso-section-handle a:hover,:host(.dso-accordion-conclusion) .dso-section-handle a:active,:host(.dso-accordion-conclusion) .dso-section-handle a.active,:host(.dso-accordion-conclusion) .dso-section-handle button:hover,:host(.dso-accordion-conclusion) .dso-section-handle button:active,:host(.dso-accordion-conclusion) .dso-section-handle button.active{background-color:#e5e5e5}:host(.dso-accordion-conclusion) .dso-section-handle a dso-attachments-counter,:host(.dso-accordion-conclusion) .dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#000;--dso-icon:var(--di-paperclip-zwart)}:host(.dso-accordion-conclusion) .dso-section-body{border:2px solid #f2f2f2}:host(.dso-accordion-conclusion[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle{background-color:#f2f2f2}:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=false])){background-color:#fff}:host(.dso-accordion-neutral) .dso-section-handle{background-color:transparent;border:none;border-radius:4px;margin-block-end:2px}:host(.dso-accordion-neutral) .dso-section-handle a,:host(.dso-accordion-neutral) .dso-section-handle button{color:#000;padding-block:5px;padding-inline:0 16px}:host(.dso-accordion-neutral) .dso-section-handle a:hover,:host(.dso-accordion-neutral) .dso-section-handle a:active,:host(.dso-accordion-neutral) .dso-section-handle a.active,:host(.dso-accordion-neutral) .dso-section-handle button:hover,:host(.dso-accordion-neutral) .dso-section-handle button:active,:host(.dso-accordion-neutral) .dso-section-handle button.active{color:#000}:host(.dso-accordion-neutral) .dso-section-handle a .info-icon,:host(.dso-accordion-neutral) .dso-section-handle button .info-icon{color:#39870c;margin-inline-start:8px}:host(.dso-accordion-neutral) .dso-section-handle dso-icon,:host(.dso-accordion-neutral) .dso-section-handle svg.di{vertical-align:top}:host(.dso-accordion-neutral) .dso-section-body[open],:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide){background-color:transparent;border:1px solid #275937;box-shadow:1px 3px 4px rgba(0, 0, 0, 0.5);margin-block:-2px 0}:host(.dso-accordion-neutral) .dso-section-body[open].dso-animate-ready,:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide).dso-animate-ready{transition-property:grid-template-rows, margin-block, border}:host(.dso-accordion-neutral) .dso-section-body[open] .dso-section-body-content,:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide) .dso-section-body-content{padding-block:16px 24px;padding-inline:16px}@media screen and (min-width: 480px){:host(.dso-accordion-neutral) .dso-section-body[open] .dso-section-body-content,:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide) .dso-section-body-content{padding-block:16px 24px;padding-inline:32px}}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle{background-color:transparant;border-radius:0;border-start-start-radius:4px;border-start-end-radius:4px}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle button{color:#000}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-neutral[open]:not([open=false])) .dso-section-body{margin-block-end:16px;margin-block-start:2px}:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=false])) .dso-section-body{background-color:#e5e5e5}";
 const DsoAccordionSectionStyle0 = accordionSectionCss;
 // eslint-disable-next-line no-console
@@ -85,6 +85,7 @@ const AccordionSection = class {
             });
         };
         this.handleTitle = undefined;
+        this.wijzigactie = undefined;
         this.heading = "h2";
         this.handleUrl = undefined;
         this.status = undefined;
@@ -166,12 +167,13 @@ const AccordionSection = class {
         var _a;
         const { variant, reverseAlign } = (_a = this.accordionState) !== null && _a !== void 0 ? _a : {};
         const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;
-        return (h(Host, { key: '23337050418689dbfc47c9542db507be85152548', class: {
+        return (h(Host, { key: '937a873b5c70c026f894ae8dea52683b863d90b0', class: {
                 "dso-accordion-section": true,
                 ["dso-accordion-" + variant]: true,
                 "dso-nested-accordion": this.hasNestedAccordion || this.containsNestedAccordion,
                 "dso-accordion-reverse-align": reverseAlign !== null && reverseAlign !== void 0 ? reverseAlign : false,
-            }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h(Handle, { key: '8493773157cbad694a9276a34edf42f28971c1d3', heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { key: '03af7533dc94bef4e5a7ef4bea580075f02c892c', handleUrl: this.handleUrl, onClick: this.handleClick, open: this.open, handleElementRef: (e) => (this.handleElementRef = e) }, reverseAlign ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("span", null, this.handleTitle), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.status && h("span", { class: "sr-only" }, stateMap[this.status]), h("span", null, this.handleTitle, this.isNeutral && (h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("dso-expandable", { key: 'a2ffd853eb9dfd47220f64a6af05bd1a78bb1efe', class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationStart: this.handleExpandableAnimationStart, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, h("div", { key: '1d0233d7f7464ba1d0071d401761923d7b644661', class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, h("slot", { key: '125ac6d140ca961facba19f52ac0ba12dc2b6364' })))));
+                ["dso-accordion-wijzigactie-" + this.wijzigactie]: !!this.wijzigactie,
+            }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h(Handle, { key: 'f11e91044d5bb13452ae5bf47fee3687251e82df', heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { key: '8139be8585ce016428b0a8b60b47f3b96f3e0875', handleUrl: this.handleUrl, onClick: this.handleClick, open: this.open, handleElementRef: (e) => (this.handleElementRef = e) }, reverseAlign ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("dso-renvooi", { value: this.handleTitle }), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.status && h("span", { class: "sr-only" }, stateMap[this.status]), h("span", null, h("dso-renvooi", { value: this.handleTitle }), this.isNeutral && (h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("dso-expandable", { key: 'd80403dc350ce8c407c4d57afa239445915e4860', class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationStart: this.handleExpandableAnimationStart, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, h("div", { key: '04bdf62633f13f08bad4dc0e8ac870cb3c633393', class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, h("slot", { key: 'c28041eb3c640bce06d98411d80d43b9127058f6' })))));
     }
     get host() { return getElement(this); }
 };