@dso-toolkit/core 73.0.1 → 73.2.0

package/dist/dso-toolkit/{p-a0960751.entry.js.map → p-0764520c.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["tabCss","Tab","constructor","hostRef","this","emitEvent","e","dsoTabSwitch","emit","originalEvent","isModifiedEvent","MouseEvent","keyUpHandler","key","disabled","active","clickHandler","href","preventDefault","_dsoFocus","_a","anchorOrButtonRef","focus","render","h","Object","assign","role","onKeyUp","onClick","tabIndex","ref","element","type"],"sources":["src/components/tabs/components/tab.scss?tag=dso-tab&encapsulation=shadow","src/components/tabs/components/tab.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"tab.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n  border-color: tab-variables.$color;\r\n  // Make the list-items overlay the bottom border\r\n  margin-block-end: -1px;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  :host {\r\n    margin-block: 10px;\r\n  }\r\n\r\n  :host(:first-child) {\r\n    margin-block-start: 0;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  [role=\"tab\"] {\r\n    &,\r\n    &:active,\r\n    &:focus,\r\n    &:hover,\r\n    &:visited {\r\n      background-color: colors.$wit;\r\n      border: 1px solid tab-variables.$color;\r\n      border-block-end-color: colors.$wit;\r\n      color: tab-variables.$color;\r\n      cursor: default;\r\n\r\n      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n        border-block-end-color: tab-variables.$color;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n:host([disabled]:not([disabled=\"false\"])) {\r\n  [role=\"tab\"] {\r\n    color: tab-variables.$nav-disabled-link-color;\r\n\r\n    &:hover,\r\n    &:focus {\r\n      color: tab-variables.$nav-disabled-link-hover-color;\r\n      text-decoration: none;\r\n      cursor: scaffolding.$cursor-disabled;\r\n      background-color: transparent;\r\n\r\n      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n        border-block-end-color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\na {\r\n  @include link.clean();\r\n\r\n  &:visited {\r\n    color: tab-variables.$text-color;\r\n  }\r\n}\r\n\r\nbutton {\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  background-color: transparent;\r\n}\r\n\r\n[role=\"tab\"] {\r\n  font-weight: bold;\r\n  cursor: pointer;\r\n  display: block;\r\n  min-block-size: tab-variables.$block-size;\r\n  border: 1px solid transparent;\r\n  border-radius: tab-variables.$border-radius tab-variables.$border-radius 0 0;\r\n  color: tab-variables.$text-color;\r\n  line-height: typography.$line-height-base;\r\n  padding-block: tab-variables.$block-padding;\r\n  padding-inline: tab-variables.$inline-padding;\r\n\r\n  &:hover {\r\n    border-color: tab-variables.$link-hover-border-color tab-variables.$link-hover-border-color\r\n      tab-variables.$border-color;\r\n  }\r\n\r\n  &:hover,\r\n  &:focus {\r\n    text-decoration: none;\r\n    background-color: tab-variables.$nav-link-hover-bg;\r\n  }\r\n\r\n  &:active,\r\n  &:focus,\r\n  &:hover {\r\n    background-color: tab-variables.$hover-color;\r\n    border: 1px solid transparent;\r\n    border-block-end-color: tab-variables.$color;\r\n    text-decoration: none;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      border-block-end-color: colors.$wit;\r\n    }\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border-color: colors.$wit;\r\n    border-radius: 8px;\r\n    padding-block: 18px;\r\n    padding-inline: 20px;\r\n    inline-size: 100%;\r\n    text-align: start;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h, Method } from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this tab\r\n */\r\n@Component({\r\n  tag: \"dso-tab\",\r\n  styleUrl: \"tab.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tab {\r\n  @Element()\r\n  host!: HTMLDsoTabElement;\r\n\r\n  /**\r\n   * Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n   */\r\n  @Prop()\r\n  href?: string;\r\n\r\n  /**\r\n   * Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n   */\r\n  @Event()\r\n  dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _dsoFocus() {\r\n    this.anchorOrButtonRef?.focus();\r\n  }\r\n\r\n  private anchorOrButtonRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  private emitEvent = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoTabSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n    });\r\n  };\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (e.key === \" \" && !this.disabled && !this.active) {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  private clickHandler = (e: MouseEvent) => {\r\n    if ((this.disabled && this.href) || this.active) {\r\n      e.preventDefault();\r\n    } else {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return this.href ? (\r\n      <a\r\n        role=\"tab\"\r\n        href={this.href}\r\n        onKeyUp={this.keyUpHandler}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </a>\r\n    ) : (\r\n      <button\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        disabled={this.disabled}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"6FAAA,MAAMA,EAAS,iwE,MCYFC,EAAG,MALhB,WAAAC,CAAAC,G,qDA2CUC,KAAAC,UAAaC,IACnBF,KAAKG,aAAaC,KAAK,CACrBC,cAAeH,EACfI,gBAAiBJ,aAAaK,WAAaD,EAAgBJ,GAAK,OAChE,EAGIF,KAAAQ,aAAgBN,IACtB,GAAIA,EAAEO,MAAQ,MAAQT,KAAKU,WAAaV,KAAKW,OAAQ,CACnDX,KAAKC,UAAUC,E,GAIXF,KAAAY,aAAgBV,IACtB,GAAKF,KAAKU,UAAYV,KAAKa,MAASb,KAAKW,OAAQ,CAC/CT,EAAEY,gB,KACG,CACLd,KAAKC,UAAUC,E,EA+BpB,CAtDC,eAAMa,G,OACJC,EAAAhB,KAAKiB,qBAAmB,MAAAD,SAAA,SAAAA,EAAAE,O,CA0B1B,MAAAC,GACE,OAAOnB,KAAKa,KACVO,EACE,IAAAC,OAAAC,OAAA,CAAAC,KAAK,MACLV,KAAMb,KAAKa,KACXW,QAASxB,KAAKQ,aACdiB,QAASzB,KAAKY,aAAY,gBACXZ,KAAKW,OAAS,OAAS,UAChCX,KAAKW,OAAS,CAAEe,UAAU,GAAO,GAAG,CAC1CC,IAAMC,GAAa5B,KAAKiB,kBAAoBW,IAE5CR,EAAA,cAGFA,EAAA,SAAAC,OAAAC,OAAA,CACEC,KAAK,MACLM,KAAK,SACLnB,SAAUV,KAAKU,SACfe,QAASzB,KAAKY,aACC,gBAAAZ,KAAKW,OAAS,OAAS,UAChCX,KAAKW,OAAS,CAAEe,UAAU,GAAO,GAAG,CAC1CC,IAAMC,GAAa5B,KAAKiB,kBAAoBW,IAE5CR,EAAQ,a","ignoreList":[]}
+{"version":3,"names":["tabCss","Tab","constructor","hostRef","this","emitEvent","e","dsoTabSwitch","emit","originalEvent","isModifiedEvent","MouseEvent","keyUpHandler","key","disabled","active","clickHandler","href","preventDefault","_dsoFocus","_a","anchorOrButtonRef","focus","render","h","Object","assign","role","onKeyUp","onClick","tabIndex","ref","element","type"],"sources":["src/components/tabs/components/tab.scss?tag=dso-tab&encapsulation=shadow","src/components/tabs/components/tab.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"tab.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n  border-color: tab-variables.$color;\r\n  // Make the list-items overlay the bottom border\r\n  margin-block-end: -1px;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  :host {\r\n    margin-block: 10px;\r\n  }\r\n\r\n  :host(:first-child) {\r\n    margin-block-start: 0;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  [role=\"tab\"] {\r\n    &,\r\n    &:active,\r\n    &:focus,\r\n    &:hover,\r\n    &:visited {\r\n      background-color: colors.$wit;\r\n      border: 1px solid tab-variables.$color;\r\n      border-block-end-color: colors.$wit;\r\n      color: tab-variables.$color;\r\n      cursor: default;\r\n\r\n      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n        border-block-end-color: tab-variables.$color;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n:host([disabled]:not([disabled=\"false\"])) {\r\n  [role=\"tab\"] {\r\n    color: tab-variables.$nav-disabled-link-color;\r\n\r\n    &:hover,\r\n    &:focus {\r\n      color: tab-variables.$nav-disabled-link-hover-color;\r\n      text-decoration: none;\r\n      cursor: scaffolding.$cursor-disabled;\r\n      background-color: transparent;\r\n\r\n      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n        border-block-end-color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\na {\r\n  @include link.clean();\r\n\r\n  &:visited {\r\n    color: tab-variables.$text-color;\r\n  }\r\n}\r\n\r\nbutton {\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  background-color: transparent;\r\n}\r\n\r\n[role=\"tab\"] {\r\n  font-weight: bold;\r\n  cursor: pointer;\r\n  display: block;\r\n  min-block-size: tab-variables.$block-size;\r\n  border: 1px solid transparent;\r\n  border-radius: tab-variables.$border-radius tab-variables.$border-radius 0 0;\r\n  color: tab-variables.$text-color;\r\n  line-height: typography.$line-height-base;\r\n  padding-block: tab-variables.$block-padding;\r\n  padding-inline: tab-variables.$inline-padding;\r\n\r\n  &:hover {\r\n    border-color: tab-variables.$link-hover-border-color tab-variables.$link-hover-border-color\r\n      tab-variables.$border-color;\r\n  }\r\n\r\n  &:hover,\r\n  &:focus {\r\n    text-decoration: none;\r\n    background-color: tab-variables.$nav-link-hover-bg;\r\n  }\r\n\r\n  &:active,\r\n  &:focus,\r\n  &:hover {\r\n    background-color: tab-variables.$hover-color;\r\n    border: 1px solid transparent;\r\n    border-block-end-color: tab-variables.$color;\r\n    text-decoration: none;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      border-block-end-color: colors.$wit;\r\n    }\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border-color: colors.$wit;\r\n    border-radius: 8px;\r\n    padding-block: 18px;\r\n    padding-inline: 20px;\r\n    inline-size: 100%;\r\n    text-align: start;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this tab\r\n */\r\n@Component({\r\n  tag: \"dso-tab\",\r\n  styleUrl: \"tab.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tab {\r\n  @Element()\r\n  host!: HTMLDsoTabElement;\r\n\r\n  /**\r\n   * Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n   */\r\n  @Prop()\r\n  href?: string;\r\n\r\n  /**\r\n   * Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n   */\r\n  @Event()\r\n  dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _dsoFocus() {\r\n    this.anchorOrButtonRef?.focus();\r\n  }\r\n\r\n  private anchorOrButtonRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  private emitEvent = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoTabSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n    });\r\n  };\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (e.key === \" \" && !this.disabled && !this.active) {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  private clickHandler = (e: MouseEvent) => {\r\n    if ((this.disabled && this.href) || this.active) {\r\n      e.preventDefault();\r\n    } else {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return this.href ? (\r\n      <a\r\n        role=\"tab\"\r\n        href={this.href}\r\n        onKeyUp={this.keyUpHandler}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </a>\r\n    ) : (\r\n      <button\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        disabled={this.disabled}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"6FAAA,MAAMA,EAAS,iwE,MCaFC,EAAG,MALhB,WAAAC,CAAAC,G,qDA2CUC,KAAAC,UAAaC,IACnBF,KAAKG,aAAaC,KAAK,CACrBC,cAAeH,EACfI,gBAAiBJ,aAAaK,WAAaD,EAAgBJ,GAAK,OAChE,EAGIF,KAAAQ,aAAgBN,IACtB,GAAIA,EAAEO,MAAQ,MAAQT,KAAKU,WAAaV,KAAKW,OAAQ,CACnDX,KAAKC,UAAUC,E,GAIXF,KAAAY,aAAgBV,IACtB,GAAKF,KAAKU,UAAYV,KAAKa,MAASb,KAAKW,OAAQ,CAC/CT,EAAEY,gB,KACG,CACLd,KAAKC,UAAUC,E,EA+BpB,CAtDC,eAAMa,G,OACJC,EAAAhB,KAAKiB,qBAAmB,MAAAD,SAAA,SAAAA,EAAAE,O,CA0B1B,MAAAC,GACE,OAAOnB,KAAKa,KACVO,EACE,IAAAC,OAAAC,OAAA,CAAAC,KAAK,MACLV,KAAMb,KAAKa,KACXW,QAASxB,KAAKQ,aACdiB,QAASzB,KAAKY,aAAY,gBACXZ,KAAKW,OAAS,OAAS,UAChCX,KAAKW,OAAS,CAAEe,UAAU,GAAO,GAAG,CAC1CC,IAAMC,GAAa5B,KAAKiB,kBAAoBW,IAE5CR,EAAA,cAGFA,EAAA,SAAAC,OAAAC,OAAA,CACEC,KAAK,MACLM,KAAK,SACLnB,SAAUV,KAAKU,SACfe,QAASzB,KAAKY,aACC,gBAAAZ,KAAKW,OAAS,OAAS,UAChCX,KAAKW,OAAS,CAAEe,UAAU,GAAO,GAAG,CAC1CC,IAAMC,GAAa5B,KAAKiB,kBAAoBW,IAE5CR,EAAQ,a","ignoreList":[]}

package/dist/dso-toolkit/{p-638cfb25.entry.js → p-09ec6ce5.entry.js}

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

package/dist/dso-toolkit/{p-638cfb25.entry.js.map → p-09ec6ce5.entry.js.map}

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

package/dist/dso-toolkit/p-0c742a6a.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as d,h as s,g as l}from"./p-C-b4jsbt.js";import{g as a}from"./p-CodDyi2J.js";import{i}from"./p-B_kXuEcW.js";import{v as e}from"./p-BF0_OXTe.js";const r={en:{"dso-modal":{close:"Close",dialog:"Dialog"}},nl:{"dso-modal":{close:"Sluiten",dialog:"Dialoog"}}};const t="@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body ul ul,.dso-modal>.dso-dialog>.dso-body ul ol,.dso-modal>.dso-dialog>.dso-body ol ul,.dso-modal>.dso-dialog>.dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>.dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>.dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ol,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal .dso-body:focus-visible{outline:none}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}.dso-modal .dso-footer{min-block-size:80px;padding-block:16px;padding-inline:32px;text-align:end}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding-block:8px;padding-inline:16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding-block:16px;padding-inline:24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding-block:8px;padding-inline:32px}}.dso-close dso-icon{color:#39870c}";const n=class{constructor(s){o(this,s);this.dsoClose=d(this,"dsoClose",7);this.ariaId=e();this.dialogRole="dialog";this.returnFocus=undefined;this.showCloseButton=true;this.text=i((()=>this.host),r)}get hasFooter(){return this.host.querySelector("[slot='footer']")!==null}componentDidLoad(){var o;if((o=this.htmlDialogElement)===null||o===void 0?void 0:o.isConnected){const o=a();if(o instanceof HTMLElement){this.returnFocusElement=o}this.htmlDialogElement.showModal()}}disconnectedCallback(){var o,d,s;(o=this.htmlDialogElement)===null||o===void 0?void 0:o.close();if(this.returnFocus===false){return}(s=(d=this.returnFocus)!==null&&d!==void 0?d:this.returnFocusElement)===null||s===void 0?void 0:s.focus()}render(){var o;return s("dialog",{key:"83fe9d400195caeccad3ad786a259839e356afef",class:"dso-modal",role:(o=this.dialogRole)!==null&&o!==void 0?o:undefined,"aria-modal":"true","aria-labelledby":this.ariaId,ref:o=>this.htmlDialogElement=o,onCancel:o=>{o.preventDefault();this.dsoClose.emit({originalEvent:o})}},s("div",{key:"5e2b1b12dbaac1b5b71aa2a52b42b201d217ee63",class:"dso-dialog",role:"document"},this.modalTitle?s("div",{class:"dso-header"},s("h2",{id:this.ariaId},this.modalTitle),this.showCloseButton&&s("button",{type:"button",class:"dso-close",onClick:o=>this.dsoClose.emit({originalEvent:o})},s("dso-icon",{icon:"times"}),s("span",{class:"sr-only"},this.text("close")))):s("span",{class:"sr-only",id:this.ariaId},this.text("dialog")),s("dso-scrollable",{key:"241b3f078306402613b94d843c393c065125a650"},s("div",{key:"fc0f58c85c287ce3fb424e8cc18bec91562fc143",class:"dso-body",tabIndex:0},s("slot",{key:"e6bc51e2320f995aa2ab7d817ff655189032cc69",name:"body"}))),this.hasFooter&&s("div",{key:"77aa9bac43c4f44c15c98a87986175d057ff1ad6",class:"dso-footer"},s("slot",{key:"ec30bcd66bb3214e4a0efcc8c5a793596a5e92e9",name:"footer"}))))}get host(){return l(this)}};n.style=t;export{n as dso_modal};
+//# sourceMappingURL=p-0c742a6a.entry.js.map

package/dist/dso-toolkit/{p-ce882c53.entry.js.map → p-0c742a6a.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["translations","en","close","dialog","nl","modalCss","Modal","constructor","hostRef","this","ariaId","v4","dialogRole","returnFocus","undefined","showCloseButton","text","i18n","host","hasFooter","querySelector","componentDidLoad","_a","htmlDialogElement","isConnected","activeElement","getActiveElement","HTMLElement","returnFocusElement","showModal","disconnectedCallback","_c","_b","focus","render","h","key","class","role","ref","element","onCancel","e","preventDefault","dsoClose","emit","originalEvent","modalTitle","id","type","onClick","icon","tabIndex","name"],"sources":["src/components/modal/modal.i18n.ts","src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-modal\": {\r\n      close: \"Close\",\r\n      dialog: \"Dialog\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-modal\": {\r\n      close: \"Sluiten\",\r\n      dialog: \"Dialoog\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n  @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  :host dialog {\r\n    @include modal.fullscreen();\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n  @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n  dso-icon {\r\n    color: modal.$close-icon-color;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { translations } from \"./modal.i18n\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  dialogRole: string | null = \"dialog\";\r\n\r\n  /**\r\n   * The element to return focus to after the modal is closed.\r\n   *\r\n   * * `undefined` will return focus to the previously focused element (default).\r\n   * * `false` will not return focus to any element.\r\n   * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n   */\r\n  @Prop()\r\n  returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  showCloseButton = true;\r\n\r\n  private returnFocusElement: HTMLElement | undefined;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the Modal.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  get hasFooter() {\r\n    return this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidLoad(): void {\r\n    if (this.htmlDialogElement?.isConnected) {\r\n      const activeElement = getActiveElement();\r\n      if (activeElement instanceof HTMLElement) {\r\n        this.returnFocusElement = activeElement;\r\n      }\r\n\r\n      this.htmlDialogElement.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.htmlDialogElement?.close();\r\n\r\n    if (this.returnFocus === false) {\r\n      return;\r\n    }\r\n\r\n    (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.dialogRole ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onCancel={(e) => {\r\n          e.preventDefault();\r\n\r\n          this.dsoClose.emit({ originalEvent: e });\r\n        }}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.showCloseButton && (\r\n                <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">{this.text(\"close\")}</span>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              {this.text(\"dialog\")}\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"qKAEO,MAAMA,EAAyB,CACpCC,GAAI,CACF,YAAa,CACXC,MAAO,QACPC,OAAQ,WAGZC,GAAI,CACF,YAAa,CACXF,MAAO,UACPC,OAAQ,aCZd,MAAME,EAAW,0lN,MCcJC,EAAK,MALlB,WAAAC,CAAAC,G,6CAYEC,KAAMC,OAAGC,IAkBTF,KAAUG,WAAkB,SAU5BH,KAAWI,YAAoCC,UAQ/CL,KAAeM,gBAAG,KAcVN,KAAAO,KAAOC,GAAK,IAAMR,KAAKS,MAAMlB,EAqEtC,CAzEC,aAAImB,GACF,OAAOV,KAAKS,KAAKE,cAAc,qBAAuB,I,CAKxD,gBAAAC,G,MACE,IAAIC,EAAAb,KAAKc,qBAAmB,MAAAD,SAAA,SAAAA,EAAAE,YAAa,CACvC,MAAMC,EAAgBC,IACtB,GAAID,aAAyBE,YAAa,CACxClB,KAAKmB,mBAAqBH,C,CAG5BhB,KAAKc,kBAAkBM,W,EAI3B,oBAAAC,G,WACER,EAAAb,KAAKc,qBAAmB,MAAAD,SAAA,SAAAA,EAAApB,QAExB,GAAIO,KAAKI,cAAgB,MAAO,CAC9B,M,EAGFkB,GAACC,EAAAvB,KAAKI,eAAW,MAAAmB,SAAA,EAAAA,EAAIvB,KAAKmB,sBAAqB,MAAAG,SAAA,SAAAA,EAAAE,O,CAGjD,MAAAC,G,MACE,OACEC,EACE,UAAAC,IAAA,2CAAAC,MAAM,YACNC,MAAMhB,EAAAb,KAAKG,cAAc,MAAAU,SAAA,EAAAA,EAAAR,UAAS,aACvB,OAAM,kBACAL,KAAKC,OACtB6B,IAAMC,GAAa/B,KAAKc,kBAAoBiB,EAC5CC,SAAWC,IACTA,EAAEC,iBAEFlC,KAAKmC,SAASC,KAAK,CAAEC,cAAeJ,GAAI,GAG1CP,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aAAaC,KAAK,YAC1B7B,KAAKsC,WACJZ,EAAA,OAAKE,MAAM,cACTF,EAAI,MAAAa,GAAIvC,KAAKC,QAASD,KAAKsC,YAC1BtC,KAAKM,iBACJoB,EAAQ,UAAAc,KAAK,SAASZ,MAAM,YAAYa,QAAUR,GAAMjC,KAAKmC,SAASC,KAAK,CAAEC,cAAeJ,KAC1FP,EAAU,YAAAgB,KAAK,UACfhB,EAAA,QAAME,MAAM,WAAW5B,KAAKO,KAAK,YAKvCmB,EAAA,QAAME,MAAM,UAAUW,GAAIvC,KAAKC,QAC5BD,KAAKO,KAAK,WAIfmB,EAAA,kBAAAC,IAAA,4CACED,EAAA,OAAAC,IAAA,2CAAKC,MAAM,WAAWe,SAAU,GAC9BjB,EAAA,QAAAC,IAAA,2CAAMiB,KAAK,WAId5C,KAAKU,WACJgB,EAAK,OAAAC,IAAA,2CAAAC,MAAM,cACTF,EAAM,QAAAC,IAAA,2CAAAiB,KAAK,a","ignoreList":[]}
+{"version":3,"names":["translations","en","close","dialog","nl","modalCss","Modal","constructor","hostRef","this","ariaId","v4","dialogRole","returnFocus","undefined","showCloseButton","text","i18n","host","hasFooter","querySelector","componentDidLoad","_a","htmlDialogElement","isConnected","activeElement","getActiveElement","HTMLElement","returnFocusElement","showModal","disconnectedCallback","_c","_b","focus","render","h","key","class","role","ref","element","onCancel","e","preventDefault","dsoClose","emit","originalEvent","modalTitle","id","type","onClick","icon","tabIndex","name"],"sources":["src/components/modal/modal.i18n.ts","src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-modal\": {\r\n      close: \"Close\",\r\n      dialog: \"Dialog\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-modal\": {\r\n      close: \"Sluiten\",\r\n      dialog: \"Dialoog\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n  @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  :host dialog {\r\n    @include modal.fullscreen();\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n  @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n  dso-icon {\r\n    color: modal.$close-icon-color;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, h } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./modal.i18n\";\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  dialogRole: string | null = \"dialog\";\r\n\r\n  /**\r\n   * The element to return focus to after the modal is closed.\r\n   *\r\n   * * `undefined` will return focus to the previously focused element (default).\r\n   * * `false` will not return focus to any element.\r\n   * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n   */\r\n  @Prop()\r\n  returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  showCloseButton = true;\r\n\r\n  private returnFocusElement: HTMLElement | undefined;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the Modal.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  get hasFooter() {\r\n    return this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidLoad(): void {\r\n    if (this.htmlDialogElement?.isConnected) {\r\n      const activeElement = getActiveElement();\r\n      if (activeElement instanceof HTMLElement) {\r\n        this.returnFocusElement = activeElement;\r\n      }\r\n\r\n      this.htmlDialogElement.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.htmlDialogElement?.close();\r\n\r\n    if (this.returnFocus === false) {\r\n      return;\r\n    }\r\n\r\n    (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.dialogRole ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onCancel={(e) => {\r\n          e.preventDefault();\r\n\r\n          this.dsoClose.emit({ originalEvent: e });\r\n        }}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.showCloseButton && (\r\n                <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">{this.text(\"close\")}</span>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              {this.text(\"dialog\")}\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"gKAEO,MAAMA,EAAyB,CACpCC,GAAI,CACF,YAAa,CACXC,MAAO,QACPC,OAAQ,WAGZC,GAAI,CACF,YAAa,CACXF,MAAO,UACPC,OAAQ,aCZd,MAAME,EAAW,0lN,MCcJC,EAAK,MALlB,WAAAC,CAAAC,G,6CAYEC,KAAMC,OAAGC,IAkBTF,KAAUG,WAAkB,SAU5BH,KAAWI,YAAoCC,UAQ/CL,KAAeM,gBAAG,KAcVN,KAAAO,KAAOC,GAAK,IAAMR,KAAKS,MAAMlB,EAqEtC,CAzEC,aAAImB,GACF,OAAOV,KAAKS,KAAKE,cAAc,qBAAuB,I,CAKxD,gBAAAC,G,MACE,IAAIC,EAAAb,KAAKc,qBAAmB,MAAAD,SAAA,SAAAA,EAAAE,YAAa,CACvC,MAAMC,EAAgBC,IACtB,GAAID,aAAyBE,YAAa,CACxClB,KAAKmB,mBAAqBH,C,CAG5BhB,KAAKc,kBAAkBM,W,EAI3B,oBAAAC,G,WACER,EAAAb,KAAKc,qBAAmB,MAAAD,SAAA,SAAAA,EAAApB,QAExB,GAAIO,KAAKI,cAAgB,MAAO,CAC9B,M,EAGFkB,GAACC,EAAAvB,KAAKI,eAAW,MAAAmB,SAAA,EAAAA,EAAIvB,KAAKmB,sBAAqB,MAAAG,SAAA,SAAAA,EAAAE,O,CAGjD,MAAAC,G,MACE,OACEC,EACE,UAAAC,IAAA,2CAAAC,MAAM,YACNC,MAAMhB,EAAAb,KAAKG,cAAc,MAAAU,SAAA,EAAAA,EAAAR,UAAS,aACvB,OAAM,kBACAL,KAAKC,OACtB6B,IAAMC,GAAa/B,KAAKc,kBAAoBiB,EAC5CC,SAAWC,IACTA,EAAEC,iBAEFlC,KAAKmC,SAASC,KAAK,CAAEC,cAAeJ,GAAI,GAG1CP,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aAAaC,KAAK,YAC1B7B,KAAKsC,WACJZ,EAAA,OAAKE,MAAM,cACTF,EAAI,MAAAa,GAAIvC,KAAKC,QAASD,KAAKsC,YAC1BtC,KAAKM,iBACJoB,EAAQ,UAAAc,KAAK,SAASZ,MAAM,YAAYa,QAAUR,GAAMjC,KAAKmC,SAASC,KAAK,CAAEC,cAAeJ,KAC1FP,EAAU,YAAAgB,KAAK,UACfhB,EAAA,QAAME,MAAM,WAAW5B,KAAKO,KAAK,YAKvCmB,EAAA,QAAME,MAAM,UAAUW,GAAIvC,KAAKC,QAC5BD,KAAKO,KAAK,WAIfmB,EAAA,kBAAAC,IAAA,4CACED,EAAA,OAAAC,IAAA,2CAAKC,MAAM,WAAWe,SAAU,GAC9BjB,EAAA,QAAAC,IAAA,2CAAMiB,KAAK,WAId5C,KAAKU,WACJgB,EAAK,OAAAC,IAAA,2CAAAC,MAAM,cACTF,EAAM,QAAAC,IAAA,2CAAAiB,KAAK,a","ignoreList":[]}

package/dist/dso-toolkit/{p-3dc6df90.entry.js → p-0feea762.entry.js}

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

package/dist/dso-toolkit/p-0feea762.entry.js.map

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

package/dist/dso-toolkit/{p-13042742.entry.js → p-1107be6c.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,h as o}from"./p-D2Jo0W7B.js";import{c as a}from"./p-ChV9xqsO.js";const e=":host{display:block}*,*::after,*::before{box-sizing:border-box}.dso-banner{padding-block:16px;padding-inline:0;position:relative}.dso-banner.dso-compact{padding-block:12px;padding-inline:0}";const n=class{constructor(o){s(this,o);this.compact=false;this.icon=false}render(){return o("section",{key:"c0335c686d390d708a0a07091a19d68acf754f2f",class:a("dso-banner",`alert-${this.status}`,{"dso-compact":this.compact}),role:"alert"},o("slot",{key:"1db4cbf2f5550d0c328954c211fff7261d951b81"}))}};n.style=e;export{n as dso_banner};
-//# sourceMappingURL=p-13042742.entry.js.map
+import{r as s,h as o}from"./p-C-b4jsbt.js";import{c as a}from"./p-ChV9xqsO.js";const e=":host{display:block}*,*::after,*::before{box-sizing:border-box}.dso-banner{padding-block:16px;padding-inline:0;position:relative}.dso-banner.dso-compact{padding-block:12px;padding-inline:0}";const n=class{constructor(o){s(this,o);this.compact=false;this.icon=false}render(){return o("section",{key:"c0335c686d390d708a0a07091a19d68acf754f2f",class:a("dso-banner",`alert-${this.status}`,{"dso-compact":this.compact}),role:"alert"},o("slot",{key:"1db4cbf2f5550d0c328954c211fff7261d951b81"}))}};n.style=e;export{n as dso_banner};
+//# sourceMappingURL=p-1107be6c.entry.js.map

package/dist/dso-toolkit/{p-13042742.entry.js.map → p-1107be6c.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["bannerCss","Banner","constructor","hostRef","this","compact","icon","render","h","key","class","clsx","status","role"],"sources":["src/components/banner/banner.scss?tag=dso-banner&encapsulation=shadow","src/components/banner/banner.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/banner\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-banner {\r\n  @include banner.root();\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-banner\",\r\n  styleUrl: \"banner.scss\",\r\n  shadow: true,\r\n})\r\nexport class Banner {\r\n  /**\r\n   * The status of the banner.\r\n   */\r\n  @Prop({ reflect: true })\r\n  status!: \"danger\" | \"error\" | \"info\" | \"warning\";\r\n\r\n  /**\r\n   * Compact mode.\r\n   */\r\n  @Prop()\r\n  compact = false;\r\n\r\n  /**\r\n   * *Icon can only be hidden when the 'compact' property is set to true.\r\n   *\r\n   * Option to show banner icon.\r\n   */\r\n  @Prop({ reflect: true })\r\n  icon = false;\r\n\r\n  render() {\r\n    return (\r\n      <section\r\n        class={clsx(\"dso-banner\", `alert-${this.status}`, {\r\n          \"dso-compact\": this.compact,\r\n        })}\r\n        role=\"alert\"\r\n      >\r\n        <slot></slot>\r\n      </section>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"+EAAA,MAAMA,EAAY,gM,MCQLC,EAAM,MALnB,WAAAC,CAAAC,G,UAgBEC,KAAOC,QAAG,MAQVD,KAAIE,KAAG,KAcR,CAZC,MAAAC,GACE,OACEC,EAAA,WAAAC,IAAA,2CACEC,MAAOC,EAAK,aAAc,SAASP,KAAKQ,SAAU,CAChD,cAAeR,KAAKC,UAEtBQ,KAAK,SAELL,EAAa,QAAAC,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["bannerCss","Banner","constructor","hostRef","this","compact","icon","render","h","key","class","clsx","status","role"],"sources":["src/components/banner/banner.scss?tag=dso-banner&encapsulation=shadow","src/components/banner/banner.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/banner\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-banner {\r\n  @include banner.root();\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-banner\",\r\n  styleUrl: \"banner.scss\",\r\n  shadow: true,\r\n})\r\nexport class Banner {\r\n  /**\r\n   * The status of the banner.\r\n   */\r\n  @Prop({ reflect: true })\r\n  status!: \"danger\" | \"error\" | \"info\" | \"warning\";\r\n\r\n  /**\r\n   * Compact mode.\r\n   */\r\n  @Prop()\r\n  compact = false;\r\n\r\n  /**\r\n   * *Icon can only be hidden when the 'compact' property is set to true.\r\n   *\r\n   * Option to show banner icon.\r\n   */\r\n  @Prop({ reflect: true })\r\n  icon = false;\r\n\r\n  render() {\r\n    return (\r\n      <section\r\n        class={clsx(\"dso-banner\", `alert-${this.status}`, {\r\n          \"dso-compact\": this.compact,\r\n        })}\r\n        role=\"alert\"\r\n      >\r\n        <slot></slot>\r\n      </section>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"+EAAA,MAAMA,EAAY,gM,MCQLC,EAAM,MALnB,WAAAC,CAAAC,G,UAgBEC,KAAOC,QAAG,MAQVD,KAAIE,KAAG,KAcR,CAZC,MAAAC,GACE,OACEC,EAAA,WAAAC,IAAA,2CACEC,MAAOC,EAAK,aAAc,SAASP,KAAKQ,SAAU,CAChD,cAAeR,KAAKC,UAEtBQ,KAAK,SAELL,EAAa,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/dso-toolkit/{p-3ada9fe0.entry.js → p-15c901ff.entry.js}

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

package/dist/dso-toolkit/p-15c901ff.entry.js.map

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

package/dist/dso-toolkit/{p-23c5e409.entry.js → p-19af64f1.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as r,h as n,F as i,g as o}from"./p-D2Jo0W7B.js";const t=":host{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:5ch}.counter.min{text-align:end}.counter.max{text-align:start}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c;border-radius:50%}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c;border-color:transparent;border-radius:50%}.input::-moz-range-thumb:hover{background-color:#275937}";const a=class{constructor(n){e(this,n);this.dsoChange=r(this,"dsoChange",3);this.unit=""}render(){const e=this.min||0;const r=this.max||100;const o=this.step||1;return n(i,null,this.description&&n("span",{key:"674a05b1d5542afec4b01c991f7a7f4007040870",id:"description",hidden:true},this.description),n("span",{key:"a300e3092ec1485e106cee6fe343397edc630252",class:"counter min","aria-hidden":"true"},e,this.unit),n("input",{key:"70c37481116b151b3d696b9d32fd36da7ac6e12d",type:"range",min:this.min,max:this.max,value:this.value,class:"input","aria-label":this.label,"aria-describedby":this.description?"description":undefined,onChange:n=>this.dsoChange.emit({originalEvent:n,value:n.target instanceof HTMLInputElement?parseInt(n.target.value,10):undefined,max:r,min:e,step:o})}),n("span",{key:"e4987b08bc501533e5afc0fab67117f9def78035",class:"counter max","aria-hidden":"true"},r,this.unit))}get host(){return o(this)}};a.style=t;export{a as dso_input_range};
-//# sourceMappingURL=p-23c5e409.entry.js.map
+import{r as e,c as r,h as n,F as i,g as a}from"./p-C-b4jsbt.js";const o=":host{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:5ch}.counter.min{text-align:end}.counter.max{text-align:start}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c;border-radius:50%}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c;border-color:transparent;border-radius:50%}.input::-moz-range-thumb:hover{background-color:#275937}";const t=class{constructor(n){e(this,n);this.dsoChange=r(this,"dsoChange",3);this.unit=""}render(){const e=this.min||0;const r=this.max||100;const a=this.step||1;return n(i,null,this.description&&n("span",{key:"4a0c928f94f1c99d5bb031fe9afb95993b3386cb",id:"description",hidden:true},this.description),n("span",{key:"8c132c422e427494ecd404357974aacf0db3ca41",class:"counter min","aria-hidden":"true"},e,this.unit),n("input",{key:"e5591337e5f45fde80f3f95aa72b3a6eeecf0c82",type:"range",min:this.min,max:this.max,value:this.value,class:"input","aria-label":this.label,"aria-describedby":this.description?"description":undefined,onChange:n=>this.dsoChange.emit({originalEvent:n,value:n.target instanceof HTMLInputElement?parseInt(n.target.value,10):undefined,max:r,min:e,step:a})}),n("span",{key:"08348b0b850bfbdf964541a10b7602ad602b3621",class:"counter max","aria-hidden":"true"},r,this.unit))}get host(){return a(this)}};t.style=o;export{t as dso_input_range};
+//# sourceMappingURL=p-19af64f1.entry.js.map

package/dist/dso-toolkit/p-19af64f1.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["inputRangeCss","InputRange","constructor","hostRef","this","unit","render","min","max","step","h","Fragment","description","key","id","hidden","class","type","value","label","undefined","onChange","event","dsoChange","emit","originalEvent","target","HTMLInputElement","parseInt"],"sources":["src/components/input-range/input-range.scss?tag=dso-input-range&encapsulation=shadow","src/components/input-range/input-range.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n\r\n  padding: 0.5rem;\r\n\r\n  inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.counter {\r\n  flex-shrink: 0;\r\n\r\n  min-inline-size: 5ch;\r\n\r\n  &.min {\r\n    text-align: end;\r\n  }\r\n\r\n  &.max {\r\n    text-align: start;\r\n  }\r\n}\r\n\r\n.input {\r\n  flex-grow: 1;\r\n\r\n  appearance: none;\r\n\r\n  background-color: transparent;\r\n\r\n  cursor: pointer;\r\n\r\n  &::-webkit-slider-runnable-track {\r\n    block-size: 0.5rem;\r\n\r\n    background-color: colors.$grijs-10;\r\n    &:hover {\r\n      background-color: colors.$grijs-20;\r\n    }\r\n\r\n    border: 1px solid colors.$grijs-60;\r\n    border-radius: 0.5rem;\r\n  }\r\n\r\n  &::-webkit-slider-thumb {\r\n    block-size: 1.5rem;\r\n    inline-size: 1.5rem;\r\n\r\n    appearance: none;\r\n\r\n    margin-block-start: -0.55rem;\r\n\r\n    background-color: colors.$grasgroen;\r\n    &:hover {\r\n      background-color: colors.$bosgroen;\r\n    }\r\n\r\n    border-radius: 50%;\r\n  }\r\n\r\n  &::-moz-range-track {\r\n    box-sizing: border-box;\r\n\r\n    block-size: 0.5rem;\r\n\r\n    background-color: colors.$grijs-10;\r\n    &:hover {\r\n      background-color: colors.$grijs-20;\r\n    }\r\n\r\n    border: 1px solid colors.$grijs-60;\r\n    border-radius: 0.5rem;\r\n  }\r\n\r\n  &::-moz-range-thumb {\r\n    box-sizing: border-box;\r\n\r\n    block-size: 1.5rem;\r\n    inline-size: 1.5rem;\r\n\r\n    appearance: none;\r\n\r\n    margin-block-start: -0.5rem;\r\n\r\n    background-color: colors.$grasgroen;\r\n    &:hover {\r\n      background-color: colors.$bosgroen;\r\n    }\r\n\r\n    border-color: transparent;\r\n    border-radius: 50%;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { InputRangeChangeEvent } from \"./input-range.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-input-range\",\r\n  styleUrl: \"input-range.scss\",\r\n  shadow: true,\r\n})\r\nexport class InputRange implements ComponentInterface {\r\n  /**\r\n   * The minimum value of the range.\r\n   */\r\n  @Prop()\r\n  min?: number;\r\n\r\n  /**\r\n   * The maximum value of the range.\r\n   */\r\n  @Prop()\r\n  max?: number;\r\n\r\n  /**\r\n   * The value of the range.\r\n   */\r\n  @Prop()\r\n  value?: number;\r\n\r\n  /**\r\n   * The step to increment the value by.\r\n   */\r\n  @Prop()\r\n  step?: number;\r\n\r\n  /**\r\n   * The label of the range.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The unit of the range.\r\n   */\r\n  @Prop()\r\n  unit: string = \"\";\r\n\r\n  /**\r\n   * The description of the range.\r\n   */\r\n  @Prop()\r\n  description?: string;\r\n\r\n  /**\r\n   * Emitted when the value has changed.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<InputRangeChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoInputRangeElement;\r\n\r\n  render() {\r\n    const min = this.min || 0;\r\n    const max = this.max || 100;\r\n    const step = this.step || 1;\r\n\r\n    return (\r\n      <>\r\n        {this.description && (\r\n          <span id=\"description\" hidden>\r\n            {this.description}\r\n          </span>\r\n        )}\r\n        <span class=\"counter min\" aria-hidden=\"true\">\r\n          {min}\r\n          {this.unit}\r\n        </span>\r\n        <input\r\n          type=\"range\"\r\n          min={this.min}\r\n          max={this.max}\r\n          value={this.value}\r\n          class=\"input\"\r\n          aria-label={this.label}\r\n          aria-describedby={this.description ? \"description\" : undefined}\r\n          onChange={(event) =>\r\n            this.dsoChange.emit({\r\n              originalEvent: event,\r\n              value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,\r\n              max,\r\n              min,\r\n              step,\r\n            })\r\n          }\r\n        />\r\n        <span class=\"counter max\" aria-hidden=\"true\">\r\n          {max}\r\n          {this.unit}\r\n        </span>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"gEAAA,MAAMA,EAAgB,2nC,MCSTC,EAAU,MALvB,WAAAC,CAAAC,G,+CAwCEC,KAAIC,KAAW,EA0DhB,CAzCC,MAAAC,GACE,MAAMC,EAAMH,KAAKG,KAAO,EACxB,MAAMC,EAAMJ,KAAKI,KAAO,IACxB,MAAMC,EAAOL,KAAKK,MAAQ,EAE1B,OACEC,EAAAC,EAAA,KACGP,KAAKQ,aACJF,EAAA,QAAAG,IAAA,2CAAMC,GAAG,cAAcC,OACpB,MAAAX,KAAKQ,aAGVF,EAAA,QAAAG,IAAA,2CAAMG,MAAM,cAAa,cAAa,QACnCT,EACAH,KAAKC,MAERK,EACE,SAAAG,IAAA,2CAAAI,KAAK,QACLV,IAAKH,KAAKG,IACVC,IAAKJ,KAAKI,IACVU,MAAOd,KAAKc,MACZF,MAAM,QACM,aAAAZ,KAAKe,MAAK,mBACJf,KAAKQ,YAAc,cAAgBQ,UACrDC,SAAWC,GACTlB,KAAKmB,UAAUC,KAAK,CAClBC,cAAeH,EACfJ,MAAOI,EAAMI,kBAAkBC,iBAAmBC,SAASN,EAAMI,OAAOR,MAAO,IAAME,UACrFZ,MACAD,MACAE,WAINC,EAAA,QAAAG,IAAA,2CAAMG,MAAM,cAAa,cAAa,QACnCR,EACAJ,KAAKC,M","ignoreList":[]}

package/dist/dso-toolkit/{p-45a523e5.entry.js → p-1b3db27c.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,h as r,H as e}from"./p-D2Jo0W7B.js";const a=':host{display:block;padding-block:16px;padding-inline:16px}@media screen and (min-width: 768px){:host{padding-inline-end:96px}}:host{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e1ecf7;border-color:#e1ecf7;color:#191919}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}*,*::after,*::before{box-sizing:border-box}h2{margin-block:0 16px;color:#275937;color:#275937;font-size:1.25rem;font-weight:700}@media screen and (min-width: 480px){h2{font-size:1.5rem}}.dso-action-list-content{padding-inline-start:calc(2rem + 16px + 16px + 8px - 8px)}@media screen and (min-width: 480px){.dso-action-list-content{padding-inline-start:calc(2rem + 16px + 16px + 8px)}}';const i=class{constructor(r){o(this,r)}render(){return r(e,{key:"1863dac06435fbfa6422a48f8109cfefaa06dcb5"},r("h2",{key:"8b7edefe67ad62cf78e1d6b9ab02b7ed917e6766"},this.listTitle),r("div",{key:"4cdbf73a61127fe8430157012b94f6f1a45380d5",class:"dso-action-list-content"},r("slot",{key:"703e3a3abda8ca77f893bbf2fbbf747d8ea71b4a"})))}};i.style=a;export{i as dso_action_list};
-//# sourceMappingURL=p-45a523e5.entry.js.map
+import{r as o,h as r,H as e}from"./p-C-b4jsbt.js";const a=':host{display:block;padding-block:16px;padding-inline:16px}@media screen and (min-width: 768px){:host{padding-inline-end:96px}}:host{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e1ecf7;border-color:#e1ecf7;color:#191919}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}*,*::after,*::before{box-sizing:border-box}h2{margin-block:0 16px;color:#275937;color:#275937;font-size:1.25rem;font-weight:700}@media screen and (min-width: 480px){h2{font-size:1.5rem}}.dso-action-list-content{padding-inline-start:calc(2rem + 16px + 16px + 8px - 8px)}@media screen and (min-width: 480px){.dso-action-list-content{padding-inline-start:calc(2rem + 16px + 16px + 8px)}}';const i=class{constructor(r){o(this,r)}render(){return r(e,{key:"1863dac06435fbfa6422a48f8109cfefaa06dcb5"},r("h2",{key:"8b7edefe67ad62cf78e1d6b9ab02b7ed917e6766"},this.listTitle),r("div",{key:"4cdbf73a61127fe8430157012b94f6f1a45380d5",class:"dso-action-list-content"},r("slot",{key:"703e3a3abda8ca77f893bbf2fbbf747d8ea71b4a"})))}};i.style=a;export{i as dso_action_list};
+//# sourceMappingURL=p-1b3db27c.entry.js.map