@sapudex/web-components 0.192.4 → 0.224.0

package/dist/MastheadCountrySelector.js

@@ -0,0 +1,367 @@
+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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import { isUp, isDown, isRight, isLeft, isEnd, isHome, } from "@ui5/webcomponents-base/dist/Keys.js";
+import UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import UDExSearch, { Mode as UDExSearchMode } from "./Search.js";
+import MastheadCountrySelectorTemplate from "./generated/templates/MastheadCountrySelectorTemplate.lit.js";
+// Styles
+import MastheadCountrySelectorCss from "./generated/themes/MastheadCountrySelector.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>masthead-country-selector</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/MastheadCountrySelector.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExMastheadCountrySelector = class UDExMastheadCountrySelector extends UI5Element {
+    constructor() {
+        super();
+        this._requestRender = false;
+        this._activeCountries = [];
+    }
+    onAfterRendering() {
+        this.handleFocusItem();
+        this.setTabIndexForItems();
+        this.handleDirection();
+        this.handleOutsideClick();
+        if (this.isSingleMode) {
+            this.handleSingleRegionMode();
+        }
+    }
+    onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+    }
+    handleRegionClick(e) {
+        this.openCountriesByRegion(e);
+        this.fireEventRegionItemClick(e);
+    }
+    handleKeyDown(e) {
+        const item = e.target;
+        if (item.hasAttribute("is-back")) {
+            this.handleBackKeyboard(e);
+            return;
+        }
+        if (item.hasAttribute("is-nav-item")) {
+            this.handleUpArrow(e);
+            this.handleDownArrow(e);
+            this.handleRightArrow(e);
+            this.handleLeftArrow(e);
+            this.handleHomeKey(e);
+            this.handleEndKey(e);
+        }
+    }
+    handleBackKeyboard(e) {
+        if (isLeft(e) && !this.isRtlDirection) {
+            return this.backToRegions();
+        }
+        if (isRight(e) && this.isRtlDirection) {
+            return this.backToRegions();
+        }
+    }
+    handleRightArrow(e) {
+        if (isRight(e) && !this.isRtlDirection) {
+            this.openCountriesByRegion(e);
+            this.fireEventRegionItemClick(e);
+        }
+    }
+    handleLeftArrow(e) {
+        if (isLeft(e) && this.isRtlDirection) {
+            this.openCountriesByRegion(e);
+            this.fireEventRegionItemClick(e);
+        }
+    }
+    handleUpArrow(e) {
+        if (isUp(e)) {
+            e.preventDefault();
+            this.focusPreviousItem(e);
+        }
+    }
+    handleDownArrow(e) {
+        if (isDown(e)) {
+            e.preventDefault();
+            this.focusNextItem(e);
+        }
+    }
+    handleSearch(e) {
+        const searchTerm = e.detail.value.toLowerCase().trim();
+        if (!this._activeRegion || !this._activeRegion.countries) {
+            this.setActiveCountries([]);
+            return;
+        }
+        if (!searchTerm) {
+            this.setActiveCountries([...this._activeRegion.countries]);
+        }
+        else {
+            this.setActiveCountries(this._activeRegion.countries.filter(country => country.displayTitle.toLowerCase().includes(searchTerm)));
+        }
+        this._shouldFocusBackBtn = false;
+        this.fireEvent("country-selector-search", {
+            value: e.detail.value,
+        });
+        this.refreshRendering();
+    }
+    handleSearchReset() {
+        this.setActiveCountries([...this._activeRegion?.countries || []]);
+        this.refreshRendering();
+    }
+    handleFocusItem() {
+        if (this._shouldFocusBackBtn) {
+            this.focusBackBtn();
+        }
+        if (this._shouldFocusRegionByIndex) {
+            this.focusRegionByIndex();
+        }
+    }
+    refreshRendering() {
+        this._requestRender = !this._requestRender;
+    }
+    handleDirection() {
+        const directionStyles = window
+            .getComputedStyle(this)
+            .getPropertyValue("direction");
+        if (!directionStyles) {
+            this._direction = "ltr";
+        }
+        else {
+            this._direction = directionStyles;
+        }
+    }
+    handleOutsideClick() {
+        document.addEventListener("mousedown", (e) => {
+            if (e.target !== this) {
+                this.handleSearchReset();
+                this._isActiveRegionOpen = false;
+                this.setActiveRegion(null);
+            }
+        });
+    }
+    openCountriesByRegion(e) {
+        const item = e.target;
+        const activeRegion = this.regionsData[item.index];
+        this.setActiveRegion(activeRegion);
+        this.setActiveCountries(activeRegion.countries);
+        this._isActiveRegionOpen = true;
+        this._activeRegionIndex = item.index;
+        this._shouldFocusBackBtn = true;
+        this._shouldFocusRegionByIndex = false;
+    }
+    backToRegions() {
+        this._isActiveRegionOpen = false;
+        this.setActiveRegion(null);
+        this._shouldFocusRegionByIndex = true;
+    }
+    focusPreviousItem(e) {
+        const currentIndex = e.target.index;
+        const lastItemIndex = this.items.length - 1;
+        const prevIndex = currentIndex - 1 < 0 ? lastItemIndex : currentIndex - 1;
+        const prevItem = this.items[prevIndex];
+        this.items[currentIndex]._tabIndex = "-1";
+        prevItem._tabIndex = "0";
+        prevItem.focus();
+    }
+    focusNextItem(e) {
+        const currentIndex = e.target.index;
+        const lastItemIndex = this.items.length - 1;
+        const nextIndex = currentIndex + 1 > lastItemIndex ? 0 : currentIndex + 1;
+        const nextItem = this.items[nextIndex];
+        this.items[currentIndex]._tabIndex = "-1";
+        nextItem._tabIndex = "0";
+        nextItem.focus();
+    }
+    handleEndKey(e) {
+        if (isEnd(e)) {
+            e.preventDefault();
+            const currentIndex = e.target.index;
+            const lastItemIndex = this.items.length - 1;
+            const lastItem = this.items[lastItemIndex];
+            this.items[currentIndex]._tabIndex = "-1";
+            lastItem._tabIndex = "0";
+            lastItem.focus();
+        }
+    }
+    handleHomeKey(e) {
+        if (isHome(e)) {
+            e.preventDefault();
+            const currentIndex = e.target.index;
+            const firstItem = this.items[0];
+            this.items[currentIndex]._tabIndex = "-1";
+            firstItem._tabIndex = "0";
+            firstItem.focus();
+        }
+    }
+    handleSingleRegionMode() {
+        this.setActiveRegion(this.regionsData[0]);
+        this.setActiveCountries([...this.regionsData[0].countries]);
+        this._isActiveRegionOpen = true;
+    }
+    focusBackBtn() {
+        const backBtn = this.shadowRoot?.querySelector(".udex-masthead-country-selector__region-back-item") || null;
+        backBtn?.focus();
+    }
+    focusRegionByIndex() {
+        const regionItems = this.shadowRoot?.querySelectorAll(".udex-masthead-country-selector__item_region") || [];
+        regionItems[this._activeRegionIndex].focus();
+    }
+    fireEventRegionItemClick(e) {
+        const { label } = e.target;
+        this.fireEvent("region-item-click", {
+            item: {
+                title: label,
+                countries: this._activeRegion?.countries || [],
+            },
+            originalEvent: e,
+        });
+    }
+    fireEventCountryItemClick(e) {
+        const item = e.target;
+        const { label, url } = item;
+        this.fireEvent("country-item-click", {
+            item: {
+                displayTitle: label,
+                countryCode: item.getAttribute("_country-code") || "",
+                url: url || "",
+            },
+            originalEvent: e,
+        });
+    }
+    setActiveRegion(region) {
+        this._activeRegion = region;
+    }
+    setActiveCountries(countries) {
+        this._activeCountries = countries;
+    }
+    setTabIndexForItems() {
+        this.items.forEach((item, index) => {
+            if (this._activeRegionIndex > 0 && this._shouldFocusRegionByIndex) {
+                item._tabIndex = index === this._activeRegionIndex ? "0" : "-1";
+                return;
+            }
+            item._tabIndex = index === 0 ? "0" : "-1";
+        });
+    }
+    get items() {
+        const items = this.shadowRoot?.querySelectorAll(".udex-masthead-country-selector__item");
+        return items ? Array.from(items) : [];
+    }
+    get regionsData() {
+        return this.regions ? JSON.parse(this.regions) : [];
+    }
+    get isRtlDirection() {
+        return this._direction === "rtl";
+    }
+    get homeSearchMode() {
+        return UDExSearchMode.HomeSearch;
+    }
+    get isSingleMode() {
+        return this.regionsData.length === 1;
+    }
+};
+__decorate([
+    property({ type: String })
+], UDExMastheadCountrySelector.prototype, "regionTitle", void 0);
+__decorate([
+    property({ type: String })
+], UDExMastheadCountrySelector.prototype, "countryTitle", void 0);
+__decorate([
+    property()
+], UDExMastheadCountrySelector.prototype, "regions", void 0);
+__decorate([
+    property()
+], UDExMastheadCountrySelector.prototype, "searchLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMastheadCountrySelector.prototype, "showSearchVoiceButton", void 0);
+__decorate([
+    property()
+], UDExMastheadCountrySelector.prototype, "languageVoice", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMastheadCountrySelector.prototype, "_isActiveRegionOpen", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMastheadCountrySelector.prototype, "_isMobileMode", void 0);
+__decorate([
+    property({ type: String })
+], UDExMastheadCountrySelector.prototype, "_direction", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], UDExMastheadCountrySelector.prototype, "_requestRender", void 0);
+UDExMastheadCountrySelector = __decorate([
+    customElement({
+        tag: "udex-masthead-country-selector",
+        renderer: litRender,
+        styles: MastheadCountrySelectorCss,
+        template: MastheadCountrySelectorTemplate,
+        dependencies: [UI5Icon, UDExMastheadMenuItem, UDExSearch],
+    })
+    /**
+     * Fires when region item is clicked
+     *
+     * @public
+     */
+    ,
+    event("region-item-click", {
+        detail: {
+            item: {
+                type: HTMLElement,
+            },
+            originalEvent: {
+                type: Event,
+            },
+        },
+    })
+    /**
+     * Fires when region item is clicked
+     *
+     * @public
+     */
+    ,
+    event("country-item-click", {
+        detail: {
+            item: {
+                type: HTMLElement,
+            },
+            originalEvent: {
+                type: Event,
+            },
+        },
+    })
+    /**
+     * Fired event when the user typed to search field.
+     *
+     * @public
+     */
+    ,
+    event("country-selector-search", {
+        detail: {
+            value: { type: String },
+        },
+    })
+], UDExMastheadCountrySelector);
+UDExMastheadCountrySelector.define();
+export default UDExMastheadCountrySelector;
+//# sourceMappingURL=MastheadCountrySelector.js.map

package/dist/MastheadCountrySelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MastheadCountrySelector.js","sourceRoot":"","sources":["../src/MastheadCountrySelector.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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport {\n  isUp, isDown, isRight, isLeft, isEnd, isHome,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport UDExMastheadMenuItem from \"./MastheadMenuItem.js\";\nimport UDExSearch, { Mode as UDExSearchMode } from \"./Search.js\";\n\nimport MastheadCountrySelectorTemplate from \"./generated/templates/MastheadCountrySelectorTemplate.lit.js\";\n\n// Styles\nimport MastheadCountrySelectorCss from \"./generated/themes/MastheadCountrySelector.css.js\";\n\nexport type RegionItemClickEventDetail = {\n  item: {\n    title: string,\n    countries: Array<Country>,\n  },\n  originalEvent: Event,\n}\n\nexport type CountryItemClickEventDetail = {\n  item: {\n    displayTitle: string,\n    countryCode: string,\n    url: string,\n  },\n  originalEvent: Event,\n}\n\nexport type SearchEventDetail = {\n  value: string,\n}\n\nexport type Region = {\n  title: string,\n  countries: Array<Country>,\n};\n\nexport type Country = {\n  displayTitle: string,\n  countryCode: string,\n  url: 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>masthead-country-selector</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/MastheadCountrySelector.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-masthead-country-selector\",\n  renderer: litRender,\n  styles: MastheadCountrySelectorCss,\n  template: MastheadCountrySelectorTemplate,\n  dependencies: [UI5Icon, UDExMastheadMenuItem, UDExSearch],\n})\n\n/**\n * Fires when region item is clicked\n *\n * @public\n */\n@event(\"region-item-click\", {\n  detail: {\n    item: {\n      type: HTMLElement,\n    },\n    originalEvent: {\n      type: Event,\n    },\n  },\n})\n\n/**\n * Fires when region item is clicked\n *\n * @public\n */\n@event(\"country-item-click\", {\n  detail: {\n    item: {\n      type: HTMLElement,\n    },\n    originalEvent: {\n      type: Event,\n    },\n  },\n})\n\n/**\n * Fired event when the user typed to search field.\n *\n * @public\n */\n@event(\"country-selector-search\", {\n  detail: {\n    value: { type: String },\n  },\n})\n\nclass UDExMastheadCountrySelector extends UI5Element {\n  /**\n   * Defines title of the regions menu\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    regionTitle!: string;\n\n  /**\n   * Defines title of the countries menu\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    countryTitle!: string;\n\n  /**\n   * Defines the object of the regions\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    regions!: string;\n\n  /**\n   * Defines the label of the search\n   *\n   * @default \"en-US\"\n   * @public\n   */\n  @property()\n    searchLabel!: string;\n\n  /**\n   * Defines display the voice button for the search field.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    showSearchVoiceButton!: boolean;\n\n  /**\n   * Defines the language voice of the search\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    languageVoice!: string;\n\n  /**\n   * Defines the country list of the region is opened\n   *\n   * @private\n   */\n  @property({ type: Boolean })\n    _isActiveRegionOpen!: boolean;\n\n  /**\n   * Defines the mobile mode for component\n   *\n   * @private\n   */\n  @property({ type: Boolean })\n    _isMobileMode!: boolean;\n\n  /**\n   * Defines direction of the component.\n   *\n   * @private\n   */\n  @property({ type: String })\n    _direction!: string;\n\n  @property({ type: Boolean, noAttribute: true })\n    _requestRender = false;\n\n  _activeRegion!: Region | null;\n  _activeCountries!: Array<Country>;\n  _shouldFocusBackBtn!: boolean;\n  _shouldFocusRegionByIndex!: boolean;\n  _activeRegionIndex!: number;\n\n  constructor() {\n    super();\n    this._activeCountries = [];\n  }\n\n  onAfterRendering(): void {\n    this.handleFocusItem();\n    this.setTabIndexForItems();\n    this.handleDirection();\n    this.handleOutsideClick();\n\n    if (this.isSingleMode) {\n      this.handleSingleRegionMode();\n    }\n  }\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  handleRegionClick(e: CustomEvent): void {\n    this.openCountriesByRegion(e);\n    this.fireEventRegionItemClick(e);\n  }\n\n  handleKeyDown(e: KeyboardEvent): void {\n    const item = e.target as UDExMastheadMenuItem;\n\n    if (item.hasAttribute(\"is-back\")) {\n      this.handleBackKeyboard(e);\n      return;\n    }\n\n    if (item.hasAttribute(\"is-nav-item\")) {\n      this.handleUpArrow(e);\n      this.handleDownArrow(e);\n      this.handleRightArrow(e);\n      this.handleLeftArrow(e);\n      this.handleHomeKey(e);\n      this.handleEndKey(e);\n    }\n  }\n\n  handleBackKeyboard(e: KeyboardEvent): void {\n    if (isLeft(e) && !this.isRtlDirection) {\n      return this.backToRegions();\n    }\n    if (isRight(e) && this.isRtlDirection) {\n      return this.backToRegions();\n    }\n  }\n\n  handleRightArrow(e: KeyboardEvent): void {\n    if (isRight(e) && !this.isRtlDirection) {\n      this.openCountriesByRegion(e);\n      this.fireEventRegionItemClick(e);\n    }\n  }\n\n  handleLeftArrow(e: KeyboardEvent): void {\n    if (isLeft(e) && this.isRtlDirection) {\n      this.openCountriesByRegion(e);\n      this.fireEventRegionItemClick(e);\n    }\n  }\n\n  handleUpArrow(e: KeyboardEvent): void {\n    if (isUp(e)) {\n      e.preventDefault();\n      this.focusPreviousItem(e);\n    }\n  }\n\n  handleDownArrow(e: KeyboardEvent): void {\n    if (isDown(e)) {\n      e.preventDefault();\n      this.focusNextItem(e);\n    }\n  }\n\n  handleSearch(e: CustomEvent): void {\n    const searchTerm = e.detail.value.toLowerCase().trim() as string;\n\n    if (!this._activeRegion || !this._activeRegion.countries) {\n      this.setActiveCountries([]);\n      return;\n    }\n\n    if (!searchTerm) {\n      this.setActiveCountries([...this._activeRegion.countries]);\n    } else {\n      this.setActiveCountries(this._activeRegion.countries.filter(country => country.displayTitle.toLowerCase().includes(searchTerm)));\n    }\n\n    this._shouldFocusBackBtn = false;\n    this.fireEvent<SearchEventDetail>(\"country-selector-search\", {\n      value: e.detail.value,\n    });\n    this.refreshRendering();\n  }\n\n  handleSearchReset(): void {\n    this.setActiveCountries([...this._activeRegion?.countries || []]);\n    this.refreshRendering();\n  }\n\n  handleFocusItem(): void {\n    if (this._shouldFocusBackBtn) {\n      this.focusBackBtn();\n    }\n\n    if (this._shouldFocusRegionByIndex) {\n      this.focusRegionByIndex();\n    }\n  }\n\n  refreshRendering(): void {\n    this._requestRender = !this._requestRender;\n  }\n\n  handleDirection() {\n    const directionStyles: string = window\n      .getComputedStyle(this)\n      .getPropertyValue(\"direction\");\n    if (!directionStyles) {\n      this._direction = \"ltr\";\n    } else {\n      this._direction = directionStyles;\n    }\n  }\n\n  handleOutsideClick(): void {\n    document.addEventListener(\"mousedown\", (e: Event): void => {\n      if (e.target !== this) {\n        this.handleSearchReset();\n        this._isActiveRegionOpen = false;\n        this.setActiveRegion(null);\n      }\n    });\n  }\n\n  openCountriesByRegion(e: CustomEvent | KeyboardEvent): void {\n    const item = e.target as UDExMastheadMenuItem;\n    const activeRegion = this.regionsData[item.index];\n    this.setActiveRegion(activeRegion);\n    this.setActiveCountries(activeRegion.countries);\n    this._isActiveRegionOpen = true;\n    this._activeRegionIndex = item.index;\n    this._shouldFocusBackBtn = true;\n    this._shouldFocusRegionByIndex = false;\n  }\n\n  backToRegions(): void {\n    this._isActiveRegionOpen = false;\n    this.setActiveRegion(null);\n    this._shouldFocusRegionByIndex = true;\n  }\n\n  focusPreviousItem(e: KeyboardEvent): void {\n    const currentIndex = (e.target as UDExMastheadMenuItem).index;\n    const lastItemIndex = this.items.length - 1;\n    const prevIndex = currentIndex - 1 < 0 ? lastItemIndex : currentIndex - 1;\n    const prevItem = this.items[prevIndex];\n\n    this.items[currentIndex]._tabIndex = \"-1\";\n    prevItem._tabIndex = \"0\";\n    prevItem.focus();\n  }\n\n  focusNextItem(e: KeyboardEvent): void {\n    const currentIndex = (e.target as UDExMastheadMenuItem).index;\n    const lastItemIndex = this.items.length - 1;\n    const nextIndex = currentIndex + 1 > lastItemIndex ? 0 : currentIndex + 1;\n    const nextItem = this.items[nextIndex];\n\n    this.items[currentIndex]._tabIndex = \"-1\";\n    nextItem._tabIndex = \"0\";\n    nextItem.focus();\n  }\n\n  handleEndKey(e: KeyboardEvent): void {\n    if (isEnd(e)) {\n      e.preventDefault();\n      const currentIndex = (e.target as UDExMastheadMenuItem).index;\n      const lastItemIndex = this.items.length - 1;\n      const lastItem = this.items[lastItemIndex];\n\n      this.items[currentIndex]._tabIndex = \"-1\";\n      lastItem._tabIndex = \"0\";\n      lastItem.focus();\n    }\n  }\n\n  handleHomeKey(e: KeyboardEvent): void {\n    if (isHome(e)) {\n      e.preventDefault();\n      const currentIndex = (e.target as UDExMastheadMenuItem).index;\n      const firstItem = this.items[0];\n\n      this.items[currentIndex]._tabIndex = \"-1\";\n      firstItem._tabIndex = \"0\";\n      firstItem.focus();\n    }\n  }\n\n  handleSingleRegionMode(): void {\n    this.setActiveRegion(this.regionsData[0]);\n    this.setActiveCountries([...this.regionsData[0].countries]);\n    this._isActiveRegionOpen = true;\n  }\n\n  focusBackBtn(): void {\n    const backBtn = this.shadowRoot?.querySelector<HTMLElement>(\".udex-masthead-country-selector__region-back-item\") || null;\n    backBtn?.focus();\n  }\n\n  focusRegionByIndex(): void {\n    const regionItems = this.shadowRoot?.querySelectorAll<HTMLElement>(\".udex-masthead-country-selector__item_region\") || [];\n    regionItems[this._activeRegionIndex].focus();\n  }\n\n  fireEventRegionItemClick(e: CustomEvent | KeyboardEvent): void {\n    const { label } = e.target as UDExMastheadMenuItem;\n\n    this.fireEvent<RegionItemClickEventDetail>(\"region-item-click\", {\n      item: {\n        title: label,\n        countries: this._activeRegion?.countries || [],\n      },\n      originalEvent: e,\n    });\n  }\n\n  fireEventCountryItemClick(e: CustomEvent | KeyboardEvent): void {\n    const item = e.target as UDExMastheadMenuItem;\n    const { label, url } = item;\n\n    this.fireEvent<CountryItemClickEventDetail>(\"country-item-click\", {\n      item: {\n        displayTitle: label,\n        countryCode: item.getAttribute(\"_country-code\") || \"\",\n        url: url || \"\",\n      },\n      originalEvent: e,\n    });\n  }\n\n  setActiveRegion(region: Region | null): void {\n    this._activeRegion = region;\n  }\n\n  setActiveCountries(countries: Array<Country>): void {\n    this._activeCountries = countries;\n  }\n\n  setTabIndexForItems(): void {\n    this.items.forEach((item, index) => {\n      if (this._activeRegionIndex > 0 && this._shouldFocusRegionByIndex) {\n        item._tabIndex = index === this._activeRegionIndex ? \"0\" : \"-1\";\n        return;\n      }\n\n      item._tabIndex = index === 0 ? \"0\" : \"-1\";\n    });\n  }\n\n  get items(): Array<UDExMastheadMenuItem> {\n    const items = this.shadowRoot?.querySelectorAll<UDExMastheadMenuItem>(\".udex-masthead-country-selector__item\");\n    return items ? Array.from(items) : [];\n  }\n\n  get regionsData(): Array<Region> {\n    return this.regions ? JSON.parse(this.regions) as Array<Region> : [];\n  }\n\n  get isRtlDirection(): boolean {\n    return this._direction === \"rtl\";\n  }\n\n  get homeSearchMode(): UDExSearchMode {\n    return UDExSearchMode.HomeSearch;\n  }\n\n  get isSingleMode(): boolean {\n    return this.regionsData.length === 1;\n  }\n}\n\nUDExMastheadCountrySelector.define();\n\nexport default UDExMastheadCountrySelector;\n"]}

package/dist/MastheadItem.d.ts

@@ -4,6 +4,7 @@ import "@ui5/webcomponents-icons/dist/search.js";
 import UDExAvatar from "./Avatar.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import UDExMastheadShell from "./MastheadShell.js";
+import { Target } from "./types/common.js";
 export interface IMastheadItem {
     text?: string;
     selected?: boolean;
@@ -29,12 +30,6 @@ export type ItemClickEventDetail = {
     originalEvent: Event;
     item: UDExMastheadItem;
 };
-export declare enum Target {
-    _blank = "_blank",
-    _parent = "_parent",
-    _self = "_self",
-    _top = "_top"
-}
 /**
  * @class
  *
@@ -46,7 +41,7 @@ export declare enum Target {
  * For the <code>udex-masthead-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MastheadItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/MastheadItem.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -81,6 +76,13 @@ declare class UDExMastheadItem extends UI5Element implements IMastheadItem {
      * @default false
      */
     selected: boolean;
+    /**
+     * Defines if the arrow icon is hidden.
+     *
+     * @public
+     * @default false
+     */
+    hideArrowIcon: boolean;
     /**
      * Defines the icon in the item.
      *
@@ -88,6 +90,20 @@ declare class UDExMastheadItem extends UI5Element implements IMastheadItem {
      * @default ""
      */
     icon: string;
+    /**
+     * Defines the image in the item.
+     *
+     * @public
+     * @default ""
+     */
+    image: string;
+    /**
+     * Defines an alt text for item image
+     *
+     * @default ""
+     * @public
+     */
+    imageAlt: string;
     /**
      * Defines the href of the item.
      *
@@ -120,20 +136,20 @@ declare class UDExMastheadItem extends UI5Element implements IMastheadItem {
      * @default ""
      * @public
      */
-    iconAlt?: string;
+    iconAlt: string;
     /**
      * Hide active border for item
      *
      * @default ""
      * @public
      */
-    hideActiveBorder?: boolean;
+    hideActiveBorder: boolean;
     /**
      * Defines direction of the text.
      *
      * @private
      */
-    _direction?: string;
+    _direction: string;
     /**
      * Defines the mobile mode for component
      *
@@ -165,6 +181,7 @@ declare class UDExMastheadItem extends UI5Element implements IMastheadItem {
     handleKeyEscape(): void;
     handleKeyEscapeMobile(): void;
     handleItemClick(e: Event): void;
+    handleSelectedChange(): void;
     setDropdownInsetStart(): void;
     calculateMarginInlineStart(rect: DOMRect): number | null;
     handleDirection(): void;
@@ -186,6 +203,7 @@ declare class UDExMastheadItem extends UI5Element implements IMastheadItem {
     get hasArrowDown(): boolean;
     get isProfileBtn(): boolean;
     get isExploreBtn(): boolean;
+    get isCountrySelectorBtn(): boolean;
     get accessibleLabel(): string;
     get isMenuItem(): boolean;
     get isMobile(): boolean;

package/dist/MastheadItem.js

@@ -20,16 +20,10 @@ import { OPENS_IN_A_NEW_WINDOW, PROFILE } from "./generated/i18n/i18n-defaults.j
 import UDExMastheadMenu from "./MastheadMenu.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
+import { Target } from "./types/common.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
-const breakpointSizeM = 1279;
-export var Target;
-(function (Target) {
-    Target["_blank"] = "_blank";
-    Target["_parent"] = "_parent";
-    Target["_self"] = "_self";
-    Target["_top"] = "_top";
-})(Target || (Target = {}));
 /**
  * @class
  *
@@ -41,7 +35,7 @@ export var Target;
  * For the <code>udex-masthead-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MastheadItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/MastheadItem.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -49,7 +43,7 @@ export var Target;
  */
 let UDExMastheadItem = UDExMastheadItem_1 = class UDExMastheadItem extends UI5Element {
     static async onDefine() {
-        UDExMastheadItem_1.i18nBundle = await getI18nBundle("@udex/web-components");
+        UDExMastheadItem_1.i18nBundle = await getI18nBundle("@sapudex/web-components");
     }
     onEnterDOM() {
         if (isDesktop()) {
@@ -65,9 +59,11 @@ let UDExMastheadItem = UDExMastheadItem_1 = class UDExMastheadItem extends UI5El
         }
     }
     handleFocusout(e) {
-        const eTarget = e.relatedTarget;
-        const focusedAvatarItem = eTarget?.shadowRoot?.querySelector("[ui5-avatar]");
-        if (!this.isMobile && (!this.isProfileBtn || eTarget === null || focusedAvatarItem)) {
+        if (e.relatedTarget === null) {
+            return;
+        }
+        const eTarget = e.target;
+        if (!this.isMobile && eTarget.getAttribute("slot") === "dropdown") {
             this.closeDropdown();
         }
     }
@@ -95,12 +91,15 @@ let UDExMastheadItem = UDExMastheadItem_1 = class UDExMastheadItem extends UI5El
         this._mastheadShell.mobileBtn?.focus();
     }
     handleItemClick(e) {
-        this.selected = this.isMobile ? true : !this.selected;
+        this.handleSelectedChange();
         this.fireEvent("item-click", {
             item: this,
             originalEvent: e,
         });
     }
+    handleSelectedChange() {
+        this.selected = this.isMobile ? true : !this.selected;
+    }
     setDropdownInsetStart() {
         const dropdown = this.getDomElement(".udex-masthead-item__dropdown");
         if (dropdown) {
@@ -155,10 +154,11 @@ let UDExMastheadItem = UDExMastheadItem_1 = class UDExMastheadItem extends UI5El
         return document.querySelector("[udex-masthead-shell]");
     }
     get additionalClass() {
-        const iconClass = this.icon ? "udex-masthead-item__button--icon" : "";
+        const iconClass = (this.icon || this.image) ? "udex-masthead-item__button--icon" : "";
         const profileClass = this.isProfileBtn ? "udex-masthead-item__button--profile" : "";
         const exploreClass = this.isExploreBtn ? "udex-masthead-item__button--explore" : "";
-        return `udex-masthead-item ${iconClass} ${profileClass} ${exploreClass}`.trim();
+        const countrySelectorClass = this.isCountrySelectorBtn ? "udex-masthead-item__button--country-selector" : "";
+        return `udex-masthead-item ${iconClass} ${profileClass} ${exploreClass} ${countrySelectorClass}`.trim();
     }
     get profileAvatar() {
         return this.querySelector("[udex-avatar]");
@@ -198,7 +198,7 @@ let UDExMastheadItem = UDExMastheadItem_1 = class UDExMastheadItem extends UI5El
         return !!this.getSlottedNodes("dropdown").length;
     }
     get hasArrowDown() {
-        return this.hasDropdownSlot && !this.isProfileBtn && !this.icon.length;
+        return this.hasDropdownSlot && !this.isProfileBtn && !this.icon.length && !this.hideArrowIcon;
     }
     get isProfileBtn() {
         return this.getAttribute("slot") === "profile";
@@ -206,6 +206,9 @@ let UDExMastheadItem = UDExMastheadItem_1 = class UDExMastheadItem extends UI5El
     get isExploreBtn() {
         return this.getAttribute("slot") === "exploreSAP";
     }
+    get isCountrySelectorBtn() {
+        return this.getAttribute("slot") === "countrySelector";
+    }
     get accessibleLabel() {
         return this.accessibleName || this.innerText || (this.isProfileBtn ? UDExMastheadItem_1.i18nBundle.getText(PROFILE) : "");
     }
@@ -213,7 +216,7 @@ let UDExMastheadItem = UDExMastheadItem_1 = class UDExMastheadItem extends UI5El
         return true;
     }
     get isMobile() {
-        return window.innerWidth < breakpointSizeM || this.mastheadShell?._isMobileMode;
+        return BreakpointUtils.isBelow("M") || this.mastheadShell?._isMobileMode;
     }
     get isTargetBlank() {
         return this.target === Target._blank;
@@ -223,20 +226,29 @@ let UDExMastheadItem = UDExMastheadItem_1 = class UDExMastheadItem extends UI5El
     }
 };
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExMastheadItem.prototype, "subItems", void 0);
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExMastheadItem.prototype, "menuTitle", void 0);
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExMastheadItem.prototype, "text", void 0);
 __decorate([
     property({ type: Boolean })
 ], UDExMastheadItem.prototype, "selected", void 0);
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: Boolean })
+], UDExMastheadItem.prototype, "hideArrowIcon", void 0);
+__decorate([
+    property({ type: String })
 ], UDExMastheadItem.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], UDExMastheadItem.prototype, "image", void 0);
+__decorate([
+    property({ type: String })
+], UDExMastheadItem.prototype, "imageAlt", void 0);
 __decorate([
     property({ type: String })
 ], UDExMastheadItem.prototype, "href", void 0);
@@ -250,7 +262,7 @@ __decorate([
     property({ type: String })
 ], UDExMastheadItem.prototype, "accessibleRole", void 0);
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExMastheadItem.prototype, "iconAlt", void 0);
 __decorate([
     property({ type: Boolean })