@oiz/stzh-components 4.6.0 → 4.7.0

package/dist/esm/stzh-ghettobox_3.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-ghettobox.stzh-richtext.stzh-show.entry.js","mappings":"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","names":[],"sources":["src/components/CMS/stzh-ghettobox/stzh-ghettobox.scss?tag=stzh-ghettobox&encapsulation=scoped","src/components/CMS/stzh-ghettobox/stzh-ghettobox.tsx","src/components/stzh-richtext/stzh-richtext.scss?tag=stzh-richtext&encapsulation=scoped","src/components/stzh-richtext/stzh-richtext.tsx","src/components/stzh-show/stzh-show.scss?tag=stzh-show&encapsulation=shadow","src/components/stzh-show/stzh-show.tsx"],"sourcesContent":["/*\n * @prop --background-color: Background color of ghettobox\n */\n\n:host {\n  @include base-invert;\n  @include button-invert;\n\n  --background-color: #{$colorError60};\n  --color: #{$baseInvertColor};\n  --richtext-color: var(--color);\n}\n\n.stzh-ghettobox {\n  position: relative;\n  color: var(--color);\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n\n  --stzh-button-secondary-color: #{$colorError60};\n  --stzh-button-secondary-background-color: #{$colorWhite90op};\n\n  --stzh-button-secondary-hover-color: #{$colorError60};\n  --stzh-button-secondary-hover-background-color: #{$colorWhite};\n\n  --stzh-button-secondary-disabled-color: #{$colorWhite60op};\n  --stzh-button-secondary-disabled-background-color: #{$colorWhite40op};\n\n  &__container {\n    @include container;\n    @include spaceCurve(\"padding-top\", \"large\");\n    @include spaceCurve(\"padding-bottom\", \"large\");\n  }\n\n  &__hidden-title {\n    @include visuallyhidden;\n  }\n\n  &__message {\n    @include spaceCurve(\"gap\", \"regular\");\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__main-title {\n    @include font(\"title\");\n    @include fontCurve(\"h2\", \"heading\");\n    margin: 0;\n    color: inherit;\n\n    &:not(:empty) {\n      @include spaceCurve(\"margin-bottom\", \"regular\");\n    }\n  }\n\n  &__description {\n    @include fontCurve(\"p1\");\n    --stzh-base-color: var(--richtext-color);\n\n    &:not(:empty) {\n      @include spaceCurve(\"margin-bottom\", \"small\");\n    }\n  }\n\n  &__button {\n    display: grid;\n\n    @include mq($from: small) {\n      justify-content: start;\n    }\n  }\n\n  &__close {\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    @include mq($from: small) {\n      top: 10px;\n      right: 10px;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\";\n\nimport { StzhGhettoboxCloseEvent, StzhGhettoboxOpenEvent } from \"../../../index\";\n\nimport { setPropsIfNull } from \"../../../utils/utils\";\nimport { StzhGhettoboxLocalizedText } from \"./stzh-ghettobox.localization\";\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot button - Slot for button element\n */\n@Component({\n  tag: \"stzh-ghettobox\",\n  styleUrl: \"stzh-ghettobox.scss\",\n  scoped: true,\n})\nexport class StzhGhettobox {\n  /** Overwrite hidden h1 title */\n  @Prop() hiddenTitle: string = \"\";\n\n  /** Main title */\n  @Prop() mainTitle: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings */\n  @Prop() localization: StzhGhettoboxLocalizedText;\n\n  /** Ghettobox open event */\n  @Event() stzhOpen: EventEmitter<StzhGhettoboxOpenEvent>;\n\n  /** Ghettobox close event */\n  @Event() stzhClose: EventEmitter<StzhGhettoboxCloseEvent>;\n\n  @Element() element: HTMLStzhGhettoboxElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-ghettobox\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-ghettobox\",\n    });\n  }\n\n  private observer: MutationObserver;\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  };\n\n  private init = () => {\n    const button = this.element.querySelector('stzh-button[slot=\"button\"]');\n\n    if (button) {\n      setPropsIfNull(button, {\n        size: \"small\",\n        sizeMedium: \"default\",\n        variant: \"secondary\",\n        effect: \"cta\",\n        icon: \"arrow-right\",\n        iconPosition: \"right\",\n      } as HTMLStzhButtonElement);\n    }\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"ghettobox\");\n    }\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-ghettobox\": true,\n      \"stzh-ghettobox--has-close-button\": !this.hideClose,\n    };\n\n    // TODO: Temporary workaround/bugfix for readspeaker class \"rs_skip\" can be removed once Readspeaker update with bugfix has arrived (ETA end of 2024).\n    return (\n      <Host hidden={!this.open}>\n        <div class={{ ...classes, rs_skip: !this.open }} aria-hidden={this.open ? \"false\" : \"true\"}>\n          <div class=\"stzh-ghettobox__container\">\n            <h1 class=\"stzh-ghettobox__hidden-title\">{this.hiddenTitle || this.localization.hiddenTitle}</h1>\n            <div class=\"stzh-ghettobox__message\">\n              <div class=\"stzh-ghettobox__text\">\n                <h2 class=\"stzh-ghettobox__main-title\">{this.mainTitle}</h2>\n                <div class=\"stzh-ghettobox__description\">{this.description ? this.description : <slot></slot>}</div>\n              </div>\n              <div class=\"stzh-ghettobox__button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n            {!this.hideClose && (\n              <stzh-button\n                class=\"stzh-ghettobox__close\"\n                onClick={this.onCloseButtonClick}\n                a11yLabel={this.localization.close}\n                variant=\"tertiary\"\n                size=\"small\"\n                iconOnly={true}\n                icon=\"close-big\"\n              ></stzh-button>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  @include richtext-host;\n\n  --display: var(--stzh-richtext-display, block);\n\n  --grid-template-areas: var(\n    --stzh-richtext-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-richtext-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-richtext-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*) {\n    @include richtext-slotted;\n  }\n\n  &[has-hidden-first-margin] ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  &[has-hidden-last-margin] ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n}\n\n.stzh-richtext {\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__text {\n    grid-area: text;\n    display: grid;\n  }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nconst CLASS_EXTERNAL_LINK = \"stzh-richtext__external-link\";\nconst CLASS_EXTERNAL_ICON_WRAPPER = \"stzh-richtext__external-icon-wrapper\";\nconst CLASS_EXTERNAL_ICON = \"stzh-richtext__external-icon\";\nconst CLASS_EXTERNAL_VHIDDEN = \"stzh-richtext__external-vhidden\";\n\n/**\n * @slot - Text content that should be styled\n */\n@Component({\n  tag: \"stzh-richtext\",\n  styleUrl: \"stzh-richtext.scss\",\n  scoped: true,\n})\nexport class StzhRichtext {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether first top margin of first child should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n  /** Whether last bottom margin of last child should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean;\n\n  /** Selector to recognize external link and attach an icon */\n  @Prop() externalLinkSelector: string = 'a[rel*=\"external\"], a.external, a.extern';\n\n  /** Icon used for marking external links */\n  @Prop() externalLinkIcon: string = \"external-link\";\n\n  @Element() element: HTMLStzhRichtextElement;\n\n  private externalLinks: HTMLElement[];\n\n  private addExternalLinkIcons() {\n    this.externalLinks.forEach(externalLink => {\n      externalLink.classList.add(CLASS_EXTERNAL_LINK);\n\n      // Check if screenreaderText already exists\n      if (!externalLink.querySelector(`.${CLASS_EXTERNAL_VHIDDEN}`)) {\n        const screenreaderText = document.createElement(\"span\");\n        screenreaderText.classList.add(CLASS_EXTERNAL_VHIDDEN);\n        screenreaderText.innerText = this.localization.$globals.externalLinkLabel;\n        externalLink.prepend(screenreaderText);\n      }\n\n      // Check if iconWrapper already exists\n      if (!externalLink.querySelector(`.${CLASS_EXTERNAL_ICON_WRAPPER}`)) {\n        const iconWrapper = document.createElement(\"span\");\n        iconWrapper.classList.add(CLASS_EXTERNAL_ICON_WRAPPER);\n\n        const icon = document.createElement(\"stzh-icon\");\n        icon.classList.add(CLASS_EXTERNAL_ICON);\n        icon.name = this.externalLinkIcon;\n        iconWrapper.appendChild(icon);\n\n        externalLink.appendChild(iconWrapper);\n      }\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"richtext\");\n    }\n  }\n\n  componentDidRender() {\n    this.externalLinks = Array.from(this.element.querySelectorAll(this.externalLinkSelector));\n    if (this.externalLinks && this.externalLinks.length > 0) {\n      this.addExternalLinkIcons();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-richtext\": true,\n    };\n\n    return (\n      <Host\n        has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n        has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n      >\n        <div class={classes}>\n          <div class=\"stzh-richtext__text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --show-display: Display value that is used when content is shown (default `block`)\n * @prop --hide-display: Display value that is used when content is hidden (default `none`)\n * @prop --current-display: Current display value (readonly)\n */\n\n:host {\n  --show-display: contents;\n  --hide-display: none;\n  --current-display: var(--hide-display);\n\n  display: var(--current-display);\n}\n\n/* Mikro */\n\n:host([mikro]) {\n  --current-display: var(--show-display);\n}\n\n:host([mikro=\"false\"]) {\n  --current-display: var(--hide-display);\n}\n\n/* Small */\n\n:host([small]) {\n  @include mq($from: small) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([small=\"false\"]) {\n  @include mq($from: small) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Medium */\n\n:host([medium]) {\n  @include mq($from: medium) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([medium=\"false\"]) {\n  @include mq($from: medium) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Large */\n\n:host([large]) {\n  @include mq($from: large) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([large=\"false\"]) {\n  @include mq($from: large) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Ultra */\n\n:host([ultra]) {\n  @include mq($from: ultra) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([ultra=\"false\"]) {\n  @include mq($from: ultra) {\n    --current-display: var(--hide-display);\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhBannerCloseEvent, StzhGhettoboxCloseEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSE = \"stzh-components-show-close\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-show\",\n  styleUrl: \"stzh-show.scss\",\n  shadow: true,\n})\nexport class StzhShow {\n  /** Mikro */\n  @Prop({ reflect: true }) mikro: boolean;\n\n  /** Small */\n  @Prop({ reflect: true }) small: boolean;\n\n  /** Medium */\n  @Prop({ reflect: true }) medium: boolean;\n\n  /** Large */\n  @Prop({ reflect: true }) large: boolean;\n\n  /** Ultra */\n  @Prop({ reflect: true }) ultra: boolean;\n\n  /** Show from date */\n  @Prop() showFromDate: Date | string;\n  private _showFromDate: Date;\n\n  /** Hide from date */\n  @Prop() hideFromDate: Date | string;\n  private _hideFromDate: Date;\n\n  /**\n   * Close cookie name key.\n   * Component will check for the cookie (stzh-components-show-close-{name})\n   * and if not empty (component inside already closed before) will hide show.\n   * Will also compare with showFromDate if given, to make sure cookie was set after showFromDate (otherwise will show again).\n   */\n  @Prop() closeKey: string = \"\";\n\n  @Listen(\"stzhClose\")\n  closeWatcher(event: CustomEvent<StzhBannerCloseEvent | StzhMessageCloseEvent | StzhGhettoboxCloseEvent>) {\n    if ([\"stzh-banner\", \"stzh-message\", \"stzh-ghettobox\"].includes(event.detail.component)) {\n      if (this.closeKey) {\n        Cookie.set(`${KEY_PREFIX_CLOSE}-${this.closeKey}`, Date.now().toString());\n      }\n    }\n  }\n\n  @Watch(\"showFromDate\")\n  showFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._showFromDate = newValue ? new Date(newValue) : null;\n    } else {\n      this._showFromDate = newValue;\n    }\n\n    let closedByCookie = false;\n\n    if (this.closeKey) {\n      const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE}-${this.closeKey}`);\n\n      if (timeClosed && (!this._showFromDate || Number(timeClosed) >= this._showFromDate.getTime())) {\n        closedByCookie = true;\n      }\n    }\n\n    this.closedByCookie = closedByCookie;\n  }\n\n  @Watch(\"hideFromDate\")\n  hideFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._hideFromDate = newValue ? new Date(newValue) : null;\n    } else {\n      this._hideFromDate = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShowElement;\n\n  private closedByCookie: boolean = false;\n\n  componentWillLoad() {\n    this.showFromDateWatcher(this.showFromDate);\n    this.hideFromDateWatcher(this.hideFromDate);\n  }\n\n  render() {\n    const timeNow = Date.now();\n\n    return (\n      <Host\n        hidden={\n          (this._showFromDate && timeNow <= this._showFromDate.getTime()) ||\n          (this._hideFromDate && timeNow >= this._hideFromDate.getTime()) ||\n          this.closedByCookie\n        }\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-ghettobox.stzh-richtext.stzh-show.entry.js","mappings":"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","names":[],"sources":["src/components/CMS/stzh-ghettobox/stzh-ghettobox.scss?tag=stzh-ghettobox&encapsulation=scoped","src/components/CMS/stzh-ghettobox/stzh-ghettobox.tsx","src/components/stzh-richtext/stzh-richtext.scss?tag=stzh-richtext&encapsulation=scoped","src/components/stzh-richtext/stzh-richtext.tsx","src/components/stzh-show/stzh-show.scss?tag=stzh-show&encapsulation=shadow","src/components/stzh-show/stzh-show.tsx"],"sourcesContent":["/*\n * @prop --background-color: Background color of ghettobox\n */\n\n:host {\n  @include base-invert;\n  @include button-invert;\n\n  --background-color: #{$colorCoral60};\n  --color: #{$baseInvertColor};\n  --richtext-color: var(--color);\n}\n\n.stzh-ghettobox {\n  position: relative;\n  color: var(--color);\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n\n  --stzh-button-secondary-color: #{$colorCoral60};\n  --stzh-button-secondary-background-color: #{$colorWhite90op};\n\n  --stzh-button-secondary-hover-color: #{$colorCoral60};\n  --stzh-button-secondary-hover-background-color: #{$colorWhite};\n\n  --stzh-button-secondary-disabled-color: #{$colorWhite60op};\n  --stzh-button-secondary-disabled-background-color: #{$colorWhite40op};\n\n  &__container {\n    @include container;\n    @include spaceCurve(\"padding-top\", \"large\");\n    @include spaceCurve(\"padding-bottom\", \"large\");\n  }\n\n  &__hidden-title {\n    @include visuallyhidden;\n  }\n\n  &__message {\n    @include spaceCurve(\"gap\", \"regular\");\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__main-title {\n    @include font(\"title\");\n    @include fontCurve(\"h2\", \"heading\");\n    margin: 0;\n    color: inherit;\n\n    &:not(:empty) {\n      @include spaceCurve(\"margin-bottom\", \"regular\");\n    }\n  }\n\n  &__description {\n    @include fontCurve(\"p1\");\n    --stzh-base-color: var(--richtext-color);\n\n    &:not(:empty) {\n      @include spaceCurve(\"margin-bottom\", \"small\");\n    }\n  }\n\n  &__button {\n    display: grid;\n\n    @include mq($from: small) {\n      justify-content: start;\n    }\n  }\n\n  &__close {\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    @include mq($from: small) {\n      top: 10px;\n      right: 10px;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\";\n\nimport { StzhGhettoboxCloseEvent, StzhGhettoboxOpenEvent } from \"../../../index\";\n\nimport { setPropsIfNull } from \"../../../utils/utils\";\nimport { StzhGhettoboxLocalizedText } from \"./stzh-ghettobox.localization\";\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot button - Slot for button element\n */\n@Component({\n  tag: \"stzh-ghettobox\",\n  styleUrl: \"stzh-ghettobox.scss\",\n  scoped: true,\n})\nexport class StzhGhettobox {\n  /** Overwrite hidden h1 title */\n  @Prop() hiddenTitle: string = \"\";\n\n  /** Main title */\n  @Prop() mainTitle: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings */\n  @Prop() localization: StzhGhettoboxLocalizedText;\n\n  /** Ghettobox open event */\n  @Event() stzhOpen: EventEmitter<StzhGhettoboxOpenEvent>;\n\n  /** Ghettobox close event */\n  @Event() stzhClose: EventEmitter<StzhGhettoboxCloseEvent>;\n\n  @Element() element: HTMLStzhGhettoboxElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-ghettobox\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-ghettobox\",\n    });\n  }\n\n  private observer: MutationObserver;\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  };\n\n  private init = () => {\n    const button = this.element.querySelector('stzh-button[slot=\"button\"]');\n\n    if (button) {\n      setPropsIfNull(button, {\n        size: \"small\",\n        sizeMedium: \"default\",\n        variant: \"secondary\",\n        effect: \"cta\",\n        icon: \"arrow-right\",\n        iconPosition: \"right\",\n      } as HTMLStzhButtonElement);\n    }\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"ghettobox\");\n    }\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-ghettobox\": true,\n      \"stzh-ghettobox--has-close-button\": !this.hideClose,\n    };\n\n    // TODO: Temporary workaround/bugfix for readspeaker class \"rs_skip\" can be removed once Readspeaker update with bugfix has arrived (ETA end of 2024).\n    return (\n      <Host hidden={!this.open}>\n        <div class={{ ...classes, rs_skip: !this.open }} aria-hidden={this.open ? \"false\" : \"true\"}>\n          <div class=\"stzh-ghettobox__container\">\n            <h1 class=\"stzh-ghettobox__hidden-title\">{this.hiddenTitle || this.localization.hiddenTitle}</h1>\n            <div class=\"stzh-ghettobox__message\">\n              <div class=\"stzh-ghettobox__text\">\n                <h2 class=\"stzh-ghettobox__main-title\">{this.mainTitle}</h2>\n                <div class=\"stzh-ghettobox__description\">{this.description ? this.description : <slot></slot>}</div>\n              </div>\n              <div class=\"stzh-ghettobox__button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n            {!this.hideClose && (\n              <stzh-button\n                class=\"stzh-ghettobox__close\"\n                onClick={this.onCloseButtonClick}\n                a11yLabel={this.localization.close}\n                variant=\"tertiary\"\n                size=\"small\"\n                iconOnly={true}\n                icon=\"close-big\"\n              ></stzh-button>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  @include richtext-host;\n\n  --display: var(--stzh-richtext-display, block);\n\n  --grid-template-areas: var(\n    --stzh-richtext-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-richtext-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-richtext-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*) {\n    @include richtext-slotted;\n  }\n\n  &[has-hidden-first-margin] ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  &[has-hidden-last-margin] ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n}\n\n.stzh-richtext {\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__text {\n    grid-area: text;\n    display: grid;\n  }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nconst CLASS_EXTERNAL_LINK = \"stzh-richtext__external-link\";\nconst CLASS_EXTERNAL_ICON_WRAPPER = \"stzh-richtext__external-icon-wrapper\";\nconst CLASS_EXTERNAL_ICON = \"stzh-richtext__external-icon\";\nconst CLASS_EXTERNAL_VHIDDEN = \"stzh-richtext__external-vhidden\";\n\n/**\n * @slot - Text content that should be styled\n */\n@Component({\n  tag: \"stzh-richtext\",\n  styleUrl: \"stzh-richtext.scss\",\n  scoped: true,\n})\nexport class StzhRichtext {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether first top margin of first child should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n  /** Whether last bottom margin of last child should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean;\n\n  /** Selector to recognize external link and attach an icon */\n  @Prop() externalLinkSelector: string = 'a[rel*=\"external\"], a.external, a.extern';\n\n  /** Icon used for marking external links */\n  @Prop() externalLinkIcon: string = \"external-link\";\n\n  @Element() element: HTMLStzhRichtextElement;\n\n  private externalLinks: HTMLElement[];\n\n  private addExternalLinkIcons() {\n    this.externalLinks.forEach(externalLink => {\n      externalLink.classList.add(CLASS_EXTERNAL_LINK);\n\n      // Check if screenreaderText already exists\n      if (!externalLink.querySelector(`.${CLASS_EXTERNAL_VHIDDEN}`)) {\n        const screenreaderText = document.createElement(\"span\");\n        screenreaderText.classList.add(CLASS_EXTERNAL_VHIDDEN);\n        screenreaderText.innerText = this.localization.$globals.externalLinkLabel;\n        externalLink.prepend(screenreaderText);\n      }\n\n      // Check if iconWrapper already exists\n      if (!externalLink.querySelector(`.${CLASS_EXTERNAL_ICON_WRAPPER}`)) {\n        const iconWrapper = document.createElement(\"span\");\n        iconWrapper.classList.add(CLASS_EXTERNAL_ICON_WRAPPER);\n\n        const icon = document.createElement(\"stzh-icon\");\n        icon.classList.add(CLASS_EXTERNAL_ICON);\n        icon.name = this.externalLinkIcon;\n        iconWrapper.appendChild(icon);\n\n        externalLink.appendChild(iconWrapper);\n      }\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"richtext\");\n    }\n  }\n\n  componentDidRender() {\n    this.externalLinks = Array.from(this.element.querySelectorAll(this.externalLinkSelector));\n    if (this.externalLinks && this.externalLinks.length > 0) {\n      this.addExternalLinkIcons();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-richtext\": true,\n    };\n\n    return (\n      <Host\n        has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n        has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n      >\n        <div class={classes}>\n          <div class=\"stzh-richtext__text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --show-display: Display value that is used when content is shown (default `block`)\n * @prop --hide-display: Display value that is used when content is hidden (default `none`)\n * @prop --current-display: Current display value (readonly)\n */\n\n:host {\n  --show-display: contents;\n  --hide-display: none;\n  --current-display: var(--hide-display);\n\n  display: var(--current-display);\n}\n\n/* Mikro */\n\n:host([mikro]) {\n  --current-display: var(--show-display);\n}\n\n:host([mikro=\"false\"]) {\n  --current-display: var(--hide-display);\n}\n\n/* Small */\n\n:host([small]) {\n  @include mq($from: small) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([small=\"false\"]) {\n  @include mq($from: small) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Medium */\n\n:host([medium]) {\n  @include mq($from: medium) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([medium=\"false\"]) {\n  @include mq($from: medium) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Large */\n\n:host([large]) {\n  @include mq($from: large) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([large=\"false\"]) {\n  @include mq($from: large) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Ultra */\n\n:host([ultra]) {\n  @include mq($from: ultra) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([ultra=\"false\"]) {\n  @include mq($from: ultra) {\n    --current-display: var(--hide-display);\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhBannerCloseEvent, StzhGhettoboxCloseEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSE = \"stzh-components-show-close\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-show\",\n  styleUrl: \"stzh-show.scss\",\n  shadow: true,\n})\nexport class StzhShow {\n  /** Mikro */\n  @Prop({ reflect: true }) mikro: boolean;\n\n  /** Small */\n  @Prop({ reflect: true }) small: boolean;\n\n  /** Medium */\n  @Prop({ reflect: true }) medium: boolean;\n\n  /** Large */\n  @Prop({ reflect: true }) large: boolean;\n\n  /** Ultra */\n  @Prop({ reflect: true }) ultra: boolean;\n\n  /** Show from date */\n  @Prop() showFromDate: Date | string;\n  private _showFromDate: Date;\n\n  /** Hide from date */\n  @Prop() hideFromDate: Date | string;\n  private _hideFromDate: Date;\n\n  /**\n   * Close cookie name key.\n   * Component will check for the cookie (stzh-components-show-close-{name})\n   * and if not empty (component inside already closed before) will hide show.\n   * Will also compare with showFromDate if given, to make sure cookie was set after showFromDate (otherwise will show again).\n   */\n  @Prop() closeKey: string = \"\";\n\n  @Listen(\"stzhClose\")\n  closeWatcher(event: CustomEvent<StzhBannerCloseEvent | StzhMessageCloseEvent | StzhGhettoboxCloseEvent>) {\n    if ([\"stzh-banner\", \"stzh-message\", \"stzh-ghettobox\"].includes(event.detail.component)) {\n      if (this.closeKey) {\n        Cookie.set(`${KEY_PREFIX_CLOSE}-${this.closeKey}`, Date.now().toString());\n      }\n    }\n  }\n\n  @Watch(\"showFromDate\")\n  showFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._showFromDate = newValue ? new Date(newValue) : null;\n    } else {\n      this._showFromDate = newValue;\n    }\n\n    let closedByCookie = false;\n\n    if (this.closeKey) {\n      const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE}-${this.closeKey}`);\n\n      if (timeClosed && (!this._showFromDate || Number(timeClosed) >= this._showFromDate.getTime())) {\n        closedByCookie = true;\n      }\n    }\n\n    this.closedByCookie = closedByCookie;\n  }\n\n  @Watch(\"hideFromDate\")\n  hideFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._hideFromDate = newValue ? new Date(newValue) : null;\n    } else {\n      this._hideFromDate = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShowElement;\n\n  private closedByCookie: boolean = false;\n\n  componentWillLoad() {\n    this.showFromDateWatcher(this.showFromDate);\n    this.hideFromDateWatcher(this.hideFromDate);\n  }\n\n  render() {\n    const timeNow = Date.now();\n\n    return (\n      <Host\n        hidden={\n          (this._showFromDate && timeNow <= this._showFromDate.getTime()) ||\n          (this._hideFromDate && timeNow >= this._hideFromDate.getTime()) ||\n          this.closedByCookie\n        }\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-homepage-search.entry.js

@@ -51,7 +51,7 @@ const StzhHomepageSearch = class {
             "stzh-homepage-search": true,
             "stzh-homepage-search--is-search-filled": this.searchFilled,
         };
-        return (h(Host, { key: '8d3a9d2beaa7dac60b6073ddbb139eef7e2abd71' }, h("div", { key: 'cec954a81d80f461e4fe417daabf869294571ddb', class: classes }, h("div", { key: '7652aa22bd27208ea1e75b5bc5d21d6289d485b8', class: "stzh-homepage-search__container" }, h("form", { key: '31bae02ac7b2993ea5a30e9580ac8b1ae0082db9', class: "stzh-homepage-search__form", action: this.searchAction, role: "search", ref: el => (this.formElement = el) }, h("label", { key: 'ee73baf9b4a692ab75ddbde9e6d33916a71cbee2', class: "stzh-homepage-search__search" }, h("input", { key: 'af56b29bb54dc8457feaeae12fd3127dd4e0e0a3', id: this.searchId, ref: el => (this.searchInput = el), class: "stzh-homepage-search__search-input", type: "search", name: this.searchFieldName, onChange: this.handleSearchChange, onInput: this.handleSearchInput, placeholder: this.placeholder }), h("stzh-icon", { key: 'd93fc9e18383162c20aed8378c3f752bd3476eb2', class: "stzh-homepage-search__search-icon", name: "search" })))))));
+        return (h(Host, { key: '34f08255d66c43c177e134eeec3c3aec34ef9ab9' }, h("div", { key: 'f7268bc962dc0a29a12faaa2fe122942121b87bb', class: classes }, h("div", { key: '537162c8de6a01758ac1c7a12fa00df80ceb4152', class: "stzh-homepage-search__container" }, h("form", { key: '249a31fa2198aa403e7ff883da73c202aaf7a053', class: "stzh-homepage-search__form", action: this.searchAction, role: "search", ref: el => (this.formElement = el) }, h("label", { key: '9f8dd1d80b9d63f35352a474d2b864ed167d59c6', class: "stzh-homepage-search__search" }, h("input", { key: 'eeaa43806cf51ddd7a1bc629c5b5ca967b2e61f4', id: this.searchId, ref: el => (this.searchInput = el), class: "stzh-homepage-search__search-input", type: "search", name: this.searchFieldName, onChange: this.handleSearchChange, onInput: this.handleSearchInput, placeholder: this.placeholder }), h("stzh-icon", { key: '48c46c41fa54b657c015e7d0b99f44d3347c11e5', class: "stzh-homepage-search__search-icon", name: "search" })))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-homepage-service-highlights.entry.js

@@ -84,14 +84,14 @@ const StzhHomepageServiceHighlights = class {
             "stzh-homepage-service-highlights": true,
             "stzh-homepage-service-highlights--has-topnews": this._topnewsItems.length > 0,
         };
-        return (h(Host, { key: '280038b3662d3ba8fdd491193c24f73cbbd63581' }, h("div", { key: '08524da9d91d0317575201781d053fc265e953aa', class: classes }, this._topnewsItems.length > 0 && (h("div", { key: '1e7d6a905d2eef696f1d31e1930fa24a11c7c50d', class: "stzh-homepage-service-highlights__topnews" }, this._topnewsItems.map(item => !!item.href ? (h("a", { href: item.href, class: {
+        return (h(Host, { key: 'f9f48bffc5a6c5c7bb0d1d6cc92b753c182888f1' }, h("div", { key: 'f2b472f7f9ab300265b5ea5cfd3f39438299112c', class: classes }, this._topnewsItems.length > 0 && (h("div", { key: '448282cdba1d4c9d9e0873c824b425c0cc0c592d', class: "stzh-homepage-service-highlights__topnews" }, this._topnewsItems.map(item => !!item.href ? (h("a", { href: item.href, class: {
                 "stzh-topnews-item": true,
                 "stzh-topnews-item--highlighted": item.isHighlighted,
                 "stzh-topnews-item--has-link": true,
             } }, this.renderTopnewsItemInner(item))) : (h("div", { class: {
                 "stzh-topnews-item": true,
                 "stzh-topnews-item--highlighted": item.isHighlighted,
-            } }, this.renderTopnewsItemInner(item)))))), this._mostsearchedItems.length > 0 && (h("div", { key: 'd8a0607cbab10c87a03306a6818ebb1102d0f1c9', class: "stzh-homepage-service-highlights__mostsearched" }, this._mostsearchedItems.map(item => (h("div", { class: {
+            } }, this.renderTopnewsItemInner(item)))))), this._mostsearchedItems.length > 0 && (h("div", { key: '9fb11db51a5d6af2854253443a570d321b43cf6a', class: "stzh-homepage-service-highlights__mostsearched" }, this._mostsearchedItems.map(item => (h("div", { class: {
                 "stzh-mostsearched-item": true,
             } }, h("stzh-link", { class: "stzh-mostsearched-item__link", href: item.href, icon: "arrow-right" }, item.label)))))))));
     }

package/dist/esm/stzh-linklist.entry.js

@@ -18,7 +18,7 @@ const StzhLinklist = class {
             "stzh-linklist": true,
         };
         const datalistSlotUsed = hasSlot(this.element, "datalist");
-        return (h(Host, { key: '69da07094b482882f3ed9f0d5f28e6b59a18a94b', "padding-bottom": this.paddingBottom }, h("div", { key: 'e443cdadb5c466d0764324c101b342d9c5360f62', class: classes }, h("div", { key: 'c4b07b0b6aeb77e1554b229c353cd15a0070d6c3', class: "stzh-linklist__wrapper" }, this.heading && (h("div", { key: 'c3aaec3ab79a4266313813e5f8653b380285a5fa', class: "stzh-linklist__heading" }, h("stzh-heading", { key: '9a03692b6f5d62e226101dd4171544664bbac563', level: this.headingLevel }, this.heading))), h("div", { key: '6c701b552ae3ac26f9ff198bbdfa63be9fd8ee5a', class: "stzh-linklist__list" }, datalistSlotUsed ? (h("slot", { name: "datalist" })) : (h("stzh-datalist", { verticalGap: "small", items: this.items })))))));
+        return (h(Host, { key: 'f7723d2e93bc7fa3cb7bab6187a4b3170a27dd5a', "padding-bottom": this.paddingBottom }, h("div", { key: '3309b3a981f2215e08c646a7267a28671db1ba8b', class: classes }, h("div", { key: 'c119188fcb435c7b0dc41eb1ce7a76861d6d7e58', class: "stzh-linklist__wrapper" }, this.heading && (h("div", { key: '82076308b465b84d9dae2b6f7b0eeda24162dce3', class: "stzh-linklist__heading" }, h("stzh-heading", { key: '3064fbb32d9e55f13d96139acbd9245dd28b5378', level: this.headingLevel }, this.heading))), h("div", { key: '7279ef37179e0d6677d9b80200a2844273e18c2d', class: "stzh-linklist__list" }, datalistSlotUsed ? (h("slot", { name: "datalist" })) : (h("stzh-datalist", { verticalGap: "small", items: this.items })))))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-microsite-teaserlist.entry.js

@@ -73,7 +73,7 @@ const StzhMicrositeTeaserlist = class {
         const classes = {
             "stzh-microsite-teaserlist": true,
         };
-        return (h(Host, { key: 'fa050346cd119ba40be46c3cb6f4489e6f5b2f9e' }, h("div", { key: '743c497afe98ac7d972ef201e4270c9985299f7c', class: classes }, this._tagChips.length > 0 && (h("stzh-chipselect", { key: 'cb24e983c411887334993be2b04fa87560ed30ba', "hide-optional": true, "label-hidden": true, class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange })), h("stzh-cardlist", { key: '925225b16d45d547895352ad1ee12f23dc6f5f49', layout: "teasers" }, this._filteredSlicedItems.map(item => (h("stzh-card", { href: item.link }, item.image && (h("stzh-ratio", { slot: "image" }, h("img", { src: item.image }))), item.title && h("div", { slot: "heading" }, item.title), item.description && h("div", { slot: "content" }, item.description))))), this._showMoreLink && (h("div", { key: 'e4f69b51e37f9f8b4e1f064f9adc531fb9a83fbb', class: "stzh-microsite-teaserlist__show-more" }, h("stzh-button", { key: '5ad0cbfc3d70b4cd3a9f9380933863ab59d2eda8', variant: "secondary", label: this.localization.showMore, onClick: this.handleMoreClick }))))));
+        return (h(Host, { key: 'b53c6510bccb9ee924437b95c7c002b4620a5ec4' }, h("div", { key: 'b6ba7dbb1ebcd2f4a6bed1e662382a8958dac522', class: classes }, this._tagChips.length > 0 && (h("stzh-chipselect", { key: 'b2bae6e0822a2aa9b15dad2f43a703a2688c5fbd', "hide-optional": true, "label-hidden": true, class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange })), h("stzh-cardlist", { key: 'd01547769339006074ad6d69bf43b38b3a05e055', layout: "teasers" }, this._filteredSlicedItems.map(item => (h("stzh-card", { href: item.link }, item.image && (h("stzh-ratio", { slot: "image" }, h("img", { src: item.image }))), item.title && h("div", { slot: "heading" }, item.title), item.description && h("div", { slot: "content" }, item.description))))), this._showMoreLink && (h("div", { key: '66b59a4ee337a02ee14e7024bccc6c15d440de56', class: "stzh-microsite-teaserlist__show-more" }, h("stzh-button", { key: '2a92713a2e4df43de97fb29b0a416e63ff275690', variant: "secondary", label: this.localization.showMore, onClick: this.handleMoreClick }))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-page-skiplinks.entry.js

@@ -27,7 +27,7 @@ const StzhPageSkiplinks = class {
         }
     }
     render() {
-        return (h(Host, { key: 'aedfec87bdd0e905aff27d050055b425a910c9d4' }, h("div", { key: '4f0c35df28cff16ae551e9506ee1e95dff397bba', class: "stzh-page-skiplinks", role: "list" }, h("slot", { key: '38aa5423956680410850c1199ef43c6463c4f52c' }))));
+        return (h(Host, { key: 'd7f00f25536c48b52432ba8849856e586c742aed' }, h("div", { key: '1cf19962202b6584084d796d1e1ed9799eecf40b', class: "stzh-page-skiplinks", role: "list" }, h("slot", { key: 'f452525e7d02f8249f3e24616463c8ac3bb659a4' }))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pagebottom.entry.js

@@ -29,7 +29,7 @@ const StzhPagebottom = class {
             "stzh-pagebottom": true,
             rs_skip: true, // will prevent component being read by readspeaker
         };
-        return (h(Host, { key: '3cbf9c6ecf1b015de103fa51e4dbd9f1875cf101' }, h("div", { key: 'ba81014dd05b0d833461ab8511c64cf5cf4ebf34', class: classes }, h("div", { key: '3417c0a8c81880feb05da0aa28d901daa94b0a52', class: "stzh-pagebottom__wrapper" }, h("div", { key: '8d2a376a8690c8906f7fc9709575a217d1d1d9af', class: "stzh-pagebottom__left" }, this.withPrint && (h("div", { key: '3bd9f2e655f1da5d4ecc40f5987bccd4aabe2c85', class: "stzh-pagebottom__print" }, h("stzh-print", { key: 'd24ef08bdeec9c9b84beef493a2ad5e971a959cb' }, h("stzh-button", { key: 'e8321b5f0980f2373de2a97d94aac19f27b6e75e', label: this.localization.printLabel, variant: "tertiary-plain", size: "small", noPaddingLeft: true, noPaddingRight: true, analyticsId: this.printAnalyticsId })))), !this.shareDisabled && (h("div", { key: '06dca7b1b4563c3b9098f1b4d5cc731ca036d785', class: "stzh-pagebottom__share-wrapper" }, this.shareTitle && h("div", { key: '0ee1571f61d03a8bd47c7e4fe73d31e0d576292e', class: "stzh-pagebottom__share-title" }, this.shareTitle), h("stzh-share", { key: 'adf7eccd9961fc73e78e42a30adfd5d91e1346a7', url: this.shareUrl, services: this.shareServices, mailSubject: this.shareMailSubject, mailBody: this.shareMailBody })))), h("div", { key: '636a4607fb363e2669edb5d488b71f280b7f8208', class: "stzh-pagebottom__sticky-actions" }, h("slot", { key: 'c0f017359f111439994255a668e457690cac89e2', name: "sticky-actions" }))))));
+        return (h(Host, { key: 'b8e6581d3bf0f25959b9e21c323c54ef4a1c4fa2' }, h("div", { key: 'aa0d878d94ebee65f649644d57e730e03a9f0184', class: classes }, h("div", { key: 'ac1273e2cae820c4fa419d34affc1ecbd78170d9', class: "stzh-pagebottom__wrapper" }, h("div", { key: '97a5f11af2ab3d3dada17baba03cee7b3a041744', class: "stzh-pagebottom__left" }, this.withPrint && (h("div", { key: 'e46b763bc6ab92e682f0637ba0c4168956524ce9', class: "stzh-pagebottom__print" }, h("stzh-print", { key: '7c72ebc64dec950a3d02c9233a23671383e1e8fb' }, h("stzh-button", { key: '7389e3e2dfbc487a0981fc8e0c06167c5250ef03', label: this.localization.printLabel, variant: "tertiary-plain", size: "small", noPaddingLeft: true, noPaddingRight: true, analyticsId: this.printAnalyticsId })))), !this.shareDisabled && (h("div", { key: 'be75d6e5ec735714e2e3dc6c16d5cb92ca2ed83c', class: "stzh-pagebottom__share-wrapper" }, this.shareTitle && h("div", { key: 'a0f8f8b6f877db89e83d02838b97a283d438384d', class: "stzh-pagebottom__share-title" }, this.shareTitle), h("stzh-share", { key: 'c20a7b2dfba564353a110b0cfbf1612becc1ddbf', url: this.shareUrl, services: this.shareServices, mailSubject: this.shareMailSubject, mailBody: this.shareMailBody })))), h("div", { key: '8372fc7280fb2c9d347d6bbad05f05951859318e', class: "stzh-pagebottom__sticky-actions" }, h("slot", { key: '4baa09b42562509c73b272176bbbb4fe1116d3d4', name: "sticky-actions" }))))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pagecontent.entry.js

@@ -17,7 +17,7 @@ const StzhPagecontent = class {
             "stzh-pagecontent--has-aside-left": hasAsideLeft || hasAnchornav,
             "stzh-pagecontent--has-no-aside-left": !hasAsideLeft && !hasAnchornav,
         };
-        return (h(Host, { key: '8204d128129864ac826e4255bd4eadd4b40f2fc5' }, h("div", { key: 'ff81ff0a4d8bcd01220e15be270920d6dc1dec76', class: classes }, h("aside", { key: 'f0359b46cab1eb0902cfe56dcdb23b492e13069b', class: "stzh-pagecontent__aside-left" }, h("div", { key: '68c3dd128f10987c785f8a231e3a661125158427', class: "stzh-pagecontent__anchornav" }, h("slot", { key: '7afa88fed75e89bdce4c6ccc5c30ff8d649e7752', name: "anchornav" })), h("slot", { key: 'd6e61ba9fb847ddb487ab8e1d96eadaca9030af1', name: "aside-left" })), h("div", { key: 'e6b38ec9d28c3a7e8858ee564ebdff1064618af1', class: "stzh-pagecontent__content" }, h("slot", { key: '1ad79b2e7695a056ff51ef24f7bee0b766c5d185' })))));
+        return (h(Host, { key: 'eb0aff6c89c642d06b59c54c43969da91b4ffb36' }, h("div", { key: '0b3e3a3969f85a0cae9e5d01c7c419d2e9c1ffe6', class: classes }, h("aside", { key: 'b558994b0f9fd1f0fa0f9e66d552bd342a8e3328', class: "stzh-pagecontent__aside-left" }, h("div", { key: '8c98292f2a33d87b9ecb7644a3eb96c4cc3e2415', class: "stzh-pagecontent__anchornav" }, h("slot", { key: 'bce64fc9b84fce780451b8838a24ef5fe55cd6ab', name: "anchornav" })), h("slot", { key: 'f13925d6f7f5ada1bd5cdee3d8096e9a44a202a9', name: "aside-left" })), h("div", { key: '455ce07a7b496b839a91ce24337ff1dd9692d59d', class: "stzh-pagecontent__content" }, h("slot", { key: 'a274972aa117dd8b4438a89d3b6c1afcc76b2b82' })))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pagetitle-hero.entry.js

@@ -90,7 +90,7 @@ const StzhPagetitleHero = class {
             "stzh-pagetitle-hero--has-no-lead": !leadSlotUsed,
             "stzh-pagetitle-hero--has-back-link": backLinkSlotUsed,
         };
-        return (h(Host, { key: '5a40025e386fdfc048e8e430fd801341ce57d901' }, h("div", { key: 'e358c40c81e06e77c401d6c73bbeec36fe32f6f1', class: classes }, h("div", { key: '3e0c810bbc4fbbed1194d27f6015016daa345b7d', class: "stzh-pagetitle-hero__header" }, h("div", { key: '3c30ed880daac301db409fbc034bf9c318c56949', class: "stzh-pagetitle-hero__back-link" }, h("slot", { key: 'bfdf88eb29d75823a906cd92efdbc6a839e31ca5', name: "back-link" })), h("div", { key: '2460d18fb051bee1956d719ce4f874a36b14789a', class: "stzh-pagetitle-hero__image-wrapper" }, h("div", { key: 'bf57bd8b5cad3fb85c6eb6d5368e456ae969cb5e', class: "stzh-pagetitle-hero__image-ratio" }), h("slot", { key: 'f540d5b6c8d9b75b13554686209816b364a8bdd9', name: "image" })), h("div", { key: '693e9cd1f972bd86fdd9a2fe6a4dd003f491177a', class: "stzh-pagetitle-hero__title-wrapper" }, h("div", { key: '7776b94d2fb7ca943382dccdea5f4ebdedbd7423', class: "stzh-pagetitle-hero__tags", role: "list" }, h("slot", { key: '4260433226d8d5511f6c654b7607b219d357a767', name: "tag" })), h("div", { key: '6548b19ab8aa02196455daf92b25f8b56543ada2', class: "stzh-pagetitle-hero__title-parent" }, h("h1", { key: 'e1bf2d3f86e8b7d8a5987dbc7262b074c58a221b', ref: el => (this.mainTitleElement = el), class: "stzh-pagetitle-hero__title", id: this.headingId, innerHTML: this.heading })), this.subtitle && h("div", { key: '3340decb7d520b46c3c88dce9cad75f2268e7e99', class: "stzh-pagetitle-hero__subtitle" }, this.subtitle))), h("div", { key: '47ae4d6ea1715be31a547de92b3a7580aeee56cf', class: "stzh-pagetitle-hero__lead" }, h("slot", { key: 'd8c3131f13b74634d06545dd088d316c2b10bb1c', name: "lead" }), h("div", { key: 'd9dea7578ccd0f38dbad78f5675c68da4b40b5e6', class: "stzh-pagetitle-hero__lead-author" }, this.leadAuthor)))));
+        return (h(Host, { key: 'bcd25c4c4cb3be130272f8a7780f2ed8c6ff4ba1' }, h("div", { key: 'a6e6961b33229fae1415acf98b646597f67ad584', class: classes }, h("div", { key: '9efafa7c6d1ce717cfdbce68d8a2851acf53813e', class: "stzh-pagetitle-hero__header" }, h("div", { key: 'a9e233f0aa69b675b7205568fdb833368efec4c2', class: "stzh-pagetitle-hero__back-link" }, h("slot", { key: '277a49690f5aedf5f3db388c0618260d66bf24ff', name: "back-link" })), h("div", { key: '6155a14cd27e65dd07b8f1e48a13a371c899578a', class: "stzh-pagetitle-hero__image-wrapper" }, h("div", { key: '934cf78953f48c4bf10f4d1e3d7d289c6f7dd407', class: "stzh-pagetitle-hero__image-ratio" }), h("slot", { key: '914e2e4ac218a07422ae33129bbe505c3b5e0cb4', name: "image" })), h("div", { key: 'f28d60cd3b36ea31f5bc7edb609e1123799f3481', class: "stzh-pagetitle-hero__title-wrapper" }, h("div", { key: '20cdcb04f8bae345c5f3e3769b166e7f7e1cedb3', class: "stzh-pagetitle-hero__tags", role: "list" }, h("slot", { key: '98997ef5a94cffb5dac06c5b939f3c6196e5bc4e', name: "tag" })), h("div", { key: '48beec20fea7d9c0fae595b9a7150478a7fdb9c4', class: "stzh-pagetitle-hero__title-parent" }, h("h1", { key: 'f6f566c1026c6813415999ed94a85ac7e045af26', ref: el => (this.mainTitleElement = el), class: "stzh-pagetitle-hero__title", id: this.headingId, innerHTML: this.heading })), this.subtitle && h("div", { key: 'd7551260d571de922028fd0253e1f9fe5801ccff', class: "stzh-pagetitle-hero__subtitle" }, this.subtitle))), h("div", { key: '6707c76964878059553e9d9695f624b9a2694d78', class: "stzh-pagetitle-hero__lead" }, h("slot", { key: '68d8f46003a6b263707035dc107d86834e4456c9', name: "lead" }), h("div", { key: '7ed34086c39225b55708cf53e7f5a02f47e72bb0', class: "stzh-pagetitle-hero__lead-author" }, this.leadAuthor)))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pagetitle-home.entry.js

@@ -73,7 +73,7 @@ const StzhPagetitleHome = class {
             "stzh-pagetitle-home--hyphens": this.hyphensEnabled,
             "stzh-pagetitle-home--has-meta": readspeakerSlotUsed,
         };
-        return (h(Host, { key: 'f92ee37d405b81cfb5995067c42ed036e3422b96', "has-image": imageSlotUsed }, h("div", { key: '3ae7caaf67826f4b2e12415541dc0670fc564570', class: classes }, h("div", { key: 'c83d80624069c9de3b5d3e9590768f665ff932eb', class: "stzh-pagetitle-home__image-wrapper" }, h("stzh-ratio", { key: 'aaa496c0b988ff38c1a6a9f124a2c7cba0a3737b', ratio: "1:1", ratioSmall: "16:9", ratioMedium: "2:1", ratioLarge: "21:9", class: "stzh-pagetitle-home__ratio" }), h("div", { key: '0f3aa04c550b93a438d787a3ac5fc7cf63901d4e', class: "stzh-pagetitle-home__image-gradient" }), h("div", { key: 'beba8206a20ef362e09a6b5eed22dd4c4b8e2e7e', class: "stzh-pagetitle-home__image-inner-wrapper" }, h("slot", { key: 'ba1d0751a322cc95951a9b54d9e852fb5e1a02ad', name: "image" }))), h("div", { key: '3c54151f234ecb63e6a566701570de134d279d0f', class: "stzh-pagetitle-home__container" }, h("div", { key: '6edd0a5fd28de8674d1d0d57f6fe5a1518ef4454', class: "stzh-pagetitle-home__wrapper" }, h("div", { key: '05a2ca13f4ec83638baea131080d0683045aa589', class: "stzh-pagetitle-home__text" }, h("div", { key: '37435fdc6e5065d20ec4c7ccde6aec51bcd2f1b1', class: "stzh-pagetitle-home__meta" }, h("div", { key: 'daa27aa84c4b8704fe01bd0b4a56dc78bf273d8e', class: "stzh-pagetitle-home__readspeaker" }, h("slot", { key: 'cd104e93ee0dcc79f5a6707b2f8baf1cb609fde0', name: "readspeaker" }))), h("div", { key: '0f0976d0c4e2d5cbee42e85255d10c40bb9dc7bb', class: "stzh-pagetitle-home__heading" }, h("slot", { key: 'c1758088a81b1de6d8ef07dd324ae844ec60f8c2', name: "heading" })), h("div", { key: '55de194341f1d07364d4d030120a34bf3c0fa347', class: "stzh-pagetitle-home__subheading" }, h("slot", { key: 'de008a5747939645e88dd973453a6cee4cd0eb78', name: "subheading" }))))))));
+        return (h(Host, { key: 'dec700a88230f0d919243eefd132dab55d8dae84', "has-image": imageSlotUsed }, h("div", { key: '1667eae85ab61a87bf6ae19142f2b3e197a9148a', class: classes }, h("div", { key: 'c1a2c06c6f587b8674d4c7a0a43344964a8d7ae1', class: "stzh-pagetitle-home__image-wrapper" }, h("stzh-ratio", { key: '197b547f5af8e8472c43be0093e58499711089db', ratio: "1:1", ratioSmall: "16:9", ratioMedium: "2:1", ratioLarge: "21:9", class: "stzh-pagetitle-home__ratio" }), h("div", { key: '41ee1dfbc01fe94ab4b1a4a17db4d0c130cba179', class: "stzh-pagetitle-home__image-gradient" }), h("div", { key: 'a054390e29deb379d34f7757cb57bdf947c489f3', class: "stzh-pagetitle-home__image-inner-wrapper" }, h("slot", { key: '0b18905f420423cf45fbb3b83577a71a23ed0a8e', name: "image" }))), h("div", { key: '32580081233599ff9a4fd19329c7888c03783189', class: "stzh-pagetitle-home__container" }, h("div", { key: '4bac4a7e6c62018a9f29d251757c55e93cfafdfc', class: "stzh-pagetitle-home__wrapper" }, h("div", { key: '142f1fe80210602d572c64f6177f3e31cffd6b7c', class: "stzh-pagetitle-home__text" }, h("div", { key: 'f4e3c51caa17ad3ce87457f12a923f24e4e13432', class: "stzh-pagetitle-home__meta" }, h("div", { key: 'f9984c81b2307be0c1ebba4f9a7590bb3a70fb68', class: "stzh-pagetitle-home__readspeaker" }, h("slot", { key: '4b7edbba6ad0c61ba1a193d88ca6eeba949083e2', name: "readspeaker" }))), h("div", { key: '9c2808c46d72d17d26d870cd145186b54a417ef8', class: "stzh-pagetitle-home__heading" }, h("slot", { key: '5acd17edc64b458aa65950af4c14f48dafb99603', name: "heading" })), h("div", { key: 'f35d7ee32f59b2cbda19a5cb5a5ee10092f014a1', class: "stzh-pagetitle-home__subheading" }, h("slot", { key: 'db5ca66dfb616df1049f1ce8ddf6dc24ba4d5ea3', name: "subheading" }))))))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pagetitle.entry.js

@@ -132,7 +132,7 @@ const StzhPagetitle = class {
             "stzh-pagetitle--hyphens": this.hyphensEnabled,
             [`stzh-pagetitle--background-${this.background}`]: !!this.background,
         };
-        return (h(Host, { key: '85edf2fc9a88ff38407fc20ce1d2414e335206db' }, h("div", { key: '1ef9a48d698c3da53f3275a576ac9c7ebde579e1', class: classes }, h("div", { key: '67dbe586811c10888d71d5b493f042f8eb19032a', class: "stzh-pagetitle__container" }, h("div", { key: 'af677f8d08bb09bb7f64a623f5481a6479664632', class: "stzh-pagetitle__wrapper" }, h("div", { key: '3c6ce9cec95a83e3a2d06f8fe02c90697de937f7', class: "stzh-pagetitle__text" }, h("div", { key: '297c10abcc611bc352029d101525a3738eaeca75', class: "stzh-pagetitle__meta" }, h("div", { key: 'a6f1eede7a640753c362caf174d9b605a46174c2', class: "stzh-pagetitle__tag" }, h("slot", { key: '7f36a9318d11fb6629017d98ce297768d6f59085', name: "tag" })), h("div", { key: '79818b1e7bff0d4688a44faf5e163d8169645769', class: "stzh-pagetitle__readspeaker" }, h("slot", { key: 'a6105944aa39451e979c98ee5fe6dbd356f2d949', name: "readspeaker" }))), this.dateline && h("div", { key: 'fdbc1611e59d1b44ad750ca57d20e5f3fd00cc3c', class: "stzh-pagetitle__dateline" }, this.dateline), h("div", { key: '918dfc77a90d9e5f663b11b82528555fbf34e3ae', class: "stzh-pagetitle__heading" }, h("slot", { key: '764b58dbe204d5f702421635b10545a7fd7aa40a', name: "heading" })), h("div", { key: '53f51493a9e54395ee7877b9a7aa73fae734847f', class: "stzh-pagetitle__lead" }, h("slot", { key: '7d049ffcb6a5645a62bbda184f7c033135535cbe', name: "lead" }))), h("div", { key: 'be1e1875fcecd2eaca274741ba4639f1abf21810', class: "stzh-pagetitle__image-wrapper" }, h("stzh-ratio", { key: 'e3451938296db8ae3f96abe07f1a5779ca04d6b6', ratio: "16:9", ratioSmall: "3:2", ratioMedium: "16:9", class: "stzh-pagetitle__ratio" }), h("div", { key: '95d47ca275baa6742ed0cacf7192540ce45c9973', class: "stzh-pagetitle__image-inner-wrapper" }, h("slot", { key: '03dc14fb203cbb722cb177eebad2c8d3d4a05e94', name: "image" }))), h("div", { key: 'fc4772400a661c0627d887248a9802072e665f02', class: "stzh-pagetitle__disturber", ref: el => (this.disturberElement = el) }, h("slot", { key: 'fdf89bb18f05c94893009d93d6ecb73a870dda58', name: "disturber" })))))));
+        return (h(Host, { key: 'a22098979f8de99cc3dc031b5ce498f0556ced71' }, h("div", { key: 'a07a34b2cb5c97e0903931882edc7dbc8251c83e', class: classes }, h("div", { key: 'cd84ba6a71765c7a3705af2d82263aa090b0a830', class: "stzh-pagetitle__container" }, h("div", { key: '557f36cb59210ff79d304e4174f755cd5e20c233', class: "stzh-pagetitle__wrapper" }, h("div", { key: '65746bb0d3d3ed9de4f7d3cb3f4057843c5efc75', class: "stzh-pagetitle__text" }, h("div", { key: '1249a0da4cdf0d909320899e872f5a9540f9cef8', class: "stzh-pagetitle__meta" }, h("div", { key: '16e71f278b85676ba67b5a9e1db2baaa95c5c484', class: "stzh-pagetitle__tag" }, h("slot", { key: 'd392df7260db7cc5527fb9740c4f5c807b73a4f8', name: "tag" })), h("div", { key: '1f6c244d4beb5d31b76101780353a398a305864e', class: "stzh-pagetitle__readspeaker" }, h("slot", { key: '18918620ce3693cc9dea1051c425aefabbab660e', name: "readspeaker" }))), this.dateline && h("div", { key: 'f8302af04207e487df2e4960c079d98d28ed4a14', class: "stzh-pagetitle__dateline" }, this.dateline), h("div", { key: 'ff0b6fa76ed6be8f186cdcad4facc0d06d216839', class: "stzh-pagetitle__heading" }, h("slot", { key: '87dfe8db40e383a54d23f46ec017348cf6fcb87f', name: "heading" })), h("div", { key: '0025e46377888d1ef18b6c56a95608d23843211b', class: "stzh-pagetitle__lead" }, h("slot", { key: 'a5d2b1f64ebfaf8b2eeed2ee47bd8a8a883afe08', name: "lead" }))), h("div", { key: '427db7b58efc2964dad68a69a75b487dc7251c68', class: "stzh-pagetitle__image-wrapper" }, h("stzh-ratio", { key: '3f192e843e637652040a13a40c0283432c46715b', ratio: "16:9", ratioSmall: "3:2", ratioMedium: "16:9", class: "stzh-pagetitle__ratio" }), h("div", { key: 'd57a78fd58f118abf015b626c6a088e5bc43d7a1', class: "stzh-pagetitle__image-inner-wrapper" }, h("slot", { key: 'cfdec1f4653228f7124fd38301a2795198d02101', name: "image" }))), h("div", { key: '20978ec4179fb3777b6fb7c3e1e1dfbbb194497e', class: "stzh-pagetitle__disturber", ref: el => (this.disturberElement = el) }, h("slot", { key: '7390ca6ee2c0f44e95103fbe3056d39ffcbcf29d', name: "disturber" })))))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pi-content-navigation.entry.js

@@ -50,7 +50,7 @@ const StzhPiContentNavigation = class {
             "stzh-pi-content-navigation--is-navigation-level-1-or-2": isNavigationLevel1or2,
         };
         const CardLink = this.href ? "a" : "button";
-        return (h(Host, { key: 'a3fd38b13f204da18ff2cd87a7e95d325a45ba33', "has-lead": hasLead }, h("article", { key: '4407073abea135beca06925a13b99dac867afc17', class: classes, "aria-label": this.heading, role: "listitem" }, h(CardLink, { key: 'f42819cacaad708ee4093b76ea93449d8b79c8ae', ref: el => (this.cardLinkElement = el), class: "stzh-pi-content-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { key: 'eefb2ee794458a1e05d57034d335526c22675230', class: "stzh-pi-content-navigation__image" }, h("stzh-ratio", { key: '09387c9e0fb9b8526a4aab1983a2f621e5b49093', ratio: "2:1" }, h("slot", { key: '67c47c251162891ba28286a94f91a90b5280dfb4', name: "image" }))), shouldRenderTitleRatio && (h("div", { key: '31aeb48e1897bd717f2618b5e4235305a6d6be7b', class: "stzh-pi-content-navigation__title-ratio" }, this.renderHeading())), h("div", { key: 'b1a488d455af3da7fba0d926d0d4c0acd9ec4f9b', class: "stzh-pi-content-navigation__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), hasLead && (h("div", { key: '1c1695ad670a4f94e260077c6d8c0ffefe37600a', class: "stzh-pi-content-navigation__lead" }, this.lead ? this.lead : h("slot", { name: "lead" })))), h("div", { key: 'cafeeac85332c4ba22a1dd6e8700ddef67b59ef1', class: "stzh-pi-content-navigation__arrow" }, h("stzh-icon", { key: '09405b42dc576bddb3f31c74f99ee4e152f4e8c0', class: "stzh-pi-content-navigation__arrow-icon", name: "arrow-right" }))))));
+        return (h(Host, { key: '933d0b13186f03a4ce042c8d72f205fa011e11b2', "has-lead": hasLead }, h("article", { key: '3cc3c0f63e068e954dc3b5a0396a53bfb8e1eb5c', class: classes, "aria-label": this.heading, role: "listitem" }, h(CardLink, { key: '871106e609ccb048597e683dcb1ee53b2e387119', ref: el => (this.cardLinkElement = el), class: "stzh-pi-content-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { key: '840776e707a0ca2107fe8b242627b2b8635f1358', class: "stzh-pi-content-navigation__image" }, h("stzh-ratio", { key: '304c98a4a7ea699d5214c525dea8468fded38c20', ratio: "2:1" }, h("slot", { key: 'a69c424f1e474b2bae06621bab40ee788269d06a', name: "image" }))), shouldRenderTitleRatio && (h("div", { key: '6580dff4bd9bf671d9b4391bbc6c0417c39b5d1d', class: "stzh-pi-content-navigation__title-ratio" }, this.renderHeading())), h("div", { key: '7b3e44b1e6cdc3c21719940fec71a8ae143039e0', class: "stzh-pi-content-navigation__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), hasLead && (h("div", { key: '5d75d6476fd7087fdd15f9cf908c915804b68c99', class: "stzh-pi-content-navigation__lead" }, this.lead ? this.lead : h("slot", { name: "lead" })))), h("div", { key: '49c5ca735da434e56acd40876390a3a09a7292f9', class: "stzh-pi-content-navigation__arrow" }, h("stzh-icon", { key: '552c7d67259cff681582a4d7a741a5f9cbe03b4a', class: "stzh-pi-content-navigation__arrow-icon", name: "arrow-right" }))))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pi-menu.entry.js

@@ -3,7 +3,7 @@ import { w as waitForEvent } from './event-utils-fb80c909.js';
 import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './animation-utils-d9f9cf5f.js';
 import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './media-utils-00a0cf24.js';
 
-const stzhPiMenuCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--padding-left:var(--stzh-pi-menu-padding-left, 20px);--trigger-size:var(--stzh-icon-size-large);--trigger-color:var(--stzh-color-black);--content-background:var(--stzh-color-primary20);--icon-size:var(--stzh-icon-size);--button-color:var(--stzh-color-black);--button-background-color:var(--stzh-color-primary30);--hover-button-color:var(--button-color);--hover-button-background-color:var(--stzh-color-primary40);--hover-trigger-color:var(--trigger-color)}@media print{:host{page-break-inside:avoid;break-inside:avoid}}@media (forced-colors: active), (-ms-high-contrast: active){:host{--trigger-color:CanvasText;--hover-trigger-color:CanvasText}}.stzh-pi-menu{height:100%;transition:width 0.15s ease;width:100%;z-index:1;position:absolute;scrollbar-color:var(--stzh-color-primary40) var(--content-background);}.stzh-pi-menu::-webkit-scrollbar{width:0.5rem}.stzh-pi-menu::-webkit-scrollbar-thumb{background-color:var(--stzh-color-primary40)}.stzh-pi-menu::-webkit-scrollbar-track{background:var(--content-background)}.stzh-pi-menu--fixed{position:fixed;top:0;height:auto;bottom:0}.stzh-pi-menu__heading{margin:0;position:sticky;top:0}.stzh-pi-menu__backdrop{position:absolute;z-index:-1;top:0;width:0;height:0;background-color:var(--stzh-color-black40op);opacity:0;transition:opacity var(--stzh-base-transition-animation-speed);pointer-events:none}.stzh-pi-menu__backdrop--visible{width:100vw;height:100vh;opacity:1;pointer-events:auto}.stzh-pi-menu__button{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);padding-left:var(--stzh-space-none);padding-right:var(--stzh-space-medium);padding-top:var(--stzh-space-none);padding-bottom:var(--stzh-space-none);width:100%;min-height:var(--stzh-space-xbig);appearance:none;display:flex;align-items:center;gap:var(--stzh-space-xsmall);color:var(--button-color);background-color:var(--button-background-color);text-align:left;border:none;transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}@media screen and (min-width: 900px){.stzh-pi-menu__button{padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-pi-menu__button{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-pi-menu__button{padding-left:calc((100vw - 100rem) / 2);padding-right:var(--stzh-space-medium)}}@media (prefers-reduced-motion: reduce){.stzh-pi-menu__button{transition:none}}.stzh-pi-menu__button:hover{color:var(--hover-button-color);background-color:var(--hover-button-background-color)}.stzh-pi-menu__button-spacer{visibility:hidden;pointer-events:none}.stzh-pi-menu__subheading{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);margin:0;padding:var(--stzh-space-small) var(--stzh-space-medium);hyphens:auto}@media screen and (min-width: 900px){.stzh-pi-menu__subheading{padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-pi-menu__subheading{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-pi-menu__subheading{padding-left:calc((100vw - 100rem) / 2 + var(--stzh-space-medium));padding-right:var(--stzh-space-medium)}}.stzh-pi-menu__content-inner{background-color:var(--content-background);overflow-y:hidden}.stzh-pi-menu__button-text{flex-grow:1;padding-left:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-pi-menu__button-text{padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1600px){.stzh-pi-menu__button-text{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}}.stzh-pi-menu__button-icon,.stzh-pi-menu__button-icon-in-menu{--size:var(--trigger-size);transition-property:transform, color;transition-duration:500ms;color:var(--trigger-color)}@media (prefers-reduced-motion: reduce){.stzh-pi-menu__button-icon,.stzh-pi-menu__button-icon-in-menu{transition:none}}.stzh-pi-menu__button-icon-in-menu{--size:var(--icon-size);color:var(--stzh-color-black);margin-left:auto}.stzh-pi-menu__button-icon-in-menu:hover{color:var(--stzh-color-primary70)}@media screen and (min-width: 900px){.stzh-pi-menu__button-icon-in-menu{display:none}}.stzh-pi-menu__sub-menu{display:flex;padding-right:var(--stzh-space-medium);align-items:center}@media screen and (min-width: 900px){.stzh-pi-menu__sub-menu{padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1600px){.stzh-pi-menu__sub-menu{padding-right:var(--stzh-space-medium)}}.stzh-pi-menu__button:hover .stzh-pi-menu__button-icon{color:var(--hover-trigger-color)}.stzh-pi-menu__button:hover .stzh-pi-menu__button-icon.is-default::before,.stzh-pi-menu__button:hover .stzh-pi-menu__button-icon.is-default::after{background-color:var(--hover-trigger-color)}.stzh-pi-menu__content{height:calc(100vh - 4rem);width:100%}@media print{.stzh-pi-menu__content{height:auto !important;overflow:visible !important;display:block !important}}.stzh-pi-menu stzh-details .stzh-details--is-open .stzh-pi-menu__button-icon-in-menu{transform:rotate(180deg)}.stzh-pi-menu stzh-details .stzh-details__content-inner{padding-top:var(--stzh-space-none)}.stzh-pi-menu__nav{padding-bottom:var(--stzh-space-xlarge);padding-left:var(--stzh-space-none)}.stzh-pi-menu__nav-list{list-style:none;margin-block-start:0;margin-block-end:0;padding-inline-start:0}@media screen and (min-width: 900px){.stzh-pi-menu__nav-list.is-level-2{padding-bottom:var(--stzh-space-small)}}.stzh-pi-menu__nav-item{display:block;padding-top:var(--stzh-space-xxsmall);padding-right:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xxsmall);padding-top:var(--stzh-space-xxsmall);padding-right:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xxsmall);padding-left:var(--padding-left);text-decoration:none;color:var(--stzh-color-black)}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 600px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 600px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-bottom:var(--stzh-space-small)}}.stzh-pi-menu__nav-item:hover{color:var(--stzh-color-primary70)}.stzh-pi-menu__nav-item.active{background-color:var(--stzh-color-primary30)}.stzh-pi-menu__nav-item.is-level-1{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);padding:var(--stzh-space-small) var(--stzh-space-medium)}@media screen and (max-width: 899px){.stzh-pi-menu__nav-item.is-level-1{height:2.75rem;align-content:center}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item.is-level-1{padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1600px){.stzh-pi-menu__nav-item.is-level-1{padding-left:calc((100vw - 100rem) / 2 + var(--stzh-space-medium));padding-right:var(--stzh-space-medium)}}.stzh-pi-menu__nav-item.is-level-2{line-height:var(--stzh-space-xlarge);padding:var(--stzh-space-xsmall) var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item.is-level-2{padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1600px){.stzh-pi-menu__nav-item.is-level-2{padding-left:calc((100vw - 100rem) / 2 + var(--stzh-space-xxlarge));padding-right:var(--stzh-space-xxlarge)}}.stzh-pi-menu__button-space-helper{visibility:hidden;pointer-events:none}.stzh-pi-menu--is-open .stzh-pi-menu__button-icon{transform:rotate(180deg)}.stzh-pi-menu--is-open .stzh-pi-menu__content-inner{overflow-y:auto;height:calc(100vh - 4rem)}";
+const stzhPiMenuCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--padding-left:var(--stzh-pi-menu-padding-left, 20px);--trigger-size:var(--stzh-icon-size-large);--trigger-color:var(--stzh-color-black);--content-background:var(--stzh-color-primary20);--icon-size:var(--stzh-icon-size);--button-color:var(--stzh-color-black);--button-background-color:var(--stzh-color-primary30);--hover-button-color:var(--button-color);--hover-button-background-color:var(--stzh-color-primary40);--hover-trigger-color:var(--trigger-color)}@media print{:host{page-break-inside:avoid;break-inside:avoid}}@media (forced-colors: active), (-ms-high-contrast: active){:host{--trigger-color:CanvasText;--hover-trigger-color:CanvasText}}.stzh-pi-menu{height:100%;transition:width 0.15s ease;width:100%;z-index:1;position:absolute;scrollbar-color:var(--stzh-color-primary40) var(--content-background);}.stzh-pi-menu::-webkit-scrollbar{width:0.5rem}.stzh-pi-menu::-webkit-scrollbar-thumb{background-color:var(--stzh-color-primary40)}.stzh-pi-menu::-webkit-scrollbar-track{background:var(--content-background)}.stzh-pi-menu--fixed{position:fixed;top:0;height:auto}.stzh-pi-menu__heading{margin:0;position:sticky;top:0}.stzh-pi-menu__backdrop{position:absolute;z-index:-1;top:0;width:0;height:0;background-color:var(--stzh-color-black40op);opacity:0;transition:opacity var(--stzh-base-transition-animation-speed);pointer-events:none}.stzh-pi-menu__backdrop--visible{width:100vw;height:100vh;opacity:1;pointer-events:auto}.stzh-pi-menu__button{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);padding-left:var(--stzh-space-none);padding-right:var(--stzh-space-medium);padding-top:var(--stzh-space-none);padding-bottom:var(--stzh-space-none);width:100%;min-height:var(--stzh-space-xbig);appearance:none;display:flex;align-items:center;gap:var(--stzh-space-xsmall);color:var(--button-color);background-color:var(--button-background-color);text-align:left;border:none;transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}@media screen and (min-width: 900px){.stzh-pi-menu__button{padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-pi-menu__button{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-pi-menu__button{padding-left:calc((100vw - 100rem) / 2);padding-right:var(--stzh-space-medium)}}@media (prefers-reduced-motion: reduce){.stzh-pi-menu__button{transition:none}}.stzh-pi-menu__button:hover{color:var(--hover-button-color);background-color:var(--hover-button-background-color)}.stzh-pi-menu__button-spacer{visibility:hidden;pointer-events:none}.stzh-pi-menu__subheading{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);margin:0;padding:var(--stzh-space-small) var(--stzh-space-medium);hyphens:auto}@media screen and (min-width: 900px){.stzh-pi-menu__subheading{padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-pi-menu__subheading{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-pi-menu__subheading{padding-left:calc((100vw - 100rem) / 2 + var(--stzh-space-medium));padding-right:var(--stzh-space-medium)}}.stzh-pi-menu__content-inner{background-color:var(--content-background);overflow-y:hidden}.stzh-pi-menu__button-text{flex-grow:1;padding-left:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-pi-menu__button-text{padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1600px){.stzh-pi-menu__button-text{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}}.stzh-pi-menu__button-icon,.stzh-pi-menu__button-icon-in-menu{--size:var(--trigger-size);transition-property:transform, color;transition-duration:500ms;color:var(--trigger-color)}@media (prefers-reduced-motion: reduce){.stzh-pi-menu__button-icon,.stzh-pi-menu__button-icon-in-menu{transition:none}}.stzh-pi-menu__button-icon-in-menu{--size:var(--icon-size);color:var(--stzh-color-black);margin-left:auto}.stzh-pi-menu__button-icon-in-menu:hover{color:var(--stzh-color-primary70)}@media screen and (min-width: 900px){.stzh-pi-menu__button-icon-in-menu{display:none}}.stzh-pi-menu__sub-menu{display:flex;padding-right:var(--stzh-space-medium);align-items:center}@media screen and (min-width: 900px){.stzh-pi-menu__sub-menu{padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1600px){.stzh-pi-menu__sub-menu{padding-right:var(--stzh-space-medium)}}.stzh-pi-menu__button:hover .stzh-pi-menu__button-icon{color:var(--hover-trigger-color)}.stzh-pi-menu__button:hover .stzh-pi-menu__button-icon.is-default::before,.stzh-pi-menu__button:hover .stzh-pi-menu__button-icon.is-default::after{background-color:var(--hover-trigger-color)}.stzh-pi-menu__content{height:calc(100vh - 4rem);width:100%}@media print{.stzh-pi-menu__content{height:auto !important;overflow:visible !important;display:block !important}}.stzh-pi-menu stzh-details .stzh-details--is-open .stzh-pi-menu__button-icon-in-menu{transform:rotate(180deg)}.stzh-pi-menu stzh-details .stzh-details__content-inner{padding-top:var(--stzh-space-none)}.stzh-pi-menu__nav{padding-bottom:var(--stzh-space-xlarge);padding-left:var(--stzh-space-none)}.stzh-pi-menu__nav-list{list-style:none;margin-block-start:0;margin-block-end:0;padding-inline-start:0}@media screen and (min-width: 900px){.stzh-pi-menu__nav-list.is-level-2{padding-bottom:var(--stzh-space-small)}}.stzh-pi-menu__nav-item{display:block;padding-top:var(--stzh-space-xxsmall);padding-right:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xxsmall);padding-top:var(--stzh-space-xxsmall);padding-right:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xxsmall);padding-left:var(--padding-left);text-decoration:none;color:var(--stzh-color-black)}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 600px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 600px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-bottom:var(--stzh-space-small)}}.stzh-pi-menu__nav-item:hover{color:var(--stzh-color-primary70)}.stzh-pi-menu__nav-item.active{background-color:var(--stzh-color-primary30)}.stzh-pi-menu__nav-item.is-level-1{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);padding:var(--stzh-space-small) var(--stzh-space-medium)}@media screen and (max-width: 899px){.stzh-pi-menu__nav-item.is-level-1{height:2.75rem;align-content:center}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item.is-level-1{padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1600px){.stzh-pi-menu__nav-item.is-level-1{padding-left:calc((100vw - 100rem) / 2 + var(--stzh-space-medium));padding-right:var(--stzh-space-medium)}}.stzh-pi-menu__nav-item.is-level-2{line-height:var(--stzh-space-xlarge);padding:var(--stzh-space-xsmall) var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item.is-level-2{padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1600px){.stzh-pi-menu__nav-item.is-level-2{padding-left:calc((100vw - 100rem) / 2 + var(--stzh-space-xxlarge));padding-right:var(--stzh-space-xxlarge)}}.stzh-pi-menu__button-space-helper{visibility:hidden;pointer-events:none}.stzh-pi-menu--is-open .stzh-pi-menu__button-icon{transform:rotate(180deg)}.stzh-pi-menu--is-open .stzh-pi-menu__content-inner{overflow-y:auto;height:calc(100vh - 4rem)}";
 const StzhPiMenuStyle0 = stzhPiMenuCss;
 
 const ANIMATION_SHOW = {
@@ -259,7 +259,7 @@ const StzhPiMenu = class {
         // Screens medium, large and ultra
         const wideScreens = `${this.entangledMenuSize}px`;
         const menuWidth = this.open ? (this.isMedium ? wideScreens : narrowScreens) : this.isMedium ? wideScreens : closed;
-        return (h(Host, { key: 'f8b2a64582df45c8f125c3b0b41fe9f4d72ec6e3', tabindex: this.rootTabindex, onFocus: this.onRootFocus }, h("div", { key: '6d91d3726087d07be15d6aae92744934d4625332', class: "stzh-pi-menu-positioner" }, h("div", { key: '2e9e4f99be510acf7dd7c7e3d2ec3fc41b8c6580', class: classes, style: { width: menuWidth } }, h("div", { key: '275e750ac7ff5a0c3c341aba864bf40d11a1a80f', class: backdropClasses, onClick: this.handleBackdropClick }), h(Heading, { key: '58e00809ae1ed9b03459b915411dba1ae64935e7', class: "stzh-pi-menu__heading", onClick: this.handleHeaderClick }, h("button", { key: 'e9e5da54d955b7fcecc6fab3d2a30f18fbbdd57c', ref: el => (this.buttonElement = el), class: "stzh-pi-menu__button", "aria-expanded": `${this.open ? "true" : "false"}`, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { key: '9a291dfdc959bb51d52078e393b9b244ab3b00d3', class: "stzh-pi-menu__button-text" }, this.heading), h("stzh-icon", { key: 'd9857c53ba80eadbaa361e8481090a374f0cac7a', name: "angle-down", class: "stzh-pi-menu__button-icon" }))), h("div", { key: 'a1ac8833c9e0da632a3562a4158638674170dbd5', id: `${this.piMenuId}-content`, ref: el => (this.bodyElement = el), class: "stzh-pi-menu__content", "aria-labelledby": `${this.piMenuId}-header`, role: "region" }, h("div", { key: 'e61224ef67247a17903e17641c4e9bd47e50d56b', class: "stzh-pi-menu__content-inner" }, h("nav", { key: '02148b9b7835b346647290df6eedb04fcef9d1c2', class: "stzh-pi-menu__nav", "aria-label": this.localization.menuLabel }, this.subheading && h("p", { key: '70b7a60a240b0614244aba0f85a323566c2739f0', class: "stzh-pi-menu__subheading" }, this.subheading), h("ul", { key: '1dc8ef72f010b19f93ef42786663d097c58a2a7e', class: "stzh-pi-menu__nav-list is-level-1" }, this._menuItems.map((item, index) => (h("li", { class: "stzh-pi-menu__nav-list-item" }, this.isMedium || this.isLarge || this.isUltra ? (h("div", null, this.setSubMenuHeader(item), this.setSubMenuItems(item))) : (h("stzh-details", { open: index === 0 }, this.setSubMenuHeader(item), h("div", { slot: "content" }, this.setSubMenuItems(item)))))))))))), h("button", { key: 'd259bf2a875cbb61909a6f6fb82fd31979c55545', class: "stzh-pi-menu__button stzh-pi-menu__button-space-helper", "aria-hidden": "true", type: "button" }, h("span", { key: '15d3be269c621e14a65c35da1ad1dd2c87a91d92', class: "stzh-pi-menu__button-text" }, h("span", { key: '962a97062b0ca6f24980c42daccae70d61369d83', class: "stzh-pi-menu__heading-text" }, this.heading)), h("stzh-icon", { key: 'a7f89b1cabf65ed4f740de036bd4bf8c460c72ff', name: "angle-down", class: "stzh-pi-menu__button-icon" })))));
+        return (h(Host, { key: '4a41dfcd7683f6705a508f0916f9c3f7789563b9', tabindex: this.rootTabindex, onFocus: this.onRootFocus }, h("div", { key: '2d7b0638148fa25233e49047a68c11b2a798bd16', class: "stzh-pi-menu-positioner" }, h("div", { key: '6a10a835713b348acc58de50656588bed75ab8af', class: classes, style: { width: menuWidth } }, h("div", { key: '9a113878c7d0b2141b8b32f69a5a6ff06766c026', class: backdropClasses, onClick: this.handleBackdropClick }), h(Heading, { key: '62ba6a3628903ee0917b0fe4de30abfd5ffd6c7f', class: "stzh-pi-menu__heading", onClick: this.handleHeaderClick }, h("button", { key: 'd97dc770a1e6e336f0da219c46fce371a85e0344', ref: el => (this.buttonElement = el), class: "stzh-pi-menu__button", "aria-expanded": `${this.open ? "true" : "false"}`, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { key: '7903e59143a9aa8e3ddbd506c7ab2e3d0f5d7908', class: "stzh-pi-menu__button-text" }, this.heading), h("stzh-icon", { key: 'b3aea4c0367724c7932b5809f7c16dc98cdd969b', name: "angle-down", class: "stzh-pi-menu__button-icon" }))), h("div", { key: '5598323cd7c6a02f562d4d992effbdabe5e63ef5', id: `${this.piMenuId}-content`, ref: el => (this.bodyElement = el), class: "stzh-pi-menu__content", "aria-labelledby": `${this.piMenuId}-header`, role: "region" }, h("div", { key: 'f4b7db6738a5505a08ad70fca33bae6446c06e9f', class: "stzh-pi-menu__content-inner" }, h("nav", { key: '34fb0b913daf8b6bf420e1b1403049613422f02a', class: "stzh-pi-menu__nav", "aria-label": this.localization.menuLabel }, this.subheading && h("p", { key: 'bff84f745a2fd5760de654b3b45559503e587439', class: "stzh-pi-menu__subheading" }, this.subheading), h("ul", { key: '9a305c8cc16ebf5dae535b1aa96200f9a0a8f1ee', class: "stzh-pi-menu__nav-list is-level-1" }, this._menuItems.map((item, index) => (h("li", { class: "stzh-pi-menu__nav-list-item" }, this.isMedium || this.isLarge || this.isUltra ? (h("div", null, this.setSubMenuHeader(item), this.setSubMenuItems(item))) : (h("stzh-details", { open: index === 0 }, this.setSubMenuHeader(item), h("div", { slot: "content" }, this.setSubMenuItems(item)))))))))))), h("button", { key: '82c2faf25baed08281a04cfce41a2b3595da213a', class: "stzh-pi-menu__button stzh-pi-menu__button-space-helper", "aria-hidden": "true", type: "button" }, h("span", { key: '168b13fa86ee14f319b57d27fd2317462e19c0f1', class: "stzh-pi-menu__button-text" }, h("span", { key: 'e02805291546e7fde2f4fd5040797c10bb64e37e', class: "stzh-pi-menu__heading-text" }, this.heading)), h("stzh-icon", { key: '6264a9efd0df0882d06cd18b2e094b591448c574', name: "angle-down", class: "stzh-pi-menu__button-icon" })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-pi-menu.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-pi-menu.entry.js","mappings":"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","names":[],"sources":["src/components/CMS/stzh-pi-menu/stzh-pi-menu.scss?tag=stzh-pi-menu&encapsulation=shadow","src/components/CMS/stzh-pi-menu/stzh-pi-menu.tsx"],"sourcesContent":["/**\n * @prop --stzh-pi-menu-padding-left\n */\n\n:host {\n  --padding-left: var(--stzh-pi-menu-padding-left, #{$containerMargin});\n  --trigger-size: #{iconSize(large)};\n  --trigger-color: #{$colorBlack};\n  --content-background: #{$colorPrimary20};\n  --icon-size: #{iconSize()};\n  --button-color: #{$colorBlack};\n  --button-background-color: #{$colorPrimary30};\n\n  --hover-button-color: var(--button-color);\n  --hover-button-background-color: #{$colorPrimary40};\n  --hover-trigger-color: var(--trigger-color);\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  @include highContrast() {\n    --trigger-color: CanvasText;\n\n    --hover-trigger-color: CanvasText;\n  }\n}\n\n.stzh-pi-menu {\n  height: 100%;\n  transition: width 0.15s ease;\n  width: 100%;\n  z-index: 1;\n  position: absolute;\n\n  /* Scrollbar styling */\n\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--stzh-color-primary40);\n  }\n\n  &::-webkit-scrollbar-track {\n    background: var(--content-background);\n  }\n\n  scrollbar-color: var(--stzh-color-primary40) var(--content-background);\n\n  &--fixed {\n    position: fixed;\n    top: 0;\n    height: auto;\n    bottom: 0;\n  }\n\n  &__heading {\n    margin: 0;\n    position: sticky;\n    top: 0;\n  }\n\n  &__backdrop {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    width: 0;\n    height: 0;\n    background-color: $colorBlack40op;\n    opacity: 0;\n    transition: opacity $baseTransitionAnimationSpeed;\n    pointer-events: none;\n\n    &--visible {\n      width: 100vw;\n      height: 100vh;\n      opacity: 1;\n      pointer-events: auto;\n    }\n  }\n\n  &__button {\n    @include fontSize(\"centi\");\n    @include font(\"heavy\");\n    padding-left: space(\"none\");\n    padding-right: space(\"medium\");\n\n    padding-top: space(\"none\");\n    padding-bottom: space(\"none\");\n\n    width: 100%;\n    min-height: space(\"xbig\");\n    appearance: none;\n    display: flex;\n    align-items: center;\n    gap: var(--stzh-space-xsmall);\n    color: var(--button-color);\n    background-color: var(--button-background-color);\n    text-align: left;\n    border: none;\n    transition-property: background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    cursor: pointer;\n    @include mq(\"medium\") {\n      padding-right: space(\"small\");\n    }\n    @include mq($from: large) {\n      @include fontSize(\"deci\");\n      @include fontSize(\"deci\");\n    }\n    @include mq($from: ultra) {\n      padding-left: calc(((100vw - #{map-get($breakpoints, \"ultra\")})) / 2);\n      padding-right: space(\"medium\");\n    }\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n\n    &:hover {\n      color: var(--hover-button-color);\n      background-color: var(--hover-button-background-color);\n    }\n  }\n\n  &__button-spacer {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  &__subheading {\n    @include fontSize(\"centi\");\n    @include font(\"heavy\");\n    @include fontSize(\"centi\");\n    @include font(\"heavy\");\n    margin: 0;\n    padding: space(\"small\") space(\"medium\");\n    hyphens: auto;\n    @include mq($from: medium) {\n      padding-left: space(\"small\");\n      padding-right: space(\"small\");\n    }\n\n    @include mq($from: large) {\n      @include fontSize(\"deci\");\n    }\n\n    @include mq($from: ultra) {\n      padding-left: calc(\n        (((100vw - #{map-get($breakpoints, \"ultra\")})) / 2) + space(\"medium\")\n      );\n      padding-right: space(\"medium\");\n    }\n  }\n\n  &__content-inner {\n    background-color: var(--content-background);\n    overflow-y: hidden;\n  }\n\n  &__button-text {\n    flex-grow: 1;\n    padding-left: space(\"medium\");\n\n    @include mq($from: medium) {\n      padding-left: space(\"small\");\n      padding-right: space(\"small\");\n    }\n    @include mq($from: ultra) {\n      padding-left: space(\"medium\");\n      padding-right: space(\"medium\");\n    }\n  }\n\n  &__button-icon,\n  &__button-icon-in-menu {\n    --size: var(--trigger-size);\n\n    transition-property: transform, color;\n    transition-duration: 500ms;\n    color: var(--trigger-color);\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &__button-icon-in-menu {\n    --size: var(--icon-size);\n    color: var(--stzh-color-black);\n    margin-left: auto;\n\n    &:hover {\n      color: var(--stzh-color-primary70);\n    }\n    @include mq(\"medium\") {\n      display: none;\n    }\n  }\n  &__sub-menu {\n    display: flex;\n    padding-right: space(\"medium\");\n    align-items: center;\n\n    @include mq($from: medium) {\n      padding-right: space(\"small\");\n    }\n    @include mq($from: ultra) {\n      padding-right: space(\"medium\");\n    }\n  }\n\n  &__button:hover &__button-icon {\n    &.is-default {\n      &::before,\n      &::after {\n        background-color: var(--hover-trigger-color);\n      }\n    }\n\n    color: var(--hover-trigger-color);\n  }\n\n  &__content {\n    height: calc(100vh - 64px);\n    width: 100%;\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  stzh-details {\n    .stzh-details--is-open {\n      .stzh-pi-menu__button-icon-in-menu {\n        transform: rotate(180deg);\n      }\n    }\n    .stzh-details__content-inner {\n      padding-top: space(\"none\");\n    }\n  }\n  /* Nav */\n\n  &__nav {\n    padding-bottom: var(--stzh-space-xlarge);\n    padding-left: space(\"none\");\n  }\n\n  &__nav-list {\n    list-style: none;\n    margin-block-start: 0;\n    margin-block-end: 0;\n    padding-inline-start: 0;\n  }\n\n  &__nav-list.is-level-2 {\n    @include mq($from: medium) {\n      padding-bottom: space(\"small\");\n    }\n  }\n\n  &__nav-item {\n    display: block;\n    @include spaceCurve(\"padding-top\", \"tiny\");\n    @include spaceCurve(\"padding-right\", \"regular\");\n    @include spaceCurve(\"padding-bottom\", \"tiny\");\n    @include spaceCurve(\"padding-top\", \"tiny\");\n    @include spaceCurve(\"padding-right\", \"regular\");\n    @include spaceCurve(\"padding-bottom\", \"tiny\");\n    padding-left: var(--padding-left);\n    text-decoration: none;\n    color: var(--stzh-color-black);\n\n    &:hover {\n      color: var(--stzh-color-primary70);\n    }\n  }\n\n  &__nav-item.active {\n    background-color: var(--stzh-color-primary30);\n  }\n\n  &__nav-item.is-level-1 {\n    @include font(\"heavy\");\n\n    padding: space(\"small\") space(\"medium\");\n    @include mq($to: medium) {\n      height: 44px;\n      align-content: center;\n    }\n    @include mq($from: medium) {\n      padding-left: space(\"small\");\n      padding-right: space(\"small\");\n    }\n    @include mq($from: ultra) {\n      padding-left: calc(\n        (((100vw - #{map-get($breakpoints, \"ultra\")})) / 2) + space(\"medium\")\n      );\n      padding-right: space(\"medium\");\n    }\n  }\n\n  &__nav-item.is-level-2 {\n    line-height: space(\"xlarge\");\n    padding: space(\"xsmall\") space(\"xxlarge\");\n\n    @include mq($from: medium) {\n      padding-left: space(\"xlarge\");\n      padding-right: space(\"xlarge\");\n    }\n    @include mq($from: ultra) {\n      padding-left: calc(\n        (((100vw - #{map-get($breakpoints, \"ultra\")})) / 2) + space(\"xxlarge\")\n      );\n      padding-right: space(\"xxlarge\");\n    }\n  }\n\n  &__button-space-helper {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  /* Open */\n\n  &--is-open {\n    .stzh-pi-menu__button-icon {\n      transform: rotate(180deg);\n    }\n\n    .stzh-pi-menu__content-inner {\n      overflow-y: auto;\n      height: calc(100vh - 64px);\n\n      // @include mq($from: small) {\n      //   height: calc(100vh - 72px);\n      // }\n\n      // @include mq($from: medium) {\n      //   height: calc(100vh - 80px);\n      // }\n\n      // @include mq($from: medium) {\n      //   height: calc(100vh - 96px);\n      // }\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhPiMenuClosedEvent,\n  StzhPiMenuCloseEvent,\n  StzhPiMenuItemClickEvent,\n  StzhPiMenuOpenedEvent,\n  StzhPiMenuOpenEvent,\n  StzhPiPagetitleMenuItem,\n} from \"../../../index\";\n\nimport { waitForEvent } from \"../../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../../utils/animation-utils\";\nimport { StzhPiMenuLocalization } from \"./stzh-pi-menu.localization\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../../utils/media-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"100%\", opacity: \"1\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"100%\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nlet accordionItemCounter = 0;\n\n// const CLASS_BODY_OPEN = \"stzh-header-open\";\n\n@Component({\n  tag: \"stzh-pi-menu\",\n  styleUrl: \"stzh-pi-menu.scss\",\n  shadow: true,\n})\nexport class StzhPiMenu {\n  /** Translation strings */\n  @Prop() localization: StzhPiMenuLocalization;\n\n  /** Menu navigation items */\n  @Prop() menuItems: StzhPiPagetitleMenuItem[] | string = [];\n  private _menuItems: StzhPiPagetitleMenuItem[];\n\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Heading title */\n  @Prop() heading: string = \"\";\n\n  /** Heading title */\n  @Prop() subheading: string = \"\";\n\n  /** Heading level, for accessibility, no visual impact */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** If the menu is fixed (when otherwise no longer in viewport) or statically positioned.  */\n  @State() menuIsFixed: boolean = false;\n\n  /** Used to sync width of stzh-pi-menu-positioner (in-flow element) with stzh-pi-menu (gets taken out of flow with menuIsFixed, but must stay the same width) */\n  @State() entangledMenuSize: number = 20;\n\n  @State() showBackdrop: boolean = false;\n\n  /** Break points for displays */\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n  @State() isLarge: boolean;\n  @State() isUltra: boolean;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `heading` prop.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhPiMenuElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhPiMenuOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhPiMenuOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhPiMenuCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhPiMenuClosedEvent>;\n\n  /** Metanav item click event */\n  @Event() stzhMenuItemClick: EventEmitter<StzhPiMenuItemClickEvent>;\n\n  @Watch(\"menuItems\")\n  menuItemsWatcher(newValue: StzhPiPagetitleMenuItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._menuItems = JSON.parse(newValue);\n    } else {\n      this._menuItems = newValue;\n    }\n\n    this._menuItems = this._menuItems.map((menuItem, index) => ({\n      id: `submenu-${index}`,\n      ...menuItem,\n    }));\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.bodyElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-pi-menu\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_SHOW.options,\n      );\n\n      // this.bodyElement.style.height = `calc(100% - ${this.headingElement.clientHeight}px)`;\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-pi-menu\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-pi-menu\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_HIDE.options,\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-pi-menu\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  /** Show piMenu item content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    // this.menuIsFixed && document.body.classList.add(CLASS_BODY_OPEN);\n    if (!this.isMedium && !this.isLarge && !this.isUltra) {\n      this.showBackdrop = true;\n    }\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    // document.body.classList.remove(CLASS_BODY_OPEN);\n    this.showBackdrop = false;\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle piMenu item content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  @State() rootTabindex: number = 0;\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private buttonElement: HTMLButtonElement;\n  private piMenuId: string;\n  private focusedByInput: boolean = false;\n\n  private handleHeaderClick = () => {\n    this.toggle();\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.buttonElement.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private handleMenuItemClick = (event: MouseEvent) => {\n    this.stzhMenuItemClick.emit({\n      component: \"stzh-pi-menu\",\n      originalEvent: event,\n    });\n  };\n\n  private handleBackdropClick = async () => {\n    this.showBackdrop = false;\n    this.hide();\n  };\n\n  private setEntangledMenuSize = () => {\n    const menuEl = this.element.shadowRoot.querySelector(\".stzh-pi-menu-positioner\");\n    this.entangledMenuSize = menuEl.getBoundingClientRect().width;\n  };\n\n  private menuObserver: IntersectionObserver;\n  private resizeTimeout: number;\n\n  private handleMenuIntersection = (entries: IntersectionObserverEntry[]) => {\n    entries.forEach(entry => {\n      if (entry.intersectionRatio < 1 && entry.boundingClientRect.top < 20) {\n        this.menuIsFixed = true;\n      } else {\n        this.menuIsFixed = false;\n      }\n    });\n  };\n\n  private setSubMenuHeader(item) {\n    return (\n      <div class=\"stzh-pi-menu__sub-menu\">\n        <a\n          href={item.href}\n          onClick={(e: MouseEvent) => this.handleMenuItemClick(e)}\n          class={{\n            \"stzh-pi-menu__nav-item\": true,\n            \"is-level-1\": true,\n            active: item.active,\n          }}\n        >\n          {item.label}\n        </a>{\" \"}\n        {item.items?.length ? <stzh-icon name=\"angle-down\" class=\"stzh-pi-menu__button-icon-in-menu\"></stzh-icon> : \"\"}\n      </div>\n    );\n  }\n  private setSubMenuItems(item) {\n    if (!item.items?.length) return null;\n    return (\n      <ul id={item.id} class=\"stzh-pi-menu__nav-list is-level-2\">\n        {item.items.map(item => (\n          <li class=\"stzh-pi-menu__nav-list-item\">\n            <a\n              href={item.href}\n              onClick={(e: MouseEvent) => this.handleMenuItemClick(e)}\n              class={{\n                \"stzh-pi-menu__nav-item\": true,\n                \"is-level-2\": true,\n                active: item.active,\n              }}\n            >\n              {item.label}\n            </a>\n          </li>\n        ))}\n      </ul>\n    );\n  }\n\n  private mediaChangeHandler = () => {\n    // update a state for example to update component template depending on breakpoint state\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n    this.isLarge = media(\"large\").matches;\n    this.isUltra = media(\"ultra\").matches;\n    if (this.isMedium || this.isLarge || this.isUltra) {\n      this.showBackdrop = false;\n      this.open = true;\n    } else {\n      if (this.open) {\n        this.showBackdrop = true;\n      }\n    }\n  };\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  async componentWillLoad() {\n    this.piMenuId = `stzh-pi-menu-${accordionItemCounter++}`;\n    this.menuItemsWatcher(this.menuItems);\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pi-pagetitle\");\n    }\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n\n    this.menuObserver = new IntersectionObserver(this.handleMenuIntersection, { rootMargin: \"0px\", threshold: 1 });\n    const menuEl = this.element.shadowRoot.querySelector(\".stzh-pi-menu-positioner\");\n    this.menuObserver.observe(menuEl);\n    this.setEntangledMenuSize();\n    this.mediaChangeHandler();\n\n    // Open status for medium, large and ultra screens\n    if (this.isMedium || this.isLarge || this.isUltra) {\n      this.open = true;\n    } else {\n      this.open = false;\n    }\n\n    window.addEventListener(\n      \"resize\",\n      () => {\n        if (this.resizeTimeout) {\n          window.cancelAnimationFrame(this.resizeTimeout);\n        }\n        this.resizeTimeout = window.requestAnimationFrame(() => {\n          this.setEntangledMenuSize();\n        });\n      },\n      false,\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.menuObserver) {\n      this.menuObserver.disconnect();\n    }\n    window.removeEventListener(\"resize\", () => {\n      if (this.resizeTimeout) {\n        window.cancelAnimationFrame(this.resizeTimeout);\n      }\n    });\n    removeMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const Heading = `h${this.headingLevel}`;\n    const classes = {\n      \"stzh-pi-menu\": true,\n      \"stzh-pi-menu--is-open\": this.open,\n      \"stzh-pi-menu--fixed\": this.menuIsFixed,\n    };\n\n    const backdropClasses = {\n      \"stzh-pi-menu__backdrop\": true,\n      \"stzh-pi-menu__backdrop--visible\": this.showBackdrop,\n    };\n\n    const closed = \"8.0625rem\";\n\n    // Screens micro and small\n    const narrowScreens = \"19.6875rem\";\n\n    // Screens medium, large and ultra\n    const wideScreens = `${this.entangledMenuSize}px`;\n\n    const menuWidth = this.open ? (this.isMedium ? wideScreens : narrowScreens) : this.isMedium ? wideScreens : closed;\n\n    return (\n      <Host tabindex={this.rootTabindex} onFocus={this.onRootFocus}>\n        <div class=\"stzh-pi-menu-positioner\">\n          <div class={classes} style={{ width: menuWidth }}>\n            <div class={backdropClasses} onClick={this.handleBackdropClick}></div>\n\n            {/* Header of the menu */}\n            <Heading class=\"stzh-pi-menu__heading\" onClick={this.handleHeaderClick}>\n              <button\n                ref={el => (this.buttonElement = el as HTMLButtonElement)}\n                class=\"stzh-pi-menu__button\"\n                aria-expanded={`${this.open ? \"true\" : \"false\"}`}\n                type=\"button\"\n                s-object-id={this.analyticsId || this.heading}\n              >\n                <span class=\"stzh-pi-menu__button-text\">{this.heading}</span>\n                <stzh-icon name=\"angle-down\" class=\"stzh-pi-menu__button-icon\"></stzh-icon>\n              </button>\n            </Heading>\n\n            {/* Content of the menu */}\n            <div\n              id={`${this.piMenuId}-content`}\n              ref={el => (this.bodyElement = el as HTMLDivElement)}\n              class=\"stzh-pi-menu__content\"\n              aria-labelledby={`${this.piMenuId}-header`}\n              role=\"region\"\n            >\n              <div class=\"stzh-pi-menu__content-inner\">\n                <nav class=\"stzh-pi-menu__nav\" aria-label={this.localization.menuLabel}>\n                  {this.subheading && <p class=\"stzh-pi-menu__subheading\">{this.subheading}</p>}\n                  <ul class=\"stzh-pi-menu__nav-list is-level-1\">\n                    {this._menuItems.map((item, index) => (\n                      <li class=\"stzh-pi-menu__nav-list-item\">\n                        {this.isMedium || this.isLarge || this.isUltra ? (\n                          <div>\n                            {this.setSubMenuHeader(item)}\n                            {this.setSubMenuItems(item)}\n                          </div>\n                        ) : (\n                          <stzh-details open={index === 0}>\n                            {this.setSubMenuHeader(item)}\n                            <div slot=\"content\">{this.setSubMenuItems(item)}</div>\n                          </stzh-details>\n                        )}\n                      </li>\n                    ))}\n                  </ul>\n                </nav>\n              </div>\n            </div>\n          </div>\n          <button class=\"stzh-pi-menu__button stzh-pi-menu__button-space-helper\" aria-hidden=\"true\" type=\"button\">\n            <span class=\"stzh-pi-menu__button-text\">\n              <span class=\"stzh-pi-menu__heading-text\">{this.heading}</span>\n            </span>\n            <stzh-icon name=\"angle-down\" class=\"stzh-pi-menu__button-icon\"></stzh-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-pi-menu.entry.js","mappings":"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","names":[],"sources":["src/components/CMS/stzh-pi-menu/stzh-pi-menu.scss?tag=stzh-pi-menu&encapsulation=shadow","src/components/CMS/stzh-pi-menu/stzh-pi-menu.tsx"],"sourcesContent":["/**\n * @prop --stzh-pi-menu-padding-left\n */\n\n:host {\n  --padding-left: var(--stzh-pi-menu-padding-left, #{$containerMargin});\n  --trigger-size: #{iconSize(large)};\n  --trigger-color: #{$colorBlack};\n  --content-background: #{$colorPrimary20};\n  --icon-size: #{iconSize()};\n  --button-color: #{$colorBlack};\n  --button-background-color: #{$colorPrimary30};\n\n  --hover-button-color: var(--button-color);\n  --hover-button-background-color: #{$colorPrimary40};\n  --hover-trigger-color: var(--trigger-color);\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  @include highContrast() {\n    --trigger-color: CanvasText;\n\n    --hover-trigger-color: CanvasText;\n  }\n}\n\n.stzh-pi-menu {\n  height: 100%;\n  transition: width 0.15s ease;\n  width: 100%;\n  z-index: 1;\n  position: absolute;\n\n  /* Scrollbar styling */\n\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--stzh-color-primary40);\n  }\n\n  &::-webkit-scrollbar-track {\n    background: var(--content-background);\n  }\n\n  scrollbar-color: var(--stzh-color-primary40) var(--content-background);\n\n  &--fixed {\n    position: fixed;\n    top: 0;\n    height: auto;\n  }\n\n  &__heading {\n    margin: 0;\n    position: sticky;\n    top: 0;\n  }\n\n  &__backdrop {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    width: 0;\n    height: 0;\n    background-color: $colorBlack40op;\n    opacity: 0;\n    transition: opacity $baseTransitionAnimationSpeed;\n    pointer-events: none;\n\n    &--visible {\n      width: 100vw;\n      height: 100vh;\n      opacity: 1;\n      pointer-events: auto;\n    }\n  }\n\n  &__button {\n    @include fontSize(\"centi\");\n    @include font(\"heavy\");\n    padding-left: space(\"none\");\n    padding-right: space(\"medium\");\n\n    padding-top: space(\"none\");\n    padding-bottom: space(\"none\");\n\n    width: 100%;\n    min-height: space(\"xbig\");\n    appearance: none;\n    display: flex;\n    align-items: center;\n    gap: var(--stzh-space-xsmall);\n    color: var(--button-color);\n    background-color: var(--button-background-color);\n    text-align: left;\n    border: none;\n    transition-property: background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    cursor: pointer;\n    @include mq(\"medium\") {\n      padding-right: space(\"small\");\n    }\n    @include mq($from: large) {\n      @include fontSize(\"deci\");\n      @include fontSize(\"deci\");\n    }\n    @include mq($from: ultra) {\n      padding-left: calc(((100vw - #{map-get($breakpoints, \"ultra\")})) / 2);\n      padding-right: space(\"medium\");\n    }\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n\n    &:hover {\n      color: var(--hover-button-color);\n      background-color: var(--hover-button-background-color);\n    }\n  }\n\n  &__button-spacer {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  &__subheading {\n    @include fontSize(\"centi\");\n    @include font(\"heavy\");\n    @include fontSize(\"centi\");\n    @include font(\"heavy\");\n    margin: 0;\n    padding: space(\"small\") space(\"medium\");\n    hyphens: auto;\n    @include mq($from: medium) {\n      padding-left: space(\"small\");\n      padding-right: space(\"small\");\n    }\n\n    @include mq($from: large) {\n      @include fontSize(\"deci\");\n    }\n\n    @include mq($from: ultra) {\n      padding-left: calc(\n        (((100vw - #{map-get($breakpoints, \"ultra\")})) / 2) + space(\"medium\")\n      );\n      padding-right: space(\"medium\");\n    }\n  }\n\n  &__content-inner {\n    background-color: var(--content-background);\n    overflow-y: hidden;\n  }\n\n  &__button-text {\n    flex-grow: 1;\n    padding-left: space(\"medium\");\n\n    @include mq($from: medium) {\n      padding-left: space(\"small\");\n      padding-right: space(\"small\");\n    }\n    @include mq($from: ultra) {\n      padding-left: space(\"medium\");\n      padding-right: space(\"medium\");\n    }\n  }\n\n  &__button-icon,\n  &__button-icon-in-menu {\n    --size: var(--trigger-size);\n\n    transition-property: transform, color;\n    transition-duration: 500ms;\n    color: var(--trigger-color);\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &__button-icon-in-menu {\n    --size: var(--icon-size);\n    color: var(--stzh-color-black);\n    margin-left: auto;\n\n    &:hover {\n      color: var(--stzh-color-primary70);\n    }\n    @include mq(\"medium\") {\n      display: none;\n    }\n  }\n  &__sub-menu {\n    display: flex;\n    padding-right: space(\"medium\");\n    align-items: center;\n\n    @include mq($from: medium) {\n      padding-right: space(\"small\");\n    }\n    @include mq($from: ultra) {\n      padding-right: space(\"medium\");\n    }\n  }\n\n  &__button:hover &__button-icon {\n    &.is-default {\n      &::before,\n      &::after {\n        background-color: var(--hover-trigger-color);\n      }\n    }\n\n    color: var(--hover-trigger-color);\n  }\n\n  &__content {\n    height: calc(100vh - 64px);\n    width: 100%;\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  stzh-details {\n    .stzh-details--is-open {\n      .stzh-pi-menu__button-icon-in-menu {\n        transform: rotate(180deg);\n      }\n    }\n    .stzh-details__content-inner {\n      padding-top: space(\"none\");\n    }\n  }\n  /* Nav */\n\n  &__nav {\n    padding-bottom: var(--stzh-space-xlarge);\n    padding-left: space(\"none\");\n  }\n\n  &__nav-list {\n    list-style: none;\n    margin-block-start: 0;\n    margin-block-end: 0;\n    padding-inline-start: 0;\n  }\n\n  &__nav-list.is-level-2 {\n    @include mq($from: medium) {\n      padding-bottom: space(\"small\");\n    }\n  }\n\n  &__nav-item {\n    display: block;\n    @include spaceCurve(\"padding-top\", \"tiny\");\n    @include spaceCurve(\"padding-right\", \"regular\");\n    @include spaceCurve(\"padding-bottom\", \"tiny\");\n    @include spaceCurve(\"padding-top\", \"tiny\");\n    @include spaceCurve(\"padding-right\", \"regular\");\n    @include spaceCurve(\"padding-bottom\", \"tiny\");\n    padding-left: var(--padding-left);\n    text-decoration: none;\n    color: var(--stzh-color-black);\n\n    &:hover {\n      color: var(--stzh-color-primary70);\n    }\n  }\n\n  &__nav-item.active {\n    background-color: var(--stzh-color-primary30);\n  }\n\n  &__nav-item.is-level-1 {\n    @include font(\"heavy\");\n\n    padding: space(\"small\") space(\"medium\");\n    @include mq($to: medium) {\n      height: 44px;\n      align-content: center;\n    }\n    @include mq($from: medium) {\n      padding-left: space(\"small\");\n      padding-right: space(\"small\");\n    }\n    @include mq($from: ultra) {\n      padding-left: calc(\n        (((100vw - #{map-get($breakpoints, \"ultra\")})) / 2) + space(\"medium\")\n      );\n      padding-right: space(\"medium\");\n    }\n  }\n\n  &__nav-item.is-level-2 {\n    line-height: space(\"xlarge\");\n    padding: space(\"xsmall\") space(\"xxlarge\");\n\n    @include mq($from: medium) {\n      padding-left: space(\"xlarge\");\n      padding-right: space(\"xlarge\");\n    }\n    @include mq($from: ultra) {\n      padding-left: calc(\n        (((100vw - #{map-get($breakpoints, \"ultra\")})) / 2) + space(\"xxlarge\")\n      );\n      padding-right: space(\"xxlarge\");\n    }\n  }\n\n  &__button-space-helper {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  /* Open */\n\n  &--is-open {\n    .stzh-pi-menu__button-icon {\n      transform: rotate(180deg);\n    }\n\n    .stzh-pi-menu__content-inner {\n      overflow-y: auto;\n      height: calc(100vh - 64px);\n\n      // @include mq($from: small) {\n      //   height: calc(100vh - 72px);\n      // }\n\n      // @include mq($from: medium) {\n      //   height: calc(100vh - 80px);\n      // }\n\n      // @include mq($from: medium) {\n      //   height: calc(100vh - 96px);\n      // }\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhPiMenuClosedEvent,\n  StzhPiMenuCloseEvent,\n  StzhPiMenuItemClickEvent,\n  StzhPiMenuOpenedEvent,\n  StzhPiMenuOpenEvent,\n  StzhPiPagetitleMenuItem,\n} from \"../../../index\";\n\nimport { waitForEvent } from \"../../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../../utils/animation-utils\";\nimport { StzhPiMenuLocalization } from \"./stzh-pi-menu.localization\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../../utils/media-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"100%\", opacity: \"1\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"100%\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nlet accordionItemCounter = 0;\n\n// const CLASS_BODY_OPEN = \"stzh-header-open\";\n\n@Component({\n  tag: \"stzh-pi-menu\",\n  styleUrl: \"stzh-pi-menu.scss\",\n  shadow: true,\n})\nexport class StzhPiMenu {\n  /** Translation strings */\n  @Prop() localization: StzhPiMenuLocalization;\n\n  /** Menu navigation items */\n  @Prop() menuItems: StzhPiPagetitleMenuItem[] | string = [];\n  private _menuItems: StzhPiPagetitleMenuItem[];\n\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Heading title */\n  @Prop() heading: string = \"\";\n\n  /** Heading title */\n  @Prop() subheading: string = \"\";\n\n  /** Heading level, for accessibility, no visual impact */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** If the menu is fixed (when otherwise no longer in viewport) or statically positioned.  */\n  @State() menuIsFixed: boolean = false;\n\n  /** Used to sync width of stzh-pi-menu-positioner (in-flow element) with stzh-pi-menu (gets taken out of flow with menuIsFixed, but must stay the same width) */\n  @State() entangledMenuSize: number = 20;\n\n  @State() showBackdrop: boolean = false;\n\n  /** Break points for displays */\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n  @State() isLarge: boolean;\n  @State() isUltra: boolean;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `heading` prop.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhPiMenuElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhPiMenuOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhPiMenuOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhPiMenuCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhPiMenuClosedEvent>;\n\n  /** Metanav item click event */\n  @Event() stzhMenuItemClick: EventEmitter<StzhPiMenuItemClickEvent>;\n\n  @Watch(\"menuItems\")\n  menuItemsWatcher(newValue: StzhPiPagetitleMenuItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._menuItems = JSON.parse(newValue);\n    } else {\n      this._menuItems = newValue;\n    }\n\n    this._menuItems = this._menuItems.map((menuItem, index) => ({\n      id: `submenu-${index}`,\n      ...menuItem,\n    }));\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.bodyElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-pi-menu\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_SHOW.options,\n      );\n\n      // this.bodyElement.style.height = `calc(100% - ${this.headingElement.clientHeight}px)`;\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-pi-menu\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-pi-menu\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_HIDE.options,\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-pi-menu\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  /** Show piMenu item content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    // this.menuIsFixed && document.body.classList.add(CLASS_BODY_OPEN);\n    if (!this.isMedium && !this.isLarge && !this.isUltra) {\n      this.showBackdrop = true;\n    }\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    // document.body.classList.remove(CLASS_BODY_OPEN);\n    this.showBackdrop = false;\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle piMenu item content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  @State() rootTabindex: number = 0;\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private buttonElement: HTMLButtonElement;\n  private piMenuId: string;\n  private focusedByInput: boolean = false;\n\n  private handleHeaderClick = () => {\n    this.toggle();\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.buttonElement.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private handleMenuItemClick = (event: MouseEvent) => {\n    this.stzhMenuItemClick.emit({\n      component: \"stzh-pi-menu\",\n      originalEvent: event,\n    });\n  };\n\n  private handleBackdropClick = async () => {\n    this.showBackdrop = false;\n    this.hide();\n  };\n\n  private setEntangledMenuSize = () => {\n    const menuEl = this.element.shadowRoot.querySelector(\".stzh-pi-menu-positioner\");\n    this.entangledMenuSize = menuEl.getBoundingClientRect().width;\n  };\n\n  private menuObserver: IntersectionObserver;\n  private resizeTimeout: number;\n\n  private handleMenuIntersection = (entries: IntersectionObserverEntry[]) => {\n    entries.forEach(entry => {\n      if (entry.intersectionRatio < 1 && entry.boundingClientRect.top < 20) {\n        this.menuIsFixed = true;\n      } else {\n        this.menuIsFixed = false;\n      }\n    });\n  };\n\n  private setSubMenuHeader(item) {\n    return (\n      <div class=\"stzh-pi-menu__sub-menu\">\n        <a\n          href={item.href}\n          onClick={(e: MouseEvent) => this.handleMenuItemClick(e)}\n          class={{\n            \"stzh-pi-menu__nav-item\": true,\n            \"is-level-1\": true,\n            active: item.active,\n          }}\n        >\n          {item.label}\n        </a>{\" \"}\n        {item.items?.length ? <stzh-icon name=\"angle-down\" class=\"stzh-pi-menu__button-icon-in-menu\"></stzh-icon> : \"\"}\n      </div>\n    );\n  }\n  private setSubMenuItems(item) {\n    if (!item.items?.length) return null;\n    return (\n      <ul id={item.id} class=\"stzh-pi-menu__nav-list is-level-2\">\n        {item.items.map(item => (\n          <li class=\"stzh-pi-menu__nav-list-item\">\n            <a\n              href={item.href}\n              onClick={(e: MouseEvent) => this.handleMenuItemClick(e)}\n              class={{\n                \"stzh-pi-menu__nav-item\": true,\n                \"is-level-2\": true,\n                active: item.active,\n              }}\n            >\n              {item.label}\n            </a>\n          </li>\n        ))}\n      </ul>\n    );\n  }\n\n  private mediaChangeHandler = () => {\n    // update a state for example to update component template depending on breakpoint state\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n    this.isLarge = media(\"large\").matches;\n    this.isUltra = media(\"ultra\").matches;\n    if (this.isMedium || this.isLarge || this.isUltra) {\n      this.showBackdrop = false;\n      this.open = true;\n    } else {\n      if (this.open) {\n        this.showBackdrop = true;\n      }\n    }\n  };\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  async componentWillLoad() {\n    this.piMenuId = `stzh-pi-menu-${accordionItemCounter++}`;\n    this.menuItemsWatcher(this.menuItems);\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pi-pagetitle\");\n    }\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n\n    this.menuObserver = new IntersectionObserver(this.handleMenuIntersection, { rootMargin: \"0px\", threshold: 1 });\n    const menuEl = this.element.shadowRoot.querySelector(\".stzh-pi-menu-positioner\");\n    this.menuObserver.observe(menuEl);\n    this.setEntangledMenuSize();\n    this.mediaChangeHandler();\n\n    // Open status for medium, large and ultra screens\n    if (this.isMedium || this.isLarge || this.isUltra) {\n      this.open = true;\n    } else {\n      this.open = false;\n    }\n\n    window.addEventListener(\n      \"resize\",\n      () => {\n        if (this.resizeTimeout) {\n          window.cancelAnimationFrame(this.resizeTimeout);\n        }\n        this.resizeTimeout = window.requestAnimationFrame(() => {\n          this.setEntangledMenuSize();\n        });\n      },\n      false,\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.menuObserver) {\n      this.menuObserver.disconnect();\n    }\n    window.removeEventListener(\"resize\", () => {\n      if (this.resizeTimeout) {\n        window.cancelAnimationFrame(this.resizeTimeout);\n      }\n    });\n    removeMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const Heading = `h${this.headingLevel}`;\n    const classes = {\n      \"stzh-pi-menu\": true,\n      \"stzh-pi-menu--is-open\": this.open,\n      \"stzh-pi-menu--fixed\": this.menuIsFixed,\n    };\n\n    const backdropClasses = {\n      \"stzh-pi-menu__backdrop\": true,\n      \"stzh-pi-menu__backdrop--visible\": this.showBackdrop,\n    };\n\n    const closed = \"8.0625rem\";\n\n    // Screens micro and small\n    const narrowScreens = \"19.6875rem\";\n\n    // Screens medium, large and ultra\n    const wideScreens = `${this.entangledMenuSize}px`;\n\n    const menuWidth = this.open ? (this.isMedium ? wideScreens : narrowScreens) : this.isMedium ? wideScreens : closed;\n\n    return (\n      <Host tabindex={this.rootTabindex} onFocus={this.onRootFocus}>\n        <div class=\"stzh-pi-menu-positioner\">\n          <div class={classes} style={{ width: menuWidth }}>\n            <div class={backdropClasses} onClick={this.handleBackdropClick}></div>\n\n            {/* Header of the menu */}\n            <Heading class=\"stzh-pi-menu__heading\" onClick={this.handleHeaderClick}>\n              <button\n                ref={el => (this.buttonElement = el as HTMLButtonElement)}\n                class=\"stzh-pi-menu__button\"\n                aria-expanded={`${this.open ? \"true\" : \"false\"}`}\n                type=\"button\"\n                s-object-id={this.analyticsId || this.heading}\n              >\n                <span class=\"stzh-pi-menu__button-text\">{this.heading}</span>\n                <stzh-icon name=\"angle-down\" class=\"stzh-pi-menu__button-icon\"></stzh-icon>\n              </button>\n            </Heading>\n\n            {/* Content of the menu */}\n            <div\n              id={`${this.piMenuId}-content`}\n              ref={el => (this.bodyElement = el as HTMLDivElement)}\n              class=\"stzh-pi-menu__content\"\n              aria-labelledby={`${this.piMenuId}-header`}\n              role=\"region\"\n            >\n              <div class=\"stzh-pi-menu__content-inner\">\n                <nav class=\"stzh-pi-menu__nav\" aria-label={this.localization.menuLabel}>\n                  {this.subheading && <p class=\"stzh-pi-menu__subheading\">{this.subheading}</p>}\n                  <ul class=\"stzh-pi-menu__nav-list is-level-1\">\n                    {this._menuItems.map((item, index) => (\n                      <li class=\"stzh-pi-menu__nav-list-item\">\n                        {this.isMedium || this.isLarge || this.isUltra ? (\n                          <div>\n                            {this.setSubMenuHeader(item)}\n                            {this.setSubMenuItems(item)}\n                          </div>\n                        ) : (\n                          <stzh-details open={index === 0}>\n                            {this.setSubMenuHeader(item)}\n                            <div slot=\"content\">{this.setSubMenuItems(item)}</div>\n                          </stzh-details>\n                        )}\n                      </li>\n                    ))}\n                  </ul>\n                </nav>\n              </div>\n            </div>\n          </div>\n          <button class=\"stzh-pi-menu__button stzh-pi-menu__button-space-helper\" aria-hidden=\"true\" type=\"button\">\n            <span class=\"stzh-pi-menu__button-text\">\n              <span class=\"stzh-pi-menu__heading-text\">{this.heading}</span>\n            </span>\n            <stzh-icon name=\"angle-down\" class=\"stzh-pi-menu__button-icon\"></stzh-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}