@sapudex/web-components 0.230.2 → 0.231.0

package/src/MastheadItem.ts

@@ -10,6 +10,7 @@ import "@ui5/webcomponents-icons/dist/search.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import {
   OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT, SEARCH,
 } from "./generated/i18n/i18n-defaults.js";
@@ -17,10 +18,11 @@ import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExAvatar from "./Avatar.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import UDExMastheadShell from "./MastheadShell.js";
-import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
+import UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import { Target } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import AnalyticsName from "./types/AnalyticsName.js";
+import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
 
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
@@ -304,9 +306,11 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @slot({ type: HTMLElement, "default": true })
     content?: Array<HTMLElement>;
 
+  @property({ type: Boolean })
+    _preventFocusOut!: boolean;
+
   _profileAvatar!: UDExAvatar;
   _mastheadShell!: UDExMastheadShell;
-  _isEscPress!: boolean;
 
   static i18nBundle: I18nBundle;
 
@@ -332,15 +336,18 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
       this.setDropdownInsetStart();
     }
 
+    if (this.shouldFocusFirstElement) {
+      this.applyFocusToFirstElement();
+    }
+
     this.handleOutsideClick();
-    this._isEscPress = false;
   }
 
   handleOutsideClick(): void {
     document.addEventListener("click", (e: Event) => {
       const target = e.target as HTMLElement;
       const item = target.closest("[udex-masthead-item]");
-      if (item !== this && !this.isMobile) {
+      if (item !== this && !this.isMobile && this.selected) {
         if (this.isDropdownOpened) {
           this.fireDropdownCloseEvent(this.eventItemTitle, DropdownItemAction.ClickOutside);
         }
@@ -350,13 +357,27 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     });
   }
 
+  handleMouseDown(): void {
+    this._preventFocusOut = true;
+  }
+
+  handleMouseUp(): void {
+    this._preventFocusOut = false;
+  }
+
   handleFocusout(e: FocusEvent): void {
-    if (e.relatedTarget === null || this._isEscPress) {
+    if (this.isFocusOutPrevented(e)) {
       return;
     }
 
-    const eTarget = e.target as HTMLElement;
-    if (!this.isMobile && eTarget.getAttribute("slot") === "dropdown") {
+    this.handleFocusOutForDropdowns(e);
+  }
+
+  handleFocusOutForDropdowns(e: FocusEvent): void {
+    const relatedTarget = e.relatedTarget as HTMLElement;
+    const target = e.target as HTMLElement;
+
+    if (this.shouldCloseDropdown(relatedTarget, target)) {
       this.closeDropdown();
     }
   }
@@ -372,7 +393,6 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleKeyEscape(): void {
-    this._isEscPress = true;
     this.closeDropdown();
     if (this.isProfileBtn) {
       this._profileAvatar.focus();
@@ -427,7 +447,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   setDropdownInsetStart(): void {
-    const dropdown = this.getDomElement(".udex-masthead-item__dropdown");
+    const dropdown = this.dropdownHolder;
     if (dropdown) {
       const rect = dropdown.getBoundingClientRect();
       const marginInlineStart = this.calculateMarginInlineStart(rect);
@@ -460,6 +480,23 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return null;
   }
 
+  async applyFocusToFirstElement(): Promise<void> {
+    const menu = this.querySelector("[udex-masthead-menu]");
+
+    if (menu) {
+      const menuItems = Array.from(menu.shadowRoot?.querySelectorAll<UDExMastheadMenuItem>("[udex-masthead-menu-item]") || []);
+      const itemWithUrl = menuItems.find(menuItem => menuItem.url);
+      const focusableElement = itemWithUrl?.shadowRoot?.querySelector<HTMLElement>(".udex-masthead-menu-item");
+      if (focusableElement) {
+        focusableElement.focus();
+        return;
+      }
+    }
+
+    const focusedElement = await getFirstFocusableElement(this.dropdownHolder);
+    focusedElement?.focus();
+  }
+
   handleDirection(): void {
     const directionStyles = window
       .getComputedStyle(this)
@@ -488,6 +525,32 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.parseArrayFromString(this.subItems);
   }
 
+  private isFocusOutPrevented(e: FocusEvent): boolean {
+    return this.isMobile || e.relatedTarget === null || this._preventFocusOut;
+  }
+
+  private isProfileButtonTarget(relatedTarget: HTMLElement | null): boolean {
+    return (relatedTarget?.tagName === "UDEX-AVATAR" || relatedTarget?.tagName === "UDEX-MASTHEAD-ITEM") && this.isProfileBtn;
+  }
+
+  private isNavItemTarget(target: HTMLElement): boolean {
+    return target.getAttribute("slot") === "dropdown" && !this.isProfileBtn;
+  }
+
+  private isRelatedTargetOutside(relatedTarget: HTMLElement | null): boolean {
+    return relatedTarget?.closest("[udex-masthead-item]") === null;
+  }
+
+  private shouldCloseDropdown(relatedTarget: HTMLElement, target:HTMLElement): boolean {
+    return this.isRelatedTargetOutside(relatedTarget)
+      || this.isProfileButtonTarget(relatedTarget)
+      || this.isNavItemTarget(target);
+  }
+
+  get dropdownHolder(): HTMLElement {
+    return this.getDomElement(".udex-masthead-item__dropdown")!;
+  }
+
   get mastheadShell(): UDExMastheadShell {
     return document.querySelector<UDExMastheadShell>("[udex-masthead-shell]")!;
   }
@@ -539,6 +602,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return labels.length ? labels.join(" ").trim() : undefined;
   }
 
+  get shouldFocusFirstElement(): boolean {
+    return this.isDropdownOpened && !this._preventFocusOut;
+  }
+
   get isDropdownOpened(): boolean {
     return this.hasDropdownSlot && this.selected;
   }

package/src/MastheadMenu.ts

@@ -12,6 +12,7 @@ import UDExMastheadMenuItem, { ItemType } from "./MastheadMenuItem.js";
 import UDExDivider from "./Divider.js";
 import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
 import AnalyticsName from "./types/AnalyticsName.js";
+import UDExMastheadItem from "./MastheadItem.js";
 
 // Styles
 import MastheadMenuCss from "./generated/themes/MastheadMenu.css.js";
@@ -37,9 +38,10 @@ export type MenuItem = {
 
 export type MenuItemClickEventDetail = {
   category?: string,
+  analyticsPath: Array<string>,
+  analyticsName: AnalyticsName,
   originalEvent: Event,
   item: UDExMastheadMenuItem,
-  analyticsName: AnalyticsName,
   sourceNode: HTMLElement,
 }
 
@@ -79,6 +81,9 @@ export type MenuItemClickEventDetail = {
     category: {
       type: String,
     },
+    analyticsPath: {
+      type: Array<string>,
+    },
     item: {
       type: HTMLElement,
     },
@@ -143,18 +148,26 @@ class UDExMastheadMenu extends UI5Element {
   }
 
   handleMenuItemClick(e: Event): void {
-    const item = e.target as UDExMastheadMenuItem;
-    const { url, type } = item;
-    if (url?.length) {
-      const list = item.closest(".udex-masthead-menu__list") as HTMLElement;
-      this.fireEvent<MenuItemClickEventDetail>("menu-item-click", {
-        sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
-        analyticsName: AnalyticsName.Header,
-        item,
-        originalEvent: e,
-        ...(type !== ItemType.Heading && { category: list?.getAttribute("category") || "" }),
-      });
+    const menuItem = e.target as UDExMastheadMenuItem;
+    if (!menuItem.url?.length) {
+      return;
     }
+
+    const mainItem = this.closest("[udex-masthead-item]") as UDExMastheadItem;
+    const menuList = menuItem.closest(".udex-masthead-menu__list") as HTMLElement;
+    const sourceNode = menuItem.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement;
+    const category = menuList?.getAttribute("category") || "";
+
+    const eventDetail: MenuItemClickEventDetail = {
+      analyticsPath: [mainItem?.label, category, menuItem.label].filter(Boolean),
+      analyticsName: AnalyticsName.Header,
+      originalEvent: e,
+      item: menuItem,
+      sourceNode,
+      ...(menuItem.type !== ItemType.Heading && { category }),
+    };
+
+    this.fireEvent<MenuItemClickEventDetail>("menu-item-click", eventDetail);
   }
 
   focusPreviousItem(item: UDExMastheadMenuItem): void {

package/src/MastheadMobileMenu.hbs

@@ -17,6 +17,7 @@
                             @click="{{handleExploreBackToMenuItems}}"
                             label="{{_clickedItem.innerText}}"
                             type="Button"
+                            is-back
                             has-border
                             icon-start
                             is-explore-back>
@@ -35,6 +36,7 @@
                                 @click="{{handleBackToMenuItems}}"
                                 label="{{_clickedItem.innerText}}"
                                 type="Button"
+                                is-back
                                 has-border
                                 icon-start
                                 is-back-to-nav>
@@ -51,6 +53,7 @@
                         @click="{{handleBackToCategories}}"
                         label="{{_category.category}}"
                         type="Button"
+                        is-back
                         has-border
                         icon-start
                         is-back-to-categories>
@@ -68,6 +71,7 @@
             @keydown="{{handleLeftRightKeys}}"
             accessible-role="button"
             type="Button"
+            first-level-btn
             first-level
             icon-end
             is-explore
@@ -88,7 +92,8 @@
                     type="Button"
                     has-border
                     icon-end
-                    first-level>
+                    first-level
+                    first-level-btn>
                 </udex-masthead-menu-item>
             {{else}}
                 <udex-masthead-menu-item
@@ -96,6 +101,7 @@
                     url="{{this.href}}"
                     label="{{this.innerText}}"
                     target="{{this.target}}"
+                    first-level
                     has-border>
                 </udex-masthead-menu-item>
             {{/if}}
@@ -110,6 +116,7 @@
                 url="{{_clickedItem.href}}"
                 label="{{overviewLinkText}}"
                 @click="{{handleMobileItemEvent}}"
+                second-level
                 has-border>
             </udex-masthead-menu-item>
         </li>
@@ -125,6 +132,7 @@
                     aria-has-popup="true"
                     type="Button"
                     second-level
+                    second-level-btn
                     has-border
                     icon-end>
                 </udex-masthead-menu-item>
@@ -136,6 +144,7 @@
                         @click="{{../handleMobileItemEvent}}"
                         url="{{this.url}}"
                         label="{{this.title}}"
+                        second-level
                         has-border>
                     </udex-masthead-menu-item>
                 </li>
@@ -151,6 +160,7 @@
                 @click="{{../handleMobileCategoryItemEvent}}"
                 url="{{this._category.url}}"
                 label="{{overviewLinkText}}"
+                third-level
                 has-border>
             </udex-masthead-menu-item>
         </li>
@@ -162,6 +172,7 @@
                     @click="{{../handleMobileCategoryItemEvent}}"
                     label="{{this.title}}"
                     url="{{this.url}}"
+                    third-level
                     has-border>
                 </udex-masthead-menu-item>
             </li>

package/src/MastheadMobileMenu.ts

@@ -20,10 +20,12 @@ import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js"
 
 export type MobileItemClickEventDetail = {
   category?: string,
+  isBack: boolean,
   isMobile: boolean,
   originalEvent: Event,
   item: UDExMastheadMenuItem,
   analyticsName: AnalyticsName,
+  analyticsPath: Array<string>,
   sourceNode: HTMLElement,
 }
 
@@ -60,6 +62,15 @@ export type MobileItemClickEventDetail = {
  */
 @event("item-click", {
   detail: {
+    isBack: {
+      type: Boolean,
+    },
+    isMobile: {
+      type: Boolean,
+    },
+    category: {
+      type: String,
+    },
     item: {
       type: HTMLElement,
     },
@@ -69,6 +80,9 @@ export type MobileItemClickEventDetail = {
     analyticsName: {
       type: AnalyticsName,
     },
+    analyticsPath: {
+      type: Array<string>,
+    },
     sourceNode: {
       type: HTMLElement,
     },
@@ -140,6 +154,7 @@ class UDExMastheadMobileMenu extends UI5Element {
   _shouldFocusItemByIndex!: boolean;
   _shouldFocusExploreBtn!: boolean;
   _focusedItemIndex!: number;
+  _navItem?: UDExMastheadMenuItem;
 
   static i18nBundle: I18nBundle;
 
@@ -318,12 +333,12 @@ class UDExMastheadMobileMenu extends UI5Element {
       this.fireMobileItemEvent(e);
     }
 
-    if (target.hasAttribute("first-level")) {
+    if (target.hasAttribute("first-level-btn")) {
       this.openCategories(item);
       this.fireMobileItemEvent(e);
     }
 
-    if (target.hasAttribute("second-level")) {
+    if (target.hasAttribute("second-level-btn")) {
       this.openCategoryItems(e);
       this.fireMobileItemEvent(e);
     }
@@ -435,15 +450,19 @@ class UDExMastheadMobileMenu extends UI5Element {
 
   fireMobileItemEvent(e: Event, category?: string) {
     const item = e.target as UDExMastheadMenuItem;
-
-    this.fireEvent<MobileItemClickEventDetail>("item-click", {
+    const isBack = item.hasAttribute("is-back");
+    const eventDetail: MobileItemClickEventDetail = {
       ...(category && { category }),
-      isMobile: true,
       item,
+      isMobile: true,
+      isBack,
+      analyticsPath: this.buildAnalyticsPath(item),
       originalEvent: e,
       analyticsName: AnalyticsName.Header,
       sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
-    }, true, false);
+    };
+
+    this.fireEvent<MobileItemClickEventDetail>("item-click", eventDetail, true, false);
   }
 
   fireExploreSapMobileButton(e: Event) {
@@ -502,6 +521,42 @@ class UDExMastheadMobileMenu extends UI5Element {
     });
   }
 
+  buildAnalyticsPath(item: UDExMastheadMenuItem): Array<string> {
+    const category = this.getListItemByIndex(0).label.trim();
+    const isFirstLevel = item.hasAttribute("first-level");
+    const isSecondLevel = item.hasAttribute("second-level");
+    const isThirdLevel = item.hasAttribute("third-level");
+    const isBackToCategories = item.hasAttribute("is-back-to-categories");
+    const shouldResetPath = item.hasAttribute("is-back-to-nav") || this._hideExploreSapBtn;
+    const isExploreMode = !this.showExploreBtn && !!this.items.length;
+    const clickedLabel = item.label.trim();
+    const analyticsPath: Array<string> = [];
+
+    if (shouldResetPath) {
+      this._navItem = undefined;
+      analyticsPath.length = 0;
+    }
+
+    if (isFirstLevel) {
+      this._navItem = item;
+      analyticsPath.push(clickedLabel);
+    } else if (isSecondLevel) {
+      analyticsPath.push(...(this._navItem ? [category, clickedLabel] : [clickedLabel]));
+    } else if (isThirdLevel) {
+      analyticsPath.push(...(this._navItem ? [this._navItem.label.trim(), category, clickedLabel] : [category, clickedLabel]));
+    } else if (isBackToCategories) {
+      if (this._navItem) {
+        analyticsPath.push(this._navItem.label.trim());
+      }
+    }
+
+    if (isExploreMode) {
+      analyticsPath.unshift(this.exploreItem.label);
+    }
+
+    return analyticsPath;
+  }
+
   get exploreBtnMenu(): UDExMastheadMenuItem {
     return this.shadowRoot!.querySelector<UDExMastheadMenuItem>(".udex-masthead-mobile-menu__explore-btn")!;
   }

package/src/MastheadShell.ts

@@ -13,6 +13,7 @@ import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/menu2.js";
 import "@ui5/webcomponents-icons/dist/search.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { MAIN_LINKS } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadItem, { DropdownItemAction } from "./MastheadItem.js";
@@ -405,6 +406,9 @@ class UDExMastheadShell extends UI5Element {
 
   onEnterDOM(): void {
     ResizeHandler.register(this, this._handleResizeBound);
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
   }
 
   onExitDOM(): void {

package/src/MediaPlayer.ts

@@ -7,7 +7,6 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.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 Player from "video.js/dist/types/player.js";
 import type SeekBar from "video.js/dist/types/control-bar/progress-control/seek-bar";
 import UDExMediaPlayerYoutube from "./MediaPlayerYoutube.js";

package/src/SecondaryNavigation.hbs

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

package/src/SecondaryNavigation.ts

@@ -17,6 +17,8 @@ import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationI
 import { MORE } from "./generated/i18n/i18n-defaults.js";
 import SecondaryNavigationTemplate from "./generated/templates/SecondaryNavigationTemplate.lit.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
+import AnalyticsName from "./types/AnalyticsName.js";
+
 // Styles
 import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.js";
 
@@ -27,6 +29,15 @@ export type ItemClickDetail = {
   originalEvent: Event,
   clickedItem: NavItem;
   clickedIndex: number;
+  isMobile?: boolean,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
+};
+
+export type HeadingClickDetail = {
+  originalEvent: Event,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 };
 
 /**
@@ -71,6 +82,35 @@ export type ItemClickDetail = {
     clickedIndex: {
       type: Integer,
     },
+    isMobile: {
+      type: Boolean,
+    },
+    analyticsName: {
+      type: AnalyticsName,
+    },
+    sourceNode: {
+      type: HTMLElement,
+    },
+  },
+})
+
+/**
+ * Fires when heading is clicked
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event<HeadingClickDetail>("heading-click", {
+  detail: {
+    originalEvent: {
+      type: Event,
+    },
+    analyticsName: {
+      type: AnalyticsName,
+    },
+    sourceNode: {
+      type: HTMLElement,
+    },
   },
 })
 
@@ -359,6 +399,14 @@ class UDExSecondaryNavigation extends UI5Element {
     }
   }
 
+  handleHeadingClick(e: CustomEvent): void {
+    this.fireEvent("heading-click", {
+      analyticsName: AnalyticsName.HeaderSub,
+      sourceNode: e.target as HTMLElement,
+      originalEvent: e,
+    }, true);
+  }
+
   fireEventItemClick(
     e: Event,
     clickedIndex: number,
@@ -367,6 +415,9 @@ class UDExSecondaryNavigation extends UI5Element {
     }: NavItem,
   ): boolean {
     return this.fireEvent("item-click", {
+      ...(this.isMobileScreen && { isMobile: true }),
+      analyticsName: AnalyticsName.HeaderSub,
+      sourceNode: e?.currentTarget as HTMLElement,
       originalEvent: e,
       clickedItem: {
         mobileLinkTitle: mobileLinkTitle || "",

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

@@ -5,27 +5,27 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.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)}"></${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)}"></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"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__dropdown-icon" name="slim-arrow-down"></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)}" role="combobox" 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)}" role="combobox" 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)}"></${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)}"></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"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__dropdown-icon" name="slim-arrow-down"></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-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-describedby="${ifDefined(this.ariaDescribedBy)}" aria-haspopup="${ifDefined(this.hasDropdownSlot)}" aria-label="${ifDefined(this.accessibleLabel)}" @keydown="${this.handleKeyDown}" @click="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}">${ 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)}"></${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)}"></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"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__dropdown-icon" name="slim-arrow-down"></ui5-icon>`;}