@sapudex/web-components 2.10.0 → 2.12.0

package/src/ListItem.ts

@@ -7,10 +7,13 @@ import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import UDExCheckbox from "./Checkbox.js";
+import type { UDExListItemBaseEvents } from "./ListItemBase.js";
 import UDExListItemBase from "./ListItemBase.js";
 import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import UDExAvatar, { UDExAvatarShape, UDExAvatarSize } from "./Avatar.js";
 import UDExButton from "./Button.js";
+import UDExStatusBadge from "./StatusBadge.js";
+import type UDExStatusBadgeValueState from "./types/StatusBadgeValueState.js";
 import {
   UDExListItemSize, UDExListMode, UDExAdditionalTextState,
 } from "./types/List.js";
@@ -68,6 +71,7 @@ type UDExListItemItemPressEventDetail = {
     UDExButton,
     UDExRadioButton,
     UDExCheckbox,
+    UDExStatusBadge,
     Icon,
   ],
 })
@@ -89,7 +93,16 @@ class UDExListItem extends UDExListItemBase {
   eventDetails!: {
     "item-press": UDExListItemItemPressEventDetail,
     "item-focus": UDExListItemBaseEventDetail,
-  };
+  } & UDExListItemBaseEvents;
+  /**
+   * Defines the image badge state of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    imageBadgeState?: `${UDExStatusBadgeValueState}`;
+
   /**
    * Defines the accessible name of the item.
    *
@@ -190,6 +203,7 @@ class UDExListItem extends UDExListItemBase {
    */
   @slot({ type: Node, "default": true })
     content!: Array<Node>;
+
   /**
    * Slot for first icon.
    *
@@ -198,6 +212,7 @@ class UDExListItem extends UDExListItemBase {
    */
   @slot({ type: UDExButton })
     firstIcon!: Array<UDExButton>;
+
   /**
    * Slot for second icon.
    *
@@ -261,6 +276,10 @@ class UDExListItem extends UDExListItemBase {
   }
 
   handleKeyDown(e: KeyboardEvent) {
+    if (this.firstIconElement === e.target || this.secondIconElement === e.target) {
+      return;
+    }
+
     if (isSpace(e)) {
       e.preventDefault();
     }
@@ -324,6 +343,14 @@ class UDExListItem extends UDExListItemBase {
     return `${listItemClass} ${groupClassName} ${this._additionalClassName} ${controlledClassName} ${largeSizeClassName}`.trim();
   }
 
+  get firstIconElement(): UDExButton {
+    return this.getSlottedNodes<UDExButton>("firstIcon")[0];
+  }
+
+  get secondIconElement(): UDExButton {
+    return this.getSlottedNodes<UDExButton>("secondIcon")[0];
+  }
+
   get hasFirstIcon(): boolean {
     return !!this.firstIcon;
   }
@@ -357,7 +384,7 @@ class UDExListItem extends UDExListItemBase {
   }
 
   get accessibleListItemName(): string {
-    return this.accessibleName || this.label;
+    return this.accessibleName || this.label?.replace(/<[^>]+>/g, "");
   }
 
   get stateAccessibleName(): string {

package/src/ListItemBase.ts

@@ -1,9 +1,20 @@
 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { UDExListItemSize, UDExListMode, UDExListStyleType } from "./types/List.js";
 
+type UDExListItemBaseEventDetail = {
+  originalEvent: PointerEvent,
+  item: HTMLElement,
+}
+
+export type UDExListItemBaseEvents = {
+  "first-icon-click": UDExListItemBaseEventDetail,
+  "second-icon-click": UDExListItemBaseEventDetail,
+}
+
 /**
  * @class
  *
@@ -20,7 +31,22 @@ import { UDExListItemSize, UDExListMode, UDExListStyleType } from "./types/List.
   renderer: litRender,
 })
 
+/**
+ * Fired event when the user click on a first icon.
+ *
+ * @public
+ */
+@event("first-icon-click", { bubbles: true })
+/**
+ * Fired event when the user click on a second icon.
+ *
+ * @public
+ */
+@event("second-icon-click", { bubbles: true })
+
 class UDExListItemBase extends UI5Element {
+  eventDetails!: UDExListItemBaseEvents;
+
   /**
    * Defines the <code>label</code> for the item.
    *
@@ -114,6 +140,22 @@ class UDExListItemBase extends UI5Element {
   @property({ type: String })
     _tabIndex!: string;
 
+  _fireIconClickEvent(e: PointerEvent): void {
+    const target = e.target as HTMLElement;
+    const slot = target.getAttribute("slot");
+    if (slot === "firstIcon") {
+      this.fireDecoratorEvent("first-icon-click", {
+        originalEvent: e,
+        item: this,
+      });
+    } else if (slot === "secondIcon") {
+      this.fireDecoratorEvent("second-icon-click", {
+        originalEvent: e,
+        item: this,
+      });
+    }
+  }
+
   get _effectiveTabIndex(): string {
     if (this.disabled) {
       return "-1";

package/src/ListSelectAll.ts

@@ -9,6 +9,7 @@ import { UDExListMode } from "./types/List.js";
 import { SELECT_ALL } from "./generated/i18n/i18n-defaults.js";
 import ListSelectAllTemplate from "./generated/templates/ListSelectAllTemplate.lit.js";
 import UDExListItem from "./ListItem.js";
+import type { UDExListItemBaseEvents } from "./ListItemBase.js";
 
 // Styles
 import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css.js";
@@ -50,7 +51,7 @@ type UDExListSelectAllSelectAllEventDetail = {
 class UDExListSelectAll extends UDExListGroupHeaderBase {
   eventDetails!: {
     "select-all": UDExListSelectAllSelectAllEventDetail,
-  };
+  } & UDExListItemBaseEvents;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;

package/src/MastheadItem.ts

@@ -23,6 +23,8 @@ import { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
+import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
+
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
 
@@ -398,6 +400,9 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleItemClick(e: PointerEvent): void {
+    if (this.isProfileBtn) {
+      this.profileSlot.closeIdentitiesPanel();
+    }
     this.handleSelectedChange();
     this.fireItemClickEvent(e);
     this.fireDropdownEvents();
@@ -626,6 +631,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.accessibleName || this.innerText || (this.isProfileBtn ? UDExMastheadItem.i18nBundle.getText(PROFILE) : "");
   }
 
+  get profileSlot(): UDExMastheadProfileMenu {
+    return this.getSlottedNodes<UDExMastheadProfileMenu>("dropdown")[0];
+  }
+
   get isMobile(): boolean {
     return BreakpointUtils.isAtMost("M") || this.mastheadShell?._isMobileMode;
   }

package/src/MastheadProfileMenu.hbs

@@ -1,4 +1,14 @@
-<div class="udex-masthead-profile-menu">
+<div
+  @keydown="{{handleKeydown}}"
+  class="{{rootClass}}">
+  {{#if _openIdentities}}
+    {{> account-indetities}}
+  {{else}}
+    {{> account-profile}}
+  {{/if}}
+</div>
+
+{{#*inline "account-profile"}}
   <div class="udex-masthead-profile-menu__header">
     {{#if userData}}
       <udex-avatar
@@ -6,35 +16,89 @@
         size="L"
         initials="{{userData.avatarInitials}}">
         {{#if userData.avatarUrl}}
-            <img src="{{userData.avatarUrl}}" alt="avatar"/>
+          <img src="{{userData.avatarUrl}}" alt="avatar"/>
         {{/if}}
       </udex-avatar>
       <div>
         <p class="udex-profile-menu__account-name">{{userData.name}}</p>
         <p class="udex-profile-menu__account-email">{{userData.email}}</p>
+        {{#if hasIdentities}}
+          <udex-button
+            @click="{{handleSwitcherClick}}"
+            class="udex-masthead-profile-menu__btn-switcher"
+            size="Large"
+            end-icon="slim-arrow-right"
+            design="Invisible">
+            {{switcherAccountText}}
+          </udex-button>
+        {{/if}}
       </div>
     {{/if}}
   </div>
   {{#if messageAvailable}}
     <div class="udex-masthead-profile-menu__message">
-        <slot name="message"></slot>
+      <slot name="message"></slot>
     </div>
   {{/if}}
   <div class="udex-masthead-profile-menu__links">
     <udex-masthead-menu
-        part="menu"
-        exportparts="badge, menu-item"
-        sub-items='{{linksList}}'
-        @ui5-menu-item-click="{{handleProfileMenuItemClick}}">
+      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}}"
-                url="{{logoutUrl}}"
-                label="{{logoutText}}">
-            </udex-masthead-menu-item>
-        </div>
+      <div class="udex-masthead-profile-menu__actions">
+        <udex-masthead-menu-item
+          @click="{{handleUserLogoutItemClick}}"
+          label="{{logoutText}}"
+          url="{{logoutUrl}}">
+        </udex-masthead-menu-item>
+      </div>
     {{/if}}
   </div>
-</div>
+{{/inline}}
+
+{{#*inline "account-indetities"}}
+  <div class="udex-masthead-profile-menu__header-wrap back-btn">
+    <udex-masthead-menu-item
+      class="udex-masthead-profile-menu__btn-back"
+      @click="{{handleSwitcherClick}}"
+      label="{{btnBackText}}"
+      type="Button"
+      icon-start>
+    </udex-masthead-menu-item>
+    <span class="udex-masthead-profile-menu__switcher-title">{{switcherAccountText}}</span>
+  </div>
+  <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}}"
+        controlled>
+        {{#each identitiesList}}
+          <udex-list-item
+            id="{{this.idsUser}}"
+            class="udex-masthead-profile-menu__identities-list-item"
+            @ui5-item-press="{{../fireEventIdentityItemClick}}"
+            supporting-text="{{this.supportingText}}"
+            image-badge-state="{{this.statusBadge}}"
+            image="{{this.avatarUrl}}"
+            image-alt="{{this.name}}">
+            {{this.email}}
+          </udex-list-item>
+        {{/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>
+{{/inline}}

package/src/MastheadProfileMenu.ts

@@ -6,16 +6,28 @@ 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 type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { LOGOUT } from "./generated/i18n/i18n-defaults.js";
+import {
+  LOGOUT, SWITCH_ACCOUNT, BACK, OTHER_IDENTITIES, ADD_OR_REMOVE_ACCOUNT,
+} from "./generated/i18n/i18n-defaults.js";
+import { isEscape } from "@ui5/webcomponents-base/Keys.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
+import UDExButton from "./Button.js";
+import UDExList from "./List.js";
+import UDExListItem from "./ListItem.js";
+import UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import MastheadProfileMenuTemplate from "./generated/templates/MastheadProfileMenuTemplate.lit.js";
-import type UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import type UDExMastheadShell from "./MastheadShell.js";
-
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import "@ui5/webcomponents-icons/dist/action.js";
+import type { LinkClickEventDetail } from "@ui5/webcomponents/dist/Link.js";
 // Styles
 import MastheadProfileMenuCss from "./generated/themes/MastheadProfileMenu.css.js";
+import UDExStatusBadgeValueState from "./types/StatusBadgeValueState.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
 
 interface UserData {
   name?: string,
@@ -25,6 +37,24 @@ interface UserData {
   avatarInitials?: string
 }
 
+interface UserIdentity {
+  avatarUrl: string,
+  email: string,
+  name: string,
+  idsUser: string,
+  isLogged: boolean,
+}
+
+interface ExtendedUserIdentity extends UserIdentity {
+  supportingText: string;
+  statusBadge: string;
+}
+
+type UDExMastheadProfileMenuIdentityClickEventDetail = {
+  item: ExtendedUserIdentity;
+  analyticsName: AnalyticsName,
+};
+
 type UDExMastheadProfileMenuItemClickEventDetail = {
   item: UDExMastheadMenuItem,
   originalEvent: PointerEvent,
@@ -32,6 +62,10 @@ type UDExMastheadProfileMenuItemClickEventDetail = {
   sourceNode: HTMLElement,
 }
 
+type UDExMastheadProfileMenuAddOrRemoveClickEventDetail = {
+  analyticsName: AnalyticsName,
+}
+
 /**
  * @class
  *
@@ -54,27 +88,59 @@ type UDExMastheadProfileMenuItemClickEventDetail = {
   renderer: litRender,
   styles: [UDExMastheadMenu.styles, MastheadProfileMenuCss],
   template: MastheadProfileMenuTemplate,
-  dependencies: [UDExMastheadMenu],
+  dependencies: [
+    UDExMastheadMenuItem,
+    UDExMastheadMenu,
+    UDExListItem,
+    UDExButton,
+    UDExList,
+  ],
 })
 
 /**
  * Fired when use click Logout link
  * @public
  */
-@event("logout", { bubbles: true })
+@event("logout", { cancelable: true, bubbles: true })
 
 /**
  * Fires when profile menu item is clicked
  *
  * @public
  */
-@event("profile-item-click", { bubbles: true })
+@event("profile-item-click", { cancelable: true, bubbles: true })
+
+/**
+ * Fired when use click add or remove account button
+ *
+ * @public
+ */
+@event("add-or-remove-account-click", { cancelable: true, bubbles: true })
+
+/**
+ * Fires when identity item is clicked
+ *
+ * @public
+ */
+@event("identity-item-click", { cancelable: true, bubbles: true })
 
 class UDExMastheadProfileMenu extends UI5Element {
   eventDetails!: {
     "logout": UDExMastheadProfileMenuItemClickEventDetail,
-    "profile-item-click": UDExMastheadProfileMenuItemClickEventDetail
+    "profile-item-click": UDExMastheadProfileMenuItemClickEventDetail,
+    "add-or-remove-account-click": UDExMastheadProfileMenuAddOrRemoveClickEventDetail,
+    "identity-item-click": UDExMastheadProfileMenuIdentityClickEventDetail,
   };
+
+  /**
+   * Defines the object of user identities
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    identities!: string;
+
   /**
    * Defines the object of link values
    *
@@ -110,6 +176,14 @@ class UDExMastheadProfileMenu extends UI5Element {
   @property({ type: Boolean })
     _isMobileMode!: boolean;
 
+  /**
+   * Defines the open identities panel state
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _openIdentities: boolean = false;
+
   /**
    * Placeholder for message strip.
    *
@@ -122,25 +196,115 @@ class UDExMastheadProfileMenu extends UI5Element {
   static i18nBundle: I18nBundle;
 
   _mastheadShell!: UDExMastheadShell;
+  _handleResizeBound: ResizeObserverCallback;
+  _shouldFocusBackBtn!: boolean;
+  _shouldFocusSwitchBtn!: boolean;
+
+  constructor() {
+    super();
+    this._handleResizeBound = this.handleResize.bind(this);
+  }
 
   onAfterRendering(): void {
     this._mastheadShell = this.mastheadShell;
+    this.updateFocusState(this._shouldFocusBackBtn, this.focusBackBtn.bind(this));
+    this.updateFocusState(this._shouldFocusSwitchBtn, this.focusSwitchBtn.bind(this));
+    this.setMenuItemsMobileMode();
+  }
+
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
+  handleResize(): void {
+    this._isMobileMode = this.isMobile;
+
+    if (this.profileMenuLinks) {
+      this.profileMenuLinks._isMobileMode = this.isMobile;
+    }
+  }
+
+  handleSwitcherClick(): void {
+    this._openIdentities = !this._openIdentities;
+    this._shouldFocusBackBtn = this._openIdentities;
+    this._shouldFocusSwitchBtn = !this._openIdentities;
   }
 
   handleUserLogoutItemClick(e: PointerEvent): void {
     this.fireLogoutItemClick(e);
-    if (this.shouldCloseMenu) {
+    if (this._isMobileMode) {
       this.closeMenu();
     }
   }
 
   handleProfileMenuItemClick(e: CustomEvent): void {
     this.fireMenuItemClick(e);
-    if (this.shouldCloseMenu) {
+    if (this._isMobileMode) {
+      this.closeMenu();
+    }
+  }
+
+  updateFocusState(shouldFocus: boolean, focusMethod: () => void): void {
+    if (shouldFocus) {
+      focusMethod();
+      if (focusMethod === this.focusBackBtn) {
+        this._shouldFocusBackBtn = false;
+      } else if (focusMethod === this.focusSwitchBtn) {
+        this._shouldFocusSwitchBtn = false;
+      }
+    }
+  }
+
+  handleKeydown(e: KeyboardEvent): void {
+    if (isEscape(e) && this._openIdentities) {
+      this.closeIdentitiesPanel();
+    }
+  }
+
+  focusSwitchBtn(): void {
+    this.focusElement(".udex-masthead-profile-menu__btn-switcher");
+  }
+
+  focusBackBtn(): void {
+    this.focusElement(".udex-masthead-profile-menu__btn-back");
+  }
+
+  focusElement(selector: string): void {
+    const element = this.shadowRoot?.querySelector<UDExButton>(selector);
+    element?.focus();
+  }
+
+  fireEventIdentityItemClick(e: CustomEvent): void {
+    const { item } = e.detail;
+    const identity = this.identitiesList.find(({ idsUser }) => idsUser === item.id);
+    const eventPrevented = !this.fireDecoratorEvent("identity-item-click", {
+      item: identity!,
+      analyticsName: AnalyticsName.Header,
+    });
+
+    if (eventPrevented) {
+      e.preventDefault();
+    }
+
+    if (this._isMobileMode) {
       this.closeMenu();
     }
   }
 
+  fireEventAddOrRemoveAccountClick(e: CustomEvent<LinkClickEventDetail>): void {
+    const eventPrevented = !this.fireDecoratorEvent("add-or-remove-account-click", {
+      analyticsName: AnalyticsName.Header,
+    });
+
+    if (eventPrevented) {
+      e.preventDefault();
+    }
+  }
+
   fireLogoutItemClick(e: PointerEvent): void {
     const item = e.target as UDExMastheadMenuItem;
 
@@ -168,8 +332,14 @@ class UDExMastheadProfileMenu extends UI5Element {
     this._mastheadShell.mobileBtn?.focus();
   }
 
-  get shouldCloseMenu(): boolean {
-    return this._mastheadShell && this._mastheadShell.isMobileMenuMode;
+  closeIdentitiesPanel(): void {
+    this._openIdentities = false;
+  }
+
+  setMenuItemsMobileMode(): void {
+    if (this._isMobileMode && this.profileMenuLinks) {
+      this.profileMenuLinks._isMobileMode = true;
+    }
   }
 
   get linksList(): string {
@@ -178,10 +348,22 @@ class UDExMastheadProfileMenu extends UI5Element {
     }]) : "";
   }
 
+  get hasIdentities(): boolean {
+    return !!this.identities?.length;
+  }
+
   get userData(): UserData {
     return parseArrayFromString(this.loggedInUser) as UserData;
   }
 
+  get identitiesList(): Array<ExtendedUserIdentity> {
+    return parseArrayFromString<ExtendedUserIdentity>(this.identities).map((identity: UserIdentity) => ({
+      ...identity,
+      statusBadge: identity.isLogged ? "" : UDExStatusBadgeValueState.Warning,
+      supportingText: [identity.name, identity.idsUser].filter(Boolean).join(", "),
+    }));
+  }
+
   get messageAvailable(): boolean {
     return !!this.message.length;
   }
@@ -190,13 +372,46 @@ class UDExMastheadProfileMenu extends UI5Element {
     return !!this.logoutUrl?.length;
   }
 
-  get logoutText(): string {
-    return UDExMastheadProfileMenu.i18nBundle.getText(LOGOUT);
+  get rootClass(): string {
+    const root = "udex-masthead-profile-menu";
+    return this._openIdentities ? `${root} ${root}_switcher` : root;
   }
 
   get mastheadShell(): UDExMastheadShell {
     return document.querySelector<UDExMastheadShell>("[udex-masthead-shell]")!;
   }
+
+  get profileMenuLinks(): UDExMastheadMenu | undefined | null {
+    return this.shadowRoot?.querySelector<UDExMastheadMenu>("[udex-masthead-menu]");
+  }
+
+  get btnBackText(): string {
+    return this._isMobileMode ? this.switcherAccountText : UDExMastheadProfileMenu.i18nBundle.getText(BACK);
+  }
+
+  get listTitleText(): string {
+    return `${UDExMastheadProfileMenu.i18nBundle.getText(OTHER_IDENTITIES)} (${this.identitiesList.length})`;
+  }
+
+  get addOrRemoveAccountText(): string {
+    return UDExMastheadProfileMenu.i18nBundle.getText(ADD_OR_REMOVE_ACCOUNT);
+  }
+
+  get switcherAccountText(): string {
+    return UDExMastheadProfileMenu.i18nBundle.getText(SWITCH_ACCOUNT);
+  }
+
+  get logoutText(): string {
+    return UDExMastheadProfileMenu.i18nBundle.getText(LOGOUT);
+  }
+
+  get isAtMostBreakpointSizeM(): boolean {
+    return BreakpointUtils.isAtMost("M");
+  }
+
+  get isMobile(): boolean {
+    return this.isAtMostBreakpointSizeM || this.mastheadShell?.isMobileMenuMode;
+  }
 }
 
 UDExMastheadProfileMenu.define();

package/src/MastheadShell.ts

@@ -540,6 +540,7 @@ class UDExMastheadShell extends UI5Element {
 
     if (this.isMobileMenuMode) {
       this.setMobileMenuHeight();
+      this.setProfileMobileMode();
     }
 
     this._shouldHandleResize = true;
@@ -861,6 +862,12 @@ class UDExMastheadShell extends UI5Element {
     this.style.setProperty(UDExMastheadVariable.mobileMenuHeight, mobileMenuHeight);
   }
 
+  setProfileMobileMode(): void {
+    if (this.profileMenu) {
+      this.profileMenu._isMobileMode = this.isMobileMenuMode;
+    }
+  }
+
   removeMobileMode(): void {
     this._isMobileMode = false;
     this.slottedItems.forEach((item: MastheadSlottedItem) => {
@@ -951,7 +958,6 @@ class UDExMastheadShell extends UI5Element {
       this.profileMenu,
       this.cartItem,
       this.supportItem,
-      this.profileMenu,
       this.profileMenuLinks,
       this.countrySelectorItem,
       this.countrySelectorMenu,