npm - @oiz/stzh-components - Versions diffs - 3.0.0 → 3.1.0 - Mend

@oiz/stzh-components 3.0.0 → 3.1.0

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 (713) hide show

package/dist/collection/components/stzh-header/stzh-header.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Host, h, writeTask, readTask, Fragment, } from "@stencil/core";
+import { Fragment, h, Host, readTask, writeTask, } from "@stencil/core";
 import { hasSlot } from "../../utils/utils";
 import { media } from "../../utils/media-utils";
 import { tabbable } from "tabbable";
@@ -18,8 +18,7 @@ export class StzhHeader {
     this.lastOpener = null;
     this.flyoutOpenedByMetanavItem = null;
     this.handleMenuListFocusout = (event) => {
-      const isNextFocusOutOfMenuList = !event.currentTarget
-        .contains(event.relatedTarget);
+      const isNextFocusOutOfMenuList = !event.currentTarget.contains(event.relatedTarget);
       if (this.isMedium && isNextFocusOutOfMenuList) {
         this.closeMenuItem(false);
       }
@@ -30,21 +29,36 @@ export class StzhHeader {
         this.closeMetanavItem();
       }
       else {
+        this.flyoutSearchOpen = false;
         this.flyoutOpen = !this.flyoutOpen;
       }
       // focus first menu item
-      const element = this.element.querySelector('.stzh-header__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);
       }
-      // await this.waitForNextRender();
       this.updatePosition();
     };
     this.handleBackdropClick = async () => {
       this.flyoutOpen = false;
-      // await this.waitForNextRender();
+      this.updatePosition();
+    };
+    this.handleBackdropSearchClick = async () => {
+      this.flyoutSearchOpen = false;
       this.updatePosition();
     };
     this.handleMetanavItemClick = (event, item) => {
@@ -54,6 +68,20 @@ export class StzhHeader {
         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({
@@ -67,7 +95,7 @@ export class StzhHeader {
       this.stzhSearchChange.emit({
         component: "stzh-header",
         originalEvent: event,
-        value: this.searchValue
+        value: this.searchValue,
       });
     };
     this.handleSearchChange = (event) => {
@@ -75,7 +103,7 @@ export class StzhHeader {
       this.stzhSearchChanged.emit({
         component: "stzh-header",
         originalEvent: event,
-        value: this.searchValue
+        value: this.searchValue,
       });
     };
     this.handleLanguageClick = (event, dropdownOption) => {
@@ -85,7 +113,7 @@ export class StzhHeader {
       this.languageActive = dropdownOption.value;
       this.stzhLanguageChange.emit({
         component: "stzh-header",
-        value: this.languageActive
+        value: this.languageActive,
       });
     };
     this.handleFlyoutResize = () => {
@@ -107,16 +135,12 @@ export class StzhHeader {
           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;
-          // this.headerHeight = this.element.offsetHeight;
-          // console.log(this.headerHeight);
-          // console.log(this.metabarHeight + this.logobarHeight);
-          // console.log(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`);
+          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();
       });
@@ -135,6 +159,7 @@ export class StzhHeader {
     this.languages = [];
     this.languagePreventUrlchange = false;
     this.languageStay = false;
+    this.hideMetabar = false;
     this.searchAction = undefined;
     this.searchFieldName = "q";
     this.searchValue = "";
@@ -145,6 +170,7 @@ export class StzhHeader {
     this.paddingTop = undefined;
     this.stickyActive = false;
     this.flyoutOpen = false;
+    this.flyoutSearchOpen = false;
     this.searchFilled = undefined;
     this.fixed = false;
     this.fixedTransition = false;
@@ -155,8 +181,13 @@ export class StzhHeader {
   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
@@ -180,28 +211,28 @@ export class StzhHeader {
     }
   }
   async fixedWatcher() {
-    this.paddingTop = this.fixed || this.flyoutOpen ? this.headerHeight : 0;
+    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.fixedTransition = this.fixed || this.flyoutOpen || this.flyoutSearchOpen;
   }
   stickyWatcher() {
     this.updatePosition();
   }
   /** Update position / sticky state of header */
   async updatePosition() {
-    if (this.flyoutOpen) {
+    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');
+      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');
+      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") {
@@ -244,10 +275,11 @@ export class StzhHeader {
       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.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;
     });
@@ -288,32 +320,32 @@ export class StzhHeader {
     if (!this._parentElement) {
       return [];
     }
-    return Array.from(this._parentElement.children).filter((child) => child !== this.element);
+    return Array.from(this._parentElement.children).filter(child => child !== this.element);
   }
   disableSiblings() {
-    this.getSiblings().forEach((sibling) => {
+    this.getSiblings().forEach(sibling => {
       sibling.setAttribute("aria-hidden", "true");
     });
   }
   enableSiblings() {
-    this.getSiblings().forEach((sibling) => {
+    this.getSiblings().forEach(sibling => {
       sibling.removeAttribute("aria-hidden");
     });
   }
   waitForNextRender() {
-    return new Promise(resolve => this.renderPromiseResolve = resolve);
+    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
+        height: null,
       });
     }
     else {
       const { height } = this.openSubmenuElement.getBoundingClientRect();
       Object.assign(this.menunavElement.style, {
-        height: `${height}px`
+        height: `${height}px`,
       });
     }
   }
@@ -325,8 +357,7 @@ export class StzhHeader {
     await this.waitForNextRender();
     requestAnimationFrame(() => {
       this.menunavElement.scrollTop = 0;
-      const firstButtonOrLink = this.openSubmenuElement
-        && tabbable(this.openSubmenuElement)[0];
+      const firstButtonOrLink = this.openSubmenuElement && tabbable(this.openSubmenuElement)[0];
       firstButtonOrLink === null || firstButtonOrLink === void 0 ? void 0 : firstButtonOrLink.focus();
       this.resizeMenunavElement();
     });
@@ -353,8 +384,7 @@ export class StzhHeader {
     await this.waitForNextRender();
     requestAnimationFrame(() => {
       const openMetanavSubmenuElement = this.element.querySelector(`#${metanavItem.id}`);
-      const firstButtonOrLink = openMetanavSubmenuElement
-        && tabbable(openMetanavSubmenuElement)[0];
+      const firstButtonOrLink = openMetanavSubmenuElement && tabbable(openMetanavSubmenuElement)[0];
       firstButtonOrLink === null || firstButtonOrLink === void 0 ? void 0 : firstButtonOrLink.focus();
     });
   }
@@ -379,8 +409,7 @@ export class StzhHeader {
     await this.waitForNextRender();
     requestAnimationFrame(() => {
       const openMetanavSubmenuElement = this.element.querySelector("#submenu-languages");
-      const firstButtonOrLink = openMetanavSubmenuElement
-        && tabbable(openMetanavSubmenuElement)[0];
+      const firstButtonOrLink = openMetanavSubmenuElement && tabbable(openMetanavSubmenuElement)[0];
       firstButtonOrLink === null || firstButtonOrLink === void 0 ? void 0 : firstButtonOrLink.focus();
     });
   }
@@ -411,6 +440,9 @@ export class StzhHeader {
     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 }));
@@ -437,23 +469,25 @@ export class StzhHeader {
     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--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);
@@ -465,123 +499,95 @@ export class StzhHeader {
           "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 }))));
+        } }, 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` } }, 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" })), 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 &&
-      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))), h("slot", { name: "menu-after" }), h("div", { class: "stzh-header__metabar-nav", id: this.metanavId }, h("slot", { name: "metanav-before" }), this._metanavItems.map((item) => {
+    return (h(Host, null, h("header", { class: classes }, h("div", { class: "stzh-header__header", style: { paddingTop: `${this.paddingTop}px` } }, 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" }), h("div", { class: "stzh-header__metabar-nav", id: this.metanavId }, h("slot", { name: "metanav-before" }), this._metanavItems.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 }, childItem.label)))), item.itemButton &&
-            h("stzh-button", { slot: "action", size: item.itemButton.size, href: item.itemButton.href, target: item.itemButton.target }, item.itemButton.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", { id: this.languageId, class: "stzh-header__vhidden" }, this.localization.languageLabel), this._menuItems.length > 0 && this.languageStay &&
-        h("button", { 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", { 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 &&
-      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)))));
-      }))), (((_d = this._metanavItems) === null || _d === void 0 ? void 0 : _d.length) > 0 || ((_e = this._languages) === null || _e === void 0 ? void 0 : _e.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._metanavItems.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 &&
-              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)))));
-        }), ((_f = this._languages) === null || _f === void 0 ? void 0 : _f.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" }))))))))))))));
+      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))))) : (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", { id: this.languageId, class: "stzh-header__vhidden" }, this.localization.languageLabel), this._menuItems.length > 0 && this.languageStay && (h("button", { 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", { 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 && (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))))))));
+    }))), (((_d = this._metanavItems) === null || _d === void 0 ? void 0 : _d.length) > 0 || ((_e = this._languages) === null || _e === void 0 ? void 0 : _e.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._metanavItems.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 && (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))))))));
+    }), ((_f = this._languages) === null || _f === void 0 ? void 0 : _f.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" })))))));
   }
   static get is() { return "stzh-header"; }
   static get encapsulation() { return "scoped"; }
@@ -712,7 +718,7 @@ export class StzhHeader {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"default\" |\u00A0\"vbz\" | \"aoz\" | \"pkzh\" | \"uvz\"",
+          "original": "\"default\" | \"vbz\" | \"aoz\" | \"pkzh\" | \"uvz\"",
           "resolved": "\"aoz\" | \"default\" | \"pkzh\" | \"uvz\" | \"vbz\"",
           "references": {}
         },
@@ -868,6 +874,24 @@ export class StzhHeader {
         "reflect": false,
         "defaultValue": "false"
       },
+      "hideMetabar": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether language switch should stay on mobile"
+        },
+        "attribute": "hide-metabar",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "searchAction": {
         "type": "string",
         "mutable": false,
@@ -965,6 +989,7 @@ export class StzhHeader {
       "paddingTop": {},
       "stickyActive": {},
       "flyoutOpen": {},
+      "flyoutSearchOpen": {},
       "searchFilled": {},
       "fixed": {},
       "fixedTransition": {},
@@ -995,6 +1020,48 @@ export class StzhHeader {
             }
           }
         }
+      }, {
+        "method": "stzhMetanavItemChildClick",
+        "name": "stzhMetanavItemChildClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Metanav item child click event"
+        },
+        "complexType": {
+          "original": "StzhHeaderMetanavItemChildClickEvent",
+          "resolved": "{ component: \"stzh-header\"; itemChild: StzhHeaderMetanavItemChild; originalEvent: MouseEvent; }",
+          "references": {
+            "StzhHeaderMetanavItemChildClickEvent": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhHeaderMetanavItemChildClickEvent"
+            }
+          }
+        }
+      }, {
+        "method": "stzhMetanavItemButtonClick",
+        "name": "stzhMetanavItemButtonClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Metanav item button click event"
+        },
+        "complexType": {
+          "original": "StzhHeaderMetanavItemButtonClickEvent",
+          "resolved": "{ component: \"stzh-header\"; itemButton: StzhHeaderMetanavItemButton; originalEvent: MouseEvent; }",
+          "references": {
+            "StzhHeaderMetanavItemButtonClickEvent": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhHeaderMetanavItemButtonClickEvent"
+            }
+          }
+        }
       }, {
         "method": "stzhMenuItemClick",
         "name": "stzhMenuItemClick",
@@ -1107,12 +1174,18 @@ export class StzhHeader {
     return [{
         "propName": "flyoutOpen",
         "methodName": "flyoutOpenWatcher"
+      }, {
+        "propName": "flyoutSearchOpen",
+        "methodName": "flyoutOpenWatcher"
       }, {
         "propName": "fixed",
         "methodName": "fixedWatcher"
       }, {
         "propName": "flyoutOpen",
         "methodName": "fixedWatcher"
+      }, {
+        "propName": "flyoutSearchOpen",
+        "methodName": "fixedWatcher"
       }, {
         "propName": "headerHeight",
         "methodName": "fixedWatcher"
@@ -1140,6 +1213,12 @@ export class StzhHeader {
         "target": "document",
         "capture": false,
         "passive": false
+      }, {
+        "name": "stzhOverlayCloseClick",
+        "method": "flyoutCloseClicked",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }, {
         "name": "scroll",
         "method": "scrollListener",