npm - @oiz/stzh-components - Versions diffs - 4.9.0-beta2 → 4.9.0-beta4 - Mend

@oiz/stzh-components 4.9.0-beta2 → 4.9.0-beta4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1424) hide show

package/dist/components/p-DFpDs4lN.js ADDED Viewed

@@ -0,0 +1,828 @@
+import { p as proxyCustomElement, H, d as createEvent, i as readTask, w as writeTask, h, F as Fragment, e as Host, t as transformTag } from './p-BOU3cRYl.js';
+import { h as hasSlot } from './p-CN5apKPb.js';
+import { m as media } from './p-CUGRmgip.js';
+import { t as tabbable, c as createFocusTrap } from './p-CBUfcdIy.js';
+import { c as createBaseFocusTrapOptions } from './p-BzugsqyR.js';
+import { d as defineCustomElement$8 } from './p-DtYGJu0r.js';
+import { d as defineCustomElement$7 } from './p-6ax-mKBx.js';
+import { d as defineCustomElement$6 } from './p-8LohUgRI.js';
+import { d as defineCustomElement$5 } from './p-DkuigYKB.js';
+import { d as defineCustomElement$4 } from './p-BPrkSjMz.js';
+import { d as defineCustomElement$3 } from './p-Cyr0PTPI.js';
+import { d as defineCustomElement$2 } from './p-D_hdie7I.js';
+import { d as defineCustomElement$1 } from './p-Bk_CuXEU.js';
+const stzhHeaderCss = () => `.sc-stzh-header-h{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}[hidden].sc-stzh-header-h,[stzh-hidden].sc-stzh-header-h{display:none}.sc-stzh-header-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-header-h *.sc-stzh-header,.sc-stzh-header-h *.sc-stzh-header::before,.sc-stzh-header-h *.sc-stzh-header::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)}.sc-stzh-header-h .has-focus.sc-stzh-header{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-header-h .stzh-fylingfocus-focused.sc-stzh-header{outline-style:none !important}.sc-stzh-header-h .stzh-fylingfocus-focused.sc-stzh-header::-moz-focus-inner{border:0 !important}.sc-stzh-header-h{--logo-width:var(--stzh-header-logo-width, auto);--logo-height:100%;--logobar-background-color:var(--stzh-header-logobar-background-color);--metabar-background-color:var(
+    --stzh-header-metabar-background-color,
+    var(--stzh-color-coolgrey10)
+  );--menu-background-color:var(
+    --stzh-header-menu-background-color,
+    var(--stzh-color-secondary30)
+  );--menu-list-item-background-hover:var(
+    --stzh-header-menu-list-item-background-hover,
+    var(--stzh-color-secondary40)
+  );--menu-list-item-background-level2:var(
+    --stzh-header-menu-list-item-background-level2,
+    var(--stzh-color-secondary20)
+  );--menu-list-item-background-level2-hover:var(
+    --stzh-header-menu-list-item-background-level2-hover,
+    var(--stzh-color-secondary10)
+  );--menu-item-color:var(--stzh-header-menu-item-color, var(--stzh-color-primary70));--metanav-item-color:var(--stzh-header-metanav-item-color, var(--stzh-color-grey90))}@media print{.sc-stzh-header-h{display:none}}[logo-type=pkzh].sc-stzh-header-h,[logo-type=uvz].sc-stzh-header-h,[logo-type=mkz].sc-stzh-header-h{--logo-height:1.9375rem}@media screen and (min-width: 900px){[logo-type=pkzh].sc-stzh-header-h,[logo-type=uvz].sc-stzh-header-h,[logo-type=mkz].sc-stzh-header-h{--logo-height:2.1875rem}}@media screen and (min-width: 1600px){[logo-type=pkzh].sc-stzh-header-h,[logo-type=uvz].sc-stzh-header-h,[logo-type=mkz].sc-stzh-header-h{--logo-height:3.3125rem}}[logo-type=vbz].sc-stzh-header-h{--logo-height:1.8125rem}@media screen and (min-width: 900px){[logo-type=vbz].sc-stzh-header-h{--logo-height:3.3125rem}}@media screen and (min-width: 1600px){[logo-type=vbz].sc-stzh-header-h{--logo-height:3.75rem}}.sc-stzh-header-h[logo-type=vbz].sc-stzh-header-s>[slot=logo],.sc-stzh-header-h[logo-type=vbz] .sc-stzh-header-s>[slot=logo]{align-self:center}.sc-stzh-header-h.sc-stzh-header-s>[slot=logo],.sc-stzh-header-h .sc-stzh-header-s>[slot=logo]{width:var(--logo-width);height:var(--logo-height)}.stzh-header.sc-stzh-header{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-grey90)}.stzh-header__inner.sc-stzh-header,.stzh-header__main.sc-stzh-header{max-width:calc(100vw - var(--stzh-scrollbar-width))}@media screen and (min-width: 600px){.stzh-header__inner.sc-stzh-header{position:relative;z-index:var(--stzh-z-index-header)}}.stzh-header__vhidden.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-header__main.sc-stzh-header{display:flex;flex-direction:column;background-color:var(--stzh-color-white)}@media screen and (max-width: 599px){.stzh-header__main.sc-stzh-header{position:relative;z-index:var(--stzh-z-index-header)}}.stzh-header__metabar.sc-stzh-header{background-color:var(--metabar-background-color)}.stzh-header__metabar-inner.sc-stzh-header{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-header__metabar-inner.sc-stzh-header{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-header__metabar-inner.sc-stzh-header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-header__metabar-inner.sc-stzh-header{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-header__metabar-inner.sc-stzh-header{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-header__metabar-inner.sc-stzh-header{display:flex;align-items:center;height:4rem}@media screen and (min-width: 900px){.stzh-header__metabar-inner.sc-stzh-header{height:4rem}}.stzh-header__burger.sc-stzh-header,.stzh-header__search.sc-stzh-header,.stzh-header__metanav-item.sc-stzh-header{color:var(--metanav-item-color);transition:color var(--stzh-base-transition-animation-speed);cursor:pointer}.stzh-header__burger.sc-stzh-header:hover,.stzh-header__search.sc-stzh-header:hover,.stzh-header__metanav-item.sc-stzh-header:hover{color:var(--stzh-color-black)}.stzh-header__burger.sc-stzh-header{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-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);display:flex;align-items:center;appearance:none;background-color:transparent;border:none;padding:0;margin-right:var(--stzh-space-medium);gap:var(--stzh-space-medium);color:var(--menu-item-color)}@media screen and (min-width: 600px){.stzh-header__burger.sc-stzh-header{margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-header__burger.sc-stzh-header{margin-right:var(--stzh-space-xxxxlarge)}}.stzh-header__burger-icon.is-open.sc-stzh-header{display:none}.stzh-header__burger.is-open.sc-stzh-header .stzh-header__burger-icon.is-open.sc-stzh-header{display:inline-flex}.stzh-header__burger.is-open.sc-stzh-header .stzh-header__burger-icon.is-close.sc-stzh-header{display:none}@media screen and (max-width: 599px){.stzh-header__burger-text.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}.stzh-header__metabar-search.sc-stzh-header{overflow:hidden;margin-right:var(--stzh-space-medium);transition-property:width;transition-duration:var(--stzh-base-transition-animation-speed);width:2.5rem;max-width:21.5625rem}.stzh-header__metabar-search.sc-stzh-header:focus-within{width:100%}@media screen and (min-width: 600px){.stzh-header__metabar-search.sc-stzh-header{width:6rem;margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-header__metabar-search.sc-stzh-header{width:10rem;margin-left:0;margin-right:var(--stzh-space-xxxxlarge)}}.stzh-header__search.sc-stzh-header{position:relative;display:block;width:100%}.stzh-header__search-input.sc-stzh-header{width:100%;max-width:100%;background-color:transparent;color:transparent;font-family:inherit;font-size:inherit;border:none;padding:var(--stzh-space-xsmall);padding-left:0;padding-right:0;height:var(--stzh-form-input-small-height);transition-property:padding-left, padding-right, background-color, color;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-header__search-input.sc-stzh-header{color:var(--stzh-color-secondary60);padding-left:calc(var(--stzh-icon-size) + var(--stzh-space-medium))}}.stzh-header__search-input.sc-stzh-header:focus{color:var(--stzh-color-secondary60);background-color:var(--stzh-color-white);padding-left:calc(var(--stzh-space-medium) + var(--stzh-icon-size) + var(--stzh-space-medium));padding-right:var(--stzh-space-xlarge)}.stzh-header__search-input.sc-stzh-header:-webkit-autofill{background-clip:text}.stzh-header__search-input[type=search].sc-stzh-header::-webkit-search-decoration,.stzh-header__search-input[type=search].sc-stzh-header::-webkit-search-cancel-button,.stzh-header__search-input[type=search].sc-stzh-header::-webkit-search-results-button,.stzh-header__search-input[type=search].sc-stzh-header::-webkit-search-results-decoration{-webkit-appearance:none}.stzh-header__search-input.sc-stzh-header:focus~.stzh-header__search-icon.sc-stzh-header,.stzh-header__search-input.sc-stzh-header:focus~.stzh-header__search-text.sc-stzh-header{transform:translate(var(--stzh-space-medium), -50%)}.stzh-header__search-input.sc-stzh-header:focus~.stzh-header__search-text.sc-stzh-header{color:var(--stzh-color-grey70)}.stzh-header__search-text.sc-stzh-header,.stzh-header__search-icon.sc-stzh-header{position:absolute;top:50%;transform:translate(0, -50%);transition:transform var(--stzh-base-transition-animation-speed)}.stzh-header__search-icon.sc-stzh-header{left:0px}@media screen and (max-width: 599px){.stzh-header__search-icon.sc-stzh-header{transform:translate(0.5rem, -50%)}}.stzh-header__search-text.sc-stzh-header{pointer-events:none;left:calc(var(--stzh-icon-size) + var(--stzh-space-medium))}@media screen and (max-width: 599px){.stzh-header__search-text.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}.stzh-header__metabar-nav.sc-stzh-header{display:flex;align-items:center;margin-left:auto;gap:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-header__metabar-nav.sc-stzh-header{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-header__metabar-nav.sc-stzh-header{gap:var(--stzh-space-xxlarge)}}.stzh-header__metanav-popover.sc-stzh-header{--width:auto;--min-width:15.875rem;--background-color:var(--stzh-color-coolgrey10)}.stzh-header__metanav-popover.is-langnav.sc-stzh-header{--min-width:8.75rem}.stzh-header__metanav-item.sc-stzh-header{display:none;gap:var(--stzh-space-small);align-items:center;justify-content:center;appearance:none;background-color:transparent;padding:0;border:none;text-decoration:none;font-size:100%;font-family:inherit;white-space:nowrap;min-width:2.5rem}@media screen and (min-width: 900px){.stzh-header__metanav-item.sc-stzh-header{display:flex}}.stzh-header__metanav-item[aria-expanded=true].sc-stzh-header{color:var(--stzh-color-primary70)}.stzh-header__metanav-item.is-heavy.sc-stzh-header{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-header__metanav-item.is-stay.sc-stzh-header{display:flex}@media screen and (min-width: 900px){.stzh-header__metanav-item.is-popover-mobile.sc-stzh-header{display:none}}.stzh-header__metanav-item.is-popover-desktop.sc-stzh-header{display:none}@media screen and (min-width: 900px){.stzh-header__metanav-item.is-popover-desktop.sc-stzh-header{display:flex}}.stzh-header__metanav-menu-item.is-heavy.sc-stzh-header{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-header__metanav-menu-item--extra.sc-stzh-header{margin-top:var(--stzh-space-medium)}.stzh-header__metanav-item-text.sc-stzh-header{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-header__metanav-item-text.is-vhidden.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}@media screen and (max-width: 899px){.stzh-header__metanav-item-text.has-no-short-label.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}@media screen and (max-width: 899px){.stzh-header__metanav-item-text-label-long.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}.stzh-header__metanav-item-text-label-short.sc-stzh-header{display:flex}@media screen and (min-width: 900px){.stzh-header__metanav-item-text-label-short.sc-stzh-header{display:none}}.stzh-header__metanav-icon-wrapper.sc-stzh-header{position:relative;display:flex;align-items:center;justify-content:center}.stzh-header__metanav-icon-badge.sc-stzh-header{position:absolute;top:-0.25rem;right:-0.25rem}.stzh-header__metanav-icon.is-open.sc-stzh-header{display:none}.stzh-header__metanav-item[aria-expanded=true].sc-stzh-header .stzh-header__metanav-icon.is-open.sc-stzh-header{display:inline-flex}.stzh-header__metanav-item[aria-expanded=true].sc-stzh-header .stzh-header__metanav-icon.is-close.sc-stzh-header{display:none}.stzh-header__logobar.sc-stzh-header{display:flex}@media screen and (min-width: 1600px){.stzh-header__logobar.sc-stzh-header{margin-left:auto;margin-right:auto;width:84.25rem}}.stzh-header__logobar-logo.sc-stzh-header{box-sizing:content-box;display:flex;overflow:hidden;flex-shrink:0}.stzh-header__logobar-decoration.sc-stzh-header{background-color:var(--logobar-background-color);flex-grow:1}@media screen and (min-width: 1600px){.stzh-header__logobar-decoration.sc-stzh-header{width:calc(100% - 34.5625rem + (100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2);margin-right:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2)}}.stzh-header__logo-link.sc-stzh-header{padding-left:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-header__logo-link.sc-stzh-header{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-header__logo-link.sc-stzh-header{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-header__logo-link.sc-stzh-header{padding-left:var(--stzh-space-xxlarge)}}.stzh-header__logo-link.sc-stzh-header{padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-header__logo-link.sc-stzh-header{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-header__logo-link.sc-stzh-header{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-header__logo-link.sc-stzh-header{padding-right:var(--stzh-space-xxlarge)}}.stzh-header__logo-link.sc-stzh-header{padding-top:0.875rem;padding-bottom:0.6875rem;padding-left:1.25rem;display:inline-flex;width:18rem;height:4.125rem;transition:opacity var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-header__logo-link.sc-stzh-header{width:18.75rem;padding-left:2rem}}@media screen and (min-width: 900px){.stzh-header__logo-link.sc-stzh-header{width:24.9375rem;height:5.5rem;padding-top:1.125rem;padding-bottom:1.125rem;padding-left:2.5rem}}@media screen and (min-width: 1260px){.stzh-header__logo-link.sc-stzh-header{width:38.5625rem;height:8.4375rem;padding-top:1.75rem;padding-bottom:1.5rem;padding-left:4rem}}@media screen and (min-width: 1600px){.stzh-header__logo-link.sc-stzh-header{width:34.5625rem;padding-left:0}}.stzh-header__flyout.sc-stzh-header,.stzh-header__flyout-search.sc-stzh-header{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);z-index:calc(var(--stzh-z-index-header) - 1);position:fixed;visibility:hidden;top:0;left:0;right:0;bottom:0;width:100dvw;height:100dvh;overflow:auto;transition:visibility var(--stzh-base-transition-animation-speed)}@media (min-height: 580px){.stzh-header__flyout.sc-stzh-header{overflow:hidden}}@media screen and (min-width: 900px){.stzh-header__flyout.sc-stzh-header{overflow:hidden}}.stzh-header__flyout-backdrop.sc-stzh-header{position:absolute;width:100%;height:100%;background-color:var(--stzh-color-black40op);opacity:0;transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-header__menu.sc-stzh-header{position:absolute;width:100%;height:auto;background-color:var(--menu-background-color);display:grid;grid-template-rows:auto auto;transition-property:opacity, transform;transition-duration:var(--stzh-base-transition-animation-speed);transform:translateX(-100%);opacity:0}@media (min-height: 580px){.stzh-header__menu.sc-stzh-header{height:100%;grid-template-rows:minmax(0, 1fr) auto}}@media screen and (min-width: 900px){.stzh-header__menu.sc-stzh-header{height:100%;grid-template-rows:minmax(0, 1fr) auto}}@media screen and (min-width: 900px){.stzh-header__menu.sc-stzh-header{width:20.9375rem}}@media screen and (min-width: 1260px){.stzh-header__menu.sc-stzh-header{width:23.375rem}}@media screen and (min-width: 1260px){.stzh-header__menu.sc-stzh-header{width:27.4375rem}}@media screen and (min-width: 1600px){.stzh-header__menu.sc-stzh-header{width:calc(27.4375rem - 4rem + (100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2)}}.stzh-header__menu-nav.sc-stzh-header{position:relative;overflow-x:hidden;overflow-y:auto}@media screen and (min-width: 900px){.stzh-header__menu-nav.sc-stzh-header{position:static}}.stzh-header__menu-metanav.sc-stzh-header{padding-top:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-header__menu-metanav.sc-stzh-header{padding-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-header__menu-metanav.sc-stzh-header{padding-top:var(--stzh-space-small)}}.stzh-header__menu-metanav.sc-stzh-header{padding-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-header__menu-metanav.sc-stzh-header{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-header__menu-metanav.sc-stzh-header{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-header__menu-metanav.sc-stzh-header{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-header__menu-metanav.sc-stzh-header{background-color:var(--stzh-color-secondary20)}@media screen and (min-width: 900px){.stzh-header__menu-metanav.sc-stzh-header{display:none}}.stzh-header__menu-metanav-nav.sc-stzh-header{max-width:23.4375rem}.stzh-header__menu-list.sc-stzh-header,.stzh-header__menu-metanav-list.sc-stzh-header{display:block;list-style:none;padding:0;margin:0}.stzh-header__menu-list.sc-stzh-header,.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{padding-top:calc(var(--stzh-header-main-height) + var(--stzh-space-xxxlarge));padding-bottom:var(--stzh-space-xxxlarge)}@media screen and (min-width: 900px){.stzh-header__menu-list.sc-stzh-header,.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{padding-top:calc(var(--stzh-header-main-height) + var(--stzh-space-huge))}}.stzh-header__menu-list.is-level-2.sc-stzh-header,.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{overflow:auto;background-color:var(--menu-list-item-background-level2);visibility:hidden;opacity:0;transform:translateX(100%);position:absolute;z-index:200;top:0;left:0;width:100%;height:100%;transition-property:opacity, visibility, transform;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 900px){.stzh-header__menu-list.is-level-2.sc-stzh-header,.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{z-index:initial;width:19.6875rem;transform:none;left:100%;transition-property:opacity, visibility}}@media screen and (min-width: 1260px){.stzh-header__menu-list.is-level-2.sc-stzh-header,.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{width:20.875rem}}@media screen and (min-width: 1600px){.stzh-header__menu-list.is-level-2.sc-stzh-header,.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{width:21.5625rem}}.stzh-header__menu-list.is-level-2.sc-stzh-header{height:max-content}@media (min-height: 580px){.stzh-header__menu-list.is-level-2.sc-stzh-header{height:100%}}@media screen and (min-width: 900px){.stzh-header__menu-list.is-level-2.sc-stzh-header{height:100%}}.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{background-color:var(--stzh-color-secondary30);transform:none;transition-property:opacity, visibility}@media screen and (min-width: 900px){.stzh-header__menu-list.sc-stzh-header:where(:has(>.stzh-header__menu-list-item:hover>.stzh-header__menu-list)>.stzh-header__menu-list-item>.stzh-header__menu-list),.stzh-header__menu-list.sc-stzh-header:where(:has(>.stzh-header__menu-list-item.is-open>.stzh-header__menu-list)>.stzh-header__menu-list-item>.stzh-header__menu-list){transition-delay:var(--stzh-base-transition-animation-speed)}}@media screen and (min-width: 900px){.stzh-header__menu-list-item.sc-stzh-header:hover>.stzh-header__menu-list.sc-stzh-header,.stzh-header__menu-list-item.is-open.sc-stzh-header>.stzh-header__menu-list.sc-stzh-header{z-index:200;transition-delay:0ms;visibility:visible;opacity:1}}@media screen and (min-width: 900px){.stzh-header__menu-list-item.sc-stzh-header:hover>.stzh-header__menu-item.sc-stzh-header,.stzh-header__menu-list-item.is-open.sc-stzh-header>.stzh-header__menu-item.sc-stzh-header{background-color:var(--menu-list-item-background-hover)}}@media screen and (min-width: 900px){.stzh-header__menu-list-item.sc-stzh-header:hover>.stzh-header__menu-item.is-level-2.sc-stzh-header,.stzh-header__menu-list-item.is-open.sc-stzh-header>.stzh-header__menu-item.is-level-2.sc-stzh-header{background-color:var(--menu-list-item-background-level2-hover)}}@media screen and (max-width: 899px){.stzh-header__menu-nav.sc-stzh-header:has(.stzh-header__menu-list-item.is-open),.stzh-header__menu.sc-stzh-header:has(.stzh-header__menu-metanav-list-item.is-open) .stzh-header__menu-nav.sc-stzh-header,.stzh-header__menu-list.sc-stzh-header:has(.stzh-header__menu-list-item.is-open),.stzh-header__menu-metanav-list.sc-stzh-header:has(.stzh-header__menu-metanav-list-item.is-open){transition-property:visibility;transition-duration:0ms;transition-delay:var(--stzh-base-transition-animation-speed);visibility:hidden}}@media screen and (max-width: 899px){.stzh-header__menu-list-item.is-open.sc-stzh-header>.sc-stzh-header:where(.stzh-header__menu-list),.stzh-header__menu-metanav-list-item.is-open.sc-stzh-header>.sc-stzh-header:where(.stzh-header__menu-metanav-list){transform:translateX(0);opacity:1;visibility:visible}}.stzh-header__menu-list-item.sc-stzh-header,.stzh-header__menu-metanav-list-item.sc-stzh-header{display:grid}.stzh-header__menu-list-item.is-backlink.sc-stzh-header{display:block}.stzh-header__menu-item.sc-stzh-header,.stzh-header__menu-metanav-item.sc-stzh-header{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-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);text-align:left;display:flex;align-items:center;gap:var(--stzh-space-xsmall);appearance:none;border:none;text-decoration:none;background-color:transparent;color:var(--menu-item-color);padding-left:var(--stzh-space-xxxlarge);padding-top:var(--stzh-space-small);padding-bottom:var(--stzh-space-small);padding-right:var(--stzh-space-large);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}.stzh-header__menu-item.sc-stzh-header,.stzh-header__menu-metanav-item.is-title.sc-stzh-header{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);min-height:3.5rem}@media screen and (min-width: 900px){.stzh-header__menu-item.sc-stzh-header,.stzh-header__menu-metanav-item.is-title.sc-stzh-header{padding-left:2.5rem}}@media screen and (min-width: 1260px){.stzh-header__menu-item.sc-stzh-header,.stzh-header__menu-metanav-item.is-title.sc-stzh-header{padding-left:4rem}}@media screen and (min-width: 1600px){.stzh-header__menu-item.is-level-1.sc-stzh-header{padding-left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2)}}@media screen and (min-width: 900px){.stzh-header__menu-item.has-items.sc-stzh-header{cursor:default}}.stzh-header__menu-item.is-level-2.sc-stzh-header{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);min-height:3rem}@media screen and (min-width: 900px){.stzh-header__menu-item.is-level-2.sc-stzh-header{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1600px){.stzh-header__menu-item.is-level-2.sc-stzh-header{padding-left:var(--stzh-space-xxlarge)}}.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-top:var(--stzh-space-xxlarge)}}.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-bottom:var(--stzh-space-xlarge)}}.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{min-height:none;padding-left:1.25rem;padding-right:1.25rem;gap:var(--stzh-space-xxsmall)}@media screen and (min-width: 600px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{display:none}}.stzh-header__menu-item.is-level-2.is-main.sc-stzh-header{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);margin-bottom:var(--stzh-space-xlarge)}.stzh-header__menu-metanav-item.is-level-1.sc-stzh-header{min-height:2.75rem;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-header__menu-metanav-item.is-level-2.sc-stzh-header{min-height:3.5rem;gap:var(--stzh-space-medium);padding-right:var(--stzh-space-xxlarge)}.stzh-header__menu-metanav-item.is-title.sc-stzh-header{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);justify-content:space-between;padding-top:0;padding-bottom:0;padding-right:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xlarge);cursor:default}.stzh-header__menu-metanav-item.is-language.sc-stzh-header{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);justify-content:space-between}.stzh-header__menu-metanav-item.is-action.sc-stzh-header{display:grid;padding-right:var(--stzh-space-xxxlarge);margin-top:var(--stzh-space-xlarge)}.stzh-header__menu-metanav-item.is-action--extra.sc-stzh-header{margin-top:var(--stzh-space-xxsmall)}.stzh-header__menu-metanav-item.is-hidden.sc-stzh-header{display:none}.stzh-header__menu-metanav-item.is-level-1.sc-stzh-header .stzh-header__menu-metanav-item-icon.sc-stzh-header{--size:var(--stzh-icon-size-small)}.stzh-header__menu-metanav-item-text.sc-stzh-header{display:flex;gap:var(--stzh-space-xsmall)}.stzh-header__menu-metanav-item-text.is-vhidden.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-header__menu-metanav-item-counter.sc-stzh-header{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-header__app-nav.sc-stzh-header{display:none}@media screen and (min-width: 900px){.stzh-header__app-nav.sc-stzh-header{display:block}}.stzh-header__app-nav-bottom.sc-stzh-header{position:fixed;bottom:0;left:0;width:calc(100vw - var(--stzh-scrollbar-width));z-index:calc(var(--stzh-z-index-header) - 1)}@media screen and (min-width: 900px){.stzh-header__app-nav-bottom.sc-stzh-header{display:none}}.stzh-header--is-search-filled.sc-stzh-header .stzh-header__search-text.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-header--hide-logo.sc-stzh-header .stzh-header__logo-link.sc-stzh-header{opacity:0}@media screen and (min-width: 600px){.stzh-header--is-fixed.sc-stzh-header .stzh-header__inner.sc-stzh-header{transform:translateY(-100%);position:fixed;top:0;left:0;right:0;margin-top:calc(var(--stzh-header-logobar-height) / -1)}}@media screen and (max-width: 599px){.stzh-header--is-fixed.sc-stzh-header .stzh-header__main.sc-stzh-header{transform:translateY(-100%);position:fixed;top:0;left:0;right:0;margin-top:calc(var(--stzh-header-logobar-height) / -1)}}@media screen and (min-width: 600px){.stzh-header--is-fixed-transition.sc-stzh-header .stzh-header__inner.sc-stzh-header{transition-property:transform;transition-duration:var(--stzh-base-transition-animation-speed)}}@media screen and (max-width: 599px){.stzh-header--is-fixed-transition.sc-stzh-header .stzh-header__main.sc-stzh-header{transition-property:transform;transition-duration:var(--stzh-base-transition-animation-speed)}}.stzh-header--is-sticky-transition.sc-stzh-header .stzh-header__logobar.sc-stzh-header{transition-property:opacity, visibility;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-header--is-sticky-transition.sc-stzh-header .stzh-header__inner.sc-stzh-header,.stzh-header--is-sticky-transition.sc-stzh-header .stzh-header__main.sc-stzh-header{transition-property:transform, margin-top;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-header--is-sticky.sc-stzh-header .stzh-header__inner.sc-stzh-header{transform:translateY(0)}}@media screen and (max-width: 599px){.stzh-header--is-sticky.sc-stzh-header .stzh-header__main.sc-stzh-header{transform:translateY(0)}}@media screen and (min-width: 600px) and (max-width: 899px){.stzh-header--is-sticky.sc-stzh-header:where(.stzh-header--has-empty-metabar-mobile) .stzh-header__inner.sc-stzh-header{margin-top:calc((var(--stzh-header-logobar-height) + var(--stzh-header-metabar-height)) / -1)}}@media screen and (max-width: 599px){.stzh-header--is-sticky.sc-stzh-header:where(.stzh-header--has-empty-metabar-mobile) .stzh-header__main.sc-stzh-header{margin-top:calc((var(--stzh-header-logobar-height) + var(--stzh-header-metabar-height)) / -1)}}@media screen and (max-width: 899px){.stzh-header--is-sticky.sc-stzh-header:where(.stzh-header--has-empty-metabar-mobile) .stzh-header__metabar.sc-stzh-header{visibility:hidden}}@media screen and (min-width: 600px){.stzh-header--is-sticky.sc-stzh-header:where(.stzh-header--has-empty-metabar) .stzh-header__inner.sc-stzh-header{margin-top:calc((var(--stzh-header-logobar-height) + var(--stzh-header-metabar-height)) / -1)}}@media screen and (max-width: 599px){.stzh-header--is-sticky.sc-stzh-header:where(.stzh-header--has-empty-metabar) .stzh-header__main.sc-stzh-header{margin-top:calc((var(--stzh-header-logobar-height) + var(--stzh-header-metabar-height)) / -1)}}.stzh-header--is-sticky.sc-stzh-header:where(.stzh-header--has-empty-metabar) .stzh-header__metabar.sc-stzh-header{visibility:hidden}.stzh-header--is-sticky.sc-stzh-header .stzh-header__logobar.sc-stzh-header{visibility:hidden;opacity:0}.stzh-header--sticky-always-full.sc-stzh-header .stzh-header__inner.sc-stzh-header,.stzh-header--sticky-always-full.sc-stzh-header .stzh-header__main.sc-stzh-header{margin-top:0px}.stzh-header--sticky-always-full.sc-stzh-header .stzh-header__logobar.sc-stzh-header{visibility:visible;opacity:1}.stzh-header__flyout-search-main.sc-stzh-header{position:absolute;width:100%;transition-property:opacity, transform;transition-duration:var(--stzh-base-transition-animation-speed);transform:translateY(-6.25rem);opacity:0;margin-top:var(--stzh-header-main-height);overflow:auto}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__flyout.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__flyout-search.sc-stzh-header{visibility:visible}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__flyout-backdrop.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__flyout-backdrop.sc-stzh-header{opacity:1}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__flyout-scrollbar.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__flyout-scrollbar.sc-stzh-header{display:none;z-index:999;position:absolute;top:0;right:0;bottom:0;width:var(--stzh-scrollbar-width);background-color:var(--stzh-color-grey10);border-left:calc(0.5px * var(--stzh-scrollbar-active)) solid var(--stzh-color-grey30)}@media (min-height: 580px){.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__flyout-scrollbar.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__flyout-scrollbar.sc-stzh-header{display:block}}@media screen and (min-width: 900px){.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__flyout-scrollbar.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__flyout-scrollbar.sc-stzh-header{display:block}}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__menu.sc-stzh-header{opacity:1;transform:translateX(0)}.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__flyout-search-main.sc-stzh-header{opacity:1;transform:translateX(0)}@media screen and (min-width: 600px){.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__inner.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__inner.sc-stzh-header{z-index:var(--stzh-z-index-header);transform:translateY(0);position:fixed;top:0;left:0;right:var(--stzh-scrollbar-width);margin-top:0}}@media screen and (max-width: 599px){.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__main.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__main.sc-stzh-header{z-index:var(--stzh-z-index-header);transform:translateY(0);position:fixed;top:0;left:0;right:var(--stzh-scrollbar-width);margin-top:0}}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__logobar.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__logobar.sc-stzh-header{opacity:1}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__logobar.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__logobar.sc-stzh-header,.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__metabar.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__metabar.sc-stzh-header{visibility:visible}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__logo-link.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__logo-link.sc-stzh-header{opacity:1;transition:none}.stzh-header__search-button--is-hidden.sc-stzh-header{display:none}`;
+const CLASS_BODY_OPEN = "stzh-header-open";
+const StzhHeader = /*@__PURE__*/ proxyCustomElement(class StzhHeader extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.stzhMetanavItemClick = createEvent(this, "stzhMetanavItemClick");
+        this.stzhMetanavItemChildClick = createEvent(this, "stzhMetanavItemChildClick");
+        this.stzhMetanavItemButtonClick = createEvent(this, "stzhMetanavItemButtonClick");
+        this.stzhMenuItemClick = createEvent(this, "stzhMenuItemClick");
+        this.stzhLanguageChange = createEvent(this, "stzhLanguageChange");
+        this.stzhSearchChange = createEvent(this, "stzhSearchChange");
+        this.stzhSearchChanged = createEvent(this, "stzhSearchChanged");
+        /** The href attribute for the logo */
+        this.href = "https://www.stadt-zuerich.ch";
+        /** Menu element ID */
+        this.menuId = "anchorNavMain";
+        /** AppNav element ID */
+        this.appNavId = "anchorNavAppNav";
+        /** Search element ID */
+        this.searchId = "anchorSearch";
+        /** Metanav element ID */
+        this.metanavId = "anchorNavMeta";
+        /** Language element ID */
+        this.languageId = "anchorNavLang";
+        /**
+         * Type of logo (used for setting the correct height).
+         * Will enlarge the logo to 100% by default (default logos are using whitespace).
+         */
+        this.logoType = "default";
+        /** Menu navigation items */
+        this.menuItems = [];
+        /** Meta navigation items */
+        this.metanavItems = [];
+        /** CMS-specific (do not use): user specific meta navigation items when the user is not logged in or the api call failed */
+        this.userSpecificMetanavItemsNotLoggedIn = [];
+        this._userSpecificMetanavItemsNotLoggedIn = [];
+        /** If set, a stzh-appnav will be rendered instead of a menu navigation. */
+        this.appNavItems = [];
+        /** Available language (paths) in language switch */
+        this.languages = [];
+        /** Prevent url change when language has changed (will only fire `stzhLanguageChange`) */
+        this.languagePreventUrlchange = false;
+        /** Whether language switch should stay on mobile */
+        this.languageStay = false;
+        /** Whether the whole metabar (containing all the menus) should be hidden */
+        this.hideMetabar = false;
+        /** Search field name */
+        this.searchFieldName = "q";
+        /** Search input value */
+        this.searchValue = "";
+        /** Sticky behaviour */
+        this.sticky = "default";
+        /** CMS-specific (do not use): message sent to stzh-toastbar when the fetch for the user specific data fails */
+        this.loginErrorMessage = "";
+        this.hideLogo = false;
+        this.stickyActive = false;
+        this.flyoutOpen = false;
+        this.flyoutSearchOpen = false;
+        this.fixed = false;
+        this.fixedTransition = false;
+        this.currentOpenMenuItem = null;
+        this.currentOpenMetanavItem = null;
+        this.currentOpenLanguage = false;
+        this.userSpecificMetanavItemsLoggedIn = [];
+        this.combinedMetanavItems = [];
+        this.lastOpener = null;
+        this.flyoutOpenedByMetanavItem = null;
+        this.handleMenuListFocusout = (event) => {
+            const isNextFocusOutOfMenuList = !event.currentTarget.contains(event.relatedTarget);
+            if (this.isMedium && isNextFocusOutOfMenuList) {
+                this.closeMenuItem(false);
+            }
+        };
+        this.handleBurgerClick = async () => {
+            if (this.flyoutOpenedByMetanavItem) {
+                this.flyoutOpenedByMetanavItem = false;
+                this.closeMetanavItem();
+            }
+            else {
+                this.flyoutSearchOpen = false;
+                this.flyoutOpen = !this.flyoutOpen;
+            }
+            // focus first menu item
+            const element = this.element.querySelector(".stzh-header__menu-item");
+            if (element) {
+                window.setTimeout(() => {
+                    element.focus();
+                }, 100);
+            }
+            this.updatePosition();
+        };
+        this.handleSearchButtonClick = async () => {
+            this.flyoutOpen = false;
+            this.flyoutSearchOpen = !this.flyoutSearchOpen;
+            // focus first search input
+            const element = this.element.querySelector(".stzh-search input[type='search']");
+            if (element) {
+                window.setTimeout(() => {
+                    element.focus();
+                }, 100);
+            }
+            this.updatePosition();
+        };
+        this.handleBackdropClick = async () => {
+            this.flyoutOpen = false;
+            this.updatePosition();
+        };
+        this.handleBackdropSearchClick = async () => {
+            this.flyoutSearchOpen = false;
+            this.updatePosition();
+        };
+        this.handleMetanavItemClick = (event, item) => {
+            this.stzhMetanavItemClick.emit({
+                component: "stzh-header",
+                item,
+                originalEvent: event,
+            });
+        };
+        this.handleMetanavItemChildClick = (event, itemChild) => {
+            this.stzhMetanavItemChildClick.emit({
+                component: "stzh-header",
+                itemChild: itemChild,
+                originalEvent: event,
+            });
+        };
+        this.handleMetanavItemButtonClick = (event, itemButton) => {
+            this.stzhMetanavItemButtonClick.emit({
+                component: "stzh-header",
+                itemButton: itemButton,
+                originalEvent: event,
+            });
+        };
+        this.handleMenuItemClick = (event, item) => {
+            this.flyoutOpen = false;
+            this.stzhMenuItemClick.emit({
+                component: "stzh-header",
+                item,
+                originalEvent: event,
+            });
+        };
+        this.handleSearchInput = (event) => {
+            this.searchValue = this.searchInput.value;
+            this.stzhSearchChange.emit({
+                component: "stzh-header",
+                originalEvent: event,
+                value: this.searchValue,
+            });
+        };
+        this.handleSearchChange = (event) => {
+            this.searchValue = this.searchInput.value;
+            this.stzhSearchChanged.emit({
+                component: "stzh-header",
+                originalEvent: event,
+                value: this.searchValue,
+            });
+        };
+        this.handleLanguageClick = (event, dropdownOption) => {
+            if (this.languagePreventUrlchange) {
+                event.preventDefault();
+            }
+            this.languageActive = dropdownOption.value;
+            this.stzhLanguageChange.emit({
+                component: "stzh-header",
+                value: this.languageActive,
+            });
+        };
+        this.handleFlyoutResize = () => {
+            this.resizeMenunavElement();
+        };
+        this.handleResize = () => {
+            if (this.sticky === "disabled") {
+                return;
+            }
+            if (this.debounceResize) {
+                window.cancelAnimationFrame(this.debounceResize);
+            }
+            this.debounceResize = requestAnimationFrame(() => {
+                readTask(() => {
+                    var _a, _b, _c;
+                    this.isMedium = media("medium").matches;
+                    this.isSmallOrMicro = !this.isMedium;
+                    this.mainHeight = ((_a = this.mainElement) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+                    this.metabarHeight = ((_b = this.metabarElement) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
+                    this.logobarHeight = ((_c = this.logobarElement) === null || _c === void 0 ? void 0 : _c.offsetHeight) || 0;
+                    this.headerTop = this.element.offsetTop;
+                    this.headerHeight = this.metabarHeight + this.logobarHeight;
+                });
+                writeTask(() => {
+                    document.documentElement.style.setProperty("--stzh-header-height", `${this.headerHeight}px`);
+                    document.documentElement.style.setProperty("--stzh-header-main-height", `${this.mainHeight}px`);
+                    document.documentElement.style.setProperty("--stzh-header-metabar-height", `${this.metabarHeight}px`);
+                    document.documentElement.style.setProperty("--stzh-header-logobar-height", `${this.logobarHeight}px`);
+                });
+                this.scrollListener();
+            });
+        };
+    }
+    handleKeydown(event) {
+        if (event.key === "Escape") {
+            this.flyoutOpen = false;
+            this.flyoutSearchOpen = false;
+        }
+    }
+    flyoutCloseClicked() {
+        this.flyoutSearchOpen = false;
+        this.updatePosition();
+    }
+    async flyoutOpenWatcher(open) {
+        if (!open) {
+            // reset current open menu when flyout was closed
+            this.currentOpenMenuItem = null;
+            this.currentOpenMetanavItem = null;
+            this.currentOpenLanguage = null;
+            // reset further flags
+            this.flyoutOpenedByMetanavItem = false;
+            document.body.classList.remove(CLASS_BODY_OPEN);
+            this.enableSiblings();
+            if (this.trap) {
+                this.trap.deactivate();
+            }
+        }
+        else {
+            document.body.classList.add(CLASS_BODY_OPEN);
+            this.disableSiblings();
+            if (this.trap) {
+                this.trap.activate();
+            }
+        }
+    }
+    async fixedWatcher() {
+        this.paddingTop = this.fixed || this.flyoutOpen || this.flyoutSearchOpen ? this.headerHeight : 0;
+        // we don't want to run transitions on applying fixed class (out transition),
+        // so we set them in the next render
+        await this.waitForNextRender();
+        this.fixedTransition = this.fixed || this.flyoutOpen || this.flyoutSearchOpen;
+    }
+    stickyWatcher() {
+        this.updatePosition();
+    }
+    /** Update position / sticky state of header */
+    async updatePosition() {
+        if (this.flyoutOpen || this.flyoutSearchOpen) {
+            return;
+        }
+        const activateSticky = () => {
+            this.stickyActive = true;
+            document.documentElement.style.setProperty("--stzh-header-is-stuck", "1");
+            document.documentElement.style.setProperty("--stzh-header-is-not-stuck", "0");
+        };
+        const disableSticky = () => {
+            document.documentElement.style.setProperty("--stzh-header-is-stuck", "0");
+            document.documentElement.style.setProperty("--stzh-header-is-not-stuck", "1");
+            this.stickyActive = false;
+        };
+        if (this.sticky === "disabled") {
+            disableSticky();
+        }
+        else if (this.sticky === "always-full") {
+            activateSticky();
+        }
+        else if (this.sticky === "always") {
+            if (this.belowStayStickyPoint) {
+                activateSticky();
+            }
+            else {
+                disableSticky();
+            }
+        }
+        else {
+            if (this.scrollingUp && this.belowStayStickyPoint) {
+                if (!this.stickyActive && this.belowStartStickyPoint) {
+                    activateSticky();
+                }
+            }
+            else {
+                if (this.stickyActive && this.belowStayStickyPoint) {
+                    disableSticky();
+                }
+                else {
+                    disableSticky();
+                }
+            }
+        }
+    }
+    scrollListener() {
+        if (this.sticky === "disabled") {
+            return;
+        }
+        readTask(() => {
+            this.currentScrollY = window.scrollY;
+            this.scrollingUp = this.lastScrollY && this.lastScrollY > this.currentScrollY;
+            this.lastScrollY = this.currentScrollY;
+            this.belowStayStickyPoint = this.currentScrollY > this.logobarHeight;
+            this.belowStartStickyPoint = this.currentScrollY > this.headerHeight;
+            this.fixed =
+                this.belowStartStickyPoint ||
+                    (this.scrollingUp && this.belowStayStickyPoint && this.stickyActive) ||
+                    (this.sticky === "always" && this.belowStayStickyPoint) ||
+                    this.sticky === "always-full";
+            this.headerOverlap = (this.headerTop - this.currentScrollY) / -1;
+            this.hideLogo = this.sticky !== "always-full" && this.isMedium && this.headerOverlap > 1;
+        });
+        writeTask(() => {
+            this.updatePosition();
+        });
+    }
+    searchValueWatcher(newValue) {
+        this.searchFilled = newValue !== "";
+    }
+    menuItemsWatcher(newValue) {
+        if (typeof newValue === "string") {
+            this._menuItems = JSON.parse(newValue);
+        }
+        else {
+            this._menuItems = newValue;
+        }
+        this._menuItems = this._menuItems.map((menuItem, index) => (Object.assign({ id: `submenu-${index}` }, menuItem)));
+    }
+    metanavItemsWatcher(newValue) {
+        if (typeof newValue === "string") {
+            this._metanavItems = JSON.parse(newValue);
+        }
+        else {
+            this._metanavItems = newValue;
+        }
+        this._metanavItems = this._metanavItems.map((metanavItem, index) => (Object.assign({ id: `metanav-submenu-${index}` }, metanavItem)));
+        this.combineMetanavItems();
+    }
+    appNavItemsWatcher(newValue) {
+        if (typeof newValue === "string") {
+            this._appNavItems = JSON.parse(newValue);
+        }
+        else {
+            this._appNavItems = newValue;
+        }
+    }
+    userSpecificMetanavItemsNotLoggedInWatcher(newValue) {
+        this._userSpecificMetanavItemsNotLoggedIn = newValue;
+        this.combineMetanavItems();
+    }
+    languagesWatcher(newValue) {
+        if (typeof newValue === "string") {
+            this._languages = JSON.parse(newValue);
+        }
+        else {
+            this._languages = newValue;
+        }
+    }
+    getSiblings() {
+        if (!this._parentElement) {
+            return [];
+        }
+        return Array.from(this._parentElement.children).filter(child => child !== this.element);
+    }
+    disableSiblings() {
+        this.getSiblings().forEach(sibling => {
+            sibling.setAttribute("aria-hidden", "true");
+        });
+    }
+    enableSiblings() {
+        this.getSiblings().forEach(sibling => {
+            sibling.removeAttribute("aria-hidden");
+        });
+    }
+    waitForNextRender() {
+        return new Promise(resolve => (this.renderPromiseResolve = resolve));
+    }
+    resizeMenunavElement() {
+        // reset height when metanav is sticky, or on medium or no submenu element is open
+        if (media("headerMetanavSticky").matches || media("medium").matches || !this.openSubmenuElement) {
+            Object.assign(this.menunavElement.style, {
+                height: null,
+            });
+        }
+        else {
+            const { height } = this.openSubmenuElement.getBoundingClientRect();
+            Object.assign(this.menunavElement.style, {
+                height: `${height}px`,
+            });
+        }
+    }
+    async openMenuItem(event, menuItem) {
+        this.flyoutOpen = true;
+        this.lastOpener = event.currentTarget;
+        this.openSubmenuElement = this.element.querySelector(`#${menuItem.id}`);
+        this.currentOpenMenuItem = menuItem;
+        await this.waitForNextRender();
+        requestAnimationFrame(() => {
+            this.menunavElement.scrollTop = 0;
+            const firstButtonOrLink = this.openSubmenuElement && tabbable(this.openSubmenuElement)[0];
+            firstButtonOrLink === null || firstButtonOrLink === void 0 ? void 0 : firstButtonOrLink.focus();
+            this.resizeMenunavElement();
+        });
+    }
+    async closeMenuItem(focusOpener = true) {
+        this.openSubmenuElement = null;
+        this.currentOpenMenuItem = null;
+        await this.waitForNextRender();
+        if (focusOpener) {
+            requestAnimationFrame(() => {
+                this.lastOpener.focus();
+                this.lastOpener = null;
+                this.resizeMenunavElement();
+            });
+        }
+    }
+    async openMetanavItem(event, metanavItem) {
+        if (!this.flyoutOpen) {
+            this.flyoutOpenedByMetanavItem = true;
+            this.flyoutOpen = true;
+        }
+        this.lastOpener = event.currentTarget;
+        this.currentOpenMetanavItem = metanavItem;
+        await this.waitForNextRender();
+        requestAnimationFrame(() => {
+            const openMetanavSubmenuElement = this.element.querySelector(`#${metanavItem.id}`);
+            const firstButtonOrLink = openMetanavSubmenuElement && tabbable(openMetanavSubmenuElement)[0];
+            firstButtonOrLink === null || firstButtonOrLink === void 0 ? void 0 : firstButtonOrLink.focus();
+        });
+    }
+    async closeMetanavItem() {
+        this.currentOpenMetanavItem = null;
+        if (this.flyoutOpenedByMetanavItem) {
+            this.flyoutOpen = false;
+        }
+        await this.waitForNextRender();
+        requestAnimationFrame(() => {
+            this.lastOpener.focus();
+            this.lastOpener = null;
+        });
+    }
+    async openLanguage(event) {
+        if (!this.flyoutOpen) {
+            this.flyoutOpenedByMetanavItem = true;
+            this.flyoutOpen = true;
+        }
+        this.lastOpener = event.currentTarget;
+        this.currentOpenLanguage = true;
+        await this.waitForNextRender();
+        requestAnimationFrame(() => {
+            const openMetanavSubmenuElement = this.element.querySelector("#submenu-languages");
+            const firstButtonOrLink = openMetanavSubmenuElement && tabbable(openMetanavSubmenuElement)[0];
+            firstButtonOrLink === null || firstButtonOrLink === void 0 ? void 0 : firstButtonOrLink.focus();
+        });
+    }
+    async closeLanguage() {
+        this.currentOpenLanguage = false;
+        if (this.flyoutOpenedByMetanavItem) {
+            this.flyoutOpen = false;
+        }
+        await this.waitForNextRender();
+        requestAnimationFrame(() => {
+            this.lastOpener.focus();
+            this.lastOpener = null;
+        });
+    }
+    /** CMS-specific (do not use): fetch user specific metanav items from userSpecificMetanavItemsEndpoint */
+    async requestUserSpecificMetanavItems() {
+        if (!this.userSpecificMetanavItemsEndpoint) {
+            return;
+        }
+        try {
+            const response = await fetch(this.userSpecificMetanavItemsEndpoint);
+            this.userSpecificMetanavItemsLoggedIn = await response.json();
+            this.combineMetanavItems();
+        }
+        catch (error) {
+            this.combineMetanavItems(true); // fallback to not logged in items
+            console.error("Error fetching data:", error);
+            if (this.loginErrorMessage) {
+                document.querySelector("stzh-toastbar").toast(this.loginErrorMessage, {
+                    type: "error",
+                });
+            }
+        }
+    }
+    combineMetanavItems(fallback = false) {
+        if (!this.userSpecificMetanavItemsEndpoint || fallback) {
+            //not logged in or login fetch failed
+            this.combinedMetanavItems = [...this._metanavItems, ...this._userSpecificMetanavItemsNotLoggedIn];
+        }
+        else {
+            this.combinedMetanavItems = [...this._metanavItems, ...this.userSpecificMetanavItemsLoggedIn];
+        }
+    }
+    async componentWillLoad() {
+        this.menuItemsWatcher(this.menuItems);
+        this.metanavItemsWatcher(this.metanavItems);
+        this.appNavItemsWatcher(this.appNavItems);
+        this.languagesWatcher(this.languages);
+        this.searchValueWatcher(this.searchValue);
+        this.userSpecificMetanavItemsNotLoggedInWatcher(this.userSpecificMetanavItemsNotLoggedIn);
+        this.requestUserSpecificMetanavItems();
+        if (!this.localization) {
+            this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "header");
+        }
+    }
+    componentDidRender() {
+        if (this.renderPromiseResolve) {
+            this.renderPromiseResolve();
+        }
+        if (this.flyoutElement && this.flyoutResizeObserver) {
+            this.flyoutResizeObserver.observe(this.flyoutElement);
+        }
+        if (this.flyoutSearchElement && this.flyoutResizeObserver) {
+            this.flyoutResizeObserver.observe(this.flyoutSearchElement);
+        }
+    }
+    componentDidLoad() {
+        this.trap = createFocusTrap(this.element, Object.assign(Object.assign({}, createBaseFocusTrapOptions()), { initialFocus: false }));
+        this.flyoutResizeObserver = new ResizeObserver(this.handleFlyoutResize);
+        if (this.flyoutElement) {
+            this.flyoutResizeObserver.observe(this.flyoutElement);
+        }
+    }
+    connectedCallback() {
+        this._parentElement = this.element.parentElement;
+        this.resizeObserver = new ResizeObserver(this.handleResize);
+        this.resizeObserver.observe(this.element);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        this.flyoutOpenWatcher(false);
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.flyoutResizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const metanavBeforeUsed = hasSlot(this.element, "metanav-before");
+        const metanavAfterUsed = hasSlot(this.element, "metanav-after");
+        const classes = {
+            "stzh-header": true,
+            "stzh-header--is-flyout-open": this.flyoutOpen,
+            "stzh-header--is-flyout-search-open": this.flyoutSearchOpen,
+            "stzh-header--is-search-filled": this.searchFilled,
+            "stzh-header--is-fixed": this.fixed,
+            "stzh-header--is-fixed-transition": this.fixedTransition,
+            "stzh-header--is-sticky": this.stickyActive,
+            "stzh-header--is-sticky-transition": this.stickyActive && this.fixedTransition,
+            "stzh-header--hide-logo": this.hideLogo,
+            "stzh-header--has-empty-metabar-mobile": !metanavBeforeUsed &&
+                !metanavAfterUsed &&
+                this._metanavItems.filter(item => item.stay || item.stayAndShowInMobileMenu).length === 0 &&
+                this._menuItems.length === 0 &&
+                (this._languages.length === 0 || (this._languages.length > 0 && !this.languageStay)) &&
+                !this.searchAction,
+            "stzh-header--has-empty-metabar": !metanavBeforeUsed &&
+                !metanavAfterUsed &&
+                this._metanavItems.length === 0 &&
+                this._menuItems.length === 0 &&
+                this._languages.length === 0 &&
+                !this.searchAction,
+            [`stzh-header--sticky-${this.sticky}`]: !!this.sticky,
+        };
+        const activeLanguage = this.languageActive || window.stzhComponents.utils.getLocale(this.element);
+        const activeLanguageOption = ((_a = this._languages) === null || _a === void 0 ? void 0 : _a.find(({ value }) => value === activeLanguage)) || ((_b = this._languages) === null || _b === void 0 ? void 0 : _b[0]) || null;
+        const renderMetanavItemButton = (item, additionalClasses, additionalAttributes) => {
+            var _a;
+            const Element = ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 || item.itemButton || !item.href ? "button" : "a";
+            return (h(Element, Object.assign({}, additionalAttributes, { id: item.id + "-button", href: Element === "a" && item.href, target: Element === "a" && item.target, style: { order: item.cssOrder }, class: Object.assign({ "stzh-header__metanav-item": true, "is-heavy": item.important, "is-stay": item.stay || item.stayAndShowInMobileMenu }, (additionalClasses || {})) }), h("span", { class: {
+                    "stzh-header__metanav-item-text": true,
+                    "is-vhidden": item.labelHidden,
+                    "has-no-short-label": !item.labelShort,
+                } }, h("span", { class: "stzh-header__metanav-item-text-label-long" }, item.label), h("span", { class: "stzh-header__metanav-item-text-label-short", "aria-hidden": "true" }, item.labelShort)), item.icon && (h("span", { class: "stzh-header__metanav-icon-wrapper" }, item.icon && (h("stzh-icon", { class: `stzh-header__metanav-icon ${item.iconOpen ? "is-close" : ""}`, name: item.icon })), item.iconOpen && h("stzh-icon", { class: "stzh-header__metanav-icon is-open", name: item.iconOpen }), (item.badge || item.badgeEmpty) && (h("stzh-badge", { class: "stzh-header__metanav-icon-badge", label: item.badge, type: typeof item.badgeType === "undefined" ? "error" : item.badgeType }))))));
+        };
+        return (h(Host, null, h("header", { class: classes }, h("div", { class: "stzh-header__header", style: { paddingTop: `${this.paddingTop}px` } }, this.isSmallOrMicro && this._appNavItems.length > 0 && (h("div", { class: "stzh-header__app-nav-bottom" }, h("stzh-app-nav", { items: this._appNavItems, "app-nav-id": this.appNavId }))), h("div", { class: "stzh-header__inner" }, h("div", { class: "stzh-header__main", ref: el => (this.mainElement = el) }, h("div", { class: "stzh-header__logobar", ref: el => (this.logobarElement = el) }, h("div", { class: "stzh-header__logobar-logo" }, h("a", { href: this.href, class: "stzh-header__logo-link", "s-object-id": this.logoAnalyticsId || "Header Logo" }, h("slot", { name: "logo" }))), h("div", { class: "stzh-header__logobar-decoration" })), !this.hideMetabar && (h("div", { class: "stzh-header__metabar", ref: el => (this.metabarElement = el) }, h("div", { class: "stzh-header__metabar-inner" }, h("slot", { name: "menu-before" }), this._menuItems.length > 0 && (h("button", { id: this.menuId, class: `stzh-header__burger ${this.flyoutOpen && !this.flyoutOpenedByMetanavItem && "is-open"}`, onClick: this.handleBurgerClick }, h("stzh-icon", { class: "stzh-header__burger-icon is-close", name: "menu" }), h("stzh-icon", { class: "stzh-header__burger-icon is-open", name: "close" }), h("div", { class: "stzh-header__burger-text" }, this.localization.menuLabel))), this.searchAction && !hasSlot(this.element, "search") && (h("form", { class: "stzh-header__metabar-search", action: this.searchAction, role: "search" }, h("label", { class: "stzh-header__search" }, h("input", { id: this.searchId, ref: el => (this.searchInput = el), class: "stzh-header__search-input", type: "search", name: this.searchFieldName, onChange: this.handleSearchChange, onInput: this.handleSearchInput }), h("stzh-icon", { class: "stzh-header__search-icon", name: "search" }), h("div", { class: "stzh-header__search-text" }, this.localization.searchLabel)))), hasSlot(this.element, "search") && (h("stzh-button", { iconPosition: "left", onClick: this.handleSearchButtonClick, variant: "tertiary-plain", size: "small" }, h("stzh-icon", { slot: "icon", name: "search", class: this.flyoutSearchOpen ? "stzh-header__search-button--is-hidden" : "" }), h("stzh-icon", { slot: "icon", name: "close", class: this.flyoutSearchOpen ? "" : "stzh-header__search-button--is-hidden" }), this.localization.searchLabel)), h("slot", { name: "menu-after" }), !this.isSmallOrMicro && this._appNavItems.length > 0 && (h("div", { class: "stzh-header__app-nav" }, h("stzh-app-nav", { items: this._appNavItems, "app-nav-id": this.appNavId }))), h("div", { class: "stzh-header__metabar-nav", id: this.metanavId, tabindex: "-1" }, h("slot", { name: "metanav-before" }), this.combinedMetanavItems.map(item => {
+            var _a, _b;
+            return ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 || item.itemButton ? (h(Fragment, null, renderMetanavItemButton(item, {
+                "is-popover-mobile": true,
+            }, {
+                "aria-expanded": item === this.currentOpenMetanavItem ? "true" : "false",
+                "aria-controls": item.id,
+                onClick: (e) => {
+                    if (item === this.currentOpenMetanavItem) {
+                        this.closeMetanavItem();
+                    }
+                    else {
+                        this.openMetanavItem(e, item);
+                    }
+                    this.handleMetanavItemClick(e, item);
+                },
+            }), h("stzh-popover", { class: {
+                    "stzh-header__metanav-popover": true,
+                }, placement: "bottom-end", distance: 20, variant: item.variant, size: typeof item.size === "undefined" ? "large" : item.size }, renderMetanavItemButton(item, {
+                "is-popover-desktop": true,
+            }, {
+                onClick: (e) => {
+                    this.handleMetanavItemClick(e, item);
+                },
+            }), h("div", { slot: "content" }, ((_b = item.items) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("stzh-menu", null, item.items.map(childItem => (h("stzh-menu-item", { class: {
+                    "stzh-header__metanav-menu-item": true,
+                    "is-heavy": typeof item.importantSubmenu === "undefined" || item.importantSubmenu,
+                }, size: typeof item.size === "undefined" ? "large" : item.size, variant: item.variant, href: childItem.href, target: childItem.target, icon: childItem.icon, counter: childItem.counter, badge: childItem.badge, badgeType: childItem.badgeType, onClick: (e) => {
+                    this.handleMetanavItemChildClick(e, childItem);
+                } }, childItem.label)))))), item.itemButton && (h("stzh-button", { slot: "action", size: item.itemButton.size, href: item.itemButton.href, target: item.itemButton.target, onClick: (e) => {
+                    this.handleMetanavItemButtonClick(e, item.itemButton);
+                } }, item.itemButton.label)), item.itemButtonExtra && (h("stzh-button", { class: {
+                    "stzh-header__metanav-menu-item--extra": true,
+                }, slot: "action", size: item.itemButtonExtra.size, href: item.itemButtonExtra.href, target: item.itemButtonExtra.target, onClick: (e) => {
+                    this.handleMetanavItemButtonClick(e, item.itemButtonExtra);
+                } }, item.itemButtonExtra.label))))) : (renderMetanavItemButton(item, {}, {
+                onClick: (e) => {
+                    this.handleMetanavItemClick(e, item);
+                },
+            }));
+        }), ((_c = this._languages) === null || _c === void 0 ? void 0 : _c.length) > 0 && (h(Fragment, null, h("h2", { class: "stzh-header__vhidden" }, this.localization.languageLabel), this._menuItems.length > 0 && this.languageStay && (h("button", { id: this.isSmallOrMicro ? this.languageId : null, class: {
+                "stzh-header__metanav-item": true,
+                "is-popover-mobile": true,
+                "is-stay": this.languageStay,
+            }, "aria-expanded": this.currentOpenLanguage ? "true" : "false", "aria-controls": "submenu-languages", onClick: (e) => {
+                if (this.currentOpenLanguage) {
+                    this.closeLanguage();
+                }
+                else {
+                    this.openLanguage(e);
+                }
+            } }, h("span", { class: "stzh-header__metanav-item-text" }, activeLanguageOption === null || activeLanguageOption === void 0 ? void 0 : activeLanguageOption.text), h("stzh-icon", { class: "stzh-header__metanav-icon is-close", name: "angle-down" }), h("stzh-icon", { class: "stzh-header__metanav-icon is-open", name: "angle-up" }))), h("stzh-popover", { class: "stzh-header__metanav-popover is-langnav", placement: "bottom-end", distance: 20 }, h("button", { id: this.isSmallOrMicro ? null : this.languageId, class: {
+                "stzh-header__metanav-item": true,
+                "is-popover-desktop": this._menuItems.length > 0,
+                "is-stay": this.languageStay,
+            } }, h("span", { class: "stzh-header__metanav-item-text" }, activeLanguageOption === null || activeLanguageOption === void 0 ? void 0 : activeLanguageOption.text), h("stzh-icon", { class: "stzh-header__metanav-icon is-close", name: "angle-down" }), h("stzh-icon", { class: "stzh-header__metanav-icon is-open", name: "angle-up" })), h("div", { slot: "content" }, h("stzh-menu", null, this._languages.map(language => (h("stzh-menu-item", { class: "stzh-header__metanav-menu-item", active: (activeLanguageOption === null || activeLanguageOption === void 0 ? void 0 : activeLanguageOption.value) === language.value, href: language.value, onClick: event => this.handleLanguageClick(event, language) }, language.text)))))))), h("slot", { name: "metanav-after" })))))))), (this._menuItems.length > 0 || ((_d = this.combinedMetanavItems) === null || _d === void 0 ? void 0 : _d.length) > 0) && (h("div", { ref: el => (this.flyoutElement = el), class: "stzh-header__flyout" }, h("div", { class: "stzh-header__flyout-backdrop", onClick: this.handleBackdropClick }), h("div", { class: "stzh-header__flyout-scrollbar" }), h("div", { class: "stzh-header__menu" }, h("nav", { class: "stzh-header__menu-nav", ref: el => (this.menunavElement = el), "aria-label": this.localization.navigationLabel }, h("ul", { class: "stzh-header__menu-list is-level-1" }, this._menuItems.map(item => {
+            var _a, _b;
+            return (h("li", { class: {
+                    "stzh-header__menu-list-item": true,
+                    "is-open": item === this.currentOpenMenuItem,
+                } }, ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (h("button", { "aria-expanded": item === this.currentOpenMenuItem ? "true" : "false", "aria-controls": item.id, class: "stzh-header__menu-item is-level-1 has-items", onClick: item === this.currentOpenMenuItem
+                    ? () => this.closeMenuItem()
+                    : e => this.openMenuItem(e, item) }, item.label)) : (h("a", { href: item.href, onClick: (e) => this.handleMenuItemClick(e, item), class: "stzh-header__menu-item is-level-1" }, item.label)), ((_b = item.items) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("ul", { id: item.id, class: "stzh-header__menu-list is-level-2", onFocusout: this.handleMenuListFocusout }, h("li", { class: "stzh-header__menu-list-item is-backlink" }, h("button", { class: "stzh-header__menu-item is-level-2 is-backlink", onClick: () => this.closeMenuItem() }, h("stzh-icon", { name: "angle-left" }), h("span", null, this.menuBackLabel ? this.menuBackLabel : this.localization.menuBackLabel))), h("li", { class: "stzh-header__menu-list-item" }, h("a", { href: item.href, onClick: (e) => this.handleMenuItemClick(e, item), class: "stzh-header__menu-item is-level-2 is-main" }, item.label)), item.items.map(item => (h("li", { class: "stzh-header__menu-list-item" }, h("a", { href: item.href, onClick: (e) => this.handleMenuItemClick(e, item), class: "stzh-header__menu-item is-level-2" }, item.label))))))));
+        }))), (((_e = this.combinedMetanavItems) === null || _e === void 0 ? void 0 : _e.length) > 0 || ((_f = this._languages) === null || _f === void 0 ? void 0 : _f.length) > 0) && (h("div", { class: "stzh-header__menu-metanav" }, h("nav", { class: "stzh-header__menu-metanav-nav" }, h("ul", { class: "stzh-header__menu-metanav-list is-level-1" }, this.combinedMetanavItems.map(item => {
+            var _a, _b, _c;
+            return (h("li", { class: {
+                    "stzh-header__menu-metanav-list-item": true,
+                    "is-open": item === this.currentOpenMetanavItem,
+                } }, ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (h("button", { "aria-expanded": item === this.currentOpenMetanavItem ? "true" : "false", "aria-controls": item.id, class: {
+                    "stzh-header__menu-metanav-item is-level-1": true,
+                    "is-hidden": item.stay && !item.stayAndShowInMobileMenu,
+                }, onClick: (e) => {
+                    if (item === this.currentOpenMetanavItem) {
+                        this.closeMetanavItem();
+                    }
+                    else {
+                        this.openMetanavItem(e, item);
+                    }
+                    this.handleMetanavItemClick(e, item);
+                } }, h("span", { class: {
+                    "stzh-header__menu-metanav-item-text": true,
+                    "is-vhidden": item.labelHidden,
+                } }, item.label), item.icon && (h("stzh-icon", { class: "stzh-header__menu-metanav-item-icon", name: item.icon })))) : (h("a", { href: item.href, class: {
+                    "stzh-header__menu-metanav-item is-level-1": true,
+                    "is-hidden": item.stay && !item.stayAndShowInMobileMenu,
+                }, onClick: (e) => {
+                    this.handleMetanavItemClick(e, item);
+                } }, h("span", { class: {
+                    "stzh-header__menu-metanav-item-text": true,
+                    "is-vhidden": item.labelHidden,
+                } }, item.label), item.icon && (h("stzh-icon", { class: "stzh-header__menu-metanav-item-icon", name: item.icon })))), ((_b = item.items) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("ul", { id: item.id, class: "stzh-header__menu-metanav-list is-level-2" }, h("li", { class: "stzh-header__menu-metanav-list-item" }, h("div", { class: "stzh-header__menu-metanav-item is-level-2 is-title" }, h("span", null, item.label), h("stzh-button", { class: "stzh-header__menu-metanav-item-icon", variant: "tertiary", icon: "close", iconOnly: true, label: (_c = this.localization.closeMetanavMenuLabel) === null || _c === void 0 ? void 0 : _c.replace(/\{itemLabel\}/gi, item.label), onClick: () => this.closeMetanavItem() }))), item.items.map(item => (h("li", { class: "stzh-header__menu-metanav-list-item" }, h("a", { href: item.href, class: "stzh-header__menu-metanav-item is-level-2" }, item.icon && (h("stzh-icon", { class: "stzh-header__menu-metanav-item-icon", name: item.icon })), h("span", { class: "stzh-header__menu-metanav-item-text" }, h("span", null, item.label), item.counter !== undefined && item.counter > 0 && (h("span", { class: "stzh-header__menu-metanav-item-counter" }, "(", item.counter, ")"))))))), item.itemButton && (h("li", { class: "stzh-header__menu-metanav-list-item" }, h("div", { class: "stzh-header__menu-metanav-item is-level-2 is-action" }, h("stzh-button", { href: item.itemButton.href, target: item.itemButton.target }, item.itemButton.label)))), item.itemButtonExtra && (h("li", { class: "stzh-header__menu-metanav-list-item" }, h("div", { class: "stzh-header__menu-metanav-item is-level-2 is-action is-action--extra" }, h("stzh-button", { href: item.itemButtonExtra.href, target: item.itemButtonExtra.target }, item.itemButtonExtra.label))))))));
+        }), ((_g = this._languages) === null || _g === void 0 ? void 0 : _g.length) > 0 && (h("li", { class: {
+                "stzh-header__menu-metanav-list-item": true,
+                "is-open": this.currentOpenLanguage,
+            } }, h("button", { "aria-expanded": this.currentOpenLanguage ? "true" : "false", "aria-controls": "submenu-languages", class: "stzh-header__menu-metanav-item is-level-1", onClick: e => this.openLanguage(e) }, h("span", null, activeLanguageOption === null || activeLanguageOption === void 0 ? void 0 : activeLanguageOption.text), h("stzh-icon", { class: "stzh-header__menu-metanav-item-icon", name: "angle-down" })), h("ul", { id: "submenu-languages", class: "stzh-header__menu-metanav-list is-level-2" }, h("div", { class: "stzh-header__menu-metanav-item is-level-2 is-title" }, h("span", null, this.localization.dialogLanguageTitle), h("stzh-button", { class: "stzh-header__menu-metanav-item-icon", variant: "tertiary", icon: "close", iconOnly: true, label: "Sprach-Dialog schliessen", onClick: () => this.closeLanguage() })), this._languages.map(language => (h("li", { class: "stzh-header__menu-metanav-list-item" }, h("a", { class: "stzh-header__menu-metanav-item is-level-2 is-language", href: language.value, onClick: event => this.handleLanguageClick(event, language) }, h("span", null, language.text), (activeLanguageOption === null || activeLanguageOption === void 0 ? void 0 : activeLanguageOption.value) === language.value && (h("stzh-icon", { class: "stzh-header__menu-metanav-item-icon", name: "checkmark" })))))))))))))))), hasSlot(this.element, "search") && (h("div", { ref: el => (this.flyoutSearchElement = el), class: "stzh-header__flyout-search" }, h("div", { class: "stzh-header__flyout-backdrop", onClick: this.handleBackdropSearchClick }), h("div", { class: "stzh-header__flyout-scrollbar" }), h("div", { class: "stzh-header__flyout-search-main" }, h("slot", { name: "search" })))))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "flyoutOpen": ["flyoutOpenWatcher", "fixedWatcher"],
+        "flyoutSearchOpen": ["flyoutOpenWatcher", "fixedWatcher"],
+        "fixed": ["fixedWatcher"],
+        "headerHeight": ["fixedWatcher"],
+        "sticky": ["stickyWatcher"],
+        "searchValue": ["searchValueWatcher"],
+        "menuItems": ["menuItemsWatcher"],
+        "metanavItems": ["metanavItemsWatcher"],
+        "appNavItems": ["appNavItemsWatcher"],
+        "userSpecificMetanavItemsNotLoggedIn": ["userSpecificMetanavItemsNotLoggedInWatcher"],
+        "languages": ["languagesWatcher"]
+    }; }
+    static get style() { return stzhHeaderCss(); }
+}, [262, "stzh-header", {
+        "localization": [16],
+        "href": [1],
+        "menuId": [1, "menu-id"],
+        "appNavId": [1, "app-nav-id"],
+        "searchId": [1, "search-id"],
+        "metanavId": [1, "metanav-id"],
+        "languageId": [1, "language-id"],
+        "logoType": [513, "logo-type"],
+        "menuItems": [1, "menu-items"],
+        "menuBackLabel": [1, "menu-back-label"],
+        "metanavItems": [1, "metanav-items"],
+        "userSpecificMetanavItemsNotLoggedIn": [16],
+        "appNavItems": [1, "app-nav-items"],
+        "userSpecificMetanavItemsEndpoint": [1, "user-specific-metanav-items-endpoint"],
+        "languageActive": [1025, "language-active"],
+        "languages": [1],
+        "languagePreventUrlchange": [4, "language-prevent-urlchange"],
+        "languageStay": [4, "language-stay"],
+        "hideMetabar": [4, "hide-metabar"],
+        "searchAction": [1, "search-action"],
+        "searchFieldName": [1, "search-field-name"],
+        "searchValue": [1, "search-value"],
+        "sticky": [1],
+        "loginErrorMessage": [1, "login-error-message"],
+        "logoAnalyticsId": [1, "logo-analytics-id"],
+        "_menuItems": [32],
+        "_metanavItems": [32],
+        "_userSpecificMetanavItemsNotLoggedIn": [32],
+        "_appNavItems": [32],
+        "_languages": [32],
+        "hideLogo": [32],
+        "headerHeight": [32],
+        "paddingTop": [32],
+        "stickyActive": [32],
+        "flyoutOpen": [32],
+        "flyoutSearchOpen": [32],
+        "searchFilled": [32],
+        "fixed": [32],
+        "fixedTransition": [32],
+        "currentOpenMenuItem": [32],
+        "currentOpenMetanavItem": [32],
+        "currentOpenLanguage": [32],
+        "userSpecificMetanavItemsLoggedIn": [32],
+        "combinedMetanavItems": [32],
+        "isSmallOrMicro": [32],
+        "updatePosition": [64],
+        "requestUserSpecificMetanavItems": [64]
+    }, [[4, "keydown", "handleKeydown"], [0, "stzhOverlayCloseClick", "flyoutCloseClicked"], [9, "scroll", "scrollListener"]], {
+        "flyoutOpen": ["flyoutOpenWatcher", "fixedWatcher"],
+        "flyoutSearchOpen": ["flyoutOpenWatcher", "fixedWatcher"],
+        "fixed": ["fixedWatcher"],
+        "headerHeight": ["fixedWatcher"],
+        "sticky": ["stickyWatcher"],
+        "searchValue": ["searchValueWatcher"],
+        "menuItems": ["menuItemsWatcher"],
+        "metanavItems": ["metanavItemsWatcher"],
+        "appNavItems": ["appNavItemsWatcher"],
+        "userSpecificMetanavItemsNotLoggedIn": ["userSpecificMetanavItemsNotLoggedInWatcher"],
+        "languages": ["languagesWatcher"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["stzh-header", "stzh-app-nav", "stzh-badge", "stzh-button", "stzh-icon", "stzh-link", "stzh-menu", "stzh-menu-item", "stzh-popover"];
+    components.forEach(tagName => { switch (tagName) {
+        case "stzh-header":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), StzhHeader);
+            }
+            break;
+        case "stzh-app-nav":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$8();
+            }
+            break;
+        case "stzh-badge":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$7();
+            }
+            break;
+        case "stzh-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "stzh-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "stzh-link":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "stzh-menu":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "stzh-menu-item":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "stzh-popover":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+export { StzhHeader as S, defineCustomElement as d };
+//# sourceMappingURL=p-DFpDs4lN.js.map
+//# sourceMappingURL=p-DFpDs4lN.js.map