@sapudex/web-components 0.225.0 → 2.0.0

package/dist/MastheadProfileMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"MastheadProfileMenu.js","sourceRoot":"","sources":["../src/MastheadProfileMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { LOGOUT } from \"./generated/i18n/i18n-defaults.js\";\nimport UDExMastheadMenu from \"./MastheadMenu.js\";\nimport MastheadProfileMenuTemplate from \"./generated/templates/MastheadProfileMenuTemplate.lit.js\";\nimport UDExMastheadMenuItem from \"./MastheadMenuItem.js\";\n\n// Styles\nimport MastheadProfileMenuCss from \"./generated/themes/MastheadProfileMenu.css.js\";\n\ninterface UserData {\n  name?: string,\n  username?: string,\n  email?: string,\n  avatarUrl?: string,\n  avatarInitials?: string\n}\n\nexport type LogoutClickEventDetail = {\n  originalEvent: Event,\n}\n\nexport type ProfileMenuItemClickEventDetail = {\n  item: UDExMastheadMenuItem,\n  originalEvent: Event,\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-masthead-profile-menu</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/MastheadProfileMenu.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-masthead-profile-menu\",\n  renderer: litRender,\n  styles: [UDExMastheadMenu.styles, MastheadProfileMenuCss],\n  template: MastheadProfileMenuTemplate,\n  dependencies: [UDExMastheadMenu],\n})\n\n/**\n * Fired when use click Logout link\n * @public\n */\n@event(\"logout\", {\n  detail: {\n    originalEvent: {\n      type: Event,\n    },\n  },\n})\n\n/**\n * Fires when profile menu item is clicked\n *\n * @public\n */\n@event(\"profile-item-click\", {\n  detail: {\n    item: {\n      type: HTMLElement,\n    },\n    originalEvent: {\n      type: Event,\n    },\n  },\n})\n\nclass UDExMastheadProfileMenu extends UI5Element {\n  /**\n   * Defines the object of link values\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    links!: string;\n\n  /**\n   * Defines the object of user profile data\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    loggedInUser!: string;\n\n  /**\n   * Defines the link for logout\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    logoutUrl!: string;\n\n  /**\n   * Defines the mobile mode for component\n   *\n   * @private\n   */\n  @property({ type: Boolean })\n    _isMobileMode!: boolean;\n\n  /**\n   * Placeholder for message strip.\n   *\n   * @public\n   */\n  @slot({ type: Node, \"default\": false })\n    message!: Array<Node>;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine(): Promise<void> {\n    UDExMastheadProfileMenu.i18nBundle = await getI18nBundle(\"@sapudex/web-components\");\n  }\n\n  handleUserLogoutItemClick(e: Event): void {\n    this.fireEvent<LogoutClickEventDetail>(\"logout\", {\n      originalEvent: e,\n    });\n  }\n\n  handleProfileMenuItemClick(e: CustomEvent): void {\n    const { item, originalEvent } = e.detail;\n\n    this.fireEvent<ProfileMenuItemClickEventDetail>(\"profile-item-click\", {\n      item,\n      originalEvent,\n    });\n  }\n\n  parseArrayFromString<T>(string: string): T[] {\n    return string ? JSON.parse(string) as T[] : [];\n  }\n\n  get linksList(): string {\n    return this.links ? JSON.stringify([{\n      subMenuLinkItems: JSON.parse(this.links),\n    }]) : \"\";\n  }\n\n  get userData(): UserData {\n    return this.parseArrayFromString(this.loggedInUser) as UserData;\n  }\n\n  get messageAvailable(): boolean {\n    return !!this.message.length;\n  }\n\n  get logoutLink(): boolean {\n    return !!this.logoutUrl.length;\n  }\n\n  get logoutText(): string {\n    return UDExMastheadProfileMenu.i18nBundle.getText(LOGOUT);\n  }\n}\n\nUDExMastheadProfileMenu.define();\n\nexport default UDExMastheadProfileMenu;\n"]}
+{"version":3,"file":"MastheadProfileMenu.js","sourceRoot":"","sources":["../src/MastheadProfileMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { LOGOUT } from \"./generated/i18n/i18n-defaults.js\";\nimport UDExMastheadMenu from \"./MastheadMenu.js\";\nimport MastheadProfileMenuTemplate from \"./generated/templates/MastheadProfileMenuTemplate.lit.js\";\nimport type UDExMastheadMenuItem from \"./MastheadMenuItem.js\";\n\n// Styles\nimport MastheadProfileMenuCss from \"./generated/themes/MastheadProfileMenu.css.js\";\n\ninterface UserData {\n  name?: string,\n  username?: string,\n  email?: string,\n  avatarUrl?: string,\n  avatarInitials?: string\n}\n\ntype UDExMastheadProfileMenuLogoutClickEventDetail = {\n  originalEvent: PointerEvent,\n}\n\ntype UDExMastheadProfileMenuItemClickEventDetail = {\n  item: UDExMastheadMenuItem,\n  originalEvent: PointerEvent,\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-masthead-profile-menu</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/MastheadProfileMenu.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-masthead-profile-menu\",\n  renderer: litRender,\n  styles: [UDExMastheadMenu.styles, MastheadProfileMenuCss],\n  template: MastheadProfileMenuTemplate,\n  dependencies: [UDExMastheadMenu],\n})\n\n/**\n * Fired when use click Logout link\n * @public\n */\n@event(\"logout\", { bubbles: true })\n\n/**\n * Fires when profile menu item is clicked\n *\n * @public\n */\n@event(\"profile-item-click\", { bubbles: true })\n\nclass UDExMastheadProfileMenu extends UI5Element {\n  eventDetails!: {\n    \"logout\": UDExMastheadProfileMenuLogoutClickEventDetail,\n    \"profile-item-click\": UDExMastheadProfileMenuItemClickEventDetail\n  };\n  /**\n   * Defines the object of link values\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    links!: string;\n\n  /**\n   * Defines the object of user profile data\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    loggedInUser!: string;\n\n  /**\n   * Defines the link for logout\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    logoutUrl!: string;\n\n  /**\n   * Defines the mobile mode for component\n   *\n   * @private\n   */\n  @property({ type: Boolean })\n    _isMobileMode!: boolean;\n\n  /**\n   * Placeholder for message strip.\n   *\n   * @public\n   */\n  @slot({ type: Node, \"default\": false })\n    message!: Array<Node>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  handleUserLogoutItemClick(e: PointerEvent): void {\n    this.fireDecoratorEvent(\"logout\", {\n      originalEvent: e,\n    });\n  }\n\n  handleProfileMenuItemClick(e: CustomEvent): void {\n    const { item, originalEvent } = e.detail;\n\n    this.fireDecoratorEvent(\"profile-item-click\", {\n      item,\n      originalEvent,\n    });\n  }\n\n  parseArrayFromString<T>(string: string): T[] {\n    return string ? JSON.parse(string) as T[] : [];\n  }\n\n  get linksList(): string {\n    return this.links ? JSON.stringify([{\n      subMenuLinkItems: JSON.parse(this.links),\n    }]) : \"\";\n  }\n\n  get userData(): UserData {\n    return this.parseArrayFromString(this.loggedInUser) as UserData;\n  }\n\n  get messageAvailable(): boolean {\n    return !!this.message.length;\n  }\n\n  get logoutLink(): boolean {\n    return !!this.logoutUrl?.length;\n  }\n\n  get logoutText(): string {\n    return UDExMastheadProfileMenu.i18nBundle.getText(LOGOUT);\n  }\n}\n\nUDExMastheadProfileMenu.define();\n\nexport default UDExMastheadProfileMenu;\n"]}

package/dist/MastheadShell.d.ts

@@ -1,5 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/menu2.js";
 import "@ui5/webcomponents-icons/dist/search.js";
@@ -8,23 +8,12 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UDExMastheadItem from "./MastheadItem.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
-import UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
-import UDExMastheadCountrySelector from "./MastheadCountrySelector.js";
+import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
+import type UDExMastheadCountrySelector from "./MastheadCountrySelector.js";
 type MastheadSlottedItem = UDExMastheadItem | UDExMastheadProfileMenu | UDExMastheadMenu | UDExMastheadCountrySelector | undefined | null;
 type MastheadItemType = UDExMastheadItem | null | undefined;
-export declare const MastheadOriginalEvent: {
-    detail: {
-        originalEvent: {
-            type: {
-                new (type: string, eventInitDict?: EventInit | undefined): Event;
-                prototype: Event;
-                readonly AT_TARGET: number;
-                readonly BUBBLING_PHASE: number;
-                readonly CAPTURING_PHASE: number;
-                readonly NONE: number;
-            };
-        };
-    };
+type UDExMastheadShellBaseEventDetail = {
+    originalEvent: PointerEvent;
 };
 /**
  * @class
@@ -44,6 +33,16 @@ export declare const MastheadOriginalEvent: {
  * @public
  */
 declare class UDExMastheadShell extends UI5Element {
+    eventDetails: {
+        "mobile-menu-open": void;
+        "mobile-menu-close": void;
+        "search-click": void;
+        "cart-click": void;
+        "profile-click": void;
+        "country-selector-click": void;
+        "logo-click": UDExMastheadShellBaseEventDetail;
+        "site-label-click": UDExMastheadShellBaseEventDetail;
+    };
     /**
      * Slot for country selector item.
      *
@@ -91,10 +90,10 @@ declare class UDExMastheadShell extends UI5Element {
     /**
      * Defines URL to homepage. It will be used as a link on a logo and a site label
      *
-     * @default ""
+     * @default undefined
      * @public
      */
-    homeUrl: string;
+    homeUrl?: string;
     /**
      * Defines URL for site label. It will be used as a link on a logo and a site label
      *
@@ -147,25 +146,28 @@ declare class UDExMastheadShell extends UI5Element {
     /**
      * Defines an alt text for logo
      *
+     * @default ""
      * @public
      */
     logoAlt: string;
     /**
      * Defines an accessible name for close icon for the search bar
      *
-     * default: ""
+     * @default ""
      * @public
      */
     closeButtonAccessibleName: string;
     /**
      * Defines an aria label for the homepage link
      *
+     * @default ""
      * @public
      */
     homepageAriaLabel: string;
     /**
      * Defines an aria label for the site label
      *
+     * @default ""
      * @public
      */
     siteLabelAriaLabel: string;
@@ -193,13 +195,12 @@ declare class UDExMastheadShell extends UI5Element {
      * @private
      */
     _closeBtnClicked: boolean;
+    static i18nBundle: I18nBundle;
     _searchOpener: UDExMastheadItem | null | undefined;
     _mobileMenu: UDExMastheadMobileMenu | null | undefined;
     _handleResizeBound: ResizeObserverCallback;
     _rootHolder: HTMLElement | null | undefined;
     _shouldHandleResize: boolean;
-    static i18nBundle: I18nBundle;
-    static onDefine(): Promise<void>;
     constructor();
     onAfterRendering(): void;
     onEnterDOM(): void;
@@ -207,18 +208,18 @@ declare class UDExMastheadShell extends UI5Element {
     _handleResize(): void;
     handleMobileMode(): void;
     handleKeyDown(e: KeyboardEvent): void;
-    handleSearchKeyDown(e: CustomEvent): void;
     handleLeftArrow(e: KeyboardEvent): void;
     handleRightArrow(e: KeyboardEvent): void;
-    handleLogoClick(e: CustomEvent): void;
-    handleSiteLabelClick(e: CustomEvent): void;
+    handleLogoClick(e: PointerEvent): void;
+    handleSiteLabelClick(e: PointerEvent): void;
     handleSearchClick(e: CustomEvent): void;
     handleCartClick(e: CustomEvent): void;
     handleProfileClick(e: CustomEvent): void;
     handleCountrySelectorClick(e: CustomEvent): void;
     handleOpenMobileMenu(): void;
-    handleCloseSearch(e: CustomEvent): void;
+    handleCloseSearch(): void;
     handleEnterAndSpaceOnCloseBtn(e: KeyboardEvent): void;
+    handleOutsideClick(): void;
     focusSearchInput(): void;
     focusPreviousMenuItem(item: UDExMastheadItem): void;
     focusNextMenuItem(item: UDExMastheadItem): void;
@@ -283,7 +284,7 @@ declare class UDExMastheadShell extends UI5Element {
     get hasCountrySelector(): boolean;
     get hasMobileMenuButtons(): boolean;
     get isBreakpointSizeM(): boolean;
-    get isAtLeastBreakpointSizeM(): boolean;
+    get IsAtLeastBreakpointSizeM(): boolean;
     get isMainMenuVisible(): boolean;
     get isSearchVisible(): boolean;
     get shouldHandleMobileView(): boolean;

package/dist/MastheadShell.js

@@ -9,18 +9,18 @@ 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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { isLeft, isRight, isSpace, isEnter, isEscape, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isLeft, isRight, isSpace, isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/menu2.js";
 import "@ui5/webcomponents-icons/dist/search.js";
 import "@ui5/webcomponents-icons/dist/cart.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { MAIN_LINKS } from "./generated/i18n/i18n-defaults.js";
-import UDExMastheadItem, { DropdownItemAction } from "./MastheadItem.js";
+import UDExMastheadItem from "./MastheadItem.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExControlButton from "./ControlButton.js";
 import UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
@@ -29,11 +29,6 @@ import { BreakpointUtils } from "./utils/Breakpoints.js";
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
 const canvasContentFont = "16px '72 Brand Variable'";
-export const MastheadOriginalEvent = {
-    detail: {
-        originalEvent: { type: Event },
-    },
-};
 /**
  * @class
  *
@@ -52,17 +47,71 @@ export const MastheadOriginalEvent = {
  * @public
  */
 let UDExMastheadShell = UDExMastheadShell_1 = class UDExMastheadShell extends UI5Element {
-    static async onDefine() {
-        UDExMastheadShell_1.i18nBundle = await getI18nBundle("@sapudex/web-components");
-    }
     constructor() {
         super();
+        /**
+         * Defines URL for site label. It will be used as a link on a logo and a site label
+         *
+         * @default ""
+         * @public
+         */
+        this.siteLabelUrl = "";
+        /**
+         * Defines the Logo image URL
+         *
+         * @default ""
+         * @public
+         */
+        this.logoUrl = "";
+        /**
+         * Defines the Logo default title
+         *
+         * @default ""
+         * @public
+         */
+        this.logoTitle = "";
+        /**
+         * Defines a site label. It will be displayed next to a logo.
+         *
+         * @default ""
+         * @public
+         */
+        this.siteLabel = "";
+        /**
+         * Defines an alt text for logo
+         *
+         * @default ""
+         * @public
+         */
+        this.logoAlt = "";
+        /**
+         * Defines an accessible name for close icon for the search bar
+         *
+         * @default ""
+         * @public
+         */
+        this.closeButtonAccessibleName = "";
+        /**
+         * Defines an aria label for the homepage link
+         *
+         * @default ""
+         * @public
+         */
+        this.homepageAriaLabel = "";
+        /**
+         * Defines an aria label for the site label
+         *
+         * @default ""
+         * @public
+         */
+        this.siteLabelAriaLabel = "";
         this._handleResizeBound = this._handleResize.bind(this);
     }
     onAfterRendering() {
         this._rootHolder = this.mastheadHolder;
         this._searchOpener = this.searchOpener;
         this._mobileMenu = this.mastheadMobileMenu;
+        this.handleOutsideClick();
         if (this._isSearchOpened) {
             this.focusSearchInput();
         }
@@ -85,7 +134,6 @@ let UDExMastheadShell = UDExMastheadShell_1 = class UDExMastheadShell extends UI
         }
         if (this._shouldHandleResize && this._isMobileMenuOpen) {
             this.closeMobileMenu();
-            this.resetSelectedItems();
             return;
         }
         this._shouldHandleResize = true;
@@ -111,17 +159,6 @@ let UDExMastheadShell = UDExMastheadShell_1 = class UDExMastheadShell extends UI
         this.handleLeftArrow(e);
         this.handleRightArrow(e);
     }
-    handleSearchKeyDown(e) {
-        e.stopPropagation();
-        const keyEvent = e.detail;
-        if (isEscape(keyEvent)) {
-            if (this.showSearchByDefault && this.isAtLeastBreakpointSizeM) {
-                return;
-            }
-            this.closeSearch();
-            this.focusSearchBtn();
-        }
-    }
     handleLeftArrow(e) {
         if (isLeft(e)) {
             const currentItem = e.target;
@@ -145,27 +182,27 @@ let UDExMastheadShell = UDExMastheadShell_1 = class UDExMastheadShell extends UI
         }
     }
     handleLogoClick(e) {
-        this.fireEvent("logo-click", { originalEvent: e });
+        this.fireDecoratorEvent("logo-click", { originalEvent: e });
     }
     handleSiteLabelClick(e) {
-        this.fireEvent("site-label-click", { originalEvent: e });
+        this.fireDecoratorEvent("site-label-click", { originalEvent: e });
     }
     handleSearchClick(e) {
         e.stopPropagation();
-        this.fireEvent("search-click", { originalEvent: e });
         this.openSearch();
+        this.fireEvent("search-click");
     }
     handleCartClick(e) {
         e.stopPropagation();
-        this.fireEvent("cart-click", { originalEvent: e });
+        this.fireDecoratorEvent("cart-click");
     }
     handleProfileClick(e) {
         e.stopPropagation();
-        this.fireEvent("profile-click", { originalEvent: e });
+        this.fireDecoratorEvent("profile-click");
     }
     handleCountrySelectorClick(e) {
         e.stopPropagation();
-        this.fireEvent("country-selector-click", { originalEvent: e });
+        this.fireDecoratorEvent("country-selector-click");
     }
     handleOpenMobileMenu() {
         const clickedItem = this.mobileBtn;
@@ -177,12 +214,11 @@ let UDExMastheadShell = UDExMastheadShell_1 = class UDExMastheadShell extends UI
         if (this.bodyOverflow) {
             this.setOverflowBody();
         }
-        this.fireEvent("mobile-menu-open");
+        this.fireDecoratorEvent("mobile-menu-open");
     }
-    handleCloseSearch(e) {
-        this._closeBtnClicked = true;
-        this.fireEvent("search-close-click", { originalEvent: e });
+    handleCloseSearch() {
         this.closeSearch();
+        this._closeBtnClicked = true;
     }
     handleEnterAndSpaceOnCloseBtn(e) {
         if (isSpace(e) || isEnter(e)) {
@@ -191,6 +227,16 @@ let UDExMastheadShell = UDExMastheadShell_1 = class UDExMastheadShell extends UI
             this.mobileBtn?.focus();
         }
     }
+    handleOutsideClick() {
+        document.addEventListener("click", (e) => {
+            const el = e.target;
+            const isMobile = window.innerWidth < 1280 || this._isMobileMode;
+            const isDropdownSlot = el.getAttribute("slot") === "dropdown";
+            if (!isDropdownSlot && !el.isMenuItem && !isMobile) {
+                this.resetSelectedItems();
+            }
+        });
+    }
     focusSearchInput() {
         const searchSlot = this.querySelector("[udex-search]");
         if (searchSlot) {
@@ -213,10 +259,7 @@ let UDExMastheadShell = UDExMastheadShell_1 = class UDExMastheadShell extends UI
     }
     resetSelectedItems(clickedId) {
         this.getSelectedItems().forEach(item => {
-            if (item._id !== clickedId && item.selected) {
-                if (item.hasDropdownSlot) {
-                    item.fireDropdownCloseEvent(item.eventItemTitle, DropdownItemAction.ClickOutside);
-                }
+            if (item._id !== clickedId) {
                 item.selected = false;
             }
         });
@@ -339,7 +382,6 @@ let UDExMastheadShell = UDExMastheadShell_1 = class UDExMastheadShell extends UI
      */
     closeSearch() {
         this._isSearchOpened = false;
-        this.fireEvent("search-closed");
     }
     /**
      * Open the search panel.
@@ -349,7 +391,7 @@ let UDExMastheadShell = UDExMastheadShell_1 = class UDExMastheadShell extends UI
         const shouldPreventOpeningSearch = this._isSearchOpened
             || (this.isBreakpointSizeM && !this.showSearchByDefault)
             || this._isMobileMode
-            || (this.isAtLeastBreakpointSizeM && this.showSearchByDefault);
+            || (this.IsAtLeastBreakpointSizeM && this.showSearchByDefault);
         if (shouldPreventOpeningSearch) {
             return;
         }
@@ -358,7 +400,6 @@ let UDExMastheadShell = UDExMastheadShell_1 = class UDExMastheadShell extends UI
         if (this._searchOpener) {
             this._searchOpener.selected = false;
         }
-        this.fireEvent("search-opened");
     }
     /**
      * Open the mobile menu panel.
@@ -366,7 +407,7 @@ let UDExMastheadShell = UDExMastheadShell_1 = class UDExMastheadShell extends UI
      */
     openMobileMenu() {
         if (!this._isMobileMenuOpen && (this._isMobileMode || this.isBreakpointSizeM)) {
-            this.mobileBtn?.handleSelectedChange();
+            this.mobileBtn.handleSelectedChange();
             this.handleOpenMobileMenu();
         }
     }
@@ -378,8 +419,8 @@ let UDExMastheadShell = UDExMastheadShell_1 = class UDExMastheadShell extends UI
         if (!this._isMobileMenuOpen) {
             return;
         }
-        this.mobileBtn.selected = false;
         this._isMobileMenuOpen = false;
+        this.resetSelectedItems();
         this._mobileMenu?.showFirstLevelMenu();
         if (this.bodyOverflow) {
             this.removeOverflowBody();
@@ -451,7 +492,7 @@ let UDExMastheadShell = UDExMastheadShell_1 = class UDExMastheadShell extends UI
     get isBreakpointSizeM() {
         return BreakpointUtils.isAtMost("M");
     }
-    get isAtLeastBreakpointSizeM() {
+    get IsAtLeastBreakpointSizeM() {
         return BreakpointUtils.isAtLeast("M");
     }
     get isMainMenuVisible() {
@@ -536,6 +577,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], UDExMastheadShell.prototype, "_closeBtnClicked", void 0);
+__decorate([
+    i18n("@sapudex/web-components")
+], UDExMastheadShell, "i18nBundle", void 0);
 UDExMastheadShell = UDExMastheadShell_1 = __decorate([
     customElement({
         tag: "udex-masthead-shell",
@@ -557,78 +601,56 @@ UDExMastheadShell = UDExMastheadShell_1 = __decorate([
      * @public
      */
     ,
-    event("mobile-menu-open")
+    event("mobile-menu-open", { bubbles: true })
     /**
      * Fired event when the user clicks the mobile menu button closer.
      *
      * @public
      */
     ,
-    event("mobile-menu-close")
+    event("mobile-menu-close", { bubbles: true })
     /**
      * Fired event when the user clicks the search button trigger.
      *
      * @public
      */
     ,
-    event("search-click", MastheadOriginalEvent)
-    /**
-     * Fired event when the user clicks the search close button.
-     *
-     * @public
-     */
-    ,
-    event("search-close-click", MastheadOriginalEvent)
-    /**
-     * Fired event when the search panel is opened.
-     *
-     * @public
-     */
-    ,
-    event("search-opened")
-    /**
-     * Fired event when the search panel is closed.
-     *
-     * @public
-     */
-    ,
-    event("search-closed")
+    event("search-click", { bubbles: true })
     /**
      * Fired event when the user clicks the cart button trigger.
      *
      * @public
      */
     ,
-    event("cart-click", MastheadOriginalEvent)
+    event("cart-click", { bubbles: true })
     /**
      * Fired event when the user clicks the profile button trigger.
      *
      * @public
      */
     ,
-    event("profile-click", MastheadOriginalEvent)
+    event("profile-click", { bubbles: true })
     /**
      * Fired event when the user clicks the country selector button trigger.
      *
      * @public
      */
     ,
-    event("country-selector-click", MastheadOriginalEvent)
+    event("country-selector-click", { bubbles: true })
     /**
      * Fired event when the user clicks the logo.
      *
      * @public
      */
     ,
-    event("logo-click", MastheadOriginalEvent)
+    event("logo-click", { bubbles: true })
     /**
      * Fired event when the user clicks the site label.
      *
      * @public
-     * @public
      */
     ,
-    event("site-label-click", MastheadOriginalEvent)
+    event("site-label-click", { bubbles: true })
 ], UDExMastheadShell);
 UDExMastheadShell.define();
 export default UDExMastheadShell;