@sapudex/web-components 2.25.0 → 2.26.0

package/src/MastheadMenu.hbs

@@ -22,18 +22,39 @@
 {{#*inline "header"}}
     <div class="udex-masthead-menu__header">
         {{#if this.url}}
-            <udex-masthead-menu-item
-                id="category-{{categoryId}}"
-                type="Heading"
-                part="menu-item"
-                exportparts="menu-item"
-                accessible-role="link"
-                @click="{{../../handleMenuItemClick}}"
-                url="{{this.url}}"
-                label="{{this.category}}"
-                icon-end
-                has-border>
-            </udex-masthead-menu-item>
+            {{#if ../_isMobileMode}}
+                <udex-masthead-menu-item
+                    id="category-{{categoryId}}"
+                    type="Heading"
+                    part="menu-item"
+                    exportparts="menu-item"
+                    label="{{this.category}}"
+                    has-border>
+                </udex-masthead-menu-item>
+                <udex-masthead-menu-item
+                    part="menu-item"
+                    accessible-role="link"
+                    exportparts="menu-item"
+                    part="menu-item"
+                    exportparts="menu-item"
+                    label="{{../overviewHeaderLinkText}}"
+                    url="{{this.url}}"
+                    has-border>
+                </udex-masthead-menu-item>
+            {{else}}
+                <udex-masthead-menu-item
+                    id="category-{{categoryId}}"
+                    type="Heading"
+                    part="menu-item"
+                    exportparts="menu-item"
+                    accessible-role="link"
+                    @click="{{../../handleMenuItemClick}}"
+                    url="{{this.url}}"
+                    label="{{this.category}}"
+                    icon-end
+                    has-border>
+                </udex-masthead-menu-item>
+            {{/if}}
         {{else}}
             <udex-masthead-menu-item
                 id="category-{{categoryId}}"

package/src/MastheadMenu.ts

@@ -2,11 +2,15 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import "@ui5/webcomponents-icons/dist/action.js";
-import { isUp, isDown } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+  isUp, isDown, isTabNext, isTabPrevious, isHome, isEnd,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExBadge from "./Badge.js";
 import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
 import type UDExMastheadItem from "./MastheadItem.js";
@@ -14,6 +18,9 @@ import UDExDivider from "./Divider.js";
 import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
+import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
+import type { UDExScrollIntoViewOptions } from "./types/List.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import MastheadMenuCss from "./generated/themes/MastheadMenu.css.js";
@@ -116,25 +123,58 @@ class UDExMastheadMenu extends UI5Element {
   @property({ type: Boolean })
     _isMobileMode!: boolean;
 
+  /**
+   * Defines the scroll behavior for the items of the component.
+   *
+   * @default undefined
+   * @private
+   */
+  @property()
+    _scrollIntoView?: `${UDExScrollIntoViewOptions}`;
+
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
   handleKeyDown(e: KeyboardEvent): void {
-    this.handleUpArrow(e);
-    this.handleDownArrow(e);
+    const isFirstItem = e.target === this.links[0];
+    const isLastItem = e.target === this.links[this.links.length - 1];
+
+    if (isUp(e) || (isTabPrevious(e) && !isFirstItem)) {
+      this.handleUpArrow(e);
+    }
+    if (isDown(e) || (isTabNext(e) && !isLastItem)) {
+      this.handleDownArrow(e);
+    }
+    if (isHome(e)) {
+      this.handleHomeKey(e);
+    }
+    if (isEnd(e)) {
+      this.handleEndKey(e);
+    }
+  }
+
+  handleHomeKey(e: KeyboardEvent): void {
+    e.preventDefault();
+    const firstItem = this.links[0];
+    firstItem.focus();
+  }
+
+  handleEndKey(e: KeyboardEvent): void {
+    e.preventDefault();
+    const lastItem = this.links[this.links.length - 1];
+    lastItem.focus();
   }
 
   handleUpArrow(e: KeyboardEvent): void {
-    if (isUp(e)) {
-      e.preventDefault();
-      const currentItem = e.target as UDExMastheadMenuItem;
-      this.focusPreviousItem(currentItem);
-    }
+    e.preventDefault();
+    const currentItem = e.target as UDExMastheadMenuItem;
+    this.focusPreviousItem(currentItem);
   }
 
   handleDownArrow(e: KeyboardEvent): void {
-    if (isDown(e)) {
-      e.preventDefault();
-      const currentItem = e.target as UDExMastheadMenuItem;
-      this.focusNextItem(currentItem);
-    }
+    e.preventDefault();
+    const currentItem = e.target as UDExMastheadMenuItem;
+    this.focusNextItem(currentItem);
   }
 
   handleMenuItemClick(e: PointerEvent): void {
@@ -164,12 +204,18 @@ class UDExMastheadMenu extends UI5Element {
     const currentSelectedIndex = this.getCurrentIndex(item);
     const lastItemIndex = this.links.length - 1;
     const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
+    if (this._scrollIntoView) {
+      this.scrollToItem(this.links[previousSelectIndex]);
+    }
     this.links[previousSelectIndex].focus();
   }
 
   focusNextItem(item: UDExMastheadMenuItem): void {
     const currentSelectedIndex = this.getCurrentIndex(item);
     const nextSelectIndex = currentSelectedIndex + 1 > this.links.length - 1 ? 0 : currentSelectedIndex + 1;
+    if (this._scrollIntoView) {
+      this.scrollToItem(this.links[nextSelectIndex]);
+    }
     this.links[nextSelectIndex].focus();
   }
 
@@ -177,6 +223,10 @@ class UDExMastheadMenu extends UI5Element {
     return this.links.indexOf(item);
   }
 
+  scrollToItem(item: UDExMastheadMenuItem): void {
+    item.scrollIntoView({ block: this._scrollIntoView?.toLowerCase() as ScrollLogicalPosition });
+  }
+
   get links(): Array<UDExMastheadMenuItem> {
     const menuItems: Array<UDExMastheadMenuItem> = Array.from(this.shadowRoot!.querySelectorAll("[udex-masthead-menu-item]"));
     return menuItems.filter(({ url }) => url && url.length > 0);
@@ -205,6 +255,10 @@ class UDExMastheadMenu extends UI5Element {
     const hasOneColumn = this.itemsList.length === 1 && this.itemsList[0].subMenuLinkItems.length === 1;
     return hasOneColumn ? rowClass : "";
   }
+
+  get overviewHeaderLinkText(): string {
+    return translate(UDExMastheadMenu, OVERVIEW);
+  }
 }
 
 UDExMastheadMenu.define();

package/src/MastheadMobileMenu.ts

@@ -11,6 +11,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import type { MenuItem, SubMenuLinkItem } from "./MastheadItem.js";
 import type UDExMastheadItem from "./MastheadItem.js";
+import type UDExSearch from "./Search.js";
 import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
 import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
 import AnalyticsName from "./types/AnalyticsName.js";
@@ -551,7 +552,14 @@ class UDExMastheadMobileMenu extends UI5Element {
     return analyticsPath;
   }
 
-  closeMenu():void {
+  resetSearch(): void {
+    const search = this.search[0] as UDExSearch;
+    if (search && search.value) {
+      search.value = "";
+    }
+  }
+
+  closeMenu(): void {
     this._mastheadShell.closeMobileMenu();
     this._mastheadShell.mobileBtn?.focus();
   }

package/src/MastheadProfileMenu.hbs

@@ -14,7 +14,8 @@
       <udex-avatar
         aria-hidden="true"
         size="L"
-        initials="{{userData.avatarInitials}}">
+        initials="{{userData.avatarInitials}}"
+        fallback-icon="{{userData.fallbackIcon}}">
         {{#if userData.avatarUrl}}
           <img src="{{userData.avatarUrl}}" alt="avatar"/>
         {{/if}}
@@ -40,25 +41,39 @@
       <slot name="message"></slot>
     </div>
   {{/if}}
-  <div class="udex-masthead-profile-menu__links">
-    <udex-masthead-menu
-      exportparts="badge, menu-item"
-      part="menu"
-      sub-items='{{linksList}}'
-      @ui5-menu-item-click="{{handleProfileMenuItemClick}}">
-    </udex-masthead-menu>
-    {{#if logoutLink}}
-      <div class="udex-masthead-profile-menu__actions">
-        <udex-masthead-menu-item
-          @click="{{handleUserLogoutItemClick}}"
-          label="{{logoutText}}"
-          url="{{logoutUrl}}">
-        </udex-masthead-menu-item>
+  <div class="udex-masthead-profile-menu__content">
+      <div
+          class="udex-masthead-profile-menu__links"
+          @scroll="{{handleProfileMenuShadowVisible}}">
+          <udex-masthead-menu
+            exportparts="badge, menu-item"
+            part="menu"
+            sub-items='{{linksList}}'
+            @ui5-menu-item-click="{{handleProfileMenuItemClick}}"
+            _scroll-into-view="Center">
+          </udex-masthead-menu>
       </div>
-    {{/if}}
   </div>
+  {{#if hasActionButton}}
+      <div class="udex-masthead-profile-menu__actions">
+          {{#if hasLogoutButton}}
+              <div class="udex-masthead-profile-menu__btn">
+                <slot name="logoutButton"></slot>
+              </div>
+          {{else}}
+              <udex-link
+                  @click="{{handleUserLogoutClick}}"
+                  end-icon="action"
+                  design="Default"
+                  accessible-role="Link"
+                  href="{{logoutUrl}}">
+                  {{logoutText}}
+              </udex-link>
+          {{/if}}
+      </div>
+  {{/if}}
 {{/inline}}
-
+ 
 {{#*inline "account-indetities"}}
   <div class="udex-masthead-profile-menu__header-wrap back-btn">
     <udex-masthead-menu-item
@@ -70,13 +85,15 @@
     </udex-masthead-menu-item>
     <span class="udex-masthead-profile-menu__switcher-title">{{switcherAccountText}}</span>
   </div>
+  <span class="udex-masthead-profile-menu__identities-list-title">{{listTitleText}}</span>
   <div class="udex-masthead-profile-menu__identities-list-wrap">
-    <span class="udex-masthead-profile-menu__identities-list-title">{{listTitleText}}</span>
     {{#if identitiesList.length}}
       <udex-list
         class="udex-masthead-profile-menu__identities-list"
         mode="SingleSelect"
         accessible-name="{{listTitleText}}"
+        @scroll="{{handleIdentitiesListShadowVisible}}"
+        _scroll-into-view="Center"
         controlled>
         {{#each identitiesList}}
           <udex-list-item
@@ -92,13 +109,13 @@
         {{/each}}
       </udex-list>
     {{/if}}
-    <udex-button
-      @click="{{fireEventAddOrRemoveAccountClick}}"
-      class="udex-masthead-profile-menu__add-remove-btn"
-      design="Primary"
-      end-icon="action"
-      size="Large">
-      {{addOrRemoveAccountText}}
-    </udex-button>
   </div>
+  <udex-button
+    @click="{{fireEventAddOrRemoveAccountClick}}"
+    class="udex-masthead-profile-menu__add-remove-btn"
+    design="Primary"
+    end-icon="action"
+    size="Large">
+    {{addOrRemoveAccountText}}
+  </udex-button>
 {{/inline}}

package/src/MastheadProfileMenu.ts

@@ -5,6 +5,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   LOGOUT, SWITCH_ACCOUNT, BACK, OTHER_IDENTITIES, ADD_OR_REMOVE_ACCOUNT,
@@ -13,6 +14,7 @@ import { isEscape } from "@ui5/webcomponents-base/Keys.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExButton from "./Button.js";
 import UDExList from "./List.js";
+import UDExLink from "./Link.js";
 import UDExListItem from "./ListItem.js";
 import UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import MastheadProfileMenuTemplate from "./generated/templates/MastheadProfileMenuTemplate.lit.js";
@@ -37,6 +39,7 @@ export interface UserData {
   email?: string,
   avatarUrl?: string,
   avatarInitials?: string
+  fallbackIcon?: string,
 }
 
 export interface UserIdentity {
@@ -96,6 +99,7 @@ type UDExMastheadProfileMenuAddOrRemoveClickEventDetail = {
     UDExListItem,
     UDExButton,
     UDExList,
+    UDExLink,
   ],
 })
 
@@ -198,13 +202,29 @@ class UDExMastheadProfileMenu extends UI5Element {
     _openIdentities: boolean = false;
 
   /**
-   * Placeholder for message strip.
+   * Defines the request render state
+   *
+   * @private
+   */
+  @property({ type: Boolean, noAttribute: true })
+    _requestRender = false;
+
+  /**
+   * Slot for message strip.
    *
    * @public
    */
   @slot({ type: Node, "default": false })
     message!: Array<Node>;
 
+  /**
+   * Slot for logout button.
+   *
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    logoutButton!: Array<Node>;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -212,6 +232,8 @@ class UDExMastheadProfileMenu extends UI5Element {
   _handleResizeBound: ResizeObserverCallback;
   _shouldFocusBackBtn!: boolean;
   _shouldFocusSwitchBtn!: boolean;
+  _identitiesListClassName = "udex-masthead-profile-menu__identities-list";
+  _profileMenuLinksClassName = "udex-masthead-profile-menu__links";
 
   constructor() {
     super();
@@ -223,10 +245,14 @@ class UDExMastheadProfileMenu extends UI5Element {
     this.updateFocusState(this._shouldFocusBackBtn, this.focusBackBtn.bind(this));
     this.updateFocusState(this._shouldFocusSwitchBtn, this.focusSwitchBtn.bind(this));
     this.setMenuItemsMobileMode();
+    this.checkScrollableElements();
   }
 
   onEnterDOM(): void {
     ResizeHandler.register(this, this._handleResizeBound);
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
   }
 
   onExitDOM(): void {
@@ -239,6 +265,8 @@ class UDExMastheadProfileMenu extends UI5Element {
     if (this.profileMenuLinks) {
       this.profileMenuLinks._isMobileMode = this.isMobile;
     }
+
+    this.checkScrollableElements();
   }
 
   handleSwitcherClick(): void {
@@ -247,8 +275,8 @@ class UDExMastheadProfileMenu extends UI5Element {
     this._shouldFocusSwitchBtn = !this._openIdentities;
   }
 
-  handleUserLogoutItemClick(e: PointerEvent): void {
-    this.fireLogoutItemClick(e);
+  handleUserLogoutClick(e: PointerEvent): void {
+    this.fireLogoutClick(e);
     if (this._isMobileMode) {
       this.closeMenu();
     }
@@ -318,15 +346,18 @@ class UDExMastheadProfileMenu extends UI5Element {
     }
   }
 
-  fireLogoutItemClick(e: PointerEvent): void {
+  fireLogoutClick(e: PointerEvent): void {
     const item = e.target as UDExMastheadMenuItem;
-
-    this.fireDecoratorEvent("logout", {
+    const executeEvent = this.fireDecoratorEvent("logout", {
       item,
-      sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
+      sourceNode: item.shadowRoot?.querySelector("a") as HTMLElement,
       originalEvent: e,
       analyticsName: AnalyticsName.Header,
     });
+
+    if (!executeEvent) {
+      e.preventDefault();
+    }
   }
 
   fireMenuItemClick(e: CustomEvent): void {
@@ -340,6 +371,84 @@ class UDExMastheadProfileMenu extends UI5Element {
     });
   }
 
+  checkScrollableElements(): void {
+    if (this._openIdentities) {
+      this.checkScrollableElement(this.identitiesHTMLElement, this._identitiesListClassName);
+    }
+
+    if (this.isMobile) {
+      this.checkScrollableElement(this.profileMenuHTMLElement, this._profileMenuLinksClassName);
+    }
+  }
+
+  checkScrollableElement(element: HTMLElement, className: string): void {
+    if (element) {
+      requestAnimationFrame(() => {
+        if (this.isScrollableElement(element)) {
+          element.classList.add(`${className}_scrollable`);
+        }
+      });
+    }
+  }
+
+  scrollToTopProfileMenu(): void {
+    setTimeout(() => {
+      this.profileMenuHTMLElement.scrollTop = 0;
+    }, 0);
+  }
+
+  isScrollableElement(element: HTMLElement): boolean {
+    return element.scrollHeight > element.clientHeight;
+  }
+
+  handleProfileMenuShadowVisible(): void {
+    this.toggleScrollableClass(
+      this.profileMenuHTMLElement,
+      this._profileMenuLinksClassName,
+      this.scrollBottomProfileMenu,
+    );
+  }
+
+  handleIdentitiesListShadowVisible(): void {
+    this.toggleScrollableClass(
+      this.identitiesHTMLElement,
+      this._identitiesListClassName,
+      this.scrollBottomIdentitiesList,
+    );
+  }
+
+  toggleScrollableClass(el: HTMLElement, className: string, scrollBottom: number): void {
+    if (scrollBottom === 0) {
+      el.classList.remove(`${className}_scrollable`);
+    } else {
+      el.classList.add(`${className}_scrollable`);
+    }
+  }
+
+  get scrollBottomIdentitiesList(): number {
+    return this.calculateScrollBottom(this.identitiesHTMLElement);
+  }
+
+  get scrollBottomProfileMenu(): number {
+    return this.calculateScrollBottom(this.profileMenuHTMLElement);
+  }
+
+  calculateScrollBottom(element: HTMLElement): number {
+    return element.scrollHeight - element.scrollTop - element.clientHeight;
+  }
+
+  get profileMenuHTMLElement(): HTMLElement {
+    return this.getElementByClassName(this._profileMenuLinksClassName);
+  }
+
+  get identitiesHTMLElement(): HTMLElement {
+    return this.getElementByClassName(this._identitiesListClassName);
+  }
+
+  getElementByClassName(className: string): HTMLElement {
+    return this.shadowRoot?.querySelector<HTMLElement>(`.${className}`) as HTMLElement;
+  }
+
   closeMenu():void {
     this._mastheadShell.closeMobileMenu();
     this._mastheadShell.mobileBtn?.focus();
@@ -381,6 +490,10 @@ class UDExMastheadProfileMenu extends UI5Element {
     return !!this.message.length;
   }
 
+  get hasLogoutButton(): boolean {
+    return !!this.logoutButton.length;
+  }
+
   get logoutLink(): boolean {
     return !!this.logoutUrl?.length;
   }
@@ -425,6 +538,10 @@ class UDExMastheadProfileMenu extends UI5Element {
   get isMobile(): boolean {
     return this.isAtMostBreakpointSizeM || this.mastheadShell?.isMobileMenuMode;
   }
+
+  get hasActionButton(): boolean {
+    return this.logoutLink || this.hasLogoutButton;
+  }
 }
 
 UDExMastheadProfileMenu.define();

package/src/MastheadShell.ts

@@ -543,6 +543,7 @@ class UDExMastheadShell extends UI5Element {
   static i18nBundle: I18nBundle;
 
   _searchOpener!: UDExMastheadItem | null | undefined;
+  _desktopSearch!: UDExSearch | null | undefined;
   _mobileMenu!: UDExMastheadMobileMenu | null | undefined;
   _handleResizeBound: ResizeObserverCallback;
   _rootHolder!: HTMLElement | null | undefined;
@@ -563,9 +564,10 @@ class UDExMastheadShell extends UI5Element {
   onAfterRendering() {
     this._rootHolder = this.mastheadHolder;
     this._searchOpener = this.searchOpener;
+    this._desktopSearch = this.desktopSearchSlot;
     this._mobileMenu = this.mastheadMobileMenu;
 
-    if (this._isSearchOpened) {
+    if (this._isSearchOpened && this._desktopSearch) {
       this.focusSearchInput();
     }
 
@@ -701,16 +703,19 @@ class UDExMastheadShell extends UI5Element {
   handleCartClick(e: PointerEvent): void {
     e.stopPropagation();
     this.fireMastheadEvent("cart-click", e);
+    this.mobileMenuReset();
   }
 
   handleJouleClick(e: PointerEvent): void {
     e.stopPropagation();
     this.fireMastheadEvent("joule-click", e);
+    this.mobileMenuReset();
   }
 
   handleProfileClick(e: PointerEvent): void {
     e.stopPropagation();
     this.fireMastheadEvent("profile-click", e);
+    this.mobileMenuReset();
   }
 
   handleSupportClick(e: PointerEvent): void {
@@ -721,6 +726,7 @@ class UDExMastheadShell extends UI5Element {
   handleCountrySelectorClick(e: PointerEvent): void {
     e.stopPropagation();
     this.fireMastheadEvent("country-selector-click", e);
+    this.mobileMenuReset();
   }
 
   handleOpenMobileMenu(): void {
@@ -743,6 +749,7 @@ class UDExMastheadShell extends UI5Element {
     this._closeBtnClicked = true;
     this.fireMastheadEvent("search-close-click", e);
     this.closeSearch();
+    this.resetSearch();
   }
 
   handleEnterAndSpaceOnCloseBtn(e: KeyboardEvent): void {
@@ -754,11 +761,8 @@ class UDExMastheadShell extends UI5Element {
   }
 
   focusSearchInput(): void {
-    const searchSlot = this.querySelector<UDExSearch>("[udex-search]");
-    if (searchSlot) {
-      const input = searchSlot.shadowRoot!.querySelector<HTMLElement>("input");
-      input?.focus();
-    }
+    const input = this._desktopSearch?.shadowRoot!.querySelector<HTMLElement>("input");
+    input?.focus();
   }
 
   focusPreviousMenuItem(item: UDExMastheadItem): void {
@@ -787,6 +791,12 @@ class UDExMastheadShell extends UI5Element {
     });
   }
 
+  resetSearch(): void {
+    if (this._desktopSearch) {
+      this._desktopSearch.value = "";
+    }
+  }
+
   setSelectedItem(e: CustomEvent): void {
     const clickedItem: UDExMastheadItem = e.detail.item;
     if (clickedItem) {
@@ -967,6 +977,13 @@ class UDExMastheadShell extends UI5Element {
     this.fireDecoratorEvent(eventName, eventDetails);
   }
 
+  mobileMenuReset(): void {
+    if (this._isMobileMenuOpen) {
+      this._mobileMenu?.showFirstLevelMenu();
+      this._mobileMenu?.resetSearch();
+    }
+  }
+
   /**
    * Close the search panel.
    * @public
@@ -1023,6 +1040,7 @@ class UDExMastheadShell extends UI5Element {
     (this.mobileBtn as UDExMastheadItem).selected = false;
     this._isMobileMenuOpen = false;
     this._mobileMenu?.showFirstLevelMenu();
+    this._mobileMenu?.resetSearch();
 
     if (this.bodyOverflow) {
       this.removeOverflowBody();
@@ -1043,6 +1061,10 @@ class UDExMastheadShell extends UI5Element {
     ];
   }
 
+  get desktopSearchSlot(): UDExSearch | null {
+    return this.querySelector<UDExSearch>("[udex-search]");
+  }
+
   get searchOpener(): MastheadItemType {
     return this.shadowRoot?.querySelector(".udex-masthead-shell__search-btn");
   }
@@ -1152,7 +1174,7 @@ class UDExMastheadShell extends UI5Element {
   }
 
   get openSearchButtonAccessibleNameText(): string {
-    return this.openSearchButtonAccessibleName || UDExMastheadShell.i18nBundle.getText(SEARCH);
+    return this.openSearchButtonAccessibleName || translate(UDExMastheadShell, SEARCH);
   }
 
   get mainNavigationAriaLabel(): string {