@oiz/stzh-components 3.3.0-beta4 → 3.3.0-beta6

package/dist/components/stzh-header.js

@@ -165,7 +165,7 @@ const StzhHeader$1 = /*@__PURE__*/ proxyCustomElement(class StzhHeader extends H
     this.logoType = "default";
     this.menuItems = [];
     this.menuBackLabel = undefined;
-    this.standardMetanavItems = [];
+    this.metanavItems = [];
     this.userSpecificMetanavItemsNotLoggedIn = [];
     this.appNavItems = [];
     this.userSpecificMetanavItemsEndpoint = undefined;
@@ -316,14 +316,22 @@ const StzhHeader$1 = /*@__PURE__*/ proxyCustomElement(class StzhHeader extends H
     }
     this._menuItems = this._menuItems.map((menuItem, index) => (Object.assign({ id: `submenu-${index}` }, menuItem)));
   }
-  standardMetanavItemsWatcher(newValue) {
+  metanavItemsWatcher(newValue) {
     if (typeof newValue === "string") {
-      this._standardMetanavItems = JSON.parse(newValue);
+      this._metanavItems = JSON.parse(newValue);
     }
     else {
-      this._standardMetanavItems = newValue;
+      this._metanavItems = newValue;
+    }
+    this._metanavItems = this._metanavItems.map((metanavItem, index) => (Object.assign({ id: `metanav-submenu-${index}` }, metanavItem)));
+  }
+  appNavItemsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._appNavItems = JSON.parse(newValue);
+    }
+    else {
+      this._appNavItems = newValue;
     }
-    this._standardMetanavItems = this._standardMetanavItems.map((metanavItem, index) => (Object.assign({ id: `metanav-submenu-${index}` }, metanavItem)));
   }
   userSpecificMetanavItemsNotLoggedInWatcher(newValue) {
     this._userSpecificMetanavItemsNotLoggedIn = newValue;
@@ -446,16 +454,16 @@ const StzhHeader$1 = /*@__PURE__*/ proxyCustomElement(class StzhHeader extends H
   }
   async requestUserSpecificMetanavItems() {
     if (!this.userSpecificMetanavItemsEndpoint) {
-      this.combinedMetanavItems = [...this._standardMetanavItems, ...this._userSpecificMetanavItemsNotLoggedIn];
+      this.combinedMetanavItems = [...this._metanavItems, ...this._userSpecificMetanavItemsNotLoggedIn];
       return;
     }
     try {
       const response = await fetch(this.userSpecificMetanavItemsEndpoint);
       this.userSpecificMetanavItemsLoggedIn = await response.json();
-      this.combinedMetanavItems = [...this._standardMetanavItems, ...this.userSpecificMetanavItemsLoggedIn];
+      this.combinedMetanavItems = [...this._metanavItems, ...this.userSpecificMetanavItemsLoggedIn];
     }
     catch (error) {
-      this.combinedMetanavItems = [...this._standardMetanavItems, ...this._userSpecificMetanavItemsNotLoggedIn]; // fallback to not logged in items
+      this.combinedMetanavItems = [...this._metanavItems, ...this._userSpecificMetanavItemsNotLoggedIn]; // fallback to not logged in items
       console.error('Error fetching data:', error);
       if (this.loginErrorMessage) {
         document.querySelector('stzh-toastbar')
@@ -467,7 +475,8 @@ const StzhHeader$1 = /*@__PURE__*/ proxyCustomElement(class StzhHeader extends H
   }
   async componentWillLoad() {
     this.menuItemsWatcher(this.menuItems);
-    this.standardMetanavItemsWatcher(this.standardMetanavItems);
+    this.metanavItemsWatcher(this.metanavItems);
+    this.appNavItemsWatcher(this.appNavItems);
     this.languagesWatcher(this.languages);
     this.searchValueWatcher(this.searchValue);
     this.userSpecificMetanavItemsNotLoggedInWatcher(this.userSpecificMetanavItemsNotLoggedIn);
@@ -521,14 +530,14 @@ const StzhHeader$1 = /*@__PURE__*/ proxyCustomElement(class StzhHeader extends H
       "stzh-header--hide-logo": this.hideLogo,
       "stzh-header--has-empty-metabar-mobile": !metanavBeforeUsed &&
         !metanavAfterUsed &&
-        this._standardMetanavItems.filter((item) => item.stay || item.stayAndShowInMobileMenu).length === 0 &&
+        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._standardMetanavItems.length === 0 &&
+        this._metanavItems.length === 0 &&
         this._menuItems.length === 0 &&
         this._languages.length === 0 &&
         !this.searchAction,
@@ -550,7 +559,7 @@ const StzhHeader$1 = /*@__PURE__*/ proxyCustomElement(class StzhHeader extends H
           "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.appNavItems.length > 0 && (h("div", { class: "stzh-header__app-nav-bottom" }, h("stzh-app-nav", { items: this.appNavItems }))), 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.appNavItems.length > 0 && (h("div", { class: "stzh-header__app-nav" }, h("stzh-app-nav", { items: this.appNavItems }))), h("div", { class: "stzh-header__metabar-nav", id: this.metanavId }, h("slot", { name: "metanav-before" }), this.combinedMetanavItems.map((item) => {
+    return (h(Host, null, h("header", { class: classes }, h("div", { class: "stzh-header__header", style: { paddingTop: `${this.paddingTop}px` } }, this._appNavItems.length > 0 && (h("div", { class: "stzh-header__app-nav-bottom" }, h("stzh-app-nav", { items: this._appNavItems }))), 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._appNavItems.length > 0 && (h("div", { class: "stzh-header__app-nav" }, h("stzh-app-nav", { items: this._appNavItems }))), h("div", { class: "stzh-header__metabar-nav", id: this.metanavId }, 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,
@@ -648,7 +657,8 @@ const StzhHeader$1 = /*@__PURE__*/ proxyCustomElement(class StzhHeader extends H
     "sticky": ["stickyWatcher"],
     "searchValue": ["searchValueWatcher"],
     "menuItems": ["menuItemsWatcher"],
-    "standardMetanavItems": ["standardMetanavItemsWatcher"],
+    "metanavItems": ["metanavItemsWatcher"],
+    "appNavItems": ["appNavItemsWatcher"],
     "userSpecificMetanavItemsNotLoggedIn": ["userSpecificMetanavItemsNotLoggedInWatcher"],
     "languages": ["languagesWatcher"]
   }; }
@@ -663,9 +673,9 @@ const StzhHeader$1 = /*@__PURE__*/ proxyCustomElement(class StzhHeader extends H
     "logoType": [513, "logo-type"],
     "menuItems": [1, "menu-items"],
     "menuBackLabel": [1, "menu-back-label"],
-    "standardMetanavItems": [1, "standard-metanav-items"],
+    "metanavItems": [1, "metanav-items"],
     "userSpecificMetanavItemsNotLoggedIn": [16],
-    "appNavItems": [16],
+    "appNavItems": [1, "app-nav-items"],
     "userSpecificMetanavItemsEndpoint": [1, "user-specific-metanav-items-endpoint"],
     "languageActive": [1025, "language-active"],
     "languages": [1],
@@ -701,7 +711,8 @@ const StzhHeader$1 = /*@__PURE__*/ proxyCustomElement(class StzhHeader extends H
     "sticky": ["stickyWatcher"],
     "searchValue": ["searchValueWatcher"],
     "menuItems": ["menuItemsWatcher"],
-    "standardMetanavItems": ["standardMetanavItemsWatcher"],
+    "metanavItems": ["metanavItemsWatcher"],
+    "appNavItems": ["appNavItemsWatcher"],
     "userSpecificMetanavItemsNotLoggedIn": ["userSpecificMetanavItemsNotLoggedInWatcher"],
     "languages": ["languagesWatcher"]
   }]);