@sapudex/web-components 2.4.1 → 2.5.0

package/src/MastheadShell.ts

@@ -13,6 +13,7 @@ import {
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/menu2.js";
 import "@ui5/webcomponents-icons/dist/search.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { MAIN_LINKS } from "./generated/i18n/i18n-defaults.js";
@@ -23,9 +24,9 @@ import type UDExSearch from "./Search.js";
 import UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
 import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
 import type UDExMastheadCountrySelector from "./MastheadCountrySelector.js";
-import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.lit.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import AnalyticsName from "./types/AnalyticsName.js";
+import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.lit.js";
 
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
@@ -161,6 +162,13 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  */
 @event("site-label-click", { bubbles: true })
 
+/**
+ * Fired event when the user clicks the co-brand.
+ *
+ * @public
+ */
+@event("co-brand-click", { bubbles: true })
+
 class UDExMastheadShell extends UI5Element {
   eventDetails!: {
     "mobile-menu-open": UDExMastheadShellAnalyticsNameEventDetail,
@@ -175,6 +183,7 @@ class UDExMastheadShell extends UI5Element {
     "search-close-click": UDExMastheadShellBaseEventDetail,
     "logo-click": UDExMastheadShellBaseEventDetail,
     "site-label-click": UDExMastheadShellBaseEventDetail,
+    "co-brand-click": UDExMastheadShellBaseEventDetail,
   };
   /**
    * Slot for country selector item.
@@ -248,17 +257,17 @@ class UDExMastheadShell extends UI5Element {
    * @default undefined
    * @public
    */
-  @property({ type: String })
+  @property()
     homeUrl?: string;
 
   /**
    * Defines URL for site label. It will be used as a link on a logo and a site label
    *
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ type: String })
-    siteLabelUrl: string = "";
+  @property()
+    siteLabelUrl?: string;
 
   /**
    * Defines overflow style for the body after clicking mobile menu opener button
@@ -288,66 +297,121 @@ class UDExMastheadShell extends UI5Element {
     stickyPosition!: boolean;
 
   /**
-   * Defines the Logo image URL
+   * Defines the co-brand image
    *
-   * @default ""
+   * @default undefined
+   * @public
+   */
+  @property()
+    coBrandImage?: string;
+
+  /**
+   * Defines an alt text for the co-brand image
+   *
+   * @default undefined
    * @public
    */
   @property({ type: String })
-    logoUrl: string = "";
+    coBrandAlt?: string;
+
+  /**
+   * Defines the co-brand URL
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    coBrandUrl?: string;
+
+  /**
+   * Defines the default tooltip title for co-brand
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    coBrandTitle?: string;
+
+  /**
+   * Defines an aria label for the co-brand link
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    coBrandAriaLabel?: string;
+
+  /**
+   * Defines the Logo image URL
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    logoUrl?: string;
 
   /**
    * Defines the Logo default title
    *
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ type: String })
-    logoTitle: string = "";
+  @property()
+    logoTitle?: string;
+
+  /**
+   * Defines the default tooltip title for site label
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    siteLabelTitle?: string;
 
   /**
    * Defines a site label. It will be displayed next to a logo.
    *
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ type: String })
-    siteLabel: string = "";
+  @property()
+    siteLabel?: string;
 
   /**
    * Defines an alt text for logo
    *
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ type: String })
-    logoAlt: string = "";
+  @property()
+    logoAlt?: string;
 
   /**
    * Defines an accessible name for close icon for the search bar
    *
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ type: String })
-    closeButtonAccessibleName: string = "";
+  @property()
+    closeButtonAccessibleName?: string;
+
   /**
    * Defines an aria label for the homepage link
    *
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ type: String })
-    homepageAriaLabel: string = "";
+  @property()
+    homepageAriaLabel?: string;
 
   /**
    * Defines an aria label for the site label
    *
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ type: String })
-    siteLabelAriaLabel: string = "";
+  @property()
+    siteLabelAriaLabel?: string;
 
   /**
    * Defines if the search container is opened
@@ -417,6 +481,9 @@ class UDExMastheadShell extends UI5Element {
 
   onEnterDOM(): void {
     ResizeHandler.register(this, this._handleResizeBound);
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
   }
 
   onExitDOM(): void {
@@ -513,6 +580,10 @@ class UDExMastheadShell extends UI5Element {
     this.fireMastheadEvent("site-label-click", e);
   }
 
+  handleCoBrandClick(e: PointerEvent): void {
+    this.fireMastheadEvent("co-brand-click", e);
+  }
+
   handleSearchClick(e: PointerEvent): void {
     e.stopPropagation();
     this.fireMastheadEvent("search-click", e);
@@ -552,7 +623,7 @@ class UDExMastheadShell extends UI5Element {
       this.setOverflowBody();
     }
 
-    this.fireDecoratorEvent("mobile-menu-open");
+    this.fireMastheadEvent("mobile-menu-open");
   }
 
   handleCloseSearch(e: PointerEvent): void {
@@ -814,7 +885,7 @@ class UDExMastheadShell extends UI5Element {
       this.removeOverflowBody();
     }
 
-    this.fireDecoratorEvent("mobile-menu-close");
+    this.fireMastheadEvent("mobile-menu-close");
   }
 
   get slottedItems(): (MastheadSlottedItem)[] {
@@ -919,7 +990,7 @@ class UDExMastheadShell extends UI5Element {
   }
 
   get isMainMenuVisible(): boolean {
-    return !this.showSearchByDefault && !this._isSearchOpened;
+    return !this.showSearchByDefault && !this._isSearchOpened && !!this.menuItems.length;
   }
 
   get isSearchVisible(): boolean {
@@ -933,6 +1004,11 @@ class UDExMastheadShell extends UI5Element {
   get mainNavigationAriaLabel(): string {
     return UDExMastheadShell.i18nBundle.getText(MAIN_LINKS);
   }
+
+  get mainClass(): string {
+    const coBrandWithoutNavClass = (!!this.coBrandImage && !this.menuItems.length) ? "udex-masthead-shell_co-brand-without-nav" : "";
+    return `udex-masthead-shell ${coBrandWithoutNavClass}`.trim();
+  }
 }
 
 UDExMastheadShell.define();

package/src/MediaPlayer.ts

@@ -7,7 +7,6 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/play.js";
-import "@ui5/webcomponents-icons/dist/v5/play.svg";
 import UDExMediaPlayerYoutube from "./MediaPlayerYoutube.js";
 import type { VimeoPlayer } from "./MediaPlayerVimeo.js";
 import UDExMediaPlayerVimeo from "./MediaPlayerVimeo.js";

package/src/SearchableListBase.ts

@@ -324,6 +324,10 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   checkAndUpdateLabel(item: UDExListItemBase | UDExListGroupHeaderBase, str: string): boolean {
+    if (!item.label) {
+      console.warn("A label property is required for the item");
+      return false;
+    }
     const cleanedLabel = cleanLabel(item.label);
     if (this.isIncludes(cleanedLabel, str)) {
       item.label = this.addSearchTermTag(cleanedLabel, str);

package/src/SecondaryNavigation.hbs

@@ -8,7 +8,12 @@
         {{#if heading.length}}
             <div class="udex-secondary-navigation__heading">
                 {{#if headingHref.length}}
-                    <a class="udex-secondary-navigation__title" href="{{headingHref}}">{{heading}}</a>
+                    <a
+                        class="udex-secondary-navigation__title"
+                        @click="{{handleHeadingClick}}"
+                        href="{{headingHref}}">
+                        {{heading}}
+                    </a>
                 {{else}}
                     <span class="udex-secondary-navigation__title">{{heading}}</span>
                 {{/if}}

package/src/SecondaryNavigation.ts

@@ -21,6 +21,7 @@ import { MORE } from "./generated/i18n/i18n-defaults.js";
 import SecondaryNavigationTemplate from "./generated/templates/SecondaryNavigationTemplate.lit.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
+import AnalyticsName from "./types/AnalyticsName.js";
 
 // Styles
 import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.js";
@@ -32,6 +33,15 @@ type UDExSecondaryNavigationClickEventDetail = {
   originalEvent: Event,
   clickedItem: NavItem;
   clickedIndex: number;
+  isMobile?: boolean,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
+};
+
+type UDExSecondaryNavigationHeadingClickEventDetail = {
+  originalEvent: Event,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 };
 
 /**
@@ -70,6 +80,7 @@ type UDExSecondaryNavigationClickEventDetail = {
 class UDExSecondaryNavigation extends UI5Element {
   eventDetails!: {
     "item-click": UDExSecondaryNavigationClickEventDetail,
+    "heading-click": UDExSecondaryNavigationHeadingClickEventDetail,
   };
   /**
    * Defines an aria label for the mobile menu opener
@@ -352,6 +363,14 @@ class UDExSecondaryNavigation extends UI5Element {
     }
   }
 
+  handleHeadingClick(e: CustomEvent<UDExSecondaryNavigationHeadingClickEventDetail>): void {
+    this.fireDecoratorEvent("heading-click", {
+      analyticsName: AnalyticsName.HeaderSub,
+      sourceNode: e.target as HTMLElement,
+      originalEvent: e,
+    });
+  }
+
   fireEventItemClick(
     e: PointerEvent | KeyboardEvent,
     clickedIndex: number,
@@ -360,6 +379,9 @@ class UDExSecondaryNavigation extends UI5Element {
     }: NavItem,
   ): boolean {
     return this.fireDecoratorEvent("item-click", {
+      ...(this.isMobileScreen && { isMobile: true }),
+      analyticsName: AnalyticsName.HeaderSub,
+      sourceNode: e?.currentTarget as HTMLElement,
       originalEvent: e,
       clickedItem: {
         mobileLinkTitle: mobileLinkTitle || "",

package/src/TagGroup.ts

@@ -223,9 +223,10 @@ class UDExTagGroup extends UI5Element {
   showMoreItems(): void {
     if (this.fireDecoratorEvent("show-more-tags")) {
       const tooltip = this.shadowRoot!.querySelector<UDExTooltip>(`#${this._id}-tag-group-tooltip`)!;
-      if (this._nMoreBtn) {
+      const moreBtn = this._tokenizer.moreLink;
+      if (moreBtn) {
         this._tokenizer.expanded = false;
-        tooltip.opener = this._nMoreBtn;
+        tooltip.opener = moreBtn;
         tooltip.open = true;
       }
     }

package/src/generated/templates/MastheadItemTemplate.lit.ts

@@ -6,27 +6,27 @@ import type MastheadItem from "../../MastheadItem.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
 function block0 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.hasHref ? block1.call(this, context, tags, suffix) : block9.call(this, context, tags, suffix) } `;}
-function block1 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a id="${ifDefined(this._id)}" class="${ifDefined(this.additionalClass)}" tabindex="0" role="${ifDefined(this.accessibleRoleName)}" target="${ifDefined(this.target)}" href="${ifDefined(this.href)}" aria-label="${ifDefined(this.accessibleLabel)}" aria-describedby="${ifDefined(this.ariaDescribedBy)}" @click="${this.handleItemClick}">${ this.icon ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }</a>${ this.isTargetBlank ? block8.call(this, context, tags, suffix) : undefined }`;}
+function block1 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a id="${ifDefined(this._id)}" class="${ifDefined(this.additionalClass)}" tabindex="0" role="${ifDefined(this.accessibleRoleName)}" target="${ifDefined(this.target)}" href="${ifDefined(this.href)}" aria-label="${ifDefined(this.accessibleLabel)}" aria-describedby="${ifDefined(this.ariaDescribedBy)}" @click="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}">${ this.icon ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }</a>${ this.isTargetBlank ? block8.call(this, context, tags, suffix) : undefined }`;}
 function block2 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAlt)}" accessible-name="${ifDefined(this.iconAlt)}" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAlt)}" accessible-name="${ifDefined(this.iconAlt)}" mode="Decorative"></ui5-icon>`;}
 function block3 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.image ? block4.call(this, context, tags, suffix) : block6.call(this, context, tags, suffix) }`;}
-function block4 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<img class="udex-masthead-item__image" id="${ifDefined(this._id)}_image-alt" src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}"/>${ this.imageAlt ? block5.call(this, context, tags, suffix) : undefined }`;}
+function block4 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-item__image-wrap"><img class="udex-masthead-item__image" id="${ifDefined(this._id)}_image-alt" src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}"/></div>${ this.imageAlt ? block5.call(this, context, tags, suffix) : undefined }`;}
 function block5 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="image-desc" class="udex-masthead-hidden-text">${ifDefined(this.imageAlt)}</span>`;}
 function block6 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-masthead-item__text"><slot></slot>${ this.hasArrowDown ? block7.call(this, context, tags, suffix) : undefined }</span>`;}
 function block7 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__dropdown-icon" name="slim-arrow-down" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__dropdown-icon" name="slim-arrow-down" mode="Decorative"></ui5-icon>`;}
 function block8 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="new-win-desc" class="udex-masthead-hidden-text">${ifDefined(this.openInNewWindowText)}</span>`;}
 function block9 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isProfileBtn ? block10.call(this, context, tags, suffix) : block18.call(this, context, tags, suffix) }`;}
-function block10 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="${ifDefined(this._id)}" class="udex-masthead-item__btn ${ifDefined(this.additionalClass)}" aria-expanded="${ifDefined(this.selected)}" aria-describedby="${ifDefined(this.ariaDescribedBy)}" aria-controls="${ifDefined(this._id)}_dropdown" aria-haspopup="${ifDefined(this.hasDropdownSlot)}" aria-label="${ifDefined(this.accessibleLabel)}" @keydown="${this.handleKeyDown}" @click="${this.handleItemClick}">${ this.icon ? block11.call(this, context, tags, suffix) : block12.call(this, context, tags, suffix) }</span>${ this.isDropdownOpened ? block17.call(this, context, tags, suffix) : undefined }`;}
+function block10 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="${ifDefined(this._id)}" class="udex-masthead-item__btn ${ifDefined(this.additionalClass)}" aria-expanded="${ifDefined(this.selected)}" aria-describedby="${ifDefined(this.ariaDescribedBy)}" aria-controls="${ifDefined(this._id)}_dropdown" aria-haspopup="${ifDefined(this.hasDropdownSlot)}" aria-label="${ifDefined(this.accessibleLabel)}" @keydown="${this.handleKeyDown}" @click="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}">${ this.icon ? block11.call(this, context, tags, suffix) : block12.call(this, context, tags, suffix) }</span>${ this.isDropdownOpened ? block17.call(this, context, tags, suffix) : undefined }`;}
 function block11 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAlt)}" accessible-name="${ifDefined(this.iconAlt)}" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAlt)}" accessible-name="${ifDefined(this.iconAlt)}" mode="Decorative"></ui5-icon>`;}
 function block12 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.image ? block13.call(this, context, tags, suffix) : block15.call(this, context, tags, suffix) }`;}
-function block13 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<img class="udex-masthead-item__image" id="${ifDefined(this._id)}_image-alt" src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}"/>${ this.imageAlt ? block14.call(this, context, tags, suffix) : undefined }`;}
+function block13 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-item__image-wrap"><img class="udex-masthead-item__image" id="${ifDefined(this._id)}_image-alt" src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}"/></div>${ this.imageAlt ? block14.call(this, context, tags, suffix) : undefined }`;}
 function block14 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="image-desc" class="udex-masthead-hidden-text">${ifDefined(this.imageAlt)}</span>`;}
 function block15 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-masthead-item__text"><slot></slot>${ this.hasArrowDown ? block16.call(this, context, tags, suffix) : undefined }</span>`;}
 function block16 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__dropdown-icon" name="slim-arrow-down" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__dropdown-icon" name="slim-arrow-down" mode="Decorative"></ui5-icon>`;}
 function block17 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div id="${ifDefined(this._id)}_dropdown" class="udex-masthead-item__dropdown" @keydown="${this.handleKeyDown}" @focusout="${this.handleFocusout}"><div class="udex-masthead-item__dropdown-holder"><slot name="dropdown"></slot></div></div>`;}
-function block18 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button role="${ifDefined(this.accessibleRoleName)}" id="${ifDefined(this._id)}" class="udex-masthead-item__btn ${ifDefined(this.additionalClass)}" aria-expanded="${ifDefined(this.selected)}" aria-controls="${ifDefined(this._id)}_dropdown" aria-describedby="${ifDefined(this.ariaDescribedBy)}" aria-haspopup="${ifDefined(this.hasDropdownSlot)}" aria-label="${ifDefined(this.accessibleLabel)}" @keydown="${this.handleKeyDown}" @click="${this.handleItemClick}">${ this.icon ? block19.call(this, context, tags, suffix) : block20.call(this, context, tags, suffix) }</button>${ this.isDropdownOpened ? block25.call(this, context, tags, suffix) : undefined }`;}
+function block18 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button role="${ifDefined(this.accessibleRoleName)}" id="${ifDefined(this._id)}" class="udex-masthead-item__btn ${ifDefined(this.additionalClass)}" aria-expanded="${ifDefined(this.selected)}" aria-controls="${ifDefined(this._id)}_dropdown" aria-describedby="${ifDefined(this.ariaDescribedBy)}" aria-haspopup="${ifDefined(this.hasDropdownSlot)}" aria-label="${ifDefined(this.accessibleLabel)}" @keydown="${this.handleKeyDown}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}" @click="${this.handleItemClick}">${ this.icon ? block19.call(this, context, tags, suffix) : block20.call(this, context, tags, suffix) }</button>${ this.isDropdownOpened ? block25.call(this, context, tags, suffix) : undefined }`;}
 function block19 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAlt)}" accessible-name="${ifDefined(this.iconAlt)}" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAlt)}" accessible-name="${ifDefined(this.iconAlt)}" mode="Decorative"></ui5-icon>`;}
 function block20 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.image ? block21.call(this, context, tags, suffix) : block23.call(this, context, tags, suffix) }`;}
-function block21 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<img class="udex-masthead-item__image" id="${ifDefined(this._id)}_image-alt" src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}"/>${ this.imageAlt ? block22.call(this, context, tags, suffix) : undefined }`;}
+function block21 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-item__image-wrap"><img class="udex-masthead-item__image" id="${ifDefined(this._id)}_image-alt" src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}"/></div>${ this.imageAlt ? block22.call(this, context, tags, suffix) : undefined }`;}
 function block22 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="image-desc" class="udex-masthead-hidden-text">${ifDefined(this.imageAlt)}</span>`;}
 function block23 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-masthead-item__text"><slot></slot>${ this.hasArrowDown ? block24.call(this, context, tags, suffix) : undefined }</span>`;}
 function block24 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__dropdown-icon" name="slim-arrow-down" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__dropdown-icon" name="slim-arrow-down" mode="Decorative"></ui5-icon>`;}

package/src/generated/templates/MastheadMobileMenuTemplate.lit.ts

@@ -9,23 +9,23 @@ function block0 (this: MastheadMobileMenu, context: UI5Element, tags: string[],
 function block1 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-mobile-menu__list-search"><slot name="search"></slot></div>`;}
 function block2 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }`;}
 function block3 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-masthead-mobile-menu__list-item" role="none">${ item.subItems ? block4.call(this, context, tags, suffix, item, index) : block5.call(this, context, tags, suffix, item, index) }</li>`;}
-function block4 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMenuItemClick}" label="${ifDefined(item.innerText)}" aria-has-popup="true" id="${ifDefined(item._id)}" type="Button" has-border icon-end first-level></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" @click="${this.handleMenuItemClick}" label="${ifDefined(item.innerText)}" aria-has-popup="true" id="${ifDefined(item._id)}" type="Button" has-border icon-end first-level></udex-masthead-menu-item>`;}
-function block5 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileItemEvent}" url="${ifDefined(item.href)}" label="${ifDefined(item.innerText)}" target="${ifDefined(item.target)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" @click="${this.handleMobileItemEvent}" url="${ifDefined(item.href)}" label="${ifDefined(item.innerText)}" target="${ifDefined(item.target)}" has-border></udex-masthead-menu-item>`;}
+function block4 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMenuItemClick}" label="${ifDefined(item.innerText)}" aria-has-popup="true" id="${ifDefined(item._id)}" type="Button" first-level-btn first-level has-border icon-end first-level></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" @click="${this.handleMenuItemClick}" label="${ifDefined(item.innerText)}" aria-has-popup="true" id="${ifDefined(item._id)}" type="Button" first-level-btn first-level has-border icon-end first-level></udex-masthead-menu-item>`;}
+function block5 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileItemEvent}" url="${ifDefined(item.href)}" label="${ifDefined(item.innerText)}" target="${ifDefined(item.target)}" first-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" @click="${this.handleMobileItemEvent}" url="${ifDefined(item.href)}" label="${ifDefined(item.innerText)}" target="${ifDefined(item.target)}" first-level has-border></udex-masthead-menu-item>`;}
 function block6 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<li class="udex-masthead-mobile-menu__list-item" role="none">${ this._hideExploreSapBtn ? block7.call(this, context, tags, suffix) : block8.call(this, context, tags, suffix) }</li>${ this._clickedItem.href ? block11.call(this, context, tags, suffix) : undefined }${ repeat(this._categories, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block12.call(this, context, tags, suffix, item, index)) }`;}
-function block7 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleExploreBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" type="Button" has-border icon-start is-explore-back></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleExploreBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" type="Button" has-border icon-start is-explore-back></udex-masthead-menu-item>`;}
+function block7 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleExploreBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" type="Button" is-back has-border icon-start is-explore-back></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleExploreBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" type="Button" is-back has-border icon-start is-explore-back></udex-masthead-menu-item>`;}
 function block8 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isNotMultipleMode ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }`;}
 function block9 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__heading" label="${ifDefined(this._clickedItem.innerText)}" type="Heading" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__heading" label="${ifDefined(this._clickedItem.innerText)}" type="Heading" has-border></udex-masthead-menu-item>`;}
-function block10 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" aria-has-popup="true" type="Button" has-border icon-start is-back-to-nav></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" aria-has-popup="true" type="Button" has-border icon-start is-back-to-nav></udex-masthead-menu-item>`;}
-function block11 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" url="${ifDefined(this._clickedItem.href)}" label="${ifDefined(this.overviewLinkText)}" @click="${this.handleMobileItemEvent}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" url="${ifDefined(this._clickedItem.href)}" label="${ifDefined(this.overviewLinkText)}" @click="${this.handleMobileItemEvent}" has-border></udex-masthead-menu-item></li>`;}
+function block10 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" aria-has-popup="true" type="Button" is-back has-border icon-start is-back-to-nav></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" aria-has-popup="true" type="Button" is-back has-border icon-start is-back-to-nav></udex-masthead-menu-item>`;}
+function block11 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" url="${ifDefined(this._clickedItem.href)}" label="${ifDefined(this.overviewLinkText)}" @click="${this.handleMobileItemEvent}" second-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" url="${ifDefined(this._clickedItem.href)}" label="${ifDefined(this.overviewLinkText)}" @click="${this.handleMobileItemEvent}" second-level has-border></udex-masthead-menu-item></li>`;}
 function block12 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.category ? block13.call(this, context, tags, suffix, item, index) : block14.call(this, context, tags, suffix, item, index) }`;}
-function block13 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMenuCategoryClick}" url="${ifDefined(item.url)}" id="${index}" label="${ifDefined(item.category)}" aria-has-popup="true" type="Button" second-level has-border icon-end></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMenuCategoryClick}" url="${ifDefined(item.url)}" id="${index}" label="${ifDefined(item.category)}" aria-has-popup="true" type="Button" second-level has-border icon-end></udex-masthead-menu-item></li>`;}
+function block13 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMenuCategoryClick}" url="${ifDefined(item.url)}" id="${index}" label="${ifDefined(item.category)}" aria-has-popup="true" type="Button" second-level-btn second-level has-border icon-end></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMenuCategoryClick}" url="${ifDefined(item.url)}" id="${index}" label="${ifDefined(item.category)}" aria-has-popup="true" type="Button" second-level-btn second-level has-border icon-end></udex-masthead-menu-item></li>`;}
 function block14 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ repeat(item.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block15.call(this, context, tags, suffix, item, index)) }`;}
-function block15 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileItemEvent}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileItemEvent}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}" has-border></udex-masthead-menu-item></li>`;}
-function block16 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToCategories}" label="${ifDefined(this._category.category)}" type="Button" aria-has-popup="true" has-border icon-start is-back-to-categories></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>${ this._category.url ? block17.call(this, context, tags, suffix) : undefined }${ repeat(this._category.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block18.call(this, context, tags, suffix, item, index)) }` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToCategories}" label="${ifDefined(this._category.category)}" type="Button" aria-has-popup="true" has-border icon-start is-back-to-categories></udex-masthead-menu-item></li>${ this._category.url ? block17.call(this, context, tags, suffix) : undefined }${ repeat(this._category.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block18.call(this, context, tags, suffix, item, index)) }`;}
-function block17 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileCategoryItemEvent}" url="${ifDefined(this._category.url)}" label="${ifDefined(this.overviewLinkText)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileCategoryItemEvent}" url="${ifDefined(this._category.url)}" label="${ifDefined(this.overviewLinkText)}" has-border></udex-masthead-menu-item></li>`;}
+function block15 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileItemEvent}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}" second-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileItemEvent}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}" second-level has-border></udex-masthead-menu-item></li>`;}
+function block16 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToCategories}" label="${ifDefined(this._category.category)}" type="Button" aria-has-popup="true" has-border icon-start is-back is-back-to-categories></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>${ this._category.url ? block17.call(this, context, tags, suffix) : undefined }${ repeat(this._category.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block18.call(this, context, tags, suffix, item, index)) }` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToCategories}" label="${ifDefined(this._category.category)}" type="Button" aria-has-popup="true" has-border icon-start is-back is-back-to-categories></udex-masthead-menu-item></li>${ this._category.url ? block17.call(this, context, tags, suffix) : undefined }${ repeat(this._category.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block18.call(this, context, tags, suffix, item, index)) }`;}
+function block17 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileCategoryItemEvent}" url="${ifDefined(this._category.url)}" label="${ifDefined(this.overviewLinkText)}" third-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileCategoryItemEvent}" url="${ifDefined(this._category.url)}" label="${ifDefined(this.overviewLinkText)}" third-level has-border></udex-masthead-menu-item></li>`;}
 function block18 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.url ? block19.call(this, context, tags, suffix, item, index) : undefined }`;}
-function block19 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileCategoryItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileCategoryItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" has-border></udex-masthead-menu-item></li>`;}
-function block20 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" @keydown="${this.handleLeftRightKeys}" accessible-role-text="button" aria-has-popup="true" type="Button" first-level icon-end is-explore label="${ifDefined(this.exploreItem.innerText)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" @keydown="${this.handleLeftRightKeys}" accessible-role-text="button" aria-has-popup="true" type="Button" first-level icon-end is-explore label="${ifDefined(this.exploreItem.innerText)}"></udex-masthead-menu-item>`;}
+function block19 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileCategoryItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" third-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileCategoryItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" third-level has-border></udex-masthead-menu-item></li>`;}
+function block20 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" @keydown="${this.handleLeftRightKeys}" accessible-role-text="button" aria-has-popup="true" type="Button" first-level-btn first-level icon-end is-explore label="${ifDefined(this.exploreItem.innerText)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" @keydown="${this.handleLeftRightKeys}" accessible-role-text="button" aria-has-popup="true" type="Button" first-level-btn first-level icon-end is-explore label="${ifDefined(this.exploreItem.innerText)}"></udex-masthead-menu-item>`;}
 
 function template(this: MastheadMobileMenu) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

package/src/generated/templates/MastheadShellTemplate.lit.ts

@@ -5,25 +5,28 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type MastheadShell from "../../MastheadShell.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<header class="udex-masthead-shell" @keydown="${this.handleKeyDown}"><div class="udex-masthead-shell__main-content"><div class="udex-masthead-shell__landing-wrap">${ this.logoUrl ? block1.call(this, context, tags, suffix) : undefined }${ this.siteLabel ? block4.call(this, context, tags, suffix) : undefined }</div>${ this.isMainMenuVisible ? block7.call(this, context, tags, suffix) : undefined }</div>${ this.isSearchVisible ? block9.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-shell__right-menu">${ this.hasMobileMenuButtons ? block11.call(this, context, tags, suffix) : undefined }${ this.hasExploreSAP ? block12.call(this, context, tags, suffix) : undefined }${ this.hasSearch ? block13.call(this, context, tags, suffix) : undefined }${ this.hasCart ? block14.call(this, context, tags, suffix) : undefined }${ this.hasSupport ? block15.call(this, context, tags, suffix) : undefined }${ this.hasProfile ? block16.call(this, context, tags, suffix) : undefined }${ this.hasCountrySelector ? block17.call(this, context, tags, suffix) : undefined }${ this.hasMobileMenuButtons ? block18.call(this, context, tags, suffix) : undefined }</div></header> `;}
+function block0 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<header class="${ifDefined(this.mainClass)}" @keydown="${this.handleKeyDown}"><div class="udex-masthead-shell__main-content"><div class="udex-masthead-shell__landing-wrap">${ this.logoUrl ? block1.call(this, context, tags, suffix) : undefined }${ this.siteLabel ? block4.call(this, context, tags, suffix) : undefined }${ this.coBrandImage ? block7.call(this, context, tags, suffix) : undefined }</div>${ this.isMainMenuVisible ? block10.call(this, context, tags, suffix) : undefined }</div>${ this.isSearchVisible ? block12.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-shell__right-menu">${ this.hasMobileMenuButtons ? block14.call(this, context, tags, suffix) : undefined }${ this.hasExploreSAP ? block15.call(this, context, tags, suffix) : undefined }${ this.hasSearch ? block16.call(this, context, tags, suffix) : undefined }${ this.hasCart ? block17.call(this, context, tags, suffix) : undefined }${ this.hasSupport ? block18.call(this, context, tags, suffix) : undefined }${ this.hasProfile ? block19.call(this, context, tags, suffix) : undefined }${ this.hasCountrySelector ? block20.call(this, context, tags, suffix) : undefined }${ this.hasMobileMenuButtons ? block21.call(this, context, tags, suffix) : undefined }</div></header> `;}
 function block1 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.homeUrl ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }`;}
 function block2 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a @click="${this.handleLogoClick}" role="link" href="${ifDefined(this.homeUrl)}" title="${ifDefined(this.logoTitle)}" target="_self" aria-label="${ifDefined(this.homepageAriaLabel)}" class="udex-masthead-shell__logo udex-masthead-shell__logo--link"><img src="${ifDefined(this.logoUrl)}" class="udex-masthead-shell__logo-image" alt="${ifDefined(this.logoAlt)}" /></a>`;}
 function block3 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__logo"><img src="${ifDefined(this.logoUrl)}" class="udex-masthead-shell__logo-image" alt="${ifDefined(this.logoAlt)}" /></div>`;}
 function block4 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.siteLabelUrl ? block5.call(this, context, tags, suffix) : block6.call(this, context, tags, suffix) }`;}
-function block5 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a @click="${this.handleSiteLabelClick}" role="link" href="${ifDefined(this.siteLabelUrl)}" target="_self" aria-label="${ifDefined(this.siteLabelAriaLabel)}" class="udex-masthead-shell__site-label udex-masthead-shell__site-label--link">${ifDefined(this.siteLabel)}</a>`;}
+function block5 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a @click="${this.handleSiteLabelClick}" role="link" href="${ifDefined(this.siteLabelUrl)}" title="${ifDefined(this.siteLabelTitle)}" target="_self" aria-label="${ifDefined(this.siteLabelAriaLabel)}" class="udex-masthead-shell__site-label udex-masthead-shell__site-label--link">${ifDefined(this.siteLabel)}</a>`;}
 function block6 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__site-label">${ifDefined(this.siteLabel)}</div>`;}
-function block7 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<nav class="udex-masthead-shell__nav" aria-label="${ifDefined(this.mainNavigationAriaLabel)}"><ul class="udex-masthead-shell__main-menu" aria-label="${ifDefined(this.mainNavigationAriaLabel)}">${ repeat(this.menuItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block8.call(this, context, tags, suffix, item, index)) }</ul></nav>`;}
-function block8 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-masthead-shell__item" @ui5-item-click="${ifDefined(this.setSelectedItem)}"><slot name="${ifDefined(item._individualSlot)}"></slot></li>`;}
-function block9 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__search-container" @ui5-search-keydown="${ifDefined(this.handleSearchKeyDown)}"><slot name="search"></slot></div>${ this._isSearchOpened ? block10.call(this, context, tags, suffix) : undefined }`;}
-function block10 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-shell__btn-holder"><${scopeTag("udex-control-button", tags, suffix)} class="udex-masthead-shell__close-search-btn" size="Small" icon="decline" part="search-close-button" tooltip="${ifDefined(this.closeButtonAccessibleName)}" accessible-name="${ifDefined(this.closeButtonAccessibleName)}" @click="${this.handleCloseSearch}"></${scopeTag("udex-control-button", tags, suffix)}></div>` : html`<div class="udex-masthead-shell__btn-holder"><udex-control-button class="udex-masthead-shell__close-search-btn" size="Small" icon="decline" part="search-close-button" tooltip="${ifDefined(this.closeButtonAccessibleName)}" accessible-name="${ifDefined(this.closeButtonAccessibleName)}" @click="${this.handleCloseSearch}"></udex-control-button></div>`;}
-function block11 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-item", tags, suffix)} @ui5-item-click="${ifDefined(this.handleOpenMobileMenu)}" class="udex-masthead-shell__menu-btn" accessible-role="button" icon="menu2" part="menu-open-btn" accessible-name="menu"><slot slot="dropdown" name="mobileMenu"></slot></${scopeTag("udex-masthead-item", tags, suffix)}>` : html`<udex-masthead-item @ui5-item-click="${ifDefined(this.handleOpenMobileMenu)}" class="udex-masthead-shell__menu-btn" accessible-role="button" icon="menu2" part="menu-open-btn" accessible-name="menu"><slot slot="dropdown" name="mobileMenu"></slot></udex-masthead-item>`;}
-function block12 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__explore" @ui5-item-click="${ifDefined(this.setSelectedItem)}"><slot name="exploreSAP"></slot></div>`;}
-function block13 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon"><${scopeTag("udex-masthead-item", tags, suffix)} class="udex-masthead-shell__search-btn" icon="search" part="search-button" @click="${this.handleSearchClick}" accessible-name="search"></${scopeTag("udex-masthead-item", tags, suffix)}></div>` : html`<div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon"><udex-masthead-item class="udex-masthead-shell__search-btn" icon="search" part="search-button" @click="${this.handleSearchClick}" accessible-name="search"></udex-masthead-item></div>`;}
-function block14 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__cart udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleCartClick}"><slot name="cart"></slot></div>`;}
-function block15 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__support udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleSupportClick}"><slot name="support"></slot></div>`;}
-function block16 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__profile udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleProfileClick}"><slot name="profile"></slot></div>`;}
-function block17 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__country-selector udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleCountrySelectorClick}"><slot name="countrySelector"></slot></div>`;}
-function block18 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-item", tags, suffix)} @keydown="${this.handleEnterAndSpaceOnCloseBtn}" @ui5-item-click="${ifDefined(this.closeMobileMenu)}" class="udex-masthead-shell__close-btn" accessible-role="button" icon="decline" accessible-name="close" part="menu-close-btn" hide-active-border></${scopeTag("udex-masthead-item", tags, suffix)}>` : html`<udex-masthead-item @keydown="${this.handleEnterAndSpaceOnCloseBtn}" @ui5-item-click="${ifDefined(this.closeMobileMenu)}" class="udex-masthead-shell__close-btn" accessible-role="button" icon="decline" accessible-name="close" part="menu-close-btn" hide-active-border></udex-masthead-item>`;}
+function block7 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.coBrandUrl ? block8.call(this, context, tags, suffix) : block9.call(this, context, tags, suffix) }`;}
+function block8 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__co-brand"><a class="udex-masthead-shell__co-brand-link" @click="${this.handleCoBrandClick}" href="${ifDefined(this.coBrandUrl)}" title="${ifDefined(this.coBrandTitle)}" aria-label="${ifDefined(this.coBrandAriaLabel)}" target="_self" role="link"><img class="udex-masthead-shell__co-brand-image" src="${ifDefined(this.coBrandImage)}" alt="${ifDefined(this.coBrandAlt)}" /></a></div>`;}
+function block9 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__co-brand"><img class="udex-masthead-shell__co-brand-image" src="${ifDefined(this.coBrandImage)}" alt="${ifDefined(this.coBrandAlt)}" /></div>`;}
+function block10 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<nav class="udex-masthead-shell__nav" aria-label="${ifDefined(this.mainNavigationAriaLabel)}"><ul class="udex-masthead-shell__main-menu" aria-label="${ifDefined(this.mainNavigationAriaLabel)}">${ repeat(this.menuItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block11.call(this, context, tags, suffix, item, index)) }</ul></nav>`;}
+function block11 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-masthead-shell__item" @ui5-item-click="${ifDefined(this.setSelectedItem)}"><slot name="${ifDefined(item._individualSlot)}"></slot></li>`;}
+function block12 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__search-container" @ui5-search-keydown="${ifDefined(this.handleSearchKeyDown)}"><slot name="search"></slot></div>${ this._isSearchOpened ? block13.call(this, context, tags, suffix) : undefined }`;}
+function block13 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-shell__btn-holder"><${scopeTag("udex-control-button", tags, suffix)} class="udex-masthead-shell__close-search-btn" size="Small" icon="decline" part="search-close-button" tooltip="${ifDefined(this.closeButtonAccessibleName)}" accessible-name="${ifDefined(this.closeButtonAccessibleName)}" @click="${this.handleCloseSearch}"></${scopeTag("udex-control-button", tags, suffix)}></div>` : html`<div class="udex-masthead-shell__btn-holder"><udex-control-button class="udex-masthead-shell__close-search-btn" size="Small" icon="decline" part="search-close-button" tooltip="${ifDefined(this.closeButtonAccessibleName)}" accessible-name="${ifDefined(this.closeButtonAccessibleName)}" @click="${this.handleCloseSearch}"></udex-control-button></div>`;}
+function block14 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-item", tags, suffix)} @ui5-item-click="${ifDefined(this.handleOpenMobileMenu)}" class="udex-masthead-shell__menu-btn" accessible-role="button" icon="menu2" part="menu-open-btn" accessible-name="menu"><slot slot="dropdown" name="mobileMenu"></slot></${scopeTag("udex-masthead-item", tags, suffix)}>` : html`<udex-masthead-item @ui5-item-click="${ifDefined(this.handleOpenMobileMenu)}" class="udex-masthead-shell__menu-btn" accessible-role="button" icon="menu2" part="menu-open-btn" accessible-name="menu"><slot slot="dropdown" name="mobileMenu"></slot></udex-masthead-item>`;}
+function block15 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__explore" @ui5-item-click="${ifDefined(this.setSelectedItem)}"><slot name="exploreSAP"></slot></div>`;}
+function block16 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon"><${scopeTag("udex-masthead-item", tags, suffix)} class="udex-masthead-shell__search-btn" icon="search" part="search-button" @click="${this.handleSearchClick}" accessible-name="search"></${scopeTag("udex-masthead-item", tags, suffix)}></div>` : html`<div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon"><udex-masthead-item class="udex-masthead-shell__search-btn" icon="search" part="search-button" @click="${this.handleSearchClick}" accessible-name="search"></udex-masthead-item></div>`;}
+function block17 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__cart udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleCartClick}"><slot name="cart"></slot></div>`;}
+function block18 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__support udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleSupportClick}"><slot name="support"></slot></div>`;}
+function block19 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__profile udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleProfileClick}"><slot name="profile"></slot></div>`;}
+function block20 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__country-selector udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleCountrySelectorClick}"><slot name="countrySelector"></slot></div>`;}
+function block21 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-item", tags, suffix)} @keydown="${this.handleEnterAndSpaceOnCloseBtn}" @ui5-item-click="${ifDefined(this.closeMobileMenu)}" class="udex-masthead-shell__close-btn" accessible-role="button" icon="decline" accessible-name="close" part="menu-close-btn" hide-active-border></${scopeTag("udex-masthead-item", tags, suffix)}>` : html`<udex-masthead-item @keydown="${this.handleEnterAndSpaceOnCloseBtn}" @ui5-item-click="${ifDefined(this.closeMobileMenu)}" class="udex-masthead-shell__close-btn" accessible-role="button" icon="decline" accessible-name="close" part="menu-close-btn" hide-active-border></udex-masthead-item>`;}
 
 function template(this: MastheadShell) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

package/src/generated/templates/SecondaryNavigationTemplate.lit.ts

@@ -8,7 +8,7 @@ import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 function block0 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="${ifDefined(this.rootClass)}">${ this.hasBreadcrumbsSlot ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__holder">${ this.heading.length ? block2.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__wrap"><ul role="menubar" class="udex-secondary-navigation__list" @keydown="${this.handleKeyDown}">${ repeat(this.visibleItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }${ this._showMoreButton ? block6.call(this, context, tags, suffix) : undefined }</ul>${ this.hasDesktopButtonsSlot ? block7.call(this, context, tags, suffix) : undefined }</div></div><${scopeTag("udex-secondary-navigation-item", tags, suffix)} @keydown="${this.handleKeyDown}" _max-height="${ifDefined(this.maxDropdownHeight)}" class="udex-secondary-navigation__mobile-nav" role="button" aria-label="${ifDefined(this.mobileMenuOpenerAriaLabel)}" label="${ifDefined(this.heading)}" mobile-link-title="${ifDefined(this.title)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" _is-mobile-menu-opener .subItems="${ifDefined(this.parsedItems)}">${ this.hasMobileButtonsSlot ? block8.call(this, context, tags, suffix) : undefined }</${scopeTag("udex-secondary-navigation-item", tags, suffix)}></div> ` : html`<div class="${ifDefined(this.rootClass)}">${ this.hasBreadcrumbsSlot ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__holder">${ this.heading.length ? block2.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__wrap"><ul role="menubar" class="udex-secondary-navigation__list" @keydown="${this.handleKeyDown}">${ repeat(this.visibleItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }${ this._showMoreButton ? block6.call(this, context, tags, suffix) : undefined }</ul>${ this.hasDesktopButtonsSlot ? block7.call(this, context, tags, suffix) : undefined }</div></div><udex-secondary-navigation-item @keydown="${this.handleKeyDown}" _max-height="${ifDefined(this.maxDropdownHeight)}" class="udex-secondary-navigation__mobile-nav" role="button" aria-label="${ifDefined(this.mobileMenuOpenerAriaLabel)}" label="${ifDefined(this.heading)}" mobile-link-title="${ifDefined(this.title)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" _is-mobile-menu-opener .subItems="${ifDefined(this.parsedItems)}">${ this.hasMobileButtonsSlot ? block8.call(this, context, tags, suffix) : undefined }</udex-secondary-navigation-item></div> `;}
 function block1 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__breadcrumbs"><slot name="breadcrumbs"></slot></div>`;}
 function block2 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__heading">${ this.headingHref.length ? block3.call(this, context, tags, suffix) : block4.call(this, context, tags, suffix) }</div>`;}
-function block3 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a class="udex-secondary-navigation__title" href="${ifDefined(this.headingHref)}">${ifDefined(this.heading)}</a>`;}
+function block3 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a class="udex-secondary-navigation__title" @click="${this.handleHeadingClick}" href="${ifDefined(this.headingHref)}">${ifDefined(this.heading)}</a>`;}
 function block4 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-secondary-navigation__title">${ifDefined(this.heading)}</span>`;}
 function block5 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li role="none" class="udex-secondary-navigation__list-item"><${scopeTag("udex-secondary-navigation-item", tags, suffix)} index="${index}" ?active="${item.active}" path="${ifDefined(item.path)}" label="${ifDefined(item.title)}" mobile-link-title="${ifDefined(item.mobileLinkTitle)}" target="${ifDefined(item.target)}" .subItems="${ifDefined(item.items)}" _nav-items-length="${ifDefined(this.visibleItems.length)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}"></${scopeTag("udex-secondary-navigation-item", tags, suffix)}></li>` : html`<li role="none" class="udex-secondary-navigation__list-item"><udex-secondary-navigation-item index="${index}" ?active="${item.active}" path="${ifDefined(item.path)}" label="${ifDefined(item.title)}" mobile-link-title="${ifDefined(item.mobileLinkTitle)}" target="${ifDefined(item.target)}" .subItems="${ifDefined(item.items)}" _nav-items-length="${ifDefined(this.visibleItems.length)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}"></udex-secondary-navigation-item></li>`;}
 function block6 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li role="none" class="udex-secondary-navigation__list-item"><${scopeTag("udex-secondary-navigation-item", tags, suffix)} _nav-items-length="${ifDefined(this.visibleItems.length)}" index="${ifDefined(this.visibleItems.length)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}" label="${ifDefined(this.moreButtonText)}" .subItems="${ifDefined(this._overflowItems)}"></${scopeTag("udex-secondary-navigation-item", tags, suffix)}></li>` : html`<li role="none" class="udex-secondary-navigation__list-item"><udex-secondary-navigation-item _nav-items-length="${ifDefined(this.visibleItems.length)}" index="${ifDefined(this.visibleItems.length)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}" label="${ifDefined(this.moreButtonText)}" .subItems="${ifDefined(this._overflowItems)}"></udex-secondary-navigation-item></li>`;}