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

package/dist/collection/components/dropdown-menu/dropdown-menu.js

@@ -152,11 +152,7 @@ export class DropdownMenu {
             this.cleanUp = undefined;
         }
     }
-    connectedCallback() {
-        this.host.addEventListener("keydown", this.keyDownListener);
-    }
     disconnectedCallback() {
-        this.host.removeEventListener("keydown", this.keyDownListener);
         this.toggleOptions(false);
     }
     tabInPopup(tabbables, direction) {
@@ -172,7 +168,7 @@ export class DropdownMenu {
         (_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' }))));
     }
     static get is() { return "dso-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-menu/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
+{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/header/header.js

@@ -30,7 +30,6 @@ export class Header {
         this.userHomeActive = false;
         this.visibleMenuItemsCount = undefined;
         this.dropdownOptionsOffset = 0;
-        this.onWindowResize = () => this.resetVisibleMenuItems();
         this.resetVisibleMenuItems = () => {
             this.visibleMenuItemsCount = undefined;
         };
@@ -46,14 +45,14 @@ export class Header {
         };
         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;
     }
@@ -108,6 +107,12 @@ export class Header {
     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;
@@ -120,7 +125,7 @@ export class Header {
         }
     }
     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" })))))))))));
@@ -413,14 +418,5 @@ export class Header {
                 "methodName": "mainMenuChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "resize",
-                "method": "resizeListener",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }];
-    }
 }
 //# sourceMappingURL=header.js.map

package/dist/collection/components/header/header.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../../src/components/header/header.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,OAAO,EACP,KAAK,EAEL,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,EACL,WAAW,EACX,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAQ7C,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,MAAM,uBAAuB,GAAG,GAAG,CAAC;AAYpC,MAAM,OAAO,MAAM;IALnB;QASE;;WAEG;QAEH,aAAQ,GAAqB,EAAE,CAAC;QAEhC;;;WAGG;QAEH,YAAO,GAAsB,MAAM,CAAC;QAEpC;;WAEG;QAEH,eAAU,GAAqB,MAAM,CAAC;QAgBtC;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QA2BjB;;WAEG;QAEH,mBAAc,GAAG,KAAK,CAAC;QAWvB,0BAAqB,GAAuB,SAAS,CAAC;QAGtD,0BAAqB,GAAG,CAAC,CAAC;QAclB,mBAAc,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAEpD,0BAAqB,GAAG,GAAG,EAAE;YACnC,IAAI,CAAC,qBAAqB,GAAG,SAAS,CAAC;QACzC,CAAC,CAAC;QAMM,iBAAY,GAAG,CAAC,CAAa,EAAE,IAA0B,EAAE,OAA6B,EAAE,EAAE;;YAClG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;gBACvB,aAAa,EAAE,CAAC;gBAChB,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;gBACnC,IAAI;gBACJ,QAAQ,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ;gBAC3B,GAAG,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,mCAAI,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,0CAAE,GAAG;aAC5C,CAAC,CAAC;QACL,CAAC,CAAC;QAIM,wBAAmB,GAAkC,EAAE,CAAC;QAIxD,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;KA6TpD;IAlWC,eAAe;QACb,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAGD,cAAc;QACZ,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC;IAQD,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,MAAM,CAAC,UAAU,GAAG,uBAAuB,CAAC;IAClF,CAAC;IAoBD;;;;;;;;OAQG;IACK,8BAA8B,CAAC,UAA4B;;QACjE,MAAM,cAAc,GAAG,UAAU,CAAC,WAAW,CAAC;QAE9C,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACnF,MAAM,iBAAiB,GAAG,MAAA,IAAI,CAAC,0BAA0B,mCAAI,YAAY,CAAC;QAC1E,MAAM,gBAAgB,GAAG,IAAI,CAAC,0BAA0B,CAAC;QAEzD,IAAI,CAAC,iBAAiB,IAAI,CAAC,gBAAgB,IAAI,CAAC,YAAY,EAAE,CAAC;YAC7D,OAAO,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC;QACzC,CAAC;QAED,MAAM,8BAA8B,GAClC,gBAAgB,CAAC,UAAU,GAAG,gBAAgB,CAAC,WAAW,GAAG,CAAC,YAAY,CAAC,UAAU,GAAG,YAAY,CAAC,WAAW,CAAC,CAAC;QAEpH,MAAM,aAAa,GAAG,iBAAiB,CAAC,UAAU,GAAG,iBAAiB,CAAC,WAAW,GAAG,8BAA8B,CAAC;QAEpH,IAAI,aAAa,IAAI,cAAc,EAAE,CAAC;YACpC,OAAO,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC;QACzC,CAAC;QAED,MAAM,8BAA8B,GAAG,IAAI,CAAC,0BAA0B;YACpE,CAAC,CAAC,IAAI,CAAC,0BAA0B,CAAC,UAAU;gBAC1C,IAAI,CAAC,0BAA0B,CAAC,WAAW;gBAC3C,CAAC,gBAAgB,CAAC,UAAU,GAAG,gBAAgB,CAAC,WAAW,CAAC;YAC9D,CAAC,CAAC,CAAC,CAAC;QAEN,MAAM,cAAc,GAAG,cAAc,GAAG,8BAA8B,GAAG,8BAA8B,CAAC;QAExG,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,CAAC,SAAS,CACzD,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,UAAU,GAAG,QAAQ,CAAC,WAAW,GAAG,cAAc,CACtF,CAAC;QAEF,IAAI,gBAAgB,GAAG,CAAC,EAAE,CAAC;YACzB,OAAO,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC;QACzC,CAAC;QAED,OAAO,gBAAgB,CAAC;IAC1B,CAAC;IAEO,8BAA8B;;QACpC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1B,OAAO,CAAC,CAAC;QACX,CAAC;QAED,OAAO,CACL,IAAI,CAAC,IAAI,CAAC,YAAY;YACtB,CAAC,CAAA,MAAA,IAAI,CAAC,eAAe,0CAAE,qBAAqB,GAAG,MAAM,IAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC,CAC/F,CAAC;IACJ,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,OAAO,IAAI,CAAC,qBAAqB,KAAK,QAAQ;YACnD,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;YACpD,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;IACpB,CAAC;IAED,IAAY,mBAAmB;QAC7B,OAAO,OAAO,IAAI,CAAC,qBAAqB,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/G,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YAC3C,IAAI,CAAC,eAAe,CAAC,qBAAqB,GAAG,IAAI,CAAC,8BAA8B,EAAE,CAAC;QACrF,CAAC;QAED,IAAI,OAAO,IAAI,CAAC,qBAAqB,KAAK,WAAW,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACzE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,8BAA8B,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACpF,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,mEAAa,IAAI,CAAC,SAAS;YAC9B,4DAAK,KAAK,EAAC,YAAY;gBACrB,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB;gBACL,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CACxD,CACD,CACR,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,OAAO,CACL,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,CAAC,IAAI,CAC9E,WAAK,KAAK,EAAC,UAAU;YACnB,2CACiB,OAAO,EACtB,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EACjD,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;gBAElD,cAAQ,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;oBACjC,gBAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ;oBAChC,gBAAU,IAAI,EAAC,cAAc,GAAY,CAClC;gBACT,WAAK,KAAK,EAAC,sBAAsB;oBAC/B;wBACG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAC/B,EAAC,QAAQ,IAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAI,CAC7F,CAAC;wBACD,IAAI,CAAC,WAAW,IAAI,CACnB;4BACE,SACE,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,IAE1E,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CACpB,CACD,CACN;wBACA,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,IAAI,CAChF;4BACE,SACE,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC;gCAE5E,IAAI,CAAC,eAAe;gCACrB,YAAM,KAAK,EAAC,eAAe,sBAAuB,CAChD,CACD,CACN;wBACA,IAAI,CAAC,UAAU,KAAK,WAAW,IAAI,CAClC,cACG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,SAAG,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,IAC1F,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CACjB,CACL,CAAC,CAAC,CAAC,CACF,cAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,CAAC,IAChE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CACZ,CACV,CACE,CACN;wBACA,IAAI,CAAC,UAAU,KAAK,UAAU,IAAI,CACjC,cACG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,SAAG,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,IAC7F,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAClB,CACL,CAAC,CAAC,CAAC,CACF,cAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,QAAQ,CAAC,IACjE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CACb,CACV,CACE,CACN;wBACA,IAAI,CAAC,QAAQ,IAAI,CAChB,cACG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,SACE,IAAI,EAAE,IAAI,CAAC,OAAO,EAClB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;4BAEnE,gBAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ;4BAChC,gBAAU,IAAI,EAAC,MAAM,GAAY,CAC/B,CACL,CAAC,CAAC,CAAC,CACF,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC;4BACrF,gBAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ;4BAChC,gBAAU,IAAI,EAAC,MAAM,GAAY,CAC1B,CACV,CACE,CACN,CACE,CACD,CACY,CAChB,CACP,CACF,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC;QAE9B,OAAO,CACL,EAAC,QAAQ;YACP,WAAK,KAAK,EAAC,oBAAoB;gBAC5B,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,IAAI,CAChF,WAAK,KAAK,EAAC,SAAS;oBAClB,SACE,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,IAE5E,IAAI,CAAC,eAAe,CACnB,CACA,CACP;gBACA,IAAI,CAAC,UAAU,KAAK,WAAW,IAAI,CAClC,WAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,SACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,IAEpE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CACjB,CACL,CAAC,CAAC,CAAC,CACF,cAAQ,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,CAAC,IACrF,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CACZ,CACV,CACG,CACP;gBACA,IAAI,CAAC,UAAU,KAAK,UAAU,IAAI,CACjC,WAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,SACE,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,IAEtE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAClB,CACL,CAAC,CAAC,CAAC,CACF,cAAQ,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,QAAQ,CAAC,IACtF,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CACb,CACV,CACG,CACP;gBACA,IAAI,CAAC,QAAQ,IAAI,CAChB,WAAK,KAAK,EAAC,MAAM,IACd,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,SACE,IAAI,EAAE,IAAI,CAAC,OAAO,EAClB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;oBAEnE,gBAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ;oBAChC,gBAAU,IAAI,EAAC,MAAM,GAAY,CAC/B,CACL,CAAC,CAAC,CAAC,CACF,cAAQ,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC;oBACrF,gBAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ;oBAChC,gBAAU,IAAI,EAAC,MAAM,GAAY,CAC1B,CACV,CACG,CACP,CACG;YACL,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CACjD,WAAK,KAAK,EAAC,YAAY;gBACrB,UACE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,cAAc,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,qBAAqB,KAAK,SAAS,EAAE,CAAC,EAC3F,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;oBAE5C,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,CAC9C,EAAC,QAAQ,IACP,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,CAAC,EAC9D,GAAG,EAAE,QAAQ,CAAC,KAAK,EACnB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAC/C,CACH,CAAC;oBACD,CAAC,IAAI,CAAC,qBAAqB,KAAK,SAAS,IAAI,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CACpF,yBACe,IAAI,CAAC,qBAAqB,KAAK,SAAS,EACrD,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,0BAA0B,GAAG,EAAE,CAAC,EACnD,KAAK,EAAC,oBAAoB;wBAE1B;4BACE,cAAQ,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;gCACjC,gBAAO,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAQ;gCACxC,gBAAU,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,qBAAqB,GAAY,CAC9D;4BACT,WAAK,KAAK,EAAC,sBAAsB;gCAC/B,cACG,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAC1C,EAAC,QAAQ,IAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAI,CAC7F,CAAC,CACC,CACD,CACY,CACjB,CACN;oBACA,IAAI,CAAC,WAAW,IAAI,CACnB,UACE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAAE,YAAY,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,EACpE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,0BAA0B,GAAG,EAAE,CAAC;wBAEnD,SACE,IAAI,EAAE,IAAI,CAAC,WAAW,kBACR,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC;4BAE3E,gBAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,qBAAqB,GAAY;4BACjE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CACpB,CACD,CACN,CACE,CACD,CACP,CACQ,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../../src/components/header/header.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/components/dropdown-menu.js

@@ -158,11 +158,7 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
             this.cleanUp = undefined;
         }
     }
-    connectedCallback() {
-        this.host.addEventListener("keydown", this.keyDownListener);
-    }
     disconnectedCallback() {
-        this.host.removeEventListener("keydown", this.keyDownListener);
         this.toggleOptions(false);
     }
     tabInPopup(tabbables, direction) {
@@ -178,7 +174,7 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
         (_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 this; }
     static get style() { return dropdownMenuCss; }

package/dist/components/dropdown-menu.js.map

@@ -1 +1 @@
-{"file":"dropdown-menu.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,gLAAgL;;MCY3L,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAA,WAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;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,GAAGC,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;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","uuidv4"],"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"],"version":3}
+{"file":"dropdown-menu.js","mappings":"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","names":["__stencil_proxyCustomElement","uuidv4"],"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"],"version":3}

package/dist/components/dso-header.js

@@ -64,7 +64,6 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
         this.userHomeActive = false;
         this.visibleMenuItemsCount = undefined;
         this.dropdownOptionsOffset = 0;
-        this.onWindowResize = () => this.resetVisibleMenuItems();
         this.resetVisibleMenuItems = () => {
             this.visibleMenuItemsCount = undefined;
         };
@@ -80,14 +79,14 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
         };
         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;
     }
@@ -142,6 +141,12 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
     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;
@@ -154,7 +159,7 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
         }
     }
     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" })))))))))));
@@ -182,7 +187,7 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
         "userHomeActive": [4, "user-home-active"],
         "visibleMenuItemsCount": [32],
         "dropdownOptionsOffset": [32]
-    }, [[9, "resize", "resizeListener"]], {
+    }, undefined, {
         "mainMenu": ["mainMenuChanged"]
     }]);
 function defineCustomElement$1() {