@dso-toolkit/core 62.30.1 → 63.0.0

package/dist/dso-toolkit/{p-8939c14f.entry.js → p-fa249c92.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as s,h as t,F as l,f as c,a as o}from"./p-d638c2b0.js";import{c as i}from"./p-8a1a6e56.js";import{c as a}from"./p-97f788d4.js";const d=":host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;inset-inline-end:8px;inset-block-start:8px}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";const n=d;const b=class{constructor(t){e(this,t);this.dsoClose=s(this,"dsoClose",7);this.fixed=undefined;this.active=undefined}render(){return t(l,{key:"e158c18a96603f7d8780074f6efd389050e68d6e"},t("slot",{key:"8c9b01f5643639a5897fc9b8b0b402b972164109"}),!this.fixed&&t("button",{key:"f527a659ee5b1175263e4698f2b5f465c0f8c26a",type:"button",onClick:e=>this.dsoClose.emit(e)},t("dso-icon",{key:"a6759dc5e67f8f10055761eadd80ecd2af03666e",icon:"times"}),t("span",{key:"2e29810fd8e0432f3d45b350c4377d1710513835",class:"sr-only"},"Sluiten")))}};b.style=n;const r='.sc-dso-selectable-h{position:relative;display:var(--dso-selectable-display, block);padding-inline-start:32px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{block-size:24px;inset-inline-start:0;margin:0;opacity:0;position:absolute;inset-block-start:0;inline-size:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-inline-start:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:"";block-size:20px;inset-inline-start:2px;position:absolute;inset-block-start:2px;inline-size:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);block-size:18px;inset-inline-start:3px;inset-block-start:3px;inline-size:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;block-size:22px;inset-inline-start:1px;inset-block-start:1px;inline-size:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:"";inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-block-start-color:transparent;border-width:0 0 3px 3px;block-size:8px;transform:rotate(-45deg);inline-size:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);block-size:12px;inline-size:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:"";block-size:12px;inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;inline-size:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}[invalid].sc-dso-selectable-h:not([invalid=false]){--dso-selectable-color:#ce3f51}.sc-dso-selectable-h:not(:last-child){margin-block-end:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;min-block-size:24px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable:focus-within.dso-keyboard-focus{position:relative;inset-inline-start:-32px;padding-inline-start:32px;margin-inline-end:-32px;border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);block-size:20px;inset-inline-start:2px;inset-block-start:2px;inline-size:20px}';const p=r;const h=class{constructor(t){e(this,t);this.dsoChange=s(this,"dsoChange",7);this.fallbackIdentifier=a("DsoSelectable");this.handleOnChange=e=>{const{target:s}=e;this.dsoChange.emit({originalEvent:e,checked:s instanceof HTMLInputElement&&s.checked});c(this.host)};this.type=undefined;this.identifier=undefined;this.name=undefined;this.value=undefined;this.invalid=undefined;this.describedById=undefined;this.labelledById=undefined;this.disabled=undefined;this.required=undefined;this.checked=undefined;this.indeterminate=undefined;this.infoFixed=undefined;this.infoActive=false;this.keyboardFocus=false}async toggleInfo(e){this.infoActive=e!==null&&e!==void 0?e:!this.infoActive}componentDidLoad(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect();this.mutationObserver=new MutationObserver((()=>c(this.host)));this.mutationObserver.observe(this.host,{childList:true});this.setIndeterminate()}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}setIndeterminate(){if(!(this.input instanceof HTMLInputElement)||this.type!=="checkbox"){return}this.input.indeterminate=!!this.indeterminate}render(){var e;const s=!!this.host.querySelector('[slot="info"]');return t(l,{key:"0cbf9eb4ab6e2d8510f3ca3e3a1fe9f6be1c9f17"},t("div",{key:"bd82b5657d192f3d855183100794b257c0b8bff1",class:"dso-selectable-container"},t("div",{key:"c76c3c223acdf8e7954e7d04ed3fa79044e9d19b",class:i("dso-selectable-input-wrapper",{"dso-keyboard-focus":this.keyboardFocus})},t("input",{key:"7e881b0259bc9a34cf5dcff88af8be2b66ce9f80",type:this.type,id:this.getIdentifier(),value:this.value,name:this.name,"aria-invalid":(e=this.invalid)===null||e===void 0?void 0:e.toString(),"aria-describedby":s&&this.infoFixed?this.describedById:undefined,"aria-labelledBy":this.labelledById,disabled:this.disabled,required:this.required,checked:this.checked,onChange:this.handleOnChange,onBlur:()=>this.keyboardFocus=false,onKeyUp:()=>this.keyboardFocus=true,ref:e=>this.input=e}),!this.labelledById?t("label",{htmlFor:this.getIdentifier()},t("slot",null)):t("label",null,t("slot",null))),s&&!this.infoFixed&&t("dso-info-button",{key:"9c79309fc1e0c73a9ae55722ea0e58bfbca0a63c",active:this.infoActive,onDsoToggle:e=>this.infoActive=e.detail.active})),s&&t("dso-info",{key:"c329819cc92b649483fc4de5f49d683c941ff81f",id:s&&this.infoFixed?this.describedById:undefined,fixed:this.infoFixed,active:this.infoActive,onDsoClose:()=>this.infoActive=false},t("div",{key:"0e0e3c4c78ab6ad828fe2201ec818cc1181bfbea"},t("slot",{key:"83121c8ec4075d1e688b06c306b7ce142399f799",name:"info"}))),t("slot",{key:"53429644d8c03912156f6c3915f5f9b445bd92ce",name:"options"}))}componentDidRender(){if(this.input&&typeof this.checked==="boolean"&&this.input.checked!==this.checked){this.input.checked=this.checked}}getIdentifier(){var e;return(e=this.identifier)!==null&&e!==void 0?e:this.fallbackIdentifier}get host(){return o(this)}static get watchers(){return{indeterminate:["setIndeterminate"]}}};h.style=p;export{b as dso_info,h as dso_selectable};
-//# sourceMappingURL=p-8939c14f.entry.js.map
+import{r as e,c as s,h as t,F as l,f as o,a as c}from"./p-d638c2b0.js";import{c as i}from"./p-8a1a6e56.js";import{c as a}from"./p-97f788d4.js";const d=":host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;inset-inline-end:8px;inset-block-start:8px}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";const b=d;const n=class{constructor(t){e(this,t);this.dsoClose=s(this,"dsoClose",7);this.fixed=undefined;this.active=undefined}render(){return t(l,{key:"e5f657a636b290b194ccbb89b8cd10c361a3addd"},t("slot",{key:"08ff21c78926849c1b0461abfc551f96fd4a769a"}),!this.fixed&&t("button",{key:"5312aa3e0b79e3c46c28b272b1fe2161f3c625a2",type:"button",onClick:e=>this.dsoClose.emit(e)},t("dso-icon",{key:"7473fe06abfd42aa7c39eb97b4ea1b8113e9bfe4",icon:"times"}),t("span",{key:"e5b9d4414e871ff4ec15e18adb6ab819ddcfb0f5",class:"sr-only"},"Sluiten")))}};n.style=b;const r='.sc-dso-selectable-h{position:relative;display:var(--dso-selectable-display, block);padding-inline-start:32px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{block-size:24px;inset-inline-start:0;margin:0;opacity:0;position:absolute;inset-block-start:0;inline-size:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-inline-start:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:"";block-size:20px;inset-inline-start:2px;position:absolute;inset-block-start:2px;inline-size:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);block-size:18px;inset-inline-start:3px;inset-block-start:3px;inline-size:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;block-size:22px;inset-inline-start:1px;inset-block-start:1px;inline-size:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:"";inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-block-start-color:transparent;border-width:0 0 3px 3px;block-size:8px;transform:rotate(-45deg);inline-size:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);block-size:12px;inline-size:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:"";block-size:12px;inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;inline-size:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}[invalid].sc-dso-selectable-h:not([invalid=false]){--dso-selectable-color:#ce3f51}.sc-dso-selectable-h:not(:last-child){margin-block-end:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;min-block-size:24px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable:focus-within.dso-keyboard-focus{position:relative;inset-inline-start:-32px;padding-inline-start:32px;margin-inline-end:-32px;border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);block-size:20px;inset-inline-start:2px;inset-block-start:2px;inline-size:20px}';const p=r;const h=class{constructor(t){e(this,t);this.dsoChange=s(this,"dsoChange",7);this.fallbackIdentifier=a("DsoSelectable");this.handleOnChange=e=>{const{target:s}=e;this.dsoChange.emit({originalEvent:e,checked:s instanceof HTMLInputElement&&s.checked});o(this.host)};this.type=undefined;this.identifier=undefined;this.name=undefined;this.value=undefined;this.invalid=undefined;this.describedById=undefined;this.labelledById=undefined;this.disabled=undefined;this.required=undefined;this.checked=undefined;this.indeterminate=undefined;this.infoFixed=undefined;this.infoActive=false;this.keyboardFocus=false}async toggleInfo(e){this.infoActive=e!==null&&e!==void 0?e:!this.infoActive}componentDidLoad(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect();this.mutationObserver=new MutationObserver((()=>o(this.host)));this.mutationObserver.observe(this.host,{childList:true});this.setIndeterminate()}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}setIndeterminate(){if(!(this.input instanceof HTMLInputElement)||this.type!=="checkbox"){return}this.input.indeterminate=!!this.indeterminate}render(){var e;const s=!!this.host.querySelector('[slot="info"]');return t(l,{key:"91453618df769cca5d2b8b11d0749d27b53f59b1"},t("div",{key:"517f33fff46189d305568f6e68168831a94c0c57",class:"dso-selectable-container"},t("div",{key:"ef669b7497bd52b108d4c877493dbe772d8700a4",class:i("dso-selectable-input-wrapper",{"dso-keyboard-focus":this.keyboardFocus})},t("input",{key:"c6f2aa35044581a2d5f7f43d870ba0ce22424c92",type:this.type,id:this.getIdentifier(),value:this.value,name:this.name,"aria-invalid":(e=this.invalid)===null||e===void 0?void 0:e.toString(),"aria-describedby":s&&this.infoFixed?this.describedById:undefined,"aria-labelledBy":this.labelledById,disabled:this.disabled,required:this.required,checked:this.checked,onChange:this.handleOnChange,onBlur:()=>this.keyboardFocus=false,onKeyUp:()=>this.keyboardFocus=true,ref:e=>this.input=e}),!this.labelledById?t("label",{htmlFor:this.getIdentifier()},t("slot",null)):t("label",null,t("slot",null))),s&&!this.infoFixed&&t("dso-info-button",{key:"b5482b39b6045fcdffb4cd2284f83bd9f554f267",active:this.infoActive,onDsoToggle:e=>this.infoActive=e.detail.active})),s&&t("dso-info",{key:"e66998b45aa63933b73d0c54eeb3ccbae8246bee",id:s&&this.infoFixed?this.describedById:undefined,fixed:this.infoFixed,active:this.infoActive,onDsoClose:()=>this.infoActive=false},t("div",{key:"8b2033a0b23d356be3804632698e687310de6ed7"},t("slot",{key:"411eafba867420af9d581d7af5f35cec59fff133",name:"info"}))),t("slot",{key:"e1d3855d686c4bc6119f65a76d889f5c2d44dcb6",name:"options"}))}componentDidRender(){if(this.input&&typeof this.checked==="boolean"&&this.input.checked!==this.checked){this.input.checked=this.checked}}getIdentifier(){var e;return(e=this.identifier)!==null&&e!==void 0?e:this.fallbackIdentifier}get host(){return c(this)}static get watchers(){return{indeterminate:["setIndeterminate"]}}};h.style=p;export{n as dso_info,h as dso_selectable};
+//# sourceMappingURL=p-fa249c92.entry.js.map

package/dist/dso-toolkit/p-fba55b6b.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as i,F as s,a as t}from"./p-d638c2b0.js";import{c as r}from"./p-8a1a6e56.js";import{d as l}from"./p-9438a55c.js";import{v as a}from"./p-f5ff676c.js";const n=":host{display:inline-block;max-inline-size:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{border-radius:4px;display:inline-block;line-height:1.5;max-inline-size:100%;padding-block:4px;padding-inline:8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:inline-end;font-size:1rem;margin-block-end:-4px;margin-inline-start:8px;margin-inline-end:-4px;margin-block-start:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label{background-color:#f2f2f2;border-color:#f2f2f2;color:#191919}.dso-label.dso-label-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-label.dso-label-danger{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-label.dso-label-error{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;border-color:#fff;color:#191919;outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}.dso-label.dso-compact{padding-block:0;padding-inline:8px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-inline-size:calc(100% - 28px)}";const d=n;const c=new ResizeObserver(l((e=>{e.forEach((({target:e})=>{if(b(e)){e._truncateLabel()}}))}),150));function b(e){return e.tagName==="DSO-LABEL"}function f(e){return e.scrollWidth>e.clientWidth}const h=class{constructor(i){e(this,i);this.dsoRemoveClick=o(this,"dsoRemoveClick",7);this.compact=undefined;this.removable=undefined;this.status=undefined;this.removeHover=undefined;this.removeFocus=undefined;this.truncate=undefined;this.textHover=undefined;this.textFocus=undefined;this.isTruncated=false;this.labelText=""}watchRemovable(e){if(e){this.startMutationObserver()}else{this.stopMutationObserver()}}watchTruncate(e){if(e){this.startTruncate()}else{this.stopTruncate()}}keyDownListener(e){if(e.key==="Escape"){this.textHover=false;this.textFocus=false}}async _truncateLabel(){setTimeout((()=>{this.isTruncated=!!this.labelContent&&f(this.labelContent)}))}syncLabelText(){var e,o;this.labelText=(o=(e=this.host.textContent)===null||e===void 0?void 0:e.trim())!==null&&o!==void 0?o:""}componentDidLoad(){if(this.truncate){this.startTruncate()}if(this.removable){this.startMutationObserver()}}disconnectedCallback(){this.stopTruncate();this.stopMutationObserver(true)}startMutationObserver(){this.mutationObserver=new MutationObserver((()=>this.syncLabelText()));this.mutationObserver.observe(this.host,{characterData:true,childList:true,subtree:true,attributes:true});this.syncLabelText()}stopMutationObserver(e=false){var o;if(e||!(this.truncate&&this.removable)){(o=this.mutationObserver)===null||o===void 0?void 0:o.disconnect();delete this.mutationObserver}}startTruncate(){c.observe(this.host);this.startMutationObserver();this._truncateLabel()}stopTruncate(){c.unobserve(this.host);this.stopMutationObserver();this.isTruncated=false}render(){return i(s,{key:"7d0859b14bf6b8b6bc1f1ea7f6e6428431cc1197"},i("span",{key:"b1c8c1302f21caaaebb0193a171a95e4330b92b8","aria-describedby":"toggle-anchor",class:r("dso-label",{[`dso-label-${this.status}`]:this.status,"dso-compact":this.compact&&!this.removable,"dso-hover":this.removeHover||this.removeFocus})},i("slot",{key:"5f3f5b65b4e4b44949b817800b505c5db1d25275",name:"symbol"}),i("span",{key:"6070e0d015cf2464121cf0dfb0088676ab00628b",class:r("dso-label-content",{"dso-truncate":!!this.truncate}),ref:e=>this.labelContent=e,tabindex:this.truncate&&this.isTruncated?0:undefined,onMouseEnter:()=>this.textHover=true,onMouseLeave:()=>this.textHover=false,onFocus:()=>this.textFocus=true,onBlur:()=>this.textFocus=false},i("slot",{key:"04b20cade12d23246ce7b21e1aae447689e9c1c7"})),this.removable&&i("button",{key:"bb184213b1ca01f83e2a1f265429293f3dda8f3b",type:"button",onClick:e=>this.dsoRemoveClick.emit(e),onMouseEnter:()=>this.removeHover=true,onMouseLeave:()=>this.removeHover=false,onFocus:()=>this.removeFocus=true,onBlur:()=>this.removeFocus=false},i("span",{key:"9805c7dcd105ba5a6a59e75e822250defb107940",class:"sr-only"},"Verwijder: ",this.labelText),i("dso-icon",{key:"19fef3d7fbd4b017cc880bc02fb3408706536933",icon:"times"}))),this.isTruncated&&i("dso-tooltip",{key:"c136e39ed459e5c4680888b2a27bd0c17485406b",stateless:true,id:"toggle-anchor",active:this.textHover||this.textFocus,position:"top",strategy:"absolute"},this.labelText))}get host(){return t(this)}static get watchers(){return{removable:["watchRemovable"],truncate:["watchTruncate"]}}};h.style=d;const u='ins{text-decoration:none;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}ins a:is(.download,.download:hover,.download:focus-visible){background-image:url("./dso-icons.svg#img-download-zwart")}ins a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url("./dso-icons.svg#img-external-link-zwart")}ins a:is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:url("./dso-icons.svg#img-call-zwart")}ins a:is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:url("./dso-icons.svg#img-email-zwart")}del{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919;text-decoration:line-through}del a:is(.download,.download:hover,.download:focus-visible){background-image:url("./dso-icons.svg#img-download-zwart")}del a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url("./dso-icons.svg#img-external-link-zwart")}del a:is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:url("./dso-icons.svg#img-call-zwart")}del a:is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:url("./dso-icons.svg#img-email-zwart")}:host{display:inline}*,*::after,*::before{box-sizing:border-box}';const g=u;const v=class{constructor(o){e(this,o);this.value=undefined}render(){const{value:e}=this;if(typeof e==="string"||!e){return e}if(Array.isArray(e)){return i(s,null,e.map(((e,o,{length:t})=>i(s,null,i("dso-renvooi",{value:e}),o<t-1?", ":""))))}if("toegevoegd"in e){return i("ins",null,e.toegevoegd)}if("verwijderd"in e){return i("del",null,e.verwijderd)}return i(s,null,i("del",null,e.was)," ",i("ins",null,e.wordt))}};v.style=g;const p="button.dso-slider{border:0;padding:0}button.dso-slider:focus-visible{outline:2px solid #323232;outline-offset:1px}button.dso-slider svg rect{fill:#999;transition:fill 0.25s}button.dso-slider svg circle{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:translateX(10px);fill:#fff}button.dso-slider[aria-checked=true] svg rect{fill:#275937}button.dso-slider[aria-checked=true] svg circle{transform:translateX(30px);fill:#fff}button.dso-slider[disabled] svg rect{fill:#ccc}button.dso-slider[disabled] svg circle{fill:#e5e5e5}button.dso-slider[disabled][aria-checked=true] svg rect{fill:#a8bcaf}button.dso-slider[disabled][aria-checked=true] svg circle{fill:#e5e5e5}.dso-slider{border-radius:24px;display:inline-flex}.dso-slider:hover{cursor:pointer}";const k=p;const m=class{constructor(i){e(this,i);this.dsoActiveChange=o(this,"dsoActiveChange",5);this.checked=false;this.disabled=false;this.accessibleLabel=undefined;this.labelledbyId=undefined;this.hasVisibleLabel=undefined;this.identifier=a()}handleSwitch(e){this.dsoActiveChange.emit({originalEvent:e,checked:!this.checked})}componentWillLoad(){this.hasVisibleLabel=this.host.querySelector("*")!==null}render(){return i(s,null,i("button",Object.assign({key:"7ce2d8bf2bb8ba405449eaefc5762cb67a4ac4dc",id:this.identifier,role:"switch",class:"dso-slider","aria-checked":""+this.checked,disabled:this.disabled,onClick:e=>this.handleSwitch(e)},this.accessibleLabel?{"aria-label":this.accessibleLabel}:{},this.labelledbyId?{"aria-labelledby":this.labelledbyId}:{}),i("svg",{key:"12e21116b6fc68e0bf49c53496940bd580e6f10b",xmlns:"http://www.w3.org/2000/svg",width:"40",height:"20",viewBox:"0 0 40 20"},i("g",{key:"aca7818aa5260621fc58279481b312ada6dbddc7",fill:"none","fill-rule":"evenodd"},i("rect",{key:"dfbc32a846cea43c346f10d70076a261db8d5d96",width:"40",height:"20",fill:"currentColor",rx:"10"}),i("circle",{key:"9497b94ec12c7629550c95228fc975c9fdd9520c",cy:"10",r:"8",fill:"currentColor"})))),this.hasVisibleLabel&&i("label",{key:"b5859b19eb2aaddc36b39bb57874f0ae8bf637fc",htmlFor:this.identifier},i("slot",{key:"d98d76eb907c33f5a1bb0427a3fa5d9b2a99b32a"})))}get host(){return t(this)}};m.style=k;export{h as dso_label,v as dso_renvooi,m as dso_slide_toggle};
+//# sourceMappingURL=p-fba55b6b.entry.js.map

package/dist/dso-toolkit/p-fba55b6b.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["labelCss","DsoLabelStyle0","resizeObserver","ResizeObserver","debounce","entries","forEach","target","isDsoLabelComponent","_truncateLabel","element","tagName","hasEllipses","el","scrollWidth","clientWidth","Label","watchRemovable","removable","this","startMutationObserver","stopMutationObserver","watchTruncate","truncate","startTruncate","stopTruncate","keyDownListener","event","key","textHover","textFocus","setTimeout","isTruncated","labelContent","syncLabelText","labelText","_b","_a","host","textContent","trim","componentDidLoad","disconnectedCallback","mutationObserver","MutationObserver","observe","characterData","childList","subtree","attributes","force","disconnect","unobserve","render","h","Fragment","class","clsx","status","compact","removeHover","removeFocus","name","ref","tabindex","undefined","onMouseEnter","onMouseLeave","onFocus","onBlur","type","onClick","e","dsoRemoveClick","emit","icon","stateless","id","active","position","strategy","renvooiCss","DsoRenvooiStyle0","Renvooi","value","Array","isArray","map","v","i","length","toegevoegd","verwijderd","was","wordt","slideToggleCss","DsoSlideToggleStyle0","SlideToggle","v4","handleSwitch","dsoActiveChange","originalEvent","checked","componentWillLoad","hasVisibleLabel","querySelector","Object","assign","identifier","role","disabled","accessibleLabel","labelledbyId","xmlns","width","height","viewBox","fill","rx","cy","r","htmlFor"],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx","src/components/renvooi/renvooi.scss?tag=dso-renvooi&encapsulation=shadow","src/components/renvooi/renvooi.tsx","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n  display: inline-block;\r\n  max-inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n  @include label.root();\r\n\r\n  &.dso-hover {\r\n    .dso-label-content {\r\n      text-decoration: line-through;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n  display: inline-block;\r\n  max-inline-size: 100%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n  vertical-align: bottom;\r\n  white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n  .dso-truncate.dso-label-content {\r\n    max-inline-size: calc(100% - (units.$u3 + 4px));\r\n  }\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce((entries: ResizeObserverEntry[]) => {\r\n    entries.forEach(({ target }) => {\r\n      if (isDsoLabelComponent(target)) {\r\n        target._truncateLabel();\r\n      }\r\n    });\r\n  }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n  return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n  return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-label\",\r\n  styleUrl: \"label.scss\",\r\n  shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n  private labelContent: HTMLSpanElement | undefined;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoLabelElement;\r\n\r\n  /**\r\n   * For compact Label\r\n   */\r\n  @Prop()\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * Shows a button that can be used to remove the Label.\r\n   */\r\n  @Prop()\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * The status of this Label.\r\n   */\r\n  @Prop()\r\n  status?: \"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"error\" | \"bright\" | \"attention\";\r\n\r\n  /**\r\n   * Emitted when the user activates the remove button.\r\n   */\r\n  @Event()\r\n  dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n  @State()\r\n  removeHover?: boolean;\r\n\r\n  @State()\r\n  removeFocus?: boolean;\r\n\r\n  /**\r\n   * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n   */\r\n  @Prop()\r\n  truncate?: boolean;\r\n\r\n  @State()\r\n  textHover?: boolean;\r\n\r\n  @State()\r\n  textFocus?: boolean;\r\n\r\n  @State()\r\n  isTruncated = false;\r\n\r\n  @State()\r\n  labelText = \"\";\r\n\r\n  @Watch(\"removable\")\r\n  watchRemovable(removable: boolean) {\r\n    if (removable) {\r\n      this.startMutationObserver();\r\n    } else {\r\n      this.stopMutationObserver();\r\n    }\r\n  }\r\n\r\n  @Watch(\"truncate\")\r\n  watchTruncate(truncate: boolean) {\r\n    if (truncate) {\r\n      this.startTruncate();\r\n    } else {\r\n      this.stopTruncate();\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"document\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.key === \"Escape\") {\r\n      this.textHover = false;\r\n      this.textFocus = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _truncateLabel() {\r\n    setTimeout(() => {\r\n      this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n    });\r\n  }\r\n\r\n  private syncLabelText() {\r\n    this.labelText = this.host.textContent?.trim() ?? \"\";\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.truncate) {\r\n      this.startTruncate();\r\n    }\r\n\r\n    if (this.removable) {\r\n      this.startMutationObserver();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.stopTruncate();\r\n\r\n    this.stopMutationObserver(true);\r\n  }\r\n\r\n  /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n  private startMutationObserver(): void {\r\n    this.mutationObserver = new MutationObserver(() => this.syncLabelText());\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    this.syncLabelText();\r\n  }\r\n\r\n  private stopMutationObserver(force = false): void {\r\n    if (force || !(this.truncate && this.removable)) {\r\n      this.mutationObserver?.disconnect();\r\n\r\n      delete this.mutationObserver;\r\n    }\r\n  }\r\n\r\n  private startTruncate(): void {\r\n    resizeObserver.observe(this.host);\r\n    this.startMutationObserver();\r\n    this._truncateLabel();\r\n  }\r\n\r\n  private stopTruncate(): void {\r\n    resizeObserver.unobserve(this.host);\r\n    this.stopMutationObserver();\r\n    this.isTruncated = false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <span\r\n          aria-describedby=\"toggle-anchor\"\r\n          class={clsx(\"dso-label\", {\r\n            [`dso-label-${this.status}`]: this.status,\r\n            \"dso-compact\": this.compact && !this.removable,\r\n            \"dso-hover\": this.removeHover || this.removeFocus,\r\n          })}\r\n        >\r\n          <slot name=\"symbol\"></slot>\r\n          <span\r\n            class={clsx(\"dso-label-content\", {\r\n              \"dso-truncate\": !!this.truncate,\r\n            })}\r\n            ref={(element) => (this.labelContent = element)}\r\n            tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n            onMouseEnter={() => (this.textHover = true)}\r\n            onMouseLeave={() => (this.textHover = false)}\r\n            onFocus={() => (this.textFocus = true)}\r\n            onBlur={() => (this.textFocus = false)}\r\n          >\r\n            <slot></slot>\r\n          </span>\r\n          {this.removable && (\r\n            <button\r\n              type=\"button\"\r\n              onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n              onMouseEnter={() => (this.removeHover = true)}\r\n              onMouseLeave={() => (this.removeHover = false)}\r\n              onFocus={() => (this.removeFocus = true)}\r\n              onBlur={() => (this.removeFocus = false)}\r\n            >\r\n              <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          )}\r\n        </span>\r\n        {this.isTruncated && (\r\n          <dso-tooltip\r\n            stateless\r\n            id=\"toggle-anchor\"\r\n            active={this.textHover || this.textFocus}\r\n            position=\"top\"\r\n            strategy=\"absolute\"\r\n          >\r\n            {this.labelText}\r\n          </dso-tooltip>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n\r\n:host {\r\n  display: inline;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n","import { Component, ComponentInterface, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\n/**\r\n * Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n */\r\n@Component({\r\n  tag: \"dso-renvooi\",\r\n  styleUrl: \"renvooi.scss\",\r\n  shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n  /**\r\n   * The renvooi value to render.\r\n   */\r\n  @Prop()\r\n  value?: RenvooiValue | RenvooiValue[];\r\n\r\n  render() {\r\n    const { value } = this;\r\n\r\n    if (typeof value === \"string\" || !value) {\r\n      return value;\r\n    }\r\n\r\n    if (Array.isArray(value)) {\r\n      return (\r\n        <>\r\n          {value.map((v, i, { length }) => (\r\n            <>\r\n              <dso-renvooi value={v} />\r\n              {i < length - 1 ? \", \" : \"\"}\r\n            </>\r\n          ))}\r\n        </>\r\n      );\r\n    }\r\n\r\n    if (\"toegevoegd\" in value) {\r\n      return <ins>{value.toegevoegd}</ins>;\r\n    }\r\n\r\n    if (\"verwijderd\" in value) {\r\n      return <del>{value.verwijderd}</del>;\r\n    }\r\n\r\n    return (\r\n      <>\r\n        <del>{value.was}</del> <ins>{value.wordt}</ins>\r\n      </>\r\n    );\r\n  }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\nbutton.dso-slider {\r\n  border: 0;\r\n  padding: 0;\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid colors.$grijs-80;\r\n    outline-offset: 1px;\r\n  }\r\n\r\n  svg {\r\n    rect {\r\n      fill: colors.$grijs-40;\r\n      transition: fill 0.25s;\r\n    }\r\n\r\n    circle {\r\n      @include utilities.transition(transform);\r\n\r\n      transform: translateX(10px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen;\r\n    }\r\n\r\n    circle {\r\n      transform: translateX(30px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[disabled] svg {\r\n    rect {\r\n      fill: colors.$grijs-20;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n\r\n  &[disabled][aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen-40;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-slider {\r\n  border-radius: units.$u3;\r\n  display: inline-flex;\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Event, Fragment, Prop, EventEmitter, Element, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-slide-toggle\",\r\n  styleUrl: \"slide-toggle.scss\",\r\n  shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoSlideToggleElement;\r\n\r\n  /**\r\n   * Set to true if Slide Toggle is checked.\r\n   */\r\n  @Prop()\r\n  checked = false;\r\n\r\n  /**\r\n   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n   */\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  /**\r\n   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n   */\r\n  @Prop()\r\n  accessibleLabel?: string;\r\n\r\n  /**\r\n   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n   */\r\n  @Prop()\r\n  labelledbyId?: string;\r\n\r\n  @State()\r\n  hasVisibleLabel?: boolean;\r\n\r\n  /**\r\n   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n   */\r\n  @Prop()\r\n  identifier = v4();\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event({ composed: false })\r\n  dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n  private handleSwitch(e: Event): void {\r\n    this.dsoActiveChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          id={this.identifier}\r\n          role=\"switch\"\r\n          class=\"dso-slider\"\r\n          aria-checked={\"\" + this.checked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => this.handleSwitch(e)}\r\n          {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n          {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n              <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n              <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n        {this.hasVisibleLabel && (\r\n          <label htmlFor={this.identifier}>\r\n            <slot />\r\n          </label>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/{p-9ee33188.entry.js → p-feedd113.entry.js}

@@ -1,2 +1,2 @@
-import{r as n,c as o,h as l,F as e}from"./p-d638c2b0.js";import{i as a}from"./p-2d694112.js";const r=':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-block: 0;\n  padding-inline: 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 t=r;const i=()=>l(e,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 s=class{constructor(l){n(this,l);this.dsoLogoClick=o(this,"dsoLogoClick",7);this.dsoLabelClick=o(this,"dsoLabelClick",7);this.handleLogoClick=n=>{this.dsoLogoClick.emit({originalEvent:n,url:this.logoUrl,isModifiedEvent:a(n)})};this.handleLabelClick=n=>{this.dsoLabelClick.emit({originalEvent:n,url:this.labelUrl,isModifiedEvent:a(n)})};this.logoUrl=undefined;this.label=undefined;this.labelUrl=undefined;this.ribbon=undefined}render(){return l(e,null,this.logoUrl?l("a",{class:"logo-url",href:this.logoUrl,onClick:this.handleLogoClick},l(i,null)):l(i,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:"7c666a7a3881ff302c28a43afe3ecacb3d3a238a",class:"logo-ribbon"},this.ribbon))}};s.style=t;export{s as dso_logo};
-//# sourceMappingURL=p-9ee33188.entry.js.map
+import{r as n,c as o,h as l,F as e}from"./p-d638c2b0.js";import{i as r}from"./p-2d694112.js";const a=':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-block: 0;\n  padding-inline: 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 t=a;const i=()=>l(e,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 s=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,null,this.logoUrl?l("a",{class:"logo-url",href:this.logoUrl,onClick:this.handleLogoClick},l(i,null)):l(i,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:"5f99258c907bac9a3b9de9b194c860986947faa9",class:"logo-ribbon"},this.ribbon))}};s.style=t;export{s as dso_logo};
+//# sourceMappingURL=p-feedd113.entry.js.map

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

@@ -132,7 +132,7 @@ const AccordionSection = class {
             return;
         }
         // this y is relative to the top of the viewport.
-        const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? bodyHeight !== null && bodyHeight !== void 0 ? bodyHeight : 0 : 0);
+        const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? (bodyHeight !== null && bodyHeight !== void 0 ? bodyHeight : 0) : 0);
         log(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(sectionBottomY)};`);
         log(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);
         const box = this.host.getBoundingClientRect();
@@ -166,12 +166,12 @@ const AccordionSection = class {
         var _a;
         const { variant, reverseAlign } = (_a = this.accordionState) !== null && _a !== void 0 ? _a : {};
         const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;
-        return (h(Host, { key: '3133dd0868b0211136909091e056cfb54568482e', class: {
+        return (h(Host, { key: 'cedbfd0ed4efae10ec0418ba0f3e50b2343ce0bc', class: {
                 "dso-accordion-section": true,
                 ["dso-accordion-" + variant]: true,
                 "dso-nested-accordion": this.hasNestedAccordion || this.containsNestedAccordion,
                 "dso-accordion-reverse-align": reverseAlign !== null && reverseAlign !== void 0 ? reverseAlign : false,
-            }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h(Handle, { key: '54eb91544a496d8458693f30dac296ac93643437', heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { key: '7d5d7221bba4f19532863ed1e87dd85e297b6101', handleUrl: this.handleUrl, onClick: this.handleClick, open: this.open, handleElementRef: (e) => (this.handleElementRef = e) }, reverseAlign ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("span", null, this.handleTitle), this.badgeMessage && h("dso-badge", { status: this.badgeStatus }, this.badgeMessage), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.status && h("span", { class: "sr-only" }, stateMap[this.status]), h("span", null, this.handleTitle, this.isNeutral && (h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), this.badgeMessage && h("dso-badge", { status: this.badgeStatus }, this.badgeMessage), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("dso-expandable", { key: '77b23a787bfa12a62b10793207ccfe002fdf75c4', class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationStart: this.handleExpandableAnimationStart, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, h("div", { key: 'dbf0bdeabdd88dc27ccd1c840c5629ce96b7d1f6', class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, h("slot", { key: '1c3bed92ff7ff6c910c311007a0126aed85660d7' })))));
+            }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h(Handle, { key: '952f78cd7db8c27a539c8bf3b4193d28dd63e2a3', heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { key: '15117645c43dd45122a1e80f60be195b7c165647', handleUrl: this.handleUrl, onClick: this.handleClick, open: this.open, handleElementRef: (e) => (this.handleElementRef = e) }, reverseAlign ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("span", null, this.handleTitle), this.badgeMessage && h("dso-badge", { status: this.badgeStatus }, this.badgeMessage), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.status && h("span", { class: "sr-only" }, stateMap[this.status]), h("span", null, this.handleTitle, this.isNeutral && (h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), this.badgeMessage && h("dso-badge", { status: this.badgeStatus }, this.badgeMessage), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("dso-expandable", { key: '7f0a47230d62ac3d184e368af632fa9088cc8cf5', class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationStart: this.handleExpandableAnimationStart, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, h("div", { key: 'be1b3953f535ff6d3760ed6733f3d71a72331db2', class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, h("slot", { key: '7a0959fe309bd08872e5ad83548e7ca0ab24a2df' })))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-accordion-section.entry.js.map

@@ -1 +1 @@
-{"file":"dso-accordion-section.entry.js","mappings":"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","names":[],"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-block: accordion.$block-padding;\r\n    padding-inline: accordion.$inline-padding;\r\n    text-align: start;\r\n    inline-size: 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-inline-end: units.$u1;\r\n    }\r\n\r\n    > dso-icon:last-child {\r\n      margin-inline-start: auto;\r\n    }\r\n\r\n    > .dso-section-handle-addons:last-child {\r\n      margin-inline-start: auto;\r\n\r\n      dso-attachments-counter,\r\n      dso-icon {\r\n        margin-inline-start: units.$u2;\r\n      }\r\n    }\r\n\r\n    > dso-badge {\r\n      margin-inline-start: auto;\r\n      padding-inline-start: units.$u1;\r\n      word-break: normal;\r\n\r\n      & + dso-icon:last-child,\r\n      & + .dso-section-handle-addons:last-child {\r\n        margin-inline-start: units.$u1;\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-block-start: 0;\r\n  margin-block-start: accordion.$border-radius * -1;\r\n\r\n  .dso-section-body-content {\r\n    padding-block: units.$u2 + accordion.$border-radius units.$u2;\r\n    padding-inline: 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\nimport { BadgeStatus } from \"../../badge/badge.interfaces\";\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   * A message to be displayed in the heading handle inside a Badge (optional)\r\n   */\r\n  @Prop()\r\n  badgeMessage?: string;\r\n\r\n  /**\r\n   * The status of the Badge in the heading handle (optional)\r\n   */\r\n  @Prop()\r\n  badgeStatus?: BadgeStatus;\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                {this.badgeMessage && <dso-badge status={this.badgeStatus}>{this.badgeMessage}</dso-badge>}\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                {this.badgeMessage && <dso-badge status={this.badgeStatus}>{this.badgeMessage}</dso-badge>}\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"],"version":3}
+{"file":"dso-accordion-section.entry.js","mappings":"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","names":[],"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-block: accordion.$block-padding;\r\n    padding-inline: accordion.$inline-padding;\r\n    text-align: start;\r\n    inline-size: 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-inline-end: units.$u1;\r\n    }\r\n\r\n    > dso-icon:last-child {\r\n      margin-inline-start: auto;\r\n    }\r\n\r\n    > .dso-section-handle-addons:last-child {\r\n      margin-inline-start: auto;\r\n\r\n      dso-attachments-counter,\r\n      dso-icon {\r\n        margin-inline-start: units.$u2;\r\n      }\r\n    }\r\n\r\n    > dso-badge {\r\n      margin-inline-start: auto;\r\n      padding-inline-start: units.$u1;\r\n      word-break: normal;\r\n\r\n      & + dso-icon:last-child,\r\n      & + .dso-section-handle-addons:last-child {\r\n        margin-inline-start: units.$u1;\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-block-start: 0;\r\n  margin-block-start: accordion.$border-radius * -1;\r\n\r\n  .dso-section-body-content {\r\n    padding-block: units.$u2 + accordion.$border-radius units.$u2;\r\n    padding-inline: 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\nimport { BadgeStatus } from \"../../badge/badge.interfaces\";\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   * A message to be displayed in the heading handle inside a Badge (optional)\r\n   */\r\n  @Prop()\r\n  badgeMessage?: string;\r\n\r\n  /**\r\n   * The status of the Badge in the heading handle (optional)\r\n   */\r\n  @Prop()\r\n  badgeStatus?: BadgeStatus;\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                {this.badgeMessage && <dso-badge status={this.badgeStatus}>{this.badgeMessage}</dso-badge>}\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                {this.badgeMessage && <dso-badge status={this.badgeStatus}>{this.badgeMessage}</dso-badge>}\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"],"version":3}

package/dist/esm/dso-accordion.entry.js

@@ -219,7 +219,7 @@ const Accordion = class {
         this.accordionState = state;
     }
     render() {
-        return (h(Host, { key: 'b15aa4c4b93922e2416f82ce24cadf8e7116d70b', class: "dso-accordion" }, h("slot", { key: '84f62dd6f77fc6418278aed71d9f42eefecbe42c' })));
+        return (h(Host, { key: '131dd3150b68be36ddc1c4c70f04368fea5367f1', class: "dso-accordion" }, h("slot", { key: 'eb99004ed2c6f09e350b52cb0ad00dcb1826bdcf' })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/dso-action-list-item.entry.js

@@ -13,10 +13,10 @@ const ActionListItem = class {
         this.divider = false;
     }
     render() {
-        return (h(Host, { key: '0e0564d96c59c2c5eeaca5e6ee45ed971f03de8f', class: {
+        return (h(Host, { key: 'a694a6b4796fe890be89948bfa4b32551601a523', class: {
                 divider: this.divider,
                 "flow-line": this.flowLine,
-            } }, h("div", { key: 'c79d2842dbc69454dfa625840742257cf13ede2a', class: "dso-action-list-item" }, this.warning ? h("dso-icon", { icon: "status-warning" }) : h("div", { class: "dso-step-counter" }, this.step), h("div", { key: '857ebcbc0287c99b59c83a7582d5ac535f0323f2', class: "action-list-item-content" }, this.itemTitle && h("h3", { key: '14631efd1e202ae014e835e4d624a6ecadcc3650' }, this.itemTitle), h("slot", { key: 'bc16fb1dd0f7f02b0a594756790eb95076e09950' })))));
+            } }, h("div", { key: '4fc4186ff650df724b96ea008e165809cfac73be', class: "dso-action-list-item" }, this.warning ? h("dso-icon", { icon: "status-warning" }) : h("div", { class: "dso-step-counter" }, this.step), h("div", { key: '1ab7156ebbbdc2593fe73024d960c0807e1fd579', class: "action-list-item-content" }, this.itemTitle && h("h3", { key: '02a6d517ae8a1817246ea178c4fa8dbcd699f3e1' }, this.itemTitle), h("slot", { key: '9f81a101ee2a126df0955fee2cac9a06f5e84560' })))));
     }
 };
 ActionListItem.style = DsoActionListItemStyle0;

package/dist/esm/dso-action-list.entry.js

@@ -9,7 +9,7 @@ const ActionList = class {
         this.listTitle = undefined;
     }
     render() {
-        return (h(Host, { key: '92c5b4fb4d10541ded9dc45da37e20d67fbf3361' }, h("h2", { key: 'd4cffb771949ce42047c5f7539820a91697bcbe8' }, this.listTitle), h("div", { key: '2e90dd6b0f73447fbac79f604d35007e7b70bdcb', class: "dso-action-list-content" }, h("slot", { key: '8a1f73818b59e8d863be019eb47b47c45b25b94b' }))));
+        return (h(Host, { key: '1863dac06435fbfa6422a48f8109cfefaa06dcb5' }, h("h2", { key: '8b7edefe67ad62cf78e1d6b9ab02b7ed917e6766' }, this.listTitle), h("div", { key: '4cdbf73a61127fe8430157012b94f6f1a45380d5', class: "dso-action-list-content" }, h("slot", { key: '703e3a3abda8ca77f893bbf2fbbf747d8ea71b4a' }))));
     }
 };
 ActionList.style = DsoActionListStyle0;

package/dist/esm/dso-advanced-select.entry.js

@@ -79,12 +79,12 @@ const AdvancedSelect = class {
     }
     render() {
         var _a, _b;
-        return (h(Fragment, null, h("button", { key: '863c76d960af3d1c91e2920f9e7640acf1fcb8de', "aria-expanded": this.open.toString(), class: clsx(["active-option", { open: this.open }]), type: "button", onClick: this.toggleOpen, ref: (element) => (this.toggleButtonElementRef = element) }, h(ActiveGroupLabel, { key: '0165cc3fc03367aedda4e9a6e49ed76818bc9d7c', active: this.active, options: this.options }), h("span", { key: '624790ab9fefdfff15247e6e0964afa22580b8da', class: "active-option-label" }, (_b = (_a = this.active) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "Selecteer een optie"), h("span", { key: '1ecb6f4ed7ebea267fa0cf99b649c7ff4ae480d8', class: "active-option-aside" }, this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && (optionOrGroup === null || optionOrGroup === void 0 ? void 0 : optionOrGroup.summaryCounter)) && (h("span", { key: 'dbc4278fd89412fb098d9e7c360a2f4ac58cafd6', class: "badges" }, this.options
+        return (h(Fragment, null, h("button", { key: '443309104a25a8fabd949377c74383027450f404', "aria-expanded": this.open.toString(), class: clsx(["active-option", { open: this.open }]), type: "button", onClick: this.toggleOpen, ref: (element) => (this.toggleButtonElementRef = element) }, h(ActiveGroupLabel, { key: 'e0f34941cabe1232ecf224d35f951f2fcb7affc7', active: this.active, options: this.options }), h("span", { key: 'b1d4dfadfb02c8beaa6e8553be863abf6fa50c4f', class: "active-option-label" }, (_b = (_a = this.active) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "Selecteer een optie"), h("span", { key: '29dc80cc20ebc9393119bd2e0251420099d8ac88', class: "active-option-aside" }, this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && (optionOrGroup === null || optionOrGroup === void 0 ? void 0 : optionOrGroup.summaryCounter)) && (h("span", { key: '08a59c09ec06900c761e44ce223c317414e401bf', class: "badges" }, this.options
             .filter((option) => "options" in option && "summaryCounter" in option && !!(option === null || option === void 0 ? void 0 : option.summaryCounter))
             .map((group) => {
             var _a;
             return (h("dso-badge", { status: (_a = group.variant) !== null && _a !== void 0 ? _a : "outline" }, group.options.length));
-        }))), h("dso-icon", { key: '892afcf018935d842562288b5219902044bf0b3f', icon: "caret-down" }))), this.open && (h("div", { key: '81651c248319f8fa5281d30cb90ff228d2b6c8cd', class: "groups-container" }, h("ul", { key: '9776c7284681eee6ad5128c4558872db7eda894a', class: "groups" }, this.options.map((optionOrGroup) => ("options" in optionOrGroup && (h("li", { class: clsx(["group", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }]) }, h("p", { class: "group-label" }, optionOrGroup.label), h("ul", { class: "options" }, optionOrGroup.options.map((option) => (h("li", null, h(OptionButton, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))), optionOrGroup.redirect && (h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) ||
+        }))), h("dso-icon", { key: '06549ae93243ab2a9b0a36e397ef0808e90973f5', icon: "caret-down" }))), this.open && (h("div", { key: '9f7e0cb989feb1167d8b0bce0f2c3a9c371811b8', class: "groups-container" }, h("ul", { key: 'bd98ccdbe135d9145f8d1c41c3bf362030e37e26', class: "groups" }, this.options.map((optionOrGroup) => ("options" in optionOrGroup && (h("li", { class: clsx(["group", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }]) }, h("p", { class: "group-label" }, optionOrGroup.label), h("ul", { class: "options" }, optionOrGroup.options.map((option) => (h("li", null, h(OptionButton, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))), optionOrGroup.redirect && (h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) ||
             ("placeholder" in optionOrGroup && (h("li", { class: "group" }, h("p", { class: "group-label" }, optionOrGroup.label), h("p", { class: "placeholder" }, optionOrGroup.placeholder), optionOrGroup.redirect && (h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) || (h("li", null, h(OptionButton, { option: optionOrGroup, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick })))))))));
     }
     get host() { return getElement(this); }