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

package/dist/collection/components/stzh-app-nav/stzh-app-nav.js

@@ -1,6 +1,13 @@
 import { h, Host } from "@stencil/core";
 export class StzhAppNav {
   constructor() {
+    this.handleAppNavItemClick = (event, item) => {
+      this.stzhAppNavItemClick.emit({
+        component: "stzh-app-nav",
+        item,
+        originalEvent: event,
+      });
+    };
     this.localization = undefined;
     this.items = [];
   }
@@ -13,7 +20,7 @@ export class StzhAppNav {
     const classes = {
       "stzh-app-nav": true,
     };
-    return (h(Host, null, h("nav", { role: "navigation", class: classes, "aria-label": this.localization.title }, h("div", { class: "stzh-app-nav__links", role: "list" }, this.items.map((item) => (h("stzh-link", { class: "stzh-app-nav__link", active: item.active, role: "listitem", "a11y-current": item.a11yCurrent, href: item.href, badge: item.badge, badgeType: item.badgeType, icon: item.icon }, item.text)))))));
+    return (h(Host, null, h("nav", { role: "navigation", class: classes, "aria-label": this.localization.title }, h("div", { class: "stzh-app-nav__links", role: "list" }, this.items.map((item) => (h("stzh-link", { class: "stzh-app-nav__link", active: item.active, role: "listitem", "a11y-current": item.a11yCurrent, href: item.href, badge: item.badge, badgeType: item.badgeType, icon: item.icon, onClick: (e) => { this.handleAppNavItemClick(e, item); } }, item.text)))))));
   }
   static get is() { return "stzh-app-nav"; }
   static get encapsulation() { return "shadow"; }
@@ -74,6 +81,30 @@ export class StzhAppNav {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "stzhAppNavItemClick",
+        "name": "stzhAppNavItemClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "AppNav item click event"
+        },
+        "complexType": {
+          "original": "StzhAppNavItemClickEvent",
+          "resolved": "{ component: \"stzh-app-nav\"; item: StzhAppNavItem; originalEvent: MouseEvent; }",
+          "references": {
+            "StzhAppNavItemClickEvent": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhAppNavItemClickEvent"
+            }
+          }
+        }
+      }];
+  }
   static get elementRef() { return "element"; }
 }
 //# sourceMappingURL=stzh-app-nav.js.map

package/dist/collection/components/stzh-app-nav/stzh-app-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-app-nav.js","sourceRoot":"","sources":["../../../../src/components/stzh-app-nav/stzh-app-nav.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAYlE,MAAM,OAAO,UAAU;;;iBAKa,EAAE;;EAIpC,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;KACjG;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,YAAY,CAAC,KAAK;QACxE,WAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,IAC3C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACxB,iBACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,IACb,IAAI,CAAC,IAAI,CACD,CACb,CAAC,CACI,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Element } from \"@stencil/core\";\n\nimport { StzhAppNavLocalizedText } from \"./stzh-app-nav.localization\";\n\nimport { StzhAppNavItem } from \"../../index\";\n\n@Component({\n  tag: \"stzh-app-nav\",\n  styleUrl: \"stzh-app-nav.scss\",\n  shadow: true,\n})\n\nexport class StzhAppNav {\n  /** Translation strings */\n  @Prop() localization: StzhAppNavLocalizedText;\n\n  /** App-nav items */\n  @Prop() items: StzhAppNavItem[] = [];\n\n  @Element() element: HTMLStzhAppNavElement;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-app-nav\": true,\n    };\n\n    return (\n      <Host>\n        <nav role=\"navigation\" class={classes} aria-label={this.localization.title}>\n          <div class=\"stzh-app-nav__links\" role=\"list\">\n          {this.items.map((item) => (\n            <stzh-link\n              class=\"stzh-app-nav__link\"\n              active={item.active}\n              role=\"listitem\"\n              a11y-current={item.a11yCurrent}\n              href={item.href}\n              badge={item.badge}\n              badgeType={item.badgeType}\n              icon={item.icon}\n              >{item.text}\n            </stzh-link>\n          ))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-app-nav.js","sourceRoot":"","sources":["../../../../src/components/stzh-app-nav/stzh-app-nav.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAe,MAAM,eAAe,CAAC;AAYrF,MAAM,OAAO,UAAU;;IAkBb,0BAAqB,GAAG,CAAC,KAAiB,EAAE,IAAoB,EAAE,EAAE;MAC1E,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;QAC5B,SAAS,EAAE,cAAc;QACzB,IAAI;QACJ,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;IACL,CAAC,CAAC;;iBAnBgC,EAAE;;EAOpC,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;KACjG;EACH,CAAC;EAUD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,YAAY,CAAC,KAAK;QACxE,WAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,IAC3C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACxB,iBACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE,GAAG,IAAI,CAAC,qBAAqB,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA,CAAC,CAAC,IACjE,IAAI,CAAC,IAAI,CACD,CACb,CAAC,CACI,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, Host, Element, Event, EventEmitter} from \"@stencil/core\";\n\nimport { StzhAppNavLocalizedText } from \"./stzh-app-nav.localization\";\n\nimport {StzhAppNavItem, StzhAppNavItemClickEvent} from \"../../index\";\n\n@Component({\n  tag: \"stzh-app-nav\",\n  styleUrl: \"stzh-app-nav.scss\",\n  shadow: true,\n})\n\nexport class StzhAppNav {\n  /** Translation strings */\n  @Prop() localization: StzhAppNavLocalizedText;\n\n  /** App-nav items */\n  @Prop() items: StzhAppNavItem[] = [];\n\n  @Element() element: HTMLStzhAppNavElement;\n\n  /** AppNav item click event */\n  @Event() stzhAppNavItemClick: EventEmitter<StzhAppNavItemClickEvent>;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n    }\n  }\n\n  private handleAppNavItemClick = (event: MouseEvent, item: StzhAppNavItem) => {\n    this.stzhAppNavItemClick.emit({\n      component: \"stzh-app-nav\",\n      item,\n      originalEvent: event,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-app-nav\": true,\n    };\n\n    return (\n      <Host>\n        <nav role=\"navigation\" class={classes} aria-label={this.localization.title}>\n          <div class=\"stzh-app-nav__links\" role=\"list\">\n          {this.items.map((item) => (\n            <stzh-link\n              class=\"stzh-app-nav__link\"\n              active={item.active}\n              role=\"listitem\"\n              a11y-current={item.a11yCurrent}\n              href={item.href}\n              badge={item.badge}\n              badgeType={item.badgeType}\n              icon={item.icon}\n              onClick={(e: MouseEvent) => { this.handleAppNavItemClick(e, item) }}\n              >{item.text}\n            </stzh-link>\n          ))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-app-nav/stzh-app-nav.stories.js

@@ -17,7 +17,7 @@ export default {
   parameters: {
     layout: 'full',
     actions: {
-      handles: []
+      handles: ['stzhAppNavItemClick']
     },
     docs: {
       description: {

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.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);
@@ -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,
@@ -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"