@dso-toolkit/core 63.0.0 → 65.0.0

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

@@ -0,0 +1,2 @@
+import{r as o,c as e,h as r}from"./p-b623c74b.js";import{A as i}from"./p-ae8b8810.js";import{i as a}from"./p-2d694112.js";const t='a{background-color:transparent;color:var(--link-color);text-decoration:underline}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:1.5em;background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:url("./dso-icons.svg#img-download")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:url("./dso-icons.svg#img-download-scampi")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:1.5em;background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:url("./dso-icons.svg#img-external-link")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:url("./dso-icons.svg#img-external-link-scampi")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:1.5em;background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-image:url("./dso-icons.svg#img-call-grasgroen")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:url("./dso-icons.svg#img-call-scampi")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:1.5em;background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-image:url("./dso-icons.svg#img-email-grasgroen")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:url("./dso-icons.svg#img-email-scampi")}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}:host([wijzigactie=voegtoe]) a:is(.download,.download:hover,.download:focus-visible){background-image:url("./dso-icons.svg#img-download-zwart")}:host([wijzigactie=voegtoe]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url("./dso-icons.svg#img-external-link-zwart")}:host([wijzigactie=voegtoe]) a:is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:url("./dso-icons.svg#img-call-zwart")}:host([wijzigactie=voegtoe]) a:is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:url("./dso-icons.svg#img-email-zwart")}:host([wijzigactie=voegtoe]){box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}:host([wijzigactie=verwijder]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host([wijzigactie=verwijder]) a:is(.download,.download:hover,.download:focus-visible){background-image:url("./dso-icons.svg#img-download-zwart")}:host([wijzigactie=verwijder]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url("./dso-icons.svg#img-external-link-zwart")}:host([wijzigactie=verwijder]) a:is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:url("./dso-icons.svg#img-call-zwart")}:host([wijzigactie=verwijder]) a:is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:url("./dso-icons.svg#img-email-zwart")}:host([wijzigactie=verwijder]){text-decoration:line-through}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}';const n=t;const s=class{constructor(r){o(this,r);this.dsoClick=e(this,"dsoClick",3);this.clickHandler=o=>{if(!this.href){return}this.dsoClick.emit({href:this.href,originalEvent:o,isModifiedEvent:a(o)})};this.wijzigactie=undefined;this.naam=undefined;this.href=undefined}render(){const o=this.href?r("a",{class:"content",href:this.href,onClick:this.clickHandler},r("dso-renvooi",{value:this.naam})):r("span",{class:"content"},r("dso-renvooi",{value:this.naam}));return r(i,{key:"13790a8ac017fe49686a883e7c847480635d086d",symbol:r("dso-icon",{icon:"land"}),title:o})}};s.style=n;export{s as dso_annotation_kaart};
+//# sourceMappingURL=p-e283ee51.entry.js.map

package/dist/dso-toolkit/{p-c8518aab.entry.js.map → p-e283ee51.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["annotationCss","DsoAnnotationKaartStyle0","AnnotationKaart","this","clickHandler","e","href","dsoClick","emit","originalEvent","isModifiedEvent","render","title","h","class","onClick","value","naam","AnnotationBody","key","symbol","icon"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-kaart&encapsulation=shadow","src/components/annotation/annotation-kaart/annotation-kaart.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor/anchor\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Prop, h, Event, EventEmitter } from \"@stencil/core\";\r\nimport { AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationKaartClickEvent } from \"./annotation-kaart.interfaces\";\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-annotation-kaart\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationKaart implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie is toegevoegd of verwijderd.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * De naam van de kaart.\r\n   */\r\n  @Prop()\r\n  naam?: RenvooiValue | string;\r\n\r\n  /**\r\n   * De url naar de kaart.\r\n   *\r\n   * Gebruik het event `dsoClick` om de navigatie aan de router te koppelen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href?: string;\r\n\r\n  /**\r\n   * Event als de gebruiker de kaartnaam selecteert.\r\n   *\r\n   * Let op \"isModifiedEvent\" om te bepalen of de navigatieactie door de router of de browser moet worden afgehandeld.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<AnnotationKaartClickEvent>;\r\n\r\n  private clickHandler = (e: MouseEvent): void => {\r\n    if (!this.href) {\r\n      return;\r\n    }\r\n\r\n    this.dsoClick.emit({\r\n      href: this.href,\r\n      originalEvent: e,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  };\r\n\r\n  render() {\r\n    const title = this.href ? (\r\n      <a class=\"content\" href={this.href} onClick={this.clickHandler}>\r\n        <dso-renvooi value={this.naam} />\r\n      </a>\r\n    ) : (\r\n      <span class=\"content\">\r\n        <dso-renvooi value={this.naam} />\r\n      </span>\r\n    );\r\n\r\n    return <AnnotationBody symbol={<dso-icon icon=\"land\" />} title={title} />;\r\n  }\r\n}\r\n"],"mappings":"0HAAA,MAAMA,EAAgB,6kIACtB,MAAAC,EAAeD,E,MCYFE,EAAe,M,4DA6BlBC,KAAAC,aAAgBC,IACtB,IAAKF,KAAKG,KAAM,CACd,M,CAGFH,KAAKI,SAASC,KAAK,CACjBF,KAAMH,KAAKG,KACXG,cAAeJ,EACfK,gBAAiBA,EAAgBL,IACjC,E,mEAGJ,MAAAM,GACE,MAAMC,EAAQT,KAAKG,KACjBO,EAAA,KAAGC,MAAM,UAAUR,KAAMH,KAAKG,KAAMS,QAASZ,KAAKC,cAChDS,EAAA,eAAaG,MAAOb,KAAKc,QAG3BJ,EAAA,QAAMC,MAAM,WACVD,EAAA,eAAaG,MAAOb,KAAKc,QAI7B,OAAOJ,EAACK,EAAc,CAAAC,IAAA,2CAACC,OAAQP,EAAA,YAAUQ,KAAK,SAAWT,MAAOA,G","ignoreList":[]}
+{"version":3,"names":["annotationCss","DsoAnnotationKaartStyle0","AnnotationKaart","this","clickHandler","e","href","dsoClick","emit","originalEvent","isModifiedEvent","render","title","h","class","onClick","value","naam","AnnotationBody","key","symbol","icon"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-kaart&encapsulation=shadow","src/components/annotation/annotation-kaart/annotation-kaart.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor/anchor\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Prop, h, Event, EventEmitter } from \"@stencil/core\";\r\nimport { AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationKaartClickEvent } from \"./annotation-kaart.interfaces\";\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-annotation-kaart\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationKaart implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie is toegevoegd of verwijderd.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * De naam van de kaart.\r\n   */\r\n  @Prop()\r\n  naam?: RenvooiValue | string;\r\n\r\n  /**\r\n   * De url naar de kaart.\r\n   *\r\n   * Gebruik het event `dsoClick` om de navigatie aan de router te koppelen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href?: string;\r\n\r\n  /**\r\n   * Event als de gebruiker de kaartnaam selecteert.\r\n   *\r\n   * Let op \"isModifiedEvent\" om te bepalen of de navigatieactie door de router of de browser moet worden afgehandeld.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<AnnotationKaartClickEvent>;\r\n\r\n  private clickHandler = (e: MouseEvent): void => {\r\n    if (!this.href) {\r\n      return;\r\n    }\r\n\r\n    this.dsoClick.emit({\r\n      href: this.href,\r\n      originalEvent: e,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  };\r\n\r\n  render() {\r\n    const title = this.href ? (\r\n      <a class=\"content\" href={this.href} onClick={this.clickHandler}>\r\n        <dso-renvooi value={this.naam} />\r\n      </a>\r\n    ) : (\r\n      <span class=\"content\">\r\n        <dso-renvooi value={this.naam} />\r\n      </span>\r\n    );\r\n\r\n    return <AnnotationBody symbol={<dso-icon icon=\"land\" />} title={title} />;\r\n  }\r\n}\r\n"],"mappings":"0HAAA,MAAMA,EAAgB,45IACtB,MAAAC,EAAeD,E,MCYFE,EAAe,M,4DA6BlBC,KAAAC,aAAgBC,IACtB,IAAKF,KAAKG,KAAM,CACd,M,CAGFH,KAAKI,SAASC,KAAK,CACjBF,KAAMH,KAAKG,KACXG,cAAeJ,EACfK,gBAAiBA,EAAgBL,IACjC,E,mEAGJ,MAAAM,GACE,MAAMC,EAAQT,KAAKG,KACjBO,EAAA,KAAGC,MAAM,UAAUR,KAAMH,KAAKG,KAAMS,QAASZ,KAAKC,cAChDS,EAAA,eAAaG,MAAOb,KAAKc,QAG3BJ,EAAA,QAAMC,MAAM,WACVD,EAAA,eAAaG,MAAOb,KAAKc,QAI7B,OAAOJ,EAACK,EAAc,CAAAC,IAAA,2CAACC,OAAQP,EAAA,YAAUQ,KAAK,SAAWT,MAAOA,G","ignoreList":[]}

package/dist/dso-toolkit/{p-c5678d6e.entry.js → p-e4eed4a2.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as i,F as s,a as e}from"./p-d638c2b0.js";const o="*,*::after,*::before{box-sizing:border-box}:host{display:inline-block;--tooltip-margin-block-start:0;--tooltip-margin-inline-start:3px;--tooltip-margin-inline-end:units.$u1 * -1 !important}:host(:focus){outline:none;z-index:410}";const h=o;const n=class{constructor(i){t(this,i);this.click=()=>{if(this.active){this.close()}else{this.open()}};this.open=()=>{this.active=true;this.host.addEventListener("keydown",this.keyDownListener);this.host.addEventListener("focusout",this.focusOutListener)};this.close=()=>{this.host.removeEventListener("focusout",this.focusOutListener);this.host.removeEventListener("keydown",this.keyDownListener);this.active=false};this.focusOutListener=t=>{if(!this.host.contains(t.relatedTarget)){this.close()}};this.keyDownListener=t=>{var i;if(!t.defaultPrevented&&t.key==="Escape"){this.close();(i=this.infoButton)===null||i===void 0?void 0:i.setFocus();t.preventDefault()}return};this.active=false;this.label="Toelichting";this.position="right";this.small=undefined;this.secondary=undefined}render(){return i(s,null,i("dso-info-button",{key:"3304cffaef15d2628de0d345889ba52dbf60514a","aria-describedby":"toggle",onClick:this.click,label:this.label,active:this.active,secondary:this.secondary,ref:t=>this.infoButton=t}),i("dso-tooltip",{key:"4d120364ab6288ded65ea048f7dd7ec18b4f16e0",stateless:true,descriptive:true,id:"toggle",strategy:"absolute",active:this.active,position:this.position,small:this.small},i("slot",{key:"ab233a002b03fa23345df374366d2ba8f08b2b63"})))}get host(){return e(this)}};n.style=h;export{n as dso_toggletip};
-//# sourceMappingURL=p-c5678d6e.entry.js.map
+import{r as t,h as i,F as s,a as e}from"./p-b623c74b.js";const o="*,*::after,*::before{box-sizing:border-box}:host{display:inline-block;--tooltip-margin-block-start:0;--tooltip-margin-inline-start:3px;--tooltip-margin-inline-end:units.$u1 * -1 !important}:host(:focus){outline:none;z-index:410}";const h=o;const n=class{constructor(i){t(this,i);this.click=()=>{if(this.active){this.close()}else{this.open()}};this.open=()=>{this.active=true;this.host.addEventListener("keydown",this.keyDownListener);this.host.addEventListener("focusout",this.focusOutListener)};this.close=()=>{this.host.removeEventListener("focusout",this.focusOutListener);this.host.removeEventListener("keydown",this.keyDownListener);this.active=false};this.focusOutListener=t=>{if(!this.host.contains(t.relatedTarget)){this.close()}};this.keyDownListener=t=>{var i;if(!t.defaultPrevented&&t.key==="Escape"){this.close();(i=this.infoButton)===null||i===void 0?void 0:i.setFocus();t.preventDefault()}return};this.active=false;this.label="Toelichting";this.position="right";this.small=undefined;this.secondary=undefined}render(){return i(s,null,i("dso-info-button",{key:"d814dd230c0a2b7dd143f0c461a7c35c5a0e8256","aria-describedby":"toggle",onClick:this.click,label:this.label,active:this.active,secondary:this.secondary,ref:t=>this.infoButton=t}),i("dso-tooltip",{key:"8335db4a80d8bf7fdec4251caa9a3d4c5520b8f4",stateless:true,descriptive:true,id:"toggle",strategy:"absolute",active:this.active,position:this.position,small:this.small},i("slot",{key:"e4f9747977cd810999eb63ee413e63827ce106e3"})))}get host(){return e(this)}};n.style=h;export{n as dso_toggletip};
+//# sourceMappingURL=p-e4eed4a2.entry.js.map

package/dist/dso-toolkit/{p-cc0e5e1f.entry.js → p-e563fe5b.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as s,h as i}from"./p-d638c2b0.js";import{v as a}from"./p-f5ff676c.js";const o=":host{display:block}*,*::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}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}";const d=o;const n=class{constructor(i){e(this,i);this.dsoBaseLayerChange=s(this,"dsoBaseLayerChange",7);this.selectableRefs={};this.group=a();this.baseLayers=undefined}baseLayerChangeHandler(e){this.dsoBaseLayerChange.emit({activeBaseLayer:e})}componentDidRender(){this.baseLayers.filter((e=>{var s,i;return!e.disabled&&((i=(s=this.previousBaselayers)===null||s===void 0?void 0:s.find((s=>s.id===e.id)))===null||i===void 0?void 0:i.disabled)===true})).forEach((e=>{var s;(s=this.selectableRefs[e.id])===null||s===void 0?void 0:s.toggleInfo(false)}));this.previousBaselayers=this.baseLayers}render(){for(const e in this.selectableRefs){delete this.selectableRefs[e]}return i("fieldset",{key:"6202c08aabadaf082aa7268b9869e9961db25323",class:"form-group dso-radios"},i("legend",{key:"4f98ce54b7cc0ac7043dcfdbf6ba5dc0c14eaff7",class:"sr-only"},"Achtergrond"),i("div",{key:"afc2b38161a7706c8d2b3a616cbd61b1304772f2",class:"dso-label-container"},i("span",{key:"e205e3bc1f4725b8c38df48da06eb2bacbeafd91",class:"control-label","aria-hidden":"true"},"Achtergrond")),i("div",{key:"042feb469b10a84622a1c3c1986df3d25bd3be3d",class:"dso-field-container"},this.baseLayers.map((e=>i("dso-selectable",{key:e.id,type:"radio",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:()=>this.baseLayerChangeHandler(e)},e.name,e.info?i("p",{slot:"info"},e.info):null)))))}};n.style=d;export{n as dso_map_base_layers};
-//# sourceMappingURL=p-cc0e5e1f.entry.js.map
+import{r as e,c as s,h as i}from"./p-b623c74b.js";import{v as a}from"./p-f5ff676c.js";const o=":host{display:block}*,*::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}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}";const d=o;const n=class{constructor(i){e(this,i);this.dsoBaseLayerChange=s(this,"dsoBaseLayerChange",7);this.selectableRefs={};this.group=a();this.baseLayers=undefined}baseLayerChangeHandler(e){this.dsoBaseLayerChange.emit({activeBaseLayer:e})}componentDidRender(){this.baseLayers.filter((e=>{var s,i;return!e.disabled&&((i=(s=this.previousBaselayers)===null||s===void 0?void 0:s.find((s=>s.id===e.id)))===null||i===void 0?void 0:i.disabled)===true})).forEach((e=>{var s;(s=this.selectableRefs[e.id])===null||s===void 0?void 0:s.toggleInfo(false)}));this.previousBaselayers=this.baseLayers}render(){for(const e in this.selectableRefs){delete this.selectableRefs[e]}return i("fieldset",{key:"6202c08aabadaf082aa7268b9869e9961db25323",class:"form-group dso-radios"},i("legend",{key:"4f98ce54b7cc0ac7043dcfdbf6ba5dc0c14eaff7",class:"sr-only"},"Achtergrond"),i("div",{key:"afc2b38161a7706c8d2b3a616cbd61b1304772f2",class:"dso-label-container"},i("span",{key:"e205e3bc1f4725b8c38df48da06eb2bacbeafd91",class:"control-label","aria-hidden":"true"},"Achtergrond")),i("div",{key:"042feb469b10a84622a1c3c1986df3d25bd3be3d",class:"dso-field-container"},this.baseLayers.map((e=>i("dso-selectable",{key:e.id,type:"radio",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:()=>this.baseLayerChangeHandler(e)},e.name,e.info?i("p",{slot:"info"},e.info):null)))))}};n.style=d;export{n as dso_map_base_layers};
+//# sourceMappingURL=p-e563fe5b.entry.js.map

package/dist/dso-toolkit/{p-53b5cc29.entry.js → p-e96c2531.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as s,H as e,a as i}from"./p-d638c2b0.js";import{t as o}from"./p-1dbcaeef.js";import{h as n,c as r}from"./p-202d2cdf.js";import{g as a}from"./p-c8f6f8d9.js";import{v as h}from"./p-f5ff676c.js";const f=":host(:focus){outline:none}:host{display:inline-block}";const d=f;const c=class{constructor(s){t(this,s);this.focusOutListener=t=>{if(this.open&&(!(t.relatedTarget instanceof HTMLElement)||!this.tabbables(true).includes(t.relatedTarget))){this.open=false}};this.escape=()=>{this.button.focus();this.open=false};this.open=false;this.dropdownAlign="left";this.dropdownOptionsOffset=2;this.checkable=false;this.boundary=undefined;this.placement=undefined;this.strategy="auto"}watchPosition(){if(!this.popper){return}this.popper.setOptions({placement:this.placement||(this.dropdownAlign==="right"?"bottom-end":"bottom-start")})}watchOptionsOffset(){var t;(t=this.popper)===null||t===void 0?void 0:t.setOptions({modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}}]})}watchStrategy(){this.setStrategy()}setStrategy(){if(!this.popper){return}if(this.strategy==="absolute"||this.strategy==="fixed"){this.popper.setOptions({strategy:this.strategy});return}let t=this.host;const s=this.boundary||document;while(t&&t.parentNode!==s){t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement;if(t!==null&&n(t)){this.popper.setOptions({strategy:"fixed"});return}}this.popper.setOptions({strategy:"absolute"})}get button(){const t=this.host.querySelector('button[slot="toggle"]');if(!(t instanceof HTMLButtonElement)){throw new ReferenceError("Mandatory toggle button not found")}return t}tabbables(t){const s=this.host.isConnected?o(this.host):[];return t?s:s.filter((t=>t!==this.button))}componentDidLoad(){this.button.setAttribute("aria-haspopup","menu");this.button.setAttribute("aria-expanded","false");if(!this.button.id){this.button.id=h()}const t=this.host.querySelector(".dso-dropdown-options");if(!t){throw new ReferenceError("Dropdown options not found")}t.setAttribute("role","menu");t.setAttribute("aria-labelledby",this.button.id);for(const t of Array.from(this.host.getElementsByTagName("ul"))){t.setAttribute("role","group");for(const s of Array.from(t.getElementsByTagName("li"))){s.setAttribute("role","none")}}if(this.popper){return}const s=this.host.querySelector(".dso-dropdown-options");if(!(s instanceof HTMLElement)){throw new Error("dropdown options element is not instanceof HTMLElement")}this.popper=r(this.button,s,{placement:this.placement||(this.dropdownAlign==="right"?"bottom-end":"bottom-start"),modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}},{name:"preventOverflow",options:{boundary:this.boundary?document.querySelector(this.boundary):null},enabled:this.boundary!==undefined}]})}componentDidRender(){var t;this.setStrategy();if(this.open){(t=this.popper)===null||t===void 0?void 0:t.update()}for(const t of Array.from(this.host.getElementsByTagName("li"))){for(const s of this.host.isConnected?o(t):[]){s.setAttribute("role",this.checkable?"menuitemradio":"menuitem");if(this.checkable){s.setAttribute("aria-checked",t.classList.contains("dso-checked").toString())}}}this.button.setAttribute("aria-expanded",this.open?"true":"false")}onClick(t){const s=t.composedPath();if(this.isToggleButtonEvent(s)){this.open=!this.open}else if(this.open&&this.isMenuItemEvent(s)){this.open=false}}isToggleButtonEvent(t){return t.includes(this.button)}isMenuItemEvent(t){return t.includes(this.host)&&!this.isToggleButtonEvent(t)}disconnectedCallback(){var t;(t=this.popper)===null||t===void 0?void 0:t.destroy()}keyDownListener(t){if(t.defaultPrevented||!this.open){return}switch(t.key){case"Tab":if(t.shiftKey){this.tabInPopup(this.tabbables(true),-1)}else{this.tabInPopup(this.tabbables(true),1)}break;case"ArrowDown":this.tabInPopup(this.tabbables(false),1);break;case"ArrowUp":this.tabInPopup(this.tabbables(false),-1);break;case"Escape":this.escape();break;case" ":if(t.target instanceof HTMLElement){t.target.click()}break;default:return}t.preventDefault()}tabInPopup(t,s){var e;const i=t.findIndex((t=>t===a()));let o=i+s;if(o>=t.length){o=0}else if(o<0){o=t.length-1}(e=t[o])===null||e===void 0?void 0:e.focus()}render(){return s(e,{key:"64730f2a5269c26f82cc98c16a6706aea0d85139",onFocusout:this.focusOutListener},s("slot",{key:"b1ea51163d8aaa0a1bdebe8450d916fa004750d7",name:"toggle"}),s("div",{key:"50d3b624f62dc610657bcc91d9c1613b1f635a4e",hidden:!this.open},s("slot",{key:"05fc1a75012d442384a58313a5908a1c77f486b0"})))}get host(){return i(this)}static get watchers(){return{placement:["watchPosition"],dropdownAlign:["watchPosition"],dropdownOptionsOffset:["watchOptionsOffset"],strategy:["watchStrategy"]}}};c.style=d;export{c as dso_dropdown_menu};
-//# sourceMappingURL=p-53b5cc29.entry.js.map
+import{r as t,h as s,H as e,a as i}from"./p-b623c74b.js";import{t as o}from"./p-1dbcaeef.js";import{h as n,c as r}from"./p-202d2cdf.js";import{g as a}from"./p-c8f6f8d9.js";import{v as h}from"./p-f5ff676c.js";const f=":host(:focus){outline:none}:host{display:inline-block}";const d=f;const c=class{constructor(s){t(this,s);this.focusOutListener=t=>{if(this.open&&(!(t.relatedTarget instanceof HTMLElement)||!this.tabbables(true).includes(t.relatedTarget))){this.open=false}};this.escape=()=>{this.button.focus();this.open=false};this.open=false;this.dropdownAlign="left";this.dropdownOptionsOffset=2;this.checkable=false;this.boundary=undefined;this.placement=undefined;this.strategy="auto"}watchPosition(){if(!this.popper){return}this.popper.setOptions({placement:this.placement||(this.dropdownAlign==="right"?"bottom-end":"bottom-start")})}watchOptionsOffset(){var t;(t=this.popper)===null||t===void 0?void 0:t.setOptions({modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}}]})}watchStrategy(){this.setStrategy()}setStrategy(){if(!this.popper){return}if(this.strategy==="absolute"||this.strategy==="fixed"){this.popper.setOptions({strategy:this.strategy});return}let t=this.host;const s=this.boundary||document;while(t&&t.parentNode!==s){t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement;if(t!==null&&n(t)){this.popper.setOptions({strategy:"fixed"});return}}this.popper.setOptions({strategy:"absolute"})}get button(){const t=this.host.querySelector('button[slot="toggle"]');if(!(t instanceof HTMLButtonElement)){throw new ReferenceError("Mandatory toggle button not found")}return t}tabbables(t){const s=this.host.isConnected?o(this.host):[];return t?s:s.filter((t=>t!==this.button))}componentDidLoad(){this.button.setAttribute("aria-haspopup","menu");this.button.setAttribute("aria-expanded","false");if(!this.button.id){this.button.id=h()}const t=this.host.querySelector(".dso-dropdown-options");if(!t){throw new ReferenceError("Dropdown options not found")}t.setAttribute("role","menu");t.setAttribute("aria-labelledby",this.button.id);for(const t of Array.from(this.host.getElementsByTagName("ul"))){t.setAttribute("role","group");for(const s of Array.from(t.getElementsByTagName("li"))){s.setAttribute("role","none")}}if(this.popper){return}const s=this.host.querySelector(".dso-dropdown-options");if(!(s instanceof HTMLElement)){throw new Error("dropdown options element is not instanceof HTMLElement")}this.popper=r(this.button,s,{placement:this.placement||(this.dropdownAlign==="right"?"bottom-end":"bottom-start"),modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}},{name:"preventOverflow",options:{boundary:this.boundary?document.querySelector(this.boundary):null},enabled:this.boundary!==undefined}]})}componentDidRender(){var t;this.setStrategy();if(this.open){(t=this.popper)===null||t===void 0?void 0:t.update()}for(const t of Array.from(this.host.getElementsByTagName("li"))){for(const s of this.host.isConnected?o(t):[]){s.setAttribute("role",this.checkable?"menuitemradio":"menuitem");if(this.checkable){s.setAttribute("aria-checked",t.classList.contains("dso-checked").toString())}}}this.button.setAttribute("aria-expanded",this.open?"true":"false")}onClick(t){const s=t.composedPath();if(this.isToggleButtonEvent(s)){this.open=!this.open}else if(this.open&&this.isMenuItemEvent(s)){this.open=false}}isToggleButtonEvent(t){return t.includes(this.button)}isMenuItemEvent(t){return t.includes(this.host)&&!this.isToggleButtonEvent(t)}disconnectedCallback(){var t;(t=this.popper)===null||t===void 0?void 0:t.destroy()}keyDownListener(t){if(t.defaultPrevented||!this.open){return}switch(t.key){case"Tab":if(t.shiftKey){this.tabInPopup(this.tabbables(true),-1)}else{this.tabInPopup(this.tabbables(true),1)}break;case"ArrowDown":this.tabInPopup(this.tabbables(false),1);break;case"ArrowUp":this.tabInPopup(this.tabbables(false),-1);break;case"Escape":this.escape();break;case" ":if(t.target instanceof HTMLElement){t.target.click()}break;default:return}t.preventDefault()}tabInPopup(t,s){var e;const i=t.findIndex((t=>t===a()));let o=i+s;if(o>=t.length){o=0}else if(o<0){o=t.length-1}(e=t[o])===null||e===void 0?void 0:e.focus()}render(){return s(e,{key:"64730f2a5269c26f82cc98c16a6706aea0d85139",onFocusout:this.focusOutListener},s("slot",{key:"b1ea51163d8aaa0a1bdebe8450d916fa004750d7",name:"toggle"}),s("div",{key:"50d3b624f62dc610657bcc91d9c1613b1f635a4e",hidden:!this.open},s("slot",{key:"05fc1a75012d442384a58313a5908a1c77f486b0"})))}get host(){return i(this)}static get watchers(){return{placement:["watchPosition"],dropdownAlign:["watchPosition"],dropdownOptionsOffset:["watchOptionsOffset"],strategy:["watchStrategy"]}}};c.style=d;export{c as dso_dropdown_menu};
+//# sourceMappingURL=p-e96c2531.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as o,c as i,h as e,F as t,a as n}from"./p-b623c74b.js";import{c as r}from"./p-8a1a6e56.js";import{c as a}from"./p-808a98bc.js";import{t as s}from"./p-1dbcaeef.js";import{i as l}from"./p-2d694112.js";const c=':host{display:block}*,*::after,*::before{box-sizing:border-box}.active-option{display:flex;inline-size:100%;justify-content:flex-start;align-items:center;padding:0;border:1px solid #275937;border-radius:4px;cursor:pointer;background-color:#fff;line-height:inherit;font-family:inherit;font-size:inherit}.active-option.open{border-radius:4px 4px 0 0}.active-option dso-icon{color:#275937}.active-option dso-label{margin-inline-start:8px}.active-option-label{padding-block:4px;padding-inline:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.active-option-aside{display:flex;align-items:center;gap:8px;padding-block:0;padding-inline:8px;margin-inline-start:auto}.badges{display:flex;justify-content:space-between;align-items:center;gap:4px}.groups-container{position:relative}.groups{position:absolute;inset-block-start:-1px;inset-inline-start:0;inline-size:100%;max-block-size:500px;margin:0;padding:0;overflow-y:auto;background-color:#fff;border:1px solid #275937;border-radius:0 0 4px 4px}.groups li::marker{display:none}.group{border-block-end:1px solid #ccc}.group:last-child{border-block-end:none}.group .option{padding-inline-start:37px}.group .option-label::before{content:"";position:absolute;display:block;block-size:10px;inline-size:10px;inset-block:4px auto;inset-inline:-20px auto;border-radius:50%}.group .option-label::before{background-color:#ccc;border-color:#ccc;color:#191919}.group-label{margin:0;padding-block:4px;padding-inline:16px;color:#666;font-size:14px;font-weight:500;border-block-end:1px solid #ccc}.group-link{display:block;padding-block:8px;padding-inline:4px;text-align:end;color:#000;text-decoration:none}.group-link:hover{text-decoration:underline}.group-link dso-icon{color:#39870c}.group-info .option-label::before{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.group-primary .option-label::before{background-color:#275937;border-color:#275937;color:#fff}.group-success .option-label::before{background-color:#39870c;border-color:#39870c;color:#fff}.group-warning .option-label::before{background-color:#dcd400;border-color:#dcd400;color:#191919}.group-danger .option-label::before{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.group-error .option-label::before{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.group-attention .option-label::before{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}.options{margin:0;padding:0}.option{display:block;inline-size:100%;padding-block:8px;padding-inline:16px;cursor:pointer;line-height:inherit;font-family:inherit;font-size:inherit;border:none;text-align:start;background-color:#fff}.option:hover{background-color:#ebf3e6}.option:hover .option-label{color:#39870c;font-weight:bold}.option.option-active .option-label{color:#39870c;font-weight:bold;text-decoration:underline}.option-label{position:relative;color:#000;font-size:Asap, sans-serif;font-weight:400}.option-hint{padding-inline-start:5px;color:#39870c;font-size:Asap, sans-serif;font-weight:bold}.placeholder{margin:0;padding-block:8px;padding-inline:16px;color:#666}';const d=c;const p=class{constructor(e){o(this,e);this.dsoChange=i(this,"dsoChange",3);this.dsoRedirect=i(this,"dsoRedirect",3);this.toggleOpen=()=>{this.open=!this.open};this.handleOptionClick=(o,i)=>{this.dsoChange.emit({originalEvent:o,option:i});this.open=false};this.handleRedirectClick=(o,i)=>{this.dsoRedirect.emit({originalEvent:o,isModifiedEvent:l(o),redirect:i});this.open=false};this.options=[];this.active=undefined;this.activeHint=undefined;this.open=false}keyDownListener(o){if(this.open&&o.key==="ArrowUp"){o.preventDefault();this.handleTab(-1)}else if(this.open&&o.key==="ArrowDown"){o.preventDefault();this.handleTab(1)}}componentDidRender(){if(this.open&&!this.trap){this.createTrap()}else if(!this.open&&this.trap){this.removeTrap()}}createTrap(){this.trap=a(this.host,{clickOutsideDeactivates:true,escapeDeactivates:true,setReturnFocus:this.toggleButtonElementRef,tabbableOptions:{getShadowRoot:true},onDeactivate:()=>{this.open=false}}).activate()}removeTrap(){var o;(o=this.trap)===null||o===void 0?void 0:o.deactivate();delete this.trap}handleTab(o){var i;const e=this.host.isConnected?s(this.host,{getShadowRoot:true}):[];const t=e.findIndex((o=>{var i;return o===((i=this.host.shadowRoot)===null||i===void 0?void 0:i.activeElement)}));let n=t+o;if(n>=e.length){n=0}else if(n<0){n=e.length-1}(i=e[n])===null||i===void 0?void 0:i.focus()}render(){var o,i;return e(t,null,e("button",{key:"443309104a25a8fabd949377c74383027450f404","aria-expanded":this.open.toString(),class:r(["active-option",{open:this.open}]),type:"button",onClick:this.toggleOpen,ref:o=>this.toggleButtonElementRef=o},e(u,{key:"e0f34941cabe1232ecf224d35f951f2fcb7affc7",active:this.active,options:this.options}),e("span",{key:"b1d4dfadfb02c8beaa6e8553be863abf6fa50c4f",class:"active-option-label"},(i=(o=this.active)===null||o===void 0?void 0:o.label)!==null&&i!==void 0?i:"Selecteer een optie"),e("span",{key:"29dc80cc20ebc9393119bd2e0251420099d8ac88",class:"active-option-aside"},this.options.some((o=>"summaryCounter"in o&&(o===null||o===void 0?void 0:o.summaryCounter)))&&e("span",{key:"08a59c09ec06900c761e44ce223c317414e401bf",class:"badges"},this.options.filter((o=>"options"in o&&"summaryCounter"in o&&!!(o===null||o===void 0?void 0:o.summaryCounter))).map((o=>{var i;return e("dso-badge",{status:(i=o.variant)!==null&&i!==void 0?i:"outline"},o.options.length)}))),e("dso-icon",{key:"06549ae93243ab2a9b0a36e397ef0808e90973f5",icon:"caret-down"}))),this.open&&e("div",{key:"9f7e0cb989feb1167d8b0bce0f2c3a9c371811b8",class:"groups-container"},e("ul",{key:"bd98ccdbe135d9145f8d1c41c3bf362030e37e26",class:"groups"},this.options.map((o=>"options"in o&&e("li",{class:r(["group",{[`group-${o.variant}`]:!!o.variant}])},e("p",{class:"group-label"},o.label),e("ul",{class:"options"},o.options.map((o=>e("li",null,e(b,{option:o,active:this.active,activeHint:this.activeHint,callback:this.handleOptionClick}))))),o.redirect&&e(f,{redirect:o.redirect,callback:this.handleRedirectClick}))||"placeholder"in o&&e("li",{class:"group"},e("p",{class:"group-label"},o.label),e("p",{class:"placeholder"},o.placeholder),o.redirect&&e(f,{redirect:o.redirect,callback:this.handleRedirectClick}))||e("li",null,e(b,{option:o,active:this.active,activeHint:this.activeHint,callback:this.handleOptionClick})))))))}get host(){return n(this)}};const b=({option:o,active:i,activeHint:t,callback:n})=>e("button",{class:r(["option",{"option-active":i===o}]),type:"button",onClick:i=>n(i,o)},e("span",{class:"option-label"},o.label),!!t&&i===o&&e("span",{class:"option-hint"},"(",t,")"));const f=({redirect:o,callback:i})=>e("a",{class:"group-link",href:o.href,onClick:e=>i(e,o)},o.label,e("dso-icon",{icon:"chevron-right"}));const u=({active:o,options:i})=>{const t=i.find((i=>"options"in i&&!!i.options.find((i=>i===o))&&!!i.activeLabel));return t?e("dso-label",{compact:true,status:t.variant},t.activeLabel):undefined};p.style=d;export{p as dso_advanced_select};
+//# sourceMappingURL=p-eb79a374.entry.js.map

package/dist/dso-toolkit/{p-a6457fc6.entry.js.map → p-eb79a374.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["advancedSelectCss","DsoAdvancedSelectStyle0","AdvancedSelect","this","toggleOpen","open","handleOptionClick","event","option","dsoChange","emit","originalEvent","handleRedirectClick","redirect","dsoRedirect","isModifiedEvent","keyDownListener","key","preventDefault","handleTab","componentDidRender","trap","createTrap","removeTrap","createFocusTrap","host","clickOutsideDeactivates","escapeDeactivates","setReturnFocus","toggleButtonElementRef","tabbableOptions","getShadowRoot","onDeactivate","activate","_a","deactivate","direction","elements","isConnected","tabbable","currentIndex","findIndex","e","shadowRoot","activeElement","nextIndex","length","focus","render","h","Fragment","toString","class","clsx","type","onClick","ref","element","ActiveGroupLabel","active","options","_b","label","some","optionOrGroup","summaryCounter","filter","map","group","status","variant","icon","OptionButton","activeHint","callback","RedirectAnchor","placeholder","href","find","activeLabel","compact","undefined"],"sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n  display: flex;\r\n  inline-size: 100%;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  padding: 0;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: advanced-select.$border-radius;\r\n  cursor: pointer;\r\n  background-color: advanced-select.$bg-color;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n\r\n  &.open {\r\n    border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$icon-color;\r\n  }\r\n\r\n  dso-label {\r\n    margin-inline-start: advanced-select.$inline-padding * 0.5;\r\n  }\r\n}\r\n\r\n.active-option-label {\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  overflow: hidden;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  white-space: nowrap;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: advanced-select.$inline-padding * 0.5;\r\n  padding-block: 0;\r\n  padding-inline: advanced-select.$inline-padding * 0.5;\r\n  margin-inline-start: auto;\r\n}\r\n\r\n.badges {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: advanced-select.$block-padding;\r\n}\r\n\r\n.groups-container {\r\n  position: relative;\r\n}\r\n\r\n.groups {\r\n  position: absolute;\r\n  inset-block-start: -1px;\r\n  inset-inline-start: 0;\r\n  inline-size: 100%;\r\n  max-block-size: 500px;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow-y: auto;\r\n  background-color: advanced-select.$bg-color;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n  li {\r\n    &::marker {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.group {\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n\r\n  &:last-child {\r\n    border-block-end: none;\r\n  }\r\n\r\n  .option {\r\n    padding-inline-start: advanced-select.$inline-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n  }\r\n\r\n  .option-label::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    display: block;\r\n    block-size: advanced-select.$option-dot-size;\r\n    inline-size: advanced-select.$option-dot-size;\r\n    inset-block: advanced-select.$block-padding auto;\r\n    inset-inline: -#{advanced-select.$option-dot-size * 2} auto;\r\n    border-radius: 50%;\r\n    @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n  }\r\n}\r\n\r\n.group-label {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$group-label-color;\r\n  font-size: advanced-select.$group-label-font-size;\r\n  font-weight: advanced-select.$group-label-font-weight;\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n  display: block;\r\n  padding-block: advanced-select.$group-link-block-padding;\r\n  padding-inline: advanced-select.$group-link-inline-padding;\r\n  text-align: end;\r\n  color: advanced-select.$group-link-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$redirect-icon-color;\r\n  }\r\n}\r\n\r\n.group-info .option-label::before {\r\n  @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n  @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n  @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n  @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-danger .option-label::before {\r\n  @include set-colors.apply(advanced-select.$danger-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n  @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n  @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.option {\r\n  display: block;\r\n  inline-size: 100%;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  cursor: pointer;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  border: none;\r\n  text-align: start;\r\n  background-color: advanced-select.$bg-color;\r\n\r\n  &:hover {\r\n    background-color: advanced-select.$option-hover-bg-color;\r\n\r\n    .option-label {\r\n      color: advanced-select.$option-hover-color;\r\n      font-weight: advanced-select.$option-hover-font-weight;\r\n    }\r\n  }\r\n}\r\n\r\n.option.option-active .option-label {\r\n  color: advanced-select.$option-active-color;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n  text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n  position: relative;\r\n  color: advanced-select.$option-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n  padding-inline-start: 5px;\r\n  color: advanced-select.$option-active-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n\r\n.placeholder {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$option-placeholder-color;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Prop,\r\n  h,\r\n  FunctionalComponent,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  State,\r\n  Fragment,\r\n  Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n  AdvancedSelectGroup,\r\n  AdvancedSelectGroupRedirect,\r\n  AdvancedSelectOption,\r\n  AdvancedSelectChangeEvent,\r\n  AdvancedSelectOptionOrGroup,\r\n  AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.interfaces\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\n@Component({\r\n  tag: \"dso-advanced-select\",\r\n  styleUrl: \"advanced-select.scss\",\r\n  shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n  private trap?: FocusTrap;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAdvancedSelectElement;\r\n\r\n  /**\r\n   * The options to display in the select.\r\n   */\r\n  @Prop()\r\n  options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n  /**\r\n   * The active option. By object reference.\r\n   */\r\n  @Prop()\r\n  active?: AdvancedSelectOption<never>;\r\n\r\n  /**\r\n   * An extra text for the active option. Only visible in the list of options.\r\n   */\r\n  @Prop()\r\n  activeHint?: string;\r\n\r\n  /**\r\n   * The open state of the options list.\r\n   */\r\n  @State()\r\n  open: boolean = false;\r\n\r\n  /**\r\n   * Emitted when user selects an option\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n  /**\r\n   * Emitted when user activates a group redirect link.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n  private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (this.open && event.key === \"ArrowUp\") {\r\n      event.preventDefault();\r\n      this.handleTab(-1);\r\n    } else if (this.open && event.key === \"ArrowDown\") {\r\n      event.preventDefault();\r\n      this.handleTab(1);\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.open && !this.trap) {\r\n      this.createTrap();\r\n    } else if (!this.open && this.trap) {\r\n      this.removeTrap();\r\n    }\r\n  }\r\n\r\n  private toggleOpen = () => {\r\n    this.open = !this.open;\r\n  };\r\n\r\n  private createTrap() {\r\n    this.trap = createFocusTrap(this.host, {\r\n      clickOutsideDeactivates: true,\r\n      escapeDeactivates: true,\r\n      setReturnFocus: this.toggleButtonElementRef,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      onDeactivate: () => {\r\n        this.open = false;\r\n      },\r\n    }).activate();\r\n  }\r\n\r\n  private removeTrap() {\r\n    this.trap?.deactivate();\r\n    delete this.trap;\r\n  }\r\n\r\n  private handleTab(direction: number) {\r\n    const elements = this.host.isConnected ? tabbable(this.host, { getShadowRoot: true }) : [];\r\n    const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= elements.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = elements.length - 1;\r\n    }\r\n\r\n    elements[nextIndex]?.focus();\r\n  }\r\n\r\n  private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n    this.dsoChange.emit({ originalEvent: event, option });\r\n    this.open = false;\r\n  };\r\n\r\n  private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n    this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          aria-expanded={this.open.toString()}\r\n          class={clsx([\"active-option\", { open: this.open }])}\r\n          type=\"button\"\r\n          onClick={this.toggleOpen}\r\n          ref={(element) => (this.toggleButtonElementRef = element)}\r\n        >\r\n          <ActiveGroupLabel active={this.active} options={this.options} />\r\n          <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n          <span class=\"active-option-aside\">\r\n            {this.options.some(\r\n              (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n            ) && (\r\n              <span class=\"badges\">\r\n                {this.options\r\n                  .filter(\r\n                    (option): option is AdvancedSelectGroup<never> =>\r\n                      \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n                  )\r\n                  .map((group) => (\r\n                    <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>\r\n                  ))}\r\n              </span>\r\n            )}\r\n            <dso-icon icon=\"caret-down\"></dso-icon>\r\n          </span>\r\n        </button>\r\n        {this.open && (\r\n          <div class=\"groups-container\">\r\n            <ul class=\"groups\">\r\n              {this.options.map(\r\n                (optionOrGroup) =>\r\n                  (\"options\" in optionOrGroup && (\r\n                    <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <ul class=\"options\">\r\n                        {optionOrGroup.options.map((option) => (\r\n                          <li>\r\n                            <OptionButton\r\n                              option={option}\r\n                              active={this.active}\r\n                              activeHint={this.activeHint}\r\n                              callback={this.handleOptionClick}\r\n                            />\r\n                          </li>\r\n                        ))}\r\n                      </ul>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) ||\r\n                  (\"placeholder\" in optionOrGroup && (\r\n                    <li class=\"group\">\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <p class=\"placeholder\">{optionOrGroup.placeholder}</p>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) || (\r\n                    <li>\r\n                      <OptionButton\r\n                        option={optionOrGroup}\r\n                        active={this.active}\r\n                        activeHint={this.activeHint}\r\n                        callback={this.handleOptionClick}\r\n                      />\r\n                    </li>\r\n                  ),\r\n              )}\r\n            </ul>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\ninterface OptionButtonProps {\r\n  option: AdvancedSelectOption<never>;\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  activeHint: string | undefined;\r\n  callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}\r\n\r\nconst OptionButton: FunctionalComponent<OptionButtonProps> = ({ option, active, activeHint, callback }) => (\r\n  <button\r\n    class={clsx([\"option\", { \"option-active\": active === option }])}\r\n    type=\"button\"\r\n    onClick={(e) => callback(e, option)}\r\n  >\r\n    <span class=\"option-label\">{option.label}</span>\r\n    {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n  </button>\r\n);\r\n\r\ninterface RedirectAnchorProps {\r\n  redirect: AdvancedSelectGroupRedirect;\r\n  callback: (event: MouseEvent, value: AdvancedSelectGroupRedirect) => void;\r\n}\r\n\r\nconst RedirectAnchor: FunctionalComponent<RedirectAnchorProps> = ({ redirect, callback }) => (\r\n  <a class=\"group-link\" href={redirect.href} onClick={(e) => callback(e, redirect)}>\r\n    {redirect.label}\r\n    <dso-icon icon=\"chevron-right\"></dso-icon>\r\n  </a>\r\n);\r\n\r\ninterface ActiveGroupLabelProps {\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  options: AdvancedSelectOptionOrGroup<never>[];\r\n}\r\n\r\nconst ActiveGroupLabel: FunctionalComponent<ActiveGroupLabelProps> = ({ active, options }) => {\r\n  const group = options.find(\r\n    (optionOrGroup): optionOrGroup is AdvancedSelectGroup<never> =>\r\n      \"options\" in optionOrGroup &&\r\n      !!optionOrGroup.options.find((option) => option === active) &&\r\n      !!optionOrGroup.activeLabel,\r\n  );\r\n\r\n  return group ? (\r\n    <dso-label compact status={group.variant}>\r\n      {group.activeLabel}\r\n    </dso-label>\r\n  ) : undefined;\r\n};\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["advancedSelectCss","DsoAdvancedSelectStyle0","AdvancedSelect","this","toggleOpen","open","handleOptionClick","event","option","dsoChange","emit","originalEvent","handleRedirectClick","redirect","dsoRedirect","isModifiedEvent","keyDownListener","key","preventDefault","handleTab","componentDidRender","trap","createTrap","removeTrap","createFocusTrap","host","clickOutsideDeactivates","escapeDeactivates","setReturnFocus","toggleButtonElementRef","tabbableOptions","getShadowRoot","onDeactivate","activate","_a","deactivate","direction","elements","isConnected","tabbable","currentIndex","findIndex","e","shadowRoot","activeElement","nextIndex","length","focus","render","h","Fragment","toString","class","clsx","type","onClick","ref","element","ActiveGroupLabel","active","options","_b","label","some","optionOrGroup","summaryCounter","filter","map","group","status","variant","icon","OptionButton","activeHint","callback","RedirectAnchor","placeholder","href","find","activeLabel","compact","undefined"],"sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n  display: flex;\r\n  inline-size: 100%;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  padding: 0;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: advanced-select.$border-radius;\r\n  cursor: pointer;\r\n  background-color: advanced-select.$bg-color;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n\r\n  &.open {\r\n    border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$icon-color;\r\n  }\r\n\r\n  dso-label {\r\n    margin-inline-start: advanced-select.$inline-padding * 0.5;\r\n  }\r\n}\r\n\r\n.active-option-label {\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  overflow: hidden;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  white-space: nowrap;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: advanced-select.$inline-padding * 0.5;\r\n  padding-block: 0;\r\n  padding-inline: advanced-select.$inline-padding * 0.5;\r\n  margin-inline-start: auto;\r\n}\r\n\r\n.badges {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: advanced-select.$block-padding;\r\n}\r\n\r\n.groups-container {\r\n  position: relative;\r\n}\r\n\r\n.groups {\r\n  position: absolute;\r\n  inset-block-start: -1px;\r\n  inset-inline-start: 0;\r\n  inline-size: 100%;\r\n  max-block-size: 500px;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow-y: auto;\r\n  background-color: advanced-select.$bg-color;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n  li {\r\n    &::marker {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.group {\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n\r\n  &:last-child {\r\n    border-block-end: none;\r\n  }\r\n\r\n  .option {\r\n    padding-inline-start: advanced-select.$inline-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n  }\r\n\r\n  .option-label::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    display: block;\r\n    block-size: advanced-select.$option-dot-size;\r\n    inline-size: advanced-select.$option-dot-size;\r\n    inset-block: advanced-select.$block-padding auto;\r\n    inset-inline: -#{advanced-select.$option-dot-size * 2} auto;\r\n    border-radius: 50%;\r\n    @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n  }\r\n}\r\n\r\n.group-label {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$group-label-color;\r\n  font-size: advanced-select.$group-label-font-size;\r\n  font-weight: advanced-select.$group-label-font-weight;\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n  display: block;\r\n  padding-block: advanced-select.$group-link-block-padding;\r\n  padding-inline: advanced-select.$group-link-inline-padding;\r\n  text-align: end;\r\n  color: advanced-select.$group-link-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$redirect-icon-color;\r\n  }\r\n}\r\n\r\n.group-info .option-label::before {\r\n  @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n  @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n  @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n  @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-danger .option-label::before {\r\n  @include set-colors.apply(advanced-select.$danger-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n  @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n  @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.option {\r\n  display: block;\r\n  inline-size: 100%;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  cursor: pointer;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  border: none;\r\n  text-align: start;\r\n  background-color: advanced-select.$bg-color;\r\n\r\n  &:hover {\r\n    background-color: advanced-select.$option-hover-bg-color;\r\n\r\n    .option-label {\r\n      color: advanced-select.$option-hover-color;\r\n      font-weight: advanced-select.$option-hover-font-weight;\r\n    }\r\n  }\r\n}\r\n\r\n.option.option-active .option-label {\r\n  color: advanced-select.$option-active-color;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n  text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n  position: relative;\r\n  color: advanced-select.$option-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n  padding-inline-start: 5px;\r\n  color: advanced-select.$option-active-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n\r\n.placeholder {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$option-placeholder-color;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Prop,\r\n  h,\r\n  FunctionalComponent,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  State,\r\n  Fragment,\r\n  Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n  AdvancedSelectGroup,\r\n  AdvancedSelectGroupRedirect,\r\n  AdvancedSelectOption,\r\n  AdvancedSelectChangeEvent,\r\n  AdvancedSelectOptionOrGroup,\r\n  AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.interfaces\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\n@Component({\r\n  tag: \"dso-advanced-select\",\r\n  styleUrl: \"advanced-select.scss\",\r\n  shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n  private trap?: FocusTrap;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAdvancedSelectElement;\r\n\r\n  /**\r\n   * The options to display in the select.\r\n   */\r\n  @Prop()\r\n  options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n  /**\r\n   * The active option. By object reference.\r\n   */\r\n  @Prop()\r\n  active?: AdvancedSelectOption<never>;\r\n\r\n  /**\r\n   * An extra text for the active option. Only visible in the list of options.\r\n   */\r\n  @Prop()\r\n  activeHint?: string;\r\n\r\n  /**\r\n   * The open state of the options list.\r\n   */\r\n  @State()\r\n  open: boolean = false;\r\n\r\n  /**\r\n   * Emitted when user selects an option\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n  /**\r\n   * Emitted when user activates a group redirect link.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n  private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (this.open && event.key === \"ArrowUp\") {\r\n      event.preventDefault();\r\n      this.handleTab(-1);\r\n    } else if (this.open && event.key === \"ArrowDown\") {\r\n      event.preventDefault();\r\n      this.handleTab(1);\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.open && !this.trap) {\r\n      this.createTrap();\r\n    } else if (!this.open && this.trap) {\r\n      this.removeTrap();\r\n    }\r\n  }\r\n\r\n  private toggleOpen = () => {\r\n    this.open = !this.open;\r\n  };\r\n\r\n  private createTrap() {\r\n    this.trap = createFocusTrap(this.host, {\r\n      clickOutsideDeactivates: true,\r\n      escapeDeactivates: true,\r\n      setReturnFocus: this.toggleButtonElementRef,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      onDeactivate: () => {\r\n        this.open = false;\r\n      },\r\n    }).activate();\r\n  }\r\n\r\n  private removeTrap() {\r\n    this.trap?.deactivate();\r\n    delete this.trap;\r\n  }\r\n\r\n  private handleTab(direction: number) {\r\n    const elements = this.host.isConnected ? tabbable(this.host, { getShadowRoot: true }) : [];\r\n    const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= elements.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = elements.length - 1;\r\n    }\r\n\r\n    elements[nextIndex]?.focus();\r\n  }\r\n\r\n  private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n    this.dsoChange.emit({ originalEvent: event, option });\r\n    this.open = false;\r\n  };\r\n\r\n  private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n    this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          aria-expanded={this.open.toString()}\r\n          class={clsx([\"active-option\", { open: this.open }])}\r\n          type=\"button\"\r\n          onClick={this.toggleOpen}\r\n          ref={(element) => (this.toggleButtonElementRef = element)}\r\n        >\r\n          <ActiveGroupLabel active={this.active} options={this.options} />\r\n          <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n          <span class=\"active-option-aside\">\r\n            {this.options.some(\r\n              (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n            ) && (\r\n              <span class=\"badges\">\r\n                {this.options\r\n                  .filter(\r\n                    (option): option is AdvancedSelectGroup<never> =>\r\n                      \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n                  )\r\n                  .map((group) => (\r\n                    <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>\r\n                  ))}\r\n              </span>\r\n            )}\r\n            <dso-icon icon=\"caret-down\"></dso-icon>\r\n          </span>\r\n        </button>\r\n        {this.open && (\r\n          <div class=\"groups-container\">\r\n            <ul class=\"groups\">\r\n              {this.options.map(\r\n                (optionOrGroup) =>\r\n                  (\"options\" in optionOrGroup && (\r\n                    <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <ul class=\"options\">\r\n                        {optionOrGroup.options.map((option) => (\r\n                          <li>\r\n                            <OptionButton\r\n                              option={option}\r\n                              active={this.active}\r\n                              activeHint={this.activeHint}\r\n                              callback={this.handleOptionClick}\r\n                            />\r\n                          </li>\r\n                        ))}\r\n                      </ul>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) ||\r\n                  (\"placeholder\" in optionOrGroup && (\r\n                    <li class=\"group\">\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <p class=\"placeholder\">{optionOrGroup.placeholder}</p>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) || (\r\n                    <li>\r\n                      <OptionButton\r\n                        option={optionOrGroup}\r\n                        active={this.active}\r\n                        activeHint={this.activeHint}\r\n                        callback={this.handleOptionClick}\r\n                      />\r\n                    </li>\r\n                  ),\r\n              )}\r\n            </ul>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\ninterface OptionButtonProps {\r\n  option: AdvancedSelectOption<never>;\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  activeHint: string | undefined;\r\n  callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}\r\n\r\nconst OptionButton: FunctionalComponent<OptionButtonProps> = ({ option, active, activeHint, callback }) => (\r\n  <button\r\n    class={clsx([\"option\", { \"option-active\": active === option }])}\r\n    type=\"button\"\r\n    onClick={(e) => callback(e, option)}\r\n  >\r\n    <span class=\"option-label\">{option.label}</span>\r\n    {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n  </button>\r\n);\r\n\r\ninterface RedirectAnchorProps {\r\n  redirect: AdvancedSelectGroupRedirect;\r\n  callback: (event: MouseEvent, value: AdvancedSelectGroupRedirect) => void;\r\n}\r\n\r\nconst RedirectAnchor: FunctionalComponent<RedirectAnchorProps> = ({ redirect, callback }) => (\r\n  <a class=\"group-link\" href={redirect.href} onClick={(e) => callback(e, redirect)}>\r\n    {redirect.label}\r\n    <dso-icon icon=\"chevron-right\"></dso-icon>\r\n  </a>\r\n);\r\n\r\ninterface ActiveGroupLabelProps {\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  options: AdvancedSelectOptionOrGroup<never>[];\r\n}\r\n\r\nconst ActiveGroupLabel: FunctionalComponent<ActiveGroupLabelProps> = ({ active, options }) => {\r\n  const group = options.find(\r\n    (optionOrGroup): optionOrGroup is AdvancedSelectGroup<never> =>\r\n      \"options\" in optionOrGroup &&\r\n      !!optionOrGroup.options.find((option) => option === active) &&\r\n      !!optionOrGroup.activeLabel,\r\n  );\r\n\r\n  return group ? (\r\n    <dso-label compact status={group.variant}>\r\n      {group.activeLabel}\r\n    </dso-label>\r\n  ) : undefined;\r\n};\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as s,c as t,h as i,F as e,a as o}from"./p-b623c74b.js";import{d as h}from"./p-9438a55c.js";import{v as n}from"./p-f5ff676c.js";function a(s){if(typeof s!=="string"){throw new TypeError("Expected a string")}return s.replace(/[|\\{}()[\]^$+*?.]/g,"\\$&").replace(/-/g,"\\x2d")}const r=".sc-dso-autosuggest-h{display:block;position:relative}.listbox-container.sc-dso-autosuggest{inset-inline:0;inset-block-start:100%;block-size:auto;max-block-size:var(--max-block-size);min-block-size:48px;overflow-y:auto;position:absolute;z-index:200}ul.sc-dso-autosuggest,.autosuggest-progress-box.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-block:0}.autosuggest-progress-box.sc-dso-autosuggest{padding-block:12px;padding-inline:8px}ul.sc-dso-autosuggest{padding-block:8px;padding-inline:0}ul.sc-dso-autosuggest li.sc-dso-autosuggest{padding-block:4px;padding-inline:16px}ul.sc-dso-autosuggest li.sc-dso-autosuggest .suggestion-row.sc-dso-autosuggest{display:flex;justify-content:space-between}li[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#39870c}li[aria-selected=true].sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .type.sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .extra.sc-dso-autosuggest{color:#fff}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest,.extra.sc-dso-autosuggest{color:#666}.type.sc-dso-autosuggest{text-align:end}.extra.sc-dso-autosuggest{font-size:14px;line-height:21px}.extra.sc-dso-autosuggest:not(:first-child){text-align:end}";const l=r;const u=10;const d=8;const c=1;const g=class{constructor(i){s(this,i);this.dsoSelect=t(this,"dsoSelect",7);this.dsoChange=t(this,"dsoChange",7);this.dsoSearch=t(this,"dsoSearch",7);this.listboxItems=[];this.listboxId=n();this.inputId=n();this.labelId=n();this.resizeObserver=new ResizeObserver(h((()=>this.setListboxContainerMaxBlockSize()),150));this.debouncedEmitValue=h((s=>{this.dsoChange.emit(s);this.debouncedShowLoading()}),200);this.debouncedShowLoading=h((()=>{if(this.inputValue){this.showLoading=true}}),this.loadingDelayed);this.inputValue="";this.onInput=s=>{if(!(s.target instanceof HTMLInputElement)){return}this.showLoading=!this.loadingDelayed;this.inputValue=s.target.value;this.debouncedEmitValue(s.target.value.match(/(\S+)/g)?s.target.value:"")};this.onFocusIn=()=>{if(this.suggestOnFocus){this.openSuggestions()}};this.onWindowResize=h((()=>this.setListboxContainerMaxBlockSize()),150);this.onScrollend=()=>this.setListboxContainerMaxBlockSize();this.onKeyDown=s=>{if(s.defaultPrevented||this.loading){return}switch(s.key){case"ArrowDown":if(!this.showSuggestions){this.openSuggestions("first")}else{this.selectNextSuggestion()}break;case"ArrowUp":if(!this.showSuggestions){this.openSuggestions("last")}else{this.selectPreviousSuggestion()}break;case"Tab":this.closeSuggestions();return;case"Escape":this.closeSuggestions();break;case"Enter":this.pickSelectedValue();break;default:return}s.preventDefault()};this.suggestions=null;this.loading=false;this.loadingLabel="Een moment geduld.";this.loadingDelayed=undefined;this.notFoundLabel=undefined;this.suggestOnFocus=false;this.mark=undefined;this.showSuggestions=false;this.selectedSuggestion=undefined;this.notFound=false;this.showLoading=false;this.listItemBlockSize=0;this.listboxContainerMaxBlockSize=0}suggestionsWatcher(){this.resetSelectedSuggestion();if((!this.showSuggestions||!this.notFound)&&this.inputValue){this.openSuggestions()}else if((this.showSuggestions||this.notFound)&&!this.inputValue){this.closeSuggestions()}}onDocumentClick(s){if((this.showSuggestions||this.notFound)&&this.listbox&&s.target instanceof Node&&!this.listbox.contains(s.target)&&this.input!==s.target){this.closeSuggestions()}}componentDidRender(){this.setListboxContainerMaxBlockSize()}connectedCallback(){setTimeout((()=>{const s=this.host.querySelector('input[type="text"]');if(!(s instanceof HTMLInputElement)){return}this.input=s;if(s.id){this.inputId=s.id}else{s.id=this.inputId}if(!this.input.labels||this.input.labels.length<1){return}const t=this.input.labels[0];if(t===null||t===void 0?void 0:t.id){this.labelId=t.id}else if(t){t.id=this.labelId}this.input.setAttribute("role","combobox");this.input.setAttribute("aria-haspopup","listbox");this.input.setAttribute("aria-expanded","false");this.input.setAttribute("autocomplete","off");this.input.setAttribute("aria-autocomplete","list");this.input.setAttribute("aria-activedescendant","");this.input.addEventListener("input",this.onInput);this.input.addEventListener("keydown",this.onKeyDown);this.input.addEventListener("focusin",this.onFocusIn);window.addEventListener("resize",this.onWindowResize);document.addEventListener("scrollend",this.onScrollend);this.resizeObserver.observe(this.host);this.setListboxContainerMaxBlockSize()}))}disconnectedCallback(){var s,t,i;(s=this.input)===null||s===void 0?void 0:s.removeEventListener("input",this.onInput);(t=this.input)===null||t===void 0?void 0:t.removeEventListener("keydown",this.onKeyDown);(i=this.input)===null||i===void 0?void 0:i.removeEventListener("focusin",this.onFocusIn);window.removeEventListener("resize",this.onWindowResize);document.removeEventListener("scrollend",this.onScrollend);this.resizeObserver.disconnect()}setListboxContainerMaxBlockSize(){if(!this.listboxContainer||!this.showSuggestions){return}if(this.listboxItems[0]&&this.showSuggestions){this.listItemBlockSize=this.listboxItems[0].getBoundingClientRect().height}const s=window.innerHeight-this.host.getBoundingClientRect().bottom;const t=this.listItemBlockSize*u+2*d+2*c;if(s>this.listItemBlockSize){if(s<t){this.listboxContainerMaxBlockSize=s-2*d}else{this.listboxContainerMaxBlockSize=t}}}showInputValueNotFound(s){var t,i;return this.processAutosuggestMarkItems(this.markTerms(s,(i=(t=this.input)===null||t===void 0?void 0:t.value.split(" ").filter((s=>s)))!==null&&i!==void 0?i:[]))}handleMark(s,t,i,e){var o,h;if(this.mark&&i){return this.processAutosuggestMarkItems(this.mark(s,t,i,e))}return this.processAutosuggestMarkItems(this.markTerms(t,(h=(o=this.input)===null||o===void 0?void 0:o.value.split(" ").filter((s=>s)))!==null&&h!==void 0?h:[]))}markTerms(s,t){if(!s||!t||t.length===0||t[0]===undefined){return[""]}const i=new RegExp(`(${a(t[0])})`,"gi");return s.split(i).reduce(((s,e)=>{if(!e){s.push(e)}else if(i.test(e)){s.push({mark:e})}else if(t.length===1){s.push(e)}else{s.push(...this.markTerms(e,t.slice(1)))}return s}),[])}processAutosuggestMarkItems(s){if(s.length===0){return[""]}return s.map((s=>{if(typeof s==="object"){return i("mark",null,s.mark)}return s}))}selectSuggestion(s){this.selectedSuggestion=s;this.setAriaActiveDescendant()}selectFirstSuggestion(){if(!this.suggestions){return}this.selectedSuggestion=this.suggestions[0];this.setAriaActiveDescendant(true)}selectLastSuggestion(){if(!this.suggestions){return}this.selectedSuggestion=this.suggestions[this.suggestions.length-1];this.setAriaActiveDescendant(true)}selectNextSuggestion(){var s;if(!this.suggestions){return}const t=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):-1;this.selectedSuggestion=(s=this.suggestions[t+1])!==null&&s!==void 0?s:this.suggestions[0];this.setAriaActiveDescendant(true)}selectPreviousSuggestion(){var s;if(!this.suggestions){return}const t=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):0;this.selectedSuggestion=(s=this.suggestions[t-1])!==null&&s!==void 0?s:this.suggestions[this.suggestions.length-1];this.setAriaActiveDescendant(true)}setAriaActiveDescendant(s=false){var t,i;if(this.selectedSuggestion){const e=this.listboxItemId(this.selectedSuggestion);(t=this.input)===null||t===void 0?void 0:t.setAttribute("aria-activedescendant",e);if(s){(i=document.getElementById(e))===null||i===void 0?void 0:i.scrollIntoView({block:"nearest"})}}}resetSelectedSuggestion(){var s;this.showLoading=!this.loadingDelayed;this.notFound=false;this.selectedSuggestion=undefined;(s=this.input)===null||s===void 0?void 0:s.setAttribute("aria-activedescendant","")}openSuggestions(s){var t,i,e,o;this.showSuggestions=(t=this.suggestions&&this.suggestions.length>0)!==null&&t!==void 0?t:false;this.notFound=(e=this.suggestions&&((i=this.suggestions)===null||i===void 0?void 0:i.length)===0)!==null&&e!==void 0?e:false;(o=this.input)===null||o===void 0?void 0:o.setAttribute("aria-expanded",(this.showSuggestions||this.notFound).toString());if(this.showSuggestions&&s==="first"){this.selectFirstSuggestion()}else if(this.showSuggestions&&s==="last"){this.selectLastSuggestion()}}closeSuggestions(){var s;this.showSuggestions=false;this.notFound=false;(s=this.input)===null||s===void 0?void 0:s.setAttribute("aria-expanded","false");this.selectFirstSuggestion()}pickSelectedValue(){var s;if(this.selectedSuggestion&&this.showSuggestions){this.dsoSelect.emit(this.selectedSuggestion)}else{this.dsoSearch.emit((s=this.input)===null||s===void 0?void 0:s.value)}this.closeSuggestions()}listboxItemId(s){if(!this.suggestions){return""}return`${this.inputId}-${this.suggestions.indexOf(s)+1}`}getChunkedExtras(s){return s.reduce(((s,t,i)=>{var e;const o=Math.floor(i/2);if(!s[o]){s[o]=[]}(e=s[o])===null||e===void 0?void 0:e.push(t);return s}),[])}render(){this.listboxItems=[];const s=this.showSuggestions||this.notFound;if(s&&this.input){this.input.setAttribute("aria-controls",this.listboxId)}else if(this.input){this.input.removeAttribute("aria-controls")}return i(e,null,i("slot",{key:"1585cf97f00dd15bb651fb51745f156bbbd75891"}),this.loading&&this.showLoading?i("div",{class:"autosuggest-progress-box"},i("dso-progress-indicator",{label:this.loadingLabel})):s&&i("dso-scrollable",{class:"listbox-container",ref:s=>this.listboxContainer=s,style:{"--max-block-size":`${this.listboxContainerMaxBlockSize}px`}},i("ul",{role:"listbox","aria-live":"polite",id:this.listboxId,"aria-labelledby":this.labelId,ref:s=>this.listbox=s},this.showSuggestions&&this.suggestions&&this.suggestions.map((s=>i("li",{role:"option",id:this.listboxItemId(s),key:s.value,onMouseEnter:()=>this.selectSuggestion(s),onMouseLeave:()=>this.resetSelectedSuggestion(),onClick:()=>this.pickSelectedValue(),"aria-selected":(s===this.selectedSuggestion).toString(),"aria-label":s.value,ref:s=>s&&this.listboxItems.push(s)},i("div",{class:"suggestion-row"},i("span",{class:"value"},this.handleMark(s,s.value,"value")),s.type?i("span",{class:"type"},this.handleMark(s,s.type,"type")):undefined),s.extras&&this.getChunkedExtras(s.extras).map(((t,e)=>i("div",{class:"suggestion-row"},t.map(((t,o)=>i("span",{class:"extra"},this.handleMark(s,t,"extra",e*2+o))))))))))||this.notFound&&i("li",null,i("span",{class:"value"},!this.notFoundLabel?this.showInputValueNotFound(`${this.inputValue} is niet gevonden.`):i("span",null,this.notFoundLabel))))))}get host(){return o(this)}static get watchers(){return{suggestions:["suggestionsWatcher"]}}};g.style=l;export{g as dso_autosuggest};
+//# sourceMappingURL=p-f1b0fe14.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["escapeStringRegexp","string","TypeError","replace","autosuggestCss","DsoAutosuggestStyle0","maxSuggestionsViewable","listboxPaddingBlock","listboxBorderWidth","Autosuggest","this","listboxItems","listboxId","v4","inputId","labelId","resizeObserver","ResizeObserver","debounce","setListboxContainerMaxBlockSize","debouncedEmitValue","value","dsoChange","emit","debouncedShowLoading","inputValue","showLoading","loadingDelayed","onInput","event","target","HTMLInputElement","match","onFocusIn","suggestOnFocus","openSuggestions","onWindowResize","onScrollend","onKeyDown","defaultPrevented","loading","key","showSuggestions","selectNextSuggestion","selectPreviousSuggestion","closeSuggestions","pickSelectedValue","preventDefault","suggestionsWatcher","resetSelectedSuggestion","notFound","onDocumentClick","listbox","Node","contains","input","componentDidRender","connectedCallback","setTimeout","host","querySelector","id","labels","length","label","setAttribute","addEventListener","window","document","observe","disconnectedCallback","_a","removeEventListener","_b","_c","disconnect","listboxContainer","listItemBlockSize","getBoundingClientRect","height","availableBlockSize","innerHeight","bottom","listboxMaxBlockSize","listboxContainerMaxBlockSize","showInputValueNotFound","text","processAutosuggestMarkItems","markTerms","split","filter","t","handleMark","suggestion","type","extraIndex","mark","suggestionValue","terms","undefined","termRegex","RegExp","reduce","total","valuePart","push","test","slice","items","map","item","h","selectSuggestion","selectedSuggestion","setAriaActiveDescendant","selectFirstSuggestion","suggestions","selectLastSuggestion","index","indexOf","scroll","listboxItemId","getElementById","scrollIntoView","block","_d","toString","dsoSelect","dsoSearch","getChunkedExtras","extras","resultArray","extra","chunkIndex","Math","floor","render","showListbox","removeAttribute","Fragment","class","loadingLabel","ref","element","style","role","onMouseEnter","onMouseLeave","onClick","li","chunk","c","i","notFoundLabel"],"sources":["../../node_modules/escape-string-regexp/index.js","src/components/autosuggest/autosuggest.scss?tag=dso-autosuggest&encapsulation=scoped","src/components/autosuggest/autosuggest.tsx"],"sourcesContent":["export default function escapeStringRegexp(string) {\n\tif (typeof string !== 'string') {\n\t\tthrow new TypeError('Expected a string');\n\t}\n\n\t// Escape characters with special meaning either inside or outside character sets.\n\t// Use a simple backslash escape when it’s always valid, and a `\\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.\n\treturn string\n\t\t.replace(/[|\\\\{}()[\\]^$+*?.]/g, '\\\\$&')\n\t\t.replace(/-/g, '\\\\x2d');\n}\n","@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"autosuggest.variables\" as core-autosuggest-variables;\r\n\r\n:host {\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.listbox-container {\r\n  inset-inline: 0;\r\n  inset-block-start: 100%;\r\n  block-size: auto;\r\n  max-block-size: var(--max-block-size);\r\n  min-block-size: core-autosuggest-variables.$listbox-min-block-size;\r\n  overflow-y: auto;\r\n  position: absolute;\r\n  z-index: zindex.$autosuggest;\r\n}\r\n\r\nul,\r\n.autosuggest-progress-box {\r\n  background-clip: padding-box;\r\n  background-color: core-autosuggest-variables.$background-color;\r\n  border: core-autosuggest-variables.$listbox-border-width solid core-autosuggest-variables.$border-color;\r\n  border-radius: scaffolding.$border-radius-base;\r\n  box-shadow: core-autosuggest-variables.$box-shadow;\r\n  list-style-type: none;\r\n  margin-block: 0;\r\n}\r\n\r\n.autosuggest-progress-box {\r\n  padding-block: units.$u1 * 1.5;\r\n  padding-inline: units.$u1;\r\n}\r\n\r\nul {\r\n  padding-block: core-autosuggest-variables.$listbox-padding-block;\r\n  padding-inline: 0;\r\n\r\n  li {\r\n    padding-block: core-autosuggest-variables.$list-item-padding-block;\r\n    padding-inline: units.$u2;\r\n\r\n    .suggestion-row {\r\n      display: flex;\r\n      justify-content: space-between;\r\n    }\r\n  }\r\n}\r\n\r\nli[aria-selected=\"true\"] {\r\n  cursor: pointer;\r\n  background-color: colors.$grasgroen;\r\n\r\n  &,\r\n  .type,\r\n  .extra {\r\n    color: colors.$wit;\r\n  }\r\n}\r\n\r\nmark {\r\n  font-weight: 700;\r\n  background-color: inherit;\r\n  color: inherit;\r\n  padding: 0;\r\n}\r\n\r\n.type,\r\n.extra {\r\n  color: colors.$grijs-60;\r\n}\r\n\r\n.type {\r\n  text-align: end;\r\n}\r\n\r\n.extra {\r\n  font-size: typography.$root-font-size-small;\r\n  line-height: typography.$root-font-size-small * typography.$line-height-base;\r\n\r\n  &:not(:first-child) {\r\n    text-align: end;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, h, Listen, Prop, State, VNode, Watch } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { v4 } from \"uuid\";\r\nimport escapeStringRegexp from \"escape-string-regexp\";\r\n\r\nimport { AutosuggestMarkFunction, AutosuggestMarkItem, Suggestion } from \"./autosuggest.interfaces\";\r\n\r\nconst maxSuggestionsViewable = 10;\r\nconst listboxPaddingBlock = 8;\r\nconst listboxBorderWidth = 1;\r\n\r\n@Component({\r\n  tag: \"dso-autosuggest\",\r\n  styleUrl: \"autosuggest.scss\",\r\n  scoped: true,\r\n})\r\nexport class Autosuggest {\r\n  /**\r\n   * The suggestions for the value of the slotted input element. Optionally a\r\n   * Suggestion can have a `type` and `item`.\r\n   *\r\n   * The `type` is used to style the suggestion. `item` can be use to reference\r\n   * the original object that was used to create the suggestion.\r\n   *\r\n   * The value should be null when no suggestions have been fetched.\r\n   */\r\n  @Prop()\r\n  readonly suggestions: Suggestion[] | null = null;\r\n\r\n  /**\r\n   * Shows progress indicator when fetching results.\r\n   */\r\n  @Prop()\r\n  loading = false;\r\n\r\n  /**\r\n   * To override progress indicator's default loading label.\r\n   */\r\n  @Prop()\r\n  loadingLabel?: string = \"Een moment geduld.\";\r\n\r\n  /**\r\n   * To delay progress indicator showing (in ms).\r\n   */\r\n  @Prop()\r\n  loadingDelayed?: number;\r\n\r\n  /**\r\n   * To show text when no results are found.\r\n   */\r\n  @Prop()\r\n  notFoundLabel?: string;\r\n\r\n  /**\r\n   * Whether the previous suggestions will be presented when the input gets focus again.\r\n   */\r\n  @Prop()\r\n  suggestOnFocus = false;\r\n\r\n  /**\r\n   * A function provided by the consumer of the autosuggest component, that returns an array of `AutosuggestMarkItem`s\r\n   */\r\n  @Prop()\r\n  mark?: AutosuggestMarkFunction;\r\n\r\n  /**\r\n   * Emitted when a suggestion is selected.\r\n   * The `detail` property of the `CustomEvent` will contain the selected suggestion.\r\n   */\r\n  @Event()\r\n  dsoSelect!: EventEmitter<Suggestion>;\r\n\r\n  /**\r\n   * This is emitted debounced for every change for the slotted input type=text element.\r\n   */\r\n  @Event()\r\n  dsoChange!: EventEmitter<string>;\r\n\r\n  /**\r\n   * Emitted when enter is pressed.\r\n   * The `detail` property of the `CustomEvent` will contain the input text.\r\n   */\r\n  @Event()\r\n  dsoSearch!: EventEmitter<string>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAutosuggestElement;\r\n\r\n  @State()\r\n  showSuggestions = false;\r\n\r\n  @State()\r\n  selectedSuggestion: Suggestion | undefined;\r\n\r\n  @State()\r\n  notFound = false;\r\n\r\n  @State()\r\n  showLoading = false;\r\n\r\n  @State()\r\n  listItemBlockSize = 0;\r\n\r\n  @State()\r\n  listboxContainerMaxBlockSize = 0;\r\n\r\n  @Watch(\"suggestions\")\r\n  suggestionsWatcher() {\r\n    this.resetSelectedSuggestion();\r\n\r\n    if ((!this.showSuggestions || !this.notFound) && this.inputValue) {\r\n      this.openSuggestions();\r\n    } else if ((this.showSuggestions || this.notFound) && !this.inputValue) {\r\n      this.closeSuggestions();\r\n    }\r\n  }\r\n\r\n  private input?: HTMLInputElement;\r\n\r\n  private listboxContainer: HTMLDsoScrollableElement | undefined;\r\n\r\n  private listbox: HTMLUListElement | undefined;\r\n\r\n  private listboxItems: HTMLLIElement[] = [];\r\n\r\n  private listboxId: string = v4();\r\n\r\n  private inputId: string = v4();\r\n\r\n  private labelId: string = v4();\r\n\r\n  private resizeObserver = new ResizeObserver(debounce(() => this.setListboxContainerMaxBlockSize(), 150));\r\n\r\n  private debouncedEmitValue = debounce((value: string) => {\r\n    this.dsoChange.emit(value);\r\n    this.debouncedShowLoading();\r\n  }, 200);\r\n\r\n  private debouncedShowLoading = debounce(() => {\r\n    if (this.inputValue) {\r\n      this.showLoading = true;\r\n    }\r\n  }, this.loadingDelayed);\r\n\r\n  private inputValue = \"\";\r\n\r\n  private onInput = (event: Event) => {\r\n    if (!(event.target instanceof HTMLInputElement)) {\r\n      return;\r\n      // throw new Error(\"event.target is not instanceof HTMLInputElement\"); #2293\r\n    }\r\n\r\n    this.showLoading = !this.loadingDelayed;\r\n    this.inputValue = event.target.value;\r\n    this.debouncedEmitValue(event.target.value.match(/(\\S+)/g) ? event.target.value : \"\");\r\n  };\r\n\r\n  private onFocusIn = () => {\r\n    if (this.suggestOnFocus) {\r\n      this.openSuggestions();\r\n    }\r\n  };\r\n\r\n  @Listen(\"click\", { target: \"document\" })\r\n  onDocumentClick(event: MouseEvent) {\r\n    if (\r\n      (this.showSuggestions || this.notFound) &&\r\n      this.listbox &&\r\n      event.target instanceof Node &&\r\n      !this.listbox.contains(event.target) &&\r\n      this.input !== event.target\r\n    ) {\r\n      this.closeSuggestions();\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setListboxContainerMaxBlockSize();\r\n  }\r\n\r\n  connectedCallback() {\r\n    setTimeout(() => {\r\n      const input = this.host.querySelector('input[type=\"text\"]');\r\n      if (!(input instanceof HTMLInputElement)) {\r\n        return;\r\n        // throw new ReferenceError(\"Mandatory text input not found\"); #2293\r\n      }\r\n\r\n      this.input = input;\r\n      if (input.id) {\r\n        this.inputId = input.id;\r\n      } else {\r\n        input.id = this.inputId;\r\n      }\r\n\r\n      if (!this.input.labels || this.input.labels.length < 1) {\r\n        return;\r\n        // throw new ReferenceError(\"Mandatory label for text input not found\"); #2293\r\n      }\r\n\r\n      const label = this.input.labels[0];\r\n      if (label?.id) {\r\n        this.labelId = label.id;\r\n      } else if (label) {\r\n        label.id = this.labelId;\r\n      }\r\n\r\n      this.input.setAttribute(\"role\", \"combobox\");\r\n      this.input.setAttribute(\"aria-haspopup\", \"listbox\");\r\n      this.input.setAttribute(\"aria-expanded\", \"false\");\r\n      this.input.setAttribute(\"autocomplete\", \"off\");\r\n      this.input.setAttribute(\"aria-autocomplete\", \"list\");\r\n      this.input.setAttribute(\"aria-activedescendant\", \"\");\r\n      this.input.addEventListener(\"input\", this.onInput);\r\n      this.input.addEventListener(\"keydown\", this.onKeyDown);\r\n      this.input.addEventListener(\"focusin\", this.onFocusIn);\r\n\r\n      window.addEventListener(\"resize\", this.onWindowResize);\r\n\r\n      document.addEventListener(\"scrollend\", this.onScrollend);\r\n\r\n      this.resizeObserver.observe(this.host);\r\n\r\n      this.setListboxContainerMaxBlockSize();\r\n    });\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.input?.removeEventListener(\"input\", this.onInput);\r\n    this.input?.removeEventListener(\"keydown\", this.onKeyDown);\r\n    this.input?.removeEventListener(\"focusin\", this.onFocusIn);\r\n\r\n    window.removeEventListener(\"resize\", this.onWindowResize);\r\n\r\n    document.removeEventListener(\"scrollend\", this.onScrollend);\r\n\r\n    this.resizeObserver.disconnect();\r\n  }\r\n\r\n  private onWindowResize = debounce(() => this.setListboxContainerMaxBlockSize(), 150);\r\n\r\n  private onScrollend = () => this.setListboxContainerMaxBlockSize();\r\n\r\n  private setListboxContainerMaxBlockSize(): void {\r\n    if (!this.listboxContainer || !this.showSuggestions) {\r\n      return;\r\n    }\r\n\r\n    if (this.listboxItems[0] && this.showSuggestions) {\r\n      this.listItemBlockSize = this.listboxItems[0].getBoundingClientRect().height;\r\n    }\r\n\r\n    const availableBlockSize = window.innerHeight - this.host.getBoundingClientRect().bottom;\r\n    const listboxMaxBlockSize =\r\n      this.listItemBlockSize * maxSuggestionsViewable + 2 * listboxPaddingBlock + 2 * listboxBorderWidth;\r\n\r\n    if (availableBlockSize > this.listItemBlockSize) {\r\n      if (availableBlockSize < listboxMaxBlockSize) {\r\n        this.listboxContainerMaxBlockSize = availableBlockSize - 2 * listboxPaddingBlock;\r\n      } else {\r\n        this.listboxContainerMaxBlockSize = listboxMaxBlockSize;\r\n      }\r\n    }\r\n  }\r\n\r\n  private showInputValueNotFound(text: string) {\r\n    return this.processAutosuggestMarkItems(this.markTerms(text, this.input?.value.split(\" \").filter((t) => t) ?? []));\r\n  }\r\n\r\n  private handleMark(\r\n    suggestion: Suggestion,\r\n    text: string,\r\n    type?: \"value\" | \"type\" | \"extra\",\r\n    extraIndex?: number,\r\n  ): (VNode | string)[] {\r\n    if (this.mark && type) {\r\n      return this.processAutosuggestMarkItems(this.mark(suggestion, text, type, extraIndex));\r\n    }\r\n    return this.processAutosuggestMarkItems(this.markTerms(text, this.input?.value.split(\" \").filter((t) => t) ?? []));\r\n  }\r\n\r\n  private markTerms(suggestionValue: string, terms: string[]): AutosuggestMarkItem[] {\r\n    if (!suggestionValue || !terms || terms.length === 0 || terms[0] === undefined) {\r\n      return [\"\"];\r\n    }\r\n\r\n    const termRegex = new RegExp(`(${escapeStringRegexp(terms[0])})`, \"gi\");\r\n\r\n    return suggestionValue.split(termRegex).reduce((total: AutosuggestMarkItem[], valuePart: string) => {\r\n      if (!valuePart) {\r\n        total.push(valuePart);\r\n      } else if (termRegex.test(valuePart)) {\r\n        total.push({ mark: valuePart });\r\n      } else if (terms.length === 1) {\r\n        total.push(valuePart);\r\n      } else {\r\n        total.push(...this.markTerms(valuePart, terms.slice(1)));\r\n      }\r\n\r\n      return total;\r\n    }, []);\r\n  }\r\n\r\n  private processAutosuggestMarkItems(items: AutosuggestMarkItem[]): (VNode | string)[] {\r\n    if (items.length === 0) {\r\n      return [\"\"];\r\n    }\r\n\r\n    return items.map((item) => {\r\n      if (typeof item === \"object\") {\r\n        return <mark>{item.mark}</mark>;\r\n      }\r\n      return item;\r\n    });\r\n  }\r\n\r\n  private selectSuggestion(suggestion: Suggestion) {\r\n    this.selectedSuggestion = suggestion;\r\n\r\n    this.setAriaActiveDescendant();\r\n  }\r\n\r\n  private selectFirstSuggestion() {\r\n    if (!this.suggestions) {\r\n      return;\r\n    }\r\n\r\n    this.selectedSuggestion = this.suggestions[0];\r\n\r\n    this.setAriaActiveDescendant(true);\r\n  }\r\n\r\n  private selectLastSuggestion() {\r\n    if (!this.suggestions) {\r\n      return;\r\n    }\r\n\r\n    this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];\r\n\r\n    this.setAriaActiveDescendant(true);\r\n  }\r\n\r\n  private selectNextSuggestion() {\r\n    if (!this.suggestions) {\r\n      return;\r\n    }\r\n\r\n    const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : -1;\r\n\r\n    this.selectedSuggestion = this.suggestions[index + 1] ?? this.suggestions[0];\r\n\r\n    this.setAriaActiveDescendant(true);\r\n  }\r\n\r\n  private selectPreviousSuggestion() {\r\n    if (!this.suggestions) {\r\n      return;\r\n    }\r\n\r\n    const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : 0;\r\n\r\n    this.selectedSuggestion = this.suggestions[index - 1] ?? this.suggestions[this.suggestions.length - 1];\r\n\r\n    this.setAriaActiveDescendant(true);\r\n  }\r\n\r\n  private setAriaActiveDescendant(scroll = false): void {\r\n    if (this.selectedSuggestion) {\r\n      const id = this.listboxItemId(this.selectedSuggestion);\r\n      this.input?.setAttribute(\"aria-activedescendant\", id);\r\n      if (scroll) {\r\n        document.getElementById(id)?.scrollIntoView({ block: \"nearest\" });\r\n      }\r\n    }\r\n  }\r\n\r\n  private resetSelectedSuggestion() {\r\n    this.showLoading = !this.loadingDelayed;\r\n    this.notFound = false;\r\n    this.selectedSuggestion = undefined;\r\n    this.input?.setAttribute(\"aria-activedescendant\", \"\");\r\n  }\r\n\r\n  private openSuggestions(selectSuggestion?: \"first\" | \"last\") {\r\n    this.showSuggestions = (this.suggestions && this.suggestions.length > 0) ?? false;\r\n    this.notFound = (this.suggestions && this.suggestions?.length === 0) ?? false;\r\n    this.input?.setAttribute(\"aria-expanded\", (this.showSuggestions || this.notFound).toString());\r\n\r\n    if (this.showSuggestions && selectSuggestion === \"first\") {\r\n      this.selectFirstSuggestion();\r\n    } else if (this.showSuggestions && selectSuggestion === \"last\") {\r\n      this.selectLastSuggestion();\r\n    }\r\n  }\r\n\r\n  private closeSuggestions() {\r\n    this.showSuggestions = false;\r\n    this.notFound = false;\r\n    this.input?.setAttribute(\"aria-expanded\", \"false\");\r\n    this.selectFirstSuggestion();\r\n  }\r\n\r\n  private pickSelectedValue() {\r\n    if (this.selectedSuggestion && this.showSuggestions) {\r\n      this.dsoSelect.emit(this.selectedSuggestion);\r\n    } else {\r\n      this.dsoSearch.emit(this.input?.value);\r\n    }\r\n\r\n    this.closeSuggestions();\r\n  }\r\n\r\n  private onKeyDown = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented || this.loading) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"ArrowDown\":\r\n        if (!this.showSuggestions) {\r\n          this.openSuggestions(\"first\");\r\n        } else {\r\n          this.selectNextSuggestion();\r\n        }\r\n\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        if (!this.showSuggestions) {\r\n          this.openSuggestions(\"last\");\r\n        } else {\r\n          this.selectPreviousSuggestion();\r\n        }\r\n\r\n        break;\r\n\r\n      case \"Tab\":\r\n        this.closeSuggestions();\r\n        return;\r\n\r\n      case \"Escape\":\r\n        this.closeSuggestions();\r\n        break;\r\n\r\n      case \"Enter\":\r\n        this.pickSelectedValue();\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  private listboxItemId(suggestion: Suggestion): string {\r\n    if (!this.suggestions) {\r\n      return \"\";\r\n    }\r\n    return `${this.inputId}-${this.suggestions.indexOf(suggestion) + 1}`;\r\n  }\r\n\r\n  private getChunkedExtras(extras: string[]): string[][] {\r\n    return extras.reduce((resultArray: string[][], extra, index) => {\r\n      const chunkIndex = Math.floor(index / 2);\r\n\r\n      if (!resultArray[chunkIndex]) {\r\n        resultArray[chunkIndex] = [];\r\n      }\r\n      resultArray[chunkIndex]?.push(extra);\r\n      return resultArray;\r\n    }, []);\r\n  }\r\n\r\n  render() {\r\n    this.listboxItems = [];\r\n\r\n    const showListbox = this.showSuggestions || this.notFound;\r\n\r\n    if (showListbox && this.input) {\r\n      this.input.setAttribute(\"aria-controls\", this.listboxId);\r\n    } else if (this.input) {\r\n      this.input.removeAttribute(\"aria-controls\");\r\n    }\r\n\r\n    return (\r\n      <>\r\n        <slot />\r\n        {this.loading && this.showLoading ? (\r\n          <div class=\"autosuggest-progress-box\">\r\n            <dso-progress-indicator label={this.loadingLabel}></dso-progress-indicator>\r\n          </div>\r\n        ) : (\r\n          showListbox && (\r\n            <dso-scrollable\r\n              class=\"listbox-container\"\r\n              ref={(element) => (this.listboxContainer = element)}\r\n              style={{ \"--max-block-size\": `${this.listboxContainerMaxBlockSize}px` }}\r\n            >\r\n              <ul\r\n                role=\"listbox\"\r\n                aria-live=\"polite\"\r\n                id={this.listboxId}\r\n                aria-labelledby={this.labelId}\r\n                ref={(element) => (this.listbox = element)}\r\n              >\r\n                {(this.showSuggestions &&\r\n                  this.suggestions &&\r\n                  this.suggestions.map((suggestion) => (\r\n                    <li\r\n                      role=\"option\"\r\n                      id={this.listboxItemId(suggestion)}\r\n                      key={suggestion.value}\r\n                      onMouseEnter={() => this.selectSuggestion(suggestion)}\r\n                      onMouseLeave={() => this.resetSelectedSuggestion()}\r\n                      onClick={() => this.pickSelectedValue()}\r\n                      aria-selected={(suggestion === this.selectedSuggestion).toString()}\r\n                      aria-label={suggestion.value}\r\n                      ref={(li) => li && this.listboxItems.push(li)}\r\n                    >\r\n                      <div class=\"suggestion-row\">\r\n                        <span class=\"value\">{this.handleMark(suggestion, suggestion.value, \"value\")}</span>\r\n                        {suggestion.type ? (\r\n                          <span class=\"type\">{this.handleMark(suggestion, suggestion.type, \"type\")}</span>\r\n                        ) : undefined}\r\n                      </div>\r\n                      {suggestion.extras &&\r\n                        this.getChunkedExtras(suggestion.extras).map((chunk, index) => (\r\n                          <div class=\"suggestion-row\">\r\n                            {chunk.map((c, i) => (\r\n                              <span class=\"extra\">{this.handleMark(suggestion, c, \"extra\", index * 2 + i)}</span>\r\n                            ))}\r\n                          </div>\r\n                        ))}\r\n                    </li>\r\n                  ))) ||\r\n                  (this.notFound && (\r\n                    <li>\r\n                      <span class=\"value\">\r\n                        {!this.notFoundLabel ? (\r\n                          this.showInputValueNotFound(`${this.inputValue} is niet gevonden.`)\r\n                        ) : (\r\n                          <span>{this.notFoundLabel}</span>\r\n                        )}\r\n                      </span>\r\n                    </li>\r\n                  ))}\r\n              </ul>\r\n            </dso-scrollable>\r\n          )\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/{p-feedd113.entry.js → p-f9a0b819.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 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
+import{r as n,c as o,h as l,F as e}from"./p-b623c74b.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-f9a0b819.entry.js.map

package/dist/dso-toolkit/{p-301dbfb1.entry.js → p-ff8a8429.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,h as r}from"./p-d638c2b0.js";const e=":host{display:block}*,*::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}.progress{margin-block-end:8px}.progress .progress-bar{background-color:#fff;border:1px solid #39870c;display:block;block-size:16px}.progress .progress-bar>span{background-color:#39870c;float:inline-start;block-size:100%;inline-size:0%}.progress .progress-bar+span{font-size:14px;margin-block-start:8px}";const a=e;const o=class{constructor(r){s(this,r);this.progress=undefined;this.min=0;this.max=100}render(){const s=Math.round(this.progress);const e=`${s}%`;return r("div",{key:"d1b4e6eb8fc5a1ee9b96f0774474420c271f759b",class:"progress"},r("span",{key:"b7a00ad201b2c7001c6ec7286b4aed496b7d8d2a",class:"progress-bar",role:"progressbar","aria-labelledby":"progress-bar-label","aria-valuenow":s,"aria-valuemin":this.min,"aria-valuemax":this.max},r("span",{key:"471b0487eeec277707610bc0b81bb2c860fe02ac",style:{width:`${e}`}})),r("span",{key:"513aa7c0f9881c9d95d54264553b16ddf0121e42",id:"progress-bar-label"},r("slot",{key:"6ad0ef5debf6fb5d67c3b38ab0ad148c855a4242"})))}};o.style=a;export{o as dso_progress_bar};
-//# sourceMappingURL=p-301dbfb1.entry.js.map
+import{r as s,h as r}from"./p-b623c74b.js";const e=":host{display:block}*,*::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}.progress{margin-block-end:8px}.progress .progress-bar{background-color:#fff;border:1px solid #39870c;display:block;block-size:16px}.progress .progress-bar>span{background-color:#39870c;float:inline-start;block-size:100%;inline-size:0%}.progress .progress-bar+span{font-size:14px;margin-block-start:8px}";const a=e;const o=class{constructor(r){s(this,r);this.progress=undefined;this.min=0;this.max=100}render(){const s=Math.round(this.progress);const e=`${s}%`;return r("div",{key:"d1b4e6eb8fc5a1ee9b96f0774474420c271f759b",class:"progress"},r("span",{key:"b7a00ad201b2c7001c6ec7286b4aed496b7d8d2a",class:"progress-bar",role:"progressbar","aria-labelledby":"progress-bar-label","aria-valuenow":s,"aria-valuemin":this.min,"aria-valuemax":this.max},r("span",{key:"471b0487eeec277707610bc0b81bb2c860fe02ac",style:{width:`${e}`}})),r("span",{key:"513aa7c0f9881c9d95d54264553b16ddf0121e42",id:"progress-bar-label"},r("slot",{key:"6ad0ef5debf6fb5d67c3b38ab0ad148c855a4242"})))}};o.style=a;export{o as dso_progress_bar};
+//# sourceMappingURL=p-ff8a8429.entry.js.map

package/dist/esm/{annotation-body-a8fadf3a.js → annotation-body-75f77191.js}

@@ -1,4 +1,4 @@
-import { h } from './index-c8e19f05.js';
+import { h } from './index-1a8f2a10.js';
 
 const AnnotationBody = ({ symbol, title, data, active, dsoActiveChange, }) => (h("div", { class: "annotation-body" },
     symbol && h("div", { class: "annotation-symbol" }, symbol),
@@ -10,4 +10,4 @@ const AnnotationBody = ({ symbol, title, data, active, dsoActiveChange, }) => (h
 
 export { AnnotationBody as A };
 
-//# sourceMappingURL=annotation-body-a8fadf3a.js.map
+//# sourceMappingURL=annotation-body-75f77191.js.map

package/dist/esm/{annotation-body-a8fadf3a.js.map → annotation-body-75f77191.js.map}

@@ -1 +1 @@
-{"file":"annotation-body-a8fadf3a.js","mappings":";;MAWa,cAAc,GAA6C,CAAC,EACvE,MAAM,EACN,KAAK,EACL,IAAI,EACJ,MAAM,EACN,eAAe,GAChB,MACC,WAAK,KAAK,EAAC,iBAAiB;IACzB,MAAM,IAAI,WAAK,KAAK,EAAC,mBAAmB,IAAE,MAAM,CAAO;IACxD,WAAK,KAAK,EAAC,iBAAiB;QAC1B,SAAG,KAAK,EAAC,kBAAkB,IAAE,KAAK,CAAK;QACtC,IAAI,IAAI,SAAG,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAK,CAC1C;IACL,eAAe,KACd,WAAK,KAAK,EAAC,oBAAoB;QAC7B,wBACE,eAAe,EAAC,eAAe,EAC/B,OAAO,EAAE,MAAM,EACf,iBAAiB,EAAE,CAAC,CAAC,KAAK,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,GAC7G,CACE,CACP,CACG;;;;","names":[],"sources":["src/components/annotation/annotation-body.tsx"],"sourcesContent":["import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport { AnnotationActiveChangeEvent } from \"./annotation.interfaces\";\r\n\r\ninterface AnnotationBodyProps {\r\n  title: JSX.Element;\r\n  data?: JSX.Element;\r\n  active?: boolean;\r\n  dsoActiveChange?: EventEmitter<AnnotationActiveChangeEvent>;\r\n  symbol?: JSX.Element;\r\n}\r\n\r\nexport const AnnotationBody: FunctionalComponent<AnnotationBodyProps> = ({\r\n  symbol,\r\n  title,\r\n  data,\r\n  active,\r\n  dsoActiveChange,\r\n}) => (\r\n  <div class=\"annotation-body\">\r\n    {symbol && <div class=\"annotation-symbol\">{symbol}</div>}\r\n    <div class=\"annotation-info\">\r\n      <p class=\"annotation-title\">{title}</p>\r\n      {data && <p class=\"annotation-data\">{data}</p>}\r\n    </div>\r\n    {dsoActiveChange && (\r\n      <div class=\"annotation-control\">\r\n        <dso-slide-toggle\r\n          accessibleLabel=\"Toon op kaart\"\r\n          checked={active}\r\n          onDsoActiveChange={(e) => dsoActiveChange.emit({ current: Boolean(active), next: !active, originalEvent: e })}\r\n        />\r\n      </div>\r\n    )}\r\n  </div>\r\n);\r\n"],"version":3}
+{"file":"annotation-body-75f77191.js","mappings":";;MAWa,cAAc,GAA6C,CAAC,EACvE,MAAM,EACN,KAAK,EACL,IAAI,EACJ,MAAM,EACN,eAAe,GAChB,MACC,WAAK,KAAK,EAAC,iBAAiB;IACzB,MAAM,IAAI,WAAK,KAAK,EAAC,mBAAmB,IAAE,MAAM,CAAO;IACxD,WAAK,KAAK,EAAC,iBAAiB;QAC1B,SAAG,KAAK,EAAC,kBAAkB,IAAE,KAAK,CAAK;QACtC,IAAI,IAAI,SAAG,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAK,CAC1C;IACL,eAAe,KACd,WAAK,KAAK,EAAC,oBAAoB;QAC7B,wBACE,eAAe,EAAC,eAAe,EAC/B,OAAO,EAAE,MAAM,EACf,iBAAiB,EAAE,CAAC,CAAC,KAAK,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,GAC7G,CACE,CACP,CACG;;;;","names":[],"sources":["src/components/annotation/annotation-body.tsx"],"sourcesContent":["import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport { AnnotationActiveChangeEvent } from \"./annotation.interfaces\";\r\n\r\ninterface AnnotationBodyProps {\r\n  title: JSX.Element;\r\n  data?: JSX.Element;\r\n  active?: boolean;\r\n  dsoActiveChange?: EventEmitter<AnnotationActiveChangeEvent>;\r\n  symbol?: JSX.Element;\r\n}\r\n\r\nexport const AnnotationBody: FunctionalComponent<AnnotationBodyProps> = ({\r\n  symbol,\r\n  title,\r\n  data,\r\n  active,\r\n  dsoActiveChange,\r\n}) => (\r\n  <div class=\"annotation-body\">\r\n    {symbol && <div class=\"annotation-symbol\">{symbol}</div>}\r\n    <div class=\"annotation-info\">\r\n      <p class=\"annotation-title\">{title}</p>\r\n      {data && <p class=\"annotation-data\">{data}</p>}\r\n    </div>\r\n    {dsoActiveChange && (\r\n      <div class=\"annotation-control\">\r\n        <dso-slide-toggle\r\n          accessibleLabel=\"Toon op kaart\"\r\n          checked={active}\r\n          onDsoActiveChange={(e) => dsoActiveChange.emit({ current: Boolean(active), next: !active, originalEvent: e })}\r\n        />\r\n      </div>\r\n    )}\r\n  </div>\r\n);\r\n"],"version":3}

package/dist/esm/{annotation-symbol-slot-28380b95.js → annotation-symbol-slot-1947dce6.js}

@@ -1,4 +1,4 @@
-import { h, f as forceUpdate } from './index-c8e19f05.js';
+import { h, f as forceUpdate } from './index-1a8f2a10.js';
 
 const AnnotationGewijzigdeLocatie = () => (h("dso-label", { class: "gewijzigde-locatie", status: "warning", compact: true }, "gewijzigde locatie"));
 
@@ -31,4 +31,4 @@ const AnnotationSymbolSlot = () => h("slot", { name: "symbool" });
 
 export { AnnotationSymbolSlot as A, AnnotationGewijzigdeLocatie as a, watcher as w };
 
-//# sourceMappingURL=annotation-symbol-slot-28380b95.js.map
+//# sourceMappingURL=annotation-symbol-slot-1947dce6.js.map

package/dist/esm/{annotation-symbol-slot-28380b95.js.map → annotation-symbol-slot-1947dce6.js.map}

@@ -1 +1 @@
-{"file":"annotation-symbol-slot-28380b95.js","mappings":";;MAEa,2BAA2B,GAAwB,OAC9D,iBAAW,KAAK,EAAC,oBAAoB,EAAC,MAAM,EAAC,SAAS,EAAC,OAAO,+BAElD;;ACHd,MAAM,SAAS,GAAG,IAAI,OAAO,EAAiC,CAAC;SAE/C,OAAO,CAAC,IAAiB;IACvC,OAAO;QACL,KAAK;YACH,IAAI,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YACnC,IAAI,CAAC,QAAQ,EAAE;gBACb,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;gBACzD,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;aAC/B;YAED,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;SAC7C;QACD,UAAU;YACR,OAAO,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;SACtD;QACD,OAAO;YACL,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YACrC,IAAI,CAAC,QAAQ,EAAE;gBACb,OAAO;aACR;YAED,QAAQ,CAAC,UAAU,EAAE,CAAC;YACtB,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;SACxB;KACF,CAAC;AACJ;;MC1Ba,oBAAoB,GAAwB,MAAM,YAAM,IAAI,EAAC,SAAS;;;;","names":[],"sources":["src/components/annotation/annotation-gewijzigde-locatie.tsx","src/components/annotation/annotation-watcher.ts","src/components/annotation/annotation-symbol-slot.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport const AnnotationGewijzigdeLocatie: FunctionalComponent = () => (\r\n  <dso-label class=\"gewijzigde-locatie\" status=\"warning\" compact>\r\n    gewijzigde locatie\r\n  </dso-label>\r\n);\r\n","import { forceUpdate } from \"@stencil/core\";\r\n\r\nconst observers = new WeakMap<HTMLElement, MutationObserver>();\r\n\r\nexport function watcher(host: HTMLElement) {\r\n  return {\r\n    watch() {\r\n      let observer = observers.get(host);\r\n      if (!observer) {\r\n        observer = new MutationObserver(() => forceUpdate(host));\r\n        observers.set(host, observer);\r\n      }\r\n\r\n      observer.observe(host, { childList: true });\r\n    },\r\n    hasSymbool() {\r\n      return host.querySelector(\"[slot=symbool]\") !== null;\r\n    },\r\n    unwatch() {\r\n      const observer = observers.get(host);\r\n      if (!observer) {\r\n        return;\r\n      }\r\n\r\n      observer.disconnect();\r\n      observers.delete(host);\r\n    },\r\n  };\r\n}\r\n","import { h, FunctionalComponent } from \"@stencil/core\";\r\n\r\nexport const AnnotationSymbolSlot: FunctionalComponent = () => <slot name=\"symbool\" />;\r\n"],"version":3}
+{"file":"annotation-symbol-slot-1947dce6.js","mappings":";;MAEa,2BAA2B,GAAwB,OAC9D,iBAAW,KAAK,EAAC,oBAAoB,EAAC,MAAM,EAAC,SAAS,EAAC,OAAO,+BAElD;;ACHd,MAAM,SAAS,GAAG,IAAI,OAAO,EAAiC,CAAC;SAE/C,OAAO,CAAC,IAAiB;IACvC,OAAO;QACL,KAAK;YACH,IAAI,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YACnC,IAAI,CAAC,QAAQ,EAAE;gBACb,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;gBACzD,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;aAC/B;YAED,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;SAC7C;QACD,UAAU;YACR,OAAO,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;SACtD;QACD,OAAO;YACL,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YACrC,IAAI,CAAC,QAAQ,EAAE;gBACb,OAAO;aACR;YAED,QAAQ,CAAC,UAAU,EAAE,CAAC;YACtB,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;SACxB;KACF,CAAC;AACJ;;MC1Ba,oBAAoB,GAAwB,MAAM,YAAM,IAAI,EAAC,SAAS;;;;","names":[],"sources":["src/components/annotation/annotation-gewijzigde-locatie.tsx","src/components/annotation/annotation-watcher.ts","src/components/annotation/annotation-symbol-slot.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport const AnnotationGewijzigdeLocatie: FunctionalComponent = () => (\r\n  <dso-label class=\"gewijzigde-locatie\" status=\"warning\" compact>\r\n    gewijzigde locatie\r\n  </dso-label>\r\n);\r\n","import { forceUpdate } from \"@stencil/core\";\r\n\r\nconst observers = new WeakMap<HTMLElement, MutationObserver>();\r\n\r\nexport function watcher(host: HTMLElement) {\r\n  return {\r\n    watch() {\r\n      let observer = observers.get(host);\r\n      if (!observer) {\r\n        observer = new MutationObserver(() => forceUpdate(host));\r\n        observers.set(host, observer);\r\n      }\r\n\r\n      observer.observe(host, { childList: true });\r\n    },\r\n    hasSymbool() {\r\n      return host.querySelector(\"[slot=symbool]\") !== null;\r\n    },\r\n    unwatch() {\r\n      const observer = observers.get(host);\r\n      if (!observer) {\r\n        return;\r\n      }\r\n\r\n      observer.disconnect();\r\n      observers.delete(host);\r\n    },\r\n  };\r\n}\r\n","import { h, FunctionalComponent } from \"@stencil/core\";\r\n\r\nexport const AnnotationSymbolSlot: FunctionalComponent = () => <slot name=\"symbool\" />;\r\n"],"version":3}

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

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