@dso-toolkit/core 67.3.0 → 67.3.2

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-60b7c895.js';
-import { t as tabbable } from './index.esm-7a561c35.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-b281ec90.js';
+import { t as tabbable } from './index.esm-7e16e884.js';
 import { h as hasOverflow, c as createPopper } from './has-overflow-6d7f3a71.js';
 import { g as getActiveElement } from './get-active-element-37680994.js';
-import { v as v4 } from './v4-692dad5f.js';
+import { v as v4 } from './v4-c74494dc.js';
 
 const dropdownMenuCss = ":host(:focus){outline:none}:host{display:inline-block}";
 const DsoDropdownMenuStyle0 = dropdownMenuCss;
@@ -10,6 +10,27 @@ const DsoDropdownMenuStyle0 = dropdownMenuCss;
 const DropdownMenu = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Whether the menu is open or closed.
+         * This attribute is reflected and mutable.
+         */
+        this.open = false;
+        /**
+         * Alignment of the dropdown
+         */
+        this.dropdownAlign = "left";
+        /**
+         * Space between button and dropdown options
+         */
+        this.dropdownOptionsOffset = 2;
+        /**
+         * Whether the menu is checkable.
+         */
+        this.checkable = false;
+        /**
+         * Set position strategy of dropdown options
+         */
+        this.strategy = "auto";
         this.focusOutListener = (event) => {
             if (this.open &&
                 (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))) {
@@ -20,13 +41,6 @@ const DropdownMenu = class {
             this.button.focus();
             this.open = false;
         };
-        this.open = false;
-        this.dropdownAlign = "left";
-        this.dropdownOptionsOffset = 2;
-        this.checkable = false;
-        this.boundary = undefined;
-        this.placement = undefined;
-        this.strategy = "auto";
     }
     watchPosition() {
         if (!this.popper) {

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

@@ -1 +1 @@
-{"file":"dso-dropdown-menu.entry.js","mappings":"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","names":["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","import { createPopper, Placement, Instance as PopperInstance } from \"@popperjs/core\";\r\nimport { h, Component, Element, Host, Prop, Watch, Listen } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\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  /**\r\n   * Selector for the element the dropdown options should not be overflowing.\r\n   */\r\n  @Prop()\r\n  boundary?: string;\r\n\r\n  /**\r\n   * Force placement of dropdown.\r\n   *\r\n   * This property overrides `dropdownAlign`.\r\n   */\r\n  @Prop()\r\n  placement?: Placement;\r\n\r\n  /**\r\n   * Set position strategy of dropdown options\r\n   */\r\n  @Prop()\r\n  strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n  @Watch(\"placement\")\r\n  @Watch(\"dropdownAlign\")\r\n  watchPosition() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n    });\r\n  }\r\n\r\n  @Watch(\"dropdownOptionsOffset\")\r\n  watchOptionsOffset() {\r\n    this.popper?.setOptions({\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  @Watch(\"strategy\")\r\n  watchStrategy() {\r\n    this.setStrategy();\r\n  }\r\n\r\n  private setStrategy() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n      this.popper.setOptions({\r\n        strategy: this.strategy,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    let element: Element | null = this.host;\r\n\r\n    const boundary = this.boundary || document;\r\n\r\n    while (element && element.parentNode !== boundary) {\r\n      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n      if (element !== null && hasOverflow(element)) {\r\n        this.popper.setOptions({\r\n          strategy: \"fixed\",\r\n        });\r\n\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      strategy: \"absolute\",\r\n    });\r\n  }\r\n\r\n  @Element()\r\n  host!: HTMLDsoDropdownMenuElement;\r\n\r\n  private popper: PopperInstance | 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 options = this.host.querySelector(\".dso-dropdown-options\");\r\n    if (!options) {\r\n      throw new ReferenceError(\"Dropdown options not found\");\r\n    }\r\n\r\n    options.setAttribute(\"role\", \"menu\");\r\n    options.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    if (this.popper) {\r\n      return;\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    this.popper = createPopper(this.button, dropdownOptionsElement, {\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n        {\r\n          name: \"preventOverflow\",\r\n          options: {\r\n            boundary: this.boundary ? document.querySelector(this.boundary) : null,\r\n          },\r\n          enabled: this.boundary !== undefined,\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setStrategy();\r\n    if (this.open) {\r\n      this.popper?.update();\r\n    }\r\n\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\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.open = !this.open;\r\n    } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n      this.open = 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  disconnectedCallback() {\r\n    this.popper?.destroy();\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.open = false;\r\n    }\r\n  };\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  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.open = 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 hidden={!this.open}>\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-dropdown-menu.entry.js","mappings":"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","names":["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","import { createPopper, Placement, Instance as PopperInstance } from \"@popperjs/core\";\r\nimport { h, Component, Element, Host, Prop, Watch, Listen } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\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  /**\r\n   * Selector for the element the dropdown options should not be overflowing.\r\n   */\r\n  @Prop()\r\n  boundary?: string;\r\n\r\n  /**\r\n   * Force placement of dropdown.\r\n   *\r\n   * This property overrides `dropdownAlign`.\r\n   */\r\n  @Prop()\r\n  placement?: Placement;\r\n\r\n  /**\r\n   * Set position strategy of dropdown options\r\n   */\r\n  @Prop()\r\n  strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n  @Watch(\"placement\")\r\n  @Watch(\"dropdownAlign\")\r\n  watchPosition() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n    });\r\n  }\r\n\r\n  @Watch(\"dropdownOptionsOffset\")\r\n  watchOptionsOffset() {\r\n    this.popper?.setOptions({\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  @Watch(\"strategy\")\r\n  watchStrategy() {\r\n    this.setStrategy();\r\n  }\r\n\r\n  private setStrategy() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n      this.popper.setOptions({\r\n        strategy: this.strategy,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    let element: Element | null = this.host;\r\n\r\n    const boundary = this.boundary || document;\r\n\r\n    while (element && element.parentNode !== boundary) {\r\n      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n      if (element !== null && hasOverflow(element)) {\r\n        this.popper.setOptions({\r\n          strategy: \"fixed\",\r\n        });\r\n\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      strategy: \"absolute\",\r\n    });\r\n  }\r\n\r\n  @Element()\r\n  host!: HTMLDsoDropdownMenuElement;\r\n\r\n  private popper: PopperInstance | 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 options = this.host.querySelector(\".dso-dropdown-options\");\r\n    if (!options) {\r\n      throw new ReferenceError(\"Dropdown options not found\");\r\n    }\r\n\r\n    options.setAttribute(\"role\", \"menu\");\r\n    options.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    if (this.popper) {\r\n      return;\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    this.popper = createPopper(this.button, dropdownOptionsElement, {\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n        {\r\n          name: \"preventOverflow\",\r\n          options: {\r\n            boundary: this.boundary ? document.querySelector(this.boundary) : null,\r\n          },\r\n          enabled: this.boundary !== undefined,\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setStrategy();\r\n    if (this.open) {\r\n      this.popper?.update();\r\n    }\r\n\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\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.open = !this.open;\r\n    } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n      this.open = 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  disconnectedCallback() {\r\n    this.popper?.destroy();\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.open = false;\r\n    }\r\n  };\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  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.open = 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 hidden={!this.open}>\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-60b7c895.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-b281ec90.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 import { d as debounce } from './index-e112e225.js';
-import { i as i18n } from './i18n-43c79e8f.js';
+import { i as i18n } from './i18n-001de5be.js';
 import { i as isModifiedEvent } from './is-modified-event-70db5fa8.js';
 
 const translations = {
@@ -34,6 +34,24 @@ const Header = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.dsoHeaderClick = createEvent(this, "dsoHeaderClick", 7);
+        /**
+         * The main menu items.
+         */
+        this.mainMenu = [];
+        /**
+         * Either have the dropdown menu appear automatically or always.
+         */
+        this.useDropDownMenu = "auto";
+        /**
+         * Used to show the login/logout option. 'none' renders nothing.
+         */
+        this.authStatus = "none";
+        /**
+         * Show a help-button or link in the header
+         */
+        this.showHelp = false;
+        this.overflowMenuItems = 0;
+        this.dropdownOptionsOffset = 0;
         this.text = i18n(() => this.host, translations);
         this.onWindowResize = debounce(() => {
             var _a, _b;
@@ -48,20 +66,6 @@ const Header = class {
         this.MenuItem = (item) => {
             return (h("li", { class: item.active ? "dso-active" : undefined }, h("a", { href: item.url, "aria-current": item.active ? "page" : undefined, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem: item }) }, item.label)));
         };
-        this.mainMenu = [];
-        this.useDropDownMenu = "auto";
-        this.authStatus = "none";
-        this.loginUrl = undefined;
-        this.logoutUrl = undefined;
-        this.showHelp = false;
-        this.helpUrl = undefined;
-        this.userProfileName = undefined;
-        this.userProfileUrl = undefined;
-        this.userHomeUrl = undefined;
-        this.userHomeActive = undefined;
-        this.showDropDown = undefined;
-        this.overflowMenuItems = 0;
-        this.dropdownOptionsOffset = 0;
     }
     clickHandler(e, type, options) {
         var _a, _b;

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

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

package/dist/esm/dso-helpcenter-panel.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, F as Fragment } from './index-60b7c895.js';
-import { c as createFocusTrap } from './focus-trap.esm-26a44fc9.js';
-import './index.esm-7a561c35.js';
+import { r as registerInstance, h, F as Fragment } from './index-b281ec90.js';
+import { c as createFocusTrap } from './focus-trap.esm-b5ae7e82.js';
+import './index.esm-7e16e884.js';
 
 const helpcenterPanelCss = ":host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.wrapper {\n  block-size: 100%;\n  inset-inline-start: 0;\n  position: fixed;\n  inset-block-start: 0;\n  visibility: hidden;\n  inline-size: 100%;\n}\n.wrapper.visible {\n  visibility: visible;\n}\n\n.dimscreen {\n  background-color: #000;\n  block-size: 100%;\n  opacity: 0.4;\n  inline-size: 100%;\n}\n\n.open-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.open-button:focus, .open-button:focus-visible {\n  outline-offset: 2px;\n}\n.open-button:active {\n  outline: 0;\n}\n.open-button {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.open-button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.open-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.open-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.open-button[disabled], .open-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.open-button.dso-small {\n  line-height: 1rem;\n}\n.open-button.dso-small dso-icon,\n.open-button.dso-small svg.di, .open-button.dso-small.extern::after, .open-button.dso-small.download::after, .open-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.open-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.open-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.open-button dso-icon,\n.open-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.open-button span + dso-icon,\n.open-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.open-button.dso-spinner-left[disabled], .open-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.open-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.open-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.open-button {\n  border: 0;\n  inset-block-end: 16px;\n  font-family: Asap, sans-serif;\n  position: fixed;\n  inset-inline-end: 16px;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n.open-button:hover {\n  cursor: pointer;\n}\n.open-button.open {\n  display: none;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close-button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.close-button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close-button:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.close-button[disabled], .close-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.close-button.dso-small {\n  line-height: 1rem;\n}\n.close-button.dso-small dso-icon,\n.close-button.dso-small svg.di, .close-button.dso-small.extern::after, .close-button.dso-small.download::after, .close-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.close-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button dso-icon,\n.close-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.close-button span + dso-icon,\n.close-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.close-button.dso-spinner-left[disabled], .close-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button {\n  border-inline-end: 0;\n  border-block-start: 0;\n  border-radius: 0 0 0 8px;\n  block-size: 40px;\n  min-inline-size: 40px;\n  padding: 0;\n  position: fixed;\n  inset-inline-end: 0;\n  inline-size: 40px;\n  inset-block-start: 0;\n}\n.close-button dso-icon {\n  margin-inline-start: 0;\n  margin-inline-end: 0;\n  position: absolute;\n  inset-inline-start: 50%;\n  inset-block-start: 50%;\n  transform: translate(-50%, -50%);\n}\n.close-button:hover, .close-button:active, .close-button:focus {\n  cursor: pointer;\n}\n.close-button.close {\n  display: none;\n}\n\n.iframe-container {\n  background-color: #fff;\n  border: 0;\n  border-inline-start: 1px solid #ccc;\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\n  block-size: 100%;\n  position: absolute;\n  inset-block-start: 0;\n  transition: inset-inline-end 0.5s;\n}\n@media screen and (max-width: 480px) {\n  .iframe-container {\n    inset-inline-end: -320px;\n    inline-size: 320px;\n  }\n}\n@media screen and (min-width: 481px) and (max-width: 767px) {\n  .iframe-container {\n    inset-inline-end: -480px;\n    inline-size: 480px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .iframe-container {\n    inset-inline-end: -640px;\n    inline-size: 640px;\n  }\n}\n.iframe-container.open {\n  inset-inline-end: 0;\n}\n\niframe {\n  border: 0;\n  block-size: 100%;\n  inline-size: 100%;\n}";
 const DsoHelpcenterPanelStyle0 = helpcenterPanelCss;
@@ -10,6 +10,14 @@ const HelpcenterPanel = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.iframeLoaded = false;
+        /**
+         * The label on the help button that activates the Helpcenter.
+         */
+        this.label = "Hulp nodig";
+        this.visibility = "hidden";
+        this.isOpen = "close";
+        this.slideState = "close";
+        this.loadIframe = false;
         this.openClick = () => {
             this.visibility = "visible";
             this.slideState = "open";
@@ -29,12 +37,6 @@ const HelpcenterPanel = class {
                 this.visibility = "hidden";
             }, maxCssTransitionMilliseconds);
         };
-        this.label = "Hulp nodig";
-        this.url = undefined;
-        this.visibility = "hidden";
-        this.isOpen = "close";
-        this.slideState = "close";
-        this.loadIframe = false;
     }
     watchUrl(url) {
         if (this.isOpen === "open" && this.iframeUrl !== url) {

package/dist/esm/dso-helpcenter-panel.entry.js.map

@@ -1 +1 @@
-{"file":"dso-helpcenter-panel.entry.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,s8XAAs8X,CAAC;AACl+X,iCAAe,kBAAkB;;ACGjC,MAAM,4BAA4B,GAAG,GAAG,CAAC;MAO5B,eAAe;;;QAWlB,iBAAY,GAAG,KAAK,CAAC;QAsErB,cAAS,GAAG;YAClB,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;YAC5B,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC;YACzB,UAAU,CAAC;gBACT,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;aACtB,CAAC,CAAC;YACH,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;gBACpB,UAAU,CAAC;oBACT,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;iBACxB,EAAE,4BAA4B,CAAC,CAAC;aAClC;SACF,CAAC;QAEM,eAAU,GAAG;YACnB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;YACtB,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;YAC1B,UAAU,CAAC;gBACT,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;aAC5B,EAAE,4BAA4B,CAAC,CAAC;SAClC,CAAC;qBAnFM,YAAY;;0BASe,QAAQ;sBAGhB,OAAO;0BAGH,OAAO;0BAGzB,KAAK;;IAGlB,QAAQ,CAAC,GAAW;QAClB,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,IAAI,IAAI,CAAC,SAAS,KAAK,GAAG,EAAE;YACpD,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;SACtB;KACF;IAGD,WAAW,CAAC,MAAwB;QAClC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAE5C,IAAI,MAAM,KAAK,MAAM,EAAE;YACrB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;YAE9C,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,GAAG,EAAE;gBAC/B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC;aAC3B;SACF;aAAM;YACL,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;SACxC;KACF;IAGD,eAAe,CAAC,KAAoB;QAClC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,EAAE;YACpD,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;KACF;IAEO,UAAU;;QAChB,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAC7B,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,eAAe,CAAC,IAAI,CAAC,mBAAmB,EAAE;YACpD,iBAAiB,EAAE,IAAI;YACvB,eAAe,EAAE;gBACf,aAAa,EAAE,IAAI;aACpB;YACD,cAAc,EAAE,MAAA,IAAI,CAAC,iBAAiB,mCAAI,KAAK;YAC/C,YAAY,EAAE,MAAA,IAAI,CAAC,kBAAkB,mCAAI,KAAK;SAC/C,CAAC,CAAC,QAAQ,EAAE,CAAC;KACf;IAuBD,kBAAkB;;QAChB,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YAC7D,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;aAAM,IAAI,IAAI,CAAC,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE;YAC/C,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,EAAE,CAAC;YAExB,OAAO,IAAI,CAAC,IAAI,CAAC;SAClB;KACF;IAED,MAAM;QACJ,QACE,kBACE,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,KAAK,EAAE,eAAe,IAAI,CAAC,MAAM,EAAE,mBACpB,IAAI,CAAC,MAAM,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,mBAC1C,QAAQ,mBACR,mBAAmB,EACjC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,IAEpD,iEAAU,IAAI,EAAC,MAAM,GAAY,EACjC,+DAAO,IAAI,CAAC,KAAK,CAAQ,CAClB,EACT,4DACE,EAAE,EAAC,mBAAmB,EACtB,KAAK,EAAE,WAAW,IAAI,CAAC,UAAU,EAAE,gBACxB,aAAa,EACxB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,mBAAmB,GAAG,OAAO,CAAC,IAEtD,4DAAK,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,GAAI,EACnD,4DAAK,KAAK,EAAE,oBAAoB,IAAI,CAAC,UAAU,EAAE,eAAY,QAAQ,IAClE,IAAI,CAAC,UAAU,IACd,cACE,GAAG,EAAE,IAAI,CAAC,SAAS,EACnB,QAAQ,EAAC,GAAG,EACZ,MAAM,EAAE;gBACN,IAAI,CAAC,UAAU,EAAE,CAAC;gBAClB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;aAC1B,GACD,KAEF,cAAO,CACR,CACG,EACN,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,gBAAgB,IAAI,CAAC,MAAM,EAAE,EACpC,OAAO,EAAE,IAAI,CAAC,UAAU,mBACT,IAAI,CAAC,MAAM,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,mBAC1C,mBAAmB,EACjC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,kBAAkB,GAAG,OAAO,CAAC,IAErD,iEAAU,IAAI,EAAC,OAAO,GAAY,EAClC,6DAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACL,CACL,EACH;KACH;;;;;;;;;;","names":[],"sources":["src/components/helpcenter-panel/helpcenter-panel.scss?tag=dso-helpcenter-panel&encapsulation=shadow","src/components/helpcenter-panel/helpcenter-panel.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.wrapper {\r\n  block-size: 100%;\r\n  inset-inline-start: 0;\r\n  position: fixed;\r\n  inset-block-start: 0;\r\n  visibility: hidden;\r\n  inline-size: 100%;\r\n\r\n  &.visible {\r\n    visibility: visible;\r\n  }\r\n}\r\n\r\n.dimscreen {\r\n  background-color: colors.$zwart;\r\n  block-size: 100%;\r\n  opacity: 0.4;\r\n  inline-size: 100%;\r\n}\r\n\r\n.open-button {\r\n  @include button.primary($modifiers: false);\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    border: 0;\r\n    inset-block-end: units.$u2;\r\n    font-family: typography.$font-family-base;\r\n    position: fixed;\r\n    inset-inline-end: units.$u2;\r\n    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);\r\n  }\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &.open {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.close-button {\r\n  @include button.secondary($modifiers: false);\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    border-inline-end: 0;\r\n    border-block-start: 0;\r\n    border-radius: 0 0 0 units.$u1;\r\n    block-size: units.$u5;\r\n    min-inline-size: units.$u5;\r\n    padding: 0;\r\n    position: fixed;\r\n    inset-inline-end: 0;\r\n    inline-size: units.$u5;\r\n    inset-block-start: 0;\r\n  }\r\n\r\n  dso-icon {\r\n    margin-inline-start: 0;\r\n    margin-inline-end: 0;\r\n    position: absolute;\r\n    inset-inline-start: 50%;\r\n    inset-block-start: 50%;\r\n    transform: translate(-50%, -50%);\r\n  }\r\n\r\n  &:hover,\r\n  &:active,\r\n  &:focus {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &.close {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.iframe-container {\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  border-inline-start: 1px solid colors.$grijs-20;\r\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\r\n  block-size: 100%;\r\n  position: absolute;\r\n  inset-block-start: 0;\r\n  transition: inset-inline-end 0.5s;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inset-inline-end: -320px;\r\n    inline-size: 320px;\r\n  }\r\n\r\n  @media screen and (min-width: (media-query-breakpoints.$screen-xs-min + 1)) and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    inset-inline-end: -480px;\r\n    inline-size: 480px;\r\n  }\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    inset-inline-end: -640px;\r\n    inline-size: 640px;\r\n  }\r\n\r\n  &.open {\r\n    inset-inline-end: 0;\r\n  }\r\n}\r\n\r\niframe {\r\n  border: 0;\r\n  block-size: 100%;\r\n  inline-size: 100%;\r\n}\r\n","import { h, Component, Fragment, Prop, State, Watch, Listen } from \"@stencil/core\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\nconst maxCssTransitionMilliseconds = 500;\r\n\r\n@Component({\r\n  tag: \"dso-helpcenter-panel\",\r\n  styleUrl: \"helpcenter-panel.scss\",\r\n  shadow: true,\r\n})\r\nexport class HelpcenterPanel {\r\n  private iframeUrl?: string;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private panelWrapperElement?: HTMLDivElement;\r\n\r\n  private openButtonElement?: HTMLButtonElement;\r\n\r\n  private closeButtonElement?: HTMLButtonElement;\r\n\r\n  private iframeLoaded = false;\r\n\r\n  /**\r\n   * The label on the help button that activates the Helpcenter.\r\n   */\r\n  @Prop()\r\n  label = \"Hulp nodig\";\r\n\r\n  /**\r\n   * The URL that's loaded when the Helpcenter opens.\r\n   */\r\n  @Prop()\r\n  url!: string;\r\n\r\n  @State()\r\n  visibility: \"visible\" | \"hidden\" = \"hidden\";\r\n\r\n  @State()\r\n  isOpen: \"open\" | \"close\" = \"close\";\r\n\r\n  @State()\r\n  slideState: \"open\" | \"close\" = \"close\";\r\n\r\n  @State()\r\n  loadIframe = false;\r\n\r\n  @Watch(\"url\")\r\n  watchUrl(url: string) {\r\n    if (this.isOpen === \"open\" && this.iframeUrl !== url) {\r\n      this.iframeUrl = url;\r\n    }\r\n  }\r\n\r\n  @Watch(\"isOpen\")\r\n  watchIsOpen(isOpen: \"open\" | \"close\") {\r\n    const body = document.querySelector(\"body\");\r\n\r\n    if (isOpen === \"open\") {\r\n      body?.style.setProperty(\"overflow\", \"hidden\");\r\n\r\n      if (this.iframeUrl !== this.url) {\r\n        this.iframeUrl = this.url;\r\n      }\r\n    } else {\r\n      body?.style.removeProperty(\"overflow\");\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.key === \"Escape\" && this.isOpen === \"open\") {\r\n      this.closeClick();\r\n    }\r\n  }\r\n\r\n  private createTrap() {\r\n    if (!this.panelWrapperElement) {\r\n      return;\r\n    }\r\n\r\n    this.trap = createFocusTrap(this.panelWrapperElement, {\r\n      allowOutsideClick: true,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      setReturnFocus: this.openButtonElement ?? false,\r\n      initialFocus: this.closeButtonElement ?? false,\r\n    }).activate();\r\n  }\r\n\r\n  private openClick = () => {\r\n    this.visibility = \"visible\";\r\n    this.slideState = \"open\";\r\n    setTimeout(() => {\r\n      this.isOpen = \"open\";\r\n    });\r\n    if (!this.loadIframe) {\r\n      setTimeout(() => {\r\n        this.loadIframe = true;\r\n      }, maxCssTransitionMilliseconds);\r\n    }\r\n  };\r\n\r\n  private closeClick = () => {\r\n    this.isOpen = \"close\";\r\n    this.slideState = \"close\";\r\n    setTimeout(() => {\r\n      this.visibility = \"hidden\";\r\n    }, maxCssTransitionMilliseconds);\r\n  };\r\n\r\n  componentDidRender() {\r\n    if (this.isOpen === \"open\" && this.iframeLoaded && !this.trap) {\r\n      this.createTrap();\r\n    } else if (this.isOpen === \"close\" && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          type=\"button\"\r\n          onClick={this.openClick}\r\n          class={`open-button ${this.isOpen}`}\r\n          aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n          aria-haspopup=\"dialog\"\r\n          aria-controls=\"dso-panel-wrapper\"\r\n          ref={(element) => (this.openButtonElement = element)}\r\n        >\r\n          <dso-icon icon=\"help\"></dso-icon>\r\n          <span>{this.label}</span>\r\n        </button>\r\n        <div\r\n          id=\"dso-panel-wrapper\"\r\n          class={`wrapper ${this.visibility}`}\r\n          aria-label=\"helpcentrum\"\r\n          role=\"dialog\"\r\n          ref={(element) => (this.panelWrapperElement = element)}\r\n        >\r\n          <div class=\"dimscreen\" onClick={this.closeClick} />\r\n          <div class={`iframe-container ${this.slideState}`} aria-live=\"polite\">\r\n            {this.loadIframe ? (\r\n              <iframe\r\n                src={this.iframeUrl}\r\n                tabindex=\"0\"\r\n                onLoad={() => {\r\n                  this.createTrap();\r\n                  this.iframeLoaded = true;\r\n                }}\r\n              />\r\n            ) : (\r\n              <div />\r\n            )}\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            class={`close-button ${this.isOpen}`}\r\n            onClick={this.closeClick}\r\n            aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n            aria-controls=\"dso-panel-wrapper\"\r\n            ref={(element) => (this.closeButtonElement = element)}\r\n          >\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">sluiten</span>\r\n          </button>\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-helpcenter-panel.entry.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,s8XAAs8X,CAAC;AACl+X,iCAAe,kBAAkB;;ACGjC,MAAM,4BAA4B,GAAG,GAAG,CAAC;MAO5B,eAAe;IAL5B;;QAgBU,iBAAY,GAAG,KAAK,CAAC;;;;QAM7B,UAAK,GAAG,YAAY,CAAC;QASrB,eAAU,GAAyB,QAAQ,CAAC;QAG5C,WAAM,GAAqB,OAAO,CAAC;QAGnC,eAAU,GAAqB,OAAO,CAAC;QAGvC,eAAU,GAAG,KAAK,CAAC;QA8CX,cAAS,GAAG;YAClB,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;YAC5B,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC;YACzB,UAAU,CAAC;gBACT,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;aACtB,CAAC,CAAC;YACH,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;gBACpB,UAAU,CAAC;oBACT,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;iBACxB,EAAE,4BAA4B,CAAC,CAAC;aAClC;SACF,CAAC;QAEM,eAAU,GAAG;YACnB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;YACtB,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;YAC1B,UAAU,CAAC;gBACT,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;aAC5B,EAAE,4BAA4B,CAAC,CAAC;SAClC,CAAC;KAgEH;IA9HC,QAAQ,CAAC,GAAW;QAClB,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,IAAI,IAAI,CAAC,SAAS,KAAK,GAAG,EAAE;YACpD,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;SACtB;KACF;IAGD,WAAW,CAAC,MAAwB;QAClC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAE5C,IAAI,MAAM,KAAK,MAAM,EAAE;YACrB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;YAE9C,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,GAAG,EAAE;gBAC/B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC;aAC3B;SACF;aAAM;YACL,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;SACxC;KACF;IAGD,eAAe,CAAC,KAAoB;QAClC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,EAAE;YACpD,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;KACF;IAEO,UAAU;;QAChB,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAC7B,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,eAAe,CAAC,IAAI,CAAC,mBAAmB,EAAE;YACpD,iBAAiB,EAAE,IAAI;YACvB,eAAe,EAAE;gBACf,aAAa,EAAE,IAAI;aACpB;YACD,cAAc,EAAE,MAAA,IAAI,CAAC,iBAAiB,mCAAI,KAAK;YAC/C,YAAY,EAAE,MAAA,IAAI,CAAC,kBAAkB,mCAAI,KAAK;SAC/C,CAAC,CAAC,QAAQ,EAAE,CAAC;KACf;IAuBD,kBAAkB;;QAChB,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YAC7D,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;aAAM,IAAI,IAAI,CAAC,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE;YAC/C,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,EAAE,CAAC;YAExB,OAAO,IAAI,CAAC,IAAI,CAAC;SAClB;KACF;IAED,MAAM;QACJ,QACE,kBACE,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,KAAK,EAAE,eAAe,IAAI,CAAC,MAAM,EAAE,mBACpB,IAAI,CAAC,MAAM,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,mBAC1C,QAAQ,mBACR,mBAAmB,EACjC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,IAEpD,iEAAU,IAAI,EAAC,MAAM,GAAY,EACjC,+DAAO,IAAI,CAAC,KAAK,CAAQ,CAClB,EACT,4DACE,EAAE,EAAC,mBAAmB,EACtB,KAAK,EAAE,WAAW,IAAI,CAAC,UAAU,EAAE,gBACxB,aAAa,EACxB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,mBAAmB,GAAG,OAAO,CAAC,IAEtD,4DAAK,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,GAAI,EACnD,4DAAK,KAAK,EAAE,oBAAoB,IAAI,CAAC,UAAU,EAAE,eAAY,QAAQ,IAClE,IAAI,CAAC,UAAU,IACd,cACE,GAAG,EAAE,IAAI,CAAC,SAAS,EACnB,QAAQ,EAAC,GAAG,EACZ,MAAM,EAAE;gBACN,IAAI,CAAC,UAAU,EAAE,CAAC;gBAClB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;aAC1B,GACD,KAEF,cAAO,CACR,CACG,EACN,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,gBAAgB,IAAI,CAAC,MAAM,EAAE,EACpC,OAAO,EAAE,IAAI,CAAC,UAAU,mBACT,IAAI,CAAC,MAAM,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,mBAC1C,mBAAmB,EACjC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,kBAAkB,GAAG,OAAO,CAAC,IAErD,iEAAU,IAAI,EAAC,OAAO,GAAY,EAClC,6DAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACL,CACL,EACH;KACH;;;;;;;;;;","names":[],"sources":["src/components/helpcenter-panel/helpcenter-panel.scss?tag=dso-helpcenter-panel&encapsulation=shadow","src/components/helpcenter-panel/helpcenter-panel.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.wrapper {\r\n  block-size: 100%;\r\n  inset-inline-start: 0;\r\n  position: fixed;\r\n  inset-block-start: 0;\r\n  visibility: hidden;\r\n  inline-size: 100%;\r\n\r\n  &.visible {\r\n    visibility: visible;\r\n  }\r\n}\r\n\r\n.dimscreen {\r\n  background-color: colors.$zwart;\r\n  block-size: 100%;\r\n  opacity: 0.4;\r\n  inline-size: 100%;\r\n}\r\n\r\n.open-button {\r\n  @include button.primary($modifiers: false);\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    border: 0;\r\n    inset-block-end: units.$u2;\r\n    font-family: typography.$font-family-base;\r\n    position: fixed;\r\n    inset-inline-end: units.$u2;\r\n    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);\r\n  }\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &.open {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.close-button {\r\n  @include button.secondary($modifiers: false);\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    border-inline-end: 0;\r\n    border-block-start: 0;\r\n    border-radius: 0 0 0 units.$u1;\r\n    block-size: units.$u5;\r\n    min-inline-size: units.$u5;\r\n    padding: 0;\r\n    position: fixed;\r\n    inset-inline-end: 0;\r\n    inline-size: units.$u5;\r\n    inset-block-start: 0;\r\n  }\r\n\r\n  dso-icon {\r\n    margin-inline-start: 0;\r\n    margin-inline-end: 0;\r\n    position: absolute;\r\n    inset-inline-start: 50%;\r\n    inset-block-start: 50%;\r\n    transform: translate(-50%, -50%);\r\n  }\r\n\r\n  &:hover,\r\n  &:active,\r\n  &:focus {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &.close {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.iframe-container {\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  border-inline-start: 1px solid colors.$grijs-20;\r\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\r\n  block-size: 100%;\r\n  position: absolute;\r\n  inset-block-start: 0;\r\n  transition: inset-inline-end 0.5s;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inset-inline-end: -320px;\r\n    inline-size: 320px;\r\n  }\r\n\r\n  @media screen and (min-width: (media-query-breakpoints.$screen-xs-min + 1)) and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    inset-inline-end: -480px;\r\n    inline-size: 480px;\r\n  }\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    inset-inline-end: -640px;\r\n    inline-size: 640px;\r\n  }\r\n\r\n  &.open {\r\n    inset-inline-end: 0;\r\n  }\r\n}\r\n\r\niframe {\r\n  border: 0;\r\n  block-size: 100%;\r\n  inline-size: 100%;\r\n}\r\n","import { h, Component, Fragment, Prop, State, Watch, Listen } from \"@stencil/core\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\nconst maxCssTransitionMilliseconds = 500;\r\n\r\n@Component({\r\n  tag: \"dso-helpcenter-panel\",\r\n  styleUrl: \"helpcenter-panel.scss\",\r\n  shadow: true,\r\n})\r\nexport class HelpcenterPanel {\r\n  private iframeUrl?: string;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private panelWrapperElement?: HTMLDivElement;\r\n\r\n  private openButtonElement?: HTMLButtonElement;\r\n\r\n  private closeButtonElement?: HTMLButtonElement;\r\n\r\n  private iframeLoaded = false;\r\n\r\n  /**\r\n   * The label on the help button that activates the Helpcenter.\r\n   */\r\n  @Prop()\r\n  label = \"Hulp nodig\";\r\n\r\n  /**\r\n   * The URL that's loaded when the Helpcenter opens.\r\n   */\r\n  @Prop()\r\n  url!: string;\r\n\r\n  @State()\r\n  visibility: \"visible\" | \"hidden\" = \"hidden\";\r\n\r\n  @State()\r\n  isOpen: \"open\" | \"close\" = \"close\";\r\n\r\n  @State()\r\n  slideState: \"open\" | \"close\" = \"close\";\r\n\r\n  @State()\r\n  loadIframe = false;\r\n\r\n  @Watch(\"url\")\r\n  watchUrl(url: string) {\r\n    if (this.isOpen === \"open\" && this.iframeUrl !== url) {\r\n      this.iframeUrl = url;\r\n    }\r\n  }\r\n\r\n  @Watch(\"isOpen\")\r\n  watchIsOpen(isOpen: \"open\" | \"close\") {\r\n    const body = document.querySelector(\"body\");\r\n\r\n    if (isOpen === \"open\") {\r\n      body?.style.setProperty(\"overflow\", \"hidden\");\r\n\r\n      if (this.iframeUrl !== this.url) {\r\n        this.iframeUrl = this.url;\r\n      }\r\n    } else {\r\n      body?.style.removeProperty(\"overflow\");\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.key === \"Escape\" && this.isOpen === \"open\") {\r\n      this.closeClick();\r\n    }\r\n  }\r\n\r\n  private createTrap() {\r\n    if (!this.panelWrapperElement) {\r\n      return;\r\n    }\r\n\r\n    this.trap = createFocusTrap(this.panelWrapperElement, {\r\n      allowOutsideClick: true,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      setReturnFocus: this.openButtonElement ?? false,\r\n      initialFocus: this.closeButtonElement ?? false,\r\n    }).activate();\r\n  }\r\n\r\n  private openClick = () => {\r\n    this.visibility = \"visible\";\r\n    this.slideState = \"open\";\r\n    setTimeout(() => {\r\n      this.isOpen = \"open\";\r\n    });\r\n    if (!this.loadIframe) {\r\n      setTimeout(() => {\r\n        this.loadIframe = true;\r\n      }, maxCssTransitionMilliseconds);\r\n    }\r\n  };\r\n\r\n  private closeClick = () => {\r\n    this.isOpen = \"close\";\r\n    this.slideState = \"close\";\r\n    setTimeout(() => {\r\n      this.visibility = \"hidden\";\r\n    }, maxCssTransitionMilliseconds);\r\n  };\r\n\r\n  componentDidRender() {\r\n    if (this.isOpen === \"open\" && this.iframeLoaded && !this.trap) {\r\n      this.createTrap();\r\n    } else if (this.isOpen === \"close\" && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          type=\"button\"\r\n          onClick={this.openClick}\r\n          class={`open-button ${this.isOpen}`}\r\n          aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n          aria-haspopup=\"dialog\"\r\n          aria-controls=\"dso-panel-wrapper\"\r\n          ref={(element) => (this.openButtonElement = element)}\r\n        >\r\n          <dso-icon icon=\"help\"></dso-icon>\r\n          <span>{this.label}</span>\r\n        </button>\r\n        <div\r\n          id=\"dso-panel-wrapper\"\r\n          class={`wrapper ${this.visibility}`}\r\n          aria-label=\"helpcentrum\"\r\n          role=\"dialog\"\r\n          ref={(element) => (this.panelWrapperElement = element)}\r\n        >\r\n          <div class=\"dimscreen\" onClick={this.closeClick} />\r\n          <div class={`iframe-container ${this.slideState}`} aria-live=\"polite\">\r\n            {this.loadIframe ? (\r\n              <iframe\r\n                src={this.iframeUrl}\r\n                tabindex=\"0\"\r\n                onLoad={() => {\r\n                  this.createTrap();\r\n                  this.iframeLoaded = true;\r\n                }}\r\n              />\r\n            ) : (\r\n              <div />\r\n            )}\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            class={`close-button ${this.isOpen}`}\r\n            onClick={this.closeClick}\r\n            aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n            aria-controls=\"dso-panel-wrapper\"\r\n            ref={(element) => (this.closeButtonElement = element)}\r\n          >\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">sluiten</span>\r\n          </button>\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dso-highlight-box.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-60b7c895.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-b281ec90.js';
 
 const highlightBoxCss = "*,*::after,*::before{box-sizing:border-box}.dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;block-size:2rem;inset-inline-start:16px;line-height:2rem;position:absolute;text-align:center;inset-block-start:-1.5rem;inline-size:2rem}:host{margin-block-start:16px;padding:16px;margin-block-end:24px;block-size:var(--highlight-box-block-size, unset);min-block-size:var(--highlight-box-min-block-size, unset);display:block;container-type:inline-size;position:relative;z-index:1}:host[has-counter]{block-size:var(--highlight-box-counter-block-size, unset)}:host:not([has-counter]){block-size:var(--highlight-box-nocounter-block-size, unset)}";
 const DsoHighlightBoxStyle0 = highlightBoxCss;
@@ -6,11 +6,6 @@ const DsoHighlightBoxStyle0 = highlightBoxCss;
 const HighlightBox = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.yellow = undefined;
-        this.border = undefined;
-        this.white = undefined;
-        this.dropShadow = undefined;
-        this.step = undefined;
     }
     render() {
         var _a;

package/dist/esm/dso-highlight-box.entry.js.map

@@ -1 +1 @@
-{"file":"dso-highlight-box.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,muBAAmuB,CAAC;AAC5vB,8BAAe,eAAe;;MCMjB,YAAY;;;;;;;;;IAkCvB,MAAM;;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QAE5E,QACE,EAAC,IAAI,oEAAc,UAAU,IAC1B,UAAU,IAAI,4DAAK,KAAK,EAAC,kBAAkB,IAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,6DAAM,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC3F,8DAAa,CACR,EACP;KACH;;;;;;;","names":[],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n  @include highlight-box.root();\r\n\r\n  display: block;\r\n  container-type: inline-size;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n","import { Component, h, Prop, Element, Host } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-highlight-box\",\r\n  styleUrl: \"highlight-box.scss\",\r\n  shadow: true,\r\n})\r\nexport class HighlightBox {\r\n  /**\r\n   * For yellow Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  yellow?: boolean;\r\n\r\n  /**\r\n   * For a bordered Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  border?: boolean;\r\n\r\n  /**\r\n   * For a while Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  white?: boolean;\r\n\r\n  /**\r\n   * For an Highlight Box with a drop shadow.\r\n   */\r\n  @Prop({ reflect: true })\r\n  dropShadow?: boolean;\r\n\r\n  /**\r\n   * To create a step indicator.\r\n   */\r\n  @Prop({ reflect: true })\r\n  step?: number;\r\n\r\n  @Element()\r\n  private element!: HTMLDsoHighlightBoxElement;\r\n\r\n  render() {\r\n    const hasCounter = this.step || !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n    return (\r\n      <Host has-counter={hasCounter}>\r\n        {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-highlight-box.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,muBAAmuB,CAAC;AAC5vB,8BAAe,eAAe;;MCMjB,YAAY;;;;IAkCvB,MAAM;;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QAE5E,QACE,EAAC,IAAI,oEAAc,UAAU,IAC1B,UAAU,IAAI,4DAAK,KAAK,EAAC,kBAAkB,IAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,6DAAM,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC3F,8DAAa,CACR,EACP;KACH;;;;;;;","names":[],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n  @include highlight-box.root();\r\n\r\n  display: block;\r\n  container-type: inline-size;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n","import { Component, h, Prop, Element, Host } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-highlight-box\",\r\n  styleUrl: \"highlight-box.scss\",\r\n  shadow: true,\r\n})\r\nexport class HighlightBox {\r\n  /**\r\n   * For yellow Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  yellow?: boolean;\r\n\r\n  /**\r\n   * For a bordered Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  border?: boolean;\r\n\r\n  /**\r\n   * For a while Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  white?: boolean;\r\n\r\n  /**\r\n   * For an Highlight Box with a drop shadow.\r\n   */\r\n  @Prop({ reflect: true })\r\n  dropShadow?: boolean;\r\n\r\n  /**\r\n   * To create a step indicator.\r\n   */\r\n  @Prop({ reflect: true })\r\n  step?: number;\r\n\r\n  @Element()\r\n  private element!: HTMLDsoHighlightBoxElement;\r\n\r\n  render() {\r\n    const hasCounter = this.step || !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n    return (\r\n      <Host has-counter={hasCounter}>\r\n        {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-60b7c895.js';
+import { r as registerInstance, h } from './index-b281ec90.js';
 
 const air = `<svg id="air" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path fill="currentColor" d="M24,8h0a.6.6,0,0,1-.38.56l-.1,0h0A8.18,8.18,0,0,0,21,10c-.21.55.33,2.11.77,3a.61.61,0,0,1-.12.71.63.63,0,0,1-.39.17,4.8,4.8,0,0,0-4-2.15H17a4.58,4.58,0,0,0-.37-.69A3.07,3.07,0,0,0,19,8.62h0a2.24,2.24,0,0,0,.06-.52s0-.07,0-.1,0-.07,0-.1A2.24,2.24,0,0,0,19,7.38h0a3.07,3.07,0,0,0-6,0h0a2.24,2.24,0,0,0-.06.52s0,.07,0,.1,0,.06,0,.1a.77.77,0,0,0,0,.15,6.49,6.49,0,0,0-4.51.35l-.06,0A.61.61,0,0,1,8,8.09V8H8V7.91a.61.61,0,0,1,.37-.48l.11,0h0A13.68,13.68,0,0,0,11.08,6a9.37,9.37,0,0,0-.86-3,.62.62,0,0,1,.83-.81,9.12,9.12,0,0,0,2.8.89H14A6.79,6.79,0,0,0,15.42.42a.61.61,0,0,1,1.15,0,8.43,8.43,0,0,0,1.65,2.76h.13a7.76,7.76,0,0,0,2.58-.91.61.61,0,0,1,.84.81c-.44.89-1,2.45-.77,3a8.18,8.18,0,0,0,2.48,1.33h0l.1,0A.6.6,0,0,1,24,8ZM10.68,22.34a5.15,5.15,0,0,1-3.12,1,4.72,4.72,0,0,1-4.81-3.76l-.14-.45h-.5A2,2,0,0,1,0,17.24a2,2,0,0,1,2.11-1.92,2.17,2.17,0,0,1,1.32.43l.4.29.37-.32a5,5,0,0,1,2.18-1.09l.44-.24V14a4.17,4.17,0,0,1,4.35-4,4.24,4.24,0,0,1,4.3,3.43l.1.67.69-.25a3,3,0,0,1,1-.17A2.64,2.64,0,0,1,20,16.19a2.32,2.32,0,0,1,0,.46l-.08.38.38.18A2.93,2.93,0,0,1,22,19.83a3.12,3.12,0,0,1-3.24,3,3.52,3.52,0,0,1-1.71-.45L16.47,22l-.26.58a2.58,2.58,0,0,1-4.62,0l-.3-.68Z"/>
@@ -650,7 +650,6 @@ const icons = [
 const Icon = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.icon = undefined;
     }
     render() {
         if (this.icon) {