@dso-toolkit/core 79.0.0-pre.2 → 79.0.0-pre.4

package/dist/dso-toolkit/p-25d0d432.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownMenuCss","DropdownMenu","constructor","hostRef","this","open","dropdownAlign","dropdownOptionsOffset","checkable","focusOutListener","event","relatedTarget","HTMLElement","tabbables","includes","toggleOptions","keyDownListener","defaultPrevented","key","shiftKey","tabInPopup","escape","target","click","preventDefault","button","focus","host","querySelector","HTMLButtonElement","ReferenceError","withButton","isConnected","tabbable","filter","element","componentDidLoad","setAttribute","id","uuidv4","dropdownOptionsElement","Error","ul","Array","from","getElementsByTagName","li","componentDidRender","tab","classList","contains","toString","popoverElement","cleanUp","autoUpdate","computePosition","strategy","middleware","offset","flip","padding","placement","then","x","y","Object","assign","style","left","top","onClick","composedPath","isToggleButtonEvent","isMenuItemEvent","force","_a","_b","togglePopover","undefined","disconnectedCallback","direction","currentIndex","findIndex","e","getActiveElement","nextIndex","length","render","h","Host","onKeydown","onFocusout","name","popover","ref"],"sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n}\r\n\r\n:host {\r\n  @include dropdown-menu.root();\r\n}\r\n\r\ndiv[popover] {\r\n  margin: 0 !important;\r\n  border: 0;\r\n  padding: 0;\r\n  background-color: transparent;\r\n  overflow: unset;\r\n  inline-size: max-content;\r\n}\r\n","import { autoUpdate, computePosition, flip, offset } from \"@floating-ui/dom\";\r\nimport { Component, Element, Host, Listen, Prop, h } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n  tag: \"dso-dropdown-menu\",\r\n  styleUrl: \"dropdown-menu.scss\",\r\n  shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n  /**\r\n   * Whether the menu is open or closed.\r\n   * This attribute is reflected and mutable.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Alignment of the dropdown\r\n   */\r\n  @Prop()\r\n  dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n  /**\r\n   * Space between button and dropdown options\r\n   */\r\n  @Prop()\r\n  dropdownOptionsOffset = 2;\r\n\r\n  /**\r\n   * Whether the menu is checkable.\r\n   */\r\n  @Prop()\r\n  checkable = false;\r\n\r\n  @Element()\r\n  host!: HTMLDsoDropdownMenuElement;\r\n\r\n  private cleanUp: ReturnType<typeof autoUpdate> | undefined;\r\n\r\n  private popoverElement: HTMLDivElement | undefined;\r\n\r\n  get button(): HTMLButtonElement {\r\n    const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n    if (!(button instanceof HTMLButtonElement)) {\r\n      throw new ReferenceError(\"Mandatory toggle button not found\");\r\n    }\r\n\r\n    return button;\r\n  }\r\n\r\n  private tabbables(withButton: boolean): FocusableElement[] {\r\n    const tabbables = this.host.isConnected ? tabbable(this.host) : [];\r\n\r\n    return withButton ? tabbables : tabbables.filter((element) => element !== this.button);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n    this.button.setAttribute(\"aria-expanded\", \"false\");\r\n    if (!this.button.id) {\r\n      this.button.id = uuidv4();\r\n    }\r\n\r\n    const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n    if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n      throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    dropdownOptionsElement.setAttribute(\"role\", \"menu\");\r\n    dropdownOptionsElement.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n    for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n      ul.setAttribute(\"role\", \"group\");\r\n      for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n        li.setAttribute(\"role\", \"none\");\r\n      }\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n      for (const tab of this.host.isConnected ? tabbable(li) : []) {\r\n        tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n        if (this.checkable) {\r\n          tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n        }\r\n      }\r\n    }\r\n\r\n    this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n\r\n    if (this.popoverElement && !this.cleanUp) {\r\n      const element = this.popoverElement;\r\n\r\n      this.cleanUp = autoUpdate(this.button, element, () => {\r\n        computePosition(this.button, element, {\r\n          strategy: \"fixed\",\r\n          middleware: [\r\n            offset(this.dropdownOptionsOffset),\r\n            flip({\r\n              padding: this.dropdownOptionsOffset,\r\n            }),\r\n          ],\r\n          placement: this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\",\r\n        }).then(({ x, y }) => {\r\n          Object.assign(element.style, {\r\n            left: `${x}px`,\r\n            top: `${y}px`,\r\n          });\r\n        });\r\n      });\r\n    }\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"window\" })\r\n  onClick(event: MouseEvent) {\r\n    const composedPath = event.composedPath();\r\n\r\n    if (this.isToggleButtonEvent(composedPath)) {\r\n      this.toggleOptions();\r\n    } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n      this.toggleOptions(false);\r\n    }\r\n  }\r\n\r\n  private isToggleButtonEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.button);\r\n  }\r\n\r\n  private isMenuItemEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);\r\n  }\r\n\r\n  private toggleOptions(force?: boolean) {\r\n    this.open = force ?? !this.open;\r\n    if (this.popoverElement?.isConnected) {\r\n      this.popoverElement?.togglePopover(this.open);\r\n    }\r\n\r\n    if (!this.open && this.cleanUp) {\r\n      this.cleanUp();\r\n      this.cleanUp = undefined;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.toggleOptions(false);\r\n  }\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (\r\n      this.open &&\r\n      (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))\r\n    ) {\r\n      this.toggleOptions(false);\r\n    }\r\n  };\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented || !this.open) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"Tab\":\r\n        if (event.shiftKey) {\r\n          this.tabInPopup(this.tabbables(true), -1);\r\n        } else {\r\n          this.tabInPopup(this.tabbables(true), 1);\r\n        }\r\n\r\n        break;\r\n      case \"ArrowDown\":\r\n        this.tabInPopup(this.tabbables(false), 1);\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        this.tabInPopup(this.tabbables(false), -1);\r\n        break;\r\n\r\n      case \"Escape\":\r\n        this.escape();\r\n        break;\r\n\r\n      case \" \":\r\n        if (event.target instanceof HTMLElement) {\r\n          event.target.click();\r\n        }\r\n\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  private tabInPopup(tabbables: FocusableElement[], direction: number) {\r\n    const currentIndex = tabbables.findIndex((e) => e === getActiveElement());\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= tabbables.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = tabbables.length - 1;\r\n    }\r\n\r\n    tabbables[nextIndex]?.focus();\r\n  }\r\n\r\n  private escape = () => {\r\n    this.button.focus();\r\n    this.toggleOptions(false);\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host onKeydown={this.keyDownListener} onFocusout={this.focusOutListener}>\r\n        <slot name=\"toggle\" />\r\n        <div popover=\"manual\" ref={(element) => (this.popoverElement = element)}>\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/{p-0fa53dc8.entry.js → p-9286a89d.entry.js}

@@ -1,2 +1,2 @@
-import{h as o,r as n,c as i,f as s,H as t,F as e,g as d}from"./p-DxWmN7gh.js";import{c as r}from"./p-ChV9xqsO.js";import{i as a}from"./p-B_kXuEcW.js";import{i as l}from"./p-Hgv-pDpy.js";const p={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 u=({item:n,onClick:i,key:s,ref:t})=>o("li",{class:r({"dso-active":n.active}),key:s,ref:t},o("a",{href:n.url,"aria-current":n.active?"page":undefined,onClick:i},n.label));const h='@charset "UTF-8";*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([is-compact]) ::slotted([slot=logo]){--_dso-logo-block-size:2.5rem !important}:host([is-compact]) .dso-header{flex-wrap:nowrap}:host([is-compact]) dso-dropdown-menu .dso-dropdown-options{inline-size:100%}:host(:not([is-compact])) .dso-header{align-items:center}:host(:not([is-compact])) dso-dropdown-menu .dso-dropdown-options{inline-size:375px}.dso-header{border-block-end:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}.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+.logout,.dso-header-session .logout+.help,.dso-header-session .login+.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%;max-inline-size:100%;position:relative}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)}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:not(:hover):not(:focus-visible),dso-dropdown-menu .dso-dropdown-options ul li button:visited:not(:hover):not(:focus-visible){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.ready .menu-user-home{margin-inline-start:auto}.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;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;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 .main-menu-item-icon{block-size:1em;margin-inline-end:8px;position:relative;inset-block-start:-2px;inline-size:1.2em}.dso-nav .dropdown-menu-item .main-menu-item-icon{margin-inline-end:0}';const c=992;const m=class{constructor(o){n(this,o);this.dsoHeaderClick=i(this,"dsoHeaderClick",7);this.mainMenu=[];this.compact="auto";this.authStatus="none";this.showHelp=false;this.userHomeActive=false;this.visibleMenuItemsCount=undefined;this.dropdownOptionsOffset=0;this.onWindowResize=()=>this.resetVisibleMenuItems();this.resetVisibleMenuItems=()=>{this.visibleMenuItemsCount=undefined};this.clickHandler=(o,n,i)=>{var s,t;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:(t=i===null||i===void 0?void 0:i.menuItem)===null||t===void 0?void 0:t.url})};this.menuItemElementRefs=[];this.text=a((()=>this.host),p)}mainMenuChanged(){this.resetVisibleMenuItems()}resizeListener(){this.onWindowResize();s(this.host)}get isCompact(){return this.compact==="always"||window.innerWidth<c}calculateOverflowMenuItemCount(o){var n;const i=o.offsetWidth;const s=this.menuItemElementRefs[this.menuItemElementRefs.length-1];const t=(n=this.userHomeMenuItemElementRef)!==null&&n!==void 0?n:s;const e=this.dropdownMenuItemElementRef;if(!t||!e||!s){return this.menuItemElementRefs.length}const d=e.offsetLeft+e.offsetWidth-(s.offsetLeft+s.offsetWidth);const r=t.offsetLeft+t.offsetWidth-d;if(r<=i){return this.menuItemElementRefs.length}const a=this.userHomeMenuItemElementRef?this.userHomeMenuItemElementRef.offsetLeft+this.userHomeMenuItemElementRef.offsetWidth-(e.offsetLeft+e.offsetWidth):0;const l=i-d-a;const p=this.menuItemElementRefs.findIndex((o=>o&&o.offsetLeft+o.offsetWidth>l));if(p<0){return this.menuItemElementRefs.length}return p}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)}get visibleMainMenuItems(){return typeof this.visibleMenuItemsCount==="number"?this.mainMenu.slice(0,this.visibleMenuItemsCount):this.mainMenu}get hiddenMainMenuItems(){return typeof this.visibleMenuItemsCount==="number"?this.mainMenu.slice(this.visibleMenuItemsCount):[]}componentDidRender(){if(!this.host.isConnected){return}if(this.isCompact&&this.dropdownElement){this.dropdownElement.dropdownOptionsOffset=this.calculateDropdownOptionsOffset()}if(typeof this.visibleMenuItemsCount==="undefined"&&this.navElement){this.visibleMenuItemsCount=this.calculateOverflowMenuItemCount(this.navElement)}}render(){return o(t,{key:"49eb44a649806f313dda442790c1c1204fa256ae","is-compact":this.isCompact},o("div",{key:"fd8c881786ef45468a1c2626bdb7d1182fae5d3c",class:"dso-header"},o("div",{key:"a60b7c6dc740150e03509b14cc2e39d0df7a3294",class:"logo-container"},o("slot",{key:"2006e319d2a1128eca6f5bf7659f4fc54acfd935",name:"logo"})),this.isCompact?this.renderCompact():this.renderNormal()))}renderCompact(){return(this.mainMenu.length>0||this.userHomeUrl||this.authStatus!=="none")&&o("div",{class:"dropdown"},o("dso-dropdown-menu",{"dropdown-align":"right",dropdownOptionsOffset:this.dropdownOptionsOffset,ref:o=>this.dropdownElement=o},o("button",{type:"button",slot:"toggle"},o("span",null,this.text("menu")),o("dso-icon",{icon:"chevron-down"})),o("div",{class:"dso-dropdown-options"},o("ul",null,this.mainMenu.map((n=>o(u,{item:n,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:n})}))),this.userHomeUrl&&o("li",null,o("a",{href:this.userHomeUrl,onClick:o=>this.clickHandler(o,"userHome",{url:this.userHomeUrl})},this.text("userHome"))),this.userProfileUrl&&this.userProfileName&&this.authStatus==="loggedIn"&&o("li",null,o("a",{href:this.userProfileUrl,onClick:o=>this.clickHandler(o,"profile",{url:this.userProfileUrl})},this.userProfileName,o("span",{class:"profile-label"}," - Mijn profiel"))),this.authStatus==="loggedOut"&&o("li",null,this.loginUrl?o("a",{href:this.loginUrl,onClick:o=>this.clickHandler(o,"login",{url:this.loginUrl})},this.text("login")):o("button",{type:"button",onClick:o=>this.clickHandler(o,"login")},this.text("login"))),this.authStatus==="loggedIn"&&o("li",null,this.logoutUrl?o("a",{href:this.logoutUrl,onClick:o=>this.clickHandler(o,"logout",{url:this.logoutUrl})},this.text("logout")):o("button",{type:"button",onClick:o=>this.clickHandler(o,"logout")},this.text("logout"))),this.showHelp&&o("li",null,this.helpUrl?o("a",{href:this.helpUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"help",{url:this.helpUrl})},o("span",null,this.text("help")),o("dso-icon",{icon:"help"})):o("button",{type:"button",class:"dso-tertiary",onClick:o=>this.clickHandler(o,"help")},o("span",null,this.text("help")),o("dso-icon",{icon:"help"})))))))}renderNormal(){this.menuItemElementRefs=[];return o(e,null,o("div",{class:"dso-header-session"},this.userProfileUrl&&this.userProfileName&&this.authStatus==="loggedIn"&&o("div",{class:"profile"},o("a",{href:this.userProfileUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"profile",{url:this.userProfileUrl})},this.userProfileName)),this.authStatus==="loggedOut"&&o("div",{class:"login"},this.loginUrl?o("a",{href:this.loginUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"login",{url:this.loginUrl})},this.text("login")):o("button",{class:"dso-tertiary",type:"button",onClick:o=>this.clickHandler(o,"login")},this.text("login"))),this.authStatus==="loggedIn"&&o("div",{class:"logout"},this.logoutUrl?o("a",{href:this.logoutUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"logout",{url:this.logoutUrl})},this.text("logout")):o("button",{class:"dso-tertiary",type:"button",onClick:o=>this.clickHandler(o,"logout")},this.text("logout"))),this.showHelp&&o("div",{class:"help"},this.helpUrl?o("a",{href:this.helpUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"help",{url:this.helpUrl})},o("span",null,this.text("help")),o("dso-icon",{icon:"help"})):o("button",{class:"dso-tertiary",type:"button",onClick:o=>this.clickHandler(o,"help")},o("span",null,this.text("help")),o("dso-icon",{icon:"help"})))),(this.mainMenu.length>0||this.userHomeUrl)&&o("nav",{class:"dso-navbar"},o("ul",{class:r("dso-nav","dso-nav-main",{ready:this.visibleMenuItemsCount!==undefined}),ref:o=>this.navElement=o},this.visibleMainMenuItems.map(((n,i)=>o(u,{item:n,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:n}),key:n.label,ref:o=>this.menuItemElementRefs[i]=o}))),(this.visibleMenuItemsCount===undefined||this.hiddenMainMenuItems.length>0)&&o("li",{"aria-hidden":this.visibleMenuItemsCount===undefined,ref:o=>this.dropdownMenuItemElementRef=o,class:"dropdown-menu-item"},o("dso-dropdown-menu",null,o("button",{type:"button",slot:"toggle"},o("span",null,this.text("overflowMenu")),o("dso-icon",{icon:"chevron-down",class:"main-menu-item-icon"})),o("div",{class:"dso-dropdown-options"},o("ul",null,this.hiddenMainMenuItems.map((n=>o(u,{item:n,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:n})}))))))),this.userHomeUrl&&o("li",{class:r("menu-user-home",{"dso-active":this.userHomeActive}),ref:o=>this.userHomeMenuItemElementRef=o},o("a",{href:this.userHomeUrl,"aria-current":this.userHomeActive?"page":undefined,onClick:o=>this.clickHandler(o,"userHome",{url:this.userHomeUrl})},o("dso-icon",{icon:"user-line",class:"main-menu-item-icon"}),this.text("userHome"))))))}get host(){return d(this)}static get watchers(){return{mainMenu:["mainMenuChanged"]}}};m.style=h;export{m as dso_header};
-//# sourceMappingURL=p-0fa53dc8.entry.js.map
+import{h as o,r as n,c as i,f as s,H as t,F as e,g as d}from"./p-DxWmN7gh.js";import{c as r}from"./p-ChV9xqsO.js";import{i as a}from"./p-B_kXuEcW.js";import{i as l}from"./p-Hgv-pDpy.js";const p={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 u=({item:n,onClick:i,key:s,ref:t})=>o("li",{class:r({"dso-active":n.active}),key:s,ref:t},o("a",{href:n.url,"aria-current":n.active?"page":undefined,onClick:i},n.label));const h='@charset "UTF-8";*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([is-compact]) ::slotted([slot=logo]){--_dso-logo-block-size:2.5rem !important}:host([is-compact]) .dso-header{flex-wrap:nowrap}:host([is-compact]) dso-dropdown-menu .dso-dropdown-options{inline-size:100%}:host(:not([is-compact])) .dso-header{align-items:center}:host(:not([is-compact])) dso-dropdown-menu .dso-dropdown-options{inline-size:375px}.dso-header{border-block-end:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}.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+.logout,.dso-header-session .logout+.help,.dso-header-session .login+.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%;max-inline-size:100%;position:relative}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)}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:not(:hover):not(:focus-visible),dso-dropdown-menu .dso-dropdown-options ul li button:visited:not(:hover):not(:focus-visible){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.ready .menu-user-home{margin-inline-start:auto}.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;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;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 .main-menu-item-icon{block-size:1em;margin-inline-end:8px;position:relative;inset-block-start:-2px;inline-size:1.2em}.dso-nav .dropdown-menu-item .main-menu-item-icon{margin-inline-end:0}';const c=992;const m=class{constructor(o){n(this,o);this.dsoHeaderClick=i(this,"dsoHeaderClick",7);this.mainMenu=[];this.compact="auto";this.authStatus="none";this.showHelp=false;this.userHomeActive=false;this.visibleMenuItemsCount=undefined;this.dropdownOptionsOffset=0;this.resetVisibleMenuItems=()=>{this.visibleMenuItemsCount=undefined};this.clickHandler=(o,n,i)=>{var s,t;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:(t=i===null||i===void 0?void 0:i.menuItem)===null||t===void 0?void 0:t.url})};this.menuItemElementRefs=[];this.text=a((()=>this.host),p);this.resizeObserver=new ResizeObserver((()=>{this.resetVisibleMenuItems();s(this.host)}))}mainMenuChanged(){this.resetVisibleMenuItems()}get isCompact(){return this.compact==="always"||window.innerWidth<c}calculateOverflowMenuItemCount(o){var n;const i=o.offsetWidth;const s=this.menuItemElementRefs[this.menuItemElementRefs.length-1];const t=(n=this.userHomeMenuItemElementRef)!==null&&n!==void 0?n:s;const e=this.dropdownMenuItemElementRef;if(!t||!e||!s){return this.menuItemElementRefs.length}const d=e.offsetLeft+e.offsetWidth-(s.offsetLeft+s.offsetWidth);const r=t.offsetLeft+t.offsetWidth-d;if(r<=i){return this.menuItemElementRefs.length}const a=this.userHomeMenuItemElementRef?this.userHomeMenuItemElementRef.offsetLeft+this.userHomeMenuItemElementRef.offsetWidth-(e.offsetLeft+e.offsetWidth):0;const l=i-d-a;const p=this.menuItemElementRefs.findIndex((o=>o&&o.offsetLeft+o.offsetWidth>l));if(p<0){return this.menuItemElementRefs.length}return p}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)}get visibleMainMenuItems(){return typeof this.visibleMenuItemsCount==="number"?this.mainMenu.slice(0,this.visibleMenuItemsCount):this.mainMenu}get hiddenMainMenuItems(){return typeof this.visibleMenuItemsCount==="number"?this.mainMenu.slice(this.visibleMenuItemsCount):[]}disconnectedCallback(){this.resizeObserver.disconnect()}componentDidLoad(){this.resizeObserver.observe(this.host)}componentDidRender(){if(!this.host.isConnected){return}if(this.isCompact&&this.dropdownElement){this.dropdownElement.dropdownOptionsOffset=this.calculateDropdownOptionsOffset()}if(typeof this.visibleMenuItemsCount==="undefined"&&this.navElement){this.visibleMenuItemsCount=this.calculateOverflowMenuItemCount(this.navElement)}}render(){return o(t,{key:"60c02eb30154e4a8ac52fc05ba9bc4350a4a076a","is-compact":this.isCompact},o("div",{key:"69f5ec4d6d6c3287afffe94218b6ee8cca57908e",class:"dso-header"},o("div",{key:"dc64250620ba112ea0b59eddba6d0bb52e3c3888",class:"logo-container"},o("slot",{key:"6217f7b213020f04c5c2d2929efbfaec98a60276",name:"logo"})),this.isCompact?this.renderCompact():this.renderNormal()))}renderCompact(){return(this.mainMenu.length>0||this.userHomeUrl||this.authStatus!=="none")&&o("div",{class:"dropdown"},o("dso-dropdown-menu",{"dropdown-align":"right",dropdownOptionsOffset:this.dropdownOptionsOffset,ref:o=>this.dropdownElement=o},o("button",{type:"button",slot:"toggle"},o("span",null,this.text("menu")),o("dso-icon",{icon:"chevron-down"})),o("div",{class:"dso-dropdown-options"},o("ul",null,this.mainMenu.map((n=>o(u,{item:n,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:n})}))),this.userHomeUrl&&o("li",null,o("a",{href:this.userHomeUrl,onClick:o=>this.clickHandler(o,"userHome",{url:this.userHomeUrl})},this.text("userHome"))),this.userProfileUrl&&this.userProfileName&&this.authStatus==="loggedIn"&&o("li",null,o("a",{href:this.userProfileUrl,onClick:o=>this.clickHandler(o,"profile",{url:this.userProfileUrl})},this.userProfileName,o("span",{class:"profile-label"}," - Mijn profiel"))),this.authStatus==="loggedOut"&&o("li",null,this.loginUrl?o("a",{href:this.loginUrl,onClick:o=>this.clickHandler(o,"login",{url:this.loginUrl})},this.text("login")):o("button",{type:"button",onClick:o=>this.clickHandler(o,"login")},this.text("login"))),this.authStatus==="loggedIn"&&o("li",null,this.logoutUrl?o("a",{href:this.logoutUrl,onClick:o=>this.clickHandler(o,"logout",{url:this.logoutUrl})},this.text("logout")):o("button",{type:"button",onClick:o=>this.clickHandler(o,"logout")},this.text("logout"))),this.showHelp&&o("li",null,this.helpUrl?o("a",{href:this.helpUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"help",{url:this.helpUrl})},o("span",null,this.text("help")),o("dso-icon",{icon:"help"})):o("button",{type:"button",class:"dso-tertiary",onClick:o=>this.clickHandler(o,"help")},o("span",null,this.text("help")),o("dso-icon",{icon:"help"})))))))}renderNormal(){this.menuItemElementRefs=[];return o(e,null,o("div",{class:"dso-header-session"},this.userProfileUrl&&this.userProfileName&&this.authStatus==="loggedIn"&&o("div",{class:"profile"},o("a",{href:this.userProfileUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"profile",{url:this.userProfileUrl})},this.userProfileName)),this.authStatus==="loggedOut"&&o("div",{class:"login"},this.loginUrl?o("a",{href:this.loginUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"login",{url:this.loginUrl})},this.text("login")):o("button",{class:"dso-tertiary",type:"button",onClick:o=>this.clickHandler(o,"login")},this.text("login"))),this.authStatus==="loggedIn"&&o("div",{class:"logout"},this.logoutUrl?o("a",{href:this.logoutUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"logout",{url:this.logoutUrl})},this.text("logout")):o("button",{class:"dso-tertiary",type:"button",onClick:o=>this.clickHandler(o,"logout")},this.text("logout"))),this.showHelp&&o("div",{class:"help"},this.helpUrl?o("a",{href:this.helpUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"help",{url:this.helpUrl})},o("span",null,this.text("help")),o("dso-icon",{icon:"help"})):o("button",{class:"dso-tertiary",type:"button",onClick:o=>this.clickHandler(o,"help")},o("span",null,this.text("help")),o("dso-icon",{icon:"help"})))),(this.mainMenu.length>0||this.userHomeUrl)&&o("nav",{class:"dso-navbar"},o("ul",{class:r("dso-nav","dso-nav-main",{ready:this.visibleMenuItemsCount!==undefined}),ref:o=>this.navElement=o},this.visibleMainMenuItems.map(((n,i)=>o(u,{item:n,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:n}),key:n.label,ref:o=>this.menuItemElementRefs[i]=o}))),(this.visibleMenuItemsCount===undefined||this.hiddenMainMenuItems.length>0)&&o("li",{"aria-hidden":this.visibleMenuItemsCount===undefined,ref:o=>this.dropdownMenuItemElementRef=o,class:"dropdown-menu-item"},o("dso-dropdown-menu",null,o("button",{type:"button",slot:"toggle"},o("span",null,this.text("overflowMenu")),o("dso-icon",{icon:"chevron-down",class:"main-menu-item-icon"})),o("div",{class:"dso-dropdown-options"},o("ul",null,this.hiddenMainMenuItems.map((n=>o(u,{item:n,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:n})}))))))),this.userHomeUrl&&o("li",{class:r("menu-user-home",{"dso-active":this.userHomeActive}),ref:o=>this.userHomeMenuItemElementRef=o},o("a",{href:this.userHomeUrl,"aria-current":this.userHomeActive?"page":undefined,onClick:o=>this.clickHandler(o,"userHome",{url:this.userHomeUrl})},o("dso-icon",{icon:"user-line",class:"main-menu-item-icon"}),this.text("userHome"))))))}get host(){return d(this)}static get watchers(){return{mainMenu:["mainMenuChanged"]}}};m.style=h;export{m as dso_header};
+//# sourceMappingURL=p-9286a89d.entry.js.map

package/dist/dso-toolkit/p-9286a89d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["translations","en","menu","login","logout","help","overflowMenu","nl","userHome","MenuItem","item","onClick","key","ref","h","class","clsx","active","href","url","undefined","label","headerCss","minDesktopViewportWidth","Header","constructor","hostRef","this","mainMenu","compact","authStatus","showHelp","userHomeActive","visibleMenuItemsCount","dropdownOptionsOffset","resetVisibleMenuItems","clickHandler","e","type","options","dsoHeaderClick","emit","originalEvent","isModifiedEvent","menuItem","_a","_b","menuItemElementRefs","text","i18n","host","resizeObserver","ResizeObserver","forceUpdate","mainMenuChanged","isCompact","window","innerWidth","calculateOverflowMenuItemCount","navElement","availableWidth","offsetWidth","lastMenuItem","length","mostRightMenuItem","userHomeMenuItemElementRef","dropdownMenuItem","dropdownMenuItemElementRef","dropdownMenuItemEffectiveWidth","offsetLeft","requiredWidth","userHomeMenuItemEffectiveWidth","remainingWidth","visibleMenuItems","findIndex","calculateDropdownOptionsOffset","dropdownElement","clientHeight","getBoundingClientRect","bottom","top","visibleMainMenuItems","slice","hiddenMainMenuItems","disconnectedCallback","disconnect","componentDidLoad","observe","componentDidRender","isConnected","render","Host","name","renderCompact","renderNormal","userHomeUrl","element","slot","icon","map","userProfileUrl","userProfileName","loginUrl","logoutUrl","helpUrl","Fragment","ready","i","el"],"sources":["src/components/header/header.i18n.ts","src/components/header/menu-item.functional-component.tsx","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","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { HeaderMenuItem } from \"./header.interfaces\";\r\n\r\nexport interface MenuItemProps {\r\n  item: HeaderMenuItem;\r\n  onClick: (event: MouseEvent) => void;\r\n  key?: string;\r\n  ref?: (el: HTMLLIElement | undefined) => void;\r\n}\r\n\r\nexport const MenuItem: FunctionalComponent<MenuItemProps> = ({ item, onClick, key, ref }) => {\r\n  return (\r\n    <li class={clsx({ \"dso-active\": item.active })} key={key} ref={ref}>\r\n      <a href={item.url} aria-current={item.active ? \"page\" : undefined} onClick={onClick}>\r\n        {item.label}\r\n      </a>\r\n    </li>\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  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:host([is-compact]) {\r\n  ::slotted([slot=\"logo\"]) {\r\n    --_dso-logo-block-size: #{units.$ru5} !important;\r\n  }\r\n\r\n  .dso-header {\r\n    flex-wrap: nowrap;\r\n  }\r\n\r\n  dso-dropdown-menu {\r\n    .dso-dropdown-options {\r\n      inline-size: 100%;\r\n    }\r\n  }\r\n}\r\n\r\n:host(:not([is-compact])) {\r\n  .dso-header {\r\n    align-items: center;\r\n  }\r\n\r\n  dso-dropdown-menu {\r\n    .dso-dropdown-options {\r\n      inline-size: 375px;\r\n    }\r\n  }\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  .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 + .logout,\r\n  .logout + .help,\r\n  .login + .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  .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  max-inline-size: 100%;\r\n  position: relative; // Needed for menu item calculations\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    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:not(:hover):not(:focus-visible) {\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  &.ready {\r\n    .menu-user-home {\r\n      margin-inline-start: auto;\r\n    }\r\n  }\r\n\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  .main-menu-item-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  .dropdown-menu-item .main-menu-item-icon {\r\n    margin-inline-end: 0;\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\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 {\r\n  HeaderAuthStatus,\r\n  HeaderCompactMode,\r\n  HeaderEvent,\r\n  HeaderMenuItem,\r\n  HeaderNavigationType,\r\n} from \"./header.interfaces\";\r\nimport { MenuItem } from \"./menu-item.functional-component\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\ninterface ClickHandlerOptions {\r\n  menuItem?: HeaderMenuItem;\r\n  url?: string;\r\n}\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 implements ComponentInterface {\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   * Set to \"always\" to force the header to be compact. Otherwise it will be compact when\r\n   * the viewport is smaller than 992px.\r\n   */\r\n  @Prop()\r\n  compact: HeaderCompactMode = \"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: HeaderAuthStatus = \"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 = false;\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  @State()\r\n  visibleMenuItemsCount: number | undefined = undefined;\r\n\r\n  @State()\r\n  dropdownOptionsOffset = 0;\r\n\r\n  @Watch(\"mainMenu\")\r\n  mainMenuChanged() {\r\n    this.resetVisibleMenuItems();\r\n  }\r\n\r\n  private resetVisibleMenuItems = () => {\r\n    this.visibleMenuItemsCount = undefined;\r\n  };\r\n\r\n  private get isCompact() {\r\n    return this.compact === \"always\" || window.innerWidth < minDesktopViewportWidth;\r\n  }\r\n\r\n  private clickHandler = (e: MouseEvent, type: HeaderNavigationType, options?: ClickHandlerOptions) => {\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: HTMLDsoDropdownMenuElement | undefined;\r\n  private navElement: HTMLUListElement | undefined;\r\n  private menuItemElementRefs: (HTMLLIElement | undefined)[] = [];\r\n  private dropdownMenuItemElementRef: HTMLLIElement | undefined;\r\n  private userHomeMenuItemElementRef: HTMLLIElement | undefined;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  /**\r\n   * Before determining the visible menu items, all the menu items are rendered (including the dropdown menu item and the user home menu item).\r\n   * Then the visible menu items are calculated in componentDidRender() and ONLY when the visibleMenuItemsCount is undefined.\r\n   *\r\n   * When the window resizes or this.mainMenu changes, a reset is triggered to recalculate the visible menu items.\r\n   *\r\n   * @param navElement The navigation element to calculate the overflow menu item count for.\r\n   * @returns The number of menu items that can fit in the available space.\r\n   */\r\n  private calculateOverflowMenuItemCount(navElement: HTMLUListElement): number {\r\n    const availableWidth = navElement.offsetWidth;\r\n\r\n    const lastMenuItem = this.menuItemElementRefs[this.menuItemElementRefs.length - 1];\r\n    const mostRightMenuItem = this.userHomeMenuItemElementRef ?? lastMenuItem;\r\n    const dropdownMenuItem = this.dropdownMenuItemElementRef;\r\n\r\n    if (!mostRightMenuItem || !dropdownMenuItem || !lastMenuItem) {\r\n      return this.menuItemElementRefs.length;\r\n    }\r\n\r\n    const dropdownMenuItemEffectiveWidth =\r\n      dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth - (lastMenuItem.offsetLeft + lastMenuItem.offsetWidth);\r\n\r\n    const requiredWidth = mostRightMenuItem.offsetLeft + mostRightMenuItem.offsetWidth - dropdownMenuItemEffectiveWidth;\r\n\r\n    if (requiredWidth <= availableWidth) {\r\n      return this.menuItemElementRefs.length;\r\n    }\r\n\r\n    const userHomeMenuItemEffectiveWidth = this.userHomeMenuItemElementRef\r\n      ? this.userHomeMenuItemElementRef.offsetLeft +\r\n        this.userHomeMenuItemElementRef.offsetWidth -\r\n        (dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth)\r\n      : 0;\r\n\r\n    const remainingWidth = availableWidth - dropdownMenuItemEffectiveWidth - userHomeMenuItemEffectiveWidth;\r\n\r\n    const visibleMenuItems = this.menuItemElementRefs.findIndex(\r\n      (menuItem) => menuItem && menuItem.offsetLeft + menuItem.offsetWidth > remainingWidth,\r\n    );\r\n\r\n    if (visibleMenuItems < 0) {\r\n      return this.menuItemElementRefs.length;\r\n    }\r\n\r\n    return visibleMenuItems;\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 get visibleMainMenuItems(): HeaderMenuItem[] {\r\n    return typeof this.visibleMenuItemsCount === \"number\"\r\n      ? this.mainMenu.slice(0, this.visibleMenuItemsCount)\r\n      : this.mainMenu;\r\n  }\r\n\r\n  private get hiddenMainMenuItems(): HeaderMenuItem[] {\r\n    return typeof this.visibleMenuItemsCount === \"number\" ? this.mainMenu.slice(this.visibleMenuItemsCount) : [];\r\n  }\r\n\r\n  private resizeObserver = new ResizeObserver(() => {\r\n    this.resetVisibleMenuItems();\r\n\r\n    forceUpdate(this.host);\r\n  });\r\n\r\n  disconnectedCallback() {\r\n    this.resizeObserver.disconnect();\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.resizeObserver.observe(this.host);\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (!this.host.isConnected) {\r\n      return;\r\n    }\r\n\r\n    if (this.isCompact && this.dropdownElement) {\r\n      this.dropdownElement.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n    }\r\n\r\n    if (typeof this.visibleMenuItemsCount === \"undefined\" && this.navElement) {\r\n      this.visibleMenuItemsCount = this.calculateOverflowMenuItemCount(this.navElement);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host is-compact={this.isCompact}>\r\n        <div class=\"dso-header\">\r\n          <div class=\"logo-container\">\r\n            <slot name=\"logo\" />\r\n          </div>\r\n          {this.isCompact ? this.renderCompact() : this.renderNormal()}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private renderCompact() {\r\n    return (\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            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((menuItem) => (\r\n                  <MenuItem item={menuItem} onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })} />\r\n                ))}\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 href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\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 href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\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    );\r\n  }\r\n\r\n  private renderNormal() {\r\n    this.menuItemElementRefs = [];\r\n\r\n    return (\r\n      <Fragment>\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.length > 0 || this.userHomeUrl) && (\r\n          <nav class=\"dso-navbar\">\r\n            <ul\r\n              class={clsx(\"dso-nav\", \"dso-nav-main\", { ready: this.visibleMenuItemsCount !== undefined })}\r\n              ref={(element) => (this.navElement = element)}\r\n            >\r\n              {this.visibleMainMenuItems.map((menuItem, i) => (\r\n                <MenuItem\r\n                  item={menuItem}\r\n                  onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n                  key={menuItem.label}\r\n                  ref={(el) => (this.menuItemElementRefs[i] = el)}\r\n                />\r\n              ))}\r\n              {(this.visibleMenuItemsCount === undefined || this.hiddenMainMenuItems.length > 0) && (\r\n                <li\r\n                  aria-hidden={this.visibleMenuItemsCount === undefined}\r\n                  ref={(el) => (this.dropdownMenuItemElementRef = el)}\r\n                  class=\"dropdown-menu-item\"\r\n                >\r\n                  <dso-dropdown-menu>\r\n                    <button type=\"button\" slot=\"toggle\">\r\n                      <span>{this.text(\"overflowMenu\")}</span>\r\n                      <dso-icon icon=\"chevron-down\" class=\"main-menu-item-icon\"></dso-icon>\r\n                    </button>\r\n                    <div class=\"dso-dropdown-options\">\r\n                      <ul>\r\n                        {this.hiddenMainMenuItems.map((menuItem) => (\r\n                          <MenuItem item={menuItem} onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })} />\r\n                        ))}\r\n                      </ul>\r\n                    </div>\r\n                  </dso-dropdown-menu>\r\n                </li>\r\n              )}\r\n              {this.userHomeUrl && (\r\n                <li\r\n                  class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}\r\n                  ref={(el) => (this.userHomeMenuItemElementRef = el)}\r\n                >\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\" class=\"main-menu-item-icon\"></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      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/dso-dropdown-menu.entry.js

@@ -156,11 +156,7 @@ const DropdownMenu = class {
             this.cleanUp = undefined;
         }
     }
-    connectedCallback() {
-        this.host.addEventListener("keydown", this.keyDownListener);
-    }
     disconnectedCallback() {
-        this.host.removeEventListener("keydown", this.keyDownListener);
         this.toggleOptions(false);
     }
     tabInPopup(tabbables, direction) {
@@ -176,7 +172,7 @@ const DropdownMenu = class {
         (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: '67dc063007a13557b2f87c335532e65790bc05fb', onFocusout: this.focusOutListener }, h("slot", { key: '1609e638697b18c00ef4607ab8f08e77b8ea1c9e', name: "toggle" }), h("div", { key: 'fc1aeee0f0c9ea89c083d325e6c05acb42a23af3', popover: "manual", ref: (element) => (this.popoverElement = element) }, h("slot", { key: '4d6c1bc84e3a3fa44274b3af63e630537914c3e9' }))));
+        return (h(Host, { key: 'ab12bb85a5130e1b3165fadf14aa48fb3b3a22d6', onKeydown: this.keyDownListener, onFocusout: this.focusOutListener }, h("slot", { key: 'd7cda9baaf75ed5fec5ea2ea1fced5e188aee855', name: "toggle" }), h("div", { key: '12c21e0ff4514d4a1482d35a9c569c43906f3243', popover: "manual", ref: (element) => (this.popoverElement = element) }, h("slot", { key: '4b0428af264fe369d1738742b9656c6b2d90acf3' }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-dropdown-menu.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-dropdown-menu.entry.js","sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n}\r\n\r\n:host {\r\n  @include dropdown-menu.root();\r\n}\r\n\r\ndiv[popover] {\r\n  margin: 0 !important;\r\n  border: 0;\r\n  padding: 0;\r\n  background-color: transparent;\r\n  overflow: unset;\r\n  inline-size: max-content;\r\n}\r\n","import { autoUpdate, computePosition, flip, offset } from \"@floating-ui/dom\";\r\nimport { Component, Element, Host, Listen, Prop, h } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n  tag: \"dso-dropdown-menu\",\r\n  styleUrl: \"dropdown-menu.scss\",\r\n  shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n  /**\r\n   * Whether the menu is open or closed.\r\n   * This attribute is reflected and mutable.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Alignment of the dropdown\r\n   */\r\n  @Prop()\r\n  dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n  /**\r\n   * Space between button and dropdown options\r\n   */\r\n  @Prop()\r\n  dropdownOptionsOffset = 2;\r\n\r\n  /**\r\n   * Whether the menu is checkable.\r\n   */\r\n  @Prop()\r\n  checkable = false;\r\n\r\n  @Element()\r\n  host!: HTMLDsoDropdownMenuElement;\r\n\r\n  private cleanUp: ReturnType<typeof autoUpdate> | undefined;\r\n\r\n  private popoverElement: HTMLDivElement | undefined;\r\n\r\n  get button(): HTMLButtonElement {\r\n    const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n    if (!(button instanceof HTMLButtonElement)) {\r\n      throw new ReferenceError(\"Mandatory toggle button not found\");\r\n    }\r\n\r\n    return button;\r\n  }\r\n\r\n  private tabbables(withButton: boolean): FocusableElement[] {\r\n    const tabbables = this.host.isConnected ? tabbable(this.host) : [];\r\n\r\n    return withButton ? tabbables : tabbables.filter((element) => element !== this.button);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n    this.button.setAttribute(\"aria-expanded\", \"false\");\r\n    if (!this.button.id) {\r\n      this.button.id = uuidv4();\r\n    }\r\n\r\n    const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n    if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n      throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    dropdownOptionsElement.setAttribute(\"role\", \"menu\");\r\n    dropdownOptionsElement.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n    for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n      ul.setAttribute(\"role\", \"group\");\r\n      for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n        li.setAttribute(\"role\", \"none\");\r\n      }\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n      for (const tab of this.host.isConnected ? tabbable(li) : []) {\r\n        tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n        if (this.checkable) {\r\n          tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n        }\r\n      }\r\n    }\r\n\r\n    this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n\r\n    if (this.popoverElement && !this.cleanUp) {\r\n      const element = this.popoverElement;\r\n\r\n      this.cleanUp = autoUpdate(this.button, element, () => {\r\n        computePosition(this.button, element, {\r\n          strategy: \"fixed\",\r\n          middleware: [\r\n            offset(this.dropdownOptionsOffset),\r\n            flip({\r\n              padding: this.dropdownOptionsOffset,\r\n            }),\r\n          ],\r\n          placement: this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\",\r\n        }).then(({ x, y }) => {\r\n          Object.assign(element.style, {\r\n            left: `${x}px`,\r\n            top: `${y}px`,\r\n          });\r\n        });\r\n      });\r\n    }\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"window\" })\r\n  onClick(event: MouseEvent) {\r\n    const composedPath = event.composedPath();\r\n\r\n    if (this.isToggleButtonEvent(composedPath)) {\r\n      this.toggleOptions();\r\n    } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n      this.toggleOptions(false);\r\n    }\r\n  }\r\n\r\n  private isToggleButtonEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.button);\r\n  }\r\n\r\n  private isMenuItemEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);\r\n  }\r\n\r\n  private toggleOptions(force?: boolean) {\r\n    this.open = force ?? !this.open;\r\n    if (this.popoverElement?.isConnected) {\r\n      this.popoverElement?.togglePopover(this.open);\r\n    }\r\n\r\n    if (!this.open && this.cleanUp) {\r\n      this.cleanUp();\r\n      this.cleanUp = undefined;\r\n    }\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n\r\n    this.toggleOptions(false);\r\n  }\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (\r\n      this.open &&\r\n      (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))\r\n    ) {\r\n      this.toggleOptions(false);\r\n    }\r\n  };\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented || !this.open) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"Tab\":\r\n        if (event.shiftKey) {\r\n          this.tabInPopup(this.tabbables(true), -1);\r\n        } else {\r\n          this.tabInPopup(this.tabbables(true), 1);\r\n        }\r\n\r\n        break;\r\n      case \"ArrowDown\":\r\n        this.tabInPopup(this.tabbables(false), 1);\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        this.tabInPopup(this.tabbables(false), -1);\r\n        break;\r\n\r\n      case \"Escape\":\r\n        this.escape();\r\n        break;\r\n\r\n      case \" \":\r\n        if (event.target instanceof HTMLElement) {\r\n          event.target.click();\r\n        }\r\n\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  private tabInPopup(tabbables: FocusableElement[], direction: number) {\r\n    const currentIndex = tabbables.findIndex((e) => e === getActiveElement());\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= tabbables.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = tabbables.length - 1;\r\n    }\r\n\r\n    tabbables[nextIndex]?.focus();\r\n  }\r\n\r\n  private escape = () => {\r\n    this.button.focus();\r\n    this.toggleOptions(false);\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host onFocusout={this.focusOutListener}>\r\n        <slot name=\"toggle\" />\r\n        <div popover=\"manual\" ref={(element) => (this.popoverElement = element)}>\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["uuidv4"],"mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,gLAAgL;;MCY3L,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;AAGG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAEZ;;AAEG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAqB,MAAM;AAExC;;AAEG;AAEH,QAAA,IAAqB,CAAA,qBAAA,GAAG,CAAC;AAEzB;;AAEG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AA8HT,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;YAC/C,IACE,IAAI,CAAC,IAAI;iBACR,EAAE,KAAK,CAAC,aAAa,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,EACtG;AACA,gBAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;;AAE7B,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAoB,KAAI;YACjD,IAAI,KAAK,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gBACxC;;AAGF,YAAA,QAAQ,KAAK,CAAC,GAAG;AACf,gBAAA,KAAK,KAAK;AACR,oBAAA,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,wBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;;yBACpC;AACL,wBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;;oBAG1C;AACF,gBAAA,KAAK,WAAW;AACd,oBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;oBACzC;AAEF,gBAAA,KAAK,SAAS;AACZ,oBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;oBAC1C;AAEF,gBAAA,KAAK,QAAQ;oBACX,IAAI,CAAC,MAAM,EAAE;oBACb;AAEF,gBAAA,KAAK,GAAG;AACN,oBAAA,IAAI,KAAK,CAAC,MAAM,YAAY,WAAW,EAAE;AACvC,wBAAA,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE;;oBAGtB;AAEF,gBAAA;oBACE;;YAGJ,KAAK,CAAC,cAAc,EAAE;AACxB,SAAC;AAeO,QAAA,IAAM,CAAA,MAAA,GAAG,MAAK;AACpB,YAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;AACnB,YAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;AAC3B,SAAC;AAYF;AAlMC,IAAA,IAAI,MAAM,GAAA;QACR,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC;AAE/D,QAAA,IAAI,EAAE,MAAM,YAAY,iBAAiB,CAAC,EAAE;AAC1C,YAAA,MAAM,IAAI,cAAc,CAAC,mCAAmC,CAAC;;AAG/D,QAAA,OAAO,MAAM;;AAGP,IAAA,SAAS,CAAC,UAAmB,EAAA;QACnC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;QAElE,OAAO,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,OAAO,KAAK,OAAO,KAAK,IAAI,CAAC,MAAM,CAAC;;IAGxF,gBAAgB,GAAA;QACd,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;QACjD,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC;AAClD,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE;AACnB,YAAA,IAAI,CAAC,MAAM,CAAC,EAAE,GAAGA,EAAM,EAAE;;QAG3B,MAAM,sBAAsB,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC;AAE/E,QAAA,IAAI,EAAE,sBAAsB,YAAY,WAAW,CAAC,EAAE;AACpD,YAAA,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC;;AAG3E,QAAA,sBAAsB,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC;QACnD,sBAAsB,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;AAEtE,QAAA,KAAK,MAAM,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,EAAE;AACjE,YAAA,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC;AAChC,YAAA,KAAK,MAAM,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,EAAE;AAC1D,gBAAA,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC;;;;IAKrC,kBAAkB,GAAA;AAChB,QAAA,KAAK,MAAM,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,EAAE;YACjE,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE;AAC3D,gBAAA,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC;AAEvE,gBAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,oBAAA,GAAG,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,QAAQ,EAAE,CAAC;;;;AAKvF,QAAA,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,CAAC;QAEvE,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACxC,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,cAAc;AAEnC,YAAA,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,MAAK;AACnD,gBAAA,eAAe,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE;AACpC,oBAAA,QAAQ,EAAE,OAAO;AACjB,oBAAA,UAAU,EAAE;AACV,wBAAA,MAAM,CAAC,IAAI,CAAC,qBAAqB,CAAC;AAClC,wBAAA,IAAI,CAAC;4BACH,OAAO,EAAE,IAAI,CAAC,qBAAqB;yBACpC,CAAC;AACH,qBAAA;AACD,oBAAA,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,OAAO,GAAG,YAAY,GAAG,cAAc;iBAC1E,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAI;AACnB,oBAAA,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE;wBAC3B,IAAI,EAAE,CAAG,EAAA,CAAC,CAAI,EAAA,CAAA;wBACd,GAAG,EAAE,CAAG,EAAA,CAAC,CAAI,EAAA,CAAA;AACd,qBAAA,CAAC;AACJ,iBAAC,CAAC;AACJ,aAAC,CAAC;;;AAKN,IAAA,OAAO,CAAC,KAAiB,EAAA;AACvB,QAAA,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE;AAEzC,QAAA,IAAI,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,EAAE;YAC1C,IAAI,CAAC,aAAa,EAAE;;aACf,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,EAAE;AAC1D,YAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;;;AAIrB,IAAA,mBAAmB,CAAC,YAA2B,EAAA;QACrD,OAAO,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;;AAGnC,IAAA,eAAe,CAAC,YAA2B,EAAA;AACjD,QAAA,OAAO,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC;;AAG5E,IAAA,aAAa,CAAC,KAAe,EAAA;;QACnC,IAAI,CAAC,IAAI,GAAG,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,KAAK,GAAI,CAAC,IAAI,CAAC,IAAI;QAC/B,IAAI,MAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,EAAE;AACpC,YAAA,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;;QAG/C,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE;YAC9B,IAAI,CAAC,OAAO,EAAE;AACd,YAAA,IAAI,CAAC,OAAO,GAAG,SAAS;;;IAI5B,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;;IAG7D,oBAAoB,GAAA;QAClB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;AAE9D,QAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;;IAoDnB,UAAU,CAAC,SAA6B,EAAE,SAAiB,EAAA;;AACjE,QAAA,MAAM,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,gBAAgB,EAAE,CAAC;AAEzE,QAAA,IAAI,SAAS,GAAG,YAAY,GAAG,SAAS;AACxC,QAAA,IAAI,SAAS,IAAI,SAAS,CAAC,MAAM,EAAE;YACjC,SAAS,GAAG,CAAC;;AACR,aAAA,IAAI,SAAS,GAAG,CAAC,EAAE;AACxB,YAAA,SAAS,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC;;QAGlC,CAAA,EAAA,GAAA,SAAS,CAAC,SAAS,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;IAQ/B,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAA,EACrC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACtB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,OAAO,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,EAAA,EACrE,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;;"}
+{"version":3,"file":"dso-dropdown-menu.entry.js","sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n}\r\n\r\n:host {\r\n  @include dropdown-menu.root();\r\n}\r\n\r\ndiv[popover] {\r\n  margin: 0 !important;\r\n  border: 0;\r\n  padding: 0;\r\n  background-color: transparent;\r\n  overflow: unset;\r\n  inline-size: max-content;\r\n}\r\n","import { autoUpdate, computePosition, flip, offset } from \"@floating-ui/dom\";\r\nimport { Component, Element, Host, Listen, Prop, h } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n  tag: \"dso-dropdown-menu\",\r\n  styleUrl: \"dropdown-menu.scss\",\r\n  shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n  /**\r\n   * Whether the menu is open or closed.\r\n   * This attribute is reflected and mutable.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Alignment of the dropdown\r\n   */\r\n  @Prop()\r\n  dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n  /**\r\n   * Space between button and dropdown options\r\n   */\r\n  @Prop()\r\n  dropdownOptionsOffset = 2;\r\n\r\n  /**\r\n   * Whether the menu is checkable.\r\n   */\r\n  @Prop()\r\n  checkable = false;\r\n\r\n  @Element()\r\n  host!: HTMLDsoDropdownMenuElement;\r\n\r\n  private cleanUp: ReturnType<typeof autoUpdate> | undefined;\r\n\r\n  private popoverElement: HTMLDivElement | undefined;\r\n\r\n  get button(): HTMLButtonElement {\r\n    const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n    if (!(button instanceof HTMLButtonElement)) {\r\n      throw new ReferenceError(\"Mandatory toggle button not found\");\r\n    }\r\n\r\n    return button;\r\n  }\r\n\r\n  private tabbables(withButton: boolean): FocusableElement[] {\r\n    const tabbables = this.host.isConnected ? tabbable(this.host) : [];\r\n\r\n    return withButton ? tabbables : tabbables.filter((element) => element !== this.button);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n    this.button.setAttribute(\"aria-expanded\", \"false\");\r\n    if (!this.button.id) {\r\n      this.button.id = uuidv4();\r\n    }\r\n\r\n    const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n    if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n      throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    dropdownOptionsElement.setAttribute(\"role\", \"menu\");\r\n    dropdownOptionsElement.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n    for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n      ul.setAttribute(\"role\", \"group\");\r\n      for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n        li.setAttribute(\"role\", \"none\");\r\n      }\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n      for (const tab of this.host.isConnected ? tabbable(li) : []) {\r\n        tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n        if (this.checkable) {\r\n          tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n        }\r\n      }\r\n    }\r\n\r\n    this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n\r\n    if (this.popoverElement && !this.cleanUp) {\r\n      const element = this.popoverElement;\r\n\r\n      this.cleanUp = autoUpdate(this.button, element, () => {\r\n        computePosition(this.button, element, {\r\n          strategy: \"fixed\",\r\n          middleware: [\r\n            offset(this.dropdownOptionsOffset),\r\n            flip({\r\n              padding: this.dropdownOptionsOffset,\r\n            }),\r\n          ],\r\n          placement: this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\",\r\n        }).then(({ x, y }) => {\r\n          Object.assign(element.style, {\r\n            left: `${x}px`,\r\n            top: `${y}px`,\r\n          });\r\n        });\r\n      });\r\n    }\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"window\" })\r\n  onClick(event: MouseEvent) {\r\n    const composedPath = event.composedPath();\r\n\r\n    if (this.isToggleButtonEvent(composedPath)) {\r\n      this.toggleOptions();\r\n    } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n      this.toggleOptions(false);\r\n    }\r\n  }\r\n\r\n  private isToggleButtonEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.button);\r\n  }\r\n\r\n  private isMenuItemEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);\r\n  }\r\n\r\n  private toggleOptions(force?: boolean) {\r\n    this.open = force ?? !this.open;\r\n    if (this.popoverElement?.isConnected) {\r\n      this.popoverElement?.togglePopover(this.open);\r\n    }\r\n\r\n    if (!this.open && this.cleanUp) {\r\n      this.cleanUp();\r\n      this.cleanUp = undefined;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.toggleOptions(false);\r\n  }\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (\r\n      this.open &&\r\n      (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))\r\n    ) {\r\n      this.toggleOptions(false);\r\n    }\r\n  };\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented || !this.open) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"Tab\":\r\n        if (event.shiftKey) {\r\n          this.tabInPopup(this.tabbables(true), -1);\r\n        } else {\r\n          this.tabInPopup(this.tabbables(true), 1);\r\n        }\r\n\r\n        break;\r\n      case \"ArrowDown\":\r\n        this.tabInPopup(this.tabbables(false), 1);\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        this.tabInPopup(this.tabbables(false), -1);\r\n        break;\r\n\r\n      case \"Escape\":\r\n        this.escape();\r\n        break;\r\n\r\n      case \" \":\r\n        if (event.target instanceof HTMLElement) {\r\n          event.target.click();\r\n        }\r\n\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  private tabInPopup(tabbables: FocusableElement[], direction: number) {\r\n    const currentIndex = tabbables.findIndex((e) => e === getActiveElement());\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= tabbables.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = tabbables.length - 1;\r\n    }\r\n\r\n    tabbables[nextIndex]?.focus();\r\n  }\r\n\r\n  private escape = () => {\r\n    this.button.focus();\r\n    this.toggleOptions(false);\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host onKeydown={this.keyDownListener} onFocusout={this.focusOutListener}>\r\n        <slot name=\"toggle\" />\r\n        <div popover=\"manual\" ref={(element) => (this.popoverElement = element)}>\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["uuidv4"],"mappings":"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"}

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

@@ -60,7 +60,6 @@ const Header = class {
         this.userHomeActive = false;
         this.visibleMenuItemsCount = undefined;
         this.dropdownOptionsOffset = 0;
-        this.onWindowResize = () => this.resetVisibleMenuItems();
         this.resetVisibleMenuItems = () => {
             this.visibleMenuItemsCount = undefined;
         };
@@ -76,14 +75,14 @@ const Header = class {
         };
         this.menuItemElementRefs = [];
         this.text = i18n(() => this.host, translations);
+        this.resizeObserver = new ResizeObserver(() => {
+            this.resetVisibleMenuItems();
+            forceUpdate(this.host);
+        });
     }
     mainMenuChanged() {
         this.resetVisibleMenuItems();
     }
-    resizeListener() {
-        this.onWindowResize();
-        forceUpdate(this.host);
-    }
     get isCompact() {
         return this.compact === "always" || window.innerWidth < minDesktopViewportWidth;
     }
@@ -138,6 +137,12 @@ const Header = class {
     get hiddenMainMenuItems() {
         return typeof this.visibleMenuItemsCount === "number" ? this.mainMenu.slice(this.visibleMenuItemsCount) : [];
     }
+    disconnectedCallback() {
+        this.resizeObserver.disconnect();
+    }
+    componentDidLoad() {
+        this.resizeObserver.observe(this.host);
+    }
     componentDidRender() {
         if (!this.host.isConnected) {
             return;
@@ -150,7 +155,7 @@ const Header = class {
         }
     }
     render() {
-        return (h(Host, { key: '49eb44a649806f313dda442790c1c1204fa256ae', "is-compact": this.isCompact }, h("div", { key: 'fd8c881786ef45468a1c2626bdb7d1182fae5d3c', class: "dso-header" }, h("div", { key: 'a60b7c6dc740150e03509b14cc2e39d0df7a3294', class: "logo-container" }, h("slot", { key: '2006e319d2a1128eca6f5bf7659f4fc54acfd935', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: '60c02eb30154e4a8ac52fc05ba9bc4350a4a076a', "is-compact": this.isCompact }, h("div", { key: '69f5ec4d6d6c3287afffe94218b6ee8cca57908e', class: "dso-header" }, h("div", { key: 'dc64250620ba112ea0b59eddba6d0bb52e3c3888', class: "logo-container" }, h("slot", { key: '6217f7b213020f04c5c2d2929efbfaec98a60276', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     renderCompact() {
         return ((this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("menu")), h("dso-icon", { icon: "chevron-down" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }) }))), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("li", null, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))))))));

package/dist/esm/dso-header.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-header.entry.js","sources":["src/components/header/header.i18n.ts","src/components/header/menu-item.functional-component.tsx","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","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { HeaderMenuItem } from \"./header.interfaces\";\r\n\r\nexport interface MenuItemProps {\r\n  item: HeaderMenuItem;\r\n  onClick: (event: MouseEvent) => void;\r\n  key?: string;\r\n  ref?: (el: HTMLLIElement | undefined) => void;\r\n}\r\n\r\nexport const MenuItem: FunctionalComponent<MenuItemProps> = ({ item, onClick, key, ref }) => {\r\n  return (\r\n    <li class={clsx({ \"dso-active\": item.active })} key={key} ref={ref}>\r\n      <a href={item.url} aria-current={item.active ? \"page\" : undefined} onClick={onClick}>\r\n        {item.label}\r\n      </a>\r\n    </li>\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  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:host([is-compact]) {\r\n  ::slotted([slot=\"logo\"]) {\r\n    --_dso-logo-block-size: #{units.$ru5} !important;\r\n  }\r\n\r\n  .dso-header {\r\n    flex-wrap: nowrap;\r\n  }\r\n\r\n  dso-dropdown-menu {\r\n    .dso-dropdown-options {\r\n      inline-size: 100%;\r\n    }\r\n  }\r\n}\r\n\r\n:host(:not([is-compact])) {\r\n  .dso-header {\r\n    align-items: center;\r\n  }\r\n\r\n  dso-dropdown-menu {\r\n    .dso-dropdown-options {\r\n      inline-size: 375px;\r\n    }\r\n  }\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  .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 + .logout,\r\n  .logout + .help,\r\n  .login + .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  .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  max-inline-size: 100%;\r\n  position: relative; // Needed for menu item calculations\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    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:not(:hover):not(:focus-visible) {\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  &.ready {\r\n    .menu-user-home {\r\n      margin-inline-start: auto;\r\n    }\r\n  }\r\n\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  .main-menu-item-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  .dropdown-menu-item .main-menu-item-icon {\r\n    margin-inline-end: 0;\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Host,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\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 {\r\n  HeaderAuthStatus,\r\n  HeaderCompactMode,\r\n  HeaderEvent,\r\n  HeaderMenuItem,\r\n  HeaderNavigationType,\r\n} from \"./header.interfaces\";\r\nimport { MenuItem } from \"./menu-item.functional-component\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\ninterface ClickHandlerOptions {\r\n  menuItem?: HeaderMenuItem;\r\n  url?: string;\r\n}\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 implements ComponentInterface {\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   * Set to \"always\" to force the header to be compact. Otherwise it will be compact when\r\n   * the viewport is smaller than 992px.\r\n   */\r\n  @Prop()\r\n  compact: HeaderCompactMode = \"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: HeaderAuthStatus = \"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 = false;\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  @State()\r\n  visibleMenuItemsCount: number | undefined = undefined;\r\n\r\n  @State()\r\n  dropdownOptionsOffset = 0;\r\n\r\n  @Watch(\"mainMenu\")\r\n  mainMenuChanged() {\r\n    this.resetVisibleMenuItems();\r\n  }\r\n\r\n  @Listen(\"resize\", { target: \"window\" })\r\n  resizeListener() {\r\n    this.onWindowResize();\r\n\r\n    forceUpdate(this.host);\r\n  }\r\n\r\n  private onWindowResize = () => this.resetVisibleMenuItems();\r\n\r\n  private resetVisibleMenuItems = () => {\r\n    this.visibleMenuItemsCount = undefined;\r\n  };\r\n\r\n  private get isCompact() {\r\n    return this.compact === \"always\" || window.innerWidth < minDesktopViewportWidth;\r\n  }\r\n\r\n  private clickHandler = (e: MouseEvent, type: HeaderNavigationType, options?: ClickHandlerOptions) => {\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: HTMLDsoDropdownMenuElement | undefined;\r\n  private navElement: HTMLUListElement | undefined;\r\n  private menuItemElementRefs: (HTMLLIElement | undefined)[] = [];\r\n  private dropdownMenuItemElementRef: HTMLLIElement | undefined;\r\n  private userHomeMenuItemElementRef: HTMLLIElement | undefined;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  /**\r\n   * Before determining the visible menu items, all the menu items are rendered (including the dropdown menu item and the user home menu item).\r\n   * Then the visible menu items are calculated in componentDidRender() and ONLY when the visibleMenuItemsCount is undefined.\r\n   *\r\n   * When the window resizes or this.mainMenu changes, a reset is triggered to recalculate the visible menu items.\r\n   *\r\n   * @param navElement The navigation element to calculate the overflow menu item count for.\r\n   * @returns The number of menu items that can fit in the available space.\r\n   */\r\n  private calculateOverflowMenuItemCount(navElement: HTMLUListElement): number {\r\n    const availableWidth = navElement.offsetWidth;\r\n\r\n    const lastMenuItem = this.menuItemElementRefs[this.menuItemElementRefs.length - 1];\r\n    const mostRightMenuItem = this.userHomeMenuItemElementRef ?? lastMenuItem;\r\n    const dropdownMenuItem = this.dropdownMenuItemElementRef;\r\n\r\n    if (!mostRightMenuItem || !dropdownMenuItem || !lastMenuItem) {\r\n      return this.menuItemElementRefs.length;\r\n    }\r\n\r\n    const dropdownMenuItemEffectiveWidth =\r\n      dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth - (lastMenuItem.offsetLeft + lastMenuItem.offsetWidth);\r\n\r\n    const requiredWidth = mostRightMenuItem.offsetLeft + mostRightMenuItem.offsetWidth - dropdownMenuItemEffectiveWidth;\r\n\r\n    if (requiredWidth <= availableWidth) {\r\n      return this.menuItemElementRefs.length;\r\n    }\r\n\r\n    const userHomeMenuItemEffectiveWidth = this.userHomeMenuItemElementRef\r\n      ? this.userHomeMenuItemElementRef.offsetLeft +\r\n        this.userHomeMenuItemElementRef.offsetWidth -\r\n        (dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth)\r\n      : 0;\r\n\r\n    const remainingWidth = availableWidth - dropdownMenuItemEffectiveWidth - userHomeMenuItemEffectiveWidth;\r\n\r\n    const visibleMenuItems = this.menuItemElementRefs.findIndex(\r\n      (menuItem) => menuItem && menuItem.offsetLeft + menuItem.offsetWidth > remainingWidth,\r\n    );\r\n\r\n    if (visibleMenuItems < 0) {\r\n      return this.menuItemElementRefs.length;\r\n    }\r\n\r\n    return visibleMenuItems;\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 get visibleMainMenuItems(): HeaderMenuItem[] {\r\n    return typeof this.visibleMenuItemsCount === \"number\"\r\n      ? this.mainMenu.slice(0, this.visibleMenuItemsCount)\r\n      : this.mainMenu;\r\n  }\r\n\r\n  private get hiddenMainMenuItems(): HeaderMenuItem[] {\r\n    return typeof this.visibleMenuItemsCount === \"number\" ? this.mainMenu.slice(this.visibleMenuItemsCount) : [];\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (!this.host.isConnected) {\r\n      return;\r\n    }\r\n\r\n    if (this.isCompact && this.dropdownElement) {\r\n      this.dropdownElement.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n    }\r\n\r\n    if (typeof this.visibleMenuItemsCount === \"undefined\" && this.navElement) {\r\n      this.visibleMenuItemsCount = this.calculateOverflowMenuItemCount(this.navElement);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host is-compact={this.isCompact}>\r\n        <div class=\"dso-header\">\r\n          <div class=\"logo-container\">\r\n            <slot name=\"logo\" />\r\n          </div>\r\n          {this.isCompact ? this.renderCompact() : this.renderNormal()}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private renderCompact() {\r\n    return (\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            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((menuItem) => (\r\n                  <MenuItem item={menuItem} onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })} />\r\n                ))}\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 href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\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 href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\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    );\r\n  }\r\n\r\n  private renderNormal() {\r\n    this.menuItemElementRefs = [];\r\n\r\n    return (\r\n      <Fragment>\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.length > 0 || this.userHomeUrl) && (\r\n          <nav class=\"dso-navbar\">\r\n            <ul\r\n              class={clsx(\"dso-nav\", \"dso-nav-main\", { ready: this.visibleMenuItemsCount !== undefined })}\r\n              ref={(element) => (this.navElement = element)}\r\n            >\r\n              {this.visibleMainMenuItems.map((menuItem, i) => (\r\n                <MenuItem\r\n                  item={menuItem}\r\n                  onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n                  key={menuItem.label}\r\n                  ref={(el) => (this.menuItemElementRefs[i] = el)}\r\n                />\r\n              ))}\r\n              {(this.visibleMenuItemsCount === undefined || this.hiddenMainMenuItems.length > 0) && (\r\n                <li\r\n                  aria-hidden={this.visibleMenuItemsCount === undefined}\r\n                  ref={(el) => (this.dropdownMenuItemElementRef = el)}\r\n                  class=\"dropdown-menu-item\"\r\n                >\r\n                  <dso-dropdown-menu>\r\n                    <button type=\"button\" slot=\"toggle\">\r\n                      <span>{this.text(\"overflowMenu\")}</span>\r\n                      <dso-icon icon=\"chevron-down\" class=\"main-menu-item-icon\"></dso-icon>\r\n                    </button>\r\n                    <div class=\"dso-dropdown-options\">\r\n                      <ul>\r\n                        {this.hiddenMainMenuItems.map((menuItem) => (\r\n                          <MenuItem item={menuItem} onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })} />\r\n                        ))}\r\n                      </ul>\r\n                    </div>\r\n                  </dso-dropdown-menu>\r\n                </li>\r\n              )}\r\n              {this.userHomeUrl && (\r\n                <li\r\n                  class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}\r\n                  ref={(el) => (this.userHomeMenuItemElementRef = el)}\r\n                >\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\" class=\"main-menu-item-icon\"></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      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"dso-header.entry.js","sources":["src/components/header/header.i18n.ts","src/components/header/menu-item.functional-component.tsx","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","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { HeaderMenuItem } from \"./header.interfaces\";\r\n\r\nexport interface MenuItemProps {\r\n  item: HeaderMenuItem;\r\n  onClick: (event: MouseEvent) => void;\r\n  key?: string;\r\n  ref?: (el: HTMLLIElement | undefined) => void;\r\n}\r\n\r\nexport const MenuItem: FunctionalComponent<MenuItemProps> = ({ item, onClick, key, ref }) => {\r\n  return (\r\n    <li class={clsx({ \"dso-active\": item.active })} key={key} ref={ref}>\r\n      <a href={item.url} aria-current={item.active ? \"page\" : undefined} onClick={onClick}>\r\n        {item.label}\r\n      </a>\r\n    </li>\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  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:host([is-compact]) {\r\n  ::slotted([slot=\"logo\"]) {\r\n    --_dso-logo-block-size: #{units.$ru5} !important;\r\n  }\r\n\r\n  .dso-header {\r\n    flex-wrap: nowrap;\r\n  }\r\n\r\n  dso-dropdown-menu {\r\n    .dso-dropdown-options {\r\n      inline-size: 100%;\r\n    }\r\n  }\r\n}\r\n\r\n:host(:not([is-compact])) {\r\n  .dso-header {\r\n    align-items: center;\r\n  }\r\n\r\n  dso-dropdown-menu {\r\n    .dso-dropdown-options {\r\n      inline-size: 375px;\r\n    }\r\n  }\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  .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 + .logout,\r\n  .logout + .help,\r\n  .login + .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  .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  max-inline-size: 100%;\r\n  position: relative; // Needed for menu item calculations\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    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:not(:hover):not(:focus-visible) {\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  &.ready {\r\n    .menu-user-home {\r\n      margin-inline-start: auto;\r\n    }\r\n  }\r\n\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  .main-menu-item-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  .dropdown-menu-item .main-menu-item-icon {\r\n    margin-inline-end: 0;\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\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 {\r\n  HeaderAuthStatus,\r\n  HeaderCompactMode,\r\n  HeaderEvent,\r\n  HeaderMenuItem,\r\n  HeaderNavigationType,\r\n} from \"./header.interfaces\";\r\nimport { MenuItem } from \"./menu-item.functional-component\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\ninterface ClickHandlerOptions {\r\n  menuItem?: HeaderMenuItem;\r\n  url?: string;\r\n}\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 implements ComponentInterface {\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   * Set to \"always\" to force the header to be compact. Otherwise it will be compact when\r\n   * the viewport is smaller than 992px.\r\n   */\r\n  @Prop()\r\n  compact: HeaderCompactMode = \"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: HeaderAuthStatus = \"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 = false;\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  @State()\r\n  visibleMenuItemsCount: number | undefined = undefined;\r\n\r\n  @State()\r\n  dropdownOptionsOffset = 0;\r\n\r\n  @Watch(\"mainMenu\")\r\n  mainMenuChanged() {\r\n    this.resetVisibleMenuItems();\r\n  }\r\n\r\n  private resetVisibleMenuItems = () => {\r\n    this.visibleMenuItemsCount = undefined;\r\n  };\r\n\r\n  private get isCompact() {\r\n    return this.compact === \"always\" || window.innerWidth < minDesktopViewportWidth;\r\n  }\r\n\r\n  private clickHandler = (e: MouseEvent, type: HeaderNavigationType, options?: ClickHandlerOptions) => {\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: HTMLDsoDropdownMenuElement | undefined;\r\n  private navElement: HTMLUListElement | undefined;\r\n  private menuItemElementRefs: (HTMLLIElement | undefined)[] = [];\r\n  private dropdownMenuItemElementRef: HTMLLIElement | undefined;\r\n  private userHomeMenuItemElementRef: HTMLLIElement | undefined;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  /**\r\n   * Before determining the visible menu items, all the menu items are rendered (including the dropdown menu item and the user home menu item).\r\n   * Then the visible menu items are calculated in componentDidRender() and ONLY when the visibleMenuItemsCount is undefined.\r\n   *\r\n   * When the window resizes or this.mainMenu changes, a reset is triggered to recalculate the visible menu items.\r\n   *\r\n   * @param navElement The navigation element to calculate the overflow menu item count for.\r\n   * @returns The number of menu items that can fit in the available space.\r\n   */\r\n  private calculateOverflowMenuItemCount(navElement: HTMLUListElement): number {\r\n    const availableWidth = navElement.offsetWidth;\r\n\r\n    const lastMenuItem = this.menuItemElementRefs[this.menuItemElementRefs.length - 1];\r\n    const mostRightMenuItem = this.userHomeMenuItemElementRef ?? lastMenuItem;\r\n    const dropdownMenuItem = this.dropdownMenuItemElementRef;\r\n\r\n    if (!mostRightMenuItem || !dropdownMenuItem || !lastMenuItem) {\r\n      return this.menuItemElementRefs.length;\r\n    }\r\n\r\n    const dropdownMenuItemEffectiveWidth =\r\n      dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth - (lastMenuItem.offsetLeft + lastMenuItem.offsetWidth);\r\n\r\n    const requiredWidth = mostRightMenuItem.offsetLeft + mostRightMenuItem.offsetWidth - dropdownMenuItemEffectiveWidth;\r\n\r\n    if (requiredWidth <= availableWidth) {\r\n      return this.menuItemElementRefs.length;\r\n    }\r\n\r\n    const userHomeMenuItemEffectiveWidth = this.userHomeMenuItemElementRef\r\n      ? this.userHomeMenuItemElementRef.offsetLeft +\r\n        this.userHomeMenuItemElementRef.offsetWidth -\r\n        (dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth)\r\n      : 0;\r\n\r\n    const remainingWidth = availableWidth - dropdownMenuItemEffectiveWidth - userHomeMenuItemEffectiveWidth;\r\n\r\n    const visibleMenuItems = this.menuItemElementRefs.findIndex(\r\n      (menuItem) => menuItem && menuItem.offsetLeft + menuItem.offsetWidth > remainingWidth,\r\n    );\r\n\r\n    if (visibleMenuItems < 0) {\r\n      return this.menuItemElementRefs.length;\r\n    }\r\n\r\n    return visibleMenuItems;\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 get visibleMainMenuItems(): HeaderMenuItem[] {\r\n    return typeof this.visibleMenuItemsCount === \"number\"\r\n      ? this.mainMenu.slice(0, this.visibleMenuItemsCount)\r\n      : this.mainMenu;\r\n  }\r\n\r\n  private get hiddenMainMenuItems(): HeaderMenuItem[] {\r\n    return typeof this.visibleMenuItemsCount === \"number\" ? this.mainMenu.slice(this.visibleMenuItemsCount) : [];\r\n  }\r\n\r\n  private resizeObserver = new ResizeObserver(() => {\r\n    this.resetVisibleMenuItems();\r\n\r\n    forceUpdate(this.host);\r\n  });\r\n\r\n  disconnectedCallback() {\r\n    this.resizeObserver.disconnect();\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.resizeObserver.observe(this.host);\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (!this.host.isConnected) {\r\n      return;\r\n    }\r\n\r\n    if (this.isCompact && this.dropdownElement) {\r\n      this.dropdownElement.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n    }\r\n\r\n    if (typeof this.visibleMenuItemsCount === \"undefined\" && this.navElement) {\r\n      this.visibleMenuItemsCount = this.calculateOverflowMenuItemCount(this.navElement);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host is-compact={this.isCompact}>\r\n        <div class=\"dso-header\">\r\n          <div class=\"logo-container\">\r\n            <slot name=\"logo\" />\r\n          </div>\r\n          {this.isCompact ? this.renderCompact() : this.renderNormal()}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private renderCompact() {\r\n    return (\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            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((menuItem) => (\r\n                  <MenuItem item={menuItem} onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })} />\r\n                ))}\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 href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\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 href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\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    );\r\n  }\r\n\r\n  private renderNormal() {\r\n    this.menuItemElementRefs = [];\r\n\r\n    return (\r\n      <Fragment>\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.length > 0 || this.userHomeUrl) && (\r\n          <nav class=\"dso-navbar\">\r\n            <ul\r\n              class={clsx(\"dso-nav\", \"dso-nav-main\", { ready: this.visibleMenuItemsCount !== undefined })}\r\n              ref={(element) => (this.navElement = element)}\r\n            >\r\n              {this.visibleMainMenuItems.map((menuItem, i) => (\r\n                <MenuItem\r\n                  item={menuItem}\r\n                  onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n                  key={menuItem.label}\r\n                  ref={(el) => (this.menuItemElementRefs[i] = el)}\r\n                />\r\n              ))}\r\n              {(this.visibleMenuItemsCount === undefined || this.hiddenMainMenuItems.length > 0) && (\r\n                <li\r\n                  aria-hidden={this.visibleMenuItemsCount === undefined}\r\n                  ref={(el) => (this.dropdownMenuItemElementRef = el)}\r\n                  class=\"dropdown-menu-item\"\r\n                >\r\n                  <dso-dropdown-menu>\r\n                    <button type=\"button\" slot=\"toggle\">\r\n                      <span>{this.text(\"overflowMenu\")}</span>\r\n                      <dso-icon icon=\"chevron-down\" class=\"main-menu-item-icon\"></dso-icon>\r\n                    </button>\r\n                    <div class=\"dso-dropdown-options\">\r\n                      <ul>\r\n                        {this.hiddenMainMenuItems.map((menuItem) => (\r\n                          <MenuItem item={menuItem} onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })} />\r\n                        ))}\r\n                      </ul>\r\n                    </div>\r\n                  </dso-dropdown-menu>\r\n                </li>\r\n              )}\r\n              {this.userHomeUrl && (\r\n                <li\r\n                  class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}\r\n                  ref={(el) => (this.userHomeMenuItemElementRef = el)}\r\n                >\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\" class=\"main-menu-item-icon\"></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      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}