@sapudex/web-components 0.111.0

package/dist/MastheadProfileMenu.d.ts

@@ -0,0 +1,65 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+interface UserData {
+    name?: string;
+    username?: string;
+    email?: string;
+    avatarUrl?: string;
+    avatarInitials?: string;
+}
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-masthead-profile-menu</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/MastheadProfileMenu.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExMastheadProfileMenu extends UI5Element {
+    /**
+     * Defines the object of link values
+     *
+     * @default ""
+     * @public
+     */
+    links: string;
+    /**
+     * Defines the object of user profile data
+     *
+     * @default ""
+     * @public
+     */
+    loggedInUser: string;
+    /**
+     * Defines the link for logout
+     *
+     * @default ""
+     * @public
+     */
+    logoutUrl: string;
+    /**
+     * Placeholder for message strip.
+     *
+     * @public
+     */
+    message: Array<Node>;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    get linksList(): string;
+    get userData(): UserData;
+    parseArrayFromString<T>(string: string): T[];
+    get messageAvailable(): number;
+    get logoutLink(): number;
+    get logoutText(): string;
+    userLogout(): void;
+}
+export default UDExMastheadProfileMenu;

package/dist/MastheadProfileMenu.js

@@ -0,0 +1,94 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var UDExMastheadProfileMenu_1;
+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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { LOGOUT } from "./generated/i18n/i18n-defaults.js";
+import UDExMastheadMenu from "./MastheadMenu.js";
+import MastheadProfileMenuTemplate from "./generated/templates/MastheadProfileMenuTemplate.lit.js";
+// Styles
+import MastheadProfileMenuCss from "./generated/themes/MastheadProfileMenu.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-masthead-profile-menu</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/MastheadProfileMenu.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExMastheadProfileMenu = UDExMastheadProfileMenu_1 = class UDExMastheadProfileMenu extends UI5Element {
+    static async onDefine() {
+        UDExMastheadProfileMenu_1.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    }
+    get linksList() {
+        return this.links ? JSON.stringify([{
+                subMenuLinkItems: JSON.parse(this.links),
+            }]) : "";
+    }
+    get userData() {
+        return this.parseArrayFromString(this.loggedInUser);
+    }
+    parseArrayFromString(string) {
+        return string ? JSON.parse(string) : [];
+    }
+    get messageAvailable() {
+        return this.message.length;
+    }
+    get logoutLink() {
+        return this.logoutUrl.length;
+    }
+    get logoutText() {
+        return UDExMastheadProfileMenu_1.i18nBundle.getText(LOGOUT);
+    }
+    userLogout() {
+        this.fireEvent("logout");
+    }
+};
+__decorate([
+    property()
+], UDExMastheadProfileMenu.prototype, "links", void 0);
+__decorate([
+    property()
+], UDExMastheadProfileMenu.prototype, "loggedInUser", void 0);
+__decorate([
+    property()
+], UDExMastheadProfileMenu.prototype, "logoutUrl", void 0);
+__decorate([
+    slot({ type: Node, "default": false })
+], UDExMastheadProfileMenu.prototype, "message", void 0);
+UDExMastheadProfileMenu = UDExMastheadProfileMenu_1 = __decorate([
+    customElement({
+        tag: "udex-masthead-profile-menu",
+        renderer: litRender,
+        styles: [UDExMastheadMenu.styles, MastheadProfileMenuCss],
+        template: MastheadProfileMenuTemplate,
+        dependencies: [UDExMastheadMenu],
+    })
+    /**
+     * Fired when use click Logout link
+     * @public
+     */
+    ,
+    event("logout")
+], UDExMastheadProfileMenu);
+UDExMastheadProfileMenu.define();
+export default UDExMastheadProfileMenu;
+//# sourceMappingURL=MastheadProfileMenu.js.map

package/dist/MastheadProfileMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MastheadProfileMenu.js","sourceRoot":"","sources":["../src/MastheadProfileMenu.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,KAAK,MAAM,kDAAkD,CAAC;AACrE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAE7E,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAC3D,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AACjD,OAAO,2BAA2B,MAAM,0DAA0D,CAAC;AAEnG,SAAS;AACT,OAAO,sBAAsB,MAAM,+CAA+C,CAAC;AAUnF;;;;;;;;;;;;;;;;GAgBG;AAcH,IAAM,uBAAuB,+BAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAmC9C,MAAM,CAAC,KAAK,CAAC,QAAQ;QACnB,yBAAuB,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,6BAA6B,CAAC,CAAC;IAC1F,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;gBAClC,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;aACzC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACX,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAa,CAAC;IAClE,CAAC;IAED,oBAAoB,CAAI,MAAc;QACpC,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IACjD,CAAC;IAED,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;IAC7B,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAC/B,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,yBAAuB,CAAC,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5D,CAAC;IAED,UAAU;QACR,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC3B,CAAC;CACF,CAAA;AA5DG;IADD,QAAQ,EAAE;sDACM;AAQf;IADD,QAAQ,EAAE;6DACa;AAQtB;IADD,QAAQ,EAAE;0DACU;AAQnB;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;wDACf;AAhCpB,uBAAuB;IAb5B,aAAa,CAAC;QACb,GAAG,EAAE,4BAA4B;QACjC,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,CAAC,gBAAgB,CAAC,MAAM,EAAE,sBAAsB,CAAC;QACzD,QAAQ,EAAE,2BAA2B;QACrC,YAAY,EAAE,CAAC,gBAAgB,CAAC;KACjC,CAAC;IAEF;;;OAGG;;IACF,KAAK,CAAC,QAAQ,CAAC;GACV,uBAAuB,CAoE5B;AAED,uBAAuB,CAAC,MAAM,EAAE,CAAC;AAEjC,eAAe,uBAAuB,CAAC","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\";\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\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 \"@udex/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\")\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   * Defines the object of user profile data\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    loggedInUser!: string;\n  /**\n   * Defines the link for logout\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    logoutUrl!: string;\n\n  /**\n   * Placeholder for message strip.\n   *\n   * @public\n   */\n  @slot({ type: Node, \"default\": false })\n    message!: Array<Node>;\n  static i18nBundle: I18nBundle;\n\n  static async onDefine() {\n    UDExMastheadProfileMenu.i18nBundle = await getI18nBundle(\"sap-ui-webcomponents-bundle\");\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  parseArrayFromString<T>(string: string): T[] {\n    return string ? JSON.parse(string) as T[] : [];\n  }\n\n  get messageAvailable() {\n    return this.message.length;\n  }\n\n  get logoutLink() {\n    return this.logoutUrl.length;\n  }\n\n  get logoutText() {\n    return UDExMastheadProfileMenu.i18nBundle.getText(LOGOUT);\n  }\n\n  userLogout() {\n    this.fireEvent(\"logout\");\n  }\n}\n\nUDExMastheadProfileMenu.define();\n\nexport default UDExMastheadProfileMenu;\n"]}

package/dist/MastheadShell.d.ts

@@ -0,0 +1,187 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { 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";
+import "@ui5/webcomponents-icons/dist/cart.js";
+import UDExMastheadItem from "./MastheadItem.js";
+import UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-masthead-shell</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/MastheadShell.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExMastheadShell extends UI5Element {
+    /**
+     * Slot for mobile menu
+     *
+     * @public
+     */
+    mobileMenu: Array<Node>;
+    /**
+     * Slot for main menu items.
+     *
+     * @public
+     */
+    menuItems: Array<UDExMastheadItem>;
+    /**
+     * Slot for search component - will be visible on search icon click.
+     * Note: search component should be hidden by default.
+     * Note: search icon won't be visible if this slot would be empty
+     *
+     * @public
+     */
+    search: Array<Node>;
+    /**
+     * Slot for 'Explore SAP' menu
+     *
+     * @public
+     */
+    exploreSAP: Array<UDExMastheadItem>;
+    /**
+     * Slot for cart menu
+     *
+     * @public
+     */
+    cart: Array<UDExMastheadItem>;
+    /**
+     * Slot for avatar
+     *
+     * @public
+     */
+    profile: Array<UDExMastheadItem>;
+    /**
+     * Defines URL to homepage. It will be used as a link on a logo and a site label
+     *
+     * @default ""
+     * @public
+     */
+    homeUrl: string;
+    /**
+     * Defines URL for site label. It will be used as a link on a logo and a site label
+     *
+     * @default ""
+     * @public
+     */
+    siteLabelUrl: string;
+    /**
+     * Defines overflow style for the body after clicking mobile menu opener button
+     *
+     * @default ""
+     * @public
+     */
+    bodyOverflow: boolean;
+    /**
+     * Defines sticky position for component
+     *
+     * @default ""
+     * @public
+     */
+    stickyPosition: boolean;
+    /**
+     * Defines the Logo image URL
+     *
+     * @default ""
+     * @public
+     */
+    logoUrl: string;
+    /**
+     * Defines a site label. It will be displayed next to a logo.
+     *
+     * @default ""
+     * @public
+     */
+    siteLabel: string;
+    /**
+     * Defines an alt text for logo
+     *
+     * @public
+     */
+    logoAlt: string;
+    /**
+     * Defines an accessible name for close icon for the search bar
+     *
+     * default: ""
+     * @public
+     */
+    closeButtonAccessibleName?: string;
+    /**
+     * Defines an aria label for the homepage link
+     *
+     * @public
+     */
+    homepageAriaLabel: string;
+    /**
+     * Defines an aria label for the site label
+     *
+     * @public
+     */
+    siteLabelAriaLabel: string;
+    /**
+     * Defines if the search container is visible
+     *
+     * @private
+     */
+    _isSearchVisible: boolean;
+    /**
+     * Defines if the close button was clicked
+     *
+     * @private
+     */
+    _closeBtnClicked: boolean;
+    _searchOpener: UDExMastheadItem | null | undefined;
+    _mobileMenu: UDExMastheadMobileMenu | null | undefined;
+    _handleResizeBound: ResizeObserverCallback;
+    _rootHolder: HTMLElement | null | undefined;
+    _shouldHandleResize: boolean;
+    constructor();
+    onAfterRendering(): void;
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    _handleResize(): void;
+    handleKeyDown(e: KeyboardEvent): void;
+    handleLeftArrow(e: KeyboardEvent): void;
+    handleRightArrow(e: KeyboardEvent): void;
+    handleSearchClick(e: CustomEvent): void;
+    handleCartClick(e: CustomEvent): void;
+    handleProfileClick(e: CustomEvent): void;
+    handleMobileMenuClick(e: CustomEvent): void;
+    handleMobileCloseClick(e: CustomEvent): void;
+    handleOutsideClick(): void;
+    focusSearchInput(): void;
+    focusPreviousMenuItem(item: UDExMastheadItem): void;
+    focusNextMenuItem(item: UDExMastheadItem): void;
+    resetSelectedItems(): void;
+    addActiveMobileClass(): void;
+    removeActiveMobileClass(): void;
+    setSelectedItem(e: CustomEvent): void;
+    focusSearchBtn(): void;
+    hideSearch(): void;
+    getCurrentIndex(item: UDExMastheadItem): number;
+    getSelectedItems(): Array<UDExMastheadItem>;
+    isNavigationItem(item: UDExMastheadItem): boolean;
+    setOverflowBody(): void;
+    removeOverflowBody(): void;
+    get searchOpener(): UDExMastheadItem | null | undefined;
+    get mastheadHolder(): HTMLElement | null | undefined;
+    get mastheadMobileMenu(): UDExMastheadMobileMenu | null;
+    get mobileBtn(): UDExMastheadItem | null | undefined;
+    get closeBtn(): UDExMastheadItem | null | undefined;
+    get hasProfile(): boolean;
+    get hasCart(): boolean;
+    get hasSearch(): boolean;
+    get hasMobileMenuButtons(): boolean;
+}
+export default UDExMastheadShell;

package/dist/MastheadShell.js

@@ -0,0 +1,340 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 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 } 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 UDExMastheadItem from "./MastheadItem.js";
+import UDExMastheadMenu from "./MastheadMenu.js";
+import UDExControlButton from "./ControlButton.js";
+import UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
+import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.lit.js";
+// Styles
+import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
+const mobileMenuActiveClass = "udex-masthead-shell_mobile-menu-open";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-masthead-shell</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/MastheadShell.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExMastheadShell = class UDExMastheadShell extends UI5Element {
+    constructor() {
+        super();
+        this._handleResizeBound = this._handleResize.bind(this);
+    }
+    onAfterRendering() {
+        this._rootHolder = this.mastheadHolder;
+        this._searchOpener = this.searchOpener;
+        this._mobileMenu = this.mastheadMobileMenu;
+        this.handleOutsideClick();
+        if (this._isSearchVisible) {
+            this.focusSearchInput();
+        }
+        if (this._closeBtnClicked) {
+            this.focusSearchBtn();
+        }
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._handleResizeBound);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResizeBound);
+    }
+    _handleResize() {
+        if (this._shouldHandleResize) {
+            this._mobileMenu?.showFirstLevelMenu();
+            this.removeOverflowBody();
+            return;
+        }
+        this._shouldHandleResize = true;
+    }
+    handleKeyDown(e) {
+        e.stopPropagation();
+        this.handleLeftArrow(e);
+        this.handleRightArrow(e);
+    }
+    handleLeftArrow(e) {
+        if (isLeft(e)) {
+            const currentItem = e.target;
+            if (this.isNavigationItem(currentItem)) {
+                this.focusPreviousMenuItem(currentItem);
+            }
+        }
+    }
+    handleRightArrow(e) {
+        if (isRight(e)) {
+            const currentItem = e.target;
+            if (this.isNavigationItem(currentItem)) {
+                this.focusNextMenuItem(currentItem);
+            }
+        }
+    }
+    handleSearchClick(e) {
+        e.stopPropagation();
+        this._isSearchVisible = true;
+        this.resetSelectedItems();
+        if (this._searchOpener) {
+            this._searchOpener.selected = false;
+        }
+        this.fireEvent("search-click");
+    }
+    handleCartClick(e) {
+        e.stopPropagation();
+        this.setSelectedItem(e);
+        this.fireEvent("cart-click");
+    }
+    handleProfileClick(e) {
+        e.stopPropagation();
+        this.setSelectedItem(e);
+        this.fireEvent("profile-click");
+    }
+    handleMobileMenuClick(e) {
+        e.stopPropagation();
+        this.setSelectedItem(e);
+        this.addActiveMobileClass();
+        if (this.bodyOverflow) {
+            this.setOverflowBody();
+        }
+    }
+    handleMobileCloseClick(e) {
+        e.preventDefault();
+        this.removeActiveMobileClass();
+        this.setSelectedItem(e);
+        this._mobileMenu?.showFirstLevelMenu();
+        if (this.bodyOverflow) {
+            this.removeOverflowBody();
+        }
+    }
+    handleOutsideClick() {
+        document.addEventListener("click", (e) => {
+            const el = e.target;
+            const isMobile = window.innerWidth < 1280;
+            const isDropdownSlot = el.getAttribute("slot") === "dropdown";
+            if (!isDropdownSlot && !el.isMenuItem && !isMobile) {
+                this.resetSelectedItems();
+            }
+        });
+    }
+    focusSearchInput() {
+        const searchSlot = this.querySelector("udex-search");
+        if (searchSlot) {
+            const input = searchSlot.shadowRoot.querySelector("input");
+            input?.focus();
+        }
+    }
+    focusPreviousMenuItem(item) {
+        const currentSelectedIndex = this.getCurrentIndex(item);
+        const lastItemIndex = this.menuItems.length - 1;
+        const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
+        this.menuItems[previousSelectIndex].focus();
+    }
+    focusNextMenuItem(item) {
+        const currentSelectedIndex = this.getCurrentIndex(item);
+        const nextSelectIndex = currentSelectedIndex + 1 > this.menuItems.length - 1 ? 0 : currentSelectedIndex + 1;
+        this.menuItems[nextSelectIndex].focus();
+    }
+    resetSelectedItems() {
+        this.getSelectedItems().forEach(item => {
+            item.selected = false;
+        });
+    }
+    addActiveMobileClass() {
+        this._rootHolder?.classList.add(mobileMenuActiveClass);
+    }
+    removeActiveMobileClass() {
+        this._rootHolder?.classList.remove(mobileMenuActiveClass);
+    }
+    setSelectedItem(e) {
+        const clickedItem = e.detail.item;
+        if (!clickedItem) {
+            return;
+        }
+        this.getSelectedItems().forEach(item => {
+            if (item._id !== clickedItem._id) {
+                item.selected = false;
+            }
+        });
+    }
+    focusSearchBtn() {
+        if (this._searchOpener) {
+            this._searchOpener.focus();
+        }
+    }
+    hideSearch() {
+        this._isSearchVisible = false;
+        this._closeBtnClicked = true;
+    }
+    getCurrentIndex(item) {
+        return this.menuItems.indexOf(item);
+    }
+    getSelectedItems() {
+        const buttonsArray = [
+            ...this.menuItems,
+            ...this.exploreSAP,
+            ...this.cart,
+            ...this.profile,
+            ...(this.mobileBtn && this.closeBtn ? [this.mobileBtn, this.closeBtn] : []),
+        ];
+        return buttonsArray.filter(({ selected }) => selected);
+    }
+    isNavigationItem(item) {
+        return this.menuItems.some(menuItem => menuItem === item);
+    }
+    setOverflowBody() {
+        const { body: { style } } = document;
+        this._shouldHandleResize = false;
+        style.overflow = "hidden";
+    }
+    removeOverflowBody() {
+        const { body: { style } } = document;
+        style.removeProperty("overflow");
+    }
+    get searchOpener() {
+        return this.shadowRoot?.querySelector(".udex-masthead-shell__search-btn");
+    }
+    get mastheadHolder() {
+        return this.shadowRoot?.querySelector(".udex-masthead-shell");
+    }
+    get mastheadMobileMenu() {
+        return this.querySelector("[udex-masthead-mobile-menu]");
+    }
+    get mobileBtn() {
+        return this.shadowRoot?.querySelector(".udex-masthead-shell__menu-btn");
+    }
+    get closeBtn() {
+        return this.shadowRoot?.querySelector(".udex-masthead-shell__close-btn");
+    }
+    get hasProfile() {
+        return !!this.profile.length;
+    }
+    get hasCart() {
+        return !!this.cart.length;
+    }
+    get hasSearch() {
+        return !!this.search.length;
+    }
+    get hasMobileMenuButtons() {
+        return !!this.mobileMenu.length;
+    }
+};
+__decorate([
+    slot({ type: HTMLElement })
+], UDExMastheadShell.prototype, "mobileMenu", void 0);
+__decorate([
+    slot({ type: HTMLElement, individualSlots: true, "default": true })
+], UDExMastheadShell.prototype, "menuItems", void 0);
+__decorate([
+    slot({ type: Node })
+], UDExMastheadShell.prototype, "search", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], UDExMastheadShell.prototype, "exploreSAP", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], UDExMastheadShell.prototype, "cart", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], UDExMastheadShell.prototype, "profile", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExMastheadShell.prototype, "homeUrl", void 0);
+__decorate([
+    property({ type: String })
+], UDExMastheadShell.prototype, "siteLabelUrl", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMastheadShell.prototype, "bodyOverflow", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMastheadShell.prototype, "stickyPosition", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExMastheadShell.prototype, "logoUrl", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExMastheadShell.prototype, "siteLabel", void 0);
+__decorate([
+    property({ type: String })
+], UDExMastheadShell.prototype, "logoAlt", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExMastheadShell.prototype, "closeButtonAccessibleName", void 0);
+__decorate([
+    property({ type: String })
+], UDExMastheadShell.prototype, "homepageAriaLabel", void 0);
+__decorate([
+    property({ type: String })
+], UDExMastheadShell.prototype, "siteLabelAriaLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMastheadShell.prototype, "_isSearchVisible", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMastheadShell.prototype, "_closeBtnClicked", void 0);
+UDExMastheadShell = __decorate([
+    customElement({
+        tag: "udex-masthead-shell",
+        renderer: litRender,
+        styles: MastheadShellCss,
+        template: MastheadShellTemplate,
+        dependencies: [
+            UDExMastheadMobileMenu,
+            UDExControlButton,
+            UDExMastheadItem,
+            UDExMastheadMenu,
+            UI5Icon,
+        ],
+    })
+    /**
+     * Fired event when the user clicks the search button trigger.
+     *
+     * @event sap.ui.webc.web-components.UDExMastheadShell#searchClick
+     * @public
+     */
+    ,
+    event("search-click")
+    /**
+     * Fired event when the user clicks the cart button trigger.
+     *
+     * @event sap.ui.webc.web-components.UDExMastheadShell#cartClick
+     * @public
+     */
+    ,
+    event("cart-click")
+    /**
+     * Fired event when the user clicks the profile button trigger.
+     *
+     * @event sap.ui.webc.web-components.UDExMastheadShell#profileClick
+     * @public
+     */
+    ,
+    event("profile-click")
+], UDExMastheadShell);
+UDExMastheadShell.define();
+export default UDExMastheadShell;
+//# sourceMappingURL=MastheadShell.js.map