@oiz/stzh-components 3.3.0-beta5 → 3.3.0

package/dist/collection/assets/i18n/de.json

@@ -150,11 +150,11 @@
     "removeButtonTitle": "Option löschen"
   },
   "upload": {
-    "heading": "Bitte Datei hochladen",
+    "heading": "Bitte Dokument hochladen",
     "description": "Zulässige Dateiformate: {{fileformats}} (max. {{filesize}} MB)",
     "buttonIntro": "oder Dateien hier reinziehen",
-    "button": "Datei auswählen | Dateien auswählen",
-    "buttonScan": "Dokument fotografieren | Dokumente fotografieren",
+    "button": "Datei auswählen",
+    "buttonScan": "Dokument fotografieren",
     "cancelUpload": "Upload abbrechen",
     "uploadCanceled": "Upload abgebrochen.",
     "cancelUploadConfirmation": "Sind Sie sicher, dass Sie den Upload abbrechen wollen?",
@@ -172,7 +172,9 @@
     "photographingText1": "Sie können Ihre Dokumente mit Ihrem Smartphone oder Tablet fotografieren und hochladen. Scannen Sie den QR-Code mit Ihrem mobilen Gerät oder geben Sie folgende URL in den Browser ihres mobilen Gerätes ein:",
     "photographingTitle2": "2 Dokument hochladen",
     "photographingText2": "Sobald Sie die Webseite auf Ihrem mobilen Gerät geöffnet haben, können Sie die Dokumente fotografieren oder aus dem Speicher Ihres Geräts hochladen.",
-    "back": "Zurück"
+    "back": "Zurück",
+    "uploadSuccessToast": "Hochladen erfolgreich",
+    "uploadErrorToast": "Fehler beim Hochladen"
   },
   "calendar": {
     "prevMonthLabel": "Vorheriger Monat",

package/dist/collection/assets/i18n/en.json

@@ -150,11 +150,11 @@
     "removeButtonTitle": "Remove item"
   },
   "upload": {
-    "heading": "Please upload file",
+    "heading": "Please upload documents",
     "description": "Allowed file formats: {{fileformats}} (max. {{filesize}} MB)",
     "buttonIntro": "or drag files here",
-    "button": "Choose file | Choose files",
-    "buttonScan": "Scan document | Scan documents",
+    "button": "Choose file",
+    "buttonScan": "Photograph document",
     "cancelUpload": "Cancel upload",
     "uploadCanceled": "Upload canceled.",
     "cancelUploadConfirmation": "Are you sure you want to cancel this upload?",
@@ -172,7 +172,9 @@
     "photographingText1": "You can take a photo of your documents with your smartphone or tablet and upload them. Scan the QR code with your mobile device or enter the following URL in the browser of your mobile device:",
     "photographingTitle2": "2 Upload document",
     "photographingText2": "Once you have opened the website on your mobile device, you can take a photo of the documents or upload them from your device's storage.",
-    "back": "Zurück"
+    "back": "Back",
+    "uploadSuccessToast": "Upload successful",
+    "uploadErrorToast": "Error during upload"
   },
   "calendar": {
     "prevMonthLabel": "Previous month",

package/dist/collection/components/stzh-button/stzh-button.css

@@ -208,7 +208,7 @@
   --hover-color: var(--stzh-button-hover-color, var(--stzh-color-white));
   --hover-background-color: var(--stzh-button-hover-background-color, var(--stzh-color-secondary60));
   --hover-border-color: transparent;
-  display: inline-grid;
+  display: inline-flex;
   width: auto;
   min-width: var(--height);
   min-height: var(--height);
@@ -497,7 +497,8 @@
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
   width: 100%;
-  height: 100%;
+  min-height: 100%;
+  margin: 0;
   border-radius: var(--border-radius);
   text-align: left;
   box-shadow: var(--box-shadow);

package/dist/collection/components/stzh-header/stzh-header.css

@@ -1149,7 +1149,7 @@
   bottom: 0;
   left: 0;
   width: calc(100vw - var(--stzh-scrollbar-width));
-  z-index: var(--stzh-z-index-header);
+  z-index: calc(var(--stzh-z-index-header) - 1);
 }
 @media screen and (min-width: 900px) {
   .stzh-header__app-nav-bottom {

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

@@ -155,7 +155,7 @@ export class StzhHeader {
     this.logoType = "default";
     this.menuItems = [];
     this.menuBackLabel = undefined;
-    this.standardMetanavItems = [];
+    this.metanavItems = [];
     this.userSpecificMetanavItemsNotLoggedIn = [];
     this.appNavItems = [];
     this.userSpecificMetanavItemsEndpoint = undefined;
@@ -306,14 +306,22 @@ export class StzhHeader {
     }
     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;
@@ -436,16 +444,16 @@ export class StzhHeader {
   }
   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')
@@ -457,7 +465,8 @@ export class StzhHeader {
   }
   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);
@@ -496,7 +505,7 @@ export class StzhHeader {
     (_b = this.flyoutResizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
   }
   render() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const metanavBeforeUsed = hasSlot(this.element, "metanav-before");
     const metanavAfterUsed = hasSlot(this.element, "metanav-after");
     const classes = {
@@ -511,14 +520,14 @@ export class StzhHeader {
       "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,
@@ -540,7 +549,7 @@ export class StzhHeader {
           "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,
@@ -587,7 +596,7 @@ export class StzhHeader {
         "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 => {
+      } }, 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,
@@ -595,8 +604,8 @@ export class StzhHeader {
         } }, ((_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.combinedMetanavItems) === 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.combinedMetanavItems.map((item) => {
+    }))), (((_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,
@@ -624,7 +633,7 @@ export class StzhHeader {
           "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: {
+    }), ((_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" })))))));
@@ -813,7 +822,7 @@ export class StzhHeader {
         "attribute": "menu-back-label",
         "reflect": false
       },
-      "standardMetanavItems": {
+      "metanavItems": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -833,7 +842,7 @@ export class StzhHeader {
           "tags": [],
           "text": "Generic meta navigation items"
         },
-        "attribute": "standard-metanav-items",
+        "attribute": "metanav-items",
         "reflect": false,
         "defaultValue": "[]"
       },
@@ -860,11 +869,11 @@ export class StzhHeader {
         "defaultValue": "[]"
       },
       "appNavItems": {
-        "type": "unknown",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "StzhAppNavItem[]",
-          "resolved": "StzhAppNavItem[]",
+          "original": "StzhAppNavItem[] | string",
+          "resolved": "StzhAppNavItem[] | string",
           "references": {
             "StzhAppNavItem": {
               "location": "import",
@@ -877,8 +886,10 @@ export class StzhHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "App-nav items"
+          "text": "App-Nav items"
         },
+        "attribute": "app-nav-items",
+        "reflect": false,
         "defaultValue": "[]"
       },
       "userSpecificMetanavItemsEndpoint": {
@@ -1320,8 +1331,11 @@ export class StzhHeader {
         "propName": "menuItems",
         "methodName": "menuItemsWatcher"
       }, {
-        "propName": "standardMetanavItems",
-        "methodName": "standardMetanavItemsWatcher"
+        "propName": "metanavItems",
+        "methodName": "metanavItemsWatcher"
+      }, {
+        "propName": "appNavItems",
+        "methodName": "appNavItemsWatcher"
       }, {
         "propName": "userSpecificMetanavItemsNotLoggedIn",
         "methodName": "userSpecificMetanavItemsNotLoggedInWatcher"