@sapudex/web-components 0.199.3 → 0.225.0

package/src/MastheadShell.ts

@@ -7,7 +7,7 @@ import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import {
-  isLeft, isRight, isSpace, isEnter,
+  isLeft, isRight, isSpace, isEnter, isEscape,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/menu2.js";
@@ -16,12 +16,13 @@ import "@ui5/webcomponents-icons/dist/cart.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { MAIN_LINKS } from "./generated/i18n/i18n-defaults.js";
-import UDExMastheadItem from "./MastheadItem.js";
+import UDExMastheadItem, { DropdownItemAction } from "./MastheadItem.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExControlButton from "./ControlButton.js";
 import UDExSearch from "./Search.js";
 import UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
 import UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
+import UDExMastheadCountrySelector from "./MastheadCountrySelector.js";
 import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.lit.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 
@@ -29,8 +30,14 @@ import { BreakpointUtils } from "./utils/Breakpoints.js";
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
 
 const canvasContentFont = "16px '72 Brand Variable'";
-type MastheadSlottedItem = UDExMastheadItem | UDExMastheadProfileMenu | UDExMastheadMenu | undefined | null;
+type MastheadSlottedItem = UDExMastheadItem | UDExMastheadProfileMenu | UDExMastheadMenu | UDExMastheadCountrySelector | undefined | null;
 type MastheadItemType = UDExMastheadItem | null | undefined;
+export const MastheadOriginalEvent = {
+  detail: {
+    originalEvent: { type: Event },
+  },
+};
+
 /**
  * @class
  *
@@ -42,7 +49,7 @@ type MastheadItemType = UDExMastheadItem | null | undefined;
  * For the <code>udex-masthead-shell</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MastheadShell.js";</code>
+ * <code>import "@sapudex/web-components/dist/MastheadShell.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -82,49 +89,74 @@ type MastheadItemType = UDExMastheadItem | null | undefined;
  *
  * @public
  */
-@event("search-click")
+@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")
 
 /**
  * Fired event when the user clicks the cart button trigger.
  *
  * @public
  */
-@event("cart-click")
+@event("cart-click", MastheadOriginalEvent)
 
 /**
  * Fired event when the user clicks the profile button trigger.
  *
  * @public
  */
-@event("profile-click")
+@event("profile-click", MastheadOriginalEvent)
+
+/**
+ * Fired event when the user clicks the country selector button trigger.
+ *
+ * @public
+ */
+@event("country-selector-click", MastheadOriginalEvent)
 
 /**
  * Fired event when the user clicks the logo.
  *
  * @public
  */
-@event("logo-click", {
-  detail: {
-    originalEvent: {
-      type: Event,
-    },
-  },
-})
+@event("logo-click", MastheadOriginalEvent)
 
 /**
  * Fired event when the user clicks the site label.
  *
  * @public
+ * @public
  */
-@event("site-label-click", {
-  detail: {
-    originalEvent: {
-      type: Event,
-    },
-  },
-})
+@event("site-label-click", MastheadOriginalEvent)
 
 class UDExMastheadShell extends UI5Element {
+  /**
+   * Slot for country selector item.
+   *
+   * @public
+   */
+  @slot({ type: Node })
+    countrySelector!: Array<UDExMastheadItem>;
+
   /**
    * Slot for mobile menu
    *
@@ -181,7 +213,7 @@ class UDExMastheadShell extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     homeUrl!: string;
 
   /**
@@ -226,7 +258,7 @@ class UDExMastheadShell extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     logoUrl!: string;
 
   /**
@@ -235,7 +267,7 @@ class UDExMastheadShell extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     logoTitle!: string;
 
   /**
@@ -244,7 +276,7 @@ class UDExMastheadShell extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     siteLabel!: string;
 
   /**
@@ -261,8 +293,8 @@ class UDExMastheadShell extends UI5Element {
    * default: ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    closeButtonAccessibleName?: string;
+  @property({ type: String })
+    closeButtonAccessibleName!: string;
 
   /**
    * Defines an aria label for the homepage link
@@ -321,7 +353,7 @@ class UDExMastheadShell extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExMastheadShell.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExMastheadShell.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   constructor() {
@@ -334,8 +366,6 @@ class UDExMastheadShell extends UI5Element {
     this._searchOpener = this.searchOpener;
     this._mobileMenu = this.mastheadMobileMenu;
 
-    this.handleOutsideClick();
-
     if (this._isSearchOpened) {
       this.focusSearchInput();
     }
@@ -364,6 +394,7 @@ class UDExMastheadShell extends UI5Element {
 
     if (this._shouldHandleResize && this._isMobileMenuOpen) {
       this.closeMobileMenu();
+      this.resetSelectedItems();
       return;
     }
 
@@ -393,6 +424,19 @@ class UDExMastheadShell extends UI5Element {
     this.handleRightArrow(e);
   }
 
+  handleSearchKeyDown(e: CustomEvent): void {
+    e.stopPropagation();
+    const keyEvent = e.detail as KeyboardEvent;
+
+    if (isEscape(keyEvent)) {
+      if (this.showSearchByDefault && this.isAtLeastBreakpointSizeM) {
+        return;
+      }
+      this.closeSearch();
+      this.focusSearchBtn();
+    }
+  }
+
   handleLeftArrow(e: KeyboardEvent): void {
     if (isLeft(e)) {
       const currentItem = e.target as UDExMastheadItem;
@@ -427,28 +471,32 @@ class UDExMastheadShell extends UI5Element {
 
   handleSearchClick(e: CustomEvent): void {
     e.stopPropagation();
-    this._isSearchOpened = true;
-    this.resetSelectedItems();
-    if (this._searchOpener) {
-      this._searchOpener.selected = false;
-    }
-    this.fireEvent("search-click");
+    this.fireEvent("search-click", { originalEvent: e });
+    this.openSearch();
   }
 
-  handleCartClick(e: CustomEvent) {
+  handleCartClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.fireEvent("cart-click");
+    this.fireEvent("cart-click", { originalEvent: e });
   }
 
   handleProfileClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.fireEvent("profile-click");
+    this.fireEvent("profile-click", { originalEvent: e });
   }
 
-  handleMobileMenuClick(e: CustomEvent) {
+  handleCountrySelectorClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.setSelectedItem(e);
+    this.fireEvent("country-selector-click", { originalEvent: e });
+  }
+
+  handleOpenMobileMenu(): void {
+    const clickedItem = this.mobileBtn as UDExMastheadItem;
+    if (!clickedItem) {
+      return;
+    }
 
+    this.resetSelectedItems(clickedItem._id);
     this._isMobileMenuOpen = true;
 
     if (this.bodyOverflow) {
@@ -458,32 +506,20 @@ class UDExMastheadShell extends UI5Element {
     this.fireEvent("mobile-menu-open");
   }
 
-  handleMobileCloseClick(e: CustomEvent) {
-    e.preventDefault();
-    this.closeMobileMenu();
-    this.fireMobileMenuCloseEvent();
+  handleCloseSearch(e: CustomEvent): void {
+    this._closeBtnClicked = true;
+    this.fireEvent("search-close-click", { originalEvent: e });
+    this.closeSearch();
   }
 
-  handleEnterAndSpaceOnCloseBtn(e: KeyboardEvent) {
+  handleEnterAndSpaceOnCloseBtn(e: KeyboardEvent): void {
     if (isSpace(e) || isEnter(e)) {
       e.preventDefault();
       this.closeMobileMenu();
-      this.fireMobileMenuCloseEvent();
       this.mobileBtn?.focus();
     }
   }
 
-  handleOutsideClick(): void {
-    document.addEventListener("click", (e: Event) => {
-      const el = e.target as UDExMastheadItem;
-      const isMobile = window.innerWidth < 1280 || this._isMobileMode;
-      const isDropdownSlot = el.getAttribute("slot") === "dropdown";
-      if (!isDropdownSlot && !el.isMenuItem && !isMobile) {
-        this.resetSelectedItems();
-      }
-    });
-  }
-
   focusSearchInput(): void {
     const searchSlot = this.querySelector<UDExSearch>("[udex-search]");
     if (searchSlot) {
@@ -507,23 +543,22 @@ class UDExMastheadShell extends UI5Element {
     menuItems[nextSelectIndex].focus();
   }
 
-  resetSelectedItems(): void {
+  resetSelectedItems(clickedId?: string): void {
     this.getSelectedItems().forEach(item => {
-      item.selected = false;
+      if (item._id !== clickedId && item.selected) {
+        if (item.hasDropdownSlot) {
+          item.fireDropdownCloseEvent(item.eventItemTitle, DropdownItemAction.ClickOutside);
+        }
+        item.selected = false;
+      }
     });
   }
 
   setSelectedItem(e: CustomEvent): void {
     const clickedItem: UDExMastheadItem = e.detail.item;
-    if (!clickedItem) {
-      return;
+    if (clickedItem) {
+      this.resetSelectedItems(clickedItem._id);
     }
-
-    this.getSelectedItems().forEach(item => {
-      if (item._id !== clickedItem._id) {
-        item.selected = false;
-      }
-    });
   }
 
   focusSearchBtn(): void {
@@ -533,11 +568,6 @@ class UDExMastheadShell extends UI5Element {
     }
   }
 
-  hideSearch(): void {
-    this._isSearchOpened = false;
-    this._closeBtnClicked = true;
-  }
-
   getCurrentIndex(item: UDExMastheadItem): number {
     return this.menuItems.indexOf(item);
   }
@@ -548,6 +578,7 @@ class UDExMastheadShell extends UI5Element {
       ...this.exploreSAP,
       ...this.cart,
       ...this.profile,
+      ...this.countrySelector,
       ...(this.mobileBtn && this.closeBtn ? [this.mobileBtn, this.closeBtn] : []),
     ];
 
@@ -575,7 +606,11 @@ class UDExMastheadShell extends UI5Element {
   }
 
   getItemIconWidth(): number {
-    const style = window.getComputedStyle(this.profileItem);
+    const item = this.querySelector("[udex-masthead-item]");
+
+    if (!item) { return 0; }
+
+    const style = window.getComputedStyle(item);
     const itemIconWidthVar = style.getPropertyValue("--udex-masthead-item-button-icon-size");
     return parseInt(itemIconWidthVar);
   }
@@ -637,16 +672,6 @@ class UDExMastheadShell extends UI5Element {
     style.removeProperty("overflow");
   }
 
-  closeMobileMenu(): void {
-    this._isMobileMenuOpen = false;
-    this.resetSelectedItems();
-    this._mobileMenu?.showFirstLevelMenu();
-
-    if (this.bodyOverflow) {
-      this.removeOverflowBody();
-    }
-  }
-
   setMobileMode(): void {
     this._isMobileMode = true;
     this.slottedItems.forEach((item: MastheadSlottedItem) => {
@@ -663,12 +688,80 @@ class UDExMastheadShell extends UI5Element {
     });
   }
 
-  fireMobileMenuCloseEvent(): void {
+  /**
+   * Close the search panel.
+   * @public
+   */
+  closeSearch(): void {
+    this._isSearchOpened = false;
+    this.fireEvent("search-closed");
+  }
+
+  /**
+   * Open the search panel.
+   * @public
+   */
+  openSearch(): void {
+    const shouldPreventOpeningSearch = this._isSearchOpened
+      || (this.isBreakpointSizeM && !this.showSearchByDefault)
+      || this._isMobileMode
+      || (this.isAtLeastBreakpointSizeM && this.showSearchByDefault);
+
+    if (shouldPreventOpeningSearch) {
+      return;
+    }
+
+    this._isSearchOpened = true;
+    this.resetSelectedItems();
+
+    if (this._searchOpener) {
+      this._searchOpener.selected = false;
+    }
+
+    this.fireEvent("search-opened");
+  }
+
+  /**
+   * Open the mobile menu panel.
+   * @public
+   */
+  openMobileMenu(): void {
+    if (!this._isMobileMenuOpen && (this._isMobileMode || this.isBreakpointSizeM)) {
+      this.mobileBtn?.handleSelectedChange();
+      this.handleOpenMobileMenu();
+    }
+  }
+
+  /**
+   * Close the mobile menu panel.
+   * @public
+   */
+  closeMobileMenu(): void {
+    if (!this._isMobileMenuOpen) {
+      return;
+    }
+
+    (this.mobileBtn as UDExMastheadItem).selected = false;
+    this._isMobileMenuOpen = false;
+    this._mobileMenu?.showFirstLevelMenu();
+
+    if (this.bodyOverflow) {
+      this.removeOverflowBody();
+    }
+
     this.fireEvent("mobile-menu-close");
   }
 
   get slottedItems(): (MastheadSlottedItem)[] {
-    return [this.profileItem, this.cartItem, this.profileMenu, this.profileMenuLinks];
+    return [
+      this.profileItem,
+      this.profileMenu,
+      this.cartItem,
+      this.profileMenu,
+      this.profileMenuLinks,
+      this.countrySelectorItem,
+      this.countrySelectorMenu,
+    ];
   }
 
   get searchOpener(): MastheadItemType {
@@ -695,6 +788,10 @@ class UDExMastheadShell extends UI5Element {
     return this.getSlottedNodes<UDExMastheadItem>("profile")[0];
   }
 
+  get countrySelectorItem(): UDExMastheadItem {
+    return this.getSlottedNodes<UDExMastheadItem>("countrySelector")[0];
+  }
+
   get cartItem(): MastheadItemType {
     return this.getSlottedNodes<UDExMastheadItem>("cart")[0];
   }
@@ -703,6 +800,10 @@ class UDExMastheadShell extends UI5Element {
     return this.querySelector("[udex-masthead-profile-menu]")!;
   }
 
+  get countrySelectorMenu(): UDExMastheadCountrySelector {
+    return this.querySelector("[udex-masthead-country-selector]")!;
+  }
+
   get profileMenuLinks(): UDExMastheadMenu | undefined | null {
     return this.profileMenu?.shadowRoot?.querySelector("[udex-masthead-menu]");
   }
@@ -723,6 +824,10 @@ class UDExMastheadShell extends UI5Element {
     return !!this.exploreSAP.length;
   }
 
+  get hasCountrySelector(): boolean {
+    return !!this.countrySelector.length;
+  }
+
   get hasMobileMenuButtons(): boolean {
     return !!this.mobileMenu.length;
   }
@@ -731,6 +836,10 @@ class UDExMastheadShell extends UI5Element {
     return BreakpointUtils.isAtMost("M");
   }
 
+  get isAtLeastBreakpointSizeM(): boolean {
+    return BreakpointUtils.isAtLeast("M");
+  }
+
   get isMainMenuVisible(): boolean {
     return !this.showSearchByDefault && !this._isSearchOpened;
   }

package/src/MediaPlayer.hbs

@@ -10,22 +10,26 @@
 <audio
   id="{{playerElementId}}"
   class="udex-media-player__video  video-js {{aspectRatioClass}}"
-  preload="auto" 
->
-  <source src="{{source}}" type="{{type}}" />
+  preload="auto">
+  <source src="{{source}}" type="{{type}}"/>
 </audio>
 {{/inline}}
 
 {{#*inline "standard"}}
-  <video
+  <video-js
     id="{{playerElementId}}"
-    class="udex-media-player__video video-js {{aspectRatioClass}}"
-  >
+    class="udex-media-player__video video-js {{aspectRatioClass}}">
     <source src="{{source}}" type="{{type}}">
     {{#each _tracks}}
-      <track kind={{this.kind}} src='{{this.src}}' srclang='{{this.srclang}}' label='{{this.label}}' ?default="{{this.default}}"/>
+      <track
+        kind="{{this.kind}}"
+        src="{{this.src}}"
+        srclang="{{this.srclang}}"
+        label="{{this.label}}"
+        ?default="{{this.default}}"
+      />
     {{/each}}
-  </video>
+  </video-js>
 {{/inline}}
 
 {{#*inline "embed"}}
@@ -33,35 +37,37 @@
     <div class="video-js udex-media-player__iframe-poster {{aspectRatioClass}}">
       <div class="udex-media-player__vjs-poster" aria-disabled="false">
         <picture tabindex="-1"><img loading="lazy" alt="" src="{{poster}}" width="{{width}}" height="{{height}}"></picture>
-        <button class="vjs-big-play-button" type="button" title="Play Video" aria-disabled="false" @click={{handleEmbedPlay}}>
+        <button class="vjs-big-play-button" type="button" title="Play Video" aria-disabled="false" @click="{{handleEmbedPlay}}">
           <ui5-icon aria-label="Play Video" name="play" ui5-icon=""></ui5-icon>
         </button>
       </div>
     </div>
   {{else}}
     {{#if _youtubeSrc}}
-      <udex-media-player-youtube 
-      source="{{source}}" 
-      width="{{width}}" 
-      height="{{height}}" 
-      class="video-js {{aspectRatioClass}}" ?fluid-mode="{{embedVideoFluidClass}}"
-      @playing="{{handleEmbedVideoPlaying}}"
-      @ended="{{handleEmbedVideoEnded}}"
-      @ready="{{handleEmbedVideoReady}}"
-      @pause="{{handleEmbedVideoPause}}"></udex-media-player-youtube>
+      <udex-media-player-youtube
+        source="{{source}}"
+        width="{{width}}"
+        height="{{height}}"
+        class="video-js {{aspectRatioClass}}" ?fluid-mode="{{embedVideoFluidClass}}"
+        @playing="{{handleEmbedVideoPlaying}}"
+        @ended="{{handleEmbedVideoEnded}}"
+        @ready="{{handleEmbedVideoReady}}"
+        @pause="{{handleEmbedVideoPause}}">
+      </udex-media-player-youtube>
     {{/if}}
     {{#if _vimeoSrc}}
-      <udex-media-player-vimeo 
-      source="{{source}}" 
-      width="{{width}}" 
-      height="{{height}}" 
-      title="{{title}}" 
-      aspect-ratio-class="{{aspectRatioClass}}" 
-      ?fluid-mode="{{embedVideoFluidClass}}"
-      @playing="{{handleEmbedVideoPlaying}}"
-      @ended="{{handleEmbedVideoEnded}}"
-      @ready="{{handleEmbedVideoReady}}"
-      @pause="{{handleEmbedVideoPause}}"></udex-media-player-vimeo>
+      <udex-media-player-vimeo
+        source="{{source}}"
+        width="{{width}}"
+        height="{{height}}"
+        title="{{title}}"
+        aspect-ratio-class="{{aspectRatioClass}}"
+        ?fluid-mode="{{embedVideoFluidClass}}"
+        @playing="{{handleEmbedVideoPlaying}}"
+        @ended="{{handleEmbedVideoEnded}}"
+        @ready="{{handleEmbedVideoReady}}"
+        @pause="{{handleEmbedVideoPause}}">
+      </udex-media-player-vimeo>
     {{/if}}
   {{/if}}
 {{/inline}}

package/src/MediaPlayer.ts

@@ -12,6 +12,7 @@ import Player from "video.js/dist/types/player.js";
 import type SeekBar from "video.js/dist/types/control-bar/progress-control/seek-bar";
 import UDExMediaPlayerYoutube from "./MediaPlayerYoutube.js";
 import UDExMediaPlayerVimeo, { VimeoPlayer } from "./MediaPlayerVimeo.js";
+import mapLangFile from "./mediaPlayerLanguageMapping.js";
 
 // Template
 import MediaPlayerTemplate from "./generated/templates/MediaPlayerTemplate.lit.js";
@@ -51,7 +52,7 @@ export interface VideoJSPlayer extends Player{
  * For the <code>udex-media-player</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MediaPlayer.js";</code>
+ * <code>import "@sapudex/web-components/dist/MediaPlayer.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -457,6 +458,7 @@ class UDExMediaPlayer extends UI5Element {
       controls: true,
       poster: this.poster,
       audioOnly: this.audioOnly,
+      bigPlayButton: true,
       controlBar: {
         playToggle: true,
         volumePanel: true,
@@ -490,7 +492,7 @@ class UDExMediaPlayer extends UI5Element {
 
   async setupLanguage(language: string) {
     try {
-      return await import(`video.js/dist/lang/${language}.json`);
+      return await mapLangFile(language);
     } catch (err) {
       console.warn("Cannot load language file", err);
     }
@@ -509,7 +511,11 @@ class UDExMediaPlayer extends UI5Element {
       const options = this.getOptionsValue();
       const language: string = options?.language;
       if (language) {
-        videojs.addLanguage(language, await this.setupLanguage(language));
+        const languageData = await this.setupLanguage(language);
+        videojs.addLanguage(language, {
+          ...languageData,
+          ...languageData?.default,
+        });
       }
 
       this.player = videojs(this.shadowRoot?.querySelector(".video-js") || "", options);

package/src/MediaPlayerVimeo.ts

@@ -22,7 +22,7 @@ export type VimeoPlayer = Player;
  * For the <code>udex-media-player-vimeo</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MediaPlayerVimeo.js";</code>
+ * <code>import "@sapudex/web-components/dist/MediaPlayerVimeo.js";</code>
  *
  * @constructor
  * @extends UI5Element

package/src/MediaPlayerYoutube.ts

@@ -39,7 +39,7 @@ declare global {
  * For the <code>udex-media-player-youtube</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MediaPlayerYoutube.js";</code>
+ * <code>import "@sapudex/web-components/dist/MediaPlayerYoutube.js";</code>
  *
  * @constructor
  * @extends UI5Element

package/src/MessageStrip.hbs

@@ -26,7 +26,7 @@
           size="Small"
           icon="decline"
           design="Tertiary"
-          @click={{_closeClick}}
+          @click="{{_closeClick}}"
           tooltip="{{_closeButtonText}}">
         </udex-button>
     {{/unless}}

package/src/MessageStrip.ts

@@ -100,7 +100,7 @@ class UDExMessageStrip extends MessageStrip {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExMessageStrip.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExMessageStrip.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onBeforeRendering() {