npm - @dso-toolkit/core - Versions diffs - 62.25.0 → 62.26.0 - Mend

@dso-toolkit/core 62.25.0 → 62.26.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 (550) hide show

package/dist/dso-toolkit/p-80463acd.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as n,c as e,f as t,h as o,a as s}from"./p-1754d0a9.js";import{c as i}from"./p-808a98bc.js";import{c as r}from"./p-8a1a6e56.js";import"./p-1dbcaeef.js";const d=",\n::after,\n::before {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.dso-manual-input-button {\n cursor: text;\n}\n\n.dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n outline-offset: 2px;\n}\n.dso-tertiary:active {\n outline: 0;\n}\n.dso-tertiary[disabled] {\n color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n color: #173521;\n}\n.dso-tertiary.dso-align {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\n}\n.dso-tertiary.dso-truncate {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dso-tertiary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n vertical-align: middle;\n}\n\n.dso-input-number:not(.form-group) {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n}\n.dso-input-number label {\n width: 100%;\n}\n.dso-input-number .dso-input-step-counter {\n align-self: center;\n background-color: transparent;\n border: 0;\n display: inline-block;\n height: 1.5rem;\n text-align: center;\n width: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n -moz-appearance: textfield;\n}\n\n.dso-button-group {\n display: flex;\n flex-direction: row;\n}\n.dso-button-group.dso-disabled > {\n background-color: #fff;\n border-color: #e5e5e5;\n color: #666;\n pointer-events: none;\n}\n.dso-button-group > * {\n border-radius: 0;\n}\n.dso-button-group > :first-child {\n border-radius: 4px 0 0 4px;\n}\n.dso-button-group > :not(:first-child) {\n border-left-style: none !important;\n}\n.dso-button-group > :last-child {\n border-radius: 0 4px 4px 0;\n}\n.dso-button-group > :only-child {\n border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n background-color: #fff;\n border-color: #ccc;\n color: #191919;\n border-style: solid;\n border-width: 1px;\n flex-wrap: nowrap;\n padding: 0 16px;\n}\n@media screen and (max-width: 767px) {\n .dso-button-group > .dso-input-number {\n justify-content: center;\n }\n}\n.dso-button-group > :hover + .dso-input-number,\n.dso-button-group > :focus + .dso-input-number {\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n}\n.dso-button-group > .dso-selected + .dso-input-number {\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > :active + .dso-input-number, .dso-button-group > :active + .dso-input-number:hover,\n.dso-button-group > .active + .dso-input-number,\n.dso-button-group > .active + .dso-input-number:hover {\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n}\n.dso-button-group > .disabled + .dso-input-number, .dso-button-group > .disabled + .dso-input-number:hover,\n.dso-button-group > [disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n background-color: #fff;\n border-color: #ccc;\n color: #666;\n opacity: 1;\n}\n.dso-button-group .dso-list-button {\n padding-right: 15px;\n}\n\n.dso-selectable {\n position: relative;\n display: var(--dso-selectable-display, block);\n padding: 0 0 0 32px;\n}\n.dso-selectable label {\n font-weight: 400;\n line-height: 24px;\n margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n background-color: #fff;\n box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n height: 24px;\n left: 0;\n margin: 0;\n opacity: 0;\n position: absolute;\n top: 0;\n width: 24px;\n z-index: 100;\n zoom: 1;\n}\n@media (prefers-contrast: more) {\n .dso-selectable input[type=checkbox],\n .dso-selectable input[type=radio] {\n opacity: 1;\n }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n display: inline;\n font-style: normal;\n padding-left: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n background: #fff;\n border: 0;\n box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n content: \"\";\n height: 20px;\n left: 2px;\n position: absolute;\n top: 2px;\n width: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n height: 18px;\n left: 3px;\n top: 3px;\n width: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n background-color: #ebf3e6;\n box-shadow: 0 0 0 1px #275937;\n height: 22px;\n left: 1px;\n top: 1px;\n width: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n background: transparent;\n content: \"\";\n left: 6px;\n opacity: 0;\n position: absolute;\n top: 6px;\n zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n border: solid;\n border-color: var(--dso-selectable-color, #39870c);\n border-top-color: transparent;\n border-width: 0 0 3px 3px;\n height: 8px;\n transform: rotate(-45deg);\n width: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n background-color: var(--dso-selectable-color, #39870c);\n height: 12px;\n width: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n background-color: transparent;\n border-radius: 50%;\n content: \"\";\n height: 12px;\n left: 6px;\n opacity: 0;\n position: absolute;\n top: 6px;\n width: 12px;\n zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n background-color: var(--dso-selectable-color, #39870c);\n opacity: 1;\n}\n.dso-selectable label {\n font-weight: 700;\n}\n\n.dso-list-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #ccc;\n color: #191919;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n font-weight: 600;\n padding: 15px 47px 15px 15px;\n position: relative;\n text-align: left;\n white-space: normal;\n width: 100%;\n cursor: pointer;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n outline-offset: 2px;\n}\n.dso-list-button:active {\n outline: 0;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n background-color: #fff;\n border-color: #ccc;\n color: #666;\n opacity: 1;\n}\n.dso-list-button.dso-selected {\n border-color: #39870c;\n border-width: 1px;\n box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n .dso-list-button.dso-selected.dso-single-count {\n border-right: 0;\n box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n }\n}\n.dso-list-button label {\n cursor: inherit;\n}\n.dso-list-button > span {\n display: block;\n}\n.dso-list-button .dso-sublabel {\n font-weight: 400;\n width: 100%;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di,\n.dso-list-button .dso-count {\n height: 24px;\n position: absolute;\n right: 15px;\n top: 15px;\n width: 24px;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di {\n color: #39870c;\n page-break-before: always;\n}\n.dso-list-button .dso-count {\n font-weight: 700;\n}\n@media screen and (max-width: 767px) {\n .dso-list-button.dso-selected.dso-single-count::after {\n width: 0;\n }\n}\n.dso-list-button .dso-sublabel {\n padding-left: 32px;\n}\n\n.dso-list-button + .dso-list-button,\n.dso-list-button + .dso-button-group,\n.dso-button-group + .dso-list-button,\n.dso-button-group + .dso-button-group {\n margin-top: 4px;\n}\n\n.dso-input-wrapper {\n position: relative;\n}\n.dso-input-wrapper .form-control {\n width: 9ch;\n}\n\n.form-control {\n display: block;\n width: 100%;\n height: 40px;\n padding: 6px 14px;\n font-size: 1rem;\n line-height: 1.5;\n color: #191919;\n background-color: #fff;\n background-image: none;\n border: 1px solid #275937;\n border-radius: 4px;\n transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n color: #666;\n opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n color: #666;\n}\n.form-control::-webkit-input-placeholder {\n color: #666;\n}\n.form-control::-ms-expand {\n background-color: transparent;\n border: 0;\n}\n.form-control:focus {\n border-color: #275937;\n outline: 0;\n box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n background-color: #fff;\n opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n cursor: default;\n}\n.form-control[disabled] {\n border-color: #e5e5e5;\n color: #999;\n}\n.form-control[readonly] {\n border-width: 1px;\n}\n.form-control[type=text] {\n line-height: 40px;\n}\n.form-control[size] {\n width: auto;\n}\n\n.dso-manual-input-button[type=button] {\n background-color: transparent;\n border: 0;\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n}\n\n.hidden {\n display: none !important;\n}";const a=d;const l=class{constructor(t){n(this,t);this.dsoCountChange=e(this,"dsoCountChange",7);this.dsoSelectedChange=e(this,"dsoSelectedChange",7);this.manualInputWrapperElement=undefined;this.manualCount=undefined;this.label=undefined;this.sublabel=undefined;this.count=undefined;this.min=undefined;this.max=undefined;this.checked=false;this.disabled=false;this.subcontentPrefix=undefined;this.manual=true}get subcontentSlot(){return this.host.querySelector("[slot='subcontent']")}watchManualCallback(){if(!this.manual&&this.manualCount){this.stopManualCountInput()}}connectedCallback(){this.mutationObserver=new MutationObserver((()=>t(this.host)));this.mutationObserver.observe(this.host,{characterData:true,childList:true,subtree:true,attributes:true})}componentDidRender(){var n,e;if(this.manualCount!==undefined&&this.manualInputWrapperElement&&!this.trap){this.trap=i(this.manualInputWrapperElement,{escapeDeactivates:true,setReturnFocus:false,clickOutsideDeactivates:n=>{this.setCount(n);return true},onDeactivate:()=>this.stopManualCountInput(),onPostDeactivate:()=>{var n;return(n=this.manualInputButtonElement)===null\|\|n===void 0?void 0:n.focus()}}).activate()}else if(this.manualCount===undefined&&this.trap){(n=this.trap)===null\|\|n===void 0?void 0:n.deactivate();delete this.trap}(e=this.subcontentSlot)===null\|\|e===void 0?void 0:e.setAttribute("aria-hidden","true")}disconnectedCallback(){var n,e;(n=this.trap)===null\|\|n===void 0?void 0:n.deactivate();(e=this.mutationObserver)===null\|\|e===void 0?void 0:e.disconnect();delete this.mutationObserver}handleOnChange({target:n}){if(n instanceof HTMLInputElement){this.manualCount=n.valueAsNumber}}stepValue(n,e){if(typeof this.count==="number"){const t=e==="increment"?this.count+1:this.count-1;if(!this.isNewCountValid(t)){return}this.dsoCountChange.emit({originalEvent:n,count:t})}}setCount(n){n.preventDefault();if(typeof this.manualCount==="number"&&this.isNewCountValid(this.manualCount)){this.dsoCountChange.emit({originalEvent:n,count:this.manualCount});this.stopManualCountInput()}}handleSelectClick(n){n.preventDefault();if(this.count!==undefined){this.dsoCountChange.emit({originalEvent:n,count:this.count>0?0:1});return}this.dsoSelectedChange.emit({originalEvent:n,checked:!this.checked})}startManualCountInput(){this.manualCount=this.count}stopManualCountInput(){this.manualCount=undefined}isNewCountValid(n){return!(this.min!==undefined&&this.max!==undefined&&(n<Number(this.min)\|\|n>Number(this.max)))}render(){const n=this.manualCount===undefined;const e=this.checked\|\|this.count!==undefined&&this.count>0;return o("div",{key:"d40fdadfac45c00b7657ff365ddfac8769c72710",class:r(["dso-button-group",{"dso-disabled":this.disabled}])},o("div",{key:"916de1d699fdb155530dfb5aa5b4b9315eb78b33",class:r(["dso-list-button",{"dso-selected":e,"dso-single-count":this.count===1}]),onClick:n=>this.handleSelectClick(n)},o("div",{key:"cf718524bcc8bff10602d19701319522276390b6",class:"dso-selectable"},o("input",{key:"2d36b3e7a9377ff765cbfbbd19874f2db49786e4",id:"dso-list-button-checkbox",type:"checkbox",value:"list-button",name:"naam","aria-describedby":[this.sublabel&&"sublabel",this.subcontentSlot&&"description"].filter((n=>!!n)).join(" ")\|\|null,checked:e,disabled:this.disabled}),o("label",{key:"b5997457d4260bcf7971d2e57c7cb22ba036ef17",htmlFor:"dso-list-button-checkbox"},this.label),this.subcontentSlot&&o("div",{key:"c3747912f68572b004672ae49d770037cc40ed3c",class:"sr-only",id:"description"},this.subcontentPrefix&&this.subcontentPrefix+":",o("div",{key:"85bd8620045f43ee3af685fcc9805f287b992ebd",innerHTML:this.subcontentSlot.innerHTML}))),this.sublabel&&o("span",{key:"0936df007aa982b94bd63f63d2744dc342d0ec96",class:"dso-sublabel",id:"sublabel"},this.sublabel),o("slot",{key:"4e54fda951864d13c59bbf70f9052b7aeabb6bdb",name:"subcontent"})),this.count!==undefined&&this.count>0&&o("div",{key:"8bd1030c7f7e779da73c67886c6da74e59eee9e9",class:"dso-input-number"},this.manualCount===undefined&&this.count>1&&o("button",{key:"eeaf4920e388b5315a705859832fafe6d14920e3",type:"button",class:"dso-tertiary",disabled:this.count===Number(this.min)\|\|this.disabled,onClick:n=>this.stepValue(n,"decrement")},o("dso-icon",{key:"60020bb171ed5b33e9850bc7472a7caa08bfbfd6",icon:"minus-circle"}),o("span",{key:"6f085b670db936d7ae44405a87d5aa04e663de8e",class:"sr-only"},"Aantal verlagen")),o("div",{key:"aeacf135c45b4b255a5399dcded381769cc5962b",class:"dso-input-wrapper"},this.manualCount===undefined&&this.count>1&&o("input",{key:"84dd0679203c6ff85ea858e689366fb952a9e666",class:"dso-input-step-counter",type:"number",tabIndex:-1,"aria-label":"Aantal",value:this.count,readOnly:true}),o("form",{key:"19b9381145862bf3893284594479ff009f37a310",onSubmit:n=>this.setCount(n)},o("div",{key:"e6bb25bd9ba9b848431e7451154ab91888f3193d",ref:n=>this.manualInputWrapperElement=n},o("input",{key:"da5757dc2be34a994e1a54ceae73e176cccb99b8",class:r("form-control",{hidden:n}),type:"number","aria-label":"Aantal",value:this.manualCount,min:this.min,max:this.max,onInput:n=>this.handleOnChange(n)})),this.manual&&o("button",{key:"cce6b85e2cbb094c7dbe9b008320758c075106d6",class:r("dso-manual-input-button",{"sr-only":!n}),type:!n?"submit":"button",disabled:this.disabled,onClick:()=>n&&this.startManualCountInput()},n?o("span",{class:"sr-only"},"Handmatig aantal invullen"):o("span",{class:"sr-only"},"Zet waarde")))),n&&o("button",{key:"09fd129b37155929d83573123cb15fd4c072cee3",type:"button",class:"dso-tertiary",disabled:this.count===Number(this.max)\|\|this.disabled,onClick:n=>this.stepValue(n,"increment")},o("dso-icon",{key:"53bc95e299e1c0af676e397382f15137016c58e7",icon:"plus-circle"}),o("span",{key:"a22ef9ead527e8ba09685fc9ec89b26661f22c7e",class:"sr-only"},"Aantal verhogen"))))}get host(){return s(this)}static get watchers(){return{manual:["watchManualCallback"]}}};l.style=a;export{l as dso_list_button};
2	- //# sourceMappingURL=p-80463acd.entry.js.map

package/dist/dso-toolkit/p-80463acd.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["listButtonCss","DsoListButtonStyle0","ListButton","subcontentSlot","this","host","querySelector","watchManualCallback","manual","manualCount","stopManualCountInput","connectedCallback","mutationObserver","MutationObserver","forceUpdate","observe","characterData","childList","subtree","attributes","componentDidRender","undefined","manualInputWrapperElement","trap","createFocusTrap","escapeDeactivates","setReturnFocus","clickOutsideDeactivates","e","setCount","onDeactivate","onPostDeactivate","_a","manualInputButtonElement","focus","activate","deactivate","_b","setAttribute","disconnectedCallback","disconnect","handleOnChange","target","HTMLInputElement","valueAsNumber","stepValue","direction","count","newValue","isNewCountValid","dsoCountChange","emit","originalEvent","preventDefault","handleSelectClick","dsoSelectedChange","checked","startManualCountInput","min","max","Number","render","showButtonInputs","selected","h","key","class","clsx","disabled","onClick","id","type","value","name","sublabel","filter","s","join","htmlFor","label","subcontentPrefix","innerHTML","icon","tabIndex","readOnly","onSubmit","ref","element","hidden","onInput"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/input-number\";\r\n@use \"~dso-toolkit/src/components/list-button\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-manual-input-button {\r\n cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n @include input-number.root();\r\n}\r\n\r\n.dso-button-group {\r\n @include list-button.button-group(\".dso-input-number\", \".dso-list-button\");\r\n}\r\n\r\n.dso-selectable {\r\n @include selectable.root(\"dso-info\");\r\n\r\n label {\r\n font-weight: 700;\r\n }\r\n}\r\n\r\n.dso-list-button {\r\n @include button.base($modifiers: false);\r\n @include list-button.root();\r\n\r\n .dso-sublabel {\r\n padding-left: selectable.$size + units.$u1;\r\n }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-button-group {\r\n + .dso-list-button,\r\n + .dso-button-group {\r\n @include list-button.sibling();\r\n }\r\n}\r\n\r\n.dso-input-wrapper {\r\n position: relative;\r\n\r\n .form-control {\r\n width: 9ch;\r\n }\r\n}\r\n\r\n.form-control {\r\n @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n background-color: transparent;\r\n border: 0;\r\n bottom: 0;\r\n left: 0;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n}\r\n\r\n.hidden {\r\n display: none !important;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n h,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoListButtonElement;\r\n\r\n private trap?: FocusTrap;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private get subcontentSlot() {\r\n return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n }\r\n\r\n @State()\r\n private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n @State()\r\n manualCount?: number;\r\n\r\n /**\r\n * The label of the List Button.\r\n */\r\n @Prop()\r\n label?: string;\r\n\r\n /**\r\n * The sublabel of the List Button.\r\n */\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /**\r\n * When defined the count can show on the List Button.\r\n */\r\n @Prop()\r\n count?: number;\r\n\r\n /**\r\n * The minimum value.\r\n */\r\n @Prop()\r\n min?: string | number;\r\n\r\n /**\r\n * The maximum value.\r\n */\r\n @Prop()\r\n max?: string | number;\r\n\r\n /**\r\n * Whether the List Button is checked.\r\n */\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /**\r\n * Whether the List Button is disabled.\r\n */\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /**\r\n * Prefix to subcontent for the purpose of screenreading.\r\n */\r\n @Prop()\r\n subcontentPrefix?: string;\r\n\r\n /**\r\n * Allow user to directly input a value.\r\n *\r\n * Set to `false` to force users to use plus/minus buttons.\r\n */\r\n @Prop()\r\n manual = true;\r\n\r\n /**\r\n * Emitted when the user changes the count.\r\n */\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /**\r\n * Emitted when the user activates the List Button itself.\r\n *\r\n * Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n @Watch(\"manual\")\r\n watchManualCallback() {\r\n if (!this.manual && this.manualCount) {\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n escapeDeactivates: true,\r\n setReturnFocus: false,\r\n\r\n clickOutsideDeactivates: (e) => {\r\n this.setCount(e);\r\n\r\n return true;\r\n },\r\n onDeactivate: () => this.stopManualCountInput(),\r\n onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n }).activate();\r\n } else if (this.manualCount === undefined && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n\r\n this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.trap?.deactivate();\r\n\r\n this.mutationObserver?.disconnect();\r\n delete this.mutationObserver;\r\n }\r\n\r\n private handleOnChange({ target }: Event): void {\r\n if (target instanceof HTMLInputElement) {\r\n this.manualCount = target.valueAsNumber;\r\n }\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (!this.isNewCountValid(newValue)) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private setCount(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.manualCount,\r\n });\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private startManualCountInput(): void {\r\n this.manualCount = this.count;\r\n }\r\n\r\n private stopManualCountInput(): void {\r\n this.manualCount = undefined;\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n return !(\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) || newValue > Number(this.max))\r\n );\r\n }\r\n\r\n render() {\r\n const showButtonInputs = this.manualCount === undefined;\r\n\r\n const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n aria-describedby={\r\n [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") || null\r\n }\r\n checked={selected}\r\n disabled={this.disabled}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n {this.subcontentSlot && (\r\n <div class=\"sr-only\" id=\"description\">\r\n {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n </div>\r\n )}\r\n </div>\r\n {this.sublabel && (\r\n <span class=\"dso-sublabel\" id=\"sublabel\">\r\n {this.sublabel}\r\n </span>\r\n )}\r\n <slot name=\"subcontent\" />\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.min) || this.disabled}\r\n onClick={(e) => this.stepValue(e, \"decrement\")}\r\n >\r\n <dso-icon icon=\"minus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verlagen</span>\r\n </button>\r\n )}\r\n\r\n <div class=\"dso-input-wrapper\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <input\r\n class=\"dso-input-step-counter\"\r\n type=\"number\"\r\n tabIndex={-1}\r\n aria-label=\"Aantal\"\r\n value={this.count}\r\n readOnly\r\n />\r\n )}\r\n\r\n <form onSubmit={(e) => this.setCount(e)}>\r\n <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n <input\r\n class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n type=\"number\"\r\n aria-label=\"Aantal\"\r\n value={this.manualCount}\r\n min={this.min}\r\n max={this.max}\r\n onInput={(e) => this.handleOnChange(e)}\r\n />\r\n </div>\r\n\r\n {this.manual && (\r\n <button\r\n class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n type={!showButtonInputs ? \"submit\" : \"button\"}\r\n disabled={this.disabled}\r\n onClick={() => showButtonInputs && this.startManualCountInput()}\r\n >\r\n {showButtonInputs ? (\r\n <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n ) : (\r\n <span class=\"sr-only\">Zet waarde</span>\r\n )}\r\n </button>\r\n )}\r\n </form>\r\n </div>\r\n\r\n {showButtonInputs && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.max) || this.disabled}\r\n onClick={(e) => this.stepValue(e, \"increment\")}\r\n >\r\n <dso-icon icon=\"plus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verhogen</span>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"mappings":"gKAAA,MAAMA,EAAgB,g6cACtB,MAAAC,EAAeD,E,MCqBFE,EAAU,M,sTAsDX,M,cAMC,M,4CAcF,I,CAlET,kBAAYC,GACV,OAAOC,KAAKC,KAAKC,cAA2B,sB,CAkF9C,mBAAAC,GACE,IAAKH,KAAKI,QAAUJ,KAAKK,YAAa,CACpCL,KAAKM,sB,EAIT,iBAAAC,GACEP,KAAKQ,iBAAmB,IAAIC,kBAAiB,IAAMC,EAAYV,KAAKC,QAEpED,KAAKQ,iBAAiBG,QAAQX,KAAKC,KAAM,CACvCW,cAAe,KACfC,UAAW,KACXC,QAAS,KACTC,WAAY,M,CAIhB,kBAAAC,G,QACE,GAAIhB,KAAKK,cAAgBY,WAAajB,KAAKkB,4BAA8BlB,KAAKmB,KAAM,CAClFnB,KAAKmB,KAAOC,EAAgBpB,KAAKkB,0BAA2B,CAC1DG,kBAAmB,KACnBC,eAAgB,MAEhBC,wBAA0BC,IACxBxB,KAAKyB,SAASD,GAEd,OAAO,IAAI,EAEbE,aAAc,IAAM1B,KAAKM,uBACzBqB,iBAAkB,SAAAC,EAAM,OAAAA,EAAA5B,KAAK6B,4BAAwB,MAAAD,SAAA,SAAAA,EAAEE,OAAO,IAC7DC,U,MACE,GAAI/B,KAAKK,cAAgBY,WAAajB,KAAKmB,KAAM,EACtDS,EAAA5B,KAAKmB,QAAI,MAAAS,SAAA,SAAAA,EAAEI,oBAEJhC,KAAKmB,I,EAGdc,EAAAjC,KAAKD,kBAAc,MAAAkC,SAAA,SAAAA,EAAEC,aAAa,cAAe,O,CAGnD,oBAAAC,G,SACEP,EAAA5B,KAAKmB,QAAI,MAAAS,SAAA,SAAAA,EAAEI,cAEXC,EAAAjC,KAAKQ,oBAAgB,MAAAyB,SAAA,SAAAA,EAAEG,oBAChBpC,KAAKQ,gB,CAGN,cAAA6B,EAAeC,OAAEA,IACvB,GAAIA,aAAkBC,iBAAkB,CACtCvC,KAAKK,YAAciC,EAAOE,a,EAItB,SAAAC,CAAUjB,EAAUkB,GAC1B,UAAW1C,KAAK2C,QAAU,SAAU,CAClC,MAAMC,EAAWF,IAAc,YAAc1C,KAAK2C,MAAQ,EAAI3C,KAAK2C,MAAQ,EAE3E,IAAK3C,KAAK6C,gBAAgBD,GAAW,CACnC,M,CAGF5C,KAAK8C,eAAeC,KAAK,CACvBC,cAAexB,EACfmB,MAAOC,G,EAKL,QAAAnB,CAASD,GACfA,EAAEyB,iBAEF,UAAWjD,KAAKK,cAAgB,UAAYL,KAAK6C,gBAAgB7C,KAAKK,aAAc,CAClFL,KAAK8C,eAAeC,KAAK,CACvBC,cAAexB,EACfmB,MAAO3C,KAAKK,cAEdL,KAAKM,sB,EAID,iBAAA4C,CAAkB1B,GACxBA,EAAEyB,iBAEF,GAAIjD,KAAK2C,QAAU1B,UAAW,CAC5BjB,KAAK8C,eAAeC,KAAK,CACvBC,cAAexB,EACfmB,MAAO3C,KAAK2C,MAAQ,EAAI,EAAI,IAG9B,M,CAGF3C,KAAKmD,kBAAkBJ,KAAK,CAC1BC,cAAexB,EACf4B,SAAUpD,KAAKoD,S,CAIX,qBAAAC,GACNrD,KAAKK,YAAcL,KAAK2C,K,CAGlB,oBAAArC,GACNN,KAAKK,YAAcY,S,CAGb,eAAA4B,CAAgBD,GACtB,QACE5C,KAAKsD,MAAQrC,WACbjB,KAAKuD,MAAQtC,YACZ2B,EAAWY,OAAOxD,KAAKsD,MAAQV,EAAWY,OAAOxD,KAAKuD,M,CAI3D,MAAAE,GACE,MAAMC,EAAmB1D,KAAKK,cAAgBY,UAE9C,MAAM0C,EAAW3D,KAAKoD,SAAYpD,KAAK2C,QAAU1B,WAAajB,KAAK2C,MAAQ,EAE3E,OACEiB,EAAA,OAAAC,IAAA,2CAAKC,MAAOC,EAAK,CAAC,mBAAoB,CAAE,eAAgB/D,KAAKgE,aAC3DJ,EAAA,OAAAC,IAAA,2CACEC,MAAOC,EAAK,CAAC,kBAAmB,CAAE,eAAgBJ,EAAU,mBAAoB3D,KAAK2C,QAAU,KAC/FsB,QAAUzC,GAAMxB,KAAKkD,kBAAkB1B,IAEvCoC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,kBACTF,EAAA,SAAAC,IAAA,2CACEK,GAAG,2BACHC,KAAK,WACLC,MAAM,cACNC,KAAK,OAAM,mBAET,CAACrE,KAAKsE,UAAY,WAAYtE,KAAKD,gBAAkB,eAAewE,QAAQC,KAAQA,IAAGC,KAAK,MAAQ,KAEtGrB,QAASO,EACTK,SAAUhE,KAAKgE,WAEjBJ,EAAA,SAAAC,IAAA,2CAAOa,QAAQ,4BAA4B1E,KAAK2E,OAC/C3E,KAAKD,gBACJ6D,EAAA,OAAAC,IAAA,2CAAKC,MAAM,UAAUI,GAAG,eACrBlE,KAAK4E,kBAAoB5E,KAAK4E,iBAAmB,IAClDhB,EAAA,OAAAC,IAAA,2CAAKgB,UAAW7E,KAAKD,eAAe8E,cAIzC7E,KAAKsE,UACJV,EAAA,QAAAC,IAAA,2CAAMC,MAAM,eAAeI,GAAG,YAC3BlE,KAAKsE,UAGVV,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,gBAGZrE,KAAK2C,QAAU1B,WAAajB,KAAK2C,MAAQ,GACxCiB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACR9D,KAAKK,cAAgBY,WAAajB,KAAK2C,MAAQ,GAC9CiB,EAAA,UAAAC,IAAA,2CACEM,KAAK,SACLL,MAAM,eACNE,SAAUhE,KAAK2C,QAAUa,OAAOxD,KAAKsD,MAAQtD,KAAKgE,SAClDC,QAAUzC,GAAMxB,KAAKyC,UAAUjB,EAAG,cAElCoC,EAAA,YAAAC,IAAA,2CAAUiB,KAAK,iBACflB,EAAA,QAAAC,IAAA,2CAAMC,MAAM,WAAS,oBAIzBF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,qBACR9D,KAAKK,cAAgBY,WAAajB,KAAK2C,MAAQ,GAC9CiB,EAAA,SAAAC,IAAA,2CACEC,MAAM,yBACNK,KAAK,SACLY,UAAW,EAAC,aACD,SACXX,MAAOpE,KAAK2C,MACZqC,SAAQ,OAIZpB,EAAA,QAAAC,IAAA,2CAAMoB,SAAWzD,GAAMxB,KAAKyB,SAASD,IACnCoC,EAAA,OAAAC,IAAA,2CAAKqB,IAAMC,GAAanF,KAAKkB,0BAA4BiE,GACvDvB,EAAA,SAAAC,IAAA,2CACEC,MAAOC,EAAK,eAAgB,CAAEqB,OAAQ1B,IACtCS,KAAK,SAAQ,aACF,SACXC,MAAOpE,KAAKK,YACZiD,IAAKtD,KAAKsD,IACVC,IAAKvD,KAAKuD,IACV8B,QAAU7D,GAAMxB,KAAKqC,eAAeb,MAIvCxB,KAAKI,QACJwD,EAAA,UAAAC,IAAA,2CACEC,MAAOC,EAAK,0BAA2B,CAAE,WAAYL,IACrDS,MAAOT,EAAmB,SAAW,SACrCM,SAAUhE,KAAKgE,SACfC,QAAS,IAAMP,GAAoB1D,KAAKqD,yBAEvCK,EACCE,EAAA,QAAME,MAAM,WAAS,6BAErBF,EAAA,QAAME,MAAM,WAAS,iBAO9BJ,GACCE,EAAA,UAAAC,IAAA,2CACEM,KAAK,SACLL,MAAM,eACNE,SAAUhE,KAAK2C,QAAUa,OAAOxD,KAAKuD,MAAQvD,KAAKgE,SAClDC,QAAUzC,GAAMxB,KAAKyC,UAAUjB,EAAG,cAElCoC,EAAA,YAAAC,IAAA,2CAAUiB,KAAK,gBACflB,EAAA,QAAAC,IAAA,2CAAMC,MAAM,WAAS,qB"}

package/dist/dso-toolkit/p-909b9a1e.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as i,c as t,h as n,F as e,a}from"./p-1754d0a9.js";import{i as o}from"./p-2d694112.js";const s=':host{display:block},::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:2rem;justify-content:center;position:relative;min-inline-size:2rem;padding:2px}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:1rem}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:"";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}';const r=s;const l=class{constructor(n){i(this,n);this.dsoSelectPage=t(this,"dsoSelectPage",7);this.sizePositionsMap={small:7,medium:9,large:11};this.availablePositions=undefined;this.totalPages=undefined;this.currentPage=undefined;this.formatHref=i=>"#"+i}sizeChangeHandler(i){this.availablePositions=this.getAvailablePositions(this.sizePositionsMap[i.detail])}clickHandler(i,t){this.dsoSelectPage.emit({originalEvent:i,page:t,isModifiedEvent:o(i)})}componentDidLoad(){var i;(i=this.responsiveElement)===null\|\|i===void 0?void 0:i.getSize().then((i=>this.availablePositions=this.getAvailablePositions(this.sizePositionsMap[i])))}render(){var i,t,a;if(!this.totalPages){return null}if(this.availablePositions===undefined){return n("dso-responsive-element",{ref:i=>this.responsiveElement=i})}const o=this.availablePositions;const s=(i=this.currentPage)!==null&&i!==void 0?i:0;const r=this.getPages(s,this.availablePositions,this.totalPages);return n("dso-responsive-element",{ref:i=>this.responsiveElement=i},n("ul",{class:"pagination"},n("li",{class:s<=1\|\|s>this.totalPages?"dso-page-hidden":undefined},n("a",{href:this.formatHref((t=r[r.indexOf(s)-1])!==null&&t!==void 0?t:1),"aria-label":"Vorige",onClick:i=>{var t;return s&&this.clickHandler(i,(t=r[r.indexOf(s)-1])!==null&&t!==void 0?t:1)}},n("dso-icon",{icon:"chevron-left"}))),r.map((i=>n(e,null,this.showEllipsisBeforeLast(r,i,o)&&n("li",null,n("span",null,"...")),n("li",{key:i,class:s===i?"active":undefined},s===i?n("span",{"aria-current":"page"},i):n("a",{href:this.formatHref(i),onClick:t=>this.clickHandler(t,i)},i)),this.showEllipsisAfterFirst(r,i,o)&&n("li",null,n("span",null,"..."))))),n("li",{class:s<1\|\|s>=this.totalPages?"dso-page-hidden":undefined},n("a",{href:this.formatHref((a=r[r.indexOf(s)+1])!==null&&a!==void 0?a:this.totalPages),"aria-label":"Volgende",onClick:i=>{var t;return s&&this.totalPages&&this.clickHandler(i,(t=r[r.indexOf(s)+1])!==null&&t!==void 0?t:this.totalPages)}},n("dso-icon",{icon:"chevron-right"})))))}getAvailablePositions(i){if(i%2===0){return i-1}if(i<=3){return 3}return i}getPages(i,t,n){if(n+2<=t){return Array.from({length:n},((i,t)=>t+1))}if(t===3){return[i]}if(t===5){return[1,i,n]}return[1,...this.getPageRange(i,t,n),n]}getPageRange(i,t,n){const e=[];const a=Math.floor(t/2);if(i<=a){for(let i=2;i<=t-4;i++){e.push(i)}}if(i>=a&&i<=n-a){if(a===1){if(i>n-2){e.push(n-2)}e.push(i);if(i<3){e.push(3)}}if(a>1){const t=a-3;for(let o=Math.min(i-t,n-a);o<=Math.max(i+t,a);o++){if(o>2&&o<n-1){e.push(o)}}}}if(i>n-a){for(let i=n-(t-5);i<=n-1;i++){e.push(i)}}return e.filter(((i,t,n)=>n.indexOf(i)===t))}showEllipsisAfterFirst(i,t,n){const e=i[i.length-1];if(!e){throw new Error("No totalPages")}return i.indexOf(t)===0&&e>n-2&&!i.some((i=>i===2))&&n>=7}showEllipsisBeforeLast(i,t,n){const e=i[i.length-1];if(!e){throw new Error("No totalPages")}return i.indexOf(t)===i.length-1&&e>n-2&&!i.some((i=>i===e-1))&&n>=7}get host(){return a(this)}};l.style=r;export{l as dso_pagination};
2	- //# sourceMappingURL=p-909b9a1e.entry.js.map

package/dist/dso-toolkit/p-96a6ddd5.entry.js DELETED Viewed

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

package/dist/dso-toolkit/p-ab491029.entry.js DELETED Viewed

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

package/dist/dso-toolkit/p-ab491029.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

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

package/dist/dso-toolkit/p-ade7a91d.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as s,h as o}from"./p-1754d0a9.js";import{c as e}from"./p-8a1a6e56.js";const a=":host{display:block},::after,*::before{box-sizing:border-box}.dso-banner{padding:16px 0;position:relative}.dso-banner.dso-compact{padding:12px 0}";const t=a;const r=class{constructor(o){s(this,o);this.status=undefined;this.compact=false;this.noIcon=true}render(){return o("section",{key:"b8ca330b6db6505cf178f85cf8f970012b13585d",class:e("dso-banner",`alert-${this.status}`,{"dso-compact":this.compact}),role:"alert"},o("slot",{key:"f759d4207e830eb6a420d660b2a40775df7a0573"}))}};r.style=t;export{r as dso_banner};
2	- //# sourceMappingURL=p-ade7a91d.entry.js.map

package/dist/dso-toolkit/p-af8c6cd9.entry.js DELETED Viewed

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

package/dist/dso-toolkit/p-b49f5a23.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as s,h as e,H as i}from"./p-1754d0a9.js";const o=",::after,*::before{box-sizing:border-box}.dso-progress-indicator-spinner{display:inline-block;margin:0;position:relative;vertical-align:middle}span.dso-progress-indicator-label{margin-left:16px;vertical-align:middle}:host([block]){align-items:center;display:flex;justify-content:center}:host([size=small]) .dso-progress-indicator-spinner,:host([size=small]) dso-icon,:host(:not([size=medium]):not([size=large])) .dso-progress-indicator-spinner,:host(:not([size=medium]):not([size=large])) dso-icon{height:24px;width:24px}:host([size=small]):host([block]),:host(:not([size=medium]):not([size=large])):host([block]){padding:12px 16px}:host([size=medium]) .dso-progress-indicator-spinner,:host([size=medium]) dso-icon{height:32px;width:32px}:host([size=medium]):host([block]){padding:16px}:host([size=large]) .dso-progress-indicator-spinner,:host([size=large]) dso-icon{height:48px;width:48px}:host([size=large]):host([block]){padding:24px 16px}";const r=o;const n=class{constructor(e){s(this,e);this.label="Resultaten laden: een moment geduld alstublieft.";this.size=undefined;this.block=undefined}render(){return e(i,{key:"68ff0b6ed51e192610a23c9bf9715fc9d757fba1"},e("span",{key:"f340d8a00dc48655e525329b25870d53975a8f7f",class:"dso-progress-indicator-spinner",role:"progressbar","aria-labelledby":"progress-indicator-label"},e("dso-icon",{key:"841182f2410e0c23d44b1359a00482ae44501a08",icon:"spinner"})),e("span",{key:"c498a9297a8c3196b497bea9bd32c446b49c1fb3",id:"progress-indicator-label",class:"dso-progress-indicator-label"},this.label))}};n.style=r;export{n as dso_progress_indicator};
2	- //# sourceMappingURL=p-b49f5a23.entry.js.map

package/dist/dso-toolkit/p-c1c38b47.entry.js DELETED Viewed

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

package/dist/dso-toolkit/p-c335be22.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,c as t,h as i,a as s}from"./p-1754d0a9.js";function o(e){if(!e){return}const t=e.split("-");if(t.length===3&&typeof t[0]==="string"&&typeof t[1]==="string"&&typeof t[2]==="string"){const[e,i,s]=t;const o=e.padStart(2,"0");const d=i.padStart(2,"0");const n=s.padStart(4,"0");return[n,d,o].join("-")}return e}function d(e){if(!e){return""}const t=e.getDate().toString(10).padStart(2,"0");const i=(e.getMonth()+1).toString(10).padStart(2,"0");const s=e.getFullYear().toString(10).padStart(4,"0");return[t,i,s].join("-")}const n=".sc-dso-date-picker-h{display:block}[invalid].sc-dso-date-picker-h:not([invalid=false]) .dso-date__input.sc-dso-date-picker{border-color:#ce3f51}.dso-date__input.sc-dso-date-picker{display:block;width:100%;height:40px;padding:6px 14px;font-size:1rem;line-height:1.5;color:#191919;background-color:#fff;background-image:none;border:1px solid #275937;border-radius:4px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s}.dso-date__input.sc-dso-date-picker::-moz-placeholder{color:#666;opacity:1}.dso-date__input.sc-dso-date-picker:-ms-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-webkit-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-ms-expand{background-color:transparent;border:0}.dso-date__input.sc-dso-date-picker:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled].sc-dso-date-picker,.dso-date__input[readonly].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{background-color:#fff;opacity:1}.dso-date__input[disabled].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{cursor:default}.dso-date__input[disabled].sc-dso-date-picker{border-color:#e5e5e5;color:#999}.dso-date__input[readonly].sc-dso-date-picker{border-width:1px}.dso-date__input[type=text].sc-dso-date-picker{line-height:40px}.dso-date__input[size].sc-dso-date-picker{width:auto}.dso-date__input.sc-dso-date-picker::-webkit-calendar-picker-indicator{position:relative;inset-inline-end:-8px;font-size:1.75rem;filter:invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%)}";const a=n;const r=class{constructor(i){e(this,i);this.dsoDateChange=t(this,"dsoDateChange",7);this.dsoBlur=t(this,"dsoBlur",7);this.dsoKeyUp=t(this,"dsoKeyUp",7);this.dsoKeyDown=t(this,"dsoKeyDown",7);this.dsoFocus=t(this,"dsoFocus",7);this.handleBlur=e=>{e.stopPropagation();const{target:t}=e;if(!(t instanceof HTMLInputElement)){return}const{validity:i}=t;const{value:s,valueAsDate:o}=this.dateValues(t);const d=this.validityToError(i);const n={component:"dso-date-picker",originalEvent:e,validity:i,value:s,valueAsDate:o,error:d};this.dsoBlur.emit(n)};this.handleFocus=e=>{e.stopPropagation();this.dsoFocus.emit({originalEvent:e,component:"dso-date-picker"})};this.handleKeyUp=e=>{e.stopPropagation();this.dsoKeyUp.emit({component:"dso-date-picker",originalEvent:e})};this.handleKeyDown=e=>{e.stopPropagation();this.dsoKeyDown.emit({component:"dso-date-picker",originalEvent:e})};this.handleInputChange=e=>{const t=e.target;if(!(t instanceof HTMLInputElement)){return}const{validity:i}=t;const{value:s,valueAsDate:o}=this.dateValues(t);const d=this.validityToError(i);const n={component:"dso-date-picker",originalEvent:e,validity:i,value:s,valueAsDate:o,error:d};this.dsoDateChange.emit(n)};this.name="dso-date";this.identifier=undefined;this.disabled=false;this.required=false;this.invalid=undefined;this.describedBy=undefined;this.dsoAutofocus=false;this.value="";this.min=undefined;this.max=undefined}dateValues(e){const{valueAsDate:t,validity:i}=e;return{value:d(t),valueAsDate:!i.rangeOverflow&&!i.rangeUnderflow&&t\|\|undefined}}validityToError(e){if(e.valueMissing){return"required"}if(e.rangeUnderflow){return"min-range"}if(e.rangeOverflow){return"max-range"}if(!e.valid){return"invalid"}return undefined}render(){var e;return i("input",{key:"05ac3c8f265e1cbea015e9cd05bf4a298a7e8e37",type:"date",id:this.identifier,class:"dso-date__input",value:o(this.value),name:this.name,min:o(this.min),max:o(this.max),disabled:this.disabled\|\|undefined,required:this.required\|\|undefined,"aria-autocomplete":"none","aria-invalid":(e=this.invalid)===null\|\|e===void 0?void 0:e.toString(),"aria-describedby":this.describedBy,autoComplete:"off",autofocus:this.dsoAutofocus\|\|undefined,onBlur:this.handleBlur,onFocus:this.handleFocus,onKeyUp:this.handleKeyUp,onKeyDown:this.handleKeyDown,onChange:this.handleInputChange})}get element(){return s(this)}};r.style=a;export{r as dso_date_picker};
2	- //# sourceMappingURL=p-c335be22.entry.js.map

package/dist/dso-toolkit/p-d053346c.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as o,c as n,f as t,h as s,F as d,H as c,a as e}from"./p-1754d0a9.js";const a={success:"succes:",info:"info:",warning:"waarschuwing:",danger:"fout:",error:"fout:"};const i=",::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}: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:12px 16px 12px;text-align:start;width: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-right:8px}:host .dso-section-handle>button>dso-icon:last-child,:host .dso-section-handle>a>dso-icon:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child,:host .dso-section-handle>a>.dso-section-handle-addons:last-child{margin-left: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-left:16px}: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-top:0;margin-block-start:-4px}.dso-section-body .dso-section-body-content{padding:20px 16px 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-top-left-radius:4px;border-top-right-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-bottom:1px solid transparent;border-top:1px solid #ccc}:host(.dso-accordion-compact) .dso-section-handle a,:host(.dso-accordion-compact) .dso-section-handle button{color:#39870c;padding-bottom:11px;padding-left:0;padding-top: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-left:32px;padding-top:0;padding-right: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-left:16px}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-left:16px;padding-right: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-top:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-bottom:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-bottom:0}:host(.dso-accordion-compact-black) .dso-section-handle{border-bottom:1px solid transparent;border-top:1px solid #ccc}:host(.dso-accordion-compact-black) .dso-section-handle a,:host(.dso-accordion-compact-black) .dso-section-handle button{color:#000;padding-bottom:11px;padding-left:0;padding-top: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-left:32px;padding-top:0;padding-right: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-left:16px}:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-left:16px;padding-right: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-top:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-bottom:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-bottom: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:5px 16px 5px 0}: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:16px 16px 24px}@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:16px 32px 24px}}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle{background-color:transparant;border-radius:0;border-top-left-radius:4px;border-top-right-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 r=i;const l=window["_dsoLog"]===true?console.log.bind(console.log):function(){};const h=({handleUrl:o,onClick:n,open:t,handleElementRef:d},c)=>{if(o){return s("a",{href:o,onClick:n,"aria-expanded":t?"true":"false",ref:d},c)}return s("button",{type:"button",onClick:n,"aria-expanded":t?"true":"false",ref:d},c)};const p=({heading:o,ref:n},t)=>{switch(o){default:case"h2":return s("h2",{ref:n,class:"dso-section-handle"},t);case"h3":return s("h3",{ref:n,class:"dso-section-handle"},t);case"h4":return s("h4",{ref:n,class:"dso-section-handle"},t);case"h5":return s("h5",{ref:n,class:"dso-section-handle"},t)}};const u=({state:o,icon:n,attachmentCount:t})=>{if(o){return s(b,{state:o})}if(t){return s("dso-attachments-counter",{count:t})}if(n){return s("dso-icon",{icon:n})}};const b=({state:o})=>{if(o==="error"){return s("dso-icon",{icon:"status-error"})}if(o==="danger"){return s("dso-icon",{icon:"status-danger"})}if(o==="success"){return s("dso-icon",{icon:"status-success"})}if(o==="info"){return s("dso-icon",{icon:"status-info"})}if(o==="warning"){return s("dso-icon",{icon:"status-warning"})}};const f=class{constructor(t){o(this,t);this.dsoToggleClick=n(this,"dsoToggleClick",3);this.dsoAnimationStart=n(this,"dsoAnimationStart",3);this.dsoAnimationEnd=n(this,"dsoAnimationEnd",3);this.handleClick=o=>{this.dsoToggleClick.emit({originalEvent:o,open:!this.open})};this.handleExpandableAnimationStart=o=>{this.dsoAnimationStart.emit({animation:this.open?"opening":"closing",scrollIntoView:(n="auto")=>this.scrollIntoView(o.detail.bodyHeight,n)})};this.handleExpandableAnimationEnd=o=>{this.dsoAnimationEnd.emit({open:this.open,scrollIntoView:(n="auto")=>this.scrollIntoView(o.detail.bodyHeight,n)})};this.handleTitle=undefined;this.heading="h2";this.handleUrl=undefined;this.status=undefined;this.attachmentCount=undefined;this.icon=undefined;this.statusDescription=undefined;this.open=false;this.hasNestedAccordion=false;this.hover=false}async focusHandle(){var o;(o=this.handleElementRef)===null\|\|o===void 0?void 0:o.focus()}get containsNestedAccordion(){return this.host.querySelector("dso-accordion")!==null}componentWillLoad(){var o;(o=this.accordion)===null\|\|o===void 0?void 0:o._getState().then((o=>{this.accordionState=o;t(this.host)}))}get isNeutral(){var o;return((o=this.accordionState)===null\|\|o===void 0?void 0:o.variant)==="neutral"}async scrollIntoView(o,n="auto"){var t,s;l(`DSO Toolkit [Accordion Section] scrollIntoView(bodyHeight: ${JSON.stringify(o)}, behavior: ${JSON.stringify(n)})`);const d=(t=this.sectionBody)===null\|\|t===void 0?void 0:t.getBoundingClientRect();const c=(s=this.sectionHeading)===null\|\|s===void 0?void 0:s.getBoundingClientRect();l(`DSO Toolkit [Accordion Section] const bodyClientRect = ${JSON.stringify(d)};`);l(`DSO Toolkit [Accordion Section] const headingClientRect = ${JSON.stringify(c)};`);l(`DSO Toolkit [Accordion Section] this.accordionState = ${JSON.stringify(this.accordionState)};`);l(`DSO Toolkit [Accordion Section] this.open = ${JSON.stringify(this.open)};`);if(!d\|\|!c\|\|!this.accordionState){l(`DSO Toolkit [Accordion Section] returning`);return}const e=c.top+c.height+(this.open?o!==null&&o!==void 0?o:0:0);l(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(e)};`);l(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);const a=this.host.getBoundingClientRect();const i=window.scrollY\|\|document.documentElement.scrollTop\|\|document.body.scrollTop;const r=document.documentElement.clientTop\|\|document.body.clientTop\|\|0;const h=a.top+i-r;l("DSO Toolkit [Accordion Section] scroll",{box:a,scrollTop:i,clientTop:r,top:h});if(e>window.innerHeight){l(`DSO Toolkit [Accordion Section] sectionBottomY > window.innerHeight === ${JSON.stringify(e>window.innerHeight)};`);const o=e-c.top;const t=o>window.innerHeight;l(`DSO Toolkit [Accordion Section] const expandedAccordionHeight = ${JSON.stringify(o)};`);l(`DSO Toolkit [Accordion Section] const shouldScrollToTopOfSection = ${JSON.stringify(t)};`);window.scrollTo({top:t?h:h-(window.innerHeight-o),behavior:n})}else if(c.top<0){l(`DSO Toolkit [Accordion Section] headingClientRect.top < 0 === ${JSON.stringify(c.top<0)};`);window.scrollTo({top:h,behavior:n})}}get accordion(){return this.host.closest("dso-accordion")}render(){var o;const{variant:n,reverseAlign:t}=(o=this.accordionState)!==null&&o!==void 0?o:{};const e=!!this.statusDescription\|\|!!this.status\|\|!!this.icon\|\|!!this.attachmentCount;return s(c,{key:"e6d935b422454ca54ef161939dbe7ff8707cd336",class:{"dso-accordion-section":true,["dso-accordion-"+n]:true,"dso-nested-accordion":this.hasNestedAccordion\|\|this.containsNestedAccordion,"dso-accordion-reverse-align":t!==null&&t!==void 0?t:false},hidden:!n,onMouseenter:()=>this.hover=true,onMouseleave:()=>this.hover=false},s(p,{key:"df0aade07259ea950aa2d5af7fc78d318607f99f",heading:this.heading,ref:o=>this.sectionHeading=o},s(h,{key:"c3113baab09dcb2429f2755558f47bd5cd0f81f2",handleUrl:this.handleUrl,onClick:this.handleClick,open:this.open,handleElementRef:o=>this.handleElementRef=o},t?s(d,null,e&&s("div",{class:"dso-section-handle-addons"},s(u,{icon:this.icon})),s("span",null,this.handleTitle),s("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-down"})):s(d,null,s("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-right"}),this.status&&s("span",{class:"sr-only"},a[this.status]),s("span",null,this.handleTitle,this.isNeutral&&s("dso-icon",{class:"info-icon",icon:this.open\|\|this.hover?"info-active":"info"})),e&&s("div",{class:"dso-section-handle-addons"},this.statusDescription&&s("span",{class:"dso-status"},this.statusDescription),s(u,{state:this.status,icon:this.icon,attachmentCount:this.attachmentCount}))))),s("dso-expandable",{key:"fc46969992194a44e6118eae4d1ad7c52c4d5105",class:"dso-section-body",open:this.open,enableAnimation:true,minimumHeight:this.isNeutral?0:4,onDsoExpandableAnimationStart:this.handleExpandableAnimationStart,onDsoExpandableAnimationEnd:this.handleExpandableAnimationEnd},s("div",{key:"72b09c8a6e9121e3454b796cfcc4b248cae2733f",class:"dso-section-body-content",ref:o=>this.sectionBody=o},s("slot",{key:"a45f7c226d70d44f86e58c960c486960586fd62f"}))))}get host(){return e(this)}};f.style=r;export{f as dso_accordion_section};
2	- //# sourceMappingURL=p-d053346c.entry.js.map

package/dist/dso-toolkit/p-d053346c.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stateMap","success","info","warning","danger","error","accordionSectionCss","DsoAccordionSectionStyle0","log","window","console","bind","HandleElement","handleUrl","onClick","open","handleElementRef","children","h","href","ref","type","Handle","heading","class","HandleIcon","state","icon","attachmentCount","HandleStateIcon","count","AccordionSection","this","handleClick","event","dsoToggleClick","emit","originalEvent","handleExpandableAnimationStart","e","dsoAnimationStart","animation","scrollIntoView","behavior","detail","bodyHeight","handleExpandableAnimationEnd","dsoAnimationEnd","focusHandle","_a","focus","containsNestedAccordion","host","querySelector","componentWillLoad","accordion","_getState","then","accordionState","forceUpdate","isNeutral","variant","JSON","stringify","bodyClientRect","sectionBody","getBoundingClientRect","headingClientRect","_b","sectionHeading","sectionBottomY","top","height","innerHeight","box","scrollTop","scrollY","document","documentElement","body","clientTop","expandedAccordionHeight","shouldScrollToTopOfSection","scrollTo","closest","render","reverseAlign","hasAddons","statusDescription","status","Host","key","hasNestedAccordion","hidden","onMouseenter","hover","onMouseleave","element","Fragment","handleTitle","enableAnimation","minimumHeight","onDsoExpandableAnimationStart","onDsoExpandableAnimationEnd"],"sources":["src/components/accordion/components/accordion-section.interfaces.ts","src/components/accordion/components/accordion-section.scss?tag=dso-accordion-section&encapsulation=shadow","src/components/accordion/components/accordion-section.tsx"],"sourcesContent":["export type AccordionSectionState = \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\";\r\n\r\nexport type AccordionHeading = \"h2\" | \"h3\" | \"h4\" | \"h5\";\r\n\r\nexport const stateMap: Record<AccordionSectionState, string> = {\r\n success: \"succes:\",\r\n info: \"info:\",\r\n warning: \"waarschuwing:\",\r\n danger: \"fout:\",\r\n error: \"fout:\",\r\n};\r\n\r\nexport interface AccordionSectionToggleClickEvent {\r\n /**\r\n * The original MouseEvent that triggered the click.\r\n *\r\n * In case the Section Handle is an <a> this event can be used to preventDefault() so the framework router is reponsible for navigating the user.\r\n */\r\n originalEvent?: MouseEvent;\r\n\r\n /**\r\n * The requested state. If the Accordion Section is closed, `open = true`.\r\n */\r\n open: boolean;\r\n}\r\n\r\nexport interface AccordionSectionAnimationStartEvent {\r\n /**\r\n * Helper function to scroll the Accordion Section into view.\r\n */\r\n scrollIntoView(behavior?: ScrollBehavior): void;\r\n\r\n /**\r\n * Whether or not the Accordion opening or closing.\r\n */\r\n animation: \"opening\" | \"closing\";\r\n}\r\n\r\nexport interface AccordionSectionAnimationEndEvent {\r\n /**\r\n * Helper function to scroll the Accordion Section into view.\r\n */\r\n scrollIntoView(behavior?: ScrollBehavior): void;\r\n\r\n /**\r\n * The state of the Accordion Section after animation.\r\n */\r\n open: boolean;\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/accordion\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"accordion-section-theme-compact\";\r\n@use \"accordion-section-theme-compact-black\";\r\n@use \"accordion-section-theme-conclusion\";\r\n@use \"accordion-section-theme-default\";\r\n@use \"accordion-section-theme-neutral\";\r\n\r\n@include utilities.box-sizing();\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 .dso-section-handle {\r\n font-size: 1em;\r\n font-weight: 600;\r\n line-height: accordion.$handle-line-height;\r\n margin: 0;\r\n position: relative;\r\n\r\n > a:active {\r\n text-decoration: none;\r\n }\r\n\r\n a {\r\n @include anchor.clean();\r\n }\r\n\r\n .dso-status {\r\n font-weight: 400;\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n .dso-section-handle > button,\r\n .dso-section-handle > a {\r\n align-items: flex-start;\r\n background-color: transparent;\r\n border: 0;\r\n cursor: pointer;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n font-size: 1em;\r\n font-weight: 600;\r\n line-height: accordion.$handle-line-height;\r\n margin: 0;\r\n padding: accordion.$vertical-padding accordion.$horizontal-padding accordion.$vertical-padding;\r\n text-align: start;\r\n width: 100%;\r\n word-break: break-word;\r\n\r\n dso-icon {\r\n flex-shrink: 0;\r\n\r\n &.dso-section-handle-chevron {\r\n @include utilities.transition(transform);\r\n\r\n transform: rotate(0);\r\n }\r\n }\r\n\r\n > .dso-section-handle-addons:first-child,\r\n > dso-icon:first-child {\r\n margin-right: units.$u1;\r\n }\r\n\r\n > dso-icon:last-child {\r\n margin-left: auto;\r\n }\r\n\r\n > .dso-section-handle-addons:last-child {\r\n margin-left: auto;\r\n\r\n dso-attachments-counter,\r\n dso-icon {\r\n margin-left: 16px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host([open]:not([open=\"false\"])) {\r\n .dso-section-handle {\r\n > button,\r\n > a {\r\n .dso-section-handle-chevron {\r\n &:first-child {\r\n transform: rotate(90deg);\r\n }\r\n\r\n &:last-child {\r\n transform: rotate(-180deg);\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-section-body {\r\n background-color: colors.$wit;\r\n border-top: 0;\r\n margin-block-start: accordion.$border-radius * -1;\r\n\r\n .dso-section-body-content {\r\n padding: units.$u2 + accordion.$border-radius units.$u2 units.$u2;\r\n }\r\n}\r\n\r\n// Default\r\n:host(.dso-accordion-default) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default();\r\n}\r\n\r\n:host(.dso-accordion-default[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default-open();\r\n}\r\n\r\n:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default-open-nested();\r\n}\r\n\r\n// Compact\r\n:host(.dso-accordion-compact) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-accordion-reverse-align) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-open();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-open-nested();\r\n}\r\n\r\n// Compact black\r\n:host(.dso-accordion-compact-black) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-reverse-align) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact-black[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open-nested();\r\n}\r\n\r\n// Conclusion\r\n:host(.dso-accordion-conclusion) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion();\r\n}\r\n\r\n:host(.dso-accordion-conclusion[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open();\r\n}\r\n\r\n:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open-nested();\r\n}\r\n\r\n// Neutral\r\n:host(.dso-accordion-neutral) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral();\r\n}\r\n\r\n:host(.dso-accordion-neutral[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open();\r\n}\r\n\r\n:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open-nested();\r\n}\r\n","import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n forceUpdate,\r\n Fragment,\r\n Host,\r\n Prop,\r\n State,\r\n EventEmitter,\r\n FunctionalComponent,\r\n Method,\r\n} from \"@stencil/core\";\r\n\r\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\nimport {\r\n AccordionHeading,\r\n AccordionSectionAnimationEndEvent,\r\n AccordionSectionState,\r\n AccordionSectionToggleClickEvent,\r\n AccordionSectionAnimationStartEvent,\r\n stateMap,\r\n} from \"./accordion-section.interfaces\";\r\nimport { ExpandableAnimationEndEvent } from \"../../expandable/expandable\";\r\n\r\n// eslint-disable-next-line no-console\r\nconst log = (window as any)[\"_dsoLog\"] === true ? console.log.bind(console.log) : function () {};\r\n\r\nconst HandleElement: FunctionalComponent<{\r\n handleUrl: string | undefined;\r\n open: boolean;\r\n handleElementRef: (element: HTMLAnchorElement | HTMLButtonElement | undefined) => void;\r\n onClick: (e: MouseEvent) => void;\r\n}> = ({ handleUrl, onClick, open, handleElementRef }, children) => {\r\n if (handleUrl) {\r\n return (\r\n <a href={handleUrl} onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n {children}\r\n </a>\r\n );\r\n }\r\n\r\n return (\r\n <button type=\"button\" onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n {children}\r\n </button>\r\n );\r\n};\r\n\r\nconst Handle: FunctionalComponent<{\r\n heading: AccordionHeading;\r\n ref: (element: HTMLHeadingElement | undefined) => void;\r\n}> = ({ heading, ref }, children) => {\r\n switch (heading) {\r\n default:\r\n case \"h2\":\r\n return (\r\n <h2 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h2>\r\n );\r\n case \"h3\":\r\n return (\r\n <h3 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h3>\r\n );\r\n case \"h4\":\r\n return (\r\n <h4 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h4>\r\n );\r\n case \"h5\":\r\n return (\r\n <h5 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h5>\r\n );\r\n }\r\n};\r\n\r\nconst HandleIcon: FunctionalComponent<{\r\n state?: AccordionSectionState;\r\n icon?: string;\r\n attachmentCount?: number;\r\n}> = ({ state, icon, attachmentCount }) => {\r\n if (state) {\r\n return <HandleStateIcon state={state} />;\r\n }\r\n\r\n if (attachmentCount) {\r\n return <dso-attachments-counter count={attachmentCount}></dso-attachments-counter>;\r\n }\r\n\r\n if (icon) {\r\n return <dso-icon icon={icon}></dso-icon>;\r\n }\r\n};\r\n\r\nconst HandleStateIcon: FunctionalComponent<{ state: AccordionSectionState }> = ({ state }) => {\r\n if (state === \"error\") {\r\n return <dso-icon icon=\"status-error\"></dso-icon>;\r\n }\r\n\r\n if (state === \"danger\") {\r\n return <dso-icon icon=\"status-danger\"></dso-icon>;\r\n }\r\n\r\n if (state === \"success\") {\r\n return <dso-icon icon=\"status-success\"></dso-icon>;\r\n }\r\n\r\n if (state === \"info\") {\r\n return <dso-icon icon=\"status-info\"></dso-icon>;\r\n }\r\n\r\n if (state === \"warning\") {\r\n return <dso-icon icon=\"status-warning\"></dso-icon>;\r\n }\r\n};\r\n\r\n@Component({\r\n tag: \"dso-accordion-section\",\r\n styleUrl: \"accordion-section.scss\",\r\n shadow: true,\r\n})\r\nexport class AccordionSection implements ComponentInterface {\r\n private accordionState?: AccordionInternalState;\r\n\r\n private sectionBody?: HTMLDivElement;\r\n\r\n private sectionHeading?: HTMLHeadingElement;\r\n\r\n @Element()\r\n host!: HTMLDsoAccordionSectionElement;\r\n\r\n /**\r\n * The title of the handle\r\n */\r\n @Prop()\r\n handleTitle?: string;\r\n\r\n /**\r\n * Which heading element to use.\r\n */\r\n @Prop()\r\n heading: AccordionHeading = \"h2\";\r\n\r\n /**\r\n * When set the handle will render as a `<a>`. When undefined it renders as a `<button>`\r\n */\r\n @Prop()\r\n handleUrl?: string;\r\n\r\n /**\r\n * `state` takes precedence over `attachmentCount` and `icon`\r\n */\r\n @Prop()\r\n status?: AccordionSectionState;\r\n\r\n /**\r\n * `attachmentCount` takes precedence over `icon`\r\n */\r\n @Prop()\r\n attachmentCount?: number;\r\n\r\n /**\r\n * To set an icon in the heading handle.\r\n */\r\n @Prop()\r\n icon?: string;\r\n\r\n /**\r\n * The status of the section.\r\n */\r\n @Prop()\r\n statusDescription?: string;\r\n\r\n /**\r\n * Set the Accordion Section open.\r\n */\r\n @Prop({ reflect: true })\r\n open = false;\r\n\r\n /**\r\n * Set when this Accordion Section contains or will contain an Accordion.\r\n */\r\n @Prop({ reflect: true })\r\n hasNestedAccordion = false;\r\n\r\n /**\r\n * Calling this method will set focus to the handle.\r\n */\r\n @Method()\r\n async focusHandle() {\r\n this.handleElementRef?.focus();\r\n }\r\n\r\n @State()\r\n hover = false;\r\n\r\n get containsNestedAccordion() {\r\n return this.host.querySelector(\"dso-accordion\") !== null;\r\n }\r\n\r\n componentWillLoad() {\r\n this.accordion?._getState().then((state) => {\r\n this.accordionState = state;\r\n\r\n forceUpdate(this.host);\r\n });\r\n }\r\n\r\n get isNeutral() {\r\n return this.accordionState?.variant === \"neutral\";\r\n }\r\n\r\n private async scrollIntoView(bodyHeight: number | undefined, behavior: ScrollBehavior = \"auto\"): Promise<void> {\r\n log(\r\n `DSO Toolkit [Accordion Section] scrollIntoView(bodyHeight: ${JSON.stringify(\r\n bodyHeight,\r\n )}, behavior: ${JSON.stringify(behavior)})`,\r\n );\r\n\r\n const bodyClientRect = this.sectionBody?.getBoundingClientRect();\r\n const headingClientRect = this.sectionHeading?.getBoundingClientRect();\r\n\r\n log(`DSO Toolkit [Accordion Section] const bodyClientRect = ${JSON.stringify(bodyClientRect)};`);\r\n log(`DSO Toolkit [Accordion Section] const headingClientRect = ${JSON.stringify(headingClientRect)};`);\r\n log(`DSO Toolkit [Accordion Section] this.accordionState = ${JSON.stringify(this.accordionState)};`);\r\n log(`DSO Toolkit [Accordion Section] this.open = ${JSON.stringify(this.open)};`);\r\n\r\n if (!bodyClientRect || !headingClientRect || !this.accordionState) {\r\n log(`DSO Toolkit [Accordion Section] returning`);\r\n\r\n return;\r\n }\r\n\r\n // this y is relative to the top of the viewport.\r\n const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? bodyHeight ?? 0 : 0);\r\n\r\n log(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(sectionBottomY)};`);\r\n log(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);\r\n\r\n const box = this.host.getBoundingClientRect();\r\n\r\n const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;\r\n const clientTop = document.documentElement.clientTop || document.body.clientTop || 0;\r\n const top = box.top + scrollTop - clientTop;\r\n\r\n log(\"DSO Toolkit [Accordion Section] scroll\", { box, scrollTop, clientTop, top });\r\n\r\n if (sectionBottomY > window.innerHeight) {\r\n log(\r\n `DSO Toolkit [Accordion Section] sectionBottomY > window.innerHeight === ${JSON.stringify(\r\n sectionBottomY > window.innerHeight,\r\n )};`,\r\n );\r\n\r\n const expandedAccordionHeight = sectionBottomY - headingClientRect.top;\r\n const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;\r\n\r\n log(\r\n `DSO Toolkit [Accordion Section] const expandedAccordionHeight = ${JSON.stringify(expandedAccordionHeight)};`,\r\n );\r\n log(\r\n `DSO Toolkit [Accordion Section] const shouldScrollToTopOfSection = ${JSON.stringify(\r\n shouldScrollToTopOfSection,\r\n )};`,\r\n );\r\n\r\n window.scrollTo({\r\n top: shouldScrollToTopOfSection ? top : top - (window.innerHeight - expandedAccordionHeight),\r\n behavior,\r\n });\r\n } else if (headingClientRect.top < 0) {\r\n log(\r\n `DSO Toolkit [Accordion Section] headingClientRect.top < 0 === ${JSON.stringify(headingClientRect.top < 0)};`,\r\n );\r\n\r\n window.scrollTo({\r\n top,\r\n behavior,\r\n });\r\n }\r\n }\r\n\r\n private get accordion() {\r\n return this.host.closest(\"dso-accordion\");\r\n }\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n this.dsoToggleClick.emit({\r\n originalEvent: event,\r\n open: !this.open,\r\n });\r\n };\r\n\r\n private handleExpandableAnimationStart = (e: CustomEvent<any>) => {\r\n this.dsoAnimationStart.emit({\r\n animation: this.open ? \"opening\" : \"closing\",\r\n scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n });\r\n };\r\n\r\n private handleExpandableAnimationEnd = (e: CustomEvent<ExpandableAnimationEndEvent>) => {\r\n this.dsoAnimationEnd.emit({\r\n open: this.open,\r\n scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n });\r\n };\r\n\r\n /**\r\n * Emitted when the user activates the toggle button.\r\n */\r\n @Event({ bubbles: false })\r\n dsoToggleClick!: EventEmitter<AccordionSectionToggleClickEvent>;\r\n\r\n /**\r\n * Event emitted when the Accordion Section starts its toggle animation.\r\n */\r\n @Event({ bubbles: false })\r\n dsoAnimationStart!: EventEmitter<AccordionSectionAnimationStartEvent>;\r\n\r\n /**\r\n * Event emitted when the Accordion Section completes its toggle animation.\r\n */\r\n @Event({ bubbles: false })\r\n dsoAnimationEnd!: EventEmitter<AccordionSectionAnimationEndEvent>;\r\n\r\n private handleElementRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n render() {\r\n const { variant, reverseAlign } = this.accordionState ?? {};\r\n const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;\r\n\r\n return (\r\n <Host\r\n class={{\r\n \"dso-accordion-section\": true,\r\n [\"dso-accordion-\" + variant]: true,\r\n \"dso-nested-accordion\": this.hasNestedAccordion || this.containsNestedAccordion,\r\n \"dso-accordion-reverse-align\": reverseAlign ?? false,\r\n }}\r\n hidden={!variant}\r\n onMouseenter={() => (this.hover = true)}\r\n onMouseleave={() => (this.hover = false)}\r\n >\r\n <Handle heading={this.heading} ref={(element) => (this.sectionHeading = element)}>\r\n <HandleElement\r\n handleUrl={this.handleUrl}\r\n onClick={this.handleClick}\r\n open={this.open}\r\n handleElementRef={(e) => (this.handleElementRef = e)}\r\n >\r\n {reverseAlign ? (\r\n <Fragment>\r\n {hasAddons && (\r\n <div class=\"dso-section-handle-addons\">\r\n <HandleIcon icon={this.icon} />\r\n </div>\r\n )}\r\n\r\n <span>{this.handleTitle}</span>\r\n\r\n <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-down\"></dso-icon>\r\n </Fragment>\r\n ) : (\r\n <Fragment>\r\n <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-right\"></dso-icon>\r\n\r\n {this.status && <span class=\"sr-only\">{stateMap[this.status]}</span>}\r\n\r\n <span>\r\n {this.handleTitle}\r\n {this.isNeutral && (\r\n <dso-icon class=\"info-icon\" icon={this.open || this.hover ? \"info-active\" : \"info\"} />\r\n )}\r\n </span>\r\n\r\n {hasAddons && (\r\n <div class=\"dso-section-handle-addons\">\r\n {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n <HandleIcon state={this.status} icon={this.icon} attachmentCount={this.attachmentCount} />\r\n </div>\r\n )}\r\n </Fragment>\r\n )}\r\n </HandleElement>\r\n </Handle>\r\n <dso-expandable\r\n class=\"dso-section-body\"\r\n open={this.open}\r\n enableAnimation\r\n minimumHeight={this.isNeutral ? 0 : 4}\r\n onDsoExpandableAnimationStart={this.handleExpandableAnimationStart}\r\n onDsoExpandableAnimationEnd={this.handleExpandableAnimationEnd}\r\n >\r\n <div class=\"dso-section-body-content\" ref={(element) => (this.sectionBody = element)}>\r\n <slot />\r\n </div>\r\n </dso-expandable>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"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"}

package/dist/dso-toolkit/p-d82948d9.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,c as n,h as t,H as o,a as s}from"./p-1754d0a9.js";import{c as i}from"./p-8a1a6e56.js";const a=":host {\n display: block;\n padding: 4px;\n}\n\n,\n::after,\n*::before {\n box-sizing: border-box;\n}\n\n.legend-item {\n display: flex;\n position: relative;\n}\n.legend-item.legend-item-symbol + .body {\n margin-inline-start: 38px;\n}\n.legend-item.legend-item-selectable + .body {\n margin-inline-start: 32px;\n}\n.legend-item.legend-item-selectable.legend-item-symbol + .body {\n margin-inline-start: 70px;\n}\n\nbutton {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n position: absolute;\n inset-inline-end: 0;\n}\nbutton:focus, button:focus-visible {\n outline-offset: 2px;\n}\nbutton:active {\n outline: 0;\n}\nbutton[disabled] {\n color: #afcf9d;\n}\nbutton[disabled].dso-spinner-left, button[disabled].dso-spinner-right {\n color: #39870c;\n}\nbutton:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\nbutton:not([disabled]):active {\n color: #173521;\n}\nbutton.dso-align {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\n}\nbutton.dso-truncate {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\nbutton.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 8px;\n}\nbutton.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\nbutton > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}";const r=a;const d=class{constructor(t){e(this,t);this.dsoRemoveClick=n(this,"dsoRemoveClick",7);this.dsoMouseEnter=n(this,"dsoMouseEnter",7);this.dsoMouseLeave=n(this,"dsoMouseLeave",7);this.disabled=false;this.disabledMessage=undefined;this.removable=undefined;this.showBody=false}get symbolSlottedElement(){return this.host.querySelector("[slot='symbol']")}get selectableSlottedElement(){return this.host.querySelector(":scope > dso-selectable")}get bodySlottedElement(){return this.host.querySelector("[slot='body']")}render(){const e=this.symbolSlottedElement!==null;const n=this.bodySlottedElement!==null;const s=this.selectableSlottedElement!==null;return t(o,{key:"3a732bff9d1e998b7468c7e508edf41e472cdf1f",onMouseEnter:()=>this.dsoMouseEnter.emit(),onMouseLeave:()=>this.dsoMouseLeave.emit()},t("div",{key:"8b2bba6b998955c91e5d67fa6dcd4424807b7c2a",class:i("legend-item",{"legend-item-symbol":e,"legend-item-selectable":s})},t("div",{key:"1f3bb12d214ed0877786a195dbae6185b00b6c97",hidden:!e},t("slot",{key:"032e27bcad7cf0a711e7afe05f782c7d51246d1d",name:"symbol"})),t("div",{key:"7ba425d10db6401e450090b94824bb66ff709e9b"},t("slot",{key:"a4f911e41c0a700a4aa13a7fb4aab1fcdbeffe8a"})),this.disabled&&this.disabledMessage&&t("dso-toggletip",{key:"f094a3c424c1d1fd181b57bfd51638bfb8ea0797",position:"bottom"},this.disabledMessage),this.removable&&t("button",{key:"025272a3802507a54d2e50741dd79ed8bd1ba130",id:"remove-button",type:"button",onClick:e=>this.dsoRemoveClick.emit({originalEvent:e})},t("span",{key:"a1f96e0028b2af5d115216676bb2a2f31403f53d",class:"sr-only"},"Legenda item verwijderen"),t("dso-icon",{key:"b2c18e31618d3ce43536c1b2d3d48f5d66c16658",icon:"trash"})),n&&!this.disabled&&t("button",{key:"ef084b28d39bac92df86f5e4e9f441588fa77d3f",id:"edit-button",type:"button",onClick:()=>this.showBody=!this.showBody},t("span",{key:"2ca66b1cadf279727750086f02e3423029b39fec",class:"sr-only"},"Legenda item aanpassen"),t("dso-icon",{key:"6fe03e75ecbc08e02956d75c10212ad3f566d6f4",icon:this.showBody?"times":"more"}))),t("div",{key:"061973981aa31be8a7b1ab51f94e301a1c4aa68b",hidden:!n\|\|this.disabled\|\|!this.showBody,class:"body"},t("slot",{key:"9817bbb5df6790ecf30c97c688aed899a7b9ef9e",name:"body"})))}get host(){return s(this)}};d.style=r;export{d as dso_legend_item};
2	- //# sourceMappingURL=p-d82948d9.entry.js.map

package/dist/dso-toolkit/p-d82948d9.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["legendItemCss","DsoLegendItemStyle0","LegendItem","symbolSlottedElement","this","host","querySelector","selectableSlottedElement","bodySlottedElement","render","hasSymbol","hasBody","isSelectable","h","Host","key","onMouseEnter","dsoMouseEnter","emit","onMouseLeave","dsoMouseLeave","class","clsx","hidden","name","disabled","disabledMessage","position","removable","id","type","onClick","e","dsoRemoveClick","originalEvent","icon","showBody"],"sources":["src/components/legend-item/legend-item.scss?tag=dso-legend-item&encapsulation=shadow","src/components/legend-item/legend-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/legend-item/legend-item.variables\" as legend-item-variables;\r\n\r\n:host {\r\n display: block;\r\n padding: units.$u1 * 0.5;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.legend-item {\r\n display: flex;\r\n position: relative;\r\n\r\n &.legend-item-symbol {\r\n + .body {\r\n margin-inline-start: legend-item-variables.$symbol-width + units.$u1;\r\n }\r\n }\r\n\r\n &.legend-item-selectable {\r\n + .body {\r\n margin-inline-start: legend-item-variables.$selectable-width;\r\n }\r\n\r\n &.legend-item-symbol {\r\n + .body {\r\n margin-inline-start: legend-item-variables.$symbol-width + units.$u1 + legend-item-variables.$selectable-width;\r\n }\r\n }\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.tertiary($icon-only: true, $modifiers: false);\r\n\r\n position: absolute;\r\n inset-inline-end: 0;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Prop, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { LegendItemRemoveClickEvent } from \"./legend-item.interfaces\";\r\n\r\n/**\r\n * @slot - Either the label for this legend item or a `dso-selectable` holding the label.\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot body - The slot to place controls in (i.e. `dso-input-range` or multiple `dso-selectable`\\`s). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n */\r\n@Component({\r\n tag: \"dso-legend-item\",\r\n styleUrl: \"legend-item.scss\",\r\n shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoLegendItemElement;\r\n\r\n /**\r\n * To disable the Legend Item\r\n */\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /**\r\n * Message to be shown behind a toggletip when the Legend Item is disabled\r\n */\r\n @Prop()\r\n disabledMessage?: string;\r\n\r\n /**\r\n * Shows a trash-can that, when clicked, emits `dsoRemoveClick`.\r\n */\r\n @Prop()\r\n removable?: boolean;\r\n\r\n /**\r\n * Emitted when the user activates the remove button.\r\n */\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<LegendItemRemoveClickEvent>;\r\n\r\n /**\r\n * Emitted when the mouse enters the Legend Item\r\n */\r\n @Event()\r\n dsoMouseEnter!: EventEmitter;\r\n\r\n /**\r\n * Emitted when the mouse leaves the Legend Item\r\n */\r\n @Event()\r\n dsoMouseLeave!: EventEmitter;\r\n\r\n @State()\r\n showBody = false;\r\n\r\n get symbolSlottedElement() {\r\n return this.host.querySelector(\"[slot='symbol']\");\r\n }\r\n\r\n get selectableSlottedElement() {\r\n return this.host.querySelector(\":scope > dso-selectable\");\r\n }\r\n\r\n get bodySlottedElement() {\r\n return this.host.querySelector(\"[slot='body']\");\r\n }\r\n\r\n render() {\r\n const hasSymbol = this.symbolSlottedElement !== null;\r\n const hasBody = this.bodySlottedElement !== null;\r\n const isSelectable = this.selectableSlottedElement !== null;\r\n\r\n return (\r\n <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n <div\r\n class={clsx(\"legend-item\", {\r\n \"legend-item-symbol\": hasSymbol,\r\n \"legend-item-selectable\": isSelectable,\r\n })}\r\n >\r\n <div hidden={!hasSymbol}>\r\n <slot name=\"symbol\" />\r\n </div>\r\n <div>\r\n <slot></slot>\r\n </div>\r\n {this.disabled && this.disabledMessage && (\r\n <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n )}\r\n {this.removable && (\r\n <button id=\"remove-button\" type=\"button\" onClick={(e) => this.dsoRemoveClick.emit({ originalEvent: e })}>\r\n <span class=\"sr-only\">Legenda item verwijderen</span>\r\n <dso-icon icon=\"trash\"></dso-icon>\r\n </button>\r\n )}\r\n\r\n {hasBody && !this.disabled && (\r\n <button id=\"edit-button\" type=\"button\" onClick={() => (this.showBody = !this.showBody)}>\r\n <span class=\"sr-only\">Legenda item aanpassen</span>\r\n <dso-icon icon={this.showBody ? \"times\" : \"more\"} />\r\n </button>\r\n )}\r\n </div>\r\n <div hidden={!hasBody || this.disabled || !this.showBody} class=\"body\">\r\n <slot name=\"body\" />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"oGAAA,MAAMA,EAAgB,0gHACtB,MAAAC,EAAeD,E,MCaFE,EAAU,M,gLAQV,M,sEAiCA,K,CAEX,wBAAIC,GACF,OAAOC,KAAKC,KAAKC,cAAc,kB,CAGjC,4BAAIC,GACF,OAAOH,KAAKC,KAAKC,cAAc,0B,CAGjC,sBAAIE,GACF,OAAOJ,KAAKC,KAAKC,cAAc,gB,CAGjC,MAAAG,GACE,MAAMC,EAAYN,KAAKD,uBAAyB,KAChD,MAAMQ,EAAUP,KAAKI,qBAAuB,KAC5C,MAAMI,EAAeR,KAAKG,2BAA6B,KAEvD,OACEM,EAACC,EAAI,CAAAC,IAAA,2CAACC,aAAc,IAAMZ,KAAKa,cAAcC,OAAQC,aAAc,IAAMf,KAAKgB,cAAcF,QAC1FL,EAAA,OAAAE,IAAA,2CACEM,MAAOC,EAAK,cAAe,CACzB,qBAAsBZ,EACtB,yBAA0BE,KAG5BC,EAAA,OAAAE,IAAA,2CAAKQ,QAASb,GACZG,EAAA,QAAAE,IAAA,2CAAMS,KAAK,YAEbX,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,8CAEDX,KAAKqB,UAAYrB,KAAKsB,iBACrBb,EAAA,iBAAAE,IAAA,2CAAeY,SAAS,UAAUvB,KAAKsB,iBAExCtB,KAAKwB,WACJf,EAAA,UAAAE,IAAA,2CAAQc,GAAG,gBAAgBC,KAAK,SAASC,QAAUC,GAAM5B,KAAK6B,eAAef,KAAK,CAAEgB,cAAeF,KACjGnB,EAAA,QAAAE,IAAA,2CAAMM,MAAM,WAAS,4BACrBR,EAAA,YAAAE,IAAA,2CAAUoB,KAAK,WAIlBxB,IAAYP,KAAKqB,UAChBZ,EAAA,UAAAE,IAAA,2CAAQc,GAAG,cAAcC,KAAK,SAASC,QAAS,IAAO3B,KAAKgC,UAAYhC,KAAKgC,UAC3EvB,EAAA,QAAAE,IAAA,2CAAMM,MAAM,WAAS,0BACrBR,EAAA,YAAAE,IAAA,2CAAUoB,KAAM/B,KAAKgC,SAAW,QAAU,WAIhDvB,EAAA,OAAAE,IAAA,2CAAKQ,QAASZ,GAAWP,KAAKqB,WAAarB,KAAKgC,SAAUf,MAAM,QAC9DR,EAAA,QAAAE,IAAA,2CAAMS,KAAK,U"}

package/dist/dso-toolkit/p-ea138d78.entry.js DELETED Viewed

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

package/dist/dso-toolkit/p-ea138d78.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

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

package/dist/dso-toolkit/p-ef006c7c.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,c as s,h as o}from"./p-1754d0a9.js";import{v as a}from"./p-14616bce.js";const i=":host{display:block},::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}p[slot=info]{margin:0}";const t=i;const d=class{constructor(o){e(this,o);this.dsoToggleOverlay=s(this,"dsoToggleOverlay",7);this.selectableRefs={};this.group=a();this.overlays=undefined}overlayChangeHandler(e,s){const{checked:o}=s.detail;this.dsoToggleOverlay.emit({overlay:e,checked:o})}componentDidRender(){this.overlays.filter((e=>{var s,o;return!e.disabled&&((o=(s=this.previousOverlays)===null\|\|s===void 0?void 0:s.find((s=>s.id===e.id)))===null\|\|o===void 0?void 0:o.disabled)===true})).forEach((e=>{var s;(s=this.selectableRefs[e.id])===null\|\|s===void 0?void 0:s.toggleInfo(false)}));this.previousOverlays=this.overlays}render(){for(const e in this.selectableRefs){delete this.selectableRefs[e]}return o("fieldset",{key:"e064b6e3c8270a7ae1a88a75310e643184b0c871",class:"form-group dso-checkboxes"},o("legend",{key:"be69f5fb324f9699693c8a59e02488d1ef299f80",class:"sr-only"},"Kaartlagen"),o("div",{key:"31c5b7a451d53c2bb88078741a6bf003a5f38171",class:"dso-label-container"},o("span",{key:"f923ee4a9eab8445103642d68478e76f1393fa31",class:"control-label","aria-hidden":"true"},"Kaartlagen")),o("div",{key:"a3f52d6e7f87ecfdb6dd5ec354e728ec78ff392a",class:"dso-field-container"},this.overlays.map((e=>o("dso-selectable",{key:e.id,type:"checkbox",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:s=>this.overlayChangeHandler(e,s)},e.name,e.info?o("p",{slot:"info"},e.info):null)))))}};d.style=t;export{d as dso_map_overlays};
2	- //# sourceMappingURL=p-ef006c7c.entry.js.map

package/dist/dso-toolkit/p-ef006c7c.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["mapOverlaysCss","DsoMapOverlaysStyle0","MapOverlays","this","selectableRefs","uuidv4","overlayChangeHandler","overlay","e","checked","detail","dsoToggleOverlay","emit","componentDidRender","overlays","filter","o","_a","_b","disabled","previousOverlays","find","p","id","forEach","toggleInfo","render","ref","h","key","class","map","type","value","name","group","onDsoChange","info","slot"],"sources":["src/components/map-overlays/map-overlays.scss?tag=dso-map-overlays&encapsulation=shadow","src/components/map-overlays/map-overlays.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n border: 0;\r\n margin: 0;\r\n min-width: 0;\r\n padding: 0;\r\n\r\n .control-label {\r\n display: inline-block;\r\n font-weight: bold;\r\n margin-bottom: units.$u1;\r\n max-width: 100%;\r\n text-align: left;\r\n }\r\n}\r\n\r\np[slot=\"info\"] {\r\n margin: 0;\r\n}\r\n","import { Component, Event, EventEmitter, Prop, h, ComponentInterface } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\n\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-map-overlays\",\r\n styleUrl: \"./map-overlays.scss\",\r\n shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n private previousOverlays: Overlay[] | undefined;\r\n private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n /**\r\n * To group the overlays together. Generally the default value suffices.\r\n */\r\n @Prop()\r\n group = uuidv4();\r\n\r\n /**\r\n * The overlays.\r\n */\r\n @Prop()\r\n overlays!: Overlay[];\r\n\r\n /**\r\n * Emitted when the user selects a different overlay.\r\n */\r\n @Event()\r\n dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n const { checked } = e.detail;\r\n\r\n this.dsoToggleOverlay.emit({ overlay, checked });\r\n }\r\n\r\n componentDidRender() {\r\n this.overlays\r\n .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n .forEach((o) => {\r\n this.selectableRefs[o.id]?.toggleInfo(false);\r\n });\r\n\r\n this.previousOverlays = this.overlays;\r\n }\r\n\r\n render() {\r\n for (const ref in this.selectableRefs) {\r\n delete this.selectableRefs[ref];\r\n }\r\n\r\n return (\r\n <fieldset class=\"form-group dso-checkboxes\">\r\n <legend class=\"sr-only\">Kaartlagen</legend>\r\n <div class=\"dso-label-container\">\r\n <span class=\"control-label\" aria-hidden=\"true\">\r\n Kaartlagen\r\n </span>\r\n </div>\r\n <div class=\"dso-field-container\">\r\n {this.overlays.map((overlay) => (\r\n <dso-selectable\r\n key={overlay.id}\r\n type=\"checkbox\"\r\n value={overlay.name}\r\n checked={overlay.checked}\r\n disabled={overlay.disabled}\r\n name={this.group}\r\n ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n >\r\n {overlay.name}\r\n {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n </dso-selectable>\r\n ))}\r\n </div>\r\n </fieldset>\r\n );\r\n }\r\n}\r\n"],"mappings":"sFAAA,MAAMA,EAAiB,6WACvB,MAAAC,EAAeD,E,MCWFE,EAAW,M,4EAEdC,KAAAC,eAA6D,G,WAM7DC,I,wBAcA,oBAAAC,CAAqBC,EAAkBC,GAC7C,MAAMC,QAAEA,GAAYD,EAAEE,OAEtBP,KAAKQ,iBAAiBC,KAAK,CAAEL,UAASE,W,CAGxC,kBAAAI,GACEV,KAAKW,SACFC,QAAQC,IAAC,IAAAC,EAAAC,EAAK,OAACF,EAAEG,YAAYD,GAAAD,EAAAd,KAAKiB,oBAAgB,MAAAH,SAAA,SAAAA,EAAEI,MAAMC,GAAMA,EAAEC,KAAOP,EAAEO,QAAG,MAAAL,SAAA,SAAAA,EAAEC,YAAa,IAAI,IACjGK,SAASR,I,OACRC,EAAAd,KAAKC,eAAeY,EAAEO,OAAG,MAAAN,SAAA,SAAAA,EAAEQ,WAAW,MAAM,IAGhDtB,KAAKiB,iBAAmBjB,KAAKW,Q,CAG/B,MAAAY,GACE,IAAK,MAAMC,KAAOxB,KAAKC,eAAgB,QAC9BD,KAAKC,eAAeuB,E,CAG7B,OACEC,EAAA,YAAAC,IAAA,2CAAUC,MAAM,6BACdF,EAAA,UAAAC,IAAA,2CAAQC,MAAM,WAAS,cACvBF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uBACTF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,gBAAe,cAAa,QAAM,eAIhDF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uBACR3B,KAAKW,SAASiB,KAAKxB,GAClBqB,EAAA,kBACEC,IAAKtB,EAAQgB,GACbS,KAAK,WACLC,MAAO1B,EAAQ2B,KACfzB,QAASF,EAAQE,QACjBU,SAAUZ,EAAQY,SAClBe,KAAM/B,KAAKgC,MACXR,IAAMA,GAAQA,IAAQxB,KAAKC,eAAeG,EAAQgB,IAAMI,GACxDS,YAAc5B,GAAML,KAAKG,qBAAqBC,EAASC,IAEtDD,EAAQ2B,KACR3B,EAAQ8B,KAAOT,EAAA,KAAGU,KAAK,QAAQ/B,EAAQ8B,MAAY,S"}

package/dist/dso-toolkit/p-f16e7d4b.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{h as e,F as t,r as o,c as n}from"./p-1754d0a9.js";import{c as i}from"./p-8a1a6e56.js";const r=({owner:o,ancestors:n,item:s,index:a,level:l,setSize:c})=>{var d,h,p,u;return e("li",{key:s.id,class:i("tree-item",{"has-child":s.hasItems,"is-expanded":!!s.open&&!!((d=s.items)===null\|\|d===void 0?void 0:d.length)}),role:"none"},e("div",{class:"tree-branch-control"},s.hasItems?e("div",{onClick:e=>o.itemClick(e,n,s)},e("dso-icon",{icon:s.open?"minus-square":"plus-square"})):e("dso-icon",null)),e("p",{class:i("tree-content",{active:s.active},{selected:s.selected}),tabindex:l===1&&a===0?0:-1,role:"treeitem","aria-expanded":s.hasItems?""+(!!s.open&&!!((h=s.items)===null\|\|h===void 0?void 0:h.length)):undefined,"aria-current":s.active?"true":undefined,"aria-level":l,"aria-setsize":c,"aria-posinset":a+1,"aria-busy":s.loading?"true":undefined,"data-item-id":s.id,onClick:e=>o.itemClick(e,n,s)},s.selected&&e("span",{class:"sr-only"},"Resultaat: "),s.href?e("a",{href:s.href,tabindex:"-1"},s.label):e("span",null,s.label),(p=s.icons)===null\|\|p===void 0?void 0:p.map((t=>e("dso-icon",{icon:t.icon,title:t.label})))),s.open&&e(t,null,s.hasItems&&!s.items&&s.loading?e("dso-progress-indicator",{size:"small",label:"Resultaten laden: een moment geduld alstublieft."}):e("ul",{role:"group"},(u=s.items)===null\|\|u===void 0?void 0:u.map(((t,i,a)=>e(r,{owner:o,ancestors:[...n,s],item:t,index:i,level:l+1,setSize:a.length}))))))};const s=':host ul{list-style-type:none;padding-inline-start:32px;position:relative}:host li{position:relative}:host ul[role=tree]{padding-left:0}:host ul[role=group]::before{border-left:1px solid #275937;content:"";height:8px;left:44px;position:absolute;top:0;width:0}:host li:not(.has-child)::before{border-top:1px solid #275937;content:"";height:0;left:12px;position:absolute;top:20px;width:16px}:host li:not(.has-child)::after{border-left:1px solid #275937;content:"";height:100%;left:12px;position:absolute;top:8px;width:0}:host li:not(.has-child):last-child::after{height:20px;top:0}:host li.has-child::before{border-top:1px solid #275937;content:"";height:0;left:24px;position:absolute;top:20px;width:4px}:host li.has-child:not(:last-child)::after{border-left:1px solid #275937;content:"";height:calc(100% - 24px);left:12px;position:absolute;top:32px;width:0}:host li.has-child.is-expanded:last-child::after{border-left:1px solid #275937;content:"";height:calc(100% - 32px);left:12px;position:absolute;top:32px;width:0}:host .tree-branch-control{color:#39870c;display:inline-block;font-size:16px;margin:8px 8px 8px 0;vertical-align:top}:host .tree-branch-control>div{cursor:pointer}:host .tree-content{cursor:pointer;display:inline-block;margin:8px 0;max-width:calc(100% - 40px)}:host .tree-content a{color:#191919;text-decoration:underline}:host .tree-content a:hover,:host .tree-content a:focus{color:#191919;text-decoration:none}:host .tree-content a:active{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content.active{color:#8b4a6a;font-style:italic;font-weight:700;text-decoration:underline}:host .tree-content.active:hover,:host .tree-content.active:focus{text-decoration:none}:host .tree-content.active a{color:#8b4a6a}:host .tree-content.active a:hover,:host .tree-content.active a:focus{text-decoration:none}:host .tree-content dso-icon{color:#39870c;font-size:0.75em;margin-left:0.5em;vertical-align:text-bottom},::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}';const a=s;const l=class{constructor(e){o(this,e);this.dsoOpenItem=n(this,"dsoOpenItem",7);this.dsoCloseItem=n(this,"dsoCloseItem",7);this.dsoClickItem=n(this,"dsoClickItem",7);this.keyDownListener=e=>{if(e.defaultPrevented){return}const t=e=>e.length===1&&e.match(/\S/);const o=e.composedPath().find((e=>e instanceof HTMLElement?e.className==="dso-tree":false));if(!(e.target instanceof HTMLParagraphElement)\|\|!(o instanceof HTMLElement)){return}switch(e.key){case"ArrowDown":l.moveFocus(o,e.target,"next");break;case"ArrowUp":l.moveFocus(o,e.target,"previous");break;case"ArrowRight":l.expandItemOrFocusChild(o,e.target);break;case"ArrowLeft":l.collapseItemOrFocusParent(o,e.target);break;case"End":l.moveFocus(o,e.target,"last");break;case"Home":l.moveFocus(o,e.target,"first");break;case"Enter":case" ":e.target.click();break;default:if(t(e.key)){if(l.setFocusByFirstCharacter(o,e.target,e.key,e.shiftKey)){break}}return}e.preventDefault()};this.itemClick=(e,t,o)=>{if(!(e.target instanceof HTMLElement)){return}const n=e.target.closest(".tree-content");if(n){const i=e.composedPath().find((e=>e instanceof HTMLElement?e.className==="dso-tree":false));if(!(n instanceof HTMLParagraphElement)\|\|!(i instanceof HTMLElement)){return}l.setFocus(i,n);this.dsoClickItem.emit({path:[...t,o],originalEvent:e});return}if(o.open){this.dsoCloseItem.emit([...t,o])}else{this.dsoOpenItem.emit([...t,o])}};this.collection=undefined}async focusItem(e){var t;const o=this.tree;if(!o\|\|e.length===0){return false}const n=e[e.length-1];if(!n){throw new Error("No itemToFocus found")}const i=Array.from((t=o.querySelectorAll("p"))!==null&&t!==void 0?t:[]).filter((e=>e.offsetWidth>0&&e.offsetHeight>0)).find((e=>e.dataset["itemId"]===n.id));if(!i){return false}l.setFocus(o,i);return true}static setFocus(e,t){if(t){Array.from(e.querySelectorAll("p")).filter((e=>e.tabIndex===0)).forEach((e=>e.tabIndex=-1));t.tabIndex=0;t.focus()}}static moveFocus(e,t,o){const n=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));let i=0;switch(o){case"first":i=0;break;case"previous":i=n.indexOf(t)-1;break;case"next":i=n.indexOf(t)+1;break;case"last":i=n.length-1;break}const r=n[i];if(!r){throw new Error("No focusableItem found")}l.setFocus(e,r)}static expandItemOrFocusChild(e,t){var o;if((t===null\|\|t===void 0?void 0:t.getAttribute("aria-expanded"))==="true"){l.moveFocus(e,t,"next")}else{const e=(o=t.previousElementSibling)===null\|\|o===void 0?void 0:o.firstElementChild;if(e instanceof HTMLElement){e.click()}}}static collapseItemOrFocusParent(e,t){var o,n,i;if((t===null\|\|t===void 0?void 0:t.getAttribute("aria-expanded"))==="true"){const e=(o=t.previousElementSibling)===null\|\|o===void 0?void 0:o.firstElementChild;if(e instanceof HTMLElement){e.click()}}else{const o=(i=(n=t===null\|\|t===void 0?void 0:t.parentElement)===null\|\|n===void 0?void 0:n.parentElement)===null\|\|i===void 0?void 0:i.previousElementSibling;if(o instanceof HTMLElement){l.setFocus(e,o)}}}static setFocusByFirstCharacter(e,t,o,n){const i=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));if(n){i.reverse()}const r=i.indexOf(t);o=o.toLowerCase();let s=i.find(((e,t)=>{var n;return t>r&&((n=e.textContent)===null\|\|n===void 0?void 0:n.toLowerCase().startsWith(o))}));if(!s){s=i.find(((e,t)=>{var n;return t<r&&((n=e.textContent)===null\|\|n===void 0?void 0:n.toLowerCase().startsWith(o))}))}if(s){l.setFocus(e,s);return true}return false}render(){var t;return e("div",{key:"e4651d8f9c3a185c7ded70b677c83178be7181e8",id:"tree",class:"dso-tree",onKeyDown:e=>this.keyDownListener(e),ref:e=>this.tree=e},e("ul",{key:"062945ce97ff42458de8636b954c3ff70aab5202",role:"tree","aria-label":"Objectenboom"},(t=this.collection)===null\|\|t===void 0?void 0:t.map(((t,o)=>e(r,{owner:this,ancestors:[],item:t,index:o,level:1,setSize:this.collection.length})))))}};l.style=a;export{l as dso_tree_view};
2	- //# sourceMappingURL=p-f16e7d4b.entry.js.map

package/dist/dso-toolkit/p-f16e7d4b.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["DsoTreeItem","owner","ancestors","item","index","level","setSize","h","key","id","class","clsx","hasItems","open","_a","items","length","role","onClick","e","itemClick","icon","active","selected","tabindex","_b","undefined","loading","href","label","_c","icons","map","title","Fragment","size","_d","childItem","childIndex","org","treeViewCss","DsoTreeViewStyle0","TreeView","this","keyDownListener","event","defaultPrevented","isIndexLetter","str","match","tree","composedPath","find","HTMLElement","className","target","HTMLParagraphElement","moveFocus","expandItemOrFocusChild","collapseItemOrFocusParent","click","setFocusByFirstCharacter","shiftKey","preventDefault","contentElement","closest","eventTarget","setFocus","dsoClickItem","emit","path","originalEvent","dsoCloseItem","dsoOpenItem","focusItem","itemToFocus","Error","elementToFocus","Array","from","querySelectorAll","filter","offsetWidth","offsetHeight","dataset","tabIndex","forEach","focus","el","moveTo","focusableItems","indexOf","focusableItem","getAttribute","controlElement","previousElementSibling","firstElementChild","parentTarget","parentElement","char","backwards","reverse","current","toLowerCase","nextItem","textContent","startsWith","render","onKeyDown","ref","element","collection"],"sources":["src/components/tree-view/tree-item.tsx","src/components/tree-view/tree-view.scss?tag=dso-tree-view&encapsulation=shadow","src/components/tree-view/tree-view.tsx"],"sourcesContent":["import { h, FunctionalComponent, Fragment } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { TreeViewItem, TreeViewItemIcon } from \"./tree-view.interfaces\";\r\n\r\nimport { TreeView } from \"./tree-view\";\r\n\r\ninterface TreeViewItemProps {\r\n owner: TreeView;\r\n ancestors: TreeViewItem[];\r\n item: TreeViewItem;\r\n index: number;\r\n level: number;\r\n setSize: number;\r\n}\r\n\r\nexport const DsoTreeItem: FunctionalComponent<TreeViewItemProps> = ({\r\n owner,\r\n ancestors,\r\n item,\r\n index,\r\n level,\r\n setSize,\r\n}) => (\r\n <li\r\n key={item.id}\r\n class={clsx(\"tree-item\", { \"has-child\": item.hasItems, \"is-expanded\": !!item.open && !!item.items?.length })}\r\n role=\"none\"\r\n >\r\n <div class=\"tree-branch-control\">\r\n {item.hasItems ? (\r\n <div onClick={(e) => owner.itemClick(e, ancestors, item)}>\r\n <dso-icon icon={item.open ? \"minus-square\" : \"plus-square\"}></dso-icon>\r\n </div>\r\n ) : (\r\n <dso-icon></dso-icon>\r\n )}\r\n </div>\r\n <p\r\n class={clsx(\"tree-content\", { active: item.active }, { selected: item.selected })}\r\n tabindex={level === 1 && index === 0 ? 0 : -1}\r\n role=\"treeitem\"\r\n aria-expanded={item.hasItems ? \"\" + (!!item.open && !!item.items?.length) : undefined}\r\n aria-current={item.active ? \"true\" : undefined}\r\n aria-level={level}\r\n aria-setsize={setSize}\r\n aria-posinset={index + 1}\r\n aria-busy={item.loading ? \"true\" : undefined}\r\n data-item-id={item.id}\r\n onClick={(e) => owner.itemClick(e, ancestors, item)}\r\n >\r\n {item.selected && <span class=\"sr-only\">Resultaat: </span>}\r\n {item.href ? (\r\n <a href={item.href} tabindex=\"-1\">\r\n {item.label}\r\n </a>\r\n ) : (\r\n <span>{item.label}</span>\r\n )}\r\n {item.icons?.map((icon: TreeViewItemIcon) => <dso-icon icon={icon.icon} title={icon.label}></dso-icon>)}\r\n </p>\r\n {item.open && (\r\n <>\r\n {item.hasItems && !item.items && item.loading ? (\r\n <dso-progress-indicator size=\"small\" label=\"Resultaten laden: een moment geduld alstublieft.\" />\r\n ) : (\r\n <ul role=\"group\">\r\n {item.items?.map((childItem: TreeViewItem, childIndex: number, org: TreeViewItem[]) => (\r\n <DsoTreeItem\r\n owner={owner}\r\n ancestors={[...ancestors, item]}\r\n item={childItem}\r\n index={childIndex}\r\n level={level + 1}\r\n setSize={org.length}\r\n ></DsoTreeItem>\r\n ))}\r\n </ul>\r\n )}\r\n </>\r\n )}\r\n </li>\r\n);\r\n","@use \"sass:math\";\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n\r\n@use \"tree-view.mixins\" as core-tree-view-mixins;\r\n@use \"tree-view.variables\" as core-tree-view-variables;\r\n\r\n:host {\r\n ul {\r\n list-style-type: none;\r\n padding-inline-start: core-tree-view-variables.$indent;\r\n position: relative;\r\n }\r\n\r\n li {\r\n position: relative;\r\n }\r\n\r\n ul[role=\"tree\"] {\r\n padding-left: 0;\r\n }\r\n\r\n // connects branch or leaf to parent\r\n ul[role=\"group\"]::before {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$indent + core-tree-view-variables.$hcenter,\r\n 0,\r\n core-tree-view-variables.$vspace\r\n );\r\n }\r\n\r\n li:not(.has-child) {\r\n // horizontal connector for a leaf\r\n &::before {\r\n @include core-tree-view-mixins.horizontal-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vcenter,\r\n core-tree-view-variables.$hspace + 0.5 * core-tree-view-variables.$icon-size - 4px\r\n );\r\n }\r\n\r\n // vertical connector for a leaf\r\n &::after {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vspace,\r\n 100%\r\n );\r\n }\r\n\r\n // vertical connector for the last leaf\r\n &:last-child::after {\r\n height: core-tree-view-variables.$vcenter;\r\n top: 0;\r\n }\r\n }\r\n\r\n li.has-child {\r\n // horizontal connector for a branch\r\n &::before {\r\n @include core-tree-view-mixins.horizontal-line(\r\n core-tree-view-variables.$icon-size,\r\n core-tree-view-variables.$vcenter,\r\n core-tree-view-variables.$hspace - 4px\r\n );\r\n }\r\n\r\n // vertical connector for a branch (not last)\r\n &:not(:last-child)::after {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n calc(100% - core-tree-view-variables.$icon-size)\r\n );\r\n }\r\n\r\n // vertical line after a expanded branch (creating dead ends)\r\n &.is-expanded:last-child::after {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n calc(100% - (core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size))\r\n );\r\n }\r\n }\r\n\r\n .tree-branch-control {\r\n color: colors.$grasgroen;\r\n display: inline-block;\r\n font-size: math.div(2 * core-tree-view-variables.$icon-size, 3);\r\n margin: core-tree-view-variables.$vspace core-tree-view-variables.$hspace core-tree-view-variables.$vspace 0;\r\n vertical-align: top;\r\n\r\n > div {\r\n cursor: pointer;\r\n }\r\n }\r\n\r\n .tree-content {\r\n cursor: pointer;\r\n display: inline-block;\r\n margin: core-tree-view-variables.$vspace 0;\r\n max-width: calc(100% - (core-tree-view-variables.$indent + core-tree-view-variables.$hspace));\r\n\r\n a {\r\n color: scaffolding.$text-color;\r\n text-decoration: underline;\r\n\r\n &:hover,\r\n &:focus {\r\n color: scaffolding.$text-color;\r\n text-decoration: none;\r\n }\r\n\r\n &:active {\r\n text-decoration: none;\r\n }\r\n }\r\n\r\n &.selected {\r\n color: scaffolding.$text-color;\r\n font-weight: 700;\r\n text-decoration: underline;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n }\r\n }\r\n\r\n &.active {\r\n color: colors.$mauve;\r\n font-style: italic;\r\n font-weight: 700;\r\n\r\n text-decoration: underline;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n }\r\n\r\n a {\r\n color: colors.$mauve;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n }\r\n }\r\n }\r\n\r\n dso-icon {\r\n color: colors.$grasgroen;\r\n font-size: 0.75em;\r\n margin-left: 0.5em;\r\n vertical-align: text-bottom;\r\n }\r\n }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { h, Component, ComponentInterface, Event, EventEmitter, Prop, Method } from \"@stencil/core\";\r\n\r\nimport { TreeViewPointerEvent, TreeViewItem } from \"./tree-view.interfaces\";\r\nimport { DsoTreeItem } from \"./tree-item\";\r\n\r\n@Component({\r\n tag: \"dso-tree-view\",\r\n styleUrl: \"./tree-view.scss\",\r\n shadow: true,\r\n})\r\nexport class TreeView implements ComponentInterface {\r\n private tree?: HTMLElement;\r\n\r\n /**\r\n * The collection of TreeViewItems\r\n */\r\n @Prop()\r\n collection!: TreeViewItem[];\r\n\r\n /**\r\n * Emitted when a tree view item is opened.\r\n * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n * root to the item that is emitting the open event. The consumer of the event is responsible for updating\r\n * the TreeView's collection (usually set the open state on the last TreeViewItem in path).\r\n */\r\n @Event()\r\n dsoOpenItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n /**\r\n * Emitted when a tree view item is closed.\r\n * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n * root to the item that is emitting the close event. The consumer of the event is responsible for updating\r\n * the TreeView's collection (usually set the closed state on the last TreeViewItem in path).\r\n */\r\n @Event()\r\n dsoCloseItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n /**\r\n * Emitted when a tree view item is clicked.\r\n * The `detail` property of the `CustomEvent` will contain an object with:\r\n * `path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.\r\n * `originalEvent` = the original click event.\r\n * The consumer of the event is responsible for updating the TreeView's collection (usually set the active\r\n * state on the last TreeViewItem in path and clear all other active item states).\r\n */\r\n @Event()\r\n dsoClickItem!: EventEmitter<TreeViewPointerEvent>;\r\n\r\n /**\r\n * Set focus on the last item in the specified path.\r\n * The consumer is responsible for providing a TreeView collection where the last item is visible.\r\n * @async\r\n * @returns Whether the item was found.\r\n */\r\n @Method()\r\n async focusItem(path: TreeViewItem[]): Promise<boolean> {\r\n const tree = this.tree;\r\n\r\n if (!tree || path.length === 0) {\r\n return false;\r\n }\r\n\r\n const itemToFocus = path[path.length - 1];\r\n if (!itemToFocus) {\r\n throw new Error(\"No itemToFocus found\");\r\n }\r\n\r\n const elementToFocus = (Array.from(tree.querySelectorAll(\"p\") ?? []) as HTMLElement[])\r\n .filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0)\r\n .find((item) => item.dataset[\"itemId\"] === itemToFocus.id);\r\n\r\n if (!elementToFocus) {\r\n return false;\r\n }\r\n\r\n TreeView.setFocus(tree, elementToFocus);\r\n\r\n return true;\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.defaultPrevented) {\r\n return;\r\n }\r\n\r\n const isIndexLetter = (str: string) => str.length === 1 && str.match(/\\S/);\r\n\r\n const tree = event\r\n .composedPath()\r\n .find((item) => (item instanceof HTMLElement ? item.className === \"dso-tree\" : false));\r\n\r\n if (!(event.target instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"ArrowDown\":\r\n TreeView.moveFocus(tree, event.target, \"next\");\r\n break;\r\n case \"ArrowUp\":\r\n TreeView.moveFocus(tree, event.target, \"previous\");\r\n break;\r\n case \"ArrowRight\":\r\n TreeView.expandItemOrFocusChild(tree, event.target);\r\n break;\r\n case \"ArrowLeft\":\r\n TreeView.collapseItemOrFocusParent(tree, event.target);\r\n break;\r\n case \"End\":\r\n TreeView.moveFocus(tree, event.target, \"last\");\r\n break;\r\n case \"Home\":\r\n TreeView.moveFocus(tree, event.target, \"first\");\r\n break;\r\n case \"Enter\":\r\n case \" \":\r\n event.target.click();\r\n break;\r\n default:\r\n if (isIndexLetter(event.key)) {\r\n if (TreeView.setFocusByFirstCharacter(tree, event.target, event.key, event.shiftKey)) {\r\n break;\r\n }\r\n }\r\n\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n };\r\n\r\n // eslint-disable-next-line @stencil-community/own-props-must-be-private -- Omdat this als TreeView instance aan Functionele Components wordt gegeven\r\n itemClick = (event: MouseEvent, ancestors: TreeViewItem[], item: TreeViewItem) => {\r\n if (!(event.target instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n const contentElement = event.target.closest(\".tree-content\");\r\n\r\n if (contentElement) {\r\n const tree = event\r\n .composedPath()\r\n .find((eventTarget) => (eventTarget instanceof HTMLElement ? eventTarget.className === \"dso-tree\" : false));\r\n if (!(contentElement instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n TreeView.setFocus(tree, contentElement);\r\n this.dsoClickItem.emit({ path: [...ancestors, item], originalEvent: event });\r\n\r\n return;\r\n }\r\n\r\n if (item.open) {\r\n this.dsoCloseItem.emit([...ancestors, item]);\r\n } else {\r\n this.dsoOpenItem.emit([...ancestors, item]);\r\n }\r\n };\r\n\r\n private static setFocus(tree: HTMLElement, target: HTMLElement) {\r\n if (target) {\r\n (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[])\r\n .filter((item) => item.tabIndex === 0)\r\n .forEach((item) => (item.tabIndex = -1));\r\n\r\n target.tabIndex = 0;\r\n target.focus();\r\n }\r\n }\r\n\r\n private static moveFocus(tree: HTMLElement, el: HTMLElement, moveTo: \"first\" | \"previous\" | \"next\" | \"last\"): void {\r\n const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n );\r\n\r\n let index = 0;\r\n switch (moveTo) {\r\n case \"first\":\r\n index = 0;\r\n break;\r\n case \"previous\":\r\n index = focusableItems.indexOf(el) - 1;\r\n break;\r\n case \"next\":\r\n index = focusableItems.indexOf(el) + 1;\r\n break;\r\n case \"last\":\r\n index = focusableItems.length - 1;\r\n break;\r\n }\r\n\r\n const focusableItem = focusableItems[index];\r\n if (!focusableItem) {\r\n throw new Error(\"No focusableItem found\");\r\n }\r\n\r\n TreeView.setFocus(tree, focusableItem);\r\n }\r\n\r\n private static expandItemOrFocusChild(tree: HTMLElement, target: HTMLElement): void {\r\n if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n TreeView.moveFocus(tree, target, \"next\");\r\n } else {\r\n const controlElement = target.previousElementSibling?.firstElementChild;\r\n if (controlElement instanceof HTMLElement) {\r\n controlElement.click();\r\n }\r\n }\r\n }\r\n\r\n private static collapseItemOrFocusParent(tree: HTMLElement, target: HTMLElement): void {\r\n if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n const controlElement = target.previousElementSibling?.firstElementChild;\r\n if (controlElement instanceof HTMLElement) {\r\n controlElement.click();\r\n }\r\n } else {\r\n const parentTarget = target?.parentElement?.parentElement?.previousElementSibling;\r\n if (parentTarget instanceof HTMLElement) {\r\n TreeView.setFocus(tree, parentTarget);\r\n }\r\n }\r\n }\r\n\r\n private static setFocusByFirstCharacter(\r\n tree: HTMLElement,\r\n el: HTMLElement,\r\n char: string,\r\n backwards: boolean,\r\n ): boolean {\r\n const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n );\r\n\r\n if (backwards) {\r\n focusableItems.reverse();\r\n }\r\n\r\n const current = focusableItems.indexOf(el);\r\n\r\n char = char.toLowerCase();\r\n let nextItem = focusableItems.find(\r\n (item, index) => index > current && item.textContent?.toLowerCase().startsWith(char),\r\n );\r\n if (!nextItem) {\r\n nextItem = focusableItems.find(\r\n (item, index) => index < current && item.textContent?.toLowerCase().startsWith(char),\r\n );\r\n }\r\n\r\n if (nextItem) {\r\n TreeView.setFocus(tree, nextItem);\r\n return true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n render() {\r\n return (\r\n <div\r\n id=\"tree\"\r\n class=\"dso-tree\"\r\n onKeyDown={(e) => this.keyDownListener(e)}\r\n ref={(element) => (this.tree = element)}\r\n >\r\n <ul role=\"tree\" aria-label=\"Objectenboom\">\r\n {this.collection?.map((item, index) => (\r\n <DsoTreeItem\r\n owner={this}\r\n ancestors={[]}\r\n item={item}\r\n index={index}\r\n level={1}\r\n setSize={this.collection.length}\r\n ></DsoTreeItem>\r\n ))}\r\n </ul>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"mappings":"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"}